\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 /**\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) {\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 _super.prototype.destroy.call(this);\n this.unwireEvents();\n this.tempId.forEach(function (ele) {\n if (!isNOU(_this.element.querySelector(ele))) {\n document.body.appendChild(_this.element.querySelector(ele)).style.display = 'none';\n }\n });\n while (this.element.lastElementChild) {\n this.element.removeChild(this.element.lastElementChild);\n }\n if (this.trgtEle) {\n this.element.appendChild(this.ctrlTem);\n }\n this.clearProperty();\n this.popObj = null;\n this.tbarAlign = null;\n this.remove(this.element, 'e-toolpop');\n if (this.cssClass) {\n removeClass([this.element], this.cssClass.split(' '));\n }\n this.element.removeAttribute('style');\n ['aria-disabled', 'aria-orientation', 'aria-haspopup', 'role'].forEach(function (attrb) {\n return _this.element.removeAttribute(attrb);\n });\n };\n /**\n * Initialize the event handler\n *\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 if (this.allowKeyboard) {\n this.wireKeyboardEvent();\n }\n };\n Toolbar.prototype.wireKeyboardEvent = function () {\n this.keyModule = new KeyboardEvents(this.element, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs\n });\n EventHandler.add(this.element, 'keydown', this.docKeyDown, this);\n this.element.setAttribute('tabIndex', '0');\n };\n Toolbar.prototype.unwireKeyboardEvent = function () {\n if (this.keyModule) {\n EventHandler.remove(this.element, 'keydown', this.docKeyDown);\n this.keyModule.destroy();\n this.keyModule = null;\n }\n };\n Toolbar.prototype.docKeyDown = function (e) {\n if (e.target.tagName === 'INPUT') {\n return;\n }\n var popCheck = !isNOU(this.popObj) && isVisible(this.popObj.element) && this.overflowMode !== 'Extended';\n if (e.keyCode === 9 && e.target.classList.contains('e-hor-nav') === true && popCheck) {\n this.popObj.hide({ name: 'FadeOut', duration: 100 });\n }\n var keyCheck = (e.keyCode === 40 || e.keyCode === 38 || e.keyCode === 35 || e.keyCode === 36);\n if (keyCheck) {\n e.preventDefault();\n }\n };\n Toolbar.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'click', this.clickHandler);\n this.destroyScroll();\n this.unwireKeyboardEvent();\n window.removeEventListener('resize', this.resizeContext);\n EventHandler.remove(document, 'scroll', this.docEvent);\n EventHandler.remove(document, 'click', this.docEvent);\n };\n Toolbar.prototype.clearProperty = function () {\n this.tbarEle = [];\n this.tbarAlgEle = { lefts: [], centers: [], rights: [] };\n };\n Toolbar.prototype.docEvent = function (e) {\n var popEle = closest(e.target, '.e-popup');\n if (this.popObj && isVisible(this.popObj.element) && !popEle && this.overflowMode === 'Popup') {\n this.popObj.hide({ name: 'FadeOut', duration: 100 });\n }\n };\n Toolbar.prototype.destroyScroll = function () {\n if (this.scrollModule) {\n if (this.tbarAlign) {\n this.add(this.scrollModule.element, CLS_TBARPOS);\n }\n this.scrollModule.destroy();\n this.scrollModule = null;\n }\n };\n Toolbar.prototype.destroyItems = function () {\n if (this.element) {\n [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) { detach(el); });\n }\n var tbarItems = this.element.querySelector('.' + CLS_ITEMS);\n if (this.tbarAlign) {\n [].slice.call(tbarItems.children).forEach(function (el) {\n detach(el);\n });\n this.tbarAlign = false;\n this.remove(tbarItems, CLS_TBARPOS);\n }\n this.clearProperty();\n };\n Toolbar.prototype.destroyMode = function () {\n if (this.scrollModule) {\n this.remove(this.scrollModule.element, CLS_RTL);\n this.destroyScroll();\n }\n this.remove(this.element, CLS_EXTENDEDPOPOPEN);\n this.remove(this.element, CLS_EXTEANDABLE_TOOLBAR);\n var tempEle = this.element.querySelector('.e-toolbar-multirow');\n if (tempEle) {\n this.remove(tempEle, CLS_MULTIROW);\n }\n if (this.popObj) {\n this.popupRefresh(this.popObj.element, true);\n }\n };\n Toolbar.prototype.add = function (ele, val) {\n ele.classList.add(val);\n };\n Toolbar.prototype.remove = function (ele, val) {\n ele.classList.remove(val);\n };\n Toolbar.prototype.elementFocus = function (ele) {\n var fChild = ele.firstElementChild;\n if (fChild) {\n fChild.focus();\n this.activeEleSwitch(ele);\n }\n else {\n ele.focus();\n }\n };\n Toolbar.prototype.clstElement = function (tbrNavChk, trgt) {\n var clst;\n if (tbrNavChk && this.popObj && isVisible(this.popObj.element)) {\n clst = this.popObj.element.querySelector('.' + CLS_ITEM);\n }\n else if (this.element === trgt || tbrNavChk) {\n 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 if (popupCheck) {\n if (isVisible(this.popObj.element)) {\n nodes = [].slice.call(popupCheck.children);\n if (e.action === 'home') {\n ele = nodes[0];\n }\n else {\n ele = nodes[nodes.length - 1];\n }\n }\n }\n else {\n nodes = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM);\n if (e.action === 'home') {\n ele = nodes[0];\n }\n else {\n ele = nodes[nodes.length - 1];\n }\n }\n if (ele) {\n this.elementFocus(ele);\n }\n }\n break;\n case 'moveUp':\n case 'moveDown':\n if (!this.isVertical) {\n if (popObj && closest(trgt, '.e-popup')) {\n var popEle = popObj.element;\n var popFrstEle = popEle.firstElementChild;\n if ((value === 'previous' && popFrstEle === clst) || (value === 'next' && popEle.lastElementChild === clst)) {\n return;\n }\n else {\n this.eleFocus(clst, value);\n }\n }\n else if (e.action === 'moveDown' && popObj && isVisible(popObj.element)) {\n this.elementFocus(clst);\n }\n }\n else {\n if (e.action === 'moveUp') {\n this.eleFocus(clst, 'previous');\n }\n else {\n this.eleFocus(clst, 'next');\n }\n }\n break;\n case 'tab':\n if (!scrollChk && !navChk) {\n var ele_1 = clst.firstElementChild;\n if (rootEle === trgt) {\n if (this.activeEle) {\n this.activeEle.focus();\n }\n else {\n this.activeEleRemove(ele_1);\n ele_1.focus();\n }\n this.element.removeAttribute('tabindex');\n }\n }\n break;\n case 'popupClose':\n if (popObj && this.overflowMode !== 'Extended') {\n popObj.hide(popAnimate);\n }\n break;\n case 'popupOpen':\n if (!navChk) {\n return;\n }\n if (popObj && !isVisible(popObj.element)) {\n popObj.element.style.top = rootEle.offsetHeight + 'px';\n popObj.show({ name: 'FadeIn', duration: 100 });\n }\n else {\n popObj.hide(popAnimate);\n }\n break;\n }\n };\n Toolbar.prototype.keyActionHandler = function (e) {\n var trgt = e.target;\n if (trgt.tagName === 'INPUT' || trgt.tagName === 'TEXTAREA' || this.element.classList.contains(CLS_DISABLE)) {\n return;\n }\n e.preventDefault();\n var 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 rootEle.setAttribute('tabindex', !value ? '0' : '-1');\n if (this.activeEle) {\n this.activeEle.setAttribute('tabindex', !value ? '0' : '-1');\n }\n if (this.scrollModule) {\n this.scrollModule.disable(value);\n }\n if (this.popObj) {\n if (isVisible(this.popObj.element) && this.overflowMode !== 'Extended') {\n this.popObj.hide();\n }\n rootEle.querySelector('#' + rootEle.id + '_nav').setAttribute('tabindex', !value ? '0' : '-1');\n }\n };\n Toolbar.prototype.eleContains = function (el) {\n return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE) || el.getAttribute('disabled') || el.classList.contains(CLS_HIDDEN) || !isVisible(el);\n };\n Toolbar.prototype.eleFocus = function (closest, pos) {\n var sib = Object(closest)[pos + 'ElementSibling'];\n if (sib) {\n var skipEle = this.eleContains(sib);\n if (skipEle) {\n this.eleFocus(sib, pos);\n return;\n }\n this.elementFocus(sib);\n }\n else if (this.tbarAlign) {\n var elem = Object(closest.parentElement)[pos + 'ElementSibling'];\n if (!isNOU(elem) && elem.children.length === 0) {\n elem = Object(elem)[pos + 'ElementSibling'];\n }\n if (!isNOU(elem) && elem.children.length > 0) {\n if (pos === 'next') {\n var el = elem.querySelector('.' + CLS_ITEM);\n if (this.eleContains(el)) {\n this.eleFocus(el, pos);\n }\n else {\n el.firstElementChild.focus();\n this.activeEleSwitch(el);\n }\n }\n else {\n var el = elem.lastElementChild;\n if (this.eleContains(el)) {\n this.eleFocus(el, pos);\n }\n else {\n this.elementFocus(el);\n }\n }\n }\n }\n };\n Toolbar.prototype.clickHandler = function (e) {\n var _this = this;\n var trgt = e.target;\n var 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 this.initialize();\n this.renderControl();\n this.wireEvents();\n this.renderComplete();\n };\n Toolbar.prototype.initialize = function () {\n var width = formatUnit(this.width);\n var height = formatUnit(this.height);\n if (Browser.info.name !== 'msie' || this.height !== 'auto' || this.overflowMode === 'MultiRow') {\n setStyle(this.element, { 'height': height });\n }\n setStyle(this.element, { 'width': width });\n var ariaAttr = {\n 'role': 'toolbar', 'aria-disabled': 'false', 'aria-haspopup': 'false',\n 'aria-orientation': !this.isVertical ? 'horizontal' : 'vertical'\n };\n attributes(this.element, ariaAttr);\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n }\n };\n Toolbar.prototype.renderControl = function () {\n var ele = this.element;\n this.trgtEle = (ele.children.length > 0) ? ele.querySelector('div') : null;\n this.tbarAlgEle = { lefts: [], centers: [], rights: [] };\n this.renderItems();\n this.renderLayout();\n };\n Toolbar.prototype.renderLayout = function () {\n this.renderOverflowMode();\n if (this.tbarAlign) {\n this.itemPositioning();\n }\n if (this.popObj && this.popObj.element.childElementCount > 1 && this.checkPopupRefresh(this.element, this.popObj.element)) {\n this.popupRefresh(this.popObj.element, false);\n }\n this.separator();\n };\n Toolbar.prototype.itemsAlign = function (items, itemEleDom) {\n var innerItem;\n var innerPos;\n if (!this.tbarEle) {\n this.tbarEle = [];\n }\n for (var i = 0; i < items.length; i++) {\n innerItem = this.renderSubComponent(items[i], i);\n if (this.tbarEle.indexOf(innerItem) === -1) {\n this.tbarEle.push(innerItem);\n }\n if (!this.tbarAlign) {\n this.tbarItemAlign(items[i], itemEleDom, i);\n }\n innerPos = itemEleDom.querySelector('.e-toolbar-' + items[i].align.toLowerCase());\n if (innerPos) {\n if (!(items[i].showAlwaysInPopup && items[i].overflow !== 'Show')) {\n this.tbarAlgEle[(items[i].align + 's').toLowerCase()].push(innerItem);\n }\n innerPos.appendChild(innerItem);\n }\n else {\n itemEleDom.appendChild(innerItem);\n }\n }\n 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 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 this.element.querySelector('.' + CLS_TBARNAV).setAttribute('tabIndex', '0');\n this.element.querySelector('.' + CLS_TBARNAV).setAttribute('role', 'list');\n };\n Toolbar.prototype.separator = function () {\n var element = this.element;\n var eleItem = [].slice.call(element.querySelectorAll('.' + CLS_SEPARATOR));\n var 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[i].offsetLeft < 30 && eleItem[i].offsetLeft !== 0) {\n if (this.overflowMode === 'MultiRow') {\n eleItem[i].classList.add(CLS_MULTIROW_SEPARATOR);\n }\n else if (this.overflowMode === 'Extended') {\n eleItem[i].classList.add(CLS_EXTENDABLE_SEPARATOR);\n }\n }\n }\n };\n Toolbar.prototype.createPopupEle = function (ele, innerEle) {\n var innerNav = ele.querySelector('.' + CLS_TBARNAV);\n var vertical = this.isVertical;\n if (!innerNav) {\n this.createPopupIcon(ele);\n }\n innerNav = ele.querySelector('.' + CLS_TBARNAV);\n var innerNavDom = (vertical ? innerNav.offsetHeight : innerNav.offsetWidth);\n var eleWidth = ((vertical ? ele.offsetHeight : ele.offsetWidth) - (innerNavDom));\n this.element.classList.remove('e-rtl');\n setStyle(this.element, { direction: 'initial' });\n this.checkPriority(ele, innerEle, eleWidth, true);\n if (this.enableRtl) {\n this.element.classList.add('e-rtl');\n }\n this.element.style.removeProperty('direction');\n this.createPopup();\n };\n Toolbar.prototype.pushingPoppedEle = function (tbarObj, popupPri, ele, eleHeight, sepHeight) {\n var element = tbarObj.element;\n var 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[index]);\n ++nodePri;\n }\n else {\n ele.insertBefore(el, ele.children[nodes.length]);\n ++nodePri;\n }\n }\n else if (el.classList.contains(CLS_TBAROVERFLOW)) {\n ele.insertBefore(el, ele.firstChild);\n ++nodePri;\n }\n else if (tbarObj.tbResize && el.classList.contains(CLS_POPOVERFLOW) && ele.children.length > 0 && nodes.length === 0) {\n ele.insertBefore(el, ele.firstChild);\n ++nodePri;\n }\n else if (el.classList.contains(CLS_POPOVERFLOW)) {\n popupPri.push(el);\n }\n else if (tbarObj.tbResize) {\n ele.insertBefore(el, ele.childNodes[nodeIndex + nodePri]);\n ++nodeIndex;\n }\n else {\n ele.appendChild(el);\n }\n if (el.classList.contains(CLS_SEPARATOR)) {\n setStyle(el, { display: '', height: sepHeight + 'px' });\n }\n else {\n setStyle(el, { display: '', height: eleHeight + 'px' });\n }\n });\n popupPri.forEach(function (el) {\n ele.appendChild(el);\n });\n var tbarEle = selectAll('.' + CLS_ITEM, element.querySelector('.' + CLS_ITEMS));\n for (var i = tbarEle.length - 1; i >= 0; i--) {\n var tbarElement = tbarEle[i];\n if (tbarElement.classList.contains(CLS_SEPARATOR) && this.overflowMode !== 'Extended') {\n setStyle(tbarElement, { display: 'none' });\n }\n else {\n break;\n }\n }\n };\n Toolbar.prototype.createPopup = function () {\n var element = this.element;\n var sepHeight;\n var sepItem;\n if (this.overflowMode === 'Extended') {\n sepItem = element.querySelector('.' + CLS_SEPARATOR + ':not(.' + CLS_POPUP + ')');\n sepHeight = (element.style.height === 'auto' || element.style.height === '') ? null : sepItem.offsetHeight;\n }\n 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 setStyle(this.element, { overflow: '' });\n var eleStyles = window.getComputedStyle(this.element);\n var popup = new Popup(null, {\n relateTo: this.element,\n offsetY: (this.isVertical) ? 0 : this.getElementOffsetY(),\n enableRtl: this.enableRtl,\n open: this.popupOpen.bind(this),\n close: this.popupClose.bind(this),\n collision: { Y: this.enableCollision ? 'flip' : 'none' },\n position: this.enableRtl ? { X: 'left', Y: 'top' } : { X: 'right', Y: 'top' }\n });\n popup.appendTo(ele);\n if (this.overflowMode === 'Extended') {\n popup.width = parseFloat(eleStyles.width) + ((parseFloat(eleStyles.borderRightWidth)) * 2);\n popup.offsetX = 0;\n }\n EventHandler.add(document, 'scroll', this.docEvent.bind(this));\n EventHandler.add(document, 'click ', this.docEvent.bind(this));\n popup.element.style.maxHeight = popup.element.offsetHeight + 'px';\n if (this.isVertical) {\n popup.element.style.visibility = 'hidden';\n }\n if (this.isExtendedOpen) {\n var popupNav = this.element.querySelector('.' + CLS_TBARNAV);\n popupNav.classList.add(CLS_TBARNAVACT);\n classList(popupNav.firstElementChild, [CLS_POPUPICON], [CLS_POPUPDOWN]);\n this.element.querySelector('.' + CLS_EXTENDABLECLASS).classList.add(CLS_POPUPOPEN);\n }\n else {\n popup.hide();\n }\n this.popObj = popup;\n this.element.setAttribute('aria-haspopup', 'true');\n }\n else {\n var popupEle = this.popObj.element;\n setStyle(popupEle, { maxHeight: '', display: 'block' });\n setStyle(popupEle, { maxHeight: popupEle.offsetHeight + 'px', display: '' });\n }\n };\n Toolbar.prototype.tbarPopupHandler = function (isOpen) {\n if (this.overflowMode === 'Extended') {\n isOpen ? this.add(this.element, CLS_EXTENDEDPOPOPEN) : this.remove(this.element, CLS_EXTENDEDPOPOPEN);\n }\n };\n Toolbar.prototype.popupOpen = function (e) {\n var popObj = this.popObj;\n if (!this.isVertical) {\n popObj.offsetY = this.getElementOffsetY();\n popObj.dataBind();\n }\n var popupEle = this.popObj.element;\n var toolEle = this.popObj.element.parentElement;\n var popupNav = toolEle.querySelector('.' + CLS_TBARNAV);\n setStyle(popObj.element, { height: 'auto', maxHeight: '' });\n popObj.element.style.maxHeight = popObj.element.offsetHeight + 'px';\n if (this.overflowMode === 'Extended') {\n popObj.element.style.minHeight = '';\n }\n var popupElePos = popupEle.offsetTop + popupEle.offsetHeight + calculatePosition(toolEle).top;\n var popIcon = popupNav.firstElementChild;\n popupNav.classList.add(CLS_TBARNAVACT);\n classList(popIcon, [CLS_POPUPICON], [CLS_POPUPDOWN]);\n this.tbarPopupHandler(true);\n var scrollVal = isNOU(window.scrollY) ? 0 : window.scrollY;\n if (!this.isVertical && ((window.innerHeight + scrollVal) < popupElePos) && (this.element.offsetTop < popupEle.offsetHeight)) {\n var overflowHeight = (popupEle.offsetHeight - ((popupElePos - window.innerHeight - scrollVal) + 5));\n popObj.height = overflowHeight + 'px';\n for (var i = 0; i <= popupEle.childElementCount; i++) {\n var ele = popupEle.children[i];\n if (ele.offsetTop + ele.offsetHeight > overflowHeight) {\n overflowHeight = ele.offsetTop;\n break;\n }\n }\n setStyle(popObj.element, { maxHeight: overflowHeight + 'px' });\n }\n else if (this.isVertical) {\n var tbEleData = this.element.getBoundingClientRect();\n setStyle(popObj.element, { maxHeight: (tbEleData.top + this.element.offsetHeight) + 'px', bottom: 0, visibility: '' });\n }\n if (popObj) {\n 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 Toolbar.prototype.popupClose = function (e) {\n var element = this.element;\n var popupNav = element.querySelector('.' + CLS_TBARNAV);\n var popIcon = popupNav.firstElementChild;\n popupNav.classList.remove(CLS_TBARNAVACT);\n classList(popIcon, [CLS_POPUPDOWN], [CLS_POPUPICON]);\n this.tbarPopupHandler(false);\n };\n Toolbar.prototype.checkPriority = function (ele, inEle, eleWidth, pre) {\n var popPriority = this.popupPriCount > 0;\n var len = inEle.length;\n var eleWid = eleWidth;\n var eleOffset;\n var checkoffset;\n var sepCheck = 0;\n var itemCount = 0;\n var itemPopCount = 0;\n var checkClass = function (ele, val) {\n var rVal = false;\n val.forEach(function (cls) {\n if (ele.classList.contains(cls)) {\n rVal = true;\n }\n });\n return rVal;\n };\n for (var i = len - 1; i >= 0; i--) {\n var mrgn = void 0;\n var compuStyle = window.getComputedStyle(inEle[i]);\n if (this.isVertical) {\n mrgn = parseFloat((compuStyle).marginTop);\n mrgn += parseFloat((compuStyle).marginBottom);\n }\n else {\n mrgn = parseFloat((compuStyle).marginRight);\n mrgn += parseFloat((compuStyle).marginLeft);\n }\n var fstEleCheck = inEle[i] === this.tbarEle[0];\n if (fstEleCheck) {\n this.tbarEleMrgn = mrgn;\n }\n eleOffset = this.isVertical ? inEle[i].offsetHeight : inEle[i].offsetWidth;\n var eleWid_1 = fstEleCheck ? (eleOffset + mrgn) : eleOffset;\n if (checkClass(inEle[i], [CLS_POPPRI]) && popPriority) {\n inEle[i].classList.add(CLS_POPUP);\n if (this.isVertical) {\n setStyle(inEle[i], { display: 'none', minHeight: eleWid_1 + 'px' });\n }\n else {\n setStyle(inEle[i], { display: 'none', minWidth: eleWid_1 + 'px' });\n }\n itemPopCount++;\n }\n if (this.isVertical) {\n checkoffset = (inEle[i].offsetTop + inEle[i].offsetHeight + mrgn) > eleWidth;\n }\n else {\n checkoffset = (inEle[i].offsetLeft + inEle[i].offsetWidth + mrgn) > eleWidth;\n }\n if (checkoffset) {\n if (inEle[i].classList.contains(CLS_SEPARATOR)) {\n if (this.overflowMode === 'Extended') {\n if (itemCount === itemPopCount) {\n var sepEle = inEle[i];\n if (checkClass(sepEle, [CLS_SEPARATOR, CLS_TBARIGNORE])) {\n inEle[i].classList.add(CLS_POPUP);\n itemPopCount++;\n }\n }\n itemCount++;\n }\n else if (this.overflowMode === 'Popup') {\n if (sepCheck > 0 && itemCount === itemPopCount) {\n var sepEle = inEle[i + itemCount + (sepCheck - 1)];\n if (checkClass(sepEle, [CLS_SEPARATOR, CLS_TBARIGNORE])) {\n setStyle(sepEle, { display: 'none' });\n }\n }\n sepCheck++;\n itemCount = 0;\n itemPopCount = 0;\n }\n }\n else {\n itemCount++;\n }\n if (inEle[i].classList.contains(CLS_TBAROVERFLOW) && pre) {\n eleWidth -= ((this.isVertical ? inEle[i].offsetHeight : inEle[i].offsetWidth) + (mrgn));\n }\n else if (!checkClass(inEle[i], [CLS_SEPARATOR, CLS_TBARIGNORE])) {\n inEle[i].classList.add(CLS_POPUP);\n if (this.isVertical) {\n setStyle(inEle[i], { display: 'none', minHeight: eleWid_1 + 'px' });\n }\n else {\n setStyle(inEle[i], { display: 'none', minWidth: eleWid_1 + 'px' });\n }\n itemPopCount++;\n }\n else {\n eleWidth -= ((this.isVertical ? inEle[i].offsetHeight : inEle[i].offsetWidth) + (mrgn));\n }\n }\n }\n if (pre) {\n var popedEle = selectAll('.' + CLS_ITEM + ':not(.' + CLS_POPUP + ')', this.element);\n this.checkPriority(ele, popedEle, eleWid, false);\n }\n };\n Toolbar.prototype.createPopupIcon = function (element) {\n var id = element.id.concat('_nav');\n var className = 'e-' + element.id.concat('_nav ' + CLS_POPUPNAV);\n className = this.overflowMode === 'Extended' ? className + ' ' + CLS_EXTENDPOPUP : className;\n var nav = this.createElement('div', { id: id, className: className });\n if (Browser.info.name === 'msie' || Browser.info.name === 'edge') {\n nav.classList.add('e-ie-align');\n }\n var navItem = this.createElement('div', { className: CLS_POPUPDOWN + ' e-icons' });\n nav.appendChild(navItem);\n nav.setAttribute('tabindex', '0');\n nav.setAttribute('role', 'list');\n element.appendChild(nav);\n };\n Toolbar.prototype.tbarPriRef = function (inEle, indx, sepPri, el, des, elWid, wid, ig) {\n var ignoreCount = ig;\n var popEle = this.popObj.element;\n var query = '.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + '):not(.' + CLS_TBAROVERFLOW + ')';\n var priEleCnt = selectAll('.' + CLS_POPUP + ':not(.' + CLS_TBAROVERFLOW + ')', popEle).length;\n var checkClass = function (ele, val) {\n return ele.classList.contains(val);\n };\n if (selectAll(query, inEle).length === 0) {\n var eleSep = inEle.children[indx - (indx - sepPri) - 1];\n var ignoreCheck = (!isNOU(eleSep) && checkClass(eleSep, CLS_TBARIGNORE));\n if ((!isNOU(eleSep) && checkClass(eleSep, CLS_SEPARATOR) && !isVisible(eleSep)) || ignoreCheck) {\n var sepDisplay = 'none';\n eleSep.style.display = 'inherit';\n var eleSepWidth = eleSep.offsetWidth + (parseFloat(window.getComputedStyle(eleSep).marginRight) * 2);\n var prevSep = eleSep.previousElementSibling;\n if ((elWid + eleSepWidth) < wid || des) {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - (indx - sepPri)]);\n if (!isNOU(prevSep)) {\n prevSep.style.display = '';\n }\n }\n else {\n if (prevSep.classList.contains(CLS_SEPARATOR)) {\n prevSep.style.display = sepDisplay;\n }\n }\n eleSep.style.display = '';\n }\n else {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - (indx - sepPri)]);\n }\n }\n else {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - priEleCnt]);\n }\n };\n Toolbar.prototype.popupRefresh = function (popupEle, destroy) {\n var _this = this;\n var ele = this.element;\n var isVer = this.isVertical;\n var 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 ele.setAttribute('aria-haspopup', 'false');\n }\n };\n Toolbar.prototype.ignoreEleFetch = function (index, innerEle) {\n var ignoreEle = [].slice.call(innerEle.querySelectorAll('.' + CLS_TBARIGNORE));\n var ignoreInx = [];\n var count = 0;\n if (ignoreEle.length > 0) {\n ignoreEle.forEach(function (ele) {\n ignoreInx.push([].slice.call(innerEle.children).indexOf(ele));\n });\n }\n else {\n return 0;\n }\n ignoreInx.forEach(function (val) {\n if (val <= index) {\n count++;\n }\n });\n return count;\n };\n Toolbar.prototype.checkPopupRefresh = function (root, popEle) {\n popEle.style.display = 'block';\n var elWid = this.popupEleWidth(popEle.firstElementChild);\n popEle.firstElementChild.style.removeProperty('Position');\n var tbarWidth = root.offsetWidth - root.querySelector('.' + CLS_TBARNAV).offsetWidth;\n var tbarItemsWid = root.querySelector('.' + CLS_ITEMS).offsetWidth;\n popEle.style.removeProperty('display');\n if (tbarWidth > (elWid + tbarItemsWid)) {\n return true;\n }\n return false;\n };\n Toolbar.prototype.popupEleWidth = function (el) {\n el.style.position = 'absolute';\n var elWidth = this.isVertical ? el.offsetHeight : el.offsetWidth;\n var btnText = el.querySelector('.' + CLS_TBARBTNTEXT);\n if (el.classList.contains('e-tbtn-align') || el.classList.contains(CLS_TBARTEXT)) {\n var btn = el.children[0];\n if (!isNOU(btnText) && el.classList.contains(CLS_TBARTEXT)) {\n btnText.style.display = 'none';\n }\n else if (!isNOU(btnText) && el.classList.contains(CLS_POPUPTEXT)) {\n btnText.style.display = 'block';\n }\n btn.style.minWidth = '0%';\n elWidth = parseFloat(!this.isVertical ? el.style.minWidth : el.style.minHeight);\n btn.style.minWidth = '';\n btn.style.minHeight = '';\n if (!isNOU(btnText)) {\n btnText.style.display = '';\n }\n }\n return elWidth;\n };\n Toolbar.prototype.popupEleRefresh = function (width, popupEle, destroy) {\n var popPriority = this.popupPriCount > 0;\n var eleSplice = this.tbarEle;\n var priEleCnt;\n var index;\n var innerEle = this.element.querySelector('.' + CLS_ITEMS);\n var ignoreCount = 0;\n var _loop_1 = function (el) {\n if (el.classList.contains(CLS_POPPRI) && popPriority && !destroy) {\n return \"continue\";\n }\n var elWidth = this_1.popupEleWidth(el);\n if (el === this_1.tbarEle[0]) {\n elWidth += this_1.tbarEleMrgn;\n }\n el.style.position = '';\n if (elWidth < width || destroy) {\n setStyle(el, { minWidth: '', height: '', minHeight: '' });\n if (!el.classList.contains(CLS_POPOVERFLOW)) {\n el.classList.remove(CLS_POPUP);\n }\n index = this_1.tbarEle.indexOf(el);\n if (this_1.tbarAlign) {\n var pos = this_1.items[index].align;\n index = this_1.tbarAlgEle[(pos + 's').toLowerCase()].indexOf(el);\n eleSplice = this_1.tbarAlgEle[(pos + 's').toLowerCase()];\n innerEle = this_1.element.querySelector('.' + CLS_ITEMS + ' .' + 'e-toolbar-' + pos.toLowerCase());\n }\n var sepBeforePri_1 = 0;\n if (this_1.overflowMode !== 'Extended') {\n eleSplice.slice(0, index).forEach(function (el) {\n if (el.classList.contains(CLS_TBAROVERFLOW) || el.classList.contains(CLS_SEPARATOR)) {\n if (el.classList.contains(CLS_SEPARATOR)) {\n el.style.display = '';\n width -= el.offsetWidth;\n }\n sepBeforePri_1++;\n }\n });\n }\n ignoreCount = this_1.ignoreEleFetch(index, innerEle);\n if (el.classList.contains(CLS_TBAROVERFLOW)) {\n this_1.tbarPriRef(innerEle, index, sepBeforePri_1, el, destroy, elWidth, width, ignoreCount);\n width -= el.offsetWidth;\n }\n else if (index === 0) {\n innerEle.insertBefore(el, innerEle.firstChild);\n width -= el.offsetWidth;\n }\n else {\n priEleCnt = selectAll('.' + CLS_TBAROVERFLOW, this_1.popObj.element).length;\n innerEle.insertBefore(el, innerEle.children[(index + ignoreCount) - priEleCnt]);\n width -= el.offsetWidth;\n }\n el.style.height = '';\n }\n else {\n return \"break\";\n }\n };\n var this_1 = this;\n for (var _i = 0, _a = [].slice.call(popupEle.children); _i < _a.length; _i++) {\n var el = _a[_i];\n var state_1 = _loop_1(el);\n if (state_1 === \"break\")\n break;\n }\n 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 this.enableRtl ? innerItem[2].style.top = popWid : innerItem[2].style.bottom = popWid;\n }\n else {\n this.enableRtl ? innerItem[2].style.left = popWid : innerItem[2].style.right = popWid;\n }\n }\n if (tbarWid <= margin) {\n return;\n }\n var value = (((tbarWid - margin)) - (!this.isVertical ? innerItem[1].offsetWidth : innerItem[1].offsetHeight)) / 2;\n innerItem[1].removeAttribute('style');\n var mrgn = ((!this.isVertical ? innerItem[0].offsetWidth : innerItem[0].offsetHeight) + value) + 'px';\n if (this.isVertical) {\n this.enableRtl ? innerItem[1].style.marginBottom = mrgn : innerItem[1].style.marginTop = mrgn;\n }\n else {\n this.enableRtl ? innerItem[1].style.marginRight = mrgn : innerItem[1].style.marginLeft = mrgn;\n }\n };\n Toolbar.prototype.tbarItemAlign = function (item, itemEle, pos) {\n var _this = this;\n if (item.showAlwaysInPopup && item.overflow !== 'Show') {\n return;\n }\n var alignDiv = [];\n alignDiv.push(this.createElement('div', { className: CLS_TBARLEFT }));\n alignDiv.push(this.createElement('div', { className: CLS_TBARCENTER }));\n alignDiv.push(this.createElement('div', { className: CLS_TBARRIGHT }));\n if (pos === 0 && item.align !== 'Left') {\n alignDiv.forEach(function (ele) {\n itemEle.appendChild(ele);\n });\n this.tbarAlign = true;\n this.add(itemEle, CLS_TBARPOS);\n }\n else if (item.align !== 'Left') {\n var alignEle = itemEle.childNodes;\n var leftAlign_1 = alignDiv[0];\n [].slice.call(alignEle).forEach(function (el) {\n _this.tbarAlgEle.lefts.push(el);\n leftAlign_1.appendChild(el);\n });\n itemEle.appendChild(leftAlign_1);\n itemEle.appendChild(alignDiv[1]);\n itemEle.appendChild(alignDiv[2]);\n this.tbarAlign = true;\n this.add(itemEle, CLS_TBARPOS);\n }\n };\n Toolbar.prototype.ctrlTemplate = function () {\n var _this = this;\n this.ctrlTem = this.trgtEle.cloneNode(true);\n this.add(this.trgtEle, CLS_ITEMS);\n this.tbarEle = [];\n var innerEle = [].slice.call(this.trgtEle.children);\n innerEle.forEach(function (ele) {\n if (ele.tagName === 'DIV') {\n _this.tbarEle.push(ele);\n ele.setAttribute('aria-disabled', 'false');\n _this.add(ele, CLS_ITEM);\n }\n });\n };\n Toolbar.prototype.renderItems = function () {\n var ele = this.element;\n var items = this.items;\n if (this.trgtEle != null) {\n this.ctrlTemplate();\n }\n else if (ele && items.length > 0) {\n var itemEleDom = void 0;\n if (ele && ele.children.length > 0) {\n itemEleDom = ele.querySelector('.' + CLS_ITEMS);\n }\n if (!itemEleDom) {\n itemEleDom = this.createElement('div', { className: CLS_ITEMS });\n }\n this.itemsAlign(items, itemEleDom);\n ele.appendChild(itemEleDom);\n }\n };\n Toolbar.prototype.setAttr = function (attr, element) {\n var key = Object.keys(attr);\n var keyVal;\n for (var i = 0; i < key.length; i++) {\n keyVal = key[i];\n keyVal === 'class' ? this.add(element, attr[keyVal]) : element.setAttribute(keyVal, attr[keyVal]);\n }\n };\n /**\n * Enables or disables the specified Toolbar item.\n *\n * @param {number|HTMLElement|NodeList} items - DOM element or an array of items to be enabled or disabled.\n * @param {boolean} isEnable - Boolean value that determines whether the command should be enabled or disabled.\n * By default, `isEnable` is set to true.\n * @returns {void}.\n */\n Toolbar.prototype.enableItems = function (items, isEnable) {\n var elements = items;\n var len = elements.length;\n var ele;\n if (isNOU(isEnable)) {\n isEnable = true;\n }\n var enable = function (isEnable, ele) {\n if (isEnable) {\n ele.classList.remove(CLS_DISABLE);\n ele.setAttribute('aria-disabled', 'false');\n }\n else {\n ele.classList.add(CLS_DISABLE);\n ele.setAttribute('aria-disabled', 'true');\n }\n };\n if (!isNOU(len) && len >= 1) {\n for (var a = 0, element = [].slice.call(elements); a < len; a++) {\n var itemElement = element[a];\n if (typeof (itemElement) === 'number') {\n ele = this.getElementByIndex(itemElement);\n if (isNOU(ele)) {\n return;\n }\n else {\n elements[a] = ele;\n }\n }\n else {\n ele = itemElement;\n }\n enable(isEnable, ele);\n }\n isEnable ? removeClass(elements, CLS_DISABLE) : addClass(elements, CLS_DISABLE);\n }\n else {\n if (typeof (elements) === 'number') {\n ele = this.getElementByIndex(elements);\n if (isNOU(ele)) {\n return;\n }\n }\n else {\n ele = items;\n }\n enable(isEnable, ele);\n }\n };\n Toolbar.prototype.getElementByIndex = function (index) {\n if (this.tbarEle[index]) {\n return this.tbarEle[index];\n }\n return null;\n };\n /**\n * Adds new items to the Toolbar that accepts an array as Toolbar items.\n *\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[algIndex];\n ele.appendChild(innerEle);\n this.tbarAlgEle[(item.align + 's').toLowerCase()].push(innerEle);\n this.refreshPositioning();\n }\n else if (this.tbarAlign) {\n ele = closest(innerItems[0], '.' + CLS_ITEMS).children[algIndex];\n ele.insertBefore(innerEle, ele.children[index]);\n this.tbarAlgEle[(item.align + 's').toLowerCase()].splice(index, 0, innerEle);\n this.refreshPositioning();\n }\n else if (innerItems.length === 0) {\n innerItems = selectAll('.' + CLS_ITEMS, this.element);\n innerItems[0].appendChild(innerEle);\n }\n else {\n innerItems[0].parentNode.insertBefore(innerEle, innerItems[index]);\n }\n this.items.splice(index, 0, item);\n this.tbarEle.splice(index, 0, innerEle);\n index++;\n this.offsetWid = itemsDiv.offsetWidth;\n }\n }\n itemsDiv.style.width = '';\n this.renderOverflowMode();\n 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[index] && innerItems[index]) {\n var eleIdx = this.tbarEle.indexOf(innerItems[index]);\n if (this.tbarAlign) {\n var indexAgn = this.tbarAlgEle[(this.items[eleIdx].align + 's').toLowerCase()].indexOf(this.tbarEle[eleIdx]);\n this.tbarAlgEle[(this.items[eleIdx].align + 's').toLowerCase()].splice(indexAgn, 1);\n }\n if (this.isReact) {\n this.clearTemplate();\n }\n var btnItem = innerItems[index].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[index]);\n this.items.splice(eleIdx, 1);\n this.tbarEle.splice(eleIdx, 1);\n }\n };\n Toolbar.prototype.templateRender = function (templateProp, innerEle, item, index) {\n var itemType = item.type;\n var eleObj = templateProp;\n var isComponent;\n if (typeof (templateProp) === 'object') {\n isComponent = typeof (eleObj.appendTo) === 'function';\n }\n if (typeof (templateProp) === 'string' || !isComponent) {\n var templateFn = void 0;\n var val = templateProp;\n val = (typeof (templateProp) === 'string') ? templateProp.trim() : templateProp;\n try {\n if (typeof (templateProp) === 'object' && !isNOU(templateProp.tagName)) {\n innerEle.appendChild(templateProp);\n }\n else if (document.querySelectorAll(val).length) {\n var ele = document.querySelector(val);\n var tempStr = ele.outerHTML.trim();\n innerEle.appendChild(ele);\n ele.style.display = '';\n if (!isNOU(tempStr)) {\n this.tempId.push(val);\n }\n }\n }\n catch (e) {\n templateFn = templateCompiler(val);\n }\n var tempArray = void 0;\n if (!isNOU(templateFn)) {\n var toolbarTemplateID = this.element.id + index + '_template';\n tempArray = templateFn({}, this, 'template', toolbarTemplateID, this.isStringTemplate);\n }\n if (!isNOU(tempArray) && tempArray.length > 0) {\n [].slice.call(tempArray).forEach(function (ele) {\n if (!isNOU(ele.tagName)) {\n ele.style.display = '';\n }\n innerEle.appendChild(ele);\n });\n }\n }\n else if (itemType === 'Input') {\n var ele = this.createElement('input');\n item.id ? (ele.id = item.id) : (ele.id = getUniqueID('tbr-ipt'));\n innerEle.appendChild(ele);\n eleObj.appendTo(ele);\n }\n this.add(innerEle, CLS_TEMPLATE);\n this.tbarEle.push(innerEle);\n };\n Toolbar.prototype.buttonRendering = function (item, innerEle) {\n var dom = this.createElement('button', { className: CLS_TBARBTN });\n dom.setAttribute('type', 'button');\n var textStr = item.text;\n var iconCss;\n var iconPos;\n item.id ? (dom.id = item.id) : dom.id = getUniqueID('e-tbr-btn');\n var btnTxt = this.createElement('span', { className: 'e-tbar-btn-text' });\n if (textStr) {\n btnTxt.innerHTML = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(textStr) : textStr;\n dom.appendChild(btnTxt);\n dom.classList.add('e-tbtn-txt');\n }\n else {\n this.add(innerEle, 'e-tbtn-align');\n }\n if (item.prefixIcon || item.suffixIcon) {\n if ((item.prefixIcon && item.suffixIcon) || item.prefixIcon) {\n iconCss = item.prefixIcon + ' e-icons';\n iconPos = 'Left';\n }\n else {\n iconCss = item.suffixIcon + ' e-icons';\n iconPos = 'Right';\n }\n }\n var btnObj = new Button({ iconCss: iconCss, iconPosition: iconPos });\n btnObj.createElement = this.createElement;\n btnObj.appendTo(dom);\n if (item.width) {\n setStyle(dom, { 'width': formatUnit(item.width) });\n }\n return dom;\n };\n Toolbar.prototype.renderSubComponent = function (item, index) {\n var dom;\n var innerEle = this.createElement('div', { className: CLS_ITEM });\n innerEle.setAttribute('aria-disabled', 'false');\n var tempDom = this.createElement('div', {\n innerHTML: this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(item.tooltipText) : item.tooltipText\n });\n if (!this.tbarEle) {\n this.tbarEle = [];\n }\n if (item.htmlAttributes) {\n this.setAttr(item.htmlAttributes, innerEle);\n }\n if (item.tooltipText) {\n innerEle.setAttribute('title', tempDom.textContent);\n }\n if (item.cssClass) {\n innerEle.className = innerEle.className + ' ' + item.cssClass;\n }\n if (item.template) {\n this.templateRender(item.template, innerEle, item, index);\n }\n else {\n switch (item.type) {\n case 'Button':\n dom = this.buttonRendering(item, innerEle);\n dom.setAttribute('tabindex', '-1');\n dom.setAttribute('aria-label', (item.text || item.tooltipText));\n innerEle.appendChild(dom);\n innerEle.addEventListener('click', this.itemClick.bind(this));\n break;\n case 'Separator':\n this.add(innerEle, CLS_SEPARATOR);\n break;\n }\n }\n if (item.showTextOn) {\n var sTxt = item.showTextOn;\n if (sTxt === 'Toolbar') {\n this.add(innerEle, CLS_POPUPTEXT);\n this.add(innerEle, 'e-tbtn-align');\n }\n else if (sTxt === 'Overflow') {\n this.add(innerEle, CLS_TBARTEXT);\n }\n }\n if (item.overflow) {\n var overflow = item.overflow;\n if (overflow === 'Show') {\n this.add(innerEle, CLS_TBAROVERFLOW);\n }\n else if (overflow === 'Hide') {\n if (!innerEle.classList.contains(CLS_SEPARATOR)) {\n this.add(innerEle, CLS_POPOVERFLOW);\n }\n }\n }\n if (item.overflow !== 'Show' && item.showAlwaysInPopup && !innerEle.classList.contains(CLS_SEPARATOR)) {\n this.add(innerEle, CLS_POPPRI);\n this.popupPriCount++;\n }\n if (item.disabled) {\n this.add(innerEle, CLS_DISABLE);\n }\n if (item.visible === false) {\n this.add(innerEle, CLS_HIDDEN);\n }\n return innerEle;\n };\n Toolbar.prototype.itemClick = function (e) {\n this.activeEleSwitch(e.currentTarget);\n };\n Toolbar.prototype.activeEleSwitch = function (ele) {\n this.activeEleRemove(ele.firstElementChild);\n this.activeEle.focus();\n };\n Toolbar.prototype.activeEleRemove = function (curEle) {\n if (!isNOU(this.activeEle)) {\n this.activeEle.setAttribute('tabindex', '-1');\n }\n this.activeEle = curEle;\n if (isNOU(this.trgtEle) && !curEle.parentElement.classList.contains(CLS_TEMPLATE)) {\n curEle.removeAttribute('tabindex');\n }\n else {\n this.activeEle.setAttribute('tabindex', '0');\n }\n };\n Toolbar.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Returns the current module name.\n *\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) {\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.extendedOpen = function () {\n var sib = this.element.querySelector('.' + CLS_EXTENDABLECLASS);\n if (this.overflowMode === 'Extended' && sib) {\n this.isExtendedOpen = sib.classList.contains(CLS_POPUPOPEN);\n }\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of the property that changed.\n *\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)[i], 10);\n var property = Object.keys(newProp.items[index])[0];\n var newProperty = Object(newProp.items[index])[property];\n if (typeof newProperty !== 'function') {\n if (this.tbarAlign || property === 'align') {\n this.refresh();\n this.trigger('created');\n break;\n }\n var popupPriCheck = property === 'showAlwaysInPopup' && !newProperty;\n var booleanCheck = property === 'overflow' && this.popupPriCount !== 0;\n if ((popupPriCheck) || (this.items[index].showAlwaysInPopup) && booleanCheck) {\n --this.popupPriCount;\n }\n if (isNOU(this.scrollModule)) {\n this.destroyMode();\n }\n var itemCol = [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, tEle));\n if (this.isReact) {\n this.clearTemplate();\n }\n detach(itemCol[index]);\n this.tbarEle.splice(index, 1);\n this.addItems([this.items[index]], index);\n this.items.splice(index, 1);\n if (this.items[index].template) {\n this.tbarEle.splice(this.items.length, 1);\n }\n }\n }\n }\n else {\n this.itemsRerender(newProp.items);\n }\n break;\n case 'width':\n setStyle(tEle, { 'width': formatUnit(newProp.width) });\n this.renderOverflowMode();\n if (this.popObj && wid < tEle.offsetWidth) {\n this.popupRefresh(this.popObj.element, false);\n }\n break;\n case 'height':\n setStyle(this.element, { 'height': formatUnit(newProp.height) });\n break;\n case 'overflowMode':\n this.destroyMode();\n this.renderOverflowMode();\n if (this.enableRtl) {\n this.add(tEle, CLS_RTL);\n }\n this.refreshOverflow();\n break;\n case 'enableRtl':\n newProp.enableRtl ? this.add(tEle, CLS_RTL) : this.remove(tEle, CLS_RTL);\n if (!isNOU(this.scrollModule)) {\n newProp.enableRtl ? this.add(this.scrollModule.element, CLS_RTL) : this.remove(this.scrollModule.element, CLS_RTL);\n }\n if (!isNOU(this.popObj)) {\n newProp.enableRtl ? this.add(this.popObj.element, CLS_RTL) : this.remove(this.popObj.element, CLS_RTL);\n }\n if (this.tbarAlign) {\n this.itemPositioning();\n }\n break;\n case 'scrollStep':\n if (this.scrollModule) {\n this.scrollModule.scrollStep = this.scrollStep;\n }\n break;\n case 'enableCollision':\n if (this.popObj) {\n this.popObj.collision = { Y: this.enableCollision ? 'flip' : 'none' };\n }\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([this.element], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([this.element], newProp.cssClass.split(' '));\n }\n break;\n case 'allowKeyboard':\n this.unwireKeyboardEvent();\n if (newProp.allowKeyboard) {\n this.wireKeyboardEvent();\n }\n break;\n }\n }\n };\n /**\n * Shows or hides the Toolbar item that is in the specified index.\n *\n * @param {number | HTMLElement} index - Index value of target item or DOM element of items to be hidden or shown.\n * @param {boolean} value - Based on this Boolean value, item will be hide (true) or show (false). By default, value is false.\n * @returns {void}.\n */\n Toolbar.prototype.hideItem = function (index, value) {\n var isElement = (typeof (index) === 'object') ? true : false;\n var eleIndex = index;\n var initIndex;\n var ele;\n var innerItems = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n if (isElement) {\n ele = index;\n }\n else if (this.tbarEle[eleIndex]) {\n var innerItems_1 = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n ele = innerItems_1[eleIndex];\n }\n if (ele) {\n value ? ele.classList.add(CLS_HIDDEN) : ele.classList.remove(CLS_HIDDEN);\n if (value && isNOU(this.element.getAttribute('tabindex')) && !ele.classList.contains(CLS_SEPARATOR)) {\n if (isNOU(ele.firstElementChild.getAttribute('tabindex'))) {\n ele.firstElementChild.setAttribute('tabindex', '-1');\n var innerItems_2 = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n if (isElement) {\n eleIndex = innerItems_2.indexOf(ele);\n }\n var nextEle = innerItems_2[++eleIndex];\n while (nextEle) {\n var skipEle = this.eleContains(nextEle);\n if (!skipEle) {\n nextEle.firstElementChild.removeAttribute('tabindex');\n break;\n }\n nextEle = innerItems_2[++eleIndex];\n }\n }\n }\n else if (isNOU(this.element.getAttribute('tabindex')) && !ele.classList.contains(CLS_SEPARATOR)) {\n initIndex = 0;\n var setFlag = false;\n var removeFlag = false;\n var initELe = innerItems[initIndex];\n while (initELe) {\n if (!initELe.classList.contains(CLS_SEPARATOR)) {\n if (isNOU(initELe.firstElementChild.getAttribute('tabindex'))) {\n initELe.firstElementChild.setAttribute('tabindex', '-1');\n setFlag = true;\n }\n else {\n if (setFlag && removeFlag) {\n break;\n }\n var skipEle = this.eleContains(initELe);\n if (!skipEle) {\n initELe.firstElementChild.removeAttribute('tabindex');\n removeFlag = true;\n }\n initELe = innerItems[++initIndex];\n }\n }\n else {\n initELe = innerItems[++initIndex];\n }\n }\n }\n this.refreshOverflow();\n }\n };\n __decorate([\n Collection([], Item)\n ], Toolbar.prototype, \"items\", void 0);\n __decorate([\n Property('auto')\n ], Toolbar.prototype, \"width\", void 0);\n __decorate([\n Property('auto')\n ], Toolbar.prototype, \"height\", void 0);\n __decorate([\n Property('')\n ], Toolbar.prototype, \"cssClass\", void 0);\n __decorate([\n Property('Scrollable')\n ], Toolbar.prototype, \"overflowMode\", void 0);\n __decorate([\n Property()\n ], Toolbar.prototype, \"scrollStep\", void 0);\n __decorate([\n Property(true)\n ], Toolbar.prototype, \"enableCollision\", void 0);\n __decorate([\n Property(true)\n ], Toolbar.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property(true)\n ], Toolbar.prototype, \"allowKeyboard\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"clicked\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"beforeCreate\", void 0);\n Toolbar = __decorate([\n NotifyPropertyChanges\n ], Toolbar);\n return Toolbar;\n}(Component));\nexport { Toolbar };\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { isNullOrUndefined, createElement, remove, closest, addClass, removeClass, extend } from '@syncfusion/ej2-base';\nimport { Toolbar } from '@syncfusion/ej2-navigations';\nimport { Calendar } from '@syncfusion/ej2-calendars';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport * as events from '../base/constant';\nimport * as util from '../base/util';\nimport * as cls from '../base/css-constant';\n/**\n * Header module\n */\nvar HeaderRenderer = /** @class */ (function () {\n function HeaderRenderer(parent) {\n this.parent = parent;\n this.l10n = this.parent.localeObj;\n this.renderHeader();\n this.addEventListener();\n }\n HeaderRenderer.prototype.addEventListener = function () {\n this.parent.on(events.documentClick, this.closeHeaderPopup, this);\n };\n HeaderRenderer.prototype.removeEventListener = function () {\n this.parent.off(events.documentClick, this.closeHeaderPopup);\n };\n HeaderRenderer.prototype.closeHeaderPopup = function (e) {\n var closestEle = closest(e.event.target, '.e-date-range,.e-header-popup,.e-day,.e-selected');\n var closestPop = closest(e.event.target, '.e-hor-nav,.e-toolbar-pop');\n var contentWrap = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);\n if (this.parent.isAdaptive) {\n if (!isNullOrUndefined(closestPop) && (closestPop.classList.contains('e-toolbar-pop') ||\n closestPop.classList.contains('e-hor-nav')) && !(closestPop.classList.contains('e-hor-nav') &&\n this.element.querySelector('.e-toolbar-pop').classList.contains(cls.POPUP_OPEN))) {\n addClass([contentWrap], cls.SCROLL_HIDDEN);\n }\n else {\n removeClass([contentWrap], cls.SCROLL_HIDDEN);\n var popupEle = this.element.querySelector('.e-toolbar-pop');\n if (!isNullOrUndefined(popupEle)) {\n var popupObj = popupEle.ej2_instances[0];\n if (popupObj && !(!isNullOrUndefined(closestPop) && closestPop.classList.contains('e-hor-nav') &&\n popupEle.classList.contains(cls.POPUP_OPEN))) {\n popupObj.hide();\n }\n }\n }\n }\n if (!isNullOrUndefined(closestEle)) {\n return;\n }\n this.hideHeaderPopup();\n };\n HeaderRenderer.prototype.hideHeaderPopup = function () {\n if (this.headerPopup) {\n this.headerPopup.hide();\n }\n };\n HeaderRenderer.prototype.renderHeader = function () {\n this.element = createElement('div', { className: cls.TOOLBAR_CONTAINER });\n var toolbarEle = createElement('div', { className: cls.HEADER_TOOLBAR });\n this.element.appendChild(toolbarEle);\n this.parent.element.insertBefore(this.element, this.parent.element.firstElementChild);\n this.renderToolbar();\n };\n HeaderRenderer.prototype.renderToolbar = function () {\n var _this = this;\n var items = this.getItems();\n this.parent.trigger(events.actionBegin, { requestType: 'toolbarItemRendering', items: items }, function (args) {\n _this.toolbarObj = new Toolbar({\n items: args.items,\n overflowMode: 'Popup',\n clicked: _this.toolbarClickHandler.bind(_this),\n enableRtl: _this.parent.enableRtl,\n locale: _this.parent.locale\n });\n _this.toolbarObj.appendTo(_this.parent.element.querySelector('.' + cls.HEADER_TOOLBAR));\n var prevNavEle = _this.toolbarObj.element.querySelector('.e-prev');\n if (prevNavEle) {\n prevNavEle.firstElementChild.setAttribute('title', _this.l10n.getConstant('previous'));\n }\n var nextNavEle = _this.toolbarObj.element.querySelector('.e-next');\n if (nextNavEle) {\n nextNavEle.firstElementChild.setAttribute('title', _this.l10n.getConstant('next'));\n }\n _this.updateAddIcon();\n _this.updateActiveView();\n _this.parent.trigger(events.actionComplete, { requestType: 'toolBarItemRendered', items: _this.toolbarObj.items });\n });\n };\n HeaderRenderer.prototype.updateItems = function () {\n var _this = this;\n if (this.toolbarObj) {\n var items = this.getItems();\n this.parent.trigger(events.actionBegin, { requestType: 'toolbarItemRendering', items: items }, function (args) {\n _this.toolbarObj.items = args.items;\n _this.toolbarObj.dataBind();\n _this.parent.trigger(events.actionComplete, { requestType: 'toolBarItemRendered', items: _this.toolbarObj.items });\n });\n }\n };\n HeaderRenderer.prototype.getPopUpRelativeElement = function () {\n if (this.parent.isAdaptive) {\n return this.toolbarObj.element;\n }\n return this.element.querySelector('.e-date-range');\n };\n HeaderRenderer.prototype.setDayOfWeek = function (index) {\n if (this.headerCalendar) {\n this.headerCalendar.firstDayOfWeek = index;\n this.headerCalendar.dataBind();\n }\n };\n HeaderRenderer.prototype.setCalendarDate = function (date) {\n if (this.headerCalendar) {\n this.headerCalendar.value = date;\n this.headerCalendar.dataBind();\n }\n };\n HeaderRenderer.prototype.setCalendarMinMaxDate = function () {\n if (this.headerCalendar) {\n this.headerCalendar.min = this.parent.minDate;\n this.headerCalendar.max = this.parent.maxDate;\n this.headerCalendar.dataBind();\n }\n };\n HeaderRenderer.prototype.getCalendarView = function () {\n if (['Month', 'MonthAgenda', 'TimelineMonth'].indexOf(this.parent.currentView) > -1) {\n return 'Year';\n }\n else if (['Year', 'TimelineYear'].indexOf(this.parent.currentView) > -1) {\n return 'Decade';\n }\n else {\n return 'Month';\n }\n };\n HeaderRenderer.prototype.setCalendarView = function () {\n if (this.headerCalendar) {\n var calendarView = this.getCalendarView();\n this.headerCalendar.depth = calendarView;\n this.headerCalendar.start = calendarView;\n this.headerCalendar.refresh();\n }\n };\n HeaderRenderer.prototype.updateActiveView = function () {\n var selEle = [].slice.call(this.toolbarObj.element.querySelectorAll('.e-views'));\n removeClass(selEle, ['e-active-view']);\n if (selEle.length > 0 && selEle[this.parent.viewIndex]) {\n addClass([selEle[this.parent.viewIndex]], ['e-active-view']);\n }\n };\n HeaderRenderer.prototype.updateDateRange = function (text) {\n var selEle = this.toolbarObj.element.querySelector('.e-date-range');\n if (selEle) {\n selEle.setAttribute('aria-label', text);\n selEle.querySelector('.e-tbar-btn-text').innerHTML = text;\n this.refresh();\n }\n };\n HeaderRenderer.prototype.refresh = function () {\n if (this.toolbarObj) {\n this.toolbarObj.refreshOverflow();\n }\n };\n HeaderRenderer.prototype.updateAddIcon = function () {\n var addEle = this.toolbarObj.element.querySelector('.e-add');\n if (addEle) {\n if (!this.parent.eventSettings.allowAdding) {\n addClass([addEle], cls.HIDDEN_CLASS);\n }\n else {\n removeClass([addEle], cls.HIDDEN_CLASS);\n }\n }\n };\n HeaderRenderer.prototype.getDateRangeText = function () {\n var dateString = this.parent.globalize.formatDate(this.parent.selectedDate, {\n format: 'MMMM y', calendar: this.parent.getCalendarMode()\n });\n return util.capitalizeFirstWord(dateString, 'single');\n };\n HeaderRenderer.prototype.getItems = function () {\n var items = [];\n items.push({\n align: 'Left', prefixIcon: 'e-icon-prev', tooltipText: 'Previous', overflow: 'Show',\n cssClass: 'e-prev', htmlAttributes: { 'aria-label': 'previous period', 'role': 'navigation' }\n });\n items.push({\n align: 'Left', prefixIcon: 'e-icon-next', tooltipText: 'Next', overflow: 'Show',\n cssClass: 'e-next', htmlAttributes: { 'aria-label': 'next period', 'role': 'navigation' }\n });\n items.push({\n align: 'Left', text: this.getDateRangeText(), suffixIcon: 'e-icon-down-arrow', cssClass: 'e-date-range',\n overflow: 'Show',\n htmlAttributes: { 'aria-atomic': 'true', 'aria-live': 'assertive', 'aria-label': 'title', 'role': 'navigation' }\n });\n if (this.parent.isAdaptive || this.parent.enableAdaptiveUI) {\n items.push({\n align: 'Right', showAlwaysInPopup: (this.parent.isAdaptive || this.parent.enableAdaptiveUI), prefixIcon: 'e-icon-add',\n text: this.l10n.getConstant('newEvent'), cssClass: 'e-add', overflow: 'Show'\n });\n items.push({\n align: 'Right', showAlwaysInPopup: (this.parent.isAdaptive || this.parent.enableAdaptiveUI), prefixIcon: 'e-icon-today',\n text: this.l10n.getConstant('today'), cssClass: 'e-today', overflow: 'Show'\n });\n }\n else {\n items.push({\n align: 'Right', showAlwaysInPopup: (this.parent.isAdaptive || this.parent.enableAdaptiveUI), prefixIcon: 'e-icon-day',\n text: this.l10n.getConstant('today'), cssClass: 'e-today', overflow: 'Show'\n });\n if (this.parent.views.length > 1) {\n items.push({ align: 'Right', type: 'Separator', cssClass: 'e-schedule-seperator' });\n }\n }\n if (this.parent.views.length > 1) {\n for (var _i = 0, _a = this.parent.views; _i < _a.length; _i++) {\n var item = _a[_i];\n items.push(this.getItemObject(item));\n }\n }\n return items;\n };\n HeaderRenderer.prototype.getItemObject = function (item) {\n var viewName;\n var displayName;\n if (typeof (item) === 'string') {\n viewName = item.toLowerCase();\n displayName = null;\n }\n else {\n viewName = item.option.toLowerCase();\n displayName = item.displayName;\n }\n var view;\n var orientationClass;\n var isItemInsidePopup = this.parent.isAdaptive || this.parent.enableAdaptiveUI;\n switch (viewName) {\n case 'day':\n view = {\n align: 'Right', showAlwaysInPopup: isItemInsidePopup, prefixIcon: 'e-icon-day',\n text: displayName || this.l10n.getConstant('day'), cssClass: 'e-views e-day'\n };\n break;\n case 'week':\n view = {\n align: 'Right', showAlwaysInPopup: isItemInsidePopup, prefixIcon: 'e-icon-week',\n text: displayName || this.l10n.getConstant('week'), cssClass: 'e-views e-week'\n };\n break;\n case 'workweek':\n view = {\n align: 'Right', showAlwaysInPopup: isItemInsidePopup, prefixIcon: 'e-icon-workweek',\n text: displayName || this.l10n.getConstant('workWeek'), cssClass: 'e-views e-work-week'\n };\n break;\n case 'month':\n view = {\n align: 'Right', showAlwaysInPopup: isItemInsidePopup, prefixIcon: 'e-icon-month',\n text: displayName || this.l10n.getConstant('month'), cssClass: 'e-views e-month'\n };\n break;\n case 'year':\n view = {\n align: 'Right', showAlwaysInPopup: isItemInsidePopup, prefixIcon: 'e-icon-year',\n text: displayName || this.l10n.getConstant('year'), cssClass: 'e-views e-year'\n };\n break;\n case 'agenda':\n view = {\n align: 'Right', showAlwaysInPopup: isItemInsidePopup, prefixIcon: 'e-icon-agenda',\n text: displayName || this.l10n.getConstant('agenda'), cssClass: 'e-views e-agenda'\n };\n break;\n case 'monthagenda':\n view = {\n align: 'Right', showAlwaysInPopup: isItemInsidePopup, prefixIcon: 'e-icon-month-agenda',\n text: displayName || this.l10n.getConstant('monthAgenda'), cssClass: 'e-views e-month-agenda'\n };\n break;\n case 'timelineday':\n view = {\n align: 'Right', showAlwaysInPopup: isItemInsidePopup, prefixIcon: 'e-icon-timeline-day',\n text: displayName || this.l10n.getConstant('timelineDay'), cssClass: 'e-views e-timeline-day'\n };\n break;\n case 'timelineweek':\n view = {\n align: 'Right', showAlwaysInPopup: isItemInsidePopup, prefixIcon: 'e-icon-timeline-week',\n text: displayName || this.l10n.getConstant('timelineWeek'), cssClass: 'e-views e-timeline-week'\n };\n break;\n case 'timelineworkweek':\n view = {\n align: 'Right', showAlwaysInPopup: isItemInsidePopup, prefixIcon: 'e-icon-timeline-workweek',\n text: displayName || this.l10n.getConstant('timelineWorkWeek'), cssClass: 'e-views e-timeline-work-week'\n };\n break;\n case 'timelinemonth':\n view = {\n align: 'Right', showAlwaysInPopup: isItemInsidePopup, prefixIcon: 'e-icon-timeline-month',\n text: displayName || this.l10n.getConstant('timelineMonth'), cssClass: 'e-views e-timeline-month'\n };\n break;\n case 'timelineyear':\n orientationClass = (item.orientation === 'Vertical') ? 'vertical' : 'horizontal';\n view = {\n align: 'Right', showAlwaysInPopup: isItemInsidePopup, prefixIcon: 'e-icon-timeline-year-' + orientationClass,\n text: displayName || this.l10n.getConstant('timelineYear'), cssClass: 'e-views e-timeline-year'\n };\n break;\n }\n return view;\n };\n HeaderRenderer.prototype.renderHeaderPopup = function () {\n var headerPopupEle = createElement('div', { className: cls.HEADER_POPUP_CLASS });\n var headerCalendarEle = createElement('div', { className: cls.HEADER_CALENDAR_CLASS });\n headerPopupEle.appendChild(headerCalendarEle);\n this.element.appendChild(headerPopupEle);\n this.headerPopup = new Popup(headerPopupEle, {\n actionOnScroll: 'hide',\n targetType: 'relative',\n relateTo: this.getPopUpRelativeElement(),\n position: { X: 'left', Y: 'bottom' },\n enableRtl: this.parent.enableRtl\n });\n var calendarView = this.getCalendarView();\n this.headerCalendar = new Calendar({\n value: this.parent.selectedDate,\n min: this.parent.minDate,\n max: this.parent.maxDate,\n firstDayOfWeek: this.parent.activeViewOptions.firstDayOfWeek,\n enableRtl: this.parent.enableRtl,\n locale: this.parent.locale,\n depth: calendarView,\n start: calendarView,\n calendarMode: this.parent.calendarMode,\n change: this.calendarChange.bind(this)\n });\n this.setCalendarTimezone();\n this.headerCalendar.appendTo(headerCalendarEle);\n this.headerPopup.hide();\n };\n HeaderRenderer.prototype.calendarChange = function (args) {\n if (args.value.getTime() !== this.parent.selectedDate.getTime()) {\n var calendarDate = util.resetTime(new Date(args.value));\n this.parent.changeDate(calendarDate);\n }\n this.headerPopup.hide();\n };\n HeaderRenderer.prototype.setCalendarTimezone = function () {\n if (this.headerCalendar) {\n this.headerCalendar.timezone = this.parent.timezone || this.parent.tzModule.getLocalTimezoneName();\n }\n };\n HeaderRenderer.prototype.calculateViewIndex = function (args) {\n var target = closest(args.originalEvent.target, '.e-views');\n var views = [].slice.call(this.element.querySelectorAll('.e-views'));\n return views.indexOf(target);\n };\n HeaderRenderer.prototype.toolbarClickHandler = function (args) {\n if (!args.item) {\n return;\n }\n var strClass = args.item.cssClass.replace('e-views ', '');\n var data;\n var isSameTime;\n switch (strClass) {\n case 'e-date-range':\n if (!this.headerPopup) {\n this.renderHeaderPopup();\n }\n if (this.headerPopup.element.classList.contains(cls.POPUP_OPEN)) {\n this.headerPopup.hide();\n }\n else {\n this.headerPopup.show();\n }\n break;\n case 'e-day':\n this.parent.changeView('Day', args.originalEvent, undefined, this.calculateViewIndex(args));\n break;\n case 'e-week':\n this.parent.changeView('Week', args.originalEvent, undefined, this.calculateViewIndex(args));\n break;\n case 'e-work-week':\n this.parent.changeView('WorkWeek', args.originalEvent, undefined, this.calculateViewIndex(args));\n break;\n case 'e-month':\n this.parent.changeView('Month', args.originalEvent, undefined, this.calculateViewIndex(args));\n break;\n case 'e-year':\n this.parent.changeView('Year', args.originalEvent, undefined, this.calculateViewIndex(args));\n break;\n case 'e-agenda':\n this.parent.changeView('Agenda', args.originalEvent, undefined, this.calculateViewIndex(args));\n break;\n case 'e-month-agenda':\n this.parent.changeView('MonthAgenda', args.originalEvent, undefined, this.calculateViewIndex(args));\n break;\n case 'e-timeline-day':\n this.parent.changeView('TimelineDay', args.originalEvent, undefined, this.calculateViewIndex(args));\n break;\n case 'e-timeline-week':\n this.parent.changeView('TimelineWeek', args.originalEvent, undefined, this.calculateViewIndex(args));\n break;\n case 'e-timeline-work-week':\n this.parent.changeView('TimelineWorkWeek', args.originalEvent, undefined, this.calculateViewIndex(args));\n break;\n case 'e-timeline-month':\n this.parent.changeView('TimelineMonth', args.originalEvent, undefined, this.calculateViewIndex(args));\n break;\n case 'e-timeline-year':\n this.parent.changeView('TimelineYear', args.originalEvent, undefined, this.calculateViewIndex(args));\n break;\n case 'e-today':\n if (this.parent.currentView === 'Agenda' || !this.parent.isSelectedDate(util.resetTime(this.parent.getCurrentTime()))) {\n this.parent.changeDate(util.resetTime(this.parent.getCurrentTime()), args.originalEvent);\n }\n break;\n case 'e-prev':\n this.parent.changeDate(this.parent.activeView.getNextPreviousDate('previous'), args.originalEvent);\n break;\n case 'e-next':\n this.parent.changeDate(this.parent.activeView.getNextPreviousDate('next'), args.originalEvent);\n break;\n case 'e-add':\n isSameTime = this.parent.activeCellsData.startTime.getTime() === this.parent.activeCellsData.endTime.getTime();\n if (this.parent.activeCellsData && !isSameTime) {\n data = this.parent.activeCellsData;\n }\n else {\n var interval = this.parent.activeViewOptions.timeScale.interval;\n var slotCount = this.parent.activeViewOptions.timeScale.slotCount;\n var msInterval = (interval * util.MS_PER_MINUTE) / slotCount;\n var startTime = new Date(this.parent.selectedDate.getTime());\n var currentTime = this.parent.getCurrentTime();\n startTime.setHours(currentTime.getHours(), (Math.round(startTime.getMinutes() / msInterval) * msInterval), 0);\n var endTime = new Date(new Date(startTime.getTime()).setMilliseconds(startTime.getMilliseconds() + msInterval));\n data = { startTime: startTime, endTime: endTime, isAllDay: false };\n }\n this.parent.eventWindow.openEditor(extend(data, { cancel: false, event: args.originalEvent }), 'Add');\n break;\n }\n if (isNullOrUndefined(this.toolbarObj)) {\n return;\n }\n var toolbarPopUp = this.toolbarObj.element.querySelector('.e-toolbar-pop');\n if (toolbarPopUp && args.item.type !== 'Input') {\n toolbarPopUp.ej2_instances[0].hide({ name: 'SlideUp', duration: 100 });\n }\n };\n HeaderRenderer.prototype.getHeaderElement = function () {\n return this.toolbarObj.element;\n };\n HeaderRenderer.prototype.updateHeaderItems = function (classType) {\n var prevNavEle = this.toolbarObj.element.querySelector('.e-prev');\n var nextNavEle = this.toolbarObj.element.querySelector('.e-next');\n var dateRangeEle = this.toolbarObj.element.querySelector('.e-date-range');\n if (prevNavEle) {\n if (classType === 'add') {\n addClass([prevNavEle], cls.HIDDEN_CLASS);\n }\n else {\n removeClass([prevNavEle], cls.HIDDEN_CLASS);\n }\n }\n if (nextNavEle) {\n if (classType === 'add') {\n addClass([nextNavEle], cls.HIDDEN_CLASS);\n }\n else {\n removeClass([nextNavEle], cls.HIDDEN_CLASS);\n }\n }\n if (dateRangeEle) {\n if (classType === 'add') {\n addClass([dateRangeEle], cls.TEXT_ELLIPSIS);\n }\n else {\n removeClass([dateRangeEle], cls.TEXT_ELLIPSIS);\n }\n }\n };\n HeaderRenderer.prototype.previousNextIconHandler = function () {\n var dates = (this.parent.currentView === 'Agenda' ?\n [this.parent.getCurrentViewDates()[0]] : this.parent.getCurrentViewDates());\n var prevNavEle = this.toolbarObj.element.querySelector('.' + cls.PREVIOUS_DATE_CLASS);\n var nextNavEle = this.toolbarObj.element.querySelector('.' + cls.NEXT_DATE_CLASS);\n var firstDate = new Date(dates[0].getTime());\n var lastDate = new Date(dates[dates.length - 1].getTime());\n if (this.parent.currentView === 'WorkWeek' || this.parent.currentView === 'TimelineWorkWeek') {\n firstDate = util.getWeekFirstDate(util.resetTime(this.parent.selectedDate), this.parent.firstDayOfWeek);\n lastDate = util.addDays(firstDate, 7 * this.parent.activeViewOptions.interval);\n }\n if (this.parent.currentView === 'Month') {\n firstDate = util.firstDateOfMonth(this.parent.selectedDate);\n var lastMonthFirstDate = util.addMonths(firstDate, this.parent.activeViewOptions.interval - 1);\n lastDate = util.lastDateOfMonth(lastMonthFirstDate);\n }\n if (!isNullOrUndefined(prevNavEle)) {\n this.toolbarObj.enableItems(prevNavEle, firstDate > this.parent.minDate);\n }\n if (!isNullOrUndefined(nextNavEle)) {\n this.toolbarObj.enableItems(nextNavEle, lastDate < this.parent.maxDate);\n }\n this.setCalendarMinMaxDate();\n };\n HeaderRenderer.prototype.getModuleName = function () {\n return 'headerbar';\n };\n HeaderRenderer.prototype.destroy = function () {\n if (this.headerPopup && !this.headerPopup.isDestroyed) {\n this.headerPopup.destroy();\n this.headerPopup = null;\n }\n if (this.headerCalendar && !this.headerCalendar.isDestroyed) {\n this.headerCalendar.destroy();\n this.headerCalendar = null;\n }\n if (this.toolbarObj && !this.toolbarObj.isDestroyed) {\n this.toolbarObj.destroy();\n this.removeEventListener();\n remove(this.element);\n this.toolbarObj = null;\n }\n this.element = null;\n this.parent = null;\n this.l10n = null;\n };\n return HeaderRenderer;\n}());\nexport { HeaderRenderer };\n","import { formatUnit } from '@syncfusion/ej2-base';\nimport { contentReady, uiUpdate, scrollUiUpdate } from '../base/constant';\n/**\n * `Scroll` module\n */\nvar Scroll = /** @class */ (function () {\n /**\n * Constructor for the scrolling.\n *\n * @param {Schedule} parent Accepts the Schedule instance\n */\n function Scroll(parent) {\n this.parent = parent;\n this.addEventListener();\n }\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} Returns the module name.\n * @private\n */\n Scroll.prototype.getModuleName = function () {\n return 'scroll';\n };\n /**\n * Internal method to set the element width\n *\n * @returns {void}\n * @private\n */\n Scroll.prototype.setWidth = function () {\n this.parent.element.style.width = formatUnit(this.parent.width);\n };\n /**\n * Internal method to set the element height\n *\n * @returns {void}\n * @private\n */\n Scroll.prototype.setHeight = function () {\n this.parent.element.style.height = formatUnit(this.parent.height);\n };\n /**\n * Internal method to bind events\n *\n * @returns {void}\n * @private\n */\n Scroll.prototype.addEventListener = function () {\n this.parent.on(contentReady, this.setDimensions, this);\n this.parent.on(uiUpdate, this.onPropertyChanged, this);\n };\n /**\n * Internal method to unbind events\n *\n * @returns {void}\n * @private\n */\n Scroll.prototype.removeEventListener = function () {\n this.parent.off(contentReady, this.setDimensions);\n this.parent.off(uiUpdate, this.onPropertyChanged);\n };\n /**\n * Internal method to set the dimensions\n *\n * @returns {void}\n * @private\n */\n Scroll.prototype.setDimensions = function () {\n this.setWidth();\n this.setHeight();\n var data = { cssProperties: this.parent.getCssProperties(), module: this.getModuleName() };\n this.parent.notify(scrollUiUpdate, data);\n };\n /**\n * Internal method to set the dimensions dynamically\n *\n * @returns {void}\n * @private\n */\n Scroll.prototype.onPropertyChanged = function () {\n this.setDimensions();\n };\n /**\n * Destroy the scroll module\n *\n * @returns {void}\n * @private\n */\n Scroll.prototype.destroy = function () {\n this.removeEventListener();\n };\n return Scroll;\n}());\nexport { Scroll };\n","import { addClass, removeClass, Touch, remove, EventHandler, Browser } from '@syncfusion/ej2-base';\nimport { closest, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\nimport * as cls from '../base/css-constant';\nimport * as util from '../base/util';\n/**\n * `touch` module is used to handle touch interactions.\n */\nvar ScheduleTouch = /** @class */ (function () {\n function ScheduleTouch(parent) {\n this.parent = parent;\n this.element = this.parent.element.querySelector('.' + cls.TABLE_CONTAINER_CLASS);\n this.touchObj = new Touch(this.element, {\n scroll: this.scrollHandler.bind(this),\n swipe: this.swipeHandler.bind(this),\n tapHold: this.tapHoldHandler.bind(this),\n swipeSettings: { swipeThresholdDistance: 1 }\n });\n EventHandler.add(this.element, 'transitionend', this.onTransitionEnd, this);\n this.touchLeftDirection = this.parent.enableRtl ? 'Right' : 'Left';\n this.touchRightDirection = this.parent.enableRtl ? 'Left' : 'Right';\n }\n ScheduleTouch.prototype.scrollHandler = function (e) {\n if (this.parent.currentView === 'Agenda' || this.parent.uiStateValues.action ||\n (e.originalEvent && (e.originalEvent.target.classList.contains(cls.APPOINTMENT_CLASS) ||\n closest(e.originalEvent.target, '.' + cls.APPOINTMENT_CLASS)))) {\n return;\n }\n if (!this.timeStampStart) {\n this.timeStampStart = Date.now();\n }\n if (this.element.classList.contains(cls.TRANSLATE_CLASS)) {\n this.onTransitionEnd();\n }\n if (e.scrollDirection === 'Left' || e.scrollDirection === 'Right') {\n var args = { requestType: 'dateNavigate', cancel: false, event: e.originalEvent };\n this.parent.trigger(events.actionBegin, args);\n if (args.cancel) {\n return;\n }\n var scrollDiv = this.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);\n if (scrollDiv && scrollDiv.scrollWidth > scrollDiv.clientWidth) {\n return;\n }\n else {\n this.isScrollTriggered = true;\n e.originalEvent.preventDefault();\n e.originalEvent.stopPropagation();\n }\n }\n if (e.scrollDirection === this.touchLeftDirection) {\n if (!this.nextPanel) {\n this.renderPanel(cls.NEXT_PANEL_CLASS, 'next');\n this.nextPanel = {\n element: this.parent.activeView.getPanel(),\n selectedDate: new Date(this.parent.selectedDate.getTime())\n };\n this.setDimensions(this.nextPanel.element);\n }\n var x = this.parent.enableRtl ? e.distanceX : -e.distanceX;\n this.element.style.transform = 'translatex(' + (this.getTranslateX(this.element) + x) + 'px)';\n }\n else if (e.scrollDirection === this.touchRightDirection) {\n var prevWidth = 0;\n if (!this.previousPanel) {\n this.renderPanel(cls.PREVIOUS_PANEL_CLASS, 'previous');\n this.previousPanel = {\n element: this.parent.activeView.getPanel(),\n selectedDate: new Date(this.parent.selectedDate.getTime())\n };\n this.setDimensions(this.previousPanel.element);\n prevWidth = this.previousPanel.element.offsetWidth;\n }\n var x = this.parent.enableRtl ? prevWidth - e.distanceX : -prevWidth + e.distanceX;\n this.element.style.transform = 'translatex(' + (this.getTranslateX(this.element) + x) + 'px)';\n }\n };\n ScheduleTouch.prototype.swipeHandler = function (e) {\n if (!this.isScrollTriggered || this.parent.uiStateValues.action) {\n return;\n }\n this.isScrollTriggered = false;\n var swipeDate = e.swipeDirection === 'Left' ?\n this.parent.activeView.renderDates[0] : this.parent.activeView.renderDates.slice(-1)[0];\n if ((e.swipeDirection === 'Left' && swipeDate < this.parent.maxDate) ||\n (e.swipeDirection === 'Right' && swipeDate >= this.parent.minDate)) {\n var time = Date.now() - this.timeStampStart;\n var offsetDist = (e.distanceX * (Browser.isDevice ? 6 : 1.66));\n if (offsetDist > time || (e.distanceX > (this.parent.element.offsetWidth / 2))) {\n this.swapPanels(e.swipeDirection);\n if (offsetDist > time && (e.distanceX > (this.parent.element.offsetWidth / 2))) {\n this.element.style.transitionDuration = ((offsetDist / time) / 10) + 's';\n }\n this.confirmSwipe(e.swipeDirection);\n }\n else {\n this.cancelSwipe();\n }\n var args = { requestType: 'dateNavigate', cancel: false, event: e.originalEvent };\n this.parent.trigger(events.actionComplete, args);\n }\n else {\n this.cancelSwipe();\n }\n this.timeStampStart = null;\n };\n ScheduleTouch.prototype.tapHoldHandler = function (e) {\n var target = closest(e.originalEvent.target, '.' + cls.APPOINTMENT_CLASS);\n if (!isNullOrUndefined(target) && this.parent.isAdaptive) {\n this.parent.quickPopup.tapHoldEventPopup(e.originalEvent);\n return;\n }\n };\n ScheduleTouch.prototype.renderPanel = function (clsName, nextPrevType) {\n if (!this.currentPanel) {\n this.currentPanel = {\n element: this.parent.activeView.getPanel(),\n selectedDate: new Date(this.parent.selectedDate.getTime())\n };\n this.setDimensions(this.currentPanel.element);\n }\n else {\n this.parent.setProperties({ selectedDate: this.currentPanel.selectedDate }, true);\n }\n this.parent.setProperties({ selectedDate: this.parent.activeView.getNextPreviousDate(nextPrevType) }, true);\n if (this.parent.headerModule) {\n this.parent.headerModule.setCalendarDate(this.parent.selectedDate);\n }\n this.parent.activeView.getRenderDates();\n this.parent.activeView.renderLayout(clsName);\n };\n ScheduleTouch.prototype.swapPanels = function (direction) {\n if (direction === this.touchLeftDirection) {\n var temp = this.nextPanel;\n this.nextPanel = this.currentPanel;\n this.currentPanel = temp;\n }\n else {\n var temp = this.previousPanel;\n this.previousPanel = this.currentPanel;\n this.currentPanel = temp;\n }\n };\n ScheduleTouch.prototype.confirmSwipe = function (swipeDirection) {\n var _this = this;\n var previousDate = swipeDirection === this.touchLeftDirection ?\n this.nextPanel.selectedDate : this.previousPanel.selectedDate;\n var args = {\n action: 'date', cancel: false, previousDate: previousDate, currentDate: this.currentPanel.selectedDate\n };\n this.parent.trigger(events.navigating, args, function (navArgs) {\n if (navArgs.cancel) {\n _this.swapPanels(swipeDirection);\n _this.cancelSwipe();\n }\n else {\n _this.parent.activeView.setPanel(_this.currentPanel.element);\n _this.parent.setProperties({ selectedDate: _this.currentPanel.selectedDate }, true);\n var translateX = void 0;\n if (_this.parent.enableRtl) {\n translateX = swipeDirection === _this.touchLeftDirection ?\n (_this.previousPanel ? _this.previousPanel.element.offsetLeft : _this.currentPanel.element.offsetWidth) : 0;\n }\n else {\n translateX = swipeDirection === _this.touchLeftDirection ? -_this.currentPanel.element.offsetLeft : 0;\n }\n addClass([_this.element], cls.TRANSLATE_CLASS);\n _this.element.style.transform = 'translatex(' + translateX + 'px)';\n if (_this.parent.headerModule) {\n _this.parent.headerModule.updateDateRange(_this.parent.activeView.getDateRangeText());\n }\n _this.parent.renderTemplates();\n _this.parent.crudModule.refreshDataManager();\n }\n });\n };\n ScheduleTouch.prototype.cancelSwipe = function () {\n this.parent.activeView.setPanel(this.currentPanel.element);\n this.parent.setProperties({ selectedDate: this.currentPanel.selectedDate }, true);\n this.parent.activeView.getRenderDates();\n this.parent.activeView.generateColumnLevels();\n addClass([this.element], cls.TRANSLATE_CLASS);\n var prevWidth = this.previousPanel ? this.previousPanel.element.offsetWidth : 0;\n this.element.style.transform = 'translatex(' + (this.parent.enableRtl ? prevWidth : -this.currentPanel.element.offsetLeft) + 'px)';\n };\n ScheduleTouch.prototype.onTransitionEnd = function () {\n removeClass([this.element], cls.TRANSLATE_CLASS);\n this.element.style.transitionDuration = '';\n this.element.style.transform = '';\n if (this.previousPanel) {\n remove(this.previousPanel.element);\n this.previousPanel = null;\n removeClass([this.currentPanel.element], cls.PREVIOUS_PANEL_CLASS);\n addClass([this.currentPanel.element], cls.CURRENT_PANEL_CLASS);\n }\n if (this.nextPanel) {\n remove(this.nextPanel.element);\n this.nextPanel = null;\n removeClass([this.currentPanel.element], cls.NEXT_PANEL_CLASS);\n addClass([this.currentPanel.element], cls.CURRENT_PANEL_CLASS);\n }\n this.currentPanel = null;\n this.parent.activeView.getPanel().style.width = '';\n };\n ScheduleTouch.prototype.getTranslateX = function (element) {\n var style = window.getComputedStyle(element);\n return new WebKitCSSMatrix(style.webkitTransform).m41;\n };\n ScheduleTouch.prototype.setDimensions = function (element) {\n element.style.width = (this.parent.element.clientWidth) + 'px';\n };\n ScheduleTouch.prototype.resetValues = function () {\n this.currentPanel = null;\n this.previousPanel = null;\n this.nextPanel = null;\n this.timeStampStart = null;\n this.element.style.transform = '';\n util.removeChildren(this.element);\n removeClass([this.element], cls.TRANSLATE_CLASS);\n };\n ScheduleTouch.prototype.destroy = function () {\n if (this.touchObj) {\n this.touchObj.destroy();\n this.touchObj = null;\n }\n EventHandler.remove(this.element, 'transitionend', this.onTransitionEnd);\n this.resetValues();\n };\n return ScheduleTouch;\n}());\nexport { ScheduleTouch };\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { KeyboardEvents, closest, EventHandler, extend } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, addClass, removeClass } from '@syncfusion/ej2-base';\nimport * as event from '../base/constant';\nimport * as util from '../base/util';\nimport * as cls from '../base/css-constant';\n/**\n * Keyboard interaction\n */\nvar KeyboardInteraction = /** @class */ (function () {\n function KeyboardInteraction(parent) {\n this.selectedCells = [];\n this.keyConfigs = {\n downArrow: 'downarrow',\n upArrow: 'uparrow',\n rightArrow: 'rightarrow',\n leftArrow: 'leftarrow',\n shiftDownArrow: 'shift+downarrow',\n shiftUpArrow: 'shift+uparrow',\n shiftRightArrow: 'shift+rightarrow',\n shiftLeftArrow: 'shift+leftarrow',\n ctrlLeftArrow: 'ctrl+leftarrow',\n ctrlRightArrow: 'ctrl+rightarrow',\n altOne: 'alt+1',\n altTwo: 'alt+2',\n altThree: 'alt+3',\n altFour: 'alt+4',\n altFive: 'alt+5',\n altSix: 'alt+6',\n altSeven: 'alt+7',\n altEight: 'alt+8',\n altNine: 'alt+9',\n enter: 'enter',\n escape: 'escape',\n delete: 'delete',\n home: 'home',\n pageUp: 'pageup',\n pageDown: 'pagedown',\n tab: 'tab',\n shiftTab: 'shift+tab',\n ctrlShiftUpArrow: 'ctrl+shift+uparrow',\n ctrlShiftDownArrow: 'ctrl+shift+downarrow',\n ctrlShiftLeftArrow: 'ctrl+shift+leftarrow',\n ctrlShiftRightArrow: 'ctrl+shift+rightarrow'\n };\n this.parent = parent;\n this.parent.element.tabIndex = this.parent.element.tabIndex === -1 ? 0 : this.parent.element.tabIndex;\n this.keyboardModule = new KeyboardEvents(this.parent.element, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs,\n eventName: 'keydown'\n });\n this.addEventListener();\n }\n KeyboardInteraction.prototype.keyActionHandler = function (e) {\n switch (e.action) {\n case 'downArrow':\n case 'shiftDownArrow':\n this.processDown(e, e.shiftKey);\n break;\n case 'upArrow':\n case 'shiftUpArrow':\n this.processUp(e, e.shiftKey);\n break;\n case 'leftArrow':\n case 'shiftLeftArrow':\n this.processLeft(e, e.shiftKey);\n break;\n case 'rightArrow':\n case 'shiftRightArrow':\n this.processRight(e, e.shiftKey);\n break;\n case 'ctrlLeftArrow':\n this.parent.changeDate(this.parent.activeView.getNextPreviousDate('previous'), e);\n if (this.parent.headerModule) {\n this.parent.headerModule.element.querySelector('.e-prev button').focus();\n }\n break;\n case 'ctrlRightArrow':\n this.parent.changeDate(this.parent.activeView.getNextPreviousDate('next'), e);\n if (this.parent.headerModule) {\n this.parent.headerModule.element.querySelector('.e-next button').focus();\n }\n break;\n case 'altOne':\n case 'altTwo':\n case 'altThree':\n case 'altFour':\n case 'altFive':\n case 'altSix':\n case 'altSeven':\n case 'altEight':\n case 'altNine':\n this.processViewNavigation(e);\n break;\n case 'enter':\n this.processEnter(e);\n break;\n case 'home':\n this.focusFirstCell();\n break;\n case 'tab':\n case 'shiftTab':\n this.processTab(e, e.shiftKey);\n break;\n case 'delete':\n this.processDelete(e);\n break;\n case 'ctrlShiftUpArrow':\n case 'ctrlShiftDownArrow':\n case 'ctrlShiftLeftArrow':\n case 'ctrlShiftRightArrow':\n this.processCtrlShiftNavigationArrows(e);\n break;\n case 'escape':\n this.processEscape(e);\n }\n };\n KeyboardInteraction.prototype.addEventListener = function () {\n this.parent.on(event.cellMouseDown, this.onCellMouseDown, this);\n };\n KeyboardInteraction.prototype.removeEventListener = function () {\n this.parent.off(event.cellMouseDown, this.onCellMouseDown);\n };\n KeyboardInteraction.prototype.onCellMouseDown = function (e) {\n if (e.event.shiftKey) {\n return;\n }\n this.initialTarget = this.getClosestCell(e.event);\n if (this.parent.activeViewOptions.readonly || this.parent.currentView === 'MonthAgenda' || !this.initialTarget) {\n return;\n }\n if (e.event.target.classList.contains(cls.WORK_CELLS_CLASS) && e.event.which !== 3) {\n this.parent.removeSelectedClass();\n EventHandler.add(this.parent.getContentTable(), 'mousemove', this.onMouseSelection, this);\n EventHandler.add(this.parent.getContentTable(), 'mouseup', this.onMoveUp, this);\n }\n if (e.event.target.classList.contains(cls.ALLDAY_CELLS_CLASS) && e.event.which !== 3) {\n this.parent.removeSelectedClass();\n var allDayRow = this.parent.getAllDayRow();\n EventHandler.add(allDayRow, 'mousemove', this.onMouseSelection, this);\n EventHandler.add(allDayRow, 'mouseup', this.onMoveUp, this);\n }\n };\n KeyboardInteraction.prototype.onMouseSelection = function (e) {\n var appointments = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS));\n addClass(appointments, 'e-allow-select');\n var selectionEdges = this.parent.boundaryValidation(e.pageY, e.pageX);\n if (selectionEdges.bottom || selectionEdges.top || selectionEdges.left || selectionEdges.right) {\n var parent_1 = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);\n var yInBounds = parent_1.offsetHeight <= parent_1.scrollHeight && parent_1.scrollTop >= 0 &&\n parent_1.scrollTop + parent_1.offsetHeight <= parent_1.scrollHeight;\n var xInBounds = parent_1.offsetWidth <= parent_1.scrollWidth && parent_1.scrollLeft >= 0 &&\n parent_1.scrollLeft + parent_1.offsetWidth <= parent_1.scrollWidth;\n if (yInBounds && (selectionEdges.top || selectionEdges.bottom)) {\n parent_1.scrollTop += selectionEdges.top ? -e.target.offsetHeight : e.target.offsetHeight;\n }\n if (xInBounds && (selectionEdges.left || selectionEdges.right)) {\n parent_1.scrollLeft += selectionEdges.left ? -e.target.offsetWidth : e.target.offsetWidth;\n }\n }\n var target = this.getClosestCell(e);\n if (target) {\n this.selectCells(true, target);\n }\n };\n KeyboardInteraction.prototype.getClosestCell = function (e) {\n return closest(e.target, '.' + cls.WORK_CELLS_CLASS + ',.' + cls.ALLDAY_CELLS_CLASS);\n };\n KeyboardInteraction.prototype.onMoveUp = function (e) {\n var _this = this;\n var appointments = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS));\n removeClass(appointments, 'e-allow-select');\n if (e.target.classList.contains(cls.WORK_CELLS_CLASS)) {\n EventHandler.remove(this.parent.getContentTable(), 'mousemove', this.onMouseSelection);\n EventHandler.remove(this.parent.getContentTable(), 'mouseup', this.onMoveUp);\n }\n if (e.target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {\n var allDayRow = this.parent.getAllDayRow();\n EventHandler.remove(allDayRow, 'mousemove', this.onMouseSelection);\n EventHandler.remove(allDayRow, 'mouseup', this.onMoveUp);\n }\n if (this.isPreventAction(e)) {\n return;\n }\n var queryStr = '.' + cls.WORK_CELLS_CLASS + ',.' + cls.ALLDAY_CELLS_CLASS + ',.' + cls.HEADER_CELLS_CLASS;\n var target = closest(e.target, queryStr);\n this.parent.activeCellsData = this.getSelectedElements(target);\n var cellData = {};\n if (this.parent.eventWindow) {\n this.parent.eventWindow.convertToEventData(this.parent.activeCellsData, cellData);\n }\n var selectedCells = this.parent.getSelectedElements();\n var args = {\n data: cellData, element: this.parent.activeCellsData.element, event: e,\n requestType: 'cellSelect', showQuickPopup: false\n };\n this.parent.trigger(event.select, args, function (selectArgs) {\n var isPopupShow = selectArgs.showQuickPopup || _this.parent.quickInfoOnSelectionEnd;\n if (isPopupShow && selectedCells.length > 1) {\n var cellArgs = extend(_this.parent.activeCellsData, { cancel: false, event: e, name: 'cellClick' });\n _this.parent.notify(event.cellClick, cellArgs);\n }\n });\n };\n KeyboardInteraction.prototype.processEnter = function (e) {\n if ((this.parent.activeViewOptions.readonly && !e.target.classList.contains(cls.APPOINTMENT_CLASS))\n || this.isPreventAction(e)) {\n return;\n }\n var target = e.target;\n if (closest(target, '.' + cls.POPUP_WRAPPER_CLASS)) {\n if (target.classList.contains(cls.QUICK_POPUP_EVENT_DETAILS_CLASS) ||\n target.classList.contains(cls.EVENT_CREATE_CLASS) ||\n target.classList.contains(cls.EDIT_EVENT_CLASS) ||\n target.classList.contains(cls.DELETE_EVENT_CLASS) ||\n target.classList.contains(cls.CLOSE_CLASS)) {\n target.click();\n e.preventDefault();\n }\n else if (target.classList.contains(cls.SUBJECT_CLASS)) {\n this.parent.element.querySelector('.' + cls.EVENT_CREATE_CLASS).click();\n e.preventDefault();\n }\n return;\n }\n if (target.classList.contains(cls.RESOURCE_CELLS_CLASS) && target.classList.contains(cls.RESOURCE_PARENT_CLASS)) {\n var resourceIcon = target.querySelector('.' + cls.RESOURCE_TREE_ICON_CLASS);\n if (resourceIcon) {\n resourceIcon.click();\n }\n return;\n }\n if (target.classList.contains(cls.WORK_CELLS_CLASS) || target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {\n this.parent.activeCellsData = this.getSelectedElements(target);\n var args = extend(this.parent.activeCellsData, { cancel: false, event: e });\n if (this.parent.allowInline) {\n var inlineArgs = {\n element: args.element,\n groupIndex: args.groupIndex, type: 'Cell'\n };\n this.parent.notify(event.inlineClick, inlineArgs);\n }\n else {\n this.parent.notify(event.cellClick, args);\n }\n return;\n }\n if (target.classList.contains(cls.INLINE_SUBJECT_CLASS)) {\n this.parent.inlineModule.inlineCrudActions(target);\n return;\n }\n if (target.classList.contains(cls.APPOINTMENT_CLASS) || target.classList.contains(cls.MORE_EVENT_CLOSE_CLASS) ||\n target.classList.contains(cls.ALLDAY_APPOINTMENT_SECTION_CLASS) || target.classList.contains(cls.MORE_INDICATOR_CLASS)) {\n target.click();\n return;\n }\n if (target.classList.contains(cls.MORE_EVENT_HEADER_DATE_CLASS)) {\n this.parent.setProperties({ selectedDate: this.parent.getDateFromElement(target) }, true);\n this.parent.changeView(this.parent.getNavigateView(), e);\n this.processEscape(e);\n return;\n }\n };\n KeyboardInteraction.prototype.getSelectedElements = function (target) {\n var cellDetails;\n if (this.selectedCells.length > 1 && target.classList.contains(cls.SELECTED_CELL_CLASS)) {\n var start = this.parent.getCellDetails(this.selectedCells[0]);\n var end = this.parent.getCellDetails(this.selectedCells.slice(-1)[0]);\n start.endTime = end.endTime;\n start.element = target;\n cellDetails = start;\n }\n else {\n cellDetails = this.parent.getCellDetails(target);\n }\n return cellDetails;\n };\n KeyboardInteraction.prototype.getCells = function (isInverseTable, start, end) {\n var tableEle = this.parent.getContentTable();\n var cells = [].slice.call(tableEle.querySelectorAll('td'));\n var maxRow = tableEle.rows.length;\n var maxColumn = tableEle.rows[0].cells.length;\n if (start && start.classList.contains(cls.ALLDAY_CELLS_CLASS)) {\n var allDayRow = this.parent.getAllDayRow();\n cells = [].slice.call(allDayRow.cells);\n maxRow = 1;\n maxColumn = allDayRow.cells.length;\n }\n var startIndex = cells.indexOf(start);\n var endIndex = cells.indexOf(end);\n var inverseCells = [];\n if (isInverseTable) {\n for (var i = 0; i < maxColumn; i++) {\n for (var j = 0; j < maxRow; j++) {\n inverseCells.push(cells[maxColumn * j + i]);\n }\n }\n startIndex = inverseCells.indexOf(start);\n endIndex = inverseCells.indexOf(end);\n }\n if (startIndex > endIndex) {\n var temp = startIndex;\n startIndex = endIndex;\n endIndex = temp;\n }\n var sCells = isInverseTable ? inverseCells : cells;\n return sCells.slice(startIndex, endIndex + 1);\n };\n KeyboardInteraction.prototype.focusFirstCell = function () {\n if (this.parent.currentView === 'Agenda') {\n var focusCell = this.parent.getContentTable().querySelector('.' + cls.AGENDA_CELLS_CLASS);\n focusCell.setAttribute('tabindex', '0');\n focusCell.focus();\n return;\n }\n this.parent.eventBase.removeSelectedAppointmentClass();\n if (this.parent.activeView.isTimelineView()) {\n var cell = this.parent.element.querySelector('.' + cls.CONTENT_TABLE_CLASS +\n ' tr:not(.' + cls.HIDDEN_CLASS + ') .' + cls.WORK_CELLS_CLASS + ':not(.' + cls.RESOURCE_GROUP_CELLS_CLASS + ')');\n this.selectCells(false, cell);\n }\n else {\n this.selectCells(false, this.parent.getWorkCellElements()[0]);\n }\n };\n KeyboardInteraction.prototype.isInverseTableSelect = function () {\n return this.parent.activeView.isInverseTableSelect;\n };\n /**\n * Internal method to select cells\n *\n * @param {boolean} isMultiple Accepts to select multiple cells or not\n * @param {HTMLTableCellElement} targetCell Accepts the target cells\n * @returns {void}\n * @private\n */\n KeyboardInteraction.prototype.selectCells = function (isMultiple, targetCell) {\n var _this = this;\n this.parent.removeSelectedClass();\n var target = (targetCell instanceof Array) ? targetCell.slice(-1)[0] : targetCell;\n if (isMultiple) {\n var initialId_1;\n var views_1 = ['Day', 'Week', 'WorkWeek', 'Month', 'TimelineDay', 'TimelineWeek', 'TimelineWorkWeek', 'TimelineMonth'];\n var args = { element: targetCell, requestType: 'mousemove', allowMultipleRow: true };\n this.parent.inlineModule.removeInlineAppointmentElement();\n this.parent.trigger(event.select, args, function (selectArgs) {\n var allowMultipleRow = (!selectArgs.allowMultipleRow) || (!_this.parent.allowMultiRowSelection);\n if (allowMultipleRow && (views_1.indexOf(_this.parent.currentView) > -1)) {\n target = target.parentElement.children[_this.initialTarget.cellIndex];\n }\n var selectedCells = _this.getCells(_this.isInverseTableSelect(), _this.initialTarget, target);\n if (_this.parent.activeViewOptions.group.resources.length > 0) {\n initialId_1 = _this.initialTarget.getAttribute('data-group-index');\n var resourceSelectedCells = [];\n for (var _i = 0, selectedCells_1 = selectedCells; _i < selectedCells_1.length; _i++) {\n var cell = selectedCells_1[_i];\n if (cell.getAttribute('data-group-index') === initialId_1) {\n resourceSelectedCells.push(cell);\n }\n }\n selectedCells = resourceSelectedCells;\n }\n if (!_this.parent.allowMultiCellSelection) {\n selectedCells = [_this.initialTarget];\n }\n _this.selectedCells = selectedCells;\n if (selectedCells.length > 2 && !target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {\n var allDayCells = _this.getAllDayCells(selectedCells);\n if (_this.parent.activeViewOptions.group.resources.length > 0) {\n var resourceAllDayCells = [];\n for (var _a = 0, allDayCells_1 = allDayCells; _a < allDayCells_1.length; _a++) {\n var cell = allDayCells_1[_a];\n if (cell.getAttribute('data-group-index') === initialId_1) {\n resourceAllDayCells.push(cell);\n }\n }\n allDayCells = resourceAllDayCells;\n }\n selectedCells = selectedCells.concat(allDayCells);\n }\n if ((target.getAttribute('data-group-index') !== initialId_1) && _this.parent.activeViewOptions.group.resources.length > 0) {\n target = _this.selectedCells[_this.selectedCells.length - 1];\n }\n _this.parent.addSelectedClass(selectedCells, target);\n });\n }\n else {\n this.initialTarget = target;\n this.selectedCells = [target];\n this.parent.addSelectedClass([target], target);\n }\n };\n KeyboardInteraction.prototype.selectAppointment = function (isReverse, target) {\n var appointments = this.getAppointmentElements();\n if (appointments.length < 0) {\n return;\n }\n this.parent.eventBase.removeSelectedAppointmentClass();\n var nextAppEle;\n if (target.classList.contains(cls.APPOINTMENT_CLASS)) {\n var targetIndex = appointments.indexOf(target);\n nextAppEle = appointments[(isReverse ? targetIndex - 1 : targetIndex + 1)];\n }\n else {\n nextAppEle = isReverse ? appointments[appointments.length - 1] : appointments[0];\n }\n if (nextAppEle) {\n this.parent.eventBase.addSelectedAppointments([nextAppEle]);\n nextAppEle.focus();\n addClass([nextAppEle], cls.AGENDA_SELECTED_CELL);\n }\n };\n KeyboardInteraction.prototype.selectAppointmentElementFromWorkCell = function (isReverse, target) {\n var _this = this;\n this.parent.eventBase.removeSelectedAppointmentClass();\n this.parent.removeSelectedClass();\n if (target.classList.contains(cls.WORK_CELLS_CLASS) || target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {\n var appointmentElements_1 = this.getUniqueAppointmentElements();\n var filteredElements_1 = [];\n var selectedDate_1 = this.parent.getDateFromElement(target).getTime();\n var selectedSeriesEvents = this.parent.eventsProcessed.filter(function (eventObject) {\n return (!isReverse ? (eventObject[_this.parent.eventFields.startTime].getTime() >= selectedDate_1) :\n (eventObject[_this.parent.eventFields.startTime].getTime() <= selectedDate_1));\n });\n selectedSeriesEvents.filter(function (event) {\n appointmentElements_1.filter(function (element) {\n if (JSON.stringify(event.Guid) === JSON.stringify(element.getAttribute('data-guid'))) {\n filteredElements_1.push(element);\n }\n });\n });\n if (filteredElements_1.length > 0) {\n var selectedElement = isReverse ? filteredElements_1[filteredElements_1.length - 1] : filteredElements_1[0];\n var focusElements = this.getAppointmentElementsByGuid(selectedElement.getAttribute('data-guid'));\n this.parent.eventBase.addSelectedAppointments(focusElements);\n (focusElements[focusElements.length - 1]).focus();\n }\n }\n };\n KeyboardInteraction.prototype.getAllDayCells = function (cells) {\n var allDayRow = this.parent.getAllDayRow();\n if (!allDayRow) {\n return [];\n }\n var startCell = cells[0];\n var endCell = cells[cells.length - 1];\n var start = this.parent.getCellDetails(startCell);\n var end = this.parent.getCellDetails(endCell);\n if (end.endTime.getTime() - start.startTime.getTime() >= util.MS_PER_DAY) {\n var allDayCells = [].slice.call(allDayRow.cells);\n return allDayCells.slice(startCell.cellIndex, endCell.cellIndex + 1);\n }\n return [];\n };\n KeyboardInteraction.prototype.getAppointmentElements = function () {\n return [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS));\n };\n KeyboardInteraction.prototype.getAppointmentElementsByGuid = function (guid) {\n return [].slice.call(this.parent.element.querySelectorAll('div[data-guid=\"' + guid + '\"]'));\n };\n KeyboardInteraction.prototype.getUniqueAppointmentElements = function () {\n var appointments = this.getAppointmentElements();\n var appointmentElements = [];\n appointments.map(function (value) { return value.getAttribute('data-guid'); }).filter(function (value, index, self) {\n if (self.indexOf(value) === index) {\n appointmentElements.push(appointments[index]);\n }\n });\n return appointmentElements;\n };\n KeyboardInteraction.prototype.getWorkCellFromAppointmentElement = function (target) {\n var selectedObject = this.parent.eventBase.getEventByGuid(target.getAttribute('data-guid'));\n return this.parent.eventBase.selectWorkCellByTime([selectedObject]);\n };\n KeyboardInteraction.prototype.processViewNavigation = function (e) {\n var index = parseInt(e.key, 10) - 1;\n if (index < this.parent.views.length) {\n var view = this.parent.viewCollections[index].option;\n this.parent.changeView(view, e, undefined, index);\n if (this.parent.headerModule) {\n this.parent.headerModule.element.querySelector('.e-active-view button').focus();\n }\n }\n };\n KeyboardInteraction.prototype.processUp = function (e, isMultiple) {\n if ((isMultiple && (this.parent.activeView.isTimelineView() || this.parent.currentView === 'MonthAgenda'))) {\n return;\n }\n var target = (e.target);\n var selectedElements = this.parent.getSelectedElements();\n var selectedEventElements = this.parent.eventBase.getSelectedAppointments();\n var moreEventWrapper = this.parent.element.querySelector('.' + cls.MORE_POPUP_WRAPPER_CLASS);\n var quickPopupWrapper = this.getQuickPopupElement();\n if (selectedElements.length > 0 && !e.target.classList.contains(cls.WORK_CELLS_CLASS)) {\n target = selectedElements[selectedElements.length - 1];\n }\n if (selectedEventElements.length > 0 && !moreEventWrapper.classList.contains(cls.POPUP_OPEN) &&\n !quickPopupWrapper.classList.contains(cls.POPUP_OPEN) &&\n ['Day', 'Week', 'WorkWeek', 'Month'].indexOf(this.parent.currentView) !== -1) {\n target = this.getWorkCellFromAppointmentElement(selectedEventElements[selectedEventElements.length - 1]);\n this.parent.eventBase.removeSelectedAppointmentClass();\n }\n if (!target) {\n return;\n }\n if (target.classList.contains(cls.WORK_CELLS_CLASS) && !this.parent.element.querySelector('.' + cls.POPUP_OPEN)) {\n var tableRows = this.parent.getTableRows();\n var curRowIndex = tableRows.indexOf(target.parentElement);\n if (curRowIndex > 0 && curRowIndex < tableRows.length) {\n this.selectCells(isMultiple, (tableRows[curRowIndex - 1]).cells[target.cellIndex]);\n }\n }\n else if (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda') {\n this.selectAppointment(true, target);\n }\n };\n KeyboardInteraction.prototype.processDown = function (e, isMultiple) {\n if (isMultiple && (this.parent.activeView.isTimelineView() || this.parent.currentView === 'MonthAgenda')) {\n return;\n }\n var target = (e.target);\n var selectedCells = this.parent.getSelectedElements();\n var selectedElements = this.parent.eventBase.getSelectedAppointments();\n var moreEventWrapper = this.parent.element.querySelector('.' + cls.MORE_POPUP_WRAPPER_CLASS);\n var quickPopupWrapper = this.getQuickPopupElement();\n if (selectedCells.length > 0 && !e.target.classList.contains(cls.WORK_CELLS_CLASS)) {\n target = selectedCells[selectedCells.length - 1];\n }\n if (selectedElements.length > 0 && !moreEventWrapper.classList.contains(cls.POPUP_OPEN) &&\n !quickPopupWrapper.classList.contains(cls.POPUP_OPEN) &&\n ['Day', 'Week', 'WorkWeek', 'Month'].indexOf(this.parent.currentView) !== -1) {\n target = this.getWorkCellFromAppointmentElement(selectedElements[selectedElements.length - 1]);\n this.parent.eventBase.removeSelectedAppointmentClass();\n }\n var tableRows = this.parent.getTableRows();\n if (!target) {\n return;\n }\n if (target.classList.contains(cls.WORK_CELLS_CLASS) && !this.parent.element.querySelector('.' + cls.POPUP_OPEN)) {\n var curRowIndex = tableRows.indexOf(target.parentElement);\n if (curRowIndex >= 0 && curRowIndex < tableRows.length - 1) {\n this.selectCells(isMultiple, (tableRows[curRowIndex + 1]).cells[target.cellIndex]);\n }\n }\n else if (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda') {\n this.selectAppointment(false, target);\n }\n };\n KeyboardInteraction.prototype.processLeftRight = function (target) {\n var tableEle = this.parent.getContentTable();\n var curRowIndex = target.parentNode.sectionRowIndex;\n var key = {\n element: tableEle,\n rowIndex: curRowIndex,\n columnIndex: target.cellIndex,\n maxIndex: tableEle.rows[curRowIndex].cells.length\n };\n return key;\n };\n KeyboardInteraction.prototype.getQuickPopupElement = function () {\n return (this.parent.isAdaptive ? document.body : this.parent.element).querySelector('.' + cls.POPUP_WRAPPER_CLASS);\n };\n KeyboardInteraction.prototype.isCancelLeftRightAction = function (e, isMultiple) {\n if (this.parent.currentView === 'Agenda' || (isMultiple && this.parent.currentView === 'MonthAgenda')) {\n return true;\n }\n if (this.isPreventAction(e) && isMultiple) {\n return true;\n }\n var moreEventWrapper = this.parent.element.querySelector('.' + cls.MORE_POPUP_WRAPPER_CLASS);\n var quickPopupWrapper = this.getQuickPopupElement();\n if (moreEventWrapper.classList.contains(cls.POPUP_OPEN) || quickPopupWrapper.classList.contains(cls.POPUP_OPEN)) {\n return true;\n }\n return false;\n };\n KeyboardInteraction.prototype.processRight = function (e, isMultiple) {\n if (this.isCancelLeftRightAction(e, isMultiple)) {\n return;\n }\n var selectedCells = this.parent.getSelectedElements();\n var targetCell;\n var selectedAppointments = this.parent.eventBase.getSelectedAppointments();\n var target = (e.target);\n if (selectedCells.length > 0 && !target.classList.contains(cls.WORK_CELLS_CLASS) &&\n !target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {\n target = selectedCells[selectedCells.length - 1];\n }\n if (selectedAppointments.length > 0) {\n target = this.getWorkCellFromAppointmentElement(selectedAppointments[selectedAppointments.length - 1]);\n this.parent.eventBase.removeSelectedAppointmentClass();\n if (!target) {\n return;\n }\n }\n if (target.classList.contains(cls.WORK_CELLS_CLASS) &&\n (e.target).classList.contains(cls.WORK_CELLS_CLASS)) {\n var key = this.processLeftRight(target);\n if (key.columnIndex >= 0 && key.columnIndex < key.maxIndex - 1) {\n targetCell = this.calculateNextPrevDate(target, key.element.rows[key.rowIndex].cells[target.cellIndex + 1], 'right');\n if (!isNullOrUndefined(targetCell)) {\n this.selectCells(isMultiple, targetCell);\n }\n }\n else if (key.columnIndex === key.maxIndex - 1) {\n if (!this.isInverseTableSelect() && key.rowIndex < key.element.rows.length - 1) {\n targetCell = this.calculateNextPrevDate(target, key.element.rows[key.rowIndex + 1].cells[0], 'right');\n if (!isNullOrUndefined(targetCell)) {\n this.selectCells(isMultiple, targetCell);\n }\n }\n else if (!isMultiple) {\n var rowIndex = this.isInverseTableSelect() ? key.rowIndex : 0;\n this.parent.changeDate(this.parent.activeView.getNextPreviousDate('next'), e);\n var tableEle = this.parent.getContentTable();\n this.selectCells(false, tableEle.rows[rowIndex].cells[0]);\n }\n }\n }\n else if (target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {\n var curColIndex = target.cellIndex;\n var allDayRow = this.parent.getAllDayRow();\n var maxColIndex = allDayRow.cells.length;\n if (curColIndex >= 0 && curColIndex < maxColIndex - 1) {\n this.selectCells(isMultiple, allDayRow.cells[curColIndex + 1]);\n }\n else if (curColIndex === maxColIndex - 1 && !isMultiple) {\n this.parent.changeDate(this.parent.activeView.getNextPreviousDate('next'), e);\n var allDayRow_1 = this.parent.getAllDayRow();\n this.selectCells(false, allDayRow_1.cells[0]);\n }\n }\n };\n KeyboardInteraction.prototype.processLeft = function (e, isMultiple) {\n if (this.isCancelLeftRightAction(e, isMultiple)) {\n return;\n }\n var target = (e.target);\n var selectedCells = this.parent.getSelectedElements();\n var targetCell;\n if (selectedCells.length > 0 && !target.classList.contains(cls.WORK_CELLS_CLASS) &&\n !target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {\n target = selectedCells[selectedCells.length - 1];\n }\n var selectedElements = this.parent.eventBase.getSelectedAppointments();\n if (selectedElements.length > 0) {\n target = this.getWorkCellFromAppointmentElement(selectedElements[selectedElements.length - 1]);\n this.parent.eventBase.removeSelectedAppointmentClass();\n if (!target) {\n return;\n }\n }\n if ((e.target).classList.contains(cls.WORK_CELLS_CLASS) &&\n target.classList.contains(cls.WORK_CELLS_CLASS)) {\n var key = this.processLeftRight(target);\n if (key.columnIndex > 0 && key.columnIndex < key.maxIndex) {\n targetCell = this.calculateNextPrevDate(target, key.element.rows[key.rowIndex].cells[target.cellIndex - 1], 'left');\n if (!isNullOrUndefined(targetCell)) {\n this.selectCells(isMultiple, targetCell);\n }\n }\n else if (key.columnIndex === 0) {\n if (!this.isInverseTableSelect() && key.rowIndex > 0) {\n targetCell = this.calculateNextPrevDate(target, key.element.rows[key.rowIndex - 1].cells[key.maxIndex - 1], 'left');\n if (!isNullOrUndefined(targetCell)) {\n this.selectCells(isMultiple, targetCell);\n }\n }\n else if (!isMultiple) {\n this.parent.changeDate(this.parent.activeView.getNextPreviousDate('previous'), e);\n var tableEle = this.parent.getContentTable();\n var rowIndex = this.isInverseTableSelect() ? key.rowIndex : tableEle.rows.length - 1;\n this.selectCells(false, tableEle.rows[rowIndex].cells[key.maxIndex - 1]);\n }\n }\n }\n else if (target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {\n var curColIndex = target.cellIndex;\n var allDayRow = this.parent.getAllDayRow();\n var maxColIndex = allDayRow.cells.length;\n if (curColIndex > 0 && curColIndex < maxColIndex) {\n this.selectCells(isMultiple, allDayRow.cells[curColIndex - 1]);\n }\n else if (curColIndex === 0 && !isMultiple) {\n this.parent.changeDate(this.parent.activeView.getNextPreviousDate('previous'), e);\n var allDayRow_2 = this.parent.getAllDayRow();\n this.selectCells(false, allDayRow_2.cells[maxColIndex - 1]);\n }\n }\n };\n KeyboardInteraction.prototype.calculateNextPrevDate = function (currentCell, target, type) {\n var initialId = this.initialTarget.getAttribute('data-group-index');\n if (this.parent.activeViewOptions.group.resources.length > 0 && this.parent.currentView === 'Month') {\n if (currentCell && target && target.getAttribute('data-group-index') !== initialId) {\n var currentDate = this.parent.getDateFromElement(currentCell);\n var nextPrevDate = (type === 'right') ? new Date(currentDate.setDate(currentDate.getDate() + 1))\n : new Date(currentDate.setDate(currentDate.getDate() - 1));\n target = [].slice.call(this.parent.element.querySelectorAll('td[data-date=\"'\n + nextPrevDate.getTime().toString() + '\"]' + '[data-group-index=\"' + initialId + '\"]'))[0];\n }\n }\n return target;\n };\n KeyboardInteraction.prototype.getFocusableElements = function (container) {\n var queryString = 'a[href]:not([tabindex=\"-1\"]),input:not([disabled]):not([tabindex=\"-1\"]),' +\n 'textarea:not([disabled]):not([tabindex=\"-1\"]),button:not([disabled]):not([tabindex=\"-1\"]),' +\n 'select:not([disabled]):not([tabindex=\"-1\"]),[tabindex]:not([tabindex=\"-1\"]),[contentEditable=true]:not([tabindex=\"-1\"])';\n return [].slice.call(container.querySelectorAll(queryString));\n };\n KeyboardInteraction.prototype.processTabOnPopup = function (e, popupElement) {\n var _this = this;\n var focusableElements = this.getFocusableElements(popupElement);\n focusableElements = focusableElements.filter(function (element) {\n var footerEle = _this.parent.element.querySelector('.' + cls.POPUP_FOOTER_CLASS);\n if (footerEle && footerEle.offsetParent) {\n return !(element.classList.contains(cls.EDIT_CLASS) || element.classList.contains(cls.DELETE_CLASS));\n }\n else {\n return !(element.classList.contains(cls.EDIT_EVENT_CLASS) || element.classList.contains(cls.DELETE_EVENT_CLASS));\n }\n });\n var firstEle = focusableElements[0];\n var lastEle = focusableElements[focusableElements.length - 1];\n if (!isNullOrUndefined(lastEle) && document.activeElement === lastEle && !e.shiftKey) {\n e.preventDefault();\n firstEle.focus();\n }\n if (!isNullOrUndefined(firstEle) && document.activeElement === firstEle && e.shiftKey) {\n e.preventDefault();\n lastEle.focus();\n }\n };\n KeyboardInteraction.prototype.processTab = function (e, isReverse) {\n var target = e.target;\n var popupWrapper = closest(target, '.' + cls.POPUP_WRAPPER_CLASS + ',.' + cls.MORE_POPUP_WRAPPER_CLASS);\n if (popupWrapper && popupWrapper.classList.contains(cls.POPUP_OPEN)) {\n if (popupWrapper.classList.contains(cls.MORE_POPUP_WRAPPER_CLASS)) {\n this.parent.eventBase.removeSelectedAppointmentClass();\n }\n this.processTabOnPopup(e, popupWrapper);\n return;\n }\n if (target.classList.contains(cls.ROOT)) {\n this.parent.eventBase.removeSelectedAppointmentClass();\n return;\n }\n if (target.classList.contains(cls.RESOURCE_CELLS_CLASS) && this.parent.activeView.isTimelineView()\n && this.parent.activeViewOptions.group.resources.length > 0) {\n var index = parseInt(target.getAttribute('data-group-index'), 10);\n var appSelector = \".\" + cls.APPOINTMENT_CLASS + \"[data-group-index=\\\"\" + (isReverse ? index - 1 : index) + \"\\\"]\";\n var appElements = [].slice.call(this.parent.element.querySelectorAll(appSelector));\n if (appElements.length > 0) {\n this.parent.eventBase.removeSelectedAppointmentClass();\n var focusAppointment = isReverse ? appElements.slice(-1)[0] : appElements[0];\n this.parent.eventBase.addSelectedAppointments([focusAppointment]);\n focusAppointment.focus();\n e.preventDefault();\n }\n else if (index + 1 === this.parent.resourceBase.lastResourceLevel.length) {\n this.parent.element.focus();\n e.preventDefault();\n }\n else if (this.parent.virtualScrollModule) {\n var virtual = this.parent.element.querySelector('.' + cls.VIRTUAL_TRACK_CLASS);\n var averageRowHeight = Math.round(virtual.offsetHeight / this.parent.resourceBase.expandedResources.length);\n this.parent.element.querySelector('.e-content-wrap').scrollTop = ((isReverse ? index - 1 : index + 1) * averageRowHeight);\n this.parent.virtualScrollModule.virtualScrolling();\n }\n else {\n this.setScrollPosition(index);\n }\n return;\n }\n if (target.classList.contains(cls.APPOINTMENT_CLASS)) {\n var appElements = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS));\n if (this.parent.activeView.isTimelineView() && this.parent.activeViewOptions.group.resources.length > 0) {\n var index = parseInt(target.getAttribute('data-group-index'), 10);\n appElements = [].slice.call(this.parent.element.querySelectorAll(\".\" + cls.APPOINTMENT_CLASS + \"[data-group-index=\\\"\" + index + \"\\\"]\"));\n var resCellSelector = \".\" + cls.RESOURCE_CELLS_CLASS + \"[data-group-index=\\\"\" + (isReverse ? index : index + 1) + \"\\\"]\";\n var resourceCell = this.parent.element.querySelector(resCellSelector);\n if (resourceCell && (isReverse && target.getAttribute('data-guid') === appElements[0].getAttribute('data-guid') ||\n !isReverse && target.getAttribute('data-guid') === appElements.slice(-1)[0].getAttribute('data-guid'))) {\n this.parent.eventBase.removeSelectedAppointmentClass();\n if (this.parent.virtualScrollModule) {\n resourceCell.focus({ preventScroll: true });\n }\n else {\n resourceCell.focus();\n }\n if (this.parent.activeView.isTimelineView() && this.parent.activeViewOptions.group.resources.length > 0 &&\n isNullOrUndefined(this.parent.virtualScrollModule)) {\n this.setScrollPosition(index);\n }\n e.preventDefault();\n return;\n }\n }\n var selectedAppointments = this.parent.eventBase.getSelectedAppointments();\n if (selectedAppointments.length > 0) {\n target = selectedAppointments[selectedAppointments.length - 1];\n }\n this.parent.eventBase.removeSelectedAppointmentClass();\n if (!isReverse && target.getAttribute('data-guid') === appElements[appElements.length - 1].getAttribute('data-guid') ||\n isReverse && target.getAttribute('data-guid') === appElements[0].getAttribute('data-guid')) {\n return;\n }\n if (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda') {\n this.selectAppointment(isReverse, target);\n e.preventDefault();\n }\n return;\n }\n var selectedCells = this.parent.getSelectedElements();\n if (selectedCells.length > 0 && !target.classList.contains(cls.APPOINTMENT_CLASS)) {\n target = selectedCells[selectedCells.length - 1];\n this.selectAppointmentElementFromWorkCell(isReverse, target);\n e.preventDefault();\n return;\n }\n if (target && !target.classList.contains(cls.RESOURCE_CELLS_CLASS) && this.parent.activeView.isTimelineView()\n && this.parent.activeViewOptions.group.resources.length > 0) {\n this.processTabOnResourceCells(target, isReverse);\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n KeyboardInteraction.prototype.processDelete = function (e) {\n var activeEle = document.activeElement;\n if (this.parent.currentView === 'MonthAgenda') {\n var selectedEle = this.parent.eventBase.getSelectedEvents().element;\n activeEle = ((selectedEle && isNullOrUndefined(selectedEle.length)) ? selectedEle : selectedEle[0]);\n }\n if (activeEle && activeEle.classList.contains(cls.APPOINTMENT_CLASS)) {\n addClass([activeEle], cls.APPOINTMENT_BORDER);\n this.parent.activeEventData = this.parent.eventBase.getSelectedEvents();\n if (this.parent.activeViewOptions.readonly || activeEle.classList.contains(cls.READ_ONLY) ||\n !this.parent.eventSettings.allowDeleting) {\n return;\n }\n this.parent.quickPopup.deleteClick(e);\n }\n };\n KeyboardInteraction.prototype.processCtrlShiftNavigationArrows = function (e) {\n if (this.parent.activeViewOptions.group.resources.length > 0 && document.activeElement.classList.contains(cls.APPOINTMENT_CLASS)) {\n var groupIndex = parseInt(document.activeElement.getAttribute('data-group-index'), 10);\n var index = (e.action === 'ctrlShiftLeftArrow' || e.action === 'ctrlShiftUpArrow') ? groupIndex - 1 : groupIndex + 1;\n index = index < 0 ? 0 : index > this.parent.resourceBase.lastResourceLevel.length ?\n this.parent.resourceBase.lastResourceLevel.length : index;\n var eventEle = [];\n while (eventEle.length === 0 && index >= 0 && index <= this.parent.resourceBase.lastResourceLevel.length) {\n eventEle = [].slice.call(this.parent.element.querySelectorAll(\".\" + cls.APPOINTMENT_CLASS + \"[data-group-index=\\\"\" + index + \"\\\"]\"));\n index = (e.action === 'ctrlShiftLeftArrow' || e.action === 'ctrlShiftUpArrow') ? index - 1 : index + 1;\n }\n var nextAppEle = eventEle[0];\n if (nextAppEle) {\n this.parent.eventBase.removeSelectedAppointmentClass();\n this.parent.eventBase.addSelectedAppointments([nextAppEle]);\n nextAppEle.focus();\n }\n }\n else if (this.parent.activeViewOptions.group.resources.length > 0 &&\n !document.activeElement.classList.contains(cls.APPOINTMENT_CLASS)) {\n var index = this.parent.resourceBase.renderedResources[0].groupIndex;\n var appSelector = \".\" + cls.APPOINTMENT_CLASS + \"[data-group-index=\\\"\" + index + \"\\\"]\";\n var appElements = [].slice.call(this.parent.element.querySelectorAll(appSelector));\n if (appElements.length > 0) {\n this.parent.eventBase.removeSelectedAppointmentClass();\n var focusAppointment = appElements[0];\n this.parent.eventBase.addSelectedAppointments([focusAppointment]);\n focusAppointment.focus();\n e.preventDefault();\n }\n }\n };\n KeyboardInteraction.prototype.processEscape = function (event) {\n this.parent.quickPopup.onClosePopup(event);\n this.parent.quickPopup.morePopup.hide();\n if (this.parent.headerModule) {\n this.parent.headerModule.hideHeaderPopup();\n }\n if (this.parent.inlineModule) {\n this.parent.inlineModule.removeInlineAppointmentElement();\n }\n };\n KeyboardInteraction.prototype.isPreventAction = function (e) {\n var target = closest(e.target, '.' + cls.RESOURCE_GROUP_CELLS_CLASS);\n if (this.parent.activeView.isTimelineView() && !isNullOrUndefined(target)) {\n return true;\n }\n return false;\n };\n KeyboardInteraction.prototype.processTabOnResourceCells = function (target, isReverse) {\n var tabElements = [].slice.call(this.parent.element.querySelectorAll('[tabIndex=\"0\"]'));\n var currentTabIndex = tabElements.indexOf(target);\n var nextTabElement = !isReverse ? tabElements[currentTabIndex + 1] : tabElements[currentTabIndex - 1];\n if (nextTabElement && nextTabElement.classList.contains(cls.RESOURCE_CELLS_CLASS)) {\n var groupIndex = parseInt(nextTabElement.getAttribute('data-group-index'), 10);\n if (this.parent.virtualScrollModule) {\n var resColWrap_1 = this.parent.element.querySelector('.' + cls.RESOURCE_COLUMN_WRAP_CLASS);\n var resCells = [].slice.call(this.parent.element.querySelectorAll('.' + cls.RESOURCE_CELLS_CLASS));\n resCells.forEach(function (element) {\n if (element.getBoundingClientRect().top < resColWrap_1.getBoundingClientRect().top) {\n element.setAttribute('tabindex', '-1');\n }\n });\n }\n else {\n this.setScrollPosition(groupIndex);\n }\n }\n };\n KeyboardInteraction.prototype.setScrollPosition = function (index) {\n var workCell = this.parent.element.querySelector(\".\" + cls.WORK_CELLS_CLASS + \"[data-group-index=\\\"\" + index + \"\\\"]\");\n if (workCell) {\n this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS).scrollTop = workCell.offsetTop;\n }\n };\n /**\n * Get module name.\n *\n * @returns {string} Returns the module name.\n */\n KeyboardInteraction.prototype.getModuleName = function () {\n return 'keyboard';\n };\n /**\n * To destroy the keyboard module.\n *\n * @returns {void}\n * @private\n */\n KeyboardInteraction.prototype.destroy = function () {\n this.removeEventListener();\n this.keyboardModule.destroy();\n };\n return KeyboardInteraction;\n}());\nexport { KeyboardInteraction };\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Query, DataManager } from '@syncfusion/ej2-data';\n/**\n * data module is used to generate query and data source.\n *\n * @private\n */\nvar Data = /** @class */ (function () {\n /**\n * Constructor for data module\n *\n * @param {Object | DataManager} dataSource Accepts the datasource as JSON objects or DataManager\n * @param {Query} query Accepts the query to process the data\n * @private\n */\n function Data(dataSource, query) {\n this.initDataManager(dataSource, query);\n }\n /**\n * The function used to initialize dataManager and query\n *\n * @param {Object | DataManager} dataSource Accepts the datasource as JSON objects or DataManager\n * @param {Query} query Accepts the query to process the data\n * @returns {void}\n * @private\n */\n Data.prototype.initDataManager = function (dataSource, query) {\n this.dataManager = dataSource instanceof DataManager ? dataSource : new DataManager(dataSource);\n this.query = query instanceof Query ? query : new Query();\n };\n /**\n * The function used to generate updated Query from schedule model\n *\n * @param {Date} startDate Accepts the start date\n * @param {Date} endDate Accepts the end date\n * @returns {void}\n * @private\n */\n Data.prototype.generateQuery = function (startDate, endDate) {\n var query = this.query.clone();\n if (startDate) {\n query.addParams('StartDate', startDate.toISOString());\n }\n if (endDate) {\n query.addParams('EndDate', endDate.toISOString());\n }\n return query;\n };\n /**\n * The function used to get dataSource by executing given Query\n *\n * @param {Query} query - A Query that specifies to generate dataSource\n * @returns {void}\n * @private\n */\n Data.prototype.getData = function (query) {\n return this.dataManager.executeQuery(query);\n };\n /**\n * To destroy the crud module.\n *\n * @returns {void}\n * @private\n */\n Data.prototype.destroy = function () {\n this.dataManager = null;\n this.query = null;\n };\n return Data;\n}());\nexport { Data };\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { addClass, createElement, closest, remove, removeClass } from '@syncfusion/ej2-base';\nimport { VerticalEvent } from '../event-renderer/vertical-view';\nimport { MonthEvent } from '../event-renderer/month';\nimport { TimelineEvent } from '../event-renderer/timeline-view';\nimport * as cls from '../base/css-constant';\nimport * as events from '../base/constant';\nimport * as util from '../base/util';\n/**\n * Inline Edit interactions\n */\nvar InlineEdit = /** @class */ (function () {\n function InlineEdit(parent) {\n this.parent = parent;\n this.parent.on(events.inlineClick, this.inlineEdit, this);\n }\n InlineEdit.prototype.inlineEdit = function (args) {\n if (this.parent.quickPopup) {\n this.parent.quickPopup.quickPopupHide();\n }\n var moreWrapper = this.parent.element.querySelector('.e-more-popup-wrapper ');\n if (moreWrapper && moreWrapper.classList.contains(cls.POPUP_OPEN)) {\n this.parent.quickPopup.morePopup.hide();\n }\n if (args.type === 'Cell') {\n this.removeInlineAppointmentElement();\n this.cellEdit(args);\n }\n else {\n if (this.parent.element.querySelector('.' + cls.INLINE_SUBJECT_CLASS) !==\n args.element.querySelector('.' + cls.INLINE_SUBJECT_CLASS)) {\n this.removeInlineAppointmentElement();\n }\n this.eventEdit(args);\n }\n };\n InlineEdit.prototype.cellEdit = function (args) {\n var saveObj = this.generateEventData();\n var cellIndex = args.element.cellIndex;\n var count = this.getEventDaysCount(saveObj);\n if (count > 1) {\n count = Math.round(count);\n count--;\n cellIndex = cellIndex - count;\n }\n var start = util.resetTime(new Date('' + saveObj[this.parent.eventFields.startTime])).getTime();\n var end = util.resetTime(new Date('' + saveObj[this.parent.eventFields.endTime])).getTime();\n var resIndex = args.groupIndex || 0;\n if (this.parent.currentView === 'Day' || this.parent.currentView === 'Week' || this.parent.currentView === 'WorkWeek') {\n var dayIndex = saveObj[this.parent.eventFields.startTime].getDay();\n this.createVerticalViewInline(saveObj, dayIndex, resIndex, cellIndex);\n }\n else if (this.parent.currentView === 'Month') {\n this.createMonthViewInline(saveObj, resIndex, start, end);\n }\n else {\n this.createTimelineViewInline(saveObj, start, end, resIndex);\n }\n var inlineSubject = this.parent.element.querySelector('.' + cls.INLINE_SUBJECT_CLASS);\n if (inlineSubject) {\n inlineSubject.focus();\n }\n };\n InlineEdit.prototype.eventEdit = function (args) {\n var inlineSubject = args.element.querySelector('.' + cls.INLINE_SUBJECT_CLASS);\n var subject;\n if (inlineSubject) {\n subject = inlineSubject.value;\n }\n else {\n var subEle = args.element.querySelector('.' + cls.SUBJECT_CLASS);\n var timeEle = args.element.querySelector('.' + cls.APPOINTMENT_TIME);\n subject = subEle.innerText;\n inlineSubject = createElement('input', { className: cls.INLINE_SUBJECT_CLASS, attrs: { value: subject } });\n addClass([subEle], cls.DISABLE_CLASS);\n if (closest(args.element, '.' + cls.MORE_POPUP_WRAPPER_CLASS)) {\n args.element.insertBefore(inlineSubject, subEle);\n }\n else if (['Agenda', 'MonthAgenda'].indexOf(this.parent.currentView) > -1) {\n var subjectWrap = args.element.querySelector('.' + cls.SUBJECT_WRAP);\n subjectWrap.insertBefore(inlineSubject, subjectWrap.firstChild);\n }\n else {\n var elementSelector = ['TimelineDay', 'TimelineWeek', 'TimelineWorkWeek', 'TimelineMonth'].indexOf(this.parent.currentView) > -1 ?\n '.e-inner-wrap' : '.e-appointment-details';\n args.element.querySelector(elementSelector).insertBefore(inlineSubject, timeEle);\n }\n }\n inlineSubject.focus();\n inlineSubject.setSelectionRange(subject.length, subject.length);\n };\n InlineEdit.prototype.createVerticalViewInline = function (saveObj, dayIndex, resIndex, daysCount) {\n var _a;\n var count = this.getEventDaysCount(saveObj);\n var verticalEvent = new VerticalEvent(this.parent);\n verticalEvent.initializeValues();\n var index = verticalEvent.dateRender[resIndex].map(function (date) { return date.getDay(); }).indexOf(dayIndex);\n if (count >= 1) {\n verticalEvent.allDayElement = [].slice.call(this.parent.element.querySelectorAll('.' + cls.ALLDAY_CELLS_CLASS));\n (_a = verticalEvent.slots).push.apply(_a, this.parent.activeView.renderDates.map(function (date) { return +date; }));\n var allDayElements = [].slice.call(this.parent.element.querySelectorAll('.' + cls.ALLDAY_APPOINTMENT_CLASS));\n var allDayLevel = 0;\n if (allDayElements.length > 0) {\n allDayLevel = Math.floor(this.parent.element.querySelector('.' + cls.ALLDAY_ROW_CLASS).getBoundingClientRect().height /\n allDayElements[0].offsetHeight) - 1;\n }\n verticalEvent.allDayLevel = allDayLevel;\n verticalEvent.renderAllDayEvents(saveObj, index, resIndex, daysCount, this.parent.allowInline);\n }\n else {\n verticalEvent.renderNormalEvents(saveObj, index, resIndex, daysCount, this.parent.allowInline);\n }\n };\n InlineEdit.prototype.createMonthViewInline = function (saveObj, index, start, end) {\n var count = this.getEventDaysCount(saveObj);\n var saveObject = this.parent.eventBase.cloneEventObject(saveObj, start, end, count, false, false);\n var monthEvent = new MonthEvent(this.parent);\n monthEvent.dateRender = this.parent.activeView.renderDates;\n monthEvent.inlineValue = this.parent.allowInline;\n var renderDates = this.parent.activeView.renderDates;\n var workDays = this.parent.activeViewOptions.workDays;\n var monthCellSelector = '.' + cls.WORK_CELLS_CLASS;\n if (this.parent.activeViewOptions.group.resources.length > 0) {\n monthCellSelector += '[data-group-index=\"' + index + '\"]';\n var resourceData = this.parent.resourceBase.lastResourceLevel[index];\n renderDates = resourceData.renderDates;\n workDays = resourceData.workDays;\n }\n monthEvent.workCells = [].slice.call(this.parent.element.querySelectorAll(monthCellSelector));\n monthEvent.cellWidth = monthEvent.workCells[0].offsetWidth;\n monthEvent.cellHeight = monthEvent.workCells[0].offsetHeight;\n monthEvent.eventHeight = util.getElementHeightFromClass(this.parent.monthModule.element, cls.APPOINTMENT_CLASS);\n monthEvent.getSlotDates(workDays);\n var filteredDates = monthEvent.getRenderedDates(renderDates);\n var spannedEvents = monthEvent.splitEvent(saveObject, filteredDates || renderDates);\n for (var _i = 0, spannedEvents_1 = spannedEvents; _i < spannedEvents_1.length; _i++) {\n var eventData = spannedEvents_1[_i];\n monthEvent.renderEvents(eventData, index);\n }\n var inlineSubject = this.parent.element.querySelector('.' + cls.INLINE_SUBJECT_CLASS);\n inlineSubject.focus();\n };\n InlineEdit.prototype.createTimelineViewInline = function (saveObj, start, end, resIndex) {\n var count = this.getEventDaysCount(saveObj);\n var saveObject = this.parent.eventBase.cloneEventObject(saveObj, start, end, count, false, false);\n var timelineView = new TimelineEvent(this.parent, this.parent.activeViewOptions.timeScale.enable ? 'hour' : 'day');\n timelineView.dateRender = this.parent.activeView.renderDates;\n timelineView.eventContainers = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CONTAINER_CLASS));\n var workCell = this.parent.element.querySelector('.' + cls.WORK_CELLS_CLASS);\n timelineView.inlineValue = this.parent.allowInline;\n timelineView.cellWidth = workCell.offsetWidth;\n timelineView.cellHeight = workCell.offsetHeight;\n var dayLength = this.parent.element.querySelectorAll('.' + cls.CONTENT_TABLE_CLASS + ' tbody tr').length === 0 ?\n 0 : this.parent.element.querySelectorAll('.' + cls.CONTENT_TABLE_CLASS + ' tbody tr')[0].children.length;\n timelineView.slotsPerDay = dayLength / timelineView.dateRender.length;\n timelineView.eventHeight = util.getElementHeightFromClass(timelineView.element, cls.APPOINTMENT_CLASS);\n timelineView.renderEvents(saveObject, resIndex);\n };\n InlineEdit.prototype.getEventDaysCount = function (saveObj) {\n var startDate = saveObj[this.parent.eventFields.startTime];\n var endDate = saveObj[this.parent.eventFields.endTime];\n var daysCount = Math.abs(endDate.getTime() - startDate.getTime()) / util.MS_PER_DAY;\n return daysCount;\n };\n InlineEdit.prototype.generateEventData = function (target) {\n var inlineElement = this.parent.element.querySelector('.' + cls.INLINE_SUBJECT_CLASS);\n var subject = inlineElement ? inlineElement.value : target ? target.innerHTML : '';\n var saveObj = {};\n saveObj[this.parent.eventFields.id] = this.parent.eventBase.getEventMaxID();\n saveObj[this.parent.eventFields.subject] = subject;\n saveObj[this.parent.eventFields.startTime] = this.parent.activeCellsData.startTime;\n saveObj[this.parent.eventFields.endTime] = this.parent.activeCellsData.endTime;\n saveObj[this.parent.eventFields.isAllDay] = this.parent.activeCellsData.isAllDay;\n this.parent.eventWindow.setDefaultValueToObject(saveObj);\n if (this.parent.resourceBase) {\n this.parent.resourceBase.setResourceValues(saveObj, this.parent.activeCellsData.groupIndex);\n }\n return saveObj;\n };\n InlineEdit.prototype.documentClick = function () {\n var target = this.parent.element.querySelector('.' + cls.INLINE_SUBJECT_CLASS);\n if (target && target.value !== '') {\n this.inlineCrudActions(target);\n }\n };\n InlineEdit.prototype.inlineCrudActions = function (target) {\n if (closest(target, '.' + cls.INLINE_APPOINTMENT_CLASS)) {\n var saveObj = this.generateEventData(target);\n this.parent.addEvent(saveObj);\n }\n else {\n var eventTarget = closest(target, '.' + cls.APPOINTMENT_CLASS);\n var eventDetails = this.parent.getEventDetails(eventTarget);\n eventDetails[this.parent.eventFields.subject] = target.value;\n var currentAction = void 0;\n if (eventDetails[this.parent.eventFields.id] === eventDetails[this.parent.eventFields.recurrenceID]) {\n currentAction = 'EditOccurrence';\n eventDetails[this.parent.eventFields.id] = this.parent.eventBase.getEventMaxID();\n }\n this.parent.saveEvent(eventDetails, currentAction);\n }\n this.removeInlineAppointmentElement();\n };\n InlineEdit.prototype.createInlineAppointmentElement = function (inlineData) {\n var inlineAppointmentElement = createElement('div', {\n className: cls.APPOINTMENT_CLASS + ' ' + cls.INLINE_APPOINTMENT_CLASS\n });\n var inlineDetails = createElement('div', { className: cls.APPOINTMENT_DETAILS });\n inlineAppointmentElement.appendChild(inlineDetails);\n var inline = createElement('input', { className: cls.INLINE_SUBJECT_CLASS });\n inlineDetails.appendChild(inline);\n if (inlineData) {\n this.parent.eventBase.applyResourceColor(inlineAppointmentElement, inlineData, 'backgroundColor');\n }\n return inlineAppointmentElement;\n };\n InlineEdit.prototype.removeInlineAppointmentElement = function () {\n var inlineAppointment = [].slice.call(this.parent.element.querySelectorAll('.' + cls.INLINE_APPOINTMENT_CLASS));\n if (inlineAppointment.length > 0) {\n inlineAppointment.forEach(function (node) { return remove(node); });\n }\n var inlineSubject = this.parent.element.querySelector('.' + cls.INLINE_SUBJECT_CLASS);\n if (inlineSubject) {\n var appointmentSubject = closest(inlineSubject, '.' + cls.APPOINTMENT_CLASS);\n removeClass([appointmentSubject.querySelector('.' + cls.SUBJECT_CLASS)], cls.DISABLE_CLASS);\n remove(inlineSubject);\n }\n };\n InlineEdit.prototype.destroy = function () {\n this.parent.off(events.inlineClick, this.inlineEdit);\n };\n return InlineEdit;\n}());\nexport { InlineEdit };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, Property, Event, Collection, L10n, Complex, compile, createElement } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, detach, attributes, prepend, setStyleAttribute } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, ChildProperty, isBlazor } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, formatUnit, append, EventHandler, Draggable, extend } from '@syncfusion/ej2-base';\nimport { SanitizeHtmlHelper, Browser } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { Popup, PositionData, getZindexPartial } from '../popup/popup';\nimport { createResize, removeResize, setMinHeight, setMaxWidth, setMaxHeight } from '../common/resize';\nvar ButtonProps = /** @class */ (function (_super) {\n __extends(ButtonProps, _super);\n function ButtonProps() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(true)\n ], ButtonProps.prototype, \"isFlat\", void 0);\n __decorate([\n Property()\n ], ButtonProps.prototype, \"buttonModel\", void 0);\n __decorate([\n Property('Button')\n ], ButtonProps.prototype, \"type\", void 0);\n __decorate([\n Event()\n ], ButtonProps.prototype, \"click\", void 0);\n return ButtonProps;\n}(ChildProperty));\nexport { ButtonProps };\n/**\n * Configures the animation properties for both open and close the dialog.\n */\nvar AnimationSettings = /** @class */ (function (_super) {\n __extends(AnimationSettings, _super);\n function AnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Fade')\n ], AnimationSettings.prototype, \"effect\", void 0);\n __decorate([\n Property(400)\n ], AnimationSettings.prototype, \"duration\", void 0);\n __decorate([\n Property(0)\n ], AnimationSettings.prototype, \"delay\", void 0);\n return AnimationSettings;\n}(ChildProperty));\nexport { AnimationSettings };\nvar ROOT = 'e-dialog';\nvar RTL = 'e-rtl';\nvar DLG_HEADER_CONTENT = 'e-dlg-header-content';\nvar DLG_HEADER = 'e-dlg-header';\nvar DLG_FOOTER_CONTENT = 'e-footer-content';\nvar MODAL_DLG = 'e-dlg-modal';\nvar DLG_CONTENT = 'e-dlg-content';\nvar DLG_CLOSE_ICON = 'e-icon-dlg-close';\nvar DLG_OVERLAY = 'e-dlg-overlay';\nvar DLG_TARGET = 'e-dlg-target';\nvar DLG_CONTAINER = 'e-dlg-container';\nvar SCROLL_DISABLED = 'e-scroll-disabled';\nvar DLG_PRIMARY_BUTTON = 'e-primary';\nvar ICON = 'e-icons';\nvar POPUP_ROOT = 'e-popup';\nvar DEVICE = 'e-device';\nvar FULLSCREEN = 'e-dlg-fullscreen';\nvar DLG_CLOSE_ICON_BTN = 'e-dlg-closeicon-btn';\nvar DLG_HIDE = 'e-popup-close';\nvar DLG_SHOW = 'e-popup-open';\nvar DLG_UTIL_DEFAULT_TITLE = 'Information';\nvar DLG_UTIL_ROOT = 'e-scroll-disabled';\nvar DLG_UTIL_ALERT = 'e-alert-dialog';\nvar DLG_UTIL_CONFIRM = 'e-confirm-dialog';\nvar DLG_RESIZABLE = 'e-dlg-resizable';\nvar DLG_RESTRICT_LEFT_VALUE = 'e-restrict-left';\nvar DLG_RESTRICT_WIDTH_VALUE = 'e-resize-viewport';\nvar DLG_REF_ELEMENT = 'e-dlg-ref-element';\nvar DLG_USER_ACTION_CLOSED = 'user action';\nvar DLG_CLOSE_ICON_CLOSED = 'close icon';\nvar DLG_ESCAPE_CLOSED = 'escape';\nvar DLG_OVERLAYCLICK_CLOSED = 'overlayClick';\n/**\n * Represents the dialog component that displays the information and get input from the user.\n * Two types of dialog components are `Modal and Modeless (non-modal)` depending on its interaction with parent application.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar Dialog = /** @class */ (function (_super) {\n __extends(Dialog, _super);\n /*\n * * Constructor for creating the widget\n *\n * @param\n * @param\n * @hidden\n */\n function Dialog(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.dlgClosedBy = DLG_USER_ACTION_CLOSED;\n return _this;\n }\n /**\n *Initialize the control rendering\n *\n * @returns {void}\n * @private\n */\n Dialog.prototype.render = function () {\n this.initialize();\n this.initRender();\n this.wireEvents();\n if (this.width === '100%') {\n this.element.style.width = '';\n }\n if (this.minHeight !== '') {\n this.element.style.minHeight = formatUnit(this.minHeight);\n }\n if (this.enableResize) {\n this.setResize();\n if (this.animationSettings.effect === 'None') {\n this.getMinHeight();\n }\n }\n this.renderComplete();\n };\n /**\n *Initialize the event handler\n *\n * @returns {void}\n * @private\n */\n Dialog.prototype.preRender = function () {\n var _this = this;\n this.headerContent = null;\n this.allowMaxHeight = true;\n this.preventVisibility = true;\n this.clonedEle = this.element.cloneNode(true);\n this.closeIconClickEventHandler = function (event) {\n _this.dlgClosedBy = DLG_CLOSE_ICON_CLOSED;\n _this.hide(event);\n };\n // eslint-disable-next-line\n this.dlgOverlayClickEventHandler = function (event) {\n _this.dlgClosedBy = DLG_OVERLAYCLICK_CLOSED;\n event.preventFocus = false;\n _this.trigger('overlayClick', event, function (overlayClickEventArgs) {\n if (!overlayClickEventArgs.preventFocus) {\n _this.focusContent();\n }\n _this.dlgClosedBy = DLG_USER_ACTION_CLOSED;\n });\n };\n // eslint-disable-next-line\n var localeText = { close: 'Close' };\n this.l10n = new L10n('dialog', localeText, this.locale);\n this.checkPositionData();\n if (isNullOrUndefined(this.target)) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.target = document.body;\n this.isProtectedOnChange = prevOnChange;\n }\n };\n Dialog.prototype.isNumberValue = function (value) {\n var isNumber = /^[-+]?\\d*\\.?\\d+$/.test(value);\n return isNumber;\n };\n Dialog.prototype.checkPositionData = function () {\n if (!isNullOrUndefined(this.position)) {\n if (!isNullOrUndefined(this.position.X) && (typeof (this.position.X) !== 'number')) {\n var isNumber = this.isNumberValue(this.position.X);\n if (isNumber) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.position.X = parseFloat(this.position.X);\n this.isProtectedOnChange = prevOnChange;\n }\n }\n if (!isNullOrUndefined(this.position.Y) && (typeof (this.position.Y) !== 'number')) {\n var isNumber = this.isNumberValue(this.position.Y);\n if (isNumber) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.position.Y = parseFloat(this.position.Y);\n this.isProtectedOnChange = prevOnChange;\n }\n }\n }\n };\n Dialog.prototype.getEle = function (list, selector) {\n var element = undefined;\n for (var i = 0; i < list.length; i++) {\n if (list[i].classList.contains(selector)) {\n element = list[i];\n break;\n }\n }\n return element;\n };\n /* istanbul ignore next */\n Dialog.prototype.getMinHeight = function () {\n var computedHeaderHeight = '0px';\n var computedFooterHeight = '0px';\n if (!isNullOrUndefined(this.element.querySelector('.' + DLG_HEADER_CONTENT))) {\n computedHeaderHeight = getComputedStyle(this.headerContent).height;\n }\n var footerEle = this.getEle(this.element.children, DLG_FOOTER_CONTENT);\n if (!isNullOrUndefined(footerEle)) {\n computedFooterHeight = getComputedStyle(footerEle).height;\n }\n var headerHeight = parseInt(computedHeaderHeight.slice(0, computedHeaderHeight.indexOf('p')), 10);\n var footerHeight = parseInt(computedFooterHeight.slice(0, computedFooterHeight.indexOf('p')), 10);\n setMinHeight(headerHeight + 30 + (isNaN(footerHeight) ? 0 : footerHeight));\n return (headerHeight + 30 + footerHeight);\n };\n Dialog.prototype.onResizeStart = function (args, dialogObj) {\n dialogObj.trigger('resizeStart', args);\n return args.cancel;\n };\n Dialog.prototype.onResizing = function (args, dialogObj) {\n dialogObj.trigger('resizing', args);\n };\n Dialog.prototype.onResizeComplete = function (args, dialogObj) {\n dialogObj.trigger('resizeStop', args);\n };\n Dialog.prototype.setResize = function () {\n if (this.enableResize) {\n if (this.isBlazorServerRender() && !isNullOrUndefined(this.element.querySelector('.e-icons.e-resize-handle'))) {\n return;\n }\n this.element.classList.add(DLG_RESIZABLE);\n var computedHeight = getComputedStyle(this.element).minHeight;\n var computedWidth = getComputedStyle(this.element).minWidth;\n var direction = '';\n for (var i = 0; i < this.resizeHandles.length; i++) {\n if (this.resizeHandles[i] === 'All') {\n direction = 'south north east west north-east north-west south-east south-west';\n break;\n }\n else {\n var directionValue = '';\n switch (this.resizeHandles[i].toString()) {\n case 'SouthEast':\n directionValue = 'south-east';\n break;\n case 'SouthWest':\n directionValue = 'south-west';\n break;\n case 'NorthEast':\n directionValue = 'north-east';\n break;\n case 'NorthWest':\n directionValue = 'north-west';\n break;\n default:\n directionValue = this.resizeHandles[i].toString();\n break;\n }\n direction += directionValue.toLocaleLowerCase() + ' ';\n }\n }\n if (this.enableRtl && direction.trim() === 'south-east') {\n direction = 'south-west';\n }\n else if (this.enableRtl && direction.trim() === 'south-west') {\n direction = 'south-east';\n }\n if (this.isModal && this.enableRtl) {\n this.element.classList.add(DLG_RESTRICT_LEFT_VALUE);\n }\n else if (this.isModal && this.target === document.body) {\n this.element.classList.add(DLG_RESTRICT_WIDTH_VALUE);\n }\n createResize({\n element: this.element,\n direction: direction,\n minHeight: parseInt(computedHeight.slice(0, computedWidth.indexOf('p')), 10),\n maxHeight: this.targetEle.clientHeight,\n minWidth: parseInt(computedWidth.slice(0, computedWidth.indexOf('p')), 10),\n maxWidth: this.targetEle.clientWidth,\n boundary: this.target === document.body ? null : this.targetEle,\n resizeBegin: this.onResizeStart.bind(this),\n resizeComplete: this.onResizeComplete.bind(this),\n resizing: this.onResizing.bind(this),\n proxy: this\n });\n this.wireWindowResizeEvent();\n }\n else {\n removeResize();\n this.unWireWindowResizeEvent();\n if (this.isModal) {\n this.element.classList.remove(DLG_RESTRICT_LEFT_VALUE);\n }\n else {\n this.element.classList.remove(DLG_RESTRICT_WIDTH_VALUE);\n }\n this.element.classList.remove(DLG_RESIZABLE);\n }\n };\n Dialog.prototype.getFocusElement = function (target) {\n var value = 'input,select,textarea,button:enabled,a,[contenteditable=\"true\"],[tabindex]';\n var items = target.querySelectorAll(value);\n return { element: items[items.length - 1] };\n };\n /* istanbul ignore next */\n Dialog.prototype.keyDown = function (event) {\n var _this = this;\n if (event.keyCode === 9) {\n if (this.isModal) {\n var buttonObj = void 0;\n if (!isNullOrUndefined(this.btnObj)) {\n buttonObj = this.btnObj[this.btnObj.length - 1];\n }\n if ((isNullOrUndefined(this.btnObj)) && (!isNullOrUndefined(this.ftrTemplateContent))) {\n buttonObj = this.getFocusElement(this.ftrTemplateContent);\n }\n if (isNullOrUndefined(this.btnObj) && isNullOrUndefined(this.ftrTemplateContent) && !isNullOrUndefined(this.contentEle)) {\n buttonObj = this.getFocusElement(this.contentEle);\n }\n if (!isNullOrUndefined(buttonObj) && document.activeElement === buttonObj.element && !event.shiftKey) {\n event.preventDefault();\n this.focusableElements(this.element).focus();\n }\n if (document.activeElement === this.focusableElements(this.element) && event.shiftKey) {\n event.preventDefault();\n if (!isNullOrUndefined(buttonObj)) {\n buttonObj.element.focus();\n }\n }\n }\n }\n var element = document.activeElement;\n var isTagName = (['input', 'textarea'].indexOf(element.tagName.toLowerCase()) > -1);\n var isContentEdit = false;\n if (!isTagName) {\n isContentEdit = element.hasAttribute('contenteditable') && element.getAttribute('contenteditable') === 'true';\n }\n if (event.keyCode === 27 && this.closeOnEscape) {\n this.dlgClosedBy = DLG_ESCAPE_CLOSED;\n this.hide(event);\n }\n if ((event.keyCode === 13 && !event.ctrlKey && element.tagName.toLowerCase() !== 'textarea' &&\n isTagName && !isNullOrUndefined(this.primaryButtonEle)) ||\n (event.keyCode === 13 && event.ctrlKey && (element.tagName.toLowerCase() === 'textarea' ||\n isContentEdit)) && !isNullOrUndefined(this.primaryButtonEle)) {\n var buttonIndex_1;\n // eslint-disable-next-line\n var firstPrimary = this.buttons.some(function (data, index) {\n buttonIndex_1 = index;\n // eslint-disable-next-line\n var buttonModel = data.buttonModel;\n return !isNullOrUndefined(buttonModel) && buttonModel.isPrimary === true;\n });\n if (firstPrimary && typeof (this.buttons[buttonIndex_1].click) === 'function') {\n setTimeout(function () {\n _this.buttons[buttonIndex_1].click.call(_this, event);\n });\n }\n }\n };\n /**\n * Initialize the control rendering\n *\n * @returns {void}\n * @private\n */\n Dialog.prototype.initialize = function () {\n if (!isNullOrUndefined(this.target)) {\n this.targetEle = ((typeof this.target) === 'string') ?\n document.querySelector(this.target) : this.target;\n }\n if (!this.isBlazorServerRender()) {\n addClass([this.element], ROOT);\n }\n if (Browser.isDevice) {\n addClass([this.element], DEVICE);\n }\n if (!this.isBlazorServerRender()) {\n this.setCSSClass();\n }\n this.setMaxHeight();\n };\n /**\n * Initialize the rendering\n *\n * @returns {void}\n * @private\n */\n Dialog.prototype.initRender = function () {\n var _this = this;\n this.initialRender = true;\n if (!this.isBlazorServerRender()) {\n attributes(this.element, { role: 'dialog' });\n }\n if (this.zIndex === 1000) {\n this.setzIndex(this.element, false);\n this.calculatezIndex = true;\n }\n else {\n this.calculatezIndex = false;\n }\n if (this.isBlazorServerRender() && isNullOrUndefined(this.headerContent)) {\n this.headerContent = this.element.getElementsByClassName('e-dlg-header-content')[0];\n }\n if (this.isBlazorServerRender() && isNullOrUndefined(this.contentEle)) {\n this.contentEle = this.element.querySelector('#' + this.element.id + '_dialog-content');\n }\n if (!this.isBlazorServerRender()) {\n this.setTargetContent();\n if (this.header !== '' && !isNullOrUndefined(this.header)) {\n this.setHeader();\n }\n if (this.showCloseIcon) {\n this.renderCloseIcon();\n }\n this.setContent();\n if (this.footerTemplate !== '' && !isNullOrUndefined(this.footerTemplate)) {\n this.setFooterTemplate();\n }\n else if (!isNullOrUndefined(this.buttons[0].buttonModel)) {\n this.setButton();\n }\n }\n if (this.isBlazorServerRender()) {\n if (!isNullOrUndefined(this.buttons[0].buttonModel) && this.footerTemplate === '') {\n this.setButton();\n }\n }\n if (this.allowDragging && (!isNullOrUndefined(this.headerContent))) {\n this.setAllowDragging();\n }\n if (!this.isBlazorServerRender()) {\n attributes(this.element, { 'aria-modal': (this.isModal ? 'true' : 'false') });\n if (this.isModal) {\n this.setIsModal();\n }\n }\n if (this.isBlazorServerRender() && isNullOrUndefined(this.dlgContainer)) {\n this.dlgContainer = this.element.parentElement;\n for (var i = 0, childNodes = this.dlgContainer.children; i < childNodes.length; i++) {\n if (childNodes[i].classList.contains('e-dlg-overlay')) {\n this.dlgOverlay = childNodes[i];\n }\n }\n }\n if (this.element.classList.contains(DLG_UTIL_ALERT) !== true && this.element.classList.contains(DLG_UTIL_CONFIRM) !== true\n && !isNullOrUndefined(this.element.parentElement)) {\n var parentEle = this.isModal ? this.dlgContainer.parentElement : this.element.parentElement;\n this.refElement = this.createElement('div', { className: DLG_REF_ELEMENT });\n parentEle.insertBefore(this.refElement, (this.isModal ? this.dlgContainer : this.element));\n }\n if (!isNullOrUndefined(this.targetEle)) {\n // eslint-disable-next-line\n this.isModal ? this.targetEle.appendChild(this.dlgContainer) : this.targetEle.appendChild(this.element);\n }\n this.popupObj = new Popup(this.element, {\n height: this.height,\n width: this.width,\n zIndex: this.zIndex,\n relateTo: this.target,\n actionOnScroll: 'none',\n enableRtl: this.enableRtl,\n // eslint-disable-next-line\n open: function (event) {\n // eslint-disable-next-line\n var eventArgs = {\n container: _this.isModal ? _this.dlgContainer : _this.element,\n element: _this.element,\n target: _this.target,\n preventFocus: false\n };\n if (_this.enableResize) {\n _this.resetResizeIcon();\n }\n // eslint-disable-next-line\n _this.trigger('open', eventArgs, function (openEventArgs) {\n if (!openEventArgs.preventFocus) {\n _this.focusContent();\n }\n });\n },\n // eslint-disable-next-line\n close: function (event) {\n if (_this.isModal) {\n addClass([_this.dlgOverlay], 'e-fade');\n }\n _this.unBindEvent(_this.element);\n if (_this.isModal) {\n _this.dlgContainer.style.display = 'none';\n }\n _this.trigger('close', _this.closeArgs);\n var activeEle = document.activeElement;\n if (!isNullOrUndefined(activeEle) && !isNullOrUndefined((activeEle).blur)) {\n activeEle.blur();\n }\n if (!isNullOrUndefined(_this.storeActiveElement) && !isNullOrUndefined(_this.storeActiveElement.focus)) {\n _this.storeActiveElement.focus();\n }\n }\n });\n this.positionChange();\n this.setEnableRTL();\n if (!this.isBlazorServerRender()) {\n addClass([this.element], DLG_HIDE);\n if (this.isModal) {\n this.setOverlayZindex();\n }\n }\n if (this.visible) {\n this.show();\n }\n else {\n if (this.isModal) {\n this.dlgOverlay.style.display = 'none';\n }\n }\n this.initialRender = false;\n };\n Dialog.prototype.resetResizeIcon = function () {\n var dialogConHeight = this.getMinHeight();\n if (this.targetEle.offsetHeight < dialogConHeight) {\n var className = this.enableRtl ? 'e-south-west' : 'e-south-east';\n var resizeIcon = this.element.querySelector('.' + className);\n if (!isNullOrUndefined(resizeIcon)) {\n resizeIcon.style.bottom = '-' + dialogConHeight.toString() + 'px';\n }\n }\n };\n Dialog.prototype.setOverlayZindex = function (zIndexValue) {\n var zIndex;\n if (isNullOrUndefined(zIndexValue)) {\n zIndex = parseInt(this.element.style.zIndex, 10) ? parseInt(this.element.style.zIndex, 10) : this.zIndex;\n }\n else {\n zIndex = zIndexValue;\n }\n this.dlgOverlay.style.zIndex = (zIndex - 1).toString();\n this.dlgContainer.style.zIndex = zIndex.toString();\n };\n Dialog.prototype.positionChange = function () {\n if (this.isModal) {\n if (!isNaN(parseFloat(this.position.X)) && !isNaN(parseFloat(this.position.Y))) {\n this.setPopupPosition();\n }\n else if ((!isNaN(parseFloat(this.position.X)) && isNaN(parseFloat(this.position.Y)))\n || (isNaN(parseFloat(this.position.X)) && !isNaN(parseFloat(this.position.Y)))) {\n this.setPopupPosition();\n }\n else {\n this.element.style.top = '0px';\n this.element.style.left = '0px';\n this.dlgContainer.classList.add('e-dlg-' + this.position.X + '-' + this.position.Y);\n }\n }\n else {\n this.setPopupPosition();\n }\n };\n Dialog.prototype.setPopupPosition = function () {\n this.popupObj.setProperties({\n position: {\n X: this.position.X, Y: this.position.Y\n }\n });\n };\n Dialog.prototype.setAllowDragging = function () {\n var _this = this;\n var handleContent = '.' + DLG_HEADER_CONTENT;\n this.dragObj = new Draggable(this.element, {\n clone: false,\n isDragScroll: true,\n abort: '.e-dlg-closeicon-btn',\n handle: handleContent,\n // eslint-disable-next-line\n dragStart: function (event) {\n // eslint-disable-next-line\n _this.trigger('dragStart', event, function (dragEventArgs) {\n if (isBlazor()) {\n dragEventArgs.bindEvents(event.dragElement);\n }\n });\n },\n // eslint-disable-next-line\n dragStop: function (event) {\n if (_this.isModal) {\n if (!isNullOrUndefined(_this.position)) {\n _this.dlgContainer.classList.remove('e-dlg-' + _this.position.X + '-' + _this.position.Y);\n }\n // Reset the dialog position after drag completion.\n _this.element.style.position = 'relative';\n }\n _this.trigger('dragStop', event);\n _this.element.classList.remove(DLG_RESTRICT_LEFT_VALUE);\n },\n // eslint-disable-next-line\n drag: function (event) {\n _this.trigger('drag', event);\n }\n });\n if (!isNullOrUndefined(this.targetEle)) {\n this.dragObj.dragArea = this.targetEle;\n }\n };\n Dialog.prototype.setButton = function () {\n if (!this.isBlazorServerRender()) {\n this.buttonContent = [];\n this.btnObj = [];\n // eslint-disable-next-line\n var primaryBtnFlag = true;\n for (var i = 0; i < this.buttons.length; i++) {\n var buttonType = !isNullOrUndefined(this.buttons[i].type) ? this.buttons[i].type.toLowerCase() : 'button';\n var btn = this.createElement('button', { attrs: { type: buttonType } });\n this.buttonContent.push(btn.outerHTML);\n }\n this.setFooterTemplate();\n }\n var footerBtn;\n for (var i = 0, childNodes = this.element.children; i < childNodes.length; i++) {\n if (childNodes[i].classList.contains(DLG_FOOTER_CONTENT)) {\n footerBtn = childNodes[i].querySelectorAll('button');\n }\n }\n for (var i = 0; i < this.buttons.length; i++) {\n if (!this.isBlazorServerRender()) {\n this.btnObj[i] = new Button(this.buttons[i].buttonModel);\n }\n if (this.isBlazorServerRender()) {\n this.ftrTemplateContent = this.element.querySelector('.' + DLG_FOOTER_CONTENT);\n }\n if (!isNullOrUndefined(this.ftrTemplateContent) && footerBtn.length > 0) {\n if (typeof (this.buttons[i].click) === 'function') {\n EventHandler.add(footerBtn[i], 'click', this.buttons[i].click, this);\n }\n if (typeof (this.buttons[i].click) === 'object') {\n EventHandler.add(footerBtn[i], 'click', this.buttonClickHandler.bind(this, i), this);\n }\n }\n if (!this.isBlazorServerRender() && !isNullOrUndefined(this.ftrTemplateContent)) {\n this.btnObj[i].appendTo(this.ftrTemplateContent.children[i]);\n if (this.buttons[i].isFlat) {\n this.btnObj[i].element.classList.add('e-flat');\n }\n this.primaryButtonEle = this.element.getElementsByClassName('e-primary')[0];\n }\n }\n };\n Dialog.prototype.buttonClickHandler = function (index) {\n this.trigger('buttons[' + index + '].click', {});\n };\n ;\n Dialog.prototype.setContent = function () {\n attributes(this.element, { 'aria-describedby': this.element.id + '_dialog-content' });\n this.contentEle = this.createElement('div', { className: DLG_CONTENT, id: this.element.id + '_dialog-content' });\n if (this.innerContentElement) {\n this.contentEle.appendChild(this.innerContentElement);\n }\n else if (!isNullOrUndefined(this.content) && this.content !== '' || !this.initialRender) {\n // eslint-disable-next-line\n var blazorContain = Object.keys(window);\n if (typeof (this.content) === 'string' && !isBlazor()) {\n this.contentEle.innerHTML = this.sanitizeHelper(this.content);\n }\n else if (this.content instanceof HTMLElement) {\n this.contentEle.appendChild(this.content);\n }\n else {\n this.setTemplate(this.content, this.contentEle, 'content');\n }\n }\n if (!isNullOrUndefined(this.headerContent)) {\n this.element.insertBefore(this.contentEle, this.element.children[1]);\n }\n else {\n this.element.insertBefore(this.contentEle, this.element.children[0]);\n }\n if (this.height === 'auto') {\n if (!this.isBlazorServerRender() && Browser.isIE && this.element.style.width === '' && !isNullOrUndefined(this.width)) {\n this.element.style.width = formatUnit(this.width);\n }\n this.setMaxHeight();\n }\n };\n Dialog.prototype.setTemplate = function (template, toElement, prop) {\n // eslint-disable-next-line\n var templateFn;\n var templateProps;\n // eslint-disable-next-line\n var blazorContain = Object.keys(window);\n if (toElement.classList.contains(DLG_HEADER)) {\n templateProps = this.element.id + 'header';\n }\n else if (toElement.classList.contains(DLG_FOOTER_CONTENT)) {\n templateProps = this.element.id + 'footerTemplate';\n }\n else {\n templateProps = this.element.id + 'content';\n }\n var templateValue;\n if (!isNullOrUndefined(template.outerHTML)) {\n toElement.appendChild(template);\n }\n else if ((typeof template !== 'string') || (isBlazor() && !this.isStringTemplate)) {\n templateFn = compile(template);\n templateValue = template;\n }\n else {\n toElement.innerHTML = this.sanitizeHelper(template);\n }\n var fromElements = [];\n if (!isNullOrUndefined(templateFn)) {\n var isString = (isBlazor() &&\n !this.isStringTemplate && (templateValue).indexOf('
Blazor') === 0) ?\n this.isStringTemplate : true;\n for (var _i = 0, _a = templateFn({}, this, prop, templateProps, isString); _i < _a.length; _i++) {\n var item = _a[_i];\n fromElements.push(item);\n }\n append([].slice.call(fromElements), toElement);\n }\n };\n /*\n * @returns {void}\n * @hidden\n * @value\n */\n Dialog.prototype.sanitizeHelper = function (value) {\n if (this.enableHtmlSanitizer) {\n var dialogItem = SanitizeHtmlHelper.beforeSanitize();\n var beforeEvent = {\n cancel: false,\n helper: null\n };\n extend(dialogItem, dialogItem, beforeEvent);\n this.trigger('beforeSanitizeHtml', dialogItem);\n if (dialogItem.cancel && !isNullOrUndefined(dialogItem.helper)) {\n value = dialogItem.helper(value);\n }\n else if (!dialogItem.cancel) {\n value = SanitizeHtmlHelper.serializeValue(dialogItem, value);\n }\n }\n return value;\n };\n Dialog.prototype.setMaxHeight = function () {\n if (!this.allowMaxHeight) {\n return;\n }\n var display = this.element.style.display;\n this.element.style.display = 'none';\n this.element.style.maxHeight = (!isNullOrUndefined(this.target)) && (this.targetEle.offsetHeight < window.innerHeight) ?\n (this.targetEle.offsetHeight - 20) + 'px' : (window.innerHeight - 20) + 'px';\n this.element.style.display = display;\n if (Browser.isIE && this.height === 'auto' && !isNullOrUndefined(this.contentEle)\n && this.element.offsetHeight < this.contentEle.offsetHeight) {\n this.element.style.height = 'inherit';\n }\n };\n Dialog.prototype.setEnableRTL = function () {\n if (!this.isBlazorServerRender()) {\n // eslint-disable-next-line\n this.enableRtl ? addClass([this.element], RTL) : removeClass([this.element], RTL);\n }\n if (!isNullOrUndefined(this.element.querySelector('.e-resize-handle'))) {\n removeResize();\n this.setResize();\n }\n };\n Dialog.prototype.setTargetContent = function () {\n var _this = this;\n if (isNullOrUndefined(this.content) || this.content === '') {\n var isContent = this.element.innerHTML.replace(/\\s|<(\\/?|\\/?)(!--!--)>/g, '') !== '';\n if (this.element.children.length > 0 || isContent) {\n this.innerContentElement = document.createDocumentFragment();\n [].slice.call(this.element.childNodes).forEach(function (el) {\n if (el.nodeType !== 8) {\n _this.innerContentElement.appendChild(el);\n }\n });\n }\n }\n };\n Dialog.prototype.setHeader = function () {\n if (this.headerEle) {\n this.headerEle.innerHTML = '';\n }\n else {\n this.headerEle = this.createElement('div', { id: this.element.id + '_title', className: DLG_HEADER });\n }\n this.createHeaderContent();\n this.headerContent.appendChild(this.headerEle);\n this.setTemplate(this.header, this.headerEle, 'header');\n attributes(this.element, { 'aria-labelledby': this.element.id });\n this.element.insertBefore(this.headerContent, this.element.children[0]);\n };\n Dialog.prototype.setFooterTemplate = function () {\n if (this.ftrTemplateContent) {\n this.ftrTemplateContent.innerHTML = '';\n }\n else {\n this.ftrTemplateContent = this.createElement('div', {\n className: DLG_FOOTER_CONTENT\n });\n }\n if (this.footerTemplate !== '' && !isNullOrUndefined(this.footerTemplate)) {\n this.setTemplate(this.footerTemplate, this.ftrTemplateContent, 'footerTemplate');\n }\n else {\n this.ftrTemplateContent.innerHTML = this.buttonContent.join('');\n }\n this.element.appendChild(this.ftrTemplateContent);\n };\n Dialog.prototype.createHeaderContent = function () {\n if (isNullOrUndefined(this.headerContent)) {\n this.headerContent = this.createElement('div', { id: this.element.id + '_dialog-header', className: DLG_HEADER_CONTENT });\n }\n };\n Dialog.prototype.renderCloseIcon = function () {\n this.closeIcon = this.createElement('button', { className: DLG_CLOSE_ICON_BTN, attrs: { type: 'button' } });\n this.closeIconBtnObj = new Button({ cssClass: 'e-flat', iconCss: DLG_CLOSE_ICON + ' ' + ICON });\n this.closeIconTitle();\n if (!isNullOrUndefined(this.headerContent)) {\n prepend([this.closeIcon], this.headerContent);\n }\n else {\n this.createHeaderContent();\n prepend([this.closeIcon], this.headerContent);\n this.element.insertBefore(this.headerContent, this.element.children[0]);\n }\n this.closeIconBtnObj.appendTo(this.closeIcon);\n };\n Dialog.prototype.closeIconTitle = function () {\n this.l10n.setLocale(this.locale);\n var closeIconTitle = this.l10n.getConstant('close');\n this.closeIcon.setAttribute('title', closeIconTitle);\n this.closeIcon.setAttribute('aria-label', closeIconTitle);\n };\n Dialog.prototype.setCSSClass = function (oldCSSClass) {\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n }\n if (oldCSSClass) {\n removeClass([this.element], oldCSSClass.split(' '));\n }\n };\n Dialog.prototype.setIsModal = function () {\n this.dlgContainer = this.createElement('div', { className: DLG_CONTAINER });\n this.element.classList.remove(DLG_SHOW);\n this.element.parentNode.insertBefore(this.dlgContainer, this.element);\n this.dlgContainer.appendChild(this.element);\n addClass([this.element], MODAL_DLG);\n this.dlgOverlay = this.createElement('div', { className: DLG_OVERLAY });\n this.dlgOverlay.style.zIndex = (this.zIndex - 1).toString();\n this.dlgContainer.appendChild(this.dlgOverlay);\n };\n Dialog.prototype.getValidFocusNode = function (items) {\n var node;\n for (var u = 0; u < items.length; u++) {\n node = items[u];\n if ((node.clientHeight > 0 || (node.tagName.toLowerCase() === 'a' && node.hasAttribute('href'))) && node.tabIndex > -1 &&\n !node.disabled && !this.disableElement(node, '[disabled],[aria-disabled=\"true\"],[type=\"hidden\"]')) {\n return node;\n }\n else {\n node = null;\n }\n }\n return node;\n };\n Dialog.prototype.focusableElements = function (content) {\n if (!isNullOrUndefined(content)) {\n var value = 'input,select,textarea,button,a,[contenteditable=\"true\"],[tabindex]';\n var items = content.querySelectorAll(value);\n return this.getValidFocusNode(items);\n }\n return null;\n };\n Dialog.prototype.getAutoFocusNode = function (container) {\n var node = container.querySelector('.' + DLG_CLOSE_ICON_BTN);\n var value = '[autofocus]';\n var items = container.querySelectorAll(value);\n var validNode = this.getValidFocusNode(items);\n if (isBlazor()) {\n this.primaryButtonEle = this.element.getElementsByClassName('e-primary')[0];\n }\n if (!isNullOrUndefined(validNode)) {\n node = validNode;\n }\n else {\n validNode = this.focusableElements(this.contentEle);\n if (!isNullOrUndefined(validNode)) {\n return node = validNode;\n }\n else if (!isNullOrUndefined(this.primaryButtonEle)) {\n return this.element.querySelector('.' + DLG_PRIMARY_BUTTON);\n }\n }\n return node;\n };\n Dialog.prototype.disableElement = function (element, t) {\n // eslint-disable-next-line\n var elementMatch = element ? element.matches || element.webkitMatchesSelector || element.msGetRegionContent : null;\n if (elementMatch) {\n for (; element; element = element.parentNode) {\n if (element instanceof Element && elementMatch.call(element, t)) {\n /* istanbul ignore next */\n return element;\n }\n }\n }\n return null;\n };\n Dialog.prototype.focusContent = function () {\n var element = this.getAutoFocusNode(this.element);\n var node = !isNullOrUndefined(element) ? element : this.element;\n var userAgent = Browser.userAgent;\n if (userAgent.indexOf('MSIE ') > 0 || userAgent.indexOf('Trident/') > 0) {\n this.element.focus();\n }\n node.focus();\n this.bindEvent(this.element);\n };\n Dialog.prototype.bindEvent = function (element) {\n EventHandler.add(element, 'keydown', this.keyDown, this);\n };\n Dialog.prototype.unBindEvent = function (element) {\n EventHandler.remove(element, 'keydown', this.keyDown);\n };\n Dialog.prototype.updateSanitizeContent = function () {\n if (!this.isBlazorServerRender()) {\n this.contentEle.innerHTML = this.sanitizeHelper(this.content);\n }\n };\n Dialog.prototype.isBlazorServerRender = function () {\n return isBlazor() && this.isServerRendered;\n };\n /**\n * Module required function\n *\n * @returns {void}\n * @private\n */\n Dialog.prototype.getModuleName = function () {\n return 'dialog';\n };\n /**\n * Called internally if any of the property value changed\n *\n * @param {DialogModel} newProp - specifies the new property\n * @param {DialogModel} oldProp - specifies the old property\n * @private\n * @returns {void}\n */\n Dialog.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (!this.element.classList.contains(ROOT)) {\n return;\n }\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'content':\n if (!isNullOrUndefined(this.content) && this.content !== '') {\n if (this.isBlazorServerRender()) {\n this.contentEle = this.element.querySelector('.e-dlg-content');\n }\n if (!isNullOrUndefined(this.contentEle) && this.contentEle.getAttribute('role') !== 'dialog') {\n if (!this.isBlazorServerRender()) {\n this.contentEle.innerHTML = '';\n }\n // eslint-disable-next-line\n if (typeof (this.content) === 'function') {\n this.clearTemplate(['content']);\n detach(this.contentEle);\n this.contentEle = null;\n this.setContent();\n }\n else {\n typeof (this.content) === 'string' ? (this.isBlazorServerRender() && (this.contentEle.innerText === '')) ?\n this.contentEle.insertAdjacentHTML('beforeend', this.sanitizeHelper(this.content)) :\n this.updateSanitizeContent() : this.contentEle.appendChild(this.content);\n }\n this.setMaxHeight();\n }\n else {\n if (!this.isBlazorServerRender() ||\n isNullOrUndefined(this.element.querySelector('.e-dlg-content'))) {\n this.setContent();\n }\n }\n }\n else if (!isNullOrUndefined(this.contentEle)) {\n detach(this.contentEle);\n this.contentEle = null;\n }\n break;\n case 'header':\n if (this.header === '' || isNullOrUndefined(this.header)) {\n if (this.headerEle) {\n detach(this.headerEle);\n this.headerEle = null;\n }\n }\n else {\n if (!this.isBlazorServerRender() ||\n isNullOrUndefined(this.element.querySelector('.e-dlg-header-content'))) {\n this.setHeader();\n }\n }\n break;\n case 'footerTemplate':\n if (this.footerTemplate === '' || isNullOrUndefined(this.footerTemplate)) {\n if (!this.ftrTemplateContent) {\n return;\n }\n detach(this.ftrTemplateContent);\n this.ftrTemplateContent = null;\n this.buttons = [{}];\n }\n else {\n if (!this.isBlazorServerRender() ||\n isNullOrUndefined(this.element.querySelector('.e-footer-content'))) {\n this.setFooterTemplate();\n }\n this.buttons = [{}];\n }\n break;\n case 'showCloseIcon':\n if (this.element.getElementsByClassName(DLG_CLOSE_ICON).length > 0) {\n if (!this.showCloseIcon && (this.header === '' || isNullOrUndefined(this.header))) {\n detach(this.headerContent);\n this.headerContent = null;\n }\n else if (!this.showCloseIcon) {\n detach(this.closeIcon);\n }\n else {\n if (this.isBlazorServerRender()) {\n this.wireEvents();\n }\n }\n }\n else {\n if (!this.isBlazorServerRender()) {\n this.renderCloseIcon();\n }\n this.wireEvents();\n }\n break;\n case 'locale':\n if (this.showCloseIcon) {\n this.closeIconTitle();\n }\n break;\n case 'visible':\n // eslint-disable-next-line\n this.visible ? this.show() : this.hide();\n break;\n case 'isModal':\n this.updateIsModal();\n break;\n case 'height':\n setStyleAttribute(this.element, { 'height': formatUnit(newProp.height) });\n break;\n case 'width':\n setStyleAttribute(this.element, { 'width': formatUnit(newProp.width) });\n break;\n case 'zIndex':\n this.popupObj.zIndex = this.zIndex;\n if (this.isModal) {\n this.setOverlayZindex(this.zIndex);\n }\n if (this.element.style.zIndex !== this.zIndex.toString()) {\n this.calculatezIndex = false;\n }\n break;\n case 'cssClass':\n this.setCSSClass(oldProp.cssClass);\n break;\n case 'buttons': {\n var buttonCount = this.buttons.length;\n if (!isNullOrUndefined(this.ftrTemplateContent) && !this.isBlazorServerRender()) {\n detach(this.ftrTemplateContent);\n this.ftrTemplateContent = null;\n }\n for (var i = 0; i < buttonCount; i++) {\n if (!isNullOrUndefined(this.buttons[i].buttonModel)) {\n this.footerTemplate = '';\n this.setButton();\n }\n }\n break;\n }\n case 'allowDragging':\n if (this.allowDragging && (!isNullOrUndefined(this.headerContent))) {\n this.setAllowDragging();\n }\n else {\n this.dragObj.destroy();\n }\n break;\n case 'target':\n this.setTarget(newProp.target);\n break;\n case 'position':\n this.checkPositionData();\n if (this.isModal) {\n var positionX = isNullOrUndefined(oldProp.position.X) ? this.position.X : oldProp.position.X;\n var positionY = isNullOrUndefined(oldProp.position.Y) ? this.position.Y : oldProp.position.Y;\n if (this.dlgContainer.classList.contains('e-dlg-' + positionX + '-' + positionY)) {\n this.dlgContainer.classList.remove('e-dlg-' + positionX + '-' + positionY);\n }\n }\n this.positionChange();\n break;\n case 'enableRtl':\n this.setEnableRTL();\n break;\n case 'enableResize':\n this.setResize();\n break;\n }\n }\n };\n Dialog.prototype.setTarget = function (target) {\n this.popupObj.relateTo = target;\n this.target = target;\n this.targetEle = ((typeof this.target) === 'string') ?\n document.querySelector(this.target) : this.target;\n if (this.dragObj) {\n this.dragObj.dragArea = this.targetEle;\n }\n this.setMaxHeight();\n if (this.isModal) {\n this.updateIsModal();\n }\n if (this.enableResize) {\n this.setResize();\n }\n };\n Dialog.prototype.updateIsModal = function () {\n this.element.setAttribute('aria-modal', this.isModal ? 'true' : 'false');\n if (this.isModal) {\n if (isNullOrUndefined(this.dlgOverlay)) {\n this.setIsModal();\n this.element.style.top = '0px';\n this.element.style.left = '0px';\n if (!isNullOrUndefined(this.targetEle)) {\n this.targetEle.appendChild(this.dlgContainer);\n }\n }\n }\n else {\n removeClass([this.element], MODAL_DLG);\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n detach(this.dlgOverlay);\n while (this.dlgContainer.firstChild) {\n this.dlgContainer.parentElement.insertBefore(this.dlgContainer.firstChild, this.dlgContainer);\n }\n this.dlgContainer.parentElement.removeChild(this.dlgContainer);\n }\n if (this.visible) {\n this.show();\n }\n this.positionChange();\n if (this.isModal && this.dlgOverlay) {\n EventHandler.add(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler, this);\n }\n };\n Dialog.prototype.setzIndex = function (zIndexElement, setPopupZindex) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.zIndex = getZindexPartial(zIndexElement);\n this.isProtectedOnChange = prevOnChange;\n if (setPopupZindex) {\n this.popupObj.zIndex = this.zIndex;\n }\n };\n Dialog.prototype.windowResizeHandler = function () {\n setMaxWidth(this.targetEle.clientWidth);\n setMaxHeight(this.targetEle.clientHeight);\n this.setMaxHeight();\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {void}\n * @private\n */\n Dialog.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * To destroy the widget\n *\n * @returns {void}\n */\n Dialog.prototype.destroy = function () {\n if (this.isDestroyed) {\n return;\n }\n var classArray = [RTL, MODAL_DLG, DLG_RESIZABLE, DLG_RESTRICT_LEFT_VALUE, FULLSCREEN, DEVICE];\n var attrs = ['role', 'aria-modal', 'aria-labelledby', 'aria-describedby', 'aria-grabbed', 'tabindex', 'style'];\n removeClass([this.targetEle], [DLG_TARGET, SCROLL_DISABLED]);\n if (!isNullOrUndefined(this.element) && this.element.classList.contains(FULLSCREEN)) {\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n }\n if (this.isModal) {\n removeClass([(!isNullOrUndefined(this.targetEle) ? this.targetEle : document.body)], SCROLL_DISABLED);\n }\n this.unWireEvents();\n if (!isNullOrUndefined(this.btnObj)) {\n for (var i = 0; i < this.btnObj.length; i++) {\n this.btnObj[i].destroy();\n }\n }\n if (!isNullOrUndefined(this.dragObj)) {\n this.dragObj.destroy();\n }\n if (!isNullOrUndefined(this.popupObj.element) && this.popupObj.element.classList.contains(POPUP_ROOT)) {\n this.popupObj.destroy();\n }\n removeClass([this.element], classArray);\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n removeClass([this.element], this.cssClass.split(' '));\n }\n if (!isNullOrUndefined(this.refElement) && !isNullOrUndefined(this.refElement.parentElement)) {\n this.refElement.parentElement.insertBefore((this.isModal ? this.dlgContainer : this.element), this.refElement);\n detach(this.refElement);\n this.refElement = undefined;\n }\n if (this.isModal && !this.isBlazorServerRender()) {\n detach(this.dlgOverlay);\n this.dlgContainer.parentNode.insertBefore(this.element, this.dlgContainer);\n detach(this.dlgContainer);\n }\n if (!this.isBlazorServerRender()) {\n this.element.innerHTML = this.clonedEle.innerHTML;\n }\n if (this.isBlazorServerRender()) {\n if (!isNullOrUndefined(this.element.children)) {\n for (var i = 0; i <= this.element.children.length; i++) {\n i = i - i;\n detach(this.element.children[i]);\n }\n }\n }\n for (var i = 0; i < attrs.length; i++) {\n this.element.removeAttribute(attrs[i]);\n }\n if (!this.isBlazorServerRender()) {\n _super.prototype.destroy.call(this);\n }\n else {\n this.isDestroyed = true;\n }\n // eslint-disable-next-line\n if (this.isReact) {\n this.clearTemplate();\n }\n };\n Dialog.prototype.wireWindowResizeEvent = function () {\n window.addEventListener('resize', this.windowResizeHandler.bind(this));\n };\n Dialog.prototype.unWireWindowResizeEvent = function () {\n window.removeEventListener('resize', this.windowResizeHandler.bind(this));\n };\n /**\n * Binding event to the element while widget creation\n *\n * @returns {void}\n * @hidden\n */\n Dialog.prototype.wireEvents = function () {\n if (this.isBlazorServerRender() && this.showCloseIcon) {\n this.closeIcon = this.element.getElementsByClassName('e-dlg-closeicon-btn')[0];\n }\n if (this.showCloseIcon) {\n EventHandler.add(this.closeIcon, 'click', this.closeIconClickEventHandler, this);\n }\n if (this.isModal && this.dlgOverlay) {\n EventHandler.add(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler, this);\n }\n };\n /**\n * Unbinding event to the element while widget destroy\n *\n * @returns {void}\n * @hidden\n */\n Dialog.prototype.unWireEvents = function () {\n if (this.showCloseIcon) {\n EventHandler.remove(this.closeIcon, 'click', this.closeIconClickEventHandler);\n }\n if (this.isModal) {\n EventHandler.remove(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler);\n }\n if (this.buttons.length > 0 && !isNullOrUndefined(this.buttons[0].buttonModel) && this.footerTemplate === '') {\n for (var i = 0; i < this.buttons.length; i++) {\n if (typeof (this.buttons[i].click) === 'function') {\n EventHandler.remove(this.ftrTemplateContent.children[i], 'click', this.buttons[i].click);\n }\n }\n }\n };\n /**\n * Refreshes the dialog's position when the user changes its header and footer height/width dynamically.\n *\n * @returns {void}\n */\n Dialog.prototype.refreshPosition = function () {\n this.popupObj.refreshPosition();\n };\n /**\n * Opens the dialog if it is in hidden state.\n * To open the dialog with full screen width, set the parameter to true.\n *\n * @param { boolean } isFullScreen - Enable the fullScreen Dialog.\n * @returns {void}\n */\n Dialog.prototype.show = function (isFullScreen) {\n var _this = this;\n if (!this.element.classList.contains(ROOT)) {\n return;\n }\n if (!this.element.classList.contains(DLG_SHOW) || (!isNullOrUndefined(isFullScreen))) {\n if (!isNullOrUndefined(isFullScreen)) {\n this.fullScreen(isFullScreen);\n }\n var eventArgs_1 = isBlazor() ? {\n cancel: false,\n element: this.element,\n container: this.isModal ? this.dlgContainer : this.element,\n maxHeight: this.element.style.maxHeight\n } : {\n cancel: false,\n element: this.element,\n container: this.isModal ? this.dlgContainer : this.element,\n target: this.target,\n maxHeight: this.element.style.maxHeight\n };\n this.trigger('beforeOpen', eventArgs_1, function (beforeOpenArgs) {\n if (!beforeOpenArgs.cancel) {\n if (_this.element.style.maxHeight !== eventArgs_1.maxHeight) {\n _this.allowMaxHeight = false;\n _this.element.style.maxHeight = eventArgs_1.maxHeight;\n }\n _this.storeActiveElement = document.activeElement;\n _this.element.tabIndex = -1;\n if (_this.isModal && (!isNullOrUndefined(_this.dlgOverlay))) {\n _this.dlgOverlay.style.display = 'block';\n _this.dlgContainer.style.display = 'flex';\n removeClass([_this.dlgOverlay], 'e-fade');\n if (!isNullOrUndefined(_this.targetEle)) {\n if (_this.targetEle === document.body) {\n _this.dlgContainer.style.position = 'fixed';\n }\n else {\n _this.dlgContainer.style.position = 'absolute';\n }\n _this.dlgOverlay.style.position = 'absolute';\n _this.element.style.position = 'relative';\n addClass([_this.targetEle], [DLG_TARGET, SCROLL_DISABLED]);\n }\n else {\n addClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n }\n }\n // eslint-disable-next-line\n var openAnimation = {\n name: _this.animationSettings.effect + 'In',\n duration: _this.animationSettings.duration,\n delay: _this.animationSettings.delay\n };\n var zIndexElement = (_this.isModal) ? _this.element.parentElement : _this.element;\n if (_this.calculatezIndex) {\n _this.setzIndex(zIndexElement, true);\n setStyleAttribute(_this.element, { 'zIndex': _this.zIndex });\n if (_this.isModal) {\n _this.setOverlayZindex(_this.zIndex);\n }\n }\n // eslint-disable-next-line\n _this.animationSettings.effect === 'None' ? _this.popupObj.show() : _this.popupObj.show(openAnimation);\n _this.dialogOpen = true;\n var prevOnChange = _this.isProtectedOnChange;\n _this.isProtectedOnChange = true;\n _this.visible = true;\n _this.preventVisibility = true;\n _this.isProtectedOnChange = prevOnChange;\n }\n });\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n /**\n * Closes the dialog if it is in visible state.\n *\n * @param { Event } event - specifies the event\n * @returns {void}\n */\n Dialog.prototype.hide = function (event) {\n var _this = this;\n if (!this.element.classList.contains(ROOT)) {\n return;\n }\n if (this.preventVisibility) {\n var eventArgs = isBlazor() ? {\n cancel: false,\n isInteracted: event ? true : false,\n element: this.element,\n container: this.isModal ? this.dlgContainer : this.element,\n event: event\n } : {\n cancel: false,\n isInteracted: event ? true : false,\n element: this.element,\n target: this.target,\n container: this.isModal ? this.dlgContainer : this.element,\n event: event,\n closedBy: this.dlgClosedBy\n };\n this.closeArgs = eventArgs;\n this.trigger('beforeClose', eventArgs, function (beforeCloseArgs) {\n if (!beforeCloseArgs.cancel) {\n if (_this.isModal) {\n if (!isNullOrUndefined(_this.targetEle)) {\n removeClass([_this.targetEle], [DLG_TARGET, SCROLL_DISABLED]);\n }\n }\n if (document.body.classList.contains(DLG_TARGET) &&\n document.body.classList.contains(SCROLL_DISABLED)) {\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n }\n // eslint-disable-next-line\n var closeAnimation = {\n name: _this.animationSettings.effect + 'Out',\n duration: _this.animationSettings.duration,\n delay: _this.animationSettings.delay\n };\n // eslint-disable-next-line\n _this.animationSettings.effect === 'None' ? _this.popupObj.hide() : _this.popupObj.hide(closeAnimation);\n _this.dialogOpen = false;\n var prevOnChange = _this.isProtectedOnChange;\n _this.isProtectedOnChange = true;\n _this.visible = false;\n _this.preventVisibility = false;\n _this.isProtectedOnChange = prevOnChange;\n }\n _this.dlgClosedBy = DLG_USER_ACTION_CLOSED;\n });\n }\n };\n // eslint-disable-next-line\n /**\n * Specifies to view the Full screen Dialog.\n *\n * @returns {void}\n * @private\n */\n Dialog.prototype.fullScreen = function (args) {\n /* eslint-disable */\n var top = this.element.offsetTop;\n var left = this.element.offsetLeft;\n /* eslint-enable */\n if (args) {\n addClass([this.element], FULLSCREEN);\n var display = this.element.style.display;\n this.element.style.display = 'none';\n this.element.style.maxHeight = (!isNullOrUndefined(this.target)) ?\n (this.targetEle.offsetHeight) + 'px' : (window.innerHeight) + 'px';\n this.element.style.display = display;\n addClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n if (this.allowDragging && !isNullOrUndefined(this.dragObj)) {\n this.dragObj.destroy();\n }\n }\n else {\n removeClass([this.element], FULLSCREEN);\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n if (this.allowDragging && (!isNullOrUndefined(this.headerContent))) {\n this.setAllowDragging();\n }\n }\n return args;\n };\n /**\n * Returns the dialog button instances.\n * Based on that, you can dynamically change the button states.\n *\n * @param { number } index - Index of the button.\n * @returns {Button} - returns the button element\n */\n Dialog.prototype.getButtons = function (index) {\n if (!isNullOrUndefined(index)) {\n return this.btnObj[index];\n }\n return this.btnObj;\n };\n __decorate([\n Property('')\n ], Dialog.prototype, \"content\", void 0);\n __decorate([\n Property(true)\n ], Dialog.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property(false)\n ], Dialog.prototype, \"showCloseIcon\", void 0);\n __decorate([\n Property(false)\n ], Dialog.prototype, \"isModal\", void 0);\n __decorate([\n Property('')\n ], Dialog.prototype, \"header\", void 0);\n __decorate([\n Property(true)\n ], Dialog.prototype, \"visible\", void 0);\n __decorate([\n Property(false)\n ], Dialog.prototype, \"enableResize\", void 0);\n __decorate([\n Property(['South-East'])\n ], Dialog.prototype, \"resizeHandles\", void 0);\n __decorate([\n Property('auto')\n ], Dialog.prototype, \"height\", void 0);\n __decorate([\n Property('')\n ], Dialog.prototype, \"minHeight\", void 0);\n __decorate([\n Property('100%')\n ], Dialog.prototype, \"width\", void 0);\n __decorate([\n Property('')\n ], Dialog.prototype, \"cssClass\", void 0);\n __decorate([\n Property(1000)\n ], Dialog.prototype, \"zIndex\", void 0);\n __decorate([\n Property(null)\n ], Dialog.prototype, \"target\", void 0);\n __decorate([\n Property('')\n ], Dialog.prototype, \"footerTemplate\", void 0);\n __decorate([\n Property(false)\n ], Dialog.prototype, \"allowDragging\", void 0);\n __decorate([\n Collection([{}], ButtonProps)\n ], Dialog.prototype, \"buttons\", void 0);\n __decorate([\n Property(true)\n ], Dialog.prototype, \"closeOnEscape\", void 0);\n __decorate([\n Complex({}, AnimationSettings)\n ], Dialog.prototype, \"animationSettings\", void 0);\n __decorate([\n Complex({ X: 'center', Y: 'center' }, PositionData)\n ], Dialog.prototype, \"position\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"beforeSanitizeHtml\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"beforeClose\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"dragStart\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"dragStop\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"drag\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"overlayClick\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"resizeStart\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"resizing\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"resizeStop\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"destroyed\", void 0);\n Dialog = __decorate([\n NotifyPropertyChanges\n ], Dialog);\n return Dialog;\n}(Component));\nexport { Dialog };\n/**\n * Base for creating Alert and Confirmation Dialog through util method.\n */\n// eslint-disable-next-line\nexport var DialogUtility;\n(function (DialogUtility) {\n /**\n * An alert dialog box is used to display warning like messages to the users.\n * ```\n * Eg : DialogUtility.alert('Alert message');\n *\n * ```\n */\n /* istanbul ignore next */\n /**\n *\n * @param {AlertDialogArgs} args - specifies the string\n * @returns {Dialog} - returns the dialog element.\n */\n function alert(args) {\n // eslint-disable-next-line\n var dialogComponent;\n var dialogElement = createElement('div', { 'className': DLG_UTIL_ALERT });\n document.body.appendChild(dialogElement);\n var alertDialogObj;\n var okButtonModel = [{\n buttonModel: { isPrimary: true, content: 'OK' },\n click: function () {\n this.hide();\n }\n }];\n if (typeof (args) === 'string') {\n alertDialogObj = createDialog({ content: args,\n position: { X: 'center', Y: 'top' },\n isModal: true, header: DLG_UTIL_DEFAULT_TITLE,\n buttons: okButtonModel }, dialogElement);\n }\n else {\n alertDialogObj = createDialog(alertOptions(args), dialogElement);\n }\n alertDialogObj.close = function () {\n if (args && args.close) {\n args.close.apply(alertDialogObj);\n }\n alertDialogObj.destroy();\n if (alertDialogObj.element.classList.contains('e-dlg-modal')) {\n alertDialogObj.element.parentElement.remove();\n alertDialogObj.target.classList.remove(DLG_UTIL_ROOT);\n }\n else {\n alertDialogObj.element.remove();\n }\n };\n return alertDialogObj;\n }\n DialogUtility.alert = alert;\n /**\n * A confirm dialog displays a specified message along with ‘OK’ and ‘Cancel’ button.\n * ```\n * Eg : DialogUtility.confirm('Confirm dialog message');\n *\n * ```\n */\n /* istanbul ignore next */\n /**\n *\n * @param {ConfirmDialogArgs} args - specifies the args\n * @returns {Dialog} - returns te element\n */\n function confirm(args) {\n // eslint-disable-next-line\n var dialogComponent;\n var dialogElement = createElement('div', { 'className': DLG_UTIL_CONFIRM });\n document.body.appendChild(dialogElement);\n var confirmDialogObj;\n var okCancelButtonModel = [{\n buttonModel: { isPrimary: true, content: 'OK' },\n click: function () {\n this.hide();\n }\n }, {\n buttonModel: { content: 'Cancel' },\n click: function () {\n this.hide();\n }\n }];\n if (typeof (args) === 'string') {\n confirmDialogObj = createDialog({ position: { X: 'center', Y: 'top' }, content: args, isModal: true,\n header: DLG_UTIL_DEFAULT_TITLE, buttons: okCancelButtonModel\n }, dialogElement);\n }\n else {\n confirmDialogObj = createDialog(confirmOptions(args), dialogElement);\n }\n confirmDialogObj.close = function () {\n if (args && args.close) {\n args.close.apply(confirmDialogObj);\n }\n confirmDialogObj.destroy();\n if (confirmDialogObj.element.classList.contains('e-dlg-modal')) {\n confirmDialogObj.element.parentElement.remove();\n confirmDialogObj.target.classList.remove(DLG_UTIL_ROOT);\n }\n else {\n confirmDialogObj.element.remove();\n }\n };\n return confirmDialogObj;\n }\n DialogUtility.confirm = confirm;\n // eslint-disable-next-line\n function createDialog(options, element) {\n var dialogObject = new Dialog(options);\n dialogObject.appendTo(element);\n return dialogObject;\n }\n // eslint-disable-next-line\n function alertOptions(option) {\n var options = {};\n options.buttons = [];\n options = formOptions(options, option);\n options = setAlertButtonModel(options, option);\n return options;\n }\n // eslint-disable-next-line\n function confirmOptions(option) {\n var options = {};\n options.buttons = [];\n options = formOptions(options, option);\n options = setConfirmButtonModel(options, option);\n return options;\n }\n // eslint-disable-next-line\n function formOptions(options, option) {\n options.header = !isNullOrUndefined(option.title) ? option.title : DLG_UTIL_DEFAULT_TITLE;\n options.content = !isNullOrUndefined(option.content) ? option.content : '';\n options.isModal = !isNullOrUndefined(option.isModal) ? option.isModal : true;\n options.showCloseIcon = !isNullOrUndefined(option.showCloseIcon) ? option.showCloseIcon : false;\n options.allowDragging = !isNullOrUndefined(option.isDraggable) ? option.isDraggable : false;\n options.closeOnEscape = !isNullOrUndefined(option.closeOnEscape) ? option.closeOnEscape : false;\n options.position = !isNullOrUndefined(option.position) ? option.position : { X: 'center', Y: 'top' };\n options.animationSettings = !isNullOrUndefined(option.animationSettings) ? option.animationSettings :\n { effect: 'Fade', duration: 400, delay: 0 };\n options.cssClass = !isNullOrUndefined(option.cssClass) ? option.cssClass : '';\n options.zIndex = !isNullOrUndefined(option.zIndex) ? option.zIndex : 1000;\n options.open = !isNullOrUndefined(option.open) ? option.open : null;\n return options;\n }\n // eslint-disable-next-line\n function setAlertButtonModel(options, option) {\n var alertButtonModel = [{\n buttonModel: { isPrimary: true, content: 'OK' },\n click: function () {\n this.hide();\n }\n }];\n if (!isNullOrUndefined(option.okButton)) {\n options.buttons[0] = formButtonModel(options.buttons[0], option.okButton, alertButtonModel[0]);\n }\n else {\n options.buttons = alertButtonModel;\n }\n return options;\n }\n // eslint-disable-next-line\n function setConfirmButtonModel(options, option) {\n var okButtonModel = {\n buttonModel: { isPrimary: true, content: 'OK' },\n click: function () {\n this.hide();\n }\n };\n var cancelButtonModel = {\n buttonModel: { content: 'Cancel' },\n click: function () {\n this.hide();\n }\n };\n if (!isNullOrUndefined(option.okButton)) {\n options.buttons[0] = formButtonModel(options.buttons[0], option.okButton, okButtonModel);\n }\n else {\n options.buttons[0] = okButtonModel;\n }\n if (!isNullOrUndefined(option.cancelButton)) {\n options.buttons[1] = formButtonModel(options.buttons[1], option.cancelButton, cancelButtonModel);\n }\n else {\n options.buttons[1] = cancelButtonModel;\n }\n return options;\n }\n // eslint-disable-next-line\n function formButtonModel(buttonModel, option, buttonPropModel) {\n var buttonProps = buttonPropModel;\n if (!isNullOrUndefined(option.text)) {\n buttonProps.buttonModel.content = option.text;\n }\n if (!isNullOrUndefined(option.icon)) {\n buttonProps.buttonModel.iconCss = option.icon;\n }\n if (!isNullOrUndefined(option.cssClass)) {\n buttonProps.buttonModel.cssClass = option.cssClass;\n }\n if (!isNullOrUndefined(option.click)) {\n buttonProps.click = option.click;\n }\n return buttonProps;\n }\n})(DialogUtility || (DialogUtility = {}));\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\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 { 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 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[i]];\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 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 input.classList.remove(this.errorClass);\n if (input.name.length > 0) {\n this.getInputElement(input.name);\n this.getErrorElement(input.name);\n this.hideMessage(input.name);\n }\n input.classList.remove(this.validClass);\n }\n };\n FormValidator.prototype.createHTML5Rules = function () {\n var defRules = ['required', 'validateHidden', 'regex', 'rangeLength', 'maxLength', 'minLength', 'dateIso', 'digits',\n 'pattern', 'data-val-required', 'type', 'data-validation', 'min', 'max', 'range', 'equalTo', 'data-val-minlength-min',\n 'data-val-equalto-other', 'data-val-maxlength-max', 'data-val-range-min', 'data-val-regex-pattern', 'data-val-length-max',\n 'data-val-creditcard', 'data-val-phone'];\n var acceptedTypes = ['hidden', 'email', 'url', 'date', 'number', 'tel'];\n for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) {\n var input = _a[_i];\n // Default attribute rules\n var allRule = {};\n for (var _b = 0, defRules_1 = defRules; _b < defRules_1.length; _b++) {\n var rule = defRules_1[_b];\n if (input.getAttribute(rule) !== null) {\n switch (rule) {\n case 'required':\n this.defRule(input, allRule, rule, input.required);\n break;\n case 'data-validation':\n rule = input.getAttribute(rule);\n this.defRule(input, allRule, rule, true);\n break;\n case 'type':\n if (acceptedTypes.indexOf(input.type) !== -1) {\n this.defRule(input, allRule, input.type, true);\n }\n break;\n case 'rangeLength':\n case 'range':\n this.defRule(input, allRule, rule, JSON.parse(input.getAttribute(rule)));\n break;\n case 'equalTo':\n {\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 this.inputElement.classList.add(this.errorClass);\n this.inputElement.classList.remove(this.validClass);\n if (!this.infoElement) {\n this.createErrorElement(name, errorRule.message, this.inputElement);\n }\n else {\n this.showMessage(errorRule);\n }\n eventArgs.errorElement = this.infoElement;\n eventArgs.status = 'failure';\n this.inputElement.classList.add(this.errorClass);\n this.inputElement.classList.remove(this.validClass);\n this.optionalValidationStatus(name, eventArgs);\n this.trigger('validationComplete', eventArgs);\n // Set aria-required to required rule elements\n if (rule === 'required') {\n this.inputElement.setAttribute('aria-required', 'true');\n }\n break;\n }\n else {\n this.hideMessage(name);\n eventArgs.status = 'success';\n this.trigger('validationComplete', eventArgs);\n }\n }\n }\n else {\n return;\n }\n };\n // Update the optional validation status\n FormValidator.prototype.optionalValidationStatus = function (name, refer) {\n if (!this.rules[name][this.required] && !this.inputElement.value.length && !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[i] : ruleValue;\n message = message.replace(formats[i], value);\n }\n }\n return message;\n };\n // Create error element based on name and error message\n FormValidator.prototype.createErrorElement = function (name, message, input) {\n var errorElement = createElement(this.errorElement, {\n className: this.errorClass,\n innerHTML: message,\n attrs: { for: name }\n });\n // Create message design if errorOption is message\n if (this.errorOption === ErrorOption.Message) {\n errorElement.classList.remove(this.errorClass);\n errorElement.classList.add('e-message');\n errorElement = createElement(this.errorContainer, { className: this.errorClass, innerHTML: errorElement.outerHTML });\n }\n errorElement.id = this.inputElement.name + '-info';\n // Append error message into MVC error message element\n if (this.element.querySelector('[data-valmsg-for=\"' + input.id + '\"]')) {\n this.element.querySelector('[data-valmsg-for=\"' + input.id + '\"]').appendChild(errorElement);\n }\n else if (input.hasAttribute('data-msg-containerid') === true) {\n // Append error message into custom div element\n var containerId = input.getAttribute('data-msg-containerid');\n var divElement = 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 this.inputElement.parentNode.insertBefore(errorElement, this.inputElement.nextSibling);\n }\n errorElement.style.display = 'block';\n this.getErrorElement(name);\n this.validated.push(name);\n this.checkRequired(name);\n };\n // Get error element by name\n FormValidator.prototype.getErrorElement = function (name) {\n this.infoElement = select(this.errorElement + '.' + this.errorClass, this.inputElement.parentElement);\n if (!this.infoElement) {\n this.infoElement = select(this.errorElement + '.' + this.errorClass + '[for=\"' + name + '\"]', this.element);\n }\n return this.infoElement;\n };\n // Remove existing rule from errorRules object\n FormValidator.prototype.removeErrorRules = function (name) {\n for (var i = 0; i < this.errorRules.length; i++) {\n var rule = this.errorRules[i];\n if (rule.name === name) {\n this.errorRules.splice(i, 1);\n }\n }\n };\n // Show error message to the input element\n FormValidator.prototype.showMessage = function (errorRule) {\n this.infoElement.style.display = 'block';\n this.infoElement.innerHTML = errorRule.message;\n this.checkRequired(errorRule.name);\n };\n // Hide error message based on input name\n FormValidator.prototype.hideMessage = function (name) {\n if (this.infoElement) {\n this.infoElement.style.display = 'none';\n this.removeErrorRules(name);\n this.inputElement.classList.add(this.validClass);\n this.inputElement.classList.remove(this.errorClass);\n this.inputElement.setAttribute('aria-invalid', 'false');\n }\n };\n // Check whether the input element have required rule and its value is not empty\n FormValidator.prototype.checkRequired = function (name) {\n if (!this.rules[name][this.required] && !this.inputElement.value.length && !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 return !isNaN(new Date(option.value).getTime());\n },\n max: function (option) {\n if (!isNaN(Number(option.value))) {\n // Maximum rule validation for number\n return +option.value <= option.param;\n }\n // Maximum rule validation for date\n return new Date(option.value).getTime() <= new Date(JSON.parse(JSON.stringify(option.param))).getTime();\n },\n min: function (option) {\n if (!isNaN(Number(option.value))) {\n // Minimum rule validation for number\n return +option.value >= option.param;\n }\n else if ((option.value).indexOf(',') !== -1) {\n var uNum = (option.value).replace(/,/g, '');\n return parseFloat(uNum) >= option.param;\n }\n else {\n // Minimum rule validation for date\n return new Date(option.value).getTime() >= new Date(JSON.parse(JSON.stringify(option.param))).getTime();\n }\n },\n regex: function (option) {\n return new RegExp(option.param).test(option.value);\n },\n equalTo: function (option) {\n var compareTo = option.formElement.querySelector('#' + option.param);\n option.param = compareTo.value;\n return option.param === option.value;\n }\n };\n __decorate([\n Property('')\n ], FormValidator.prototype, \"locale\", void 0);\n __decorate([\n Property('e-hidden')\n ], FormValidator.prototype, \"ignore\", void 0);\n __decorate([\n Property()\n ], FormValidator.prototype, \"rules\", void 0);\n __decorate([\n Property('e-error')\n ], FormValidator.prototype, \"errorClass\", void 0);\n __decorate([\n Property('e-valid')\n ], FormValidator.prototype, \"validClass\", void 0);\n __decorate([\n Property('label')\n ], FormValidator.prototype, \"errorElement\", void 0);\n __decorate([\n Property('div')\n ], FormValidator.prototype, \"errorContainer\", void 0);\n __decorate([\n Property(ErrorOption.Label)\n ], FormValidator.prototype, \"errorOption\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"focusout\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"keyup\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"click\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"submit\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"validationBegin\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"validationComplete\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"customPlacement\", void 0);\n FormValidator = FormValidator_1 = __decorate([\n NotifyPropertyChanges\n ], FormValidator);\n return FormValidator;\n}(Base));\nexport { FormValidator };\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { createElement, isNullOrUndefined, remove } from '@syncfusion/ej2-base';\nimport { FormValidator } from '@syncfusion/ej2-inputs';\nimport * as cls from '../base/css-constant';\n/**\n * Appointment window field validation\n */\nvar FieldValidator = /** @class */ (function () {\n function FieldValidator() {\n }\n FieldValidator.prototype.renderFormValidator = function (form, rules, element, locale) {\n var _this = this;\n this.element = element;\n this.formObj = new FormValidator(form, {\n locale: locale,\n customPlacement: function (inputElement, error) {\n _this.errorPlacement(inputElement, error);\n },\n rules: rules,\n validationComplete: function (args) {\n _this.validationComplete(args);\n },\n focusout: function (args) {\n _this.focusOut(args);\n }\n });\n };\n FieldValidator.prototype.focusOut = function (args) {\n var target = args.relatedTarget;\n if (target && (target.classList.contains('e-dlg-closeicon-btn') || target.classList.contains('e-close')\n || target.classList.contains(cls.ALLDAY_CELLS_CLASS) || target.classList.contains(cls.HEADER_CELLS_CLASS)\n || target.classList.contains(cls.QUICK_POPUP_EVENT_DETAILS_CLASS) || target.classList.contains(cls.WORK_CELLS_CLASS)\n || target.classList.contains(cls.EVENT_WINDOW_CANCEL_BUTTON_CLASS))) {\n this.ignoreError = true;\n }\n else {\n this.ignoreError = false;\n }\n };\n FieldValidator.prototype.validationComplete = function (args) {\n var elem = this.element.querySelector('#' + args.inputName + '_Error');\n if (elem) {\n elem.style.display = (args.status === 'failure') ? '' : 'none';\n }\n };\n FieldValidator.prototype.errorPlacement = function (inputElement, error) {\n var id = error.getAttribute('for');\n var elem = this.element.querySelector('#' + id + '_Error');\n if (!elem && !this.ignoreError) {\n this.createTooltip(inputElement, error, id, '');\n }\n if (!isNullOrUndefined(elem)) {\n elem.querySelector('.e-error').innerHTML = error.innerHTML;\n }\n };\n FieldValidator.prototype.createTooltip = function (element, error, name, display) {\n var dlgContent;\n var client;\n var inputClient = element.getBoundingClientRect();\n if (this.element.classList.contains(cls.POPUP_WRAPPER_CLASS)) {\n dlgContent = this.element;\n client = this.element.getBoundingClientRect();\n }\n else {\n dlgContent = this.element.querySelector('.e-schedule-dialog .e-dlg-content');\n client = dlgContent.getBoundingClientRect();\n }\n var div = createElement('div', {\n className: 'e-tooltip-wrap e-popup ' + cls.ERROR_VALIDATION_CLASS,\n id: name + '_Error',\n styles: 'display:' + display + ';top:' +\n (inputClient.bottom - client.top + dlgContent.scrollTop + 9) + 'px;left:' +\n (inputClient.left - client.left + dlgContent.scrollLeft + inputClient.width / 2) + 'px;'\n });\n var content = createElement('div', { className: 'e-tip-content' });\n content.appendChild(error);\n var arrow = createElement('div', { className: 'e-arrow-tip e-tip-top' });\n arrow.appendChild(createElement('div', { className: 'e-arrow-tip-outer e-tip-top' }));\n arrow.appendChild(createElement('div', { className: 'e-arrow-tip-inner e-tip-top' }));\n div.appendChild(content);\n div.appendChild(arrow);\n dlgContent.appendChild(div);\n div.style.left = (parseInt(div.style.left, 10) - div.offsetWidth / 2) + 'px';\n };\n FieldValidator.prototype.destroyToolTip = function () {\n if (this.element) {\n var elements = [].slice.call(this.element.querySelectorAll('.' + cls.ERROR_VALIDATION_CLASS));\n for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {\n var elem = elements_1[_i];\n remove(elem);\n }\n }\n if (this.formObj && this.formObj.element) {\n this.formObj.reset();\n }\n };\n FieldValidator.prototype.destroy = function () {\n if (this.formObj && this.formObj.element && !this.formObj.isDestroyed) {\n this.formObj.destroy();\n }\n this.formObj = null;\n this.element = null;\n };\n return FieldValidator;\n}());\nexport { FieldValidator };\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { closest, EventHandler, isNullOrUndefined, formatUnit, append } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, createElement, remove, extend } from '@syncfusion/ej2-base';\nimport { Dialog, Popup, isCollide } from '@syncfusion/ej2-popups';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { FieldValidator } from './form-validator';\nimport * as event from '../base/constant';\nimport * as cls from '../base/css-constant';\nimport * as util from '../base/util';\nvar EVENT_FIELD = 'e-field';\n/**\n * Quick Popups interactions\n */\nvar QuickPopups = /** @class */ (function () {\n function QuickPopups(parent) {\n this.isMultipleEventSelect = false;\n this.isCrudAction = false;\n this.parent = parent;\n this.l10n = this.parent.localeObj;\n this.fieldValidator = new FieldValidator();\n this.render();\n this.addEventListener();\n }\n QuickPopups.prototype.render = function () {\n this.renderQuickPopup();\n this.renderMorePopup();\n this.renderQuickDialog();\n };\n QuickPopups.prototype.renderQuickPopup = function () {\n var quickPopupWrapper = createElement('div', { className: cls.POPUP_WRAPPER_CLASS + ' e-popup-close' });\n if (this.parent.isAdaptive) {\n document.body.appendChild(quickPopupWrapper);\n addClass([quickPopupWrapper], cls.DEVICE_CLASS);\n }\n else {\n this.parent.element.appendChild(quickPopupWrapper);\n }\n this.quickPopup = new Popup(quickPopupWrapper, {\n targetType: (this.parent.isAdaptive ? 'container' : 'relative'),\n enableRtl: this.parent.enableRtl,\n open: this.quickPopupOpen.bind(this),\n close: this.quickPopupClose.bind(this),\n hideAnimation: (this.parent.isAdaptive ? { name: 'ZoomOut' } : { name: 'FadeOut', duration: 150 }),\n showAnimation: (this.parent.isAdaptive ? { name: 'ZoomIn' } : { name: 'FadeIn', duration: 150 }),\n collision: (this.parent.isAdaptive ? { X: 'fit', Y: 'fit' } :\n (this.parent.enableRtl ? { X: 'flip', Y: 'fit' } : { X: 'none', Y: 'fit' })),\n position: (this.parent.isAdaptive || this.parent.enableRtl ? { X: 'left', Y: 'top' } : { X: 'right', Y: 'top' }),\n viewPortElement: (this.parent.isAdaptive ? document.body : this.parent.element),\n zIndex: (this.parent.isAdaptive ? 1004 : 3)\n });\n };\n QuickPopups.prototype.renderMorePopup = function () {\n var moreEventPopup = \"
\");\n var moreEventWrapper = createElement('div', {\n className: cls.MORE_POPUP_WRAPPER_CLASS + ' e-popup-close',\n innerHTML: moreEventPopup\n });\n if (this.parent.isAdaptive) {\n document.body.appendChild(moreEventWrapper);\n addClass([moreEventWrapper], cls.DEVICE_CLASS);\n }\n else {\n this.parent.element.appendChild(moreEventWrapper);\n }\n this.morePopup = new Popup(moreEventWrapper, {\n targetType: (this.parent.isAdaptive ? 'container' : 'relative'),\n enableRtl: this.parent.enableRtl,\n hideAnimation: { name: 'ZoomOut', duration: 300 },\n showAnimation: { name: 'ZoomIn', duration: 300 },\n open: this.morePopupOpen.bind(this),\n close: this.morePopupClose.bind(this),\n collision: (this.parent.isAdaptive ? { X: 'fit', Y: 'fit' } :\n (this.parent.enableRtl ? { X: 'flip', Y: 'fit' } : { X: 'flip', Y: 'flip' })),\n viewPortElement: (this.parent.isAdaptive ? document.body : this.parent.element),\n zIndex: (this.parent.isAdaptive ? 1002 : 2)\n });\n var closeButton = this.morePopup.element.querySelector('.' + cls.MORE_EVENT_CLOSE_CLASS);\n this.renderButton('e-round', cls.ICON + ' ' + cls.CLOSE_ICON_CLASS, false, closeButton, this.closeClick);\n EventHandler.add(this.morePopup.element.querySelector('.' + cls.MORE_EVENT_HEADER_DATE_CLASS), 'click', this.navigationClick, this);\n };\n QuickPopups.prototype.renderQuickDialog = function () {\n var buttonModel = [\n { buttonModel: { cssClass: 'e-quick-alertok e-flat', isPrimary: true }, click: this.dialogButtonClick.bind(this) },\n { buttonModel: { cssClass: 'e-quick-alertcancel e-flat', isPrimary: false }, click: this.dialogButtonClick.bind(this) },\n {\n buttonModel: { cssClass: 'e-quick-dialog-cancel e-disable e-flat', isPrimary: false },\n click: this.dialogButtonClick.bind(this)\n }\n ];\n if (this.parent.eventSettings.editFollowingEvents) {\n var followingSeriesButton = {\n buttonModel: { cssClass: 'e-quick-alertfollowing e-flat', isPrimary: false }, click: this.dialogButtonClick.bind(this)\n };\n buttonModel.splice(1, 0, followingSeriesButton);\n }\n this.quickDialog = new Dialog({\n animationSettings: { effect: 'Zoom' },\n buttons: buttonModel,\n cssClass: cls.QUICK_DIALOG_CLASS,\n closeOnEscape: true,\n enableRtl: this.parent.enableRtl,\n beforeClose: this.beforeQuickDialogClose.bind(this),\n isModal: true,\n position: { X: 'center', Y: 'center' },\n showCloseIcon: true,\n target: document.body,\n visible: false,\n width: 'auto'\n });\n var dialogElement = createElement('div', { id: this.parent.element.id + 'QuickDialog' });\n this.parent.element.appendChild(dialogElement);\n this.quickDialog.appendTo(dialogElement);\n var okButton = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_OK);\n if (okButton) {\n okButton.setAttribute('aria-label', this.l10n.getConstant('occurrence'));\n okButton.setAttribute('aria-label', okButton.innerHTML);\n }\n var cancelButton = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_CANCEL);\n if (cancelButton) {\n cancelButton.setAttribute('aria-label', this.l10n.getConstant('series'));\n cancelButton.setAttribute('aria-label', cancelButton.innerHTML);\n }\n if (this.quickDialog.element.querySelector('.e-dlg-closeicon-btn')) {\n this.quickDialog.element.querySelector('.e-dlg-closeicon-btn').setAttribute('title', this.l10n.getConstant('close'));\n }\n };\n // eslint-disable-next-line max-len\n QuickPopups.prototype.renderButton = function (className, iconName, isDisabled, element, clickEvent) {\n var buttonObj = new Button({\n cssClass: className,\n disabled: isDisabled,\n enableRtl: this.parent.enableRtl,\n iconCss: iconName\n });\n buttonObj.appendTo(element);\n EventHandler.add(element, 'click', clickEvent, this);\n removeClass([element], cls.ICON);\n };\n QuickPopups.prototype.quickDialogClass = function (action) {\n var classList = [\n cls.QUICK_DIALOG_OCCURRENCE_CLASS, cls.QUICK_DIALOG_SERIES_CLASS, cls.QUICK_DIALOG_DELETE_CLASS,\n cls.QUICK_DIALOG_CANCEL_CLASS, cls.QUICK_DIALOG_ALERT_BTN_CLASS, cls.DISABLE_CLASS\n ];\n var okButton = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_OK);\n var cancelButton = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_CANCEL);\n var followingEventButton = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_FOLLOWING);\n removeClass([okButton, cancelButton], classList);\n addClass([this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_CANCEL_CLASS)], cls.DISABLE_CLASS);\n if (this.parent.eventSettings.editFollowingEvents) {\n addClass([followingEventButton], cls.DISABLE_CLASS);\n removeClass([this.quickDialog.element], cls.FOLLOWING_EVENTS_DIALOG);\n }\n switch (action) {\n case 'Recurrence':\n addClass([okButton], cls.QUICK_DIALOG_OCCURRENCE_CLASS);\n addClass([cancelButton], cls.QUICK_DIALOG_SERIES_CLASS);\n if (this.parent.eventSettings.editFollowingEvents) {\n removeClass([followingEventButton], cls.DISABLE_CLASS);\n addClass([this.quickDialog.element], cls.FOLLOWING_EVENTS_DIALOG);\n addClass([followingEventButton], cls.QUICK_DIALOG_FOLLOWING_EVENTS_CLASS);\n }\n break;\n case 'Delete':\n addClass([okButton], cls.QUICK_DIALOG_DELETE_CLASS);\n addClass([cancelButton], cls.QUICK_DIALOG_CANCEL_CLASS);\n break;\n case 'Alert':\n addClass([okButton], [cls.QUICK_DIALOG_ALERT_OK, cls.QUICK_DIALOG_ALERT_BTN_CLASS]);\n addClass([cancelButton], [cls.QUICK_DIALOG_ALERT_CANCEL, cls.DISABLE_CLASS]);\n break;\n }\n };\n QuickPopups.prototype.applyFormValidation = function () {\n var form = this.quickPopup.element.querySelector('.' + cls.FORM_CLASS);\n var rules = {};\n rules[this.parent.eventSettings.fields.subject.name] = this.parent.eventSettings.fields.subject.validation;\n this.fieldValidator.renderFormValidator(form, rules, this.quickPopup.element, this.parent.locale);\n };\n QuickPopups.prototype.openRecurrenceAlert = function () {\n var editDeleteOnly = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_OK);\n if (editDeleteOnly) {\n editDeleteOnly.innerHTML = this.l10n.getConstant(this.parent.currentAction === 'Delete' ? 'deleteEvent' : 'editEvent');\n editDeleteOnly.setAttribute('aria-label', editDeleteOnly.innerHTML);\n }\n var editFollowingEventsOnly = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_FOLLOWING);\n if (editFollowingEventsOnly) {\n editFollowingEventsOnly.innerHTML = this.l10n.getConstant('editFollowingEvent');\n editFollowingEventsOnly.setAttribute('aria-label', editFollowingEventsOnly.innerHTML);\n }\n var editDeleteSeries = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_CANCEL);\n if (editDeleteSeries) {\n editDeleteSeries.innerHTML = this.l10n.getConstant(this.parent.currentAction === 'Delete' ? 'deleteSeries' : 'editSeries');\n editDeleteSeries.setAttribute('aria-label', editDeleteSeries.innerHTML);\n }\n this.quickDialog.content = this.l10n.getConstant('editContent');\n this.quickDialog.header = this.l10n.getConstant(this.parent.currentAction === 'Delete' ? 'deleteTitle' : 'editTitle');\n this.quickDialogClass('Recurrence');\n var activeEvent = this.parent.activeEventData.event;\n if (this.parent.eventSettings.editFollowingEvents && this.parent.currentAction === 'EditOccurrence'\n && !isNullOrUndefined(activeEvent[this.parent.eventFields.recurrenceID]) && activeEvent[this.parent.eventFields.recurrenceID]\n !== activeEvent[this.parent.eventFields.id]) {\n var followingEventButton = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_FOLLOWING);\n addClass([followingEventButton], cls.DISABLE_CLASS);\n }\n this.showQuickDialog('RecurrenceAlert');\n };\n QuickPopups.prototype.openRecurrenceValidationAlert = function (type) {\n this.quickDialogClass('Alert');\n var okButton = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_OK);\n okButton.innerHTML = this.l10n.getConstant('ok');\n okButton.setAttribute('aria-label', okButton.innerHTML);\n var cancelButton = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_CANCEL);\n cancelButton.innerHTML = this.l10n.getConstant('cancel');\n cancelButton.setAttribute('aria-label', cancelButton.innerHTML);\n this.quickDialog.header = this.l10n.getConstant('alert');\n var dialogCancel;\n switch (type) {\n case 'wrongPattern':\n addClass([cancelButton], cls.DISABLE_CLASS);\n this.quickDialog.content = this.l10n.getConstant('wrongPattern');\n break;\n case 'createError':\n addClass([cancelButton], cls.DISABLE_CLASS);\n this.quickDialog.content = this.l10n.getConstant('createError');\n break;\n case 'sameDayAlert':\n addClass([cancelButton], cls.DISABLE_CLASS);\n this.quickDialog.content = this.l10n.getConstant('sameDayAlert');\n break;\n case 'seriesChangeAlert':\n dialogCancel = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_CANCEL_CLASS);\n removeClass([cancelButton, dialogCancel], cls.DISABLE_CLASS);\n this.quickDialog.content = this.l10n.getConstant('seriesChangeAlert');\n okButton.innerHTML = this.l10n.getConstant('yes');\n cancelButton.innerHTML = this.l10n.getConstant('no');\n dialogCancel.innerHTML = this.l10n.getConstant('cancel');\n break;\n case 'occurrenceAlert':\n addClass([cancelButton], cls.DISABLE_CLASS);\n this.quickDialog.content = this.l10n.getConstant('occurenceAlert');\n break;\n }\n if ((!this.parent.enableRecurrenceValidation && type === 'wrongPattern') || this.parent.enableRecurrenceValidation) {\n this.showQuickDialog('RecurrenceValidationAlert');\n }\n };\n QuickPopups.prototype.openDeleteAlert = function () {\n if (this.parent.activeViewOptions.readonly) {\n return;\n }\n var okButton = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_OK);\n if (okButton) {\n okButton.innerHTML = this.l10n.getConstant('delete');\n okButton.setAttribute('aria-label', okButton.innerHTML);\n }\n var cancelButton = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_CANCEL);\n if (cancelButton) {\n cancelButton.innerHTML = this.l10n.getConstant('cancel');\n cancelButton.setAttribute('aria-label', cancelButton.innerHTML);\n }\n this.quickDialog.content = (this.parent.activeEventData.event.length > 1) ?\n this.l10n.getConstant('deleteMultipleContent') : this.l10n.getConstant('deleteContent');\n this.quickDialog.header = (this.parent.activeEventData.event.length > 1) ?\n this.l10n.getConstant('deleteMultipleEvent') : this.l10n.getConstant('deleteEvent');\n this.quickDialogClass('Delete');\n this.showQuickDialog('DeleteAlert');\n };\n QuickPopups.prototype.openValidationError = function (type, eventData) {\n this.quickDialog.header = this.l10n.getConstant('alert');\n this.quickDialog.content = this.l10n.getConstant(type);\n var okButton = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_OK);\n if (okButton) {\n okButton.innerHTML = this.l10n.getConstant('ok');\n okButton.setAttribute('aria-label', okButton.innerHTML);\n }\n var cancelButton = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_CANCEL);\n if (cancelButton) {\n cancelButton.innerHTML = this.l10n.getConstant('cancel');\n okButton.setAttribute('aria-label', cancelButton.innerHTML);\n }\n this.quickDialogClass('Alert');\n this.showQuickDialog('ValidationAlert', eventData);\n };\n QuickPopups.prototype.showQuickDialog = function (popupType, eventData) {\n var _this = this;\n this.quickDialog.dataBind();\n var eventProp = {\n type: popupType, cancel: false, element: this.quickDialog.element,\n data: extend({}, (eventData || this.parent.activeEventData.event), null, true)\n };\n this.parent.trigger(event.popupOpen, eventProp, function (popupArgs) {\n if (!popupArgs.cancel) {\n _this.quickDialog.show();\n }\n });\n };\n QuickPopups.prototype.createMoreEventList = function (eventCollection, groupOrder, groupIndex) {\n var _this = this;\n var fields = this.parent.eventFields;\n var moreEventContentEle = createElement('div', { className: cls.MORE_EVENT_CONTENT_CLASS });\n var moreEventWrapperEle = createElement('div', { className: cls.MORE_EVENT_WRAPPER_CLASS });\n if (eventCollection.length === 0) {\n moreEventWrapperEle = createElement('div', {\n className: cls.MORE_EVENT_CONTENT_CLASS,\n innerHTML: this.l10n.getConstant('emptyContainer')\n });\n }\n else {\n var _loop_1 = function (eventData) {\n var eventText = (eventData[fields.subject] || this_1.parent.eventSettings.fields.subject.default\n || this_1.parent.localeObj.getConstant('addTitle'));\n var appointmentElement = createElement('div', {\n className: cls.APPOINTMENT_CLASS,\n attrs: {\n 'data-id': '' + eventData[fields.id],\n 'data-guid': eventData.Guid, 'role': 'button', 'tabindex': '0',\n 'aria-readonly': this_1.parent.eventBase.getReadonlyAttribute(eventData),\n 'aria-selected': 'false', 'aria-grabbed': 'true', 'aria-label': this_1.parent.getAnnouncementString(eventData)\n }\n });\n var templateElement = void 0;\n if (!isNullOrUndefined(this_1.parent.activeViewOptions.eventTemplate)) {\n var tempId = this_1.parent.element.id + '_' + this_1.parent.activeViewOptions.eventTemplateName + 'eventTemplate';\n templateElement = this_1.parent.getAppointmentTemplate()(eventData, this_1.parent, 'eventTemplate', tempId, false);\n append(templateElement, appointmentElement);\n }\n else {\n appointmentElement.appendChild(createElement('div', { className: cls.SUBJECT_CLASS, innerHTML: eventText }));\n }\n if (!isNullOrUndefined(groupIndex)) {\n appointmentElement.setAttribute('data-group-index', groupIndex);\n }\n if (!isNullOrUndefined(eventData[fields.recurrenceRule])) {\n var iconClass = (eventData[fields.id] === eventData[fields.recurrenceID]) ?\n cls.EVENT_RECURRENCE_ICON_CLASS : cls.EVENT_RECURRENCE_EDIT_ICON_CLASS;\n appointmentElement.appendChild(createElement('div', { className: cls.ICON + ' ' + iconClass }));\n }\n var args = {\n data: extend({}, eventData, null, true),\n element: appointmentElement, cancel: false\n };\n this_1.parent.trigger(event.eventRendered, args, function (eventArgs) {\n if (!eventArgs.cancel) {\n moreEventWrapperEle.appendChild(appointmentElement);\n var isPreventCrud = _this.parent.isAdaptive || _this.parent.currentView === 'Year';\n _this.parent.eventBase.wireAppointmentEvents(appointmentElement, eventData, isPreventCrud);\n _this.parent.eventBase.applyResourceColor(appointmentElement, eventData, 'backgroundColor', groupOrder);\n }\n });\n };\n var this_1 = this;\n for (var _i = 0, eventCollection_1 = eventCollection; _i < eventCollection_1.length; _i++) {\n var eventData = eventCollection_1[_i];\n _loop_1(eventData);\n }\n }\n moreEventContentEle.appendChild(moreEventWrapperEle);\n return moreEventContentEle;\n };\n QuickPopups.prototype.tapHoldEventPopup = function (e) {\n var target = closest(e.target, '.' + cls.APPOINTMENT_CLASS);\n this.isMultipleEventSelect = false;\n this.parent.selectedElements = [];\n this.isMultipleEventSelect = true;\n this.parent.eventBase.getSelectedEventElements(target);\n this.parent.activeEventData = this.parent.eventBase.getSelectedEvents();\n var guid = target.getAttribute('data-guid');\n var eventObj = this.parent.eventBase.getEventByGuid(guid);\n if (isNullOrUndefined(eventObj)) {\n return;\n }\n var eventTitle = (eventObj[this.parent.eventFields.subject] || this.l10n.getConstant('noTitle'));\n var eventTemplate = \"
\" +\n (\"
\") +\n (\"
\" + eventTitle + \"
\") +\n (\"
\") +\n (\"
\");\n this.quickPopup.element.innerHTML = eventTemplate;\n var closeIcon = this.quickPopup.element.querySelector('.' + cls.CLOSE_CLASS);\n this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.CLOSE_ICON_CLASS, false, closeIcon, this.closeClick);\n var readonly = this.parent.activeViewOptions.readonly || eventObj[this.parent.eventFields.isReadonly];\n var editAction = !this.parent.eventSettings.allowEditing || readonly;\n var deleteAction = !this.parent.eventSettings.allowDeleting || readonly;\n var editIcon = this.quickPopup.element.querySelector('.' + cls.EDIT_CLASS);\n if (editIcon) {\n this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.EDIT_ICON_CLASS, editAction, editIcon, this.editClick);\n }\n var deleteIcon = this.quickPopup.element.querySelector('.' + cls.DELETE_CLASS);\n if (deleteIcon) {\n this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.DELETE_ICON_CLASS, deleteAction, deleteIcon, this.deleteClick);\n }\n this.beforeQuickPopupOpen(target);\n };\n QuickPopups.prototype.isCellBlocked = function (args) {\n var tempObj = {};\n tempObj[this.parent.eventFields.startTime] = this.parent.activeCellsData.startTime;\n tempObj[this.parent.eventFields.endTime] = this.parent.activeCellsData.endTime;\n tempObj[this.parent.eventFields.isAllDay] = this.parent.activeCellsData.isAllDay;\n if (this.parent.activeViewOptions.group.resources.length > 0) {\n var targetCell = args.element instanceof Array ? args.element[0] : args.element;\n var groupIndex = parseInt(targetCell.getAttribute('data-group-index'), 10);\n this.parent.resourceBase.setResourceValues(tempObj, isNaN(groupIndex) ? null : groupIndex);\n }\n return this.parent.eventBase.isBlockRange(tempObj);\n };\n QuickPopups.prototype.cellClick = function (args) {\n var date = new Date(args.startTime.getTime());\n if (!this.parent.showQuickInfo || !this.parent.eventSettings.allowAdding ||\n this.parent.currentView === 'MonthAgenda' || this.isCellBlocked(args) ||\n !this.parent.isMinMaxDate(new Date(date.setHours(0, 0, 0, 0)))) {\n this.quickPopupHide();\n return;\n }\n var targetEle = args.event.target;\n if (this.parent.isAdaptive) {\n this.quickPopupHide();\n var newEventClone = this.parent.element.querySelector('.' + cls.NEW_EVENT_CLASS);\n if (isNullOrUndefined(newEventClone)) {\n newEventClone = createElement('div', {\n className: cls.NEW_EVENT_CLASS,\n innerHTML: \"
+ \" + this.l10n.getConstant('newEvent') + \"
\"\n });\n }\n var targetCell = closest(targetEle, '.' + cls.WORK_CELLS_CLASS + ',.' + cls.ALLDAY_CELLS_CLASS);\n if (targetCell) {\n targetCell.appendChild(newEventClone);\n }\n return;\n }\n var target = closest(targetEle, '.' + cls.WORK_CELLS_CLASS + ',.' + cls.ALLDAY_CELLS_CLASS + ',.' +\n cls.HEADER_CELLS_CLASS);\n if (isNullOrUndefined(target) || targetEle.classList.contains(cls.MORE_INDICATOR_CLASS)) {\n return;\n }\n var isSameTarget = this.quickPopup.relateTo === target;\n if (isSameTarget && this.quickPopup.element.classList.contains(cls.POPUP_OPEN)) {\n var subjectElement_1 = this.quickPopup.element.querySelector('.' + cls.SUBJECT_CLASS);\n if (subjectElement_1) {\n subjectElement_1.focus();\n }\n return;\n }\n var temp = {};\n temp[this.parent.eventFields.startTime] = this.parent.activeCellsData.startTime;\n temp[this.parent.eventFields.endTime] = this.parent.activeCellsData.endTime;\n temp[this.parent.eventFields.isAllDay] = this.parent.activeCellsData.isAllDay;\n var quickCellPopup = createElement('div', { className: cls.CELL_POPUP_CLASS });\n quickCellPopup.appendChild(this.getPopupHeader('Cell', temp));\n quickCellPopup.appendChild(this.getPopupContent('Cell', args, temp));\n quickCellPopup.appendChild(this.getPopupFooter('Cell', temp));\n var subjectElement = quickCellPopup.querySelector('.' + cls.SUBJECT_CLASS);\n if (subjectElement) {\n Input.createInput({ element: subjectElement, properties: { placeholder: this.l10n.getConstant('addTitle') } });\n }\n if (!isNullOrUndefined(this.parent.eventSettings.fields.subject.default)) {\n subjectElement.value = this.parent.eventSettings.fields.subject.default;\n }\n var closeIcon = quickCellPopup.querySelector('.' + cls.CLOSE_CLASS);\n if (closeIcon) {\n this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.CLOSE_ICON_CLASS, false, closeIcon, this.popupClose);\n }\n var moreButton = quickCellPopup.querySelector('.' + cls.QUICK_POPUP_EVENT_DETAILS_CLASS);\n if (moreButton) {\n this.renderButton('e-flat', '', false, moreButton, this.detailsClick);\n }\n var saveButton = quickCellPopup.querySelector('.' + cls.EVENT_CREATE_CLASS);\n if (saveButton) {\n this.renderButton('e-flat e-primary', '', this.parent.activeViewOptions.readonly, saveButton, this.saveClick);\n }\n this.quickPopup.content = quickCellPopup;\n this.quickPopup.dataBind();\n this.applyFormValidation();\n if (this.morePopup) {\n this.morePopup.hide();\n }\n this.quickPopup.relateTo = target;\n this.beforeQuickPopupOpen(target);\n };\n QuickPopups.prototype.isSameEventClick = function (events) {\n var isSameTarget = this.quickPopup.relateTo === closest(events.element, '.' + cls.APPOINTMENT_CLASS);\n if (isSameTarget && this.quickPopup.element.classList.contains(cls.POPUP_OPEN)) {\n var editIcon = this.quickPopup.element.querySelector('.' + cls.EDIT_CLASS);\n if (editIcon) {\n editIcon.focus();\n }\n if (!this.parent.isAdaptive) {\n var editButton = this.quickPopup.element.querySelector('.' + cls.EDIT_EVENT_CLASS);\n if (editButton) {\n editButton.focus();\n }\n }\n return true;\n }\n return false;\n };\n QuickPopups.prototype.isQuickTemplate = function (type) {\n return this.parent.quickInfoTemplates.templateType === 'Both' || this.parent.quickInfoTemplates.templateType === type;\n };\n QuickPopups.prototype.eventClick = function (events) {\n if (this.parent.eventTooltip) {\n this.parent.eventTooltip.close();\n }\n if (!this.parent.showQuickInfo) {\n return;\n }\n if (this.parent.isAdaptive && this.isMultipleEventSelect) {\n this.updateTapHoldEventPopup(closest(events.element, '.' + cls.APPOINTMENT_CLASS));\n }\n else {\n var isSameTarget = this.isSameEventClick(events);\n if (isSameTarget) {\n return;\n }\n var eventData = events.event;\n var quickEventPopup = createElement('div', { className: cls.EVENT_POPUP_CLASS });\n quickEventPopup.appendChild(this.getPopupHeader('Event', eventData));\n quickEventPopup.appendChild(this.getPopupContent('Event', events, eventData));\n quickEventPopup.appendChild(this.getPopupFooter('Event', eventData));\n var readonly = this.parent.activeViewOptions.readonly || eventData[this.parent.eventFields.isReadonly];\n var editAction = !this.parent.eventSettings.allowEditing || readonly;\n var deleteAction = !this.parent.eventSettings.allowDeleting || readonly;\n var editIcon = quickEventPopup.querySelector('.' + cls.EDIT_CLASS);\n var buttonClass = 'e-flat e-round e-small';\n if (editIcon) {\n this.renderButton(buttonClass, cls.ICON + ' ' + cls.EDIT_ICON_CLASS, editAction, editIcon, this.editClick);\n }\n var deleteIcon = quickEventPopup.querySelector('.' + cls.DELETE_CLASS);\n if (deleteIcon) {\n this.renderButton(buttonClass, cls.ICON + ' ' + cls.DELETE_ICON_CLASS, deleteAction, deleteIcon, this.deleteClick);\n }\n var closeIcon = quickEventPopup.querySelector('.' + cls.CLOSE_CLASS);\n if (closeIcon) {\n this.renderButton(buttonClass, cls.ICON + ' ' + cls.CLOSE_ICON_CLASS, false, closeIcon, this.popupClose);\n }\n var editButton = quickEventPopup.querySelector('.' + cls.EDIT_EVENT_CLASS);\n if (editButton) {\n this.renderButton('e-flat e-primary', '', editAction, editButton, this.editClick);\n }\n var deleteButton = quickEventPopup.querySelector('.' + cls.DELETE_EVENT_CLASS);\n if (deleteButton) {\n this.renderButton('e-flat', '', deleteAction, deleteButton, this.deleteClick);\n }\n this.quickPopup.content = quickEventPopup;\n this.quickPopup.dataBind();\n if (this.morePopup && !closest(events.element, '.' + cls.MORE_EVENT_WRAPPER_CLASS)) {\n this.morePopup.hide();\n }\n this.quickPopup.relateTo = this.parent.isAdaptive ? document.body :\n closest(events.element, '.' + cls.APPOINTMENT_CLASS);\n this.beforeQuickPopupOpen(events.element);\n }\n };\n QuickPopups.prototype.getPopupHeader = function (headerType, headerData) {\n var headerTemplate = createElement('div', { className: cls.POPUP_HEADER_CLASS });\n if (this.isQuickTemplate(headerType) && this.parent.quickInfoTemplates.header) {\n var headerArgs = extend({}, headerData, { elementType: headerType.toLowerCase() }, true);\n var templateId = this.parent.element.id;\n var headerTemp = [].slice.call(this.parent.getQuickInfoTemplatesHeader()(headerArgs, this.parent, 'header', templateId + '_headerTemplate', false));\n append([].slice.call(headerTemp), headerTemplate);\n }\n else {\n var header = void 0;\n var args = void 0;\n switch (headerType) {\n case 'Cell':\n header = \"
\");\n break;\n case 'Event':\n args = this.getFormattedString(headerData);\n header = \"
\" +\n (\"\") +\n (\"\") +\n (\"
\") +\n (\"
\" + args.eventSubject + \"
\");\n break;\n }\n var templateWrapper = createElement('div', { innerHTML: header });\n append([].slice.call(templateWrapper.childNodes), headerTemplate);\n }\n return headerTemplate;\n };\n QuickPopups.prototype.getPopupContent = function (type, args, data) {\n var contentTemplate = createElement('div', { className: cls.POPUP_CONTENT_CLASS });\n if (this.isQuickTemplate(type) && this.parent.quickInfoTemplates.content) {\n var contentArgs = extend({}, data, { elementType: type.toLowerCase() }, true);\n var templateId = this.parent.element.id;\n var contentTemp = [].slice.call(this.parent.getQuickInfoTemplatesContent()(contentArgs, this.parent, 'content', templateId + '_contentTemplate', false));\n append([].slice.call(contentTemp), contentTemplate);\n }\n else {\n var content = void 0;\n var cellDetails = void 0;\n var argsData = void 0;\n var resourceText = this.getResourceText(args, type.toLowerCase());\n switch (type) {\n case 'Cell':\n cellDetails = this.getFormattedString(data);\n content = \"
|
\") +\n (\" \" + cellDetails.details + \" \") +\n ((this.parent.activeViewOptions.group.resources.length > 0 ? \"\" +\n (\" \" + resourceText + \" \") : '') + \" |
\");\n break;\n case 'Event':\n argsData = this.getFormattedString(data);\n content = '
' + argsData.details + '
';\n if (data[this.parent.eventFields.recurrenceRule]) {\n content += '
' +\n this.getRecurrenceSummary(data) + '
';\n }\n content += '
';\n if (data[this.parent.eventFields.location]) {\n content += '
' +\n data[this.parent.eventFields.location] + '
';\n }\n if (data[this.parent.eventFields.startTimezone] || data[this.parent.eventFields.endTimezone]) {\n content += '
' +\n this.getTimezone(data) + '
';\n }\n if (data[this.parent.eventFields.description]) {\n content += '
' +\n data[this.parent.eventFields.description] + '
';\n }\n if (this.parent.resourceCollection.length > 0) {\n content += '
';\n }\n break;\n }\n var templateWrapper = createElement('div', { innerHTML: content });\n append([].slice.call(templateWrapper.childNodes), contentTemplate);\n }\n return contentTemplate;\n };\n QuickPopups.prototype.getPopupFooter = function (footerType, footerData) {\n var footerTemplate = createElement('div', { className: cls.POPUP_FOOTER_CLASS });\n if (this.isQuickTemplate(footerType) && this.parent.quickInfoTemplates.footer) {\n var footerArgs = extend({}, footerData, { elementType: footerType.toLowerCase() }, true);\n var templateId = this.parent.element.id;\n var footerTemp = [].slice.call(this.parent.getQuickInfoTemplatesFooter()(footerArgs, this.parent, 'footer', templateId + '_footerTemplate', false));\n append([].slice.call(footerTemp), footerTemplate);\n }\n else {\n var footer = void 0;\n switch (footerType) {\n case 'Cell':\n footer = \"
\") +\n (\"
\");\n break;\n case 'Event':\n footer = \"\" + (this.parent.isAdaptive ? '' : \"
\") +\n (\"
\"));\n break;\n }\n var templateWrapper = createElement('div', { innerHTML: footer });\n append([].slice.call(templateWrapper.childNodes), footerTemplate);\n }\n return footerTemplate;\n };\n QuickPopups.prototype.getResourceText = function (args, type) {\n if (this.parent.resourceCollection.length === 0) {\n return null;\n }\n var resourceValue = '';\n if (this.parent.activeViewOptions.group.resources.length === 0) {\n var resourceCollection_1 = this.parent.resourceBase.resourceCollection.slice(-1)[0];\n var resourceData = resourceCollection_1.dataSource;\n if (type === 'event') {\n var eventData = args.event;\n var _loop_2 = function (data) {\n var resourceId = eventData[resourceCollection_1.field];\n if (resourceId instanceof Array) {\n if (resourceId.indexOf(data[resourceCollection_1.idField]) > -1) {\n var id_1 = resourceId[resourceId.indexOf(data[resourceCollection_1.idField])];\n var resource = resourceData.filter(function (e) {\n return e[resourceCollection_1.idField] === id_1;\n })[0];\n resourceValue += (resourceValue === '') ? resource[resourceCollection_1.textField] :\n ', ' + resource[resourceCollection_1.textField];\n }\n }\n else if (data[resourceCollection_1.idField] === resourceId) {\n resourceValue = data[resourceCollection_1.textField].toString();\n }\n };\n for (var _i = 0, resourceData_1 = resourceData; _i < resourceData_1.length; _i++) {\n var data = resourceData_1[_i];\n _loop_2(data);\n }\n }\n else {\n resourceValue = resourceData[0][resourceCollection_1.textField].toString();\n }\n }\n else {\n if (type === 'event') {\n var eventData = args.event;\n var resourceData = void 0;\n var lastResource_1;\n for (var i = this.parent.resourceBase.resourceCollection.length - 1; i >= 0; i--) {\n resourceData = eventData[this.parent.resourceBase.resourceCollection[i].field];\n if (!isNullOrUndefined(resourceData)) {\n lastResource_1 = this.parent.resourceBase.resourceCollection[i];\n break;\n }\n }\n if (!Array.isArray(resourceData)) {\n resourceData = [resourceData];\n }\n var resNames_1 = [];\n var lastResourceData_1 = lastResource_1.dataSource;\n resourceData.forEach(function (value) {\n var text;\n var i = util.findIndexInData(lastResourceData_1, lastResource_1.idField, value);\n if (i > -1) {\n text = lastResourceData_1[i][lastResource_1.textField];\n }\n if (text) {\n resNames_1.push(text);\n }\n });\n resourceValue = resNames_1.join(', ');\n }\n else {\n var argsData = args;\n var groupIndex = !isNullOrUndefined(argsData.groupIndex) ? argsData.groupIndex : 0;\n var resourceDetails = this.parent.resourceBase.lastResourceLevel[groupIndex];\n resourceValue = resourceDetails.resourceData[resourceDetails.resource.textField];\n }\n }\n return resourceValue;\n };\n QuickPopups.prototype.getFormattedString = function (eventData) {\n var fields = this.parent.eventFields;\n var eventSubject = (eventData[fields.subject] || this.l10n.getConstant('noTitle'));\n var startDate = eventData[fields.startTime];\n var endDate = eventData[fields.endTime];\n var startDateDetails = this.getDateFormat(startDate, 'long');\n var endDateDetails = (eventData[fields.isAllDay] && endDate.getHours() === 0 && endDate.getMinutes() === 0) ?\n this.getDateFormat(util.addDays(new Date(endDate.getTime()), -1), 'long') :\n this.getDateFormat(endDate, 'long');\n var startTimeDetail = this.parent.getTimeString(startDate);\n var endTimeDetail = this.parent.getTimeString(endDate);\n var details = '';\n var spanLength = endDate.getDate() !== startDate.getDate() &&\n (endDate.getTime() - startDate.getTime()) / (60 * 60 * 1000) < 24 ? 1 : 0;\n if (eventData[fields.isAllDay]) {\n details = startDateDetails + ' (' + this.l10n.getConstant('allDay') + ')';\n if (((endDate.getTime() - startDate.getTime()) / util.MS_PER_DAY) > 1) {\n details += ' - ' + endDateDetails + ' (' + this.l10n.getConstant('allDay') + ')';\n }\n }\n else if ((((endDate.getTime() - startDate.getTime()) / util.MS_PER_DAY) >= 1) || spanLength > 0) {\n details = startDateDetails + ' (' + startTimeDetail + ')' + ' - ' + endDateDetails + ' (' + endTimeDetail + ')';\n }\n else {\n details = startDateDetails + ' (' + (startTimeDetail + ' - ' + endTimeDetail) + ')';\n }\n return { eventSubject: eventSubject, details: details };\n };\n QuickPopups.prototype.moreEventClick = function (data, endDate, groupIndex) {\n var _this = this;\n this.quickPopupHide(true);\n var moreEventContentEle = this.morePopup.element.querySelector('.' + cls.MORE_EVENT_CONTENT_CLASS);\n if (moreEventContentEle) {\n remove(moreEventContentEle);\n }\n var selectedDate = ((data.date).getTime()).toString();\n var target = closest(data.element, '.' + cls.MORE_INDICATOR_CLASS + ',.' + cls.WORK_CELLS_CLASS);\n var day = this.parent.globalize.formatDate(data.date, { format: 'E', calendar: this.parent.getCalendarMode() });\n this.morePopup.element.querySelector('.' + cls.MORE_EVENT_HEADER_DAY_CLASS).innerHTML = util.capitalizeFirstWord(day, 'single');\n var dateElement = this.morePopup.element.querySelector('.' + cls.MORE_EVENT_HEADER_DATE_CLASS);\n dateElement.innerHTML = this.getDateFormat(data.date, 'd');\n dateElement.setAttribute('data-date', selectedDate);\n dateElement.setAttribute('data-end-date', endDate.getTime().toString());\n var groupOrder;\n if (!isNullOrUndefined(groupIndex)) {\n dateElement.setAttribute('data-group-index', groupIndex);\n groupOrder = this.parent.resourceBase.lastResourceLevel[parseInt(groupIndex, 10)].groupOrder;\n }\n var moreEventElements = this.createMoreEventList(data.event, groupOrder, groupIndex);\n this.morePopup.element.querySelector('.' + cls.MORE_EVENT_POPUP_CLASS).appendChild(moreEventElements);\n removeClass(this.morePopup.element.querySelector('.' + cls.MORE_EVENT_DATE_HEADER_CLASS).childNodes, cls.CURRENTDATE_CLASS);\n if (util.resetTime(data.date).getTime() === util.resetTime(this.parent.getCurrentTime()).getTime()) {\n addClass(this.morePopup.element.querySelector('.' + cls.MORE_EVENT_DATE_HEADER_CLASS).childNodes, cls.CURRENTDATE_CLASS);\n }\n if (!this.parent.isAdaptive) {\n if (this.parent.currentView.indexOf('Timeline') !== -1) {\n var gIndex = target.getAttribute('data-group-index');\n var startDate = new Date(parseInt(target.getAttribute('data-start-date'), 10));\n startDate.setHours(startDate.getHours(), startDate.getMinutes(), 0);\n var tdDate = startDate.getTime().toString();\n if (isNullOrUndefined(gIndex)) {\n this.morePopup.relateTo = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS +\n ' tbody tr td[data-date=\"' + tdDate + '\"]');\n }\n else {\n this.morePopup.relateTo = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS +\n ' tbody tr td[data-group-index=\"' + gIndex + '\"][data-date=\"' + tdDate + '\"]');\n if (isNullOrUndefined(this.morePopup.relateTo)) {\n var workCells = [].slice.call(this.parent.element.querySelectorAll('.' + cls.CONTENT_WRAP_CLASS +\n ' tbody tr td[data-group-index=\"' + gIndex + '\"]'));\n for (var i = 0; i < workCells.length; i++) {\n var date = workCells[i].getAttribute('data-date');\n if (date < tdDate) {\n this.morePopup.relateTo = workCells[i];\n }\n }\n }\n }\n }\n else {\n this.morePopup.relateTo = closest(target, '.' + cls.WORK_CELLS_CLASS);\n }\n }\n this.parent.renderTemplates();\n var eventProp = {\n type: 'EventContainer', cancel: false,\n element: this.morePopup.element, data: data\n };\n this.parent.trigger(event.popupOpen, eventProp, function (popupArgs) {\n if (!popupArgs.cancel) {\n _this.morePopup.show();\n }\n });\n };\n QuickPopups.prototype.saveClick = function (event) {\n this.dialogEvent = event;\n this.isCrudAction = true;\n this.quickPopupHide();\n };\n QuickPopups.prototype.detailsClick = function (event) {\n var subjectEle = this.quickPopup.element.querySelector('.' + cls.SUBJECT_CLASS);\n if (subjectEle && subjectEle.value !== '') {\n extend(this.parent.activeCellsData, { subject: subjectEle.value });\n }\n this.dialogEvent = event;\n this.isCrudAction = false;\n this.fieldValidator.destroyToolTip();\n this.quickPopupHide();\n this.parent.eventWindow.openEditor(this.parent.activeCellsData, 'Add');\n };\n QuickPopups.prototype.editClick = function (event) {\n this.dialogEvent = event;\n this.quickPopupHide(true);\n var data = this.parent.activeEventData.event;\n this.parent.currentAction = 'EditSeries';\n if (!isNullOrUndefined(data[this.parent.eventFields.recurrenceRule])) {\n this.parent.currentAction = 'EditOccurrence';\n this.openRecurrenceAlert();\n }\n else {\n this.parent.eventWindow.openEditor(data, this.parent.currentAction);\n }\n };\n QuickPopups.prototype.deleteClick = function (event) {\n this.dialogEvent = event;\n this.quickPopupHide(true);\n this.parent.currentAction = 'Delete';\n if (this.parent.activeEventData.event[this.parent.eventFields.recurrenceRule]) {\n this.openRecurrenceAlert();\n }\n else {\n this.openDeleteAlert();\n }\n };\n QuickPopups.prototype.updateMoreEventContent = function () {\n if (this.morePopup.element.classList.contains('e-popup-close')) {\n return;\n }\n var moreEventContentEle = this.morePopup.element.querySelector('.' + cls.MORE_EVENT_CONTENT_CLASS);\n if (moreEventContentEle) {\n remove(moreEventContentEle);\n }\n var dateElement = this.morePopup.element.querySelector('.' + cls.MORE_EVENT_HEADER_DATE_CLASS);\n var startDate = new Date(parseInt(dateElement.getAttribute('data-date'), 10));\n var endDate = new Date(parseInt(dateElement.getAttribute('data-end-date'), 10));\n var groupIndex = dateElement.getAttribute('data-group-index');\n var data;\n var groupOrder;\n if (!isNullOrUndefined(groupIndex)) {\n data = this.parent.resourceBase.lastResourceLevel[parseInt(groupIndex, 10)];\n groupOrder = data.groupOrder;\n }\n var events = this.parent.eventBase.filterEvents(startDate, endDate, this.parent.eventsProcessed, data);\n var moreElement = this.createMoreEventList(events, groupOrder, groupIndex);\n this.morePopup.element.querySelector('.' + cls.MORE_EVENT_POPUP_CLASS).appendChild(moreElement);\n };\n QuickPopups.prototype.closeClick = function (event) {\n this.dialogEvent = event;\n this.quickPopupHide();\n this.morePopup.hide();\n };\n QuickPopups.prototype.dialogButtonClick = function (event) {\n this.dialogEvent = event;\n this.quickDialog.hide();\n var target = event.target;\n var cancelBtn = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_CANCEL);\n var eventData = this.parent.activeEventData.event;\n if (target.classList.contains(cls.QUICK_DIALOG_OCCURRENCE_CLASS)) {\n this.parent.currentAction = (this.parent.currentAction === 'Delete') ? 'DeleteOccurrence' : 'EditOccurrence';\n switch (this.parent.currentAction) {\n case 'EditOccurrence':\n this.parent.eventWindow.openEditor(eventData, this.parent.currentAction);\n break;\n case 'DeleteOccurrence':\n this.parent.crudModule.deleteEvent(eventData, this.parent.currentAction);\n break;\n }\n }\n else if (target.classList.contains(cls.QUICK_DIALOG_FOLLOWING_EVENTS_CLASS)) {\n this.parent.currentAction = (this.parent.currentAction === 'Delete') ? 'DeleteFollowingEvents' : 'EditFollowingEvents';\n switch (this.parent.currentAction) {\n case 'EditFollowingEvents':\n this.parent.eventWindow.openEditor(eventData, this.parent.currentAction);\n break;\n case 'DeleteFollowingEvents':\n this.parent.crudModule.deleteEvent(eventData, this.parent.currentAction);\n break;\n }\n }\n else if (target.classList.contains(cls.QUICK_DIALOG_SERIES_CLASS)) {\n this.parent.currentAction = (this.parent.currentAction === 'Delete') ? 'DeleteSeries' : 'EditSeries';\n switch (this.parent.currentAction) {\n case 'EditSeries':\n this.parent.eventWindow.openEditor(this.parent.eventBase.getParentEvent(eventData, true), this.parent.currentAction);\n break;\n case 'DeleteSeries':\n this.parent.crudModule.deleteEvent(eventData, this.parent.currentAction);\n break;\n }\n }\n else if (target.classList.contains(cls.QUICK_DIALOG_DELETE_CLASS)) {\n this.parent.crudModule.deleteEvent(eventData, this.parent.currentAction);\n }\n else if (!cancelBtn.classList.contains(cls.DISABLE_CLASS) && (target.classList.contains(cls.QUICK_DIALOG_ALERT_OK) ||\n (target.classList.contains(cls.QUICK_DIALOG_ALERT_CANCEL) && !cancelBtn.classList.contains(cls.QUICK_DIALOG_CANCEL_CLASS)))) {\n this.parent.uiStateValues.isIgnoreOccurrence = target.classList.contains(cls.QUICK_DIALOG_ALERT_CANCEL);\n this.parent.eventWindow.eventSave(event, this.l10n.getConstant('ok'));\n }\n };\n QuickPopups.prototype.updateTapHoldEventPopup = function (target) {\n var selectedElements = this.parent.eventBase.getSelectedEventElements(target);\n this.parent.activeEventData = this.parent.eventBase.getSelectedEvents();\n if (selectedElements.length > 0) {\n var eventObj = this.parent.eventBase.getEventByGuid(selectedElements[0].getAttribute('data-guid'));\n var titleContent = (selectedElements.length === 1) ?\n (eventObj[this.parent.eventFields.subject] || this.l10n.getConstant('noTitle')) :\n '(' + selectedElements.length + ')' + ' ' + this.l10n.getConstant('selectedItems');\n this.quickPopup.element.querySelector('.' + cls.SUBJECT_CLASS).innerHTML = titleContent;\n if (selectedElements.length > 1) {\n addClass([this.quickPopup.element.querySelector('.' + cls.EDIT_ICON_CLASS)], cls.HIDDEN_CLASS);\n }\n else {\n removeClass([this.quickPopup.element.querySelector('.' + cls.EDIT_ICON_CLASS)], cls.HIDDEN_CLASS);\n }\n }\n else {\n this.parent.selectedElements = [];\n this.quickPopupHide();\n }\n };\n QuickPopups.prototype.getTimezone = function (event) {\n var zoneDetails = '';\n zoneDetails += event[this.parent.eventFields.startTimezone] || '';\n zoneDetails += zoneDetails === '' ? '' : ' - ';\n zoneDetails += event[this.parent.eventFields.endTimezone] || '';\n return zoneDetails;\n };\n QuickPopups.prototype.getRecurrenceSummary = function (event) {\n var recurrenceEditor = this.parent.eventWindow.getRecurrenceEditorInstance();\n if (recurrenceEditor) {\n var ruleSummary = recurrenceEditor.getRuleSummary(event[this.parent.eventFields.recurrenceRule]);\n return ruleSummary.charAt(0).toUpperCase() + ruleSummary.slice(1);\n }\n return '';\n };\n QuickPopups.prototype.getDateFormat = function (date, skeletonString) {\n return util.capitalizeFirstWord(this.parent.globalize.formatDate(date, { skeleton: skeletonString, calendar: this.parent.getCalendarMode() }), 'single');\n };\n QuickPopups.prototype.getDataFromTarget = function (target) {\n if (target.classList.contains(cls.APPOINTMENT_CLASS)) {\n return this.parent.activeEventData.event;\n }\n // Deprecated cells data in quick popups\n var eventObj = {\n startTime: this.parent.activeCellsData.startTime,\n endTime: this.parent.activeCellsData.endTime,\n isAllDay: this.parent.activeCellsData.isAllDay,\n groupIndex: this.parent.activeCellsData.groupIndex\n };\n var cellsData = this.parent.activeCellsData;\n this.parent.eventWindow.convertToEventData(cellsData, eventObj);\n return eventObj;\n };\n QuickPopups.prototype.beforeQuickDialogClose = function (e) {\n var _this = this;\n var args = {\n event: e.event || this.dialogEvent,\n type: (isNullOrUndefined(this.parent.activeEventData.event)) ? 'ValidationAlert' :\n !isNullOrUndefined(this.parent.activeEventData.event[this.parent.eventFields.recurrenceRule])\n ? 'RecurrenceAlert' : 'DeleteAlert', cancel: false, data: this.parent.activeEventData.event,\n element: this.quickDialog.element\n };\n this.parent.trigger(event.popupClose, args, function (popupCloseArgs) {\n if (!popupCloseArgs.cancel) {\n _this.parent.eventBase.focusElement(true);\n }\n });\n };\n QuickPopups.prototype.beforeQuickPopupOpen = function (target) {\n var _this = this;\n this.parent.renderTemplates();\n var isEventPopup = this.quickPopup.element.querySelector('.' + cls.EVENT_POPUP_CLASS);\n var popupType = this.parent.isAdaptive ? isEventPopup ? 'ViewEventInfo' : 'EditEventInfo' : 'QuickInfo';\n var eventProp = {\n type: popupType, cancel: false, data: extend({}, this.getDataFromTarget(target), null, true),\n target: target, element: this.quickPopup.element\n };\n this.parent.trigger(event.popupOpen, eventProp, function (popupArgs) {\n if (popupArgs.cancel) {\n _this.quickPopupHide();\n _this.destroyPopupButtons('quickPopup');\n if (popupArgs.element.classList.contains(cls.POPUP_OPEN)) {\n _this.quickPopupClose();\n }\n util.removeChildren(_this.quickPopup.element);\n _this.isMultipleEventSelect = false;\n }\n else {\n var display = _this.quickPopup.element.style.display;\n _this.quickPopup.element.style.display = 'block';\n if (_this.parent.isAdaptive) {\n _this.quickPopup.element.removeAttribute('style');\n _this.quickPopup.element.style.display = 'block';\n _this.quickPopup.element.style.height = formatUnit((popupType === 'EditEventInfo') ? 65 : window.innerHeight);\n }\n else {\n _this.quickPopup.offsetX = 10;\n _this.quickPopup.collision = { X: _this.parent.enableRtl ? 'flip' : 'none', Y: 'fit' };\n _this.quickPopup.position = { X: _this.parent.enableRtl ? 'left' : 'right', Y: _this.parent.enableRtl ? 'bottom' : 'top' };\n _this.quickPopup.dataBind();\n _this.quickPopup.refreshPosition(null, true);\n var collide = isCollide(_this.quickPopup.element, _this.parent.element);\n if (collide.indexOf(_this.parent.enableRtl ? 'left' : 'right') > -1) {\n _this.quickPopup.offsetX = -target.offsetWidth - 10 - _this.quickPopup.element.offsetWidth;\n _this.quickPopup.dataBind();\n var leftCollide = isCollide(_this.quickPopup.element, _this.parent.element);\n if (leftCollide.indexOf('left') > -1) {\n _this.quickPopup.position = { X: 'center', Y: 'center' };\n _this.quickPopup.collision = { X: 'fit', Y: 'fit' };\n _this.quickPopup.offsetX = -(_this.quickPopup.element.offsetWidth / 2);\n _this.quickPopup.dataBind();\n }\n }\n if (_this.parent.virtualScrollModule && (collide.indexOf('top') > -1 || collide.indexOf('bottom') > -1)) {\n var element = _this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS + ' table');\n var translateY = util.getTranslateY(element);\n _this.quickPopup.offsetY = translateY;\n _this.quickPopup.dataBind();\n }\n }\n if (isEventPopup) {\n _this.applyEventColor();\n }\n _this.quickPopup.element.style.display = display;\n _this.quickPopup.dataBind();\n _this.quickPopup.show();\n }\n });\n };\n QuickPopups.prototype.applyEventColor = function () {\n var colorField = '';\n if (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda') {\n colorField = this.parent.enableRtl ? 'border-right-color' : 'border-left-color';\n }\n else {\n colorField = 'background-color';\n }\n var color = this.parent.activeEventData.element.style[colorField];\n if (color === '') {\n return;\n }\n var colorEle = this.quickPopup.element.querySelector('.' + cls.POPUP_HEADER_CLASS);\n var footerEle = this.quickPopup.element.querySelector('.' + cls.POPUP_FOOTER_CLASS);\n if (footerEle && footerEle.offsetParent) {\n colorEle = this.quickPopup.element.querySelector('.' + cls.SUBJECT_CLASS);\n if (colorEle) {\n colorEle.style.borderLeftColor = color;\n color = \"rgba(\" + color.match(/\\d+/g).join() + \",0.3)\";\n }\n }\n if (colorEle) {\n colorEle.style.backgroundColor = color;\n }\n };\n QuickPopups.prototype.quickPopupOpen = function () {\n if (this.parent.isAdaptive) {\n this.quickPopup.element.style.top = '0px';\n return;\n }\n if (this.quickPopup.element.querySelector('.' + cls.CELL_POPUP_CLASS)) {\n var subjectElement = this.quickPopup.element.querySelector('.' + cls.SUBJECT_CLASS);\n if (subjectElement) {\n subjectElement.focus();\n }\n }\n else {\n var editElement = this.quickPopup.element.querySelector('.' + cls.EDIT_EVENT_CLASS);\n if (editElement) {\n editElement.focus();\n }\n var editIcon = this.quickPopup.element.querySelector('.' + cls.EDIT_CLASS);\n if (editIcon) {\n editIcon.focus();\n }\n }\n };\n QuickPopups.prototype.quickPopupClose = function () {\n this.parent.eventBase.focusElement();\n this.quickPopup.relateTo = cls.WORK_CELLS_CLASS;\n this.fieldValidator.destroyToolTip();\n if (this.quickPopup.element.querySelectorAll('.e-formvalidator').length) {\n this.fieldValidator.destroy();\n }\n this.destroyPopupButtons('quickPopup');\n util.removeChildren(this.quickPopup.element);\n };\n QuickPopups.prototype.morePopupOpen = function () {\n if (this.parent.isAdaptive) {\n this.morePopup.element.style.top = '0px';\n this.morePopup.element.style.left = '0px';\n this.morePopup.element.style.height = formatUnit(window.innerHeight);\n return;\n }\n this.morePopup.element.querySelector('.' + cls.MORE_EVENT_HEADER_DATE_CLASS).focus();\n this.morePopup.refreshPosition();\n };\n QuickPopups.prototype.morePopupClose = function () {\n var moreWrapper = this.parent.element.querySelector('.' + cls.MORE_EVENT_WRAPPER_CLASS);\n if (moreWrapper) {\n remove(moreWrapper);\n }\n };\n QuickPopups.prototype.popupClose = function (event) {\n this.dialogEvent = event;\n this.isCrudAction = false;\n this.quickPopupHide(true);\n };\n QuickPopups.prototype.quickPopupHide = function (hideAnimation) {\n var _this = this;\n if (!this.quickPopup.element.classList.contains(cls.POPUP_OPEN)) {\n return;\n }\n var isCellPopup = this.quickPopup.element.querySelector('.' + cls.CELL_POPUP_CLASS);\n var popupData;\n if (isCellPopup) {\n var formvalidator = this.quickPopup.element.querySelector('.e-formvalidator');\n if (this.isCrudAction && formvalidator &&\n !formvalidator.ej2_instances[0].validate()) {\n return;\n }\n var fields = this.parent.eventFields;\n var saveObj = this.parent.eventWindow.getObjectFromFormData(cls.POPUP_WRAPPER_CLASS);\n this.parent.eventWindow.setDefaultValueToObject(saveObj);\n saveObj[fields.id] = this.parent.eventBase.getEventMaxID();\n saveObj[fields.startTime] = this.parent.activeCellsData.startTime;\n saveObj[fields.endTime] = this.parent.activeCellsData.endTime;\n saveObj[fields.isAllDay] = this.parent.activeCellsData.isAllDay;\n if (this.parent.resourceBase) {\n this.parent.resourceBase.setResourceValues(saveObj);\n }\n popupData = saveObj;\n }\n else {\n popupData = this.parent.activeEventData.event;\n }\n var isEventPopup = this.quickPopup.element.querySelector('.' + cls.EVENT_POPUP_CLASS);\n var args = {\n event: this.dialogEvent,\n type: this.parent.isAdaptive ? isEventPopup ? 'ViewEventInfo' : 'EditEventInfo' : 'QuickInfo',\n cancel: false, data: popupData, element: this.quickPopup.element,\n target: (isCellPopup ? this.parent.activeCellsData.element : this.parent.activeEventData.element)\n };\n this.parent.trigger(event.popupClose, args, function (popupCloseArgs) {\n if (!popupCloseArgs.cancel) {\n if (_this.quickPopup.element.classList.contains('e-popup-open')) {\n if (isCellPopup && _this.isCrudAction) {\n _this.parent.currentAction = 'Add';\n _this.parent.crudModule.addEvent(popupCloseArgs.data);\n }\n if (hideAnimation) {\n var animation = _this.quickPopup.hideAnimation;\n _this.quickPopup.hideAnimation = null;\n _this.quickPopup.hide();\n _this.quickPopup.hideAnimation = animation;\n }\n else {\n _this.quickPopup.hide();\n }\n _this.isMultipleEventSelect = false;\n _this.isCrudAction = false;\n }\n }\n });\n };\n QuickPopups.prototype.navigationClick = function (e) {\n var navigateEle = closest(e.target, '.' + cls.NAVIGATE_CLASS);\n if (!isNullOrUndefined(navigateEle)) {\n var date = this.parent.getDateFromElement(e.currentTarget);\n if (!isNullOrUndefined(date)) {\n this.closeClick(e);\n this.parent.setProperties({ selectedDate: date }, true);\n this.parent.changeView(this.parent.getNavigateView(), e);\n }\n }\n };\n QuickPopups.prototype.documentClick = function (e) {\n var target = e.event.target;\n var classNames = '.' + cls.POPUP_WRAPPER_CLASS + ',.' + cls.HEADER_CELLS_CLASS + ',.' + cls.ALLDAY_CELLS_CLASS +\n ',.' + cls.WORK_CELLS_CLASS + ',.' + cls.APPOINTMENT_CLASS + ',.e-popup';\n var popupWrap = this.parent.element.querySelector('.' + cls.POPUP_WRAPPER_CLASS);\n if ((popupWrap && popupWrap.childElementCount > 0 && !closest(target, classNames)) || !closest(target, classNames)) {\n this.quickPopupHide();\n this.parent.removeNewEventElement();\n }\n var tar = this.parent.element.querySelector('.' + cls.INLINE_SUBJECT_CLASS);\n if (tar && tar !== target && this.parent.allowInline) {\n this.parent.inlineModule.documentClick();\n }\n if (closest(target, '.' + cls.APPOINTMENT_CLASS + ',.' + cls.HEADER_CELLS_CLASS)) {\n this.parent.removeNewEventElement();\n }\n if (!closest(target, '.' + cls.MORE_POPUP_WRAPPER_CLASS) && (target.classList &&\n !target.classList.contains(cls.MORE_INDICATOR_CLASS))\n && (!closest(target, '.' + cls.POPUP_OPEN)) && !closest(target, '.' + cls.WORK_CELLS_CLASS)) {\n this.morePopup.hide();\n }\n };\n QuickPopups.prototype.onClosePopup = function (event) {\n if (!isNullOrUndefined(event)) {\n this.dialogEvent = event;\n }\n this.quickPopupHide();\n this.parent.eventBase.focusElement();\n };\n QuickPopups.prototype.addEventListener = function () {\n this.parent.on(event.cellClick, this.cellClick, this);\n this.parent.on(event.eventClick, this.eventClick, this);\n this.parent.on(event.documentClick, this.documentClick, this);\n this.parent.on(event.dataReady, this.updateMoreEventContent, this);\n };\n QuickPopups.prototype.removeEventListener = function () {\n this.parent.off(event.cellClick, this.cellClick);\n this.parent.off(event.eventClick, this.eventClick);\n this.parent.off(event.documentClick, this.documentClick);\n this.parent.off(event.dataReady, this.updateMoreEventContent);\n };\n QuickPopups.prototype.destroyPopupButtons = function (popupName) {\n var popup = popupName === 'quickPopup' ? this.quickPopup : this.morePopup;\n var buttonCollections = [].slice.call(popup.element.querySelectorAll('.e-control.e-btn'));\n for (var _i = 0, buttonCollections_1 = buttonCollections; _i < buttonCollections_1.length; _i++) {\n var button = buttonCollections_1[_i];\n var instance = button.ej2_instances[0];\n if (instance) {\n instance.destroy();\n }\n }\n };\n QuickPopups.prototype.refreshQuickDialog = function () {\n this.destroyQuickDialog();\n this.renderQuickDialog();\n };\n QuickPopups.prototype.refreshQuickPopup = function () {\n this.destroyQuickPopup();\n this.renderQuickPopup();\n };\n QuickPopups.prototype.refreshMorePopup = function () {\n this.destroyMorePopup();\n this.renderMorePopup();\n };\n QuickPopups.prototype.destroyQuickDialog = function () {\n if (this.quickDialog.element) {\n this.quickDialog.destroy();\n remove(this.quickDialog.element);\n this.quickDialog = null;\n }\n };\n QuickPopups.prototype.destroyQuickPopup = function () {\n if (this.quickPopup.element) {\n this.destroyPopupButtons('quickPopup');\n this.quickPopup.destroy();\n remove(this.quickPopup.element);\n this.quickPopup = null;\n }\n };\n QuickPopups.prototype.destroyMorePopup = function () {\n if (this.morePopup.element) {\n this.destroyPopupButtons('morePopup');\n this.morePopup.destroy();\n remove(this.morePopup.element);\n this.morePopup = null;\n }\n };\n QuickPopups.prototype.destroy = function () {\n if (this.quickPopup.element.querySelectorAll('.e-formvalidator').length) {\n this.fieldValidator.destroy();\n }\n this.removeEventListener();\n this.destroyQuickPopup();\n this.destroyMorePopup();\n this.destroyQuickDialog();\n this.parent = null;\n this.l10n = null;\n this.isCrudAction = null;\n this.fieldValidator = null;\n this.isMultipleEventSelect = null;\n };\n return QuickPopups;\n}());\nexport { QuickPopups };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, Property, ChildProperty, Event, append, compile } from '@syncfusion/ej2-base';\nimport { EventHandler, Touch, Browser, Animation as PopupAnimation } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, getUniqueID, formatUnit, select, selectAll } from '@syncfusion/ej2-base';\nimport { attributes, closest, removeClass, addClass, remove } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, Complex, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { Popup } from '../popup/popup';\nimport { calculatePosition } from '../common/position';\nimport { isCollide, fit } from '../common/collision';\nvar TOUCHEND_HIDE_DELAY = 1500;\nvar TAPHOLD_THRESHOLD = 500;\nvar SHOW_POINTER_TIP_GAP = 0;\nvar HIDE_POINTER_TIP_GAP = 8;\nvar MOUSE_TRAIL_GAP = 2;\nvar POINTER_ADJUST = 2;\nvar ROOT = 'e-tooltip';\nvar RTL = 'e-rtl';\nvar DEVICE = 'e-bigger';\nvar ICON = 'e-icons';\nvar CLOSE = 'e-tooltip-close';\nvar TOOLTIP_WRAP = 'e-tooltip-wrap';\nvar CONTENT = 'e-tip-content';\nvar ARROW_TIP = 'e-arrow-tip';\nvar ARROW_TIP_OUTER = 'e-arrow-tip-outer';\nvar ARROW_TIP_INNER = 'e-arrow-tip-inner';\nvar TIP_BOTTOM = 'e-tip-bottom';\nvar TIP_TOP = 'e-tip-top';\nvar TIP_LEFT = 'e-tip-left';\nvar TIP_RIGHT = 'e-tip-right';\nvar POPUP_ROOT = 'e-popup';\nvar POPUP_OPEN = 'e-popup-open';\nvar POPUP_CLOSE = 'e-popup-close';\nvar POPUP_LIB = 'e-lib';\nvar HIDE_POPUP = 'e-hidden';\nvar Animation = /** @class */ (function (_super) {\n __extends(Animation, _super);\n function Animation() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property({ effect: 'FadeIn', duration: 150, delay: 0 })\n ], Animation.prototype, \"open\", void 0);\n __decorate([\n Property({ effect: 'FadeOut', duration: 150, delay: 0 })\n ], Animation.prototype, \"close\", void 0);\n return Animation;\n}(ChildProperty));\nexport { Animation };\n/**\n * Represents the Tooltip component that displays a piece of information about the target element on mouse hover.\n * ```html\n *
Show Tooltip
\n * ```\n * ```typescript\n * \n * ```\n */\nvar Tooltip = /** @class */ (function (_super) {\n __extends(Tooltip, _super);\n /* eslint-enable */\n /**\n * Constructor for creating the Tooltip Component\n *\n * @param {TooltipModel} options - specifies the options for the constructor\n * @param {string| HTMLElement} element - specifies the element for the constructor\n *\n */\n function Tooltip(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.mouseMoveEvent = null;\n _this.mouseMoveTarget = null;\n return _this;\n }\n Tooltip.prototype.initialize = function () {\n this.formatPosition();\n addClass([this.element], ROOT);\n };\n Tooltip.prototype.formatPosition = function () {\n var _a, _b;\n if (this.position.indexOf('Top') === 0 || this.position.indexOf('Bottom') === 0) {\n _a = this.position.split(/(?=[A-Z])/), this.tooltipPositionY = _a[0], this.tooltipPositionX = _a[1];\n }\n else {\n _b = this.position.split(/(?=[A-Z])/), this.tooltipPositionX = _b[0], this.tooltipPositionY = _b[1];\n }\n };\n Tooltip.prototype.renderArrow = function () {\n this.setTipClass(this.position);\n var tip = this.createElement('div', { className: ARROW_TIP + ' ' + this.tipClass });\n tip.appendChild(this.createElement('div', { className: ARROW_TIP_OUTER + ' ' + this.tipClass }));\n tip.appendChild(this.createElement('div', { className: ARROW_TIP_INNER + ' ' + this.tipClass }));\n this.tooltipEle.appendChild(tip);\n };\n Tooltip.prototype.setTipClass = function (position) {\n if (position.indexOf('Right') === 0) {\n this.tipClass = TIP_LEFT;\n }\n else if (position.indexOf('Bottom') === 0) {\n this.tipClass = TIP_TOP;\n }\n else if (position.indexOf('Left') === 0) {\n this.tipClass = TIP_RIGHT;\n }\n else {\n this.tipClass = TIP_BOTTOM;\n }\n };\n Tooltip.prototype.renderPopup = function (target) {\n var elePos = this.mouseTrail ? { top: 0, left: 0 } : this.getTooltipPosition(target);\n this.tooltipEle.classList.remove(POPUP_LIB);\n this.popupObj = new Popup(this.tooltipEle, {\n height: this.height,\n width: this.width,\n position: { X: elePos.left, Y: elePos.top },\n enableRtl: this.enableRtl,\n open: this.openPopupHandler.bind(this),\n close: this.closePopupHandler.bind(this)\n });\n };\n Tooltip.prototype.getTooltipPosition = function (target) {\n this.tooltipEle.style.display = 'block';\n var pos = calculatePosition(target, this.tooltipPositionX, this.tooltipPositionY);\n var offsetPos = this.calculateTooltipOffset(this.position);\n var elePos = this.collisionFlipFit(target, pos.left + offsetPos.left, pos.top + offsetPos.top);\n this.tooltipEle.style.display = '';\n return elePos;\n };\n Tooltip.prototype.windowResize = function () {\n this.reposition(this.findTarget());\n };\n Tooltip.prototype.reposition = function (target) {\n if (this.popupObj && target) {\n var elePos = this.getTooltipPosition(target);\n this.popupObj.position = { X: elePos.left, Y: elePos.top };\n this.popupObj.dataBind();\n }\n };\n Tooltip.prototype.openPopupHandler = function () {\n if (!this.mouseTrail && this.needTemplateReposition()) {\n this.reposition(this.findTarget());\n }\n this.trigger('afterOpen', this.tooltipEventArgs);\n };\n Tooltip.prototype.closePopupHandler = function () {\n this.clearTemplate(['content']);\n this.clear();\n this.trigger('afterClose', this.tooltipEventArgs);\n };\n Tooltip.prototype.calculateTooltipOffset = function (position) {\n var pos = { top: 0, left: 0 };\n var tooltipEleWidth = this.tooltipEle.offsetWidth;\n var tooltipEleHeight = this.tooltipEle.offsetHeight;\n var arrowEle = select('.' + ARROW_TIP, this.tooltipEle);\n var tipWidth = arrowEle ? arrowEle.offsetWidth : 0;\n var tipHeight = arrowEle ? arrowEle.offsetHeight : 0;\n var tipAdjust = (this.showTipPointer ? SHOW_POINTER_TIP_GAP : HIDE_POINTER_TIP_GAP);\n var tipHeightAdjust = (tipHeight / 2) + POINTER_ADJUST + (this.tooltipEle.offsetHeight - this.tooltipEle.clientHeight);\n var tipWidthAdjust = (tipWidth / 2) + POINTER_ADJUST + (this.tooltipEle.offsetWidth - this.tooltipEle.clientWidth);\n if (this.mouseTrail) {\n tipAdjust += MOUSE_TRAIL_GAP;\n }\n switch (position) {\n case 'RightTop':\n pos.left += tipWidth + tipAdjust;\n pos.top -= tooltipEleHeight - tipHeightAdjust;\n break;\n case 'RightCenter':\n pos.left += tipWidth + tipAdjust;\n pos.top -= (tooltipEleHeight / 2);\n break;\n case 'RightBottom':\n pos.left += tipWidth + tipAdjust;\n pos.top -= (tipHeightAdjust);\n break;\n case 'BottomRight':\n pos.top += (tipHeight + tipAdjust);\n pos.left -= (tipWidthAdjust);\n break;\n case 'BottomCenter':\n pos.top += (tipHeight + tipAdjust);\n pos.left -= (tooltipEleWidth / 2);\n break;\n case 'BottomLeft':\n pos.top += (tipHeight + tipAdjust);\n pos.left -= (tooltipEleWidth - tipWidthAdjust);\n break;\n case 'LeftBottom':\n pos.left -= (tipWidth + tooltipEleWidth + tipAdjust);\n pos.top -= (tipHeightAdjust);\n break;\n case 'LeftCenter':\n pos.left -= (tipWidth + tooltipEleWidth + tipAdjust);\n pos.top -= (tooltipEleHeight / 2);\n break;\n case 'LeftTop':\n pos.left -= (tipWidth + tooltipEleWidth + tipAdjust);\n pos.top -= (tooltipEleHeight - tipHeightAdjust);\n break;\n case 'TopLeft':\n pos.top -= (tooltipEleHeight + tipHeight + tipAdjust);\n pos.left -= (tooltipEleWidth - tipWidthAdjust);\n break;\n case 'TopRight':\n pos.top -= (tooltipEleHeight + tipHeight + tipAdjust);\n pos.left -= (tipWidthAdjust);\n break;\n default:\n pos.top -= (tooltipEleHeight + tipHeight + tipAdjust);\n pos.left -= (tooltipEleWidth / 2);\n break;\n }\n pos.left += this.offsetX;\n pos.top += this.offsetY;\n return pos;\n };\n Tooltip.prototype.updateTipPosition = function (position) {\n var selEle = selectAll('.' + ARROW_TIP + ',.' + ARROW_TIP_OUTER + ',.' + ARROW_TIP_INNER, this.tooltipEle);\n var removeList = [TIP_BOTTOM, TIP_TOP, TIP_LEFT, TIP_RIGHT];\n removeClass(selEle, removeList);\n this.setTipClass(position);\n addClass(selEle, this.tipClass);\n };\n Tooltip.prototype.adjustArrow = function (target, position, tooltipPositionX, tooltipPositionY) {\n if (this.showTipPointer === false) {\n return;\n }\n this.updateTipPosition(position);\n var leftValue;\n var topValue;\n this.tooltipEle.style.display = 'block';\n var tooltipWidth = this.tooltipEle.clientWidth;\n var tooltipHeight = this.tooltipEle.clientHeight;\n var arrowEle = select('.' + ARROW_TIP, this.tooltipEle);\n var arrowInnerELe = select('.' + ARROW_TIP_INNER, this.tooltipEle);\n var tipWidth = arrowEle.offsetWidth;\n var tipHeight = arrowEle.offsetHeight;\n this.tooltipEle.style.display = '';\n if (this.tipClass === TIP_BOTTOM || this.tipClass === TIP_TOP) {\n if (this.tipClass === TIP_BOTTOM) {\n topValue = '99.9%';\n // Arrow icon aligned -2px height from ArrowOuterTip div\n arrowInnerELe.style.top = '-' + (tipHeight - 2) + 'px';\n }\n else {\n topValue = -(tipHeight - 1) + 'px';\n // Arrow icon aligned -6px height from ArrowOuterTip div\n arrowInnerELe.style.top = '-' + (tipHeight - 6) + 'px';\n }\n if (target) {\n var tipPosExclude = tooltipPositionX !== 'Center' || (tooltipWidth > target.offsetWidth) || this.mouseTrail;\n if ((tipPosExclude && tooltipPositionX === 'Left') || (!tipPosExclude && this.tipPointerPosition === 'End')) {\n leftValue = (tooltipWidth - tipWidth - POINTER_ADJUST) + 'px';\n }\n else if ((tipPosExclude && tooltipPositionX === 'Right') || (!tipPosExclude && this.tipPointerPosition === 'Start')) {\n leftValue = POINTER_ADJUST + 'px';\n }\n else {\n leftValue = ((tooltipWidth / 2) - (tipWidth / 2)) + 'px';\n }\n }\n }\n else {\n if (this.tipClass === TIP_RIGHT) {\n leftValue = '99.9%';\n // Arrow icon aligned -2px left from ArrowOuterTip div\n arrowInnerELe.style.left = '-' + (tipWidth - 2) + 'px';\n }\n else {\n leftValue = -(tipWidth - 1) + 'px';\n // Arrow icon aligned -2px from ArrowOuterTip width\n arrowInnerELe.style.left = (-(tipWidth) + (tipWidth - 2)) + 'px';\n }\n var tipPosExclude = tooltipPositionY !== 'Center' || (tooltipHeight > target.offsetHeight) || this.mouseTrail;\n if ((tipPosExclude && tooltipPositionY === 'Top') || (!tipPosExclude && this.tipPointerPosition === 'End')) {\n topValue = (tooltipHeight - tipHeight - POINTER_ADJUST) + 'px';\n }\n else if ((tipPosExclude && tooltipPositionY === 'Bottom') || (!tipPosExclude && this.tipPointerPosition === 'Start')) {\n topValue = POINTER_ADJUST + 'px';\n }\n else {\n topValue = ((tooltipHeight / 2) - (tipHeight / 2)) + 'px';\n }\n }\n arrowEle.style.top = topValue;\n arrowEle.style.left = leftValue;\n };\n Tooltip.prototype.renderContent = function (target) {\n var tooltipContent = select('.' + CONTENT, this.tooltipEle);\n if (this.cssClass) {\n addClass([this.tooltipEle], this.cssClass.split(' '));\n }\n if (target && !isNullOrUndefined(target.getAttribute('title'))) {\n target.setAttribute('data-content', target.getAttribute('title'));\n target.removeAttribute('title');\n }\n if (!isNullOrUndefined(this.content)) {\n tooltipContent.innerHTML = '';\n if (this.content instanceof HTMLElement) {\n tooltipContent.appendChild(this.content);\n }\n else if (typeof this.content === 'string') {\n if (this.enableHtmlSanitizer) {\n this.setProperties({ content: SanitizeHtmlHelper.sanitize(this.content) }, true);\n }\n tooltipContent[this.enableHtmlParse ? 'innerHTML' : 'textContent'] = this.content;\n }\n else {\n // eslint-disable-next-line\n var templateFunction = compile(this.content);\n var tempArr = templateFunction({}, this, 'content', this.element.id + 'content', undefined, undefined, tooltipContent);\n if (tempArr) {\n append(tempArr, tooltipContent);\n }\n this.renderReactTemplates();\n }\n }\n else {\n if (target && !isNullOrUndefined(target.getAttribute('data-content'))) {\n tooltipContent.innerHTML = target.getAttribute('data-content');\n }\n }\n };\n Tooltip.prototype.renderCloseIcon = function () {\n if (!this.isSticky) {\n return;\n }\n var tipClose = this.createElement('div', { className: ICON + ' ' + CLOSE });\n this.tooltipEle.appendChild(tipClose);\n EventHandler.add(tipClose, Browser.touchStartEvent, this.onStickyClose, this);\n };\n Tooltip.prototype.addDescribedBy = function (target, id) {\n var describedby = (target.getAttribute('aria-describedby') || '').split(/\\s+/);\n if (describedby.indexOf(id) < 0) {\n describedby.push(id);\n }\n attributes(target, { 'aria-describedby': describedby.join(' ').trim(), 'data-tooltip-id': id });\n };\n Tooltip.prototype.removeDescribedBy = function (target) {\n var id = target.getAttribute('data-tooltip-id');\n var describedby = (target.getAttribute('aria-describedby') || '').split(/\\s+/);\n var index = describedby.indexOf(id);\n if (index !== -1) {\n describedby.splice(index, 1);\n }\n target.removeAttribute('data-tooltip-id');\n var orgdescribedby = describedby.join(' ').trim();\n if (orgdescribedby) {\n target.setAttribute('aria-describedby', orgdescribedby);\n }\n else {\n target.removeAttribute('aria-describedby');\n }\n };\n Tooltip.prototype.tapHoldHandler = function (evt) {\n clearTimeout(this.autoCloseTimer);\n this.targetHover(evt.originalEvent);\n };\n Tooltip.prototype.touchEndHandler = function (e) {\n var _this = this;\n if (this.isSticky) {\n return;\n }\n // eslint-disable-next-line\n var close = function () {\n _this.close();\n };\n this.autoCloseTimer = setTimeout(close, TOUCHEND_HIDE_DELAY);\n };\n Tooltip.prototype.targetClick = function (e) {\n var target;\n if (this.target) {\n target = closest(e.target, this.target);\n }\n else {\n target = this.element;\n }\n if (isNullOrUndefined(target)) {\n return;\n }\n if (target.getAttribute('data-tooltip-id') === null) {\n this.targetHover(e);\n }\n else if (!this.isSticky) {\n this.hideTooltip(this.animation.close, e, target);\n }\n };\n Tooltip.prototype.targetHover = function (e) {\n var target;\n if (this.target) {\n target = closest(e.target, this.target);\n }\n else {\n target = this.element;\n }\n if (isNullOrUndefined(target) || (target.getAttribute('data-tooltip-id') !== null && this.closeDelay === 0)) {\n return;\n }\n var targetList = [].slice.call(selectAll('[data-tooltip-id= \"' + this.ctrlId + '_content\"]', document));\n for (var _i = 0, targetList_1 = targetList; _i < targetList_1.length; _i++) {\n var target_1 = targetList_1[_i];\n this.restoreElement(target_1);\n }\n this.showTooltip(target, this.animation.open, e);\n };\n Tooltip.prototype.mouseMoveBeforeOpen = function (e) {\n this.mouseMoveEvent = e;\n };\n Tooltip.prototype.mouseMoveBeforeRemove = function () {\n if (this.mouseMoveTarget) {\n EventHandler.remove(this.mouseMoveTarget, 'mousemove touchstart', this.mouseMoveBeforeOpen);\n }\n };\n Tooltip.prototype.showTooltip = function (target, showAnimation, e) {\n var _this = this;\n clearTimeout(this.showTimer);\n clearTimeout(this.hideTimer);\n if (this.openDelay && this.mouseTrail) {\n this.mouseMoveBeforeRemove();\n this.mouseMoveTarget = target;\n EventHandler.add(this.mouseMoveTarget, 'mousemove touchstart', this.mouseMoveBeforeOpen, this);\n }\n this.tooltipEventArgs = {\n type: e ? e.type : null, cancel: false, target: target, event: e ? e : null,\n element: this.tooltipEle, isInteracted: !isNullOrUndefined(e)\n };\n // eslint-disable-next-line\n var observeCallback = function (beforeRenderArgs) {\n _this.beforeRenderCallback(beforeRenderArgs, target, e, showAnimation);\n };\n this.trigger('beforeRender', this.tooltipEventArgs, observeCallback.bind(this));\n };\n Tooltip.prototype.beforeRenderCallback = function (beforeRenderArgs, target, e, showAnimation) {\n if (beforeRenderArgs.cancel) {\n this.isHidden = true;\n this.clear();\n this.mouseMoveBeforeRemove();\n }\n else {\n this.isHidden = false;\n if (isNullOrUndefined(this.tooltipEle)) {\n this.ctrlId = this.element.getAttribute('id') ?\n getUniqueID(this.element.getAttribute('id')) : getUniqueID('tooltip');\n this.tooltipEle = this.createElement('div', {\n className: TOOLTIP_WRAP + ' ' + POPUP_ROOT + ' ' + POPUP_LIB, attrs: {\n role: 'tooltip', 'aria-hidden': 'false', 'id': this.ctrlId + '_content'\n }, styles: 'width:' +\n formatUnit(this.width) + ';height:' + formatUnit(this.height) + ';position:absolute;'\n });\n this.tooltipBeforeRender(target, this);\n this.tooltipAfterRender(target, e, showAnimation, this);\n }\n else {\n if (target) {\n this.adjustArrow(target, this.position, this.tooltipPositionX, this.tooltipPositionY);\n this.addDescribedBy(target, this.ctrlId + '_content');\n this.renderContent(target);\n PopupAnimation.stop(this.tooltipEle);\n this.reposition(target);\n this.tooltipAfterRender(target, e, showAnimation, this);\n }\n }\n }\n };\n Tooltip.prototype.tooltipBeforeRender = function (target, ctrlObj) {\n if (target) {\n if (Browser.isDevice) {\n addClass([ctrlObj.tooltipEle], DEVICE);\n }\n if (ctrlObj.width !== 'auto') {\n ctrlObj.tooltipEle.style.maxWidth = formatUnit(ctrlObj.width);\n }\n ctrlObj.tooltipEle.appendChild(ctrlObj.createElement('div', { className: CONTENT }));\n document.body.appendChild(ctrlObj.tooltipEle);\n removeClass([ctrlObj.tooltipEle], HIDE_POPUP);\n ctrlObj.addDescribedBy(target, ctrlObj.ctrlId + '_content');\n ctrlObj.renderContent(target);\n addClass([ctrlObj.tooltipEle], POPUP_OPEN);\n if (ctrlObj.showTipPointer) {\n ctrlObj.renderArrow();\n }\n ctrlObj.renderCloseIcon();\n ctrlObj.renderPopup(target);\n ctrlObj.adjustArrow(target, ctrlObj.position, ctrlObj.tooltipPositionX, ctrlObj.tooltipPositionY);\n PopupAnimation.stop(ctrlObj.tooltipEle);\n ctrlObj.reposition(target);\n }\n };\n Tooltip.prototype.tooltipAfterRender = function (target, e, showAnimation, ctrlObj) {\n if (target) {\n removeClass([ctrlObj.tooltipEle], POPUP_OPEN);\n addClass([ctrlObj.tooltipEle], POPUP_CLOSE);\n ctrlObj.tooltipEventArgs = {\n type: e ? e.type : null, cancel: false, target: target, event: e ? e : null,\n element: ctrlObj.tooltipEle, isInteracted: !isNullOrUndefined(e)\n };\n if (ctrlObj.needTemplateReposition() && !ctrlObj.mouseTrail) {\n ctrlObj.tooltipEle.style.display = 'none';\n }\n // eslint-disable-next-line\n var observeCallback = function (observedArgs) {\n ctrlObj.beforeOpenCallback(observedArgs, target, showAnimation, e);\n };\n ctrlObj.trigger('beforeOpen', ctrlObj.tooltipEventArgs, observeCallback.bind(ctrlObj));\n }\n };\n Tooltip.prototype.beforeOpenCallback = function (observedArgs, target, showAnimation, e) {\n var _this = this;\n if (observedArgs.cancel) {\n this.isHidden = true;\n this.clear();\n this.mouseMoveBeforeRemove();\n this.restoreElement(target);\n }\n else {\n // eslint-disable-next-line\n var openAnimation_1 = {\n name: showAnimation.effect,\n duration: showAnimation.duration,\n delay: showAnimation.delay,\n timingFunction: 'easeOut'\n };\n if (showAnimation.effect === 'None') {\n openAnimation_1 = undefined;\n }\n if (this.openDelay > 0) {\n // eslint-disable-next-line\n var show = function () {\n if (_this.mouseTrail) {\n EventHandler.add(target, 'mousemove touchstart mouseenter', _this.onMouseMove, _this);\n }\n if (_this.popupObj) {\n _this.popupObj.show(openAnimation_1, target);\n if (_this.mouseMoveEvent && _this.mouseTrail) {\n _this.onMouseMove(_this.mouseMoveEvent);\n }\n }\n };\n this.showTimer = setTimeout(show, this.openDelay);\n }\n else {\n if (this.popupObj) {\n this.popupObj.show(openAnimation_1, target);\n }\n }\n }\n if (e) {\n this.wireMouseEvents(e, target);\n }\n };\n Tooltip.prototype.needTemplateReposition = function () {\n // eslint-disable-next-line\n var tooltip = this;\n return !isNullOrUndefined(tooltip.viewContainerRef)\n && typeof tooltip.viewContainerRef !== 'string';\n };\n Tooltip.prototype.checkCollision = function (target, x, y) {\n var elePos = {\n left: x, top: y, position: this.position,\n horizontal: this.tooltipPositionX, vertical: this.tooltipPositionY\n };\n var affectedPos = isCollide(this.tooltipEle, this.checkCollideTarget(), x, y);\n if (affectedPos.length > 0) {\n elePos.horizontal = affectedPos.indexOf('left') >= 0 ? 'Right' : affectedPos.indexOf('right') >= 0 ? 'Left' :\n this.tooltipPositionX;\n elePos.vertical = affectedPos.indexOf('top') >= 0 ? 'Bottom' : affectedPos.indexOf('bottom') >= 0 ? 'Top' :\n this.tooltipPositionY;\n }\n return elePos;\n };\n Tooltip.prototype.collisionFlipFit = function (target, x, y) {\n var elePos = this.checkCollision(target, x, y);\n var newpos = elePos.position;\n if (this.tooltipPositionY !== elePos.vertical) {\n newpos = ((this.position.indexOf('Bottom') === 0 || this.position.indexOf('Top') === 0) ?\n elePos.vertical + this.tooltipPositionX : this.tooltipPositionX + elePos.vertical);\n }\n if (this.tooltipPositionX !== elePos.horizontal) {\n if (newpos.indexOf('Left') === 0) {\n elePos.vertical = (newpos === 'LeftTop' || newpos === 'LeftCenter') ? 'Top' : 'Bottom';\n newpos = (elePos.vertical + 'Left');\n }\n if (newpos.indexOf('Right') === 0) {\n elePos.vertical = (newpos === 'RightTop' || newpos === 'RightCenter') ? 'Top' : 'Bottom';\n newpos = (elePos.vertical + 'Right');\n }\n elePos.horizontal = this.tooltipPositionX;\n }\n this.tooltipEventArgs = {\n type: null, cancel: false, target: target, event: null,\n element: this.tooltipEle, collidedPosition: newpos\n };\n this.trigger('beforeCollision', this.tooltipEventArgs);\n if (elePos.position !== newpos) {\n var pos = calculatePosition(target, elePos.horizontal, elePos.vertical);\n this.adjustArrow(target, newpos, elePos.horizontal, elePos.vertical);\n var offsetPos = this.calculateTooltipOffset(newpos);\n offsetPos.top -= (('TopBottom'.indexOf(this.position.split(/(?=[A-Z])/)[0]) !== -1) &&\n ('TopBottom'.indexOf(newpos.split(/(?=[A-Z])/)[0]) !== -1)) ? (2 * this.offsetY) : 0;\n offsetPos.left -= (('RightLeft'.indexOf(this.position.split(/(?=[A-Z])/)[0]) !== -1) &&\n ('RightLeft'.indexOf(newpos.split(/(?=[A-Z])/)[0]) !== -1)) ? (2 * this.offsetX) : 0;\n elePos.position = newpos;\n elePos.left = pos.left + offsetPos.left;\n elePos.top = pos.top + offsetPos.top;\n }\n else {\n this.adjustArrow(target, newpos, elePos.horizontal, elePos.vertical);\n }\n var eleOffset = { left: elePos.left, top: elePos.top };\n var left = fit(this.tooltipEle, this.checkCollideTarget(), { X: true, Y: false }, eleOffset).left;\n this.tooltipEle.style.display = 'block';\n if (this.showTipPointer && (newpos.indexOf('Bottom') === 0 || newpos.indexOf('Top') === 0)) {\n var arrowEle = select('.' + ARROW_TIP, this.tooltipEle);\n var arrowleft = parseInt(arrowEle.style.left, 10) - (left - elePos.left);\n if (arrowleft < 0) {\n arrowleft = 0;\n }\n else if ((arrowleft + arrowEle.offsetWidth) > this.tooltipEle.clientWidth) {\n arrowleft = this.tooltipEle.clientWidth - arrowEle.offsetWidth;\n }\n arrowEle.style.left = arrowleft.toString() + 'px';\n }\n this.tooltipEle.style.display = '';\n eleOffset.left = left;\n return eleOffset;\n };\n Tooltip.prototype.checkCollideTarget = function () {\n return !this.windowCollision && this.target ? this.element : null;\n };\n Tooltip.prototype.hideTooltip = function (hideAnimation, e, targetElement) {\n var _this = this;\n if (this.closeDelay > 0) {\n clearTimeout(this.hideTimer);\n clearTimeout(this.showTimer);\n // eslint-disable-next-line\n var hide = function () {\n if (_this.closeDelay && _this.tooltipEle && _this.isTooltipOpen) {\n return;\n }\n _this.tooltipHide(hideAnimation, e, targetElement);\n };\n this.hideTimer = setTimeout(hide, this.closeDelay);\n }\n else {\n this.tooltipHide(hideAnimation, e, targetElement);\n }\n };\n Tooltip.prototype.tooltipHide = function (hideAnimation, e, targetElement) {\n var _this = this;\n var target;\n if (e) {\n target = this.target ? (targetElement || e.target) : this.element;\n }\n else {\n target = select('[data-tooltip-id= \"' + this.ctrlId + '_content\"]', document);\n }\n this.tooltipEventArgs = {\n type: e ? e.type : null, cancel: false, target: target, event: e ? e : null,\n element: this.tooltipEle, isInteracted: !isNullOrUndefined(e)\n };\n // this line commented for close the tooltip popup element even the target element destroyed in a page.\n //if (isNullOrUndefined(target)) { return; }\n this.trigger('beforeClose', this.tooltipEventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n _this.mouseMoveBeforeRemove();\n _this.popupHide(hideAnimation, target);\n }\n else {\n _this.isHidden = false;\n }\n });\n };\n Tooltip.prototype.popupHide = function (hideAnimation, target) {\n if (target) {\n this.restoreElement(target);\n }\n this.isHidden = true;\n // eslint-disable-next-line\n var closeAnimation = {\n name: hideAnimation.effect,\n duration: hideAnimation.duration,\n delay: hideAnimation.delay,\n timingFunction: 'easeIn'\n };\n if (hideAnimation.effect === 'None') {\n closeAnimation = undefined;\n }\n if (this.popupObj) {\n this.popupObj.hide(closeAnimation);\n }\n };\n Tooltip.prototype.restoreElement = function (target) {\n this.unwireMouseEvents(target);\n if (!isNullOrUndefined(target.getAttribute('data-content'))) {\n target.setAttribute('title', target.getAttribute('data-content'));\n target.removeAttribute('data-content');\n }\n this.removeDescribedBy(target);\n };\n Tooltip.prototype.clear = function () {\n if (this.tooltipEle) {\n removeClass([this.tooltipEle], POPUP_CLOSE);\n addClass([this.tooltipEle], POPUP_OPEN);\n }\n if (this.isHidden) {\n if (this.popupObj) {\n this.popupObj.destroy();\n }\n if (this.tooltipEle) {\n remove(this.tooltipEle);\n }\n this.tooltipEle = null;\n this.popupObj = null;\n }\n };\n Tooltip.prototype.tooltipHover = function (e) {\n if (this.tooltipEle) {\n this.isTooltipOpen = true;\n }\n };\n Tooltip.prototype.tooltipMouseOut = function (e) {\n this.isTooltipOpen = false;\n this.hideTooltip(this.animation.close, e, this.findTarget());\n };\n Tooltip.prototype.onMouseOut = function (e) {\n var enteredElement = e.relatedTarget;\n // don't close the tooltip only if it is tooltip content element\n if (enteredElement && !this.mouseTrail) {\n var checkForTooltipElement = closest(enteredElement, \".\" + TOOLTIP_WRAP + \".\" + POPUP_LIB + \".\" + POPUP_ROOT);\n if (checkForTooltipElement) {\n EventHandler.add(checkForTooltipElement, 'mouseleave', this.tooltipElementMouseOut, this);\n }\n else {\n this.hideTooltip(this.animation.close, e, this.findTarget());\n if (this.closeDelay === 0) {\n this.clear();\n }\n }\n }\n else {\n this.hideTooltip(this.animation.close, e, this.findTarget());\n this.clear();\n }\n };\n Tooltip.prototype.tooltipElementMouseOut = function (e) {\n this.hideTooltip(this.animation.close, e, this.findTarget());\n EventHandler.remove(this.element, 'mouseleave', this.tooltipElementMouseOut);\n this.clear();\n };\n Tooltip.prototype.onStickyClose = function (e) {\n this.close();\n };\n Tooltip.prototype.onMouseMove = function (event) {\n var eventPageX = 0;\n var eventPageY = 0;\n if (event.type.indexOf('touch') > -1) {\n event.preventDefault();\n eventPageX = event.touches[0].pageX;\n eventPageY = event.touches[0].pageY;\n }\n else {\n eventPageX = event.pageX;\n eventPageY = event.pageY;\n }\n PopupAnimation.stop(this.tooltipEle);\n removeClass([this.tooltipEle], POPUP_CLOSE);\n addClass([this.tooltipEle], POPUP_OPEN);\n this.adjustArrow(event.target, this.position, this.tooltipPositionX, this.tooltipPositionY);\n var pos = this.calculateTooltipOffset(this.position);\n var x = eventPageX + pos.left + this.offsetX;\n var y = eventPageY + pos.top + this.offsetY;\n var elePos = this.checkCollision(event.target, x, y);\n if (this.tooltipPositionX !== elePos.horizontal || this.tooltipPositionY !== elePos.vertical) {\n var newpos = (this.position.indexOf('Bottom') === 0 || this.position.indexOf('Top') === 0) ?\n elePos.vertical + elePos.horizontal : elePos.horizontal + elePos.vertical;\n elePos.position = newpos;\n this.adjustArrow(event.target, elePos.position, elePos.horizontal, elePos.vertical);\n var colpos = this.calculateTooltipOffset(elePos.position);\n elePos.left = eventPageX + colpos.left - this.offsetX;\n elePos.top = eventPageY + colpos.top - this.offsetY;\n }\n this.tooltipEle.style.left = elePos.left + 'px';\n this.tooltipEle.style.top = elePos.top + 'px';\n };\n Tooltip.prototype.keyDown = function (event) {\n if (this.tooltipEle && event.keyCode === 27) {\n this.close();\n }\n };\n Tooltip.prototype.touchEnd = function (e) {\n if (this.tooltipEle && closest(e.target, '.' + ROOT) === null && !this.isSticky) {\n this.close();\n }\n };\n Tooltip.prototype.scrollHandler = function (e) {\n if (this.tooltipEle) {\n if (!(closest(e.target, \".\" + TOOLTIP_WRAP + \".\" + POPUP_LIB + \".\" + POPUP_ROOT))) {\n this.close();\n }\n }\n };\n /**\n * Core method that initializes the control rendering.\n *\n * @private\n * @returns {void}\n */\n Tooltip.prototype.render = function () {\n this.initialize();\n this.wireEvents(this.opensOn);\n this.renderComplete();\n };\n /**\n * Initializes the values of private members.\n *\n * @private\n * @returns {void}\n */\n Tooltip.prototype.preRender = function () {\n this.tipClass = TIP_BOTTOM;\n this.tooltipPositionX = 'Center';\n this.tooltipPositionY = 'Top';\n this.isHidden = true;\n };\n /**\n * Binding events to the Tooltip element.\n *\n * @hidden\n * @param {string} trigger - specify the trigger string to the function\n * @returns {void}\n *\n */\n Tooltip.prototype.wireEvents = function (trigger) {\n var triggerList = this.getTriggerList(trigger);\n for (var _i = 0, triggerList_1 = triggerList; _i < triggerList_1.length; _i++) {\n var opensOn = triggerList_1[_i];\n if (opensOn === 'Custom') {\n return;\n }\n if (opensOn === 'Focus') {\n this.wireFocusEvents();\n }\n if (opensOn === 'Click') {\n EventHandler.add(this.element, Browser.touchStartEvent, this.targetClick, this);\n }\n if (opensOn === 'Hover') {\n if (Browser.isDevice) {\n this.touchModule = new Touch(this.element, {\n tapHoldThreshold: TAPHOLD_THRESHOLD,\n tapHold: this.tapHoldHandler.bind(this)\n });\n EventHandler.add(this.element, Browser.touchEndEvent, this.touchEndHandler, this);\n }\n else {\n EventHandler.add(this.element, 'mouseover', this.targetHover, this);\n }\n }\n }\n EventHandler.add(document, 'touchend', this.touchEnd, this);\n EventHandler.add(document, 'scroll wheel', this.scrollHandler, this);\n EventHandler.add(window, 'resize', this.windowResize, this);\n EventHandler.add(document, 'keydown', this.keyDown, this);\n };\n Tooltip.prototype.getTriggerList = function (trigger) {\n if (trigger === 'Auto') {\n trigger = (Browser.isDevice) ? 'Hover' : 'Hover Focus';\n }\n return trigger.split(' ');\n };\n Tooltip.prototype.wireFocusEvents = function () {\n if (!isNullOrUndefined(this.target)) {\n var targetList = [].slice.call(selectAll(this.target, this.element));\n for (var _i = 0, targetList_2 = targetList; _i < targetList_2.length; _i++) {\n var target = targetList_2[_i];\n EventHandler.add(target, 'focus', this.targetHover, this);\n }\n }\n else {\n EventHandler.add(this.element, 'focus', this.targetHover, this);\n }\n };\n Tooltip.prototype.wireMouseEvents = function (e, target) {\n if (this.tooltipEle) {\n if (!this.isSticky) {\n if (e.type === 'focus') {\n EventHandler.add(target, 'blur', this.onMouseOut, this);\n }\n if (e.type === 'mouseover') {\n EventHandler.add(target, 'mouseleave', this.onMouseOut, this);\n }\n if (this.closeDelay) {\n EventHandler.add(this.tooltipEle, 'mouseenter', this.tooltipHover, this);\n EventHandler.add(this.tooltipEle, 'mouseleave', this.tooltipMouseOut, this);\n }\n }\n if (this.mouseTrail && this.openDelay === 0) {\n EventHandler.add(target, 'mousemove touchstart mouseenter', this.onMouseMove, this);\n }\n }\n };\n /**\n * Unbinding events from the element on widget destroy.\n *\n * @hidden\n *\n * @param {string} trigger - specify the trigger string to the function\n * @returns {void}\n *\n */\n Tooltip.prototype.unwireEvents = function (trigger) {\n var triggerList = this.getTriggerList(trigger);\n for (var _i = 0, triggerList_2 = triggerList; _i < triggerList_2.length; _i++) {\n var opensOn = triggerList_2[_i];\n if (opensOn === 'Custom') {\n return;\n }\n if (opensOn === 'Focus') {\n this.unwireFocusEvents();\n }\n if (opensOn === 'Click') {\n EventHandler.remove(this.element, Browser.touchStartEvent, this.targetClick);\n }\n if (opensOn === 'Hover') {\n if (Browser.isDevice) {\n if (this.touchModule) {\n this.touchModule.destroy();\n }\n EventHandler.remove(this.element, Browser.touchEndEvent, this.touchEndHandler);\n }\n else {\n EventHandler.remove(this.element, 'mouseover', this.targetHover);\n }\n }\n }\n EventHandler.remove(document, 'touchend', this.touchEnd);\n EventHandler.remove(document, 'scroll wheel', this.scrollHandler);\n EventHandler.remove(window, 'resize', this.windowResize);\n EventHandler.remove(document, 'keydown', this.keyDown);\n };\n Tooltip.prototype.unwireFocusEvents = function () {\n if (!isNullOrUndefined(this.target)) {\n var targetList = [].slice.call(selectAll(this.target, this.element));\n for (var _i = 0, targetList_3 = targetList; _i < targetList_3.length; _i++) {\n var target = targetList_3[_i];\n EventHandler.remove(target, 'focus', this.targetHover);\n }\n }\n else {\n EventHandler.remove(this.element, 'focus', this.targetHover);\n }\n };\n Tooltip.prototype.unwireMouseEvents = function (target) {\n if (!this.isSticky) {\n var triggerList = this.getTriggerList(this.opensOn);\n for (var _i = 0, triggerList_3 = triggerList; _i < triggerList_3.length; _i++) {\n var opensOn = triggerList_3[_i];\n if (opensOn === 'Focus') {\n EventHandler.remove(target, 'blur', this.onMouseOut);\n }\n if (opensOn === 'Hover' && !Browser.isDevice) {\n EventHandler.remove(target, 'mouseleave', this.onMouseOut);\n }\n }\n if (this.closeDelay) {\n EventHandler.remove(target, 'mouseenter', this.tooltipHover);\n EventHandler.remove(target, 'mouseleave', this.tooltipMouseOut);\n }\n }\n if (this.mouseTrail) {\n EventHandler.remove(target, 'mousemove touchstart mouseenter', this.onMouseMove);\n }\n };\n Tooltip.prototype.findTarget = function () {\n var target = select('[data-tooltip-id= \"' + this.ctrlId + '_content\"]', document);\n return target;\n };\n /**\n * Core method to return the component name.\n *\n * @private\n *\n * @returns {string} - this method returns module name.\n */\n Tooltip.prototype.getModuleName = function () {\n return 'tooltip';\n };\n /**\n * Returns the properties to be maintained in the persisted state.\n *\n * @private\n *\n * @returns {string} - this method returns persisted data.\n */\n Tooltip.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Called internally, if any of the property value changed.\n *\n * @private\n *\n * @param {TooltipModel} newProp - this param gives new property values to the method\n * @param {TooltipModel} oldProp - this param gives old property values to the method\n * @returns {void}\n *\n */\n Tooltip.prototype.onPropertyChanged = function (newProp, oldProp) {\n var targetElement = this.findTarget();\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n if (this.tooltipEle && targetElement) {\n this.tooltipEle.style.width = this.tooltipEle.style.maxWidth = formatUnit(newProp.width);\n this.reposition(targetElement);\n }\n break;\n case 'height':\n if (this.tooltipEle && targetElement) {\n this.tooltipEle.style.height = formatUnit(newProp.height);\n this.reposition(targetElement);\n }\n break;\n case 'content':\n if (this.tooltipEle) {\n this.renderContent();\n }\n break;\n case 'opensOn':\n this.unwireEvents(oldProp.opensOn);\n this.wireEvents(newProp.opensOn);\n break;\n case 'position':\n this.formatPosition();\n if (this.tooltipEle && targetElement) {\n var arrowInnerELe = select('.' + ARROW_TIP_INNER, this.tooltipEle);\n arrowInnerELe.style.top = arrowInnerELe.style.left = null;\n this.reposition(targetElement);\n }\n break;\n case 'tipPointerPosition':\n if (this.tooltipEle && targetElement) {\n this.reposition(targetElement);\n }\n break;\n case 'offsetX':\n if (this.tooltipEle) {\n var x = newProp.offsetX - oldProp.offsetX;\n this.tooltipEle.style.left = (parseInt(this.tooltipEle.style.left, 10) + (x)).toString() + 'px';\n }\n break;\n case 'offsetY':\n if (this.tooltipEle) {\n var y = newProp.offsetY - oldProp.offsetY;\n this.tooltipEle.style.top = (parseInt(this.tooltipEle.style.top, 10) + (y)).toString() + 'px';\n }\n break;\n case 'cssClass':\n if (this.tooltipEle) {\n if (oldProp.cssClass) {\n removeClass([this.tooltipEle], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([this.tooltipEle], newProp.cssClass.split(' '));\n }\n }\n break;\n case 'enableRtl':\n if (this.tooltipEle) {\n if (this.enableRtl) {\n addClass([this.tooltipEle], RTL);\n }\n else {\n removeClass([this.tooltipEle], RTL);\n }\n }\n break;\n }\n }\n };\n /**\n * It is used to show the Tooltip on the specified target with specific animation settings.\n *\n * @param {HTMLElement} element - Target element where the Tooltip is to be displayed. (It is an optional parameter)\n * @param {TooltipAnimationSettings} animation - Sets the specific animation, while showing the Tooltip on the screen. (It is an optional parameter)\n * @returns {void}\n */\n Tooltip.prototype.open = function (element, animation) {\n if (isNullOrUndefined(animation)) {\n animation = this.animation.open;\n }\n if (isNullOrUndefined(element)) {\n element = this.element;\n }\n if (element.style.display === 'none') {\n return;\n }\n this.showTooltip(element, animation);\n };\n /**\n * It is used to hide the Tooltip with specific animation effect.\n *\n * @param {TooltipAnimationSettings} animation - Sets the specific animation when hiding Tooltip from the screen. (It is an optional parameter)\n * @returns {void}\n */\n Tooltip.prototype.close = function (animation) {\n if (!animation) {\n animation = this.animation.close;\n }\n this.hideTooltip(animation);\n };\n /**\n * It is used to refresh the Tooltip content and its position.\n *\n * @param {HTMLElement} target - Target element where the Tooltip content or position needs to be refreshed.\n * @returns {void}\n */\n Tooltip.prototype.refresh = function (target) {\n if (this.tooltipEle) {\n this.renderContent(target);\n }\n if (this.popupObj && target) {\n this.reposition(target);\n }\n };\n /**\n * It is used to destroy the Tooltip component.\n * @method destroy\n * @returns {void}\n * @memberof Tooltip\n */\n Tooltip.prototype.destroy = function () {\n _super.prototype.destroy.call(this);\n if (this.tooltipEle) {\n remove(this.tooltipEle);\n }\n if (this.popupObj) {\n this.popupObj.destroy();\n }\n removeClass([this.element], ROOT);\n this.unwireEvents(this.opensOn);\n this.unwireMouseEvents(this.element);\n this.tooltipEle = null;\n this.popupObj = null;\n };\n __decorate([\n Property('auto')\n ], Tooltip.prototype, \"width\", void 0);\n __decorate([\n Property('auto')\n ], Tooltip.prototype, \"height\", void 0);\n __decorate([\n Property()\n ], Tooltip.prototype, \"content\", void 0);\n __decorate([\n Property()\n ], Tooltip.prototype, \"target\", void 0);\n __decorate([\n Property('TopCenter')\n ], Tooltip.prototype, \"position\", void 0);\n __decorate([\n Property(0)\n ], Tooltip.prototype, \"offsetX\", void 0);\n __decorate([\n Property(0)\n ], Tooltip.prototype, \"offsetY\", void 0);\n __decorate([\n Property(true)\n ], Tooltip.prototype, \"showTipPointer\", void 0);\n __decorate([\n Property(true)\n ], Tooltip.prototype, \"enableHtmlParse\", void 0);\n __decorate([\n Property(false)\n ], Tooltip.prototype, \"windowCollision\", void 0);\n __decorate([\n Property('Auto')\n ], Tooltip.prototype, \"tipPointerPosition\", void 0);\n __decorate([\n Property('Auto')\n ], Tooltip.prototype, \"opensOn\", void 0);\n __decorate([\n Property(false)\n ], Tooltip.prototype, \"mouseTrail\", void 0);\n __decorate([\n Property(false)\n ], Tooltip.prototype, \"isSticky\", void 0);\n __decorate([\n Complex({}, Animation)\n ], Tooltip.prototype, \"animation\", void 0);\n __decorate([\n Property(0)\n ], Tooltip.prototype, \"openDelay\", void 0);\n __decorate([\n Property(0)\n ], Tooltip.prototype, \"closeDelay\", void 0);\n __decorate([\n Property()\n ], Tooltip.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], Tooltip.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"beforeRender\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"afterOpen\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"beforeClose\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"afterClose\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"beforeCollision\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"destroyed\", void 0);\n Tooltip = __decorate([\n NotifyPropertyChanges\n ], Tooltip);\n return Tooltip;\n}(Component));\nexport { Tooltip };\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { isNullOrUndefined, append, createElement, addClass } from '@syncfusion/ej2-base';\nimport { Tooltip } from '@syncfusion/ej2-popups';\nimport * as cls from '../base/css-constant';\nimport * as util from '../base/util';\n/**\n * Tooltip for Schedule\n */\nvar EventTooltip = /** @class */ (function () {\n function EventTooltip(parent) {\n this.parent = parent;\n this.tooltipObj = new Tooltip({\n animation: { close: { effect: 'FadeOut' } },\n content: 'No title',\n position: 'BottomRight',\n offsetY: 10,\n mouseTrail: this.parent.isAdaptive ? false : true,\n showTipPointer: false,\n cssClass: this.parent.cssClass + ' ' + cls.EVENT_TOOLTIP_ROOT_CLASS,\n target: this.getTargets(),\n beforeRender: this.onBeforeRender.bind(this),\n beforeClose: this.onBeforeClose.bind(this),\n enableRtl: this.parent.enableRtl\n });\n this.tooltipObj.appendTo(this.parent.element);\n }\n EventTooltip.prototype.getTargets = function () {\n var targets = [];\n if (this.parent.activeViewOptions.group.headerTooltipTemplate) {\n targets.push('.' + cls.RESOURCE_CELLS_CLASS);\n }\n if (this.parent.eventSettings.enableTooltip) {\n targets.push('.' + cls.APPOINTMENT_CLASS);\n }\n return targets.join(',');\n };\n EventTooltip.prototype.onBeforeRender = function (args) {\n if (!isNullOrUndefined(args.target.getAttribute('data-tooltip-id'))) {\n return;\n }\n if (args.target.classList.contains(cls.RESOURCE_CELLS_CLASS) && this.parent.activeViewOptions.group.resources.length > 0) {\n var resCollection = void 0;\n if (this.parent.activeView.isTimelineView()) {\n var index = parseInt(args.target.getAttribute('data-group-index'), 10);\n resCollection = this.parent.resourceBase.lastResourceLevel[index];\n }\n else {\n var rowIndex = args.target.parentNode.sectionRowIndex;\n var cellIndex = args.target.cellIndex;\n resCollection = this.parent.activeView.getColumnLevels()[rowIndex][cellIndex];\n }\n var data = {\n resource: resCollection.resource,\n resourceData: resCollection.resourceData\n };\n var contentContainer = createElement('div');\n var templateId = this.parent.element.id + '_headerTooltipTemplate';\n var tooltipTemplate = [].slice.call(this.parent.getHeaderTooltipTemplate()(data, this.parent, 'headerTooltipTemplate', templateId, false));\n append(tooltipTemplate, contentContainer);\n this.setContent(contentContainer);\n this.parent.renderTemplates();\n return;\n }\n var record = this.parent.eventBase.getEventByGuid(args.target.getAttribute('data-guid'));\n if (isNullOrUndefined(record)) {\n return;\n }\n if (!isNullOrUndefined(this.parent.eventSettings.tooltipTemplate)) {\n var contentContainer = createElement('div');\n var templateId = this.parent.element.id + '_tooltipTemplate';\n var tooltipTemplate = [].slice.call(this.parent.getEventTooltipTemplate()(record, this.parent, 'tooltipTemplate', templateId, false));\n append(tooltipTemplate, contentContainer);\n this.setContent(contentContainer);\n }\n else {\n var globalize = this.parent.globalize;\n var fields = this.parent.eventFields;\n var eventStart = new Date('' + record[fields.startTime]);\n var eventEnd = new Date('' + record[fields.endTime]);\n eventEnd = (eventEnd.getHours() === 0 && eventEnd.getMinutes() === 0) ? new Date(eventEnd.setMilliseconds(-1000)) : eventEnd;\n var startDate = util.resetTime(new Date('' + eventStart));\n var endDate = util.resetTime(new Date('' + eventEnd));\n var tooltipSubject = (record[fields.subject] || this.parent.eventSettings.fields.subject.default\n || this.parent.localeObj.getConstant('addTitle'));\n var tooltipLocation = !isNullOrUndefined(record[fields.location]) ? record[fields.location] : '';\n var startMonthDate = '';\n var startMonthYearDate = '';\n var endMonthYearDate = '';\n startMonthDate = globalize.formatDate(eventStart, {\n type: 'date', skeleton: 'MMMd', calendar: this.parent.getCalendarMode()\n });\n startMonthYearDate = globalize.formatDate(eventStart, {\n type: 'date', skeleton: 'medium', calendar: this.parent.getCalendarMode()\n });\n endMonthYearDate = globalize.formatDate(eventEnd, {\n type: 'date', skeleton: 'medium', calendar: this.parent.getCalendarMode()\n });\n startMonthDate = util.capitalizeFirstWord(startMonthDate, 'single');\n startMonthYearDate = util.capitalizeFirstWord(startMonthYearDate, 'single');\n endMonthYearDate = util.capitalizeFirstWord(endMonthYearDate, 'single');\n var skeleton = 'short';\n var startTime = globalize.formatDate(eventStart, {\n type: 'time', skeleton: skeleton, calendar: this.parent.getCalendarMode()\n });\n var endTime = globalize.formatDate(eventEnd, {\n type: 'time', skeleton: skeleton, calendar: this.parent.getCalendarMode()\n });\n var tooltipDetails = void 0;\n if (startDate.getTime() === endDate.getTime()) {\n tooltipDetails =\n globalize.formatDate(eventStart, {\n type: 'date', skeleton: 'long', calendar: this.parent.getCalendarMode()\n });\n tooltipDetails = util.capitalizeFirstWord(tooltipDetails, 'single');\n }\n else {\n tooltipDetails = (startDate.getFullYear() === endDate.getFullYear()) ? (startMonthDate + ' - ' + endMonthYearDate) :\n (startMonthYearDate + ' - ' + endMonthYearDate);\n }\n var tooltipTime = (record[fields.isAllDay]) ? this.parent.localeObj.getConstant('allDay') :\n (startTime + ' - ' + endTime);\n var content = '
' + tooltipSubject + '
' +\n '
' + tooltipLocation + '
' +\n '
' + tooltipDetails + '
' +\n '
' + tooltipTime + '
';\n this.setContent(content);\n }\n this.parent.renderTemplates();\n };\n EventTooltip.prototype.onBeforeClose = function () {\n this.parent.resetTemplates(['tooltipTemplate', 'headerTooltipTemplate']);\n };\n EventTooltip.prototype.setContent = function (content) {\n this.tooltipObj.setProperties({ content: content }, true);\n };\n EventTooltip.prototype.close = function () {\n this.tooltipObj.close();\n };\n EventTooltip.prototype.destroy = function () {\n this.tooltipObj.destroy();\n addClass([this.parent.element], 'e-control');\n this.tooltipObj = null;\n this.parent = null;\n };\n return EventTooltip;\n}());\nexport { EventTooltip };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';\nimport { Event, EventHandler, isNullOrUndefined, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { addClass, detach, getUniqueID, isRippleEnabled, removeClass, rippleEffect, closest } from '@syncfusion/ej2-base';\nimport { wrapperInitialize, rippleMouseHandler, setHiddenInput } from './../common/common';\nvar CHECK = 'e-check';\nvar DISABLED = 'e-checkbox-disabled';\nvar FRAME = 'e-frame';\nvar INDETERMINATE = 'e-stop';\nvar LABEL = 'e-label';\nvar RIPPLE = 'e-ripple-container';\nvar RIPPLECHECK = 'e-ripple-check';\nvar RIPPLEINDETERMINATE = 'e-ripple-stop';\nvar RTL = 'e-rtl';\nvar WRAPPER = 'e-checkbox-wrapper';\nvar containerAttr = ['title', 'class', 'style', 'disabled', 'readonly', 'name', 'value'];\n/**\n * The CheckBox is a graphical user interface element that allows you to select one or more options from the choices.\n * It contains checked, unchecked, and indeterminate states.\n * ```html\n *
\n * \n * ```\n */\nvar CheckBox = /** @class */ (function (_super) {\n __extends(CheckBox, _super);\n /**\n * Constructor for creating the widget\n *\n * @private\n * @param {CheckBoxModel} options - Specifies checkbox model\n * @param {string | HTMLInputElement} element - Specifies target element\n */\n function CheckBox(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isFocused = false;\n _this.isMouseClick = false;\n return _this;\n }\n CheckBox.prototype.changeState = function (state) {\n var ariaState;\n var rippleSpan;\n var frameSpan = this.getWrapper().getElementsByClassName(FRAME)[0];\n if (isRippleEnabled) {\n rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];\n }\n if (state === 'check') {\n frameSpan.classList.remove(INDETERMINATE);\n frameSpan.classList.add(CHECK);\n if (rippleSpan) {\n rippleSpan.classList.remove(RIPPLEINDETERMINATE);\n rippleSpan.classList.add(RIPPLECHECK);\n }\n ariaState = 'true';\n this.element.checked = true;\n }\n else if (state === 'uncheck') {\n removeClass([frameSpan], [CHECK, INDETERMINATE]);\n if (rippleSpan) {\n removeClass([rippleSpan], [RIPPLECHECK, RIPPLEINDETERMINATE]);\n }\n ariaState = 'false';\n this.element.checked = false;\n }\n else {\n frameSpan.classList.remove(CHECK);\n frameSpan.classList.add(INDETERMINATE);\n if (rippleSpan) {\n rippleSpan.classList.remove(RIPPLECHECK);\n rippleSpan.classList.add(RIPPLEINDETERMINATE);\n }\n ariaState = 'mixed';\n this.element.indeterminate = true;\n }\n this.getWrapper().setAttribute('aria-checked', ariaState);\n };\n CheckBox.prototype.clickHandler = function (event) {\n if (this.isMouseClick) {\n this.focusOutHandler();\n this.isMouseClick = false;\n }\n if (this.indeterminate) {\n this.changeState(this.checked ? 'check' : 'uncheck');\n this.indeterminate = false;\n this.element.indeterminate = false;\n }\n else if (this.checked) {\n this.changeState('uncheck');\n this.checked = false;\n }\n else {\n this.changeState('check');\n this.checked = true;\n }\n var changeEventArgs = { checked: this.updateVueArrayModel(false), event: event };\n this.trigger('change', changeEventArgs);\n event.stopPropagation();\n };\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n CheckBox.prototype.destroy = function () {\n var _this = this;\n var wrapper = this.getWrapper();\n _super.prototype.destroy.call(this);\n if (this.wrapper) {\n wrapper = this.wrapper;\n if (!this.disabled) {\n this.unWireEvents();\n }\n if (this.tagName === 'INPUT') {\n if (this.getWrapper() && wrapper.parentNode) {\n wrapper.parentNode.insertBefore(this.element, wrapper);\n }\n detach(wrapper);\n this.element.checked = false;\n if (this.indeterminate) {\n this.element.indeterminate = false;\n }\n ['name', 'value', 'disabled'].forEach(function (key) {\n _this.element.removeAttribute(key);\n });\n }\n else {\n ['role', 'aria-checked', 'class'].forEach(function (key) {\n wrapper.removeAttribute(key);\n });\n wrapper.innerHTML = '';\n }\n }\n };\n CheckBox.prototype.focusHandler = function () {\n this.isFocused = true;\n };\n CheckBox.prototype.focusOutHandler = function () {\n var wrapper = this.getWrapper();\n if (wrapper) {\n wrapper.classList.remove('e-focus');\n }\n this.isFocused = false;\n };\n /**\n * Gets the module name.\n *\n * @private\n * @returns {string} - Module Name\n */\n CheckBox.prototype.getModuleName = function () {\n return 'checkbox';\n };\n /**\n * Gets the properties to be maintained in the persistence state.\n *\n * @private\n * @returns {string} - Persist Data\n */\n CheckBox.prototype.getPersistData = function () {\n return this.addOnPersist(['checked', 'indeterminate']);\n };\n CheckBox.prototype.getWrapper = function () {\n if (this.element && this.element.parentElement) {\n return this.element.parentElement.parentElement;\n }\n else {\n return null;\n }\n };\n CheckBox.prototype.initialize = function () {\n if (isNullOrUndefined(this.initialCheckedValue)) {\n this.initialCheckedValue = this.checked;\n }\n if (this.name) {\n this.element.setAttribute('name', this.name);\n }\n if (this.value) {\n this.element.setAttribute('value', this.value);\n if (this.isVue && typeof this.value === 'boolean' && this.value === true) {\n this.setProperties({ 'checked': true }, true);\n }\n }\n if (this.checked) {\n this.changeState('check');\n }\n if (this.indeterminate) {\n this.changeState();\n }\n if (this.disabled) {\n this.setDisabled();\n }\n };\n CheckBox.prototype.initWrapper = function () {\n var wrapper = this.element.parentElement;\n if (!wrapper.classList.contains(WRAPPER)) {\n wrapper = this.createElement('div', {\n className: WRAPPER, attrs: { 'role': 'checkbox', 'aria-checked': 'false' }\n });\n this.element.parentNode.insertBefore(wrapper, this.element);\n }\n var label = this.createElement('label', { attrs: { for: this.element.id } });\n var frameSpan = this.createElement('span', { className: 'e-icons ' + FRAME });\n wrapper.classList.add('e-wrapper');\n if (this.enableRtl) {\n wrapper.classList.add(RTL);\n }\n if (this.cssClass) {\n addClass([wrapper], this.cssClass.split(' '));\n }\n wrapper.appendChild(label);\n label.appendChild(this.element);\n setHiddenInput(this, label);\n label.appendChild(frameSpan);\n if (isRippleEnabled) {\n var rippleSpan = this.createElement('span', { className: RIPPLE });\n if (this.labelPosition === 'Before') {\n label.appendChild(rippleSpan);\n }\n else {\n label.insertBefore(rippleSpan, frameSpan);\n }\n rippleEffect(rippleSpan, { duration: 400, isCenterRipple: true });\n }\n if (this.label) {\n this.setText(this.label);\n }\n };\n CheckBox.prototype.keyUpHandler = function () {\n if (this.isFocused) {\n this.getWrapper().classList.add('e-focus');\n }\n };\n CheckBox.prototype.labelMouseDownHandler = function (e) {\n this.isMouseClick = true;\n var rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];\n rippleMouseHandler(e, rippleSpan);\n };\n CheckBox.prototype.labelMouseUpHandler = function (e) {\n this.isMouseClick = true;\n var rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];\n if (rippleSpan) {\n var rippleElem = rippleSpan.querySelectorAll('.e-ripple-element');\n for (var i = 0; i < rippleElem.length - 1; i++) {\n rippleSpan.removeChild(rippleSpan.childNodes[i]);\n }\n rippleMouseHandler(e, rippleSpan);\n }\n };\n /**\n * Called internally if any of the property value changes.\n *\n * @private\n * @param {CheckBoxModel} newProp - Specifies new Properties\n * @param {CheckBoxModel} oldProp - Specifies old Properties\n *\n * @returns {void}\n */\n CheckBox.prototype.onPropertyChanged = function (newProp, oldProp) {\n var wrapper = this.getWrapper();\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'checked':\n this.indeterminate = false;\n this.element.indeterminate = false;\n this.changeState(newProp.checked ? 'check' : 'uncheck');\n break;\n case 'indeterminate':\n if (newProp.indeterminate) {\n this.changeState();\n }\n else {\n this.element.indeterminate = false;\n this.changeState(this.checked ? 'check' : 'uncheck');\n }\n break;\n case 'disabled':\n if (newProp.disabled) {\n this.setDisabled();\n this.wrapper = this.getWrapper();\n this.unWireEvents();\n }\n else {\n this.element.disabled = false;\n wrapper.classList.remove(DISABLED);\n wrapper.setAttribute('aria-disabled', 'false');\n this.wireEvents();\n }\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([wrapper], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([wrapper], newProp.cssClass.split(' '));\n }\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n wrapper.classList.add(RTL);\n }\n else {\n wrapper.classList.remove(RTL);\n }\n break;\n case 'label':\n this.setText(newProp.label);\n break;\n case 'labelPosition': {\n var label = wrapper.getElementsByClassName(LABEL)[0];\n var labelWrap = wrapper.getElementsByTagName('label')[0];\n detach(label);\n if (newProp.labelPosition === 'After') {\n labelWrap.appendChild(label);\n }\n else {\n labelWrap.insertBefore(label, wrapper.getElementsByClassName(FRAME)[0]);\n }\n break;\n }\n case 'name':\n this.element.setAttribute('name', newProp.name);\n break;\n case 'value':\n if (this.isVue && typeof newProp.value === 'object') {\n break;\n }\n this.element.setAttribute('value', newProp.value);\n break;\n case 'htmlAttributes':\n this.updateHtmlAttributeToWrapper();\n break;\n }\n }\n };\n /**\n * Initialize Angular, React and Unique ID support.\n *\n * @private\n * @returns {void}\n */\n CheckBox.prototype.preRender = function () {\n var element = this.element;\n this.formElement = closest(this.element, 'form');\n this.tagName = this.element.tagName;\n element = wrapperInitialize(this.createElement, 'EJS-CHECKBOX', 'checkbox', element, WRAPPER, 'checkbox');\n this.element = element;\n if (this.element.getAttribute('type') !== 'checkbox') {\n this.element.setAttribute('type', 'checkbox');\n }\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n };\n /**\n * Initialize the control rendering.\n *\n * @private\n * @returns {void}\n */\n CheckBox.prototype.render = function () {\n this.initWrapper();\n this.initialize();\n if (!this.disabled) {\n this.wireEvents();\n }\n this.updateHtmlAttributeToWrapper();\n this.updateVueArrayModel(true);\n this.renderComplete();\n this.wrapper = this.getWrapper();\n };\n CheckBox.prototype.setDisabled = function () {\n var wrapper = this.getWrapper();\n this.element.disabled = true;\n wrapper.classList.add(DISABLED);\n wrapper.setAttribute('aria-disabled', 'true');\n };\n CheckBox.prototype.setText = function (text) {\n var wrapper = this.getWrapper();\n if (!wrapper) {\n return;\n }\n var label = wrapper.getElementsByClassName(LABEL)[0];\n if (label) {\n label.textContent = text;\n }\n else {\n text = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(text) : text;\n label = this.createElement('span', { className: LABEL, innerHTML: text });\n var labelWrap = wrapper.getElementsByTagName('label')[0];\n if (this.labelPosition === 'Before') {\n labelWrap.insertBefore(label, wrapper.getElementsByClassName(FRAME)[0]);\n }\n else {\n labelWrap.appendChild(label);\n }\n }\n };\n CheckBox.prototype.changeHandler = function (e) {\n e.stopPropagation();\n };\n CheckBox.prototype.formResetHandler = function () {\n this.checked = this.initialCheckedValue;\n this.element.checked = this.initialCheckedValue;\n };\n CheckBox.prototype.unWireEvents = function () {\n var wrapper = this.wrapper;\n EventHandler.remove(this.element, 'click', this.clickHandler);\n EventHandler.remove(this.element, 'keyup', this.keyUpHandler);\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'focusout', this.focusOutHandler);\n var label = wrapper.getElementsByTagName('label')[0];\n EventHandler.remove(label, 'mousedown', this.labelMouseDownHandler);\n EventHandler.remove(label, 'mouseup', this.labelMouseUpHandler);\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n if (this.tagName === 'EJS-CHECKBOX') {\n EventHandler.remove(this.element, 'change', this.changeHandler);\n }\n };\n CheckBox.prototype.wireEvents = function () {\n var wrapper = this.getWrapper();\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);\n EventHandler.add(this.element, 'focus', this.focusHandler, this);\n EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);\n var label = wrapper.getElementsByTagName('label')[0];\n EventHandler.add(label, 'mousedown', this.labelMouseDownHandler, this);\n EventHandler.add(label, 'mouseup', this.labelMouseUpHandler, this);\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);\n }\n if (this.tagName === 'EJS-CHECKBOX') {\n EventHandler.add(this.element, 'change', this.changeHandler, this);\n }\n };\n CheckBox.prototype.updateVueArrayModel = function (init) {\n if (this.isVue && typeof this.value === 'object') {\n var value = this.element.value;\n if (value && this.value) {\n if (init) {\n for (var i = 0; i < this.value.length; i++) {\n if (value === this.value[i]) {\n this.changeState('check');\n this.setProperties({ 'checked': true }, true);\n }\n }\n }\n else {\n var index = this.value.indexOf(value);\n if (this.checked) {\n if (index < 0) {\n this.value.push(value);\n }\n }\n else {\n if (index > -1) {\n this.value.splice(index, 1);\n }\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return this.value;\n }\n }\n }\n return this.element.checked;\n };\n CheckBox.prototype.updateHtmlAttributeToWrapper = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var key = _a[_i];\n if (containerAttr.indexOf(key) > -1) {\n var wrapper = this.getWrapper();\n if (key === 'class') {\n addClass([wrapper], this.htmlAttributes[key].split(' '));\n }\n else if (key === 'title') {\n wrapper.setAttribute(key, this.htmlAttributes[key]);\n }\n else if (key === 'style') {\n var frameSpan = this.getWrapper().getElementsByClassName(FRAME)[0];\n frameSpan.setAttribute(key, this.htmlAttributes[key]);\n }\n else {\n this.element.setAttribute(key, this.htmlAttributes[key]);\n }\n }\n }\n }\n };\n /**\n * Click the CheckBox element\n * its native method\n *\n * @public\n * @returns {void}\n */\n CheckBox.prototype.click = function () {\n this.element.click();\n };\n /**\n * Sets the focus to CheckBox\n * its native method\n *\n * @public\n * @returns {void}\n */\n CheckBox.prototype.focusIn = function () {\n this.element.focus();\n };\n __decorate([\n Event()\n ], CheckBox.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], CheckBox.prototype, \"created\", void 0);\n __decorate([\n Property(false)\n ], CheckBox.prototype, \"checked\", void 0);\n __decorate([\n Property('')\n ], CheckBox.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], CheckBox.prototype, \"disabled\", void 0);\n __decorate([\n Property(false)\n ], CheckBox.prototype, \"indeterminate\", void 0);\n __decorate([\n Property('')\n ], CheckBox.prototype, \"label\", void 0);\n __decorate([\n Property('After')\n ], CheckBox.prototype, \"labelPosition\", void 0);\n __decorate([\n Property('')\n ], CheckBox.prototype, \"name\", void 0);\n __decorate([\n Property('')\n ], CheckBox.prototype, \"value\", void 0);\n __decorate([\n Property(false)\n ], CheckBox.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property({})\n ], CheckBox.prototype, \"htmlAttributes\", void 0);\n CheckBox = __decorate([\n NotifyPropertyChanges\n ], CheckBox);\n return CheckBox;\n}(Component));\nexport { CheckBox };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, EventHandler, addClass, append, Property, Event, L10n, compile } from '@syncfusion/ej2-base';\nimport { setStyleAttribute, extend, removeClass, prepend, isNullOrUndefined, detach, getValue } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, rippleEffect, ChildProperty, Complex } from '@syncfusion/ej2-base';\nimport { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';\nimport { ListBase } from '@syncfusion/ej2-lists';\nimport { select, selectAll } from '@syncfusion/ej2-base';\nvar FieldSettings = /** @class */ (function (_super) {\n __extends(FieldSettings, _super);\n function FieldSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], FieldSettings.prototype, \"text\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"value\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"iconCss\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"groupBy\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"htmlAttributes\", void 0);\n return FieldSettings;\n}(ChildProperty));\nexport { FieldSettings };\nexport var dropDownBaseClasses = {\n root: 'e-dropdownbase',\n rtl: 'e-rtl',\n content: 'e-content',\n selected: 'e-active',\n hover: 'e-hover',\n noData: 'e-nodata',\n fixedHead: 'e-fixed-head',\n focus: 'e-item-focus',\n li: 'e-list-item',\n group: 'e-list-group-item',\n disabled: 'e-disabled',\n grouping: 'e-dd-group'\n};\nvar ITEMTEMPLATE_PROPERTY = 'ItemTemplate';\nvar VALUETEMPLATE_PROPERTY = 'ValueTemplate';\nvar GROUPTEMPLATE_PROPERTY = 'GroupTemplate';\nvar HEADERTEMPLATE_PROPERTY = 'HeaderTemplate';\nvar FOOTERTEMPLATE_PROPERTY = 'FooterTemplate';\nvar NORECORDSTEMPLATE_PROPERTY = 'NoRecordsTemplate';\nvar ACTIONFAILURETEMPLATE_PROPERTY = 'ActionFailureTemplate';\n/**\n * DropDownBase component will generate the list items based on given data and act as base class to drop-down related components\n */\nvar DropDownBase = /** @class */ (function (_super) {\n __extends(DropDownBase, _super);\n /**\n * * Constructor for DropDownBase class\n *\n * @param {DropDownBaseModel} options - Specifies the DropDownBase model.\n * @param {string | HTMLElement} element - Specifies the element to render as component.\n * @private\n */\n function DropDownBase(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.preventChange = false;\n _this.isAngular = false;\n _this.isPreventChange = false;\n _this.isDynamicDataChange = false;\n return _this;\n }\n DropDownBase.prototype.getPropObject = function (prop, newProp, oldProp) {\n var newProperty = new Object();\n var oldProperty = new Object();\n var propName = function (prop) {\n return prop;\n };\n newProperty[propName(prop)] = newProp[propName(prop)];\n oldProperty[propName(prop)] = oldProp[propName(prop)];\n var data = new Object();\n data.newProperty = newProperty;\n data.oldProperty = oldProperty;\n return data;\n };\n DropDownBase.prototype.getValueByText = function (text, ignoreCase, ignoreAccent) {\n var value = null;\n if (!isNullOrUndefined(this.listData)) {\n if (ignoreCase) {\n value = this.checkValueCase(text, true, ignoreAccent);\n }\n else {\n value = this.checkValueCase(text, false, ignoreAccent);\n }\n }\n return value;\n };\n DropDownBase.prototype.checkValueCase = function (text, ignoreCase, ignoreAccent, isTextByValue) {\n var _this = this;\n var value = null;\n if (isTextByValue) {\n value = text;\n }\n var dataSource = this.listData;\n var fields = this.fields;\n var type = this.typeOfData(dataSource).typeof;\n if (type === 'string' || type === 'number' || type === 'boolean') {\n for (var _i = 0, dataSource_1 = dataSource; _i < dataSource_1.length; _i++) {\n var item = dataSource_1[_i];\n if (!isNullOrUndefined(item)) {\n if (ignoreAccent) {\n value = this.checkingAccent(String(item), text, ignoreCase);\n }\n else {\n if (ignoreCase) {\n if (this.checkIgnoreCase(String(item), text)) {\n value = this.getItemValue(String(item), text, ignoreCase);\n }\n }\n else {\n if (this.checkNonIgnoreCase(String(item), text)) {\n value = this.getItemValue(String(item), text, ignoreCase, isTextByValue);\n }\n }\n }\n }\n }\n }\n else {\n if (ignoreCase) {\n dataSource.filter(function (item) {\n var itemValue = getValue(fields.value, item);\n if (!isNullOrUndefined(itemValue) && _this.checkIgnoreCase(getValue(fields.text, item).toString(), text)) {\n value = getValue(fields.value, item);\n }\n });\n }\n else {\n if (isTextByValue) {\n var compareValue_1 = null;\n compareValue_1 = value;\n dataSource.filter(function (item) {\n var itemValue = getValue(fields.value, item);\n if (!isNullOrUndefined(itemValue) && !isNullOrUndefined(value) && itemValue.toString() === compareValue_1.toString()) {\n value = getValue(fields.text, item);\n }\n });\n }\n else {\n dataSource.filter(function (item) {\n if (_this.checkNonIgnoreCase(getValue(fields.text, item), text)) {\n value = getValue(fields.value, item);\n }\n });\n }\n }\n }\n return value;\n };\n DropDownBase.prototype.checkingAccent = function (item, text, ignoreCase) {\n var dataItem = DataUtil.ignoreDiacritics(String(item));\n var textItem = DataUtil.ignoreDiacritics(text.toString());\n var value = null;\n if (ignoreCase) {\n if (this.checkIgnoreCase(dataItem, textItem)) {\n value = this.getItemValue(String(item), text, ignoreCase);\n }\n }\n else {\n if (this.checkNonIgnoreCase(String(item), text)) {\n value = this.getItemValue(String(item), text, ignoreCase);\n }\n }\n return value;\n };\n DropDownBase.prototype.checkIgnoreCase = function (item, text) {\n return String(item).toLowerCase() === text.toString().toLowerCase() ? true : false;\n };\n DropDownBase.prototype.checkNonIgnoreCase = function (item, text) {\n return String(item) === text.toString() ? true : false;\n };\n DropDownBase.prototype.getItemValue = function (dataItem, typedText, ignoreCase, isTextByValue) {\n var value = null;\n var dataSource = this.listData;\n var type = this.typeOfData(dataSource).typeof;\n if (isTextByValue) {\n value = dataItem.toString();\n }\n else {\n if (ignoreCase) {\n value = type === 'string' ? String(dataItem) : this.getFormattedValue(String(dataItem));\n }\n else {\n value = type === 'string' ? typedText : this.getFormattedValue(typedText);\n }\n }\n return value;\n };\n DropDownBase.prototype.templateCompiler = function (baseTemplate) {\n var checkTemplate = false;\n if (baseTemplate) {\n try {\n checkTemplate = (selectAll(baseTemplate, document).length) ? true : false;\n }\n catch (exception) {\n checkTemplate = false;\n }\n }\n return checkTemplate;\n };\n DropDownBase.prototype.l10nUpdate = function (actionFailure) {\n var ele = this.getModuleName() === 'listbox' ? this.ulElement : this.list;\n if (this.noRecordsTemplate !== 'No records found' || this.actionFailureTemplate !== 'Request failed') {\n var template = actionFailure ? this.actionFailureTemplate : this.noRecordsTemplate;\n var compiledString = void 0;\n var templateId = actionFailure ? this.actionFailureTemplateId : this.noRecordsTemplateId;\n ele.innerHTML = '';\n var tempaltecheck = this.templateCompiler(template);\n if (tempaltecheck) {\n compiledString = compile(select(template, document).innerHTML.trim());\n }\n else {\n compiledString = compile(template);\n }\n var templateName = actionFailure ? 'actionFailureTemplate' : 'noRecordsTemplate';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var noDataCompTemp = compiledString({}, this, templateName, templateId, this.isStringTemplate, null, ele);\n if (noDataCompTemp && noDataCompTemp.length > 0) {\n for (var i = 0; i < noDataCompTemp.length; i++) {\n ele.appendChild(noDataCompTemp[i]);\n }\n }\n this.renderReactTemplates();\n }\n else {\n var l10nLocale = { noRecordsTemplate: 'No records found', actionFailureTemplate: 'Request failed' };\n var componentLocale = new L10n(this.getLocaleName(), {}, this.locale);\n if (componentLocale.getConstant('actionFailureTemplate') !== '') {\n this.l10n = componentLocale;\n }\n else {\n this.l10n = new L10n(this.getModuleName() === 'listbox' ? 'listbox' : 'dropdowns', l10nLocale, this.locale);\n }\n var content = actionFailure ?\n this.l10n.getConstant('actionFailureTemplate') : this.l10n.getConstant('noRecordsTemplate');\n if (this.getModuleName() === 'listbox') {\n var liElem = this.createElement('li');\n liElem.textContent = content;\n ele.appendChild(liElem);\n liElem.classList.add('e-list-nrt');\n }\n else {\n ele.innerHTML = content;\n }\n }\n };\n DropDownBase.prototype.getLocaleName = function () {\n return 'drop-down-base';\n };\n DropDownBase.prototype.getTextByValue = function (value) {\n var text = this.checkValueCase(value, false, false, true);\n return text;\n };\n DropDownBase.prototype.getFormattedValue = function (value) {\n if (this.listData && this.listData.length) {\n var item = this.typeOfData(this.listData);\n if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'number'\n || item.typeof === 'number') {\n return parseFloat(value);\n }\n if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'boolean'\n || item.typeof === 'boolean') {\n return ((value === 'true') || ('' + value === 'true'));\n }\n }\n return value;\n };\n /**\n * Sets RTL to dropdownbase wrapper\n *\n * @returns {void}\n */\n DropDownBase.prototype.setEnableRtl = function () {\n if (this.list) {\n this.enableRtlElements.push(this.list);\n }\n if (this.enableRtl) {\n addClass(this.enableRtlElements, dropDownBaseClasses.rtl);\n }\n else {\n removeClass(this.enableRtlElements, dropDownBaseClasses.rtl);\n }\n };\n /**\n * Initialize the Component.\n *\n * @returns {void}\n */\n DropDownBase.prototype.initialize = function () {\n this.bindEvent = true;\n this.actionFailureTemplateId = \"\" + this.element.id + ACTIONFAILURETEMPLATE_PROPERTY;\n if (this.element.tagName === 'UL') {\n var jsonElement = ListBase.createJsonFromElement(this.element);\n this.setProperties({ fields: { text: 'text', value: 'text' } }, true);\n this.resetList(jsonElement, this.fields);\n }\n else if (this.element.tagName === 'SELECT') {\n var dataSource = this.dataSource instanceof Array ? (this.dataSource.length > 0 ? true : false)\n : !isNullOrUndefined(this.dataSource) ? true : false;\n if (!dataSource) {\n this.renderItemsBySelect();\n }\n else if (this.isDynamicDataChange) {\n this.setListData(this.dataSource, this.fields, this.query);\n }\n }\n else {\n this.setListData(this.dataSource, this.fields, this.query);\n }\n };\n /**\n * Get the properties to be maintained in persisted state.\n *\n * @returns {string} Returns the persisted data of the component.\n */\n DropDownBase.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Sets the enabled state to DropDownBase.\n *\n * @returns {void}\n */\n DropDownBase.prototype.setEnabled = function () {\n this.element.setAttribute('aria-disabled', (this.enabled) ? 'false' : 'true');\n };\n /**\n * Sets the enabled state to DropDownBase.\n *\n * @param {string} value - Specifies the attribute values to add on the input element.\n * @returns {void}\n */\n DropDownBase.prototype.updateDataAttribute = function (value) {\n var invalidAttr = ['class', 'style', 'id', 'type'];\n var attr = {};\n for (var a = 0; a < this.element.attributes.length; a++) {\n if (invalidAttr.indexOf(this.element.attributes[a].name) === -1 &&\n !(this.getModuleName() === 'dropdownlist' && this.element.attributes[a].name === 'readonly')) {\n attr[this.element.attributes[a].name] = this.element.getAttribute(this.element.attributes[a].name);\n }\n }\n extend(attr, value, attr);\n this.setProperties({ htmlAttributes: attr }, true);\n };\n DropDownBase.prototype.renderItemsBySelect = function () {\n var element = this.element;\n var fields = { value: 'value', text: 'text' };\n var jsonElement = [];\n var group = element.querySelectorAll('select>optgroup');\n var option = element.querySelectorAll('select>option');\n this.getJSONfromOption(jsonElement, option, fields);\n if (group.length) {\n for (var i = 0; i < group.length; i++) {\n var item = group[i];\n var optionGroup = {};\n optionGroup[fields.text] = item.label;\n optionGroup.isHeader = true;\n var child = item.querySelectorAll('option');\n jsonElement.push(optionGroup);\n this.getJSONfromOption(jsonElement, child, fields);\n }\n element.querySelectorAll('select>option');\n }\n this.updateFields(fields.text, fields.value, this.fields.groupBy, this.fields.htmlAttributes, this.fields.iconCss);\n this.resetList(jsonElement, fields);\n };\n DropDownBase.prototype.updateFields = function (text, value, groupBy, htmlAttributes, iconCss) {\n var field = {\n 'fields': {\n text: text,\n value: value,\n groupBy: !isNullOrUndefined(groupBy) ? groupBy : this.fields && this.fields.groupBy,\n htmlAttributes: !isNullOrUndefined(htmlAttributes) ? htmlAttributes : this.fields && this.fields.htmlAttributes,\n iconCss: !isNullOrUndefined(iconCss) ? iconCss : this.fields && this.fields.iconCss\n }\n };\n this.setProperties(field, true);\n };\n DropDownBase.prototype.getJSONfromOption = function (items, options, fields) {\n for (var _i = 0, options_1 = options; _i < options_1.length; _i++) {\n var option = options_1[_i];\n var json = {};\n json[fields.text] = option.innerText;\n json[fields.value] = !isNullOrUndefined(option.getAttribute(fields.value)) ?\n option.getAttribute(fields.value) : option.innerText;\n items.push(json);\n }\n };\n /**\n * Execute before render the list items\n *\n * @private\n * @returns {void}\n */\n DropDownBase.prototype.preRender = function () {\n // there is no event handler\n this.scrollTimer = -1;\n this.enableRtlElements = [];\n this.isRequested = false;\n this.isDataFetched = false;\n this.itemTemplateId = \"\" + this.element.id + ITEMTEMPLATE_PROPERTY;\n this.valueTemplateId = \"\" + this.element.id + VALUETEMPLATE_PROPERTY;\n this.groupTemplateId = \"\" + this.element.id + GROUPTEMPLATE_PROPERTY;\n this.headerTemplateId = \"\" + this.element.id + HEADERTEMPLATE_PROPERTY;\n this.footerTemplateId = \"\" + this.element.id + FOOTERTEMPLATE_PROPERTY;\n this.noRecordsTemplateId = \"\" + this.element.id + NORECORDSTEMPLATE_PROPERTY;\n };\n /**\n * Creates the list items of DropDownBase component.\n *\n * @param {Object[] | string[] | number[] | DataManager | boolean[]} dataSource - Specifies the data to generate the list.\n * @param {FieldSettingsModel} fields - Maps the columns of the data table and binds the data to the component.\n * @param {Query} query - Accepts the external Query that execute along with data processing.\n * @returns {void}\n */\n DropDownBase.prototype.setListData = function (dataSource, fields, query) {\n var _this = this;\n fields = fields ? fields : this.fields;\n var ulElement;\n this.isActive = true;\n var eventArgs = { cancel: false, data: dataSource, query: query };\n this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;\n this.trigger('actionBegin', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n _this.showSpinner();\n if (dataSource instanceof DataManager) {\n _this.isRequested = true;\n if (_this.isDataFetched) {\n _this.emptyDataRequest(fields);\n return;\n }\n eventArgs.data.executeQuery(_this.getQuery(eventArgs.query)).then(function (e) {\n _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;\n _this.trigger('actionComplete', e, function (e) {\n if (!e.cancel) {\n var listItems = e.result;\n if (listItems.length === 0) {\n _this.isDataFetched = true;\n }\n ulElement = _this.renderItems(listItems, fields);\n _this.onActionComplete(ulElement, listItems, e);\n if (_this.groupTemplate) {\n _this.renderGroupTemplate(ulElement);\n }\n _this.isRequested = false;\n _this.bindChildItems(listItems, ulElement, fields, e);\n }\n });\n }).catch(function (e) {\n _this.isRequested = false;\n _this.onActionFailure(e);\n _this.hideSpinner();\n });\n }\n else {\n var dataManager = new DataManager(eventArgs.data);\n var listItems = (_this.getQuery(eventArgs.query)).executeLocal(dataManager);\n var localDataArgs = { cancel: false, result: listItems };\n _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;\n _this.trigger('actionComplete', localDataArgs, function (localDataArgs) {\n if (!localDataArgs.cancel) {\n ulElement = _this.renderItems(localDataArgs.result, fields);\n _this.onActionComplete(ulElement, localDataArgs.result);\n if (_this.groupTemplate) {\n _this.renderGroupTemplate(ulElement);\n }\n _this.bindChildItems(localDataArgs.result, ulElement, fields);\n }\n });\n }\n }\n });\n };\n DropDownBase.prototype.bindChildItems = function (listItems, ulElement, fields, e) {\n var _this = this;\n if (listItems.length >= 100 && this.getModuleName() === 'autocomplete') {\n setTimeout(function () {\n var childNode = _this.remainingItems(_this.sortedData, fields);\n append(childNode, ulElement);\n _this.liCollections = _this.list.querySelectorAll('.' + dropDownBaseClasses.li);\n _this.updateListValues();\n _this.raiseDataBound(listItems, e);\n }, 0);\n }\n else {\n this.raiseDataBound(listItems, e);\n }\n };\n DropDownBase.prototype.updateListValues = function () {\n // Used this method in component side.\n };\n DropDownBase.prototype.findListElement = function (list, findNode, attribute, value) {\n var liElement = null;\n if (list) {\n var listArr = [].slice.call(list.querySelectorAll(findNode));\n for (var index = 0; index < listArr.length; index++) {\n if (listArr[index].getAttribute(attribute) === (value + '')) {\n liElement = listArr[index];\n break;\n }\n }\n }\n return liElement;\n };\n DropDownBase.prototype.raiseDataBound = function (listItems, e) {\n this.hideSpinner();\n var dataBoundEventArgs = {\n items: listItems,\n e: e\n };\n this.trigger('dataBound', dataBoundEventArgs);\n };\n DropDownBase.prototype.remainingItems = function (dataSource, fields) {\n var spliceData = new DataManager(dataSource).executeLocal(new Query().skip(100));\n if (this.itemTemplate) {\n var listElements = this.templateListItem(spliceData, fields);\n return [].slice.call(listElements.childNodes);\n }\n var type = this.typeOfData(spliceData).typeof;\n if (type === 'string' || type === 'number' || type === 'boolean') {\n return ListBase.createListItemFromArray(this.createElement, spliceData, true, this.listOption(spliceData, fields), this);\n }\n return ListBase.createListItemFromJson(this.createElement, spliceData, this.listOption(spliceData, fields), 1, true, this);\n };\n DropDownBase.prototype.emptyDataRequest = function (fields) {\n var listItems = [];\n this.onActionComplete(this.renderItems(listItems, fields), listItems);\n this.isRequested = false;\n this.hideSpinner();\n };\n DropDownBase.prototype.showSpinner = function () {\n // Used this method in component side.\n };\n DropDownBase.prototype.hideSpinner = function () {\n // Used this method in component side.\n };\n DropDownBase.prototype.onActionFailure = function (e) {\n this.liCollections = [];\n this.trigger('actionFailure', e);\n this.l10nUpdate(true);\n addClass([this.list], dropDownBaseClasses.noData);\n };\n /* eslint-disable @typescript-eslint/no-unused-vars */\n DropDownBase.prototype.onActionComplete = function (ulElement, list, e) {\n /* eslint-enable @typescript-eslint/no-unused-vars */\n this.listData = list;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact) {\n this.clearTemplate(['itemTemplate', 'groupTemplate', 'actionFailureTemplate', 'noRecordsTemplate']);\n }\n this.list.innerHTML = '';\n this.fixedHeaderElement = isNullOrUndefined(this.fixedHeaderElement) ? this.fixedHeaderElement : null;\n this.list.appendChild(ulElement);\n this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);\n this.ulElement = this.list.querySelector('ul');\n this.postRender(this.list, list, this.bindEvent);\n };\n /* eslint-disable @typescript-eslint/no-unused-vars */\n DropDownBase.prototype.postRender = function (listElement, list, bindEvent) {\n /* eslint-enable @typescript-eslint/no-unused-vars */\n var focusItem = listElement.querySelector('.' + dropDownBaseClasses.li);\n var selectedItem = listElement.querySelector('.' + dropDownBaseClasses.selected);\n if (focusItem && !selectedItem) {\n focusItem.classList.add(dropDownBaseClasses.focus);\n }\n if (list.length <= 0) {\n this.l10nUpdate();\n addClass([listElement], dropDownBaseClasses.noData);\n }\n else {\n listElement.classList.remove(dropDownBaseClasses.noData);\n }\n };\n /**\n * Get the query to do the data operation before list item generation.\n *\n * @param {Query} query - Accepts the external Query that execute along with data processing.\n * @returns {Query} Returns the query to do the data query operation.\n */\n DropDownBase.prototype.getQuery = function (query) {\n return query ? query : this.query ? this.query : new Query();\n };\n /**\n * To render the template content for group header element.\n *\n * @param {HTMLElement} listEle - Specifies the group list elements.\n * @returns {void}\n */\n DropDownBase.prototype.renderGroupTemplate = function (listEle) {\n if (this.fields.groupBy !== null && this.dataSource || this.element.querySelector('.' + dropDownBaseClasses.group)) {\n var dataSource = this.dataSource;\n var option = { groupTemplateID: this.groupTemplateId, isStringTemplate: this.isStringTemplate };\n var headerItems = listEle.querySelectorAll('.' + dropDownBaseClasses.group);\n var groupcheck = this.templateCompiler(this.groupTemplate);\n if (groupcheck) {\n var groupValue = select(this.groupTemplate, document).innerHTML.trim();\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var tempHeaders = ListBase.renderGroupTemplate(groupValue, dataSource, this.fields.properties, headerItems, option, this);\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var tempHeaders = ListBase.renderGroupTemplate(this.groupTemplate, dataSource, this.fields.properties, headerItems, option, this);\n }\n this.renderReactTemplates();\n }\n };\n /**\n * To create the ul li list items\n *\n * @param {object []} dataSource - Specifies the data to generate the list.\n * @param {FieldSettingsModel} fields - Maps the columns of the data table and binds the data to the component.\n * @returns {HTMLElement} Return the ul li list items.\n */\n DropDownBase.prototype.createListItems = function (dataSource, fields) {\n if (dataSource && fields.groupBy || this.element.querySelector('optgroup')) {\n if (fields.groupBy) {\n if (this.sortOrder !== 'None') {\n dataSource = this.getSortedDataSource(dataSource);\n }\n dataSource = ListBase.groupDataSource(dataSource, fields.properties, this.sortOrder);\n }\n addClass([this.list], dropDownBaseClasses.grouping);\n }\n else {\n dataSource = this.getSortedDataSource(dataSource);\n }\n var options = this.listOption(dataSource, fields);\n var spliceData = (dataSource.length > 100) ?\n new DataManager(dataSource).executeLocal(new Query().take(100))\n : dataSource;\n this.sortedData = dataSource;\n return ListBase.createList(this.createElement, (this.getModuleName() === 'autocomplete') ? spliceData : dataSource, options, true, this);\n };\n DropDownBase.prototype.listOption = function (dataSource, fields) {\n var iconCss = isNullOrUndefined(fields.iconCss) ? false : true;\n var fieldValues = !isNullOrUndefined(fields.properties) ?\n fields.properties : fields;\n var options = (fields.text !== null || fields.value !== null) ? {\n fields: fieldValues,\n showIcon: iconCss, ariaAttributes: { groupItemRole: 'presentation' }\n } : { fields: { value: 'text' } };\n return extend({}, options, fields, true);\n };\n DropDownBase.prototype.setFloatingHeader = function (e) {\n if (isNullOrUndefined(this.fixedHeaderElement)) {\n this.fixedHeaderElement = this.createElement('div', { className: dropDownBaseClasses.fixedHead });\n if (!this.list.querySelector('li').classList.contains(dropDownBaseClasses.group)) {\n this.fixedHeaderElement.style.display = 'none';\n }\n prepend([this.fixedHeaderElement], this.list);\n this.setFixedHeader();\n }\n if (!isNullOrUndefined(this.fixedHeaderElement) && this.fixedHeaderElement.style.zIndex === '0') {\n this.setFixedHeader();\n }\n this.scrollStop(e);\n };\n DropDownBase.prototype.scrollStop = function (e) {\n var target = !isNullOrUndefined(e) ? e.target : this.list;\n var liHeight = parseInt(getComputedStyle(this.getValidLi(), null).getPropertyValue('height'), 10);\n var topIndex = Math.round(target.scrollTop / liHeight);\n var liCollections = this.list.querySelectorAll('li' + ':not(.e-hide-listitem)');\n for (var i = topIndex; i > -1; i--) {\n if (!isNullOrUndefined(liCollections[i]) && liCollections[i].classList.contains(dropDownBaseClasses.group)) {\n var currentLi = liCollections[i];\n this.fixedHeaderElement.innerHTML = currentLi.innerHTML;\n this.fixedHeaderElement.style.top = target.scrollTop + 'px';\n this.fixedHeaderElement.style.display = 'block';\n break;\n }\n else {\n this.fixedHeaderElement.style.display = 'none';\n this.fixedHeaderElement.style.top = 'none';\n }\n }\n };\n DropDownBase.prototype.getValidLi = function () {\n return this.liCollections[0];\n };\n /**\n * To render the list items\n *\n * @param {object[]} listData - Specifies the list of array of data.\n * @param {FieldSettingsModel} fields - Maps the columns of the data table and binds the data to the component.\n * @returns {HTMLElement} Return the list items.\n */\n DropDownBase.prototype.renderItems = function (listData, fields) {\n var ulElement;\n if (this.itemTemplate && listData) {\n var dataSource = listData;\n if (dataSource && fields.groupBy) {\n if (this.sortOrder !== 'None') {\n dataSource = this.getSortedDataSource(dataSource);\n }\n dataSource = ListBase.groupDataSource(dataSource, fields.properties, this.sortOrder);\n }\n else {\n dataSource = this.getSortedDataSource(dataSource);\n }\n this.sortedData = dataSource;\n var spliceData = (dataSource.length > 100) ?\n new DataManager(dataSource).executeLocal(new Query().take(100))\n : dataSource;\n ulElement = this.templateListItem((this.getModuleName() === 'autocomplete') ? spliceData : dataSource, fields);\n }\n else {\n ulElement = this.createListItems(listData, fields);\n }\n return ulElement;\n };\n DropDownBase.prototype.templateListItem = function (dataSource, fields) {\n var option = this.listOption(dataSource, fields);\n option.templateID = this.itemTemplateId;\n option.isStringTemplate = this.isStringTemplate;\n var itemcheck = this.templateCompiler(this.itemTemplate);\n if (itemcheck) {\n var itemValue = select(this.itemTemplate, document).innerHTML.trim();\n return ListBase.renderContentTemplate(this.createElement, itemValue, dataSource, fields.properties, option, this);\n }\n else {\n return ListBase.renderContentTemplate(this.createElement, this.itemTemplate, dataSource, fields.properties, option, this);\n }\n };\n DropDownBase.prototype.typeOfData = function (items) {\n var item = { typeof: null, item: null };\n for (var i = 0; (!isNullOrUndefined(items) && i < items.length); i++) {\n if (!isNullOrUndefined(items[i])) {\n var listDataType = typeof (items[i]) === 'string' ||\n typeof (items[i]) === 'number' || typeof (items[i]) === 'boolean';\n var isNullData = listDataType ? isNullOrUndefined(items[i]) :\n isNullOrUndefined(getValue((this.fields.value ? this.fields.value : 'value'), items[i]));\n if (!isNullData) {\n return item = { typeof: typeof items[i], item: items[i] };\n }\n }\n }\n return item;\n };\n DropDownBase.prototype.setFixedHeader = function () {\n this.list.parentElement.style.display = 'block';\n var borderWidth = 0;\n if (this.list && this.list.parentElement) {\n borderWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-width'), 10);\n /*Shorthand property not working in Firefox for getComputedStyle method.\n Refer bug report https://bugzilla.mozilla.org/show_bug.cgi?id=137688\n Refer alternate solution https://stackoverflow.com/a/41696234/9133493*/\n if (isNaN(borderWidth)) {\n var borderTopWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-top-width'), 10);\n var borderBottomWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-bottom-width'), 10);\n var borderLeftWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-left-width'), 10);\n var borderRightWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-right-width'), 10);\n borderWidth = (borderTopWidth + borderBottomWidth + borderLeftWidth + borderRightWidth);\n }\n }\n var liWidth = this.getValidLi().offsetWidth - borderWidth;\n this.fixedHeaderElement.style.width = liWidth.toString() + 'px';\n setStyleAttribute(this.fixedHeaderElement, { zIndex: 10 });\n var firstLi = this.ulElement.querySelector('.' + dropDownBaseClasses.group + ':not(.e-hide-listitem)');\n this.fixedHeaderElement.innerHTML = firstLi.innerHTML;\n };\n DropDownBase.prototype.getSortedDataSource = function (dataSource) {\n if (dataSource && this.sortOrder !== 'None') {\n var textField = this.fields.text ? this.fields.text : 'text';\n if (this.typeOfData(dataSource).typeof === 'string' || this.typeOfData(dataSource).typeof === 'number'\n || this.typeOfData(dataSource).typeof === 'boolean') {\n textField = '';\n }\n dataSource = ListBase.getDataSource(dataSource, ListBase.addSorting(this.sortOrder, textField));\n }\n return dataSource;\n };\n /**\n * Return the index of item which matched with given value in data source\n *\n * @param {string | number | boolean} value - Specifies given value.\n * @returns {number} Returns the index of the item.\n */\n DropDownBase.prototype.getIndexByValue = function (value) {\n var index;\n var listItems = this.getItems();\n for (var i = 0; i < listItems.length; i++) {\n if (!isNullOrUndefined(value) && listItems[i].getAttribute('data-value') === value.toString()) {\n index = i;\n break;\n }\n }\n return index;\n };\n /**\n * To dispatch the event manually\n *\n * @param {HTMLElement} element - Specifies the element to dispatch the event.\n * @param {string} type - Specifies the name of the event.\n * @returns {void}\n */\n DropDownBase.prototype.dispatchEvent = function (element, type) {\n var evt = document.createEvent('HTMLEvents');\n evt.initEvent(type, false, true);\n element.dispatchEvent(evt);\n };\n /**\n * To set the current fields\n *\n * @returns {void}\n */\n DropDownBase.prototype.setFields = function () {\n if (this.fields.value && !this.fields.text) {\n this.updateFields(this.fields.value, this.fields.value);\n }\n else if (!this.fields.value && this.fields.text) {\n this.updateFields(this.fields.text, this.fields.text);\n }\n else if (!this.fields.value && !this.fields.text) {\n this.updateFields('text', 'text');\n }\n };\n /**\n * reset the items list.\n *\n * @param {Object[] | string[] | number[] | DataManager | boolean[]} dataSource - Specifies the data to generate the list.\n * @param {FieldSettingsModel} fields - Maps the columns of the data table and binds the data to the component.\n * @param {Query} query - Accepts the external Query that execute along with data processing.\n * @returns {void}\n */\n DropDownBase.prototype.resetList = function (dataSource, fields, query) {\n if (this.list) {\n if ((this.element.tagName === 'SELECT' && this.element.options.length > 0)\n || (this.element.tagName === 'UL' && this.element.childNodes.length > 0)) {\n var data = dataSource instanceof Array ? (dataSource.length > 0)\n : !isNullOrUndefined(dataSource);\n if (!data && this.selectData && this.selectData.length > 0) {\n dataSource = this.selectData;\n }\n }\n this.setListData(dataSource, fields, query);\n }\n };\n DropDownBase.prototype.updateSelectElementData = function (isFiltering) {\n if (isFiltering && isNullOrUndefined(this.selectData) && this.listData && this.listData.length > 0) {\n this.selectData = this.listData;\n }\n };\n DropDownBase.prototype.updateSelection = function () {\n // This is for after added the item, need to update the selected index values.\n };\n DropDownBase.prototype.renderList = function () {\n // This is for render the list items.\n this.render();\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DropDownBase.prototype.updateDataSource = function (props) {\n this.resetList(this.dataSource);\n };\n DropDownBase.prototype.setUpdateInitial = function (props, newProp) {\n this.isDataFetched = false;\n var updateData = {};\n for (var j = 0; props.length > j; j++) {\n if (newProp[props[j]] && props[j] === 'fields') {\n this.setFields();\n updateData[props[j]] = newProp[props[j]];\n }\n else if (newProp[props[j]]) {\n updateData[props[j]] = newProp[props[j]];\n }\n }\n if (Object.keys(updateData).length > 0) {\n if (Object.keys(updateData).indexOf('dataSource') === -1) {\n updateData.dataSource = this.dataSource;\n }\n this.updateDataSource(updateData);\n }\n };\n /**\n * When property value changes happened, then onPropertyChanged method will execute the respective changes in this component.\n *\n * @param {DropDownBaseModel} newProp - Returns the dynamic property value of the component.\n * @param {DropDownBaseModel} oldProp - Returns the previous property value of the component.\n * @private\n * @returns {void}\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DropDownBase.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (this.getModuleName() === 'dropdownbase') {\n this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);\n }\n this.setUpdateInitial(['sortOrder', 'itemTemplate'], newProp);\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'query':\n case 'sortOrder':\n case 'dataSource':\n case 'itemTemplate':\n break;\n case 'enableRtl':\n this.setEnableRtl();\n break;\n case 'enabled':\n this.setEnabled();\n break;\n case 'groupTemplate':\n this.renderGroupTemplate(this.list);\n if (this.ulElement && this.fixedHeaderElement) {\n var firstLi = this.ulElement.querySelector('.' + dropDownBaseClasses.group);\n this.fixedHeaderElement.innerHTML = firstLi.innerHTML;\n }\n break;\n case 'locale':\n if (this.list && (!isNullOrUndefined(this.liCollections) && this.liCollections.length === 0)) {\n this.l10nUpdate();\n }\n break;\n case 'zIndex':\n this.setProperties({ zIndex: newProp.zIndex }, true);\n this.setZIndex();\n break;\n }\n }\n };\n /**\n * Build and render the component\n *\n * @param {boolean} isEmptyData - Specifies the component to initialize with list data or not.\n * @private\n * @returns {void}\n */\n DropDownBase.prototype.render = function (isEmptyData) {\n this.list = this.createElement('div', { className: dropDownBaseClasses.content, attrs: { 'tabindex': '0' } });\n this.list.classList.add(dropDownBaseClasses.root);\n this.setFields();\n var rippleModel = { duration: 300, selector: '.' + dropDownBaseClasses.li };\n this.rippleFun = rippleEffect(this.list, rippleModel);\n var group = this.element.querySelector('select>optgroup');\n if ((this.fields.groupBy || !isNullOrUndefined(group)) && !this.isGroupChecking) {\n EventHandler.add(this.list, 'scroll', this.setFloatingHeader, this);\n }\n if (this.getModuleName() === 'dropdownbase') {\n if (this.element.getAttribute('tabindex')) {\n this.list.setAttribute('tabindex', this.element.getAttribute('tabindex'));\n }\n removeClass([this.element], dropDownBaseClasses.root);\n this.element.style.display = 'none';\n var wrapperElement = this.createElement('div');\n this.element.parentElement.insertBefore(wrapperElement, this.element);\n wrapperElement.appendChild(this.element);\n wrapperElement.appendChild(this.list);\n }\n this.setEnableRtl();\n this.setEnabled();\n if (!isEmptyData) {\n this.initialize();\n }\n };\n /**\n * Return the module name of this component.\n *\n * @private\n * @returns {string} Return the module name of this component.\n */\n DropDownBase.prototype.getModuleName = function () {\n return 'dropdownbase';\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets all the list items bound on this component.\n *\n * @returns {Element[]}\n */\n DropDownBase.prototype.getItems = function () {\n return this.ulElement.querySelectorAll('.' + dropDownBaseClasses.li);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Adds a new item to the popup list. By default, new item appends to the list as the last item,\n * but you can insert based on the index parameter.\n *\n * @param { Object[] } items - Specifies an array of JSON data or a JSON data.\n * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.\n * @returns {void}\n\n */\n DropDownBase.prototype.addItem = function (items, itemIndex) {\n if (!this.list || (this.list.textContent === this.noRecordsTemplate && this.getModuleName() !== 'listbox')) {\n this.renderList();\n }\n if (this.sortOrder !== 'None' && isNullOrUndefined(itemIndex)) {\n var newList = [].slice.call(this.listData);\n newList.push(items);\n newList = this.getSortedDataSource(newList);\n if (this.fields.groupBy) {\n newList = ListBase.groupDataSource(newList, this.fields.properties, this.sortOrder);\n itemIndex = newList.indexOf(items);\n }\n else {\n itemIndex = newList.indexOf(items);\n }\n }\n var itemsCount = this.getItems().length;\n var selectedItemValue = this.list.querySelector('.' + dropDownBaseClasses.selected);\n items = (items instanceof Array ? items : [items]);\n var index;\n index = (isNullOrUndefined(itemIndex) || itemIndex < 0 || itemIndex > itemsCount - 1) ? itemsCount : itemIndex;\n var fields = this.fields;\n if (items && fields.groupBy) {\n items = ListBase.groupDataSource(items, fields.properties);\n }\n var liCollections = [];\n for (var i = 0; i < items.length; i++) {\n var item = items[i];\n var isHeader = item.isHeader;\n var li = this.createElement('li', { className: isHeader ? dropDownBaseClasses.group : dropDownBaseClasses.li, id: 'option-add-' + i });\n var itemText = item instanceof Object ? getValue(fields.text, item) : item;\n if (isHeader) {\n li.innerText = itemText;\n }\n if (this.itemTemplate && !isHeader) {\n var compiledString = compile(this.itemTemplate);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var addItemTemplate = compiledString(item, this, 'itemTemplate', this.itemTemplateId, this.isStringTemplate, null, li);\n if (addItemTemplate) {\n append(addItemTemplate, li);\n }\n }\n else if (!isHeader) {\n li.appendChild(document.createTextNode(itemText));\n }\n li.setAttribute('data-value', item instanceof Object ? getValue(fields.value, item) : item);\n li.setAttribute('role', 'option');\n this.notify('addItem', { module: 'CheckBoxSelection', item: li });\n liCollections.push(li);\n this.listData.push(item);\n if (this.sortOrder === 'None' && isNullOrUndefined(itemIndex) && index === 0) {\n index = null;\n }\n this.updateActionCompleteData(li, item, index);\n //Listbox event\n this.trigger('beforeItemRender', { element: li, item: item });\n }\n if (itemsCount === 0 && isNullOrUndefined(this.list.querySelector('ul'))) {\n this.list.innerHTML = '';\n this.list.classList.remove(dropDownBaseClasses.noData);\n this.list.appendChild(this.ulElement);\n this.liCollections = liCollections;\n append(liCollections, this.ulElement);\n this.updateAddItemList(this.list, itemsCount);\n }\n else {\n if (this.getModuleName() === 'listbox' && itemsCount === 0) {\n this.ulElement.innerHTML = '';\n }\n var attr = [];\n for (var i = 0; i < items.length; i++) {\n var listGroupItem = this.ulElement.querySelectorAll('.e-list-group-item');\n for (var j = 0; j < listGroupItem.length; j++) {\n attr[j] = listGroupItem[j].innerText;\n }\n if (attr.indexOf(liCollections[i].innerText) > -1 && fields.groupBy) {\n for (var j = 0; j < listGroupItem.length; j++) {\n if (attr[j] === liCollections[i].innerText) {\n if (this.sortOrder === 'None') {\n this.ulElement.insertBefore(liCollections[i + 1], listGroupItem[j + 1]);\n }\n else {\n this.ulElement.insertBefore(liCollections[i + 1], this.ulElement.childNodes[itemIndex]);\n }\n i = i + 1;\n break;\n }\n }\n }\n else {\n if (this.liCollections[index]) {\n this.liCollections[index].parentNode.insertBefore(liCollections[i], this.liCollections[index]);\n }\n else {\n this.ulElement.appendChild(liCollections[i]);\n }\n }\n var tempLi = [].slice.call(this.liCollections);\n tempLi.splice(index, 0, liCollections[i]);\n this.liCollections = tempLi;\n index += 1;\n if (this.getModuleName() === 'multiselect') {\n this.updateDataList();\n }\n }\n }\n if (selectedItemValue || itemIndex === 0) {\n this.updateSelection();\n }\n };\n DropDownBase.prototype.validationAttribute = function (target, hidden) {\n var name = target.getAttribute('name') ? target.getAttribute('name') : target.getAttribute('id');\n hidden.setAttribute('name', name);\n target.removeAttribute('name');\n var attributes = ['required', 'aria-required', 'form'];\n for (var i = 0; i < attributes.length; i++) {\n if (!target.getAttribute(attributes[i])) {\n continue;\n }\n var attr = target.getAttribute(attributes[i]);\n hidden.setAttribute(attributes[i], attr);\n target.removeAttribute(attributes[i]);\n }\n };\n DropDownBase.prototype.setZIndex = function () {\n // this is for component wise\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DropDownBase.prototype.updateActionCompleteData = function (li, item, index) {\n // this is for ComboBox custom value\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DropDownBase.prototype.updateAddItemList = function (list, itemCount) {\n // this is for multiselect add item\n };\n DropDownBase.prototype.updateDataList = function () {\n // this is for multiselect update list items\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets the data Object that matches the given value.\n *\n * @param { string | number } value - Specifies the value of the list item.\n * @returns {Object}\n */\n DropDownBase.prototype.getDataByValue = function (value) {\n if (!isNullOrUndefined(this.listData)) {\n var type = this.typeOfData(this.listData).typeof;\n if (type === 'string' || type === 'number' || type === 'boolean') {\n for (var _i = 0, _a = this.listData; _i < _a.length; _i++) {\n var item = _a[_i];\n if (!isNullOrUndefined(item) && item === value) {\n return item;\n }\n }\n }\n else {\n for (var _b = 0, _c = this.listData; _b < _c.length; _b++) {\n var item = _c[_b];\n if (!isNullOrUndefined(item) && getValue((this.fields.value ? this.fields.value : 'value'), item) === value) {\n return item;\n }\n }\n }\n }\n return null;\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Removes the component from the DOM and detaches all its related event handlers. It also removes the attributes and classes.\n *\n * @method destroy\n * @returns {void}\n */\n DropDownBase.prototype.destroy = function () {\n if (document.body.contains(this.list)) {\n EventHandler.remove(this.list, 'scroll', this.setFloatingHeader);\n if (!isNullOrUndefined(this.rippleFun)) {\n this.rippleFun();\n }\n detach(this.list);\n }\n _super.prototype.destroy.call(this);\n };\n __decorate([\n Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)\n ], DropDownBase.prototype, \"fields\", void 0);\n __decorate([\n Property(false)\n ], DropDownBase.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(null)\n ], DropDownBase.prototype, \"itemTemplate\", void 0);\n __decorate([\n Property(null)\n ], DropDownBase.prototype, \"groupTemplate\", void 0);\n __decorate([\n Property('No records found')\n ], DropDownBase.prototype, \"noRecordsTemplate\", void 0);\n __decorate([\n Property('Request failed')\n ], DropDownBase.prototype, \"actionFailureTemplate\", void 0);\n __decorate([\n Property('None')\n ], DropDownBase.prototype, \"sortOrder\", void 0);\n __decorate([\n Property(true)\n ], DropDownBase.prototype, \"enabled\", void 0);\n __decorate([\n Property([])\n ], DropDownBase.prototype, \"dataSource\", void 0);\n __decorate([\n Property(null)\n ], DropDownBase.prototype, \"query\", void 0);\n __decorate([\n Property('StartsWith')\n ], DropDownBase.prototype, \"filterType\", void 0);\n __decorate([\n Property(true)\n ], DropDownBase.prototype, \"ignoreCase\", void 0);\n __decorate([\n Property(1000)\n ], DropDownBase.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], DropDownBase.prototype, \"ignoreAccent\", void 0);\n __decorate([\n Property()\n ], DropDownBase.prototype, \"locale\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"actionBegin\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"actionComplete\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"actionFailure\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"select\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"dataBound\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"destroyed\", void 0);\n DropDownBase = __decorate([\n NotifyPropertyChanges\n ], DropDownBase);\n return DropDownBase;\n}(Component));\nexport { DropDownBase };\n","/**\n * IncrementalSearch module file\n */\nvar queryString = '';\nvar prevString = '';\nvar matches = [];\nvar activeClass = 'e-active';\nvar prevElementId = '';\n/**\n * Search and focus the list item based on key code matches with list text content\n *\n * @param { number } keyCode - Specifies the key code which pressed on keyboard events.\n * @param { HTMLElement[]} items - Specifies an array of HTMLElement, from which matches find has done.\n * @param { number } selectedIndex - Specifies the selected item in list item, so that search will happen\n * after selected item otherwise it will do from initial.\n * @param { boolean } ignoreCase - Specifies the case consideration when search has done.\n * @param {string} elementId - Specifies the list element ID.\n * @returns {Element} Returns list item based on key code matches with list text content.\n */\nexport function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, elementId) {\n queryString += String.fromCharCode(keyCode);\n setTimeout(function () {\n queryString = '';\n }, 1000);\n var index;\n queryString = ignoreCase ? queryString.toLowerCase() : queryString;\n if (prevElementId === elementId && prevString === queryString) {\n for (var i = 0; i < matches.length; i++) {\n if (matches[i].classList.contains(activeClass)) {\n index = i;\n break;\n }\n }\n index = index + 1;\n return matches[index] ? matches[index] : matches[0];\n }\n else {\n var listItems = items;\n var strLength = queryString.length;\n var text = void 0;\n var item = void 0;\n selectedIndex = selectedIndex ? selectedIndex + 1 : 0;\n var i = selectedIndex;\n matches = [];\n do {\n if (i === listItems.length) {\n i = -1;\n }\n if (i === -1) {\n index = 0;\n }\n else {\n index = i;\n }\n item = listItems[index];\n text = ignoreCase ? item.innerText.toLowerCase() : item.innerText;\n if (text.substr(0, strLength) === queryString) {\n matches.push(listItems[index]);\n }\n i++;\n } while (i !== selectedIndex);\n prevString = queryString;\n prevElementId = elementId;\n return matches[0];\n }\n}\n/**\n * Search the list item based on given input value matches with search type.\n *\n * @param {string} inputVal - Specifies the given input value.\n * @param {HTMLElement[]} items - Specifies the list items.\n * @param {SearchType} searchType - Specifies the filter type.\n * @param {boolean} ignoreCase - Specifies the case sensitive option for search operation.\n * @returns {Element | number} Returns the search matched items.\n */\nexport function Search(inputVal, items, searchType, ignoreCase) {\n var listItems = items;\n ignoreCase = ignoreCase !== undefined && ignoreCase !== null ? ignoreCase : true;\n var itemData = { item: null, index: null };\n if (inputVal && inputVal.length) {\n var strLength = inputVal.length;\n var queryStr = ignoreCase ? inputVal.toLocaleLowerCase() : inputVal;\n for (var i = 0, itemsData = listItems; i < itemsData.length; i++) {\n var item = itemsData[i];\n var text = (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\\s+|\\s+$/g, '');\n if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr)) {\n itemData.item = item;\n itemData.index = i;\n return { item: item, index: i };\n }\n }\n return itemData;\n }\n return itemData;\n}\nexport function resetIncrementalSearchValues(elementId) {\n if (prevElementId === elementId) {\n prevElementId = '';\n prevString = '';\n queryString = '';\n matches = [];\n }\n}\n","/**\n * FloatLable Moduel\n * Specifies whether to display the floating label above the input element.\n */\nimport { removeClass, addClass, detach } from '@syncfusion/ej2-base';\nimport { attributes, isNullOrUndefined, createElement } from '@syncfusion/ej2-base';\nvar FLOATLINE = 'e-float-line';\nvar FLOATTEXT = 'e-float-text';\nvar LABELTOP = 'e-label-top';\nvar LABELBOTTOM = 'e-label-bottom';\n/* eslint-disable valid-jsdoc */\n/**\n * Function to create Float Label element.\n *\n * @param {HTMLDivElement} overAllWrapper - Overall wrapper of multiselect.\n * @param {HTMLElement} searchWrapper - Search wrapper of multiselect.\n * @param {HTMLElement} element - The given html element.\n * @param {HTMLInputElement} inputElement - Specify the input wrapper.\n * @param {number[] | string[] | boolean[]} value - Value of the MultiSelect.\n * @param {FloatLabelType} floatLabelType - Specify the FloatLabel Type.\n * @param {string} placeholder - Specify the PlaceHolder text.\n */\nexport function createFloatLabel(overAllWrapper, searchWrapper, element, inputElement, value, floatLabelType, placeholder) {\n var floatLinelement = createElement('span', { className: FLOATLINE });\n var floatLabelElement = createElement('label', { className: FLOATTEXT });\n if (!isNullOrUndefined(element.id) && element.id !== '') {\n floatLabelElement.id = 'label_' + element.id.replace(/ /g, '_');\n attributes(element, { 'aria-labelledby': floatLabelElement.id });\n }\n if (!isNullOrUndefined(inputElement.placeholder) && inputElement.placeholder !== '') {\n floatLabelElement.innerText = encodePlaceholder(inputElement.placeholder);\n inputElement.removeAttribute('placeholder');\n }\n floatLabelElement.innerText = encodePlaceholder(placeholder);\n searchWrapper.appendChild(floatLinelement);\n searchWrapper.appendChild(floatLabelElement);\n overAllWrapper.classList.add('e-float-input');\n updateFloatLabelState(value, floatLabelElement);\n if (floatLabelType === 'Always') {\n if (floatLabelElement.classList.contains(LABELBOTTOM)) {\n removeClass([floatLabelElement], LABELBOTTOM);\n }\n addClass([floatLabelElement], LABELTOP);\n }\n}\n/**\n * Function to update status of the Float Label element.\n *\n * @param {string[] | number[] | boolean[]} value - Value of the MultiSelect.\n * @param {HTMLElement} label - Float label element.\n */\nexport function updateFloatLabelState(value, label) {\n if (value && value.length > 0) {\n addClass([label], LABELTOP);\n removeClass([label], LABELBOTTOM);\n }\n else {\n removeClass([label], LABELTOP);\n addClass([label], LABELBOTTOM);\n }\n}\n/**\n * Function to remove Float Label element.\n *\n * @param {HTMLDivElement} overAllWrapper - Overall wrapper of multiselect.\n * @param {HTMLDivElement} componentWrapper - Wrapper element of multiselect.\n * @param {HTMLElement} searchWrapper - Search wrapper of multiselect.\n * @param {HTMLInputElement} inputElement - Specify the input wrapper.\n * @param {number[] | string[] | boolean[]} value - Value of the MultiSelect.\n * @param {FloatLabelType} floatLabelType - Specify the FloatLabel Type.\n * @param {string} placeholder - Specify the PlaceHolder text.\n */\nexport function removeFloating(overAllWrapper, componentWrapper, searchWrapper, inputElement, value, floatLabelType, placeholder) {\n var placeholderElement = componentWrapper.querySelector('.' + FLOATTEXT);\n var floatLine = componentWrapper.querySelector('.' + FLOATLINE);\n var placeholderText;\n if (!isNullOrUndefined(placeholderElement)) {\n placeholderText = placeholderElement.innerText;\n detach(searchWrapper.querySelector('.' + FLOATTEXT));\n setPlaceHolder(value, inputElement, placeholderText);\n if (!isNullOrUndefined(floatLine)) {\n detach(searchWrapper.querySelector('.' + FLOATLINE));\n }\n }\n else {\n placeholderText = (placeholder !== null) ? placeholder : '';\n setPlaceHolder(value, inputElement, placeholderText);\n }\n overAllWrapper.classList.remove('e-float-input');\n}\n/**\n * Function to set the placeholder to the element.\n *\n * @param {number[] | string[] | boolean[]} value - Value of the MultiSelect.\n * @param {HTMLInputElement} inputElement - Specify the input wrapper.\n * @param {string} placeholder - Specify the PlaceHolder text.\n */\nexport function setPlaceHolder(value, inputElement, placeholder) {\n if (value && value.length) {\n inputElement.placeholder = '';\n }\n else {\n inputElement.placeholder = placeholder;\n }\n}\n/**\n * Function for focusing the Float Element.\n *\n * @param {HTMLDivElement} overAllWrapper - Overall wrapper of multiselect.\n * @param {HTMLDivElement} componentWrapper - Wrapper element of multiselect.\n */\nexport function floatLabelFocus(overAllWrapper, componentWrapper) {\n overAllWrapper.classList.add('e-input-focus');\n var label = componentWrapper.querySelector('.' + FLOATTEXT);\n if (!isNullOrUndefined(label)) {\n addClass([label], LABELTOP);\n if (label.classList.contains(LABELBOTTOM)) {\n removeClass([label], LABELBOTTOM);\n }\n }\n}\n/* eslint-disable @typescript-eslint/no-unused-vars */\n/**\n * Function to focus the Float Label element.\n *\n * @param {HTMLDivElement} overAllWrapper - Overall wrapper of multiselect.\n * @param {HTMLDivElement} componentWrapper - Wrapper element of multiselect.\n * @param {number[] | string[] | boolean[]} value - Value of the MultiSelect.\n * @param {FloatLabelType} floatLabelType - Specify the FloatLabel Type.\n * @param {string} placeholder - Specify the PlaceHolder text.\n */\nexport function floatLabelBlur(overAllWrapper, componentWrapper, value, floatLabelType, placeholder) {\n /* eslint-enable @typescript-eslint/no-unused-vars */\n overAllWrapper.classList.remove('e-input-focus');\n var label = componentWrapper.querySelector('.' + FLOATTEXT);\n if (value && value.length <= 0 && floatLabelType === 'Auto' && !isNullOrUndefined(label)) {\n if (label.classList.contains(LABELTOP)) {\n removeClass([label], LABELTOP);\n }\n addClass([label], LABELBOTTOM);\n }\n}\nexport function encodePlaceholder(placeholder) {\n var result = '';\n if (!isNullOrUndefined(placeholder) && placeholder !== '') {\n var spanElement = document.createElement('span');\n spanElement.innerHTML = '
';\n var hiddenInput = (spanElement.children[0]);\n result = hiddenInput.placeholder;\n }\n return result;\n}\n/* eslint-enable valid-jsdoc */\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n// eslint-disable-next-line @typescript-eslint/triple-slash-reference\n///
\nimport { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-base';\nimport { FieldSettings } from '../drop-down-base/drop-down-base';\nimport { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\nimport { attributes, setValue, SanitizeHtmlHelper, getValue } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, extend } from '@syncfusion/ej2-base';\nimport { EventHandler, Property, Event, compile, L10n } from '@syncfusion/ej2-base';\nimport { Animation, Browser, prepend, Complex } from '@syncfusion/ej2-base';\nimport { Search } from '../common/incremental-search';\nimport { append, addClass, removeClass, closest, detach, remove, select, selectAll } from '@syncfusion/ej2-base';\nimport { getUniqueID, formatUnit, isNullOrUndefined, isUndefined } from '@syncfusion/ej2-base';\nimport { DataManager, Query, Predicate } from '@syncfusion/ej2-data';\nimport { createFloatLabel, removeFloating, floatLabelFocus, floatLabelBlur, encodePlaceholder } from './float-label';\nvar FOCUS = 'e-input-focus';\nvar DISABLED = 'e-disabled';\nvar OVER_ALL_WRAPPER = 'e-multiselect e-input-group e-control-wrapper';\nvar ELEMENT_WRAPPER = 'e-multi-select-wrapper';\nvar ELEMENT_MOBILE_WRAPPER = 'e-mob-wrapper';\nvar HIDE_LIST = 'e-hide-listitem';\nvar DELIMITER_VIEW = 'e-delim-view';\nvar CHIP_WRAPPER = 'e-chips-collection';\nvar CHIP = 'e-chips';\nvar CHIP_CONTENT = 'e-chipcontent';\nvar CHIP_CLOSE = 'e-chips-close';\nvar CHIP_SELECTED = 'e-chip-selected';\nvar SEARCHBOX_WRAPPER = 'e-searcher';\nvar DELIMITER_VIEW_WRAPPER = 'e-delimiter';\nvar ZERO_SIZE = 'e-zero-size';\nvar REMAIN_WRAPPER = 'e-remain';\nvar CLOSEICON_CLASS = 'e-chips-close e-close-hooker';\nvar DELIMITER_WRAPPER = 'e-delim-values';\nvar POPUP_WRAPPER = 'e-ddl e-popup e-multi-select-list-wrapper';\nvar INPUT_ELEMENT = 'e-dropdownbase';\nvar RTL_CLASS = 'e-rtl';\nvar CLOSE_ICON_HIDE = 'e-close-icon-hide';\nvar MOBILE_CHIP = 'e-mob-chip';\nvar FOOTER = 'e-ddl-footer';\nvar HEADER = 'e-ddl-header';\nvar DISABLE_ICON = 'e-ddl-disable-icon';\nvar SPINNER_CLASS = 'e-ms-spinner-icon';\nvar HIDDEN_ELEMENT = 'e-multi-hidden';\nvar destroy = 'destroy';\nvar dropdownIcon = 'e-input-group-icon e-ddl-icon';\nvar iconAnimation = 'e-icon-anim';\nvar TOTAL_COUNT_WRAPPER = 'e-delim-total';\nvar BOX_ELEMENT = 'e-multiselect-box';\nvar FILTERPARENT = 'e-filter-parent';\nvar CUSTOM_WIDTH = 'e-search-custom-width';\nvar FILTERINPUT = 'e-input-filter';\n/**\n * The Multiselect allows the user to pick a more than one value from list of predefined values.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar MultiSelect = /** @class */ (function (_super) {\n __extends(MultiSelect, _super);\n /**\n * Constructor for creating the DropDownList widget.\n *\n * @param {MultiSelectModel} option - Specifies the MultiSelect model.\n * @param {string | HTMLElement} element - Specifies the element to render as component.\n * @private\n */\n function MultiSelect(option, element) {\n var _this = _super.call(this, option, element) || this;\n _this.clearIconWidth = 0;\n _this.isValidKey = false;\n _this.selectAllEventData = [];\n _this.selectAllEventEle = [];\n _this.scrollFocusStatus = false;\n _this.keyDownStatus = false;\n return _this;\n }\n MultiSelect.prototype.enableRTL = function (state) {\n if (state) {\n this.overAllWrapper.classList.add(RTL_CLASS);\n }\n else {\n this.overAllWrapper.classList.remove(RTL_CLASS);\n }\n if (this.popupObj) {\n this.popupObj.enableRtl = state;\n this.popupObj.dataBind();\n }\n };\n MultiSelect.prototype.requiredModules = function () {\n var modules = [];\n if (this.mode === 'CheckBox') {\n this.isGroupChecking = this.enableGroupCheckBox;\n if (this.enableGroupCheckBox) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.enableSelectionOrder = false;\n this.isProtectedOnChange = prevOnChange;\n }\n this.allowCustomValue = false;\n this.hideSelectedItem = false;\n this.closePopupOnSelect = false;\n modules.push({\n member: 'CheckBoxSelection',\n args: [this]\n });\n }\n return modules;\n };\n MultiSelect.prototype.updateHTMLAttribute = function () {\n if (Object.keys(this.htmlAttributes).length) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var htmlAttr = _a[_i];\n switch (htmlAttr) {\n case 'class': {\n var updatedClassValue = (this.htmlAttributes[htmlAttr].replace(/\\s+/g, ' ')).trim();\n if (updatedClassValue !== '') {\n addClass([this.overAllWrapper], updatedClassValue.split(' '));\n addClass([this.popupWrapper], updatedClassValue.split(' '));\n }\n break;\n }\n case 'disabled':\n this.enable(false);\n break;\n case 'placeholder':\n if (!this.placeholder) {\n this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n this.setProperties({ placeholder: this.inputElement.placeholder }, true);\n this.refreshPlaceHolder();\n }\n break;\n default: {\n var defaultAttr = ['id'];\n var validateAttr = ['name', 'required', 'aria-required', 'form'];\n var containerAttr = ['title', 'role', 'style', 'class'];\n if (defaultAttr.indexOf(htmlAttr) > -1) {\n this.element.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n else if (htmlAttr.indexOf('data') === 0 || validateAttr.indexOf(htmlAttr) > -1) {\n this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n else if (containerAttr.indexOf(htmlAttr) > -1) {\n this.overAllWrapper.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n else {\n this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n break;\n }\n }\n }\n }\n };\n MultiSelect.prototype.updateReadonly = function (state) {\n if (state || this.mode === 'CheckBox') {\n this.inputElement.setAttribute('readonly', 'true');\n }\n else {\n this.inputElement.removeAttribute('readonly');\n }\n };\n MultiSelect.prototype.updateClearButton = function (state) {\n if (state) {\n if (this.overAllClear.parentNode) {\n this.overAllClear.style.display = '';\n }\n else {\n this.componentWrapper.appendChild(this.overAllClear);\n }\n this.componentWrapper.classList.remove(CLOSE_ICON_HIDE);\n }\n else {\n this.overAllClear.style.display = 'none';\n this.componentWrapper.classList.add(CLOSE_ICON_HIDE);\n }\n };\n MultiSelect.prototype.updateCssClass = function () {\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n var updatedCssClassValues = this.cssClass;\n updatedCssClassValues = (this.cssClass.replace(/\\s+/g, ' ')).trim();\n if (updatedCssClassValues !== '') {\n addClass([this.overAllWrapper], updatedCssClassValues.split(' '));\n addClass([this.popupWrapper], updatedCssClassValues.split(' '));\n }\n }\n };\n MultiSelect.prototype.updateOldPropCssClass = function (oldClass) {\n if (!isNullOrUndefined(oldClass) && oldClass !== '') {\n oldClass = (oldClass.replace(/\\s+/g, ' ')).trim();\n if (oldClass !== '') {\n removeClass([this.overAllWrapper], oldClass.split(' '));\n removeClass([this.popupWrapper], oldClass.split(' '));\n }\n }\n };\n MultiSelect.prototype.onPopupShown = function () {\n var _this = this;\n if (Browser.isDevice && (this.mode === 'CheckBox' && this.allowFiltering)) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy_1 = this;\n window.onpopstate = function () {\n proxy_1.hidePopup();\n proxy_1.inputElement.focus();\n };\n history.pushState({}, '');\n }\n var animModel = { name: 'FadeIn', duration: 100 };\n var eventArgs = { popup: this.popupObj, cancel: false, animation: animModel };\n this.trigger('open', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n _this.focusAtFirstListItem();\n document.body.appendChild(_this.popupObj.element);\n if (_this.mode === 'CheckBox' && _this.enableGroupCheckBox && !isNullOrUndefined(_this.fields.groupBy)) {\n _this.updateListItems(_this.list.querySelectorAll('li.e-list-item'), _this.mainList.querySelectorAll('li.e-list-item'));\n }\n if (_this.mode === 'CheckBox' || _this.showDropDownIcon) {\n addClass([_this.overAllWrapper], [iconAnimation]);\n }\n _this.refreshPopup();\n _this.renderReactTemplates();\n _this.popupObj.show(eventArgs.animation, (_this.zIndex === 1000) ? _this.element : null);\n attributes(_this.inputElement, { 'aria-expanded': 'true' });\n if (_this.isFirstClick) {\n _this.loadTemplate();\n }\n }\n });\n };\n MultiSelect.prototype.updateListItems = function (listItems, mainListItems) {\n for (var i = 0; i < listItems.length; i++) {\n this.findGroupStart(listItems[i]);\n this.findGroupStart(mainListItems[i]);\n }\n this.deselectHeader();\n };\n MultiSelect.prototype.loadTemplate = function () {\n this.refreshListItems(null);\n if (this.mode === 'CheckBox') {\n this.removeFocus();\n }\n this.notify('reOrder', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', e: this });\n };\n MultiSelect.prototype.setScrollPosition = function () {\n if (((!this.hideSelectedItem && this.mode !== 'CheckBox') || (this.mode === 'CheckBox' && !this.enableSelectionOrder)) &&\n (!isNullOrUndefined(this.value) && (this.value.length > 0))) {\n var valueEle = this.findListElement((this.hideSelectedItem ? this.ulElement : this.list), 'li', 'data-value', this.value[this.value.length - 1]);\n if (!isNullOrUndefined(valueEle)) {\n this.scrollBottom(valueEle);\n }\n }\n };\n MultiSelect.prototype.focusAtFirstListItem = function () {\n if (this.ulElement && this.ulElement.querySelector('li.'\n + dropDownBaseClasses.li)) {\n var element = void 0;\n if (this.mode === 'CheckBox') {\n this.removeFocus();\n return;\n }\n else {\n element = this.ulElement.querySelector('li.'\n + dropDownBaseClasses.li + ':not(.'\n + HIDE_LIST + ')');\n }\n if (element !== null) {\n this.removeFocus();\n this.addListFocus(element);\n }\n }\n };\n MultiSelect.prototype.focusAtLastListItem = function (data) {\n var activeElement;\n if (data) {\n activeElement = Search(data, this.liCollections, 'StartsWith', this.ignoreCase);\n }\n else {\n if (this.value && this.value.length) {\n Search(this.value[this.value.length - 1], this.liCollections, 'StartsWith', this.ignoreCase);\n }\n else {\n activeElement = null;\n }\n }\n if (activeElement && activeElement.item !== null) {\n this.addListFocus(activeElement.item);\n this.scrollBottom(activeElement.item, activeElement.index);\n }\n };\n MultiSelect.prototype.getAriaAttributes = function () {\n var ariaAttributes = {\n 'aria-disabled': 'false',\n 'aria-owns': this.element.id + '_options',\n 'role': 'listbox',\n 'aria-multiselectable': 'true',\n 'aria-activedescendant': 'null',\n 'aria-haspopup': 'true',\n 'aria-expanded': 'false'\n };\n return ariaAttributes;\n };\n MultiSelect.prototype.updateListARIA = function () {\n attributes(this.ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });\n var disableStatus = (this.inputElement.disabled) ? true : false;\n attributes(this.inputElement, this.getAriaAttributes());\n if (disableStatus) {\n attributes(this.inputElement, { 'aria-disabled': 'true' });\n }\n this.ensureAriaDisabled((disableStatus) ? 'true' : 'false');\n };\n MultiSelect.prototype.ensureAriaDisabled = function (status) {\n if (this.htmlAttributes && this.htmlAttributes['aria-disabled']) {\n var attr = this.htmlAttributes;\n extend(attr, { 'aria-disabled': status }, attr);\n this.setProperties({ htmlAttributes: attr }, true);\n }\n };\n MultiSelect.prototype.removelastSelection = function (e) {\n var elements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP);\n var value = elements[elements.length - 1].getAttribute('data-value');\n if (!isNullOrUndefined(this.value)) {\n this.tempValues = this.value.slice();\n }\n var customValue = this.getFormattedValue(value);\n if (this.allowCustomValue && (value !== 'false' && customValue === false || (!isNullOrUndefined(customValue) &&\n customValue.toString() === 'NaN'))) {\n customValue = value;\n }\n this.removeValue(customValue, e);\n this.removeChipSelection();\n this.updateDelimeter(this.delimiterChar, e);\n this.makeTextBoxEmpty();\n if (this.mainList && this.listData) {\n this.refreshSelection();\n }\n this.checkPlaceholderSize();\n };\n MultiSelect.prototype.onActionFailure = function (e) {\n _super.prototype.onActionFailure.call(this, e);\n this.renderPopup();\n this.onPopupShown();\n };\n MultiSelect.prototype.targetElement = function () {\n this.targetInputElement = this.inputElement;\n if (this.mode === 'CheckBox' && this.allowFiltering) {\n this.notify('targetElement', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n }\n return this.targetInputElement.value;\n };\n MultiSelect.prototype.getForQuery = function (valuecheck) {\n var predicate;\n var field = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;\n for (var i = 0; i < valuecheck.length; i++) {\n if (i === 0) {\n predicate = new Predicate(field, 'equal', valuecheck[i]);\n }\n else {\n predicate = predicate.or(field, 'equal', valuecheck[i]);\n }\n }\n return this.getQuery(this.query).where(predicate);\n };\n /* eslint-disable @typescript-eslint/no-unused-vars */\n MultiSelect.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {\n /* eslint-enable @typescript-eslint/no-unused-vars */\n _super.prototype.onActionComplete.call(this, ulElement, list, e);\n this.updateSelectElementData(this.allowFiltering);\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy = this;\n if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {\n for (var i = 0; i < this.value.length; i++) {\n var checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', proxy.value[i]);\n if (!checkEle) {\n this.value.splice(i, 1);\n i -= 1;\n }\n }\n }\n this.updateActionList(ulElement, list, e);\n if (this.dataSource instanceof DataManager && this.mode === 'CheckBox' && this.allowFiltering) {\n this.removeFocus();\n }\n };\n /* eslint-disable @typescript-eslint/no-unused-vars */\n MultiSelect.prototype.updateActionList = function (ulElement, list, e, isUpdated) {\n /* eslint-enable @typescript-eslint/no-unused-vars */\n if (this.mode === 'CheckBox' && this.showSelectAll) {\n this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n }\n if (!this.mainList && !this.mainData) {\n this.mainList = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;\n this.mainData = list;\n this.mainListCollection = this.liCollections;\n }\n else if (!isNullOrUndefined(this.mainData) && this.mainData.length === 0) {\n this.mainData = list;\n }\n if ((this.remoteCustomValue || list.length <= 0) && this.allowCustomValue && this.inputFocus && this.allowFiltering &&\n this.inputElement.value && this.inputElement.value !== '') {\n this.checkForCustomValue(this.tempQuery, this.fields);\n return;\n }\n if (this.value && this.value.length && ((this.mode !== 'CheckBox' && this.inputElement.value.trim() !== '') ||\n this.mode === 'CheckBox' || ((this.keyCode === 8 || this.keyCode === 46) && this.allowFiltering &&\n this.allowCustomValue && this.dataSource instanceof DataManager && this.inputElement.value === ''))) {\n this.refreshSelection();\n }\n this.updateListARIA();\n this.unwireListEvents();\n this.wireListEvents();\n if (!isNullOrUndefined(this.setInitialValue)) {\n this.setInitialValue();\n }\n if (!isNullOrUndefined(this.selectAllAction)) {\n this.selectAllAction();\n }\n if (this.setDynValue) {\n if (!isNullOrUndefined(this.text) && (isNullOrUndefined(this.value) || this.value.length === 0)) {\n this.initialTextUpdate();\n }\n this.initialValueUpdate();\n this.initialUpdate();\n this.refreshPlaceHolder();\n if (this.mode !== 'CheckBox' && this.changeOnBlur) {\n this.updateValueState(null, this.value, null);\n }\n }\n this.renderPopup();\n if (this.beforePopupOpen) {\n this.beforePopupOpen = false;\n this.onPopupShown();\n }\n };\n MultiSelect.prototype.refreshSelection = function () {\n var value;\n var element;\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n if (!isNullOrUndefined(this.value)) {\n for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {\n value = this.value[index];\n element = this.findListElement(this.list, 'li', 'data-value', value);\n if (element) {\n addClass([element], className);\n if (this.hideSelectedItem && element.previousSibling\n && element.previousElementSibling.classList.contains(dropDownBaseClasses.group)\n && (!element.nextElementSibling ||\n element.nextElementSibling.classList.contains(dropDownBaseClasses.group))) {\n addClass([element.previousElementSibling], className);\n }\n if (this.hideSelectedItem && this.fields.groupBy && !element.previousElementSibling.classList.contains(HIDE_LIST)) {\n this.hideGroupItem(value);\n }\n if (this.hideSelectedItem && element.classList.contains(dropDownBaseClasses.focus)) {\n removeClass([element], dropDownBaseClasses.focus);\n var listEle = element.parentElement.querySelectorAll('.' +\n dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')');\n if (listEle.length > 0) {\n addClass([listEle[0]], dropDownBaseClasses.focus);\n }\n else {\n this.ulElement = this.ulElement.cloneNode ? this.ulElement.cloneNode(true) : this.ulElement;\n if (!(this.list && this.list.querySelectorAll('.' + dropDownBaseClasses.li).length > 0)) {\n this.l10nUpdate();\n addClass([this.list], dropDownBaseClasses.noData);\n }\n }\n }\n element.setAttribute('aria-selected', 'true');\n if (this.mode === 'CheckBox' && element.classList.contains('e-active')) {\n var ariaValue = element.firstElementChild.getAttribute('aria-checked');\n if (isNullOrUndefined(ariaValue) || ariaValue === 'false') {\n var args = {\n module: 'CheckBoxSelection',\n enable: this.mode === 'CheckBox',\n li: element,\n e: null\n };\n this.notify('updatelist', args);\n }\n }\n }\n }\n }\n this.checkSelectAll();\n this.checkMaxSelection();\n };\n MultiSelect.prototype.hideGroupItem = function (value) {\n var element;\n var element1;\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n element1 = element = this.findListElement(this.ulElement, 'li', 'data-value', value);\n var i = 0;\n var j = 0;\n var temp = true;\n var temp1 = true;\n do {\n if (element && element.previousElementSibling\n && (!element.previousElementSibling.classList.contains(HIDE_LIST) &&\n element.previousElementSibling.classList.contains(dropDownBaseClasses.li))) {\n temp = false;\n }\n if (!temp || !element || (element.previousElementSibling\n && element.previousElementSibling.classList.contains(dropDownBaseClasses.group))) {\n i = 10;\n }\n else {\n element = element.previousElementSibling;\n }\n if (element1 && element1.nextElementSibling\n && (!element1.nextElementSibling.classList.contains(HIDE_LIST) &&\n element1.nextElementSibling.classList.contains(dropDownBaseClasses.li))) {\n temp1 = false;\n }\n if (!temp1 || !element1 || (element1.nextElementSibling\n && element1.nextElementSibling.classList.contains(dropDownBaseClasses.group))) {\n j = 10;\n }\n else {\n element1 = element1.nextElementSibling;\n }\n } while (i < 10 || j < 10);\n if (temp && temp1 && !element.previousElementSibling.classList.contains(HIDE_LIST)) {\n addClass([element.previousElementSibling], className);\n }\n else if (temp && temp1 && element.previousElementSibling.classList.contains(HIDE_LIST)) {\n removeClass([element.previousElementSibling], className);\n }\n };\n MultiSelect.prototype.getValidLi = function () {\n var liElement = this.ulElement.querySelector('li.' + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')');\n return (!isNullOrUndefined(liElement) ? liElement : this.liCollections[0]);\n };\n MultiSelect.prototype.checkSelectAll = function () {\n var groupItemLength = this.list.querySelectorAll('li.e-list-group-item.e-active').length;\n var listItem = this.list.querySelectorAll('li.e-list-item');\n var searchCount = this.list.querySelectorAll('li.' + dropDownBaseClasses.li).length;\n var searchActiveCount = this.list.querySelectorAll('li.' + dropDownBaseClasses.selected).length;\n if (this.enableGroupCheckBox && !isNullOrUndefined(this.fields.groupBy)) {\n searchActiveCount = searchActiveCount - groupItemLength;\n }\n if ((searchCount === searchActiveCount || searchActiveCount === this.maximumSelectionLength)\n && (this.mode === 'CheckBox' && this.showSelectAll)) {\n this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'check' });\n }\n else if ((searchCount !== searchActiveCount) && (this.mode === 'CheckBox' && this.showSelectAll)) {\n this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'uncheck' });\n }\n if (this.enableGroupCheckBox && this.fields.groupBy && !this.enableSelectionOrder) {\n for (var i = 0; i < listItem.length; i++) {\n this.findGroupStart(listItem[i]);\n }\n this.deselectHeader();\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n MultiSelect.prototype.openClick = function (e) {\n if (!this.openOnClick && this.mode !== 'CheckBox') {\n if (this.targetElement() !== '') {\n this.showPopup();\n }\n else {\n this.hidePopup();\n }\n }\n else if (!this.openOnClick && this.mode === 'CheckBox' && !this.isPopupOpen()) {\n this.showPopup();\n }\n };\n MultiSelect.prototype.keyUp = function (e) {\n if (this.mode === 'CheckBox' && !this.openOnClick) {\n var char = String.fromCharCode(e.keyCode);\n var isWordCharacter = char.match(/\\w/);\n if (!isNullOrUndefined(isWordCharacter)) {\n this.isValidKey = true;\n }\n }\n this.isValidKey = (this.isPopupOpen() && e.keyCode === 8) || this.isValidKey;\n this.isValidKey = e.ctrlKey && e.keyCode === 86 ? false : this.isValidKey;\n if (this.isValidKey) {\n this.isValidKey = false;\n this.expandTextbox();\n this.showOverAllClear();\n switch (e.keyCode) {\n default:\n // For filtering works in mobile firefox\n this.search(e);\n }\n }\n };\n /**\n * To filter the multiselect data from given data source by using query\n *\n * @param {Object[] | DataManager } dataSource - Set the data source to filter.\n * @param {Query} query - Specify the query to filter the data.\n * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.\n * @returns {void}\n */\n MultiSelect.prototype.filter = function (dataSource, query, fields) {\n this.isFiltered = true;\n this.remoteFilterAction = true;\n this.dataUpdater(dataSource, query, fields);\n };\n MultiSelect.prototype.getQuery = function (query) {\n var filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();\n if (this.filterAction) {\n if (this.targetElement() !== null) {\n var dataType = this.typeOfData(this.dataSource).typeof;\n if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {\n filterQuery.where('', this.filterType, this.targetElement(), this.ignoreCase, this.ignoreAccent);\n }\n else {\n var fields = this.fields;\n filterQuery.where(!isNullOrUndefined(fields.text) ? fields.text : '', this.filterType, this.targetElement(), this.ignoreCase, this.ignoreAccent);\n }\n }\n return filterQuery;\n }\n else {\n return query ? query : this.query ? this.query : new Query();\n }\n };\n MultiSelect.prototype.dataUpdater = function (dataSource, query, fields) {\n this.isDataFetched = false;\n if (this.targetElement().trim() === '') {\n var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;\n if (this.backCommand) {\n this.remoteCustomValue = false;\n if (this.allowCustomValue && list.querySelectorAll('li').length == 0 && this.mainData.length > 0) {\n this.mainData = [];\n }\n this.onActionComplete(list, this.mainData);\n if (this.value && this.value.length) {\n this.refreshSelection();\n }\n if (this.keyCode !== 8) {\n this.focusAtFirstListItem();\n }\n this.notify('reOrder', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', e: this });\n }\n }\n else {\n this.resetList(dataSource, fields, query);\n if (this.allowCustomValue) {\n if (!(dataSource instanceof DataManager)) {\n this.checkForCustomValue(query, fields);\n }\n else {\n this.remoteCustomValue = true;\n this.tempQuery = query;\n }\n }\n }\n this.refreshPopup();\n if (this.mode === 'CheckBox') {\n this.removeFocus();\n }\n };\n MultiSelect.prototype.checkForCustomValue = function (query, fields) {\n var dataChecks = !this.getValueByText(this.inputElement.value, this.ignoreCase);\n if (this.allowCustomValue && dataChecks) {\n var value = this.inputElement.value;\n var field = fields ? fields : this.fields;\n var customData = (!isNullOrUndefined(this.mainData) && this.mainData.length > 0) ?\n this.mainData[0] : this.mainData;\n if (typeof (customData) !== 'string' && typeof (customData) !== 'number' && typeof (customData) !== 'boolean') {\n var dataItem = {};\n setValue(field.text, value, dataItem);\n if (typeof getValue((this.fields.value ? this.fields.value : 'value'), customData)\n === 'number') {\n setValue(field.value, Math.random(), dataItem);\n }\n else {\n setValue(field.value, value, dataItem);\n }\n var tempData = JSON.parse(JSON.stringify(this.listData));\n tempData.splice(0, 0, dataItem);\n this.resetList(tempData, field, query);\n }\n else {\n var tempData = [this.inputElement.value];\n tempData[0] = (typeof customData === 'number' && !isNaN(parseFloat(tempData[0]))) ?\n parseFloat(tempData[0]) : tempData[0];\n tempData[0] = (typeof customData === 'boolean') ?\n (tempData[0] === 'true' ? true : (tempData[0] === 'false' ? false : tempData[0])) : tempData[0];\n this.resetList(tempData, field);\n }\n }\n if (this.value && this.value.length) {\n this.refreshSelection();\n }\n };\n MultiSelect.prototype.getNgDirective = function () {\n return 'EJS-MULTISELECT';\n };\n MultiSelect.prototype.wrapperClick = function (e) {\n this.setDynValue = false;\n if (!this.enabled) {\n return;\n }\n if (e.target === this.overAllClear) {\n e.preventDefault();\n return;\n }\n if (!this.inputFocus) {\n this.inputElement.focus();\n }\n if (!this.readonly) {\n if (e.target && e.target.classList.toString().indexOf(CHIP_CLOSE) !== -1) {\n if (this.isPopupOpen()) {\n this.refreshPopup();\n }\n return;\n }\n if (!this.isPopupOpen() &&\n (this.openOnClick || (this.showDropDownIcon && e.target && e.target.className === dropdownIcon))) {\n this.showPopup();\n }\n else {\n this.hidePopup();\n if (this.mode === 'CheckBox') {\n this.showOverAllClear();\n this.inputFocus = true;\n if (!this.overAllWrapper.classList.contains(FOCUS)) {\n this.overAllWrapper.classList.add(FOCUS);\n }\n }\n }\n }\n if (!(this.targetElement() && this.targetElement() !== '')) {\n e.preventDefault();\n }\n };\n MultiSelect.prototype.enable = function (state) {\n if (state) {\n this.overAllWrapper.classList.remove(DISABLED);\n this.inputElement.removeAttribute('disabled');\n attributes(this.inputElement, { 'aria-disabled': 'false' });\n this.ensureAriaDisabled('false');\n }\n else {\n this.overAllWrapper.classList.add(DISABLED);\n this.inputElement.setAttribute('disabled', 'true');\n attributes(this.inputElement, { 'aria-disabled': 'true' });\n this.ensureAriaDisabled('true');\n }\n if (this.enabled !== state) {\n this.enabled = state;\n }\n this.hidePopup();\n };\n MultiSelect.prototype.onBlurHandler = function (eve, isDocClickFromCheck) {\n var target;\n if (!isNullOrUndefined(eve)) {\n target = eve.relatedTarget;\n }\n if (this.popupObj && document.body.contains(this.popupObj.element) && this.popupObj.element.contains(target)) {\n if (this.mode !== 'CheckBox') {\n this.inputElement.focus();\n }\n else if ((this.floatLabelType === 'Auto' &&\n ((this.overAllWrapper.classList.contains('e-outline')) || (this.overAllWrapper.classList.contains('e-filled'))))) {\n addClass([this.overAllWrapper], 'e-valid-input');\n }\n return;\n }\n if (this.floatLabelType === 'Auto' && (this.overAllWrapper.classList.contains('e-outline')) && this.mode === 'CheckBox' &&\n ((isNullOrUndefined(this.value)) || this.value.length === 0)) {\n removeClass([this.overAllWrapper], 'e-valid-input');\n }\n if (this.mode === 'CheckBox' && Browser.isIE && !isNullOrUndefined(eve) && !isDocClickFromCheck) {\n this.inputFocus = false;\n this.overAllWrapper.classList.remove(FOCUS);\n return;\n }\n if (this.scrollFocusStatus) {\n if (!isNullOrUndefined(eve)) {\n eve.preventDefault();\n }\n this.inputElement.focus();\n this.scrollFocusStatus = false;\n return;\n }\n this.inputFocus = false;\n this.overAllWrapper.classList.remove(FOCUS);\n if (this.addTagOnBlur) {\n var dataChecks = this.getValueByText(this.inputElement.value, this.ignoreCase, this.ignoreAccent);\n var listLiElement = this.findListElement(this.list, 'li', 'data-value', dataChecks);\n var className = this.hideSelectedItem ? HIDE_LIST : dropDownBaseClasses.selected;\n var allowChipAddition = (listLiElement && !listLiElement.classList.contains(className)) ? true : false;\n if (allowChipAddition) {\n this.updateListSelection(listLiElement, eve);\n if (this.mode === 'Delimiter') {\n this.updateDelimeter(this.delimiterChar);\n }\n }\n }\n this.refreshListItems(null);\n if (this.mode !== 'Box' && this.mode !== 'CheckBox') {\n this.updateDelimView();\n }\n if (this.changeOnBlur) {\n this.updateValueState(eve, this.value, this.tempValues);\n this.dispatchEvent(this.hiddenElement, 'change');\n }\n this.overAllClear.style.display = 'none';\n if (this.isPopupOpen()) {\n this.hidePopup();\n }\n this.makeTextBoxEmpty();\n this.trigger('blur');\n this.focused = true;\n if (Browser.isDevice && this.mode !== 'Delimiter' && this.mode !== 'CheckBox') {\n this.removeChipFocus();\n }\n this.removeChipSelection();\n this.refreshInputHight();\n floatLabelBlur(this.overAllWrapper, this.componentWrapper, this.value, this.floatLabelType, this.placeholder);\n this.refreshPlaceHolder();\n if ((this.allowFiltering || (this.enableSelectionOrder === true && this.mode === 'CheckBox'))\n && !isNullOrUndefined(this.mainList)) {\n this.ulElement = this.mainList;\n }\n this.checkPlaceholderSize();\n };\n MultiSelect.prototype.checkPlaceholderSize = function () {\n if (this.showDropDownIcon) {\n var downIconWidth = this.dropIcon.offsetWidth +\n parseInt(window.getComputedStyle(this.dropIcon).marginRight, 10);\n this.setPlaceholderSize(downIconWidth);\n }\n else {\n if (!isNullOrUndefined(this.dropIcon)) {\n this.setPlaceholderSize(this.showDropDownIcon ? this.dropIcon.offsetWidth : 0);\n }\n }\n };\n MultiSelect.prototype.setPlaceholderSize = function (downIconWidth) {\n if (isNullOrUndefined(this.value) || this.value.length === 0) {\n if (this.dropIcon.offsetWidth !== 0) {\n this.searchWrapper.style.width = ('calc(100% - ' + (downIconWidth + 10)) + 'px';\n }\n else {\n addClass([this.searchWrapper], CUSTOM_WIDTH);\n }\n }\n else if (!isNullOrUndefined(this.value)) {\n this.searchWrapper.removeAttribute('style');\n removeClass([this.searchWrapper], CUSTOM_WIDTH);\n }\n };\n MultiSelect.prototype.refreshInputHight = function () {\n if ((!this.value || !this.value.length) && (isNullOrUndefined(this.text) || this.text === '')) {\n this.searchWrapper.classList.remove(ZERO_SIZE);\n }\n else {\n this.searchWrapper.classList.add(ZERO_SIZE);\n }\n };\n MultiSelect.prototype.validateValues = function (newValue, oldValue) {\n return JSON.stringify(newValue.slice().sort()) !== JSON.stringify(oldValue.slice().sort());\n };\n MultiSelect.prototype.updateValueState = function (event, newVal, oldVal) {\n var newValue = newVal ? newVal : [];\n var oldValue = oldVal ? oldVal : [];\n if (this.initStatus && this.validateValues(newValue, oldValue)) {\n var eventArgs = {\n e: event,\n oldValue: oldVal,\n value: newVal,\n isInteracted: event ? true : false,\n element: this.element,\n event: event\n };\n if (this.isAngular && this.preventChange) {\n this.preventChange = false;\n }\n else {\n this.trigger('change', eventArgs);\n }\n this.updateTempValue();\n if (!this.changeOnBlur) {\n this.dispatchEvent(this.hiddenElement, 'change');\n }\n }\n };\n MultiSelect.prototype.updateTempValue = function () {\n if (!this.value) {\n this.tempValues = this.value;\n }\n else {\n this.tempValues = this.value.slice();\n }\n };\n MultiSelect.prototype.getPagingCount = function () {\n var height = this.list.classList.contains(dropDownBaseClasses.noData) ? null :\n getComputedStyle(this.getItems()[0], null).getPropertyValue('height');\n return Math.round(this.list.offsetHeight / parseInt(height, 10));\n };\n MultiSelect.prototype.pageUpSelection = function (steps) {\n var collection = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');\n var previousItem = steps >= 0 ? collection[steps + 1] : collection[0];\n this.addListFocus(previousItem);\n this.scrollBottom(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')));\n };\n MultiSelect.prototype.pageDownSelection = function (steps) {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var list = this.getItems();\n var collection = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');\n var previousItem = steps <= collection.length ? collection[steps - 1] : collection[collection.length - 1];\n this.addListFocus(previousItem);\n this.scrollBottom(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')));\n };\n MultiSelect.prototype.getItems = function () {\n if (!this.list) {\n _super.prototype.render.call(this);\n }\n return this.ulElement && this.ulElement.querySelectorAll('.' + dropDownBaseClasses.li).length > 0 ?\n this.ulElement.querySelectorAll('.' + dropDownBaseClasses.li\n + ':not(.' + HIDE_LIST + ')') : [];\n };\n MultiSelect.prototype.focusInHandler = function (e) {\n if (this.enabled) {\n this.showOverAllClear();\n this.inputFocus = true;\n if (this.value && this.value.length) {\n if (this.mode !== 'Delimiter' && this.mode !== 'CheckBox') {\n this.chipCollectionWrapper.style.display = '';\n }\n else {\n this.showDelimWrapper();\n }\n if (this.mode !== 'CheckBox') {\n this.viewWrapper.style.display = 'none';\n }\n }\n if (this.mode !== 'CheckBox') {\n this.searchWrapper.classList.remove(ZERO_SIZE);\n }\n this.checkPlaceholderSize();\n if (this.focused) {\n var args = { isInteracted: e ? true : false, event: e };\n this.trigger('focus', args);\n this.focused = false;\n }\n if (!this.overAllWrapper.classList.contains(FOCUS)) {\n this.overAllWrapper.classList.add(FOCUS);\n }\n floatLabelFocus(this.overAllWrapper, this.componentWrapper);\n if (this.isPopupOpen()) {\n this.refreshPopup();\n }\n return true;\n }\n else {\n return false;\n }\n };\n MultiSelect.prototype.showDelimWrapper = function () {\n if (this.mode === 'CheckBox') {\n this.viewWrapper.style.display = '';\n }\n else {\n this.delimiterWrapper.style.display = '';\n }\n this.componentWrapper.classList.add(DELIMITER_VIEW_WRAPPER);\n };\n MultiSelect.prototype.hideDelimWrapper = function () {\n this.delimiterWrapper.style.display = 'none';\n this.componentWrapper.classList.remove(DELIMITER_VIEW_WRAPPER);\n };\n MultiSelect.prototype.expandTextbox = function () {\n var size = 5;\n if (this.placeholder) {\n size = size > this.inputElement.placeholder.length ? size : this.inputElement.placeholder.length;\n }\n if (this.inputElement.value.length > size) {\n this.inputElement.size = this.inputElement.value.length;\n }\n else {\n this.inputElement.size = size;\n }\n };\n MultiSelect.prototype.isPopupOpen = function () {\n return ((this.popupWrapper !== null) && (this.popupWrapper.parentElement !== null));\n };\n MultiSelect.prototype.refreshPopup = function () {\n if (this.popupObj && this.mobFilter) {\n this.popupObj.setProperties({ width: this.calcPopupWidth() });\n this.popupObj.refreshPosition(this.overAllWrapper);\n this.popupObj.resolveCollision();\n }\n };\n MultiSelect.prototype.checkTextLength = function () {\n return this.targetElement().length < 1;\n };\n MultiSelect.prototype.popupKeyActions = function (e) {\n switch (e.keyCode) {\n case 38:\n this.hidePopup();\n if (this.mode === 'CheckBox') {\n this.inputElement.focus();\n }\n e.preventDefault();\n break;\n case 40:\n if (!this.isPopupOpen()) {\n this.showPopup();\n e.preventDefault();\n }\n break;\n }\n };\n MultiSelect.prototype.updateAriaAttribute = function () {\n var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);\n if (!isNullOrUndefined(focusedItem)) {\n this.inputElement.setAttribute('aria-activedescendant', focusedItem.id);\n }\n };\n MultiSelect.prototype.homeNavigation = function (isHome) {\n this.removeFocus();\n var scrollEle = this.ulElement.querySelectorAll('li.' + dropDownBaseClasses.li\n + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');\n if (scrollEle.length > 0) {\n var element = scrollEle[(isHome) ? 0 : (scrollEle.length - 1)];\n element.classList.add(dropDownBaseClasses.focus);\n this.scrollBottom(element);\n }\n };\n MultiSelect.prototype.onKeyDown = function (e) {\n if (this.readonly || !this.enabled && this.mode !== 'CheckBox') {\n return;\n }\n this.keyCode = e.keyCode;\n this.keyDownStatus = true;\n if (e.keyCode > 111 && e.keyCode < 124) {\n return;\n }\n if (e.altKey) {\n this.popupKeyActions(e);\n return;\n }\n else if (this.isPopupOpen()) {\n var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);\n var activeIndex = void 0;\n switch (e.keyCode) {\n case 36:\n case 35:\n this.homeNavigation((e.keyCode === 36) ? true : false);\n break;\n case 33:\n e.preventDefault();\n if (focusedItem) {\n this.getIndexByValue(focusedItem.getAttribute('data-value'));\n this.pageUpSelection(activeIndex - this.getPagingCount());\n this.updateAriaAttribute();\n }\n return;\n case 34:\n e.preventDefault();\n if (focusedItem) {\n this.getIndexByValue(focusedItem.getAttribute('data-value'));\n this.pageDownSelection(activeIndex + this.getPagingCount());\n this.updateAriaAttribute();\n }\n return;\n case 38:\n this.arrowUp(e);\n break;\n case 40:\n this.arrowDown(e);\n break;\n case 27:\n e.preventDefault();\n this.hidePopup();\n if (this.mode === 'CheckBox') {\n this.inputElement.focus();\n }\n return;\n case 13:\n e.preventDefault();\n if (this.mode !== 'CheckBox') {\n this.selectByKey(e);\n }\n this.checkPlaceholderSize();\n return;\n case 32:\n this.spaceKeySelection(e);\n return;\n case 9:\n e.preventDefault();\n this.hidePopup();\n this.inputElement.focus();\n this.overAllWrapper.classList.add(FOCUS);\n }\n }\n else {\n switch (e.keyCode) {\n case 13:\n case 9:\n case 16:\n case 17:\n case 20:\n return;\n case 40:\n if (this.openOnClick) {\n this.showPopup();\n }\n break;\n case 27:\n e.preventDefault();\n this.escapeAction();\n return;\n }\n }\n if (this.checkTextLength()) {\n this.keyNavigation(e);\n }\n if (this.mode === 'CheckBox' && this.enableSelectionOrder) {\n this.checkBackCommand(e);\n }\n this.expandTextbox();\n if (!(this.mode === 'CheckBox' && this.showSelectAll)) {\n this.refreshPopup();\n }\n };\n MultiSelect.prototype.arrowDown = function (e) {\n e.preventDefault();\n this.moveByList(1);\n this.keyAction = true;\n if (document.activeElement.classList.contains(FILTERINPUT)\n || (this.mode === 'CheckBox' && !this.allowFiltering && document.activeElement !== this.list)) {\n this.list.focus();\n EventHandler.add(this.list, 'keydown', this.onKeyDown, this);\n }\n this.updateAriaAttribute();\n };\n MultiSelect.prototype.arrowUp = function (e) {\n e.preventDefault();\n this.keyAction = true;\n var list = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li\n + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');\n if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {\n list = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ',li.' + dropDownBaseClasses.group\n + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');\n }\n var focuseElem = this.list.querySelector('li.' + dropDownBaseClasses.focus);\n var index = Array.prototype.slice.call(list).indexOf(focuseElem);\n if (index <= 0 && (this.mode === 'CheckBox' && this.allowFiltering)) {\n this.keyAction = false;\n this.notify('inputFocus', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'focus' });\n }\n this.moveByList(-1);\n this.updateAriaAttribute();\n };\n MultiSelect.prototype.spaceKeySelection = function (e) {\n if (this.mode === 'CheckBox') {\n if (!document.activeElement.classList.contains(FILTERINPUT)) {\n e.preventDefault();\n this.keyAction = true;\n this.list.focus();\n }\n this.selectByKey(e);\n }\n this.checkPlaceholderSize();\n };\n MultiSelect.prototype.checkBackCommand = function (e) {\n if (e.keyCode === 8 && this.targetElement() === '') {\n this.backCommand = false;\n }\n else {\n this.backCommand = true;\n }\n };\n MultiSelect.prototype.keyNavigation = function (e) {\n if ((this.mode !== 'Delimiter' && this.mode !== 'CheckBox') && this.value && this.value.length) {\n switch (e.keyCode) {\n case 37: //left arrow\n e.preventDefault();\n this.moveBy(-1, e);\n break;\n case 39: //right arrow\n e.preventDefault();\n this.moveBy(1, e);\n break;\n case 8:\n this.removelastSelection(e);\n break;\n case 46: //del\n this.removeSelectedChip(e);\n break;\n }\n }\n else if (e.keyCode === 8 && this.mode === 'Delimiter') {\n if (this.value && this.value.length) {\n e.preventDefault();\n var temp = this.value[this.value.length - 1];\n this.removeValue(temp, e);\n this.updateDelimeter(this.delimiterChar, e);\n this.focusAtLastListItem(temp);\n }\n }\n };\n MultiSelect.prototype.selectByKey = function (e) {\n this.removeChipSelection();\n this.selectListByKey(e);\n if (this.hideSelectedItem) {\n this.focusAtFirstListItem();\n }\n };\n MultiSelect.prototype.escapeAction = function () {\n var temp = this.tempValues ? this.tempValues.slice() : [];\n if (this.value && this.validateValues(this.value, temp)) {\n if (this.mode !== 'CheckBox') {\n this.value = temp;\n this.initialValueUpdate();\n }\n if (this.mode !== 'Delimiter' && this.mode !== 'CheckBox') {\n this.chipCollectionWrapper.style.display = '';\n }\n else {\n this.showDelimWrapper();\n }\n this.refreshPlaceHolder();\n if (this.value.length) {\n this.showOverAllClear();\n }\n else {\n this.hideOverAllClear();\n }\n }\n this.makeTextBoxEmpty();\n };\n MultiSelect.prototype.scrollBottom = function (selectedLI, activeIndex) {\n var currentOffset = this.list.offsetHeight;\n var nextBottom = selectedLI.offsetTop + selectedLI.offsetHeight - this.list.scrollTop;\n var nextOffset = this.list.scrollTop + nextBottom - currentOffset;\n var boxRange = (selectedLI.offsetTop + selectedLI.offsetHeight - this.list.scrollTop);\n boxRange = this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?\n boxRange - this.fixedHeaderElement.offsetHeight : boxRange;\n if (activeIndex === 0) {\n this.list.scrollTop = 0;\n }\n else if (nextBottom > currentOffset) {\n this.list.scrollTop = nextOffset;\n }\n else if (!(boxRange > 0 && this.list.offsetHeight > boxRange)) {\n this.list.scrollTop = nextOffset;\n }\n };\n MultiSelect.prototype.scrollTop = function (selectedLI, activeIndex) {\n var nextOffset = selectedLI.offsetTop - this.list.scrollTop;\n nextOffset = this.fields.groupBy && !isUndefined(this.fixedHeaderElement) ?\n nextOffset - this.fixedHeaderElement.offsetHeight : nextOffset;\n var boxRange = (selectedLI.offsetTop + selectedLI.offsetHeight - this.list.scrollTop);\n if (activeIndex === 0) {\n this.list.scrollTop = 0;\n }\n else if (nextOffset < 0) {\n this.list.scrollTop = this.list.scrollTop + nextOffset;\n }\n else if (!(boxRange > 0 && this.list.offsetHeight > boxRange)) {\n this.list.scrollTop = selectedLI.offsetTop - (this.fields.groupBy && !isUndefined(this.fixedHeaderElement) ?\n this.fixedHeaderElement.offsetHeight : 0);\n }\n };\n MultiSelect.prototype.selectListByKey = function (e) {\n var li = this.list.querySelector('li.' + dropDownBaseClasses.focus);\n var limit = this.value && this.value.length ? this.value.length : 0;\n var target;\n if (li !== null) {\n if (li.classList.contains('e-active')) {\n limit = limit - 1;\n }\n if (this.isValidLI(li) && limit < this.maximumSelectionLength) {\n this.updateListSelection(li, e);\n this.addListFocus(li);\n if (this.mode === 'CheckBox') {\n this.updateDelimView();\n this.updateDelimeter(this.delimiterChar, e);\n this.refreshInputHight();\n this.checkPlaceholderSize();\n if (this.enableGroupCheckBox && !isNullOrUndefined(this.fields.groupBy)) {\n target = li.firstElementChild.lastElementChild;\n this.findGroupStart(target);\n this.deselectHeader();\n }\n }\n else {\n this.updateDelimeter(this.delimiterChar, e);\n }\n this.makeTextBoxEmpty();\n if (this.mode !== 'CheckBox') {\n this.refreshListItems(li.textContent);\n }\n if (!this.changeOnBlur) {\n this.updateValueState(e, this.value, this.tempValues);\n }\n this.refreshPopup();\n }\n else {\n if (!this.isValidLI(li) && limit < this.maximumSelectionLength) {\n target = li.firstElementChild.lastElementChild;\n if (target.classList.contains('e-check')) {\n this.selectAllItem(false, e, li);\n }\n else {\n this.selectAllItem(true, e, li);\n }\n }\n }\n this.refreshSelection();\n if (this.closePopupOnSelect) {\n this.hidePopup();\n }\n }\n this.refreshPlaceHolder();\n };\n MultiSelect.prototype.refreshListItems = function (data) {\n if ((this.allowFiltering || (this.mode === 'CheckBox' && this.enableSelectionOrder === true)\n || this.allowCustomValue) && this.mainList && this.listData) {\n var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;\n this.onActionComplete(list, this.mainData);\n this.focusAtLastListItem(data);\n if (this.value && this.value.length) {\n this.refreshSelection();\n }\n }\n };\n MultiSelect.prototype.removeSelectedChip = function (e) {\n var selectedElem = this.chipCollectionWrapper.querySelector('span.' + CHIP_SELECTED);\n var temp;\n if (selectedElem !== null) {\n if (!isNullOrUndefined(this.value)) {\n this.tempValues = this.value.slice();\n }\n temp = selectedElem.nextElementSibling;\n if (temp !== null) {\n this.removeChipSelection();\n this.addChipSelection(temp, e);\n }\n this.removeValue(selectedElem.getAttribute('data-value'), e);\n this.makeTextBoxEmpty();\n }\n if (this.closePopupOnSelect) {\n this.hidePopup();\n }\n this.checkPlaceholderSize();\n };\n MultiSelect.prototype.moveByTop = function (state) {\n var elements = this.list.querySelectorAll('li.' + dropDownBaseClasses.li);\n var index;\n if (elements.length > 1) {\n this.removeFocus();\n index = state ? 0 : (elements.length - 1);\n this.addListFocus(elements[index]);\n this.scrollBottom(elements[index], index);\n }\n this.updateAriaAttribute();\n };\n MultiSelect.prototype.moveByList = function (position) {\n if (this.list) {\n var elements = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li\n + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');\n if (this.mode === 'CheckBox' && this.enableGroupCheckBox && !isNullOrUndefined(this.fields.groupBy)) {\n elements = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ',li.' + dropDownBaseClasses.group\n + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');\n }\n var selectedElem = this.list.querySelector('li.' + dropDownBaseClasses.focus);\n var temp = -1;\n if (elements.length) {\n for (var index = 0; index < elements.length; index++) {\n if (elements[index] === selectedElem) {\n temp = index;\n break;\n }\n }\n if (position > 0) {\n if (temp < (elements.length - 1)) {\n this.removeFocus();\n this.addListFocus(elements[++temp]);\n this.updateCheck(elements[temp]);\n this.scrollBottom(elements[temp], temp);\n }\n }\n else {\n if (temp > 0) {\n this.removeFocus();\n this.addListFocus(elements[--temp]);\n this.updateCheck(elements[temp]);\n this.scrollTop(elements[temp], temp);\n }\n }\n }\n }\n };\n MultiSelect.prototype.updateCheck = function (element) {\n if (this.mode === 'CheckBox' && this.enableGroupCheckBox &&\n !isNullOrUndefined(this.fields.groupBy)) {\n var checkElement = element.firstElementChild.lastElementChild;\n if (checkElement.classList.contains('e-check')) {\n element.classList.add('e-active');\n }\n else {\n element.classList.remove('e-active');\n }\n }\n };\n MultiSelect.prototype.moveBy = function (position, e) {\n var temp;\n var elements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP);\n var selectedElem = this.chipCollectionWrapper.querySelector('span.' + CHIP_SELECTED);\n if (selectedElem === null) {\n if (position < 0) {\n this.addChipSelection(elements[elements.length - 1], e);\n }\n }\n else {\n if (position < 0) {\n temp = selectedElem.previousElementSibling;\n if (temp !== null) {\n this.removeChipSelection();\n this.addChipSelection(temp, e);\n }\n }\n else {\n temp = selectedElem.nextElementSibling;\n this.removeChipSelection();\n if (temp !== null) {\n this.addChipSelection(temp, e);\n }\n }\n }\n };\n MultiSelect.prototype.chipClick = function (e) {\n if (this.enabled) {\n var elem = closest(e.target, '.' + CHIP);\n this.removeChipSelection();\n this.addChipSelection(elem, e);\n }\n };\n MultiSelect.prototype.removeChipSelection = function () {\n if (this.chipCollectionWrapper) {\n this.removeChipFocus();\n }\n };\n MultiSelect.prototype.addChipSelection = function (element, e) {\n addClass([element], CHIP_SELECTED);\n this.trigger('chipSelection', e);\n };\n MultiSelect.prototype.onChipRemove = function (e) {\n if (e.which === 3 || e.button === 2) {\n return;\n }\n if (this.enabled && !this.readonly) {\n var element = e.target.parentElement;\n var customVal = element.getAttribute('data-value');\n var value = this.getFormattedValue(customVal);\n if (this.allowCustomValue && ((customVal !== 'false' && value === false) ||\n (!isNullOrUndefined(value) && value.toString() === 'NaN'))) {\n value = customVal;\n }\n if (this.isPopupOpen() && this.mode !== 'CheckBox') {\n this.hidePopup();\n }\n if (!this.inputFocus) {\n this.inputElement.focus();\n }\n this.removeValue(value, e);\n if (isNullOrUndefined(this.findListElement(this.list, 'li', 'data-value', value)) && this.mainList && this.listData) {\n var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;\n this.onActionComplete(list, this.mainData);\n }\n this.updateDelimeter(this.delimiterChar, e);\n if (this.placeholder && this.floatLabelType === 'Never') {\n this.makeTextBoxEmpty();\n this.checkPlaceholderSize();\n }\n else {\n this.inputElement.value = '';\n }\n e.preventDefault();\n }\n };\n MultiSelect.prototype.makeTextBoxEmpty = function () {\n this.inputElement.value = '';\n this.refreshPlaceHolder();\n };\n MultiSelect.prototype.refreshPlaceHolder = function () {\n if (this.placeholder && this.floatLabelType === 'Never') {\n if ((this.value && this.value.length) || (!isNullOrUndefined(this.text) && this.text !== '')) {\n this.inputElement.placeholder = '';\n }\n else {\n this.inputElement.placeholder = encodePlaceholder(this.placeholder);\n }\n }\n else {\n this.setFloatLabelType();\n }\n this.expandTextbox();\n };\n MultiSelect.prototype.removeAllItems = function (value, eve, isClearAll, element, mainElement) {\n var index = this.value.indexOf(value);\n var removeVal = this.value.slice(0);\n removeVal.splice(index, 1);\n this.setProperties({ value: [].concat([], removeVal) }, true);\n element.setAttribute('aria-selected', 'false');\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n removeClass([element], className);\n this.notify('activeList', {\n module: 'CheckBoxSelection',\n enable: this.mode === 'CheckBox', li: element,\n e: this, index: index\n });\n this.invokeCheckboxSelection(element, eve, isClearAll);\n this.updateMainList(true, value, mainElement);\n this.updateChipStatus();\n };\n MultiSelect.prototype.invokeCheckboxSelection = function (element, eve, isClearAll) {\n this.notify('updatelist', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', li: element, e: eve });\n attributes(this.inputElement, { 'aria-activedescendant': element.id });\n if ((this.value && this.value.length !== this.mainData.length)\n && (this.mode === 'CheckBox' && this.showSelectAll && !(this.isSelectAll || isClearAll))) {\n this.notify('checkSelectAll', {\n module: 'CheckBoxSelection',\n enable: this.mode === 'CheckBox',\n value: 'uncheck'\n });\n }\n };\n MultiSelect.prototype.removeValue = function (value, eve, length, isClearAll) {\n var _this = this;\n var index = this.value.indexOf(this.getFormattedValue(value));\n if (index === -1 && this.allowCustomValue && !isNullOrUndefined(value)) {\n index = this.value.indexOf(value.toString());\n }\n var targetEle = eve && eve.target;\n isClearAll = (isClearAll || targetEle && targetEle.classList.contains('e-close-hooker')) ? true : null;\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n if (index !== -1) {\n var element_1 = this.findListElement(this.list, 'li', 'data-value', value);\n var val_1 = this.getDataByValue(value);\n var eventArgs = {\n e: eve,\n item: element_1,\n itemData: val_1,\n isInteracted: eve ? true : false,\n cancel: false\n };\n this.trigger('removing', eventArgs, function (eventArgs) {\n if (eventArgs.cancel) {\n _this.removeIndex++;\n }\n else {\n var removeVal = _this.value.slice(0);\n removeVal.splice(index, 1);\n _this.setProperties({ value: [].concat([], removeVal) }, true);\n if (element_1 !== null) {\n var hideElement = _this.findListElement(_this.mainList, 'li', 'data-value', value);\n element_1.setAttribute('aria-selected', 'false');\n removeClass([element_1], className);\n if (hideElement) {\n hideElement.setAttribute('aria-selected', 'false');\n removeClass([element_1, hideElement], className);\n }\n _this.notify('activeList', {\n module: 'CheckBoxSelection',\n enable: _this.mode === 'CheckBox', li: element_1,\n e: _this, index: index\n });\n _this.invokeCheckboxSelection(element_1, eve, isClearAll);\n }\n if (_this.hideSelectedItem && _this.fields.groupBy) {\n _this.hideGroupItem(value);\n }\n if (_this.hideSelectedItem && _this.fixedHeaderElement && _this.fields.groupBy && _this.mode !== 'CheckBox' &&\n _this.isPopupOpen()) {\n _super.prototype.scrollStop.call(_this);\n }\n _this.updateMainList(true, value);\n _this.removeChip(value);\n _this.updateChipStatus();\n var limit = _this.value && _this.value.length ? _this.value.length : 0;\n if (limit < _this.maximumSelectionLength) {\n var collection = _this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ':not(.e-active)');\n removeClass(collection, 'e-disable');\n }\n _this.trigger('removed', eventArgs);\n var targetEle_1 = eve && eve.currentTarget;\n var isSelectAll = (targetEle_1 && targetEle_1.classList.contains('e-selectall-parent')) ? true : null;\n if (!_this.changeOnBlur && !isClearAll && (eve && length && !isSelectAll)) {\n _this.updateValueState(eve, _this.value, _this.tempValues);\n }\n if (length) {\n _this.selectAllEventData.push(val_1);\n _this.selectAllEventEle.push(element_1);\n }\n if (length === 1) {\n if (!_this.changeOnBlur) {\n _this.updateValueState(eve, _this.value, _this.tempValues);\n }\n var args = {\n event: eve,\n items: _this.selectAllEventEle,\n itemData: _this.selectAllEventData,\n isInteracted: eve ? true : false,\n isChecked: false\n };\n _this.trigger('selectedAll', args);\n _this.selectAllEventData = [];\n _this.selectAllEventEle = [];\n }\n if (isClearAll && (length === 1 || length === null)) {\n _this.clearAllCallback(eve, isClearAll);\n }\n }\n });\n }\n };\n MultiSelect.prototype.updateMainList = function (state, value, mainElement) {\n if (this.allowFiltering || this.mode === 'CheckBox') {\n var element2 = mainElement ? mainElement :\n this.findListElement(this.mainList, 'li', 'data-value', value);\n if (element2) {\n if (state) {\n element2.setAttribute('aria-selected', 'false');\n removeClass([element2], this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected);\n if (this.mode === 'CheckBox') {\n element2.firstElementChild.setAttribute('aria-checked', 'false');\n removeClass([element2.firstElementChild.lastElementChild], 'e-check');\n }\n }\n else {\n element2.setAttribute('aria-selected', 'true');\n addClass([element2], this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected);\n if (this.mode === 'CheckBox') {\n element2.firstElementChild.setAttribute('aria-checked', 'true');\n addClass([element2.firstElementChild.lastElementChild], 'e-check');\n }\n }\n }\n }\n };\n MultiSelect.prototype.removeChip = function (value) {\n if (this.chipCollectionWrapper) {\n var element = this.findListElement(this.chipCollectionWrapper, 'span', 'data-value', value);\n if (element) {\n remove(element);\n }\n }\n };\n MultiSelect.prototype.setWidth = function (width) {\n if (!isNullOrUndefined(width)) {\n if (typeof width === 'number') {\n this.overAllWrapper.style.width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n this.overAllWrapper.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));\n }\n }\n };\n MultiSelect.prototype.updateChipStatus = function () {\n if (this.value && this.value.length) {\n if (!isNullOrUndefined(this.chipCollectionWrapper)) {\n (this.chipCollectionWrapper.style.display = '');\n }\n if (this.mode === 'Delimiter' || this.mode === 'CheckBox') {\n this.showDelimWrapper();\n }\n this.showOverAllClear();\n }\n else {\n if (!isNullOrUndefined(this.chipCollectionWrapper)) {\n this.chipCollectionWrapper.style.display = 'none';\n }\n if (!isNullOrUndefined(this.delimiterWrapper)) {\n (this.delimiterWrapper.style.display = 'none');\n }\n this.hideOverAllClear();\n }\n };\n MultiSelect.prototype.addValue = function (value, text, eve) {\n if (!this.value) {\n this.value = [];\n }\n if (this.value.indexOf(value) < 0) {\n this.setProperties({ value: [].concat([], this.value, [value]) }, true);\n }\n var element = this.findListElement(this.list, 'li', 'data-value', value);\n this.removeFocus();\n if (element) {\n this.addListFocus(element);\n this.addListSelection(element);\n }\n if (this.mode !== 'Delimiter' && this.mode !== 'CheckBox') {\n this.addChip(text, value, eve);\n }\n if (this.hideSelectedItem && this.fields.groupBy) {\n this.hideGroupItem(value);\n }\n this.updateChipStatus();\n this.checkMaxSelection();\n };\n MultiSelect.prototype.checkMaxSelection = function () {\n var limit = this.value && this.value.length ? this.value.length : 0;\n if (limit === this.maximumSelectionLength) {\n var collection = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ':not(.e-active)');\n addClass(collection, 'e-disable');\n }\n };\n MultiSelect.prototype.dispatchSelect = function (value, eve, element, isNotTrigger, length) {\n var _this = this;\n var list = this.listData;\n if (this.initStatus && !isNotTrigger) {\n var val_2 = this.getDataByValue(value);\n var eventArgs = {\n e: eve,\n item: element,\n itemData: val_2,\n isInteracted: eve ? true : false,\n cancel: false\n };\n this.trigger('select', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n if (length) {\n _this.selectAllEventData.push(val_2);\n _this.selectAllEventEle.push(element);\n }\n if (length === 1) {\n var args = {\n event: eve,\n items: _this.selectAllEventEle,\n itemData: _this.selectAllEventData,\n isInteracted: eve ? true : false,\n isChecked: true\n };\n _this.trigger('selectedAll', args);\n _this.selectAllEventData = [];\n }\n if (_this.allowCustomValue && _this.isServerRendered && _this.listData !== list) {\n _this.listData = list;\n }\n _this.updateListSelectEventCallback(value, element, eve);\n if (_this.hideSelectedItem && _this.fixedHeaderElement && _this.fields.groupBy && _this.mode !== 'CheckBox') {\n _super.prototype.scrollStop.call(_this);\n }\n }\n });\n }\n };\n MultiSelect.prototype.addChip = function (text, value, e) {\n if (this.chipCollectionWrapper) {\n this.getChip(text, value, e);\n }\n };\n MultiSelect.prototype.removeChipFocus = function () {\n var elements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP);\n var closeElements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP_CLOSE.split(' ')[0]);\n removeClass(elements, CHIP_SELECTED);\n if (Browser.isDevice) {\n for (var index = 0; index < closeElements.length; index++) {\n closeElements[index].style.display = 'none';\n }\n }\n };\n MultiSelect.prototype.onMobileChipInteraction = function (e) {\n var chipElem = closest(e.target, '.' + CHIP);\n var chipClose = chipElem.querySelector('span.' + CHIP_CLOSE.split(' ')[0]);\n if (this.enabled && !this.readonly) {\n if (!chipElem.classList.contains(CHIP_SELECTED)) {\n this.removeChipFocus();\n chipClose.style.display = '';\n chipElem.classList.add(CHIP_SELECTED);\n }\n this.refreshPopup();\n e.preventDefault();\n }\n };\n MultiSelect.prototype.multiCompiler = function (multiselectTemplate) {\n var checkTemplate = false;\n if (multiselectTemplate) {\n try {\n checkTemplate = (selectAll(multiselectTemplate, document).length) ? true : false;\n }\n catch (exception) {\n checkTemplate = false;\n }\n }\n return checkTemplate;\n };\n MultiSelect.prototype.getChip = function (data, value, e) {\n var _this = this;\n var itemData = { text: value, value: value };\n var chip = this.createElement('span', {\n className: CHIP,\n attrs: { 'data-value': value, 'title': data }\n });\n var compiledString;\n var chipContent = this.createElement('span', { className: CHIP_CONTENT });\n var chipClose = this.createElement('span', { className: CHIP_CLOSE });\n if (this.mainData) {\n itemData = this.getDataByValue(value);\n }\n if (this.valueTemplate && !isNullOrUndefined(itemData)) {\n var valuecheck = this.multiCompiler(this.valueTemplate);\n if (valuecheck) {\n compiledString = compile(select(this.valueTemplate, document).innerHTML.trim());\n }\n else {\n compiledString = compile(this.valueTemplate);\n }\n // eslint-disable-next-line\n var valueCompTemp = compiledString(itemData, this, 'valueTemplate', this.valueTemplateId, this.isStringTemplate, null, chipContent);\n if (valueCompTemp && valueCompTemp.length > 0) {\n for (var i = 0; i < valueCompTemp.length; i++) {\n chipContent.appendChild(valueCompTemp[i]);\n }\n }\n this.renderReactTemplates();\n }\n else if (this.enableHtmlSanitizer) {\n chipContent.innerText = data;\n }\n else {\n chipContent.innerHTML = data;\n }\n chip.appendChild(chipContent);\n var eventArgs = {\n isInteracted: e ? true : false,\n itemData: itemData,\n e: e,\n setClass: function (classes) {\n addClass([chip], classes);\n },\n cancel: false\n };\n this.isPreventChange = this.isAngular && this.preventChange;\n this.trigger('tagging', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n if (Browser.isDevice) {\n chip.classList.add(MOBILE_CHIP);\n append([chipClose], chip);\n chipClose.style.display = 'none';\n EventHandler.add(chip, 'click', _this.onMobileChipInteraction, _this);\n }\n else {\n EventHandler.add(chip, 'mousedown', _this.chipClick, _this);\n if (_this.showClearButton) {\n chip.appendChild(chipClose);\n }\n }\n EventHandler.add(chipClose, 'mousedown', _this.onChipRemove, _this);\n _this.chipCollectionWrapper.appendChild(chip);\n if (!_this.changeOnBlur && e) {\n _this.updateValueState(e, _this.value, _this.tempValues);\n }\n }\n });\n };\n MultiSelect.prototype.calcPopupWidth = function () {\n var width = formatUnit(this.popupWidth);\n if (width.indexOf('%') > -1) {\n var inputWidth = (this.componentWrapper.offsetWidth) * parseFloat(width) / 100;\n width = inputWidth.toString() + 'px';\n }\n return width;\n };\n MultiSelect.prototype.mouseIn = function () {\n if (this.enabled && !this.readonly) {\n this.showOverAllClear();\n }\n };\n MultiSelect.prototype.mouseOut = function () {\n if (!this.inputFocus) {\n this.overAllClear.style.display = 'none';\n }\n };\n MultiSelect.prototype.listOption = function (dataSource, fields) {\n var iconCss = isNullOrUndefined(fields.iconCss) ? false : true;\n var fieldProperty = isNullOrUndefined(fields.properties) ? fields :\n fields.properties;\n this.listCurrentOptions = (fields.text !== null || fields.value !== null) ? {\n fields: fieldProperty, showIcon: iconCss, ariaAttributes: { groupItemRole: 'presentation' }\n } : { fields: { value: 'text' } };\n extend(this.listCurrentOptions, this.listCurrentOptions, fields, true);\n if (this.mode === 'CheckBox') {\n this.notify('listoption', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', dataSource: dataSource, fieldProperty: fieldProperty });\n }\n return this.listCurrentOptions;\n };\n MultiSelect.prototype.renderPopup = function () {\n var _this = this;\n if (!this.list) {\n _super.prototype.render.call(this);\n }\n if (!this.popupObj) {\n document.body.appendChild(this.popupWrapper);\n var checkboxFilter = this.popupWrapper.querySelector('.' + FILTERPARENT);\n if (this.mode === 'CheckBox' && !this.allowFiltering && checkboxFilter && this.filterParent) {\n checkboxFilter.remove();\n this.filterParent = null;\n }\n var overAllHeight = parseInt(this.popupHeight, 10);\n this.popupWrapper.style.visibility = 'hidden';\n if (this.headerTemplate) {\n this.setHeaderTemplate();\n overAllHeight -= this.header.offsetHeight;\n }\n append([this.list], this.popupWrapper);\n if (this.footerTemplate) {\n this.setFooterTemplate();\n overAllHeight -= this.footer.offsetHeight;\n }\n if (this.mode === 'CheckBox' && this.showSelectAll) {\n this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n overAllHeight -= this.selectAllHeight;\n }\n else if (this.mode === 'CheckBox' && !this.showSelectAll && (!this.headerTemplate && !this.footerTemplate)) {\n this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n overAllHeight = parseInt(this.popupHeight, 10);\n }\n else if (this.mode === 'CheckBox' && !this.showSelectAll) {\n this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n overAllHeight = parseInt(this.popupHeight, 10);\n if (this.headerTemplate && this.header) {\n overAllHeight -= this.header.offsetHeight;\n }\n if (this.footerTemplate && this.footer) {\n overAllHeight -= this.footer.offsetHeight;\n }\n }\n if (this.mode === 'CheckBox') {\n var args = {\n module: 'CheckBoxSelection',\n enable: this.mode === 'CheckBox',\n popupElement: this.popupWrapper\n };\n if (this.allowFiltering) {\n this.notify('searchBox', args);\n overAllHeight -= this.searchBoxHeight;\n }\n addClass([this.popupWrapper], 'e-checkbox');\n }\n if (this.popupHeight !== 'auto') {\n this.list.style.maxHeight = formatUnit(overAllHeight);\n this.popupWrapper.style.maxHeight = formatUnit(this.popupHeight);\n }\n else {\n this.list.style.maxHeight = formatUnit(this.popupHeight);\n }\n this.popupObj = new Popup(this.popupWrapper, {\n width: this.calcPopupWidth(), targetType: 'relative', position: { X: 'left', Y: 'bottom' },\n relateTo: this.overAllWrapper, collision: { X: 'flip', Y: 'flip' }, offsetY: 1,\n enableRtl: this.enableRtl, zIndex: this.zIndex,\n close: function () {\n if (_this.popupObj.element.parentElement) {\n _this.popupObj.unwireScrollEvents();\n // For restrict the page scrolling in safari browser\n var checkboxFilterInput = _this.popupWrapper.querySelector('.' + FILTERINPUT);\n if (_this.mode === 'CheckBox' && checkboxFilterInput && document.activeElement === checkboxFilterInput) {\n checkboxFilterInput.blur();\n }\n detach(_this.popupObj.element);\n }\n },\n open: function () {\n _this.popupObj.resolveCollision();\n if (!_this.isFirstClick) {\n var ulElement = _this.list.querySelector('ul');\n if (ulElement) {\n if (!(_this.mode !== 'CheckBox' && (_this.allowFiltering || _this.allowCustomValue) &&\n _this.targetElement().trim() !== '')) {\n _this.mainList = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;\n }\n }\n _this.isFirstClick = true;\n }\n _this.popupObj.wireScrollEvents();\n if (!(_this.mode !== 'CheckBox' && (_this.allowFiltering || _this.allowCustomValue) &&\n _this.targetElement().trim() !== '')) {\n _this.loadTemplate();\n }\n _this.setScrollPosition();\n if (_this.allowFiltering) {\n _this.notify('inputFocus', {\n module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox', value: 'focus'\n });\n }\n }, targetExitViewport: function () {\n if (!Browser.isDevice) {\n _this.hidePopup();\n }\n }\n });\n if (this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering) {\n this.notify('deviceSearchBox', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n }\n this.popupObj.close();\n this.popupWrapper.style.visibility = '';\n }\n };\n MultiSelect.prototype.setHeaderTemplate = function () {\n var compiledString;\n if (this.header) {\n this.header.remove();\n }\n this.header = this.createElement('div');\n addClass([this.header], HEADER);\n var headercheck = this.multiCompiler(this.headerTemplate);\n if (headercheck) {\n compiledString = compile(select(this.headerTemplate, document).innerHTML.trim());\n }\n else {\n compiledString = compile(this.headerTemplate);\n }\n // eslint-disable-next-line\n var elements = compiledString({}, this, 'headerTemplate', this.headerTemplateId, this.isStringTemplate, null, this.header);\n if (elements && elements.length > 0) {\n for (var temp = 0; temp < elements.length; temp++) {\n this.header.appendChild(elements[temp]);\n }\n }\n if (this.mode === 'CheckBox' && this.showSelectAll) {\n prepend([this.header], this.popupWrapper);\n }\n else {\n append([this.header], this.popupWrapper);\n }\n EventHandler.add(this.header, 'mousedown', this.onListMouseDown, this);\n };\n MultiSelect.prototype.setFooterTemplate = function () {\n var compiledString;\n if (this.footer) {\n this.footer.remove();\n }\n this.footer = this.createElement('div');\n addClass([this.footer], FOOTER);\n var footercheck = this.multiCompiler(this.footerTemplate);\n if (footercheck) {\n compiledString = compile(select(this.footerTemplate, document).innerHTML.trim());\n }\n else {\n compiledString = compile(this.footerTemplate);\n }\n // eslint-disable-next-line\n var elements = compiledString({}, this, 'footerTemplate', this.footerTemplateId, this.isStringTemplate, null, this.footer);\n if (elements && elements.length > 0) {\n for (var temp = 0; temp < elements.length; temp++) {\n this.footer.appendChild(elements[temp]);\n }\n }\n append([this.footer], this.popupWrapper);\n EventHandler.add(this.footer, 'mousedown', this.onListMouseDown, this);\n };\n MultiSelect.prototype.clearAll = function (e) {\n if (this.enabled && !this.readonly) {\n var temp = void 0;\n if (this.value && this.value.length > 0) {\n var liElement = this.list && this.list.querySelectorAll('li.e-list-item');\n if (liElement && liElement.length > 0) {\n this.selectAllItems(false, e);\n }\n else {\n this.removeIndex = 0;\n for (temp = this.value[this.removeIndex]; this.removeIndex < this.value.length; temp = this.value[this.removeIndex]) {\n this.removeValue(temp, e, null, true);\n }\n }\n }\n else {\n this.clearAllCallback(e);\n }\n }\n };\n MultiSelect.prototype.clearAllCallback = function (e, isClearAll) {\n var tempValues = this.value ? this.value.slice() : [];\n if (this.mainList && this.listData && ((this.allowFiltering && this.mode !== 'CheckBox') || this.allowCustomValue)) {\n var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;\n this.onActionComplete(list, this.mainData);\n }\n this.focusAtFirstListItem();\n this.updateDelimeter(this.delimiterChar, e);\n if (this.mode !== 'Box' && (!this.inputFocus || this.mode === 'CheckBox')) {\n this.updateDelimView();\n }\n if (this.inputElement.value !== '') {\n this.makeTextBoxEmpty();\n this.search(null);\n }\n this.checkPlaceholderSize();\n if (this.isPopupOpen()) {\n this.refreshPopup();\n }\n if (!this.inputFocus) {\n if (this.changeOnBlur) {\n this.updateValueState(e, this.value, tempValues);\n }\n if (this.mode !== 'CheckBox') {\n this.inputElement.focus();\n }\n }\n if (this.mode === 'CheckBox') {\n this.refreshPlaceHolder();\n this.refreshInputHight();\n if (this.changeOnBlur && isClearAll && (isNullOrUndefined(this.value) || this.value.length === 0)) {\n this.updateValueState(e, this.value, this.tempValues);\n }\n }\n if (!this.changeOnBlur && isClearAll && (isNullOrUndefined(this.value) || this.value.length === 0)) {\n this.updateValueState(e, this.value, this.tempValues);\n }\n if (this.mode === 'CheckBox' && this.enableGroupCheckBox && !isNullOrUndefined(this.fields.groupBy)) {\n this.updateListItems(this.list.querySelectorAll('li.e-list-item'), this.mainList.querySelectorAll('li.e-list-item'));\n }\n e.preventDefault();\n };\n MultiSelect.prototype.windowResize = function () {\n this.refreshPopup();\n if ((!this.inputFocus || this.mode === 'CheckBox') && this.viewWrapper && this.viewWrapper.parentElement) {\n this.updateDelimView();\n }\n };\n MultiSelect.prototype.resetValueHandler = function (e) {\n var formElement = closest(this.inputElement, 'form');\n if (formElement && e.target === formElement) {\n var textVal = (this.element.tagName === this.getNgDirective()) ?\n null : this.element.getAttribute('data-initial-value');\n this.text = textVal;\n }\n };\n MultiSelect.prototype.wireEvent = function () {\n EventHandler.add(this.componentWrapper, 'mousedown', this.wrapperClick, this);\n EventHandler.add(window, 'resize', this.windowResize, this);\n EventHandler.add(this.inputElement, 'focus', this.focusInHandler, this);\n EventHandler.add(this.inputElement, 'keydown', this.onKeyDown, this);\n EventHandler.add(this.inputElement, 'keyup', this.keyUp, this);\n if (this.mode !== 'CheckBox') {\n EventHandler.add(this.inputElement, 'input', this.onInput, this);\n }\n EventHandler.add(this.inputElement, 'blur', this.onBlurHandler, this);\n EventHandler.add(this.componentWrapper, 'mousemove', this.mouseIn, this);\n var formElement = closest(this.inputElement, 'form');\n if (formElement) {\n EventHandler.add(formElement, 'reset', this.resetValueHandler, this);\n }\n EventHandler.add(this.componentWrapper, 'mouseout', this.mouseOut, this);\n EventHandler.add(this.overAllClear, 'mouseup', this.clearAll, this);\n EventHandler.add(this.inputElement, 'paste', this.pasteHandler, this);\n };\n MultiSelect.prototype.onInput = function (e) {\n if (this.keyDownStatus) {\n this.isValidKey = true;\n }\n else {\n this.isValidKey = false;\n }\n this.keyDownStatus = false;\n // For Filtering works in mobile firefox\n if (Browser.isDevice && Browser.info.name === 'mozilla') {\n this.search(e);\n }\n };\n MultiSelect.prototype.pasteHandler = function (event) {\n var _this = this;\n setTimeout(function () {\n _this.expandTextbox();\n _this.search(event);\n });\n };\n MultiSelect.prototype.search = function (e) {\n var _this = this;\n if (!isNullOrUndefined(e)) {\n this.keyCode = e.keyCode;\n }\n if (!this.isPopupOpen() && this.openOnClick) {\n this.showPopup();\n }\n this.openClick(e);\n if (this.checkTextLength() && !this.allowFiltering && !isNullOrUndefined(e) && (e.keyCode !== 8)) {\n this.focusAtFirstListItem();\n }\n else {\n var text = this.targetElement();\n if (this.allowFiltering) {\n var eventArgs_1 = {\n preventDefaultAction: false,\n text: this.targetElement(),\n updateData: function (dataSource, query, fields) {\n if (eventArgs_1.cancel) {\n return;\n }\n _this.isFiltered = true;\n _this.remoteFilterAction = true;\n _this.dataUpdater(dataSource, query, fields);\n },\n event: e,\n cancel: false\n };\n this.trigger('filtering', eventArgs_1, function (eventArgs) {\n if (!eventArgs.cancel) {\n if (!_this.isFiltered && !eventArgs.preventDefaultAction) {\n _this.filterAction = true;\n _this.dataUpdater(_this.dataSource, null, _this.fields);\n }\n }\n });\n }\n else if (this.allowCustomValue) {\n var query = new Query();\n query = (text !== '') ? query.where(this.fields.text, 'startswith', text, this.ignoreCase, this.ignoreAccent) : query;\n this.dataUpdater(this.mainData, query, this.fields);\n }\n else {\n var liCollections = this.list.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-hide-listitem)');\n var activeElement = Search(this.targetElement(), liCollections, 'StartsWith', this.ignoreCase);\n if (activeElement && activeElement.item !== null) {\n this.addListFocus(activeElement.item);\n this.list.scrollTop =\n activeElement.item.offsetHeight * activeElement.index;\n }\n else if (this.targetElement() !== '') {\n this.removeFocus();\n }\n else {\n this.focusAtFirstListItem();\n }\n }\n }\n };\n MultiSelect.prototype.preRender = function () {\n if (this.allowFiltering === null) {\n this.allowFiltering = (this.mode === 'CheckBox') ? true : false;\n }\n this.initializeData();\n this.updateDataAttribute(this.htmlAttributes);\n _super.prototype.preRender.call(this);\n };\n MultiSelect.prototype.getLocaleName = function () {\n return 'multi-select';\n };\n MultiSelect.prototype.initializeData = function () {\n this.mainListCollection = [];\n this.beforePopupOpen = false;\n this.filterAction = false;\n this.remoteFilterAction = false;\n this.isFirstClick = false;\n this.mobFilter = true;\n this.isFiltered = false;\n this.focused = true;\n this.initial = true;\n this.backCommand = true;\n };\n MultiSelect.prototype.updateData = function (delimiterChar, e) {\n var data = '';\n var delim = this.mode === 'Delimiter' || this.mode === 'CheckBox';\n var text = [];\n var temp;\n var tempData = this.listData;\n this.listData = this.mainData;\n this.hiddenElement.innerHTML = '';\n if (!isNullOrUndefined(this.value)) {\n for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {\n var listValue = this.findListElement(((!isNullOrUndefined(this.mainList)) ? this.mainList : this.ulElement), 'li', 'data-value', this.value[index]);\n if (isNullOrUndefined(listValue) && !this.allowCustomValue) {\n this.value.splice(index, 1);\n index -= 1;\n }\n else {\n if (this.listData) {\n temp = this.getTextByValue(this.value[index]);\n }\n else {\n temp = this.value[index];\n }\n data += temp + delimiterChar + ' ';\n text.push(temp);\n }\n this.hiddenElement.innerHTML += '
';\n }\n }\n this.setProperties({ text: text.toString() }, true);\n if (delim) {\n this.updateWrapperText(this.delimiterWrapper, data);\n this.delimiterWrapper.setAttribute('id', getUniqueID('delim_val'));\n this.inputElement.setAttribute('aria-describedby', this.delimiterWrapper.id);\n this.inputElement.setAttribute('aria-labelledby', this.delimiterWrapper.id);\n }\n var targetEle = e && e.target;\n var isClearAll = (targetEle && targetEle.classList.contains('e-close-hooker')) ? true : null;\n if (!this.changeOnBlur && ((e && !isClearAll)) || this.isSelectAll) {\n this.isSelectAll = false;\n this.updateValueState(e, this.value, this.tempValues);\n }\n this.listData = tempData;\n this.addValidInputClass();\n };\n MultiSelect.prototype.initialTextUpdate = function () {\n if (!isNullOrUndefined(this.text)) {\n var textArr = this.text.split(this.delimiterChar);\n var textVal = [];\n for (var index = 0; textArr.length > index; index++) {\n var val = this.getValueByText(textArr[index]);\n if (!isNullOrUndefined(val)) {\n textVal.push(val);\n }\n else if (this.allowCustomValue) {\n textVal.push(textArr[index]);\n }\n }\n if (textVal && textVal.length) {\n this.setProperties({ value: textVal }, true);\n }\n }\n else {\n this.setProperties({ value: null }, true);\n }\n };\n MultiSelect.prototype.renderList = function (isEmptyData) {\n if (!isEmptyData && this.allowCustomValue && this.list && (this.list.textContent === this.noRecordsTemplate\n || this.list.querySelector('.e-ul') && this.list.querySelector('.e-ul').childElementCount === 0)) {\n isEmptyData = true;\n }\n _super.prototype.render.call(this, isEmptyData);\n this.unwireListEvents();\n this.wireListEvents();\n };\n MultiSelect.prototype.initialValueUpdate = function () {\n if (this.list) {\n var text = void 0;\n var element = void 0;\n var value = void 0;\n if (this.chipCollectionWrapper) {\n this.chipCollectionWrapper.innerHTML = '';\n }\n this.removeListSelection();\n if (!isNullOrUndefined(this.value)) {\n for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {\n value = this.value[index];\n element = this.findListElement(this.hideSelectedItem ? this.ulElement : this.list, 'li', 'data-value', value);\n text = this.getTextByValue(value);\n if ((element && (element.getAttribute('aria-selected') !== 'true')) ||\n (element && (element.getAttribute('aria-selected') === 'true' && this.hideSelectedItem) &&\n (this.mode === 'Box' || this.mode === 'Default'))) {\n this.addChip(text, value);\n this.addListSelection(element);\n }\n else if (value && this.allowCustomValue) {\n var indexItem = this.listData.length;\n var newValue = {};\n setValue(this.fields.text, value, newValue);\n setValue(this.fields.value, value, newValue);\n var noDataEle = this.popupWrapper.querySelector('.' + dropDownBaseClasses.noData);\n this.addItem(newValue, indexItem);\n element = element ? element : this.findListElement(this.hideSelectedItem ? this.ulElement : this.list, 'li', 'data-value', value);\n if (this.popupWrapper.contains(noDataEle)) {\n this.list.setAttribute('style', noDataEle.getAttribute('style'));\n this.popupWrapper.replaceChild(this.list, noDataEle);\n this.wireListEvents();\n }\n this.addChip(text, value);\n this.addListSelection(element);\n }\n }\n }\n if (this.mode === 'CheckBox') {\n this.updateDelimView();\n if (this.changeOnBlur) {\n this.updateValueState(null, this.value, this.tempValues);\n }\n this.updateDelimeter(this.delimiterChar);\n this.refreshInputHight();\n }\n else {\n this.updateDelimeter(this.delimiterChar);\n }\n if (this.mode === 'CheckBox' && this.showSelectAll && (isNullOrUndefined(this.value) || !this.value.length)) {\n this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'uncheck' });\n }\n if (this.mode === 'Box' || (this.mode === 'Default' && this.inputFocus)) {\n this.chipCollectionWrapper.style.display = '';\n }\n else if (this.mode === 'Delimiter' || this.mode === 'CheckBox') {\n this.showDelimWrapper();\n }\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n MultiSelect.prototype.updateActionCompleteData = function (li, item) {\n if (this.value && this.value.indexOf(li.getAttribute('data-value')) > -1) {\n this.mainList = this.ulElement;\n addClass([li], HIDE_LIST);\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n MultiSelect.prototype.updateAddItemList = function (list, itemCount) {\n if (this.popupObj && this.popupObj.element && this.popupObj.element.querySelector('.' + dropDownBaseClasses.noData) && list) {\n this.list = list;\n this.mainList = this.ulElement = list.querySelector('ul');\n remove(this.popupWrapper.querySelector('.e-content'));\n this.popupObj = null;\n this.renderPopup();\n }\n else if (this.allowCustomValue) {\n this.list = list;\n this.mainList = this.ulElement = list.querySelector('ul');\n }\n };\n MultiSelect.prototype.updateDataList = function () {\n if (this.mainList && this.ulElement && this.mainList.childElementCount < this.ulElement.childElementCount) {\n this.mainList = this.ulElement.cloneNode ? this.ulElement.cloneNode(true) : this.ulElement;\n }\n };\n MultiSelect.prototype.isValidLI = function (li) {\n return (li && !li.classList.contains(dropDownBaseClasses.disabled) && !li.classList.contains(dropDownBaseClasses.group) &&\n li.classList.contains(dropDownBaseClasses.li));\n };\n MultiSelect.prototype.updateListSelection = function (li, e, length) {\n var customVal = li.getAttribute('data-value');\n var value = this.getFormattedValue(customVal);\n if (this.allowCustomValue && ((customVal !== 'false' && value === false) ||\n (!isNullOrUndefined(value) && value.toString() === 'NaN'))) {\n value = customVal;\n }\n this.removeHover();\n if (!this.value || this.value.indexOf(value) === -1) {\n this.dispatchSelect(value, e, li, (li.getAttribute('aria-selected') === 'true'), length);\n }\n else {\n this.removeValue(value, e, length);\n }\n };\n MultiSelect.prototype.updateListSelectEventCallback = function (value, li, e) {\n var _this = this;\n var text = this.getTextByValue(value);\n if ((this.allowCustomValue || this.allowFiltering) && !this.findListElement(this.mainList, 'li', 'data-value', value)) {\n var temp_1 = li.cloneNode(true);\n var fieldValue = this.fields.value ? this.fields.value : 'value';\n if (this.allowCustomValue && this.mainData.length && typeof getValue(fieldValue, this.mainData[0]) === 'number') {\n value = !isNaN(parseFloat(value.toString())) ? parseFloat(value.toString()) : value;\n }\n var data_1 = this.getDataByValue(value);\n var eventArgs = {\n newData: data_1,\n cancel: false\n };\n this.trigger('customValueSelection', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n append([temp_1], _this.mainList);\n _this.mainData.push(data_1);\n _this.remoteCustomValue = false;\n _this.addValue(value, text, e);\n }\n });\n }\n else {\n this.remoteCustomValue = false;\n this.addValue(value, text, e);\n }\n };\n MultiSelect.prototype.removeListSelection = function () {\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n var selectedItems = this.list.querySelectorAll('.' + className);\n var temp = selectedItems.length;\n if (selectedItems && selectedItems.length) {\n removeClass(selectedItems, className);\n while (temp > 0) {\n selectedItems[temp - 1].setAttribute('aria-selected', 'false');\n temp--;\n }\n }\n if (!isNullOrUndefined(this.mainList)) {\n var selectItems = this.mainList.querySelectorAll('.' + className);\n var temp1 = selectItems.length;\n if (selectItems && selectItems.length) {\n removeClass(selectItems, className);\n while (temp1 > 0) {\n selectItems[temp1 - 1].setAttribute('aria-selected', 'false');\n if (this.mode === 'CheckBox') {\n if (selectedItems && (selectedItems.length > (temp1 - 1))) {\n selectedItems[temp1 - 1].firstElementChild.setAttribute('aria-checked', 'false');\n removeClass([selectedItems[temp1 - 1].firstElementChild.lastElementChild], 'e-check');\n }\n selectItems[temp1 - 1].firstElementChild.setAttribute('aria-checked', 'false');\n removeClass([selectItems[temp1 - 1].firstElementChild.lastElementChild], 'e-check');\n }\n temp1--;\n }\n }\n }\n };\n MultiSelect.prototype.removeHover = function () {\n var hoveredItem = this.list.querySelectorAll('.' + dropDownBaseClasses.hover);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, dropDownBaseClasses.hover);\n }\n };\n MultiSelect.prototype.removeFocus = function () {\n if (this.list && this.mainList) {\n var hoveredItem = this.list.querySelectorAll('.' + dropDownBaseClasses.focus);\n var mainlist = this.mainList.querySelectorAll('.' + dropDownBaseClasses.focus);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, dropDownBaseClasses.focus);\n removeClass(mainlist, dropDownBaseClasses.focus);\n }\n }\n };\n MultiSelect.prototype.addListHover = function (li) {\n if (this.enabled && this.isValidLI(li)) {\n this.removeHover();\n addClass([li], dropDownBaseClasses.hover);\n }\n else {\n if ((li !== null && li.classList.contains('e-list-group-item')) && this.enableGroupCheckBox && this.mode === 'CheckBox'\n && !isNullOrUndefined(this.fields.groupBy)) {\n this.removeHover();\n addClass([li], dropDownBaseClasses.hover);\n }\n }\n };\n MultiSelect.prototype.addListFocus = function (element) {\n if (this.enabled && this.isValidLI(element)) {\n this.removeFocus();\n addClass([element], dropDownBaseClasses.focus);\n }\n else {\n if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {\n addClass([element], dropDownBaseClasses.focus);\n }\n }\n };\n MultiSelect.prototype.addListSelection = function (element, mainElement) {\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n if (this.isValidLI(element) && !element.classList.contains(dropDownBaseClasses.hover)) {\n addClass([element], className);\n this.updateMainList(false, element.getAttribute('data-value'), mainElement);\n element.setAttribute('aria-selected', 'true');\n if (this.mode === 'CheckBox') {\n var ariaCheck = element.firstElementChild.getAttribute('aria-checked');\n if (ariaCheck === 'false' || isNullOrUndefined(ariaCheck)) {\n this.notify('updatelist', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', li: element, e: this });\n }\n }\n this.notify('activeList', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', li: element, e: this });\n if (this.chipCollectionWrapper) {\n this.removeChipSelection();\n }\n attributes(this.inputElement, { 'aria-activedescendant': element.id });\n }\n };\n MultiSelect.prototype.updateDelimeter = function (delimChar, e) {\n this.updateData(delimChar, e);\n };\n MultiSelect.prototype.onMouseClick = function (e) {\n var _this = this;\n this.keyCode = null;\n this.scrollFocusStatus = false;\n var target = e.target;\n var li = closest(target, '.' + dropDownBaseClasses.li);\n var headerLi = closest(target, '.' + dropDownBaseClasses.group);\n if (headerLi && this.enableGroupCheckBox && this.mode === 'CheckBox' && this.fields.groupBy) {\n target = target.classList.contains('e-list-group-item') ? target.firstElementChild.lastElementChild\n : e.target;\n if (target.classList.contains('e-check')) {\n this.selectAllItem(false, e);\n target.classList.remove('e-check');\n target.classList.remove('e-stop');\n closest(target, '.' + 'e-list-group-item').classList.remove('e-active');\n target.setAttribute('aria-selected', 'false');\n }\n else {\n this.selectAllItem(true, e);\n target.classList.remove('e-stop');\n target.classList.add('e-check');\n closest(target, '.' + 'e-list-group-item').classList.add('e-active');\n target.setAttribute('aria-selected', 'true');\n }\n this.refreshSelection();\n this.checkSelectAll();\n }\n else {\n if (this.isValidLI(li)) {\n var limit = this.value && this.value.length ? this.value.length : 0;\n if (li.classList.contains('e-active')) {\n limit = limit - 1;\n }\n if (limit < this.maximumSelectionLength) {\n this.updateListSelection(li, e);\n this.checkPlaceholderSize();\n this.addListFocus(li);\n if ((this.allowCustomValue || this.allowFiltering) && this.mainList && this.listData) {\n if (this.mode !== 'CheckBox') {\n this.focusAtLastListItem(li.getAttribute('data-value'));\n this.refreshSelection();\n }\n }\n else {\n this.makeTextBoxEmpty();\n }\n }\n if (this.mode === 'CheckBox') {\n this.updateDelimView();\n if (this.value && this.value.length > 50) {\n setTimeout(function () {\n _this.updateDelimeter(_this.delimiterChar, e);\n }, 0);\n }\n else {\n this.updateDelimeter(this.delimiterChar, e);\n }\n this.refreshInputHight();\n }\n else {\n this.updateDelimeter(this.delimiterChar, e);\n }\n this.checkSelectAll();\n this.refreshPopup();\n if (this.hideSelectedItem) {\n this.focusAtFirstListItem();\n }\n if (this.closePopupOnSelect) {\n this.hidePopup();\n }\n else {\n e.preventDefault();\n }\n this.makeTextBoxEmpty();\n this.findGroupStart(target);\n if (this.mode !== 'CheckBox') {\n this.refreshListItems(isNullOrUndefined(li) ? null : li.textContent);\n }\n }\n else {\n e.preventDefault();\n }\n this.refreshPlaceHolder();\n this.deselectHeader();\n }\n };\n MultiSelect.prototype.findGroupStart = function (target) {\n if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {\n var count = 0;\n var liChecked = 0;\n var liUnchecked = 0;\n var groupValues = void 0;\n if (this.itemTemplate && !target.getElementsByClassName('e-frame').length) {\n while (!target.getElementsByClassName('e-frame').length) {\n target = target.parentElement;\n }\n }\n if (target.classList.contains('e-frame')) {\n target = target.parentElement.parentElement;\n }\n groupValues = this.findGroupAttrtibutes(target, liChecked, liUnchecked, count, 0);\n groupValues = this.findGroupAttrtibutes(target, groupValues[0], groupValues[1], groupValues[2], 1);\n while (!target.classList.contains('e-list-group-item')) {\n if (target.classList.contains('e-list-icon')) {\n target = target.parentElement;\n }\n target = target.previousElementSibling;\n if (target == null) {\n break;\n }\n }\n this.updateCheckBox(target, groupValues[0], groupValues[1], groupValues[2]);\n }\n };\n MultiSelect.prototype.findGroupAttrtibutes = function (listElement, checked, unChecked, count, position) {\n while (!listElement.classList.contains('e-list-group-item')) {\n if (listElement.classList.contains('e-list-icon')) {\n listElement = listElement.parentElement;\n }\n if (listElement.getElementsByClassName('e-frame')[0].classList.contains('e-check') &&\n listElement.classList.contains('e-list-item')) {\n checked++;\n }\n else if (listElement.classList.contains('e-list-item')) {\n unChecked++;\n }\n count++;\n listElement = position ? listElement.nextElementSibling : listElement.previousElementSibling;\n if (listElement == null) {\n break;\n }\n }\n return [checked, unChecked, count];\n };\n MultiSelect.prototype.updateCheckBox = function (groupHeader, checked, unChecked, count) {\n if (groupHeader === null) {\n return;\n }\n var checkBoxElement = groupHeader.getElementsByClassName('e-frame')[0];\n if (count === checked) {\n checkBoxElement.classList.remove('e-stop');\n checkBoxElement.classList.add('e-check');\n closest(checkBoxElement, '.' + 'e-list-group-item').classList.add('e-active');\n groupHeader.setAttribute('aria-selected', 'true');\n }\n else if (count === unChecked) {\n checkBoxElement.classList.remove('e-check');\n checkBoxElement.classList.remove('e-stop');\n closest(checkBoxElement, '.' + 'e-list-group-item').classList.remove('e-active');\n groupHeader.setAttribute('aria-selected', 'false');\n }\n else if (this.maximumSelectionLength === checked - 1) {\n checkBoxElement.classList.remove('e-stop');\n groupHeader.setAttribute('aria-selected', 'true');\n closest(checkBoxElement, '.' + 'e-list-group-item').classList.add('e-active');\n checkBoxElement.classList.add('e-check');\n }\n else {\n checkBoxElement.classList.remove('e-check');\n checkBoxElement.classList.add('e-stop');\n closest(checkBoxElement, '.' + 'e-list-group-item').classList.add('e-active');\n groupHeader.setAttribute('aria-selected', 'false');\n }\n };\n MultiSelect.prototype.deselectHeader = function () {\n var limit = this.value && this.value.length ? this.value.length : 0;\n var collection = this.list.querySelectorAll('li.e-list-group-item:not(.e-active)');\n if (limit < this.maximumSelectionLength) {\n removeClass(collection, 'e-disable');\n }\n if (limit === this.maximumSelectionLength) {\n addClass(collection, 'e-disable');\n }\n };\n MultiSelect.prototype.onMouseOver = function (e) {\n var currentLi = closest(e.target, '.' + dropDownBaseClasses.li);\n if (currentLi === null && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)\n && this.enableGroupCheckBox) {\n currentLi = closest(e.target, '.' + dropDownBaseClasses.group);\n }\n this.addListHover(currentLi);\n };\n MultiSelect.prototype.onMouseLeave = function () {\n this.removeHover();\n };\n MultiSelect.prototype.onListMouseDown = function (e) {\n e.preventDefault();\n this.scrollFocusStatus = true;\n };\n MultiSelect.prototype.onDocumentClick = function (e) {\n if (this.mode !== 'CheckBox') {\n var target = e.target;\n if (!(!isNullOrUndefined(this.popupObj) && closest(target, '[id=\"' + this.popupObj.element.id + '\"]')) &&\n !this.overAllWrapper.contains(e.target)) {\n this.scrollFocusStatus = false;\n }\n else {\n this.scrollFocusStatus = (Browser.isIE || Browser.info.name === 'edge') && (document.activeElement === this.inputElement);\n }\n }\n };\n MultiSelect.prototype.wireListEvents = function () {\n EventHandler.add(document, 'mousedown', this.onDocumentClick, this);\n EventHandler.add(this.list, 'mousedown', this.onListMouseDown, this);\n EventHandler.add(this.list, 'mouseup', this.onMouseClick, this);\n EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);\n };\n MultiSelect.prototype.unwireListEvents = function () {\n EventHandler.remove(document, 'mousedown', this.onDocumentClick);\n if (this.list) {\n EventHandler.remove(this.list, 'mousedown', this.onListMouseDown);\n EventHandler.remove(this.list, 'mouseup', this.onMouseClick);\n EventHandler.remove(this.list, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);\n }\n };\n MultiSelect.prototype.hideOverAllClear = function () {\n if (!this.value || !this.value.length || this.inputElement.value === '') {\n this.overAllClear.style.display = 'none';\n }\n };\n MultiSelect.prototype.showOverAllClear = function () {\n if (((this.value && this.value.length) || this.inputElement.value !== '') && this.showClearButton && this.readonly !== true) {\n this.overAllClear.style.display = '';\n }\n else {\n this.overAllClear.style.display = 'none';\n }\n };\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n MultiSelect.prototype.focusIn = function () {\n if (document.activeElement !== this.inputElement && this.enabled) {\n this.inputElement.focus();\n }\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n MultiSelect.prototype.focusOut = function () {\n if (document.activeElement === this.inputElement && this.enabled) {\n this.inputElement.blur();\n }\n };\n /**\n * Shows the spinner loader.\n *\n * @returns {void}\n */\n MultiSelect.prototype.showSpinner = function () {\n if (isNullOrUndefined(this.spinnerElement)) {\n var filterClear = this.filterParent && this.filterParent.querySelector('.e-clear-icon.e-icons');\n if (this.overAllClear.style.display !== 'none' || filterClear) {\n this.spinnerElement = filterClear ? filterClear : this.overAllClear;\n }\n else {\n this.spinnerElement = this.createElement('span', { className: CLOSEICON_CLASS + ' ' + SPINNER_CLASS });\n this.componentWrapper.appendChild(this.spinnerElement);\n }\n createSpinner({ target: this.spinnerElement, width: Browser.isDevice ? '16px' : '14px' }, this.createElement);\n addClass([this.spinnerElement], DISABLE_ICON);\n showSpinner(this.spinnerElement);\n }\n };\n /**\n * Hides the spinner loader.\n *\n * @returns {void}\n */\n MultiSelect.prototype.hideSpinner = function () {\n if (!isNullOrUndefined(this.spinnerElement)) {\n hideSpinner(this.spinnerElement);\n removeClass([this.spinnerElement], DISABLE_ICON);\n if (this.spinnerElement.classList.contains(SPINNER_CLASS)) {\n detach(this.spinnerElement);\n }\n else {\n this.spinnerElement.innerHTML = '';\n }\n this.spinnerElement = null;\n }\n };\n MultiSelect.prototype.updateWrapperText = function (wrapperType, wrapperData) {\n if (this.valueTemplate || !this.enableHtmlSanitizer) {\n wrapperType.innerHTML = wrapperData;\n }\n else {\n wrapperType.innerText = SanitizeHtmlHelper.sanitize(wrapperData);\n }\n };\n MultiSelect.prototype.updateDelimView = function () {\n if (this.delimiterWrapper) {\n this.hideDelimWrapper();\n }\n if (this.chipCollectionWrapper) {\n this.chipCollectionWrapper.style.display = 'none';\n }\n this.viewWrapper.style.display = '';\n this.viewWrapper.style.width = '';\n this.viewWrapper.classList.remove(TOTAL_COUNT_WRAPPER);\n if (this.value && this.value.length) {\n var data = '';\n var temp = void 0;\n var tempData = void 0;\n var tempIndex = 1;\n var wrapperleng = void 0;\n var remaining = void 0;\n var downIconWidth = 0;\n var overAllContainer = void 0;\n this.updateWrapperText(this.viewWrapper, data);\n var l10nLocale = {\n noRecordsTemplate: 'No records found',\n actionFailureTemplate: 'Request failed',\n overflowCountTemplate: '+${count} more..',\n totalCountTemplate: '${count} selected'\n };\n var l10n = new L10n(this.getLocaleName(), l10nLocale, this.locale);\n if (l10n.getConstant('actionFailureTemplate') === '') {\n l10n = new L10n('dropdowns', l10nLocale, this.locale);\n }\n if (l10n.getConstant('noRecordsTemplate') === '') {\n l10n = new L10n('dropdowns', l10nLocale, this.locale);\n }\n var remainContent = l10n.getConstant('overflowCountTemplate');\n var totalContent = l10n.getConstant('totalCountTemplate');\n var raminElement = this.createElement('span', {\n className: REMAIN_WRAPPER\n });\n var remainCompildTemp = remainContent.replace('${count}', this.value.length.toString());\n raminElement.innerText = remainCompildTemp;\n this.viewWrapper.appendChild(raminElement);\n this.renderReactTemplates();\n var remainSize = raminElement.offsetWidth;\n remove(raminElement);\n if (this.showDropDownIcon) {\n downIconWidth = this.dropIcon.offsetWidth + parseInt(window.getComputedStyle(this.dropIcon).marginRight, 10);\n }\n this.checkClearIconWidth();\n if (!isNullOrUndefined(this.value)) {\n for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {\n data += (index === 0) ? '' : this.delimiterChar + ' ';\n temp = this.getOverflowVal(index);\n data += temp;\n temp = this.viewWrapper.innerHTML;\n this.updateWrapperText(this.viewWrapper, data);\n wrapperleng = this.viewWrapper.offsetWidth +\n parseInt(window.getComputedStyle(this.viewWrapper).paddingRight, 10);\n overAllContainer = this.componentWrapper.offsetWidth -\n parseInt(window.getComputedStyle(this.componentWrapper).paddingLeft, 10) -\n parseInt(window.getComputedStyle(this.componentWrapper).paddingRight, 10);\n if ((wrapperleng + downIconWidth + this.clearIconWidth) > overAllContainer) {\n if (tempData !== undefined && tempData !== '') {\n temp = tempData;\n index = tempIndex + 1;\n }\n this.updateWrapperText(this.viewWrapper, temp);\n remaining = this.value.length - index;\n wrapperleng = this.viewWrapper.offsetWidth +\n parseInt(window.getComputedStyle(this.viewWrapper).paddingRight, 10);\n while (((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) > overAllContainer) && wrapperleng !== 0\n && this.viewWrapper.innerHTML !== '') {\n var textArr = [];\n this.viewWrapper.innerHTML = textArr.join(this.delimiterChar);\n remaining = this.value.length;\n wrapperleng = this.viewWrapper.offsetWidth +\n parseInt(window.getComputedStyle(this.viewWrapper).paddingRight, 10);\n }\n break;\n }\n else if ((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) <= overAllContainer) {\n tempData = data;\n tempIndex = index;\n }\n else if (index === 0) {\n tempData = '';\n tempIndex = -1;\n }\n }\n }\n if (remaining > 0) {\n var totalWidth = overAllContainer - downIconWidth - this.clearIconWidth;\n this.viewWrapper.appendChild(this.updateRemainTemplate(raminElement, this.viewWrapper, remaining, remainContent, totalContent, totalWidth));\n this.updateRemainWidth(this.viewWrapper, totalWidth);\n this.updateRemainingText(raminElement, downIconWidth, remaining, remainContent, totalContent);\n }\n }\n else {\n this.viewWrapper.innerHTML = '';\n this.viewWrapper.style.display = 'none';\n }\n };\n MultiSelect.prototype.checkClearIconWidth = function () {\n if (this.showClearButton) {\n this.clearIconWidth = this.overAllClear.offsetWidth;\n }\n };\n MultiSelect.prototype.updateRemainWidth = function (viewWrapper, totalWidth) {\n if (viewWrapper.classList.contains(TOTAL_COUNT_WRAPPER) && totalWidth < (viewWrapper.offsetWidth +\n parseInt(window.getComputedStyle(viewWrapper).paddingLeft, 10)\n + parseInt(window.getComputedStyle(viewWrapper).paddingLeft, 10))) {\n viewWrapper.style.width = totalWidth + 'px';\n }\n };\n MultiSelect.prototype.updateRemainTemplate = function (raminElement, viewWrapper, remaining, remainContent, totalContent, totalWidth) {\n if (viewWrapper.firstChild && viewWrapper.firstChild.nodeType === 3 && viewWrapper.firstChild.nodeValue === '') {\n viewWrapper.removeChild(viewWrapper.firstChild);\n }\n raminElement.innerHTML = '';\n var remainTemp = remainContent.replace('${count}', remaining.toString());\n var totalTemp = totalContent.replace('${count}', remaining.toString());\n raminElement.innerText = (viewWrapper.firstChild && viewWrapper.firstChild.nodeType === 3) ? remainTemp : totalTemp;\n if (viewWrapper.firstChild && viewWrapper.firstChild.nodeType === 3) {\n viewWrapper.classList.remove(TOTAL_COUNT_WRAPPER);\n }\n else {\n viewWrapper.classList.add(TOTAL_COUNT_WRAPPER);\n this.updateRemainWidth(viewWrapper, totalWidth);\n }\n return raminElement;\n };\n MultiSelect.prototype.updateRemainingText = function (raminElement, downIconWidth, remaining, remainContent, totalContent) {\n var overAllContainer = this.componentWrapper.offsetWidth -\n parseInt(window.getComputedStyle(this.componentWrapper).paddingLeft, 10) -\n parseInt(window.getComputedStyle(this.componentWrapper).paddingRight, 10);\n var wrapperleng = this.viewWrapper.offsetWidth + parseInt(window.getComputedStyle(this.viewWrapper).paddingRight, 10);\n if (((wrapperleng + downIconWidth) >= overAllContainer) && wrapperleng !== 0 && this.viewWrapper.firstChild &&\n this.viewWrapper.firstChild.nodeType === 3) {\n while (((wrapperleng + downIconWidth) > overAllContainer) && wrapperleng !== 0 && this.viewWrapper.firstChild &&\n this.viewWrapper.firstChild.nodeType === 3) {\n var textArr = this.viewWrapper.firstChild.nodeValue.split(this.delimiterChar);\n textArr.pop();\n this.viewWrapper.firstChild.nodeValue = textArr.join(this.delimiterChar);\n if (this.viewWrapper.firstChild.nodeValue === '') {\n this.viewWrapper.removeChild(this.viewWrapper.firstChild);\n }\n remaining++;\n wrapperleng = this.viewWrapper.offsetWidth;\n }\n var totalWidth = overAllContainer - downIconWidth;\n this.updateRemainTemplate(raminElement, this.viewWrapper, remaining, remainContent, totalContent, totalWidth);\n }\n };\n MultiSelect.prototype.getOverflowVal = function (index) {\n var temp;\n if (this.mainData && this.mainData.length) {\n if (this.mode === 'CheckBox') {\n var newTemp = this.listData;\n this.listData = this.mainData;\n temp = this.getTextByValue(this.value[index]);\n this.listData = newTemp;\n }\n else {\n temp = this.getTextByValue(this.value[index]);\n }\n }\n else {\n temp = this.value[index];\n }\n return temp;\n };\n MultiSelect.prototype.unWireEvent = function () {\n EventHandler.remove(this.componentWrapper, 'mousedown', this.wrapperClick);\n EventHandler.remove(window, 'resize', this.windowResize);\n EventHandler.remove(this.inputElement, 'focus', this.focusInHandler);\n EventHandler.remove(this.inputElement, 'keydown', this.onKeyDown);\n if (this.mode !== 'CheckBox') {\n EventHandler.remove(this.inputElement, 'input', this.onInput);\n }\n EventHandler.remove(this.inputElement, 'keyup', this.keyUp);\n var formElement = closest(this.inputElement, 'form');\n if (formElement) {\n EventHandler.remove(formElement, 'reset', this.resetValueHandler);\n }\n EventHandler.remove(this.inputElement, 'blur', this.onBlurHandler);\n EventHandler.remove(this.componentWrapper, 'mousemove', this.mouseIn);\n EventHandler.remove(this.componentWrapper, 'mouseout', this.mouseOut);\n EventHandler.remove(this.overAllClear, 'mousedown', this.clearAll);\n EventHandler.remove(this.inputElement, 'paste', this.pasteHandler);\n };\n MultiSelect.prototype.selectAllItem = function (state, event, list) {\n var li;\n li = this.list.querySelectorAll(state ?\n 'li.e-list-item:not([aria-selected=\"true\"]):not(.e-reorder-hide)' :\n 'li.e-list-item[aria-selected=\"true\"]:not(.e-reorder-hide)');\n if (this.value && this.value.length && event && event.target\n && closest(event.target, '.e-close-hooker') && this.allowFiltering) {\n li = this.mainList.querySelectorAll(state ?\n 'li.e-list-item:not([aria-selected=\"true\"]):not(.e-reorder-hide)' :\n 'li.e-list-item[aria-selected=\"true\"]:not(.e-reorder-hide)');\n }\n if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {\n var target = (event ? event.target : null);\n target = (event && event.keyCode === 32) ? list : target;\n target = (target && target.classList.contains('e-frame')) ? target.parentElement.parentElement : target;\n if (target && target.classList.contains('e-list-group-item')) {\n var listElement = target.nextElementSibling;\n if (isNullOrUndefined(listElement)) {\n return;\n }\n while (listElement.classList.contains('e-list-item')) {\n if (state) {\n if (!listElement.firstElementChild.lastElementChild.classList.contains('e-check')) {\n var selectionLimit = this.value && this.value.length ? this.value.length : 0;\n if (listElement.classList.contains('e-active')) {\n selectionLimit -= 1;\n }\n if (selectionLimit < this.maximumSelectionLength) {\n this.updateListSelection(listElement, event);\n }\n }\n }\n else {\n if (listElement.firstElementChild.lastElementChild.classList.contains('e-check')) {\n this.updateListSelection(listElement, event);\n }\n }\n listElement = listElement.nextElementSibling;\n if (listElement == null) {\n break;\n }\n }\n if (target.classList.contains('e-list-group-item')) {\n var focusedElement = this.list.getElementsByClassName('e-item-focus')[0];\n if (focusedElement) {\n focusedElement.classList.remove('e-item-focus');\n }\n if (state) {\n target.classList.add('e-active');\n }\n else {\n target.classList.remove('e-active');\n }\n target.classList.add('e-item-focus');\n }\n this.textboxValueUpdate();\n this.checkPlaceholderSize();\n if (!this.changeOnBlur && event) {\n this.updateValueState(event, this.value, this.tempValues);\n }\n }\n else {\n this.updateValue(event, li, state);\n }\n }\n else {\n this.updateValue(event, li, state);\n }\n };\n MultiSelect.prototype.updateValue = function (event, li, state) {\n var _this = this;\n var length = li.length;\n var beforeSelectArgs = {\n event: event,\n items: state ? li : [],\n itemData: state ? this.listData : [],\n isInteracted: event ? true : false,\n isChecked: state,\n preventSelectEvent: false\n };\n this.trigger('beforeSelectAll', beforeSelectArgs);\n if (li && li.length) {\n var index_1 = 0;\n var count_1 = 0;\n if (this.enableGroupCheckBox) {\n count_1 = state ? this.maximumSelectionLength - (this.value ? this.value.length : 0) : li.length;\n }\n else {\n count_1 = state ? this.maximumSelectionLength - (this.value ? this.value.length : 0) : this.maximumSelectionLength;\n }\n if (!beforeSelectArgs.preventSelectEvent) {\n while (index_1 < length && index_1 <= 50 && index_1 < count_1) {\n this.updateListSelection(li[index_1], event, length - index_1);\n if (this.enableGroupCheckBox) {\n this.findGroupStart(li[index_1]);\n }\n index_1++;\n }\n if (length > 50) {\n setTimeout(function () {\n while (index_1 < length && index_1 < count_1) {\n _this.updateListSelection(li[index_1], event, length - index_1);\n if (_this.enableGroupCheckBox) {\n _this.findGroupStart(li[index_1]);\n }\n index_1++;\n }\n _this.updatedataValueItems(event);\n if (!_this.changeOnBlur) {\n _this.updateValueState(event, _this.value, _this.tempValues);\n _this.isSelectAll = _this.isSelectAll ? !_this.isSelectAll : _this.isSelectAll;\n }\n _this.updateHiddenElement();\n }, 0);\n }\n }\n else {\n for (var i = 0; i < li.length && i < count_1; i++) {\n this.removeHover();\n var customVal = li[i].getAttribute('data-value');\n var value = this.getFormattedValue(customVal);\n var mainElement = this.mainList ? this.mainList.querySelectorAll(state ?\n 'li.e-list-item:not([aria-selected=\"true\"]):not(.e-reorder-hide)' :\n 'li.e-list-item[aria-selected=\"true\"]:not(.e-reorder-hide)')[i] : null;\n if (state) {\n this.value = !this.value ? [] : this.value;\n if (this.value.indexOf(value) < 0) {\n this.setProperties({ value: [].concat([], this.value, [value]) }, true);\n }\n this.removeFocus();\n this.addListSelection(li[i], mainElement);\n this.updateChipStatus();\n this.checkMaxSelection();\n }\n else {\n this.removeAllItems(value, event, false, li[i], mainElement);\n }\n if (this.enableGroupCheckBox) {\n this.findGroupStart(li[i]);\n }\n }\n if (!state) {\n var limit = this.value && this.value.length ? this.value.length : 0;\n if (limit < this.maximumSelectionLength) {\n var collection = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ':not(.e-active)');\n removeClass(collection, 'e-disable');\n }\n }\n var args = {\n event: event,\n items: state ? li : [],\n itemData: state ? this.listData : [],\n isInteracted: event ? true : false,\n isChecked: state\n };\n this.trigger('selectedAll', args);\n }\n }\n this.updatedataValueItems(event);\n this.checkPlaceholderSize();\n if (length <= 50 && !beforeSelectArgs.preventSelectEvent) {\n if (!this.changeOnBlur) {\n this.updateValueState(event, this.value, this.tempValues);\n this.isSelectAll = this.isSelectAll ? !this.isSelectAll : this.isSelectAll;\n }\n this.updateHiddenElement();\n }\n };\n MultiSelect.prototype.updateHiddenElement = function () {\n var _this = this;\n var hiddenValue = '';\n var wrapperText = '';\n var data = '';\n var text = [];\n if (this.mode === 'CheckBox') {\n this.value.map(function (value, index) {\n hiddenValue += '
';\n if (_this.listData) {\n data = _this.getTextByValue(value);\n }\n else {\n data = value;\n }\n wrapperText += data + _this.delimiterChar + ' ';\n text.push(data);\n });\n this.hiddenElement.innerHTML = hiddenValue;\n this.updateWrapperText(this.delimiterWrapper, wrapperText);\n this.delimiterWrapper.setAttribute('id', getUniqueID('delim_val'));\n this.inputElement.setAttribute('aria-describedby', this.delimiterWrapper.id);\n this.inputElement.setAttribute('aria-labelledby', this.delimiterWrapper.id);\n this.setProperties({ text: text.toString() }, true);\n this.refreshInputHight();\n this.refreshPlaceHolder();\n }\n };\n MultiSelect.prototype.updatedataValueItems = function (event) {\n this.deselectHeader();\n this.textboxValueUpdate(event);\n };\n MultiSelect.prototype.textboxValueUpdate = function (event) {\n var isRemoveAll = event && event.target && (closest(event.target, '.e-selectall-parent')\n || closest(event.target, '.e-close-hooker'));\n if (this.mode !== 'Box' && !this.isPopupOpen() && !(this.mode === 'CheckBox' && (this.isSelectAll || isRemoveAll))) {\n this.updateDelimView();\n }\n else {\n this.searchWrapper.classList.remove(ZERO_SIZE);\n }\n if (this.mode === 'CheckBox') {\n this.updateDelimView();\n if (!(isRemoveAll || this.isSelectAll)) {\n this.updateDelimeter(this.delimiterChar, event);\n }\n this.refreshInputHight();\n }\n else {\n this.updateDelimeter(this.delimiterChar, event);\n }\n this.refreshPlaceHolder();\n };\n MultiSelect.prototype.setZIndex = function () {\n if (this.popupObj) {\n this.popupObj.setProperties({ 'zIndex': this.zIndex });\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n MultiSelect.prototype.updateDataSource = function (prop) {\n if (isNullOrUndefined(this.list)) {\n this.renderPopup();\n }\n else {\n this.resetList(this.dataSource);\n }\n if (this.value && this.value.length) {\n this.setProperties({ 'value': this.value });\n this.refreshSelection();\n }\n };\n MultiSelect.prototype.onLoadSelect = function () {\n this.setDynValue = true;\n this.renderPopup();\n };\n MultiSelect.prototype.selectAllItems = function (state, event) {\n var _this = this;\n if (isNullOrUndefined(this.list)) {\n this.selectAllAction = function () {\n if (_this.mode === 'CheckBox' && _this.showSelectAll) {\n var args = {\n module: 'CheckBoxSelection',\n enable: _this.mode === 'CheckBox',\n value: state ? 'check' : 'uncheck'\n };\n _this.notify('checkSelectAll', args);\n }\n _this.selectAllItem(state, event);\n _this.selectAllAction = null;\n };\n _super.prototype.render.call(this);\n }\n else {\n this.selectAllAction = null;\n if (this.mode === 'CheckBox' && this.showSelectAll) {\n var args = {\n value: state ? 'check' : 'uncheck',\n enable: this.mode === 'CheckBox',\n module: 'CheckBoxSelection'\n };\n this.notify('checkSelectAll', args);\n }\n this.selectAllItem(state, event);\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} Returns the persisted data of the component.\n */\n MultiSelect.prototype.getPersistData = function () {\n return this.addOnPersist(['value']);\n };\n /**\n * Dynamically change the value of properties.\n *\n * @param {MultiSelectModel} newProp - Returns the dynamic property value of the component.\n * @param {MultiSelectModel} oldProp - Returns the previous property value of the component.\n * @private\n * @returns {void}\n */\n MultiSelect.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (newProp.dataSource && !isNullOrUndefined(Object.keys(newProp.dataSource))\n || newProp.query && !isNullOrUndefined(Object.keys(newProp.query))) {\n this.mainList = null;\n this.mainData = null;\n this.isFirstClick = false;\n this.isDynamicDataChange = true;\n }\n if (this.getModuleName() === 'multiselect') {\n this.filterAction = false;\n this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);\n }\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'query':\n case 'dataSource':\n if (this.mode === 'CheckBox' && this.showSelectAll) {\n if (!isNullOrUndefined(this.popupObj)) {\n this.popupObj.destroy();\n this.popupObj = null;\n }\n this.renderPopup();\n }\n break;\n case 'htmlAttributes':\n this.updateHTMLAttribute();\n break;\n case 'showClearButton':\n this.updateClearButton(newProp.showClearButton);\n break;\n case 'text':\n this.updateVal(this.value, this.value, 'text');\n break;\n case 'value':\n this.updateVal(this.value, oldProp.value, 'value');\n this.addValidInputClass();\n if (!this.closePopupOnSelect && this.isPopupOpen()) {\n this.refreshPopup();\n }\n this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;\n break;\n case 'width':\n this.setWidth(newProp.width);\n this.popupObj.setProperties({ width: this.calcPopupWidth() });\n break;\n case 'placeholder':\n this.refreshPlaceHolder();\n break;\n case 'filterBarPlaceholder':\n if (this.allowFiltering) {\n this.notify('filterBarPlaceholder', { filterBarPlaceholder: newProp.filterBarPlaceholder });\n }\n break;\n case 'delimiterChar':\n if (this.mode !== 'Box') {\n this.updateDelimView();\n }\n this.updateData(newProp.delimiterChar);\n break;\n case 'cssClass':\n this.updateOldPropCssClass(oldProp.cssClass);\n this.updateCssClass();\n break;\n case 'enableRtl':\n this.enableRTL(newProp.enableRtl);\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp);\n break;\n case 'readonly':\n this.updateReadonly(newProp.readonly);\n this.hidePopup();\n break;\n case 'enabled':\n this.hidePopup();\n this.enable(newProp.enabled);\n break;\n case 'showSelectAll':\n if (this.popupObj) {\n this.popupObj.destroy();\n this.popupObj = null;\n }\n this.renderPopup();\n break;\n case 'showDropDownIcon':\n this.dropDownIcon();\n break;\n case 'floatLabelType':\n this.setFloatLabelType();\n this.addValidInputClass();\n break;\n case 'enableSelectionOrder':\n break;\n case 'selectAllText':\n this.notify('selectAllText', false);\n break;\n case 'popupHeight':\n case 'headerTemplate':\n case 'footerTemplate':\n this.reInitializePoup();\n break;\n case 'allowFiltering':\n if (this.mode === 'CheckBox' && this.popupObj) {\n this.reInitializePoup();\n }\n this.updateSelectElementData(this.allowFiltering);\n break;\n default:\n {\n // eslint-disable-next-line max-len\n var msProps = this.getPropObject(prop, newProp, oldProp);\n _super.prototype.onPropertyChanged.call(this, msProps.newProperty, msProps.oldProperty);\n }\n break;\n }\n }\n };\n MultiSelect.prototype.reInitializePoup = function () {\n if (this.popupObj) {\n this.popupObj.destroy();\n this.popupObj = null;\n }\n this.renderPopup();\n };\n MultiSelect.prototype.updateVal = function (newProp, oldProp, prop) {\n if (!this.list) {\n this.onLoadSelect();\n }\n else if ((this.dataSource instanceof DataManager) && (!this.listData || !(this.mainList && this.mainData))) {\n this.onLoadSelect();\n }\n else {\n if (prop === 'text') {\n this.initialTextUpdate();\n newProp = this.value;\n }\n if (isNullOrUndefined(this.value) || this.value.length === 0) {\n this.tempValues = oldProp;\n }\n // eslint-disable-next-line\n if (this.allowCustomValue && (this.mode === 'Default' || this.mode === 'Box') && this.isReact && this.inputFocus\n && this.isPopupOpen() && this.mainData !== this.listData) {\n var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;\n this.onActionComplete(list, this.mainData);\n }\n this.initialValueUpdate();\n if (this.mode !== 'Box' && !this.inputFocus) {\n this.updateDelimView();\n }\n if (!this.inputFocus) {\n this.refreshInputHight();\n }\n this.refreshPlaceHolder();\n if (this.mode !== 'CheckBox' && this.changeOnBlur) {\n this.updateValueState(null, newProp, oldProp);\n }\n this.checkPlaceholderSize();\n }\n if (!this.changeOnBlur) {\n this.updateValueState(null, newProp, oldProp);\n }\n };\n /**\n * Adds a new item to the multiselect popup list. By default, new item appends to the list as the last item,\n * but you can insert based on the index parameter.\n *\n * @param { Object[] } items - Specifies an array of JSON data or a JSON data.\n * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.\n * @returns {void}\n */\n MultiSelect.prototype.addItem = function (items, itemIndex) {\n _super.prototype.addItem.call(this, items, itemIndex);\n };\n /**\n * Hides the popup, if the popup in a open state.\n *\n * @returns {void}\n */\n MultiSelect.prototype.hidePopup = function () {\n var _this = this;\n var delay = 100;\n if (this.isPopupOpen()) {\n var animModel = {\n name: 'FadeOut',\n duration: 100,\n delay: delay ? delay : 0\n };\n var eventArgs = { popup: this.popupObj, cancel: false, animation: animModel };\n this.trigger('close', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n if (_this.fields.groupBy && _this.mode !== 'CheckBox' && _this.fixedHeaderElement) {\n remove(_this.fixedHeaderElement);\n _this.fixedHeaderElement = null;\n }\n _this.beforePopupOpen = false;\n _this.overAllWrapper.classList.remove(iconAnimation);\n _this.popupObj.hide(new Animation(eventArgs.animation));\n attributes(_this.inputElement, { 'aria-expanded': 'false' });\n if (_this.allowFiltering) {\n _this.notify('inputFocus', { module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox', value: 'clear' });\n }\n _this.popupObj.hide();\n removeClass([document.body, _this.popupObj.element], 'e-popup-full-page');\n EventHandler.remove(_this.list, 'keydown', _this.onKeyDown);\n }\n });\n }\n };\n /**\n * Shows the popup, if the popup in a closed state.\n *\n * @returns {void}\n */\n MultiSelect.prototype.showPopup = function () {\n var _this = this;\n if (!this.enabled) {\n return;\n }\n var args = { cancel: false };\n this.trigger('beforeOpen', args, function (args) {\n if (!args.cancel) {\n if (!_this.ulElement) {\n _this.beforePopupOpen = true;\n _super.prototype.render.call(_this);\n if (_this.mode === 'CheckBox' && Browser.isDevice && _this.allowFiltering) {\n _this.notify('popupFullScreen', { module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox' });\n }\n return;\n }\n if (_this.mode === 'CheckBox' && Browser.isDevice && _this.allowFiltering) {\n _this.notify('popupFullScreen', { module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox' });\n }\n var mainLiLength = _this.ulElement.querySelectorAll('li.' + 'e-list-item').length;\n var liLength = _this.ulElement.querySelectorAll('li.'\n + dropDownBaseClasses.li + '.' + HIDE_LIST).length;\n if (mainLiLength > 0 && (mainLiLength === liLength) && (liLength === _this.mainData.length)) {\n _this.beforePopupOpen = false;\n return;\n }\n _this.onPopupShown();\n }\n });\n };\n /**\n * Based on the state parameter, entire list item will be selected/deselected.\n * parameter\n * `true` - Selects entire list items.\n * `false` - Un Selects entire list items.\n *\n * @param {boolean} state - if it’s true then Selects the entire list items. If it’s false the Unselects entire list items.\n * @returns {void}\n */\n MultiSelect.prototype.selectAll = function (state) {\n this.isSelectAll = true;\n this.selectAllItems(state);\n };\n /**\n * Return the module name of this component.\n *\n * @private\n * @returns {string} Return the module name of this component.\n */\n MultiSelect.prototype.getModuleName = function () {\n return 'multiselect';\n };\n /**\n * Allows you to clear the selected values from the Multiselect component.\n *\n * @returns {void}\n */\n MultiSelect.prototype.clear = function () {\n var _this = this;\n this.selectAll(false);\n if (this.value && this.value.length) {\n setTimeout(function () {\n _this.setProperties({ value: null }, true);\n }, 0);\n }\n else {\n this.setProperties({ value: null }, true);\n }\n };\n /**\n * To Initialize the control rendering\n *\n * @private\n * @returns {void}\n */\n MultiSelect.prototype.render = function () {\n this.setDynValue = this.initStatus = false;\n this.isSelectAll = false;\n this.searchWrapper = this.createElement('span', { className: SEARCHBOX_WRAPPER + ' ' + ((this.mode === 'Box') ? BOX_ELEMENT : '') });\n this.viewWrapper = this.createElement('span', { className: DELIMITER_VIEW + ' ' + DELIMITER_WRAPPER, styles: 'display:none;' });\n this.overAllClear = this.createElement('span', {\n className: CLOSEICON_CLASS, styles: 'display:none;'\n });\n this.componentWrapper = this.createElement('div', { className: ELEMENT_WRAPPER });\n this.overAllWrapper = this.createElement('div', { className: OVER_ALL_WRAPPER });\n if (this.mode === 'CheckBox') {\n addClass([this.overAllWrapper], 'e-checkbox');\n }\n if (Browser.isDevice) {\n this.componentWrapper.classList.add(ELEMENT_MOBILE_WRAPPER);\n }\n this.setWidth(this.width);\n this.overAllWrapper.appendChild(this.componentWrapper);\n this.popupWrapper = this.createElement('div', { id: this.element.id + '_popup', className: POPUP_WRAPPER });\n if (this.mode === 'Delimiter' || this.mode === 'CheckBox') {\n this.delimiterWrapper = this.createElement('span', { className: DELIMITER_WRAPPER, styles: 'display:none' });\n this.componentWrapper.appendChild(this.delimiterWrapper);\n }\n else {\n this.chipCollectionWrapper = this.createElement('span', {\n className: CHIP_WRAPPER,\n styles: 'display:none'\n });\n if (this.mode === 'Default') {\n this.chipCollectionWrapper.setAttribute('id', getUniqueID('chip_default'));\n }\n else if (this.mode === 'Box') {\n this.chipCollectionWrapper.setAttribute('id', getUniqueID('chip_box'));\n }\n this.componentWrapper.appendChild(this.chipCollectionWrapper);\n }\n if (this.mode !== 'Box') {\n this.componentWrapper.appendChild(this.viewWrapper);\n }\n this.componentWrapper.appendChild(this.searchWrapper);\n if (this.showClearButton && !Browser.isDevice) {\n this.componentWrapper.appendChild(this.overAllClear);\n }\n else {\n this.componentWrapper.classList.add(CLOSE_ICON_HIDE);\n }\n this.dropDownIcon();\n this.inputElement = this.createElement('input', {\n className: INPUT_ELEMENT,\n attrs: {\n spellcheck: 'false',\n type: 'text',\n autocomplete: 'off',\n tabindex: '0'\n }\n });\n if (this.mode === 'Default' || this.mode === 'Box') {\n this.inputElement.setAttribute('aria-describedby', this.chipCollectionWrapper.id);\n this.inputElement.setAttribute('aria-labelledby', this.chipCollectionWrapper.id);\n }\n if (this.element.tagName !== this.getNgDirective()) {\n this.element.style.display = 'none';\n }\n if (this.element.tagName === this.getNgDirective()) {\n this.element.appendChild(this.overAllWrapper);\n this.searchWrapper.appendChild(this.inputElement);\n }\n else {\n this.element.parentElement.insertBefore(this.overAllWrapper, this.element);\n this.searchWrapper.appendChild(this.inputElement);\n this.searchWrapper.appendChild(this.element);\n this.element.removeAttribute('tabindex');\n }\n if (this.floatLabelType !== 'Never') {\n createFloatLabel(this.overAllWrapper, this.searchWrapper, this.element, this.inputElement, this.value, this.floatLabelType, this.placeholder);\n }\n else if (this.floatLabelType === 'Never') {\n this.refreshPlaceHolder();\n }\n this.addValidInputClass();\n this.element.style.opacity = '';\n var id = this.element.getAttribute('id') ? this.element.getAttribute('id') : getUniqueID('ej2_dropdownlist');\n this.element.id = id;\n this.hiddenElement = this.createElement('select', {\n attrs: { 'aria-hidden': 'true', 'class': HIDDEN_ELEMENT, 'tabindex': '-1', 'multiple': '' }\n });\n this.componentWrapper.appendChild(this.hiddenElement);\n this.validationAttribute(this.element, this.hiddenElement);\n if (this.mode !== 'CheckBox') {\n this.hideOverAllClear();\n }\n this.wireEvent();\n this.enable(this.enabled);\n this.enableRTL(this.enableRtl);\n this.checkInitialValue();\n if (this.element.hasAttribute('data-val')) {\n this.element.setAttribute('data-val', 'false');\n }\n this.renderComplete();\n };\n MultiSelect.prototype.checkInitialValue = function () {\n var _this = this;\n var isData = this.dataSource instanceof Array ? (this.dataSource.length > 0)\n : !isNullOrUndefined(this.dataSource);\n if (!(this.value && this.value.length) &&\n isNullOrUndefined(this.text) &&\n !isData &&\n this.element.tagName === 'SELECT' &&\n this.element.options.length > 0) {\n var optionsElement = this.element.options;\n var valueCol = [];\n var textCol = '';\n for (var index = 0, optionsLen = optionsElement.length; index < optionsLen; index++) {\n var opt = optionsElement[index];\n if (!isNullOrUndefined(opt.getAttribute('selected'))) {\n if (opt.getAttribute('value')) {\n valueCol.push(opt.getAttribute('value'));\n }\n else {\n textCol += (opt.text + this.delimiterChar);\n }\n }\n }\n if (valueCol.length > 0) {\n this.setProperties({ value: valueCol }, true);\n }\n else if (textCol !== '') {\n this.setProperties({ text: textCol }, true);\n }\n if (valueCol.length > 0 || textCol !== '') {\n this.refreshInputHight();\n this.refreshPlaceHolder();\n }\n }\n if ((this.value && this.value.length) || !isNullOrUndefined(this.text)) {\n if (!this.list) {\n _super.prototype.render.call(this);\n }\n }\n if (!isNullOrUndefined(this.text) && (isNullOrUndefined(this.value) || this.value.length === 0)) {\n this.initialTextUpdate();\n }\n if (this.value && this.value.length) {\n if (!(this.dataSource instanceof DataManager)) {\n this.initialValueUpdate();\n this.initialUpdate();\n }\n else {\n this.setInitialValue = function () {\n _this.initStatus = false;\n _this.initialValueUpdate();\n _this.initialUpdate();\n _this.setInitialValue = null;\n _this.initStatus = true;\n };\n }\n this.updateTempValue();\n }\n else {\n this.initialUpdate();\n }\n this.initStatus = true;\n this.checkAutoFocus();\n if (!isNullOrUndefined(this.text)) {\n this.element.setAttribute('data-initial-value', this.text);\n }\n };\n MultiSelect.prototype.checkAutoFocus = function () {\n if (this.element.hasAttribute('autofocus')) {\n this.inputElement.focus();\n }\n };\n MultiSelect.prototype.setFloatLabelType = function () {\n removeFloating(this.overAllWrapper, this.componentWrapper, this.searchWrapper, this.inputElement, this.value, this.floatLabelType, this.placeholder);\n if (this.floatLabelType !== 'Never') {\n createFloatLabel(this.overAllWrapper, this.searchWrapper, this.element, this.inputElement, this.value, this.floatLabelType, this.placeholder);\n }\n };\n MultiSelect.prototype.addValidInputClass = function () {\n if ((!isNullOrUndefined(this.value) && this.value.length) || this.floatLabelType === 'Always') {\n addClass([this.overAllWrapper], 'e-valid-input');\n }\n else {\n removeClass([this.overAllWrapper], 'e-valid-input');\n }\n };\n MultiSelect.prototype.dropDownIcon = function () {\n if (this.showDropDownIcon) {\n this.dropIcon = this.createElement('span', { className: dropdownIcon });\n this.componentWrapper.appendChild(this.dropIcon);\n addClass([this.componentWrapper], ['e-down-icon']);\n }\n else {\n if (!isNullOrUndefined(this.dropIcon)) {\n this.dropIcon.parentElement.removeChild(this.dropIcon);\n removeClass([this.componentWrapper], ['e-down-icon']);\n }\n }\n };\n MultiSelect.prototype.initialUpdate = function () {\n if (this.mode !== 'Box' && !(this.setDynValue && this.mode === 'Default' && this.inputFocus)) {\n this.updateDelimView();\n }\n this.updateCssClass();\n this.updateHTMLAttribute();\n this.updateReadonly(this.readonly);\n this.refreshInputHight();\n this.checkPlaceholderSize();\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.\n *\n * @method destroy\n * @returns {void}\n */\n MultiSelect.prototype.destroy = function () {\n // eslint-disable-next-line\n if (this.isReact) {\n this.clearTemplate();\n }\n if (this.popupObj) {\n this.popupObj.hide();\n }\n this.notify(destroy, {});\n this.unwireListEvents();\n this.unWireEvent();\n this.list = null;\n this.popupObj = null;\n this.mainList = null;\n this.mainData = null;\n this.filterParent = null;\n this.ulElement = null;\n _super.prototype.destroy.call(this);\n var temp = ['readonly', 'aria-disabled', 'aria-placeholder', 'placeholder'];\n var length = temp.length;\n while (length > 0) {\n this.inputElement.removeAttribute(temp[length - 1]);\n length--;\n }\n this.element.removeAttribute('data-initial-value');\n this.element.style.display = 'block';\n if (this.overAllWrapper.parentElement) {\n if (this.overAllWrapper.parentElement.tagName === this.getNgDirective()) {\n remove(this.overAllWrapper);\n }\n else {\n this.overAllWrapper.parentElement.insertBefore(this.element, this.overAllWrapper);\n remove(this.overAllWrapper);\n }\n }\n };\n __decorate([\n Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)\n ], MultiSelect.prototype, \"fields\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"groupTemplate\", void 0);\n __decorate([\n Property('No records found')\n ], MultiSelect.prototype, \"noRecordsTemplate\", void 0);\n __decorate([\n Property('Request failed')\n ], MultiSelect.prototype, \"actionFailureTemplate\", void 0);\n __decorate([\n Property('None')\n ], MultiSelect.prototype, \"sortOrder\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"enabled\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property([])\n ], MultiSelect.prototype, \"dataSource\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"query\", void 0);\n __decorate([\n Property('StartsWith')\n ], MultiSelect.prototype, \"filterType\", void 0);\n __decorate([\n Property(1000)\n ], MultiSelect.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"ignoreAccent\", void 0);\n __decorate([\n Property()\n ], MultiSelect.prototype, \"locale\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"enableGroupCheckBox\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"cssClass\", void 0);\n __decorate([\n Property('100%')\n ], MultiSelect.prototype, \"width\", void 0);\n __decorate([\n Property('300px')\n ], MultiSelect.prototype, \"popupHeight\", void 0);\n __decorate([\n Property('100%')\n ], MultiSelect.prototype, \"popupWidth\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"placeholder\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"filterBarPlaceholder\", void 0);\n __decorate([\n Property({})\n ], MultiSelect.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"valueTemplate\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"headerTemplate\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"footerTemplate\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"itemTemplate\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"allowFiltering\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"changeOnBlur\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"allowCustomValue\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(1000)\n ], MultiSelect.prototype, \"maximumSelectionLength\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"readonly\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"text\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"value\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"hideSelectedItem\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"closePopupOnSelect\", void 0);\n __decorate([\n Property('Default')\n ], MultiSelect.prototype, \"mode\", void 0);\n __decorate([\n Property(',')\n ], MultiSelect.prototype, \"delimiterChar\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"ignoreCase\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"showDropDownIcon\", void 0);\n __decorate([\n Property('Never')\n ], MultiSelect.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"showSelectAll\", void 0);\n __decorate([\n Property('Select All')\n ], MultiSelect.prototype, \"selectAllText\", void 0);\n __decorate([\n Property('Unselect All')\n ], MultiSelect.prototype, \"unSelectAllText\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"enableSelectionOrder\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"openOnClick\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"addTagOnBlur\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"removing\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"removed\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"beforeSelectAll\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"selectedAll\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"chipSelection\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"filtering\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"tagging\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"customValueSelection\", void 0);\n MultiSelect = __decorate([\n NotifyPropertyChanges\n ], MultiSelect);\n return MultiSelect;\n}(DropDownBase));\nexport { MultiSelect };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\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 { EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';\n\nimport Vue from 'vue';\nexport var isExecute = gh ? false : true;\nvar vueImport;\nif (!isExecute || parseInt(allVue.version) < 3) {\n vueImport = Vue;\n}\nelse {\n vueImport = Vue;\n}\nvar ViewsDirective = /** @class */ (function (_super) {\n __extends(ViewsDirective, _super);\n function ViewsDirective() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n ViewsDirective.prototype.render = function () {\n return;\n };\n ViewsDirective.prototype.getTag = function () {\n return 'e-views';\n };\n ViewsDirective = __decorate([\n EJComponentDecorator({}, isExecute)\n ], ViewsDirective);\n return ViewsDirective;\n}(vueImport));\nexport { ViewsDirective };\nexport var ViewsPlugin = {\n name: 'e-views',\n install: function (Vue) {\n Vue.component(ViewsPlugin.name, ViewsDirective);\n }\n};\n/**\n * `e-views` directive represent a view of the VueJS Schedule.\n * It must be contained in a Schedule component(`ejs-schedule`).\n * ```vue\n *
\n * \n * \n * \n * \n * \n * ```\n */\nvar ViewDirective = /** @class */ (function (_super) {\n __extends(ViewDirective, _super);\n function ViewDirective() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n ViewDirective.prototype.render = function () {\n return;\n };\n ViewDirective.prototype.getTag = function () {\n return 'e-view';\n };\n ViewDirective = __decorate([\n EJComponentDecorator({}, isExecute)\n ], ViewDirective);\n return ViewDirective;\n}(vueImport));\nexport { ViewDirective };\nexport var ViewPlugin = {\n name: 'e-view',\n install: function (Vue) {\n Vue.component(ViewPlugin.name, ViewDirective);\n }\n};\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n// eslint-disable-next-line @typescript-eslint/triple-slash-reference\n///
\nimport { EventHandler, Property, Event, compile, KeyboardEvents, append, select } from '@syncfusion/ej2-base';\nimport { attributes, isNullOrUndefined, getUniqueID, formatUnit, isUndefined, getValue } from '@syncfusion/ej2-base';\nimport { Animation, Browser, NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, closest, prepend, detach, classList } from '@syncfusion/ej2-base';\nimport { Popup, isCollide, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { incrementalSearch, resetIncrementalSearchValues } from '../common/incremental-search';\nimport { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-base';\nimport { DataManager, Query, Predicate } from '@syncfusion/ej2-data';\n// don't use space in classnames\nexport var dropDownListClasses = {\n root: 'e-dropdownlist',\n hover: dropDownBaseClasses.hover,\n selected: dropDownBaseClasses.selected,\n rtl: dropDownBaseClasses.rtl,\n li: dropDownBaseClasses.li,\n disable: dropDownBaseClasses.disabled,\n base: dropDownBaseClasses.root,\n focus: dropDownBaseClasses.focus,\n input: 'e-input-group',\n inputFocus: 'e-input-focus',\n icon: 'e-input-group-icon e-ddl-icon',\n iconAnimation: 'e-icon-anim',\n value: 'e-input-value',\n device: 'e-ddl-device',\n backIcon: 'e-input-group-icon e-back-icon e-icons',\n filterBarClearIcon: 'e-input-group-icon e-clear-icon e-icons',\n filterInput: 'e-input-filter',\n filterParent: 'e-filter-parent',\n mobileFilter: 'e-ddl-device-filter',\n footer: 'e-ddl-footer',\n header: 'e-ddl-header',\n clearIcon: 'e-clear-icon',\n clearIconHide: 'e-clear-icon-hide',\n popupFullScreen: 'e-popup-full-page',\n disableIcon: 'e-ddl-disable-icon',\n hiddenElement: 'e-ddl-hidden'\n};\nvar inputObject = {\n container: null,\n buttons: []\n};\n/**\n * The DropDownList component contains a list of predefined values from which you can\n * choose a single value.\n * ```html\n *
\n * ```\n * ```typescript\n * let dropDownListObj:DropDownList = new DropDownList();\n * dropDownListObj.appendTo(\"#list\");\n * ```\n */\nvar DropDownList = /** @class */ (function (_super) {\n __extends(DropDownList, _super);\n /**\n * * Constructor for creating the DropDownList component.\n *\n * @param {DropDownListModel} options - Specifies the DropDownList model.\n * @param {string | HTMLElement} element - Specifies the element to render as component.\n * @private\n */\n function DropDownList(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isListSearched = false;\n _this.preventChange = false;\n _this.isAngular = false;\n return _this;\n }\n /**\n * Initialize the event handler.\n *\n * @private\n * @returns {void}\n */\n DropDownList.prototype.preRender = function () {\n this.valueTempElement = null;\n this.element.style.opacity = '0';\n this.initializeData();\n _super.prototype.preRender.call(this);\n this.activeIndex = this.index;\n this.queryString = '';\n };\n DropDownList.prototype.initializeData = function () {\n this.isPopupOpen = false;\n this.isDocumentClick = false;\n this.isInteracted = false;\n this.isFilterFocus = false;\n this.beforePopupOpen = false;\n this.initial = true;\n this.initRemoteRender = false;\n this.isNotSearchList = false;\n this.isTyped = false;\n this.isSelected = false;\n this.preventFocus = false;\n this.preventAutoFill = false;\n this.isValidKey = false;\n this.typedString = '';\n this.isEscapeKey = false;\n this.isPreventBlur = false;\n this.isTabKey = false;\n this.actionCompleteData = { isUpdated: false };\n this.actionData = { isUpdated: false };\n this.prevSelectPoints = {};\n this.isSelectCustom = false;\n this.isDropDownClick = false;\n this.preventAltUp = false;\n this.isCustomFilter = false;\n this.isSecondClick = false;\n this.previousValue = null;\n this.keyConfigure = {\n tab: 'tab',\n enter: '13',\n escape: '27',\n end: '35',\n home: '36',\n down: '40',\n up: '38',\n pageUp: '33',\n pageDown: '34',\n open: 'alt+40',\n close: 'shift+tab',\n hide: 'alt+38',\n space: '32'\n };\n };\n DropDownList.prototype.setZIndex = function () {\n if (this.popupObj) {\n this.popupObj.setProperties({ 'zIndex': this.zIndex });\n }\n };\n DropDownList.prototype.renderList = function (isEmptyData) {\n _super.prototype.render.call(this, isEmptyData);\n this.unWireListEvents();\n this.wireListEvents();\n };\n DropDownList.prototype.floatLabelChange = function () {\n if (this.getModuleName() === 'dropdownlist' && this.floatLabelType === 'Auto') {\n var floatElement = this.inputWrapper.container.querySelector('.e-float-text');\n if (this.inputElement.value !== '' || this.isInteracted) {\n classList(floatElement, ['e-label-top'], ['e-label-bottom']);\n }\n else {\n classList(floatElement, ['e-label-bottom'], ['e-label-top']);\n }\n }\n };\n DropDownList.prototype.resetHandler = function (e) {\n e.preventDefault();\n this.clearAll(e);\n };\n DropDownList.prototype.resetFocusElement = function () {\n this.removeHover();\n this.removeSelection();\n this.removeFocus();\n this.list.scrollTop = 0;\n if (this.getModuleName() !== 'autocomplete' && !isNullOrUndefined(this.ulElement)) {\n var li = this.ulElement.querySelector('.' + dropDownListClasses.li);\n if (li) {\n li.classList.add(dropDownListClasses.focus);\n }\n }\n };\n DropDownList.prototype.clearAll = function (e, properties) {\n if (isNullOrUndefined(properties) || (!isNullOrUndefined(properties) &&\n (isNullOrUndefined(properties.dataSource) ||\n (!(properties.dataSource instanceof DataManager) && properties.dataSource.length === 0)))) {\n this.isActive = true;\n this.resetSelection(properties);\n }\n var dataItem = this.getItemData();\n if (this.previousValue === dataItem.value) {\n return;\n }\n this.onChangeEvent(e);\n };\n DropDownList.prototype.resetSelection = function (properties) {\n if (this.list) {\n if ((!isNullOrUndefined(properties) &&\n (isNullOrUndefined(properties.dataSource) ||\n (!(properties.dataSource instanceof DataManager) && properties.dataSource.length === 0)))) {\n this.selectedLI = null;\n this.actionCompleteData.isUpdated = false;\n this.actionCompleteData.ulElement = null;\n this.actionCompleteData.list = null;\n this.resetList(properties.dataSource);\n }\n else {\n if (this.allowFiltering && this.getModuleName() !== 'autocomplete'\n && !isNullOrUndefined(this.actionCompleteData.ulElement) && !isNullOrUndefined(this.actionCompleteData.list)) {\n this.onActionComplete(this.actionCompleteData.ulElement.cloneNode(true), this.actionCompleteData.list);\n }\n this.resetFocusElement();\n }\n }\n this.hiddenElement.innerHTML = '';\n this.inputElement.value = '';\n this.value = null;\n this.itemData = null;\n this.text = null;\n this.index = null;\n this.activeIndex = null;\n this.item = null;\n this.queryString = '';\n if (this.valueTempElement) {\n detach(this.valueTempElement);\n this.inputElement.style.display = 'block';\n this.valueTempElement = null;\n }\n this.setSelection(null, null);\n this.isSelectCustom = false;\n this.updateIconState();\n this.cloneElements();\n };\n DropDownList.prototype.setHTMLAttributes = function () {\n if (Object.keys(this.htmlAttributes).length) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var htmlAttr = _a[_i];\n if (htmlAttr === 'class') {\n var updatedClassValue = (this.htmlAttributes[htmlAttr].replace(/\\s+/g, ' ')).trim();\n if (updatedClassValue !== '') {\n addClass([this.inputWrapper.container], updatedClassValue.split(' '));\n }\n }\n else if (htmlAttr === 'disabled' && this.htmlAttributes[htmlAttr] === 'disabled') {\n this.enabled = false;\n this.setEnable();\n }\n else if (htmlAttr === 'readonly' && !isNullOrUndefined(this.htmlAttributes[htmlAttr])) {\n this.readonly = true;\n this.dataBind();\n }\n else if (htmlAttr === 'style') {\n this.inputWrapper.container.setAttribute('style', this.htmlAttributes[htmlAttr]);\n }\n else {\n var defaultAttr = ['title', 'id', 'placeholder', 'aria-placeholder',\n 'role', 'autocorrect', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];\n var validateAttr = ['name', 'required'];\n if (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') {\n defaultAttr.push('tabindex');\n }\n if (validateAttr.indexOf(htmlAttr) > -1 || htmlAttr.indexOf('data') === 0) {\n this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n else if (defaultAttr.indexOf(htmlAttr) > -1) {\n if (htmlAttr === 'placeholder') {\n Input.setPlaceholder(this.htmlAttributes[htmlAttr], this.inputElement);\n }\n else {\n this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n }\n else {\n this.inputWrapper.container.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n }\n }\n }\n if (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') {\n this.inputWrapper.container.removeAttribute('tabindex');\n }\n };\n DropDownList.prototype.getAriaAttributes = function () {\n return {\n 'aria-disabled': 'false',\n 'aria-owns': this.element.id + '_options',\n 'role': 'listbox',\n 'aria-haspopup': 'true',\n 'aria-expanded': 'false',\n 'aria-activedescendant': 'null',\n 'aria-live': 'polite',\n 'aria-labelledby': this.hiddenElement.id\n };\n };\n DropDownList.prototype.setEnableRtl = function () {\n Input.setEnableRtl(this.enableRtl, [this.inputElement.parentElement]);\n if (this.popupObj) {\n this.popupObj.enableRtl = this.enableRtl;\n this.popupObj.dataBind();\n }\n };\n DropDownList.prototype.setEnable = function () {\n Input.setEnabled(this.enabled, this.inputElement);\n if (this.enabled) {\n removeClass([this.inputWrapper.container], dropDownListClasses.disable);\n this.inputElement.setAttribute('aria-disabled', 'false');\n this.targetElement().setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.hidePopup();\n addClass([this.inputWrapper.container], dropDownListClasses.disable);\n this.inputElement.setAttribute('aria-disabled', 'true');\n this.targetElement().tabIndex = -1;\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} Returns the persisted data of the component.\n */\n DropDownList.prototype.getPersistData = function () {\n return this.addOnPersist(['value']);\n };\n DropDownList.prototype.getLocaleName = function () {\n return 'drop-down-list';\n };\n DropDownList.prototype.preventTabIndex = function (element) {\n if (this.getModuleName() === 'dropdownlist') {\n element.tabIndex = -1;\n }\n };\n DropDownList.prototype.targetElement = function () {\n return this.inputWrapper.container;\n };\n DropDownList.prototype.getNgDirective = function () {\n return 'EJS-DROPDOWNLIST';\n };\n DropDownList.prototype.getElementByText = function (text) {\n return this.getElementByValue(this.getValueByText(text));\n };\n DropDownList.prototype.getElementByValue = function (value) {\n var item;\n var listItems = this.getItems();\n for (var _i = 0, listItems_1 = listItems; _i < listItems_1.length; _i++) {\n var liItem = listItems_1[_i];\n if (this.getFormattedValue(liItem.getAttribute('data-value')) === value) {\n item = liItem;\n break;\n }\n }\n return item;\n };\n DropDownList.prototype.initValue = function () {\n this.renderList();\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n else {\n this.updateValues();\n }\n };\n DropDownList.prototype.updateValues = function () {\n if (!isNullOrUndefined(this.value)) {\n this.setSelection(this.getElementByValue(this.value), null);\n }\n else if (this.text && isNullOrUndefined(this.value)) {\n var element = this.getElementByText(this.text);\n if (isNullOrUndefined(element)) {\n this.setProperties({ text: null });\n return;\n }\n else {\n this.setSelection(element, null);\n }\n }\n else {\n this.setSelection(this.liCollections[this.activeIndex], null);\n }\n this.setHiddenValue();\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n };\n DropDownList.prototype.onBlurHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n var target = e.relatedTarget;\n var currentTarget = e.target;\n var isPreventBlur = this.isPreventBlur;\n this.isPreventBlur = false;\n //IE 11 - issue\n if (isPreventBlur && !this.isDocumentClick && this.isPopupOpen && (!isNullOrUndefined(currentTarget) ||\n !this.isFilterLayout() && isNullOrUndefined(target))) {\n if (this.getModuleName() === 'dropdownlist' && this.allowFiltering && this.isPopupOpen) {\n this.filterInput.focus();\n }\n else {\n this.targetElement().focus();\n }\n return;\n }\n if (this.isDocumentClick || (!isNullOrUndefined(this.popupObj)\n && document.body.contains(this.popupObj.element) &&\n this.popupObj.element.classList.contains(dropDownListClasses.mobileFilter))) {\n if (!this.beforePopupOpen) {\n this.isDocumentClick = false;\n }\n return;\n }\n if (((this.getModuleName() === 'dropdownlist' && !this.isFilterFocus && target !== this.inputElement)\n && (document.activeElement !== target || (document.activeElement === target &&\n currentTarget.classList.contains(dropDownListClasses.inputFocus)))) ||\n (isNullOrUndefined(target) && this.getModuleName() === 'dropdownlist' && this.allowFiltering &&\n currentTarget !== this.inputWrapper.container) || this.getModuleName() !== 'dropdownlist' &&\n !this.inputWrapper.container.contains(target) || this.isTabKey) {\n this.isDocumentClick = this.isPopupOpen ? true : false;\n this.focusOutAction(e);\n this.isTabKey = false;\n }\n if (this.isRequested && !this.isPopupOpen && !this.isPreventBlur) {\n this.isActive = false;\n this.beforePopupOpen = false;\n }\n };\n DropDownList.prototype.focusOutAction = function (e) {\n this.isInteracted = false;\n this.focusOut(e);\n this.onFocusOut();\n };\n DropDownList.prototype.onFocusOut = function () {\n if (!this.enabled) {\n return;\n }\n if (this.isSelected) {\n this.isSelectCustom = false;\n this.onChangeEvent(null);\n }\n this.floatLabelChange();\n this.dispatchEvent(this.hiddenElement, 'change');\n if (this.getModuleName() === 'dropdownlist' && this.element.tagName !== 'INPUT') {\n this.dispatchEvent(this.inputElement, 'blur');\n }\n if (this.inputWrapper.clearButton) {\n addClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n this.trigger('blur');\n };\n DropDownList.prototype.onFocus = function (e) {\n if (!this.isInteracted) {\n this.isInteracted = true;\n var args = { isInteracted: e ? true : false, event: e };\n this.trigger('focus', args);\n }\n this.updateIconState();\n };\n DropDownList.prototype.resetValueHandler = function (e) {\n var formElement = closest(this.inputElement, 'form');\n if (formElement && e.target === formElement) {\n var val = (this.element.tagName === this.getNgDirective()) ? null : this.inputElement.getAttribute('value');\n this.text = val;\n }\n };\n DropDownList.prototype.wireEvent = function () {\n EventHandler.add(this.inputWrapper.container, 'mousedown', this.dropDownClick, this);\n EventHandler.add(this.inputWrapper.container, 'focus', this.focusIn, this);\n EventHandler.add(this.inputWrapper.container, 'keypress', this.onSearch, this);\n this.bindCommonEvent();\n };\n DropDownList.prototype.bindCommonEvent = function () {\n EventHandler.add(this.targetElement(), 'blur', this.onBlurHandler, this);\n var formElement = closest(this.inputElement, 'form');\n if (formElement) {\n EventHandler.add(formElement, 'reset', this.resetValueHandler, this);\n }\n if (!Browser.isDevice) {\n this.keyboardModule = new KeyboardEvents(this.targetElement(), {\n keyAction: this.keyActionHandler.bind(this), keyConfigs: this.keyConfigure, eventName: 'keydown'\n });\n }\n else {\n this.keyboardModule = new KeyboardEvents(this.targetElement(), {\n keyAction: this.mobileKeyActionHandler.bind(this), keyConfigs: this.keyConfigure, eventName: 'keydown'\n });\n }\n this.bindClearEvent();\n };\n DropDownList.prototype.bindClearEvent = function () {\n if (this.showClearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.resetHandler, this);\n }\n };\n DropDownList.prototype.unBindCommonEvent = function () {\n if (this.targetElement()) {\n EventHandler.remove(this.targetElement(), 'blur', this.onBlurHandler);\n }\n var formElement = this.inputElement && closest(this.inputElement, 'form');\n if (formElement) {\n EventHandler.remove(formElement, 'reset', this.resetValueHandler);\n }\n if (!Browser.isDevice) {\n this.keyboardModule.destroy();\n }\n if (this.showClearButton) {\n EventHandler.remove(this.inputWrapper.clearButton, 'mousedown', this.resetHandler);\n }\n };\n DropDownList.prototype.updateIconState = function () {\n if (this.showClearButton) {\n if (this.inputElement.value !== '' && !this.readonly) {\n removeClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n else {\n addClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n }\n };\n /**\n * Event binding for list\n *\n * @returns {void}\n */\n DropDownList.prototype.wireListEvents = function () {\n EventHandler.add(this.list, 'click', this.onMouseClick, this);\n EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);\n };\n DropDownList.prototype.onSearch = function (e) {\n if (e.charCode !== 32 && e.charCode !== 13) {\n if (this.list === undefined) {\n this.renderList();\n }\n this.searchKeyEvent = e;\n this.onServerIncrementalSearch(e);\n }\n };\n DropDownList.prototype.onServerIncrementalSearch = function (e) {\n if (!this.isRequested && !isNullOrUndefined(this.list) &&\n !isNullOrUndefined(this.list.querySelector('li')) && this.enabled && !this.readonly) {\n this.incrementalSearch(e);\n }\n };\n DropDownList.prototype.onMouseClick = function (e) {\n var target = e.target;\n var li = closest(target, '.' + dropDownBaseClasses.li);\n if (!this.isValidLI(li)) {\n return;\n }\n this.setSelection(li, e);\n if (Browser.isDevice && this.isFilterLayout()) {\n history.back();\n }\n else {\n var delay = 100;\n this.closePopup(delay);\n }\n };\n DropDownList.prototype.onMouseOver = function (e) {\n var currentLi = closest(e.target, '.' + dropDownBaseClasses.li);\n this.setHover(currentLi);\n };\n DropDownList.prototype.setHover = function (li) {\n if (this.enabled && this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.hover)) {\n this.removeHover();\n addClass([li], dropDownBaseClasses.hover);\n }\n };\n DropDownList.prototype.onMouseLeave = function () {\n this.removeHover();\n };\n DropDownList.prototype.removeHover = function () {\n if (this.list) {\n var hoveredItem = this.list.querySelectorAll('.' + dropDownBaseClasses.hover);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, dropDownBaseClasses.hover);\n }\n }\n };\n DropDownList.prototype.isValidLI = function (li) {\n return (li && li.hasAttribute('role') && li.getAttribute('role') === 'option');\n };\n DropDownList.prototype.incrementalSearch = function (e) {\n if (this.liCollections.length > 0) {\n var li = incrementalSearch(e.charCode, this.liCollections, this.activeIndex, true, this.element.id);\n if (!isNullOrUndefined(li)) {\n this.setSelection(li, e);\n this.setScrollPosition();\n }\n }\n };\n /**\n * Hides the spinner loader.\n *\n * @returns {void}\n */\n DropDownList.prototype.hideSpinner = function () {\n if (!isNullOrUndefined(this.spinnerElement)) {\n hideSpinner(this.spinnerElement);\n removeClass([this.spinnerElement], dropDownListClasses.disableIcon);\n this.spinnerElement.innerHTML = '';\n this.spinnerElement = null;\n }\n };\n /**\n * Shows the spinner loader.\n *\n * @returns {void}\n */\n DropDownList.prototype.showSpinner = function () {\n if (isNullOrUndefined(this.spinnerElement)) {\n this.spinnerElement = Browser.isDevice && !isNullOrUndefined(this.filterInputObj) && this.filterInputObj.buttons[1] ||\n !isNullOrUndefined(this.filterInputObj) && this.filterInputObj.buttons[0] || this.inputWrapper.buttons[0];\n addClass([this.spinnerElement], dropDownListClasses.disableIcon);\n createSpinner({\n target: this.spinnerElement,\n width: Browser.isDevice ? '16px' : '14px'\n }, this.createElement);\n showSpinner(this.spinnerElement);\n }\n };\n DropDownList.prototype.keyActionHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n var preventAction = e.action === 'pageUp' || e.action === 'pageDown';\n var preventHomeEnd = this.getModuleName() !== 'dropdownlist' && (e.action === 'home' || e.action === 'end');\n this.isEscapeKey = e.action === 'escape';\n this.isTabKey = !this.isPopupOpen && e.action === 'tab';\n var isNavAction = e.action === 'down' || e.action === 'up' || e.action === 'home' || e.action === 'end';\n var isNavigation = (e.action === 'down' || e.action === 'up' || e.action === 'pageUp' || e.action === 'pageDown'\n || e.action === 'home' || e.action === 'end');\n if ((this.isEditTextBox() || preventAction || preventHomeEnd) && !this.isPopupOpen) {\n return;\n }\n if (!this.readonly) {\n var isTabAction = e.action === 'tab' || e.action === 'close';\n if (this.list === undefined && !this.isRequested && !isTabAction && e.action !== 'escape') {\n this.searchKeyEvent = e;\n this.renderList();\n }\n if (isNullOrUndefined(this.list) || (!isNullOrUndefined(this.liCollections) &&\n isNavigation && this.liCollections.length === 0) || this.isRequested) {\n return;\n }\n if ((isTabAction && this.getModuleName() !== 'autocomplete') && this.isPopupOpen\n || e.action === 'escape') {\n e.preventDefault();\n }\n this.isSelected = e.action === 'escape' ? false : this.isSelected;\n this.isTyped = (isNavigation || e.action === 'escape') ? false : this.isTyped;\n switch (e.action) {\n case 'down':\n case 'up':\n this.updateUpDownAction(e);\n break;\n case 'pageUp':\n this.pageUpSelection(this.activeIndex - this.getPageCount(), e);\n e.preventDefault();\n break;\n case 'pageDown':\n this.pageDownSelection(this.activeIndex + this.getPageCount(), e);\n e.preventDefault();\n break;\n case 'home':\n this.updateHomeEndAction(e);\n break;\n case 'end':\n this.updateHomeEndAction(e);\n break;\n case 'space':\n if (this.getModuleName() === 'dropdownlist') {\n if (!this.beforePopupOpen) {\n this.showPopup();\n }\n }\n break;\n case 'open':\n this.showPopup();\n break;\n case 'hide':\n this.preventAltUp = this.isPopupOpen;\n this.hidePopup(e);\n this.focusDropDown(e);\n break;\n case 'enter':\n this.selectCurrentItem(e);\n break;\n case 'tab':\n this.selectCurrentValueOnTab(e);\n break;\n case 'escape':\n case 'close':\n if (this.isPopupOpen) {\n this.hidePopup(e);\n this.focusDropDown(e);\n }\n break;\n }\n }\n };\n DropDownList.prototype.updateUpDownAction = function (e) {\n var focusEle = this.list.querySelector('.' + dropDownListClasses.focus);\n if (this.isSelectFocusItem(focusEle)) {\n this.setSelection(focusEle, e);\n }\n else if (!isNullOrUndefined(this.liCollections)) {\n var index = e.action === 'down' ? this.activeIndex + 1 : this.activeIndex - 1;\n var startIndex = 0;\n if (this.getModuleName() === 'autocomplete') {\n startIndex = e.action === 'down' && isNullOrUndefined(this.activeIndex) ? 0 : this.liCollections.length - 1;\n index = index < 0 ? this.liCollections.length - 1 : index === this.liCollections.length ? 0 : index;\n }\n var nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[startIndex] : this.liCollections[index];\n if (!isNullOrUndefined(nextItem)) {\n this.setSelection(nextItem, e);\n }\n }\n e.preventDefault();\n };\n DropDownList.prototype.updateHomeEndAction = function (e) {\n if (this.getModuleName() === 'dropdownlist') {\n var findLi = 0;\n if (e.action === 'home') {\n findLi = 0;\n }\n else {\n findLi = this.getItems().length - 1;\n }\n e.preventDefault();\n if (this.activeIndex === findLi) {\n return;\n }\n this.setSelection(this.liCollections[findLi], e);\n }\n };\n DropDownList.prototype.selectCurrentValueOnTab = function (e) {\n if (this.getModuleName() === 'autocomplete') {\n this.selectCurrentItem(e);\n }\n else {\n if (this.isPopupOpen) {\n this.hidePopup(e);\n this.focusDropDown(e);\n }\n }\n };\n DropDownList.prototype.mobileKeyActionHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n if ((this.isEditTextBox()) && !this.isPopupOpen) {\n return;\n }\n if (!this.readonly) {\n if (this.list === undefined && !this.isRequested) {\n this.searchKeyEvent = e;\n this.renderList();\n }\n if (isNullOrUndefined(this.list) || (!isNullOrUndefined(this.liCollections) &&\n this.liCollections.length === 0) || this.isRequested) {\n return;\n }\n if (e.action === 'enter') {\n this.selectCurrentItem(e);\n }\n }\n };\n DropDownList.prototype.selectCurrentItem = function (e) {\n if (this.isPopupOpen) {\n var li = this.list.querySelector('.' + dropDownListClasses.focus);\n if (li) {\n this.setSelection(li, e);\n this.isTyped = false;\n }\n if (this.isSelected) {\n this.isSelectCustom = false;\n this.onChangeEvent(e);\n }\n this.hidePopup();\n this.focusDropDown(e);\n }\n else {\n this.showPopup();\n }\n };\n DropDownList.prototype.isSelectFocusItem = function (element) {\n return !isNullOrUndefined(element);\n };\n DropDownList.prototype.getPageCount = function () {\n var liHeight = this.list.classList.contains(dropDownBaseClasses.noData) ? null :\n getComputedStyle(this.getItems()[0], null).getPropertyValue('height');\n return Math.round(this.list.getBoundingClientRect().height / parseInt(liHeight, 10));\n };\n DropDownList.prototype.pageUpSelection = function (steps, event) {\n var previousItem = steps >= 0 ? this.liCollections[steps + 1] : this.liCollections[0];\n this.setSelection(previousItem, event);\n };\n DropDownList.prototype.pageDownSelection = function (steps, event) {\n var list = this.getItems();\n var previousItem = steps <= list.length ? this.liCollections[steps - 1] : this.liCollections[list.length - 1];\n this.setSelection(previousItem, event);\n };\n DropDownList.prototype.unWireEvent = function () {\n EventHandler.remove(this.inputWrapper.container, 'mousedown', this.dropDownClick);\n EventHandler.remove(this.inputWrapper.container, 'keypress', this.onSearch);\n EventHandler.remove(this.inputWrapper.container, 'focus', this.focusIn);\n this.unBindCommonEvent();\n };\n /**\n * Event un binding for list items.\n *\n * @returns {void}\n */\n DropDownList.prototype.unWireListEvents = function () {\n EventHandler.remove(this.list, 'click', this.onMouseClick);\n EventHandler.remove(this.list, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);\n };\n DropDownList.prototype.checkSelector = function (id) {\n return '[id=\"' + id.replace(/(:|\\.|\\[|\\]|,|=|@|\\\\|\\/|#)/g, '\\\\$1') + '\"]';\n };\n DropDownList.prototype.onDocumentClick = function (e) {\n var target = e.target;\n if (!(!isNullOrUndefined(this.popupObj) && closest(target, this.checkSelector(this.popupObj.element.id))) &&\n !this.inputWrapper.container.contains(e.target)) {\n if (this.inputWrapper.container.classList.contains(dropDownListClasses.inputFocus) || this.isPopupOpen) {\n this.isDocumentClick = true;\n var isActive = this.isRequested;\n this.isInteracted = false;\n this.hidePopup(e);\n if (!isActive) {\n this.onFocusOut();\n this.inputWrapper.container.classList.remove(dropDownListClasses.inputFocus);\n }\n }\n }\n else if (target !== this.inputElement && !(this.allowFiltering && target === this.filterInput)\n && !(this.getModuleName() === 'combobox' &&\n !this.allowFiltering && Browser.isDevice && target === this.inputWrapper.buttons[0])) {\n this.isPreventBlur = (Browser.isIE || Browser.info.name === 'edge') && (document.activeElement === this.targetElement() ||\n document.activeElement === this.filterInput);\n e.preventDefault();\n }\n };\n DropDownList.prototype.activeStateChange = function () {\n if (this.isDocumentClick) {\n this.hidePopup();\n this.onFocusOut();\n this.inputWrapper.container.classList.remove(dropDownListClasses.inputFocus);\n }\n };\n DropDownList.prototype.focusDropDown = function (e) {\n if (!this.initial && this.isFilterLayout()) {\n this.focusIn(e);\n }\n };\n DropDownList.prototype.dropDownClick = function (e) {\n if (e.which === 3 || e.button === 2) {\n return;\n }\n if (this.targetElement().classList.contains(dropDownListClasses.disable) || this.inputWrapper.clearButton === e.target) {\n return;\n }\n var target = e.target;\n if (target !== this.inputElement && !(this.allowFiltering && target === this.filterInput) && this.getModuleName() !== 'combobox') {\n e.preventDefault();\n }\n if (!this.readonly) {\n if (this.isPopupOpen) {\n this.hidePopup();\n if (this.isFilterLayout()) {\n this.focusDropDown(e);\n }\n }\n else {\n this.focusIn(e);\n this.floatLabelChange();\n this.queryString = this.inputElement.value.trim() === '' ? null : this.inputElement.value;\n this.isDropDownClick = true;\n this.showPopup();\n }\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy_1 = this;\n // eslint-disable-next-line max-len\n var duration = (this.element.tagName === this.getNgDirective() && this.itemTemplate) ? 500 : 100;\n if (!this.isSecondClick) {\n setTimeout(function () {\n proxy_1.cloneElements();\n proxy_1.isSecondClick = true;\n }, duration);\n }\n }\n else {\n this.focusIn(e);\n }\n };\n DropDownList.prototype.cloneElements = function () {\n if (this.list) {\n var ulElement = this.list.querySelector('ul');\n if (ulElement) {\n ulElement = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;\n this.actionCompleteData.ulElement = ulElement;\n }\n }\n };\n DropDownList.prototype.updateSelectedItem = function (li, e, preventSelect, isSelection) {\n var _this = this;\n this.removeSelection();\n li.classList.add(dropDownBaseClasses.selected);\n this.removeHover();\n var value = this.getFormattedValue(li.getAttribute('data-value'));\n var selectedData = this.getDataByValue(value);\n if (!this.initial && !preventSelect && !isNullOrUndefined(e)) {\n var items = this.detachChanges(selectedData);\n this.isSelected = true;\n var eventArgs = {\n e: e,\n item: li,\n itemData: items,\n isInteracted: e ? true : false,\n cancel: false\n };\n this.trigger('select', eventArgs, function (eventArgs) {\n if (eventArgs.cancel) {\n li.classList.remove(dropDownBaseClasses.selected);\n }\n else {\n _this.selectEventCallback(li, e, preventSelect, selectedData, value);\n if (isSelection) {\n _this.setSelectOptions(li, e);\n }\n }\n });\n }\n else {\n this.selectEventCallback(li, e, preventSelect, selectedData, value);\n if (isSelection) {\n this.setSelectOptions(li, e);\n }\n }\n };\n DropDownList.prototype.selectEventCallback = function (li, e, preventSelect, selectedData, value) {\n this.previousItemData = (!isNullOrUndefined(this.itemData)) ? this.itemData : null;\n this.item = li;\n this.itemData = selectedData;\n var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);\n if (focusedItem) {\n removeClass([focusedItem], dropDownBaseClasses.focus);\n }\n li.setAttribute('aria-selected', 'true');\n this.activeIndex = this.getIndexByValue(value);\n };\n DropDownList.prototype.activeItem = function (li) {\n if (this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.selected)) {\n this.removeSelection();\n li.classList.add(dropDownBaseClasses.selected);\n this.removeHover();\n li.setAttribute('aria-selected', 'true');\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DropDownList.prototype.setValue = function (e) {\n var dataItem = this.getItemData();\n if (dataItem.value === null) {\n Input.setValue(null, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n else {\n Input.setValue(dataItem.text, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n if (this.valueTemplate && this.itemData !== null) {\n this.setValueTemplate();\n }\n else if (!isNullOrUndefined(this.valueTempElement) && this.inputElement.previousSibling === this.valueTempElement) {\n detach(this.valueTempElement);\n this.inputElement.style.display = 'block';\n }\n var clearIcon = dropDownListClasses.clearIcon;\n var isFilterElement = this.isFiltering() && this.filterInput && (this.getModuleName() === 'combobox');\n var clearElement = isFilterElement && this.filterInput.parentElement.querySelector('.' + clearIcon);\n if (this.isFiltering() && clearElement) {\n clearElement.style.removeProperty('visibility');\n }\n if (this.previousValue === dataItem.value) {\n this.isSelected = false;\n return true;\n }\n else {\n this.isSelected = !this.initial ? true : false;\n this.isSelectCustom = false;\n if (this.getModuleName() === 'dropdownlist') {\n this.updateIconState();\n }\n return false;\n }\n };\n DropDownList.prototype.setSelection = function (li, e) {\n if (this.isValidLI(li) && (!li.classList.contains(dropDownBaseClasses.selected) || (this.isPopupOpen && this.isSelected\n && li.classList.contains(dropDownBaseClasses.selected)))) {\n this.updateSelectedItem(li, e, false, true);\n }\n else {\n this.setSelectOptions(li, e);\n }\n };\n DropDownList.prototype.setSelectOptions = function (li, e) {\n if (this.list) {\n this.removeHover();\n }\n this.previousSelectedLI = (!isNullOrUndefined(this.selectedLI)) ? this.selectedLI : null;\n this.selectedLI = li;\n if (this.setValue(e)) {\n return;\n }\n if (this.isPopupOpen) {\n attributes(this.targetElement(), { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });\n if (this.isFilterLayout() && this.filterInput) {\n attributes(this.filterInput, { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });\n }\n }\n if ((!this.isPopupOpen && !isNullOrUndefined(li)) || (this.isPopupOpen && !isNullOrUndefined(e) &&\n (e.type !== 'keydown' || e.type === 'keydown' && e.action === 'enter'))) {\n this.isSelectCustom = false;\n this.onChangeEvent(e);\n }\n if (this.isPopupOpen && !isNullOrUndefined(this.selectedLI) && this.itemData !== null && (!e || e.type !== 'click')) {\n this.setScrollPosition(e);\n }\n if (Browser.info.name !== 'mozilla') {\n attributes(this.inputElement, { 'aria-label': this.inputElement.value });\n attributes(this.targetElement(), { 'aria-describedby': this.inputElement.id });\n this.targetElement().removeAttribute('aria-live');\n }\n };\n DropDownList.prototype.dropdownCompiler = function (dropdownTemplate) {\n var checkTemplate = false;\n if (dropdownTemplate) {\n try {\n checkTemplate = (document.querySelectorAll(dropdownTemplate).length) ? true : false;\n }\n catch (exception) {\n checkTemplate = false;\n }\n }\n return checkTemplate;\n };\n DropDownList.prototype.setValueTemplate = function () {\n var compiledString;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact) {\n this.clearTemplate(['valueTemplate']);\n }\n if (!this.valueTempElement) {\n this.valueTempElement = this.createElement('span', { className: dropDownListClasses.value });\n this.inputElement.parentElement.insertBefore(this.valueTempElement, this.inputElement);\n this.inputElement.style.display = 'none';\n }\n this.valueTempElement.innerHTML = '';\n var valuecheck = this.dropdownCompiler(this.valueTemplate);\n if (valuecheck) {\n compiledString = compile(document.querySelector(this.valueTemplate).innerHTML.trim());\n }\n else {\n compiledString = compile(this.valueTemplate);\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var valueCompTemp = compiledString(this.itemData, this, 'valueTemplate', this.valueTemplateId, this.isStringTemplate, null, this.valueTempElement);\n if (valueCompTemp && valueCompTemp.length > 0) {\n for (var i = 0; i < valueCompTemp.length; i++) {\n this.valueTempElement.appendChild(valueCompTemp[i]);\n }\n }\n this.renderReactTemplates();\n };\n DropDownList.prototype.removeSelection = function () {\n if (this.list) {\n var selectedItems = this.list.querySelectorAll('.' + dropDownBaseClasses.selected);\n if (selectedItems.length) {\n removeClass(selectedItems, dropDownBaseClasses.selected);\n selectedItems[0].removeAttribute('aria-selected');\n }\n }\n };\n DropDownList.prototype.getItemData = function () {\n var fields = this.fields;\n var dataItem = null;\n dataItem = this.itemData;\n var dataValue;\n var dataText;\n if (!isNullOrUndefined(dataItem)) {\n dataValue = getValue(fields.value, dataItem);\n dataText = getValue(fields.text, dataItem);\n }\n var value = (!isNullOrUndefined(dataItem) &&\n !isUndefined(dataValue) ? dataValue : dataItem);\n var text = (!isNullOrUndefined(dataItem) &&\n !isUndefined(dataValue) ? dataText : dataItem);\n return { value: value, text: text };\n };\n /**\n * To trigger the change event for list.\n *\n * @param {MouseEvent | KeyboardEvent | TouchEvent} eve - Specifies the event arguments.\n * @returns {void}\n */\n DropDownList.prototype.onChangeEvent = function (eve) {\n var dataItem = this.getItemData();\n var index = this.isSelectCustom ? null : this.activeIndex;\n this.setProperties({ 'index': index, 'text': dataItem.text, 'value': dataItem.value }, true);\n this.detachChangeEvent(eve);\n };\n DropDownList.prototype.detachChanges = function (value) {\n var items;\n if (typeof value === 'string' ||\n typeof value === 'boolean' ||\n typeof value === 'number') {\n items = Object.defineProperties({}, {\n value: {\n value: value,\n enumerable: true\n },\n text: {\n value: value,\n enumerable: true\n }\n });\n }\n else {\n items = value;\n }\n return items;\n };\n DropDownList.prototype.detachChangeEvent = function (eve) {\n this.isSelected = false;\n this.previousValue = this.value;\n this.activeIndex = this.index;\n this.typedString = !isNullOrUndefined(this.text) ? this.text : '';\n if (!this.initial) {\n var items = this.detachChanges(this.itemData);\n var preItems = void 0;\n if (typeof this.previousItemData === 'string' ||\n typeof this.previousItemData === 'boolean' ||\n typeof this.previousItemData === 'number') {\n preItems = Object.defineProperties({}, {\n value: {\n value: this.previousItemData,\n enumerable: true\n },\n text: {\n value: this.previousItemData,\n enumerable: true\n }\n });\n }\n else {\n preItems = this.previousItemData;\n }\n this.setHiddenValue();\n var eventArgs = {\n e: eve,\n item: this.item,\n itemData: items,\n previousItem: this.previousSelectedLI,\n previousItemData: preItems,\n isInteracted: eve ? true : false,\n value: this.value,\n element: this.element,\n event: eve\n };\n if (this.isAngular && this.preventChange) {\n this.preventChange = false;\n }\n else {\n this.trigger('change', eventArgs);\n }\n }\n if ((isNullOrUndefined(this.value) || this.value === '') && this.floatLabelType !== 'Always') {\n removeClass([this.inputWrapper.container], 'e-valid-input');\n }\n };\n DropDownList.prototype.setHiddenValue = function () {\n if (!isNullOrUndefined(this.value)) {\n if (this.hiddenElement.querySelector('option')) {\n var selectedElement = this.hiddenElement.querySelector('option');\n selectedElement.textContent = this.text;\n selectedElement.setAttribute('value', this.value.toString());\n }\n else {\n this.hiddenElement.innerHTML = '
';\n var selectedElement = this.hiddenElement.querySelector('option');\n selectedElement.setAttribute('value', this.value.toString());\n }\n }\n else {\n this.hiddenElement.innerHTML = '';\n }\n };\n /**\n * Filter bar implementation\n *\n * @param {KeyboardEventArgs} e - Specifies the event arguments.\n * @returns {void}\n */\n DropDownList.prototype.onFilterUp = function (e) {\n if (!(e.ctrlKey && e.keyCode === 86) && (this.isValidKey || e.keyCode === 40 || e.keyCode === 38)) {\n this.isValidKey = false;\n switch (e.keyCode) {\n case 38: //up arrow\n case 40: //down arrow\n if (this.getModuleName() === 'autocomplete' && !this.isPopupOpen && !this.preventAltUp && !this.isRequested) {\n this.preventAutoFill = true;\n this.searchLists(e);\n }\n else {\n this.preventAutoFill = false;\n }\n this.preventAltUp = false;\n e.preventDefault();\n break;\n case 46: //delete\n case 8: //backspace\n this.typedString = this.filterInput.value;\n if (!this.isPopupOpen && this.typedString !== '' || this.isPopupOpen && this.queryString.length > 0) {\n this.preventAutoFill = true;\n this.searchLists(e);\n }\n else if (this.typedString === '' && this.queryString === '' && this.getModuleName() !== 'autocomplete') {\n this.preventAutoFill = true;\n this.searchLists(e);\n }\n else if (this.typedString === '') {\n if (this.list) {\n this.resetFocusElement();\n }\n this.activeIndex = null;\n if (this.getModuleName() !== 'dropdownlist') {\n this.preventAutoFill = true;\n this.searchLists(e);\n if (this.getModuleName() === 'autocomplete') {\n this.hidePopup();\n }\n }\n }\n e.preventDefault();\n break;\n default:\n this.typedString = this.filterInput.value;\n this.preventAutoFill = false;\n this.searchLists(e);\n break;\n }\n }\n else {\n this.isValidKey = false;\n }\n };\n DropDownList.prototype.onFilterDown = function (e) {\n switch (e.keyCode) {\n case 13: //enter\n break;\n case 40: //down arrow\n case 38: //up arrow\n this.queryString = this.filterInput.value;\n e.preventDefault();\n break;\n case 9: //tab\n if (this.isPopupOpen && this.getModuleName() !== 'autocomplete') {\n e.preventDefault();\n }\n break;\n default:\n this.prevSelectPoints = this.getSelectionPoints();\n this.queryString = this.filterInput.value;\n break;\n }\n };\n DropDownList.prototype.removeFillSelection = function () {\n if (this.isInteracted) {\n var selection = this.getSelectionPoints();\n this.inputElement.setSelectionRange(selection.end, selection.end);\n }\n };\n DropDownList.prototype.getQuery = function (query) {\n var filterQuery;\n if (!this.isCustomFilter && this.allowFiltering && this.filterInput) {\n filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();\n var filterType = this.typedString === '' ? 'contains' : this.filterType;\n var dataType = this.typeOfData(this.dataSource).typeof;\n if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {\n filterQuery.where('', filterType, this.typedString, this.ignoreCase, this.ignoreAccent);\n }\n else {\n var fields = (this.fields.text) ? this.fields.text : '';\n filterQuery.where(fields, filterType, this.typedString, this.ignoreCase, this.ignoreAccent);\n }\n }\n else {\n filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();\n }\n return filterQuery;\n };\n DropDownList.prototype.getSelectionPoints = function () {\n var input = this.inputElement;\n return { start: Math.abs(input.selectionStart), end: Math.abs(input.selectionEnd) };\n };\n DropDownList.prototype.searchLists = function (e) {\n var _this = this;\n this.isTyped = true;\n this.activeIndex = null;\n this.isListSearched = true;\n if (this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon)) {\n var clearElement = this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon);\n clearElement.style.visibility = this.filterInput.value === '' ? 'hidden' : 'visible';\n }\n this.isDataFetched = false;\n if (this.isFiltering()) {\n var eventArgs_1 = {\n preventDefaultAction: false,\n text: this.filterInput.value,\n updateData: function (dataSource, query, fields) {\n if (eventArgs_1.cancel) {\n return;\n }\n _this.isCustomFilter = true;\n _this.filteringAction(dataSource, query, fields);\n },\n baseEventArgs: e,\n cancel: false\n };\n this.trigger('filtering', eventArgs_1, function (eventArgs) {\n if (!eventArgs.cancel && !_this.isCustomFilter && !eventArgs.preventDefaultAction) {\n _this.filteringAction(_this.dataSource, null, _this.fields);\n }\n });\n }\n };\n /**\n * To filter the data from given data source by using query\n *\n * @param {Object[] | DataManager } dataSource - Set the data source to filter.\n * @param {Query} query - Specify the query to filter the data.\n * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.\n * @returns {void}\n\n */\n DropDownList.prototype.filter = function (dataSource, query, fields) {\n this.isCustomFilter = true;\n this.filteringAction(dataSource, query, fields);\n };\n DropDownList.prototype.filteringAction = function (dataSource, query, fields) {\n if (!isNullOrUndefined(this.filterInput)) {\n this.beforePopupOpen = (!this.isPopupOpen && this.getModuleName() === 'combobox' && this.filterInput.value === '') ?\n false : true;\n if (this.filterInput.value.trim() === '' && !this.itemTemplate) {\n this.actionCompleteData.isUpdated = false;\n this.isTyped = false;\n if (!isNullOrUndefined(this.actionCompleteData.ulElement) && !isNullOrUndefined(this.actionCompleteData.list)) {\n this.onActionComplete(this.actionCompleteData.ulElement, this.actionCompleteData.list);\n }\n this.isTyped = true;\n if (!isNullOrUndefined(this.itemData) && this.getModuleName() === 'dropdownlist') {\n this.focusIndexItem();\n this.setScrollPosition();\n }\n this.isNotSearchList = true;\n }\n else {\n this.isNotSearchList = false;\n query = (this.filterInput.value.trim() === '') ? null : query;\n this.resetList(dataSource, fields, query);\n }\n this.renderReactTemplates();\n }\n };\n DropDownList.prototype.setSearchBox = function (popupElement) {\n if (this.isFiltering()) {\n var parentElement = popupElement.querySelector('.' + dropDownListClasses.filterParent) ?\n popupElement.querySelector('.' + dropDownListClasses.filterParent) : this.createElement('span', {\n className: dropDownListClasses.filterParent\n });\n this.filterInput = this.createElement('input', {\n attrs: { type: 'text' },\n className: dropDownListClasses.filterInput\n });\n this.element.parentNode.insertBefore(this.filterInput, this.element);\n var backIcon = false;\n if (Browser.isDevice) {\n backIcon = true;\n }\n this.filterInputObj = Input.createInput({\n element: this.filterInput,\n buttons: backIcon ?\n [dropDownListClasses.backIcon, dropDownListClasses.filterBarClearIcon] : [dropDownListClasses.filterBarClearIcon],\n properties: { placeholder: this.filterBarPlaceholder }\n }, this.createElement);\n if (!isNullOrUndefined(this.cssClass)) {\n if (this.cssClass.split(' ').indexOf('e-outline') !== -1) {\n addClass([this.filterInputObj.container], 'e-outline');\n }\n else if (this.cssClass.split(' ').indexOf('e-filled') !== -1) {\n addClass([this.filterInputObj.container], 'e-filled');\n }\n }\n append([this.filterInputObj.container], parentElement);\n prepend([parentElement], popupElement);\n attributes(this.filterInput, {\n 'aria-disabled': 'false',\n 'aria-owns': this.element.id + '_options',\n 'role': 'listbox',\n 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null,\n 'autocomplete': 'off',\n 'autocorrect': 'off',\n 'autocapitalize': 'off',\n 'spellcheck': 'false'\n });\n this.clearIconElement = this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon);\n if (!Browser.isDevice && this.clearIconElement) {\n EventHandler.add(this.clearIconElement, 'click', this.clearText, this);\n this.clearIconElement.style.visibility = 'hidden';\n }\n if (!Browser.isDevice) {\n this.searchKeyModule = new KeyboardEvents(this.filterInput, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigure,\n eventName: 'keydown'\n });\n }\n else {\n this.searchKeyModule = new KeyboardEvents(this.filterInput, {\n keyAction: this.mobileKeyActionHandler.bind(this),\n keyConfigs: this.keyConfigure,\n eventName: 'keydown'\n });\n }\n EventHandler.add(this.filterInput, 'input', this.onInput, this);\n EventHandler.add(this.filterInput, 'keyup', this.onFilterUp, this);\n EventHandler.add(this.filterInput, 'keydown', this.onFilterDown, this);\n EventHandler.add(this.filterInput, 'blur', this.onBlurHandler, this);\n EventHandler.add(this.filterInput, 'paste', this.pasteHandler, this);\n return this.filterInputObj;\n }\n else {\n return inputObject;\n }\n };\n DropDownList.prototype.onInput = function (e) {\n this.isValidKey = true;\n // For filtering works in mobile firefox.\n if (Browser.isDevice && Browser.info.name === 'mozilla') {\n this.typedString = this.filterInput.value;\n this.preventAutoFill = true;\n this.searchLists(e);\n }\n };\n DropDownList.prototype.pasteHandler = function (e) {\n var _this = this;\n setTimeout(function () {\n _this.typedString = _this.filterInput.value;\n _this.searchLists(e);\n });\n };\n DropDownList.prototype.onActionFailure = function (e) {\n _super.prototype.onActionFailure.call(this, e);\n if (this.beforePopupOpen) {\n this.renderPopup();\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DropDownList.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {\n var _this = this;\n if (this.isNotSearchList) {\n this.isNotSearchList = false;\n return;\n }\n if (this.isActive) {\n var selectedItem = this.selectedLI ? this.selectedLI.cloneNode(true) : null;\n _super.prototype.onActionComplete.call(this, ulElement, list, e);\n this.updateSelectElementData(this.allowFiltering);\n if (this.isRequested && !isNullOrUndefined(this.searchKeyEvent) && this.searchKeyEvent.type === 'keydown') {\n this.isRequested = false;\n this.keyActionHandler(this.searchKeyEvent);\n this.searchKeyEvent = null;\n }\n if (this.isRequested && !isNullOrUndefined(this.searchKeyEvent)) {\n this.incrementalSearch(this.searchKeyEvent);\n this.searchKeyEvent = null;\n }\n this.list.scrollTop = 0;\n if (!isNullOrUndefined(ulElement)) {\n attributes(ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });\n }\n if (this.initRemoteRender) {\n this.initial = true;\n this.activeIndex = this.index;\n this.updateValues();\n this.initRemoteRender = false;\n this.initial = false;\n if (this.value && this.dataSource instanceof DataManager) {\n var checkField_1 = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;\n var checkVal = list.some(function (x) { return x[checkField_1] === _this.value; });\n if (!checkVal) {\n this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField_1, 'equal', this.value)))\n .then(function (e) {\n if (e.result.length > 0) {\n _this.addItem(e.result, list.length);\n _this.updateValues();\n }\n });\n }\n }\n }\n if (this.getModuleName() !== 'autocomplete' && this.isFiltering() && !this.isTyped) {\n if (!this.actionCompleteData.isUpdated || ((!this.isCustomFilter\n && !this.isFilterFocus) || (isNullOrUndefined(this.itemData) && this.allowFiltering)\n && ((this.dataSource instanceof DataManager)\n || (!isNullOrUndefined(this.dataSource) && !isNullOrUndefined(this.dataSource.length) &&\n this.dataSource.length !== 0)))) {\n if (this.itemTemplate && this.element.tagName === 'EJS-COMBOBOX' && this.allowFiltering) {\n setTimeout(function () {\n _this.updateActionCompleteDataValues(ulElement, list);\n }, 0);\n }\n else {\n this.updateActionCompleteDataValues(ulElement, list);\n }\n }\n this.addNewItem(list, selectedItem);\n if (!isNullOrUndefined(this.itemData)) {\n this.focusIndexItem();\n }\n }\n if (this.beforePopupOpen) {\n this.renderPopup();\n }\n }\n };\n DropDownList.prototype.updateActionCompleteDataValues = function (ulElement, list) {\n this.actionCompleteData = { ulElement: ulElement.cloneNode(true), list: list, isUpdated: true };\n if (isNullOrUndefined(this.actionData.ulElement) && isNullOrUndefined(this.actionData.list)) {\n this.actionData = this.actionCompleteData;\n }\n };\n DropDownList.prototype.addNewItem = function (listData, newElement) {\n var _this = this;\n if (!isNullOrUndefined(this.itemData) && !isNullOrUndefined(newElement)) {\n var value_1 = this.getItemData().value;\n var isExist = listData.some(function (data) {\n return (((typeof data === 'string' || typeof data === 'number') && data === value_1) ||\n (getValue(_this.fields.value, data) === value_1));\n });\n if (!isExist) {\n this.addItem(this.itemData);\n }\n }\n };\n DropDownList.prototype.updateActionCompleteData = function (li, item, index) {\n var _this = this;\n if (this.getModuleName() !== 'autocomplete' && this.actionCompleteData.ulElement) {\n if (this.itemTemplate && this.element.tagName === 'EJS-COMBOBOX' && this.allowFiltering) {\n setTimeout(function () {\n _this.actionCompleteDataUpdate(li, item, index);\n }, 0);\n }\n else {\n this.actionCompleteDataUpdate(li, item, index);\n }\n }\n };\n DropDownList.prototype.actionCompleteDataUpdate = function (li, item, index) {\n if (index != null) {\n this.actionCompleteData.ulElement.insertBefore(li.cloneNode(true), this.actionCompleteData.ulElement.childNodes[index]);\n }\n else {\n this.actionCompleteData.ulElement.appendChild(li.cloneNode(true));\n }\n if (this.isFiltering() && this.actionCompleteData.list.indexOf(item) < 0) {\n this.actionCompleteData.list.push(item);\n }\n };\n DropDownList.prototype.focusIndexItem = function () {\n var value = this.getItemData().value;\n this.activeIndex = this.getIndexByValue(value);\n var element = this.findListElement(this.list, 'li', 'data-value', value);\n this.selectedLI = element;\n this.activeItem(element);\n this.removeFocus();\n };\n DropDownList.prototype.updateSelection = function () {\n var selectedItem = this.list.querySelector('.' + dropDownBaseClasses.selected);\n if (selectedItem) {\n this.setProperties({ 'index': this.getIndexByValue(selectedItem.getAttribute('data-value')) });\n this.activeIndex = this.index;\n }\n else {\n this.removeFocus();\n this.list.querySelector('.' + dropDownBaseClasses.li).classList.add(dropDownListClasses.focus);\n }\n };\n DropDownList.prototype.removeFocus = function () {\n var highlightedItem = this.list.querySelectorAll('.' + dropDownListClasses.focus);\n if (highlightedItem && highlightedItem.length) {\n removeClass(highlightedItem, dropDownListClasses.focus);\n }\n };\n DropDownList.prototype.renderPopup = function () {\n var _this = this;\n if (this.popupObj && document.body.contains(this.popupObj.element)) {\n this.refreshPopup();\n return;\n }\n var args = { cancel: false };\n this.trigger('beforeOpen', args, function (args) {\n if (!args.cancel) {\n var popupEle = _this.createElement('div', {\n id: _this.element.id + '_popup', className: 'e-ddl e-popup ' + (_this.cssClass != null ? _this.cssClass : '')\n });\n var searchBox = _this.setSearchBox(popupEle);\n _this.listHeight = formatUnit(_this.popupHeight);\n if (_this.headerTemplate) {\n _this.setHeaderTemplate(popupEle);\n }\n append([_this.list], popupEle);\n if (_this.footerTemplate) {\n _this.setFooterTemplate(popupEle);\n }\n document.body.appendChild(popupEle);\n popupEle.style.visibility = 'hidden';\n if (_this.popupHeight !== 'auto') {\n _this.searchBoxHeight = 0;\n if (!isNullOrUndefined(searchBox.container)) {\n _this.searchBoxHeight = (searchBox.container.parentElement).getBoundingClientRect().height;\n _this.listHeight = (parseInt(_this.listHeight, 10) - (_this.searchBoxHeight)).toString() + 'px';\n }\n if (_this.headerTemplate) {\n _this.header = _this.header ? _this.header : popupEle.querySelector('.e-ddl-header');\n var height = Math.round(_this.header.getBoundingClientRect().height);\n _this.listHeight = (parseInt(_this.listHeight, 10) - (height + _this.searchBoxHeight)).toString() + 'px';\n }\n if (_this.footerTemplate) {\n _this.footer = _this.footer ? _this.footer : popupEle.querySelector('.e-ddl-footer');\n var height = Math.round(_this.footer.getBoundingClientRect().height);\n _this.listHeight = (parseInt(_this.listHeight, 10) - (height + _this.searchBoxHeight)).toString() + 'px';\n }\n _this.list.style.maxHeight = (parseInt(_this.listHeight, 10) - 2).toString() + 'px'; // due to box-sizing property\n popupEle.style.maxHeight = formatUnit(_this.popupHeight);\n }\n else {\n popupEle.style.height = 'auto';\n }\n var offsetValue = 0;\n var left = void 0;\n if (!isNullOrUndefined(_this.selectedLI) && (!isNullOrUndefined(_this.activeIndex) && _this.activeIndex >= 0)) {\n _this.setScrollPosition();\n }\n else {\n _this.list.scrollTop = 0;\n }\n if (Browser.isDevice && (!_this.allowFiltering && (_this.getModuleName() === 'dropdownlist' ||\n (_this.isDropDownClick && _this.getModuleName() === 'combobox')))) {\n offsetValue = _this.getOffsetValue(popupEle);\n var firstItem = _this.isEmptyList() ? _this.list : _this.liCollections[0];\n left = -(parseInt(getComputedStyle(firstItem).textIndent, 10) -\n parseInt(getComputedStyle(_this.inputElement).paddingLeft, 10) +\n parseInt(getComputedStyle(_this.inputElement.parentElement).borderLeftWidth, 10));\n }\n _this.getFocusElement();\n _this.createPopup(popupEle, offsetValue, left);\n _this.checkCollision(popupEle);\n if (Browser.isDevice) {\n _this.popupObj.element.classList.add(dropDownListClasses.device);\n if (_this.getModuleName() === 'dropdownlist' || (_this.getModuleName() === 'combobox'\n && !_this.allowFiltering && _this.isDropDownClick)) {\n _this.popupObj.collision = { X: 'fit', Y: 'fit' };\n }\n if (_this.isFilterLayout()) {\n _this.popupObj.element.classList.add(dropDownListClasses.mobileFilter);\n _this.popupObj.position = { X: 0, Y: 0 };\n _this.popupObj.dataBind();\n attributes(_this.popupObj.element, { style: 'left:0px;right:0px;top:0px;bottom:0px;' });\n addClass([document.body, _this.popupObj.element], dropDownListClasses.popupFullScreen);\n _this.setSearchBoxPosition();\n _this.backIconElement = searchBox.container.querySelector('.e-back-icon');\n _this.clearIconElement = searchBox.container.querySelector('.' + dropDownListClasses.clearIcon);\n EventHandler.add(_this.backIconElement, 'click', _this.clickOnBackIcon, _this);\n EventHandler.add(_this.clearIconElement, 'click', _this.clearText, _this);\n }\n }\n popupEle.style.visibility = 'visible';\n addClass([popupEle], 'e-popup-close');\n var scrollParentElements = _this.popupObj.getScrollableParent(_this.inputWrapper.container);\n for (var _i = 0, scrollParentElements_1 = scrollParentElements; _i < scrollParentElements_1.length; _i++) {\n var element = scrollParentElements_1[_i];\n EventHandler.add(element, 'scroll', _this.scrollHandler, _this);\n }\n if (Browser.isDevice && _this.isFilterLayout()) {\n EventHandler.add(_this.list, 'scroll', _this.listScroll, _this);\n }\n if (!isNullOrUndefined(_this.list)) {\n _this.unWireListEvents();\n _this.wireListEvents();\n }\n attributes(_this.targetElement(), { 'aria-expanded': 'true' });\n var inputParent = _this.isFiltering() ? _this.filterInput.parentElement : _this.inputWrapper.container;\n addClass([inputParent], [dropDownListClasses.inputFocus]);\n var animModel = { name: 'FadeIn', duration: 100 };\n _this.beforePopupOpen = true;\n var popupInstance = _this.popupObj;\n var eventArgs = { popup: popupInstance, cancel: false, animation: animModel };\n _this.trigger('open', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n addClass([_this.inputWrapper.container], [dropDownListClasses.iconAnimation]);\n _this.renderReactTemplates();\n _this.popupObj.show(new Animation(eventArgs.animation), (_this.zIndex === 1000) ? _this.element : null);\n }\n else {\n _this.beforePopupOpen = false;\n _this.destroyPopup();\n }\n });\n }\n else {\n _this.beforePopupOpen = false;\n }\n });\n };\n DropDownList.prototype.checkCollision = function (popupEle) {\n if (!Browser.isDevice || (Browser.isDevice && !(this.getModuleName() === 'dropdownlist' || this.isDropDownClick))) {\n var collision = isCollide(popupEle);\n if (collision.length > 0) {\n popupEle.style.marginTop = -parseInt(getComputedStyle(popupEle).marginTop, 10) + 'px';\n }\n this.popupObj.resolveCollision();\n }\n };\n DropDownList.prototype.getOffsetValue = function (popupEle) {\n var popupStyles = getComputedStyle(popupEle);\n var borderTop = parseInt(popupStyles.borderTopWidth, 10);\n var borderBottom = parseInt(popupStyles.borderBottomWidth, 10);\n return this.setPopupPosition(borderTop + borderBottom);\n };\n DropDownList.prototype.createPopup = function (element, offsetValue, left) {\n var _this = this;\n this.popupObj = new Popup(element, {\n width: this.setWidth(), targetType: 'relative',\n relateTo: this.inputWrapper.container, collision: { X: 'flip', Y: 'flip' }, offsetY: offsetValue,\n enableRtl: this.enableRtl, offsetX: left, position: { X: 'left', Y: 'bottom' },\n zIndex: this.zIndex,\n close: function () {\n if (!_this.isDocumentClick) {\n _this.focusDropDown();\n }\n // eslint-disable-next-line\n if (_this.isReact) {\n _this.clearTemplate(['headerTemplate', 'footerTemplate']);\n }\n var isResetItem = (_this.getModuleName() === 'autocomplete') ? true : false;\n _this.isNotSearchList = false;\n _this.isDocumentClick = false;\n _this.destroyPopup();\n if (_this.isFiltering() && _this.actionCompleteData.list && _this.actionCompleteData.list[0]) {\n _this.isActive = true;\n _this.onActionComplete(_this.actionCompleteData.ulElement, _this.actionCompleteData.list, null, true);\n }\n },\n open: function () {\n EventHandler.add(document, 'mousedown', _this.onDocumentClick, _this);\n _this.isPopupOpen = true;\n var actionList = _this.actionCompleteData && _this.actionCompleteData.ulElement &&\n _this.actionCompleteData.ulElement.querySelector('li');\n var ulElement = _this.list.querySelector('ul li');\n if (_this.isFiltering() && _this.itemTemplate && (_this.element.tagName === _this.getNgDirective()) &&\n (actionList && ulElement && actionList.textContent !== ulElement.textContent) &&\n _this.element.tagName !== 'EJS-COMBOBOX') {\n _this.cloneElements();\n }\n if (_this.isFilterLayout()) {\n removeClass([_this.inputWrapper.container], [dropDownListClasses.inputFocus]);\n _this.isFilterFocus = true;\n _this.filterInput.focus();\n if (_this.inputWrapper.clearButton) {\n addClass([_this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n }\n _this.activeStateChange();\n },\n targetExitViewport: function () {\n if (!Browser.isDevice) {\n _this.hidePopup();\n }\n }\n });\n };\n DropDownList.prototype.isEmptyList = function () {\n return !isNullOrUndefined(this.liCollections) && this.liCollections.length === 0;\n };\n DropDownList.prototype.getFocusElement = function () {\n // combo-box used this method\n };\n DropDownList.prototype.isFilterLayout = function () {\n return this.getModuleName() === 'dropdownlist' && this.allowFiltering;\n };\n DropDownList.prototype.scrollHandler = function () {\n if (Browser.isDevice && ((this.getModuleName() === 'dropdownlist' &&\n !this.isFilterLayout()) || (this.getModuleName() === 'combobox' && !this.allowFiltering && this.isDropDownClick))) {\n this.hidePopup();\n }\n };\n DropDownList.prototype.setSearchBoxPosition = function () {\n var searchBoxHeight = this.filterInput.parentElement.getBoundingClientRect().height;\n this.popupObj.element.style.maxHeight = '100%';\n this.popupObj.element.style.width = '100%';\n this.list.style.maxHeight = (window.innerHeight - searchBoxHeight) + 'px';\n this.list.style.height = (window.innerHeight - searchBoxHeight) + 'px';\n var clearElement = this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon);\n detach(this.filterInput);\n clearElement.parentElement.insertBefore(this.filterInput, clearElement);\n };\n DropDownList.prototype.setPopupPosition = function (border) {\n var offsetValue;\n var popupOffset = border;\n var selectedLI = this.list.querySelector('.' + dropDownListClasses.focus) || this.selectedLI;\n var firstItem = this.isEmptyList() ? this.list : this.liCollections[0];\n var lastItem = this.isEmptyList() ? this.list : this.liCollections[this.getItems().length - 1];\n var liHeight = firstItem.getBoundingClientRect().height;\n var listHeight = this.list.offsetHeight / 2;\n var height = isNullOrUndefined(selectedLI) ? firstItem.offsetTop : selectedLI.offsetTop;\n var lastItemOffsetValue = lastItem.offsetTop;\n if (lastItemOffsetValue - listHeight < height && !isNullOrUndefined(this.liCollections) &&\n this.liCollections.length > 0 && !isNullOrUndefined(selectedLI)) {\n var count = this.list.offsetHeight / liHeight;\n var paddingBottom = parseInt(getComputedStyle(this.list).paddingBottom, 10);\n offsetValue = (count - (this.liCollections.length - this.activeIndex)) * liHeight - popupOffset + paddingBottom;\n this.list.scrollTop = selectedLI.offsetTop;\n }\n else if (height > listHeight) {\n offsetValue = listHeight - liHeight / 2;\n this.list.scrollTop = height - listHeight + liHeight / 2;\n }\n else {\n offsetValue = height;\n }\n var inputHeight = this.inputWrapper.container.offsetHeight;\n offsetValue = offsetValue + liHeight + popupOffset - ((liHeight - inputHeight) / 2);\n return -offsetValue;\n };\n DropDownList.prototype.setWidth = function () {\n var width = formatUnit(this.popupWidth);\n if (width.indexOf('%') > -1) {\n var inputWidth = this.inputWrapper.container.offsetWidth * parseFloat(width) / 100;\n width = inputWidth.toString() + 'px';\n }\n if (Browser.isDevice && (!this.allowFiltering && (this.getModuleName() === 'dropdownlist' ||\n (this.isDropDownClick && this.getModuleName() === 'combobox')))) {\n var firstItem = this.isEmptyList() ? this.list : this.liCollections[0];\n width = (parseInt(width, 10) + (parseInt(getComputedStyle(firstItem).textIndent, 10) -\n parseInt(getComputedStyle(this.inputElement).paddingLeft, 10) +\n parseInt(getComputedStyle(this.inputElement.parentElement).borderLeftWidth, 10)) * 2) + 'px';\n }\n return width;\n };\n DropDownList.prototype.scrollBottom = function (isInitial) {\n if (!isNullOrUndefined(this.selectedLI)) {\n var currentOffset = this.list.offsetHeight;\n var nextBottom = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;\n var nextOffset = this.list.scrollTop + nextBottom - currentOffset;\n nextOffset = isInitial ? nextOffset + parseInt(getComputedStyle(this.list).paddingTop, 10) * 2 : nextOffset;\n var boxRange = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;\n boxRange = this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?\n boxRange - this.fixedHeaderElement.offsetHeight : boxRange;\n if (this.activeIndex === 0) {\n this.list.scrollTop = 0;\n }\n else if (nextBottom > currentOffset || !(boxRange > 0 && this.list.offsetHeight > boxRange)) {\n this.list.scrollTop = nextOffset;\n }\n }\n };\n DropDownList.prototype.scrollTop = function () {\n if (!isNullOrUndefined(this.selectedLI)) {\n var nextOffset = this.selectedLI.offsetTop - this.list.scrollTop;\n nextOffset = this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?\n nextOffset - this.fixedHeaderElement.offsetHeight : nextOffset;\n var boxRange = (this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop);\n if (this.activeIndex === 0) {\n this.list.scrollTop = 0;\n }\n else if (nextOffset < 0) {\n this.list.scrollTop = this.list.scrollTop + nextOffset;\n }\n else if (!(boxRange > 0 && this.list.offsetHeight > boxRange)) {\n this.list.scrollTop = this.selectedLI.offsetTop - (this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?\n this.fixedHeaderElement.offsetHeight : 0);\n }\n }\n };\n DropDownList.prototype.isEditTextBox = function () {\n return false;\n };\n DropDownList.prototype.isFiltering = function () {\n return this.allowFiltering;\n };\n DropDownList.prototype.isPopupButton = function () {\n return true;\n };\n DropDownList.prototype.setScrollPosition = function (e) {\n if (!isNullOrUndefined(e)) {\n switch (e.action) {\n case 'pageDown':\n case 'down':\n case 'end':\n this.scrollBottom();\n break;\n default:\n this.scrollTop();\n break;\n }\n }\n else {\n this.scrollBottom(true);\n }\n };\n DropDownList.prototype.clearText = function () {\n this.filterInput.value = this.typedString = '';\n this.searchLists(null);\n };\n DropDownList.prototype.listScroll = function () {\n this.filterInput.blur();\n };\n DropDownList.prototype.setEleWidth = function (width) {\n if (!isNullOrUndefined(width)) {\n if (typeof width === 'number') {\n this.inputWrapper.container.style.width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n this.inputWrapper.container.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));\n }\n }\n };\n DropDownList.prototype.closePopup = function (delay) {\n var _this = this;\n this.isTyped = false;\n if (!(this.popupObj && document.body.contains(this.popupObj.element) && this.beforePopupOpen)) {\n return;\n }\n EventHandler.remove(document, 'mousedown', this.onDocumentClick);\n this.isActive = false;\n this.filterInputObj = null;\n this.isDropDownClick = false;\n this.preventAutoFill = false;\n var scrollableParentElements = this.popupObj.getScrollableParent(this.inputWrapper.container);\n for (var _i = 0, scrollableParentElements_1 = scrollableParentElements; _i < scrollableParentElements_1.length; _i++) {\n var element = scrollableParentElements_1[_i];\n EventHandler.remove(element, 'scroll', this.scrollHandler);\n }\n if (Browser.isDevice && this.isFilterLayout()) {\n removeClass([document.body, this.popupObj.element], dropDownListClasses.popupFullScreen);\n EventHandler.remove(this.list, 'scroll', this.listScroll);\n }\n if (this.isFilterLayout()) {\n if (!Browser.isDevice) {\n this.searchKeyModule.destroy();\n if (this.clearIconElement) {\n EventHandler.remove(this.clearIconElement, 'click', this.clearText);\n }\n }\n if (this.backIconElement) {\n EventHandler.remove(this.backIconElement, 'click', this.clickOnBackIcon);\n EventHandler.remove(this.clearIconElement, 'click', this.clearText);\n }\n EventHandler.remove(this.filterInput, 'input', this.onInput);\n EventHandler.remove(this.filterInput, 'keyup', this.onFilterUp);\n EventHandler.remove(this.filterInput, 'keydown', this.onFilterDown);\n EventHandler.remove(this.filterInput, 'blur', this.onBlurHandler);\n EventHandler.remove(this.filterInput, 'paste', this.pasteHandler);\n this.filterInput = null;\n }\n attributes(this.targetElement(), { 'aria-expanded': 'false', 'aria-activedescendant': null });\n this.inputWrapper.container.classList.remove(dropDownListClasses.iconAnimation);\n if (this.isFiltering()) {\n this.actionCompleteData.isUpdated = false;\n }\n this.beforePopupOpen = false;\n var animModel = {\n name: 'FadeOut',\n duration: 100,\n delay: delay ? delay : 0\n };\n var popupInstance = this.popupObj;\n var eventArgs = { popup: popupInstance, cancel: false, animation: animModel };\n this.trigger('close', eventArgs, function (eventArgs) {\n if (!isNullOrUndefined(_this.popupObj) &&\n !isNullOrUndefined(_this.popupObj.element.querySelector('.e-fixed-head'))) {\n var fixedHeader = _this.popupObj.element.querySelector('.e-fixed-head');\n fixedHeader.parentNode.removeChild(fixedHeader);\n _this.fixedHeaderElement = null;\n }\n if (!eventArgs.cancel) {\n if (_this.getModuleName() === 'autocomplete') {\n _this.rippleFun();\n }\n if (_this.isPopupOpen) {\n _this.popupObj.hide(new Animation(eventArgs.animation));\n }\n else {\n _this.destroyPopup();\n }\n }\n });\n };\n DropDownList.prototype.destroyPopup = function () {\n this.isPopupOpen = false;\n this.isFilterFocus = false;\n this.popupObj.destroy();\n detach(this.popupObj.element);\n };\n DropDownList.prototype.clickOnBackIcon = function () {\n this.hidePopup();\n this.focusIn();\n };\n /**\n * To Initialize the control rendering\n *\n * @private\n * @returns {void}\n */\n DropDownList.prototype.render = function () {\n if (this.element.tagName === 'INPUT') {\n this.inputElement = this.element;\n if (isNullOrUndefined(this.inputElement.getAttribute('role'))) {\n this.inputElement.setAttribute('role', 'textbox');\n }\n if (isNullOrUndefined(this.inputElement.getAttribute('type'))) {\n this.inputElement.setAttribute('type', 'text');\n }\n }\n else {\n this.inputElement = this.createElement('input', { attrs: { role: 'textbox', type: 'text' } });\n if (this.element.tagName !== this.getNgDirective()) {\n this.element.style.display = 'none';\n }\n this.element.parentElement.insertBefore(this.inputElement, this.element);\n this.preventTabIndex(this.inputElement);\n }\n var updatedCssClassValues = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassValues = (this.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n this.inputWrapper = Input.createInput({\n element: this.inputElement,\n buttons: this.isPopupButton() ? [dropDownListClasses.icon] : null,\n floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.getModuleName() === 'dropdownlist' ? true : this.readonly,\n placeholder: this.placeholder,\n cssClass: updatedCssClassValues,\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton\n }\n }, this.createElement);\n if (this.element.tagName === this.getNgDirective()) {\n this.element.appendChild(this.inputWrapper.container);\n }\n else {\n this.inputElement.parentElement.insertBefore(this.element, this.inputElement);\n }\n this.hiddenElement = this.createElement('select', {\n attrs: { 'aria-hidden': 'true', 'tabindex': '-1', 'class': dropDownListClasses.hiddenElement }\n });\n prepend([this.hiddenElement], this.inputWrapper.container);\n this.validationAttribute(this.element, this.hiddenElement);\n this.setReadOnly();\n this.setFields();\n this.inputWrapper.container.style.width = formatUnit(this.width);\n this.inputWrapper.container.classList.add('e-ddl');\n this.wireEvent();\n this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';\n this.element.removeAttribute('tabindex');\n var id = this.element.getAttribute('id') ? this.element.getAttribute('id') : getUniqueID('ej2_dropdownlist');\n this.element.id = id;\n this.hiddenElement.id = id + '_hidden';\n this.targetElement().setAttribute('tabindex', this.tabIndex);\n attributes(this.targetElement(), this.getAriaAttributes());\n this.updateDataAttribute(this.htmlAttributes);\n this.setHTMLAttributes();\n if (this.value !== null || this.activeIndex !== null || this.text !== null) {\n this.initValue();\n }\n else if (this.element.tagName === 'SELECT' && this.element.options[0]) {\n var selectElement = this.element;\n this.value = selectElement.options[selectElement.selectedIndex].value;\n this.text = isNullOrUndefined(this.value) ? null : selectElement.options[selectElement.selectedIndex].textContent;\n this.initValue();\n }\n this.preventTabIndex(this.element);\n if (!this.enabled) {\n this.targetElement().tabIndex = -1;\n }\n this.initial = false;\n this.element.style.opacity = '';\n this.inputElement.onselect = function (e) {\n e.stopImmediatePropagation();\n };\n this.inputElement.onchange = function (e) {\n e.stopImmediatePropagation();\n };\n if (this.element.hasAttribute('autofocus')) {\n this.focusIn();\n }\n if (!isNullOrUndefined(this.text)) {\n this.inputElement.setAttribute('value', this.text);\n }\n if (this.element.hasAttribute('data-val')) {\n this.element.setAttribute('data-val', 'false');\n }\n this.renderComplete();\n };\n DropDownList.prototype.setFooterTemplate = function (popupEle) {\n var compiledString;\n if (this.footer) {\n this.footer.innerHTML = '';\n }\n else {\n this.footer = this.createElement('div');\n addClass([this.footer], dropDownListClasses.footer);\n }\n var footercheck = this.dropdownCompiler(this.footerTemplate);\n if (footercheck) {\n compiledString = compile(select(this.footerTemplate, document).innerHTML.trim());\n }\n else {\n compiledString = compile(this.footerTemplate);\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var footerCompTemp = compiledString({}, this, 'footerTemplate', this.footerTemplateId, this.isStringTemplate, null, this.footer);\n if (footerCompTemp && footerCompTemp.length > 0) {\n for (var i = 0; i < footerCompTemp.length; i++) {\n this.footer.appendChild(footerCompTemp[i]);\n }\n }\n append([this.footer], popupEle);\n };\n DropDownList.prototype.setHeaderTemplate = function (popupEle) {\n var compiledString;\n if (this.header) {\n this.header.innerHTML = '';\n }\n else {\n this.header = this.createElement('div');\n addClass([this.header], dropDownListClasses.header);\n }\n var headercheck = this.dropdownCompiler(this.headerTemplate);\n if (headercheck) {\n compiledString = compile(select(this.headerTemplate, document).innerHTML.trim());\n }\n else {\n compiledString = compile(this.headerTemplate);\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var headerCompTemp = compiledString({}, this, 'headerTemplate', this.headerTemplateId, this.isStringTemplate, null, this.header);\n if (headerCompTemp && headerCompTemp.length) {\n for (var i = 0; i < headerCompTemp.length; i++) {\n this.header.appendChild(headerCompTemp[i]);\n }\n }\n var contentEle = popupEle.querySelector('div.e-content');\n popupEle.insertBefore(this.header, contentEle);\n };\n DropDownList.prototype.setOldText = function (text) {\n this.text = text;\n };\n DropDownList.prototype.setOldValue = function (value) {\n this.value = value;\n };\n DropDownList.prototype.refreshPopup = function () {\n if (!isNullOrUndefined(this.popupObj) && document.body.contains(this.popupObj.element) &&\n ((this.allowFiltering && !(Browser.isDevice && this.isFilterLayout())) || this.getModuleName() === 'autocomplete')) {\n removeClass([this.popupObj.element], 'e-popup-close');\n this.popupObj.refreshPosition(this.inputWrapper.container);\n this.popupObj.resolveCollision();\n }\n };\n DropDownList.prototype.checkData = function (newProp) {\n if (newProp.dataSource && !isNullOrUndefined(Object.keys(newProp.dataSource)) && this.itemTemplate && this.allowFiltering &&\n !(this.isListSearched && (newProp.dataSource instanceof DataManager))) {\n this.list = null;\n this.actionCompleteData = { ulElement: null, list: null, isUpdated: false };\n }\n this.isListSearched = false;\n var isChangeValue = Object.keys(newProp).indexOf('value') !== -1 && isNullOrUndefined(newProp.value);\n var isChangeText = Object.keys(newProp).indexOf('text') !== -1 && isNullOrUndefined(newProp.text);\n if (this.getModuleName() !== 'autocomplete' && this.allowFiltering && (isChangeValue || isChangeText)) {\n this.itemData = null;\n }\n if (this.allowFiltering && newProp.dataSource && !isNullOrUndefined(Object.keys(newProp.dataSource))) {\n this.actionCompleteData = { ulElement: null, list: null, isUpdated: false };\n this.actionData = this.actionCompleteData;\n }\n else if (this.allowFiltering && newProp.query && !isNullOrUndefined(Object.keys(newProp.query))) {\n this.actionCompleteData = this.getModuleName() === 'combobox' ?\n { ulElement: null, list: null, isUpdated: false } : this.actionCompleteData;\n this.actionData = this.actionCompleteData;\n }\n };\n DropDownList.prototype.updateDataSource = function (props) {\n if (this.inputElement.value !== '' || (!isNullOrUndefined(props) && (isNullOrUndefined(props.dataSource)\n || (!(props.dataSource instanceof DataManager) && props.dataSource.length === 0)))) {\n this.clearAll(null, props);\n }\n if ((this.fields.groupBy && props.fields) && !this.isGroupChecking) {\n EventHandler.remove(this.list, 'scroll', this.setFloatingHeader);\n EventHandler.add(this.list, 'scroll', this.setFloatingHeader, this);\n }\n if (!(!isNullOrUndefined(props) && (isNullOrUndefined(props.dataSource)\n || (!(props.dataSource instanceof DataManager) && props.dataSource.length === 0))) || !(props.dataSource === [])) {\n this.typedString = '';\n this.resetList(this.dataSource);\n }\n if (!this.isCustomFilter && !this.isFilterFocus && document.activeElement !== this.filterInput) {\n this.checkCustomValue();\n }\n };\n DropDownList.prototype.checkCustomValue = function () {\n this.itemData = this.getDataByValue(this.value);\n var dataItem = this.getItemData();\n this.setProperties({ 'value': dataItem.value, 'text': dataItem.text });\n };\n DropDownList.prototype.updateInputFields = function () {\n if (this.getModuleName() === 'dropdownlist') {\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n };\n /**\n * Dynamically change the value of properties.\n *\n * @private\n * @param {DropDownListModel} newProp - Returns the dynamic property value of the component.\n * @param {DropDownListModel} oldProp - Returns the previous previous value of the component.\n * @returns {void}\n */\n DropDownList.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (this.getModuleName() === 'dropdownlist') {\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 'query':\n case 'dataSource': break;\n case 'htmlAttributes':\n this.setHTMLAttributes();\n break;\n case 'width':\n this.setEleWidth(newProp.width);\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.inputElement);\n break;\n case 'filterBarPlaceholder':\n if (this.filterInput) {\n Input.setPlaceholder(newProp.filterBarPlaceholder, this.filterInput);\n }\n break;\n case 'readonly':\n if (this.getModuleName() !== 'dropdownlist') {\n Input.setReadonly(newProp.readonly, this.inputElement);\n }\n this.setReadOnly();\n break;\n case 'cssClass':\n this.setCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n case 'enableRtl':\n this.setEnableRtl();\n break;\n case 'enabled':\n this.setEnable();\n break;\n case 'text':\n if (newProp.text === null) {\n this.clearAll();\n break;\n }\n if (!this.list) {\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n this.renderList();\n }\n if (!this.initRemoteRender) {\n var li = this.getElementByText(newProp.text);\n if (!this.checkValidLi(li)) {\n if (this.liCollections && this.liCollections.length === 100 &&\n this.getModuleName() === 'autocomplete' && this.listData.length > 100) {\n this.setSelectionData(newProp.text, oldProp.text, 'text');\n }\n else {\n this.setOldText(oldProp.text);\n }\n }\n this.updateInputFields();\n }\n break;\n case 'value':\n if (newProp.value === null) {\n this.clearAll();\n break;\n }\n this.notify('beforeValueChange', { newProp: newProp }); // gird component value type change\n if (!this.list) {\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n this.renderList();\n }\n if (!this.initRemoteRender) {\n var item = this.getElementByValue(newProp.value);\n if (!this.checkValidLi(item)) {\n if (this.liCollections && this.liCollections.length === 100 &&\n this.getModuleName() === 'autocomplete' && this.listData.length > 100) {\n this.setSelectionData(newProp.value, oldProp.value, 'value');\n }\n else {\n this.setOldValue(oldProp.value);\n }\n }\n this.updateInputFields();\n this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;\n }\n break;\n case 'index':\n if (newProp.index === null) {\n this.clearAll();\n break;\n }\n if (!this.list) {\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n this.renderList();\n }\n if (!this.initRemoteRender && this.liCollections) {\n var element = this.liCollections[newProp.index];\n if (!this.checkValidLi(element)) {\n if (this.liCollections && this.liCollections.length === 100 &&\n this.getModuleName() === 'autocomplete' && this.listData.length > 100) {\n this.setSelectionData(newProp.index, oldProp.index, 'index');\n }\n else {\n this.index = oldProp.index;\n }\n }\n this.updateInputFields();\n }\n break;\n case 'footerTemplate':\n if (this.popupObj) {\n this.setFooterTemplate(this.popupObj.element);\n }\n break;\n case 'headerTemplate':\n if (this.popupObj) {\n this.setHeaderTemplate(this.popupObj.element);\n }\n break;\n case 'valueTemplate':\n if (!isNullOrUndefined(this.itemData) && this.valueTemplate != null) {\n this.setValueTemplate();\n }\n break;\n case 'allowFiltering':\n if (this.allowFiltering) {\n this.actionCompleteData = { ulElement: this.ulElement,\n list: this.listData, isUpdated: true };\n this.actionData = this.actionCompleteData;\n this.updateSelectElementData(this.allowFiltering);\n }\n break;\n case 'floatLabelType':\n Input.removeFloating(this.inputWrapper);\n Input.addFloating(this.inputElement, newProp.floatLabelType, this.placeholder, this.createElement);\n break;\n case 'showClearButton':\n Input.setClearButton(newProp.showClearButton, this.inputElement, this.inputWrapper, null, this.createElement);\n this.bindClearEvent();\n break;\n default:\n {\n // eslint-disable-next-line max-len\n var ddlProps = this.getPropObject(prop, newProp, oldProp);\n _super.prototype.onPropertyChanged.call(this, ddlProps.newProperty, ddlProps.oldProperty);\n }\n break;\n }\n }\n };\n DropDownList.prototype.checkValidLi = function (element) {\n if (this.isValidLI(element)) {\n this.setSelection(element, null);\n return true;\n }\n return false;\n };\n DropDownList.prototype.setSelectionData = function (newProp, oldProp, prop) {\n var _this = this;\n var li;\n this.updateListValues = function () {\n if (prop === 'text') {\n li = _this.getElementByText(newProp);\n if (!_this.checkValidLi(li)) {\n _this.setOldText(oldProp);\n }\n }\n else if (prop === 'value') {\n li = _this.getElementByValue(newProp);\n if (!_this.checkValidLi(li)) {\n _this.setOldValue(oldProp);\n }\n }\n else if (prop === 'index') {\n li = _this.liCollections[newProp];\n if (!_this.checkValidLi(li)) {\n _this.index = oldProp;\n }\n }\n };\n };\n DropDownList.prototype.setReadOnly = function () {\n if (this.readonly) {\n addClass([this.inputWrapper.container], ['e-readonly']);\n }\n else {\n removeClass([this.inputWrapper.container], ['e-readonly']);\n }\n };\n DropDownList.prototype.setCssClass = function (newClass, oldClass) {\n if (!isNullOrUndefined(oldClass)) {\n oldClass = (oldClass.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(newClass)) {\n newClass = (newClass.replace(/\\s+/g, ' ')).trim();\n }\n Input.setCssClass(newClass, [this.inputWrapper.container], oldClass);\n if (this.popupObj) {\n Input.setCssClass(newClass, [this.popupObj.element], oldClass);\n }\n };\n /**\n * Return the module name of this component.\n *\n * @private\n * @returns {string} Return the module name of this component.\n */\n DropDownList.prototype.getModuleName = function () {\n return 'dropdownlist';\n };\n /**\n * Opens the popup that displays the list of items.\n *\n * @returns {void}\n */\n DropDownList.prototype.showPopup = function () {\n if (!this.enabled) {\n return;\n }\n if (this.isFiltering() && this.dataSource instanceof DataManager && (this.actionData.list != this.actionCompleteData.list) &&\n this.actionData.list && this.actionData.ulElement) {\n this.actionCompleteData = this.actionData;\n this.onActionComplete(this.actionCompleteData.ulElement, this.actionCompleteData.list, null, true);\n }\n if (this.beforePopupOpen) {\n this.refreshPopup();\n return;\n }\n this.beforePopupOpen = true;\n if (this.isFiltering() && !this.isActive && this.actionCompleteData.list && this.actionCompleteData.list[0]) {\n this.isActive = true;\n this.onActionComplete(this.actionCompleteData.ulElement, this.actionCompleteData.list, null, true);\n }\n else if (isNullOrUndefined(this.list) || !isUndefined(this.list) && (this.list.classList.contains(dropDownBaseClasses.noData) ||\n this.list.querySelectorAll('.' + dropDownBaseClasses.li).length <= 0)) {\n this.renderList();\n }\n this.invokeRenderPopup();\n };\n DropDownList.prototype.invokeRenderPopup = function () {\n if (Browser.isDevice && this.isFilterLayout()) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy_2 = this;\n window.onpopstate = function () {\n proxy_2.hidePopup();\n };\n history.pushState({}, '');\n }\n if (!isNullOrUndefined(this.list.children[0]) || this.list.classList.contains(dropDownBaseClasses.noData)) {\n this.renderPopup();\n }\n attributes(this.targetElement(), { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });\n };\n DropDownList.prototype.renderHightSearch = function () {\n // update high light search\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Hides the popup if it is in an open state.\n *\n * @returns {void}\n */\n DropDownList.prototype.hidePopup = function (e) {\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n if (this.isEscapeKey && this.getModuleName() === 'dropdownlist') {\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n this.isEscapeKey = false;\n if (!isNullOrUndefined(this.index)) {\n var element = this.findListElement(this.ulElement, 'li', 'data-value', this.value);\n this.selectedLI = this.liCollections[this.index] || element;\n if (this.selectedLI) {\n this.updateSelectedItem(this.selectedLI, null, true);\n if (this.valueTemplate && this.itemData !== null) {\n this.setValueTemplate();\n }\n }\n }\n else {\n this.resetSelection();\n }\n }\n this.closePopup();\n var dataItem = this.getItemData();\n var isSelectVal = !isNullOrUndefined(this.selectedLI);\n if (this.inputElement && this.inputElement.value.trim() === '' && !this.isInteracted && (this.isSelectCustom ||\n isSelectVal && this.inputElement.value !== dataItem.text)) {\n this.isSelectCustom = false;\n this.clearAll(e);\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Sets the focus on the component for interaction.\n *\n * @returns {void}\n */\n DropDownList.prototype.focusIn = function (e) {\n if (!this.enabled) {\n return;\n }\n if (this.targetElement().classList.contains(dropDownListClasses.disable)) {\n return;\n }\n var isFocused = false;\n if (this.preventFocus && Browser.isDevice) {\n this.inputWrapper.container.tabIndex = 1;\n this.inputWrapper.container.focus();\n this.preventFocus = false;\n isFocused = true;\n }\n if (!isFocused) {\n this.targetElement().focus();\n }\n addClass([this.inputWrapper.container], [dropDownListClasses.inputFocus]);\n this.onFocus(e);\n };\n /**\n * Moves the focus from the component if the component is already focused.\n *\n * @returns {void}\n */\n DropDownList.prototype.focusOut = function (e) {\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n if (!this.enabled) {\n return;\n }\n this.isTyped = true;\n this.hidePopup(e);\n if (this.targetElement()) {\n this.targetElement().blur();\n }\n removeClass([this.inputWrapper.container], [dropDownListClasses.inputFocus]);\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.\n *\n * @method destroy\n * @returns {void}\n */\n DropDownList.prototype.destroy = function () {\n this.isActive = false;\n resetIncrementalSearchValues(this.element.id);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact) {\n this.clearTemplate();\n }\n this.hidePopup();\n this.unWireEvent();\n if (this.list) {\n this.unWireListEvents();\n }\n if (this.element && !this.element.classList.contains('e-' + this.getModuleName())) {\n return;\n }\n if (this.inputElement) {\n var attrArray = ['readonly', 'aria-disabled', 'aria-placeholder',\n 'placeholder', 'aria-owns', 'aria-labelledby', 'aria-haspopup', 'aria-expanded',\n 'aria-activedescendant', 'autocomplete', 'aria-readonly', 'autocorrect',\n 'autocapitalize', 'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-describedby', 'aria-label'];\n for (var i = 0; i < attrArray.length; i++) {\n this.inputElement.removeAttribute(attrArray[i]);\n }\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n this.inputElement.classList.remove('e-input');\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n }\n this.element.style.display = 'block';\n if (this.inputWrapper.container.parentElement.tagName === this.getNgDirective()) {\n detach(this.inputWrapper.container);\n }\n else {\n this.inputWrapper.container.parentElement.insertBefore(this.element, this.inputWrapper.container);\n detach(this.inputWrapper.container);\n }\n _super.prototype.destroy.call(this);\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets all the list items bound on this component.\n *\n * @returns {Element[]}\n */\n DropDownList.prototype.getItems = function () {\n if (!this.list) {\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n this.renderList();\n }\n return this.ulElement ? _super.prototype.getItems.call(this) : [];\n };\n /**\n * Gets the data Object that matches the given value.\n *\n * @param { string | number } value - Specifies the value of the list item.\n * @returns {Object}\n */\n DropDownList.prototype.getDataByValue = function (value) {\n return _super.prototype.getDataByValue.call(this, value);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Allows you to clear the selected values from the component.\n *\n * @returns {void}\n */\n DropDownList.prototype.clear = function () {\n this.value = null;\n };\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"cssClass\", void 0);\n __decorate([\n Property('100%')\n ], DropDownList.prototype, \"width\", void 0);\n __decorate([\n Property('300px')\n ], DropDownList.prototype, \"popupHeight\", void 0);\n __decorate([\n Property('100%')\n ], DropDownList.prototype, \"popupWidth\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"placeholder\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"filterBarPlaceholder\", void 0);\n __decorate([\n Property({})\n ], DropDownList.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"query\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"valueTemplate\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"headerTemplate\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"footerTemplate\", void 0);\n __decorate([\n Property(false)\n ], DropDownList.prototype, \"allowFiltering\", void 0);\n __decorate([\n Property(false)\n ], DropDownList.prototype, \"readonly\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"text\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"index\", void 0);\n __decorate([\n Property('Never')\n ], DropDownList.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(false)\n ], DropDownList.prototype, \"showClearButton\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"filtering\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"focus\", void 0);\n DropDownList = __decorate([\n NotifyPropertyChanges\n ], DropDownList);\n return DropDownList;\n}(DropDownBase));\nexport { DropDownList };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, EventHandler, Property, Event, Browser, L10n } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { attributes, addClass, removeClass, detach, closest } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, getValue, formatUnit, setValue, merge } from '@syncfusion/ej2-base';\nimport { Internationalization, getNumericObject } from '@syncfusion/ej2-base';\nimport { Input } from '../input/input';\nvar ROOT = 'e-control-wrapper e-numeric';\nvar SPINICON = 'e-input-group-icon';\nvar SPINUP = 'e-spin-up';\nvar SPINDOWN = 'e-spin-down';\nvar ERROR = 'e-error';\nvar INCREMENT = 'increment';\nvar DECREMENT = 'decrement';\nvar INTREGEXP = new RegExp('^(-)?(\\\\d*)$');\nvar DECIMALSEPARATOR = '.';\nvar COMPONENT = 'e-numerictextbox';\nvar CONTROL = 'e-control';\nvar NUMERIC_FOCUS = 'e-input-focus';\nvar HIDDENELEMENT = 'e-numeric-hidden';\nvar wrapperAttributes = ['title', 'style', 'class'];\n/**\n * Represents the NumericTextBox component that allows the user to enter only numeric values.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar NumericTextBox = /** @class */ (function (_super) {\n __extends(NumericTextBox, _super);\n /**\n *\n * @param {NumericTextBoxModel} options - Specifies the NumericTextBox model.\n * @param {string | HTMLInputElement} element - Specifies the element to render as component.\n * @private\n */\n function NumericTextBox(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isVue = false;\n _this.preventChange = false;\n _this.isAngular = false;\n _this.isDynamicChange = false;\n _this.numericOptions = options;\n return _this;\n }\n NumericTextBox.prototype.preRender = function () {\n this.isPrevFocused = false;\n this.decimalSeparator = '.';\n // eslint-disable-next-line no-useless-escape\n this.intRegExp = new RegExp('/^(-)?(\\d*)$/');\n this.isCalled = false;\n var ejInstance = getValue('ej2_instances', this.element);\n this.cloneElement = this.element.cloneNode(true);\n removeClass([this.cloneElement], [CONTROL, COMPONENT, 'e-lib']);\n this.angularTagName = null;\n this.formEle = closest(this.element, 'form');\n if (this.element.tagName === 'EJS-NUMERICTEXTBOX') {\n this.angularTagName = this.element.tagName;\n var input = this.createElement('input');\n var index = 0;\n for (index; index < this.element.attributes.length; index++) {\n var attributeName = this.element.attributes[index].nodeName;\n if (attributeName !== 'id') {\n input.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);\n input.innerHTML = this.element.innerHTML;\n }\n }\n if (this.element.hasAttribute('name')) {\n this.element.removeAttribute('name');\n }\n this.element.classList.remove('e-control', 'e-numerictextbox');\n this.element.appendChild(input);\n this.element = input;\n setValue('ej2_instances', ejInstance, this.element);\n }\n attributes(this.element, { 'role': 'spinbutton', 'tabindex': '0', 'autocomplete': 'off', 'aria-live': 'assertive' });\n var localeText = {\n incrementTitle: 'Increment value', decrementTitle: 'Decrement value', placeholder: this.placeholder\n };\n this.l10n = new L10n('numerictextbox', localeText, this.locale);\n if (this.l10n.getConstant('placeholder') !== '') {\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n }\n this.isValidState = true;\n this.inputStyle = null;\n this.inputName = null;\n this.cultureInfo = {};\n this.initCultureInfo();\n this.initCultureFunc();\n this.prevValue = this.value;\n this.updateHTMLAttrToElement();\n this.checkAttributes(false);\n if (this.formEle) {\n this.inputEleValue = this.value;\n }\n this.validateMinMax();\n this.validateStep();\n if (this.placeholder === null) {\n this.updatePlaceholder();\n }\n };\n /**\n * To Initialize the control rendering\n *\n * @returns {void}\n * @private\n */\n NumericTextBox.prototype.render = function () {\n if (this.element.tagName.toLowerCase() === 'input') {\n this.createWrapper();\n if (this.showSpinButton) {\n this.spinBtnCreation();\n }\n this.setElementWidth(this.width);\n if (!this.container.classList.contains('e-input-group')) {\n this.container.classList.add('e-input-group');\n }\n this.changeValue(this.value === null || isNaN(this.value) ?\n null : this.strictMode ? this.trimValue(this.value) : this.value);\n this.wireEvents();\n if (this.value !== null && !isNaN(this.value)) {\n if (this.decimals) {\n this.setProperties({ value: this.roundNumber(this.value, this.decimals) }, true);\n }\n }\n if (this.element.getAttribute('value') || this.value) {\n this.element.setAttribute('value', this.element.value);\n this.hiddenInput.setAttribute('value', this.hiddenInput.value);\n }\n this.elementPrevValue = this.element.value;\n if (this.element.hasAttribute('data-val')) {\n this.element.setAttribute('data-val', 'false');\n }\n this.renderComplete();\n }\n };\n NumericTextBox.prototype.checkAttributes = function (isDynamic) {\n var attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['value', 'min', 'max', 'step', 'disabled', 'readonly', 'style', 'name', 'placeholder'];\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.element.getAttribute(prop))) {\n switch (prop) {\n case 'disabled':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['enabled'] === undefined)) || isDynamic) {\n var enabled = this.element.getAttribute(prop) === 'disabled' || this.element.getAttribute(prop) === ''\n || this.element.getAttribute(prop) === 'true' ? false : true;\n this.setProperties({ enabled: enabled }, !isDynamic);\n }\n break;\n case 'readonly':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['readonly'] === undefined)) || isDynamic) {\n var readonly = this.element.getAttribute(prop) === 'readonly' || this.element.getAttribute(prop) === ''\n || this.element.getAttribute(prop) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !isDynamic);\n }\n break;\n case 'placeholder':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.element.placeholder }, !isDynamic);\n }\n break;\n case 'value':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['value'] === undefined)) || isDynamic) {\n var setNumber = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n this.setProperties(setValue(prop, setNumber, {}), !isDynamic);\n }\n break;\n case 'min':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['min'] === undefined)) || isDynamic) {\n var minValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if (minValue !== null && !isNaN(minValue)) {\n this.setProperties(setValue(prop, minValue, {}), !isDynamic);\n }\n }\n break;\n case 'max':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['max'] === undefined)) || isDynamic) {\n var maxValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if (maxValue !== null && !isNaN(maxValue)) {\n this.setProperties(setValue(prop, maxValue, {}), !isDynamic);\n }\n }\n break;\n case 'step':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['step'] === undefined)) || isDynamic) {\n var stepValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if (stepValue !== null && !isNaN(stepValue)) {\n this.setProperties(setValue(prop, stepValue, {}), !isDynamic);\n }\n }\n break;\n case 'style':\n this.inputStyle = this.element.getAttribute(prop);\n break;\n case 'name':\n this.inputName = this.element.getAttribute(prop);\n break;\n default:\n {\n var value = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if ((value !== null && !isNaN(value)) || (prop === 'value')) {\n this.setProperties(setValue(prop, value, {}), true);\n }\n }\n break;\n }\n }\n }\n };\n NumericTextBox.prototype.updatePlaceholder = function () {\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n };\n NumericTextBox.prototype.initCultureFunc = function () {\n this.instance = new Internationalization(this.locale);\n };\n NumericTextBox.prototype.initCultureInfo = function () {\n this.cultureInfo.format = this.format;\n if (getValue('currency', this) !== null) {\n setValue('currency', this.currency, this.cultureInfo);\n this.setProperties({ currencyCode: this.currency }, true);\n }\n };\n /* Wrapper creation */\n NumericTextBox.prototype.createWrapper = function () {\n var updatedCssClassValue = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassValue = this.getNumericValidClassList(this.cssClass);\n }\n var inputObj = Input.createInput({\n element: this.element,\n floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.readonly,\n placeholder: this.placeholder,\n cssClass: updatedCssClassValue,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton,\n enabled: this.enabled\n }\n }, this.createElement);\n this.inputWrapper = inputObj;\n this.container = inputObj.container;\n this.container.setAttribute('class', ROOT + ' ' + this.container.getAttribute('class'));\n this.updateHTMLAttrToWrapper();\n if (this.readonly) {\n attributes(this.element, { 'aria-readonly': 'true' });\n }\n this.hiddenInput = (this.createElement('input', { attrs: { type: 'text',\n 'validateHidden': 'true', 'class': HIDDENELEMENT } }));\n this.inputName = this.inputName !== null ? this.inputName : this.element.id;\n this.element.removeAttribute('name');\n attributes(this.hiddenInput, { 'name': this.inputName });\n this.container.insertBefore(this.hiddenInput, this.container.childNodes[1]);\n this.updateDataAttribute(false);\n if (this.inputStyle !== null) {\n attributes(this.container, { 'style': this.inputStyle });\n }\n };\n NumericTextBox.prototype.updateDataAttribute = function (isDynamic) {\n var attr = {};\n if (!isDynamic) {\n for (var a = 0; a < this.element.attributes.length; a++) {\n attr[this.element.attributes[a].name] = this.element.getAttribute(this.element.attributes[a].name);\n }\n }\n else {\n attr = this.htmlAttributes;\n }\n for (var _i = 0, _a = Object.keys(attr); _i < _a.length; _i++) {\n var key = _a[_i];\n if (key.indexOf('data') === 0) {\n this.hiddenInput.setAttribute(key, attr[key]);\n }\n }\n };\n NumericTextBox.prototype.updateHTMLAttrToElement = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var pro = _a[_i];\n if (wrapperAttributes.indexOf(pro) < 0) {\n this.element.setAttribute(pro, this.htmlAttributes[pro]);\n }\n }\n }\n };\n NumericTextBox.prototype.updateCssClass = function (newClass, oldClass) {\n Input.setCssClass(this.getNumericValidClassList(newClass), [this.container], this.getNumericValidClassList(oldClass));\n };\n NumericTextBox.prototype.getNumericValidClassList = function (numericClassName) {\n var result = numericClassName;\n if (!isNullOrUndefined(numericClassName) && numericClassName !== '') {\n result = (numericClassName.replace(/\\s+/g, ' ')).trim();\n }\n return result;\n };\n NumericTextBox.prototype.updateHTMLAttrToWrapper = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var pro = _a[_i];\n if (wrapperAttributes.indexOf(pro) > -1) {\n if (pro === 'class') {\n var updatedClassValue = this.getNumericValidClassList(this.htmlAttributes[pro]);\n if (updatedClassValue !== '') {\n addClass([this.container], updatedClassValue.split(' '));\n }\n }\n else if (pro === 'style') {\n var numericStyle = this.container.getAttribute(pro);\n numericStyle = !isNullOrUndefined(numericStyle) ? (numericStyle + this.htmlAttributes[pro]) :\n this.htmlAttributes[pro];\n this.container.setAttribute(pro, numericStyle);\n }\n else {\n this.container.setAttribute(pro, this.htmlAttributes[pro]);\n }\n }\n }\n }\n };\n NumericTextBox.prototype.setElementWidth = function (width) {\n if (!isNullOrUndefined(width)) {\n if (typeof width === 'number') {\n this.container.style.width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n this.container.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));\n }\n }\n };\n /* Spinner creation */\n NumericTextBox.prototype.spinBtnCreation = function () {\n this.spinDown = Input.appendSpan(SPINICON + ' ' + SPINDOWN, this.container, this.createElement);\n attributes(this.spinDown, {\n 'title': this.l10n.getConstant('decrementTitle'),\n 'aria-label': this.l10n.getConstant('decrementTitle')\n });\n this.spinUp = Input.appendSpan(SPINICON + ' ' + SPINUP, this.container, this.createElement);\n attributes(this.spinUp, {\n 'title': this.l10n.getConstant('incrementTitle'),\n 'aria-label': this.l10n.getConstant('incrementTitle')\n });\n this.wireSpinBtnEvents();\n };\n NumericTextBox.prototype.validateMinMax = function () {\n if (!(typeof (this.min) === 'number' && !isNaN(this.min))) {\n this.setProperties({ min: -(Number.MAX_VALUE) }, true);\n }\n if (!(typeof (this.max) === 'number' && !isNaN(this.max))) {\n this.setProperties({ max: Number.MAX_VALUE }, true);\n }\n if (this.decimals !== null) {\n if (this.min !== -(Number.MAX_VALUE)) {\n this.setProperties({ min: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.min)) }, true);\n }\n if (this.max !== (Number.MAX_VALUE)) {\n this.setProperties({ max: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.max)) }, true);\n }\n }\n this.setProperties({ min: this.min > this.max ? this.max : this.min }, true);\n attributes(this.element, { 'aria-valuemin': this.min.toString(), 'aria-valuemax': this.max.toString() });\n };\n NumericTextBox.prototype.formattedValue = function (decimals, value) {\n return this.instance.getNumberFormat({\n maximumFractionDigits: decimals,\n minimumFractionDigits: decimals, useGrouping: false\n })(value);\n };\n NumericTextBox.prototype.validateStep = function () {\n if (this.decimals !== null) {\n this.setProperties({ step: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.step)) }, true);\n }\n };\n NumericTextBox.prototype.action = function (operation, event) {\n this.isInteract = true;\n var value = this.isFocused ? this.instance.getNumberParser({ format: 'n' })(this.element.value) : this.value;\n this.changeValue(this.performAction(value, this.step, operation));\n this.raiseChangeEvent(event);\n };\n NumericTextBox.prototype.checkErrorClass = function () {\n if (this.isValidState) {\n removeClass([this.container], ERROR);\n }\n else {\n addClass([this.container], ERROR);\n }\n attributes(this.element, { 'aria-invalid': this.isValidState ? 'false' : 'true' });\n };\n NumericTextBox.prototype.bindClearEvent = function () {\n if (this.showClearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler, this);\n }\n };\n NumericTextBox.prototype.resetHandler = function (e) {\n e.preventDefault();\n if (!(this.inputWrapper.clearButton.classList.contains('e-clear-icon-hide')) || this.inputWrapper.container.classList.contains('e-static-clear')) {\n this.clear(e);\n }\n this.isInteract = true;\n this.raiseChangeEvent(e);\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n NumericTextBox.prototype.clear = function (event) {\n this.setProperties({ value: null }, true);\n this.setElementValue('');\n this.hiddenInput.value = '';\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n NumericTextBox.prototype.resetFormHandler = function () {\n if (this.element.tagName === 'EJS-NUMERICTEXTBOX') {\n this.updateValue(null);\n }\n else {\n this.updateValue(this.inputEleValue);\n }\n };\n NumericTextBox.prototype.setSpinButton = function () {\n if (!isNullOrUndefined(this.spinDown)) {\n attributes(this.spinDown, {\n 'title': this.l10n.getConstant('decrementTitle'),\n 'aria-label': this.l10n.getConstant('decrementTitle')\n });\n }\n if (!isNullOrUndefined(this.spinUp)) {\n attributes(this.spinUp, {\n 'title': this.l10n.getConstant('incrementTitle'),\n 'aria-label': this.l10n.getConstant('incrementTitle')\n });\n }\n };\n NumericTextBox.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'focus', this.focusHandler, this);\n EventHandler.add(this.element, 'blur', this.focusOutHandler, this);\n EventHandler.add(this.element, 'keydown', this.keyDownHandler, this);\n EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);\n EventHandler.add(this.element, 'input', this.inputHandler, this);\n EventHandler.add(this.element, 'keypress', this.keyPressHandler, this);\n EventHandler.add(this.element, 'change', this.changeHandler, this);\n EventHandler.add(this.element, 'paste', this.pasteHandler, this);\n if (this.enabled) {\n this.bindClearEvent();\n if (this.formEle) {\n EventHandler.add(this.formEle, 'reset', this.resetFormHandler, this);\n }\n }\n };\n NumericTextBox.prototype.wireSpinBtnEvents = function () {\n /* bind spin button events */\n EventHandler.add(this.spinUp, Browser.touchStartEvent, this.mouseDownOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchStartEvent, this.mouseDownOnSpinner, this);\n EventHandler.add(this.spinUp, Browser.touchEndEvent, this.mouseUpOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchEndEvent, this.mouseUpOnSpinner, this);\n EventHandler.add(this.spinUp, Browser.touchMoveEvent, this.touchMoveOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchMoveEvent, this.touchMoveOnSpinner, this);\n };\n NumericTextBox.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'blur', this.focusOutHandler);\n EventHandler.remove(this.element, 'keyup', this.keyUpHandler);\n EventHandler.remove(this.element, 'input', this.inputHandler);\n EventHandler.remove(this.element, 'keydown', this.keyDownHandler);\n EventHandler.remove(this.element, 'keypress', this.keyPressHandler);\n EventHandler.remove(this.element, 'change', this.changeHandler);\n EventHandler.remove(this.element, 'paste', this.pasteHandler);\n if (this.formEle) {\n EventHandler.remove(this.formEle, 'reset', this.resetFormHandler);\n }\n };\n NumericTextBox.prototype.unwireSpinBtnEvents = function () {\n /* unbind spin button events */\n EventHandler.remove(this.spinUp, Browser.touchStartEvent, this.mouseDownOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchStartEvent, this.mouseDownOnSpinner);\n EventHandler.remove(this.spinUp, Browser.touchEndEvent, this.mouseUpOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchEndEvent, this.mouseUpOnSpinner);\n EventHandler.remove(this.spinUp, Browser.touchMoveEvent, this.touchMoveOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchMoveEvent, this.touchMoveOnSpinner);\n };\n NumericTextBox.prototype.changeHandler = function (event) {\n event.stopPropagation();\n if (!this.element.value.length) {\n this.setProperties({ value: null }, true);\n }\n var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n this.updateValue(parsedInput, event);\n };\n NumericTextBox.prototype.raiseChangeEvent = function (event) {\n if (this.prevValue !== this.value) {\n var eventArgs = {};\n this.changeEventArgs = { value: this.value, previousValue: this.prevValue, isInteracted: this.isInteract,\n isInteraction: this.isInteract, event: event };\n if (event) {\n this.changeEventArgs.event = event;\n }\n if (this.changeEventArgs.event === undefined) {\n this.changeEventArgs.isInteracted = false;\n this.changeEventArgs.isInteraction = false;\n }\n merge(eventArgs, this.changeEventArgs);\n this.prevValue = this.value;\n this.isInteract = false;\n this.elementPrevValue = this.element.value;\n this.preventChange = false;\n this.trigger('change', eventArgs);\n }\n };\n NumericTextBox.prototype.pasteHandler = function () {\n var _this = this;\n if (!this.enabled || this.readonly) {\n return;\n }\n var beforeUpdate = this.element.value;\n setTimeout(function () {\n if (!_this.numericRegex().test(_this.element.value)) {\n _this.setElementValue(beforeUpdate);\n }\n });\n };\n NumericTextBox.prototype.preventHandler = function () {\n var _this = this;\n var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);\n setTimeout(function () {\n if (_this.element.selectionStart > 0) {\n var currentPos = _this.element.selectionStart;\n var prevPos = _this.element.selectionStart - 1;\n var start = 0;\n var valArray = _this.element.value.split('');\n var numericObject = getNumericObject(_this.locale);\n var decimalSeparator = getValue('decimal', numericObject);\n var ignoreKeyCode = decimalSeparator.charCodeAt(0);\n if (_this.element.value[prevPos] === ' ' && _this.element.selectionStart > 0 && !iOS) {\n if (isNullOrUndefined(_this.prevVal)) {\n _this.element.value = _this.element.value.trim();\n }\n else if (prevPos !== 0) {\n _this.element.value = _this.prevVal;\n }\n else if (prevPos === 0) {\n _this.element.value = _this.element.value.trim();\n }\n _this.element.setSelectionRange(prevPos, prevPos);\n }\n else if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1])) &&\n _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) !== 45) {\n if ((valArray.indexOf(_this.element.value[_this.element.selectionStart - 1]) !==\n valArray.lastIndexOf(_this.element.value[_this.element.selectionStart - 1]) &&\n _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) === ignoreKeyCode) ||\n _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) !== ignoreKeyCode) {\n _this.element.value = _this.element.value.substring(0, prevPos) +\n _this.element.value.substring(currentPos, _this.element.value.length);\n _this.element.setSelectionRange(prevPos, prevPos);\n if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1])) && _this.element.selectionStart > 0\n && _this.element.value.length) {\n _this.preventHandler();\n }\n }\n }\n else if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 2])) && _this.element.selectionStart > 1 &&\n _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) !== 45) {\n if ((valArray.indexOf(_this.element.value[_this.element.selectionStart - 2]) !==\n valArray.lastIndexOf(_this.element.value[_this.element.selectionStart - 2]) &&\n _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) === ignoreKeyCode) ||\n _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) !== ignoreKeyCode) {\n _this.element.setSelectionRange(prevPos, prevPos);\n _this.nextEle = _this.element.value[_this.element.selectionStart];\n _this.cursorPosChanged = true;\n _this.preventHandler();\n }\n }\n if (_this.cursorPosChanged === true && _this.element.value[_this.element.selectionStart] === _this.nextEle &&\n isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1]))) {\n _this.element.setSelectionRange(_this.element.selectionStart + 1, _this.element.selectionStart + 1);\n _this.cursorPosChanged = false;\n _this.nextEle = null;\n }\n if (_this.element.value.trim() === '') {\n _this.element.setSelectionRange(start, start);\n }\n if (_this.element.selectionStart > 0) {\n if ((_this.element.value[_this.element.selectionStart - 1].charCodeAt(0) === 45) && _this.element.selectionStart > 1) {\n if (isNullOrUndefined(_this.prevVal)) {\n // eslint-disable-next-line no-self-assign\n _this.element.value = _this.element.value;\n }\n else {\n _this.element.value = _this.prevVal;\n }\n _this.element.setSelectionRange(_this.element.selectionStart, _this.element.selectionStart);\n }\n }\n _this.prevVal = _this.element.value;\n }\n });\n };\n NumericTextBox.prototype.keyUpHandler = function () {\n if (!this.enabled || this.readonly) {\n return;\n }\n var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);\n if (!iOS && Browser.isDevice) {\n this.preventHandler();\n }\n var parseValue = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n parseValue = parseValue === null || isNaN(parseValue) ? null : parseValue;\n this.hiddenInput.value = parseValue || parseValue === 0 ? parseValue.toString() : null;\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n NumericTextBox.prototype.inputHandler = function (event) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-this-alias\n var numerictextboxObj = this;\n if (!this.enabled || this.readonly) {\n return;\n }\n var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);\n var fireFox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n if ((fireFox || iOS) && Browser.isDevice) {\n this.preventHandler();\n }\n /* istanbul ignore next */\n if (this.isAngular\n && this.element.value !== getValue('decimal', getNumericObject(this.locale))\n && this.element.value !== getValue('minusSign', getNumericObject(this.locale))) {\n var parsedValue = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n parsedValue = isNaN(parsedValue) ? null : parsedValue;\n numerictextboxObj.localChange({ value: parsedValue });\n this.preventChange = true;\n }\n if (this.isVue) {\n var current = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n var previous = this.instance.getNumberParser({ format: 'n' })(this.elementPrevValue);\n var eventArgs = {\n event: event,\n value: (current === null || isNaN(current) ? null : current),\n previousValue: (previous === null || isNaN(previous) ? null : previous)\n };\n this.preventChange = true;\n this.elementPrevValue = this.element.value;\n this.trigger('input', eventArgs);\n }\n };\n NumericTextBox.prototype.keyDownHandler = function (event) {\n if (!this.readonly) {\n switch (event.keyCode) {\n case 38:\n event.preventDefault();\n this.action(INCREMENT, event);\n break;\n case 40:\n event.preventDefault();\n this.action(DECREMENT, event);\n break;\n default: break;\n }\n }\n };\n NumericTextBox.prototype.performAction = function (value, step, operation) {\n if (value === null || isNaN(value)) {\n value = 0;\n }\n var updatedValue = operation === INCREMENT ? value + step : value - step;\n updatedValue = this.correctRounding(value, step, updatedValue);\n return this.strictMode ? this.trimValue(updatedValue) : updatedValue;\n };\n NumericTextBox.prototype.correctRounding = function (value, step, result) {\n var floatExp = new RegExp('[,.](.*)');\n var floatValue = floatExp.test(value.toString());\n var floatStep = floatExp.test(step.toString());\n if (floatValue || floatStep) {\n var valueCount = floatValue ? floatExp.exec(value.toString())[0].length : 0;\n var stepCount = floatStep ? floatExp.exec(step.toString())[0].length : 0;\n var max = Math.max(valueCount, stepCount);\n return value = this.roundValue(result, max);\n }\n return result;\n };\n NumericTextBox.prototype.roundValue = function (result, precision) {\n precision = precision || 0;\n var divide = Math.pow(10, precision);\n return result *= divide, result = Math.round(result) / divide;\n };\n NumericTextBox.prototype.updateValue = function (value, event) {\n if (event) {\n this.isInteract = true;\n }\n if (value !== null && !isNaN(value)) {\n if (this.decimals) {\n value = this.roundNumber(value, this.decimals);\n }\n }\n this.changeValue(value === null || isNaN(value) ? null : this.strictMode ? this.trimValue(value) : value);\n /* istanbul ignore next */\n if (!this.isDynamicChange) {\n this.raiseChangeEvent(event);\n }\n };\n NumericTextBox.prototype.updateCurrency = function (prop, propVal) {\n setValue(prop, propVal, this.cultureInfo);\n this.updateValue(this.value);\n };\n NumericTextBox.prototype.changeValue = function (value) {\n if (!(value || value === 0)) {\n value = null;\n this.setProperties({ value: value }, true);\n }\n else {\n var numberOfDecimals = this.getNumberOfDecimals(value);\n this.setProperties({ value: this.roundNumber(value, numberOfDecimals) }, true);\n }\n this.modifyText();\n if (!this.strictMode) {\n this.validateState();\n }\n };\n NumericTextBox.prototype.modifyText = function () {\n if (this.value || this.value === 0) {\n var value = this.formatNumber();\n var elementValue = this.isFocused ? value : this.instance.getNumberFormat(this.cultureInfo)(this.value);\n this.setElementValue(elementValue);\n attributes(this.element, { 'aria-valuenow': value });\n this.hiddenInput.value = this.value.toString();\n if (this.value !== null && this.serverDecimalSeparator) {\n this.hiddenInput.value = this.hiddenInput.value.replace('.', this.serverDecimalSeparator);\n }\n }\n else {\n this.setElementValue('');\n this.element.removeAttribute('aria-valuenow');\n this.hiddenInput.value = null;\n }\n };\n NumericTextBox.prototype.setElementValue = function (val, element) {\n Input.setValue(val, (element ? element : this.element), this.floatLabelType, this.showClearButton);\n };\n NumericTextBox.prototype.validateState = function () {\n this.isValidState = true;\n if (this.value || this.value === 0) {\n this.isValidState = !(this.value > this.max || this.value < this.min);\n }\n this.checkErrorClass();\n };\n NumericTextBox.prototype.getNumberOfDecimals = function (value) {\n var numberOfDecimals;\n // eslint-disable-next-line no-useless-escape\n var EXPREGEXP = new RegExp('[eE][\\-+]?([0-9]+)');\n var valueString = value.toString();\n if (EXPREGEXP.test(valueString)) {\n var result = EXPREGEXP.exec(valueString);\n if (!isNullOrUndefined(result)) {\n valueString = value.toFixed(Math.min(parseInt(result[1], 10), 20));\n }\n }\n var decimalPart = valueString.split('.')[1];\n numberOfDecimals = !decimalPart || !decimalPart.length ? 0 : decimalPart.length;\n if (this.decimals !== null) {\n numberOfDecimals = numberOfDecimals < this.decimals ? numberOfDecimals : this.decimals;\n }\n return numberOfDecimals;\n };\n NumericTextBox.prototype.formatNumber = function () {\n var numberOfDecimals = this.getNumberOfDecimals(this.value);\n return this.instance.getNumberFormat({\n maximumFractionDigits: numberOfDecimals,\n minimumFractionDigits: numberOfDecimals, useGrouping: false\n })(this.value);\n };\n NumericTextBox.prototype.trimValue = function (value) {\n if (value > this.max) {\n return this.max;\n }\n if (value < this.min) {\n return this.min;\n }\n return value;\n };\n NumericTextBox.prototype.roundNumber = function (value, precision) {\n var result = value;\n var decimals = precision || 0;\n var result1 = result.toString().split('e');\n result = Math.round(Number(result1[0] + 'e' + (result1[1] ? (Number(result1[1]) + decimals) : decimals)));\n var result2 = result.toString().split('e');\n result = Number(result2[0] + 'e' + (result2[1] ? (Number(result2[1]) - decimals) : -decimals));\n return Number(result.toFixed(decimals));\n };\n NumericTextBox.prototype.cancelEvent = function (event) {\n event.preventDefault();\n return false;\n };\n NumericTextBox.prototype.keyPressHandler = function (event) {\n if (!this.enabled || this.readonly) {\n return true;\n }\n if (!Browser.isDevice && Browser.info.version === '11.0' && event.keyCode === 13) {\n var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n this.updateValue(parsedInput, event);\n return true;\n }\n if (event.which === 0 || event.metaKey || event.ctrlKey || event.keyCode === 8 || event.keyCode === 13) {\n return true;\n }\n var currentChar = String.fromCharCode(event.which);\n var text = this.element.value;\n text = text.substring(0, this.element.selectionStart) + currentChar + text.substring(this.element.selectionEnd);\n if (!this.numericRegex().test(text)) {\n event.preventDefault();\n event.stopPropagation();\n return false;\n }\n else {\n return true;\n }\n };\n NumericTextBox.prototype.numericRegex = function () {\n var numericObject = getNumericObject(this.locale);\n var decimalSeparator = getValue('decimal', numericObject);\n var fractionRule = '*';\n if (decimalSeparator === DECIMALSEPARATOR) {\n decimalSeparator = '\\\\' + decimalSeparator;\n }\n if (this.decimals === 0 && this.validateDecimalOnType) {\n return INTREGEXP;\n }\n if (this.decimals && this.validateDecimalOnType) {\n fractionRule = '{0,' + this.decimals + '}';\n }\n return new RegExp('^(-)?(((\\\\d+(' + decimalSeparator + '\\\\d' + fractionRule +\n ')?)|(' + decimalSeparator + '\\\\d' + fractionRule + ')))?$');\n };\n NumericTextBox.prototype.mouseWheel = function (event) {\n event.preventDefault();\n var delta;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var rawEvent = event;\n if (rawEvent.wheelDelta) {\n delta = rawEvent.wheelDelta / 120;\n }\n else if (rawEvent.detail) {\n delta = -rawEvent.detail / 3;\n }\n if (delta > 0) {\n this.action(INCREMENT, event);\n }\n else if (delta < 0) {\n this.action(DECREMENT, event);\n }\n this.cancelEvent(event);\n };\n NumericTextBox.prototype.focusHandler = function (event) {\n var _this = this;\n this.focusEventArgs = { event: event, value: this.value, container: this.container };\n this.trigger('focus', this.focusEventArgs);\n if (!this.enabled || this.readonly) {\n return;\n }\n this.isFocused = true;\n removeClass([this.container], ERROR);\n this.prevValue = this.value;\n if ((this.value || this.value === 0)) {\n var formatValue_1 = this.formatNumber();\n this.setElementValue(formatValue_1);\n if (!this.isPrevFocused) {\n if (!Browser.isDevice && Browser.info.version === '11.0') {\n this.element.setSelectionRange(0, formatValue_1.length);\n }\n else {\n var delay = (Browser.isDevice && Browser.isIos) ? 600 : 0;\n setTimeout(function () {\n _this.element.setSelectionRange(0, formatValue_1.length);\n }, delay);\n }\n }\n }\n if (!Browser.isDevice) {\n EventHandler.add(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel, this);\n }\n };\n NumericTextBox.prototype.focusOutHandler = function (event) {\n var _this = this;\n this.blurEventArgs = { event: event, value: this.value, container: this.container };\n this.trigger('blur', this.blurEventArgs);\n if (!this.enabled || this.readonly) {\n return;\n }\n if (this.isPrevFocused) {\n event.preventDefault();\n if (Browser.isDevice) {\n var value_1 = this.element.value;\n this.element.focus();\n this.isPrevFocused = false;\n var ele_1 = this.element;\n setTimeout(function () {\n _this.setElementValue(value_1, ele_1);\n }, 200);\n }\n }\n else {\n this.isFocused = false;\n if (!this.element.value.length) {\n this.setProperties({ value: null }, true);\n }\n var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n this.updateValue(parsedInput);\n if (!Browser.isDevice) {\n EventHandler.remove(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel);\n }\n }\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var focusEvent = document.createEvent('FocusEvent');\n focusEvent.initEvent('focusout', false, true);\n element.dispatchEvent(focusEvent);\n }\n };\n NumericTextBox.prototype.mouseDownOnSpinner = function (event) {\n var _this = this;\n if (this.isFocused) {\n this.isPrevFocused = true;\n event.preventDefault();\n }\n if (!this.getElementData(event)) {\n return;\n }\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var result = this.getElementData(event);\n var target = event.currentTarget;\n var action = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT;\n EventHandler.add(target, 'mouseleave', this.mouseUpClick, this);\n this.timeOut = setInterval(function () {\n _this.isCalled = true;\n _this.action(action, event);\n }, 150);\n EventHandler.add(document, 'mouseup', this.mouseUpClick, this);\n };\n NumericTextBox.prototype.touchMoveOnSpinner = function (event) {\n var target;\n if (event.type === \"touchmove\") {\n var touchEvent = event.touches;\n target = touchEvent.length && document.elementFromPoint(touchEvent[0].pageX, touchEvent[0].pageY);\n }\n else {\n target = document.elementFromPoint(event.clientX, event.clientY);\n }\n if (!(target.classList.contains(SPINICON))) {\n clearInterval(this.timeOut);\n }\n };\n NumericTextBox.prototype.mouseUpOnSpinner = function (event) {\n if (this.isPrevFocused) {\n this.element.focus();\n if (!Browser.isDevice) {\n this.isPrevFocused = false;\n }\n }\n if (!Browser.isDevice) {\n event.preventDefault();\n }\n if (!this.getElementData(event)) {\n return;\n }\n var target = event.currentTarget;\n var action = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT;\n EventHandler.remove(target, 'mouseleave', this.mouseUpClick);\n if (!this.isCalled) {\n this.action(action, event);\n }\n this.isCalled = false;\n EventHandler.remove(document, 'mouseup', this.mouseUpClick);\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n NumericTextBox.prototype.getElementData = function (event) {\n if ((event.which && event.which === 3) || (event.button && event.button === 2)\n || !this.enabled || this.readonly) {\n return false;\n }\n clearInterval(this.timeOut);\n return true;\n };\n NumericTextBox.prototype.floatLabelTypeUpdate = function () {\n Input.removeFloating(this.inputWrapper);\n var hiddenInput = this.hiddenInput;\n this.hiddenInput.remove();\n Input.addFloating(this.element, this.floatLabelType, this.placeholder, this.createElement);\n this.container.insertBefore(hiddenInput, this.container.childNodes[1]);\n };\n NumericTextBox.prototype.mouseUpClick = function (event) {\n event.stopPropagation();\n clearInterval(this.timeOut);\n this.isCalled = false;\n EventHandler.remove(this.spinUp, 'mouseleave', this.mouseUpClick);\n EventHandler.remove(this.spinDown, 'mouseleave', this.mouseUpClick);\n };\n /**\n * Increments the NumericTextBox value with the specified step value.\n *\n * @param {number} step - Specifies the value used to increment the NumericTextBox value.\n * if its not given then numeric value will be incremented based on the step property value.\n * @returns {void}\n */\n NumericTextBox.prototype.increment = function (step) {\n if (step === void 0) { step = this.step; }\n this.isInteract = false;\n this.changeValue(this.performAction(this.value, step, INCREMENT));\n this.raiseChangeEvent();\n };\n /**\n * Decrements the NumericTextBox value with specified step value.\n *\n * @param {number} step - Specifies the value used to decrement the NumericTextBox value.\n * if its not given then numeric value will be decremented based on the step property value.\n * @returns {void}\n */\n NumericTextBox.prototype.decrement = function (step) {\n if (step === void 0) { step = this.step; }\n this.isInteract = false;\n this.changeValue(this.performAction(this.value, step, DECREMENT));\n this.raiseChangeEvent();\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers.\n * Also it maintains the initial input element from the DOM.\n *\n * @method destroy\n * @returns {void}\n */\n NumericTextBox.prototype.destroy = function () {\n this.unwireEvents();\n detach(this.hiddenInput);\n if (this.showSpinButton) {\n this.unwireSpinBtnEvents();\n detach(this.spinUp);\n detach(this.spinDown);\n }\n var attrArray = ['aria-labelledby', 'role', 'autocomplete', 'aria-readonly',\n 'autocorrect', 'aria-disabled', 'aria-placeholder', 'autocapitalize',\n 'spellcheck', 'aria-autocomplete', 'tabindex', 'aria-valuemin',\n 'aria-valuemax', 'aria-live', 'aria-valuenow', 'aria-invalid'];\n for (var i = 0; i < attrArray.length; i++) {\n this.element.removeAttribute(attrArray[i]);\n }\n this.element.classList.remove('e-input');\n this.container.insertAdjacentElement('afterend', this.element);\n detach(this.container);\n _super.prototype.destroy.call(this);\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns */\n /**\n * Returns the value of NumericTextBox with the format applied to the NumericTextBox.\n *\n */\n NumericTextBox.prototype.getText = function () {\n return this.element.value;\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns */\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n NumericTextBox.prototype.focusIn = function () {\n if (document.activeElement !== this.element && this.enabled) {\n this.element.focus();\n addClass([this.container], [NUMERIC_FOCUS]);\n }\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n NumericTextBox.prototype.focusOut = function () {\n if (document.activeElement === this.element && this.enabled) {\n this.element.blur();\n removeClass([this.container], [NUMERIC_FOCUS]);\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets the properties to be maintained in the persisted state.\n *\n * @returns {string}\n */\n NumericTextBox.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Calls internally if any of the property value is changed.\n *\n * @param {NumericTextBoxModel} newProp - Returns the dynamic property value of the component.\n * @param {NumericTextBoxModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n NumericTextBox.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n this.setElementWidth(newProp.width);\n break;\n case 'cssClass':\n this.updateCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n case 'enabled':\n Input.setEnabled(newProp.enabled, this.element);\n break;\n case 'enableRtl':\n Input.setEnableRtl(newProp.enableRtl, [this.container]);\n break;\n case 'readonly':\n Input.setReadonly(newProp.readonly, this.element);\n if (this.readonly) {\n attributes(this.element, { 'aria-readonly': 'true' });\n }\n else {\n this.element.removeAttribute('aria-readonly');\n }\n break;\n case 'htmlAttributes':\n this.updateHTMLAttrToElement();\n this.updateHTMLAttrToWrapper();\n this.updateDataAttribute(true);\n this.checkAttributes(true);\n Input.validateInputType(this.container, this.element);\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.element);\n break;\n case 'step':\n this.step = newProp.step;\n this.validateStep();\n break;\n case 'showSpinButton':\n this.updateSpinButton(newProp);\n break;\n case 'showClearButton':\n this.updateClearButton(newProp);\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n this.floatLabelTypeUpdate();\n break;\n case 'value':\n this.isDynamicChange = (this.isAngular || this.isVue) && this.preventChange;\n this.updateValue(newProp.value);\n if (this.isDynamicChange) {\n this.preventChange = false;\n this.isDynamicChange = false;\n }\n break;\n case 'min':\n case 'max':\n setValue(prop, getValue(prop, newProp), this);\n this.validateMinMax();\n this.updateValue(this.value);\n break;\n case 'strictMode':\n this.strictMode = newProp.strictMode;\n this.updateValue(this.value);\n this.validateState();\n break;\n case 'locale':\n this.initCultureFunc();\n this.l10n.setLocale(this.locale);\n this.setSpinButton();\n this.updatePlaceholder();\n Input.setPlaceholder(this.placeholder, this.element);\n this.updateValue(this.value);\n break;\n case 'currency':\n {\n var propVal = getValue(prop, newProp);\n this.setProperties({ currencyCode: propVal }, true);\n this.updateCurrency(prop, propVal);\n }\n break;\n case 'currencyCode':\n {\n var propValue = getValue(prop, newProp);\n this.setProperties({ currency: propValue }, true);\n this.updateCurrency('currency', propValue);\n }\n break;\n case 'format':\n setValue(prop, getValue(prop, newProp), this);\n this.initCultureInfo();\n this.updateValue(this.value);\n break;\n case 'decimals':\n this.decimals = newProp.decimals;\n this.updateValue(this.value);\n }\n }\n };\n NumericTextBox.prototype.updateClearButton = function (newProp) {\n Input.setClearButton(newProp.showClearButton, this.element, this.inputWrapper, undefined, this.createElement);\n this.bindClearEvent();\n };\n NumericTextBox.prototype.updateSpinButton = function (newProp) {\n if (newProp.showSpinButton) {\n this.spinBtnCreation();\n }\n else {\n detach(this.spinUp);\n detach(this.spinDown);\n }\n };\n /**\n * Gets the component name\n *\n * @returns {string} Returns the component name.\n * @private\n */\n NumericTextBox.prototype.getModuleName = function () {\n return 'numerictextbox';\n };\n __decorate([\n Property('')\n ], NumericTextBox.prototype, \"cssClass\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"value\", void 0);\n __decorate([\n Property(-(Number.MAX_VALUE))\n ], NumericTextBox.prototype, \"min\", void 0);\n __decorate([\n Property(Number.MAX_VALUE)\n ], NumericTextBox.prototype, \"max\", void 0);\n __decorate([\n Property(1)\n ], NumericTextBox.prototype, \"step\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"placeholder\", void 0);\n __decorate([\n Property({})\n ], NumericTextBox.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(true)\n ], NumericTextBox.prototype, \"showSpinButton\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"readonly\", void 0);\n __decorate([\n Property(true)\n ], NumericTextBox.prototype, \"enabled\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property('n2')\n ], NumericTextBox.prototype, \"format\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"decimals\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"currency\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"currencyCode\", void 0);\n __decorate([\n Property(true)\n ], NumericTextBox.prototype, \"strictMode\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"validateDecimalOnType\", void 0);\n __decorate([\n Property('Never')\n ], NumericTextBox.prototype, \"floatLabelType\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"blur\", void 0);\n NumericTextBox = __decorate([\n NotifyPropertyChanges\n ], NumericTextBox);\n return NumericTextBox;\n}(Component));\nexport { NumericTextBox };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, rippleEffect, NotifyPropertyChanges, Property, closest } from '@syncfusion/ej2-base';\nimport { addClass, getInstance, getUniqueID, isRippleEnabled, removeClass, attributes, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { detach, Event, EventHandler, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { wrapperInitialize, rippleMouseHandler } from './../common/common';\nvar LABEL = 'e-label';\nvar RIPPLE = 'e-ripple-container';\nvar RTL = 'e-rtl';\nvar WRAPPER = 'e-radio-wrapper';\nvar ATTRIBUTES = ['title', 'class', 'style', 'disabled', 'readonly', 'name', 'value'];\n/**\n * The RadioButton is a graphical user interface element that allows you to select one option from the choices.\n * It contains checked and unchecked states.\n * ```html\n *
\n * \n * ```\n */\nvar RadioButton = /** @class */ (function (_super) {\n __extends(RadioButton, _super);\n /**\n * Constructor for creating the widget\n *\n * @private\n * @param {RadioButtonModel} options - Specifies Radio button model\n * @param {string | HTMLInputElement} element - Specifies target element\n */\n function RadioButton(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isFocused = false;\n return _this;\n }\n RadioButton_1 = RadioButton;\n RadioButton.prototype.changeHandler = function (event) {\n this.checked = true;\n this.dataBind();\n var value = this.element.getAttribute('value');\n value = this.isVue && value ? this.element.value : this.value;\n this.trigger('change', { value: value, event: event });\n if (this.tagName === 'EJS-RADIOBUTTON') {\n event.stopPropagation();\n }\n };\n RadioButton.prototype.updateChange = function () {\n var input;\n var instance;\n var radioGrp = this.getRadioGroup();\n for (var i = 0; i < radioGrp.length; i++) {\n input = radioGrp[i];\n if (input !== this.element) {\n instance = getInstance(input, RadioButton_1);\n instance.checked = false;\n if (this.tagName === 'EJS-RADIOBUTTON') {\n instance.angularValue = this.value;\n }\n }\n }\n };\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n RadioButton.prototype.destroy = function () {\n var _this = this;\n var radioWrap = this.element.parentElement;\n _super.prototype.destroy.call(this);\n if (!this.disabled) {\n this.unWireEvents();\n }\n if (this.tagName === 'INPUT') {\n if (radioWrap.parentNode) {\n radioWrap.parentNode.insertBefore(this.element, radioWrap);\n }\n detach(radioWrap);\n this.element.checked = false;\n ['name', 'value', 'disabled'].forEach(function (key) {\n _this.element.removeAttribute(key);\n });\n }\n else {\n ['role', 'aria-checked', 'class'].forEach(function (key) {\n radioWrap.removeAttribute(key);\n });\n radioWrap.innerHTML = '';\n }\n };\n RadioButton.prototype.focusHandler = function () {\n this.isFocused = true;\n };\n RadioButton.prototype.focusOutHandler = function () {\n var label = this.getLabel();\n if (label) {\n label.classList.remove('e-focus');\n }\n };\n RadioButton.prototype.getModuleName = function () {\n return 'radio';\n };\n /**\n * To get the value of selected radio button in a group.\n *\n * @method getSelectedValue\n * @returns {string} - Selected Value\n */\n RadioButton.prototype.getSelectedValue = function () {\n var input;\n var radioGrp = this.getRadioGroup();\n for (var i = 0, len = radioGrp.length; i < len; i++) {\n input = radioGrp[i];\n if (input.checked) {\n return input.value;\n }\n }\n return '';\n };\n RadioButton.prototype.getRadioGroup = function () {\n return document.querySelectorAll('input.e-radio[name=\"' + this.element.getAttribute('name') + '\"]');\n };\n /**\n * Gets the properties to be maintained in the persistence state.\n *\n * @private\n * @returns {string} - Persist Data\n */\n RadioButton.prototype.getPersistData = function () {\n return this.addOnPersist(['checked']);\n };\n RadioButton.prototype.getWrapper = function () {\n if (this.element) {\n return this.element.parentElement;\n }\n else {\n return null;\n }\n };\n RadioButton.prototype.getLabel = function () {\n if (this.element) {\n return this.element.nextElementSibling;\n }\n else {\n return null;\n }\n };\n RadioButton.prototype.initialize = function () {\n if (isNullOrUndefined(this.initialCheckedValue)) {\n this.initialCheckedValue = this.checked;\n }\n this.initWrapper();\n this.updateHtmlAttribute();\n if (this.name) {\n this.element.setAttribute('name', this.name);\n }\n var value = this.element.getAttribute('value');\n if (this.isVue && value && value === this.value) {\n this.checked = true;\n }\n if (this.isVue ? this.value && !value : this.value) {\n this.element.setAttribute('value', this.value);\n }\n if (this.checked) {\n this.element.checked = true;\n }\n if (this.disabled) {\n this.setDisabled();\n }\n };\n RadioButton.prototype.initWrapper = function () {\n var rippleSpan;\n var wrapper = this.element.parentElement;\n if (!wrapper.classList.contains(WRAPPER)) {\n wrapper = this.createElement('div', { className: WRAPPER });\n this.element.parentNode.insertBefore(wrapper, this.element);\n }\n var label = this.createElement('label', { attrs: { for: this.element.id } });\n wrapper.appendChild(this.element);\n wrapper.appendChild(label);\n if (isRippleEnabled) {\n rippleSpan = this.createElement('span', { className: (RIPPLE) });\n label.appendChild(rippleSpan);\n rippleEffect(rippleSpan, {\n duration: 400,\n isCenterRipple: true\n });\n }\n wrapper.classList.add('e-wrapper');\n if (this.enableRtl) {\n label.classList.add(RTL);\n }\n if (this.cssClass) {\n addClass([wrapper], this.cssClass.split(' '));\n }\n if (this.label) {\n this.setText(this.label);\n }\n };\n RadioButton.prototype.keyUpHandler = function () {\n if (this.isFocused) {\n this.getLabel().classList.add('e-focus');\n }\n };\n RadioButton.prototype.labelRippleHandler = function (e) {\n var ripple = this.getLabel().getElementsByClassName(RIPPLE)[0];\n rippleMouseHandler(e, ripple);\n };\n RadioButton.prototype.formResetHandler = function () {\n this.checked = this.initialCheckedValue;\n if (this.initialCheckedValue) {\n attributes(this.element, { 'checked': 'true' });\n }\n };\n /**\n * Called internally if any of the property value changes.\n *\n * @private\n * @param {RadioButtonModel} newProp - Specifies New Properties\n * @param {RadioButtonModel} oldProp - Specifies Old Properties\n * @returns {void}\n */\n RadioButton.prototype.onPropertyChanged = function (newProp, oldProp) {\n var wrap = this.getWrapper();\n var label = this.getLabel();\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'checked':\n if (newProp.checked) {\n this.updateChange();\n }\n this.element.checked = newProp.checked;\n break;\n case 'disabled':\n if (newProp.disabled) {\n this.setDisabled();\n this.unWireEvents();\n }\n else {\n this.element.disabled = false;\n this.wireEvents();\n }\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([wrap], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([wrap], newProp.cssClass.split(' '));\n }\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n label.classList.add(RTL);\n }\n else {\n label.classList.remove(RTL);\n }\n break;\n case 'label':\n this.setText(newProp.label);\n break;\n case 'labelPosition':\n if (newProp.labelPosition === 'Before') {\n label.classList.add('e-right');\n }\n else {\n label.classList.remove('e-right');\n }\n break;\n case 'name':\n this.element.setAttribute('name', newProp.name);\n break;\n case 'value':\n if (!isNullOrUndefined(this.htmlAttributes) && this.htmlAttributes.value) {\n break;\n }\n this.element.setAttribute('value', newProp.value);\n break;\n case 'htmlAttributes':\n this.updateHtmlAttribute();\n break;\n }\n }\n };\n /**\n * Initialize checked Property, Angular and React and Unique ID support.\n *\n * @private\n * @returns {void}\n */\n RadioButton.prototype.preRender = function () {\n var element = this.element;\n this.formElement = closest(this.element, 'form');\n this.tagName = this.element.tagName;\n element = wrapperInitialize(this.createElement, 'EJS-RADIOBUTTON', 'radio', element, WRAPPER, 'radio');\n this.element = element;\n if (this.element.getAttribute('type') !== 'radio') {\n this.element.setAttribute('type', 'radio');\n }\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n if (this.tagName === 'EJS-RADIOBUTTON') {\n var formControlName = this.element.getAttribute('formcontrolname');\n if (formControlName) {\n this.setProperties({ 'name': formControlName }, true);\n this.element.setAttribute('name', formControlName);\n }\n }\n };\n /**\n * Initialize the control rendering\n *\n * @private\n * @returns {void}\n */\n RadioButton.prototype.render = function () {\n this.initialize();\n if (!this.disabled) {\n this.wireEvents();\n }\n this.renderComplete();\n };\n RadioButton.prototype.setDisabled = function () {\n this.element.disabled = true;\n };\n RadioButton.prototype.setText = function (text) {\n var label = this.getLabel();\n var textLabel = label.getElementsByClassName(LABEL)[0];\n if (textLabel) {\n textLabel.textContent = text;\n }\n else {\n text = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(text) : text;\n textLabel = this.createElement('span', { className: LABEL, innerHTML: text });\n label.appendChild(textLabel);\n }\n if (this.labelPosition === 'Before') {\n this.getLabel().classList.add('e-right');\n }\n else {\n this.getLabel().classList.remove('e-right');\n }\n };\n RadioButton.prototype.updateHtmlAttribute = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var key = _a[_i];\n if (ATTRIBUTES.indexOf(key) > -1) {\n var wrapper = this.element.parentElement;\n if (key === 'class') {\n addClass([wrapper], this.htmlAttributes[key].split(' '));\n }\n else if (key === 'title' || key === 'style') {\n wrapper.setAttribute(key, this.htmlAttributes[key]);\n }\n else {\n this.element.setAttribute(key, this.htmlAttributes[key]);\n }\n }\n }\n }\n };\n RadioButton.prototype.unWireEvents = function () {\n var label = this.getLabel();\n EventHandler.remove(this.element, 'change', this.changeHandler);\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'focusout', this.focusOutHandler);\n EventHandler.remove(this.element, 'keyup', this.keyUpHandler);\n var rippleLabel = label.getElementsByClassName(LABEL)[0];\n if (rippleLabel) {\n EventHandler.remove(rippleLabel, 'mousedown', this.labelRippleHandler);\n EventHandler.remove(rippleLabel, 'mouseup', this.labelRippleHandler);\n }\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n };\n RadioButton.prototype.wireEvents = function () {\n var label = this.getLabel();\n EventHandler.add(this.element, 'change', this.changeHandler, this);\n EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);\n EventHandler.add(this.element, 'focus', this.focusHandler, this);\n EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);\n var rippleLabel = label.getElementsByClassName(LABEL)[0];\n if (rippleLabel) {\n EventHandler.add(rippleLabel, 'mousedown', this.labelRippleHandler, this);\n EventHandler.add(rippleLabel, 'mouseup', this.labelRippleHandler, this);\n }\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);\n }\n };\n /**\n * Click the RadioButton element\n * its native method\n *\n * @public\n * @returns {void}\n */\n RadioButton.prototype.click = function () {\n this.element.click();\n };\n /**\n * Sets the focus to RadioButton\n * its native method\n *\n * @public\n * @returns {void}\n */\n RadioButton.prototype.focusIn = function () {\n this.element.focus();\n };\n var RadioButton_1;\n __decorate([\n Event()\n ], RadioButton.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], RadioButton.prototype, \"created\", void 0);\n __decorate([\n Property(false)\n ], RadioButton.prototype, \"checked\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], RadioButton.prototype, \"disabled\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"label\", void 0);\n __decorate([\n Property('After')\n ], RadioButton.prototype, \"labelPosition\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"name\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"value\", void 0);\n __decorate([\n Property(false)\n ], RadioButton.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property({})\n ], RadioButton.prototype, \"htmlAttributes\", void 0);\n RadioButton = RadioButton_1 = __decorate([\n NotifyPropertyChanges\n ], RadioButton);\n return RadioButton;\n}(Component));\nexport { RadioButton };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, Property, NotifyPropertyChanges, Event, Browser } from '@syncfusion/ej2-base';\nimport { getDefaultDateObject, getValue, cldrData, L10n, isNullOrUndefined, removeClass, addClass } from '@syncfusion/ej2-base';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport { NumericTextBox } from '@syncfusion/ej2-inputs';\nimport { DatePicker } from '@syncfusion/ej2-calendars';\nimport { Button, RadioButton } from '@syncfusion/ej2-buttons';\nimport { EventHandler, classList } from '@syncfusion/ej2-base';\nimport { extractObjectFromRule, generate, generateSummary, getRecurrenceStringFromDate, getCalendarUtil } from './date-generator';\nimport { capitalizeFirstWord } from '../schedule/base/util';\nvar HEADER = 'e-editor';\nvar INPUTWARAPPER = 'e-input-wrapper';\nvar INPUTWARAPPERSIDE = 'e-input-wrapper-side';\nvar REPEATELEMENT = 'e-repeat-element';\nvar REPEATINTERVAL = 'e-repeat-interval';\nvar INTERVALCLASS = 'e-interval';\nvar DAYWRAPPER = 'e-days';\nvar WEEKWRAPPER = 'e-non-week';\nvar WEEKPOSITION = 'e-week-position';\nvar YEAREXPANDERWRAPPER = 'e-year-expander';\nvar YEAREXPANDERELEMENT = 'e-year-expander-element';\nvar MONETHEXPANDERWRAPPER = 'e-month-expander';\nvar MONETHEXPANDWRAPPER = 'e-month-expand-wrapper';\nvar MONTHEXPANDERELEMENT = 'e-month-expander-element';\nvar MONTHEXPANDERCHECKBOXWRAPPER = 'e-month-expander-checkbox-wrapper';\nvar FORMLEFT = 'e-form-left';\nvar FORMRIGHT = 'e-form-right';\nvar MONTHDAYWRAPPER = 'e-month-day';\nvar MONTHEXPANNDERELEM = 'e-month-expander-wrapper';\nvar MONTHPOS = 'e-month-pos';\nvar MONTHWEEK = 'e-month-week';\nvar ENDON = 'e-end-on';\nvar MONTHEXPANDERLABEL = 'e-month-expander-label';\nvar WEEKEXPANDERLABEL = 'e-week-expander-label';\nvar ENDONLABEL = 'e-end-on-label';\nvar ENDONLEFT = 'e-end-on-left';\nvar MONTHDAYELEMENT = 'e-monthday-element';\nvar ENDONELEMENT = 'e-end-on-element';\nvar ENDONDATE = 'e-end-on-date';\nvar UNTILDATE = 'e-until-date';\nvar ENDONCOUNTWRAPPER = 'e-end-on-count';\nvar ENDONCOUNT = 'e-recurrence-count';\nvar HIDEWRAPPER = 'e-hide-recurrence-element';\nvar RTLCLASS = 'e-rtl';\nvar PRIMARY = 'e-primary';\nvar ACTIVE = 'e-active';\nvar RECURRENCETABLE = 'e-recurrence-table';\nvar REPEATCONTENT = 'e-repeat-content';\nvar REPEATCONTENTWRAPPER = 'e-repeat-content-wrapper';\nvar NONE = 'none';\nvar DAILY = 'daily';\nvar WEEKLY = 'weekly';\nvar MONTHLY = 'monthly';\nvar YEARLY = 'yearly';\nvar NEVER = 'never';\nvar UNTIL = 'until';\nvar COUNT = 'count';\nvar TEXTFIELD = 'text';\nvar VALUEFIELD = 'value';\nvar LAST = 'last';\nvar REPEAT = 'repeat';\nvar REPEATEVERY = 'repeatEvery';\nvar ON = 'on';\nvar END = 'end';\nvar RADIOLABEL = 'onDay';\nvar RULEUNTIL = 'UNTIL';\nvar RULEBYDAY = 'BYDAY';\nvar RULEBYMONTHDAY = 'BYMONTHDAY';\nvar RULEBYMONTH = 'BYMONTH';\nvar RULEINTERVAL = 'INTERVAL';\nvar RULECOUNT = 'COUNT';\nvar RULESETPOS = 'BYSETPOS';\nvar RULEFREQ = 'FREQ';\nvar RULEDAILY = 'DAILY';\nvar RULEWEEKLY = 'WEEKLY';\nvar RULEMONTHLY = 'MONTHLY';\nvar RULEYEARLY = 'YEARLY';\nvar RULESUNDAY = 'SU';\nvar RULEMONDAY = 'MO';\nvar RULETUESDAY = 'TU';\nvar RULEWEDNESDAY = 'WE';\nvar RULETHURSDAY = 'TH';\nvar RULEFRIDAY = 'FR';\nvar RULESATURDAY = 'SA';\nvar KEYSUNDAY = 'sun';\nvar KEYMONDAY = 'mon';\nvar KEYTUESDAY = 'tue';\nvar KEYWEDNESDAY = 'wed';\nvar KEYTHURSDAY = 'thu';\nvar KEYFRIDAY = 'fri';\nvar KEYSATURDAY = 'sat';\nvar EQUAL = '=';\nvar SEMICOLON = ';';\nvar COMMA = ',';\nvar FIRST = 'first';\nvar SECOND = 'second';\nvar THIRD = 'third';\nvar FOURTH = 'fourth';\nvar contentType = {\n none: '',\n daily: 'days',\n weekly: 'weeks',\n monthly: 'months',\n yearly: 'years'\n};\nvar valueData = {\n 'sun': RULESUNDAY,\n 'mon': RULEMONDAY,\n 'tue': RULETUESDAY,\n 'wed': RULEWEDNESDAY,\n 'thu': RULETHURSDAY,\n 'fri': RULEFRIDAY,\n 'sat': RULESATURDAY\n};\nvar neverClassList = [DAYWRAPPER, WEEKWRAPPER, ENDON, INTERVALCLASS, YEAREXPANDERWRAPPER, MONETHEXPANDERWRAPPER];\nvar weekClassList = [WEEKWRAPPER];\nvar monthClassList = [DAYWRAPPER, YEAREXPANDERWRAPPER];\nvar yearClassList = [DAYWRAPPER];\nvar dailyClassList = [DAYWRAPPER, WEEKWRAPPER, YEAREXPANDERWRAPPER, MONETHEXPANDERWRAPPER];\nvar noEndClassList = [ENDONDATE, ENDONCOUNTWRAPPER];\nvar endOnCountClassList = [ENDONDATE];\nvar endOnDateClassList = [ENDONCOUNTWRAPPER];\n/**\n * Represents the RecurrenceEditor component.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar RecurrenceEditor = /** @class */ (function (_super) {\n __extends(RecurrenceEditor, _super);\n /**\n * Constructor for creating the widget\n *\n * @param {RecurrenceEditorModel} options Accepts the recurrence editor model properties to initiate the rendering\n * @param {string | HTMLElement} element Accepts the DOM element reference\n */\n function RecurrenceEditor(options, element) {\n var _this = _super.call(this, options, element) || this;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n _this.defaultLocale = {\n none: 'None',\n daily: 'Daily',\n weekly: 'Weekly',\n monthly: 'Monthly',\n month: 'Month',\n yearly: 'Yearly',\n never: 'Never',\n until: 'Until',\n count: 'Count',\n first: 'First',\n second: 'Second',\n third: 'Third',\n fourth: 'Fourth',\n last: 'Last',\n repeat: 'Repeat',\n repeatEvery: 'Repeat every',\n on: 'Repeat On',\n end: 'End',\n onDay: 'Day',\n days: 'Day(s)',\n weeks: 'Week(s)',\n months: 'Month(s)',\n years: 'Year(s)',\n every: 'every',\n summaryTimes: 'time(s)',\n summaryOn: 'on',\n summaryUntil: 'until',\n summaryRepeat: 'Repeats',\n summaryDay: 'day(s)',\n summaryWeek: 'week(s)',\n summaryMonth: 'month(s)',\n summaryYear: 'year(s)',\n monthWeek: 'Month Week',\n monthPosition: 'Month Position',\n monthExpander: 'Month Expander',\n yearExpander: 'Year Expander',\n repeatInterval: 'Repeat Interval'\n };\n _this.renderStatus = false;\n _this.dayButtons = [];\n _this.monthButtons = [];\n return _this;\n }\n RecurrenceEditor.prototype.startState = function (freq, endOn, startDate) {\n this.showFormElement();\n this.updateForm(freq);\n this.freshOnEndForm();\n this.updateEndOnForm(endOn);\n this.selectMonthDay(startDate);\n this.updateUntilDate(startDate);\n this.onMonthDay.setProperties({ checked: true });\n };\n RecurrenceEditor.prototype.preRender = function () {\n this.localeObj = new L10n(this.getModuleName(), this.defaultLocale, this.locale);\n this.calendarUtil = getCalendarUtil(this.calendarMode);\n };\n RecurrenceEditor.prototype.applyCustomClass = function (cssClass) {\n if (cssClass) {\n addClass([this.element], cssClass.split(' '));\n }\n };\n RecurrenceEditor.prototype.initialize = function () {\n addClass([this.element], 'e-' + this.getModuleName());\n this.renderComponent();\n if (!isNullOrUndefined(this.value) && this.value !== '') {\n this.setRecurrenceRule(this.value);\n }\n else {\n if (!isNullOrUndefined(this.repeatType.value)) {\n this.startState(this.repeatType.value.toString().toUpperCase(), NEVER, this.startDate);\n this.updateForm(this.repeatType.value.toString());\n }\n if (this.selectedType > 0) {\n this.setProperties({ value: this.getRecurrenceRule() }, false);\n }\n }\n this.applyCustomClass(this.cssClass);\n };\n RecurrenceEditor.prototype.triggerChangeEvent = function () {\n var _this = this;\n if (this.renderStatus) {\n var value = this.getRecurrenceRule();\n this.trigger('change', { value: value }, function (args) { return _this.setProperties({ value: args.value }, false); });\n }\n };\n RecurrenceEditor.prototype.resetDayButton = function () {\n var elements = [].slice.call(this.element.querySelectorAll('.' + DAYWRAPPER + ' button'));\n elements.forEach(function (element) { return removeClass([element], [ACTIVE, PRIMARY]); });\n };\n RecurrenceEditor.prototype.daySelection = function (dayIndex) {\n this.resetDayButton();\n var days = [0, 1, 2, 3, 4, 5, 6];\n this.rotateArray(days, this.firstDayOfWeek);\n var element = this.element.querySelector('.' + DAYWRAPPER + ' button[data-index=\"' + days.indexOf(dayIndex) + '\"]');\n if (element) {\n addClass([element], [ACTIVE, PRIMARY]);\n }\n };\n RecurrenceEditor.prototype.rtlClass = function (status) {\n if (status) {\n addClass([this.element], RTLCLASS);\n }\n else {\n removeClass([this.element], RTLCLASS);\n }\n };\n RecurrenceEditor.prototype.updateUntilDate = function (date) {\n var tempDate = new Date(date.getTime());\n tempDate.setDate(tempDate.getDate() + 60);\n this.untilDateObj.setProperties({ value: tempDate });\n };\n RecurrenceEditor.prototype.selectMonthDay = function (date) {\n var weekday = [KEYSUNDAY, KEYMONDAY, KEYTUESDAY, KEYWEDNESDAY, KEYTHURSDAY, KEYFRIDAY, KEYSATURDAY];\n this.monthDate.setProperties({ value: this.calendarUtil.getDate(date) });\n this.monthWeekDays.setProperties({ value: valueData[weekday[date.getDay()]] });\n this.monthValue.setProperties({ value: '' + this.calendarUtil.getMonth(date) });\n this.monthWeekPos.setProperties({ value: this.getDayPosition(date) });\n this.daySelection(date.getDay());\n };\n RecurrenceEditor.prototype.updateForm = function (state) {\n var _this = this;\n this.repeatType.setProperties({ value: state });\n var end = this.element.querySelector('.' + ENDON);\n if (state === DAILY) {\n classList(end, [FORMLEFT], [FORMRIGHT]);\n }\n else {\n classList(end, [FORMRIGHT], [FORMLEFT]);\n }\n switch (state) {\n case NONE:\n neverClassList.forEach(function (className) { return addClass([_this.element.querySelector('.' + className)], HIDEWRAPPER); });\n break;\n case WEEKLY:\n weekClassList.forEach(function (className) { return addClass([_this.element.querySelector('.' + className)], HIDEWRAPPER); });\n break;\n case MONTHLY:\n monthClassList.forEach(function (className) { return addClass([_this.element.querySelector('.' + className)], HIDEWRAPPER); });\n break;\n case YEARLY:\n yearClassList.forEach(function (className) { return addClass([_this.element.querySelector('.' + className)], HIDEWRAPPER); });\n break;\n case DAILY:\n dailyClassList.forEach(function (className) { return addClass([_this.element.querySelector('.' + className)], HIDEWRAPPER); });\n break;\n }\n };\n RecurrenceEditor.prototype.updateEndOnForm = function (state) {\n var _this = this;\n this.endType.setProperties({ value: state });\n switch (state) {\n case NEVER:\n noEndClassList.forEach(function (className) { return addClass([_this.element.querySelector('.' + className)], HIDEWRAPPER); });\n break;\n case UNTIL:\n endOnDateClassList.forEach(function (className) { return addClass([_this.element.querySelector('.' + className)], HIDEWRAPPER); });\n break;\n case COUNT:\n endOnCountClassList.forEach(function (className) { return addClass([_this.element.querySelector('.' + className)], HIDEWRAPPER); });\n break;\n }\n };\n RecurrenceEditor.prototype.freshOnEndForm = function () {\n var _this = this;\n noEndClassList.forEach(function (className) {\n var element = _this.element.querySelector('.' + className);\n if (element) {\n removeClass([element], HIDEWRAPPER);\n }\n });\n };\n RecurrenceEditor.prototype.showFormElement = function () {\n var _this = this;\n neverClassList.forEach(function (className) {\n var hideElement = _this.element.querySelector('.' + className);\n if (hideElement) {\n removeClass([hideElement], HIDEWRAPPER);\n }\n });\n };\n RecurrenceEditor.prototype.renderDropdowns = function () {\n var _this = this;\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var self = this;\n this.repeatType = new DropDownList({\n //set the data to dataSource property\n dataSource: this.getRepeatData(),\n floatLabelType: 'Always',\n enableRtl: this.enableRtl,\n index: this.selectedType,\n fields: {\n text: TEXTFIELD,\n value: VALUEFIELD\n },\n placeholder: this.localeObj.getConstant(REPEAT),\n htmlAttributes: { 'title': this.localeObj.getConstant(REPEAT) },\n change: function (args) {\n self.setProperties({ selectedType: _this.frequencies.indexOf(args.value) }, false);\n self.element.querySelector('.' + REPEATCONTENT).innerHTML =\n self.localeObj.getConstant(contentType[args.value]);\n self.showFormElement();\n self.updateForm(args.value);\n self.resetFormValues();\n self.triggerChangeEvent();\n }\n });\n // set placeholder to DropDownList input element\n this.repeatType.appendTo(this.element.querySelector('.' + REPEATELEMENT));\n this.endType = new DropDownList({\n dataSource: this.getEndData(),\n popupWidth: this.getPopupWidth(),\n enableRtl: this.enableRtl,\n index: 1,\n fields: {\n text: TEXTFIELD,\n value: VALUEFIELD\n },\n change: function (args) {\n self.freshOnEndForm();\n self.updateEndOnForm(args.value);\n self.resetFormValues();\n self.triggerChangeEvent();\n }\n });\n this.endType.appendTo(this.element.querySelector('.' + ENDONELEMENT));\n // eslint-disable-next-line @typescript-eslint/ban-types\n var renderDropDownList = function (dropDownData) {\n return new DropDownList({\n dataSource: dropDownData,\n popupWidth: _this.getPopupWidth(),\n enableRtl: _this.enableRtl,\n fields: {\n text: TEXTFIELD,\n value: VALUEFIELD\n },\n index: 1,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n change: function (args) {\n self.onWeekDay.setProperties({ checked: true });\n self.resetFormValues();\n self.triggerChangeEvent();\n }\n });\n };\n this.monthWeekPos = renderDropDownList(this.getMonthPosData());\n this.monthWeekPos.appendTo(this.element.querySelector('.' + MONTHPOS));\n this.monthWeekDays = renderDropDownList(this.getDayData('wide'));\n this.monthWeekDays.appendTo(this.element.querySelector('.' + MONTHWEEK));\n this.monthValue = new DropDownList({\n dataSource: this.getMonthData(),\n fields: {\n text: TEXTFIELD,\n value: VALUEFIELD\n },\n enableRtl: this.enableRtl,\n index: 7,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n change: function (args) {\n self.resetFormValues();\n self.triggerChangeEvent();\n }\n });\n this.monthValue.appendTo(this.element.querySelector('.' + YEAREXPANDERELEMENT));\n };\n RecurrenceEditor.prototype.setDefaultValue = function () {\n var formelement = [].slice.call(this.element.querySelectorAll('.e-control .e-numerictextbox'));\n for (var _i = 0, formelement_1 = formelement; _i < formelement_1.length; _i++) {\n var element = formelement_1[_i];\n var instance = element.ej2_instances[0];\n if (instance.element.classList.contains(REPEATINTERVAL)) {\n instance.value = 1;\n instance.dataBind();\n }\n else if (instance.element.classList.contains(ENDONCOUNT)) {\n instance.value = 10;\n instance.dataBind();\n }\n }\n };\n RecurrenceEditor.prototype.resetFormValues = function () {\n var recurreneElement = [].slice.call(this.element.querySelectorAll('.e-control [type=\"text\"]'));\n for (var _i = 0, recurreneElement_1 = recurreneElement; _i < recurreneElement_1.length; _i++) {\n var element = recurreneElement_1[_i];\n var instance = void 0;\n if (element.classList.contains('e-datepicker')) {\n instance = element.ej2_instances[0];\n if (instance.value) {\n // eslint-disable-next-line no-self-assign\n instance.value = instance.value;\n instance.dataBind();\n }\n else {\n this.updateUntilDate(this.startDate);\n }\n }\n else if (element.classList.contains('e-dropdownlist')) {\n instance = element.ej2_instances[0];\n instance.index = instance.index || 0;\n instance.dataBind();\n }\n else if (element.classList.contains('e-numerictextbox')) {\n instance = element.ej2_instances[0];\n var value = void 0;\n if (instance.element.classList.contains(REPEATINTERVAL)) {\n value = 1;\n }\n else if (instance.element.classList.contains(ENDONCOUNT)) {\n value = 10;\n }\n else {\n value = this.startDate.getDate();\n }\n instance.value = instance.value || value;\n instance.dataBind();\n }\n }\n };\n RecurrenceEditor.prototype.getPopupWidth = function () {\n return Browser.isDevice ? '100%' : 'auto';\n };\n RecurrenceEditor.prototype.renderDatePickers = function () {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var self = this;\n this.untilDateObj = new DatePicker({\n firstDayOfWeek: this.firstDayOfWeek,\n enableRtl: this.enableRtl,\n locale: this.locale,\n min: this.minDate,\n max: this.maxDate,\n format: (isNullOrUndefined(this.dateFormat) ? this.getFormat('dateFormats') : this.dateFormat),\n change: function (args) {\n if (args.value) {\n self.triggerChangeEvent();\n }\n }\n });\n this.untilDateObj.appendTo(this.element.querySelector('.' + UNTILDATE));\n };\n RecurrenceEditor.prototype.getFormat = function (formatType) {\n var format;\n if (this.locale === 'en' || this.locale === 'en-US') {\n format = getValue(formatType + '.short', getDefaultDateObject(this.getCalendarMode()));\n }\n else {\n format = getValue('main.' + '' + this.locale + '.dates.calendars.' + this.getCalendarMode() + '.' + formatType + '.short', cldrData);\n }\n return format;\n };\n RecurrenceEditor.prototype.dayButtonRender = function () {\n var _this = this;\n var btns = [].slice.call(this.element.querySelectorAll('.' + DAYWRAPPER + ' button'));\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var self = this;\n for (var _i = 0, btns_1 = btns; _i < btns_1.length; _i++) {\n var btn = btns_1[_i];\n var button = new Button({ isToggle: true, enableRtl: this.enableRtl }, btn);\n this.dayButtons.push(button);\n EventHandler.add(btn, 'click', function (args) {\n var btns = [].slice.call(_this.element.querySelectorAll('.' + DAYWRAPPER + ' button.' + PRIMARY));\n var element = args.target;\n if (!element.classList.contains(PRIMARY)) {\n addClass([element], PRIMARY);\n self.triggerChangeEvent();\n }\n else if (btns.length > 1) {\n removeClass([element], PRIMARY);\n self.triggerChangeEvent();\n }\n });\n }\n };\n RecurrenceEditor.prototype.radioButtonRender = function () {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var self = this;\n this.onMonthDay = new RadioButton({\n label: this.localeObj.getConstant(RADIOLABEL),\n enableRtl: this.enableRtl,\n name: 'monthType',\n value: 'day',\n change: function () {\n self.resetFormValues();\n self.triggerChangeEvent();\n }\n });\n this.onMonthDay.appendTo(this.element.querySelector('.' + MONTHEXPANDERELEMENT));\n this.monthButtons.push(this.onMonthDay);\n this.onWeekDay = new RadioButton({\n label: this.localeObj.getConstant('monthExpander'),\n cssClass: 'e-month-type',\n name: 'monthType',\n enableRtl: this.enableRtl,\n value: 'daypos',\n change: function () {\n self.resetFormValues();\n self.triggerChangeEvent();\n }\n });\n this.onWeekDay.appendTo(this.element.querySelector('.' + MONTHEXPANNDERELEM));\n this.monthButtons.push(this.onWeekDay);\n };\n RecurrenceEditor.prototype.numericTextboxRender = function () {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var self = this;\n this.recurrenceCount = new NumericTextBox({\n value: 10,\n format: '#',\n enableRtl: this.enableRtl,\n min: 1,\n max: 999,\n change: function () {\n self.triggerChangeEvent();\n }\n });\n this.recurrenceCount.appendTo(this.element.querySelector('.' + ENDONCOUNT));\n this.monthDate = new NumericTextBox({\n value: 1,\n format: '#',\n enableRtl: this.enableRtl,\n min: 1,\n max: 31,\n change: function () {\n self.onMonthDay.setProperties({ checked: true });\n self.triggerChangeEvent();\n }\n });\n this.monthDate.appendTo(this.element.querySelector('.' + MONTHDAYWRAPPER));\n this.repeatInterval = new NumericTextBox({\n value: 1,\n format: '#',\n min: 1,\n max: 999,\n enableRtl: this.enableRtl,\n floatLabelType: 'Always',\n placeholder: this.localeObj.getConstant(REPEATEVERY),\n change: function () {\n self.triggerChangeEvent();\n }\n });\n this.repeatInterval.appendTo(this.element.querySelector('.' + REPEATINTERVAL));\n };\n RecurrenceEditor.prototype.renderComponent = function () {\n this.setTemplate();\n this.renderDropdowns();\n this.renderDatePickers();\n this.dayButtonRender();\n this.radioButtonRender();\n this.numericTextboxRender();\n };\n RecurrenceEditor.prototype.rotateArray = function (data, count) {\n var temp;\n for (var index = 0; index < count; index++) {\n temp = data.shift();\n data.push(temp);\n }\n };\n RecurrenceEditor.prototype.getEndData = function () {\n var endData = [NEVER, UNTIL, COUNT];\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var self = this;\n var dataSource = [];\n endData.forEach(function (data) {\n dataSource.push({ text: self.localeObj.getConstant(data), value: data });\n });\n return dataSource;\n };\n RecurrenceEditor.prototype.getDayPosition = function (date) {\n var temp = new Date(date.getTime());\n var endDate = new Date(date.getTime());\n var day = date.getDay();\n var positionCollection = [];\n temp = this.calendarUtil.getMonthStartDate(temp);\n endDate = this.calendarUtil.getMonthEndDate(endDate);\n while (temp < endDate) {\n if (temp.getDay() === day) {\n positionCollection.push(temp.getTime());\n }\n temp.setDate(temp.getDate() + 1);\n }\n if (positionCollection.indexOf(date.getTime()) === positionCollection.length - 1) {\n return -1;\n }\n return (positionCollection.indexOf(date.getTime()) + 1);\n };\n RecurrenceEditor.prototype.getRepeatData = function () {\n var data = [];\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var self = this;\n this.frequencies.forEach(function (element) {\n var textValue = (element === NONE) ? NEVER : element;\n data.push({ text: self.localeObj.getConstant(textValue), value: element });\n });\n return data;\n };\n RecurrenceEditor.prototype.getMonthPosData = function () {\n var monthpos = [FIRST, SECOND, THIRD, FOURTH, LAST];\n var monthposValue = {\n first: 1,\n second: 2,\n third: 3,\n fourth: 4,\n last: -1\n };\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var self = this;\n var dataSource = [];\n monthpos.forEach(function (data) {\n dataSource.push({ text: self.localeObj.getConstant(data), value: monthposValue[data] });\n });\n return dataSource;\n };\n RecurrenceEditor.prototype.getDayData = function (format) {\n var weekday = [KEYSUNDAY, KEYMONDAY, KEYTUESDAY, KEYWEDNESDAY, KEYTHURSDAY, KEYFRIDAY, KEYSATURDAY];\n var dayData = [];\n var cldrObj;\n this.rotateArray(weekday, this.firstDayOfWeek);\n if (this.locale === 'en' || this.locale === 'en-US') {\n var nameSpaceString = 'days.stand-alone.';\n cldrObj = (getValue(nameSpaceString + format, getDefaultDateObject(this.getCalendarMode())));\n }\n else {\n var nameSpaceString = 'main.' + '' + this.locale + '.dates.calendars.' + this.getCalendarMode() + '.days.stand-alone.' + format;\n cldrObj = (getValue(nameSpaceString, cldrData));\n }\n for (var _i = 0, weekday_1 = weekday; _i < weekday_1.length; _i++) {\n var obj = weekday_1[_i];\n var day = getValue(obj, cldrObj);\n dayData.push({ text: format === 'narrow' ? day : capitalizeFirstWord(day, 'single'), value: valueData[obj] });\n }\n return dayData;\n };\n RecurrenceEditor.prototype.getMonthData = function () {\n var monthData = [];\n var cldrObj;\n if (this.locale === 'en' || this.locale === 'en-US') {\n var nameSpaceString = 'months.stand-alone.wide';\n cldrObj = (getValue(nameSpaceString, getDefaultDateObject(this.getCalendarMode())));\n }\n else {\n var nameSpaceString = 'main.' + '' + this.locale + '.dates.calendars.' + this.getCalendarMode() + '.months.stand-alone.wide';\n cldrObj = (getValue(nameSpaceString, cldrData));\n }\n for (var _i = 0, _a = Object.keys(cldrObj); _i < _a.length; _i++) {\n var obj = _a[_i];\n monthData.push({\n text: capitalizeFirstWord(getValue(obj, cldrObj), 'single'),\n value: obj\n });\n }\n return monthData;\n };\n RecurrenceEditor.prototype.setTemplate = function () {\n var dayData = this.getDayData('narrow');\n var fullDay = this.getDayData('wide');\n this.element.innerHTML = '
' +\n '
' +\n '' +\n '
' +\n '
' + this.localeObj.getConstant(ON) + '
' +\n '
' +\n '
' +\n '
' +\n '
' +\n '
' +\n '
' +\n '
' +\n '
' +\n '
' + this.localeObj.getConstant(ON) + '
' +\n '
' +\n '' +\n '
' +\n '
' +\n '
' +\n '
';\n };\n RecurrenceEditor.prototype.getSelectedDaysData = function () {\n var ruleData = RULEBYDAY + EQUAL;\n var elements = [].slice.call(this.element.querySelectorAll('.' + DAYWRAPPER + ' button.' + PRIMARY));\n var weekday = [RULESUNDAY, RULEMONDAY, RULETUESDAY, RULEWEDNESDAY, RULETHURSDAY, RULEFRIDAY, RULESATURDAY];\n this.rotateArray(weekday, this.firstDayOfWeek);\n for (var index = 0; index < elements.length; index++) {\n ruleData += weekday[parseInt(elements[index].getAttribute('data-index'), 10)] + (index === (elements.length - 1) ? '' : COMMA);\n }\n return ruleData + SEMICOLON;\n };\n RecurrenceEditor.prototype.getSelectedMonthData = function () {\n var ruleData;\n if (this.onWeekDay.checked) {\n ruleData = RULEBYDAY + EQUAL + this.monthWeekDays.value + SEMICOLON\n + RULESETPOS + EQUAL + this.monthWeekPos.value + SEMICOLON;\n }\n else {\n ruleData = RULEBYMONTHDAY + EQUAL + this.monthDate.value + SEMICOLON;\n }\n return ruleData;\n };\n RecurrenceEditor.prototype.getIntervalData = function () {\n return RULEINTERVAL + EQUAL + this.repeatInterval.value + SEMICOLON;\n };\n RecurrenceEditor.prototype.getEndOnCount = function () {\n return RULECOUNT + EQUAL + this.recurrenceCount.value + SEMICOLON;\n };\n RecurrenceEditor.prototype.getYearMonthRuleData = function () {\n return RULEBYMONTH + EQUAL + this.monthValue.value + SEMICOLON;\n };\n RecurrenceEditor.prototype.updateWeekButton = function (keys) {\n var weekday = [RULESUNDAY, RULEMONDAY, RULETUESDAY, RULEWEDNESDAY, RULETHURSDAY, RULEFRIDAY, RULESATURDAY];\n this.rotateArray(weekday, this.firstDayOfWeek);\n for (var _i = 0, _a = this.dayButtons; _i < _a.length; _i++) {\n var obj = _a[_i];\n var index = parseInt(obj.element.getAttribute('data-index'), 10);\n if (keys.indexOf(weekday[index]) !== -1) {\n obj.setProperties({ isPrimary: true });\n }\n else {\n obj.setProperties({ isPrimary: false });\n }\n }\n };\n RecurrenceEditor.prototype.updateMonthUI = function () {\n if (this.ruleObject.monthDay.length) {\n this.monthDate.setProperties({ value: this.ruleObject.monthDay[0] });\n this.onMonthDay.setProperties({ checked: true });\n }\n else {\n this.onWeekDay.setProperties({ checked: true });\n this.monthWeekPos.setProperties({ value: this.ruleObject.setPosition });\n for (var _i = 0, _a = Object.keys(valueData); _i < _a.length; _i++) {\n var key = _a[_i];\n if (valueData[key] === this.ruleObject.day[0]) {\n this.monthWeekDays.setProperties({ value: this.ruleObject.day[0] });\n break;\n }\n }\n }\n };\n RecurrenceEditor.prototype.updateUI = function (repeat, state) {\n this.repeatInterval.setProperties({ value: this.ruleObject.interval });\n switch (state) {\n case UNTIL:\n this.untilDateObj.setProperties({ value: this.ruleObject.until });\n break;\n case COUNT:\n this.recurrenceCount.setProperties({ value: this.ruleObject.count });\n break;\n }\n switch (repeat) {\n case WEEKLY:\n this.updateWeekButton(this.ruleObject.day);\n break;\n case YEARLY:\n this.monthValue.setProperties({ index: (this.ruleObject.month[0] - 1) });\n this.updateMonthUI();\n break;\n case MONTHLY:\n this.updateMonthUI();\n break;\n }\n };\n RecurrenceEditor.prototype.getUntilData = function () {\n if (!this.untilDateObj.value) {\n return '';\n }\n var tempStr = getRecurrenceStringFromDate(this.untilDateObj.value);\n return RULEUNTIL + EQUAL + tempStr + SEMICOLON;\n };\n RecurrenceEditor.prototype.destroyComponents = function () {\n if (!this.recurrenceCount.isDestroyed) {\n this.recurrenceCount.destroy();\n }\n if (!this.monthDate.isDestroyed) {\n this.monthDate.destroy();\n }\n if (!this.repeatInterval.isDestroyed) {\n this.repeatInterval.destroy();\n }\n if (!this.untilDateObj.isDestroyed) {\n this.untilDateObj.destroy();\n }\n if (!this.repeatType.isDestroyed) {\n this.repeatType.destroy();\n }\n if (!this.endType.isDestroyed) {\n this.endType.destroy();\n }\n if (!this.monthWeekPos.isDestroyed) {\n this.monthWeekPos.destroy();\n }\n if (!this.monthWeekDays.isDestroyed) {\n this.monthWeekDays.destroy();\n }\n if (!this.monthValue.isDestroyed) {\n this.monthValue.destroy();\n }\n this.dayButtons.forEach(function (element) {\n if (!element.isDestroyed) {\n element.destroy();\n }\n });\n this.dayButtons = [];\n this.monthButtons.forEach(function (element) {\n if (!element.isDestroyed) {\n element.destroy();\n }\n });\n this.monthButtons = [];\n };\n RecurrenceEditor.prototype.resetFields = function () {\n this.startState(NONE, NEVER, this.startDate);\n this.setDefaultValue();\n };\n RecurrenceEditor.prototype.updateRuleUntilDate = function (startDate) {\n if (this.untilDateObj.value && startDate) {\n var untilDate = this.untilDateObj.value;\n var newUntilDate = new Date(untilDate.getFullYear(), untilDate.getMonth(), untilDate.getDate(), startDate.getHours(), startDate.getMinutes(), startDate.getMilliseconds());\n this.untilDateObj.setProperties({ value: newUntilDate });\n }\n };\n RecurrenceEditor.prototype.getCalendarMode = function () {\n return this.calendarMode.toLowerCase();\n };\n RecurrenceEditor.prototype.getRuleSummary = function (rule) {\n if (rule === void 0) { rule = this.getRecurrenceRule(); }\n return generateSummary(rule, this.localeObj, this.locale, this.calendarMode);\n };\n RecurrenceEditor.prototype.getRecurrenceDates = function (startDate, rule, excludeDate, maximumCount, viewDate) {\n viewDate = isNullOrUndefined(viewDate) ? this.startDate : viewDate;\n return generate(startDate, rule, excludeDate, this.firstDayOfWeek, maximumCount, viewDate, this.calendarMode);\n };\n RecurrenceEditor.prototype.getRecurrenceRule = function () {\n var ruleData = RULEFREQ + EQUAL;\n switch (this.repeatType.value) {\n case DAILY:\n ruleData += RULEDAILY + SEMICOLON;\n break;\n case WEEKLY:\n ruleData += RULEWEEKLY + SEMICOLON + this.getSelectedDaysData();\n break;\n case MONTHLY:\n ruleData += RULEMONTHLY + SEMICOLON + this.getSelectedMonthData();\n break;\n case YEARLY:\n ruleData += RULEYEARLY + SEMICOLON + this.getSelectedMonthData() + this.getYearMonthRuleData();\n break;\n case NONE:\n return '';\n }\n ruleData += this.getIntervalData();\n switch (this.endType.value) {\n case UNTIL:\n ruleData += this.getUntilData();\n break;\n case COUNT:\n ruleData += this.getEndOnCount();\n break;\n }\n return ruleData;\n };\n RecurrenceEditor.prototype.setRecurrenceRule = function (rule, startDate) {\n if (startDate === void 0) { startDate = this.startDate; }\n if (!rule) {\n this.repeatType.setProperties({ value: NONE });\n return;\n }\n this.renderStatus = false;\n this.ruleObject = extractObjectFromRule(rule);\n var endon = this.ruleObject.count ? COUNT : (this.ruleObject.until ? UNTIL : NEVER);\n switch (this.ruleObject.freq) {\n case RULEDAILY:\n this.startState(DAILY, endon, startDate);\n this.updateUI(DAILY, endon);\n break;\n case RULEWEEKLY:\n this.startState(WEEKLY, endon, startDate);\n this.updateUI(WEEKLY, endon);\n break;\n case RULEMONTHLY:\n this.startState(MONTHLY, endon, startDate);\n this.updateUI(MONTHLY, endon);\n break;\n case RULEYEARLY:\n this.startState(YEARLY, endon, startDate);\n this.updateUI(YEARLY, endon);\n break;\n }\n this.renderStatus = true;\n this.triggerChangeEvent();\n };\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n RecurrenceEditor.prototype.destroy = function () {\n this.destroyComponents();\n _super.prototype.destroy.call(this);\n var removeClasses = ['e-' + this.getModuleName()];\n if (this.cssClass) {\n removeClasses = removeClasses.concat(this.cssClass.split(' '));\n }\n removeClass([this.element], removeClasses);\n while (this.element.firstElementChild) {\n this.element.removeChild(this.element.firstElementChild);\n }\n };\n /**\n * Get component name.\n *\n * @returns {string} Returns the module name\n * @private\n */\n RecurrenceEditor.prototype.getModuleName = function () {\n return 'recurrenceeditor';\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} Returns the persisted state\n */\n RecurrenceEditor.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Initialize the control rendering\n *\n * @returns {void}\n * @private\n */\n RecurrenceEditor.prototype.render = function () {\n this.initialize();\n this.rtlClass(this.enableRtl);\n this.renderStatus = true;\n this.renderComplete();\n };\n /**\n * Called internally, if any of the property value changed.\n *\n * @param {RecurrenceEditorModel} newProp Accepts the changed properties new values\n * @param {RecurrenceEditorModel} oldProp Accepts the changed properties old values\n * @returns {void}\n * @private\n */\n RecurrenceEditor.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 'startDate':\n this.selectMonthDay(newProp.startDate);\n this.updateUntilDate(newProp.startDate);\n this.endType.setProperties({ index: 0 });\n break;\n case 'enableRtl':\n this.rtlClass(newProp.enableRtl);\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 'selectedType':\n this.repeatType.setProperties({ index: this.selectedType });\n break;\n case 'minDate':\n this.untilDateObj.setProperties({ minDate: this.minDate });\n break;\n case 'maxDate':\n this.untilDateObj.setProperties({ maxDate: this.maxDate });\n break;\n case 'value':\n if (this.getRecurrenceRule() !== this.value) {\n this.setRecurrenceRule(this.value);\n }\n break;\n case 'calendarMode':\n this.calendarMode = newProp.calendarMode;\n this.calendarUtil = getCalendarUtil(newProp.calendarMode);\n break;\n case 'locale':\n case 'frequencies':\n case 'firstDayOfWeek':\n this.refresh();\n break;\n case 'dateFormat':\n this.untilDateObj.setProperties({ format: newProp.dateFormat });\n break;\n }\n }\n };\n __decorate([\n Property(['none', 'daily', 'weekly', 'monthly', 'yearly'])\n ], RecurrenceEditor.prototype, \"frequencies\", void 0);\n __decorate([\n Property(0)\n ], RecurrenceEditor.prototype, \"firstDayOfWeek\", void 0);\n __decorate([\n Property(new Date())\n ], RecurrenceEditor.prototype, \"startDate\", void 0);\n __decorate([\n Property()\n ], RecurrenceEditor.prototype, \"dateFormat\", void 0);\n __decorate([\n Property('Gregorian')\n ], RecurrenceEditor.prototype, \"calendarMode\", void 0);\n __decorate([\n Property()\n ], RecurrenceEditor.prototype, \"cssClass\", void 0);\n __decorate([\n Property()\n ], RecurrenceEditor.prototype, \"value\", void 0);\n __decorate([\n Property(new Date(1900, 0, 1))\n ], RecurrenceEditor.prototype, \"minDate\", void 0);\n __decorate([\n Property(new Date(2099, 11, 31))\n ], RecurrenceEditor.prototype, \"maxDate\", void 0);\n __decorate([\n Property(0)\n ], RecurrenceEditor.prototype, \"selectedType\", void 0);\n __decorate([\n Event()\n ], RecurrenceEditor.prototype, \"change\", void 0);\n RecurrenceEditor = __decorate([\n NotifyPropertyChanges\n ], RecurrenceEditor);\n return RecurrenceEditor;\n}(Component));\nexport { RecurrenceEditor };\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { createElement, isNullOrUndefined, addClass, remove, EventHandler, extend, append } from '@syncfusion/ej2-base';\nimport { cldrData, removeClass, getValue, getDefaultDateObject, closest, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { Query, Deferred } from '@syncfusion/ej2-data';\nimport { CheckBox, Button } from '@syncfusion/ej2-buttons';\nimport { Dialog } from '@syncfusion/ej2-popups';\nimport { DropDownList, MultiSelect } from '@syncfusion/ej2-dropdowns';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { DateTimePicker } from '@syncfusion/ej2-calendars';\nimport { FieldValidator } from './form-validator';\nimport { RecurrenceEditor } from '../../recurrence-editor/recurrence-editor';\nimport * as cls from '../base/css-constant';\nimport * as event from '../base/constant';\nimport * as util from '../base/util';\nvar EVENT_FIELD = 'e-field';\nvar REPEAT_CONTAINER_CLASS = 'e-recurrence-container';\nvar REPEAT_BUTTON_ICON_CLASS = 'e-recurrence-edit';\nvar REPEAT_BUTTON_CLASS = 'e-recurrence-edit-button';\nvar REPEAT_DIALOG_CLASS = 'e-recurrence-dialog';\nvar HIDE_STYLE_CLASS = 'e-hide';\n/**\n * Event editor window\n */\nvar EventWindow = /** @class */ (function () {\n function EventWindow(parent) {\n this.parent = parent;\n this.l10n = this.parent.localeObj;\n this.fields = this.parent.eventFields;\n this.eventWindowTime = { startTime: new Date(), endTime: new Date() };\n this.renderEventWindow();\n }\n EventWindow.prototype.renderEventWindow = function () {\n this.element = createElement('div', { id: this.parent.element.id + '_dialog_wrapper' });\n this.parent.element.appendChild(this.element);\n var dialogModel = {\n animationSettings: { effect: 'Zoom' },\n content: this.getEventWindowContent(),\n cssClass: cls.EVENT_WINDOW_DIALOG_CLASS,\n enableRtl: this.parent.enableRtl,\n height: this.parent.isAdaptive ? '100%' : 'auto',\n minHeight: '300px',\n isModal: true,\n showCloseIcon: this.parent.isAdaptive ? false : true,\n target: document.body,\n visible: false,\n width: '500px',\n beforeOpen: this.onBeforeOpen.bind(this),\n beforeClose: this.onBeforeClose.bind(this)\n };\n if (this.parent.isAdaptive) {\n dialogModel.cssClass = cls.EVENT_WINDOW_DIALOG_CLASS + ' ' + cls.DEVICE_CLASS;\n dialogModel.header = '';\n }\n else {\n dialogModel.buttons = [{\n buttonModel: {\n content: this.l10n.getConstant('deleteButton'), cssClass: cls.DELETE_EVENT_CLASS,\n disabled: !this.parent.eventSettings.allowDeleting || this.parent.readonly\n },\n click: this.eventDelete.bind(this)\n }, {\n buttonModel: {\n content: this.l10n.getConstant('saveButton'), cssClass: 'e-primary ' + cls.EVENT_WINDOW_SAVE_BUTTON_CLASS,\n isPrimary: true, disabled: !this.parent.eventSettings.allowAdding || this.parent.readonly\n },\n click: this.eventSave.bind(this)\n }, {\n buttonModel: { cssClass: cls.EVENT_WINDOW_CANCEL_BUTTON_CLASS, content: this.l10n.getConstant('cancelButton') },\n click: this.dialogClose.bind(this)\n }];\n dialogModel.header = '
' + this.l10n.getConstant('newEvent') + '
';\n }\n this.dialogObject = new Dialog(dialogModel, this.element);\n if (this.dialogObject.element.querySelector('.e-dlg-closeicon-btn')) {\n this.dialogObject.element.querySelector('.e-dlg-closeicon-btn').setAttribute('title', this.l10n.getConstant('close'));\n }\n addClass([this.element.parentElement], cls.EVENT_WINDOW_DIALOG_CLASS + '-container');\n if (this.parent.isAdaptive) {\n EventHandler.add(this.element.querySelector('.' + cls.EVENT_WINDOW_BACK_ICON_CLASS), 'click', this.dialogClose, this);\n EventHandler.add(this.element.querySelector('.' + cls.EVENT_WINDOW_SAVE_ICON_CLASS), 'click', this.eventSave, this);\n }\n EventHandler.add(this.dialogObject.element, 'keydown', this.preventEventSave, this);\n this.applyFormValidation();\n };\n EventWindow.prototype.refresh = function () {\n this.destroy(true);\n this.renderEventWindow();\n };\n EventWindow.prototype.refreshRecurrenceEditor = function () {\n if (this.recurrenceEditor) {\n var recurrenceEditor = this.recurrenceEditor.element;\n this.recurrenceEditor.destroy();\n this.createRecurrenceEditor(recurrenceEditor);\n }\n };\n EventWindow.prototype.setRecurrenceEditor = function (recurrenceEditor) {\n if (this.parent.editorTemplate) {\n this.recurrenceEditor = recurrenceEditor;\n }\n };\n EventWindow.prototype.openEditor = function (data, type, isEventData, repeatType) {\n this.parent.currentAction = type;\n this.parent.removeNewEventElement();\n if (this.parent.quickPopup) {\n this.parent.quickPopup.quickPopupHide(true);\n }\n this.parent.inlineModule.removeInlineAppointmentElement();\n if (type === 'Add') {\n var eventObj = {};\n this.cellClickAction = !isEventData;\n this.parent.activeCellsData = data;\n var event_1 = data;\n if (this.cellClickAction) {\n this.convertToEventData(event_1, eventObj);\n }\n else {\n this.parent.activeCellsData = {\n startTime: (event_1.startTime || event_1[this.fields.startTime]),\n endTime: (event_1.endTime || event_1[this.fields.endTime]),\n isAllDay: (event_1.isAllDay || event_1[this.fields.isAllDay]),\n element: event_1.element,\n groupIndex: event_1.groupIndex\n };\n eventObj = event_1;\n }\n data = eventObj;\n }\n if (!isNullOrUndefined(this.parent.editorTemplate)) {\n this.renderFormElements(this.element.querySelector('.e-schedule-form'), data);\n }\n if (!this.parent.isAdaptive && isNullOrUndefined(this.parent.editorTemplate)) {\n removeClass([this.dialogObject.element.querySelector('.e-recurrenceeditor')], cls.DISABLE_CLASS);\n }\n if (this.recurrenceEditor) {\n this.recurrenceEditor.firstDayOfWeek = this.parent.activeViewOptions.firstDayOfWeek;\n }\n switch (type) {\n case 'Add':\n this.onCellDetailsUpdate(data, repeatType);\n break;\n case 'Save':\n case 'EditOccurrence':\n case 'EditSeries':\n case 'EditFollowingEvents':\n if (type === 'EditOccurrence' && !this.parent.isAdaptive && isNullOrUndefined(this.parent.editorTemplate)) {\n addClass([this.dialogObject.element.querySelector('.e-recurrenceeditor')], cls.DISABLE_CLASS);\n }\n this.cellClickAction = false;\n this.onEventDetailsUpdate(data);\n break;\n }\n };\n EventWindow.prototype.setDialogContent = function () {\n this.dialogObject.content = this.getEventWindowContent();\n this.dialogObject.dataBind();\n };\n EventWindow.prototype.preventEventSave = function (e) {\n if (this.parent && !this.parent.allowKeyboardInteraction && e.code === 'Enter') {\n this.isEnterKey = true;\n }\n };\n EventWindow.prototype.onBeforeOpen = function (args) {\n var _this = this;\n var eventProp = {\n type: 'Editor',\n data: this.eventData,\n cancel: false,\n element: this.element,\n target: (this.cellClickAction ? this.parent.activeCellsData.element : this.parent.activeEventData.element)\n };\n if (this.cellClickAction) {\n eventProp.duration = this.getSlotDuration();\n }\n var saveObj = this.getInstance(cls.EVENT_WINDOW_SAVE_BUTTON_CLASS);\n if (saveObj) {\n saveObj.disabled = !(this.cellClickAction ? this.parent.eventSettings.allowAdding : this.parent.eventSettings.allowEditing);\n saveObj.dataBind();\n }\n var deleteObj = this.getInstance(cls.DELETE_EVENT_CLASS);\n if (deleteObj) {\n deleteObj.disabled = !this.parent.eventSettings.allowDeleting;\n deleteObj.dataBind();\n }\n var callBackPromise = new Deferred();\n this.parent.trigger(event.popupOpen, eventProp, function (popupArgs) {\n args.cancel = popupArgs.cancel;\n _this.duration = _this.cellClickAction ? popupArgs.duration : null;\n _this.refreshDateTimePicker(_this.duration);\n if (_this.cellClickAction && popupArgs.duration !== _this.getSlotDuration() && isNullOrUndefined(_this.parent.editorTemplate)) {\n var startObj = _this.getInstance(cls.EVENT_WINDOW_START_CLASS);\n var endObj = _this.getInstance(cls.EVENT_WINDOW_END_CLASS);\n endObj.value = new Date(startObj.value.getTime() + (util.MS_PER_MINUTE * popupArgs.duration));\n endObj.dataBind();\n }\n if (_this.parent.editorTemplate && _this.element.querySelector('.e-recurrenceeditor') && !_this.recurrenceEditor) {\n _this.recurrenceEditor = _this.getInstance('e-recurrenceeditor');\n }\n callBackPromise.resolve(args);\n });\n return callBackPromise;\n };\n EventWindow.prototype.onBeforeClose = function (args) {\n var _this = this;\n if (args.isInteracted) {\n this.isCrudAction = false;\n }\n var eventProp = {\n type: 'Editor',\n event: args.event || this.dialogEvent,\n data: this.eventCrudData,\n cancel: false,\n element: this.element,\n target: (this.cellClickAction ? this.parent.activeCellsData.element : this.parent.activeEventData.element)\n };\n var callBackPromise = new Deferred();\n this.parent.trigger(event.popupClose, eventProp, function (popupArgs) {\n args.cancel = popupArgs.cancel;\n if (!popupArgs.cancel) {\n if (_this.isCrudAction) {\n args.cancel = _this.processCrudActions(popupArgs.data);\n _this.isCrudAction = args.cancel;\n }\n if (!_this.isCrudAction) {\n _this.resetForm();\n _this.parent.eventBase.focusElement(true);\n _this.eventCrudData = null;\n }\n }\n callBackPromise.resolve(args);\n });\n return callBackPromise;\n };\n EventWindow.prototype.getEventWindowContent = function () {\n var container = createElement('div', { className: cls.FORM_CONTAINER_CLASS });\n var form = createElement('form', {\n id: this.parent.element.id + 'EditForm',\n className: cls.FORM_CLASS,\n attrs: { onsubmit: 'return false;' }\n });\n this.renderFormElements(form);\n container.appendChild(form);\n return container;\n };\n EventWindow.prototype.renderFormElements = function (form, args) {\n if (!isNullOrUndefined(this.parent.editorTemplate)) {\n if (args) {\n if (this.recurrenceEditor) {\n this.recurrenceEditor.destroy();\n this.recurrenceEditor = null;\n }\n this.destroyComponents();\n var formElements = [].slice.call(form.children);\n for (var _i = 0, formElements_1 = formElements; _i < formElements_1.length; _i++) {\n var element = formElements_1[_i];\n remove(element);\n }\n }\n var templateId = this.parent.element.id + '_editorTemplate';\n var tempEle = [].slice.call(this.parent.getEditorTemplate()(args || {}, this.parent, 'editorTemplate', templateId, false));\n append(tempEle, form);\n this.parent.renderTemplates();\n }\n else {\n form.appendChild(this.getDefaultEventWindowContent());\n }\n };\n EventWindow.prototype.getDefaultEventWindowContent = function () {\n var parentDiv = this.createDivElement(cls.EVENT_WINDOW_DIALOG_PARENT_CLASS);\n var titleLocationDiv = this.createDivElement(cls.EVENT_WINDOW_TITLE_LOCATION_DIV_CLASS);\n parentDiv.appendChild(titleLocationDiv);\n titleLocationDiv.appendChild(this.renderTextBox(cls.SUBJECT_CLASS));\n titleLocationDiv.querySelector('.' + cls.SUBJECT_CLASS).setAttribute('title', this.parent.editorTitles.subject);\n titleLocationDiv.appendChild(this.renderTextBox(cls.LOCATION_CLASS));\n titleLocationDiv.querySelector('.' + cls.LOCATION_CLASS).setAttribute('title', this.parent.editorTitles.location);\n var startEndDateTimeDiv = this.createDivElement(cls.EVENT_WINDOW_START_END_DIV_CLASS);\n parentDiv.appendChild(startEndDateTimeDiv);\n startEndDateTimeDiv.appendChild(this.renderDateTimePicker(cls.EVENT_WINDOW_START_CLASS, this.onTimeChange.bind(this)));\n startEndDateTimeDiv.querySelector('.' + cls.EVENT_WINDOW_START_CLASS).setAttribute('title', this.parent.editorTitles.startTime);\n startEndDateTimeDiv.appendChild(this.renderDateTimePicker(cls.EVENT_WINDOW_END_CLASS));\n startEndDateTimeDiv.querySelector('.' + cls.EVENT_WINDOW_END_CLASS).setAttribute('title', this.parent.editorTitles.endTime);\n var allDayTimezoneDiv = this.createDivElement(cls.EVENT_WINDOW_ALLDAY_TZ_DIV_CLASS);\n parentDiv.appendChild(allDayTimezoneDiv);\n allDayTimezoneDiv.appendChild(this.renderCheckBox(cls.EVENT_WINDOW_ALL_DAY_CLASS));\n allDayTimezoneDiv.appendChild(this.renderCheckBox(cls.TIME_ZONE_CLASS));\n var timezoneParentDiv = this.createDivElement(cls.EVENT_WINDOW_TIME_ZONE_DIV_CLASS);\n parentDiv.appendChild(timezoneParentDiv);\n timezoneParentDiv.appendChild(this.renderDropDown(cls.EVENT_WINDOW_START_TZ_CLASS));\n timezoneParentDiv.appendChild(this.renderDropDown(cls.EVENT_WINDOW_END_TZ_CLASS));\n var repeatParentDiv = this.createDivElement(cls.EVENT_WINDOW_REPEAT_DIV_CLASS);\n parentDiv.appendChild(repeatParentDiv);\n var repeatDiv = this.renderCheckBox(cls.EVENT_WINDOW_REPEAT_CLASS);\n var repeatEditContainer = createElement('span', { className: REPEAT_CONTAINER_CLASS });\n var button = createElement('button', {\n className: REPEAT_BUTTON_CLASS,\n attrs: { type: 'button', 'title': this.l10n.getConstant('editRecurrence') }\n });\n this.buttonObj = new Button({ iconCss: REPEAT_BUTTON_ICON_CLASS + ' e-icons', cssClass: 'e-medium ' + this.parent.cssClass });\n repeatEditContainer.appendChild(button);\n this.buttonObj.appendTo(button);\n repeatDiv.appendChild(repeatEditContainer);\n repeatParentDiv.appendChild(repeatDiv);\n if (this.parent.isAdaptive) {\n EventHandler.add(button, 'click', this.loadRecurrenceEditor, this);\n }\n else {\n this.createRecurrenceEditor(parentDiv);\n }\n if (this.parent.resourceCollection.length > 0) {\n var resourceParentDiv = this.createDivElement(cls.EVENT_WINDOW_RESOURCES_DIV_CLASS);\n for (var _i = 0, _a = this.parent.resourceBase.resourceCollection; _i < _a.length; _i++) {\n var resource = _a[_i];\n resourceParentDiv.appendChild(this.renderResourceDetails(resource));\n }\n parentDiv.appendChild(resourceParentDiv);\n }\n var description = this.createDivElement(cls.DESCRIPTION_CLASS + '-row');\n description.appendChild(this.renderTextBox(cls.DESCRIPTION_CLASS));\n description.querySelector('.' + cls.DESCRIPTION_CLASS).setAttribute('title', this.parent.editorTitles.description);\n parentDiv.appendChild(description);\n var submit = createElement('button', { attrs: { type: 'hidden', title: 'submit', style: 'display:none' } });\n parentDiv.appendChild(submit);\n return parentDiv;\n };\n EventWindow.prototype.createRecurrenceEditor = function (parentDiv) {\n var recurrenceEditor = this.createDivElement();\n parentDiv.appendChild(recurrenceEditor);\n this.recurrenceEditor = this.renderRecurrenceEditor();\n this.recurrenceEditor.appendTo(recurrenceEditor);\n this.updateMinMaxDateToEditor();\n };\n EventWindow.prototype.createDivElement = function (className) {\n return createElement('div', { className: className });\n };\n EventWindow.prototype.createInputElement = function (className, fieldName, type) {\n return createElement(type || 'input', {\n className: className, attrs: {\n type: 'text', name: fieldName, value: '', id: fieldName,\n title: ((this.l10n.getConstant(fieldName.charAt(0).toLowerCase() + fieldName.slice(1))) === '') ?\n fieldName : this.l10n.getConstant(fieldName.charAt(0).toLowerCase() + fieldName.slice(1))\n }\n });\n };\n EventWindow.prototype.getSlotDuration = function () {\n return this.parent.activeViewOptions.timeScale.interval / this.parent.activeViewOptions.timeScale.slotCount;\n };\n EventWindow.prototype.renderDateTimePicker = function (value, changeEvent) {\n var dateTimeDiv = this.createDivElement(value + '-container');\n var fieldName = this.getFieldName(value);\n var dateTimeInput = this.createInputElement(value + ' ' + EVENT_FIELD, fieldName);\n dateTimeDiv.appendChild(dateTimeInput);\n var dateTimePicker = new DateTimePicker({\n change: changeEvent,\n firstDayOfWeek: this.parent.activeViewOptions.firstDayOfWeek,\n calendarMode: this.parent.calendarMode,\n min: this.parent.minDate,\n max: new Date(new Date(+this.parent.maxDate).setHours(23, 59, 59)),\n cssClass: this.parent.cssClass,\n enableRtl: this.parent.enableRtl,\n locale: this.parent.locale,\n floatLabelType: 'Always',\n timeFormat: this.parent.activeViewOptions.timeFormat,\n format: (isNullOrUndefined(this.parent.dateFormat) ?\n this.getFormat('dateFormats') : this.parent.dateFormat) + ' ' + this.parent.activeViewOptions.timeFormat,\n placeholder: this.getFieldLabel(value),\n step: this.getSlotDuration(),\n width: '100%'\n });\n dateTimePicker.appendTo(dateTimeInput);\n return dateTimeDiv;\n };\n EventWindow.prototype.refreshDateTimePicker = function (duration) {\n var elementSelector = '.' + cls.EVENT_WINDOW_START_CLASS + ',.' + cls.EVENT_WINDOW_END_CLASS;\n var startEndElement = [].slice.call(this.element.querySelectorAll(elementSelector));\n for (var _i = 0, startEndElement_1 = startEndElement; _i < startEndElement_1.length; _i++) {\n var element = startEndElement_1[_i];\n var instance = element.ej2_instances[0];\n instance.firstDayOfWeek = this.parent.activeViewOptions.firstDayOfWeek;\n instance.timeFormat = this.parent.activeViewOptions.timeFormat;\n instance.step = duration || this.getSlotDuration();\n instance.dataBind();\n }\n };\n EventWindow.prototype.onTimeChange = function () {\n var startObj = this.getInstance(cls.EVENT_WINDOW_START_CLASS);\n if (startObj.element.parentElement.classList.contains('e-input-focus')) {\n var endObj = this.getInstance(cls.EVENT_WINDOW_END_CLASS);\n var duration = 0;\n if (this.cellClickAction) {\n duration = util.MS_PER_MINUTE * this.duration;\n this.eventWindowTime.startTime = startObj.value;\n }\n else {\n duration = this.eventData[this.fields.endTime].getTime() - this.eventData[this.fields.startTime].getTime();\n }\n var endDate = (isNullOrUndefined(startObj.value)) ? null : new Date(startObj.value.getTime() + duration);\n if (this.cellClickAction) {\n this.eventWindowTime.endTime = endDate;\n }\n endObj.value = endDate;\n endObj.dataBind();\n }\n if (this.recurrenceEditor) {\n this.recurrenceEditor.updateRuleUntilDate(this.eventWindowTime.startTime);\n }\n };\n EventWindow.prototype.renderResourceDetails = function (resourceData) {\n var fieldName = resourceData.field;\n var value = 'e-' + fieldName;\n var labelValue = resourceData.title;\n var resourceDiv = this.createDivElement(value + '-container' + ' ' + 'e-resources');\n var resourceInput = this.createInputElement(value + ' ' + EVENT_FIELD, fieldName);\n resourceDiv.appendChild(resourceInput);\n var resourceTemplate = '
${' + resourceData.textField + '}
';\n if (resourceData.allowMultiple) {\n var listObj = new MultiSelect({\n cssClass: this.parent.cssClass || '',\n dataSource: resourceData.dataSource,\n change: this.onMultiselectResourceChange.bind(this),\n itemTemplate: resourceTemplate,\n fields: {\n text: resourceData.textField,\n value: resourceData.idField\n },\n htmlAttributes: { 'title': labelValue, 'name': fieldName },\n floatLabelType: 'Always',\n placeholder: labelValue,\n popupHeight: '230px',\n popupWidth: '447px',\n mode: 'Box'\n });\n listObj.appendTo(resourceInput);\n }\n else {\n var dropDownList = new DropDownList({\n cssClass: this.parent.cssClass || '',\n change: this.onDropdownResourceChange.bind(this),\n dataSource: resourceData.dataSource,\n enableRtl: this.parent.enableRtl,\n fields: {\n text: resourceData.textField,\n value: resourceData.idField\n },\n htmlAttributes: { 'title': labelValue, 'name': fieldName },\n floatLabelType: 'Always',\n placeholder: labelValue,\n popupHeight: '230px',\n popupWidth: '447px',\n itemTemplate: resourceTemplate\n });\n dropDownList.appendTo(resourceInput);\n }\n return resourceDiv;\n };\n EventWindow.prototype.renderDropDown = function (value) {\n var _this = this;\n var fieldName = this.getFieldName(value);\n var timezoneDiv = this.createDivElement(value + '-container');\n var timezoneInput = this.createInputElement(value + ' ' + EVENT_FIELD, fieldName);\n timezoneDiv.appendChild(timezoneInput);\n var dropDownList = new DropDownList({\n allowFiltering: true,\n change: this.onTimezoneChange.bind(this),\n cssClass: this.parent.cssClass || '',\n dataSource: this.parent.timezoneDataSource,\n enableRtl: this.parent.enableRtl,\n fields: { text: 'Text', value: 'Value' },\n filterBarPlaceholder: this.parent.localeObj.getConstant('searchTimezone'),\n noRecordsTemplate: this.parent.localeObj.getConstant('noRecords'),\n filtering: function (e) {\n var query = new Query();\n query = (e.text !== '') ? query.where('Text', 'contains', e.text, true) : query;\n e.updateData(_this.parent.timezoneDataSource, query);\n },\n htmlAttributes: { 'title': this.getFieldLabel(value), 'name': fieldName },\n floatLabelType: 'Always',\n placeholder: this.getFieldLabel(value),\n popupHeight: '230px'\n });\n dropDownList.appendTo(timezoneInput);\n return timezoneDiv;\n };\n EventWindow.prototype.onMultiselectResourceChange = function (args) {\n if (!args.value || !this.parent.activeViewOptions.group.byGroupID || this.parent.resourceCollection.length <= 1) {\n return;\n }\n var resourceCollection = this.parent.resourceBase.resourceCollection;\n var fieldName = args.element.getAttribute('name') || this.getColumnName(args.element);\n for (var i = 0; i < resourceCollection.length; i++) {\n if (resourceCollection[i].field === fieldName && i < resourceCollection.length - 1) {\n var resObject = this.createInstance(i);\n var datasource = [];\n var _loop_1 = function (j) {\n var resourceModel = resourceCollection[i + 1];\n // eslint-disable-next-line max-len\n var filter = resourceModel.dataSource.filter(function (data) {\n return data[resourceModel.groupIDField] === args.value[j];\n })[0];\n var groupId = filter[resourceCollection[i + 1].groupIDField];\n var filterRes = this_1.filterDatasource(i, groupId);\n datasource = datasource.concat(filterRes);\n };\n var this_1 = this;\n for (var j = 0; j < args.value.length; j++) {\n _loop_1(j);\n }\n resObject.dataSource = datasource;\n resObject.dataBind();\n }\n }\n };\n EventWindow.prototype.createInstance = function (index) {\n var resourceData = this.parent.resourceBase.resourceCollection[index + 1];\n var resObject = this.element.querySelector('.e-' + resourceData.field).\n ej2_instances[0];\n return resObject;\n };\n EventWindow.prototype.onDropdownResourceChange = function (args) {\n if (!args.value || this.parent.resourceCollection.length <= 1 || !this.parent.activeViewOptions.group.byGroupID) {\n return;\n }\n var fieldName = args.element.getAttribute('name') || this.getColumnName(args.element);\n var resourceCollection = this.parent.resourceBase.resourceCollection;\n for (var i = 0; i < resourceCollection.length; i++) {\n if ((i < resourceCollection.length - 1) && resourceCollection[i].field === fieldName) {\n var resObj = this.createInstance(i);\n var groupId = args.itemData[resourceCollection[i].idField];\n resObj.dataSource = this.filterDatasource(i, groupId);\n resObj.dataBind();\n var resValue = resObj.dataSource[0][resourceCollection[i + 1].idField];\n resObj.value = (resourceCollection[i + 1].allowMultiple) ? [resValue] : resValue;\n resObj.dataBind();\n }\n }\n };\n EventWindow.prototype.filterDatasource = function (index, groupId) {\n var resourceData = this.parent.resourceBase.resourceCollection[index + 1];\n return resourceData.dataSource.filter(function (data) {\n return data[resourceData.groupIDField] === groupId;\n });\n };\n EventWindow.prototype.onTimezoneChange = function (args) {\n var fieldName = args.element.getAttribute('name') || this.getColumnName(args.element);\n if (fieldName === this.parent.eventFields.startTimezone) {\n var startTimezoneObj = this.getInstance(cls.EVENT_WINDOW_START_TZ_CLASS);\n var endTimezoneObj = this.getInstance(cls.EVENT_WINDOW_END_TZ_CLASS);\n endTimezoneObj.value = startTimezoneObj.value;\n endTimezoneObj.dataBind();\n }\n };\n EventWindow.prototype.renderCheckBox = function (value) {\n var checkBoxDiv = this.createDivElement(value + '-container');\n var fieldName = this.getFieldName(value);\n var checkBoxInput = this.createInputElement(value + ' ' + EVENT_FIELD, fieldName);\n checkBoxDiv.appendChild(checkBoxInput);\n var checkBox = new CheckBox({\n change: this.onChange.bind(this),\n cssClass: value + ' ' + this.parent.cssClass,\n enableRtl: this.parent.enableRtl,\n label: this.getFieldLabel(value)\n });\n checkBox.appendTo(checkBoxInput);\n checkBoxInput.setAttribute('name', fieldName);\n if (fieldName === 'Repeat') {\n this.repeatStatus = checkBox;\n }\n return checkBoxDiv;\n };\n EventWindow.prototype.renderTextBox = function (value) {\n var textBoxDiv = this.createDivElement(value + '-container');\n var fieldName = this.getFieldName(value);\n var elementType = (value === cls.DESCRIPTION_CLASS) ? 'textarea' : 'input';\n var textBoxInput = this.createInputElement(value + ' ' + EVENT_FIELD, fieldName, elementType);\n textBoxDiv.appendChild(textBoxInput);\n Input.createInput({\n element: textBoxInput,\n floatLabelType: 'Always',\n properties: {\n enableRtl: this.parent.enableRtl,\n placeholder: this.getFieldLabel(value)\n }\n });\n return textBoxDiv;\n };\n EventWindow.prototype.getFieldName = function (name) {\n var fieldName = '';\n switch (name) {\n case cls.SUBJECT_CLASS:\n fieldName = this.fields.subject;\n break;\n case cls.LOCATION_CLASS:\n fieldName = this.fields.location;\n break;\n case cls.EVENT_WINDOW_START_CLASS:\n fieldName = this.fields.startTime;\n break;\n case cls.EVENT_WINDOW_END_CLASS:\n fieldName = this.fields.endTime;\n break;\n case cls.DESCRIPTION_CLASS:\n fieldName = this.fields.description;\n break;\n case cls.EVENT_WINDOW_ALL_DAY_CLASS:\n fieldName = this.fields.isAllDay;\n break;\n case cls.EVENT_WINDOW_START_TZ_CLASS:\n fieldName = this.fields.startTimezone;\n break;\n case cls.EVENT_WINDOW_END_TZ_CLASS:\n fieldName = this.fields.endTimezone;\n break;\n case cls.TIME_ZONE_CLASS:\n fieldName = 'Timezone';\n break;\n case cls.EVENT_WINDOW_REPEAT_CLASS:\n fieldName = 'Repeat';\n break;\n }\n return fieldName;\n };\n EventWindow.prototype.getFieldLabel = function (fieldName) {\n var labelText = '';\n switch (fieldName) {\n case cls.SUBJECT_CLASS:\n labelText = this.parent.editorTitles.subject;\n break;\n case cls.LOCATION_CLASS:\n labelText = this.parent.editorTitles.location;\n break;\n case cls.DESCRIPTION_CLASS:\n labelText = this.parent.editorTitles.description;\n break;\n case cls.EVENT_WINDOW_START_CLASS:\n labelText = this.parent.editorTitles.startTime;\n break;\n case cls.EVENT_WINDOW_END_CLASS:\n labelText = this.parent.editorTitles.endTime;\n break;\n case cls.EVENT_WINDOW_START_TZ_CLASS:\n labelText = this.parent.editorTitles.startTimezone;\n break;\n case cls.EVENT_WINDOW_END_TZ_CLASS:\n labelText = this.parent.editorTitles.endTimezone;\n break;\n case cls.EVENT_WINDOW_REPEAT_CLASS:\n labelText = this.parent.editorTitles.recurrenceRule;\n break;\n case cls.EVENT_WINDOW_ALL_DAY_CLASS:\n labelText = this.parent.editorTitles.isAllDay;\n break;\n case cls.TIME_ZONE_CLASS:\n labelText = this.l10n.getConstant('timezone');\n break;\n }\n return labelText;\n };\n EventWindow.prototype.onChange = function (args) {\n var target = (args.event.target);\n if (target.classList.contains(cls.EVENT_WINDOW_ALL_DAY_CLASS)) {\n this.onAllDayChange(args.checked);\n }\n else if (target.classList.contains(cls.TIME_ZONE_CLASS)) {\n this.timezoneChangeStyle(args.checked);\n }\n else if (target.classList.contains(cls.EVENT_WINDOW_REPEAT_CLASS)) {\n this.onRepeatChange(args.checked);\n }\n };\n EventWindow.prototype.renderRepeatDialog = function () {\n var element = createElement('div');\n this.repeatDialogObject = new Dialog({\n header: this.l10n.getConstant('recurrence'),\n visible: false,\n content: '
',\n closeOnEscape: true,\n width: '90%',\n buttons: [{\n click: this.repeatSaveDialog.bind(this),\n buttonModel: { content: this.l10n.getConstant('save'), cssClass: 'e-save', isPrimary: true }\n },\n { click: this.repeatCancelDialog.bind(this), buttonModel: { cssClass: 'e-cancel', content: this.l10n.getConstant('cancel') } }],\n target: this.element,\n animationSettings: { effect: 'Zoom' },\n enableRtl: this.parent.enableRtl,\n isModal: true,\n cssClass: REPEAT_DIALOG_CLASS,\n open: this.repeatOpenDialog.bind(this)\n });\n this.element.appendChild(element);\n this.repeatDialogObject.appendTo(element);\n this.createRecurrenceEditor(this.repeatDialogObject.element.querySelector('.e-rec-editor'));\n };\n EventWindow.prototype.loadRecurrenceEditor = function () {\n this.repeatDialogObject.show();\n if (this.recurrenceEditor && this.repeatRule) {\n this.recurrenceEditor.setRecurrenceRule(this.repeatRule);\n }\n };\n EventWindow.prototype.onRepeatChange = function (state) {\n if (state) {\n if (!this.repeatDialogObject) {\n this.renderRepeatDialog();\n }\n this.recurrenceEditor.setProperties({ startDate: this.repeatStartDate, selectedType: 0 });\n this.loadRecurrenceEditor();\n }\n else {\n if (this.repeatDialogObject) {\n this.repeatDialogObject.hide();\n }\n this.repeatRule = '';\n if (this.recurrenceEditor) {\n this.recurrenceEditor.setRecurrenceRule(this.repeatRule);\n this.updateRepeatLabel(this.repeatRule);\n }\n var element = this.element.querySelector('.' + REPEAT_CONTAINER_CLASS);\n addClass([element], HIDE_STYLE_CLASS);\n }\n };\n EventWindow.prototype.repeatSaveDialog = function () {\n this.repeatRule = this.recurrenceEditor.getRecurrenceRule();\n var element = this.element.querySelector('.' + REPEAT_CONTAINER_CLASS);\n if (this.recurrenceEditor.getRecurrenceRule()) {\n removeClass([element], HIDE_STYLE_CLASS);\n }\n else {\n addClass([element], HIDE_STYLE_CLASS);\n this.repeatStatus.setProperties({ checked: false });\n }\n this.updateRepeatLabel(this.repeatRule);\n this.closeRepeatDialog();\n };\n EventWindow.prototype.closeRepeatDialog = function () {\n this.repeatDialogObject.hide();\n };\n EventWindow.prototype.repeatCancelDialog = function () {\n this.closeRepeatDialog();\n if (this.recurrenceEditor) {\n this.recurrenceEditor.setRecurrenceRule(this.repeatTempRule);\n }\n if (!this.repeatTempRule) {\n this.repeatStatus.setProperties({ checked: false });\n }\n };\n EventWindow.prototype.repeatOpenDialog = function () {\n this.repeatTempRule = this.recurrenceEditor.getRecurrenceRule();\n };\n EventWindow.prototype.onCellDetailsUpdate = function (eventObj, repeatType) {\n if (!this.parent.eventSettings.allowAdding) {\n return;\n }\n this.element.querySelector('.' + cls.FORM_CLASS).removeAttribute('data-id');\n this.element.querySelector('.' + cls.EVENT_WINDOW_TITLE_TEXT_CLASS).innerHTML = this.l10n.getConstant('newEvent');\n eventObj.Timezone = false;\n this.repeatStartDate = eventObj[this.fields.startTime];\n this.repeatRule = '';\n if (!isNullOrUndefined(this.parent.eventSettings.fields.subject.default)) {\n eventObj[this.fields.subject] = this.parent.eventSettings.fields.subject.default;\n }\n if (!isNullOrUndefined(this.parent.eventSettings.fields.location.default)) {\n eventObj[this.fields.location] = this.parent.eventSettings.fields.location.default;\n }\n if (!isNullOrUndefined(this.parent.eventSettings.fields.description.default)) {\n eventObj[this.fields.description] = this.parent.eventSettings.fields.description.default;\n }\n this.showDetails(eventObj);\n if (eventObj[this.fields.recurrenceRule] && this.recurrenceEditor) {\n this.recurrenceEditor.setRecurrenceRule(eventObj[this.fields.recurrenceRule], eventObj[this.fields.startTime]);\n this.repeatRule = eventObj[this.fields.recurrenceRule];\n }\n var deleteButton = this.element.querySelector('.' + cls.DELETE_EVENT_CLASS);\n if (deleteButton) {\n addClass([deleteButton], cls.DISABLE_CLASS);\n }\n if (this.recurrenceEditor) {\n this.recurrenceEditor.setProperties({\n startDate: eventObj[this.fields.startTime],\n selectedType: !isNullOrUndefined(repeatType) ? repeatType : !isNullOrUndefined(eventObj[this.fields.recurrenceRule]) ?\n this.recurrenceEditor.selectedType : 0\n });\n }\n if (this.parent.isAdaptive && isNullOrUndefined(this.parent.editorTemplate)) {\n var element = this.element.querySelector('.' + REPEAT_CONTAINER_CLASS);\n addClass([element], HIDE_STYLE_CLASS);\n this.updateRepeatLabel(this.repeatRule);\n }\n else {\n var saveButton = this.element.querySelector('.' + cls.EVENT_WINDOW_SAVE_BUTTON_CLASS);\n this.disableButton(saveButton, false);\n }\n this.dialogObject.show();\n };\n EventWindow.prototype.convertToEventData = function (cellsData, eventObj) {\n if (cellsData.subject) {\n eventObj[this.fields.subject] = cellsData.subject;\n }\n eventObj[this.fields.startTime] = cellsData.startTime;\n eventObj[this.fields.endTime] = cellsData.endTime;\n eventObj[this.fields.isAllDay] = cellsData.isAllDay;\n if (cellsData.RecurrenceRule) {\n eventObj[this.fields.recurrenceRule] = cellsData.RecurrenceRule;\n }\n if (this.parent.resourceCollection.length > 0 || this.parent.activeViewOptions.group.resources.length > 0) {\n this.parent.resourceBase.setResourceValues(eventObj);\n }\n };\n EventWindow.prototype.applyFormValidation = function () {\n var getValidationRule = function (rules) {\n return (rules && Object.keys(rules).length > 0) ? rules : undefined;\n };\n var form = this.element.querySelector('.' + cls.FORM_CLASS);\n var rules = {};\n rules[this.parent.eventSettings.fields.subject.name] = getValidationRule(this.parent.eventSettings.fields.subject.validation);\n rules[this.parent.eventSettings.fields.location.name] = getValidationRule(this.parent.eventSettings.fields.location.validation);\n rules[this.parent.eventSettings.fields.startTime.name] = getValidationRule(this.parent.eventSettings.fields.startTime.validation);\n rules[this.parent.eventSettings.fields.endTime.name] = getValidationRule(this.parent.eventSettings.fields.endTime.validation);\n rules[this.parent.eventSettings.fields.description.name] =\n getValidationRule(this.parent.eventSettings.fields.description.validation);\n this.fieldValidator = new FieldValidator();\n this.fieldValidator.renderFormValidator(form, rules, this.element, this.parent.locale);\n };\n EventWindow.prototype.showDetails = function (eventData) {\n var eventObj = extend({}, eventData, null, true);\n if (eventObj[this.fields.endTime].getHours() === 0 && eventObj[this.fields.endTime].getMinutes() === 0) {\n this.trimAllDay(eventObj);\n }\n this.eventData = eventObj;\n var formElements = this.getFormElements(cls.EVENT_WINDOW_DIALOG_CLASS);\n var keyNames = Object.keys(eventObj);\n for (var _i = 0, formElements_2 = formElements; _i < formElements_2.length; _i++) {\n var curElement = formElements_2[_i];\n var columnName = curElement.name || this.getColumnName(curElement);\n if (!isNullOrUndefined(columnName) && columnName !== '') {\n if (keyNames.indexOf(columnName) !== -1) {\n this.setValueToElement(curElement, eventObj[columnName]);\n }\n else {\n this.setDefaultValueToElement(curElement);\n }\n }\n }\n if (isNullOrUndefined(this.parent.editorTemplate)) {\n this.onAllDayChange(eventObj[this.fields.isAllDay]);\n var timezoneObj = this.getInstance(cls.TIME_ZONE_CLASS + '.' + EVENT_FIELD);\n if (!(isNullOrUndefined(eventObj[this.fields.startTimezone]) && isNullOrUndefined(eventObj[this.fields.endTimezone]))) {\n timezoneObj.checked = true;\n timezoneObj.dataBind();\n }\n this.timezoneChangeStyle(timezoneObj.checked);\n delete eventObj.Timezone;\n }\n };\n EventWindow.prototype.getColumnName = function (element) {\n var attrName = element.getAttribute('data-name') || '';\n if (attrName === '') {\n var isDropDowns = false;\n var fieldSelector = '';\n if (element.classList.contains('e-dropdownlist')) {\n fieldSelector = 'e-ddl';\n isDropDowns = true;\n }\n else if (element.classList.contains('e-multiselect')) {\n fieldSelector = 'e-multiselect';\n isDropDowns = true;\n }\n else if (element.classList.contains('e-datetimepicker')) {\n fieldSelector = 'e-datetimepicker';\n }\n else if (element.classList.contains('e-datepicker')) {\n fieldSelector = 'e-datepicker';\n }\n else if (element.classList.contains('e-checkbox')) {\n fieldSelector = 'e-checkbox';\n }\n var classSelector = isDropDowns ? \".\" + fieldSelector + \":not(.e-control)\" : \".\" + fieldSelector;\n var control = closest(element, classSelector) || element.querySelector(\".\" + fieldSelector);\n if (control) {\n var attrEle = control.querySelector('[name]');\n if (attrEle) {\n attrName = attrEle.name;\n }\n }\n }\n return attrName;\n };\n EventWindow.prototype.onAllDayChange = function (allDayStatus) {\n var startObj = this.getInstance(cls.EVENT_WINDOW_START_CLASS);\n var endObj = this.getInstance(cls.EVENT_WINDOW_END_CLASS);\n var timezoneDiv = this.element.querySelector('.e-time-zone-container');\n var format;\n if (allDayStatus) {\n format = (isNullOrUndefined(this.parent.dateFormat)) ? this.getFormat('dateFormats') : this.parent.dateFormat;\n addClass(this.element.querySelectorAll('.e-time-icon'), cls.EVENT_WINDOW_ICON_DISABLE_CLASS);\n addClass([timezoneDiv], cls.DISABLE_CLASS);\n if (this.element.querySelector('.' + cls.EVENT_WINDOW_TIME_ZONE_DIV_CLASS)) {\n removeClass([this.element.querySelector('.' + cls.EVENT_WINDOW_TIME_ZONE_DIV_CLASS)], cls.ENABLE_CLASS);\n }\n startObj.format = endObj.format = format;\n }\n else {\n format = (isNullOrUndefined(this.parent.dateFormat)) ? this.getFormat('dateFormats') + ' ' +\n this.parent.activeViewOptions.timeFormat : this.parent.dateFormat + ' ' + this.parent.activeViewOptions.timeFormat;\n removeClass(this.element.querySelectorAll('.e-time-icon'), cls.EVENT_WINDOW_ICON_DISABLE_CLASS);\n removeClass([timezoneDiv], cls.DISABLE_CLASS);\n if (this.element.querySelector('.e-checkbox-wrapper .e-time-zone').checked) {\n addClass([this.element.querySelector('.' + cls.EVENT_WINDOW_TIME_ZONE_DIV_CLASS)], cls.ENABLE_CLASS);\n }\n startObj.format = endObj.format = format;\n }\n if (this.cellClickAction) {\n this.updateDateTime(allDayStatus, startObj, endObj);\n }\n startObj.dataBind();\n endObj.dataBind();\n if (!isNullOrUndefined(this.recurrenceEditor)) {\n this.recurrenceEditor.updateRuleUntilDate(startObj.value);\n }\n };\n EventWindow.prototype.updateDateTime = function (allDayStatus, startObj, endObj) {\n var startDate;\n var endDate;\n if (allDayStatus) {\n startDate = util.resetTime(new Date(this.eventWindowTime.startTime.getTime()));\n if (this.parent.activeCellsData.isAllDay) {\n var temp = util.addDays(new Date(this.eventWindowTime.endTime.getTime()), -1).getTime();\n endDate = (+this.eventWindowTime.startTime > temp) ? this.eventWindowTime.endTime : new Date(temp);\n }\n else {\n endDate = util.resetTime(new Date(this.eventWindowTime.endTime.getTime()));\n }\n }\n else {\n var start = this.parent.activeCellsData.startTime;\n startDate = new Date(this.eventWindowTime.startTime.getTime());\n startDate.setHours(start.getHours(), start.getMinutes(), start.getSeconds());\n if (this.parent.activeCellsData.isAllDay) {\n var startHour = this.parent.getStartEndTime(this.parent.workHours.start);\n startDate.setHours(startHour.getHours(), startHour.getMinutes(), startHour.getSeconds());\n endDate = new Date(startDate.getTime());\n endDate.setMilliseconds(util.MS_PER_MINUTE * this.getSlotDuration());\n }\n else {\n endDate = new Date(startDate.getTime());\n endDate.setMilliseconds(this.parent.activeCellsData.endTime.getTime() - this.parent.activeCellsData.startTime.getTime());\n }\n }\n this.eventWindowTime = { startTime: new Date(startDate.getTime()), endTime: new Date(endDate.getTime()) };\n startObj.value = startDate;\n endObj.value = endDate;\n startObj.dataBind();\n endObj.dataBind();\n };\n EventWindow.prototype.getFormat = function (formatType) {\n var format;\n if (this.parent.locale === 'en' || this.parent.locale === 'en-US') {\n format = getValue(formatType + '.short', getDefaultDateObject(this.parent.getCalendarMode()));\n }\n else {\n format = getValue(\"main.\" + this.parent.locale + \".dates.calendars.\" + this.parent.getCalendarMode() + \".\" + formatType + \".short\", cldrData);\n }\n return format;\n };\n EventWindow.prototype.onEventDetailsUpdate = function (eventObj) {\n if (!this.parent.eventSettings.allowEditing) {\n return;\n }\n if (!this.parent.isAdaptive) {\n removeClass([this.element.querySelector('.' + cls.DELETE_EVENT_CLASS)], cls.DISABLE_CLASS);\n }\n this.element.querySelector('.' + cls.EVENT_WINDOW_TITLE_TEXT_CLASS).innerHTML = this.l10n.getConstant('editEvent');\n this.element.querySelector('.' + cls.FORM_CLASS).setAttribute('data-id', eventObj[this.fields.id].toString());\n if (isNullOrUndefined(this.parent.editorTemplate)) {\n eventObj = extend({}, eventObj, null, true);\n var timezoneObj = this.getInstance(cls.TIME_ZONE_CLASS + '.' + EVENT_FIELD);\n var timezoneValue = void 0;\n if (eventObj[this.fields.startTimezone] || eventObj[this.fields.endTimezone]) {\n timezoneValue = true;\n this.parent.eventBase.timezoneConvert(eventObj);\n }\n else {\n timezoneValue = false;\n }\n eventObj.Timezone = timezoneValue;\n timezoneObj.checked = timezoneValue;\n timezoneObj.dataBind();\n }\n this.showDetails(eventObj);\n if (eventObj[this.fields.recurrenceRule] && this.recurrenceEditor) {\n this.recurrenceEditor.setRecurrenceRule(eventObj[this.fields.recurrenceRule], eventObj[this.fields.startTime]);\n }\n else if (!this.parent.isAdaptive && this.recurrenceEditor) {\n this.recurrenceEditor.setProperties({ startDate: eventObj[this.fields.startTime] });\n this.recurrenceEditor.setRecurrenceRule('');\n }\n this.repeatStartDate = eventObj[this.fields.startTime];\n this.repeatRule = '';\n if (eventObj[this.fields.recurrenceRule]) {\n if (this.recurrenceEditor) {\n this.recurrenceEditor.setRecurrenceRule(eventObj[this.fields.recurrenceRule], eventObj[this.fields.startTime]);\n }\n this.repeatRule = eventObj[this.fields.recurrenceRule];\n }\n if (this.parent.isAdaptive && isNullOrUndefined(this.parent.editorTemplate)) {\n var element = this.element.querySelector('.' + REPEAT_CONTAINER_CLASS);\n if (eventObj[this.fields.recurrenceRule]) {\n removeClass([element], HIDE_STYLE_CLASS);\n this.repeatStatus.setProperties({ checked: true });\n }\n else {\n addClass([element], HIDE_STYLE_CLASS);\n this.repeatStatus.setProperties({ checked: false });\n }\n this.updateRepeatLabel(this.repeatRule);\n }\n var isDisable = (this.parent.readonly || eventObj[this.fields.isReadonly]);\n if (!this.parent.isAdaptive) {\n var saveButton = this.element.querySelector('.' + cls.EVENT_WINDOW_SAVE_BUTTON_CLASS);\n var deleteButton = this.element.querySelector('.' + cls.DELETE_EVENT_CLASS);\n this.disableButton(saveButton, isDisable);\n this.disableButton(deleteButton, isDisable);\n }\n else {\n var saveIcon = this.element.querySelector('.' + cls.EVENT_WINDOW_SAVE_ICON_CLASS);\n if (saveIcon) {\n if (isDisable) {\n addClass([saveIcon], cls.ICON_DISABLE_CLASS);\n }\n else {\n removeClass([saveIcon], cls.ICON_DISABLE_CLASS);\n }\n }\n }\n this.dialogObject.show();\n };\n EventWindow.prototype.disableButton = function (element, value) {\n if (element) {\n element.ej2_instances[0].disabled = value;\n }\n };\n EventWindow.prototype.renderRecurrenceEditor = function () {\n return new RecurrenceEditor({\n calendarMode: this.parent.calendarMode,\n cssClass: this.parent.cssClass,\n dateFormat: this.parent.dateFormat,\n enableRtl: this.parent.enableRtl,\n firstDayOfWeek: this.parent.activeViewOptions.firstDayOfWeek,\n locale: this.parent.locale\n });\n };\n EventWindow.prototype.updateMinMaxDateToEditor = function () {\n var startDate = this.element.querySelector('.e-start');\n var endDate = this.element.querySelector('.e-end');\n if (startDate && endDate) {\n var startObj = startDate.ej2_instances[0];\n var endObj = endDate.ej2_instances[0];\n startObj.min = this.parent.minDate;\n startObj.max = this.parent.maxDate;\n endObj.min = this.parent.minDate;\n endObj.max = this.parent.maxDate;\n startObj.dataBind();\n endObj.dataBind();\n }\n if (this.recurrenceEditor) {\n var untilDate = this.recurrenceEditor.element.querySelector('.e-until-date');\n if (untilDate) {\n var untilObj = untilDate.ej2_instances[0];\n untilObj.min = this.parent.minDate;\n untilObj.max = this.parent.maxDate;\n untilObj.dataBind();\n }\n }\n };\n EventWindow.prototype.updateRepeatLabel = function (repeatRule) {\n if (this.parent.isAdaptive && !this.repeatDialogObject) {\n this.renderRepeatDialog();\n }\n var data = repeatRule ?\n (this.l10n.getConstant('repeats') + ' ' + this.recurrenceEditor.getRuleSummary(repeatRule)) : this.l10n.getConstant('repeat');\n this.repeatStatus.setProperties({ label: data });\n };\n EventWindow.prototype.dialogClose = function (event) {\n if (this.isEnterKey) {\n this.isEnterKey = false;\n return;\n }\n this.dialogEvent = event;\n this.isCrudAction = false;\n this.parent.activeEventData = { event: undefined, element: undefined };\n this.parent.currentAction = null;\n this.dialogObject.hide();\n };\n EventWindow.prototype.resetForm = function () {\n this.fieldValidator.destroyToolTip();\n this.resetFormFields();\n if (!this.parent.isAdaptive && this.recurrenceEditor && !this.recurrenceEditor.isDestroyed) {\n this.recurrenceEditor.resetFields();\n }\n };\n EventWindow.prototype.timezoneChangeStyle = function (value) {\n var timezoneDiv = this.element.querySelector('.' + cls.EVENT_WINDOW_TIME_ZONE_DIV_CLASS);\n var localTimezoneName = this.parent.tzModule.getLocalTimezoneName();\n if (value) {\n addClass([timezoneDiv], cls.ENABLE_CLASS);\n var startTimezoneObj = this.getInstance(cls.EVENT_WINDOW_START_TZ_CLASS);\n var endTimezoneObj = this.getInstance(cls.EVENT_WINDOW_END_TZ_CLASS);\n var timezone = startTimezoneObj.dataSource;\n if (!startTimezoneObj.value || !this.parent.timezone) {\n var found = timezone.some(function (tz) { return tz.Value === localTimezoneName; });\n if (!found) {\n timezone.push({ Value: localTimezoneName, Text: localTimezoneName });\n startTimezoneObj.dataSource = timezone;\n endTimezoneObj.dataSource = timezone;\n startTimezoneObj.dataBind();\n endTimezoneObj.dataBind();\n }\n }\n startTimezoneObj.value = startTimezoneObj.value || this.parent.timezone || localTimezoneName;\n endTimezoneObj.value = endTimezoneObj.value || this.parent.timezone || localTimezoneName;\n startTimezoneObj.dataBind();\n endTimezoneObj.dataBind();\n }\n else {\n removeClass([timezoneDiv], cls.ENABLE_CLASS);\n }\n };\n EventWindow.prototype.resetFormFields = function () {\n var formElement = this.getFormElements(cls.EVENT_WINDOW_DIALOG_CLASS);\n for (var _i = 0, formElement_1 = formElement; _i < formElement_1.length; _i++) {\n var currentElement = formElement_1[_i];\n var columnName = currentElement.name || this.getColumnName(currentElement);\n if (!isNullOrUndefined(columnName) && columnName !== '') {\n this.setDefaultValueToElement(currentElement);\n }\n }\n };\n EventWindow.prototype.eventSave = function (event, alert) {\n if (this.isEnterKey) {\n this.isEnterKey = false;\n return;\n }\n var formElement = this.element.querySelector('.' + cls.FORM_CLASS);\n if (formElement && formElement.classList.contains('e-formvalidator') &&\n !formElement.ej2_instances[0].validate()) {\n return;\n }\n var dataCollection = this.getEventDataFromEditor();\n if (this.processEventValidation(dataCollection.tempData, alert)) {\n return;\n }\n this.eventCrudData = dataCollection.eventData;\n this.dialogEvent = event;\n this.isCrudAction = true;\n this.dialogObject.hide();\n };\n EventWindow.prototype.getEventDataFromEditor = function () {\n var eventObj = extend({}, this.getObjectFromFormData(cls.EVENT_WINDOW_DIALOG_CLASS));\n if (!eventObj.Timezone) {\n eventObj[this.fields.startTimezone] = null;\n eventObj[this.fields.endTimezone] = null;\n }\n delete eventObj.Timezone;\n delete eventObj.Repeat;\n this.setDefaultValueToObject(eventObj);\n eventObj[this.fields.recurrenceRule] = this.recurrenceEditor ? this.recurrenceEditor.getRecurrenceRule() || null : undefined;\n var tempObj = extend({}, eventObj, null, true);\n if (eventObj[this.fields.isAllDay]) {\n eventObj[this.fields.startTime] = (isNullOrUndefined(eventObj[this.fields.startTime])) ? null\n : util.resetTime(new Date(eventObj[this.fields.startTime].getTime()));\n eventObj[this.fields.endTime] = (isNullOrUndefined(eventObj[this.fields.endTime])) ? null\n : util.addDays(util.resetTime(new Date(eventObj[this.fields.endTime].getTime())), 1);\n }\n return { eventData: eventObj, tempData: tempObj };\n };\n EventWindow.prototype.processEventValidation = function (eventObj, alert) {\n var alertType;\n if (isNullOrUndefined(this.parent.editorTemplate)) {\n if (!eventObj[this.fields.startTime] || !eventObj[this.fields.endTime]) {\n this.parent.quickPopup.openValidationError('invalidDateError');\n return true;\n }\n if (eventObj[this.fields.startTime] > eventObj[this.fields.endTime]) {\n this.parent.quickPopup.openValidationError('startEndError');\n return true;\n }\n }\n if (this.recurrenceEditor && this.recurrenceEditor.value && this.recurrenceEditor.value !== '') {\n alertType = this.recurrenceValidation(eventObj[this.fields.startTime], eventObj[this.fields.endTime], alert);\n var isShowAlert = true;\n if (alertType === 'seriesChangeAlert' && this.parent.uiStateValues.isIgnoreOccurrence) {\n isShowAlert = false;\n }\n if (!isNullOrUndefined(alertType) && isShowAlert\n && ((!this.parent.enableRecurrenceValidation && alertType === 'wrongPattern') || this.parent.enableRecurrenceValidation)) {\n this.parent.quickPopup.openRecurrenceValidationAlert(alertType);\n return true;\n }\n }\n return false;\n };\n EventWindow.prototype.processCrudActions = function (eventObj) {\n var _this = this;\n this.parent.uiStateValues.isBlock = false;\n var resourceData = this.getResourceData(eventObj);\n var isResourceEventExpand = (this.parent.activeViewOptions.group.resources.length > 0 ||\n this.parent.resourceCollection.length > 0) && !this.parent.activeViewOptions.group.allowGroupEdit\n && !isNullOrUndefined(resourceData);\n var eventId = this.getEventIdFromForm();\n if (!isNullOrUndefined(eventId)) {\n var eveId_1 = this.parent.eventBase.getEventIDType() === 'string' ? eventId : parseInt(eventId, 10);\n var editedData = this.parent.eventsData.filter(function (data) {\n return data[_this.fields.id] === eveId_1;\n })[0];\n if (isNullOrUndefined(editedData)) {\n editedData = this.parent.blockData.filter(function (data) {\n return data[_this.fields.id] === eveId_1;\n })[0];\n }\n eventObj = extend({}, editedData, eventObj);\n if (eventObj[this.fields.isReadonly]) {\n return false;\n }\n var currentAction = void 0;\n if (!isNullOrUndefined(editedData[this.fields.recurrenceRule])) {\n currentAction = this.parent.currentAction;\n eventObj.Guid = this.parent.activeEventData.event.Guid;\n if (this.parent.currentAction === 'EditOccurrence') {\n if (!eventObj[this.fields.recurrenceID]) {\n eventObj[this.fields.id] = this.parent.eventBase.getEventMaxID();\n eventObj.Guid = this.parent.activeEventData.event.Guid;\n }\n else {\n eveId_1 = eventObj[this.fields.recurrenceID];\n currentAction = null;\n }\n if (this.parent.enableRecurrenceValidation && this.editOccurrenceValidation(eveId_1, eventObj)) {\n return true;\n }\n }\n if (this.parent.currentAction === 'EditSeries' || eventObj[this.fields.id] !== editedData[this.fields.id]) {\n eventObj[this.fields.recurrenceID] = editedData[this.fields.id];\n }\n else if (this.parent.currentAction === 'EditFollowingEvents') {\n eventObj[this.fields.id] = this.parent.eventBase.getEventMaxID();\n eventObj[this.fields.followingID] = editedData[this.fields.id];\n }\n }\n if (isResourceEventExpand) {\n this.resourceSaveEvent(eventObj, 'Save', currentAction);\n }\n else {\n this.parent.saveEvent(eventObj, currentAction);\n }\n }\n else {\n this.parent.currentAction = 'Add';\n if (isResourceEventExpand) {\n this.resourceSaveEvent(eventObj, this.parent.currentAction);\n }\n else {\n eventObj[this.fields.id] = this.parent.eventBase.getEventMaxID();\n this.parent.addEvent(eventObj);\n }\n }\n return this.parent.uiStateValues.isBlock;\n };\n EventWindow.prototype.getResourceData = function (eventObj) {\n var resourceData = null;\n if (!isNullOrUndefined(this.parent.resourceBase) && !isNullOrUndefined(this.parent.resourceBase.resourceCollection)\n && this.parent.resourceBase.resourceCollection.length > 0) {\n var lastResourceData = this.parent.resourceBase.resourceCollection.slice(-1)[0];\n resourceData = eventObj[lastResourceData.field];\n }\n return resourceData;\n };\n EventWindow.prototype.getObjectFromFormData = function (className) {\n var formElement = this.getFormElements(className);\n var eventObj = {};\n for (var _i = 0, formElement_2 = formElement; _i < formElement_2.length; _i++) {\n var currentElement = formElement_2[_i];\n var columnName = currentElement.name || this.getColumnName(currentElement);\n if (!isNullOrUndefined(columnName) && columnName !== '') {\n eventObj[columnName] = this.getValueFromElement(currentElement);\n }\n }\n return eventObj;\n };\n EventWindow.prototype.setDefaultValueToObject = function (eventObj) {\n if (!isNullOrUndefined(eventObj[this.fields.subject])) {\n eventObj[this.fields.subject] = eventObj[this.fields.subject] || this.parent.eventSettings.fields.subject.default\n || this.l10n.getConstant('addTitle');\n }\n if (!isNullOrUndefined(eventObj[this.fields.location])) {\n eventObj[this.fields.location] = eventObj[this.fields.location] || this.parent.eventSettings.fields.location.default;\n }\n if (!isNullOrUndefined(eventObj[this.fields.description])) {\n eventObj[this.fields.description] = eventObj[this.fields.description] || this.parent.eventSettings.fields.description.default;\n }\n };\n EventWindow.prototype.recurrenceValidation = function (startDate, endDate, alert) {\n var alertMessage;\n var recEditor = this.recurrenceEditor;\n var interval = this.getInstance('e-repeat-interval.e-numerictextbox').value;\n if (alert !== this.l10n.getConstant('ok')) {\n var activeEvent = this.parent.activeEventData.event;\n var excludedEvents = [];\n if ((this.parent.currentAction === 'EditSeries' || this.parent.currentAction === 'EditFollowingEvents')\n && !isNullOrUndefined(activeEvent)) {\n var eventStartTime = activeEvent[this.parent.eventFields.startTime];\n var seriesEvents = this.parent.eventBase.getSeriesEvents(this.eventData, eventStartTime);\n if (seriesEvents.length > 0) {\n excludedEvents = this.parent.eventBase.getEditedOccurrences(seriesEvents, eventStartTime);\n }\n else {\n var event_2 = this.parent.eventBase.getEventById(activeEvent[this.parent.eventFields.id]);\n excludedEvents = this.parent.eventBase.getEditedOccurrences([event_2], eventStartTime);\n }\n if (this.parent.currentAction === 'EditSeries'\n && !isNullOrUndefined(this.eventData[this.parent.eventFields.recurrenceException])) {\n excludedEvents.push(this.eventData);\n }\n }\n if (excludedEvents.length > 0) {\n alertMessage = 'seriesChangeAlert';\n }\n if (this.getInstance('e-end-on-left .e-ddl .e-dropdownlist').value === 'until' &&\n this.getInstance('e-end-on-date .e-datepicker').value < startDate) {\n alertMessage = 'wrongPattern';\n }\n if (isNullOrUndefined(alertMessage)) {\n var types = recEditor.value.split(';')[1].split('=')[1].split(',');\n var obj = { 'SU': 0, 'MO': 1, 'TU': 2, 'WE': 3, 'TH': 4, 'FR': 5, 'SA': 6 };\n var temp = [];\n var tempDiff = [];\n var tempValue = void 0;\n switch (recEditor.value.split(';')[0].split('=')[1]) {\n case 'DAILY':\n if ((((endDate.getTime() - startDate.getTime()) / (1000 * 3600)) > (interval * 24))) {\n alertMessage = 'createError';\n }\n break;\n case 'WEEKLY':\n types = recEditor.value.split(';')[1].split('=')[1].split(',');\n for (var index = 0; index < types.length * (interval + 1); index++) {\n temp[index] = (types.length > index) ? obj[types[index]] : temp[index - types.length] + (7 * interval);\n }\n tempValue = temp.sort(function (a, b) { return a - b; });\n for (var index = 1; index < tempValue.length; index++) {\n tempDiff.push(tempValue[index] - tempValue[index - 1]);\n }\n if ((((endDate.getTime() - startDate.getTime()) / (1000 * 3600)) >= Math.min.apply(Math, tempDiff) * 24)\n || isNullOrUndefined(interval)) {\n alertMessage = 'createError';\n }\n break;\n case 'MONTHLY':\n if (endDate.getTime() >= new Date(+startDate).setMonth(startDate.getMonth() + interval)) {\n alertMessage = 'createError';\n }\n break;\n case 'YEARLY':\n if (endDate.getTime() >= new Date(+startDate).setFullYear(startDate.getFullYear() + interval)) {\n alertMessage = 'createError';\n }\n break;\n }\n }\n }\n else {\n if (endDate.getTime() >= new Date(+startDate).setMonth(startDate.getMonth() + interval)) {\n alertMessage = 'createError';\n }\n if (isNullOrUndefined(alertMessage)) {\n this.parent.quickPopup.quickDialog.hide();\n }\n }\n if (isNullOrUndefined(interval)) {\n alertMessage = 'createError';\n }\n return alertMessage;\n };\n EventWindow.prototype.getRecurrenceIndex = function (recColl, event) {\n var recIndex;\n for (var index = 0; index < recColl.length; index++) {\n if (event[this.fields.startTime].valueOf() === recColl[index][this.fields.startTime].valueOf()) {\n recIndex = index;\n break;\n }\n }\n return recIndex;\n };\n EventWindow.prototype.trimAllDay = function (data) {\n if (data[this.fields.isAllDay]) {\n var temp = util.addDays(new Date(+data[this.fields.endTime]), -1).getTime();\n data[this.fields.endTime] = (+data[this.fields.startTime] > temp) ? data[this.fields.endTime] : new Date(temp);\n }\n };\n EventWindow.prototype.editOccurrenceValidation = function (eventId, currentData, editData) {\n var _this = this;\n if (editData === void 0) {\n editData = this.eventData;\n }\n var recurColl = this.parent.getOccurrencesByID(eventId);\n var excludedDatas = this.parent.eventsData.filter(function (data) {\n return data[_this.fields.recurrenceID] === eventId;\n });\n excludedDatas.map(function (data) { return recurColl.push(extend({}, data)); });\n currentData = extend({}, currentData);\n this.trimAllDay(currentData);\n for (var _i = 0, recurColl_1 = recurColl; _i < recurColl_1.length; _i++) {\n var data = recurColl_1[_i];\n this.trimAllDay(data);\n }\n this.parent.eventBase.sortByTime(recurColl);\n var index = this.getRecurrenceIndex(recurColl, editData);\n if (isNullOrUndefined(index)) {\n return false;\n }\n if (index === 0) {\n if (!isNullOrUndefined(recurColl[index + 1])) {\n if (!(util.resetTime(new Date(+recurColl[index + 1][this.fields.startTime])).getTime() >\n util.resetTime(new Date(+currentData[this.fields.endTime])).getTime()) &&\n (util.resetTime(new Date(+recurColl[recurColl.length - 1][this.fields.endTime])).getTime() >=\n util.resetTime(new Date(+currentData[this.fields.startTime])).getTime())) {\n this.parent.quickPopup.openRecurrenceValidationAlert('sameDayAlert');\n return true;\n }\n else if (util.resetTime(new Date(+recurColl[recurColl.length - 1][this.fields.endTime])).getTime() <\n util.resetTime(new Date(+currentData[this.fields.startTime])).getTime()) {\n this.parent.quickPopup.openRecurrenceValidationAlert('occurrenceAlert');\n return true;\n }\n }\n return false;\n }\n else {\n if (index === recurColl.length - 1) {\n if (!(util.resetTime(new Date(+recurColl[index - 1][this.fields.endTime])).getTime() <\n util.resetTime(new Date(+currentData[this.fields.startTime])).getTime()) &&\n (util.resetTime(new Date(+recurColl[(recurColl.length - 1) - index][this.fields.startTime])).getTime() <=\n util.resetTime(new Date(+currentData[this.fields.endTime])).getTime())) {\n this.parent.quickPopup.openRecurrenceValidationAlert('sameDayAlert');\n return true;\n }\n else if (util.resetTime(new Date(+recurColl[(recurColl.length - 1) - index][this.fields.endTime])).getTime() >\n util.resetTime(new Date(+currentData[this.fields.startTime])).getTime()) {\n this.parent.quickPopup.openRecurrenceValidationAlert('occurrenceAlert');\n return true;\n }\n }\n else if (!(((util.resetTime(new Date(+recurColl[index - 1][this.fields.endTime])).getTime() <\n util.resetTime(new Date(+currentData[this.fields.startTime])).getTime()) ||\n (util.resetTime(new Date(+recurColl[0][this.fields.startTime])).getTime() >\n util.resetTime(new Date(+currentData[this.fields.startTime])).getTime())) &&\n ((util.resetTime(new Date(+recurColl[index + 1][this.fields.startTime])).getTime() >\n util.resetTime(new Date(+currentData[this.fields.endTime])).getTime()) ||\n (util.resetTime(new Date(+recurColl[recurColl.length - 1][this.fields.endTime])).getTime() <\n util.resetTime(new Date(+currentData[this.fields.startTime])).getTime())))) {\n this.parent.quickPopup.openRecurrenceValidationAlert('sameDayAlert');\n return true;\n }\n else if ((util.resetTime(new Date(+recurColl[index + 1][this.fields.endTime])).getTime() <\n util.resetTime(new Date(+currentData[this.fields.startTime])).getTime()) ||\n (util.resetTime(new Date(+recurColl[index - 1][this.fields.startTime])).getTime() >\n util.resetTime(new Date(+currentData[this.fields.endTime])).getTime())) {\n this.parent.quickPopup.openRecurrenceValidationAlert('occurrenceAlert');\n return true;\n }\n }\n return false;\n };\n EventWindow.prototype.resourceSaveEvent = function (eventObj, action, currentAction) {\n var _this = this;\n var lastResourceData = this.parent.resourceBase.resourceCollection.slice(-1)[0];\n var resourceData = eventObj[lastResourceData.field];\n resourceData = (resourceData instanceof Array) ? resourceData : [resourceData];\n var lastLevel = this.parent.resourceBase.lastResourceLevel;\n var eventList = [];\n var _loop_2 = function (i) {\n var events = extend({}, eventObj, null, true);\n events[this_2.fields.id] = this_2.parent.eventBase.getEventMaxID();\n var temp = [];\n var addValues = function () {\n if (action === 'Save' && i === resourceData.length - 1) {\n if (temp.length > 0) {\n temp[0][_this.fields.id] = eventObj[_this.fields.id];\n for (var k = 1; k < temp.length; k++) {\n temp[k][_this.fields.id] = _this.parent.eventBase.getEventMaxID(i);\n eventList.push(temp[k]);\n _this.parent.saveEvent(temp[0], currentAction);\n }\n }\n else {\n events[_this.fields.id] = eventObj[_this.fields.id];\n _this.parent.saveEvent(events, currentAction);\n }\n }\n else {\n if (temp.length > 0) {\n for (var j = 0; j < temp.length; j++) {\n temp[j][_this.fields.id] = _this.parent.eventBase.getEventMaxID(j);\n eventList.push(temp[j]);\n }\n }\n else {\n events[_this.fields.id] = _this.parent.eventBase.getEventMaxID(i);\n eventList.push(events);\n }\n }\n };\n if (this_2.parent.activeViewOptions.group.byGroupID && (!isNullOrUndefined(lastLevel))) {\n var lastResource = lastResourceData.dataSource;\n var resCol = this_2.parent.resourceCollection;\n var index = void 0;\n if (resCol.length > 1) {\n index = util.findIndexInData(lastResource, lastResourceData.idField, resourceData[i], events, resCol);\n }\n else {\n index = util.findIndexInData(lastResource, lastResourceData.idField, resourceData[i]);\n }\n if (index < 0) {\n return { value: void 0 };\n }\n var groupId_1 = lastResource[index][lastResourceData.groupIDField];\n var filter = lastLevel.filter(function (obj) { return obj.resourceData[lastResourceData.idField] === resourceData[i]; }).\n filter(function (obj) { return obj.resourceData[lastResourceData.groupIDField] === groupId_1; })[0];\n var groupOrder = filter.groupOrder;\n for (var index_1 = 0; index_1 < this_2.parent.resourceBase.resourceCollection.length; index_1++) {\n var field = this_2.parent.resourceBase.resourceCollection[index_1].field;\n events[field] = (groupOrder[index_1] instanceof Array) ? groupOrder[index_1][0] : groupOrder[index_1];\n }\n addValues();\n }\n else {\n for (var index = 0; index < this_2.parent.resourceBase.resourceCollection.length - 1; index++) {\n var field = this_2.parent.resourceBase.resourceCollection[index].field;\n if (events[field] instanceof Array && events[field].length > 1) {\n for (var k = 0; k < events[field].length; k++) {\n var event_3 = extend({}, events, null, true);\n event_3[field] = eventObj[field][k];\n event_3[lastResourceData.field] = resourceData[i];\n temp.push(event_3);\n }\n }\n else {\n if (temp.length === 0) {\n events[field] = (eventObj[field] instanceof Array) ?\n eventObj[field][0] : eventObj[field];\n events[lastResourceData.field] = resourceData[i];\n }\n else {\n for (var l = 0; l < temp.length; l++) {\n temp[l][field] = (eventObj[field] instanceof Array) ?\n eventObj[field][0] : eventObj[field];\n }\n }\n }\n }\n events[lastResourceData.field] = resourceData[i];\n addValues();\n }\n };\n var this_2 = this;\n for (var i = 0; i < resourceData.length; i++) {\n var state_1 = _loop_2(i);\n if (typeof state_1 === \"object\")\n return state_1.value;\n }\n if (eventList.length > 0) {\n for (var _i = 0, eventList_1 = eventList; _i < eventList_1.length; _i++) {\n var event_4 = eventList_1[_i];\n event_4[this.fields.recurrenceException] = null;\n event_4[this.fields.recurrenceID] = null;\n }\n this.parent.addEvent(eventList);\n }\n };\n EventWindow.prototype.getEventIdFromForm = function () {\n return this.element.querySelector('.' + cls.FORM_CLASS).getAttribute('data-id');\n };\n EventWindow.prototype.getFormElements = function (className) {\n var elements = [];\n if (className === cls.EVENT_WINDOW_DIALOG_CLASS) {\n elements = [].slice.call(this.element.querySelectorAll('.' + EVENT_FIELD));\n }\n else {\n elements = [].slice.call(this.parent.element.querySelectorAll('.' + className + ' .' + EVENT_FIELD));\n }\n return elements;\n };\n EventWindow.prototype.getValueFromElement = function (element) {\n var value;\n if (element.classList.contains('e-datepicker')) {\n value = element.ej2_instances[0].value;\n }\n else if (element.classList.contains('e-datetimepicker')) {\n value = element.ej2_instances[0].value;\n }\n else if (element.classList.contains('e-dropdownlist')) {\n value = element.ej2_instances[0].value;\n }\n else if (element.classList.contains('e-multiselect')) {\n value = element.ej2_instances[0].value;\n }\n else if (element.classList.contains('e-checkbox')) {\n value = element.ej2_instances[0].checked;\n }\n else {\n if (element.type === 'checkbox') {\n value = element.checked;\n }\n else {\n value = SanitizeHtmlHelper.sanitize(element.value);\n }\n }\n return value;\n };\n EventWindow.prototype.setValueToElement = function (element, value) {\n if (element.classList.contains('e-datepicker')) {\n var instance = element.ej2_instances[0];\n instance.value = value;\n instance.dataBind();\n }\n else if (element.classList.contains('e-datetimepicker')) {\n var instance = element.ej2_instances[0];\n if (instance.element.classList.contains(cls.EVENT_WINDOW_START_CLASS)) {\n this.eventWindowTime.startTime = new Date('' + value);\n }\n else {\n this.eventWindowTime.endTime = new Date('' + value);\n }\n instance.value = value;\n instance.dataBind();\n }\n else if (element.classList.contains('e-dropdownlist')) {\n var instance = element.ej2_instances[0];\n instance.value = value;\n instance.dataBind();\n }\n else if (element.classList.contains('e-multiselect')) {\n var instance = element.ej2_instances[0];\n instance.value = [];\n instance.value = ((value instanceof Array) ? value : [value]);\n instance.dataBind();\n }\n else if (element.classList.contains('e-checkbox')) {\n var instance = element.ej2_instances[0];\n instance.checked = value;\n instance.dataBind();\n }\n else {\n if (element.type !== 'checkbox') {\n element.value = value || '';\n }\n else {\n element.checked = value;\n }\n }\n };\n EventWindow.prototype.setDefaultValueToElement = function (element) {\n if (element.classList.contains('e-datepicker')) {\n var instance = element.ej2_instances[0];\n instance.value = this.parent.getCurrentTime();\n instance.dataBind();\n }\n else if (element.classList.contains('e-datetimepicker')) {\n var instance = element.ej2_instances[0];\n var dateValue = this.parent.getCurrentTime();\n this.eventWindowTime = { startTime: dateValue, endTime: dateValue };\n instance.value = dateValue;\n instance.dataBind();\n }\n else if (element.classList.contains('e-dropdownlist')) {\n var instance = element.ej2_instances[0];\n instance.value = null;\n instance.dataBind();\n }\n else if (element.classList.contains('e-multiselect')) {\n var instance = element.ej2_instances[0];\n instance.value = [];\n instance.dataBind();\n }\n else if (element.classList.contains('e-checkbox')) {\n var instance = element.ej2_instances[0];\n instance.checked = false;\n instance.dataBind();\n }\n else {\n if (element.type === 'checkbox') {\n element.checked = false;\n }\n else {\n element.value = '';\n }\n }\n };\n EventWindow.prototype.getInstance = function (className) {\n var element = this.element.querySelector('.' + className);\n return element ? element.ej2_instances[0] : null;\n };\n EventWindow.prototype.eventDelete = function (event) {\n if (this.isEnterKey) {\n this.isEnterKey = false;\n return;\n }\n switch (this.parent.currentAction) {\n case 'EditOccurrence':\n if (!isNullOrUndefined(this.parent.activeEventData.event[this.parent.eventFields.recurrenceRule])) {\n this.parent.currentAction = 'DeleteOccurrence';\n }\n else {\n this.parent.currentAction = 'Delete';\n }\n break;\n case 'EditSeries':\n this.parent.currentAction = 'DeleteSeries';\n break;\n case 'Save':\n this.parent.currentAction = 'Delete';\n break;\n case 'EditFollowingEvents':\n if (!isNullOrUndefined(this.parent.activeEventData.event[this.parent.eventFields.recurrenceRule])) {\n this.parent.currentAction = 'DeleteFollowingEvents';\n }\n break;\n }\n this.dialogEvent = event;\n this.isCrudAction = false;\n this.dialogObject.hide();\n this.parent.quickPopup.openDeleteAlert();\n };\n EventWindow.prototype.getRecurrenceEditorInstance = function () {\n if (this.parent.isAdaptive && !this.repeatDialogObject) {\n this.renderRepeatDialog();\n }\n return this.recurrenceEditor;\n };\n EventWindow.prototype.destroyComponents = function () {\n var formElements = this.getFormElements(cls.EVENT_WINDOW_DIALOG_CLASS);\n for (var _i = 0, formElements_3 = formElements; _i < formElements_3.length; _i++) {\n var element = formElements_3[_i];\n var instance = void 0;\n if (element.classList.contains('e-datetimepicker')) {\n instance = element.ej2_instances;\n }\n else if (element.classList.contains('e-datepicker')) {\n instance = element.ej2_instances;\n }\n else if (element.classList.contains('e-checkbox')) {\n instance = element.ej2_instances;\n }\n else if (element.classList.contains('e-dropdownlist')) {\n instance = element.ej2_instances;\n }\n else if (element.classList.contains('e-multiselect')) {\n instance = element.ej2_instances;\n }\n if (instance && instance[0]) {\n instance[0].destroy();\n }\n }\n if (this.buttonObj) {\n this.buttonObj.destroy();\n }\n };\n EventWindow.prototype.destroy = function (isIgnore) {\n if (this.parent && !this.parent.isDestroyed) {\n this.parent.resetTemplates(['editorTemplate']);\n }\n this.destroyComponents();\n if (this.recurrenceEditor) {\n this.recurrenceEditor.destroy();\n this.recurrenceEditor = null;\n }\n if (this.fieldValidator) {\n this.fieldValidator.destroy();\n this.fieldValidator = null;\n }\n if (this.repeatDialogObject) {\n this.repeatDialogObject.destroy();\n this.repeatDialogObject = null;\n }\n if (this.dialogObject) {\n if (this.dialogObject.element) {\n EventHandler.remove(this.dialogObject.element, 'keydown', this.preventEventSave);\n }\n this.dialogObject.destroy();\n this.dialogObject = null;\n }\n if (this.element) {\n remove(this.element);\n this.element = null;\n }\n if (!isIgnore) {\n this.l10n = null;\n this.parent = null;\n this.fields = null;\n this.buttonObj = null;\n this.repeatStatus = null;\n this.eventWindowTime = null;\n }\n };\n return EventWindow;\n}());\nexport { EventWindow };\n","import { append, addClass, remove, isNullOrUndefined, setStyleAttribute, createElement } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\nimport * as cls from '../base/css-constant';\nimport * as util from '../base/util';\n/**\n * Virtual Scroll\n */\nvar VirtualScroll = /** @class */ (function () {\n function VirtualScroll(parent) {\n this.translateY = 0;\n this.itemSize = 60;\n this.bufferCount = 3;\n this.renderedLength = 0;\n this.averageRowHeight = 0;\n this.isScrollHeightNull = true;\n this.parent = parent;\n this.addEventListener();\n }\n VirtualScroll.prototype.addEventListener = function () {\n if (!this.parent || this.parent && this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.virtualScroll, this.virtualScrolling, this);\n };\n VirtualScroll.prototype.removeEventListener = function () {\n if (!this.parent || this.parent && this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.virtualScroll, this.virtualScrolling);\n };\n VirtualScroll.prototype.getRenderedCount = function () {\n this.setItemSize();\n return Math.ceil(this.parent.element.clientHeight / this.itemSize) + this.bufferCount;\n };\n VirtualScroll.prototype.setTranslateValue = function () {\n var resWrap = this.parent.element.querySelector('.' + cls.RESOURCE_COLUMN_WRAP_CLASS);\n var conWrap = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);\n var eventWrap = this.parent.element.querySelector('.' + cls.EVENT_TABLE_CLASS);\n var timeIndicator = this.parent.element.querySelector('.' + cls.CURRENT_TIMELINE_CLASS);\n this.renderVirtualTrackHeight(conWrap, resWrap);\n this.setTranslate(resWrap, conWrap, eventWrap, timeIndicator);\n };\n VirtualScroll.prototype.renderVirtualTrackHeight = function (contentWrap, resourceWrap) {\n this.parent.resourceBase.setExpandedResources();\n if (this.isScrollHeightNull) {\n var wrap = createElement('div', { className: cls.VIRTUAL_TRACK_CLASS });\n var resWrap = [].slice.call((resourceWrap).querySelectorAll('table td'));\n var startIndex_1 = parseInt(resWrap[0].getAttribute('data-group-index'), 10);\n var endIndex_1 = parseInt(resWrap[resWrap.length - 1].getAttribute('data-group-index'), 10);\n this.parent.resourceBase.renderedResources = this.parent.resourceBase.expandedResources.filter(function (resource) {\n return (resource.groupIndex >= startIndex_1 && resource.groupIndex <= endIndex_1);\n });\n this.setItemSize();\n wrap.style.height = (this.parent.resourceBase.expandedResources.length * this.itemSize) + 'px';\n this.isScrollHeightNull = false;\n var virtual = this.parent.element.querySelector('.' + cls.VIRTUAL_TRACK_CLASS);\n if (!isNullOrUndefined(virtual)) {\n remove(virtual);\n }\n contentWrap.appendChild(wrap);\n }\n };\n VirtualScroll.prototype.renderVirtualTrack = function (contentWrap) {\n var wrap = createElement('div', { className: cls.VIRTUAL_TRACK_CLASS });\n wrap.style.height = (this.parent.resourceBase.expandedResources.length * this.itemSize) + 'px';\n contentWrap.appendChild(wrap);\n };\n VirtualScroll.prototype.updateVirtualScrollHeight = function () {\n var virtual = this.parent.element.querySelector('.' + cls.VIRTUAL_TRACK_CLASS);\n var lastResourceIndex = this.parent.resourceBase.expandedResources[this.parent.resourceBase.expandedResources.length - 1].groupIndex;\n var lastRenderIndex = this.parent.resourceBase.renderedResources[this.parent.resourceBase.renderedResources.length - 1].groupIndex;\n if (lastRenderIndex !== lastResourceIndex) {\n var conTable = this.parent.element.querySelector('.' + cls.CONTENT_TABLE_CLASS);\n this.renderedLength = conTable.querySelector('tbody').children.length;\n virtual.style.height = (conTable.offsetHeight + (this.parent.resourceBase.expandedResources.length - (this.renderedLength)) *\n conTable.offsetHeight / this.renderedLength) + 'px';\n }\n else {\n virtual.style.height = '';\n }\n this.averageRowHeight = virtual.offsetHeight / this.parent.resourceBase.expandedResources.length;\n };\n VirtualScroll.prototype.updateVirtualTrackHeight = function (wrap) {\n var resourceCount = this.parent.resourceBase.renderedResources.length;\n if (resourceCount !== this.getRenderedCount()) {\n wrap.style.height = this.parent.element.querySelector('.e-content-wrap').clientHeight + 'px';\n var resWrap = this.parent.element.querySelector('.' + cls.RESOURCE_COLUMN_WRAP_CLASS);\n var conWrap = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);\n var eventWrap = this.parent.element.querySelector('.' + cls.EVENT_TABLE_CLASS);\n this.translateY = 0;\n this.setTranslate(resWrap, conWrap, eventWrap);\n }\n else {\n var lastRenderIndex = this.parent.resourceBase.renderedResources[resourceCount - 1].groupIndex;\n var lastCollIndex = this.parent.resourceBase.expandedResources[this.parent.resourceBase.expandedResources.length - 1].groupIndex;\n var renderedResCount = resourceCount + (lastCollIndex - lastRenderIndex);\n renderedResCount = (renderedResCount > this.parent.resourceBase.expandedResources.length) ?\n this.parent.resourceBase.expandedResources.length : renderedResCount;\n wrap.style.height = (renderedResCount * this.itemSize) + 'px';\n }\n };\n VirtualScroll.prototype.setItemSize = function () {\n this.itemSize = util.getElementHeightFromClass(this.parent.activeView.element, cls.WORK_CELLS_CLASS) || this.itemSize;\n };\n VirtualScroll.prototype.renderEvents = function () {\n this.setTabIndex();\n this.parent.refreshEvents(false);\n this.parent.notify(events.contentReady, {});\n this.parent.hideSpinner();\n };\n VirtualScroll.prototype.virtualScrolling = function () {\n var _this = this;\n if (this.parent.quickPopup) {\n this.parent.quickPopup.quickPopupHide();\n this.parent.quickPopup.morePopup.hide();\n }\n var resWrap = this.parent.element.querySelector('.' + cls.RESOURCE_COLUMN_WRAP_CLASS);\n var conWrap = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);\n var eventWrap = this.parent.element.querySelector('.' + cls.EVENT_TABLE_CLASS);\n var timeIndicator = this.parent.element.querySelector('.' + cls.CURRENT_TIMELINE_CLASS);\n var conTable = this.parent.element.querySelector('.' + cls.CONTENT_TABLE_CLASS);\n this.renderedLength = resWrap.querySelector('tbody').children.length;\n var firstTDIndex = parseInt(resWrap.querySelector('tbody td').getAttribute('data-group-index'), 10);\n var scrollHeight = this.parent.rowAutoHeight ?\n (conTable.offsetHeight - conWrap.offsetHeight) : this.bufferCount * this.itemSize;\n addClass([conWrap], 'e-transition');\n var resCollection = [];\n if ((conWrap.scrollTop) - this.translateY < 0) {\n resCollection = this.upScroll(conWrap, firstTDIndex);\n }\n else if (conWrap.scrollTop - this.translateY > scrollHeight) {\n resCollection = this.downScroll(conWrap, firstTDIndex);\n }\n if (!isNullOrUndefined(resCollection) && resCollection.length > 0) {\n this.parent.showSpinner();\n var selectedEle = this.parent.getSelectedElements();\n this.focusedEle = selectedEle[selectedEle.length - 1] || this.focusedEle;\n this.updateContent(resWrap, conWrap, eventWrap, resCollection);\n this.setTranslate(resWrap, conWrap, eventWrap, timeIndicator);\n if (this.parent.dragAndDropModule && this.parent.dragAndDropModule.actionObj.action === 'drag') {\n this.parent.dragAndDropModule.navigationWrapper();\n }\n window.clearTimeout(this.timeValue);\n this.timeValue = window.setTimeout(function () { _this.renderEvents(); }, 250);\n }\n };\n VirtualScroll.prototype.upScroll = function (conWrap, firstTDIndex) {\n var index = 0;\n index = (~~(conWrap.scrollTop / this.itemSize) + Math.ceil(conWrap.clientHeight / this.itemSize)) - this.renderedLength;\n if (this.parent.rowAutoHeight) {\n index = (index > firstTDIndex) ? firstTDIndex - this.bufferCount : index;\n }\n index = (index > 0) ? index : 0;\n var prevSetCollection = this.getBufferCollection(index, index + this.renderedLength);\n this.parent.resourceBase.renderedResources = prevSetCollection;\n if (firstTDIndex === 0) {\n this.translateY = conWrap.scrollTop;\n }\n else {\n var height = (this.parent.rowAutoHeight) ? this.averageRowHeight : this.itemSize;\n height = (height > 0) ? height : this.itemSize;\n this.translateY = (conWrap.scrollTop - (this.bufferCount * height) > 0) ?\n conWrap.scrollTop - (this.bufferCount * height) : 0;\n }\n return prevSetCollection;\n };\n VirtualScroll.prototype.downScroll = function (conWrap, firstTDIndex) {\n var lastResource = this.parent.resourceBase.\n renderedResources[this.parent.resourceBase.renderedResources.length - 1].groupIndex;\n var lastResourceIndex = this.parent.resourceBase.expandedResources[this.parent.resourceBase.expandedResources.length - 1].groupIndex;\n if (lastResource === lastResourceIndex) {\n return null;\n }\n var nextSetResIndex = 0;\n nextSetResIndex = ~~(conWrap.scrollTop / this.itemSize);\n if (this.parent.rowAutoHeight) {\n nextSetResIndex = ~~((conWrap.scrollTop - this.translateY) / this.averageRowHeight) + firstTDIndex;\n nextSetResIndex = (nextSetResIndex > firstTDIndex + this.bufferCount) ? nextSetResIndex : firstTDIndex + this.bufferCount;\n }\n var lastIndex = nextSetResIndex + this.renderedLength;\n lastIndex = (lastIndex > this.parent.resourceBase.expandedResources.length) ?\n nextSetResIndex + (this.parent.resourceBase.expandedResources.length - nextSetResIndex) : lastIndex;\n var nextSetCollection = this.getBufferCollection(lastIndex - this.renderedLength, lastIndex);\n this.translateY = conWrap.scrollTop;\n return nextSetCollection;\n };\n VirtualScroll.prototype.updateContent = function (resWrap, conWrap, eventWrap, resCollection) {\n var renderedLength = resWrap.querySelector('tbody').children.length;\n if (document.activeElement && document.activeElement.classList.contains(cls.RESOURCE_CELLS_CLASS)) {\n this.isResourceCell = true;\n this.parent.element.focus();\n }\n for (var i = 0; i < renderedLength; i++) {\n remove(resWrap.querySelector('tbody tr'));\n remove(conWrap.querySelector('tbody tr'));\n remove(eventWrap.querySelector('div'));\n }\n this.parent.resourceBase.renderedResources = resCollection;\n var resourceRows = this.parent.resourceBase.getContentRows(resCollection, true);\n var contentRows = this.parent.activeView.getContentRows();\n var eventRows = this.parent.activeView.getEventRows(resCollection.length);\n append(resourceRows, resWrap.querySelector('tbody'));\n append(contentRows, conWrap.querySelector('tbody'));\n append(eventRows, eventWrap);\n };\n VirtualScroll.prototype.getBufferCollection = function (startIndex, endIndex) {\n return this.parent.resourceBase.expandedResources.slice(startIndex, endIndex);\n };\n VirtualScroll.prototype.setTranslate = function (resWrap, conWrap, eventWrap, timeIndicator) {\n setStyleAttribute(resWrap.querySelector('table'), { transform: \"translateY(\" + this.translateY + \"px)\" });\n setStyleAttribute(conWrap.querySelector('table'), { transform: \"translateY(\" + this.translateY + \"px)\" });\n setStyleAttribute(eventWrap, { transform: \"translateY(\" + this.translateY + \"px)\" });\n if (!isNullOrUndefined(timeIndicator)) {\n setStyleAttribute(timeIndicator, { transform: \"translateY(\" + this.translateY + \"px)\" });\n }\n };\n VirtualScroll.prototype.updateFocusedWorkCell = function () {\n if (this.focusedEle) {\n var date = parseInt(this.focusedEle.getAttribute('data-date'), 10);\n var groupIndex = parseInt(this.focusedEle.getAttribute('data-group-index'), 10);\n var ele = this.parent.element.querySelector(\".\" + cls.WORK_CELLS_CLASS + \"[data-date=\\\"\" + date + \"\\\"][data-group-index=\\\"\" + groupIndex + \"\\\"]\");\n if (ele) {\n this.parent.addSelectedClass([ele], ele, true);\n }\n this.focusedEle = null;\n }\n };\n VirtualScroll.prototype.setTabIndex = function () {\n var resColWrap = this.parent.element.querySelector('.' + cls.RESOURCE_COLUMN_WRAP_CLASS);\n var resCells = [].slice.call(this.parent.element.querySelectorAll('.' + cls.RESOURCE_CELLS_CLASS));\n if (resCells && resColWrap) {\n resCells.forEach(function (element) {\n if (element.getBoundingClientRect().top >= resColWrap.getBoundingClientRect().top) {\n element.setAttribute('tabindex', '0');\n }\n });\n }\n var focusResCell = this.parent.element.querySelector(\".\" + cls.RESOURCE_CELLS_CLASS + \"[tabindex=\\\"\" + 0 + \"\\\"]\");\n if (this.isResourceCell && focusResCell) {\n focusResCell.focus();\n this.isResourceCell = false;\n }\n };\n VirtualScroll.prototype.destroy = function () {\n this.removeEventListener();\n };\n return VirtualScroll;\n}());\nexport { VirtualScroll };\n","import { isNullOrUndefined, addClass, removeClass } from '@syncfusion/ej2-base';\nimport { VirtualScroll } from '../actions/virtual-scroll';\nimport { EventTooltip } from '../popups/event-tooltip';\nimport * as cls from '../base/css-constant';\n/**\n * Schedule DOM rendering\n */\nvar Render = /** @class */ (function () {\n function Render(parent) {\n this.parent = parent;\n }\n Render.prototype.render = function (viewName, isDataRefresh) {\n if (isDataRefresh === void 0) { isDataRefresh = true; }\n this.initializeLayout(viewName);\n if (this.parent.activeView && isDataRefresh) {\n this.parent.crudModule.refreshDataManager();\n }\n };\n Render.prototype.initializeLayout = function (viewName) {\n if (this.parent.activeView) {\n this.parent.resetTemplates();\n this.parent.activeView.removeEventListener();\n this.parent.activeView.destroy();\n }\n switch (viewName) {\n case 'Day':\n this.parent.activeView = this.parent.dayModule;\n break;\n case 'Week':\n this.parent.activeView = this.parent.weekModule;\n break;\n case 'WorkWeek':\n this.parent.activeView = this.parent.workWeekModule;\n break;\n case 'Month':\n this.parent.activeView = this.parent.monthModule;\n break;\n case 'Year':\n this.parent.activeView = this.parent.yearModule;\n break;\n case 'Agenda':\n this.parent.activeView = this.parent.agendaModule;\n break;\n case 'MonthAgenda':\n this.parent.activeView = this.parent.monthAgendaModule;\n break;\n case 'TimelineDay':\n this.parent.activeView = this.parent.timelineViewsModule;\n this.parent.activeView.viewClass = 'e-timeline-day-view';\n break;\n case 'TimelineWorkWeek':\n this.parent.activeView = this.parent.timelineViewsModule;\n this.parent.activeView.viewClass = 'e-timeline-work-week-view';\n break;\n case 'TimelineWeek':\n this.parent.activeView = this.parent.timelineViewsModule;\n this.parent.activeView.viewClass = 'e-timeline-week-view';\n break;\n case 'TimelineMonth':\n this.parent.activeView = this.parent.timelineMonthModule;\n break;\n case 'TimelineYear':\n this.parent.activeView = this.parent.timelineYearModule;\n break;\n }\n if (isNullOrUndefined(this.parent.activeView)) {\n var firstView = this.parent.viewCollections[0].option;\n if (firstView) {\n this.parent.setProperties({ currentView: firstView }, true);\n if (this.parent.headerModule) {\n this.parent.headerModule.updateActiveView();\n this.parent.headerModule.setCalendarView();\n }\n return this.initializeLayout(firstView);\n }\n throw Error('Inject required modules');\n }\n this.parent.activeView.viewIndex = this.parent.viewIndex;\n this.updateLabelText(viewName);\n this.parent.activeView.addEventListener();\n this.parent.activeView.getRenderDates();\n this.parent.uiStateValues.isGroupAdaptive = this.parent.activeViewOptions.group.resources.length > 0 &&\n (this.parent.enableAdaptiveUI && !this.parent.isAdaptive ||\n this.parent.isAdaptive && this.parent.activeViewOptions.group.enableCompactView);\n if (this.parent.virtualScrollModule) {\n this.parent.virtualScrollModule.destroy();\n this.parent.virtualScrollModule = null;\n }\n if (this.parent.currentView.indexOf('Timeline') !== -1 && this.parent.currentView.indexOf('Year') === -1\n && this.parent.activeViewOptions.allowVirtualScrolling\n && this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {\n this.parent.virtualScrollModule = new VirtualScroll(this.parent);\n this.parent.uiStateValues.top = 0;\n }\n this.updateHeader();\n this.parent.activeView.renderLayout(cls.CURRENT_PANEL_CLASS);\n this.parent.renderTemplates();\n if (this.parent.eventTooltip) {\n this.parent.eventTooltip.destroy();\n this.parent.eventTooltip = null;\n }\n if (this.parent.eventSettings.enableTooltip || (this.parent.activeViewOptions.group.resources.length > 0\n && this.parent.activeViewOptions.group.headerTooltipTemplate)) {\n this.parent.eventTooltip = new EventTooltip(this.parent);\n }\n };\n Render.prototype.updateHeader = function () {\n if (this.parent.headerModule) {\n this.parent.headerModule.setDayOfWeek(this.parent.activeViewOptions.firstDayOfWeek);\n if (this.parent.activeViewOptions.readonly) {\n addClass([this.parent.element], cls.READ_ONLY);\n }\n else if (this.parent.element.classList.contains(cls.READ_ONLY)) {\n removeClass([this.parent.element], cls.READ_ONLY);\n }\n this.parent.headerModule.updateDateRange(this.parent.activeView.getDateRangeText());\n this.parent.headerModule.updateHeaderItems('remove');\n }\n };\n Render.prototype.updateLabelText = function (view) {\n var content = this.parent.activeView.getLabelText(view);\n this.parent.element.setAttribute('role', 'main');\n this.parent.element.setAttribute('aria-label', content);\n };\n return Render;\n}());\nexport { Render };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * A class that represents the configuration of working hours related options of scheduler.\n */\nvar WorkHours = /** @class */ (function (_super) {\n __extends(WorkHours, _super);\n function WorkHours() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(true)\n ], WorkHours.prototype, \"highlight\", void 0);\n __decorate([\n Property('09:00')\n ], WorkHours.prototype, \"start\", void 0);\n __decorate([\n Property('18:00')\n ], WorkHours.prototype, \"end\", void 0);\n return WorkHours;\n}(ChildProperty));\nexport { WorkHours };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * A class that represents the configuration of options related to timescale on scheduler.\n */\nvar TimeScale = /** @class */ (function (_super) {\n __extends(TimeScale, _super);\n function TimeScale() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(true)\n ], TimeScale.prototype, \"enable\", void 0);\n __decorate([\n Property(60)\n ], TimeScale.prototype, \"interval\", void 0);\n __decorate([\n Property(2)\n ], TimeScale.prototype, \"slotCount\", void 0);\n __decorate([\n Property()\n ], TimeScale.prototype, \"minorSlotTemplate\", void 0);\n __decorate([\n Property()\n ], TimeScale.prototype, \"majorSlotTemplate\", void 0);\n return TimeScale;\n}(ChildProperty));\nexport { TimeScale };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * A class that defines the template options available to customize the quick popup of scheduler.\n */\nvar QuickInfoTemplates = /** @class */ (function (_super) {\n __extends(QuickInfoTemplates, _super);\n function QuickInfoTemplates() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Both')\n ], QuickInfoTemplates.prototype, \"templateType\", void 0);\n __decorate([\n Property()\n ], QuickInfoTemplates.prototype, \"header\", void 0);\n __decorate([\n Property()\n ], QuickInfoTemplates.prototype, \"content\", void 0);\n __decorate([\n Property()\n ], QuickInfoTemplates.prototype, \"footer\", void 0);\n return QuickInfoTemplates;\n}(ChildProperty));\nexport { QuickInfoTemplates };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * A class that represents the header rows related configurations on timeline views.\n */\nvar HeaderRows = /** @class */ (function (_super) {\n __extends(HeaderRows, _super);\n function HeaderRows() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], HeaderRows.prototype, \"option\", void 0);\n __decorate([\n Property()\n ], HeaderRows.prototype, \"template\", void 0);\n return HeaderRows;\n}(ChildProperty));\nexport { HeaderRows };\n","/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable max-len */\nimport { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { getRecurrenceStringFromDate, generate } from '../../recurrence-editor/date-generator';\nimport * as events from '../base/constant';\nimport * as util from '../base/util';\n/**\n * Schedule CRUD operations\n */\nvar Crud = /** @class */ (function () {\n function Crud(parent) {\n this.parent = parent;\n this.crudObj = { sourceEvent: null, targetEvent: null, isCrudAction: false };\n }\n Crud.prototype.getQuery = function () {\n var start = this.parent.activeView.startDate();\n var end = this.parent.activeView.endDate();\n return this.parent.dataModule.generateQuery(start, end);\n };\n Crud.prototype.getTable = function () {\n if (this.parent.eventSettings.query) {\n var query = this.parent.eventSettings.query.clone();\n return query.fromTable;\n }\n return null;\n };\n Crud.prototype.refreshDataManager = function () {\n var _this = this;\n if (!this.parent.activeView) {\n return;\n }\n var start = this.parent.activeView.startDate();\n var end = this.parent.activeView.endDate();\n var dataManager = this.parent.dataModule.getData(this.parent.dataModule.generateQuery(start, end));\n dataManager.then(function (e) { return _this.dataManagerSuccess(e); }).catch(function (e) { return _this.dataManagerFailure(e); });\n };\n Crud.prototype.dataManagerSuccess = function (e) {\n var _this = this;\n if (!this.parent || this.parent && this.parent.isDestroyed) {\n return;\n }\n this.parent.trigger(events.dataBinding, e, function (args) {\n var resultData = extend([], args.result, null, true);\n _this.parent.eventsData = resultData.filter(function (data) { return !data[_this.parent.eventFields.isBlock]; });\n _this.parent.blockData = resultData.filter(function (data) { return data[_this.parent.eventFields.isBlock]; });\n _this.parent.refreshEvents(false);\n if (_this.parent.dragAndDropModule && _this.parent.dragAndDropModule.actionObj.action === 'drag') {\n _this.parent.dragAndDropModule.navigationWrapper();\n }\n _this.parent.trigger(events.dataBound, null, function () {\n _this.parent.hideSpinner();\n if (_this.parent.isPrinting) {\n _this.parent.notify(events.print, {});\n }\n });\n });\n };\n Crud.prototype.dataManagerFailure = function (e) {\n var _this = this;\n if (!this.parent || this.parent && this.parent.isDestroyed) {\n return;\n }\n this.parent.trigger(events.actionFailure, { error: e }, function () { return _this.parent.hideSpinner(); });\n };\n Crud.prototype.refreshData = function (args) {\n var _this = this;\n var actionArgs = {\n requestType: args.requestType, cancel: false, data: args.data,\n addedRecords: args.editParams.addedRecords, changedRecords: args.editParams.changedRecords,\n deletedRecords: args.editParams.deletedRecords\n };\n if (this.parent.dragAndDropModule && this.parent.dragAndDropModule.actionObj && this.parent.dragAndDropModule.actionObj.element) {\n this.parent.dragAndDropModule.actionObj.element.style.display = 'none';\n }\n if (this.parent.resizeModule && this.parent.resizeModule.actionObj && this.parent.resizeModule.actionObj.element) {\n this.parent.resizeModule.actionObj.element.style.display = 'none';\n }\n if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.activeViewOptions.group.allowGroupEdit\n && !this.parent.rowAutoHeight && !this.parent.virtualScrollModule && this.parent.activeViewOptions.group.byGroupID) {\n if (args.requestType === 'eventCreated' || args.requestType === 'eventRemoved') {\n this.crudObj.isCrudAction = true;\n this.crudObj.sourceEvent = [];\n var crudData = args.data instanceof Array ? (args.data.length === 0 &&\n args.requestType === 'eventRemoved' ? args.editParams.deletedRecords : args.data) :\n ((typeof args.data === 'string' || typeof args.data === 'number') && args.requestType === 'eventRemoved') ?\n args.editParams.deletedRecords : [args.data];\n var _loop_1 = function (data) {\n this_1.crudObj.isCrudAction = !(args.requestType === 'eventRemoved' && !isNullOrUndefined(data.parent));\n var groupIndex = this_1.parent.eventBase.getGroupIndexFromEvent(data);\n if (groupIndex > -1 && this_1.parent.crudModule.crudObj.sourceEvent.filter(function (tdData) { return tdData.groupIndex === groupIndex; }).length === 0\n && this_1.crudObj.isCrudAction) {\n this_1.crudObj.sourceEvent.push(this_1.parent.resourceBase.lastResourceLevel[groupIndex]);\n }\n };\n var this_1 = this;\n for (var _i = 0, crudData_1 = crudData; _i < crudData_1.length; _i++) {\n var data = crudData_1[_i];\n _loop_1(data);\n }\n this.crudObj.targetEvent = this.crudObj.sourceEvent;\n }\n }\n if (this.parent.dataModule.dataManager.dataSource.offline) {\n this.parent.trigger(events.actionComplete, actionArgs, function (offlineArgs) {\n if (!offlineArgs.cancel) {\n _this.refreshDataManager();\n }\n });\n }\n else {\n args.promise.then(function () {\n if (!_this.parent || _this.parent && _this.parent.isDestroyed) {\n return;\n }\n _this.parent.trigger(events.actionComplete, actionArgs, function (onlineArgs) {\n if (!onlineArgs.cancel) {\n _this.refreshDataManager();\n }\n });\n }).catch(function (e) {\n if (!_this.parent || _this.parent && _this.parent.isDestroyed) {\n return;\n }\n _this.parent.trigger(events.actionFailure, { error: e });\n });\n }\n };\n Crud.prototype.addEvent = function (eventData) {\n var _this = this;\n if (this.parent.eventSettings.allowAdding && !this.parent.activeViewOptions.readonly) {\n if (!this.isBlockEvent(eventData) && this.parent.eventBase.isBlockRange(eventData)) {\n this.parent.quickPopup.openValidationError('blockAlert', eventData);\n return;\n }\n var addEvents = (eventData instanceof Array) ? eventData : [eventData];\n var args = {\n requestType: 'eventCreate', cancel: false, data: addEvents,\n addedRecords: addEvents, changedRecords: [], deletedRecords: []\n };\n this.parent.trigger(events.actionBegin, args, function (addArgs) {\n if (!addArgs.cancel) {\n var fields = _this.parent.eventFields;\n var editParams = { addedRecords: [], changedRecords: [], deletedRecords: [] };\n var promise = void 0;\n if (addArgs.addedRecords instanceof Array) {\n for (var _i = 0, _a = addArgs.addedRecords; _i < _a.length; _i++) {\n var event_1 = _a[_i];\n event_1 = _this.parent.eventBase.updateEventDateTime(event_1);\n var eventData_1 = extend({}, _this.parent.eventBase.processTimezone(event_1, true), null, true);\n editParams.addedRecords.push(eventData_1);\n }\n promise = _this.parent.dataModule.dataManager.saveChanges(editParams, fields.id, _this.getTable(), _this.getQuery());\n }\n else {\n var event_2 = _this.parent.eventBase.processTimezone(addArgs.addedRecords, true);\n editParams.addedRecords.push(event_2);\n promise = _this.parent.dataModule.dataManager.insert(event_2, _this.getTable(), _this.getQuery());\n }\n var crudArgs = {\n requestType: 'eventCreated', cancel: false, data: addArgs.addedRecords, promise: promise, editParams: editParams\n };\n _this.refreshData(crudArgs);\n }\n });\n }\n };\n Crud.prototype.saveEvent = function (eventData, action) {\n var _this = this;\n if (this.parent.eventSettings.allowEditing && !this.parent.activeViewOptions.readonly) {\n if (this.parent.currentAction !== 'EditFollowingEvents' && !this.isBlockEvent(eventData)\n && this.parent.eventBase.isBlockRange(eventData)) {\n this.parent.quickPopup.openValidationError('blockAlert', eventData);\n return;\n }\n this.parent.currentAction = action;\n if (action) {\n switch (action) {\n case 'Save':\n this.processSave(eventData);\n break;\n case 'EditOccurrence':\n this.processOccurrences(eventData, action);\n break;\n case 'EditFollowingEvents':\n this.processFollowSeries(eventData, action);\n break;\n case 'EditSeries':\n this.processEntireSeries(eventData, action);\n break;\n }\n }\n else {\n var updateEvents = (eventData instanceof Array) ? eventData : [eventData];\n var args = {\n requestType: 'eventChange', cancel: false, data: eventData,\n addedRecords: [], changedRecords: updateEvents, deletedRecords: []\n };\n this.parent.trigger(events.actionBegin, args, function (saveArgs) {\n if (!saveArgs.cancel) {\n var promise = void 0;\n var fields = _this.parent.eventFields;\n var editParams = { addedRecords: [], changedRecords: [], deletedRecords: [] };\n if (saveArgs.changedRecords instanceof Array) {\n for (var _i = 0, _a = saveArgs.changedRecords; _i < _a.length; _i++) {\n var event_3 = _a[_i];\n event_3 = _this.parent.eventBase.updateEventDateTime(event_3);\n var eventData_2 = extend({}, _this.parent.eventBase.processTimezone(event_3, true), null, true);\n editParams.changedRecords.push(eventData_2);\n }\n promise = _this.parent.dataModule.dataManager.saveChanges(editParams, fields.id, _this.getTable(), _this.getQuery());\n }\n else {\n var event_4 = _this.parent.eventBase.processTimezone(saveArgs.changedRecords, true);\n editParams.changedRecords.push(event_4);\n promise = _this.parent.dataModule.dataManager.update(fields.id, event_4, _this.getTable(), _this.getQuery());\n }\n var crudArgs = {\n requestType: 'eventChanged', cancel: false,\n data: saveArgs.changedRecords, promise: promise, editParams: editParams\n };\n _this.refreshData(crudArgs);\n }\n });\n }\n }\n };\n Crud.prototype.deleteEvent = function (eventData, action) {\n var _this = this;\n if (this.parent.eventSettings.allowDeleting && !this.parent.activeViewOptions.readonly) {\n this.parent.currentAction = action;\n var deleteEvents = [];\n if (typeof eventData === 'string' || typeof eventData === 'number') {\n deleteEvents = this.parent.eventsData.filter(function (eventObj) {\n return eventObj[_this.parent.eventFields.id] === eventData;\n });\n }\n else {\n deleteEvents = (eventData instanceof Array ? eventData : [eventData]);\n }\n if (action) {\n switch (action) {\n case 'Delete':\n this.processDelete(deleteEvents);\n break;\n case 'DeleteOccurrence':\n this.processOccurrences(deleteEvents, action);\n break;\n case 'DeleteFollowingEvents':\n this.processFollowSeries(deleteEvents, action);\n break;\n case 'DeleteSeries':\n this.processEntireSeries(deleteEvents, action);\n break;\n }\n }\n else {\n var args = {\n requestType: 'eventRemove', cancel: false, data: eventData,\n addedRecords: [], changedRecords: [], deletedRecords: deleteEvents\n };\n this.parent.trigger(events.actionBegin, args, function (deleteArgs) {\n if (!deleteArgs.cancel) {\n var promise = void 0;\n var fields = _this.parent.eventFields;\n var editParams = { addedRecords: [], changedRecords: [], deletedRecords: [] };\n if (deleteArgs.deletedRecords.length > 1) {\n editParams.deletedRecords = editParams.deletedRecords.concat(deleteArgs.deletedRecords);\n promise = _this.parent.dataModule.dataManager.saveChanges(editParams, fields.id, _this.getTable(), _this.getQuery());\n }\n else {\n editParams.deletedRecords.push(deleteArgs.deletedRecords[0]);\n promise = _this.parent.dataModule.dataManager.remove(fields.id, deleteArgs.deletedRecords[0], _this.getTable(), _this.getQuery());\n }\n _this.parent.eventBase.selectWorkCellByTime(deleteArgs.deletedRecords);\n var crudArgs = {\n requestType: 'eventRemoved', cancel: false,\n data: deleteArgs.deletedRecords, promise: promise, editParams: editParams\n };\n _this.refreshData(crudArgs);\n }\n });\n }\n }\n };\n Crud.prototype.processOccurrences = function (eventData, action) {\n var _this = this;\n var occurrenceData = [];\n var isDeletedRecords = false;\n if (eventData instanceof Array) {\n for (var _i = 0, eventData_3 = eventData; _i < eventData_3.length; _i++) {\n var event_5 = eventData_3[_i];\n occurrenceData.push({ occurrence: event_5, parent: this.getParentEvent(event_5) });\n }\n }\n else {\n occurrenceData = { occurrence: eventData, parent: this.getParentEvent(eventData) };\n }\n var updateEvents = (eventData instanceof Array) ? eventData : [eventData];\n var args = {\n requestType: action === 'EditOccurrence' ? 'eventChange' : 'eventRemove', cancel: false,\n addedRecords: [], changedRecords: updateEvents, deletedRecords: []\n };\n args.data = occurrenceData;\n this.parent.trigger(events.actionBegin, args, function (occurrenceArgs) {\n if (!occurrenceArgs.cancel) {\n var fields = _this.parent.eventFields;\n var editParams = { addedRecords: [], changedRecords: [], deletedRecords: [] };\n var occurrenceEvents = (occurrenceData instanceof Array ? occurrenceData : [occurrenceData]);\n var _loop_2 = function (a, count) {\n var childEvent = occurrenceArgs.changedRecords[a];\n var parentEvent = occurrenceEvents[a].parent;\n var parentException = parentEvent[fields.recurrenceException];\n var editedData = void 0;\n var exceptionDate = void 0;\n switch (action) {\n case 'EditOccurrence':\n editedData = _this.parent.eventsProcessed.filter(function (event) { return event.Guid === childEvent.Guid; })[0];\n exceptionDate = _this.excludeDateCheck(editedData[fields.startTime], parentException);\n if (exceptionDate !== parentEvent[fields.recurrenceException]) {\n parentEvent[fields.recurrenceException] = exceptionDate;\n childEvent[fields.recurrenceException] = getRecurrenceStringFromDate(editedData[fields.startTime]);\n childEvent[fields.recurrenceID] = parentEvent[fields.id];\n childEvent[fields.followingID] = null;\n editParams.changedRecords.push(_this.parent.eventBase.processTimezone(parentEvent, true));\n editParams.addedRecords.push(_this.parent.eventBase.processTimezone(childEvent, true));\n }\n else {\n editParams.changedRecords.push(_this.parent.eventBase.processTimezone(childEvent, true));\n }\n break;\n case 'DeleteOccurrence':\n if (!childEvent[fields.recurrenceException]) {\n parentEvent[fields.recurrenceException] =\n _this.excludeDateCheck(childEvent[fields.startTime], parentException);\n editParams.changedRecords.push(_this.parent.eventBase.processTimezone(parentEvent, true));\n }\n if (childEvent[fields.id] !== parentEvent[fields.id]) {\n editParams.deletedRecords.push(childEvent);\n isDeletedRecords = true;\n }\n break;\n }\n };\n for (var a = 0, count = occurrenceArgs.changedRecords.length; a < count; a++) {\n _loop_2(a, count);\n }\n var promise = _this.parent.dataModule.dataManager.saveChanges(editParams, fields.id, _this.getTable(), _this.getQuery());\n _this.parent.eventBase.selectWorkCellByTime(occurrenceArgs.changedRecords);\n var crudArgs = {\n requestType: action === 'EditOccurrence' ? 'eventChanged' : 'eventRemoved',\n cancel: false, data: isDeletedRecords ? occurrenceArgs.deletedRecords : occurrenceArgs.changedRecords,\n promise: promise, editParams: editParams\n };\n _this.refreshData(crudArgs);\n }\n });\n };\n Crud.prototype.processFollowSeries = function (eventData, action) {\n var _this = this;\n var followData = [];\n if (eventData instanceof Array) {\n for (var _i = 0, eventData_4 = eventData; _i < eventData_4.length; _i++) {\n var event_6 = eventData_4[_i];\n followData.push({ occurrence: event_6, parent: this.getParentEvent(event_6) });\n }\n }\n else {\n followData = { occurrence: eventData, parent: this.getParentEvent(eventData) };\n }\n var updateFollowEvents = (eventData instanceof Array) ? eventData : [eventData];\n var args = {\n requestType: action === 'EditFollowingEvents' ? 'eventChange' : 'eventRemove', cancel: false,\n addedRecords: [], changedRecords: updateFollowEvents, deletedRecords: []\n };\n args.data = followData;\n this.parent.trigger(events.actionBegin, args, function (followArgs) {\n if (!followArgs.cancel) {\n var fields_1 = _this.parent.eventFields;\n var editParams = { addedRecords: [], changedRecords: [], deletedRecords: [] };\n var followEvents = followData instanceof Array ? followData : [followData];\n var _loop_3 = function (a, count) {\n var childEvent = followArgs.changedRecords[a];\n var parentEvent = followEvents[a].parent;\n var followData_1 = _this.parent.eventBase.getEventCollections(parentEvent, childEvent);\n var isSpanned = void 0;\n switch (action) {\n case 'EditFollowingEvents':\n _this.processRecurrenceRule(parentEvent, childEvent);\n isSpanned = !_this.parent.eventBase.isFollowingEvent(parentEvent, childEvent);\n childEvent[fields_1.followingID] = isSpanned ? null : parentEvent[fields_1.id];\n childEvent[fields_1.recurrenceID] = null;\n editParams.addedRecords.push(_this.parent.eventBase.processTimezone(childEvent, true));\n editParams.changedRecords.push(_this.parent.eventBase.processTimezone(parentEvent, true));\n if (!_this.parent.uiStateValues.isIgnoreOccurrence) {\n childEvent[fields_1.recurrenceException] = null;\n if (followData_1.occurrence.length > 0) {\n var rule = followData_1.occurrence.slice(-1)[0][fields_1.recurrenceRule];\n if (rule.indexOf('COUNT') === -1) {\n childEvent[fields_1.recurrenceRule] = rule;\n }\n }\n if (followData_1.follow.length > 0) {\n childEvent[fields_1.recurrenceRule] = followData_1.follow.slice(-1)[0][fields_1.recurrenceRule];\n editParams.deletedRecords = editParams.deletedRecords.concat(followData_1.follow);\n }\n if (isSpanned) {\n followData_1.occurrence = followData_1.occurrence.filter(function (eventObj) {\n return eventObj[fields_1.recurrenceID] === childEvent[fields_1.id];\n });\n }\n editParams.deletedRecords = editParams.deletedRecords.concat(followData_1.occurrence);\n }\n break;\n case 'DeleteFollowingEvents':\n _this.processRecurrenceRule(parentEvent, childEvent[fields_1.startTime]);\n editParams.changedRecords.push(_this.parent.eventBase.processTimezone(parentEvent, true));\n editParams.deletedRecords = editParams.deletedRecords.concat(followData_1.occurrence).concat(followData_1.follow);\n break;\n }\n };\n for (var a = 0, count = followArgs.changedRecords.length; a < count; a++) {\n _loop_3(a, count);\n }\n var promise = _this.parent.dataModule.dataManager.saveChanges(editParams, fields_1.id, _this.getTable(), _this.getQuery());\n _this.parent.eventBase.selectWorkCellByTime(followArgs.changedRecords);\n var crudArgs = {\n requestType: action === 'EditFollowingEvents' ? 'eventChanged' : 'eventRemoved',\n cancel: false, data: followArgs.changedRecords, promise: promise, editParams: editParams\n };\n _this.refreshData(crudArgs);\n }\n });\n };\n Crud.prototype.processEntireSeries = function (eventData, action) {\n var _this = this;\n var seriesData = [];\n var isDeletedRecords = false;\n if (eventData instanceof Array) {\n for (var _i = 0, eventData_5 = eventData; _i < eventData_5.length; _i++) {\n var event_7 = eventData_5[_i];\n seriesData.push(this.getParentEvent(event_7, true));\n }\n }\n else {\n seriesData = this.getParentEvent(eventData, true);\n }\n var updateSeriesEvents = (eventData instanceof Array) ? eventData : [eventData];\n var args = {\n requestType: action === 'EditSeries' ? 'eventChange' : 'eventRemove', cancel: false,\n addedRecords: [], changedRecords: updateSeriesEvents, deletedRecords: []\n };\n args.data = seriesData;\n this.parent.trigger(events.actionBegin, args, function (seriesArgs) {\n if (!seriesArgs.cancel) {\n var fields_2 = _this.parent.eventFields;\n var editParams = { addedRecords: [], changedRecords: [], deletedRecords: [] };\n var seriesEvents = seriesData instanceof Array ? seriesData : [seriesData];\n var _loop_4 = function (a, count) {\n var childEvent = seriesArgs.changedRecords[a];\n var parentEvent = seriesEvents[a];\n var eventCollections = _this.parent.eventBase.getEventCollections(parentEvent);\n var deletedEvents = eventCollections.follow.concat(eventCollections.occurrence);\n switch (action) {\n case 'EditSeries':\n if ((childEvent[fields_2.startTime] > parentEvent[fields_2.startTime]) && childEvent[fields_2.recurrenceRule]) {\n _this.processRecurrenceRule(parentEvent, childEvent);\n }\n childEvent[fields_2.id] = parentEvent[fields_2.id];\n childEvent[fields_2.recurrenceID] = null;\n childEvent[fields_2.followingID] = null;\n if (_this.parent.uiStateValues.isIgnoreOccurrence && childEvent[fields_2.recurrenceException]) {\n var originalParent = _this.parent.eventsData.filter(function (eventObj) {\n return eventObj[fields_2.id] === childEvent[fields_2.id];\n });\n if (originalParent.length > 0) {\n childEvent[fields_2.recurrenceRule] = originalParent[0][fields_2.recurrenceRule];\n }\n }\n else {\n childEvent[fields_2.recurrenceException] = null;\n editParams.deletedRecords = editParams.deletedRecords.concat(deletedEvents);\n }\n editParams.changedRecords.push(_this.parent.eventBase.processTimezone(childEvent, true));\n _this.parent.uiStateValues.isIgnoreOccurrence = false;\n break;\n case 'DeleteSeries':\n editParams.deletedRecords = editParams.deletedRecords.concat(deletedEvents.concat(parentEvent));\n isDeletedRecords = true;\n break;\n }\n };\n for (var a = 0, count = seriesArgs.changedRecords.length; a < count; a++) {\n _loop_4(a, count);\n }\n var promise = _this.parent.dataModule.dataManager.saveChanges(editParams, fields_2.id, _this.getTable(), _this.getQuery());\n _this.parent.eventBase.selectWorkCellByTime(seriesArgs.changedRecords);\n var crudArgs = {\n requestType: action === 'EditSeries' ? 'eventChanged' : 'eventRemoved',\n cancel: false, data: isDeletedRecords ? seriesArgs.deletedRecords : seriesArgs.changedRecords,\n promise: promise, editParams: editParams\n };\n _this.refreshData(crudArgs);\n }\n });\n };\n Crud.prototype.processDelete = function (eventData) {\n var _this = this;\n var deleteData = [];\n for (var _i = 0, eventData_6 = eventData; _i < eventData_6.length; _i++) {\n var eventObj = eventData_6[_i];\n if (eventObj[this.parent.eventFields.recurrenceRule]) {\n deleteData.push({ occurrence: eventObj, parent: this.getParentEvent(eventObj) });\n }\n else {\n deleteData.push(eventObj);\n }\n }\n var args = {\n requestType: 'eventRemove', cancel: false,\n addedRecords: [], changedRecords: [], deletedRecords: eventData\n };\n args.data = deleteData;\n this.parent.trigger(events.actionBegin, args, function (deleteArgs) {\n if (!deleteArgs.cancel) {\n var fields_3 = _this.parent.eventFields;\n var editParams = { addedRecords: [], changedRecords: [], deletedRecords: [] };\n var _loop_5 = function (a, count) {\n var isDelete = isNullOrUndefined(deleteArgs.deletedRecords[a][_this.parent.eventFields.recurrenceRule]);\n if (!isDelete) {\n var parentEvent_1 = deleteData[a].parent;\n var isEdited = editParams.changedRecords.filter(function (obj) {\n return obj[fields_3.id] === parentEvent_1[fields_3.id];\n });\n var editedDate = deleteArgs.deletedRecords[a][fields_3.startTime];\n if (isEdited.length > 0) {\n var editedData = isEdited[0];\n editedData[fields_3.recurrenceException] =\n _this.excludeDateCheck(editedDate, editedData[fields_3.recurrenceException]);\n }\n else {\n parentEvent_1[fields_3.recurrenceException] =\n _this.excludeDateCheck(editedDate, parentEvent_1[fields_3.recurrenceException]);\n }\n if (isEdited.length === 0) {\n editParams.changedRecords.push(_this.parent.eventBase.processTimezone(parentEvent_1, true));\n }\n isDelete = deleteArgs.deletedRecords[a][fields_3.id] !== parentEvent_1[fields_3.id];\n }\n if (isDelete) {\n editParams.deletedRecords.push(deleteArgs.deletedRecords[a]);\n }\n };\n for (var a = 0, count = deleteArgs.deletedRecords.length; a < count; a++) {\n _loop_5(a, count);\n }\n var promise = _this.parent.dataModule.dataManager.saveChanges(editParams, fields_3.id, _this.getTable(), _this.getQuery());\n var crudArgs = {\n requestType: 'eventRemoved', cancel: false, data: deleteArgs.deletedRecords, promise: promise, editParams: editParams\n };\n _this.refreshData(crudArgs);\n }\n });\n };\n Crud.prototype.processSave = function (data) {\n var _this = this;\n var eventData = (data instanceof Array) ? data : [data];\n var editData = [];\n for (var _i = 0, eventData_7 = eventData; _i < eventData_7.length; _i++) {\n var eventObj = eventData_7[_i];\n if (eventObj[this.parent.eventFields.recurrenceRule]) {\n editData.push({ occurrence: eventObj, parent: this.getParentEvent(eventObj) });\n }\n else {\n editData.push(eventObj);\n }\n }\n var args = { requestType: 'eventChange', cancel: false, addedRecords: [], changedRecords: eventData, deletedRecords: [] };\n args.data = editData;\n this.parent.trigger(events.actionBegin, args, function (editArgs) {\n if (!editArgs.cancel) {\n var fields = _this.parent.eventFields;\n var editParams = { addedRecords: [], changedRecords: [], deletedRecords: [] };\n for (var _i = 0, _a = editArgs.changedRecords; _i < _a.length; _i++) {\n var record = _a[_i];\n if (!isNullOrUndefined(record[fields.recurrenceRule]) && isNullOrUndefined(record[fields.recurrenceException])) {\n var exceptionString = getRecurrenceStringFromDate(record[fields.startTime]);\n var parentEle = _this.getParentEvent(record);\n parentEle[fields.recurrenceException] = isNullOrUndefined(parentEle[fields.recurrenceException]) ?\n exceptionString : parentEle[fields.recurrenceException].concat(',' + exceptionString);\n record[fields.id] = _this.parent.getEventMaxID();\n record[fields.recurrenceException] = exceptionString;\n editParams.addedRecords.push(_this.parent.eventBase.processTimezone(record, true));\n editParams.changedRecords.push(_this.parent.eventBase.processTimezone(parentEle, true));\n }\n else {\n editParams.changedRecords.push(_this.parent.eventBase.processTimezone(record, true));\n }\n }\n var promise = _this.parent.dataModule.dataManager.saveChanges(editParams, fields.id, _this.getTable(), _this.getQuery());\n var crudArgs = { requestType: 'eventChanged', cancel: false, data: editArgs.changedRecords, promise: promise, editParams: editParams };\n _this.refreshData(crudArgs);\n }\n });\n };\n Crud.prototype.getParentEvent = function (event, isParent) {\n if (isParent === void 0) { isParent = false; }\n var parentEvent = this.parent.eventBase.getParentEvent(event, isParent) || event;\n if (parentEvent[this.parent.eventFields.startTimezone] || parentEvent[this.parent.eventFields.endTimezone]) {\n this.parent.eventBase.timezoneConvert(parentEvent);\n }\n return parentEvent;\n };\n Crud.prototype.excludeDateCheck = function (eventStartTime, exceptionDateList) {\n var exDate = getRecurrenceStringFromDate(eventStartTime);\n if (!isNullOrUndefined(exceptionDateList)) {\n if (exceptionDateList.indexOf(exDate) === -1) {\n exceptionDateList = !(isNullOrUndefined(exceptionDateList)) ? exceptionDateList + ',' + exDate : exDate;\n }\n }\n else {\n exceptionDateList = exDate;\n }\n return exceptionDateList;\n };\n Crud.prototype.processRecurrenceRule = function (parentEvent, followEvent) {\n var fields = this.parent.eventFields;\n var recurrenceRule = parentEvent[fields.recurrenceRule];\n var endDate;\n if (followEvent instanceof Date) {\n endDate = new Date(+followEvent);\n }\n else {\n endDate = new Date(+followEvent[fields.startTime]);\n var newRecurrenceRule = followEvent[fields.recurrenceRule];\n var startDate = parentEvent[fields.startTime];\n var ruleException = (this.parent.currentAction === 'DeleteFollowingEvents') ? followEvent[fields.recurrenceException] : null;\n var dateCollection = generate(startDate, newRecurrenceRule, ruleException, this.parent.activeViewOptions.firstDayOfWeek);\n var untilDate = new Date(dateCollection.slice(-1)[0]);\n untilDate.setHours(endDate.getHours(), endDate.getMinutes(), endDate.getSeconds());\n endDate.setHours(startDate.getHours(), startDate.getMinutes(), startDate.getSeconds());\n followEvent[fields.recurrenceRule] = this.getUpdatedRecurrenceRule(newRecurrenceRule, new Date(+untilDate), false);\n }\n parentEvent[fields.recurrenceRule] = this.getUpdatedRecurrenceRule(recurrenceRule, util.addDays(new Date(endDate.getTime()), -1), true);\n };\n Crud.prototype.getUpdatedRecurrenceRule = function (recurrenceRule, untilDate, isParent) {\n var splitRule = recurrenceRule.split(';');\n var updatedRule = '';\n for (var _i = 0, splitRule_1 = splitRule; _i < splitRule_1.length; _i++) {\n var rule = splitRule_1[_i];\n if (rule !== '') {\n var ruleKey = rule.split('=')[0];\n var ruleValue = rule.split('=')[1];\n if (ruleKey === 'COUNT' || ruleKey === 'UNTIL') {\n ruleValue = getRecurrenceStringFromDate(untilDate);\n rule = rule.replace(rule, 'UNTIL=' + ruleValue);\n }\n updatedRule += rule + ';';\n }\n }\n if (isParent && updatedRule.indexOf('UNTIL') === -1) {\n updatedRule += 'UNTIL=' + getRecurrenceStringFromDate(untilDate);\n }\n return updatedRule;\n };\n Crud.prototype.isBlockEvent = function (eventData) {\n var eventCollection = (eventData instanceof Array) ? eventData : [eventData];\n var value = false;\n for (var _i = 0, eventCollection_1 = eventCollection; _i < eventCollection_1.length; _i++) {\n var event_8 = eventCollection_1[_i];\n value = event_8[this.parent.eventFields.isBlock] || false;\n }\n return value;\n };\n /**\n * To destroy the crud module.\n *\n * @returns {void}\n * @private\n */\n Crud.prototype.destroy = function () {\n this.crudObj = null;\n this.parent = null;\n };\n return Crud;\n}());\nexport { Crud };\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { extend, closest, isNullOrUndefined, EventHandler } from '@syncfusion/ej2-base';\nimport * as event from '../base/constant';\nimport * as cls from '../base/css-constant';\n/**\n * Work cell interactions\n */\nvar WorkCellInteraction = /** @class */ (function () {\n function WorkCellInteraction(parent) {\n this.parent = parent;\n EventHandler.add(this.parent.element, 'mouseover', this.onHover, this);\n }\n WorkCellInteraction.prototype.cellMouseDown = function (e) {\n if (this.isPreventAction(e)) {\n return;\n }\n this.parent.notify(event.cellMouseDown, { event: e });\n };\n WorkCellInteraction.prototype.cellClick = function (e) {\n var _this = this;\n if (this.isPreventAction(e)) {\n return;\n }\n var queryStr = '.' + cls.WORK_CELLS_CLASS + ',.' + cls.ALLDAY_CELLS_CLASS + ',.' + cls.HEADER_CELLS_CLASS;\n var target = closest(e.target, queryStr);\n if (isNullOrUndefined(target)) {\n return;\n }\n if (!isNullOrUndefined(closest(e.target, '.' + cls.NEW_EVENT_CLASS))) {\n this.parent.eventWindow.openEditor(this.parent.activeCellsData, 'Add');\n return;\n }\n var navigateEle = closest(e.target, '.' + cls.NAVIGATE_CLASS);\n var navigateView = this.parent.getNavigateView();\n var sameView = this.parent.currentView === navigateView;\n if (isNullOrUndefined(navigateEle) || sameView ||\n isNullOrUndefined(this.parent.viewOptions[navigateView.charAt(0).toLowerCase() + navigateView.slice(1)])) {\n if (this.parent.activeViewOptions.readonly && this.parent.currentView !== 'MonthAgenda') {\n if (this.parent.quickPopup) {\n this.parent.quickPopup.quickPopupHide();\n }\n return;\n }\n if (this.parent.isAdaptive && (e.target.classList.contains(cls.MORE_INDICATOR_CLASS) ||\n closest(e.target, '.' + cls.MORE_INDICATOR_CLASS))) {\n return;\n }\n var isWorkCell_1 = target.classList.contains(cls.WORK_CELLS_CLASS) ||\n target.classList.contains(cls.ALLDAY_CELLS_CLASS);\n if (isWorkCell_1 && e.shiftKey && e.which === 1 && this.parent.keyboardInteractionModule) {\n this.parent.keyboardInteractionModule.onMouseSelection(e);\n return;\n }\n this.parent.activeCellsData = this.parent.getCellDetails(target);\n var args = extend(this.parent.activeCellsData, { cancel: false, event: e, name: 'cellClick' });\n this.parent.trigger(event.cellClick, args, function (clickArgs) {\n if (!clickArgs.cancel) {\n if (isWorkCell_1) {\n _this.parent.selectCell(target);\n }\n if (_this.parent.allowInline) {\n var inlineArgs = {\n element: clickArgs.element,\n groupIndex: clickArgs.groupIndex, type: 'Cell'\n };\n _this.parent.notify(event.inlineClick, inlineArgs);\n }\n else {\n _this.parent.notify(event.cellClick, clickArgs);\n }\n }\n else {\n if (_this.parent.quickPopup) {\n _this.parent.quickPopup.quickPopupHide();\n }\n }\n });\n }\n else {\n var date = this.parent.getDateFromElement(target);\n if (!isNullOrUndefined(date) && !this.parent.isAdaptive && this.parent.isMinMaxDate(date)) {\n this.parent.setProperties({ selectedDate: date }, true);\n this.parent.changeView(this.parent.getNavigateView(), e);\n }\n }\n };\n WorkCellInteraction.prototype.cellDblClick = function (e) {\n var _this = this;\n var queryStr = '.' + cls.WORK_CELLS_CLASS + ',.' + cls.ALLDAY_CELLS_CLASS + ',.' + cls.HEADER_CELLS_CLASS;\n var target = closest(e.target, queryStr);\n if (this.parent.activeViewOptions.readonly || this.isPreventAction(e) || isNullOrUndefined(target)) {\n return;\n }\n var args = extend(this.parent.activeCellsData, { cancel: false, event: e, name: 'cellDoubleClick' });\n this.parent.trigger(event.cellDoubleClick, args, function (clickArgs) {\n var date = new Date(clickArgs.startTime.getTime());\n if (!_this.parent.isMinMaxDate(new Date(date.setHours(0, 0, 0, 0)))) {\n return;\n }\n if (!clickArgs.cancel) {\n _this.parent.eventWindow.openEditor(_this.parent.activeCellsData, 'Add');\n }\n });\n };\n WorkCellInteraction.prototype.onHover = function (e) {\n var targetSelector = '.' + cls.WORK_CELLS_CLASS + ',.' + cls.TIME_SLOT_CLASS + ',.' + cls.ALLDAY_CELLS_CLASS + ',.' +\n cls.HEADER_CELLS_CLASS + ',.' + cls.RESOURCE_CELLS_CLASS + ',.' + cls.APPOINTMENT_CLASS + ',.' + cls.WEEK_NUMBER_CLASS +\n ',.' + cls.MONTH_HEADER_CLASS;\n var hoverTarget = closest(e.target, targetSelector);\n if (hoverTarget) {\n var hoverArgs = { element: hoverTarget, event: e };\n this.parent.trigger(event.hover, hoverArgs);\n }\n };\n WorkCellInteraction.prototype.isPreventAction = function (e) {\n if (closest(e.target, '.' + cls.NAVIGATE_CLASS)) {\n return false;\n }\n if (closest(e.target, '.' + cls.APPOINTMENT_WRAPPER_CLASS) &&\n !closest(e.target, '.' + cls.MORE_INDICATOR_CLASS)) {\n return true;\n }\n var target = closest(e.target, '.' + cls.APPOINTMENT_CLASS + ',.' + cls.RESOURCE_GROUP_CELLS_CLASS);\n if (!isNullOrUndefined(target)) {\n return true;\n }\n target = closest(e.target, '.' + cls.HEADER_CELLS_CLASS);\n if (this.parent.activeView.isTimelineView() && !isNullOrUndefined(target)) {\n return true;\n }\n return false;\n };\n WorkCellInteraction.prototype.destroy = function () {\n EventHandler.remove(this.parent.element, 'mouseover', this.onHover);\n };\n return WorkCellInteraction;\n}());\nexport { WorkCellInteraction };\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 { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * Configuration that applies on each appointment field options of scheduler.\n */\nvar FieldOptions = /** @class */ (function (_super) {\n __extends(FieldOptions, _super);\n function FieldOptions() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], FieldOptions.prototype, \"name\", void 0);\n __decorate([\n Property()\n ], FieldOptions.prototype, \"default\", void 0);\n __decorate([\n Property()\n ], FieldOptions.prototype, \"title\", void 0);\n __decorate([\n Property({})\n ], FieldOptions.prototype, \"validation\", void 0);\n return FieldOptions;\n}(ChildProperty));\nexport { FieldOptions };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';\nimport { FieldOptions } from './field-options';\n/**\n * A Class that holds the collection of event fields that requires to be mapped with the dataSource\n * fields along with its available configuration settings. Each field in it accepts both string and Object\n * data type. When each of the field is assigned with simple `string` value, it is assumed that the dataSource field\n * name is mapped with it. If the `object` type is defined on each fields, then the validation related settings and mapping of\n * those fields with dataSource can be given altogether within it.\n */\nvar Field = /** @class */ (function (_super) {\n __extends(Field, _super);\n function Field() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Id')\n ], Field.prototype, \"id\", void 0);\n __decorate([\n Property('IsBlock')\n ], Field.prototype, \"isBlock\", void 0);\n __decorate([\n Complex({ name: 'Subject' }, FieldOptions)\n ], Field.prototype, \"subject\", void 0);\n __decorate([\n Complex({ name: 'StartTime' }, FieldOptions)\n ], Field.prototype, \"startTime\", void 0);\n __decorate([\n Complex({ name: 'EndTime' }, FieldOptions)\n ], Field.prototype, \"endTime\", void 0);\n __decorate([\n Complex({ name: 'StartTimezone' }, FieldOptions)\n ], Field.prototype, \"startTimezone\", void 0);\n __decorate([\n Complex({ name: 'EndTimezone' }, FieldOptions)\n ], Field.prototype, \"endTimezone\", void 0);\n __decorate([\n Complex({ name: 'Location' }, FieldOptions)\n ], Field.prototype, \"location\", void 0);\n __decorate([\n Complex({ name: 'Description' }, FieldOptions)\n ], Field.prototype, \"description\", void 0);\n __decorate([\n Complex({ name: 'IsAllDay' }, FieldOptions)\n ], Field.prototype, \"isAllDay\", void 0);\n __decorate([\n Complex({ name: 'RecurrenceID' }, FieldOptions)\n ], Field.prototype, \"recurrenceID\", void 0);\n __decorate([\n Complex({ name: 'RecurrenceRule' }, FieldOptions)\n ], Field.prototype, \"recurrenceRule\", void 0);\n __decorate([\n Complex({ name: 'RecurrenceException' }, FieldOptions)\n ], Field.prototype, \"recurrenceException\", void 0);\n __decorate([\n Property('IsReadonly')\n ], Field.prototype, \"isReadonly\", void 0);\n __decorate([\n Property('FollowingID')\n ], Field.prototype, \"followingID\", void 0);\n return Field;\n}(ChildProperty));\nexport { Field };\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 { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';\nimport { Field } from './fields';\n/**\n * Holds the configuration of event related options and dataSource binding to Schedule.\n */\nvar EventSettings = /** @class */ (function (_super) {\n __extends(EventSettings, _super);\n function EventSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], EventSettings.prototype, \"template\", void 0);\n __decorate([\n Property([])\n ], EventSettings.prototype, \"dataSource\", void 0);\n __decorate([\n Property()\n ], EventSettings.prototype, \"query\", void 0);\n __decorate([\n Complex({}, Field)\n ], EventSettings.prototype, \"fields\", void 0);\n __decorate([\n Property(false)\n ], EventSettings.prototype, \"enableTooltip\", void 0);\n __decorate([\n Property()\n ], EventSettings.prototype, \"tooltipTemplate\", void 0);\n __decorate([\n Property('AllDayRow')\n ], EventSettings.prototype, \"spannedEventPlacement\", void 0);\n __decorate([\n Property()\n ], EventSettings.prototype, \"resourceColorField\", void 0);\n __decorate([\n Property(false)\n ], EventSettings.prototype, \"editFollowingEvents\", void 0);\n __decorate([\n Property(true)\n ], EventSettings.prototype, \"allowAdding\", void 0);\n __decorate([\n Property(true)\n ], EventSettings.prototype, \"allowEditing\", void 0);\n __decorate([\n Property(true)\n ], EventSettings.prototype, \"allowDeleting\", void 0);\n __decorate([\n Property(false)\n ], EventSettings.prototype, \"enableMaxHeight\", void 0);\n __decorate([\n Property(false)\n ], EventSettings.prototype, \"enableIndicator\", void 0);\n __decorate([\n Property(false)\n ], EventSettings.prototype, \"ignoreWhitespace\", void 0);\n __decorate([\n Property()\n ], EventSettings.prototype, \"sortComparer\", void 0);\n return EventSettings;\n}(ChildProperty));\nexport { EventSettings };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * A class that holds the resource grouping related configurations on Schedule.\n */\nvar Group = /** @class */ (function (_super) {\n __extends(Group, _super);\n function Group() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], Group.prototype, \"byDate\", void 0);\n __decorate([\n Property(true)\n ], Group.prototype, \"byGroupID\", void 0);\n __decorate([\n Property(false)\n ], Group.prototype, \"allowGroupEdit\", void 0);\n __decorate([\n Property([])\n ], Group.prototype, \"resources\", void 0);\n __decorate([\n Property(true)\n ], Group.prototype, \"enableCompactView\", void 0);\n __decorate([\n Property()\n ], Group.prototype, \"headerTooltipTemplate\", void 0);\n return Group;\n}(ChildProperty));\nexport { Group };\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 { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * A class that represents the resource related configurations and its data binding options.\n */\nvar Resources = /** @class */ (function (_super) {\n __extends(Resources, _super);\n function Resources() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], Resources.prototype, \"field\", void 0);\n __decorate([\n Property()\n ], Resources.prototype, \"title\", void 0);\n __decorate([\n Property()\n ], Resources.prototype, \"name\", void 0);\n __decorate([\n Property(false)\n ], Resources.prototype, \"allowMultiple\", void 0);\n __decorate([\n Property([])\n ], Resources.prototype, \"dataSource\", void 0);\n __decorate([\n Property()\n ], Resources.prototype, \"query\", void 0);\n __decorate([\n Property('Id')\n ], Resources.prototype, \"idField\", void 0);\n __decorate([\n Property('Text')\n ], Resources.prototype, \"textField\", void 0);\n __decorate([\n Property('Expanded')\n ], Resources.prototype, \"expandedField\", void 0);\n __decorate([\n Property('GroupID')\n ], Resources.prototype, \"groupIDField\", void 0);\n __decorate([\n Property('Color')\n ], Resources.prototype, \"colorField\", void 0);\n __decorate([\n Property('StartHour')\n ], Resources.prototype, \"startHourField\", void 0);\n __decorate([\n Property('EndHour')\n ], Resources.prototype, \"endHourField\", void 0);\n __decorate([\n Property('WorkDays')\n ], Resources.prototype, \"workDaysField\", void 0);\n __decorate([\n Property('CssClass')\n ], Resources.prototype, \"cssClassField\", void 0);\n return Resources;\n}(ChildProperty));\nexport { Resources };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, isUndefined, Browser, compile, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Property, NotifyPropertyChanges, ChildProperty, Complex } from '@syncfusion/ej2-base';\nimport { Event, EventHandler, KeyboardEvents } from '@syncfusion/ej2-base';\nimport { rippleEffect, Animation, remove } from '@syncfusion/ej2-base';\nimport { Draggable, Droppable } from '@syncfusion/ej2-base';\nimport { getElement } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, closest, matches, detach, select, selectAll, isVisible, append } from '@syncfusion/ej2-base';\nimport { DataManager, Query } from '@syncfusion/ej2-data';\nimport { isNullOrUndefined as isNOU, Touch, getValue, setValue, extend, merge, attributes } from '@syncfusion/ej2-base';\nimport { ListBase } from '@syncfusion/ej2-lists';\nimport { createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\nvar ROOT = 'e-treeview';\nvar CONTROL = 'e-control';\nvar COLLAPSIBLE = 'e-icon-collapsible';\nvar EXPANDABLE = 'e-icon-expandable';\nvar LISTITEM = 'e-list-item';\nvar LISTTEXT = 'e-list-text';\nvar PARENTITEM = 'e-list-parent';\nvar HOVER = 'e-hover';\nvar ACTIVE = 'e-active';\nvar LOAD = 'e-icons-spinner';\nvar PROCESS = 'e-process';\nvar ICON = 'e-icons';\nvar TEXTWRAP = 'e-text-content';\nvar INPUT = 'e-input';\nvar INPUTGROUP = 'e-input-group';\nvar TREEINPUT = 'e-tree-input';\nvar EDITING = 'e-editing';\nvar RTL = 'e-rtl';\nvar INTERACTION = 'e-interaction';\nvar DRAGITEM = 'e-drag-item';\nvar DROPPABLE = 'e-droppable';\nvar DRAGGING = 'e-dragging';\nvar SIBLING = 'e-sibling';\nvar DROPIN = 'e-drop-in';\nvar DROPNEXT = 'e-drop-next';\nvar DROPOUT = 'e-drop-out';\nvar NODROP = 'e-no-drop';\nvar FULLROWWRAP = 'e-fullrow-wrap';\nvar FULLROW = 'e-fullrow';\nvar SELECTED = 'e-selected';\nvar EXPANDED = 'e-expanded';\nvar NODECOLLAPSED = 'e-node-collapsed';\nvar DISABLE = 'e-disable';\nvar DROPCOUNT = 'e-drop-count';\nvar CHECK = 'e-check';\nvar INDETERMINATE = 'e-stop';\nvar CHECKBOXWRAP = 'e-checkbox-wrapper';\nvar CHECKBOXFRAME = 'e-frame';\nvar CHECKBOXRIPPLE = 'e-ripple-container';\nvar RIPPLE = 'e-ripple';\nvar RIPPLEELMENT = 'e-ripple-element';\nvar FOCUS = 'e-node-focus';\nvar IMAGE = 'e-list-img';\nvar BIGGER = 'e-bigger';\nvar SMALL = 'e-small';\nvar CHILD = 'e-has-child';\nvar ITEM_ANIMATION_ACTIVE = 'e-animation-active';\nvar DISABLED = 'e-disabled';\nvar treeAriaAttr = {\n treeRole: 'tree',\n itemRole: 'treeitem',\n listRole: 'group',\n itemText: '',\n wrapperRole: ''\n};\n/**\n * Configures the fields to bind to the properties of node in the TreeView component.\n */\nvar FieldsSettings = /** @class */ (function (_super) {\n __extends(FieldsSettings, _super);\n function FieldsSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('child')\n ], FieldsSettings.prototype, \"child\", void 0);\n __decorate([\n Property([])\n ], FieldsSettings.prototype, \"dataSource\", void 0);\n __decorate([\n Property('expanded')\n ], FieldsSettings.prototype, \"expanded\", void 0);\n __decorate([\n Property('hasChildren')\n ], FieldsSettings.prototype, \"hasChildren\", void 0);\n __decorate([\n Property('htmlAttributes')\n ], FieldsSettings.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property('iconCss')\n ], FieldsSettings.prototype, \"iconCss\", void 0);\n __decorate([\n Property('id')\n ], FieldsSettings.prototype, \"id\", void 0);\n __decorate([\n Property('imageUrl')\n ], FieldsSettings.prototype, \"imageUrl\", void 0);\n __decorate([\n Property('isChecked')\n ], FieldsSettings.prototype, \"isChecked\", void 0);\n __decorate([\n Property('parentID')\n ], FieldsSettings.prototype, \"parentID\", void 0);\n __decorate([\n Property(null)\n ], FieldsSettings.prototype, \"query\", void 0);\n __decorate([\n Property('selected')\n ], FieldsSettings.prototype, \"selected\", void 0);\n __decorate([\n Property(null)\n ], FieldsSettings.prototype, \"tableName\", void 0);\n __decorate([\n Property('text')\n ], FieldsSettings.prototype, \"text\", void 0);\n __decorate([\n Property('tooltip')\n ], FieldsSettings.prototype, \"tooltip\", void 0);\n __decorate([\n Property('navigateUrl')\n ], FieldsSettings.prototype, \"navigateUrl\", void 0);\n return FieldsSettings;\n}(ChildProperty));\nexport { FieldsSettings };\n/**\n * Configures animation settings for the TreeView component.\n */\nvar ActionSettings = /** @class */ (function (_super) {\n __extends(ActionSettings, _super);\n function ActionSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('SlideDown')\n ], ActionSettings.prototype, \"effect\", void 0);\n __decorate([\n Property(400)\n ], ActionSettings.prototype, \"duration\", void 0);\n __decorate([\n Property('linear')\n ], ActionSettings.prototype, \"easing\", void 0);\n return ActionSettings;\n}(ChildProperty));\nexport { ActionSettings };\n/**\n * Configures the animation settings for expanding and collapsing nodes in TreeView.\n */\nvar NodeAnimationSettings = /** @class */ (function (_super) {\n __extends(NodeAnimationSettings, _super);\n function NodeAnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Complex({ effect: 'SlideUp', duration: 400, easing: 'linear' }, ActionSettings)\n ], NodeAnimationSettings.prototype, \"collapse\", void 0);\n __decorate([\n Complex({ effect: 'SlideDown', duration: 400, easing: 'linear' }, ActionSettings)\n ], NodeAnimationSettings.prototype, \"expand\", void 0);\n return NodeAnimationSettings;\n}(ChildProperty));\nexport { NodeAnimationSettings };\n/**\n * The TreeView component is used to represent hierarchical data in a tree like structure with advanced\n * functions to perform edit, drag and drop, selection with check-box, and more.\n * ```html\n *
\n * ```\n * ```typescript\n * let treeObj: TreeView = new TreeView();\n * treeObj.appendTo('#tree');\n * ```\n */\nvar TreeView = /** @class */ (function (_super) {\n __extends(TreeView, _super);\n function TreeView(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isRefreshed = false;\n _this.preventExpand = false;\n _this.checkedElement = [];\n _this.disableNode = [];\n // eslint-disable-next-line\n _this.validArr = [];\n _this.validNodes = [];\n _this.expandChildren = [];\n _this.isFieldChange = false;\n _this.changeDataSource = false;\n _this.hasTemplate = false;\n _this.mouseDownStatus = false;\n return _this;\n }\n TreeView_1 = TreeView;\n /**\n * Get component name.\n *\n * @returns {string} - returns module name.\n * @private\n */\n TreeView.prototype.getModuleName = function () {\n return 'treeview';\n };\n /**\n * Initialize the event handler\n *\n * @returns {void}\n */\n TreeView.prototype.preRender = function () {\n var _this = this;\n this.checkActionNodes = [];\n this.parentNodeCheck = [];\n this.dragStartAction = false;\n this.isAnimate = false;\n this.keyConfigs = {\n escape: 'escape',\n end: 'end',\n enter: 'enter',\n f2: 'f2',\n home: 'home',\n moveDown: 'downarrow',\n moveLeft: 'leftarrow',\n moveRight: 'rightarrow',\n moveUp: 'uparrow',\n ctrlDown: 'ctrl+downarrow',\n ctrlUp: 'ctrl+uparrow',\n ctrlEnter: 'ctrl+enter',\n ctrlHome: 'ctrl+home',\n ctrlEnd: 'ctrl+end',\n ctrlA: 'ctrl+A',\n shiftDown: 'shift+downarrow',\n shiftUp: 'shift+uparrow',\n shiftEnter: 'shift+enter',\n shiftHome: 'shift+home',\n shiftEnd: 'shift+end',\n csDown: 'ctrl+shift+downarrow',\n csUp: 'ctrl+shift+uparrow',\n csEnter: 'ctrl+shift+enter',\n csHome: 'ctrl+shift+home',\n csEnd: 'ctrl+shift+end',\n space: 'space'\n };\n this.listBaseOption = {\n expandCollapse: true,\n showIcon: true,\n expandIconClass: EXPANDABLE,\n ariaAttributes: treeAriaAttr,\n expandIconPosition: 'Left',\n itemCreated: function (e) {\n _this.beforeNodeCreate(e);\n },\n enableHtmlSanitizer: this.enableHtmlSanitizer,\n itemNavigable: this.fullRowNavigable\n };\n this.updateListProp(this.fields);\n this.aniObj = new Animation({});\n this.treeList = [];\n this.isLoaded = false;\n this.isInitalExpand = false;\n this.expandChildren = [];\n this.index = 0;\n this.setTouchClass();\n if (isNOU(this.selectedNodes)) {\n this.setProperties({ selectedNodes: [] }, true);\n }\n if (isNOU(this.checkedNodes)) {\n this.setProperties({ checkedNodes: [] }, true);\n }\n if (isNOU(this.expandedNodes)) {\n this.setProperties({ expandedNodes: [] }, true);\n }\n else {\n this.isInitalExpand = true;\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} - returns the persisted data\n * @hidden\n */\n TreeView.prototype.getPersistData = function () {\n var keyEntity = ['selectedNodes', 'checkedNodes', 'expandedNodes'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * To Initialize the control rendering\n *\n * @private\n * @returns {void}\n */\n TreeView.prototype.render = function () {\n this.initialRender = true;\n this.initialize();\n this.setDataBinding(false);\n this.setDisabledMode();\n this.setExpandOnType();\n if (!this.disabled) {\n this.setRipple();\n }\n this.wireEditingEvents(this.allowEditing);\n this.setDragAndDrop(this.allowDragAndDrop);\n if (!this.disabled) {\n this.wireEvents();\n }\n this.initialRender = false;\n this.renderComplete();\n };\n TreeView.prototype.initialize = function () {\n this.element.setAttribute('role', 'tree');\n this.element.setAttribute('tabindex', '0');\n this.element.setAttribute('aria-activedescendant', this.element.id + '_active');\n this.setCssClass(null, this.cssClass);\n this.setEnableRtl();\n this.setFullRow(this.fullRowSelect);\n this.nodeTemplateFn = this.templateComplier(this.nodeTemplate);\n };\n TreeView.prototype.setDisabledMode = function () {\n if (this.disabled) {\n this.element.classList.add(DISABLED);\n }\n else {\n this.element.classList.remove(DISABLED);\n }\n };\n TreeView.prototype.setEnableRtl = function () {\n (this.enableRtl ? addClass : removeClass)([this.element], RTL);\n };\n TreeView.prototype.setRipple = function () {\n var tempStr = '.' + FULLROW + ',.' + TEXTWRAP;\n var rippleModel = {\n selector: tempStr,\n ignore: '.' + TEXTWRAP + ' > .' + ICON + ',.' + INPUTGROUP + ',.' + INPUT + ', .' + CHECKBOXWRAP\n };\n this.rippleFn = rippleEffect(this.element, rippleModel);\n var iconModel = {\n selector: '.' + TEXTWRAP + ' > .' + ICON,\n isCenterRipple: true\n };\n this.rippleIconFn = rippleEffect(this.element, iconModel);\n };\n TreeView.prototype.setFullRow = function (isEnabled) {\n (isEnabled ? addClass : removeClass)([this.element], FULLROWWRAP);\n };\n TreeView.prototype.setMultiSelect = function (isEnabled) {\n var firstUl = select('.' + PARENTITEM, this.element);\n if (isEnabled) {\n firstUl.setAttribute('aria-multiselectable', 'true');\n }\n else {\n firstUl.removeAttribute('aria-multiselectable');\n }\n };\n // eslint-disable-next-line\n TreeView.prototype.templateComplier = function (template) {\n if (template) {\n this.hasTemplate = true;\n // eslint-disable-next-line\n var e = void 0;\n this.element.classList.add(INTERACTION);\n try {\n if (document.querySelectorAll(template).length) {\n return compile(document.querySelector(template).innerHTML.trim());\n }\n }\n catch (e) {\n return compile(template);\n }\n }\n this.element.classList.remove(INTERACTION);\n return undefined;\n };\n TreeView.prototype.setDataBinding = function (changeDataSource) {\n var _this = this;\n this.treeList.push('false');\n if (this.fields.dataSource instanceof DataManager) {\n /* eslint-disable */\n this.isOffline = this.fields.dataSource.dataSource.offline;\n if (this.fields.dataSource.ready) {\n this.fields.dataSource.ready.then(function (e) {\n /* eslint-disable */\n _this.isOffline = _this.fields.dataSource.dataSource.offline;\n if (_this.fields.dataSource instanceof DataManager && _this.isOffline) {\n _this.treeList.pop();\n _this.treeData = e.result;\n _this.isNumberTypeId = _this.getType();\n _this.setRootData();\n _this.renderItems(true);\n if (_this.treeList.length === 0 && !_this.isLoaded) {\n _this.finalize();\n }\n }\n }).catch(function (e) {\n _this.trigger('actionFailure', { error: e });\n });\n }\n else {\n this.fields.dataSource.executeQuery(this.getQuery(this.fields)).then(function (e) {\n _this.treeList.pop();\n _this.treeData = e.result;\n _this.isNumberTypeId = _this.getType();\n _this.setRootData();\n if (changeDataSource) {\n _this.changeDataSource = true;\n }\n _this.renderItems(true);\n _this.changeDataSource = false;\n if (_this.treeList.length === 0 && !_this.isLoaded) {\n _this.finalize();\n }\n }).catch(function (e) {\n _this.trigger('actionFailure', { error: e });\n });\n }\n }\n else {\n this.treeList.pop();\n if (isNOU(this.fields.dataSource)) {\n this.rootData = this.treeData = [];\n }\n else {\n this.treeData = JSON.parse(JSON.stringify(this.fields.dataSource));\n this.setRootData();\n }\n this.isNumberTypeId = this.getType();\n this.renderItems(false);\n }\n if (this.treeList.length === 0 && !this.isLoaded) {\n this.finalize();\n }\n };\n TreeView.prototype.getQuery = function (mapper, value) {\n if (value === void 0) { value = null; }\n var columns = [];\n var query;\n if (!mapper.query) {\n query = new Query();\n var prop = this.getActualProperties(mapper);\n for (var _i = 0, _a = Object.keys(prop); _i < _a.length; _i++) {\n var col = _a[_i];\n if (col !== 'dataSource' && col !== 'tableName' && col !== 'child' && !!mapper[col]\n && col !== 'url' && columns.indexOf(mapper[col]) === -1) {\n columns.push(mapper[col]);\n }\n }\n query.select(columns);\n if (prop.hasOwnProperty('tableName')) {\n query.from(mapper.tableName);\n }\n }\n else {\n query = mapper.query.clone();\n }\n ListBase.addSorting(this.sortOrder, mapper.text, query);\n if (!isNOU(value) && !isNOU(mapper.parentID)) {\n query.where(mapper.parentID, 'equal', (this.isNumberTypeId ? parseFloat(value) : value));\n }\n return query;\n };\n TreeView.prototype.getType = function () {\n return this.treeData[0] ? ((typeof getValue(this.fields.id, this.treeData[0]) === 'number') ? true : false) : false;\n };\n TreeView.prototype.setRootData = function () {\n this.dataType = this.getDataType(this.treeData, this.fields);\n if (this.dataType === 1) {\n this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);\n var rootItems = this.getChildNodes(this.treeData, undefined, true);\n if (isNOU(rootItems)) {\n this.rootData = [];\n }\n else {\n this.rootData = rootItems;\n }\n }\n else {\n this.rootData = this.treeData;\n }\n };\n TreeView.prototype.renderItems = function (isSorted) {\n /* eslint-disable */\n this.listBaseOption.ariaAttributes.level = 1;\n var sortedData = this.getSortedData(this.rootData);\n this.ulElement = ListBase.createList(this.createElement, isSorted ? this.rootData : sortedData, this.listBaseOption);\n this.element.appendChild(this.ulElement);\n var rootNodes = this.ulElement.querySelectorAll('.e-list-item');\n if (this.loadOnDemand === false) {\n var i = 0;\n while (i < rootNodes.length) {\n this.renderChildNodes(rootNodes[i], true, null, true);\n i++;\n }\n }\n var parentEle = selectAll('.' + PARENTITEM, this.element);\n if ((parentEle.length === 1 && (rootNodes && rootNodes.length !== 0)) || this.loadOnDemand) {\n this.finalizeNode(this.element);\n }\n this.parentNodeCheck = [];\n this.parentCheckData = [];\n this.updateCheckedStateFromDS();\n if (this.autoCheck && this.showCheckBox && !this.isLoaded) {\n this.updateParentCheckState();\n }\n };\n /**\n * Update the checkedNodes from datasource at initial rendering\n */\n TreeView.prototype.updateCheckedStateFromDS = function (id) {\n this.validNodes = [];\n if (this.treeData && this.showCheckBox) {\n if (this.dataType === 1) {\n var mapper = this.fields;\n var resultData = new DataManager(this.treeData).executeLocal(new Query().where(mapper.isChecked, 'equal', true, false));\n for (var i = 0; i < resultData.length; i++) {\n var resultId = resultData[i][this.fields.id] ? resultData[i][this.fields.id].toString() : null;\n var resultPId = resultData[i][this.fields.parentID] ? resultData[i][this.fields.parentID].toString() : null;\n if (this.checkedNodes.indexOf(resultId) === -1 && !(this.isLoaded)) {\n this.checkedNodes.push(resultId);\n }\n if (resultData[i][this.fields.hasChildren]) {\n var id_1 = resultData[i][this.fields.id];\n var childData = new DataManager(this.treeData).\n executeLocal(new Query().where(mapper.parentID, 'equal', id_1, false));\n for (var child = 0; child < childData.length; child++) {\n var childId = childData[child][this.fields.id] ? childData[child][this.fields.id].toString() : null;\n if (this.checkedNodes.indexOf(childId) === -1 && this.autoCheck) {\n this.checkedNodes.push(childId);\n }\n }\n }\n }\n for (var i = 0; i < this.checkedNodes.length; i++) {\n var mapper_1 = this.fields;\n var checkState = new DataManager(this.treeData).\n executeLocal(new Query().where(mapper_1.id, 'equal', this.checkedNodes[i], true));\n if (checkState[0] && this.autoCheck) {\n this.getCheckedNodeDetails(mapper_1, checkState);\n this.checkIndeterminateState(checkState[0]);\n }\n if (checkState.length > 0) {\n var checkedId = checkState[0][this.fields.id] ? checkState[0][this.fields.id].toString() : null;\n if (this.checkedNodes.indexOf(checkedId) > -1 && this.validNodes.indexOf(checkedId) === -1) {\n this.validNodes.push(checkedId);\n }\n }\n var checkedData = new DataManager(this.treeData).\n executeLocal(new Query().where(mapper_1.parentID, 'equal', this.checkedNodes[i], true));\n for (var index = 0; index < checkedData.length; index++) {\n var checkedId = checkedData[index][this.fields.id] ? checkedData[index][this.fields.id].toString() : null;\n if (this.checkedNodes.indexOf(checkedId) === -1 && this.autoCheck) {\n this.checkedNodes.push(checkedId);\n }\n if (this.checkedNodes.indexOf(checkedId) > -1 && this.validNodes.indexOf(checkedId) === -1) {\n this.validNodes.push(checkedId);\n }\n }\n }\n }\n else if (this.dataType === 2 || (this.fields.dataSource instanceof DataManager &&\n this.isOffline)) {\n for (var index = 0; index < this.treeData.length; index++) {\n var fieldId = this.treeData[index][this.fields.id] ? this.treeData[index][this.fields.id].toString() : '';\n if (this.treeData[index][this.fields.isChecked] && !(this.isLoaded) && this.checkedNodes.indexOf(fieldId) === -1) {\n this.checkedNodes.push(fieldId);\n }\n if (this.checkedNodes.indexOf(fieldId) > -1 && this.validNodes.indexOf(fieldId) === -1) {\n this.validNodes.push(fieldId);\n }\n var childItems = getValue(this.fields.child.toString(), this.treeData[index]);\n if (childItems) {\n this.updateChildCheckState(childItems, this.treeData[index]);\n }\n }\n }\n this.setProperties({ checkedNodes: this.validNodes }, true);\n }\n };\n /**\n * To check whether the list data has sub child and to change the parent check state accordingly\n */\n TreeView.prototype.getCheckedNodeDetails = function (mapper, checkNodes) {\n var id = checkNodes[0][this.fields.parentID] ? checkNodes[0][this.fields.parentID].toString() : null;\n var count = 0;\n var element = this.element.querySelector('[data-uid=\"' + checkNodes[0][this.fields.id] + '\"]');\n var parentEle = this.element.querySelector('[data-uid=\"' + checkNodes[0][this.fields.parentID] + '\"]');\n if (!element && !parentEle) {\n var len = this.parentNodeCheck.length;\n if (this.parentNodeCheck.indexOf(id) === -1) {\n this.parentNodeCheck.push(id);\n }\n var childNodes = this.getChildNodes(this.treeData, id);\n for (var i = 0; i < childNodes.length; i++) {\n var childId = childNodes[i][this.fields.id] ? childNodes[i][this.fields.id].toString() : null;\n if (this.checkedNodes.indexOf(childId) !== -1) {\n count++;\n }\n if (count === childNodes.length && this.checkedNodes.indexOf(id) === -1) {\n this.checkedNodes.push(id);\n }\n }\n var preElement = new DataManager(this.treeData).\n executeLocal(new Query().where(mapper.id, 'equal', id, true));\n this.getCheckedNodeDetails(mapper, preElement);\n }\n else if (parentEle) {\n var check = select('.' + CHECK, parentEle);\n if (!check) {\n this.changeState(parentEle, 'indeterminate', null, true, true);\n }\n }\n };\n /**\n * Update the checkedNodes and parent state when all the child Nodes are in checkedstate at initial rendering\n */\n TreeView.prototype.updateParentCheckState = function () {\n var indeterminate = selectAll('.' + INDETERMINATE, this.element);\n var childCheckedElement;\n for (var i = 0; i < indeterminate.length; i++) {\n var node = closest(indeterminate[i], '.' + LISTITEM);\n var nodeId = node.getAttribute('data-uid').toString();\n if (this.dataType === 1) {\n childCheckedElement = new DataManager(this.treeData).\n executeLocal(new Query().where(this.fields.parentID, 'equal', nodeId, true));\n }\n else {\n childCheckedElement = this.getChildNodes(this.treeData, nodeId);\n }\n var count = 0;\n if (childCheckedElement) {\n for (var j = 0; j < childCheckedElement.length; j++) {\n var childId = childCheckedElement[j][this.fields.id].toString();\n if (this.checkedNodes.indexOf(childId) !== -1) {\n count++;\n }\n }\n if (count === childCheckedElement.length) {\n var nodeCheck = node.getAttribute('data-uid');\n if (this.checkedNodes.indexOf(nodeCheck) === -1) {\n this.checkedNodes.push(nodeCheck);\n }\n this.changeState(node, 'check', null, true, true);\n }\n else if (count === 0 && this.checkedNodes.length === 0) {\n this.changeState(node, 'uncheck', null, true, true);\n }\n }\n }\n };\n /**\n * Change the parent to indeterminate state whenever the child is in checked state which is not rendered in DOM\n */\n TreeView.prototype.checkIndeterminateState = function (data) {\n var element;\n if (this.dataType === 1) {\n element = this.element.querySelector('[data-uid=\"' + data[this.fields.parentID] + '\"]');\n }\n else {\n element = this.element.querySelector('[data-uid=\"' + data[this.fields.id] + '\"]');\n }\n if (element) {\n var ariaChecked = element.querySelector('.' + CHECKBOXWRAP).getAttribute('aria-checked');\n if (ariaChecked !== 'true') {\n this.changeState(element, 'indeterminate', null, true, true);\n }\n }\n else if (this.dataType === 2) {\n var len = this.parentNodeCheck.length;\n if (this.parentNodeCheck.indexOf(data[this.fields.id].toString()) === -1) {\n this.parentNodeCheck.push(data[this.fields.id].toString());\n }\n }\n };\n /**\n * Update the checkedNodes for child and subchild from datasource (hierarchical datasource) at initial rendering\n */\n TreeView.prototype.updateChildCheckState = function (childItems, treeData) {\n var count = 0;\n var checkedParent = treeData[this.fields.id] ? treeData[this.fields.id].toString() : '';\n for (var index = 0; index < childItems.length; index++) {\n var checkedChild = childItems[index][this.fields.id] ? childItems[index][this.fields.id].toString() : '';\n if (childItems[index][this.fields.isChecked] && !(this.isLoaded) && this.checkedNodes.indexOf(checkedChild) === -1) {\n this.checkedNodes.push(checkedChild);\n }\n if (this.checkedNodes.indexOf(checkedParent) !== -1 && this.checkedNodes.indexOf(checkedChild) === -1 && this.autoCheck) {\n this.checkedNodes.push(checkedChild);\n }\n if (this.checkedNodes.indexOf(checkedChild) !== -1 && this.autoCheck) {\n count++;\n }\n if (this.checkedNodes.indexOf(checkedChild) > -1 && this.validNodes.indexOf(checkedChild) === -1) {\n this.validNodes.push(checkedChild);\n }\n var subChildItems = getValue(this.fields.child.toString(), childItems[index]);\n if (subChildItems) {\n this.parentCheckData.push(treeData);\n this.updateChildCheckState(subChildItems, childItems[index]);\n }\n if (count === childItems.length && this.autoCheck && this.checkedNodes.indexOf(checkedParent) === -1) {\n this.checkedNodes.push(checkedParent);\n }\n }\n if (count !== 0 && this.autoCheck) {\n this.checkIndeterminateState(treeData);\n for (var len = 0; len < this.parentCheckData.length; len++) {\n if ((treeData !== this.parentCheckData[len]) && (this.parentCheckData[len])) {\n this.checkIndeterminateState(this.parentCheckData[len]);\n }\n }\n }\n this.parentCheckData = [];\n };\n TreeView.prototype.beforeNodeCreate = function (e) {\n if (this.showCheckBox) {\n var checkboxEle = createCheckBox(this.createElement, true, { cssClass: this.touchClass });\n checkboxEle.setAttribute('role', 'checkbox');\n var icon = select('div.' + ICON, e.item);\n var id = e.item.getAttribute('data-uid');\n e.item.childNodes[0].insertBefore(checkboxEle, e.item.childNodes[0].childNodes[isNOU(icon) ? 0 : 1]);\n var checkValue = getValue(e.fields.isChecked, e.curData);\n if (this.checkedNodes.indexOf(id) > -1) {\n select('.' + CHECKBOXFRAME, checkboxEle).classList.add(CHECK);\n checkboxEle.setAttribute('aria-checked', 'true');\n this.addCheck(e.item);\n }\n else if (!isNOU(checkValue) && checkValue.toString() === 'true') {\n select('.' + CHECKBOXFRAME, checkboxEle).classList.add(CHECK);\n checkboxEle.setAttribute('aria-checked', 'true');\n this.addCheck(e.item);\n }\n else {\n checkboxEle.setAttribute('aria-checked', 'false');\n }\n var frame = select('.' + CHECKBOXFRAME, checkboxEle);\n EventHandler.add(frame, 'mousedown', this.frameMouseHandler, this);\n EventHandler.add(frame, 'mouseup', this.frameMouseHandler, this);\n }\n if (this.fullRowSelect) {\n this.createFullRow(e.item);\n }\n if (this.allowMultiSelection && !e.item.classList.contains(SELECTED)) {\n e.item.setAttribute('aria-selected', 'false');\n }\n var fields = e.fields;\n this.addActionClass(e, fields.selected, SELECTED);\n this.addActionClass(e, fields.expanded, EXPANDED);\n if (!isNOU(this.nodeTemplateFn)) {\n var textEle = e.item.querySelector('.' + LISTTEXT);\n var dataId = e.item.getAttribute('data-uid');\n textEle.innerHTML = '';\n this.renderNodeTemplate(e.curData, textEle, dataId);\n }\n var eventArgs = {\n node: e.item,\n nodeData: e.curData,\n text: e.text,\n };\n if (!this.isRefreshed) {\n this.trigger('drawNode', eventArgs);\n }\n };\n TreeView.prototype.frameMouseHandler = function (e) {\n var rippleSpan = select('.' + CHECKBOXRIPPLE, e.target.parentElement);\n rippleMouseHandler(e, rippleSpan);\n };\n TreeView.prototype.addActionClass = function (e, action, cssClass) {\n var data = e.curData;\n var actionValue = getValue(action, data);\n if (!isNOU(actionValue) && actionValue.toString() !== 'false') {\n e.item.classList.add(cssClass);\n }\n };\n TreeView.prototype.getDataType = function (ds, mapper) {\n if (this.fields.dataSource instanceof DataManager) {\n for (var i = 0; i < ds.length; i++) {\n if (this.isOffline) {\n if ((typeof mapper.child === 'string') && isNOU(getValue(mapper.child, ds[i])) && !isNOU(getValue(mapper.parentID, ds[i]))) {\n return 1;\n }\n }\n else if ((typeof mapper.child === 'string') && isNOU(getValue(mapper.child, ds[i]))) {\n return 1;\n }\n }\n return 2;\n }\n for (var i = 0, len = ds.length; i < len; i++) {\n if ((typeof mapper.child === 'string') && !isNOU(getValue(mapper.child, ds[i]))) {\n return 2;\n }\n if (!isNOU(getValue(mapper.parentID, ds[i])) || !isNOU(getValue(mapper.hasChildren, ds[i]))) {\n return 1;\n }\n }\n return 1;\n };\n TreeView.prototype.getGroupedData = function (dataSource, groupBy) {\n var cusQuery = new Query().group(groupBy);\n var ds = ListBase.getDataSource(dataSource, cusQuery);\n var grpItem = [];\n for (var j = 0; j < ds.length; j++) {\n var itemObj = ds[j].items;\n grpItem.push(itemObj);\n }\n return grpItem;\n };\n TreeView.prototype.getSortedData = function (list) {\n if (list && this.sortOrder !== 'None') {\n list = ListBase.getDataSource(list, ListBase.addSorting(this.sortOrder, this.fields.text));\n }\n return list;\n };\n TreeView.prototype.finalizeNode = function (element) {\n var iNodes = selectAll('.' + IMAGE, element);\n for (var k = 0; k < iNodes.length; k++) {\n iNodes[k].setAttribute('alt', IMAGE);\n }\n if (this.isLoaded) {\n var sNodes = selectAll('.' + SELECTED, element);\n for (var i = 0; i < sNodes.length; i++) {\n this.selectNode(sNodes[i], null);\n break;\n }\n removeClass(sNodes, SELECTED);\n }\n var cNodes = selectAll('.' + LISTITEM + ':not(.' + EXPANDED + ')', element);\n for (var j = 0; j < cNodes.length; j++) {\n var icon = select('div.' + ICON, cNodes[j]);\n if (icon && icon.classList.contains(EXPANDABLE)) {\n this.disableExpandAttr(cNodes[j]);\n }\n }\n var eNodes = selectAll('.' + EXPANDED, element);\n if (!this.isInitalExpand) {\n for (var i = 0; i < eNodes.length; i++) {\n this.renderChildNodes(eNodes[i]);\n }\n }\n removeClass(eNodes, EXPANDED);\n this.updateList();\n if (this.isLoaded) {\n this.updateCheckedProp();\n }\n };\n TreeView.prototype.updateCheckedProp = function () {\n if (this.showCheckBox) {\n var nodes = [].concat([], this.checkedNodes);\n this.setProperties({ checkedNodes: nodes }, true);\n }\n };\n TreeView.prototype.ensureIndeterminate = function () {\n if (this.autoCheck) {\n var liElement = selectAll('li', this.element);\n var ulElement = void 0;\n for (var i = 0; i < liElement.length; i++) {\n if (liElement[i].classList.contains(LISTITEM)) {\n ulElement = select('.' + PARENTITEM, liElement[i]);\n if (ulElement) {\n this.ensureParentCheckState(liElement[i]);\n }\n else {\n this.ensureChildCheckState(liElement[i]);\n }\n }\n }\n }\n else {\n var indeterminate = selectAll('.' + INDETERMINATE, this.element);\n for (var i = 0; i < indeterminate.length; i++) {\n indeterminate[i].classList.remove(INDETERMINATE);\n }\n }\n };\n TreeView.prototype.ensureParentCheckState = function (element) {\n if (!isNOU(element)) {\n if (element.classList.contains(ROOT)) {\n return;\n }\n var ulElement = element;\n if (element.classList.contains(LISTITEM)) {\n ulElement = select('.' + PARENTITEM, element);\n }\n var checkedNodes = selectAll('.' + CHECK, ulElement);\n var indeterminateNodes = selectAll('.' + INDETERMINATE, ulElement);\n var nodes = selectAll('.' + LISTITEM, ulElement);\n var checkBoxEle = element.getElementsByClassName(CHECKBOXWRAP)[0];\n if (nodes.length === checkedNodes.length) {\n this.changeState(checkBoxEle, 'check', null, true, true);\n }\n else if (checkedNodes.length > 0 || indeterminateNodes.length > 0) {\n this.changeState(checkBoxEle, 'indeterminate', null, true, true);\n }\n else if (checkedNodes.length === 0) {\n this.changeState(checkBoxEle, 'uncheck', null, true, true);\n }\n var parentUL = closest(element, '.' + PARENTITEM);\n if (!isNOU(parentUL)) {\n var currentParent = closest(parentUL, '.' + LISTITEM);\n this.ensureParentCheckState(currentParent);\n }\n }\n };\n TreeView.prototype.ensureChildCheckState = function (element, e) {\n if (!isNOU(element)) {\n var childElement = select('.' + PARENTITEM, element);\n var checkBoxes = void 0;\n if (!isNOU(childElement)) {\n checkBoxes = selectAll('.' + CHECKBOXWRAP, childElement);\n var isChecked = element.getElementsByClassName(CHECKBOXFRAME)[0].classList.contains(CHECK);\n var parentCheck = element.getElementsByClassName(CHECKBOXFRAME)[0].classList.contains(INDETERMINATE);\n var childCheck = childElement.querySelectorAll('li');\n var expandState = childElement.parentElement.getAttribute('aria-expanded');\n var checkedState = void 0;\n for (var index = 0; index < checkBoxes.length; index++) {\n var childId = childCheck[index].getAttribute('data-uid');\n if (!isNOU(this.currentLoadData) && !isNOU(getValue(this.fields.isChecked, this.currentLoadData[index]))) {\n checkedState = getValue(this.fields.isChecked, this.currentLoadData[index]) ? 'check' : 'uncheck';\n if (this.ele !== -1) {\n checkedState = isChecked ? 'check' : 'uncheck';\n }\n if ((checkedState === 'uncheck') && (!isUndefined(this.parentNodeCheck) && this.autoCheck\n && this.parentNodeCheck.indexOf(childId) !== -1)) {\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(childId), 1);\n checkedState = 'indeterminate';\n }\n }\n else {\n var isNodeChecked = checkBoxes[index].getElementsByClassName(CHECKBOXFRAME)[0].classList.contains(CHECK);\n if (isChecked) {\n checkedState = 'check';\n }\n else if (isNodeChecked && !this.isLoaded) {\n checkedState = 'check';\n }\n else if (this.checkedNodes.indexOf(childId) !== -1 && this.isLoaded && (parentCheck || isChecked)) {\n checkedState = 'check';\n }\n else if (childCheck[index].classList.contains(CHILD) && (!isUndefined(this.parentNodeCheck) && this.autoCheck\n && (isChecked || parentCheck) && this.parentNodeCheck.indexOf(childId) !== -1)) {\n checkedState = 'indeterminate';\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(childId), 1);\n }\n else if (this.dataType === 1 && (!isUndefined(this.parentNodeCheck) && this.autoCheck &&\n (isChecked || parentCheck) && this.parentNodeCheck.indexOf(childId) !== -1)) {\n checkedState = 'indeterminate';\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(childId), 1);\n }\n else {\n checkedState = 'uncheck';\n }\n }\n this.changeState(checkBoxes[index], checkedState, e, true, true);\n }\n }\n if (this.autoCheck && this.isLoaded) {\n this.updateParentCheckState();\n }\n }\n };\n TreeView.prototype.doCheckBoxAction = function (nodes, doCheck) {\n var li = selectAll('.' + LISTITEM, this.element);\n if (!isNOU(nodes)) {\n for (var len = nodes.length; len >= 0; len--) {\n var liEle = void 0;\n if (nodes.length === 1) {\n liEle = this.getElement(nodes[len - 1]);\n }\n else {\n liEle = this.getElement(nodes[len]);\n }\n if (isNOU(liEle)) {\n var node = void 0;\n node = nodes[len - nodes.length] ? nodes[len - nodes.length].toString() : nodes[len] ? nodes[len].toString() : null;\n if (node !== '' && doCheck && node) {\n this.setValidCheckedNode(node);\n this.dynamicCheckState(node, doCheck);\n }\n else if (this.checkedNodes.indexOf(node) !== -1 && node !== '' && !doCheck) {\n this.checkedNodes.splice(this.checkedNodes.indexOf(node), 1);\n var childItems = this.getChildNodes(this.treeData, node);\n if (childItems) {\n for (var i = 0; i < childItems.length; i++) {\n var id = childItems[i][this.fields.id] ? childItems[i][this.fields.id].toString() : null;\n if (this.checkedNodes.indexOf(id) !== -1) {\n this.checkedNodes.splice(this.checkedNodes.indexOf(id), 1);\n }\n }\n if (this.parentNodeCheck.indexOf(node) !== -1) {\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(node), 1);\n }\n }\n if (node) {\n this.dynamicCheckState(node, doCheck);\n }\n this.updateField(this.treeData, this.fields, node, 'isChecked', null);\n }\n continue;\n }\n var checkBox = select('.' + PARENTITEM + ' .' + CHECKBOXWRAP, liEle);\n this.validateCheckNode(checkBox, !doCheck, liEle, null);\n }\n }\n else {\n var checkBoxes = selectAll('.' + CHECKBOXWRAP, this.element);\n if (this.loadOnDemand) {\n for (var index = 0; index < checkBoxes.length; index++) {\n this.updateFieldChecked(checkBoxes[index], doCheck);\n this.changeState(checkBoxes[index], doCheck ? 'check' : 'uncheck', null, null, null, doCheck);\n }\n }\n else {\n for (var index = 0; index < checkBoxes.length; index++) {\n this.updateFieldChecked(checkBoxes[index], doCheck);\n this.changeState(checkBoxes[index], doCheck ? 'check' : 'uncheck');\n }\n }\n }\n if (nodes) {\n for (var j = 0; j < nodes.length; j++) {\n var node = nodes[j] ? nodes[j].toString() : '';\n if (!doCheck) {\n this.updateField(this.treeData, this.fields, node, 'isChecked', null);\n }\n }\n }\n if (this.autoCheck) {\n this.updateParentCheckState();\n }\n };\n TreeView.prototype.updateFieldChecked = function (checkbox, doCheck) {\n var currLi = closest(checkbox, '.' + LISTITEM);\n var id = currLi.getAttribute('data-uid');\n var nodeDetails = this.getNodeData(currLi);\n if (nodeDetails.isChecked === 'true' && !doCheck) {\n this.updateField(this.treeData, this.fields, id, 'isChecked', null);\n }\n };\n /**\n * Changes the parent and child check state while changing the checkedNodes via setmodel\n */\n TreeView.prototype.dynamicCheckState = function (node, doCheck) {\n if (this.dataType === 1) {\n var count = 0;\n var resultId = new DataManager(this.treeData).executeLocal(new Query().where(this.fields.id, 'equal', node, true));\n if (resultId[0]) {\n var id = resultId[0][this.fields.id] ? resultId[0][this.fields.id].toString() : null;\n var parent_1 = resultId[0][this.fields.parentID] ? resultId[0][this.fields.parentID].toString() : null;\n var parentElement = this.element.querySelector('[data-uid=\"' + parent_1 + '\"]');\n var indeterminate = parentElement ? select('.' + INDETERMINATE, parentElement) : null;\n var check = parentElement ? select('.' + CHECK, parentElement) : null;\n var element = this.element.querySelector('[data-uid=\"' + id + '\"]');\n var childNodes = this.getChildNodes(this.treeData, parent_1);\n if (childNodes) {\n for (var i = 0; i < childNodes.length; i++) {\n var childId = childNodes[i][this.fields.id] ? childNodes[i][this.fields.id].toString() : null;\n if (this.checkedNodes.indexOf(childId) !== -1) {\n count++;\n }\n }\n }\n if (this.checkedNodes.indexOf(node) !== -1 && parentElement && (id === node) && this.autoCheck) {\n this.changeState(parentElement, 'indeterminate', null);\n }\n else if (this.checkedNodes.indexOf(node) === -1 && element && (id === node) && !doCheck) {\n this.changeState(element, 'uncheck', null);\n }\n else if (this.checkedNodes.indexOf(node) !== -1 && element && (id === node) && doCheck) {\n this.changeState(element, 'check', null);\n }\n else if (this.checkedNodes.indexOf(node) === -1 && !element && parentElement && (id === node) && this.autoCheck\n && count !== 0) {\n this.changeState(parentElement, 'indeterminate', null);\n }\n else if (this.checkedNodes.indexOf(node) === -1 && !element && parentElement && (id === node) && this.autoCheck\n && count === 0) {\n this.changeState(parentElement, 'uncheck', null);\n }\n else if (!element && !parentElement && (id === node) && this.autoCheck) {\n this.updateIndeterminate(node, doCheck);\n }\n }\n }\n else if (this.dataType === 2 || (this.fields.dataSource instanceof DataManager &&\n this.isOffline)) {\n var id = void 0;\n var parentElement = void 0;\n var check = void 0;\n for (var i = 0; i < this.treeData.length; i++) {\n id = this.treeData[i][this.fields.id] ? this.treeData[i][this.fields.id].toString() : '';\n parentElement = this.element.querySelector('[data-uid=\"' + id + '\"]');\n check = parentElement ? select('.' + CHECK, parentElement) : null;\n if (this.checkedNodes.indexOf(id) === -1 && parentElement && check && !doCheck) {\n this.changeState(parentElement, 'uncheck', null);\n }\n var subChild = getValue(this.fields.child.toString(), this.treeData[i]);\n if (subChild) {\n this.updateChildIndeterminate(subChild, id, node, doCheck, id);\n }\n }\n }\n };\n /**\n * updates the parent and child check state while changing the checkedNodes via setmodel for listData\n */\n TreeView.prototype.updateIndeterminate = function (node, doCheck) {\n var indeterminateData = this.getTreeData(node);\n var count = 0;\n var parent;\n if (this.dataType === 1) {\n parent = indeterminateData[0][this.fields.parentID] ? indeterminateData[0][this.fields.parentID].toString() : null;\n }\n var childNodes = this.getChildNodes(this.treeData, parent);\n if (childNodes) {\n for (var i = 0; i < childNodes.length; i++) {\n var childId = childNodes[i][this.fields.id] ? childNodes[i][this.fields.id].toString() : null;\n if (this.checkedNodes.indexOf(childId) !== -1) {\n count++;\n }\n }\n }\n var parentElement = this.element.querySelector('[data-uid=\"' + parent + '\"]');\n if (parentElement && doCheck) {\n this.changeState(parentElement, 'indeterminate', null);\n }\n else if (!doCheck && parentElement && this.parentNodeCheck.indexOf(parent) === -1 && count !== 0) {\n this.changeState(parentElement, 'indeterminate', null);\n }\n else if (!doCheck && parentElement && this.parentNodeCheck.indexOf(parent) === -1 && count === 0) {\n this.changeState(parentElement, 'uncheck', null);\n }\n else if (!parentElement) {\n if (!doCheck && this.checkedNodes.indexOf(parent) === -1 && this.parentNodeCheck.indexOf(parent) !== -1) {\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(parent), 1);\n }\n else if (doCheck && this.checkedNodes.indexOf(parent) === -1 && this.parentNodeCheck.indexOf(parent) === -1) {\n this.parentNodeCheck.push(parent);\n }\n else if (!doCheck && this.checkedNodes.indexOf(parent) !== -1 && this.parentNodeCheck.indexOf(parent) === -1\n && count !== 0) {\n this.parentNodeCheck.push(parent);\n }\n this.updateIndeterminate(parent, doCheck);\n if (this.checkedNodes.indexOf(parent) !== -1 && !doCheck) {\n this.checkedNodes.splice(this.checkedNodes.indexOf(parent), 1);\n }\n }\n };\n /**\n * updates the parent and child check state while changing the checkedNodes via setmodel for hierarchical data\n */\n TreeView.prototype.updateChildIndeterminate = function (subChild, parent, node, doCheck, child) {\n var count = 0;\n for (var j = 0; j < subChild.length; j++) {\n var subId = subChild[j][this.fields.id] ? subChild[j][this.fields.id].toString() : '';\n if (this.checkedNodes.indexOf(subId) !== -1) {\n count++;\n }\n var parentElement = this.element.querySelector('[data-uid=\"' + parent + '\"]');\n var indeterminate = parentElement ? select('.' + INDETERMINATE, parentElement) : null;\n var check = parentElement ? select('.' + CHECK, parentElement) : null;\n var element = this.element.querySelector('[data-uid=\"' + subId + '\"]');\n var childElementCheck = element ? select('.' + CHECK, element) : null;\n if (this.checkedNodes.indexOf(node) !== -1 && parentElement && (subId === node) && this.autoCheck) {\n this.changeState(parentElement, 'indeterminate', null);\n }\n else if (this.checkedNodes.indexOf(node) === -1 && parentElement && !element && (subId === node) && !doCheck) {\n if (this.autoCheck) {\n this.changeState(parentElement, 'uncheck', null);\n }\n else {\n if (count !== 0) {\n this.changeState(parentElement, 'indeterminate', null);\n }\n else {\n this.changeState(parentElement, 'uncheck', null);\n }\n }\n }\n else if (this.checkedNodes.indexOf(node) === -1 && element && (subId === node) && !doCheck) {\n this.changeState(element, 'uncheck', null);\n }\n else if (this.checkedNodes.indexOf(node) === -1 && indeterminate && (subId === node) && this.autoCheck && count === 0\n && !doCheck) {\n indeterminate.classList.remove(INDETERMINATE);\n }\n else if (this.checkedNodes.indexOf(node) === -1 && !element && check && (subId === node) && count === 0) {\n this.changeState(parentElement, 'uncheck', null);\n }\n else if (this.checkedNodes.indexOf(subId) === -1 && element && childElementCheck && count === 0) {\n this.changeState(element, 'uncheck', null);\n }\n else if (!element && !parentElement && (subId === node) || (this.parentNodeCheck.indexOf(parent) !== -1) && this.autoCheck) {\n var childElement = this.element.querySelector('[data-uid=\"' + child + '\"]');\n if (doCheck && count !== 0) {\n this.changeState(childElement, 'indeterminate', null);\n }\n else if (doCheck && count === subChild.length && this.checkedNodes.indexOf(parent) === -1) {\n this.checkedNodes.push(parent);\n }\n else if (!doCheck && count === 0 && this.parentNodeCheck.indexOf(parent) !== -1) {\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(parent));\n }\n if (this.parentNodeCheck.indexOf(parent) === -1) {\n this.parentNodeCheck.push(parent);\n }\n }\n var innerChild = getValue(this.fields.child.toString(), subChild[j]);\n if (innerChild) {\n this.updateChildIndeterminate(innerChild, subId, node, doCheck, child);\n }\n }\n };\n TreeView.prototype.changeState = function (wrapper, state, e, isPrevent, isAdd, doCheck) {\n var _this = this;\n var eventArgs;\n var currLi = closest(wrapper, '.' + LISTITEM);\n if (!isPrevent) {\n this.checkActionNodes = [];\n eventArgs = this.getCheckEvent(currLi, state, e);\n this.trigger('nodeChecking', eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n _this.nodeCheckAction(wrapper, state, currLi, observedArgs, e, isPrevent, isAdd, doCheck);\n }\n });\n }\n else {\n this.nodeCheckAction(wrapper, state, currLi, eventArgs, e, isPrevent, isAdd, doCheck);\n }\n };\n TreeView.prototype.nodeCheckAction = function (wrapper, state, currLi, eventArgs, e, isPrevent, isAdd, doCheck) {\n var ariaState;\n var frameSpan = wrapper.getElementsByClassName(CHECKBOXFRAME)[0];\n if (state === 'check' && !frameSpan.classList.contains(CHECK)) {\n frameSpan.classList.remove(INDETERMINATE);\n frameSpan.classList.add(CHECK);\n this.addCheck(currLi);\n ariaState = 'true';\n }\n else if (state === 'uncheck' && (frameSpan.classList.contains(CHECK) || frameSpan.classList.contains(INDETERMINATE))) {\n removeClass([frameSpan], [CHECK, INDETERMINATE]);\n this.removeCheck(currLi);\n ariaState = 'false';\n }\n else if (state === 'indeterminate' && this.autoCheck) {\n frameSpan.classList.remove(CHECK);\n frameSpan.classList.add(INDETERMINATE);\n this.removeCheck(currLi);\n ariaState = 'mixed';\n }\n ariaState = state === 'check' ? 'true' : state === 'uncheck' ? 'false' : ariaState;\n if (!isNOU(ariaState)) {\n wrapper.setAttribute('aria-checked', ariaState);\n }\n if (isAdd) {\n var data = [].concat([], this.checkActionNodes);\n eventArgs = this.getCheckEvent(currLi, state, e);\n if (isUndefined(isPrevent)) {\n eventArgs.data = data;\n }\n }\n if (doCheck !== undefined) {\n this.ensureStateChange(currLi, doCheck);\n }\n if (!isPrevent) {\n if (!isNOU(ariaState)) {\n wrapper.setAttribute('aria-checked', ariaState);\n eventArgs.data[0].checked = ariaState;\n this.trigger('nodeChecked', eventArgs);\n this.checkActionNodes = [];\n }\n }\n };\n TreeView.prototype.addCheck = function (liEle) {\n var id = liEle.getAttribute('data-uid');\n if (!isNOU(id) && this.checkedNodes.indexOf(id) === -1) {\n this.checkedNodes.push(id);\n }\n };\n TreeView.prototype.removeCheck = function (liEle) {\n var index = this.checkedNodes.indexOf(liEle.getAttribute('data-uid'));\n if (index > -1) {\n this.checkedNodes.splice(index, 1);\n }\n };\n TreeView.prototype.getCheckEvent = function (currLi, action, e) {\n this.checkActionNodes.push(this.getNodeData(currLi));\n var nodeData = this.checkActionNodes;\n return { action: action, cancel: false, isInteracted: isNOU(e) ? false : true, node: currLi, data: nodeData };\n };\n TreeView.prototype.finalize = function () {\n var firstUl = select('.' + PARENTITEM, this.element);\n if (!isNullOrUndefined(firstUl)) {\n firstUl.setAttribute('role', treeAriaAttr.treeRole);\n this.setMultiSelect(this.allowMultiSelection);\n var firstNode = select('.' + LISTITEM, this.element);\n if (firstNode) {\n addClass([firstNode], FOCUS);\n this.updateIdAttr(null, firstNode);\n }\n this.renderReactTemplates();\n this.hasPid = this.rootData[0] ? this.rootData[0].hasOwnProperty(this.fields.parentID) : false;\n this.doExpandAction();\n }\n };\n TreeView.prototype.doExpandAction = function () {\n var eUids = this.expandedNodes;\n if (this.isInitalExpand && eUids.length > 0) {\n this.setProperties({ expandedNodes: [] }, true);\n /* eslint-disable */\n if (this.fields.dataSource instanceof DataManager) {\n this.expandGivenNodes(eUids);\n }\n else {\n for (var i = 0; i < eUids.length; i++) {\n var eNode = select('[data-uid=\"' + eUids[i] + '\"]', this.element);\n if (!isNOU(eNode)) {\n var icon = select('.' + EXPANDABLE, select('.' + TEXTWRAP, eNode));\n if (!isNOU(icon)) {\n this.expandAction(eNode, icon, null);\n }\n }\n else {\n if (eUids[i] && this.expandChildren.indexOf(eUids[i]) === -1) {\n this.expandChildren.push(eUids[i].toString());\n }\n continue;\n }\n }\n this.afterFinalized();\n }\n }\n else {\n this.afterFinalized();\n }\n };\n TreeView.prototype.expandGivenNodes = function (arr) {\n var proxy = this;\n this.expandCallback(arr[this.index], function () {\n proxy.index++;\n if (proxy.index < arr.length) {\n proxy.expandGivenNodes(arr);\n }\n else {\n proxy.afterFinalized();\n }\n });\n };\n TreeView.prototype.expandCallback = function (eUid, callback) {\n var eNode = select('[data-uid=\"' + eUid + '\"]', this.element);\n if (!isNOU(eNode)) {\n var icon = select('.' + EXPANDABLE, select('.' + TEXTWRAP, eNode));\n if (!isNOU(icon)) {\n this.expandAction(eNode, icon, null, false, callback);\n }\n else {\n callback();\n }\n }\n else {\n callback();\n }\n };\n TreeView.prototype.afterFinalized = function () {\n this.doSelectionAction();\n this.updateCheckedProp();\n this.isAnimate = true;\n this.isInitalExpand = false;\n if (!this.isLoaded || this.isFieldChange) {\n var eventArgs = { data: this.treeData };\n this.trigger('dataBound', eventArgs);\n }\n this.isLoaded = true;\n };\n TreeView.prototype.doSelectionAction = function () {\n var sNodes = selectAll('.' + SELECTED, this.element);\n var sUids = this.selectedNodes;\n if (sUids.length > 0) {\n this.setProperties({ selectedNodes: [] }, true);\n for (var i = 0; i < sUids.length; i++) {\n var sNode = select('[data-uid=\"' + sUids[i] + '\"]', this.element);\n if (sNode && !(sNode.classList.contains('e-active'))) {\n this.selectNode(sNode, null, true);\n }\n else {\n this.selectedNodes.push(sUids[i]);\n }\n if (!this.allowMultiSelection) {\n break;\n }\n }\n }\n else {\n this.selectGivenNodes(sNodes);\n }\n removeClass(sNodes, SELECTED);\n };\n TreeView.prototype.selectGivenNodes = function (sNodes) {\n for (var i = 0; i < sNodes.length; i++) {\n if (!sNodes[i].classList.contains('e-disable')) {\n this.selectNode(sNodes[i], null, true);\n }\n if (!this.allowMultiSelection) {\n break;\n }\n }\n };\n TreeView.prototype.clickHandler = function (event) {\n var target = event.originalEvent.target;\n EventHandler.remove(this.element, 'contextmenu', this.preventContextMenu);\n if (!target || this.dragStartAction) {\n return;\n }\n else {\n var classList = target.classList;\n var li = closest(target, '.' + LISTITEM);\n if (!li) {\n return;\n }\n else if (event.originalEvent.which !== 3) {\n var rippleElement = select('.' + RIPPLEELMENT, li);\n var rippleIcons = select('.' + ICON, li);\n this.removeHover();\n this.setFocusElement(li);\n if (this.showCheckBox && !li.classList.contains('e-disable')) {\n var checkWrapper = closest(target, '.' + CHECKBOXWRAP);\n if (!isNOU(checkWrapper)) {\n var checkElement = select('.' + CHECKBOXFRAME, checkWrapper);\n this.validateCheckNode(checkWrapper, checkElement.classList.contains(CHECK), li, event.originalEvent);\n this.triggerClickEvent(event.originalEvent, li);\n return;\n }\n }\n if (classList.contains(EXPANDABLE)) {\n this.expandAction(li, target, event);\n }\n else if (classList.contains(COLLAPSIBLE)) {\n this.collapseNode(li, target, event);\n }\n else if (rippleElement && rippleIcons) {\n if (rippleIcons.classList.contains(RIPPLE) && rippleIcons.classList.contains(EXPANDABLE)) {\n this.expandAction(li, rippleIcons, event);\n }\n else if (rippleIcons.classList.contains(RIPPLE) && rippleIcons.classList.contains(COLLAPSIBLE)) {\n this.collapseNode(li, rippleIcons, event);\n }\n else if (!classList.contains(PARENTITEM) && !classList.contains(LISTITEM)) {\n this.toggleSelect(li, event.originalEvent, false);\n }\n }\n else {\n if (!classList.contains(PARENTITEM) && !classList.contains(LISTITEM)) {\n this.toggleSelect(li, event.originalEvent, false);\n }\n }\n }\n this.triggerClickEvent(event.originalEvent, li);\n }\n };\n TreeView.prototype.nodeCheckedEvent = function (wrapper, isCheck, e) {\n var currLi = closest(wrapper, '.' + LISTITEM);\n var eventArgs = this.getCheckEvent(wrapper, isCheck ? 'uncheck' : 'check', e);\n eventArgs.data = eventArgs.data.splice(0, eventArgs.data.length - 1);\n this.trigger('nodeChecked', eventArgs);\n };\n TreeView.prototype.triggerClickEvent = function (e, li) {\n var eventArgs = {\n event: e,\n node: li,\n };\n this.trigger('nodeClicked', eventArgs);\n };\n TreeView.prototype.expandNode = function (currLi, icon, loaded) {\n var _this = this;\n this.renderReactTemplates();\n if (icon.classList.contains(LOAD)) {\n this.hideSpinner(icon);\n }\n if (!this.initialRender) {\n icon.classList.add('interaction');\n }\n if (loaded !== true || (loaded === true && currLi.classList.contains('e-expanded'))) {\n if (this.preventExpand !== true) {\n removeClass([icon], EXPANDABLE);\n addClass([icon], COLLAPSIBLE);\n var start_1 = 0;\n var end_1 = 0;\n var proxy_1 = this;\n var ul_1 = select('.' + PARENTITEM, currLi);\n var liEle_1 = currLi;\n this.setHeight(liEle_1, ul_1);\n var activeElement_1 = select('.' + LISTITEM + '.' + ACTIVE, currLi);\n if (this.isAnimate && !this.isRefreshed) {\n this.aniObj.animate(ul_1, {\n name: this.animation.expand.effect,\n duration: this.animation.expand.duration,\n timingFunction: this.animation.expand.easing,\n begin: function (args) {\n liEle_1.style.overflow = 'hidden';\n if (!isNullOrUndefined(activeElement_1) && activeElement_1 instanceof HTMLElement) {\n activeElement_1.classList.add(ITEM_ANIMATION_ACTIVE);\n }\n start_1 = liEle_1.offsetHeight;\n end_1 = select('.' + TEXTWRAP, currLi).offsetHeight;\n },\n progress: function (args) {\n args.element.style.display = 'block';\n proxy_1.animateHeight(args, start_1, end_1);\n },\n end: function (args) {\n args.element.style.display = 'block';\n if (!isNullOrUndefined(activeElement_1) && activeElement_1 instanceof HTMLElement) {\n activeElement_1.classList.remove(ITEM_ANIMATION_ACTIVE);\n }\n _this.expandedNode(liEle_1, ul_1, icon);\n }\n });\n }\n else {\n this.expandedNode(liEle_1, ul_1, icon);\n }\n }\n }\n else {\n var ul = select('.' + PARENTITEM, currLi);\n ul.style.display = 'none';\n if (this.fields.dataSource instanceof DataManager === true) {\n this.preventExpand = false;\n }\n }\n if (this.initialRender) {\n icon.classList.add('interaction');\n }\n };\n TreeView.prototype.expandedNode = function (currLi, ul, icon) {\n ul.style.display = 'block';\n currLi.style.display = 'block';\n currLi.style.overflow = '';\n currLi.style.height = '';\n removeClass([icon], PROCESS);\n this.addExpand(currLi);\n if (this.isLoaded && this.expandArgs && !this.isRefreshed) {\n this.expandArgs = this.getExpandEvent(currLi, null);\n this.trigger('nodeExpanded', this.expandArgs);\n }\n };\n TreeView.prototype.addExpand = function (liEle) {\n liEle.setAttribute('aria-expanded', 'true');\n removeClass([liEle], NODECOLLAPSED);\n var id = liEle.getAttribute('data-uid');\n if (!isNOU(id) && this.expandedNodes.indexOf(id) === -1) {\n this.expandedNodes.push(id);\n }\n };\n TreeView.prototype.collapseNode = function (currLi, icon, e) {\n var _this = this;\n if (icon.classList.contains(PROCESS)) {\n return;\n }\n else {\n addClass([icon], PROCESS);\n }\n var colArgs;\n if (this.isLoaded) {\n colArgs = this.getExpandEvent(currLi, e);\n this.trigger('nodeCollapsing', colArgs, function (observedArgs) {\n if (observedArgs.cancel) {\n removeClass([icon], PROCESS);\n }\n else {\n _this.nodeCollapseAction(currLi, icon, observedArgs);\n }\n });\n }\n else {\n this.nodeCollapseAction(currLi, icon, colArgs);\n }\n };\n TreeView.prototype.nodeCollapseAction = function (currLi, icon, colArgs) {\n var _this = this;\n removeClass([icon], COLLAPSIBLE);\n addClass([icon], EXPANDABLE);\n var start = 0;\n var end = 0;\n var proxy = this;\n var ul = select('.' + PARENTITEM, currLi);\n var liEle = currLi;\n var activeElement = select('.' + LISTITEM + '.' + ACTIVE, currLi);\n if (this.isAnimate) {\n this.aniObj.animate(ul, {\n name: this.animation.collapse.effect,\n duration: this.animation.collapse.duration,\n timingFunction: this.animation.collapse.easing,\n begin: function (args) {\n liEle.style.overflow = 'hidden';\n if (!isNullOrUndefined(activeElement) && activeElement instanceof HTMLElement) {\n activeElement.classList.add(ITEM_ANIMATION_ACTIVE);\n }\n start = select('.' + TEXTWRAP, currLi).offsetHeight;\n end = liEle.offsetHeight;\n },\n progress: function (args) {\n proxy.animateHeight(args, start, end);\n },\n end: function (args) {\n args.element.style.display = 'none';\n if (!isNullOrUndefined(activeElement) && activeElement instanceof HTMLElement) {\n activeElement.classList.remove(ITEM_ANIMATION_ACTIVE);\n }\n _this.collapsedNode(liEle, ul, icon, colArgs);\n }\n });\n }\n else {\n this.collapsedNode(liEle, ul, icon, colArgs);\n }\n };\n TreeView.prototype.collapsedNode = function (liEle, ul, icon, colArgs) {\n ul.style.display = 'none';\n liEle.style.overflow = '';\n liEle.style.height = '';\n removeClass([icon], PROCESS);\n this.removeExpand(liEle);\n if (this.isLoaded) {\n colArgs = this.getExpandEvent(liEle, null);\n this.trigger('nodeCollapsed', colArgs);\n }\n };\n TreeView.prototype.removeExpand = function (liEle, toRemove) {\n if (toRemove) {\n liEle.removeAttribute('aria-expanded');\n }\n else {\n this.disableExpandAttr(liEle);\n }\n var index = this.expandedNodes.indexOf(liEle.getAttribute('data-uid'));\n if (index > -1) {\n this.expandedNodes.splice(index, 1);\n }\n };\n TreeView.prototype.disableExpandAttr = function (liEle) {\n liEle.setAttribute('aria-expanded', 'false');\n addClass([liEle], NODECOLLAPSED);\n };\n TreeView.prototype.setHeight = function (currLi, ul) {\n ul.style.display = 'block';\n ul.style.visibility = 'hidden';\n currLi.style.height = currLi.offsetHeight + 'px';\n ul.style.display = 'none';\n ul.style.visibility = '';\n };\n TreeView.prototype.animateHeight = function (args, start, end) {\n var remaining = (args.duration - args.timeStamp) / args.duration;\n var currentHeight = (end - start) * remaining + start;\n args.element.parentElement.style.height = currentHeight + 'px';\n };\n TreeView.prototype.renderChildNodes = function (parentLi, expandChild, callback, loaded) {\n var _this = this;\n var eicon = select('div.' + ICON, parentLi);\n if (isNOU(eicon)) {\n return;\n }\n this.showSpinner(eicon);\n var childItems;\n /* eslint-disable */\n if (this.fields.dataSource instanceof DataManager) {\n var level = this.parents(parentLi, '.' + PARENTITEM).length;\n var mapper_2 = this.getChildFields(this.fields, level, 1);\n if (isNOU(mapper_2) || isNOU(mapper_2.dataSource)) {\n detach(eicon);\n this.removeExpand(parentLi, true);\n return;\n }\n this.treeList.push('false');\n if (this.fields.dataSource instanceof DataManager && this.isOffline) {\n this.treeList.pop();\n childItems = this.getChildNodes(this.treeData, parentLi.getAttribute('data-uid'));\n this.loadChild(childItems, mapper_2, eicon, parentLi, expandChild, callback, loaded);\n }\n else {\n mapper_2.dataSource.executeQuery(this.getQuery(mapper_2, parentLi.getAttribute('data-uid'))).then(function (e) {\n _this.treeList.pop();\n childItems = e.result;\n if (_this.dataType === 1) {\n _this.dataType = 2;\n }\n _this.loadChild(childItems, mapper_2, eicon, parentLi, expandChild, callback, loaded);\n }).catch(function (e) {\n _this.trigger('actionFailure', { error: e });\n });\n }\n }\n else {\n childItems = this.getChildNodes(this.treeData, parentLi.getAttribute('data-uid'));\n this.currentLoadData = this.getSortedData(childItems);\n if (isNOU(childItems) || childItems.length === 0) {\n detach(eicon);\n this.removeExpand(parentLi, true);\n return;\n }\n else {\n this.listBaseOption.ariaAttributes.level = parseFloat(parentLi.getAttribute('aria-level')) + 1;\n parentLi.appendChild(ListBase.createList(this.createElement, this.currentLoadData, this.listBaseOption));\n this.expandNode(parentLi, eicon, loaded);\n this.setSelectionForChildNodes(childItems);\n this.ensureCheckNode(parentLi);\n this.finalizeNode(parentLi);\n this.disableTreeNodes(childItems);\n this.renderSubChild(parentLi, expandChild, loaded);\n }\n }\n };\n TreeView.prototype.loadChild = function (childItems, mapper, eicon, parentLi, expandChild, callback, loaded) {\n this.currentLoadData = childItems;\n if (isNOU(childItems) || childItems.length === 0) {\n detach(eicon);\n this.removeExpand(parentLi, true);\n }\n else {\n this.updateListProp(mapper);\n if (this.fields.dataSource instanceof DataManager && !this.isOffline) {\n var id = parentLi.getAttribute('data-uid');\n var nodeData = this.getNodeObject(id);\n setValue('child', childItems, nodeData);\n }\n this.listBaseOption.ariaAttributes.level = parseFloat(parentLi.getAttribute('aria-level')) + 1;\n parentLi.appendChild(ListBase.createList(this.createElement, childItems, this.listBaseOption));\n this.expandNode(parentLi, eicon, loaded);\n this.setSelectionForChildNodes(childItems);\n this.ensureCheckNode(parentLi);\n this.finalizeNode(parentLi);\n this.disableTreeNodes(childItems);\n this.renderSubChild(parentLi, expandChild, loaded);\n }\n if (callback) {\n callback();\n }\n if (this.treeList.length === 0 && !this.isLoaded) {\n this.finalize();\n }\n };\n TreeView.prototype.disableTreeNodes = function (childItems) {\n var i = 0;\n while (i < childItems.length) {\n var id = childItems[i][this.fields.id] ? childItems[i][this.fields.id].toString() : null;\n if (this.disableNode !== undefined && this.disableNode.indexOf(id) !== -1) {\n this.doDisableAction([id]);\n }\n i++;\n }\n };\n /**\n * Sets the child Item in selectedState while rendering the child node\n */\n TreeView.prototype.setSelectionForChildNodes = function (nodes) {\n var i;\n for (i = 0; i < nodes.length; i++) {\n var id = nodes[i][this.fields.id] ? nodes[i][this.fields.id].toString() : null;\n if (this.selectedNodes !== undefined && this.selectedNodes.indexOf(id) !== -1) {\n this.doSelectionAction();\n }\n }\n };\n TreeView.prototype.ensureCheckNode = function (element) {\n if (this.showCheckBox) {\n this.ele = (this.checkedElement) ? this.checkedElement.indexOf(element.getAttribute('data-uid')) : null;\n if (this.autoCheck) {\n this.ensureChildCheckState(element);\n this.ensureParentCheckState(element);\n }\n }\n this.currentLoadData = null;\n };\n TreeView.prototype.getFields = function (mapper, nodeLevel, dataLevel) {\n if (nodeLevel === dataLevel) {\n return mapper;\n }\n else {\n return this.getFields(this.getChildMapper(mapper), nodeLevel, dataLevel + 1);\n }\n };\n TreeView.prototype.getChildFields = function (mapper, nodeLevel, dataLevel) {\n var childData;\n if (nodeLevel === dataLevel) {\n return this.getChildMapper(mapper);\n }\n else {\n return this.getChildFields(this.getChildMapper(mapper), nodeLevel, dataLevel + 1);\n }\n };\n TreeView.prototype.getChildMapper = function (mapper) {\n return (typeof mapper.child === 'string' || isNOU(mapper.child)) ? mapper : mapper.child;\n };\n TreeView.prototype.getChildNodes = function (obj, parentId, isRoot) {\n if (isRoot === void 0) { isRoot = false; }\n var childNodes;\n if (isNOU(obj)) {\n return childNodes;\n }\n else if (this.dataType === 1) {\n return this.getChildGroup(this.groupedData, parentId, isRoot);\n }\n else {\n if (typeof this.fields.child === 'string') {\n for (var i = 0, objlen = obj.length; i < objlen; i++) {\n var dataId = getValue(this.fields.id, obj[i]);\n if (dataId && dataId.toString() === parentId) {\n return getValue(this.fields.child, obj[i]);\n }\n else if (!isNOU(getValue(this.fields.child, obj[i]))) {\n childNodes = this.getChildNodes(getValue(this.fields.child, obj[i]), parentId);\n if (childNodes !== undefined) {\n break;\n }\n }\n }\n }\n }\n return childNodes;\n };\n TreeView.prototype.getChildGroup = function (data, parentId, isRoot) {\n var childNodes;\n if (isNOU(data)) {\n return childNodes;\n }\n for (var i = 0, objlen = data.length; i < objlen; i++) {\n if (!isNOU(data[i][0]) && !isNOU(getValue(this.fields.parentID, data[i][0]))) {\n if (getValue(this.fields.parentID, data[i][0]).toString() === parentId) {\n return data[i];\n }\n }\n else if (isRoot) {\n return data[i];\n }\n else {\n return [];\n }\n }\n return childNodes;\n };\n TreeView.prototype.renderSubChild = function (element, expandChild, loaded) {\n if (expandChild) {\n var cIcons = selectAll('.' + EXPANDABLE, element);\n for (var i = 0, len = cIcons.length; i < len; i++) {\n var icon = cIcons[i];\n if (element.querySelector('.e-icons') !== cIcons[i]) {\n var curLi = closest(icon, '.' + LISTITEM);\n this.expandArgs = this.getExpandEvent(curLi, null);\n if (loaded !== true) {\n this.trigger('nodeExpanding', this.expandArgs);\n }\n this.renderChildNodes(curLi, expandChild, null, loaded);\n }\n }\n }\n };\n TreeView.prototype.toggleSelect = function (li, e, multiSelect) {\n if (!li.classList.contains('e-disable')) {\n if (this.allowMultiSelection && ((e && e.ctrlKey) || multiSelect) && this.isActive(li)) {\n this.unselectNode(li, e);\n }\n else {\n this.selectNode(li, e, multiSelect);\n }\n }\n };\n TreeView.prototype.isActive = function (li) {\n return li.classList.contains(ACTIVE) ? true : false;\n };\n TreeView.prototype.selectNode = function (li, e, multiSelect) {\n var _this = this;\n if (isNOU(li) || (!this.allowMultiSelection && this.isActive(li) && !isNOU(e))) {\n this.setFocusElement(li);\n return;\n }\n var eventArgs;\n if (this.isLoaded) {\n eventArgs = this.getSelectEvent(li, 'select', e);\n this.trigger('nodeSelecting', eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n _this.nodeSelectAction(li, e, observedArgs, multiSelect);\n }\n });\n }\n else {\n this.nodeSelectAction(li, e, eventArgs, multiSelect);\n }\n };\n TreeView.prototype.nodeSelectAction = function (li, e, eventArgs, multiSelect) {\n if (!this.allowMultiSelection || (!multiSelect && (!e || (e && !e.ctrlKey)))) {\n this.removeSelectAll();\n }\n if (this.allowMultiSelection && e && e.shiftKey) {\n if (!this.startNode) {\n this.startNode = li;\n }\n var startIndex = this.liList.indexOf(this.startNode);\n var endIndex = this.liList.indexOf(li);\n if (startIndex > endIndex) {\n var temp = startIndex;\n startIndex = endIndex;\n endIndex = temp;\n }\n for (var i = startIndex; i <= endIndex; i++) {\n var currNode = this.liList[i];\n if (isVisible(currNode) && !currNode.classList.contains('e-disable')) {\n this.addSelect(currNode);\n }\n }\n }\n else {\n this.startNode = li;\n this.addSelect(li);\n }\n this.setFocusElement(li);\n if (this.isLoaded) {\n eventArgs.nodeData = this.getNodeData(li);\n this.trigger('nodeSelected', eventArgs);\n }\n };\n TreeView.prototype.unselectNode = function (li, e) {\n var _this = this;\n var eventArgs;\n if (this.isLoaded) {\n eventArgs = this.getSelectEvent(li, 'un-select', e);\n this.trigger('nodeSelecting', eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n _this.nodeUnselectAction(li, observedArgs);\n }\n });\n }\n else {\n this.nodeUnselectAction(li, eventArgs);\n }\n };\n TreeView.prototype.nodeUnselectAction = function (li, eventArgs) {\n this.removeSelect(li);\n this.setFocusElement(li);\n if (this.isLoaded) {\n eventArgs.nodeData = this.getNodeData(li);\n this.trigger('nodeSelected', eventArgs);\n }\n };\n TreeView.prototype.setFocusElement = function (li) {\n if (!isNOU(li)) {\n var focusedNode = this.getFocusedNode();\n if (focusedNode) {\n removeClass([focusedNode], FOCUS);\n }\n addClass([li], FOCUS);\n this.updateIdAttr(focusedNode, li);\n }\n };\n TreeView.prototype.addSelect = function (liEle) {\n liEle.setAttribute('aria-selected', 'true');\n addClass([liEle], ACTIVE);\n var id = liEle.getAttribute('data-uid');\n if (!isNOU(id) && this.selectedNodes.indexOf(id) === -1) {\n this.selectedNodes.push(id);\n }\n };\n TreeView.prototype.removeSelect = function (liEle) {\n if (this.allowMultiSelection) {\n liEle.setAttribute('aria-selected', 'false');\n }\n else {\n liEle.removeAttribute('aria-selected');\n }\n removeClass([liEle], ACTIVE);\n var index = this.selectedNodes.indexOf(liEle.getAttribute('data-uid'));\n if (index > -1) {\n this.selectedNodes.splice(index, 1);\n }\n };\n TreeView.prototype.removeSelectAll = function () {\n var selectedLI = this.element.querySelectorAll('.' + ACTIVE);\n for (var _i = 0, selectedLI_1 = selectedLI; _i < selectedLI_1.length; _i++) {\n var ele = selectedLI_1[_i];\n if (this.allowMultiSelection) {\n ele.setAttribute('aria-selected', 'false');\n }\n else {\n ele.removeAttribute('aria-selected');\n }\n }\n removeClass(selectedLI, ACTIVE);\n this.setProperties({ selectedNodes: [] }, true);\n };\n TreeView.prototype.getSelectEvent = function (currLi, action, e) {\n var nodeData = this.getNodeData(currLi);\n return { action: action, cancel: false, isInteracted: isNOU(e) ? false : true, node: currLi, nodeData: nodeData };\n };\n TreeView.prototype.setExpandOnType = function () {\n this.expandOnType = (this.expandOn === 'Auto') ? (Browser.isDevice ? 'Click' : 'DblClick') : this.expandOn;\n };\n TreeView.prototype.expandHandler = function (e) {\n var target = e.originalEvent.target;\n if (!target || target.classList.contains(INPUT) || target.classList.contains(ROOT) ||\n target.classList.contains(PARENTITEM) || target.classList.contains(LISTITEM) ||\n target.classList.contains(ICON) || this.showCheckBox && closest(target, '.' + CHECKBOXWRAP)) {\n return;\n }\n else {\n this.expandCollapseAction(closest(target, '.' + LISTITEM), e);\n }\n };\n TreeView.prototype.expandCollapseAction = function (currLi, e) {\n var icon = select('div.' + ICON, currLi);\n if (!icon || icon.classList.contains(PROCESS)) {\n return;\n }\n else {\n var classList = icon.classList;\n if (classList.contains(EXPANDABLE)) {\n this.expandAction(currLi, icon, e);\n }\n else if (classList.contains(COLLAPSIBLE)) {\n this.collapseNode(currLi, icon, e);\n }\n }\n };\n TreeView.prototype.expandAction = function (currLi, icon, e, expandChild, callback) {\n var _this = this;\n if (icon.classList.contains(PROCESS)) {\n return;\n }\n else {\n addClass([icon], PROCESS);\n }\n if (this.isLoaded && !this.isRefreshed) {\n this.expandArgs = this.getExpandEvent(currLi, e);\n this.trigger('nodeExpanding', this.expandArgs, function (observedArgs) {\n if (observedArgs.cancel) {\n removeClass([icon], PROCESS);\n }\n else {\n _this.nodeExpandAction(currLi, icon, expandChild, callback);\n }\n });\n }\n else {\n this.nodeExpandAction(currLi, icon, expandChild, callback);\n }\n };\n TreeView.prototype.nodeExpandAction = function (currLi, icon, expandChild, callback) {\n var ul = select('.' + PARENTITEM, currLi);\n if (ul && ul.nodeName === 'UL') {\n this.expandNode(currLi, icon);\n }\n else {\n this.renderChildNodes(currLi, expandChild, callback);\n var liEles = selectAll('.' + LISTITEM, currLi);\n for (var i = 0; i < liEles.length; i++) {\n var id = this.getId(liEles[i]);\n if (this.expandChildren.indexOf(id) !== -1 && this.expandChildren !== undefined) {\n var icon_1 = select('.' + EXPANDABLE, select('.' + TEXTWRAP, liEles[i]));\n if (!isNOU(icon_1)) {\n this.expandAction(liEles[i], icon_1, null);\n }\n this.expandChildren.splice(this.expandChildren.indexOf(id), 1);\n }\n }\n }\n };\n TreeView.prototype.keyActionHandler = function (e) {\n var _this = this;\n var target = e.target;\n var focusedNode = this.getFocusedNode();\n if (target && target.classList.contains(INPUT)) {\n var inpEle = target;\n if (e.action === 'enter') {\n inpEle.blur();\n this.element.focus();\n addClass([focusedNode], HOVER);\n }\n else if (e.action === 'escape') {\n inpEle.value = this.oldText;\n inpEle.blur();\n this.element.focus();\n addClass([focusedNode], HOVER);\n }\n return;\n }\n e.preventDefault();\n var eventArgs = {\n cancel: false,\n event: e,\n node: focusedNode,\n };\n this.trigger('keyPress', eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n switch (e.action) {\n case 'space':\n if (_this.showCheckBox) {\n _this.checkNode(e);\n }\n break;\n case 'moveRight':\n _this.openNode(_this.enableRtl ? false : true, e);\n break;\n case 'moveLeft':\n _this.openNode(_this.enableRtl ? true : false, e);\n break;\n case 'shiftDown':\n _this.shiftKeySelect(true, e);\n break;\n case 'moveDown':\n case 'ctrlDown':\n case 'csDown':\n _this.navigateNode(true);\n break;\n case 'shiftUp':\n _this.shiftKeySelect(false, e);\n break;\n case 'moveUp':\n case 'ctrlUp':\n case 'csUp':\n _this.navigateNode(false);\n break;\n case 'home':\n case 'shiftHome':\n case 'ctrlHome':\n case 'csHome':\n _this.navigateRootNode(true);\n break;\n case 'end':\n case 'shiftEnd':\n case 'ctrlEnd':\n case 'csEnd':\n _this.navigateRootNode(false);\n break;\n case 'enter':\n case 'ctrlEnter':\n case 'shiftEnter':\n case 'csEnter':\n _this.toggleSelect(focusedNode, e);\n break;\n case 'f2':\n if (_this.allowEditing && !focusedNode.classList.contains('e-disable')) {\n _this.createTextbox(focusedNode, e);\n }\n break;\n case 'ctrlA':\n if (_this.allowMultiSelection) {\n var sNodes = selectAll('.' + LISTITEM + ':not(.' + ACTIVE + ')', _this.element);\n _this.selectGivenNodes(sNodes);\n }\n break;\n }\n }\n });\n };\n TreeView.prototype.navigateToFocus = function (isUp) {\n var focusNode = this.getFocusedNode().querySelector('.' + TEXTWRAP);\n var pos = focusNode.getBoundingClientRect();\n var parent = this.getScrollParent(this.element);\n if (!isNOU(parent)) {\n var parentPos = parent.getBoundingClientRect();\n if (pos.bottom > parentPos.bottom) {\n parent.scrollTop += pos.bottom - parentPos.bottom;\n }\n else if (pos.top < parentPos.top) {\n parent.scrollTop -= parentPos.top - pos.top;\n }\n }\n var isVisible = this.isVisibleInViewport(focusNode);\n if (!isVisible) {\n focusNode.scrollIntoView(isUp);\n }\n };\n TreeView.prototype.isVisibleInViewport = function (txtWrap) {\n var pos = txtWrap.getBoundingClientRect();\n return (pos.top >= 0 && pos.left >= 0 && pos.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n pos.right <= (window.innerWidth || document.documentElement.clientWidth));\n };\n TreeView.prototype.getScrollParent = function (node) {\n if (isNOU(node)) {\n return null;\n }\n return (node.scrollHeight > node.clientHeight) ? node : this.getScrollParent(node.parentElement);\n };\n TreeView.prototype.shiftKeySelect = function (isTowards, e) {\n if (this.allowMultiSelection) {\n var focusedNode = this.getFocusedNode();\n var nextNode = isTowards ? this.getNextNode(focusedNode) : this.getPrevNode(focusedNode);\n this.removeHover();\n this.setFocusElement(nextNode);\n this.toggleSelect(nextNode, e, false);\n this.navigateToFocus(!isTowards);\n }\n else {\n this.navigateNode(isTowards);\n }\n };\n TreeView.prototype.checkNode = function (e) {\n var focusedNode = this.getFocusedNode();\n var checkWrap = select('.' + CHECKBOXWRAP, focusedNode);\n var isChecked = select(' .' + CHECKBOXFRAME, checkWrap).classList.contains(CHECK);\n if (!focusedNode.classList.contains('e-disable')) {\n if (focusedNode.getElementsByClassName(\"e-checkbox-disabled\").length == 0) {\n this.validateCheckNode(checkWrap, isChecked, focusedNode, e);\n }\n }\n };\n TreeView.prototype.validateCheckNode = function (checkWrap, isCheck, li, e) {\n var _this = this;\n var currLi = closest(checkWrap, '.' + LISTITEM);\n this.checkActionNodes = [];\n var ariaState = !isCheck ? 'true' : 'false';\n if (!isNOU(ariaState)) {\n checkWrap.setAttribute('aria-checked', ariaState);\n }\n var eventArgs = this.getCheckEvent(currLi, isCheck ? 'uncheck' : 'check', e);\n this.trigger('nodeChecking', eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n _this.nodeCheckingAction(checkWrap, isCheck, li, observedArgs, e);\n }\n });\n };\n TreeView.prototype.nodeCheckingAction = function (checkWrap, isCheck, li, eventArgs, e) {\n if (this.checkedElement.indexOf(li.getAttribute('data-uid')) === -1) {\n this.checkedElement.push(li.getAttribute('data-uid'));\n var child = this.getChildNodes(this.treeData, li.getAttribute('data-uid'));\n (child !== null) ? this.allCheckNode(child, this.checkedElement, null, null, false) : child = null;\n }\n this.changeState(checkWrap, isCheck ? 'uncheck' : 'check', e, true);\n if (this.autoCheck) {\n this.ensureChildCheckState(li);\n this.ensureParentCheckState(closest(closest(li, '.' + PARENTITEM), '.' + LISTITEM));\n var doCheck = void 0;\n if (eventArgs.action === 'check') {\n doCheck = true;\n }\n else if (eventArgs.action === 'uncheck') {\n doCheck = false;\n }\n this.ensureStateChange(li, doCheck);\n }\n this.nodeCheckedEvent(checkWrap, isCheck, e);\n };\n /**\n * Update checkedNodes when UI interaction happens before the child node renders in DOM\n */\n TreeView.prototype.ensureStateChange = function (li, doCheck) {\n var childElement = select('.' + PARENTITEM, li);\n var parentIndex = li.getAttribute('data-uid');\n var mapper = this.fields;\n if (this.dataType === 1 && this.autoCheck) {\n var resultData = new DataManager(this.treeData).executeLocal(new Query().where(mapper.parentID, 'equal', parentIndex, true));\n for (var i = 0; i < resultData.length; i++) {\n var resultId = resultData[i][this.fields.id] ? resultData[i][this.fields.id].toString() : null;\n var isCheck = resultData[i][this.fields.isChecked] ? resultData[i][this.fields.isChecked].toString() : null;\n if (this.checkedNodes.indexOf(parentIndex) !== -1 && this.checkedNodes.indexOf(resultId) === -1) {\n this.checkedNodes.push(resultId);\n var childItems = this.getChildNodes(this.treeData, resultId);\n this.getChildItems(childItems, doCheck);\n if (this.parentNodeCheck.indexOf(resultId) !== -1) {\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(resultId), 1);\n }\n }\n else if (this.checkedNodes.indexOf(parentIndex) === -1 && childElement === null &&\n this.checkedNodes.indexOf(resultId) !== -1) {\n this.checkedNodes.splice(this.checkedNodes.indexOf(resultId), 1);\n if (isCheck === 'true') {\n this.updateField(this.treeData, this.fields, resultId, 'isChecked', null);\n }\n if (this.checkedNodes.indexOf(parentIndex) === -1 && childElement === null ||\n this.parentNodeCheck.indexOf(resultId) !== -1) {\n var childNodes = this.getChildNodes(this.treeData, resultId);\n this.getChildItems(childNodes, doCheck);\n if (this.parentNodeCheck.indexOf(resultId) !== -1) {\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(resultId), 1);\n }\n }\n }\n else {\n var childItems = this.getChildNodes(this.treeData, resultId);\n this.getChildItems(childItems, doCheck);\n }\n }\n }\n else if (this.dataType === 1 && !this.autoCheck) {\n if (!doCheck) {\n var checkedData = new DataManager(this.treeData).executeLocal(new Query().where(mapper.isChecked, 'equal', true, false));\n for (var i = 0; i < checkedData.length; i++) {\n var id = checkedData[i][this.fields.id] ? checkedData[i][this.fields.id].toString() : null;\n if (this.checkedNodes.indexOf(id) !== -1) {\n this.checkedNodes.splice(this.checkedNodes.indexOf(id), 1);\n }\n this.updateField(this.treeData, this.fields, id, 'isChecked', null);\n }\n this.checkedNodes = [];\n }\n else {\n for (var i = 0; i < this.treeData.length; i++) {\n var checkedId = this.treeData[i][this.fields.id] ? this.treeData[i][this.fields.id].toString() : null;\n if (this.checkedNodes.indexOf(checkedId) === -1) {\n this.checkedNodes.push(checkedId);\n }\n }\n }\n }\n else {\n var childItems = this.getChildNodes(this.treeData, parentIndex);\n if (childItems) {\n this.childStateChange(childItems, parentIndex, childElement, doCheck);\n }\n }\n };\n TreeView.prototype.getChildItems = function (childItems, doCheck) {\n for (var i = 0; i < childItems.length; i++) {\n var childId = childItems[i][this.fields.id] ? childItems[i][this.fields.id].toString() : null;\n var childIsCheck = childItems[i][this.fields.isChecked] ? childItems[i][this.fields.isChecked].toString() :\n null;\n if (this.checkedNodes.indexOf(childId) !== -1 && !doCheck) {\n this.checkedNodes.splice(this.checkedNodes.indexOf(childId), 1);\n }\n if (this.checkedNodes.indexOf(childId) === -1 && doCheck) {\n this.checkedNodes.push(childId);\n }\n if (childIsCheck === 'true' && !doCheck) {\n this.updateField(this.treeData, this.fields, childId, 'isChecked', null);\n }\n var subChildItems = this.getChildNodes(this.treeData, childId);\n if (subChildItems.length > 0) {\n this.getChildItems(subChildItems, doCheck);\n }\n }\n };\n /**\n * Update checkedNodes when UI interaction happens before the child node renders in DOM for hierarchical DS\n */\n TreeView.prototype.childStateChange = function (childItems, parent, childElement, doCheck) {\n for (var i = 0; i < childItems.length; i++) {\n var checkedChild = childItems[i][this.fields.id] ? childItems[i][this.fields.id].toString() : '';\n var isCheck = childItems[i][this.fields.isChecked] ? childItems[i][this.fields.isChecked].toString() : null;\n if (this.autoCheck) {\n if (this.checkedNodes.indexOf(parent) !== -1 && this.checkedNodes.indexOf(checkedChild) === -1) {\n this.checkedNodes.push(checkedChild);\n if (this.parentNodeCheck.indexOf(checkedChild) !== -1) {\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(checkedChild), 1);\n }\n }\n else if (this.checkedNodes.indexOf(parent) === -1 && this.checkedNodes.indexOf(checkedChild) !== -1 && !doCheck) {\n this.checkedNodes.splice(this.checkedNodes.indexOf(checkedChild), 1);\n if (isCheck === 'true') {\n this.updateField(this.treeData, this.fields, checkedChild, 'isChecked', null);\n }\n }\n }\n else if (!this.autoCheck) {\n if (!doCheck) {\n if (this.checkedNodes.indexOf(checkedChild) !== -1) {\n this.checkedNodes.splice(this.checkedNodes.indexOf(checkedChild), 1);\n }\n this.updateField(this.treeData, this.fields, checkedChild, 'isChecked', null);\n this.checkedNodes = [];\n }\n else {\n if (this.checkedNodes.indexOf(checkedChild) === -1) {\n this.checkedNodes.push(checkedChild);\n }\n }\n }\n var subChild = this.getChildNodes([childItems[i]], checkedChild);\n if (subChild) {\n this.childStateChange(subChild, parent, childElement, doCheck);\n }\n }\n };\n //This method can be used to get all child nodes of a parent by passing the children of a parent along with 'validateCheck' set to false\n TreeView.prototype.allCheckNode = function (child, newCheck, checked, childCheck, validateCheck) {\n if (child) {\n for (var length_1 = 0; length_1 < child.length; length_1++) {\n var childId = getValue(this.fields.id, child[length_1]);\n var check = this.element.querySelector('[data-uid=\"' + childId + '\"]');\n //Validates isChecked case while no UI interaction has been performed on the node or it's parent\n if (validateCheck !== false && this.checkedElement.indexOf(childId.toString()) === -1) {\n if (((check === null && !isNOU(child[length_1][this.fields.isChecked]) && newCheck.indexOf(childId.toString()) === -1)\n || childCheck === 0 || checked === 2)) {\n (child[length_1][this.fields.isChecked] !== false || checked === 2) ? newCheck.push(childId.toString())\n : childCheck = null;\n childCheck = (child[length_1][this.fields.isChecked] !== false || checked === 2) ? 0 : null;\n }\n }\n //Pushes child checked node done thro' UI interaction\n if (newCheck.indexOf(childId.toString()) === -1 && isNOU(checked)) {\n newCheck.push(childId.toString());\n }\n //Gets if any next level children are available for child nodes\n if (getValue(this.fields.hasChildren, child[length_1]) === true ||\n getValue(this.fields.child.toString(), child[length_1])) {\n var id = getValue(this.fields.id, child[length_1]);\n var childId_1 = this.getChildNodes(this.treeData, id.toString());\n if (childId_1) {\n (isNOU(validateCheck)) ? this.allCheckNode(childId_1, newCheck, checked, childCheck) :\n this.allCheckNode(childId_1, newCheck, checked, childCheck, validateCheck);\n childCheck = null;\n }\n }\n childCheck = null;\n }\n }\n };\n TreeView.prototype.openNode = function (toBeOpened, e) {\n var focusedNode = this.getFocusedNode();\n var icon = select('div.' + ICON, focusedNode);\n if (toBeOpened) {\n if (!icon) {\n return;\n }\n else if (icon.classList.contains(EXPANDABLE)) {\n this.expandAction(focusedNode, icon, e);\n }\n else {\n this.focusNextNode(focusedNode, true);\n }\n }\n else {\n if (icon && icon.classList.contains(COLLAPSIBLE)) {\n this.collapseNode(focusedNode, icon, e);\n }\n else {\n var parentLi = closest(closest(focusedNode, '.' + PARENTITEM), '.' + LISTITEM);\n if (!parentLi) {\n return;\n }\n else {\n if (!parentLi.classList.contains('e-disable')) {\n this.setFocus(focusedNode, parentLi);\n this.navigateToFocus(true);\n }\n }\n }\n }\n };\n TreeView.prototype.navigateNode = function (isTowards) {\n var focusedNode = this.getFocusedNode();\n this.focusNextNode(focusedNode, isTowards);\n };\n TreeView.prototype.navigateRootNode = function (isBackwards) {\n var focusedNode = this.getFocusedNode();\n var rootNode = isBackwards ? this.getRootNode() : this.getEndNode();\n if (!rootNode.classList.contains('e-disable')) {\n this.setFocus(focusedNode, rootNode);\n this.navigateToFocus(isBackwards);\n }\n };\n TreeView.prototype.getFocusedNode = function () {\n var selectedItem;\n var fNode = select('.' + LISTITEM + '.' + FOCUS, this.element);\n if (isNOU(fNode)) {\n selectedItem = select('.' + LISTITEM, this.element);\n }\n return isNOU(fNode) ? (isNOU(selectedItem) ? this.element.firstElementChild : selectedItem) : fNode;\n };\n TreeView.prototype.focusNextNode = function (li, isTowards) {\n var nextNode = isTowards ? this.getNextNode(li) : this.getPrevNode(li);\n this.setFocus(li, nextNode);\n this.navigateToFocus(!isTowards);\n if (nextNode.classList.contains('e-disable')) {\n var lastChild = nextNode.lastChild;\n if (nextNode.previousSibling == null && nextNode.classList.contains('e-level-1')) {\n this.focusNextNode(nextNode, true);\n }\n else if (nextNode.nextSibling == null && nextNode.classList.contains('e-node-collapsed')) {\n this.focusNextNode(nextNode, false);\n }\n else if (nextNode.nextSibling == null && lastChild.classList.contains(TEXTWRAP)) {\n this.focusNextNode(nextNode, false);\n }\n else {\n this.focusNextNode(nextNode, isTowards);\n }\n }\n };\n TreeView.prototype.getNextNode = function (li) {\n var index = this.liList.indexOf(li);\n var nextNode;\n do {\n index++;\n nextNode = this.liList[index];\n if (isNOU(nextNode)) {\n return li;\n }\n } while (!isVisible(nextNode));\n return nextNode;\n };\n TreeView.prototype.getPrevNode = function (li) {\n var index = this.liList.indexOf(li);\n var prevNode;\n do {\n index--;\n prevNode = this.liList[index];\n if (isNOU(prevNode)) {\n return li;\n }\n } while (!isVisible(prevNode));\n return prevNode;\n };\n TreeView.prototype.getRootNode = function () {\n var index = 0;\n var rootNode;\n do {\n rootNode = this.liList[index];\n index++;\n } while (!isVisible(rootNode));\n return rootNode;\n };\n TreeView.prototype.getEndNode = function () {\n var index = this.liList.length - 1;\n var endNode;\n do {\n endNode = this.liList[index];\n index--;\n } while (!isVisible(endNode));\n return endNode;\n };\n TreeView.prototype.setFocus = function (preNode, nextNode) {\n removeClass([preNode], [HOVER, FOCUS]);\n if (!nextNode.classList.contains('e-disable')) {\n addClass([nextNode], [HOVER, FOCUS]);\n this.updateIdAttr(preNode, nextNode);\n }\n };\n TreeView.prototype.updateIdAttr = function (preNode, nextNode) {\n this.element.removeAttribute('aria-activedescendant');\n if (preNode) {\n preNode.removeAttribute('id');\n }\n nextNode.setAttribute('id', this.element.id + '_active');\n this.element.setAttribute('aria-activedescendant', this.element.id + '_active');\n };\n TreeView.prototype.focusIn = function () {\n if (!this.mouseDownStatus) {\n addClass([this.getFocusedNode()], HOVER);\n }\n this.mouseDownStatus = false;\n };\n TreeView.prototype.focusOut = function () {\n removeClass([this.getFocusedNode()], HOVER);\n };\n TreeView.prototype.onMouseOver = function (e) {\n var target = e.target;\n var classList = target.classList;\n var currentLi = closest(target, '.' + LISTITEM);\n if (!currentLi || classList.contains(PARENTITEM) || classList.contains(LISTITEM)) {\n this.removeHover();\n return;\n }\n else {\n if (currentLi && !currentLi.classList.contains('e-disable')) {\n this.setHover(currentLi);\n }\n }\n };\n TreeView.prototype.setHover = function (li) {\n if (!li.classList.contains(HOVER)) {\n this.removeHover();\n addClass([li], HOVER);\n }\n };\n ;\n TreeView.prototype.onMouseLeave = function (e) {\n this.removeHover();\n };\n TreeView.prototype.removeHover = function () {\n var hoveredNode = selectAll('.' + HOVER, this.element);\n if (hoveredNode && hoveredNode.length) {\n removeClass(hoveredNode, HOVER);\n }\n };\n ;\n TreeView.prototype.getNodeData = function (currLi, fromDS) {\n if (!isNOU(currLi) && currLi.classList.contains(LISTITEM) &&\n !isNOU(closest(currLi, '.' + CONTROL)) && closest(currLi, '.' + CONTROL).classList.contains(ROOT)) {\n var id = currLi.getAttribute('data-uid');\n var text = this.getText(currLi, fromDS);\n var pNode = closest(currLi.parentNode, '.' + LISTITEM);\n var pid = pNode ? pNode.getAttribute('data-uid') : null;\n var selected = currLi.classList.contains(ACTIVE);\n var expanded = (currLi.getAttribute('aria-expanded') === 'true') ? true : false;\n var hasChildren = currLi.getAttribute('aria-expanded') !== null ? true : (select('.' + EXPANDABLE, currLi) || select('.' + COLLAPSIBLE, currLi)) != null ? true : false;\n var checked = null;\n if (this.showCheckBox) {\n checked = select('.' + CHECKBOXWRAP, currLi).getAttribute('aria-checked');\n }\n return {\n id: id, text: text, parentID: pid, selected: selected, expanded: expanded,\n isChecked: checked, hasChildren: hasChildren\n };\n }\n return { id: '', text: '', parentID: '', selected: false, expanded: false, isChecked: '', hasChildren: false };\n };\n TreeView.prototype.getText = function (currLi, fromDS) {\n if (fromDS) {\n var nodeData = this.getNodeObject(currLi.getAttribute('data-uid'));\n var level = parseFloat(currLi.getAttribute('aria-level'));\n var nodeFields = this.getFields(this.fields, level, 1);\n return getValue(nodeFields.text, nodeData);\n }\n return select('.' + LISTTEXT, currLi).textContent;\n };\n TreeView.prototype.getExpandEvent = function (currLi, e) {\n var nodeData = this.getNodeData(currLi);\n return { cancel: false, isInteracted: isNOU(e) ? false : true, node: currLi, nodeData: nodeData, event: e };\n };\n TreeView.prototype.renderNodeTemplate = function (data, textEle, dataId) {\n var tempArr = this.nodeTemplateFn(data, this, 'nodeTemplate' + dataId, this.element.id + 'nodeTemplate', this.isStringTemplate, undefined, textEle);\n if (tempArr) {\n tempArr = Array.prototype.slice.call(tempArr);\n append(tempArr, textEle);\n }\n };\n TreeView.prototype.destroyTemplate = function (liEle) {\n this.clearTemplate(['nodeTemplate' + liEle.getAttribute('data-uid')]);\n };\n TreeView.prototype.reRenderNodes = function () {\n this.updateListProp(this.fields);\n if (Browser.isIE) {\n this.ulElement = this.element.querySelector('.e-list-parent.e-ul');\n this.ulElement.parentElement.removeChild(this.ulElement);\n }\n else {\n this.element.innerHTML = '';\n }\n if (!isNOU(this.nodeTemplateFn)) {\n this.clearTemplate();\n }\n this.setTouchClass();\n this.setProperties({ selectedNodes: [], checkedNodes: [], expandedNodes: [] }, true);\n this.checkedElement = [];\n this.isLoaded = false;\n this.setDataBinding(true);\n };\n TreeView.prototype.setCssClass = function (oldClass, newClass) {\n if (!isNOU(oldClass) && oldClass !== '') {\n removeClass([this.element], oldClass.split(' '));\n }\n if (!isNOU(newClass) && newClass !== '') {\n addClass([this.element], newClass.split(' '));\n }\n };\n TreeView.prototype.editingHandler = function (e) {\n var target = e.target;\n if (!target || target.classList.contains(ROOT) || target.classList.contains(PARENTITEM) ||\n target.classList.contains(LISTITEM) || target.classList.contains(ICON) ||\n target.classList.contains(INPUT) || target.classList.contains(INPUTGROUP)) {\n return;\n }\n else {\n var liEle = closest(target, '.' + LISTITEM);\n this.createTextbox(liEle, e);\n }\n };\n TreeView.prototype.createTextbox = function (liEle, e) {\n var _this = this;\n var oldInpEle = select('.' + TREEINPUT, this.element);\n if (oldInpEle) {\n oldInpEle.blur();\n }\n var textEle = select('.' + LISTTEXT, liEle);\n this.updateOldText(liEle);\n var innerEle = this.createElement('input', { className: TREEINPUT, attrs: { value: this.oldText } });\n var eventArgs = this.getEditEvent(liEle, null, innerEle.outerHTML);\n this.trigger('nodeEditing', eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n var inpWidth = textEle.offsetWidth + 5;\n var style = 'width:' + inpWidth + 'px';\n addClass([liEle], EDITING);\n if (!isNOU(_this.nodeTemplateFn)) {\n _this.destroyTemplate(liEle);\n }\n textEle.innerHTML = eventArgs.innerHtml;\n var inpEle = select('.' + TREEINPUT, textEle);\n _this.inputObj = Input.createInput({\n element: inpEle,\n properties: {\n enableRtl: _this.enableRtl,\n }\n }, _this.createElement);\n _this.inputObj.container.setAttribute('style', style);\n inpEle.focus();\n var inputEle = inpEle;\n inputEle.setSelectionRange(0, inputEle.value.length);\n _this.wireInputEvents(inpEle);\n }\n });\n };\n TreeView.prototype.updateOldText = function (liEle) {\n var id = liEle.getAttribute('data-uid');\n this.editData = this.getNodeObject(id);\n var level = parseFloat(liEle.getAttribute('aria-level'));\n this.editFields = this.getFields(this.fields, level, 1);\n this.oldText = getValue(this.editFields.text, this.editData);\n };\n TreeView.prototype.inputFocusOut = function (e) {\n if (!select('.' + TREEINPUT, this.element)) {\n return;\n }\n var target = e.target;\n var newText = target.value;\n var txtEle = closest(target, '.' + LISTTEXT);\n var liEle = closest(target, '.' + LISTITEM);\n detach(this.inputObj.container);\n if (this.fields.dataSource instanceof DataManager && !this.isOffline) {\n this.crudOperation('update', null, liEle, newText, null, null, true);\n }\n else {\n this.appendNewText(liEle, txtEle, newText, true);\n }\n };\n TreeView.prototype.appendNewText = function (liEle, txtEle, newText, isInput) {\n var _this = this;\n var eventArgs = this.getEditEvent(liEle, newText, null);\n this.trigger('nodeEdited', eventArgs, function (observedArgs) {\n newText = observedArgs.cancel ? observedArgs.oldText : observedArgs.newText;\n _this.updateText(liEle, txtEle, newText, isInput);\n if (observedArgs.oldText !== newText) {\n _this.triggerEvent();\n }\n });\n };\n TreeView.prototype.updateText = function (liEle, txtEle, newText, isInput) {\n var newData = setValue(this.editFields.text, newText, this.editData);\n if (!isNOU(this.nodeTemplateFn)) {\n txtEle.innerText = '';\n var dataId = liEle.getAttribute('data-uid');\n this.renderNodeTemplate(newData, txtEle, dataId);\n this.renderReactTemplates();\n }\n else {\n txtEle.innerText = newText;\n }\n if (isInput) {\n removeClass([liEle], EDITING);\n txtEle.focus();\n }\n };\n TreeView.prototype.getElement = function (ele) {\n if (isNOU(ele)) {\n return null;\n }\n else if (typeof ele === 'string') {\n return this.element.querySelector('[data-uid=\"' + ele + '\"]');\n }\n else if (typeof ele === 'object') {\n return getElement(ele);\n }\n else {\n return null;\n }\n };\n TreeView.prototype.getId = function (ele) {\n if (isNOU(ele)) {\n return null;\n }\n else if (typeof ele === 'string') {\n return ele;\n }\n else if (typeof ele === 'object') {\n return (getElement(ele)).getAttribute('data-uid');\n }\n else {\n return null;\n }\n };\n TreeView.prototype.getEditEvent = function (liEle, newText, inpEle) {\n var data = this.getNodeData(liEle);\n return { cancel: false, newText: newText, node: liEle, nodeData: data, oldText: this.oldText, innerHtml: inpEle };\n };\n TreeView.prototype.getNodeObject = function (id) {\n var childNodes;\n if (isNOU(id)) {\n return childNodes;\n }\n else if (this.dataType === 1) {\n for (var i = 0, objlen = this.treeData.length; i < objlen; i++) {\n var dataId = getValue(this.fields.id, this.treeData[i]);\n if (!isNOU(this.treeData[i]) && !isNOU(dataId) && dataId.toString() === id) {\n return this.treeData[i];\n }\n }\n }\n else {\n return this.getChildNodeObject(this.treeData, this.fields, id);\n }\n return childNodes;\n };\n TreeView.prototype.getChildNodeObject = function (obj, mapper, id) {\n var newList;\n if (isNOU(obj)) {\n return newList;\n }\n for (var i = 0, objlen = obj.length; i < objlen; i++) {\n var dataId = getValue(mapper.id, obj[i]);\n if (obj[i] && dataId && dataId.toString() === id) {\n return obj[i];\n }\n else if (typeof mapper.child === 'string' && !isNOU(getValue(mapper.child, obj[i]))) {\n var childData = getValue(mapper.child, obj[i]);\n newList = this.getChildNodeObject(childData, this.getChildMapper(mapper), id);\n if (newList !== undefined) {\n break;\n }\n }\n else if (this.fields.dataSource instanceof DataManager && !isNOU(getValue('child', obj[i]))) {\n var child = 'child';\n newList = this.getChildNodeObject(getValue(child, obj[i]), this.getChildMapper(mapper), id);\n if (newList !== undefined) {\n break;\n }\n }\n }\n return newList;\n };\n TreeView.prototype.setDragAndDrop = function (toBind) {\n if (toBind && !this.disabled) {\n this.initializeDrag();\n }\n else {\n this.destroyDrag();\n }\n };\n TreeView.prototype.initializeDrag = function () {\n var _this = this;\n var virtualEle;\n var proxy = this;\n this.dragObj = new Draggable(this.element, {\n enableTailMode: true, enableAutoScroll: true,\n dragArea: this.dragArea,\n dragTarget: '.' + TEXTWRAP,\n helper: function (e) {\n _this.dragTarget = e.sender.target;\n var dragRoot = closest(_this.dragTarget, '.' + ROOT);\n var dragWrap = closest(_this.dragTarget, '.' + TEXTWRAP);\n _this.dragLi = closest(_this.dragTarget, '.' + LISTITEM);\n if (_this.fullRowSelect && !dragWrap && _this.dragTarget.classList.contains(FULLROW)) {\n dragWrap = _this.dragTarget.nextElementSibling;\n }\n if (!_this.dragTarget || !e.element.isSameNode(dragRoot) || !dragWrap ||\n _this.dragTarget.classList.contains(ROOT) || _this.dragTarget.classList.contains(PARENTITEM) ||\n _this.dragTarget.classList.contains(LISTITEM) || _this.dragLi.classList.contains('e-disable')) {\n return false;\n }\n var cloneEle = (dragWrap.cloneNode(true));\n if (isNOU(select('div.' + ICON, cloneEle))) {\n var icon = proxy.createElement('div', { className: ICON + ' ' + EXPANDABLE });\n cloneEle.insertBefore(icon, cloneEle.children[0]);\n }\n var cssClass = DRAGITEM + ' ' + ROOT + ' ' + _this.cssClass + ' ' + (_this.enableRtl ? RTL : '');\n virtualEle = proxy.createElement('div', { className: cssClass });\n virtualEle.appendChild(cloneEle);\n var nLen = _this.selectedNodes.length;\n if (nLen > 1 && _this.allowMultiSelection && _this.dragLi.classList.contains(ACTIVE)) {\n var cNode = proxy.createElement('span', { className: DROPCOUNT, innerHTML: '' + nLen });\n virtualEle.appendChild(cNode);\n }\n document.body.appendChild(virtualEle);\n document.body.style.cursor = '';\n _this.dragData = _this.getNodeData(_this.dragLi);\n return virtualEle;\n },\n dragStart: function (e) {\n addClass([_this.element], DRAGGING);\n var listItem = closest(e.target, '.e-list-item');\n var level;\n if (listItem) {\n level = parseInt(listItem.getAttribute('aria-level'), 10);\n }\n var eventArgs = _this.getDragEvent(e.event, _this, null, e.target, null, virtualEle, level);\n if (eventArgs.draggedNode.classList.contains(EDITING)) {\n _this.dragObj.intDestroy(e.event);\n _this.dragCancelAction(virtualEle);\n }\n else {\n _this.trigger('nodeDragStart', eventArgs, function (observedArgs) {\n if (observedArgs.cancel) {\n _this.dragObj.intDestroy(e.event);\n _this.dragCancelAction(virtualEle);\n }\n else {\n _this.dragStartAction = true;\n }\n });\n }\n },\n drag: function (e) {\n _this.dragObj.setProperties({ cursorAt: { top: (!isNOU(e.event.targetTouches) || Browser.isDevice) ? 60 : -20 } });\n _this.dragAction(e, virtualEle);\n },\n dragStop: function (e) {\n removeClass([_this.element], DRAGGING);\n _this.removeVirtualEle();\n var dropTarget = e.target;\n var preventTargetExpand = false;\n var dropRoot = (closest(dropTarget, '.' + DROPPABLE));\n var isHelperElement = true;\n if (!dropTarget || !dropRoot) {\n detach(e.helper);\n document.body.style.cursor = '';\n isHelperElement = false;\n }\n var listItem = closest(dropTarget, '.e-list-item');\n var level;\n if (listItem) {\n level = parseInt(listItem.getAttribute('aria-level'), 10);\n }\n var eventArgs = _this.getDragEvent(e.event, _this, dropTarget, dropTarget, null, e.helper, level);\n eventArgs.preventTargetExpand = preventTargetExpand;\n _this.trigger('nodeDragStop', eventArgs, function (observedArgs) {\n _this.dragParent = observedArgs.draggedParentNode;\n _this.preventExpand = observedArgs.preventTargetExpand;\n if (observedArgs.cancel) {\n if (e.helper.parentNode) {\n detach(e.helper);\n }\n document.body.style.cursor = '';\n isHelperElement = false;\n }\n _this.dragStartAction = false;\n });\n }\n });\n this.dropObj = new Droppable(this.element, {\n out: function (e) {\n if (!isNOU(e) && !e.target.classList.contains(SIBLING)) {\n document.body.style.cursor = 'not-allowed';\n }\n },\n over: function (e) {\n document.body.style.cursor = '';\n },\n drop: function (e) {\n _this.dropAction(e);\n }\n });\n };\n TreeView.prototype.dragCancelAction = function (virtualEle) {\n detach(virtualEle);\n removeClass([this.element], DRAGGING);\n this.dragStartAction = false;\n };\n TreeView.prototype.dragAction = function (e, virtualEle) {\n var dropRoot = closest(e.target, '.' + DROPPABLE);\n var dropWrap = closest(e.target, '.' + TEXTWRAP);\n var icon = select('div.' + ICON, virtualEle);\n removeClass([icon], [DROPIN, DROPNEXT, DROPOUT, NODROP]);\n this.removeVirtualEle();\n document.body.style.cursor = '';\n var classList = e.target.classList;\n if (this.fullRowSelect && !dropWrap && !isNOU(classList) && classList.contains(FULLROW)) {\n dropWrap = e.target.nextElementSibling;\n }\n if (dropRoot) {\n var dropLi = closest(e.target, '.' + LISTITEM);\n var checkWrapper = closest(e.target, '.' + CHECKBOXWRAP);\n var collapse = closest(e.target, '.' + COLLAPSIBLE);\n var expand = closest(e.target, '.' + EXPANDABLE);\n if (!dropRoot.classList.contains(ROOT) || (dropWrap &&\n (!dropLi.isSameNode(this.dragLi) && !this.isDescendant(this.dragLi, dropLi)))) {\n if (this.hasTemplate && dropLi) {\n var templateTarget = select(this.fullRowSelect ? '.' + FULLROW : '.' + TEXTWRAP, dropLi);\n if ((e && (!expand && !collapse) && e.event.offsetY < 7 && !checkWrapper) || (((expand && e.event.offsetY < 5) || (collapse && e.event.offsetX < 3)))) {\n var index = this.fullRowSelect ? (1) : (0);\n this.appendIndicator(dropLi, icon, index);\n }\n else if ((e && (!expand && !collapse) && !checkWrapper && templateTarget && e.event.offsetY > templateTarget.offsetHeight - 10) || ((expand && e.event.offsetY > 19) || (collapse && e.event.offsetX > 19))) {\n var index = this.fullRowSelect ? (2) : (1);\n this.appendIndicator(dropLi, icon, index);\n }\n else {\n addClass([icon], DROPIN);\n }\n }\n else {\n if ((dropLi && e && (!expand && !collapse) && (e.event.offsetY < 7) && !checkWrapper) || (((expand && e.event.offsetY < 5) || (collapse && e.event.offsetX < 3)))) {\n var index = this.fullRowSelect ? (1) : (0);\n this.appendIndicator(dropLi, icon, index);\n }\n else if ((dropLi && e && (!expand && !collapse) && (e.target.offsetHeight > 0 && e.event.offsetY > (e.target.offsetHeight - 10)) && !checkWrapper) || (((expand && e.event.offsetY > 19) || (collapse && e.event.offsetX > 19)))) {\n var index = this.fullRowSelect ? (2) : (1);\n this.appendIndicator(dropLi, icon, index);\n }\n else {\n addClass([icon], DROPIN);\n }\n }\n }\n else if (e.target.nodeName === 'LI' && (!dropLi.isSameNode(this.dragLi) && !this.isDescendant(this.dragLi, dropLi))) {\n addClass([icon], DROPNEXT);\n this.renderVirtualEle(e);\n }\n else if (e.target.classList.contains(SIBLING)) {\n addClass([icon], DROPNEXT);\n }\n else {\n addClass([icon], DROPOUT);\n }\n }\n else {\n addClass([icon], NODROP);\n document.body.style.cursor = 'not-allowed';\n }\n var listItem = closest(e.target, '.e-list-item');\n var level;\n if (listItem) {\n level = parseInt(listItem.getAttribute('aria-level'), 10);\n }\n var eventArgs = this.getDragEvent(e.event, this, e.target, e.target, null, virtualEle, level);\n if (eventArgs.dropIndicator) {\n removeClass([icon], eventArgs.dropIndicator);\n }\n this.trigger('nodeDragging', eventArgs);\n if (eventArgs.dropIndicator) {\n addClass([icon], eventArgs.dropIndicator);\n }\n };\n TreeView.prototype.appendIndicator = function (dropLi, icon, index) {\n addClass([icon], DROPNEXT);\n var virEle = this.createElement('div', { className: SIBLING });\n dropLi.insertBefore(virEle, dropLi.children[index]);\n };\n /* eslint-disable */\n TreeView.prototype.dropAction = function (e) {\n var offsetY = e.event.offsetY;\n var dropTarget = e.target;\n var dragObj;\n var level;\n var drop = false;\n var dragInstance;\n dragInstance = e.dragData.draggable;\n for (var i = 0; i < dragInstance.ej2_instances.length; i++) {\n if (dragInstance.ej2_instances[i] instanceof TreeView_1) {\n dragObj = dragInstance.ej2_instances[i];\n break;\n }\n }\n if (dragObj && dragObj.dragTarget) {\n var dragTarget = dragObj.dragTarget;\n var dragLi = (closest(dragTarget, '.' + LISTITEM));\n var dropLi = (closest(dropTarget, '.' + LISTITEM));\n if (dropLi == null && dropTarget.classList.contains(ROOT)) {\n dropLi = dropTarget.firstElementChild;\n }\n detach(e.droppedElement);\n document.body.style.cursor = '';\n if (!dropLi || dropLi.isSameNode(dragLi) || this.isDescendant(dragLi, dropLi)) {\n if (this.fields.dataSource instanceof DataManager === false) {\n this.preventExpand = false;\n }\n return;\n }\n if (dragObj.allowMultiSelection && dragLi.classList.contains(ACTIVE)) {\n var sNodes = selectAll('.' + ACTIVE, dragObj.element);\n if (e.target.offsetHeight <= 33 && offsetY > e.target.offsetHeight - 10 && offsetY > 6) {\n for (var i = sNodes.length - 1; i >= 0; i--) {\n if (dropLi.isSameNode(sNodes[i]) || this.isDescendant(sNodes[i], dropLi)) {\n continue;\n }\n this.appendNode(dropTarget, sNodes[i], dropLi, e, dragObj, offsetY);\n }\n }\n else {\n for (var i = 0; i < sNodes.length; i++) {\n if (dropLi.isSameNode(sNodes[i]) || this.isDescendant(sNodes[i], dropLi)) {\n continue;\n }\n this.appendNode(dropTarget, sNodes[i], dropLi, e, dragObj, offsetY);\n }\n }\n }\n else {\n this.appendNode(dropTarget, dragLi, dropLi, e, dragObj, offsetY);\n }\n level = parseInt(dragLi.getAttribute('aria-level'), 10);\n drop = true;\n }\n if (this.fields.dataSource instanceof DataManager === false) {\n this.preventExpand = false;\n }\n this.trigger('nodeDropped', this.getDragEvent(e.event, dragObj, dropTarget, e.target, e.dragData.draggedElement, null, level, drop));\n if (dragObj.element.id !== this.element.id) {\n dragObj.triggerEvent();\n }\n this.triggerEvent();\n };\n TreeView.prototype.appendNode = function (dropTarget, dragLi, dropLi, e, dragObj, offsetY) {\n var checkWrapper = closest(dropTarget, '.' + CHECKBOXWRAP);\n var collapse = closest(e.target, '.' + COLLAPSIBLE);\n var expand = closest(e.target, '.' + EXPANDABLE);\n if (!dragLi.classList.contains('e-disable') && !checkWrapper && ((expand && e.event.offsetY < 5) || (collapse && e.event.offsetX < 3) || (expand && e.event.offsetY > 19) || (collapse && e.event.offsetX > 19) || (!expand && !collapse))) {\n if (dropTarget.nodeName === 'LI') {\n this.dropAsSiblingNode(dragLi, dropLi, e, dragObj);\n }\n else if (dropTarget.firstElementChild && dropTarget.classList.contains(ROOT)) {\n if (dropTarget.firstElementChild.nodeName === 'UL') {\n this.dropAsSiblingNode(dragLi, dropLi, e, dragObj);\n }\n }\n else if ((dropTarget.classList.contains('e-icon-collapsible')) || (dropTarget.classList.contains('e-icon-expandable'))) {\n this.dropAsSiblingNode(dragLi, dropLi, e, dragObj);\n }\n else {\n this.dropAsChildNode(dragLi, dropLi, dragObj, null, e, offsetY);\n }\n }\n else {\n this.dropAsChildNode(dragLi, dropLi, dragObj, null, e, offsetY, true);\n }\n };\n TreeView.prototype.dropAsSiblingNode = function (dragLi, dropLi, e, dragObj) {\n var dropUl = closest(dropLi, '.' + PARENTITEM);\n var dragParentUl = closest(dragLi, '.' + PARENTITEM);\n var dragParentLi = closest(dragParentUl, '.' + LISTITEM);\n var pre;\n if (e.target.offsetHeight > 0 && e.event.offsetY > e.target.offsetHeight - 2) {\n pre = false;\n }\n else if (e.event.offsetY < 2) {\n pre = true;\n }\n else if (e.target.classList.contains('e-icon-expandable') || (e.target.classList.contains('e-icon-collapsible'))) {\n if ((e.event.offsetY < 5) || (e.event.offsetX < 3)) {\n pre = true;\n }\n else if ((e.event.offsetY > 15) || (e.event.offsetX > 17)) {\n pre = false;\n }\n }\n if ((e.target.classList.contains('e-icon-expandable')) || (e.target.classList.contains('e-icon-collapsible'))) {\n var target = e.target.closest('li');\n dropUl.insertBefore(dragLi, pre ? target : target.nextElementSibling);\n }\n else {\n dropUl.insertBefore(dragLi, pre ? e.target : e.target.nextElementSibling);\n }\n this.moveData(dragLi, dropLi, dropUl, pre, dragObj);\n this.updateElement(dragParentUl, dragParentLi);\n this.updateAriaLevel(dragLi);\n if (dragObj.element.id === this.element.id) {\n this.updateList();\n }\n else {\n dragObj.updateInstance();\n this.updateInstance();\n }\n };\n TreeView.prototype.dropAsChildNode = function (dragLi, dropLi, dragObj, index, e, pos, isCheck) {\n var dragParentUl = closest(dragLi, '.' + PARENTITEM);\n var dragParentLi = closest(dragParentUl, '.' + LISTITEM);\n var dropParentUl = closest(dropLi, '.' + PARENTITEM);\n var templateTarget;\n if (e && e.target) {\n templateTarget = select(this.fullRowSelect ? '.' + FULLROW : '.' + TEXTWRAP, dropLi);\n }\n if (e && (pos < 7) && !isCheck) {\n dropParentUl.insertBefore(dragLi, dropLi);\n this.moveData(dragLi, dropLi, dropParentUl, true, dragObj);\n }\n else if (e && (e.target.offsetHeight > 0 && pos > (e.target.offsetHeight - 10)) && !isCheck && !this.hasTemplate) {\n dropParentUl.insertBefore(dragLi, dropLi.nextElementSibling);\n this.moveData(dragLi, dropLi, dropParentUl, false, dragObj);\n }\n else if (this.hasTemplate && templateTarget && pos > templateTarget.offsetHeight - 10 && !isCheck) {\n dropParentUl.insertBefore(dragLi, dropLi.nextElementSibling);\n this.moveData(dragLi, dropLi, dropParentUl, false, dragObj);\n }\n else {\n var dropUl = this.expandParent(dropLi);\n var childLi = dropUl.childNodes[index];\n dropUl.insertBefore(dragLi, childLi);\n this.moveData(dragLi, childLi, dropUl, true, dragObj);\n }\n this.updateElement(dragParentUl, dragParentLi);\n this.updateAriaLevel(dragLi);\n if (dragObj.element.id === this.element.id) {\n this.updateList();\n }\n else {\n dragObj.updateInstance();\n this.updateInstance();\n }\n };\n TreeView.prototype.moveData = function (dragLi, dropLi, dropUl, pre, dragObj) {\n var dropParentLi = closest(dropUl, '.' + LISTITEM);\n var id = this.getId(dragLi);\n var removedData = dragObj.updateChildField(dragObj.treeData, dragObj.fields, id, null, null, true);\n var refId = this.getId(dropLi);\n var index = this.getDataPos(this.treeData, this.fields, refId);\n var parentId = this.getId(dropParentLi);\n if (this.dataType === 1) {\n this.updateField(this.treeData, this.fields, parentId, 'hasChildren', true);\n var pos = isNOU(index) ? this.treeData.length : (pre ? index : index + 1);\n if (isNOU(parentId) && !this.hasPid) {\n delete removedData[0][this.fields.parentID];\n }\n else {\n var currPid = this.isNumberTypeId ? parseFloat(parentId) : parentId;\n setValue(this.fields.parentID, currPid, removedData[0]);\n }\n this.treeData.splice(pos, 0, removedData[0]);\n if (dragObj.element.id !== this.element.id) {\n var childData = dragObj.removeChildNodes(id);\n pos++;\n for (var i = 0, len = childData.length; i < len; i++) {\n this.treeData.splice(pos, 0, childData[i]);\n pos++;\n }\n dragObj.groupedData = dragObj.getGroupedData(dragObj.treeData, dragObj.fields.parentID);\n }\n this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);\n }\n else {\n this.addChildData(this.treeData, this.fields, parentId, removedData, pre ? index : index + 1);\n }\n };\n TreeView.prototype.expandParent = function (dropLi) {\n var dropIcon = select('div.' + ICON, dropLi);\n if (dropIcon && dropIcon.classList.contains(EXPANDABLE) && this.preventExpand !== true) {\n this.expandAction(dropLi, dropIcon, null);\n }\n var dropUl = select('.' + PARENTITEM, dropLi);\n if (this.preventExpand === true && !dropUl && dropIcon) {\n this.renderChildNodes(dropLi);\n }\n dropUl = select('.' + PARENTITEM, dropLi);\n if (!isNOU(dropUl) && this.preventExpand === true) {\n dropUl.style.display = 'none';\n }\n if (!isNOU(dropUl) && this.preventExpand === false) {\n dropUl.style.display = 'block';\n }\n if (isNOU(dropUl) && this.preventExpand === true) {\n if (isNOU(dropIcon)) {\n ListBase.generateIcon(this.createElement, dropLi, EXPANDABLE, this.listBaseOption);\n }\n var icon = select('div.' + ICON, dropLi);\n if (icon) {\n icon.classList.add('e-icon-expandable');\n }\n dropUl = ListBase.generateUL(this.createElement, [], null, this.listBaseOption);\n dropLi.appendChild(dropUl);\n if (icon) {\n removeClass([icon], COLLAPSIBLE);\n }\n else {\n ListBase.generateIcon(this.createElement, dropLi, EXPANDABLE, this.listBaseOption);\n }\n dropLi.setAttribute('aria-expanded', 'false');\n dropUl.style.display = 'none';\n }\n if (isNOU(dropUl)) {\n this.trigger('nodeExpanding', this.getExpandEvent(dropLi, null));\n if (isNOU(dropIcon)) {\n ListBase.generateIcon(this.createElement, dropLi, COLLAPSIBLE, this.listBaseOption);\n }\n var icon = select('div.' + ICON, dropLi);\n if (icon) {\n removeClass([icon], EXPANDABLE);\n }\n else {\n ListBase.generateIcon(this.createElement, dropLi, COLLAPSIBLE, this.listBaseOption);\n icon = select('div.' + ICON, dropLi);\n removeClass([icon], EXPANDABLE);\n }\n dropUl = ListBase.generateUL(this.createElement, [], null, this.listBaseOption);\n dropLi.appendChild(dropUl);\n this.addExpand(dropLi);\n this.trigger('nodeExpanded', this.getExpandEvent(dropLi, null));\n }\n return dropUl;\n };\n TreeView.prototype.updateElement = function (dragParentUl, dragParentLi) {\n if (dragParentLi && dragParentUl.childElementCount === 0) {\n var dragIcon = select('div.' + ICON, dragParentLi);\n detach(dragParentUl);\n detach(dragIcon);\n var parentId = this.getId(dragParentLi);\n this.updateField(this.treeData, this.fields, parentId, 'hasChildren', false);\n this.removeExpand(dragParentLi, true);\n }\n };\n TreeView.prototype.updateAriaLevel = function (dragLi) {\n var level = this.parents(dragLi, '.' + PARENTITEM).length;\n dragLi.setAttribute('aria-level', '' + level);\n this.updateChildAriaLevel(select('.' + PARENTITEM, dragLi), level + 1);\n };\n TreeView.prototype.updateChildAriaLevel = function (element, level) {\n if (!isNOU(element)) {\n var cNodes = element.childNodes;\n for (var i = 0, len = cNodes.length; i < len; i++) {\n var liEle = cNodes[i];\n liEle.setAttribute('aria-level', '' + level);\n this.updateChildAriaLevel(select('.' + PARENTITEM, liEle), level + 1);\n }\n }\n };\n TreeView.prototype.renderVirtualEle = function (e) {\n var pre;\n if (e.event.offsetY > e.target.offsetHeight - 2) {\n pre = false;\n }\n else if (e.event.offsetY < 2) {\n pre = true;\n }\n var virEle = this.createElement('div', { className: SIBLING });\n var index = this.fullRowSelect ? (pre ? 1 : 2) : (pre ? 0 : 1);\n e.target.insertBefore(virEle, e.target.children[index]);\n };\n TreeView.prototype.removeVirtualEle = function () {\n var sibEle = select('.' + SIBLING);\n if (sibEle) {\n detach(sibEle);\n }\n };\n TreeView.prototype.destroyDrag = function () {\n if (this.dragObj && this.dropObj) {\n this.dragObj.destroy();\n this.dropObj.destroy();\n }\n };\n TreeView.prototype.getDragEvent = function (event, obj, dropTarget, target, dragNode, cloneEle, level, drop) {\n var dropLi = dropTarget ? closest(dropTarget, '.' + LISTITEM) : null;\n var dropData = dropLi ? this.getNodeData(dropLi) : null;\n var draggedNode = obj ? obj.dragLi : dragNode;\n var draggedNodeData = obj ? obj.dragData : null;\n var newParent = dropTarget ? this.parents(dropTarget, '.' + LISTITEM) : null;\n var dragLiParent = obj.dragLi.parentElement;\n var dragParent = obj.dragLi ? closest(dragLiParent, '.' + LISTITEM) : null;\n var targetParent = null;\n var indexValue = null;\n var iconCss = [DROPNEXT, DROPIN, DROPOUT, NODROP];\n var iconClass = null;\n var node = (drop === true) ? draggedNode : dropLi;\n var index = node ? closest(node, '.e-list-parent') : null;\n var i = 0;\n var position = null;\n dragParent = (obj.dragLi && dragParent === null) ? closest(dragLiParent, '.' + ROOT) : dragParent;\n dragParent = (drop === true) ? this.dragParent : dragParent;\n if (cloneEle) {\n while (i < 4) {\n if (select('.' + ICON, cloneEle).classList.contains(iconCss[i])) {\n iconClass = iconCss[i];\n break;\n }\n i++;\n }\n }\n if (index) {\n var dropTar = 0;\n for (i = 0; i < index.childElementCount; i++) {\n dropTar = (drop !== true && index.children[i] === draggedNode && dropLi !== draggedNode) ? ++dropTar : dropTar;\n if ((drop !== true && index.children[i].classList.contains('e-hover'))) {\n indexValue = (event.offsetY >= 23) ? i + 1 : i;\n break;\n }\n else if (index.children[i] === node) {\n indexValue = (event.offsetY >= 23) ? i : i;\n break;\n }\n }\n indexValue = (dropTar !== 0) ? --indexValue : indexValue;\n position = (iconClass == \"e-drop-in\") ? \"Inside\" : ((event.offsetY < 7) ? \"Before\" : \"After\");\n }\n if (dropTarget) {\n if (newParent.length === 0) {\n targetParent = null;\n }\n else if (dropTarget.classList.contains(LISTITEM)) {\n targetParent = newParent[0];\n }\n else {\n targetParent = newParent[1];\n }\n }\n if (dropLi === draggedNode) {\n targetParent = dropLi;\n }\n if (dropTarget && target.offsetHeight <= 33 && event.offsetY < target.offsetHeight - 10 && event.offsetY > 6) {\n targetParent = dropLi;\n if (drop !== true) {\n level = ++level;\n var parent_2 = targetParent ? select('.e-list-parent', targetParent) : null;\n indexValue = (parent_2) ? parent_2.children.length : 0;\n if (!(this.fields.dataSource instanceof DataManager) && parent_2 === null && targetParent) {\n var parent_3 = targetParent.hasAttribute('data-uid') ?\n this.getChildNodes(this.fields.dataSource, targetParent.getAttribute('data-uid').toString()) : null;\n indexValue = (parent_3) ? parent_3.length : 0;\n }\n }\n }\n return {\n cancel: false,\n clonedNode: cloneEle,\n event: event,\n draggedNode: draggedNode,\n draggedNodeData: draggedNodeData,\n droppedNode: dropLi,\n droppedNodeData: dropData,\n dropIndex: indexValue,\n dropLevel: level,\n draggedParentNode: dragParent,\n dropTarget: targetParent,\n dropIndicator: iconClass,\n target: target,\n position: position,\n };\n };\n TreeView.prototype.addFullRow = function (toAdd) {\n var len = this.liList.length;\n if (toAdd) {\n for (var i = 0; i < len; i++) {\n this.createFullRow(this.liList[i]);\n }\n }\n else {\n for (var i = 0; i < len; i++) {\n var rowDiv = select('.' + FULLROW, this.liList[i]);\n detach(rowDiv);\n }\n }\n };\n TreeView.prototype.createFullRow = function (item) {\n var rowDiv = this.createElement('div', { className: FULLROW });\n item.insertBefore(rowDiv, item.childNodes[0]);\n };\n TreeView.prototype.addMultiSelect = function (toAdd) {\n if (toAdd) {\n var liEles = selectAll('.' + LISTITEM + ':not([aria-selected=\"true\"])', this.element);\n for (var _i = 0, liEles_1 = liEles; _i < liEles_1.length; _i++) {\n var ele = liEles_1[_i];\n ele.setAttribute('aria-selected', 'false');\n }\n }\n else {\n var liEles = selectAll('.' + LISTITEM + '[aria-selected=\"false\"]', this.element);\n for (var _a = 0, liEles_2 = liEles; _a < liEles_2.length; _a++) {\n var ele = liEles_2[_a];\n ele.removeAttribute('aria-selected');\n }\n }\n };\n TreeView.prototype.collapseByLevel = function (element, level, excludeHiddenNodes) {\n if (level > 0 && !isNOU(element)) {\n var cNodes = this.getVisibleNodes(excludeHiddenNodes, element.childNodes);\n for (var i = 0, len = cNodes.length; i < len; i++) {\n var liEle = cNodes[i];\n var icon = select('.' + COLLAPSIBLE, select('.' + TEXTWRAP, liEle));\n if (!isNOU(icon)) {\n this.collapseNode(liEle, icon, null);\n }\n this.collapseByLevel(select('.' + PARENTITEM, liEle), level - 1, excludeHiddenNodes);\n }\n }\n };\n TreeView.prototype.collapseAllNodes = function (excludeHiddenNodes) {\n var cIcons = this.getVisibleNodes(excludeHiddenNodes, selectAll('.' + COLLAPSIBLE, this.element));\n for (var i = 0, len = cIcons.length; i < len; i++) {\n var icon = cIcons[i];\n var liEle = closest(icon, '.' + LISTITEM);\n this.collapseNode(liEle, icon, null);\n }\n };\n TreeView.prototype.expandByLevel = function (element, level, excludeHiddenNodes) {\n if (level > 0 && !isNOU(element)) {\n var eNodes = this.getVisibleNodes(excludeHiddenNodes, element.childNodes);\n for (var i = 0, len = eNodes.length; i < len; i++) {\n var liEle = eNodes[i];\n var icon = select('.' + EXPANDABLE, select('.' + TEXTWRAP, liEle));\n if (!isNOU(icon)) {\n this.expandAction(liEle, icon, null);\n }\n this.expandByLevel(select('.' + PARENTITEM, liEle), level - 1, excludeHiddenNodes);\n }\n }\n };\n TreeView.prototype.expandAllNodes = function (excludeHiddenNodes) {\n var eIcons = this.getVisibleNodes(excludeHiddenNodes, selectAll('.' + EXPANDABLE, this.element));\n for (var i = 0, len = eIcons.length; i < len; i++) {\n var icon = eIcons[i];\n var liEle = closest(icon, '.' + LISTITEM);\n this.expandAction(liEle, icon, null, true);\n }\n };\n TreeView.prototype.getVisibleNodes = function (excludeHiddenNodes, nodes) {\n var vNodes = Array.prototype.slice.call(nodes);\n if (excludeHiddenNodes) {\n for (var i = 0; i < vNodes.length; i++) {\n if (!isVisible(vNodes[i])) {\n vNodes.splice(i, 1);\n i--;\n }\n }\n }\n return vNodes;\n };\n TreeView.prototype.removeNode = function (node) {\n var dragParentUl = closest(node, '.' + PARENTITEM);\n var dragParentLi = closest(dragParentUl, '.' + LISTITEM);\n if (!isNOU(this.nodeTemplateFn)) {\n this.destroyTemplate(node);\n }\n detach(node);\n this.updateElement(dragParentUl, dragParentLi);\n this.removeData(node);\n };\n TreeView.prototype.updateInstance = function () {\n this.updateList();\n this.updateSelectedNodes();\n this.updateExpandedNodes();\n };\n TreeView.prototype.updateList = function () {\n this.liList = Array.prototype.slice.call(selectAll('.' + LISTITEM, this.element));\n };\n TreeView.prototype.updateSelectedNodes = function () {\n this.setProperties({ selectedNodes: [] }, true);\n var sNodes = selectAll('.' + ACTIVE, this.element);\n this.selectGivenNodes(sNodes);\n };\n TreeView.prototype.updateExpandedNodes = function () {\n this.setProperties({ expandedNodes: [] }, true);\n var eNodes = selectAll('[aria-expanded=\"true\"]', this.element);\n for (var i = 0, len = eNodes.length; i < len; i++) {\n this.addExpand(eNodes[i]);\n }\n };\n TreeView.prototype.removeData = function (node) {\n if (this.dataType === 1) {\n var dm = new DataManager(this.treeData);\n var id = this.getId(node);\n var data = {};\n var newId = this.isNumberTypeId ? parseFloat(id) : id;\n data[this.fields.id] = newId;\n dm.remove(this.fields.id, data);\n this.removeChildNodes(id);\n }\n else {\n var id = this.getId(node);\n this.updateChildField(this.treeData, this.fields, id, null, null, true);\n }\n };\n TreeView.prototype.removeChildNodes = function (parentId) {\n var cNodes = this.getChildGroup(this.groupedData, parentId, false);\n var childData = [];\n if (cNodes) {\n for (var i = 0, len = cNodes.length; i < len; i++) {\n var dm = new DataManager(this.treeData);\n var id = getValue(this.fields.id, cNodes[i]).toString();\n var data = {};\n var currId = this.isNumberTypeId ? parseFloat(id) : id;\n data[this.fields.id] = currId;\n var nodeData = dm.remove(this.fields.id, data);\n childData.push(nodeData[0]);\n this.removeChildNodes(id);\n }\n }\n return childData;\n };\n TreeView.prototype.doGivenAction = function (nodes, selector, toExpand) {\n for (var i = 0, len = nodes.length; i < len; i++) {\n var liEle = this.getElement(nodes[i]);\n if (isNOU(liEle)) {\n continue;\n }\n var icon = select('.' + selector, select('.' + TEXTWRAP, liEle));\n if (!isNOU(icon)) {\n toExpand ? this.expandAction(liEle, icon, null) : this.collapseNode(liEle, icon, null);\n }\n }\n };\n TreeView.prototype.addGivenNodes = function (nodes, dropLi, index, isRemote, dropEle) {\n if (nodes.length === 0) {\n return;\n }\n var sNodes = this.getSortedData(nodes);\n var level = dropLi ? parseFloat(dropLi.getAttribute('aria-level')) + 1 : 1;\n if (isRemote) {\n this.updateMapper(level);\n }\n var li = ListBase.createListItemFromJson(this.createElement, sNodes, this.listBaseOption, level);\n var dropUl;\n if (!dropEle) {\n dropUl = dropLi ? this.expandParent(dropLi) : select('.' + PARENTITEM, this.element);\n }\n else {\n dropUl = dropEle;\n }\n var refNode = dropUl.childNodes[index];\n for (var i = 0; i < li.length; i++) {\n dropUl.insertBefore(li[i], refNode);\n }\n var id = this.getId(dropLi);\n if (this.dataType === 1) {\n this.updateField(this.treeData, this.fields, id, 'hasChildren', true);\n var refId = this.getId(refNode);\n var pos = isNOU(refId) ? this.treeData.length : this.getDataPos(this.treeData, this.fields, refId);\n for (var j = 0; j < nodes.length; j++) {\n if (!isNOU(id)) {\n var currId = this.isNumberTypeId ? parseFloat(id) : id;\n setValue(this.fields.parentID, currId, nodes[j]);\n }\n this.treeData.splice(pos, 0, nodes[j]);\n pos++;\n }\n }\n else {\n this.addChildData(this.treeData, this.fields, id, nodes, index);\n }\n this.finalizeNode(dropUl);\n };\n TreeView.prototype.updateMapper = function (level) {\n var mapper = (level === 1) ? this.fields : this.getChildFields(this.fields, level - 1, 1);\n this.updateListProp(mapper);\n };\n TreeView.prototype.updateListProp = function (mapper) {\n var prop = this.getActualProperties(mapper);\n this.listBaseOption.fields = prop;\n this.listBaseOption.fields.url = prop.hasOwnProperty('navigateUrl') ? prop.navigateUrl : 'navigateUrl';\n };\n TreeView.prototype.getDataPos = function (obj, mapper, id) {\n var pos = null;\n for (var i = 0, objlen = obj.length; i < objlen; i++) {\n var nodeId = getValue(mapper.id, obj[i]);\n if (obj[i] && nodeId && nodeId.toString() === id) {\n return i;\n }\n else if (typeof mapper.child === 'string' && !isNOU(getValue(mapper.child, obj[i]))) {\n var data = getValue(mapper.child, obj[i]);\n pos = this.getDataPos(data, this.getChildMapper(mapper), id);\n if (pos !== null) {\n break;\n }\n }\n else if (this.fields.dataSource instanceof DataManager && !isNOU(getValue('child', obj[i]))) {\n var items = getValue('child', obj[i]);\n pos = this.getDataPos(items, this.getChildMapper(mapper), id);\n if (pos !== null) {\n break;\n }\n }\n }\n return pos;\n };\n TreeView.prototype.addChildData = function (obj, mapper, id, data, index) {\n var updated;\n if (isNOU(id)) {\n index = isNOU(index) ? obj.length : index;\n for (var k = 0, len = data.length; k < len; k++) {\n obj.splice(index, 0, data[k]);\n index++;\n }\n return updated;\n }\n for (var i = 0, objlen = obj.length; i < objlen; i++) {\n var nodeId = getValue(mapper.id, obj[i]);\n if (obj[i] && nodeId && nodeId.toString() === id) {\n if ((typeof mapper.child === 'string' && (obj[i].hasOwnProperty(mapper.child) && obj[i][mapper.child] !== null)) ||\n ((this.fields.dataSource instanceof DataManager) && obj[i].hasOwnProperty('child'))) {\n var key = (typeof mapper.child === 'string') ? mapper.child : 'child';\n var childData = getValue(key, obj[i]);\n if (isNOU(childData)) {\n childData = [];\n }\n index = isNOU(index) ? childData.length : index;\n for (var k = 0, len = data.length; k < len; k++) {\n childData.splice(index, 0, data[k]);\n index++;\n }\n }\n else {\n var key = (typeof mapper.child === 'string') ? mapper.child : 'child';\n obj[i][key] = data;\n }\n return true;\n }\n else if (typeof mapper.child === 'string' && !isNOU(getValue(mapper.child, obj[i]))) {\n var childObj = getValue(mapper.child, obj[i]);\n updated = this.addChildData(childObj, this.getChildMapper(mapper), id, data, index);\n if (updated !== undefined) {\n break;\n }\n }\n else if ((this.fields.dataSource instanceof DataManager) && !isNOU(getValue('child', obj[i]))) {\n var childData = getValue('child', obj[i]);\n updated = this.addChildData(childData, this.getChildMapper(mapper), id, data, index);\n if (updated !== undefined) {\n break;\n }\n }\n }\n return updated;\n };\n TreeView.prototype.doDisableAction = function (nodes) {\n var validNodes = this.nodeType(nodes);\n var validID = this.checkValidId(validNodes);\n this.validArr = [];\n for (var i = 0, len = validID.length; i < len; i++) {\n var id = validID[i][this.fields.id].toString();\n if (id && this.disableNode.indexOf(id) === -1) {\n this.disableNode.push(id);\n }\n var liEle = this.getElement(id);\n if (liEle) {\n liEle.setAttribute('aria-disabled', 'true');\n addClass([liEle], DISABLE);\n }\n }\n };\n TreeView.prototype.doEnableAction = function (nodes) {\n var strNodes = this.nodeType(nodes);\n for (var i = 0, len = strNodes.length; i < len; i++) {\n var liEle = this.getElement(strNodes[i]);\n var id = strNodes[i];\n if (id && this.disableNode.indexOf(id) !== -1) {\n this.disableNode.splice(this.disableNode.indexOf(id), 1);\n }\n if (liEle) {\n liEle.removeAttribute('aria-disabled');\n removeClass([liEle], DISABLE);\n }\n }\n };\n TreeView.prototype.nodeType = function (nodes) {\n var validID = [];\n for (var i = 0, len = nodes.length; i < len; i++) {\n var id = void 0;\n if (typeof nodes[i] == \"string\") {\n id = (nodes[i]) ? nodes[i].toString() : null;\n }\n else if (typeof nodes[i] === \"object\") {\n id = nodes[i] ? nodes[i].getAttribute(\"data-uid\").toString() : null;\n }\n if (validID.indexOf(id) == -1) {\n validID.push(id);\n }\n }\n return validID;\n };\n TreeView.prototype.checkValidId = function (node) {\n var _this = this;\n if (this.dataType === 1) {\n this.validArr = this.treeData.filter(function (data) {\n return node.indexOf(data[_this.fields.id] ? data[_this.fields.id].toString() : null) !== -1;\n });\n }\n else if (this.dataType === 2) {\n for (var k = 0; k < this.treeData.length; k++) {\n var id = this.treeData[k][this.fields.id] ? this.treeData[k][this.fields.id].toString() : null;\n if (node.indexOf(id) !== -1) {\n this.validArr.push(this.treeData[k]);\n }\n var childItems = getValue(this.fields.child.toString(), this.treeData[k]);\n if (childItems) {\n this.filterNestedChild(childItems, node);\n }\n }\n }\n return this.validArr;\n };\n TreeView.prototype.filterNestedChild = function (treeData, nodes) {\n for (var k = 0; k < treeData.length; k++) {\n var id = treeData[k][this.fields.id] ? treeData[k][this.fields.id].toString() : null;\n if (nodes.indexOf(id) !== -1) {\n this.validArr.push(treeData[k]);\n }\n var childItems = getValue(this.fields.child.toString(), treeData[k]);\n if (childItems) {\n this.filterNestedChild(childItems, nodes);\n }\n }\n };\n TreeView.prototype.setTouchClass = function () {\n var ele = closest(this.element, '.' + BIGGER);\n this.touchClass = isNOU(ele) ? '' : SMALL;\n };\n TreeView.prototype.updatePersistProp = function () {\n this.removeField(this.treeData, this.fields, ['selected', 'expanded']);\n var sleNodes = this.selectedNodes;\n for (var l = 0, slelen = sleNodes.length; l < slelen; l++) {\n this.updateField(this.treeData, this.fields, sleNodes[l], 'selected', true);\n }\n var enodes = this.expandedNodes;\n for (var k = 0, nodelen = enodes.length; k < nodelen; k++) {\n this.updateField(this.treeData, this.fields, enodes[k], 'expanded', true);\n }\n if (this.showCheckBox) {\n this.removeField(this.treeData, this.fields, ['isChecked']);\n var cnodes = this.checkedNodes;\n for (var m = 0, nodelen = cnodes.length; m < nodelen; m++) {\n this.updateField(this.treeData, this.fields, cnodes[m], 'isChecked', true);\n }\n }\n };\n TreeView.prototype.removeField = function (obj, mapper, names) {\n if (isNOU(obj) || isNOU(mapper)) {\n return;\n }\n for (var i = 0, objlen = obj.length; i < objlen; i++) {\n for (var j = 0; j < names.length; j++) {\n var field = this.getMapperProp(mapper, names[j]);\n if (!isNOU(obj[i][field])) {\n delete obj[i][field];\n }\n }\n if (typeof mapper.child === 'string' && !isNOU(getValue(mapper.child, obj[i]))) {\n this.removeField(getValue(mapper.child, obj[i]), this.getChildMapper(mapper), names);\n }\n else if (this.fields.dataSource instanceof DataManager && !isNOU(getValue('child', obj[i]))) {\n this.removeField(getValue('child', obj[i]), this.getChildMapper(mapper), names);\n }\n }\n };\n TreeView.prototype.getMapperProp = function (mapper, fieldName) {\n switch (fieldName) {\n case 'selected':\n return !isNOU(mapper.selected) ? mapper.selected : 'selected';\n case 'expanded':\n return !isNOU(mapper.expanded) ? mapper.expanded : 'expanded';\n case 'isChecked':\n return !isNOU(mapper.isChecked) ? mapper.isChecked : 'isChecked';\n case 'hasChildren':\n return !isNOU(mapper.hasChildren) ? mapper.hasChildren : 'hasChildren';\n default:\n return fieldName;\n }\n };\n TreeView.prototype.updateField = function (obj, mapper, id, key, value) {\n var childNodes;\n if (isNOU(id)) {\n return;\n }\n else if (this.dataType === 1) {\n var newId = this.isNumberTypeId ? parseFloat(id) : id;\n var resultData = new DataManager(this.treeData).executeLocal(new Query().where(mapper.id, 'equal', newId, false));\n setValue(this.getMapperProp(mapper, key), value, resultData[0]);\n }\n else {\n this.updateChildField(obj, mapper, id, key, value);\n }\n };\n TreeView.prototype.updateChildField = function (obj, mapper, id, key, value, remove) {\n var removedData;\n if (isNOU(obj)) {\n return removedData;\n }\n for (var i = 0, objlen = obj.length; i < objlen; i++) {\n var nodeId = getValue(mapper.id, obj[i]);\n if (obj[i] && nodeId && nodeId.toString() === id) {\n if (remove) {\n removedData = obj.splice(i, 1);\n }\n else {\n setValue(this.getMapperProp(mapper, key), value, obj[i]);\n removedData = [];\n }\n return removedData;\n }\n else if (typeof mapper.child === 'string' && !isNOU(getValue(mapper.child, obj[i]))) {\n var childData = getValue(mapper.child, obj[i]);\n removedData = this.updateChildField(childData, this.getChildMapper(mapper), id, key, value, remove);\n if (removedData !== undefined) {\n break;\n }\n }\n else if (this.fields.dataSource instanceof DataManager && !isNOU(getValue('child', obj[i]))) {\n var childItems = getValue('child', obj[i]);\n removedData = this.updateChildField(childItems, this.getChildMapper(mapper), id, key, value, remove);\n if (removedData !== undefined) {\n break;\n }\n }\n }\n return removedData;\n };\n TreeView.prototype.triggerEvent = function () {\n this.renderReactTemplates();\n var eventArgs = { data: this.treeData };\n this.trigger('dataSourceChanged', eventArgs);\n };\n TreeView.prototype.wireInputEvents = function (inpEle) {\n EventHandler.add(inpEle, 'blur', this.inputFocusOut, this);\n };\n TreeView.prototype.wireEditingEvents = function (toBind) {\n var _this = this;\n if (toBind && !this.disabled) {\n var proxy_2 = this;\n this.touchEditObj = new Touch(this.element, {\n tap: function (e) {\n if (_this.isDoubleTapped(e) && e.tapCount === 2) {\n e.originalEvent.preventDefault();\n proxy_2.editingHandler(e.originalEvent);\n }\n }\n });\n }\n else {\n if (this.touchEditObj) {\n this.touchEditObj.destroy();\n }\n }\n };\n TreeView.prototype.wireClickEvent = function (toBind) {\n if (toBind) {\n var proxy_3 = this;\n this.touchClickObj = new Touch(this.element, {\n tap: function (e) {\n proxy_3.clickHandler(e);\n }\n });\n }\n else {\n if (this.touchClickObj) {\n this.touchClickObj.destroy();\n }\n }\n };\n TreeView.prototype.wireExpandOnEvent = function (toBind) {\n var _this = this;\n if (toBind) {\n var proxy_4 = this;\n this.touchExpandObj = new Touch(this.element, {\n tap: function (e) {\n if ((_this.expandOnType === 'Click' || (_this.expandOnType === 'DblClick' && _this.isDoubleTapped(e) && e.tapCount === 2))\n && e.originalEvent.which !== 3) {\n proxy_4.expandHandler(e);\n }\n }\n });\n }\n else {\n if (this.touchExpandObj) {\n this.touchExpandObj.destroy();\n }\n }\n };\n TreeView.prototype.mouseDownHandler = function (e) {\n this.mouseDownStatus = true;\n if (e.shiftKey || e.ctrlKey) {\n e.preventDefault();\n }\n if (e.ctrlKey && this.allowMultiSelection) {\n EventHandler.add(this.element, 'contextmenu', this.preventContextMenu, this);\n }\n };\n ;\n TreeView.prototype.preventContextMenu = function (e) {\n e.preventDefault();\n };\n TreeView.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'mousedown', this.mouseDownHandler, this);\n this.wireClickEvent(true);\n if (this.expandOnType !== 'None') {\n this.wireExpandOnEvent(true);\n }\n EventHandler.add(this.element, 'focus', this.focusIn, this);\n EventHandler.add(this.element, 'blur', this.focusOut, this);\n EventHandler.add(this.element, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.element, 'mouseout', this.onMouseLeave, this);\n this.keyboardModule = new KeyboardEvents(this.element, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs,\n eventName: 'keydown',\n });\n };\n TreeView.prototype.unWireEvents = function () {\n EventHandler.remove(this.element, 'mousedown', this.mouseDownHandler);\n this.wireClickEvent(false);\n this.wireExpandOnEvent(false);\n EventHandler.remove(this.element, 'focus', this.focusIn);\n EventHandler.remove(this.element, 'blur', this.focusOut);\n EventHandler.remove(this.element, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.element, 'mouseout', this.onMouseLeave);\n if (!this.disabled) {\n this.keyboardModule.destroy();\n }\n };\n TreeView.prototype.parents = function (element, selector) {\n var matched = [];\n var el = element.parentNode;\n while (!isNOU(el)) {\n if (matches(el, selector)) {\n matched.push(el);\n }\n el = el.parentNode;\n }\n return matched;\n };\n TreeView.prototype.isDoubleTapped = function (e) {\n var target = e.originalEvent.target;\n var secondTap;\n if (target && e.tapCount) {\n if (e.tapCount === 1) {\n this.firstTap = closest(target, '.' + LISTITEM);\n }\n else if (e.tapCount === 2) {\n secondTap = closest(target, '.' + LISTITEM);\n }\n }\n return (this.firstTap === secondTap);\n };\n TreeView.prototype.isDescendant = function (parent, child) {\n var node = child.parentNode;\n while (!isNOU(node)) {\n if (node === parent) {\n return true;\n }\n node = node.parentNode;\n }\n return false;\n };\n TreeView.prototype.showSpinner = function (element) {\n addClass([element], LOAD);\n createSpinner({\n target: element,\n width: Browser.isDevice ? 16 : 14\n }, this.createElement);\n showSpinner(element);\n };\n TreeView.prototype.hideSpinner = function (element) {\n hideSpinner(element);\n element.innerHTML = '';\n removeClass([element], LOAD);\n };\n TreeView.prototype.setCheckedNodes = function (nodes) {\n nodes = JSON.parse(JSON.stringify(nodes));\n this.uncheckAll(this.checkedNodes);\n this.setIndeterminate(nodes);\n if (nodes.length > 0) {\n this.checkAll(nodes);\n }\n };\n /**\n * Checks whether the checkedNodes entered are valid and sets the valid checkedNodes while changing via setmodel\n */\n TreeView.prototype.setValidCheckedNode = function (node) {\n if (this.dataType === 1) {\n var mapper = this.fields;\n var resultData = new DataManager(this.treeData).executeLocal(new Query().where(mapper.id, 'equal', node, true));\n if (resultData[0]) {\n this.setChildCheckState(resultData, node, resultData[0]);\n if (this.autoCheck) {\n var parent_4 = resultData[0][this.fields.parentID] ? resultData[0][this.fields.parentID].toString() : null;\n var childNodes = this.getChildNodes(this.treeData, parent_4);\n var count = 0;\n for (var len = 0; len < childNodes.length; len++) {\n var childId = childNodes[len][this.fields.id].toString();\n if (this.checkedNodes.indexOf(childId) !== -1) {\n count++;\n }\n }\n if (count === childNodes.length && this.checkedNodes.indexOf(parent_4) === -1 && parent_4) {\n this.checkedNodes.push(parent_4);\n }\n }\n }\n }\n else if (this.dataType === 2) {\n for (var a = 0; a < this.treeData.length; a++) {\n var index = this.treeData[a][this.fields.id] ? this.treeData[a][this.fields.id].toString() : '';\n if (index === node && this.checkedNodes.indexOf(node) === -1) {\n this.checkedNodes.push(node);\n break;\n }\n var childItems = getValue(this.fields.child.toString(), this.treeData[a]);\n if (childItems) {\n this.setChildCheckState(childItems, node, this.treeData[a]);\n }\n }\n }\n };\n /**\n * Checks whether the checkedNodes entered are valid and sets the valid checkedNodes while changing via setmodel(for hierarchical DS)\n */\n TreeView.prototype.setChildCheckState = function (childItems, node, treeData) {\n var checkedParent;\n var count = 0;\n if (this.dataType === 1) {\n if (treeData) {\n checkedParent = treeData[this.fields.id] ? treeData[this.fields.id].toString() : null;\n }\n for (var index = 0; index < childItems.length; index++) {\n var checkNode = childItems[index][this.fields.id] ? childItems[index][this.fields.id].toString() : null;\n if (treeData && checkedParent && this.autoCheck) {\n if (this.checkedNodes.indexOf(checkedParent) !== -1 && this.checkedNodes.indexOf(checkNode) === -1) {\n this.checkedNodes.push(checkNode);\n }\n }\n if (checkNode === node && this.checkedNodes.indexOf(node) === -1) {\n this.checkedNodes.push(node);\n }\n var subChildItems = this.getChildNodes(this.treeData, checkNode);\n if (subChildItems) {\n this.setChildCheckState(subChildItems, node, treeData);\n }\n }\n }\n else {\n if (treeData) {\n checkedParent = treeData[this.fields.id] ? treeData[this.fields.id].toString() : '';\n }\n for (var index = 0; index < childItems.length; index++) {\n var checkedChild = childItems[index][this.fields.id] ? childItems[index][this.fields.id].toString() : '';\n if (treeData && checkedParent && this.autoCheck) {\n if (this.checkedNodes.indexOf(checkedParent) !== -1 && this.checkedNodes.indexOf(checkedChild) === -1) {\n this.checkedNodes.push(checkedChild);\n }\n }\n if (checkedChild === node && this.checkedNodes.indexOf(node) === -1) {\n this.checkedNodes.push(node);\n }\n var subChildItems = getValue(this.fields.child.toString(), childItems[index]);\n if (subChildItems) {\n this.setChildCheckState(subChildItems, node, childItems[index]);\n }\n if (this.checkedNodes.indexOf(checkedChild) !== -1 && this.autoCheck) {\n count++;\n }\n if (count === childItems.length && this.checkedNodes.indexOf(checkedParent) === -1 && this.autoCheck) {\n this.checkedNodes.push(checkedParent);\n }\n }\n }\n };\n TreeView.prototype.setIndeterminate = function (nodes) {\n for (var i = 0; i < nodes.length; i++) {\n this.setValidCheckedNode(nodes[i]);\n }\n };\n TreeView.prototype.updatePosition = function (id, newData, isRefreshChild, childValue) {\n if (this.dataType === 1) {\n var pos = this.getDataPos(this.treeData, this.fields, id);\n this.treeData.splice(pos, 1, newData);\n if (isRefreshChild) {\n this.removeChildNodes(id);\n for (var j = 0; j < childValue.length; j++) {\n this.treeData.splice(pos, 0, childValue[j]);\n pos++;\n }\n }\n this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);\n }\n else {\n this.updateChildPosition(this.treeData, this.fields, id, [newData], undefined);\n }\n };\n TreeView.prototype.updateChildPosition = function (treeData, mapper, currID, newData, index) {\n var found;\n for (var i = 0, objlen = treeData.length; i < objlen; i++) {\n var nodeId = getValue(mapper.id, treeData[i]);\n if (treeData[i] && nodeId && nodeId.toString() === currID) {\n treeData[i] = newData[0];\n return true;\n }\n else if (typeof mapper.child === 'string' && !isNOU(getValue(mapper.child, treeData[i]))) {\n var childObj = getValue(mapper.child, treeData[i]);\n found = this.updateChildPosition(childObj, this.getChildMapper(mapper), currID, newData, index);\n if (found !== undefined) {\n break;\n }\n }\n else if (this.fields.dataSource instanceof DataManager && !isNOU(getValue('child', treeData[i]))) {\n var childData = getValue('child', treeData[i]);\n found = this.updateChildPosition(childData, this.getChildMapper(mapper), currID, newData, index);\n if (found !== undefined) {\n break;\n }\n }\n }\n return found;\n };\n TreeView.prototype.dynamicState = function () {\n this.setDragAndDrop(this.allowDragAndDrop);\n this.wireEditingEvents(this.allowEditing);\n if (!this.disabled) {\n this.wireEvents();\n this.setRipple();\n }\n else {\n this.unWireEvents();\n this.rippleFn();\n this.rippleIconFn();\n }\n };\n TreeView.prototype.crudOperation = function (operation, nodes, target, newText, newNode, index, prevent) {\n var _this = this;\n var data = this.fields.dataSource;\n var matchedArr = [];\n var query = this.getQuery(this.fields);\n var key = this.fields.id;\n var crud;\n var changes = {\n addedRecords: [],\n deletedRecords: [],\n changedRecords: []\n };\n var nodesID = [];\n if (nodes) {\n nodesID = this.nodeType(nodes);\n }\n else if (target) {\n if (typeof target == \"string\") {\n nodesID[0] = target.toString();\n }\n else if (typeof target === \"object\") {\n nodesID[0] = target.getAttribute(\"data-uid\").toString();\n }\n }\n for (var i = 0, len = nodesID.length; i < len; i++) {\n var liEle = this.getElement(nodesID[i]);\n if (isNullOrUndefined(liEle)) {\n continue;\n }\n var removedData = this.getNodeObject(nodesID[i]);\n matchedArr.push(removedData);\n }\n switch (operation) {\n case 'delete':\n if (nodes.length == 1) {\n crud = data.remove(key, matchedArr[0], query.fromTable, query);\n }\n else {\n changes.deletedRecords = matchedArr;\n crud = data.saveChanges(changes, key, query.fromTable, query);\n }\n crud.then(function (e) { return _this.deleteSuccess(nodesID); })\n .catch(function (e) { return _this.dmFailure(e); });\n break;\n case 'update':\n matchedArr[0][this.fields.text] = newText;\n crud = data.update(key, matchedArr[0], query.fromTable, query);\n crud.then(function (e) { return _this.editSucess(target, newText, prevent); })\n .catch(function (e) { return _this.dmFailure(e, target, prevent); });\n break;\n case 'insert':\n if (newNode.length == 1) {\n crud = data.insert(newNode[0], query.fromTable, query);\n }\n else {\n var arr = [];\n for (var i = 0, len = newNode.length; i < len; i++) {\n arr.push(newNode[i]);\n }\n changes.addedRecords = arr;\n crud = data.saveChanges(changes, key, query.fromTable, query);\n }\n crud.then(function (e) {\n var dropLi = _this.getElement(target);\n _this.addSuccess(newNode, dropLi, index);\n _this.preventExpand = false;\n }).catch(function (e) { return _this.dmFailure(e); });\n break;\n }\n };\n TreeView.prototype.deleteSuccess = function (nodes) {\n for (var i = 0, len = nodes.length; i < len; i++) {\n var liEle = this.getElement(nodes[i]);\n if (isNOU(liEle)) {\n continue;\n }\n this.removeNode(liEle);\n }\n this.updateInstance();\n if (this.dataType === 1) {\n this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);\n }\n this.triggerEvent();\n };\n TreeView.prototype.editSucess = function (target, newText, prevent) {\n var liEle = this.getElement(target);\n var txtEle = select('.' + LISTTEXT, liEle);\n this.appendNewText(liEle, txtEle, newText, prevent);\n };\n TreeView.prototype.addSuccess = function (nodes, dropLi, index) {\n var dropUl;\n var icon = dropLi ? dropLi.querySelector('.' + ICON) : null;\n var proxy = this;\n if (dropLi && icon && icon.classList.contains(EXPANDABLE) &&\n dropLi.querySelector('.' + PARENTITEM) === null) {\n proxy.renderChildNodes(dropLi, null, function () {\n dropUl = dropLi.querySelector('.' + PARENTITEM);\n proxy.addGivenNodes(nodes, dropLi, index, true, dropUl);\n proxy.triggerEvent();\n });\n }\n else {\n this.addGivenNodes(nodes, dropLi, index, true);\n this.triggerEvent();\n }\n };\n TreeView.prototype.dmFailure = function (e, target, prevent) {\n if (target) {\n this.updatePreviousText(target, prevent);\n }\n this.trigger('actionFailure', { error: e });\n };\n TreeView.prototype.updatePreviousText = function (target, prevent) {\n var liEle = this.getElement(target);\n var txtEle = select('.' + LISTTEXT, liEle);\n this.updateText(liEle, txtEle, this.oldText, prevent);\n };\n /**\n * Called internally if any of the property value changed.\n * @param {TreeView} newProp\n * @param {TreeView} oldProp\n * @returns void\n * @private\n */\n TreeView.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 'allowDragAndDrop':\n this.setDragAndDrop(this.allowDragAndDrop);\n break;\n case 'dragArea':\n if (this.allowDragAndDrop) {\n this.dragObj.dragArea = this.dragArea;\n }\n break;\n case 'allowEditing':\n this.wireEditingEvents(this.allowEditing);\n break;\n case 'allowMultiSelection':\n if (this.selectedNodes.length > 1) {\n var sNode = this.getElement(this.selectedNodes[0]);\n this.isLoaded = false;\n this.removeSelectAll();\n this.selectNode(sNode, null);\n this.isLoaded = true;\n }\n this.setMultiSelect(this.allowMultiSelection);\n this.addMultiSelect(this.allowMultiSelection);\n break;\n case 'checkedNodes':\n if (this.showCheckBox) {\n this.checkedNodes = oldProp.checkedNodes;\n this.setCheckedNodes(newProp.checkedNodes);\n }\n break;\n case 'autoCheck':\n if (this.showCheckBox) {\n this.autoCheck = newProp.autoCheck;\n this.ensureIndeterminate();\n }\n break;\n case 'cssClass':\n this.setCssClass(oldProp.cssClass, newProp.cssClass);\n break;\n case 'enableRtl':\n this.setEnableRtl();\n break;\n case 'expandedNodes':\n this.isAnimate = false;\n this.setProperties({ expandedNodes: [] }, true);\n this.collapseAll();\n this.isInitalExpand = true;\n this.setProperties({ expandedNodes: isNOU(newProp.expandedNodes) ? [] : newProp.expandedNodes }, true);\n this.doExpandAction();\n this.isInitalExpand = false;\n this.isAnimate = true;\n break;\n case 'expandOn':\n this.wireExpandOnEvent(false);\n this.setExpandOnType();\n if (this.expandOnType !== 'None' && !this.disabled) {\n this.wireExpandOnEvent(true);\n }\n break;\n case 'disabled':\n this.setDisabledMode();\n this.dynamicState();\n break;\n case 'fields':\n this.isAnimate = false;\n this.isFieldChange = true;\n this.initialRender = true;\n this.reRenderNodes();\n this.initialRender = false;\n this.isAnimate = true;\n this.isFieldChange = false;\n break;\n case 'fullRowSelect':\n this.setFullRow(this.fullRowSelect);\n this.addFullRow(this.fullRowSelect);\n break;\n case 'loadOnDemand':\n if (this.loadOnDemand === false && !this.onLoaded) {\n var nodes = this.element.querySelectorAll('li');\n var i = 0;\n while (i < nodes.length) {\n if (nodes[i].getAttribute('aria-expanded') !== 'true') {\n this.renderChildNodes(nodes[i], true, null, true);\n }\n i++;\n }\n this.onLoaded = true;\n }\n break;\n case 'nodeTemplate':\n this.hasTemplate = false;\n this.nodeTemplateFn = this.templateComplier(this.nodeTemplate);\n this.reRenderNodes();\n break;\n case 'selectedNodes':\n this.removeSelectAll();\n this.setProperties({ selectedNodes: newProp.selectedNodes }, true);\n this.doSelectionAction();\n break;\n case 'showCheckBox':\n this.reRenderNodes();\n break;\n case 'sortOrder':\n this.reRenderNodes();\n break;\n case 'fullRowNavigable':\n this.setProperties({ fullRowNavigable: newProp.fullRowNavigable }, true);\n this.listBaseOption.itemNavigable = newProp.fullRowNavigable;\n this.reRenderNodes();\n break;\n }\n }\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. It also removes the attributes and classes.\n */\n TreeView.prototype.destroy = function () {\n this.clearTemplate();\n this.element.removeAttribute('aria-activedescendant');\n this.element.removeAttribute('tabindex');\n this.unWireEvents();\n this.wireEditingEvents(false);\n if (!this.disabled) {\n this.rippleFn();\n this.rippleIconFn();\n }\n this.setCssClass(this.cssClass, null);\n this.setDragAndDrop(false);\n this.setFullRow(false);\n if (this.ulElement && this.ulElement.parentElement) {\n this.ulElement.parentElement.removeChild(this.ulElement);\n }\n _super.prototype.destroy.call(this);\n };\n /**\n * Adds the collection of TreeView nodes based on target and index position. If target node is not specified,\n * then the nodes are added as children of the given parentID or in the root level of TreeView.\n * @param { { [key: string]: Object }[] } nodes - Specifies the array of JSON data that has to be added.\n * @param { string | Element } target - Specifies ID of TreeView node/TreeView node as target element.\n * @param { number } index - Specifies the index to place the newly added nodes in the target element.\n * @param { boolean } preventTargetExpand - If set to true, the target parent node will be prevented from auto expanding.\n */\n TreeView.prototype.addNodes = function (nodes, target, index, preventTargetExpand) {\n if (isNOU(nodes)) {\n return;\n }\n nodes = JSON.parse(JSON.stringify(nodes));\n var dropLi = this.getElement(target);\n this.preventExpand = preventTargetExpand;\n if (this.fields.dataSource instanceof DataManager) {\n if (!this.isOffline) {\n this.crudOperation('insert', null, target, null, nodes, index, this.preventExpand);\n }\n else {\n this.addSuccess(nodes, dropLi, index);\n }\n }\n else if (this.dataType === 2) {\n this.addGivenNodes(nodes, dropLi, index);\n }\n else {\n if (dropLi) {\n this.addGivenNodes(nodes, dropLi, index);\n }\n else {\n nodes = this.getSortedData(nodes);\n for (var i = 0; i < nodes.length; i++) {\n var pid = getValue(this.fields.parentID, nodes[i]);\n dropLi = pid ? this.getElement(pid.toString()) : pid;\n this.addGivenNodes([nodes[i]], dropLi, index);\n }\n }\n this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);\n }\n this.updateCheckedStateFromDS();\n if (this.showCheckBox && dropLi) {\n this.ensureParentCheckState(dropLi);\n }\n if ((this.fields.dataSource instanceof DataManager === false)) {\n this.preventExpand = false;\n this.triggerEvent();\n }\n };\n /**\n * Instead of clicking on the TreeView node for editing, we can enable it by using\n * `beginEdit` property. On passing the node ID or element through this property, the edit textBox\n * will be created for the particular node thus allowing us to edit it.\n * @param {string | Element} node - Specifies ID of TreeView node/TreeView node.\n */\n TreeView.prototype.beginEdit = function (node) {\n var ele = this.getElement(node);\n if (isNOU(ele) || this.disabled) {\n return;\n }\n this.createTextbox(ele, null);\n };\n /**\n * Checks all the unchecked nodes. You can also check specific nodes by passing array of unchecked nodes\n * as argument to this method.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView node.\n */\n TreeView.prototype.checkAll = function (nodes) {\n if (this.showCheckBox) {\n this.doCheckBoxAction(nodes, true);\n }\n };\n /**\n * Collapses all the expanded TreeView nodes. You can collapse specific nodes by passing array of nodes as argument to this method.\n * You can also collapse all the nodes excluding the hidden nodes by setting **excludeHiddenNodes** to true. If you want to collapse\n * a specific level of nodes, set **level** as argument to collapseAll method.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/ array of TreeView node.\n * @param {number} level - TreeView nodes will collapse up to the given level.\n * @param {boolean} excludeHiddenNodes - Whether or not to exclude hidden nodes of TreeView when collapsing all nodes.\n */\n TreeView.prototype.collapseAll = function (nodes, level, excludeHiddenNodes) {\n if (!isNOU(nodes)) {\n this.doGivenAction(nodes, COLLAPSIBLE, false);\n }\n else {\n if (level > 0) {\n this.collapseByLevel(select('.' + PARENTITEM, this.element), level, excludeHiddenNodes);\n }\n else {\n this.collapseAllNodes(excludeHiddenNodes);\n }\n }\n };\n /**\n * Disables the collection of nodes by passing the ID of nodes or node elements in the array.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView nodes.\n */\n TreeView.prototype.disableNodes = function (nodes) {\n if (!isNOU(nodes)) {\n this.doDisableAction(nodes);\n }\n };\n /**\n * Enables the collection of disabled nodes by passing the ID of nodes or node elements in the array.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView nodes.\n */\n TreeView.prototype.enableNodes = function (nodes) {\n if (!isNOU(nodes)) {\n this.doEnableAction(nodes);\n }\n };\n /**\n * Ensures visibility of the TreeView node by using node ID or node element.\n * When many TreeView nodes are present and we need to find a particular node, `ensureVisible` property\n * helps bring the node to visibility by expanding the TreeView and scrolling to the specific node.\n * @param {string | Element} node - Specifies ID of TreeView node/TreeView nodes.\n */\n TreeView.prototype.ensureVisible = function (node) {\n var liEle = this.getElement(node);\n if (isNOU(liEle)) {\n return;\n }\n var parents = this.parents(liEle, '.' + LISTITEM);\n this.expandAll(parents);\n setTimeout(function () { liEle.scrollIntoView(true); }, 450);\n };\n /**\n * Expands all the collapsed TreeView nodes. You can expand the specific nodes by passing the array of collapsed nodes\n * as argument to this method. You can also expand all the collapsed nodes by excluding the hidden nodes by setting\n * **excludeHiddenNodes** to true to this method. To expand a specific level of nodes, set **level** as argument to expandAll method.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView nodes.\n * @param {number} level - TreeView nodes will expand up to the given level.\n * @param {boolean} excludeHiddenNodes - Whether or not to exclude hidden nodes when expanding all nodes.\n */\n TreeView.prototype.expandAll = function (nodes, level, excludeHiddenNodes) {\n if (!isNOU(nodes)) {\n this.doGivenAction(nodes, EXPANDABLE, true);\n }\n else {\n if (level > 0) {\n this.expandByLevel(select('.' + PARENTITEM, this.element), level, excludeHiddenNodes);\n }\n else {\n this.expandAllNodes(excludeHiddenNodes);\n }\n }\n };\n /**\n * Gets all the checked nodes including child, whether it is loaded or not.\n */\n TreeView.prototype.getAllCheckedNodes = function () {\n var checkNodes = this.checkedNodes;\n return checkNodes;\n };\n /**\n * Gets all the disabled nodes including child, whether it is loaded or not.\n */\n TreeView.prototype.getDisabledNodes = function () {\n var disabledNodes = this.disableNode;\n return disabledNodes;\n };\n /**\n * Get the node's data such as id, text, parentID, selected, isChecked, and expanded by passing the node element or it's ID.\n * @param {string | Element} node - Specifies ID of TreeView node/TreeView node.\n */\n TreeView.prototype.getNode = function (node) {\n var ele = this.getElement(node);\n return this.getNodeData(ele, true);\n };\n /**\n * To get the updated data source of TreeView after performing some operation like drag and drop, node editing,\n * node selecting/unSelecting, node expanding/collapsing, node checking/unChecking, adding and removing node.\n * * If you pass the ID of TreeView node as arguments for this method then it will return the updated data source\n * of the corresponding node otherwise it will return the entire updated data source of TreeView.\n * * The updated data source also contains custom attributes if you specified in data source.\n * @param {string | Element} node - Specifies ID of TreeView node/TreeView node.\n * @isGenericType true\n */\n TreeView.prototype.getTreeData = function (node) {\n var id = this.getId(node);\n this.updatePersistProp();\n if (isNOU(id)) {\n return this.treeData;\n }\n else {\n var data = this.getNodeObject(id);\n return isNOU(data) ? [] : [data];\n }\n };\n /**\n * Moves the collection of nodes within the same TreeView based on target or its index position.\n * @param {string[] | Element[]} sourceNodes - Specifies the array of TreeView nodes ID/array of TreeView node.\n * @param {string | Element} target - Specifies ID of TreeView node/TreeView node as target element.\n * @param {number} index - Specifies the index to place the moved nodes in the target element.\n * @param { boolean } preventTargetExpand - If set to true, the target parent node will be prevented from auto expanding.\n */\n TreeView.prototype.moveNodes = function (sourceNodes, target, index, preventTargetExpand) {\n var dropLi = this.getElement(target);\n if (isNOU(dropLi)) {\n return;\n }\n for (var i = 0; i < sourceNodes.length; i++) {\n var dragLi = this.getElement(sourceNodes[i]);\n if (isNOU(dragLi) || dropLi.isSameNode(dragLi) || this.isDescendant(dragLi, dropLi)) {\n continue;\n }\n this.preventExpand = preventTargetExpand;\n this.dropAsChildNode(dragLi, dropLi, this, index);\n }\n if (this.fields.dataSource instanceof DataManager === false) {\n this.preventExpand = false;\n }\n this.triggerEvent();\n };\n /**\n * Refreshes a particular node of the TreeView.\n * @param {string | Element} target - Specifies the ID of TreeView node or TreeView node as target element.\n * @param {{ [key: string]: Object }[]} newData - Specifies the new data of TreeView node.\n */\n TreeView.prototype.refreshNode = function (target, newData) {\n if (isNOU(target) || isNOU(newData)) {\n return;\n }\n var id;\n var isRefreshChild = false;\n if (this.dataType == 1 && newData.length > 1) {\n isRefreshChild = true;\n }\n else if (this.dataType == 2 && newData.length === 1) {\n var updatedChildValue = getValue(this.fields.child.toString(), newData[0]);\n if (!isNOU(updatedChildValue)) {\n isRefreshChild = true;\n }\n }\n var liEle = this.getElement(target);\n id = liEle ? liEle.getAttribute('data-uid') : ((target) ? target.toString() : null);\n this.refreshData = this.getNodeObject(id);\n newData = JSON.parse(JSON.stringify(newData));\n /* eslint-disable */\n var newNodeData;\n var parentData;\n if (this.dataType == 1 && isRefreshChild) {\n for (var k = 0; k < newData.length; k++) {\n if (isNOU(newData[k][this.fields.parentID])) {\n parentData = newData[k];\n newData.splice(k, 1);\n break;\n }\n }\n newNodeData = extend({}, this.refreshData, parentData);\n }\n else {\n newNodeData = extend({}, this.refreshData, newData[0]);\n }\n if (isNOU(liEle)) {\n this.updatePosition(id, newNodeData, isRefreshChild, newData);\n return;\n }\n this.isRefreshed = true;\n var level = parseFloat(liEle.getAttribute('aria-level'));\n var newliEle = ListBase.createListItemFromJson(this.createElement, [newNodeData], this.listBaseOption, level);\n var ul = select('.' + PARENTITEM, liEle);\n var childItems = getValue(this.fields.child.toString(), newNodeData);\n if ((isRefreshChild && ul) || (isRefreshChild && !isNOU(childItems))) {\n var parentEle = liEle.parentElement;\n var index = Array.prototype.indexOf.call(parentEle.childNodes, liEle);\n remove(liEle);\n parentEle.insertBefore(newliEle[0], parentEle.childNodes[index]);\n this.updatePosition(id, newNodeData, isRefreshChild, newData);\n if (isRefreshChild && ul) {\n this.expandAll([id]);\n }\n }\n else {\n var txtEle = select('.' + TEXTWRAP, liEle);\n var newTextEle = select('.' + TEXTWRAP, newliEle[0]);\n var icon = select('div.' + ICON, txtEle);\n var newIcon = select('div.' + ICON, newTextEle);\n if (icon && newIcon) {\n if (newIcon.classList.contains(EXPANDABLE) && icon.classList.contains(COLLAPSIBLE)) {\n removeClass([newIcon], EXPANDABLE);\n addClass([newIcon], COLLAPSIBLE);\n }\n else if (newIcon.classList.contains(COLLAPSIBLE) && icon.classList.contains(EXPANDABLE)) {\n removeClass([newIcon], COLLAPSIBLE);\n addClass([newIcon], EXPANDABLE);\n }\n else if (icon.classList.contains('interaction')) {\n addClass([newIcon], 'interaction');\n }\n }\n remove(txtEle);\n var fullEle = select('.' + FULLROW, liEle);\n fullEle.parentNode.insertBefore(newTextEle, fullEle.nextSibling);\n this.updatePosition(id, newNodeData, isRefreshChild, newData);\n }\n liEle = this.getElement(target);\n if (newNodeData[this.fields.tooltip]) {\n liEle.setAttribute(\"title\", newNodeData[this.fields.tooltip]);\n }\n if (newNodeData.hasOwnProperty(this.fields.htmlAttributes) && newNodeData[this.fields.htmlAttributes]) {\n var attr = {};\n merge(attr, newNodeData[this.fields.htmlAttributes]);\n if (attr.class) {\n addClass([liEle], attr.class.split(' '));\n delete attr.class;\n }\n else {\n attributes(liEle, attr);\n }\n }\n if (this.selectedNodes.indexOf(id) !== -1) {\n liEle.setAttribute('aria-selected', 'true');\n addClass([liEle], ACTIVE);\n }\n this.isRefreshed = false;\n this.triggerEvent();\n };\n /**\n * Removes the collection of TreeView nodes by passing the array of node details as argument to this method.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView node.\n */\n TreeView.prototype.removeNodes = function (nodes) {\n if (!isNOU(nodes)) {\n if (this.fields.dataSource instanceof DataManager && !this.isOffline) {\n this.crudOperation('delete', nodes);\n }\n else {\n this.deleteSuccess(nodes);\n }\n }\n };\n /**\n * Replaces the text of the TreeView node with the given text.\n * @param {string | Element} target - Specifies ID of TreeView node/TreeView node as target element.\n * @param {string} newText - Specifies the new text of TreeView node.\n */\n TreeView.prototype.updateNode = function (target, newText) {\n var _this = this;\n if (isNOU(target) || isNOU(newText) || !this.allowEditing) {\n return;\n }\n var liEle = this.getElement(target);\n if (isNOU(liEle)) {\n return;\n }\n var txtEle = select('.' + LISTTEXT, liEle);\n this.updateOldText(liEle);\n var eventArgs = this.getEditEvent(liEle, null, null);\n this.trigger('nodeEditing', eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n if (_this.fields.dataSource instanceof DataManager && !_this.isOffline) {\n _this.crudOperation('update', null, target, newText, null, null, false);\n }\n else {\n _this.appendNewText(liEle, txtEle, newText, false);\n }\n }\n });\n };\n /**\n * Unchecks all the checked nodes. You can also uncheck the specific nodes by passing array of checked nodes\n * as argument to this method.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView node.\n */\n TreeView.prototype.uncheckAll = function (nodes) {\n if (this.showCheckBox) {\n this.doCheckBoxAction(nodes, false);\n }\n };\n var TreeView_1;\n __decorate([\n Property(false)\n ], TreeView.prototype, \"allowDragAndDrop\", void 0);\n __decorate([\n Property(false)\n ], TreeView.prototype, \"allowEditing\", void 0);\n __decorate([\n Property(false)\n ], TreeView.prototype, \"allowMultiSelection\", void 0);\n __decorate([\n Complex({}, NodeAnimationSettings)\n ], TreeView.prototype, \"animation\", void 0);\n __decorate([\n Property()\n ], TreeView.prototype, \"checkedNodes\", void 0);\n __decorate([\n Property('')\n ], TreeView.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], TreeView.prototype, \"disabled\", void 0);\n __decorate([\n Property(null)\n ], TreeView.prototype, \"dragArea\", void 0);\n __decorate([\n Property(false)\n ], TreeView.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property(false)\n ], TreeView.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property()\n ], TreeView.prototype, \"expandedNodes\", void 0);\n __decorate([\n Property('Auto')\n ], TreeView.prototype, \"expandOn\", void 0);\n __decorate([\n Complex({}, FieldsSettings)\n ], TreeView.prototype, \"fields\", void 0);\n __decorate([\n Property(true)\n ], TreeView.prototype, \"fullRowSelect\", void 0);\n __decorate([\n Property(true)\n ], TreeView.prototype, \"loadOnDemand\", void 0);\n __decorate([\n Property()\n ], TreeView.prototype, \"locale\", void 0);\n __decorate([\n Property()\n ], TreeView.prototype, \"nodeTemplate\", void 0);\n __decorate([\n Property()\n ], TreeView.prototype, \"selectedNodes\", void 0);\n __decorate([\n Property('None')\n ], TreeView.prototype, \"sortOrder\", void 0);\n __decorate([\n Property(false)\n ], TreeView.prototype, \"showCheckBox\", void 0);\n __decorate([\n Property(true)\n ], TreeView.prototype, \"autoCheck\", void 0);\n __decorate([\n Property(false)\n ], TreeView.prototype, \"fullRowNavigable\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"actionFailure\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"dataBound\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"dataSourceChanged\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"drawNode\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"keyPress\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeChecked\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeChecking\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeClicked\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeCollapsed\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeCollapsing\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeDragging\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeDragStart\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeDragStop\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeDropped\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeEdited\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeEditing\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeExpanded\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeExpanding\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeSelected\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeSelecting\", void 0);\n TreeView = TreeView_1 = __decorate([\n NotifyPropertyChanges\n ], TreeView);\n return TreeView;\n}(Component));\nexport { TreeView };\n","/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable max-len */\nimport { extend, isNullOrUndefined, createElement, EventHandler, addClass, append, removeClass, remove, closest, classList } from '@syncfusion/ej2-base';\nimport { DataManager, Query } from '@syncfusion/ej2-data';\nimport { TreeView } from '@syncfusion/ej2-navigations';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { Data } from '../actions/data';\nimport * as cls from '../base/css-constant';\nimport * as events from '../base/constant';\nimport * as util from '../base/util';\nvar ResourceBase = /** @class */ (function () {\n function ResourceBase(parent) {\n this.resourceCollection = [];\n this.leftPixel = 25;\n this.parent = parent;\n }\n ResourceBase.prototype.renderResourceHeaderIndent = function (tr) {\n var resColTd = createElement('td', { className: cls.RESOURCE_LEFT_TD_CLASS });\n var resColDiv = createElement('div', { className: cls.RESOURCE_TEXT_CLASS });\n if (this.parent.activeViewOptions.headerIndentTemplate) {\n var data = { className: [resColTd.className], type: 'emptyCells' };\n this.parent.renderHeaderIndentTemplate(data, resColTd);\n }\n else {\n resColTd.appendChild(resColDiv);\n }\n var args = { elementType: 'emptyCells', element: resColTd };\n this.parent.trigger(events.renderCell, args);\n tr.appendChild(resColTd);\n };\n ResourceBase.prototype.hideResourceRows = function (tBody) {\n if (this.resourceCollection.length <= 1 || this.parent.virtualScrollModule) {\n return;\n }\n var trCount = this.lastResourceLevel.length;\n for (var i = 0; i < trCount; i++) {\n var resData = this.lastResourceLevel[i].resourceData;\n var res = this.lastResourceLevel[i].resource;\n if (resData.ClassName === cls.RESOURCE_PARENT_CLASS && !resData[res.expandedField] &&\n !isNullOrUndefined(resData[res.expandedField])) {\n var trCollection = [].slice.call(tBody.children);\n var slicedCollection = trCollection.slice(i + 1, i + (parseInt(resData.Count, 10) + 1));\n addClass(slicedCollection, cls.HIDDEN_CLASS);\n }\n }\n };\n ResourceBase.prototype.createResourceColumn = function () {\n var resColl = this.resourceCollection;\n var resDiv = createElement('div', { className: cls.RESOURCE_COLUMN_WRAP_CLASS });\n var tbl = this.parent.activeView.createTableLayout(cls.RESOURCE_COLUMN_TABLE_CLASS);\n if (!this.parent.uiStateValues.isGroupAdaptive && this.parent.rowAutoHeight && this.parent.activeView.isTimelineView()\n && this.parent.activeViewOptions.group.resources.length > 0) {\n addClass([tbl], cls.AUTO_HEIGHT);\n }\n var tBody = tbl.querySelector('tbody');\n var resData = this.generateTreeData(true);\n this.countCalculation(resColl.slice(0, -2), resColl.slice(0, -1));\n this.renderedResources = this.lastResourceLevel;\n if (this.parent.virtualScrollModule) {\n var resourceCount = this.parent.virtualScrollModule.getRenderedCount();\n this.setExpandedResources();\n resData = this.expandedResources.slice(0, resourceCount);\n this.renderedResources = resData;\n }\n append(this.getContentRows(resData), tBody);\n this.hideResourceRows(tBody);\n tbl.appendChild(tBody);\n resDiv.appendChild(tbl);\n return resDiv;\n };\n ResourceBase.prototype.setRenderedResources = function () {\n var resColl = this.resourceCollection;\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var temp = this.generateTreeData(true);\n this.countCalculation(resColl.slice(0, -2), resColl.slice(0, -1));\n this.renderedResources = this.lastResourceLevel;\n };\n ResourceBase.prototype.setExpandedResources = function () {\n var resources = [];\n for (var i = 0; i < this.lastResourceLevel.length; i++) {\n var resource = this.lastResourceLevel[i].resourceData;\n var count = resource.Count;\n resources.push(this.lastResourceLevel[i]);\n var isExpanded = resource[this.lastResourceLevel[i].resource.expandedField];\n if (!isNullOrUndefined(isExpanded) && !isExpanded && count > 0) {\n i = i + count;\n }\n }\n this.expandedResources = resources;\n };\n ResourceBase.prototype.getContentRows = function (resData, isVirtualScroll) {\n var resRows = [];\n var left;\n var rIndex;\n var resColl = this.resourceCollection;\n var tr = createElement('tr');\n var td = createElement('td', { attrs: { tabindex: isVirtualScroll ? '-1' : '0' } });\n for (var i = 0; i < resData.length; i++) {\n var ntd = td.cloneNode();\n rIndex = util.findIndexInData(resColl, 'name', resData[i].resource.name);\n if (rIndex === resColl.length - 1) {\n extend(resData[i].resourceData, { ClassName: cls.RESOURCE_CHILD_CLASS });\n this.renderedResources[i].className = [cls.RESOURCE_CHILD_CLASS];\n }\n else {\n extend(resData[i].resourceData, { ClassName: cls.RESOURCE_PARENT_CLASS });\n this.renderedResources[i].className = [cls.RESOURCE_PARENT_CLASS];\n }\n left = (rIndex * this.leftPixel) + 'px';\n if (resData[i].resourceData.ClassName === cls.RESOURCE_PARENT_CLASS\n && !isNullOrUndefined(resData[i].resourceData.Count) && (resData[i].resourceData.Count > 0)) {\n var iconClass = void 0;\n if (resData[i].resourceData[resColl[rIndex].expandedField] ||\n isNullOrUndefined(resData[i].resourceData[resColl[rIndex].expandedField])) {\n iconClass = cls.RESOURCE_COLLAPSE_CLASS;\n }\n else {\n iconClass = cls.RESOURCE_EXPAND_CLASS;\n }\n var iconDiv = createElement('div');\n addClass([iconDiv], [cls.RESOURCE_TREE_ICON_CLASS, iconClass]);\n this.setMargin(iconDiv, left);\n ntd.appendChild(iconDiv);\n if (this.resourceCollection.length > 1) {\n EventHandler.add(iconDiv, 'click', this.onTreeIconClick, this);\n }\n }\n this.parent.activeView.setResourceHeaderContent(ntd, resData[i], cls.RESOURCE_TEXT_CLASS);\n ntd.setAttribute('data-group-index', resData[i].groupIndex.toString());\n ntd.setAttribute('aria-label', resData[i].resourceData[resData[i].resource.textField] + ' resource');\n if (!this.parent.activeViewOptions.resourceHeaderTemplate) {\n this.setMargin(ntd.querySelector('.' + cls.RESOURCE_TEXT_CLASS), left);\n }\n var classCollection = [cls.RESOURCE_CELLS_CLASS, resData[i].resourceData.ClassName];\n addClass([ntd], classCollection);\n var args = { elementType: 'resourceHeader', element: ntd, groupIndex: resData[i].groupIndex };\n this.parent.trigger(events.renderCell, args);\n var ntr = tr.cloneNode();\n ntr.appendChild(ntd);\n resRows.push(ntr);\n }\n return resRows;\n };\n ResourceBase.prototype.setMargin = function (element, value) {\n if (!this.parent.enableRtl) {\n element.style.marginLeft = value;\n }\n else {\n element.style.marginRight = value;\n }\n };\n ResourceBase.prototype.countCalculation = function (parentCollection, wholeCollection) {\n var collection;\n for (var y = 0; y < parentCollection.length; y++) {\n var data = parentCollection[parentCollection.length - (y + 1)].dataSource;\n for (var x = 0; x < data.length; x++) {\n var totalCount = 0;\n if (this.parent.activeViewOptions.group.byGroupID) {\n var query = new Query().where(wholeCollection[wholeCollection.length - 1].groupIDField, 'equal', data[x][parentCollection[parentCollection.length - (y + 1)].idField]);\n collection = new DataManager(wholeCollection[wholeCollection.length - 1].dataSource).executeLocal(query);\n }\n else {\n collection = wholeCollection[wholeCollection.length - 1].dataSource;\n }\n for (var z = 0; z < collection.length; z++) {\n totalCount = totalCount + parseInt(collection[z].Count, 10);\n }\n totalCount = totalCount + parseInt(data[x].Count, 10);\n extend(data[x], { Count: totalCount });\n }\n wholeCollection = wholeCollection.slice(0, -1);\n }\n };\n ResourceBase.prototype.onTreeIconClick = function (e) {\n var _this = this;\n if (this.parent.eventTooltip) {\n this.parent.eventTooltip.close();\n }\n var target = e.target;\n var hide;\n var trElement = closest(target, '.' + cls.RESOURCE_PARENT_CLASS)\n .parentElement;\n var index = parseInt(trElement.children[0].getAttribute('data-group-index'), 10);\n var args = {\n cancel: false, event: e, groupIndex: index,\n requestType: !target.classList.contains(cls.RESOURCE_COLLAPSE_CLASS) ? 'resourceExpand' : 'resourceCollapse'\n };\n this.parent.trigger(events.actionBegin, args, function (actionArgs) {\n if (!actionArgs.cancel) {\n if (target.classList.contains(cls.RESOURCE_COLLAPSE_CLASS)) {\n classList(target, [cls.RESOURCE_EXPAND_CLASS], [cls.RESOURCE_COLLAPSE_CLASS]);\n hide = true;\n }\n else {\n classList(target, [cls.RESOURCE_COLLAPSE_CLASS], [cls.RESOURCE_EXPAND_CLASS]);\n hide = false;\n }\n var eventElements = [].slice.call(_this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS));\n for (var _i = 0, eventElements_1 = eventElements; _i < eventElements_1.length; _i++) {\n var element = eventElements_1[_i];\n remove(element);\n }\n if (_this.parent.virtualScrollModule) {\n _this.updateVirtualContent(index, hide, e, target);\n }\n else {\n _this.updateContent(index, hide);\n }\n var data = { cssProperties: _this.parent.getCssProperties(), module: 'scroll' };\n _this.parent.notify(events.scrollUiUpdate, data);\n args = {\n cancel: false, event: e, groupIndex: index,\n requestType: target.classList.contains(cls.RESOURCE_COLLAPSE_CLASS) ? 'resourceExpanded' : 'resourceCollapsed'\n };\n _this.parent.refreshEvents(false);\n _this.parent.trigger(events.actionComplete, args);\n }\n });\n };\n ResourceBase.prototype.updateContent = function (index, hide) {\n var rowCollection = [];\n var workCellCollection = [];\n var headerRowCollection = [];\n var pNode;\n var clickedRes = this.lastResourceLevel[index].resourceData;\n var resRows = [].slice.call(this.parent.element.querySelectorAll('.' + cls.RESOURCE_COLUMN_WRAP_CLASS + ' ' + 'tr'));\n var contentRows = [].slice.call(this.parent.element.querySelectorAll('.' + cls.CONTENT_WRAP_CLASS + ' ' + 'tbody tr'));\n var eventRows = [].slice.call(this.parent.element.querySelectorAll('.' + cls.CONTENT_WRAP_CLASS + ' .' + cls.APPOINTMENT_CONTAINER_CLASS));\n for (var j = 0; j < clickedRes.Count; j++) {\n rowCollection.push(resRows[index + j + 1]);\n workCellCollection.push(contentRows[index + j + 1]);\n headerRowCollection.push(eventRows[index + j + 1]);\n }\n var clonedCollection = this.lastResourceLevel;\n for (var i = 0; i < rowCollection.length; i++) {\n var expanded = true;\n pNode = rowCollection[i].children[0].classList.contains(cls.RESOURCE_PARENT_CLASS);\n clonedCollection[index].resourceData[clonedCollection[index].resource.expandedField] = !hide;\n if (hide) {\n if (pNode) {\n var trElem = rowCollection[i].querySelector('.' + cls.RESOURCE_TREE_ICON_CLASS);\n if (trElem) {\n classList(trElem, [cls.RESOURCE_EXPAND_CLASS], [cls.RESOURCE_COLLAPSE_CLASS]);\n }\n }\n if (!rowCollection[i].classList.contains(cls.HIDDEN_CLASS)) {\n addClass([rowCollection[i], workCellCollection[i], headerRowCollection[i]], cls.HIDDEN_CLASS);\n }\n }\n else {\n if (pNode) {\n var rowIndex = rowCollection[i].rowIndex;\n if (!clonedCollection[rowIndex].resourceData[clonedCollection[rowIndex].resource.expandedField]\n && !isNullOrUndefined(clonedCollection[rowIndex].resourceData[clonedCollection[rowIndex].resource.expandedField])) {\n rowCollection.splice(i + 1, (parseInt(clonedCollection[rowIndex].resourceData.Count, 10)));\n workCellCollection.splice(i + 1, (parseInt(clonedCollection[rowIndex].resourceData.Count, 10)));\n headerRowCollection.splice(i + 1, (parseInt(clonedCollection[rowIndex].resourceData.Count, 10)));\n expanded = false;\n }\n if (expanded) {\n var trElem = rowCollection[i].querySelector('.' + cls.RESOURCE_TREE_ICON_CLASS);\n if (trElem) {\n classList(trElem, [cls.RESOURCE_COLLAPSE_CLASS], [cls.RESOURCE_EXPAND_CLASS]);\n }\n }\n }\n if (rowCollection[i].classList.contains(cls.HIDDEN_CLASS)) {\n removeClass([rowCollection[i], workCellCollection[i], headerRowCollection[i]], cls.HIDDEN_CLASS);\n }\n }\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n ResourceBase.prototype.updateVirtualContent = function (index, expand, e, target) {\n this.lastResourceLevel[index].resourceData[this.lastResourceLevel[index].resource.expandedField] = !expand;\n this.setExpandedResources();\n var resourceCount = this.parent.virtualScrollModule.getRenderedCount();\n var startIndex = this.expandedResources.indexOf(this.renderedResources[0]);\n this.renderedResources = this.expandedResources.slice(startIndex, startIndex + resourceCount);\n if (this.renderedResources.length < resourceCount) {\n var sIndex = this.expandedResources.length - resourceCount;\n sIndex = (sIndex > 0) ? sIndex : 0;\n this.renderedResources = this.expandedResources.slice(sIndex, this.expandedResources.length);\n }\n var virtualTrack = this.parent.element.querySelector('.' + cls.VIRTUAL_TRACK_CLASS);\n this.parent.virtualScrollModule.updateVirtualTrackHeight(virtualTrack);\n var resTable = this.parent.element.querySelector('.' + cls.RESOURCE_COLUMN_WRAP_CLASS + ' ' + 'table');\n var contentTable = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS + ' ' + 'table');\n var eventTable = this.parent.element.querySelector('.' + cls.EVENT_TABLE_CLASS);\n this.parent.virtualScrollModule.updateContent(resTable, contentTable, eventTable, this.renderedResources);\n var timeIndicator = this.parent.element.querySelector('.' + cls.CURRENT_TIMELINE_CLASS);\n if (!isNullOrUndefined(timeIndicator)) {\n timeIndicator.style.height =\n this.parent.element.querySelector('.' + cls.CONTENT_TABLE_CLASS).offsetHeight + 'px';\n }\n };\n ResourceBase.prototype.renderResourceHeader = function () {\n var resourceWrapper = createElement('div', { className: cls.RESOURCE_TOOLBAR_CONTAINER });\n resourceWrapper.innerHTML = '
';\n if (this.parent.currentView === 'MonthAgenda') {\n var target = this.parent.activeView.getPanel().querySelector('.' + cls.CONTENT_WRAP_CLASS);\n target.insertBefore(resourceWrapper, target.querySelector('.' + cls.WRAPPER_CONTAINER_CLASS));\n }\n else {\n this.parent.element.insertBefore(resourceWrapper, this.parent.element.querySelector('.' + cls.TABLE_CONTAINER_CLASS));\n }\n this.renderResourceHeaderText();\n EventHandler.add(resourceWrapper.querySelector('.' + cls.RESOURCE_MENU_ICON), 'click', this.menuClick, this);\n };\n ResourceBase.prototype.renderResourceTree = function () {\n this.popupOverlay = createElement('div', { className: cls.RESOURCE_TREE_POPUP_OVERLAY });\n var treeWrapper = createElement('div', { className: cls.RESOURCE_TREE_POPUP + ' e-popup-close' });\n if (this.parent.currentView === 'MonthAgenda') {\n var target = this.parent.activeView.getPanel().querySelector('.' + cls.WRAPPER_CONTAINER_CLASS);\n target.insertBefore(treeWrapper, target.children[0]);\n target.appendChild(this.popupOverlay);\n }\n else {\n this.parent.element.querySelector('.' + cls.TABLE_CONTAINER_CLASS).appendChild(treeWrapper);\n this.parent.element.querySelector('.' + cls.TABLE_CONTAINER_CLASS).appendChild(this.popupOverlay);\n }\n var resourceTree = createElement('div', { className: cls.RESOURCE_TREE });\n treeWrapper.appendChild(resourceTree);\n this.treeViewObj = new TreeView({\n cssClass: this.parent.cssClass,\n enableRtl: this.parent.enableRtl,\n fields: {\n dataSource: [].slice.call(this.generateTreeData()),\n id: 'resourceId',\n text: 'resourceName',\n child: 'resourceChild'\n },\n nodeTemplate: this.parent.resourceHeaderTemplate,\n nodeClicked: this.resourceClick.bind(this)\n });\n this.treeViewObj.appendTo(resourceTree);\n this.treeViewObj.expandAll();\n this.treePopup = new Popup(treeWrapper, {\n targetType: 'relative',\n actionOnScroll: 'none',\n content: this.treeViewObj.element,\n enableRtl: this.parent.enableRtl,\n hideAnimation: { name: 'SlideLeftOut', duration: 500 },\n showAnimation: { name: 'SlideLeftIn', duration: 500 },\n viewPortElement: this.parent.element.querySelector('.' + (this.parent.currentView === 'MonthAgenda' ?\n cls.WRAPPER_CONTAINER_CLASS : cls.TABLE_CONTAINER_CLASS))\n });\n this.parent.on(events.documentClick, this.documentClick, this);\n };\n ResourceBase.prototype.generateTreeData = function (isTimeLine) {\n var _this = this;\n var treeCollection = [];\n var resTreeColl = [];\n var groupIndex = 0;\n var _loop_1 = function (i, len) {\n var treeHandler = function (treeLevel, index, levelId) {\n var resource = _this.resourceCollection[index];\n var treeArgs;\n var resObj;\n if (!isTimeLine) {\n treeArgs = {\n resourceId: levelId,\n resourceName: treeLevel.resourceData[resource.textField],\n resource: treeLevel.resource,\n resourceData: treeLevel.resourceData\n };\n }\n else {\n resObj = {\n type: 'resourceHeader', resource: treeLevel.resource,\n resourceData: treeLevel.resourceData, groupIndex: groupIndex,\n groupOrder: treeLevel.groupOrder\n };\n resTreeColl.push(resObj);\n groupIndex++;\n }\n if (treeLevel.child.length > 0 && !isTimeLine) {\n treeArgs.resourceChild = [];\n }\n var count = 1;\n for (var _i = 0, _a = treeLevel.child; _i < _a.length; _i++) {\n var tree = _a[_i];\n if (!isTimeLine) {\n treeArgs.resourceChild.push(treeHandler(tree, index + 1, levelId + '-' + count));\n }\n else {\n treeHandler(tree, index + 1, levelId + '-' + count);\n }\n count += 1;\n }\n if (isTimeLine) {\n extend(resObj.resourceData, { Count: count - 1 });\n }\n return treeArgs;\n };\n if (!isTimeLine) {\n treeCollection.push(treeHandler(this_1.resourceTreeLevel[i], 0, (i + 1).toString()));\n }\n else {\n treeHandler(this_1.resourceTreeLevel[i], 0, (i + 1).toString());\n }\n };\n var this_1 = this;\n for (var i = 0, len = this.resourceTreeLevel.length; i < len; i++) {\n _loop_1(i, len);\n }\n if (isTimeLine) {\n this.lastResourceLevel = resTreeColl;\n return resTreeColl;\n }\n else {\n return treeCollection;\n }\n };\n ResourceBase.prototype.renderResourceHeaderText = function () {\n var resource = this.lastResourceLevel[this.parent.uiStateValues.groupIndex];\n var headerCollection = [];\n var _loop_2 = function (i, len) {\n var resourceLevel = this_2.resourceCollection[i];\n var resourceText = resourceLevel.dataSource.filter(function (resData) {\n return resData[resourceLevel.idField] === resource.groupOrder[i];\n });\n var resourceName = createElement('div', {\n className: cls.RESOURCE_NAME,\n innerHTML: resourceText[0][resourceLevel.textField]\n });\n headerCollection.push(resourceName);\n var levelIcon = createElement('div', { className: 'e-icons e-icon-next' });\n headerCollection.push(levelIcon);\n };\n var this_2 = this;\n for (var i = 0, len = resource.groupOrder.length; i < len; i++) {\n _loop_2(i, len);\n }\n headerCollection.pop();\n var target = (this.parent.currentView === 'MonthAgenda') ? this.parent.activeView.getPanel() : this.parent.element;\n var headerWrapper = target.querySelector('.' + cls.RESOURCE_LEVEL_TITLE);\n util.removeChildren(headerWrapper);\n for (var _i = 0, headerCollection_1 = headerCollection; _i < headerCollection_1.length; _i++) {\n var header = headerCollection_1[_i];\n headerWrapper.appendChild(header);\n }\n if (this.lastResourceLevel.length === 1) {\n addClass([this.parent.element.querySelector('.' + cls.RESOURCE_MENU)], cls.DISABLE_CLASS);\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n ResourceBase.prototype.menuClick = function (event) {\n if (this.parent.element.querySelector('.' + cls.RESOURCE_TREE_POPUP).classList.contains(cls.POPUP_OPEN)) {\n this.treePopup.hide();\n removeClass([this.popupOverlay], cls.ENABLE_CLASS);\n }\n else {\n var treeNodes = [].slice.call(this.treeViewObj.element.querySelectorAll('.e-list-item:not(.e-has-child)'));\n removeClass(treeNodes, 'e-active');\n addClass([treeNodes[this.parent.uiStateValues.groupIndex]], 'e-active');\n this.treePopup.show();\n addClass([this.popupOverlay], cls.ENABLE_CLASS);\n }\n };\n ResourceBase.prototype.selectResourceByIndex = function (groupIndex) {\n if (this.lastResourceLevel && groupIndex > -1 && groupIndex < this.lastResourceLevel.length) {\n this.triggerEvents(groupIndex);\n }\n };\n ResourceBase.prototype.resourceClick = function (event) {\n if (!event.node.classList.contains('e-has-child')) {\n this.treePopup.hide();\n removeClass([this.popupOverlay], cls.ENABLE_CLASS);\n var treeNodes = [].slice.call(this.treeViewObj.element.querySelectorAll('.e-list-item:not(.e-has-child)'));\n var groupIndex = treeNodes.indexOf(event.node);\n this.triggerEvents(groupIndex, event);\n event.event.preventDefault();\n }\n };\n ResourceBase.prototype.triggerEvents = function (groupIndex, event) {\n var _this = this;\n var args = { cancel: false, event: (event) ? event.event : null, groupIndex: groupIndex, requestType: 'resourceChange' };\n this.parent.trigger(events.actionBegin, args, function (actionArgs) {\n if (!actionArgs.cancel) {\n _this.parent.uiStateValues.groupIndex = actionArgs.groupIndex;\n _this.parent.renderModule.render(_this.parent.currentView);\n args = {\n cancel: false, event: (event) ? event.event : null, groupIndex: _this.parent.uiStateValues.groupIndex, requestType: 'resourceChanged'\n };\n _this.parent.trigger(events.actionComplete, args);\n }\n });\n };\n ResourceBase.prototype.documentClick = function (args) {\n if (closest(args.event.target, '.' + cls.RESOURCE_TREE_POPUP)) {\n return;\n }\n var treeWrapper = this.parent.element.querySelector('.' + cls.RESOURCE_TREE_POPUP);\n if (treeWrapper && treeWrapper.classList.contains(cls.POPUP_OPEN)) {\n this.treePopup.hide();\n removeClass([this.popupOverlay], cls.ENABLE_CLASS);\n }\n };\n ResourceBase.prototype.bindResourcesData = function (isSetModel) {\n var _this = this;\n this.parent.showSpinner();\n var promises = [];\n for (var _i = 0, _a = this.parent.resources; _i < _a.length; _i++) {\n var resource = _a[_i];\n var dataModule = new Data(resource.dataSource, resource.query);\n promises.push(dataModule.getData(dataModule.generateQuery()));\n }\n Promise.all(promises).then(function (e) { return _this.dataManagerSuccess(e, isSetModel); })\n .catch(function (e) { return _this.parent.crudModule.dataManagerFailure(e); });\n };\n ResourceBase.prototype.dataManagerSuccess = function (e, isSetModel) {\n if (!this.parent || this.parent && this.parent.isDestroyed) {\n return;\n }\n this.parent.resourceCollection = [];\n for (var i = 0, length_1 = e.length; i < length_1; i++) {\n var resource = this.parent.resources[i];\n var resourceObj = this.getResourceModel(resource, e[i].result);\n this.parent.resourceCollection.push(resourceObj);\n }\n this.refreshLayout(isSetModel);\n };\n ResourceBase.prototype.getResourceModel = function (resource, resourceData) {\n var resourceObj = {\n field: resource.field,\n title: resource.title,\n name: resource.name,\n allowMultiple: resource.allowMultiple,\n dataSource: resourceData || resource.dataSource,\n idField: resource.idField,\n textField: resource.textField,\n groupIDField: resource.groupIDField,\n colorField: resource.colorField,\n startHourField: resource.startHourField,\n endHourField: resource.endHourField,\n workDaysField: resource.workDaysField,\n expandedField: resource.expandedField,\n cssClassField: resource.cssClassField\n };\n return resourceObj;\n };\n ResourceBase.prototype.refreshLayout = function (isSetModel) {\n if (isNullOrUndefined(this.parent.uiStateValues.groupIndex) || !(this.parent.enablePersistence)) {\n this.parent.uiStateValues.groupIndex = 0;\n }\n this.parent.renderElements(isSetModel);\n };\n ResourceBase.prototype.setResourceCollection = function () {\n var requiredResources = [];\n this.resourceCollection = [];\n this.colorIndex = null;\n if (this.parent.activeViewOptions.group.resources.length > 0) {\n for (var _i = 0, _a = this.parent.activeViewOptions.group.resources; _i < _a.length; _i++) {\n var resource = _a[_i];\n var index_1 = util.findIndexInData(this.parent.resourceCollection, 'name', resource);\n if (index_1 >= 0) {\n requiredResources.push(this.parent.resourceCollection[index_1]);\n }\n }\n }\n else if (this.parent.resourceCollection.length > 0) {\n requiredResources = this.parent.resourceCollection;\n }\n var index = 0;\n for (var _b = 0, requiredResources_1 = requiredResources; _b < requiredResources_1.length; _b++) {\n var resource = requiredResources_1[_b];\n var resources = this.getResourceModel(resource);\n if (resource.name === this.parent.eventSettings.resourceColorField) {\n this.colorIndex = index;\n }\n index++;\n this.resourceCollection.push(resources);\n }\n if (isNullOrUndefined(this.colorIndex)) {\n this.colorIndex = this.resourceCollection.length - 1;\n }\n };\n ResourceBase.prototype.generateResourceLevels = function (innerDates, isTimeLine) {\n var _this = this;\n var resources = this.resourceCollection;\n var resTreeGroup = [];\n var lastColumnDates = [];\n var group = function (resources, index, prevResource, prevResourceData, prevOrder) {\n var resTree = [];\n var resource = resources[0];\n if (resource) {\n var data = void 0;\n if (prevResourceData && _this.parent.activeViewOptions.group.byGroupID) {\n var id_1 = prevResourceData[prevResource.idField];\n data = resource.dataSource.filter(function (e) {\n return e[resource.groupIDField] === id_1;\n });\n }\n else {\n data = resource.dataSource;\n }\n for (var i = 0; i < data.length; i++) {\n var groupOrder = [];\n if (prevOrder && prevOrder.length > 0) {\n groupOrder = groupOrder.concat(prevOrder);\n }\n groupOrder.push(data[i][resource.idField]);\n var items = group(resources.slice(1), index + 1, resource, data[i], groupOrder);\n // Here validate child item empty top level resource only\n if (index === 0 && items.length === 0 && _this.resourceCollection.length > 1) {\n continue;\n }\n var dateCol = [];\n var renderDates = _this.parent.activeView.renderDates;\n var resWorkDays = void 0;\n if (!_this.parent.activeViewOptions.group.byDate && index + 1 === _this.resourceCollection.length) {\n var workDays = data[i][resource.workDaysField];\n var resStartHour = data[i][resource.startHourField];\n var resEndHour = data[i][resource.endHourField];\n if (workDays && workDays.length > 0) {\n renderDates = _this.parent.activeView.getRenderDates(workDays);\n resWorkDays = workDays;\n dateCol = _this.parent.activeView.getDateSlots(renderDates, workDays);\n }\n else {\n resWorkDays = _this.parent.activeViewOptions.workDays;\n dateCol = innerDates;\n }\n var dateSlots = _this.generateCustomHours(dateCol, resStartHour, resEndHour, groupOrder);\n lastColumnDates = lastColumnDates.concat(dateSlots);\n }\n var resCssClass = data[i][resource.cssClassField];\n var slotData = {\n type: 'resourceHeader', className: ['e-resource-cells'],\n resourceLevelIndex: index, groupOrder: groupOrder,\n resource: resource, resourceData: data[i],\n colSpan: _this.parent.activeViewOptions.group.byDate ? 1 : dateCol.length,\n renderDates: renderDates, workDays: resWorkDays, cssClass: resCssClass,\n child: items\n };\n resTree.push(slotData);\n }\n if (!resTreeGroup[index]) {\n resTreeGroup[index] = [];\n }\n if (resTree.length > 0) {\n resTreeGroup[index].push(resTree);\n }\n return resTree;\n }\n return [];\n };\n this.resourceTreeLevel = group(resources, 0);\n return (isTimeLine) ? [] : this.generateHeaderLevels(resTreeGroup, lastColumnDates, innerDates);\n };\n ResourceBase.prototype.generateCustomHours = function (renderDates, startHour, endHour, groupOrder) {\n var dateSlots = extend([], renderDates, null, true);\n for (var _i = 0, dateSlots_1 = dateSlots; _i < dateSlots_1.length; _i++) {\n var dateSlot = dateSlots_1[_i];\n if (startHour) {\n dateSlot.startHour = this.parent.getStartEndTime(startHour);\n }\n if (endHour) {\n dateSlot.endHour = this.parent.getStartEndTime(endHour);\n }\n if (groupOrder) {\n dateSlot.groupOrder = groupOrder;\n }\n }\n return dateSlots;\n };\n ResourceBase.prototype.generateHeaderLevels = function (resTreeGroup, lastColumnDates, headerDates) {\n var headerLevels = [];\n for (var i = resTreeGroup.length - 1; i >= 0; i--) {\n var temp = 0;\n for (var _i = 0, _a = resTreeGroup[i]; _i < _a.length; _i++) {\n var currentLevelChilds = _a[_i];\n for (var _b = 0, currentLevelChilds_1 = currentLevelChilds; _b < currentLevelChilds_1.length; _b++) {\n var currentLevelChild = currentLevelChilds_1[_b];\n if (resTreeGroup[i + 1] && resTreeGroup[i + 1].length > 0) {\n var nextLevelChilds = resTreeGroup[i + 1][temp];\n if (!nextLevelChilds) {\n continue;\n }\n var colSpan = 0;\n for (var _c = 0, nextLevelChilds_1 = nextLevelChilds; _c < nextLevelChilds_1.length; _c++) {\n var nextLevelChild = nextLevelChilds_1[_c];\n if (!this.parent.activeViewOptions.group.byGroupID || (this.parent.activeViewOptions.group.byGroupID &&\n nextLevelChild.resourceData[nextLevelChild.resource.groupIDField] ===\n currentLevelChild.resourceData[currentLevelChild.resource.idField])) {\n colSpan += nextLevelChild.colSpan;\n }\n }\n currentLevelChild.colSpan = colSpan;\n }\n currentLevelChild.groupIndex = temp;\n temp++;\n headerLevels[currentLevelChild.resourceLevelIndex] = headerLevels[currentLevelChild.resourceLevelIndex] || [];\n headerLevels[currentLevelChild.resourceLevelIndex].push(currentLevelChild);\n }\n }\n }\n this.lastResourceLevel = headerLevels.slice(-1)[0] || [];\n if (!this.parent.activeViewOptions.group.byDate) {\n var index = 0;\n for (var _d = 0, _e = this.lastResourceLevel; _d < _e.length; _d++) {\n var lastLevelResource = _e[_d];\n for (var i = 0; i < lastLevelResource.colSpan; i++) {\n lastColumnDates[index].groupIndex = lastLevelResource.groupIndex;\n index++;\n }\n }\n headerLevels.push(lastColumnDates);\n return headerLevels;\n }\n var dateHeaderLevels = [];\n var levels = extend([], headerLevels, null, true);\n var dateColSpan = 0;\n for (var _f = 0, _g = levels[0]; _f < _g.length; _f++) {\n var firstRowTd = _g[_f];\n dateColSpan += firstRowTd.colSpan;\n }\n var datesColumn = [];\n for (var _h = 0, headerDates_1 = headerDates; _h < headerDates_1.length; _h++) {\n var headerDate = headerDates_1[_h];\n headerDate.colSpan = dateColSpan;\n datesColumn.push(headerDate);\n var resGroup = extend([], levels, null, true);\n for (var k = 0, length_2 = resGroup.length; k < length_2; k++) {\n if (k === resGroup.length - 1) {\n for (var _j = 0, _k = resGroup[k]; _j < _k.length; _j++) {\n var resTd = _k[_j];\n resTd.date = headerDate.date;\n resTd.workDays = headerDate.workDays;\n resTd.startHour = this.parent.getStartEndTime(resTd.resourceData[resTd.resource.startHourField]) ||\n headerDate.startHour;\n resTd.endHour = this.parent.getStartEndTime(resTd.resourceData[resTd.resource.endHourField]) ||\n headerDate.endHour;\n }\n }\n if (!dateHeaderLevels[k]) {\n dateHeaderLevels[k] = [];\n }\n dateHeaderLevels[k] = dateHeaderLevels[k].concat(resGroup[k]);\n }\n }\n dateHeaderLevels.unshift(datesColumn);\n return dateHeaderLevels;\n };\n ResourceBase.prototype.setResourceValues = function (eventObj, groupIndex) {\n var _this = this;\n var setValues = function (index, field, value) {\n if (_this.resourceCollection[index].allowMultiple && _this.parent.activeViewOptions.group.allowGroupEdit) {\n eventObj[field] = [value];\n }\n else {\n eventObj[field] = value;\n }\n };\n if (groupIndex === void 0) {\n groupIndex = this.parent.uiStateValues.isGroupAdaptive ? this.parent.uiStateValues.groupIndex :\n this.parent.activeCellsData.groupIndex;\n }\n if (this.parent.activeViewOptions.group.resources.length > 0 && !isNullOrUndefined(groupIndex)) {\n var groupOrder = this.lastResourceLevel[groupIndex].groupOrder;\n for (var index = 0; index < this.resourceCollection.length; index++) {\n setValues(index, this.resourceCollection[index].field, groupOrder[index]);\n }\n }\n else if (this.parent.resourceCollection.length > 0) {\n for (var index = 0; index < this.resourceCollection.length; index++) {\n var data = this.resourceCollection[index].dataSource[0];\n if (data) {\n setValues(index, this.resourceCollection[index].field, data[this.resourceCollection[index].idField]);\n }\n }\n }\n };\n ResourceBase.prototype.getResourceColor = function (eventObj, groupOrder) {\n var colorFieldIndex = (!isNullOrUndefined(groupOrder) &&\n this.colorIndex > groupOrder.length - 1) ? groupOrder.length - 1 : this.colorIndex;\n var resource = this.resourceCollection[colorFieldIndex];\n if (isNullOrUndefined(groupOrder) && this.parent.activeViewOptions.group.allowGroupEdit && resource.allowMultiple) {\n return undefined;\n }\n var id = isNullOrUndefined(groupOrder) ? eventObj[resource.field] : groupOrder[colorFieldIndex];\n var data = this.filterData(resource.dataSource, resource.idField, id);\n if (data.length > 0) {\n return data[0][resource.colorField];\n }\n return undefined;\n };\n ResourceBase.prototype.getCssClass = function (eventObj) {\n var resource = this.resourceCollection.slice(-1)[0];\n if (this.parent.activeViewOptions.group.allowGroupEdit && resource.allowMultiple) {\n return undefined;\n }\n var data = this.filterData(resource.dataSource, resource.idField, eventObj[resource.field]);\n if (data.length > 0) {\n return data[0][resource.cssClassField];\n }\n return undefined;\n };\n ResourceBase.prototype.getResourceRenderDates = function () {\n // eslint-disable-next-line prefer-spread\n var resourceDates = [].concat.apply([], this.lastResourceLevel.map(function (e) { return e.renderDates; }));\n var removeDuplicateDates = function (dateColl) { return dateColl.filter(function (date, index, dates) {\n return dates.map(function (dateObj) { return dateObj.getTime(); }).indexOf(date.getTime()) === index;\n }); };\n var renderDates = removeDuplicateDates(resourceDates);\n renderDates.sort(function (a, b) { return a.getTime() - b.getTime(); });\n return renderDates;\n };\n ResourceBase.prototype.filterData = function (dataSource, field, value) {\n return dataSource.filter(function (data) { return data[field] === value; });\n };\n ResourceBase.prototype.getResourceData = function (eventObj, index, groupEditIndex) {\n if (this.parent.activeViewOptions.group.allowGroupEdit) {\n var resourceObj = {};\n for (var _i = 0, groupEditIndex_1 = groupEditIndex; _i < groupEditIndex_1.length; _i++) {\n var groupIndex = groupEditIndex_1[_i];\n var resourceLevel = this.lastResourceLevel[groupIndex].groupOrder;\n for (var level = 0, length_3 = resourceLevel.length; level < length_3; level++) {\n var fieldName = this.resourceCollection[level].field;\n if (isNullOrUndefined(resourceObj[fieldName])) {\n resourceObj[fieldName] = [];\n }\n resourceObj[fieldName].push(resourceLevel[level]);\n }\n }\n eventObj = extend(eventObj, resourceObj);\n }\n else {\n for (var level = 0, length_4 = this.resourceCollection.length; level < length_4; level++) {\n if (this.lastResourceLevel[index]) {\n eventObj[this.resourceCollection[level].field] = this.lastResourceLevel[index].groupOrder[level];\n }\n }\n }\n };\n ResourceBase.prototype.addResource = function (resources, name, index) {\n var resourceCollection = (resources instanceof Array) ? resources : [resources];\n var _loop_3 = function (resource) {\n if (resource.name === name) {\n resourceCollection.forEach(function (addObj, i) {\n return new DataManager({ json: resource.dataSource }).insert(addObj, null, null, index + i);\n });\n return \"break\";\n }\n };\n for (var _i = 0, _a = this.parent.resourceCollection; _i < _a.length; _i++) {\n var resource = _a[_i];\n var state_1 = _loop_3(resource);\n if (state_1 === \"break\")\n break;\n }\n this.refreshLayout(true);\n };\n ResourceBase.prototype.removeResource = function (resourceId, name) {\n var resourceCollection = (resourceId instanceof Array) ? resourceId : [resourceId];\n var _loop_4 = function (resource) {\n if (resource.name === name) {\n resourceCollection.forEach(function (removeObj) {\n return new DataManager({ json: resource.dataSource }).remove(resource.idField, removeObj);\n });\n return \"break\";\n }\n };\n for (var _i = 0, _a = this.parent.resourceCollection; _i < _a.length; _i++) {\n var resource = _a[_i];\n var state_2 = _loop_4(resource);\n if (state_2 === \"break\")\n break;\n }\n this.refreshLayout(true);\n };\n ResourceBase.prototype.getIndexFromResourceId = function (id, name, resourceData, event, parentField) {\n name = name || this.parent.resourceCollection.slice(-1)[0].name;\n if (isNullOrUndefined(resourceData)) {\n resourceData = this.resourceCollection.filter(function (e) { return e.name === name; })[0];\n if (isNullOrUndefined(resourceData)) {\n return null;\n }\n }\n var resource = resourceData.dataSource.filter(function (e) {\n if (event && e[resourceData.idField] === id) {\n if (e[resourceData.groupIDField] === event[parentField]) {\n return e[resourceData.idField] === id;\n }\n return null;\n }\n else {\n return e[resourceData.idField] === id;\n }\n })[0];\n return (this.lastResourceLevel.map(function (e) { return e.resourceData; }).indexOf(resource));\n };\n ResourceBase.prototype.resourceExpand = function (id, name, hide) {\n var resource = this.parent.resourceCollection.filter(function (e) {\n if (e.name === name) {\n return e;\n }\n return null;\n })[0];\n var index = 0;\n var resourceData = resource.dataSource.filter(function (e) { return e[resource.idField] === id; })[0];\n if (!this.parent.activeViewOptions.group.byGroupID) {\n index = this.getIndexFromResourceId(id, name, resource);\n }\n else {\n index = this.lastResourceLevel.map(function (e) { return e.resourceData; }).indexOf(resourceData);\n }\n var target = this.parent.element.querySelector('.' + cls.RESOURCE_COLUMN_WRAP_CLASS + ' ' + (\"[data-group-index=\\\"\" + index + \"\\\"]\") +\n ' ' + '.' + cls.RESOURCE_TREE_ICON_CLASS);\n if (target) {\n if (target.classList.contains(cls.RESOURCE_EXPAND_CLASS) && !hide) {\n target.click();\n }\n else if (target.classList.contains(cls.RESOURCE_COLLAPSE_CLASS) && hide) {\n target.click();\n }\n }\n };\n ResourceBase.prototype.resourceScroll = function (id, name) {\n if (this.parent.isAdaptive || ['Agenda', 'MonthAgenda'].indexOf(this.parent.currentView) > -1) {\n return;\n }\n var levelName = name || this.parent.resourceCollection.slice(-1)[0].name;\n var levelIndex = this.parent.resourceCollection.length - 1;\n var resource = this.parent.resourceCollection.filter(function (e, index) {\n if (e.name === levelName) {\n levelIndex = index;\n return e;\n }\n return null;\n })[0];\n var scrollElement = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);\n var index = 0;\n if (this.parent.activeView.isTimelineView()) {\n if (!this.parent.activeViewOptions.group.byGroupID) {\n index = this.getIndexFromResourceId(id, levelName, resource);\n }\n else {\n var resourceData = resource.dataSource.filter(function (e) {\n return e[resource.idField] === id;\n })[0];\n index = this.lastResourceLevel.map(function (e) { return e.resourceData; }).indexOf(resourceData);\n }\n if (this.parent.virtualScrollModule) {\n var virtual = this.parent.element.querySelector('.' + cls.VIRTUAL_TRACK_CLASS);\n var averageRowHeight = Math.round(virtual.offsetHeight / this.expandedResources.length);\n if (this.parent.rowAutoHeight) {\n scrollElement.scrollTop = 0;\n this.parent.virtualScrollModule.virtualScrolling();\n }\n scrollElement.scrollTop = (index * averageRowHeight) - (((this.parent.virtualScrollModule.bufferCount - 1) * averageRowHeight));\n this.parent.virtualScrollModule.virtualScrolling();\n if (this.parent.rowAutoHeight) {\n var td = this.parent.element.querySelector(\".\" + cls.WORK_CELLS_CLASS + \"[data-group-index=\\\"\" + index + \"\\\"]\");\n if (td && !td.parentElement.classList.contains(cls.HIDDEN_CLASS)) {\n scrollElement.scrollTop =\n (scrollElement.scrollTop < td.offsetTop) ? td.offsetTop : scrollElement.scrollTop + td.offsetTop;\n }\n }\n else {\n scrollElement.scrollTop = (index * averageRowHeight);\n }\n }\n else {\n var td = this.parent.element.querySelector(\".\" + cls.WORK_CELLS_CLASS + \"[data-group-index=\\\"\" + index + \"\\\"]\");\n if (td && !td.parentElement.classList.contains(cls.HIDDEN_CLASS)) {\n scrollElement.scrollTop = td.offsetTop;\n }\n }\n }\n else {\n if (!this.parent.activeViewOptions.group.byGroupID) {\n index = this.getIndexFromResourceId(id, levelName, resource);\n }\n else {\n if (levelName === this.parent.resourceCollection.slice(-1)[0].name) {\n index = this.lastResourceLevel.map(function (e) { return e.resourceData[resource.idField]; }).indexOf(id);\n }\n else {\n index = resource.dataSource.map(function (e) { return e[resource.idField]; }).indexOf(id);\n }\n }\n var offsetTarget = this.parent.element.querySelector(\".\" + cls.HEADER_ROW_CLASS + \":nth-child(\" + (levelIndex + 1) + \")\");\n var offset = [].slice.call(offsetTarget.children).map(function (node) { return node.offsetLeft; });\n scrollElement.scrollLeft = offset[index];\n }\n };\n ResourceBase.prototype.destroy = function () {\n this.parent.off(events.documentClick, this.documentClick);\n if (this.treeViewObj) {\n this.treeViewObj.destroy();\n this.treeViewObj = null;\n }\n if (this.treePopup) {\n this.treePopup.destroy();\n this.treePopup = null;\n remove(this.parent.element.querySelector('.' + cls.RESOURCE_TREE_POPUP));\n remove(this.parent.element.querySelector('.' + cls.RESOURCE_TREE_POPUP_OVERLAY));\n }\n var resToolBarEle = this.parent.element.querySelector('.' + cls.RESOURCE_TOOLBAR_CONTAINER);\n if (resToolBarEle) {\n remove(resToolBarEle);\n }\n };\n return ResourceBase;\n}());\nexport { ResourceBase };\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 { Component, Property, Event, Animation, Collection, append } from '@syncfusion/ej2-base';\nimport { EventHandler, Browser, Internationalization, getDefaultDateObject, cldrData, L10n } from '@syncfusion/ej2-base';\nimport { getValue, compile, extend, isNullOrUndefined, NotifyPropertyChanges, Complex } from '@syncfusion/ej2-base';\nimport { getElement, removeClass, addClass, classList, remove } from '@syncfusion/ej2-base';\nimport { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';\nimport { HeaderRenderer } from '../renderer/header-renderer';\nimport { Scroll } from '../actions/scroll';\nimport { ScheduleTouch } from '../actions/touch';\nimport { KeyboardInteraction } from '../actions/keyboard';\nimport { Data } from '../actions/data';\nimport { EventBase } from '../event-renderer/event-base';\nimport { InlineEdit } from '../event-renderer/inline-edit';\nimport { QuickPopups } from '../popups/quick-popups';\nimport { EventTooltip } from '../popups/event-tooltip';\nimport { EventWindow } from '../popups/event-window';\nimport { Render } from '../renderer/renderer';\nimport { WorkHours } from '../models/work-hours';\nimport { TimeScale } from '../models/time-scale';\nimport { QuickInfoTemplates } from '../models/quick-info-templates';\nimport { HeaderRows } from '../models/header-rows';\nimport { Crud } from '../actions/crud';\nimport { WorkCellInteraction } from '../actions/work-cells';\nimport { EventSettings } from '../models/event-settings';\nimport { Group } from '../models/group';\nimport { Resources } from '../models/resources';\nimport { Gregorian, Islamic } from '../../common/calendar-util';\nimport { ResourceBase } from '../base/resource';\nimport { Timezone, timezoneData } from '../timezone/timezone';\nimport * as events from '../base/constant';\nimport * as cls from '../base/css-constant';\nimport * as util from '../base/util';\n/**\n * Represents the Schedule component that displays a list of events scheduled against specific date and timings,\n * thus helping us to plan and manage it properly.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar Schedule = /** @class */ (function (_super) {\n __extends(Schedule, _super);\n /**\n * Constructor for creating the Schedule widget\n *\n * @param {ScheduleModel} options Accepts the schedule model properties to initiate the rendering\n * @param {string | HTMLElement} element Accepts the DOM element reference\n */\n function Schedule(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Core method that initializes the control rendering.\n *\n * @returns {void}\n * @private\n */\n Schedule.prototype.render = function () {\n var addClasses = [];\n var removeClasses = [];\n addClasses.push(cls.ROOT);\n if (this.enableRtl) {\n addClasses.push(cls.RTL);\n }\n else {\n removeClasses.push(cls.RTL);\n }\n if (this.isAdaptive) {\n addClasses.push(cls.DEVICE_CLASS);\n }\n else {\n removeClasses.push(cls.DEVICE_CLASS);\n }\n if (this.allowMultiDrag) {\n addClasses.push(cls.MULTI_DRAG);\n }\n else {\n removeClasses.push(cls.MULTI_DRAG);\n }\n if (this.cssClass) {\n var cssClass = this.cssClass.split(' ');\n for (var _i = 0, cssClass_1 = cssClass; _i < cssClass_1.length; _i++) {\n var cls_1 = cssClass_1[_i];\n addClasses.push(cls_1);\n }\n }\n classList(this.element, addClasses, removeClasses);\n this.validateDate();\n createSpinner({ target: this.element });\n this.scrollModule = new Scroll(this);\n this.scrollModule.setWidth();\n this.scrollModule.setHeight();\n this.renderModule = new Render(this);\n this.eventBase = new EventBase(this);\n this.workCellAction = new WorkCellInteraction(this);\n if (this.allowKeyboardInteraction) {\n this.keyboardInteractionModule = new KeyboardInteraction(this);\n }\n this.inlineModule = new InlineEdit(this);\n this.initializeDataModule();\n this.renderTableContainer();\n this.activeViewOptions = this.getActiveViewOptions();\n this.initializeResources();\n this.wireEvents();\n };\n Schedule.prototype.renderTableContainer = function () {\n if (!this.element.querySelector('.' + cls.TABLE_CONTAINER_CLASS)) {\n this.element.appendChild(this.createElement('div', { className: cls.TABLE_CONTAINER_CLASS }));\n }\n };\n /**\n * Method to render react templates\n *\n * @returns {void}\n * @private\n */\n Schedule.prototype.renderTemplates = function () {\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n /**\n * Method to reset react templates\n *\n * @param {string[]} templates Accepts the template ID\n * @returns {void}\n * @private\n */\n Schedule.prototype.resetTemplates = function (templates) {\n if (this.isAngular || this.isReact) {\n this.clearTemplate(templates);\n }\n };\n Schedule.prototype.initializeResources = function (isSetModel) {\n if (isSetModel === void 0) { isSetModel = false; }\n if (this.resources.length > 0) {\n this.resourceBase = new ResourceBase(this);\n this.resourceBase.bindResourcesData(isSetModel);\n }\n else {\n this.resourceBase = null;\n this.resourceCollection = [];\n this.renderElements(isSetModel);\n }\n };\n /**\n * Method to render the layout elements\n *\n * @param {boolean} isLayoutOnly Accepts the boolean value to render layout or not\n * @returns {void}\n * @private\n */\n Schedule.prototype.renderElements = function (isLayoutOnly) {\n if (isLayoutOnly) {\n this.initializeView(this.currentView);\n this.eventWindow.refresh();\n return;\n }\n this.destroyHeaderModule();\n if (this.showHeaderBar) {\n this.headerModule = new HeaderRenderer(this);\n }\n this.renderTableContainer();\n if (Browser.isDevice || Browser.isTouch) {\n this.scheduleTouchModule = new ScheduleTouch(this);\n }\n this.initializeView(this.currentView);\n this.destroyPopups();\n if (!this.isPrinting) {\n this.initializePopups();\n }\n };\n Schedule.prototype.validateDate = function (selectedDate) {\n if (selectedDate === void 0) { selectedDate = this.selectedDate; }\n // persist the selected date value\n var date = selectedDate instanceof Date ? new Date(selectedDate.getTime()) : new Date(selectedDate);\n var minDate = this.minDate instanceof Date ? new Date(this.minDate.getTime()) : new Date(this.minDate);\n var maxDate = this.maxDate instanceof Date ? new Date(this.maxDate.getTime()) : new Date(this.maxDate);\n if (minDate <= maxDate) {\n if (date < minDate) {\n date = minDate;\n }\n if (date > maxDate) {\n date = maxDate;\n }\n this.setProperties({ selectedDate: new Date('' + date), minDate: new Date('' + minDate), maxDate: new Date('' + maxDate) }, true);\n if (this.eventWindow) {\n this.eventWindow.updateMinMaxDateToEditor();\n }\n }\n else {\n throw Error('minDate should be equal or less than maxDate');\n }\n };\n Schedule.prototype.getViewIndex = function (viewName) {\n for (var item = 0; item < this.viewCollections.length; item++) {\n var checkIndex = this.viewCollections[item].option;\n if (checkIndex === viewName) {\n return item;\n }\n }\n return -1;\n };\n Schedule.prototype.setViewOptions = function (isModuleLoad) {\n if (isModuleLoad === void 0) { isModuleLoad = false; }\n this.viewOptions = {};\n this.viewCollections = [];\n var viewName;\n var selectedView;\n var prevIndex = this.viewIndex;\n var count = 0;\n this.viewIndex = -1;\n for (var _i = 0, _a = this.views; _i < _a.length; _i++) {\n var view = _a[_i];\n var isOptions = (typeof view === 'string') ? false : true;\n if (typeof view === 'string') {\n viewName = view;\n if (this.currentView === viewName) {\n selectedView = viewName;\n this.viewIndex = count;\n }\n }\n else {\n viewName = view.option;\n if (view.isSelected) {\n selectedView = viewName;\n this.viewIndex = count;\n }\n }\n var obj = extend({ option: viewName }, isOptions ? view : {});\n var fieldViewName = viewName.charAt(0).toLowerCase() + viewName.slice(1);\n obj.cellHeaderTemplateName = obj.cellHeaderTemplate ? obj.option : '';\n obj.dateHeaderTemplateName = obj.dateHeaderTemplate ? obj.option : '';\n obj.cellTemplateName = obj.cellTemplate ? obj.option : '';\n obj.dayHeaderTemplateName = obj.dayHeaderTemplate ? obj.option : '';\n obj.monthHeaderTemplateName = obj.monthHeaderTemplate ? obj.option : '';\n obj.resourceHeaderTemplateName = obj.resourceHeaderTemplate ? obj.option : '';\n obj.headerIndentTemplateName = obj.headerIndentTemplate ? obj.option : '';\n obj.eventTemplateName = obj.eventTemplate ? obj.option : '';\n if (!isNullOrUndefined(obj.firstDayOfWeek) && obj.firstDayOfWeek === 0) {\n delete obj.firstDayOfWeek;\n }\n if (!isNullOrUndefined(obj.interval) && obj.interval === 1) {\n delete obj.interval;\n }\n this.viewCollections.push(obj);\n if (isNullOrUndefined(this.viewOptions[fieldViewName])) {\n this.viewOptions[fieldViewName] = [obj];\n }\n else {\n this.viewOptions[fieldViewName].push(obj);\n }\n count++;\n }\n if (!isModuleLoad && selectedView) {\n this.setProperties({ currentView: selectedView }, true);\n }\n if (this.viewIndex === -1) {\n var currentIndex = this.getViewIndex(this.currentView);\n this.viewIndex = ((typeof this.views[0] !== 'string') && (!isNullOrUndefined(prevIndex) && prevIndex !== -1)) ? prevIndex :\n (currentIndex === -1) ? 0 : currentIndex;\n }\n };\n Schedule.prototype.getActiveViewOptions = function () {\n var timeScale = {\n enable: this.timeScale.enable,\n interval: this.timeScale.interval,\n slotCount: this.timeScale.slotCount,\n majorSlotTemplate: this.timeScale.majorSlotTemplate,\n minorSlotTemplate: this.timeScale.minorSlotTemplate\n };\n var isYearView = this.viewCollections[this.viewIndex].option.indexOf('Year') > -1;\n var group = {\n byDate: isYearView ? false : this.group.byDate,\n byGroupID: this.group.byGroupID,\n allowGroupEdit: this.group.allowGroupEdit,\n resources: this.group.resources,\n headerTooltipTemplate: this.group.headerTooltipTemplate,\n enableCompactView: this.group.enableCompactView\n };\n var workDays = this.viewCollections[this.viewIndex].workDays ? [] : this.workDays;\n var scheduleOptions = {\n dateFormat: this.dateFormat,\n endHour: this.endHour,\n isSelected: false,\n option: null,\n readonly: this.readonly,\n startHour: this.startHour,\n allowVirtualScrolling: false,\n cellHeaderTemplate: this.cellHeaderTemplate,\n dayHeaderTemplate: this.dayHeaderTemplate,\n monthHeaderTemplate: this.monthHeaderTemplate,\n cellTemplate: this.cellTemplate,\n eventTemplate: this.eventSettings.template,\n dateHeaderTemplate: this.dateHeaderTemplate,\n resourceHeaderTemplate: this.resourceHeaderTemplate,\n headerIndentTemplate: this.headerIndentTemplate,\n firstMonthOfYear: this.firstMonthOfYear,\n firstDayOfWeek: this.firstDayOfWeek,\n workDays: workDays,\n monthsCount: this.monthsCount,\n showWeekend: this.showWeekend,\n showWeekNumber: this.showWeekNumber,\n displayName: null,\n interval: 1,\n timeScale: timeScale,\n timeFormat: this.internalTimeFormat,\n group: group,\n headerRows: this.headerRows,\n orientation: 'Horizontal'\n };\n var viewOptions = this.viewCollections[this.viewIndex];\n var viewsData = extend(scheduleOptions, viewOptions, undefined, true);\n if (this.firstDayOfWeek !== 0 && viewOptions.firstDayOfWeek && this.firstDayOfWeek !== viewOptions.firstDayOfWeek) {\n viewsData.firstDayOfWeek = this.firstDayOfWeek;\n }\n return viewsData;\n };\n Schedule.prototype.initializeDataModule = function () {\n this.eventFields = {\n id: this.eventSettings.fields.id,\n isBlock: this.eventSettings.fields.isBlock,\n subject: this.eventSettings.fields.subject.name,\n startTime: this.eventSettings.fields.startTime.name,\n endTime: this.eventSettings.fields.endTime.name,\n startTimezone: this.eventSettings.fields.startTimezone.name,\n endTimezone: this.eventSettings.fields.endTimezone.name,\n location: this.eventSettings.fields.location.name,\n description: this.eventSettings.fields.description.name,\n isAllDay: this.eventSettings.fields.isAllDay.name,\n recurrenceID: this.eventSettings.fields.recurrenceID.name,\n recurrenceRule: this.eventSettings.fields.recurrenceRule.name,\n recurrenceException: this.eventSettings.fields.recurrenceException.name,\n isReadonly: this.eventSettings.fields.isReadonly,\n followingID: this.eventSettings.fields.followingID\n };\n this.setEditorTitles();\n this.dataModule = new Data(this.eventSettings.dataSource, this.eventSettings.query);\n this.crudModule = new Crud(this);\n };\n Schedule.prototype.setEditorTitles = function () {\n this.editorTitles = {\n subject: this.eventSettings.fields.subject.title || this.localeObj.getConstant('title'),\n startTime: this.eventSettings.fields.startTime.title || this.localeObj.getConstant('start'),\n endTime: this.eventSettings.fields.endTime.title || this.localeObj.getConstant('end'),\n isAllDay: this.eventSettings.fields.isAllDay.title || this.localeObj.getConstant('allDay'),\n startTimezone: this.eventSettings.fields.startTimezone.title || this.localeObj.getConstant('startTimezone'),\n endTimezone: this.eventSettings.fields.endTimezone.title || this.localeObj.getConstant('endTimezone'),\n location: this.eventSettings.fields.location.title || this.localeObj.getConstant('location'),\n description: this.eventSettings.fields.description.title || this.localeObj.getConstant('description'),\n recurrenceRule: this.eventSettings.fields.recurrenceRule.title || this.localeObj.getConstant('repeat')\n };\n };\n Schedule.prototype.initializeView = function (viewName) {\n this.showSpinner();\n this.activeViewOptions = this.getActiveViewOptions();\n if (this.resourceBase) {\n this.resourceBase.setResourceCollection();\n }\n this.initializeTemplates();\n this.renderModule.render(viewName);\n };\n Schedule.prototype.initializeTemplates = function () {\n this.cellHeaderTemplateFn = this.templateParser(this.activeViewOptions.cellHeaderTemplate);\n this.dayHeaderTemplateFn = this.templateParser(this.activeViewOptions.dayHeaderTemplate);\n this.monthHeaderTemplateFn = this.templateParser(this.activeViewOptions.monthHeaderTemplate);\n this.cellTemplateFn = this.templateParser(this.activeViewOptions.cellTemplate);\n this.dateHeaderTemplateFn = this.templateParser(this.activeViewOptions.dateHeaderTemplate);\n this.majorSlotTemplateFn = this.templateParser(this.activeViewOptions.timeScale.majorSlotTemplate);\n this.minorSlotTemplateFn = this.templateParser(this.activeViewOptions.timeScale.minorSlotTemplate);\n this.appointmentTemplateFn = this.templateParser(this.activeViewOptions.eventTemplate);\n this.resourceHeaderTemplateFn = this.templateParser(this.activeViewOptions.resourceHeaderTemplate);\n this.headerIndentTemplateFn = this.templateParser(this.activeViewOptions.headerIndentTemplate);\n this.headerTooltipTemplateFn = this.templateParser(this.activeViewOptions.group.headerTooltipTemplate);\n this.eventTooltipTemplateFn = this.templateParser(this.eventSettings.tooltipTemplate);\n this.editorTemplateFn = this.templateParser(this.editorTemplate);\n this.quickInfoTemplatesHeaderFn = this.templateParser(this.quickInfoTemplates.header);\n this.quickInfoTemplatesContentFn = this.templateParser(this.quickInfoTemplates.content);\n this.quickInfoTemplatesFooterFn = this.templateParser(this.quickInfoTemplates.footer);\n };\n Schedule.prototype.initializePopups = function () {\n this.eventWindow = new EventWindow(this);\n this.quickPopup = new QuickPopups(this);\n };\n /**\n * Method to get day names\n *\n * @param {string} type Accepts the day name\n * @returns {string[]} Returns the collection of day names\n * @private\n */\n Schedule.prototype.getDayNames = function (type) {\n var culShortNames = [];\n var cldrObj;\n var nameSpace = '';\n if (this.locale === 'en' || this.locale === 'en-US') {\n nameSpace = 'days.stand-alone.';\n cldrObj = (getValue(nameSpace + type, getDefaultDateObject(this.getCalendarMode())));\n }\n else {\n nameSpace = 'main.' + '' + this.locale + '.dates.calendars.' + this.getCalendarMode() + '.days.format.' + type;\n cldrObj = (getValue(nameSpace, cldrData));\n }\n for (var _i = 0, _a = Object.keys(cldrObj); _i < _a.length; _i++) {\n var obj = _a[_i];\n culShortNames.push(getValue(obj, cldrObj));\n }\n return culShortNames;\n };\n Schedule.prototype.setCldrTimeFormat = function () {\n if (!isNullOrUndefined(this.timeFormat)) {\n this.internalTimeFormat = this.timeFormat;\n return;\n }\n if (this.locale === 'en' || this.locale === 'en-US') {\n this.internalTimeFormat = (getValue('timeFormats.short', getDefaultDateObject(this.getCalendarMode())));\n }\n else {\n this.internalTimeFormat = (getValue('main.' + '' + this.locale + '.dates.calendars.' + this.getCalendarMode() + '.timeFormats.short', cldrData));\n }\n };\n /**\n * Method to get calendar mode\n *\n * @returns {string} Returns the calendar mode\n * @private\n */\n Schedule.prototype.getCalendarMode = function () {\n return this.calendarMode.toLowerCase();\n };\n /**\n * Method to get time in string\n *\n * @param {Date} date Accepts the date object\n * @returns {string} Returns the time in string\n * @private\n */\n Schedule.prototype.getTimeString = function (date) {\n var time = this.globalize.formatDate(date, {\n format: this.activeViewOptions.timeFormat,\n type: 'time', calendar: this.getCalendarMode()\n });\n return time.toLocaleUpperCase();\n };\n /**\n * Method to get date object\n *\n * @param {Date} date Accepts the date object\n * @returns {Date} Returns the date object\n * @private\n */\n Schedule.prototype.getDateTime = function (date) {\n return date instanceof Date ? new Date(date.getTime()) : new Date(date);\n };\n Schedule.prototype.setCalendarMode = function () {\n if (this.calendarMode === 'Islamic') {\n this.calendarUtil = new Islamic();\n }\n else {\n this.calendarUtil = new Gregorian();\n }\n };\n /**\n * Method to change the current view\n *\n * @param {View} view Accepts the view name\n * @param {Event} event Accepts the event object\n * @param {boolean} muteOnChange Accepts the value to enable or disable mute on change\n * @param {number} index Accepts the index value\n * @returns {void}\n * @private\n */\n Schedule.prototype.changeView = function (view, event, muteOnChange, index) {\n var _this = this;\n if (isNullOrUndefined(index)) {\n index = this.getViewIndex(view);\n }\n if (!muteOnChange && index === this.viewIndex && this.currentView === view || index < 0) {\n return;\n }\n this.viewIndex = index;\n var args = { requestType: 'viewNavigate', cancel: false, event: event };\n this.trigger(events.actionBegin, args, function (actionArgs) {\n if (!actionArgs.cancel) {\n var navArgs = {\n action: 'view', cancel: false, currentDate: _this.selectedDate, previousView: _this.currentView, currentView: view, viewIndex: _this.viewIndex\n };\n _this.trigger(events.navigating, navArgs, function (navigationArgs) {\n if (!navigationArgs.cancel) {\n _this.viewIndex = navigationArgs.viewIndex;\n _this.setProperties({ currentView: view }, true);\n if (_this.headerModule) {\n _this.headerModule.updateActiveView();\n _this.headerModule.setCalendarDate(_this.selectedDate);\n _this.headerModule.setCalendarView();\n }\n _this.initializeView(_this.currentView);\n _this.animateLayout();\n args = { requestType: 'viewNavigate', cancel: false, event: event };\n _this.trigger(events.actionComplete, args);\n }\n });\n }\n });\n };\n /**\n * Method to change the view date\n *\n * @param {Date} selectedDate Accepts the selected date\n * @param {Event} event Accepts the event object\n * @returns {void}\n * @private\n */\n Schedule.prototype.changeDate = function (selectedDate, event) {\n var _this = this;\n var args = { requestType: 'dateNavigate', cancel: false, event: event };\n this.trigger(events.actionBegin, args, function (actionArgs) {\n if (!actionArgs.cancel) {\n var navArgs = {\n action: 'date', cancel: false, previousDate: _this.selectedDate, currentDate: selectedDate\n };\n _this.trigger(events.navigating, navArgs, function (navigationArgs) {\n if (!navigationArgs.cancel) {\n _this.uiStateValues.isInitial = _this.activeView.isTimelineView() ? true : _this.uiStateValues.isInitial;\n _this.validateDate(navigationArgs.currentDate);\n if (_this.headerModule) {\n _this.headerModule.setCalendarDate(navigationArgs.currentDate);\n }\n _this.initializeView(_this.currentView);\n _this.animateLayout();\n args = { requestType: 'dateNavigate', cancel: false, event: event };\n _this.trigger(events.actionComplete, args);\n }\n });\n }\n });\n };\n /**\n * Method to validate min and max date\n *\n * @param {Date} date Accepts the date object\n * @returns {boolean} Returns the boolean result to validate the min and max date\n * @private\n */\n Schedule.prototype.isMinMaxDate = function (date) {\n if (date === void 0) { date = this.selectedDate; }\n return ((date.getTime() >= this.minDate.getTime()) && (date.getTime() <= this.maxDate.getTime()));\n };\n /**\n * Method to validate the selected date\n *\n * @param {Date} date Accepts the date object\n * @returns {boolean} Returns the boolean value for given date is selected date or not\n * @private\n */\n Schedule.prototype.isSelectedDate = function (date) {\n return date.setHours(0, 0, 0, 0) === new Date('' + this.selectedDate).setHours(0, 0, 0, 0);\n };\n /**\n * Method to get the current time\n *\n * @param {Date} date Accepts the date object\n * @returns {Date} Returns the date object after performing the timezone conversion\n * @private\n */\n Schedule.prototype.getCurrentTime = function (date) {\n if (date === void 0) { date = new Date(); }\n if (this.timezone) {\n return this.tzModule.convert(date, this.tzModule.getLocalTimezoneName(), this.timezone);\n }\n return date;\n };\n /** Method to get navigate view\n *\n * @returns {View} Return the navigate view name\n * @private\n */\n Schedule.prototype.getNavigateView = function () {\n if (this.activeView.isTimelineView()) {\n return this.currentView === 'TimelineMonth' || this.currentView === 'TimelineYear' ? 'TimelineDay' : 'Agenda';\n }\n return 'Day';\n };\n Schedule.prototype.animateLayout = function () {\n if (!this.activeView.element) {\n return;\n }\n new Animation({ duration: 600, name: 'FadeIn', timingFunction: 'easeIn' }).animate(this.activeView.element);\n };\n /**\n * To provide the array of modules needed for control rendering\n *\n * @returns {ModuleDeclaration[]} Returns the declared modules\n * @private\n */\n Schedule.prototype.requiredModules = function () {\n var modules = [];\n this.setViewOptions(true);\n for (var _i = 0, _a = Object.keys(this.viewOptions); _i < _a.length; _i++) {\n var view = _a[_i];\n view = (view === 'timelineDay' || view === 'timelineWeek' || view === 'timelineWorkWeek') ? 'timelineViews' : view;\n modules.push({ member: view, args: [this] });\n }\n if (this.allowDragAndDrop) {\n modules.push({ member: 'dragAndDrop', args: [this] });\n }\n if (this.allowResizing) {\n modules.push({ member: 'resize', args: [this] });\n }\n modules.push({ member: 'excelExport', args: [this] });\n modules.push({ member: 'iCalendarExport', args: [this] });\n modules.push({ member: 'iCalendarImport', args: [this] });\n modules.push({ member: 'print', args: [this] });\n return modules;\n };\n /**\n * Initializes the values of private members.\n *\n * @returns {void}\n * @private\n */\n Schedule.prototype.preRender = function () {\n this.isAdaptive = Browser.isDevice || util.isIPadDevice();\n this.globalize = new Internationalization(this.locale);\n this.tzModule = new Timezone();\n if (this && isNullOrUndefined(this.uiStateValues) || !(this.enablePersistence)) {\n this.uiStateValues = {\n expand: false, isInitial: true, left: 0, top: 0, isGroupAdaptive: false,\n isIgnoreOccurrence: false, groupIndex: 0, action: false, isBlock: false\n };\n }\n this.activeCellsData = { startTime: this.getCurrentTime(), endTime: this.getCurrentTime(), isAllDay: false };\n this.activeEventData = { event: undefined, element: undefined };\n this.getDefaultLocale();\n this.localeObj = new L10n(this.getModuleName(), this.defaultLocale, this.locale);\n this.setCldrTimeFormat();\n this.setCalendarMode();\n this.eventsData = [];\n this.eventsProcessed = [];\n this.blockData = [];\n this.blockProcessed = [];\n this.resourceCollection = [];\n this.currentAction = null;\n this.selectedElements = [];\n this.setViewOptions();\n };\n Schedule.prototype.getDefaultLocale = function () {\n this.defaultLocale = {\n day: 'Day',\n week: 'Week',\n workWeek: 'Work Week',\n month: 'Month',\n year: 'Year',\n agenda: 'Agenda',\n weekAgenda: 'Week Agenda',\n workWeekAgenda: 'Work Week Agenda',\n monthAgenda: 'Month Agenda',\n today: 'Today',\n noEvents: 'No events',\n emptyContainer: 'There are no events scheduled on this day.',\n allDay: 'All day',\n start: 'Start',\n end: 'End',\n more: 'more',\n close: 'Close',\n cancel: 'Cancel',\n noTitle: '(No Title)',\n delete: 'Delete',\n deleteEvent: 'Delete Event',\n deleteMultipleEvent: 'Delete Multiple Events',\n selectedItems: 'Items selected',\n deleteSeries: 'Entire Series',\n edit: 'Edit',\n editSeries: 'Entire Series',\n editEvent: 'Edit Event',\n createEvent: 'Create',\n subject: 'Subject',\n addTitle: 'Add title',\n moreDetails: 'More Details',\n save: 'Save',\n editContent: 'How would you like to change the appointment in the series?',\n deleteContent: 'Are you sure you want to delete this event?',\n deleteMultipleContent: 'Are you sure you want to delete the selected events?',\n newEvent: 'New Event',\n title: 'Title',\n location: 'Location',\n description: 'Description',\n timezone: 'Timezone',\n startTimezone: 'Start Timezone',\n endTimezone: 'End Timezone',\n repeat: 'Repeat',\n saveButton: 'Save',\n cancelButton: 'Cancel',\n deleteButton: 'Delete',\n recurrence: 'Recurrence',\n wrongPattern: 'The recurrence pattern is not valid.',\n seriesChangeAlert: 'Do you want to cancel the changes made to specific ' +\n 'instances of this series and match it to the whole series again?',\n createError: 'The duration of the event must be shorter than how frequently it occurs. ' +\n 'Shorten the duration, or change the recurrence pattern in the recurrence event editor.',\n sameDayAlert: 'Two occurrences of the same event cannot occur on the same day.',\n occurenceAlert: 'Cannot reschedule an occurrence of the recurring appointment if it skips over ' +\n 'a later occurrence of the same appointment.',\n editRecurrence: 'Edit Recurrence',\n repeats: 'Repeats',\n alert: 'Alert',\n startEndError: 'The selected end date occurs before the start date.',\n invalidDateError: 'The entered date value is invalid.',\n blockAlert: 'Events cannot be scheduled within the blocked time range.',\n ok: 'Ok',\n yes: 'Yes',\n no: 'No',\n occurrence: 'Occurrence',\n series: 'Series',\n previous: 'Previous',\n next: 'Next',\n timelineDay: 'Timeline Day',\n timelineWeek: 'Timeline Week',\n timelineWorkWeek: 'Timeline Work Week',\n timelineMonth: 'Timeline Month',\n timelineYear: 'Timeline Year',\n editFollowingEvent: 'Following Events',\n deleteTitle: 'Delete Event',\n editTitle: 'Edit Event',\n beginFrom: 'Begin From',\n endAt: 'Ends At',\n expandAllDaySection: 'Expand-all-day-section',\n collapseAllDaySection: 'Collapse-all-day-section',\n searchTimezone: 'Search Timezone',\n noRecords: 'No records found'\n };\n };\n Schedule.prototype.wireEvents = function () {\n EventHandler.add(window, 'resize', this.onScheduleResize, this);\n EventHandler.add(window, 'orientationchange', this.onScheduleResize, this);\n EventHandler.add(document, Browser.touchStartEvent, this.onDocumentClick, this);\n };\n /**\n * Method to remove selected class\n *\n * @returns {void}\n * @private\n */\n Schedule.prototype.removeSelectedClass = function () {\n var selectedCells = this.getSelectedElements();\n for (var _i = 0, selectedCells_1 = selectedCells; _i < selectedCells_1.length; _i++) {\n var cell = selectedCells_1[_i];\n cell.setAttribute('aria-selected', 'false');\n cell.removeAttribute('tabindex');\n }\n removeClass(selectedCells, cls.SELECTED_CELL_CLASS);\n };\n /**\n * Method to add selected class\n *\n * @param {HTMLTableCellElement[]} cells Accepts the collection of elements\n * @param {HTMLTableCellElement} focusCell Accepts the focus element\n * @param {boolean} isPreventScroll Accepts the boolean value to prevent scroll\n * @returns {void}\n * @private\n */\n Schedule.prototype.addSelectedClass = function (cells, focusCell, isPreventScroll) {\n for (var _i = 0, cells_1 = cells; _i < cells_1.length; _i++) {\n var cell = cells_1[_i];\n cell.setAttribute('aria-selected', 'true');\n }\n addClass(cells, cls.SELECTED_CELL_CLASS);\n if (focusCell) {\n focusCell.setAttribute('tabindex', '0');\n focusCell.focus({ preventScroll: isPreventScroll || false });\n }\n };\n /**\n * Method to select cell\n *\n * @param {HTMLElement | HTMLTableCellElement} element Accepts the select element\n * @returns {void}\n * @private\n */\n Schedule.prototype.selectCell = function (element) {\n this.removeSelectedClass();\n this.addSelectedClass([element], element);\n };\n /**\n * Method to get all day row element\n *\n * @returns {Element} Returns the all day row element\n * @private\n */\n Schedule.prototype.getAllDayRow = function () {\n return this.element.querySelector('.' + cls.ALLDAY_ROW_CLASS);\n };\n /**\n * Method to get content table element\n *\n * @returns {HTMLElement} Returns the content table element\n * @private\n */\n Schedule.prototype.getContentTable = function () {\n return this.activeView.element.querySelector('.' + cls.CONTENT_TABLE_CLASS + ' tbody');\n };\n /**\n * Method to get all content table rows\n *\n * @returns {HTMLElement[]} Returns the content table rows\n * @private\n */\n Schedule.prototype.getTableRows = function () {\n return [].slice.call(this.element.querySelectorAll('.' + cls.CONTENT_TABLE_CLASS + ' tbody tr:not(.' + cls.HIDDEN_CLASS + ')'));\n };\n /**\n * Method to get work cell elements\n *\n * @returns {Element[]} Returns the all work cell elements\n * @private\n */\n Schedule.prototype.getWorkCellElements = function () {\n return [].slice.call(this.element.querySelectorAll('.' + cls.WORK_CELLS_CLASS));\n };\n /**\n * Method to get the index from date collection\n *\n * @param {Date[]} collection Accepts the collections of date\n * @param {Date} date Accepts the date object\n * @returns {number} Returns the index compared date with date collections\n * @private\n */\n Schedule.prototype.getIndexOfDate = function (collection, date) {\n return collection.map(Number).indexOf(+date);\n };\n /**\n * Method to find all day cell\n *\n * @param {Element} td Accepts the DOM Element\n * @returns {boolean} Returns the boolean value\n * @private\n */\n Schedule.prototype.isAllDayCell = function (td) {\n if (['Month', 'TimelineMonth', 'TimelineYear', 'MonthAgenda'].indexOf(this.currentView) > -1 ||\n td.classList.contains(cls.ALLDAY_CELLS_CLASS) ||\n td.classList.contains(cls.HEADER_CELLS_CLASS) || !this.activeViewOptions.timeScale.enable) {\n return true;\n }\n if (this.activeView.isTimelineView() && this.activeViewOptions.headerRows.length > 0 &&\n this.activeViewOptions.headerRows.slice(-1)[0].option !== 'Hour') {\n return true;\n }\n return false;\n };\n /**\n * Method to get date from element\n *\n * @param {Element} td Accepts the DOM element\n * @returns {Date} Returns the date object\n * @private\n */\n Schedule.prototype.getDateFromElement = function (td) {\n var dateString;\n if (!isNullOrUndefined(td)) {\n dateString = td.getAttribute('data-date');\n }\n if (!isNullOrUndefined(dateString)) {\n var dateInMS = parseInt(dateString, 10);\n var date = new Date(dateInMS);\n return date;\n }\n return undefined;\n };\n /**\n * Method to get target element from given selector\n *\n * @param {string} selector Accepts the element selector\n * @param {number} left Accepts the pageX value\n * @param {number} top Accepts the pageY value\n * @returns {Element[]} Returns the collection of elements based on the given selector\n * @private\n */\n Schedule.prototype.getTargetElement = function (selector, left, top) {\n var element = document.elementFromPoint(left, top);\n var targetElement;\n if (element) {\n targetElement = element.closest(selector);\n }\n return (targetElement) ? [targetElement] : null;\n };\n /**\n * Method to process cell header template\n *\n * @returns {CallbackFunction} Returns the callback function\n * @private\n */\n Schedule.prototype.getCellHeaderTemplate = function () {\n return this.cellHeaderTemplateFn;\n };\n /**\n * Method to process cell header template in year view.\n *\n * @returns {CallbackFunction} Returns the callback function\n * @private\n */\n Schedule.prototype.getDayHeaderTemplate = function () {\n return this.dayHeaderTemplateFn;\n };\n /**\n * Method to process cell header template in year view.\n *\n * @returns {CallbackFunction} Returns the callback function\n * @private\n */\n Schedule.prototype.getMonthHeaderTemplate = function () {\n return this.monthHeaderTemplateFn;\n };\n /**\n * Method to process cell template\n *\n * @returns {CallbackFunction} Returns the callback function\n * @private\n */\n Schedule.prototype.getCellTemplate = function () {\n return this.cellTemplateFn;\n };\n /**\n * Method to process date header template\n *\n * @returns {CallbackFunction} Returns the callback function\n * @private\n */\n Schedule.prototype.getDateHeaderTemplate = function () {\n return this.dateHeaderTemplateFn;\n };\n /**\n * Method to process major slot template\n *\n * @returns {CallbackFunction} Returns the callback function\n * @private\n */\n Schedule.prototype.getMajorSlotTemplate = function () {\n return this.majorSlotTemplateFn;\n };\n /**\n * Method to process minor slot template\n *\n * @returns {CallbackFunction} Returns the callback function\n * @private\n */\n Schedule.prototype.getMinorSlotTemplate = function () {\n return this.minorSlotTemplateFn;\n };\n /**\n * Method to process appointment template\n *\n * @returns {CallbackFunction} Returns the callback function\n * @private\n */\n Schedule.prototype.getAppointmentTemplate = function () {\n return this.appointmentTemplateFn;\n };\n /**\n * Method to process appointment tooltip template\n *\n * @returns {CallbackFunction} Returns the callback function\n * @private\n */\n Schedule.prototype.getEventTooltipTemplate = function () {\n return this.eventTooltipTemplateFn;\n };\n /**\n * Method to process header tooltip template\n *\n * @returns {CallbackFunction} Returns the callback function\n * @private\n */\n Schedule.prototype.getHeaderTooltipTemplate = function () {\n return this.headerTooltipTemplateFn;\n };\n /**\n * Method to process editor template\n *\n * @returns {CallbackFunction} Returns the callback function\n * @private\n */\n Schedule.prototype.getEditorTemplate = function () {\n return this.editorTemplateFn;\n };\n /**\n * Method to process quick info header template\n *\n * @returns {CallbackFunction} Returns the callback function\n * @private\n */\n Schedule.prototype.getQuickInfoTemplatesHeader = function () {\n return this.quickInfoTemplatesHeaderFn;\n };\n /**\n * Method to process quick info content template\n *\n * @returns {CallbackFunction} Returns the callback function\n * @private\n */\n Schedule.prototype.getQuickInfoTemplatesContent = function () {\n return this.quickInfoTemplatesContentFn;\n };\n /**\n * Method to process quick info footer template\n *\n * @returns {CallbackFunction} Returns the callback function\n * @private\n */\n Schedule.prototype.getQuickInfoTemplatesFooter = function () {\n return this.quickInfoTemplatesFooterFn;\n };\n /**\n * Method to process resource header template\n *\n * @returns {CallbackFunction} Returns the callback function\n * @private\n */\n Schedule.prototype.getResourceHeaderTemplate = function () {\n return this.resourceHeaderTemplateFn;\n };\n /**\n * Method to process indent template\n *\n * @returns {CallbackFunction} Returns the callback function\n * @private\n */\n Schedule.prototype.getHeaderIndentTemplate = function () {\n return this.headerIndentTemplateFn;\n };\n /**\n * Method to get dynamic CSS properties\n *\n * @returns {ScrollCss} Returns the CSS properties dynamically\n * @private\n */\n Schedule.prototype.getCssProperties = function () {\n var cssProps = {\n border: this.enableRtl ? 'borderLeftWidth' : 'borderRightWidth',\n padding: this.enableRtl ? 'paddingLeft' : 'paddingRight',\n rtlBorder: this.enableRtl ? 'borderRightWidth' : 'borderLeftWidth',\n rtlPadding: this.enableRtl ? 'paddingRight' : 'paddingLeft'\n };\n return cssProps;\n };\n /**\n * Method to remove new event element in adaptive mode\n *\n * @returns {void}\n * @private\n */\n Schedule.prototype.removeNewEventElement = function () {\n var eventClone = this.element.querySelector('.' + cls.NEW_EVENT_CLASS);\n if (!isNullOrUndefined(eventClone)) {\n remove(eventClone);\n }\n };\n /**\n * Method to get start end time from string\n *\n * @param {string} startEndTime Accepts the start end time string value\n * @returns {Date} Returns the date object\n * @private\n */\n Schedule.prototype.getStartEndTime = function (startEndTime) {\n if (!isNullOrUndefined(startEndTime) && startEndTime !== '') {\n var startEndDate = util.resetTime(this.getCurrentTime());\n var timeString = startEndTime.split(':');\n if (timeString.length === 2) {\n startEndDate.setHours(parseInt(timeString[0], 10), parseInt(timeString[1], 10), 0);\n }\n return startEndDate;\n }\n return null;\n };\n Schedule.prototype.onDocumentClick = function (args) {\n this.notify(events.documentClick, { event: args });\n };\n Schedule.prototype.onScheduleResize = function () {\n if (isNullOrUndefined(this.activeView) || ((this.isAdaptive || util.isMobile()) && document.activeElement\n && document.activeElement.classList.contains(cls.SUBJECT_CLASS))) {\n return;\n }\n if (this.activeViewOptions.timeScale.enable && this.activeView) {\n this.activeView.highlightCurrentTime();\n }\n if (this.quickPopup) {\n this.quickPopup.onClosePopup();\n }\n if (this.currentView === 'Month' || ((this.currentView !== 'Agenda' && this.currentView !== 'MonthAgenda')\n && !this.activeViewOptions.timeScale.enable) || this.activeView.isTimelineView()) {\n this.activeView.resetColWidth();\n this.notify(events.scrollUiUpdate, { cssProperties: this.getCssProperties(), isPreventScrollUpdate: true });\n this.refreshEvents(false);\n }\n else {\n this.notify(events.contentReady, {});\n }\n };\n /**\n * Method to process the templates\n *\n * @param {string} template Accepts the template in string\n * @returns {CallbackFunction} Returns the callback function\n * @private\n */\n Schedule.prototype.templateParser = function (template) {\n if (template) {\n try {\n if (document.querySelectorAll(template).length) {\n return compile(document.querySelector(template).innerHTML.trim());\n }\n }\n catch (error) {\n return compile(template);\n }\n }\n return undefined;\n };\n /**\n * Method to generate the announcement string\n *\n * @param {Object} event Accepts the event object\n * @param {string} subject Accepts the subject text\n * @returns {string} Returns the announcement string\n * @private\n */\n Schedule.prototype.getAnnouncementString = function (event, subject) {\n var resourceName;\n if (this.quickPopup && this.activeViewOptions.group.resources.length > 0) {\n var constantText = '\"s event - ';\n resourceName = this.quickPopup.getResourceText({ event: event }, 'event') + constantText;\n }\n var recordSubject = (subject || (event[this.eventFields.subject] || this.eventSettings.fields.subject.default));\n var skeleton = 'full';\n var startDateText = this.globalize.formatDate(event[this.eventFields.startTime], {\n type: 'dateTime', skeleton: skeleton, calendar: this.getCalendarMode()\n });\n var endDateText = this.globalize.formatDate(event[this.eventFields.endTime], {\n type: 'dateTime', skeleton: skeleton, calendar: this.getCalendarMode()\n });\n var announcementString = recordSubject + ' ' + this.localeObj.getConstant('beginFrom') + ' '\n + startDateText + ' ' + this.localeObj.getConstant('endAt') + ' ' + endDateText;\n if (resourceName) {\n announcementString = resourceName + ' ' + announcementString;\n }\n return announcementString;\n };\n /**\n * Method to process the element boundary validation\n *\n * @param {number} pageY Accepts the pageY value\n * @param {number} pageX Accepts the pageX value\n * @returns {ResizeEdges} Returns the boundary validation object\n * @private\n */\n Schedule.prototype.boundaryValidation = function (pageY, pageX) {\n var autoScrollDistance = 30;\n var scrollEdges = { left: false, right: false, top: false, bottom: false };\n var viewBoundaries = this.element.querySelector('.' + cls.CONTENT_WRAP_CLASS).getBoundingClientRect();\n if ((pageY < viewBoundaries.top + autoScrollDistance + window.pageYOffset) &&\n (pageY > viewBoundaries.top + window.pageYOffset)) {\n scrollEdges.top = true;\n }\n if ((pageY > (viewBoundaries.bottom - autoScrollDistance) + window.pageYOffset) &&\n (pageY < viewBoundaries.bottom + window.pageYOffset)) {\n scrollEdges.bottom = true;\n }\n if ((pageX < viewBoundaries.left + autoScrollDistance + window.pageXOffset) &&\n (pageX > viewBoundaries.left + window.pageXOffset)) {\n scrollEdges.left = true;\n }\n if ((pageX > (viewBoundaries.right - autoScrollDistance) + window.pageXOffset) &&\n (pageX < viewBoundaries.right + window.pageXOffset)) {\n scrollEdges.right = true;\n }\n return scrollEdges;\n };\n /**\n * Method to get the week number.\n *\n * @param {Date[]} dates Accepts the date collections\n * @returns {number} Returns the week number\n * @private\n */\n Schedule.prototype.getWeekNumberContent = function (dates) {\n var weekNumber;\n if (this.weekRule === 'FirstDay') {\n var weekNumberDate = util.getWeekLastDate(dates.slice(-1)[0], this.firstDayOfWeek);\n weekNumber = this.globalize.formatNumber(util.getWeekNumber(weekNumberDate));\n }\n else if (this.weekRule === 'FirstFourDayWeek') {\n var weekFirstDate = util.getWeekFirstDate(dates.slice(-1)[0], this.firstDayOfWeek);\n var weekLastDate = util.getWeekLastDate(dates.slice(-1)[0], this.firstDayOfWeek);\n var weekMidDate = util.getWeekMiddleDate(weekFirstDate, weekLastDate);\n weekNumber = this.globalize.formatNumber(util.getWeekNumber(weekMidDate));\n }\n else if (this.weekRule === 'FirstFullWeek') {\n var weekFirstDate = util.getWeekFirstDate(dates.slice(-1)[0], this.firstDayOfWeek);\n weekNumber = this.globalize.formatNumber(util.getWeekNumber(weekFirstDate));\n }\n return weekNumber;\n };\n /**\n * Method to render the header indent template.\n *\n * @param {TdData} data Accepts the td data\n * @param {Element} td Accepts the td element\n * @returns {void}\n * @private\n */\n Schedule.prototype.renderHeaderIndentTemplate = function (data, td) {\n if (this.activeViewOptions.headerIndentTemplate) {\n var scheduleId = this.element.id + '_';\n var viewName = this.activeViewOptions.headerIndentTemplateName;\n var templateId = scheduleId + viewName + 'headerIndentTemplate';\n var indentTemplate = [].slice.call(this.getHeaderIndentTemplate()(data, this, 'headerIndentTemplate', templateId, false));\n append(indentTemplate, td);\n }\n };\n Schedule.prototype.unWireEvents = function () {\n EventHandler.remove(window, 'resize', this.onScheduleResize);\n EventHandler.remove(window, 'orientationchange', this.onScheduleResize);\n EventHandler.remove(document, Browser.touchStartEvent, this.onDocumentClick);\n };\n /**\n * Core method to return the component name.\n *\n * @returns {string} Returns the module name\n * @private\n */\n Schedule.prototype.getModuleName = function () {\n return 'schedule';\n };\n /**\n * Returns the properties to be maintained in the persisted state.\n *\n * @returns {string} Returns the persistance data\n * @private\n */\n Schedule.prototype.getPersistData = function () {\n return this.addOnPersist(['currentView', 'selectedDate', 'scrollTop', 'scrollLeft']);\n };\n /**\n * Called internally, if any of the property value changed.\n *\n * @returns {void}\n * @private\n */\n Schedule.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (this.isReact && isNullOrUndefined(this.activeView)) {\n return;\n }\n var state = {\n isRefresh: false, isResource: false, isDate: false, isView: false, isLayout: false, isDataManager: false\n };\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'views':\n this.setViewOptions();\n if (this.headerModule) {\n this.headerModule.updateItems();\n }\n state.isView = true;\n break;\n case 'currentView':\n state.isView = true;\n break;\n case 'minDate':\n case 'maxDate':\n case 'selectedDate':\n state.isDate = true;\n break;\n case 'dateFormat':\n this.activeViewOptions = this.getActiveViewOptions();\n if (this.headerModule) {\n this.headerModule.updateDateRange(this.activeView.getDateRangeText());\n }\n break;\n case 'showHeaderBar':\n this.destroyHeaderModule();\n if (newProp.showHeaderBar) {\n this.headerModule = new HeaderRenderer(this);\n this.headerModule.updateDateRange(this.activeView.getDateRangeText());\n }\n this.notify(events.scrollUiUpdate, { cssProperties: this.getCssProperties() });\n if (this.activeView.isTimelineView()) {\n this.refreshEvents(false);\n }\n break;\n case 'showWeekend':\n case 'workDays':\n case 'startHour':\n case 'endHour':\n case 'workHours':\n case 'readonly':\n case 'headerRows':\n case 'showWeekNumber':\n case 'rowAutoHeight':\n state.isLayout = true;\n break;\n case 'locale':\n case 'calendarMode':\n this.globalize = new Internationalization(this.locale);\n this.localeObj = new L10n(this.getModuleName(), this.defaultLocale, this.locale);\n this.setCldrTimeFormat();\n this.setCalendarMode();\n state.isRefresh = true;\n break;\n case 'firstDayOfWeek':\n this.activeViewOptions.firstDayOfWeek = newProp.firstDayOfWeek;\n if (this.eventWindow) {\n this.eventWindow.refreshRecurrenceEditor();\n }\n state.isLayout = true;\n break;\n case 'showTimeIndicator':\n if (this.activeViewOptions.timeScale.enable && this.activeView) {\n this.activeView.highlightCurrentTime();\n }\n break;\n case 'cellHeaderTemplate':\n this.activeViewOptions.cellHeaderTemplate = newProp.cellHeaderTemplate;\n this.cellHeaderTemplateFn = this.templateParser(this.activeViewOptions.cellHeaderTemplate);\n state.isLayout = true;\n break;\n case 'cellTemplate':\n this.activeViewOptions.cellTemplate = newProp.cellTemplate;\n this.cellTemplateFn = this.templateParser(this.activeViewOptions.cellTemplate);\n state.isLayout = true;\n break;\n case 'dateHeaderTemplate':\n this.activeViewOptions.dateHeaderTemplate = newProp.dateHeaderTemplate;\n this.dateHeaderTemplateFn = this.templateParser(this.activeViewOptions.dateHeaderTemplate);\n state.isLayout = true;\n break;\n case 'dayHeaderTemplate':\n this.activeViewOptions.dayHeaderTemplate = newProp.dayHeaderTemplate;\n this.dayHeaderTemplateFn = this.templateParser(this.activeViewOptions.dayHeaderTemplate);\n state.isLayout = true;\n break;\n case 'monthHeaderTemplate':\n this.activeViewOptions.monthHeaderTemplate = newProp.monthHeaderTemplate;\n this.monthHeaderTemplateFn = this.templateParser(this.activeViewOptions.monthHeaderTemplate);\n state.isLayout = true;\n break;\n case 'resourceHeaderTemplate':\n this.activeViewOptions.resourceHeaderTemplate = newProp.resourceHeaderTemplate;\n this.resourceHeaderTemplateFn = this.templateParser(this.activeViewOptions.resourceHeaderTemplate);\n state.isLayout = true;\n break;\n case 'timezone':\n this.eventBase.timezonePropertyChange(oldProp.timezone);\n this.headerModule.setCalendarTimezone();\n break;\n case 'enableRtl':\n this.setRtlClass();\n state.isRefresh = true;\n break;\n default:\n this.extendedPropertyChange(prop, newProp, oldProp, state);\n break;\n }\n }\n this.propertyChangeAction(state);\n };\n Schedule.prototype.propertyChangeAction = function (state) {\n if (state.isRefresh) {\n this.refresh();\n }\n else if (state.isResource) {\n this.initializeResources(true);\n }\n else if (state.isView) {\n this.changeView(this.currentView, null, true);\n }\n else if (state.isDate) {\n this.changeDate(this.selectedDate);\n }\n else if (state.isLayout) {\n this.initializeView(this.currentView);\n }\n else if (state.isDataManager && this.crudModule) {\n if (this.dragAndDropModule) {\n this.dragAndDropModule.actionObj.action = '';\n removeClass([this.element], cls.EVENT_ACTION_CLASS);\n }\n this.crudModule.refreshDataManager();\n }\n };\n Schedule.prototype.allDayRowScrollUpdate = function () {\n var dateHeader = this.element.querySelector('.' + cls.DATE_HEADER_WRAP_CLASS);\n var allDayRow = this.element.querySelector('.' + cls.ALLDAY_ROW_CLASS);\n if (this.height === 'auto' || !this.enableAllDayScroll) {\n addClass([dateHeader], cls.ALLDAY_APPOINTMENT_AUTO);\n if (dateHeader.classList.contains(cls.ALLDAY_APPOINTMENT_SCROLL)) {\n removeClass([dateHeader], cls.ALLDAY_APPOINTMENT_SCROLL);\n }\n if (this.uiStateValues.expand) {\n var allDayCells = [].slice.call(this.element.querySelectorAll('.' + cls.ALLDAY_CELLS_CLASS));\n allDayCells[0].style.height = (allDayRow.style.height) ? allDayRow.style.height : allDayCells[1].style.height;\n }\n }\n else {\n if (dateHeader.classList.contains(cls.ALLDAY_APPOINTMENT_AUTO)) {\n removeClass([dateHeader], cls.ALLDAY_APPOINTMENT_AUTO);\n }\n this.eventBase.allDayExpandScroll(dateHeader, true);\n }\n if (!this.uiStateValues.expand) {\n allDayRow.style.height = '';\n }\n };\n Schedule.prototype.extendedPropertyChange = function (prop, newProp, oldProp, state) {\n switch (prop) {\n case 'width':\n case 'height':\n case 'enableAllDayScroll':\n if (['Day', 'Week', 'WorkWeek'].indexOf(this.currentView) > -1) {\n this.allDayRowScrollUpdate();\n }\n this.notify(events.uiUpdate, { module: 'scroll', properties: { width: newProp.width, height: newProp.height } });\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 'hideEmptyAgendaDays':\n case 'agendaDaysCount':\n this.activeViewOptions = this.getActiveViewOptions();\n state.isView = true;\n break;\n case 'eventSettings':\n this.onEventSettingsPropertyChanged(newProp.eventSettings, oldProp.eventSettings, state);\n break;\n case 'allowKeyboardInteraction':\n if (this.keyboardInteractionModule) {\n this.keyboardInteractionModule.destroy();\n this.keyboardInteractionModule = null;\n }\n if (newProp.allowKeyboardInteraction) {\n this.keyboardInteractionModule = new KeyboardInteraction(this);\n }\n break;\n case 'timezoneDataSource':\n if (this.eventWindow) {\n this.eventWindow.refresh();\n }\n break;\n case 'editorTemplate':\n if (!isNullOrUndefined(this.editorTemplate)) {\n this.editorTemplateFn = this.templateParser(this.editorTemplate);\n }\n if (this.eventWindow) {\n this.eventWindow.setDialogContent();\n }\n break;\n case 'quickInfoTemplates':\n if (this.quickInfoTemplates.header) {\n this.quickInfoTemplatesHeaderFn = this.templateParser(this.quickInfoTemplates.header);\n }\n if (this.quickInfoTemplates.content) {\n this.quickInfoTemplatesContentFn = this.templateParser(this.quickInfoTemplates.content);\n }\n if (this.quickInfoTemplates.footer) {\n this.quickInfoTemplatesFooterFn = this.templateParser(this.quickInfoTemplates.footer);\n }\n break;\n case 'group':\n this.onGroupSettingsPropertyChanged(newProp.group, oldProp.group, state);\n break;\n case 'resources':\n state.isResource = true;\n break;\n case 'timeScale':\n this.activeViewOptions.timeScale.interval = newProp.timeScale.interval || this.activeViewOptions.timeScale.interval;\n this.activeViewOptions.timeScale.slotCount = newProp.timeScale.slotCount || this.activeViewOptions.timeScale.slotCount;\n if (this.eventWindow) {\n this.eventWindow.refreshDateTimePicker();\n }\n state.isLayout = true;\n break;\n case 'allowDragAndDrop':\n case 'allowResizing':\n case 'eventDragArea':\n this.refreshEvents(false);\n break;\n case 'weekRule':\n state.isLayout = true;\n break;\n case 'firstMonthOfYear':\n this.activeViewOptions.firstMonthOfYear = newProp.firstMonthOfYear;\n this.viewIndex = this.activeView.viewIndex;\n state.isLayout = true;\n break;\n case 'monthsCount':\n this.activeViewOptions.monthsCount = newProp.monthsCount;\n this.viewIndex = this.activeView.viewIndex;\n state.isLayout = true;\n break;\n case 'timeFormat':\n this.internalTimeFormat = newProp.timeFormat || this.activeViewOptions.timeFormat;\n if (this.eventWindow) {\n this.eventWindow.refreshDateTimePicker();\n }\n state.isLayout = true;\n break;\n case 'enableAdaptiveUI':\n if (this.showHeaderBar && this.headerModule) {\n this.destroyHeaderModule();\n this.headerModule = new HeaderRenderer(this);\n this.headerModule.updateDateRange(this.activeView.getDateRangeText());\n }\n state.isLayout = true;\n break;\n case 'headerIndentTemplate':\n this.activeViewOptions.headerIndentTemplate = newProp.headerIndentTemplate;\n this.headerIndentTemplateFn = this.templateParser(this.activeViewOptions.headerIndentTemplate);\n state.isLayout = true;\n break;\n }\n };\n Schedule.prototype.setRtlClass = function () {\n if (this.enableRtl) {\n addClass([this.element], 'e-rtl');\n }\n else {\n removeClass([this.element], 'e-rtl');\n }\n };\n Schedule.prototype.onGroupSettingsPropertyChanged = function (newProp, oldProp, state) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n if (prop === 'headerTooltipTemplate') {\n this.headerTooltipTemplateFn = this.templateParser(newProp[prop]);\n }\n else {\n state.isLayout = true;\n if (this.eventWindow) {\n this.eventWindow.refresh();\n }\n }\n }\n };\n Schedule.prototype.onEventSettingsPropertyChanged = function (newProp, oldProp, state) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'dataSource':\n case 'query':\n case 'fields':\n this.initializeDataModule();\n state.isDataManager = true;\n break;\n case 'template':\n this.activeViewOptions.eventTemplate = newProp.template;\n this.appointmentTemplateFn = this.templateParser(this.activeViewOptions.eventTemplate);\n state.isDataManager = true;\n break;\n case 'enableTooltip':\n if (this.eventTooltip) {\n this.eventTooltip.destroy();\n this.eventTooltip = null;\n }\n if (newProp.enableTooltip) {\n this.eventTooltip = new EventTooltip(this);\n }\n break;\n case 'tooltipTemplate':\n this.eventTooltipTemplateFn = this.templateParser(this.eventSettings.tooltipTemplate);\n break;\n case 'resourceColorField':\n if (this.resourceBase) {\n this.resourceBase.setResourceCollection();\n }\n state.isDataManager = true;\n break;\n case 'editFollowingEvents':\n if (this.quickPopup) {\n this.quickPopup.refreshQuickDialog();\n }\n break;\n case 'allowAdding':\n case 'allowEditing':\n case 'allowDeleting':\n if (this.showHeaderBar && this.headerModule) {\n this.headerModule.updateAddIcon();\n }\n if (this.eventWindow) {\n this.eventWindow.refresh();\n }\n break;\n case 'spannedEventPlacement':\n case 'enableMaxHeight':\n case 'enableIndicator':\n this.refreshEvents(false);\n break;\n case 'ignoreWhitespace':\n state.isLayout = true;\n break;\n }\n }\n };\n Schedule.prototype.destroyHeaderModule = function () {\n if (this.headerModule) {\n this.headerModule.destroy();\n this.headerModule = null;\n }\n };\n Schedule.prototype.destroyPopups = function () {\n if (this.quickPopup) {\n this.quickPopup.destroy();\n this.quickPopup = null;\n }\n if (this.eventWindow) {\n this.eventWindow.destroy();\n this.eventWindow = null;\n }\n };\n /**\n * Allows to show the spinner on schedule at the required scenarios.\n *\n * @function showSpinner\n * @returns {void}\n */\n Schedule.prototype.showSpinner = function () {\n showSpinner(this.element);\n };\n /**\n * When the spinner is shown manually using `showSpinner` method, it can be hidden using this `hideSpinner` method.\n *\n * @function hideSpinner\n * @returns {void}\n */\n Schedule.prototype.hideSpinner = function () {\n hideSpinner(this.element);\n };\n /**\n * Sets different working hours on the required working days by accepting the required start and end time as well as the date collection\n * as its parameters.\n *\n * @function setWorkHours\n * @param {Date} dates Collection of dates on which the given start and end hour range needs to be applied.\n * @param {string} start Defines the work start hour.\n * @param {string} end Defines the work end hour.\n * @param {number} groupIndex Defines the resource index from last level.\n * @returns {void}\n */\n Schedule.prototype.setWorkHours = function (dates, start, end, groupIndex) {\n var cells = [];\n cells = this.getWorkHourCells(dates, start, end, groupIndex);\n addClass(cells, cls.WORK_HOURS_CLASS);\n };\n /**\n * Removes or resets different working hours on the required working days by accepting the required start and end time as well as the\n * date collection as its parameters.\n * if no parameters has been passed to this function, it will remove all the work hours.\n *\n * @param {Date} dates Collection of dates on which the given start and end hour range need to be applied.\n * @param {string} start Defines the work start hour.\n * @param {string} end Defines the work end hour.\n * @param {number} groupIndex Defines the resource index from last level.\n * @returns {void}\n */\n Schedule.prototype.resetWorkHours = function (dates, start, end, groupIndex) {\n if (dates === void 0) { dates = this.activeView.renderDates; }\n if (dates && start && end) {\n var cells = this.getWorkHourCells(dates, start, end, groupIndex);\n removeClass(cells, cls.WORK_HOURS_CLASS);\n }\n else {\n var workHourCells = [].slice.call(this.element.querySelectorAll('.' + cls.WORK_HOURS_CLASS));\n removeClass(workHourCells, cls.WORK_HOURS_CLASS);\n }\n };\n Schedule.prototype.getWorkHourCells = function (dates, start, end, groupIndex) {\n if (['Agenda', 'MonthAgenda', 'Month', 'TimelineMonth'].indexOf(this.currentView) > -1) {\n return [];\n }\n var startHour = this.getStartEndTime(start);\n var endHour = this.getStartEndTime(end);\n var tableEle = this.getContentTable();\n if (isNullOrUndefined(startHour) || isNullOrUndefined(endHour) || !tableEle) {\n return [];\n }\n startHour.setMilliseconds(0);\n endHour.setMilliseconds(0);\n var viewStartHour = this.activeView.getStartHour();\n if (startHour < viewStartHour) {\n startHour = viewStartHour;\n }\n var viewEndHour = this.activeView.getEndHour();\n if (endHour > viewEndHour) {\n endHour = viewEndHour;\n }\n var msMajorInterval = this.activeViewOptions.timeScale.interval * util.MS_PER_MINUTE;\n var msInterval = msMajorInterval / this.activeViewOptions.timeScale.slotCount;\n var startIndex = Math.round((startHour.getTime() - viewStartHour.getTime()) / msInterval);\n var endIndex = Math.ceil((endHour.getTime() - viewStartHour.getTime()) / msInterval);\n var tempStartIndex = startIndex;\n var tempEndIndex = endIndex;\n var cells = [];\n for (var _i = 0, dates_1 = dates; _i < dates_1.length; _i++) {\n var date = dates_1[_i];\n date = this.getDateTime(date);\n util.resetTime(date);\n var renderDates = this.activeView.renderDates;\n if (!isNullOrUndefined(groupIndex) && this.resourceBase && !this.activeView.isTimelineView()) {\n renderDates = this.resourceBase.lastResourceLevel[groupIndex].renderDates;\n }\n var colIndex = this.getIndexOfDate(renderDates, date);\n if (colIndex >= 0) {\n if (this.activeView.isTimelineView()) {\n var slotsPerDay = Math.round((viewEndHour.getTime() - viewStartHour.getTime()) / msInterval);\n startIndex = tempStartIndex + (colIndex * slotsPerDay);\n endIndex = tempEndIndex + (colIndex * slotsPerDay);\n }\n for (var i = startIndex; i < endIndex; i++) {\n if (this.activeView.isTimelineView()) {\n var rowIndex = (!isNullOrUndefined(groupIndex)) ? groupIndex : 0;\n cells.push(tableEle.rows[rowIndex].cells[i]);\n }\n else {\n if (!isNullOrUndefined(groupIndex)) {\n var selector = '.' + cls.WORK_CELLS_CLASS + '[data-group-index=\"' + groupIndex + '\"]';\n var tds = [].slice.call(tableEle.rows[i].querySelectorAll(selector));\n cells.push(tds[colIndex]);\n }\n else {\n cells.push(tableEle.rows[i].cells[colIndex]);\n }\n }\n }\n }\n }\n return cells;\n };\n /**\n * Retrieves the start and end time information of the specific cell element.\n *\n * @function getCellDetails\n * @param {Element | Element[]} tdCol Accepts the single or collection of elements.\n * @returns {CellClickEventArgs} Object An object holding the startTime, endTime and all-day information along with the target HTML element will be returned.\n */\n Schedule.prototype.getCellDetails = function (tdCol) {\n var td = (tdCol instanceof Array) ? tdCol : [tdCol];\n var firstTd = getElement(td[0]);\n var lastTd = getElement(td.slice(-1)[0]);\n var startTime = this.getDateFromElement(firstTd);\n var endTime = this.getDateFromElement(lastTd);\n if (isNullOrUndefined(startTime) || isNullOrUndefined(endTime)) {\n return undefined;\n }\n var endDateFromColSpan = this.activeView.isTimelineView() && !isNullOrUndefined(lastTd.getAttribute('colSpan')) &&\n this.headerRows.length > 0;\n var duration = endDateFromColSpan ? parseInt(lastTd.getAttribute('colSpan'), 10) : 1;\n if (!this.activeViewOptions.timeScale.enable || endDateFromColSpan || lastTd.classList.contains(cls.ALLDAY_CELLS_CLASS) ||\n lastTd.classList.contains(cls.HEADER_CELLS_CLASS)) {\n endTime = util.addDays(new Date(endTime.getTime()), duration);\n }\n else {\n endTime = this.activeView.getEndDateFromStartDate(endTime);\n }\n var data = {\n startTime: startTime,\n endTime: endTime,\n isAllDay: this.isAllDayCell(firstTd),\n element: tdCol\n };\n var groupIndex = firstTd.getAttribute('data-group-index');\n if (!isNullOrUndefined(groupIndex)) {\n data.groupIndex = parseInt(groupIndex, 10);\n }\n return data;\n };\n /**\n * Retrieves the selected cell elements.\n *\n * @function getSelectedElements\n * @returns {Element[]} The elements of currently selected cells will be returned.\n */\n Schedule.prototype.getSelectedElements = function () {\n return [].slice.call(this.element.querySelectorAll('.' + cls.SELECTED_CELL_CLASS));\n };\n /**\n * To get the resource collection\n *\n * @function getResourceCollections\n * @returns {ResourcesModel[]} Returns the resource collections\n */\n Schedule.prototype.getResourceCollections = function () {\n return this.resourceCollection;\n };\n /**\n * To set the resource collection\n *\n * @function setResourceCollections\n * @param {ResourcesModel[]} resourceCol Accepts the resource collections in ResourcesModel type\n * @returns {void}\n */\n Schedule.prototype.setResourceCollections = function (resourceCol) {\n this.setProperties({ resources: resourceCol }, false);\n };\n /**\n * Current View could be change based on the provided parameters.\n *\n * @function changeCurrentView\n * @param {View} viewName Accept the view in the viewCollections.\n * @param {number} viewIndex Accept the viewIndex in the viewCollections.\n * @returns {void}\n */\n Schedule.prototype.changeCurrentView = function (viewName, viewIndex) {\n var index = this.getViewIndex(viewName);\n var view = viewName.charAt(0).toLowerCase() + viewName.slice(1);\n var viewOptions = this.viewOptions[view];\n if (viewOptions) {\n index = this.viewCollections.indexOf(viewOptions[viewIndex || 0]);\n }\n if (index === -1 || index === this.viewIndex) {\n return;\n }\n this.changeView(viewName, null, null, index);\n };\n /**\n * Return the current view Index.\n *\n * @function getCurrentViewIndex\n * @returns {number} Returns the view index\n */\n Schedule.prototype.getCurrentViewIndex = function () {\n return this.viewIndex;\n };\n /**\n * Retrieves the resource details based on the provided resource index.\n *\n * @param {number} index index of the resources at the last level.\n * @returns {ResourceDetails} Object An object holding the details of resource and resourceData.\n */\n Schedule.prototype.getResourcesByIndex = function (index) {\n if (this.resourceBase && this.resourceBase.lastResourceLevel) {\n if (index < 0 || index >= this.resourceBase.lastResourceLevel.length) {\n return undefined;\n }\n var data = this.resourceBase.lastResourceLevel[index];\n var groupData = {};\n this.resourceBase.setResourceValues(groupData, index);\n return { resource: data.resource, resourceData: data.resourceData, groupData: groupData };\n }\n return undefined;\n };\n /**\n * This method allows to expand the resource that available on the scheduler.\n *\n * @function expandResource\n * @param {string | number} resourceId Accepts the resource id in either string or number type\n * @param {string} name Accepts the name of the resource collection\n * @returns {void}\n */\n Schedule.prototype.expandResource = function (resourceId, name) {\n if (this.activeView.isTimelineView() && this.resourceBase && this.resourceCollection.length > 1) {\n this.resourceBase.resourceExpand(resourceId, name, false);\n }\n };\n /**\n * This method allows to collapse the resource that available on the scheduler.\n *\n * @function collapseResource\n * @param {string | number} resourceId Accepts the resource id in either string or number type\n * @param {string} name Accepts the name of the resource collection\n * @returns {void}\n */\n Schedule.prototype.collapseResource = function (resourceId, name) {\n if (this.activeView.isTimelineView() && this.resourceBase && this.resourceCollection.length > 1) {\n this.resourceBase.resourceExpand(resourceId, name, true);\n }\n };\n /**\n * Scrolls the Schedule content area to the specified time.\n *\n * @function scrollTo\n * @param {string} hour Accepts the time value in the skeleton format of 'Hm'.\n * @param {Date} scrollDate Accepts the date object value.\n * @returns {void}\n */\n Schedule.prototype.scrollTo = function (hour, scrollDate) {\n if (this.activeView.scrollToDate && isNullOrUndefined(hour) && scrollDate) {\n this.activeView.scrollToDate(scrollDate);\n }\n else if (this.activeView.scrollToHour) {\n this.activeView.scrollToHour(hour, scrollDate);\n }\n };\n /**\n * This method allows scroll to the position of the any resources that available on the scheduler.\n * This method is applicable for without Agenda and Month agenda views of the schedule.\n *\n * @function scrollToResource\n * @param {string | number} resourceId Accepts the resource id in either string or number type\n * @param {string} groupName Accepts the name of the resource collection\n * @returns {void}\n */\n Schedule.prototype.scrollToResource = function (resourceId, groupName) {\n if (this.resourceBase && this.resourceBase.lastResourceLevel) {\n this.resourceBase.resourceScroll(resourceId, groupName);\n }\n };\n /**\n * Exports the Scheduler events to a calendar (.ics) file. By default, the calendar is exported with a file name `Calendar.ics`.\n * To change this file name on export, pass the custom string value as `fileName` to get the file downloaded with this provided name.\n *\n * @function exportToICalendar\n * @param {string} fileName Accepts the string value.\n * @param {Object[]} customData Accepts the collection of objects.\n * @returns {void}\n */\n Schedule.prototype.exportToICalendar = function (fileName, customData) {\n if (this.iCalendarExportModule) {\n this.iCalendarExportModule.initializeCalendarExport(fileName, customData);\n }\n else {\n throw Error('Inject ICalendarExport module');\n }\n };\n /**\n * Imports the events from an .ics file downloaded from any of the calendars like Google or Outlook into the Scheduler.\n * This method accepts the blob object or string format of an .ics file to be imported as a mandatory argument.\n *\n * @function importICalendar\n * @param {Blob | string} fileContent Accepts the file object or string format of an .ics file.\n * @returns {void}\n */\n Schedule.prototype.importICalendar = function (fileContent) {\n if (this.iCalendarImportModule) {\n this.iCalendarImportModule.initializeCalendarImport(fileContent);\n }\n else {\n throw Error('Inject ICalendarImport module');\n }\n };\n /**\n * Adds the newly created event into the Schedule dataSource.\n *\n * @function addEvent\n * @param {Object | Object[]} data Single or collection of event objects to be added into Schedule.\n * @returns {void}\n */\n Schedule.prototype.addEvent = function (data) {\n this.crudModule.addEvent(data);\n };\n /**\n * Allows the Scheduler events data to be exported as an Excel file either in .xlsx or .csv file formats.\n * By default, the whole event collection bound to the Scheduler gets exported as an Excel file.\n * To export only the specific events of Scheduler, you need to pass the custom data collection as\n * a parameter to this `exportToExcel` method. This method accepts the export options as arguments such as fileName,\n * exportType, fields, customData, and includeOccurrences. The `fileName` denotes the name to be given for the exported\n * file and the `exportType` allows you to set the format of an Excel file to be exported either as .xlsx or .csv.\n * The custom or specific field collection of event dataSource to be exported can be provided through `fields` option\n * and the custom data collection can be exported by passing them through the `customData` option. There also exists\n * option to export each individual instances of the recurring events to an Excel file, by setting true or false to the\n * `includeOccurrences` option, denoting either to include or exclude the occurrences as separate instances on an exported Excel file.\n *\n * @function exportToExcel\n * @param {ExportOptions} excelExportOptions The export options to be set before start with exporting the Scheduler events to an Excel file.\n * @returns {void}\n */\n Schedule.prototype.exportToExcel = function (excelExportOptions) {\n if (this.excelExportModule) {\n this.excelExportModule.initializeExcelExport(excelExportOptions || {});\n }\n else {\n throw Error('Inject ExcelExport module');\n }\n };\n /**\n * Method allows to print the scheduler.\n *\n * @function print\n * @param {ScheduleModel} printOptions The export options to be set before start with exporting\n * the Scheduler events to the print window.\n * @returns {void}\n */\n Schedule.prototype.print = function (printOptions) {\n if (this.printModule) {\n this.printModule.print(printOptions);\n }\n else {\n throw Error('Inject Print module');\n }\n };\n /**\n * Updates the changes made in the event object by passing it as an parameter into the dataSource.\n *\n * @function saveEvent\n * @param {Object | Object[]} data Single or collection of event objects to be saved into Schedule.\n * @param {CurrentAction} currentAction Denotes the action that takes place either for editing occurrence or series.\n * The valid current action names are `EditOccurrence` or `EditSeries`.\n * @returns {void}\n */\n Schedule.prototype.saveEvent = function (data, currentAction) {\n this.crudModule.saveEvent(data, currentAction);\n };\n /**\n * Deletes the events based on the provided ID or event collection in the argument list.\n *\n * @function deleteEvent\n * @param {string | number | Object | Object[]} id Accepts the ID as string or number type or single or collection of the event object which needs to be removed from the Schedule.\n * @param {CurrentAction} currentAction Denotes the delete action that takes place either on occurrence or series events.\n * The valid current action names are `Delete`, `DeleteOccurrence` or `DeleteSeries`.\n * @returns {void}\n */\n Schedule.prototype.deleteEvent = function (id, currentAction) {\n this.crudModule.deleteEvent(id, currentAction);\n };\n /**\n * Retrieves the entire collection of events bound to the Schedule.\n *\n * @function getEvents\n * @param {Date} startDate Accepts the start date.\n * @param {Date} endDate Accepts te end date.\n * @param {boolean} includeOccurrences Accepts the boolean value to process the occurrence from recurrence series.\n * @returns {Object[]} Returns the collection of event objects from the Schedule.\n */\n Schedule.prototype.getEvents = function (startDate, endDate, includeOccurrences) {\n var eventCollections = [];\n if (includeOccurrences) {\n eventCollections = this.eventBase.getProcessedEvents();\n }\n else {\n eventCollections = this.eventsData;\n }\n if (startDate) {\n startDate = this.getDateTime(startDate);\n }\n if (endDate) {\n endDate = this.getDateTime(endDate);\n }\n eventCollections = this.eventBase.filterEventsByRange(eventCollections, startDate, endDate);\n return eventCollections;\n };\n /**\n * Retrieves the entire collection of block events bound to the Schedule.\n *\n * @function getBlockEvents\n * @param {Date} startDate Accepts the start date.\n * @param {Date} endDate Accepts te end date.\n * @param {boolean} includeOccurrences Accepts the boolean value to process the occurrence from recurrence series.\n * @returns {Object[]} Returns the collection of block event objects from the Schedule.\n */\n Schedule.prototype.getBlockEvents = function (startDate, endDate, includeOccurrences) {\n var eventCollections = [];\n if (includeOccurrences) {\n eventCollections = this.eventBase.getProcessedEvents(this.blockData);\n }\n else {\n eventCollections = this.blockData;\n }\n if (startDate) {\n startDate = this.getDateTime(startDate);\n }\n if (endDate) {\n endDate = this.getDateTime(endDate);\n }\n eventCollections = this.eventBase.filterEventsByRange(eventCollections, startDate, endDate);\n return eventCollections;\n };\n /**\n * Retrieves the occurrences of a single recurrence event based on the provided parent ID.\n *\n * @function getOccurrencesByID\n * @param {number} eventID ID of the parent recurrence data from which the occurrences are fetched.\n * @returns {Object[]} Returns the collection of occurrence event objects.\n */\n Schedule.prototype.getOccurrencesByID = function (eventID) {\n return this.eventBase.getOccurrencesByID(eventID);\n };\n /**\n * Retrieves all the occurrences that lies between the specific start and end time range.\n *\n * @function getOccurrencesByRange\n * @param {Date} startTime Denotes the start time range.\n * @param {Date} endTime Denotes the end time range.\n * @returns {Object[]} Returns the collection of occurrence event objects that lies between the provided start and end time.\n */\n Schedule.prototype.getOccurrencesByRange = function (startTime, endTime) {\n startTime = this.getDateTime(startTime);\n endTime = this.getDateTime(endTime);\n return this.eventBase.getOccurrencesByRange(startTime, endTime);\n };\n /**\n * Retrieves the dates that lies on active view of Schedule.\n *\n * @function getCurrentViewDates\n * @returns {Date[]} Returns the collection of dates.\n */\n Schedule.prototype.getCurrentViewDates = function () {\n return this.activeView ? this.activeView.renderDates : [];\n };\n /**\n * Set the recurrence editor instance from custom editor template.\n *\n * @function setRecurrenceEditor\n * @param {RecurrenceEditor} recurrenceEditor instance has passed to fetch the instance in event window.\n * @returns {void}\n */\n Schedule.prototype.setRecurrenceEditor = function (recurrenceEditor) {\n this.eventWindow.setRecurrenceEditor(recurrenceEditor);\n };\n /**\n * Get the maximum id of an event.\n *\n * @function getEventMaxID\n * @returns {number | string} Returns the maximum ID from scheduler data collections.\n */\n Schedule.prototype.getEventMaxID = function () {\n return this.eventBase.getEventMaxID();\n };\n /**\n * Get deleted occurrences from given recurrence series.\n *\n * @function getDeletedOccurrences\n * @param {string | number | Object} recurrenceData Accepts the parent ID of the event object or parent event object\n * @returns {Object[]} Returns the collection of deleted occurrence events.\n */\n Schedule.prototype.getDeletedOccurrences = function (recurrenceData) {\n return this.eventBase.getDeletedOccurrences(recurrenceData);\n };\n /**\n * Retrieves the events that lies on the current date range of the active view of Schedule.\n *\n * @function getCurrentViewEvents\n * @returns {Object[]} Returns the collection of events.\n */\n Schedule.prototype.getCurrentViewEvents = function () {\n return this.eventsProcessed;\n };\n /**\n * Refreshes the event dataSource. This method may be useful when the events alone in the schedule needs to be re-rendered.\n *\n * @function refreshEvents\n * @param {boolean} isRemoteRefresh Accepts the boolean to refresh data from remote or local\n * @returns {void}\n */\n Schedule.prototype.refreshEvents = function (isRemoteRefresh) {\n if (isRemoteRefresh === void 0) { isRemoteRefresh = true; }\n if (this.dragAndDropModule) {\n this.dragAndDropModule.actionObj.action = '';\n removeClass([this.element], cls.EVENT_ACTION_CLASS);\n }\n if (isRemoteRefresh) {\n this.crudModule.refreshDataManager();\n }\n else {\n var eventsData = this.eventsData || [];\n var blockData = this.blockData || [];\n var data = eventsData.concat(blockData);\n this.notify(events.dataReady, { processedData: this.eventBase ? this.eventBase.processData(data) : [] });\n }\n };\n /**\n * Method to refresh the given Schedule templates\n *\n * @param {string} templateName Accepts the template name\n * @returns {void}\n */\n Schedule.prototype.refreshTemplates = function (templateName) {\n if (templateName) {\n this.resetTemplates([templateName]);\n }\n else {\n this.resetTemplates();\n }\n switch (templateName) {\n case 'eventTemplate':\n this.appointmentTemplateFn = this.templateParser(this.activeViewOptions.eventTemplate);\n this.refreshEvents(false);\n break;\n case 'dateHeaderTemplate':\n this.dateHeaderTemplateFn = this.templateParser(this.activeViewOptions.dateHeaderTemplate);\n this.activeView.refreshHeader();\n break;\n case 'resourceHeaderTemplate':\n this.resourceHeaderTemplateFn = this.templateParser(this.activeViewOptions.resourceHeaderTemplate);\n if (this.activeView.isTimelineView()) {\n this.activeView.refreshResourceHeader();\n }\n else {\n this.activeView.refreshHeader();\n }\n break;\n case 'quickInfoTemplates':\n if (this.quickPopup) {\n this.quickPopup.destroy();\n this.quickPopup = null;\n }\n this.quickPopup = new QuickPopups(this);\n this.quickInfoTemplatesHeaderFn = this.templateParser(this.quickInfoTemplates.header);\n this.quickInfoTemplatesContentFn = this.templateParser(this.quickInfoTemplates.content);\n this.quickInfoTemplatesFooterFn = this.templateParser(this.quickInfoTemplates.footer);\n break;\n case 'editorTemplate':\n if (this.eventWindow) {\n this.eventWindow.destroy();\n this.eventWindow = null;\n }\n this.eventWindow = new EventWindow(this);\n this.editorTemplateFn = this.templateParser(this.editorTemplate);\n break;\n case 'tooltipTemplate':\n case 'headerTooltipTemplate':\n if (this.eventTooltip) {\n this.eventTooltip.destroy();\n this.eventTooltip = null;\n }\n this.eventTooltip = new EventTooltip(this);\n this.eventTooltipTemplateFn = this.templateParser(this.eventSettings.tooltipTemplate);\n this.headerTooltipTemplateFn = this.templateParser(this.activeViewOptions.group.headerTooltipTemplate);\n break;\n default:\n this.initializeView(this.currentView);\n break;\n }\n };\n /**\n * Refreshes the Schedule layout without re-render.\n *\n * @function refreshLayout\n * @returns {void}\n */\n Schedule.prototype.refreshLayout = function () {\n this.onScheduleResize();\n if (this.headerModule) {\n this.headerModule.refresh();\n }\n if (this.eventWindow) {\n this.eventWindow.refresh();\n }\n };\n /**\n * To retrieve the appointment object from element.\n *\n * @function getEventDetails\n * @param {Element} element Denotes the event UI element on the Schedule.\n * @returns {Object} Returns the event details.\n */\n Schedule.prototype.getEventDetails = function (element) {\n element = getElement(element);\n var guid = element.getAttribute('data-guid');\n if (guid) {\n return this.eventBase.getEventByGuid(guid);\n }\n return {};\n };\n /**\n * To check whether the given time range slots are available for event creation or already occupied by other events.\n *\n * @function isSlotAvailable\n * @param {Date | Object} startTime Denotes the start time of the slot.\n * @param {Date} endTime Denotes the end time of the slot.\n * @param {number} groupIndex Defines the resource index from last level.\n * @returns {boolean} Returns true, if the slot that lies in the provided time range does not contain any other events.\n */\n Schedule.prototype.isSlotAvailable = function (startTime, endTime, groupIndex) {\n var _this = this;\n var eventStart;\n var eventEnd;\n var eventObj = this.activeEventData.event;\n if (startTime instanceof Date || typeof (startTime) === 'string') {\n eventStart = startTime;\n eventEnd = endTime;\n }\n else {\n eventObj = startTime;\n eventStart = startTime[this.eventFields.startTime];\n eventEnd = startTime[this.eventFields.endTime];\n if (this.resourceBase) {\n groupIndex = this.eventBase.getGroupIndexFromEvent(startTime);\n }\n }\n if (isNullOrUndefined(eventStart) || isNullOrUndefined(eventEnd)) {\n return true;\n }\n eventStart = this.getDateTime(eventStart);\n eventEnd = this.getDateTime(eventEnd);\n var eventCollection = this.eventBase.filterEvents(eventStart, eventEnd);\n if (!isNullOrUndefined(groupIndex) && this.resourceBase && this.resourceBase.lastResourceLevel.length > 0) {\n eventCollection = this.eventBase.filterEventsByResource(this.resourceBase.lastResourceLevel[groupIndex], eventCollection);\n }\n if (eventObj) {\n if (eventObj.Guid) {\n eventCollection = eventCollection.filter(function (event) { return event.Guid !== eventObj.Guid; });\n }\n else {\n eventCollection = eventCollection.filter(function (event) {\n return event[_this.eventFields.id] !== eventObj[_this.eventFields.id];\n });\n }\n }\n return (eventCollection.length > 0) ? false : true;\n };\n /**\n * To manually open the event editor on specific time or on certain events.\n *\n * @function openEditor\n * @param {Object} data It can be either cell data or event data.\n * @param {CurrentAction} action Defines the action for which the editor needs to be opened such as either for new event creation or\n * for editing of existing events. The applicable action names that can be used here are `Add`, `Save`, `EditOccurrence`\n * and `EditSeries`.\n * @param {boolean} isEventData It allows to decide whether the editor needs to be opened with the clicked cell details or with the\n * passed event details.\n * @param {number} repeatType It opens the editor with the recurrence options based on the provided repeat type.\n * @returns {void}\n */\n Schedule.prototype.openEditor = function (data, action, isEventData, repeatType) {\n if (action === 'Add' && !isEventData) {\n data.startTime = this.getDateTime(data.startTime);\n data.endTime = this.getDateTime(data.endTime);\n if (!isNullOrUndefined(data.element)) {\n data.element = getElement(data.element);\n }\n }\n else {\n data[this.eventFields.startTime] = this.getDateTime(data[this.eventFields.startTime]);\n data[this.eventFields.endTime] = this.getDateTime(data[this.eventFields.endTime]);\n }\n this.currentAction = action;\n if (action !== 'Add') {\n this.activeEventData.event = data;\n }\n this.eventWindow.openEditor(data, action, isEventData, repeatType);\n };\n /**\n * To manually close the event editor window\n *\n * @function closeEditor\n * @returns {void}\n */\n Schedule.prototype.closeEditor = function () {\n if (this.eventWindow) {\n this.eventWindow.dialogClose();\n }\n };\n /**\n * To manually close the quick info popup\n *\n * @function closeQuickInfoPopup\n * @returns {void}\n */\n Schedule.prototype.closeQuickInfoPopup = function () {\n if (this.quickPopup) {\n this.quickPopup.quickPopupHide(true);\n }\n };\n /**\n * Select the resource based on group index in mobile mode.\n *\n * @param {number} groupIndex Defines the resource index based on last level.\n * @returns {void}\n */\n Schedule.prototype.selectResourceByIndex = function (groupIndex) {\n if (this.resourceBase && this.uiStateValues.isGroupAdaptive) {\n this.resourceBase.selectResourceByIndex(groupIndex);\n }\n };\n /**\n * Select the resources to the based on id.\n *\n * @param {string | number} id id of the resource defined in resources collection.\n * @param {string} name Name of the resource defined in resources collection.\n * @returns {number} Returns the group index\n */\n Schedule.prototype.getIndexFromResourceId = function (id, name) {\n if (this.resourceBase) {\n return this.resourceBase.getIndexFromResourceId(id, name);\n }\n return null;\n };\n /**\n * Adds the resources to the specified index.\n *\n * @param {Object | Object[]} resources Accepts the resource data in single or collection of data.\n * @param {string} name Name of the resource defined in resources collection.\n * @param {number} index Index or position where the resource should be added.\n * @returns {void}\n */\n Schedule.prototype.addResource = function (resources, name, index) {\n this.resourceBase.addResource(resources, name, index);\n };\n /**\n * Removes the specified resource.\n *\n * @param {string | string[] | number | number[]} resourceId Specifies the resource id to be removed.\n * @param {string} name Specifies the resource name from which the id should be referred.\n * @returns {void}\n */\n Schedule.prototype.removeResource = function (resourceId, name) {\n this.resourceBase.removeResource(resourceId, name);\n };\n /**\n * Destroys the Schedule component.\n *\n * @function destroy\n * @returns {void}\n */\n Schedule.prototype.destroy = function () {\n if (this.eventTooltip) {\n this.eventTooltip.destroy();\n this.eventTooltip = null;\n }\n this.destroyPopups();\n this.unWireEvents();\n this.destroyHeaderModule();\n if (this.eventTooltip) {\n this.eventTooltip.destroy();\n this.eventTooltip = null;\n }\n if (this.eventBase) {\n this.eventBase.destroy();\n this.eventBase = null;\n }\n if (this.workCellAction) {\n this.workCellAction.destroy();\n this.workCellAction = null;\n }\n if (this.inlineModule) {\n this.inlineModule.destroy();\n this.inlineModule = null;\n }\n if (this.keyboardInteractionModule) {\n this.keyboardInteractionModule.destroy();\n this.keyboardInteractionModule = null;\n }\n if (this.scrollModule) {\n this.scrollModule.destroy();\n this.scrollModule = null;\n }\n if (this.printModule) {\n this.printModule.destroy();\n }\n if (this.activeView) {\n this.resetTemplates();\n this.activeView.removeEventListener();\n this.activeView.destroy();\n this.activeView = null;\n }\n if (this.scheduleTouchModule) {\n this.scheduleTouchModule.destroy();\n this.scheduleTouchModule = null;\n }\n if (this.crudModule) {\n this.crudModule.destroy();\n this.crudModule = null;\n }\n if (this.dataModule) {\n this.dataModule.destroy();\n this.dataModule = null;\n }\n _super.prototype.destroy.call(this);\n var modules = [\n 'dayModule', 'weekModule', 'workWeekModule', 'monthModule', 'monthAgendaModule', 'yearModule', 'agendaModule',\n 'timelineViewsModule', 'timelineMonthModule', 'timelineYearModule', 'resizeModule', 'dragAndDropModule',\n 'excelExportModule', 'printModule', 'iCalendarExportModule', 'iCalendarImportModule', 'tzModule', 'eventsData',\n 'eventsProcessed', 'blockData', 'blockProcessed', 'uiStateValues', 'viewCollections', 'viewOptions', 'defaultLocale',\n 'localeObj', 'selectedElements', 'resourceCollection', 'editorTitles', 'eventFields', 'activeViewOptions',\n 'activeEventData', 'activeCellsData', 'renderModule'\n ];\n for (var _i = 0, modules_1 = modules; _i < modules_1.length; _i++) {\n var module = modules_1[_i];\n this[module] = null;\n }\n util.removeChildren(this.element);\n var removeClasses = [cls.ROOT, cls.RTL, cls.DEVICE_CLASS, cls.MULTI_DRAG];\n if (this.cssClass) {\n removeClasses = removeClasses.concat(this.cssClass.split(' '));\n }\n removeClass([this.element], removeClasses);\n };\n __decorate([\n Property('auto')\n ], Schedule.prototype, \"width\", void 0);\n __decorate([\n Property('auto')\n ], Schedule.prototype, \"height\", void 0);\n __decorate([\n Property(true)\n ], Schedule.prototype, \"showHeaderBar\", void 0);\n __decorate([\n Property(true)\n ], Schedule.prototype, \"showTimeIndicator\", void 0);\n __decorate([\n Property('Week')\n ], Schedule.prototype, \"currentView\", void 0);\n __decorate([\n Property(['Day', 'Week', 'WorkWeek', 'Month', 'Agenda'])\n ], Schedule.prototype, \"views\", void 0);\n __decorate([\n Property(new Date())\n ], Schedule.prototype, \"selectedDate\", void 0);\n __decorate([\n Property(new Date(1900, 0, 1))\n ], Schedule.prototype, \"minDate\", void 0);\n __decorate([\n Property(new Date(2099, 11, 31))\n ], Schedule.prototype, \"maxDate\", void 0);\n __decorate([\n Property()\n ], Schedule.prototype, \"dateFormat\", void 0);\n __decorate([\n Property('Gregorian')\n ], Schedule.prototype, \"calendarMode\", void 0);\n __decorate([\n Property(true)\n ], Schedule.prototype, \"showWeekend\", void 0);\n __decorate([\n Property(0)\n ], Schedule.prototype, \"firstDayOfWeek\", void 0);\n __decorate([\n Property('FirstDay')\n ], Schedule.prototype, \"weekRule\", void 0);\n __decorate([\n Property([1, 2, 3, 4, 5])\n ], Schedule.prototype, \"workDays\", void 0);\n __decorate([\n Property(12)\n ], Schedule.prototype, \"monthsCount\", void 0);\n __decorate([\n Property('00:00')\n ], Schedule.prototype, \"startHour\", void 0);\n __decorate([\n Property('24:00')\n ], Schedule.prototype, \"endHour\", void 0);\n __decorate([\n Property(null)\n ], Schedule.prototype, \"timeFormat\", void 0);\n __decorate([\n Property(false)\n ], Schedule.prototype, \"enableAllDayScroll\", void 0);\n __decorate([\n Property(false)\n ], Schedule.prototype, \"enableAdaptiveUI\", void 0);\n __decorate([\n Property(true)\n ], Schedule.prototype, \"allowResizing\", void 0);\n __decorate([\n Complex({}, WorkHours)\n ], Schedule.prototype, \"workHours\", void 0);\n __decorate([\n Complex({}, TimeScale)\n ], Schedule.prototype, \"timeScale\", void 0);\n __decorate([\n Property(true)\n ], Schedule.prototype, \"allowKeyboardInteraction\", void 0);\n __decorate([\n Property(true)\n ], Schedule.prototype, \"allowDragAndDrop\", void 0);\n __decorate([\n Property()\n ], Schedule.prototype, \"dateHeaderTemplate\", void 0);\n __decorate([\n Property()\n ], Schedule.prototype, \"cellHeaderTemplate\", void 0);\n __decorate([\n Property()\n ], Schedule.prototype, \"dayHeaderTemplate\", void 0);\n __decorate([\n Property()\n ], Schedule.prototype, \"monthHeaderTemplate\", void 0);\n __decorate([\n Property()\n ], Schedule.prototype, \"cellTemplate\", void 0);\n __decorate([\n Property(false)\n ], Schedule.prototype, \"readonly\", void 0);\n __decorate([\n Property(true)\n ], Schedule.prototype, \"showQuickInfo\", void 0);\n __decorate([\n Property(false)\n ], Schedule.prototype, \"allowInline\", void 0);\n __decorate([\n Property(true)\n ], Schedule.prototype, \"allowMultiCellSelection\", void 0);\n __decorate([\n Property(true)\n ], Schedule.prototype, \"allowMultiRowSelection\", void 0);\n __decorate([\n Property(false)\n ], Schedule.prototype, \"quickInfoOnSelectionEnd\", void 0);\n __decorate([\n Property(false)\n ], Schedule.prototype, \"showWeekNumber\", void 0);\n __decorate([\n Property(false)\n ], Schedule.prototype, \"rowAutoHeight\", void 0);\n __decorate([\n Property(false)\n ], Schedule.prototype, \"allowMultiDrag\", void 0);\n __decorate([\n Property(0)\n ], Schedule.prototype, \"firstMonthOfYear\", void 0);\n __decorate([\n Property()\n ], Schedule.prototype, \"editorTemplate\", void 0);\n __decorate([\n Complex({}, QuickInfoTemplates)\n ], Schedule.prototype, \"quickInfoTemplates\", void 0);\n __decorate([\n Property(7)\n ], Schedule.prototype, \"agendaDaysCount\", void 0);\n __decorate([\n Property(true)\n ], Schedule.prototype, \"hideEmptyAgendaDays\", void 0);\n __decorate([\n Property(true)\n ], Schedule.prototype, \"enableRecurrenceValidation\", void 0);\n __decorate([\n Property()\n ], Schedule.prototype, \"timezone\", void 0);\n __decorate([\n Complex({}, EventSettings)\n ], Schedule.prototype, \"eventSettings\", void 0);\n __decorate([\n Property(timezoneData)\n ], Schedule.prototype, \"timezoneDataSource\", void 0);\n __decorate([\n Property()\n ], Schedule.prototype, \"resourceHeaderTemplate\", void 0);\n __decorate([\n Property()\n ], Schedule.prototype, \"headerIndentTemplate\", void 0);\n __decorate([\n Complex({}, Group)\n ], Schedule.prototype, \"group\", void 0);\n __decorate([\n Collection([], Resources)\n ], Schedule.prototype, \"resources\", void 0);\n __decorate([\n Collection([], HeaderRows)\n ], Schedule.prototype, \"headerRows\", void 0);\n __decorate([\n Property()\n ], Schedule.prototype, \"cssClass\", void 0);\n __decorate([\n Property()\n ], Schedule.prototype, \"eventDragArea\", void 0);\n __decorate([\n Event()\n ], Schedule.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Schedule.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], Schedule.prototype, \"cellClick\", void 0);\n __decorate([\n Event()\n ], Schedule.prototype, \"cellDoubleClick\", void 0);\n __decorate([\n Event()\n ], Schedule.prototype, \"moreEventsClick\", void 0);\n __decorate([\n Event()\n ], Schedule.prototype, \"hover\", void 0);\n __decorate([\n Event()\n ], Schedule.prototype, \"select\", void 0);\n __decorate([\n Event()\n ], Schedule.prototype, \"actionBegin\", void 0);\n __decorate([\n Event()\n ], Schedule.prototype, \"actionComplete\", void 0);\n __decorate([\n Event()\n ], Schedule.prototype, \"actionFailure\", void 0);\n __decorate([\n Event()\n ], Schedule.prototype, \"navigating\", void 0);\n __decorate([\n Event()\n ], Schedule.prototype, \"renderCell\", void 0);\n __decorate([\n Event()\n ], Schedule.prototype, \"eventClick\", void 0);\n __decorate([\n Event()\n ], Schedule.prototype, \"eventRendered\", void 0);\n __decorate([\n Event()\n ], Schedule.prototype, \"dataBinding\", void 0);\n __decorate([\n Event()\n ], Schedule.prototype, \"popupOpen\", void 0);\n __decorate([\n Event()\n ], Schedule.prototype, \"popupClose\", void 0);\n __decorate([\n Event()\n ], Schedule.prototype, \"dragStart\", void 0);\n __decorate([\n Event()\n ], Schedule.prototype, \"drag\", void 0);\n __decorate([\n Event()\n ], Schedule.prototype, \"dragStop\", void 0);\n __decorate([\n Event()\n ], Schedule.prototype, \"resizeStart\", void 0);\n __decorate([\n Event()\n ], Schedule.prototype, \"resizing\", void 0);\n __decorate([\n Event()\n ], Schedule.prototype, \"resizeStop\", void 0);\n __decorate([\n Event()\n ], Schedule.prototype, \"dataBound\", void 0);\n Schedule = __decorate([\n NotifyPropertyChanges\n ], Schedule);\n return Schedule;\n}(Component));\nexport { Schedule };\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 { EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';\n\nimport Vue from 'vue';\nexport var isExecute = gh ? false : true;\nvar vueImport;\nif (!isExecute || parseInt(allVue.version) < 3) {\n vueImport = Vue;\n}\nelse {\n vueImport = Vue;\n}\nvar ResourcesDirective = /** @class */ (function (_super) {\n __extends(ResourcesDirective, _super);\n function ResourcesDirective() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n ResourcesDirective.prototype.render = function () {\n return;\n };\n ResourcesDirective.prototype.getTag = function () {\n return 'e-resources';\n };\n ResourcesDirective = __decorate([\n EJComponentDecorator({}, isExecute)\n ], ResourcesDirective);\n return ResourcesDirective;\n}(vueImport));\nexport { ResourcesDirective };\nexport var ResourcesPlugin = {\n name: 'e-resources',\n install: function (Vue) {\n Vue.component(ResourcesPlugin.name, ResourcesDirective);\n }\n};\n/**\n * `e-resources` directive represent a resources of the VueJS Schedule.\n * It must be contained in a Schedule component(`ejs-schedule`).\n * ```vue\n *
\n * \n * \n * \n * \n * \n * ```\n */\nvar ResourceDirective = /** @class */ (function (_super) {\n __extends(ResourceDirective, _super);\n function ResourceDirective() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n ResourceDirective.prototype.render = function () {\n return;\n };\n ResourceDirective.prototype.getTag = function () {\n return 'e-resource';\n };\n ResourceDirective = __decorate([\n EJComponentDecorator({}, isExecute)\n ], ResourceDirective);\n return ResourceDirective;\n}(vueImport));\nexport { ResourceDirective };\nexport var ResourcePlugin = {\n name: 'e-resource',\n install: function (Vue) {\n Vue.component(ResourcePlugin.name, ResourceDirective);\n }\n};\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';\n\nimport Vue from 'vue';\nexport var isExecute = gh ? false : true;\nvar vueImport;\nif (!isExecute || parseInt(allVue.version) < 3) {\n vueImport = Vue;\n}\nelse {\n vueImport = Vue;\n}\nvar HeaderRowsDirective = /** @class */ (function (_super) {\n __extends(HeaderRowsDirective, _super);\n function HeaderRowsDirective() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n HeaderRowsDirective.prototype.render = function () {\n return;\n };\n HeaderRowsDirective.prototype.getTag = function () {\n return 'e-header-rows';\n };\n HeaderRowsDirective = __decorate([\n EJComponentDecorator({}, isExecute)\n ], HeaderRowsDirective);\n return HeaderRowsDirective;\n}(vueImport));\nexport { HeaderRowsDirective };\nexport var HeaderRowsPlugin = {\n name: 'e-header-rows',\n install: function (Vue) {\n Vue.component(HeaderRowsPlugin.name, HeaderRowsDirective);\n }\n};\n/**\n * `e-header-rows` directive represent a header rows of the VueJS Schedule.\n * It must be contained in a Schedule component(`ejs-schedule`).\n * ```vue\n *
\n * \n * \n * \n * \n * \n * ```\n */\nvar HeaderRowDirective = /** @class */ (function (_super) {\n __extends(HeaderRowDirective, _super);\n function HeaderRowDirective() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n HeaderRowDirective.prototype.render = function () {\n return;\n };\n HeaderRowDirective.prototype.getTag = function () {\n return 'e-header-row';\n };\n HeaderRowDirective = __decorate([\n EJComponentDecorator({}, isExecute)\n ], HeaderRowDirective);\n return HeaderRowDirective;\n}(vueImport));\nexport { HeaderRowDirective };\nexport var HeaderRowPlugin = {\n name: 'e-header-row',\n install: function (Vue) {\n Vue.component(HeaderRowPlugin.name, HeaderRowDirective);\n }\n};\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { isUndefined } from '@syncfusion/ej2-base';\nimport { ComponentBase, EJComponentDecorator, getProps, gh } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';\nimport { Schedule } from '@syncfusion/ej2-schedule';\nimport { ViewsDirective, ViewDirective, ViewsPlugin, ViewPlugin } from './views.directive';\nimport { ResourcesDirective, ResourceDirective, ResourcesPlugin, ResourcePlugin } from './resources.directive';\nimport { HeaderRowsDirective, HeaderRowDirective, HeaderRowsPlugin, HeaderRowPlugin } from './headerrows.directive';\n\nexport var properties = ['islazyUpdate', 'agendaDaysCount', 'allowDragAndDrop', 'allowInline', 'allowKeyboardInteraction', 'allowMultiCellSelection', 'allowMultiDrag', 'allowMultiRowSelection', 'allowResizing', 'calendarMode', 'cellHeaderTemplate', 'cellTemplate', 'cssClass', 'currentView', 'dateFormat', 'dateHeaderTemplate', 'dayHeaderTemplate', 'editorTemplate', 'enableAdaptiveUI', 'enableAllDayScroll', 'enablePersistence', 'enableRecurrenceValidation', 'enableRtl', 'endHour', 'eventDragArea', 'eventSettings', 'firstDayOfWeek', 'firstMonthOfYear', 'group', 'headerIndentTemplate', 'headerRows', 'height', 'hideEmptyAgendaDays', 'locale', 'maxDate', 'minDate', 'monthHeaderTemplate', 'monthsCount', 'quickInfoOnSelectionEnd', 'quickInfoTemplates', 'readonly', 'resourceHeaderTemplate', 'resources', 'rowAutoHeight', 'selectedDate', 'showHeaderBar', 'showQuickInfo', 'showTimeIndicator', 'showWeekNumber', 'showWeekend', 'startHour', 'timeFormat', 'timeScale', 'timezone', 'timezoneDataSource', 'views', 'weekRule', 'width', 'workDays', 'workHours', 'actionBegin', 'actionComplete', 'actionFailure', 'cellClick', 'cellDoubleClick', 'created', 'dataBinding', 'dataBound', 'destroyed', 'drag', 'dragStart', 'dragStop', 'eventClick', 'eventRendered', 'hover', 'moreEventsClick', 'navigating', 'popupClose', 'popupOpen', 'renderCell', 'resizeStart', 'resizeStop', 'resizing', 'select'];\nexport var modelProps = ['currentView', 'selectedDate'];\nexport var testProp = getProps({ props: properties });\nexport var props = testProp[0];\nexport var watch = testProp[1];\nexport var emitProbs = Object.keys(watch);\nemitProbs.push('modelchanged');\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}\nexport var isExecute = gh ? false : true;\n/**\n * `ej-schedule` represents the VueJS Schedule Component.\n * ```vue\n *
\n * ```\n */\nvar ScheduleComponent = /** @class */ (function (_super) {\n __extends(ScheduleComponent, _super);\n function ScheduleComponent() {\n var _this = _super.call(this, arguments) || this;\n _this.propKeys = properties;\n _this.models = modelProps;\n _this.hasChildDirective = true;\n _this.hasInjectedModules = true;\n _this.tagMapper = { \"e-views\": \"e-view\", \"e-resources\": \"e-resource\", \"e-header-rows\": \"e-header-row\" };\n _this.tagNameMapper = { \"e-header-rows\": \"e-headerRows\" };\n _this.isVue3 = !isExecute;\n _this.ej2Instances = new Schedule({});\n _this.ej2Instances._trigger = _this.ej2Instances.trigger;\n _this.ej2Instances.trigger = _this.trigger;\n _this.bindProperties();\n _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;\n _this.ej2Instances.setProperties = _this.setProperties;\n _this.ej2Instances.clearTemplate = _this.clearTemplate;\n return _this;\n }\n ScheduleComponent.prototype.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 ScheduleComponent.prototype.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 ScheduleComponent.prototype.trigger = function (eventName, eventProp, successHandler) {\n if (!isExecute) {\n this.models = !this.models ? this.ej2Instances.referModels : this.models;\n }\n if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {\n var key = this.models.toString().match(/checked|value/) || [];\n var propKey = key[0];\n if (eventProp && key && !isUndefined(eventProp[propKey])) {\n if (!isExecute) {\n this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);\n this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);\n }\n else {\n if (eventName === 'change' || (this.$props && !this.$props.islazyUpdate)) {\n this.$emit('update:' + propKey, eventProp[propKey]);\n this.$emit('modelchanged', eventProp[propKey]);\n }\n }\n }\n }\n else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {\n var key = this.models.toString().match(/currentView|selectedDate/) || [];\n var propKey = key[0];\n if (eventProp && key && !isUndefined(eventProp[propKey])) {\n if (!isExecute) {\n this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);\n this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);\n }\n else {\n this.$emit('update:' + propKey, eventProp[propKey]);\n this.$emit('modelchanged', eventProp[propKey]);\n }\n }\n }\n if ((this.ej2Instances && this.ej2Instances._trigger)) {\n this.ej2Instances._trigger(eventName, eventProp, successHandler);\n }\n };\n ScheduleComponent.prototype.render = function (createElement) {\n var h = gh || createElement;\n var slots = null;\n if (!isNullOrUndefined(this.$slots.default)) {\n slots = gh ? this.$slots.default() : this.$slots.default;\n }\n return h('div', slots);\n };\n ScheduleComponent.prototype.addEvent = function (data) {\n return this.ej2Instances.addEvent(data);\n };\n ScheduleComponent.prototype.addResource = function (resources, name, index) {\n return this.ej2Instances.addResource(resources, name, index);\n };\n ScheduleComponent.prototype.changeCurrentView = function (viewName, viewIndex) {\n return this.ej2Instances.changeCurrentView(viewName, viewIndex);\n };\n ScheduleComponent.prototype.closeEditor = function () {\n return this.ej2Instances.closeEditor();\n };\n ScheduleComponent.prototype.closeQuickInfoPopup = function () {\n return this.ej2Instances.closeQuickInfoPopup();\n };\n ScheduleComponent.prototype.collapseResource = function (resourceId, name) {\n return this.ej2Instances.collapseResource(resourceId, name);\n };\n ScheduleComponent.prototype.deleteEvent = function (id, currentAction) {\n return this.ej2Instances.deleteEvent(id, currentAction);\n };\n ScheduleComponent.prototype.expandResource = function (resourceId, name) {\n return this.ej2Instances.expandResource(resourceId, name);\n };\n ScheduleComponent.prototype.exportToExcel = function (excelExportOptions) {\n return this.ej2Instances.exportToExcel(excelExportOptions);\n };\n ScheduleComponent.prototype.exportToICalendar = function (fileName, customData) {\n return this.ej2Instances.exportToICalendar(fileName, customData);\n };\n ScheduleComponent.prototype.getBlockEvents = function (startDate, endDate, includeOccurrences) {\n return this.ej2Instances.getBlockEvents(startDate, endDate, includeOccurrences);\n };\n ScheduleComponent.prototype.getCellDetails = function (tdCol) {\n return this.ej2Instances.getCellDetails(tdCol);\n };\n ScheduleComponent.prototype.getCurrentViewDates = function () {\n return this.ej2Instances.getCurrentViewDates();\n };\n ScheduleComponent.prototype.getCurrentViewEvents = function () {\n return this.ej2Instances.getCurrentViewEvents();\n };\n ScheduleComponent.prototype.getCurrentViewIndex = function () {\n return this.ej2Instances.getCurrentViewIndex();\n };\n ScheduleComponent.prototype.getDeletedOccurrences = function (recurrenceData) {\n return this.ej2Instances.getDeletedOccurrences(recurrenceData);\n };\n ScheduleComponent.prototype.getEventDetails = function (element) {\n return this.ej2Instances.getEventDetails(element);\n };\n ScheduleComponent.prototype.getEventMaxID = function () {\n return this.ej2Instances.getEventMaxID();\n };\n ScheduleComponent.prototype.getEvents = function (startDate, endDate, includeOccurrences) {\n return this.ej2Instances.getEvents(startDate, endDate, includeOccurrences);\n };\n ScheduleComponent.prototype.getIndexFromResourceId = function (id, name) {\n return this.ej2Instances.getIndexFromResourceId(id, name);\n };\n ScheduleComponent.prototype.getOccurrencesByID = function (eventID) {\n return this.ej2Instances.getOccurrencesByID(eventID);\n };\n ScheduleComponent.prototype.getOccurrencesByRange = function (startTime, endTime) {\n return this.ej2Instances.getOccurrencesByRange(startTime, endTime);\n };\n ScheduleComponent.prototype.getResourceCollections = function () {\n return this.ej2Instances.getResourceCollections();\n };\n ScheduleComponent.prototype.getResourcesByIndex = function (index) {\n return this.ej2Instances.getResourcesByIndex(index);\n };\n ScheduleComponent.prototype.getSelectedElements = function () {\n return this.ej2Instances.getSelectedElements();\n };\n ScheduleComponent.prototype.hideSpinner = function () {\n return this.ej2Instances.hideSpinner();\n };\n ScheduleComponent.prototype.importICalendar = function (fileContent) {\n return this.ej2Instances.importICalendar(fileContent);\n };\n ScheduleComponent.prototype.isSlotAvailable = function (startTime, endTime, groupIndex) {\n return this.ej2Instances.isSlotAvailable(startTime, endTime, groupIndex);\n };\n ScheduleComponent.prototype.openEditor = function (data, action, isEventData, repeatType) {\n return this.ej2Instances.openEditor(data, action, isEventData, repeatType);\n };\n ScheduleComponent.prototype.print = function (printOptions) {\n return this.ej2Instances.print(printOptions);\n };\n ScheduleComponent.prototype.refreshEvents = function (isRemoteRefresh) {\n return this.ej2Instances.refreshEvents(isRemoteRefresh);\n };\n ScheduleComponent.prototype.refreshLayout = function () {\n return this.ej2Instances.refreshLayout();\n };\n ScheduleComponent.prototype.refreshTemplates = function (templateName) {\n return this.ej2Instances.refreshTemplates(templateName);\n };\n ScheduleComponent.prototype.removeResource = function (resourceId, name) {\n return this.ej2Instances.removeResource(resourceId, name);\n };\n ScheduleComponent.prototype.resetWorkHours = function (dates, start, end, groupIndex) {\n return this.ej2Instances.resetWorkHours(dates, start, end, groupIndex);\n };\n ScheduleComponent.prototype.saveEvent = function (data, currentAction) {\n return this.ej2Instances.saveEvent(data, currentAction);\n };\n ScheduleComponent.prototype.scrollTo = function (hour, scrollDate) {\n return this.ej2Instances.scrollTo(hour, scrollDate);\n };\n ScheduleComponent.prototype.scrollToResource = function (resourceId, groupName) {\n return this.ej2Instances.scrollToResource(resourceId, groupName);\n };\n ScheduleComponent.prototype.selectResourceByIndex = function (groupIndex) {\n return this.ej2Instances.selectResourceByIndex(groupIndex);\n };\n ScheduleComponent.prototype.setRecurrenceEditor = function (recurrenceEditor) {\n return this.ej2Instances.setRecurrenceEditor(recurrenceEditor);\n };\n ScheduleComponent.prototype.setResourceCollections = function (resourceCol) {\n return this.ej2Instances.setResourceCollections(resourceCol);\n };\n ScheduleComponent.prototype.setWorkHours = function (dates, start, end, groupIndex) {\n return this.ej2Instances.setWorkHours(dates, start, end, groupIndex);\n };\n ScheduleComponent.prototype.showSpinner = function () {\n return this.ej2Instances.showSpinner();\n };\n ScheduleComponent = __decorate([\n EJComponentDecorator({\n props: properties,\n model: {\n event: 'modelchanged'\n }\n }, isExecute)\n \n ], ScheduleComponent);\n return ScheduleComponent;\n}(ComponentBase));\nexport { ScheduleComponent };\nexport var SchedulePlugin = {\n name: 'ejs-schedule',\n install: function (Vue) {\n Vue.component(SchedulePlugin.name, ScheduleComponent);\n Vue.component(ViewPlugin.name, ViewDirective);\n Vue.component(ViewsPlugin.name, ViewsDirective);\n Vue.component(ResourcePlugin.name, ResourceDirective);\n Vue.component(ResourcesPlugin.name, ResourcesDirective);\n Vue.component(HeaderRowPlugin.name, HeaderRowDirective);\n Vue.component(HeaderRowsPlugin.name, HeaderRowsDirective);\n }\n};\n","/**\n * Position library\n */\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nvar elementRect;\nvar popupRect;\nvar element;\nvar parentDocument;\nvar fixedParent = false;\n/**\n *\n * @param {HTMLElement} anchor - specifies the element\n * @param {HTMLElement} element - specifies the element\n * @returns {OffsetPosition} - returns the value\n */\nexport function calculateRelativeBasedPosition(anchor, element) {\n var fixedElement = false;\n var anchorPos = { left: 0, top: 0 };\n var tempAnchor = anchor;\n if (!anchor || !element) {\n return anchorPos;\n }\n if (isNullOrUndefined(element.offsetParent) && element.style.position === 'fixed') {\n fixedElement = true;\n }\n while ((element.offsetParent || fixedElement) && anchor && element.offsetParent !== anchor) {\n anchorPos.left += anchor.offsetLeft;\n anchorPos.top += anchor.offsetTop;\n anchor = anchor.offsetParent;\n }\n anchor = tempAnchor;\n while ((element.offsetParent || fixedElement) && anchor && element.offsetParent !== anchor) {\n anchorPos.left -= anchor.scrollLeft;\n anchorPos.top -= anchor.scrollTop;\n anchor = anchor.parentElement;\n }\n return anchorPos;\n}\n/**\n *\n * @param {Element} currentElement - specifies the element\n * @param {string} positionX - specifies the position\n * @param {string} positionY - specifies the position\n * @param {boolean} parentElement - specifies the boolean\n * @param {ClientRect} targetValues - specifies the client\n * @returns {OffsetPosition} - returns the position\n */\nexport function calculatePosition(currentElement, positionX, positionY, parentElement, targetValues) {\n //eslint-disable-next-line\n popupRect = undefined;\n popupRect = targetValues;\n fixedParent = parentElement ? true : false;\n if (!currentElement) {\n return { left: 0, top: 0 };\n }\n if (!positionX) {\n positionX = 'left';\n }\n if (!positionY) {\n positionY = 'top';\n }\n parentDocument = currentElement.ownerDocument;\n element = currentElement;\n var pos = { left: 0, top: 0 };\n return updatePosition(positionX.toLowerCase(), positionY.toLowerCase(), pos);\n}\n/**\n *\n * @param {number} value - specifies the number\n * @param {OffsetPosition} pos - specifies the position\n * @returns {void}\n */\nfunction setPosx(value, pos) {\n pos.left = value;\n}\n/**\n *\n * @param {number} value - specifies the number\n * @param {OffsetPosition} pos - specifies the position\n * @returns {void}\n */\nfunction setPosy(value, pos) {\n pos.top = value;\n}\n/**\n *\n * @param {string} posX - specifies the position\n * @param {string} posY - specifies the position\n * @param {OffsetPosition} pos - specifies the position\n * @returns {OffsetPosition} - returns the postion\n */\nfunction updatePosition(posX, posY, pos) {\n elementRect = element.getBoundingClientRect();\n switch (posY + posX) {\n case 'topcenter':\n setPosx(getElementHCenter(), pos);\n setPosy(getElementTop(), pos);\n break;\n case 'topright':\n setPosx(getElementRight(), pos);\n setPosy(getElementTop(), pos);\n break;\n case 'centercenter':\n setPosx(getElementHCenter(), pos);\n setPosy(getElementVCenter(), pos);\n break;\n case 'centerright':\n setPosx(getElementRight(), pos);\n setPosy(getElementVCenter(), pos);\n break;\n case 'centerleft':\n setPosx(getElementLeft(), pos);\n setPosy(getElementVCenter(), pos);\n break;\n case 'bottomcenter':\n setPosx(getElementHCenter(), pos);\n setPosy(getElementBottom(), pos);\n break;\n case 'bottomright':\n setPosx(getElementRight(), pos);\n setPosy(getElementBottom(), pos);\n break;\n case 'bottomleft':\n setPosx(getElementLeft(), pos);\n setPosy(getElementBottom(), pos);\n break;\n default:\n case 'topleft':\n setPosx(getElementLeft(), pos);\n setPosy(getElementTop(), pos);\n break;\n }\n return pos;\n}\n/**\n * @returns {number} - specifies the number value\n */\nfunction getBodyScrollTop() {\n return parentDocument.documentElement.scrollTop || parentDocument.body.scrollTop;\n}\n/**\n * @returns {number} - specifies the number value\n */\nfunction getBodyScrollLeft() {\n return parentDocument.documentElement.scrollLeft || parentDocument.body.scrollLeft;\n}\n/**\n * @returns {number} - specifies the number value\n */\nfunction getElementBottom() {\n return fixedParent ? elementRect.bottom : elementRect.bottom + getBodyScrollTop();\n}\n/**\n * @returns {number} - specifies the number value\n */\nfunction getElementVCenter() {\n return getElementTop() + (elementRect.height / 2);\n}\n/**\n * @returns {number} - specifies the number value\n */\nfunction getElementTop() {\n return fixedParent ? elementRect.top : elementRect.top + getBodyScrollTop();\n}\n/**\n * @returns {number} - specifies the number value\n */\nfunction getElementLeft() {\n return elementRect.left + getBodyScrollLeft();\n}\n/**\n * @returns {number} - specifies the number value\n */\nfunction getElementRight() {\n var popupWidth = (element && element.classList.contains('e-date-range-wrapper')) ? (popupRect ? popupRect.width : 0) :\n (popupRect && (elementRect.width >= popupRect.width) ? popupRect.width : 0);\n return elementRect.right + getBodyScrollLeft() - popupWidth;\n}\n/**\n * @returns {number} - specifies the number value\n */\nfunction getElementHCenter() {\n return getElementLeft() + (elementRect.width / 2);\n}\n","var identity = function identity(x) {\n return x;\n};\n\nexport default identity;","//! moment.js locale configuration\n//! locale : Norwegian Bokmål [nb]\n//! authors : Espen Hovlandsdal : https://github.com/rexxars\n//! Sigurd Gartmann : https://github.com/sigurdga\n//! Stephen Ramthun : https://github.com/stephenramthun\n\n;(function (global, factory) {\n typeof exports === 'object' && typeof module !== 'undefined'\n && typeof require === 'function' ? factory(require('../moment')) :\n typeof define === 'function' && define.amd ? define(['../moment'], factory) :\n factory(global.moment)\n}(this, (function (moment) { 'use strict';\n\n //! moment.js locale configuration\n\n var nb = moment.defineLocale('nb', {\n months: 'januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember'.split(\n '_'\n ),\n monthsShort: 'jan._feb._mars_apr._mai_juni_juli_aug._sep._okt._nov._des.'.split(\n '_'\n ),\n monthsParseExact: true,\n weekdays: 'søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag'.split('_'),\n weekdaysShort: 'sø._ma._ti._on._to._fr._lø.'.split('_'),\n weekdaysMin: 'sø_ma_ti_on_to_fr_lø'.split('_'),\n weekdaysParseExact: true,\n longDateFormat: {\n LT: 'HH:mm',\n LTS: 'HH:mm:ss',\n L: 'DD.MM.YYYY',\n LL: 'D. MMMM YYYY',\n LLL: 'D. MMMM YYYY [kl.] HH:mm',\n LLLL: 'dddd D. MMMM YYYY [kl.] HH:mm',\n },\n calendar: {\n sameDay: '[i dag kl.] LT',\n nextDay: '[i morgen kl.] LT',\n nextWeek: 'dddd [kl.] LT',\n lastDay: '[i går kl.] LT',\n lastWeek: '[forrige] dddd [kl.] LT',\n sameElse: 'L',\n },\n relativeTime: {\n future: 'om %s',\n past: '%s siden',\n s: 'noen sekunder',\n ss: '%d sekunder',\n m: 'ett minutt',\n mm: '%d minutter',\n h: 'en time',\n hh: '%d timer',\n d: 'en dag',\n dd: '%d dager',\n M: 'en måned',\n MM: '%d måneder',\n y: 'ett år',\n yy: '%d år',\n },\n dayOfMonthOrdinalParse: /\\d{1,2}\\./,\n ordinal: '%d.',\n week: {\n dow: 1, // Monday is the first day of the week.\n doy: 4, // The week that contains Jan 4th is the first week of the year.\n },\n });\n\n return nb;\n\n})));\n","//! moment.js locale configuration\n//! locale : Kazakh [kk]\n//! authors : Nurlan Rakhimzhanov : https://github.com/nurlan\n\n;(function (global, factory) {\n typeof exports === 'object' && typeof module !== 'undefined'\n && typeof require === 'function' ? factory(require('../moment')) :\n typeof define === 'function' && define.amd ? define(['../moment'], factory) :\n factory(global.moment)\n}(this, (function (moment) { 'use strict';\n\n //! moment.js locale configuration\n\n var suffixes = {\n 0: '-ші',\n 1: '-ші',\n 2: '-ші',\n 3: '-ші',\n 4: '-ші',\n 5: '-ші',\n 6: '-шы',\n 7: '-ші',\n 8: '-ші',\n 9: '-шы',\n 10: '-шы',\n 20: '-шы',\n 30: '-шы',\n 40: '-шы',\n 50: '-ші',\n 60: '-шы',\n 70: '-ші',\n 80: '-ші',\n 90: '-шы',\n 100: '-ші',\n };\n\n var kk = moment.defineLocale('kk', {\n months: 'қаңтар_ақпан_наурыз_сәуір_мамыр_маусым_шілде_тамыз_қыркүйек_қазан_қараша_желтоқсан'.split(\n '_'\n ),\n monthsShort: 'қаң_ақп_нау_сәу_мам_мау_шіл_там_қыр_қаз_қар_жел'.split('_'),\n weekdays: 'жексенбі_дүйсенбі_сейсенбі_сәрсенбі_бейсенбі_жұма_сенбі'.split(\n '_'\n ),\n weekdaysShort: 'жек_дүй_сей_сәр_бей_жұм_сен'.split('_'),\n weekdaysMin: 'жк_дй_сй_ср_бй_жм_сн'.split('_'),\n longDateFormat: {\n LT: 'HH:mm',\n LTS: 'HH:mm:ss',\n L: 'DD.MM.YYYY',\n LL: 'D MMMM YYYY',\n LLL: 'D MMMM YYYY HH:mm',\n LLLL: 'dddd, D MMMM YYYY HH:mm',\n },\n calendar: {\n sameDay: '[Бүгін сағат] LT',\n nextDay: '[Ертең сағат] LT',\n nextWeek: 'dddd [сағат] LT',\n lastDay: '[Кеше сағат] LT',\n lastWeek: '[Өткен аптаның] dddd [сағат] LT',\n sameElse: 'L',\n },\n relativeTime: {\n future: '%s ішінде',\n past: '%s бұрын',\n s: 'бірнеше секунд',\n ss: '%d секунд',\n m: 'бір минут',\n mm: '%d минут',\n h: 'бір сағат',\n hh: '%d сағат',\n d: 'бір күн',\n dd: '%d күн',\n M: 'бір ай',\n MM: '%d ай',\n y: 'бір жыл',\n yy: '%d жыл',\n },\n dayOfMonthOrdinalParse: /\\d{1,2}-(ші|шы)/,\n ordinal: function (number) {\n var a = number % 10,\n b = number >= 100 ? 100 : null;\n return number + (suffixes[number] || suffixes[a] || suffixes[b]);\n },\n week: {\n dow: 1, // Monday is the first day of the week.\n doy: 7, // The week that contains Jan 7th is the first week of the year.\n },\n });\n\n return kk;\n\n})));\n","//! moment.js locale configuration\n//! locale : Arabic (Tunisia) [ar-tn]\n//! author : Nader Toukabri : https://github.com/naderio\n\n;(function (global, factory) {\n typeof exports === 'object' && typeof module !== 'undefined'\n && typeof require === 'function' ? factory(require('../moment')) :\n typeof define === 'function' && define.amd ? define(['../moment'], factory) :\n factory(global.moment)\n}(this, (function (moment) { 'use strict';\n\n //! moment.js locale configuration\n\n var arTn = moment.defineLocale('ar-tn', {\n months: 'جانفي_فيفري_مارس_أفريل_ماي_جوان_جويلية_أوت_سبتمبر_أكتوبر_نوفمبر_ديسمبر'.split(\n '_'\n ),\n monthsShort: 'جانفي_فيفري_مارس_أفريل_ماي_جوان_جويلية_أوت_سبتمبر_أكتوبر_نوفمبر_ديسمبر'.split(\n '_'\n ),\n weekdays: 'الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت'.split('_'),\n weekdaysShort: 'أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت'.split('_'),\n weekdaysMin: 'ح_ن_ث_ر_خ_ج_س'.split('_'),\n weekdaysParseExact: true,\n longDateFormat: {\n LT: 'HH:mm',\n LTS: 'HH:mm:ss',\n L: 'DD/MM/YYYY',\n LL: 'D MMMM YYYY',\n LLL: 'D MMMM YYYY HH:mm',\n LLLL: 'dddd D MMMM YYYY HH:mm',\n },\n calendar: {\n sameDay: '[اليوم على الساعة] LT',\n nextDay: '[غدا على الساعة] LT',\n nextWeek: 'dddd [على الساعة] LT',\n lastDay: '[أمس على الساعة] LT',\n lastWeek: 'dddd [على الساعة] LT',\n sameElse: 'L',\n },\n relativeTime: {\n future: 'في %s',\n past: 'منذ %s',\n s: 'ثوان',\n ss: '%d ثانية',\n m: 'دقيقة',\n mm: '%d دقائق',\n h: 'ساعة',\n hh: '%d ساعات',\n d: 'يوم',\n dd: '%d أيام',\n M: 'شهر',\n MM: '%d أشهر',\n y: 'سنة',\n yy: '%d سنوات',\n },\n week: {\n dow: 1, // Monday is the first day of the week.\n doy: 4, // The week that contains Jan 4th is the first week of the year.\n },\n });\n\n return arTn;\n\n})));\n","//! moment.js locale configuration\n//! locale : Italian [it]\n//! author : Lorenzo : https://github.com/aliem\n//! author: Mattia Larentis: https://github.com/nostalgiaz\n//! author: Marco : https://github.com/Manfre98\n\n;(function (global, factory) {\n typeof exports === 'object' && typeof module !== 'undefined'\n && typeof require === 'function' ? factory(require('../moment')) :\n typeof define === 'function' && define.amd ? define(['../moment'], factory) :\n factory(global.moment)\n}(this, (function (moment) { 'use strict';\n\n //! moment.js locale configuration\n\n var it = moment.defineLocale('it', {\n months: 'gennaio_febbraio_marzo_aprile_maggio_giugno_luglio_agosto_settembre_ottobre_novembre_dicembre'.split(\n '_'\n ),\n monthsShort: 'gen_feb_mar_apr_mag_giu_lug_ago_set_ott_nov_dic'.split('_'),\n weekdays: 'domenica_lunedì_martedì_mercoledì_giovedì_venerdì_sabato'.split(\n '_'\n ),\n weekdaysShort: 'dom_lun_mar_mer_gio_ven_sab'.split('_'),\n weekdaysMin: 'do_lu_ma_me_gi_ve_sa'.split('_'),\n longDateFormat: {\n LT: 'HH:mm',\n LTS: 'HH:mm:ss',\n L: 'DD/MM/YYYY',\n LL: 'D MMMM YYYY',\n LLL: 'D MMMM YYYY HH:mm',\n LLLL: 'dddd D MMMM YYYY HH:mm',\n },\n calendar: {\n sameDay: function () {\n return (\n '[Oggi a' +\n (this.hours() > 1 ? 'lle ' : this.hours() === 0 ? ' ' : \"ll'\") +\n ']LT'\n );\n },\n nextDay: function () {\n return (\n '[Domani a' +\n (this.hours() > 1 ? 'lle ' : this.hours() === 0 ? ' ' : \"ll'\") +\n ']LT'\n );\n },\n nextWeek: function () {\n return (\n 'dddd [a' +\n (this.hours() > 1 ? 'lle ' : this.hours() === 0 ? ' ' : \"ll'\") +\n ']LT'\n );\n },\n lastDay: function () {\n return (\n '[Ieri a' +\n (this.hours() > 1 ? 'lle ' : this.hours() === 0 ? ' ' : \"ll'\") +\n ']LT'\n );\n },\n lastWeek: function () {\n switch (this.day()) {\n case 0:\n return (\n '[La scorsa] dddd [a' +\n (this.hours() > 1\n ? 'lle '\n : this.hours() === 0\n ? ' '\n : \"ll'\") +\n ']LT'\n );\n default:\n return (\n '[Lo scorso] dddd [a' +\n (this.hours() > 1\n ? 'lle '\n : this.hours() === 0\n ? ' '\n : \"ll'\") +\n ']LT'\n );\n }\n },\n sameElse: 'L',\n },\n relativeTime: {\n future: 'tra %s',\n past: '%s fa',\n s: 'alcuni secondi',\n ss: '%d secondi',\n m: 'un minuto',\n mm: '%d minuti',\n h: \"un'ora\",\n hh: '%d ore',\n d: 'un giorno',\n dd: '%d giorni',\n M: 'un mese',\n MM: '%d mesi',\n y: 'un anno',\n yy: '%d anni',\n },\n dayOfMonthOrdinalParse: /\\d{1,2}º/,\n ordinal: '%dº',\n week: {\n dow: 1, // Monday is the first day of the week.\n doy: 4, // The week that contains Jan 4th is the first week of the year.\n },\n });\n\n return it;\n\n})));\n","var global = require('../internals/global');\nvar createNonEnumerableProperty = require('../internals/create-non-enumerable-property');\nvar has = require('../internals/has');\nvar setGlobal = require('../internals/set-global');\nvar inspectSource = require('../internals/inspect-source');\nvar InternalStateModule = require('../internals/internal-state');\n\nvar getInternalState = InternalStateModule.get;\nvar enforceInternalState = InternalStateModule.enforce;\nvar TEMPLATE = String(String).split('String');\n\n(module.exports = function (O, key, value, options) {\n var unsafe = options ? !!options.unsafe : false;\n var simple = options ? !!options.enumerable : false;\n var noTargetGet = options ? !!options.noTargetGet : false;\n var state;\n if (typeof value == 'function') {\n if (typeof key == 'string' && !has(value, 'name')) {\n createNonEnumerableProperty(value, 'name', key);\n }\n state = enforceInternalState(value);\n if (!state.source) {\n state.source = TEMPLATE.join(typeof key == 'string' ? key : '');\n }\n }\n if (O === global) {\n if (simple) O[key] = value;\n else setGlobal(key, value);\n return;\n } else if (!unsafe) {\n delete O[key];\n } else if (!noTargetGet && O[key]) {\n simple = true;\n }\n if (simple) O[key] = value;\n else createNonEnumerableProperty(O, key, value);\n// add fake Function#toString for correct work wrapped methods / constructors with methods like LoDash isNative\n})(Function.prototype, 'toString', function toString() {\n return typeof this == 'function' && getInternalState(this).source || inspectSource(this);\n});\n","//! moment.js locale configuration\n//! locale : Italian (Switzerland) [it-ch]\n//! author : xfh : https://github.com/xfh\n\n;(function (global, factory) {\n typeof exports === 'object' && typeof module !== 'undefined'\n && typeof require === 'function' ? factory(require('../moment')) :\n typeof define === 'function' && define.amd ? define(['../moment'], factory) :\n factory(global.moment)\n}(this, (function (moment) { 'use strict';\n\n //! moment.js locale configuration\n\n var itCh = moment.defineLocale('it-ch', {\n months: 'gennaio_febbraio_marzo_aprile_maggio_giugno_luglio_agosto_settembre_ottobre_novembre_dicembre'.split(\n '_'\n ),\n monthsShort: 'gen_feb_mar_apr_mag_giu_lug_ago_set_ott_nov_dic'.split('_'),\n weekdays: 'domenica_lunedì_martedì_mercoledì_giovedì_venerdì_sabato'.split(\n '_'\n ),\n weekdaysShort: 'dom_lun_mar_mer_gio_ven_sab'.split('_'),\n weekdaysMin: 'do_lu_ma_me_gi_ve_sa'.split('_'),\n longDateFormat: {\n LT: 'HH:mm',\n LTS: 'HH:mm:ss',\n L: 'DD.MM.YYYY',\n LL: 'D MMMM YYYY',\n LLL: 'D MMMM YYYY HH:mm',\n LLLL: 'dddd D MMMM YYYY HH:mm',\n },\n calendar: {\n sameDay: '[Oggi alle] LT',\n nextDay: '[Domani alle] LT',\n nextWeek: 'dddd [alle] LT',\n lastDay: '[Ieri alle] LT',\n lastWeek: function () {\n switch (this.day()) {\n case 0:\n return '[la scorsa] dddd [alle] LT';\n default:\n return '[lo scorso] dddd [alle] LT';\n }\n },\n sameElse: 'L',\n },\n relativeTime: {\n future: function (s) {\n return (/^[0-9].+$/.test(s) ? 'tra' : 'in') + ' ' + s;\n },\n past: '%s fa',\n s: 'alcuni secondi',\n ss: '%d secondi',\n m: 'un minuto',\n mm: '%d minuti',\n h: \"un'ora\",\n hh: '%d ore',\n d: 'un giorno',\n dd: '%d giorni',\n M: 'un mese',\n MM: '%d mesi',\n y: 'un anno',\n yy: '%d anni',\n },\n dayOfMonthOrdinalParse: /\\d{1,2}º/,\n ordinal: '%dº',\n week: {\n dow: 1, // Monday is the first day of the week.\n doy: 4, // The week that contains Jan 4th is the first week of the year.\n },\n });\n\n return itCh;\n\n})));\n","//! moment.js locale configuration\n//! locale : English (New Zealand) [en-nz]\n//! author : Luke McGregor : https://github.com/lukemcgregor\n\n;(function (global, factory) {\n typeof exports === 'object' && typeof module !== 'undefined'\n && typeof require === 'function' ? factory(require('../moment')) :\n typeof define === 'function' && define.amd ? define(['../moment'], factory) :\n factory(global.moment)\n}(this, (function (moment) { 'use strict';\n\n //! moment.js locale configuration\n\n var enNz = moment.defineLocale('en-nz', {\n months: 'January_February_March_April_May_June_July_August_September_October_November_December'.split(\n '_'\n ),\n monthsShort: 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'),\n weekdays: 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split(\n '_'\n ),\n weekdaysShort: 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_'),\n weekdaysMin: 'Su_Mo_Tu_We_Th_Fr_Sa'.split('_'),\n longDateFormat: {\n LT: 'h:mm A',\n LTS: 'h:mm:ss A',\n L: 'DD/MM/YYYY',\n LL: 'D MMMM YYYY',\n LLL: 'D MMMM YYYY h:mm A',\n LLLL: 'dddd, D MMMM YYYY h:mm A',\n },\n calendar: {\n sameDay: '[Today at] LT',\n nextDay: '[Tomorrow at] LT',\n nextWeek: 'dddd [at] LT',\n lastDay: '[Yesterday at] LT',\n lastWeek: '[Last] dddd [at] LT',\n sameElse: 'L',\n },\n relativeTime: {\n future: 'in %s',\n past: '%s ago',\n s: 'a few seconds',\n ss: '%d seconds',\n m: 'a minute',\n mm: '%d minutes',\n h: 'an hour',\n hh: '%d hours',\n d: 'a day',\n dd: '%d days',\n M: 'a month',\n MM: '%d months',\n y: 'a year',\n yy: '%d years',\n },\n dayOfMonthOrdinalParse: /\\d{1,2}(st|nd|rd|th)/,\n ordinal: function (number) {\n var b = number % 10,\n output =\n ~~((number % 100) / 10) === 1\n ? 'th'\n : b === 1\n ? 'st'\n : b === 2\n ? 'nd'\n : b === 3\n ? 'rd'\n : 'th';\n return number + output;\n },\n week: {\n dow: 1, // Monday is the first day of the week.\n doy: 4, // The week that contains Jan 4th is the first week of the year.\n },\n });\n\n return enNz;\n\n})));\n","//! moment.js locale configuration\n//! locale : Frisian [fy]\n//! author : Robin van der Vliet : https://github.com/robin0van0der0v\n\n;(function (global, factory) {\n typeof exports === 'object' && typeof module !== 'undefined'\n && typeof require === 'function' ? factory(require('../moment')) :\n typeof define === 'function' && define.amd ? define(['../moment'], factory) :\n factory(global.moment)\n}(this, (function (moment) { 'use strict';\n\n //! moment.js locale configuration\n\n var monthsShortWithDots = 'jan._feb._mrt._apr._mai_jun._jul._aug._sep._okt._nov._des.'.split(\n '_'\n ),\n monthsShortWithoutDots = 'jan_feb_mrt_apr_mai_jun_jul_aug_sep_okt_nov_des'.split(\n '_'\n );\n\n var fy = moment.defineLocale('fy', {\n months: 'jannewaris_febrewaris_maart_april_maaie_juny_july_augustus_septimber_oktober_novimber_desimber'.split(\n '_'\n ),\n monthsShort: function (m, format) {\n if (!m) {\n return monthsShortWithDots;\n } else if (/-MMM-/.test(format)) {\n return monthsShortWithoutDots[m.month()];\n } else {\n return monthsShortWithDots[m.month()];\n }\n },\n monthsParseExact: true,\n weekdays: 'snein_moandei_tiisdei_woansdei_tongersdei_freed_sneon'.split(\n '_'\n ),\n weekdaysShort: 'si._mo._ti._wo._to._fr._so.'.split('_'),\n weekdaysMin: 'Si_Mo_Ti_Wo_To_Fr_So'.split('_'),\n weekdaysParseExact: true,\n longDateFormat: {\n LT: 'HH:mm',\n LTS: 'HH:mm:ss',\n L: 'DD-MM-YYYY',\n LL: 'D MMMM YYYY',\n LLL: 'D MMMM YYYY HH:mm',\n LLLL: 'dddd D MMMM YYYY HH:mm',\n },\n calendar: {\n sameDay: '[hjoed om] LT',\n nextDay: '[moarn om] LT',\n nextWeek: 'dddd [om] LT',\n lastDay: '[juster om] LT',\n lastWeek: '[ôfrûne] dddd [om] LT',\n sameElse: 'L',\n },\n relativeTime: {\n future: 'oer %s',\n past: '%s lyn',\n s: 'in pear sekonden',\n ss: '%d sekonden',\n m: 'ien minút',\n mm: '%d minuten',\n h: 'ien oere',\n hh: '%d oeren',\n d: 'ien dei',\n dd: '%d dagen',\n M: 'ien moanne',\n MM: '%d moannen',\n y: 'ien jier',\n yy: '%d jierren',\n },\n dayOfMonthOrdinalParse: /\\d{1,2}(ste|de)/,\n ordinal: function (number) {\n return (\n number +\n (number === 1 || number === 8 || number >= 20 ? 'ste' : 'de')\n );\n },\n week: {\n dow: 1, // Monday is the first day of the week.\n doy: 4, // The week that contains Jan 4th is the first week of the year.\n },\n });\n\n return fy;\n\n})));\n","//! moment.js locale configuration\n//! locale : English (Israel) [en-il]\n//! author : Chris Gedrim : https://github.com/chrisgedrim\n\n;(function (global, factory) {\n typeof exports === 'object' && typeof module !== 'undefined'\n && typeof require === 'function' ? factory(require('../moment')) :\n typeof define === 'function' && define.amd ? define(['../moment'], factory) :\n factory(global.moment)\n}(this, (function (moment) { 'use strict';\n\n //! moment.js locale configuration\n\n var enIl = moment.defineLocale('en-il', {\n months: 'January_February_March_April_May_June_July_August_September_October_November_December'.split(\n '_'\n ),\n monthsShort: 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'),\n weekdays: 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split(\n '_'\n ),\n weekdaysShort: 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_'),\n weekdaysMin: 'Su_Mo_Tu_We_Th_Fr_Sa'.split('_'),\n longDateFormat: {\n LT: 'HH:mm',\n LTS: 'HH:mm:ss',\n L: 'DD/MM/YYYY',\n LL: 'D MMMM YYYY',\n LLL: 'D MMMM YYYY HH:mm',\n LLLL: 'dddd, D MMMM YYYY HH:mm',\n },\n calendar: {\n sameDay: '[Today at] LT',\n nextDay: '[Tomorrow at] LT',\n nextWeek: 'dddd [at] LT',\n lastDay: '[Yesterday at] LT',\n lastWeek: '[Last] dddd [at] LT',\n sameElse: 'L',\n },\n relativeTime: {\n future: 'in %s',\n past: '%s ago',\n s: 'a few seconds',\n ss: '%d seconds',\n m: 'a minute',\n mm: '%d minutes',\n h: 'an hour',\n hh: '%d hours',\n d: 'a day',\n dd: '%d days',\n M: 'a month',\n MM: '%d months',\n y: 'a year',\n yy: '%d years',\n },\n dayOfMonthOrdinalParse: /\\d{1,2}(st|nd|rd|th)/,\n ordinal: function (number) {\n var b = number % 10,\n output =\n ~~((number % 100) / 10) === 1\n ? 'th'\n : b === 1\n ? 'st'\n : b === 2\n ? 'nd'\n : b === 3\n ? 'rd'\n : 'th';\n return number + output;\n },\n });\n\n return enIl;\n\n})));\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n// eslint-disable-next-line @typescript-eslint/triple-slash-reference\n///
\nimport { EventHandler, Internationalization, Property, NotifyPropertyChanges, Browser } from '@syncfusion/ej2-base';\nimport { Animation, Event, cldrData, getDefaultDateObject, detach } from '@syncfusion/ej2-base';\nimport { createElement, remove, addClass, L10n, removeClass, closest, append, attributes } from '@syncfusion/ej2-base';\nimport { KeyboardEvents, isNullOrUndefined, formatUnit, getValue, rippleEffect } from '@syncfusion/ej2-base';\nimport { extend } from '@syncfusion/ej2-base';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { DatePicker } from '../datepicker/datepicker';\nimport { TimePickerBase } from '../timepicker/timepicker';\n//class constant defination\nvar DATEWRAPPER = 'e-date-wrapper';\nvar DATEPICKERROOT = 'e-datepicker';\nvar DATETIMEWRAPPER = 'e-datetime-wrapper';\nvar DAY = new Date().getDate();\nvar MONTH = new Date().getMonth();\nvar YEAR = new Date().getFullYear();\nvar HOUR = new Date().getHours();\nvar MINUTE = new Date().getMinutes();\nvar SECOND = new Date().getSeconds();\nvar MILLISECOND = new Date().getMilliseconds();\nvar ROOT = 'e-datetimepicker';\nvar DATETIMEPOPUPWRAPPER = 'e-datetimepopup-wrapper';\nvar INPUTWRAPPER = 'e-input-group-icon';\nvar POPUP = 'e-popup';\nvar TIMEICON = 'e-time-icon';\nvar INPUTFOCUS = 'e-input-focus';\nvar POPUPDIMENSION = '250px';\nvar ICONANIMATION = 'e-icon-anim';\nvar DISABLED = 'e-disabled';\nvar ERROR = 'e-error';\nvar CONTENT = 'e-content';\nvar NAVIGATION = 'e-navigation';\nvar ACTIVE = 'e-active';\nvar HOVER = 'e-hover';\nvar ICONS = 'e-icons';\nvar HALFPOSITION = 2;\nvar LISTCLASS = 'e-list-item';\nvar ANIMATIONDURATION = 100;\nvar OVERFLOW = 'e-time-overflow';\n/**\n * Represents the DateTimePicker component that allows user to select\n * or enter a date time value.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar DateTimePicker = /** @class */ (function (_super) {\n __extends(DateTimePicker, _super);\n /**\n * Constructor for creating the widget\n *\n * @param {DateTimePickerModel} options - Specifies the DateTimePicker model.\n * @param {string | HTMLInputElement} element - Specifies the element to render as component.\n * @private\n */\n function DateTimePicker(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.valueWithMinutes = null;\n _this.scrollInvoked = false;\n _this.moduleName = _this.getModuleName();\n _this.dateTimeOptions = options;\n return _this;\n }\n DateTimePicker.prototype.focusHandler = function () {\n if (!this.enabled) {\n return;\n }\n addClass([this.inputWrapper.container], INPUTFOCUS);\n };\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n DateTimePicker.prototype.focusIn = function () {\n _super.prototype.focusIn.call(this);\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n DateTimePicker.prototype.focusOut = function () {\n if (document.activeElement === this.inputElement) {\n this.inputElement.blur();\n removeClass([this.inputWrapper.container], [INPUTFOCUS]);\n }\n };\n DateTimePicker.prototype.blurHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n // IE popup closing issue when click over the scrollbar\n if (this.isTimePopupOpen() && this.isPreventBlur) {\n this.inputElement.focus();\n return;\n }\n removeClass([this.inputWrapper.container], INPUTFOCUS);\n var blurArguments = {\n model: this\n };\n if (this.isTimePopupOpen()) {\n this.hide(e);\n }\n this.trigger('blur', blurArguments);\n };\n /**\n * To destroy the widget.\n *\n * @returns {void}\n */\n DateTimePicker.prototype.destroy = function () {\n if (this.popupObject && this.popupObject.element.classList.contains(POPUP)) {\n this.popupObject.destroy();\n detach(this.dateTimeWrapper);\n this.dateTimeWrapper = undefined;\n this.liCollections = this.timeCollections = [];\n if (!isNullOrUndefined(this.rippleFn)) {\n this.rippleFn();\n }\n }\n var ariaAttribute = {\n 'aria-live': 'assertive', 'aria-atomic': 'true', 'aria-invalid': 'false',\n 'aria-haspopup': 'true', 'aria-activedescendant': 'null',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false',\n 'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off'\n };\n if (this.inputElement) {\n Input.removeAttributes(ariaAttribute, this.inputElement);\n this.inputElement.removeAttribute('aria-placeholder');\n }\n if (this.isCalendar()) {\n if (this.popupWrapper) {\n detach(this.popupWrapper);\n }\n this.popupObject = this.popupWrapper = null;\n this.keyboardHandler.destroy();\n }\n this.unBindInputEvents();\n _super.prototype.destroy.call(this);\n };\n /**\n * To Initialize the control rendering.\n *\n * @returns {void}\n * @private\n */\n DateTimePicker.prototype.render = function () {\n this.timekeyConfigure = {\n enter: 'enter',\n escape: 'escape',\n end: 'end',\n tab: 'tab',\n home: 'home',\n down: 'downarrow',\n up: 'uparrow',\n left: 'leftarrow',\n right: 'rightarrow',\n open: 'alt+downarrow',\n close: 'alt+uparrow'\n };\n this.valueWithMinutes = null;\n this.previousDateTime = null;\n this.isPreventBlur = false;\n this.cloneElement = this.element.cloneNode(true);\n this.dateTimeFormat = this.cldrDateTimeFormat();\n this.initValue = this.value;\n _super.prototype.updateHtmlAttributeToElement.call(this);\n this.checkAttributes(false);\n var localeText = { placeholder: this.placeholder };\n this.l10n = new L10n('datetimepicker', localeText, this.locale);\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n _super.prototype.render.call(this);\n this.createInputElement();\n _super.prototype.updateHtmlAttributeToWrapper.call(this);\n this.bindInputEvents();\n if (this.enableMask) {\n this.notify(\"createMask\", {\n module: \"MaskedDateTime\",\n });\n }\n this.setValue();\n if (this.enableMask && !this.value && this.maskedDateValue && (this.floatLabelType == 'Always' || !this.floatLabelType || !this.placeholder)) {\n Input.setValue(this.maskedDateValue, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkValue(this.scrollTo))) }, true);\n this.previousDateTime = this.value && new Date(+this.value);\n if (this.element.tagName === 'EJS-DATETIMEPICKER') {\n this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';\n this.element.removeAttribute('tabindex');\n if (!this.enabled) {\n this.inputElement.tabIndex = -1;\n }\n }\n this.renderComplete();\n };\n DateTimePicker.prototype.setValue = function () {\n this.initValue = this.validateMinMaxRange(this.value);\n if (!this.strictMode && this.isDateObject(this.initValue)) {\n var value = this.validateMinMaxRange(this.initValue);\n Input.setValue(this.getFormattedValue(value), this.inputElement, this.floatLabelType, this.showClearButton);\n this.setProperties({ value: value }, true);\n }\n else {\n if (isNullOrUndefined(this.value)) {\n this.initValue = null;\n this.setProperties({ value: null }, true);\n }\n }\n this.valueWithMinutes = this.value;\n _super.prototype.updateInput.call(this);\n };\n DateTimePicker.prototype.validateMinMaxRange = function (value) {\n var result = value;\n if (this.isDateObject(value)) {\n result = this.validateValue(value);\n }\n else {\n if (+this.min > +this.max) {\n this.disablePopupButton(true);\n }\n }\n this.checkValidState(result);\n return result;\n };\n DateTimePicker.prototype.checkValidState = function (value) {\n this.isValidState = true;\n if (!this.strictMode) {\n if ((+(value) > +(this.max)) || (+(value) < +(this.min))) {\n this.isValidState = false;\n }\n }\n this.checkErrorState();\n };\n DateTimePicker.prototype.checkErrorState = function () {\n if (this.isValidState) {\n removeClass([this.inputWrapper.container], ERROR);\n }\n else {\n addClass([this.inputWrapper.container], ERROR);\n }\n attributes(this.inputElement, { 'aria-invalid': this.isValidState ? 'false' : 'true' });\n };\n DateTimePicker.prototype.validateValue = function (value) {\n var dateVal = value;\n if (this.strictMode) {\n if (+this.min > +this.max) {\n this.disablePopupButton(true);\n dateVal = this.max;\n }\n else if (+value < +this.min) {\n dateVal = this.min;\n }\n else if (+value > +this.max) {\n dateVal = this.max;\n }\n }\n else {\n if (+this.min > +this.max) {\n this.disablePopupButton(true);\n dateVal = value;\n }\n }\n return dateVal;\n };\n DateTimePicker.prototype.disablePopupButton = function (isDisable) {\n if (isDisable) {\n addClass([this.inputWrapper.buttons[0], this.timeIcon], DISABLED);\n this.hide();\n }\n else {\n removeClass([this.inputWrapper.buttons[0], this.timeIcon], DISABLED);\n }\n };\n DateTimePicker.prototype.getFormattedValue = function (value) {\n var dateOptions;\n if (!isNullOrUndefined(value)) {\n if (this.calendarMode === 'Gregorian') {\n dateOptions = { format: this.cldrDateTimeFormat(), type: 'dateTime', skeleton: 'yMd' };\n }\n else {\n dateOptions = { format: this.cldrDateTimeFormat(), type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n return this.globalize.formatDate(value, dateOptions);\n }\n else {\n return null;\n }\n };\n DateTimePicker.prototype.isDateObject = function (value) {\n return (!isNullOrUndefined(value) && !isNaN(+value)) ? true : false;\n };\n DateTimePicker.prototype.createInputElement = function () {\n removeClass([this.inputElement], DATEPICKERROOT);\n removeClass([this.inputWrapper.container], DATEWRAPPER);\n addClass([this.inputWrapper.container], DATETIMEWRAPPER);\n addClass([this.inputElement], ROOT);\n this.renderTimeIcon();\n };\n DateTimePicker.prototype.renderTimeIcon = function () {\n this.timeIcon = Input.appendSpan(INPUTWRAPPER + ' ' + TIMEICON + ' ' + ICONS, this.inputWrapper.container);\n };\n DateTimePicker.prototype.bindInputEvents = function () {\n EventHandler.add(this.timeIcon, 'mousedown', this.timeHandler, this);\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.dateHandler, this);\n EventHandler.add(this.inputElement, 'blur', this.blurHandler, this);\n EventHandler.add(this.inputElement, 'focus', this.focusHandler, this);\n this.defaultKeyConfigs = extend(this.defaultKeyConfigs, this.keyConfigs);\n this.keyboardHandler = new KeyboardEvents(this.inputElement, {\n eventName: 'keydown',\n keyAction: this.inputKeyAction.bind(this),\n keyConfigs: this.defaultKeyConfigs\n });\n };\n DateTimePicker.prototype.unBindInputEvents = function () {\n EventHandler.remove(this.timeIcon, 'mousedown touchstart', this.timeHandler);\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', this.dateHandler);\n if (this.inputElement) {\n EventHandler.remove(this.inputElement, 'blur', this.blurHandler);\n EventHandler.remove(this.inputElement, 'focus', this.focusHandler);\n }\n if (this.keyboardHandler) {\n this.keyboardHandler.destroy();\n }\n };\n DateTimePicker.prototype.cldrTimeFormat = function () {\n var cldrTime;\n if (this.isNullOrEmpty(this.timeFormat)) {\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrTime = (getValue('timeFormats.short', getDefaultDateObject()));\n }\n else {\n cldrTime = (this.getCultureTimeObject(cldrData, '' + this.locale));\n }\n }\n else {\n cldrTime = this.timeFormat;\n }\n return cldrTime;\n };\n DateTimePicker.prototype.cldrDateTimeFormat = function () {\n var cldrTime;\n var culture = new Internationalization(this.locale);\n var dateFormat = culture.getDatePattern({ skeleton: 'yMd' });\n if (this.isNullOrEmpty(this.formatString)) {\n cldrTime = dateFormat + ' ' + this.getCldrFormat('time');\n }\n else {\n cldrTime = this.formatString;\n }\n return cldrTime;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DateTimePicker.prototype.getCldrFormat = function (type) {\n var cldrDateTime;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrDateTime = (getValue('timeFormats.short', getDefaultDateObject()));\n }\n else {\n cldrDateTime = (this.getCultureTimeObject(cldrData, '' + this.locale));\n }\n return cldrDateTime;\n };\n DateTimePicker.prototype.isNullOrEmpty = function (value) {\n if (isNullOrUndefined(value) || (typeof value === 'string' && value.trim() === '')) {\n return true;\n }\n else {\n return false;\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DateTimePicker.prototype.getCultureTimeObject = function (ld, c) {\n if (this.calendarMode === 'Gregorian') {\n return getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.timeFormats.short', ld);\n }\n else {\n return getValue('main.' + '' + this.locale + '.dates.calendars.islamic.timeFormats.short', ld);\n }\n };\n DateTimePicker.prototype.timeHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n this.isIconClicked = true;\n if (Browser.isDevice) {\n this.inputElement.setAttribute('readonly', '');\n }\n if (e.currentTarget === this.timeIcon) {\n e.preventDefault();\n }\n if (this.enabled && !this.readonly) {\n if (this.isDatePopupOpen()) {\n _super.prototype.hide.call(this, e);\n }\n if (this.isTimePopupOpen()) {\n this.closePopup(e);\n }\n else {\n this.inputElement.focus();\n this.popupCreation('time', e);\n addClass([this.inputWrapper.container], [INPUTFOCUS]);\n }\n }\n this.isIconClicked = false;\n };\n DateTimePicker.prototype.dateHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n if (e.currentTarget === this.inputWrapper.buttons[0]) {\n e.preventDefault();\n }\n if (this.enabled && !this.readonly) {\n if (this.isTimePopupOpen()) {\n this.closePopup(e);\n }\n if (!isNullOrUndefined(this.popupWrapper)) {\n this.popupCreation('date', e);\n }\n }\n };\n DateTimePicker.prototype.show = function (type, e) {\n if ((this.enabled && this.readonly) || !this.enabled) {\n return;\n }\n else {\n if (type === 'time' && !this.dateTimeWrapper) {\n if (this.isDatePopupOpen()) {\n this.hide(e);\n }\n this.popupCreation('time', e);\n }\n else if (!this.popupObj) {\n if (this.isTimePopupOpen()) {\n this.hide(e);\n }\n _super.prototype.show.call(this);\n this.popupCreation('date', e);\n }\n }\n };\n DateTimePicker.prototype.toggle = function (e) {\n if (this.isDatePopupOpen()) {\n _super.prototype.hide.call(this, e);\n this.show('time', null);\n }\n else if (this.isTimePopupOpen()) {\n this.hide(e);\n _super.prototype.show.call(this, null, e);\n this.popupCreation('date', null);\n }\n else {\n this.show(null, e);\n }\n };\n DateTimePicker.prototype.listCreation = function () {\n var dateObject;\n if (this.calendarMode === 'Gregorian') {\n dateObject = this.globalize.parseDate(this.inputElement.value, {\n format: this.cldrDateTimeFormat(), type: 'datetime'\n });\n }\n else {\n dateObject = this.globalize.parseDate(this.inputElement.value, {\n format: this.cldrDateTimeFormat(), type: 'datetime', calendar: 'islamic'\n });\n }\n var value = isNullOrUndefined(this.value) ? this.inputElement.value !== '' ?\n dateObject :\n new Date() : this.value;\n this.valueWithMinutes = value;\n this.listWrapper = createElement('div', { className: CONTENT, attrs: { 'tabindex': '0' } });\n var min = this.startTime(value);\n var max = this.endTime(value);\n var listDetails = TimePickerBase.createListItems(this.createElement, min, max, this.globalize, this.cldrTimeFormat(), this.step);\n this.timeCollections = listDetails.collection;\n this.listTag = listDetails.list;\n attributes(this.listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options' });\n append([listDetails.list], this.listWrapper);\n this.wireTimeListEvents();\n var rippleModel = { duration: 300, selector: '.' + LISTCLASS };\n this.rippleFn = rippleEffect(this.listWrapper, rippleModel);\n this.liCollections = this.listWrapper.querySelectorAll('.' + LISTCLASS);\n };\n DateTimePicker.prototype.popupCreation = function (type, e) {\n if (Browser.isDevice) {\n this.element.setAttribute('readonly', 'readonly');\n }\n if (type === 'date') {\n if (!this.readonly && this.popupWrapper) {\n addClass([this.popupWrapper], DATETIMEPOPUPWRAPPER);\n attributes(this.popupWrapper, { 'id': this.element.id + '_datepopup' });\n }\n }\n else {\n if (!this.readonly) {\n this.dateTimeWrapper = createElement('div', {\n className: ROOT + ' ' + POPUP,\n attrs: { 'id': this.element.id + '_timepopup', 'style': 'visibility:hidden ; display:block' }\n });\n if (!isNullOrUndefined(this.cssClass)) {\n this.dateTimeWrapper.className += ' ' + this.cssClass;\n }\n if (!isNullOrUndefined(this.step) && this.step > 0) {\n this.listCreation();\n append([this.listWrapper], this.dateTimeWrapper);\n }\n document.body.appendChild(this.dateTimeWrapper);\n this.addTimeSelection();\n this.renderPopup();\n this.setTimeScrollPosition();\n this.openPopup(e);\n this.popupObject.refreshPosition(this.inputElement);\n }\n }\n };\n DateTimePicker.prototype.openPopup = function (e) {\n var _this = this;\n this.preventArgs = {\n cancel: false,\n popup: this.popupObject,\n event: e || null\n };\n var eventArgs = this.preventArgs;\n this.trigger('open', eventArgs, function (eventArgs) {\n _this.preventArgs = eventArgs;\n if (!_this.preventArgs.cancel && !_this.readonly) {\n var openAnimation = {\n name: 'FadeIn',\n duration: ANIMATIONDURATION\n };\n if (_this.zIndex === 1000) {\n _this.popupObject.show(new Animation(openAnimation), _this.element);\n }\n else {\n _this.popupObject.show(new Animation(openAnimation), null);\n }\n addClass([_this.inputWrapper.container], [ICONANIMATION]);\n attributes(_this.inputElement, { 'aria-expanded': 'true' });\n EventHandler.add(document, 'mousedown touchstart', _this.documentClickHandler, _this);\n }\n });\n };\n DateTimePicker.prototype.documentClickHandler = function (event) {\n var target = event.target;\n if ((!isNullOrUndefined(this.popupObject) && (this.inputWrapper.container.contains(target) ||\n (this.popupObject.element && this.popupObject.element.contains(target)))) && event.type !== 'touchstart') {\n event.preventDefault();\n }\n if (!(closest(target, '[id=\"' + (this.popupObject && this.popupObject.element.id + '\"]'))) && target !== this.inputElement\n && target !== this.timeIcon && target !== this.inputWrapper.container) {\n if (this.isTimePopupOpen()) {\n this.hide(event);\n this.focusOut();\n }\n }\n else if (target !== this.inputElement) {\n if (!Browser.isDevice) {\n this.isPreventBlur = ((document.activeElement === this.inputElement) && (Browser.isIE || Browser.info.name === 'edge')\n && target === this.popupObject.element);\n }\n }\n };\n DateTimePicker.prototype.isTimePopupOpen = function () {\n return (this.dateTimeWrapper && this.dateTimeWrapper.classList.contains('' + ROOT)) ? true : false;\n };\n DateTimePicker.prototype.isDatePopupOpen = function () {\n return (this.popupWrapper && this.popupWrapper.classList.contains('' + DATETIMEPOPUPWRAPPER)) ? true : false;\n };\n DateTimePicker.prototype.renderPopup = function () {\n var _this = this;\n this.containerStyle = this.inputWrapper.container.getBoundingClientRect();\n if (Browser.isDevice) {\n this.timeModal = createElement('div');\n this.timeModal.className = '' + ROOT + ' e-time-modal';\n document.body.className += ' ' + OVERFLOW;\n this.timeModal.style.display = 'block';\n document.body.appendChild(this.timeModal);\n }\n var offset = 4;\n this.popupObject = new Popup(this.dateTimeWrapper, {\n width: this.setPopupWidth(),\n zIndex: this.zIndex,\n targetType: 'container',\n collision: Browser.isDevice ? { X: 'fit', Y: 'fit' } : { X: 'flip', Y: 'flip' },\n relateTo: Browser.isDevice ? document.body : this.inputWrapper.container,\n position: Browser.isDevice ? { X: 'center', Y: 'center' } : { X: 'left', Y: 'bottom' },\n enableRtl: this.enableRtl,\n offsetY: offset,\n open: function () {\n _this.dateTimeWrapper.style.visibility = 'visible';\n addClass([_this.timeIcon], ACTIVE);\n if (!Browser.isDevice) {\n _this.timekeyConfigure = extend(_this.timekeyConfigure, _this.keyConfigs);\n _this.inputEvent = new KeyboardEvents(_this.inputWrapper.container, {\n keyAction: _this.timeKeyActionHandle.bind(_this),\n keyConfigs: _this.timekeyConfigure,\n eventName: 'keydown'\n });\n }\n }, close: function () {\n removeClass([_this.timeIcon], ACTIVE);\n _this.unWireTimeListEvents();\n _this.inputElement.setAttribute('aria-activedescendant', 'null');\n remove(_this.popupObject.element);\n _this.popupObject.destroy();\n _this.dateTimeWrapper.innerHTML = '';\n _this.listWrapper = _this.dateTimeWrapper = undefined;\n if (_this.inputEvent) {\n _this.inputEvent.destroy();\n }\n }, targetExitViewport: function () {\n if (!Browser.isDevice) {\n _this.hide();\n }\n }\n });\n this.popupObject.element.style.maxHeight = POPUPDIMENSION;\n };\n DateTimePicker.prototype.setDimension = function (width) {\n if (typeof width === 'number') {\n width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n // eslint-disable-next-line no-self-assign\n width = width;\n }\n else {\n width = '100%';\n }\n return width;\n };\n DateTimePicker.prototype.setPopupWidth = function () {\n var width = this.setDimension(this.width);\n if (width.indexOf('%') > -1) {\n var inputWidth = this.containerStyle.width * parseFloat(width) / 100;\n width = inputWidth.toString() + 'px';\n }\n return width;\n };\n DateTimePicker.prototype.wireTimeListEvents = function () {\n EventHandler.add(this.listWrapper, 'click', this.onMouseClick, this);\n if (!Browser.isDevice) {\n EventHandler.add(this.listWrapper, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.listWrapper, 'mouseout', this.onMouseLeave, this);\n }\n };\n DateTimePicker.prototype.unWireTimeListEvents = function () {\n if (this.listWrapper) {\n EventHandler.remove(this.listWrapper, 'click', this.onMouseClick);\n EventHandler.remove(document, 'mousedown touchstart', this.documentClickHandler);\n if (!Browser.isDevice) {\n EventHandler.add(this.listWrapper, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.listWrapper, 'mouseout', this.onMouseLeave, this);\n }\n }\n };\n DateTimePicker.prototype.onMouseOver = function (event) {\n var currentLi = closest(event.target, '.' + LISTCLASS);\n this.setTimeHover(currentLi, HOVER);\n };\n DateTimePicker.prototype.onMouseLeave = function () {\n this.removeTimeHover(HOVER);\n };\n DateTimePicker.prototype.setTimeHover = function (li, className) {\n if (this.enabled && this.isValidLI(li) && !li.classList.contains(className)) {\n this.removeTimeHover(className);\n addClass([li], className);\n }\n };\n DateTimePicker.prototype.getPopupHeight = function () {\n var height = parseInt(POPUPDIMENSION, 10);\n var popupHeight = this.dateTimeWrapper.getBoundingClientRect().height;\n return popupHeight > height ? height : popupHeight;\n };\n DateTimePicker.prototype.changeEvent = function (e) {\n if ((this.value && this.value.valueOf()) !== (this.previousDateTime && +this.previousDateTime.valueOf())) {\n _super.prototype.changeEvent.call(this, e);\n this.valueWithMinutes = this.value;\n this.setInputValue('date');\n this.previousDateTime = this.value && new Date(+this.value);\n }\n };\n DateTimePicker.prototype.updateValue = function (e) {\n this.setInputValue('time');\n if (+this.previousDateTime !== +this.value) {\n this.changedArgs = {\n value: this.value, event: e || null,\n isInteracted: !isNullOrUndefined(e),\n element: this.element\n };\n this.addTimeSelection();\n this.trigger('change', this.changedArgs);\n this.previousDateTime = this.value;\n }\n };\n DateTimePicker.prototype.setTimeScrollPosition = function () {\n var popupElement = this.selectedElement;\n if (!isNullOrUndefined(popupElement)) {\n this.findScrollTop(popupElement);\n }\n else if (this.dateTimeWrapper && this.checkDateValue(this.scrollTo)) {\n this.setScrollTo();\n }\n };\n DateTimePicker.prototype.findScrollTop = function (element) {\n var listHeight = this.getPopupHeight();\n var nextElement = element.nextElementSibling;\n var height = nextElement ? nextElement.offsetTop : element.offsetTop;\n var lineHeight = element.getBoundingClientRect().height;\n if ((height + element.offsetTop) > listHeight) {\n this.dateTimeWrapper.scrollTop = nextElement ? (height - (listHeight / HALFPOSITION + lineHeight / HALFPOSITION)) : height;\n }\n else {\n this.dateTimeWrapper.scrollTop = 0;\n }\n };\n DateTimePicker.prototype.setScrollTo = function () {\n var element;\n var items = this.dateTimeWrapper.querySelectorAll('.' + LISTCLASS);\n if (items.length >= 0) {\n this.scrollInvoked = true;\n var initialTime = this.timeCollections[0];\n var scrollTime = this.getDateObject(this.checkDateValue(this.scrollTo)).getTime();\n element = items[Math.round((scrollTime - initialTime) / (this.step * 60000))];\n }\n else {\n this.dateTimeWrapper.scrollTop = 0;\n }\n if (!isNullOrUndefined(element)) {\n this.findScrollTop(element);\n }\n else {\n this.dateTimeWrapper.scrollTop = 0;\n }\n };\n DateTimePicker.prototype.setInputValue = function (type) {\n if (type === 'date') {\n this.inputElement.value = this.previousElementValue = this.getFormattedValue(this.getFullDateTime());\n this.setProperties({ value: this.getFullDateTime() }, true);\n }\n else {\n var tempVal = this.getFormattedValue(new Date(this.timeCollections[this.activeIndex]));\n Input.setValue(tempVal, this.inputElement, this.floatLabelType, this.showClearButton);\n this.previousElementValue = this.inputElement.value;\n this.setProperties({ value: new Date(this.timeCollections[this.activeIndex]) }, true);\n if (this.enableMask) {\n this.createMask();\n }\n }\n this.updateIconState();\n };\n DateTimePicker.prototype.getFullDateTime = function () {\n var value = null;\n if (this.isDateObject(this.valueWithMinutes)) {\n value = this.combineDateTime(this.valueWithMinutes);\n }\n else {\n value = this.previousDate;\n }\n return this.validateMinMaxRange(value);\n };\n DateTimePicker.prototype.createMask = function () {\n this.notify(\"createMask\", {\n module: \"MaskedDateTime\",\n });\n };\n DateTimePicker.prototype.combineDateTime = function (value) {\n if (this.isDateObject(value)) {\n var day = this.previousDate.getDate();\n var month = this.previousDate.getMonth();\n var year = this.previousDate.getFullYear();\n var hour = value.getHours();\n var minutes = value.getMinutes();\n var seconds = value.getSeconds();\n return new Date(year, month, day, hour, minutes, seconds);\n }\n else {\n return this.previousDate;\n }\n };\n DateTimePicker.prototype.onMouseClick = function (event) {\n var target = event.target;\n var li = this.selectedElement = closest(target, '.' + LISTCLASS);\n if (li && li.classList.contains(LISTCLASS)) {\n this.timeValue = li.getAttribute('data-value');\n this.hide(event);\n }\n this.setSelection(li, event);\n };\n DateTimePicker.prototype.setSelection = function (li, event) {\n if (this.isValidLI(li) && !li.classList.contains(ACTIVE)) {\n this.selectedElement = li;\n var index = Array.prototype.slice.call(this.liCollections).indexOf(li);\n this.activeIndex = index;\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n addClass([this.selectedElement], ACTIVE);\n this.selectedElement.setAttribute('aria-selected', 'true');\n this.updateValue(event);\n }\n };\n DateTimePicker.prototype.setTimeActiveClass = function () {\n var collections = isNullOrUndefined(this.dateTimeWrapper) ? this.listWrapper : this.dateTimeWrapper;\n if (!isNullOrUndefined(collections)) {\n var items = collections.querySelectorAll('.' + LISTCLASS);\n if (items.length) {\n for (var i = 0; i < items.length; i++) {\n if (this.timeCollections[i] === +(this.valueWithMinutes)) {\n items[i].setAttribute('aria-selected', 'true');\n this.selectedElement = items[i];\n this.activeIndex = i;\n this.setTimeActiveDescendant();\n break;\n }\n }\n }\n }\n };\n DateTimePicker.prototype.setTimeActiveDescendant = function () {\n if (!isNullOrUndefined(this.selectedElement)) {\n attributes(this.inputElement, { 'aria-activedescendant': this.selectedElement.getAttribute('id') });\n }\n else {\n attributes(this.inputElement, { 'aria-activedescendant': 'null' });\n }\n };\n DateTimePicker.prototype.addTimeSelection = function () {\n this.selectedElement = null;\n this.removeTimeSelection();\n this.setTimeActiveClass();\n if (!isNullOrUndefined(this.selectedElement)) {\n addClass([this.selectedElement], ACTIVE);\n this.selectedElement.setAttribute('aria-selected', 'true');\n }\n };\n DateTimePicker.prototype.removeTimeSelection = function () {\n this.removeTimeHover(HOVER);\n if (!isNullOrUndefined(this.dateTimeWrapper)) {\n var items = this.dateTimeWrapper.querySelectorAll('.' + ACTIVE);\n if (items.length) {\n removeClass(items, ACTIVE);\n items[0].removeAttribute('aria-selected');\n }\n }\n };\n DateTimePicker.prototype.removeTimeHover = function (className) {\n var hoveredItem = this.getTimeHoverItem(className);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, className);\n }\n };\n DateTimePicker.prototype.getTimeHoverItem = function (className) {\n var collections = isNullOrUndefined(this.dateTimeWrapper) ? this.listWrapper : this.dateTimeWrapper;\n var hoveredItem;\n if (!isNullOrUndefined(collections)) {\n hoveredItem = collections.querySelectorAll('.' + className);\n }\n return hoveredItem;\n };\n DateTimePicker.prototype.isValidLI = function (li) {\n return (li && li.classList.contains(LISTCLASS) && !li.classList.contains(DISABLED));\n };\n DateTimePicker.prototype.calculateStartEnd = function (value, range, method) {\n var day = value.getDate();\n var month = value.getMonth();\n var year = value.getFullYear();\n var hours = value.getHours();\n var minutes = value.getMinutes();\n var seconds = value.getSeconds();\n var milliseconds = value.getMilliseconds();\n if (range) {\n if (method === 'starttime') {\n return new Date(year, month, day, 0, 0, 0);\n }\n else {\n return new Date(year, month, day, 23, 59, 59);\n }\n }\n else {\n return new Date(year, month, day, hours, minutes, seconds, milliseconds);\n }\n };\n DateTimePicker.prototype.startTime = function (date) {\n var tempStartValue;\n var start;\n var tempMin = this.min;\n var value = date === null ? new Date() : date;\n if ((+value.getDate() === +tempMin.getDate() && +value.getMonth() === +tempMin.getMonth() &&\n +value.getFullYear() === +tempMin.getFullYear()) || ((+new Date(value.getFullYear(), value.getMonth(), value.getDate())) <=\n +new Date(tempMin.getFullYear(), tempMin.getMonth(), tempMin.getDate()))) {\n start = false;\n tempStartValue = this.min;\n }\n else if (+value < +this.max && +value > +this.min) {\n start = true;\n tempStartValue = value;\n }\n else if (+value >= +this.max) {\n start = true;\n tempStartValue = this.max;\n }\n return this.calculateStartEnd(tempStartValue, start, 'starttime');\n };\n DateTimePicker.prototype.endTime = function (date) {\n var tempEndValue;\n var end;\n var tempMax = this.max;\n var value = date === null ? new Date() : date;\n if ((+value.getDate() === +tempMax.getDate() && +value.getMonth() === +tempMax.getMonth() &&\n +value.getFullYear() === +tempMax.getFullYear()) || (+new Date(value.getUTCFullYear(), value.getMonth(), value.getDate()) >=\n +new Date(tempMax.getFullYear(), tempMax.getMonth(), tempMax.getDate()))) {\n end = false;\n tempEndValue = this.max;\n }\n else if (+value < +this.max && +value > +this.min) {\n end = true;\n tempEndValue = value;\n }\n else if (+value <= +this.min) {\n end = true;\n tempEndValue = this.min;\n }\n return this.calculateStartEnd(tempEndValue, end, 'endtime');\n };\n DateTimePicker.prototype.hide = function (e) {\n var _this = this;\n if (this.popupObj || this.dateTimeWrapper) {\n this.preventArgs = {\n cancel: false,\n popup: this.popupObj || this.popupObject,\n event: e || null\n };\n var eventArgs = this.preventArgs;\n if (isNullOrUndefined(this.popupObj)) {\n this.trigger('close', eventArgs, function (eventArgs) {\n _this.dateTimeCloseEventCallback(e, eventArgs);\n });\n }\n else {\n this.dateTimeCloseEventCallback(e, eventArgs);\n }\n }\n else {\n if (Browser.isDevice && this.allowEdit && !this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n this.setAllowEdit();\n }\n };\n DateTimePicker.prototype.dateTimeCloseEventCallback = function (e, eventArgs) {\n this.preventArgs = eventArgs;\n if (!this.preventArgs.cancel) {\n if (this.isDatePopupOpen()) {\n _super.prototype.hide.call(this, e);\n }\n else if (this.isTimePopupOpen()) {\n this.closePopup(e);\n removeClass([document.body], OVERFLOW);\n if (Browser.isDevice && this.timeModal) {\n this.timeModal.style.display = 'none';\n this.timeModal.outerHTML = '';\n this.timeModal = null;\n }\n this.setTimeActiveDescendant();\n }\n }\n if (Browser.isDevice && this.allowEdit && !this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n this.setAllowEdit();\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DateTimePicker.prototype.closePopup = function (e) {\n if (this.isTimePopupOpen() && this.popupObject) {\n var animModel = {\n name: 'FadeOut',\n duration: ANIMATIONDURATION,\n delay: 0\n };\n this.popupObject.hide(new Animation(animModel));\n this.inputWrapper.container.classList.remove(ICONANIMATION);\n attributes(this.inputElement, { 'aria-expanded': 'false' });\n EventHandler.remove(document, 'mousedown touchstart', this.documentClickHandler);\n }\n };\n DateTimePicker.prototype.preRender = function () {\n this.checkFormat();\n this.dateTimeFormat = this.cldrDateTimeFormat();\n _super.prototype.preRender.call(this);\n removeClass([this.inputElementCopy], [ROOT]);\n };\n DateTimePicker.prototype.getProperty = function (date, val) {\n if (val === 'min') {\n this.setProperties({ min: this.validateValue(date.min) }, true);\n }\n else {\n this.setProperties({ max: this.validateValue(date.max) }, true);\n }\n };\n DateTimePicker.prototype.checkAttributes = function (isDynamic) {\n var attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['style', 'name', 'step', 'disabled', 'readonly', 'value', 'min', 'max', 'placeholder', 'type'];\n var value;\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.inputElement.getAttribute(prop))) {\n switch (prop) {\n case 'name':\n this.inputElement.setAttribute('name', this.inputElement.getAttribute(prop));\n break;\n case 'step':\n this.step = parseInt(this.inputElement.getAttribute(prop), 10);\n break;\n case 'readonly':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['readonly'] === undefined)) || isDynamic) {\n var readonly = this.inputElement.getAttribute(prop) === 'disabled' ||\n this.inputElement.getAttribute(prop) === '' ||\n this.inputElement.getAttribute(prop) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !isDynamic);\n }\n break;\n case 'placeholder':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.inputElement.getAttribute(prop) }, !isDynamic);\n }\n break;\n case 'min':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['min'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!this.isNullOrEmpty(value) && !isNaN(+value)) {\n this.setProperties({ min: value }, !isDynamic);\n }\n }\n break;\n case 'disabled':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['enabled'] === undefined)) || isDynamic) {\n var enabled = this.inputElement.getAttribute(prop) === 'disabled' ||\n this.inputElement.getAttribute(prop) === 'true' ||\n this.inputElement.getAttribute(prop) === '' ? false : true;\n this.setProperties({ enabled: enabled }, !isDynamic);\n }\n break;\n case 'value':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['value'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!this.isNullOrEmpty(value) && !isNaN(+value)) {\n this.setProperties({ value: value }, !isDynamic);\n }\n }\n break;\n case 'max':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['max'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!this.isNullOrEmpty(value) && !isNaN(+value)) {\n this.setProperties({ max: value }, !isDynamic);\n }\n }\n break;\n }\n }\n }\n };\n DateTimePicker.prototype.requiredModules = function () {\n var modules = [];\n if (this) {\n modules.push({ args: [this], member: 'islamic' });\n }\n if (this.enableMask) {\n modules.push(this.maskedDateModule());\n }\n return modules;\n };\n DateTimePicker.prototype.maskedDateModule = function () {\n var modules = { args: [this], member: 'MaskedDateTime' };\n return modules;\n };\n DateTimePicker.prototype.getTimeActiveElement = function () {\n if (!isNullOrUndefined(this.dateTimeWrapper)) {\n return this.dateTimeWrapper.querySelectorAll('.' + ACTIVE);\n }\n else {\n return null;\n }\n };\n DateTimePicker.prototype.createDateObj = function (val) {\n return val instanceof Date ? val : null;\n };\n DateTimePicker.prototype.getDateObject = function (text) {\n if (!this.isNullOrEmpty(text)) {\n var dateValue = this.createDateObj(text);\n var value = this.valueWithMinutes;\n var status_1 = !isNullOrUndefined(value);\n if (this.checkDateValue(dateValue)) {\n var date = status_1 ? value.getDate() : DAY;\n var month = status_1 ? value.getMonth() : MONTH;\n var year = status_1 ? value.getFullYear() : YEAR;\n var hour = status_1 ? value.getHours() : HOUR;\n var minute = status_1 ? value.getMinutes() : MINUTE;\n var second = status_1 ? value.getSeconds() : SECOND;\n var millisecond = status_1 ? value.getMilliseconds() : MILLISECOND;\n if (!this.scrollInvoked) {\n return new Date(year, month, date, hour, minute, second, millisecond);\n }\n else {\n this.scrollInvoked = false;\n return new Date(year, month, date, dateValue.getHours(), dateValue.getMinutes(), dateValue.getSeconds(), dateValue.getMilliseconds());\n }\n }\n }\n return null;\n };\n DateTimePicker.prototype.findNextTimeElement = function (event) {\n var textVal = (this.inputElement).value;\n var value = isNullOrUndefined(this.valueWithMinutes) ? this.createDateObj(textVal) :\n this.getDateObject(this.valueWithMinutes);\n var dateTimeVal = null;\n var listCount = this.liCollections.length;\n if (!isNullOrUndefined(this.activeIndex) || !isNullOrUndefined(this.checkDateValue(value))) {\n if (event.action === 'home') {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[0])));\n this.activeIndex = 0;\n }\n else if (event.action === 'end') {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[this.timeCollections.length - 1])));\n this.activeIndex = this.timeCollections.length - 1;\n }\n else {\n if (event.action === 'down') {\n for (var i = 0; i < listCount; i++) {\n if (+value < this.timeCollections[i]) {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[i])));\n this.activeIndex = i;\n break;\n }\n }\n }\n else {\n for (var i = listCount - 1; i >= 0; i--) {\n if (+value > this.timeCollections[i]) {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[i])));\n this.activeIndex = i;\n break;\n }\n }\n }\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n this.timeElementValue(isNullOrUndefined(dateTimeVal) ? null : new Date(dateTimeVal));\n }\n };\n DateTimePicker.prototype.setTimeValue = function (date, value) {\n var dateString;\n var time;\n var val = this.validateMinMaxRange(value);\n var newval = this.createDateObj(val);\n if (this.getFormattedValue(newval) !== (!isNullOrUndefined(this.value) ? this.getFormattedValue(this.value) : null)) {\n this.valueWithMinutes = isNullOrUndefined(newval) ? null : newval;\n time = new Date(+this.valueWithMinutes);\n }\n else {\n if (this.strictMode) {\n //for strict mode case, when value not present within a range. Reset the nearest range value.\n date = newval;\n }\n this.valueWithMinutes = this.checkDateValue(date);\n time = new Date(+this.valueWithMinutes);\n }\n if (this.calendarMode === 'Gregorian') {\n dateString = this.globalize.formatDate(time, {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.cldrDateTimeFormat(),\n type: 'dateTime', skeleton: 'yMd'\n });\n }\n else {\n dateString = this.globalize.formatDate(time, {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.cldrDateTimeFormat(),\n type: 'dateTime', skeleton: 'yMd', calendar: 'islamic'\n });\n }\n if (!this.strictMode && isNullOrUndefined(time)) {\n Input.setValue(dateString, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n else {\n Input.setValue(dateString, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n return time;\n };\n DateTimePicker.prototype.timeElementValue = function (value) {\n if (!isNullOrUndefined(this.checkDateValue(value)) && !this.isNullOrEmpty(value)) {\n var date = value instanceof Date ? value : this.getDateObject(value);\n return this.setTimeValue(date, value);\n }\n return null;\n };\n DateTimePicker.prototype.timeKeyHandler = function (event) {\n if (isNullOrUndefined(this.step) || this.step <= 0) {\n return;\n }\n var listCount = this.timeCollections.length;\n if (isNullOrUndefined(this.getTimeActiveElement()) || this.getTimeActiveElement().length === 0) {\n if (this.liCollections.length > 0) {\n if (isNullOrUndefined(this.value) && isNullOrUndefined(this.activeIndex)) {\n this.activeIndex = 0;\n this.selectedElement = this.liCollections[0];\n this.timeElementValue(new Date(this.timeCollections[0]));\n }\n else {\n this.findNextTimeElement(event);\n }\n }\n }\n else {\n var nextItemValue = void 0;\n if ((event.keyCode >= 37) && (event.keyCode <= 40)) {\n var index = (event.keyCode === 40 || event.keyCode === 39) ? ++this.activeIndex : --this.activeIndex;\n this.activeIndex = index = this.activeIndex === (listCount) ? 0 : this.activeIndex;\n this.activeIndex = index = this.activeIndex < 0 ? (listCount - 1) : this.activeIndex;\n nextItemValue = isNullOrUndefined(this.timeCollections[index]) ? this.timeCollections[0] : this.timeCollections[index];\n }\n else if (event.action === 'home') {\n this.activeIndex = 0;\n nextItemValue = this.timeCollections[0];\n }\n else if (event.action === 'end') {\n this.activeIndex = listCount - 1;\n nextItemValue = this.timeCollections[listCount - 1];\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n this.timeElementValue(new Date(nextItemValue));\n }\n this.isNavigate = true;\n this.setTimeHover(this.selectedElement, NAVIGATION);\n this.setTimeActiveDescendant();\n if (this.isTimePopupOpen() && this.selectedElement !== null && (!event || event.type !== 'click')) {\n this.setTimeScrollPosition();\n }\n };\n DateTimePicker.prototype.timeKeyActionHandle = function (event) {\n if (this.enabled) {\n if (event.action !== 'right' && event.action !== 'left' && event.action !== 'tab') {\n event.preventDefault();\n }\n switch (event.action) {\n case 'up':\n case 'down':\n case 'home':\n case 'end':\n this.timeKeyHandler(event);\n break;\n case 'enter':\n if (this.isNavigate) {\n this.selectedElement = this.liCollections[this.activeIndex];\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n this.setInputValue('time');\n if (+this.previousDateTime !== +this.value) {\n this.changedArgs.value = this.value;\n this.addTimeSelection();\n this.previousDateTime = this.value;\n }\n }\n else {\n this.updateValue(event);\n }\n this.hide(event);\n addClass([this.inputWrapper.container], INPUTFOCUS);\n this.isNavigate = false;\n event.stopPropagation();\n break;\n case 'escape':\n this.hide(event);\n break;\n default:\n this.isNavigate = false;\n break;\n }\n }\n };\n DateTimePicker.prototype.inputKeyAction = function (event) {\n switch (event.action) {\n case 'altDownArrow':\n this.strictModeUpdate();\n this.updateInput();\n this.toggle(event);\n break;\n }\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {DateTimePickerModel} newProp - Returns the dynamic property value of the component.\n * @param {DateTimePickerModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n\n */\n DateTimePicker.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'value':\n this.isDynamicValueChanged = true;\n this.invalidValueString = null;\n this.checkInvalidValue(newProp.value);\n newProp.value = this.value;\n newProp.value = this.validateValue(newProp.value);\n Input.setValue(this.getFormattedValue(newProp.value), this.inputElement, this.floatLabelType, this.showClearButton);\n this.valueWithMinutes = newProp.value;\n this.setProperties({ value: newProp.value }, true);\n if (this.popupObj) {\n this.popupUpdate();\n }\n this.previousDateTime = new Date(this.inputElement.value);\n this.updateInput();\n this.changeTrigger(null);\n this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;\n if (this.enableMask && this.value) {\n this.notify(\"createMask\", {\n module: \"MaskedDateTime\",\n });\n }\n break;\n case 'min':\n case 'max':\n this.getProperty(newProp, prop);\n this.updateInput();\n break;\n case 'enableRtl':\n Input.setEnableRtl(this.enableRtl, [this.inputWrapper.container]);\n break;\n case 'cssClass':\n if (!isNullOrUndefined(oldProp.cssClass)) {\n oldProp.cssClass = (oldProp.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(newProp.cssClass)) {\n newProp.cssClass = (newProp.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n Input.setCssClass(newProp.cssClass, [this.inputWrapper.container], oldProp.cssClass);\n if (this.dateTimeWrapper) {\n Input.setCssClass(newProp.cssClass, [this.dateTimeWrapper], oldProp.cssClass);\n }\n break;\n case 'locale':\n this.globalize = new Internationalization(this.locale);\n this.l10n.setLocale(this.locale);\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n Input.setPlaceholder(this.l10n.getConstant('placeholder'), this.inputElement);\n this.dateTimeFormat = this.cldrDateTimeFormat();\n _super.prototype.updateInput.call(this);\n break;\n case 'htmlAttributes':\n this.updateHtmlAttributeToElement();\n this.updateHtmlAttributeToWrapper();\n this.checkAttributes(true);\n break;\n case 'format':\n this.setProperties({ format: newProp.format }, true);\n this.checkFormat();\n this.dateTimeFormat = this.formatString;\n this.setValue();\n if (this.enableMask) {\n this.notify(\"createMask\", {\n module: \"MaskedDateTime\",\n });\n if (!this.value) {\n Input.setValue(this.maskedDateValue, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n }\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.inputElement);\n this.inputElement.setAttribute('aria-placeholder', newProp.placeholder);\n break;\n case 'enabled':\n Input.setEnabled(this.enabled, this.inputElement);\n if (!this.enabled) {\n this.inputElement.tabIndex = -1;\n }\n break;\n case 'strictMode':\n this.invalidValueString = null;\n this.updateInput();\n break;\n case 'width':\n this.setWidth(newProp.width);\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement);\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n Input.removeFloating(this.inputWrapper);\n Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);\n break;\n case 'scrollTo':\n if (this.checkDateValue(new Date(this.checkValue(newProp.scrollTo)))) {\n if (this.dateTimeWrapper) {\n this.setScrollTo();\n }\n this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkValue(newProp.scrollTo))) }, true);\n }\n else {\n this.setProperties({ scrollTo: null }, true);\n }\n break;\n case 'enableMask':\n if (this.enableMask) {\n this.notify(\"createMask\", {\n module: \"MaskedDateTime\",\n });\n Input.setValue(this.maskedDateValue, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n else {\n if (this.inputElement.value === this.maskedDateValue) {\n this.maskedDateValue = '';\n Input.setValue(this.maskedDateValue, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n }\n break;\n default:\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp);\n break;\n }\n if (!this.isDynamicValueChanged) {\n this.hide(null);\n }\n this.isDynamicValueChanged = false;\n }\n };\n /**\n * To get component name.\n *\n * @returns {string} Returns the component name.\n * @private\n */\n DateTimePicker.prototype.getModuleName = function () {\n return 'datetimepicker';\n };\n DateTimePicker.prototype.restoreValue = function () {\n this.previousDateTime = this.previousDate;\n this.currentDate = this.value ? this.value : new Date();\n this.valueWithMinutes = this.value;\n this.previousDate = this.value;\n this.previousElementValue = this.previousElementValue = (isNullOrUndefined(this.inputValueCopy)) ? '' :\n this.getFormattedValue(this.inputValueCopy);\n };\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"timeFormat\", void 0);\n __decorate([\n Property(30)\n ], DateTimePicker.prototype, \"step\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"scrollTo\", void 0);\n __decorate([\n Property(1000)\n ], DateTimePicker.prototype, \"zIndex\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"keyConfigs\", void 0);\n __decorate([\n Property({})\n ], DateTimePicker.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(true)\n ], DateTimePicker.prototype, \"allowEdit\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"isMultiSelection\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"values\", void 0);\n __decorate([\n Property(true)\n ], DateTimePicker.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"placeholder\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"strictMode\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"serverTimezoneOffset\", void 0);\n __decorate([\n Property(new Date(1900, 0, 1))\n ], DateTimePicker.prototype, \"min\", void 0);\n __decorate([\n Property(new Date(2099, 11, 31))\n ], DateTimePicker.prototype, \"max\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"firstDayOfWeek\", void 0);\n __decorate([\n Property('Gregorian')\n ], DateTimePicker.prototype, \"calendarMode\", void 0);\n __decorate([\n Property('Month')\n ], DateTimePicker.prototype, \"start\", void 0);\n __decorate([\n Property('Month')\n ], DateTimePicker.prototype, \"depth\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"weekNumber\", void 0);\n __decorate([\n Property(true)\n ], DateTimePicker.prototype, \"showTodayButton\", void 0);\n __decorate([\n Property('Short')\n ], DateTimePicker.prototype, \"dayHeaderFormat\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"openOnFocus\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"enableMask\", void 0);\n __decorate([\n Property({ day: 'day', month: 'month', year: 'year', hour: 'hour', minute: 'minute', second: 'second', dayOfTheWeek: 'day of the week' })\n ], DateTimePicker.prototype, \"maskPlaceholder\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"cleared\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"destroyed\", void 0);\n DateTimePicker = __decorate([\n NotifyPropertyChanges\n ], DateTimePicker);\n return DateTimePicker;\n}(DatePicker));\nexport { DateTimePicker };\n","function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nimport Vue from '../../utils/vue';\nimport { mergeData } from 'vue-functional-data-merge';\nimport { kebabCase, pascalCase, trim } from '../../utils/string';\nimport { commonIconProps, BVIconBase } from './icon-base';\n/**\n * Icon component generator function\n *\n * @param {string} icon name (minus the leading `BIcon`)\n * @param {string} raw `innerHTML` for SVG\n * @return {VueComponent}\n */\n\nexport var makeIcon = function makeIcon(name, content) {\n // For performance reason we pre-compute some values, so that\n // they are not computed on each render of the icon component\n var kebabName = kebabCase(name);\n var iconName = \"BIcon\".concat(pascalCase(name));\n var iconNameClass = \"bi-\".concat(kebabName);\n var iconTitle = kebabName.replace(/-/g, ' ');\n var svgContent = trim(content || ''); // Return the icon component definition\n\n return /*#__PURE__*/Vue.extend({\n name: iconName,\n functional: true,\n props: _objectSpread(_objectSpread({}, commonIconProps), {}, {\n stacked: {\n type: Boolean,\n default: false\n }\n }),\n render: function render(h, _ref) {\n var data = _ref.data,\n props = _ref.props;\n return h(BVIconBase, mergeData( // Defaults\n {\n props: {\n title: iconTitle\n },\n attrs: {\n 'aria-label': iconTitle\n }\n }, // User data\n data, // Required data\n {\n staticClass: iconNameClass,\n props: _objectSpread(_objectSpread({}, props), {}, {\n content: svgContent\n })\n }));\n }\n });\n};","// --- BEGIN AUTO-GENERATED FILE ---\n//\n// @IconsVersion: 1.0.0\n// @Generated: 2020-09-13T20:29:07.660Z\n//\n// This file is generated on each build. Do not edit this file!\n/*!\n * BootstrapVue Icons, generated from Bootstrap Icons 1.0.0\n *\n * @link https://icons.getbootstrap.com/\n * @license MIT\n * https://github.com/twbs/icons/blob/master/LICENSE.md\n */import{makeIcon}from'./helpers/make-icon';// --- BootstrapVue custom icons ---\nexport var BIconBlank=/*#__PURE__*/makeIcon('Blank','');// --- Bootstrap Icons ---\n// eslint-disable-next-line\nexport var BIconAlarm=/*#__PURE__*/makeIcon('Alarm','
');// eslint-disable-next-line\nexport var BIconAlarmFill=/*#__PURE__*/makeIcon('AlarmFill','
');// eslint-disable-next-line\nexport var BIconAlignBottom=/*#__PURE__*/makeIcon('AlignBottom','
');// eslint-disable-next-line\nexport var BIconAlignCenter=/*#__PURE__*/makeIcon('AlignCenter','
');// eslint-disable-next-line\nexport var BIconAlignEnd=/*#__PURE__*/makeIcon('AlignEnd','
');// eslint-disable-next-line\nexport var BIconAlignMiddle=/*#__PURE__*/makeIcon('AlignMiddle','
');// eslint-disable-next-line\nexport var BIconAlignStart=/*#__PURE__*/makeIcon('AlignStart','
');// eslint-disable-next-line\nexport var BIconAlignTop=/*#__PURE__*/makeIcon('AlignTop','
');// eslint-disable-next-line\nexport var BIconAlt=/*#__PURE__*/makeIcon('Alt','
');// eslint-disable-next-line\nexport var BIconApp=/*#__PURE__*/makeIcon('App','
');// eslint-disable-next-line\nexport var BIconAppIndicator=/*#__PURE__*/makeIcon('AppIndicator','
');// eslint-disable-next-line\nexport var BIconArchive=/*#__PURE__*/makeIcon('Archive','
');// eslint-disable-next-line\nexport var BIconArchiveFill=/*#__PURE__*/makeIcon('ArchiveFill','
');// eslint-disable-next-line\nexport var BIconArrow90degDown=/*#__PURE__*/makeIcon('Arrow90degDown','
');// eslint-disable-next-line\nexport var BIconArrow90degLeft=/*#__PURE__*/makeIcon('Arrow90degLeft','
');// eslint-disable-next-line\nexport var BIconArrow90degRight=/*#__PURE__*/makeIcon('Arrow90degRight','
');// eslint-disable-next-line\nexport var BIconArrow90degUp=/*#__PURE__*/makeIcon('Arrow90degUp','
');// eslint-disable-next-line\nexport var BIconArrowBarDown=/*#__PURE__*/makeIcon('ArrowBarDown','
');// eslint-disable-next-line\nexport var BIconArrowBarLeft=/*#__PURE__*/makeIcon('ArrowBarLeft','
');// eslint-disable-next-line\nexport var BIconArrowBarRight=/*#__PURE__*/makeIcon('ArrowBarRight','
');// eslint-disable-next-line\nexport var BIconArrowBarUp=/*#__PURE__*/makeIcon('ArrowBarUp','
');// eslint-disable-next-line\nexport var BIconArrowClockwise=/*#__PURE__*/makeIcon('ArrowClockwise','
');// eslint-disable-next-line\nexport var BIconArrowCounterclockwise=/*#__PURE__*/makeIcon('ArrowCounterclockwise','
');// eslint-disable-next-line\nexport var BIconArrowDown=/*#__PURE__*/makeIcon('ArrowDown','
');// eslint-disable-next-line\nexport var BIconArrowDownCircle=/*#__PURE__*/makeIcon('ArrowDownCircle','
');// eslint-disable-next-line\nexport var BIconArrowDownCircleFill=/*#__PURE__*/makeIcon('ArrowDownCircleFill','
');// eslint-disable-next-line\nexport var BIconArrowDownLeft=/*#__PURE__*/makeIcon('ArrowDownLeft','
');// eslint-disable-next-line\nexport var BIconArrowDownLeftCircle=/*#__PURE__*/makeIcon('ArrowDownLeftCircle','
');// eslint-disable-next-line\nexport var BIconArrowDownLeftCircleFill=/*#__PURE__*/makeIcon('ArrowDownLeftCircleFill','
');// eslint-disable-next-line\nexport var BIconArrowDownLeftSquare=/*#__PURE__*/makeIcon('ArrowDownLeftSquare','
');// eslint-disable-next-line\nexport var BIconArrowDownLeftSquareFill=/*#__PURE__*/makeIcon('ArrowDownLeftSquareFill','
');// eslint-disable-next-line\nexport var BIconArrowDownRight=/*#__PURE__*/makeIcon('ArrowDownRight','
');// eslint-disable-next-line\nexport var BIconArrowDownRightCircle=/*#__PURE__*/makeIcon('ArrowDownRightCircle','
');// eslint-disable-next-line\nexport var BIconArrowDownRightCircleFill=/*#__PURE__*/makeIcon('ArrowDownRightCircleFill','
');// eslint-disable-next-line\nexport var BIconArrowDownRightSquare=/*#__PURE__*/makeIcon('ArrowDownRightSquare','
');// eslint-disable-next-line\nexport var BIconArrowDownRightSquareFill=/*#__PURE__*/makeIcon('ArrowDownRightSquareFill','
');// eslint-disable-next-line\nexport var BIconArrowDownShort=/*#__PURE__*/makeIcon('ArrowDownShort','
');// eslint-disable-next-line\nexport var BIconArrowDownSquare=/*#__PURE__*/makeIcon('ArrowDownSquare','
');// eslint-disable-next-line\nexport var BIconArrowDownSquareFill=/*#__PURE__*/makeIcon('ArrowDownSquareFill','
');// eslint-disable-next-line\nexport var BIconArrowDownUp=/*#__PURE__*/makeIcon('ArrowDownUp','
');// eslint-disable-next-line\nexport var BIconArrowLeft=/*#__PURE__*/makeIcon('ArrowLeft','
');// eslint-disable-next-line\nexport var BIconArrowLeftCircle=/*#__PURE__*/makeIcon('ArrowLeftCircle','
');// eslint-disable-next-line\nexport var BIconArrowLeftCircleFill=/*#__PURE__*/makeIcon('ArrowLeftCircleFill','
');// eslint-disable-next-line\nexport var BIconArrowLeftRight=/*#__PURE__*/makeIcon('ArrowLeftRight','
');// eslint-disable-next-line\nexport var BIconArrowLeftShort=/*#__PURE__*/makeIcon('ArrowLeftShort','
');// eslint-disable-next-line\nexport var BIconArrowLeftSquare=/*#__PURE__*/makeIcon('ArrowLeftSquare','
');// eslint-disable-next-line\nexport var BIconArrowLeftSquareFill=/*#__PURE__*/makeIcon('ArrowLeftSquareFill','
');// eslint-disable-next-line\nexport var BIconArrowRepeat=/*#__PURE__*/makeIcon('ArrowRepeat','
');// eslint-disable-next-line\nexport var BIconArrowReturnLeft=/*#__PURE__*/makeIcon('ArrowReturnLeft','
');// eslint-disable-next-line\nexport var BIconArrowReturnRight=/*#__PURE__*/makeIcon('ArrowReturnRight','
');// eslint-disable-next-line\nexport var BIconArrowRight=/*#__PURE__*/makeIcon('ArrowRight','
');// eslint-disable-next-line\nexport var BIconArrowRightCircle=/*#__PURE__*/makeIcon('ArrowRightCircle','
');// eslint-disable-next-line\nexport var BIconArrowRightCircleFill=/*#__PURE__*/makeIcon('ArrowRightCircleFill','
');// eslint-disable-next-line\nexport var BIconArrowRightShort=/*#__PURE__*/makeIcon('ArrowRightShort','
');// eslint-disable-next-line\nexport var BIconArrowRightSquare=/*#__PURE__*/makeIcon('ArrowRightSquare','
');// eslint-disable-next-line\nexport var BIconArrowRightSquareFill=/*#__PURE__*/makeIcon('ArrowRightSquareFill','
');// eslint-disable-next-line\nexport var BIconArrowUp=/*#__PURE__*/makeIcon('ArrowUp','
');// eslint-disable-next-line\nexport var BIconArrowUpCircle=/*#__PURE__*/makeIcon('ArrowUpCircle','
');// eslint-disable-next-line\nexport var BIconArrowUpCircleFill=/*#__PURE__*/makeIcon('ArrowUpCircleFill','
');// eslint-disable-next-line\nexport var BIconArrowUpLeft=/*#__PURE__*/makeIcon('ArrowUpLeft','
');// eslint-disable-next-line\nexport var BIconArrowUpLeftCircle=/*#__PURE__*/makeIcon('ArrowUpLeftCircle','
');// eslint-disable-next-line\nexport var BIconArrowUpLeftCircleFill=/*#__PURE__*/makeIcon('ArrowUpLeftCircleFill','
');// eslint-disable-next-line\nexport var BIconArrowUpLeftSquare=/*#__PURE__*/makeIcon('ArrowUpLeftSquare','
');// eslint-disable-next-line\nexport var BIconArrowUpLeftSquareFill=/*#__PURE__*/makeIcon('ArrowUpLeftSquareFill','
');// eslint-disable-next-line\nexport var BIconArrowUpRight=/*#__PURE__*/makeIcon('ArrowUpRight','
');// eslint-disable-next-line\nexport var BIconArrowUpRightCircle=/*#__PURE__*/makeIcon('ArrowUpRightCircle','
');// eslint-disable-next-line\nexport var BIconArrowUpRightCircleFill=/*#__PURE__*/makeIcon('ArrowUpRightCircleFill','
');// eslint-disable-next-line\nexport var BIconArrowUpRightSquare=/*#__PURE__*/makeIcon('ArrowUpRightSquare','
');// eslint-disable-next-line\nexport var BIconArrowUpRightSquareFill=/*#__PURE__*/makeIcon('ArrowUpRightSquareFill','
');// eslint-disable-next-line\nexport var BIconArrowUpShort=/*#__PURE__*/makeIcon('ArrowUpShort','
');// eslint-disable-next-line\nexport var BIconArrowUpSquare=/*#__PURE__*/makeIcon('ArrowUpSquare','
');// eslint-disable-next-line\nexport var BIconArrowUpSquareFill=/*#__PURE__*/makeIcon('ArrowUpSquareFill','
');// eslint-disable-next-line\nexport var BIconArrowsAngleContract=/*#__PURE__*/makeIcon('ArrowsAngleContract','
');// eslint-disable-next-line\nexport var BIconArrowsAngleExpand=/*#__PURE__*/makeIcon('ArrowsAngleExpand','
');// eslint-disable-next-line\nexport var BIconArrowsCollapse=/*#__PURE__*/makeIcon('ArrowsCollapse','
');// eslint-disable-next-line\nexport var BIconArrowsExpand=/*#__PURE__*/makeIcon('ArrowsExpand','
');// eslint-disable-next-line\nexport var BIconArrowsFullscreen=/*#__PURE__*/makeIcon('ArrowsFullscreen','
');// eslint-disable-next-line\nexport var BIconArrowsMove=/*#__PURE__*/makeIcon('ArrowsMove','
');// eslint-disable-next-line\nexport var BIconAspectRatio=/*#__PURE__*/makeIcon('AspectRatio','
');// eslint-disable-next-line\nexport var BIconAspectRatioFill=/*#__PURE__*/makeIcon('AspectRatioFill','
');// eslint-disable-next-line\nexport var BIconAsterisk=/*#__PURE__*/makeIcon('Asterisk','
');// eslint-disable-next-line\nexport var BIconAt=/*#__PURE__*/makeIcon('At','
');// eslint-disable-next-line\nexport var BIconAward=/*#__PURE__*/makeIcon('Award','
');// eslint-disable-next-line\nexport var BIconAwardFill=/*#__PURE__*/makeIcon('AwardFill','
');// eslint-disable-next-line\nexport var BIconBack=/*#__PURE__*/makeIcon('Back','
');// eslint-disable-next-line\nexport var BIconBackspace=/*#__PURE__*/makeIcon('Backspace','
');// eslint-disable-next-line\nexport var BIconBackspaceFill=/*#__PURE__*/makeIcon('BackspaceFill','
');// eslint-disable-next-line\nexport var BIconBackspaceReverse=/*#__PURE__*/makeIcon('BackspaceReverse','
');// eslint-disable-next-line\nexport var BIconBackspaceReverseFill=/*#__PURE__*/makeIcon('BackspaceReverseFill','
');// eslint-disable-next-line\nexport var BIconBadge4k=/*#__PURE__*/makeIcon('Badge4k','
');// eslint-disable-next-line\nexport var BIconBadge4kFill=/*#__PURE__*/makeIcon('Badge4kFill','
');// eslint-disable-next-line\nexport var BIconBadge8k=/*#__PURE__*/makeIcon('Badge8k','
');// eslint-disable-next-line\nexport var BIconBadge8kFill=/*#__PURE__*/makeIcon('Badge8kFill','
');// eslint-disable-next-line\nexport var BIconBadgeAd=/*#__PURE__*/makeIcon('BadgeAd','
');// eslint-disable-next-line\nexport var BIconBadgeAdFill=/*#__PURE__*/makeIcon('BadgeAdFill','
');// eslint-disable-next-line\nexport var BIconBadgeCc=/*#__PURE__*/makeIcon('BadgeCc','
');// eslint-disable-next-line\nexport var BIconBadgeCcFill=/*#__PURE__*/makeIcon('BadgeCcFill','
');// eslint-disable-next-line\nexport var BIconBadgeHd=/*#__PURE__*/makeIcon('BadgeHd','
');// eslint-disable-next-line\nexport var BIconBadgeHdFill=/*#__PURE__*/makeIcon('BadgeHdFill','
');// eslint-disable-next-line\nexport var BIconBadgeTm=/*#__PURE__*/makeIcon('BadgeTm','
');// eslint-disable-next-line\nexport var BIconBadgeTmFill=/*#__PURE__*/makeIcon('BadgeTmFill','
');// eslint-disable-next-line\nexport var BIconBadgeVo=/*#__PURE__*/makeIcon('BadgeVo','
');// eslint-disable-next-line\nexport var BIconBadgeVoFill=/*#__PURE__*/makeIcon('BadgeVoFill','
');// eslint-disable-next-line\nexport var BIconBag=/*#__PURE__*/makeIcon('Bag','
');// eslint-disable-next-line\nexport var BIconBagCheck=/*#__PURE__*/makeIcon('BagCheck','
');// eslint-disable-next-line\nexport var BIconBagCheckFill=/*#__PURE__*/makeIcon('BagCheckFill','
');// eslint-disable-next-line\nexport var BIconBagDash=/*#__PURE__*/makeIcon('BagDash','
');// eslint-disable-next-line\nexport var BIconBagDashFill=/*#__PURE__*/makeIcon('BagDashFill','
');// eslint-disable-next-line\nexport var BIconBagFill=/*#__PURE__*/makeIcon('BagFill','
');// eslint-disable-next-line\nexport var BIconBagPlus=/*#__PURE__*/makeIcon('BagPlus','
');// eslint-disable-next-line\nexport var BIconBagPlusFill=/*#__PURE__*/makeIcon('BagPlusFill','
');// eslint-disable-next-line\nexport var BIconBagX=/*#__PURE__*/makeIcon('BagX','
');// eslint-disable-next-line\nexport var BIconBagXFill=/*#__PURE__*/makeIcon('BagXFill','
');// eslint-disable-next-line\nexport var BIconBarChart=/*#__PURE__*/makeIcon('BarChart','
');// eslint-disable-next-line\nexport var BIconBarChartFill=/*#__PURE__*/makeIcon('BarChartFill','
');// eslint-disable-next-line\nexport var BIconBarChartLine=/*#__PURE__*/makeIcon('BarChartLine','');// eslint-disable-next-line\nexport var BIconBarChartLineFill=/*#__PURE__*/makeIcon('BarChartLineFill','');// eslint-disable-next-line\nexport var BIconBarChartSteps=/*#__PURE__*/makeIcon('BarChartSteps','');// eslint-disable-next-line\nexport var BIconBasket=/*#__PURE__*/makeIcon('Basket','');// eslint-disable-next-line\nexport var BIconBasket2=/*#__PURE__*/makeIcon('Basket2','');// eslint-disable-next-line\nexport var BIconBasket2Fill=/*#__PURE__*/makeIcon('Basket2Fill','');// eslint-disable-next-line\nexport var BIconBasket3=/*#__PURE__*/makeIcon('Basket3','');// eslint-disable-next-line\nexport var BIconBasket3Fill=/*#__PURE__*/makeIcon('Basket3Fill','');// eslint-disable-next-line\nexport var BIconBasketFill=/*#__PURE__*/makeIcon('BasketFill','');// eslint-disable-next-line\nexport var BIconBattery=/*#__PURE__*/makeIcon('Battery','');// eslint-disable-next-line\nexport var BIconBatteryCharging=/*#__PURE__*/makeIcon('BatteryCharging','');// eslint-disable-next-line\nexport var BIconBatteryFull=/*#__PURE__*/makeIcon('BatteryFull','');// eslint-disable-next-line\nexport var BIconBatteryHalf=/*#__PURE__*/makeIcon('BatteryHalf','');// eslint-disable-next-line\nexport var BIconBell=/*#__PURE__*/makeIcon('Bell','');// eslint-disable-next-line\nexport var BIconBellFill=/*#__PURE__*/makeIcon('BellFill','');// eslint-disable-next-line\nexport var BIconBezier=/*#__PURE__*/makeIcon('Bezier','');// eslint-disable-next-line\nexport var BIconBezier2=/*#__PURE__*/makeIcon('Bezier2','');// eslint-disable-next-line\nexport var BIconBicycle=/*#__PURE__*/makeIcon('Bicycle','');// eslint-disable-next-line\nexport var BIconBinoculars=/*#__PURE__*/makeIcon('Binoculars','');// eslint-disable-next-line\nexport var BIconBinocularsFill=/*#__PURE__*/makeIcon('BinocularsFill','');// eslint-disable-next-line\nexport var BIconBlockquoteLeft=/*#__PURE__*/makeIcon('BlockquoteLeft','');// eslint-disable-next-line\nexport var BIconBlockquoteRight=/*#__PURE__*/makeIcon('BlockquoteRight','');// eslint-disable-next-line\nexport var BIconBook=/*#__PURE__*/makeIcon('Book','');// eslint-disable-next-line\nexport var BIconBookFill=/*#__PURE__*/makeIcon('BookFill','');// eslint-disable-next-line\nexport var BIconBookHalf=/*#__PURE__*/makeIcon('BookHalf','');// eslint-disable-next-line\nexport var BIconBookmark=/*#__PURE__*/makeIcon('Bookmark','');// eslint-disable-next-line\nexport var BIconBookmarkCheck=/*#__PURE__*/makeIcon('BookmarkCheck','');// eslint-disable-next-line\nexport var BIconBookmarkCheckFill=/*#__PURE__*/makeIcon('BookmarkCheckFill','');// eslint-disable-next-line\nexport var BIconBookmarkDash=/*#__PURE__*/makeIcon('BookmarkDash','');// eslint-disable-next-line\nexport var BIconBookmarkDashFill=/*#__PURE__*/makeIcon('BookmarkDashFill','');// eslint-disable-next-line\nexport var BIconBookmarkFill=/*#__PURE__*/makeIcon('BookmarkFill','');// eslint-disable-next-line\nexport var BIconBookmarkHeart=/*#__PURE__*/makeIcon('BookmarkHeart','');// eslint-disable-next-line\nexport var BIconBookmarkHeartFill=/*#__PURE__*/makeIcon('BookmarkHeartFill','');// eslint-disable-next-line\nexport var BIconBookmarkPlus=/*#__PURE__*/makeIcon('BookmarkPlus','');// eslint-disable-next-line\nexport var BIconBookmarkPlusFill=/*#__PURE__*/makeIcon('BookmarkPlusFill','');// eslint-disable-next-line\nexport var BIconBookmarkStar=/*#__PURE__*/makeIcon('BookmarkStar','');// eslint-disable-next-line\nexport var BIconBookmarkStarFill=/*#__PURE__*/makeIcon('BookmarkStarFill','');// eslint-disable-next-line\nexport var BIconBookmarkX=/*#__PURE__*/makeIcon('BookmarkX','');// eslint-disable-next-line\nexport var BIconBookmarkXFill=/*#__PURE__*/makeIcon('BookmarkXFill','');// eslint-disable-next-line\nexport var BIconBookmarks=/*#__PURE__*/makeIcon('Bookmarks','');// eslint-disable-next-line\nexport var BIconBookmarksFill=/*#__PURE__*/makeIcon('BookmarksFill','');// eslint-disable-next-line\nexport var BIconBookshelf=/*#__PURE__*/makeIcon('Bookshelf','');// eslint-disable-next-line\nexport var BIconBootstrap=/*#__PURE__*/makeIcon('Bootstrap','');// eslint-disable-next-line\nexport var BIconBootstrapFill=/*#__PURE__*/makeIcon('BootstrapFill','');// eslint-disable-next-line\nexport var BIconBootstrapReboot=/*#__PURE__*/makeIcon('BootstrapReboot','');// eslint-disable-next-line\nexport var BIconBorderStyle=/*#__PURE__*/makeIcon('BorderStyle','');// eslint-disable-next-line\nexport var BIconBorderWidth=/*#__PURE__*/makeIcon('BorderWidth','');// eslint-disable-next-line\nexport var BIconBoundingBox=/*#__PURE__*/makeIcon('BoundingBox','');// eslint-disable-next-line\nexport var BIconBoundingBoxCircles=/*#__PURE__*/makeIcon('BoundingBoxCircles','');// eslint-disable-next-line\nexport var BIconBox=/*#__PURE__*/makeIcon('Box','');// eslint-disable-next-line\nexport var BIconBoxArrowDown=/*#__PURE__*/makeIcon('BoxArrowDown','');// eslint-disable-next-line\nexport var BIconBoxArrowDownLeft=/*#__PURE__*/makeIcon('BoxArrowDownLeft','');// eslint-disable-next-line\nexport var BIconBoxArrowDownRight=/*#__PURE__*/makeIcon('BoxArrowDownRight','');// eslint-disable-next-line\nexport var BIconBoxArrowInDown=/*#__PURE__*/makeIcon('BoxArrowInDown','');// eslint-disable-next-line\nexport var BIconBoxArrowInDownLeft=/*#__PURE__*/makeIcon('BoxArrowInDownLeft','');// eslint-disable-next-line\nexport var BIconBoxArrowInDownRight=/*#__PURE__*/makeIcon('BoxArrowInDownRight','');// eslint-disable-next-line\nexport var BIconBoxArrowInLeft=/*#__PURE__*/makeIcon('BoxArrowInLeft','');// eslint-disable-next-line\nexport var BIconBoxArrowInRight=/*#__PURE__*/makeIcon('BoxArrowInRight','');// eslint-disable-next-line\nexport var BIconBoxArrowInUp=/*#__PURE__*/makeIcon('BoxArrowInUp','');// eslint-disable-next-line\nexport var BIconBoxArrowInUpLeft=/*#__PURE__*/makeIcon('BoxArrowInUpLeft','');// eslint-disable-next-line\nexport var BIconBoxArrowInUpRight=/*#__PURE__*/makeIcon('BoxArrowInUpRight','');// eslint-disable-next-line\nexport var BIconBoxArrowLeft=/*#__PURE__*/makeIcon('BoxArrowLeft','');// eslint-disable-next-line\nexport var BIconBoxArrowRight=/*#__PURE__*/makeIcon('BoxArrowRight','');// eslint-disable-next-line\nexport var BIconBoxArrowUp=/*#__PURE__*/makeIcon('BoxArrowUp','');// eslint-disable-next-line\nexport var BIconBoxArrowUpLeft=/*#__PURE__*/makeIcon('BoxArrowUpLeft','');// eslint-disable-next-line\nexport var BIconBoxArrowUpRight=/*#__PURE__*/makeIcon('BoxArrowUpRight','');// eslint-disable-next-line\nexport var BIconBoxSeam=/*#__PURE__*/makeIcon('BoxSeam','');// eslint-disable-next-line\nexport var BIconBraces=/*#__PURE__*/makeIcon('Braces','');// eslint-disable-next-line\nexport var BIconBricks=/*#__PURE__*/makeIcon('Bricks','');// eslint-disable-next-line\nexport var BIconBriefcase=/*#__PURE__*/makeIcon('Briefcase','');// eslint-disable-next-line\nexport var BIconBriefcaseFill=/*#__PURE__*/makeIcon('BriefcaseFill','');// eslint-disable-next-line\nexport var BIconBrightnessAltHigh=/*#__PURE__*/makeIcon('BrightnessAltHigh','');// eslint-disable-next-line\nexport var BIconBrightnessAltHighFill=/*#__PURE__*/makeIcon('BrightnessAltHighFill','');// eslint-disable-next-line\nexport var BIconBrightnessAltLow=/*#__PURE__*/makeIcon('BrightnessAltLow','');// eslint-disable-next-line\nexport var BIconBrightnessAltLowFill=/*#__PURE__*/makeIcon('BrightnessAltLowFill','');// eslint-disable-next-line\nexport var BIconBrightnessHigh=/*#__PURE__*/makeIcon('BrightnessHigh','');// eslint-disable-next-line\nexport var BIconBrightnessHighFill=/*#__PURE__*/makeIcon('BrightnessHighFill','');// eslint-disable-next-line\nexport var BIconBrightnessLow=/*#__PURE__*/makeIcon('BrightnessLow','');// eslint-disable-next-line\nexport var BIconBrightnessLowFill=/*#__PURE__*/makeIcon('BrightnessLowFill','');// eslint-disable-next-line\nexport var BIconBroadcast=/*#__PURE__*/makeIcon('Broadcast','');// eslint-disable-next-line\nexport var BIconBroadcastPin=/*#__PURE__*/makeIcon('BroadcastPin','');// eslint-disable-next-line\nexport var BIconBrush=/*#__PURE__*/makeIcon('Brush','');// eslint-disable-next-line\nexport var BIconBrushFill=/*#__PURE__*/makeIcon('BrushFill','');// eslint-disable-next-line\nexport var BIconBucket=/*#__PURE__*/makeIcon('Bucket','');// eslint-disable-next-line\nexport var BIconBucketFill=/*#__PURE__*/makeIcon('BucketFill','');// eslint-disable-next-line\nexport var BIconBug=/*#__PURE__*/makeIcon('Bug','');// eslint-disable-next-line\nexport var BIconBugFill=/*#__PURE__*/makeIcon('BugFill','');// eslint-disable-next-line\nexport var BIconBuilding=/*#__PURE__*/makeIcon('Building','');// eslint-disable-next-line\nexport var BIconBullseye=/*#__PURE__*/makeIcon('Bullseye','');// eslint-disable-next-line\nexport var BIconCalculator=/*#__PURE__*/makeIcon('Calculator','');// eslint-disable-next-line\nexport var BIconCalculatorFill=/*#__PURE__*/makeIcon('CalculatorFill','');// eslint-disable-next-line\nexport var BIconCalendar=/*#__PURE__*/makeIcon('Calendar','');// eslint-disable-next-line\nexport var BIconCalendar2=/*#__PURE__*/makeIcon('Calendar2','');// eslint-disable-next-line\nexport var BIconCalendar2Check=/*#__PURE__*/makeIcon('Calendar2Check','');// eslint-disable-next-line\nexport var BIconCalendar2CheckFill=/*#__PURE__*/makeIcon('Calendar2CheckFill','');// eslint-disable-next-line\nexport var BIconCalendar2Date=/*#__PURE__*/makeIcon('Calendar2Date','');// eslint-disable-next-line\nexport var BIconCalendar2DateFill=/*#__PURE__*/makeIcon('Calendar2DateFill','');// eslint-disable-next-line\nexport var BIconCalendar2Day=/*#__PURE__*/makeIcon('Calendar2Day','');// eslint-disable-next-line\nexport var BIconCalendar2DayFill=/*#__PURE__*/makeIcon('Calendar2DayFill','');// eslint-disable-next-line\nexport var BIconCalendar2Event=/*#__PURE__*/makeIcon('Calendar2Event','');// eslint-disable-next-line\nexport var BIconCalendar2EventFill=/*#__PURE__*/makeIcon('Calendar2EventFill','');// eslint-disable-next-line\nexport var BIconCalendar2Fill=/*#__PURE__*/makeIcon('Calendar2Fill','');// eslint-disable-next-line\nexport var BIconCalendar2Minus=/*#__PURE__*/makeIcon('Calendar2Minus','');// eslint-disable-next-line\nexport var BIconCalendar2MinusFill=/*#__PURE__*/makeIcon('Calendar2MinusFill','');// eslint-disable-next-line\nexport var BIconCalendar2Month=/*#__PURE__*/makeIcon('Calendar2Month','');// eslint-disable-next-line\nexport var BIconCalendar2MonthFill=/*#__PURE__*/makeIcon('Calendar2MonthFill','');// eslint-disable-next-line\nexport var BIconCalendar2Plus=/*#__PURE__*/makeIcon('Calendar2Plus','');// eslint-disable-next-line\nexport var BIconCalendar2PlusFill=/*#__PURE__*/makeIcon('Calendar2PlusFill','');// eslint-disable-next-line\nexport var BIconCalendar2Range=/*#__PURE__*/makeIcon('Calendar2Range','');// eslint-disable-next-line\nexport var BIconCalendar2RangeFill=/*#__PURE__*/makeIcon('Calendar2RangeFill','');// eslint-disable-next-line\nexport var BIconCalendar2Week=/*#__PURE__*/makeIcon('Calendar2Week','');// eslint-disable-next-line\nexport var BIconCalendar2WeekFill=/*#__PURE__*/makeIcon('Calendar2WeekFill','');// eslint-disable-next-line\nexport var BIconCalendar2X=/*#__PURE__*/makeIcon('Calendar2X','');// eslint-disable-next-line\nexport var BIconCalendar2XFill=/*#__PURE__*/makeIcon('Calendar2XFill','');// eslint-disable-next-line\nexport var BIconCalendar3=/*#__PURE__*/makeIcon('Calendar3','');// eslint-disable-next-line\nexport var BIconCalendar3Event=/*#__PURE__*/makeIcon('Calendar3Event','');// eslint-disable-next-line\nexport var BIconCalendar3EventFill=/*#__PURE__*/makeIcon('Calendar3EventFill','');// eslint-disable-next-line\nexport var BIconCalendar3Fill=/*#__PURE__*/makeIcon('Calendar3Fill','');// eslint-disable-next-line\nexport var BIconCalendar3Range=/*#__PURE__*/makeIcon('Calendar3Range','');// eslint-disable-next-line\nexport var BIconCalendar3RangeFill=/*#__PURE__*/makeIcon('Calendar3RangeFill','');// eslint-disable-next-line\nexport var BIconCalendar3Week=/*#__PURE__*/makeIcon('Calendar3Week','');// eslint-disable-next-line\nexport var BIconCalendar3WeekFill=/*#__PURE__*/makeIcon('Calendar3WeekFill','');// eslint-disable-next-line\nexport var BIconCalendar4=/*#__PURE__*/makeIcon('Calendar4','');// eslint-disable-next-line\nexport var BIconCalendar4Event=/*#__PURE__*/makeIcon('Calendar4Event','');// eslint-disable-next-line\nexport var BIconCalendar4Range=/*#__PURE__*/makeIcon('Calendar4Range','');// eslint-disable-next-line\nexport var BIconCalendar4Week=/*#__PURE__*/makeIcon('Calendar4Week','');// eslint-disable-next-line\nexport var BIconCalendarCheck=/*#__PURE__*/makeIcon('CalendarCheck','');// eslint-disable-next-line\nexport var BIconCalendarCheckFill=/*#__PURE__*/makeIcon('CalendarCheckFill','');// eslint-disable-next-line\nexport var BIconCalendarDate=/*#__PURE__*/makeIcon('CalendarDate','');// eslint-disable-next-line\nexport var BIconCalendarDateFill=/*#__PURE__*/makeIcon('CalendarDateFill','');// eslint-disable-next-line\nexport var BIconCalendarDay=/*#__PURE__*/makeIcon('CalendarDay','');// eslint-disable-next-line\nexport var BIconCalendarDayFill=/*#__PURE__*/makeIcon('CalendarDayFill','');// eslint-disable-next-line\nexport var BIconCalendarEvent=/*#__PURE__*/makeIcon('CalendarEvent','');// eslint-disable-next-line\nexport var BIconCalendarEventFill=/*#__PURE__*/makeIcon('CalendarEventFill','');// eslint-disable-next-line\nexport var BIconCalendarFill=/*#__PURE__*/makeIcon('CalendarFill','');// eslint-disable-next-line\nexport var BIconCalendarMinus=/*#__PURE__*/makeIcon('CalendarMinus','');// eslint-disable-next-line\nexport var BIconCalendarMinusFill=/*#__PURE__*/makeIcon('CalendarMinusFill','');// eslint-disable-next-line\nexport var BIconCalendarMonth=/*#__PURE__*/makeIcon('CalendarMonth','');// eslint-disable-next-line\nexport var BIconCalendarMonthFill=/*#__PURE__*/makeIcon('CalendarMonthFill','');// eslint-disable-next-line\nexport var BIconCalendarPlus=/*#__PURE__*/makeIcon('CalendarPlus','');// eslint-disable-next-line\nexport var BIconCalendarPlusFill=/*#__PURE__*/makeIcon('CalendarPlusFill','');// eslint-disable-next-line\nexport var BIconCalendarRange=/*#__PURE__*/makeIcon('CalendarRange','');// eslint-disable-next-line\nexport var BIconCalendarRangeFill=/*#__PURE__*/makeIcon('CalendarRangeFill','');// eslint-disable-next-line\nexport var BIconCalendarWeek=/*#__PURE__*/makeIcon('CalendarWeek','');// eslint-disable-next-line\nexport var BIconCalendarWeekFill=/*#__PURE__*/makeIcon('CalendarWeekFill','');// eslint-disable-next-line\nexport var BIconCalendarX=/*#__PURE__*/makeIcon('CalendarX','');// eslint-disable-next-line\nexport var BIconCalendarXFill=/*#__PURE__*/makeIcon('CalendarXFill','');// eslint-disable-next-line\nexport var BIconCamera=/*#__PURE__*/makeIcon('Camera','');// eslint-disable-next-line\nexport var BIconCamera2=/*#__PURE__*/makeIcon('Camera2','');// eslint-disable-next-line\nexport var BIconCameraFill=/*#__PURE__*/makeIcon('CameraFill','');// eslint-disable-next-line\nexport var BIconCameraReels=/*#__PURE__*/makeIcon('CameraReels','');// eslint-disable-next-line\nexport var BIconCameraReelsFill=/*#__PURE__*/makeIcon('CameraReelsFill','');// eslint-disable-next-line\nexport var BIconCameraVideo=/*#__PURE__*/makeIcon('CameraVideo','');// eslint-disable-next-line\nexport var BIconCameraVideoFill=/*#__PURE__*/makeIcon('CameraVideoFill','');// eslint-disable-next-line\nexport var BIconCameraVideoOff=/*#__PURE__*/makeIcon('CameraVideoOff','');// eslint-disable-next-line\nexport var BIconCameraVideoOffFill=/*#__PURE__*/makeIcon('CameraVideoOffFill','');// eslint-disable-next-line\nexport var BIconCapslock=/*#__PURE__*/makeIcon('Capslock','');// eslint-disable-next-line\nexport var BIconCapslockFill=/*#__PURE__*/makeIcon('CapslockFill','');// eslint-disable-next-line\nexport var BIconCardChecklist=/*#__PURE__*/makeIcon('CardChecklist','');// eslint-disable-next-line\nexport var BIconCardHeading=/*#__PURE__*/makeIcon('CardHeading','');// eslint-disable-next-line\nexport var BIconCardImage=/*#__PURE__*/makeIcon('CardImage','');// eslint-disable-next-line\nexport var BIconCardList=/*#__PURE__*/makeIcon('CardList','');// eslint-disable-next-line\nexport var BIconCardText=/*#__PURE__*/makeIcon('CardText','');// eslint-disable-next-line\nexport var BIconCaretDown=/*#__PURE__*/makeIcon('CaretDown','');// eslint-disable-next-line\nexport var BIconCaretDownFill=/*#__PURE__*/makeIcon('CaretDownFill','');// eslint-disable-next-line\nexport var BIconCaretDownSquare=/*#__PURE__*/makeIcon('CaretDownSquare','');// eslint-disable-next-line\nexport var BIconCaretDownSquareFill=/*#__PURE__*/makeIcon('CaretDownSquareFill','');// eslint-disable-next-line\nexport var BIconCaretLeft=/*#__PURE__*/makeIcon('CaretLeft','');// eslint-disable-next-line\nexport var BIconCaretLeftFill=/*#__PURE__*/makeIcon('CaretLeftFill','');// eslint-disable-next-line\nexport var BIconCaretLeftSquare=/*#__PURE__*/makeIcon('CaretLeftSquare','');// eslint-disable-next-line\nexport var BIconCaretLeftSquareFill=/*#__PURE__*/makeIcon('CaretLeftSquareFill','');// eslint-disable-next-line\nexport var BIconCaretRight=/*#__PURE__*/makeIcon('CaretRight','');// eslint-disable-next-line\nexport var BIconCaretRightFill=/*#__PURE__*/makeIcon('CaretRightFill','');// eslint-disable-next-line\nexport var BIconCaretRightSquare=/*#__PURE__*/makeIcon('CaretRightSquare','');// eslint-disable-next-line\nexport var BIconCaretRightSquareFill=/*#__PURE__*/makeIcon('CaretRightSquareFill','');// eslint-disable-next-line\nexport var BIconCaretUp=/*#__PURE__*/makeIcon('CaretUp','');// eslint-disable-next-line\nexport var BIconCaretUpFill=/*#__PURE__*/makeIcon('CaretUpFill','');// eslint-disable-next-line\nexport var BIconCaretUpSquare=/*#__PURE__*/makeIcon('CaretUpSquare','');// eslint-disable-next-line\nexport var BIconCaretUpSquareFill=/*#__PURE__*/makeIcon('CaretUpSquareFill','');// eslint-disable-next-line\nexport var BIconCart=/*#__PURE__*/makeIcon('Cart','');// eslint-disable-next-line\nexport var BIconCart2=/*#__PURE__*/makeIcon('Cart2','');// eslint-disable-next-line\nexport var BIconCart3=/*#__PURE__*/makeIcon('Cart3','');// eslint-disable-next-line\nexport var BIconCart4=/*#__PURE__*/makeIcon('Cart4','');// eslint-disable-next-line\nexport var BIconCartCheck=/*#__PURE__*/makeIcon('CartCheck','');// eslint-disable-next-line\nexport var BIconCartCheckFill=/*#__PURE__*/makeIcon('CartCheckFill','');// eslint-disable-next-line\nexport var BIconCartDash=/*#__PURE__*/makeIcon('CartDash','');// eslint-disable-next-line\nexport var BIconCartDashFill=/*#__PURE__*/makeIcon('CartDashFill','');// eslint-disable-next-line\nexport var BIconCartFill=/*#__PURE__*/makeIcon('CartFill','');// eslint-disable-next-line\nexport var BIconCartPlus=/*#__PURE__*/makeIcon('CartPlus','');// eslint-disable-next-line\nexport var BIconCartPlusFill=/*#__PURE__*/makeIcon('CartPlusFill','');// eslint-disable-next-line\nexport var BIconCartX=/*#__PURE__*/makeIcon('CartX','');// eslint-disable-next-line\nexport var BIconCartXFill=/*#__PURE__*/makeIcon('CartXFill','');// eslint-disable-next-line\nexport var BIconCash=/*#__PURE__*/makeIcon('Cash','');// eslint-disable-next-line\nexport var BIconCashStack=/*#__PURE__*/makeIcon('CashStack','');// eslint-disable-next-line\nexport var BIconCast=/*#__PURE__*/makeIcon('Cast','');// eslint-disable-next-line\nexport var BIconChat=/*#__PURE__*/makeIcon('Chat','');// eslint-disable-next-line\nexport var BIconChatDots=/*#__PURE__*/makeIcon('ChatDots','');// eslint-disable-next-line\nexport var BIconChatDotsFill=/*#__PURE__*/makeIcon('ChatDotsFill','');// eslint-disable-next-line\nexport var BIconChatFill=/*#__PURE__*/makeIcon('ChatFill','');// eslint-disable-next-line\nexport var BIconChatLeft=/*#__PURE__*/makeIcon('ChatLeft','');// eslint-disable-next-line\nexport var BIconChatLeftDots=/*#__PURE__*/makeIcon('ChatLeftDots','');// eslint-disable-next-line\nexport var BIconChatLeftDotsFill=/*#__PURE__*/makeIcon('ChatLeftDotsFill','');// eslint-disable-next-line\nexport var BIconChatLeftFill=/*#__PURE__*/makeIcon('ChatLeftFill','');// eslint-disable-next-line\nexport var BIconChatLeftQuote=/*#__PURE__*/makeIcon('ChatLeftQuote','');// eslint-disable-next-line\nexport var BIconChatLeftQuoteFill=/*#__PURE__*/makeIcon('ChatLeftQuoteFill','');// eslint-disable-next-line\nexport var BIconChatLeftText=/*#__PURE__*/makeIcon('ChatLeftText','');// eslint-disable-next-line\nexport var BIconChatLeftTextFill=/*#__PURE__*/makeIcon('ChatLeftTextFill','');// eslint-disable-next-line\nexport var BIconChatQuote=/*#__PURE__*/makeIcon('ChatQuote','');// eslint-disable-next-line\nexport var BIconChatQuoteFill=/*#__PURE__*/makeIcon('ChatQuoteFill','');// eslint-disable-next-line\nexport var BIconChatRight=/*#__PURE__*/makeIcon('ChatRight','');// eslint-disable-next-line\nexport var BIconChatRightDots=/*#__PURE__*/makeIcon('ChatRightDots','');// eslint-disable-next-line\nexport var BIconChatRightDotsFill=/*#__PURE__*/makeIcon('ChatRightDotsFill','');// eslint-disable-next-line\nexport var BIconChatRightFill=/*#__PURE__*/makeIcon('ChatRightFill','');// eslint-disable-next-line\nexport var BIconChatRightQuote=/*#__PURE__*/makeIcon('ChatRightQuote','');// eslint-disable-next-line\nexport var BIconChatRightQuoteFill=/*#__PURE__*/makeIcon('ChatRightQuoteFill','');// eslint-disable-next-line\nexport var BIconChatRightText=/*#__PURE__*/makeIcon('ChatRightText','');// eslint-disable-next-line\nexport var BIconChatRightTextFill=/*#__PURE__*/makeIcon('ChatRightTextFill','');// eslint-disable-next-line\nexport var BIconChatSquare=/*#__PURE__*/makeIcon('ChatSquare','');// eslint-disable-next-line\nexport var BIconChatSquareDots=/*#__PURE__*/makeIcon('ChatSquareDots','');// eslint-disable-next-line\nexport var BIconChatSquareDotsFill=/*#__PURE__*/makeIcon('ChatSquareDotsFill','');// eslint-disable-next-line\nexport var BIconChatSquareFill=/*#__PURE__*/makeIcon('ChatSquareFill','');// eslint-disable-next-line\nexport var BIconChatSquareQuote=/*#__PURE__*/makeIcon('ChatSquareQuote','');// eslint-disable-next-line\nexport var BIconChatSquareQuoteFill=/*#__PURE__*/makeIcon('ChatSquareQuoteFill','');// eslint-disable-next-line\nexport var BIconChatSquareText=/*#__PURE__*/makeIcon('ChatSquareText','');// eslint-disable-next-line\nexport var BIconChatSquareTextFill=/*#__PURE__*/makeIcon('ChatSquareTextFill','');// eslint-disable-next-line\nexport var BIconChatText=/*#__PURE__*/makeIcon('ChatText','');// eslint-disable-next-line\nexport var BIconChatTextFill=/*#__PURE__*/makeIcon('ChatTextFill','');// eslint-disable-next-line\nexport var BIconCheck=/*#__PURE__*/makeIcon('Check','');// eslint-disable-next-line\nexport var BIconCheck2=/*#__PURE__*/makeIcon('Check2','');// eslint-disable-next-line\nexport var BIconCheck2All=/*#__PURE__*/makeIcon('Check2All','');// eslint-disable-next-line\nexport var BIconCheck2Circle=/*#__PURE__*/makeIcon('Check2Circle','');// eslint-disable-next-line\nexport var BIconCheck2Square=/*#__PURE__*/makeIcon('Check2Square','');// eslint-disable-next-line\nexport var BIconCheckAll=/*#__PURE__*/makeIcon('CheckAll','');// eslint-disable-next-line\nexport var BIconCheckCircle=/*#__PURE__*/makeIcon('CheckCircle','');// eslint-disable-next-line\nexport var BIconCheckCircleFill=/*#__PURE__*/makeIcon('CheckCircleFill','');// eslint-disable-next-line\nexport var BIconCheckSquare=/*#__PURE__*/makeIcon('CheckSquare','');// eslint-disable-next-line\nexport var BIconCheckSquareFill=/*#__PURE__*/makeIcon('CheckSquareFill','');// eslint-disable-next-line\nexport var BIconChevronBarContract=/*#__PURE__*/makeIcon('ChevronBarContract','');// eslint-disable-next-line\nexport var BIconChevronBarDown=/*#__PURE__*/makeIcon('ChevronBarDown','');// eslint-disable-next-line\nexport var BIconChevronBarExpand=/*#__PURE__*/makeIcon('ChevronBarExpand','');// eslint-disable-next-line\nexport var BIconChevronBarLeft=/*#__PURE__*/makeIcon('ChevronBarLeft','');// eslint-disable-next-line\nexport var BIconChevronBarRight=/*#__PURE__*/makeIcon('ChevronBarRight','');// eslint-disable-next-line\nexport var BIconChevronBarUp=/*#__PURE__*/makeIcon('ChevronBarUp','');// eslint-disable-next-line\nexport var BIconChevronCompactDown=/*#__PURE__*/makeIcon('ChevronCompactDown','');// eslint-disable-next-line\nexport var BIconChevronCompactLeft=/*#__PURE__*/makeIcon('ChevronCompactLeft','');// eslint-disable-next-line\nexport var BIconChevronCompactRight=/*#__PURE__*/makeIcon('ChevronCompactRight','');// eslint-disable-next-line\nexport var BIconChevronCompactUp=/*#__PURE__*/makeIcon('ChevronCompactUp','');// eslint-disable-next-line\nexport var BIconChevronContract=/*#__PURE__*/makeIcon('ChevronContract','');// eslint-disable-next-line\nexport var BIconChevronDoubleDown=/*#__PURE__*/makeIcon('ChevronDoubleDown','');// eslint-disable-next-line\nexport var BIconChevronDoubleLeft=/*#__PURE__*/makeIcon('ChevronDoubleLeft','');// eslint-disable-next-line\nexport var BIconChevronDoubleRight=/*#__PURE__*/makeIcon('ChevronDoubleRight','');// eslint-disable-next-line\nexport var BIconChevronDoubleUp=/*#__PURE__*/makeIcon('ChevronDoubleUp','');// eslint-disable-next-line\nexport var BIconChevronDown=/*#__PURE__*/makeIcon('ChevronDown','');// eslint-disable-next-line\nexport var BIconChevronExpand=/*#__PURE__*/makeIcon('ChevronExpand','');// eslint-disable-next-line\nexport var BIconChevronLeft=/*#__PURE__*/makeIcon('ChevronLeft','');// eslint-disable-next-line\nexport var BIconChevronRight=/*#__PURE__*/makeIcon('ChevronRight','');// eslint-disable-next-line\nexport var BIconChevronUp=/*#__PURE__*/makeIcon('ChevronUp','');// eslint-disable-next-line\nexport var BIconCircle=/*#__PURE__*/makeIcon('Circle','');// eslint-disable-next-line\nexport var BIconCircleFill=/*#__PURE__*/makeIcon('CircleFill','');// eslint-disable-next-line\nexport var BIconCircleHalf=/*#__PURE__*/makeIcon('CircleHalf','');// eslint-disable-next-line\nexport var BIconCircleSquare=/*#__PURE__*/makeIcon('CircleSquare','');// eslint-disable-next-line\nexport var BIconClipboard=/*#__PURE__*/makeIcon('Clipboard','');// eslint-disable-next-line\nexport var BIconClipboardCheck=/*#__PURE__*/makeIcon('ClipboardCheck','');// eslint-disable-next-line\nexport var BIconClipboardData=/*#__PURE__*/makeIcon('ClipboardData','');// eslint-disable-next-line\nexport var BIconClipboardMinus=/*#__PURE__*/makeIcon('ClipboardMinus','');// eslint-disable-next-line\nexport var BIconClipboardPlus=/*#__PURE__*/makeIcon('ClipboardPlus','');// eslint-disable-next-line\nexport var BIconClipboardX=/*#__PURE__*/makeIcon('ClipboardX','');// eslint-disable-next-line\nexport var BIconClock=/*#__PURE__*/makeIcon('Clock','');// eslint-disable-next-line\nexport var BIconClockFill=/*#__PURE__*/makeIcon('ClockFill','');// eslint-disable-next-line\nexport var BIconClockHistory=/*#__PURE__*/makeIcon('ClockHistory','');// eslint-disable-next-line\nexport var BIconCloud=/*#__PURE__*/makeIcon('Cloud','');// eslint-disable-next-line\nexport var BIconCloudArrowDown=/*#__PURE__*/makeIcon('CloudArrowDown','');// eslint-disable-next-line\nexport var BIconCloudArrowDownFill=/*#__PURE__*/makeIcon('CloudArrowDownFill','');// eslint-disable-next-line\nexport var BIconCloudArrowUp=/*#__PURE__*/makeIcon('CloudArrowUp','');// eslint-disable-next-line\nexport var BIconCloudArrowUpFill=/*#__PURE__*/makeIcon('CloudArrowUpFill','');// eslint-disable-next-line\nexport var BIconCloudCheck=/*#__PURE__*/makeIcon('CloudCheck','');// eslint-disable-next-line\nexport var BIconCloudCheckFill=/*#__PURE__*/makeIcon('CloudCheckFill','');// eslint-disable-next-line\nexport var BIconCloudDownload=/*#__PURE__*/makeIcon('CloudDownload','');// eslint-disable-next-line\nexport var BIconCloudDownloadFill=/*#__PURE__*/makeIcon('CloudDownloadFill','');// eslint-disable-next-line\nexport var BIconCloudFill=/*#__PURE__*/makeIcon('CloudFill','');// eslint-disable-next-line\nexport var BIconCloudMinus=/*#__PURE__*/makeIcon('CloudMinus','');// eslint-disable-next-line\nexport var BIconCloudMinusFill=/*#__PURE__*/makeIcon('CloudMinusFill','');// eslint-disable-next-line\nexport var BIconCloudPlus=/*#__PURE__*/makeIcon('CloudPlus','');// eslint-disable-next-line\nexport var BIconCloudPlusFill=/*#__PURE__*/makeIcon('CloudPlusFill','');// eslint-disable-next-line\nexport var BIconCloudSlash=/*#__PURE__*/makeIcon('CloudSlash','');// eslint-disable-next-line\nexport var BIconCloudSlashFill=/*#__PURE__*/makeIcon('CloudSlashFill','');// eslint-disable-next-line\nexport var BIconCloudUpload=/*#__PURE__*/makeIcon('CloudUpload','');// eslint-disable-next-line\nexport var BIconCloudUploadFill=/*#__PURE__*/makeIcon('CloudUploadFill','');// eslint-disable-next-line\nexport var BIconCode=/*#__PURE__*/makeIcon('Code','');// eslint-disable-next-line\nexport var BIconCodeSlash=/*#__PURE__*/makeIcon('CodeSlash','');// eslint-disable-next-line\nexport var BIconCodeSquare=/*#__PURE__*/makeIcon('CodeSquare','');// eslint-disable-next-line\nexport var BIconCollection=/*#__PURE__*/makeIcon('Collection','');// eslint-disable-next-line\nexport var BIconCollectionFill=/*#__PURE__*/makeIcon('CollectionFill','');// eslint-disable-next-line\nexport var BIconCollectionPlay=/*#__PURE__*/makeIcon('CollectionPlay','');// eslint-disable-next-line\nexport var BIconCollectionPlayFill=/*#__PURE__*/makeIcon('CollectionPlayFill','');// eslint-disable-next-line\nexport var BIconColumns=/*#__PURE__*/makeIcon('Columns','');// eslint-disable-next-line\nexport var BIconColumnsGap=/*#__PURE__*/makeIcon('ColumnsGap','');// eslint-disable-next-line\nexport var BIconCommand=/*#__PURE__*/makeIcon('Command','');// eslint-disable-next-line\nexport var BIconCompass=/*#__PURE__*/makeIcon('Compass','');// eslint-disable-next-line\nexport var BIconCompassFill=/*#__PURE__*/makeIcon('CompassFill','');// eslint-disable-next-line\nexport var BIconCone=/*#__PURE__*/makeIcon('Cone','');// eslint-disable-next-line\nexport var BIconConeStriped=/*#__PURE__*/makeIcon('ConeStriped','');// eslint-disable-next-line\nexport var BIconController=/*#__PURE__*/makeIcon('Controller','');// eslint-disable-next-line\nexport var BIconCpu=/*#__PURE__*/makeIcon('Cpu','');// eslint-disable-next-line\nexport var BIconCpuFill=/*#__PURE__*/makeIcon('CpuFill','');// eslint-disable-next-line\nexport var BIconCreditCard=/*#__PURE__*/makeIcon('CreditCard','');// eslint-disable-next-line\nexport var BIconCreditCard2Back=/*#__PURE__*/makeIcon('CreditCard2Back','');// eslint-disable-next-line\nexport var BIconCreditCard2BackFill=/*#__PURE__*/makeIcon('CreditCard2BackFill','');// eslint-disable-next-line\nexport var BIconCreditCard2Front=/*#__PURE__*/makeIcon('CreditCard2Front','');// eslint-disable-next-line\nexport var BIconCreditCard2FrontFill=/*#__PURE__*/makeIcon('CreditCard2FrontFill','');// eslint-disable-next-line\nexport var BIconCreditCardFill=/*#__PURE__*/makeIcon('CreditCardFill','');// eslint-disable-next-line\nexport var BIconCrop=/*#__PURE__*/makeIcon('Crop','');// eslint-disable-next-line\nexport var BIconCup=/*#__PURE__*/makeIcon('Cup','');// eslint-disable-next-line\nexport var BIconCupFill=/*#__PURE__*/makeIcon('CupFill','');// eslint-disable-next-line\nexport var BIconCupStraw=/*#__PURE__*/makeIcon('CupStraw','');// eslint-disable-next-line\nexport var BIconCursor=/*#__PURE__*/makeIcon('Cursor','');// eslint-disable-next-line\nexport var BIconCursorFill=/*#__PURE__*/makeIcon('CursorFill','');// eslint-disable-next-line\nexport var BIconCursorText=/*#__PURE__*/makeIcon('CursorText','');// eslint-disable-next-line\nexport var BIconDash=/*#__PURE__*/makeIcon('Dash','');// eslint-disable-next-line\nexport var BIconDashCircle=/*#__PURE__*/makeIcon('DashCircle','');// eslint-disable-next-line\nexport var BIconDashCircleFill=/*#__PURE__*/makeIcon('DashCircleFill','');// eslint-disable-next-line\nexport var BIconDashSquare=/*#__PURE__*/makeIcon('DashSquare','');// eslint-disable-next-line\nexport var BIconDashSquareFill=/*#__PURE__*/makeIcon('DashSquareFill','');// eslint-disable-next-line\nexport var BIconDiagram2=/*#__PURE__*/makeIcon('Diagram2','');// eslint-disable-next-line\nexport var BIconDiagram2Fill=/*#__PURE__*/makeIcon('Diagram2Fill','');// eslint-disable-next-line\nexport var BIconDiagram3=/*#__PURE__*/makeIcon('Diagram3','');// eslint-disable-next-line\nexport var BIconDiagram3Fill=/*#__PURE__*/makeIcon('Diagram3Fill','');// eslint-disable-next-line\nexport var BIconDiamond=/*#__PURE__*/makeIcon('Diamond','');// eslint-disable-next-line\nexport var BIconDiamondFill=/*#__PURE__*/makeIcon('DiamondFill','');// eslint-disable-next-line\nexport var BIconDiamondHalf=/*#__PURE__*/makeIcon('DiamondHalf','');// eslint-disable-next-line\nexport var BIconDice1=/*#__PURE__*/makeIcon('Dice1','');// eslint-disable-next-line\nexport var BIconDice1Fill=/*#__PURE__*/makeIcon('Dice1Fill','');// eslint-disable-next-line\nexport var BIconDice2=/*#__PURE__*/makeIcon('Dice2','');// eslint-disable-next-line\nexport var BIconDice2Fill=/*#__PURE__*/makeIcon('Dice2Fill','');// eslint-disable-next-line\nexport var BIconDice3=/*#__PURE__*/makeIcon('Dice3','');// eslint-disable-next-line\nexport var BIconDice3Fill=/*#__PURE__*/makeIcon('Dice3Fill','');// eslint-disable-next-line\nexport var BIconDice4=/*#__PURE__*/makeIcon('Dice4','');// eslint-disable-next-line\nexport var BIconDice4Fill=/*#__PURE__*/makeIcon('Dice4Fill','');// eslint-disable-next-line\nexport var BIconDice5=/*#__PURE__*/makeIcon('Dice5','