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 + '_title' });\n this.element.insertBefore(this.headerContent, this.element.children[0]);\n };\n Dialog.prototype.setFooterTemplate = function () {\n if (this.ftrTemplateContent) {\n this.ftrTemplateContent.innerHTML = '';\n }\n else {\n this.ftrTemplateContent = this.createElement('div', {\n className: DLG_FOOTER_CONTENT\n });\n }\n if (this.footerTemplate !== '' && !isNullOrUndefined(this.footerTemplate)) {\n this.setTemplate(this.footerTemplate, this.ftrTemplateContent, 'footerTemplate');\n }\n else {\n this.ftrTemplateContent.innerHTML = this.buttonContent.join('');\n }\n this.element.appendChild(this.ftrTemplateContent);\n };\n Dialog.prototype.createHeaderContent = function () {\n if (isNullOrUndefined(this.headerContent)) {\n this.headerContent = this.createElement('div', { id: this.element.id + '_dialog-header', className: DLG_HEADER_CONTENT });\n }\n };\n Dialog.prototype.renderCloseIcon = function () {\n this.closeIcon = this.createElement('button', { className: DLG_CLOSE_ICON_BTN, attrs: { type: 'button' } });\n this.closeIconBtnObj = new Button({ cssClass: 'e-flat', iconCss: DLG_CLOSE_ICON + ' ' + ICON });\n this.closeIconTitle();\n if (!isNullOrUndefined(this.headerContent)) {\n prepend([this.closeIcon], this.headerContent);\n }\n else {\n this.createHeaderContent();\n prepend([this.closeIcon], this.headerContent);\n this.element.insertBefore(this.headerContent, this.element.children[0]);\n }\n this.closeIconBtnObj.appendTo(this.closeIcon);\n };\n Dialog.prototype.closeIconTitle = function () {\n this.l10n.setLocale(this.locale);\n var closeIconTitle = this.l10n.getConstant('close');\n this.closeIcon.setAttribute('title', closeIconTitle);\n this.closeIcon.setAttribute('aria-label', closeIconTitle);\n };\n Dialog.prototype.setCSSClass = function (oldCSSClass) {\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n }\n if (oldCSSClass) {\n removeClass([this.element], oldCSSClass.split(' '));\n }\n };\n Dialog.prototype.setIsModal = function () {\n this.dlgContainer = this.createElement('div', { className: DLG_CONTAINER });\n this.element.classList.remove(DLG_SHOW);\n this.element.parentNode.insertBefore(this.dlgContainer, this.element);\n this.dlgContainer.appendChild(this.element);\n addClass([this.element], MODAL_DLG);\n this.dlgOverlay = this.createElement('div', { className: DLG_OVERLAY });\n this.dlgOverlay.style.zIndex = (this.zIndex - 1).toString();\n this.dlgContainer.appendChild(this.dlgOverlay);\n };\n Dialog.prototype.getValidFocusNode = function (items) {\n var node;\n for (var u = 0; u < items.length; u++) {\n node = items[u];\n if ((node.clientHeight > 0 || (node.tagName.toLowerCase() === 'a' && node.hasAttribute('href'))) && node.tabIndex > -1 &&\n !node.disabled && !this.disableElement(node, '[disabled],[aria-disabled=\"true\"],[type=\"hidden\"]')) {\n return node;\n }\n else {\n node = null;\n }\n }\n return node;\n };\n Dialog.prototype.focusableElements = function (content) {\n if (!isNullOrUndefined(content)) {\n var value = 'input,select,textarea,button,a,[contenteditable=\"true\"],[tabindex]';\n var items = content.querySelectorAll(value);\n return this.getValidFocusNode(items);\n }\n return null;\n };\n Dialog.prototype.getAutoFocusNode = function (container) {\n var node = container.querySelector('.' + DLG_CLOSE_ICON_BTN);\n var value = '[autofocus]';\n var items = container.querySelectorAll(value);\n var validNode = this.getValidFocusNode(items);\n if (isBlazor()) {\n this.primaryButtonEle = this.element.getElementsByClassName('e-primary')[0];\n }\n if (!isNullOrUndefined(validNode)) {\n node = validNode;\n }\n else {\n validNode = this.focusableElements(this.contentEle);\n if (!isNullOrUndefined(validNode)) {\n return node = validNode;\n }\n else if (!isNullOrUndefined(this.primaryButtonEle)) {\n return this.element.querySelector('.' + DLG_PRIMARY_BUTTON);\n }\n }\n return node;\n };\n Dialog.prototype.disableElement = function (element, t) {\n // 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 this.setIsModal();\n this.element.style.top = '0px';\n this.element.style.left = '0px';\n if (!isNullOrUndefined(this.targetEle)) {\n this.targetEle.appendChild(this.dlgContainer);\n }\n }\n else {\n removeClass([this.element], MODAL_DLG);\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n detach(this.dlgOverlay);\n while (this.dlgContainer.firstChild) {\n this.dlgContainer.parentElement.insertBefore(this.dlgContainer.firstChild, this.dlgContainer);\n }\n this.dlgContainer.parentElement.removeChild(this.dlgContainer);\n }\n if (this.visible) {\n this.show();\n }\n this.positionChange();\n if (this.isModal && this.dlgOverlay) {\n EventHandler.add(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler, this);\n }\n };\n Dialog.prototype.setzIndex = function (zIndexElement, setPopupZindex) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.zIndex = getZindexPartial(zIndexElement);\n this.isProtectedOnChange = prevOnChange;\n if (setPopupZindex) {\n this.popupObj.zIndex = this.zIndex;\n }\n };\n Dialog.prototype.windowResizeHandler = function () {\n setMaxWidth(this.targetEle.clientWidth);\n setMaxHeight(this.targetEle.clientHeight);\n this.setMaxHeight();\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\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 };\n this.closeArgs = eventArgs;\n this.trigger('beforeClose', eventArgs, function (beforeCloseArgs) {\n if (!beforeCloseArgs.cancel) {\n if (_this.isModal) {\n // eslint-disable-next-line\n !isNullOrUndefined(_this.targetEle) ? removeClass([_this.targetEle], [DLG_TARGET, 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 });\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","/* eslint-disable valid-jsdoc, jsdoc/require-jsdoc, jsdoc/require-returns, jsdoc/require-param */\nimport { createElement, attributes, addClass, removeClass, detach, classList } from '@syncfusion/ej2-base';\nimport { closest, formatUnit, isNullOrUndefined, remove } from '@syncfusion/ej2-base';\nvar CLASSNAMES = {\n RTL: 'e-rtl',\n DISABLE: 'e-disabled',\n INPUT: 'e-input',\n TEXTAREA: 'e-multi-line-input',\n INPUTGROUP: 'e-input-group',\n FLOATINPUT: 'e-float-input',\n FLOATLINE: 'e-float-line',\n FLOATTEXT: 'e-float-text',\n CLEARICON: 'e-clear-icon',\n CLEARICONHIDE: 'e-clear-icon-hide',\n LABELTOP: 'e-label-top',\n LABELBOTTOM: 'e-label-bottom',\n NOFLOATLABEL: 'e-no-float-label',\n INPUTCUSTOMTAG: 'e-input-custom-tag',\n FLOATCUSTOMTAG: 'e-float-custom-tag'\n};\n/**\n * Base for Input creation through util methods.\n */\n// eslint-disable-next-line @typescript-eslint/no-namespace\nexport var Input;\n(function (Input) {\n var privateInputObj = {\n container: null,\n buttons: [],\n clearButton: null\n };\n var floatType;\n /**\n * Create a wrapper to input element with multiple span elements and set the basic properties to input based components.\n * ```\n * E.g : Input.createInput({ element: element, floatLabelType : \"Auto\", properties: { placeholder: 'Search' } });\n * ```\n *\n */\n function createInput(args, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n var inputObject = { container: null, buttons: [], clearButton: null };\n floatType = args.floatLabelType;\n if (isNullOrUndefined(args.floatLabelType) || args.floatLabelType === 'Never') {\n inputObject.container = createInputContainer(args, CLASSNAMES.INPUTGROUP, CLASSNAMES.INPUTCUSTOMTAG, 'span', makeElement);\n args.element.parentNode.insertBefore(inputObject.container, args.element);\n addClass([args.element], CLASSNAMES.INPUT);\n inputObject.container.appendChild(args.element);\n }\n else {\n createFloatingInput(args, inputObject, makeElement);\n }\n bindInitialEvent(args);\n if (!isNullOrUndefined(args.properties) && !isNullOrUndefined(args.properties.showClearButton) &&\n args.properties.showClearButton && args.element.tagName !== 'TEXTAREA') {\n setClearButton(args.properties.showClearButton, args.element, inputObject, true, makeElement);\n inputObject.clearButton.setAttribute('role', 'button');\n if (inputObject.container.classList.contains(CLASSNAMES.FLOATINPUT)) {\n addClass([inputObject.container], CLASSNAMES.INPUTGROUP);\n }\n }\n if (!isNullOrUndefined(args.buttons) && args.element.tagName !== 'TEXTAREA') {\n for (var i = 0; i < args.buttons.length; i++) {\n inputObject.buttons.push(appendSpan(args.buttons[i], inputObject.container, makeElement));\n }\n }\n if (!isNullOrUndefined(args.element) && args.element.tagName === 'TEXTAREA') {\n addClass([inputObject.container], CLASSNAMES.TEXTAREA);\n }\n validateInputType(inputObject.container, args.element);\n inputObject = setPropertyValue(args, inputObject);\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n privateInputObj = inputObject;\n return inputObject;\n }\n Input.createInput = createInput;\n function bindInitialEvent(args) {\n checkInputValue(args.floatLabelType, args.element);\n args.element.addEventListener('focus', function () {\n var parent = getParentNode(this);\n if (parent.classList.contains('e-input-group') || parent.classList.contains('e-outline')\n || parent.classList.contains('e-filled')) {\n parent.classList.add('e-input-focus');\n }\n });\n args.element.addEventListener('blur', function () {\n var parent = getParentNode(this);\n if (parent.classList.contains('e-input-group') || parent.classList.contains('e-outline')\n || parent.classList.contains('e-filled')) {\n parent.classList.remove('e-input-focus');\n }\n });\n args.element.addEventListener('input', function () {\n checkInputValue(floatType, args.element);\n });\n }\n Input.bindInitialEvent = bindInitialEvent;\n function checkInputValue(floatLabelType, inputElement) {\n var inputValue = inputElement.value;\n if (inputValue !== '' && !isNullOrUndefined(inputValue) && inputElement.parentElement) {\n inputElement.parentElement.classList.add('e-valid-input');\n }\n else if (floatLabelType !== 'Always' && inputElement.parentElement) {\n inputElement.parentElement.classList.remove('e-valid-input');\n }\n }\n function _focusFn() {\n var label = getParentNode(this).getElementsByClassName('e-float-text')[0];\n if (!isNullOrUndefined(label)) {\n addClass([label], CLASSNAMES.LABELTOP);\n if (label.classList.contains(CLASSNAMES.LABELBOTTOM)) {\n removeClass([label], CLASSNAMES.LABELBOTTOM);\n }\n }\n }\n function _blurFn() {\n var parent = getParentNode(this);\n if ((parent.getElementsByTagName('textarea')[0]) ? parent.getElementsByTagName('textarea')[0].value === '' :\n parent.getElementsByTagName('input')[0].value === '') {\n var label = parent.getElementsByClassName('e-float-text')[0];\n if (!isNullOrUndefined(label)) {\n if (label.classList.contains(CLASSNAMES.LABELTOP)) {\n removeClass([label], CLASSNAMES.LABELTOP);\n }\n addClass([label], CLASSNAMES.LABELBOTTOM);\n }\n }\n }\n function wireFloatingEvents(element) {\n element.addEventListener('focus', _focusFn);\n element.addEventListener('blur', _blurFn);\n }\n Input.wireFloatingEvents = wireFloatingEvents;\n function unwireFloatingEvents(element) {\n element.removeEventListener('focus', _focusFn);\n element.removeEventListener('blur', _blurFn);\n }\n function createFloatingInput(args, inputObject, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n if (args.floatLabelType === 'Auto') {\n wireFloatingEvents(args.element);\n }\n if (isNullOrUndefined(inputObject.container)) {\n inputObject.container = createInputContainer(args, CLASSNAMES.FLOATINPUT, CLASSNAMES.FLOATCUSTOMTAG, 'div', makeElement);\n args.element.parentNode.insertBefore(inputObject.container, args.element);\n }\n else {\n if (!isNullOrUndefined(args.customTag)) {\n inputObject.container.classList.add(CLASSNAMES.FLOATCUSTOMTAG);\n }\n inputObject.container.classList.add(CLASSNAMES.FLOATINPUT);\n }\n var floatLinelement = makeElement('span', { className: CLASSNAMES.FLOATLINE });\n var floatLabelElement = makeElement('label', { className: CLASSNAMES.FLOATTEXT });\n if (!isNullOrUndefined(args.element.id) && args.element.id !== '') {\n floatLabelElement.id = 'label_' + args.element.id.replace(/ /g, '_');\n attributes(args.element, { 'aria-labelledby': floatLabelElement.id });\n }\n if (!isNullOrUndefined(args.element.placeholder) && args.element.placeholder !== '') {\n floatLabelElement.innerText = encodePlaceHolder(args.element.placeholder);\n args.element.removeAttribute('placeholder');\n }\n if (!isNullOrUndefined(args.properties) && !isNullOrUndefined(args.properties.placeholder) &&\n args.properties.placeholder !== '') {\n floatLabelElement.innerText = encodePlaceHolder(args.properties.placeholder);\n }\n if (!floatLabelElement.innerText) {\n inputObject.container.classList.add(CLASSNAMES.NOFLOATLABEL);\n }\n if (inputObject.container.classList.contains('e-float-icon-left')) {\n var inputWrap = inputObject.container.querySelector('.e-input-in-wrap');\n inputWrap.appendChild(args.element);\n inputWrap.appendChild(floatLinelement);\n inputWrap.appendChild(floatLabelElement);\n }\n else {\n inputObject.container.appendChild(args.element);\n inputObject.container.appendChild(floatLinelement);\n inputObject.container.appendChild(floatLabelElement);\n }\n updateLabelState(args.element.value, floatLabelElement);\n if (args.floatLabelType === 'Always') {\n if (floatLabelElement.classList.contains(CLASSNAMES.LABELBOTTOM)) {\n removeClass([floatLabelElement], CLASSNAMES.LABELBOTTOM);\n }\n addClass([floatLabelElement], CLASSNAMES.LABELTOP);\n }\n if (args.floatLabelType === 'Auto') {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n args.element.addEventListener('input', function (event) {\n updateLabelState(args.element.value, floatLabelElement);\n });\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n args.element.addEventListener('blur', function (event) {\n updateLabelState(args.element.value, floatLabelElement);\n });\n }\n if (!isNullOrUndefined(args.element.getAttribute('id'))) {\n floatLabelElement.setAttribute('for', args.element.getAttribute('id'));\n }\n }\n function checkFloatLabelType(type, container) {\n if (type === 'Always' && container.classList.contains('e-outline')) {\n container.classList.add('e-valid-input');\n }\n }\n function setPropertyValue(args, inputObject) {\n if (!isNullOrUndefined(args.properties)) {\n for (var _i = 0, _a = Object.keys(args.properties); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'cssClass':\n setCssClass(args.properties.cssClass, [inputObject.container]);\n checkFloatLabelType(args.floatLabelType, inputObject.container);\n break;\n case 'enabled':\n setEnabled(args.properties.enabled, args.element, args.floatLabelType, inputObject.container);\n break;\n case 'enableRtl':\n setEnableRtl(args.properties.enableRtl, [inputObject.container]);\n break;\n case 'placeholder':\n setPlaceholder(args.properties.placeholder, args.element);\n break;\n case 'readonly':\n setReadonly(args.properties.readonly, args.element);\n break;\n }\n }\n }\n return inputObject;\n }\n function updateIconState(value, button) {\n if (value) {\n removeClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n else {\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n }\n function updateLabelState(value, label) {\n if (value) {\n addClass([label], CLASSNAMES.LABELTOP);\n if (label.classList.contains(CLASSNAMES.LABELBOTTOM)) {\n removeClass([label], CLASSNAMES.LABELBOTTOM);\n }\n }\n else {\n if (label.classList.contains(CLASSNAMES.LABELTOP)) {\n removeClass([label], CLASSNAMES.LABELTOP);\n }\n addClass([label], CLASSNAMES.LABELBOTTOM);\n }\n }\n function getParentNode(element) {\n var parentNode = isNullOrUndefined(element.parentNode) ? element\n : element.parentNode;\n if (parentNode && parentNode.classList.contains('e-input-in-wrap')) {\n parentNode = parentNode.parentNode;\n }\n return parentNode;\n }\n /**\n * To create clear button.\n */\n function createClearButton(element, inputObject, initial, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n var button = makeElement('span', { className: CLASSNAMES.CLEARICON });\n var container = inputObject.container;\n if (!isNullOrUndefined(initial)) {\n container.appendChild(button);\n }\n else {\n var baseElement = inputObject.container.classList.contains(CLASSNAMES.FLOATINPUT) ?\n inputObject.container.querySelector('.' + CLASSNAMES.FLOATTEXT) : element;\n baseElement.insertAdjacentElement('afterend', button);\n }\n if (!isNullOrUndefined(container) &&\n container.classList.contains(CLASSNAMES.FLOATINPUT)) {\n addClass([container], CLASSNAMES.INPUTGROUP);\n }\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n wireClearBtnEvents(element, button, container);\n button.setAttribute('aria-label', 'close');\n return button;\n }\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n function wireClearBtnEvents(element, button, container) {\n button.addEventListener('click', function (event) {\n if (!(element.classList.contains(CLASSNAMES.DISABLE) || element.readOnly)) {\n event.preventDefault();\n if (element !== document.activeElement) {\n element.focus();\n }\n element.value = '';\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n });\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n element.addEventListener('input', function (event) {\n updateIconState(element.value, button);\n });\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n element.addEventListener('focus', function (event) {\n updateIconState(element.value, button);\n });\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n element.addEventListener('blur', function (event) {\n setTimeout(function () {\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n }, 200);\n });\n }\n Input.wireClearBtnEvents = wireClearBtnEvents;\n function validateLabel(element, floatLabelType) {\n var parent = getParentNode(element);\n if (parent.classList.contains(CLASSNAMES.FLOATINPUT) && floatLabelType === 'Auto') {\n var label = getParentNode(element).getElementsByClassName('e-float-text')[0];\n updateLabelState(element.value, label);\n }\n }\n /**\n * To create input box contianer.\n */\n function createInputContainer(args, className, tagClass, tag, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n var container;\n if (!isNullOrUndefined(args.customTag)) {\n container = makeElement(args.customTag, { className: className });\n container.classList.add(tagClass);\n }\n else {\n container = makeElement(tag, { className: className });\n }\n container.classList.add('e-control-wrapper');\n return container;\n }\n function encodePlaceHolder(placeholder) {\n var result = '';\n if (!isNullOrUndefined(placeholder) && placeholder !== '') {\n var spanEle = document.createElement('span');\n spanEle.innerHTML = '
';\n var hiddenInput = (spanEle.children[0]);\n result = hiddenInput.placeholder;\n }\n return result;\n }\n /**\n * Sets the value to the input element.\n * ```\n * E.g : Input.setValue('content', element, \"Auto\", true );\n * ```\n *\n * @param {string} value - Specify the value of the input element.\n * @param {HTMLInputElement | HTMLTextAreaElement} element - The element on which the specified value is updated.\n * @param {string} floatLabelType - Specify the float label type of the input element.\n * @param {boolean} clearButton - Boolean value to specify whether the clear icon is enabled / disabled on the input.\n */\n function setValue(value, element, floatLabelType, clearButton) {\n element.value = value;\n if ((!isNullOrUndefined(floatLabelType)) && floatLabelType === 'Auto') {\n validateLabel(element, floatLabelType);\n }\n if (!isNullOrUndefined(clearButton) && clearButton) {\n var parentElement = getParentNode(element);\n if (!isNullOrUndefined(parentElement)) {\n var button = parentElement.getElementsByClassName(CLASSNAMES.CLEARICON)[0];\n if (!isNullOrUndefined(button)) {\n if (element.value && parentElement.classList.contains('e-input-focus')) {\n removeClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n else {\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n }\n }\n }\n checkInputValue(floatLabelType, element);\n }\n Input.setValue = setValue;\n /**\n * Sets the single or multiple cssClass to wrapper of input element.\n * ```\n * E.g : Input.setCssClass('e-custom-class', [element]);\n * ```\n *\n * @param {string} cssClass - Css class names which are needed to add.\n * @param {Element[] | NodeList} elements - The elements which are needed to add / remove classes.\n * @param {string} oldClass\n * - Css class names which are needed to remove. If old classes are need to remove, can give this optional parameter.\n */\n function setCssClass(cssClass, elements, oldClass) {\n if (!isNullOrUndefined(oldClass) && oldClass !== '') {\n removeClass(elements, oldClass.split(' '));\n }\n if (!isNullOrUndefined(cssClass) && cssClass !== '') {\n addClass(elements, cssClass.split(' '));\n }\n }\n Input.setCssClass = setCssClass;\n /**\n * Set the width to the wrapper of input element.\n * ```\n * E.g : Input.setWidth('200px', container);\n * ```\n *\n * @param {number | string} width - Width value which is need to add.\n * @param {HTMLElement} container - The element on which the width is need to add.\n */\n function setWidth(width, container) {\n if (typeof width === 'number') {\n container.style.width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n container.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));\n }\n }\n Input.setWidth = setWidth;\n /**\n * Set the placeholder attribute to the input element.\n * ```\n * E.g : Input.setPlaceholder('Search here', element);\n * ```\n *\n * @param {string} placeholder - Placeholder value which is need to add.\n * @param {HTMLInputElement | HTMLTextAreaElement} element - The element on which the placeholder is need to add.\n */\n function setPlaceholder(placeholder, element) {\n placeholder = encodePlaceHolder(placeholder);\n var parentElement = getParentNode(element);\n if (parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) {\n if (!isNullOrUndefined(placeholder) && placeholder !== '') {\n parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = placeholder;\n parentElement.classList.remove(CLASSNAMES.NOFLOATLABEL);\n element.removeAttribute('placeholder');\n }\n else {\n parentElement.classList.add(CLASSNAMES.NOFLOATLABEL);\n parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = '';\n }\n }\n else {\n if (!isNullOrUndefined(placeholder) && placeholder !== '') {\n attributes(element, { 'placeholder': placeholder, 'aria-placeholder': placeholder });\n }\n else {\n element.removeAttribute('placeholder');\n element.removeAttribute('aria-placeholder');\n }\n }\n }\n Input.setPlaceholder = setPlaceholder;\n /**\n * Set the read only attribute to the input element\n * ```\n * E.g : Input.setReadonly(true, element);\n * ```\n *\n * @param {boolean} isReadonly\n * - Boolean value to specify whether to set read only. Setting \"True\" value enables read only.\n * @param {HTMLInputElement | HTMLTextAreaElement} element\n * - The element which is need to enable read only.\n */\n function setReadonly(isReadonly, element, floatLabelType) {\n if (isReadonly) {\n attributes(element, { readonly: '' });\n }\n else {\n element.removeAttribute('readonly');\n }\n if (!isNullOrUndefined(floatLabelType)) {\n validateLabel(element, floatLabelType);\n }\n }\n Input.setReadonly = setReadonly;\n /**\n * Displays the element direction from right to left when its enabled.\n * ```\n * E.g : Input.setEnableRtl(true, [inputObj.container]);\n * ```\n *\n * @param {boolean} isRtl\n * - Boolean value to specify whether to set RTL. Setting \"True\" value enables the RTL mode.\n * @param {Element[] | NodeList} elements\n * - The elements that are needed to enable/disable RTL.\n */\n function setEnableRtl(isRtl, elements) {\n if (isRtl) {\n addClass(elements, CLASSNAMES.RTL);\n }\n else {\n removeClass(elements, CLASSNAMES.RTL);\n }\n }\n Input.setEnableRtl = setEnableRtl;\n /**\n * Enables or disables the given input element.\n * ```\n * E.g : Input.setEnabled(false, element);\n * ```\n *\n * @param {boolean} isEnable\n * - Boolean value to specify whether to enable or disable.\n * @param {HTMLInputElement | HTMLTextAreaElement} element\n * - Element to be enabled or disabled.\n */\n function setEnabled(isEnable, element, floatLabelType, inputContainer) {\n var disabledAttrs = { 'disabled': 'disabled', 'aria-disabled': 'true' };\n var considerWrapper = isNullOrUndefined(inputContainer) ? false : true;\n if (isEnable) {\n element.classList.remove(CLASSNAMES.DISABLE);\n removeAttributes(disabledAttrs, element);\n if (considerWrapper) {\n removeClass([inputContainer], CLASSNAMES.DISABLE);\n }\n }\n else {\n element.classList.add(CLASSNAMES.DISABLE);\n addAttributes(disabledAttrs, element);\n if (considerWrapper) {\n addClass([inputContainer], CLASSNAMES.DISABLE);\n }\n }\n if (!isNullOrUndefined(floatLabelType)) {\n validateLabel(element, floatLabelType);\n }\n }\n Input.setEnabled = setEnabled;\n function setClearButton(isClear, element, inputObject, initial, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n if (isClear) {\n inputObject.clearButton = createClearButton(element, inputObject, initial, makeElement);\n }\n else {\n remove(inputObject.clearButton);\n inputObject.clearButton = null;\n }\n }\n Input.setClearButton = setClearButton;\n /**\n * Removing the multiple attributes from the given element such as \"disabled\",\"id\" , etc.\n * ```\n * E.g : Input.removeAttributes({ 'disabled': 'disabled', 'aria-disabled': 'true' }, element);\n * ```\n *\n * @param {string} attrs\n * - Array of attributes which are need to removed from the element.\n * @param {HTMLInputElement | HTMLElement} element\n * - Element on which the attributes are needed to be removed.\n */\n function removeAttributes(attrs, element) {\n for (var _i = 0, _a = Object.keys(attrs); _i < _a.length; _i++) {\n var key = _a[_i];\n var parentElement = getParentNode(element);\n if (key === 'disabled') {\n element.classList.remove(CLASSNAMES.DISABLE);\n }\n if (key === 'disabled' && parentElement.classList.contains(CLASSNAMES.INPUTGROUP)) {\n parentElement.classList.remove(CLASSNAMES.DISABLE);\n }\n if (key === 'placeholder' && parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) {\n parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = '';\n }\n else {\n element.removeAttribute(key);\n }\n }\n }\n Input.removeAttributes = removeAttributes;\n /**\n * Adding the multiple attributes to the given element such as \"disabled\",\"id\" , etc.\n * ```\n * E.g : Input.addAttributes({ 'id': 'inputpopup' }, element);\n * ```\n *\n * @param {string} attrs\n * - Array of attributes which is added to element.\n * @param {HTMLInputElement | HTMLElement} element\n * - Element on which the attributes are needed to be added.\n */\n function addAttributes(attrs, element) {\n for (var _i = 0, _a = Object.keys(attrs); _i < _a.length; _i++) {\n var key = _a[_i];\n var parentElement = getParentNode(element);\n if (key === 'disabled') {\n element.classList.add(CLASSNAMES.DISABLE);\n }\n if (key === 'disabled' && parentElement.classList.contains(CLASSNAMES.INPUTGROUP)) {\n parentElement.classList.add(CLASSNAMES.DISABLE);\n }\n if (key === 'placeholder' && parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) {\n parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = attrs[key];\n }\n else {\n element.setAttribute(key, attrs[key]);\n }\n }\n }\n Input.addAttributes = addAttributes;\n function removeFloating(input) {\n var container = input.container;\n if (!isNullOrUndefined(container) && container.classList.contains(CLASSNAMES.FLOATINPUT)) {\n var inputEle = container.querySelector('textarea') ? container.querySelector('textarea') :\n container.querySelector('input');\n var placeholder = container.querySelector('.' + CLASSNAMES.FLOATTEXT).textContent;\n var clearButton = container.querySelector('.e-clear-icon') !== null;\n detach(container.querySelector('.' + CLASSNAMES.FLOATLINE));\n detach(container.querySelector('.' + CLASSNAMES.FLOATTEXT));\n classList(container, [CLASSNAMES.INPUTGROUP], [CLASSNAMES.FLOATINPUT]);\n unwireFloatingEvents(inputEle);\n attributes(inputEle, { 'placeholder': placeholder });\n inputEle.classList.add(CLASSNAMES.INPUT);\n if (!clearButton && inputEle.tagName === 'INPUT') {\n inputEle.removeAttribute('required');\n }\n }\n }\n Input.removeFloating = removeFloating;\n function addFloating(input, type, placeholder, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n var container = closest(input, '.' + CLASSNAMES.INPUTGROUP);\n floatType = type;\n if (type !== 'Never') {\n var customTag = container.tagName;\n customTag = customTag !== 'DIV' && customTag !== 'SPAN' ? customTag : null;\n var args = { element: input, floatLabelType: type,\n customTag: customTag, properties: { placeholder: placeholder } };\n var iconEle = container.querySelector('.e-clear-icon');\n var inputObj = { container: container };\n input.classList.remove(CLASSNAMES.INPUT);\n createFloatingInput(args, inputObj, makeElement);\n var isPrependIcon = container.classList.contains('e-float-icon-left');\n if (isNullOrUndefined(iconEle)) {\n if (isPrependIcon) {\n var inputWrap = container.querySelector('.e-input-in-wrap');\n iconEle = inputWrap.querySelector('.e-input-group-icon');\n }\n else {\n iconEle = container.querySelector('.e-input-group-icon');\n }\n }\n if (isNullOrUndefined(iconEle)) {\n if (isPrependIcon) {\n iconEle = container.querySelector('.e-input-group-icon');\n }\n if (isNullOrUndefined(iconEle)) {\n container.classList.remove(CLASSNAMES.INPUTGROUP);\n }\n }\n else {\n var floatLine = container.querySelector('.' + CLASSNAMES.FLOATLINE);\n var floatText = container.querySelector('.' + CLASSNAMES.FLOATTEXT);\n var wrapper = isPrependIcon ? container.querySelector('.e-input-in-wrap') : container;\n wrapper.insertBefore(input, iconEle);\n wrapper.insertBefore(floatLine, iconEle);\n wrapper.insertBefore(floatText, iconEle);\n }\n }\n checkFloatLabelType(type, input.parentElement);\n }\n Input.addFloating = addFloating;\n /**\n * Enable or Disable the ripple effect on the icons inside the Input. Ripple effect is only applicable for material theme.\n * ```\n * E.g : Input.setRipple(true, [inputObjects]);\n * ```\n *\n * @param {boolean} isRipple\n * - Boolean value to specify whether to enable the ripple effect.\n * @param {InputObject[]} inputObj\n * - Specify the collection of input objects.\n */\n function setRipple(isRipple, inputObj) {\n for (var i = 0; i < inputObj.length; i++) {\n _internalRipple(isRipple, inputObj[i].container);\n }\n }\n Input.setRipple = setRipple;\n function _internalRipple(isRipple, container, button) {\n var argsButton = [];\n argsButton.push(button);\n var buttons = isNullOrUndefined(button) ?\n container.querySelectorAll('.e-input-group-icon') : argsButton;\n if (isRipple && buttons.length > 0) {\n for (var index = 0; index < buttons.length; index++) {\n buttons[index].addEventListener('mousedown', _onMouseDownRipple, false);\n buttons[index].addEventListener('mouseup', _onMouseUpRipple, false);\n }\n }\n else if (buttons.length > 0) {\n for (var index = 0; index < buttons.length; index++) {\n buttons[index].removeEventListener('mousedown', _onMouseDownRipple, this);\n buttons[index].removeEventListener('mouseup', _onMouseUpRipple, this);\n }\n }\n }\n function _onMouseRipple(container, button) {\n if (!container.classList.contains('e-disabled') && !container.querySelector('input').readOnly) {\n button.classList.add('e-input-btn-ripple');\n }\n }\n function _onMouseDownRipple() {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var ele = this;\n var parentEle = this.parentElement;\n while (!parentEle.classList.contains('e-input-group')) {\n parentEle = parentEle.parentElement;\n }\n _onMouseRipple(parentEle, ele);\n }\n function _onMouseUpRipple() {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var ele = this;\n setTimeout(function () {\n ele.classList.remove('e-input-btn-ripple');\n }, 500);\n }\n function createIconEle(iconClass, makeElement) {\n var button = makeElement('span', { className: iconClass });\n button.classList.add('e-input-group-icon');\n return button;\n }\n /**\n * Creates a new span element with the given icons added and append it in container element.\n * ```\n * E.g : Input.addIcon('append', 'e-icon-spin', inputObj.container, inputElement);\n * ```\n *\n * @param {string} position - Specify the icon placement on the input.Possible values are append and prepend.\n * @param {string | string[]} icons - Icon classes which are need to add to the span element which is going to created.\n * Span element acts as icon or button element for input.\n * @param {HTMLElement} container - The container on which created span element is going to append.\n * @param {HTMLElement} input - The inputElement on which created span element is going to prepend.\n */\n /* eslint-disable @typescript-eslint/indent */\n function addIcon(position, icons, container, input, internalCreate) {\n /* eslint-enable @typescript-eslint/indent */\n var result = typeof (icons) === 'string' ? icons.split(',')\n : icons;\n if (position.toLowerCase() === 'append') {\n for (var _i = 0, result_1 = result; _i < result_1.length; _i++) {\n var icon = result_1[_i];\n appendSpan(icon, container, internalCreate);\n }\n }\n else {\n for (var _a = 0, result_2 = result; _a < result_2.length; _a++) {\n var icon = result_2[_a];\n prependSpan(icon, container, input, internalCreate);\n }\n }\n }\n Input.addIcon = addIcon;\n /**\n * Creates a new span element with the given icons added and prepend it in input element.\n * ```\n * E.g : Input.prependSpan('e-icon-spin', inputObj.container, inputElement);\n * ```\n *\n * @param {string} iconClass - Icon classes which are need to add to the span element which is going to created.\n * Span element acts as icon or button element for input.\n * @param {HTMLElement} container - The container on which created span element is going to append.\n * @param {HTMLElement} inputElement - The inputElement on which created span element is going to prepend.\n */\n /* eslint-disable @typescript-eslint/indent */\n function prependSpan(iconClass, container, inputElement, internalCreateElement) {\n /* eslint-enable @typescript-eslint/indent */\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n var button = createIconEle(iconClass, makeElement);\n container.classList.add('e-float-icon-left');\n var innerWrapper = container.querySelector('.e-input-in-wrap');\n if (isNullOrUndefined(innerWrapper)) {\n innerWrapper = makeElement('span', { className: 'e-input-in-wrap' });\n inputElement.parentNode.insertBefore(innerWrapper, inputElement);\n var result = container.querySelectorAll(inputElement.tagName + ' ~ *');\n innerWrapper.appendChild(inputElement);\n for (var i = 0; i < result.length; i++) {\n innerWrapper.appendChild(result[i]);\n }\n }\n innerWrapper.parentNode.insertBefore(button, innerWrapper);\n if (!container.classList.contains(CLASSNAMES.INPUTGROUP)) {\n container.classList.add(CLASSNAMES.INPUTGROUP);\n }\n _internalRipple(true, container, button);\n return button;\n }\n Input.prependSpan = prependSpan;\n /**\n * Creates a new span element with the given icons added and append it in container element.\n * ```\n * E.g : Input.appendSpan('e-icon-spin', inputObj.container);\n * ```\n *\n * @param {string} iconClass - Icon classes which are need to add to the span element which is going to created.\n * Span element acts as icon or button element for input.\n * @param {HTMLElement} container - The container on which created span element is going to append.\n */\n function appendSpan(iconClass, container, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n var button = createIconEle(iconClass, makeElement);\n if (!container.classList.contains(CLASSNAMES.INPUTGROUP)) {\n container.classList.add(CLASSNAMES.INPUTGROUP);\n }\n var wrap = (container.classList.contains('e-float-icon-left')) ? container.querySelector('.e-input-in-wrap') :\n container;\n wrap.appendChild(button);\n _internalRipple(true, container, button);\n return button;\n }\n Input.appendSpan = appendSpan;\n function validateInputType(containerElement, input) {\n if (input.type === 'hidden') {\n containerElement.classList.add('e-hidden');\n }\n else if (containerElement.classList.contains('e-hidden')) {\n containerElement.classList.remove('e-hidden');\n }\n }\n Input.validateInputType = validateInputType;\n})(Input || (Input = {}));\n/* eslint-enable valid-jsdoc, jsdoc/require-jsdoc, jsdoc/require-returns, jsdoc/require-param */\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 no-inner-declarations */\nimport { extend, merge, isNullOrUndefined, getValue } from '@syncfusion/ej2-base';\nimport { attributes, prepend, isVisible, append, addClass } from '@syncfusion/ej2-base';\nimport { compile } from '@syncfusion/ej2-base';\nimport { DataManager, Query } from '@syncfusion/ej2-data';\nexport var cssClass = {\n li: 'e-list-item',\n ul: 'e-list-parent e-ul',\n group: 'e-list-group-item',\n icon: 'e-list-icon',\n text: 'e-list-text',\n check: 'e-list-check',\n checked: 'e-checked',\n selected: 'e-selected',\n expanded: 'e-expanded',\n textContent: 'e-text-content',\n hasChild: 'e-has-child',\n level: 'e-level',\n url: 'e-list-url',\n collapsible: 'e-icon-collapsible',\n disabled: 'e-disabled',\n image: 'e-list-img',\n iconWrapper: 'e-icon-wrapper',\n anchorWrap: 'e-anchor-wrap',\n navigable: 'e-navigable'\n};\n/**\n * Base List Generator\n */\n// eslint-disable-next-line @typescript-eslint/no-namespace\nexport var ListBase;\n(function (ListBase) {\n /**\n *\n * Default mapped fields.\n */\n ListBase.defaultMappedFields = {\n id: 'id',\n text: 'text',\n url: 'url',\n value: 'value',\n isChecked: 'isChecked',\n enabled: 'enabled',\n expanded: 'expanded',\n selected: 'selected',\n iconCss: 'iconCss',\n child: 'child',\n isVisible: 'isVisible',\n hasChildren: 'hasChildren',\n tooltip: 'tooltip',\n htmlAttributes: 'htmlAttributes',\n urlAttributes: 'urlAttributes',\n imageAttributes: 'imageAttributes',\n imageUrl: 'imageUrl',\n groupBy: null\n };\n var defaultAriaAttributes = {\n level: 1,\n listRole: 'presentation',\n itemRole: 'presentation',\n groupItemRole: 'group',\n itemText: 'list-item',\n wrapperRole: 'presentation'\n };\n var defaultListBaseOptions = {\n showCheckBox: false,\n showIcon: false,\n enableHtmlSanitizer: false,\n expandCollapse: false,\n fields: ListBase.defaultMappedFields,\n ariaAttributes: defaultAriaAttributes,\n listClass: '',\n itemClass: '',\n processSubChild: false,\n sortOrder: 'None',\n template: null,\n groupTemplate: null,\n headerTemplate: null,\n expandIconClass: 'e-icon-collapsible',\n moduleName: 'list',\n expandIconPosition: 'Right',\n itemNavigable: false\n };\n /**\n * Function helps to created and return the UL Li element based on your data.\n *\n * @param {createElementParams} createElement - Specifies an array of JSON data.\n *\n * @param {{Object}[]} dataSource - Specifies an array of JSON data.\n *\n * @param {ListBaseOptions} options? - Specifies the list options that need to provide.\n *\n * @param {boolean} isSingleLevel? - Specifies the list options that need to provide.\n *\n * @param {any} componentInstance? - Specifies the list options that need to provide.\n *\n * @returns {createElement} createListFromJson - Specifies the list options that need to provide.\n */\n function createList(createElement, dataSource, \n // eslint-disable-next-line\n options, isSingleLevel, componentInstance) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);\n var type = typeofData(dataSource).typeof;\n if (type === 'string' || type === 'number') {\n return createListFromArray(createElement, dataSource, isSingleLevel, options, componentInstance);\n }\n else {\n return createListFromJson(createElement, dataSource, options, ariaAttributes.level, isSingleLevel, componentInstance);\n }\n }\n ListBase.createList = createList;\n /**\n * Function helps to created an element list based on string array input .\n *\n * @param {createElementParams} createElement - Specifies an array of JSON data.\n *\n * @param {{Object}[]} dataSource - Specifies an array of JSON data.\n *\n * @param {ListBaseOptions} options? - Specifies the list options that need to provide.\n *\n * @param {boolean} isSingleLevel? - Specifies the list options that need to provide.\n *\n * @param {any} componentInstance? - Specifies the list options that need to provide.\n *\n * @returns {createElement} generateUL - returns the list options that need to provide.\n */\n function createListFromArray(createElement, dataSource, \n // tslint:disable-next-line\n // eslint-disable-next-line\n isSingleLevel, options, componentInstance) {\n var subChild = createListItemFromArray(createElement, dataSource, isSingleLevel, options, componentInstance);\n return generateUL(createElement, subChild, null, options);\n }\n ListBase.createListFromArray = createListFromArray;\n /**\n * Function helps to created an element list based on string array input .\n *\n * @param {createElementParams} createElement - Specifies an array of JSON data.\n *\n * @param {{Object}[]} dataSource - Specifies an array of JSON data.\n *\n * @param {ListBaseOptions} options? - Specifies the list options that need to provide.\n *\n * @param {boolean} isSingleLevel? - Specifies the list options that need to provide.\n *\n * @param {any} componentInstance? - Specifies the list options that need to provide.\n *\n * @returns {HTMLElement[]} subChild - returns the list options that need to provide.\n */\n function createListItemFromArray(createElement, dataSource, \n // eslint-disable-next-line\n isSingleLevel, options, componentInstance) {\n var subChild = [];\n var curOpt = extend({}, defaultListBaseOptions, options);\n cssClass = getModuleClass(curOpt.moduleName);\n var id = generateId(); // generate id for drop-down-list option.\n for (var i = 0; i < dataSource.length; i++) {\n if (isNullOrUndefined(dataSource[i])) {\n continue;\n }\n var li = void 0;\n if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: dataSource[i],\n text: dataSource[i],\n options: curOpt\n };\n curOpt.itemCreating(curData);\n }\n if (isSingleLevel) {\n li = generateSingleLevelLI(createElement, dataSource[i], undefined, null, null, [], null, id, i, options);\n }\n else {\n li = generateLI(createElement, dataSource[i], undefined, null, null, options, componentInstance);\n }\n if (curOpt.itemCreated && typeof curOpt.itemCreated === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: dataSource[i],\n text: dataSource[i],\n item: li,\n options: curOpt\n };\n curOpt.itemCreated(curData);\n }\n subChild.push(li);\n }\n return subChild;\n }\n ListBase.createListItemFromArray = createListItemFromArray;\n /**\n * Function helps to created an element list based on array of JSON input .\n *\n * @param {createElementParams} createElement - Specifies an array of JSON data.\n *\n * @param {{Object}[]} dataSource - Specifies an array of JSON data.\n *\n * @param {ListBaseOptions} options? - Specifies the list options that need to provide.\n *\n * @param {boolean} isSingleLevel? - Specifies the list options that need to provide.\n *\n * @param {number} level? - Specifies the list options that need to provide.\n *\n * @param {any} componentInstance? - Specifies the list options that need to provide.\n *\n * @returns {HTMLElement[]} child - returns the list options that need to provide.\n */\n function createListItemFromJson(createElement, dataSource, \n // eslint-disable-next-line\n options, level, isSingleLevel, componentInstance) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n cssClass = getModuleClass(curOpt.moduleName);\n var fields = extend({}, ListBase.defaultMappedFields, curOpt.fields);\n var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);\n var id;\n var checkboxElement = [];\n if (level) {\n ariaAttributes.level = level;\n }\n var child = [];\n var li;\n var anchorElement;\n if (dataSource && dataSource.length && !isNullOrUndefined(typeofData(dataSource).item) &&\n // eslint-disable-next-line no-prototype-builtins\n !typeofData(dataSource).item.hasOwnProperty(fields.id)) {\n id = generateId(); // generate id for drop-down-list option.\n }\n for (var i = 0; i < dataSource.length; i++) {\n var fieldData = getFieldValues(dataSource[i], fields);\n if (isNullOrUndefined(dataSource[i])) {\n continue;\n }\n if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: dataSource[i],\n text: fieldData[fields.text],\n options: curOpt,\n fields: fields\n };\n curOpt.itemCreating(curData);\n }\n var curItem = dataSource[i];\n if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {\n fieldData = getFieldValues(dataSource[i], fields);\n }\n // eslint-disable-next-line no-prototype-builtins\n if (fieldData.hasOwnProperty(fields.id) && !isNullOrUndefined(fieldData[fields.id])) {\n id = fieldData[fields.id];\n }\n var innerEle = [];\n if (curOpt.showCheckBox) {\n if (curOpt.itemNavigable && (fieldData[fields.url] || fieldData[fields.urlAttributes])) {\n checkboxElement.push(createElement('input', { className: cssClass.check, attrs: { type: 'checkbox' } }));\n }\n else {\n innerEle.push(createElement('input', { className: cssClass.check, attrs: { type: 'checkbox' } }));\n }\n }\n if (isSingleLevel === true) {\n // eslint-disable-next-line no-prototype-builtins\n if (curOpt.showIcon && fieldData.hasOwnProperty(fields.iconCss) && !isNullOrUndefined(fieldData[fields.iconCss])) {\n innerEle.push(createElement('span', { className: cssClass.icon + ' ' + fieldData[fields.iconCss] }));\n }\n li = generateSingleLevelLI(createElement, curItem, fieldData, fields, curOpt.itemClass, innerEle, \n // eslint-disable-next-line no-prototype-builtins\n (curItem.hasOwnProperty('isHeader') &&\n curItem.isHeader) ? true : false, id, i, options);\n anchorElement = li.querySelector('.' + cssClass.anchorWrap);\n if (curOpt.itemNavigable && checkboxElement.length) {\n prepend(checkboxElement, li.firstElementChild);\n }\n }\n else {\n li = generateLI(createElement, curItem, fieldData, fields, curOpt.itemClass, options, componentInstance);\n li.classList.add(cssClass.level + '-' + ariaAttributes.level);\n li.setAttribute('aria-level', ariaAttributes.level.toString());\n anchorElement = li.querySelector('.' + cssClass.anchorWrap);\n // eslint-disable-next-line no-prototype-builtins\n if (fieldData.hasOwnProperty(fields.tooltip)) {\n li.setAttribute('title', fieldData[fields.tooltip]);\n }\n // eslint-disable-next-line no-prototype-builtins\n if (fieldData.hasOwnProperty(fields.htmlAttributes) && fieldData[fields.htmlAttributes]) {\n setAttribute(li, fieldData[fields.htmlAttributes]);\n }\n // eslint-disable-next-line no-prototype-builtins\n if (fieldData.hasOwnProperty(fields.enabled) && fieldData[fields.enabled] === false) {\n li.classList.add(cssClass.disabled);\n }\n // eslint-disable-next-line no-prototype-builtins\n if (fieldData.hasOwnProperty(fields.isVisible) && fieldData[fields.isVisible] === false) {\n li.style.display = 'none';\n }\n // eslint-disable-next-line no-prototype-builtins\n if (fieldData.hasOwnProperty(fields.imageUrl) && !isNullOrUndefined(fieldData[fields.imageUrl])\n && !curOpt.template) {\n var attr = { src: fieldData[fields.imageUrl] };\n merge(attr, fieldData[fields.imageAttributes]);\n var imageElemnt = createElement('img', { className: cssClass.image, attrs: attr });\n if (anchorElement) {\n anchorElement.insertAdjacentElement('afterbegin', imageElemnt);\n }\n else {\n prepend([imageElemnt], li.firstElementChild);\n }\n }\n // eslint-disable-next-line no-prototype-builtins\n if (curOpt.showIcon && fieldData.hasOwnProperty(fields.iconCss) &&\n !isNullOrUndefined(fieldData[fields.iconCss]) && !curOpt.template) {\n var iconElement = createElement('div', { className: cssClass.icon + ' ' + fieldData[fields.iconCss] });\n if (anchorElement) {\n anchorElement.insertAdjacentElement('afterbegin', iconElement);\n }\n else {\n prepend([iconElement], li.firstElementChild);\n }\n }\n if (innerEle.length) {\n prepend(innerEle, li.firstElementChild);\n }\n if (curOpt.itemNavigable && checkboxElement.length) {\n prepend(checkboxElement, li.firstElementChild);\n }\n processSubChild(createElement, fieldData, fields, dataSource, curOpt, li, ariaAttributes.level);\n }\n if (anchorElement) {\n addClass([li], [cssClass.navigable]);\n }\n if (curOpt.itemCreated && typeof curOpt.itemCreated === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: dataSource[i],\n text: fieldData[fields.text],\n item: li,\n options: curOpt,\n fields: fields\n };\n curOpt.itemCreated(curData);\n }\n checkboxElement = [];\n child.push(li);\n }\n return child;\n }\n ListBase.createListItemFromJson = createListItemFromJson;\n /**\n * Function helps to created an element list based on array of JSON input .\n *\n * @param {createElementParams} createElement - Specifies an array of JSON data.\n *\n * @param {{Object}[]} dataSource - Specifies an array of JSON data.\n *\n * @param {ListBaseOptions} options? - Specifies the list options that need to provide.\n *\n * @param {number} level? - Specifies the list options that need to provide.\n *\n * @param {boolean} isSingleLevel? - Specifies the list options that need to provide.\n *\n * @param {any} componentInstance? - Specifies the list options that need to provide.\n *\n * @returns {createElement} generateUL - Specifies the list options that need to provide.\n */\n function createListFromJson(createElement, dataSource, \n // eslint-disable-next-line\n options, level, isSingleLevel, componentInstance) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var li = createListItemFromJson(createElement, dataSource, options, level, isSingleLevel, componentInstance);\n return generateUL(createElement, li, curOpt.listClass, options);\n }\n ListBase.createListFromJson = createListFromJson;\n /**\n * Return the next or previous visible element.\n *\n * @param {Element[]|NodeList} elementArray - An element array to find next or previous element.\n * @param {Element} li - An element to find next or previous after this element.\n * @param {boolean} isPrevious? - Specify when the need get previous element from array.\n */\n function getSiblingLI(elementArray, element, isPrevious) {\n cssClass = getModuleClass(defaultListBaseOptions.moduleName);\n if (!elementArray || !elementArray.length) {\n return void 0;\n }\n var siblingLI;\n var liIndex;\n var liCollections = Array.prototype.slice.call(elementArray);\n if (element) {\n liIndex = indexOf(element, liCollections);\n }\n else {\n liIndex = (isPrevious === true ? liCollections.length : -1);\n }\n siblingLI = liCollections[liIndex + (isPrevious === true ? -1 : 1)];\n while (siblingLI && (!isVisible(siblingLI) || siblingLI.classList.contains(cssClass.disabled))) {\n liIndex = liIndex + (isPrevious === true ? -1 : 1);\n siblingLI = liCollections[liIndex];\n }\n return siblingLI;\n }\n ListBase.getSiblingLI = getSiblingLI;\n /**\n * Return the index of the li element\n *\n * @param {Element} item - An element to find next or previous after this element.\n * @param {Element[]} elementArray - An element array to find index of given li.\n */\n function indexOf(item, elementArray) {\n if (!elementArray || !item) {\n return void 0;\n }\n else {\n var liCollections = elementArray;\n liCollections = Array.prototype.slice.call(elementArray);\n return liCollections.indexOf(item);\n }\n }\n ListBase.indexOf = indexOf;\n /**\n * Returns the grouped data from given dataSource.\n *\n * @param {{Object}[]} dataSource - The JSON data which is necessary to process.\n * @param {FieldsMapping} fields - Fields that are mapped from the data source.\n * @param {SortOrder} sortOrder- Specifies final result sort order.\n */\n function groupDataSource(dataSource, fields, sortOrder) {\n if (sortOrder === void 0) { sortOrder = 'None'; }\n var curFields = extend({}, ListBase.defaultMappedFields, fields);\n var cusQuery = new Query().group(curFields.groupBy);\n // need to remove once sorting issues fixed in DataManager\n cusQuery = addSorting(sortOrder, 'key', cusQuery);\n var ds = getDataSource(dataSource, cusQuery);\n dataSource = [];\n for (var j = 0; j < ds.length; j++) {\n var itemObj = ds[j].items;\n var grpItem = {};\n var hdr = 'isHeader';\n grpItem[curFields.text] = ds[j].key;\n grpItem[hdr] = true;\n var newtext = curFields.text;\n if (newtext === 'id') {\n newtext = 'text';\n grpItem[newtext] = ds[j].key;\n }\n grpItem._id = 'group-list-item-' + (ds[j].key ?\n ds[j].key.toString().trim() : 'undefined');\n grpItem.items = itemObj;\n dataSource.push(grpItem);\n for (var k = 0; k < itemObj.length; k++) {\n dataSource.push(itemObj[k]);\n }\n }\n return dataSource;\n }\n ListBase.groupDataSource = groupDataSource;\n /**\n * Returns a sorted query object.\n *\n * @param {SortOrder} sortOrder - Specifies that sort order.\n * @param {string} sortBy - Specifies sortBy fields.\n * @param {Query} query - Pass if any existing query.\n */\n function addSorting(sortOrder, sortBy, query) {\n if (query === void 0) { query = new Query(); }\n if (sortOrder === 'Ascending') {\n query.sortBy(sortBy, 'ascending', true);\n }\n else if (sortOrder === 'Descending') {\n query.sortBy(sortBy, 'descending', true);\n }\n else {\n for (var i = 0; i < query.queries.length; i++) {\n if (query.queries[i].fn === 'onSortBy') {\n query.queries.splice(i, 1);\n }\n }\n }\n return query;\n }\n ListBase.addSorting = addSorting;\n /**\n * Return an array of JSON Data that processed based on queries.\n *\n * @param {{Object}[]} dataSource - Specifies local JSON data source.\n *\n * @param {Query} query - Specifies query that need to process.\n */\n function getDataSource(dataSource, query) {\n // eslint-disable-next-line\n return new DataManager(dataSource)\n .executeLocal(query);\n }\n ListBase.getDataSource = getDataSource;\n /**\n * Created JSON data based the UL and LI element\n *\n * @param {HTMLElement|Element} element - UL element that need to convert as a JSON\n * @param {ListBaseOptions} options? - Specifies listbase option for fields.\n */\n function createJsonFromElement(element, options) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var fields = extend({}, ListBase.defaultMappedFields, curOpt.fields);\n var curEle = element.cloneNode(true);\n // eslint-disable-next-line\n var jsonAr = [];\n curEle.classList.add('json-parent');\n var childs = curEle.querySelectorAll('.json-parent>li');\n curEle.classList.remove('json-parent');\n for (var i = 0; i < childs.length; i++) {\n var li = childs[i];\n var anchor = li.querySelector('a');\n var ul = li.querySelector('ul');\n // eslint-disable-next-line\n var json = {};\n var childNodes = anchor ? anchor.childNodes : li.childNodes;\n var keys = Object.keys(childNodes);\n for (var i_1 = 0; i_1 < childNodes.length; i_1++) {\n if (!(childNodes[Number(keys[i_1])]).hasChildNodes()) {\n json[fields.text] = childNodes[Number(keys[i_1])].textContent;\n }\n }\n var attributes_1 = getAllAttributes(li);\n if (attributes_1.id) {\n json[fields.id] = attributes_1.id;\n delete attributes_1.id;\n }\n else {\n json[fields.id] = generateId();\n }\n if (Object.keys(attributes_1).length) {\n json[fields.htmlAttributes] = attributes_1;\n }\n if (anchor) {\n attributes_1 = getAllAttributes(anchor);\n if (Object.keys(attributes_1).length) {\n json[fields.urlAttributes] = attributes_1;\n }\n }\n if (ul) {\n json[fields.child] = createJsonFromElement(ul, options);\n }\n jsonAr.push(json);\n }\n return jsonAr;\n }\n ListBase.createJsonFromElement = createJsonFromElement;\n function typeofData(data) {\n var match = { typeof: null, item: null };\n for (var i = 0; i < data.length; i++) {\n if (!isNullOrUndefined(data[i])) {\n return match = { typeof: typeof data[i], item: data[i] };\n }\n }\n return match;\n }\n function setAttribute(element, elementAttributes) {\n var attr = {};\n merge(attr, elementAttributes);\n if (attr.class) {\n addClass([element], attr.class.split(' '));\n delete attr.class;\n }\n attributes(element, attr);\n }\n function getAllAttributes(element) {\n var attributes = {};\n var attr = element.attributes;\n for (var index = 0; index < attr.length; index++) {\n attributes[attr[index].nodeName] = attr[index].nodeValue;\n }\n return attributes;\n }\n /**\n * Created UL element from content template.\n *\n * @param {string} template - that need to convert and generate li element.\n * @param {{Object}[]} dataSource - Specifies local JSON data source.\n * @param {ListBaseOptions} options? - Specifies listbase option for fields.\n */\n function renderContentTemplate(createElement, template, dataSource, \n // eslint-disable-next-line\n fields, options, componentInstance) {\n cssClass = getModuleClass(defaultListBaseOptions.moduleName);\n var ulElement = createElement('ul', { className: cssClass.ul, attrs: { role: 'presentation' } });\n var curOpt = extend({}, defaultListBaseOptions, options);\n var curFields = extend({}, ListBase.defaultMappedFields, fields);\n // eslint-disable-next-line\n var compiledString = compile(template);\n var liCollection = [];\n var value;\n var id = generateId(); // generate id for drop-down-list option.\n for (var i = 0; i < dataSource.length; i++) {\n var fieldData = getFieldValues(dataSource[i], curFields);\n var curItem = dataSource[i];\n var isHeader = curItem.isHeader;\n if (typeof dataSource[i] === 'string' || typeof dataSource[i] === 'number') {\n value = curItem;\n }\n else {\n value = fieldData[curFields.value];\n }\n if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: curItem,\n text: value,\n options: curOpt,\n fields: curFields\n };\n curOpt.itemCreating(curData);\n }\n if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {\n fieldData = getFieldValues(dataSource[i], curFields);\n if (typeof dataSource[i] === 'string' || typeof dataSource[i] === 'number') {\n value = curItem;\n }\n else {\n value = fieldData[curFields.value];\n }\n }\n var li = createElement('li', {\n id: id + '-' + i,\n className: isHeader ? cssClass.group : cssClass.li, attrs: { role: 'presentation' }\n });\n if (isHeader) {\n if (typeof dataSource[i] === 'string' || typeof dataSource[i] === 'number') {\n li.innerText = curItem;\n }\n else {\n li.innerText = fieldData[curFields.text];\n }\n }\n else {\n var currentID = isHeader ? curOpt.groupTemplateID : curOpt.templateID;\n if (isHeader) {\n append(compiledString(curItem, componentInstance, 'headerTemplate', currentID, !!curOpt.isStringTemplate), li);\n }\n else {\n append(compiledString(curItem, componentInstance, 'template', currentID, !!curOpt.isStringTemplate), li);\n }\n li.setAttribute('data-value', isNullOrUndefined(value) ? 'null' : value);\n li.setAttribute('role', 'option');\n }\n if (curOpt.itemCreated && typeof curOpt.itemCreated === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: curItem,\n text: value,\n item: li,\n options: curOpt,\n fields: curFields\n };\n curOpt.itemCreated(curData);\n }\n liCollection.push(li);\n }\n append(liCollection, ulElement);\n return ulElement;\n }\n ListBase.renderContentTemplate = renderContentTemplate;\n /**\n * Created header items from group template.\n *\n * @param {string} template - that need to convert and generate li element.\n *\n * @param {{Object}[]} dataSource - Specifies local JSON data source.\n *\n * @param {FieldsMapping} fields - Specifies fields for mapping the dataSource.\n *\n * @param {Element[]} headerItems? - Specifies listbase header items.\n */\n // tslint:disable-next-line\n function renderGroupTemplate(groupTemplate, groupDataSource, fields, \n // eslint-disable-next-line\n headerItems, options, componentInstance) {\n // eslint-disable-next-line @typescript-eslint/ban-types\n var compiledString = compile(groupTemplate);\n var curFields = extend({}, ListBase.defaultMappedFields, fields);\n var curOpt = extend({}, defaultListBaseOptions, options);\n var category = curFields.groupBy;\n for (var _i = 0, headerItems_1 = headerItems; _i < headerItems_1.length; _i++) {\n var header = headerItems_1[_i];\n var headerData = {};\n headerData[category] = header.textContent;\n header.innerHTML = '';\n append(compiledString(headerData, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate), header);\n }\n return headerItems;\n }\n ListBase.renderGroupTemplate = renderGroupTemplate;\n function generateId() {\n return Math.floor((1 + Math.random()) * 0x10000)\n .toString(16)\n .substring(1);\n }\n ListBase.generateId = generateId;\n function processSubChild(createElement, fieldData, fields, ds, options, element, level) {\n // Get SubList\n var subDS = fieldData[fields.child] || [];\n var hasChildren = fieldData[fields.hasChildren];\n //Create Sub child\n if (subDS.length) {\n hasChildren = true;\n element.classList.add(cssClass.hasChild);\n if (options.processSubChild) {\n var subLi = createListFromJson(createElement, subDS, options, ++level);\n element.appendChild(subLi);\n }\n }\n // Create expand and collapse node\n if (!!options.expandCollapse && hasChildren && !options.template) {\n element.firstElementChild.classList.add(cssClass.iconWrapper);\n // eslint-disable-next-line @typescript-eslint/ban-types\n var expandElement = options.expandIconPosition === 'Left' ? prepend : append;\n expandElement([createElement('div', { className: 'e-icons ' + options.expandIconClass })], element.querySelector('.' + cssClass.textContent));\n }\n }\n function generateSingleLevelLI(createElement, item, fieldData, fields, className, innerElements, grpLI, id, index, options) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);\n var text = item;\n var value = item;\n var dataSource;\n if (typeof item !== 'string' && typeof item !== 'number' && typeof item !== 'boolean') {\n dataSource = item;\n text = (typeof fieldData[fields.text] === 'boolean' || typeof fieldData[fields.text] === 'number') ?\n fieldData[fields.text] : (fieldData[fields.text] || '');\n value = fieldData[fields.value];\n }\n var elementID;\n if (!isNullOrUndefined(dataSource) && !isNullOrUndefined(fieldData[fields.id])\n && fieldData[fields.id] !== '') {\n elementID = id;\n }\n else {\n elementID = id + '-' + index;\n }\n var li = createElement('li', {\n className: (grpLI === true ? cssClass.group : cssClass.li) + ' ' + (isNullOrUndefined(className) ? '' : className),\n id: elementID, attrs: (ariaAttributes.groupItemRole !== '' && ariaAttributes.itemRole !== '' ?\n { role: (grpLI === true ? ariaAttributes.groupItemRole : ariaAttributes.itemRole) } : {})\n });\n // eslint-disable-next-line no-prototype-builtins\n if (dataSource && fieldData.hasOwnProperty(fields.enabled) && fieldData[fields.enabled].toString() === 'false') {\n li.classList.add(cssClass.disabled);\n }\n if (grpLI) {\n li.innerText = text;\n }\n else {\n li.setAttribute('data-value', isNullOrUndefined(value) ? 'null' : value);\n li.setAttribute('role', 'option');\n // eslint-disable-next-line no-prototype-builtins\n if (dataSource && fieldData.hasOwnProperty(fields.htmlAttributes) && fieldData[fields.htmlAttributes]) {\n setAttribute(li, fieldData[fields.htmlAttributes]);\n }\n if (innerElements.length && !curOpt.itemNavigable) {\n append(innerElements, li);\n }\n if (dataSource && (fieldData[fields.url] || (fieldData[fields.urlAttributes] &&\n fieldData[fields.urlAttributes].href))) {\n li.appendChild(anchorTag(createElement, dataSource, fields, text, innerElements, curOpt.itemNavigable));\n }\n else {\n if (innerElements.length && curOpt.itemNavigable) {\n append(innerElements, li);\n }\n li.appendChild(document.createTextNode(text));\n }\n }\n return li;\n }\n function getModuleClass(moduleName) {\n var moduleClass;\n // eslint-disable-next-line\n return moduleClass = {\n li: \"e-\" + moduleName + \"-item\",\n ul: \"e-\" + moduleName + \"-parent e-ul\",\n group: \"e-\" + moduleName + \"-group-item\",\n icon: \"e-\" + moduleName + \"-icon\",\n text: \"e-\" + moduleName + \"-text\",\n check: \"e-\" + moduleName + \"-check\",\n checked: 'e-checked',\n selected: 'e-selected',\n expanded: 'e-expanded',\n textContent: 'e-text-content',\n hasChild: 'e-has-child',\n level: 'e-level',\n url: \"e-\" + moduleName + \"-url\",\n collapsible: 'e-icon-collapsible',\n disabled: 'e-disabled',\n image: \"e-\" + moduleName + \"-img\",\n iconWrapper: 'e-icon-wrapper',\n anchorWrap: 'e-anchor-wrap',\n navigable: 'e-navigable'\n };\n }\n function anchorTag(createElement, dataSource, fields, text, innerElements, isFullNavigation) {\n var fieldData = getFieldValues(dataSource, fields);\n var attr = { href: fieldData[fields.url] };\n // eslint-disable-next-line no-prototype-builtins\n if (fieldData.hasOwnProperty(fields.urlAttributes) && fieldData[fields.urlAttributes]) {\n merge(attr, fieldData[fields.urlAttributes]);\n attr.href = fieldData[fields.url] ? fieldData[fields.url] :\n fieldData[fields.urlAttributes].href;\n }\n var anchorTag;\n if (!isFullNavigation) {\n anchorTag = createElement('a', { className: cssClass.text + ' ' + cssClass.url, innerHTML: text });\n }\n else {\n anchorTag = createElement('a', { className: cssClass.text + ' ' + cssClass.url });\n var anchorWrapper = createElement('div', { className: cssClass.anchorWrap });\n if (innerElements && innerElements.length) {\n append(innerElements, anchorWrapper);\n }\n anchorWrapper.appendChild(document.createTextNode(text));\n append([anchorWrapper], anchorTag);\n }\n setAttribute(anchorTag, attr);\n return anchorTag;\n }\n // tslint:disable-next-line\n /* tslint:disable:align */\n function generateLI(createElement, item, fieldData, \n // eslint-disable-next-line\n fields, className, options, componentInstance) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);\n var text = item;\n var uID;\n var grpLI;\n var dataSource;\n if (typeof item !== 'string' && typeof item !== 'number') {\n dataSource = item;\n text = fieldData[fields.text] || '';\n // tslint:disable-next-line\n uID = (isNullOrUndefined(fieldData['_id'])) ? fieldData[fields.id] : fieldData['_id'];\n // eslint-disable-next-line no-prototype-builtins\n grpLI = (item.hasOwnProperty('isHeader') && item.isHeader)\n ? true : false;\n }\n if (options && options.enableHtmlSanitizer) {\n // eslint-disable-next-line no-self-assign\n text = text;\n }\n var li = createElement('li', {\n className: (grpLI === true ? cssClass.group : cssClass.li) + ' ' + (isNullOrUndefined(className) ? '' : className),\n attrs: (ariaAttributes.groupItemRole !== '' && ariaAttributes.itemRole !== '' ?\n { role: (grpLI === true ? ariaAttributes.groupItemRole : ariaAttributes.itemRole) } : {})\n });\n if (!isNullOrUndefined(uID) === true) {\n li.setAttribute('data-uid', uID);\n }\n else {\n li.setAttribute('data-uid', generateId());\n }\n var blazId = 'BlazId';\n if (options && !!options.removeBlazorID\n && typeof item === 'object'\n // eslint-disable-next-line no-prototype-builtins\n && item.hasOwnProperty(blazId)) {\n delete item[blazId];\n }\n if (grpLI && options && options.groupTemplate) {\n // eslint-disable-next-line @typescript-eslint/ban-types\n var compiledString = compile(options.groupTemplate);\n append(compiledString(item, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate), li);\n }\n else if (!grpLI && options && options.template) {\n // eslint-disable-next-line @typescript-eslint/ban-types\n var compiledString = compile(options.template);\n append(compiledString(item, componentInstance, 'template', curOpt.templateID, !!curOpt.isStringTemplate), li);\n }\n else {\n var innerDiv = createElement('div', {\n className: cssClass.textContent,\n attrs: (ariaAttributes.wrapperRole !== '' ? { role: ariaAttributes.wrapperRole } : {})\n });\n if (dataSource && (fieldData[fields.url] || (fieldData[fields.urlAttributes] &&\n fieldData[fields.urlAttributes].href))) {\n innerDiv.appendChild(anchorTag(createElement, dataSource, fields, text, null, curOpt.itemNavigable));\n }\n else {\n var element = createElement('span', {\n className: cssClass.text,\n attrs: (ariaAttributes.itemText !== '' ? { role: ariaAttributes.itemText } : {})\n });\n if (options && options.enableHtmlSanitizer) {\n element.innerText = text;\n }\n else {\n element.innerHTML = text;\n }\n innerDiv.appendChild(element);\n }\n li.appendChild(innerDiv);\n }\n return li;\n }\n /**\n * Returns UL element based on the given LI element.\n *\n * @param {HTMLElement[]} liElement - Specifies array of LI element.\n *\n * @param {string} className? - Specifies class name that need to be added in UL element.\n *\n * @param {ListBaseOptions} options? - Specifies ListBase options.\n */\n function generateUL(createElement, liElement, className, options) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);\n cssClass = getModuleClass(curOpt.moduleName);\n var ulElement = createElement('ul', {\n className: cssClass.ul + ' ' + (isNullOrUndefined(className) ? '' : className),\n attrs: (ariaAttributes.listRole !== '' ? { role: ariaAttributes.listRole } : {})\n });\n append(liElement, ulElement);\n return ulElement;\n }\n ListBase.generateUL = generateUL;\n /**\n * Returns LI element with additional DIV tag based on the given LI element.\n *\n * @param {liElement} liElement - Specifies LI element.\n *\n * @param {string} className? - Specifies class name that need to be added in created DIV element.\n *\n * @param {ListBaseOptions} options? - Specifies ListBase options.\n */\n function generateIcon(createElement, liElement, className, options) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n cssClass = getModuleClass(curOpt.moduleName);\n // eslint-disable-next-line @typescript-eslint/ban-types\n var expandElement = curOpt.expandIconPosition === 'Left' ? prepend : append;\n expandElement([createElement('div', {\n className: 'e-icons ' + curOpt.expandIconClass + ' ' +\n (isNullOrUndefined(className) ? '' : className)\n })], liElement.querySelector('.' + cssClass.textContent));\n return liElement;\n }\n ListBase.generateIcon = generateIcon;\n})(ListBase || (ListBase = {}));\n/**\n * Used to get dataSource item from complex data using fields.\n *\n * @param {Object} dataSource - Specifies an JSON or String data.\n *\n * @param {FieldsMapping} fields - Fields that are mapped from the dataSource.\n */\nexport function getFieldValues(dataItem, fields) {\n var fieldData = {};\n if (isNullOrUndefined(dataItem) || typeof (dataItem) === 'string' || typeof (dataItem) === 'number'\n || !isNullOrUndefined(dataItem.isHeader)) {\n return dataItem;\n }\n else {\n for (var _i = 0, _a = Object.keys(fields); _i < _a.length; _i++) {\n var field = _a[_i];\n var dataField = fields[field];\n var value = !isNullOrUndefined(dataField) &&\n typeof (dataField) === 'string' ? getValue(dataField, dataItem) : undefined;\n if (!isNullOrUndefined(value)) {\n fieldData[dataField] = value;\n }\n }\n }\n return fieldData;\n}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { createElement, 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) {\n var _this = this;\n this.element = element;\n this.formObj = new FormValidator(form, {\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 };\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 };\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 };\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);\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 }\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.getAnnocementString(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 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 editIcon = this.quickPopup.element.querySelector('.' + cls.EDIT_CLASS);\n this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.EDIT_ICON_CLASS, readonly, editIcon, this.editClick);\n var deleteIcon = this.quickPopup.element.querySelector('.' + cls.DELETE_CLASS);\n this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.DELETE_ICON_CLASS, readonly, deleteIcon, this.deleteClick);\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: \"
\"\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 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 break;\n case 'Event':\n argsData = this.getFormattedString(data);\n content = '
';\n if (data[this.parent.eventFields.location]) {\n content += '
';\n }\n if (data[this.parent.eventFields.startTimezone] || data[this.parent.eventFields.endTimezone]) {\n content += '
';\n }\n if (data[this.parent.eventFields.description]) {\n content += '
';\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 break;\n case 'Event':\n footer = \"\" + (this.parent.isAdaptive ? '' : \"
\"));\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 () {\n this.isCrudAction = true;\n this.quickPopupHide();\n };\n QuickPopups.prototype.detailsClick = function () {\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.isCrudAction = false;\n this.fieldValidator.destroyToolTip();\n this.quickPopupHide();\n this.parent.eventWindow.openEditor(this.parent.activeCellsData, 'Add');\n };\n QuickPopups.prototype.editClick = function () {\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 () {\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 () {\n this.quickPopupHide();\n this.morePopup.hide();\n };\n QuickPopups.prototype.dialogButtonClick = function (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(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 // Depricated 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 () {\n var _this = this;\n var args = {\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();\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.destroyButtons();\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: '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.destroyButtons();\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 () {\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 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();\n this.parent.setScheduleProperties({ selectedDate: date });\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)) {\n this.quickPopupHide();\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, classNames)) {\n this.quickPopupHide();\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 () {\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.removeEventListner = 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.destroyButtons = function () {\n var buttonCollections = [].slice.call(this.quickPopup.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 if (this.quickDialog.element) {\n this.quickDialog.destroy();\n remove(this.quickDialog.element);\n this.quickDialog.element = null;\n }\n this.renderQuickDialog();\n };\n QuickPopups.prototype.refreshQuickPopup = function () {\n if (this.quickPopup.element) {\n this.quickPopup.destroy();\n remove(this.quickPopup.element);\n this.quickPopup.element = null;\n }\n this.renderQuickPopup();\n };\n QuickPopups.prototype.refreshMorePopup = function () {\n if (this.morePopup.element) {\n this.morePopup.destroy();\n remove(this.morePopup.element);\n this.morePopup.element = null;\n }\n this.renderMorePopup();\n };\n QuickPopups.prototype.destroy = function () {\n if (this.quickPopup.element.querySelectorAll('.e-formvalidator').length) {\n this.fieldValidator.destroy();\n }\n this.removeEventListner();\n this.destroyButtons();\n this.quickPopup.destroy();\n remove(this.quickPopup.element);\n this.morePopup.destroy();\n remove(this.morePopup.element);\n if (this.quickDialog.element) {\n this.quickDialog.destroy();\n remove(this.quickDialog.element);\n this.quickDialog.element = null;\n }\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, isBlazor } from '@syncfusion/ej2-base';\nimport { EventHandler, Touch, Browser, Animation as PopupAnimation } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, getUniqueID, formatUnit } from '@syncfusion/ej2-base';\nimport { attributes, closest, removeClass, addClass, remove, updateBlazorTemplate, resetBlazorTemplate } 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 *
\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.isBlazorTooltip = false;\n _this.contentTargetValue = null;\n _this.contentEvent = null;\n _this.contentAnimation = null;\n return _this;\n }\n Tooltip.prototype.initialize = function () {\n this.formatPosition();\n if (!(this.isServerRender())) {\n addClass([this.element], ROOT);\n }\n };\n Tooltip.prototype.isServerRender = function () {\n return isBlazor() && this.isServerRendered;\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 if (!(this.isServerRender())) {\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 else {\n var tip = this.tooltipEle.querySelector('.' + ARROW_TIP);\n addClass([tip.querySelector('.' + ARROW_TIP_OUTER)], this.tipClass);\n addClass([tip.querySelector('.' + ARROW_TIP_INNER)], this.tipClass);\n this.tooltipEle.appendChild(tip);\n }\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.reposition = function (target) {\n var elePos = this.getTooltipPosition(target);\n this.popupObj.position = { X: elePos.left, Y: elePos.top };\n this.popupObj.dataBind();\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 resetBlazorTemplate(this.element.id + 'content', 'Content');\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 = this.tooltipEle.querySelector('.' + ARROW_TIP);\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 = this.tooltipEle.querySelectorAll('.' + ARROW_TIP + ',.' + ARROW_TIP_OUTER + ',.' + ARROW_TIP_INNER);\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 = this.tooltipEle.querySelector('.' + ARROW_TIP);\n var arrowInnerELe = this.tooltipEle.querySelector('.' + ARROW_TIP_INNER);\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 = this.tooltipEle.querySelector('.' + CONTENT);\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 if (this.isBlazorTooltip || !(this.isServerRender())) {\n tooltipContent.innerHTML = '';\n if (this.content instanceof HTMLElement) {\n tooltipContent.appendChild(this.content);\n }\n else if (typeof this.content === 'string' && this.content.indexOf('
Blazor') < 0) {\n if (this.enableHtmlSanitizer) {\n this.setProperties({ content: SanitizeHtmlHelper.sanitize(this.content) }, true);\n }\n tooltipContent[this.enableHtmlParse ? 'innerHTML' : 'textContent'] = this.content;\n }\n else {\n // eslint-disable-next-line\n var templateFunction = compile(this.content);\n var tempArr = templateFunction({}, this, 'content', this.element.id + 'content', undefined, undefined, tooltipContent);\n if (tempArr) {\n append(tempArr, tooltipContent);\n }\n this.renderReactTemplates();\n if (typeof this.content === 'string' && this.content.indexOf('
Blazor') >= 0) {\n this.isBlazorTemplate = true;\n updateBlazorTemplate(this.element.id + 'content', 'Content', this);\n }\n }\n }\n }\n else {\n if (target && !isNullOrUndefined(target.getAttribute('data-content'))) {\n tooltipContent.innerHTML = target.getAttribute('data-content');\n }\n }\n };\n Tooltip.prototype.renderCloseIcon = function () {\n if (!this.isSticky) {\n return;\n }\n var tipClose = this.createElement('div', { className: ICON + ' ' + CLOSE });\n this.tooltipEle.appendChild(tipClose);\n EventHandler.add(tipClose, Browser.touchStartEvent, this.onStickyClose, this);\n };\n Tooltip.prototype.addDescribedBy = function (target, id) {\n var describedby = (target.getAttribute('aria-describedby') || '').split(/\\s+/);\n if (describedby.indexOf(id) < 0) {\n describedby.push(id);\n }\n attributes(target, { 'aria-describedby': describedby.join(' ').trim(), 'data-tooltip-id': id });\n };\n Tooltip.prototype.removeDescribedBy = function (target) {\n var id = target.getAttribute('data-tooltip-id');\n var describedby = (target.getAttribute('aria-describedby') || '').split(/\\s+/);\n var index = describedby.indexOf(id);\n if (index !== -1) {\n describedby.splice(index, 1);\n }\n target.removeAttribute('data-tooltip-id');\n var orgdescribedby = describedby.join(' ').trim();\n if (orgdescribedby) {\n target.setAttribute('aria-describedby', orgdescribedby);\n }\n else {\n target.removeAttribute('aria-describedby');\n }\n };\n Tooltip.prototype.tapHoldHandler = function (evt) {\n clearTimeout(this.autoCloseTimer);\n this.targetHover(evt.originalEvent);\n };\n Tooltip.prototype.touchEndHandler = function (e) {\n var _this = this;\n if (this.isSticky) {\n return;\n }\n // eslint-disable-next-line\n var close = function () {\n _this.close();\n };\n this.autoCloseTimer = setTimeout(close, TOUCHEND_HIDE_DELAY);\n };\n Tooltip.prototype.targetClick = function (e) {\n var target;\n if (this.target) {\n target = closest(e.target, this.target);\n }\n else {\n target = this.element;\n }\n if (isNullOrUndefined(target)) {\n return;\n }\n if (target.getAttribute('data-tooltip-id') === null) {\n this.targetHover(e);\n }\n else if (!this.isSticky) {\n this.hideTooltip(this.animation.close, e, target);\n }\n };\n Tooltip.prototype.targetHover = function (e) {\n var target;\n if (this.target) {\n target = closest(e.target, this.target);\n }\n else {\n target = this.element;\n }\n if (isNullOrUndefined(target) || (target.getAttribute('data-tooltip-id') !== null && this.closeDelay === 0)) {\n return;\n }\n var targetList = [].slice.call(document.querySelectorAll('[data-tooltip-id= ' + this.ctrlId + '_content]'));\n for (var _i = 0, targetList_1 = targetList; _i < targetList_1.length; _i++) {\n var target_1 = targetList_1[_i];\n this.restoreElement(target_1);\n }\n this.showTooltip(target, this.animation.open, e);\n };\n Tooltip.prototype.showTooltip = function (target, showAnimation, e) {\n var _this = this;\n clearTimeout(this.showTimer);\n clearTimeout(this.hideTimer);\n this.tooltipEventArgs = {\n type: e ? e.type : null, cancel: false, target: target, event: e ? e : null,\n element: this.tooltipEle, isInteracted: !isNullOrUndefined(e)\n };\n // eslint-disable-next-line\n var observeCallback = function (beforeRenderArgs) {\n _this.beforeRenderCallback(beforeRenderArgs, target, e, showAnimation);\n };\n this.trigger('beforeRender', this.tooltipEventArgs, observeCallback.bind(this));\n };\n Tooltip.prototype.beforeRenderCallback = function (beforeRenderArgs, target, e, showAnimation) {\n var isBlazorTooltipRendered = false;\n if (beforeRenderArgs.cancel) {\n this.isHidden = true;\n this.clear();\n }\n else {\n this.isHidden = false;\n if (isNullOrUndefined(this.tooltipEle)) {\n if (this.isServerRender()) {\n this.contentTargetValue = target;\n this.contentEvent = e;\n this.contentAnimation = showAnimation;\n // eslint-disable-next-line\n var args = { 'enableTooltip': 'true' };\n /* eslint-disable */\n this.interopAdaptor.invokeMethodAsync('OnTooltipServerCall', args);\n /* eslint-enable */\n isBlazorTooltipRendered = true;\n }\n else {\n this.ctrlId = this.element.getAttribute('id') ?\n getUniqueID(this.element.getAttribute('id')) : getUniqueID('tooltip');\n this.tooltipEle = this.createElement('div', {\n className: TOOLTIP_WRAP + ' ' + POPUP_ROOT + ' ' + POPUP_LIB, attrs: {\n role: 'tooltip', 'aria-hidden': 'false', 'id': this.ctrlId + '_content'\n }, styles: 'width:' +\n formatUnit(this.width) + ';height:' + formatUnit(this.height) + ';position:absolute;'\n });\n this.beforeRenderBlazor(target, this);\n }\n if (!isBlazorTooltipRendered) {\n this.afterRenderBlazor(target, e, showAnimation, this);\n }\n }\n else {\n if (this.isServerRender()) {\n addClass([this.tooltipEle], POPUP_OPEN);\n document.body.appendChild(this.tooltipEle);\n this.renderCloseIcon();\n this.renderPopup(target);\n }\n if (target) {\n this.adjustArrow(target, this.position, this.tooltipPositionX, this.tooltipPositionY);\n this.addDescribedBy(target, this.ctrlId + '_content');\n this.renderContent(target);\n PopupAnimation.stop(this.tooltipEle);\n this.reposition(target);\n this.afterRenderBlazor(target, e, showAnimation, this);\n }\n }\n }\n };\n Tooltip.prototype.contentUpdated = function (args) {\n if (isNullOrUndefined(this.tooltipEle)) {\n if (this.isServerRender()) {\n this.ctrlId = this.element.id;\n this.tooltipEle = document.querySelector('#' + this.ctrlId + '_content');\n if (this.tooltipEle) {\n this.tooltipEle.setAttribute('style', 'width:' + formatUnit(this.width) +\n ';height:' + formatUnit(this.height) + ';position:absolute;');\n this.beforeRenderBlazor(this.contentTargetValue, this);\n this.afterRenderBlazor(this.contentTargetValue, this.contentEvent, this.contentAnimation, this);\n this.contentTargetValue = this.contentEvent = this.contentAnimation = null;\n }\n }\n }\n };\n Tooltip.prototype.beforeRenderBlazor = function (target, ctrlObj) {\n if (target) {\n if (Browser.isDevice) {\n addClass([ctrlObj.tooltipEle], DEVICE);\n }\n if (ctrlObj.width !== 'auto') {\n ctrlObj.tooltipEle.style.maxWidth = formatUnit(ctrlObj.width);\n }\n if (!(this.isServerRender())) {\n ctrlObj.tooltipEle.appendChild(ctrlObj.createElement('div', { className: CONTENT }));\n }\n document.body.appendChild(ctrlObj.tooltipEle);\n removeClass([ctrlObj.tooltipEle], HIDE_POPUP);\n ctrlObj.addDescribedBy(target, ctrlObj.ctrlId + '_content');\n ctrlObj.renderContent(target);\n addClass([ctrlObj.tooltipEle], POPUP_OPEN);\n if (ctrlObj.showTipPointer) {\n ctrlObj.renderArrow();\n }\n ctrlObj.renderCloseIcon();\n ctrlObj.renderPopup(target);\n ctrlObj.adjustArrow(target, ctrlObj.position, ctrlObj.tooltipPositionX, ctrlObj.tooltipPositionY);\n PopupAnimation.stop(ctrlObj.tooltipEle);\n ctrlObj.reposition(target);\n }\n };\n Tooltip.prototype.afterRenderBlazor = function (target, e, showAnimation, ctrlObj) {\n if (target) {\n removeClass([ctrlObj.tooltipEle], POPUP_OPEN);\n addClass([ctrlObj.tooltipEle], POPUP_CLOSE);\n ctrlObj.tooltipEventArgs = {\n type: e ? e.type : null, cancel: false, target: target, event: e ? e : null,\n element: ctrlObj.tooltipEle, isInteracted: !isNullOrUndefined(e)\n };\n if (ctrlObj.needTemplateReposition() && !ctrlObj.mouseTrail) {\n ctrlObj.tooltipEle.style.display = 'none';\n }\n // eslint-disable-next-line\n var observeCallback = function (observedArgs) {\n ctrlObj.beforeOpenCallback(observedArgs, target, showAnimation, e);\n };\n ctrlObj.trigger('beforeOpen', ctrlObj.tooltipEventArgs, observeCallback.bind(ctrlObj));\n }\n };\n Tooltip.prototype.beforeOpenCallback = function (observedArgs, target, showAnimation, e) {\n var _this = this;\n if (observedArgs.cancel) {\n this.isHidden = true;\n this.clear();\n this.restoreElement(target);\n }\n else {\n // eslint-disable-next-line\n var openAnimation_1 = {\n name: showAnimation.effect,\n duration: showAnimation.duration,\n delay: showAnimation.delay,\n timingFunction: 'easeOut'\n };\n if (showAnimation.effect === 'None') {\n openAnimation_1 = undefined;\n }\n if (this.openDelay > 0) {\n // eslint-disable-next-line\n var show = function () {\n if (_this.mouseTrail) {\n EventHandler.add(target, 'mousemove touchstart mouseenter', _this.onMouseMove, _this);\n }\n if (_this.popupObj) {\n _this.popupObj.show(openAnimation_1, target);\n }\n };\n this.showTimer = setTimeout(show, this.openDelay);\n }\n else {\n if (this.popupObj) {\n this.popupObj.show(openAnimation_1, target);\n }\n }\n }\n if (e) {\n this.wireMouseEvents(e, target);\n }\n };\n Tooltip.prototype.needTemplateReposition = function () {\n // eslint-disable-next-line\n var tooltip = this;\n return !isNullOrUndefined(tooltip.viewContainerRef)\n && typeof tooltip.viewContainerRef !== 'string'\n || (this.isServerRender()) && this.isBlazorTemplate;\n };\n Tooltip.prototype.checkCollision = function (target, x, y) {\n var elePos = {\n left: x, top: y, position: this.position,\n horizontal: this.tooltipPositionX, vertical: this.tooltipPositionY\n };\n var affectedPos = isCollide(this.tooltipEle, this.checkCollideTarget(), x, y);\n if (affectedPos.length > 0) {\n elePos.horizontal = affectedPos.indexOf('left') >= 0 ? 'Right' : affectedPos.indexOf('right') >= 0 ? 'Left' :\n this.tooltipPositionX;\n elePos.vertical = affectedPos.indexOf('top') >= 0 ? 'Bottom' : affectedPos.indexOf('bottom') >= 0 ? 'Top' :\n this.tooltipPositionY;\n }\n return elePos;\n };\n Tooltip.prototype.collisionFlipFit = function (target, x, y) {\n var elePos = this.checkCollision(target, x, y);\n var newpos = elePos.position;\n if (this.tooltipPositionY !== elePos.vertical) {\n newpos = ((this.position.indexOf('Bottom') === 0 || this.position.indexOf('Top') === 0) ?\n elePos.vertical + this.tooltipPositionX : this.tooltipPositionX + elePos.vertical);\n }\n if (this.tooltipPositionX !== elePos.horizontal) {\n if (newpos.indexOf('Left') === 0) {\n elePos.vertical = (newpos === 'LeftTop' || newpos === 'LeftCenter') ? 'Top' : 'Bottom';\n newpos = (elePos.vertical + 'Left');\n }\n if (newpos.indexOf('Right') === 0) {\n elePos.vertical = (newpos === 'RightTop' || newpos === 'RightCenter') ? 'Top' : 'Bottom';\n newpos = (elePos.vertical + 'Right');\n }\n elePos.horizontal = this.tooltipPositionX;\n }\n this.tooltipEventArgs = {\n type: null, cancel: false, target: target, event: null,\n element: this.tooltipEle, collidedPosition: newpos\n };\n this.trigger('beforeCollision', this.tooltipEventArgs);\n if (elePos.position !== newpos) {\n var pos = calculatePosition(target, elePos.horizontal, elePos.vertical);\n this.adjustArrow(target, newpos, elePos.horizontal, elePos.vertical);\n var offsetPos = this.calculateTooltipOffset(newpos);\n offsetPos.top -= (('TopBottom'.indexOf(this.position.split(/(?=[A-Z])/)[0]) !== -1) &&\n ('TopBottom'.indexOf(newpos.split(/(?=[A-Z])/)[0]) !== -1)) ? (2 * this.offsetY) : 0;\n offsetPos.left -= (('RightLeft'.indexOf(this.position.split(/(?=[A-Z])/)[0]) !== -1) &&\n ('RightLeft'.indexOf(newpos.split(/(?=[A-Z])/)[0]) !== -1)) ? (2 * this.offsetX) : 0;\n elePos.position = newpos;\n elePos.left = pos.left + offsetPos.left;\n elePos.top = pos.top + offsetPos.top;\n }\n else {\n this.adjustArrow(target, newpos, elePos.horizontal, elePos.vertical);\n }\n var eleOffset = { left: elePos.left, top: elePos.top };\n var left = fit(this.tooltipEle, this.checkCollideTarget(), { X: true, Y: false }, eleOffset).left;\n this.tooltipEle.style.display = 'block';\n if (this.showTipPointer && (newpos.indexOf('Bottom') === 0 || newpos.indexOf('Top') === 0)) {\n var arrowEle = this.tooltipEle.querySelector('.' + ARROW_TIP);\n var arrowleft = parseInt(arrowEle.style.left, 10) - (left - elePos.left);\n if (arrowleft < 0) {\n arrowleft = 0;\n }\n else if ((arrowleft + arrowEle.offsetWidth) > this.tooltipEle.clientWidth) {\n arrowleft = this.tooltipEle.clientWidth - arrowEle.offsetWidth;\n }\n arrowEle.style.left = arrowleft.toString() + 'px';\n }\n this.tooltipEle.style.display = '';\n eleOffset.left = left;\n return eleOffset;\n };\n Tooltip.prototype.checkCollideTarget = function () {\n return !this.windowCollision && this.target ? this.element : null;\n };\n Tooltip.prototype.hideTooltip = function (hideAnimation, e, targetElement) {\n var _this = this;\n if (this.closeDelay > 0) {\n clearTimeout(this.hideTimer);\n clearTimeout(this.showTimer);\n // eslint-disable-next-line\n var hide = function () {\n if (_this.closeDelay && _this.tooltipEle && _this.isTooltipOpen) {\n return;\n }\n _this.tooltipHide(hideAnimation, e, targetElement);\n };\n this.hideTimer = setTimeout(hide, this.closeDelay);\n }\n else {\n this.tooltipHide(hideAnimation, e, targetElement);\n }\n };\n Tooltip.prototype.tooltipHide = function (hideAnimation, e, targetElement) {\n var _this = this;\n var target;\n if (e) {\n target = this.target ? (targetElement || e.target) : this.element;\n }\n else {\n target = document.querySelector('[data-tooltip-id= ' + this.ctrlId + '_content]');\n }\n this.tooltipEventArgs = {\n type: e ? e.type : null, cancel: false, target: target, event: e ? e : null,\n element: this.tooltipEle, isInteracted: !isNullOrUndefined(e)\n };\n // this line commented for close the tooltip popup element even the target element destroyed in a page.\n //if (isNullOrUndefined(target)) { return; }\n this.trigger('beforeClose', this.tooltipEventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n if (_this.isServerRender()) {\n _this.blazorHide(hideAnimation, target);\n }\n else {\n _this.popupHide(hideAnimation, target);\n }\n }\n else {\n _this.isHidden = false;\n }\n });\n };\n /* istanbul ignore next */\n Tooltip.prototype.blazorHide = function (hideAnimation, target) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy = this;\n // eslint-disable-next-line\n var hide = function () {\n proxy.popupHide(hideAnimation, target);\n };\n if (this.popupObj) {\n this.popupHide(hideAnimation, target);\n }\n else {\n setTimeout(hide, 200);\n }\n };\n Tooltip.prototype.popupHide = function (hideAnimation, target) {\n if (target) {\n this.restoreElement(target);\n }\n this.isHidden = true;\n // eslint-disable-next-line\n var closeAnimation = {\n name: hideAnimation.effect,\n duration: hideAnimation.duration,\n delay: hideAnimation.delay,\n timingFunction: 'easeIn'\n };\n if (hideAnimation.effect === 'None') {\n closeAnimation = undefined;\n }\n if (this.popupObj) {\n this.popupObj.hide(closeAnimation);\n }\n };\n Tooltip.prototype.restoreElement = function (target) {\n this.unwireMouseEvents(target);\n if (!isNullOrUndefined(target.getAttribute('data-content'))) {\n target.setAttribute('title', target.getAttribute('data-content'));\n target.removeAttribute('data-content');\n }\n this.removeDescribedBy(target);\n };\n Tooltip.prototype.clear = function () {\n if (this.tooltipEle) {\n removeClass([this.tooltipEle], POPUP_CLOSE);\n addClass([this.tooltipEle], POPUP_OPEN);\n }\n if (this.isHidden) {\n if (this.popupObj) {\n this.popupObj.destroy();\n }\n if (this.isServerRender() && this.tooltipEle) {\n this.tooltipEle.style.display = 'none';\n // eslint-disable-next-line\n var args = { 'enableTooltip': 'false' };\n /* eslint-disable */\n this.interopAdaptor.invokeMethodAsync('OnTooltipServerCall', args);\n /* eslint-enable */\n remove(this.tooltipEle);\n }\n else if (this.tooltipEle) {\n remove(this.tooltipEle);\n }\n this.tooltipEle = null;\n this.popupObj = null;\n }\n };\n Tooltip.prototype.tooltipHover = function (e) {\n if (this.tooltipEle) {\n this.isTooltipOpen = true;\n }\n };\n Tooltip.prototype.tooltipMouseOut = function (e) {\n this.isTooltipOpen = false;\n this.hideTooltip(this.animation.close, e, this.findTarget());\n };\n Tooltip.prototype.onMouseOut = function (e) {\n var enteredElement = e.relatedTarget;\n // don't close the tooltip only if it is tooltip content element\n if (enteredElement && !this.mouseTrail) {\n var checkForTooltipElement = closest(enteredElement, \".\" + TOOLTIP_WRAP + \".\" + POPUP_LIB + \".\" + POPUP_ROOT);\n if (checkForTooltipElement) {\n EventHandler.add(checkForTooltipElement, 'mouseleave', this.tooltipElementMouseOut, this);\n }\n else {\n this.hideTooltip(this.animation.close, e, this.findTarget());\n if (this.closeDelay === 0) {\n this.clear();\n }\n }\n }\n else {\n this.hideTooltip(this.animation.close, e, this.findTarget());\n this.clear();\n }\n };\n Tooltip.prototype.tooltipElementMouseOut = function (e) {\n this.hideTooltip(this.animation.close, e, this.findTarget());\n EventHandler.remove(this.element, 'mouseleave', this.tooltipElementMouseOut);\n this.clear();\n };\n Tooltip.prototype.onStickyClose = function (e) {\n this.close();\n };\n Tooltip.prototype.onMouseMove = function (event) {\n var eventPageX = 0;\n var eventPageY = 0;\n if (event.type.indexOf('touch') > -1) {\n event.preventDefault();\n eventPageX = event.touches[0].pageX;\n eventPageY = event.touches[0].pageY;\n }\n else {\n eventPageX = event.pageX;\n eventPageY = event.pageY;\n }\n PopupAnimation.stop(this.tooltipEle);\n removeClass([this.tooltipEle], POPUP_CLOSE);\n addClass([this.tooltipEle], POPUP_OPEN);\n this.adjustArrow(event.target, this.position, this.tooltipPositionX, this.tooltipPositionY);\n var pos = this.calculateTooltipOffset(this.position);\n var x = eventPageX + pos.left + this.offsetX;\n var y = eventPageY + pos.top + this.offsetY;\n var elePos = this.checkCollision(event.target, x, y);\n if (this.tooltipPositionX !== elePos.horizontal || this.tooltipPositionY !== elePos.vertical) {\n var newpos = (this.position.indexOf('Bottom') === 0 || this.position.indexOf('Top') === 0) ?\n elePos.vertical + elePos.horizontal : elePos.horizontal + elePos.vertical;\n elePos.position = newpos;\n this.adjustArrow(event.target, elePos.position, elePos.horizontal, elePos.vertical);\n var colpos = this.calculateTooltipOffset(elePos.position);\n elePos.left = eventPageX + colpos.left - this.offsetX;\n elePos.top = eventPageY + colpos.top - this.offsetY;\n }\n this.tooltipEle.style.left = elePos.left + 'px';\n this.tooltipEle.style.top = elePos.top + 'px';\n };\n Tooltip.prototype.keyDown = function (event) {\n if (this.tooltipEle && event.keyCode === 27) {\n this.close();\n }\n };\n Tooltip.prototype.touchEnd = function (e) {\n if (this.tooltipEle && closest(e.target, '.' + ROOT) === null && !this.isSticky) {\n this.close();\n }\n };\n Tooltip.prototype.scrollHandler = function (e) {\n if (this.tooltipEle) {\n if (!(closest(e.target, \".\" + TOOLTIP_WRAP + \".\" + POPUP_LIB + \".\" + POPUP_ROOT))) {\n this.close();\n }\n }\n };\n /**\n * Core method that initializes the control rendering.\n *\n * @private\n * @returns {void}\n */\n Tooltip.prototype.render = function () {\n this.initialize();\n this.wireEvents(this.opensOn);\n this.renderComplete();\n };\n /**\n * Initializes the values of private members.\n *\n * @private\n * @returns {void}\n */\n Tooltip.prototype.preRender = function () {\n this.tipClass = TIP_BOTTOM;\n this.tooltipPositionX = 'Center';\n this.tooltipPositionY = 'Top';\n this.isHidden = true;\n };\n /**\n * Binding events to the Tooltip element.\n *\n * @hidden\n * @param {string} trigger - specify the trigger string to the function\n * @returns {void}\n *\n */\n Tooltip.prototype.wireEvents = function (trigger) {\n var triggerList = this.getTriggerList(trigger);\n for (var _i = 0, triggerList_1 = triggerList; _i < triggerList_1.length; _i++) {\n var opensOn = triggerList_1[_i];\n if (opensOn === 'Custom') {\n return;\n }\n if (opensOn === 'Focus') {\n this.wireFocusEvents();\n }\n if (opensOn === 'Click') {\n EventHandler.add(this.element, Browser.touchStartEvent, this.targetClick, this);\n }\n if (opensOn === 'Hover') {\n if (Browser.isDevice) {\n this.touchModule = new Touch(this.element, {\n tapHoldThreshold: TAPHOLD_THRESHOLD,\n tapHold: this.tapHoldHandler.bind(this)\n });\n EventHandler.add(this.element, Browser.touchEndEvent, this.touchEndHandler, this);\n }\n else {\n EventHandler.add(this.element, 'mouseover', this.targetHover, this);\n if (this.isServerRender() && !this.isSticky) {\n EventHandler.add(this.element, 'mouseleave', this.onMouseOut, this);\n }\n }\n }\n }\n EventHandler.add(document, 'touchend', this.touchEnd, this);\n EventHandler.add(document, 'scroll wheel', this.scrollHandler, this);\n EventHandler.add(document, 'keydown', this.keyDown, this);\n };\n Tooltip.prototype.getTriggerList = function (trigger) {\n if (trigger === 'Auto') {\n trigger = (Browser.isDevice) ? 'Hover' : 'Hover Focus';\n }\n return trigger.split(' ');\n };\n Tooltip.prototype.wireFocusEvents = function () {\n if (!isNullOrUndefined(this.target)) {\n var targetList = [].slice.call(this.element.querySelectorAll(this.target));\n for (var _i = 0, targetList_2 = targetList; _i < targetList_2.length; _i++) {\n var target = targetList_2[_i];\n EventHandler.add(target, 'focus', this.targetHover, this);\n }\n }\n else {\n EventHandler.add(this.element, 'focus', this.targetHover, this);\n }\n };\n Tooltip.prototype.wireMouseEvents = function (e, target) {\n if (this.tooltipEle) {\n if (!this.isSticky) {\n if (e.type === 'focus') {\n EventHandler.add(target, 'blur', this.onMouseOut, this);\n }\n if (e.type === 'mouseover') {\n if (!this.isServerRender()) {\n EventHandler.add(target, 'mouseleave', this.onMouseOut, this);\n }\n }\n if (this.closeDelay) {\n EventHandler.add(this.tooltipEle, 'mouseenter', this.tooltipHover, this);\n EventHandler.add(this.tooltipEle, 'mouseleave', this.tooltipMouseOut, this);\n }\n }\n if (this.mouseTrail && this.openDelay === 0) {\n EventHandler.add(target, 'mousemove touchstart mouseenter', this.onMouseMove, this);\n }\n }\n };\n /**\n * Unbinding events from the element on widget destroy.\n *\n * @hidden\n *\n * @param {string} trigger - specify the trigger string to the function\n * @returns {void}\n *\n */\n Tooltip.prototype.unwireEvents = function (trigger) {\n var triggerList = this.getTriggerList(trigger);\n for (var _i = 0, triggerList_2 = triggerList; _i < triggerList_2.length; _i++) {\n var opensOn = triggerList_2[_i];\n if (opensOn === 'Custom') {\n return;\n }\n if (opensOn === 'Focus') {\n this.unwireFocusEvents();\n }\n if (opensOn === 'Click') {\n EventHandler.remove(this.element, Browser.touchStartEvent, this.targetClick);\n }\n if (opensOn === 'Hover') {\n if (Browser.isDevice) {\n if (this.touchModule) {\n this.touchModule.destroy();\n }\n EventHandler.remove(this.element, Browser.touchEndEvent, this.touchEndHandler);\n }\n else {\n EventHandler.remove(this.element, 'mouseover', this.targetHover);\n if (this.isServerRender() && !this.isSticky) {\n EventHandler.remove(this.element, 'mouseleave', this.onMouseOut);\n }\n }\n }\n }\n EventHandler.remove(document, 'touchend', this.touchEnd);\n EventHandler.remove(document, 'scroll wheel', this.scrollHandler);\n EventHandler.remove(document, 'keydown', this.keyDown);\n };\n Tooltip.prototype.unwireFocusEvents = function () {\n if (!isNullOrUndefined(this.target)) {\n var targetList = [].slice.call(this.element.querySelectorAll(this.target));\n for (var _i = 0, targetList_3 = targetList; _i < targetList_3.length; _i++) {\n var target = targetList_3[_i];\n EventHandler.remove(target, 'focus', this.targetHover);\n }\n }\n else {\n EventHandler.remove(this.element, 'focus', this.targetHover);\n }\n };\n Tooltip.prototype.unwireMouseEvents = function (target) {\n if (!this.isSticky) {\n var triggerList = this.getTriggerList(this.opensOn);\n for (var _i = 0, triggerList_3 = triggerList; _i < triggerList_3.length; _i++) {\n var opensOn = triggerList_3[_i];\n if (opensOn === 'Focus') {\n EventHandler.remove(target, 'blur', this.onMouseOut);\n }\n if (opensOn === 'Hover' && !Browser.isDevice) {\n if (!this.isServerRender()) {\n EventHandler.remove(target, 'mouseleave', this.onMouseOut);\n }\n }\n }\n if (this.closeDelay) {\n EventHandler.remove(target, 'mouseenter', this.tooltipHover);\n EventHandler.remove(target, 'mouseleave', this.tooltipMouseOut);\n }\n }\n if (this.mouseTrail) {\n EventHandler.remove(target, 'mousemove touchstart mouseenter', this.onMouseMove);\n }\n };\n Tooltip.prototype.findTarget = function () {\n var target = document.querySelector('[data-tooltip-id= ' + this.ctrlId + '_content]');\n return target;\n };\n /**\n * Core method to return the component name.\n *\n * @private\n *\n * @returns {string} - this method returns module name.\n */\n Tooltip.prototype.getModuleName = function () {\n return 'tooltip';\n };\n /**\n * Returns the properties to be maintained in the persisted state.\n *\n * @private\n *\n * @returns {string} - this method returns persisted data.\n */\n Tooltip.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Called internally, if any of the property value changed.\n *\n * @private\n *\n * @param {TooltipModel} newProp - this param gives new property values to the method\n * @param {TooltipModel} oldProp - this param gives old property values to the method\n * @returns {void}\n *\n */\n Tooltip.prototype.onPropertyChanged = function (newProp, oldProp) {\n var targetElement = this.findTarget();\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n if (this.tooltipEle && targetElement) {\n this.tooltipEle.style.width = this.tooltipEle.style.maxWidth = formatUnit(newProp.width);\n this.reposition(targetElement);\n }\n break;\n case 'height':\n if (this.tooltipEle && targetElement) {\n this.tooltipEle.style.height = formatUnit(newProp.height);\n this.reposition(targetElement);\n }\n break;\n case 'content':\n if (this.tooltipEle) {\n if (this.isServerRender()) {\n this.isBlazorTooltip = true;\n }\n this.renderContent();\n }\n else if (this.isServerRender()) {\n // eslint-disable-next-line\n var args = { 'content': newProp.content };\n /* eslint-disable */\n this.interopAdaptor.invokeMethodAsync('OnTooltipServerCall', args);\n /* eslint-enable */\n }\n break;\n case 'opensOn':\n this.unwireEvents(oldProp.opensOn);\n this.wireEvents(newProp.opensOn);\n break;\n case 'position':\n this.formatPosition();\n if (this.tooltipEle && targetElement) {\n var arrowInnerELe = this.tooltipEle.querySelector('.' + ARROW_TIP_INNER);\n arrowInnerELe.style.top = arrowInnerELe.style.left = null;\n this.reposition(targetElement);\n }\n break;\n case 'tipPointerPosition':\n if (this.tooltipEle && targetElement) {\n this.reposition(targetElement);\n }\n break;\n case 'offsetX':\n if (this.tooltipEle) {\n var x = newProp.offsetX - oldProp.offsetX;\n this.tooltipEle.style.left = (parseInt(this.tooltipEle.style.left, 10) + (x)).toString() + 'px';\n }\n break;\n case 'offsetY':\n if (this.tooltipEle) {\n var y = newProp.offsetY - oldProp.offsetY;\n this.tooltipEle.style.top = (parseInt(this.tooltipEle.style.top, 10) + (y)).toString() + 'px';\n }\n break;\n case 'cssClass':\n if (this.tooltipEle) {\n if (oldProp.cssClass) {\n removeClass([this.tooltipEle], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([this.tooltipEle], newProp.cssClass.split(' '));\n }\n }\n break;\n case 'enableRtl':\n if (this.tooltipEle) {\n if (this.enableRtl) {\n addClass([this.tooltipEle], RTL);\n }\n else {\n removeClass([this.tooltipEle], RTL);\n }\n }\n break;\n }\n }\n };\n /**\n * It is used to show the Tooltip on the specified target with specific animation settings.\n *\n * @param {HTMLElement} element - Target element where the Tooltip is to be displayed. (It is an optional parameter)\n * @param {TooltipAnimationSettings} animation - Sets the specific animation, while showing the Tooltip on the screen. (It is an optional parameter)\n * @returns {void}\n */\n Tooltip.prototype.open = function (element, animation) {\n if (isNullOrUndefined(animation)) {\n animation = this.animation.open;\n }\n if (isNullOrUndefined(element)) {\n element = this.element;\n }\n if (element.style.display === 'none') {\n return;\n }\n this.showTooltip(element, animation);\n };\n /**\n * It is used to hide the Tooltip with specific animation effect.\n *\n * @param {TooltipAnimationSettings} animation - Sets the specific animation when hiding Tooltip from the screen. (It is an optional parameter)\n * @returns {void}\n */\n Tooltip.prototype.close = function (animation) {\n if (!animation) {\n animation = this.animation.close;\n }\n this.hideTooltip(animation);\n };\n /**\n * It is used to refresh the Tooltip content and its position.\n *\n * @param {HTMLElement} target - Target element where the Tooltip content or position needs to be refreshed.\n * @returns {void}\n */\n Tooltip.prototype.refresh = function (target) {\n if (this.tooltipEle) {\n this.renderContent(target);\n }\n if (this.popupObj && target) {\n this.reposition(target);\n }\n };\n /**\n * It is used to destroy the Tooltip component.\n * @method destroy\n * @returns {void}\n * @memberof Tooltip\n */\n Tooltip.prototype.destroy = function () {\n if (!this.isServerRender()) {\n _super.prototype.destroy.call(this);\n if (this.tooltipEle) {\n remove(this.tooltipEle);\n }\n }\n if (this.isServerRender() && this.tooltipEle) {\n var placeholder = document.querySelector('#' + this.ctrlId + '_content_placeholder');\n if (placeholder) {\n placeholder.appendChild(this.tooltipEle);\n }\n }\n if (this.popupObj) {\n this.popupObj.destroy();\n }\n removeClass([this.element], ROOT);\n this.unwireEvents(this.opensOn);\n this.unwireMouseEvents(this.element);\n this.tooltipEle = null;\n this.popupObj = null;\n };\n __decorate([\n Property('auto')\n ], Tooltip.prototype, \"width\", void 0);\n __decorate([\n Property('auto')\n ], Tooltip.prototype, \"height\", void 0);\n __decorate([\n Property()\n ], Tooltip.prototype, \"content\", void 0);\n __decorate([\n Property()\n ], Tooltip.prototype, \"target\", void 0);\n __decorate([\n Property('TopCenter')\n ], Tooltip.prototype, \"position\", void 0);\n __decorate([\n Property(0)\n ], Tooltip.prototype, \"offsetX\", void 0);\n __decorate([\n Property(0)\n ], Tooltip.prototype, \"offsetY\", void 0);\n __decorate([\n Property(true)\n ], Tooltip.prototype, \"showTipPointer\", void 0);\n __decorate([\n Property(true)\n ], Tooltip.prototype, \"enableHtmlParse\", void 0);\n __decorate([\n Property(false)\n ], Tooltip.prototype, \"windowCollision\", void 0);\n __decorate([\n Property('Auto')\n ], Tooltip.prototype, \"tipPointerPosition\", void 0);\n __decorate([\n Property('Auto')\n ], Tooltip.prototype, \"opensOn\", void 0);\n __decorate([\n Property(false)\n ], Tooltip.prototype, \"mouseTrail\", void 0);\n __decorate([\n Property(false)\n ], Tooltip.prototype, \"isSticky\", void 0);\n __decorate([\n Complex({}, Animation)\n ], Tooltip.prototype, \"animation\", void 0);\n __decorate([\n Property(0)\n ], Tooltip.prototype, \"openDelay\", void 0);\n __decorate([\n Property(0)\n ], Tooltip.prototype, \"closeDelay\", void 0);\n __decorate([\n Property()\n ], Tooltip.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], Tooltip.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"beforeRender\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"afterOpen\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"beforeClose\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"afterClose\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"beforeCollision\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"destroyed\", void 0);\n Tooltip = __decorate([\n NotifyPropertyChanges\n ], Tooltip);\n return Tooltip;\n}(Component));\nexport { Tooltip };\n","/* 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 };\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 { updateBlazorTemplate, resetBlazorTemplate, isBlazor, remove, 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 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 dataSource.filter(function (item) {\n var itemValue = getValue(fields.value, item);\n if (!isNullOrUndefined(itemValue) && !isNullOrUndefined(value) && itemValue.toString() === value.toString()) {\n value = getValue(fields.text, item);\n }\n });\n }\n else {\n dataSource.filter(function (item) {\n if (_this.checkNonIgnoreCase(getValue(fields.text, item), text)) {\n value = getValue(fields.value, item);\n }\n });\n }\n }\n }\n return value;\n };\n DropDownBase.prototype.checkingAccent = function (item, text, ignoreCase) {\n var dataItem = DataUtil.ignoreDiacritics(String(item));\n var textItem = DataUtil.ignoreDiacritics(text.toString());\n var value = null;\n if (ignoreCase) {\n if (this.checkIgnoreCase(dataItem, textItem)) {\n value = this.getItemValue(String(item), text, ignoreCase);\n }\n }\n else {\n if (this.checkNonIgnoreCase(String(item), text)) {\n value = this.getItemValue(String(item), text, ignoreCase);\n }\n }\n return value;\n };\n DropDownBase.prototype.checkIgnoreCase = function (item, text) {\n return String(item).toLowerCase() === text.toString().toLowerCase() ? true : false;\n };\n DropDownBase.prototype.checkNonIgnoreCase = function (item, text) {\n return String(item) === text.toString() ? true : false;\n };\n DropDownBase.prototype.getItemValue = function (dataItem, typedText, ignoreCase, isTextByValue) {\n var value = null;\n var dataSource = this.listData;\n var type = this.typeOfData(dataSource).typeof;\n if (isTextByValue) {\n value = dataItem.toString();\n }\n else {\n if (ignoreCase) {\n value = type === 'string' ? String(dataItem) : this.getFormattedValue(String(dataItem));\n }\n else {\n value = type === 'string' ? typedText : this.getFormattedValue(typedText);\n }\n }\n return value;\n };\n DropDownBase.prototype.templateCompiler = function (baseTemplate) {\n var checkTemplate = false;\n if (baseTemplate) {\n 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 this.DropDownBaseresetBlazorTemplates(false, false, true, true);\n var template = actionFailure ? this.actionFailureTemplate : this.noRecordsTemplate;\n var compiledString = void 0;\n var templateId = actionFailure ? this.actionFailureTemplateId : this.noRecordsTemplateId;\n ele.innerHTML = '';\n var tempaltecheck = this.templateCompiler(template);\n if (tempaltecheck) {\n compiledString = compile(select(template, document).innerHTML.trim());\n }\n else {\n compiledString = compile(template);\n }\n var templateName = actionFailure ? 'actionFailureTemplate' : 'noRecordsTemplate';\n // 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 this.DropDownBaseupdateBlazorTemplates(false, false, !actionFailure, actionFailure, false, false, false, false);\n }\n else {\n var l10nLocale = { noRecordsTemplate: 'No records found', actionFailureTemplate: 'Request failed' };\n var componentLocale = new L10n(this.getLocaleName(), {}, this.locale);\n if (componentLocale.getConstant('actionFailureTemplate') !== '') {\n this.l10n = componentLocale;\n }\n else {\n this.l10n = new L10n(this.getModuleName() === 'listbox' ? 'listbox' : 'dropdowns', l10nLocale, this.locale);\n }\n var content = actionFailure ?\n this.l10n.getConstant('actionFailureTemplate') : this.l10n.getConstant('noRecordsTemplate');\n if (this.getModuleName() === 'listbox') {\n var liElem = this.createElement('li');\n liElem.textContent = content;\n ele.appendChild(liElem);\n liElem.classList.add('e-list-nrt');\n }\n else {\n ele.innerHTML = content;\n }\n }\n };\n DropDownBase.prototype.getLocaleName = function () {\n return 'drop-down-base';\n };\n 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 (isBlazor() && isNullOrUndefined(value) || value === 'null') {\n return null;\n }\n if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'number'\n || item.typeof === 'number') {\n return parseFloat(value);\n }\n if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'boolean'\n || item.typeof === 'boolean') {\n return ((value === 'true') || ('' + 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 }\n else {\n this.setListData(this.dataSource, this.fields, this.query);\n }\n };\n DropDownBase.prototype.DropDownBaseupdateBlazorTemplates = function (item, group, noRecord, action, value, header, footer, isEmpty) {\n if (!this.isStringTemplate) {\n if (this.itemTemplate && item) {\n updateBlazorTemplate(this.itemTemplateId, ITEMTEMPLATE_PROPERTY, this, isEmpty);\n }\n if (this.groupTemplate && group) {\n updateBlazorTemplate(this.groupTemplateId, GROUPTEMPLATE_PROPERTY, this, isEmpty);\n }\n if (this.noRecordsTemplate && noRecord) {\n updateBlazorTemplate(this.noRecordsTemplateId, NORECORDSTEMPLATE_PROPERTY, this, isEmpty);\n }\n if (this.actionFailureTemplate && action) {\n updateBlazorTemplate(this.actionFailureTemplateId, ACTIONFAILURETEMPLATE_PROPERTY, this, isEmpty);\n }\n if (value) {\n updateBlazorTemplate(this.valueTemplateId, VALUETEMPLATE_PROPERTY, this, isEmpty);\n }\n if (header) {\n updateBlazorTemplate(this.headerTemplateId, HEADERTEMPLATE_PROPERTY, this);\n }\n if (footer) {\n updateBlazorTemplate(this.footerTemplateId, FOOTERTEMPLATE_PROPERTY, this);\n }\n }\n };\n DropDownBase.prototype.DropDownBaseresetBlazorTemplates = function (item, group, noRecord, action, value, header, footer) {\n if (!this.isStringTemplate) {\n if (this.itemTemplate && item) {\n resetBlazorTemplate(this.itemTemplateId, ITEMTEMPLATE_PROPERTY);\n }\n if (this.groupTemplate && group) {\n resetBlazorTemplate(this.groupTemplateId, GROUPTEMPLATE_PROPERTY);\n }\n if (this.noRecordsTemplate && noRecord) {\n resetBlazorTemplate(this.noRecordsTemplateId, NORECORDSTEMPLATE_PROPERTY);\n }\n if (this.actionFailureTemplate && action) {\n resetBlazorTemplate(this.actionFailureTemplateId, ACTIONFAILURETEMPLATE_PROPERTY);\n }\n if (value) {\n resetBlazorTemplate(this.valueTemplateId, VALUETEMPLATE_PROPERTY);\n }\n if (header) {\n resetBlazorTemplate(this.headerTemplateId, HEADERTEMPLATE_PROPERTY);\n }\n if (footer) {\n resetBlazorTemplate(this.footerTemplateId, FOOTERTEMPLATE_PROPERTY);\n }\n }\n };\n /**\n * Get the properties to be maintained in persisted state.\n *\n * @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.DropDownBaseupdateBlazorTemplates(true, false, false, false);\n _this.liCollections = _this.list.querySelectorAll('.' + dropDownBaseClasses.li);\n _this.updateListValues();\n _this.raiseDataBound(listItems, e);\n }, 0);\n }\n else {\n this.raiseDataBound(listItems, e);\n }\n };\n DropDownBase.prototype.updateListValues = function () {\n // Used this method in component side.\n };\n DropDownBase.prototype.findListElement = function (list, findNode, attribute, value) {\n var liElement = null;\n if (list) {\n var listArr = [].slice.call(list.querySelectorAll(findNode));\n for (var index = 0; index < listArr.length; index++) {\n if (listArr[index].getAttribute(attribute) === (value + '')) {\n liElement = listArr[index];\n break;\n }\n }\n }\n return liElement;\n };\n DropDownBase.prototype.raiseDataBound = function (listItems, e) {\n this.hideSpinner();\n var dataBoundEventArgs = {\n items: listItems,\n e: e\n };\n this.trigger('dataBound', dataBoundEventArgs);\n };\n DropDownBase.prototype.remainingItems = function (dataSource, fields) {\n var spliceData = new DataManager(dataSource).executeLocal(new Query().skip(100));\n if (this.itemTemplate) {\n var listElements = this.templateListItem(spliceData, fields);\n return [].slice.call(listElements.childNodes);\n }\n var type = this.typeOfData(spliceData).typeof;\n if (type === 'string' || type === 'number' || type === 'boolean') {\n return ListBase.createListItemFromArray(this.createElement, spliceData, true, this.listOption(spliceData, fields), this);\n }\n return ListBase.createListItemFromJson(this.createElement, spliceData, this.listOption(spliceData, fields), 1, true, this);\n };\n DropDownBase.prototype.emptyDataRequest = function (fields) {\n var listItems = [];\n this.onActionComplete(this.renderItems(listItems, fields), listItems);\n this.isRequested = false;\n this.hideSpinner();\n };\n DropDownBase.prototype.showSpinner = function () {\n // Used this method in component side.\n };\n DropDownBase.prototype.hideSpinner = function () {\n // Used this method in component side.\n };\n DropDownBase.prototype.onActionFailure = function (e) {\n this.liCollections = [];\n this.trigger('actionFailure', e);\n this.l10nUpdate(true);\n addClass([this.list], dropDownBaseClasses.noData);\n };\n /* 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 if (isBlazor() && this.isServerRendered && this.getModuleName() === 'listbox') {\n remove(this.list.querySelector('.e-list-parent'));\n remove(this.list.querySelector('.e-hidden-select'));\n }\n else {\n // 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 }\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.DropDownBaseupdateBlazorTemplates(false, true, false, false, false, false, false, false);\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 var isTempEmpty = (this.getModuleName() === 'listbox') ? true : false;\n this.DropDownBaseupdateBlazorTemplates(true, false, false, false, false, false, false, isTempEmpty);\n }\n else {\n ulElement = this.createListItems(listData, fields);\n }\n return ulElement;\n };\n DropDownBase.prototype.templateListItem = function (dataSource, fields) {\n this.DropDownBaseresetBlazorTemplates(true, false, false, false);\n var option = this.listOption(dataSource, fields);\n option.templateID = this.itemTemplateId;\n option.isStringTemplate = this.isStringTemplate;\n var itemcheck = this.templateCompiler(this.itemTemplate);\n if (itemcheck) {\n var itemValue = select(this.itemTemplate, document).innerHTML.trim();\n return ListBase.renderContentTemplate(this.createElement, itemValue, dataSource, fields.properties, option, this);\n }\n else {\n return ListBase.renderContentTemplate(this.createElement, this.itemTemplate, dataSource, fields.properties, option, this);\n }\n };\n 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 this.DropDownBaseresetBlazorTemplates(true, false, false, false);\n var itemsCount = this.getItems().length;\n var selectedItemValue = this.list.querySelector('.' + dropDownBaseClasses.selected);\n items = (items instanceof Array ? items : [items]);\n var index;\n index = (isNullOrUndefined(itemIndex) || itemIndex < 0 || itemIndex > itemsCount - 1) ? itemsCount : itemIndex;\n var fields = this.fields;\n if (items && fields.groupBy) {\n items = ListBase.groupDataSource(items, fields.properties);\n }\n var liCollections = [];\n for (var i = 0; i < items.length; i++) {\n var item = items[i];\n var isHeader = item.isHeader;\n var li = this.createElement('li', { className: isHeader ? dropDownBaseClasses.group : dropDownBaseClasses.li, id: 'option-add-' + i });\n var itemText = item instanceof Object ? getValue(fields.text, item) : item;\n if (isHeader) {\n li.innerText = itemText;\n }\n if (this.itemTemplate && !isHeader) {\n var compiledString = compile(this.itemTemplate);\n // 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 this.DropDownBaseupdateBlazorTemplates(true, false, false, false);\n }\n else if (!isHeader) {\n li.appendChild(document.createTextNode(itemText));\n }\n li.setAttribute('data-value', item instanceof Object ? getValue(fields.value, item) : item);\n li.setAttribute('role', 'option');\n this.notify('addItem', { module: 'CheckBoxSelection', item: li });\n liCollections.push(li);\n this.listData.push(item);\n if (this.sortOrder === 'None' && isNullOrUndefined(itemIndex) && index === 0) {\n index = null;\n }\n this.updateActionCompleteData(li, item, index);\n //Listbox event\n this.trigger('beforeItemRender', { element: li, item: item });\n }\n if (itemsCount === 0 && isNullOrUndefined(this.list.querySelector('ul'))) {\n this.list.innerHTML = '';\n this.list.classList.remove(dropDownBaseClasses.noData);\n this.list.appendChild(this.ulElement);\n this.liCollections = liCollections;\n append(liCollections, this.ulElement);\n this.updateAddItemList(this.list, itemsCount);\n }\n else {\n if (this.getModuleName() === 'listbox' && itemsCount === 0) {\n this.ulElement.innerHTML = '';\n }\n var attr = [];\n for (var i = 0; i < items.length; i++) {\n var listGroupItem = this.ulElement.querySelectorAll('.e-list-group-item');\n for (var j = 0; j < listGroupItem.length; j++) {\n attr[j] = listGroupItem[j].innerText;\n }\n if (attr.indexOf(liCollections[i].innerText) > -1 && fields.groupBy) {\n for (var j = 0; j < listGroupItem.length; j++) {\n if (attr[j] === liCollections[i].innerText) {\n if (this.sortOrder === 'None') {\n this.ulElement.insertBefore(liCollections[i + 1], listGroupItem[j + 1]);\n }\n else {\n this.ulElement.insertBefore(liCollections[i + 1], this.ulElement.childNodes[itemIndex]);\n }\n i = i + 1;\n break;\n }\n }\n }\n else {\n if (this.liCollections[index]) {\n this.liCollections[index].parentNode.insertBefore(liCollections[i], this.liCollections[index]);\n }\n else {\n this.ulElement.appendChild(liCollections[i]);\n }\n }\n var tempLi = [].slice.call(this.liCollections);\n tempLi.splice(index, 0, liCollections[i]);\n this.liCollections = tempLi;\n index += 1;\n if (this.getModuleName() === 'multiselect') {\n this.updateDataList();\n }\n }\n }\n if (selectedItemValue || itemIndex === 0) {\n this.updateSelection();\n }\n };\n DropDownBase.prototype.validationAttribute = function (target, hidden) {\n var name = target.getAttribute('name') ? target.getAttribute('name') : target.getAttribute('id');\n hidden.setAttribute('name', name);\n target.removeAttribute('name');\n var attributes = ['required', 'aria-required', 'form'];\n for (var i = 0; i < attributes.length; i++) {\n if (!target.getAttribute(attributes[i])) {\n continue;\n }\n var attr = target.getAttribute(attributes[i]);\n hidden.setAttribute(attributes[i], attr);\n target.removeAttribute(attributes[i]);\n }\n };\n DropDownBase.prototype.setZIndex = function () {\n // this is for component wise\n };\n // 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 * @blazorType object\n */\n DropDownBase.prototype.getDataByValue = function (value) {\n if (!isNullOrUndefined(this.listData)) {\n var type = this.typeOfData(this.listData).typeof;\n if (type === 'string' || type === 'number' || type === 'boolean') {\n for (var _i = 0, _a = this.listData; _i < _a.length; _i++) {\n var item = _a[_i];\n if (!isNullOrUndefined(item) && item === value) {\n return item;\n }\n }\n }\n else {\n for (var _b = 0, _c = this.listData; _b < _c.length; _b++) {\n var item = _c[_b];\n if (!isNullOrUndefined(item) && getValue((this.fields.value ? this.fields.value : 'value'), item) === value) {\n return item;\n }\n }\n }\n }\n return null;\n };\n /* 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 * @param {boolean} isBlazor - Specifies the platform is Blazor or not.\n * @returns {Element} Returns list item based on key code matches with list text content.\n */\nexport function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, elementId, isBlazor) {\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];\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 if (isBlazor) {\n text = ignoreCase ? item.textContent.trim().toLowerCase() : item.textContent.trim();\n }\n else {\n text = ignoreCase ? item.innerText.toLowerCase() : item.innerText;\n }\n if (text.substr(0, strLength) === queryString) {\n matches.push(listItems[index]);\n }\n i++;\n } while (i !== selectedIndex);\n prevString = queryString;\n prevElementId = elementId;\n return matches[0];\n }\n}\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}\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, SanitizeHtmlHelper } 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 = SanitizeHtmlHelper.sanitize(inputElement.placeholder);\n inputElement.removeAttribute('placeholder');\n }\n floatLabelElement.innerText = SanitizeHtmlHelper.sanitize(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}\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, isBlazor, 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 } 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';\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.isDynamicDataChange = false;\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 var _this = this;\n if (this.mode === 'CheckBox' && this.itemTemplate && (isBlazor() && this.isServerRendered) &&\n this.mainData && this.mainData.length > 0) {\n setTimeout(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 }, this.mainData.length < 100 ? 100 : this.mainData.length);\n }\n else {\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 };\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 (isBlazor() && this.isServerRendered && this.isDynamicDataChange && this.value !== null && this.value.length > 0) {\n var items = [];\n for (var k = 0; k < this.value.length; k++) {\n var itemsData = this.getDataByValue(this.value[k]);\n if (itemsData) {\n // eslint-disable-next-line\n items.push(itemsData[this.fields.value]); // remove the condition for hybrid\n }\n }\n if (items.length === 0) {\n this.setProperties({ 'value': null });\n }\n }\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 (isBlazor() && this.isServerRendered && this.allowFiltering && this.mode === 'CheckBox') {\n this.removeFocus();\n }\n if (isBlazor() && this.isServerRendered && this.isDynamicDataChange && this.value && this.value.length > 0) {\n this.updateVal(this.value, null, 'value');\n this.addValidInputClass();\n this.isDynamicDataChange = false;\n }\n if (this.dataSource instanceof DataManager && this.mode === 'CheckBox' && this.allowFiltering &&\n !(isBlazor() && this.isServerRendered)) {\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 this.l10nUpdate();\n addClass([this.list], dropDownBaseClasses.noData);\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 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.onBlur = 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 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.DropDownBaseresetBlazorTemplates(false, false, true, true, false, true, true);\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 };\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 this.refreshPopup();\n };\n MultiSelect.prototype.arrowDown = function (e) {\n e.preventDefault();\n this.moveByList(1);\n this.keyAction = true;\n if (document.activeElement.classList.contains('e-input-filter')\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('e-input-filter')) {\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 = this.placeholder;\n }\n }\n else {\n this.setFloatLabelType();\n }\n this.expandTextbox();\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 if (isBlazor() && _this.isServerRendered) {\n // eslint-disable-next-line max-len\n var removedValues = [].concat([], removeVal);\n _this.setProperties({ value: removedValues.length === 0 ? null : removedValues }, true);\n }\n else {\n _this.setProperties({ value: [].concat([], removeVal) }, true);\n }\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.notify('updatelist', { module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox', li: element_1, e: eve });\n attributes(_this.inputElement, { 'aria-activedescendant': element_1.id });\n if ((_this.value && _this.value.length !== _this.mainData.length)\n && (_this.mode === 'CheckBox' && _this.showSelectAll && !(_this.isSelectAll || isClearAll))) {\n _this.notify('checkSelectAll', { module: 'CheckBoxSelection',\n enable: _this.mode === 'CheckBox',\n value: 'uncheck' });\n }\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 if (isBlazor() && _this.isServerRendered && (isNullOrUndefined(_this.value) || _this.value.length === 0)) {\n _this.updatedataValueItems(eve);\n }\n }\n });\n }\n };\n MultiSelect.prototype.updateMainList = function (state, value) {\n if (this.allowFiltering || this.mode === 'CheckBox') {\n var element2 = 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 = (isBlazor() && this.isServerRendered) ? JSON.parse(JSON.stringify(this.getDataByValue(value)))\n : 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 this.DropDownBaseupdateBlazorTemplates(false, false, false, false, true, false, false, false);\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 (eventArgs.setClass && typeof eventArgs.setClass === 'string' && (isBlazor() && _this.isServerRendered)) {\n addClass([chip], eventArgs.setClass);\n }\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 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.itemTemplate && (isBlazor() && _this.isServerRendered)) {\n setTimeout(function () {\n _this.mainList = _this.ulElement;\n }, 0);\n }\n else 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 this.DropDownBaseupdateBlazorTemplates(false, false, false, false, false, true, false);\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 this.DropDownBaseupdateBlazorTemplates(false, false, false, false, false, false, true);\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 if (this.value === null && isBlazor() && this.isServerRendered) {\n break;\n }\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.onBlur, 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 (!(isBlazor() && this.isServerRendered) && 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 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 };\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 if (isBlazor() && _this.isServerRendered) {\n _this.checkPlaceholderSize();\n _this.makeTextBoxEmpty();\n }\n }\n });\n }\n else {\n this.remoteCustomValue = false;\n this.addValue(value, text, e);\n }\n if (isBlazor() && this.isServerRendered && this.value && this.list &&\n (this.value.length === this.list.querySelectorAll('li.e-list-item').length ||\n this.value.length === this.maximumSelectionLength)) {\n this.updatedataValueItems(e);\n this.checkPlaceholderSize();\n }\n if (isBlazor() && this.isServerRendered) {\n this.checkPlaceholderSize();\n this.makeTextBoxEmpty();\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) {\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'));\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 }\n else {\n e.preventDefault();\n }\n if (this.mode !== 'CheckBox') {\n this.refreshListItems(isNullOrUndefined(li) ? null : li.textContent);\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 if (this.overAllClear.style.display !== 'none') {\n this.spinnerElement = 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 raminElement = this.createElement('span', {\n className: REMAIN_WRAPPER\n });\n var compiledString = compile(remainContent);\n var totalCompiledString = compile(l10n.getConstant('totalCountTemplate'));\n // eslint-disable-next-line\n var remainCompildTemp = compiledString({ 'count': this.value.length }, this, 'overflowCountTemplate', null, !this.isStringTemplate, null, raminElement);\n if (remainCompildTemp && remainCompildTemp.length > 0) {\n raminElement.appendChild(remainCompildTemp[0]);\n }\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 = this.viewWrapper.innerHTML.split(this.delimiterChar);\n textArr.pop();\n this.viewWrapper.innerHTML = textArr.join(this.delimiterChar);\n remaining++;\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, compiledString, totalCompiledString, totalWidth));\n this.updateRemainWidth(this.viewWrapper, totalWidth);\n this.updateRemainingText(raminElement, downIconWidth, remaining, compiledString, totalCompiledString);\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, compiledString, totalCompiledString, totalWidth) {\n if (viewWrapper.firstChild && viewWrapper.firstChild.nodeType === 3 && viewWrapper.firstChild.nodeValue === '') {\n viewWrapper.removeChild(viewWrapper.firstChild);\n }\n raminElement.innerHTML = '';\n // eslint-disable-next-line\n var remainTemp = compiledString({ 'count': remaining }, this, 'overflowCountTemplate', null, !this.isStringTemplate, null, raminElement);\n // eslint-disable-next-line\n var totalTemp = totalCompiledString({ 'count': remaining }, this, 'totalCountTemplate', null, !this.isStringTemplate, null, raminElement);\n raminElement.appendChild((viewWrapper.firstChild && viewWrapper.firstChild.nodeType === 3) ?\n remainTemp && remainTemp[0] : totalTemp && totalTemp[0]);\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, compiledString, totalCompiledString) {\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, compiledString, totalCompiledString, 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.onBlur);\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 && this.isPopupOpen() && 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 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 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 if (!(isBlazor() && _this.isServerRendered)) {\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 }\n }, 0);\n }\n }\n if (!(isBlazor() && this.isServerRendered)) {\n this.updatedataValueItems(event);\n this.checkPlaceholderSize();\n if (length <= 50) {\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 };\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 && !(isBlazor() && this.isServerRendered)) {\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 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 ((isBlazor() && _this.isServerRendered) && _this.itemTemplate) {\n _this.DropDownBaseupdateBlazorTemplates(true, false, false, false, false, false, false, false);\n if (_this.mode !== 'CheckBox' && _this.list) {\n _this.refreshSelection();\n }\n }\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 this.renderPopup();\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 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, \"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};\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { EventHandler, Property, Internationalization, NotifyPropertyChanges, isBlazor } from '@syncfusion/ej2-base';\nimport { KeyboardEvents, Animation, Browser } from '@syncfusion/ej2-base';\nimport { cldrData, L10n, Component, getDefaultDateObject, rippleEffect, Event } from '@syncfusion/ej2-base';\nimport { remove, addClass, detach, removeClass, closest, append, attributes, setStyleAttribute } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, formatUnit, getValue, extend, getUniqueID, blazorCultureFormats } from '@syncfusion/ej2-base';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { ListBase } from '@syncfusion/ej2-lists';\nvar WRAPPERCLASS = 'e-time-wrapper';\nvar POPUP = 'e-popup';\nvar ERROR = 'e-error';\nvar POPUPDIMENSION = '240px';\nvar DAY = new Date().getDate();\nvar MONTH = new Date().getMonth();\nvar YEAR = new Date().getFullYear();\nvar ROOT = 'e-timepicker';\nvar LIBRARY = 'e-lib';\nvar CONTROL = 'e-control';\nvar CONTENT = 'e-content';\nvar SELECTED = 'e-active';\nvar HOVER = 'e-hover';\nvar NAVIGATION = 'e-navigation';\nvar DISABLED = 'e-disabled';\nvar ICONANIMATION = 'e-icon-anim';\nvar TIMEICON = 'e-time-icon';\nvar CLEARICON = 'e-clear-icon';\nvar FOCUS = 'e-input-focus';\nvar LISTCLASS = 'e-list-item';\nvar HALFPOSITION = 2;\nvar ANIMATIONDURATION = 50;\nvar OVERFLOW = 'e-time-overflow';\nvar OFFSETVAL = 4;\nvar EDITABLE = 'e-non-edit';\nvar wrapperAttributes = ['title', 'class', 'style'];\n// eslint-disable-next-line @typescript-eslint/no-namespace\nexport var TimePickerBase;\n(function (TimePickerBase) {\n // eslint-disable-next-line max-len, jsdoc/require-jsdoc\n function createListItems(createdEl, min, max, globalize, timeFormat, step) {\n var formatOptions;\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: timeFormat, type: 'time' };\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n formatOptions = { format: timeFormat, type: 'time', calendar: 'islamic' };\n }\n var start;\n var interval = step * 60000;\n var listItems = [];\n var timeCollections = [];\n start = +(min.setMilliseconds(0));\n var end = +(max.setMilliseconds(0));\n while (end >= start) {\n timeCollections.push(start);\n listItems.push(globalize.formatDate(new Date(start), { format: timeFormat, type: 'time' }));\n start += interval;\n }\n var listTag = ListBase.createList(createdEl, listItems, null, true);\n return { collection: timeCollections, list: listTag };\n }\n TimePickerBase.createListItems = createListItems;\n})(TimePickerBase || (TimePickerBase = {}));\n/**\n * TimePicker is an intuitive interface component which provides an options to select a time value\n * from popup list or to set a desired time value.\n * ```\n *
\n * \n * ```\n */\nvar TimePicker = /** @class */ (function (_super) {\n __extends(TimePicker, _super);\n /**\n * Constructor for creating the widget\n *\n * @param {TimePickerModel} options - Specifies the TimePicker model.\n * @param {string | HTMLInputElement} element - Specifies the element to render as component.\n * @private\n */\n function TimePicker(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.liCollections = [];\n _this.timeCollections = [];\n _this.blazorTimeCollections = [];\n _this.disableItemCollection = [];\n _this.invalidValueString = null;\n _this.isBlazorServer = false;\n _this.isAngular = false;\n _this.preventChange = false;\n _this.timeOptions = options;\n return _this;\n }\n /**\n * Initialize the event handler\n *\n * @returns {void}\n * @private\n */\n TimePicker.prototype.preRender = function () {\n this.keyConfigure = {\n enter: 'enter',\n escape: 'escape',\n end: 'end',\n tab: 'tab',\n home: 'home',\n down: 'downarrow',\n up: 'uparrow',\n left: 'leftarrow',\n right: 'rightarrow',\n open: 'alt+downarrow',\n close: 'alt+uparrow'\n };\n this.cloneElement = this.element.cloneNode(true);\n removeClass([this.cloneElement], [ROOT, CONTROL, LIBRARY]);\n this.inputElement = this.element;\n this.angularTag = null;\n this.formElement = closest(this.element, 'form');\n this.isBlazorServer = (isBlazor() && this.isServerRendered && this.getModuleName() === 'timepicker') ? true : false;\n if (!this.isBlazorServer) {\n if (this.element.tagName === 'EJS-TIMEPICKER') {\n this.angularTag = this.element.tagName;\n this.inputElement = this.createElement('input');\n this.element.appendChild(this.inputElement);\n }\n this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';\n this.element.removeAttribute('tabindex');\n this.openPopupEventArgs = {\n appendTo: document.body\n };\n }\n };\n // element creation\n TimePicker.prototype.render = function () {\n if (!this.isBlazorServer) {\n this.initialize();\n this.createInputElement();\n this.updateHtmlAttributeToWrapper();\n this.setTimeAllowEdit();\n this.setEnable();\n this.validateInterval();\n }\n else {\n this.globalize = new Internationalization(this.locale);\n this.defaultCulture = new Internationalization('en');\n this.checkTimeFormat();\n var parentElement = this.element.parentElement;\n this.inputWrapper = {\n container: parentElement,\n clearButton: parentElement.querySelector('.' + CLEARICON),\n buttons: [parentElement.querySelector('.' + TIMEICON)]\n };\n Input.bindInitialEvent({\n element: this.inputElement,\n floatLabelType: this.floatLabelType\n });\n if (this.showClearButton && this.inputWrapper.clearButton) {\n Input.wireClearBtnEvents(this.inputElement, this.inputWrapper.clearButton, this.inputWrapper.container);\n }\n }\n this.bindEvents();\n if (!this.isBlazorServer) {\n this.validateDisable();\n this.setValue(this.getFormattedValue(this.value));\n }\n this.anchor = this.inputElement;\n this.inputElement.setAttribute('value', this.inputElement.value);\n if (!this.isBlazorServer) {\n this.inputEleValue = this.getDateObject(this.inputElement.value);\n }\n this.renderComplete();\n };\n TimePicker.prototype.setTimeAllowEdit = function () {\n if (this.allowEdit) {\n if (!this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n }\n else {\n attributes(this.inputElement, { 'readonly': '' });\n }\n this.clearIconState();\n };\n TimePicker.prototype.clearIconState = function () {\n if (!this.allowEdit && this.inputWrapper && !this.readonly) {\n if (this.inputElement.value === '') {\n removeClass([this.inputWrapper.container], [EDITABLE]);\n }\n else {\n addClass([this.inputWrapper.container], [EDITABLE]);\n }\n }\n else if (this.inputWrapper) {\n removeClass([this.inputWrapper.container], [EDITABLE]);\n }\n };\n TimePicker.prototype.validateDisable = function () {\n this.setMinMax(this.initMin, this.initMax);\n this.popupCreation();\n this.popupObj.destroy();\n this.popupWrapper = this.popupObj = null;\n if ((!isNaN(+this.value) && this.value !== null)) {\n if (!this.valueIsDisable(this.value)) {\n //disable value given in value property so reset the date based on current date\n if (this.strictMode) {\n this.resetState();\n }\n this.initValue = null;\n this.initMax = this.getDateObject(this.initMax);\n this.initMin = this.getDateObject(this.initMin);\n this.timeCollections = this.liCollections = [];\n this.setMinMax(this.initMin, this.initMax);\n }\n }\n };\n TimePicker.prototype.validationAttribute = function (target, input) {\n var name = target.getAttribute('name') ? target.getAttribute('name') : target.getAttribute('id');\n input.setAttribute('name', name);\n target.removeAttribute('name');\n var attributes = ['required', 'aria-required', 'form'];\n for (var i = 0; i < attributes.length; i++) {\n if (isNullOrUndefined(target.getAttribute(attributes[i]))) {\n continue;\n }\n var attr = target.getAttribute(attributes[i]);\n input.setAttribute(attributes[i], attr);\n target.removeAttribute(attributes[i]);\n }\n };\n TimePicker.prototype.initialize = function () {\n this.globalize = new Internationalization(this.locale);\n this.defaultCulture = new Internationalization('en');\n this.checkTimeFormat();\n this.checkInvalidValue(this.value);\n // persist the value property.\n this.setProperties({ value: this.checkDateValue(new Date(this.checkInValue(this.value))) }, true);\n this.setProperties({ min: this.checkDateValue(new Date(this.checkInValue(this.min))) }, true);\n this.setProperties({ max: this.checkDateValue(new Date(this.checkInValue(this.max))) }, true);\n this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkInValue(this.scrollTo))) }, true);\n if (this.angularTag !== null) {\n this.validationAttribute(this.element, this.inputElement);\n }\n this.updateHtmlAttributeToElement();\n this.checkAttributes(false); //check the input element attributes\n var localeText = { placeholder: this.placeholder };\n this.l10n = new L10n('timepicker', localeText, this.locale);\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n this.initValue = this.checkDateValue(this.value);\n this.initMin = this.checkDateValue(this.min);\n this.initMax = this.checkDateValue(this.max);\n this.isNavigate = this.isPreventBlur = this.isTextSelected = false;\n this.activeIndex = this.valueWithMinutes = this.prevDate = null;\n if (!isNullOrUndefined(this.element.getAttribute('id'))) {\n if (this.angularTag !== null) {\n this.inputElement.id = this.element.getAttribute('id') + '_input';\n }\n }\n else {\n //for angular case\n this.element.id = getUniqueID('ej2_timepicker');\n if (this.angularTag !== null) {\n attributes(this.inputElement, { 'id': this.element.id + '_input' });\n }\n }\n if (isNullOrUndefined(this.inputElement.getAttribute('name'))) {\n attributes(this.inputElement, { 'name': this.element.id });\n }\n };\n TimePicker.prototype.checkTimeFormat = function () {\n if (this.format) {\n if (typeof this.format === 'string') {\n this.formatString = this.format;\n }\n else if (!isNullOrUndefined(this.format.skeleton) && this.format.skeleton !== '') {\n var skeletonString = this.format.skeleton;\n this.formatString = this.globalize.getDatePattern({ type: 'time', skeleton: skeletonString });\n }\n else {\n this.formatString = this.globalize.getDatePattern({ type: 'time', skeleton: 'short' });\n }\n }\n else {\n this.formatString = null;\n }\n };\n TimePicker.prototype.checkDateValue = function (value) {\n return (!isNullOrUndefined(value) && value instanceof Date && !isNaN(+value)) ? value : null;\n };\n TimePicker.prototype.createInputElement = function () {\n var updatedCssClassesValue = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassesValue = (this.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n this.inputWrapper = Input.createInput({\n element: this.inputElement,\n floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.readonly,\n placeholder: this.placeholder,\n cssClass: updatedCssClassesValue,\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton\n },\n buttons: [' e-input-group-icon e-time-icon e-icons']\n }, this.createElement);\n this.inputWrapper.container.style.width = this.setWidth(this.width);\n attributes(this.inputElement, {\n 'aria-haspopup': 'true', 'aria-autocomplete': 'list', 'tabindex': '0', 'aria-activedescendant': 'null',\n 'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false', 'aria-disabled': 'false', 'aria-invalid': 'false'\n });\n if (!this.isNullOrEmpty(this.inputStyle)) {\n Input.addAttributes({ 'style': this.inputStyle }, this.inputElement);\n }\n addClass([this.inputWrapper.container], WRAPPERCLASS);\n };\n TimePicker.prototype.getCldrDateTimeFormat = function () {\n var culture = new Internationalization(this.locale);\n var cldrTime;\n var dateFormat = culture.getDatePattern({ skeleton: isBlazor() ? 'd' : 'yMd' });\n if (this.isNullOrEmpty(this.formatString)) {\n cldrTime = dateFormat + ' ' + this.cldrFormat('time');\n }\n else {\n cldrTime = this.formatString;\n }\n return cldrTime;\n };\n TimePicker.prototype.checkInvalidValue = function (value) {\n var isInvalid = false;\n if (typeof value !== 'object' && !isNullOrUndefined(value)) {\n var valueString = value;\n if (typeof valueString === 'string') {\n valueString = valueString.trim();\n }\n var valueExpression = null;\n var valueExp = null;\n if (typeof value === 'number') {\n valueString = value.toString();\n }\n else if (typeof value === 'string') {\n if (!(/^[a-zA-Z0-9- ]*$/).test(value)) {\n valueExpression = this.setCurrentDate(this.getDateObject(value));\n if (isNullOrUndefined(valueExpression)) {\n valueExpression = this.checkDateValue(this.globalize.parseDate(valueString, {\n format: this.getCldrDateTimeFormat(), type: 'datetime'\n }));\n if (isNullOrUndefined(valueExpression)) {\n valueExpression = this.checkDateValue(this.globalize.parseDate(valueString, {\n format: this.formatString, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd'\n }));\n }\n }\n }\n }\n valueExp = this.globalize.parseDate(valueString, {\n format: this.getCldrDateTimeFormat(), type: 'datetime'\n });\n valueExpression = (!isNullOrUndefined(valueExp) && valueExp instanceof Date && !isNaN(+valueExp)) ? valueExp : null;\n if (isNullOrUndefined(valueExpression) && valueString.replace(/\\s/g, '').length) {\n var extISOString = null;\n var basicISOString = null;\n // eslint-disable-next-line\n extISOString = /^\\s*((?:[+-]\\d{6}|\\d{4})-(?:\\d\\d-\\d\\d|W\\d\\d-\\d|W\\d\\d|\\d\\d\\d|\\d\\d))(?:(T| )(\\d\\d(?::\\d\\d(?::\\d\\d(?:[.,]\\d+)?)?)?)([\\+\\-]\\d\\d(?::?\\d\\d)?|\\s*Z)?)?/;\n // eslint-disable-next-line\n basicISOString = /^\\s*((?:[+-]\\d{6}|\\d{4})(?:\\d\\d\\d\\d|W\\d\\d\\d|W\\d\\d|\\d\\d\\d|\\d\\d))(?:(T| )(\\d\\d(?:\\d\\d(?:\\d\\d(?:[.,]\\d+)?)?)?)([\\+\\-]\\d\\d(?::?\\d\\d)?|\\s*Z)?)?/;\n if ((!extISOString.test(valueString) && !basicISOString.test(valueString))\n || ((/^[a-zA-Z0-9- ]*$/).test(value)) || isNaN(+new Date('' + valueString))) {\n isInvalid = true;\n }\n else {\n valueExpression = new Date('' + valueString);\n }\n }\n if (isInvalid) {\n if (!this.strictMode) {\n this.invalidValueString = valueString;\n }\n this.setProperties({ value: null }, true);\n this.initValue = null;\n }\n else {\n this.setProperties({ value: valueExpression }, true);\n this.initValue = this.value;\n }\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n TimePicker.prototype.cldrFormat = function (type) {\n var cldrDateTimeString;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrDateTimeString = isBlazor() ? this.getBlazorCultureFormat('t') :\n (getValue('timeFormats.short', getDefaultDateObject()));\n }\n else {\n cldrDateTimeString = (this.getCultureTimeObject(cldrData, '' + this.locale));\n }\n return cldrDateTimeString;\n };\n // destroy function\n TimePicker.prototype.destroy = function () {\n if (this.isBlazorServer) {\n this.unBindEvents();\n }\n else {\n this.hide();\n this.unBindEvents();\n var ariaAttribute = {\n 'aria-haspopup': 'true', 'aria-autocomplete': 'list', 'tabindex': '0', 'aria-activedescendant': 'null',\n 'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false', 'aria-disabled': 'true', 'aria-invalid': 'false'\n };\n if (this.inputElement) {\n Input.removeAttributes(ariaAttribute, this.inputElement);\n if (this.angularTag === null) {\n this.inputWrapper.container.parentElement.appendChild(this.inputElement);\n }\n if (!isNullOrUndefined(this.cloneElement.getAttribute('tabindex'))) {\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.inputElement.removeAttribute('tabindex');\n }\n this.ensureInputAttribute();\n this.enableElement([this.inputElement]);\n this.inputElement.classList.remove('e-input');\n if (isNullOrUndefined(this.cloneElement.getAttribute('disabled'))) {\n Input.setEnabled(true, this.inputElement, this.floatLabelType);\n }\n }\n if (this.inputWrapper.container) {\n detach(this.inputWrapper.container);\n }\n this.inputWrapper = this.popupWrapper = this.cloneElement = undefined;\n this.liCollections = this.timeCollections = this.disableItemCollection = [];\n if (!isNullOrUndefined(this.rippleFn)) {\n this.rippleFn();\n }\n _super.prototype.destroy.call(this);\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n }\n };\n TimePicker.prototype.ensureInputAttribute = function () {\n var propertyList = [];\n for (var i = 0; i < this.inputElement.attributes.length; i++) {\n propertyList[i] = this.inputElement.attributes[i].name;\n }\n for (var i = 0; i < propertyList.length; i++) {\n if (!isNullOrUndefined(this.cloneElement.getAttribute(propertyList[i]))) {\n this.inputElement.setAttribute(propertyList[i], this.cloneElement.getAttribute(propertyList[i]));\n if (propertyList[i].toLowerCase() === 'value') {\n this.inputElement.value = this.cloneElement.getAttribute(propertyList[i]);\n }\n }\n else {\n this.inputElement.removeAttribute(propertyList[i]);\n if (propertyList[i].toLowerCase() === 'value') {\n this.inputElement.value = '';\n }\n }\n }\n };\n //popup creation\n TimePicker.prototype.popupCreation = function () {\n if (!this.isBlazorServer) {\n this.popupWrapper = this.createElement('div', {\n className: ROOT + ' ' + POPUP,\n attrs: { 'id': this.element.id + '_popup', 'style': 'visibility:hidden' }\n });\n if (!isNullOrUndefined(this.cssClass)) {\n this.popupWrapper.className += ' ' + this.cssClass;\n }\n if (!isNullOrUndefined(this.step) && this.step > 0) {\n this.generateList();\n append([this.listWrapper], this.popupWrapper);\n }\n this.openPopupEventArgs.appendTo.appendChild(this.popupWrapper);\n }\n else {\n this.popupWrapper = this.inputWrapper.container.nextElementSibling;\n this.generateList();\n }\n this.addSelection();\n this.renderPopup();\n detach(this.popupWrapper);\n };\n TimePicker.prototype.getPopupHeight = function () {\n var height = parseInt(POPUPDIMENSION, 10);\n var popupHeight = this.popupWrapper.getBoundingClientRect().height;\n return popupHeight > height ? height : popupHeight;\n };\n TimePicker.prototype.generateList = function () {\n if (!this.isBlazorServer) {\n this.createListItems();\n }\n else {\n this.listWrapper = this.popupWrapper.querySelector('.e-content');\n }\n this.wireListEvents();\n var rippleModel = { duration: 300, selector: '.' + LISTCLASS };\n this.rippleFn = rippleEffect(this.listWrapper, rippleModel);\n this.liCollections = this.listWrapper.querySelectorAll('.' + LISTCLASS);\n if (this.isBlazorServer) {\n this.blazorTimeCollections = [];\n for (var index = 0; index < this.liCollections.length; index++) {\n this.blazorTimeCollections.push(this.liCollections[index].getAttribute('data-value'));\n }\n }\n };\n TimePicker.prototype.renderPopup = function () {\n var _this = this;\n this.containerStyle = this.inputWrapper.container.getBoundingClientRect();\n this.popupObj = new Popup(this.popupWrapper, {\n width: this.setPopupWidth(this.width),\n zIndex: this.zIndex,\n targetType: 'relative',\n position: Browser.isDevice ? { X: 'center', Y: 'center' } : { X: 'left', Y: 'bottom' },\n collision: Browser.isDevice ? { X: 'fit', Y: 'fit' } : { X: 'flip', Y: 'flip' },\n enableRtl: this.enableRtl,\n relateTo: Browser.isDevice ? document.body : this.inputWrapper.container,\n offsetY: OFFSETVAL,\n open: function () {\n _this.popupWrapper.style.visibility = 'visible';\n addClass([_this.inputWrapper.buttons[0]], SELECTED);\n }, close: function () {\n removeClass([_this.inputWrapper.buttons[0]], SELECTED);\n _this.unWireListEvents();\n _this.inputElement.setAttribute('aria-activedescendant', 'null');\n if (!_this.isBlazorServer) {\n remove(_this.popupObj.element);\n _this.popupObj.destroy();\n _this.popupWrapper.innerHTML = '';\n }\n _this.listWrapper = _this.popupWrapper = _this.listTag = undefined;\n }, targetExitViewport: function () {\n if (!Browser.isDevice) {\n _this.hide();\n }\n }\n });\n if (!Browser.isDevice) {\n this.popupObj.collision = { X: 'none', Y: 'flip' };\n }\n this.popupObj.element.style.maxHeight = POPUPDIMENSION;\n };\n //util function\n TimePicker.prototype.getFormattedValue = function (value) {\n if (isNullOrUndefined(this.checkDateValue(value))) {\n return null;\n }\n else {\n return this.globalize.formatDate(value, { skeleton: isBlazor() ? 't' : 'medium', type: 'time' });\n }\n };\n TimePicker.prototype.getDateObject = function (text) {\n if (!this.isNullOrEmpty(text)) {\n var dateValue = this.createDateObj(text);\n var value = !this.isNullOrEmpty(this.initValue);\n if (this.checkDateValue(dateValue)) {\n var date = value ? this.initValue.getDate() : DAY;\n var month = value ? this.initValue.getMonth() : MONTH;\n var year = value ? this.initValue.getFullYear() : YEAR;\n return new Date(year, month, date, dateValue.getHours(), dateValue.getMinutes(), dateValue.getSeconds());\n }\n }\n return null;\n };\n TimePicker.prototype.updateHtmlAttributeToWrapper = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var key = _a[_i];\n if (wrapperAttributes.indexOf(key) > -1) {\n if (key === 'class') {\n var updatedClassesValue = (this.htmlAttributes[key].replace(/\\s+/g, ' ')).trim();\n if (updatedClassesValue !== '') {\n addClass([this.inputWrapper.container], updatedClassesValue.split(' '));\n }\n }\n else if (key === 'style') {\n var timeStyle = this.inputWrapper.container.getAttribute(key);\n timeStyle = !isNullOrUndefined(timeStyle) ? (timeStyle + this.htmlAttributes[key]) :\n this.htmlAttributes[key];\n this.inputWrapper.container.setAttribute(key, timeStyle);\n }\n else {\n this.inputWrapper.container.setAttribute(key, this.htmlAttributes[key]);\n }\n }\n }\n }\n };\n TimePicker.prototype.updateHtmlAttributeToElement = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var key = _a[_i];\n if (wrapperAttributes.indexOf(key) < 0) {\n this.inputElement.setAttribute(key, this.htmlAttributes[key]);\n }\n }\n }\n };\n TimePicker.prototype.updateCssClass = function (cssClassNew, cssClassOld) {\n if (!isNullOrUndefined(cssClassOld)) {\n cssClassOld = (cssClassOld.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(cssClassNew)) {\n cssClassNew = (cssClassNew.replace(/\\s+/g, ' ')).trim();\n }\n Input.setCssClass(cssClassNew, [this.inputWrapper.container], cssClassOld);\n if (this.popupWrapper) {\n Input.setCssClass(cssClassNew, [this.popupWrapper], cssClassOld);\n }\n };\n TimePicker.prototype.removeErrorClass = function () {\n removeClass([this.inputWrapper.container], ERROR);\n attributes(this.inputElement, { 'aria-invalid': 'false' });\n };\n TimePicker.prototype.checkErrorState = function (val) {\n var value = this.getDateObject(val);\n if (this.validateState(value) && !this.invalidValueString) {\n this.removeErrorClass();\n }\n else {\n addClass([this.inputWrapper.container], ERROR);\n attributes(this.inputElement, { 'aria-invalid': 'true' });\n }\n };\n TimePicker.prototype.validateInterval = function () {\n if (!isNullOrUndefined(this.step) && this.step > 0) {\n this.enableElement([this.inputWrapper.buttons[0]]);\n }\n else {\n this.disableTimeIcon();\n }\n };\n TimePicker.prototype.disableTimeIcon = function () {\n this.disableElement([this.inputWrapper.buttons[0]]);\n this.hide();\n };\n TimePicker.prototype.disableElement = function (element) {\n addClass(element, DISABLED);\n };\n TimePicker.prototype.enableElement = function (element) {\n removeClass(element, DISABLED);\n };\n TimePicker.prototype.selectInputText = function () {\n this.inputElement.setSelectionRange(0, (this.inputElement).value.length);\n };\n TimePicker.prototype.setCursorToEnd = function () {\n this.inputElement.setSelectionRange((this.inputElement).value.length, (this.inputElement).value.length);\n };\n TimePicker.prototype.getMeridianText = function () {\n var meridian;\n if (this.locale === 'en' || this.locale === 'en-US') {\n meridian = getValue((isBlazor() ? 'dayPeriods.wide' : 'dayPeriods.format.wide'), getDefaultDateObject());\n }\n else {\n var gregorianFormat = (isBlazor() ? '.dates.dayPeriods.abbreviated' :\n '.dates.calendars.gregorian.dayPeriods.format.abbreviated');\n var mainVal = isBlazor() ? '' : 'main.';\n meridian = getValue(mainVal + '' + this.locale + gregorianFormat, cldrData);\n }\n return meridian;\n };\n TimePicker.prototype.getCursorSelection = function () {\n var input = (this.inputElement);\n var start = 0;\n var end = 0;\n if (!isNaN(input.selectionStart)) {\n start = input.selectionStart;\n end = input.selectionEnd;\n }\n return { start: Math.abs(start), end: Math.abs(end) };\n };\n TimePicker.prototype.getActiveElement = function () {\n if (!isNullOrUndefined(this.popupWrapper)) {\n return this.popupWrapper.querySelectorAll('.' + SELECTED);\n }\n else {\n return null;\n }\n };\n TimePicker.prototype.isNullOrEmpty = function (value) {\n if (isNullOrUndefined(value) || (typeof value === 'string' && value.trim() === '')) {\n return true;\n }\n else {\n return false;\n }\n };\n TimePicker.prototype.setWidth = function (width) {\n if (typeof width === 'number') {\n width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n width = (width.match(/px|%|em/)) ? width : formatUnit(width);\n }\n else {\n width = '100%';\n }\n return width;\n };\n TimePicker.prototype.setPopupWidth = function (width) {\n width = this.setWidth(width);\n if (width.indexOf('%') > -1) {\n var inputWidth = this.containerStyle.width * parseFloat(width) / 100;\n width = inputWidth.toString() + 'px';\n }\n return width;\n };\n TimePicker.prototype.setScrollPosition = function () {\n var element = this.selectedElement;\n if (!isNullOrUndefined(element)) {\n this.findScrollTop(element);\n }\n else if (this.popupWrapper && this.checkDateValue(this.scrollTo)) {\n this.setScrollTo();\n }\n };\n TimePicker.prototype.findScrollTop = function (element) {\n var listHeight = this.getPopupHeight();\n var nextEle = element.nextElementSibling;\n var height = nextEle ? nextEle.offsetTop : element.offsetTop;\n var liHeight = element.getBoundingClientRect().height;\n if ((height + element.offsetTop) > listHeight) {\n this.popupWrapper.scrollTop = nextEle ? (height - (listHeight / HALFPOSITION + liHeight / HALFPOSITION)) : height;\n }\n else {\n this.popupWrapper.scrollTop = 0;\n }\n };\n TimePicker.prototype.setScrollTo = function () {\n var element;\n if (!isNullOrUndefined(this.popupWrapper)) {\n var items = this.popupWrapper.querySelectorAll('.' + LISTCLASS);\n if (items.length) {\n var initialTime = this.isBlazorServer ? new Date(new Date().toDateString() + ' ' +\n this.blazorTimeCollections[0]).setMilliseconds(0) : this.timeCollections[0];\n var scrollTime = this.isBlazorServer ? new Date(new Date().toDateString() + ' ' +\n this.scrollTo.toLocaleTimeString()).setMilliseconds(0) :\n this.getDateObject(this.checkDateValue(this.scrollTo)).getTime();\n element = items[Math.round((scrollTime - initialTime) / (this.step * 60000))];\n }\n }\n else {\n this.popupWrapper.scrollTop = 0;\n }\n if (!isNullOrUndefined(element)) {\n this.findScrollTop(element);\n }\n else {\n this.popupWrapper.scrollTop = 0;\n }\n };\n TimePicker.prototype.getText = function () {\n return (isNullOrUndefined(this.checkDateValue(this.value))) ? '' : this.getValue(this.value);\n };\n TimePicker.prototype.getValue = function (value) {\n return (isNullOrUndefined(this.checkDateValue(value))) ? null : this.globalize.formatDate(value, {\n format: this.cldrTimeFormat(), type: 'time'\n });\n };\n TimePicker.prototype.cldrDateFormat = function () {\n var cldrDate;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrDate = isBlazor() ? (getValue('d', getValue(this.locale, blazorCultureFormats))) :\n (getValue('dateFormats.short', getDefaultDateObject()));\n }\n else {\n cldrDate = (this.getCultureDateObject(cldrData, '' + this.locale));\n }\n return cldrDate;\n };\n TimePicker.prototype.getBlazorCultureFormat = function (formatVal) {\n return (getValue(formatVal, getValue(this.locale, blazorCultureFormats))).replace(/tt/, 'a');\n };\n TimePicker.prototype.cldrTimeFormat = function () {\n var cldrTime;\n if (this.isNullOrEmpty(this.formatString)) {\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrTime = isBlazor() ? this.getBlazorCultureFormat('t') :\n (getValue('timeFormats.short', getDefaultDateObject()));\n }\n else {\n cldrTime = (this.getCultureTimeObject(cldrData, '' + this.locale));\n }\n }\n else {\n cldrTime = this.formatString;\n }\n return cldrTime;\n };\n TimePicker.prototype.dateToNumeric = function () {\n var cldrTime;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrTime = isBlazor() ? this.getBlazorCultureFormat('T') :\n (getValue('timeFormats.medium', getDefaultDateObject()));\n }\n else {\n cldrTime = isBlazor() ? this.getBlazorCultureFormat('T') :\n (getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.timeFormats.medium', cldrData));\n }\n return cldrTime;\n };\n TimePicker.prototype.getExactDateTime = function (value) {\n if (isNullOrUndefined(this.checkDateValue(value))) {\n return null;\n }\n else {\n return this.globalize.formatDate(value, { format: this.dateToNumeric(), type: 'time' });\n }\n };\n TimePicker.prototype.setValue = function (value) {\n var time = this.checkValue(value);\n if (!this.strictMode && !this.validateState(time)) {\n if (this.checkDateValue(this.valueWithMinutes) === null) {\n this.initValue = this.valueWithMinutes = null;\n }\n this.validateMinMax(this.value, this.min, this.max);\n }\n else {\n if (this.isNullOrEmpty(time)) {\n this.initValue = null;\n this.validateMinMax(this.value, this.min, this.max);\n }\n else {\n this.initValue = this.compareFormatChange(time);\n }\n }\n this.updateInput(true, this.initValue);\n };\n TimePicker.prototype.compareFormatChange = function (value) {\n if (isNullOrUndefined(value)) {\n return null;\n }\n return (value !== this.getText()) ? this.getDateObject(value) : this.getDateObject(this.value);\n };\n TimePicker.prototype.updatePlaceHolder = function () {\n Input.setPlaceholder(this.l10n.getConstant('placeholder'), this.inputElement);\n };\n //event related functions\n TimePicker.prototype.updateInputValue = function (value) {\n Input.setValue(value, this.inputElement, this.floatLabelType, this.showClearButton);\n };\n TimePicker.prototype.preventEventBubbling = function (e) {\n e.preventDefault();\n this.interopAdaptor.invokeMethodAsync('OnTimeIconClick');\n };\n TimePicker.prototype.updateBlazorTimeCollections = function (listData) {\n this.blazorTimeCollections = listData;\n };\n TimePicker.prototype.popupHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n if (Browser.isDevice) {\n this.inputElement.setAttribute('readonly', '');\n }\n if (!this.isBlazorServer) {\n e.preventDefault();\n }\n if (this.isPopupOpen() && !this.isBlazorServer) {\n this.closePopup(0, e);\n }\n else {\n this.inputElement.focus();\n this.show(e);\n }\n };\n TimePicker.prototype.mouseDownHandler = function () {\n if (!this.enabled) {\n return;\n }\n if (!this.readonly) {\n this.inputElement.setSelectionRange(0, 0);\n EventHandler.add(this.inputElement, 'mouseup', this.mouseUpHandler, this);\n }\n };\n TimePicker.prototype.mouseUpHandler = function (event) {\n if (!this.readonly) {\n event.preventDefault();\n EventHandler.remove(this.inputElement, 'mouseup', this.mouseUpHandler);\n var curPos = this.getCursorSelection();\n if (!(curPos.start === 0 && curPos.end === this.inputElement.value.length)) {\n if (this.inputElement.value.length > 0) {\n this.cursorDetails = this.focusSelection();\n }\n this.inputElement.setSelectionRange(this.cursorDetails.start, this.cursorDetails.end);\n }\n }\n };\n TimePicker.prototype.focusSelection = function () {\n var regex = new RegExp('^[a-zA-Z0-9]+$');\n var split = this.inputElement.value.split('');\n split.push(' ');\n var curPos = this.getCursorSelection();\n var start = 0;\n var end = 0;\n var isSeparator = false;\n if (!this.isTextSelected) {\n for (var i = 0; i < split.length; i++) {\n if (!regex.test(split[i])) {\n end = i;\n isSeparator = true;\n }\n if (isSeparator) {\n if (curPos.start >= start && curPos.end <= end) {\n // eslint-disable-next-line no-self-assign\n end = end;\n this.isTextSelected = true;\n break;\n }\n else {\n start = i + 1;\n isSeparator = false;\n }\n }\n }\n }\n else {\n start = curPos.start;\n end = curPos.end;\n this.isTextSelected = false;\n }\n return { start: start, end: end };\n };\n TimePicker.prototype.inputHandler = function (event) {\n if (!this.readonly && this.enabled) {\n if (event.action !== 'right' && event.action !== 'left' && event.action !== 'tab') {\n event.preventDefault();\n }\n switch (event.action) {\n case 'home':\n case 'end':\n case 'up':\n case 'down':\n this.keyHandler(event);\n break;\n case 'enter':\n if (this.isNavigate) {\n this.selectedElement = this.liCollections[this.activeIndex];\n if (!this.isBlazorServer) {\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n this.updateValue(this.valueWithMinutes, event);\n }\n else {\n this.inputElement.setAttribute('value', this.selectedElement.getAttribute('data-value'));\n this.interopAdaptor.invokeMethodAsync('OnListItemClick', this.activeIndex, true);\n }\n }\n else {\n if (!this.isBlazorServer) {\n this.updateValue(this.inputElement.value, event);\n }\n else {\n this.interopAdaptor.invokeMethodAsync('OnStrictMode', this.inputElement.value);\n }\n }\n this.hide();\n this.isNavigate = false;\n if (this.isPopupOpen()) {\n event.stopPropagation();\n }\n break;\n case 'open':\n if (this.isBlazorServer) {\n this.interopAdaptor.invokeMethodAsync('OnPopupHide', true);\n }\n else {\n this.show(event);\n }\n break;\n case 'escape':\n if (!this.isBlazorServer) {\n this.updateInputValue(this.objToString(this.value));\n this.previousState(this.value);\n }\n this.hide();\n break;\n case 'close':\n this.hide();\n break;\n default:\n this.isNavigate = false;\n break;\n }\n }\n };\n TimePicker.prototype.onMouseClick = function (event) {\n var target = event.target;\n var li = this.selectedElement = closest(target, '.' + LISTCLASS);\n this.setSelection(li, event);\n if (li && li.classList.contains(LISTCLASS)) {\n this.hide();\n }\n };\n TimePicker.prototype.closePopup = function (delay, e) {\n var _this = this;\n if (this.isPopupOpen() && this.popupWrapper) {\n var args = {\n popup: this.isBlazorServer ? null : this.popupObj,\n event: e || null,\n cancel: false,\n name: 'open'\n };\n removeClass([document.body], OVERFLOW);\n this.trigger('close', args, function (args) {\n if (!args.cancel) {\n var animModel = {\n name: 'FadeOut',\n duration: ANIMATIONDURATION,\n delay: delay ? delay : 0\n };\n _this.popupObj.hide(new Animation(animModel));\n removeClass([_this.inputWrapper.container], [ICONANIMATION]);\n attributes(_this.inputElement, { 'aria-expanded': 'false' });\n EventHandler.remove(document, 'mousedown touchstart', _this.documentClickHandler);\n if (_this.isBlazorServer) {\n _this.disposeServerPopup();\n _this.inputWrapper.container.parentElement.insertBefore(_this.popupWrapper, _this.inputWrapper.container.nextElementSibling);\n _this.interopAdaptor.invokeMethodAsync('OnPopupHide', false);\n _this.popupWrapper = _this.popupObj = null;\n }\n }\n if (Browser.isDevice && _this.modal) {\n _this.modal.style.display = 'none';\n _this.modal.outerHTML = '';\n _this.modal = null;\n }\n if (Browser.isDevice) {\n if (!isNullOrUndefined(_this.mobileTimePopupWrap)) {\n _this.mobileTimePopupWrap.remove();\n _this.mobileTimePopupWrap = null;\n }\n }\n if (Browser.isDevice && _this.allowEdit && !_this.readonly) {\n _this.inputElement.removeAttribute('readonly');\n }\n });\n }\n else {\n if (Browser.isDevice && this.allowEdit && !this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n }\n };\n TimePicker.prototype.disposeServerPopup = function () {\n if (this.popupWrapper) {\n this.popupWrapper.style.visibility = 'hidden';\n this.popupWrapper.style.top = '-9999px';\n this.popupWrapper.style.left = '-9999px';\n this.popupWrapper.style.width = '0px';\n this.popupWrapper.style.height = '0px';\n }\n };\n TimePicker.prototype.checkValueChange = function (event, isNavigation) {\n if (!this.strictMode && !this.validateState(this.valueWithMinutes)) {\n if (this.checkDateValue(this.valueWithMinutes) === null) {\n this.initValue = this.valueWithMinutes = null;\n }\n this.setProperties({ value: this.compareFormatChange(this.inputElement.value) }, true);\n this.initValue = this.valueWithMinutes = this.compareFormatChange(this.inputElement.value);\n this.prevValue = this.inputElement.value;\n if (+this.prevDate !== +this.value) {\n this.changeEvent(event);\n }\n }\n else {\n if (!isNavigation) {\n if ((this.prevValue !== this.inputElement.value) || isNullOrUndefined(this.checkDateValue(this.value))) {\n this.valueProcess(event, this.compareFormatChange(this.inputElement.value));\n }\n }\n else {\n var value = this.getDateObject(new Date(this.timeCollections[this.activeIndex]));\n if (+this.prevDate !== +value) {\n this.valueProcess(event, value);\n }\n }\n }\n };\n TimePicker.prototype.onMouseOver = function (event) {\n var currentLi = closest(event.target, '.' + LISTCLASS);\n this.setHover(currentLi, HOVER);\n };\n TimePicker.prototype.setHover = function (li, className) {\n if (this.enabled && this.isValidLI(li) && !li.classList.contains(className)) {\n this.removeHover(className);\n addClass([li], className);\n if (className === NAVIGATION) {\n li.setAttribute('aria-selected', 'true');\n }\n }\n };\n TimePicker.prototype.setSelection = function (li, event) {\n if (this.isValidLI(li) && !li.classList.contains(SELECTED)) {\n if (!this.isBlazorServer) {\n this.checkValue(li.getAttribute('data-value'));\n this.selectedElement = li;\n this.activeIndex = Array.prototype.slice.call(this.liCollections).indexOf(li);\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n addClass([this.selectedElement], SELECTED);\n this.selectedElement.setAttribute('aria-selected', 'true');\n this.checkValueChange(event, true);\n }\n else {\n this.selectedElement = li;\n this.activeIndex = Array.prototype.slice.call(this.liCollections).indexOf(li);\n addClass([this.selectedElement], SELECTED);\n this.selectedElement.setAttribute('aria-selected', 'true');\n this.inputElement.setAttribute('value', li.getAttribute('data-value'));\n this.interopAdaptor.invokeMethodAsync('OnListItemClick', this.activeIndex, false);\n this.addSelection();\n }\n }\n };\n TimePicker.prototype.onMouseLeave = function () {\n this.removeHover(HOVER);\n };\n TimePicker.prototype.scrollHandler = function () {\n if (this.getModuleName() === 'timepicker' && Browser.isDevice) {\n return;\n }\n else {\n this.hide();\n }\n };\n TimePicker.prototype.setMinMax = function (minVal, maxVal) {\n if (isNullOrUndefined(this.checkDateValue(minVal))) {\n this.initMin = this.getDateObject('12:00:00 AM');\n }\n if (isNullOrUndefined(this.checkDateValue(maxVal))) {\n this.initMax = this.getDateObject('11:59:59 PM');\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n TimePicker.prototype.validateMinMax = function (dateVal, minVal, maxVal) {\n var value = dateVal instanceof Date ? dateVal : this.getDateObject(dateVal);\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n dateVal = this.strictOperation(this.initMin, this.initMax, dateVal, value);\n }\n else if (+(this.createDateObj(this.getFormattedValue(this.initMin))) >\n +(this.createDateObj(this.getFormattedValue(this.initMax)))) {\n this.disableTimeIcon();\n }\n if (this.strictMode) {\n dateVal = this.valueIsDisable(dateVal) ? dateVal : null;\n }\n this.checkErrorState(dateVal);\n return dateVal;\n };\n TimePicker.prototype.valueIsDisable = function (value) {\n if (this.disableItemCollection.length > 0) {\n if (this.disableItemCollection.length === this.timeCollections.length) {\n return false;\n }\n var time = value instanceof Date ? this.objToString(value) : value;\n for (var index = 0; index < this.disableItemCollection.length; index++) {\n if (time === this.disableItemCollection[index]) {\n return false;\n }\n }\n }\n return true;\n };\n TimePicker.prototype.validateState = function (val) {\n if (!this.strictMode) {\n if (this.valueIsDisable(val)) {\n var value = typeof val === 'string' ? this.setCurrentDate(this.getDateObject(val)) :\n this.setCurrentDate(this.getDateObject(val));\n var maxValue = this.setCurrentDate(this.getDateObject(this.initMax));\n var minValue = this.setCurrentDate(this.getDateObject(this.initMin));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n if ((+(value) > +(maxValue)) || (+(value) < +(minValue))) {\n return false;\n }\n }\n else {\n if ((+(maxValue) < +(minValue)) || this.inputElement.value !== '') {\n return false;\n }\n }\n }\n else {\n return false;\n }\n }\n return true;\n };\n TimePicker.prototype.strictOperation = function (minimum, maximum, dateVal, val) {\n var maxValue = this.createDateObj(this.getFormattedValue(maximum));\n var minValue = this.createDateObj(this.getFormattedValue(minimum));\n var value = this.createDateObj(this.getFormattedValue(val));\n if (this.strictMode) {\n if (+minValue > +maxValue) {\n this.disableTimeIcon();\n this.initValue = this.getDateObject(maxValue);\n this.updateInputValue(this.getValue(this.initValue));\n return this.inputElement.value;\n }\n else if (+minValue >= +value) {\n return this.getDateObject(minValue);\n }\n else if (+value >= +maxValue || +minValue === +maxValue) {\n return this.getDateObject(maxValue);\n }\n }\n else {\n if (+minValue > +maxValue) {\n this.disableTimeIcon();\n if (!isNaN(+this.createDateObj(dateVal))) {\n return dateVal;\n }\n }\n }\n return dateVal;\n };\n TimePicker.prototype.bindEvents = function () {\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', (this.isBlazorServer ? this.preventEventBubbling : this.popupHandler), this);\n EventHandler.add(this.inputElement, 'blur', this.inputBlurHandler, this);\n EventHandler.add(this.inputElement, 'focus', this.inputFocusHandler, this);\n EventHandler.add(this.inputElement, 'change', this.inputChangeHandler, this);\n if (this.showClearButton && this.inputWrapper.clearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.clearHandler, this);\n }\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);\n }\n if (!Browser.isDevice) {\n this.keyConfigure = extend(this.keyConfigure, this.keyConfigs);\n this.inputEvent = new KeyboardEvents(this.inputWrapper.container, {\n keyAction: this.inputHandler.bind(this),\n keyConfigs: this.keyConfigure,\n eventName: 'keydown'\n });\n if (this.showClearButton && this.inputElement) {\n EventHandler.add(this.inputElement, 'mousedown', this.mouseDownHandler, this);\n }\n }\n };\n TimePicker.prototype.formResetHandler = function () {\n if (!this.enabled) {\n return;\n }\n if (!this.inputElement.disabled) {\n var timeValue = this.inputElement.getAttribute('value');\n var val = this.isBlazorServer ? this.inputEleValue : this.checkDateValue(this.inputEleValue);\n if (this.element.tagName === 'EJS-TIMEPICKER') {\n val = null;\n timeValue = '';\n this.inputElement.setAttribute('value', '');\n }\n if (!this.isBlazorServer) {\n this.setProperties({ value: val }, true);\n this.prevDate = this.value;\n this.valueWithMinutes = this.value;\n this.initValue = this.value;\n }\n if (this.inputElement) {\n this.updateInputValue(timeValue);\n if (!this.isBlazorServer) {\n this.checkErrorState(timeValue);\n }\n this.prevValue = this.inputElement.value;\n }\n }\n };\n TimePicker.prototype.inputChangeHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n e.stopPropagation();\n };\n TimePicker.prototype.unBindEvents = function () {\n if (this.inputWrapper) {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', (this.isBlazorServer ? this.preventEventBubbling : this.popupHandler));\n }\n EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);\n EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);\n EventHandler.remove(this.inputElement, 'change', this.inputChangeHandler);\n if (this.inputEvent) {\n this.inputEvent.destroy();\n }\n EventHandler.remove(this.inputElement, 'mousedown touchstart', this.mouseDownHandler);\n if (this.showClearButton && !isNullOrUndefined(this.inputWrapper.clearButton)) {\n EventHandler.remove(this.inputWrapper.clearButton, 'mousedown touchstart', this.clearHandler);\n }\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n };\n TimePicker.prototype.bindClearEvent = function () {\n if (this.showClearButton && this.inputWrapper.clearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.clearHandler, this);\n }\n };\n TimePicker.prototype.raiseClearedEvent = function (e) {\n var clearedArgs = {\n event: e\n };\n this.trigger('cleared', clearedArgs);\n };\n TimePicker.prototype.clearHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n e.preventDefault();\n if (!isNullOrUndefined(this.value)) {\n this.clear(e);\n }\n else {\n this.resetState();\n this.raiseClearedEvent(e);\n }\n if (this.isBlazorServer) {\n this.interopAdaptor.invokeMethodAsync('OnValueCleared');\n }\n if (this.popupWrapper) {\n this.popupWrapper.scrollTop = 0;\n }\n };\n TimePicker.prototype.clear = function (event) {\n if (!this.isBlazorServer) {\n this.setProperties({ value: null }, true);\n }\n this.initValue = null;\n this.resetState();\n this.raiseClearedEvent(event);\n if (!this.isBlazorServer) {\n this.changeEvent(event);\n }\n };\n TimePicker.prototype.setZIndex = function () {\n if (this.popupObj) {\n this.popupObj.zIndex = this.zIndex;\n this.popupObj.dataBind();\n }\n };\n TimePicker.prototype.checkAttributes = function (isDynamic) {\n var attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['step', 'disabled', 'readonly', 'style', 'name', 'value', 'min', 'max', 'placeholder'];\n var value;\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.inputElement.getAttribute(prop))) {\n switch (prop) {\n case 'disabled':\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['enabled'] === undefined)) || isDynamic) {\n var enabled = this.inputElement.getAttribute(prop) === 'disabled' ||\n this.inputElement.getAttribute(prop) === '' || this.inputElement.getAttribute(prop) === 'true' ? false : true;\n this.setProperties({ enabled: enabled }, !isDynamic);\n }\n break;\n case 'style':\n this.inputStyle = this.inputElement.getAttribute(prop);\n break;\n case 'readonly':\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['readonly'] === undefined)) || isDynamic) {\n var readonly = this.inputElement.getAttribute(prop) === 'readonly' ||\n this.inputElement.getAttribute(prop) === '' || this.inputElement.getAttribute(prop) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !isDynamic);\n }\n break;\n case 'name':\n this.inputElement.setAttribute('name', this.inputElement.getAttribute(prop));\n break;\n case 'step':\n this.step = parseInt(this.inputElement.getAttribute(prop), 10);\n break;\n case 'placeholder':\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.inputElement.getAttribute(prop) }, !isDynamic);\n }\n break;\n case 'min':\n if (!this.isBlazorServer) {\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['min'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n this.setProperties({ min: value }, !isDynamic);\n }\n }\n }\n break;\n case 'max':\n if (!this.isBlazorServer) {\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['max'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n this.setProperties({ max: value }, !isDynamic);\n }\n }\n }\n break;\n case 'value':\n if (!this.isBlazorServer) {\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['value'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n this.initValue = value;\n this.updateInput(false, this.initValue);\n this.setProperties({ value: value }, !isDynamic);\n }\n }\n }\n break;\n }\n }\n }\n };\n TimePicker.prototype.setCurrentDate = function (value) {\n if (isNullOrUndefined(this.checkDateValue(value))) {\n return null;\n }\n return new Date(YEAR, MONTH, DAY, value.getHours(), value.getMinutes(), value.getSeconds());\n };\n TimePicker.prototype.getTextFormat = function () {\n var time = 0;\n if (this.cldrTimeFormat().split(' ')[0] === 'a' || this.cldrTimeFormat().indexOf('a') === 0) {\n time = 1;\n }\n else if (this.cldrTimeFormat().indexOf('a') < 0) {\n var strArray = this.cldrTimeFormat().split(' ');\n for (var i = 0; i < strArray.length; i++) {\n if (strArray[i].toLowerCase().indexOf('h') >= 0) {\n time = i;\n break;\n }\n }\n }\n return time;\n };\n TimePicker.prototype.updateValue = function (value, event) {\n var val;\n if (this.isNullOrEmpty(value)) {\n this.resetState();\n }\n else {\n val = this.checkValue(value);\n if (this.strictMode) {\n // this case set previous value to the text box when set invalid date\n var inputVal = (val === null && value.trim().length > 0) ?\n this.previousState(this.prevDate) : this.inputElement.value;\n this.updateInputValue(inputVal);\n }\n }\n this.checkValueChange(event, typeof value === 'string' ? false : true);\n };\n TimePicker.prototype.previousState = function (date) {\n var value = this.getDateObject(date);\n for (var i = 0; i < this.timeCollections.length; i++) {\n if (+value === this.timeCollections[i]) {\n this.activeIndex = i;\n this.selectedElement = this.liCollections[i];\n this.valueWithMinutes = new Date(this.timeCollections[i]);\n break;\n }\n }\n return this.prevValue;\n };\n TimePicker.prototype.resetState = function () {\n this.removeSelection();\n Input.setValue('', this.inputElement, this.floatLabelType, false);\n this.valueWithMinutes = this.activeIndex = null;\n if (!this.strictMode && !this.isBlazorServer) {\n this.checkErrorState(null);\n }\n };\n TimePicker.prototype.objToString = function (val) {\n if (isNullOrUndefined(this.checkDateValue(val))) {\n return null;\n }\n else {\n return this.globalize.formatDate(val, { format: this.cldrTimeFormat(), type: 'time' });\n }\n };\n TimePicker.prototype.checkValue = function (value) {\n if (!this.isNullOrEmpty(value)) {\n var date = value instanceof Date ? value : this.getDateObject(value);\n return this.validateValue(date, value);\n }\n this.resetState();\n return this.valueWithMinutes = null;\n };\n TimePicker.prototype.validateValue = function (date, value) {\n var time;\n var val = this.validateMinMax(value, this.min, this.max);\n var newval = this.createDateObj(val);\n if (this.getFormattedValue(newval) !== this.getFormattedValue(this.value)) {\n this.valueWithMinutes = isNullOrUndefined(newval) ? null : newval;\n time = this.objToString(this.valueWithMinutes);\n }\n else {\n if (this.strictMode) {\n //for strict mode case, when value not present within a range. Reset the nearest range value.\n date = newval;\n }\n this.valueWithMinutes = this.checkDateValue(date);\n time = this.objToString(this.valueWithMinutes);\n }\n if (!this.strictMode && isNullOrUndefined(time)) {\n var value_1 = val.trim().length > 0 ? val : '';\n this.updateInputValue(value_1);\n }\n else {\n this.updateInputValue(time);\n }\n return time;\n };\n TimePicker.prototype.findNextElement = function (event) {\n var textVal = (this.inputElement).value;\n var value = isNullOrUndefined(this.valueWithMinutes) || this.isBlazorServer ? this.createDateObj(textVal) :\n this.getDateObject(this.valueWithMinutes);\n var timeVal = null;\n var count = this.liCollections.length;\n var collections = this.isBlazorServer ? (isNullOrUndefined(this.blazorTimeCollections) ? [] :\n this.blazorTimeCollections) : this.timeCollections;\n if (!isNullOrUndefined(this.checkDateValue(value)) || !isNullOrUndefined(this.activeIndex)) {\n if (event.action === 'home') {\n var index = this.validLiElement(0);\n if (!this.isBlazorServer) {\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n }\n this.activeIndex = index;\n }\n else if (event.action === 'end') {\n var index = this.validLiElement(collections.length - 1, true);\n if (!this.isBlazorServer) {\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n }\n this.activeIndex = index;\n }\n else {\n if (event.action === 'down') {\n for (var i = 0; i < count; i++) {\n if (this.isBlazorServer ? (+value < +this.createDateObj(this.blazorTimeCollections[i])) :\n (+value < this.timeCollections[i])) {\n var index = this.validLiElement(i);\n if (!this.isBlazorServer) {\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n }\n this.activeIndex = index;\n break;\n }\n else if (i === count - 1) {\n var index = this.validLiElement(0);\n if (!this.isBlazorServer) {\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n }\n this.activeIndex = index;\n break;\n }\n }\n }\n else {\n for (var i = count - 1; i >= 0; i--) {\n if (this.isBlazorServer ? (+value > +this.createDateObj(this.blazorTimeCollections[i])) :\n (+value > this.timeCollections[i])) {\n var index = this.validLiElement(i, true);\n if (!this.isBlazorServer) {\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n }\n this.activeIndex = index;\n break;\n }\n else if (i === 0) {\n var index = this.validLiElement(count - 1);\n if (!this.isBlazorServer) {\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n }\n this.activeIndex = index;\n break;\n }\n }\n }\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n if (this.isBlazorServer) {\n this.inputElement.setAttribute('value', this.selectedElement.getAttribute('data-value'));\n this.interopAdaptor.invokeMethodAsync('OnListItemClick', this.activeIndex, true);\n }\n else {\n this.elementValue(isNullOrUndefined(timeVal) ? null : new Date(timeVal));\n }\n }\n else {\n this.selectNextItem(event);\n }\n };\n TimePicker.prototype.selectNextItem = function (event) {\n var index = this.validLiElement(0, event.action === 'down' ? false : true);\n this.activeIndex = index;\n this.selectedElement = this.liCollections[index];\n if (this.isBlazorServer) {\n this.inputElement.setAttribute('value', this.selectedElement.getAttribute('data-value'));\n this.interopAdaptor.invokeMethodAsync('OnListItemClick', index, true);\n }\n else {\n this.elementValue(new Date(this.timeCollections[index]));\n }\n };\n TimePicker.prototype.findNextInBlazor = function (event) {\n var count = isNullOrUndefined(this.blazorTimeCollections) ? 0 : this.blazorTimeCollections.length;\n var index = 0;\n var value = this.createDateObj(this.inputElement.value);\n switch (event.action) {\n case 'home':\n this.activeIndex = index;\n break;\n case 'end':\n index = count - 1;\n this.activeIndex = index;\n break;\n case 'down':\n for (var i = 0; i < count; i++) {\n if (this.isBlazorServer ? (+value < +this.createDateObj(this.blazorTimeCollections[i])) :\n (+value < this.timeCollections[i])) {\n var index_1 = this.validLiElement(i);\n this.activeIndex = index_1;\n break;\n }\n else if (i === count - 1) {\n var index_2 = this.validLiElement(0);\n this.activeIndex = index_2;\n break;\n }\n }\n break;\n case 'up':\n for (var i = count - 1; i >= 0; i--) {\n if (this.isBlazorServer ? (+value > +this.createDateObj(this.blazorTimeCollections[i])) :\n (+value > this.timeCollections[i])) {\n var index_3 = this.validLiElement(i, true);\n this.activeIndex = index_3;\n break;\n }\n else if (i === 0) {\n var index_4 = this.validLiElement(count - 1);\n this.activeIndex = index_4;\n break;\n }\n }\n break;\n }\n this.interopAdaptor.invokeMethodAsync('OnListItemClick', this.activeIndex, true);\n };\n TimePicker.prototype.elementValue = function (value) {\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n this.checkValue(value);\n }\n };\n TimePicker.prototype.validLiElement = function (index, backward) {\n var elementIndex = null;\n if (this.isBlazorServer && isNullOrUndefined(this.popupWrapper)) {\n var items = this.blazorTimeCollections;\n if (items.length) {\n if (backward) {\n for (var i = index; i >= 0; i--) {\n elementIndex = i;\n break;\n }\n }\n else {\n for (var i = index; i <= items.length - 1; i++) {\n elementIndex = i;\n break;\n }\n }\n }\n }\n else {\n var items = isNullOrUndefined(this.popupWrapper) ? this.liCollections :\n this.popupWrapper.querySelectorAll('.' + LISTCLASS);\n var isCheck = true;\n if (items.length) {\n if (backward) {\n for (var i = index; i >= 0; i--) {\n if (!items[i].classList.contains(DISABLED)) {\n elementIndex = i;\n break;\n }\n else if (i === 0) {\n if (isCheck) {\n index = i = items.length;\n isCheck = false;\n }\n }\n }\n }\n else {\n for (var i = index; i <= items.length - 1; i++) {\n if (!items[i].classList.contains(DISABLED)) {\n elementIndex = i;\n break;\n }\n else if (i === items.length - 1) {\n if (isCheck) {\n index = i = -1;\n isCheck = false;\n }\n }\n }\n }\n }\n }\n return elementIndex;\n };\n TimePicker.prototype.keyHandler = function (event) {\n if (isNullOrUndefined(this.step) || this.step <= 0 || this.inputWrapper.buttons[0].classList.contains(DISABLED)) {\n return;\n }\n var count = this.isBlazorServer ? (isNullOrUndefined(this.blazorTimeCollections) ? 0 :\n this.blazorTimeCollections.length) : this.timeCollections.length;\n if (isNullOrUndefined(this.getActiveElement()) || this.getActiveElement().length === 0) {\n if (isNullOrUndefined(this.popupObj) && this.isBlazorServer) {\n if (isNullOrUndefined(this.activeIndex)) {\n var index = this.validLiElement(0, event.action === 'down' ? false : true);\n this.activeIndex = index;\n this.interopAdaptor.invokeMethodAsync('OnListItemClick', index, true);\n }\n else {\n this.findNextInBlazor(event);\n }\n }\n else {\n if (this.liCollections.length > 0) {\n if (this.isBlazorServer ? (isNullOrUndefined(this.activeIndex)) : (isNullOrUndefined(this.value) &&\n isNullOrUndefined(this.activeIndex))) {\n this.selectNextItem(event);\n }\n else {\n this.findNextElement(event);\n }\n }\n else {\n this.findNextElement(event);\n }\n }\n }\n else {\n var nextItem = void 0;\n if ((event.keyCode >= 37) && (event.keyCode <= 40)) {\n var index = (event.keyCode === 40 || event.keyCode === 39) ? ++this.activeIndex : --this.activeIndex;\n this.activeIndex = index = this.activeIndex === (count) ? 0 : this.activeIndex;\n this.activeIndex = index = this.activeIndex < 0 ? (count - 1) : this.activeIndex;\n this.activeIndex = index = this.validLiElement(this.activeIndex, (event.keyCode === 40 || event.keyCode === 39) ?\n false : true);\n if (!this.isBlazorServer) {\n nextItem = isNullOrUndefined(this.timeCollections[index]) ? this.timeCollections[0] : this.timeCollections[index];\n }\n }\n else if (event.action === 'home') {\n var index = this.validLiElement(0);\n this.activeIndex = index;\n if (!this.isBlazorServer) {\n nextItem = this.timeCollections[index];\n }\n }\n else if (event.action === 'end') {\n var index = this.validLiElement(count - 1, true);\n this.activeIndex = index;\n if (!this.isBlazorServer) {\n nextItem = this.timeCollections[index];\n }\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n if (this.isBlazorServer) {\n this.inputElement.setAttribute('value', this.selectedElement.getAttribute('data-value'));\n this.interopAdaptor.invokeMethodAsync('OnListItemClick', this.activeIndex, true);\n }\n else {\n this.elementValue(new Date(nextItem));\n }\n }\n this.isNavigate = true;\n this.setHover(this.selectedElement, NAVIGATION);\n this.setActiveDescendant();\n if (!this.isBlazorServer) {\n this.selectInputText();\n }\n if (this.isPopupOpen() && this.selectedElement !== null && (!event || event.type !== 'click')) {\n this.setScrollPosition();\n }\n };\n TimePicker.prototype.getCultureTimeObject = function (ld, c) {\n return isBlazor() ? (getValue('t', getValue(c, blazorCultureFormats))).replace(/tt/, 'a') :\n getValue('main.' + c + '.dates.calendars.gregorian.timeFormats.short', ld);\n };\n TimePicker.prototype.getCultureDateObject = function (ld, c) {\n return isBlazor() ? (getValue('d', getValue(c, blazorCultureFormats))) :\n getValue('main.' + c + '.dates.calendars.gregorian.dateFormats.short', ld);\n };\n TimePicker.prototype.wireListEvents = function () {\n EventHandler.add(this.listWrapper, 'click', this.onMouseClick, this);\n if (!Browser.isDevice) {\n EventHandler.add(this.listWrapper, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.listWrapper, 'mouseout', this.onMouseLeave, this);\n }\n };\n TimePicker.prototype.unWireListEvents = function () {\n if (this.listWrapper) {\n EventHandler.remove(this.listWrapper, 'click', this.onMouseClick);\n if (!Browser.isDevice) {\n EventHandler.remove(this.listWrapper, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.listWrapper, 'mouseout', this.onMouseLeave);\n }\n }\n };\n TimePicker.prototype.valueProcess = function (event, value) {\n var result = (isNullOrUndefined(this.checkDateValue(value))) ? null : value;\n if (+this.prevDate !== +result) {\n this.initValue = result;\n this.changeEvent(event);\n }\n };\n TimePicker.prototype.changeEvent = function (e) {\n this.addSelection();\n this.updateInput(true, this.initValue);\n var eventArgs = {\n event: (e || null),\n value: this.value,\n text: (this.inputElement).value,\n isInteracted: !isNullOrUndefined(e),\n element: this.element\n };\n eventArgs.value = this.valueWithMinutes || this.getDateObject(this.inputElement.value);\n this.prevDate = this.valueWithMinutes || this.getDateObject(this.inputElement.value);\n if (this.isAngular && this.preventChange) {\n this.preventChange = false;\n }\n else {\n this.trigger('change', eventArgs);\n }\n this.invalidValueString = null;\n this.checkErrorState(this.value);\n };\n TimePicker.prototype.updateInput = function (isUpdate, date) {\n if (isUpdate) {\n this.prevValue = this.getValue(date);\n }\n this.prevDate = this.valueWithMinutes = date;\n if ((typeof date !== 'number') || (this.value && +new Date(+this.value).setMilliseconds(0)) !== +date) {\n this.setProperties({ value: date }, true);\n }\n if (!this.strictMode && isNullOrUndefined(this.value) && this.invalidValueString) {\n this.checkErrorState(this.invalidValueString);\n this.updateInputValue(this.invalidValueString);\n }\n this.clearIconState();\n };\n TimePicker.prototype.setActiveDescendant = function () {\n if (!isNullOrUndefined(this.selectedElement)) {\n attributes(this.inputElement, { 'aria-activedescendant': this.selectedElement.getAttribute('id') });\n }\n else {\n attributes(this.inputElement, { 'aria-activedescendant': 'null' });\n }\n };\n TimePicker.prototype.removeSelection = function () {\n this.removeHover(HOVER);\n if (!isNullOrUndefined(this.popupWrapper)) {\n var items = this.popupWrapper.querySelectorAll('.' + SELECTED);\n if (items.length) {\n removeClass(items, SELECTED);\n items[0].removeAttribute('aria-selected');\n }\n }\n };\n TimePicker.prototype.removeHover = function (className) {\n var hoveredItem = this.getHoverItem(className);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, className);\n if (className === NAVIGATION) {\n hoveredItem[0].removeAttribute('aria-selected');\n }\n }\n };\n TimePicker.prototype.getHoverItem = function (className) {\n var hoveredItem;\n if (!isNullOrUndefined(this.popupWrapper)) {\n hoveredItem = this.popupWrapper.querySelectorAll('.' + className);\n }\n return hoveredItem;\n };\n TimePicker.prototype.setActiveClass = function () {\n if (!isNullOrUndefined(this.popupWrapper)) {\n var items = this.popupWrapper.querySelectorAll('.' + LISTCLASS);\n if (items.length) {\n for (var i = 0; i < items.length; i++) {\n if ((!this.isBlazorServer && this.timeCollections[i] === +this.getDateObject(this.valueWithMinutes))\n || (this.isBlazorServer && this.blazorTimeCollections[i] === this.blazorTimeCollections[this.activeIndex])) {\n items[i].setAttribute('aria-selected', 'true');\n this.selectedElement = items[i];\n this.activeIndex = i;\n break;\n }\n }\n }\n }\n };\n TimePicker.prototype.addSelection = function () {\n this.selectedElement = null;\n this.removeSelection();\n this.setActiveClass();\n if (!isNullOrUndefined(this.selectedElement)) {\n addClass([this.selectedElement], SELECTED);\n this.selectedElement.setAttribute('aria-selected', 'true');\n }\n };\n TimePicker.prototype.isValidLI = function (li) {\n return (li && li.classList.contains(LISTCLASS) && !li.classList.contains(DISABLED));\n };\n TimePicker.prototype.createDateObj = function (val) {\n var formatStr = isBlazor() ?\n 'M' + getDefaultDateObject().dateSeperator + 'd' + getDefaultDateObject().dateSeperator + 'yy'\n : null;\n var today = this.globalize.formatDate(new Date(), { format: formatStr, skeleton: 'short', type: 'date' });\n var value = null;\n if (typeof val === 'string') {\n if (val.toUpperCase().indexOf('AM') > -1 || val.toUpperCase().indexOf('PM') > -1) {\n today = this.defaultCulture.formatDate(new Date(), { format: formatStr, skeleton: 'short', type: 'date' });\n value = isNaN(+new Date(today + ' ' + val)) ? null : new Date(new Date(today + ' ' + val).setMilliseconds(0));\n if (isNullOrUndefined(value)) {\n value = this.timeParse(today, val);\n }\n }\n else {\n value = this.timeParse(today, val);\n }\n }\n else if (val instanceof Date) {\n value = val;\n }\n return value;\n };\n TimePicker.prototype.timeParse = function (today, val) {\n var value;\n value = this.globalize.parseDate(today + ' ' + val, {\n format: this.cldrDateFormat() + ' ' + this.cldrTimeFormat(), type: 'datetime'\n });\n value = isNullOrUndefined(value) ? this.globalize.parseDate(today + ' ' + val, {\n format: this.cldrDateFormat() + ' ' + this.dateToNumeric(), type: 'datetime'\n }) : value;\n value = isNullOrUndefined(value) ? value : new Date(value.setMilliseconds(0));\n return value;\n };\n TimePicker.prototype.createListItems = function () {\n var _this = this;\n this.listWrapper = this.createElement('div', { className: CONTENT, attrs: { 'tabindex': '0' } });\n var start;\n var interval = this.step * 60000;\n var listItems = [];\n this.timeCollections = [];\n this.disableItemCollection = [];\n start = +(this.getDateObject(this.initMin).setMilliseconds(0));\n var end = +(this.getDateObject(this.initMax).setMilliseconds(0));\n while (end >= start) {\n this.timeCollections.push(start);\n listItems.push(this.globalize.formatDate(new Date(start), { format: this.cldrTimeFormat(), type: 'time' }));\n start += interval;\n }\n var listBaseOptions = {\n itemCreated: function (args) {\n var eventArgs = {\n element: args.item,\n text: args.text, value: _this.getDateObject(args.text), isDisabled: false\n };\n _this.trigger('itemRender', eventArgs, function (eventArgs) {\n if (eventArgs.isDisabled) {\n eventArgs.element.classList.add(DISABLED);\n }\n if (eventArgs.element.classList.contains(DISABLED)) {\n _this.disableItemCollection.push(eventArgs.element.getAttribute('data-value'));\n }\n });\n }\n };\n this.listTag = ListBase.createList(this.createElement, listItems, listBaseOptions, true);\n attributes(this.listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options' });\n append([this.listTag], this.listWrapper);\n };\n TimePicker.prototype.documentClickHandler = function (event) {\n var target = event.target;\n if ((!isNullOrUndefined(this.popupObj) && (this.inputWrapper.container.contains(target) ||\n (this.popupObj.element && this.popupObj.element.contains(target)))) && event.type !== 'touchstart') {\n event.preventDefault();\n }\n if (!(closest(target, '[id=\"' + this.popupObj.element.id + '\"]')) && target !== this.inputElement\n && target !== (this.inputWrapper && this.inputWrapper.buttons[0]) &&\n target !== (this.inputWrapper && this.inputWrapper.clearButton) &&\n target !== (this.inputWrapper && this.inputWrapper.container)) {\n if (this.isPopupOpen()) {\n this.hide();\n this.focusOut();\n }\n }\n else if (target !== this.inputElement) {\n if (!Browser.isDevice) {\n this.isPreventBlur = (Browser.isIE || Browser.info.name === 'edge') && (document.activeElement === this.inputElement)\n && (target === this.popupWrapper);\n }\n }\n };\n TimePicker.prototype.setEnableRtl = function () {\n Input.setEnableRtl(this.enableRtl, [this.inputWrapper.container]);\n if (this.popupObj) {\n this.popupObj.enableRtl = this.enableRtl;\n this.popupObj.dataBind();\n }\n };\n TimePicker.prototype.setEnable = function () {\n Input.setEnabled(this.enabled, this.inputElement, this.floatLabelType);\n if (this.enabled) {\n removeClass([this.inputWrapper.container], DISABLED);\n attributes(this.inputElement, { 'aria-disabled': 'false' });\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.hide();\n addClass([this.inputWrapper.container], DISABLED);\n attributes(this.inputElement, { 'aria-disabled': 'true' });\n this.inputElement.tabIndex = -1;\n }\n };\n TimePicker.prototype.getProperty = function (date, val) {\n if (val === 'min') {\n this.initMin = this.checkDateValue(new Date(this.checkInValue(date.min)));\n this.setProperties({ min: this.initMin }, true);\n }\n else {\n this.initMax = this.checkDateValue(new Date(this.checkInValue(date.max)));\n this.setProperties({ max: this.initMax }, true);\n }\n if (this.inputElement.value === '') {\n this.validateMinMax(this.value, this.min, this.max);\n }\n else {\n this.checkValue(this.inputElement.value);\n }\n this.checkValueChange(null, false);\n };\n TimePicker.prototype.inputBlurHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n // IE popup closing issue when click over the scrollbar\n if (this.isPreventBlur && this.isPopupOpen()) {\n this.inputElement.focus();\n return;\n }\n this.closePopup(0, e);\n removeClass([this.inputWrapper.container], [FOCUS]);\n var blurArguments = {\n model: this.isBlazorServer ? null : this\n };\n this.trigger('blur', blurArguments);\n if (!this.isBlazorServer && this.getText() !== this.inputElement.value) {\n this.updateValue((this.inputElement).value, e);\n }\n else if (this.inputElement.value.trim().length === 0) {\n this.resetState();\n }\n if (this.isBlazorServer) {\n this.interopAdaptor.invokeMethodAsync('OnStrictMode', this.inputElement.value);\n }\n this.cursorDetails = null;\n this.isNavigate = false;\n if (this.inputElement.value === '') {\n this.invalidValueString = null;\n }\n };\n /**\n * Focuses out the TimePicker textbox element.\n *\n * @returns {void}\n */\n TimePicker.prototype.focusOut = function () {\n if (document.activeElement === this.inputElement) {\n this.inputElement.blur();\n removeClass([this.inputWrapper.container], [FOCUS]);\n var blurArguments = {\n model: this.isBlazorServer ? null : this\n };\n this.trigger('blur', blurArguments);\n }\n };\n TimePicker.prototype.isPopupOpen = function () {\n if (this.popupWrapper && this.popupWrapper.classList.contains('' + ROOT)) {\n return true;\n }\n return false;\n };\n TimePicker.prototype.inputFocusHandler = function () {\n if (!this.enabled) {\n return;\n }\n var focusArguments = {\n model: this.isBlazorServer ? null : this\n };\n if (!this.readonly && !Browser.isDevice) {\n this.selectInputText();\n }\n this.trigger('focus', focusArguments);\n this.clearIconState();\n if (this.openOnFocus) {\n this.show();\n }\n };\n /**\n * Focused the TimePicker textbox element.\n *\n * @returns {void}\n */\n TimePicker.prototype.focusIn = function () {\n if (document.activeElement !== this.inputElement && this.enabled) {\n this.inputElement.focus();\n }\n };\n /**\n * Hides the TimePicker popup.\n *\n * @returns {void}\n\n */\n TimePicker.prototype.hide = function () {\n this.closePopup(100, null);\n this.clearIconState();\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Opens the popup to show the list items.\n *\n * @returns {void}\n\n */\n TimePicker.prototype.show = function (event) {\n var _this = this;\n if ((this.enabled && this.readonly) || !this.enabled || this.popupWrapper) {\n return;\n }\n else {\n this.popupCreation();\n if (Browser.isDevice && this.listWrapper) {\n this.modal = this.createElement('div');\n this.modal.className = '' + ROOT + ' e-time-modal';\n document.body.className += ' ' + OVERFLOW;\n document.body.appendChild(this.modal);\n }\n if (Browser.isDevice) {\n this.mobileTimePopupWrap = this.createElement('div', { className: 'e-timepicker-mob-popup-wrap' });\n document.body.appendChild(this.mobileTimePopupWrap);\n }\n this.openPopupEventArgs = {\n popup: this.isBlazorServer ? null : (this.popupObj || null),\n cancel: false,\n event: event || null,\n name: 'open',\n appendTo: Browser.isDevice ? this.mobileTimePopupWrap : document.body\n };\n var eventArgs = this.openPopupEventArgs;\n this.trigger('open', eventArgs, function (eventArgs) {\n if ((isBlazor() && _this.isServerRendered)) {\n eventArgs.popup = _this.popupObj || null;\n }\n _this.openPopupEventArgs = eventArgs;\n if (!_this.openPopupEventArgs.cancel && !_this.inputWrapper.buttons[0].classList.contains(DISABLED)) {\n if (_this.isBlazorServer) {\n _this.popupWrapper.style.visibility = '';\n _this.popupWrapper.style.width = _this.inputWrapper.container.offsetWidth + 'px';\n _this.popupWrapper.style.height = 'auto';\n }\n if (_this.isBlazorServer) {\n _this.openPopupEventArgs.popup = _this.popupObj;\n }\n _this.openPopupEventArgs.appendTo.appendChild(_this.popupWrapper);\n _this.popupAlignment(_this.openPopupEventArgs);\n _this.setScrollPosition();\n if (!Browser.isDevice) {\n _this.inputElement.focus();\n }\n var openAnimation = {\n name: 'FadeIn',\n duration: ANIMATIONDURATION\n };\n _this.popupObj.refreshPosition(_this.anchor);\n if (_this.zIndex === 1000) {\n _this.popupObj.show(new Animation(openAnimation), _this.element);\n }\n else {\n _this.popupObj.show(new Animation(openAnimation), null);\n }\n _this.setActiveDescendant();\n attributes(_this.inputElement, { 'aria-expanded': 'true' });\n addClass([_this.inputWrapper.container], FOCUS);\n EventHandler.add(document, 'mousedown touchstart', _this.documentClickHandler, _this);\n _this.setOverlayIndex(_this.mobileTimePopupWrap, _this.popupObj.element, _this.modal, Browser.isDevice);\n }\n else {\n _this.popupObj.destroy();\n if (_this.isBlazorServer) {\n _this.disposeServerPopup();\n _this.inputWrapper.container.parentElement.insertBefore(_this.popupWrapper, _this.inputWrapper.container.nextElementSibling);\n _this.interopAdaptor.invokeMethodAsync('OnPopupHide', false);\n }\n _this.popupWrapper = _this.listTag = undefined;\n _this.liCollections = _this.timeCollections = _this.disableItemCollection = [];\n _this.popupObj = null;\n }\n });\n }\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n TimePicker.prototype.setOverlayIndex = function (popupWrapper, timePopupElement, modal, isDevice) {\n if (isDevice && !isNullOrUndefined(timePopupElement) && !isNullOrUndefined(modal) && !isNullOrUndefined(popupWrapper)) {\n var index = parseInt(timePopupElement.style.zIndex, 10) ? parseInt(timePopupElement.style.zIndex, 10) : 1000;\n modal.style.zIndex = (index - 1).toString();\n popupWrapper.style.zIndex = index.toString();\n }\n };\n TimePicker.prototype.formatValues = function (type) {\n var value;\n if (typeof type === 'number') {\n value = formatUnit(type);\n }\n else if (typeof type === 'string') {\n value = (type.match(/px|%|em/)) ? type : isNaN(parseInt(type, 10)) ? type : formatUnit(type);\n }\n return value;\n };\n TimePicker.prototype.popupAlignment = function (args) {\n args.popup.position.X = this.formatValues(args.popup.position.X);\n args.popup.position.Y = this.formatValues(args.popup.position.Y);\n if (!isNaN(parseFloat(args.popup.position.X)) || !isNaN(parseFloat(args.popup.position.Y))) {\n this.popupObj.relateTo = this.anchor = document.body;\n this.popupObj.targetType = 'container';\n }\n if (!isNaN(parseFloat(args.popup.position.X))) {\n this.popupObj.offsetX = parseFloat(args.popup.position.X);\n }\n if (!isNaN(parseFloat(args.popup.position.Y))) {\n this.popupObj.offsetY = parseFloat(args.popup.position.Y);\n }\n if (!Browser.isDevice) {\n switch (args.popup.position.X) {\n case 'left':\n break;\n case 'right':\n args.popup.offsetX = this.containerStyle.width;\n break;\n case 'center':\n args.popup.offsetX = -(this.containerStyle.width / 2);\n break;\n }\n switch (args.popup.position.Y) {\n case 'top':\n break;\n case 'bottom':\n break;\n case 'center':\n args.popup.offsetY = -(this.containerStyle.height / 2);\n break;\n }\n if (args.popup.position.X === 'center' && args.popup.position.Y === 'center') {\n this.popupObj.relateTo = this.inputWrapper.container;\n this.anchor = this.inputElement;\n this.popupObj.targetType = 'relative';\n }\n }\n else {\n if (args.popup.position.X === 'center' && args.popup.position.Y === 'center') {\n this.popupObj.relateTo = this.anchor = document.body;\n this.popupObj.offsetY = 0;\n this.popupObj.targetType = 'container';\n this.popupObj.collision = { X: 'fit', Y: 'fit' };\n }\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets the properties to be maintained upon browser refresh.\n *\n * @returns {string}\n */\n TimePicker.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * To get component name\n *\n * @returns {string} Returns the component name.\n * @private\n */\n TimePicker.prototype.getModuleName = function () {\n return 'timepicker';\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {TimePickerModel} newProp - Returns the dynamic property value of the component.\n * @param {TimePickerModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n TimePicker.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.inputElement);\n this.inputElement.setAttribute('aria-placeholder', newProp.placeholder);\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement, this.floatLabelType);\n if (this.readonly) {\n this.hide();\n }\n this.setTimeAllowEdit();\n break;\n case 'enabled':\n this.setProperties({ enabled: newProp.enabled }, true);\n this.setEnable();\n break;\n case 'allowEdit':\n this.setTimeAllowEdit();\n break;\n case 'enableRtl':\n if (!this.isBlazorServer) {\n this.setProperties({ enableRtl: newProp.enableRtl }, true);\n this.setEnableRtl();\n }\n break;\n case 'cssClass':\n this.updateCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n case 'zIndex':\n this.setProperties({ zIndex: newProp.zIndex }, true);\n this.setZIndex();\n break;\n case 'htmlAttributes':\n this.updateHtmlAttributeToElement();\n this.updateHtmlAttributeToWrapper();\n this.checkAttributes(true);\n break;\n case 'min':\n case 'max':\n if (!this.isBlazorServer) {\n this.getProperty(newProp, prop);\n }\n break;\n case 'showClearButton':\n Input.setClearButton(this.showClearButton, this.inputElement, this.inputWrapper);\n this.bindClearEvent();\n break;\n case 'locale':\n this.setProperties({ locale: newProp.locale }, true);\n this.globalize = new Internationalization(this.locale);\n this.l10n.setLocale(this.locale);\n this.updatePlaceHolder();\n if (!this.isBlazorServer) {\n this.setValue(this.value);\n }\n break;\n case 'width':\n setStyleAttribute(this.inputWrapper.container, { 'width': this.setWidth(newProp.width) });\n this.containerStyle = this.inputWrapper.container.getBoundingClientRect();\n break;\n case 'format':\n this.setProperties({ format: newProp.format }, true);\n this.checkTimeFormat();\n if (!this.isBlazorServer) {\n this.setValue(this.value);\n }\n break;\n case 'value':\n if (!this.isBlazorServer) {\n this.invalidValueString = null;\n this.checkInvalidValue(newProp.value);\n newProp.value = this.value;\n if (!this.invalidValueString) {\n if (typeof newProp.value === 'string') {\n this.setProperties({ value: this.checkDateValue(new Date(newProp.value)) }, true);\n newProp.value = this.value;\n }\n else {\n if ((newProp.value && +new Date(+newProp.value).setMilliseconds(0)) !== +this.value) {\n newProp.value = this.checkDateValue(new Date('' + newProp.value));\n }\n }\n this.initValue = newProp.value;\n newProp.value = this.compareFormatChange(this.checkValue(newProp.value));\n }\n else {\n this.updateInputValue(this.invalidValueString);\n this.checkErrorState(this.invalidValueString);\n }\n this.checkValueChange(null, false);\n if (this.isPopupOpen()) {\n this.setScrollPosition();\n }\n if (this.isAngular && this.preventChange) {\n this.preventChange = false;\n }\n }\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n Input.removeFloating(this.inputWrapper);\n Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);\n break;\n case 'strictMode':\n if (!this.isBlazorServer) {\n this.invalidValueString = null;\n if (newProp.strictMode) {\n this.checkErrorState(null);\n }\n this.setProperties({ strictMode: newProp.strictMode }, true);\n this.checkValue((this.inputElement).value);\n this.checkValueChange(null, false);\n }\n break;\n case 'scrollTo':\n if (!this.isBlazorServer) {\n if (this.checkDateValue(new Date(this.checkInValue(newProp.scrollTo)))) {\n if (this.popupWrapper) {\n this.setScrollTo();\n }\n this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkInValue(newProp.scrollTo))) }, true);\n }\n else {\n this.setProperties({ scrollTo: null }, true);\n }\n }\n else {\n if (this.popupWrapper) {\n this.setScrollTo();\n }\n }\n break;\n }\n }\n };\n TimePicker.prototype.checkInValue = function (inValue) {\n if (inValue instanceof Date) {\n return (inValue.toUTCString());\n }\n else {\n return ('' + inValue);\n }\n };\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], TimePicker.prototype, \"strictMode\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"keyConfigs\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"format\", void 0);\n __decorate([\n Property(true)\n ], TimePicker.prototype, \"enabled\", void 0);\n __decorate([\n Property(false)\n ], TimePicker.prototype, \"readonly\", void 0);\n __decorate([\n Property({})\n ], TimePicker.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property('Never')\n ], TimePicker.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"placeholder\", void 0);\n __decorate([\n Property(1000)\n ], TimePicker.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], TimePicker.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(true)\n ], TimePicker.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(30)\n ], TimePicker.prototype, \"step\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"scrollTo\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"min\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"max\", void 0);\n __decorate([\n Property(true)\n ], TimePicker.prototype, \"allowEdit\", void 0);\n __decorate([\n Property(false)\n ], TimePicker.prototype, \"openOnFocus\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"itemRender\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"cleared\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"focus\", void 0);\n TimePicker = __decorate([\n NotifyPropertyChanges\n ], TimePicker);\n return TimePicker;\n}(Component));\nexport { TimePicker };\n/* eslint-enable @typescript-eslint/no-explicit-any */\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n// eslint-disable-next-line @typescript-eslint/triple-slash-reference\n///
\nimport { EventHandler, 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, isBlazor } from '@syncfusion/ej2-base';\nimport { Popup, isCollide, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { incrementalSearch } from '../common/incremental-search';\nimport { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-base';\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.previousValue = null;\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 var checkBlazor = isBlazor() && this.isServerRendered;\n this.isServerBlazor = (checkBlazor) ? true : false;\n this.valueTempElement = null;\n if (this.isServerBlazor) {\n this.initializeData();\n }\n else {\n this.element.style.opacity = '0';\n this.initializeData();\n _super.prototype.preRender.call(this);\n }\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.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 if (!this.isServerBlazor) {\n _super.prototype.render.call(this, isEmptyData);\n this.unWireListEvents();\n this.wireListEvents();\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.interopAdaptor.invokeMethodAsync('OnServerRenderList', this.beforePopupOpen, false);\n }\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 if (!this.isServerBlazor) {\n this.hiddenElement.innerHTML = '';\n }\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.onBlur = function (e) {\n if (!this.enabled) {\n return;\n }\n var target = e.relatedTarget;\n var currentTarget = e.target;\n var isPreventBlur = this.isPreventBlur;\n this.isPreventBlur = false;\n //IE 11 - issue\n if (isPreventBlur && !this.isDocumentClick && this.isPopupOpen && (!isNullOrUndefined(currentTarget) ||\n !this.isFilterLayout() && isNullOrUndefined(target))) {\n if (this.getModuleName() === 'dropdownlist' && this.allowFiltering && this.isPopupOpen) {\n this.filterInput.focus();\n }\n else {\n this.targetElement().focus();\n }\n return;\n }\n if (this.isDocumentClick || (!isNullOrUndefined(this.popupObj)\n && document.body.contains(this.popupObj.element) &&\n this.popupObj.element.classList.contains(dropDownListClasses.mobileFilter))) {\n if (!this.beforePopupOpen) {\n this.isDocumentClick = false;\n }\n return;\n }\n if (((this.getModuleName() === 'dropdownlist' && !this.isFilterFocus && target !== this.inputElement)\n && (document.activeElement !== target || (document.activeElement === target &&\n currentTarget.classList.contains(dropDownListClasses.inputFocus)))) ||\n (isNullOrUndefined(target) && this.getModuleName() === 'dropdownlist' && this.allowFiltering &&\n currentTarget !== this.inputWrapper.container) || this.getModuleName() !== 'dropdownlist' &&\n !this.inputWrapper.container.contains(target) || this.isTabKey) {\n this.isDocumentClick = this.isPopupOpen ? true : false;\n this.focusOutAction(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.onBlur, this);\n var formElement = closest(this.inputElement, 'form');\n if (formElement) {\n EventHandler.add(formElement, 'reset', this.resetValueHandler, this);\n }\n if (!Browser.isDevice) {\n this.keyboardModule = new KeyboardEvents(this.targetElement(), {\n keyAction: this.keyActionHandler.bind(this), keyConfigs: this.keyConfigure, eventName: 'keydown'\n });\n }\n 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.onBlur);\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 if (!this.isServerBlazor) {\n this.renderList();\n }\n else {\n this.isServerIncrementalSearch = true;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.interopAdaptor.invokeMethodAsync('OnServerRenderList', true, false);\n }\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.isServerBlazor && this.popupObj && this.popupObj.element) ?\n this.popupObj.element.querySelectorAll('.' + dropDownBaseClasses.hover) :\n 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, this.isServerBlazor);\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 (!(this.isServerBlazor && (e.action === 'open' || e.action === 'space')) && isNullOrUndefined(this.list) ||\n (!isNullOrUndefined(this.liCollections) && isNavigation && this.liCollections.length === 0) || this.isRequested) {\n if (!(this.isServerBlazor && isNavAction)) {\n return;\n }\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 if (this.isServerBlazor && isNullOrUndefined(this.list)) {\n this.isServerNavigation = true;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.interopAdaptor.invokeMethodAsync('OnServerRenderList', true, false);\n }\n else {\n this.isServerNavigation = false;\n var focusEle = this.list.querySelector('.' + dropDownListClasses.focus);\n if (this.isSelectFocusItem(focusEle)) {\n this.setSelection(focusEle, e);\n }\n else {\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 };\n DropDownList.prototype.updateHomeEndAction = function (e) {\n if (this.getModuleName() === 'dropdownlist') {\n if (this.isServerBlazor && isNullOrUndefined(this.list)) {\n this.isServerNavigation = true;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.interopAdaptor.invokeMethodAsync('OnServerRenderList', true, false);\n }\n else {\n this.isServerNavigation = false;\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 };\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 = (isBlazor()) ? 1000 : (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 (_this.isServerBlazor) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n _this.interopAdaptor.invokeMethodAsync('OnServerItemData', _this.itemData);\n }\n if (isSelection) {\n _this.setSelectOptions(li, e);\n }\n }\n });\n }\n else {\n this.selectEventCallback(li, e, preventSelect, selectedData, value);\n if (this.isServerBlazor) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.interopAdaptor.invokeMethodAsync('OnServerItemData', this.itemData);\n }\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 if (isBlazor() && dataItem.text !== null || dataItem.text !== '') {\n Input.setValue(dataItem.text, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n else {\n Input.setValue(null, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n }\n else {\n Input.setValue(dataItem.text, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n if (this.isServerBlazor) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.interopAdaptor.invokeMethodAsync('OnServerValueTemplate', dataItem);\n }\n if (this.valueTemplate && this.itemData !== null && !this.isServerBlazor) {\n this.DropDownBaseresetBlazorTemplates(false, false, false, false, true);\n this.setValueTemplate();\n }\n else if (this.inputElement.previousSibling === this.valueTempElement) {\n detach(this.valueTempElement);\n this.inputElement.style.display = 'block';\n }\n if (this.previousValue === dataItem.value) {\n this.isSelected = false;\n return true;\n }\n else {\n this.isSelected = !this.initial ? true : false;\n this.isSelectCustom = false;\n if (this.getModuleName() === 'dropdownlist') {\n this.updateIconState();\n }\n return false;\n }\n };\n DropDownList.prototype.setSelection = function (li, e) {\n if (this.isValidLI(li) && (!li.classList.contains(dropDownBaseClasses.selected) || (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 templateData = (isBlazor()) ? JSON.parse(JSON.stringify(this.itemData)) : this.itemData;\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(templateData, 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 this.DropDownBaseupdateBlazorTemplates(false, false, false, false, true, true, true);\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 };\n if (this.isAngular && this.preventChange) {\n this.preventChange = false;\n }\n else {\n this.trigger('change', eventArgs);\n }\n if (this.isServerBlazor && this.enablePersistence) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.interopAdaptor.invokeMethodAsync('ServerChange');\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.isServerBlazor && 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 if (!this.isServerBlazor) {\n this.hiddenElement.innerHTML = '
';\n var selectedElement = this.hiddenElement.querySelector('option');\n selectedElement.setAttribute('value', this.value.toString());\n }\n }\n else if (!this.isServerBlazor) {\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 if (this.isServerBlazor) {\n this.beforePopupOpen = (this.getModuleName() === 'combobox' && this.isFiltering() && !this.beforePopupOpen)\n ? !this.beforePopupOpen : this.beforePopupOpen;\n if (this.filterInput.value === '' && this.getModuleName() !== 'dropdownlist') {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.interopAdaptor.invokeMethodAsync('OnServerRenderList', this.beforePopupOpen, false);\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.interopAdaptor.invokeMethodAsync('OnServerFilter', this.filterInput.value);\n }\n }\n else {\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 /**\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 if (this.isServerBlazor) {\n parentElement.innerHTML = '';\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.onBlur, 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.serverPopupEle) ? _this.serverPopupEle : _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 && !_this.isServerBlazor) {\n _this.setHeaderTemplate(popupEle);\n }\n append([_this.list], popupEle);\n if (_this.footerTemplate && !_this.isServerBlazor) {\n _this.setFooterTemplate(popupEle);\n }\n if (_this.isServerRendered && popupEle && popupEle.querySelector('.e-ddl-footer')) {\n popupEle.appendChild(popupEle.querySelector('.e-ddl-footer'));\n }\n document.body.appendChild(popupEle);\n _this.updateServerPopup(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 || (_this.isServerRendered && popupEle && popupEle.querySelector('.e-ddl-header'))) {\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 || (_this.isServerRendered && popupEle && popupEle.querySelector('.e-ddl-footer'))) {\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 = (isBlazor() && _this.isServerRendered) ? null : _this.popupObj;\n var eventArgs = { popup: popupInstance, cancel: false, animation: animModel };\n _this.trigger('open', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n _this.serverBlazorUpdateSelection();\n _this.bindServerScrollEvent();\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.serverBlazorUpdateSelection = function () {\n if (this.isServerBlazor && (this.value !== null || this.index !== null || this.text !== null) ||\n (this.getModuleName() !== 'dropdownlist' && !this.isTyped)) {\n if (this.getModuleName() === 'dropdownlist') {\n this.removeSelection();\n this.removeFocus();\n this.removeHover();\n this.updateValues();\n }\n if (this.getModuleName() === 'combobox' && this.ulElement &&\n this.findListElement(this.ulElement, 'li', 'data-value', this.value) && !this.isTyped) {\n this.updateValues();\n }\n if (this.isServerBlazor && this.getModuleName() !== 'dropdownlist' &&\n (this.text === '' || this.text === null) && this.ulElement) {\n if (!this.ulElement.querySelector('li').classList.contains(dropDownBaseClasses.hover)) {\n addClass([this.ulElement.querySelector('li')], dropDownBaseClasses.hover);\n }\n }\n }\n };\n DropDownList.prototype.bindServerScrollEvent = function () {\n if (this.isServerBlazor && this.list) {\n if ((this.fields.groupBy) && !this.isGroupChecking) {\n EventHandler.remove(this.list, 'scroll', this.setFloatingHeader);\n EventHandler.add(this.list, 'scroll', this.setFloatingHeader, this);\n }\n }\n };\n DropDownList.prototype.updateServerPopup = function (popupEle) {\n if (this.isServerBlazor) {\n if (popupEle && popupEle.querySelector('li')) {\n removeClass([popupEle.querySelector('.e-content')], ['e-nodata']);\n }\n this.initial = false;\n popupEle.removeAttribute('style');\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.DropDownBaseresetBlazorTemplates(isResetItem, isResetItem, true, true, false, true, true);\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.onBlur);\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 = (isBlazor() && this.isServerRendered) ? null : 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' && !_this.isServerBlazor) {\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 var popupHolderEle = select('#' + this.element.id + '_popup_holder', document);\n if (this.isServerBlazor && this.serverPopupEle && popupHolderEle) {\n popupHolderEle.appendChild(this.serverPopupEle);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.interopAdaptor.invokeMethodAsync('OnServerClosePopup');\n }\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.isServerBlazor) {\n this.inputElement = this.element;\n this.inputWrapper = { container: this.element.parentElement };\n this.hiddenElement = this.inputWrapper.container.querySelector('select');\n this.inputWrapper.buttons = [this.inputWrapper.container.querySelector('.e-input-group-icon.e-ddl-icon')];\n if (this.showClearButton) {\n this.inputWrapper.clearButton = this.inputWrapper.container.querySelector('.e-clear-icon');\n Input.wireClearBtnEvents(this.element, this.inputWrapper.clearButton, this.inputWrapper.container);\n }\n if (this.floatLabelType === 'Auto') {\n Input.wireFloatingEvents(this.element);\n }\n Input.bindInitialEvent({\n element: this.element,\n buttons: null, customTag: null,\n floatLabelType: this.floatLabelType,\n properties: this.properties\n });\n this.setFields();\n this.wireEvent();\n this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';\n if (!this.enabled) {\n this.targetElement().tabIndex = -1;\n }\n if (this.element.hasAttribute('autofocus')) {\n this.focusIn();\n }\n this.initial = false;\n }\n else {\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.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 }\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 this.DropDownBaseupdateBlazorTemplates(false, false, false, false, false, false, true);\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 this.DropDownBaseupdateBlazorTemplates(false, false, false, false, false, true, false);\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.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 (!(!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 if (!this.isServerBlazor) {\n this.checkData(newProp);\n this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);\n }\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 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 if (!this.isServerBlazor) {\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 if (!this.isServerBlazor) {\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 if (!this.isServerBlazor) {\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.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 (isBlazor() && this.itemTemplate) {\n this.DropDownBaseupdateBlazorTemplates(true, false, false, false);\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 else if (this.isFiltering() && this.isServerBlazor) {\n this.renderList();\n }\n if (!this.isServerBlazor) {\n this.invokeRenderPopup();\n }\n var popupHolderEle = !this.isFiltering() || select('#' + this.element.id + '_popup_holder', document);\n var isDropdownComp = this.getModuleName() === 'dropdownlist' || !this.isFiltering();\n if (this.isServerBlazor && popupHolderEle && !isNullOrUndefined(this.list) && isDropdownComp) {\n this.invokeRenderPopup();\n }\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.clientRenderPopup = function (data, popupEle) {\n if (popupEle) {\n this.serverPopupEle = popupEle;\n this.list = popupEle.querySelector('.e-dropdownbase.e-content') ?\n popupEle.querySelector('.e-dropdownbase.e-content') : this.list;\n this.ulElement = this.list.querySelector('ul');\n if (isNullOrUndefined(this.ulElement) && !this.list.classList.contains(dropDownBaseClasses.noData)) {\n addClass([this.list], [dropDownBaseClasses.noData]);\n }\n this.liCollections = this.ulElement ?\n this.ulElement.querySelectorAll('.' + dropDownBaseClasses.li) : [];\n this.listData = data;\n if (this.getModuleName() === 'autocomplete' && this.liCollections.length > 0) {\n this.renderHightSearch();\n }\n this.initRemoteRender = false;\n if (!this.isPopupOpen) {\n this.serverBlazorUpdateSelection();\n }\n this.unWireListEvents();\n this.wireListEvents();\n if (this.isServerIncrementalSearch && this.searchKeyEvent) {\n this.isServerIncrementalSearch = false;\n this.initial = false;\n this.onServerIncrementalSearch(this.searchKeyEvent);\n }\n if (this.isServerNavigation && this.searchKeyEvent) {\n if (this.searchKeyEvent.action === 'down' || this.searchKeyEvent.action === 'up') {\n this.isServerNavigation = false;\n this.updateUpDownAction(this.searchKeyEvent);\n }\n else if (this.searchKeyEvent.action === 'home' || this.searchKeyEvent.action === 'end') {\n this.isServerNavigation = false;\n this.updateHomeEndAction(this.searchKeyEvent);\n }\n }\n if (this.beforePopupOpen) {\n this.invokeRenderPopup();\n }\n if (this.getModuleName() !== 'dropdownlist') {\n this.onActionComplete(this.ulElement, this.listData);\n }\n }\n else if (data != null && this.listData !== data) {\n this.listData = data;\n this.initRemoteRender = false;\n }\n };\n DropDownList.prototype.renderHightSearch = function () {\n // update high light search\n };\n DropDownList.prototype.updateclientItemData = function (data) {\n this.listData = data;\n };\n DropDownList.prototype.initValueItemData = function (selectData) {\n this.itemData = selectData;\n this.previousValue = this.value;\n this.initial = false;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DropDownList.prototype.serverUpdateListElement = function (data, popupEle) {\n this.listData = data;\n if (this.ulElement) {\n this.liCollections = this.ulElement.querySelectorAll('.' + dropDownBaseClasses.li);\n }\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 var isHeader = (this.headerTemplate) ? true : false;\n var isFooter = (this.headerTemplate) ? true : false;\n this.DropDownBaseresetBlazorTemplates(false, false, false, false, false, isHeader, isFooter);\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 = this.isServerBlazor ? !isNullOrUndefined(this.value) : !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 // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact) {\n this.clearTemplate();\n }\n if (!this.isServerBlazor || (this.popupObj && document.body.contains(this.popupObj.element))) {\n this.hidePopup();\n }\n this.unWireEvent();\n if (this.list) {\n this.unWireListEvents();\n if (this.isServerBlazor) {\n if ((this.fields.groupBy) && !this.isGroupChecking) {\n EventHandler.remove(this.list, 'scroll', this.setFloatingHeader);\n }\n }\n }\n if (!this.isServerBlazor) {\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 };\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 * @blazorType 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};\n// eslint-disable-next-line @typescript-eslint/triple-slash-reference\n///
\nimport { EventHandler, Property, Internationalization, NotifyPropertyChanges, isBlazor } from '@syncfusion/ej2-base';\nimport { KeyboardEvents, Animation, Event, extend, L10n, Browser, formatUnit } from '@syncfusion/ej2-base';\nimport { detach, addClass, removeClass, closest, attributes, select } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, setValue, getUniqueID } from '@syncfusion/ej2-base';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { Calendar } from '../calendar/calendar';\n//class constant defination\nvar DATEWRAPPER = 'e-date-wrapper';\nvar ROOT = 'e-datepicker';\nvar LIBRARY = 'e-lib';\nvar CONTROL = 'e-control';\nvar POPUPWRAPPER = 'e-popup-wrapper';\nvar INPUTWRAPPER = 'e-input-group-icon';\nvar POPUP = 'e-popup';\nvar INPUTCONTAINER = 'e-input-group';\nvar INPUTFOCUS = 'e-input-focus';\nvar INPUTROOT = 'e-input';\nvar ERROR = 'e-error';\nvar ACTIVE = 'e-active';\nvar OVERFLOW = 'e-date-overflow';\nvar DATEICON = 'e-date-icon';\nvar CLEARICON = 'e-clear-icon';\nvar ICONS = 'e-icons';\nvar OPENDURATION = 300;\nvar OFFSETVALUE = 4;\nvar SELECTED = 'e-selected';\nvar FOCUSEDDATE = 'e-focused-date';\nvar NONEDIT = 'e-non-edit';\nvar containerAttr = ['title', 'class', 'style'];\n/**\n * Represents the DatePicker component that allows user to select\n * or enter a date value.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar DatePicker = /** @class */ (function (_super) {\n __extends(DatePicker, _super);\n /**\n * Constructor for creating the widget.\n *\n * @param {DatePickerModel} options - Specifies the DatePicker model.\n * @param {string | HTMLInputElement} element - Specifies the element to render as component.\n * @private\n */\n function DatePicker(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.previousElementValue = '';\n _this.isDateIconClicked = false;\n _this.isAltKeyPressed = false;\n _this.isInteracted = true;\n _this.isBlazorServer = false;\n _this.invalidValueString = null;\n _this.checkPreviousValue = null;\n _this.isAngular = false;\n _this.preventChange = false;\n _this.isIconClicked = false;\n _this.isDynamicValueChanged = false;\n _this.datepickerOptions = options;\n return _this;\n }\n /**\n * To Initialize the control rendering.\n *\n * @returns {void}\n * @private\n */\n DatePicker.prototype.render = function () {\n this.initialize();\n this.bindEvents();\n this.renderComplete();\n if (!this.isBlazorServer) {\n this.setTimeZone(this.serverTimezoneOffset);\n }\n };\n DatePicker.prototype.setTimeZone = function (offsetValue) {\n if (!isNullOrUndefined(this.serverTimezoneOffset) && this.value) {\n var clientTimeZoneDiff = new Date().getTimezoneOffset() / 60;\n var serverTimezoneDiff = offsetValue;\n var timeZoneDiff = serverTimezoneDiff + clientTimeZoneDiff;\n timeZoneDiff = this.isDayLightSaving() ? timeZoneDiff-- : timeZoneDiff;\n this.value = new Date((this.value).getTime() + (timeZoneDiff * 60 * 60 * 1000));\n this.updateInput();\n }\n };\n DatePicker.prototype.isDayLightSaving = function () {\n var firstOffset = new Date(this.value.getFullYear(), 0, 1).getTimezoneOffset();\n var secondOffset = new Date(this.value.getFullYear(), 6, 1).getTimezoneOffset();\n return (this.value.getTimezoneOffset() < Math.max(firstOffset, secondOffset));\n };\n DatePicker.prototype.setAllowEdit = function () {\n if (this.allowEdit) {\n if (!this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n }\n else {\n attributes(this.inputElement, { 'readonly': '' });\n }\n this.updateIconState();\n };\n DatePicker.prototype.updateIconState = function () {\n if (!this.allowEdit && this.inputWrapper && !this.readonly) {\n if (this.inputElement.value === '') {\n removeClass([this.inputWrapper.container], [NONEDIT]);\n }\n else {\n addClass([this.inputWrapper.container], [NONEDIT]);\n }\n }\n else if (this.inputWrapper) {\n removeClass([this.inputWrapper.container], [NONEDIT]);\n }\n };\n DatePicker.prototype.initialize = function () {\n if (!this.isBlazorServer) {\n this.checkInvalidValue(this.value);\n this.createInput();\n this.updateHtmlAttributeToWrapper();\n this.setAllowEdit();\n this.updateInput();\n }\n else {\n var parentElement = this.element.parentElement;\n this.inputWrapper = {\n container: parentElement,\n clearButton: parentElement.querySelector('.' + CLEARICON),\n buttons: [parentElement.querySelector('.' + DATEICON)]\n };\n Input.bindInitialEvent({\n element: this.inputElement,\n floatLabelType: this.floatLabelType\n });\n if (this.showClearButton && this.inputWrapper.clearButton) {\n Input.wireClearBtnEvents(this.inputElement, this.inputWrapper.clearButton, this.inputWrapper.container);\n }\n this.setAllowEdit();\n }\n this.previousElementValue = this.inputElement.value;\n this.previousDate = !isNullOrUndefined(this.value) ? new Date(+this.value) : null;\n this.inputElement.setAttribute('value', this.inputElement.value);\n this.inputValueCopy = this.value;\n };\n DatePicker.prototype.createInput = function () {\n var ariaAttrs = {\n 'aria-live': 'assertive', 'aria-atomic': 'true',\n 'aria-haspopup': 'true', 'aria-activedescendant': 'null',\n 'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false', 'aria-invalid': 'false'\n };\n if (this.getModuleName() === 'datepicker') {\n var l10nLocale = { placeholder: this.placeholder };\n this.globalize = new Internationalization(this.locale);\n this.l10n = new L10n('datepicker', l10nLocale, this.locale);\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n }\n 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 floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.readonly,\n placeholder: this.placeholder,\n cssClass: updatedCssClassValues,\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton\n },\n buttons: [INPUTWRAPPER + ' ' + DATEICON + ' ' + ICONS]\n }, this.createElement);\n this.setWidth(this.width);\n if (this.inputElement.name !== '') {\n this.inputElement.setAttribute('name', '' + this.inputElement.getAttribute('name'));\n }\n else {\n this.inputElement.setAttribute('name', '' + this.element.id);\n }\n attributes(this.inputElement, ariaAttrs);\n if (!this.enabled) {\n this.inputElement.setAttribute('aria-disabled', 'true');\n this.inputElement.tabIndex = -1;\n }\n else {\n this.inputElement.setAttribute('aria-disabled', 'false');\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n }\n Input.addAttributes({ 'aria-label': 'select' }, this.inputWrapper.buttons[0]);\n addClass([this.inputWrapper.container], DATEWRAPPER);\n };\n DatePicker.prototype.updateInput = function (isDynamic) {\n if (isDynamic === void 0) { isDynamic = false; }\n var formatOptions;\n if (this.value && !this.isCalendar() && !isDynamic) {\n if (!this.isBlazorServer) {\n this.disabledDates();\n }\n }\n if (isNaN(+new Date(this.checkValue(this.value)))) {\n this.setProperties({ value: null }, true);\n }\n if (this.strictMode) {\n //calls the Calendar processDate protected method to update the date value according to the strictMode true behaviour.\n _super.prototype.validateDate.call(this);\n this.minMaxUpdates();\n _super.prototype.minMaxUpdate.call(this);\n }\n if (!isNullOrUndefined(this.value)) {\n var dateValue = this.value;\n var dateString = void 0;\n var tempFormat = !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat;\n if (this.getModuleName() === 'datetimepicker') {\n if (this.calendarMode === 'Gregorian') {\n dateString = this.globalize.formatDate(this.value, {\n format: tempFormat, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd'\n });\n }\n else {\n dateString = this.globalize.formatDate(this.value, {\n format: tempFormat, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic'\n });\n }\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };\n }\n else {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n dateString = this.globalize.formatDate(this.value, formatOptions);\n }\n if ((+dateValue <= +this.max) && (+dateValue >= +this.min)) {\n this.updateInputValue(dateString);\n }\n else {\n var value = (+dateValue >= +this.max || !+this.value) || (!+this.value || +dateValue <= +this.min);\n if (!this.strictMode && value) {\n this.updateInputValue(dateString);\n }\n }\n }\n if (isNullOrUndefined(this.value) && this.strictMode) {\n this.updateInputValue('');\n }\n if (!this.strictMode && isNullOrUndefined(this.value) && this.invalidValueString) {\n this.updateInputValue(this.invalidValueString);\n }\n this.changedArgs = { value: this.value };\n this.errorClass();\n this.updateIconState();\n };\n DatePicker.prototype.minMaxUpdates = function () {\n if (!isNullOrUndefined(this.value) && this.value < this.min && this.min <= this.max && this.strictMode) {\n this.setProperties({ value: this.min }, true);\n this.changedArgs = { value: this.value };\n }\n else {\n if (!isNullOrUndefined(this.value) && this.value > this.max && this.min <= this.max && this.strictMode) {\n this.setProperties({ value: this.max }, true);\n this.changedArgs = { value: this.value };\n }\n }\n };\n DatePicker.prototype.checkStringValue = function (val) {\n var returnDate = null;\n var formatOptions = null;\n var formatDateTime = null;\n if (this.getModuleName() === 'datetimepicker') {\n var culture = new Internationalization(this.locale);\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: this.dateTimeFormat, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };\n formatDateTime = { format: culture.getDatePattern({ skeleton: isBlazor() ? 'd' : 'yMd' }), type: 'dateTime' };\n }\n else {\n formatOptions = { format: this.dateTimeFormat, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n formatDateTime = { format: culture.getDatePattern({ skeleton: 'yMd' }), type: 'dateTime', calendar: 'islamic' };\n }\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };\n }\n else {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n }\n returnDate = this.checkDateValue(this.globalize.parseDate(val, formatOptions));\n if (isNullOrUndefined(returnDate) && (this.getModuleName() === 'datetimepicker')) {\n returnDate = this.checkDateValue(this.globalize.parseDate(val, formatDateTime));\n }\n return returnDate;\n };\n DatePicker.prototype.checkInvalidValue = function (value) {\n if (!(value instanceof Date) && !isNullOrUndefined(value)) {\n var valueDate = null;\n var valueString = value;\n if (typeof value === 'number') {\n valueString = value.toString();\n }\n var formatOptions = null;\n var formatDateTime = null;\n if (this.getModuleName() === 'datetimepicker') {\n var culture = new Internationalization(this.locale);\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: this.dateTimeFormat, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };\n formatDateTime = { format: culture.getDatePattern({ skeleton: isBlazor() ? 'd' : 'yMd' }), type: 'dateTime' };\n }\n else {\n formatOptions = { format: this.dateTimeFormat, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n formatDateTime = { format: culture.getDatePattern({ skeleton: 'yMd' }), type: 'dateTime', calendar: 'islamic' };\n }\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n }\n var invalid = false;\n if (typeof valueString !== 'string') {\n valueString = null;\n invalid = true;\n }\n else {\n if (typeof valueString === 'string') {\n valueString = valueString.trim();\n }\n valueDate = this.checkStringValue(valueString);\n if (!valueDate) {\n var extISOString = null;\n var basicISOString = null;\n // eslint-disable-next-line\n extISOString = /^\\s*((?:[+-]\\d{6}|\\d{4})-(?:\\d\\d-\\d\\d|W\\d\\d-\\d|W\\d\\d|\\d\\d\\d|\\d\\d))(?:(T| )(\\d\\d(?::\\d\\d(?::\\d\\d(?:[.,]\\d+)?)?)?)([\\+\\-]\\d\\d(?::?\\d\\d)?|\\s*Z)?)?/;\n // eslint-disable-next-line\n basicISOString = /^\\s*((?:[+-]\\d{6}|\\d{4})(?:\\d\\d\\d\\d|W\\d\\d\\d|W\\d\\d|\\d\\d\\d|\\d\\d))(?:(T| )(\\d\\d(?:\\d\\d(?:\\d\\d(?:[.,]\\d+)?)?)?)([\\+\\-]\\d\\d(?::?\\d\\d)?|\\s*Z)?)?/;\n if ((!extISOString.test(valueString) && !basicISOString.test(valueString))\n || (/^[a-zA-Z0-9- ]*$/).test(valueString) || isNaN(+new Date(this.checkValue(valueString)))) {\n invalid = true;\n }\n else {\n valueDate = new Date(valueString);\n }\n }\n }\n if (invalid) {\n if (!this.strictMode) {\n this.invalidValueString = valueString;\n }\n this.setProperties({ value: null }, true);\n }\n else {\n this.setProperties({ value: valueDate }, true);\n }\n }\n };\n DatePicker.prototype.bindInputEvent = function () {\n if (!isNullOrUndefined(this.formatString)) {\n if (this.formatString.indexOf('y') === -1) {\n EventHandler.add(this.inputElement, 'input', this.inputHandler, this);\n }\n else {\n EventHandler.remove(this.inputElement, 'input', this.inputHandler);\n }\n }\n };\n DatePicker.prototype.bindEvents = function () {\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown touchstart', (this.isBlazorServer ? this.preventEventBubbling : this.dateIconHandler), this);\n EventHandler.add(this.inputElement, 'focus', this.inputFocusHandler, this);\n EventHandler.add(this.inputElement, 'blur', this.inputBlurHandler, this);\n this.bindInputEvent();\n // To prevent the twice triggering.\n EventHandler.add(this.inputElement, 'change', this.inputChangeHandler, this);\n if (this.showClearButton && (this.inputWrapper.clearButton || (this.isBlazorServer))) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler, this);\n }\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', this.resetFormHandler, this);\n }\n this.defaultKeyConfigs = extend(this.defaultKeyConfigs, this.keyConfigs);\n this.keyboardModules = new KeyboardEvents(this.inputElement, {\n eventName: 'keydown',\n keyAction: this.inputKeyActionHandle.bind(this),\n keyConfigs: this.defaultKeyConfigs\n });\n };\n DatePicker.prototype.unBindEvents = function () {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', (this.isBlazorServer ? this.preventEventBubbling : this.dateIconHandler));\n EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);\n EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);\n EventHandler.remove(this.inputElement, 'change', this.inputChangeHandler);\n if (this.showClearButton && (this.inputWrapper.clearButton || (this.isBlazorServer))) {\n EventHandler.remove(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler);\n }\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.resetFormHandler);\n }\n };\n DatePicker.prototype.resetFormHandler = function () {\n if (!this.enabled) {\n return;\n }\n if (!this.inputElement.disabled) {\n var value = this.inputElement.getAttribute('value');\n if (this.element.tagName === 'EJS-DATEPICKER' || this.element.tagName === 'EJS-DATETIMEPICKER') {\n value = '';\n this.inputValueCopy = null;\n this.inputElement.setAttribute('value', '');\n }\n if (!this.isBlazorServer) {\n this.setProperties({ value: this.inputValueCopy }, true);\n this.restoreValue();\n if (this.inputElement) {\n this.updateInputValue(value);\n this.errorClass();\n }\n }\n }\n };\n DatePicker.prototype.restoreValue = function () {\n this.currentDate = this.value ? this.value : new Date();\n this.previousDate = this.value;\n this.previousElementValue = (isNullOrUndefined(this.inputValueCopy)) ? '' :\n this.globalize.formatDate(this.inputValueCopy, {\n format: this.formatString, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd'\n });\n };\n DatePicker.prototype.inputChangeHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n e.stopPropagation();\n };\n DatePicker.prototype.bindClearEvent = function () {\n if (this.showClearButton && this.inputWrapper.clearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler, this);\n }\n };\n DatePicker.prototype.resetHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n e.preventDefault();\n this.clear(e);\n };\n DatePicker.prototype.clear = function (event) {\n if (!this.isBlazorServer) {\n this.setProperties({ value: null }, true);\n }\n this.updateInputValue('');\n var clearedArgs = {\n event: event\n };\n this.trigger('cleared', clearedArgs);\n this.invalidValueString = '';\n if (!this.isBlazorServer) {\n this.updateInput();\n this.popupUpdate();\n this.changeEvent(event);\n }\n if (this.isBlazorServer) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.interopAdaptor.invokeMethodAsync('OnValueCleared');\n }\n };\n DatePicker.prototype.preventEventBubbling = function (e) {\n e.preventDefault();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.interopAdaptor.invokeMethodAsync('OnDateIconClick');\n };\n DatePicker.prototype.updateInputValue = function (value) {\n Input.setValue(value, this.inputElement, this.floatLabelType, this.showClearButton);\n };\n DatePicker.prototype.dateIconHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n this.isIconClicked = true;\n if (Browser.isDevice) {\n this.inputElement.setAttribute('readonly', '');\n this.inputElement.blur();\n }\n if (!this.isBlazorServer) {\n e.preventDefault();\n }\n if (!this.readonly) {\n if (this.isCalendar() && !this.isBlazorServer) {\n this.hide(e);\n }\n else {\n if (!this.isBlazorServer || (this.isBlazorServer && this.inputWrapper.container.nextElementSibling)) {\n this.isDateIconClicked = true;\n this.show(null, e);\n if (this.getModuleName() === 'datetimepicker') {\n this.inputElement.focus();\n }\n this.inputElement.focus();\n addClass([this.inputWrapper.container], [INPUTFOCUS]);\n addClass(this.inputWrapper.buttons, ACTIVE);\n }\n }\n }\n this.isIconClicked = false;\n };\n DatePicker.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 (!isNullOrUndefined(this.htmlAttributes[key])) {\n if (containerAttr.indexOf(key) > -1) {\n if (key === 'class') {\n var updatedClassValues = (this.htmlAttributes[key].replace(/\\s+/g, ' ')).trim();\n if (updatedClassValues !== '') {\n addClass([this.inputWrapper.container], updatedClassValues.split(' '));\n }\n }\n else if (key === 'style') {\n var setStyle = this.inputWrapper.container.getAttribute(key);\n if (!isNullOrUndefined(setStyle)) {\n if (setStyle.charAt(setStyle.length - 1) === ';') {\n setStyle = setStyle + this.htmlAttributes[key];\n }\n else {\n setStyle = setStyle + ';' + this.htmlAttributes[key];\n }\n }\n else {\n setStyle = this.htmlAttributes[key];\n }\n this.inputWrapper.container.setAttribute(key, setStyle);\n }\n else {\n this.inputWrapper.container.setAttribute(key, this.htmlAttributes[key]);\n }\n }\n }\n }\n }\n };\n DatePicker.prototype.updateHtmlAttributeToElement = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var key = _a[_i];\n if (containerAttr.indexOf(key) < 0) {\n this.inputElement.setAttribute(key, this.htmlAttributes[key]);\n }\n }\n }\n };\n DatePicker.prototype.updateCssClass = function (newCssClass, oldCssClass) {\n if (!isNullOrUndefined(oldCssClass)) {\n oldCssClass = (oldCssClass.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(newCssClass)) {\n newCssClass = (newCssClass.replace(/\\s+/g, ' ')).trim();\n }\n Input.setCssClass(newCssClass, [this.inputWrapper.container], oldCssClass);\n if (this.popupWrapper) {\n Input.setCssClass(newCssClass, [this.popupWrapper], oldCssClass);\n }\n };\n DatePicker.prototype.calendarKeyActionHandle = function (e) {\n switch (e.action) {\n case 'escape':\n if (this.isCalendar()) {\n this.hide(e);\n }\n else {\n this.inputWrapper.container.children[this.index].blur();\n }\n break;\n case 'enter':\n if (!this.isCalendar()) {\n this.show(null, e);\n }\n else {\n if (+this.value !== +this.currentDate && !this.isCalendar()) {\n this.inputWrapper.container.children[this.index].focus();\n }\n }\n if (this.getModuleName() === 'datetimepicker') {\n this.inputElement.focus();\n }\n break;\n case 'tab':\n this.hide(e);\n }\n };\n DatePicker.prototype.inputFocusHandler = function () {\n if (!this.enabled) {\n return;\n }\n var focusArguments = {\n model: isBlazor() && this.isServerRendered ? null : this\n };\n this.isDateIconClicked = false;\n this.trigger('focus', focusArguments);\n this.updateIconState();\n if (this.openOnFocus && !this.isIconClicked) {\n this.show();\n }\n };\n DatePicker.prototype.inputHandler = function () {\n this.isPopupClicked = false;\n };\n DatePicker.prototype.inputBlurHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n if (!this.isBlazorServer) {\n this.strictModeUpdate();\n if (this.inputElement.value === '' && isNullOrUndefined(this.value)) {\n this.invalidValueString = null;\n this.updateInputValue('');\n }\n this.updateInput();\n this.popupUpdate();\n this.changeTrigger(e);\n this.errorClass();\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.interopAdaptor.invokeMethodAsync('OnStrictModeUpdate', this.inputElement.value);\n }\n if (this.isCalendar() && document.activeElement === this.inputElement) {\n this.hide(e);\n }\n if (this.getModuleName() === 'datepicker') {\n var blurArguments = {\n model: isBlazor() && this.isServerRendered ? null : this\n };\n this.trigger('blur', blurArguments);\n }\n if (this.isCalendar()) {\n this.defaultKeyConfigs = extend(this.defaultKeyConfigs, this.keyConfigs);\n this.calendarKeyboardModules = new KeyboardEvents(this.calendarElement.children[1].firstElementChild, {\n eventName: 'keydown',\n keyAction: this.calendarKeyActionHandle.bind(this),\n keyConfigs: this.defaultKeyConfigs\n });\n }\n this.isPopupClicked = false;\n };\n DatePicker.prototype.documentHandler = function (e) {\n if ((!isNullOrUndefined(this.popupObj) && (this.inputWrapper.container.contains(e.target) ||\n (this.popupObj.element && this.popupObj.element.contains(e.target)))) && e.type !== 'touchstart') {\n e.preventDefault();\n }\n var target = e.target;\n if (!(closest(target, '.e-datepicker.e-popup-wrapper'))\n && !(closest(target, '.' + INPUTCONTAINER) === this.inputWrapper.container)\n && (!target.classList.contains('e-day'))) {\n this.hide(e);\n this.focusOut();\n }\n else if (closest(target, '.e-datepicker.e-popup-wrapper')) {\n // Fix for close the popup when select the previously selected value.\n if (target.classList.contains('e-day')\n && !isNullOrUndefined(e.target.parentElement)\n && e.target.parentElement.classList.contains('e-selected')\n && closest(target, '.e-content')\n && closest(target, '.e-content').classList.contains('e-' + this.depth.toLowerCase())) {\n this.hide(e);\n }\n else if (closest(target, '.e-footer-container')\n && target.classList.contains('e-today')\n && target.classList.contains('e-btn')\n && (+new Date(+this.value) === +_super.prototype.generateTodayVal.call(this, this.value) && !this.isBlazorServer)) {\n this.hide(e);\n }\n }\n };\n DatePicker.prototype.inputKeyActionHandle = function (e) {\n var clickedView = this.currentView();\n switch (e.action) {\n case 'altUpArrow':\n this.isAltKeyPressed = false;\n this.hide(e);\n this.inputElement.focus();\n break;\n case 'altDownArrow':\n this.isAltKeyPressed = true;\n if (!this.isBlazorServer) {\n this.strictModeUpdate();\n this.updateInput();\n this.changeTrigger(e);\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.interopAdaptor.invokeMethodAsync('OnStrictModeUpdate', this.inputElement.value);\n }\n if (this.getModuleName() === 'datepicker') {\n if (!this.isBlazorServer) {\n this.show(null, e);\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.interopAdaptor.invokeMethodAsync('OnPopupHide', true);\n }\n }\n break;\n case 'escape':\n this.hide(e);\n break;\n case 'enter':\n if (!this.isBlazorServer) {\n this.strictModeUpdate();\n this.updateInput();\n this.popupUpdate();\n this.changeTrigger(e);\n this.errorClass();\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.interopAdaptor.invokeMethodAsync('OnStrictModeUpdate', this.inputElement.value);\n }\n if (!this.isCalendar() && document.activeElement === this.inputElement) {\n this.hide(e);\n }\n if (this.isCalendar()) {\n e.preventDefault();\n e.stopPropagation();\n }\n break;\n case 'tab':\n case 'shiftTab':\n if (!this.isBlazorServer) {\n this.strictModeUpdate();\n this.updateInput();\n this.popupUpdate();\n this.changeTrigger(e);\n this.errorClass();\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.interopAdaptor.invokeMethodAsync('OnStrictModeUpdate', this.inputElement.value);\n }\n this.hide(e);\n break;\n default:\n this.defaultAction(e);\n // Fix for close the popup when select the previously selected value.\n if (e.action === 'select' && clickedView === this.depth) {\n this.hide(e);\n }\n }\n };\n DatePicker.prototype.defaultAction = function (e) {\n this.previousDate = ((!isNullOrUndefined(this.value) && new Date(+this.value)) || null);\n if (this.isCalendar()) {\n _super.prototype.keyActionHandle.call(this, e);\n if (!this.isBlazorServer) {\n attributes(this.inputElement, {\n 'aria-activedescendant': '' + this.setActiveDescendant()\n });\n }\n }\n };\n DatePicker.prototype.popupUpdate = function () {\n if ((isNullOrUndefined(this.value)) && (!isNullOrUndefined(this.previousDate)) ||\n (+this.value !== +this.previousDate)) {\n if (this.popupObj) {\n if (this.popupObj.element.querySelectorAll('.' + SELECTED).length > 0) {\n removeClass(this.popupObj.element.querySelectorAll('.' + SELECTED), [SELECTED]);\n }\n }\n if (!isNullOrUndefined(this.value) && !this.isBlazorServer) {\n if ((+this.value >= +this.min) && (+this.value <= +this.max)) {\n var targetdate = new Date(this.checkValue(this.value));\n _super.prototype.navigateTo.call(this, 'Month', targetdate);\n }\n }\n }\n };\n DatePicker.prototype.strictModeUpdate = function () {\n var format;\n var formatOptions;\n if (this.getModuleName() === 'datetimepicker') {\n format = !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat;\n }\n else {\n format = isNullOrUndefined(this.formatString) ? this.formatString : this.formatString.replace('dd', 'd');\n }\n if (!isNullOrUndefined(format)) {\n var len = format.split('M').length - 1;\n if (len < 3) {\n format = format.replace('MM', 'M');\n }\n }\n var dateOptions;\n if (this.getModuleName() === 'datetimepicker') {\n if (this.calendarMode === 'Gregorian') {\n dateOptions = {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat,\n type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd'\n };\n }\n else {\n dateOptions = {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat,\n type: 'dateTime', skeleton: 'yMd', calendar: 'islamic'\n };\n }\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: format, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };\n }\n else {\n formatOptions = { format: format, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n dateOptions = formatOptions;\n }\n var date;\n if (typeof this.inputElement.value === 'string') {\n this.inputElement.value = this.inputElement.value.trim();\n }\n if ((this.getModuleName() === 'datetimepicker')) {\n if (this.checkDateValue(this.globalize.parseDate(this.inputElement.value, dateOptions))) {\n date = this.globalize.parseDate(this.inputElement.value, dateOptions);\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };\n }\n else {\n formatOptions = { type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n date = this.globalize.parseDate(this.inputElement.value, formatOptions);\n }\n }\n else {\n date = this.globalize.parseDate(this.inputElement.value, dateOptions);\n date = (!isNullOrUndefined(date) && isNaN(+date)) ? null : date;\n if (!isNullOrUndefined(this.formatString) && this.inputElement.value !== '' && this.strictMode) {\n if ((this.isPopupClicked || (!this.isPopupClicked && this.inputElement.value === this.previousElementValue))\n && this.formatString.indexOf('y') === -1) {\n date.setFullYear(this.value.getFullYear());\n }\n }\n }\n // EJ2-35061 - To prevent change event from triggering twice when using strictmode and format property\n if ((this.getModuleName() === 'datepicker') && (this.value && !isNaN(+this.value)) && date) {\n date.setHours(this.value.getHours(), this.value.getMinutes(), this.value.getSeconds(), this.value.getMilliseconds());\n }\n if (this.strictMode && date) {\n this.updateInputValue(this.globalize.formatDate(date, dateOptions));\n if (this.inputElement.value !== this.previousElementValue) {\n this.setProperties({ value: date }, true);\n }\n }\n else if (!this.strictMode) {\n if (this.inputElement.value !== this.previousElementValue) {\n this.setProperties({ value: date }, true);\n }\n }\n if (this.strictMode && !date && this.inputElement.value === '') {\n this.setProperties({ value: null }, true);\n }\n if (isNaN(+this.value)) {\n this.setProperties({ value: null }, true);\n }\n if (isNullOrUndefined(this.value)) {\n this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));\n }\n };\n DatePicker.prototype.createCalendar = function () {\n var _this = this;\n if (!this.isBlazorServer) {\n this.popupWrapper = this.createElement('div', { className: '' + ROOT + ' ' + POPUPWRAPPER });\n if (!isNullOrUndefined(this.cssClass)) {\n this.popupWrapper.className += ' ' + this.cssClass;\n }\n }\n else {\n this.popupWrapper = this.inputWrapper.container.nextElementSibling;\n this.calendarElement = this.popupWrapper.firstElementChild;\n this.tableBodyElement = select('tbody', this.calendarElement);\n this.contentElement = select('.e-content', this.calendarElement);\n }\n if (Browser.isDevice) {\n this.modelHeader();\n this.modal = this.createElement('div');\n this.modal.className = '' + ROOT + ' e-date-modal';\n document.body.className += ' ' + OVERFLOW;\n this.modal.style.display = 'block';\n document.body.appendChild(this.modal);\n }\n //this.calendarElement represent the Calendar object from the Calendar class.\n this.calendarElement.querySelector('table tbody').className = '';\n this.popupObj = new Popup(this.popupWrapper, {\n content: this.isBlazorServer ? null : this.calendarElement,\n relateTo: Browser.isDevice ? document.body : this.inputWrapper.container,\n position: Browser.isDevice ? { X: 'center', Y: 'center' } : { X: 'left', Y: 'bottom' },\n offsetY: OFFSETVALUE,\n targetType: 'container',\n enableRtl: this.enableRtl,\n zIndex: this.zIndex,\n collision: Browser.isDevice ? { X: 'fit', Y: 'fit' } : { X: 'flip', Y: 'flip' },\n open: function () {\n if (_this.getModuleName() !== 'datetimepicker') {\n if (document.activeElement !== _this.inputElement) {\n _this.defaultKeyConfigs = extend(_this.defaultKeyConfigs, _this.keyConfigs);\n _this.calendarElement.children[1].firstElementChild.focus();\n _this.calendarKeyboardModules = new KeyboardEvents(_this.calendarElement.children[1].firstElementChild, {\n eventName: 'keydown',\n keyAction: _this.calendarKeyActionHandle.bind(_this),\n keyConfigs: _this.defaultKeyConfigs\n });\n _this.calendarKeyboardModules = new KeyboardEvents(_this.inputWrapper.container.children[_this.index], {\n eventName: 'keydown',\n keyAction: _this.calendarKeyActionHandle.bind(_this),\n keyConfigs: _this.defaultKeyConfigs\n });\n }\n }\n }, close: function () {\n if (_this.isDateIconClicked) {\n _this.inputWrapper.container.children[_this.index].focus();\n }\n if (_this.value && !_this.isBlazorServer) {\n _this.disabledDates();\n }\n if (_this.popupObj) {\n _this.popupObj.destroy();\n }\n _this.resetCalendar();\n detach(_this.popupWrapper);\n _this.popupObj = _this.popupWrapper = null;\n _this.preventArgs = null;\n _this.calendarKeyboardModules = null;\n _this.setAriaAttributes();\n }, targetExitViewport: function () {\n if (!Browser.isDevice) {\n _this.hide();\n }\n }\n });\n if (!this.isBlazorServer) {\n this.popupObj.element.className += ' ' + this.cssClass;\n }\n this.setAriaAttributes();\n };\n DatePicker.prototype.setAriaDisabled = function () {\n if (!this.enabled) {\n this.inputElement.setAttribute('aria-disabled', 'true');\n this.inputElement.tabIndex = -1;\n }\n else {\n this.inputElement.setAttribute('aria-disabled', 'false');\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n }\n };\n DatePicker.prototype.modelHeader = function () {\n var dateOptions;\n var modelHeader = this.createElement('div', { className: 'e-model-header' });\n var yearHeading = this.createElement('h1', { className: 'e-model-year' });\n var h2 = this.createElement('div');\n var daySpan = this.createElement('span', { className: 'e-model-day' });\n var monthSpan = this.createElement('span', { className: 'e-model-month' });\n if (this.calendarMode === 'Gregorian') {\n dateOptions = { format: 'y', skeleton: 'dateTime' };\n }\n else {\n dateOptions = { format: 'y', skeleton: 'dateTime', calendar: 'islamic' };\n }\n yearHeading.textContent = '' + this.globalize.formatDate(this.value || new Date(), dateOptions);\n if (this.calendarMode === 'Gregorian') {\n dateOptions = { format: 'E', skeleton: 'dateTime' };\n }\n else {\n dateOptions = { format: 'E', skeleton: 'dateTime', calendar: 'islamic' };\n }\n daySpan.textContent = '' + this.globalize.formatDate(this.value || new Date(), dateOptions) + ', ';\n if (this.calendarMode === 'Gregorian') {\n dateOptions = { format: 'MMM d', skeleton: 'dateTime' };\n }\n else {\n dateOptions = { format: 'MMM d', skeleton: 'dateTime', calendar: 'islamic' };\n }\n monthSpan.textContent = '' + this.globalize.formatDate(this.value || new Date(), dateOptions);\n modelHeader.appendChild(yearHeading);\n h2.appendChild(daySpan);\n h2.appendChild(monthSpan);\n modelHeader.appendChild(h2);\n this.calendarElement.insertBefore(modelHeader, this.calendarElement.firstElementChild);\n };\n DatePicker.prototype.changeTrigger = function (event) {\n if (this.inputElement.value !== this.previousElementValue) {\n if (((this.previousDate && this.previousDate.valueOf()) !== (this.value && this.value.valueOf()))) {\n if (this.isDynamicValueChanged && this.isCalendar()) {\n this.popupUpdate();\n }\n this.changedArgs.value = this.value;\n this.changedArgs.event = event || null;\n this.changedArgs.element = this.element;\n this.changedArgs.isInteracted = !isNullOrUndefined(event);\n if (this.isAngular && this.preventChange) {\n this.preventChange = false;\n }\n else {\n this.trigger('change', this.changedArgs);\n }\n this.previousElementValue = this.inputElement.value;\n this.previousDate = !isNaN(+new Date(this.checkValue(this.value))) ? new Date(this.checkValue(this.value)) : null;\n this.isInteracted = true;\n }\n }\n };\n DatePicker.prototype.navigatedEvent = function () {\n this.trigger('navigated', this.navigatedArgs);\n };\n DatePicker.prototype.changeEvent = function (event) {\n if (((this.previousDate && this.previousDate.valueOf()) !== (this.value && this.value.valueOf()))) {\n this.selectCalendar(event);\n this.changedArgs.event = event ? event : null;\n this.changedArgs.element = this.element;\n this.changedArgs.isInteracted = this.isInteracted;\n if (!this.isDynamicValueChanged) {\n this.trigger('change', this.changedArgs);\n }\n this.previousDate = this.value && new Date(+this.value);\n if (!this.isDynamicValueChanged) {\n this.hide(event);\n }\n this.previousElementValue = this.inputElement.value;\n this.errorClass();\n }\n };\n DatePicker.prototype.requiredModules = function () {\n var modules = [];\n if (this) {\n modules.push({ args: [this], member: 'islamic' });\n }\n return modules;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DatePicker.prototype.selectCalendar = function (e) {\n var date;\n var tempFormat;\n var formatOptions;\n if (this.getModuleName() === 'datetimepicker') {\n tempFormat = !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat;\n }\n else {\n tempFormat = this.formatString;\n }\n if (this.value) {\n if (this.getModuleName() === 'datetimepicker') {\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: tempFormat, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };\n }\n else {\n formatOptions = { format: tempFormat, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n date = this.globalize.formatDate(this.changedArgs.value, formatOptions);\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };\n }\n else {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n date = this.globalize.formatDate(this.changedArgs.value, formatOptions);\n }\n }\n if (!isNullOrUndefined(date)) {\n this.updateInputValue(date);\n }\n };\n DatePicker.prototype.isCalendar = function () {\n if (this.popupWrapper && this.popupWrapper.classList.contains('' + POPUPWRAPPER)) {\n return true;\n }\n return false;\n };\n DatePicker.prototype.setWidth = function (width) {\n if (typeof width === 'number') {\n this.inputWrapper.container.style.width = formatUnit(this.width);\n }\n else if (typeof width === 'string') {\n this.inputWrapper.container.style.width = (width.match(/px|%|em/)) ? (this.width) : (formatUnit(this.width));\n }\n else {\n this.inputWrapper.container.style.width = '100%';\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Shows the Calendar.\n *\n * @returns {void}\n\n */\n DatePicker.prototype.show = function (type, e) {\n var _this = this;\n if ((this.enabled && this.readonly) || !this.enabled || this.popupObj) {\n return;\n }\n else {\n var prevent_1 = true;\n var outOfRange = void 0;\n if (!isNullOrUndefined(this.value) && !(+this.value >= +this.min && +this.value <= +this.max)) {\n outOfRange = new Date(this.checkValue(this.value));\n if (!this.isBlazorServer) {\n this.setProperties({ 'value': null }, true);\n }\n }\n else {\n outOfRange = this.value || null;\n }\n if (!this.isCalendar()) {\n if (!this.isBlazorServer) {\n _super.prototype.render.call(this);\n this.setProperties({ 'value': outOfRange || null }, true);\n }\n this.previousDate = outOfRange;\n this.createCalendar();\n }\n if (Browser.isDevice) {\n this.mobilePopupWrapper = this.createElement('div', { className: 'e-datepick-mob-popup-wrap' });\n document.body.appendChild(this.mobilePopupWrapper);\n }\n this.preventArgs = {\n preventDefault: function () {\n prevent_1 = false;\n },\n popup: isBlazor() && this.isServerRendered ? null : this.popupObj,\n event: e || null,\n cancel: false,\n appendTo: Browser.isDevice ? this.mobilePopupWrapper : document.body\n };\n var eventArgs = this.preventArgs;\n this.trigger('open', eventArgs, function (eventArgs) {\n _this.preventArgs = eventArgs;\n if (prevent_1 && !_this.preventArgs.cancel) {\n if (_this.isBlazorServer) {\n _this.popupWrapper.style.visibility = '';\n _this.popupWrapper.style.width = 'auto';\n _this.popupWrapper.style.height = 'auto';\n }\n addClass(_this.inputWrapper.buttons, ACTIVE);\n _this.preventArgs.appendTo.appendChild(_this.popupWrapper);\n _this.popupObj.refreshPosition(_this.inputElement);\n var openAnimation = {\n name: 'FadeIn',\n duration: Browser.isDevice ? 0 : OPENDURATION\n };\n if (_this.zIndex === 1000) {\n _this.popupObj.show(new Animation(openAnimation), _this.element);\n }\n else {\n _this.popupObj.show(new Animation(openAnimation), null);\n }\n if (!_this.isBlazorServer) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n _super.prototype.setOverlayIndex.call(_this, _this.mobilePopupWrapper, _this.popupObj.element, _this.modal, Browser.isDevice);\n }\n _this.setAriaAttributes();\n }\n else {\n _this.popupObj.destroy();\n if (_this.isBlazorServer) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n _this.interopAdaptor.invokeMethodAsync('OnPopupHide', false);\n }\n _this.popupWrapper = _this.popupObj = null;\n }\n if (!isNullOrUndefined(_this.inputElement) && _this.inputElement.value === '') {\n if (!isNullOrUndefined(_this.tableBodyElement) && _this.tableBodyElement.querySelectorAll('td.e-selected').length > 0) {\n addClass([_this.tableBodyElement.querySelector('td.e-selected')], FOCUSEDDATE);\n removeClass(_this.tableBodyElement.querySelectorAll('td.e-selected'), SELECTED);\n }\n }\n EventHandler.add(document, 'mousedown touchstart', _this.documentHandler, _this);\n });\n }\n };\n /**\n * Hide the Calendar.\n *\n * @returns {void}\n\n */\n DatePicker.prototype.hide = function (event) {\n var _this = this;\n if (!isNullOrUndefined(this.popupWrapper)) {\n var prevent_2 = true;\n this.preventArgs = {\n preventDefault: function () {\n prevent_2 = false;\n },\n popup: isBlazor() && this.isServerRendered ? null : this.popupObj,\n event: event || null,\n cancel: false\n };\n removeClass(this.inputWrapper.buttons, ACTIVE);\n removeClass([document.body], OVERFLOW);\n var eventArgs = this.preventArgs;\n if (this.isCalendar()) {\n this.trigger('close', eventArgs, function (eventArgs) {\n _this.closeEventCallback(prevent_2, eventArgs);\n });\n }\n else {\n this.closeEventCallback(prevent_2, 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 /* eslint-enable valid-jsdoc, jsdoc/require-param */\n DatePicker.prototype.closeEventCallback = function (prevent, eventArgs) {\n this.preventArgs = eventArgs;\n if (this.isCalendar() && (prevent && !this.preventArgs.cancel)) {\n if (!this.isBlazorServer) {\n this.popupObj.hide();\n this.isAltKeyPressed = false;\n this.keyboardModule.destroy();\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.interopAdaptor.invokeMethodAsync('OnPopupHide', false);\n this.isAltKeyPressed = false;\n this.popupWrapper = this.popupObj = null;\n }\n removeClass(this.inputWrapper.buttons, ACTIVE);\n }\n this.setAriaAttributes();\n if (Browser.isDevice && this.modal) {\n this.modal.style.display = 'none';\n this.modal.outerHTML = '';\n this.modal = null;\n }\n if (Browser.isDevice) {\n if (!isNullOrUndefined(this.mobilePopupWrapper)) {\n this.mobilePopupWrapper.remove();\n this.mobilePopupWrapper = null;\n }\n }\n EventHandler.remove(document, 'mousedown touchstart', this.documentHandler);\n if (Browser.isDevice && this.allowEdit && !this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n this.setAllowEdit();\n };\n /* eslint-disable jsdoc/require-param */\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DatePicker.prototype.focusIn = function (triggerEvent) {\n if (document.activeElement !== this.inputElement && this.enabled) {\n this.inputElement.focus();\n addClass([this.inputWrapper.container], [INPUTFOCUS]);\n }\n };\n /* eslint-enable jsdoc/require-param */\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n DatePicker.prototype.focusOut = function () {\n if (document.activeElement === this.inputElement) {\n removeClass([this.inputWrapper.container], [INPUTFOCUS]);\n this.inputElement.blur();\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets the current view of the DatePicker.\n *\n * @returns {string}\n\n */\n DatePicker.prototype.currentView = function () {\n var currentView;\n if (this.calendarElement) {\n // calls the Calendar currentView public method\n currentView = _super.prototype.currentView.call(this);\n }\n return currentView;\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Navigates to specified month or year or decade view of the DatePicker.\n *\n * @param {string} view - Specifies the view of the calendar.\n * @param {Date} date - Specifies the focused date in a view.\n * @returns {void}\n\n */\n DatePicker.prototype.navigateTo = function (view, date) {\n if (this.calendarElement) {\n // calls the Calendar navigateTo public method\n _super.prototype.navigateTo.call(this, view, date);\n }\n };\n /**\n * To destroy the widget.\n *\n * @returns {void}\n */\n DatePicker.prototype.destroy = function () {\n this.unBindEvents();\n if (!this.isBlazorServer) {\n _super.prototype.destroy.call(this);\n this.keyboardModules.destroy();\n if (this.popupObj && this.popupObj.element.classList.contains(POPUP)) {\n _super.prototype.destroy.call(this);\n }\n }\n var ariaAttrs = {\n 'aria-live': 'assertive', 'aria-atomic': 'true', 'aria-disabled': 'true',\n 'aria-haspopup': 'true', 'aria-activedescendant': 'null',\n 'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false'\n };\n if (this.inputElement) {\n Input.removeAttributes(ariaAttrs, this.inputElement);\n if (!isNullOrUndefined(this.inputElementCopy.getAttribute('tabindex'))) {\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.inputElement.removeAttribute('tabindex');\n }\n EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);\n EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);\n this.ensureInputAttribute();\n }\n if (this.isCalendar()) {\n if (this.popupWrapper) {\n detach(this.popupWrapper);\n }\n this.popupObj = this.popupWrapper = null;\n if (!this.isBlazorServer) {\n this.keyboardModule.destroy();\n }\n }\n if (this.ngTag === null) {\n if (this.inputElement) {\n this.inputWrapper.container.insertAdjacentElement('afterend', this.inputElement);\n removeClass([this.inputElement], [INPUTROOT]);\n }\n removeClass([this.element], [ROOT]);\n detach(this.inputWrapper.container);\n }\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.resetFormHandler);\n }\n };\n DatePicker.prototype.ensureInputAttribute = function () {\n var prop = [];\n for (var i = 0; i < this.inputElement.attributes.length; i++) {\n prop[i] = this.inputElement.attributes[i].name;\n }\n for (var i = 0; i < prop.length; i++) {\n if (isNullOrUndefined(this.inputElementCopy.getAttribute(prop[i]))) {\n if (prop[i].toLowerCase() === 'value') {\n this.inputElement.value = '';\n }\n this.inputElement.removeAttribute(prop[i]);\n }\n else {\n if (prop[i].toLowerCase() === 'value') {\n this.inputElement.value = this.inputElementCopy.getAttribute(prop[i]);\n }\n this.inputElement.setAttribute(prop[i], this.inputElementCopy.getAttribute(prop[i]));\n }\n }\n };\n /**\n * Initialize the event handler\n *\n * @returns {void}\n * @private\n */\n DatePicker.prototype.preRender = function () {\n this.inputElementCopy = this.element.cloneNode(true);\n removeClass([this.inputElementCopy], [ROOT, CONTROL, LIBRARY]);\n this.inputElement = this.element;\n this.formElement = closest(this.inputElement, 'form');\n this.index = this.showClearButton ? 2 : 1;\n this.isBlazorServer = (isBlazor() && this.isServerRendered && this.getModuleName() === 'datepicker') ? true : false;\n if (!this.isBlazorServer) {\n this.ngTag = null;\n if (this.element.tagName === 'EJS-DATEPICKER' || this.element.tagName === 'EJS-DATETIMEPICKER') {\n this.ngTag = this.element.tagName;\n this.inputElement = this.createElement('input');\n this.element.appendChild(this.inputElement);\n }\n if (this.element.getAttribute('id')) {\n if (this.ngTag !== null) {\n this.inputElement.id = this.element.getAttribute('id') + '_input';\n }\n }\n else {\n if (this.getModuleName() === 'datetimepicker') {\n this.element.id = getUniqueID('ej2-datetimepicker');\n if (this.ngTag !== null) {\n attributes(this.inputElement, { 'id': this.element.id + '_input' });\n }\n }\n else {\n this.element.id = getUniqueID('ej2-datepicker');\n if (this.ngTag !== null) {\n attributes(this.inputElement, { 'id': this.element.id + '_input' });\n }\n }\n }\n if (this.ngTag !== null) {\n this.validationAttribute(this.element, this.inputElement);\n }\n this.updateHtmlAttributeToElement();\n }\n this.defaultKeyConfigs = this.getDefaultKeyConfig();\n this.checkHtmlAttributes(false);\n this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';\n if (!this.isBlazorServer) {\n this.element.removeAttribute('tabindex');\n _super.prototype.preRender.call(this);\n }\n };\n DatePicker.prototype.getDefaultKeyConfig = function () {\n this.defaultKeyConfigs = {\n altUpArrow: 'alt+uparrow',\n altDownArrow: 'alt+downarrow',\n escape: 'escape',\n enter: 'enter',\n controlUp: 'ctrl+38',\n controlDown: 'ctrl+40',\n moveDown: 'downarrow',\n moveUp: 'uparrow',\n moveLeft: 'leftarrow',\n moveRight: 'rightarrow',\n select: 'enter',\n home: 'home',\n end: 'end',\n pageUp: 'pageup',\n pageDown: 'pagedown',\n shiftPageUp: 'shift+pageup',\n shiftPageDown: 'shift+pagedown',\n controlHome: 'ctrl+home',\n controlEnd: 'ctrl+end',\n shiftTab: 'shift+tab',\n tab: 'tab'\n };\n return this.defaultKeyConfigs;\n };\n DatePicker.prototype.validationAttribute = function (target, inputElement) {\n var nameAttribute = target.getAttribute('name') ? target.getAttribute('name') : target.getAttribute('id');\n inputElement.setAttribute('name', nameAttribute);\n target.removeAttribute('name');\n var attribute = ['required', 'aria-required', 'form'];\n for (var i = 0; i < attribute.length; i++) {\n if (isNullOrUndefined(target.getAttribute(attribute[i]))) {\n continue;\n }\n var attr = target.getAttribute(attribute[i]);\n inputElement.setAttribute(attribute[i], attr);\n target.removeAttribute(attribute[i]);\n }\n };\n DatePicker.prototype.checkFormat = function () {\n var culture = new Internationalization(this.locale);\n if (this.format) {\n if (typeof this.format === 'string') {\n this.formatString = isBlazor() ? this.format.replace(/tt/, 'a') : this.format;\n }\n else if (this.format.skeleton !== '' && !isNullOrUndefined(this.format.skeleton)) {\n var skeletonString = this.format.skeleton;\n if (this.getModuleName() === 'datetimepicker') {\n this.formatString = culture.getDatePattern({ skeleton: skeletonString, type: 'dateTime' });\n }\n else {\n this.formatString = culture.getDatePattern({ skeleton: skeletonString, type: 'date' });\n }\n }\n else {\n if (this.getModuleName() === 'datetimepicker') {\n this.formatString = this.dateTimeFormat;\n }\n else {\n this.formatString = null;\n }\n }\n }\n else {\n this.formatString = null;\n }\n };\n DatePicker.prototype.checkHtmlAttributes = function (dynamic) {\n this.globalize = new Internationalization(this.locale);\n this.checkFormat();\n this.checkView();\n var attributes = dynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['value', 'min', 'max', 'disabled', 'readonly', 'style', 'name', 'placeholder', 'type'];\n var options;\n if (this.getModuleName() === 'datetimepicker') {\n if (this.calendarMode === 'Gregorian') {\n options = {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat,\n type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd'\n };\n }\n else {\n options = {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat,\n type: 'dateTime', skeleton: 'yMd', calendar: 'islamic'\n };\n }\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n options = { format: this.formatString, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };\n }\n else {\n options = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n }\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.inputElement.getAttribute(prop))) {\n switch (prop) {\n case 'disabled':\n if (((isNullOrUndefined(this.datepickerOptions) || (this.datepickerOptions['enabled'] === undefined)) || dynamic) &&\n !this.isBlazorServer) {\n var enabled = this.inputElement.getAttribute(prop) === 'disabled' ||\n this.inputElement.getAttribute(prop) === '' ||\n this.inputElement.getAttribute(prop) === 'true' ? false : true;\n this.setProperties({ enabled: enabled }, !dynamic);\n }\n break;\n case 'readonly':\n if (((isNullOrUndefined(this.datepickerOptions) || (this.datepickerOptions['readonly'] === undefined)) || dynamic) &&\n !this.isBlazorServer) {\n var readonly = this.inputElement.getAttribute(prop) === 'readonly' ||\n this.inputElement.getAttribute(prop) === '' || this.inputElement.getAttribute(prop) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !dynamic);\n }\n break;\n case 'placeholder':\n if (((isNullOrUndefined(this.datepickerOptions) || (this.datepickerOptions['placeholder'] === undefined)) || dynamic) &&\n !this.isBlazorServer) {\n this.setProperties({ placeholder: this.inputElement.getAttribute(prop) }, !dynamic);\n }\n break;\n case 'style':\n if (!this.isBlazorServer) {\n this.inputElement.setAttribute('style', '' + this.inputElement.getAttribute(prop));\n }\n break;\n case 'name':\n if (!this.isBlazorServer) {\n this.inputElement.setAttribute('name', '' + this.inputElement.getAttribute(prop));\n }\n break;\n case 'value':\n if (((isNullOrUndefined(this.datepickerOptions) || (this.datepickerOptions['value'] === undefined)) || dynamic) &&\n !this.isBlazorServer) {\n var value = this.inputElement.getAttribute(prop);\n this.setProperties(setValue(prop, this.globalize.parseDate(value, options), {}), !dynamic);\n }\n break;\n case 'min':\n if ((+this.min === +new Date(1900, 0, 1)) || dynamic) {\n var min = this.inputElement.getAttribute(prop);\n this.setProperties(setValue(prop, this.globalize.parseDate(min), {}), !dynamic);\n }\n break;\n case 'max':\n if ((+this.max === +new Date(2099, 11, 31)) || dynamic) {\n var max = this.inputElement.getAttribute(prop);\n this.setProperties(setValue(prop, this.globalize.parseDate(max), {}), !dynamic);\n }\n break;\n case 'type':\n if (this.inputElement.getAttribute(prop) !== 'text' && !this.isBlazorServer) {\n this.inputElement.setAttribute('type', 'text');\n }\n break;\n }\n }\n }\n };\n /**\n * To get component name.\n *\n * @returns {string} Returns the component name.\n * @private\n */\n DatePicker.prototype.getModuleName = function () {\n return 'datepicker';\n };\n DatePicker.prototype.disabledDates = function () {\n var formatOptions;\n var globalize;\n var valueCopy = this.checkDateValue(this.value) ? new Date(+this.value) : new Date(this.checkValue(this.value));\n var previousValCopy = this.previousDate;\n //calls the Calendar render method to check the disabled dates through renderDayCell event and update the input value accordingly.\n this.minMaxUpdates();\n if (!this.isBlazorServer) {\n _super.prototype.render.call(this);\n }\n this.previousDate = previousValCopy;\n var date = valueCopy && +(valueCopy);\n var dateIdString = '*[id^=\"/id\"]'.replace('/id', '' + date);\n if (!this.strictMode) {\n if (typeof this.value === 'string' || ((typeof this.value === 'object') && (+this.value) !== (+valueCopy))) {\n this.setProperties({ value: valueCopy }, true);\n }\n }\n if (!isNullOrUndefined(this.calendarElement.querySelectorAll(dateIdString)[0])) {\n if (this.calendarElement.querySelectorAll(dateIdString)[0].classList.contains('e-disabled')) {\n if (!this.strictMode) {\n this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));\n }\n }\n }\n var inputVal;\n if (this.getModuleName() === 'datetimepicker') {\n if (this.calendarMode === 'Gregorian') {\n globalize = this.globalize.formatDate(valueCopy, {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat,\n type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd'\n });\n }\n else {\n globalize = this.globalize.formatDate(valueCopy, {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat,\n type: 'dateTime', skeleton: 'yMd', calendar: 'islamic'\n });\n }\n inputVal = globalize;\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };\n }\n else {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n inputVal = this.globalize.formatDate(valueCopy, formatOptions);\n }\n if (!this.popupObj) {\n this.updateInputValue(inputVal);\n }\n };\n DatePicker.prototype.setAriaAttributes = function () {\n if (this.isBlazorServer) {\n if (this.isCalendar()) {\n var focusedEle = this.tableBodyElement.querySelector('tr td.e-focused-date');\n var selectedEle = this.tableBodyElement.querySelector('tr td.e-selected');\n var id = (focusedEle || selectedEle) ? (focusedEle || selectedEle).getAttribute('id') : 'null';\n attributes(this.inputElement, { 'aria-activedescendant': '' + id });\n }\n else {\n attributes(this.inputElement, { 'aria-activedescendant': 'null' });\n }\n }\n else {\n if (this.isCalendar()) {\n Input.addAttributes({ 'aria-expanded': 'true' }, this.inputElement);\n attributes(this.inputElement, { 'aria-activedescendant': '' + this.setActiveDescendant() });\n }\n else {\n Input.addAttributes({ 'aria-expanded': 'false' }, this.inputElement);\n attributes(this.inputElement, { 'aria-activedescendant': 'null' });\n }\n }\n };\n DatePicker.prototype.errorClass = function () {\n var dateIdString = '*[id^=\"/id\"]'.replace('/id', '' + (+this.value));\n var isDisabledDate = this.calendarElement &&\n this.calendarElement.querySelectorAll(dateIdString)[0] &&\n this.calendarElement.querySelectorAll(dateIdString)[0].classList.contains('e-disabled');\n if ((!isNullOrUndefined(this.value) && !(+new Date(+this.value).setMilliseconds(0) >= +this.min\n && +new Date(+this.value).setMilliseconds(0) <= +this.max))\n || (!this.strictMode && this.inputElement.value !== '' && isNullOrUndefined(this.value) || isDisabledDate)) {\n addClass([this.inputWrapper.container], ERROR);\n attributes(this.inputElement, { 'aria-invalid': 'true' });\n }\n else {\n removeClass([this.inputWrapper.container], ERROR);\n attributes(this.inputElement, { 'aria-invalid': 'false' });\n }\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {DatePickerModel} newProp - Returns the dynamic property value of the component.\n * @param {DatePickerModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n DatePicker.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.isInteracted = false;\n this.invalidValueString = null;\n if (!this.isBlazorServer) {\n this.checkInvalidValue(newProp.value);\n }\n newProp.value = this.value;\n this.previousElementValue = this.inputElement.value;\n if (!this.isBlazorServer) {\n if (isNullOrUndefined(this.value)) {\n this.updateInputValue('');\n this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));\n }\n this.updateInput(true);\n if (+this.previousDate !== +this.value) {\n this.changeTrigger(null);\n }\n }\n this.isInteracted = true;\n this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;\n break;\n case 'format':\n this.checkFormat();\n this.bindInputEvent();\n if (!this.isBlazorServer) {\n this.updateInput();\n }\n break;\n case 'allowEdit':\n this.setAllowEdit();\n break;\n case 'placeholder':\n Input.setPlaceholder(this.placeholder, this.inputElement);\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement);\n break;\n case 'enabled':\n Input.setEnabled(this.enabled, this.inputElement);\n this.setAriaDisabled();\n break;\n case 'htmlAttributes':\n this.updateHtmlAttributeToElement();\n this.updateHtmlAttributeToWrapper();\n this.checkHtmlAttributes(true);\n break;\n case 'locale':\n this.globalize = new Internationalization(this.locale);\n this.l10n.setLocale(this.locale);\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n Input.setPlaceholder(this.placeholder, this.inputElement);\n if (!this.isBlazorServer) {\n this.updateInput();\n }\n break;\n case 'enableRtl':\n Input.setEnableRtl(this.enableRtl, [this.inputWrapper.container]);\n break;\n case 'start':\n case 'depth':\n this.checkView();\n if (this.calendarElement && !this.isBlazorServer) {\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp);\n }\n break;\n case 'zIndex':\n this.setProperties({ zIndex: newProp.zIndex }, true);\n break;\n case 'cssClass':\n this.updateCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n case 'showClearButton':\n Input.setClearButton(this.showClearButton, this.inputElement, this.inputWrapper);\n this.bindClearEvent();\n this.index = this.showClearButton ? 2 : 1;\n break;\n case 'strictMode':\n this.invalidValueString = null;\n if (!this.isBlazorServer) {\n this.updateInput();\n }\n break;\n case 'width':\n this.setWidth(newProp.width);\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n Input.removeFloating(this.inputWrapper);\n Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);\n break;\n default:\n if (this.calendarElement && !this.isBlazorServer && this.isCalendar()) {\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp);\n }\n break;\n }\n if (!this.isDynamicValueChanged) {\n this.hide(null);\n }\n this.isDynamicValueChanged = false;\n }\n };\n __decorate([\n Property(null)\n ], DatePicker.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], DatePicker.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], DatePicker.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], DatePicker.prototype, \"strictMode\", void 0);\n __decorate([\n Property(null)\n ], DatePicker.prototype, \"format\", void 0);\n __decorate([\n Property(true)\n ], DatePicker.prototype, \"enabled\", void 0);\n __decorate([\n Property({})\n ], DatePicker.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(null)\n ], DatePicker.prototype, \"values\", void 0);\n __decorate([\n Property(false)\n ], DatePicker.prototype, \"isMultiSelection\", void 0);\n __decorate([\n Property(true)\n ], DatePicker.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(true)\n ], DatePicker.prototype, \"allowEdit\", void 0);\n __decorate([\n Property(null)\n ], DatePicker.prototype, \"keyConfigs\", void 0);\n __decorate([\n Property(false)\n ], DatePicker.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(1000)\n ], DatePicker.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], DatePicker.prototype, \"readonly\", void 0);\n __decorate([\n Property(null)\n ], DatePicker.prototype, \"placeholder\", void 0);\n __decorate([\n Property('Never')\n ], DatePicker.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(null)\n ], DatePicker.prototype, \"serverTimezoneOffset\", void 0);\n __decorate([\n Property(false)\n ], DatePicker.prototype, \"openOnFocus\", void 0);\n __decorate([\n Event()\n ], DatePicker.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], DatePicker.prototype, \"cleared\", void 0);\n __decorate([\n Event()\n ], DatePicker.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], DatePicker.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], DatePicker.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], DatePicker.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], DatePicker.prototype, \"destroyed\", void 0);\n DatePicker = __decorate([\n NotifyPropertyChanges\n ], DatePicker);\n return DatePicker;\n}(Calendar));\nexport { DatePicker };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n// eslint-disable-next-line @typescript-eslint/triple-slash-reference\n///
\nimport { EventHandler, Internationalization, Property, NotifyPropertyChanges, Browser } from '@syncfusion/ej2-base';\nimport { Animation, Event, cldrData, getDefaultDateObject, detach } from '@syncfusion/ej2-base';\nimport { createElement, remove, addClass, L10n, removeClass, closest, append, attributes } from '@syncfusion/ej2-base';\nimport { KeyboardEvents, isNullOrUndefined, formatUnit, getValue, rippleEffect } from '@syncfusion/ej2-base';\nimport { extend, isBlazor, blazorCultureFormats } from '@syncfusion/ej2-base';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { DatePicker } from '../datepicker/datepicker';\nimport { TimePickerBase } from '../timepicker/timepicker';\n//class constant defination\nvar DATEWRAPPER = 'e-date-wrapper';\nvar DATEPICKERROOT = 'e-datepicker';\nvar DATETIMEWRAPPER = 'e-datetime-wrapper';\nvar DAY = new Date().getDate();\nvar MONTH = new Date().getMonth();\nvar YEAR = new Date().getFullYear();\nvar HOUR = new Date().getHours();\nvar MINUTE = new Date().getMinutes();\nvar SECOND = new Date().getSeconds();\nvar MILLISECOND = new Date().getMilliseconds();\nvar ROOT = 'e-datetimepicker';\nvar DATETIMEPOPUPWRAPPER = 'e-datetimepopup-wrapper';\nvar INPUTWRAPPER = 'e-input-group-icon';\nvar POPUP = 'e-popup';\nvar TIMEICON = 'e-time-icon';\nvar INPUTFOCUS = 'e-input-focus';\nvar POPUPDIMENSION = '250px';\nvar ICONANIMATION = 'e-icon-anim';\nvar DISABLED = 'e-disabled';\nvar ERROR = 'e-error';\nvar CONTENT = 'e-content';\nvar NAVIGATION = 'e-navigation';\nvar ACTIVE = 'e-active';\nvar HOVER = 'e-hover';\nvar ICONS = 'e-icons';\nvar HALFPOSITION = 2;\nvar LISTCLASS = 'e-list-item';\nvar ANIMATIONDURATION = 100;\nvar OVERFLOW = 'e-time-overflow';\n/**\n * Represents the DateTimePicker component that allows user to select\n * or enter a date time value.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar DateTimePicker = /** @class */ (function (_super) {\n __extends(DateTimePicker, _super);\n /**\n * Constructor for creating the widget\n *\n * @param {DateTimePickerModel} options - Specifies the DateTimePicker model.\n * @param {string | HTMLInputElement} element - Specifies the element to render as component.\n * @private\n */\n function DateTimePicker(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.valueWithMinutes = null;\n _this.scrollInvoked = false;\n _this.dateTimeOptions = options;\n return _this;\n }\n DateTimePicker.prototype.focusHandler = function () {\n if (!this.enabled) {\n return;\n }\n addClass([this.inputWrapper.container], INPUTFOCUS);\n };\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n DateTimePicker.prototype.focusIn = function () {\n _super.prototype.focusIn.call(this);\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n DateTimePicker.prototype.focusOut = function () {\n if (document.activeElement === this.inputElement) {\n this.inputElement.blur();\n removeClass([this.inputWrapper.container], [INPUTFOCUS]);\n }\n };\n DateTimePicker.prototype.blurHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n // IE popup closing issue when click over the scrollbar\n if (this.isTimePopupOpen() && this.isPreventBlur) {\n this.inputElement.focus();\n return;\n }\n removeClass([this.inputWrapper.container], INPUTFOCUS);\n var blurArguments = {\n model: (isBlazor() && this.isServerRendered) ? null : this\n };\n if (this.isTimePopupOpen()) {\n this.hide(e);\n }\n this.trigger('blur', blurArguments);\n };\n /**\n * To destroy the widget.\n *\n * @returns {void}\n */\n DateTimePicker.prototype.destroy = function () {\n if (this.popupObject && this.popupObject.element.classList.contains(POPUP)) {\n this.popupObject.destroy();\n detach(this.dateTimeWrapper);\n this.dateTimeWrapper = undefined;\n this.liCollections = this.timeCollections = [];\n if (!isNullOrUndefined(this.rippleFn)) {\n this.rippleFn();\n }\n }\n var ariaAttribute = {\n 'aria-live': 'assertive', 'aria-atomic': 'true', 'aria-invalid': 'false',\n 'aria-haspopup': 'true', 'aria-activedescendant': 'null',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false',\n 'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off'\n };\n if (this.inputElement) {\n Input.removeAttributes(ariaAttribute, this.inputElement);\n this.inputElement.removeAttribute('aria-placeholder');\n }\n if (this.isCalendar()) {\n if (this.popupWrapper) {\n detach(this.popupWrapper);\n }\n this.popupObject = this.popupWrapper = null;\n this.keyboardHandler.destroy();\n }\n this.unBindInputEvents();\n _super.prototype.destroy.call(this);\n };\n /**\n * To Initialize the control rendering.\n *\n * @returns {void}\n * @private\n */\n DateTimePicker.prototype.render = function () {\n this.timekeyConfigure = {\n enter: 'enter',\n escape: 'escape',\n end: 'end',\n tab: 'tab',\n home: 'home',\n down: 'downarrow',\n up: 'uparrow',\n left: 'leftarrow',\n right: 'rightarrow',\n open: 'alt+downarrow',\n close: 'alt+uparrow'\n };\n this.valueWithMinutes = null;\n this.previousDateTime = null;\n this.isPreventBlur = false;\n this.cloneElement = this.element.cloneNode(true);\n this.dateTimeFormat = this.cldrDateTimeFormat();\n this.initValue = this.value;\n _super.prototype.updateHtmlAttributeToElement.call(this);\n this.checkAttributes(false);\n var localeText = { placeholder: this.placeholder };\n this.l10n = new L10n('datetimepicker', localeText, this.locale);\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n _super.prototype.render.call(this);\n this.createInputElement();\n _super.prototype.updateHtmlAttributeToWrapper.call(this);\n this.bindInputEvents();\n this.setValue();\n this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkValue(this.scrollTo))) }, true);\n this.previousDateTime = this.value && new Date(+this.value);\n if (this.element.tagName === 'EJS-DATETIMEPICKER') {\n this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';\n this.element.removeAttribute('tabindex');\n if (!this.enabled) {\n this.inputElement.tabIndex = -1;\n }\n }\n this.renderComplete();\n };\n DateTimePicker.prototype.setValue = function () {\n this.initValue = this.validateMinMaxRange(this.value);\n if (!this.strictMode && this.isDateObject(this.initValue)) {\n var value = this.validateMinMaxRange(this.initValue);\n Input.setValue(this.getFormattedValue(value), this.inputElement, this.floatLabelType, this.showClearButton);\n this.setProperties({ value: value }, true);\n }\n else {\n if (isNullOrUndefined(this.value)) {\n this.initValue = null;\n this.setProperties({ value: null }, true);\n }\n }\n this.valueWithMinutes = this.value;\n _super.prototype.updateInput.call(this);\n };\n DateTimePicker.prototype.validateMinMaxRange = function (value) {\n var result = value;\n if (this.isDateObject(value)) {\n result = this.validateValue(value);\n }\n else {\n if (+this.min > +this.max) {\n this.disablePopupButton(true);\n }\n }\n this.checkValidState(result);\n return result;\n };\n DateTimePicker.prototype.checkValidState = function (value) {\n this.isValidState = true;\n if (!this.strictMode) {\n if ((+(value) > +(this.max)) || (+(value) < +(this.min))) {\n this.isValidState = false;\n }\n }\n this.checkErrorState();\n };\n DateTimePicker.prototype.checkErrorState = function () {\n if (this.isValidState) {\n removeClass([this.inputWrapper.container], ERROR);\n }\n else {\n addClass([this.inputWrapper.container], ERROR);\n }\n attributes(this.inputElement, { 'aria-invalid': this.isValidState ? 'false' : 'true' });\n };\n DateTimePicker.prototype.validateValue = function (value) {\n var dateVal = value;\n if (this.strictMode) {\n if (+this.min > +this.max) {\n this.disablePopupButton(true);\n dateVal = this.max;\n }\n else if (+value < +this.min) {\n dateVal = this.min;\n }\n else if (+value > +this.max) {\n dateVal = this.max;\n }\n }\n else {\n if (+this.min > +this.max) {\n this.disablePopupButton(true);\n dateVal = value;\n }\n }\n return dateVal;\n };\n DateTimePicker.prototype.disablePopupButton = function (isDisable) {\n if (isDisable) {\n addClass([this.inputWrapper.buttons[0], this.timeIcon], DISABLED);\n this.hide();\n }\n else {\n removeClass([this.inputWrapper.buttons[0], this.timeIcon], DISABLED);\n }\n };\n DateTimePicker.prototype.getFormattedValue = function (value) {\n var dateOptions;\n if (!isNullOrUndefined(value)) {\n if (this.calendarMode === 'Gregorian') {\n dateOptions = { format: this.cldrDateTimeFormat(), type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };\n }\n else {\n dateOptions = { format: this.cldrDateTimeFormat(), type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n return this.globalize.formatDate(value, dateOptions);\n }\n else {\n return null;\n }\n };\n DateTimePicker.prototype.isDateObject = function (value) {\n return (!isNullOrUndefined(value) && !isNaN(+value)) ? true : false;\n };\n DateTimePicker.prototype.createInputElement = function () {\n removeClass([this.inputElement], DATEPICKERROOT);\n removeClass([this.inputWrapper.container], DATEWRAPPER);\n addClass([this.inputWrapper.container], DATETIMEWRAPPER);\n addClass([this.inputElement], ROOT);\n this.renderTimeIcon();\n };\n DateTimePicker.prototype.renderTimeIcon = function () {\n this.timeIcon = Input.appendSpan(INPUTWRAPPER + ' ' + TIMEICON + ' ' + ICONS, this.inputWrapper.container);\n };\n DateTimePicker.prototype.bindInputEvents = function () {\n EventHandler.add(this.timeIcon, 'mousedown', this.timeHandler, this);\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.dateHandler, this);\n EventHandler.add(this.inputElement, 'blur', this.blurHandler, this);\n EventHandler.add(this.inputElement, 'focus', this.focusHandler, this);\n this.defaultKeyConfigs = extend(this.defaultKeyConfigs, this.keyConfigs);\n this.keyboardHandler = new KeyboardEvents(this.inputElement, {\n eventName: 'keydown',\n keyAction: this.inputKeyAction.bind(this),\n keyConfigs: this.defaultKeyConfigs\n });\n };\n DateTimePicker.prototype.unBindInputEvents = function () {\n EventHandler.remove(this.timeIcon, 'mousedown touchstart', this.timeHandler);\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', this.dateHandler);\n if (this.inputElement) {\n EventHandler.remove(this.inputElement, 'blur', this.blurHandler);\n EventHandler.remove(this.inputElement, 'focus', this.focusHandler);\n }\n if (this.keyboardHandler) {\n this.keyboardHandler.destroy();\n }\n };\n DateTimePicker.prototype.cldrTimeFormat = function () {\n var cldrTime;\n if (this.isNullOrEmpty(this.timeFormat)) {\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrTime = isBlazor() ? (getValue('t', getValue(this.locale, blazorCultureFormats))).replace(/tt/, 'a') :\n (getValue('timeFormats.short', getDefaultDateObject()));\n }\n else {\n cldrTime = (this.getCultureTimeObject(cldrData, '' + this.locale));\n }\n }\n else {\n cldrTime = this.timeFormat;\n }\n return cldrTime;\n };\n DateTimePicker.prototype.cldrDateTimeFormat = function () {\n var cldrTime;\n var culture = new Internationalization(this.locale);\n var dateFormat = culture.getDatePattern({ skeleton: isBlazor() ? 'd' : 'yMd' });\n if (this.isNullOrEmpty(this.formatString)) {\n cldrTime = dateFormat + ' ' + this.getCldrFormat('time');\n }\n else {\n cldrTime = this.formatString;\n }\n return cldrTime;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DateTimePicker.prototype.getCldrFormat = function (type) {\n var cldrDateTime;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrDateTime = isBlazor() ? (getValue('t', getValue(this.locale, blazorCultureFormats))).replace(/tt/, 'a') :\n (getValue('timeFormats.short', getDefaultDateObject()));\n }\n else {\n cldrDateTime = (this.getCultureTimeObject(cldrData, '' + this.locale));\n }\n return cldrDateTime;\n };\n DateTimePicker.prototype.isNullOrEmpty = function (value) {\n if (isNullOrUndefined(value) || (typeof value === 'string' && value.trim() === '')) {\n return true;\n }\n else {\n return false;\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DateTimePicker.prototype.getCultureTimeObject = function (ld, c) {\n if (this.calendarMode === 'Gregorian') {\n return isBlazor() ? (getValue('t', getValue(this.locale, blazorCultureFormats))).replace(/tt/, 'a') :\n (getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.timeFormats.short', ld));\n }\n else {\n return getValue('main.' + '' + this.locale + '.dates.calendars.islamic.timeFormats.short', ld);\n }\n };\n DateTimePicker.prototype.timeHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n this.isIconClicked = true;\n if (Browser.isDevice) {\n this.inputElement.setAttribute('readonly', '');\n }\n if (e.currentTarget === this.timeIcon) {\n e.preventDefault();\n }\n if (this.enabled && !this.readonly) {\n if (this.isDatePopupOpen()) {\n _super.prototype.hide.call(this, e);\n }\n if (this.isTimePopupOpen()) {\n this.closePopup(e);\n }\n else {\n this.inputElement.focus();\n this.popupCreation('time', e);\n addClass([this.inputWrapper.container], [INPUTFOCUS]);\n }\n }\n this.isIconClicked = false;\n };\n DateTimePicker.prototype.dateHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n if (e.currentTarget === this.inputWrapper.buttons[0]) {\n e.preventDefault();\n }\n if (this.enabled && !this.readonly) {\n if (this.isTimePopupOpen()) {\n this.closePopup(e);\n }\n if (!isNullOrUndefined(this.popupWrapper)) {\n this.popupCreation('date', e);\n }\n }\n };\n DateTimePicker.prototype.show = function (type, e) {\n if ((this.enabled && this.readonly) || !this.enabled) {\n return;\n }\n else {\n if (type === 'time' && !this.dateTimeWrapper) {\n if (this.isDatePopupOpen()) {\n this.hide(e);\n }\n this.popupCreation('time', e);\n }\n else if (!this.popupObj) {\n if (this.isTimePopupOpen()) {\n this.hide(e);\n }\n _super.prototype.show.call(this);\n this.popupCreation('date', e);\n }\n }\n };\n DateTimePicker.prototype.toggle = function (e) {\n if (this.isDatePopupOpen()) {\n _super.prototype.hide.call(this, e);\n this.show('time', null);\n }\n else if (this.isTimePopupOpen()) {\n this.hide(e);\n _super.prototype.show.call(this, null, e);\n this.popupCreation('date', null);\n }\n else {\n this.show(null, e);\n }\n };\n DateTimePicker.prototype.listCreation = function () {\n var dateObject;\n if (this.calendarMode === 'Gregorian') {\n dateObject = this.globalize.parseDate(this.inputElement.value, {\n format: this.cldrDateTimeFormat(), type: 'datetime'\n });\n }\n else {\n dateObject = this.globalize.parseDate(this.inputElement.value, {\n format: this.cldrDateTimeFormat(), type: 'datetime', calendar: 'islamic'\n });\n }\n var value = isNullOrUndefined(this.value) ? this.inputElement.value !== '' ?\n dateObject :\n new Date() : this.value;\n this.valueWithMinutes = value;\n this.listWrapper = createElement('div', { className: CONTENT, attrs: { 'tabindex': '0' } });\n var min = this.startTime(value);\n var max = this.endTime(value);\n var listDetails = TimePickerBase.createListItems(this.createElement, min, max, this.globalize, this.cldrTimeFormat(), this.step);\n this.timeCollections = listDetails.collection;\n this.listTag = listDetails.list;\n attributes(this.listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options' });\n append([listDetails.list], this.listWrapper);\n this.wireTimeListEvents();\n var rippleModel = { duration: 300, selector: '.' + LISTCLASS };\n this.rippleFn = rippleEffect(this.listWrapper, rippleModel);\n this.liCollections = this.listWrapper.querySelectorAll('.' + LISTCLASS);\n };\n DateTimePicker.prototype.popupCreation = function (type, e) {\n if (Browser.isDevice) {\n this.element.setAttribute('readonly', 'readonly');\n }\n if (type === 'date') {\n if (!this.readonly && this.popupWrapper) {\n addClass([this.popupWrapper], DATETIMEPOPUPWRAPPER);\n attributes(this.popupWrapper, { 'id': this.element.id + '_datepopup' });\n }\n }\n else {\n if (!this.readonly) {\n this.dateTimeWrapper = createElement('div', {\n className: ROOT + ' ' + POPUP,\n attrs: { 'id': this.element.id + '_timepopup', 'style': 'visibility:hidden ; display:block' }\n });\n if (!isNullOrUndefined(this.cssClass)) {\n this.dateTimeWrapper.className += ' ' + this.cssClass;\n }\n if (!isNullOrUndefined(this.step) && this.step > 0) {\n this.listCreation();\n append([this.listWrapper], this.dateTimeWrapper);\n }\n document.body.appendChild(this.dateTimeWrapper);\n this.addTimeSelection();\n this.renderPopup();\n this.setTimeScrollPosition();\n this.openPopup(e);\n this.popupObject.refreshPosition(this.inputElement);\n }\n }\n };\n DateTimePicker.prototype.openPopup = function (e) {\n var _this = this;\n this.preventArgs = {\n cancel: false,\n popup: (isBlazor() && this.isServerRendered) ? null : this.popupObject,\n event: e || null\n };\n var eventArgs = this.preventArgs;\n this.trigger('open', eventArgs, function (eventArgs) {\n _this.preventArgs = eventArgs;\n if (!_this.preventArgs.cancel && !_this.readonly) {\n var openAnimation = {\n name: 'FadeIn',\n duration: ANIMATIONDURATION\n };\n if (_this.zIndex === 1000) {\n _this.popupObject.show(new Animation(openAnimation), _this.element);\n }\n else {\n _this.popupObject.show(new Animation(openAnimation), null);\n }\n addClass([_this.inputWrapper.container], [ICONANIMATION]);\n attributes(_this.inputElement, { 'aria-expanded': 'true' });\n EventHandler.add(document, 'mousedown touchstart', _this.documentClickHandler, _this);\n }\n });\n };\n DateTimePicker.prototype.documentClickHandler = function (event) {\n var target = event.target;\n if ((!isNullOrUndefined(this.popupObject) && (this.inputWrapper.container.contains(target) ||\n (this.popupObject.element && this.popupObject.element.contains(target)))) && event.type !== 'touchstart') {\n event.preventDefault();\n }\n if (!(closest(target, '[id=\"' + (this.popupObject && this.popupObject.element.id + '\"]'))) && target !== this.inputElement\n && target !== this.timeIcon && target !== this.inputWrapper.container) {\n if (this.isTimePopupOpen()) {\n this.hide(event);\n this.focusOut();\n }\n }\n else if (target !== this.inputElement) {\n if (!Browser.isDevice) {\n this.isPreventBlur = ((document.activeElement === this.inputElement) && (Browser.isIE || Browser.info.name === 'edge')\n && target === this.popupObject.element);\n }\n }\n };\n DateTimePicker.prototype.isTimePopupOpen = function () {\n return (this.dateTimeWrapper && this.dateTimeWrapper.classList.contains('' + ROOT)) ? true : false;\n };\n DateTimePicker.prototype.isDatePopupOpen = function () {\n return (this.popupWrapper && this.popupWrapper.classList.contains('' + DATETIMEPOPUPWRAPPER)) ? true : false;\n };\n DateTimePicker.prototype.renderPopup = function () {\n var _this = this;\n this.containerStyle = this.inputWrapper.container.getBoundingClientRect();\n if (Browser.isDevice) {\n this.timeModal = createElement('div');\n this.timeModal.className = '' + ROOT + ' e-time-modal';\n document.body.className += ' ' + OVERFLOW;\n this.timeModal.style.display = 'block';\n document.body.appendChild(this.timeModal);\n }\n var offset = 4;\n this.popupObject = new Popup(this.dateTimeWrapper, {\n width: this.setPopupWidth(),\n zIndex: this.zIndex,\n targetType: 'container',\n collision: Browser.isDevice ? { X: 'fit', Y: 'fit' } : { X: 'flip', Y: 'flip' },\n relateTo: Browser.isDevice ? document.body : this.inputWrapper.container,\n position: Browser.isDevice ? { X: 'center', Y: 'center' } : { X: 'left', Y: 'bottom' },\n enableRtl: this.enableRtl,\n offsetY: offset,\n open: function () {\n _this.dateTimeWrapper.style.visibility = 'visible';\n addClass([_this.timeIcon], ACTIVE);\n if (!Browser.isDevice) {\n _this.timekeyConfigure = extend(_this.timekeyConfigure, _this.keyConfigs);\n _this.inputEvent = new KeyboardEvents(_this.inputWrapper.container, {\n keyAction: _this.timeKeyActionHandle.bind(_this),\n keyConfigs: _this.timekeyConfigure,\n eventName: 'keydown'\n });\n }\n }, close: function () {\n removeClass([_this.timeIcon], ACTIVE);\n _this.unWireTimeListEvents();\n _this.inputElement.setAttribute('aria-activedescendant', 'null');\n remove(_this.popupObject.element);\n _this.popupObject.destroy();\n _this.dateTimeWrapper.innerHTML = '';\n _this.listWrapper = _this.dateTimeWrapper = undefined;\n if (_this.inputEvent) {\n _this.inputEvent.destroy();\n }\n }, targetExitViewport: function () {\n if (!Browser.isDevice) {\n _this.hide();\n }\n }\n });\n this.popupObject.element.style.maxHeight = POPUPDIMENSION;\n };\n DateTimePicker.prototype.setDimension = function (width) {\n if (typeof width === 'number') {\n width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n // eslint-disable-next-line no-self-assign\n width = width;\n }\n else {\n width = '100%';\n }\n return width;\n };\n DateTimePicker.prototype.setPopupWidth = function () {\n var width = this.setDimension(this.width);\n if (width.indexOf('%') > -1) {\n var inputWidth = this.containerStyle.width * parseFloat(width) / 100;\n width = inputWidth.toString() + 'px';\n }\n return width;\n };\n DateTimePicker.prototype.wireTimeListEvents = function () {\n EventHandler.add(this.listWrapper, 'click', this.onMouseClick, this);\n if (!Browser.isDevice) {\n EventHandler.add(this.listWrapper, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.listWrapper, 'mouseout', this.onMouseLeave, this);\n }\n };\n DateTimePicker.prototype.unWireTimeListEvents = function () {\n if (this.listWrapper) {\n EventHandler.remove(this.listWrapper, 'click', this.onMouseClick);\n EventHandler.remove(document, 'mousedown touchstart', this.documentClickHandler);\n if (!Browser.isDevice) {\n EventHandler.add(this.listWrapper, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.listWrapper, 'mouseout', this.onMouseLeave, this);\n }\n }\n };\n DateTimePicker.prototype.onMouseOver = function (event) {\n var currentLi = closest(event.target, '.' + LISTCLASS);\n this.setTimeHover(currentLi, HOVER);\n };\n DateTimePicker.prototype.onMouseLeave = function () {\n this.removeTimeHover(HOVER);\n };\n DateTimePicker.prototype.setTimeHover = function (li, className) {\n if (this.enabled && this.isValidLI(li) && !li.classList.contains(className)) {\n this.removeTimeHover(className);\n addClass([li], className);\n }\n };\n DateTimePicker.prototype.getPopupHeight = function () {\n var height = parseInt(POPUPDIMENSION, 10);\n var popupHeight = this.dateTimeWrapper.getBoundingClientRect().height;\n return popupHeight > height ? height : popupHeight;\n };\n DateTimePicker.prototype.changeEvent = function (e) {\n if ((this.value && this.value.valueOf()) !== (this.previousDateTime && +this.previousDateTime.valueOf())) {\n _super.prototype.changeEvent.call(this, e);\n this.valueWithMinutes = this.value;\n this.setInputValue('date');\n this.previousDateTime = this.value && new Date(+this.value);\n }\n };\n DateTimePicker.prototype.updateValue = function (e) {\n this.setInputValue('time');\n if (+this.previousDateTime !== +this.value) {\n this.changedArgs = {\n value: this.value, event: e || null,\n isInteracted: !isNullOrUndefined(e),\n element: this.element\n };\n this.addTimeSelection();\n this.trigger('change', this.changedArgs);\n this.previousDateTime = this.value;\n }\n };\n DateTimePicker.prototype.setTimeScrollPosition = function () {\n var popupElement = this.selectedElement;\n if (!isNullOrUndefined(popupElement)) {\n this.findScrollTop(popupElement);\n }\n else if (this.dateTimeWrapper && this.checkDateValue(this.scrollTo)) {\n this.setScrollTo();\n }\n };\n DateTimePicker.prototype.findScrollTop = function (element) {\n var listHeight = this.getPopupHeight();\n var nextElement = element.nextElementSibling;\n var height = nextElement ? nextElement.offsetTop : element.offsetTop;\n var lineHeight = element.getBoundingClientRect().height;\n if ((height + element.offsetTop) > listHeight) {\n this.dateTimeWrapper.scrollTop = nextElement ? (height - (listHeight / HALFPOSITION + lineHeight / HALFPOSITION)) : height;\n }\n else {\n this.dateTimeWrapper.scrollTop = 0;\n }\n };\n DateTimePicker.prototype.setScrollTo = function () {\n var element;\n var items = this.dateTimeWrapper.querySelectorAll('.' + LISTCLASS);\n if (items.length >= 0) {\n this.scrollInvoked = true;\n var initialTime = this.timeCollections[0];\n var scrollTime = this.getDateObject(this.checkDateValue(this.scrollTo)).getTime();\n element = items[Math.round((scrollTime - initialTime) / (this.step * 60000))];\n }\n else {\n this.dateTimeWrapper.scrollTop = 0;\n }\n if (!isNullOrUndefined(element)) {\n this.findScrollTop(element);\n }\n else {\n this.dateTimeWrapper.scrollTop = 0;\n }\n };\n DateTimePicker.prototype.setInputValue = function (type) {\n if (type === 'date') {\n this.inputElement.value = this.previousElementValue = this.getFormattedValue(this.getFullDateTime());\n this.setProperties({ value: this.getFullDateTime() }, true);\n }\n else {\n var tempVal = this.getFormattedValue(new Date(this.timeCollections[this.activeIndex]));\n Input.setValue(tempVal, this.inputElement, this.floatLabelType, this.showClearButton);\n this.previousElementValue = this.inputElement.value;\n this.setProperties({ value: new Date(this.timeCollections[this.activeIndex]) }, true);\n }\n this.updateIconState();\n };\n DateTimePicker.prototype.getFullDateTime = function () {\n var value = null;\n if (this.isDateObject(this.valueWithMinutes)) {\n value = this.combineDateTime(this.valueWithMinutes);\n }\n else {\n value = this.previousDate;\n }\n return this.validateMinMaxRange(value);\n };\n DateTimePicker.prototype.combineDateTime = function (value) {\n if (this.isDateObject(value)) {\n var day = this.previousDate.getDate();\n var month = this.previousDate.getMonth();\n var year = this.previousDate.getFullYear();\n var hour = value.getHours();\n var minutes = value.getMinutes();\n var seconds = value.getSeconds();\n return new Date(year, month, day, hour, minutes, seconds);\n }\n else {\n return this.previousDate;\n }\n };\n DateTimePicker.prototype.onMouseClick = function (event) {\n var target = event.target;\n var li = this.selectedElement = closest(target, '.' + LISTCLASS);\n if (li && li.classList.contains(LISTCLASS)) {\n this.timeValue = li.getAttribute('data-value');\n this.hide(event);\n }\n this.setSelection(li, event);\n };\n DateTimePicker.prototype.setSelection = function (li, event) {\n if (this.isValidLI(li) && !li.classList.contains(ACTIVE)) {\n this.selectedElement = li;\n var index = Array.prototype.slice.call(this.liCollections).indexOf(li);\n this.activeIndex = index;\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n addClass([this.selectedElement], ACTIVE);\n this.selectedElement.setAttribute('aria-selected', 'true');\n this.updateValue(event);\n }\n };\n DateTimePicker.prototype.setTimeActiveClass = function () {\n var collections = isNullOrUndefined(this.dateTimeWrapper) ? this.listWrapper : this.dateTimeWrapper;\n if (!isNullOrUndefined(collections)) {\n var items = collections.querySelectorAll('.' + LISTCLASS);\n if (items.length) {\n for (var i = 0; i < items.length; i++) {\n if (this.timeCollections[i] === +(this.valueWithMinutes)) {\n items[i].setAttribute('aria-selected', 'true');\n this.selectedElement = items[i];\n this.activeIndex = i;\n this.setTimeActiveDescendant();\n break;\n }\n }\n }\n }\n };\n DateTimePicker.prototype.setTimeActiveDescendant = function () {\n if (!isNullOrUndefined(this.selectedElement)) {\n attributes(this.inputElement, { 'aria-activedescendant': this.selectedElement.getAttribute('id') });\n }\n else {\n attributes(this.inputElement, { 'aria-activedescendant': 'null' });\n }\n };\n DateTimePicker.prototype.addTimeSelection = function () {\n this.selectedElement = null;\n this.removeTimeSelection();\n this.setTimeActiveClass();\n if (!isNullOrUndefined(this.selectedElement)) {\n addClass([this.selectedElement], ACTIVE);\n this.selectedElement.setAttribute('aria-selected', 'true');\n }\n };\n DateTimePicker.prototype.removeTimeSelection = function () {\n this.removeTimeHover(HOVER);\n if (!isNullOrUndefined(this.dateTimeWrapper)) {\n var items = this.dateTimeWrapper.querySelectorAll('.' + ACTIVE);\n if (items.length) {\n removeClass(items, ACTIVE);\n items[0].removeAttribute('aria-selected');\n }\n }\n };\n DateTimePicker.prototype.removeTimeHover = function (className) {\n var hoveredItem = this.getTimeHoverItem(className);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, className);\n }\n };\n DateTimePicker.prototype.getTimeHoverItem = function (className) {\n var collections = isNullOrUndefined(this.dateTimeWrapper) ? this.listWrapper : this.dateTimeWrapper;\n var hoveredItem;\n if (!isNullOrUndefined(collections)) {\n hoveredItem = collections.querySelectorAll('.' + className);\n }\n return hoveredItem;\n };\n DateTimePicker.prototype.isValidLI = function (li) {\n return (li && li.classList.contains(LISTCLASS) && !li.classList.contains(DISABLED));\n };\n DateTimePicker.prototype.calculateStartEnd = function (value, range, method) {\n var day = value.getDate();\n var month = value.getMonth();\n var year = value.getFullYear();\n var hours = value.getHours();\n var minutes = value.getMinutes();\n var seconds = value.getSeconds();\n var milliseconds = value.getMilliseconds();\n if (range) {\n if (method === 'starttime') {\n return new Date(year, month, day, 0, 0, 0);\n }\n else {\n return new Date(year, month, day, 23, 59, 59);\n }\n }\n else {\n return new Date(year, month, day, hours, minutes, seconds, milliseconds);\n }\n };\n DateTimePicker.prototype.startTime = function (date) {\n var tempStartValue;\n var start;\n var tempMin = this.min;\n var value = date === null ? new Date() : date;\n if ((+value.getDate() === +tempMin.getDate() && +value.getMonth() === +tempMin.getMonth() &&\n +value.getFullYear() === +tempMin.getFullYear()) || ((+new Date(value.getFullYear(), value.getMonth(), value.getDate())) <=\n +new Date(tempMin.getFullYear(), tempMin.getMonth(), tempMin.getDate()))) {\n start = false;\n tempStartValue = this.min;\n }\n else if (+value < +this.max && +value > +this.min) {\n start = true;\n tempStartValue = value;\n }\n else if (+value >= +this.max) {\n start = true;\n tempStartValue = this.max;\n }\n return this.calculateStartEnd(tempStartValue, start, 'starttime');\n };\n DateTimePicker.prototype.endTime = function (date) {\n var tempEndValue;\n var end;\n var tempMax = this.max;\n var value = date === null ? new Date() : date;\n if ((+value.getDate() === +tempMax.getDate() && +value.getMonth() === +tempMax.getMonth() &&\n +value.getFullYear() === +tempMax.getFullYear()) || (+new Date(value.getUTCFullYear(), value.getMonth(), value.getDate()) >=\n +new Date(tempMax.getFullYear(), tempMax.getMonth(), tempMax.getDate()))) {\n end = false;\n tempEndValue = this.max;\n }\n else if (+value < +this.max && +value > +this.min) {\n end = true;\n tempEndValue = value;\n }\n else if (+value <= +this.min) {\n end = true;\n tempEndValue = this.min;\n }\n return this.calculateStartEnd(tempEndValue, end, 'endtime');\n };\n DateTimePicker.prototype.hide = function (e) {\n var _this = this;\n if (this.popupObj || this.dateTimeWrapper) {\n this.preventArgs = {\n cancel: false,\n popup: (isBlazor() && this.isServerRendered) ? null : this.popupObj || this.popupObject,\n event: e || null\n };\n var eventArgs = this.preventArgs;\n if (isNullOrUndefined(this.popupObj)) {\n this.trigger('close', eventArgs, function (eventArgs) {\n _this.dateTimeCloseEventCallback(e, eventArgs);\n });\n }\n else {\n this.dateTimeCloseEventCallback(e, eventArgs);\n }\n }\n else {\n if (Browser.isDevice && this.allowEdit && !this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n this.setAllowEdit();\n }\n };\n DateTimePicker.prototype.dateTimeCloseEventCallback = function (e, eventArgs) {\n this.preventArgs = eventArgs;\n if (!this.preventArgs.cancel) {\n if (this.isDatePopupOpen()) {\n _super.prototype.hide.call(this, e);\n }\n else if (this.isTimePopupOpen()) {\n this.closePopup(e);\n removeClass([document.body], OVERFLOW);\n if (Browser.isDevice && this.timeModal) {\n this.timeModal.style.display = 'none';\n this.timeModal.outerHTML = '';\n this.timeModal = null;\n }\n this.setTimeActiveDescendant();\n }\n }\n if (Browser.isDevice && this.allowEdit && !this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n this.setAllowEdit();\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DateTimePicker.prototype.closePopup = function (e) {\n if (this.isTimePopupOpen() && this.popupObject) {\n var animModel = {\n name: 'FadeOut',\n duration: ANIMATIONDURATION,\n delay: 0\n };\n this.popupObject.hide(new Animation(animModel));\n this.inputWrapper.container.classList.remove(ICONANIMATION);\n attributes(this.inputElement, { 'aria-expanded': 'false' });\n EventHandler.remove(document, 'mousedown touchstart', this.documentClickHandler);\n }\n };\n DateTimePicker.prototype.preRender = function () {\n this.checkFormat();\n this.dateTimeFormat = this.cldrDateTimeFormat();\n _super.prototype.preRender.call(this);\n removeClass([this.inputElementCopy], [ROOT]);\n };\n DateTimePicker.prototype.getProperty = function (date, val) {\n if (val === 'min') {\n this.setProperties({ min: this.validateValue(date.min) }, true);\n }\n else {\n this.setProperties({ max: this.validateValue(date.max) }, true);\n }\n };\n DateTimePicker.prototype.checkAttributes = function (isDynamic) {\n var attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['style', 'name', 'step', 'disabled', 'readonly', 'value', 'min', 'max', 'placeholder', 'type'];\n var value;\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.inputElement.getAttribute(prop))) {\n switch (prop) {\n case 'name':\n this.inputElement.setAttribute('name', this.inputElement.getAttribute(prop));\n break;\n case 'step':\n this.step = parseInt(this.inputElement.getAttribute(prop), 10);\n break;\n case 'readonly':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['readonly'] === undefined)) || isDynamic) {\n var readonly = this.inputElement.getAttribute(prop) === 'disabled' ||\n this.inputElement.getAttribute(prop) === '' ||\n this.inputElement.getAttribute(prop) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !isDynamic);\n }\n break;\n case 'placeholder':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.inputElement.getAttribute(prop) }, !isDynamic);\n }\n break;\n case 'min':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['min'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!this.isNullOrEmpty(value) && !isNaN(+value)) {\n this.setProperties({ min: value }, !isDynamic);\n }\n }\n break;\n case 'disabled':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['enabled'] === undefined)) || isDynamic) {\n var enabled = this.inputElement.getAttribute(prop) === 'disabled' ||\n this.inputElement.getAttribute(prop) === 'true' ||\n this.inputElement.getAttribute(prop) === '' ? false : true;\n this.setProperties({ enabled: enabled }, !isDynamic);\n }\n break;\n case 'value':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['value'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!this.isNullOrEmpty(value) && !isNaN(+value)) {\n this.setProperties({ value: value }, !isDynamic);\n }\n }\n break;\n case 'max':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['max'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!this.isNullOrEmpty(value) && !isNaN(+value)) {\n this.setProperties({ max: value }, !isDynamic);\n }\n }\n break;\n }\n }\n }\n };\n DateTimePicker.prototype.requiredModules = function () {\n var modules = [];\n if (this) {\n modules.push({ args: [this], member: 'islamic' });\n }\n return modules;\n };\n DateTimePicker.prototype.getTimeActiveElement = function () {\n if (!isNullOrUndefined(this.dateTimeWrapper)) {\n return this.dateTimeWrapper.querySelectorAll('.' + ACTIVE);\n }\n else {\n return null;\n }\n };\n DateTimePicker.prototype.createDateObj = function (val) {\n return val instanceof Date ? val : null;\n };\n DateTimePicker.prototype.getDateObject = function (text) {\n if (!this.isNullOrEmpty(text)) {\n var dateValue = this.createDateObj(text);\n var value = this.valueWithMinutes;\n var status_1 = !isNullOrUndefined(value);\n if (this.checkDateValue(dateValue)) {\n var date = status_1 ? value.getDate() : DAY;\n var month = status_1 ? value.getMonth() : MONTH;\n var year = status_1 ? value.getFullYear() : YEAR;\n var hour = status_1 ? value.getHours() : HOUR;\n var minute = status_1 ? value.getMinutes() : MINUTE;\n var second = status_1 ? value.getSeconds() : SECOND;\n var millisecond = status_1 ? value.getMilliseconds() : MILLISECOND;\n if (!this.scrollInvoked) {\n return new Date(year, month, date, hour, minute, second, millisecond);\n }\n else {\n this.scrollInvoked = false;\n return new Date(year, month, date, dateValue.getHours(), dateValue.getMinutes(), dateValue.getSeconds(), dateValue.getMilliseconds());\n }\n }\n }\n return null;\n };\n DateTimePicker.prototype.findNextTimeElement = function (event) {\n var textVal = (this.inputElement).value;\n var value = isNullOrUndefined(this.valueWithMinutes) ? this.createDateObj(textVal) :\n this.getDateObject(this.valueWithMinutes);\n var dateTimeVal = null;\n var listCount = this.liCollections.length;\n if (!isNullOrUndefined(this.activeIndex) || !isNullOrUndefined(this.checkDateValue(value))) {\n if (event.action === 'home') {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[0])));\n this.activeIndex = 0;\n }\n else if (event.action === 'end') {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[this.timeCollections.length - 1])));\n this.activeIndex = this.timeCollections.length - 1;\n }\n else {\n if (event.action === 'down') {\n for (var i = 0; i < listCount; i++) {\n if (+value < this.timeCollections[i]) {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[i])));\n this.activeIndex = i;\n break;\n }\n }\n }\n else {\n for (var i = listCount - 1; i >= 0; i--) {\n if (+value > this.timeCollections[i]) {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[i])));\n this.activeIndex = i;\n break;\n }\n }\n }\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n this.timeElementValue(isNullOrUndefined(dateTimeVal) ? null : new Date(dateTimeVal));\n }\n };\n DateTimePicker.prototype.setTimeValue = function (date, value) {\n var dateString;\n var time;\n var val = this.validateMinMaxRange(value);\n var newval = this.createDateObj(val);\n if (this.getFormattedValue(newval) !== (!isNullOrUndefined(this.value) ? this.getFormattedValue(this.value) : null)) {\n this.valueWithMinutes = isNullOrUndefined(newval) ? null : newval;\n time = new Date(+this.valueWithMinutes);\n }\n else {\n if (this.strictMode) {\n //for strict mode case, when value not present within a range. Reset the nearest range value.\n date = newval;\n }\n this.valueWithMinutes = this.checkDateValue(date);\n time = new Date(+this.valueWithMinutes);\n }\n if (this.calendarMode === 'Gregorian') {\n dateString = this.globalize.formatDate(time, {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.cldrDateTimeFormat(),\n type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd'\n });\n }\n else {\n dateString = this.globalize.formatDate(time, {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.cldrDateTimeFormat(),\n type: 'dateTime', skeleton: 'yMd', calendar: 'islamic'\n });\n }\n if (!this.strictMode && isNullOrUndefined(time)) {\n Input.setValue(dateString, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n else {\n Input.setValue(dateString, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n return time;\n };\n DateTimePicker.prototype.timeElementValue = function (value) {\n if (!isNullOrUndefined(this.checkDateValue(value)) && !this.isNullOrEmpty(value)) {\n var date = value instanceof Date ? value : this.getDateObject(value);\n return this.setTimeValue(date, value);\n }\n return null;\n };\n DateTimePicker.prototype.timeKeyHandler = function (event) {\n if (isNullOrUndefined(this.step) || this.step <= 0) {\n return;\n }\n var listCount = this.timeCollections.length;\n if (isNullOrUndefined(this.getTimeActiveElement()) || this.getTimeActiveElement().length === 0) {\n if (this.liCollections.length > 0) {\n if (isNullOrUndefined(this.value) && isNullOrUndefined(this.activeIndex)) {\n this.activeIndex = 0;\n this.selectedElement = this.liCollections[0];\n this.timeElementValue(new Date(this.timeCollections[0]));\n }\n else {\n this.findNextTimeElement(event);\n }\n }\n }\n else {\n var nextItemValue = void 0;\n if ((event.keyCode >= 37) && (event.keyCode <= 40)) {\n var index = (event.keyCode === 40 || event.keyCode === 39) ? ++this.activeIndex : --this.activeIndex;\n this.activeIndex = index = this.activeIndex === (listCount) ? 0 : this.activeIndex;\n this.activeIndex = index = this.activeIndex < 0 ? (listCount - 1) : this.activeIndex;\n nextItemValue = isNullOrUndefined(this.timeCollections[index]) ? this.timeCollections[0] : this.timeCollections[index];\n }\n else if (event.action === 'home') {\n this.activeIndex = 0;\n nextItemValue = this.timeCollections[0];\n }\n else if (event.action === 'end') {\n this.activeIndex = listCount - 1;\n nextItemValue = this.timeCollections[listCount - 1];\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n this.timeElementValue(new Date(nextItemValue));\n }\n this.isNavigate = true;\n this.setTimeHover(this.selectedElement, NAVIGATION);\n this.setTimeActiveDescendant();\n if (this.isTimePopupOpen() && this.selectedElement !== null && (!event || event.type !== 'click')) {\n this.setTimeScrollPosition();\n }\n };\n DateTimePicker.prototype.timeKeyActionHandle = function (event) {\n if (this.enabled) {\n if (event.action !== 'right' && event.action !== 'left' && event.action !== 'tab') {\n event.preventDefault();\n }\n switch (event.action) {\n case 'up':\n case 'down':\n case 'home':\n case 'end':\n this.timeKeyHandler(event);\n break;\n case 'enter':\n if (this.isNavigate) {\n this.selectedElement = this.liCollections[this.activeIndex];\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n this.setInputValue('time');\n if (+this.previousDateTime !== +this.value) {\n this.changedArgs.value = this.value;\n this.addTimeSelection();\n this.previousDateTime = this.value;\n }\n }\n else {\n this.updateValue(event);\n }\n this.hide(event);\n addClass([this.inputWrapper.container], INPUTFOCUS);\n this.isNavigate = false;\n event.stopPropagation();\n break;\n case 'escape':\n this.hide(event);\n break;\n default:\n this.isNavigate = false;\n break;\n }\n }\n };\n DateTimePicker.prototype.inputKeyAction = function (event) {\n switch (event.action) {\n case 'altDownArrow':\n this.strictModeUpdate();\n this.updateInput();\n this.toggle(event);\n break;\n }\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {DateTimePickerModel} newProp - Returns the dynamic property value of the component.\n * @param {DateTimePickerModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n\n */\n DateTimePicker.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'value':\n this.isDynamicValueChanged = true;\n this.invalidValueString = null;\n this.checkInvalidValue(newProp.value);\n newProp.value = this.value;\n newProp.value = this.validateValue(newProp.value);\n Input.setValue(this.getFormattedValue(newProp.value), this.inputElement, this.floatLabelType, this.showClearButton);\n this.valueWithMinutes = newProp.value;\n this.setProperties({ value: newProp.value }, true);\n if (this.popupObj) {\n this.popupUpdate();\n }\n this.previousDateTime = new Date(this.inputElement.value);\n this.updateInput();\n this.changeTrigger(null);\n this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;\n break;\n case 'min':\n case 'max':\n this.getProperty(newProp, prop);\n this.updateInput();\n break;\n case 'enableRtl':\n Input.setEnableRtl(this.enableRtl, [this.inputWrapper.container]);\n break;\n case 'cssClass':\n if (!isNullOrUndefined(oldProp.cssClass)) {\n oldProp.cssClass = (oldProp.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(newProp.cssClass)) {\n newProp.cssClass = (newProp.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n Input.setCssClass(newProp.cssClass, [this.inputWrapper.container], oldProp.cssClass);\n if (this.dateTimeWrapper) {\n Input.setCssClass(newProp.cssClass, [this.dateTimeWrapper], oldProp.cssClass);\n }\n break;\n case 'locale':\n this.globalize = new Internationalization(this.locale);\n this.l10n.setLocale(this.locale);\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n Input.setPlaceholder(this.l10n.getConstant('placeholder'), this.inputElement);\n this.dateTimeFormat = this.cldrDateTimeFormat();\n _super.prototype.updateInput.call(this);\n break;\n case 'htmlAttributes':\n this.updateHtmlAttributeToElement();\n this.updateHtmlAttributeToWrapper();\n this.checkAttributes(true);\n break;\n case 'format':\n this.setProperties({ format: newProp.format }, true);\n this.checkFormat();\n this.dateTimeFormat = this.formatString;\n this.setValue();\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.inputElement);\n this.inputElement.setAttribute('aria-placeholder', newProp.placeholder);\n break;\n case 'enabled':\n Input.setEnabled(this.enabled, this.inputElement);\n if (!this.enabled) {\n this.inputElement.tabIndex = -1;\n }\n break;\n case 'strictMode':\n this.invalidValueString = null;\n this.updateInput();\n break;\n case 'width':\n this.setWidth(newProp.width);\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement);\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n Input.removeFloating(this.inputWrapper);\n Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);\n break;\n case 'scrollTo':\n if (this.checkDateValue(new Date(this.checkValue(newProp.scrollTo)))) {\n if (this.dateTimeWrapper) {\n this.setScrollTo();\n }\n this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkValue(newProp.scrollTo))) }, true);\n }\n else {\n this.setProperties({ scrollTo: null }, true);\n }\n break;\n default:\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp);\n break;\n }\n if (!this.isDynamicValueChanged) {\n this.hide(null);\n }\n this.isDynamicValueChanged = false;\n }\n };\n /**\n * To get component name.\n *\n * @returns {string} Returns the component name.\n * @private\n */\n DateTimePicker.prototype.getModuleName = function () {\n return 'datetimepicker';\n };\n DateTimePicker.prototype.restoreValue = function () {\n this.previousDateTime = this.previousDate;\n this.currentDate = this.value ? this.value : new Date();\n this.valueWithMinutes = this.value;\n this.previousDate = this.value;\n this.previousElementValue = this.previousElementValue = (isNullOrUndefined(this.inputValueCopy)) ? '' :\n this.getFormattedValue(this.inputValueCopy);\n };\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"timeFormat\", void 0);\n __decorate([\n Property(30)\n ], DateTimePicker.prototype, \"step\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"scrollTo\", void 0);\n __decorate([\n Property(1000)\n ], DateTimePicker.prototype, \"zIndex\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"keyConfigs\", void 0);\n __decorate([\n Property({})\n ], DateTimePicker.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(true)\n ], DateTimePicker.prototype, \"allowEdit\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"isMultiSelection\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"values\", void 0);\n __decorate([\n Property(true)\n ], DateTimePicker.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"placeholder\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"strictMode\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"serverTimezoneOffset\", void 0);\n __decorate([\n Property(new Date(1900, 0, 1))\n ], DateTimePicker.prototype, \"min\", void 0);\n __decorate([\n Property(new Date(2099, 11, 31))\n ], DateTimePicker.prototype, \"max\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"firstDayOfWeek\", void 0);\n __decorate([\n Property('Gregorian')\n ], DateTimePicker.prototype, \"calendarMode\", void 0);\n __decorate([\n Property('Month')\n ], DateTimePicker.prototype, \"start\", void 0);\n __decorate([\n Property('Month')\n ], DateTimePicker.prototype, \"depth\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"weekNumber\", void 0);\n __decorate([\n Property(true)\n ], DateTimePicker.prototype, \"showTodayButton\", void 0);\n __decorate([\n Property('Short')\n ], DateTimePicker.prototype, \"dayHeaderFormat\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"openOnFocus\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"cleared\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"destroyed\", void 0);\n DateTimePicker = __decorate([\n NotifyPropertyChanges\n ], DateTimePicker);\n return DateTimePicker;\n}(DatePicker));\nexport { DateTimePicker };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, EventHandler, Property, Event, Browser, L10n } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { attributes, addClass, removeClass, detach, closest } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, getValue, formatUnit, setValue, merge } from '@syncfusion/ej2-base';\nimport { Internationalization, getNumericObject, isBlazor } from '@syncfusion/ej2-base';\nimport { Input } from '../input/input';\nvar ROOT = 'e-control-wrapper e-numeric';\nvar SPINICON = 'e-input-group-icon';\nvar SPINUP = 'e-spin-up';\nvar SPINDOWN = 'e-spin-down';\nvar ERROR = 'e-error';\nvar INCREMENT = 'increment';\nvar DECREMENT = 'decrement';\nvar INTREGEXP = new RegExp('^(-)?(\\\\d*)$');\nvar DECIMALSEPARATOR = '.';\nvar COMPONENT = 'e-numerictextbox';\nvar CONTROL = 'e-control';\nvar NUMERIC_FOCUS = 'e-input-focus';\nvar HIDDENELEMENT = 'e-numeric-hidden';\nvar wrapperAttributes = ['title', 'style', 'class'];\n/**\n * Represents the NumericTextBox component that allows the user to enter only numeric values.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar NumericTextBox = /** @class */ (function (_super) {\n __extends(NumericTextBox, _super);\n /**\n *\n * @param {NumericTextBoxModel} options - Specifies the NumericTextBox model.\n * @param {string | HTMLInputElement} element - Specifies the element to render as component.\n * @private\n */\n function NumericTextBox(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isVue = false;\n _this.preventChange = false;\n _this.isAngular = false;\n _this.isDynamicChange = false;\n _this.numericOptions = options;\n return _this;\n }\n NumericTextBox.prototype.preRender = function () {\n this.isPrevFocused = false;\n this.decimalSeparator = '.';\n // eslint-disable-next-line no-useless-escape\n this.intRegExp = new RegExp('/^(-)?(\\d*)$/');\n this.isCalled = false;\n var ejInstance = getValue('ej2_instances', this.element);\n this.cloneElement = this.element.cloneNode(true);\n removeClass([this.cloneElement], [CONTROL, COMPONENT, 'e-lib']);\n this.angularTagName = null;\n this.formEle = closest(this.element, 'form');\n if (this.element.tagName === 'EJS-NUMERICTEXTBOX') {\n this.angularTagName = this.element.tagName;\n var input = this.createElement('input');\n var index = 0;\n for (index; index < this.element.attributes.length; index++) {\n var attributeName = this.element.attributes[index].nodeName;\n if (attributeName !== 'id') {\n input.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);\n input.innerHTML = this.element.innerHTML;\n }\n }\n if (this.element.hasAttribute('name')) {\n this.element.removeAttribute('name');\n }\n this.element.classList.remove('e-control', 'e-numerictextbox');\n this.element.appendChild(input);\n this.element = input;\n setValue('ej2_instances', ejInstance, this.element);\n }\n if (!(isBlazor() && this.isServerRendered)) {\n attributes(this.element, { 'role': 'spinbutton', 'tabindex': '0', 'autocomplete': 'off', 'aria-live': 'assertive' });\n var localeText = {\n incrementTitle: 'Increment value', decrementTitle: 'Decrement value', placeholder: this.placeholder\n };\n this.l10n = new L10n('numerictextbox', localeText, this.locale);\n if (this.l10n.getConstant('placeholder') !== '') {\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n }\n }\n this.isValidState = true;\n this.inputStyle = null;\n this.inputName = null;\n this.cultureInfo = {};\n this.initCultureInfo();\n this.initCultureFunc();\n this.prevValue = this.value;\n if (!(isBlazor() && this.isServerRendered)) {\n this.updateHTMLAttrToElement();\n this.checkAttributes(false);\n if (this.formEle) {\n this.inputEleValue = this.value;\n }\n }\n this.validateMinMax();\n this.validateStep();\n if (this.placeholder === null && !(isBlazor() && this.isServerRendered)) {\n this.updatePlaceholder();\n }\n };\n /**\n * To Initialize the control rendering\n *\n * @returns {void}\n * @private\n */\n NumericTextBox.prototype.render = function () {\n if (this.element.tagName.toLowerCase() === 'input') {\n if (!(isBlazor() && this.isServerRendered)) {\n this.createWrapper();\n if (this.showSpinButton) {\n this.spinBtnCreation();\n }\n this.setElementWidth(this.width);\n if (!this.container.classList.contains('e-input-group')) {\n this.container.classList.add('e-input-group');\n }\n this.changeValue(this.value === null || isNaN(this.value) ?\n null : this.strictMode ? this.trimValue(this.value) : this.value);\n }\n else {\n this.container = this.element.parentElement;\n this.inputWrapper = { container: this.container };\n this.hiddenInput = this.container.querySelector('input[type=\"hidden\"]');\n if (this.showClearButton) {\n this.inputWrapper.clearButton = this.container.querySelector('.e-clear-icon');\n Input.wireClearBtnEvents(this.element, this.inputWrapper.clearButton, this.inputWrapper.container);\n }\n if (this.showSpinButton) {\n this.spinDown = this.container.querySelector('.' + SPINDOWN);\n this.spinUp = this.container.querySelector('.' + SPINUP);\n this.wireSpinBtnEvents();\n }\n Input.bindInitialEvent({\n element: this.element, buttons: null, customTag: null, floatLabelType: this.floatLabelType, properties: this.properties\n });\n }\n this.wireEvents();\n if (!(isBlazor() && this.isServerRendered)) {\n if (this.value !== null && !isNaN(this.value)) {\n if (this.decimals) {\n this.setProperties({ value: this.roundNumber(this.value, this.decimals) }, true);\n }\n }\n if (this.element.getAttribute('value') || this.value) {\n this.element.setAttribute('value', this.element.value);\n this.hiddenInput.setAttribute('value', this.hiddenInput.value);\n }\n }\n this.elementPrevValue = this.element.value;\n if (this.element.hasAttribute('data-val')) {\n this.element.setAttribute('data-val', 'false');\n }\n this.renderComplete();\n }\n };\n NumericTextBox.prototype.checkAttributes = function (isDynamic) {\n var attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['value', 'min', 'max', 'step', 'disabled', 'readonly', 'style', 'name', 'placeholder'];\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.element.getAttribute(prop))) {\n switch (prop) {\n case 'disabled':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['enabled'] === undefined)) || isDynamic) {\n var enabled = this.element.getAttribute(prop) === 'disabled' || this.element.getAttribute(prop) === ''\n || this.element.getAttribute(prop) === 'true' ? false : true;\n this.setProperties({ enabled: enabled }, !isDynamic);\n }\n break;\n case 'readonly':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['readonly'] === undefined)) || isDynamic) {\n var readonly = this.element.getAttribute(prop) === 'readonly' || this.element.getAttribute(prop) === ''\n || this.element.getAttribute(prop) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !isDynamic);\n }\n break;\n case 'placeholder':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.element.placeholder }, !isDynamic);\n }\n break;\n case 'value':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['value'] === undefined)) || isDynamic) {\n var setNumber = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n this.setProperties(setValue(prop, setNumber, {}), !isDynamic);\n }\n break;\n case 'min':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['min'] === undefined)) || isDynamic) {\n var minValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if (minValue !== null && !isNaN(minValue)) {\n this.setProperties(setValue(prop, minValue, {}), !isDynamic);\n }\n }\n break;\n case 'max':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['max'] === undefined)) || isDynamic) {\n var maxValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if (maxValue !== null && !isNaN(maxValue)) {\n this.setProperties(setValue(prop, maxValue, {}), !isDynamic);\n }\n }\n break;\n case 'step':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['step'] === undefined)) || isDynamic) {\n var stepValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if (stepValue !== null && !isNaN(stepValue)) {\n this.setProperties(setValue(prop, stepValue, {}), !isDynamic);\n }\n }\n break;\n case 'style':\n this.inputStyle = this.element.getAttribute(prop);\n break;\n case 'name':\n this.inputName = this.element.getAttribute(prop);\n break;\n default:\n {\n var value = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if ((value !== null && !isNaN(value)) || (prop === 'value')) {\n this.setProperties(setValue(prop, value, {}), true);\n }\n }\n break;\n }\n }\n }\n };\n NumericTextBox.prototype.updatePlaceholder = function () {\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n };\n NumericTextBox.prototype.initCultureFunc = function () {\n this.instance = new Internationalization(this.locale);\n };\n NumericTextBox.prototype.initCultureInfo = function () {\n this.cultureInfo.format = this.format;\n if (getValue('currency', this) !== null) {\n setValue('currency', this.currency, this.cultureInfo);\n this.setProperties({ currencyCode: this.currency }, true);\n }\n };\n /* Wrapper creation */\n NumericTextBox.prototype.createWrapper = function () {\n var updatedCssClassValue = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassValue = this.getNumericValidClassList(this.cssClass);\n }\n var inputObj = Input.createInput({\n element: this.element,\n floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.readonly,\n placeholder: this.placeholder,\n cssClass: updatedCssClassValue,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton,\n enabled: this.enabled\n }\n }, this.createElement);\n this.inputWrapper = inputObj;\n this.container = inputObj.container;\n this.container.setAttribute('class', ROOT + ' ' + this.container.getAttribute('class'));\n this.updateHTMLAttrToWrapper();\n if (this.readonly) {\n attributes(this.element, { 'aria-readonly': 'true' });\n }\n this.hiddenInput = (this.createElement('input', { attrs: { type: 'text',\n 'validateHidden': 'true', 'class': HIDDENELEMENT } }));\n this.inputName = this.inputName !== null ? this.inputName : this.element.id;\n this.element.removeAttribute('name');\n attributes(this.hiddenInput, { 'name': this.inputName });\n this.container.insertBefore(this.hiddenInput, this.container.childNodes[1]);\n this.updateDataAttribute(false);\n if (this.inputStyle !== null) {\n attributes(this.container, { 'style': this.inputStyle });\n }\n };\n NumericTextBox.prototype.updateDataAttribute = function (isDynamic) {\n var attr = {};\n if (!isDynamic) {\n for (var a = 0; a < this.element.attributes.length; a++) {\n attr[this.element.attributes[a].name] = this.element.getAttribute(this.element.attributes[a].name);\n }\n }\n else {\n attr = this.htmlAttributes;\n }\n for (var _i = 0, _a = Object.keys(attr); _i < _a.length; _i++) {\n var key = _a[_i];\n if (key.indexOf('data') === 0) {\n this.hiddenInput.setAttribute(key, attr[key]);\n }\n }\n };\n NumericTextBox.prototype.updateHTMLAttrToElement = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var pro = _a[_i];\n if (wrapperAttributes.indexOf(pro) < 0) {\n this.element.setAttribute(pro, this.htmlAttributes[pro]);\n }\n }\n }\n };\n NumericTextBox.prototype.updateCssClass = function (newClass, oldClass) {\n Input.setCssClass(this.getNumericValidClassList(newClass), [this.container], this.getNumericValidClassList(oldClass));\n };\n NumericTextBox.prototype.getNumericValidClassList = function (numericClassName) {\n var result = numericClassName;\n if (!isNullOrUndefined(numericClassName) && numericClassName !== '') {\n result = (numericClassName.replace(/\\s+/g, ' ')).trim();\n }\n return result;\n };\n NumericTextBox.prototype.updateHTMLAttrToWrapper = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var pro = _a[_i];\n if (wrapperAttributes.indexOf(pro) > -1) {\n if (pro === 'class') {\n var updatedClassValue = this.getNumericValidClassList(this.htmlAttributes[pro]);\n if (updatedClassValue !== '') {\n addClass([this.container], updatedClassValue.split(' '));\n }\n }\n else if (pro === 'style') {\n var numericStyle = this.container.getAttribute(pro);\n numericStyle = !isNullOrUndefined(numericStyle) ? (numericStyle + this.htmlAttributes[pro]) :\n this.htmlAttributes[pro];\n this.container.setAttribute(pro, numericStyle);\n }\n else {\n this.container.setAttribute(pro, this.htmlAttributes[pro]);\n }\n }\n }\n }\n };\n NumericTextBox.prototype.setElementWidth = function (width) {\n if (!isNullOrUndefined(width)) {\n if (typeof width === 'number') {\n this.container.style.width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n this.container.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));\n }\n }\n };\n /* Spinner creation */\n NumericTextBox.prototype.spinBtnCreation = function () {\n this.spinDown = Input.appendSpan(SPINICON + ' ' + SPINDOWN, this.container, this.createElement);\n attributes(this.spinDown, {\n 'title': this.l10n.getConstant('decrementTitle'),\n 'aria-label': this.l10n.getConstant('decrementTitle')\n });\n this.spinUp = Input.appendSpan(SPINICON + ' ' + SPINUP, this.container, this.createElement);\n attributes(this.spinUp, {\n 'title': this.l10n.getConstant('incrementTitle'),\n 'aria-label': this.l10n.getConstant('incrementTitle')\n });\n this.wireSpinBtnEvents();\n };\n NumericTextBox.prototype.validateMinMax = function () {\n if (!(typeof (this.min) === 'number' && !isNaN(this.min))) {\n this.setProperties({ min: -(Number.MAX_VALUE) }, true);\n }\n if (!(typeof (this.max) === 'number' && !isNaN(this.max))) {\n this.setProperties({ max: Number.MAX_VALUE }, true);\n }\n if (this.decimals !== null) {\n if (this.min !== -(Number.MAX_VALUE)) {\n this.setProperties({ min: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.min)) }, true);\n }\n if (this.max !== (Number.MAX_VALUE)) {\n this.setProperties({ max: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.max)) }, true);\n }\n }\n this.setProperties({ min: this.min > this.max ? this.max : this.min }, true);\n attributes(this.element, { 'aria-valuemin': this.min.toString(), 'aria-valuemax': this.max.toString() });\n };\n NumericTextBox.prototype.formattedValue = function (decimals, value) {\n return this.instance.getNumberFormat({\n maximumFractionDigits: decimals,\n minimumFractionDigits: decimals, useGrouping: false\n })(value);\n };\n NumericTextBox.prototype.validateStep = function () {\n if (this.decimals !== null) {\n this.setProperties({ step: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.step)) }, true);\n }\n };\n NumericTextBox.prototype.action = function (operation, event) {\n this.isInteract = true;\n var value = this.isFocused ? this.instance.getNumberParser({ format: 'n' })(this.element.value) : this.value;\n this.changeValue(this.performAction(value, this.step, operation));\n this.raiseChangeEvent(event);\n };\n NumericTextBox.prototype.checkErrorClass = function () {\n if (this.isValidState) {\n removeClass([this.container], ERROR);\n }\n else {\n addClass([this.container], ERROR);\n }\n attributes(this.element, { 'aria-invalid': this.isValidState ? 'false' : 'true' });\n };\n NumericTextBox.prototype.bindClearEvent = function () {\n if (this.showClearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler, this);\n }\n };\n NumericTextBox.prototype.resetHandler = function (e) {\n e.preventDefault();\n if (!(this.inputWrapper.clearButton.classList.contains('e-clear-icon-hide'))) {\n this.clear(e);\n }\n this.isInteract = true;\n this.raiseChangeEvent(e);\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n NumericTextBox.prototype.clear = function (event) {\n this.setProperties({ value: null }, true);\n this.setElementValue('');\n this.hiddenInput.value = '';\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n NumericTextBox.prototype.resetFormHandler = function () {\n if (this.element.tagName === 'EJS-NUMERICTEXTBOX') {\n this.updateValue(null);\n }\n else {\n this.updateValue(this.inputEleValue);\n }\n };\n NumericTextBox.prototype.setSpinButton = function () {\n if (!isNullOrUndefined(this.spinDown)) {\n attributes(this.spinDown, {\n 'title': this.l10n.getConstant('decrementTitle'),\n 'aria-label': this.l10n.getConstant('decrementTitle')\n });\n }\n if (!isNullOrUndefined(this.spinUp)) {\n attributes(this.spinUp, {\n 'title': this.l10n.getConstant('incrementTitle'),\n 'aria-label': this.l10n.getConstant('incrementTitle')\n });\n }\n };\n NumericTextBox.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'focus', this.focusHandler, this);\n EventHandler.add(this.element, 'blur', this.focusOutHandler, this);\n EventHandler.add(this.element, 'keydown', this.keyDownHandler, this);\n EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);\n EventHandler.add(this.element, 'input', this.inputHandler, this);\n EventHandler.add(this.element, 'keypress', this.keyPressHandler, this);\n EventHandler.add(this.element, 'change', this.changeHandler, this);\n EventHandler.add(this.element, 'paste', this.pasteHandler, this);\n if (this.enabled) {\n this.bindClearEvent();\n if (this.formEle) {\n EventHandler.add(this.formEle, 'reset', this.resetFormHandler, this);\n }\n }\n };\n NumericTextBox.prototype.wireSpinBtnEvents = function () {\n /* bind spin button events */\n EventHandler.add(this.spinUp, Browser.touchStartEvent, this.mouseDownOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchStartEvent, this.mouseDownOnSpinner, this);\n EventHandler.add(this.spinUp, Browser.touchEndEvent, this.mouseUpOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchEndEvent, this.mouseUpOnSpinner, this);\n EventHandler.add(this.spinUp, Browser.touchMoveEvent, this.touchMoveOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchMoveEvent, this.touchMoveOnSpinner, this);\n };\n NumericTextBox.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'blur', this.focusOutHandler);\n EventHandler.remove(this.element, 'keyup', this.keyUpHandler);\n EventHandler.remove(this.element, 'input', this.inputHandler);\n EventHandler.remove(this.element, 'keydown', this.keyDownHandler);\n EventHandler.remove(this.element, 'keypress', this.keyPressHandler);\n EventHandler.remove(this.element, 'change', this.changeHandler);\n EventHandler.remove(this.element, 'paste', this.pasteHandler);\n if (this.formEle) {\n EventHandler.remove(this.formEle, 'reset', this.resetFormHandler);\n }\n };\n NumericTextBox.prototype.unwireSpinBtnEvents = function () {\n /* unbind spin button events */\n EventHandler.remove(this.spinUp, Browser.touchStartEvent, this.mouseDownOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchStartEvent, this.mouseDownOnSpinner);\n EventHandler.remove(this.spinUp, Browser.touchEndEvent, this.mouseUpOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchEndEvent, this.mouseUpOnSpinner);\n EventHandler.remove(this.spinUp, Browser.touchMoveEvent, this.touchMoveOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchMoveEvent, this.touchMoveOnSpinner);\n };\n NumericTextBox.prototype.changeHandler = function (event) {\n event.stopPropagation();\n if (!this.element.value.length) {\n this.setProperties({ value: null }, true);\n }\n var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n this.updateValue(parsedInput, event);\n };\n NumericTextBox.prototype.raiseChangeEvent = function (event) {\n if (this.prevValue !== this.value) {\n var eventArgs = {};\n this.changeEventArgs = { value: this.value, previousValue: this.prevValue, isInteracted: this.isInteract,\n isInteraction: this.isInteract, event: event };\n if (event) {\n this.changeEventArgs.event = event;\n }\n if (this.changeEventArgs.event === undefined) {\n this.changeEventArgs.isInteracted = false;\n this.changeEventArgs.isInteraction = false;\n }\n merge(eventArgs, this.changeEventArgs);\n this.prevValue = this.value;\n this.isInteract = false;\n this.elementPrevValue = this.element.value;\n this.preventChange = false;\n this.trigger('change', eventArgs);\n }\n };\n NumericTextBox.prototype.pasteHandler = function () {\n var _this = this;\n if (!this.enabled || this.readonly) {\n return;\n }\n var beforeUpdate = this.element.value;\n setTimeout(function () {\n if (!_this.numericRegex().test(_this.element.value)) {\n _this.setElementValue(beforeUpdate);\n }\n });\n };\n NumericTextBox.prototype.preventHandler = function () {\n var _this = this;\n var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);\n setTimeout(function () {\n if (_this.element.selectionStart > 0) {\n var currentPos = _this.element.selectionStart;\n var prevPos = _this.element.selectionStart - 1;\n var start = 0;\n var valArray = _this.element.value.split('');\n var numericObject = getNumericObject(_this.locale);\n var decimalSeparator = getValue('decimal', numericObject);\n var ignoreKeyCode = decimalSeparator.charCodeAt(0);\n if (_this.element.value[prevPos] === ' ' && _this.element.selectionStart > 0 && !iOS) {\n if (isNullOrUndefined(_this.prevVal)) {\n _this.element.value = _this.element.value.trim();\n }\n else if (prevPos !== 0) {\n _this.element.value = _this.prevVal;\n }\n else if (prevPos === 0) {\n _this.element.value = _this.element.value.trim();\n }\n _this.element.setSelectionRange(prevPos, prevPos);\n }\n else if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1])) &&\n _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) !== 45) {\n if ((valArray.indexOf(_this.element.value[_this.element.selectionStart - 1]) !==\n valArray.lastIndexOf(_this.element.value[_this.element.selectionStart - 1]) &&\n _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) === ignoreKeyCode) ||\n _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) !== ignoreKeyCode) {\n _this.element.value = _this.element.value.substring(0, prevPos) +\n _this.element.value.substring(currentPos, _this.element.value.length);\n _this.element.setSelectionRange(prevPos, prevPos);\n if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1])) && _this.element.selectionStart > 0\n && _this.element.value.length) {\n _this.preventHandler();\n }\n }\n }\n else if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 2])) && _this.element.selectionStart > 1 &&\n _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) !== 45) {\n if ((valArray.indexOf(_this.element.value[_this.element.selectionStart - 2]) !==\n valArray.lastIndexOf(_this.element.value[_this.element.selectionStart - 2]) &&\n _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) === ignoreKeyCode) ||\n _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) !== ignoreKeyCode) {\n _this.element.setSelectionRange(prevPos, prevPos);\n _this.nextEle = _this.element.value[_this.element.selectionStart];\n _this.cursorPosChanged = true;\n _this.preventHandler();\n }\n }\n if (_this.cursorPosChanged === true && _this.element.value[_this.element.selectionStart] === _this.nextEle &&\n isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1]))) {\n _this.element.setSelectionRange(_this.element.selectionStart + 1, _this.element.selectionStart + 1);\n _this.cursorPosChanged = false;\n _this.nextEle = null;\n }\n if (_this.element.value.trim() === '') {\n _this.element.setSelectionRange(start, start);\n }\n if (_this.element.selectionStart > 0) {\n if ((_this.element.value[_this.element.selectionStart - 1].charCodeAt(0) === 45) && _this.element.selectionStart > 1) {\n if (isNullOrUndefined(_this.prevVal)) {\n // eslint-disable-next-line no-self-assign\n _this.element.value = _this.element.value;\n }\n else {\n _this.element.value = _this.prevVal;\n }\n _this.element.setSelectionRange(_this.element.selectionStart, _this.element.selectionStart);\n }\n }\n _this.prevVal = _this.element.value;\n }\n });\n };\n NumericTextBox.prototype.keyUpHandler = function () {\n if (!this.enabled || this.readonly) {\n return;\n }\n var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);\n if (!iOS && Browser.isDevice) {\n this.preventHandler();\n }\n var parseValue = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n parseValue = parseValue === null || isNaN(parseValue) ? null : parseValue;\n this.hiddenInput.value = parseValue || parseValue === 0 ? parseValue.toString() : null;\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n NumericTextBox.prototype.inputHandler = function (event) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-this-alias\n var numerictextboxObj = this;\n if (!this.enabled || this.readonly) {\n return;\n }\n var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);\n var fireFox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n if ((fireFox || iOS) && Browser.isDevice) {\n this.preventHandler();\n }\n /* istanbul ignore next */\n if (this.isAngular\n && this.element.value !== getValue('decimal', getNumericObject(this.locale))\n && this.element.value !== getValue('minusSign', getNumericObject(this.locale))) {\n var parsedValue = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n parsedValue = isNaN(parsedValue) ? null : parsedValue;\n numerictextboxObj.localChange({ value: parsedValue });\n this.preventChange = true;\n }\n if (this.isVue) {\n var current = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n var previous = this.instance.getNumberParser({ format: 'n' })(this.elementPrevValue);\n var eventArgs = {\n event: event,\n value: (current === null || isNaN(current) ? null : current),\n previousValue: (previous === null || isNaN(previous) ? null : previous)\n };\n this.preventChange = true;\n this.elementPrevValue = this.element.value;\n this.trigger('input', eventArgs);\n }\n };\n NumericTextBox.prototype.keyDownHandler = function (event) {\n if (!this.readonly) {\n switch (event.keyCode) {\n case 38:\n event.preventDefault();\n this.action(INCREMENT, event);\n break;\n case 40:\n event.preventDefault();\n this.action(DECREMENT, event);\n break;\n default: break;\n }\n }\n };\n NumericTextBox.prototype.performAction = function (value, step, operation) {\n if (value === null || isNaN(value)) {\n value = 0;\n }\n var updatedValue = operation === INCREMENT ? value + step : value - step;\n updatedValue = this.correctRounding(value, step, updatedValue);\n return this.strictMode ? this.trimValue(updatedValue) : updatedValue;\n };\n NumericTextBox.prototype.correctRounding = function (value, step, result) {\n var floatExp = new RegExp('[,.](.*)');\n var floatValue = floatExp.test(value.toString());\n var floatStep = floatExp.test(step.toString());\n if (floatValue || floatStep) {\n var valueCount = floatValue ? floatExp.exec(value.toString())[0].length : 0;\n var stepCount = floatStep ? floatExp.exec(step.toString())[0].length : 0;\n var max = Math.max(valueCount, stepCount);\n return value = this.roundValue(result, max);\n }\n return result;\n };\n NumericTextBox.prototype.roundValue = function (result, precision) {\n precision = precision || 0;\n var divide = Math.pow(10, precision);\n return result *= divide, result = Math.round(result) / divide;\n };\n NumericTextBox.prototype.updateValue = function (value, event) {\n if (event) {\n this.isInteract = true;\n }\n if (value !== null && !isNaN(value)) {\n if (this.decimals) {\n value = this.roundNumber(value, this.decimals);\n }\n }\n this.changeValue(value === null || isNaN(value) ? null : this.strictMode ? this.trimValue(value) : value);\n /* istanbul ignore next */\n if (!this.isDynamicChange) {\n this.raiseChangeEvent(event);\n }\n };\n NumericTextBox.prototype.updateCurrency = function (prop, propVal) {\n setValue(prop, propVal, this.cultureInfo);\n this.updateValue(this.value);\n };\n NumericTextBox.prototype.changeValue = function (value) {\n if (!(value || value === 0)) {\n value = null;\n this.setProperties({ value: value }, true);\n }\n else {\n var numberOfDecimals = this.getNumberOfDecimals(value);\n this.setProperties({ value: this.roundNumber(value, numberOfDecimals) }, true);\n }\n this.modifyText();\n if (!this.strictMode) {\n this.validateState();\n }\n };\n NumericTextBox.prototype.modifyText = function () {\n if (this.value || this.value === 0) {\n var value = this.formatNumber();\n var elementValue = this.isFocused ? value : this.instance.getNumberFormat(this.cultureInfo)(this.value);\n this.setElementValue(elementValue);\n attributes(this.element, { 'aria-valuenow': value });\n this.hiddenInput.value = this.value.toString();\n if (this.value !== null && this.serverDecimalSeparator) {\n this.hiddenInput.value = this.hiddenInput.value.replace('.', this.serverDecimalSeparator);\n }\n }\n else {\n this.setElementValue('');\n this.element.removeAttribute('aria-valuenow');\n this.hiddenInput.value = null;\n }\n };\n NumericTextBox.prototype.setElementValue = function (val, element) {\n Input.setValue(val, (element ? element : this.element), this.floatLabelType, this.showClearButton);\n };\n NumericTextBox.prototype.validateState = function () {\n this.isValidState = true;\n if (this.value || this.value === 0) {\n this.isValidState = !(this.value > this.max || this.value < this.min);\n }\n this.checkErrorClass();\n };\n NumericTextBox.prototype.getNumberOfDecimals = function (value) {\n var numberOfDecimals;\n // eslint-disable-next-line no-useless-escape\n var EXPREGEXP = new RegExp('[eE][\\-+]?([0-9]+)');\n var valueString = value.toString();\n if (EXPREGEXP.test(valueString)) {\n var result = EXPREGEXP.exec(valueString);\n if (!isNullOrUndefined(result)) {\n valueString = value.toFixed(Math.min(parseInt(result[1], 10), 20));\n }\n }\n var decimalPart = valueString.split('.')[1];\n numberOfDecimals = !decimalPart || !decimalPart.length ? 0 : decimalPart.length;\n if (this.decimals !== null) {\n numberOfDecimals = numberOfDecimals < this.decimals ? numberOfDecimals : this.decimals;\n }\n return numberOfDecimals;\n };\n NumericTextBox.prototype.formatNumber = function () {\n var numberOfDecimals = this.getNumberOfDecimals(this.value);\n return this.instance.getNumberFormat({\n maximumFractionDigits: numberOfDecimals,\n minimumFractionDigits: numberOfDecimals, useGrouping: false\n })(this.value);\n };\n NumericTextBox.prototype.trimValue = function (value) {\n if (value > this.max) {\n return this.max;\n }\n if (value < this.min) {\n return this.min;\n }\n return value;\n };\n NumericTextBox.prototype.roundNumber = function (value, precision) {\n var result = value;\n var decimals = precision || 0;\n var result1 = result.toString().split('e');\n result = Math.round(Number(result1[0] + 'e' + (result1[1] ? (Number(result1[1]) + decimals) : decimals)));\n var result2 = result.toString().split('e');\n result = Number(result2[0] + 'e' + (result2[1] ? (Number(result2[1]) - decimals) : -decimals));\n return Number(result.toFixed(decimals));\n };\n NumericTextBox.prototype.cancelEvent = function (event) {\n event.preventDefault();\n return false;\n };\n NumericTextBox.prototype.keyPressHandler = function (event) {\n if (!this.enabled || this.readonly) {\n return true;\n }\n if (!Browser.isDevice && Browser.info.version === '11.0' && event.keyCode === 13) {\n var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n this.updateValue(parsedInput, event);\n return true;\n }\n if (event.which === 0 || event.metaKey || event.ctrlKey || event.keyCode === 8 || event.keyCode === 13) {\n return true;\n }\n var currentChar = String.fromCharCode(event.which);\n var text = this.element.value;\n text = text.substring(0, this.element.selectionStart) + currentChar + text.substring(this.element.selectionEnd);\n if (!this.numericRegex().test(text)) {\n event.preventDefault();\n event.stopPropagation();\n return false;\n }\n else {\n return true;\n }\n };\n NumericTextBox.prototype.numericRegex = function () {\n var numericObject = getNumericObject(this.locale);\n var decimalSeparator = getValue('decimal', numericObject);\n var fractionRule = '*';\n if (decimalSeparator === DECIMALSEPARATOR) {\n decimalSeparator = '\\\\' + decimalSeparator;\n }\n if (this.decimals === 0 && this.validateDecimalOnType) {\n return INTREGEXP;\n }\n if (this.decimals && this.validateDecimalOnType) {\n fractionRule = '{0,' + this.decimals + '}';\n }\n return new RegExp('^(-)?(((\\\\d+(' + decimalSeparator + '\\\\d' + fractionRule +\n ')?)|(' + decimalSeparator + '\\\\d' + fractionRule + ')))?$');\n };\n NumericTextBox.prototype.mouseWheel = function (event) {\n event.preventDefault();\n var delta;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var rawEvent = event;\n if (rawEvent.wheelDelta) {\n delta = rawEvent.wheelDelta / 120;\n }\n else if (rawEvent.detail) {\n delta = -rawEvent.detail / 3;\n }\n if (delta > 0) {\n this.action(INCREMENT, event);\n }\n else if (delta < 0) {\n this.action(DECREMENT, event);\n }\n this.cancelEvent(event);\n };\n NumericTextBox.prototype.focusHandler = function (event) {\n var _this = this;\n this.focusEventArgs = { event: event, value: this.value, container: this.container };\n this.trigger('focus', this.focusEventArgs);\n if (!this.enabled || this.readonly) {\n return;\n }\n this.isFocused = true;\n removeClass([this.container], ERROR);\n this.prevValue = this.value;\n if ((this.value || this.value === 0)) {\n var formatValue_1 = this.formatNumber();\n this.setElementValue(formatValue_1);\n if (!this.isPrevFocused) {\n if (!Browser.isDevice && Browser.info.version === '11.0') {\n this.element.setSelectionRange(0, formatValue_1.length);\n }\n else {\n var delay = (Browser.isDevice && Browser.isIos) ? 600 : 0;\n setTimeout(function () {\n _this.element.setSelectionRange(0, formatValue_1.length);\n }, delay);\n }\n }\n }\n if (!Browser.isDevice) {\n EventHandler.add(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel, this);\n }\n };\n NumericTextBox.prototype.focusOutHandler = function (event) {\n var _this = this;\n this.blurEventArgs = { event: event, value: this.value, container: this.container };\n this.trigger('blur', this.blurEventArgs);\n if (!this.enabled || this.readonly) {\n return;\n }\n if (this.isPrevFocused) {\n event.preventDefault();\n if (Browser.isDevice) {\n var value_1 = this.element.value;\n this.element.focus();\n this.isPrevFocused = false;\n var ele_1 = this.element;\n setTimeout(function () {\n _this.setElementValue(value_1, ele_1);\n }, 200);\n }\n }\n else {\n this.isFocused = false;\n if (!this.element.value.length) {\n this.setProperties({ value: null }, true);\n }\n var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n this.updateValue(parsedInput);\n if (!Browser.isDevice) {\n EventHandler.remove(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel);\n }\n }\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var focusEvent = document.createEvent('FocusEvent');\n focusEvent.initEvent('focusout', false, true);\n element.dispatchEvent(focusEvent);\n }\n };\n NumericTextBox.prototype.mouseDownOnSpinner = function (event) {\n var _this = this;\n if (this.isFocused) {\n this.isPrevFocused = true;\n event.preventDefault();\n }\n if (!this.getElementData(event)) {\n return;\n }\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var result = this.getElementData(event);\n var target = event.currentTarget;\n var action = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT;\n EventHandler.add(target, 'mouseleave', this.mouseUpClick, this);\n this.timeOut = setInterval(function () {\n _this.isCalled = true;\n _this.action(action, event);\n }, 150);\n EventHandler.add(document, 'mouseup', this.mouseUpClick, this);\n };\n NumericTextBox.prototype.touchMoveOnSpinner = function (event) {\n var target;\n if (event.type === \"touchmove\") {\n var touchEvent = event.touches;\n target = touchEvent.length && document.elementFromPoint(touchEvent[0].pageX, touchEvent[0].pageY);\n }\n else {\n target = document.elementFromPoint(event.clientX, event.clientY);\n }\n if (!(target.classList.contains(SPINICON))) {\n clearInterval(this.timeOut);\n }\n };\n NumericTextBox.prototype.mouseUpOnSpinner = function (event) {\n if (this.isPrevFocused) {\n this.element.focus();\n if (!Browser.isDevice) {\n this.isPrevFocused = false;\n }\n }\n if (!Browser.isDevice) {\n event.preventDefault();\n }\n if (!this.getElementData(event)) {\n return;\n }\n var target = event.currentTarget;\n var action = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT;\n EventHandler.remove(target, 'mouseleave', this.mouseUpClick);\n if (!this.isCalled) {\n this.action(action, event);\n }\n this.isCalled = false;\n EventHandler.remove(document, 'mouseup', this.mouseUpClick);\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n NumericTextBox.prototype.getElementData = function (event) {\n if ((event.which && event.which === 3) || (event.button && event.button === 2)\n || !this.enabled || this.readonly) {\n return false;\n }\n clearInterval(this.timeOut);\n return true;\n };\n NumericTextBox.prototype.floatLabelTypeUpdate = function () {\n Input.removeFloating(this.inputWrapper);\n var hiddenInput = this.hiddenInput;\n this.hiddenInput.remove();\n Input.addFloating(this.element, this.floatLabelType, this.placeholder, this.createElement);\n this.container.insertBefore(hiddenInput, this.container.childNodes[1]);\n };\n NumericTextBox.prototype.mouseUpClick = function (event) {\n event.stopPropagation();\n clearInterval(this.timeOut);\n this.isCalled = false;\n EventHandler.remove(this.spinUp, 'mouseleave', this.mouseUpClick);\n EventHandler.remove(this.spinDown, 'mouseleave', this.mouseUpClick);\n };\n /**\n * Increments the NumericTextBox value with the specified step value.\n *\n * @param {number} step - Specifies the value used to increment the NumericTextBox value.\n * if its not given then numeric value will be incremented based on the step property value.\n * @returns {void}\n */\n NumericTextBox.prototype.increment = function (step) {\n if (step === void 0) { step = this.step; }\n this.isInteract = false;\n this.changeValue(this.performAction(this.value, step, INCREMENT));\n this.raiseChangeEvent();\n };\n /**\n * Decrements the NumericTextBox value with specified step value.\n *\n * @param {number} step - Specifies the value used to decrement the NumericTextBox value.\n * if its not given then numeric value will be decremented based on the step property value.\n * @returns {void}\n */\n NumericTextBox.prototype.decrement = function (step) {\n if (step === void 0) { step = this.step; }\n this.isInteract = false;\n this.changeValue(this.performAction(this.value, step, DECREMENT));\n this.raiseChangeEvent();\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers.\n * Also it maintains the initial input element from the DOM.\n *\n * @method destroy\n * @returns {void}\n */\n NumericTextBox.prototype.destroy = function () {\n this.unwireEvents();\n if (!(isBlazor() && this.isServerRendered)) {\n detach(this.hiddenInput);\n if (this.showSpinButton) {\n this.unwireSpinBtnEvents();\n detach(this.spinUp);\n detach(this.spinDown);\n }\n var attrArray = ['aria-labelledby', 'role', 'autocomplete', 'aria-readonly',\n 'autocorrect', 'aria-disabled', 'aria-placeholder', 'autocapitalize',\n 'spellcheck', 'aria-autocomplete', 'tabindex', 'aria-valuemin',\n 'aria-valuemax', 'aria-live', 'aria-valuenow', 'aria-invalid'];\n for (var i = 0; i < attrArray.length; i++) {\n this.element.removeAttribute(attrArray[i]);\n }\n this.element.classList.remove('e-input');\n this.container.insertAdjacentElement('afterend', this.element);\n detach(this.container);\n _super.prototype.destroy.call(this);\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns */\n /**\n * Returns the value of NumericTextBox with the format applied to the NumericTextBox.\n *\n */\n NumericTextBox.prototype.getText = function () {\n return this.element.value;\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns */\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n NumericTextBox.prototype.focusIn = function () {\n if (document.activeElement !== this.element && this.enabled) {\n this.element.focus();\n addClass([this.container], [NUMERIC_FOCUS]);\n }\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n NumericTextBox.prototype.focusOut = function () {\n if (document.activeElement === this.element && this.enabled) {\n this.element.blur();\n removeClass([this.container], [NUMERIC_FOCUS]);\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets the properties to be maintained in the persisted state.\n *\n * @returns {string}\n */\n NumericTextBox.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Calls internally if any of the property value is changed.\n *\n * @param {NumericTextBoxModel} newProp - Returns the dynamic property value of the component.\n * @param {NumericTextBoxModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n NumericTextBox.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n this.setElementWidth(newProp.width);\n break;\n case 'cssClass':\n this.updateCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n case 'enabled':\n Input.setEnabled(newProp.enabled, this.element);\n break;\n case 'enableRtl':\n Input.setEnableRtl(newProp.enableRtl, [this.container]);\n break;\n case 'readonly':\n Input.setReadonly(newProp.readonly, this.element);\n if (this.readonly) {\n attributes(this.element, { 'aria-readonly': 'true' });\n }\n else {\n this.element.removeAttribute('aria-readonly');\n }\n break;\n case 'htmlAttributes':\n this.updateHTMLAttrToElement();\n this.updateHTMLAttrToWrapper();\n this.updateDataAttribute(true);\n this.checkAttributes(true);\n Input.validateInputType(this.container, this.element);\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.element);\n break;\n case 'step':\n this.step = newProp.step;\n this.validateStep();\n break;\n case 'showSpinButton':\n this.updateSpinButton(newProp);\n break;\n case 'showClearButton':\n this.updateClearButton(newProp);\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n this.floatLabelTypeUpdate();\n break;\n case 'value':\n this.isDynamicChange = (this.isAngular || this.isVue) && this.preventChange;\n this.updateValue(newProp.value);\n if (this.isDynamicChange) {\n this.preventChange = false;\n this.isDynamicChange = false;\n }\n break;\n case 'min':\n case 'max':\n setValue(prop, getValue(prop, newProp), this);\n this.validateMinMax();\n this.updateValue(this.value);\n break;\n case 'strictMode':\n this.strictMode = newProp.strictMode;\n this.updateValue(this.value);\n this.validateState();\n break;\n case 'locale':\n this.initCultureFunc();\n this.l10n.setLocale(this.locale);\n this.setSpinButton();\n this.updatePlaceholder();\n Input.setPlaceholder(this.placeholder, this.element);\n this.updateValue(this.value);\n break;\n case 'currency':\n {\n var propVal = getValue(prop, newProp);\n this.setProperties({ currencyCode: propVal }, true);\n this.updateCurrency(prop, propVal);\n }\n break;\n case 'currencyCode':\n {\n var propValue = getValue(prop, newProp);\n this.setProperties({ currency: propValue }, true);\n this.updateCurrency('currency', propValue);\n }\n break;\n case 'format':\n setValue(prop, getValue(prop, newProp), this);\n this.initCultureInfo();\n this.updateValue(this.value);\n break;\n case 'decimals':\n this.decimals = newProp.decimals;\n this.updateValue(this.value);\n }\n }\n };\n NumericTextBox.prototype.updateClearButton = function (newProp) {\n if (isBlazor()) {\n if (this.showClearButton) {\n this.inputWrapper.clearButton = this.container.querySelector('.e-clear-icon');\n Input.wireClearBtnEvents(this.element, this.inputWrapper.clearButton, this.inputWrapper.container);\n }\n }\n else {\n Input.setClearButton(newProp.showClearButton, this.element, this.inputWrapper, undefined, this.createElement);\n this.bindClearEvent();\n }\n };\n NumericTextBox.prototype.updateSpinButton = function (newProp) {\n if (isBlazor()) {\n if (this.showSpinButton) {\n this.spinDown = this.container.querySelector('.' + SPINDOWN);\n this.spinUp = this.container.querySelector('.' + SPINUP);\n this.wireSpinBtnEvents();\n }\n }\n else {\n if (newProp.showSpinButton) {\n this.spinBtnCreation();\n }\n else {\n detach(this.spinUp);\n detach(this.spinDown);\n }\n }\n };\n /**\n * Gets the component name\n *\n * @returns {string} Returns the component name.\n * @private\n */\n NumericTextBox.prototype.getModuleName = function () {\n return 'numerictextbox';\n };\n __decorate([\n Property('')\n ], NumericTextBox.prototype, \"cssClass\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"value\", void 0);\n __decorate([\n Property(-(Number.MAX_VALUE))\n ], NumericTextBox.prototype, \"min\", void 0);\n __decorate([\n Property(Number.MAX_VALUE)\n ], NumericTextBox.prototype, \"max\", void 0);\n __decorate([\n Property(1)\n ], NumericTextBox.prototype, \"step\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"placeholder\", void 0);\n __decorate([\n Property({})\n ], NumericTextBox.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(true)\n ], NumericTextBox.prototype, \"showSpinButton\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"readonly\", void 0);\n __decorate([\n Property(true)\n ], NumericTextBox.prototype, \"enabled\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property('n2')\n ], NumericTextBox.prototype, \"format\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"decimals\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"currency\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"currencyCode\", void 0);\n __decorate([\n Property(true)\n ], NumericTextBox.prototype, \"strictMode\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"validateDecimalOnType\", void 0);\n __decorate([\n Property('Never')\n ], NumericTextBox.prototype, \"floatLabelType\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"blur\", void 0);\n NumericTextBox = __decorate([\n NotifyPropertyChanges\n ], NumericTextBox);\n return NumericTextBox;\n}(Component));\nexport { NumericTextBox };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, rippleEffect, NotifyPropertyChanges, Property, closest } from '@syncfusion/ej2-base';\nimport { addClass, getInstance, getUniqueID, isRippleEnabled, removeClass, attributes, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { detach, Event, EventHandler, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { wrapperInitialize, rippleMouseHandler } from './../common/common';\nvar LABEL = 'e-label';\nvar RIPPLE = 'e-ripple-container';\nvar RTL = 'e-rtl';\nvar WRAPPER = 'e-radio-wrapper';\nvar ATTRIBUTES = ['title', 'class', 'style', 'disabled', 'readonly', 'name', 'value'];\n/**\n * The RadioButton is a graphical user interface element that allows you to select one option from the choices.\n * It contains checked and unchecked states.\n * ```html\n *
\n * \n * ```\n */\nvar RadioButton = /** @class */ (function (_super) {\n __extends(RadioButton, _super);\n /**\n * Constructor for creating the widget\n *\n * @private\n * @param {RadioButtonModel} options - Specifies Radio button model\n * @param {string | HTMLInputElement} element - Specifies target element\n */\n function RadioButton(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isFocused = false;\n return _this;\n }\n RadioButton_1 = RadioButton;\n RadioButton.prototype.changeHandler = function (event) {\n this.checked = true;\n this.dataBind();\n var value = this.element.getAttribute('value');\n value = this.isVue && value ? this.element.value : this.value;\n this.trigger('change', { value: value, event: event });\n if (this.tagName === 'EJS-RADIOBUTTON') {\n event.stopPropagation();\n }\n };\n RadioButton.prototype.updateChange = function () {\n var input;\n var instance;\n var radioGrp = this.getRadioGroup();\n for (var i = 0; i < radioGrp.length; i++) {\n input = radioGrp[i];\n if (input !== this.element) {\n instance = getInstance(input, RadioButton_1);\n instance.checked = false;\n if (this.tagName === 'EJS-RADIOBUTTON') {\n instance.angularValue = this.value;\n }\n }\n }\n };\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n RadioButton.prototype.destroy = function () {\n var _this = this;\n var radioWrap = this.element.parentElement;\n _super.prototype.destroy.call(this);\n if (!this.disabled) {\n this.unWireEvents();\n }\n if (this.tagName === 'INPUT') {\n if (radioWrap.parentNode) {\n radioWrap.parentNode.insertBefore(this.element, radioWrap);\n }\n detach(radioWrap);\n this.element.checked = false;\n ['name', 'value', 'disabled'].forEach(function (key) {\n _this.element.removeAttribute(key);\n });\n }\n else {\n ['role', 'aria-checked', 'class'].forEach(function (key) {\n radioWrap.removeAttribute(key);\n });\n radioWrap.innerHTML = '';\n }\n };\n RadioButton.prototype.focusHandler = function () {\n this.isFocused = true;\n };\n RadioButton.prototype.focusOutHandler = function () {\n var label = this.getLabel();\n if (label) {\n label.classList.remove('e-focus');\n }\n };\n RadioButton.prototype.getModuleName = function () {\n return 'radio';\n };\n /**\n * To get the value of selected radio button in a group.\n *\n * @method getSelectedValue\n * @returns {string} - Selected Value\n */\n RadioButton.prototype.getSelectedValue = function () {\n var input;\n var radioGrp = this.getRadioGroup();\n for (var i = 0, len = radioGrp.length; i < len; i++) {\n input = radioGrp[i];\n if (input.checked) {\n return input.value;\n }\n }\n return '';\n };\n RadioButton.prototype.getRadioGroup = function () {\n return document.querySelectorAll('input.e-radio[name=\"' + this.element.getAttribute('name') + '\"]');\n };\n /**\n * Gets the properties to be maintained in the persistence state.\n *\n * @private\n * @returns {string} - Persist Data\n */\n RadioButton.prototype.getPersistData = function () {\n return this.addOnPersist(['checked']);\n };\n RadioButton.prototype.getLabel = function () {\n if (this.element) {\n return this.element.nextElementSibling;\n }\n else {\n return null;\n }\n };\n RadioButton.prototype.initialize = function () {\n if (isNullOrUndefined(this.initialCheckedValue)) {\n this.initialCheckedValue = this.checked;\n }\n this.initWrapper();\n this.updateHtmlAttribute();\n if (this.name) {\n this.element.setAttribute('name', this.name);\n }\n var value = this.element.getAttribute('value');\n if (this.isVue && value && value === this.value) {\n this.checked = true;\n }\n if (this.isVue ? this.value && !value : this.value) {\n this.element.setAttribute('value', this.value);\n }\n if (this.checked) {\n this.element.checked = true;\n }\n if (this.disabled) {\n this.setDisabled();\n }\n };\n RadioButton.prototype.initWrapper = function () {\n var rippleSpan;\n var wrapper = this.element.parentElement;\n if (!wrapper.classList.contains(WRAPPER)) {\n wrapper = this.createElement('div', { className: WRAPPER });\n this.element.parentNode.insertBefore(wrapper, this.element);\n }\n var label = this.createElement('label', { attrs: { for: this.element.id } });\n wrapper.appendChild(this.element);\n wrapper.appendChild(label);\n if (isRippleEnabled) {\n rippleSpan = this.createElement('span', { className: (RIPPLE) });\n label.appendChild(rippleSpan);\n rippleEffect(rippleSpan, {\n duration: 400,\n isCenterRipple: true\n });\n }\n wrapper.classList.add('e-wrapper');\n if (this.enableRtl) {\n label.classList.add(RTL);\n }\n if (this.cssClass) {\n addClass([label], this.cssClass.split(' '));\n }\n if (this.label) {\n this.setText(this.label);\n }\n };\n RadioButton.prototype.keyUpHandler = function () {\n if (this.isFocused) {\n this.getLabel().classList.add('e-focus');\n }\n };\n RadioButton.prototype.labelRippleHandler = function (e) {\n var ripple = this.getLabel().getElementsByClassName(RIPPLE)[0];\n rippleMouseHandler(e, ripple);\n };\n RadioButton.prototype.formResetHandler = function () {\n this.checked = this.initialCheckedValue;\n if (this.initialCheckedValue) {\n attributes(this.element, { 'checked': 'true' });\n }\n };\n /**\n * Called internally if any of the property value changes.\n *\n * @private\n * @param {RadioButtonModel} newProp - Specifies New Properties\n * @param {RadioButtonModel} oldProp - Specifies Old Properties\n * @returns {void}\n */\n RadioButton.prototype.onPropertyChanged = function (newProp, oldProp) {\n var label = this.getLabel();\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'checked':\n if (newProp.checked) {\n this.updateChange();\n }\n this.element.checked = newProp.checked;\n break;\n case 'disabled':\n if (newProp.disabled) {\n this.setDisabled();\n this.unWireEvents();\n }\n else {\n this.element.disabled = false;\n this.wireEvents();\n }\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([label], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([label], newProp.cssClass.split(' '));\n }\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n label.classList.add(RTL);\n }\n else {\n label.classList.remove(RTL);\n }\n break;\n case 'label':\n this.setText(newProp.label);\n break;\n case 'labelPosition':\n if (newProp.labelPosition === 'Before') {\n label.classList.add('e-right');\n }\n else {\n label.classList.remove('e-right');\n }\n break;\n case 'name':\n this.element.setAttribute('name', newProp.name);\n break;\n case 'value':\n if (!isNullOrUndefined(this.htmlAttributes) && this.htmlAttributes.value) {\n break;\n }\n this.element.setAttribute('value', newProp.value);\n break;\n case 'htmlAttributes':\n this.updateHtmlAttribute();\n break;\n }\n }\n };\n /**\n * Initialize checked Property, Angular and React and Unique ID support.\n *\n * @private\n * @returns {void}\n */\n RadioButton.prototype.preRender = function () {\n var element = this.element;\n this.formElement = closest(this.element, 'form');\n this.tagName = this.element.tagName;\n element = wrapperInitialize(this.createElement, 'EJS-RADIOBUTTON', 'radio', element, WRAPPER, 'radio');\n this.element = element;\n if (this.element.getAttribute('type') !== 'radio') {\n this.element.setAttribute('type', 'radio');\n }\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n if (this.tagName === 'EJS-RADIOBUTTON') {\n var formControlName = this.element.getAttribute('formcontrolname');\n if (formControlName) {\n this.setProperties({ 'name': formControlName }, true);\n this.element.setAttribute('name', formControlName);\n }\n }\n };\n /**\n * Initialize the control rendering\n *\n * @private\n * @returns {void}\n */\n RadioButton.prototype.render = function () {\n this.initialize();\n if (!this.disabled) {\n this.wireEvents();\n }\n this.renderComplete();\n };\n RadioButton.prototype.setDisabled = function () {\n this.element.disabled = true;\n };\n RadioButton.prototype.setText = function (text) {\n var label = this.getLabel();\n var textLabel = label.getElementsByClassName(LABEL)[0];\n if (textLabel) {\n textLabel.textContent = text;\n }\n else {\n text = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(text) : text;\n textLabel = this.createElement('span', { className: LABEL, innerHTML: text });\n label.appendChild(textLabel);\n }\n if (this.labelPosition === 'Before') {\n this.getLabel().classList.add('e-right');\n }\n else {\n this.getLabel().classList.remove('e-right');\n }\n };\n RadioButton.prototype.updateHtmlAttribute = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var key = _a[_i];\n if (ATTRIBUTES.indexOf(key) > -1) {\n var wrapper = this.element.parentElement;\n if (key === 'class') {\n addClass([wrapper], this.htmlAttributes[key].split(' '));\n }\n else if (key === 'title' || key === 'style') {\n wrapper.setAttribute(key, this.htmlAttributes[key]);\n }\n else {\n this.element.setAttribute(key, this.htmlAttributes[key]);\n }\n }\n }\n }\n };\n RadioButton.prototype.unWireEvents = function () {\n var label = this.getLabel();\n EventHandler.remove(this.element, 'change', this.changeHandler);\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'focusout', this.focusOutHandler);\n EventHandler.remove(this.element, 'keyup', this.keyUpHandler);\n var rippleLabel = label.getElementsByClassName(LABEL)[0];\n if (rippleLabel) {\n EventHandler.remove(rippleLabel, 'mousedown', this.labelRippleHandler);\n EventHandler.remove(rippleLabel, 'mouseup', this.labelRippleHandler);\n }\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n };\n RadioButton.prototype.wireEvents = function () {\n var label = this.getLabel();\n EventHandler.add(this.element, 'change', this.changeHandler, this);\n EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);\n EventHandler.add(this.element, 'focus', this.focusHandler, this);\n EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);\n var rippleLabel = label.getElementsByClassName(LABEL)[0];\n if (rippleLabel) {\n EventHandler.add(rippleLabel, 'mousedown', this.labelRippleHandler, this);\n EventHandler.add(rippleLabel, 'mouseup', this.labelRippleHandler, this);\n }\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);\n }\n };\n /**\n * Click the RadioButton element\n * its native method\n *\n * @public\n * @returns {void}\n */\n RadioButton.prototype.click = function () {\n this.element.click();\n };\n /**\n * Sets the focus to RadioButton\n * its native method\n *\n * @public\n * @returns {void}\n */\n RadioButton.prototype.focusIn = function () {\n this.element.focus();\n };\n var RadioButton_1;\n __decorate([\n Event()\n ], RadioButton.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], RadioButton.prototype, \"created\", void 0);\n __decorate([\n Property(false)\n ], RadioButton.prototype, \"checked\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], RadioButton.prototype, \"disabled\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"label\", void 0);\n __decorate([\n Property('After')\n ], RadioButton.prototype, \"labelPosition\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"name\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"value\", void 0);\n __decorate([\n Property(false)\n ], RadioButton.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property({})\n ], RadioButton.prototype, \"htmlAttributes\", void 0);\n RadioButton = RadioButton_1 = __decorate([\n NotifyPropertyChanges\n ], RadioButton);\n return RadioButton;\n}(Component));\nexport { RadioButton };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, 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 floatLabelType: 'Always',\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: '',\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 floatLabelType: 'Always',\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.timezoneData = this.parent.tzModule.timezoneData;\n this.eventWindowTime = { startTime: new Date(), endTime: new Date() };\n this.fieldValidator = new FieldValidator();\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 this.applyFormValidation();\n };\n EventWindow.prototype.refresh = function () {\n this.destroy();\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.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 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();\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.parent.isReact) {\n if (this.recurrenceEditor) {\n this.recurrenceEditor.destroy();\n this.recurrenceEditor = null;\n }\n this.destroyComponents();\n }\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 repeatEditConainer = 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 repeatEditConainer.appendChild(button);\n this.buttonObj.appendTo(button);\n repeatDiv.appendChild(repeatEditConainer);\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 drowDownList = 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 drowDownList.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 drowDownList = new DropDownList({\n allowFiltering: true,\n change: this.onTimezoneChange.bind(this),\n cssClass: this.parent.cssClass || '',\n dataSource: this.timezoneData,\n enableRtl: this.parent.enableRtl,\n fields: { text: 'Text', value: 'Value' },\n filterBarPlaceholder: 'Search Timezone',\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.timezoneData, query);\n },\n htmlAttributes: { 'title': this.getFieldLabel(value), 'name': fieldName },\n floatLabelType: 'Always',\n placeholder: this.getFieldLabel(value),\n popupHeight: '230px'\n });\n drowDownList.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.renderFormValidator(form, rules, this.element);\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 formelement = this.getFormElements(cls.EVENT_WINDOW_DIALOG_CLASS);\n var keyNames = Object.keys(eventObj);\n for (var _i = 0, formelement_1 = formelement; _i < formelement_1.length; _i++) {\n var curElement = formelement_1[_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 () {\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 (alert) {\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.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 this.parent.quickPopup.openRecurrenceValidationAlert('sameDayAlert');\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 lastResouceData = this.parent.resourceBase.resourceCollection.slice(-1)[0];\n resourceData = eventObj[lastResouceData.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 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 return (!(new Date(+recurColl[index + 1][this.fields.startTime]).setHours(0, 0, 0, 0) >\n new Date(+currentData[this.fields.endTime]).setHours(0, 0, 0, 0)));\n }\n return false;\n }\n else {\n if (index === recurColl.length - 1) {\n if (!(new Date(+recurColl[index - 1][this.fields.endTime]).setHours(0, 0, 0, 0) <\n new Date(+currentData[this.fields.startTime]).setHours(0, 0, 0, 0))) {\n return true;\n }\n }\n else if (!((new Date(+recurColl[index - 1][this.fields.endTime]).setHours(0, 0, 0, 0) <\n new Date(+currentData[this.fields.startTime]).setHours(0, 0, 0, 0)) &&\n (new Date(+recurColl[index + 1][this.fields.startTime]).setHours(0, 0, 0, 0) >\n new Date(+currentData[this.fields.endTime]).setHours(0, 0, 0, 0)))) {\n return true;\n }\n }\n return false;\n };\n EventWindow.prototype.resourceSaveEvent = function (eventObj, action, currentAction) {\n var _this = this;\n var lastResouceData = this.parent.resourceBase.resourceCollection.slice(-1)[0];\n var resourceData = eventObj[lastResouceData.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 = lastResouceData.dataSource;\n var resCol = this_2.parent.resourceCollection;\n var index = void 0;\n if (resCol.length > 1) {\n index = util.findIndexInData(lastResource, lastResouceData.idField, resourceData[i], events, resCol);\n }\n else {\n index = util.findIndexInData(lastResource, lastResouceData.idField, resourceData[i]);\n }\n if (index < 0) {\n return { value: void 0 };\n }\n var groupId_1 = lastResource[index][lastResouceData.groupIDField];\n var filter = lastlevel.filter(function (obj) { return obj.resourceData[lastResouceData.idField] === resourceData[i]; }).\n filter(function (obj) { return obj.resourceData[lastResouceData.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[lastResouceData.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[lastResouceData.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[lastResouceData.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 () {\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 }\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 formelement = this.getFormElements(cls.EVENT_WINDOW_DIALOG_CLASS);\n for (var _i = 0, formelement_2 = formelement; _i < formelement_2.length; _i++) {\n var element = formelement_2[_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 () {\n if (!this.parent.isDestroyed) {\n this.parent.resetTemplates(['editorTemplate']);\n }\n if (this.recurrenceEditor) {\n this.recurrenceEditor.destroy();\n }\n this.destroyComponents();\n this.fieldValidator.destroy();\n if (this.repeatDialogObject) {\n this.repeatDialogObject.destroy();\n remove(this.repeatDialogObject.element);\n }\n if (this.dialogObject) {\n this.dialogObject.destroy();\n this.dialogObject = null;\n }\n if (this.element) {\n remove(this.element);\n this.element = 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.isDestroyed) {\n return;\n }\n this.parent.on(events.virtualScroll, this.virtualScrolling, this);\n };\n VirtualScroll.prototype.removeEventListener = function () {\n if (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 renderedResConut = resourceCount + (lastCollIndex - lastRenderIndex);\n renderedResConut = (renderedResConut > this.parent.resourceBase.expandedResources.length) ?\n this.parent.resourceBase.expandedResources.length : renderedResConut;\n wrap.style.height = (renderedResConut * 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.parent.notify(events.dataReady, {});\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 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 renderedLenth = resWrap.querySelector('tbody').children.length;\n for (var i = 0; i < renderedLenth; 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);\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.destroy = function () {\n this.removeEventListener();\n };\n return VirtualScroll;\n}());\nexport { VirtualScroll };\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { isNullOrUndefined, extend, addClass, removeClass } from '@syncfusion/ej2-base';\nimport { VirtualScroll } from '../actions/virtual-scroll';\nimport { EventTooltip } from '../popups/event-tooltip';\nimport * as events from '../base/constant';\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.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.setScheduleProperties({ currentView: firstView });\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.isAdaptive && this.parent.activeViewOptions.group.resources.length > 0 &&\n 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 Render.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 Render.prototype.dataManagerSuccess = function (e) {\n var _this = this;\n if (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 var processed = _this.parent.eventBase.processData(resultData);\n _this.parent.notify(events.dataReady, { processedData: processed });\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 () { return _this.parent.hideSpinner(); });\n });\n };\n Render.prototype.dataManagerFailure = function (e) {\n var _this = this;\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.trigger(events.actionFailure, { error: e }, function () { return _this.parent.hideSpinner(); });\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 } 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.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 // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var crudData = args.data instanceof Array ? (args.data.length === 0 &&\n args.requestType === 'eventRemoved' ? args.promise.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 (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.parent.renderModule.refreshDataManager();\n }\n });\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n args.promise.then(function (e) {\n if (_this.parent.isDestroyed) {\n return;\n }\n _this.parent.trigger(events.actionComplete, actionArgs, function (onlineArgs) {\n if (!onlineArgs.cancel) {\n _this.parent.renderModule.refreshDataManager();\n }\n });\n }).catch(function (e) {\n if (_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) {\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 editParams.addedRecords.push(_this.parent.eventBase.processTimezone(event_1, true));\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) {\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 var eventData_1 = _this.parent.eventBase.processTimezone(event_3, true);\n editParams.changedRecords.push(eventData_1);\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) {\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_2 = eventData; _i < eventData_2.length; _i++) {\n var event_5 = eventData_2[_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_3 = eventData; _i < eventData_3.length; _i++) {\n var event_6 = eventData_3[_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_4 = eventData; _i < eventData_4.length; _i++) {\n var event_7 = eventData_4[_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_5 = eventData; _i < eventData_5.length; _i++) {\n var eventObj = eventData_5[_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_6 = eventData; _i < eventData_6.length; _i++) {\n var eventObj = eventData_6[_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 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.setScheduleProperties({ selectedDate: date });\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()\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 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 { updateBlazorTemplate, resetBlazorTemplate, isBlazor, 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.isBlazorExpandedNodes = [];\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.isBlazorPlatform = (isBlazor() && this.isServerRendered);\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.blazorInitialRender = false;\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 if (!this.isBlazorPlatform) {\n this.initialRender = false;\n }\n this.renderComplete();\n };\n TreeView.prototype.initialize = function () {\n if (!this.isBlazorPlatform) {\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 }\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.isBlazorPlatform ? this.fields.dataSource.offline :\n 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.isBlazorPlatform ? _this.fields.dataSource.offline :\n _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 if (!this.isBlazorPlatform || (this.isBlazorPlatform && this.fields.dataSource instanceof DataManager && (this.fields.dataSource.adaptorName !== 'BlazorAdaptor')) || this.changeDataSource) {\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 }\n this.updateTemplateForBlazor();\n this.parentNodeCheck = [];\n this.parentCheckData = [];\n this.updateCheckedStateFromDS();\n if (this.autoCheck && this.showCheckBox && !this.isLoaded) {\n this.updateParentCheckState();\n }\n };\n TreeView.prototype.updateTemplateForBlazor = function () {\n if (this.nodeTemplate && this.isBlazorPlatform && !this.isStringTemplate) {\n this.updateBlazorTemplate();\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 && (this.fields.dataSource.adaptorName !== 'BlazorAdaptor')) {\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 this.allowServerDataBinding = true;\n this.updateServerProperties(\"check\");\n this.allowServerDataBinding = false;\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 if (this.isBlazorPlatform && !this.initialRender) {\n return;\n }\n /* eslint-disable */\n if (this.fields.dataSource instanceof DataManager && (this.fields.dataSource.adaptorName !== 'BlazorAdaptor')) {\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 if (!this.isBlazorPlatform || (this.isBlazorPlatform && !this.initialRender)) {\n this.doSelectionAction();\n }\n this.updateCheckedProp();\n if (this.isBlazorPlatform) {\n if (this.initialRender) {\n this.setCheckedNodes(this.checkedNodes);\n }\n this.updateInstance();\n this.initialRender = false;\n }\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 this.allowServerDataBinding = true;\n this.updateServerProperties(\"expand\");\n this.allowServerDataBinding = false;\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.allowServerDataBinding = true;\n this.updateServerProperties(\"expand\");\n this.allowServerDataBinding = false;\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 && (this.fields.dataSource.adaptorName !== 'BlazorAdaptor')) {\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 this.updateTemplateForBlazor();\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 _this.updateTemplateForBlazor();\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 if (!this.isBlazorPlatform || !this.initialRender) {\n this.listBaseOption.ariaAttributes.level = parseFloat(parentLi.getAttribute('aria-level')) + 1;\n parentLi.appendChild(ListBase.createList(this.createElement, this.currentLoadData, this.listBaseOption));\n }\n this.expandNode(parentLi, eicon, loaded);\n this.setSelectionForChildNodes(childItems);\n this.ensureCheckNode(parentLi);\n this.finalizeNode(parentLi);\n if (this.loadOnDemand && this.nodeTemplate && this.isBlazorPlatform && !this.isStringTemplate) {\n this.updateBlazorTemplate();\n }\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 this.allowServerDataBinding = true;\n this.updateServerProperties(\"select\");\n this.allowServerDataBinding = false;\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.allowServerDataBinding = true;\n _this.updateServerProperties(\"select\");\n _this.allowServerDataBinding = false;\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 this.allowServerDataBinding = true;\n this.updateServerProperties(\"select\");\n this.allowServerDataBinding = false;\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.allowServerDataBinding = true;\n this.updateServerProperties(\"check\");\n this.allowServerDataBinding = false;\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 resetBlazorTemplate(this.element.id + 'nodeTemplate', 'NodeTemplate');\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 && (this.fields.dataSource.adaptorName !== 'BlazorAdaptor')) {\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.updateBlazorTemplate();\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 if (isBlazor()) {\n e.bindEvents(getElement(e.dragElement));\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 if ((_this.isBlazorPlatform && _this.dragStartAction) || !_this.isBlazorPlatform) {\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 if (_this.isBlazorPlatform && isHelperElement) {\n _this.dropAction(e, true);\n }\n });\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 if (!_this.isBlazorPlatform) {\n _this.dropAction(e);\n }\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, isBlazorDrop) {\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 if (!isBlazorDrop) {\n dragInstance = e.dragData.draggable;\n }\n else {\n dragInstance = e.element;\n }\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 if (!isBlazorDrop) {\n detach(e.droppedElement);\n }\n else {\n detach(e.helper);\n }\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 if (!isBlazorDrop) {\n this.trigger('nodeDropped', this.getDragEvent(e.event, dragObj, dropTarget, e.target, e.dragData.draggedElement, null, level, drop));\n }\n else {\n this.trigger('nodeDropped', this.getDragEvent(e.event, dragObj, dropTarget, e.target, e.element, null, level, drop));\n }\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.updateInstance();\n this.removeData(node);\n };\n TreeView.prototype.updateInstance = function () {\n this.updateList();\n this.updateSelectedNodes();\n this.updateExpandedNodes();\n this.allowServerDataBinding = false;\n this.updateServerProperties(\"expand\");\n this.updateServerProperties(\"check\");\n this.updateServerProperties(\"select\");\n this.allowServerDataBinding = true;\n };\n TreeView.prototype.updateServerProperties = function (action) {\n if (this.isBlazorPlatform) {\n if (action == \"expand\") {\n this.isBlazorExpandedNodes = this.expandedNodes;\n this.setProperties({ expandedNodes: [] }, true);\n }\n else if (action == \"check\") {\n this.setProperties({ checkedNodes: this.checkedNodes }, true);\n }\n else {\n this.setProperties({ selectedNodes: this.selectedNodes }, true);\n }\n }\n };\n TreeView.prototype.updateList = function () {\n this.liList = Array.prototype.slice.call(selectAll('.' + LISTITEM, this.element));\n };\n TreeView.prototype.updateSelectedNodes = function () {\n if (!this.isBlazorPlatform || (this.isBlazorPlatform && !this.initialRender)) {\n this.setProperties({ selectedNodes: [] }, true);\n var sNodes = selectAll('.' + ACTIVE, this.element);\n this.selectGivenNodes(sNodes);\n }\n else if (this.isBlazorPlatform && this.initialRender) {\n var sNodes = selectAll('.' + ACTIVE, this.element);\n for (var a = 0; a < sNodes.length; a++) {\n var id = sNodes[a].getAttribute(\"data-uid\").toString();\n if (!isNOU(id) && this.selectedNodes.indexOf(id) === -1) {\n this.selectedNodes.push(id);\n }\n }\n }\n };\n TreeView.prototype.updateExpandedNodes = function () {\n if (!this.isBlazorPlatform || (this.isBlazorPlatform && !this.initialRender)) {\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 else if (this.isBlazorPlatform && this.initialRender) {\n var eNodes = selectAll('[aria-expanded=\"true\"]', this.element);\n for (var a = 0; a < eNodes.length; a++) {\n var id = eNodes[a].getAttribute(\"data-uid\").toString();\n if (!isNOU(id) && this.expandedNodes.indexOf(id) === -1) {\n this.expandedNodes.push(id);\n }\n }\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 if (this.nodeTemplate && this.isBlazorPlatform && !this.isStringTemplate) {\n this.updateBlazorTemplate();\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 && (this.fields.dataSource.adaptorName !== 'BlazorAdaptor')) && 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 && (this.fields.dataSource.adaptorName !== 'BlazorAdaptor')) && !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 if (this.isBlazorPlatform) {\n enodes = this.isBlazorExpandedNodes;\n }\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.updateTemplateForBlazor();\n this.renderReactTemplates();\n var eventArgs = { data: this.treeData };\n this.trigger('dataSourceChanged', eventArgs);\n };\n TreeView.prototype.updateBlazorTemplate = function () {\n updateBlazorTemplate(this.element.id + 'nodeTemplate', 'NodeTemplate', this, false);\n };\n TreeView.prototype.clientUpdateInitial = function () {\n this.blazorInitialRender = true;\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 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 if (!this.isBlazorPlatform) {\n this.setProperties({ expandedNodes: [] }, true);\n }\n this.collapseAll();\n this.isInitalExpand = true;\n if (!this.isBlazorPlatform) {\n this.setProperties({ expandedNodes: isNOU(newProp.expandedNodes) ? [] : newProp.expandedNodes }, true);\n }\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 if (!this.blazorInitialRender) {\n this.reRenderNodes();\n }\n this.blazorInitialRender = false;\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 resetBlazorTemplate(this.element.id + 'nodeTemplate', 'NodeTemplate');\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.isBlazorPlatform) {\n this.ulElement = this.element.querySelector('.e-list-parent.e-ul');\n }\n if (this.ulElement && this.ulElement.parentElement) {\n this.ulElement.parentElement.removeChild(this.ulElement);\n }\n if (!this.isBlazorPlatform) {\n _super.prototype.destroy.call(this);\n }\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 && (this.fields.dataSource.adaptorName !== 'BlazorAdaptor')) {\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) || (this.fields.dataSource instanceof DataManager) && (this.fields.dataSource.adaptorName === 'BlazorAdaptor')) {\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 * @BlazorType NodeData\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 && (this.fields.dataSource.adaptorName !== 'BlazorAdaptor')) {\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 && (_this.fields.dataSource.adaptorName !== 'BlazorAdaptor')) {\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 resColTd.appendChild(resColDiv);\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) {\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: '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.notify(events.dataReady, {});\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.resourceClick = function (event) {\n var _this = this;\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 var args_1 = { cancel: false, event: event.event, groupIndex: groupIndex, requestType: 'resourceChange' };\n this.parent.trigger(events.actionBegin, args_1, function (actionArgs) {\n if (!actionArgs.cancel) {\n _this.parent.uiStateValues.groupIndex = actionArgs.groupIndex;\n _this.parent.renderModule.render(_this.parent.currentView);\n args_1 = {\n cancel: false, event: event.event, groupIndex: _this.parent.uiStateValues.groupIndex, requestType: 'resourceChanged'\n };\n _this.parent.trigger(events.actionComplete, args_1);\n }\n });\n }\n event.event.preventDefault();\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.renderModule.dataManagerFailure(e); });\n };\n ResourceBase.prototype.dataManagerSuccess = function (e, isSetModel) {\n if (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 // eslint-disable-next-line\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]) {\n var nextLevelChilds = resTreeGroup[i + 1][temp];\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 var _a;\n var resourceDates = (_a = [].concat).apply.apply(_a, [[]].concat(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 eventObj[this.resourceCollection[level].field] = this.lastResourceLevel[index].groupOrder[level];\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 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 } 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 } 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 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 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 this.initializePopups();\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.setScheduleProperties({ selectedDate: new Date('' + date), minDate: new Date('' + minDate), maxDate: new Date('' + maxDate) });\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.resourceHeaderTemplateName = obj.resourceHeaderTemplate ? 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.setScheduleProperties({ currentView: selectedView });\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 group = {\n byDate: 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 cellTemplate: this.cellTemplate,\n eventTemplate: this.eventSettings.template,\n dateHeaderTemplate: this.dateHeaderTemplate,\n resourceHeaderTemplate: this.resourceHeaderTemplate,\n firstDayOfWeek: this.firstDayOfWeek,\n workDays: workDays,\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.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.headerTooltipTemplateFn = this.templateParser(this.activeViewOptions.group.headerTooltipTemplate);\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 set dynamic property values\n *\n * @param {Object} properties Accepts the property object\n * @returns {void}\n * @private\n */\n Schedule.prototype.setScheduleProperties = function (properties) {\n this.allowServerDataBinding = false;\n this.setProperties(properties, true);\n this.allowServerDataBinding = true;\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, 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.setScheduleProperties({ currentView: view });\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 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 };\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 * @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 = td.getAttribute('data-date');\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 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 eader 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 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.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.notify(events.dataReady, {});\n }\n };\n /**\n * Method to process the templates\n *\n * @param {string} template Accepts the template in string\n * @returns {CallbackFunction} Returns the calback 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 annocement string\n *\n * @param {Object} event Accepts the event object\n * @param {string} subject Accepts the subject text\n * @returns {string} Returns the annocement string\n * @private\n */\n Schedule.prototype.getAnnocementString = 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 annocementString = recordSubject + ' ' + this.localeObj.getConstant('beginFrom') + ' '\n + startDateText + ' ' + this.localeObj.getConstant('endAt') + ' ' + endDateText;\n if (resourceName) {\n annocementString = resourceName + ' ' + annocementString;\n }\n return annocementString;\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 = 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 = util.getWeekNumber(weekMidDate);\n }\n else if (this.weekRule === 'FirstFullWeek') {\n var weekFirstDate = util.getWeekFirstDate(dates.slice(-1)[0], this.firstDayOfWeek);\n weekNumber = util.getWeekNumber(weekFirstDate);\n }\n return weekNumber;\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 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.notify(events.dataReady, {});\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 '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.renderModule) {\n if (this.dragAndDropModule) {\n this.dragAndDropModule.actionObj.action = '';\n removeClass([this.element], cls.EVENT_ACTION_CLASS);\n }\n this.renderModule.refreshDataManager();\n }\n };\n Schedule.prototype.extendedPropertyChange = function (prop, newProp, oldProp, state) {\n switch (prop) {\n case 'width':\n case 'height':\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 '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 this.notify(events.dataReady, { processedData: this.eventBase.processData(this.eventsData) });\n break;\n case 'eventDragArea':\n this.notify(events.dataReady, {});\n break;\n case 'weekRule':\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 }\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.eventWindow) {\n this.eventWindow.refresh();\n }\n break;\n case 'enableMaxHeight':\n case 'enableIndicator':\n this.notify(events.dataReady, { processedData: this.eventBase.processData(this.eventsData) });\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 * @returns {void}\n */\n Schedule.prototype.print = function () {\n if (this.printModule) {\n this.printModule.printScheduler();\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 * @returns {void}\n */\n Schedule.prototype.refreshEvents = function () {\n if (this.dragAndDropModule) {\n this.dragAndDropModule.actionObj.action = '';\n removeClass([this.element], cls.EVENT_ACTION_CLASS);\n }\n this.renderModule.refreshDataManager();\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 * 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 this.workCellAction.destroy();\n this.inlineModule.destroy();\n if (this.keyboardInteractionModule) {\n this.keyboardInteractionModule.destroy();\n }\n if (this.scrollModule) {\n this.scrollModule.destroy();\n this.scrollModule = null;\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 _super.prototype.destroy.call(this);\n util.removeChildren(this.element);\n var removeClasses = [cls.ROOT];\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('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(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, \"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()\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()\n ], Schedule.prototype, \"resourceHeaderTemplate\", 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})();\nimport * as React from 'react';\nimport { Schedule } from '@syncfusion/ej2-schedule';\nimport { ComponentBase, applyMixins } from '@syncfusion/ej2-react-base';\n/**\n * `ScheduleComponent` represents the react Schedule.\n * ```tsx\n *
\n * ```\n */\nvar ScheduleComponent = /** @class */ (function (_super) {\n __extends(ScheduleComponent, _super);\n function ScheduleComponent(props) {\n var _this = _super.call(this, props) || this;\n _this.initRenderCalled = false;\n _this.checkInjectedModules = true;\n _this.directivekeys = { 'views': 'view', 'resources': 'resource', 'headerRows': 'headerRow' };\n _this.immediateRender = false;\n _this.portals = [];\n return _this;\n }\n ScheduleComponent.prototype.render = function () {\n if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) {\n _super.prototype.render.call(this);\n this.initRenderCalled = true;\n }\n else {\n return React.createElement('div', this.getDefaultAttributes(), [].concat(this.props.children, this.portals));\n }\n };\n return ScheduleComponent;\n}(Schedule));\nexport { ScheduleComponent };\napplyMixins(ScheduleComponent, [ComponentBase, React.Component]);\n","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport classNames from 'classnames';\nimport React from 'react';\nimport { useBootstrapPrefix } from './ThemeProvider';\nvar NavbarBrand = React.forwardRef(function (_ref, ref) {\n var bsPrefix = _ref.bsPrefix,\n className = _ref.className,\n as = _ref.as,\n props = _objectWithoutPropertiesLoose(_ref, [\"bsPrefix\", \"className\", \"as\"]);\n\n bsPrefix = useBootstrapPrefix(bsPrefix, 'navbar-brand');\n var Component = as || (props.href ? 'a' : 'span');\n return /*#__PURE__*/React.createElement(Component, _extends({}, props, {\n ref: ref,\n className: classNames(className, bsPrefix)\n }));\n});\nNavbarBrand.displayName = 'NavbarBrand';\nexport default NavbarBrand;","import ownerWindow from './ownerWindow';\n/**\n * Returns one or all computed style properties of an element.\n * \n * @param node the element\n * @param psuedoElement the style property\n */\n\nexport default function getComputedStyle(node, psuedoElement) {\n return ownerWindow(node).getComputedStyle(node, psuedoElement);\n}","import ownerDocument from './ownerDocument';\n/**\n * Returns the owner window of a given element.\n * \n * @param node the element\n */\n\nexport default function ownerWindow(node) {\n var doc = ownerDocument(node);\n return doc && doc.defaultView || window;\n}","var rUpper = /([A-Z])/g;\nexport default function hyphenate(string) {\n return string.replace(rUpper, '-$1').toLowerCase();\n}","/**\n * Copyright 2013-2014, Facebook, Inc.\n * All rights reserved.\n * https://github.com/facebook/react/blob/2aeb8a2a6beb00617a4217f7f8284924fa2ad819/src/vendor/core/hyphenateStyleName.js\n */\nimport hyphenate from './hyphenate';\nvar msPattern = /^ms-/;\nexport default function hyphenateStyleName(string) {\n return hyphenate(string).replace(msPattern, '-ms-');\n}","var supportedTransforms = /^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i;\nexport default function isTransform(value) {\n return !!(value && supportedTransforms.test(value));\n}","import getComputedStyle from './getComputedStyle';\nimport hyphenate from './hyphenateStyle';\nimport isTransform from './isTransform';\n\nfunction style(node, property) {\n var css = '';\n var transforms = '';\n\n if (typeof property === 'string') {\n return node.style.getPropertyValue(hyphenate(property)) || getComputedStyle(node).getPropertyValue(hyphenate(property));\n }\n\n Object.keys(property).forEach(function (key) {\n var value = property[key];\n\n if (!value && value !== 0) {\n node.style.removeProperty(hyphenate(key));\n } else if (isTransform(key)) {\n transforms += key + \"(\" + value + \") \";\n } else {\n css += hyphenate(key) + \": \" + value + \";\";\n }\n });\n\n if (transforms) {\n css += \"transform: \" + transforms + \";\";\n }\n\n node.style.cssText += \";\" + css;\n}\n\nexport default style;","/* eslint-disable no-return-assign */\nimport canUseDOM from './canUseDOM';\nexport var optionsSupported = false;\nexport var onceSupported = false;\n\ntry {\n var options = {\n get passive() {\n return optionsSupported = true;\n },\n\n get once() {\n // eslint-disable-next-line no-multi-assign\n return onceSupported = optionsSupported = true;\n }\n\n };\n\n if (canUseDOM) {\n window.addEventListener('test', options, options);\n window.removeEventListener('test', options, true);\n }\n} catch (e) {\n /* */\n}\n\n/**\n * An `addEventListener` ponyfill, supports the `once` option\n * \n * @param node the element\n * @param eventName the event name\n * @param handle the handler\n * @param options event options\n */\nfunction addEventListener(node, eventName, handler, options) {\n if (options && typeof options !== 'boolean' && !onceSupported) {\n var once = options.once,\n capture = options.capture;\n var wrappedHandler = handler;\n\n if (!onceSupported && once) {\n wrappedHandler = handler.__once || function onceHandler(event) {\n this.removeEventListener(eventName, onceHandler, capture);\n handler.call(this, event);\n };\n\n handler.__once = wrappedHandler;\n }\n\n node.addEventListener(eventName, wrappedHandler, optionsSupported ? options : capture);\n }\n\n node.addEventListener(eventName, handler, options);\n}\n\nexport default addEventListener;","/**\n * A `removeEventListener` ponyfill\n * \n * @param node the element\n * @param eventName the event name\n * @param handle the handler\n * @param options event options\n */\nfunction removeEventListener(node, eventName, handler, options) {\n var capture = options && typeof options !== 'boolean' ? options.capture : options;\n node.removeEventListener(eventName, handler, capture);\n\n if (handler.__once) {\n node.removeEventListener(eventName, handler.__once, capture);\n }\n}\n\nexport default removeEventListener;","import addEventListener from './addEventListener';\nimport removeEventListener from './removeEventListener';\n\nfunction listen(node, eventName, handler, options) {\n addEventListener(node, eventName, handler, options);\n return function () {\n removeEventListener(node, eventName, handler, options);\n };\n}\n\nexport default listen;","import css from './css';\nimport listen from './listen';\nimport triggerEvent from './triggerEvent';\n\nfunction parseDuration(node) {\n var str = css(node, 'transitionDuration') || '';\n var mult = str.indexOf('ms') === -1 ? 1000 : 1;\n return parseFloat(str) * mult;\n}\n\nfunction emulateTransitionEnd(element, duration, padding) {\n if (padding === void 0) {\n padding = 5;\n }\n\n var called = false;\n var handle = setTimeout(function () {\n if (!called) triggerEvent(element, 'transitionend', true);\n }, duration + padding);\n var remove = listen(element, 'transitionend', function () {\n called = true;\n }, {\n once: true\n });\n return function () {\n clearTimeout(handle);\n remove();\n };\n}\n\nexport default function transitionEnd(element, handler, duration, padding) {\n if (duration == null) duration = parseDuration(element) || 0;\n var removeEmulate = emulateTransitionEnd(element, duration, padding);\n var remove = listen(element, 'transitionend', handler);\n return function () {\n removeEmulate();\n remove();\n };\n}","/**\n * Triggers an event on a given element.\n * \n * @param node the element\n * @param eventName the event name to trigger\n * @param bubbles whether the event should bubble up\n * @param cancelable whether the event should be cancelable\n */\nexport default function triggerEvent(node, eventName, bubbles, cancelable) {\n if (bubbles === void 0) {\n bubbles = false;\n }\n\n if (cancelable === void 0) {\n cancelable = true;\n }\n\n if (node) {\n var event = document.createEvent('HTMLEvents');\n event.initEvent(eventName, bubbles, cancelable);\n node.dispatchEvent(event);\n }\n}","export default {\n disabled: false\n};","import React from 'react';\nexport default React.createContext(null);","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _inheritsLoose from \"@babel/runtime/helpers/esm/inheritsLoose\";\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport config from './config';\nimport { timeoutsShape } from './utils/PropTypes';\nimport TransitionGroupContext from './TransitionGroupContext';\nimport { forceReflow } from './utils/reflow';\nexport var UNMOUNTED = 'unmounted';\nexport var EXITED = 'exited';\nexport var ENTERING = 'entering';\nexport var ENTERED = 'entered';\nexport var EXITING = 'exiting';\n/**\n * The Transition component lets you describe a transition from one component\n * state to another _over time_ with a simple declarative API. Most commonly\n * it's used to animate the mounting and unmounting of a component, but can also\n * be used to describe in-place transition states as well.\n *\n * ---\n *\n * **Note**: `Transition` is a platform-agnostic base component. If you're using\n * transitions in CSS, you'll probably want to use\n * [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)\n * instead. It inherits all the features of `Transition`, but contains\n * additional features necessary to play nice with CSS transitions (hence the\n * name of the component).\n *\n * ---\n *\n * By default the `Transition` component does not alter the behavior of the\n * component it renders, it only tracks \"enter\" and \"exit\" states for the\n * components. It's up to you to give meaning and effect to those states. For\n * example we can add styles to a component when it enters or exits:\n *\n * ```jsx\n * import { Transition } from 'react-transition-group';\n *\n * const duration = 300;\n *\n * const defaultStyle = {\n * transition: `opacity ${duration}ms ease-in-out`,\n * opacity: 0,\n * }\n *\n * const transitionStyles = {\n * entering: { opacity: 1 },\n * entered: { opacity: 1 },\n * exiting: { opacity: 0 },\n * exited: { opacity: 0 },\n * };\n *\n * const Fade = ({ in: inProp }) => (\n *
\n * {state => (\n * \n * I'm a fade Transition!\n *
\n * )}\n * \n * );\n * ```\n *\n * There are 4 main states a Transition can be in:\n * - `'entering'`\n * - `'entered'`\n * - `'exiting'`\n * - `'exited'`\n *\n * Transition state is toggled via the `in` prop. When `true` the component\n * begins the \"Enter\" stage. During this stage, the component will shift from\n * its current transition state, to `'entering'` for the duration of the\n * transition and then to the `'entered'` stage once it's complete. Let's take\n * the following example (we'll use the\n * [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):\n *\n * ```jsx\n * function App() {\n * const [inProp, setInProp] = useState(false);\n * return (\n *
\n * \n * {state => (\n * // ...\n * )}\n * \n * \n *
\n * );\n * }\n * ```\n *\n * When the button is clicked the component will shift to the `'entering'` state\n * and stay there for 500ms (the value of `timeout`) before it finally switches\n * to `'entered'`.\n *\n * When `in` is `false` the same thing happens except the state moves from\n * `'exiting'` to `'exited'`.\n */\n\nvar Transition = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(Transition, _React$Component);\n\n function Transition(props, context) {\n var _this;\n\n _this = _React$Component.call(this, props, context) || this;\n var parentGroup = context; // In the context of a TransitionGroup all enters are really appears\n\n var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;\n var initialStatus;\n _this.appearStatus = null;\n\n if (props.in) {\n if (appear) {\n initialStatus = EXITED;\n _this.appearStatus = ENTERING;\n } else {\n initialStatus = ENTERED;\n }\n } else {\n if (props.unmountOnExit || props.mountOnEnter) {\n initialStatus = UNMOUNTED;\n } else {\n initialStatus = EXITED;\n }\n }\n\n _this.state = {\n status: initialStatus\n };\n _this.nextCallback = null;\n return _this;\n }\n\n Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {\n var nextIn = _ref.in;\n\n if (nextIn && prevState.status === UNMOUNTED) {\n return {\n status: EXITED\n };\n }\n\n return null;\n } // getSnapshotBeforeUpdate(prevProps) {\n // let nextStatus = null\n // if (prevProps !== this.props) {\n // const { status } = this.state\n // if (this.props.in) {\n // if (status !== ENTERING && status !== ENTERED) {\n // nextStatus = ENTERING\n // }\n // } else {\n // if (status === ENTERING || status === ENTERED) {\n // nextStatus = EXITING\n // }\n // }\n // }\n // return { nextStatus }\n // }\n ;\n\n var _proto = Transition.prototype;\n\n _proto.componentDidMount = function componentDidMount() {\n this.updateStatus(true, this.appearStatus);\n };\n\n _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n var nextStatus = null;\n\n if (prevProps !== this.props) {\n var status = this.state.status;\n\n if (this.props.in) {\n if (status !== ENTERING && status !== ENTERED) {\n nextStatus = ENTERING;\n }\n } else {\n if (status === ENTERING || status === ENTERED) {\n nextStatus = EXITING;\n }\n }\n }\n\n this.updateStatus(false, nextStatus);\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.cancelNextCallback();\n };\n\n _proto.getTimeouts = function getTimeouts() {\n var timeout = this.props.timeout;\n var exit, enter, appear;\n exit = enter = appear = timeout;\n\n if (timeout != null && typeof timeout !== 'number') {\n exit = timeout.exit;\n enter = timeout.enter; // TODO: remove fallback for next major\n\n appear = timeout.appear !== undefined ? timeout.appear : enter;\n }\n\n return {\n exit: exit,\n enter: enter,\n appear: appear\n };\n };\n\n _proto.updateStatus = function updateStatus(mounting, nextStatus) {\n if (mounting === void 0) {\n mounting = false;\n }\n\n if (nextStatus !== null) {\n // nextStatus will always be ENTERING or EXITING.\n this.cancelNextCallback();\n\n if (nextStatus === ENTERING) {\n if (this.props.unmountOnExit || this.props.mountOnEnter) {\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this); // https://github.com/reactjs/react-transition-group/pull/749\n // With unmountOnExit or mountOnEnter, the enter animation should happen at the transition between `exited` and `entering`.\n // To make the animation happen, we have to separate each rendering and avoid being processed as batched.\n\n if (node) forceReflow(node);\n }\n\n this.performEnter(mounting);\n } else {\n this.performExit();\n }\n } else if (this.props.unmountOnExit && this.state.status === EXITED) {\n this.setState({\n status: UNMOUNTED\n });\n }\n };\n\n _proto.performEnter = function performEnter(mounting) {\n var _this2 = this;\n\n var enter = this.props.enter;\n var appearing = this.context ? this.context.isMounting : mounting;\n\n var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing],\n maybeNode = _ref2[0],\n maybeAppearing = _ref2[1];\n\n var timeouts = this.getTimeouts();\n var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED\n // if we are mounting and running this it means appear _must_ be set\n\n if (!mounting && !enter || config.disabled) {\n this.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode);\n });\n return;\n }\n\n this.props.onEnter(maybeNode, maybeAppearing);\n this.safeSetState({\n status: ENTERING\n }, function () {\n _this2.props.onEntering(maybeNode, maybeAppearing);\n\n _this2.onTransitionEnd(enterTimeout, function () {\n _this2.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode, maybeAppearing);\n });\n });\n });\n };\n\n _proto.performExit = function performExit() {\n var _this3 = this;\n\n var exit = this.props.exit;\n var timeouts = this.getTimeouts();\n var maybeNode = this.props.nodeRef ? undefined : ReactDOM.findDOMNode(this); // no exit animation skip right to EXITED\n\n if (!exit || config.disabled) {\n this.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n return;\n }\n\n this.props.onExit(maybeNode);\n this.safeSetState({\n status: EXITING\n }, function () {\n _this3.props.onExiting(maybeNode);\n\n _this3.onTransitionEnd(timeouts.exit, function () {\n _this3.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n });\n });\n };\n\n _proto.cancelNextCallback = function cancelNextCallback() {\n if (this.nextCallback !== null) {\n this.nextCallback.cancel();\n this.nextCallback = null;\n }\n };\n\n _proto.safeSetState = function safeSetState(nextState, callback) {\n // This shouldn't be necessary, but there are weird race conditions with\n // setState callbacks and unmounting in testing, so always make sure that\n // we can cancel any pending setState callbacks after we unmount.\n callback = this.setNextCallback(callback);\n this.setState(nextState, callback);\n };\n\n _proto.setNextCallback = function setNextCallback(callback) {\n var _this4 = this;\n\n var active = true;\n\n this.nextCallback = function (event) {\n if (active) {\n active = false;\n _this4.nextCallback = null;\n callback(event);\n }\n };\n\n this.nextCallback.cancel = function () {\n active = false;\n };\n\n return this.nextCallback;\n };\n\n _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {\n this.setNextCallback(handler);\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);\n var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;\n\n if (!node || doesNotHaveTimeoutOrListener) {\n setTimeout(this.nextCallback, 0);\n return;\n }\n\n if (this.props.addEndListener) {\n var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],\n maybeNode = _ref3[0],\n maybeNextCallback = _ref3[1];\n\n this.props.addEndListener(maybeNode, maybeNextCallback);\n }\n\n if (timeout != null) {\n setTimeout(this.nextCallback, timeout);\n }\n };\n\n _proto.render = function render() {\n var status = this.state.status;\n\n if (status === UNMOUNTED) {\n return null;\n }\n\n var _this$props = this.props,\n children = _this$props.children,\n _in = _this$props.in,\n _mountOnEnter = _this$props.mountOnEnter,\n _unmountOnExit = _this$props.unmountOnExit,\n _appear = _this$props.appear,\n _enter = _this$props.enter,\n _exit = _this$props.exit,\n _timeout = _this$props.timeout,\n _addEndListener = _this$props.addEndListener,\n _onEnter = _this$props.onEnter,\n _onEntering = _this$props.onEntering,\n _onEntered = _this$props.onEntered,\n _onExit = _this$props.onExit,\n _onExiting = _this$props.onExiting,\n _onExited = _this$props.onExited,\n _nodeRef = _this$props.nodeRef,\n childProps = _objectWithoutPropertiesLoose(_this$props, [\"children\", \"in\", \"mountOnEnter\", \"unmountOnExit\", \"appear\", \"enter\", \"exit\", \"timeout\", \"addEndListener\", \"onEnter\", \"onEntering\", \"onEntered\", \"onExit\", \"onExiting\", \"onExited\", \"nodeRef\"]);\n\n return (\n /*#__PURE__*/\n // allows for nested Transitions\n React.createElement(TransitionGroupContext.Provider, {\n value: null\n }, typeof children === 'function' ? children(status, childProps) : React.cloneElement(React.Children.only(children), childProps))\n );\n };\n\n return Transition;\n}(React.Component);\n\nTransition.contextType = TransitionGroupContext;\nTransition.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * A React reference to DOM element that need to transition:\n * https://stackoverflow.com/a/51127130/4671932\n *\n * - When `nodeRef` prop is used, `node` is not passed to callback functions\n * (e.g. `onEnter`) because user already has direct access to the node.\n * - When changing `key` prop of `Transition` in a `TransitionGroup` a new\n * `nodeRef` need to be provided to `Transition` with changed `key` prop\n * (see\n * [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).\n */\n nodeRef: PropTypes.shape({\n current: typeof Element === 'undefined' ? PropTypes.any : function (propValue, key, componentName, location, propFullName, secret) {\n var value = propValue[key];\n return PropTypes.instanceOf(value && 'ownerDocument' in value ? value.ownerDocument.defaultView.Element : Element)(propValue, key, componentName, location, propFullName, secret);\n }\n }),\n\n /**\n * A `function` child can be used instead of a React element. This function is\n * called with the current transition status (`'entering'`, `'entered'`,\n * `'exiting'`, `'exited'`), which can be used to apply context\n * specific props to a component.\n *\n * ```jsx\n *
\n * {state => (\n * \n * )}\n * \n * ```\n */\n children: PropTypes.oneOfType([PropTypes.func.isRequired, PropTypes.element.isRequired]).isRequired,\n\n /**\n * Show the component; triggers the enter or exit states\n */\n in: PropTypes.bool,\n\n /**\n * By default the child component is mounted immediately along with\n * the parent `Transition` component. If you want to \"lazy mount\" the component on the\n * first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay\n * mounted, even on \"exited\", unless you also specify `unmountOnExit`.\n */\n mountOnEnter: PropTypes.bool,\n\n /**\n * By default the child component stays mounted after it reaches the `'exited'` state.\n * Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.\n */\n unmountOnExit: PropTypes.bool,\n\n /**\n * By default the child component does not perform the enter transition when\n * it first mounts, regardless of the value of `in`. If you want this\n * behavior, set both `appear` and `in` to `true`.\n *\n * > **Note**: there are no special appear states like `appearing`/`appeared`, this prop\n * > only adds an additional enter transition. However, in the\n * > `
` component that first enter transition does result in\n * > additional `.appear-*` classes, that way you can choose to style it\n * > differently.\n */\n appear: PropTypes.bool,\n\n /**\n * Enable or disable enter transitions.\n */\n enter: PropTypes.bool,\n\n /**\n * Enable or disable exit transitions.\n */\n exit: PropTypes.bool,\n\n /**\n * The duration of the transition, in milliseconds.\n * Required unless `addEndListener` is provided.\n *\n * You may specify a single timeout for all transitions:\n *\n * ```jsx\n * timeout={500}\n * ```\n *\n * or individually:\n *\n * ```jsx\n * timeout={{\n * appear: 500,\n * enter: 300,\n * exit: 500,\n * }}\n * ```\n *\n * - `appear` defaults to the value of `enter`\n * - `enter` defaults to `0`\n * - `exit` defaults to `0`\n *\n * @type {number | { enter?: number, exit?: number, appear?: number }}\n */\n timeout: function timeout(props) {\n var pt = timeoutsShape;\n if (!props.addEndListener) pt = pt.isRequired;\n\n for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n\n return pt.apply(void 0, [props].concat(args));\n },\n\n /**\n * Add a custom transition end trigger. Called with the transitioning\n * DOM node and a `done` callback. Allows for more fine grained transition end\n * logic. Timeouts are still used as a fallback if provided.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * ```jsx\n * addEndListener={(node, done) => {\n * // use the css transitionend event to mark the finish of a transition\n * node.addEventListener('transitionend', done, false);\n * }}\n * ```\n */\n addEndListener: PropTypes.func,\n\n /**\n * Callback fired before the \"entering\" status is applied. An extra parameter\n * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement, isAppearing: bool) -> void\n */\n onEnter: PropTypes.func,\n\n /**\n * Callback fired after the \"entering\" status is applied. An extra parameter\n * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement, isAppearing: bool)\n */\n onEntering: PropTypes.func,\n\n /**\n * Callback fired after the \"entered\" status is applied. An extra parameter\n * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement, isAppearing: bool) -> void\n */\n onEntered: PropTypes.func,\n\n /**\n * Callback fired before the \"exiting\" status is applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement) -> void\n */\n onExit: PropTypes.func,\n\n /**\n * Callback fired after the \"exiting\" status is applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement) -> void\n */\n onExiting: PropTypes.func,\n\n /**\n * Callback fired after the \"exited\" status is applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed\n *\n * @type Function(node: HtmlElement) -> void\n */\n onExited: PropTypes.func\n} : {}; // Name the function so it is clearer in the documentation\n\nfunction noop() {}\n\nTransition.defaultProps = {\n in: false,\n mountOnEnter: false,\n unmountOnExit: false,\n appear: false,\n enter: true,\n exit: true,\n onEnter: noop,\n onEntering: noop,\n onEntered: noop,\n onExit: noop,\n onExiting: noop,\n onExited: noop\n};\nTransition.UNMOUNTED = UNMOUNTED;\nTransition.EXITED = EXITED;\nTransition.ENTERING = ENTERING;\nTransition.ENTERED = ENTERED;\nTransition.EXITING = EXITING;\nexport default Transition;","export var forceReflow = function forceReflow(node) {\n return node.scrollTop;\n};","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\n\nvar _collapseStyles;\n\nimport classNames from 'classnames';\nimport css from 'dom-helpers/css';\nimport transitionEnd from 'dom-helpers/transitionEnd';\nimport React, { useMemo } from 'react';\nimport Transition, { ENTERED, ENTERING, EXITED, EXITING } from 'react-transition-group/Transition';\nimport createChainedFunction from './createChainedFunction';\nimport triggerBrowserReflow from './triggerBrowserReflow';\nvar MARGINS = {\n height: ['marginTop', 'marginBottom'],\n width: ['marginLeft', 'marginRight']\n};\n\nfunction getDefaultDimensionValue(dimension, elem) {\n var offset = \"offset\" + dimension[0].toUpperCase() + dimension.slice(1);\n var value = elem[offset];\n var margins = MARGINS[dimension];\n return value + // @ts-ignore\n parseInt(css(elem, margins[0]), 10) + // @ts-ignore\n parseInt(css(elem, margins[1]), 10);\n}\n\nvar collapseStyles = (_collapseStyles = {}, _collapseStyles[EXITED] = 'collapse', _collapseStyles[EXITING] = 'collapsing', _collapseStyles[ENTERING] = 'collapsing', _collapseStyles[ENTERED] = 'collapse show', _collapseStyles);\nvar defaultProps = {\n in: false,\n timeout: 300,\n mountOnEnter: false,\n unmountOnExit: false,\n appear: false,\n getDimensionValue: getDefaultDimensionValue\n};\nvar Collapse = React.forwardRef(function (_ref, ref) {\n var onEnter = _ref.onEnter,\n onEntering = _ref.onEntering,\n onEntered = _ref.onEntered,\n onExit = _ref.onExit,\n onExiting = _ref.onExiting,\n className = _ref.className,\n children = _ref.children,\n _ref$dimension = _ref.dimension,\n dimension = _ref$dimension === void 0 ? 'height' : _ref$dimension,\n _ref$getDimensionValu = _ref.getDimensionValue,\n getDimensionValue = _ref$getDimensionValu === void 0 ? getDefaultDimensionValue : _ref$getDimensionValu,\n props = _objectWithoutPropertiesLoose(_ref, [\"onEnter\", \"onEntering\", \"onEntered\", \"onExit\", \"onExiting\", \"className\", \"children\", \"dimension\", \"getDimensionValue\"]);\n\n /* Compute dimension */\n var computedDimension = typeof dimension === 'function' ? dimension() : dimension;\n /* -- Expanding -- */\n\n var handleEnter = useMemo(function () {\n return createChainedFunction(function (elem) {\n elem.style[computedDimension] = '0';\n }, onEnter);\n }, [computedDimension, onEnter]);\n var handleEntering = useMemo(function () {\n return createChainedFunction(function (elem) {\n var scroll = \"scroll\" + computedDimension[0].toUpperCase() + computedDimension.slice(1);\n elem.style[computedDimension] = elem[scroll] + \"px\";\n }, onEntering);\n }, [computedDimension, onEntering]);\n var handleEntered = useMemo(function () {\n return createChainedFunction(function (elem) {\n elem.style[computedDimension] = null;\n }, onEntered);\n }, [computedDimension, onEntered]);\n /* -- Collapsing -- */\n\n var handleExit = useMemo(function () {\n return createChainedFunction(function (elem) {\n elem.style[computedDimension] = getDimensionValue(computedDimension, elem) + \"px\";\n triggerBrowserReflow(elem);\n }, onExit);\n }, [onExit, getDimensionValue, computedDimension]);\n var handleExiting = useMemo(function () {\n return createChainedFunction(function (elem) {\n elem.style[computedDimension] = null;\n }, onExiting);\n }, [computedDimension, onExiting]);\n return /*#__PURE__*/React.createElement(Transition // @ts-ignore\n , _extends({\n ref: ref,\n addEndListener: transitionEnd\n }, props, {\n \"aria-expanded\": props.role ? props.in : null,\n onEnter: handleEnter,\n onEntering: handleEntering,\n onEntered: handleEntered,\n onExit: handleExit,\n onExiting: handleExiting\n }), function (state, innerProps) {\n return React.cloneElement(children, _extends({}, innerProps, {\n className: classNames(className, children.props.className, collapseStyles[state], computedDimension === 'width' && 'width')\n }));\n });\n}); // @ts-ignore\n\n// @ts-ignore\nCollapse.defaultProps = defaultProps;\nexport default Collapse;","// reading a dimension prop will cause the browser to recalculate,\n// which will let our animations work\nexport default function triggerBrowserReflow(node) {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n node.offsetHeight;\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport React from 'react';\nimport Collapse from './Collapse';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport NavbarContext from './NavbarContext';\nvar NavbarCollapse = React.forwardRef(function (_ref, ref) {\n var children = _ref.children,\n bsPrefix = _ref.bsPrefix,\n props = _objectWithoutPropertiesLoose(_ref, [\"children\", \"bsPrefix\"]);\n\n bsPrefix = useBootstrapPrefix(bsPrefix, 'navbar-collapse');\n return /*#__PURE__*/React.createElement(NavbarContext.Consumer, null, function (context) {\n return /*#__PURE__*/React.createElement(Collapse, _extends({\n in: !!(context && context.expanded)\n }, props), /*#__PURE__*/React.createElement(\"div\", {\n ref: ref,\n className: bsPrefix\n }, children));\n });\n});\nNavbarCollapse.displayName = 'NavbarCollapse';\nexport default NavbarCollapse;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport classNames from 'classnames';\nimport React, { useContext } from 'react';\nimport useEventCallback from '@restart/hooks/useEventCallback';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport NavbarContext from './NavbarContext';\nvar defaultProps = {\n label: 'Toggle navigation'\n};\nvar NavbarToggle = React.forwardRef(function (_ref, ref) {\n var bsPrefix = _ref.bsPrefix,\n className = _ref.className,\n children = _ref.children,\n label = _ref.label,\n _ref$as = _ref.as,\n Component = _ref$as === void 0 ? 'button' : _ref$as,\n onClick = _ref.onClick,\n props = _objectWithoutPropertiesLoose(_ref, [\"bsPrefix\", \"className\", \"children\", \"label\", \"as\", \"onClick\"]);\n\n bsPrefix = useBootstrapPrefix(bsPrefix, 'navbar-toggler');\n\n var _ref2 = useContext(NavbarContext) || {},\n onToggle = _ref2.onToggle,\n expanded = _ref2.expanded;\n\n var handleClick = useEventCallback(function (e) {\n if (onClick) onClick(e);\n if (onToggle) onToggle();\n });\n\n if (Component === 'button') {\n props.type = 'button';\n }\n\n return /*#__PURE__*/React.createElement(Component, _extends({}, props, {\n ref: ref,\n onClick: handleClick,\n \"aria-label\": label,\n className: classNames(className, bsPrefix, !expanded && 'collapsed')\n }), children || /*#__PURE__*/React.createElement(\"span\", {\n className: bsPrefix + \"-icon\"\n }));\n});\nNavbarToggle.displayName = 'NavbarToggle';\nNavbarToggle.defaultProps = defaultProps;\nexport default NavbarToggle;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport classNames from 'classnames';\nimport React, { useCallback, useMemo } from 'react';\nimport { useUncontrolled } from 'uncontrollable';\nimport createWithBsPrefix from './createWithBsPrefix';\nimport NavbarBrand from './NavbarBrand';\nimport NavbarCollapse from './NavbarCollapse';\nimport NavbarToggle from './NavbarToggle';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport NavbarContext from './NavbarContext';\nimport SelectableContext from './SelectableContext';\nvar NavbarText = createWithBsPrefix('navbar-text', {\n Component: 'span'\n});\nvar defaultProps = {\n expand: true,\n variant: 'light',\n collapseOnSelect: false\n};\nvar Navbar = React.forwardRef(function (props, ref) {\n var _useUncontrolled = useUncontrolled(props, {\n expanded: 'onToggle'\n }),\n initialBsPrefix = _useUncontrolled.bsPrefix,\n expand = _useUncontrolled.expand,\n variant = _useUncontrolled.variant,\n bg = _useUncontrolled.bg,\n fixed = _useUncontrolled.fixed,\n sticky = _useUncontrolled.sticky,\n className = _useUncontrolled.className,\n children = _useUncontrolled.children,\n _useUncontrolled$as = _useUncontrolled.as,\n Component = _useUncontrolled$as === void 0 ? 'nav' : _useUncontrolled$as,\n expanded = _useUncontrolled.expanded,\n _onToggle = _useUncontrolled.onToggle,\n onSelect = _useUncontrolled.onSelect,\n collapseOnSelect = _useUncontrolled.collapseOnSelect,\n controlledProps = _objectWithoutPropertiesLoose(_useUncontrolled, [\"bsPrefix\", \"expand\", \"variant\", \"bg\", \"fixed\", \"sticky\", \"className\", \"children\", \"as\", \"expanded\", \"onToggle\", \"onSelect\", \"collapseOnSelect\"]);\n\n var bsPrefix = useBootstrapPrefix(initialBsPrefix, 'navbar');\n var handleCollapse = useCallback(function () {\n if (onSelect) onSelect.apply(void 0, arguments);\n\n if (collapseOnSelect && expanded) {\n if (_onToggle) {\n _onToggle(false);\n }\n }\n }, [onSelect, collapseOnSelect, expanded, _onToggle]); // will result in some false positives but that seems better\n // than false negatives. strict `undefined` check allows explicit\n // \"nulling\" of the role if the user really doesn't want one\n\n if (controlledProps.role === undefined && Component !== 'nav') {\n controlledProps.role = 'navigation';\n }\n\n var expandClass = bsPrefix + \"-expand\";\n if (typeof expand === 'string') expandClass = expandClass + \"-\" + expand;\n var navbarContext = useMemo(function () {\n return {\n onToggle: function onToggle() {\n return _onToggle && _onToggle(!expanded);\n },\n bsPrefix: bsPrefix,\n expanded: !!expanded\n };\n }, [bsPrefix, expanded, _onToggle]);\n return /*#__PURE__*/React.createElement(NavbarContext.Provider, {\n value: navbarContext\n }, /*#__PURE__*/React.createElement(SelectableContext.Provider, {\n value: handleCollapse\n }, /*#__PURE__*/React.createElement(Component, _extends({\n ref: ref\n }, controlledProps, {\n className: classNames(className, bsPrefix, expand && expandClass, variant && bsPrefix + \"-\" + variant, bg && \"bg-\" + bg, sticky && \"sticky-\" + sticky, fixed && \"fixed-\" + fixed)\n }), children)));\n});\nNavbar.defaultProps = defaultProps;\nNavbar.displayName = 'Navbar';\nNavbar.Brand = NavbarBrand;\nNavbar.Toggle = NavbarToggle;\nNavbar.Collapse = NavbarCollapse;\nNavbar.Text = NavbarText;\nexport default Navbar;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport classNames from 'classnames';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nvar propTypes = {\n /**\n * Specify whether the feedback is for valid or invalid fields\n *\n * @type {('valid'|'invalid')}\n */\n type: PropTypes.string,\n\n /** Display feedback as a tooltip. */\n tooltip: PropTypes.bool,\n as: PropTypes.elementType\n};\nvar Feedback = React.forwardRef( // Need to define the default \"as\" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595\nfunction (_ref, ref) {\n var _ref$as = _ref.as,\n Component = _ref$as === void 0 ? 'div' : _ref$as,\n className = _ref.className,\n _ref$type = _ref.type,\n type = _ref$type === void 0 ? 'valid' : _ref$type,\n _ref$tooltip = _ref.tooltip,\n tooltip = _ref$tooltip === void 0 ? false : _ref$tooltip,\n props = _objectWithoutPropertiesLoose(_ref, [\"as\", \"className\", \"type\", \"tooltip\"]);\n\n return /*#__PURE__*/React.createElement(Component, _extends({}, props, {\n ref: ref,\n className: classNames(className, type + \"-\" + (tooltip ? 'tooltip' : 'feedback'))\n }));\n});\nFeedback.displayName = 'Feedback';\nFeedback.propTypes = propTypes;\nexport default Feedback;","import React from 'react'; // TODO\n\nvar FormContext = React.createContext({\n controlId: undefined\n});\nexport default FormContext;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport classNames from 'classnames';\nimport React, { useContext } from 'react';\nimport FormContext from './FormContext';\nimport { useBootstrapPrefix } from './ThemeProvider';\nvar FormCheckInput = React.forwardRef(function (_ref, ref) {\n var id = _ref.id,\n bsPrefix = _ref.bsPrefix,\n bsCustomPrefix = _ref.bsCustomPrefix,\n className = _ref.className,\n _ref$type = _ref.type,\n type = _ref$type === void 0 ? 'checkbox' : _ref$type,\n _ref$isValid = _ref.isValid,\n isValid = _ref$isValid === void 0 ? false : _ref$isValid,\n _ref$isInvalid = _ref.isInvalid,\n isInvalid = _ref$isInvalid === void 0 ? false : _ref$isInvalid,\n isStatic = _ref.isStatic,\n _ref$as = _ref.as,\n Component = _ref$as === void 0 ? 'input' : _ref$as,\n props = _objectWithoutPropertiesLoose(_ref, [\"id\", \"bsPrefix\", \"bsCustomPrefix\", \"className\", \"type\", \"isValid\", \"isInvalid\", \"isStatic\", \"as\"]);\n\n var _useContext = useContext(FormContext),\n controlId = _useContext.controlId,\n custom = _useContext.custom;\n\n var _ref2 = custom ? [bsCustomPrefix, 'custom-control-input'] : [bsPrefix, 'form-check-input'],\n prefix = _ref2[0],\n defaultPrefix = _ref2[1];\n\n bsPrefix = useBootstrapPrefix(prefix, defaultPrefix);\n return /*#__PURE__*/React.createElement(Component, _extends({}, props, {\n ref: ref,\n type: type,\n id: id || controlId,\n className: classNames(className, bsPrefix, isValid && 'is-valid', isInvalid && 'is-invalid', isStatic && 'position-static')\n }));\n});\nFormCheckInput.displayName = 'FormCheckInput';\nexport default FormCheckInput;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport classNames from 'classnames';\nimport React, { useContext } from 'react';\nimport FormContext from './FormContext';\nimport { useBootstrapPrefix } from './ThemeProvider';\nvar FormCheckLabel = React.forwardRef(function (_ref, ref) {\n var bsPrefix = _ref.bsPrefix,\n bsCustomPrefix = _ref.bsCustomPrefix,\n className = _ref.className,\n htmlFor = _ref.htmlFor,\n props = _objectWithoutPropertiesLoose(_ref, [\"bsPrefix\", \"bsCustomPrefix\", \"className\", \"htmlFor\"]);\n\n var _useContext = useContext(FormContext),\n controlId = _useContext.controlId,\n custom = _useContext.custom;\n\n var _ref2 = custom ? [bsCustomPrefix, 'custom-control-label'] : [bsPrefix, 'form-check-label'],\n prefix = _ref2[0],\n defaultPrefix = _ref2[1];\n\n bsPrefix = useBootstrapPrefix(prefix, defaultPrefix);\n return /*#__PURE__*/React.createElement(\"label\", _extends({}, props, {\n ref: ref,\n htmlFor: htmlFor || controlId,\n className: classNames(className, bsPrefix)\n }));\n});\nFormCheckLabel.displayName = 'FormCheckLabel';\nexport default FormCheckLabel;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport classNames from 'classnames';\nimport all from 'prop-types-extra/lib/all';\nimport React, { useContext, useMemo } from 'react';\nimport Feedback from './Feedback';\nimport FormCheckInput from './FormCheckInput';\nimport FormCheckLabel from './FormCheckLabel';\nimport FormContext from './FormContext';\nimport { useBootstrapPrefix } from './ThemeProvider';\nvar FormCheck = React.forwardRef(function (_ref, ref) {\n var id = _ref.id,\n bsPrefix = _ref.bsPrefix,\n bsCustomPrefix = _ref.bsCustomPrefix,\n _ref$inline = _ref.inline,\n inline = _ref$inline === void 0 ? false : _ref$inline,\n _ref$disabled = _ref.disabled,\n disabled = _ref$disabled === void 0 ? false : _ref$disabled,\n _ref$isValid = _ref.isValid,\n isValid = _ref$isValid === void 0 ? false : _ref$isValid,\n _ref$isInvalid = _ref.isInvalid,\n isInvalid = _ref$isInvalid === void 0 ? false : _ref$isInvalid,\n _ref$feedbackTooltip = _ref.feedbackTooltip,\n feedbackTooltip = _ref$feedbackTooltip === void 0 ? false : _ref$feedbackTooltip,\n feedback = _ref.feedback,\n className = _ref.className,\n style = _ref.style,\n _ref$title = _ref.title,\n title = _ref$title === void 0 ? '' : _ref$title,\n _ref$type = _ref.type,\n type = _ref$type === void 0 ? 'checkbox' : _ref$type,\n label = _ref.label,\n children = _ref.children,\n propCustom = _ref.custom,\n _ref$as = _ref.as,\n as = _ref$as === void 0 ? 'input' : _ref$as,\n props = _objectWithoutPropertiesLoose(_ref, [\"id\", \"bsPrefix\", \"bsCustomPrefix\", \"inline\", \"disabled\", \"isValid\", \"isInvalid\", \"feedbackTooltip\", \"feedback\", \"className\", \"style\", \"title\", \"type\", \"label\", \"children\", \"custom\", \"as\"]);\n\n var custom = type === 'switch' ? true : propCustom;\n\n var _ref2 = custom ? [bsCustomPrefix, 'custom-control'] : [bsPrefix, 'form-check'],\n prefix = _ref2[0],\n defaultPrefix = _ref2[1];\n\n bsPrefix = useBootstrapPrefix(prefix, defaultPrefix);\n\n var _useContext = useContext(FormContext),\n controlId = _useContext.controlId;\n\n var innerFormContext = useMemo(function () {\n return {\n controlId: id || controlId,\n custom: custom\n };\n }, [controlId, custom, id]);\n var hasLabel = label != null && label !== false && !children;\n var input = /*#__PURE__*/React.createElement(FormCheckInput, _extends({}, props, {\n type: type === 'switch' ? 'checkbox' : type,\n ref: ref,\n isValid: isValid,\n isInvalid: isInvalid,\n isStatic: !hasLabel,\n disabled: disabled,\n as: as\n }));\n return /*#__PURE__*/React.createElement(FormContext.Provider, {\n value: innerFormContext\n }, /*#__PURE__*/React.createElement(\"div\", {\n style: style,\n className: classNames(className, bsPrefix, custom && \"custom-\" + type, inline && bsPrefix + \"-inline\")\n }, children || /*#__PURE__*/React.createElement(React.Fragment, null, input, hasLabel && /*#__PURE__*/React.createElement(FormCheckLabel, {\n title: title\n }, label), (isValid || isInvalid) && /*#__PURE__*/React.createElement(Feedback, {\n type: isValid ? 'valid' : 'invalid',\n tooltip: feedbackTooltip\n }, feedback))));\n});\nFormCheck.displayName = 'FormCheck';\nFormCheck.Input = FormCheckInput;\nFormCheck.Label = FormCheckLabel;\nexport default FormCheck;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport classNames from 'classnames';\nimport React, { useContext } from 'react';\nimport FormContext from './FormContext';\nimport { useBootstrapPrefix } from './ThemeProvider';\nvar FormFileInput = React.forwardRef(function (_ref, ref) {\n var id = _ref.id,\n bsPrefix = _ref.bsPrefix,\n bsCustomPrefix = _ref.bsCustomPrefix,\n className = _ref.className,\n isValid = _ref.isValid,\n isInvalid = _ref.isInvalid,\n lang = _ref.lang,\n _ref$as = _ref.as,\n Component = _ref$as === void 0 ? 'input' : _ref$as,\n props = _objectWithoutPropertiesLoose(_ref, [\"id\", \"bsPrefix\", \"bsCustomPrefix\", \"className\", \"isValid\", \"isInvalid\", \"lang\", \"as\"]);\n\n var _useContext = useContext(FormContext),\n controlId = _useContext.controlId,\n custom = _useContext.custom;\n\n var type = 'file';\n\n var _ref2 = custom ? [bsCustomPrefix, 'custom-file-input'] : [bsPrefix, 'form-control-file'],\n prefix = _ref2[0],\n defaultPrefix = _ref2[1];\n\n bsPrefix = useBootstrapPrefix(prefix, defaultPrefix);\n return /*#__PURE__*/React.createElement(Component, _extends({}, props, {\n ref: ref,\n id: id || controlId,\n type: type,\n lang: lang,\n className: classNames(className, bsPrefix, isValid && 'is-valid', isInvalid && 'is-invalid')\n }));\n});\nFormFileInput.displayName = 'FormFileInput';\nexport default FormFileInput;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport classNames from 'classnames';\nimport React, { useContext } from 'react';\nimport FormContext from './FormContext';\nimport { useBootstrapPrefix } from './ThemeProvider';\nvar FormFileLabel = React.forwardRef(function (_ref, ref) {\n var bsPrefix = _ref.bsPrefix,\n bsCustomPrefix = _ref.bsCustomPrefix,\n className = _ref.className,\n htmlFor = _ref.htmlFor,\n props = _objectWithoutPropertiesLoose(_ref, [\"bsPrefix\", \"bsCustomPrefix\", \"className\", \"htmlFor\"]);\n\n var _useContext = useContext(FormContext),\n controlId = _useContext.controlId,\n custom = _useContext.custom;\n\n var _ref2 = custom ? [bsCustomPrefix, 'custom-file-label'] : [bsPrefix, 'form-file-label'],\n prefix = _ref2[0],\n defaultPrefix = _ref2[1];\n\n bsPrefix = useBootstrapPrefix(prefix, defaultPrefix);\n return /*#__PURE__*/React.createElement(\"label\", _extends({}, props, {\n ref: ref,\n htmlFor: htmlFor || controlId,\n className: classNames(className, bsPrefix),\n \"data-browse\": props['data-browse']\n }));\n});\nFormFileLabel.displayName = 'FormFileLabel';\nexport default FormFileLabel;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport classNames from 'classnames';\nimport React, { useContext, useMemo } from 'react';\nimport all from 'prop-types-extra/lib/all';\nimport Feedback from './Feedback';\nimport FormFileInput from './FormFileInput';\nimport FormFileLabel from './FormFileLabel';\nimport FormContext from './FormContext';\nimport { useBootstrapPrefix } from './ThemeProvider';\nvar FormFile = React.forwardRef(function (_ref, ref) {\n var id = _ref.id,\n bsPrefix = _ref.bsPrefix,\n bsCustomPrefix = _ref.bsCustomPrefix,\n _ref$disabled = _ref.disabled,\n disabled = _ref$disabled === void 0 ? false : _ref$disabled,\n _ref$isValid = _ref.isValid,\n isValid = _ref$isValid === void 0 ? false : _ref$isValid,\n _ref$isInvalid = _ref.isInvalid,\n isInvalid = _ref$isInvalid === void 0 ? false : _ref$isInvalid,\n _ref$feedbackTooltip = _ref.feedbackTooltip,\n feedbackTooltip = _ref$feedbackTooltip === void 0 ? false : _ref$feedbackTooltip,\n feedback = _ref.feedback,\n className = _ref.className,\n style = _ref.style,\n label = _ref.label,\n children = _ref.children,\n custom = _ref.custom,\n lang = _ref.lang,\n dataBrowse = _ref['data-browse'],\n _ref$as = _ref.as,\n Component = _ref$as === void 0 ? 'div' : _ref$as,\n _ref$inputAs = _ref.inputAs,\n inputAs = _ref$inputAs === void 0 ? 'input' : _ref$inputAs,\n props = _objectWithoutPropertiesLoose(_ref, [\"id\", \"bsPrefix\", \"bsCustomPrefix\", \"disabled\", \"isValid\", \"isInvalid\", \"feedbackTooltip\", \"feedback\", \"className\", \"style\", \"label\", \"children\", \"custom\", \"lang\", \"data-browse\", \"as\", \"inputAs\"]);\n\n var _ref2 = custom ? [bsCustomPrefix, 'custom'] : [bsPrefix, 'form-file'],\n prefix = _ref2[0],\n defaultPrefix = _ref2[1];\n\n bsPrefix = useBootstrapPrefix(prefix, defaultPrefix);\n var type = 'file';\n\n var _useContext = useContext(FormContext),\n controlId = _useContext.controlId;\n\n var innerFormContext = useMemo(function () {\n return {\n controlId: id || controlId,\n custom: custom\n };\n }, [controlId, custom, id]);\n var hasLabel = label != null && label !== false && !children;\n var input = /*#__PURE__*/React.createElement(FormFileInput, _extends({}, props, {\n ref: ref,\n isValid: isValid,\n isInvalid: isInvalid,\n disabled: disabled,\n as: inputAs,\n lang: lang\n }));\n return /*#__PURE__*/React.createElement(FormContext.Provider, {\n value: innerFormContext\n }, /*#__PURE__*/React.createElement(Component, {\n style: style,\n className: classNames(className, bsPrefix, custom && \"custom-\" + type)\n }, children || /*#__PURE__*/React.createElement(React.Fragment, null, custom ? /*#__PURE__*/React.createElement(React.Fragment, null, input, hasLabel && /*#__PURE__*/React.createElement(FormFileLabel, {\n \"data-browse\": dataBrowse\n }, label)) : /*#__PURE__*/React.createElement(React.Fragment, null, hasLabel && /*#__PURE__*/React.createElement(FormFileLabel, null, label), input), (isValid || isInvalid) && /*#__PURE__*/React.createElement(Feedback, {\n type: isValid ? 'valid' : 'invalid',\n tooltip: feedbackTooltip\n }, feedback))));\n});\nFormFile.displayName = 'FormFile';\nFormFile.Input = FormFileInput;\nFormFile.Label = FormFileLabel;\nexport default FormFile;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport classNames from 'classnames';\nimport all from 'prop-types-extra/lib/all';\nimport React, { useContext } from 'react';\nimport warning from 'warning';\nimport Feedback from './Feedback';\nimport FormContext from './FormContext';\nimport { useBootstrapPrefix } from './ThemeProvider';\nvar FormControl = React.forwardRef(function (_ref, ref) {\n var bsPrefix = _ref.bsPrefix,\n bsCustomPrefix = _ref.bsCustomPrefix,\n type = _ref.type,\n size = _ref.size,\n htmlSize = _ref.htmlSize,\n id = _ref.id,\n className = _ref.className,\n _ref$isValid = _ref.isValid,\n isValid = _ref$isValid === void 0 ? false : _ref$isValid,\n _ref$isInvalid = _ref.isInvalid,\n isInvalid = _ref$isInvalid === void 0 ? false : _ref$isInvalid,\n plaintext = _ref.plaintext,\n readOnly = _ref.readOnly,\n custom = _ref.custom,\n _ref$as = _ref.as,\n Component = _ref$as === void 0 ? 'input' : _ref$as,\n props = _objectWithoutPropertiesLoose(_ref, [\"bsPrefix\", \"bsCustomPrefix\", \"type\", \"size\", \"htmlSize\", \"id\", \"className\", \"isValid\", \"isInvalid\", \"plaintext\", \"readOnly\", \"custom\", \"as\"]);\n\n var _useContext = useContext(FormContext),\n controlId = _useContext.controlId;\n\n var _ref2 = custom ? [bsCustomPrefix, 'custom'] : [bsPrefix, 'form-control'],\n prefix = _ref2[0],\n defaultPrefix = _ref2[1];\n\n bsPrefix = useBootstrapPrefix(prefix, defaultPrefix);\n var classes;\n\n if (plaintext) {\n var _classes;\n\n classes = (_classes = {}, _classes[bsPrefix + \"-plaintext\"] = true, _classes);\n } else if (type === 'file') {\n var _classes2;\n\n classes = (_classes2 = {}, _classes2[bsPrefix + \"-file\"] = true, _classes2);\n } else if (type === 'range') {\n var _classes3;\n\n classes = (_classes3 = {}, _classes3[bsPrefix + \"-range\"] = true, _classes3);\n } else if (Component === 'select' && custom) {\n var _classes4;\n\n classes = (_classes4 = {}, _classes4[bsPrefix + \"-select\"] = true, _classes4[bsPrefix + \"-select-\" + size] = size, _classes4);\n } else {\n var _classes5;\n\n classes = (_classes5 = {}, _classes5[bsPrefix] = true, _classes5[bsPrefix + \"-\" + size] = size, _classes5);\n }\n\n process.env.NODE_ENV !== \"production\" ? warning(controlId == null || !id, '`controlId` is ignored on `` when `id` is specified.') : void 0;\n return /*#__PURE__*/React.createElement(Component, _extends({}, props, {\n type: type,\n size: htmlSize,\n ref: ref,\n readOnly: readOnly,\n id: id || controlId,\n className: classNames(className, classes, isValid && \"is-valid\", isInvalid && \"is-invalid\")\n }));\n});\nFormControl.displayName = 'FormControl';\nexport default Object.assign(FormControl, {\n Feedback: Feedback\n});","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport classNames from 'classnames';\nimport React, { useMemo } from 'react';\nimport FormContext from './FormContext';\nimport { useBootstrapPrefix } from './ThemeProvider';\nvar FormGroup = React.forwardRef(function (_ref, ref) {\n var bsPrefix = _ref.bsPrefix,\n className = _ref.className,\n children = _ref.children,\n controlId = _ref.controlId,\n _ref$as = _ref.as,\n Component = _ref$as === void 0 ? 'div' : _ref$as,\n props = _objectWithoutPropertiesLoose(_ref, [\"bsPrefix\", \"className\", \"children\", \"controlId\", \"as\"]);\n\n bsPrefix = useBootstrapPrefix(bsPrefix, 'form-group');\n var context = useMemo(function () {\n return {\n controlId: controlId\n };\n }, [controlId]);\n return /*#__PURE__*/React.createElement(FormContext.Provider, {\n value: context\n }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {\n ref: ref,\n className: classNames(className, bsPrefix)\n }), children));\n});\nFormGroup.displayName = 'FormGroup';\nexport default FormGroup;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport classNames from 'classnames';\nimport React, { useContext } from 'react';\nimport warning from 'warning';\nimport Col from './Col';\nimport FormContext from './FormContext';\nimport { useBootstrapPrefix } from './ThemeProvider';\nvar defaultProps = {\n column: false,\n srOnly: false\n};\nvar FormLabel = React.forwardRef(function (_ref, ref) {\n var _ref$as = _ref.as,\n Component = _ref$as === void 0 ? 'label' : _ref$as,\n bsPrefix = _ref.bsPrefix,\n column = _ref.column,\n srOnly = _ref.srOnly,\n className = _ref.className,\n htmlFor = _ref.htmlFor,\n props = _objectWithoutPropertiesLoose(_ref, [\"as\", \"bsPrefix\", \"column\", \"srOnly\", \"className\", \"htmlFor\"]);\n\n var _useContext = useContext(FormContext),\n controlId = _useContext.controlId;\n\n bsPrefix = useBootstrapPrefix(bsPrefix, 'form-label');\n var columnClass = 'col-form-label';\n if (typeof column === 'string') columnClass = columnClass + \"-\" + column;\n var classes = classNames(className, bsPrefix, srOnly && 'sr-only', column && columnClass);\n process.env.NODE_ENV !== \"production\" ? warning(controlId == null || !htmlFor, '`controlId` is ignored on `` when `htmlFor` is specified.') : void 0;\n htmlFor = htmlFor || controlId;\n if (column) return /*#__PURE__*/React.createElement(Col, _extends({\n as: \"label\",\n className: classes,\n htmlFor: htmlFor\n }, props));\n return (\n /*#__PURE__*/\n // eslint-disable-next-line jsx-a11y/label-has-for, jsx-a11y/label-has-associated-control\n React.createElement(Component, _extends({\n ref: ref,\n className: classes,\n htmlFor: htmlFor\n }, props))\n );\n});\nFormLabel.displayName = 'FormLabel';\nFormLabel.defaultProps = defaultProps;\nexport default FormLabel;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport classNames from 'classnames';\nimport React from 'react';\nimport { useBootstrapPrefix } from './ThemeProvider';\nvar FormText = React.forwardRef( // Need to define the default \"as\" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595\nfunction (_ref, ref) {\n var bsPrefix = _ref.bsPrefix,\n className = _ref.className,\n _ref$as = _ref.as,\n Component = _ref$as === void 0 ? 'small' : _ref$as,\n muted = _ref.muted,\n props = _objectWithoutPropertiesLoose(_ref, [\"bsPrefix\", \"className\", \"as\", \"muted\"]);\n\n bsPrefix = useBootstrapPrefix(bsPrefix, 'form-text');\n return /*#__PURE__*/React.createElement(Component, _extends({}, props, {\n ref: ref,\n className: classNames(className, bsPrefix, muted && 'text-muted')\n }));\n});\nFormText.displayName = 'FormText';\nexport default FormText;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport React from 'react';\nimport FormCheck from './FormCheck';\nvar Switch = React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(FormCheck, _extends({}, props, {\n ref: ref,\n type: \"switch\"\n }));\n});\nSwitch.displayName = 'Switch';\nSwitch.Input = FormCheck.Input;\nSwitch.Label = FormCheck.Label;\nexport default Switch;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport classNames from 'classnames';\nimport React from 'react';\nimport FormCheck from './FormCheck';\nimport FormFile from './FormFile';\nimport FormControl from './FormControl';\nimport FormGroup from './FormGroup';\nimport FormLabel from './FormLabel';\nimport FormText from './FormText';\nimport Switch from './Switch';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport createWithBsPrefix from './createWithBsPrefix';\nvar FormRow = createWithBsPrefix('form-row');\nvar defaultProps = {\n inline: false\n};\nvar FormImpl = React.forwardRef(function (_ref, ref) {\n var bsPrefix = _ref.bsPrefix,\n inline = _ref.inline,\n className = _ref.className,\n validated = _ref.validated,\n _ref$as = _ref.as,\n Component = _ref$as === void 0 ? 'form' : _ref$as,\n props = _objectWithoutPropertiesLoose(_ref, [\"bsPrefix\", \"inline\", \"className\", \"validated\", \"as\"]);\n\n bsPrefix = useBootstrapPrefix(bsPrefix, 'form');\n return /*#__PURE__*/React.createElement(Component, _extends({}, props, {\n ref: ref,\n className: classNames(className, validated && 'was-validated', inline && bsPrefix + \"-inline\")\n }));\n});\nFormImpl.displayName = 'Form';\nFormImpl.defaultProps = defaultProps;\nFormImpl.Row = FormRow;\nFormImpl.Group = FormGroup;\nFormImpl.Control = FormControl;\nFormImpl.Check = FormCheck;\nFormImpl.File = FormFile;\nFormImpl.Switch = Switch;\nFormImpl.Label = FormLabel;\nFormImpl.Text = FormText;\nexport default FormImpl;","import React from 'react';\nvar context = React.createContext(null);\ncontext.displayName = 'CardContext';\nexport default context;","var toArray = Function.prototype.bind.call(Function.prototype.call, [].slice);\n/**\n * Runs `querySelectorAll` on a given element.\n * \n * @param element the element\n * @param selector the selector\n */\n\nexport default function qsa(element, selector) {\n return toArray(element.querySelectorAll(selector));\n}","import { useMemo } from 'react';\n\nvar toFnRef = function toFnRef(ref) {\n return !ref || typeof ref === 'function' ? ref : function (value) {\n ref.current = value;\n };\n};\n\nexport function mergeRefs(refA, refB) {\n var a = toFnRef(refA);\n var b = toFnRef(refB);\n return function (value) {\n if (a) a(value);\n if (b) b(value);\n };\n}\n/**\n * Create and returns a single callback ref composed from two other Refs.\n *\n * ```tsx\n * const Button = React.forwardRef((props, ref) => {\n * const [element, attachRef] = useCallbackRef();\n * const mergedRef = useMergedRefs(ref, attachRef);\n *\n * return \n * })\n * ```\n *\n * @param refA A Callback or mutable Ref\n * @param refB A Callback or mutable Ref\n * @category refs\n */\n\nfunction useMergedRefs(refA, refB) {\n return useMemo(function () {\n return mergeRefs(refA, refB);\n }, [refA, refB]);\n}\n\nexport default useMergedRefs;","import React from 'react'; // TODO: check this\n\nvar NavContext = React.createContext(null);\nNavContext.displayName = 'NavContext';\nexport default NavContext;","import React from 'react';\nvar TabContext = React.createContext(null);\nexport default TabContext;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport qsa from 'dom-helpers/querySelectorAll';\nimport React, { useContext, useEffect, useRef } from 'react';\nimport useForceUpdate from '@restart/hooks/useForceUpdate';\nimport useMergedRefs from '@restart/hooks/useMergedRefs';\nimport NavContext from './NavContext';\nimport SelectableContext, { makeEventKey } from './SelectableContext';\nimport TabContext from './TabContext';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nvar noop = function noop() {};\n\nvar AbstractNav = React.forwardRef(function (_ref, ref) {\n var _ref$as = _ref.as,\n Component = _ref$as === void 0 ? 'ul' : _ref$as,\n onSelect = _ref.onSelect,\n activeKey = _ref.activeKey,\n role = _ref.role,\n onKeyDown = _ref.onKeyDown,\n props = _objectWithoutPropertiesLoose(_ref, [\"as\", \"onSelect\", \"activeKey\", \"role\", \"onKeyDown\"]);\n\n // A ref and forceUpdate for refocus, b/c we only want to trigger when needed\n // and don't want to reset the set in the effect\n var forceUpdate = useForceUpdate();\n var needsRefocusRef = useRef(false);\n var parentOnSelect = useContext(SelectableContext);\n var tabContext = useContext(TabContext);\n var getControlledId, getControllerId;\n\n if (tabContext) {\n role = role || 'tablist';\n activeKey = tabContext.activeKey;\n getControlledId = tabContext.getControlledId;\n getControllerId = tabContext.getControllerId;\n }\n\n var listNode = useRef(null);\n\n var getNextActiveChild = function getNextActiveChild(offset) {\n var currentListNode = listNode.current;\n if (!currentListNode) return null;\n var items = qsa(currentListNode, '[data-rb-event-key]:not(.disabled)');\n var activeChild = currentListNode.querySelector('.active');\n if (!activeChild) return null;\n var index = items.indexOf(activeChild);\n if (index === -1) return null;\n var nextIndex = index + offset;\n if (nextIndex >= items.length) nextIndex = 0;\n if (nextIndex < 0) nextIndex = items.length - 1;\n return items[nextIndex];\n };\n\n var handleSelect = function handleSelect(key, event) {\n if (key == null) return;\n if (onSelect) onSelect(key, event);\n if (parentOnSelect) parentOnSelect(key, event);\n };\n\n var handleKeyDown = function handleKeyDown(event) {\n if (onKeyDown) onKeyDown(event);\n var nextActiveChild;\n\n switch (event.key) {\n case 'ArrowLeft':\n case 'ArrowUp':\n nextActiveChild = getNextActiveChild(-1);\n break;\n\n case 'ArrowRight':\n case 'ArrowDown':\n nextActiveChild = getNextActiveChild(1);\n break;\n\n default:\n return;\n }\n\n if (!nextActiveChild) return;\n event.preventDefault();\n handleSelect(nextActiveChild.dataset.rbEventKey, event);\n needsRefocusRef.current = true;\n forceUpdate();\n };\n\n useEffect(function () {\n if (listNode.current && needsRefocusRef.current) {\n var activeChild = listNode.current.querySelector('[data-rb-event-key].active');\n if (activeChild) activeChild.focus();\n }\n\n needsRefocusRef.current = false;\n });\n var mergedRef = useMergedRefs(ref, listNode);\n return /*#__PURE__*/React.createElement(SelectableContext.Provider, {\n value: handleSelect\n }, /*#__PURE__*/React.createElement(NavContext.Provider, {\n value: {\n role: role,\n // used by NavLink to determine it's role\n activeKey: makeEventKey(activeKey),\n getControlledId: getControlledId || noop,\n getControllerId: getControllerId || noop\n }\n }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {\n onKeyDown: handleKeyDown,\n ref: mergedRef,\n role: role\n }))));\n});\nexport default AbstractNav;","import { useReducer } from 'react';\n/**\n * Returns a function that triggers a component update. the hook equivalent to\n * `this.forceUpdate()` in a class component. In most cases using a state value directly\n * is preferable but may be required in some advanced usages of refs for interop or\n * when direct DOM manipulation is required.\n *\n * ```ts\n * const forceUpdate = useForceUpdate();\n *\n * const updateOnClick = useCallback(() => {\n * forceUpdate()\n * }, [forceUpdate])\n *\n * return \n * ```\n */\n\nexport default function useForceUpdate() {\n // The toggling state value is designed to defeat React optimizations for skipping\n // updates when they are stricting equal to the last state value\n var _useReducer = useReducer(function (state) {\n return !state;\n }, false),\n dispatch = _useReducer[1];\n\n return dispatch;\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport classNames from 'classnames';\nimport React from 'react';\nimport { useBootstrapPrefix } from './ThemeProvider';\nvar NavItem = React.forwardRef( // Need to define the default \"as\" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595\nfunction (_ref, ref) {\n var bsPrefix = _ref.bsPrefix,\n className = _ref.className,\n children = _ref.children,\n _ref$as = _ref.as,\n Component = _ref$as === void 0 ? 'div' : _ref$as,\n props = _objectWithoutPropertiesLoose(_ref, [\"bsPrefix\", \"className\", \"children\", \"as\"]);\n\n bsPrefix = useBootstrapPrefix(bsPrefix, 'nav-item');\n return /*#__PURE__*/React.createElement(Component, _extends({}, props, {\n ref: ref,\n className: classNames(className, bsPrefix)\n }), children);\n});\nNavItem.displayName = 'NavItem';\nexport default NavItem;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport classNames from 'classnames';\nimport React, { useContext } from 'react';\nimport useEventCallback from '@restart/hooks/useEventCallback';\nimport warning from 'warning';\nimport NavContext from './NavContext';\nimport SelectableContext, { makeEventKey } from './SelectableContext';\nvar defaultProps = {\n disabled: false\n};\nvar AbstractNavItem = React.forwardRef(function (_ref, ref) {\n var active = _ref.active,\n className = _ref.className,\n eventKey = _ref.eventKey,\n onSelect = _ref.onSelect,\n onClick = _ref.onClick,\n Component = _ref.as,\n props = _objectWithoutPropertiesLoose(_ref, [\"active\", \"className\", \"eventKey\", \"onSelect\", \"onClick\", \"as\"]);\n\n var navKey = makeEventKey(eventKey, props.href);\n var parentOnSelect = useContext(SelectableContext);\n var navContext = useContext(NavContext);\n var isActive = active;\n\n if (navContext) {\n if (!props.role && navContext.role === 'tablist') props.role = 'tab';\n var contextControllerId = navContext.getControllerId(navKey);\n var contextControlledId = navContext.getControlledId(navKey);\n process.env.NODE_ENV !== \"production\" ? warning(!contextControllerId || !props.id, \"[react-bootstrap] The provided id '\" + props.id + \"' was overwritten by the current navContext with '\" + contextControllerId + \"'.\") : void 0;\n process.env.NODE_ENV !== \"production\" ? warning(!contextControlledId || !props['aria-controls'], \"[react-bootstrap] The provided aria-controls value '\" + props['aria-controls'] + \"' was overwritten by the current navContext with '\" + contextControlledId + \"'.\") : void 0;\n props['data-rb-event-key'] = navKey;\n props.id = contextControllerId || props.id;\n props['aria-controls'] = contextControlledId || props['aria-controls'];\n isActive = active == null && navKey != null ? navContext.activeKey === navKey : active;\n }\n\n if (props.role === 'tab') {\n props.tabIndex = isActive ? props.tabIndex : -1;\n props['aria-selected'] = isActive;\n }\n\n var handleOnclick = useEventCallback(function (e) {\n if (onClick) onClick(e);\n if (navKey == null) return;\n if (onSelect) onSelect(navKey, e);\n if (parentOnSelect) parentOnSelect(navKey, e);\n });\n return /*#__PURE__*/React.createElement(Component, _extends({}, props, {\n ref: ref,\n onClick: handleOnclick,\n className: classNames(className, isActive && 'active')\n }));\n});\nAbstractNavItem.defaultProps = defaultProps;\nexport default AbstractNavItem;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport classNames from 'classnames';\nimport React from 'react';\nimport SafeAnchor from './SafeAnchor';\nimport AbstractNavItem from './AbstractNavItem';\nimport { useBootstrapPrefix } from './ThemeProvider';\nvar defaultProps = {\n disabled: false,\n as: SafeAnchor\n};\nvar NavLink = React.forwardRef(function (_ref, ref) {\n var bsPrefix = _ref.bsPrefix,\n disabled = _ref.disabled,\n className = _ref.className,\n href = _ref.href,\n eventKey = _ref.eventKey,\n onSelect = _ref.onSelect,\n as = _ref.as,\n props = _objectWithoutPropertiesLoose(_ref, [\"bsPrefix\", \"disabled\", \"className\", \"href\", \"eventKey\", \"onSelect\", \"as\"]);\n\n bsPrefix = useBootstrapPrefix(bsPrefix, 'nav-link');\n return /*#__PURE__*/React.createElement(AbstractNavItem, _extends({}, props, {\n href: href,\n ref: ref,\n eventKey: eventKey,\n as: as,\n disabled: disabled,\n onSelect: onSelect,\n className: classNames(className, bsPrefix, disabled && 'disabled')\n }));\n});\nNavLink.displayName = 'NavLink';\nNavLink.defaultProps = defaultProps;\nexport default NavLink;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport classNames from 'classnames';\nimport all from 'prop-types-extra/lib/all';\nimport React, { useContext } from 'react';\nimport { useUncontrolled } from 'uncontrollable';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport NavbarContext from './NavbarContext';\nimport CardContext from './CardContext';\nimport AbstractNav from './AbstractNav';\nimport NavItem from './NavItem';\nimport NavLink from './NavLink';\nvar defaultProps = {\n justify: false,\n fill: false\n};\nvar Nav = React.forwardRef(function (uncontrolledProps, ref) {\n var _classNames;\n\n var _useUncontrolled = useUncontrolled(uncontrolledProps, {\n activeKey: 'onSelect'\n }),\n _useUncontrolled$as = _useUncontrolled.as,\n as = _useUncontrolled$as === void 0 ? 'div' : _useUncontrolled$as,\n initialBsPrefix = _useUncontrolled.bsPrefix,\n variant = _useUncontrolled.variant,\n fill = _useUncontrolled.fill,\n justify = _useUncontrolled.justify,\n navbar = _useUncontrolled.navbar,\n className = _useUncontrolled.className,\n children = _useUncontrolled.children,\n activeKey = _useUncontrolled.activeKey,\n props = _objectWithoutPropertiesLoose(_useUncontrolled, [\"as\", \"bsPrefix\", \"variant\", \"fill\", \"justify\", \"navbar\", \"className\", \"children\", \"activeKey\"]);\n\n var bsPrefix = useBootstrapPrefix(initialBsPrefix, 'nav');\n var navbarBsPrefix;\n var cardHeaderBsPrefix;\n var isNavbar = false;\n var navbarContext = useContext(NavbarContext);\n var cardContext = useContext(CardContext);\n\n if (navbarContext) {\n navbarBsPrefix = navbarContext.bsPrefix;\n isNavbar = navbar == null ? true : navbar;\n } else if (cardContext) {\n cardHeaderBsPrefix = cardContext.cardHeaderBsPrefix;\n }\n\n return /*#__PURE__*/React.createElement(AbstractNav, _extends({\n as: as,\n ref: ref,\n activeKey: activeKey,\n className: classNames(className, (_classNames = {}, _classNames[bsPrefix] = !isNavbar, _classNames[navbarBsPrefix + \"-nav\"] = isNavbar, _classNames[cardHeaderBsPrefix + \"-\" + variant] = !!cardHeaderBsPrefix, _classNames[bsPrefix + \"-\" + variant] = !!variant, _classNames[bsPrefix + \"-fill\"] = fill, _classNames[bsPrefix + \"-justified\"] = justify, _classNames))\n }, props), children);\n});\nNav.displayName = 'Nav';\nNav.defaultProps = defaultProps;\nNav.Item = NavItem;\nNav.Link = NavLink;\nexport default Nav;","import { createElement, append, prepend, isNullOrUndefined, getValue, getDefaultDateObject, cldrData, addClass, setStyleAttribute, formatUnit, EventHandler } from '@syncfusion/ej2-base';\nimport * as cls from '../base/css-constant';\nimport * as util from '../base/util';\n/**\n * view base\n */\nvar ViewBase = /** @class */ (function () {\n /**\n * Constructor\n *\n * @param {Schedule} parent Accepts the schedule instance\n */\n function ViewBase(parent) {\n this.parent = parent;\n }\n ViewBase.prototype.isTimelineView = function () {\n return this.parent.currentView.indexOf('Timeline') !== -1;\n };\n ViewBase.prototype.getContentRows = function () {\n return [];\n };\n ViewBase.prototype.serverRenderLayout = function () {\n // Need only for layout server rendering\n };\n ViewBase.prototype.getDayName = function (date) {\n return this.parent.getDayNames('abbreviated')[date.getDay()];\n };\n ViewBase.prototype.getDate = function (date) {\n return this.parent.globalize.formatDate(date, { format: 'd', calendar: this.parent.getCalendarMode() });\n };\n ViewBase.prototype.getTime = function (date) {\n if (this.parent.isAdaptive) {\n if (this.parent.activeViewOptions.timeFormat === 'HH:mm' || this.parent.activeViewOptions.timeFormat === 'HH.mm') {\n return this.parent.globalize.formatDate(date, { format: 'H', calendar: this.parent.getCalendarMode() });\n }\n return this.parent.globalize.formatDate(date, { skeleton: 'h', calendar: this.parent.getCalendarMode() });\n }\n return this.parent.getTimeString(date);\n };\n ViewBase.prototype.getTimelineDate = function (date) {\n var text = this.parent.globalize.formatDate(date, { skeleton: 'MMMd', calendar: this.parent.getCalendarMode() }) + ', ' +\n this.parent.getDayNames('wide')[date.getDay()];\n return util.capitalizeFirstWord(text, 'multiple');\n };\n ViewBase.prototype.createEventTable = function (trCount) {\n var eventTable = createElement('div', { className: cls.EVENT_TABLE_CLASS });\n append(this.getEventRows(trCount), eventTable);\n return eventTable;\n };\n ViewBase.prototype.getEventRows = function (trCount) {\n var eventRows = [];\n var eventContainer;\n for (var row = 0; row < trCount; row++) {\n eventContainer = createElement('div', { className: cls.APPOINTMENT_CONTAINER_CLASS });\n if (this.parent.resourceBase && !this.parent.uiStateValues.isGroupAdaptive && this.parent.resourceBase.renderedResources) {\n eventContainer.setAttribute('data-group-index', this.parent.resourceBase.renderedResources[row].groupIndex.toString());\n }\n eventRows.push(eventContainer);\n }\n return eventRows;\n };\n ViewBase.prototype.collapseRows = function (wrap) {\n if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {\n this.parent.resourceBase.hideResourceRows(wrap.querySelector('tbody'));\n this.parent.resourceBase.hideResourceRows(wrap.querySelector('.' + cls.EVENT_TABLE_CLASS));\n }\n };\n ViewBase.prototype.createTableLayout = function (className) {\n var clsName = className || '';\n var table = createElement('table', { className: cls.SCHEDULE_TABLE_CLASS + ' ' + clsName });\n var tbody = createElement('tbody');\n table.appendChild(tbody);\n return table;\n };\n ViewBase.prototype.createColGroup = function (table, lastRow) {\n var length = lastRow.length;\n if (lastRow[0] && lastRow[0].colSpan) {\n length = lastRow.map(function (value) { return value.colSpan; }).reduce(function (prev, next) { return prev + next; });\n }\n var colGroupEle = createElement('colgroup');\n for (var i = 0; i < length; i++) {\n colGroupEle.appendChild(createElement('col'));\n }\n prepend([colGroupEle], table);\n };\n ViewBase.prototype.getScrollXIndent = function (content) {\n return content.offsetHeight - content.clientHeight > 0 ? util.getScrollBarWidth() : 0;\n };\n ViewBase.prototype.scrollTopPanel = function (target) {\n this.getDatesHeaderElement().firstElementChild.scrollLeft = target.scrollLeft;\n };\n ViewBase.prototype.scrollHeaderLabels = function (target) {\n var headerTable = this.element.querySelector('.e-date-header-wrap table');\n var colWidth = headerTable.offsetWidth / headerTable.querySelectorAll('colgroup col').length;\n var applyLeft = function (headerCells, isRtl) {\n var currentCell;\n var tdLeft = 0;\n var colSpan = 0;\n var hiddenLeft = isRtl ? -(target.scrollLeft) : target.scrollLeft;\n for (var _i = 0, headerCells_2 = headerCells; _i < headerCells_2.length; _i++) {\n var cell = headerCells_2[_i];\n colSpan += parseInt(cell.getAttribute('colSpan'), 10);\n if (colSpan > Math.floor(hiddenLeft / colWidth)) {\n currentCell = cell;\n break;\n }\n tdLeft += cell.offsetWidth;\n }\n if (!isNullOrUndefined(currentCell)) {\n currentCell.children[0].style[isRtl ? 'right' : 'left'] = (hiddenLeft - tdLeft) + 'px';\n }\n };\n var classNames = ['.e-header-year-cell', '.e-header-month-cell', '.e-header-week-cell', '.e-header-cells'];\n for (var _i = 0, classNames_1 = classNames; _i < classNames_1.length; _i++) {\n var className = classNames_1[_i];\n var headerCells = [].slice.call(this.element.querySelectorAll(className));\n if (headerCells.length > 0) {\n for (var _a = 0, headerCells_1 = headerCells; _a < headerCells_1.length; _a++) {\n var element = headerCells_1[_a];\n element.children[0].style[this.parent.enableRtl ? 'right' : 'left'] = '';\n }\n applyLeft(headerCells, this.parent.enableRtl);\n }\n }\n };\n ViewBase.prototype.addAttributes = function (td, element) {\n if (td.template) {\n append(td.template, element);\n }\n if (td.colSpan) {\n element.setAttribute('colspan', td.colSpan.toString());\n }\n if (td.className) {\n addClass([element], td.className);\n }\n };\n ViewBase.prototype.getHeaderBarHeight = function () {\n var headerBarHeight = 2;\n if (this.parent.headerModule) {\n headerBarHeight += util.getOuterHeight(this.parent.headerModule.getHeaderElement());\n }\n if (this.parent.uiStateValues.isGroupAdaptive) {\n var resHeader = this.parent.element.querySelector('.' + cls.RESOURCE_HEADER_TOOLBAR);\n if (resHeader) {\n headerBarHeight += resHeader.offsetHeight;\n }\n }\n return headerBarHeight;\n };\n ViewBase.prototype.renderPanel = function (type) {\n if (type === cls.PREVIOUS_PANEL_CLASS) {\n prepend([this.element], this.parent.element.querySelector('.' + cls.TABLE_CONTAINER_CLASS));\n }\n else {\n this.parent.element.querySelector('.' + cls.TABLE_CONTAINER_CLASS).appendChild(this.element);\n }\n };\n ViewBase.prototype.setPanel = function (panel) {\n this.element = panel;\n };\n ViewBase.prototype.getPanel = function () {\n return this.element;\n };\n ViewBase.prototype.getDatesHeaderElement = function () {\n return this.element.querySelector('.' + cls.DATE_HEADER_CONTAINER_CLASS);\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n ViewBase.prototype.getDateSlots = function (renderDates, workDays) {\n return []; // Here getDateSlots only need in vertical and month views\n };\n ViewBase.prototype.generateColumnLevels = function () {\n return []; // Here generateColumnLevels only need in vertical and month views\n };\n ViewBase.prototype.getColumnLevels = function () {\n return this.colLevels;\n };\n ViewBase.prototype.highlightCurrentTime = function () {\n // Here showTimeIndicator functionalities\n };\n ViewBase.prototype.startDate = function () {\n return this.renderDates[0];\n };\n ViewBase.prototype.endDate = function () {\n return util.addDays(this.renderDates[this.renderDates.length - 1], 1);\n };\n ViewBase.prototype.getStartHour = function () {\n var startHour = this.parent.getStartEndTime(this.parent.activeViewOptions.startHour);\n if (isNullOrUndefined(startHour)) {\n startHour = new Date(2000, 0, 0, 0);\n }\n return startHour;\n };\n ViewBase.prototype.getEndHour = function () {\n var endHour = this.parent.getStartEndTime(this.parent.activeViewOptions.endHour);\n if (isNullOrUndefined(endHour)) {\n endHour = new Date(2000, 0, 0, 0);\n }\n return endHour;\n };\n ViewBase.prototype.isCurrentDate = function (date) {\n return date.setHours(0, 0, 0, 0) === this.parent.getCurrentTime().setHours(0, 0, 0, 0);\n };\n ViewBase.prototype.isCurrentMonth = function (date) {\n return date.getFullYear() ===\n this.parent.getCurrentTime().getFullYear() && date.getMonth() === this.parent.getCurrentTime().getMonth();\n };\n ViewBase.prototype.isWorkDay = function (date, workDays) {\n if (workDays === void 0) { workDays = this.parent.activeViewOptions.workDays; }\n if (workDays.indexOf(date.getDay()) >= 0) {\n return true;\n }\n return false;\n };\n ViewBase.prototype.isWorkHour = function (date, startHour, endHour, workDays) {\n if (isNullOrUndefined(startHour) || isNullOrUndefined(endHour)) {\n return false;\n }\n startHour.setMilliseconds(0);\n endHour.setMilliseconds(0);\n return !(util.getDateInMs(date) < util.getDateInMs(startHour) || util.getDateInMs(date) >= util.getDateInMs(endHour) ||\n !this.isWorkDay(date, workDays));\n };\n ViewBase.prototype.getRenderDates = function (workDays) {\n var renderDates = [];\n // Due to same code for vertical and time line, week & work week views, if condition has used\n if (this.parent.currentView === 'Week' || this.parent.currentView === 'TimelineWeek') {\n var selectedDate = util.resetTime(this.parent.selectedDate);\n var start = util.getWeekFirstDate(selectedDate, this.parent.activeViewOptions.firstDayOfWeek);\n for (var i = 0, length_1 = util.WEEK_LENGTH * this.parent.activeViewOptions.interval; i < length_1; i++) {\n if (this.parent.activeViewOptions.showWeekend) {\n renderDates.push(start);\n }\n else {\n if (this.isWorkDay(start, workDays)) {\n renderDates.push(start);\n }\n }\n start = util.addDays(start, 1);\n }\n }\n else if (this.parent.currentView === 'WorkWeek' || this.parent.currentView === 'TimelineWorkWeek') {\n var start = util.getWeekFirstDate(util.resetTime(this.parent.selectedDate), this.parent.activeViewOptions.firstDayOfWeek);\n for (var i = 0, length_2 = util.WEEK_LENGTH * this.parent.activeViewOptions.interval; i < length_2; i++) {\n if (this.isWorkDay(start, workDays)) {\n renderDates.push(start);\n }\n start = util.addDays(start, 1);\n }\n }\n else {\n var dayCount = this.parent.currentView === 'Agenda' ? this.parent.agendaDaysCount :\n this.parent.activeViewOptions.interval;\n var start = util.resetTime(this.parent.selectedDate);\n do {\n if (this.parent.activeViewOptions.showWeekend) {\n renderDates.push(start);\n }\n else {\n if (this.isWorkDay(start, workDays)) {\n renderDates.push(start);\n }\n }\n start = util.addDays(start, 1);\n } while (dayCount !== renderDates.length);\n }\n if (!workDays) {\n this.renderDates = renderDates;\n }\n if (this.parent.headerModule) {\n this.parent.headerModule.previousNextIconHandler();\n }\n return renderDates;\n };\n ViewBase.prototype.getNextPreviousDate = function (type) {\n if (this.parent.currentView === 'Day' || this.parent.currentView === 'TimelineDay') {\n if (this.parent.activeViewOptions.showWeekend) {\n var daysCount = this.parent.activeViewOptions.interval;\n return util.addDays(this.parent.selectedDate, type === 'next' ? daysCount : -daysCount);\n }\n else {\n var date = void 0;\n if (type === 'next') {\n date = util.addDays(this.renderDates.slice(-1)[0], 1);\n while (!this.isWorkDay(date)) {\n date = util.addDays(date, 1);\n }\n }\n else {\n date = util.addDays(this.renderDates[0], -1);\n var count = 0;\n do {\n if (this.isWorkDay(date)) {\n count += 1;\n }\n if (this.parent.activeViewOptions.interval !== count) {\n date = util.addDays(date, -1);\n }\n } while (this.parent.activeViewOptions.interval !== count);\n }\n return date;\n }\n }\n var weekLength = type === 'next' ? util.WEEK_LENGTH : -util.WEEK_LENGTH;\n return util.addDays(this.parent.selectedDate, weekLength * this.parent.activeViewOptions.interval);\n };\n ViewBase.prototype.getLabelText = function (view) {\n var viewStr = view.charAt(0).toLowerCase() + view.substring(1);\n return this.parent.localeObj.getConstant(viewStr) + ' of ' + util.capitalizeFirstWord(this.parent.globalize.formatDate(this.parent.selectedDate, { skeleton: 'long', calendar: this.parent.getCalendarMode() }), 'single');\n };\n ViewBase.prototype.getDateRangeText = function () {\n if (this.parent.isAdaptive) {\n var formatDate = (this.parent.activeViewOptions.dateFormat) ? this.parent.activeViewOptions.dateFormat : 'MMMM y';\n return util.capitalizeFirstWord(this.parent.globalize.formatDate(this.parent.selectedDate, { format: formatDate, calendar: this.parent.getCalendarMode() }), 'single');\n }\n return this.formatDateRange(this.renderDates[0], this.renderDates[this.renderDates.length - 1]);\n };\n ViewBase.prototype.formatDateRange = function (startDate, endDate) {\n var globalize = this.parent.globalize;\n var mode = this.parent.getCalendarMode();\n if (startDate === endDate) {\n endDate = null;\n }\n if (!isNullOrUndefined(this.parent.activeViewOptions.dateFormat)) {\n var text = '';\n if (!endDate) {\n text = globalize.formatDate(startDate, { format: this.parent.activeViewOptions.dateFormat, calendar: mode });\n return util.capitalizeFirstWord(text, 'multiple');\n }\n text = (globalize.formatDate(startDate, { format: this.parent.activeViewOptions.dateFormat, calendar: mode }) +\n ' - ' + globalize.formatDate(endDate, { format: this.parent.activeViewOptions.dateFormat, calendar: mode }));\n return util.capitalizeFirstWord(text, 'multiple');\n }\n var formattedStr;\n var longDateFormat;\n if (this.parent.locale === 'en' || this.parent.locale === 'en-US') {\n longDateFormat = getValue('dateFormats.long', getDefaultDateObject(mode));\n }\n else {\n longDateFormat = getValue('main.' + '' + this.parent.locale + '.dates.calendars.' + mode + '.dateFormats.long', cldrData);\n }\n if (!endDate) {\n return util.capitalizeFirstWord(globalize.formatDate(startDate, { format: longDateFormat, calendar: mode }), 'single');\n }\n var dateFormat = longDateFormat.trim().toLocaleLowerCase();\n if (dateFormat.substr(0, 1) === 'd') {\n if (startDate.getFullYear() === endDate.getFullYear()) {\n if (startDate.getMonth() === endDate.getMonth()) {\n formattedStr = globalize.formatDate(startDate, { format: 'dd', calendar: mode }) + ' - ' +\n globalize.formatDate(endDate, { format: 'dd MMMM yyyy', calendar: mode });\n }\n else {\n formattedStr = globalize.formatDate(startDate, { format: 'dd MMM', calendar: mode }) + ' - ' +\n globalize.formatDate(endDate, { format: 'dd MMM yyyy', calendar: mode });\n }\n }\n else {\n formattedStr = globalize.formatDate(startDate, { format: 'dd MMM yyyy', calendar: mode }) + ' - ' +\n globalize.formatDate(endDate, { format: 'dd MMM yyyy', calendar: mode });\n }\n }\n else if (dateFormat.substr(0, 1) === 'm') {\n if (startDate.getFullYear() === endDate.getFullYear()) {\n if (startDate.getMonth() === endDate.getMonth()) {\n formattedStr = globalize.formatDate(startDate, { format: 'MMMM dd', calendar: mode }) + ' - ' +\n globalize.formatDate(endDate, { format: 'dd, yyyy', calendar: mode });\n }\n else {\n formattedStr = globalize.formatDate(startDate, { format: 'MMM dd', calendar: mode }) + ' - ' +\n globalize.formatDate(endDate, { format: 'MMM dd, yyyy', calendar: mode });\n }\n }\n else {\n formattedStr = globalize.\n formatDate(startDate, { format: 'MMM dd, yyyy', calendar: mode }) + ' - ' +\n globalize.formatDate(endDate, { format: 'MMM dd, yyyy', calendar: mode });\n }\n }\n else {\n formattedStr = globalize.formatDate(startDate, { format: longDateFormat, calendar: mode }) + ' - ' +\n globalize.formatDate(endDate, { format: longDateFormat, calendar: mode });\n }\n return util.capitalizeFirstWord(formattedStr, 'multiple');\n };\n ViewBase.prototype.getMobileDateElement = function (date, className) {\n var wrap = createElement('div', {\n className: className,\n innerHTML: '' + this.parent.globalize.formatDate(date, { format: 'd', calendar: this.parent.getCalendarMode() }) + '
' + '' +\n util.capitalizeFirstWord(this.parent.globalize.formatDate(date, { format: 'E', calendar: this.parent.getCalendarMode() }), 'single') + '
'\n });\n return wrap;\n };\n ViewBase.prototype.setResourceHeaderContent = function (tdElement, tdData, className) {\n if (className === void 0) { className = cls.TEXT_ELLIPSIS; }\n if (this.parent.activeViewOptions.resourceHeaderTemplate) {\n var data = { resource: tdData.resource, resourceData: tdData.resourceData };\n var scheduleId = this.parent.element.id + '_';\n var viewName = this.parent.activeViewOptions.resourceHeaderTemplateName;\n var templateId = scheduleId + viewName + 'resourceHeaderTemplate';\n var quickTemplate = [].slice.call(this.parent.getResourceHeaderTemplate()(data, this.parent, 'resourceHeaderTemplate', templateId, false));\n append(quickTemplate, tdElement);\n }\n else {\n tdElement.appendChild(createElement('div', {\n className: className, innerHTML: tdData.resourceData[tdData.resource.textField]\n }));\n }\n };\n ViewBase.prototype.renderResourceMobileLayout = function () {\n if (this.parent.resourceBase.lastResourceLevel && this.parent.resourceBase.lastResourceLevel.length <= 0) {\n return;\n }\n this.parent.resourceBase.renderResourceHeader();\n this.parent.resourceBase.renderResourceTree();\n };\n ViewBase.prototype.addAutoHeightClass = function (element) {\n if (!this.parent.uiStateValues.isGroupAdaptive && this.parent.rowAutoHeight && this.isTimelineView()\n && this.parent.activeViewOptions.group.resources.length > 0) {\n addClass([element], cls.AUTO_HEIGHT);\n }\n };\n ViewBase.prototype.getColElements = function () {\n return [].slice.call(this.element.querySelectorAll('.' + cls.CONTENT_WRAP_CLASS + ' col, .' + cls.DATE_HEADER_WRAP_CLASS + ' col'));\n };\n ViewBase.prototype.setColWidth = function (content) {\n if (this.isTimelineView()) {\n var colElements = this.getColElements();\n var contentBody = this.element.querySelector('.' + cls.CONTENT_TABLE_CLASS + ' tbody');\n var colWidth_1 = Math.ceil(contentBody.offsetWidth / (colElements.length / 2));\n colElements.forEach(function (col) { return setStyleAttribute(col, { 'width': formatUnit(colWidth_1) }); });\n if (content.offsetHeight !== content.clientHeight) {\n var resourceColumn = this.parent.element.querySelector('.' + cls.RESOURCE_COLUMN_WRAP_CLASS);\n if (!isNullOrUndefined(resourceColumn)) {\n setStyleAttribute(resourceColumn, { 'height': formatUnit(content.clientHeight) });\n }\n }\n }\n };\n ViewBase.prototype.resetColWidth = function () {\n var colElements = this.getColElements();\n for (var _i = 0, colElements_1 = colElements; _i < colElements_1.length; _i++) {\n var col = colElements_1[_i];\n col.style.width = '';\n }\n };\n ViewBase.prototype.getContentAreaElement = function () {\n return this.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);\n };\n ViewBase.prototype.wireExpandCollapseIconEvents = function () {\n if (this.parent.resourceBase && this.parent.resourceBase.resourceCollection.length > 1) {\n var treeIcons = [].slice.call(this.element.querySelectorAll('.' + cls.RESOURCE_TREE_ICON_CLASS));\n for (var _i = 0, treeIcons_1 = treeIcons; _i < treeIcons_1.length; _i++) {\n var icon = treeIcons_1[_i];\n EventHandler.clearEvents(icon);\n EventHandler.add(icon, 'click', this.parent.resourceBase.onTreeIconClick, this.parent.resourceBase);\n }\n }\n };\n ViewBase.prototype.scrollToDate = function (scrollDate) {\n if (['Month', 'TimelineMonth'].indexOf(this.parent.currentView) === -1 || isNullOrUndefined(scrollDate)) {\n return;\n }\n var scrollWrap = this.getContentAreaElement();\n var tdDate = new Date(util.resetTime(new Date(+scrollDate)).getTime()).getTime();\n var dateElement = scrollWrap.querySelector(\".\" + cls.WORK_CELLS_CLASS + \"[data-date=\\\"\" + tdDate + \"\\\"]\");\n if (this.parent.currentView === 'Month' && dateElement) {\n scrollWrap.scrollTop = dateElement.offsetTop;\n }\n if (this.parent.currentView === 'TimelineMonth' && dateElement) {\n if (!this.parent.enableRtl) {\n scrollWrap.scrollLeft = dateElement.offsetLeft;\n }\n else {\n scrollWrap.scrollLeft = -(this.parent.getContentTable().offsetWidth - dateElement.offsetLeft - dateElement.offsetWidth);\n }\n }\n };\n ViewBase.prototype.setPersistence = function () {\n if (this.parent.enablePersistence) {\n var contentWrap = this.element.querySelector('.e-content-wrap');\n if (!isNullOrUndefined(contentWrap)) {\n this.parent.scrollLeft = contentWrap.scrollLeft;\n this.parent.scrollTop = contentWrap.scrollTop;\n }\n }\n };\n ViewBase.prototype.retainScrollPosition = function () {\n if (this.parent.enablePersistence) {\n var conWrap = this.parent.element.querySelector('.e-content-wrap');\n if (!isNullOrUndefined(conWrap) && !isNullOrUndefined(this.parent.scrollLeft) && !isNullOrUndefined(this.parent.scrollTop)) {\n conWrap.scrollTop = this.parent.scrollTop;\n conWrap.scrollLeft = this.parent.scrollLeft;\n }\n }\n };\n return ViewBase;\n}());\nexport { ViewBase };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { EventHandler, formatUnit, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { createElement, remove, addClass, append, prepend } from '@syncfusion/ej2-base';\nimport { ViewBase } from './view-base';\nimport { MonthEvent } from '../event-renderer/month';\nimport * as util from '../base/util';\nimport * as event from '../base/constant';\nimport * as cls from '../base/css-constant';\n/**\n * month view\n */\nvar Month = /** @class */ (function (_super) {\n __extends(Month, _super);\n function Month(parent) {\n var _this = _super.call(this, parent) || this;\n _this.dayNameFormat = 'wide';\n _this.viewClass = 'e-month-view';\n _this.isInverseTableSelect = false;\n _this.monthDates = {};\n return _this;\n }\n Month.prototype.addEventListener = function () {\n this.parent.on(event.scrollUiUpdate, this.onScrollUIUpdate, this);\n this.parent.on(event.dataReady, this.onDataReady, this);\n this.parent.on(event.cellClick, this.onCellClick, this);\n };\n Month.prototype.removeEventListener = function () {\n this.parent.off(event.scrollUiUpdate, this.onScrollUIUpdate);\n this.parent.off(event.dataReady, this.onDataReady);\n this.parent.off(event.cellClick, this.onCellClick);\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n Month.prototype.onDataReady = function (args) {\n var monthEvent = new MonthEvent(this.parent);\n monthEvent.renderAppointments();\n this.parent.notify(event.eventsLoaded, {});\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n Month.prototype.onCellClick = function (event) { };\n Month.prototype.onContentScroll = function (e) {\n this.parent.removeNewEventElement();\n this.parent.notify(event.virtualScroll, e);\n this.scrollTopPanel(e.target);\n this.scrollLeftPanel(e.target);\n this.setPersistence();\n };\n Month.prototype.scrollLeftPanel = function (target) {\n var leftPanel = this.getLeftPanelElement();\n if (leftPanel) {\n leftPanel.scrollTop = target.scrollTop;\n }\n };\n Month.prototype.getLeftPanelElement = function () {\n return this.element.querySelector('.' + cls.WEEK_NUMBER_WRAPPER_CLASS);\n };\n Month.prototype.onScrollUIUpdate = function (args) {\n var headerHeight = this.getHeaderBarHeight();\n var header = this.getDatesHeaderElement();\n var content = this.getContentAreaElement();\n var height = this.parent.element.offsetHeight - headerHeight - header.offsetHeight;\n var leftPanel = this.getLeftPanelElement();\n if (this.parent.height !== 'auto') {\n this.setContentHeight(content, leftPanel, height);\n }\n var scrollBarWidth = util.getScrollBarWidth();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n header.firstElementChild.style[args.cssProperties.rtlBorder] = '';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n header.style[args.cssProperties.rtlPadding] = '';\n if (content.offsetWidth - content.clientWidth > 0) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n header.firstElementChild.style[args.cssProperties.border] = scrollBarWidth > 0 ? '1px' : '0px';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n header.style[args.cssProperties.padding] = scrollBarWidth > 0 ? scrollBarWidth - 1 + 'px' : '0px';\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n header.firstElementChild.style[args.cssProperties.border] = '';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n header.style[args.cssProperties.padding] = '';\n }\n this.setColWidth(content);\n if (args.scrollPosition) {\n if (leftPanel) {\n leftPanel.scrollTop = args.scrollPosition.top;\n }\n content.scrollTop = args.scrollPosition.top;\n content.scrollLeft = args.scrollPosition.left;\n }\n else {\n var headerCell = this.element.querySelector('.' + cls.HEADER_CELLS_CLASS + '[data-date=\"'\n + this.parent.selectedDate.getTime().toString() + '\"]');\n if (!isNullOrUndefined(headerCell)) {\n content.scrollLeft = !this.parent.enableRtl ?\n headerCell.offsetLeft : -(this.parent.getContentTable().offsetWidth - headerCell.offsetLeft - headerCell.offsetWidth);\n }\n else {\n content.scrollLeft = 0;\n }\n }\n this.retainScrollPosition();\n };\n Month.prototype.setContentHeight = function (content, leftPanelElement, height) {\n content.style.height = 'auto';\n if (this.parent.currentView === 'Month') {\n content.style.height = formatUnit(height);\n }\n if (leftPanelElement) {\n if (this.parent.currentView === 'MonthAgenda') {\n height = this.element.querySelector('.' + cls.CONTENT_TABLE_CLASS).offsetHeight;\n }\n leftPanelElement.style.height = 'auto';\n leftPanelElement.style.height = formatUnit(height - this.getScrollXIndent(content));\n }\n };\n Month.prototype.generateColumnLevels = function () {\n var colLevels = [];\n var level = this.getDateSlots(this.renderDates, this.parent.activeViewOptions.workDays);\n if (this.parent.activeViewOptions.group.resources.length > 0) {\n colLevels = this.parent.resourceBase.generateResourceLevels(level);\n if (this.parent.currentView === 'MonthAgenda') {\n colLevels = [level];\n }\n if (this.parent.uiStateValues.isGroupAdaptive && this.parent.resourceBase.lastResourceLevel.length > 0) {\n var resourceLevel = this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex];\n colLevels = [this.getDateSlots(resourceLevel.renderDates, resourceLevel.workDays)];\n }\n }\n else {\n colLevels.push(level);\n }\n this.colLevels = colLevels;\n return colLevels;\n };\n Month.prototype.getDateSlots = function (renderDates, workDays) {\n var count = this.parent.activeViewOptions.showWeekend ? util.WEEK_LENGTH : workDays.length;\n var dateSlots = [];\n for (var col = 0; col < count; col++) {\n var classList = [cls.HEADER_CELLS_CLASS];\n var currentDateIndex = renderDates.slice(0, count).map(function (date) { return date.getDay(); });\n if (this.isCurrentMonth(this.parent.selectedDate) && currentDateIndex.indexOf(this.parent.getCurrentTime().getDay()) === col) {\n classList.push(cls.CURRENT_DAY_CLASS);\n }\n dateSlots.push({ date: renderDates[col], type: 'monthDay', className: classList, colSpan: 1, workDays: workDays });\n }\n return dateSlots;\n };\n Month.prototype.getDayNameFormat = function () {\n if (this.parent.isAdaptive || this.parent.activeViewOptions.group.resources.length > 0) {\n return 'abbreviated';\n }\n return 'wide';\n };\n Month.prototype.renderLayout = function (type) {\n this.dayNameFormat = this.getDayNameFormat();\n this.setPanel(createElement('div', { className: cls.TABLE_WRAP_CLASS }));\n var clsList = [this.viewClass];\n clsList.push(type);\n if (this.parent.activeViewOptions.group.byDate) {\n clsList.push('e-by-date');\n }\n if (this.parent.activeViewOptions.allowVirtualScrolling) {\n clsList.push(cls.VIRTUAL_SCROLL_CLASS);\n }\n if (this.parent.eventSettings.ignoreWhitespace) {\n clsList.push(cls.IGNORE_WHITESPACE);\n }\n addClass([this.element], clsList);\n this.renderPanel(type);\n this.element.appendChild(this.createTableLayout(cls.OUTER_TABLE_CLASS));\n this.element.querySelector('table').setAttribute('role', 'presentation');\n this.colLevels = this.generateColumnLevels();\n this.renderHeader();\n this.renderContent();\n var target = (this.parent.currentView === 'MonthAgenda') ? this.parent.activeView.getPanel() : this.parent.element;\n if (this.parent.uiStateValues.isGroupAdaptive && !target.querySelector('.' + cls.RESOURCE_TOOLBAR_CONTAINER)) {\n this.renderResourceMobileLayout();\n }\n this.parent.notify(event.contentReady, {});\n };\n Month.prototype.wireCellEvents = function (element) {\n EventHandler.add(element, 'mousedown', this.parent.workCellAction.cellMouseDown, this.parent.workCellAction);\n EventHandler.add(element, 'click', this.parent.workCellAction.cellClick, this.parent.workCellAction);\n if (!this.parent.isAdaptive) {\n EventHandler.add(element, 'dblclick', this.parent.workCellAction.cellDblClick, this.parent.workCellAction);\n }\n };\n Month.prototype.renderHeader = function () {\n var tr = createElement('tr');\n this.renderLeftIndent(tr);\n var dateTd = createElement('td');\n dateTd.appendChild(this.renderDatesHeader());\n tr.appendChild(dateTd);\n prepend([tr], this.element.querySelector('tbody'));\n };\n Month.prototype.renderLeftIndent = function (tr) {\n if (this.parent.activeViewOptions.showWeekNumber) {\n tr.appendChild(createElement('td', { className: 'e-left-indent' }));\n }\n };\n Month.prototype.renderContent = function () {\n var tr = createElement('tr');\n if (this.parent.activeViewOptions.showWeekNumber) {\n tr.appendChild(this.renderWeekNumberContent());\n }\n var workTd = createElement('td');\n var wrap = createElement('div', { className: cls.CONTENT_WRAP_CLASS });\n var contentArea = this.renderContentArea();\n if (this.parent.currentView === 'Month') {\n wrap.appendChild(contentArea);\n }\n else {\n var monthAgendaWrapper = createElement('div', { className: cls.TABLE_CONTAINER_CLASS });\n monthAgendaWrapper.appendChild(contentArea);\n wrap.appendChild(monthAgendaWrapper);\n }\n EventHandler.add(wrap, 'scroll', this.onContentScroll, this);\n workTd.appendChild(wrap);\n tr.appendChild(workTd);\n this.element.querySelector('tbody').appendChild(tr);\n this.renderAppointmentContainer();\n };\n Month.prototype.renderWeekNumberContent = function () {\n var dateCol = this.renderDates.map(function (date) { return new Date(+date); });\n var td = createElement('td');\n var contentWrapper = createElement('div', { className: cls.WEEK_NUMBER_WRAPPER_CLASS });\n td.appendChild(contentWrapper);\n var contentWrapTable = this.createTableLayout();\n contentWrapper.appendChild(contentWrapTable);\n var noOfDays = this.parent.activeViewOptions.showWeekend ? util.WEEK_LENGTH :\n this.parent.activeViewOptions.workDays.length;\n for (var i = 0, length_1 = (this.renderDates.length / noOfDays); i < length_1; i++) {\n var dates = dateCol.splice(0, noOfDays);\n var weekNumber = this.parent.getWeekNumberContent(dates).toString();\n contentWrapTable.querySelector('tbody').appendChild(this.createWeekNumberElement(weekNumber));\n }\n return td;\n };\n Month.prototype.renderAppointmentContainer = function () {\n //Here needs to render mobile view appointment details on selected date\n };\n Month.prototype.renderDatesHeader = function () {\n var container = createElement('div', { className: cls.DATE_HEADER_CONTAINER_CLASS });\n var wrap = createElement('div', { className: cls.DATE_HEADER_WRAP_CLASS });\n container.appendChild(wrap);\n var table = this.createTableLayout();\n this.createColGroup(table, this.colLevels[this.colLevels.length - 1]);\n var trEle = createElement('tr');\n for (var i = 0; i < this.colLevels.length; i++) {\n var level = this.colLevels[i];\n var ntr = trEle.cloneNode();\n for (var j = 0; j < level.length; j++) {\n var td = level[j];\n ntr.appendChild(this.createHeaderCell(td));\n }\n table.querySelector('tbody').appendChild(ntr);\n }\n wrap.appendChild(table);\n return container;\n };\n Month.prototype.createHeaderCell = function (td) {\n var tdEle = createElement('td');\n this.addAttributes(td, tdEle);\n if (td.type === 'monthDay') {\n var ele = createElement('span', { innerHTML: util.capitalizeFirstWord(this.parent.getDayNames(this.dayNameFormat)[td.date.getDay()], 'single') });\n tdEle.appendChild(ele);\n }\n if (td.type === 'resourceHeader') {\n this.setResourceHeaderContent(tdEle, td);\n }\n if (td.type === 'dateHeader') {\n addClass([tdEle], cls.DATE_HEADER_CLASS);\n tdEle.setAttribute('data-date', td.date.getTime().toString());\n if (this.parent.activeViewOptions.dateHeaderTemplate) {\n var cellArgs = { date: td.date, type: td.type };\n var elementId = this.parent.element.id + '_';\n var viewName = this.parent.activeViewOptions.dateHeaderTemplateName;\n var templateId = elementId + viewName + 'dateHeaderTemplate';\n var dateTemplate = [].slice.call(this.parent.getDateHeaderTemplate()(cellArgs, this.parent, 'dateHeaderTemplate', templateId, false));\n if (dateTemplate && dateTemplate.length) {\n append(dateTemplate, tdEle);\n }\n }\n else {\n var ele = createElement('span', { className: cls.NAVIGATE_CLASS });\n var skeleton = 'full';\n var title = this.parent.globalize.formatDate(td.date, { skeleton: skeleton, calendar: this.parent.getCalendarMode() });\n ele.setAttribute('title', util.capitalizeFirstWord(title, 'multiple'));\n var innerText = (this.parent.calendarUtil.isMonthStart(td.date) && !this.isCurrentDate(td.date) && !this.parent.isAdaptive) ?\n this.parent.globalize.formatDate(td.date, { format: 'MMM d', calendar: this.parent.getCalendarMode() }) :\n this.parent.globalize.formatDate(td.date, { skeleton: 'd', calendar: this.parent.getCalendarMode() });\n ele.innerHTML = util.capitalizeFirstWord(innerText, 'single');\n tdEle.appendChild(ele);\n }\n this.wireCellEvents(tdEle);\n }\n var args = { elementType: td.type, element: tdEle, date: td.date, groupIndex: td.groupIndex };\n this.parent.trigger(event.renderCell, args);\n return tdEle;\n };\n Month.prototype.getContentSlots = function () {\n if (!(this.colLevels[this.colLevels.length - 1] && this.colLevels[this.colLevels.length - 1][0])) {\n return [];\n }\n var slotDatas = [];\n var prepareSlots = function (rowIndex, renderDate, resData, classList) {\n var data = {\n date: new Date(+renderDate), groupIndex: resData.groupIndex, workDays: resData.workDays,\n type: 'monthCells', className: classList || [cls.WORK_CELLS_CLASS]\n };\n if (!slotDatas[rowIndex]) {\n slotDatas[rowIndex] = [];\n }\n slotDatas[rowIndex].push(data);\n };\n var includeResource = this.parent.currentView !== 'MonthAgenda' &&\n this.parent.activeViewOptions.group.resources.length > 0;\n if (includeResource && !this.parent.uiStateValues.isGroupAdaptive && !this.parent.activeViewOptions.group.byDate) {\n for (var _i = 0, _a = this.colLevels[this.colLevels.length - 2]; _i < _a.length; _i++) {\n var res = _a[_i];\n var dates = res.renderDates.map(function (date) { return new Date(+date); });\n var count = this.parent.activeViewOptions.showWeekend ? util.WEEK_LENGTH : res.workDays.length;\n for (var i = 0; i < (res.renderDates.length / count); i++) {\n var colDates = dates.splice(0, count);\n for (var _b = 0, colDates_1 = colDates; _b < colDates_1.length; _b++) {\n var colDate = colDates_1[_b];\n prepareSlots(i, colDate, res);\n }\n }\n }\n }\n else {\n var dates = this.renderDates.map(function (date) { return new Date(+date); });\n var count = this.parent.activeViewOptions.showWeekend ? util.WEEK_LENGTH :\n this.parent.activeViewOptions.workDays.length;\n for (var i = 0; i < (this.renderDates.length / count); i++) {\n var colDates = dates.splice(0, count);\n for (var _c = 0, colDates_2 = colDates; _c < colDates_2.length; _c++) {\n var colDate = colDates_2[_c];\n if (includeResource) {\n var lastRow = this.colLevels[(this.colLevels.length - 1)];\n var resourcesTd = lastRow.slice(0, lastRow.length / count);\n for (var resIndex = 0; resIndex < resourcesTd.length; resIndex++) {\n var clsList = void 0;\n if (resIndex !== 0) {\n clsList = [cls.WORK_CELLS_CLASS, cls.DISABLE_DATE];\n }\n prepareSlots(i, colDate, resourcesTd[resIndex], clsList);\n }\n }\n else {\n prepareSlots(i, colDate, this.colLevels[this.colLevels.length - 1][0]);\n }\n }\n }\n }\n return slotDatas;\n };\n Month.prototype.updateClassList = function (data) {\n if (this.isOtherMonth(data.date)) {\n data.className.push(cls.OTHERMONTH_CLASS);\n }\n if (!this.parent.isMinMaxDate(data.date)) {\n data.className.push(cls.DISABLE_DATES);\n }\n if (this.parent.currentView === 'MonthAgenda' && this.parent.isSelectedDate(data.date)) {\n data.className.push(cls.SELECTED_CELL_CLASS);\n }\n };\n Month.prototype.isOtherMonth = function (date) {\n return date.getTime() < this.monthDates.start.getTime() || date.getTime() > this.monthDates.end.getTime();\n };\n Month.prototype.renderContentArea = function () {\n var tbl = this.createTableLayout(cls.CONTENT_TABLE_CLASS);\n this.addAutoHeightClass(tbl);\n if (this.parent.currentView === 'TimelineMonth') {\n this.createColGroup(tbl, this.colLevels[this.colLevels.length - 1]);\n }\n var monthDate = new Date(this.parent.selectedDate.getTime());\n this.monthDates = {\n start: this.parent.calendarUtil.firstDateOfMonth(monthDate),\n end: this.parent.calendarUtil.lastDateOfMonth(util.addMonths(monthDate, this.parent.activeViewOptions.interval - 1))\n };\n var tBody = tbl.querySelector('tbody');\n append(this.getContentRows(), tBody);\n this.wireCellEvents(tBody);\n return tbl;\n };\n Month.prototype.getContentRows = function () {\n var trows = [];\n var tr = createElement('tr', { attrs: { role: 'row' } });\n var td = createElement('td', { attrs: { role: 'gridcell', 'aria-selected': 'false' } });\n var slotDatas = this.getContentSlots();\n for (var row = 0; row < slotDatas.length; row++) {\n var ntr = tr.cloneNode();\n for (var col = 0; col < slotDatas[row].length; col++) {\n var ntd = this.createContentTd(slotDatas[row][col], td);\n ntr.appendChild(ntd);\n }\n trows.push(ntr);\n }\n return trows;\n };\n Month.prototype.createContentTd = function (data, td) {\n var ntd = td.cloneNode();\n if (data.colSpan) {\n ntd.setAttribute('colspan', data.colSpan.toString());\n }\n this.updateClassList(data);\n var type = data.type;\n if (data.className.indexOf(cls.RESOURCE_PARENT_CLASS) !== -1) {\n data.className.push(cls.RESOURCE_GROUP_CELLS_CLASS);\n type = 'resourceGroupCells';\n }\n if (this.parent.workHours.highlight && this.isWorkDay(data.date, data.workDays)) {\n data.className.push(cls.WORKDAY_CLASS);\n }\n if (this.isCurrentDate(data.date)) {\n data.className.push(cls.CURRENTDATE_CLASS);\n }\n addClass([ntd], data.className);\n ntd.setAttribute('data-date', data.date.getTime().toString());\n if (!isNullOrUndefined(data.groupIndex) || this.parent.uiStateValues.isGroupAdaptive) {\n var groupIndex = this.parent.uiStateValues.isGroupAdaptive ? this.parent.uiStateValues.groupIndex :\n data.groupIndex;\n ntd.setAttribute('data-group-index', '' + groupIndex);\n }\n this.renderDateHeaderElement(data, ntd);\n if (this.parent.activeViewOptions.cellTemplate) {\n var args_1 = { date: data.date, type: type, groupIndex: data.groupIndex };\n var scheduleId = this.parent.element.id + '_';\n var viewName = this.parent.activeViewOptions.cellTemplateName;\n var templateId = scheduleId + viewName + 'cellTemplate';\n var cellTemplate = [].slice.call(this.parent.getCellTemplate()(args_1, this.parent, 'cellTemplate', templateId, false));\n append(cellTemplate, ntd);\n }\n var args = { elementType: type, element: ntd, date: data.date, groupIndex: data.groupIndex };\n this.parent.trigger(event.renderCell, args);\n return ntd;\n };\n Month.prototype.renderDateHeaderElement = function (data, ntd) {\n if (this.parent.currentView === 'TimelineMonth') {\n return;\n }\n var dateHeader = createElement('div', { className: cls.DATE_HEADER_CLASS });\n if (this.parent.activeViewOptions.cellHeaderTemplate) {\n var args = { date: data.date, type: data.type, groupIndex: data.groupIndex };\n var scheduleId = this.parent.element.id + '_';\n var viewName = this.parent.activeViewOptions.cellHeaderTemplateName;\n var templateId = scheduleId + viewName + 'cellHeaderTemplate';\n var cellheaderTemplate = [].slice.call(this.parent.getCellHeaderTemplate()(args, this.parent, 'cellHeaderTemplate', templateId, false));\n append(cellheaderTemplate, dateHeader);\n }\n else {\n var innerText = (this.parent.calendarUtil.isMonthStart(data.date) && !this.isCurrentDate(data.date) && !this.parent.isAdaptive) ?\n this.parent.globalize.formatDate(data.date, { format: 'MMM d', calendar: this.parent.getCalendarMode() }) :\n this.parent.globalize.formatDate(data.date, { skeleton: 'd', calendar: this.parent.getCalendarMode() });\n dateHeader.innerHTML = util.capitalizeFirstWord(innerText, 'single');\n }\n ntd.appendChild(dateHeader);\n if (this.getModuleName() === 'month') {\n addClass([dateHeader], cls.NAVIGATE_CLASS);\n var skeleton = 'full';\n var annocementText = this.parent.globalize.formatDate(data.date, { skeleton: skeleton, calendar: this.parent.getCalendarMode() });\n dateHeader.setAttribute('aria-label', annocementText);\n }\n };\n Month.prototype.getMonthStart = function (currentDate) {\n var monthStart = util.getWeekFirstDate(this.parent.calendarUtil.firstDateOfMonth(currentDate), this.parent.activeViewOptions.firstDayOfWeek);\n var start = new Date(monthStart.getFullYear(), monthStart.getMonth(), monthStart.getDate());\n return start;\n };\n Month.prototype.getMonthEnd = function (currentDate) {\n var endDate = util.addMonths(currentDate, this.parent.activeViewOptions.interval - 1);\n var lastWeekOfMonth = util.getWeekFirstDate(this.parent.calendarUtil.lastDateOfMonth(endDate), this.parent.activeViewOptions.firstDayOfWeek);\n var monthEnd = util.addDays(lastWeekOfMonth, util.WEEK_LENGTH - 1);\n return monthEnd;\n };\n Month.prototype.getRenderDates = function (workDays) {\n var renderDates = [];\n var currentDate = util.resetTime(this.parent.selectedDate);\n var start = this.getMonthStart(currentDate);\n var monthEnd = this.getMonthEnd(currentDate);\n do {\n if (this.parent.activeViewOptions.showWeekend) {\n renderDates.push(start);\n }\n else {\n if (this.isWorkDay(start, workDays)) {\n renderDates.push(start);\n }\n }\n start = util.addDays(start, 1);\n if (start.getHours() > 0) {\n start = util.resetTime(start);\n }\n } while (start.getTime() <= monthEnd.getTime());\n if (!workDays) {\n this.renderDates = renderDates;\n }\n if (this.parent.headerModule) {\n this.parent.headerModule.previousNextIconHandler();\n }\n return renderDates;\n };\n Month.prototype.getNextPreviousDate = function (type) {\n if (type === 'next') {\n return util.addMonths(this.parent.selectedDate, this.parent.activeViewOptions.interval);\n }\n else {\n return util.addMonths(this.parent.selectedDate, -(this.parent.activeViewOptions.interval));\n }\n };\n Month.prototype.getEndDateFromStartDate = function (start) {\n return util.addDays(new Date(start.getTime()), 1);\n };\n Month.prototype.getDateRangeText = function () {\n if (this.parent.isAdaptive || isNullOrUndefined(this.parent.activeViewOptions.dateFormat)) {\n if (this.parent.activeViewOptions.interval > 1) {\n var endDate = util.addMonths(util.lastDateOfMonth(this.parent.selectedDate), this.parent.activeViewOptions.interval - 1);\n if (this.parent.selectedDate.getFullYear() === endDate.getFullYear()) {\n var monthNames = (this.parent.globalize.formatDate(this.parent.selectedDate, { format: 'MMMM', calendar: this.parent.getCalendarMode() })) + ' - ' +\n (this.parent.globalize.formatDate(endDate, { format: 'MMMM ', calendar: this.parent.getCalendarMode() })) +\n endDate.getFullYear();\n return util.capitalizeFirstWord(monthNames, 'single');\n }\n var text = (this.parent.globalize.formatDate(this.parent.selectedDate, { format: 'MMMM', calendar: this.parent.getCalendarMode() })) + ' ' +\n this.parent.selectedDate.getFullYear() + ' - ' +\n this.parent.globalize.formatDate(endDate, { format: 'MMMM ', calendar: this.parent.getCalendarMode() }) +\n endDate.getFullYear();\n return util.capitalizeFirstWord(text, 'single');\n }\n var format = (this.parent.activeViewOptions.dateFormat) ? this.parent.activeViewOptions.dateFormat : 'MMMM y';\n return util.capitalizeFirstWord(this.parent.globalize.formatDate(this.parent.selectedDate, { format: format, calendar: this.parent.getCalendarMode() }), 'single');\n }\n return this.formatDateRange(this.parent.selectedDate);\n };\n Month.prototype.getLabelText = function (view) {\n return this.parent.localeObj.getConstant(view) + ' of ' + util.capitalizeFirstWord(this.parent.globalize.formatDate(this.parent.selectedDate, { format: 'MMMM y', calendar: this.parent.getCalendarMode() }), 'single');\n };\n Month.prototype.createWeekNumberElement = function (text) {\n var tr = createElement('tr');\n var td = createElement('td', {\n className: cls.WEEK_NUMBER_CLASS,\n attrs: { 'title': (text ? this.parent.localeObj.getConstant('week') + ' ' + text : '') },\n innerHTML: (text || '')\n });\n tr.appendChild(td);\n var args = { elementType: 'weekNumberCell', element: td };\n this.parent.trigger(event.renderCell, args);\n return tr;\n };\n Month.prototype.unwireEvents = function () {\n // No scroller events for month view\n };\n Month.prototype.getModuleName = function () {\n return 'month';\n };\n Month.prototype.destroy = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n if (this.element) {\n this.unwireEvents();\n if (this.parent.resourceBase) {\n this.parent.resourceBase.destroy();\n }\n remove(this.element);\n this.element = null;\n if (this.parent.scheduleTouchModule) {\n this.parent.scheduleTouchModule.resetValues();\n }\n }\n };\n return Month;\n}(ViewBase));\nexport { Month };\n"],"sourceRoot":""}