Blazor') === 0 ? this.isStringTemplate : true;\n\n for (var _i = 0, _a = templateFn({}, null, null, templateProps, isString); _i < _a.length; _i++) {\n var item = _a[_i];\n fromElements.push(item);\n }\n\n append([].slice.call(fromElements), toElement);\n\n if (blazorContain.indexOf('ejsInterop') !== -1 && !this.isStringTemplate && templateValue.indexOf('
Blazor') === 0) {\n this.blazorTemplate(templateProps);\n }\n }\n };\n /**\n * @hidden\n */\n\n\n Dialog.prototype.sanitizeHelper = function (value) {\n if (this.enableHtmlSanitizer) {\n var item = SanitizeHtmlHelper.beforeSanitize();\n var beforeEvent = {\n cancel: false,\n helper: null\n };\n extend(item, item, beforeEvent);\n this.trigger('beforeSanitizeHtml', item);\n\n if (item.cancel && !isNullOrUndefined(item.helper)) {\n value = item.helper(value);\n } else if (!item.cancel) {\n value = SanitizeHtmlHelper.serializeValue(item, value);\n }\n }\n\n return value;\n };\n\n Dialog.prototype.blazorTemplate = function (templateProps) {\n if (templateProps === this.element.id + 'header') {\n updateBlazorTemplate(templateProps, 'Header', this);\n } else if (templateProps === this.element.id + 'footerTemplate') {\n updateBlazorTemplate(templateProps, 'FooterTemplate', this);\n } else {\n updateBlazorTemplate(templateProps, 'Content', this);\n }\n };\n\n Dialog.prototype.setMaxHeight = function () {\n if (!this.allowMaxHeight) {\n return;\n }\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 ? this.targetEle.offsetHeight - 20 + 'px' : window.innerHeight - 20 + 'px';\n this.element.style.display = display;\n\n if (Browser.isIE && this.height === 'auto' && !isNullOrUndefined(this.contentEle) && this.element.offsetHeight < this.contentEle.offsetHeight) {\n this.element.style.height = '100%';\n }\n };\n\n Dialog.prototype.setEnableRTL = function () {\n if (!this.isBlazorServerRender()) {\n this.enableRtl ? addClass([this.element], RTL) : removeClass([this.element], RTL);\n }\n\n if (!isNullOrUndefined(this.element.querySelector('.e-resize-handle'))) {\n removeResize();\n this.setResize();\n }\n };\n\n Dialog.prototype.setTargetContent = function () {\n var _this = this;\n\n if (isNullOrUndefined(this.content) || this.content === '') {\n var isContent = this.element.innerHTML.replace(/\\s|<(\\/?|\\!?)(!--!--)>/g, '') !== '';\n\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\n Dialog.prototype.setHeader = function () {\n if (this.headerEle) {\n this.headerEle.innerHTML = '';\n } else {\n this.headerEle = this.createElement('div', {\n id: this.element.id + '_title',\n className: DLG_HEADER\n });\n }\n\n this.createHeaderContent();\n this.headerContent.appendChild(this.headerEle);\n this.setTemplate(this.header, this.headerEle);\n attributes(this.element, {\n 'aria-labelledby': this.element.id + '_title'\n });\n this.element.insertBefore(this.headerContent, this.element.children[0]);\n };\n\n Dialog.prototype.setFooterTemplate = function () {\n if (this.ftrTemplateContent) {\n this.ftrTemplateContent.innerHTML = '';\n } else {\n this.ftrTemplateContent = this.createElement('div', {\n className: DLG_FOOTER_CONTENT\n });\n }\n\n if (this.footerTemplate !== '' && !isNullOrUndefined(this.footerTemplate)) {\n this.setTemplate(this.footerTemplate, this.ftrTemplateContent);\n } else {\n this.ftrTemplateContent.innerHTML = this.buttonContent.join('');\n }\n\n this.element.appendChild(this.ftrTemplateContent);\n };\n\n Dialog.prototype.createHeaderContent = function () {\n if (isNullOrUndefined(this.headerContent)) {\n this.headerContent = this.createElement('div', {\n className: DLG_HEADER_CONTENT\n });\n }\n };\n\n Dialog.prototype.renderCloseIcon = function () {\n this.closeIcon = this.createElement('button', {\n className: DLG_CLOSE_ICON_BTN,\n attrs: {\n type: 'button'\n }\n });\n this.closeIconBtnObj = new Button({\n cssClass: 'e-flat',\n iconCss: DLG_CLOSE_ICON + ' ' + ICON\n });\n this.closeIconTitle();\n\n if (!isNullOrUndefined(this.headerContent)) {\n prepend([this.closeIcon], this.headerContent);\n } else {\n this.createHeaderContent();\n prepend([this.closeIcon], this.headerContent);\n this.element.insertBefore(this.headerContent, this.element.children[0]);\n }\n\n this.closeIconBtnObj.appendTo(this.closeIcon);\n };\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\n Dialog.prototype.setCSSClass = function (oldCSSClass) {\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n }\n\n if (oldCSSClass) {\n removeClass([this.element], oldCSSClass.split(' '));\n }\n };\n\n Dialog.prototype.setIsModal = function () {\n this.dlgContainer = this.createElement('div', {\n className: DLG_CONTAINER\n });\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', {\n className: DLG_OVERLAY\n });\n this.dlgOverlay.style.zIndex = (this.zIndex - 1).toString();\n this.dlgContainer.appendChild(this.dlgOverlay);\n };\n\n Dialog.prototype.getValidFocusNode = function (items) {\n var node;\n\n for (var u = 0; u < items.length; u++) {\n node = items[u];\n\n if ((node.clientHeight > 0 || node.tagName.toLowerCase() === 'a' && node.hasAttribute('href')) && node.tabIndex > -1 && !node.disabled && !this.disableElement(node, '[disabled],[aria-disabled=\"true\"],[type=\"hidden\"]')) {\n return node;\n }\n }\n\n return node;\n };\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\n return null;\n };\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\n if (isBlazor()) {\n this.primaryButtonEle = this.element.getElementsByClassName('e-primary')[0];\n }\n\n if (!isNullOrUndefined(validNode)) {\n node = validNode;\n } else {\n validNode = this.focusableElements(this.contentEle);\n\n if (!isNullOrUndefined(validNode)) {\n return node = validNode;\n } else if (!isNullOrUndefined(this.primaryButtonEle)) {\n return this.element.querySelector('.' + DLG_PRIMARY_BUTTON);\n }\n }\n\n return node;\n };\n\n Dialog.prototype.disableElement = function (element, t) {\n var elementMatch = element ? element.matches || element.webkitMatchesSelector || element.msMatchesSelector : null;\n\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\n return null;\n };\n\n Dialog.prototype.focusContent = function () {\n var element = this.getAutoFocusNode(this.element);\n var node = !isNullOrUndefined(element) ? element : this.element;\n node.focus();\n this.bindEvent(this.element);\n };\n\n Dialog.prototype.bindEvent = function (element) {\n EventHandler.add(element, 'keydown', this.keyDown, this);\n };\n\n Dialog.prototype.unBindEvent = function (element) {\n EventHandler.remove(element, 'keydown', this.keyDown);\n };\n\n Dialog.prototype.updateSanitizeContent = function () {\n if (!this.isBlazorServerRender()) {\n this.contentEle.innerHTML = this.sanitizeHelper(this.content);\n }\n };\n\n Dialog.prototype.isBlazorServerRender = function () {\n return isBlazor() && this.isServerRendered;\n };\n /**\n * Module required function\n * @private\n */\n\n\n Dialog.prototype.getModuleName = function () {\n return 'dialog';\n };\n /**\n * Called internally if any of the property value changed\n * @private\n */\n\n\n Dialog.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (!this.element.classList.contains(ROOT)) {\n return;\n }\n\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n\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\n if (!isNullOrUndefined(this.contentEle) && this.contentEle.getAttribute('role') !== 'dialog') {\n if (!this.isBlazorServerRender()) {\n this.contentEle.innerHTML = '';\n }\n\n typeof this.content === 'string' ? this.isBlazorServerRender() && this.contentEle.innerText === '' ? this.contentEle.insertAdjacentHTML('beforeend', this.sanitizeHelper(this.content)) : this.updateSanitizeContent() : this.contentEle.appendChild(this.content);\n this.setMaxHeight();\n } else {\n if (!this.isBlazorServerRender() || isNullOrUndefined(this.element.querySelector('.e-dlg-content'))) {\n this.setContent();\n }\n }\n } else if (!isNullOrUndefined(this.contentEle)) {\n detach(this.contentEle);\n this.contentEle = null;\n }\n\n break;\n\n case 'header':\n if (this.header === '' || isNullOrUndefined(this.header)) {\n if (this.headerEle) {\n detach(this.headerEle);\n this.headerEle = null;\n }\n } else {\n if (!this.isBlazorServerRender() || isNullOrUndefined(this.element.querySelector('.e-dlg-header-content'))) {\n this.setHeader();\n }\n }\n\n break;\n\n case 'footerTemplate':\n if (this.footerTemplate === '' || isNullOrUndefined(this.footerTemplate)) {\n if (!this.ftrTemplateContent) {\n return;\n }\n\n detach(this.ftrTemplateContent);\n this.ftrTemplateContent = null;\n this.buttons = [{}];\n } else {\n if (!this.isBlazorServerRender() || isNullOrUndefined(this.element.querySelector('.e-footer-content'))) {\n this.setFooterTemplate();\n }\n\n this.buttons = [{}];\n }\n\n break;\n\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 } else if (!this.showCloseIcon) {\n detach(this.closeIcon);\n } else {\n if (this.isBlazorServerRender()) {\n this.wireEvents();\n }\n }\n } else {\n if (!this.isBlazorServerRender()) {\n this.renderCloseIcon();\n }\n\n this.wireEvents();\n }\n\n break;\n\n case 'locale':\n if (this.showCloseIcon) {\n this.closeIconTitle();\n }\n\n break;\n\n case 'visible':\n this.visible ? this.show() : this.hide();\n break;\n\n case 'isModal':\n this.updateIsModal();\n break;\n\n case 'height':\n setStyleAttribute(this.element, {\n 'height': formatUnit(newProp.height)\n });\n break;\n\n case 'width':\n setStyleAttribute(this.element, {\n 'width': formatUnit(newProp.width)\n });\n break;\n\n case 'zIndex':\n this.popupObj.zIndex = this.zIndex;\n\n if (this.isModal) {\n this.setOverlayZindex(this.zIndex);\n }\n\n if (this.element.style.zIndex !== this.zIndex.toString()) {\n this.calculatezIndex = false;\n }\n\n break;\n\n case 'cssClass':\n this.setCSSClass(oldProp.cssClass);\n break;\n\n case 'buttons':\n var buttonCount = this.buttons.length;\n\n if (!isNullOrUndefined(this.ftrTemplateContent) && !this.isBlazorServerRender()) {\n detach(this.ftrTemplateContent);\n this.ftrTemplateContent = null;\n }\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\n break;\n\n case 'allowDragging':\n if (this.allowDragging && !isNullOrUndefined(this.headerContent)) {\n this.setAllowDragging();\n } else {\n this.dragObj.destroy();\n }\n\n break;\n\n case 'target':\n this.popupObj.relateTo = newProp.target;\n break;\n\n case 'position':\n this.checkPositionData();\n\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\n if (this.dlgContainer.classList.contains('e-dlg-' + positionX + '-' + positionY)) {\n this.dlgContainer.classList.remove('e-dlg-' + positionX + '-' + positionY);\n }\n }\n\n this.positionChange();\n break;\n\n case 'enableRtl':\n this.setEnableRTL();\n break;\n\n case 'enableResize':\n this.setResize();\n break;\n }\n }\n };\n\n Dialog.prototype.updateIsModal = function () {\n this.element.setAttribute('aria-modal', this.isModal ? 'true' : 'false');\n\n if (this.isModal) {\n this.setIsModal();\n this.element.style.top = '0px';\n this.element.style.left = '0px';\n\n if (!isNullOrUndefined(this.targetEle)) {\n this.targetEle.appendChild(this.dlgContainer);\n }\n } else {\n removeClass([this.element], MODAL_DLG);\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n detach(this.dlgOverlay);\n\n while (this.dlgContainer.firstChild) {\n this.dlgContainer.parentElement.insertBefore(this.dlgContainer.firstChild, this.dlgContainer);\n }\n\n this.dlgContainer.parentElement.removeChild(this.dlgContainer);\n }\n\n if (this.visible) {\n this.show();\n }\n\n this.positionChange();\n\n if (this.isModal && this.dlgOverlay) {\n EventHandler.add(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler, this);\n }\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\n if (setPopupZindex) {\n this.popupObj.zIndex = this.zIndex;\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @private\n */\n\n\n Dialog.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * To destroy the widget\n * @method destroy\n * @return {void}\n * @memberof dialog\n */\n\n\n Dialog.prototype.destroy = function () {\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\n if (this.element.classList.contains(FULLSCREEN)) {\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n }\n\n if (this.isModal) {\n removeClass([!isNullOrUndefined(this.targetEle) ? this.targetEle : document.body], SCROLL_DISABLED);\n }\n\n this.unWireEvents();\n\n if (!isNullOrUndefined(this.btnObj)) {\n for (var i = 0; i < this.btnObj.length; i++) {\n this.btnObj[i].destroy();\n }\n }\n\n if (!isNullOrUndefined(this.dragObj)) {\n this.dragObj.destroy();\n }\n\n if (this.popupObj.element.classList.contains(POPUP_ROOT)) {\n this.popupObj.destroy();\n }\n\n removeClass([this.element], classArray);\n\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n removeClass([this.element], this.cssClass.split(' '));\n }\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\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\n if (!this.isBlazorServerRender()) {\n this.element.innerHTML = this.clonedEle.innerHTML;\n }\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\n for (var i = 0; i < attrs.length; i++) {\n this.element.removeAttribute(attrs[i]);\n }\n\n _super.prototype.destroy.call(this);\n };\n /**\n * Binding event to the element while widget creation\n * @hidden\n */\n\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\n if (this.showCloseIcon) {\n EventHandler.add(this.closeIcon, 'click', this.closeIconClickEventHandler, this);\n }\n\n if (this.isModal && this.dlgOverlay) {\n EventHandler.add(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler, this);\n }\n };\n /**\n * Unbinding event to the element while widget destroy\n * @hidden\n */\n\n\n Dialog.prototype.unWireEvents = function () {\n if (this.showCloseIcon) {\n EventHandler.remove(this.closeIcon, 'click', this.closeIconClickEventHandler);\n }\n\n if (this.isModal) {\n EventHandler.remove(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler);\n }\n\n if (this.buttons.length > 0 && !isNullOrUndefined(this.buttons[0].buttonModel) && this.footerTemplate === '') {\n for (var i = 0; i < this.buttons.length; i++) {\n if (typeof this.buttons[i].click === 'function') {\n EventHandler.remove(this.ftrTemplateContent.children[i], 'click', this.buttons[i].click);\n }\n }\n }\n };\n /**\n * Refreshes the dialog's position when the user changes its header and footer height/width dynamically.\n * @return {void}\n */\n\n\n Dialog.prototype.refreshPosition = function () {\n this.popupObj.refreshPosition();\n };\n /**\n * Opens the dialog if it is in hidden state.\n * To open the dialog with full screen width, set the parameter to true.\n * @param { boolean } isFullScreen - Enable the fullScreen Dialog.\n * @return {void}\n */\n\n\n Dialog.prototype.show = function (isFullScreen) {\n var _this = this;\n\n if (!this.element.classList.contains(ROOT)) {\n return;\n }\n\n if (!this.element.classList.contains(DLG_SHOW) || !isNullOrUndefined(isFullScreen)) {\n if (!isNullOrUndefined(isFullScreen)) {\n this.fullScreen(isFullScreen);\n }\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\n _this.storeActiveElement = document.activeElement;\n _this.element.tabIndex = -1;\n\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\n if (!isNullOrUndefined(_this.targetEle)) {\n if (_this.targetEle === document.body) {\n _this.dlgContainer.style.position = 'fixed';\n } else {\n _this.dlgContainer.style.position = 'absolute';\n }\n\n _this.dlgOverlay.style.position = 'absolute';\n _this.element.style.position = 'relative';\n addClass([_this.targetEle], [DLG_TARGET, SCROLL_DISABLED]);\n } else {\n addClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n }\n }\n\n var openAnimation = {\n name: _this.animationSettings.effect + 'In',\n duration: _this.animationSettings.duration,\n delay: _this.animationSettings.delay\n };\n var zIndexElement = _this.isModal ? _this.element.parentElement : _this.element;\n\n if (_this.calculatezIndex) {\n _this.setzIndex(zIndexElement, true);\n\n setStyleAttribute(_this.element, {\n 'zIndex': _this.zIndex\n });\n\n if (_this.isModal) {\n _this.setOverlayZindex(_this.zIndex);\n }\n }\n\n _this.animationSettings.effect === 'None' ? _this.popupObj.show() : _this.popupObj.show(openAnimation);\n _this.dialogOpen = true;\n var prevOnChange = _this.isProtectedOnChange;\n _this.isProtectedOnChange = true;\n _this.visible = true;\n _this.preventVisibility = true;\n _this.isProtectedOnChange = prevOnChange;\n }\n });\n }\n };\n /**\n * Closes the dialog if it is in visible state.\n * @return {void}\n */\n\n\n Dialog.prototype.hide = function (event) {\n var _this = this;\n\n if (!this.element.classList.contains(ROOT)) {\n return;\n }\n\n if (this.preventVisibility) {\n var eventArgs = isBlazor() ? {\n cancel: false,\n isInteraction: event ? true : 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 isInteraction: event ? true : false,\n isInteracted: event ? true : false,\n element: this.element,\n target: this.target,\n container: this.isModal ? this.dlgContainer : this.element,\n event: event\n };\n this.closeArgs = eventArgs;\n this.trigger('beforeClose', eventArgs, function (beforeCloseArgs) {\n if (!beforeCloseArgs.cancel) {\n if (_this.isModal) {\n !isNullOrUndefined(_this.targetEle) ? removeClass([_this.targetEle], [DLG_TARGET, SCROLL_DISABLED]) : removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n }\n\n var closeAnimation = {\n name: _this.animationSettings.effect + 'Out',\n duration: _this.animationSettings.duration,\n delay: _this.animationSettings.delay\n };\n _this.animationSettings.effect === 'None' ? _this.popupObj.hide() : _this.popupObj.hide(closeAnimation);\n _this.dialogOpen = false;\n var prevOnChange = _this.isProtectedOnChange;\n _this.isProtectedOnChange = true;\n _this.visible = false;\n _this.preventVisibility = false;\n _this.isProtectedOnChange = prevOnChange;\n }\n });\n }\n };\n /**\n * Specifies to view the Full screen Dialog.\n * @private\n */\n\n\n Dialog.prototype.fullScreen = function (args) {\n var top = this.element.offsetTop;\n var left = this.element.offsetLeft;\n\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) ? this.targetEle.offsetHeight + 'px' : window.innerHeight + 'px';\n this.element.style.display = display;\n addClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n\n if (this.allowDragging && !isNullOrUndefined(this.dragObj)) {\n this.dragObj.destroy();\n }\n } else {\n removeClass([this.element], FULLSCREEN);\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n\n if (this.allowDragging && !isNullOrUndefined(this.headerContent)) {\n this.setAllowDragging();\n }\n }\n\n return args;\n };\n /**\n * Returns the dialog button instances.\n * Based on that, you can dynamically change the button states.\n * @param { number } index - Index of the button.\n * @return {Button}\n */\n\n\n Dialog.prototype.getButtons = function (index) {\n if (!isNullOrUndefined(index)) {\n return this.btnObj[index];\n }\n\n return this.btnObj;\n };\n\n __decorate([Property('')], Dialog.prototype, \"content\", void 0);\n\n __decorate([Property(true)], Dialog.prototype, \"enableHtmlSanitizer\", void 0);\n\n __decorate([Property(false)], Dialog.prototype, \"showCloseIcon\", void 0);\n\n __decorate([Property(false)], Dialog.prototype, \"isModal\", void 0);\n\n __decorate([Property('')], Dialog.prototype, \"header\", void 0);\n\n __decorate([Property(true)], Dialog.prototype, \"visible\", void 0);\n\n __decorate([Property(false)], Dialog.prototype, \"enableResize\", void 0);\n\n __decorate([Property('auto')], Dialog.prototype, \"height\", void 0);\n\n __decorate([Property('')], Dialog.prototype, \"minHeight\", void 0);\n\n __decorate([Property('100%')], Dialog.prototype, \"width\", void 0);\n\n __decorate([Property('')], Dialog.prototype, \"cssClass\", void 0);\n\n __decorate([Property(1000)], Dialog.prototype, \"zIndex\", void 0);\n\n __decorate([Property(null)], Dialog.prototype, \"target\", void 0);\n\n __decorate([Property('')], Dialog.prototype, \"footerTemplate\", void 0);\n\n __decorate([Property(false)], Dialog.prototype, \"allowDragging\", void 0);\n\n __decorate([Collection([{}], ButtonProps)], Dialog.prototype, \"buttons\", void 0);\n\n __decorate([Property(true)], Dialog.prototype, \"closeOnEscape\", void 0);\n\n __decorate([Complex({}, AnimationSettings)], Dialog.prototype, \"animationSettings\", void 0);\n\n __decorate([Complex({\n X: 'center',\n Y: 'center'\n }, PositionData)], Dialog.prototype, \"position\", void 0);\n\n __decorate([Event()], Dialog.prototype, \"created\", void 0);\n\n __decorate([Event()], Dialog.prototype, \"open\", void 0);\n\n __decorate([Event()], Dialog.prototype, \"beforeSanitizeHtml\", void 0);\n\n __decorate([Event()], Dialog.prototype, \"beforeOpen\", void 0);\n\n __decorate([Event()], Dialog.prototype, \"close\", void 0);\n\n __decorate([Event()], Dialog.prototype, \"beforeClose\", void 0);\n\n __decorate([Event()], Dialog.prototype, \"dragStart\", void 0);\n\n __decorate([Event()], Dialog.prototype, \"dragStop\", void 0);\n\n __decorate([Event()], Dialog.prototype, \"drag\", void 0);\n\n __decorate([Event()], Dialog.prototype, \"overlayClick\", void 0);\n\n __decorate([Event()], Dialog.prototype, \"resizeStart\", void 0);\n\n __decorate([Event()], Dialog.prototype, \"resizing\", void 0);\n\n __decorate([Event()], Dialog.prototype, \"resizeStop\", void 0);\n\n __decorate([Event()], Dialog.prototype, \"destroyed\", void 0);\n\n Dialog = __decorate([NotifyPropertyChanges], Dialog);\n return Dialog;\n}(Component);\n\nexport { Dialog };\n/**\n * Base for creating Alert and Confirmation Dialog through util method.\n */\n\nexport var DialogUtility;\n\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\n /* istanbul ignore next */\n function alert(args) {\n var dialogComponent;\n var dialogElement = createElement('div', {\n 'className': DLG_UTIL_ALERT\n });\n document.body.appendChild(dialogElement);\n var alertDialogObj;\n var okButtonModel = [{\n buttonModel: {\n isPrimary: true,\n content: 'OK'\n },\n click: function click() {\n this.hide();\n }\n }];\n\n if (typeof args === 'string') {\n alertDialogObj = createDialog({\n content: args,\n position: {\n X: 'center',\n Y: 'top'\n },\n isModal: true,\n header: DLG_UTIL_DEFAULT_TITLE,\n buttons: okButtonModel\n }, dialogElement);\n } else {\n alertDialogObj = createDialog(alertOptions(args), dialogElement);\n }\n\n alertDialogObj.close = function () {\n if (args && args.close) {\n args.close.apply(alertDialogObj);\n }\n\n alertDialogObj.destroy();\n\n if (alertDialogObj.element.classList.contains('e-dlg-modal')) {\n alertDialogObj.element.parentElement.remove();\n alertDialogObj.target.classList.remove(DLG_UTIL_ROOT);\n } else {\n alertDialogObj.element.remove();\n }\n };\n\n return alertDialogObj;\n }\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\n /* istanbul ignore next */\n\n function confirm(args) {\n var dialogComponent;\n var dialogElement = createElement('div', {\n 'className': DLG_UTIL_CONFIRM\n });\n document.body.appendChild(dialogElement);\n var confirmDialogObj;\n var okCancelButtonModel = [{\n buttonModel: {\n isPrimary: true,\n content: 'OK'\n },\n click: function click() {\n this.hide();\n }\n }, {\n buttonModel: {\n content: 'Cancel'\n },\n click: function click() {\n this.hide();\n }\n }];\n\n if (typeof args === 'string') {\n confirmDialogObj = createDialog({\n position: {\n X: 'center',\n Y: 'top'\n },\n content: args,\n isModal: true,\n header: DLG_UTIL_DEFAULT_TITLE,\n buttons: okCancelButtonModel\n }, dialogElement);\n } else {\n confirmDialogObj = createDialog(confirmOptions(args), dialogElement);\n }\n\n confirmDialogObj.close = function () {\n if (args && args.close) {\n args.close.apply(confirmDialogObj);\n }\n\n confirmDialogObj.destroy();\n\n if (confirmDialogObj.element.classList.contains('e-dlg-modal')) {\n confirmDialogObj.element.parentElement.remove();\n confirmDialogObj.target.classList.remove(DLG_UTIL_ROOT);\n } else {\n confirmDialogObj.element.remove();\n }\n };\n\n return confirmDialogObj;\n }\n\n DialogUtility.confirm = confirm;\n\n function createDialog(options, element) {\n var dialogObject = new Dialog(options);\n dialogObject.appendTo(element);\n return dialogObject;\n }\n\n function alertOptions(option) {\n var options = {};\n options.buttons = [];\n options = formOptions(options, option);\n options = setAlertButtonModel(options, option);\n return options;\n }\n\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\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 : {\n X: 'center',\n Y: 'top'\n };\n options.animationSettings = !isNullOrUndefined(option.animationSettings) ? option.animationSettings : {\n effect: 'Fade',\n duration: 400,\n delay: 0\n };\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\n function setAlertButtonModel(options, option) {\n var alertButtonModel = [{\n buttonModel: {\n isPrimary: true,\n content: 'OK'\n },\n click: function click() {\n this.hide();\n }\n }];\n\n if (!isNullOrUndefined(option.okButton)) {\n options.buttons[0] = formButtonModel(options.buttons[0], option.okButton, alertButtonModel[0]);\n } else {\n options.buttons = alertButtonModel;\n }\n\n return options;\n }\n\n function setConfirmButtonModel(options, option) {\n var okButtonModel = {\n buttonModel: {\n isPrimary: true,\n content: 'OK'\n },\n click: function click() {\n this.hide();\n }\n };\n var cancelButtonModel = {\n buttonModel: {\n content: 'Cancel'\n },\n click: function click() {\n this.hide();\n }\n };\n\n if (!isNullOrUndefined(option.okButton)) {\n options.buttons[0] = formButtonModel(options.buttons[0], option.okButton, okButtonModel);\n } else {\n options.buttons[0] = okButtonModel;\n }\n\n if (!isNullOrUndefined(option.cancelButton)) {\n options.buttons[1] = formButtonModel(options.buttons[1], option.cancelButton, cancelButtonModel);\n } else {\n options.buttons[1] = cancelButtonModel;\n }\n\n return options;\n }\n\n function formButtonModel(buttonModel, option, buttonPropModel) {\n var buttonProps = buttonPropModel;\n\n if (!isNullOrUndefined(option.text)) {\n buttonProps.buttonModel.content = option.text;\n }\n\n if (!isNullOrUndefined(option.icon)) {\n buttonProps.buttonModel.iconCss = option.icon;\n }\n\n if (!isNullOrUndefined(option.cssClass)) {\n buttonProps.buttonModel.cssClass = option.cssClass;\n }\n\n if (!isNullOrUndefined(option.click)) {\n buttonProps.click = option.click;\n }\n\n return buttonProps;\n }\n})(DialogUtility || (DialogUtility = {}));","import { createElement, attributes, addClass, removeClass, detach, classList } from '@syncfusion/ej2-base';\nimport { closest, formatUnit, isNullOrUndefined } 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\nexport var Input;\n\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 * @param args\n */\n\n function createInput(args, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n var inputObject = {\n container: null,\n buttons: [],\n clearButton: null\n };\n floatType = args.floatLabelType;\n\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 } else {\n createFloatingInput(args, inputObject, makeElement);\n }\n\n bindInitialEvent(args);\n\n if (!isNullOrUndefined(args.properties) && !isNullOrUndefined(args.properties.showClearButton) && args.properties.showClearButton && args.element.tagName !== 'TEXTAREA') {\n setClearButton(args.properties.showClearButton, args.element, inputObject, true, makeElement);\n inputObject.clearButton.setAttribute('role', 'button');\n\n if (inputObject.container.classList.contains(CLASSNAMES.FLOATINPUT)) {\n addClass([inputObject.container], CLASSNAMES.INPUTGROUP);\n }\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\n if (!isNullOrUndefined(args.element) && args.element.tagName === 'TEXTAREA') {\n addClass([inputObject.container], CLASSNAMES.TEXTAREA);\n }\n\n inputObject = setPropertyValue(args, inputObject);\n privateInputObj = inputObject;\n return inputObject;\n }\n\n Input.createInput = createInput;\n\n function bindInitialEvent(args) {\n checkInputValue(args.floatLabelType, args.element);\n args.element.addEventListener('focus', function () {\n var parent = getParentNode(this);\n\n if (parent.classList.contains('e-input-group') || parent.classList.contains('e-outline') || 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\n if (parent.classList.contains('e-input-group') || parent.classList.contains('e-outline') || 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\n Input.bindInitialEvent = bindInitialEvent;\n\n function checkInputValue(floatLabelType, inputElement) {\n var inputValue = inputElement.value;\n\n if (inputValue !== '' && !isNullOrUndefined(inputValue)) {\n inputElement.parentElement.classList.add('e-valid-input');\n } else if (floatLabelType !== 'Always') {\n inputElement.parentElement.classList.remove('e-valid-input');\n }\n }\n\n function _focusFn() {\n var label = getParentNode(this).getElementsByClassName('e-float-text')[0];\n\n if (!isNullOrUndefined(label)) {\n addClass([label], CLASSNAMES.LABELTOP);\n\n if (label.classList.contains(CLASSNAMES.LABELBOTTOM)) {\n removeClass([label], CLASSNAMES.LABELBOTTOM);\n }\n }\n }\n\n function _blurFn() {\n var parent = getParentNode(this);\n\n if (parent.getElementsByTagName('textarea')[0] ? parent.getElementsByTagName('textarea')[0].value === '' : parent.getElementsByTagName('input')[0].value === '') {\n var label = parent.getElementsByClassName('e-float-text')[0];\n\n if (!isNullOrUndefined(label)) {\n if (label.classList.contains(CLASSNAMES.LABELTOP)) {\n removeClass([label], CLASSNAMES.LABELTOP);\n }\n\n addClass([label], CLASSNAMES.LABELBOTTOM);\n }\n }\n }\n\n function wireFloatingEvents(element) {\n element.addEventListener('focus', _focusFn);\n element.addEventListener('blur', _blurFn);\n }\n\n Input.wireFloatingEvents = wireFloatingEvents;\n\n function unwireFloatingEvents(element) {\n element.removeEventListener('focus', _focusFn);\n element.removeEventListener('blur', _blurFn);\n }\n\n function createFloatingInput(args, inputObject, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n var inputElement;\n var floatLinelement;\n var floatLabelElement;\n\n if (args.floatLabelType === 'Auto') {\n wireFloatingEvents(args.element);\n }\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 } else {\n if (!isNullOrUndefined(args.customTag)) {\n inputObject.container.classList.add(CLASSNAMES.FLOATCUSTOMTAG);\n }\n\n inputObject.container.classList.add(CLASSNAMES.FLOATINPUT);\n }\n\n floatLinelement = makeElement('span', {\n className: CLASSNAMES.FLOATLINE\n });\n floatLabelElement = makeElement('label', {\n className: CLASSNAMES.FLOATTEXT\n });\n\n if (!isNullOrUndefined(args.element.id) && args.element.id !== '') {\n floatLabelElement.id = 'label_' + args.element.id.replace(/ /g, '_');\n attributes(args.element, {\n 'aria-labelledby': floatLabelElement.id\n });\n }\n\n if (!isNullOrUndefined(args.element.placeholder) && args.element.placeholder !== '') {\n floatLabelElement.innerHTML = args.element.placeholder;\n args.element.removeAttribute('placeholder');\n }\n\n if (!isNullOrUndefined(args.properties) && !isNullOrUndefined(args.properties.placeholder) && args.properties.placeholder !== '') {\n floatLabelElement.innerHTML = args.properties.placeholder;\n }\n\n if (!floatLabelElement.innerHTML) {\n inputObject.container.classList.add(CLASSNAMES.NOFLOATLABEL);\n }\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 } else {\n inputObject.container.appendChild(args.element);\n inputObject.container.appendChild(floatLinelement);\n inputObject.container.appendChild(floatLabelElement);\n }\n\n updateLabelState(args.element.value, floatLabelElement);\n\n if (args.floatLabelType === 'Always') {\n if (floatLabelElement.classList.contains(CLASSNAMES.LABELBOTTOM)) {\n removeClass([floatLabelElement], CLASSNAMES.LABELBOTTOM);\n }\n\n addClass([floatLabelElement], CLASSNAMES.LABELTOP);\n }\n\n if (args.floatLabelType === 'Auto') {\n args.element.addEventListener('input', function (event) {\n updateLabelState(args.element.value, floatLabelElement);\n });\n args.element.addEventListener('blur', function (event) {\n updateLabelState(args.element.value, floatLabelElement);\n });\n }\n\n if (!isNullOrUndefined(args.element.getAttribute('id'))) {\n floatLabelElement.setAttribute('for', args.element.getAttribute('id'));\n }\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\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\n switch (prop) {\n case 'cssClass':\n setCssClass(args.properties.cssClass, [inputObject.container]);\n checkFloatLabelType(args.floatLabelType, inputObject.container);\n break;\n\n case 'enabled':\n setEnabled(args.properties.enabled, args.element, args.floatLabelType, inputObject.container);\n break;\n\n case 'enableRtl':\n setEnableRtl(args.properties.enableRtl, [inputObject.container]);\n break;\n\n case 'placeholder':\n setPlaceholder(args.properties.placeholder, args.element);\n break;\n\n case 'readonly':\n setReadonly(args.properties.readonly, args.element);\n break;\n }\n }\n }\n\n return inputObject;\n }\n\n function updateIconState(value, button) {\n if (value) {\n removeClass([button], CLASSNAMES.CLEARICONHIDE);\n } else {\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n }\n\n function updateLabelState(value, label) {\n if (value) {\n addClass([label], CLASSNAMES.LABELTOP);\n\n if (label.classList.contains(CLASSNAMES.LABELBOTTOM)) {\n removeClass([label], CLASSNAMES.LABELBOTTOM);\n }\n } else {\n if (label.classList.contains(CLASSNAMES.LABELTOP)) {\n removeClass([label], CLASSNAMES.LABELTOP);\n }\n\n addClass([label], CLASSNAMES.LABELBOTTOM);\n }\n }\n\n function getParentNode(element) {\n var parentNode = isNullOrUndefined(element.parentNode) ? element : element.parentNode;\n\n if (parentNode && parentNode.classList.contains('e-input-in-wrap')) {\n parentNode = parentNode.parentNode;\n }\n\n return parentNode;\n }\n /**\n * To create clear button.\n */\n\n\n function createClearButton(element, inputObject, initial, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n var button = makeElement('span', {\n className: CLASSNAMES.CLEARICON\n });\n var container = inputObject.container;\n\n if (!isNullOrUndefined(initial)) {\n container.appendChild(button);\n } else {\n var baseElement = inputObject.container.classList.contains(CLASSNAMES.FLOATINPUT) ? inputObject.container.querySelector('.' + CLASSNAMES.FLOATTEXT) : element;\n baseElement.insertAdjacentElement('afterend', button);\n }\n\n if (!isNullOrUndefined(container) && container.classList.contains(CLASSNAMES.FLOATINPUT)) {\n addClass([container], CLASSNAMES.INPUTGROUP);\n }\n\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n wireClearBtnEvents(element, button, container);\n button.setAttribute('aria-label', 'close');\n return button;\n }\n\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\n if (element !== document.activeElement) {\n element.focus();\n }\n\n element.value = '';\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n });\n element.addEventListener('input', function (event) {\n updateIconState(element.value, button);\n });\n element.addEventListener('focus', function (event) {\n updateIconState(element.value, button);\n });\n element.addEventListener('blur', function (event) {\n setTimeout(function () {\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n }, 200);\n });\n }\n\n Input.wireClearBtnEvents = wireClearBtnEvents;\n\n function validateLabel(element, floatLabelType) {\n var parent = getParentNode(element);\n\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\n\n function createInputContainer(args, className, tagClass, tag, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n var container;\n\n if (!isNullOrUndefined(args.customTag)) {\n container = makeElement(args.customTag, {\n className: className\n });\n container.classList.add(tagClass);\n } else {\n container = makeElement(tag, {\n className: className\n });\n }\n\n container.classList.add('e-control-wrapper');\n return container;\n }\n\n function encodePlaceHolder(placeholder) {\n var result = '';\n\n if (!isNullOrUndefined(placeholder) && placeholder !== '') {\n var spanEle = document.createElement('span');\n spanEle.innerHTML = placeholder;\n result = spanEle.innerHTML;\n }\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 * @param value - Specify the value of the input element.\n * @param element - The element on which the specified value is updated.\n * @param floatLabelType - Specify the float label type of the input element.\n * @param clearButton - Boolean value to specify whether the clear icon is enabled / disabled on the input.\n */\n\n\n function setValue(value, element, floatLabelType, clearButton) {\n element.value = value;\n\n if (!isNullOrUndefined(floatLabelType) && floatLabelType === 'Auto') {\n validateLabel(element, floatLabelType);\n }\n\n if (!isNullOrUndefined(clearButton) && clearButton) {\n var parentElement = getParentNode(element);\n\n if (!isNullOrUndefined(parentElement)) {\n var button = parentElement.getElementsByClassName(CLASSNAMES.CLEARICON)[0];\n\n if (element.value && parentElement.classList.contains('e-input-focus')) {\n removeClass([button], CLASSNAMES.CLEARICONHIDE);\n } else {\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n }\n }\n\n checkInputValue(floatLabelType, element);\n }\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 * @param cssClass - Css class names which are needed to add.\n * @param elements - The elements which are needed to add / remove classes.\n * @param oldClass - Css class names which are needed to remove. If old classes are need to remove, can give this optional parameter.\n */\n\n function setCssClass(cssClass, elements, oldClass) {\n if (!isNullOrUndefined(oldClass) && oldClass !== '') {\n removeClass(elements, oldClass.split(' '));\n }\n\n if (!isNullOrUndefined(cssClass) && cssClass !== '') {\n addClass(elements, cssClass.split(' '));\n }\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 * @param width - Width value which is need to add.\n * @param container - The element on which the width is need to add.\n */\n\n function setWidth(width, container) {\n if (typeof width === 'number') {\n container.style.width = formatUnit(width);\n } else if (typeof width === 'string') {\n container.style.width = width.match(/px|%|em/) ? width : formatUnit(width);\n }\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 * @param placeholder - Placeholder value which is need to add.\n * @param element - The element on which the placeholder is need to add.\n */\n\n function setPlaceholder(placeholder, element) {\n var parentElement;\n placeholder = encodePlaceHolder(placeholder);\n parentElement = getParentNode(element);\n\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 } else {\n parentElement.classList.add(CLASSNAMES.NOFLOATLABEL);\n parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = '';\n }\n } else {\n if (!isNullOrUndefined(placeholder) && placeholder !== '') {\n attributes(element, {\n 'placeholder': placeholder,\n 'aria-placeholder': placeholder\n });\n } else {\n element.removeAttribute('placeholder');\n element.removeAttribute('aria-placeholder');\n }\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 * @param isReadonly\n * - Boolean value to specify whether to set read only. Setting \"True\" value enables read only.\n * @param element\n * - The element which is need to enable read only.\n */\n\n function setReadonly(isReadonly, element, floatLabelType) {\n if (isReadonly) {\n attributes(element, {\n readonly: ''\n });\n } else {\n element.removeAttribute('readonly');\n }\n\n if (!isNullOrUndefined(floatLabelType)) {\n validateLabel(element, floatLabelType);\n }\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 * @param isRtl\n * - Boolean value to specify whether to set RTL. Setting \"True\" value enables the RTL mode.\n * @param elements\n * - The elements that are needed to enable/disable RTL.\n */\n\n function setEnableRtl(isRtl, elements) {\n if (isRtl) {\n addClass(elements, CLASSNAMES.RTL);\n } else {\n removeClass(elements, CLASSNAMES.RTL);\n }\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 * @param isEnable\n * - Boolean value to specify whether to enable or disable.\n * @param element\n * - Element to be enabled or disabled.\n */\n\n function setEnabled(isEnable, element, floatLabelType, inputContainer) {\n var disabledAttrs = {\n 'disabled': 'disabled',\n 'aria-disabled': 'true'\n };\n var considerWrapper = isNullOrUndefined(inputContainer) ? false : true;\n\n if (isEnable) {\n element.classList.remove(CLASSNAMES.DISABLE);\n removeAttributes(disabledAttrs, element);\n\n if (considerWrapper) {\n removeClass([inputContainer], CLASSNAMES.DISABLE);\n }\n } else {\n element.classList.add(CLASSNAMES.DISABLE);\n addAttributes(disabledAttrs, element);\n\n if (considerWrapper) {\n addClass([inputContainer], CLASSNAMES.DISABLE);\n }\n }\n\n if (!isNullOrUndefined(floatLabelType)) {\n validateLabel(element, floatLabelType);\n }\n }\n\n Input.setEnabled = setEnabled;\n\n function setClearButton(isClear, element, inputObject, initial, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n\n if (isClear) {\n inputObject.clearButton = createClearButton(element, inputObject, initial, makeElement);\n } else {\n inputObject.clearButton.remove();\n inputObject.clearButton = null;\n }\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 * @param attrs\n * - Array of attributes which are need to removed from the element.\n * @param element\n * - Element on which the attributes are needed to be removed.\n */\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 = void 0;\n parentElement = getParentNode(element);\n\n if (key === 'disabled') {\n element.classList.remove(CLASSNAMES.DISABLE);\n }\n\n if (key === 'disabled' && parentElement.classList.contains(CLASSNAMES.INPUTGROUP)) {\n parentElement.classList.remove(CLASSNAMES.DISABLE);\n }\n\n if (key === 'placeholder' && parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) {\n parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = '';\n } else {\n element.removeAttribute(key);\n }\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 * @param attrs\n * - Array of attributes which is added to element.\n * @param element\n * - Element on which the attributes are needed to be added.\n */\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 = void 0;\n parentElement = getParentNode(element);\n\n if (key === 'disabled') {\n element.classList.add(CLASSNAMES.DISABLE);\n }\n\n if (key === 'disabled' && parentElement.classList.contains(CLASSNAMES.INPUTGROUP)) {\n parentElement.classList.add(CLASSNAMES.DISABLE);\n }\n\n if (key === 'placeholder' && parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) {\n parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = attrs[key];\n } else {\n element.setAttribute(key, attrs[key]);\n }\n }\n }\n\n Input.addAttributes = addAttributes;\n\n function removeFloating(input) {\n var container = input.container;\n\n if (!isNullOrUndefined(container) && container.classList.contains(CLASSNAMES.FLOATINPUT)) {\n var inputEle = container.querySelector('textarea') ? container.querySelector('textarea') : 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, {\n 'placeholder': placeholder\n });\n inputEle.classList.add(CLASSNAMES.INPUT);\n\n if (!clearButton && inputEle.tagName === 'INPUT') {\n inputEle.removeAttribute('required');\n }\n }\n }\n\n Input.removeFloating = removeFloating;\n\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\n if (type !== 'Never') {\n var customTag = container.tagName;\n customTag = customTag !== 'DIV' && customTag !== 'SPAN' ? customTag : null;\n var args = {\n element: input,\n floatLabelType: type,\n customTag: customTag,\n properties: {\n placeholder: placeholder\n }\n };\n var iconEle = container.querySelector('.e-clear-icon');\n var inputObj = {\n container: container\n };\n input.classList.remove(CLASSNAMES.INPUT);\n createFloatingInput(args, inputObj, makeElement);\n var isPrependIcon = container.classList.contains('e-float-icon-left');\n\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 } else {\n iconEle = container.querySelector('.e-input-group-icon');\n }\n }\n\n if (isNullOrUndefined(iconEle)) {\n if (isPrependIcon) {\n iconEle = container.querySelector('.e-input-group-icon');\n }\n\n if (isNullOrUndefined(iconEle)) {\n container.classList.remove(CLASSNAMES.INPUTGROUP);\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\n checkFloatLabelType(type, input.parentElement);\n }\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 * @param isRipple\n * - Boolean value to specify whether to enable the ripple effect.\n * @param inputObject\n * - Specify the collection of input objects.\n */\n\n function setRipple(isRipple, inputObj) {\n for (var i = 0; i < inputObj.length; i++) {\n _internalRipple(isRipple, inputObj[i].container);\n }\n }\n\n Input.setRipple = setRipple;\n\n function _internalRipple(isRipple, container, button) {\n var argsButton = [];\n argsButton.push(button);\n var buttons = isNullOrUndefined(button) ? container.querySelectorAll('.e-input-group-icon') : argsButton;\n\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 } 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\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\n function _onMouseDownRipple() {\n var ele = this;\n var parentEle = this.parentElement;\n\n while (!parentEle.classList.contains('e-input-group')) {\n parentEle = parentEle.parentElement;\n }\n\n _onMouseRipple(parentEle, ele);\n }\n\n function _onMouseUpRipple() {\n var ele = this;\n setTimeout(function () {\n ele.classList.remove('e-input-btn-ripple');\n }, 500);\n }\n\n function createIconEle(iconClass, makeElement) {\n var button = makeElement('span', {\n className: iconClass\n });\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 * @param position - Specify the icon placement on the input.Possible values are append and prepend.\n * @param 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 container - The container on which created span element is going to append.\n * @param inputElement - The inputElement on which created span element is going to prepend.\n */\n // tslint:disable\n\n\n function addIcon(position, icons, container, input, internalCreate) {\n // tslint:enable\n var result = typeof icons === 'string' ? icons.split(',') : icons;\n\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 } 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\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 * @param 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 container - The container on which created span element is going to append.\n * @param inputElement - The inputElement on which created span element is going to prepend.\n */\n // tslint:disable\n\n function prependSpan(iconClass, container, inputElement, internalCreateElement) {\n // tslint:enable\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\n if (isNullOrUndefined(innerWrapper)) {\n innerWrapper = makeElement('span', {\n className: 'e-input-in-wrap'\n });\n inputElement.parentNode.insertBefore(innerWrapper, inputElement);\n var result = container.querySelectorAll(inputElement.tagName + ' ~ *');\n innerWrapper.appendChild(inputElement);\n\n for (var i = 0; i < result.length; i++) {\n innerWrapper.appendChild(result[i]);\n }\n }\n\n innerWrapper.parentNode.insertBefore(button, innerWrapper);\n\n if (!container.classList.contains(CLASSNAMES.INPUTGROUP)) {\n container.classList.add(CLASSNAMES.INPUTGROUP);\n }\n\n _internalRipple(true, container, button);\n\n return button;\n }\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 * @param 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 container - The container on which created span element is going to append.\n */\n\n function appendSpan(iconClass, container, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n var button = createIconEle(iconClass, makeElement);\n\n if (!container.classList.contains(CLASSNAMES.INPUTGROUP)) {\n container.classList.add(CLASSNAMES.INPUTGROUP);\n }\n\n var wrap = container.classList.contains('e-float-icon-left') ? container.querySelector('.e-input-in-wrap') : container;\n wrap.appendChild(button);\n\n _internalRipple(true, container, button);\n\n return button;\n }\n\n Input.appendSpan = appendSpan;\n})(Input || (Input = {}));","import \"core-js/modules/es.array.sort.js\";\n\n/* tslint:disable-next-line:max-line-length */\nimport { EventHandler, isNullOrUndefined, extend, classList, addClass, removeClass, Browser, getValue, setValue, isBlazor } from '@syncfusion/ej2-base';\nimport { parentsUntil, getUid, appendChildren, getDatePredicate, getObject, extendObjWithFn } from '../base/util';\nimport { remove, debounce } from '@syncfusion/ej2-base';\nimport { DataUtil, Query, DataManager, Predicate, UrlAdaptor, Deferred } from '@syncfusion/ej2-data';\nimport { createCheckBox } from '@syncfusion/ej2-buttons';\nimport * as events from '../base/constant';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { getForeignData } from '../base/util';\nimport { Dialog } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';\nimport { getFilterMenuPostion, toogleCheckbox, createCboxWithWrap, removeAddCboxClasses, getColumnByForeignKeyValue } from '../base/util';\n/**\n * @hidden\n * `CheckBoxFilterBase` module is used to handle filtering action.\n */\n\nvar CheckBoxFilterBase = function () {\n /**\n * Constructor for checkbox filtering module\n * @hidden\n */\n function CheckBoxFilterBase(parent) {\n this.existingPredicate = {};\n this.foreignKeyQuery = new Query();\n this.filterState = true;\n this.values = {};\n this.renderEmpty = false;\n this.parent = parent;\n this.id = this.parent.element.id;\n this.valueFormatter = new ValueFormatter(this.parent.locale);\n this.cBoxTrue = createCheckBox(this.parent.createElement, false, {\n checked: true,\n label: ' '\n });\n this.cBoxFalse = createCheckBox(this.parent.createElement, false, {\n checked: false,\n label: ' '\n });\n this.cBoxTrue.insertBefore(this.parent.createElement('input', {\n className: 'e-chk-hidden',\n attrs: {\n type: 'checkbox'\n }\n }), this.cBoxTrue.firstChild);\n this.cBoxFalse.insertBefore(this.parent.createElement('input', {\n className: 'e-chk-hidden',\n attrs: {\n 'type': 'checkbox'\n }\n }), this.cBoxFalse.firstChild);\n this.cBoxFalse.querySelector('.e-frame').classList.add('e-uncheck');\n\n if (this.parent.enableRtl) {\n addClass([this.cBoxTrue, this.cBoxFalse], ['e-rtl']);\n }\n }\n /**\n * To destroy the filter bar.\n * @return {void}\n * @hidden\n */\n\n\n CheckBoxFilterBase.prototype.destroy = function () {\n this.closeDialog();\n };\n\n CheckBoxFilterBase.prototype.wireEvents = function () {\n EventHandler.add(this.dlg, 'click', this.clickHandler, this);\n this.searchHandler = debounce(this.searchBoxKeyUp, 200);\n EventHandler.add(this.dlg.querySelector('.e-searchinput'), 'keyup', this.searchHandler, this);\n };\n\n CheckBoxFilterBase.prototype.unWireEvents = function () {\n EventHandler.remove(this.dlg, 'click', this.clickHandler);\n var elem = this.dlg.querySelector('.e-searchinput');\n\n if (elem) {\n EventHandler.remove(elem, 'keyup', this.searchHandler);\n }\n };\n\n CheckBoxFilterBase.prototype.foreignKeyFilter = function (args, fColl, mPredicate) {\n var _this = this;\n\n var fPredicate = {};\n var filterCollection = [];\n var query = this.foreignKeyQuery.clone();\n this.options.column.dataSource.executeQuery(query.where(mPredicate)).then(function (e) {\n _this.options.column.columnData = e.result;\n\n _this.parent.notify(events.generateQuery, {\n predicate: fPredicate,\n column: _this.options.column\n });\n\n args.ejpredicate = fPredicate.predicate.predicates;\n var fpred = fPredicate.predicate.predicates;\n\n for (var i = 0; i < fpred.length; i++) {\n filterCollection.push({\n field: fpred[i].field,\n predicate: 'or',\n matchCase: fpred[i].ignoreCase,\n ignoreAccent: fpred[i].ignoreAccent,\n operator: fpred[i].operator,\n value: fpred[i].value,\n type: _this.options.type\n });\n }\n\n args.filterCollection = filterCollection.length ? filterCollection : fColl.filter(function (col) {\n return col.field = _this.options.field;\n });\n\n _this.options.handler(args);\n });\n };\n\n CheckBoxFilterBase.prototype.foreignFilter = function (args, value) {\n var operator = this.options.isRemote ? this.options.column.type === 'string' ? 'contains' : 'equal' : this.options.column.type ? 'startswith' : 'contains';\n var initalPredicate = new Predicate(this.options.column.foreignKeyValue, operator, value, true, this.options.ignoreAccent);\n this.foreignKeyFilter(args, [args.filterCollection], initalPredicate);\n };\n\n CheckBoxFilterBase.prototype.searchBoxClick = function (e) {\n var target = e.target;\n\n if (target.classList.contains('e-searchclear')) {\n this.sInput.value = '';\n this.refreshCheckboxes();\n this.updateSearchIcon();\n this.sInput.focus();\n }\n };\n\n CheckBoxFilterBase.prototype.searchBoxKeyUp = function (e) {\n this.refreshCheckboxes();\n this.updateSearchIcon();\n };\n\n CheckBoxFilterBase.prototype.updateSearchIcon = function () {\n if (this.sInput.value.length) {\n classList(this.sIcon, ['e-chkcancel-icon'], ['e-search-icon']);\n } else {\n classList(this.sIcon, ['e-search-icon'], ['e-chkcancel-icon']);\n }\n };\n /**\n * Gets the localized label by locale keyword.\n * @param {string} key\n * @return {string}\n */\n\n\n CheckBoxFilterBase.prototype.getLocalizedLabel = function (key) {\n return this.localeObj.getConstant(key);\n };\n\n CheckBoxFilterBase.prototype.updateDataSource = function () {\n var dataSource = this.options.dataSource;\n var str = 'object';\n\n if (!(dataSource instanceof DataManager)) {\n for (var i = 0; i < dataSource.length; i++) {\n if (typeof dataSource !== str) {\n var obj = {};\n obj[this.options.field] = dataSource[i];\n dataSource[i] = obj;\n }\n }\n }\n };\n\n CheckBoxFilterBase.prototype.updateModel = function (options) {\n this.options = options;\n this.existingPredicate = options.actualPredicate || {};\n this.options.dataSource = options.dataSource;\n this.options.dataManager = options.dataManager ? options.dataManager : options.dataSource;\n this.updateDataSource();\n this.options.type = options.type;\n this.options.format = options.format || '';\n this.options.ignoreAccent = options.ignoreAccent || false;\n this.options.filteredColumns = options.filteredColumns || this.parent.filterSettings.columns;\n this.options.query = options.query || new Query();\n this.options.allowCaseSensitive = options.allowCaseSensitive || false;\n this.options.uid = options.column.uid;\n this.values = {};\n this.localeObj = options.localeObj;\n this.isFiltered = options.filteredColumns.length;\n };\n\n CheckBoxFilterBase.prototype.getAndSetChkElem = function (options) {\n this.dlg = this.parent.createElement('div', {\n id: this.id + this.options.type + '_excelDlg',\n className: 'e-checkboxfilter e-filter-popup'\n });\n this.sBox = this.parent.createElement('div', {\n className: 'e-searchcontainer'\n });\n\n if (!options.hideSearchbox) {\n this.sInput = this.parent.createElement('input', {\n id: this.id + '_SearchBox',\n className: 'e-searchinput'\n });\n this.sIcon = this.parent.createElement('span', {\n className: 'e-searchclear e-search-icon e-icons e-input-group-icon',\n attrs: {\n type: 'text',\n title: this.getLocalizedLabel('Search')\n }\n });\n this.searchBox = this.parent.createElement('span', {\n className: 'e-searchbox e-fields'\n });\n this.searchBox.appendChild(this.sInput);\n this.sBox.appendChild(this.searchBox);\n var inputargs = {\n element: this.sInput,\n floatLabelType: 'Never',\n properties: {\n placeholder: this.getLocalizedLabel('Search')\n }\n };\n Input.createInput(inputargs, this.parent.createElement);\n this.searchBox.querySelector('.e-input-group').appendChild(this.sIcon);\n }\n\n this.spinner = this.parent.createElement('div', {\n className: 'e-spinner'\n }); //for spinner\n\n this.cBox = this.parent.createElement('div', {\n id: this.id + this.options.type + '_CheckBoxList',\n className: 'e-checkboxlist e-fields'\n });\n this.spinner.appendChild(this.cBox);\n this.sBox.appendChild(this.spinner);\n return this.sBox;\n };\n\n CheckBoxFilterBase.prototype.showDialog = function (options) {\n var args = {\n requestType: events.filterBeforeOpen,\n columnName: this.options.field,\n columnType: this.options.type,\n cancel: false\n };\n\n if (!isBlazor() || this.parent.isJsComponent) {\n var filterModel = 'filterModel';\n args[filterModel] = this;\n }\n\n this.parent.notify(events.cBoxFltrBegin, args);\n\n if (args.cancel) {\n return;\n }\n\n this.dialogObj = new Dialog({\n visible: false,\n content: this.sBox,\n close: this.closeDialog.bind(this),\n width: !isNullOrUndefined(parentsUntil(options.target, 'e-bigger')) || this.parent.element.classList.contains('e-device') ? 260 : 255,\n target: this.parent.element,\n animationSettings: {\n effect: 'None'\n },\n buttons: [{\n click: this.btnClick.bind(this),\n buttonModel: {\n content: this.getLocalizedLabel(this.isExcel ? 'OKButton' : 'FilterButton'),\n cssClass: 'e-primary',\n isPrimary: true\n }\n }, {\n click: this.btnClick.bind(this),\n buttonModel: {\n cssClass: 'e-flat',\n content: this.getLocalizedLabel(this.isExcel ? 'CancelButton' : 'ClearButton')\n }\n }],\n created: this.dialogCreated.bind(this),\n open: this.dialogOpen.bind(this)\n });\n var isStringTemplate = 'isStringTemplate';\n this.dialogObj[isStringTemplate] = true;\n this.dlg.setAttribute('aria-label', this.getLocalizedLabel('ExcelFilterDialogARIA'));\n this.parent.element.appendChild(this.dlg);\n this.dialogObj.appendTo(this.dlg);\n this.dialogObj.element.style.maxHeight = this.options.height + 'px';\n this.dialogObj.show();\n this.wireEvents();\n createSpinner({\n target: this.spinner\n }, this.parent.createElement);\n showSpinner(this.spinner);\n this.getAllData();\n };\n\n CheckBoxFilterBase.prototype.dialogCreated = function (e) {\n if (!Browser.isDevice) {\n getFilterMenuPostion(this.options.target, this.dialogObj, this.parent);\n } else {\n this.dialogObj.position = {\n X: 'center',\n Y: 'center'\n };\n }\n\n this.parent.notify(events.filterDialogCreated, e);\n };\n\n CheckBoxFilterBase.prototype.openDialog = function (options) {\n this.updateModel(options);\n this.getAndSetChkElem(options);\n this.showDialog(options);\n };\n\n CheckBoxFilterBase.prototype.closeDialog = function () {\n if (this.dialogObj && !this.dialogObj.isDestroyed) {\n var filterTemplateCol = this.options.columns.filter(function (col) {\n return col.getFilterItemTemplate();\n }); // tslint:disable-next-line:no-any\n\n var registeredTemplate = this.parent.registeredTemplate;\n\n if (filterTemplateCol.length && !isNullOrUndefined(registeredTemplate) && registeredTemplate.filterItemTemplate) {\n this.parent.destroyTemplate(['filterItemTemplate']);\n }\n\n this.parent.notify(events.filterMenuClose, {\n field: this.options.field\n });\n this.dialogObj.destroy();\n this.unWireEvents();\n remove(this.dlg);\n this.dlg = null;\n }\n };\n\n CheckBoxFilterBase.prototype.clearFilter = function () {\n /* tslint:disable-next-line:max-line-length */\n var args = {\n instance: this,\n handler: this.clearFilter,\n cancel: false\n };\n this.parent.notify(events.fltrPrevent, args);\n\n if (args.cancel) {\n return;\n }\n\n this.options.handler({\n action: 'clear-filter',\n field: this.options.field\n });\n };\n\n CheckBoxFilterBase.prototype.btnClick = function (e) {\n if (this.filterState) {\n if (e.target.tagName.toLowerCase() === 'input') {\n var value = e.target.value;\n\n if (this.options.column.type === 'boolean') {\n if (value !== undefined && this.getLocalizedLabel('FilterTrue').toLowerCase().indexOf(value.toLowerCase()) !== -1) {\n value = 'true';\n } else if (value !== undefined && this.getLocalizedLabel('FilterFalse').toLowerCase().indexOf(value.toLowerCase()) !== -1) {\n value = 'false';\n }\n }\n\n var args = {\n action: 'filtering',\n filterCollection: {\n field: this.options.field,\n operator: this.options.isRemote ? this.options.column.type === 'string' ? 'contains' : 'equal' : this.options.column.type === 'date' || this.options.column.type === 'datetime' || this.options.column.type === 'boolean' ? 'equal' : 'contains',\n value: value,\n matchCase: false,\n type: this.options.column.type\n },\n field: this.options.field\n };\n value ? this.isForeignColumn(this.options.column) ? this.foreignFilter(args, value) : this.options.handler(args) : this.closeDialog();\n } else {\n var text = e.target.firstChild.textContent.toLowerCase();\n\n if (this.getLocalizedLabel(this.isExcel ? 'OKButton' : 'FilterButton').toLowerCase() === text) {\n this.fltrBtnHandler();\n } else if (this.getLocalizedLabel('ClearButton').toLowerCase() === text) {\n this.clearFilter();\n }\n }\n\n this.closeDialog();\n } else if (!(e.target.tagName.toLowerCase() === 'input')) {\n this.clearFilter();\n this.closeDialog();\n }\n };\n\n CheckBoxFilterBase.prototype.fltrBtnHandler = function () {\n var checked = [].slice.call(this.cBox.querySelectorAll('.e-check:not(.e-selectall)'));\n var optr = 'equal';\n var searchInput = this.searchBox.querySelector('.e-searchinput');\n var caseSen = this.options.allowCaseSensitive;\n var defaults = {\n field: this.options.field,\n predicate: 'or',\n uid: this.options.uid,\n operator: optr,\n type: this.options.type,\n matchCase: caseSen,\n ignoreAccent: this.options.ignoreAccent\n };\n var isNotEqual = this.itemsCnt !== checked.length && this.itemsCnt - checked.length < checked.length;\n\n if (isNotEqual && searchInput.value === '') {\n optr = 'notequal';\n checked = [].slice.call(this.cBox.querySelectorAll('.e-uncheck:not(.e-selectall)'));\n defaults.predicate = 'and';\n defaults.operator = 'notequal';\n }\n\n var value;\n var fObj;\n var coll = [];\n\n if (checked.length !== this.itemsCnt || searchInput.value && searchInput.value !== '') {\n for (var i = 0; i < checked.length; i++) {\n value = this.values[parentsUntil(checked[i], 'e-ftrchk').getAttribute('uid')];\n fObj = extend({}, {\n value: value\n }, defaults);\n\n if (value && !value.toString().length) {\n fObj.operator = isNotEqual ? 'notequal' : 'equal';\n }\n\n if (value === '' || isNullOrUndefined(value)) {\n if (this.options.type === 'string') {\n coll.push({\n field: defaults.field,\n ignoreAccent: defaults.ignoreAccent,\n matchCase: defaults.matchCase,\n operator: defaults.operator,\n predicate: defaults.predicate,\n value: ''\n });\n }\n\n coll.push({\n field: defaults.field,\n matchCase: defaults.matchCase,\n operator: defaults.operator,\n predicate: defaults.predicate,\n value: null\n });\n coll.push({\n field: defaults.field,\n matchCase: defaults.matchCase,\n operator: defaults.operator,\n predicate: defaults.predicate,\n value: undefined\n });\n } else {\n coll.push(fObj);\n }\n\n var args = {\n instance: this,\n handler: this.fltrBtnHandler,\n arg1: fObj.field,\n arg2: fObj.predicate,\n arg3: fObj.operator,\n arg4: fObj.matchCase,\n arg5: fObj.ignoreAccent,\n arg6: fObj.value,\n cancel: false\n };\n this.parent.notify(events.fltrPrevent, args);\n\n if (args.cancel) {\n return;\n }\n }\n\n this.initiateFilter(coll);\n } else {\n this.clearFilter();\n }\n };\n\n CheckBoxFilterBase.prototype.initiateFilter = function (fColl) {\n var firstVal = fColl[0];\n var predicate;\n\n if (!isNullOrUndefined(firstVal)) {\n predicate = firstVal.ejpredicate ? firstVal.ejpredicate : new Predicate(firstVal.field, firstVal.operator, firstVal.value, !firstVal.matchCase, firstVal.ignoreAccent);\n\n for (var j = 1; j < fColl.length; j++) {\n predicate = fColl[j].ejpredicate !== undefined ? predicate[fColl[j].predicate](fColl[j].ejpredicate) : predicate[fColl[j].predicate](fColl[j].field, fColl[j].operator, fColl[j].value, !fColl[j].matchCase, fColl[j].ignoreAccent);\n }\n\n var args = {\n action: 'filtering',\n filterCollection: fColl,\n field: this.options.field,\n ejpredicate: Predicate.or(predicate)\n };\n this.options.handler(args);\n }\n };\n\n CheckBoxFilterBase.prototype.isForeignColumn = function (col) {\n return col.isForeignColumn ? col.isForeignColumn() : false;\n };\n\n CheckBoxFilterBase.prototype.refreshCheckboxes = function () {\n var _this = this;\n\n var val = this.sInput.value;\n var column = this.options.column;\n var query = this.isForeignColumn(column) ? this.foreignKeyQuery.clone() : this.options.query.clone();\n var foreignQuery = this.options.query.clone();\n var pred = query.queries.filter(function (e) {\n return e && e.fn === 'onWhere';\n })[0];\n query.queries = [];\n foreignQuery.queries = [];\n var parsed = this.options.type !== 'string' && parseFloat(val) ? parseFloat(val) : val;\n var operator = this.options.isRemote ? this.options.type === 'string' ? 'contains' : 'equal' : this.options.type ? 'startswith' : 'contains';\n var matchCase = true;\n var ignoreAccent = this.options.ignoreAccent;\n var field = this.isForeignColumn(column) ? column.foreignKeyValue : column.field;\n parsed = parsed === '' || parsed === undefined ? undefined : parsed;\n var predicte;\n var moduleName = this.options.dataManager.adaptor.getModuleName;\n\n if (this.options.type === 'boolean') {\n if (parsed !== undefined && this.getLocalizedLabel('FilterTrue').toLowerCase().indexOf(parsed.toLowerCase()) !== -1 && moduleName) {\n parsed = moduleName() === 'ODataAdaptor' || 'ODataV4Adaptor' ? true : 'true';\n } else if (parsed !== undefined && this.getLocalizedLabel('FilterFalse').toLowerCase().indexOf(parsed.toLowerCase()) !== -1 && moduleName) {\n parsed = moduleName() === 'ODataAdaptor' || 'ODataV4Adaptor' ? false : 'false';\n }\n\n operator = 'equal';\n }\n\n if (this.options.type === 'date' || this.options.type === 'datetime') {\n parsed = this.valueFormatter.fromView(val, this.options.parserFn, this.options.type);\n }\n\n this.addDistinct(query);\n /* tslint:disable-next-line:max-line-length */\n\n var args = {\n requestType: events.filterSearchBegin,\n filterModel: this,\n columnName: field,\n column: column,\n operator: operator,\n matchCase: matchCase,\n ignoreAccent: ignoreAccent,\n filterChoiceCount: null,\n query: query,\n value: parsed\n };\n\n if (isBlazor() && !this.parent.isJsComponent) {\n var filterModel = 'filterModel';\n args[filterModel] = {};\n }\n\n this.parent.notify(events.cBoxFltrBegin, args);\n predicte = new Predicate(field, args.operator, parsed, args.matchCase, args.ignoreAccent);\n\n if (this.options.type === 'date' || this.options.type === 'datetime') {\n operator = 'equal';\n\n if (isNullOrUndefined(parsed) && val.length) {\n return;\n }\n\n var filterObj = {\n field: field,\n operator: operator,\n value: parsed,\n matchCase: matchCase,\n ignoreAccent: ignoreAccent\n };\n predicte = getDatePredicate(filterObj, this.options.type);\n }\n\n if (val.length) {\n predicte = !isNullOrUndefined(pred) ? predicte.and(pred.e) : predicte;\n query.where(predicte);\n } else if (!isNullOrUndefined(pred)) {\n query.where(pred.e);\n }\n\n args.filterChoiceCount = !isNullOrUndefined(args.filterChoiceCount) ? args.filterChoiceCount : 1000;\n var fPredicate = {};\n showSpinner(this.spinner);\n this.renderEmpty = false;\n\n if (this.isForeignColumn(column) && val.length) {\n // tslint:disable-next-line:no-any\n column.dataSource.executeQuery(query).then(function (e) {\n var columnData = _this.options.column.columnData;\n _this.options.column.columnData = e.result;\n\n _this.parent.notify(events.generateQuery, {\n predicate: fPredicate,\n column: column\n });\n\n if (fPredicate.predicate.predicates.length) {\n foreignQuery.where(fPredicate.predicate);\n } else {\n _this.renderEmpty = true;\n }\n\n _this.options.column.columnData = columnData;\n foreignQuery.take(args.filterChoiceCount);\n\n _this.search(args, foreignQuery);\n });\n } else {\n query.take(args.filterChoiceCount);\n this.search(args, query);\n }\n };\n\n CheckBoxFilterBase.prototype.search = function (args, query) {\n if (this.parent.dataSource && 'result' in this.parent.dataSource) {\n this.filterEvent(args, query);\n } else {\n this.processSearch(query);\n }\n };\n\n CheckBoxFilterBase.prototype.getPredicateFromCols = function (columns) {\n var predicates = CheckBoxFilterBase.getPredicate(columns);\n var predicateList = [];\n var fPredicate = {};\n var isGrid = this.parent.getForeignKeyColumns !== undefined;\n var foreignColumn = isGrid ? this.parent.getForeignKeyColumns() : [];\n\n for (var _i = 0, _a = Object.keys(predicates); _i < _a.length; _i++) {\n var prop = _a[_i];\n var col = void 0;\n\n if (isGrid && this.parent.getColumnByField(prop).isForeignColumn()) {\n col = getColumnByForeignKeyValue(prop, foreignColumn);\n }\n\n if (col) {\n this.parent.notify(events.generateQuery, {\n predicate: fPredicate,\n column: col\n });\n\n if (fPredicate.predicate.predicates.length) {\n predicateList.push(Predicate.or(fPredicate.predicate.predicates));\n }\n } else {\n predicateList.push(predicates[prop]);\n }\n }\n\n return predicateList.length && Predicate.and(predicateList);\n };\n\n CheckBoxFilterBase.prototype.getQuery = function () {\n return this.parent.getQuery ? this.parent.getQuery().clone() : new Query();\n };\n\n CheckBoxFilterBase.prototype.getAllData = function () {\n var _this = this;\n\n var query = this.getQuery();\n query.requiresCount(); //consider take query\n\n this.addDistinct(query);\n var args = {\n requestType: events.filterChoiceRequest,\n query: query,\n filterChoiceCount: null\n };\n\n if (!isBlazor() || this.parent.isJsComponent) {\n var filterModel = 'filterModel';\n args[filterModel] = this;\n }\n\n this.parent.trigger(events.actionBegin, args, function (args) {\n args.filterChoiceCount = !isNullOrUndefined(args.filterChoiceCount) ? args.filterChoiceCount : 1000;\n query.take(args.filterChoiceCount);\n\n if (_this.parent.dataSource && 'result' in _this.parent.dataSource) {\n _this.filterEvent(args, query);\n } else {\n _this.processDataOperation(query, true);\n }\n });\n };\n\n CheckBoxFilterBase.prototype.addDistinct = function (query) {\n var filteredColumn = DataUtil.distinct(this.options.filteredColumns, 'field');\n\n if (filteredColumn.indexOf(this.options.column.field) <= -1) {\n filteredColumn = filteredColumn.concat(this.options.column.field);\n }\n\n query.distinct(filteredColumn);\n return query;\n };\n\n CheckBoxFilterBase.prototype.filterEvent = function (args, query) {\n var _this = this;\n\n var def = this.eventPromise(args, query);\n def.promise.then(function (e) {\n _this.dataSuccess(e);\n });\n };\n\n CheckBoxFilterBase.prototype.eventPromise = function (args, query) {\n var state;\n state = this.getStateEventArgument(query);\n var def = new Deferred();\n state.dataSource = def.resolve;\n state.action = args;\n this.parent.trigger(events.dataStateChange, state);\n return def;\n };\n\n ;\n\n CheckBoxFilterBase.prototype.getStateEventArgument = function (query) {\n var adaptr = new UrlAdaptor();\n var dm = new DataManager({\n url: '',\n adaptor: new UrlAdaptor()\n });\n var state = adaptr.processQuery(dm, query);\n var data = JSON.parse(state.data);\n return data;\n };\n\n ;\n\n CheckBoxFilterBase.prototype.processDataOperation = function (query, isInitial) {\n var _this = this;\n\n this.options.dataSource = this.options.dataSource instanceof DataManager ? this.options.dataSource : new DataManager(this.options.dataSource);\n var allPromise = [];\n var runArray = [];\n\n if (this.isForeignColumn(this.options.column) && isInitial) {\n allPromise.push(this.options.column.dataSource.executeQuery(this.foreignKeyQuery));\n runArray.push(function (data) {\n return _this.foreignKeyData = data;\n });\n }\n\n allPromise.push(this.options.dataSource.executeQuery(query));\n runArray.push(this.dataSuccess.bind(this));\n var i = 0;\n Promise.all(allPromise).then(function (e) {\n for (var j = 0; j < e.length; j++) {\n runArray[i++](e[j].result);\n }\n });\n };\n\n CheckBoxFilterBase.prototype.dataSuccess = function (e) {\n this.fullData = e;\n var query = new Query();\n\n if (this.parent.searchSettings && this.parent.searchSettings.key.length) {\n var sSettings = this.parent.searchSettings;\n var fields = sSettings.fields.length ? sSettings.fields : this.options.columns.map(function (f) {\n return f.field;\n });\n /* tslint:disable-next-line:max-line-length */\n\n query.search(sSettings.key, fields, sSettings.operator, sSettings.ignoreCase, sSettings.ignoreAccent);\n }\n\n if (this.options.filteredColumns.length) {\n var cols = [];\n\n for (var i = 0; i < this.options.filteredColumns.length; i++) {\n var filterColumn = this.options.filteredColumns[i];\n\n if (this.options.uid) {\n filterColumn.uid = filterColumn.uid || this.parent.getColumnByField(filterColumn.field).uid;\n\n if (filterColumn.uid !== this.options.uid) {\n cols.push(this.options.filteredColumns[i]);\n }\n } else {\n if (filterColumn.field !== this.options.field) {\n cols.push(this.options.filteredColumns[i]);\n }\n }\n }\n\n var predicate = this.getPredicateFromCols(cols);\n\n if (predicate) {\n query.where(predicate);\n }\n } // query.select(this.options.field);\n\n\n var result = new DataManager(this.fullData).executeLocal(query);\n var col = this.options.column;\n this.filteredData = CheckBoxFilterBase.getDistinct(result, this.options.field, col, this.foreignKeyData).records || [];\n this.processDataSource(null, true, this.filteredData);\n this.sInput.focus();\n var args = {\n requestType: events.filterAfterOpen,\n columnName: this.options.field,\n columnType: this.options.type\n };\n\n if (!isBlazor() || this.parent.isJsComponent) {\n var filterModel = 'filterModel';\n args[filterModel] = this;\n }\n\n this.parent.notify(events.cBoxFltrComplete, args);\n };\n\n CheckBoxFilterBase.prototype.processDataSource = function (query, isInitial, dataSource) {\n showSpinner(this.spinner); // query = query ? query : this.options.query.clone();\n // query.requiresCount();\n // let result: Object = new DataManager(dataSource as JSON[]).executeLocal(query);\n // let res: { result: Object[] } = result as { result: Object[] };\n\n this.updateResult();\n this.createFilterItems(dataSource, isInitial);\n };\n\n CheckBoxFilterBase.prototype.processSearch = function (query) {\n this.processDataOperation(query);\n };\n\n CheckBoxFilterBase.prototype.updateResult = function () {\n this.result = {};\n var predicate = this.getPredicateFromCols(this.options.filteredColumns);\n var query = new Query();\n\n if (predicate) {\n query.where(predicate);\n }\n\n var result = new DataManager(this.fullData).executeLocal(query);\n\n for (var _i = 0, result_1 = result; _i < result_1.length; _i++) {\n var res = result_1[_i];\n this.result[getObject(this.options.field, res)] = true;\n }\n };\n\n CheckBoxFilterBase.prototype.clickHandler = function (e) {\n var target = e.target;\n var elem = parentsUntil(target, 'e-checkbox-wrapper');\n\n if (parentsUntil(target, 'e-searchbox')) {\n this.searchBoxClick(e);\n }\n\n if (elem) {\n var selectAll = elem.querySelector('.e-selectall');\n\n if (selectAll) {\n this.updateAllCBoxes(!selectAll.classList.contains('e-check'));\n } else {\n toogleCheckbox(elem.parentElement);\n }\n\n this.updateIndeterminatenBtn();\n elem.querySelector('.e-chk-hidden').focus();\n }\n };\n\n CheckBoxFilterBase.prototype.updateAllCBoxes = function (checked) {\n var cBoxes = [].slice.call(this.cBox.querySelectorAll('.e-frame'));\n\n for (var _i = 0, cBoxes_1 = cBoxes; _i < cBoxes_1.length; _i++) {\n var cBox = cBoxes_1[_i];\n removeAddCboxClasses(cBox, checked);\n }\n };\n\n CheckBoxFilterBase.prototype.dialogOpen = function () {\n if (this.parent.element.classList.contains('e-device')) {\n this.dialogObj.element.querySelector('.e-input-group').classList.remove('e-input-focus');\n this.dialogObj.element.querySelector('.e-btn').focus();\n }\n };\n\n CheckBoxFilterBase.prototype.createCheckbox = function (value, checked, data) {\n var elem = checked ? this.cBoxTrue.cloneNode(true) : this.cBoxFalse.cloneNode(true);\n var label = elem.querySelector('.e-label');\n var dummyData = extendObjWithFn({}, data, {\n column: this.options.column,\n parent: this.parent\n });\n label.innerHTML = !isNullOrUndefined(value) && value.toString().length ? value : this.getLocalizedLabel('Blanks');\n addClass([label], ['e-checkboxfiltertext']);\n\n if (this.options.template && data[this.options.column.field] !== this.getLocalizedLabel('SelectAll')) {\n label.innerHTML = '';\n appendChildren(label, this.options.template(dummyData, this.parent, 'filterItemTemplate'));\n }\n\n return elem;\n };\n\n CheckBoxFilterBase.prototype.updateIndeterminatenBtn = function () {\n var cnt = this.cBox.children.length - 1;\n var className = [];\n var elem = this.cBox.querySelector('.e-selectall');\n var selected = this.cBox.querySelectorAll('.e-check:not(.e-selectall)').length;\n var btn = this.dialogObj.btnObj[0];\n btn.disabled = false;\n\n if (cnt === selected) {\n className = ['e-check'];\n } else if (selected) {\n className = ['e-stop'];\n } else {\n className = ['e-uncheck'];\n btn.disabled = true;\n }\n\n this.filterState = !btn.disabled;\n btn.dataBind();\n removeClass([elem], ['e-check', 'e-stop', 'e-uncheck']);\n addClass([elem], className);\n };\n\n CheckBoxFilterBase.prototype.createFilterItems = function (data, isInitial) {\n var _a;\n\n var cBoxes = this.parent.createElement('div');\n var btn = this.dialogObj.btnObj[0];\n var nullCounter = -1;\n\n for (var i = 0; i < data.length; i++) {\n var val = getValue('ejValue', data[i]);\n\n if (val === '' || isNullOrUndefined(val)) {\n nullCounter = nullCounter + 1;\n }\n }\n\n this.itemsCnt = nullCounter !== -1 ? data.length - nullCounter : data.length;\n\n if (data.length && !this.renderEmpty) {\n var selectAllValue = this.getLocalizedLabel('SelectAll');\n var checkBox = this.createCheckbox(selectAllValue, false, (_a = {}, _a[this.options.field] = selectAllValue, _a));\n var selectAll = createCboxWithWrap(getUid('cbox'), checkBox, 'e-ftrchk');\n selectAll.querySelector('.e-frame').classList.add('e-selectall');\n cBoxes.appendChild(selectAll);\n var predicate = new Predicate('field', 'equal', this.options.field);\n\n if (this.options.foreignKeyValue) {\n predicate = predicate.or('field', 'equal', this.options.foreignKeyValue);\n }\n\n var isColFiltered = new DataManager(this.options.filteredColumns).executeLocal(new Query().where(predicate)).length;\n var isRndere = void 0;\n\n for (var i = 0; i < data.length; i++) {\n var uid = getUid('cbox');\n this.values[uid] = getValue('ejValue', data[i]);\n var value = getValue(this.options.field, data[i]);\n\n if (this.options.formatFn) {\n value = this.valueFormatter.toView(value, this.options.formatFn);\n }\n\n var args_1 = {\n value: value,\n column: this.options.column,\n data: data[i]\n };\n this.parent.notify(events.filterCboxValue, args_1);\n value = args_1.value;\n\n if (value === '' || isNullOrUndefined(value)) {\n if (isRndere) {\n continue;\n }\n\n isRndere = true;\n }\n\n var checkbox = this.createCheckbox(value, this.getCheckedState(isColFiltered, this.values[uid]), getValue('dataObj', data[i]));\n cBoxes.appendChild(createCboxWithWrap(uid, checkbox, 'e-ftrchk'));\n }\n\n this.cBox.innerHTML = '';\n appendChildren(this.cBox, [].slice.call(cBoxes.children));\n this.updateIndeterminatenBtn();\n btn.disabled = false;\n } else {\n cBoxes.appendChild(this.parent.createElement('span', {\n innerHTML: this.getLocalizedLabel('NoResult')\n }));\n this.cBox.innerHTML = '';\n appendChildren(this.cBox, [].slice.call(cBoxes.children));\n btn.disabled = true;\n }\n\n this.filterState = !btn.disabled;\n btn.dataBind();\n var args = {\n requestType: events.filterChoiceRequest,\n dataSource: this.renderEmpty || isBlazor() && this.parent.isServerRendered ? [] : data\n };\n\n if (!isBlazor() || this.parent.isJsComponent) {\n var filterModel = 'filterModel';\n args[filterModel] = this;\n }\n\n this.parent.notify(events.cBoxFltrComplete, args);\n hideSpinner(this.spinner);\n };\n\n CheckBoxFilterBase.prototype.getCheckedState = function (isColFiltered, value) {\n if (!this.isFiltered || !isColFiltered) {\n return true;\n } else {\n return this.result[value];\n }\n };\n\n CheckBoxFilterBase.getDistinct = function (json, field, column, foreignKeyData) {\n var len = json.length;\n var result = [];\n var value;\n var ejValue = 'ejValue';\n var lookup = {};\n var isForeignKey = column && column.isForeignColumn ? column.isForeignColumn() : false;\n\n while (len--) {\n value = json[len];\n value = getObject(field, value); //local remote diff, check with mdu \n\n if (!(value in lookup)) {\n var obj = {};\n obj[ejValue] = value;\n lookup[value] = true;\n\n if (isForeignKey) {\n var foreignDataObj = getForeignData(column, {}, value, foreignKeyData)[0];\n setValue(events.foreignKeyData, foreignDataObj, json[len]);\n value = getValue(column.foreignKeyValue, foreignDataObj);\n }\n\n setValue(field, isNullOrUndefined(value) ? null : value, obj);\n setValue('dataObj', json[len], obj);\n result.push(obj);\n }\n }\n\n return DataUtil.group(DataUtil.sort(result, field, DataUtil.fnAscending), 'ejValue');\n };\n\n CheckBoxFilterBase.getPredicate = function (columns) {\n var cols = DataUtil.distinct(columns, 'field', true) || [];\n var collection = [];\n var pred = {};\n\n for (var i = 0; i < cols.length; i++) {\n collection = new DataManager(columns).executeLocal(new Query().where('field', 'equal', cols[i].field));\n\n if (collection.length !== 0) {\n pred[cols[i].field] = CheckBoxFilterBase.generatePredicate(collection);\n }\n }\n\n return pred;\n };\n\n CheckBoxFilterBase.generatePredicate = function (cols) {\n var len = cols ? cols.length : 0;\n var predicate;\n var first;\n first = CheckBoxFilterBase.updateDateFilter(cols[0]);\n first.ignoreAccent = !isNullOrUndefined(first.ignoreAccent) ? first.ignoreAccent : false;\n\n if (first.type === 'date' || first.type === 'datetime') {\n predicate = getDatePredicate(first, first.type);\n } else {\n predicate = first.ejpredicate ? first.ejpredicate : new Predicate(first.field, first.operator, first.value, !CheckBoxFilterBase.getCaseValue(first), first.ignoreAccent);\n }\n\n for (var p = 1; p < len; p++) {\n cols[p] = CheckBoxFilterBase.updateDateFilter(cols[p]);\n\n if (len > 2 && p > 1 && cols[p].predicate === 'or') {\n if (cols[p].type === 'date' || cols[p].type === 'datetime') {\n predicate.predicates.push(getDatePredicate(cols[p], cols[p].type));\n } else {\n predicate.predicates.push(new Predicate(cols[p].field, cols[p].operator, cols[p].value, !CheckBoxFilterBase.getCaseValue(cols[p]), cols[p].ignoreAccent));\n }\n } else {\n if (cols[p].type === 'date' || cols[p].type === 'datetime') {\n predicate = predicate[cols[p].predicate](getDatePredicate(cols[p], cols[p].type), cols[p].type, cols[p].ignoreAccent);\n } else {\n /* tslint:disable-next-line:max-line-length */\n predicate = cols[p].ejpredicate ? predicate[cols[p].predicate](cols[p].ejpredicate) : predicate[cols[p].predicate](cols[p].field, cols[p].operator, cols[p].value, !CheckBoxFilterBase.getCaseValue(cols[p]), cols[p].ignoreAccent);\n }\n }\n }\n\n return predicate || null;\n };\n\n CheckBoxFilterBase.getCaseValue = function (filter) {\n if (isNullOrUndefined(filter.matchCase)) {\n return false;\n } else {\n return filter.matchCase;\n }\n };\n\n CheckBoxFilterBase.updateDateFilter = function (filter) {\n if (filter.type === 'date' || filter.type === 'datetime' || filter.value instanceof Date) {\n filter.type = filter.type || 'date';\n }\n\n return filter;\n };\n\n return CheckBoxFilterBase;\n}();\n\nexport { CheckBoxFilterBase };","import { isNullOrUndefined, extend, isBlazor } from '@syncfusion/ej2-base';\nimport { Query, DataManager, Predicate, Deferred, UrlAdaptor } from '@syncfusion/ej2-data';\nimport { setFormatter, getDatePredicate, isGroupAdaptive, getColumnByForeignKeyValue, refreshFilteredColsUid } from '../base/util';\nimport * as events from '../base/constant';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { CheckBoxFilterBase } from '../common/checkbox-filter-base';\n/**\n * Grid data module is used to generate query and data source.\n * @hidden\n */\n\nvar Data = function () {\n /**\n * Constructor for data module.\n * @hidden\n */\n function Data(parent, serviceLocator) {\n this.dataState = {\n isPending: false,\n resolver: null,\n group: []\n };\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.initDataManager();\n\n if (this.parent.isDestroyed || this.getModuleName() === 'foreignKey') {\n return;\n }\n\n this.parent.on(events.rowsAdded, this.addRows, this);\n this.parent.on(events.rowPositionChanged, this.reorderRows, this);\n this.parent.on(events.rowsRemoved, this.removeRows, this);\n this.parent.on(events.dataSourceModified, this.initDataManager, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.parent.on(events.updateData, this.crudActions, this);\n this.parent.on(events.addDeleteAction, this.getData, this);\n this.parent.on(events.autoCol, this.refreshFilteredCols, this);\n this.parent.on(events.columnsPrepared, this.refreshFilteredCols, this);\n }\n\n Data.prototype.reorderRows = function (e) {\n this.dataManager.dataSource.json.splice(e.toIndex, 0, this.dataManager.dataSource.json.splice(e.fromIndex, 1)[0]);\n };\n\n Data.prototype.getModuleName = function () {\n return 'data';\n };\n /**\n * The function used to initialize dataManager and external query\n * @return {void}\n */\n\n\n Data.prototype.initDataManager = function () {\n var gObj = this.parent;\n this.dataManager = gObj.dataSource instanceof DataManager ? gObj.dataSource : isNullOrUndefined(gObj.dataSource) ? new DataManager() : new DataManager(gObj.dataSource);\n this.isQueryInvokedFromData = true;\n gObj.query = gObj.query instanceof Query ? gObj.query : new Query();\n };\n /**\n * The function is used to generate updated Query from Grid model.\n * @return {Query}\n * @hidden\n */\n\n\n Data.prototype.generateQuery = function (skipPage) {\n var gObj = this.parent;\n var query = gObj.getQuery().clone();\n\n if (this.parent.columnQueryMode === 'ExcludeHidden') {\n query.select(this.parent.getColumns().filter(function (column) {\n return !(column.isPrimaryKey !== true && column.visible === false || column.field === undefined);\n }).map(function (column) {\n return column.field;\n }));\n } else if (this.parent.columnQueryMode === 'Schema') {\n var selectQueryFields = [];\n var columns = this.parent.columns;\n\n for (var i = 0; i < columns.length; i++) {\n selectQueryFields.push(columns[i].field);\n }\n\n query.select(selectQueryFields);\n }\n\n this.filterQuery(query);\n this.searchQuery(query);\n this.aggregateQuery(query);\n this.sortQuery(query);\n\n if (isGroupAdaptive(this.parent)) {\n this.virtualGroupPageQuery(query);\n } else {\n this.pageQuery(query, skipPage);\n }\n\n this.groupQuery(query);\n return query;\n };\n\n Data.prototype.aggregateQuery = function (query, isForeign) {\n var rows = this.parent.aggregates;\n\n for (var i = 0; i < rows.length; i++) {\n var row = rows[i];\n\n for (var j = 0; j < row.columns.length; j++) {\n var cols = row.columns[j];\n var types = cols.type instanceof Array ? cols.type : [cols.type];\n\n for (var k = 0; k < types.length; k++) {\n query.aggregate(types[k].toLowerCase(), cols.field);\n }\n }\n }\n\n return query;\n };\n\n Data.prototype.virtualGroupPageQuery = function (query) {\n var gObj = this.parent;\n var fName = 'fn';\n\n if (query.queries.length) {\n for (var i = 0; i < query.queries.length; i++) {\n if (query.queries[i][fName] === 'onPage') {\n query.queries.splice(i, 1);\n }\n }\n }\n\n return query;\n };\n\n Data.prototype.pageQuery = function (query, skipPage) {\n var gObj = this.parent;\n var fName = 'fn';\n\n if ((gObj.allowPaging || gObj.enableVirtualization || gObj.infiniteScrollSettings.enableScroll) && skipPage !== true) {\n gObj.pageSettings.currentPage = Math.max(1, gObj.pageSettings.currentPage);\n\n if (gObj.pageSettings.pageCount <= 0) {\n gObj.pageSettings.pageCount = 8;\n }\n\n if (gObj.pageSettings.pageSize <= 0) {\n gObj.pageSettings.pageSize = 12;\n }\n\n if (query.queries.length) {\n for (var i = 0; i < query.queries.length; i++) {\n if (query.queries[i][fName] === 'onPage') {\n query.queries.splice(i, 1);\n }\n }\n }\n\n if (!isNullOrUndefined(gObj.infiniteScrollModule) && gObj.infiniteScrollSettings.enableScroll) {\n this.parent.notify(events.infinitePageQuery, query);\n } else {\n query.page(gObj.pageSettings.currentPage, gObj.pageSettings.pageSize);\n }\n }\n\n return query;\n };\n\n Data.prototype.groupQuery = function (query) {\n var gObj = this.parent;\n\n if (gObj.allowGrouping && gObj.groupSettings.columns.length) {\n var columns = gObj.groupSettings.columns;\n\n for (var i = 0, len = columns.length; i < len; i++) {\n var column = this.getColumnByField(columns[i]);\n\n if (!column) {\n this.parent.log('initial_action', {\n moduleName: 'group',\n columnName: columns[i]\n });\n }\n\n var isGrpFmt = column.enableGroupByFormat;\n var format = column.format;\n\n if (isGrpFmt) {\n query.group(columns[i], this.formatGroupColumn.bind(this), format);\n } else {\n query.group(columns[i], null);\n }\n }\n }\n\n return query;\n };\n\n Data.prototype.sortQuery = function (query) {\n var gObj = this.parent;\n\n if ((gObj.allowSorting || gObj.allowGrouping) && gObj.sortSettings.columns.length) {\n var columns = gObj.sortSettings.columns;\n var sortGrp = [];\n\n for (var i = columns.length - 1; i > -1; i--) {\n var col = this.getColumnByField(columns[i].field);\n\n if (col) {\n col.setSortDirection(columns[i].direction);\n } else {\n this.parent.log('initial_action', {\n moduleName: 'sort',\n columnName: columns[i].field\n });\n return query;\n }\n\n var fn = columns[i].direction;\n\n if (col.sortComparer) {\n this.parent.log('grid_sort_comparer');\n fn = !this.isRemote() ? col.sortComparer.bind(col) : columns[i].direction;\n }\n\n if (gObj.groupSettings.columns.indexOf(columns[i].field) === -1) {\n query.sortBy(col.field, fn);\n } else {\n sortGrp.push({\n direction: fn,\n field: col.field\n });\n }\n }\n\n for (var i = 0, len = sortGrp.length; i < len; i++) {\n query.sortBy(sortGrp[i].field, sortGrp[i].direction);\n }\n }\n\n return query;\n };\n\n Data.prototype.searchQuery = function (query) {\n var sSettings = this.parent.searchSettings;\n var fields = sSettings.fields.length ? sSettings.fields : this.getSearchColumnFieldNames();\n var predicateList = [];\n var needForeignKeySearch = false;\n\n if (this.parent.searchSettings.key.length) {\n needForeignKeySearch = this.parent.getForeignKeyColumns().some(function (col) {\n return fields.indexOf(col.field) > -1;\n });\n\n if (needForeignKeySearch && !(this.dataManager.adaptor.getModulename && this.dataManager.adaptor.getModulename() === 'ODataV4Adaptor')) {\n for (var i = 0; i < fields.length; i++) {\n var column = this.getColumnByField(fields[i]);\n\n if (column.isForeignColumn()) {\n predicateList = this.fGeneratePredicate(column, predicateList);\n } else {\n predicateList.push(new Predicate(column.field, sSettings.operator, sSettings.key, sSettings.ignoreCase, sSettings.ignoreAccent));\n }\n }\n\n query.where(Predicate.or(predicateList));\n } else {\n query.search(sSettings.key, fields, sSettings.operator, sSettings.ignoreCase, sSettings.ignoreAccent);\n }\n }\n\n return query;\n };\n\n Data.prototype.filterQuery = function (query, column, skipFoerign) {\n var gObj = this.parent;\n var predicateList = [];\n var fPredicate = {};\n var actualFilter = [];\n var foreignColumn = this.parent.getForeignKeyColumns();\n\n if (gObj.allowFiltering && gObj.filterSettings.columns.length) {\n var columns = column ? column : gObj.filterSettings.columns;\n var colType = {};\n\n for (var _i = 0, _a = gObj.getColumns(); _i < _a.length; _i++) {\n var col = _a[_i];\n colType[col.field] = col.filter.type ? col.filter.type : gObj.filterSettings.type;\n }\n\n var checkBoxCols = [];\n var defaultFltrCols = [];\n\n for (var _b = 0, columns_1 = columns; _b < columns_1.length; _b++) {\n var col = columns_1[_b];\n\n if (colType[col.field] === 'CheckBox' || colType[col.field] === 'Excel') {\n checkBoxCols.push(col);\n } else {\n defaultFltrCols.push(col);\n }\n }\n\n if (checkBoxCols.length) {\n var excelPredicate = CheckBoxFilterBase.getPredicate(checkBoxCols);\n\n for (var _c = 0, _d = Object.keys(excelPredicate); _c < _d.length; _c++) {\n var prop = _d[_c];\n var col = void 0;\n\n if (this.parent.getColumnByField(prop).isForeignColumn()) {\n col = getColumnByForeignKeyValue(prop, foreignColumn);\n }\n\n if (!col) {\n this.parent.log('initial_action', {\n moduleName: 'filter',\n columnName: prop\n });\n }\n\n if (col && !skipFoerign) {\n predicateList = this.fGeneratePredicate(col, predicateList);\n actualFilter.push(col);\n } else {\n predicateList.push(excelPredicate[prop]);\n }\n }\n }\n\n if (defaultFltrCols.length) {\n for (var _e = 0, defaultFltrCols_1 = defaultFltrCols; _e < defaultFltrCols_1.length; _e++) {\n var col = defaultFltrCols_1[_e];\n col.uid = col.uid || this.parent.grabColumnByFieldFromAllCols(col.field).uid;\n var column_1 = this.parent.grabColumnByUidFromAllCols(col.uid);\n\n if (!column_1) {\n this.parent.log('initial_action', {\n moduleName: 'filter',\n columnName: col.field\n });\n }\n\n var sType = column_1.type;\n\n if (column_1.isForeignColumn() && getColumnByForeignKeyValue(col.field, foreignColumn) && !skipFoerign) {\n actualFilter.push(col);\n predicateList = this.fGeneratePredicate(column_1, predicateList);\n } else {\n if (sType !== 'date' && sType !== 'datetime') {\n predicateList.push(new Predicate(col.field, col.operator, col.value, !col.matchCase, this.parent.filterSettings.ignoreAccent));\n } else {\n predicateList.push(getDatePredicate(col, sType));\n }\n }\n }\n }\n\n if (predicateList.length) {\n query.where(Predicate.and(predicateList));\n } else {\n this.parent.notify(events.showEmptyGrid, {});\n }\n }\n\n return query;\n };\n\n Data.prototype.fGeneratePredicate = function (col, predicateList) {\n var fPredicate = {};\n\n if (col) {\n this.parent.notify(events.generateQuery, {\n predicate: fPredicate,\n column: col\n });\n\n if (fPredicate.predicate.predicates.length) {\n predicateList.push(fPredicate.predicate);\n }\n }\n\n return predicateList;\n };\n /**\n * The function is used to get dataManager promise by executing given Query.\n * @param {Query} query - Defines the query which will execute along with data processing.\n * @return {Promise
\r\n// \t);\r\n// };\r\n\r\nconst Proposal = ({ proposal, id }) => {\r\n\tconst proposalHeaderId = `header-${id}`;\r\n\tconst collapseContainerId = `collapseible-${id}`;\r\n\t// const proposalsGroupContainerId = `proposal-group-container-${id}`;\r\n\r\n\treturn (\r\n\t\t