Blazor') === 0) ?\n this.isStringTemplate : true;\n for (const item of templateFn({}, this, prop, templateProps, isString)) {\n fromElements.push(item);\n }\n append([].slice.call(fromElements), toElement);\n }\n }\n /*\n * @returns {void}\n * @hidden\n * @value\n */\n sanitizeHelper(value) {\n if (this.enableHtmlSanitizer) {\n const dialogItem = SanitizeHtmlHelper.beforeSanitize();\n const beforeEvent = {\n cancel: false,\n helper: null\n };\n extend(dialogItem, dialogItem, beforeEvent);\n this.trigger('beforeSanitizeHtml', dialogItem);\n if (dialogItem.cancel && !isNullOrUndefined(dialogItem.helper)) {\n value = dialogItem.helper(value);\n }\n else if (!dialogItem.cancel) {\n value = SanitizeHtmlHelper.serializeValue(dialogItem, value);\n }\n }\n return value;\n }\n setMaxHeight() {\n if (!this.allowMaxHeight) {\n return;\n }\n const display = this.element.style.display;\n this.element.style.display = 'none';\n this.element.style.maxHeight = (!isNullOrUndefined(this.target)) && (this.targetEle.offsetHeight < window.innerHeight) ?\n (this.targetEle.offsetHeight - 20) + 'px' : (window.innerHeight - 20) + 'px';\n this.element.style.display = display;\n if (Browser.isIE && this.height === 'auto' && !isNullOrUndefined(this.contentEle)\n && this.element.offsetHeight < this.contentEle.offsetHeight) {\n this.element.style.height = 'inherit';\n }\n }\n setEnableRTL() {\n if (!this.isBlazorServerRender()) {\n // eslint-disable-next-line\n this.enableRtl ? addClass([this.element], RTL) : removeClass([this.element], RTL);\n }\n if (!isNullOrUndefined(this.element.querySelector('.e-resize-handle'))) {\n removeResize();\n this.setResize();\n }\n }\n setTargetContent() {\n if (isNullOrUndefined(this.content) || this.content === '') {\n const isContent = this.element.innerHTML.replace(/\\s|<(\\/?|\\/?)(!--!--)>/g, '') !== '';\n if (this.element.children.length > 0 || isContent) {\n this.innerContentElement = document.createDocumentFragment();\n [].slice.call(this.element.childNodes).forEach((el) => {\n if (el.nodeType !== 8) {\n this.innerContentElement.appendChild(el);\n }\n });\n }\n }\n }\n setHeader() {\n if (this.headerEle) {\n this.headerEle.innerHTML = '';\n }\n else {\n this.headerEle = this.createElement('div', { id: this.element.id + '_title', className: DLG_HEADER });\n }\n this.createHeaderContent();\n this.headerContent.appendChild(this.headerEle);\n this.setTemplate(this.header, this.headerEle, 'header');\n attributes(this.element, { 'aria-labelledby': this.element.id + '_title' });\n this.element.insertBefore(this.headerContent, this.element.children[0]);\n }\n setFooterTemplate() {\n if (this.ftrTemplateContent) {\n this.ftrTemplateContent.innerHTML = '';\n }\n else {\n this.ftrTemplateContent = this.createElement('div', {\n className: DLG_FOOTER_CONTENT\n });\n }\n if (this.footerTemplate !== '' && !isNullOrUndefined(this.footerTemplate)) {\n this.setTemplate(this.footerTemplate, this.ftrTemplateContent, 'footerTemplate');\n }\n else {\n this.ftrTemplateContent.innerHTML = this.buttonContent.join('');\n }\n this.element.appendChild(this.ftrTemplateContent);\n }\n createHeaderContent() {\n if (isNullOrUndefined(this.headerContent)) {\n this.headerContent = this.createElement('div', { id: this.element.id + '_dialog-header', className: DLG_HEADER_CONTENT });\n }\n }\n renderCloseIcon() {\n this.closeIcon = this.createElement('button', { className: DLG_CLOSE_ICON_BTN, attrs: { type: 'button' } });\n this.closeIconBtnObj = new Button({ cssClass: 'e-flat', iconCss: DLG_CLOSE_ICON + ' ' + ICON });\n this.closeIconTitle();\n if (!isNullOrUndefined(this.headerContent)) {\n prepend([this.closeIcon], this.headerContent);\n }\n else {\n this.createHeaderContent();\n prepend([this.closeIcon], this.headerContent);\n this.element.insertBefore(this.headerContent, this.element.children[0]);\n }\n this.closeIconBtnObj.appendTo(this.closeIcon);\n }\n closeIconTitle() {\n this.l10n.setLocale(this.locale);\n const closeIconTitle = this.l10n.getConstant('close');\n this.closeIcon.setAttribute('title', closeIconTitle);\n this.closeIcon.setAttribute('aria-label', closeIconTitle);\n }\n setCSSClass(oldCSSClass) {\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n }\n if (oldCSSClass) {\n removeClass([this.element], oldCSSClass.split(' '));\n }\n }\n setIsModal() {\n this.dlgContainer = this.createElement('div', { className: DLG_CONTAINER });\n this.element.classList.remove(DLG_SHOW);\n this.element.parentNode.insertBefore(this.dlgContainer, this.element);\n this.dlgContainer.appendChild(this.element);\n addClass([this.element], MODAL_DLG);\n this.dlgOverlay = this.createElement('div', { className: DLG_OVERLAY });\n this.dlgOverlay.style.zIndex = (this.zIndex - 1).toString();\n this.dlgContainer.appendChild(this.dlgOverlay);\n }\n getValidFocusNode(items) {\n let node;\n for (let u = 0; u < items.length; u++) {\n node = items[u];\n if ((node.clientHeight > 0 || (node.tagName.toLowerCase() === 'a' && node.hasAttribute('href'))) && node.tabIndex > -1 &&\n !node.disabled && !this.disableElement(node, '[disabled],[aria-disabled=\"true\"],[type=\"hidden\"]')) {\n return node;\n }\n else {\n node = null;\n }\n }\n return node;\n }\n focusableElements(content) {\n if (!isNullOrUndefined(content)) {\n const value = 'input,select,textarea,button,a,[contenteditable=\"true\"],[tabindex]';\n const items = content.querySelectorAll(value);\n return this.getValidFocusNode(items);\n }\n return null;\n }\n getAutoFocusNode(container) {\n let node = container.querySelector('.' + DLG_CLOSE_ICON_BTN);\n const value = '[autofocus]';\n const items = container.querySelectorAll(value);\n let validNode = this.getValidFocusNode(items);\n if (isBlazor()) {\n this.primaryButtonEle = this.element.getElementsByClassName('e-primary')[0];\n }\n if (!isNullOrUndefined(validNode)) {\n node = validNode;\n }\n else {\n validNode = this.focusableElements(this.contentEle);\n if (!isNullOrUndefined(validNode)) {\n return node = validNode;\n }\n else if (!isNullOrUndefined(this.primaryButtonEle)) {\n return this.element.querySelector('.' + DLG_PRIMARY_BUTTON);\n }\n }\n return node;\n }\n disableElement(element, t) {\n // eslint-disable-next-line\n const elementMatch = element ? element.matches || element.webkitMatchesSelector || element.msGetRegionContent : null;\n if (elementMatch) {\n for (; element; element = element.parentNode) {\n if (element instanceof Element && elementMatch.call(element, t)) {\n /* istanbul ignore next */\n return element;\n }\n }\n }\n return null;\n }\n focusContent() {\n const element = this.getAutoFocusNode(this.element);\n const node = !isNullOrUndefined(element) ? element : this.element;\n const userAgent = Browser.userAgent;\n if (userAgent.indexOf('MSIE ') > 0 || userAgent.indexOf('Trident/') > 0) {\n this.element.focus();\n }\n node.focus();\n this.bindEvent(this.element);\n }\n bindEvent(element) {\n EventHandler.add(element, 'keydown', this.keyDown, this);\n }\n unBindEvent(element) {\n EventHandler.remove(element, 'keydown', this.keyDown);\n }\n updateSanitizeContent() {\n if (!this.isBlazorServerRender()) {\n this.contentEle.innerHTML = this.sanitizeHelper(this.content);\n }\n }\n isBlazorServerRender() {\n return isBlazor() && this.isServerRendered;\n }\n /**\n * Module required function\n *\n * @returns {void}\n * @private\n */\n getModuleName() {\n return 'dialog';\n }\n /**\n * Called internally if any of the property value changed\n *\n * @param {DialogModel} newProp - specifies the new property\n * @param {DialogModel} oldProp - specifies the old property\n * @private\n * @returns {void}\n */\n onPropertyChanged(newProp, oldProp) {\n if (!this.element.classList.contains(ROOT)) {\n return;\n }\n for (const prop of Object.keys(newProp)) {\n switch (prop) {\n case 'content':\n if (!isNullOrUndefined(this.content) && this.content !== '') {\n if (this.isBlazorServerRender()) {\n this.contentEle = this.element.querySelector('.e-dlg-content');\n }\n if (!isNullOrUndefined(this.contentEle) && this.contentEle.getAttribute('role') !== 'dialog') {\n if (!this.isBlazorServerRender()) {\n this.contentEle.innerHTML = '';\n }\n // eslint-disable-next-line\n if (typeof (this.content) === 'function') {\n this.clearTemplate(['content']);\n detach(this.contentEle);\n this.contentEle = null;\n this.setContent();\n }\n else {\n typeof (this.content) === 'string' ? (this.isBlazorServerRender() && (this.contentEle.innerText === '')) ?\n this.contentEle.insertAdjacentHTML('beforeend', this.sanitizeHelper(this.content)) :\n this.updateSanitizeContent() : this.contentEle.appendChild(this.content);\n }\n this.setMaxHeight();\n }\n else {\n if (!this.isBlazorServerRender() ||\n isNullOrUndefined(this.element.querySelector('.e-dlg-content'))) {\n this.setContent();\n }\n }\n }\n else if (!isNullOrUndefined(this.contentEle)) {\n detach(this.contentEle);\n this.contentEle = null;\n }\n break;\n case 'header':\n if (this.header === '' || isNullOrUndefined(this.header)) {\n if (this.headerEle) {\n detach(this.headerEle);\n this.headerEle = null;\n }\n }\n else {\n if (!this.isBlazorServerRender() ||\n isNullOrUndefined(this.element.querySelector('.e-dlg-header-content'))) {\n this.setHeader();\n }\n }\n break;\n case 'footerTemplate':\n if (this.footerTemplate === '' || isNullOrUndefined(this.footerTemplate)) {\n if (!this.ftrTemplateContent) {\n return;\n }\n detach(this.ftrTemplateContent);\n this.ftrTemplateContent = null;\n this.buttons = [{}];\n }\n else {\n if (!this.isBlazorServerRender() ||\n isNullOrUndefined(this.element.querySelector('.e-footer-content'))) {\n this.setFooterTemplate();\n }\n this.buttons = [{}];\n }\n break;\n case 'showCloseIcon':\n if (this.element.getElementsByClassName(DLG_CLOSE_ICON).length > 0) {\n if (!this.showCloseIcon && (this.header === '' || isNullOrUndefined(this.header))) {\n detach(this.headerContent);\n this.headerContent = null;\n }\n else if (!this.showCloseIcon) {\n detach(this.closeIcon);\n }\n else {\n if (this.isBlazorServerRender()) {\n this.wireEvents();\n }\n }\n }\n else {\n if (!this.isBlazorServerRender()) {\n this.renderCloseIcon();\n }\n this.wireEvents();\n }\n break;\n case 'locale':\n if (this.showCloseIcon) {\n this.closeIconTitle();\n }\n break;\n case 'visible':\n // eslint-disable-next-line\n this.visible ? this.show() : this.hide();\n break;\n case 'isModal':\n this.updateIsModal();\n break;\n case 'height':\n setStyleAttribute(this.element, { 'height': formatUnit(newProp.height) });\n break;\n case 'width':\n setStyleAttribute(this.element, { 'width': formatUnit(newProp.width) });\n break;\n case 'zIndex':\n this.popupObj.zIndex = this.zIndex;\n if (this.isModal) {\n this.setOverlayZindex(this.zIndex);\n }\n if (this.element.style.zIndex !== this.zIndex.toString()) {\n this.calculatezIndex = false;\n }\n break;\n case 'cssClass':\n this.setCSSClass(oldProp.cssClass);\n break;\n case 'buttons': {\n const buttonCount = this.buttons.length;\n if (!isNullOrUndefined(this.ftrTemplateContent) && !this.isBlazorServerRender()) {\n detach(this.ftrTemplateContent);\n this.ftrTemplateContent = null;\n }\n for (let i = 0; i < buttonCount; i++) {\n if (!isNullOrUndefined(this.buttons[i].buttonModel)) {\n this.footerTemplate = '';\n this.setButton();\n }\n }\n break;\n }\n case 'allowDragging':\n if (this.allowDragging && (!isNullOrUndefined(this.headerContent))) {\n this.setAllowDragging();\n }\n else {\n this.dragObj.destroy();\n }\n break;\n case 'target':\n this.setTarget(newProp.target);\n break;\n case 'position':\n this.checkPositionData();\n if (this.isModal) {\n const positionX = isNullOrUndefined(oldProp.position.X) ? this.position.X : oldProp.position.X;\n const positionY = isNullOrUndefined(oldProp.position.Y) ? this.position.Y : oldProp.position.Y;\n if (this.dlgContainer.classList.contains('e-dlg-' + positionX + '-' + positionY)) {\n this.dlgContainer.classList.remove('e-dlg-' + positionX + '-' + positionY);\n }\n }\n this.positionChange();\n break;\n case 'enableRtl':\n this.setEnableRTL();\n break;\n case 'enableResize':\n this.setResize();\n break;\n }\n }\n }\n setTarget(target) {\n this.popupObj.relateTo = target;\n this.target = target;\n this.targetEle = ((typeof this.target) === 'string') ?\n document.querySelector(this.target) : this.target;\n if (this.dragObj) {\n this.dragObj.dragArea = this.targetEle;\n }\n this.setMaxHeight();\n if (this.isModal) {\n this.updateIsModal();\n }\n if (this.enableResize) {\n this.setResize();\n }\n }\n updateIsModal() {\n this.element.setAttribute('aria-modal', this.isModal ? 'true' : 'false');\n if (this.isModal) {\n this.setIsModal();\n this.element.style.top = '0px';\n this.element.style.left = '0px';\n if (!isNullOrUndefined(this.targetEle)) {\n this.targetEle.appendChild(this.dlgContainer);\n }\n }\n else {\n removeClass([this.element], MODAL_DLG);\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n detach(this.dlgOverlay);\n while (this.dlgContainer.firstChild) {\n this.dlgContainer.parentElement.insertBefore(this.dlgContainer.firstChild, this.dlgContainer);\n }\n this.dlgContainer.parentElement.removeChild(this.dlgContainer);\n }\n if (this.visible) {\n this.show();\n }\n this.positionChange();\n if (this.isModal && this.dlgOverlay) {\n EventHandler.add(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler, this);\n }\n }\n setzIndex(zIndexElement, setPopupZindex) {\n const prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.zIndex = getZindexPartial(zIndexElement);\n this.isProtectedOnChange = prevOnChange;\n if (setPopupZindex) {\n this.popupObj.zIndex = this.zIndex;\n }\n }\n windowResizeHandler() {\n setMaxWidth(this.targetEle.clientWidth);\n setMaxHeight(this.targetEle.clientHeight);\n this.setMaxHeight();\n }\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {void}\n * @private\n */\n getPersistData() {\n return this.addOnPersist([]);\n }\n /**\n * To destroy the widget\n *\n * @returns {void}\n */\n destroy() {\n if (this.isDestroyed) {\n return;\n }\n const classArray = [RTL, MODAL_DLG, DLG_RESIZABLE, DLG_RESTRICT_LEFT_VALUE, FULLSCREEN, DEVICE];\n const attrs = ['role', 'aria-modal', 'aria-labelledby', 'aria-describedby', 'aria-grabbed', 'tabindex', 'style'];\n removeClass([this.targetEle], [DLG_TARGET, SCROLL_DISABLED]);\n if (!isNullOrUndefined(this.element) && this.element.classList.contains(FULLSCREEN)) {\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n }\n if (this.isModal) {\n removeClass([(!isNullOrUndefined(this.targetEle) ? this.targetEle : document.body)], SCROLL_DISABLED);\n }\n this.unWireEvents();\n if (!isNullOrUndefined(this.btnObj)) {\n for (let i = 0; i < this.btnObj.length; i++) {\n this.btnObj[i].destroy();\n }\n }\n if (!isNullOrUndefined(this.dragObj)) {\n this.dragObj.destroy();\n }\n if (!isNullOrUndefined(this.popupObj.element) && this.popupObj.element.classList.contains(POPUP_ROOT)) {\n this.popupObj.destroy();\n }\n removeClass([this.element], classArray);\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n removeClass([this.element], this.cssClass.split(' '));\n }\n if (!isNullOrUndefined(this.refElement) && !isNullOrUndefined(this.refElement.parentElement)) {\n this.refElement.parentElement.insertBefore((this.isModal ? this.dlgContainer : this.element), this.refElement);\n detach(this.refElement);\n this.refElement = undefined;\n }\n if (this.isModal && !this.isBlazorServerRender()) {\n detach(this.dlgOverlay);\n this.dlgContainer.parentNode.insertBefore(this.element, this.dlgContainer);\n detach(this.dlgContainer);\n }\n if (!this.isBlazorServerRender()) {\n this.element.innerHTML = this.clonedEle.innerHTML;\n }\n if (this.isBlazorServerRender()) {\n if (!isNullOrUndefined(this.element.children)) {\n for (let i = 0; i <= this.element.children.length; i++) {\n i = i - i;\n detach(this.element.children[i]);\n }\n }\n }\n for (let i = 0; i < attrs.length; i++) {\n this.element.removeAttribute(attrs[i]);\n }\n if (!this.isBlazorServerRender()) {\n super.destroy();\n }\n else {\n this.isDestroyed = true;\n }\n // eslint-disable-next-line\n if (this.isReact) {\n this.clearTemplate();\n }\n }\n wireWindowResizeEvent() {\n window.addEventListener('resize', this.windowResizeHandler.bind(this));\n }\n unWireWindowResizeEvent() {\n window.removeEventListener('resize', this.windowResizeHandler.bind(this));\n }\n /**\n * Binding event to the element while widget creation\n *\n * @returns {void}\n * @hidden\n */\n wireEvents() {\n if (this.isBlazorServerRender() && this.showCloseIcon) {\n this.closeIcon = this.element.getElementsByClassName('e-dlg-closeicon-btn')[0];\n }\n if (this.showCloseIcon) {\n EventHandler.add(this.closeIcon, 'click', this.closeIconClickEventHandler, this);\n }\n if (this.isModal && this.dlgOverlay) {\n EventHandler.add(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler, this);\n }\n }\n /**\n * Unbinding event to the element while widget destroy\n *\n * @returns {void}\n * @hidden\n */\n unWireEvents() {\n if (this.showCloseIcon) {\n EventHandler.remove(this.closeIcon, 'click', this.closeIconClickEventHandler);\n }\n if (this.isModal) {\n EventHandler.remove(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler);\n }\n if (this.buttons.length > 0 && !isNullOrUndefined(this.buttons[0].buttonModel) && this.footerTemplate === '') {\n for (let i = 0; i < this.buttons.length; i++) {\n if (typeof (this.buttons[i].click) === 'function') {\n EventHandler.remove(this.ftrTemplateContent.children[i], 'click', this.buttons[i].click);\n }\n }\n }\n }\n /**\n * Refreshes the dialog's position when the user changes its header and footer height/width dynamically.\n *\n * @returns {void}\n */\n refreshPosition() {\n this.popupObj.refreshPosition();\n }\n /**\n * Opens the dialog if it is in hidden state.\n * To open the dialog with full screen width, set the parameter to true.\n *\n * @param { boolean } isFullScreen - Enable the fullScreen Dialog.\n * @returns {void}\n */\n show(isFullScreen) {\n if (!this.element.classList.contains(ROOT)) {\n return;\n }\n if (!this.element.classList.contains(DLG_SHOW) || (!isNullOrUndefined(isFullScreen))) {\n if (!isNullOrUndefined(isFullScreen)) {\n this.fullScreen(isFullScreen);\n }\n const eventArgs = 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, (beforeOpenArgs) => {\n if (!beforeOpenArgs.cancel) {\n if (this.element.style.maxHeight !== eventArgs.maxHeight) {\n this.allowMaxHeight = false;\n this.element.style.maxHeight = eventArgs.maxHeight;\n }\n this.storeActiveElement = document.activeElement;\n this.element.tabIndex = -1;\n if (this.isModal && (!isNullOrUndefined(this.dlgOverlay))) {\n this.dlgOverlay.style.display = 'block';\n this.dlgContainer.style.display = 'flex';\n removeClass([this.dlgOverlay], 'e-fade');\n if (!isNullOrUndefined(this.targetEle)) {\n if (this.targetEle === document.body) {\n this.dlgContainer.style.position = 'fixed';\n }\n else {\n this.dlgContainer.style.position = 'absolute';\n }\n this.dlgOverlay.style.position = 'absolute';\n this.element.style.position = 'relative';\n addClass([this.targetEle], [DLG_TARGET, SCROLL_DISABLED]);\n }\n else {\n addClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n }\n }\n // eslint-disable-next-line\n const openAnimation = {\n name: this.animationSettings.effect + 'In',\n duration: this.animationSettings.duration,\n delay: this.animationSettings.delay\n };\n const zIndexElement = (this.isModal) ? this.element.parentElement : this.element;\n if (this.calculatezIndex) {\n this.setzIndex(zIndexElement, true);\n setStyleAttribute(this.element, { 'zIndex': this.zIndex });\n if (this.isModal) {\n this.setOverlayZindex(this.zIndex);\n }\n }\n // eslint-disable-next-line\n this.animationSettings.effect === 'None' ? this.popupObj.show() : this.popupObj.show(openAnimation);\n this.dialogOpen = true;\n const prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.visible = true;\n this.preventVisibility = true;\n this.isProtectedOnChange = prevOnChange;\n }\n });\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n }\n /**\n * Closes the dialog if it is in visible state.\n *\n * @param { Event } event - specifies the event\n * @returns {void}\n */\n hide(event) {\n if (!this.element.classList.contains(ROOT)) {\n return;\n }\n if (this.preventVisibility) {\n const eventArgs = isBlazor() ? {\n cancel: false,\n isInteracted: event ? true : false,\n element: this.element,\n container: this.isModal ? this.dlgContainer : this.element,\n event: event\n } : {\n cancel: false,\n isInteracted: event ? true : false,\n element: this.element,\n target: this.target,\n container: this.isModal ? this.dlgContainer : this.element,\n event: event,\n closedBy: this.dlgClosedBy\n };\n this.closeArgs = eventArgs;\n this.trigger('beforeClose', eventArgs, (beforeCloseArgs) => {\n if (!beforeCloseArgs.cancel) {\n if (this.isModal) {\n if (!isNullOrUndefined(this.targetEle)) {\n removeClass([this.targetEle], [DLG_TARGET, SCROLL_DISABLED]);\n }\n if (document.body.classList.contains(DLG_TARGET) &&\n document.body.classList.contains(SCROLL_DISABLED)) {\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n }\n }\n // eslint-disable-next-line\n const closeAnimation = {\n name: this.animationSettings.effect + 'Out',\n duration: this.animationSettings.duration,\n delay: this.animationSettings.delay\n };\n // eslint-disable-next-line\n this.animationSettings.effect === 'None' ? this.popupObj.hide() : this.popupObj.hide(closeAnimation);\n this.dialogOpen = false;\n const prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.visible = false;\n this.preventVisibility = false;\n this.isProtectedOnChange = prevOnChange;\n }\n this.dlgClosedBy = DLG_USER_ACTION_CLOSED;\n });\n }\n }\n // eslint-disable-next-line\n /**\n * Specifies to view the Full screen Dialog.\n *\n * @returns {void}\n * @private\n */\n fullScreen(args) {\n /* eslint-disable */\n const top = this.element.offsetTop;\n const left = this.element.offsetLeft;\n /* eslint-enable */\n if (args) {\n addClass([this.element], FULLSCREEN);\n const display = this.element.style.display;\n this.element.style.display = 'none';\n this.element.style.maxHeight = (!isNullOrUndefined(this.target)) ?\n (this.targetEle.offsetHeight) + 'px' : (window.innerHeight) + 'px';\n this.element.style.display = display;\n addClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n if (this.allowDragging && !isNullOrUndefined(this.dragObj)) {\n this.dragObj.destroy();\n }\n }\n else {\n removeClass([this.element], FULLSCREEN);\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n if (this.allowDragging && (!isNullOrUndefined(this.headerContent))) {\n this.setAllowDragging();\n }\n }\n return args;\n }\n /**\n * Returns the dialog button instances.\n * Based on that, you can dynamically change the button states.\n *\n * @param { number } index - Index of the button.\n * @returns {Button} - returns the button element\n */\n getButtons(index) {\n if (!isNullOrUndefined(index)) {\n return this.btnObj[index];\n }\n return this.btnObj;\n }\n};\n__decorate$1([\n Property('')\n], Dialog.prototype, \"content\", void 0);\n__decorate$1([\n Property(true)\n], Dialog.prototype, \"enableHtmlSanitizer\", void 0);\n__decorate$1([\n Property(false)\n], Dialog.prototype, \"showCloseIcon\", void 0);\n__decorate$1([\n Property(false)\n], Dialog.prototype, \"isModal\", void 0);\n__decorate$1([\n Property('')\n], Dialog.prototype, \"header\", void 0);\n__decorate$1([\n Property(true)\n], Dialog.prototype, \"visible\", void 0);\n__decorate$1([\n Property(false)\n], Dialog.prototype, \"enableResize\", void 0);\n__decorate$1([\n Property(['South-East'])\n], Dialog.prototype, \"resizeHandles\", void 0);\n__decorate$1([\n Property('auto')\n], Dialog.prototype, \"height\", void 0);\n__decorate$1([\n Property('')\n], Dialog.prototype, \"minHeight\", void 0);\n__decorate$1([\n Property('100%')\n], Dialog.prototype, \"width\", void 0);\n__decorate$1([\n Property('')\n], Dialog.prototype, \"cssClass\", void 0);\n__decorate$1([\n Property(1000)\n], Dialog.prototype, \"zIndex\", void 0);\n__decorate$1([\n Property(null)\n], Dialog.prototype, \"target\", void 0);\n__decorate$1([\n Property('')\n], Dialog.prototype, \"footerTemplate\", void 0);\n__decorate$1([\n Property(false)\n], Dialog.prototype, \"allowDragging\", void 0);\n__decorate$1([\n Collection([{}], ButtonProps)\n], Dialog.prototype, \"buttons\", void 0);\n__decorate$1([\n Property(true)\n], Dialog.prototype, \"closeOnEscape\", void 0);\n__decorate$1([\n Complex({}, AnimationSettings)\n], Dialog.prototype, \"animationSettings\", void 0);\n__decorate$1([\n Complex({ X: 'center', Y: 'center' }, PositionData)\n], Dialog.prototype, \"position\", void 0);\n__decorate$1([\n Event()\n], Dialog.prototype, \"created\", void 0);\n__decorate$1([\n Event()\n], Dialog.prototype, \"open\", void 0);\n__decorate$1([\n Event()\n], Dialog.prototype, \"beforeSanitizeHtml\", void 0);\n__decorate$1([\n Event()\n], Dialog.prototype, \"beforeOpen\", void 0);\n__decorate$1([\n Event()\n], Dialog.prototype, \"close\", void 0);\n__decorate$1([\n Event()\n], Dialog.prototype, \"beforeClose\", void 0);\n__decorate$1([\n Event()\n], Dialog.prototype, \"dragStart\", void 0);\n__decorate$1([\n Event()\n], Dialog.prototype, \"dragStop\", void 0);\n__decorate$1([\n Event()\n], Dialog.prototype, \"drag\", void 0);\n__decorate$1([\n Event()\n], Dialog.prototype, \"overlayClick\", void 0);\n__decorate$1([\n Event()\n], Dialog.prototype, \"resizeStart\", void 0);\n__decorate$1([\n Event()\n], Dialog.prototype, \"resizing\", void 0);\n__decorate$1([\n Event()\n], Dialog.prototype, \"resizeStop\", void 0);\n__decorate$1([\n Event()\n], Dialog.prototype, \"destroyed\", void 0);\nDialog = __decorate$1([\n NotifyPropertyChanges\n], Dialog);\n/**\n * Base for creating Alert and Confirmation Dialog through util method.\n */\n// eslint-disable-next-line\nvar DialogUtility;\n(function (DialogUtility) {\n /**\n * An alert dialog box is used to display warning like messages to the users.\n * ```\n * Eg : DialogUtility.alert('Alert message');\n *\n * ```\n */\n /* istanbul ignore next */\n /**\n *\n * @param {AlertDialogArgs} args - specifies the string\n * @returns {Dialog} - returns the dialog element.\n */\n function alert(args) {\n // eslint-disable-next-line\n const dialogElement = createElement('div', { 'className': DLG_UTIL_ALERT });\n document.body.appendChild(dialogElement);\n let alertDialogObj;\n const okButtonModel = [{\n buttonModel: { isPrimary: true, content: 'OK' },\n click: function () {\n this.hide();\n }\n }];\n if (typeof (args) === 'string') {\n alertDialogObj = createDialog({ content: args,\n position: { X: 'center', Y: 'top' },\n isModal: true, header: DLG_UTIL_DEFAULT_TITLE,\n buttons: okButtonModel }, dialogElement);\n }\n else {\n alertDialogObj = createDialog(alertOptions(args), dialogElement);\n }\n alertDialogObj.close = () => {\n if (args && args.close) {\n args.close.apply(alertDialogObj);\n }\n alertDialogObj.destroy();\n if (alertDialogObj.element.classList.contains('e-dlg-modal')) {\n alertDialogObj.element.parentElement.remove();\n alertDialogObj.target.classList.remove(DLG_UTIL_ROOT);\n }\n else {\n alertDialogObj.element.remove();\n }\n };\n return alertDialogObj;\n }\n DialogUtility.alert = alert;\n /**\n * A confirm dialog displays a specified message along with ‘OK’ and ‘Cancel’ button.\n * ```\n * Eg : DialogUtility.confirm('Confirm dialog message');\n *\n * ```\n */\n /* istanbul ignore next */\n /**\n *\n * @param {ConfirmDialogArgs} args - specifies the args\n * @returns {Dialog} - returns te element\n */\n function confirm(args) {\n // eslint-disable-next-line\n const dialogElement = createElement('div', { 'className': DLG_UTIL_CONFIRM });\n document.body.appendChild(dialogElement);\n let confirmDialogObj;\n const okCancelButtonModel = [{\n buttonModel: { isPrimary: true, content: 'OK' },\n click: function () {\n this.hide();\n }\n }, {\n buttonModel: { content: 'Cancel' },\n click: function () {\n this.hide();\n }\n }];\n if (typeof (args) === 'string') {\n confirmDialogObj = createDialog({ position: { X: 'center', Y: 'top' }, content: args, isModal: true,\n header: DLG_UTIL_DEFAULT_TITLE, buttons: okCancelButtonModel\n }, dialogElement);\n }\n else {\n confirmDialogObj = createDialog(confirmOptions(args), dialogElement);\n }\n confirmDialogObj.close = () => {\n if (args && args.close) {\n args.close.apply(confirmDialogObj);\n }\n confirmDialogObj.destroy();\n if (confirmDialogObj.element.classList.contains('e-dlg-modal')) {\n confirmDialogObj.element.parentElement.remove();\n confirmDialogObj.target.classList.remove(DLG_UTIL_ROOT);\n }\n else {\n confirmDialogObj.element.remove();\n }\n };\n return confirmDialogObj;\n }\n DialogUtility.confirm = confirm;\n // eslint-disable-next-line\n function createDialog(options, element) {\n const dialogObject = new Dialog(options);\n dialogObject.appendTo(element);\n return dialogObject;\n }\n // eslint-disable-next-line\n function alertOptions(option) {\n let options = {};\n options.buttons = [];\n options = formOptions(options, option);\n options = setAlertButtonModel(options, option);\n return options;\n }\n // eslint-disable-next-line\n function confirmOptions(option) {\n let options = {};\n options.buttons = [];\n options = formOptions(options, option);\n options = setConfirmButtonModel(options, option);\n return options;\n }\n // eslint-disable-next-line\n function formOptions(options, option) {\n options.header = !isNullOrUndefined(option.title) ? option.title : DLG_UTIL_DEFAULT_TITLE;\n options.content = !isNullOrUndefined(option.content) ? option.content : '';\n options.isModal = !isNullOrUndefined(option.isModal) ? option.isModal : true;\n options.showCloseIcon = !isNullOrUndefined(option.showCloseIcon) ? option.showCloseIcon : false;\n options.allowDragging = !isNullOrUndefined(option.isDraggable) ? option.isDraggable : false;\n options.closeOnEscape = !isNullOrUndefined(option.closeOnEscape) ? option.closeOnEscape : false;\n options.position = !isNullOrUndefined(option.position) ? option.position : { X: 'center', Y: 'top' };\n options.animationSettings = !isNullOrUndefined(option.animationSettings) ? option.animationSettings :\n { effect: 'Fade', duration: 400, delay: 0 };\n options.cssClass = !isNullOrUndefined(option.cssClass) ? option.cssClass : '';\n options.zIndex = !isNullOrUndefined(option.zIndex) ? option.zIndex : 1000;\n options.open = !isNullOrUndefined(option.open) ? option.open : null;\n return options;\n }\n // eslint-disable-next-line\n function setAlertButtonModel(options, option) {\n const alertButtonModel = [{\n buttonModel: { isPrimary: true, content: 'OK' },\n click: function () {\n this.hide();\n }\n }];\n if (!isNullOrUndefined(option.okButton)) {\n options.buttons[0] = formButtonModel(options.buttons[0], option.okButton, alertButtonModel[0]);\n }\n else {\n options.buttons = alertButtonModel;\n }\n return options;\n }\n // eslint-disable-next-line\n function setConfirmButtonModel(options, option) {\n const okButtonModel = {\n buttonModel: { isPrimary: true, content: 'OK' },\n click: function () {\n this.hide();\n }\n };\n const cancelButtonModel = {\n buttonModel: { content: 'Cancel' },\n click: function () {\n this.hide();\n }\n };\n if (!isNullOrUndefined(option.okButton)) {\n options.buttons[0] = formButtonModel(options.buttons[0], option.okButton, okButtonModel);\n }\n else {\n options.buttons[0] = okButtonModel;\n }\n if (!isNullOrUndefined(option.cancelButton)) {\n options.buttons[1] = formButtonModel(options.buttons[1], option.cancelButton, cancelButtonModel);\n }\n else {\n options.buttons[1] = cancelButtonModel;\n }\n return options;\n }\n // eslint-disable-next-line\n function formButtonModel(buttonModel, option, buttonPropModel) {\n const buttonProps = buttonPropModel;\n if (!isNullOrUndefined(option.text)) {\n buttonProps.buttonModel.content = option.text;\n }\n if (!isNullOrUndefined(option.icon)) {\n buttonProps.buttonModel.iconCss = option.icon;\n }\n if (!isNullOrUndefined(option.cssClass)) {\n buttonProps.buttonModel.cssClass = option.cssClass;\n }\n if (!isNullOrUndefined(option.click)) {\n buttonProps.click = option.click;\n }\n return buttonProps;\n }\n})(DialogUtility || (DialogUtility = {}));\n\n/**\n * Dialog Component\n */\n\nvar __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nconst TOUCHEND_HIDE_DELAY = 1500;\nconst TAPHOLD_THRESHOLD = 500;\nconst SHOW_POINTER_TIP_GAP = 0;\nconst HIDE_POINTER_TIP_GAP = 8;\nconst MOUSE_TRAIL_GAP = 2;\nconst POINTER_ADJUST = 2;\nconst ROOT$1 = 'e-tooltip';\nconst RTL$1 = 'e-rtl';\nconst DEVICE$1 = 'e-bigger';\nconst ICON$1 = 'e-icons';\nconst CLOSE = 'e-tooltip-close';\nconst TOOLTIP_WRAP = 'e-tooltip-wrap';\nconst CONTENT = 'e-tip-content';\nconst ARROW_TIP = 'e-arrow-tip';\nconst ARROW_TIP_OUTER = 'e-arrow-tip-outer';\nconst ARROW_TIP_INNER = 'e-arrow-tip-inner';\nconst TIP_BOTTOM = 'e-tip-bottom';\nconst TIP_TOP = 'e-tip-top';\nconst TIP_LEFT = 'e-tip-left';\nconst TIP_RIGHT = 'e-tip-right';\nconst POPUP_ROOT$1 = 'e-popup';\nconst POPUP_OPEN = 'e-popup-open';\nconst POPUP_CLOSE = 'e-popup-close';\nconst POPUP_LIB = 'e-lib';\nconst HIDE_POPUP = 'e-hidden';\nclass Animation$1 extends ChildProperty {\n}\n__decorate$2([\n Property({ effect: 'FadeIn', duration: 150, delay: 0 })\n], Animation$1.prototype, \"open\", void 0);\n__decorate$2([\n Property({ effect: 'FadeOut', duration: 150, delay: 0 })\n], Animation$1.prototype, \"close\", void 0);\n/**\n * Represents the Tooltip component that displays a piece of information about the target element on mouse hover.\n * ```html\n *
Show Tooltip
\n * ```\n * ```typescript\n * \n * ```\n */\nlet Tooltip = class Tooltip extends Component {\n /* eslint-enable */\n /**\n * Constructor for creating the Tooltip Component\n *\n * @param {TooltipModel} options - specifies the options for the constructor\n * @param {string| HTMLElement} element - specifies the element for the constructor\n *\n */\n constructor(options, element) {\n super(options, element);\n this.mouseMoveEvent = null;\n this.mouseMoveTarget = null;\n }\n initialize() {\n this.formatPosition();\n addClass([this.element], ROOT$1);\n }\n formatPosition() {\n if (this.position.indexOf('Top') === 0 || this.position.indexOf('Bottom') === 0) {\n [this.tooltipPositionY, this.tooltipPositionX] = this.position.split(/(?=[A-Z])/);\n }\n else {\n [this.tooltipPositionX, this.tooltipPositionY] = this.position.split(/(?=[A-Z])/);\n }\n }\n renderArrow() {\n this.setTipClass(this.position);\n const tip = this.createElement('div', { className: ARROW_TIP + ' ' + this.tipClass });\n tip.appendChild(this.createElement('div', { className: ARROW_TIP_OUTER + ' ' + this.tipClass }));\n tip.appendChild(this.createElement('div', { className: ARROW_TIP_INNER + ' ' + this.tipClass }));\n this.tooltipEle.appendChild(tip);\n }\n setTipClass(position) {\n if (position.indexOf('Right') === 0) {\n this.tipClass = TIP_LEFT;\n }\n else if (position.indexOf('Bottom') === 0) {\n this.tipClass = TIP_TOP;\n }\n else if (position.indexOf('Left') === 0) {\n this.tipClass = TIP_RIGHT;\n }\n else {\n this.tipClass = TIP_BOTTOM;\n }\n }\n renderPopup(target) {\n const elePos = this.mouseTrail ? { top: 0, left: 0 } : this.getTooltipPosition(target);\n this.tooltipEle.classList.remove(POPUP_LIB);\n this.popupObj = new Popup(this.tooltipEle, {\n height: this.height,\n width: this.width,\n position: { X: elePos.left, Y: elePos.top },\n enableRtl: this.enableRtl,\n open: this.openPopupHandler.bind(this),\n close: this.closePopupHandler.bind(this)\n });\n }\n getTooltipPosition(target) {\n this.tooltipEle.style.display = 'block';\n const pos = calculatePosition(target, this.tooltipPositionX, this.tooltipPositionY);\n const offsetPos = this.calculateTooltipOffset(this.position);\n const elePos = this.collisionFlipFit(target, pos.left + offsetPos.left, pos.top + offsetPos.top);\n this.tooltipEle.style.display = '';\n return elePos;\n }\n reposition(target) {\n const elePos = this.getTooltipPosition(target);\n this.popupObj.position = { X: elePos.left, Y: elePos.top };\n this.popupObj.dataBind();\n }\n openPopupHandler() {\n if (!this.mouseTrail && this.needTemplateReposition()) {\n this.reposition(this.findTarget());\n }\n this.trigger('afterOpen', this.tooltipEventArgs);\n }\n closePopupHandler() {\n this.clearTemplate(['content']);\n this.clear();\n this.trigger('afterClose', this.tooltipEventArgs);\n }\n calculateTooltipOffset(position) {\n const pos = { top: 0, left: 0 };\n const tooltipEleWidth = this.tooltipEle.offsetWidth;\n const tooltipEleHeight = this.tooltipEle.offsetHeight;\n const arrowEle = this.tooltipEle.querySelector('.' + ARROW_TIP);\n const tipWidth = arrowEle ? arrowEle.offsetWidth : 0;\n const tipHeight = arrowEle ? arrowEle.offsetHeight : 0;\n let tipAdjust = (this.showTipPointer ? SHOW_POINTER_TIP_GAP : HIDE_POINTER_TIP_GAP);\n const tipHeightAdjust = (tipHeight / 2) + POINTER_ADJUST + (this.tooltipEle.offsetHeight - this.tooltipEle.clientHeight);\n const tipWidthAdjust = (tipWidth / 2) + POINTER_ADJUST + (this.tooltipEle.offsetWidth - this.tooltipEle.clientWidth);\n if (this.mouseTrail) {\n tipAdjust += MOUSE_TRAIL_GAP;\n }\n switch (position) {\n case 'RightTop':\n pos.left += tipWidth + tipAdjust;\n pos.top -= tooltipEleHeight - tipHeightAdjust;\n break;\n case 'RightCenter':\n pos.left += tipWidth + tipAdjust;\n pos.top -= (tooltipEleHeight / 2);\n break;\n case 'RightBottom':\n pos.left += tipWidth + tipAdjust;\n pos.top -= (tipHeightAdjust);\n break;\n case 'BottomRight':\n pos.top += (tipHeight + tipAdjust);\n pos.left -= (tipWidthAdjust);\n break;\n case 'BottomCenter':\n pos.top += (tipHeight + tipAdjust);\n pos.left -= (tooltipEleWidth / 2);\n break;\n case 'BottomLeft':\n pos.top += (tipHeight + tipAdjust);\n pos.left -= (tooltipEleWidth - tipWidthAdjust);\n break;\n case 'LeftBottom':\n pos.left -= (tipWidth + tooltipEleWidth + tipAdjust);\n pos.top -= (tipHeightAdjust);\n break;\n case 'LeftCenter':\n pos.left -= (tipWidth + tooltipEleWidth + tipAdjust);\n pos.top -= (tooltipEleHeight / 2);\n break;\n case 'LeftTop':\n pos.left -= (tipWidth + tooltipEleWidth + tipAdjust);\n pos.top -= (tooltipEleHeight - tipHeightAdjust);\n break;\n case 'TopLeft':\n pos.top -= (tooltipEleHeight + tipHeight + tipAdjust);\n pos.left -= (tooltipEleWidth - tipWidthAdjust);\n break;\n case 'TopRight':\n pos.top -= (tooltipEleHeight + tipHeight + tipAdjust);\n pos.left -= (tipWidthAdjust);\n break;\n default:\n pos.top -= (tooltipEleHeight + tipHeight + tipAdjust);\n pos.left -= (tooltipEleWidth / 2);\n break;\n }\n pos.left += this.offsetX;\n pos.top += this.offsetY;\n return pos;\n }\n updateTipPosition(position) {\n const selEle = this.tooltipEle.querySelectorAll('.' + ARROW_TIP + ',.' + ARROW_TIP_OUTER + ',.' + ARROW_TIP_INNER);\n const removeList = [TIP_BOTTOM, TIP_TOP, TIP_LEFT, TIP_RIGHT];\n removeClass(selEle, removeList);\n this.setTipClass(position);\n addClass(selEle, this.tipClass);\n }\n adjustArrow(target, position, tooltipPositionX, tooltipPositionY) {\n if (this.showTipPointer === false) {\n return;\n }\n this.updateTipPosition(position);\n let leftValue;\n let topValue;\n this.tooltipEle.style.display = 'block';\n const tooltipWidth = this.tooltipEle.clientWidth;\n const tooltipHeight = this.tooltipEle.clientHeight;\n const arrowEle = this.tooltipEle.querySelector('.' + ARROW_TIP);\n const arrowInnerELe = this.tooltipEle.querySelector('.' + ARROW_TIP_INNER);\n const tipWidth = arrowEle.offsetWidth;\n const tipHeight = arrowEle.offsetHeight;\n this.tooltipEle.style.display = '';\n if (this.tipClass === TIP_BOTTOM || this.tipClass === TIP_TOP) {\n if (this.tipClass === TIP_BOTTOM) {\n topValue = '99.9%';\n // Arrow icon aligned -2px height from ArrowOuterTip div\n arrowInnerELe.style.top = '-' + (tipHeight - 2) + 'px';\n }\n else {\n topValue = -(tipHeight - 1) + 'px';\n // Arrow icon aligned -6px height from ArrowOuterTip div\n arrowInnerELe.style.top = '-' + (tipHeight - 6) + 'px';\n }\n if (target) {\n const tipPosExclude = tooltipPositionX !== 'Center' || (tooltipWidth > target.offsetWidth) || this.mouseTrail;\n if ((tipPosExclude && tooltipPositionX === 'Left') || (!tipPosExclude && this.tipPointerPosition === 'End')) {\n leftValue = (tooltipWidth - tipWidth - POINTER_ADJUST) + 'px';\n }\n else if ((tipPosExclude && tooltipPositionX === 'Right') || (!tipPosExclude && this.tipPointerPosition === 'Start')) {\n leftValue = POINTER_ADJUST + 'px';\n }\n else {\n leftValue = ((tooltipWidth / 2) - (tipWidth / 2)) + 'px';\n }\n }\n }\n else {\n if (this.tipClass === TIP_RIGHT) {\n leftValue = '99.9%';\n // Arrow icon aligned -2px left from ArrowOuterTip div\n arrowInnerELe.style.left = '-' + (tipWidth - 2) + 'px';\n }\n else {\n leftValue = -(tipWidth - 1) + 'px';\n // Arrow icon aligned -2px from ArrowOuterTip width\n arrowInnerELe.style.left = (-(tipWidth) + (tipWidth - 2)) + 'px';\n }\n const tipPosExclude = tooltipPositionY !== 'Center' || (tooltipHeight > target.offsetHeight) || this.mouseTrail;\n if ((tipPosExclude && tooltipPositionY === 'Top') || (!tipPosExclude && this.tipPointerPosition === 'End')) {\n topValue = (tooltipHeight - tipHeight - POINTER_ADJUST) + 'px';\n }\n else if ((tipPosExclude && tooltipPositionY === 'Bottom') || (!tipPosExclude && this.tipPointerPosition === 'Start')) {\n topValue = POINTER_ADJUST + 'px';\n }\n else {\n topValue = ((tooltipHeight / 2) - (tipHeight / 2)) + 'px';\n }\n }\n arrowEle.style.top = topValue;\n arrowEle.style.left = leftValue;\n }\n renderContent(target) {\n const tooltipContent = this.tooltipEle.querySelector('.' + CONTENT);\n if (this.cssClass) {\n addClass([this.tooltipEle], this.cssClass.split(' '));\n }\n if (target && !isNullOrUndefined(target.getAttribute('title'))) {\n target.setAttribute('data-content', target.getAttribute('title'));\n target.removeAttribute('title');\n }\n if (!isNullOrUndefined(this.content)) {\n tooltipContent.innerHTML = '';\n if (this.content instanceof HTMLElement) {\n tooltipContent.appendChild(this.content);\n }\n else if (typeof this.content === 'string') {\n if (this.enableHtmlSanitizer) {\n this.setProperties({ content: SanitizeHtmlHelper.sanitize(this.content) }, true);\n }\n tooltipContent[this.enableHtmlParse ? 'innerHTML' : 'textContent'] = this.content;\n }\n else {\n // eslint-disable-next-line\n const templateFunction = compile(this.content);\n const tempArr = templateFunction({}, this, 'content', this.element.id + 'content', undefined, undefined, tooltipContent);\n if (tempArr) {\n append(tempArr, tooltipContent);\n }\n this.renderReactTemplates();\n }\n }\n else {\n if (target && !isNullOrUndefined(target.getAttribute('data-content'))) {\n tooltipContent.innerHTML = target.getAttribute('data-content');\n }\n }\n }\n renderCloseIcon() {\n if (!this.isSticky) {\n return;\n }\n const tipClose = this.createElement('div', { className: ICON$1 + ' ' + CLOSE });\n this.tooltipEle.appendChild(tipClose);\n EventHandler.add(tipClose, Browser.touchStartEvent, this.onStickyClose, this);\n }\n addDescribedBy(target, id) {\n const describedby = (target.getAttribute('aria-describedby') || '').split(/\\s+/);\n if (describedby.indexOf(id) < 0) {\n describedby.push(id);\n }\n attributes(target, { 'aria-describedby': describedby.join(' ').trim(), 'data-tooltip-id': id });\n }\n removeDescribedBy(target) {\n const id = target.getAttribute('data-tooltip-id');\n const describedby = (target.getAttribute('aria-describedby') || '').split(/\\s+/);\n const index = describedby.indexOf(id);\n if (index !== -1) {\n describedby.splice(index, 1);\n }\n target.removeAttribute('data-tooltip-id');\n const orgdescribedby = describedby.join(' ').trim();\n if (orgdescribedby) {\n target.setAttribute('aria-describedby', orgdescribedby);\n }\n else {\n target.removeAttribute('aria-describedby');\n }\n }\n tapHoldHandler(evt) {\n clearTimeout(this.autoCloseTimer);\n this.targetHover(evt.originalEvent);\n }\n touchEndHandler(e) {\n if (this.isSticky) {\n return;\n }\n // eslint-disable-next-line\n const close = () => {\n this.close();\n };\n this.autoCloseTimer = setTimeout(close, TOUCHEND_HIDE_DELAY);\n }\n targetClick(e) {\n let target;\n if (this.target) {\n target = closest(e.target, this.target);\n }\n else {\n target = this.element;\n }\n if (isNullOrUndefined(target)) {\n return;\n }\n if (target.getAttribute('data-tooltip-id') === null) {\n this.targetHover(e);\n }\n else if (!this.isSticky) {\n this.hideTooltip(this.animation.close, e, target);\n }\n }\n targetHover(e) {\n let target;\n if (this.target) {\n target = closest(e.target, this.target);\n }\n else {\n target = this.element;\n }\n if (isNullOrUndefined(target) || (target.getAttribute('data-tooltip-id') !== null && this.closeDelay === 0)) {\n return;\n }\n const targetList = [].slice.call(document.querySelectorAll('[data-tooltip-id= ' + this.ctrlId + '_content]'));\n for (const target of targetList) {\n this.restoreElement(target);\n }\n this.showTooltip(target, this.animation.open, e);\n }\n mouseMoveBeforeOpen(e) {\n this.mouseMoveEvent = e;\n }\n mouseMoveBeforeRemove() {\n if (this.mouseMoveTarget) {\n EventHandler.remove(this.mouseMoveTarget, \"mousemove touchstart\", this.mouseMoveBeforeOpen);\n }\n }\n showTooltip(target, showAnimation, e) {\n clearTimeout(this.showTimer);\n clearTimeout(this.hideTimer);\n if (this.openDelay && this.mouseTrail) {\n this.mouseMoveBeforeRemove();\n this.mouseMoveTarget = target;\n EventHandler.add(this.mouseMoveTarget, \"mousemove touchstart\", this.mouseMoveBeforeOpen, this);\n }\n this.tooltipEventArgs = {\n type: e ? e.type : null, cancel: false, target: target, event: e ? e : null,\n element: this.tooltipEle, isInteracted: !isNullOrUndefined(e)\n };\n // eslint-disable-next-line\n const observeCallback = (beforeRenderArgs) => {\n this.beforeRenderCallback(beforeRenderArgs, target, e, showAnimation);\n };\n this.trigger('beforeRender', this.tooltipEventArgs, observeCallback.bind(this));\n }\n beforeRenderCallback(beforeRenderArgs, target, e, showAnimation) {\n if (beforeRenderArgs.cancel) {\n this.isHidden = true;\n this.clear();\n this.mouseMoveBeforeRemove();\n }\n else {\n this.isHidden = false;\n if (isNullOrUndefined(this.tooltipEle)) {\n this.ctrlId = this.element.getAttribute('id') ?\n getUniqueID(this.element.getAttribute('id')) : getUniqueID('tooltip');\n this.tooltipEle = this.createElement('div', {\n className: TOOLTIP_WRAP + ' ' + POPUP_ROOT$1 + ' ' + POPUP_LIB, attrs: {\n role: 'tooltip', 'aria-hidden': 'false', 'id': this.ctrlId + '_content'\n }, styles: 'width:' +\n formatUnit(this.width) + ';height:' + formatUnit(this.height) + ';position:absolute;'\n });\n this.tooltipBeforeRender(target, this);\n this.tooltipAfterRender(target, e, showAnimation, this);\n }\n else {\n if (target) {\n this.adjustArrow(target, this.position, this.tooltipPositionX, this.tooltipPositionY);\n this.addDescribedBy(target, this.ctrlId + '_content');\n this.renderContent(target);\n Animation.stop(this.tooltipEle);\n this.reposition(target);\n this.tooltipAfterRender(target, e, showAnimation, this);\n }\n }\n }\n }\n tooltipBeforeRender(target, ctrlObj) {\n if (target) {\n if (Browser.isDevice) {\n addClass([ctrlObj.tooltipEle], DEVICE$1);\n }\n if (ctrlObj.width !== 'auto') {\n ctrlObj.tooltipEle.style.maxWidth = formatUnit(ctrlObj.width);\n }\n ctrlObj.tooltipEle.appendChild(ctrlObj.createElement('div', { className: CONTENT }));\n document.body.appendChild(ctrlObj.tooltipEle);\n removeClass([ctrlObj.tooltipEle], HIDE_POPUP);\n ctrlObj.addDescribedBy(target, ctrlObj.ctrlId + '_content');\n ctrlObj.renderContent(target);\n addClass([ctrlObj.tooltipEle], POPUP_OPEN);\n if (ctrlObj.showTipPointer) {\n ctrlObj.renderArrow();\n }\n ctrlObj.renderCloseIcon();\n ctrlObj.renderPopup(target);\n ctrlObj.adjustArrow(target, ctrlObj.position, ctrlObj.tooltipPositionX, ctrlObj.tooltipPositionY);\n Animation.stop(ctrlObj.tooltipEle);\n ctrlObj.reposition(target);\n }\n }\n tooltipAfterRender(target, e, showAnimation, ctrlObj) {\n if (target) {\n removeClass([ctrlObj.tooltipEle], POPUP_OPEN);\n addClass([ctrlObj.tooltipEle], POPUP_CLOSE);\n ctrlObj.tooltipEventArgs = {\n type: e ? e.type : null, cancel: false, target: target, event: e ? e : null,\n element: ctrlObj.tooltipEle, isInteracted: !isNullOrUndefined(e)\n };\n if (ctrlObj.needTemplateReposition() && !ctrlObj.mouseTrail) {\n ctrlObj.tooltipEle.style.display = 'none';\n }\n // eslint-disable-next-line\n const observeCallback = (observedArgs) => {\n ctrlObj.beforeOpenCallback(observedArgs, target, showAnimation, e);\n };\n ctrlObj.trigger('beforeOpen', ctrlObj.tooltipEventArgs, observeCallback.bind(ctrlObj));\n }\n }\n beforeOpenCallback(observedArgs, target, showAnimation, e) {\n if (observedArgs.cancel) {\n this.isHidden = true;\n this.clear();\n this.mouseMoveBeforeRemove();\n this.restoreElement(target);\n }\n else {\n // eslint-disable-next-line\n let openAnimation = {\n name: showAnimation.effect,\n duration: showAnimation.duration,\n delay: showAnimation.delay,\n timingFunction: 'easeOut'\n };\n if (showAnimation.effect === 'None') {\n openAnimation = undefined;\n }\n if (this.openDelay > 0) {\n // eslint-disable-next-line\n const show = () => {\n if (this.mouseTrail) {\n EventHandler.add(target, 'mousemove touchstart mouseenter', this.onMouseMove, this);\n }\n if (this.popupObj) {\n this.popupObj.show(openAnimation, target);\n if (this.mouseMoveEvent && this.mouseTrail) {\n this.onMouseMove(this.mouseMoveEvent);\n }\n }\n };\n this.showTimer = setTimeout(show, this.openDelay);\n }\n else {\n if (this.popupObj) {\n this.popupObj.show(openAnimation, target);\n }\n }\n }\n if (e) {\n this.wireMouseEvents(e, target);\n }\n }\n needTemplateReposition() {\n // eslint-disable-next-line\n const tooltip = this;\n return !isNullOrUndefined(tooltip.viewContainerRef)\n && typeof tooltip.viewContainerRef !== 'string';\n }\n checkCollision(target, x, y) {\n const elePos = {\n left: x, top: y, position: this.position,\n horizontal: this.tooltipPositionX, vertical: this.tooltipPositionY\n };\n const affectedPos = isCollide(this.tooltipEle, this.checkCollideTarget(), x, y);\n if (affectedPos.length > 0) {\n elePos.horizontal = affectedPos.indexOf('left') >= 0 ? 'Right' : affectedPos.indexOf('right') >= 0 ? 'Left' :\n this.tooltipPositionX;\n elePos.vertical = affectedPos.indexOf('top') >= 0 ? 'Bottom' : affectedPos.indexOf('bottom') >= 0 ? 'Top' :\n this.tooltipPositionY;\n }\n return elePos;\n }\n collisionFlipFit(target, x, y) {\n const elePos = this.checkCollision(target, x, y);\n let newpos = elePos.position;\n if (this.tooltipPositionY !== elePos.vertical) {\n newpos = ((this.position.indexOf('Bottom') === 0 || this.position.indexOf('Top') === 0) ?\n elePos.vertical + this.tooltipPositionX : this.tooltipPositionX + elePos.vertical);\n }\n if (this.tooltipPositionX !== elePos.horizontal) {\n if (newpos.indexOf('Left') === 0) {\n elePos.vertical = (newpos === 'LeftTop' || newpos === 'LeftCenter') ? 'Top' : 'Bottom';\n newpos = (elePos.vertical + 'Left');\n }\n if (newpos.indexOf('Right') === 0) {\n elePos.vertical = (newpos === 'RightTop' || newpos === 'RightCenter') ? 'Top' : 'Bottom';\n newpos = (elePos.vertical + 'Right');\n }\n elePos.horizontal = this.tooltipPositionX;\n }\n this.tooltipEventArgs = {\n type: null, cancel: false, target: target, event: null,\n element: this.tooltipEle, collidedPosition: newpos\n };\n this.trigger('beforeCollision', this.tooltipEventArgs);\n if (elePos.position !== newpos) {\n const pos = calculatePosition(target, elePos.horizontal, elePos.vertical);\n this.adjustArrow(target, newpos, elePos.horizontal, elePos.vertical);\n const offsetPos = this.calculateTooltipOffset(newpos);\n offsetPos.top -= (('TopBottom'.indexOf(this.position.split(/(?=[A-Z])/)[0]) !== -1) &&\n ('TopBottom'.indexOf(newpos.split(/(?=[A-Z])/)[0]) !== -1)) ? (2 * this.offsetY) : 0;\n offsetPos.left -= (('RightLeft'.indexOf(this.position.split(/(?=[A-Z])/)[0]) !== -1) &&\n ('RightLeft'.indexOf(newpos.split(/(?=[A-Z])/)[0]) !== -1)) ? (2 * this.offsetX) : 0;\n elePos.position = newpos;\n elePos.left = pos.left + offsetPos.left;\n elePos.top = pos.top + offsetPos.top;\n }\n else {\n this.adjustArrow(target, newpos, elePos.horizontal, elePos.vertical);\n }\n const eleOffset = { left: elePos.left, top: elePos.top };\n const left = fit(this.tooltipEle, this.checkCollideTarget(), { X: true, Y: false }, eleOffset).left;\n this.tooltipEle.style.display = 'block';\n if (this.showTipPointer && (newpos.indexOf('Bottom') === 0 || newpos.indexOf('Top') === 0)) {\n const arrowEle = this.tooltipEle.querySelector('.' + ARROW_TIP);\n let arrowleft = parseInt(arrowEle.style.left, 10) - (left - elePos.left);\n if (arrowleft < 0) {\n arrowleft = 0;\n }\n else if ((arrowleft + arrowEle.offsetWidth) > this.tooltipEle.clientWidth) {\n arrowleft = this.tooltipEle.clientWidth - arrowEle.offsetWidth;\n }\n arrowEle.style.left = arrowleft.toString() + 'px';\n }\n this.tooltipEle.style.display = '';\n eleOffset.left = left;\n return eleOffset;\n }\n checkCollideTarget() {\n return !this.windowCollision && this.target ? this.element : null;\n }\n hideTooltip(hideAnimation, e, targetElement) {\n if (this.closeDelay > 0) {\n clearTimeout(this.hideTimer);\n clearTimeout(this.showTimer);\n // eslint-disable-next-line\n const hide = () => {\n if (this.closeDelay && this.tooltipEle && this.isTooltipOpen) {\n return;\n }\n this.tooltipHide(hideAnimation, e, targetElement);\n };\n this.hideTimer = setTimeout(hide, this.closeDelay);\n }\n else {\n this.tooltipHide(hideAnimation, e, targetElement);\n }\n }\n tooltipHide(hideAnimation, e, targetElement) {\n let target;\n if (e) {\n target = this.target ? (targetElement || e.target) : this.element;\n }\n else {\n target = document.querySelector('[data-tooltip-id= ' + this.ctrlId + '_content]');\n }\n this.tooltipEventArgs = {\n type: e ? e.type : null, cancel: false, target: target, event: e ? e : null,\n element: this.tooltipEle, isInteracted: !isNullOrUndefined(e)\n };\n // this line commented for close the tooltip popup element even the target element destroyed in a page.\n //if (isNullOrUndefined(target)) { return; }\n this.trigger('beforeClose', this.tooltipEventArgs, (observedArgs) => {\n if (!observedArgs.cancel) {\n this.mouseMoveBeforeRemove();\n this.popupHide(hideAnimation, target);\n }\n else {\n this.isHidden = false;\n }\n });\n }\n popupHide(hideAnimation, target) {\n if (target) {\n this.restoreElement(target);\n }\n this.isHidden = true;\n // eslint-disable-next-line\n let closeAnimation = {\n name: hideAnimation.effect,\n duration: hideAnimation.duration,\n delay: hideAnimation.delay,\n timingFunction: 'easeIn'\n };\n if (hideAnimation.effect === 'None') {\n closeAnimation = undefined;\n }\n if (this.popupObj) {\n this.popupObj.hide(closeAnimation);\n }\n }\n restoreElement(target) {\n this.unwireMouseEvents(target);\n if (!isNullOrUndefined(target.getAttribute('data-content'))) {\n target.setAttribute('title', target.getAttribute('data-content'));\n target.removeAttribute('data-content');\n }\n this.removeDescribedBy(target);\n }\n clear() {\n if (this.tooltipEle) {\n removeClass([this.tooltipEle], POPUP_CLOSE);\n addClass([this.tooltipEle], POPUP_OPEN);\n }\n if (this.isHidden) {\n if (this.popupObj) {\n this.popupObj.destroy();\n }\n if (this.tooltipEle) {\n remove(this.tooltipEle);\n }\n this.tooltipEle = null;\n this.popupObj = null;\n }\n }\n tooltipHover(e) {\n if (this.tooltipEle) {\n this.isTooltipOpen = true;\n }\n }\n tooltipMouseOut(e) {\n this.isTooltipOpen = false;\n this.hideTooltip(this.animation.close, e, this.findTarget());\n }\n onMouseOut(e) {\n const enteredElement = e.relatedTarget;\n // don't close the tooltip only if it is tooltip content element\n if (enteredElement && !this.mouseTrail) {\n const checkForTooltipElement = closest(enteredElement, `.${TOOLTIP_WRAP}.${POPUP_LIB}.${POPUP_ROOT$1}`);\n if (checkForTooltipElement) {\n EventHandler.add(checkForTooltipElement, 'mouseleave', this.tooltipElementMouseOut, this);\n }\n else {\n this.hideTooltip(this.animation.close, e, this.findTarget());\n if (this.closeDelay === 0) {\n this.clear();\n }\n }\n }\n else {\n this.hideTooltip(this.animation.close, e, this.findTarget());\n this.clear();\n }\n }\n tooltipElementMouseOut(e) {\n this.hideTooltip(this.animation.close, e, this.findTarget());\n EventHandler.remove(this.element, 'mouseleave', this.tooltipElementMouseOut);\n this.clear();\n }\n onStickyClose(e) {\n this.close();\n }\n onMouseMove(event) {\n let eventPageX = 0;\n let eventPageY = 0;\n if (event.type.indexOf('touch') > -1) {\n event.preventDefault();\n eventPageX = event.touches[0].pageX;\n eventPageY = event.touches[0].pageY;\n }\n else {\n eventPageX = event.pageX;\n eventPageY = event.pageY;\n }\n Animation.stop(this.tooltipEle);\n removeClass([this.tooltipEle], POPUP_CLOSE);\n addClass([this.tooltipEle], POPUP_OPEN);\n this.adjustArrow(event.target, this.position, this.tooltipPositionX, this.tooltipPositionY);\n const pos = this.calculateTooltipOffset(this.position);\n const x = eventPageX + pos.left + this.offsetX;\n const y = eventPageY + pos.top + this.offsetY;\n const elePos = this.checkCollision(event.target, x, y);\n if (this.tooltipPositionX !== elePos.horizontal || this.tooltipPositionY !== elePos.vertical) {\n const newpos = (this.position.indexOf('Bottom') === 0 || this.position.indexOf('Top') === 0) ?\n elePos.vertical + elePos.horizontal : elePos.horizontal + elePos.vertical;\n elePos.position = newpos;\n this.adjustArrow(event.target, elePos.position, elePos.horizontal, elePos.vertical);\n const colpos = this.calculateTooltipOffset(elePos.position);\n elePos.left = eventPageX + colpos.left - this.offsetX;\n elePos.top = eventPageY + colpos.top - this.offsetY;\n }\n this.tooltipEle.style.left = elePos.left + 'px';\n this.tooltipEle.style.top = elePos.top + 'px';\n }\n keyDown(event) {\n if (this.tooltipEle && event.keyCode === 27) {\n this.close();\n }\n }\n touchEnd(e) {\n if (this.tooltipEle && closest(e.target, '.' + ROOT$1) === null && !this.isSticky) {\n this.close();\n }\n }\n scrollHandler(e) {\n if (this.tooltipEle) {\n if (!(closest(e.target, `.${TOOLTIP_WRAP}.${POPUP_LIB}.${POPUP_ROOT$1}`))) {\n this.close();\n }\n }\n }\n /**\n * Core method that initializes the control rendering.\n *\n * @private\n * @returns {void}\n */\n render() {\n this.initialize();\n this.wireEvents(this.opensOn);\n this.renderComplete();\n }\n /**\n * Initializes the values of private members.\n *\n * @private\n * @returns {void}\n */\n preRender() {\n this.tipClass = TIP_BOTTOM;\n this.tooltipPositionX = 'Center';\n this.tooltipPositionY = 'Top';\n this.isHidden = true;\n }\n /**\n * Binding events to the Tooltip element.\n *\n * @hidden\n * @param {string} trigger - specify the trigger string to the function\n * @returns {void}\n *\n */\n wireEvents(trigger) {\n const triggerList = this.getTriggerList(trigger);\n for (const opensOn of triggerList) {\n if (opensOn === 'Custom') {\n return;\n }\n if (opensOn === 'Focus') {\n this.wireFocusEvents();\n }\n if (opensOn === 'Click') {\n EventHandler.add(this.element, Browser.touchStartEvent, this.targetClick, this);\n }\n if (opensOn === 'Hover') {\n if (Browser.isDevice) {\n this.touchModule = new Touch(this.element, {\n tapHoldThreshold: TAPHOLD_THRESHOLD,\n tapHold: this.tapHoldHandler.bind(this)\n });\n EventHandler.add(this.element, Browser.touchEndEvent, this.touchEndHandler, this);\n }\n else {\n EventHandler.add(this.element, 'mouseover', this.targetHover, this);\n }\n }\n }\n EventHandler.add(document, 'touchend', this.touchEnd, this);\n EventHandler.add(document, 'scroll wheel', this.scrollHandler, this);\n EventHandler.add(document, 'keydown', this.keyDown, this);\n }\n getTriggerList(trigger) {\n if (trigger === 'Auto') {\n trigger = (Browser.isDevice) ? 'Hover' : 'Hover Focus';\n }\n return trigger.split(' ');\n }\n wireFocusEvents() {\n if (!isNullOrUndefined(this.target)) {\n const targetList = [].slice.call(this.element.querySelectorAll(this.target));\n for (const target of targetList) {\n EventHandler.add(target, 'focus', this.targetHover, this);\n }\n }\n else {\n EventHandler.add(this.element, 'focus', this.targetHover, this);\n }\n }\n wireMouseEvents(e, target) {\n if (this.tooltipEle) {\n if (!this.isSticky) {\n if (e.type === 'focus') {\n EventHandler.add(target, 'blur', this.onMouseOut, this);\n }\n if (e.type === 'mouseover') {\n EventHandler.add(target, 'mouseleave', this.onMouseOut, this);\n }\n if (this.closeDelay) {\n EventHandler.add(this.tooltipEle, 'mouseenter', this.tooltipHover, this);\n EventHandler.add(this.tooltipEle, 'mouseleave', this.tooltipMouseOut, this);\n }\n }\n if (this.mouseTrail && this.openDelay === 0) {\n EventHandler.add(target, 'mousemove touchstart mouseenter', this.onMouseMove, this);\n }\n }\n }\n /**\n * Unbinding events from the element on widget destroy.\n *\n * @hidden\n *\n * @param {string} trigger - specify the trigger string to the function\n * @returns {void}\n *\n */\n unwireEvents(trigger) {\n const triggerList = this.getTriggerList(trigger);\n for (const opensOn of triggerList) {\n if (opensOn === 'Custom') {\n return;\n }\n if (opensOn === 'Focus') {\n this.unwireFocusEvents();\n }\n if (opensOn === 'Click') {\n EventHandler.remove(this.element, Browser.touchStartEvent, this.targetClick);\n }\n if (opensOn === 'Hover') {\n if (Browser.isDevice) {\n if (this.touchModule) {\n this.touchModule.destroy();\n }\n EventHandler.remove(this.element, Browser.touchEndEvent, this.touchEndHandler);\n }\n else {\n EventHandler.remove(this.element, 'mouseover', this.targetHover);\n }\n }\n }\n EventHandler.remove(document, 'touchend', this.touchEnd);\n EventHandler.remove(document, 'scroll wheel', this.scrollHandler);\n EventHandler.remove(document, 'keydown', this.keyDown);\n }\n unwireFocusEvents() {\n if (!isNullOrUndefined(this.target)) {\n const targetList = [].slice.call(this.element.querySelectorAll(this.target));\n for (const target of targetList) {\n EventHandler.remove(target, 'focus', this.targetHover);\n }\n }\n else {\n EventHandler.remove(this.element, 'focus', this.targetHover);\n }\n }\n unwireMouseEvents(target) {\n if (!this.isSticky) {\n const triggerList = this.getTriggerList(this.opensOn);\n for (const opensOn of triggerList) {\n if (opensOn === 'Focus') {\n EventHandler.remove(target, 'blur', this.onMouseOut);\n }\n if (opensOn === 'Hover' && !Browser.isDevice) {\n EventHandler.remove(target, 'mouseleave', this.onMouseOut);\n }\n }\n if (this.closeDelay) {\n EventHandler.remove(target, 'mouseenter', this.tooltipHover);\n EventHandler.remove(target, 'mouseleave', this.tooltipMouseOut);\n }\n }\n if (this.mouseTrail) {\n EventHandler.remove(target, 'mousemove touchstart mouseenter', this.onMouseMove);\n }\n }\n findTarget() {\n const target = document.querySelector('[data-tooltip-id= ' + this.ctrlId + '_content]');\n return target;\n }\n /**\n * Core method to return the component name.\n *\n * @private\n *\n * @returns {string} - this method returns module name.\n */\n getModuleName() {\n return 'tooltip';\n }\n /**\n * Returns the properties to be maintained in the persisted state.\n *\n * @private\n *\n * @returns {string} - this method returns persisted data.\n */\n getPersistData() {\n return this.addOnPersist([]);\n }\n /**\n * Called internally, if any of the property value changed.\n *\n * @private\n *\n * @param {TooltipModel} newProp - this param gives new property values to the method\n * @param {TooltipModel} oldProp - this param gives old property values to the method\n * @returns {void}\n *\n */\n onPropertyChanged(newProp, oldProp) {\n const targetElement = this.findTarget();\n for (const prop of Object.keys(newProp)) {\n switch (prop) {\n case 'width':\n if (this.tooltipEle && targetElement) {\n this.tooltipEle.style.width = this.tooltipEle.style.maxWidth = formatUnit(newProp.width);\n this.reposition(targetElement);\n }\n break;\n case 'height':\n if (this.tooltipEle && targetElement) {\n this.tooltipEle.style.height = formatUnit(newProp.height);\n this.reposition(targetElement);\n }\n break;\n case 'content':\n if (this.tooltipEle) {\n this.renderContent();\n }\n break;\n case 'opensOn':\n this.unwireEvents(oldProp.opensOn);\n this.wireEvents(newProp.opensOn);\n break;\n case 'position':\n this.formatPosition();\n if (this.tooltipEle && targetElement) {\n const arrowInnerELe = this.tooltipEle.querySelector('.' + ARROW_TIP_INNER);\n arrowInnerELe.style.top = arrowInnerELe.style.left = null;\n this.reposition(targetElement);\n }\n break;\n case 'tipPointerPosition':\n if (this.tooltipEle && targetElement) {\n this.reposition(targetElement);\n }\n break;\n case 'offsetX':\n if (this.tooltipEle) {\n const x = newProp.offsetX - oldProp.offsetX;\n this.tooltipEle.style.left = (parseInt(this.tooltipEle.style.left, 10) + (x)).toString() + 'px';\n }\n break;\n case 'offsetY':\n if (this.tooltipEle) {\n const y = newProp.offsetY - oldProp.offsetY;\n this.tooltipEle.style.top = (parseInt(this.tooltipEle.style.top, 10) + (y)).toString() + 'px';\n }\n break;\n case 'cssClass':\n if (this.tooltipEle) {\n if (oldProp.cssClass) {\n removeClass([this.tooltipEle], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([this.tooltipEle], newProp.cssClass.split(' '));\n }\n }\n break;\n case 'enableRtl':\n if (this.tooltipEle) {\n if (this.enableRtl) {\n addClass([this.tooltipEle], RTL$1);\n }\n else {\n removeClass([this.tooltipEle], RTL$1);\n }\n }\n break;\n }\n }\n }\n /**\n * It is used to show the Tooltip on the specified target with specific animation settings.\n *\n * @param {HTMLElement} element - Target element where the Tooltip is to be displayed. (It is an optional parameter)\n * @param {TooltipAnimationSettings} animation - Sets the specific animation, while showing the Tooltip on the screen. (It is an optional parameter)\n * @returns {void}\n */\n open(element, animation) {\n if (isNullOrUndefined(animation)) {\n animation = this.animation.open;\n }\n if (isNullOrUndefined(element)) {\n element = this.element;\n }\n if (element.style.display === 'none') {\n return;\n }\n this.showTooltip(element, animation);\n }\n /**\n * It is used to hide the Tooltip with specific animation effect.\n *\n * @param {TooltipAnimationSettings} animation - Sets the specific animation when hiding Tooltip from the screen. (It is an optional parameter)\n * @returns {void}\n */\n close(animation) {\n if (!animation) {\n animation = this.animation.close;\n }\n this.hideTooltip(animation);\n }\n /**\n * It is used to refresh the Tooltip content and its position.\n *\n * @param {HTMLElement} target - Target element where the Tooltip content or position needs to be refreshed.\n * @returns {void}\n */\n refresh(target) {\n if (this.tooltipEle) {\n this.renderContent(target);\n }\n if (this.popupObj && target) {\n this.reposition(target);\n }\n }\n /**\n * It is used to destroy the Tooltip component.\n * @method destroy\n * @returns {void}\n * @memberof Tooltip\n */\n destroy() {\n super.destroy();\n if (this.tooltipEle) {\n remove(this.tooltipEle);\n }\n if (this.popupObj) {\n this.popupObj.destroy();\n }\n removeClass([this.element], ROOT$1);\n this.unwireEvents(this.opensOn);\n this.unwireMouseEvents(this.element);\n this.tooltipEle = null;\n this.popupObj = null;\n }\n};\n__decorate$2([\n Property('auto')\n], Tooltip.prototype, \"width\", void 0);\n__decorate$2([\n Property('auto')\n], Tooltip.prototype, \"height\", void 0);\n__decorate$2([\n Property()\n], Tooltip.prototype, \"content\", void 0);\n__decorate$2([\n Property()\n], Tooltip.prototype, \"target\", void 0);\n__decorate$2([\n Property('TopCenter')\n], Tooltip.prototype, \"position\", void 0);\n__decorate$2([\n Property(0)\n], Tooltip.prototype, \"offsetX\", void 0);\n__decorate$2([\n Property(0)\n], Tooltip.prototype, \"offsetY\", void 0);\n__decorate$2([\n Property(true)\n], Tooltip.prototype, \"showTipPointer\", void 0);\n__decorate$2([\n Property(true)\n], Tooltip.prototype, \"enableHtmlParse\", void 0);\n__decorate$2([\n Property(false)\n], Tooltip.prototype, \"windowCollision\", void 0);\n__decorate$2([\n Property('Auto')\n], Tooltip.prototype, \"tipPointerPosition\", void 0);\n__decorate$2([\n Property('Auto')\n], Tooltip.prototype, \"opensOn\", void 0);\n__decorate$2([\n Property(false)\n], Tooltip.prototype, \"mouseTrail\", void 0);\n__decorate$2([\n Property(false)\n], Tooltip.prototype, \"isSticky\", void 0);\n__decorate$2([\n Complex({}, Animation$1)\n], Tooltip.prototype, \"animation\", void 0);\n__decorate$2([\n Property(0)\n], Tooltip.prototype, \"openDelay\", void 0);\n__decorate$2([\n Property(0)\n], Tooltip.prototype, \"closeDelay\", void 0);\n__decorate$2([\n Property()\n], Tooltip.prototype, \"cssClass\", void 0);\n__decorate$2([\n Property(false)\n], Tooltip.prototype, \"enableHtmlSanitizer\", void 0);\n__decorate$2([\n Event()\n], Tooltip.prototype, \"beforeRender\", void 0);\n__decorate$2([\n Event()\n], Tooltip.prototype, \"beforeOpen\", void 0);\n__decorate$2([\n Event()\n], Tooltip.prototype, \"afterOpen\", void 0);\n__decorate$2([\n Event()\n], Tooltip.prototype, \"beforeClose\", void 0);\n__decorate$2([\n Event()\n], Tooltip.prototype, \"afterClose\", void 0);\n__decorate$2([\n Event()\n], Tooltip.prototype, \"beforeCollision\", void 0);\n__decorate$2([\n Event()\n], Tooltip.prototype, \"created\", void 0);\n__decorate$2([\n Event()\n], Tooltip.prototype, \"destroyed\", void 0);\nTooltip = __decorate$2([\n NotifyPropertyChanges\n], Tooltip);\n\n/**\n * Tooltip modules\n */\n\nconst globalTimeOut = {};\nconst DEFT_MAT_WIDTH = 30;\nconst DEFT_FAB_WIDTH = 30;\nconst DEFT_BOOT_WIDTH = 30;\nconst DEFT_BOOT4_WIDTH = 36;\nconst CLS_SHOWSPIN = 'e-spin-show';\nconst CLS_HIDESPIN = 'e-spin-hide';\nconst CLS_MATERIALSPIN = 'e-spin-material';\nconst CLS_FABRICSPIN = 'e-spin-fabric';\nconst CLS_TAILWINDSPIN = 'e-spin-tailwind';\nconst CLS_BOOTSPIN = 'e-spin-bootstrap';\nconst CLS_BOOT4SPIN = 'e-spin-bootstrap4';\nconst CLS_HIGHCONTRASTSPIN = 'e-spin-high-contrast';\nconst CLS_SPINWRAP = 'e-spinner-pane';\nconst CLS_SPININWRAP = 'e-spinner-inner';\nconst CLS_SPINCIRCLE = 'e-path-circle';\nconst CLS_SPINARC = 'e-path-arc';\nconst CLS_SPINLABEL = 'e-spin-label';\nconst CLS_SPINTEMPLATE = 'e-spin-template';\nlet spinTemplate = null;\nlet spinCSSClass = null;\n// eslint-disable-next-line\n/**\n * Function to change the Spinners in a page globally from application end.\n * ```\n * E.g : blazorSpinner({ action: \"Create\", options: {target: targetElement}, type: \"\" });\n * ```\n *\n * @param {string} action - specifies the string\n * @param {CreateArgs} options - specifies the args\n * @param {string} target - specifies the target\n * @param {string} type - specifes the type\n * @returns {void}\n * @private\n */\nfunction Spinner(action, options, target, type) {\n switch (action) {\n case 'Create':\n /* eslint-disable */\n const element = document.querySelector(options.target);\n let args = { type: type, target: element, cssClass: options.cssClass,\n label: options.label, width: options.width };\n /* eslint-enable */\n createSpinner(args);\n break;\n case 'Show':\n showSpinner(document.querySelector(target));\n break;\n case 'Hide':\n hideSpinner(document.querySelector(target));\n break;\n case 'Set':\n // eslint-disable-next-line\n const setArgs = { cssClass: options.cssClass, type: type };\n setSpinner(setArgs);\n break;\n }\n}\n/**\n * Create a spinner for the specified target element.\n * ```\n * E.g : createSpinner({ target: targetElement, width: '34px', label: 'Loading..' });\n * ```\n *\n * @param {SpinnerArgs} args - specifies the args\n * @param {CreateElementArgs} internalCreateElement - specifis the element args\n * @returns {void}\n * @private\n */\nfunction createSpinner(args, internalCreateElement) {\n if (!args.target) {\n return;\n }\n let radius;\n const makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n // eslint-disable-next-line\n let container = create_spinner_container(args.target, makeElement);\n if (!isNullOrUndefined(args.cssClass)) {\n container.wrap.classList.add(args.cssClass);\n }\n if (!isNullOrUndefined(args.template) || !isNullOrUndefined(spinTemplate)) {\n const template = !isNullOrUndefined(args.template) ? args.template : spinTemplate;\n container.wrap.classList.add(CLS_SPINTEMPLATE);\n replaceContent(container.wrap, template, spinCSSClass);\n }\n else {\n const theme = !isNullOrUndefined(args.type) ? args.type : getTheme(container.wrap);\n const width = !isNullOrUndefined(args.width) ? args.width : undefined;\n radius = calculateRadius(width, theme);\n setTheme(theme, container.wrap, radius, makeElement);\n if (!isNullOrUndefined(args.label)) {\n createLabel(container.inner_wrap, args.label, makeElement);\n }\n }\n container.wrap.classList.add(CLS_HIDESPIN);\n container = null;\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {string} label - specifies the string\n * @param {createElementParams} makeElement - specifies the element\n * @returns {HTMLElement} - returns the element\n */\nfunction createLabel(container, label, makeElement) {\n const labelEle = makeElement('div', {});\n labelEle.classList.add(CLS_SPINLABEL);\n labelEle.innerHTML = label;\n container.appendChild(labelEle);\n return labelEle;\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {number} radius - specifies the radius\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\nfunction createMaterialSpinner(container, radius, makeElement) {\n const uniqueID = random_generator();\n globalTimeOut[uniqueID] = { timeOut: 0, type: 'Material', radius: radius };\n create_material_element(container, uniqueID, makeElement, CLS_MATERIALSPIN);\n mat_calculate_attributes(radius, container, 'Material', CLS_MATERIALSPIN);\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {number} radius - specifies the radius\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\nfunction createBootstrap4Spinner(container, radius, makeElement) {\n const uniqueID = random_generator();\n globalTimeOut[uniqueID] = { timeOut: 0, type: 'Bootstrap4', radius: radius };\n create_material_element(container, uniqueID, makeElement, CLS_BOOT4SPIN);\n mat_calculate_attributes(radius, container, 'Bootstrap4', CLS_BOOT4SPIN);\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {string} uniqueID - specifies the id.\n * @param {number} radius - specifies the radius\n * @returns {void}\n */\nfunction startMatAnimate(container, uniqueID, radius) {\n const globalObject = {};\n const timeOutVar = 0;\n globalTimeOut[uniqueID].timeOut = 0;\n globalObject[uniqueID] = globalVariables(uniqueID, radius, 0, 0);\n // eslint-disable-next-line\n let spinnerInfo = { uniqueID: uniqueID, container: container, globalInfo: globalObject, timeOutVar: timeOutVar };\n animateMaterial(spinnerInfo);\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {number} radius - specifies the radius\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\nfunction createFabricSpinner(container, radius, makeElement) {\n const uniqueID = random_generator();\n globalTimeOut[uniqueID] = { timeOut: 0, type: 'Fabric', radius: radius };\n create_fabric_element(container, uniqueID, CLS_FABRICSPIN, makeElement);\n fb_calculate_attributes(radius, container, CLS_FABRICSPIN);\n}\nfunction createTailwindSpinner(container, radius, makeElement) {\n const uniqueID = random_generator();\n globalTimeOut[uniqueID] = { timeOut: 0, type: 'Tailwind', radius: radius };\n create_fabric_element(container, uniqueID, CLS_TAILWINDSPIN, makeElement);\n fb_calculate_attributes(radius, container, CLS_TAILWINDSPIN);\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {number} radius - specifies the radius\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\nfunction createHighContrastSpinner(container, radius, makeElement) {\n const uniqueID = random_generator();\n globalTimeOut[uniqueID] = { timeOut: 0, type: 'HighContrast', radius: radius };\n create_fabric_element(container, uniqueID, CLS_HIGHCONTRASTSPIN, makeElement);\n fb_calculate_attributes(radius, container, CLS_HIGHCONTRASTSPIN);\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @returns {string} - returns the string\n */\nfunction getTheme(container) {\n const theme = window.getComputedStyle(container, ':after').getPropertyValue('content');\n return theme.replace(/['\"]+/g, '');\n}\n/**\n *\n * @param {string} theme - specifies the theme\n * @param {HTMLElement} container - specifies the element\n * @param {number} radius - specifies the radius\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\nfunction setTheme(theme, container, radius, makeElement) {\n const innerContainer = container.querySelector('.' + CLS_SPININWRAP);\n const svg = innerContainer.querySelector('svg');\n if (!isNullOrUndefined(svg)) {\n innerContainer.removeChild(svg);\n }\n switch (theme) {\n case 'Material':\n createMaterialSpinner(innerContainer, radius, makeElement);\n break;\n case 'Fabric':\n createFabricSpinner(innerContainer, radius, makeElement);\n break;\n case 'Bootstrap':\n createBootstrapSpinner(innerContainer, radius, makeElement);\n break;\n case 'HighContrast':\n createHighContrastSpinner(innerContainer, radius, makeElement);\n break;\n case 'Bootstrap4':\n createBootstrap4Spinner(innerContainer, radius, makeElement);\n break;\n case 'Tailwind':\n case 'Tailwind-dark':\n createTailwindSpinner(innerContainer, radius, makeElement);\n break;\n }\n}\n/**\n *\n * @param {HTMLElement} innerContainer - specifies the element\n * @param {number} radius - specifies the radius\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\nfunction createBootstrapSpinner(innerContainer, radius, makeElement) {\n const uniqueID = random_generator();\n globalTimeOut[uniqueID] = { timeOut: 0, type: 'Bootstrap', radius: radius };\n create_bootstrap_element(innerContainer, uniqueID, makeElement);\n boot_calculate_attributes(innerContainer, radius);\n}\n/**\n *\n * @param {HTMLElement} innerContainer - specifies the element\n * @param {string} uniqueID - specifies the id\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\n// eslint-disable-next-line\nfunction create_bootstrap_element(innerContainer, uniqueID, makeElement) {\n const svgBoot = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n const viewBoxValue = 64;\n const trans = 32;\n const defaultRadius = 2;\n svgBoot.setAttribute('id', uniqueID);\n svgBoot.setAttribute('class', CLS_BOOTSPIN);\n svgBoot.setAttribute('viewBox', '0 0 ' + viewBoxValue + ' ' + viewBoxValue);\n innerContainer.insertBefore(svgBoot, innerContainer.firstChild);\n for (let item = 0; item <= 7; item++) {\n const bootCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');\n bootCircle.setAttribute('class', CLS_SPINCIRCLE + '_' + item);\n bootCircle.setAttribute('r', defaultRadius + '');\n bootCircle.setAttribute('transform', 'translate(' + trans + ',' + trans + ')');\n svgBoot.appendChild(bootCircle);\n }\n}\n/**\n *\n * @param {HTMLElement} innerContainer - specifies the element\n * @param {number} radius - specifies the radius\n * @returns {void}\n */\n// eslint-disable-next-line\nfunction boot_calculate_attributes(innerContainer, radius) {\n const svg = innerContainer.querySelector('svg.e-spin-bootstrap');\n const x = 0;\n const y = 0;\n const rad = 24;\n svg.style.width = svg.style.height = radius + 'px';\n let startArc = 90;\n for (let item = 0; item <= 7; item++) {\n const start = defineArcPoints(x, y, rad, startArc);\n const circleEle = svg.querySelector('.' + CLS_SPINCIRCLE + '_' + item);\n circleEle.setAttribute('cx', start.x + '');\n circleEle.setAttribute('cy', start.y + '');\n startArc = startArc >= 360 ? 0 : startArc;\n startArc = startArc + 45;\n }\n}\n/**\n *\n * @param {number} begin - specifies the number\n * @param {number} stop - specifirs the number\n * @returns {number[]} - returns the array of number\n */\nfunction generateSeries(begin, stop) {\n const series = [];\n const start = begin;\n const end = stop;\n // eslint-disable-next-line\n let increment = false, count = 1;\n formSeries(start);\n /**\n *\n * @param {number} i - specifies the number\n * @returns {void}\n */\n function formSeries(i) {\n series.push(i);\n if (i !== end || count === 1) {\n if (i <= start && i > 1 && !increment) {\n i = parseFloat((i - 0.2).toFixed(2));\n }\n else if (i === 1) {\n i = 7;\n i = parseFloat((i + 0.2).toFixed(2));\n increment = true;\n }\n else if (i < 8 && increment) {\n i = parseFloat((i + 0.2).toFixed(2));\n if (i === 8) {\n increment = false;\n }\n }\n else if (i <= 8 && !increment) {\n i = parseFloat((i - 0.2).toFixed(2));\n }\n ++count;\n formSeries(i);\n }\n }\n return series;\n}\n/**\n *\n * @param {HTMLElement} innerContainer - specifies the element\n * @returns {void}\n */\nfunction animateBootstrap(innerContainer) {\n const svg = innerContainer.querySelector('svg.e-spin-bootstrap');\n const id = svg.getAttribute('id');\n for (let i = 1; i <= 8; i++) {\n const circleEle = (innerContainer.getElementsByClassName('e-path-circle_' +\n (i === 8 ? 0 : i))[0]);\n rotation(circleEle, i, i, generateSeries(i, i), id);\n }\n /**\n *\n * @param {SVGCircleElement} circle - specifies the circl element\n * @param {number} start - specifies the number\n * @param {number} end - specifies the end number\n * @param {number} series - specifies the series\n * @param {string} id - specifies the id\n * @returns {void}\n */\n function rotation(circle, start, end, series, id) {\n let count = 0;\n boot_animate(start);\n // eslint-disable-next-line\n function boot_animate(radius) {\n if (globalTimeOut[id].isAnimate) {\n ++count;\n circle.setAttribute('r', radius + '');\n if (count >= series.length) {\n count = 0;\n }\n // eslint-disable-next-line\n globalTimeOut[id].timeOut = setTimeout(boot_animate.bind(null, series[count]), 18);\n }\n }\n }\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {string} template - specifies the template\n * @param {string} cssClass - specifies the css class.\n * @returns {void}\n */\nfunction replaceContent(container, template, cssClass) {\n if (!isNullOrUndefined(cssClass)) {\n container.classList.add(cssClass);\n }\n const inner = container.querySelector('.e-spinner-inner');\n inner.innerHTML = template;\n}\n/**\n *\n * @param {string} width - specifies the width\n * @param {string} theme - specifies the string\n * @returns {number} - returns the number\n */\nfunction calculateRadius(width, theme) {\n let defaultSize;\n switch (theme) {\n case 'Material':\n defaultSize = DEFT_MAT_WIDTH;\n break;\n case 'Fabric':\n defaultSize = DEFT_FAB_WIDTH;\n break;\n case 'Tailwind':\n case 'Tailwind-dark':\n defaultSize = DEFT_FAB_WIDTH;\n break;\n case 'Bootstrap4':\n defaultSize = DEFT_BOOT4_WIDTH;\n break;\n default:\n defaultSize = DEFT_BOOT_WIDTH;\n }\n width = width ? parseFloat(width + '') : defaultSize;\n return theme === 'Bootstrap' ? width : width / 2;\n}\n/**\n *\n * @param {string} id - specifies the id\n * @param {number} radius - specifies the radius\n * @param {number} count - specifies the number count\n * @param {number} previousId - specifies the previous id\n * @returns {GlobalVariables} - returns the variables\n */\nfunction globalVariables(id, radius, count, previousId) {\n return {\n radius: radius,\n count: count,\n previousId: previousId\n };\n}\n/**\n * @returns {string} - returns the string\n */\n// eslint-disable-next-line\nfunction random_generator() {\n let random = '';\n const combine = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n for (let i = 0; i < 5; i++) {\n random += combine.charAt(Math.floor(Math.random() * combine.length));\n }\n return random;\n}\n/**\n *\n * @param {HTMLElement} innerCon - specifies the element\n * @param {string} uniqueID - specifies the unique id\n * @param {string} themeClass - specifies the string\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\n// eslint-disable-next-line\nfunction create_fabric_element(innerCon, uniqueID, themeClass, makeElement) {\n const svgFabric = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n svgFabric.setAttribute('id', uniqueID);\n svgFabric.setAttribute('class', themeClass);\n const fabricCirclePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n fabricCirclePath.setAttribute('class', CLS_SPINCIRCLE);\n const fabricCircleArc = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n fabricCircleArc.setAttribute('class', CLS_SPINARC);\n innerCon.insertBefore(svgFabric, innerCon.firstChild);\n svgFabric.appendChild(fabricCirclePath);\n svgFabric.appendChild(fabricCircleArc);\n}\n/**\n *\n * @param {HTMLElement} innerContainer - specifies the element\n * @param {string} uniqueID - specifies the unique id\n * @param {createElementParams} makeElement - specifies the element\n * @param {string} cls - specifies the string\n * @returns {void}\n */\n// eslint-disable-next-line\nfunction create_material_element(innerContainer, uniqueID, makeElement, cls) {\n const svgMaterial = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n const matCirclePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n svgMaterial.setAttribute('class', cls);\n svgMaterial.setAttribute('id', uniqueID);\n matCirclePath.setAttribute('class', CLS_SPINCIRCLE);\n innerContainer.insertBefore(svgMaterial, innerContainer.firstChild);\n svgMaterial.appendChild(matCirclePath);\n}\n/**\n *\n * @param {HTMLElement} target - specifies the element\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\n// eslint-disable-next-line\nfunction create_spinner_container(target, makeElement) {\n const spinnerContainer = makeElement('div', {});\n const spinnerInnerContainer = makeElement('div', {});\n spinnerContainer.classList.add(CLS_SPINWRAP);\n spinnerInnerContainer.classList.add(CLS_SPININWRAP);\n target.appendChild(spinnerContainer);\n spinnerContainer.appendChild(spinnerInnerContainer);\n // eslint-disable-next-line\n return { wrap: spinnerContainer, inner_wrap: spinnerInnerContainer };\n}\n/**\n *\n * @param {SpinnerInfo} spinnerInfo - specifies the spinner\n * @returns {void}\n */\nfunction animateMaterial(spinnerInfo) {\n const start = 1;\n const end = 149;\n const duration = 1333;\n const max = 75;\n createCircle(start, end, easeAnimation, duration, spinnerInfo.globalInfo[spinnerInfo.uniqueID].count, max, spinnerInfo);\n spinnerInfo.globalInfo[spinnerInfo.uniqueID].count = ++spinnerInfo.globalInfo[spinnerInfo.uniqueID].count % 4;\n}\n/**\n *\n * @param {number} start - specifies the number\n * @param {number} end - specifies the end number\n * @param {Function} easing - specifies the function\n * @param {number} duration - specifies the duration\n * @param {number} count - specifies the count\n * @param {number} max - specifies the max number\n * @param {SpinnerInfo} spinnerInfo - specifies the spinner info\n * @returns {void}\n */\n// eslint-disable-next-line\nfunction createCircle(start, end, easing, duration, count, max, spinnerInfo) {\n const id = ++spinnerInfo.globalInfo[spinnerInfo.uniqueID].previousId;\n const startTime = new Date().getTime();\n const change = end - start;\n const diameter = getSize((spinnerInfo.globalInfo[spinnerInfo.uniqueID].radius * 2) + '');\n const strokeSize = getStrokeSize(diameter);\n const rotate = -90 * (spinnerInfo.globalInfo[spinnerInfo.uniqueID].count || 0);\n mat_animation(spinnerInfo);\n // eslint-disable-next-line\n function mat_animation(spinnerInfo) {\n const currentTime = Math.max(0, Math.min(new Date().getTime() - startTime, duration));\n updatePath(easing(currentTime, start, change, duration), spinnerInfo.container);\n if (id === spinnerInfo.globalInfo[spinnerInfo.uniqueID].previousId && currentTime < duration) {\n // eslint-disable-next-line\n globalTimeOut[spinnerInfo.uniqueID].timeOut = setTimeout(mat_animation.bind(null, spinnerInfo), 1);\n }\n else {\n animateMaterial(spinnerInfo);\n }\n }\n /**\n *\n * @param {number} value - specifies the number value\n * @param {HTMLElement} container - specifies the container\n * @returns {void}\n */\n function updatePath(value, container) {\n if ((!isNullOrUndefined(container.querySelector('svg.e-spin-material')))\n && (!isNullOrUndefined(container.querySelector('svg.e-spin-material').querySelector('path.e-path-circle')))) {\n const svg = container.querySelector('svg.e-spin-material');\n const path = svg.querySelector('path.e-path-circle');\n path.setAttribute('stroke-dashoffset', getDashOffset(diameter, strokeSize, value, max) + '');\n path.setAttribute('transform', 'rotate(' + (rotate) + ' ' + diameter / 2 + ' ' + diameter / 2 + ')');\n }\n }\n}\n/**\n *\n * @param {number} radius - specifies the number\n * @param {HTMLElement} container - specifies the element\n * @param {string} type - specifies the string type\n * @param {string} cls - specifies the string\n * @returns {void}\n */\n// eslint-disable-next-line\nfunction mat_calculate_attributes(radius, container, type, cls) {\n const diameter = radius * 2;\n const svg = container.querySelector('svg.' + cls);\n const path = svg.querySelector('path.e-path-circle');\n const strokeSize = getStrokeSize(diameter);\n const transformOrigin = (diameter / 2) + 'px';\n svg.setAttribute('viewBox', '0 0 ' + diameter + ' ' + diameter);\n svg.style.width = svg.style.height = diameter + 'px';\n svg.style.transformOrigin = transformOrigin + ' ' + transformOrigin + ' ' + transformOrigin;\n path.setAttribute('d', drawArc(diameter, strokeSize));\n if (type === 'Material') {\n path.setAttribute('stroke-width', strokeSize + '');\n path.setAttribute('stroke-dasharray', ((diameter - strokeSize) * Math.PI * 0.75) + '');\n path.setAttribute('stroke-dashoffset', getDashOffset(diameter, strokeSize, 1, 75) + '');\n }\n}\n/**\n *\n * @param {string} value - specifies the value\n * @returns {number} - returns the number\n */\nfunction getSize(value) {\n const parsed = parseFloat(value);\n return parsed;\n}\n/**\n *\n * @param {number} diameter - specifies the diameter\n * @param {number} strokeSize - specifies the size\n * @returns {string} - returns the string\n */\nfunction drawArc(diameter, strokeSize) {\n const radius = diameter / 2;\n const offset = strokeSize / 2;\n return 'M' + radius + ',' + offset\n + 'A' + (radius - offset) + ',' + (radius - offset) + ' 0 1 1 ' + offset + ',' + radius;\n}\n/**\n *\n * @param {number} diameter - specifies the number\n * @returns {number} - returns the number\n */\nfunction getStrokeSize(diameter) {\n return 10 / 100 * diameter;\n}\n/**\n *\n * @param {number} diameter - specifies the number\n * @param {number} strokeSize - specifies the stroke size\n * @param {number} value - specifies the value\n * @param {number} max - specifies the max number\n * @returns {number} - returns the number\n */\nfunction getDashOffset(diameter, strokeSize, value, max) {\n return (diameter - strokeSize) * Math.PI * ((3 * (max) / 100) - (value / 100));\n}\n/**\n *\n * @param {number} current - specifies the number\n * @param {number} start - specifies the stroke size\n * @param {number} change - specifies the value\n * @param {number} duration - specifies the max number\n * @returns {number} - returns the number\n */\nfunction easeAnimation(current, start, change, duration) {\n const timestamp = (current /= duration) * current;\n const timecount = timestamp * current;\n return start + change * (6 * timecount * timestamp + -15 * timestamp * timestamp + 10 * timecount);\n}\n/**\n *\n * @param {number} radius - specifies the number\n * @param {HTMLElement} innerConainer - specifies the element\n * @param {string} trgClass - specifies the class\n * @returns {void}\n */\n// eslint-disable-next-line\nfunction fb_calculate_attributes(radius, innerConainer, trgClass) {\n const centerX = radius;\n const centerY = radius;\n const diameter = radius * 2;\n // eslint-disable-next-line\n const startArc = 315, endArc = 45;\n const svg = innerConainer.querySelector('.' + trgClass);\n const circle = svg.querySelector('.e-path-circle');\n const path = svg.querySelector('.e-path-arc');\n const transformOrigin = (diameter / 2) + 'px';\n circle.setAttribute('d', defineCircle(centerX, centerY, radius));\n path.setAttribute('d', defineArc(centerX, centerY, radius, startArc, endArc));\n svg.setAttribute('viewBox', '0 0 ' + diameter + ' ' + diameter);\n svg.style.transformOrigin = transformOrigin + ' ' + transformOrigin + ' ' + transformOrigin;\n svg.style.width = svg.style.height = diameter + 'px';\n}\n/**\n *\n * @param {number} centerX - specifies the number\n * @param {number} centerY - specifies the stroke size\n * @param {number} radius - specifies the value\n * @param {number} angle - specifies the max number\n * @returns {number} - returns the number\n */\nfunction defineArcPoints(centerX, centerY, radius, angle) {\n const radians = (angle - 90) * Math.PI / 180.0;\n return {\n x: centerX + (radius * Math.cos(radians)),\n y: centerY + (radius * Math.sin(radians))\n };\n}\n/**\n *\n * @param {number} x - specifies the number\n * @param {number} y - specifies the stroke size\n * @param {number} radius - specifies the radius\n * @param {number} startArc - specifies the value\n * @param {number} endArc - specifies the max number\n * @returns {number} - returns the number\n */\nfunction defineArc(x, y, radius, startArc, endArc) {\n const start = defineArcPoints(x, y, radius, endArc);\n const end = defineArcPoints(x, y, radius, startArc);\n const d = [\n 'M', start.x, start.y,\n 'A', radius, radius, 0, 0, 0, end.x, end.y\n ].join(' ');\n return d;\n}\n/**\n *\n * @param {number} x - specifies the number\n * @param {number} y - specifies the stroke size\n * @param {number} radius - specifies the value\n * @returns {string} - returns the string\n */\nfunction defineCircle(x, y, radius) {\n const d = [\n 'M', x, y,\n 'm', -radius, 0,\n 'a', radius, radius, 0, 1, 0, radius * 2, 0,\n 'a', radius, radius, 0, 1, 0, -radius * 2, 0\n ].join(' ');\n return d;\n}\n// eslint-disable-next-line\n/**\n * Function to show the Spinner.\n *\n * @param {HTMLElement} container - Specify the target of the Spinner.\n * @returns {void}\n * @private\n */\nfunction showSpinner(container) {\n showHideSpinner(container, false);\n container = null;\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {boolean} isHide - specifies the boolean\n * @returns {void}\n */\nfunction showHideSpinner(container, isHide) {\n let spinnerWrap;\n if (container) {\n spinnerWrap = container.classList.contains(CLS_SPINWRAP) ? container :\n container.querySelector('.' + CLS_SPINWRAP);\n }\n if (container && spinnerWrap) {\n const inner = spinnerWrap.querySelector('.' + CLS_SPININWRAP);\n let spinCheck;\n // eslint-disable-next-line\n spinCheck = isHide ? !spinnerWrap.classList.contains(CLS_SPINTEMPLATE) && !spinnerWrap.classList.contains(CLS_HIDESPIN) :\n !spinnerWrap.classList.contains(CLS_SPINTEMPLATE) && !spinnerWrap.classList.contains(CLS_SHOWSPIN);\n if (spinCheck) {\n const svgEle = spinnerWrap.querySelector('svg');\n if (isNullOrUndefined(svgEle)) {\n return;\n }\n const id = svgEle.getAttribute('id');\n globalTimeOut[id].isAnimate = !isHide;\n switch (globalTimeOut[id].type) {\n case 'Material':\n // eslint-disable-next-line\n isHide ? clearTimeout(globalTimeOut[id].timeOut) : startMatAnimate(inner, id, globalTimeOut[id].radius);\n break;\n case 'Bootstrap':\n // eslint-disable-next-line\n isHide ? clearTimeout(globalTimeOut[id].timeOut) : animateBootstrap(inner);\n break;\n }\n }\n // eslint-disable-next-line\n isHide ? classList(spinnerWrap, [CLS_HIDESPIN], [CLS_SHOWSPIN]) : classList(spinnerWrap, [CLS_SHOWSPIN], [CLS_HIDESPIN]);\n container = null;\n }\n}\n/**\n * Function to hide the Spinner.\n *\n * @param {HTMLElement} container - Specify the target of the Spinner.\n * @returns {void}\n * @private\n */\nfunction hideSpinner(container) {\n showHideSpinner(container, true);\n container = null;\n}\n// eslint-disable-next-line\n/**\n * Function to change the Spinners in a page globally from application end.\n * ```\n * E.g : setSpinner({ cssClass: 'custom-css'; type: 'Material' });\n * ```\n *\n * @param {SetSpinnerArgs} args - specifies the args\n * @param {createElementParams} internalCreateElement - specifies the element params\n * @returns {void}\n * @private\n */\nfunction setSpinner(args, internalCreateElement) {\n const makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n if (args.template !== undefined) {\n spinTemplate = args.template;\n if (args.template !== undefined) {\n spinCSSClass = args.cssClass;\n }\n }\n const container = document.querySelectorAll('.' + CLS_SPINWRAP);\n for (let index = 0; index < container.length; index++) {\n ensureTemplate(args.template, container[index], args.type, args.cssClass, makeElement);\n }\n}\n/**\n *\n * @param {string} template - specifies the string\n * @param {HTMLElement} container - specifies the container\n * @param {string} theme - specifies the theme\n * @param {string} cssClass - specifies the string class\n * @param {createElementParams} makeEle - specifies the params\n * @returns {void}\n */\nfunction ensureTemplate(template, container, theme, cssClass, makeEle) {\n if (isNullOrUndefined(template) && !container.classList.contains(CLS_SPINTEMPLATE)) {\n replaceTheme(container, theme, cssClass, makeEle);\n if (container.classList.contains(CLS_SHOWSPIN)) {\n container.classList.remove(CLS_SHOWSPIN);\n showSpinner(container);\n }\n else {\n container.classList.remove(CLS_HIDESPIN);\n hideSpinner(container);\n }\n }\n else {\n spinTemplate = template;\n if (!isNullOrUndefined(cssClass)) {\n spinCSSClass = cssClass;\n }\n }\n}\n/**\n *\n * @param {HTMLElement} container - specifies the container\n * @param {string} theme - specifies the theme\n * @param {string} cssClass - specifies the string class\n * @param {createElementParams} makeEle - specifies the params\n * @returns {void}\n */\nfunction replaceTheme(container, theme, cssClass, makeEle) {\n if (!isNullOrUndefined(cssClass)) {\n container.classList.add(cssClass);\n }\n const svgElement = container.querySelector('svg');\n const radius = theme === 'Bootstrap' ? parseFloat(svgElement.style.height) : parseFloat(svgElement.style.height) / 2;\n const classNames = svgElement.getAttribute('class');\n const svgClassList = classNames.split(/\\s/);\n if (svgClassList.indexOf('e-spin-material') >= 0) {\n const id = svgElement.getAttribute('id');\n clearTimeout(globalTimeOut[id].timeOut);\n }\n setTheme(theme, container, radius, makeEle);\n}\n\n/**\n * spinner modules\n */\n\n/**\n * Popup Components\n */\n\nexport { PositionData, Popup, getScrollableParent, getZindexPartial, getMaxZindex, calculateRelativeBasedPosition, calculatePosition, fit, isCollide, flip, ButtonProps, AnimationSettings, Dialog, DialogUtility, Animation$1 as Animation, Tooltip, Spinner, createSpinner, showSpinner, hideSpinner, setSpinner };\n//# sourceMappingURL=ej2-popups.es2015.js.map\n","import { EventEmitter } from '@angular/core';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * Angular Utility Module\n */\n/* tslint:disable */\nexport function applyMixins(derivedClass, baseClass) {\n baseClass.forEach(function (baseClass) {\n Object.getOwnPropertyNames(baseClass.prototype).forEach(function (name) {\n if (!derivedClass.prototype.hasOwnProperty(name) || baseClass.isFormBase) {\n derivedClass.prototype[name] = baseClass.prototype[name];\n }\n });\n });\n}\n/* tslint:disable */\nexport function ComponentMixins(baseClass) {\n return function (derivedClass) {\n applyMixins(derivedClass, baseClass);\n };\n}\n/**\n * @private\n */\nexport function registerEvents(eventList, obj, direct) {\n var ngEventsEmitter = {};\n if (eventList && eventList.length) {\n for (var _i = 0, eventList_1 = eventList; _i < eventList_1.length; _i++) {\n var event_1 = eventList_1[_i];\n if (direct === true) {\n obj.propCollection[event_1] = new EventEmitter(false);\n obj[event_1] = obj.propCollection[event_1];\n }\n else {\n ngEventsEmitter[event_1] = new EventEmitter(false);\n }\n }\n if (direct !== true) {\n obj.setProperties(ngEventsEmitter, true);\n }\n }\n}\n/**\n * @private\n */\nexport function clearTemplate(_this, templateNames, index) {\n var regTemplates = Object.keys(_this.registeredTemplate);\n if (regTemplates.length) {\n /* istanbul ignore next */\n var regProperties = templateNames && templateNames.filter(function (val) {\n return (/\\./g.test(val) ? false : true);\n });\n for (var _i = 0, _a = (regProperties && regProperties || regTemplates); _i < _a.length; _i++) {\n var registeredTemplate = _a[_i];\n /* istanbul ignore next */\n if (index && index.length) {\n for (var e = 0; e < index.length; e++) {\n for (var m = 0; m < _this.registeredTemplate.template.length; m++) {\n var value = _this.registeredTemplate.template[m].rootNodes[0];\n if (value === index[e]) {\n var rt = _this.registeredTemplate[registeredTemplate];\n rt[m].destroy();\n }\n }\n }\n }\n else {\n if (_this.registeredTemplate[registeredTemplate]) {\n for (var _b = 0, _c = _this.registeredTemplate[registeredTemplate]; _b < _c.length; _b++) {\n var rt = _c[_b];\n if (!rt.destroyed) {\n if (rt._view) {\n var pNode = rt._view.renderer.parentNode(rt.rootNodes[0]);\n if (!isNullOrUndefined(pNode)) {\n for (var m = 0; m < rt.rootNodes.length; m++) {\n pNode.appendChild(rt.rootNodes[m]);\n }\n }\n }\n rt.destroy();\n }\n }\n }\n }\n delete _this.registeredTemplate[registeredTemplate];\n }\n }\n var _loop_1 = function (tagObject) {\n if (tagObject.instance) {\n /* istanbul ignore next */\n tagObject.instance.clearTemplate((templateNames && templateNames.filter(function (val) {\n return (new RegExp(tagObject.name).test(val) ? true : false);\n })));\n }\n };\n for (var _d = 0, _e = _this.tagObjects; _d < _e.length; _d++) {\n var tagObject = _e[_d];\n _loop_1(tagObject);\n }\n}\n/**\n * To set value for the nameSpace in desired object.\n * @param {string} nameSpace - String value to the get the inner object\n * @param {any} value - Value that you need to set.\n * @param {any} obj - Object to get the inner object value.\n * @return {void}\n * @private\n */\nexport function setValue(nameSpace, value, object) {\n var keys = nameSpace.replace(/\\[/g, '.').replace(/\\]/g, '').split('.');\n /* istanbul ignore next */\n var fromObj = object || {};\n for (var i = 0; i < keys.length; i++) {\n var key = keys[i];\n if (i + 1 === keys.length) {\n fromObj[key] = value === undefined ? {} : value;\n }\n else if (fromObj[key] === undefined) {\n fromObj[key] = {};\n }\n fromObj = fromObj[key];\n }\n return fromObj;\n}\n","import { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, Directive, ElementRef, Injector, NgModule, Renderer2, ViewContainerRef, forwardRef } from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { ArrayBase, ComplexBase, ComponentBase, ComponentMixins, FormBase, Template, setValue } from '@syncfusion/ej2-angular-base';\nimport { ColorPicker, FormValidator, MaskedTextBox, NumericTextBox, Slider, TextBox, Uploader } from '@syncfusion/ej2-inputs';\nimport { CommonModule } from '@angular/common';\n\nimport * as ɵngcc0 from '@angular/core';\n\nconst _c0 = [\"template\"];\nconst _c1 = [\"ejs-colorpicker\", \"\"];\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nvar __metadata = (this && this.__metadata) || function (k, v) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(k, v);\n};\nconst inputs = ['autocomplete', 'cssClass', 'enablePersistence', 'enableRtl', 'enabled', 'floatLabelType', 'htmlAttributes', 'locale', 'multiline', 'placeholder', 'readonly', 'showClearButton', 'type', 'value', 'width'];\nconst outputs = ['blur', 'change', 'created', 'destroyed', 'focus', 'input', 'valueChange'];\nconst twoWays = ['value'];\n/**\n * Represents the EJ2 Angular TextBox Component.\n * ```html\n *
\n * ```\n */\nlet TextBoxComponent = TextBoxComponent_1 = class TextBoxComponent extends TextBox {\n /**\n * @param {?} ngEle\n * @param {?} srenderer\n * @param {?} viewContainerRef\n * @param {?} injector\n */\n constructor(ngEle, srenderer, viewContainerRef, injector) {\n super();\n this.ngEle = ngEle;\n this.srenderer = srenderer;\n this.viewContainerRef = viewContainerRef;\n this.injector = injector;\n this.skipFromEvent = true;\n this.element = this.ngEle.nativeElement;\n this.injectedModules = this.injectedModules || [];\n this.registerEvents(outputs);\n this.addTwoWay.call(this, twoWays);\n setValue('currentInstance', this, this.viewContainerRef);\n this.formContext = new FormBase();\n this.formCompContext = new ComponentBase();\n }\n /**\n * @param {?} registerFunction\n * @return {?}\n */\n registerOnChange(registerFunction) {\n }\n /**\n * @param {?} registerFunction\n * @return {?}\n */\n registerOnTouched(registerFunction) {\n }\n /**\n * @param {?} value\n * @return {?}\n */\n writeValue(value) {\n }\n /**\n * @param {?} disabled\n * @return {?}\n */\n setDisabledState(disabled) {\n }\n /**\n * @return {?}\n */\n ngOnInit() {\n this.formCompContext.ngOnInit(this);\n }\n /**\n * @return {?}\n */\n ngAfterViewInit() {\n this.formContext.ngAfterViewInit(this);\n }\n /**\n * @return {?}\n */\n ngOnDestroy() {\n this.formCompContext.ngOnDestroy(this);\n }\n /**\n * @return {?}\n */\n ngAfterContentChecked() {\n this.formCompContext.ngAfterContentChecked(this);\n }\n};\nTextBoxComponent.ɵfac = function TextBoxComponent_Factory(t) { return new (t || TextBoxComponent)(ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ElementRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.Renderer2), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ViewContainerRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.Injector)); };\nTextBoxComponent.ɵcmp = ɵngcc0.ɵɵdefineComponent({ type: TextBoxComponent, selectors: [[\"ejs-textbox\"]], inputs: { autocomplete: \"autocomplete\", cssClass: \"cssClass\", enablePersistence: \"enablePersistence\", enableRtl: \"enableRtl\", enabled: \"enabled\", floatLabelType: \"floatLabelType\", htmlAttributes: \"htmlAttributes\", locale: \"locale\", multiline: \"multiline\", placeholder: \"placeholder\", readonly: \"readonly\", showClearButton: \"showClearButton\", type: \"type\", value: \"value\", width: \"width\" }, outputs: { blur: \"blur\", change: \"change\", created: \"created\", destroyed: \"destroyed\", focus: \"focus\", input: \"input\", valueChange: \"valueChange\" }, features: [ɵngcc0.ɵɵProvidersFeature([\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => TextBoxComponent_1),\n multi: true\n }\n ]), ɵngcc0.ɵɵInheritDefinitionFeature], decls: 0, vars: 0, template: function TextBoxComponent_Template(rf, ctx) { }, encapsulation: 2, changeDetection: 0 });\n/**\n * @nocollapse\n */\nTextBoxComponent.ctorParameters = () => [\n { type: ElementRef, },\n { type: Renderer2, },\n { type: ViewContainerRef, },\n { type: Injector, },\n];\nTextBoxComponent = TextBoxComponent_1 = __decorate([\n ComponentMixins([ComponentBase, FormBase]),\n __metadata(\"design:paramtypes\", [ElementRef,\n Renderer2,\n ViewContainerRef,\n Injector])\n], TextBoxComponent);\nvar TextBoxComponent_1;\n\n/**\n * NgModule definition for the TextBox component.\n */\nclass TextBoxModule {\n}\nTextBoxModule.ɵmod = ɵngcc0.ɵɵdefineNgModule({ type: TextBoxModule });\nTextBoxModule.ɵinj = ɵngcc0.ɵɵdefineInjector({ factory: function TextBoxModule_Factory(t) { return new (t || TextBoxModule)(); }, imports: [[CommonModule]] });\n/**\n * @nocollapse\n */\nTextBoxModule.ctorParameters = () => [];\n\n/**\n * NgModule definition for the TextBox component with providers.\n */\nclass TextBoxAllModule {\n}\nTextBoxAllModule.ɵmod = ɵngcc0.ɵɵdefineNgModule({ type: TextBoxAllModule });\nTextBoxAllModule.ɵinj = ɵngcc0.ɵɵdefineInjector({ factory: function TextBoxAllModule_Factory(t) { return new (t || TextBoxAllModule)(); }, providers: [], imports: [[CommonModule, TextBoxModule], TextBoxModule] });\n/**\n * @nocollapse\n */\nTextBoxAllModule.ctorParameters = () => [];\n\nvar __decorate$1 = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nvar __metadata$1 = (this && this.__metadata) || function (k, v) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(k, v);\n};\nconst inputs$1 = ['cssClass', 'currency', 'currencyCode', 'decimals', 'enablePersistence', 'enableRtl', 'enabled', 'floatLabelType', 'format', 'htmlAttributes', 'locale', 'max', 'min', 'placeholder', 'readonly', 'showClearButton', 'showSpinButton', 'step', 'strictMode', 'validateDecimalOnType', 'value', 'width'];\nconst outputs$1 = ['blur', 'change', 'created', 'destroyed', 'focus', 'valueChange'];\nconst twoWays$1 = ['value'];\n/**\n * Represents the EJ2 Angular NumericTextBox Component.\n * ```html\n *
\n * ```\n */\nlet NumericTextBoxComponent = NumericTextBoxComponent_1 = class NumericTextBoxComponent extends NumericTextBox {\n /**\n * @param {?} ngEle\n * @param {?} srenderer\n * @param {?} viewContainerRef\n * @param {?} injector\n */\n constructor(ngEle, srenderer, viewContainerRef, injector) {\n super();\n this.ngEle = ngEle;\n this.srenderer = srenderer;\n this.viewContainerRef = viewContainerRef;\n this.injector = injector;\n this.skipFromEvent = true;\n this.element = this.ngEle.nativeElement;\n this.injectedModules = this.injectedModules || [];\n this.registerEvents(outputs$1);\n this.addTwoWay.call(this, twoWays$1);\n setValue('currentInstance', this, this.viewContainerRef);\n this.formContext = new FormBase();\n this.formCompContext = new ComponentBase();\n }\n /**\n * @param {?} registerFunction\n * @return {?}\n */\n registerOnChange(registerFunction) {\n }\n /**\n * @param {?} registerFunction\n * @return {?}\n */\n registerOnTouched(registerFunction) {\n }\n /**\n * @param {?} value\n * @return {?}\n */\n writeValue(value) {\n }\n /**\n * @param {?} disabled\n * @return {?}\n */\n setDisabledState(disabled) {\n }\n /**\n * @return {?}\n */\n ngOnInit() {\n this.formCompContext.ngOnInit(this);\n }\n /**\n * @return {?}\n */\n ngAfterViewInit() {\n this.formContext.ngAfterViewInit(this);\n }\n /**\n * @return {?}\n */\n ngOnDestroy() {\n this.formCompContext.ngOnDestroy(this);\n }\n /**\n * @return {?}\n */\n ngAfterContentChecked() {\n this.formCompContext.ngAfterContentChecked(this);\n }\n};\nNumericTextBoxComponent.ɵfac = function NumericTextBoxComponent_Factory(t) { return new (t || NumericTextBoxComponent)(ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ElementRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.Renderer2), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ViewContainerRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.Injector)); };\nNumericTextBoxComponent.ɵcmp = ɵngcc0.ɵɵdefineComponent({ type: NumericTextBoxComponent, selectors: [[\"ejs-numerictextbox\"]], inputs: { cssClass: \"cssClass\", currency: \"currency\", currencyCode: \"currencyCode\", decimals: \"decimals\", enablePersistence: \"enablePersistence\", enableRtl: \"enableRtl\", enabled: \"enabled\", floatLabelType: \"floatLabelType\", format: \"format\", htmlAttributes: \"htmlAttributes\", locale: \"locale\", max: \"max\", min: \"min\", placeholder: \"placeholder\", readonly: \"readonly\", showClearButton: \"showClearButton\", showSpinButton: \"showSpinButton\", step: \"step\", strictMode: \"strictMode\", validateDecimalOnType: \"validateDecimalOnType\", value: \"value\", width: \"width\" }, outputs: { blur: \"blur\", change: \"change\", created: \"created\", destroyed: \"destroyed\", focus: \"focus\", valueChange: \"valueChange\" }, features: [ɵngcc0.ɵɵProvidersFeature([\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => NumericTextBoxComponent_1),\n multi: true\n }\n ]), ɵngcc0.ɵɵInheritDefinitionFeature], decls: 0, vars: 0, template: function NumericTextBoxComponent_Template(rf, ctx) { }, encapsulation: 2, changeDetection: 0 });\n/**\n * @nocollapse\n */\nNumericTextBoxComponent.ctorParameters = () => [\n { type: ElementRef, },\n { type: Renderer2, },\n { type: ViewContainerRef, },\n { type: Injector, },\n];\nNumericTextBoxComponent = NumericTextBoxComponent_1 = __decorate$1([\n ComponentMixins([ComponentBase, FormBase]),\n __metadata$1(\"design:paramtypes\", [ElementRef,\n Renderer2,\n ViewContainerRef,\n Injector])\n], NumericTextBoxComponent);\nvar NumericTextBoxComponent_1;\n\n/**\n * NgModule definition for the NumericTextBox component.\n */\nclass NumericTextBoxModule {\n}\nNumericTextBoxModule.ɵmod = ɵngcc0.ɵɵdefineNgModule({ type: NumericTextBoxModule });\nNumericTextBoxModule.ɵinj = ɵngcc0.ɵɵdefineInjector({ factory: function NumericTextBoxModule_Factory(t) { return new (t || NumericTextBoxModule)(); }, imports: [[CommonModule]] });\n/**\n * @nocollapse\n */\nNumericTextBoxModule.ctorParameters = () => [];\n\n/**\n * NgModule definition for the NumericTextBox component with providers.\n */\nclass NumericTextBoxAllModule {\n}\nNumericTextBoxAllModule.ɵmod = ɵngcc0.ɵɵdefineNgModule({ type: NumericTextBoxAllModule });\nNumericTextBoxAllModule.ɵinj = ɵngcc0.ɵɵdefineInjector({ factory: function NumericTextBoxAllModule_Factory(t) { return new (t || NumericTextBoxAllModule)(); }, providers: [], imports: [[CommonModule, NumericTextBoxModule], NumericTextBoxModule] });\n/**\n * @nocollapse\n */\nNumericTextBoxAllModule.ctorParameters = () => [];\n\nvar __decorate$2 = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nvar __metadata$2 = (this && this.__metadata) || function (k, v) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(k, v);\n};\nconst inputs$2 = ['cssClass', 'customCharacters', 'enablePersistence', 'enableRtl', 'enabled', 'floatLabelType', 'htmlAttributes', 'locale', 'mask', 'placeholder', 'promptChar', 'readonly', 'showClearButton', 'value', 'width'];\nconst outputs$2 = ['blur', 'change', 'created', 'destroyed', 'focus', 'valueChange'];\nconst twoWays$2 = ['value'];\n/**\n * Represents the EJ2 Angular MaskedTextbox Component.\n * ```html\n *
\n * ```\n */\nlet MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxComponent extends MaskedTextBox {\n /**\n * @param {?} ngEle\n * @param {?} srenderer\n * @param {?} viewContainerRef\n * @param {?} injector\n */\n constructor(ngEle, srenderer, viewContainerRef, injector) {\n super();\n this.ngEle = ngEle;\n this.srenderer = srenderer;\n this.viewContainerRef = viewContainerRef;\n this.injector = injector;\n this.skipFromEvent = true;\n this.element = this.ngEle.nativeElement;\n this.injectedModules = this.injectedModules || [];\n this.registerEvents(outputs$2);\n this.addTwoWay.call(this, twoWays$2);\n setValue('currentInstance', this, this.viewContainerRef);\n this.formContext = new FormBase();\n this.formCompContext = new ComponentBase();\n }\n /**\n * @param {?} registerFunction\n * @return {?}\n */\n registerOnChange(registerFunction) {\n }\n /**\n * @param {?} registerFunction\n * @return {?}\n */\n registerOnTouched(registerFunction) {\n }\n /**\n * @param {?} value\n * @return {?}\n */\n writeValue(value) {\n }\n /**\n * @param {?} disabled\n * @return {?}\n */\n setDisabledState(disabled) {\n }\n /**\n * @return {?}\n */\n ngOnInit() {\n this.formCompContext.ngOnInit(this);\n }\n /**\n * @return {?}\n */\n ngAfterViewInit() {\n this.formContext.ngAfterViewInit(this);\n }\n /**\n * @return {?}\n */\n ngOnDestroy() {\n this.formCompContext.ngOnDestroy(this);\n }\n /**\n * @return {?}\n */\n ngAfterContentChecked() {\n this.formCompContext.ngAfterContentChecked(this);\n }\n};\nMaskedTextBoxComponent.ɵfac = function MaskedTextBoxComponent_Factory(t) { return new (t || MaskedTextBoxComponent)(ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ElementRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.Renderer2), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ViewContainerRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.Injector)); };\nMaskedTextBoxComponent.ɵcmp = ɵngcc0.ɵɵdefineComponent({ type: MaskedTextBoxComponent, selectors: [[\"ejs-maskedtextbox\"]], inputs: { cssClass: \"cssClass\", customCharacters: \"customCharacters\", enablePersistence: \"enablePersistence\", enableRtl: \"enableRtl\", enabled: \"enabled\", floatLabelType: \"floatLabelType\", htmlAttributes: \"htmlAttributes\", locale: \"locale\", mask: \"mask\", placeholder: \"placeholder\", promptChar: \"promptChar\", readonly: \"readonly\", showClearButton: \"showClearButton\", value: \"value\", width: \"width\" }, outputs: { blur: \"blur\", change: \"change\", created: \"created\", destroyed: \"destroyed\", focus: \"focus\", valueChange: \"valueChange\" }, features: [ɵngcc0.ɵɵProvidersFeature([\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => MaskedTextBoxComponent_1),\n multi: true\n }\n ]), ɵngcc0.ɵɵInheritDefinitionFeature], decls: 0, vars: 0, template: function MaskedTextBoxComponent_Template(rf, ctx) { }, encapsulation: 2, changeDetection: 0 });\n/**\n * @nocollapse\n */\nMaskedTextBoxComponent.ctorParameters = () => [\n { type: ElementRef, },\n { type: Renderer2, },\n { type: ViewContainerRef, },\n { type: Injector, },\n];\nMaskedTextBoxComponent = MaskedTextBoxComponent_1 = __decorate$2([\n ComponentMixins([ComponentBase, FormBase]),\n __metadata$2(\"design:paramtypes\", [ElementRef,\n Renderer2,\n ViewContainerRef,\n Injector])\n], MaskedTextBoxComponent);\nvar MaskedTextBoxComponent_1;\n\n/**\n * NgModule definition for the MaskedTextBox component.\n */\nclass MaskedTextBoxModule {\n}\nMaskedTextBoxModule.ɵmod = ɵngcc0.ɵɵdefineNgModule({ type: MaskedTextBoxModule });\nMaskedTextBoxModule.ɵinj = ɵngcc0.ɵɵdefineInjector({ factory: function MaskedTextBoxModule_Factory(t) { return new (t || MaskedTextBoxModule)(); }, imports: [[CommonModule]] });\n/**\n * @nocollapse\n */\nMaskedTextBoxModule.ctorParameters = () => [];\n\n/**\n * NgModule definition for the MaskedTextBox component with providers.\n */\nclass MaskedTextBoxAllModule {\n}\nMaskedTextBoxAllModule.ɵmod = ɵngcc0.ɵɵdefineNgModule({ type: MaskedTextBoxAllModule });\nMaskedTextBoxAllModule.ɵinj = ɵngcc0.ɵɵdefineInjector({ factory: function MaskedTextBoxAllModule_Factory(t) { return new (t || MaskedTextBoxAllModule)(); }, providers: [], imports: [[CommonModule, MaskedTextBoxModule], MaskedTextBoxModule] });\n/**\n * @nocollapse\n */\nMaskedTextBoxAllModule.ctorParameters = () => [];\n\nvar __decorate$3 = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nvar __metadata$3 = (this && this.__metadata) || function (k, v) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(k, v);\n};\nconst inputs$3 = ['colorRange', 'cssClass', 'customValues', 'enableAnimation', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enabled', 'limits', 'locale', 'max', 'min', 'orientation', 'readonly', 'showButtons', 'step', 'ticks', 'tooltip', 'type', 'value', 'width'];\nconst outputs$3 = ['focus', 'blur', 'change', 'changed', 'created', 'renderedTicks', 'renderingTicks', 'tooltipChange', 'valueChange'];\nconst twoWays$3 = ['value'];\n/**\n * Represents the EJ2 Angular Slider Component.\n * ```html\n *
\n * ```\n */\nlet SliderComponent = SliderComponent_1 = class SliderComponent extends Slider {\n /**\n * @param {?} ngEle\n * @param {?} srenderer\n * @param {?} viewContainerRef\n * @param {?} injector\n */\n constructor(ngEle, srenderer, viewContainerRef, injector) {\n super();\n this.ngEle = ngEle;\n this.srenderer = srenderer;\n this.viewContainerRef = viewContainerRef;\n this.injector = injector;\n this.element = this.ngEle.nativeElement;\n this.injectedModules = this.injectedModules || [];\n this.registerEvents(outputs$3);\n this.addTwoWay.call(this, twoWays$3);\n setValue('currentInstance', this, this.viewContainerRef);\n this.formContext = new FormBase();\n this.formCompContext = new ComponentBase();\n }\n /**\n * @param {?} registerFunction\n * @return {?}\n */\n registerOnChange(registerFunction) {\n }\n /**\n * @param {?} registerFunction\n * @return {?}\n */\n registerOnTouched(registerFunction) {\n }\n /**\n * @param {?} value\n * @return {?}\n */\n writeValue(value) {\n }\n /**\n * @param {?} disabled\n * @return {?}\n */\n setDisabledState(disabled) {\n }\n /**\n * @return {?}\n */\n ngOnInit() {\n this.formCompContext.ngOnInit(this);\n }\n /**\n * @return {?}\n */\n ngAfterViewInit() {\n this.formContext.ngAfterViewInit(this);\n }\n /**\n * @return {?}\n */\n ngOnDestroy() {\n this.formCompContext.ngOnDestroy(this);\n }\n /**\n * @return {?}\n */\n ngAfterContentChecked() {\n this.formCompContext.ngAfterContentChecked(this);\n }\n};\nSliderComponent.ɵfac = function SliderComponent_Factory(t) { return new (t || SliderComponent)(ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ElementRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.Renderer2), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ViewContainerRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.Injector)); };\nSliderComponent.ɵcmp = ɵngcc0.ɵɵdefineComponent({ type: SliderComponent, selectors: [[\"ejs-slider\"]], inputs: { colorRange: \"colorRange\", cssClass: \"cssClass\", customValues: \"customValues\", enableAnimation: \"enableAnimation\", enableHtmlSanitizer: \"enableHtmlSanitizer\", enablePersistence: \"enablePersistence\", enableRtl: \"enableRtl\", enabled: \"enabled\", limits: \"limits\", locale: \"locale\", max: \"max\", min: \"min\", orientation: \"orientation\", readonly: \"readonly\", showButtons: \"showButtons\", step: \"step\", ticks: \"ticks\", tooltip: \"tooltip\", type: \"type\", value: \"value\", width: \"width\" }, outputs: { focus: \"focus\", blur: \"blur\", change: \"change\", changed: \"changed\", created: \"created\", renderedTicks: \"renderedTicks\", renderingTicks: \"renderingTicks\", tooltipChange: \"tooltipChange\", valueChange: \"valueChange\" }, features: [ɵngcc0.ɵɵProvidersFeature([\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SliderComponent_1),\n multi: true\n }\n ]), ɵngcc0.ɵɵInheritDefinitionFeature], decls: 0, vars: 0, template: function SliderComponent_Template(rf, ctx) { }, encapsulation: 2, changeDetection: 0 });\n/**\n * @nocollapse\n */\nSliderComponent.ctorParameters = () => [\n { type: ElementRef, },\n { type: Renderer2, },\n { type: ViewContainerRef, },\n { type: Injector, },\n];\nSliderComponent = SliderComponent_1 = __decorate$3([\n ComponentMixins([ComponentBase, FormBase]),\n __metadata$3(\"design:paramtypes\", [ElementRef,\n Renderer2,\n ViewContainerRef,\n Injector])\n], SliderComponent);\nvar SliderComponent_1;\n\n/**\n * NgModule definition for the Slider component.\n */\nclass SliderModule {\n}\nSliderModule.ɵmod = ɵngcc0.ɵɵdefineNgModule({ type: SliderModule });\nSliderModule.ɵinj = ɵngcc0.ɵɵdefineInjector({ factory: function SliderModule_Factory(t) { return new (t || SliderModule)(); }, imports: [[CommonModule]] });\n/**\n * @nocollapse\n */\nSliderModule.ctorParameters = () => [];\n\n/**\n * NgModule definition for the Slider component with providers.\n */\nclass SliderAllModule {\n}\nSliderAllModule.ɵmod = ɵngcc0.ɵɵdefineNgModule({ type: SliderAllModule });\nSliderAllModule.ɵinj = ɵngcc0.ɵɵdefineInjector({ factory: function SliderAllModule_Factory(t) { return new (t || SliderAllModule)(); }, providers: [], imports: [[CommonModule, SliderModule], SliderModule] });\n/**\n * @nocollapse\n */\nSliderAllModule.ctorParameters = () => [];\n\nlet input = ['name', 'size', 'type'];\nlet outputs$4 = [];\n/**\n * 'e-files' directive represent a file of angular uploader\n * It must be contained in a Uploader component(`ejs-uploader`).\n * ```html\n *
\n * \n * \n * \n * \n * \n * ```\n */\nclass UploadedFilesDirective extends ComplexBase {\n /**\n * @param {?} viewContainerRef\n */\n constructor(viewContainerRef) {\n super();\n this.viewContainerRef = viewContainerRef;\n setValue('currentInstance', this, this.viewContainerRef);\n this.registerEvents(outputs$4);\n this.directivePropList = input;\n }\n}\nUploadedFilesDirective.ɵfac = function UploadedFilesDirective_Factory(t) { return new (t || UploadedFilesDirective)(ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ViewContainerRef)); };\nUploadedFilesDirective.ɵdir = ɵngcc0.ɵɵdefineDirective({ type: UploadedFilesDirective, selectors: [[\"e-uploadedfiles\"]], inputs: { name: \"name\", size: \"size\", type: \"type\" }, features: [ɵngcc0.ɵɵInheritDefinitionFeature] });\n/**\n * @nocollapse\n */\nUploadedFilesDirective.ctorParameters = () => [\n { type: ViewContainerRef, },\n];\n/**\n * UploadedFiles Array Directive\n */\nclass FilesDirective extends ArrayBase {\n constructor() {\n super('files');\n }\n}\nFilesDirective.ɵfac = function FilesDirective_Factory(t) { return new (t || FilesDirective)(); };\nFilesDirective.ɵdir = ɵngcc0.ɵɵdefineDirective({ type: FilesDirective, selectors: [[\"e-files\"]], contentQueries: function FilesDirective_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {\n ɵngcc0.ɵɵcontentQuery(dirIndex, UploadedFilesDirective, false);\n } if (rf & 2) {\n var _t;\n ɵngcc0.ɵɵqueryRefresh(_t = ɵngcc0.ɵɵloadQuery()) && (ctx.children = _t);\n } }, features: [ɵngcc0.ɵɵInheritDefinitionFeature] });\n/**\n * @nocollapse\n */\nFilesDirective.ctorParameters = () => [];\n\nvar __decorate$4 = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nvar __metadata$4 = (this && this.__metadata) || function (k, v) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(k, v);\n};\nconst inputs$4 = ['allowedExtensions', 'asyncSettings', 'autoUpload', 'buttons', 'cssClass', 'directoryUpload', 'dropArea', 'dropEffect', 'enablePersistence', 'enableRtl', 'enabled', 'files', 'htmlAttributes', 'locale', 'maxFileSize', 'minFileSize', 'multiple', 'sequentialUpload', 'showFileList', 'template'];\nconst outputs$5 = ['focus', 'blur', 'actionComplete', 'beforeRemove', 'beforeUpload', 'canceling', 'change', 'chunkFailure', 'chunkSuccess', 'chunkUploading', 'clearing', 'created', 'failure', 'fileListRendering', 'pausing', 'progress', 'removing', 'rendering', 'resuming', 'selected', 'success', 'uploading'];\nconst twoWays$4 = [];\n/**\n * Represents the EJ2 Angular Uploader Component.\n * ```html\n *
\n * ```\n */\nlet UploaderComponent = UploaderComponent_1 = class UploaderComponent extends Uploader {\n /**\n * @param {?} ngEle\n * @param {?} srenderer\n * @param {?} viewContainerRef\n * @param {?} injector\n */\n constructor(ngEle, srenderer, viewContainerRef, injector) {\n super();\n this.ngEle = ngEle;\n this.srenderer = srenderer;\n this.viewContainerRef = viewContainerRef;\n this.injector = injector;\n this.tags = ['files'];\n this.element = this.ngEle.nativeElement;\n this.injectedModules = this.injectedModules || [];\n this.registerEvents(outputs$5);\n this.addTwoWay.call(this, twoWays$4);\n setValue('currentInstance', this, this.viewContainerRef);\n this.formContext = new FormBase();\n this.formCompContext = new ComponentBase();\n }\n /**\n * @param {?} registerFunction\n * @return {?}\n */\n registerOnChange(registerFunction) {\n }\n /**\n * @param {?} registerFunction\n * @return {?}\n */\n registerOnTouched(registerFunction) {\n }\n /**\n * @param {?} value\n * @return {?}\n */\n writeValue(value) {\n }\n /**\n * @param {?} disabled\n * @return {?}\n */\n setDisabledState(disabled) {\n }\n /**\n * @return {?}\n */\n ngOnInit() {\n this.formCompContext.ngOnInit(this);\n }\n /**\n * @return {?}\n */\n ngAfterViewInit() {\n this.formContext.ngAfterViewInit(this);\n }\n /**\n * @return {?}\n */\n ngOnDestroy() {\n this.formCompContext.ngOnDestroy(this);\n }\n /**\n * @return {?}\n */\n ngAfterContentChecked() {\n this.tagObjects[0].instance = this.childFiles;\n this.formCompContext.ngAfterContentChecked(this);\n }\n};\nUploaderComponent.ɵfac = function UploaderComponent_Factory(t) { return new (t || UploaderComponent)(ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ElementRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.Renderer2), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ViewContainerRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.Injector)); };\nUploaderComponent.ɵcmp = ɵngcc0.ɵɵdefineComponent({ type: UploaderComponent, selectors: [[\"ejs-uploader\"]], contentQueries: function UploaderComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {\n ɵngcc0.ɵɵcontentQuery(dirIndex, _c0, true);\n ɵngcc0.ɵɵcontentQuery(dirIndex, FilesDirective, true);\n } if (rf & 2) {\n var _t;\n ɵngcc0.ɵɵqueryRefresh(_t = ɵngcc0.ɵɵloadQuery()) && (ctx.template = _t.first);\n ɵngcc0.ɵɵqueryRefresh(_t = ɵngcc0.ɵɵloadQuery()) && (ctx.childFiles = _t.first);\n } }, inputs: { allowedExtensions: \"allowedExtensions\", asyncSettings: \"asyncSettings\", autoUpload: \"autoUpload\", buttons: \"buttons\", cssClass: \"cssClass\", directoryUpload: \"directoryUpload\", dropArea: \"dropArea\", dropEffect: \"dropEffect\", enablePersistence: \"enablePersistence\", enableRtl: \"enableRtl\", enabled: \"enabled\", files: \"files\", htmlAttributes: \"htmlAttributes\", locale: \"locale\", maxFileSize: \"maxFileSize\", minFileSize: \"minFileSize\", multiple: \"multiple\", sequentialUpload: \"sequentialUpload\", showFileList: \"showFileList\", template: \"template\" }, outputs: { focus: \"focus\", blur: \"blur\", actionComplete: \"actionComplete\", beforeRemove: \"beforeRemove\", beforeUpload: \"beforeUpload\", canceling: \"canceling\", change: \"change\", chunkFailure: \"chunkFailure\", chunkSuccess: \"chunkSuccess\", chunkUploading: \"chunkUploading\", clearing: \"clearing\", created: \"created\", failure: \"failure\", fileListRendering: \"fileListRendering\", pausing: \"pausing\", progress: \"progress\", removing: \"removing\", rendering: \"rendering\", resuming: \"resuming\", selected: \"selected\", success: \"success\", uploading: \"uploading\" }, features: [ɵngcc0.ɵɵProvidersFeature([\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => UploaderComponent_1),\n multi: true\n }\n ]), ɵngcc0.ɵɵInheritDefinitionFeature], decls: 0, vars: 0, template: function UploaderComponent_Template(rf, ctx) { }, encapsulation: 2, changeDetection: 0 });\n/**\n * @nocollapse\n */\nUploaderComponent.ctorParameters = () => [\n { type: ElementRef, },\n { type: Renderer2, },\n { type: ViewContainerRef, },\n { type: Injector, },\n];\nUploaderComponent.propDecorators = {\n 'template': [{ type: ContentChild, args: ['template',] },],\n};\n__decorate$4([\n Template(),\n __metadata$4(\"design:type\", Object)\n], UploaderComponent.prototype, \"template\", void 0);\nUploaderComponent = UploaderComponent_1 = __decorate$4([\n ComponentMixins([ComponentBase, FormBase]),\n __metadata$4(\"design:paramtypes\", [ElementRef,\n Renderer2,\n ViewContainerRef,\n Injector])\n], UploaderComponent);\nvar UploaderComponent_1;\n\n/**\n * NgModule definition for the Uploader component.\n */\nclass UploaderModule {\n}\nUploaderModule.ɵmod = ɵngcc0.ɵɵdefineNgModule({ type: UploaderModule });\nUploaderModule.ɵinj = ɵngcc0.ɵɵdefineInjector({ factory: function UploaderModule_Factory(t) { return new (t || UploaderModule)(); }, imports: [[CommonModule]] });\n/**\n * @nocollapse\n */\nUploaderModule.ctorParameters = () => [];\n\n/**\n * NgModule definition for the Uploader component with providers.\n */\nclass UploaderAllModule {\n}\nUploaderAllModule.ɵmod = ɵngcc0.ɵɵdefineNgModule({ type: UploaderAllModule });\nUploaderAllModule.ɵinj = ɵngcc0.ɵɵdefineInjector({ factory: function UploaderAllModule_Factory(t) { return new (t || UploaderAllModule)(); }, providers: [], imports: [[CommonModule, UploaderModule], UploaderModule] });\n/**\n * @nocollapse\n */\nUploaderAllModule.ctorParameters = () => [];\n\nvar __decorate$5 = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nvar __metadata$5 = (this && this.__metadata) || function (k, v) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(k, v);\n};\nconst inputs$5 = ['columns', 'cssClass', 'disabled', 'enableOpacity', 'enablePersistence', 'enableRtl', 'inline', 'locale', 'mode', 'modeSwitcher', 'noColor', 'presetColors', 'showButtons', 'value'];\nconst outputs$6 = ['focus', 'blur', 'beforeClose', 'beforeModeSwitch', 'beforeOpen', 'beforeTileRender', 'change', 'created', 'onModeSwitch', 'open', 'select', 'valueChange'];\nconst twoWays$5 = ['value'];\n/**\n * Represents the EJ2 Angular ColorPicker Component.\n * ```html\n *
\n * ```\n */\nlet ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent extends ColorPicker {\n /**\n * @param {?} ngEle\n * @param {?} srenderer\n * @param {?} viewContainerRef\n * @param {?} injector\n */\n constructor(ngEle, srenderer, viewContainerRef, injector) {\n super();\n this.ngEle = ngEle;\n this.srenderer = srenderer;\n this.viewContainerRef = viewContainerRef;\n this.injector = injector;\n this.element = this.ngEle.nativeElement;\n this.injectedModules = this.injectedModules || [];\n this.registerEvents(outputs$6);\n this.addTwoWay.call(this, twoWays$5);\n setValue('currentInstance', this, this.viewContainerRef);\n this.formContext = new FormBase();\n this.formCompContext = new ComponentBase();\n }\n /**\n * @param {?} registerFunction\n * @return {?}\n */\n registerOnChange(registerFunction) {\n }\n /**\n * @param {?} registerFunction\n * @return {?}\n */\n registerOnTouched(registerFunction) {\n }\n /**\n * @param {?} value\n * @return {?}\n */\n writeValue(value) {\n }\n /**\n * @param {?} disabled\n * @return {?}\n */\n setDisabledState(disabled) {\n }\n /**\n * @return {?}\n */\n ngOnInit() {\n this.formCompContext.ngOnInit(this);\n }\n /**\n * @return {?}\n */\n ngAfterViewInit() {\n this.formContext.ngAfterViewInit(this);\n }\n /**\n * @return {?}\n */\n ngOnDestroy() {\n this.formCompContext.ngOnDestroy(this);\n }\n /**\n * @return {?}\n */\n ngAfterContentChecked() {\n this.formCompContext.ngAfterContentChecked(this);\n }\n};\nColorPickerComponent.ɵfac = function ColorPickerComponent_Factory(t) { return new (t || ColorPickerComponent)(ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ElementRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.Renderer2), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ViewContainerRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.Injector)); };\nColorPickerComponent.ɵcmp = ɵngcc0.ɵɵdefineComponent({ type: ColorPickerComponent, selectors: [[\"\", \"ejs-colorpicker\", \"\"]], inputs: { columns: \"columns\", cssClass: \"cssClass\", disabled: \"disabled\", enableOpacity: \"enableOpacity\", enablePersistence: \"enablePersistence\", enableRtl: \"enableRtl\", inline: \"inline\", locale: \"locale\", mode: \"mode\", modeSwitcher: \"modeSwitcher\", noColor: \"noColor\", presetColors: \"presetColors\", showButtons: \"showButtons\", value: \"value\" }, outputs: { focus: \"focus\", blur: \"blur\", beforeClose: \"beforeClose\", beforeModeSwitch: \"beforeModeSwitch\", beforeOpen: \"beforeOpen\", beforeTileRender: \"beforeTileRender\", change: \"change\", created: \"created\", onModeSwitch: \"onModeSwitch\", open: \"open\", select: \"select\", valueChange: \"valueChange\" }, features: [ɵngcc0.ɵɵProvidersFeature([\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => ColorPickerComponent_1),\n multi: true\n }\n ]), ɵngcc0.ɵɵInheritDefinitionFeature], attrs: _c1, decls: 0, vars: 0, template: function ColorPickerComponent_Template(rf, ctx) { }, encapsulation: 2, changeDetection: 0 });\n/**\n * @nocollapse\n */\nColorPickerComponent.ctorParameters = () => [\n { type: ElementRef, },\n { type: Renderer2, },\n { type: ViewContainerRef, },\n { type: Injector, },\n];\nColorPickerComponent = ColorPickerComponent_1 = __decorate$5([\n ComponentMixins([ComponentBase, FormBase]),\n __metadata$5(\"design:paramtypes\", [ElementRef,\n Renderer2,\n ViewContainerRef,\n Injector])\n], ColorPickerComponent);\n/*@__PURE__*/ (function () { ɵngcc0.ɵsetClassMetadata(TextBoxComponent, [{\n type: Component,\n args: [{\n selector: 'ejs-textbox',\n inputs: inputs,\n outputs: outputs,\n template: '',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => TextBoxComponent_1),\n multi: true\n }\n ],\n queries: {}\n }]\n }], function () { return [{ type: ɵngcc0.ElementRef }, { type: ɵngcc0.Renderer2 }, { type: ɵngcc0.ViewContainerRef }, { type: ɵngcc0.Injector }]; }, null); })();\n(function () { (typeof ngJitMode === \"undefined\" || ngJitMode) && ɵngcc0.ɵɵsetNgModuleScope(TextBoxModule, { declarations: function () { return [TextBoxComponent]; }, imports: function () { return [CommonModule]; }, exports: function () { return [TextBoxComponent]; } }); })();\n/*@__PURE__*/ (function () { ɵngcc0.ɵsetClassMetadata(TextBoxModule, [{\n type: NgModule,\n args: [{\n imports: [CommonModule],\n declarations: [\n TextBoxComponent\n ],\n exports: [\n TextBoxComponent\n ]\n }]\n }], null, null); })();\n(function () { (typeof ngJitMode === \"undefined\" || ngJitMode) && ɵngcc0.ɵɵsetNgModuleScope(TextBoxAllModule, { imports: function () { return [CommonModule, TextBoxModule]; }, exports: function () { return [TextBoxModule]; } }); })();\n/*@__PURE__*/ (function () { ɵngcc0.ɵsetClassMetadata(TextBoxAllModule, [{\n type: NgModule,\n args: [{\n imports: [CommonModule, TextBoxModule],\n exports: [\n TextBoxModule\n ],\n providers: []\n }]\n }], null, null); })();\n/*@__PURE__*/ (function () { ɵngcc0.ɵsetClassMetadata(NumericTextBoxComponent, [{\n type: Component,\n args: [{\n selector: 'ejs-numerictextbox',\n inputs: inputs$1,\n outputs: outputs$1,\n template: '',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => NumericTextBoxComponent_1),\n multi: true\n }\n ],\n queries: {}\n }]\n }], function () { return [{ type: ɵngcc0.ElementRef }, { type: ɵngcc0.Renderer2 }, { type: ɵngcc0.ViewContainerRef }, { type: ɵngcc0.Injector }]; }, null); })();\n(function () { (typeof ngJitMode === \"undefined\" || ngJitMode) && ɵngcc0.ɵɵsetNgModuleScope(NumericTextBoxModule, { declarations: function () { return [NumericTextBoxComponent]; }, imports: function () { return [CommonModule]; }, exports: function () { return [NumericTextBoxComponent]; } }); })();\n/*@__PURE__*/ (function () { ɵngcc0.ɵsetClassMetadata(NumericTextBoxModule, [{\n type: NgModule,\n args: [{\n imports: [CommonModule],\n declarations: [\n NumericTextBoxComponent\n ],\n exports: [\n NumericTextBoxComponent\n ]\n }]\n }], null, null); })();\n(function () { (typeof ngJitMode === \"undefined\" || ngJitMode) && ɵngcc0.ɵɵsetNgModuleScope(NumericTextBoxAllModule, { imports: function () { return [CommonModule, NumericTextBoxModule]; }, exports: function () { return [NumericTextBoxModule]; } }); })();\n/*@__PURE__*/ (function () { ɵngcc0.ɵsetClassMetadata(NumericTextBoxAllModule, [{\n type: NgModule,\n args: [{\n imports: [CommonModule, NumericTextBoxModule],\n exports: [\n NumericTextBoxModule\n ],\n providers: []\n }]\n }], null, null); })();\n/*@__PURE__*/ (function () { ɵngcc0.ɵsetClassMetadata(MaskedTextBoxComponent, [{\n type: Component,\n args: [{\n selector: 'ejs-maskedtextbox',\n inputs: inputs$2,\n outputs: outputs$2,\n template: '',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => MaskedTextBoxComponent_1),\n multi: true\n }\n ],\n queries: {}\n }]\n }], function () { return [{ type: ɵngcc0.ElementRef }, { type: ɵngcc0.Renderer2 }, { type: ɵngcc0.ViewContainerRef }, { type: ɵngcc0.Injector }]; }, null); })();\n(function () { (typeof ngJitMode === \"undefined\" || ngJitMode) && ɵngcc0.ɵɵsetNgModuleScope(MaskedTextBoxModule, { declarations: function () { return [MaskedTextBoxComponent]; }, imports: function () { return [CommonModule]; }, exports: function () { return [MaskedTextBoxComponent]; } }); })();\n/*@__PURE__*/ (function () { ɵngcc0.ɵsetClassMetadata(MaskedTextBoxModule, [{\n type: NgModule,\n args: [{\n imports: [CommonModule],\n declarations: [\n MaskedTextBoxComponent\n ],\n exports: [\n MaskedTextBoxComponent\n ]\n }]\n }], null, null); })();\n(function () { (typeof ngJitMode === \"undefined\" || ngJitMode) && ɵngcc0.ɵɵsetNgModuleScope(MaskedTextBoxAllModule, { imports: function () { return [CommonModule, MaskedTextBoxModule]; }, exports: function () { return [MaskedTextBoxModule]; } }); })();\n/*@__PURE__*/ (function () { ɵngcc0.ɵsetClassMetadata(MaskedTextBoxAllModule, [{\n type: NgModule,\n args: [{\n imports: [CommonModule, MaskedTextBoxModule],\n exports: [\n MaskedTextBoxModule\n ],\n providers: []\n }]\n }], null, null); })();\n/*@__PURE__*/ (function () { ɵngcc0.ɵsetClassMetadata(SliderComponent, [{\n type: Component,\n args: [{\n selector: 'ejs-slider',\n inputs: inputs$3,\n outputs: outputs$3,\n template: '',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SliderComponent_1),\n multi: true\n }\n ],\n queries: {}\n }]\n }], function () { return [{ type: ɵngcc0.ElementRef }, { type: ɵngcc0.Renderer2 }, { type: ɵngcc0.ViewContainerRef }, { type: ɵngcc0.Injector }]; }, null); })();\n(function () { (typeof ngJitMode === \"undefined\" || ngJitMode) && ɵngcc0.ɵɵsetNgModuleScope(SliderModule, { declarations: function () { return [SliderComponent]; }, imports: function () { return [CommonModule]; }, exports: function () { return [SliderComponent]; } }); })();\n/*@__PURE__*/ (function () { ɵngcc0.ɵsetClassMetadata(SliderModule, [{\n type: NgModule,\n args: [{\n imports: [CommonModule],\n declarations: [\n SliderComponent\n ],\n exports: [\n SliderComponent\n ]\n }]\n }], null, null); })();\n(function () { (typeof ngJitMode === \"undefined\" || ngJitMode) && ɵngcc0.ɵɵsetNgModuleScope(SliderAllModule, { imports: function () { return [CommonModule, SliderModule]; }, exports: function () { return [SliderModule]; } }); })();\n/*@__PURE__*/ (function () { ɵngcc0.ɵsetClassMetadata(SliderAllModule, [{\n type: NgModule,\n args: [{\n imports: [CommonModule, SliderModule],\n exports: [\n SliderModule\n ],\n providers: []\n }]\n }], null, null); })();\n/*@__PURE__*/ (function () { ɵngcc0.ɵsetClassMetadata(UploadedFilesDirective, [{\n type: Directive,\n args: [{\n selector: 'e-files>e-uploadedfiles',\n inputs: input,\n outputs: outputs$4,\n queries: {}\n }]\n }], function () { return [{ type: ɵngcc0.ViewContainerRef }]; }, null); })();\n/*@__PURE__*/ (function () { ɵngcc0.ɵsetClassMetadata(FilesDirective, [{\n type: Directive,\n args: [{\n selector: 'ejs-uploader>e-files',\n queries: {\n children: new ContentChildren(UploadedFilesDirective)\n }\n }]\n }], function () { return []; }, null); })();\n/*@__PURE__*/ (function () { ɵngcc0.ɵsetClassMetadata(UploaderComponent, [{\n type: Component,\n args: [{\n selector: 'ejs-uploader',\n inputs: inputs$4,\n outputs: outputs$5,\n template: '',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => UploaderComponent_1),\n multi: true\n }\n ],\n queries: {\n childFiles: new ContentChild(FilesDirective)\n }\n }]\n }], function () { return [{ type: ɵngcc0.ElementRef }, { type: ɵngcc0.Renderer2 }, { type: ɵngcc0.ViewContainerRef }, { type: ɵngcc0.Injector }]; }, { template: [{\n type: ContentChild,\n args: ['template']\n }] }); })();\n(function () { (typeof ngJitMode === \"undefined\" || ngJitMode) && ɵngcc0.ɵɵsetNgModuleScope(UploaderModule, { declarations: function () { return [UploaderComponent, UploadedFilesDirective, FilesDirective]; }, imports: function () { return [CommonModule]; }, exports: function () { return [UploaderComponent, UploadedFilesDirective, FilesDirective]; } }); })();\n/*@__PURE__*/ (function () { ɵngcc0.ɵsetClassMetadata(UploaderModule, [{\n type: NgModule,\n args: [{\n imports: [CommonModule],\n declarations: [\n UploaderComponent,\n UploadedFilesDirective,\n FilesDirective\n ],\n exports: [\n UploaderComponent,\n UploadedFilesDirective,\n FilesDirective\n ]\n }]\n }], null, null); })();\n(function () { (typeof ngJitMode === \"undefined\" || ngJitMode) && ɵngcc0.ɵɵsetNgModuleScope(UploaderAllModule, { imports: function () { return [CommonModule, UploaderModule]; }, exports: function () { return [UploaderModule]; } }); })();\n/*@__PURE__*/ (function () { ɵngcc0.ɵsetClassMetadata(UploaderAllModule, [{\n type: NgModule,\n args: [{\n imports: [CommonModule, UploaderModule],\n exports: [\n UploaderModule\n ],\n providers: []\n }]\n }], null, null); })();\n/*@__PURE__*/ (function () { ɵngcc0.ɵsetClassMetadata(ColorPickerComponent, [{\n type: Component,\n args: [{\n selector: '[ejs-colorpicker]',\n inputs: inputs$5,\n outputs: outputs$6,\n template: '',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => ColorPickerComponent_1),\n multi: true\n }\n ],\n queries: {}\n }]\n }], function () { return [{ type: ɵngcc0.ElementRef }, { type: ɵngcc0.Renderer2 }, { type: ɵngcc0.ViewContainerRef }, { type: ɵngcc0.Injector }]; }, null); })();\nvar ColorPickerComponent_1;\n\n/**\n * NgModule definition for the ColorPicker component.\n */\nclass ColorPickerModule {\n}\nColorPickerModule.ɵmod = ɵngcc0.ɵɵdefineNgModule({ type: ColorPickerModule });\nColorPickerModule.ɵinj = ɵngcc0.ɵɵdefineInjector({ factory: function ColorPickerModule_Factory(t) { return new (t || ColorPickerModule)(); }, imports: [[CommonModule]] });\n/**\n * @nocollapse\n */\nColorPickerModule.ctorParameters = () => [];\n(function () { (typeof ngJitMode === \"undefined\" || ngJitMode) && ɵngcc0.ɵɵsetNgModuleScope(ColorPickerModule, { declarations: function () { return [ColorPickerComponent]; }, imports: function () { return [CommonModule]; }, exports: function () { return [ColorPickerComponent]; } }); })();\n/*@__PURE__*/ (function () { ɵngcc0.ɵsetClassMetadata(ColorPickerModule, [{\n type: NgModule,\n args: [{\n imports: [CommonModule],\n declarations: [\n ColorPickerComponent\n ],\n exports: [\n ColorPickerComponent\n ]\n }]\n }], null, null); })();\n\n/**\n * NgModule definition for the ColorPicker component with providers.\n */\nclass ColorPickerAllModule {\n}\nColorPickerAllModule.ɵmod = ɵngcc0.ɵɵdefineNgModule({ type: ColorPickerAllModule });\nColorPickerAllModule.ɵinj = ɵngcc0.ɵɵdefineInjector({ factory: function ColorPickerAllModule_Factory(t) { return new (t || ColorPickerAllModule)(); }, providers: [], imports: [[CommonModule, ColorPickerModule], ColorPickerModule] });\n/**\n * @nocollapse\n */\nColorPickerAllModule.ctorParameters = () => [];\n(function () { (typeof ngJitMode === \"undefined\" || ngJitMode) && ɵngcc0.ɵɵsetNgModuleScope(ColorPickerAllModule, { imports: function () { return [CommonModule, ColorPickerModule]; }, exports: function () { return [ColorPickerModule]; } }); })();\n/*@__PURE__*/ (function () { ɵngcc0.ɵsetClassMetadata(ColorPickerAllModule, [{\n type: NgModule,\n args: [{\n imports: [CommonModule, ColorPickerModule],\n exports: [\n ColorPickerModule\n ],\n providers: []\n }]\n }], null, null); })();\n\nclass FormValidators {\n /**\n * @param {?} number\n * @return {?}\n */\n static max(number) {\n let /** @type {?} */ max = number;\n return (control) => {\n //tslint:disable-next-line\n let /** @type {?} */ result = ((FormValidator)).checkValidator.max({ value: control.value, param: max });\n if (result === true) {\n return null;\n }\n else {\n return { 'max': true };\n }\n };\n }\n /**\n * @param {?} number\n * @return {?}\n */\n static min(number) {\n let /** @type {?} */ min = number;\n return (control) => {\n //tslint:disable-next-line\n let /** @type {?} */ result = ((FormValidator)).checkValidator.min({ value: control.value, param: min });\n if (result === true) {\n return null;\n }\n else {\n return { 'min': true };\n }\n };\n }\n /**\n * @param {?} control\n * @return {?}\n */\n static creditcard(control) {\n //tslint:disable-next-line\n let /** @type {?} */ result = ((FormValidator)).checkValidator.creditcard({ value: control.value });\n if (result === true) {\n return null;\n }\n else {\n return { 'cardno': true };\n }\n }\n /**\n * @param {?} control\n * @return {?}\n */\n static date(control) {\n //tslint:disable-next-line\n let /** @type {?} */ result = ((FormValidator)).checkValidator.date({ value: control.value });\n if (result === true) {\n return null;\n }\n else {\n return { 'date': true };\n }\n }\n /**\n * @param {?} control\n * @return {?}\n */\n static dateIso(control) {\n //tslint:disable-next-line\n let /** @type {?} */ result = ((FormValidator)).checkValidator.dateIso({ value: control.value });\n if (result === true) {\n return null;\n }\n else {\n return { 'dateiso': true };\n }\n }\n /**\n * @param {?} control\n * @return {?}\n */\n static digits(control) {\n //tslint:disable-next-line\n let /** @type {?} */ result = ((FormValidator)).checkValidator.digits({ value: control.value });\n if (result === true) {\n return null;\n }\n else {\n return { 'digit': true };\n }\n }\n /**\n * @param {?} control\n * @return {?}\n */\n static email(control) {\n //tslint:disable-next-line\n let /** @type {?} */ result = ((FormValidator)).checkValidator.email({ value: control.value });\n if (result === true) {\n return null;\n }\n else {\n return { 'email': true };\n }\n }\n /**\n * @param {?} number\n * @return {?}\n */\n static maxLength(number) {\n let /** @type {?} */ maxlength = number;\n return (control) => {\n //tslint:disable-next-line\n let /** @type {?} */ result = ((FormValidator)).checkValidator.maxLength({ value: control.value, param: maxlength });\n if (result === true) {\n return null;\n }\n else {\n return { 'maxlength': true };\n }\n };\n }\n /**\n * @param {?} number\n * @return {?}\n */\n static minLength(number) {\n let /** @type {?} */ minlength = number;\n return (control) => {\n //tslint:disable-next-line\n let /** @type {?} */ result = ((FormValidator)).checkValidator.minLength({ value: control.value, param: minlength });\n if (result === true) {\n return null;\n }\n else {\n return { 'minlength': true };\n }\n };\n }\n /**\n * @param {?} control\n * @return {?}\n */\n static number(control) {\n //tslint:disable-next-line\n let /** @type {?} */ result = ((FormValidator)).checkValidator.number({ value: control.value });\n if (result === true) {\n return null;\n }\n else {\n return { 'number': true };\n }\n }\n /**\n * @param {?} control\n * @return {?}\n */\n static required(control) {\n //tslint:disable-next-line\n let /** @type {?} */ result = (control.value === null) ? false : ((FormValidator)).checkValidator.required({ value: control.value });\n if (result === true) {\n return null;\n }\n else {\n return { 'required': true };\n }\n }\n /**\n * @param {?} control\n * @return {?}\n */\n static tel(control) {\n //tslint:disable-next-line\n let /** @type {?} */ result = ((FormValidator)).checkValidator.tel({ value: control.value });\n if (result === true) {\n return null;\n }\n else {\n return { 'telno': true };\n }\n }\n /**\n * @param {?} control\n * @return {?}\n */\n static url(control) {\n //tslint:disable-next-line\n let /** @type {?} */ result = ((FormValidator)).checkValidator.url({ value: control.value });\n if (result === true) {\n return null;\n }\n else {\n return { 'url': true };\n }\n }\n /**\n * @param {?} number1\n * @param {?} number2\n * @return {?}\n */\n static rangeLength(number1, number2) {\n let /** @type {?} */ minRL = number1;\n let /** @type {?} */ maxRL = number2;\n //tslint:disable-next-line\n let /** @type {?} */ param = [minRL, maxRL];\n return (control) => {\n //tslint:disable-next-line\n let /** @type {?} */ result = ((FormValidator)).checkValidator.rangeLength({ value: control.value, param: param });\n if (result === true) {\n return null;\n }\n else {\n return { 'rangelength': true };\n }\n };\n }\n /**\n * @param {?} number1\n * @param {?} number2\n * @return {?}\n */\n static range(number1, number2) {\n let /** @type {?} */ minR = number1;\n let /** @type {?} */ maxR = number2;\n //tslint:disable-next-line\n let /** @type {?} */ param1 = [minR, maxR];\n return (control) => {\n //tslint:disable-next-line\n let /** @type {?} */ result = ((FormValidator)).checkValidator.range({ value: control.value, param: param1 });\n if (result === true) {\n return null;\n }\n else {\n return { 'range': true };\n }\n };\n }\n}\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { TextBoxComponent, TextBoxModule, TextBoxAllModule, NumericTextBoxComponent, NumericTextBoxModule, NumericTextBoxAllModule, MaskedTextBoxComponent, MaskedTextBoxModule, MaskedTextBoxAllModule, SliderComponent, SliderModule, SliderAllModule, UploadedFilesDirective, FilesDirective, UploaderComponent, UploaderModule, UploaderAllModule, ColorPickerComponent, ColorPickerModule, ColorPickerAllModule, FormValidators, inputs$5 as ɵk, outputs$6 as ɵl, inputs$2 as ɵe, outputs$2 as ɵf, inputs$1 as ɵc, outputs$1 as ɵd, inputs$3 as ɵg, outputs$3 as ɵh, inputs as ɵa, outputs as ɵb, inputs$4 as ɵi, outputs$5 as ɵj };\nexport { NumericTextBox, regularExpressions, createMask, applyMask, wireEvents, unwireEvents, bindClearEvent, unstrippedValue, strippedValue, maskInputMouseDownHandler, maskInputMouseUpHandler, maskInputFocusHandler, triggerFocus, maskInputBlurHandler, maskInputDropHandler, mobileRemoveFunction, setMaskValue, setElementValue, maskInput, getVal, getMaskedVal, MaskUndo, MaskedTextBox, Input, TicksData, ColorRangeData, LimitData, TooltipData, Slider, regex, ErrorOption, FormValidator, FilesProp, ButtonsProps, AsyncSettings, Uploader, ColorPicker, TextBox } from '@syncfusion/ej2-inputs';\n\n//# sourceMappingURL=ej2-angular-inputs.js.map","import { getValue, setValue, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { clearTemplate, registerEvents } from './util';\nvar refRegex = /Ref$/;\nvar ComplexBase = /** @class */ (function () {\n function ComplexBase() {\n this.hasChanges = false;\n this.propCollection = {};\n this.dataSource = {};\n this.tags = [];\n this.tagObjects = [];\n }\n ComplexBase.prototype.ngOnInit = function () {\n this.registeredTemplate = {};\n for (var _i = 0, _a = this.tags; _i < _a.length; _i++) {\n var tag = _a[_i];\n var objInstance = getValue('child' + tag.substring(0, 1).toUpperCase() + tag.substring(1), this);\n if (objInstance) {\n this.tagObjects.push({ instance: objInstance, name: tag });\n }\n }\n var templateProperties = Object.keys(this);\n templateProperties = templateProperties.filter(function (val) {\n return /Ref$/i.test(val);\n });\n for (var _b = 0, templateProperties_1 = templateProperties; _b < templateProperties_1.length; _b++) {\n var tempName = templateProperties_1[_b];\n var propName = tempName.replace('Ref', '');\n setValue(propName.replace('_', '.'), getValue(propName, this), this.propCollection);\n }\n // Angular 9 compatibility to overcome ngOnchange not get triggered issue\n // To Update properties to \"this.propCollection\"\n var propList = Object.keys(this);\n /* istanbul ignore next */\n if (this.directivePropList) {\n for (var k = 0; k < this.directivePropList.length; k++) {\n var dirPropName = this.directivePropList[k];\n if (propList.indexOf(dirPropName) !== -1) {\n setValue(dirPropName, getValue(dirPropName, this), this.propCollection);\n }\n }\n this.hasChanges = true;\n }\n this.isInitChanges = true;\n };\n ComplexBase.prototype.registerEvents = function (eventList) {\n registerEvents(eventList, this, true);\n };\n ComplexBase.prototype.ngOnChanges = function (changes) {\n for (var _i = 0, _a = Object.keys(changes); _i < _a.length; _i++) {\n var propName = _a[_i];\n var changedVal = changes[propName];\n this.propCollection[propName] = changedVal.currentValue;\n }\n this.isUpdated = false;\n this.hasChanges = true;\n };\n /* istanbul ignore next */\n ComplexBase.prototype.clearTemplate = function (templateNames) {\n clearTemplate(this, templateNames);\n };\n ComplexBase.prototype.getProperties = function () {\n /* istanbul ignore next */\n for (var _i = 0, _a = this.tagObjects; _i < _a.length; _i++) {\n var tagObject = _a[_i];\n this.propCollection[tagObject.name] = tagObject.instance.getProperties();\n }\n return this.propCollection;\n };\n ComplexBase.prototype.isChanged = function () {\n var result = this.hasChanges;\n if (!isNullOrUndefined(this.propCollection[this.property])) {\n var tempProps = this.propCollection[this.property];\n var props = Object.keys(tempProps[0]);\n for (var d = 0; d < props.length; d++) {\n if (!isNullOrUndefined(this.propCollection[props[d]])) {\n var val = getValue(props[d], this);\n var propVal = this.propCollection[this.property][0][props[d]];\n if (!isNullOrUndefined(val) && this.propCollection[props[d]] !== val\n && propVal !== val) {\n setValue(props[d], val, this.propCollection[this.property][0]);\n setValue(props[d], val, this.propCollection);\n this.hasChanges = true;\n this.isUpdated = false;\n }\n }\n }\n }\n /* istanbul ignore next */\n for (var _i = 0, _a = this.tagObjects; _i < _a.length; _i++) {\n var item = _a[_i];\n result = result || item.instance.hasChanges;\n }\n return result || this.hasChanges;\n };\n ComplexBase.prototype.ngAfterContentChecked = function () {\n this.hasChanges = this.isChanged();\n if (this.isInitChanges || this.hasChanges) {\n var templateProperties = Object.keys(this);\n templateProperties = templateProperties.filter(function (val) {\n return refRegex.test(val);\n });\n for (var _i = 0, templateProperties_2 = templateProperties; _i < templateProperties_2.length; _i++) {\n var tempName = templateProperties_2[_i];\n var propName = tempName.replace('Ref', '');\n setValue(propName.replace('_', '.'), getValue(propName, this), this.propCollection);\n }\n }\n };\n ComplexBase.prototype.ngAfterViewChecked = function () {\n /* istanbul ignore next */\n if (this.isUpdated) {\n this.hasChanges = false;\n }\n };\n ComplexBase.prototype.ngAfterViewInit = function () {\n /* istanbul ignore next */\n this.isInitChanges = false;\n };\n ComplexBase.prototype.ngOnDestroy = function () {\n /* istanbul ignore next */\n this.directivePropList = [];\n };\n return ComplexBase;\n}());\nexport { ComplexBase };\nvar ArrayBase = /** @class */ (function () {\n function ArrayBase(propertyName) {\n this.list = [];\n this.hasChanges = false;\n this.propertyName = propertyName;\n }\n ArrayBase.prototype.ngOnInit = function () {\n this.isInitChanges = true;\n };\n ArrayBase.prototype.ngAfterContentInit = function () {\n var _this = this;\n var index = 0;\n /* istanbul ignore next */\n this.list = this.children.map(function (child) {\n child.dirIndex = index++;\n child.property = _this.propertyName;\n return child;\n });\n this.hasChanges = true;\n };\n ArrayBase.prototype.getProperties = function () {\n var onlyProp = [];\n for (var _i = 0, _a = this.list; _i < _a.length; _i++) {\n var item = _a[_i];\n onlyProp.push(item.getProperties());\n }\n return onlyProp;\n };\n ArrayBase.prototype.isChanged = function () {\n var _this = this;\n var result = false;\n var index = 0;\n var isSourceChanged = false;\n // tslint:disable-next-line\n var childrenDataSource = this.children.map(function (child) {\n return child;\n });\n /* istanbul ignore next */\n if (this.list.length === this.children.length) {\n for (var i = 0; i < this.list.length; i++) {\n if (this.list[i].propCollection.dataSource) {\n if (this.list[i].dataSource && this.list[i].propCollection.dataSource !== this.list[i].dataSource) {\n this.list[i].propCollection.dataSource = this.list[i].dataSource;\n this.list[i].hasChanges = true;\n }\n isSourceChanged = (JSON.stringify(this.list[i].propCollection.dataSource) !==\n JSON.stringify(childrenDataSource[i].propCollection.dataSource));\n }\n isSourceChanged = this.list[i].hasChanges !== childrenDataSource[i].hasChanges;\n }\n }\n this.hasNewChildren = (this.list.length !== this.children.length || isSourceChanged) ? true : null;\n if (this.hasNewChildren) {\n this.list = this.children.map(function (child) {\n child.dirIndex = index++;\n child.property = _this.propertyName;\n return child;\n });\n }\n /* istanbul ignore end */\n for (var _i = 0, _a = this.list; _i < _a.length; _i++) {\n var item = _a[_i];\n result = result || item.hasChanges;\n }\n return !!this.list.length && result;\n };\n ArrayBase.prototype.clearTemplate = function (templateNames) {\n var _this = this;\n /* istanbul ignore next */\n for (var _i = 0, _a = this.list; _i < _a.length; _i++) {\n var item = _a[_i];\n item.clearTemplate(templateNames && templateNames.map(function (val) {\n return new RegExp(_this.propertyName).test(val) ? val.replace(_this.propertyName + '.', '') : val;\n }));\n }\n };\n ArrayBase.prototype.ngAfterContentChecked = function () {\n this.hasChanges = this.isChanged();\n for (var i = 0; i < this.list.length; i++) {\n this.list[i].isUpdated = true;\n }\n };\n ArrayBase.prototype.ngAfterViewInit = function () {\n this.isInitChanges = false;\n };\n ArrayBase.prototype.ngOnDestroy = function () {\n this.list = [];\n };\n return ArrayBase;\n}());\nexport { ArrayBase };\n","import { Component, Event, EventHandler, NotifyPropertyChanges, Observer, Property, SanitizeHtmlHelper, addClass, append, attributes, closest, deleteObject, detach, getInstance, getUniqueID, getValue, isBlazor, isNullOrUndefined, isRippleEnabled, removeClass, rippleEffect, setValue } from '@syncfusion/ej2-base';\n\n/**\n * Initialize wrapper element for angular.\n *\n * @private\n *\n * @param {CreateElementArgs} createElement - Specifies created element args\n * @param {string} tag - Specifies tag name\n * @param {string} type - Specifies type name\n * @param {HTMLInputElement} element - Specifies input element\n * @param {string} WRAPPER - Specifies wrapper element\n * @param {string} role - Specifies role\n * @returns {HTMLInputElement} - Input Element\n */\nfunction wrapperInitialize(createElement, tag, type, element, WRAPPER, role) {\n let input = element;\n if (element.tagName === tag) {\n const ejInstance = getValue('ej2_instances', element);\n input = createElement('input', { attrs: { 'type': type } });\n const props = ['change', 'cssClass', 'label', 'labelPosition', 'id'];\n for (let index = 0, len = element.attributes.length; index < len; index++) {\n if (props.indexOf(element.attributes[index].nodeName) === -1) {\n input.setAttribute(element.attributes[index].nodeName, element.attributes[index].nodeValue);\n }\n }\n attributes(element, { 'class': WRAPPER, 'role': role, 'aria-checked': 'false' });\n element.appendChild(input);\n setValue('ej2_instances', ejInstance, input);\n deleteObject(element, 'ej2_instances');\n }\n return input;\n}\n/**\n * Get the text node.\n *\n * @param {HTMLElement} element - Specifies html element\n * @private\n * @returns {Node} - Text node.\n */\nfunction getTextNode(element) {\n let node;\n const childnode = element.childNodes;\n for (let i = 0; i < childnode.length; i++) {\n node = childnode[i];\n if (node.nodeType === 3) {\n return node;\n }\n }\n return null;\n}\n/**\n * Destroy the button components.\n *\n * @private\n * @param {Switch | CheckBox} ejInst - Specifies eJ2 Instance\n * @param {Element} wrapper - Specifies wrapper element\n * @param {string} tagName - Specifies tag name\n * @returns {void}\n */\nfunction destroy(ejInst, wrapper, tagName) {\n if (tagName === 'INPUT') {\n wrapper.parentNode.insertBefore(ejInst.element, wrapper);\n detach(wrapper);\n ejInst.element.checked = false;\n ['name', 'value', 'disabled'].forEach((key) => {\n ejInst.element.removeAttribute(key);\n });\n }\n else {\n ['role', 'aria-checked', 'class'].forEach((key) => {\n wrapper.removeAttribute(key);\n });\n wrapper.innerHTML = '';\n }\n}\n/**\n * Initialize control pre rendering.\n *\n * @private\n * @param {Switch | CheckBox} proxy - Specifies proxy\n * @param {string} control - Specifies control\n * @param {string} wrapper - Specifies wrapper element\n * @param {HTMLInputElement} element - Specifies input element\n * @param {string} moduleName - Specifies module name\n * @returns {void}\n */\nfunction preRender(proxy, control, wrapper, element, moduleName) {\n element = wrapperInitialize(proxy.createElement, control, 'checkbox', element, wrapper, moduleName);\n proxy.element = element;\n if (proxy.element.getAttribute('type') !== 'checkbox') {\n proxy.element.setAttribute('type', 'checkbox');\n }\n if (!proxy.element.id) {\n proxy.element.id = getUniqueID('e-' + moduleName);\n }\n}\n/**\n * Creates CheckBox component UI with theming and ripple support.\n *\n * @private\n * @param {CreateElementArgs} createElement - Specifies Created Element args\n * @param {boolean} enableRipple - Specifies ripple effect\n * @param {CheckBoxUtilModel} options - Specifies Checkbox util Model\n * @returns {Element} - Checkbox Element\n */\nfunction createCheckBox(createElement, enableRipple = false, options = {}) {\n const wrapper = createElement('div', { className: 'e-checkbox-wrapper e-css' });\n if (options.cssClass) {\n addClass([wrapper], options.cssClass.split(' '));\n }\n if (options.enableRtl) {\n wrapper.classList.add('e-rtl');\n }\n if (enableRipple) {\n const rippleSpan = createElement('span', { className: 'e-ripple-container' });\n rippleEffect(rippleSpan, { isCenterRipple: true, duration: 400 });\n wrapper.appendChild(rippleSpan);\n }\n const frameSpan = createElement('span', { className: 'e-frame e-icons' });\n if (options.checked) {\n frameSpan.classList.add('e-check');\n }\n wrapper.appendChild(frameSpan);\n if (options.label) {\n const labelSpan = createElement('span', { className: 'e-label' });\n if (options.disableHtmlEncode) {\n labelSpan.textContent = options.label;\n }\n else {\n labelSpan.innerHTML = options.label;\n }\n wrapper.appendChild(labelSpan);\n }\n return wrapper;\n}\n/**\n * Handles ripple mouse.\n *\n * @private\n * @param {MouseEvent} e - Specifies mouse event\n * @param {Element} rippleSpan - Specifies Ripple span element\n * @returns {void}\n */\nfunction rippleMouseHandler(e, rippleSpan) {\n if (rippleSpan) {\n const event = document.createEvent('MouseEvents');\n event.initEvent(e.type, false, true);\n rippleSpan.dispatchEvent(event);\n }\n}\n/**\n * Append hidden input to given element\n *\n * @private\n * @param {Switch | CheckBox} proxy - Specifies Proxy\n * @param {Element} wrap - Specifies Wrapper ELement\n * @returns {void}\n */\nfunction setHiddenInput(proxy, wrap) {\n if (proxy.element.getAttribute('ejs-for')) {\n wrap.appendChild(proxy.createElement('input', {\n attrs: { 'name': proxy.name || proxy.element.name, 'value': 'false', 'type': 'hidden' }\n }));\n }\n}\n\n/**\n * Common modules\n */\n\nvar __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nconst buttonObserver = new Observer();\nconst cssClassName = {\n RTL: 'e-rtl',\n BUTTON: 'e-btn',\n PRIMARY: 'e-primary',\n ICONBTN: 'e-icon-btn'\n};\n/**\n * The Button is a graphical user interface element that triggers an event on its click action. It can contain a text, an image, or both.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nlet Button = class Button extends Component {\n /**\n * Constructor for creating the widget\n *\n * @param {ButtonModel} options - Specifies the button model\n * @param {string|HTMLButtonElement} element - Specifies the target element\n */\n constructor(options, element) {\n super(options, element);\n }\n preRender() {\n // pre render code snippets\n }\n /**\n * Initialize the control rendering\n *\n * @returns {void}\n * @private\n */\n render() {\n this.initialize();\n this.removeRippleEffect = rippleEffect(this.element, { selector: '.' + cssClassName.BUTTON });\n this.renderComplete();\n }\n initialize() {\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n }\n if (this.isPrimary) {\n this.element.classList.add(cssClassName.PRIMARY);\n }\n if (!isBlazor() || (isBlazor() && this.getModuleName() !== 'progress-btn')) {\n if (this.content) {\n const tempContent = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(this.content) : this.content;\n this.element.innerHTML = tempContent;\n }\n this.setIconCss();\n }\n if (this.enableRtl) {\n this.element.classList.add(cssClassName.RTL);\n }\n if (this.disabled) {\n this.controlStatus(this.disabled);\n }\n else {\n this.wireEvents();\n }\n }\n controlStatus(disabled) {\n this.element.disabled = disabled;\n }\n setIconCss() {\n if (this.iconCss) {\n const span = this.createElement('span', { className: 'e-btn-icon ' + this.iconCss });\n if (!this.element.textContent.trim()) {\n this.element.classList.add(cssClassName.ICONBTN);\n }\n else {\n span.classList.add('e-icon-' + this.iconPosition.toLowerCase());\n if (this.iconPosition === 'Top' || this.iconPosition === 'Bottom') {\n this.element.classList.add('e-' + this.iconPosition.toLowerCase() + '-icon-btn');\n }\n }\n const node = this.element.childNodes[0];\n if (node && (this.iconPosition === 'Left' || this.iconPosition === 'Top')) {\n this.element.insertBefore(span, node);\n }\n else {\n this.element.appendChild(span);\n }\n }\n }\n wireEvents() {\n if (this.isToggle) {\n EventHandler.add(this.element, 'click', this.btnClickHandler, this);\n }\n }\n unWireEvents() {\n if (this.isToggle) {\n EventHandler.remove(this.element, 'click', this.btnClickHandler);\n }\n }\n btnClickHandler() {\n if (this.element.classList.contains('e-active')) {\n this.element.classList.remove('e-active');\n }\n else {\n this.element.classList.add('e-active');\n }\n }\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n destroy() {\n let classList = [cssClassName.PRIMARY, cssClassName.RTL, cssClassName.ICONBTN, 'e-success', 'e-info', 'e-danger',\n 'e-warning', 'e-flat', 'e-outline', 'e-small', 'e-bigger', 'e-active', 'e-round',\n 'e-top-icon-btn', 'e-bottom-icon-btn'];\n if (this.cssClass) {\n classList = classList.concat(this.cssClass.split(' '));\n }\n super.destroy();\n removeClass([this.element], classList);\n if (!this.element.getAttribute('class')) {\n this.element.removeAttribute('class');\n }\n if (this.disabled) {\n this.element.removeAttribute('disabled');\n }\n if (this.content) {\n this.element.innerHTML = this.element.innerHTML.replace(this.content, '');\n }\n const span = this.element.querySelector('span.e-btn-icon');\n if (span) {\n detach(span);\n }\n this.unWireEvents();\n if (isRippleEnabled) {\n this.removeRippleEffect();\n }\n }\n /**\n * Get component name.\n *\n * @returns {string} - Module name\n * @private\n */\n getModuleName() {\n return 'btn';\n }\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} - Persist Data\n * @private\n */\n getPersistData() {\n return this.addOnPersist([]);\n }\n /**\n * Dynamically injects the required modules to the component.\n *\n * @private\n * @returns {void}\n */\n static Inject() {\n // Inject code snippets\n }\n /**\n * Called internally if any of the property value changed.\n *\n * @param {ButtonModel} newProp - Specifies new properties\n * @param {ButtonModel} oldProp - Specifies old properties\n * @returns {void}\n * @private\n */\n onPropertyChanged(newProp, oldProp) {\n let span = this.element.querySelector('span.e-btn-icon');\n for (const prop of Object.keys(newProp)) {\n switch (prop) {\n case 'isPrimary':\n if (newProp.isPrimary) {\n this.element.classList.add(cssClassName.PRIMARY);\n }\n else {\n this.element.classList.remove(cssClassName.PRIMARY);\n }\n break;\n case 'disabled':\n this.controlStatus(newProp.disabled);\n break;\n case 'iconCss': {\n if (span) {\n if (newProp.iconCss) {\n span.className = 'e-btn-icon ' + newProp.iconCss;\n if (this.element.textContent.trim()) {\n if (this.iconPosition === 'Left') {\n span.classList.add('e-icon-left');\n }\n else {\n span.classList.add('e-icon-right');\n }\n }\n }\n else {\n detach(span);\n }\n }\n else {\n this.setIconCss();\n }\n break;\n }\n case 'iconPosition':\n removeClass([this.element], ['e-top-icon-btn', 'e-bottom-icon-btn']);\n span = this.element.querySelector('span.e-btn-icon');\n if (span) {\n detach(span);\n }\n this.setIconCss();\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([this.element], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([this.element], newProp.cssClass.split(' '));\n }\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n this.element.classList.add(cssClassName.RTL);\n }\n else {\n this.element.classList.remove(cssClassName.RTL);\n }\n break;\n case 'content': {\n const node = getTextNode(this.element);\n if (!node) {\n this.element.classList.remove(cssClassName.ICONBTN);\n }\n if (!isBlazor() || (isBlazor() && !this.isServerRendered && this.getModuleName() !== 'progress-btn')) {\n if (this.enableHtmlSanitizer) {\n newProp.content = SanitizeHtmlHelper.sanitize(newProp.content);\n }\n this.element.innerHTML = newProp.content;\n this.setIconCss();\n }\n break;\n }\n case 'isToggle':\n if (newProp.isToggle) {\n EventHandler.add(this.element, 'click', this.btnClickHandler, this);\n }\n else {\n EventHandler.remove(this.element, 'click', this.btnClickHandler);\n removeClass([this.element], ['e-active']);\n }\n break;\n }\n }\n }\n /**\n * Click the button element\n * its native method\n *\n * @public\n * @returns {void}\n */\n click() {\n this.element.click();\n }\n /**\n * Sets the focus to Button\n * its native method\n *\n * @public\n * @returns {void}\n */\n focusIn() {\n this.element.focus();\n }\n};\n__decorate([\n Property('Left')\n], Button.prototype, \"iconPosition\", void 0);\n__decorate([\n Property('')\n], Button.prototype, \"iconCss\", void 0);\n__decorate([\n Property(false)\n], Button.prototype, \"disabled\", void 0);\n__decorate([\n Property(false)\n], Button.prototype, \"isPrimary\", void 0);\n__decorate([\n Property('')\n], Button.prototype, \"cssClass\", void 0);\n__decorate([\n Property('')\n], Button.prototype, \"content\", void 0);\n__decorate([\n Property(false)\n], Button.prototype, \"isToggle\", void 0);\n__decorate([\n Property()\n], Button.prototype, \"locale\", void 0);\n__decorate([\n Property(false)\n], Button.prototype, \"enableHtmlSanitizer\", void 0);\n__decorate([\n Event()\n], Button.prototype, \"created\", void 0);\nButton = __decorate([\n NotifyPropertyChanges\n], Button);\n\n/**\n * Button modules\n */\n\nvar __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nconst CHECK = 'e-check';\nconst DISABLED = 'e-checkbox-disabled';\nconst FRAME = 'e-frame';\nconst INDETERMINATE = 'e-stop';\nconst LABEL = 'e-label';\nconst RIPPLE = 'e-ripple-container';\nconst RIPPLECHECK = 'e-ripple-check';\nconst RIPPLEINDETERMINATE = 'e-ripple-stop';\nconst RTL = 'e-rtl';\nconst WRAPPER = 'e-checkbox-wrapper';\nconst containerAttr = ['title', 'class', 'style', 'disabled', 'readonly', 'name', 'value'];\n/**\n * The CheckBox is a graphical user interface element that allows you to select one or more options from the choices.\n * It contains checked, unchecked, and indeterminate states.\n * ```html\n *
\n * \n * ```\n */\nlet CheckBox = class CheckBox extends Component {\n /**\n * Constructor for creating the widget\n *\n * @private\n * @param {CheckBoxModel} options - Specifies checkbox model\n * @param {string | HTMLInputElement} element - Specifies target element\n */\n constructor(options, element) {\n super(options, element);\n this.isFocused = false;\n this.isMouseClick = false;\n }\n changeState(state) {\n let ariaState;\n let rippleSpan;\n const frameSpan = this.getWrapper().getElementsByClassName(FRAME)[0];\n if (isRippleEnabled) {\n rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];\n }\n if (state === 'check') {\n frameSpan.classList.remove(INDETERMINATE);\n frameSpan.classList.add(CHECK);\n if (rippleSpan) {\n rippleSpan.classList.remove(RIPPLEINDETERMINATE);\n rippleSpan.classList.add(RIPPLECHECK);\n }\n ariaState = 'true';\n this.element.checked = true;\n }\n else if (state === 'uncheck') {\n removeClass([frameSpan], [CHECK, INDETERMINATE]);\n if (rippleSpan) {\n removeClass([rippleSpan], [RIPPLECHECK, RIPPLEINDETERMINATE]);\n }\n ariaState = 'false';\n this.element.checked = false;\n }\n else {\n frameSpan.classList.remove(CHECK);\n frameSpan.classList.add(INDETERMINATE);\n if (rippleSpan) {\n rippleSpan.classList.remove(RIPPLECHECK);\n rippleSpan.classList.add(RIPPLEINDETERMINATE);\n }\n ariaState = 'mixed';\n this.element.indeterminate = true;\n }\n this.getWrapper().setAttribute('aria-checked', ariaState);\n }\n clickHandler(event) {\n if (this.isMouseClick) {\n this.focusOutHandler();\n this.isMouseClick = false;\n }\n if (this.indeterminate) {\n this.changeState(this.checked ? 'check' : 'uncheck');\n this.indeterminate = false;\n this.element.indeterminate = false;\n }\n else if (this.checked) {\n this.changeState('uncheck');\n this.checked = false;\n }\n else {\n this.changeState('check');\n this.checked = true;\n }\n const changeEventArgs = { checked: this.updateVueArrayModel(false), event: event };\n this.trigger('change', changeEventArgs);\n event.stopPropagation();\n }\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n destroy() {\n let wrapper = this.getWrapper();\n super.destroy();\n if (this.wrapper) {\n wrapper = this.wrapper;\n if (!this.disabled) {\n this.unWireEvents();\n }\n if (this.tagName === 'INPUT') {\n if (this.getWrapper() && wrapper.parentNode) {\n wrapper.parentNode.insertBefore(this.element, wrapper);\n }\n detach(wrapper);\n this.element.checked = false;\n if (this.indeterminate) {\n this.element.indeterminate = false;\n }\n ['name', 'value', 'disabled'].forEach((key) => {\n this.element.removeAttribute(key);\n });\n }\n else {\n ['role', 'aria-checked', 'class'].forEach((key) => {\n wrapper.removeAttribute(key);\n });\n wrapper.innerHTML = '';\n }\n }\n }\n focusHandler() {\n this.isFocused = true;\n }\n focusOutHandler() {\n const wrapper = this.getWrapper();\n if (wrapper) {\n wrapper.classList.remove('e-focus');\n }\n this.isFocused = false;\n }\n /**\n * Gets the module name.\n *\n * @private\n * @returns {string} - Module Name\n */\n getModuleName() {\n return 'checkbox';\n }\n /**\n * Gets the properties to be maintained in the persistence state.\n *\n * @private\n * @returns {string} - Persist Data\n */\n getPersistData() {\n return this.addOnPersist(['checked', 'indeterminate']);\n }\n getWrapper() {\n if (this.element && this.element.parentElement) {\n return this.element.parentElement.parentElement;\n }\n else {\n return null;\n }\n }\n initialize() {\n if (isNullOrUndefined(this.initialCheckedValue)) {\n this.initialCheckedValue = this.checked;\n }\n if (this.name) {\n this.element.setAttribute('name', this.name);\n }\n if (this.value) {\n this.element.setAttribute('value', this.value);\n if (this.isVue && typeof this.value === 'boolean' && this.value === true) {\n this.setProperties({ 'checked': true }, true);\n }\n }\n if (this.checked) {\n this.changeState('check');\n }\n if (this.indeterminate) {\n this.changeState();\n }\n if (this.disabled) {\n this.setDisabled();\n }\n }\n initWrapper() {\n let wrapper = this.element.parentElement;\n if (!wrapper.classList.contains(WRAPPER)) {\n wrapper = this.createElement('div', {\n className: WRAPPER, attrs: { 'role': 'checkbox', 'aria-checked': 'false' }\n });\n this.element.parentNode.insertBefore(wrapper, this.element);\n }\n const label = this.createElement('label', { attrs: { for: this.element.id } });\n const frameSpan = this.createElement('span', { className: 'e-icons ' + FRAME });\n wrapper.classList.add('e-wrapper');\n if (this.enableRtl) {\n wrapper.classList.add(RTL);\n }\n if (this.cssClass) {\n addClass([wrapper], this.cssClass.split(' '));\n }\n wrapper.appendChild(label);\n label.appendChild(this.element);\n setHiddenInput(this, label);\n label.appendChild(frameSpan);\n if (isRippleEnabled) {\n const rippleSpan = this.createElement('span', { className: RIPPLE });\n if (this.labelPosition === 'Before') {\n label.appendChild(rippleSpan);\n }\n else {\n label.insertBefore(rippleSpan, frameSpan);\n }\n rippleEffect(rippleSpan, { duration: 400, isCenterRipple: true });\n }\n if (this.label) {\n this.setText(this.label);\n }\n }\n keyUpHandler() {\n if (this.isFocused) {\n this.getWrapper().classList.add('e-focus');\n }\n }\n labelMouseDownHandler(e) {\n this.isMouseClick = true;\n const rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];\n rippleMouseHandler(e, rippleSpan);\n }\n labelMouseUpHandler(e) {\n this.isMouseClick = true;\n const rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];\n if (rippleSpan) {\n const rippleElem = rippleSpan.querySelectorAll('.e-ripple-element');\n for (let i = 0; i < rippleElem.length - 1; i++) {\n rippleSpan.removeChild(rippleSpan.childNodes[i]);\n }\n rippleMouseHandler(e, rippleSpan);\n }\n }\n /**\n * Called internally if any of the property value changes.\n *\n * @private\n * @param {CheckBoxModel} newProp - Specifies new Properties\n * @param {CheckBoxModel} oldProp - Specifies old Properties\n *\n * @returns {void}\n */\n onPropertyChanged(newProp, oldProp) {\n const wrapper = this.getWrapper();\n for (const prop of Object.keys(newProp)) {\n switch (prop) {\n case 'checked':\n this.indeterminate = false;\n this.element.indeterminate = false;\n this.changeState(newProp.checked ? 'check' : 'uncheck');\n break;\n case 'indeterminate':\n if (newProp.indeterminate) {\n this.changeState();\n }\n else {\n this.element.indeterminate = false;\n this.changeState(this.checked ? 'check' : 'uncheck');\n }\n break;\n case 'disabled':\n if (newProp.disabled) {\n this.setDisabled();\n this.wrapper = this.getWrapper();\n this.unWireEvents();\n }\n else {\n this.element.disabled = false;\n wrapper.classList.remove(DISABLED);\n wrapper.setAttribute('aria-disabled', 'false');\n this.wireEvents();\n }\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([wrapper], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([wrapper], newProp.cssClass.split(' '));\n }\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n wrapper.classList.add(RTL);\n }\n else {\n wrapper.classList.remove(RTL);\n }\n break;\n case 'label':\n this.setText(newProp.label);\n break;\n case 'labelPosition': {\n const label = wrapper.getElementsByClassName(LABEL)[0];\n const labelWrap = wrapper.getElementsByTagName('label')[0];\n detach(label);\n if (newProp.labelPosition === 'After') {\n labelWrap.appendChild(label);\n }\n else {\n labelWrap.insertBefore(label, wrapper.getElementsByClassName(FRAME)[0]);\n }\n break;\n }\n case 'name':\n this.element.setAttribute('name', newProp.name);\n break;\n case 'value':\n if (this.isVue && typeof newProp.value === 'object') {\n break;\n }\n this.element.setAttribute('value', newProp.value);\n break;\n case 'htmlAttributes':\n this.updateHtmlAttributeToWrapper();\n break;\n }\n }\n }\n /**\n * Initialize Angular, React and Unique ID support.\n *\n * @private\n * @returns {void}\n */\n preRender() {\n let element = this.element;\n this.formElement = closest(this.element, 'form');\n this.tagName = this.element.tagName;\n element = wrapperInitialize(this.createElement, 'EJS-CHECKBOX', 'checkbox', element, WRAPPER, 'checkbox');\n this.element = element;\n if (this.element.getAttribute('type') !== 'checkbox') {\n this.element.setAttribute('type', 'checkbox');\n }\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n }\n /**\n * Initialize the control rendering.\n *\n * @private\n * @returns {void}\n */\n render() {\n this.initWrapper();\n this.initialize();\n if (!this.disabled) {\n this.wireEvents();\n }\n this.updateHtmlAttributeToWrapper();\n this.updateVueArrayModel(true);\n this.renderComplete();\n this.wrapper = this.getWrapper();\n }\n setDisabled() {\n const wrapper = this.getWrapper();\n this.element.disabled = true;\n wrapper.classList.add(DISABLED);\n wrapper.setAttribute('aria-disabled', 'true');\n }\n setText(text) {\n const wrapper = this.getWrapper();\n if (!wrapper) {\n return;\n }\n let label = wrapper.getElementsByClassName(LABEL)[0];\n if (label) {\n label.textContent = text;\n }\n else {\n text = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(text) : text;\n label = this.createElement('span', { className: LABEL, innerHTML: text });\n const labelWrap = wrapper.getElementsByTagName('label')[0];\n if (this.labelPosition === 'Before') {\n labelWrap.insertBefore(label, wrapper.getElementsByClassName(FRAME)[0]);\n }\n else {\n labelWrap.appendChild(label);\n }\n }\n }\n changeHandler(e) {\n e.stopPropagation();\n }\n formResetHandler() {\n this.checked = this.initialCheckedValue;\n this.element.checked = this.initialCheckedValue;\n }\n unWireEvents() {\n const wrapper = this.wrapper;\n EventHandler.remove(this.element, 'click', this.clickHandler);\n EventHandler.remove(this.element, 'keyup', this.keyUpHandler);\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'focusout', this.focusOutHandler);\n const label = wrapper.getElementsByTagName('label')[0];\n EventHandler.remove(label, 'mousedown', this.labelMouseDownHandler);\n EventHandler.remove(label, 'mouseup', this.labelMouseUpHandler);\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n if (this.tagName === 'EJS-CHECKBOX') {\n EventHandler.remove(this.element, 'change', this.changeHandler);\n }\n }\n wireEvents() {\n const wrapper = this.getWrapper();\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);\n EventHandler.add(this.element, 'focus', this.focusHandler, this);\n EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);\n const label = wrapper.getElementsByTagName('label')[0];\n EventHandler.add(label, 'mousedown', this.labelMouseDownHandler, this);\n EventHandler.add(label, 'mouseup', this.labelMouseUpHandler, this);\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);\n }\n if (this.tagName === 'EJS-CHECKBOX') {\n EventHandler.add(this.element, 'change', this.changeHandler, this);\n }\n }\n updateVueArrayModel(init) {\n if (this.isVue && typeof this.value === 'object') {\n const value = this.element.value;\n if (value && this.value) {\n if (init) {\n for (let i = 0; i < this.value.length; i++) {\n if (value === this.value[i]) {\n this.changeState('check');\n this.setProperties({ 'checked': true }, true);\n }\n }\n }\n else {\n const index = this.value.indexOf(value);\n if (this.checked) {\n if (index < 0) {\n this.value.push(value);\n }\n }\n else {\n if (index > -1) {\n this.value.splice(index, 1);\n }\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return this.value;\n }\n }\n }\n return this.element.checked;\n }\n updateHtmlAttributeToWrapper() {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (const key of Object.keys(this.htmlAttributes)) {\n if (containerAttr.indexOf(key) > -1) {\n const wrapper = this.getWrapper();\n if (key === 'class') {\n addClass([wrapper], this.htmlAttributes[key].split(' '));\n }\n else if (key === 'title') {\n wrapper.setAttribute(key, this.htmlAttributes[key]);\n }\n else if (key === 'style') {\n const frameSpan = this.getWrapper().getElementsByClassName(FRAME)[0];\n frameSpan.setAttribute(key, this.htmlAttributes[key]);\n }\n else {\n this.element.setAttribute(key, this.htmlAttributes[key]);\n }\n }\n }\n }\n }\n /**\n * Click the CheckBox element\n * its native method\n *\n * @public\n * @returns {void}\n */\n click() {\n this.element.click();\n }\n /**\n * Sets the focus to CheckBox\n * its native method\n *\n * @public\n * @returns {void}\n */\n focusIn() {\n this.element.focus();\n }\n};\n__decorate$1([\n Event()\n], CheckBox.prototype, \"change\", void 0);\n__decorate$1([\n Event()\n], CheckBox.prototype, \"created\", void 0);\n__decorate$1([\n Property(false)\n], CheckBox.prototype, \"checked\", void 0);\n__decorate$1([\n Property('')\n], CheckBox.prototype, \"cssClass\", void 0);\n__decorate$1([\n Property(false)\n], CheckBox.prototype, \"disabled\", void 0);\n__decorate$1([\n Property(false)\n], CheckBox.prototype, \"indeterminate\", void 0);\n__decorate$1([\n Property('')\n], CheckBox.prototype, \"label\", void 0);\n__decorate$1([\n Property('After')\n], CheckBox.prototype, \"labelPosition\", void 0);\n__decorate$1([\n Property('')\n], CheckBox.prototype, \"name\", void 0);\n__decorate$1([\n Property('')\n], CheckBox.prototype, \"value\", void 0);\n__decorate$1([\n Property(false)\n], CheckBox.prototype, \"enableHtmlSanitizer\", void 0);\n__decorate$1([\n Property({})\n], CheckBox.prototype, \"htmlAttributes\", void 0);\nCheckBox = __decorate$1([\n NotifyPropertyChanges\n], CheckBox);\n\n/**\n * CheckBox modules\n */\n\nvar __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nvar RadioButton_1;\nconst LABEL$1 = 'e-label';\nconst RIPPLE$1 = 'e-ripple-container';\nconst RTL$1 = 'e-rtl';\nconst WRAPPER$1 = 'e-radio-wrapper';\nconst ATTRIBUTES = ['title', 'class', 'style', 'disabled', 'readonly', 'name', 'value'];\n/**\n * The RadioButton is a graphical user interface element that allows you to select one option from the choices.\n * It contains checked and unchecked states.\n * ```html\n *
\n * \n * ```\n */\nlet RadioButton = RadioButton_1 = class RadioButton extends Component {\n /**\n * Constructor for creating the widget\n *\n * @private\n * @param {RadioButtonModel} options - Specifies Radio button model\n * @param {string | HTMLInputElement} element - Specifies target element\n */\n constructor(options, element) {\n super(options, element);\n this.isFocused = false;\n }\n changeHandler(event) {\n this.checked = true;\n this.dataBind();\n let value = this.element.getAttribute('value');\n value = this.isVue && value ? this.element.value : this.value;\n this.trigger('change', { value: value, event: event });\n if (this.tagName === 'EJS-RADIOBUTTON') {\n event.stopPropagation();\n }\n }\n updateChange() {\n let input;\n let instance;\n const radioGrp = this.getRadioGroup();\n for (let i = 0; i < radioGrp.length; i++) {\n input = radioGrp[i];\n if (input !== this.element) {\n instance = getInstance(input, RadioButton_1);\n instance.checked = false;\n if (this.tagName === 'EJS-RADIOBUTTON') {\n instance.angularValue = this.value;\n }\n }\n }\n }\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n destroy() {\n const radioWrap = this.element.parentElement;\n super.destroy();\n if (!this.disabled) {\n this.unWireEvents();\n }\n if (this.tagName === 'INPUT') {\n if (radioWrap.parentNode) {\n radioWrap.parentNode.insertBefore(this.element, radioWrap);\n }\n detach(radioWrap);\n this.element.checked = false;\n ['name', 'value', 'disabled'].forEach((key) => {\n this.element.removeAttribute(key);\n });\n }\n else {\n ['role', 'aria-checked', 'class'].forEach((key) => {\n radioWrap.removeAttribute(key);\n });\n radioWrap.innerHTML = '';\n }\n }\n focusHandler() {\n this.isFocused = true;\n }\n focusOutHandler() {\n const label = this.getLabel();\n if (label) {\n label.classList.remove('e-focus');\n }\n }\n getModuleName() {\n return 'radio';\n }\n /**\n * To get the value of selected radio button in a group.\n *\n * @method getSelectedValue\n * @returns {string} - Selected Value\n */\n getSelectedValue() {\n let input;\n const radioGrp = this.getRadioGroup();\n for (let i = 0, len = radioGrp.length; i < len; i++) {\n input = radioGrp[i];\n if (input.checked) {\n return input.value;\n }\n }\n return '';\n }\n getRadioGroup() {\n return document.querySelectorAll('input.e-radio[name=\"' + this.element.getAttribute('name') + '\"]');\n }\n /**\n * Gets the properties to be maintained in the persistence state.\n *\n * @private\n * @returns {string} - Persist Data\n */\n getPersistData() {\n return this.addOnPersist(['checked']);\n }\n getWrapper() {\n if (this.element) {\n return this.element.parentElement;\n }\n else {\n return null;\n }\n }\n getLabel() {\n if (this.element) {\n return this.element.nextElementSibling;\n }\n else {\n return null;\n }\n }\n initialize() {\n if (isNullOrUndefined(this.initialCheckedValue)) {\n this.initialCheckedValue = this.checked;\n }\n this.initWrapper();\n this.updateHtmlAttribute();\n if (this.name) {\n this.element.setAttribute('name', this.name);\n }\n const value = this.element.getAttribute('value');\n if (this.isVue && value && value === this.value) {\n this.checked = true;\n }\n if (this.isVue ? this.value && !value : this.value) {\n this.element.setAttribute('value', this.value);\n }\n if (this.checked) {\n this.element.checked = true;\n }\n if (this.disabled) {\n this.setDisabled();\n }\n }\n initWrapper() {\n let rippleSpan;\n let wrapper = this.element.parentElement;\n if (!wrapper.classList.contains(WRAPPER$1)) {\n wrapper = this.createElement('div', { className: WRAPPER$1 });\n this.element.parentNode.insertBefore(wrapper, this.element);\n }\n const label = this.createElement('label', { attrs: { for: this.element.id } });\n wrapper.appendChild(this.element);\n wrapper.appendChild(label);\n if (isRippleEnabled) {\n rippleSpan = this.createElement('span', { className: (RIPPLE$1) });\n label.appendChild(rippleSpan);\n rippleEffect(rippleSpan, {\n duration: 400,\n isCenterRipple: true\n });\n }\n wrapper.classList.add('e-wrapper');\n if (this.enableRtl) {\n label.classList.add(RTL$1);\n }\n if (this.cssClass) {\n addClass([wrapper], this.cssClass.split(' '));\n }\n if (this.label) {\n this.setText(this.label);\n }\n }\n keyUpHandler() {\n if (this.isFocused) {\n this.getLabel().classList.add('e-focus');\n }\n }\n labelRippleHandler(e) {\n const ripple = this.getLabel().getElementsByClassName(RIPPLE$1)[0];\n rippleMouseHandler(e, ripple);\n }\n formResetHandler() {\n this.checked = this.initialCheckedValue;\n if (this.initialCheckedValue) {\n attributes(this.element, { 'checked': 'true' });\n }\n }\n /**\n * Called internally if any of the property value changes.\n *\n * @private\n * @param {RadioButtonModel} newProp - Specifies New Properties\n * @param {RadioButtonModel} oldProp - Specifies Old Properties\n * @returns {void}\n */\n onPropertyChanged(newProp, oldProp) {\n const wrap = this.getWrapper();\n const label = this.getLabel();\n for (const prop of Object.keys(newProp)) {\n switch (prop) {\n case 'checked':\n if (newProp.checked) {\n this.updateChange();\n }\n this.element.checked = newProp.checked;\n break;\n case 'disabled':\n if (newProp.disabled) {\n this.setDisabled();\n this.unWireEvents();\n }\n else {\n this.element.disabled = false;\n this.wireEvents();\n }\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([wrap], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([wrap], newProp.cssClass.split(' '));\n }\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n label.classList.add(RTL$1);\n }\n else {\n label.classList.remove(RTL$1);\n }\n break;\n case 'label':\n this.setText(newProp.label);\n break;\n case 'labelPosition':\n if (newProp.labelPosition === 'Before') {\n label.classList.add('e-right');\n }\n else {\n label.classList.remove('e-right');\n }\n break;\n case 'name':\n this.element.setAttribute('name', newProp.name);\n break;\n case 'value':\n if (!isNullOrUndefined(this.htmlAttributes) && this.htmlAttributes.value) {\n break;\n }\n this.element.setAttribute('value', newProp.value);\n break;\n case 'htmlAttributes':\n this.updateHtmlAttribute();\n break;\n }\n }\n }\n /**\n * Initialize checked Property, Angular and React and Unique ID support.\n *\n * @private\n * @returns {void}\n */\n preRender() {\n let element = this.element;\n this.formElement = closest(this.element, 'form');\n this.tagName = this.element.tagName;\n element = wrapperInitialize(this.createElement, 'EJS-RADIOBUTTON', 'radio', element, WRAPPER$1, 'radio');\n this.element = element;\n if (this.element.getAttribute('type') !== 'radio') {\n this.element.setAttribute('type', 'radio');\n }\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n if (this.tagName === 'EJS-RADIOBUTTON') {\n const formControlName = this.element.getAttribute('formcontrolname');\n if (formControlName) {\n this.setProperties({ 'name': formControlName }, true);\n this.element.setAttribute('name', formControlName);\n }\n }\n }\n /**\n * Initialize the control rendering\n *\n * @private\n * @returns {void}\n */\n render() {\n this.initialize();\n if (!this.disabled) {\n this.wireEvents();\n }\n this.renderComplete();\n }\n setDisabled() {\n this.element.disabled = true;\n }\n setText(text) {\n const label = this.getLabel();\n let textLabel = label.getElementsByClassName(LABEL$1)[0];\n if (textLabel) {\n textLabel.textContent = text;\n }\n else {\n text = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(text) : text;\n textLabel = this.createElement('span', { className: LABEL$1, innerHTML: text });\n label.appendChild(textLabel);\n }\n if (this.labelPosition === 'Before') {\n this.getLabel().classList.add('e-right');\n }\n else {\n this.getLabel().classList.remove('e-right');\n }\n }\n updateHtmlAttribute() {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (const key of Object.keys(this.htmlAttributes)) {\n if (ATTRIBUTES.indexOf(key) > -1) {\n const wrapper = this.element.parentElement;\n if (key === 'class') {\n addClass([wrapper], this.htmlAttributes[key].split(' '));\n }\n else if (key === 'title' || key === 'style') {\n wrapper.setAttribute(key, this.htmlAttributes[key]);\n }\n else {\n this.element.setAttribute(key, this.htmlAttributes[key]);\n }\n }\n }\n }\n }\n unWireEvents() {\n const label = this.getLabel();\n EventHandler.remove(this.element, 'change', this.changeHandler);\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'focusout', this.focusOutHandler);\n EventHandler.remove(this.element, 'keyup', this.keyUpHandler);\n const rippleLabel = label.getElementsByClassName(LABEL$1)[0];\n if (rippleLabel) {\n EventHandler.remove(rippleLabel, 'mousedown', this.labelRippleHandler);\n EventHandler.remove(rippleLabel, 'mouseup', this.labelRippleHandler);\n }\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n }\n wireEvents() {\n const label = this.getLabel();\n EventHandler.add(this.element, 'change', this.changeHandler, this);\n EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);\n EventHandler.add(this.element, 'focus', this.focusHandler, this);\n EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);\n const rippleLabel = label.getElementsByClassName(LABEL$1)[0];\n if (rippleLabel) {\n EventHandler.add(rippleLabel, 'mousedown', this.labelRippleHandler, this);\n EventHandler.add(rippleLabel, 'mouseup', this.labelRippleHandler, this);\n }\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);\n }\n }\n /**\n * Click the RadioButton element\n * its native method\n *\n * @public\n * @returns {void}\n */\n click() {\n this.element.click();\n }\n /**\n * Sets the focus to RadioButton\n * its native method\n *\n * @public\n * @returns {void}\n */\n focusIn() {\n this.element.focus();\n }\n};\n__decorate$2([\n Event()\n], RadioButton.prototype, \"change\", void 0);\n__decorate$2([\n Event()\n], RadioButton.prototype, \"created\", void 0);\n__decorate$2([\n Property(false)\n], RadioButton.prototype, \"checked\", void 0);\n__decorate$2([\n Property('')\n], RadioButton.prototype, \"cssClass\", void 0);\n__decorate$2([\n Property(false)\n], RadioButton.prototype, \"disabled\", void 0);\n__decorate$2([\n Property('')\n], RadioButton.prototype, \"label\", void 0);\n__decorate$2([\n Property('After')\n], RadioButton.prototype, \"labelPosition\", void 0);\n__decorate$2([\n Property('')\n], RadioButton.prototype, \"name\", void 0);\n__decorate$2([\n Property('')\n], RadioButton.prototype, \"value\", void 0);\n__decorate$2([\n Property(false)\n], RadioButton.prototype, \"enableHtmlSanitizer\", void 0);\n__decorate$2([\n Property({})\n], RadioButton.prototype, \"htmlAttributes\", void 0);\nRadioButton = RadioButton_1 = __decorate$2([\n NotifyPropertyChanges\n], RadioButton);\n\n/**\n * RadioButton modules\n */\n\nvar __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nconst DISABLED$1 = 'e-switch-disabled';\nconst RIPPLE$2 = 'e-ripple-container';\nconst RIPPLE_CHECK = 'e-ripple-check';\nconst RTL$2 = 'e-rtl';\nconst WRAPPER$2 = 'e-switch-wrapper';\nconst ACTIVE = 'e-switch-active';\n/**\n * The Switch is a graphical user interface element that allows you to toggle between checked and unchecked states.\n * ```html\n *
\n * \n * ```\n */\nlet Switch = class Switch extends Component {\n /**\n * Constructor for creating the widget.\n *\n * @private\n *\n * @param {SwitchModel} options switch model\n * @param {string | HTMLInputElement} element target element\n *\n */\n constructor(options, element) {\n super(options, element);\n this.isFocused = false;\n this.isDrag = false;\n }\n changeState(state) {\n let ariaState;\n let rippleSpan;\n const wrapper = this.getWrapper();\n const bar = wrapper.querySelector('.e-switch-inner');\n const handle = wrapper.querySelector('.e-switch-handle');\n if (isRippleEnabled) {\n rippleSpan = wrapper.getElementsByClassName(RIPPLE$2)[0];\n }\n if (state) {\n addClass([bar, handle], ACTIVE);\n ariaState = 'true';\n this.element.checked = true;\n this.checked = true;\n if (rippleSpan) {\n addClass([rippleSpan], [RIPPLE_CHECK]);\n }\n }\n else {\n removeClass([bar, handle], ACTIVE);\n ariaState = 'false';\n this.element.checked = false;\n this.checked = false;\n if (rippleSpan) {\n removeClass([rippleSpan], [RIPPLE_CHECK]);\n }\n }\n wrapper.setAttribute('aria-checked', ariaState);\n }\n clickHandler(evt) {\n this.isDrag = false;\n this.focusOutHandler();\n this.changeState(!this.checked);\n this.element.focus();\n const changeEventArgs = { checked: this.element.checked, event: evt };\n this.trigger('change', changeEventArgs);\n }\n /**\n * Destroys the Switch widget.\n *\n * @returns {void}\n */\n destroy() {\n super.destroy();\n if (!this.disabled) {\n this.unWireEvents();\n }\n destroy(this, this.getWrapper(), this.tagName);\n }\n focusHandler() {\n this.isFocused = true;\n }\n focusOutHandler() {\n this.getWrapper().classList.remove('e-focus');\n }\n /**\n * Gets the module name.\n *\n * @private\n * @returns {string} - Module Name\n */\n getModuleName() {\n return 'switch';\n }\n /**\n * Gets the properties to be maintained in the persistence state.\n *\n * @private\n * @returns {string} - Persist data\n */\n getPersistData() {\n return this.addOnPersist(['checked']);\n }\n getWrapper() {\n return this.element.parentElement;\n }\n initialize() {\n if (isNullOrUndefined(this.initialSwitchCheckedValue)) {\n this.initialSwitchCheckedValue = this.checked;\n }\n if (this.name) {\n this.element.setAttribute('name', this.name);\n }\n if (this.value) {\n this.element.setAttribute('value', this.value);\n }\n if (this.checked) {\n this.changeState(true);\n }\n if (this.disabled) {\n this.setDisabled();\n }\n if (this.onLabel || this.offLabel) {\n this.setLabel(this.onLabel, this.offLabel);\n }\n }\n initWrapper() {\n let wrapper = this.element.parentElement;\n if (!wrapper.classList.contains(WRAPPER$2)) {\n wrapper = this.createElement('div', {\n className: WRAPPER$2, attrs: { 'role': 'switch', 'aria-checked': 'false' }\n });\n this.element.parentNode.insertBefore(wrapper, this.element);\n }\n const switchInner = this.createElement('span', { className: 'e-switch-inner' });\n const onLabel = this.createElement('span', { className: 'e-switch-on' });\n const offLabel = this.createElement('span', { className: 'e-switch-off' });\n const handle = this.createElement('span', { className: 'e-switch-handle' });\n wrapper.appendChild(this.element);\n setHiddenInput(this, wrapper);\n switchInner.appendChild(onLabel);\n switchInner.appendChild(offLabel);\n wrapper.appendChild(switchInner);\n wrapper.appendChild(handle);\n if (isRippleEnabled) {\n const rippleSpan = this.createElement('span', { className: RIPPLE$2 });\n handle.appendChild(rippleSpan);\n rippleEffect(rippleSpan, { duration: 400, isCenterRipple: true });\n }\n wrapper.classList.add('e-wrapper');\n if (this.enableRtl) {\n wrapper.classList.add(RTL$2);\n }\n if (this.cssClass) {\n addClass([wrapper], this.cssClass.split(' '));\n }\n }\n /**\n * Called internally if any of the property value changes.\n *\n * @private\n * @param {SwitchModel} newProp - Specifies New Properties\n * @param {SwitchModel} oldProp - Specifies Old Properties\n * @returns {void}\n */\n onPropertyChanged(newProp, oldProp) {\n const wrapper = this.getWrapper();\n for (const prop of Object.keys(newProp)) {\n switch (prop) {\n case 'checked':\n this.changeState(newProp.checked);\n break;\n case 'disabled':\n if (newProp.disabled) {\n this.setDisabled();\n this.unWireEvents();\n }\n else {\n this.element.disabled = false;\n wrapper.classList.remove(DISABLED$1);\n wrapper.setAttribute('aria-disabled', 'false');\n this.wireEvents();\n }\n break;\n case 'value':\n this.element.setAttribute('value', newProp.value);\n break;\n case 'name':\n this.element.setAttribute('name', newProp.name);\n break;\n case 'onLabel':\n case 'offLabel':\n this.setLabel(newProp.onLabel, newProp.offLabel);\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n wrapper.classList.add(RTL$2);\n }\n else {\n wrapper.classList.remove(RTL$2);\n }\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([wrapper], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([wrapper], newProp.cssClass.split(' '));\n }\n break;\n }\n }\n }\n /**\n * Initialize Angular, React and Unique ID support.\n *\n * @private\n * @returns {void}\n */\n preRender() {\n const element = this.element;\n this.formElement = closest(this.element, 'form');\n this.tagName = this.element.tagName;\n preRender(this, 'EJS-SWITCH', WRAPPER$2, element, this.getModuleName());\n }\n /**\n * Initialize control rendering.\n *\n * @private\n * @returns {void}\n */\n render() {\n this.initWrapper();\n this.initialize();\n if (!this.disabled) {\n this.wireEvents();\n }\n this.renderComplete();\n }\n rippleHandler(e) {\n const rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE$2)[0];\n rippleMouseHandler(e, rippleSpan);\n if (e.type === 'mousedown' && e.currentTarget.classList.contains('e-switch-wrapper') && e.which === 1) {\n this.isDrag = true;\n this.isFocused = false;\n }\n }\n rippleTouchHandler(eventType) {\n const rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE$2)[0];\n if (rippleSpan) {\n const event = document.createEvent('MouseEvents');\n event.initEvent(eventType, false, true);\n rippleSpan.dispatchEvent(event);\n }\n }\n setDisabled() {\n const wrapper = this.getWrapper();\n this.element.disabled = true;\n wrapper.classList.add(DISABLED$1);\n wrapper.setAttribute('aria-disabled', 'true');\n }\n setLabel(onText, offText) {\n const wrapper = this.getWrapper();\n if (onText) {\n wrapper.querySelector('.e-switch-on').textContent = onText;\n }\n if (offText) {\n wrapper.querySelector('.e-switch-off').textContent = offText;\n }\n }\n switchFocusHandler() {\n if (this.isFocused) {\n this.getWrapper().classList.add('e-focus');\n }\n }\n switchMouseUp(e) {\n const target = e.target;\n if (e.type === 'touchmove') {\n e.preventDefault();\n }\n if (e.type === 'touchstart') {\n this.isDrag = true;\n this.rippleTouchHandler('mousedown');\n }\n if (this.isDrag) {\n if ((e.type === 'mouseup' && target.className.indexOf('e-switch') < 0) || e.type === 'touchend') {\n this.clickHandler(e);\n this.rippleTouchHandler('mouseup');\n e.preventDefault();\n }\n }\n }\n formResetHandler() {\n this.checked = this.initialSwitchCheckedValue;\n this.element.checked = this.initialSwitchCheckedValue;\n }\n /**\n * Toggle the Switch component state into checked/unchecked.\n *\n * @returns {void}\n */\n toggle() {\n this.clickHandler();\n }\n wireEvents() {\n const wrapper = this.getWrapper();\n this.delegateMouseUpHandler = this.switchMouseUp.bind(this);\n this.delegateKeyUpHandler = this.switchFocusHandler.bind(this);\n EventHandler.add(wrapper, 'click', this.clickHandler, this);\n EventHandler.add(this.element, 'focus', this.focusHandler, this);\n EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);\n EventHandler.add(this.element, 'mouseup', this.delegateMouseUpHandler, this);\n EventHandler.add(this.element, 'keyup', this.delegateKeyUpHandler, this);\n EventHandler.add(wrapper, 'mousedown mouseup', this.rippleHandler, this);\n EventHandler.add(wrapper, 'touchstart touchmove touchend', this.switchMouseUp, this);\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);\n }\n }\n unWireEvents() {\n const wrapper = this.getWrapper();\n EventHandler.remove(wrapper, 'click', this.clickHandler);\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'focusout', this.focusOutHandler);\n EventHandler.remove(this.element, 'mouseup', this.delegateMouseUpHandler);\n EventHandler.remove(this.element, 'keyup', this.delegateKeyUpHandler);\n EventHandler.remove(wrapper, 'mousedown mouseup', this.rippleHandler);\n EventHandler.remove(wrapper, 'touchstart touchmove touchend', this.switchMouseUp);\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n }\n /**\n * Click the switch element\n * its native method\n *\n * @public\n * @returns {void}\n */\n click() {\n this.element.click();\n }\n /**\n * Sets the focus to Switch\n * its native method\n *\n * @public\n */\n focusIn() {\n this.element.focus();\n }\n};\n__decorate$3([\n Event()\n], Switch.prototype, \"change\", void 0);\n__decorate$3([\n Event()\n], Switch.prototype, \"created\", void 0);\n__decorate$3([\n Property(false)\n], Switch.prototype, \"checked\", void 0);\n__decorate$3([\n Property('')\n], Switch.prototype, \"cssClass\", void 0);\n__decorate$3([\n Property(false)\n], Switch.prototype, \"disabled\", void 0);\n__decorate$3([\n Property('')\n], Switch.prototype, \"name\", void 0);\n__decorate$3([\n Property('')\n], Switch.prototype, \"onLabel\", void 0);\n__decorate$3([\n Property('')\n], Switch.prototype, \"offLabel\", void 0);\n__decorate$3([\n Property('')\n], Switch.prototype, \"value\", void 0);\nSwitch = __decorate$3([\n NotifyPropertyChanges\n], Switch);\n\n/**\n * Switch modules\n */\n\nvar __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nconst classNames = {\n chipSet: 'e-chip-set',\n chip: 'e-chip',\n avatar: 'e-chip-avatar',\n text: 'e-chip-text',\n icon: 'e-chip-icon',\n delete: 'e-chip-delete',\n deleteIcon: 'e-dlt-btn',\n multiSelection: 'e-multi-selection',\n singleSelection: 'e-selection',\n active: 'e-active',\n chipWrapper: 'e-chip-avatar-wrap',\n iconWrapper: 'e-chip-icon-wrap',\n focused: 'e-focused',\n disabled: 'e-disabled',\n rtl: 'e-rtl'\n};\n/**\n * A chip component is a small block of essential information, mostly used on contacts or filter tags.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nlet ChipList = class ChipList extends Component {\n constructor(options, element) {\n super(options, element);\n this.multiSelectedChip = [];\n }\n /**\n * Initialize the event handler\n *\n * @private\n */\n preRender() {\n //prerender\n }\n /**\n * To find the chips length.\n *\n * @returns boolean\n * @private\n */\n chipType() {\n return (this.chips && this.chips.length && this.chips.length > 0);\n }\n /**\n * To Initialize the control rendering.\n *\n * @returns void\n * @private\n */\n render() {\n let property;\n this.type = this.chips.length ? 'chipset' : (this.text || this.element.innerText ? 'chip' : 'chipset');\n this.setAttributes();\n this.createChip();\n this.setRtl();\n this.select(this.selectedChips, property);\n this.wireEvent(false);\n this.rippleFunction = rippleEffect(this.element, {\n selector: '.e-chip'\n });\n this.renderComplete();\n }\n createChip() {\n this.innerText = this.element.innerText.trim();\n this.element.innerHTML = '';\n this.chipCreation(this.type === 'chip' ? [this.innerText ? this.innerText : this.text] : this.chips);\n }\n setAttributes() {\n if (this.type === 'chip') {\n this.element.tabIndex = 0;\n this.element.setAttribute('role', 'option');\n }\n else {\n this.element.classList.add(classNames.chipSet);\n this.element.setAttribute('role', 'listbox');\n if (this.selection === 'Multiple') {\n this.element.classList.add(classNames.multiSelection);\n this.element.setAttribute('aria-multiselectable', 'true');\n }\n else if (this.selection === 'Single') {\n this.element.classList.add(classNames.singleSelection);\n this.element.setAttribute('aria-multiselectable', 'false');\n }\n else {\n this.element.setAttribute('aria-multiselectable', 'false');\n }\n }\n }\n setRtl() {\n this.element.classList[this.enableRtl ? 'add' : 'remove'](classNames.rtl);\n }\n chipCreation(data) {\n let chipListArray = [];\n for (let i = 0; i < data.length; i++) {\n const fieldsData = this.getFieldValues(data[i]);\n const chipArray = this.elementCreation(fieldsData);\n const className = (classNames.chip + ' ' + (fieldsData.enabled ? ' ' : classNames.disabled) + ' ' +\n (fieldsData.avatarIconCss || fieldsData.avatarText ? classNames.chipWrapper : (fieldsData.leadingIconCss ?\n classNames.iconWrapper : ' ')) + ' ' + fieldsData.cssClass).split(' ').filter((css) => css);\n if (!this.chipType()) {\n chipListArray = chipArray;\n addClass([this.element], className);\n this.element.setAttribute('aria-label', fieldsData.text);\n if (fieldsData.value) {\n this.element.setAttribute('data-value', fieldsData.value.toString());\n }\n }\n else {\n const wrapper = this.createElement('DIV', {\n className: className.join(' '), attrs: {\n tabIndex: '0', role: 'option',\n 'aria-label': fieldsData.text, 'aria-selected': 'false'\n }\n });\n if (fieldsData.value) {\n wrapper.setAttribute('data-value', fieldsData.value.toString());\n }\n append(chipArray, wrapper);\n chipListArray.push(wrapper);\n }\n }\n append(chipListArray, this.element);\n }\n getFieldValues(data) {\n const chipEnabled = !(this.enabled.toString() === 'false');\n const fields = {\n text: typeof data === 'object' ? (data.text ? data.text.toString() : this.text.toString()) :\n (!this.chipType() ? (this.innerText ? this.innerText : this.text.toString()) : data.toString()),\n cssClass: typeof data === 'object' ? (data.cssClass ? data.cssClass.toString() : this.cssClass.toString()) :\n (this.cssClass.toString()),\n leadingIconCss: typeof data === 'object' ? (data.leadingIconCss ? data.leadingIconCss.toString() :\n this.leadingIconCss.toString()) : (this.leadingIconCss.toString()),\n avatarIconCss: typeof data === 'object' ? (data.avatarIconCss ? data.avatarIconCss.toString() :\n this.avatarIconCss.toString()) : (this.avatarIconCss.toString()),\n avatarText: typeof data === 'object' ? (data.avatarText ? data.avatarText.toString() : this.avatarText.toString()) :\n (this.avatarText.toString()),\n trailingIconCss: typeof data === 'object' ? (data.trailingIconCss ? data.trailingIconCss.toString() :\n this.trailingIconCss.toString()) : (this.trailingIconCss.toString()),\n enabled: typeof data === 'object' ? (!isNullOrUndefined(data.enabled) ? (data.enabled.toString() === 'false' ? false : true) :\n chipEnabled) : (chipEnabled),\n value: typeof data === 'object' ? ((data.value ? data.value.toString() : null)) : null,\n leadingIconUrl: typeof data === 'object' ? (data.leadingIconUrl ? data.leadingIconUrl.toString() : this.leadingIconUrl) :\n this.leadingIconUrl,\n trailingIconUrl: typeof data === 'object' ? (data.trailingIconUrl ? data.trailingIconUrl.toString() : this.trailingIconUrl) :\n this.trailingIconUrl\n };\n return fields;\n }\n elementCreation(fields) {\n const chipArray = [];\n if (fields.avatarText || fields.avatarIconCss) {\n const className = (classNames.avatar + ' ' + fields.avatarIconCss).trim();\n const chipAvatarElement = this.createElement('span', { className: className });\n chipAvatarElement.innerText = fields.avatarText;\n chipArray.push(chipAvatarElement);\n }\n else if (fields.leadingIconCss) {\n const className = (classNames.icon + ' ' + fields.leadingIconCss).trim();\n const chipIconElement = this.createElement('span', { className: className });\n chipArray.push(chipIconElement);\n }\n else if (fields.leadingIconUrl) {\n const className = (classNames.avatar + ' ' + 'image-url').trim();\n const chipIconElement = this.createElement('span', { className: className });\n chipIconElement.style.backgroundImage = 'url(' + fields.leadingIconUrl + ')';\n chipArray.push(chipIconElement);\n }\n const chipTextElement = this.createElement('span', { className: classNames.text });\n chipTextElement.innerText = fields.text;\n chipArray.push(chipTextElement);\n if (fields.trailingIconCss || (this.chipType() && this.enableDelete)) {\n const className = (classNames.delete + ' ' +\n (fields.trailingIconCss ? fields.trailingIconCss : classNames.deleteIcon)).trim();\n const chipdeleteElement = this.createElement('span', { className: className });\n chipArray.push(chipdeleteElement);\n }\n else if (fields.trailingIconUrl) {\n const className = ('trailing-icon-url').trim();\n const chipIconsElement = this.createElement('span', { className: className });\n chipIconsElement.style.backgroundImage = 'url(' + fields.trailingIconUrl + ')';\n chipArray.push(chipIconsElement);\n }\n return chipArray;\n }\n /**\n * A function that finds chip based on given input.\n *\n * @param {number | HTMLElement } fields - We can pass index number or element of chip.\n * {% codeBlock src='chips/find/index.md' %}{% endcodeBlock %}.\n */\n find(fields) {\n let chipData;\n const chipElement = fields instanceof HTMLElement ?\n fields : this.element.querySelectorAll('.' + classNames.chip)[fields];\n if (chipElement && this.chipType()) {\n chipData = { text: undefined, index: undefined, element: undefined, data: undefined };\n chipData.index = Array.prototype.slice.call(this.element.querySelectorAll('.' + classNames.chip)).indexOf(chipElement);\n chipData.text = typeof this.chips[chipData.index] === 'object' ?\n (this.chips[chipData.index].text ?\n this.chips[chipData.index].text.toString() : '') :\n this.chips[chipData.index].toString();\n chipData.data = this.chips[chipData.index];\n chipData.element = chipElement;\n }\n return chipData;\n }\n /**\n * Allows adding the chip item(s) by passing a single or array of string, number, or ChipModel values.\n *\n * @param {string[] | number[] | ChipModel[] | string | number | ChipModel} chipsData - We can pass array of string or\n * array of number or array of chip model or string data or number data or chip model.\n * {% codeBlock src='chips/add/index.md' %}{% endcodeBlock %}\n * @deprecated\n */\n add(chipsData) {\n if (this.type !== 'chip') {\n const fieldData = chipsData instanceof Array ?\n chipsData : [chipsData];\n this.chips.push(...fieldData);\n this.chipCreation(fieldData);\n }\n }\n /**\n * Allows selecting the chip item(s) by passing a single or array of string, number, or ChipModel values.\n *\n * @param {number | number[] | HTMLElement | HTMLElement[]} fields - We can pass number or array of number\n * or chip element or array of chip element.\n * {% codeBlock src='chips/select/index.md' %}{% endcodeBlock %}\n */\n select(fields, selectionType) {\n this.onSelect(fields, false, selectionType);\n }\n multiSelection(newProp) {\n const items = this.element.querySelectorAll('.' + 'e-chip');\n for (let j = 0; j < newProp.length; j++) {\n if (typeof newProp[j] === 'string') {\n for (let k = 0; k < items.length; k++) {\n if (newProp[j] !== k) {\n if (newProp[j] === items[k].attributes[5].value) {\n this.multiSelectedChip.push(k);\n break;\n }\n }\n }\n }\n else {\n this.multiSelectedChip.push(newProp[j]);\n }\n }\n }\n onSelect(fields, callFromProperty, selectionType) {\n let index;\n let chipNodes;\n let chipValue;\n if (this.chipType() && this.selection !== 'None') {\n if (callFromProperty) {\n const chipElements = this.element.querySelectorAll('.' + classNames.chip);\n for (let i = 0; i < chipElements.length; i++) {\n chipElements[i].setAttribute('aria-selected', 'false');\n chipElements[i].classList.remove(classNames.active);\n }\n }\n const fieldData = fields instanceof Array ? fields : [fields];\n for (let i = 0; i < fieldData.length; i++) {\n let chipElement = fieldData[i] instanceof HTMLElement ? fieldData[i]\n : this.element.querySelectorAll('.' + classNames.chip)[fieldData[i]];\n if (selectionType !== 'index') {\n for (let j = 0; j < this.chips.length; j++) {\n chipNodes = this.element.querySelectorAll('.' + classNames.chip)[j];\n const fieldsData = this.getFieldValues(this.chips[j]);\n if (selectionType === 'value') {\n if (fieldsData.value !== null) {\n chipValue = chipNodes.dataset.value;\n }\n }\n else if (selectionType === 'text') {\n chipValue = chipNodes.innerText;\n }\n if (chipValue === fieldData[i].toString()) {\n index = j;\n chipElement = this.element.querySelectorAll('.' + classNames.chip)[index];\n }\n }\n }\n if (chipElement instanceof HTMLElement) {\n this.selectionHandler(chipElement);\n }\n }\n }\n }\n /**\n * Allows removing the chip item(s) by passing a single or array of string, number, or ChipModel values.\n *\n * @param {number | number[] | HTMLElement | HTMLElement[]} fields - We can pass number or array of number\n * or chip element or array of chip element.\n * {% codeBlock src='chips/remove/index.md' %}{% endcodeBlock %}\n */\n remove(fields) {\n if (this.chipType()) {\n const fieldData = fields instanceof Array ? fields : [fields];\n const chipElements = [];\n const chipCollection = this.element.querySelectorAll('.' + classNames.chip);\n fieldData.forEach((data) => {\n const chipElement = data instanceof HTMLElement ? data\n : chipCollection[data];\n if (chipElement instanceof HTMLElement) {\n chipElements.push(chipElement);\n }\n });\n chipElements.forEach((element) => {\n const chips = this.element.querySelectorAll('.' + classNames.chip);\n const index = Array.prototype.slice.call(chips).indexOf(element);\n this.deleteHandler(element, index);\n });\n }\n }\n /**\n * Returns the selected chip(s) data.\n * {% codeBlock src='chips/getSelectedChips/index.md' %}{% endcodeBlock %}\n */\n getSelectedChips() {\n let selectedChips;\n if (this.chipType() && this.selection !== 'None') {\n const selectedItems = { texts: [], Indexes: [], data: [], elements: [] };\n const items = this.element.querySelectorAll('.' + classNames.active);\n for (let i = 0; i < items.length; i++) {\n const chip = items[i];\n selectedItems.elements.push(chip);\n const index = Array.prototype.slice.call(this.element.querySelectorAll('.' + classNames.chip)).indexOf(chip);\n selectedItems.Indexes.push(index);\n selectedItems.data.push(this.chips[index]);\n const text = typeof this.chips[index] === 'object' ?\n this.chips[index].text ? this.chips[index].text.toString()\n : null : this.chips[index].toString();\n selectedItems.texts.push(text);\n }\n const selectedItem = {\n text: selectedItems.texts[0], index: selectedItems.Indexes[0],\n data: selectedItems.data[0], element: selectedItems.elements[0]\n };\n selectedChips = !isNullOrUndefined(selectedItem.index) ?\n (this.selection === 'Multiple' ? selectedItems : selectedItem) : undefined;\n }\n return selectedChips;\n }\n wireEvent(unWireEvent) {\n if (!unWireEvent) {\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);\n EventHandler.add(this.element, 'keydown', this.keyHandler, this);\n EventHandler.add(this.element, 'keyup', this.keyHandler, this);\n }\n else {\n EventHandler.remove(this.element, 'click', this.clickHandler);\n EventHandler.remove(this.element, 'focusout', this.focusOutHandler);\n EventHandler.remove(this.element, 'keydown', this.keyHandler);\n EventHandler.remove(this.element, 'keyup', this.keyHandler);\n }\n }\n keyHandler(e) {\n if (e.target.classList.contains(classNames.chip)) {\n if (e.type === 'keydown') {\n if (e.keyCode === 13) {\n this.clickHandler(e);\n }\n else if (e.keyCode === 46 && this.enableDelete) {\n this.clickHandler(e, true);\n }\n }\n else if (e.keyCode === 9) {\n this.focusInHandler(e.target);\n }\n }\n }\n focusInHandler(chipWrapper) {\n if (!chipWrapper.classList.contains(classNames.focused)) {\n chipWrapper.classList.add(classNames.focused);\n }\n }\n focusOutHandler(e) {\n const chipWrapper = closest(e.target, '.' + classNames.chip);\n const focusedElement = !this.chipType() ? (this.element.classList.contains(classNames.focused) ?\n this.element : null) : this.element.querySelector('.' + classNames.focused);\n if (chipWrapper && focusedElement) {\n focusedElement.classList.remove(classNames.focused);\n }\n }\n clickHandler(e, del = false) {\n const chipWrapper = closest(e.target, '.' + classNames.chip);\n if (chipWrapper) {\n // eslint-disable-next-line\n let chipDataArgs;\n if (this.chipType()) {\n chipDataArgs = this.find(chipWrapper);\n }\n else {\n const index = Array.prototype.slice.call(this.element.querySelectorAll('.' + classNames.chip)).indexOf(chipWrapper);\n chipDataArgs = {\n text: this.innerText ? this.innerText : this.text,\n element: chipWrapper, data: this.text, index: index\n };\n }\n chipDataArgs.event = e;\n chipDataArgs.cancel = false;\n this.trigger('beforeClick', chipDataArgs, (observedArgs) => {\n if (!observedArgs.cancel) {\n this.clickEventHandler(observedArgs.element, e, del);\n }\n });\n }\n }\n clickEventHandler(chipWrapper, e, del) {\n if (this.chipType()) {\n const chipData = this.find(chipWrapper);\n chipData.event = e;\n const deleteElement = e.target.classList.contains(classNames.deleteIcon) ?\n e.target : (del ? chipWrapper.querySelector('.' + classNames.deleteIcon) : undefined);\n if (deleteElement && this.enableDelete) {\n chipData.cancel = false;\n const deletedItemArgs = chipData;\n this.trigger('delete', deletedItemArgs, (observedArgs) => {\n if (!observedArgs.cancel) {\n this.deleteHandler(observedArgs.element, observedArgs.index);\n this.selectionHandler(chipWrapper);\n chipData.selected = observedArgs.element.classList.contains(classNames.active);\n let selectedItemArgs = chipData;\n this.trigger('click', selectedItemArgs);\n }\n });\n }\n else if (this.selection !== 'None') {\n this.selectionHandler(chipWrapper);\n chipData.selected = chipWrapper.classList.contains(classNames.active);\n const selectedItemArgs = chipData;\n this.trigger('click', selectedItemArgs);\n }\n else {\n this.focusInHandler(chipWrapper);\n const clickedItemArgs = chipData;\n this.trigger('click', clickedItemArgs);\n }\n }\n else {\n this.focusInHandler(chipWrapper);\n const clickedItemArgs = {\n text: this.innerText ? this.innerText : this.text,\n element: chipWrapper, data: this.text, event: e\n };\n this.trigger('click', clickedItemArgs);\n }\n }\n selectionHandler(chipWrapper) {\n if (this.selection === 'Single') {\n const activeElement = this.element.querySelector('.' + classNames.active);\n if (activeElement && activeElement !== chipWrapper) {\n activeElement.classList.remove(classNames.active);\n activeElement.setAttribute('aria-selected', 'false');\n }\n this.setProperties({ selectedChips: null }, true);\n }\n else {\n this.setProperties({ selectedChips: [] }, true);\n }\n if (chipWrapper.classList.contains(classNames.active)) {\n chipWrapper.classList.remove(classNames.active);\n chipWrapper.setAttribute('aria-selected', 'false');\n }\n else {\n chipWrapper.classList.add(classNames.active);\n chipWrapper.setAttribute('aria-selected', 'true');\n }\n this.updateSelectedChips();\n }\n updateSelectedChips() {\n const chipListEle = this.element.querySelectorAll('.e-chip');\n const chipCollIndex = [];\n const chipCollValue = [];\n let chip = null;\n let value;\n for (let i = 0; i < chipListEle.length; i++) {\n const selectedEle = this.element.querySelectorAll('.e-chip')[i];\n if (selectedEle.getAttribute('aria-selected') === 'true') {\n value = selectedEle.getAttribute('data-value');\n if (this.selection === 'Single' && selectedEle.classList.contains('e-active')) {\n chip = value ? value : i;\n break;\n }\n else {\n chip = value ? chipCollValue.push(value) : chipCollIndex.push(i);\n }\n }\n }\n this.setProperties({ selectedChips: this.selection === 'Single' ? chip : value ? chipCollValue : chipCollIndex }, true);\n }\n deleteHandler(chipWrapper, index) {\n this.chips.splice(index, 1);\n this.setProperties({ chips: this.chips }, true);\n detach(chipWrapper);\n }\n /**\n * Removes the component from the DOM and detaches all its related event handlers. Also, it removes the attributes and classes.\n * {% codeBlock src='chips/destroy/index.md' %}{% endcodeBlock %}\n */\n destroy() {\n removeClass([this.element], [classNames.chipSet, classNames.chip, classNames.rtl,\n classNames.multiSelection, classNames.singleSelection, classNames.disabled, classNames.chipWrapper, classNames.iconWrapper,\n classNames.active, classNames.focused].concat(this.cssClass.toString().split(' ').filter((css) => css)));\n this.removeMultipleAttributes(['tabindex', 'role', 'aria-label', 'aria-multiselectable'], this.element);\n this.wireEvent(true);\n this.rippleFunction();\n super.destroy();\n this.element.innerHTML = '';\n this.element.innerText = this.innerText;\n }\n removeMultipleAttributes(attributes$$1, element) {\n attributes$$1.forEach((attr) => {\n element.removeAttribute(attr);\n });\n }\n getPersistData() {\n return this.addOnPersist([]);\n }\n getModuleName() {\n return 'chip-list';\n }\n /**\n * Called internally if any of the property value changed.\n *\n * @returns void\n * @private\n */\n onPropertyChanged(newProp, oldProp) {\n let property;\n for (const prop of Object.keys(newProp)) {\n switch (prop) {\n case 'chips':\n case 'text':\n case 'avatarText':\n case 'avatarIconCss':\n case 'leadingIconCss':\n case 'trailingIconCss':\n case 'selection':\n case 'enableDelete':\n case 'enabled':\n this.refresh();\n break;\n case 'cssClass':\n if (!this.chipType()) {\n removeClass([this.element], oldProp.cssClass.toString().split(' ').filter((css) => css));\n addClass([this.element], newProp.cssClass.toString().split(' ').filter((css) => css));\n }\n else {\n this.refresh();\n }\n break;\n case 'selectedChips':\n removeClass(this.element.querySelectorAll('.e-active'), 'e-active');\n if (this.selection === 'Multiple') {\n this.multiSelectedChip = [];\n this.multiSelection(newProp.selectedChips);\n this.onSelect(this.multiSelectedChip, true, property);\n this.updateSelectedChips();\n }\n else {\n this.onSelect(newProp.selectedChips, true, property);\n }\n break;\n case 'enableRtl':\n this.setRtl();\n break;\n }\n }\n }\n};\n__decorate$4([\n Property([])\n], ChipList.prototype, \"chips\", void 0);\n__decorate$4([\n Property('')\n], ChipList.prototype, \"text\", void 0);\n__decorate$4([\n Property('')\n], ChipList.prototype, \"avatarText\", void 0);\n__decorate$4([\n Property('')\n], ChipList.prototype, \"avatarIconCss\", void 0);\n__decorate$4([\n Property('')\n], ChipList.prototype, \"leadingIconCss\", void 0);\n__decorate$4([\n Property('')\n], ChipList.prototype, \"trailingIconCss\", void 0);\n__decorate$4([\n Property('')\n], ChipList.prototype, \"leadingIconUrl\", void 0);\n__decorate$4([\n Property('')\n], ChipList.prototype, \"trailingIconUrl\", void 0);\n__decorate$4([\n Property('')\n], ChipList.prototype, \"cssClass\", void 0);\n__decorate$4([\n Property(true)\n], ChipList.prototype, \"enabled\", void 0);\n__decorate$4([\n Property([])\n], ChipList.prototype, \"selectedChips\", void 0);\n__decorate$4([\n Property('None')\n], ChipList.prototype, \"selection\", void 0);\n__decorate$4([\n Property(false)\n], ChipList.prototype, \"enableDelete\", void 0);\n__decorate$4([\n Event()\n], ChipList.prototype, \"created\", void 0);\n__decorate$4([\n Event()\n], ChipList.prototype, \"click\", void 0);\n__decorate$4([\n Event()\n], ChipList.prototype, \"beforeClick\", void 0);\n__decorate$4([\n Event()\n], ChipList.prototype, \"delete\", void 0);\nChipList = __decorate$4([\n NotifyPropertyChanges\n], ChipList);\n\n/**\n * Represents ChipList `Chip` model class.\n */\nclass Chip {\n}\n\n/**\n * Chip modules\n */\n\n/**\n * Button all modules\n */\n\nexport { wrapperInitialize, getTextNode, destroy, preRender, createCheckBox, rippleMouseHandler, setHiddenInput, buttonObserver, Button, CheckBox, RadioButton, Switch, classNames, ChipList, Chip };\n//# sourceMappingURL=ej2-buttons.es2015.js.map\n","/**\n * Index\n */\nexport * from './complex-array-base';\nexport * from './component-base';\nexport * from './form-base';\nexport * from './util';\nexport * from './template';\n","import { setTemplateEngine, getTemplateEngine } from '@syncfusion/ej2-base';\nimport { setValue, getValue } from '@syncfusion/ej2-base';\nvar stringCompiler = getTemplateEngine();\n/**\n * Angular Template Compiler\n */\nexport function compile(templateEle, helper) {\n if (typeof templateEle === 'string') {\n return stringCompiler(templateEle, helper);\n }\n else {\n var contRef_1 = templateEle.elementRef.nativeElement._viewContainerRef;\n var pName_1 = templateEle.elementRef.nativeElement.propName;\n //tslint:disable-next-line \n return function (data, component, propName) {\n var context = { $implicit: data };\n /* istanbul ignore next */\n var conRef = contRef_1 ? contRef_1 : component.viewContainerRef;\n var viewRef = conRef.createEmbeddedView(templateEle, context);\n viewRef.markForCheck();\n /* istanbul ignore next */\n var viewCollection = (component && component.registeredTemplate) ?\n component.registeredTemplate : getValue('currentInstance.registeredTemplate', conRef);\n propName = (propName && component.registeredTemplate) ? propName : pName_1;\n if (typeof viewCollection[propName] === 'undefined') {\n viewCollection[propName] = [];\n }\n viewCollection[propName].push(viewRef);\n return viewRef.rootNodes;\n };\n }\n}\n/**\n * Property decorator for angular.\n */\nexport function Template(defaultValue) {\n return function (target, key) {\n var propertyDescriptor = {\n set: setter(key),\n get: getter(key, defaultValue),\n enumerable: true,\n configurable: true\n };\n Object.defineProperty(target, key, propertyDescriptor);\n };\n}\nfunction setter(key) {\n return function (val) {\n if (val === undefined) {\n return;\n }\n setValue(key + 'Ref', val, this);\n if (typeof val !== 'string') {\n val.elementRef.nativeElement._viewContainerRef = this.viewContainerRef;\n val.elementRef.nativeElement.propName = key;\n }\n else {\n if (this.saveChanges) {\n this.saveChanges(key, val, undefined);\n this.dataBind();\n }\n }\n };\n}\nfunction getter(key, defaultValue) {\n return function () {\n /* istanbul ignore next */\n return getValue(key + 'Ref', this) || defaultValue;\n };\n}\n//tslint:disable-next-line\nsetTemplateEngine({ compile: compile });\n","/**\n * index\n */\nexport * from './src/index';\n","import { Injectable } from '@angular/core';\r\nimport { HttpEvent, HttpEventType, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';\r\nimport { Observable } from 'rxjs';\r\nimport { tap } from 'rxjs/operators';\r\nimport { LoadingService } from 'src/app/shared/loading/loading.service';\r\n\r\n@Injectable()\r\nexport class LoadingInterceptor implements HttpInterceptor {\r\n constructor(private loadingService: LoadingService) {\r\n }\r\n\r\n intercept(request: HttpRequest
, next: HttpHandler): Observable> {\r\n return next.handle(request).pipe(\r\n tap(res => {\r\n if (res.type === HttpEventType.Sent) {\r\n this.loadingService.loading$.next(true);\r\n }\r\n\r\n if (res.type === HttpEventType.Response) {\r\n this.loadingService.loading$.next(false);\r\n }\r\n })\r\n );\r\n }\r\n}\r\n","import { Animation, ChildProperty, Collection, Complex, Component, Event, EventHandler, KeyboardEvents, NotifyPropertyChanges, Property, SanitizeHtmlHelper, addClass, attributes, classList, closest, createElement, deleteObject, detach, extend, getInstance, getUniqueID, getValue, isBlazor, isNullOrUndefined, remove, removeClass, rippleEffect, select, setValue } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { Popup, createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';\n\nvar __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n/**\n * @param {Object} props - Specifies the properties\n * @param {string[]} model - Specifies the model\n * @returns {Object} Component Model\n */\nfunction getModel(props, model) {\n const obj = extend({}, props);\n for (const prop of Object.keys(obj)) {\n if ((model).indexOf(prop) < 0) {\n deleteObject(obj, prop);\n }\n }\n return obj;\n}\n/** @hidden\n * @param {HTMLElement} ul - Specifies the UL element\n * @param {number} keyCode - Specifies the keycode\n * @returns {void}\n */\nfunction upDownKeyHandler(ul, keyCode) {\n const defaultIdx = keyCode === 40 ? 0 : ul.childElementCount - 1;\n let liIdx = defaultIdx;\n let li;\n const selectedLi = ul.querySelector('.e-selected');\n if (selectedLi) {\n selectedLi.classList.remove('e-selected');\n }\n for (let i = 0, len = ul.children.length; i < len; i++) {\n if (ul.children[i].classList.contains('e-focused')) {\n li = ul.children[i];\n liIdx = i;\n li.classList.remove('e-focused');\n if (keyCode === 40) {\n liIdx++;\n }\n else {\n liIdx--;\n }\n if (liIdx === (keyCode === 40 ? ul.childElementCount : -1)) {\n liIdx = defaultIdx;\n }\n }\n }\n li = ul.children[liIdx];\n liIdx = isValidLI(ul, li, liIdx, keyCode);\n if (liIdx !== -1) {\n addClass([ul.children[liIdx]], 'e-focused');\n ul.children[liIdx].focus();\n }\n}\n/**\n * Get Valid LI element\n *\n * @param {HTMLElement} ul - Specifies the UL element\n * @param {Element} li - Specifies the LI element\n * @param {number} index - Specifies the index\n * @param {number} keyCode - Specifies the keycode\n * @param {number} count - Specifies the count\n * @returns {number} - Index\n */\nfunction isValidLI(ul, li, index, keyCode, count = 0) {\n if (li.classList.contains('e-separator') || li.classList.contains('e-disabled')) {\n if (index === (keyCode === 40 ? ul.childElementCount - 1 : 0)) {\n index = keyCode === 40 ? 0 : ul.childElementCount - 1;\n }\n else {\n if (keyCode === 40) {\n index++;\n }\n else {\n index--;\n }\n }\n }\n li = ul.children[index];\n if (li.classList.contains('e-separator') || li.classList.contains('e-disabled')) {\n count++;\n if (count === ul.childElementCount) {\n return index = -1;\n }\n index = isValidLI(ul, li, index, keyCode, count);\n }\n return index;\n}\n/** @hidden\n * @param {HTMLElement} popup - Specifies the popup element.\n * @returns {void}\n */\nfunction setBlankIconStyle(popup) {\n const blankIconList = [].slice.call(popup.getElementsByClassName('e-blank-icon'));\n if (!blankIconList.length) {\n return;\n }\n let iconLi = popup.querySelector('.e-item:not(.e-blank-icon):not(.e-separator)');\n if (iconLi.classList.contains('e-url')) {\n iconLi = iconLi.querySelector('.e-menu-url');\n }\n const icon = iconLi.querySelector('.e-menu-icon');\n let cssProp;\n const enableRtl = popup.classList.contains('e-rtl');\n if (enableRtl) {\n cssProp = { padding: 'paddingRight', margin: 'marginLeft' };\n }\n else {\n cssProp = { padding: 'paddingLeft', margin: 'marginRight' };\n }\n /* eslint-disable */\n let size = `${parseInt(getComputedStyle(icon).fontSize, 10) + parseInt((enableRtl ? getComputedStyle(icon)[cssProp.margin] : getComputedStyle(icon)[cssProp.margin]), 10)\n + parseInt(getComputedStyle(iconLi).paddingLeft, 10)}px`;\n blankIconList.forEach((li) => {\n if (li.classList.contains('e-url')) {\n li.querySelector('.e-menu-url').style[cssProp.padding] = size;\n }\n else {\n li.style[cssProp.padding] = size;\n }\n });\n /* eslint-enable */\n}\n/**\n * Defines the items of Split Button/DropDownButton.\n */\nclass Item extends ChildProperty {\n}\n__decorate([\n Property('')\n], Item.prototype, \"iconCss\", void 0);\n__decorate([\n Property('')\n], Item.prototype, \"id\", void 0);\n__decorate([\n Property(false)\n], Item.prototype, \"separator\", void 0);\n__decorate([\n Property('')\n], Item.prototype, \"text\", void 0);\n__decorate([\n Property('')\n], Item.prototype, \"url\", void 0);\n__decorate([\n Property(false)\n], Item.prototype, \"disabled\", void 0);\n\n/**\n * Common modules\n */\n\nvar __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nconst classNames = {\n DISABLED: 'e-disabled',\n FOCUS: 'e-focused',\n ICON: 'e-menu-icon',\n ITEM: 'e-item',\n POPUP: 'e-dropdown-popup',\n RTL: 'e-rtl',\n SEPARATOR: 'e-separator',\n VERTICAL: 'e-vertical'\n};\n/**\n * DropDownButton component is used to toggle contextual overlays for displaying list of action items.\n * It can contain both text and images.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nlet DropDownButton = class DropDownButton extends Component {\n /**\n * Constructor for creating the widget\n *\n * @param {DropDownButtonModel} options - Specifies dropdown button model\n * @param {string|HTMLButtonElement} element - Specifies element\n * @hidden\n */\n constructor(options, element) {\n super(options, element);\n this.isPopupCreated = true;\n }\n preRender() {\n /** */\n }\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} - Persist data\n */\n getPersistData() {\n return this.addOnPersist([]);\n }\n /**\n * To open/close DropDownButton popup based on current state of the DropDownButton.\n *\n * @returns {void}\n */\n toggle() {\n if (this.canOpen()) {\n this.openPopUp();\n }\n else {\n this.closePopup();\n }\n }\n /**\n * Initialize the Component rendering\n *\n * @returns {void}\n * @private\n */\n render() {\n this.initialize();\n if (!this.disabled) {\n this.wireEvents();\n }\n this.renderComplete();\n }\n /**\n * Adds a new item to the menu. By default, new item appends to the list as the last item,\n * but you can insert based on the text parameter.\n *\n * @param { ItemModel[] } items - Specifies an array of JSON data.\n * @param { string } text - Specifies the text to insert the newly added item in the menu.\n * @returns {void}.\n */\n addItems(items, text) {\n let newItem;\n let idx = this.items.length;\n for (let j = 0, len = this.items.length; j < len; j++) {\n if (text === this.items[j].text) {\n idx = j;\n break;\n }\n }\n for (let i = items.length - 1; i >= 0; i--) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n newItem = new Item(this, 'items', items[i], true);\n this.items.splice(idx, 0, newItem);\n }\n if (!this.canOpen()) {\n this.createItems();\n }\n }\n /**\n * Removes the items from the menu.\n *\n * @param { string[] } items - Specifies an array of string to remove the items.\n * @param { string } isUniqueId - Set `true` if specified items is a collection of unique id.\n * @returns {void}.\n */\n removeItems(items, isUniqueId) {\n let refresh = false;\n for (let i = 0, len = items.length; i < len; i++) {\n for (let j = 0, len = this.items.length; j < len; j++) {\n if (items[i] === (isUniqueId ? this.items[j].id : this.items[j].text)) {\n this.items.splice(j, 1);\n refresh = true;\n break;\n }\n }\n }\n if (refresh && this.getULElement()) {\n this.createItems();\n }\n }\n createPopup() {\n const div = this.createElement('div', {\n className: classNames.POPUP,\n id: this.element.id + '-popup'\n });\n document.body.appendChild(div);\n this.dropDown = new Popup(div, {\n relateTo: this.element,\n collision: { X: 'fit', Y: 'flip' },\n position: { X: 'left', Y: 'bottom' },\n targetType: 'relative',\n content: this.target ? this.getTargetElement() : '',\n enableRtl: this.enableRtl\n });\n if (this.dropDown.element.style.position === 'fixed') {\n this.dropDown.refreshPosition(this.element);\n }\n this.dropDown.hide();\n attributes(this.element, {\n ['aria-haspopup']: this.items.length || this.target ? 'true' : 'false', ['aria-expanded']: 'false',\n ['aria-owns']: this.getPopUpElement().id, ['type']: 'button',\n ['aria-label']: this.element.textContent + ' dropdownbutton'\n });\n if (this.cssClass) {\n addClass([div], this.cssClass.split(' '));\n }\n this.isPopupCreated = true;\n }\n getTargetElement() {\n return typeof (this.target) === 'string' ? select(this.target) : this.target;\n }\n createItems(appendItems) {\n const items = this.items;\n const showIcon = this.hasIcon(this.items, 'iconCss');\n let span;\n let item;\n let li;\n let eventArgs;\n let ul = this.getULElement();\n if (ul) {\n ul.innerHTML = '';\n }\n else {\n ul = this.createElement('ul', {\n attrs: { 'role': 'menu', 'tabindex': '0' }\n });\n }\n for (let i = 0; i < items.length; i++) {\n item = items[i];\n const tempItem = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(item.text) : item.text;\n li = this.createElement('li', {\n innerHTML: item.url ? '' : tempItem,\n className: item.separator ? classNames.ITEM + ' ' + classNames.SEPARATOR : classNames.ITEM,\n attrs: { 'role': 'menuItem', 'tabindex': '-1' },\n id: item.id ? item.id : getUniqueID('e-' + this.getModuleName() + '-item')\n });\n if (item.url) {\n li.appendChild(this.createAnchor(item));\n li.classList.add('e-url');\n }\n if (item.iconCss) {\n span = this.createElement('span', { className: classNames.ICON + ' ' + item.iconCss });\n if (item.url) {\n li.childNodes[0].appendChild(span);\n }\n else {\n li.insertBefore(span, li.childNodes[0]);\n }\n }\n else {\n if (showIcon && !item.separator) {\n li.classList.add('e-blank-icon');\n }\n }\n if (item.disabled) {\n li.classList.add('e-disabled');\n }\n eventArgs = { item: item, element: li };\n this.trigger('beforeItemRender', eventArgs);\n ul.appendChild(li);\n }\n if (appendItems) {\n this.getPopUpElement().appendChild(ul);\n }\n if (showIcon) {\n setBlankIconStyle(this.getPopUpElement());\n }\n }\n hasIcon(items, field) {\n for (let i = 0, len = items.length; i < len; i++) {\n if (items[i][field]) {\n return true;\n }\n }\n return false;\n }\n createAnchor(item) {\n const tempItem = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(item.text) : item.text;\n return this.createElement('a', { className: 'e-menu-text e-menu-url', innerHTML: tempItem, attrs: { 'href': item.url } });\n }\n initialize() {\n this.button = new Button({\n iconCss: this.iconCss, iconPosition: this.iconPosition, cssClass: this.cssClass, content: this.content,\n disabled: this.disabled, enableRtl: this.enableRtl, enablePersistence: this.enablePersistence\n });\n this.button.createElement = this.createElement;\n this.button.appendTo(this.element);\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n this.appendArrowSpan();\n this.setActiveElem([this.element]);\n if (this.target || !this.createPopupOnClick) {\n this.createPopup();\n }\n else {\n this.isPopupCreated = false;\n }\n }\n appendArrowSpan() {\n this.element.appendChild(this.createElement('span', {\n className: 'e-btn-icon e-icons ' + 'e-icon-' + (this.cssClass.indexOf(classNames.VERTICAL) > -1\n ? 'bottom' : 'right') + ' e-caret'\n }));\n }\n setActiveElem(elem) {\n this.activeElem = elem;\n }\n /**\n * Get component name.\n *\n * @returns {string} - Module Name\n * @private\n */\n getModuleName() {\n return 'dropdown-btn';\n }\n canOpen() {\n let val = false;\n if (this.isPopupCreated) {\n val = this.getPopUpElement().classList.contains('e-popup-close');\n }\n return val;\n }\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n destroy() {\n super.destroy();\n if (this.getModuleName() === 'dropdown-btn') {\n let classList$$1;\n if (this.element.querySelector('span.e-caret')) {\n detach(this.element.querySelector('span.e-caret'));\n }\n if (this.cssClass) {\n classList$$1 = this.cssClass.split(' ');\n }\n this.button.destroy();\n if (classList$$1) {\n removeClass([this.element], classList$$1);\n }\n removeClass(this.activeElem, ['e-active']);\n const attrList = this.element.getAttribute('class') ? ['aria-haspopup', 'aria-expanded', 'aria-owns', 'type']\n : ['aria-haspopup', 'aria-expanded', 'aria-owns', 'type', 'class'];\n attrList.forEach((key) => {\n this.element.removeAttribute(key);\n });\n this.destroyPopup();\n this.isPopupCreated = false;\n if (!this.disabled) {\n this.unWireEvents();\n }\n }\n }\n destroyPopup() {\n if (this.isPopupCreated) {\n this.dropDown.destroy();\n if (this.getPopUpElement()) {\n const popupEle = document.getElementById(this.getPopUpElement().id);\n if (popupEle) {\n removeClass([popupEle], ['e-popup-open', 'e-popup-close']);\n detach(popupEle);\n }\n }\n EventHandler.remove(this.getPopUpElement(), 'click', this.clickHandler);\n EventHandler.remove(this.getPopUpElement(), 'keydown', this.keyBoardHandler);\n if (this.isPopupCreated) {\n this.dropDown = undefined;\n }\n }\n this.isPopupCreated = false;\n }\n getPopUpElement() {\n let val = null;\n if (this.dropDown) {\n val = this.dropDown.element;\n }\n return val;\n }\n getULElement() {\n let val = null;\n if (this.getPopUpElement()) {\n val = this.getPopUpElement().children[0];\n }\n return val;\n }\n wireEvents() {\n this.delegateMousedownHandler = this.mousedownHandler.bind(this);\n EventHandler.add(document, 'mousedown touchstart', this.delegateMousedownHandler, this);\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n EventHandler.add(this.element, 'keydown', this.keyBoardHandler, this);\n }\n popupWireEvents() {\n const popupElement = this.getPopUpElement();\n EventHandler.add(popupElement, 'click', this.clickHandler, this);\n EventHandler.add(popupElement, 'keydown', this.keyBoardHandler, this);\n this.rippleFn = rippleEffect(popupElement, { selector: '.' + classNames.ITEM });\n }\n /**\n * Handles the keyboard interactions.\n *\n * @param {KeyboardEventArgs} e - Specifies keyboard event args.\n * @returns {void}\n * @hidden\n */\n keyBoardHandler(e) {\n if (e.target === this.element && (e.keyCode === 9 || (!e.altKey && e.keyCode === 40) || e.keyCode === 38)) {\n return;\n }\n switch (e.keyCode) {\n case 38:\n case 40:\n if (e.altKey && (e.keyCode === 38 || e.keyCode === 40)) {\n this.keyEventHandler(e);\n }\n else {\n this.upDownKeyHandler(e);\n }\n break;\n case 9:\n case 13:\n case 27:\n case 32:\n this.keyEventHandler(e);\n break;\n }\n }\n upDownKeyHandler(e) {\n if (this.target && (e.keyCode === 38 || e.keyCode === 40)) {\n return;\n }\n e.preventDefault();\n upDownKeyHandler(this.getULElement(), e.keyCode);\n }\n keyEventHandler(e) {\n if (this.target && (e.keyCode === 13 || e.keyCode === 9)) {\n return;\n }\n if (e.target && e.target.className.indexOf('e-edit-template') > -1 && e.keyCode === 32) {\n return;\n }\n if (e.keyCode !== 9) {\n e.preventDefault();\n }\n if (e.keyCode === 27 || e.keyCode === 38 || e.keyCode === 9) {\n if (!this.canOpen()) {\n this.closePopup(e, this.element);\n }\n }\n else {\n this.clickHandler(e);\n }\n }\n getLI(elem) {\n return elem.tagName === 'LI' ? elem : closest(elem, 'li');\n }\n mousedownHandler(e) {\n const trgt = e.target;\n if (this.dropDown && !this.canOpen() && !(closest(trgt, '[id=\"' + this.getPopUpElement().id + '\"]')\n || closest(trgt, '[id=\"' + this.element.id + '\"]'))) {\n this.closePopup(e);\n }\n }\n clickHandler(e) {\n const trgt = e.target;\n if (closest(trgt, '[id=\"' + this.element.id + '\"]')) {\n if (!this.createPopupOnClick || this.target) {\n if (this.getPopUpElement().classList.contains('e-popup-close')) {\n this.openPopUp(e);\n }\n else {\n this.closePopup(e);\n }\n }\n else if (this.isPopupCreated) {\n this.closePopup(e, this.activeElem[0]);\n }\n else {\n this.createPopup();\n this.openPopUp(e);\n }\n }\n else {\n if (closest(trgt, '[id=\"' + this.getPopUpElement().id + '\"]')) {\n let eventArgs;\n let liIdx;\n let item;\n const li = this.getLI(trgt);\n if (li) {\n liIdx = Array.prototype.indexOf.call(this.getULElement().children, li);\n item = this.items[liIdx];\n if (item) {\n eventArgs = { element: li, item: item };\n this.trigger('select', eventArgs);\n }\n this.closePopup(e, this.activeElem[0]);\n }\n }\n }\n }\n openPopUp(e = null) {\n if (!this.target) {\n this.createItems(true);\n }\n const ul = this.getULElement();\n this.popupWireEvents();\n const beforeOpenArgs = { element: ul, items: this.items, event: e, cancel: false };\n this.trigger('beforeOpen', beforeOpenArgs, (observedArgs) => {\n if (!observedArgs.cancel) {\n const ul = this.getULElement();\n this.dropDown.show(null, this.element);\n addClass([this.element], 'e-active');\n this.element.setAttribute('aria-expanded', 'true');\n ul.focus();\n const openArgs = { element: ul, items: this.items };\n this.trigger('open', openArgs);\n }\n });\n }\n closePopup(e = null, focusEle) {\n const ul = this.getULElement();\n const beforeCloseArgs = { element: ul, items: this.items, event: e, cancel: false };\n this.trigger('beforeClose', beforeCloseArgs, (observedArgs) => {\n if (!observedArgs.cancel) {\n const ul = this.getULElement();\n const selectedLi = ul.querySelector('.e-selected');\n if (selectedLi) {\n selectedLi.classList.remove('e-selected');\n }\n this.dropDown.hide();\n removeClass(this.activeElem, 'e-active');\n this.element.setAttribute('aria-expanded', 'false');\n if (focusEle) {\n focusEle.focus();\n }\n const closeArgs = { element: ul, items: this.items };\n this.trigger('close', closeArgs);\n if (!this.target && ul) {\n detach(ul);\n }\n if (!this.target) {\n if (this.createPopupOnClick) {\n this.destroyPopup();\n }\n }\n if (this.target) {\n this.isPopupCreated = this.createPopupOnClick ? false : true;\n }\n }\n });\n }\n unWireEvents() {\n EventHandler.remove(document, 'mousedown touchstart', this.delegateMousedownHandler);\n EventHandler.remove(this.element, 'click', this.clickHandler);\n EventHandler.remove(this.element, 'keydown', this.keyBoardHandler);\n if (this.isPopupCreated) {\n EventHandler.remove(this.getPopUpElement(), 'click', this.clickHandler);\n EventHandler.remove(this.getPopUpElement(), 'keydown', this.keyBoardHandler);\n }\n }\n /**\n * Called internally if any of the property value changed.\n *\n * @param {DropDownButtonModel} newProp - Specifies new properties\n * @param {DropDownButtonModel} oldProp - Specifies old properties\n * @returns {void}\n * @private\n */\n onPropertyChanged(newProp, oldProp) {\n const btnModel = ['content', 'cssClass', 'iconCss', 'iconPosition', 'disabled', 'enableRtl'];\n this.button.setProperties(getModel(newProp, btnModel));\n let popupElement;\n if (this.isPopupCreated) {\n popupElement = this.getPopUpElement();\n this.dropDown.setProperties(getModel(newProp, ['enableRtl']));\n }\n for (const prop of Object.keys(newProp)) {\n switch (prop) {\n case 'content':\n if (!this.element.querySelector('span.e-caret')) {\n this.appendArrowSpan();\n }\n break;\n case 'disabled':\n if (newProp.disabled) {\n this.unWireEvents();\n if (this.isPopupCreated && !this.canOpen()) {\n this.closePopup();\n }\n }\n else {\n this.wireEvents();\n }\n break;\n case 'cssClass':\n if (newProp.cssClass.indexOf(classNames.VERTICAL) > -1) {\n const arrowSpan = this.element.querySelector('span.e-caret');\n classList(arrowSpan, ['e-icon-bottom'], ['e-icon-right']);\n }\n if (this.isPopupCreated) {\n if (oldProp.cssClass) {\n removeClass([popupElement], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([popupElement], newProp.cssClass.split(' '));\n }\n }\n break;\n case 'target':\n this.dropDown.content = this.getTargetElement();\n this.dropDown.dataBind();\n break;\n case 'items':\n if (this.isPopupCreated && this.getULElement()) {\n this.createItems();\n }\n break;\n case 'createPopupOnClick':\n if (newProp.createPopupOnClick) {\n this.destroyPopup();\n }\n else {\n this.createPopup();\n }\n break;\n }\n }\n }\n /**\n * Sets the focus to DropDownButton\n * its native method\n *\n * @public\n * @returns {void}\n */\n focusIn() {\n this.element.focus();\n }\n};\n__decorate$1([\n Property('')\n], DropDownButton.prototype, \"content\", void 0);\n__decorate$1([\n Property('')\n], DropDownButton.prototype, \"cssClass\", void 0);\n__decorate$1([\n Property(false)\n], DropDownButton.prototype, \"disabled\", void 0);\n__decorate$1([\n Property('')\n], DropDownButton.prototype, \"iconCss\", void 0);\n__decorate$1([\n Property('Left')\n], DropDownButton.prototype, \"iconPosition\", void 0);\n__decorate$1([\n Property(false)\n], DropDownButton.prototype, \"enableHtmlSanitizer\", void 0);\n__decorate$1([\n Collection([], Item)\n], DropDownButton.prototype, \"items\", void 0);\n__decorate$1([\n Property(false)\n], DropDownButton.prototype, \"createPopupOnClick\", void 0);\n__decorate$1([\n Property('')\n], DropDownButton.prototype, \"target\", void 0);\n__decorate$1([\n Event()\n], DropDownButton.prototype, \"beforeItemRender\", void 0);\n__decorate$1([\n Event()\n], DropDownButton.prototype, \"beforeOpen\", void 0);\n__decorate$1([\n Event()\n], DropDownButton.prototype, \"beforeClose\", void 0);\n__decorate$1([\n Event()\n], DropDownButton.prototype, \"close\", void 0);\n__decorate$1([\n Event()\n], DropDownButton.prototype, \"open\", void 0);\n__decorate$1([\n Event()\n], DropDownButton.prototype, \"select\", void 0);\n__decorate$1([\n Event()\n], DropDownButton.prototype, \"created\", void 0);\nDropDownButton = __decorate$1([\n NotifyPropertyChanges\n], DropDownButton);\n\n/**\n * DropDownButton modules\n */\n\nvar __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n// eslint-disable-next-line @typescript-eslint/triple-slash-reference\n/// \nconst RTL = 'e-rtl';\nconst TAGNAME = 'EJS-SPLITBUTTON';\n/**\n * SplitButton component has primary and secondary button. Primary button is used to select\n * default action and secondary button is used to toggle contextual overlays for displaying list of\n * action items. It can contain both text and images.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nlet SplitButton = class SplitButton extends DropDownButton {\n /**\n * Constructor for creating the widget\n *\n * @param {SplitButtonModel} options - Specifies the splitbutton model\n * @param {string|HTMLButtonElement} element - Specifies the element\n * @hidden\n */\n constructor(options, element) {\n super(options, element);\n }\n /**\n * Initialize Angular support.\n *\n * @private\n * @returns {void}\n */\n preRender() {\n let ele = this.element;\n if (ele.tagName === TAGNAME) {\n const ejInstance = getValue('ej2_instances', ele);\n const btn = this.createElement('button', { attrs: { 'type': 'button' } });\n const wrapper = this.createElement(TAGNAME, { className: 'e-' + this.getModuleName() + '-wrapper' });\n for (let idx = 0, len = ele.attributes.length; idx < len; idx++) {\n btn.setAttribute(ele.attributes[idx].nodeName, ele.attributes[idx].nodeValue);\n }\n ele.parentNode.insertBefore(wrapper, ele);\n detach(ele);\n ele = btn;\n wrapper.appendChild(ele);\n setValue('ej2_instances', ejInstance, ele);\n this.wrapper = wrapper;\n this.element = ele;\n }\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n }\n /**\n * Initialize the Component rendering\n *\n * @returns {void}\n * @private\n */\n render() {\n this.initWrapper();\n this.createPrimaryButton();\n this.renderControl();\n }\n renderControl() {\n this.createSecondaryButton();\n this.setActiveElem([this.element, this.secondaryBtnObj.element]);\n this.setAria();\n this.wireEvents();\n this.renderComplete();\n }\n /**\n * Adds a new item to the menu. By default, new item appends to the list as the last item,\n * but you can insert based on the text parameter.\n *\n * @param { ItemModel[] } items - Specifies an array of JSON data.\n * @param { string } text - Specifies the text to insert the newly added item in the menu.\n * @returns {void}.\n */\n addItems(items, text) {\n super.addItems(items, text);\n this.secondaryBtnObj.items = this.items;\n }\n /**\n * Removes the items from the menu.\n *\n * @param { string[] } items - Specifies an array of string to remove the items.\n * @param { string } isUniqueId - Set `true` if specified items is a collection of unique id.\n * @returns {void}.\n */\n removeItems(items, isUniqueId) {\n super.removeItems(items, isUniqueId);\n this.secondaryBtnObj.items = this.items;\n }\n initWrapper() {\n if (!this.wrapper) {\n this.wrapper = this.createElement('div', { className: 'e-' + this.getModuleName() + '-wrapper' });\n this.element.parentNode.insertBefore(this.wrapper, this.element);\n }\n this.element.classList.remove('e-' + this.getModuleName());\n if (this.enableRtl) {\n this.wrapper.classList.add(RTL);\n }\n if (this.cssClass) {\n addClass([this.wrapper], this.cssClass.split(' '));\n }\n }\n createPrimaryButton() {\n const btnModel = {\n cssClass: this.cssClass,\n enableRtl: this.enableRtl,\n iconCss: this.iconCss,\n iconPosition: this.iconPosition,\n content: this.content,\n disabled: this.disabled\n };\n this.primaryBtnObj = new Button(btnModel);\n this.primaryBtnObj.createElement = this.createElement;\n this.primaryBtnObj.appendTo(this.element);\n this.element.classList.add('e-' + this.getModuleName());\n this.element.type = 'button';\n this.wrapper.appendChild(this.element);\n }\n createSecondaryButton() {\n const btnElem = this.createElement('button', {\n className: 'e-icon-btn',\n attrs: { 'tabindex': '-1' },\n id: this.element.id + '_dropdownbtn'\n });\n this.wrapper.appendChild(btnElem);\n const dropDownBtnModel = {\n cssClass: this.cssClass,\n disabled: this.disabled,\n enableRtl: this.enableRtl,\n items: this.items,\n target: this.target,\n createPopupOnClick: this.createPopupOnClick\n };\n dropDownBtnModel.beforeItemRender = (args) => {\n if (this.createPopupOnClick) {\n this.secondaryBtnObj.dropDown.relateTo = this.wrapper;\n this.dropDown = this.secondaryBtnObj.dropDown;\n }\n this.trigger('beforeItemRender', args);\n };\n dropDownBtnModel.open = (args) => {\n this.trigger('open', args);\n };\n dropDownBtnModel.close = (args) => {\n this.trigger('close', args);\n };\n dropDownBtnModel.select = (args) => {\n this.trigger('select', args);\n };\n dropDownBtnModel.beforeOpen = (args) => {\n const callBackPromise = new Deferred();\n this.trigger('beforeOpen', args, (observedArgs) => {\n callBackPromise.resolve(observedArgs);\n });\n return callBackPromise;\n };\n dropDownBtnModel.beforeClose = (args) => {\n const callBackPromise = new Deferred();\n this.trigger('beforeClose', args, (observedArgs) => {\n callBackPromise.resolve(observedArgs);\n });\n return callBackPromise;\n };\n this.secondaryBtnObj = new DropDownButton(dropDownBtnModel);\n this.secondaryBtnObj.createElement = this.createElement;\n this.secondaryBtnObj.appendTo(btnElem);\n if (!this.createPopupOnClick) {\n this.secondaryBtnObj.dropDown.relateTo = this.wrapper;\n this.dropDown = this.secondaryBtnObj.dropDown;\n }\n this.secondaryBtnObj.activeElem = [this.element, this.secondaryBtnObj.element];\n this.secondaryBtnObj.element.querySelector('.e-btn-icon').classList.remove('e-icon-right');\n }\n setAria() {\n attributes(this.element, {\n 'aria-expanded': 'false', 'aria-haspopup': 'true',\n 'aria-label': this.element.textContent + ' splitbutton', 'aria-owns': this.element.id + '_dropdownbtn-popup'\n });\n }\n /**\n * Get component name.\n *\n * @returns {string} - Module Name\n * @private\n */\n getModuleName() {\n return 'split-btn';\n }\n /**\n * To open/close SplitButton popup based on current state of the SplitButton.\n *\n * @returns {void}\n */\n toggle() {\n this.secondaryBtnObj.toggle();\n }\n destroy() {\n let classList$$1 = [RTL];\n if (this.cssClass) {\n classList$$1 = classList$$1.concat(this.cssClass.split(' '));\n }\n if (this.element) {\n const element = document.getElementById(this.element.id);\n if (element && element.parentElement === this.wrapper) {\n if (this.wrapper.tagName === TAGNAME) {\n this.wrapper.innerHTML = '';\n removeClass([this.wrapper], ['e-rtl', 'e-' + this.getModuleName() + '-wrapper']);\n removeClass([this.wrapper], this.cssClass.split(' '));\n }\n else {\n removeClass([this.element], classList$$1);\n ['aria-label', 'aria-haspopup', 'aria-expanded', 'aria-owns', 'type'].forEach((key) => {\n this.element.removeAttribute(key);\n });\n this.wrapper.parentNode.insertBefore(this.element, this.wrapper);\n remove(this.wrapper);\n }\n this.unWireEvents();\n }\n }\n this.primaryBtnObj.destroy();\n this.secondaryBtnObj.destroy();\n super.destroy();\n if (!this.element.getAttribute('class')) {\n this.element.removeAttribute('class');\n }\n }\n wireEvents() {\n EventHandler.add(this.element, 'click', this.primaryBtnClickHandler, this);\n new KeyboardEvents(this.element, {\n keyAction: this.btnKeyBoardHandler.bind(this),\n keyConfigs: {\n altdownarrow: 'alt+downarrow'\n }\n });\n }\n unWireEvents() {\n EventHandler.remove(this.element, 'click', this.primaryBtnClickHandler);\n getInstance(this.element, KeyboardEvents).destroy();\n }\n primaryBtnClickHandler() {\n this.trigger('click', { element: this.element });\n }\n btnKeyBoardHandler(e) {\n switch (e.action) {\n case 'altdownarrow':\n this.clickHandler(e);\n break;\n }\n }\n /**\n * Called internally if any of the property value changed.\n *\n * @param {SplitButtonModel} newProp - Specifies new properties\n * @param {SplitButtonModel} oldProp - Specifies old properties\n * @returns {void}\n */\n onPropertyChanged(newProp, oldProp) {\n let model = ['content', 'iconCss', 'iconPosition', 'cssClass', 'disabled', 'enableRtl'];\n this.primaryBtnObj.setProperties(getModel(newProp, model));\n model = ['beforeOpen', 'beforeItemRender', 'select', 'open',\n 'close', 'cssClass', 'disabled', 'enableRtl', 'createPopupOnClick'];\n if (Object.keys(newProp).indexOf('items') > -1) {\n this.secondaryBtnObj.items = newProp.items;\n this.secondaryBtnObj.dataBind();\n }\n this.secondaryBtnObj.setProperties(getModel(newProp, model));\n for (const prop of Object.keys(newProp)) {\n switch (prop) {\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([this.wrapper], oldProp.cssClass.split(' '));\n }\n addClass([this.wrapper], newProp.cssClass.split(' '));\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n addClass([this.wrapper], RTL);\n }\n else {\n removeClass([this.wrapper], RTL);\n }\n break;\n }\n }\n }\n /**\n * Sets the focus to SplitButton\n * its native method\n *\n * @public\n * @returns {void}\n */\n focusIn() {\n this.element.focus();\n }\n};\n__decorate$2([\n Property('')\n], SplitButton.prototype, \"content\", void 0);\n__decorate$2([\n Property('')\n], SplitButton.prototype, \"cssClass\", void 0);\n__decorate$2([\n Property(false)\n], SplitButton.prototype, \"disabled\", void 0);\n__decorate$2([\n Property('')\n], SplitButton.prototype, \"iconCss\", void 0);\n__decorate$2([\n Property('Left')\n], SplitButton.prototype, \"iconPosition\", void 0);\n__decorate$2([\n Property(false)\n], SplitButton.prototype, \"createPopupOnClick\", void 0);\n__decorate$2([\n Collection([], Item)\n], SplitButton.prototype, \"items\", void 0);\n__decorate$2([\n Property('')\n], SplitButton.prototype, \"target\", void 0);\n__decorate$2([\n Event()\n], SplitButton.prototype, \"beforeItemRender\", void 0);\n__decorate$2([\n Event()\n], SplitButton.prototype, \"beforeOpen\", void 0);\n__decorate$2([\n Event()\n], SplitButton.prototype, \"beforeClose\", void 0);\n__decorate$2([\n Event()\n], SplitButton.prototype, \"click\", void 0);\n__decorate$2([\n Event()\n], SplitButton.prototype, \"close\", void 0);\n__decorate$2([\n Event()\n], SplitButton.prototype, \"open\", void 0);\n__decorate$2([\n Event()\n], SplitButton.prototype, \"select\", void 0);\n__decorate$2([\n Event()\n], SplitButton.prototype, \"created\", void 0);\nSplitButton = __decorate$2([\n NotifyPropertyChanges\n], SplitButton);\n/**\n * Deferred is used to handle asynchronous operation.\n */\nclass Deferred {\n constructor() {\n /**\n * Promise is an object that represents a value that may not be available yet, but will be resolved at some point in the future.\n */\n this.promise = new Promise((resolve, reject) => {\n this.resolve = resolve;\n this.reject = reject;\n });\n /**\n * Defines the callback function triggers when the Deferred object is rejected.\n */\n this.catch = this.promise.catch.bind(this.promise);\n /**\n * Defines the callback function triggers when the Deferred object is resolved.\n */\n this.then = this.promise.then.bind(this.promise);\n }\n}\n\n/**\n * Split Button modules\n */\n\n/**\n * Initialize ButtonGroup CSS component with specified properties.\n * ```html\n * \n * \n * \n * \n *
\n * ```\n * ```typescript\n * createButtonGroup('#buttongroup', {\n * cssClass: 'e-outline',\n * buttons: [\n * { content: 'Day' },\n * { content: 'Week' },\n * { content: 'Work Week'}\n * ]\n * });\n * ```\n *\n * @param {string} selector\n * @param {CreateButtonGroupModel} options\n * @returns HTMLElement\n */\n/**\n * Creates button group.\n *\n * @param {string} selector - Specifies the selector.\n * @param {CreateButtonGroupModel} options - Specifies the button group model.\n * @param {Function} createElement - Specifies the element.\n * @returns {HTMLElement} - Button group element.\n */\nfunction createButtonGroup(selector, options = {}, createElement$$1) {\n let child;\n let btnElem;\n let nextChild;\n let btnModel;\n if (isNullOrUndefined(createElement$$1)) {\n createElement$$1 = createElement;\n }\n const wrapper = document.querySelector(selector);\n addClass([wrapper], ['e-btn-group', 'e-css']);\n wrapper.setAttribute('role', 'group');\n const childs = wrapper.children;\n options.buttons = options.buttons || [];\n for (let i = 0, j = 0; j < childs.length; i++, j++) {\n child = childs[j];\n btnModel = options.buttons[i];\n if (btnModel !== null) {\n if (child.tagName === 'BUTTON') {\n btnElem = child;\n }\n else {\n btnElem = createElement$$1('label');\n nextChild = childs[j + 1];\n if (nextChild) {\n wrapper.insertBefore(btnElem, nextChild);\n }\n else {\n wrapper.appendChild(btnElem);\n }\n if (child.id) {\n btnElem.setAttribute('for', child.id);\n }\n if (btnModel && btnModel.disabled) {\n child.disabled = true;\n }\n j++;\n }\n if (options.cssClass && btnModel && !btnModel.cssClass) {\n btnModel.cssClass = options.cssClass;\n }\n new Button(btnModel || {}, btnElem);\n }\n }\n return wrapper;\n}\n\n/**\n * ButtonGroup modules\n */\n\nvar __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nconst HIDESPINNER = 'e-hide-spinner';\nconst PROGRESS = 'e-progress';\nconst PROGRESSACTIVE = 'e-progress-active';\nconst CONTENTCLS = 'e-btn-content';\n/**\n * Defines the spin settings.\n */\nclass SpinSettings extends ChildProperty {\n}\n__decorate$3([\n Property(null)\n], SpinSettings.prototype, \"template\", void 0);\n__decorate$3([\n Property(16)\n], SpinSettings.prototype, \"width\", void 0);\n__decorate$3([\n Property('Left')\n], SpinSettings.prototype, \"position\", void 0);\n/**\n * Defines the animation settings.\n */\nclass AnimationSettings extends ChildProperty {\n}\n__decorate$3([\n Property(400)\n], AnimationSettings.prototype, \"duration\", void 0);\n__decorate$3([\n Property('None')\n], AnimationSettings.prototype, \"effect\", void 0);\n__decorate$3([\n Property('ease')\n], AnimationSettings.prototype, \"easing\", void 0);\n/**\n * The ProgressButton visualizes the progression of an operation to indicate the user\n * that a process is happening in the background with visual representation.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nlet ProgressButton = class ProgressButton extends Button {\n /**\n * Constructor for creating the widget.\n *\n * @param {ProgressButtonModel} options - Specifies progress button model\n * @param {string|HTMLButtonElement} element - Specifies element\n */\n constructor(options, element) {\n super(options, element);\n this.step = 1;\n }\n preRender() {\n super.preRender();\n }\n /**\n * Initialize the Component rendering\n *\n * @returns {void}\n * @private\n */\n render() {\n if (isBlazor()) {\n this.isServerRendered = false;\n }\n super.render();\n this.init();\n this.wireEvents();\n this.setAria();\n this.renderComplete();\n }\n /**\n * Starts the button progress at the specified percent.\n *\n * @param {number} percent - Starts the button progress at this percent.\n * @returns {void}\n */\n start(percent) {\n this.isPaused = false;\n this.startProgress(percent ? percent : this.percent, this.progressTime);\n }\n /**\n * Stops the button progress.\n *\n * @returns {void}\n */\n stop() {\n this.isPaused = true;\n cancelAnimationFrame(this.timerId);\n }\n /**\n * Complete the button progress.\n *\n * @returns {void}\n */\n progressComplete() {\n this.isPaused = false;\n this.finishProgress();\n }\n /**\n * Get component name.\n *\n * @returns {string} - Module Name\n * @private\n */\n getModuleName() {\n return 'progress-btn';\n }\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n destroy() {\n let classList$$1 = [HIDESPINNER, PROGRESSACTIVE, 'e-round-corner', 'e-' + super.getModuleName(),\n 'e-spin-' + this.spinSettings.position.toLowerCase()];\n super.destroy();\n this.unWireEvents();\n this.element.innerHTML = '';\n if (this.cssClass) {\n classList$$1 = classList$$1.concat(this.cssClass.split(' '));\n }\n removeClass([this.element], classList$$1);\n const css = this.element.getAttribute('class') ? ['aria-label', 'aria-valuemin', 'aria-valuemax', 'aria-valuenow']\n : ['aria-label', 'aria-valuemin', 'aria-valuemax', 'aria-valuenow', 'class'];\n css.forEach((key) => {\n this.element.removeAttribute(key);\n });\n if (this.disabled) {\n this.element.removeAttribute('disabled');\n }\n }\n init() {\n this.element.classList.add('e-' + super.getModuleName());\n this.setContent();\n this.createSpinner();\n if (this.enableProgress) {\n this.createProgress();\n }\n }\n createSpinner() {\n const spinner = this.createElement('span', { className: 'e-spinner' });\n this.setSpinPosition(spinner);\n createSpinner({\n target: spinner, width: this.spinSettings.width || 16, template: this.spinSettings.template\n }, this.createElement);\n }\n getSpinner() {\n return this.element.getElementsByClassName('e-spinner')[0];\n }\n getProgress() {\n return this.element.getElementsByClassName(PROGRESS)[0];\n }\n setSpinPosition(ele) {\n const position = this.spinSettings.position || 'Left';\n if (position === 'Left' || position === 'Top') {\n this.element.insertBefore(ele, this.element.getElementsByClassName(CONTENTCLS)[0]);\n }\n else {\n this.element.appendChild(ele);\n }\n this.element.classList.add('e-spin-' + position.toLowerCase());\n }\n createProgress() {\n this.element.appendChild(this.createElement('span', { className: PROGRESS }));\n }\n setContent() {\n let cont;\n if (isBlazor()) {\n cont = this.content;\n if (this.enableHtmlSanitizer) {\n cont = SanitizeHtmlHelper.sanitize(this.content);\n }\n this.setContentIcon(cont);\n }\n else {\n cont = this.element.innerHTML;\n if (this.enableHtmlSanitizer) {\n cont = SanitizeHtmlHelper.sanitize(this.element.innerHTML);\n }\n this.element.innerHTML = '';\n this.element.appendChild(this.createElement('span', { className: CONTENTCLS, innerHTML: cont }));\n }\n }\n setContentIcon(content) {\n const contElem = this.createElement('span', { className: CONTENTCLS, innerHTML: content });\n if (this.iconCss) {\n const span = this.createElement('span', { className: 'e-btn-icon ' + this.iconCss });\n if (!this.element.textContent.trim()) {\n this.element.classList.add('e-icon-btn');\n }\n else {\n span.classList.add('e-icon-' + this.iconPosition.toLowerCase());\n if (this.iconPosition === 'Top' || this.iconPosition === 'Bottom') {\n this.element.classList.add('e-' + this.iconPosition.toLowerCase() + '-icon-btn');\n }\n }\n const node = contElem.childNodes[0];\n if (node && (this.iconPosition === 'Left' || this.iconPosition === 'Top')) {\n contElem.insertBefore(span, node);\n }\n else {\n contElem.appendChild(span);\n }\n }\n this.element.appendChild(contElem);\n }\n clickHandler() {\n if (this.element.classList.contains(PROGRESSACTIVE)) {\n return;\n }\n this.startProgress();\n }\n startProgress(percent, progressTime) {\n const clsList = this.element.classList;\n const isVertical = clsList.contains('e-vertical');\n clsList.add(PROGRESSACTIVE);\n if (!(clsList.contains(HIDESPINNER))) {\n showSpinner(this.element);\n }\n this.startAnimate(Date.now(), progressTime ? progressTime : 0, progressTime ? Date.now() - (this.duration * 1 / 100) : Date.now(), percent ? percent : 0, 0, this.step, 0, isVertical);\n this.startContAnimate();\n }\n startAnimate(timestamp, progressTime, prevTime, percent, prevPercent, step, prevProgressTime, isVertical) {\n try {\n const timeDiff = timestamp - prevTime;\n const stepTime = this.duration * step / 100;\n const timeDiffBuffer = timeDiff ? (timeDiff < stepTime ? timeDiff - stepTime : timeDiff % stepTime) : 0;\n this.progressTime = progressTime = progressTime + timeDiff - timeDiffBuffer;\n prevTime = timestamp - timeDiffBuffer;\n percent = percent + (timeDiff - timeDiffBuffer) / this.duration * 100;\n prevPercent = ((progressTime - prevProgressTime) % stepTime === 0 || percent === 100) ? percent : prevPercent;\n const args = { percent: prevPercent, currentDuration: progressTime, step: step };\n this.eIsVertical = isVertical;\n if (percent === 0) {\n this.trigger('begin', args, (observedArgs) => {\n this.successCallback(observedArgs, percent, prevPercent, progressTime, prevProgressTime, timeDiffBuffer, prevTime);\n });\n }\n else if (percent === 100 || progressTime === this.duration) {\n this.trigger('end', args, (observedArgs) => {\n this.successCallback(observedArgs, percent, prevPercent, progressTime, prevProgressTime, timeDiffBuffer, prevTime);\n });\n }\n else {\n this.trigger('progress', args, (observedArgs) => {\n this.successCallback(observedArgs, percent, prevPercent, progressTime, prevProgressTime, timeDiffBuffer, prevTime);\n });\n }\n }\n catch (e) {\n cancelAnimationFrame(this.timerId);\n this.trigger('fail', e);\n }\n }\n successCallback(args, perc, pPerc, prgTim, pPrgTim, timDif, pTim) {\n let percent = perc;\n let prevPercent = pPerc;\n const timeDiffBuffer = timDif;\n const progressTime = prgTim;\n let prevProgressTime = pPrgTim;\n const prevTime = pTim;\n const isVertical = this.eIsVertical;\n if (percent !== args.percent && args.percent !== prevPercent) {\n percent = args.percent;\n }\n this.percent = percent;\n this.step = args.step;\n if ((progressTime - prevProgressTime) % (this.duration * args.step / 100) === 0 || percent === 100) {\n this.timerId = requestAnimationFrame(() => {\n if (this.enableProgress) {\n this.getProgress().style[isVertical ? 'height' : 'width'] = percent + '%';\n }\n this.element.setAttribute('aria-valuenow', percent.toString());\n });\n prevPercent = percent;\n prevProgressTime = progressTime;\n }\n if (!this.isPaused) {\n if (progressTime < this.duration && percent < 100) {\n this.interval = window.setTimeout(() => {\n this.startAnimate(Date.now(), progressTime, prevTime, percent, prevPercent, args.step, prevProgressTime, isVertical);\n }, (this.duration / 100) - timeDiffBuffer);\n }\n else {\n this.interval = window.setTimeout(() => {\n this.progressTime = this.percent = 0;\n if (this.enableProgress) {\n this.getProgress().style[isVertical ? 'height' : 'width'] = '0%';\n }\n this.element.setAttribute('aria-valuenow', '0');\n this.hideSpin();\n }, 100);\n }\n }\n }\n startContAnimate() {\n const ele = this.element.getElementsByClassName(CONTENTCLS)[0];\n if (this.animationSettings.effect !== 'None') {\n (new Animation({})).animate(ele, {\n duration: this.animationSettings.duration,\n name: 'Progress' + this.animationSettings.effect,\n timingFunction: this.animationSettings.easing,\n begin: () => {\n if (this.spinSettings.position === 'Center') {\n this.setSpinnerSize();\n }\n },\n end: () => {\n ele.classList.add('e-animate-end');\n }\n });\n }\n else if (this.spinSettings.position === 'Center') {\n this.setSpinnerSize();\n }\n }\n finishProgress() {\n const clsList = this.element.classList;\n const isVertical = clsList.contains('e-vertical');\n clsList.add(PROGRESSACTIVE);\n const count = 100;\n for (let i = this.percent; i < count; i++) {\n i += 10;\n if (i > 100) {\n i = 100;\n }\n if (this.enableProgress) {\n this.getProgress().style[isVertical ? 'height' : 'width'] = (this.percent < 100) ? (i + '%') : '100%';\n }\n }\n this.element.setAttribute('aria-valuenow', '0');\n this.hideSpin();\n const args = { step: this.step, currentDuration: this.progressTime, percent: 100 };\n clearTimeout(this.interval);\n this.trigger('end', args);\n this.progressTime = this.percent = 0;\n }\n setSpinnerSize() {\n const ele = this.element.getElementsByClassName(CONTENTCLS)[0];\n const spinner = this.getSpinner();\n spinner.style.width = Math.max(spinner.offsetWidth, ele.offsetWidth) + 'px';\n spinner.style.height = Math.max(spinner.offsetHeight, ele.offsetHeight) + 'px';\n ele.classList.add('e-cont-animate');\n }\n hideSpin() {\n const cont = this.element.getElementsByClassName(CONTENTCLS)[0];\n if (!(this.element.classList.contains(HIDESPINNER))) {\n hideSpinner(this.element);\n }\n this.element.classList.remove(PROGRESSACTIVE);\n if (this.animationSettings.effect !== 'None') {\n cont.classList.remove('e-animate-end');\n }\n if (this.spinSettings.position === 'Center') {\n const ele = this.getSpinner();\n cont.classList.remove('e-cont-animate');\n ele.style.width = 'auto';\n ele.style.height = 'auto';\n }\n }\n setIconSpan() {\n const cont = this.element.getElementsByClassName(CONTENTCLS)[0];\n const iconSpan = this.element.getElementsByClassName('e-btn-icon')[0];\n if (cont.childNodes[0] && (this.iconPosition === 'Left' || this.iconPosition === 'Top')) {\n cont.insertBefore(iconSpan, cont.childNodes[0]);\n }\n else {\n cont.appendChild(iconSpan);\n }\n }\n setAria() {\n attributes(this.element, {\n 'aria-label': this.element.textContent + ' progress', 'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuenow': '0'\n });\n }\n wireEvents() {\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n }\n unWireEvents() {\n EventHandler.remove(this.element, 'click', this.clickHandler);\n }\n /**\n * Called internally if any of the property value changed.\n *\n * @param {ProgressButtonModel} newProp - Specifies new properties\n * @param {ProgressButtonModel} oldProp - Specifies old properties\n * @returns {void}\n * @private\n */\n onPropertyChanged(newProp, oldProp) {\n const ele = this.element;\n let isSpinning = false;\n const clsList = this.element.querySelector('.e-spinner-pane').classList;\n if (clsList.contains('e-spin-show')) {\n isSpinning = true;\n }\n super.onPropertyChanged(newProp, oldProp);\n for (const prop of Object.keys(newProp)) {\n switch (prop) {\n case 'content':\n if (isBlazor()) {\n const btnElem = this.element.querySelector('.e-btn-content');\n if (this.iconCss) {\n if (this.iconPosition === 'Left' || this.iconPosition === 'Top') {\n btnElem.childNodes[1].textContent = this.content;\n }\n else {\n btnElem.childNodes[0].textContent = this.content;\n }\n }\n else {\n btnElem.textContent = this.content;\n }\n }\n else {\n this.setContent();\n this.createSpinner();\n if (isSpinning) {\n showSpinner(this.element);\n isSpinning = false;\n }\n if (this.enableProgress) {\n this.createProgress();\n }\n }\n ele.setAttribute('aria-label', ele.textContent + ' progress');\n break;\n case 'iconCss':\n if (!oldProp.iconCss) {\n this.setIconSpan();\n }\n break;\n case 'iconPosition':\n this.setIconSpan();\n break;\n case 'enableProgress':\n if (newProp.enableProgress) {\n this.createProgress();\n }\n else {\n remove(this.getProgress());\n }\n break;\n case 'spinSettings':\n if (newProp.spinSettings.position) {\n ele.classList.remove('e-spin-' + oldProp.spinSettings.position.toLowerCase());\n this.setSpinPosition(this.getSpinner());\n }\n if (newProp.spinSettings.template || newProp.spinSettings.width) {\n ele.removeChild(this.getSpinner());\n this.createSpinner();\n }\n break;\n }\n }\n }\n /**\n * Sets the focus to ProgressButton\n * its native method\n *\n * @public\n * @returns {void}\n */\n focusIn() {\n this.element.focus();\n }\n};\n__decorate$3([\n Property(false)\n], ProgressButton.prototype, \"enableProgress\", void 0);\n__decorate$3([\n Property(2000)\n], ProgressButton.prototype, \"duration\", void 0);\n__decorate$3([\n Property('Left')\n], ProgressButton.prototype, \"iconPosition\", void 0);\n__decorate$3([\n Property('')\n], ProgressButton.prototype, \"iconCss\", void 0);\n__decorate$3([\n Property(false)\n], ProgressButton.prototype, \"disabled\", void 0);\n__decorate$3([\n Property(false)\n], ProgressButton.prototype, \"isPrimary\", void 0);\n__decorate$3([\n Property('')\n], ProgressButton.prototype, \"cssClass\", void 0);\n__decorate$3([\n Property('')\n], ProgressButton.prototype, \"content\", void 0);\n__decorate$3([\n Property(false)\n], ProgressButton.prototype, \"isToggle\", void 0);\n__decorate$3([\n Property(false)\n], ProgressButton.prototype, \"enableHtmlSanitizer\", void 0);\n__decorate$3([\n Complex({}, SpinSettings)\n], ProgressButton.prototype, \"spinSettings\", void 0);\n__decorate$3([\n Complex({}, AnimationSettings)\n], ProgressButton.prototype, \"animationSettings\", void 0);\n__decorate$3([\n Event()\n], ProgressButton.prototype, \"created\", void 0);\n__decorate$3([\n Event()\n], ProgressButton.prototype, \"begin\", void 0);\n__decorate$3([\n Event()\n], ProgressButton.prototype, \"progress\", void 0);\n__decorate$3([\n Event()\n], ProgressButton.prototype, \"end\", void 0);\n__decorate$3([\n Event()\n], ProgressButton.prototype, \"fail\", void 0);\nProgressButton = __decorate$3([\n NotifyPropertyChanges\n], ProgressButton);\n\n/**\n * ProgressButton modules\n */\n\n/**\n * SplitButton all module\n */\n\nexport { getModel, upDownKeyHandler, setBlankIconStyle, Item, DropDownButton, SplitButton, Deferred, createButtonGroup, SpinSettings, AnimationSettings, ProgressButton };\n//# sourceMappingURL=ej2-splitbuttons.es2015.js.map\n","import { Ajax, Animation, Base, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, addClass, append, attributes, classList, closest, compile, createElement, detach, extend, formatUnit, getInstance, getNumericObject, getUniqueID, getValue, isBlazor, isNullOrUndefined, merge, onIntlChange, remove, removeClass, resetBlazorTemplate, rippleEffect, select, selectAll, setStyleAttribute, setValue, updateBlazorTemplate } from '@syncfusion/ej2-base';\nimport { Popup, Tooltip, createSpinner, getZindexPartial, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';\nimport { Deferred, SplitButton, getModel } from '@syncfusion/ej2-splitbuttons';\n\n/* eslint-disable valid-jsdoc, jsdoc/require-jsdoc, jsdoc/require-returns, jsdoc/require-param */\nconst CLASSNAMES = {\n RTL: 'e-rtl',\n DISABLE: 'e-disabled',\n INPUT: 'e-input',\n TEXTAREA: 'e-multi-line-input',\n INPUTGROUP: 'e-input-group',\n FLOATINPUT: 'e-float-input',\n FLOATLINE: 'e-float-line',\n FLOATTEXT: 'e-float-text',\n CLEARICON: 'e-clear-icon',\n CLEARICONHIDE: 'e-clear-icon-hide',\n LABELTOP: 'e-label-top',\n LABELBOTTOM: 'e-label-bottom',\n NOFLOATLABEL: 'e-no-float-label',\n INPUTCUSTOMTAG: 'e-input-custom-tag',\n FLOATCUSTOMTAG: 'e-float-custom-tag'\n};\n/**\n * Base for Input creation through util methods.\n */\n// eslint-disable-next-line @typescript-eslint/no-namespace\nvar Input;\n(function (Input) {\n let floatType;\n let isBindClearAction = true;\n /**\n * Create a wrapper to input element with multiple span elements and set the basic properties to input based components.\n * ```\n * E.g : Input.createInput({ element: element, floatLabelType : \"Auto\", properties: { placeholder: 'Search' } });\n * ```\n *\n */\n function createInput(args, internalCreateElement) {\n const makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n let inputObject = { container: null, buttons: [], clearButton: null };\n floatType = args.floatLabelType;\n isBindClearAction = args.bindClearAction;\n if (isNullOrUndefined(args.floatLabelType) || args.floatLabelType === 'Never') {\n inputObject.container = createInputContainer(args, CLASSNAMES.INPUTGROUP, CLASSNAMES.INPUTCUSTOMTAG, 'span', makeElement);\n args.element.parentNode.insertBefore(inputObject.container, args.element);\n addClass([args.element], CLASSNAMES.INPUT);\n inputObject.container.appendChild(args.element);\n }\n else {\n createFloatingInput(args, inputObject, makeElement);\n }\n bindInitialEvent(args);\n if (!isNullOrUndefined(args.properties) && !isNullOrUndefined(args.properties.showClearButton) &&\n args.properties.showClearButton && args.element.tagName !== 'TEXTAREA') {\n setClearButton(args.properties.showClearButton, args.element, inputObject, true, makeElement);\n inputObject.clearButton.setAttribute('role', 'button');\n if (inputObject.container.classList.contains(CLASSNAMES.FLOATINPUT)) {\n addClass([inputObject.container], CLASSNAMES.INPUTGROUP);\n }\n }\n if (!isNullOrUndefined(args.buttons) && args.element.tagName !== 'TEXTAREA') {\n for (let i = 0; i < args.buttons.length; i++) {\n inputObject.buttons.push(appendSpan(args.buttons[i], inputObject.container, makeElement));\n }\n }\n if (!isNullOrUndefined(args.element) && args.element.tagName === 'TEXTAREA') {\n addClass([inputObject.container], CLASSNAMES.TEXTAREA);\n }\n validateInputType(inputObject.container, args.element);\n inputObject = setPropertyValue(args, inputObject);\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n return inputObject;\n }\n Input.createInput = createInput;\n function bindInitialEvent(args) {\n checkInputValue(args.floatLabelType, args.element);\n args.element.addEventListener('focus', function () {\n const parent = getParentNode(this);\n if (parent.classList.contains('e-input-group') || parent.classList.contains('e-outline')\n || parent.classList.contains('e-filled')) {\n parent.classList.add('e-input-focus');\n }\n });\n args.element.addEventListener('blur', function () {\n const parent = getParentNode(this);\n if (parent.classList.contains('e-input-group') || parent.classList.contains('e-outline')\n || parent.classList.contains('e-filled')) {\n parent.classList.remove('e-input-focus');\n }\n });\n args.element.addEventListener('input', () => {\n checkInputValue(floatType, args.element);\n });\n }\n Input.bindInitialEvent = bindInitialEvent;\n function checkInputValue(floatLabelType, inputElement) {\n const inputValue = inputElement.value;\n if (inputValue !== '' && !isNullOrUndefined(inputValue) && inputElement.parentElement) {\n inputElement.parentElement.classList.add('e-valid-input');\n }\n else if (floatLabelType !== 'Always' && inputElement.parentElement) {\n inputElement.parentElement.classList.remove('e-valid-input');\n }\n }\n function _focusFn() {\n const label = getParentNode(this).getElementsByClassName('e-float-text')[0];\n if (!isNullOrUndefined(label)) {\n addClass([label], CLASSNAMES.LABELTOP);\n if (label.classList.contains(CLASSNAMES.LABELBOTTOM)) {\n removeClass([label], CLASSNAMES.LABELBOTTOM);\n }\n }\n }\n function _blurFn() {\n const parent = getParentNode(this);\n if ((parent.getElementsByTagName('textarea')[0]) ? parent.getElementsByTagName('textarea')[0].value === '' :\n parent.getElementsByTagName('input')[0].value === '') {\n const label = parent.getElementsByClassName('e-float-text')[0];\n if (!isNullOrUndefined(label)) {\n if (label.classList.contains(CLASSNAMES.LABELTOP)) {\n removeClass([label], CLASSNAMES.LABELTOP);\n }\n addClass([label], CLASSNAMES.LABELBOTTOM);\n }\n }\n }\n function wireFloatingEvents(element) {\n element.addEventListener('focus', _focusFn);\n element.addEventListener('blur', _blurFn);\n }\n Input.wireFloatingEvents = wireFloatingEvents;\n function unwireFloatingEvents(element) {\n element.removeEventListener('focus', _focusFn);\n element.removeEventListener('blur', _blurFn);\n }\n function createFloatingInput(args, inputObject, internalCreateElement) {\n const makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n if (args.floatLabelType === 'Auto') {\n wireFloatingEvents(args.element);\n }\n if (isNullOrUndefined(inputObject.container)) {\n inputObject.container = createInputContainer(args, CLASSNAMES.FLOATINPUT, CLASSNAMES.FLOATCUSTOMTAG, 'div', makeElement);\n args.element.parentNode.insertBefore(inputObject.container, args.element);\n }\n else {\n if (!isNullOrUndefined(args.customTag)) {\n inputObject.container.classList.add(CLASSNAMES.FLOATCUSTOMTAG);\n }\n inputObject.container.classList.add(CLASSNAMES.FLOATINPUT);\n }\n const floatLinelement = makeElement('span', { className: CLASSNAMES.FLOATLINE });\n const floatLabelElement = makeElement('label', { className: CLASSNAMES.FLOATTEXT });\n if (!isNullOrUndefined(args.element.id) && args.element.id !== '') {\n floatLabelElement.id = 'label_' + args.element.id.replace(/ /g, '_');\n attributes(args.element, { 'aria-labelledby': floatLabelElement.id });\n }\n if (!isNullOrUndefined(args.element.placeholder) && args.element.placeholder !== '') {\n floatLabelElement.innerText = encodePlaceHolder(args.element.placeholder);\n args.element.removeAttribute('placeholder');\n }\n if (!isNullOrUndefined(args.properties) && !isNullOrUndefined(args.properties.placeholder) &&\n args.properties.placeholder !== '') {\n floatLabelElement.innerText = encodePlaceHolder(args.properties.placeholder);\n }\n if (!floatLabelElement.innerText) {\n inputObject.container.classList.add(CLASSNAMES.NOFLOATLABEL);\n }\n if (inputObject.container.classList.contains('e-float-icon-left')) {\n const inputWrap = inputObject.container.querySelector('.e-input-in-wrap');\n inputWrap.appendChild(args.element);\n inputWrap.appendChild(floatLinelement);\n inputWrap.appendChild(floatLabelElement);\n }\n else {\n inputObject.container.appendChild(args.element);\n inputObject.container.appendChild(floatLinelement);\n inputObject.container.appendChild(floatLabelElement);\n }\n updateLabelState(args.element.value, floatLabelElement);\n if (args.floatLabelType === 'Always') {\n if (floatLabelElement.classList.contains(CLASSNAMES.LABELBOTTOM)) {\n removeClass([floatLabelElement], CLASSNAMES.LABELBOTTOM);\n }\n addClass([floatLabelElement], CLASSNAMES.LABELTOP);\n }\n if (args.floatLabelType === 'Auto') {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n args.element.addEventListener('input', (event) => {\n updateLabelState(args.element.value, floatLabelElement);\n });\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n args.element.addEventListener('blur', (event) => {\n updateLabelState(args.element.value, floatLabelElement);\n });\n }\n if (!isNullOrUndefined(args.element.getAttribute('id'))) {\n floatLabelElement.setAttribute('for', args.element.getAttribute('id'));\n }\n }\n function checkFloatLabelType(type, container) {\n if (type === 'Always' && container.classList.contains('e-outline')) {\n container.classList.add('e-valid-input');\n }\n }\n function setPropertyValue(args, inputObject) {\n if (!isNullOrUndefined(args.properties)) {\n for (const prop of Object.keys(args.properties)) {\n switch (prop) {\n case 'cssClass':\n setCssClass(args.properties.cssClass, [inputObject.container]);\n checkFloatLabelType(args.floatLabelType, inputObject.container);\n break;\n case 'enabled':\n setEnabled(args.properties.enabled, args.element, args.floatLabelType, inputObject.container);\n break;\n case 'enableRtl':\n setEnableRtl(args.properties.enableRtl, [inputObject.container]);\n break;\n case 'placeholder':\n setPlaceholder(args.properties.placeholder, args.element);\n break;\n case 'readonly':\n setReadonly(args.properties.readonly, args.element);\n break;\n }\n }\n }\n return inputObject;\n }\n function updateIconState(value, button) {\n if (value) {\n removeClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n else {\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n }\n function updateLabelState(value, label) {\n if (value) {\n addClass([label], CLASSNAMES.LABELTOP);\n if (label.classList.contains(CLASSNAMES.LABELBOTTOM)) {\n removeClass([label], CLASSNAMES.LABELBOTTOM);\n }\n }\n else {\n if (label.classList.contains(CLASSNAMES.LABELTOP)) {\n removeClass([label], CLASSNAMES.LABELTOP);\n }\n addClass([label], CLASSNAMES.LABELBOTTOM);\n }\n }\n function getParentNode(element) {\n let parentNode = isNullOrUndefined(element.parentNode) ? element\n : element.parentNode;\n if (parentNode && parentNode.classList.contains('e-input-in-wrap')) {\n parentNode = parentNode.parentNode;\n }\n return parentNode;\n }\n /**\n * To create clear button.\n */\n function createClearButton(element, inputObject, initial, internalCreateElement) {\n const makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n const button = makeElement('span', { className: CLASSNAMES.CLEARICON });\n const container = inputObject.container;\n if (!isNullOrUndefined(initial)) {\n container.appendChild(button);\n }\n else {\n const baseElement = inputObject.container.classList.contains(CLASSNAMES.FLOATINPUT) ?\n inputObject.container.querySelector('.' + CLASSNAMES.FLOATTEXT) : element;\n baseElement.insertAdjacentElement('afterend', button);\n }\n if (!isNullOrUndefined(container) &&\n container.classList.contains(CLASSNAMES.FLOATINPUT)) {\n addClass([container], CLASSNAMES.INPUTGROUP);\n }\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n wireClearBtnEvents(element, button, container);\n button.setAttribute('aria-label', 'close');\n return button;\n }\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n function wireClearBtnEvents(element, button, container) {\n if (isBindClearAction == undefined || isBindClearAction) {\n button.addEventListener('click', (event) => {\n if (!(element.classList.contains(CLASSNAMES.DISABLE) || element.readOnly)) {\n event.preventDefault();\n if (element !== document.activeElement) {\n element.focus();\n }\n element.value = '';\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n });\n }\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n element.addEventListener('input', (event) => {\n updateIconState(element.value, button);\n });\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n element.addEventListener('focus', (event) => {\n updateIconState(element.value, button);\n });\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n element.addEventListener('blur', (event) => {\n setTimeout(() => {\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n }, 200);\n });\n }\n Input.wireClearBtnEvents = wireClearBtnEvents;\n function validateLabel(element, floatLabelType) {\n const parent = getParentNode(element);\n if (parent.classList.contains(CLASSNAMES.FLOATINPUT) && floatLabelType === 'Auto') {\n const label = getParentNode(element).getElementsByClassName('e-float-text')[0];\n updateLabelState(element.value, label);\n }\n }\n /**\n * To create input box contianer.\n */\n function createInputContainer(args, className, tagClass, tag, internalCreateElement) {\n const makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n let container;\n if (!isNullOrUndefined(args.customTag)) {\n container = makeElement(args.customTag, { className: className });\n container.classList.add(tagClass);\n }\n else {\n container = makeElement(tag, { className: className });\n }\n container.classList.add('e-control-wrapper');\n return container;\n }\n function encodePlaceHolder(placeholder) {\n let result = '';\n if (!isNullOrUndefined(placeholder) && placeholder !== '') {\n const spanEle = document.createElement('span');\n spanEle.innerHTML = '';\n const hiddenInput = (spanEle.children[0]);\n result = hiddenInput.placeholder;\n }\n return result;\n }\n /**\n * Sets the value to the input element.\n * ```\n * E.g : Input.setValue('content', element, \"Auto\", true );\n * ```\n *\n * @param {string} value - Specify the value of the input element.\n * @param {HTMLInputElement | HTMLTextAreaElement} element - The element on which the specified value is updated.\n * @param {string} floatLabelType - Specify the float label type of the input element.\n * @param {boolean} clearButton - Boolean value to specify whether the clear icon is enabled / disabled on the input.\n */\n function setValue$$1(value, element, floatLabelType, clearButton) {\n element.value = value;\n if ((!isNullOrUndefined(floatLabelType)) && floatLabelType === 'Auto') {\n validateLabel(element, floatLabelType);\n }\n if (!isNullOrUndefined(clearButton) && clearButton) {\n const parentElement = getParentNode(element);\n if (!isNullOrUndefined(parentElement)) {\n const button = parentElement.getElementsByClassName(CLASSNAMES.CLEARICON)[0];\n if (!isNullOrUndefined(button)) {\n if (element.value && parentElement.classList.contains('e-input-focus')) {\n removeClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n else {\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n }\n }\n }\n checkInputValue(floatLabelType, element);\n }\n Input.setValue = setValue$$1;\n /**\n * Sets the single or multiple cssClass to wrapper of input element.\n * ```\n * E.g : Input.setCssClass('e-custom-class', [element]);\n * ```\n *\n * @param {string} cssClass - Css class names which are needed to add.\n * @param {Element[] | NodeList} elements - The elements which are needed to add / remove classes.\n * @param {string} oldClass\n * - Css class names which are needed to remove. If old classes are need to remove, can give this optional parameter.\n */\n function setCssClass(cssClass, elements, oldClass) {\n if (!isNullOrUndefined(oldClass) && oldClass !== '') {\n removeClass(elements, oldClass.split(' '));\n }\n if (!isNullOrUndefined(cssClass) && cssClass !== '') {\n addClass(elements, cssClass.split(' '));\n }\n }\n Input.setCssClass = setCssClass;\n /**\n * Set the width to the wrapper of input element.\n * ```\n * E.g : Input.setWidth('200px', container);\n * ```\n *\n * @param {number | string} width - Width value which is need to add.\n * @param {HTMLElement} container - The element on which the width is need to add.\n */\n function setWidth(width, container) {\n if (typeof width === 'number') {\n container.style.width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n container.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));\n }\n }\n Input.setWidth = setWidth;\n /**\n * Set the placeholder attribute to the input element.\n * ```\n * E.g : Input.setPlaceholder('Search here', element);\n * ```\n *\n * @param {string} placeholder - Placeholder value which is need to add.\n * @param {HTMLInputElement | HTMLTextAreaElement} element - The element on which the placeholder is need to add.\n */\n function setPlaceholder(placeholder, element) {\n placeholder = encodePlaceHolder(placeholder);\n const parentElement = getParentNode(element);\n if (parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) {\n if (!isNullOrUndefined(placeholder) && placeholder !== '') {\n parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = placeholder;\n parentElement.classList.remove(CLASSNAMES.NOFLOATLABEL);\n element.removeAttribute('placeholder');\n }\n else {\n parentElement.classList.add(CLASSNAMES.NOFLOATLABEL);\n parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = '';\n }\n }\n else {\n if (!isNullOrUndefined(placeholder) && placeholder !== '') {\n attributes(element, { 'placeholder': placeholder, 'aria-placeholder': placeholder });\n }\n else {\n element.removeAttribute('placeholder');\n element.removeAttribute('aria-placeholder');\n }\n }\n }\n Input.setPlaceholder = setPlaceholder;\n /**\n * Set the read only attribute to the input element\n * ```\n * E.g : Input.setReadonly(true, element);\n * ```\n *\n * @param {boolean} isReadonly\n * - Boolean value to specify whether to set read only. Setting \"True\" value enables read only.\n * @param {HTMLInputElement | HTMLTextAreaElement} element\n * - The element which is need to enable read only.\n */\n function setReadonly(isReadonly, element, floatLabelType) {\n if (isReadonly) {\n attributes(element, { readonly: '' });\n }\n else {\n element.removeAttribute('readonly');\n }\n if (!isNullOrUndefined(floatLabelType)) {\n validateLabel(element, floatLabelType);\n }\n }\n Input.setReadonly = setReadonly;\n /**\n * Displays the element direction from right to left when its enabled.\n * ```\n * E.g : Input.setEnableRtl(true, [inputObj.container]);\n * ```\n *\n * @param {boolean} isRtl\n * - Boolean value to specify whether to set RTL. Setting \"True\" value enables the RTL mode.\n * @param {Element[] | NodeList} elements\n * - The elements that are needed to enable/disable RTL.\n */\n function setEnableRtl(isRtl, elements) {\n if (isRtl) {\n addClass(elements, CLASSNAMES.RTL);\n }\n else {\n removeClass(elements, CLASSNAMES.RTL);\n }\n }\n Input.setEnableRtl = setEnableRtl;\n /**\n * Enables or disables the given input element.\n * ```\n * E.g : Input.setEnabled(false, element);\n * ```\n *\n * @param {boolean} isEnable\n * - Boolean value to specify whether to enable or disable.\n * @param {HTMLInputElement | HTMLTextAreaElement} element\n * - Element to be enabled or disabled.\n */\n function setEnabled(isEnable, element, floatLabelType, inputContainer) {\n const disabledAttrs = { 'disabled': 'disabled', 'aria-disabled': 'true' };\n const considerWrapper = isNullOrUndefined(inputContainer) ? false : true;\n if (isEnable) {\n element.classList.remove(CLASSNAMES.DISABLE);\n removeAttributes(disabledAttrs, element);\n if (considerWrapper) {\n removeClass([inputContainer], CLASSNAMES.DISABLE);\n }\n }\n else {\n element.classList.add(CLASSNAMES.DISABLE);\n addAttributes(disabledAttrs, element);\n if (considerWrapper) {\n addClass([inputContainer], CLASSNAMES.DISABLE);\n }\n }\n if (!isNullOrUndefined(floatLabelType)) {\n validateLabel(element, floatLabelType);\n }\n }\n Input.setEnabled = setEnabled;\n function setClearButton(isClear, element, inputObject, initial, internalCreateElement) {\n const makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n if (isClear) {\n inputObject.clearButton = createClearButton(element, inputObject, initial, makeElement);\n }\n else {\n remove(inputObject.clearButton);\n inputObject.clearButton = null;\n }\n }\n Input.setClearButton = setClearButton;\n /**\n * Removing the multiple attributes from the given element such as \"disabled\",\"id\" , etc.\n * ```\n * E.g : Input.removeAttributes({ 'disabled': 'disabled', 'aria-disabled': 'true' }, element);\n * ```\n *\n * @param {string} attrs\n * - Array of attributes which are need to removed from the element.\n * @param {HTMLInputElement | HTMLElement} element\n * - Element on which the attributes are needed to be removed.\n */\n function removeAttributes(attrs, element) {\n for (const key of Object.keys(attrs)) {\n const parentElement = getParentNode(element);\n if (key === 'disabled') {\n element.classList.remove(CLASSNAMES.DISABLE);\n }\n if (key === 'disabled' && parentElement.classList.contains(CLASSNAMES.INPUTGROUP)) {\n parentElement.classList.remove(CLASSNAMES.DISABLE);\n }\n if (key === 'placeholder' && parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) {\n parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = '';\n }\n else {\n element.removeAttribute(key);\n }\n }\n }\n Input.removeAttributes = removeAttributes;\n /**\n * Adding the multiple attributes to the given element such as \"disabled\",\"id\" , etc.\n * ```\n * E.g : Input.addAttributes({ 'id': 'inputpopup' }, element);\n * ```\n *\n * @param {string} attrs\n * - Array of attributes which is added to element.\n * @param {HTMLInputElement | HTMLElement} element\n * - Element on which the attributes are needed to be added.\n */\n function addAttributes(attrs, element) {\n for (const key of Object.keys(attrs)) {\n const parentElement = getParentNode(element);\n if (key === 'disabled') {\n element.classList.add(CLASSNAMES.DISABLE);\n }\n if (key === 'disabled' && parentElement.classList.contains(CLASSNAMES.INPUTGROUP)) {\n parentElement.classList.add(CLASSNAMES.DISABLE);\n }\n if (key === 'placeholder' && parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) {\n parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = attrs[key];\n }\n else {\n element.setAttribute(key, attrs[key]);\n }\n }\n }\n Input.addAttributes = addAttributes;\n function removeFloating(input) {\n const container = input.container;\n if (!isNullOrUndefined(container) && container.classList.contains(CLASSNAMES.FLOATINPUT)) {\n const inputEle = container.querySelector('textarea') ? container.querySelector('textarea') :\n container.querySelector('input');\n const placeholder = container.querySelector('.' + CLASSNAMES.FLOATTEXT).textContent;\n const clearButton = container.querySelector('.e-clear-icon') !== null;\n detach(container.querySelector('.' + CLASSNAMES.FLOATLINE));\n detach(container.querySelector('.' + CLASSNAMES.FLOATTEXT));\n classList(container, [CLASSNAMES.INPUTGROUP], [CLASSNAMES.FLOATINPUT]);\n unwireFloatingEvents(inputEle);\n attributes(inputEle, { 'placeholder': placeholder });\n inputEle.classList.add(CLASSNAMES.INPUT);\n if (!clearButton && inputEle.tagName === 'INPUT') {\n inputEle.removeAttribute('required');\n }\n }\n }\n Input.removeFloating = removeFloating;\n function addFloating(input, type, placeholder, internalCreateElement) {\n const makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n const container = closest(input, '.' + CLASSNAMES.INPUTGROUP);\n floatType = type;\n if (type !== 'Never') {\n let customTag = container.tagName;\n customTag = customTag !== 'DIV' && customTag !== 'SPAN' ? customTag : null;\n const args = { element: input, floatLabelType: type,\n customTag: customTag, properties: { placeholder: placeholder } };\n let iconEle = container.querySelector('.e-clear-icon');\n const inputObj = { container: container };\n input.classList.remove(CLASSNAMES.INPUT);\n createFloatingInput(args, inputObj, makeElement);\n const isPrependIcon = container.classList.contains('e-float-icon-left');\n if (isNullOrUndefined(iconEle)) {\n if (isPrependIcon) {\n const inputWrap = container.querySelector('.e-input-in-wrap');\n iconEle = inputWrap.querySelector('.e-input-group-icon');\n }\n else {\n iconEle = container.querySelector('.e-input-group-icon');\n }\n }\n if (isNullOrUndefined(iconEle)) {\n if (isPrependIcon) {\n iconEle = container.querySelector('.e-input-group-icon');\n }\n if (isNullOrUndefined(iconEle)) {\n container.classList.remove(CLASSNAMES.INPUTGROUP);\n }\n }\n else {\n const floatLine = container.querySelector('.' + CLASSNAMES.FLOATLINE);\n const floatText = container.querySelector('.' + CLASSNAMES.FLOATTEXT);\n const wrapper = isPrependIcon ? container.querySelector('.e-input-in-wrap') : container;\n wrapper.insertBefore(input, iconEle);\n wrapper.insertBefore(floatLine, iconEle);\n wrapper.insertBefore(floatText, iconEle);\n }\n }\n checkFloatLabelType(type, input.parentElement);\n }\n Input.addFloating = addFloating;\n /**\n * Enable or Disable the ripple effect on the icons inside the Input. Ripple effect is only applicable for material theme.\n * ```\n * E.g : Input.setRipple(true, [inputObjects]);\n * ```\n *\n * @param {boolean} isRipple\n * - Boolean value to specify whether to enable the ripple effect.\n * @param {InputObject[]} inputObj\n * - Specify the collection of input objects.\n */\n function setRipple(isRipple, inputObj) {\n for (let i = 0; i < inputObj.length; i++) {\n _internalRipple(isRipple, inputObj[i].container);\n }\n }\n Input.setRipple = setRipple;\n function _internalRipple(isRipple, container, button) {\n const argsButton = [];\n argsButton.push(button);\n const buttons = isNullOrUndefined(button) ?\n container.querySelectorAll('.e-input-group-icon') : argsButton;\n if (isRipple && buttons.length > 0) {\n for (let index = 0; index < buttons.length; index++) {\n buttons[index].addEventListener('mousedown', _onMouseDownRipple, false);\n buttons[index].addEventListener('mouseup', _onMouseUpRipple, false);\n }\n }\n else if (buttons.length > 0) {\n for (let index = 0; index < buttons.length; index++) {\n buttons[index].removeEventListener('mousedown', _onMouseDownRipple, this);\n buttons[index].removeEventListener('mouseup', _onMouseUpRipple, this);\n }\n }\n }\n function _onMouseRipple(container, button) {\n if (!container.classList.contains('e-disabled') && !container.querySelector('input').readOnly) {\n button.classList.add('e-input-btn-ripple');\n }\n }\n function _onMouseDownRipple() {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const ele = this;\n let parentEle = this.parentElement;\n while (!parentEle.classList.contains('e-input-group')) {\n parentEle = parentEle.parentElement;\n }\n _onMouseRipple(parentEle, ele);\n }\n function _onMouseUpRipple() {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const ele = this;\n setTimeout(() => {\n ele.classList.remove('e-input-btn-ripple');\n }, 500);\n }\n function createIconEle(iconClass, makeElement) {\n const button = makeElement('span', { className: iconClass });\n button.classList.add('e-input-group-icon');\n return button;\n }\n /**\n * Creates a new span element with the given icons added and append it in container element.\n * ```\n * E.g : Input.addIcon('append', 'e-icon-spin', inputObj.container, inputElement);\n * ```\n *\n * @param {string} position - Specify the icon placement on the input.Possible values are append and prepend.\n * @param {string | string[]} icons - Icon classes which are need to add to the span element which is going to created.\n * Span element acts as icon or button element for input.\n * @param {HTMLElement} container - The container on which created span element is going to append.\n * @param {HTMLElement} input - The inputElement on which created span element is going to prepend.\n */\n /* eslint-disable @typescript-eslint/indent */\n function addIcon(position, icons, container, input, internalCreate) {\n /* eslint-enable @typescript-eslint/indent */\n const result = typeof (icons) === 'string' ? icons.split(',')\n : icons;\n if (position.toLowerCase() === 'append') {\n for (const icon of result) {\n appendSpan(icon, container, internalCreate);\n }\n }\n else {\n for (const icon of result) {\n prependSpan(icon, container, input, internalCreate);\n }\n }\n }\n Input.addIcon = addIcon;\n /**\n * Creates a new span element with the given icons added and prepend it in input element.\n * ```\n * E.g : Input.prependSpan('e-icon-spin', inputObj.container, inputElement);\n * ```\n *\n * @param {string} iconClass - Icon classes which are need to add to the span element which is going to created.\n * Span element acts as icon or button element for input.\n * @param {HTMLElement} container - The container on which created span element is going to append.\n * @param {HTMLElement} inputElement - The inputElement on which created span element is going to prepend.\n */\n /* eslint-disable @typescript-eslint/indent */\n function prependSpan(iconClass, container, inputElement, internalCreateElement) {\n /* eslint-enable @typescript-eslint/indent */\n const makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n const button = createIconEle(iconClass, makeElement);\n container.classList.add('e-float-icon-left');\n let innerWrapper = container.querySelector('.e-input-in-wrap');\n if (isNullOrUndefined(innerWrapper)) {\n innerWrapper = makeElement('span', { className: 'e-input-in-wrap' });\n inputElement.parentNode.insertBefore(innerWrapper, inputElement);\n const result = container.querySelectorAll(inputElement.tagName + ' ~ *');\n innerWrapper.appendChild(inputElement);\n for (let i = 0; i < result.length; i++) {\n innerWrapper.appendChild(result[i]);\n }\n }\n innerWrapper.parentNode.insertBefore(button, innerWrapper);\n if (!container.classList.contains(CLASSNAMES.INPUTGROUP)) {\n container.classList.add(CLASSNAMES.INPUTGROUP);\n }\n _internalRipple(true, container, button);\n return button;\n }\n Input.prependSpan = prependSpan;\n /**\n * Creates a new span element with the given icons added and append it in container element.\n * ```\n * E.g : Input.appendSpan('e-icon-spin', inputObj.container);\n * ```\n *\n * @param {string} iconClass - Icon classes which are need to add to the span element which is going to created.\n * Span element acts as icon or button element for input.\n * @param {HTMLElement} container - The container on which created span element is going to append.\n */\n function appendSpan(iconClass, container, internalCreateElement) {\n const makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n const button = createIconEle(iconClass, makeElement);\n if (!container.classList.contains(CLASSNAMES.INPUTGROUP)) {\n container.classList.add(CLASSNAMES.INPUTGROUP);\n }\n const wrap = (container.classList.contains('e-float-icon-left')) ? container.querySelector('.e-input-in-wrap') :\n container;\n wrap.appendChild(button);\n _internalRipple(true, container, button);\n return button;\n }\n Input.appendSpan = appendSpan;\n function validateInputType(containerElement, input) {\n if (input.type === 'hidden') {\n containerElement.classList.add('e-hidden');\n }\n else if (containerElement.classList.contains('e-hidden')) {\n containerElement.classList.remove('e-hidden');\n }\n }\n Input.validateInputType = validateInputType;\n})(Input || (Input = {}));\n/* eslint-enable valid-jsdoc, jsdoc/require-jsdoc, jsdoc/require-returns, jsdoc/require-param */\n\nvar __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nconst ROOT = 'e-control-wrapper e-numeric';\nconst SPINICON = 'e-input-group-icon';\nconst SPINUP = 'e-spin-up';\nconst SPINDOWN = 'e-spin-down';\nconst ERROR = 'e-error';\nconst INCREMENT = 'increment';\nconst DECREMENT = 'decrement';\nconst INTREGEXP = new RegExp('^(-)?(\\\\d*)$');\nconst DECIMALSEPARATOR = '.';\nconst COMPONENT = 'e-numerictextbox';\nconst CONTROL = 'e-control';\nconst NUMERIC_FOCUS = 'e-input-focus';\nconst HIDDENELEMENT = 'e-numeric-hidden';\nconst wrapperAttributes = ['title', 'style', 'class'];\n/**\n * Represents the NumericTextBox component that allows the user to enter only numeric values.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nlet NumericTextBox = class NumericTextBox extends Component {\n /**\n *\n * @param {NumericTextBoxModel} options - Specifies the NumericTextBox model.\n * @param {string | HTMLInputElement} element - Specifies the element to render as component.\n * @private\n */\n constructor(options, element) {\n super(options, element);\n this.isVue = false;\n this.preventChange = false;\n this.isAngular = false;\n this.isDynamicChange = false;\n this.numericOptions = options;\n }\n preRender() {\n this.isPrevFocused = false;\n this.decimalSeparator = '.';\n // eslint-disable-next-line no-useless-escape\n this.intRegExp = new RegExp('/^(-)?(\\d*)$/');\n this.isCalled = false;\n const ejInstance = getValue('ej2_instances', this.element);\n this.cloneElement = this.element.cloneNode(true);\n removeClass([this.cloneElement], [CONTROL, COMPONENT, 'e-lib']);\n this.angularTagName = null;\n this.formEle = closest(this.element, 'form');\n if (this.element.tagName === 'EJS-NUMERICTEXTBOX') {\n this.angularTagName = this.element.tagName;\n const input = this.createElement('input');\n let index = 0;\n for (index; index < this.element.attributes.length; index++) {\n const attributeName = this.element.attributes[index].nodeName;\n if (attributeName !== 'id') {\n input.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);\n input.innerHTML = this.element.innerHTML;\n }\n }\n if (this.element.hasAttribute('name')) {\n this.element.removeAttribute('name');\n }\n this.element.classList.remove('e-control', 'e-numerictextbox');\n this.element.appendChild(input);\n this.element = input;\n setValue('ej2_instances', ejInstance, this.element);\n }\n if (!(isBlazor() && this.isServerRendered)) {\n attributes(this.element, { 'role': 'spinbutton', 'tabindex': '0', 'autocomplete': 'off', 'aria-live': 'assertive' });\n const localeText = {\n incrementTitle: 'Increment value', decrementTitle: 'Decrement value', placeholder: this.placeholder\n };\n this.l10n = new L10n('numerictextbox', localeText, this.locale);\n if (this.l10n.getConstant('placeholder') !== '') {\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n }\n }\n this.isValidState = true;\n this.inputStyle = null;\n this.inputName = null;\n this.cultureInfo = {};\n this.initCultureInfo();\n this.initCultureFunc();\n this.prevValue = this.value;\n if (!(isBlazor() && this.isServerRendered)) {\n this.updateHTMLAttrToElement();\n this.checkAttributes(false);\n if (this.formEle) {\n this.inputEleValue = this.value;\n }\n }\n this.validateMinMax();\n this.validateStep();\n if (this.placeholder === null && !(isBlazor() && this.isServerRendered)) {\n this.updatePlaceholder();\n }\n }\n /**\n * To Initialize the control rendering\n *\n * @returns {void}\n * @private\n */\n render() {\n if (this.element.tagName.toLowerCase() === 'input') {\n if (!(isBlazor() && this.isServerRendered)) {\n this.createWrapper();\n if (this.showSpinButton) {\n this.spinBtnCreation();\n }\n this.setElementWidth(this.width);\n if (!this.container.classList.contains('e-input-group')) {\n this.container.classList.add('e-input-group');\n }\n this.changeValue(this.value === null || isNaN(this.value) ?\n null : this.strictMode ? this.trimValue(this.value) : this.value);\n }\n else {\n this.container = this.element.parentElement;\n this.inputWrapper = { container: this.container };\n this.hiddenInput = this.container.querySelector('input[type=\"hidden\"]');\n if (this.showClearButton) {\n this.inputWrapper.clearButton = this.container.querySelector('.e-clear-icon');\n Input.wireClearBtnEvents(this.element, this.inputWrapper.clearButton, this.inputWrapper.container);\n }\n if (this.showSpinButton) {\n this.spinDown = this.container.querySelector('.' + SPINDOWN);\n this.spinUp = this.container.querySelector('.' + SPINUP);\n this.wireSpinBtnEvents();\n }\n Input.bindInitialEvent({\n element: this.element, buttons: null, customTag: null, floatLabelType: this.floatLabelType, properties: this.properties\n });\n }\n this.wireEvents();\n if (!(isBlazor() && this.isServerRendered)) {\n if (this.value !== null && !isNaN(this.value)) {\n if (this.decimals) {\n this.setProperties({ value: this.roundNumber(this.value, this.decimals) }, true);\n }\n }\n if (this.element.getAttribute('value') || this.value) {\n this.element.setAttribute('value', this.element.value);\n this.hiddenInput.setAttribute('value', this.hiddenInput.value);\n }\n }\n this.elementPrevValue = this.element.value;\n if (this.element.hasAttribute('data-val')) {\n this.element.setAttribute('data-val', 'false');\n }\n this.renderComplete();\n }\n }\n checkAttributes(isDynamic) {\n const attributes$$1 = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['value', 'min', 'max', 'step', 'disabled', 'readonly', 'style', 'name', 'placeholder'];\n for (const prop of attributes$$1) {\n if (!isNullOrUndefined(this.element.getAttribute(prop))) {\n switch (prop) {\n case 'disabled':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['enabled'] === undefined)) || isDynamic) {\n const enabled = this.element.getAttribute(prop) === 'disabled' || this.element.getAttribute(prop) === ''\n || this.element.getAttribute(prop) === 'true' ? false : true;\n this.setProperties({ enabled: enabled }, !isDynamic);\n }\n break;\n case 'readonly':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['readonly'] === undefined)) || isDynamic) {\n const readonly = this.element.getAttribute(prop) === 'readonly' || this.element.getAttribute(prop) === ''\n || this.element.getAttribute(prop) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !isDynamic);\n }\n break;\n case 'placeholder':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.element.placeholder }, !isDynamic);\n }\n break;\n case 'value':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['value'] === undefined)) || isDynamic) {\n const setNumber = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n this.setProperties(setValue(prop, setNumber, {}), !isDynamic);\n }\n break;\n case 'min':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['min'] === undefined)) || isDynamic) {\n const minValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if (minValue !== null && !isNaN(minValue)) {\n this.setProperties(setValue(prop, minValue, {}), !isDynamic);\n }\n }\n break;\n case 'max':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['max'] === undefined)) || isDynamic) {\n const maxValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if (maxValue !== null && !isNaN(maxValue)) {\n this.setProperties(setValue(prop, maxValue, {}), !isDynamic);\n }\n }\n break;\n case 'step':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['step'] === undefined)) || isDynamic) {\n const stepValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if (stepValue !== null && !isNaN(stepValue)) {\n this.setProperties(setValue(prop, stepValue, {}), !isDynamic);\n }\n }\n break;\n case 'style':\n this.inputStyle = this.element.getAttribute(prop);\n break;\n case 'name':\n this.inputName = this.element.getAttribute(prop);\n break;\n default:\n {\n const value = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if ((value !== null && !isNaN(value)) || (prop === 'value')) {\n this.setProperties(setValue(prop, value, {}), true);\n }\n }\n break;\n }\n }\n }\n }\n updatePlaceholder() {\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n }\n initCultureFunc() {\n this.instance = new Internationalization(this.locale);\n }\n initCultureInfo() {\n this.cultureInfo.format = this.format;\n if (getValue('currency', this) !== null) {\n setValue('currency', this.currency, this.cultureInfo);\n this.setProperties({ currencyCode: this.currency }, true);\n }\n }\n /* Wrapper creation */\n createWrapper() {\n let updatedCssClassValue = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassValue = this.getNumericValidClassList(this.cssClass);\n }\n const inputObj = Input.createInput({\n element: this.element,\n floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.readonly,\n placeholder: this.placeholder,\n cssClass: updatedCssClassValue,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton,\n enabled: this.enabled\n }\n }, this.createElement);\n this.inputWrapper = inputObj;\n this.container = inputObj.container;\n this.container.setAttribute('class', ROOT + ' ' + this.container.getAttribute('class'));\n this.updateHTMLAttrToWrapper();\n if (this.readonly) {\n attributes(this.element, { 'aria-readonly': 'true' });\n }\n this.hiddenInput = (this.createElement('input', { attrs: { type: 'text',\n 'validateHidden': 'true', 'class': HIDDENELEMENT } }));\n this.inputName = this.inputName !== null ? this.inputName : this.element.id;\n this.element.removeAttribute('name');\n attributes(this.hiddenInput, { 'name': this.inputName });\n this.container.insertBefore(this.hiddenInput, this.container.childNodes[1]);\n this.updateDataAttribute(false);\n if (this.inputStyle !== null) {\n attributes(this.container, { 'style': this.inputStyle });\n }\n }\n updateDataAttribute(isDynamic) {\n let attr = {};\n if (!isDynamic) {\n for (let a = 0; a < this.element.attributes.length; a++) {\n attr[this.element.attributes[a].name] = this.element.getAttribute(this.element.attributes[a].name);\n }\n }\n else {\n attr = this.htmlAttributes;\n }\n for (const key of Object.keys(attr)) {\n if (key.indexOf('data') === 0) {\n this.hiddenInput.setAttribute(key, attr[key]);\n }\n }\n }\n updateHTMLAttrToElement() {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (const pro of Object.keys(this.htmlAttributes)) {\n if (wrapperAttributes.indexOf(pro) < 0) {\n this.element.setAttribute(pro, this.htmlAttributes[pro]);\n }\n }\n }\n }\n updateCssClass(newClass, oldClass) {\n Input.setCssClass(this.getNumericValidClassList(newClass), [this.container], this.getNumericValidClassList(oldClass));\n }\n getNumericValidClassList(numericClassName) {\n let result = numericClassName;\n if (!isNullOrUndefined(numericClassName) && numericClassName !== '') {\n result = (numericClassName.replace(/\\s+/g, ' ')).trim();\n }\n return result;\n }\n updateHTMLAttrToWrapper() {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (const pro of Object.keys(this.htmlAttributes)) {\n if (wrapperAttributes.indexOf(pro) > -1) {\n if (pro === 'class') {\n const updatedClassValue = this.getNumericValidClassList(this.htmlAttributes[pro]);\n if (updatedClassValue !== '') {\n addClass([this.container], updatedClassValue.split(' '));\n }\n }\n else if (pro === 'style') {\n let numericStyle = this.container.getAttribute(pro);\n numericStyle = !isNullOrUndefined(numericStyle) ? (numericStyle + this.htmlAttributes[pro]) :\n this.htmlAttributes[pro];\n this.container.setAttribute(pro, numericStyle);\n }\n else {\n this.container.setAttribute(pro, this.htmlAttributes[pro]);\n }\n }\n }\n }\n }\n setElementWidth(width) {\n if (!isNullOrUndefined(width)) {\n if (typeof width === 'number') {\n this.container.style.width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n this.container.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));\n }\n }\n }\n /* Spinner creation */\n spinBtnCreation() {\n this.spinDown = Input.appendSpan(SPINICON + ' ' + SPINDOWN, this.container, this.createElement);\n attributes(this.spinDown, {\n 'title': this.l10n.getConstant('decrementTitle'),\n 'aria-label': this.l10n.getConstant('decrementTitle')\n });\n this.spinUp = Input.appendSpan(SPINICON + ' ' + SPINUP, this.container, this.createElement);\n attributes(this.spinUp, {\n 'title': this.l10n.getConstant('incrementTitle'),\n 'aria-label': this.l10n.getConstant('incrementTitle')\n });\n this.wireSpinBtnEvents();\n }\n validateMinMax() {\n if (!(typeof (this.min) === 'number' && !isNaN(this.min))) {\n this.setProperties({ min: -(Number.MAX_VALUE) }, true);\n }\n if (!(typeof (this.max) === 'number' && !isNaN(this.max))) {\n this.setProperties({ max: Number.MAX_VALUE }, true);\n }\n if (this.decimals !== null) {\n if (this.min !== -(Number.MAX_VALUE)) {\n this.setProperties({ min: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.min)) }, true);\n }\n if (this.max !== (Number.MAX_VALUE)) {\n this.setProperties({ max: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.max)) }, true);\n }\n }\n this.setProperties({ min: this.min > this.max ? this.max : this.min }, true);\n attributes(this.element, { 'aria-valuemin': this.min.toString(), 'aria-valuemax': this.max.toString() });\n }\n formattedValue(decimals, value) {\n return this.instance.getNumberFormat({\n maximumFractionDigits: decimals,\n minimumFractionDigits: decimals, useGrouping: false\n })(value);\n }\n validateStep() {\n if (this.decimals !== null) {\n this.setProperties({ step: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.step)) }, true);\n }\n }\n action(operation, event) {\n this.isInteract = true;\n const value = this.isFocused ? this.instance.getNumberParser({ format: 'n' })(this.element.value) : this.value;\n this.changeValue(this.performAction(value, this.step, operation));\n this.raiseChangeEvent(event);\n }\n checkErrorClass() {\n if (this.isValidState) {\n removeClass([this.container], ERROR);\n }\n else {\n addClass([this.container], ERROR);\n }\n attributes(this.element, { 'aria-invalid': this.isValidState ? 'false' : 'true' });\n }\n bindClearEvent() {\n if (this.showClearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler, this);\n }\n }\n resetHandler(e) {\n e.preventDefault();\n if (!(this.inputWrapper.clearButton.classList.contains('e-clear-icon-hide'))) {\n this.clear(e);\n }\n this.isInteract = true;\n this.raiseChangeEvent(e);\n }\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n clear(event) {\n this.setProperties({ value: null }, true);\n this.setElementValue('');\n this.hiddenInput.value = '';\n const formElement = closest(this.element, 'form');\n if (formElement) {\n const element = this.element.nextElementSibling;\n const keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n }\n resetFormHandler() {\n if (this.element.tagName === 'EJS-NUMERICTEXTBOX') {\n this.updateValue(null);\n }\n else {\n this.updateValue(this.inputEleValue);\n }\n }\n setSpinButton() {\n if (!isNullOrUndefined(this.spinDown)) {\n attributes(this.spinDown, {\n 'title': this.l10n.getConstant('decrementTitle'),\n 'aria-label': this.l10n.getConstant('decrementTitle')\n });\n }\n if (!isNullOrUndefined(this.spinUp)) {\n attributes(this.spinUp, {\n 'title': this.l10n.getConstant('incrementTitle'),\n 'aria-label': this.l10n.getConstant('incrementTitle')\n });\n }\n }\n wireEvents() {\n EventHandler.add(this.element, 'focus', this.focusHandler, this);\n EventHandler.add(this.element, 'blur', this.focusOutHandler, this);\n EventHandler.add(this.element, 'keydown', this.keyDownHandler, this);\n EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);\n EventHandler.add(this.element, 'input', this.inputHandler, this);\n EventHandler.add(this.element, 'keypress', this.keyPressHandler, this);\n EventHandler.add(this.element, 'change', this.changeHandler, this);\n EventHandler.add(this.element, 'paste', this.pasteHandler, this);\n if (this.enabled) {\n this.bindClearEvent();\n if (this.formEle) {\n EventHandler.add(this.formEle, 'reset', this.resetFormHandler, this);\n }\n }\n }\n wireSpinBtnEvents() {\n /* bind spin button events */\n EventHandler.add(this.spinUp, Browser.touchStartEvent, this.mouseDownOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchStartEvent, this.mouseDownOnSpinner, this);\n EventHandler.add(this.spinUp, Browser.touchEndEvent, this.mouseUpOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchEndEvent, this.mouseUpOnSpinner, this);\n EventHandler.add(this.spinUp, Browser.touchMoveEvent, this.touchMoveOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchMoveEvent, this.touchMoveOnSpinner, this);\n }\n unwireEvents() {\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'blur', this.focusOutHandler);\n EventHandler.remove(this.element, 'keyup', this.keyUpHandler);\n EventHandler.remove(this.element, 'input', this.inputHandler);\n EventHandler.remove(this.element, 'keydown', this.keyDownHandler);\n EventHandler.remove(this.element, 'keypress', this.keyPressHandler);\n EventHandler.remove(this.element, 'change', this.changeHandler);\n EventHandler.remove(this.element, 'paste', this.pasteHandler);\n if (this.formEle) {\n EventHandler.remove(this.formEle, 'reset', this.resetFormHandler);\n }\n }\n unwireSpinBtnEvents() {\n /* unbind spin button events */\n EventHandler.remove(this.spinUp, Browser.touchStartEvent, this.mouseDownOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchStartEvent, this.mouseDownOnSpinner);\n EventHandler.remove(this.spinUp, Browser.touchEndEvent, this.mouseUpOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchEndEvent, this.mouseUpOnSpinner);\n EventHandler.remove(this.spinUp, Browser.touchMoveEvent, this.touchMoveOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchMoveEvent, this.touchMoveOnSpinner);\n }\n changeHandler(event) {\n event.stopPropagation();\n if (!this.element.value.length) {\n this.setProperties({ value: null }, true);\n }\n const parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n this.updateValue(parsedInput, event);\n }\n raiseChangeEvent(event) {\n if (this.prevValue !== this.value) {\n const eventArgs = {};\n this.changeEventArgs = { value: this.value, previousValue: this.prevValue, isInteracted: this.isInteract,\n isInteraction: this.isInteract, event: event };\n if (event) {\n this.changeEventArgs.event = event;\n }\n if (this.changeEventArgs.event === undefined) {\n this.changeEventArgs.isInteracted = false;\n this.changeEventArgs.isInteraction = false;\n }\n merge(eventArgs, this.changeEventArgs);\n this.prevValue = this.value;\n this.isInteract = false;\n this.elementPrevValue = this.element.value;\n this.preventChange = false;\n this.trigger('change', eventArgs);\n }\n }\n pasteHandler() {\n if (!this.enabled || this.readonly) {\n return;\n }\n const beforeUpdate = this.element.value;\n setTimeout(() => {\n if (!this.numericRegex().test(this.element.value)) {\n this.setElementValue(beforeUpdate);\n }\n });\n }\n preventHandler() {\n const iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);\n setTimeout(() => {\n if (this.element.selectionStart > 0) {\n const currentPos = this.element.selectionStart;\n const prevPos = this.element.selectionStart - 1;\n const start = 0;\n const valArray = this.element.value.split('');\n const numericObject = getNumericObject(this.locale);\n const decimalSeparator = getValue('decimal', numericObject);\n const ignoreKeyCode = decimalSeparator.charCodeAt(0);\n if (this.element.value[prevPos] === ' ' && this.element.selectionStart > 0 && !iOS) {\n if (isNullOrUndefined(this.prevVal)) {\n this.element.value = this.element.value.trim();\n }\n else if (prevPos !== 0) {\n this.element.value = this.prevVal;\n }\n else if (prevPos === 0) {\n this.element.value = this.element.value.trim();\n }\n this.element.setSelectionRange(prevPos, prevPos);\n }\n else if (isNaN(parseFloat(this.element.value[this.element.selectionStart - 1])) &&\n this.element.value[this.element.selectionStart - 1].charCodeAt(0) !== 45) {\n if ((valArray.indexOf(this.element.value[this.element.selectionStart - 1]) !==\n valArray.lastIndexOf(this.element.value[this.element.selectionStart - 1]) &&\n this.element.value[this.element.selectionStart - 1].charCodeAt(0) === ignoreKeyCode) ||\n this.element.value[this.element.selectionStart - 1].charCodeAt(0) !== ignoreKeyCode) {\n this.element.value = this.element.value.substring(0, prevPos) +\n this.element.value.substring(currentPos, this.element.value.length);\n this.element.setSelectionRange(prevPos, prevPos);\n if (isNaN(parseFloat(this.element.value[this.element.selectionStart - 1])) && this.element.selectionStart > 0\n && this.element.value.length) {\n this.preventHandler();\n }\n }\n }\n else if (isNaN(parseFloat(this.element.value[this.element.selectionStart - 2])) && this.element.selectionStart > 1 &&\n this.element.value[this.element.selectionStart - 2].charCodeAt(0) !== 45) {\n if ((valArray.indexOf(this.element.value[this.element.selectionStart - 2]) !==\n valArray.lastIndexOf(this.element.value[this.element.selectionStart - 2]) &&\n this.element.value[this.element.selectionStart - 2].charCodeAt(0) === ignoreKeyCode) ||\n this.element.value[this.element.selectionStart - 2].charCodeAt(0) !== ignoreKeyCode) {\n this.element.setSelectionRange(prevPos, prevPos);\n this.nextEle = this.element.value[this.element.selectionStart];\n this.cursorPosChanged = true;\n this.preventHandler();\n }\n }\n if (this.cursorPosChanged === true && this.element.value[this.element.selectionStart] === this.nextEle &&\n isNaN(parseFloat(this.element.value[this.element.selectionStart - 1]))) {\n this.element.setSelectionRange(this.element.selectionStart + 1, this.element.selectionStart + 1);\n this.cursorPosChanged = false;\n this.nextEle = null;\n }\n if (this.element.value.trim() === '') {\n this.element.setSelectionRange(start, start);\n }\n if (this.element.selectionStart > 0) {\n if ((this.element.value[this.element.selectionStart - 1].charCodeAt(0) === 45) && this.element.selectionStart > 1) {\n if (isNullOrUndefined(this.prevVal)) {\n // eslint-disable-next-line no-self-assign\n this.element.value = this.element.value;\n }\n else {\n this.element.value = this.prevVal;\n }\n this.element.setSelectionRange(this.element.selectionStart, this.element.selectionStart);\n }\n }\n this.prevVal = this.element.value;\n }\n });\n }\n keyUpHandler() {\n if (!this.enabled || this.readonly) {\n return;\n }\n const iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);\n if (!iOS && Browser.isDevice) {\n this.preventHandler();\n }\n let parseValue = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n parseValue = parseValue === null || isNaN(parseValue) ? null : parseValue;\n this.hiddenInput.value = parseValue || parseValue === 0 ? parseValue.toString() : null;\n const formElement = closest(this.element, 'form');\n if (formElement) {\n const element = this.element.nextElementSibling;\n const keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n }\n inputHandler(event) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-this-alias\n const numerictextboxObj = this;\n if (!this.enabled || this.readonly) {\n return;\n }\n const iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);\n const fireFox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n if ((fireFox || iOS) && Browser.isDevice) {\n this.preventHandler();\n }\n /* istanbul ignore next */\n if (this.isAngular\n && this.element.value !== getValue('decimal', getNumericObject(this.locale))\n && this.element.value !== getValue('minusSign', getNumericObject(this.locale))) {\n let parsedValue = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n parsedValue = isNaN(parsedValue) ? null : parsedValue;\n numerictextboxObj.localChange({ value: parsedValue });\n this.preventChange = true;\n }\n if (this.isVue) {\n const current = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n const previous = this.instance.getNumberParser({ format: 'n' })(this.elementPrevValue);\n const eventArgs = {\n event: event,\n value: (current === null || isNaN(current) ? null : current),\n previousValue: (previous === null || isNaN(previous) ? null : previous)\n };\n this.preventChange = true;\n this.elementPrevValue = this.element.value;\n this.trigger('input', eventArgs);\n }\n }\n keyDownHandler(event) {\n if (!this.readonly) {\n switch (event.keyCode) {\n case 38:\n event.preventDefault();\n this.action(INCREMENT, event);\n break;\n case 40:\n event.preventDefault();\n this.action(DECREMENT, event);\n break;\n default: break;\n }\n }\n }\n performAction(value, step, operation) {\n if (value === null || isNaN(value)) {\n value = 0;\n }\n let updatedValue = operation === INCREMENT ? value + step : value - step;\n updatedValue = this.correctRounding(value, step, updatedValue);\n return this.strictMode ? this.trimValue(updatedValue) : updatedValue;\n }\n correctRounding(value, step, result) {\n const floatExp = new RegExp('[,.](.*)');\n const floatValue = floatExp.test(value.toString());\n const floatStep = floatExp.test(step.toString());\n if (floatValue || floatStep) {\n const valueCount = floatValue ? floatExp.exec(value.toString())[0].length : 0;\n const stepCount = floatStep ? floatExp.exec(step.toString())[0].length : 0;\n const max = Math.max(valueCount, stepCount);\n return value = this.roundValue(result, max);\n }\n return result;\n }\n roundValue(result, precision) {\n precision = precision || 0;\n const divide = Math.pow(10, precision);\n return result *= divide, result = Math.round(result) / divide;\n }\n updateValue(value, event) {\n if (event) {\n this.isInteract = true;\n }\n if (value !== null && !isNaN(value)) {\n if (this.decimals) {\n value = this.roundNumber(value, this.decimals);\n }\n }\n this.changeValue(value === null || isNaN(value) ? null : this.strictMode ? this.trimValue(value) : value);\n /* istanbul ignore next */\n if (!this.isDynamicChange) {\n this.raiseChangeEvent(event);\n }\n }\n updateCurrency(prop, propVal) {\n setValue(prop, propVal, this.cultureInfo);\n this.updateValue(this.value);\n }\n changeValue(value) {\n if (!(value || value === 0)) {\n value = null;\n this.setProperties({ value: value }, true);\n }\n else {\n const numberOfDecimals = this.getNumberOfDecimals(value);\n this.setProperties({ value: this.roundNumber(value, numberOfDecimals) }, true);\n }\n this.modifyText();\n if (!this.strictMode) {\n this.validateState();\n }\n }\n modifyText() {\n if (this.value || this.value === 0) {\n const value = this.formatNumber();\n const elementValue = this.isFocused ? value : this.instance.getNumberFormat(this.cultureInfo)(this.value);\n this.setElementValue(elementValue);\n attributes(this.element, { 'aria-valuenow': value });\n this.hiddenInput.value = this.value.toString();\n if (this.value !== null && this.serverDecimalSeparator) {\n this.hiddenInput.value = this.hiddenInput.value.replace('.', this.serverDecimalSeparator);\n }\n }\n else {\n this.setElementValue('');\n this.element.removeAttribute('aria-valuenow');\n this.hiddenInput.value = null;\n }\n }\n setElementValue(val, element) {\n Input.setValue(val, (element ? element : this.element), this.floatLabelType, this.showClearButton);\n }\n validateState() {\n this.isValidState = true;\n if (this.value || this.value === 0) {\n this.isValidState = !(this.value > this.max || this.value < this.min);\n }\n this.checkErrorClass();\n }\n getNumberOfDecimals(value) {\n let numberOfDecimals;\n // eslint-disable-next-line no-useless-escape\n const EXPREGEXP = new RegExp('[eE][\\-+]?([0-9]+)');\n let valueString = value.toString();\n if (EXPREGEXP.test(valueString)) {\n const result = EXPREGEXP.exec(valueString);\n if (!isNullOrUndefined(result)) {\n valueString = value.toFixed(Math.min(parseInt(result[1], 10), 20));\n }\n }\n const decimalPart = valueString.split('.')[1];\n numberOfDecimals = !decimalPart || !decimalPart.length ? 0 : decimalPart.length;\n if (this.decimals !== null) {\n numberOfDecimals = numberOfDecimals < this.decimals ? numberOfDecimals : this.decimals;\n }\n return numberOfDecimals;\n }\n formatNumber() {\n const numberOfDecimals = this.getNumberOfDecimals(this.value);\n return this.instance.getNumberFormat({\n maximumFractionDigits: numberOfDecimals,\n minimumFractionDigits: numberOfDecimals, useGrouping: false\n })(this.value);\n }\n trimValue(value) {\n if (value > this.max) {\n return this.max;\n }\n if (value < this.min) {\n return this.min;\n }\n return value;\n }\n roundNumber(value, precision) {\n let result = value;\n const decimals = precision || 0;\n const result1 = result.toString().split('e');\n result = Math.round(Number(result1[0] + 'e' + (result1[1] ? (Number(result1[1]) + decimals) : decimals)));\n const result2 = result.toString().split('e');\n result = Number(result2[0] + 'e' + (result2[1] ? (Number(result2[1]) - decimals) : -decimals));\n return Number(result.toFixed(decimals));\n }\n cancelEvent(event) {\n event.preventDefault();\n return false;\n }\n keyPressHandler(event) {\n if (!this.enabled || this.readonly) {\n return true;\n }\n if (!Browser.isDevice && Browser.info.version === '11.0' && event.keyCode === 13) {\n const parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n this.updateValue(parsedInput, event);\n return true;\n }\n if (event.which === 0 || event.metaKey || event.ctrlKey || event.keyCode === 8 || event.keyCode === 13) {\n return true;\n }\n const currentChar = String.fromCharCode(event.which);\n let text = this.element.value;\n text = text.substring(0, this.element.selectionStart) + currentChar + text.substring(this.element.selectionEnd);\n if (!this.numericRegex().test(text)) {\n event.preventDefault();\n event.stopPropagation();\n return false;\n }\n else {\n return true;\n }\n }\n numericRegex() {\n const numericObject = getNumericObject(this.locale);\n let decimalSeparator = getValue('decimal', numericObject);\n let fractionRule = '*';\n if (decimalSeparator === DECIMALSEPARATOR) {\n decimalSeparator = '\\\\' + decimalSeparator;\n }\n if (this.decimals === 0 && this.validateDecimalOnType) {\n return INTREGEXP;\n }\n if (this.decimals && this.validateDecimalOnType) {\n fractionRule = '{0,' + this.decimals + '}';\n }\n return new RegExp('^(-)?(((\\\\d+(' + decimalSeparator + '\\\\d' + fractionRule +\n ')?)|(' + decimalSeparator + '\\\\d' + fractionRule + ')))?$');\n }\n mouseWheel(event) {\n event.preventDefault();\n let delta;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const rawEvent = event;\n if (rawEvent.wheelDelta) {\n delta = rawEvent.wheelDelta / 120;\n }\n else if (rawEvent.detail) {\n delta = -rawEvent.detail / 3;\n }\n if (delta > 0) {\n this.action(INCREMENT, event);\n }\n else if (delta < 0) {\n this.action(DECREMENT, event);\n }\n this.cancelEvent(event);\n }\n focusHandler(event) {\n this.focusEventArgs = { event: event, value: this.value, container: this.container };\n this.trigger('focus', this.focusEventArgs);\n if (!this.enabled || this.readonly) {\n return;\n }\n this.isFocused = true;\n removeClass([this.container], ERROR);\n this.prevValue = this.value;\n if ((this.value || this.value === 0)) {\n const formatValue = this.formatNumber();\n this.setElementValue(formatValue);\n if (!this.isPrevFocused) {\n if (!Browser.isDevice && Browser.info.version === '11.0') {\n this.element.setSelectionRange(0, formatValue.length);\n }\n else {\n const delay = (Browser.isDevice && Browser.isIos) ? 600 : 0;\n setTimeout(() => {\n this.element.setSelectionRange(0, formatValue.length);\n }, delay);\n }\n }\n }\n if (!Browser.isDevice) {\n EventHandler.add(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel, this);\n }\n }\n focusOutHandler(event) {\n this.blurEventArgs = { event: event, value: this.value, container: this.container };\n this.trigger('blur', this.blurEventArgs);\n if (!this.enabled || this.readonly) {\n return;\n }\n if (this.isPrevFocused) {\n event.preventDefault();\n if (Browser.isDevice) {\n const value = this.element.value;\n this.element.focus();\n this.isPrevFocused = false;\n const ele = this.element;\n setTimeout(() => {\n this.setElementValue(value, ele);\n }, 200);\n }\n }\n else {\n this.isFocused = false;\n if (!this.element.value.length) {\n this.setProperties({ value: null }, true);\n }\n const parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n this.updateValue(parsedInput);\n if (!Browser.isDevice) {\n EventHandler.remove(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel);\n }\n }\n const formElement = closest(this.element, 'form');\n if (formElement) {\n const element = this.element.nextElementSibling;\n const focusEvent = document.createEvent('FocusEvent');\n focusEvent.initEvent('focusout', false, true);\n element.dispatchEvent(focusEvent);\n }\n }\n mouseDownOnSpinner(event) {\n if (this.isFocused) {\n this.isPrevFocused = true;\n event.preventDefault();\n }\n if (!this.getElementData(event)) {\n return;\n }\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const result = this.getElementData(event);\n const target = event.currentTarget;\n const action = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT;\n EventHandler.add(target, 'mouseleave', this.mouseUpClick, this);\n this.timeOut = setInterval(() => {\n this.isCalled = true;\n this.action(action, event);\n }, 150);\n EventHandler.add(document, 'mouseup', this.mouseUpClick, this);\n }\n touchMoveOnSpinner(event) {\n let target;\n if (event.type === \"touchmove\") {\n let touchEvent = event.touches;\n target = touchEvent.length && document.elementFromPoint(touchEvent[0].pageX, touchEvent[0].pageY);\n }\n else {\n target = document.elementFromPoint(event.clientX, event.clientY);\n }\n if (!(target.classList.contains(SPINICON))) {\n clearInterval(this.timeOut);\n }\n }\n mouseUpOnSpinner(event) {\n if (this.isPrevFocused) {\n this.element.focus();\n if (!Browser.isDevice) {\n this.isPrevFocused = false;\n }\n }\n if (!Browser.isDevice) {\n event.preventDefault();\n }\n if (!this.getElementData(event)) {\n return;\n }\n const target = event.currentTarget;\n const action = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT;\n EventHandler.remove(target, 'mouseleave', this.mouseUpClick);\n if (!this.isCalled) {\n this.action(action, event);\n }\n this.isCalled = false;\n EventHandler.remove(document, 'mouseup', this.mouseUpClick);\n const formElement = closest(this.element, 'form');\n if (formElement) {\n const element = this.element.nextElementSibling;\n const keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n }\n getElementData(event) {\n if ((event.which && event.which === 3) || (event.button && event.button === 2)\n || !this.enabled || this.readonly) {\n return false;\n }\n clearInterval(this.timeOut);\n return true;\n }\n floatLabelTypeUpdate() {\n Input.removeFloating(this.inputWrapper);\n const hiddenInput = this.hiddenInput;\n this.hiddenInput.remove();\n Input.addFloating(this.element, this.floatLabelType, this.placeholder, this.createElement);\n this.container.insertBefore(hiddenInput, this.container.childNodes[1]);\n }\n mouseUpClick(event) {\n event.stopPropagation();\n clearInterval(this.timeOut);\n this.isCalled = false;\n EventHandler.remove(this.spinUp, 'mouseleave', this.mouseUpClick);\n EventHandler.remove(this.spinDown, 'mouseleave', this.mouseUpClick);\n }\n /**\n * Increments the NumericTextBox value with the specified step value.\n *\n * @param {number} step - Specifies the value used to increment the NumericTextBox value.\n * if its not given then numeric value will be incremented based on the step property value.\n * @returns {void}\n */\n increment(step = this.step) {\n this.isInteract = false;\n this.changeValue(this.performAction(this.value, step, INCREMENT));\n this.raiseChangeEvent();\n }\n /**\n * Decrements the NumericTextBox value with specified step value.\n *\n * @param {number} step - Specifies the value used to decrement the NumericTextBox value.\n * if its not given then numeric value will be decremented based on the step property value.\n * @returns {void}\n */\n decrement(step = this.step) {\n this.isInteract = false;\n this.changeValue(this.performAction(this.value, step, DECREMENT));\n this.raiseChangeEvent();\n }\n /**\n * Removes the component from the DOM and detaches all its related event handlers.\n * Also it maintains the initial input element from the DOM.\n *\n * @method destroy\n * @returns {void}\n */\n destroy() {\n this.unwireEvents();\n if (!(isBlazor() && this.isServerRendered)) {\n detach(this.hiddenInput);\n if (this.showSpinButton) {\n this.unwireSpinBtnEvents();\n detach(this.spinUp);\n detach(this.spinDown);\n }\n const attrArray = ['aria-labelledby', 'role', 'autocomplete', 'aria-readonly',\n 'autocorrect', 'aria-disabled', 'aria-placeholder', 'autocapitalize',\n 'spellcheck', 'aria-autocomplete', 'tabindex', 'aria-valuemin',\n 'aria-valuemax', 'aria-live', 'aria-valuenow', 'aria-invalid'];\n for (let i = 0; i < attrArray.length; i++) {\n this.element.removeAttribute(attrArray[i]);\n }\n this.element.classList.remove('e-input');\n this.container.insertAdjacentElement('afterend', this.element);\n detach(this.container);\n super.destroy();\n }\n }\n /* eslint-disable valid-jsdoc, jsdoc/require-returns */\n /**\n * Returns the value of NumericTextBox with the format applied to the NumericTextBox.\n *\n */\n getText() {\n return this.element.value;\n }\n /* eslint-enable valid-jsdoc, jsdoc/require-returns */\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n focusIn() {\n if (document.activeElement !== this.element && this.enabled) {\n this.element.focus();\n addClass([this.container], [NUMERIC_FOCUS]);\n }\n }\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n focusOut() {\n if (document.activeElement === this.element && this.enabled) {\n this.element.blur();\n removeClass([this.container], [NUMERIC_FOCUS]);\n }\n }\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets the properties to be maintained in the persisted state.\n *\n * @returns {string}\n */\n getPersistData() {\n const keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n }\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Calls internally if any of the property value is changed.\n *\n * @param {NumericTextBoxModel} newProp - Returns the dynamic property value of the component.\n * @param {NumericTextBoxModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n onPropertyChanged(newProp, oldProp) {\n for (const prop of Object.keys(newProp)) {\n switch (prop) {\n case 'width':\n this.setElementWidth(newProp.width);\n break;\n case 'cssClass':\n this.updateCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n case 'enabled':\n Input.setEnabled(newProp.enabled, this.element);\n break;\n case 'enableRtl':\n Input.setEnableRtl(newProp.enableRtl, [this.container]);\n break;\n case 'readonly':\n Input.setReadonly(newProp.readonly, this.element);\n if (this.readonly) {\n attributes(this.element, { 'aria-readonly': 'true' });\n }\n else {\n this.element.removeAttribute('aria-readonly');\n }\n break;\n case 'htmlAttributes':\n this.updateHTMLAttrToElement();\n this.updateHTMLAttrToWrapper();\n this.updateDataAttribute(true);\n this.checkAttributes(true);\n Input.validateInputType(this.container, this.element);\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.element);\n break;\n case 'step':\n this.step = newProp.step;\n this.validateStep();\n break;\n case 'showSpinButton':\n this.updateSpinButton(newProp);\n break;\n case 'showClearButton':\n this.updateClearButton(newProp);\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n this.floatLabelTypeUpdate();\n break;\n case 'value':\n this.isDynamicChange = (this.isAngular || this.isVue) && this.preventChange;\n this.updateValue(newProp.value);\n if (this.isDynamicChange) {\n this.preventChange = false;\n this.isDynamicChange = false;\n }\n break;\n case 'min':\n case 'max':\n setValue(prop, getValue(prop, newProp), this);\n this.validateMinMax();\n this.updateValue(this.value);\n break;\n case 'strictMode':\n this.strictMode = newProp.strictMode;\n this.updateValue(this.value);\n this.validateState();\n break;\n case 'locale':\n this.initCultureFunc();\n this.l10n.setLocale(this.locale);\n this.setSpinButton();\n this.updatePlaceholder();\n Input.setPlaceholder(this.placeholder, this.element);\n this.updateValue(this.value);\n break;\n case 'currency':\n {\n const propVal = getValue(prop, newProp);\n this.setProperties({ currencyCode: propVal }, true);\n this.updateCurrency(prop, propVal);\n }\n break;\n case 'currencyCode':\n {\n const propValue = getValue(prop, newProp);\n this.setProperties({ currency: propValue }, true);\n this.updateCurrency('currency', propValue);\n }\n break;\n case 'format':\n setValue(prop, getValue(prop, newProp), this);\n this.initCultureInfo();\n this.updateValue(this.value);\n break;\n case 'decimals':\n this.decimals = newProp.decimals;\n this.updateValue(this.value);\n }\n }\n }\n updateClearButton(newProp) {\n if (isBlazor()) {\n if (this.showClearButton) {\n this.inputWrapper.clearButton = this.container.querySelector('.e-clear-icon');\n Input.wireClearBtnEvents(this.element, this.inputWrapper.clearButton, this.inputWrapper.container);\n }\n }\n else {\n Input.setClearButton(newProp.showClearButton, this.element, this.inputWrapper, undefined, this.createElement);\n this.bindClearEvent();\n }\n }\n updateSpinButton(newProp) {\n if (isBlazor()) {\n if (this.showSpinButton) {\n this.spinDown = this.container.querySelector('.' + SPINDOWN);\n this.spinUp = this.container.querySelector('.' + SPINUP);\n this.wireSpinBtnEvents();\n }\n }\n else {\n if (newProp.showSpinButton) {\n this.spinBtnCreation();\n }\n else {\n detach(this.spinUp);\n detach(this.spinDown);\n }\n }\n }\n /**\n * Gets the component name\n *\n * @returns {string} Returns the component name.\n * @private\n */\n getModuleName() {\n return 'numerictextbox';\n }\n};\n__decorate([\n Property('')\n], NumericTextBox.prototype, \"cssClass\", void 0);\n__decorate([\n Property(null)\n], NumericTextBox.prototype, \"value\", void 0);\n__decorate([\n Property(-(Number.MAX_VALUE))\n], NumericTextBox.prototype, \"min\", void 0);\n__decorate([\n Property(Number.MAX_VALUE)\n], NumericTextBox.prototype, \"max\", void 0);\n__decorate([\n Property(1)\n], NumericTextBox.prototype, \"step\", void 0);\n__decorate([\n Property(null)\n], NumericTextBox.prototype, \"width\", void 0);\n__decorate([\n Property(null)\n], NumericTextBox.prototype, \"placeholder\", void 0);\n__decorate([\n Property({})\n], NumericTextBox.prototype, \"htmlAttributes\", void 0);\n__decorate([\n Property(true)\n], NumericTextBox.prototype, \"showSpinButton\", void 0);\n__decorate([\n Property(false)\n], NumericTextBox.prototype, \"readonly\", void 0);\n__decorate([\n Property(true)\n], NumericTextBox.prototype, \"enabled\", void 0);\n__decorate([\n Property(false)\n], NumericTextBox.prototype, \"showClearButton\", void 0);\n__decorate([\n Property(false)\n], NumericTextBox.prototype, \"enablePersistence\", void 0);\n__decorate([\n Property('n2')\n], NumericTextBox.prototype, \"format\", void 0);\n__decorate([\n Property(null)\n], NumericTextBox.prototype, \"decimals\", void 0);\n__decorate([\n Property(null)\n], NumericTextBox.prototype, \"currency\", void 0);\n__decorate([\n Property(null)\n], NumericTextBox.prototype, \"currencyCode\", void 0);\n__decorate([\n Property(true)\n], NumericTextBox.prototype, \"strictMode\", void 0);\n__decorate([\n Property(false)\n], NumericTextBox.prototype, \"validateDecimalOnType\", void 0);\n__decorate([\n Property('Never')\n], NumericTextBox.prototype, \"floatLabelType\", void 0);\n__decorate([\n Event()\n], NumericTextBox.prototype, \"created\", void 0);\n__decorate([\n Event()\n], NumericTextBox.prototype, \"destroyed\", void 0);\n__decorate([\n Event()\n], NumericTextBox.prototype, \"change\", void 0);\n__decorate([\n Event()\n], NumericTextBox.prototype, \"focus\", void 0);\n__decorate([\n Event()\n], NumericTextBox.prototype, \"blur\", void 0);\nNumericTextBox = __decorate([\n NotifyPropertyChanges\n], NumericTextBox);\n\n/**\n * NumericTextBox modules\n */\n\n/* eslint-disable valid-jsdoc, jsdoc/require-jsdoc, jsdoc/require-returns, jsdoc/require-param */\n/**\n * MaskedTextBox base module\n */\nconst ERROR$1 = 'e-error';\nconst INPUTGROUP = 'e-input-group';\nconst FLOATINPUT = 'e-float-input';\nconst UTILMASK = 'e-utility-mask';\nconst TOPLABEL = 'e-label-top';\nconst BOTTOMLABEL = 'e-label-bottom';\n/**\n * @hidden\n * Built-in masking elements collection.\n */\nconst regularExpressions = {\n '0': '[0-9]',\n '9': '[0-9 ]',\n '#': '[0-9 +-]',\n 'L': '[A-Za-z]',\n '?': '[A-Za-z ]',\n '&': '[^\\x7f ]+',\n 'C': '[^\\x7f]+',\n 'A': '[A-Za-z0-9]',\n 'a': '[A-Za-z0-9 ]'\n};\n/**\n * Generate required masking elements to the MaskedTextBox from user mask input.\n *\n * @hidden\n */\nfunction createMask() {\n attributes(this.element, {\n 'role': 'textbox', 'autocomplete': 'off', 'autocorrect': 'off', 'autocapitalize': 'off',\n 'spellcheck': 'false', 'aria-live': 'assertive', 'aria-valuenow': ''\n });\n if (this.mask) {\n const splitMask = this.mask.split(']');\n for (let i = 0; i < splitMask.length; i++) {\n if (splitMask[i][splitMask[i].length - 1] === '\\\\') {\n splitMask[i] = splitMask[i] + ']';\n const splitInnerMask = splitMask[i].split('[');\n for (let j = 0; j < splitInnerMask.length; j++) {\n if (splitInnerMask[j][splitInnerMask[j].length - 1] === '\\\\') {\n splitInnerMask[j] = splitInnerMask[j] + '[';\n }\n pushIntoRegExpCollec.call(this, splitInnerMask[j]);\n }\n }\n else {\n const splitInnerMask = splitMask[i].split('[');\n if (splitInnerMask.length > 1) {\n let chkSpace = false;\n for (let j = 0; j < splitInnerMask.length; j++) {\n if (splitInnerMask[j] === '\\\\') {\n this.customRegExpCollec.push('[');\n this.hiddenMask += splitInnerMask[j] + '[';\n }\n else if (splitInnerMask[j] === '') {\n chkSpace = true;\n }\n else if ((splitInnerMask[j] !== '' && chkSpace) || j === splitInnerMask.length - 1) {\n this.customRegExpCollec.push('[' + splitInnerMask[j] + ']');\n this.hiddenMask += this.promptChar;\n chkSpace = false;\n }\n else {\n pushIntoRegExpCollec.call(this, splitInnerMask[j]);\n }\n }\n }\n else {\n pushIntoRegExpCollec.call(this, splitInnerMask[0]);\n }\n }\n }\n this.escapeMaskValue = this.hiddenMask;\n this.promptMask = this.hiddenMask.replace(/[09?LCAa#&]/g, this.promptChar);\n if (!isNullOrUndefined(this.customCharacters)) {\n for (let i = 0; i < this.promptMask.length; i++) {\n if (!isNullOrUndefined(this.customCharacters[this.promptMask[i]])) {\n this.promptMask = this.promptMask.replace(new RegExp(this.promptMask[i], 'g'), this.promptChar);\n }\n }\n }\n let escapeNumber = 0;\n if (this.hiddenMask.match(new RegExp(/\\\\/))) {\n for (let i = 0; i < this.hiddenMask.length; i++) {\n let j = 0;\n if (i >= 1) {\n j = i;\n }\n escapeNumber = this.hiddenMask.length - this.promptMask.length;\n j = j - escapeNumber;\n if ((i > 0 && this.hiddenMask[i - 1] !== '\\\\') && (this.hiddenMask[i] === '>' ||\n this.hiddenMask[i] === '<' || this.hiddenMask[i] === '|')) {\n this.promptMask = this.promptMask.substring(0, j) +\n this.promptMask.substring((i + 1) - escapeNumber, this.promptMask.length);\n this.escapeMaskValue = this.escapeMaskValue.substring(0, j) +\n this.escapeMaskValue.substring((i + 1) - escapeNumber, this.escapeMaskValue.length);\n }\n if (this.hiddenMask[i] === '\\\\') {\n this.promptMask = this.promptMask.substring(0, j) + this.hiddenMask[i + 1] +\n this.promptMask.substring((i + 2) - escapeNumber, this.promptMask.length);\n this.escapeMaskValue = this.escapeMaskValue.substring(0, j) + this.escapeMaskValue[i + 1] +\n this.escapeMaskValue.substring((i + 2) - escapeNumber, this.escapeMaskValue.length);\n }\n }\n }\n else {\n this.promptMask = this.promptMask.replace(/[>|<]/g, '');\n this.escapeMaskValue = this.hiddenMask.replace(/[>|<]/g, '');\n }\n attributes(this.element, { 'aria-invalid': 'false' });\n }\n}\n/**\n * Apply mask ability with masking elements to the MaskedTextBox.\n *\n * @hidden\n */\nfunction applyMask() {\n setElementValue.call(this, this.promptMask);\n setMaskValue.call(this, this.value);\n}\n/**\n * To wire required events to the MaskedTextBox.\n *\n * @hidden\n */\nfunction wireEvents() {\n EventHandler.add(this.element, 'keydown', maskInputKeyDownHandler, this);\n EventHandler.add(this.element, 'keypress', maskInputKeyPressHandler, this);\n EventHandler.add(this.element, 'keyup', maskInputKeyUpHandler, this);\n EventHandler.add(this.element, 'input', maskInputHandler, this);\n EventHandler.add(this.element, 'focus', maskInputFocusHandler, this);\n EventHandler.add(this.element, 'blur', maskInputBlurHandler, this);\n EventHandler.add(this.element, 'paste', maskInputPasteHandler, this);\n EventHandler.add(this.element, 'cut', maskInputCutHandler, this);\n EventHandler.add(this.element, 'drop', maskInputDropHandler, this);\n EventHandler.add(this.element, 'mousedown', maskInputMouseDownHandler, this);\n EventHandler.add(this.element, 'mouseup', maskInputMouseUpHandler, this);\n if (this.enabled) {\n bindClearEvent.call(this);\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', resetFormHandler, this);\n }\n }\n}\n/**\n * To unwire events attached to the MaskedTextBox.\n *\n * @hidden\n */\nfunction unwireEvents() {\n EventHandler.remove(this.element, 'keydown', maskInputKeyDownHandler);\n EventHandler.remove(this.element, 'keypress', maskInputKeyPressHandler);\n EventHandler.remove(this.element, 'keyup', maskInputKeyUpHandler);\n EventHandler.remove(this.element, 'input', maskInputHandler);\n EventHandler.remove(this.element, 'focus', maskInputFocusHandler);\n EventHandler.remove(this.element, 'blur', maskInputBlurHandler);\n EventHandler.remove(this.element, 'paste', maskInputPasteHandler);\n EventHandler.remove(this.element, 'cut', maskInputCutHandler);\n EventHandler.remove(this.element, 'mousedown', maskInputMouseDownHandler);\n EventHandler.remove(this.element, 'mouseup', maskInputMouseUpHandler);\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', resetFormHandler);\n }\n}\n/**\n * To bind required events to the MaskedTextBox clearButton.\n *\n * @hidden\n */\nfunction bindClearEvent() {\n if (this.showClearButton) {\n EventHandler.add(this.inputObj.clearButton, 'mousedown touchstart', resetHandler, this);\n }\n}\nfunction resetHandler(e) {\n e.preventDefault();\n if (!this.inputObj.clearButton.classList.contains('e-clear-icon-hide')) {\n clear.call(this, e);\n this.value = '';\n }\n}\nfunction clear(event) {\n const value = this.element.value;\n setElementValue.call(this, this.promptMask);\n this.redoCollec.unshift({\n value: this.promptMask, startIndex: this.element.selectionStart, endIndex: this.element.selectionEnd\n });\n triggerMaskChangeEvent.call(this, event, value);\n this.element.setSelectionRange(0, 0);\n}\nfunction resetFormHandler() {\n if (this.element.tagName === 'EJS-MASKEDTEXTBOX') {\n setElementValue.call(this, this.promptMask);\n }\n else {\n this.value = this.initInputValue;\n }\n}\n/**\n * To get masked value from the MaskedTextBox.\n *\n * @hidden\n */\nfunction unstrippedValue(element) {\n return element.value;\n}\n/**\n * To extract raw value from the MaskedTextBox.\n *\n * @hidden\n */\nfunction strippedValue(element, maskValues) {\n let value = '';\n let k = 0;\n let checkMask = false;\n const maskValue = (!isNullOrUndefined(maskValues)) ? maskValues : (!isNullOrUndefined(element) &&\n !isNullOrUndefined(this)) ? element.value : maskValues;\n if (maskValue !== this.promptMask) {\n for (let i = 0; i < this.customRegExpCollec.length; i++) {\n if (checkMask) {\n checkMask = false;\n }\n if (this.customRegExpCollec[k] === '>' || this.customRegExpCollec[k] === '<' ||\n this.customRegExpCollec[k] === '|' || this.customRegExpCollec[k] === '\\\\') {\n --i;\n checkMask = true;\n }\n if (!checkMask) {\n if ((maskValue[i] !== this.promptChar) && (!isNullOrUndefined(this.customRegExpCollec[k]) &&\n ((this._callPasteHandler || !isNullOrUndefined(this.regExpCollec[this.customRegExpCollec[k]])) ||\n (this.customRegExpCollec[k].length > 2 && this.customRegExpCollec[k][0] === '[' &&\n this.customRegExpCollec[k][this.customRegExpCollec[k].length - 1] === ']') ||\n (!isNullOrUndefined(this.customCharacters) &&\n (!isNullOrUndefined(this.customCharacters[this.customRegExpCollec[k]]))))) && (maskValue !== '')) {\n value += maskValue[i];\n }\n }\n ++k;\n }\n }\n if (this.mask === null || this.mask === '' && this.value !== undefined) {\n value = maskValue;\n }\n return value;\n}\nfunction pushIntoRegExpCollec(value) {\n for (let k = 0; k < value.length; k++) {\n this.hiddenMask += value[k];\n if (value[k] !== '\\\\') {\n this.customRegExpCollec.push(value[k]);\n }\n }\n}\nfunction maskInputMouseDownHandler() {\n this.isClicked = true;\n}\nfunction maskInputMouseUpHandler() {\n this.isClicked = false;\n}\nfunction maskInputFocusHandler(event) {\n const inputElement = this.element;\n let startIndex = 0;\n const modelValue = strippedValue.call(this, inputElement);\n let toAllowForward = false;\n let toAllowBackward = false;\n let eventArgs = {\n selectionStart: inputElement.selectionStart,\n event: event,\n value: this.value,\n maskedValue: inputElement.value,\n container: this.inputObj.container,\n selectionEnd: inputElement.selectionEnd\n };\n if (!this.isClicked) {\n triggerFocus.call(this, eventArgs, inputElement);\n }\n if (this.mask) {\n if (!(!(modelValue === null || modelValue === '') || this.floatLabelType === 'Always' ||\n this.placeholder === null || this.placeholder === '')) {\n inputElement.value = this.promptMask;\n }\n setTimeout(() => {\n if (inputElement.selectionStart === this.promptMask.length ||\n inputElement.value[inputElement.selectionStart] === this.promptChar) {\n toAllowForward = true;\n }\n else {\n for (let i = inputElement.selectionStart; i < this.promptMask.length; i++) {\n if (inputElement.value[i] !== this.promptChar) {\n if ((inputElement.value[i] !== this.promptMask[i])) {\n toAllowForward = false;\n break;\n }\n }\n else {\n toAllowForward = true;\n break;\n }\n }\n }\n });\n setTimeout(() => {\n const backSelectionStart = inputElement.selectionStart - 1;\n if (backSelectionStart === this.promptMask.length - 1 ||\n inputElement.value[backSelectionStart] === this.promptChar) {\n toAllowBackward = true;\n }\n else {\n for (let i = backSelectionStart; i >= 0; i--) {\n if (inputElement.value[i] !== this.promptChar) {\n if ((inputElement.value[i] !== this.promptMask[i])) {\n toAllowBackward = false;\n break;\n }\n }\n else {\n toAllowBackward = true;\n break;\n }\n }\n }\n });\n if ((this.isClicked || (this.floatLabelType !== 'Always' &&\n ((modelValue === null || modelValue === '') &&\n (this.placeholder !== null && this.placeholder !== ''))))) {\n for (startIndex = 0; startIndex < this.promptMask.length; startIndex++) {\n if (inputElement.value[startIndex] === this.promptChar) {\n setTimeout(() => {\n if (toAllowForward || toAllowBackward) {\n inputElement.selectionEnd = startIndex;\n inputElement.selectionStart = startIndex;\n }\n eventArgs = {\n selectionStart: inputElement.selectionStart,\n event: event,\n value: this.value,\n maskedValue: inputElement.value,\n container: this.inputObj.container,\n selectionEnd: inputElement.selectionEnd\n };\n triggerFocus.call(this, eventArgs, inputElement);\n });\n break;\n }\n }\n if (isNullOrUndefined(inputElement.value.match(this.promptChar))) {\n eventArgs = {\n selectionStart: inputElement.selectionStart,\n event: event,\n value: this.value,\n maskedValue: inputElement.value,\n container: this.inputObj.container,\n selectionEnd: inputElement.selectionEnd\n };\n triggerFocus.call(this, eventArgs, inputElement);\n }\n this.isClicked = false;\n }\n }\n}\nfunction triggerFocus(eventArgs, inputElement) {\n this.trigger('focus', eventArgs, (eventArgs) => {\n inputElement.selectionStart = eventArgs.selectionStart;\n inputElement.selectionEnd = eventArgs.selectionEnd;\n });\n}\nfunction maskInputBlurHandler(event) {\n this.blurEventArgs = {\n event: event,\n value: this.value,\n maskedValue: this.element.value,\n container: this.inputObj.container\n };\n this.trigger('blur', this.blurEventArgs);\n if (this.mask) {\n this.isFocus = false;\n if (this.placeholder && this.element.value === this.promptMask && this.floatLabelType !== 'Always') {\n setElementValue.call(this, '');\n const labelElement = this.element.parentNode.querySelector('.e-float-text');\n if (this.floatLabelType === 'Auto' && !isNullOrUndefined(labelElement) && labelElement.classList.contains(TOPLABEL)) {\n removeClass([labelElement], TOPLABEL);\n }\n }\n }\n}\nfunction maskInputPasteHandler(event) {\n if (this.mask && !this.readonly) {\n const sIndex = this.element.selectionStart;\n const eIndex = this.element.selectionEnd;\n const oldValue = this.element.value;\n setElementValue.call(this, '');\n this._callPasteHandler = true;\n setTimeout(() => {\n let value = this.element.value.replace(/ /g, '');\n if (this.redoCollec.length > 0 && this.redoCollec[0].value === this.element.value) {\n value = strippedValue.call(this, this.element);\n }\n setElementValue.call(this, oldValue);\n this.element.selectionStart = sIndex;\n this.element.selectionEnd = eIndex;\n let i = 0;\n this.maskKeyPress = true;\n do {\n validateValue.call(this, value[i], false, null);\n ++i;\n } while (i < value.length);\n this.maskKeyPress = false;\n this._callPasteHandler = false;\n if (this.element.value === oldValue) {\n let i = 0;\n this.maskKeyPress = true;\n do {\n validateValue.call(this, value[i], false, null);\n ++i;\n } while (i < value.length);\n this.maskKeyPress = false;\n }\n else {\n triggerMaskChangeEvent.call(this, event, oldValue);\n }\n }, 1);\n }\n}\nfunction maskInputCutHandler(event) {\n if (this.mask && !this.readonly) {\n const preValue = this.element.value;\n const sIndex = this.element.selectionStart;\n const eIndex = this.element.selectionEnd;\n this.undoCollec.push({ value: this.element.value, startIndex: this.element.selectionStart, endIndex: this.element.selectionEnd });\n const value = this.element.value.substring(0, sIndex) + this.promptMask.substring(sIndex, eIndex) +\n this.element.value.substring(eIndex);\n setTimeout(() => {\n setElementValue.call(this, value);\n this.element.selectionStart = this.element.selectionEnd = sIndex;\n if (this.element.value !== preValue) {\n triggerMaskChangeEvent.call(this, event, null);\n }\n }, 0);\n }\n}\nfunction maskInputDropHandler(event) {\n event.preventDefault();\n}\nfunction maskInputHandler(event) {\n if (Browser.isIE === true && this.element.value === '' && this.floatLabelType === 'Never') {\n return;\n }\n const eventArgs = { ctrlKey: false, keyCode: 229 };\n extend(event, eventArgs);\n if (this.mask) {\n if (this.element.value === '') {\n this.redoCollec.unshift({\n value: this.promptMask, startIndex: this.element.selectionStart, endIndex: this.element.selectionEnd\n });\n }\n if (this.element.value.length === 1) {\n this.element.value = this.element.value + this.promptMask;\n this.element.setSelectionRange(1, 1);\n }\n if (!this._callPasteHandler) {\n removeMaskInputValues.call(this, event);\n }\n if (this.element.value.length > this.promptMask.length) {\n const startIndex = this.element.selectionStart;\n const addedValues = this.element.value.length - this.promptMask.length;\n const value = this.element.value.substring(startIndex - addedValues, startIndex);\n this.maskKeyPress = false;\n let i = 0;\n do {\n validateValue.call(this, value[i], event.ctrlKey, event);\n ++i;\n } while (i < value.length);\n if (this.element.value !== this.preEleVal) {\n triggerMaskChangeEvent.call(this, event, null);\n }\n }\n const val = strippedValue.call(this, this.element);\n this.prevValue = val;\n this.value = val;\n if (val === '') {\n setElementValue.call(this, this.promptMask);\n this.element.setSelectionRange(0, 0);\n }\n }\n}\nfunction maskInputKeyDownHandler(event) {\n if (this.mask && !this.readonly) {\n if (event.keyCode !== 229) {\n if (event.ctrlKey && (event.keyCode === 89 || event.keyCode === 90)) {\n event.preventDefault();\n }\n removeMaskInputValues.call(this, event);\n }\n const startValue = this.element.value;\n if (event.ctrlKey && (event.keyCode === 89 || event.keyCode === 90)) {\n let collec;\n if (event.keyCode === 90 && this.undoCollec.length > 0 && startValue !== this.undoCollec[this.undoCollec.length - 1].value) {\n collec = this.undoCollec[this.undoCollec.length - 1];\n this.redoCollec.unshift({\n value: this.element.value, startIndex: this.element.selectionStart,\n endIndex: this.element.selectionEnd\n });\n setElementValue.call(this, collec.value);\n this.element.selectionStart = collec.startIndex;\n this.element.selectionEnd = collec.endIndex;\n this.undoCollec.splice(this.undoCollec.length - 1, 1);\n }\n else if (event.keyCode === 89 && this.redoCollec.length > 0 && startValue !== this.redoCollec[0].value) {\n collec = this.redoCollec[0];\n this.undoCollec.push({\n value: this.element.value, startIndex: this.element.selectionStart,\n endIndex: this.element.selectionEnd\n });\n setElementValue.call(this, collec.value);\n this.element.selectionStart = collec.startIndex;\n this.element.selectionEnd = collec.endIndex;\n this.redoCollec.splice(0, 1);\n }\n }\n }\n}\nfunction mobileRemoveFunction() {\n let collec;\n const sIndex = this.element.selectionStart;\n const eIndex = this.element.selectionEnd;\n if (this.redoCollec.length > 0) {\n collec = this.redoCollec[0];\n setElementValue.call(this, collec.value);\n if ((collec.startIndex - sIndex) === 1) {\n this.element.selectionStart = collec.startIndex;\n this.element.selectionEnd = collec.endIndex;\n }\n else {\n this.element.selectionStart = sIndex + 1;\n this.element.selectionEnd = eIndex + 1;\n }\n }\n else {\n setElementValue.call(this, this.promptMask);\n this.element.selectionStart = this.element.selectionEnd = sIndex;\n }\n}\nfunction autoFillMaskInputValues(isRemove, oldEventVal, event) {\n if (event.type === 'input') {\n isRemove = false;\n oldEventVal = this.element.value;\n setElementValue.call(this, this.promptMask);\n setMaskValue.call(this, oldEventVal);\n }\n return isRemove;\n}\nfunction removeMaskInputValues(event) {\n let isRemove = false;\n let oldEventVal;\n let isDeleted = false;\n if (this.element.value.length < this.promptMask.length) {\n isRemove = true;\n oldEventVal = this.element.value;\n isRemove = autoFillMaskInputValues.call(this, isRemove, oldEventVal, event);\n mobileRemoveFunction.call(this);\n }\n if (this.element.value.length >= this.promptMask.length && event.type === 'input') {\n isRemove = autoFillMaskInputValues.call(this, isRemove, oldEventVal, event);\n }\n const initStartIndex = this.element.selectionStart;\n const initEndIndex = this.element.selectionEnd;\n let startIndex = this.element.selectionStart;\n const endIndex = this.element.selectionEnd;\n const maskValue = this.hiddenMask.replace(/[>|\\\\<]/g, '');\n let curMask = maskValue[startIndex - 1];\n const deleteEndIndex = this.element.selectionEnd;\n if (isRemove || event.keyCode === 8 || event.keyCode === 46) {\n this.undoCollec.push({ value: this.element.value, startIndex: this.element.selectionStart, endIndex: endIndex });\n let multipleDel = false;\n const preValue = this.element.value;\n if (startIndex > 0 || ((event.keyCode === 8 || event.keyCode === 46) && startIndex < this.element.value.length\n && ((this.element.selectionEnd - startIndex) !== this.element.value.length))) {\n let index = startIndex;\n if (startIndex !== endIndex) {\n startIndex = endIndex;\n if (event.keyCode === 46) {\n multipleDel = true;\n }\n }\n else if (event.keyCode === 46) {\n ++index;\n }\n else {\n --index;\n }\n for (let k = startIndex; (event.keyCode === 8 || isRemove || multipleDel) ? k > index : k < index; (event.keyCode === 8 || isRemove || multipleDel) ? k-- : k++) {\n for (let i = startIndex; (event.keyCode === 8 || isRemove || multipleDel) ? i > 0 : i < this.element.value.length; (event.keyCode === 8 || isRemove || multipleDel) ? i-- : i++) {\n let sIndex;\n if (((event.keyCode === 8 || multipleDel) && ((initStartIndex !== initEndIndex && initStartIndex !== startIndex) ||\n (initStartIndex === initEndIndex))) || isRemove) {\n curMask = maskValue[i - 1];\n sIndex = startIndex - 1;\n }\n else {\n curMask = maskValue[i];\n sIndex = startIndex;\n ++startIndex;\n }\n let oldValue = this.element.value[sIndex];\n if ((isNullOrUndefined(this.regExpCollec[curMask]) && (!isNullOrUndefined(this.customCharacters)\n && isNullOrUndefined(this.customCharacters[curMask]))\n && ((this.hiddenMask[sIndex] !== this.promptChar && this.customRegExpCollec[sIndex][0] !== '['\n && this.customRegExpCollec[sIndex][this.customRegExpCollec[sIndex].length - 1] !== ']')))\n || (this.promptMask[sIndex] !== this.promptChar && isNullOrUndefined(this.customCharacters))) {\n this.element.selectionStart = this.element.selectionEnd = sIndex;\n event.preventDefault();\n if (event.keyCode === 46 && !multipleDel) {\n ++this.element.selectionStart;\n }\n }\n else {\n const value = this.element.value;\n const prompt = this.promptChar;\n const elementValue = value.substring(0, sIndex) + prompt + value.substring(startIndex, value.length);\n setElementValue.call(this, elementValue);\n event.preventDefault();\n if (event.keyCode === 46 && !multipleDel) {\n sIndex++;\n }\n this.element.selectionStart = this.element.selectionEnd = sIndex;\n isDeleted = true;\n }\n startIndex = this.element.selectionStart;\n if ((!isDeleted && event.keyCode === 8) || multipleDel || (!isDeleted && !(event.keyCode === 46))) {\n sIndex = startIndex - 1;\n }\n else {\n sIndex = startIndex;\n isDeleted = false;\n }\n oldValue = this.element.value[sIndex];\n if (((initStartIndex !== initEndIndex) && (this.element.selectionStart === initStartIndex))\n || (this.promptMask[sIndex] === this.promptChar) || ((oldValue !== this.promptMask[sIndex]) &&\n (this.promptMask[sIndex] !== this.promptChar) && !isNullOrUndefined(this.customCharacters))) {\n break;\n }\n }\n }\n }\n if (event.keyCode === 46 && multipleDel && isDeleted) {\n this.element.selectionStart = this.element.selectionEnd = deleteEndIndex;\n }\n if (this.element.selectionStart === 0 && (this.element.selectionEnd === this.element.value.length)) {\n setElementValue.call(this, this.promptMask);\n event.preventDefault();\n this.element.selectionStart = this.element.selectionEnd = startIndex;\n }\n this.redoCollec.unshift({\n value: this.element.value, startIndex: this.element.selectionStart,\n endIndex: this.element.selectionEnd\n });\n if (this.element.value !== preValue) {\n triggerMaskChangeEvent.call(this, event, oldEventVal);\n }\n }\n}\nfunction maskInputKeyPressHandler(event) {\n if (this.mask && !this.readonly) {\n const oldValue = this.element.value;\n if ((!event.ctrlKey) || (event.ctrlKey && event.code !== 'KeyA' && event.code !== 'KeyY'\n && event.code !== 'KeyZ' && event.code !== 'KeyX' && event.code !== 'KeyC' && event.code !== 'KeyV')) {\n this.maskKeyPress = true;\n let key = event.key;\n if (key === 'Spacebar') {\n key = String.fromCharCode(event.keyCode);\n }\n if (!key) {\n this.isIosInvalid = true;\n validateValue.call(this, String.fromCharCode(event.keyCode), event.ctrlKey, event);\n event.preventDefault();\n this.isIosInvalid = false;\n }\n else if (key && key.length === 1) {\n validateValue.call(this, key, event.ctrlKey, event);\n event.preventDefault();\n }\n if (event.keyCode === 32 && key === ' ' && this.promptChar === ' ') {\n this.element.selectionStart = this.element.selectionEnd = this.element.selectionStart - key.length;\n }\n }\n if (this.element.value !== oldValue) {\n triggerMaskChangeEvent.call(this, event, oldValue);\n }\n }\n}\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction triggerMaskChangeEvent(event, oldValue) {\n const prevOnChange = this.isProtectedOnChange;\n if (!isNullOrUndefined(this.changeEventArgs) && !this.isInitial) {\n const eventArgs = {};\n this.changeEventArgs = { value: this.element.value, maskedValue: this.element.value, isInteraction: false, isInteracted: false };\n if (this.mask) {\n this.changeEventArgs.value = strippedValue.call(this, this.element);\n }\n if (!isNullOrUndefined(event)) {\n this.changeEventArgs.isInteracted = true;\n this.changeEventArgs.isInteraction = true;\n this.changeEventArgs.event = event;\n }\n this.isProtectedOnChange = true;\n this.value = this.changeEventArgs.value;\n this.isProtectedOnChange = prevOnChange;\n merge(eventArgs, this.changeEventArgs);\n /* istanbul ignore next */\n if (this.isAngular && this.preventChange) {\n this.preventChange = false;\n }\n else {\n this.trigger('change', eventArgs);\n }\n }\n this.preEleVal = this.element.value;\n this.prevValue = strippedValue.call(this, this.element);\n attributes(this.element, { 'aria-valuenow': this.element.value });\n}\nfunction maskInputKeyUpHandler(event) {\n if (this.mask && !this.readonly) {\n let collec;\n if (!this.maskKeyPress && event.keyCode === 229) {\n let oldEventVal;\n if (this.element.value.length === 1) {\n this.element.value = this.element.value + this.promptMask;\n this.element.setSelectionRange(1, 1);\n }\n if (this.element.value.length > this.promptMask.length) {\n const startIndex = this.element.selectionStart;\n const addedValues = this.element.value.length - this.promptMask.length;\n let val = this.element.value.substring(startIndex - addedValues, startIndex);\n if (this.undoCollec.length > 0) {\n collec = this.undoCollec[this.undoCollec.length - 1];\n const startIndex = this.element.selectionStart;\n oldEventVal = collec.value;\n const oldVal = collec.value.substring(startIndex - addedValues, startIndex);\n collec = this.redoCollec[0];\n val = val.trim();\n const isSpace = Browser.isAndroid && val === '';\n if (!isSpace && oldVal !== val && collec.value.substring(startIndex - addedValues, startIndex) !== val) {\n validateValue.call(this, val, event.ctrlKey, event);\n }\n else if (isSpace) {\n preventUnsupportedValues.call(this, event, startIndex - 1, this.element.selectionEnd - 1, val, event.ctrlKey, false);\n }\n }\n else {\n oldEventVal = this.promptMask;\n validateValue.call(this, val, event.ctrlKey, event);\n }\n this.maskKeyPress = false;\n triggerMaskChangeEvent.call(this, event, oldEventVal);\n }\n }\n else {\n removeMaskError.call(this);\n }\n const val = strippedValue.call(this, this.element);\n if (!((this.element.selectionStart === 0) && (this.promptMask === this.element.value) && val === '')\n || (val === '' && this.value !== val)) {\n this.prevValue = val;\n this.value = val;\n }\n }\n else {\n triggerMaskChangeEvent.call(this, event);\n }\n if (this.element.selectionStart === 0 && this.element.selectionEnd === 0) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const temp = this.element;\n setTimeout(() => {\n temp.setSelectionRange(0, 0);\n }, 0);\n }\n}\nfunction mobileSwipeCheck(key) {\n if (key.length > 1 && ((this.promptMask.length + key.length) < this.element.value.length)) {\n const elementValue = this.redoCollec[0].value.substring(0, this.redoCollec[0].startIndex) + key +\n this.redoCollec[0].value.substring(this.redoCollec[0].startIndex, this.redoCollec[0].value.length);\n setElementValue.call(this, elementValue);\n this.element.selectionStart = this.element.selectionEnd = this.redoCollec[0].startIndex + key.length;\n }\n this.element.selectionStart = this.element.selectionStart - key.length;\n this.element.selectionEnd = this.element.selectionEnd - key.length;\n}\nfunction mobileValidation(key) {\n if (!this.maskKeyPress) {\n mobileSwipeCheck.call(this, key);\n }\n}\nfunction validateValue(key, isCtrlKey, event) {\n mobileValidation.call(this, key);\n if (isNullOrUndefined(this) || isNullOrUndefined(key)) {\n return;\n }\n let startIndex = this.element.selectionStart;\n const initStartIndex = startIndex;\n let curMask;\n let allowText = false;\n const value = this.element.value;\n let eventOldVal;\n let prevSupport = false;\n let isEqualVal = false;\n for (let k = 0; k < key.length; k++) {\n const keyValue = key[k];\n startIndex = this.element.selectionStart;\n if (!this.maskKeyPress && initStartIndex === startIndex) {\n startIndex = startIndex + k;\n }\n if ((!this.maskKeyPress || startIndex < this.promptMask.length)) {\n for (let i = startIndex; i < this.promptMask.length; i++) {\n const maskValue = this.escapeMaskValue;\n curMask = maskValue[startIndex];\n if (this.hiddenMask[startIndex] === '\\\\' && this.hiddenMask[startIndex + 1] === key) {\n isEqualVal = true;\n }\n if ((isNullOrUndefined(this.regExpCollec[curMask]) && (isNullOrUndefined(this.customCharacters)\n || (!isNullOrUndefined(this.customCharacters) && isNullOrUndefined(this.customCharacters[curMask])))\n && ((this.hiddenMask[startIndex] !== this.promptChar && this.customRegExpCollec[startIndex][0] !== '['\n && this.customRegExpCollec[startIndex][this.customRegExpCollec[startIndex].length - 1] !== ']')))\n || ((this.promptMask[startIndex] !== this.promptChar) && isNullOrUndefined(this.customCharacters))\n || (this.promptChar === curMask && this.escapeMaskValue === this.mask)) {\n this.element.selectionStart = this.element.selectionEnd = startIndex + 1;\n startIndex = this.element.selectionStart;\n curMask = this.hiddenMask[startIndex];\n }\n }\n if (!isNullOrUndefined(this.customCharacters) && !isNullOrUndefined(this.customCharacters[curMask])) {\n const customValStr = this.customCharacters[curMask];\n const customValArr = customValStr.split(',');\n for (let i = 0; i < customValArr.length; i++) {\n if (keyValue.match(new RegExp('[' + customValArr[i] + ']'))) {\n allowText = true;\n break;\n }\n }\n }\n else if (!isNullOrUndefined(this.regExpCollec[curMask]) && keyValue.match(new RegExp(this.regExpCollec[curMask]))\n && this.promptMask[startIndex] === this.promptChar) {\n allowText = true;\n }\n else if (this.promptMask[startIndex] === this.promptChar && this.customRegExpCollec[startIndex][0] === '['\n && this.customRegExpCollec[startIndex][this.customRegExpCollec[startIndex].length - 1] === ']'\n && keyValue.match(new RegExp(this.customRegExpCollec[startIndex]))) {\n allowText = true;\n }\n if ((!this.maskKeyPress || startIndex < this.hiddenMask.length) && allowText) {\n if (k === 0) {\n if (this.maskKeyPress) {\n this.undoCollec.push({ value: value, startIndex: startIndex, endIndex: startIndex });\n }\n else {\n const sIndex = this.element.selectionStart;\n const eIndex = this.element.selectionEnd;\n if (this.redoCollec.length > 0) {\n eventOldVal = this.redoCollec[0].value;\n setElementValue.call(this, eventOldVal);\n this.undoCollec.push(this.redoCollec[0]);\n }\n else {\n this.undoCollec.push({ value: this.promptMask, startIndex: startIndex, endIndex: startIndex });\n eventOldVal = this.promptMask;\n setElementValue.call(this, eventOldVal);\n }\n this.element.selectionStart = sIndex;\n this.element.selectionEnd = eIndex;\n }\n }\n startIndex = this.element.selectionStart;\n applySupportedValues.call(this, event, startIndex, keyValue, eventOldVal, isEqualVal);\n prevSupport = true;\n if (k === key.length - 1) {\n this.redoCollec.unshift({\n value: this.element.value, startIndex: this.element.selectionStart, endIndex: this.element.selectionEnd\n });\n }\n allowText = false;\n }\n else {\n startIndex = this.element.selectionStart;\n preventUnsupportedValues.call(this, event, startIndex, initStartIndex, key, isCtrlKey, prevSupport);\n }\n if (k === key.length - 1 && !allowText) {\n if (!Browser.isAndroid || (Browser.isAndroid && startIndex < this.promptMask.length)) {\n this.redoCollec.unshift({\n value: this.element.value, startIndex: this.element.selectionStart, endIndex: this.element.selectionEnd\n });\n }\n }\n }\n else {\n if (key.length === 1 && !isCtrlKey && !isNullOrUndefined(event)) {\n addMaskErrorClass.call(this);\n }\n }\n }\n}\nfunction applySupportedValues(event, startIndex, keyValue, eventOldVal, isEqualVal) {\n if (this.hiddenMask.length > this.promptMask.length) {\n keyValue = changeToLowerUpperCase.call(this, keyValue, this.element.value);\n }\n if (!isEqualVal) {\n const value = this.element.value;\n const elementValue = value.substring(0, startIndex) + keyValue + value.substring(startIndex + 1, value.length);\n setElementValue.call(this, elementValue);\n this.element.selectionStart = this.element.selectionEnd = startIndex + 1;\n }\n}\nfunction preventUnsupportedValues(event, sIdx, idx, key, ctrl, chkSupport) {\n if (!this.maskKeyPress) {\n const value = this.element.value;\n if (sIdx >= this.promptMask.length) {\n setElementValue.call(this, value.substring(0, sIdx));\n }\n else {\n if (idx === sIdx) {\n setElementValue.call(this, value.substring(0, sIdx) + value.substring(sIdx + 1, value.length));\n }\n else {\n if (this.promptMask.length === this.element.value.length) {\n setElementValue.call(this, value.substring(0, sIdx) + value.substring(sIdx, value.length));\n }\n else {\n setElementValue.call(this, value.substring(0, idx) + value.substring(idx + 1, value.length));\n }\n }\n this.element.selectionStart = this.element.selectionEnd = (chkSupport ||\n this.element.value[idx] !== this.promptChar) ? sIdx : idx;\n }\n addMaskErrorClass.call(this);\n }\n if (key.length === 1 && !ctrl && !isNullOrUndefined(event)) {\n addMaskErrorClass.call(this);\n }\n}\nfunction addMaskErrorClass() {\n const parentElement = this.element.parentNode;\n let timer = 200;\n if (parentElement.classList.contains(INPUTGROUP) || parentElement.classList.contains(FLOATINPUT)) {\n addClass([parentElement], ERROR$1);\n }\n else {\n addClass([this.element], ERROR$1);\n }\n if (this.isIosInvalid === true) {\n timer = 400;\n }\n attributes(this.element, { 'aria-invalid': 'true' });\n setTimeout(() => {\n if (!this.maskKeyPress) {\n removeMaskError.call(this);\n }\n }, timer);\n}\nfunction removeMaskError() {\n const parentElement = this.element.parentNode;\n if (!isNullOrUndefined(parentElement)) {\n removeClass([parentElement], ERROR$1);\n }\n removeClass([this.element], ERROR$1);\n attributes(this.element, { 'aria-invalid': 'false' });\n}\n/**\n * Validates user input using masking elements '<' , '>' and '|'.\n *\n * @hidden\n */\nfunction changeToLowerUpperCase(key, value) {\n let promptMask;\n let i;\n let curVal = value;\n let caseCount = 0;\n for (i = 0; i < this.hiddenMask.length; i++) {\n if (this.hiddenMask[i] === '\\\\') {\n promptMask = curVal.substring(0, i) + '\\\\' + curVal.substring(i, curVal.length);\n }\n if (this.hiddenMask[i] === '>' || this.hiddenMask[i] === '<' || this.hiddenMask[i] === '|') {\n if (this.hiddenMask[i] !== curVal[i]) {\n promptMask = curVal.substring(0, i) + this.hiddenMask[i] + curVal.substring(i, curVal.length);\n }\n ++caseCount;\n }\n if (promptMask) {\n if (((promptMask[i] === this.promptChar) && (i > this.element.selectionStart)) ||\n (this.element.value.indexOf(this.promptChar) < 0 && (this.element.selectionStart + caseCount) === i)) {\n caseCount = 0;\n break;\n }\n curVal = promptMask;\n }\n }\n while (i >= 0 && promptMask) {\n if (i === 0 || promptMask[i - 1] !== '\\\\') {\n if (promptMask[i] === '>') {\n key = key.toUpperCase();\n break;\n }\n else if (promptMask[i] === '<') {\n key = key.toLowerCase();\n break;\n }\n else if (promptMask[i] === '|') {\n break;\n }\n }\n --i;\n }\n return key;\n}\n/**\n * To set updated values in the MaskedTextBox.\n *\n * @hidden\n */\nfunction setMaskValue(val) {\n if (this.mask && val !== undefined && (this.prevValue === undefined || this.prevValue !== val)) {\n this.maskKeyPress = true;\n setElementValue.call(this, this.promptMask);\n if (val !== '' && !(val === null && this.floatLabelType === 'Never' && this.placeholder)) {\n this.element.selectionStart = 0;\n this.element.selectionEnd = 0;\n }\n if (val !== null) {\n for (let i = 0; i < val.length; i++) {\n validateValue.call(this, val[i], false, null);\n }\n }\n const newVal = strippedValue.call(this, this.element);\n this.prevValue = newVal;\n this.value = newVal;\n triggerMaskChangeEvent.call(this, null, null);\n this.maskKeyPress = false;\n const labelElement = this.element.parentNode.querySelector('.e-float-text');\n if (this.element.value === this.promptMask && this.floatLabelType === 'Auto' && this.placeholder &&\n !isNullOrUndefined(labelElement) && labelElement.classList.contains(TOPLABEL) && !this.isFocus) {\n removeClass([labelElement], TOPLABEL);\n addClass([labelElement], BOTTOMLABEL);\n setElementValue.call(this, '');\n }\n }\n if (this.mask === null || this.mask === '' && this.value !== undefined) {\n setElementValue.call(this, this.value);\n }\n}\n/**\n * To set updated values in the input element.\n *\n * @hidden\n */\nfunction setElementValue(val, element) {\n if (!this.isFocus && this.floatLabelType === 'Auto' && this.placeholder && isNullOrUndefined(this.value)) {\n val = '';\n }\n const value = strippedValue.call(this, (element ? element : this.element), val);\n if (value === null || value === '') {\n Input.setValue(val, (element ? element : this.element), this.floatLabelType, false);\n if (this.showClearButton) {\n this.inputObj.clearButton.classList.add('e-clear-icon-hide');\n }\n }\n else {\n Input.setValue(val, (element ? element : this.element), this.floatLabelType, this.showClearButton);\n }\n}\n/**\n * Provide mask support to input textbox through utility method.\n *\n * @hidden\n */\nfunction maskInput(args) {\n const inputEle = getMaskInput(args);\n applyMask.call(inputEle);\n const val = strippedValue.call(this, this.element);\n this.prevValue = val;\n this.value = val;\n if (args.mask) {\n unwireEvents.call(inputEle);\n wireEvents.call(inputEle);\n }\n}\nfunction getMaskInput(args) {\n addClass([args.element], UTILMASK);\n const inputEle = {\n element: args.element,\n mask: args.mask,\n promptMask: '',\n hiddenMask: '',\n escapeMaskValue: '',\n promptChar: args.promptChar ? (args.promptChar.length > 1) ? args.promptChar = args.promptChar[0]\n : args.promptChar : '_',\n value: args.value ? args.value : null,\n regExpCollec: regularExpressions,\n customRegExpCollec: [],\n customCharacters: args.customCharacters,\n undoCollec: [],\n redoCollec: [],\n maskKeyPress: false,\n prevValue: ''\n };\n createMask.call(inputEle);\n return inputEle;\n}\n/**\n * Gets raw value of the textbox which has been masked through utility method.\n *\n * @hidden\n */\nfunction getVal(args) {\n return strippedValue.call(getUtilMaskEle(args), args.element);\n}\n/**\n * Gets masked value of the textbox which has been masked through utility method.\n *\n * @hidden\n */\nfunction getMaskedVal(args) {\n return unstrippedValue.call(getUtilMaskEle(args), args.element);\n}\nfunction getUtilMaskEle(args) {\n let inputEle;\n if (!isNullOrUndefined(args) && args.element.classList.contains(UTILMASK)) {\n inputEle = getMaskInput(args);\n }\n return inputEle;\n}\n/**\n * Arguments to perform undo and redo functionalities.\n *\n * @hidden\n */\nclass MaskUndo {\n}\n\n/* eslint-enable valid-jsdoc, jsdoc/require-jsdoc, jsdoc/require-returns, jsdoc/require-param */\n\n/**\n * MaskedTextbox base modules\n */\n\nvar __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nconst ROOT$1 = 'e-control-wrapper e-mask';\nconst INPUT = 'e-input';\nconst COMPONENT$1 = 'e-maskedtextbox';\nconst CONTROL$1 = 'e-control';\nconst MASKINPUT_FOCUS = 'e-input-focus';\nconst wrapperAttr = ['title', 'style', 'class'];\n/**\n * The MaskedTextBox allows the user to enter the valid input only based on the provided mask.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nlet MaskedTextBox = class MaskedTextBox extends Component {\n /**\n *\n * @param {MaskedTextBoxModel} options - Specifies the MaskedTextBox model.\n * @param {string | HTMLElement | HTMLInputElement} element - Specifies the element to render as component.\n * @private\n */\n constructor(options, element) {\n super(options, element);\n this.initInputValue = '';\n this.isAngular = false;\n this.preventChange = false;\n this.isClicked = false;\n this.maskOptions = options;\n }\n /**\n * Gets the component name.\n *\n * @returns {string} Returns the component name.\n * @private\n */\n getModuleName() {\n return 'maskedtextbox';\n }\n /**\n * Initializes the event handler\n *\n * @returns {void}\n * @private\n */\n preRender() {\n this.promptMask = '';\n this.hiddenMask = '';\n this.escapeMaskValue = '';\n this.regExpCollec = regularExpressions;\n this.customRegExpCollec = [];\n this.undoCollec = [];\n this.redoCollec = [];\n this.changeEventArgs = {};\n this.focusEventArgs = {};\n this.blurEventArgs = {};\n this.maskKeyPress = false;\n this.isFocus = false;\n this.isInitial = false;\n this.isIosInvalid = false;\n const ejInstance = getValue('ej2_instances', this.element);\n this.cloneElement = this.element.cloneNode(true);\n removeClass([this.cloneElement], [CONTROL$1, COMPONENT$1, 'e-lib']);\n this.angularTagName = null;\n this.formElement = closest(this.element, 'form');\n if (this.element.tagName === 'EJS-MASKEDTEXTBOX') {\n this.angularTagName = this.element.tagName;\n const input = this.createElement('input');\n for (let i = 0; i < this.element.attributes.length; i++) {\n input.setAttribute(this.element.attributes[i].nodeName, this.element.attributes[i].nodeValue);\n input.innerHTML = this.element.innerHTML;\n }\n if (this.element.hasAttribute('id')) {\n this.element.removeAttribute('id');\n }\n this.element.classList.remove('e-control', 'e-maskedtextbox');\n this.element.classList.add('e-mask-container');\n this.element.appendChild(input);\n this.element = input;\n setValue('ej2_instances', ejInstance, this.element);\n }\n this.updateHTMLAttrToElement();\n this.checkHtmlAttributes(false);\n if (this.formElement) {\n this.initInputValue = this.value;\n }\n }\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets the properties to be maintained in the persisted state.\n *\n * @returns {string}\n */\n getPersistData() {\n const keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n }\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Initializes the component rendering.\n *\n * @returns {void}\n * @private\n */\n render() {\n if (this.element.tagName.toLowerCase() === 'input') {\n const checkBlazor = isBlazor() && this.isServerRendered;\n if (this.floatLabelType === 'Never') {\n addClass([this.element], INPUT);\n }\n this.createWrapper();\n this.updateHTMLAttrToWrapper();\n if (this.element.name === '') {\n this.element.setAttribute('name', this.element.id);\n }\n this.isInitial = true;\n if (checkBlazor && Browser.isIE === true) {\n setTimeout(() => {\n this.resetMaskedTextBox();\n });\n }\n else {\n this.resetMaskedTextBox();\n }\n this.isInitial = false;\n this.setMaskPlaceholder(true, false);\n this.setWidth(this.width);\n this.preEleVal = this.element.value;\n if (!Browser.isDevice && (Browser.info.version === '11.0' || Browser.info.name === 'edge')) {\n this.element.blur();\n }\n if (Browser.isDevice && Browser.isIos) {\n this.element.blur();\n }\n if (this.element.getAttribute('value') || this.value) {\n this.element.setAttribute('value', this.element.value);\n }\n this.renderComplete();\n }\n }\n updateHTMLAttrToElement() {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (const key of Object.keys(this.htmlAttributes)) {\n if (wrapperAttr.indexOf(key) < 0) {\n this.element.setAttribute(key, this.htmlAttributes[key]);\n }\n }\n }\n }\n updateCssClass(newClass, oldClass) {\n Input.setCssClass(this.getValidClassList(newClass), [this.inputObj.container], this.getValidClassList(oldClass));\n }\n getValidClassList(maskClassName) {\n let result = maskClassName;\n if (!isNullOrUndefined(maskClassName) && maskClassName !== '') {\n result = (maskClassName.replace(/\\s+/g, ' ')).trim();\n }\n return result;\n }\n updateHTMLAttrToWrapper() {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (const key of Object.keys(this.htmlAttributes)) {\n if (wrapperAttr.indexOf(key) > -1) {\n if (key === 'class') {\n const updatedClassValues = (this.htmlAttributes[key].replace(/\\s+/g, ' ')).trim();\n if (updatedClassValues !== '') {\n addClass([this.inputObj.container], updatedClassValues.split(' '));\n }\n }\n else if (key === 'style') {\n let maskStyle = this.inputObj.container.getAttribute(key);\n maskStyle = !isNullOrUndefined(maskStyle) ? (maskStyle + this.htmlAttributes[key]) :\n this.htmlAttributes[key];\n this.inputObj.container.setAttribute(key, maskStyle);\n }\n else {\n this.inputObj.container.setAttribute(key, this.htmlAttributes[key]);\n }\n }\n }\n }\n }\n resetMaskedTextBox() {\n this.promptMask = '';\n this.hiddenMask = '';\n this.escapeMaskValue = '';\n this.customRegExpCollec = [];\n this.undoCollec = [];\n this.redoCollec = [];\n if (this.promptChar.length > 1) {\n this.promptChar = this.promptChar[0];\n }\n createMask.call(this);\n applyMask.call(this);\n if (this.mask === null || this.mask === '' && this.value !== undefined) {\n setElementValue.call(this, this.value);\n }\n const val = strippedValue.call(this, this.element);\n this.prevValue = val;\n this.value = val;\n if (!this.isInitial) {\n unwireEvents.call(this);\n }\n wireEvents.call(this);\n }\n setMaskPlaceholder(setVal, dynamicPlaceholder) {\n if (dynamicPlaceholder || this.placeholder) {\n Input.setPlaceholder(this.placeholder, this.element);\n if ((this.element.value === this.promptMask && setVal && this.floatLabelType !== 'Always') ||\n this.element.value === this.promptMask && this.floatLabelType === 'Never') {\n setElementValue.call(this, '');\n }\n }\n }\n setWidth(width) {\n if (!isNullOrUndefined(width)) {\n if (typeof width === 'number') {\n this.inputObj.container.style.width = formatUnit(width);\n this.element.style.width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n const elementWidth = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));\n this.inputObj.container.style.width = elementWidth;\n this.element.style.width = elementWidth;\n }\n }\n }\n checkHtmlAttributes(isDynamic) {\n const attributes$$1 = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes)\n : ['placeholder', 'disabled', 'value', 'readonly'];\n for (const key of attributes$$1) {\n if (!isNullOrUndefined(this.element.getAttribute(key))) {\n switch (key) {\n case 'placeholder':\n if ((isNullOrUndefined(this.maskOptions) || (this.maskOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.element.placeholder }, !isDynamic);\n }\n break;\n case 'disabled':\n if ((isNullOrUndefined(this.maskOptions) || (this.maskOptions['enabled'] === undefined)) || isDynamic) {\n const isEnabled = this.element.getAttribute(key) === 'disabled' || this.element.getAttribute(key) === '' ||\n this.element.getAttribute(key) === 'true' ? false : true;\n this.setProperties({ enabled: isEnabled }, !isDynamic);\n }\n break;\n case 'value':\n if ((isNullOrUndefined(this.maskOptions) || (this.maskOptions['value'] === undefined)) || isDynamic) {\n this.setProperties({ value: this.element.value }, !isDynamic);\n }\n break;\n case 'readonly':\n if ((isNullOrUndefined(this.maskOptions) || (this.maskOptions['readonly'] === undefined)) || isDynamic) {\n const isReadonly = this.element.getAttribute(key) === 'readonly' || this.element.getAttribute(key) === ''\n || this.element.getAttribute(key) === 'true' ? true : false;\n this.setProperties({ readonly: isReadonly }, !isDynamic);\n }\n break;\n }\n }\n }\n }\n createWrapper() {\n let updatedCssClassValues = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassValues = this.getValidClassList(this.cssClass);\n }\n this.inputObj = Input.createInput({\n element: this.element,\n floatLabelType: this.floatLabelType,\n properties: {\n enableRtl: this.enableRtl,\n cssClass: updatedCssClassValues,\n enabled: this.enabled,\n readonly: this.readonly,\n placeholder: this.placeholder,\n showClearButton: this.showClearButton\n }\n }, this.createElement);\n this.inputObj.container.setAttribute('class', ROOT$1 + ' ' + this.inputObj.container.getAttribute('class'));\n }\n /**\n * Calls internally if any of the property value is changed.\n *\n * @param {MaskedTextBoxModel} newProp - Returns the dynamic property value of the component.\n * @param {MaskedTextBoxModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @hidden\n */\n onPropertyChanged(newProp, oldProp) {\n for (const prop of Object.keys(newProp)) {\n switch (prop) {\n case 'value':\n setMaskValue.call(this, this.value);\n if (this.placeholder) {\n this.setMaskPlaceholder(false, false);\n }\n break;\n case 'placeholder':\n this.setMaskPlaceholder(true, true);\n break;\n case 'width':\n this.setWidth(newProp.width);\n break;\n case 'cssClass':\n this.updateCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n case 'enabled':\n Input.setEnabled(newProp.enabled, this.element, this.floatLabelType, this.inputObj.container);\n break;\n case 'readonly':\n Input.setReadonly(newProp.readonly, this.element);\n break;\n case 'enableRtl':\n Input.setEnableRtl(newProp.enableRtl, [this.inputObj.container]);\n break;\n case 'customCharacters':\n this.customCharacters = newProp.customCharacters;\n this.resetMaskedTextBox();\n break;\n case 'showClearButton':\n Input.setClearButton(newProp.showClearButton, this.element, this.inputObj, undefined, this.createElement);\n bindClearEvent.call(this);\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n Input.removeFloating(this.inputObj);\n Input.addFloating(this.element, this.floatLabelType, this.placeholder, this.createElement);\n break;\n case 'htmlAttributes':\n this.updateHTMLAttrToElement();\n this.updateHTMLAttrToWrapper();\n this.checkHtmlAttributes(true);\n break;\n case 'mask':\n {\n const strippedValue = this.value;\n this.mask = newProp.mask;\n this.updateValue(strippedValue);\n }\n break;\n case 'promptChar': {\n if (newProp.promptChar.length > 1) {\n newProp.promptChar = newProp.promptChar[0];\n }\n if (newProp.promptChar) {\n this.promptChar = newProp.promptChar;\n }\n else {\n this.promptChar = '_';\n }\n let value = this.element.value.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar);\n if (this.promptMask === this.element.value) {\n value = this.promptMask.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar);\n }\n this.promptMask = this.promptMask.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar);\n this.undoCollec = this.redoCollec = [];\n setElementValue.call(this, value);\n break;\n }\n }\n }\n this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;\n }\n updateValue(strippedVal) {\n this.resetMaskedTextBox();\n setMaskValue.call(this, strippedVal);\n }\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets the value of the MaskedTextBox with the masked format.\n * By using `value` property, you can get the raw value of maskedtextbox without literals and prompt characters.\n *\n * @returns {string}\n */\n getMaskedValue() {\n return unstrippedValue.call(this, this.element);\n }\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n focusIn() {\n if (document.activeElement !== this.element && this.enabled) {\n this.element.focus();\n addClass([this.inputObj.container], [MASKINPUT_FOCUS]);\n }\n }\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n focusOut() {\n if (document.activeElement === this.element && this.enabled) {\n this.element.blur();\n removeClass([this.inputObj.container], [MASKINPUT_FOCUS]);\n }\n }\n /**\n * Removes the component from the DOM and detaches all its related event handlers.\n * Also it maintains the initial input element from the DOM.\n *\n * @method destroy\n * @returns {void}\n */\n destroy() {\n unwireEvents.call(this);\n const attrArray = ['aria-labelledby', 'role', 'autocomplete', 'aria-readonly',\n 'autocorrect', 'aria-disabled', 'aria-placeholder', 'autocapitalize',\n 'spellcheck', 'aria-autocomplete',\n 'aria-live', 'aria-valuenow', 'aria-invalid'];\n for (let i = 0; i < attrArray.length; i++) {\n this.element.removeAttribute(attrArray[i]);\n }\n this.element.classList.remove('e-input');\n this.inputObj.container.insertAdjacentElement('afterend', this.element);\n detach(this.inputObj.container);\n super.destroy();\n }\n};\n__decorate$1([\n Property(null)\n], MaskedTextBox.prototype, \"cssClass\", void 0);\n__decorate$1([\n Property(null)\n], MaskedTextBox.prototype, \"width\", void 0);\n__decorate$1([\n Property(null)\n], MaskedTextBox.prototype, \"placeholder\", void 0);\n__decorate$1([\n Property('Never')\n], MaskedTextBox.prototype, \"floatLabelType\", void 0);\n__decorate$1([\n Property({})\n], MaskedTextBox.prototype, \"htmlAttributes\", void 0);\n__decorate$1([\n Property(true)\n], MaskedTextBox.prototype, \"enabled\", void 0);\n__decorate$1([\n Property(false)\n], MaskedTextBox.prototype, \"readonly\", void 0);\n__decorate$1([\n Property(false)\n], MaskedTextBox.prototype, \"showClearButton\", void 0);\n__decorate$1([\n Property(false)\n], MaskedTextBox.prototype, \"enablePersistence\", void 0);\n__decorate$1([\n Property(null)\n], MaskedTextBox.prototype, \"mask\", void 0);\n__decorate$1([\n Property('_')\n], MaskedTextBox.prototype, \"promptChar\", void 0);\n__decorate$1([\n Property(null)\n], MaskedTextBox.prototype, \"value\", void 0);\n__decorate$1([\n Property(null)\n], MaskedTextBox.prototype, \"customCharacters\", void 0);\n__decorate$1([\n Event()\n], MaskedTextBox.prototype, \"created\", void 0);\n__decorate$1([\n Event()\n], MaskedTextBox.prototype, \"destroyed\", void 0);\n__decorate$1([\n Event()\n], MaskedTextBox.prototype, \"change\", void 0);\n__decorate$1([\n Event()\n], MaskedTextBox.prototype, \"focus\", void 0);\n__decorate$1([\n Event()\n], MaskedTextBox.prototype, \"blur\", void 0);\nMaskedTextBox = __decorate$1([\n NotifyPropertyChanges\n], MaskedTextBox);\n\n/**\n * MaskedTextbox modules\n */\n\n/**\n * MaskedTextbox modules\n */\n\n/**\n * Input box Component\n */\n\nvar __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n/**\n * Configures the ticks data of the Slider.\n */\nclass TicksData extends ChildProperty {\n}\n__decorate$2([\n Property('None')\n], TicksData.prototype, \"placement\", void 0);\n__decorate$2([\n Property(10)\n], TicksData.prototype, \"largeStep\", void 0);\n__decorate$2([\n Property(1)\n], TicksData.prototype, \"smallStep\", void 0);\n__decorate$2([\n Property(false)\n], TicksData.prototype, \"showSmallTicks\", void 0);\n__decorate$2([\n Property(null)\n], TicksData.prototype, \"format\", void 0);\n/**\n * It illustrates the color track data in slider.\n * {% codeBlock src='slider/colorrange/index.md' %}{% endcodeBlock %}\n */\nclass ColorRangeData extends ChildProperty {\n}\n__decorate$2([\n Property(null)\n], ColorRangeData.prototype, \"color\", void 0);\n__decorate$2([\n Property(null)\n], ColorRangeData.prototype, \"start\", void 0);\n__decorate$2([\n Property(null)\n], ColorRangeData.prototype, \"end\", void 0);\n/**\n * It illustrates the limit data in slider.\n * {% codeBlock src='slider/limits/index.md' %}{% endcodeBlock %}\n */\nclass LimitData extends ChildProperty {\n}\n__decorate$2([\n Property(false)\n], LimitData.prototype, \"enabled\", void 0);\n__decorate$2([\n Property(null)\n], LimitData.prototype, \"minStart\", void 0);\n__decorate$2([\n Property(null)\n], LimitData.prototype, \"minEnd\", void 0);\n__decorate$2([\n Property(null)\n], LimitData.prototype, \"maxStart\", void 0);\n__decorate$2([\n Property(null)\n], LimitData.prototype, \"maxEnd\", void 0);\n__decorate$2([\n Property(false)\n], LimitData.prototype, \"startHandleFixed\", void 0);\n__decorate$2([\n Property(false)\n], LimitData.prototype, \"endHandleFixed\", void 0);\n/**\n * It illustrates the tooltip data in slider.\n */\nclass TooltipData extends ChildProperty {\n}\n__decorate$2([\n Property('')\n], TooltipData.prototype, \"cssClass\", void 0);\n__decorate$2([\n Property('Before')\n], TooltipData.prototype, \"placement\", void 0);\n__decorate$2([\n Property('Focus')\n], TooltipData.prototype, \"showOn\", void 0);\n__decorate$2([\n Property(false)\n], TooltipData.prototype, \"isVisible\", void 0);\n__decorate$2([\n Property(null)\n], TooltipData.prototype, \"format\", void 0);\nconst bootstrapTooltipOffset = 6;\nconst bootstrap4TooltipOffset = 3;\nconst classNames = {\n root: 'e-slider',\n rtl: 'e-rtl',\n sliderHiddenInput: 'e-slider-input',\n controlWrapper: 'e-control-wrapper',\n sliderHandle: 'e-handle',\n rangeBar: 'e-range',\n sliderButton: 'e-slider-button',\n firstButton: 'e-first-button',\n secondButton: 'e-second-button',\n scale: 'e-scale',\n tick: 'e-tick',\n large: 'e-large',\n tickValue: 'e-tick-value',\n sliderTooltip: 'e-slider-tooltip',\n sliderHover: 'e-slider-hover',\n sliderFirstHandle: 'e-handle-first',\n sliderSecondHandle: 'e-handle-second',\n sliderDisabled: 'e-disabled',\n sliderContainer: 'e-slider-container',\n horizontalTooltipBefore: 'e-slider-horizontal-before',\n horizontalTooltipAfter: 'e-slider-horizontal-after',\n verticalTooltipBefore: 'e-slider-vertical-before',\n verticalTooltipAfter: 'e-slider-vertical-after',\n materialTooltip: 'e-material-tooltip',\n materialTooltipOpen: 'e-material-tooltip-open',\n materialTooltipActive: 'e-tooltip-active',\n materialSlider: 'e-material-slider',\n sliderTrack: 'e-slider-track',\n sliderHorizantalColor: 'e-slider-horizantal-color',\n sliderVerticalColor: 'e-slider-vertical-color',\n sliderHandleFocused: 'e-handle-focused',\n verticalSlider: 'e-vertical',\n horizontalSlider: 'e-horizontal',\n sliderHandleStart: 'e-handle-start',\n sliderTooltipStart: 'e-material-tooltip-start',\n sliderTabHandle: 'e-tab-handle',\n sliderButtonIcon: 'e-button-icon',\n sliderSmallSize: 'e-small-size',\n sliderTickPosition: 'e-tick-pos',\n sliderFirstTick: 'e-first-tick',\n sliderLastTick: 'e-last-tick',\n sliderButtonClass: 'e-slider-btn',\n sliderTooltipWrapper: 'e-tooltip-wrap',\n sliderTabTrack: 'e-tab-track',\n sliderTabRange: 'e-tab-range',\n sliderActiveHandle: 'e-handle-active',\n sliderMaterialHandle: 'e-material-handle',\n sliderMaterialRange: 'e-material-range',\n sliderMaterialDefault: 'e-material-default',\n materialTooltipShow: 'e-material-tooltip-show',\n materialTooltipHide: 'e-material-tooltip-hide',\n readonly: 'e-read-only',\n limits: 'e-limits',\n limitBarDefault: 'e-limit-bar',\n limitBarFirst: 'e-limit-first',\n limitBarSecond: 'e-limit-second',\n dragHorizontal: 'e-drag-horizontal',\n dragVertical: 'e-drag-vertical'\n};\n/**\n * The Slider component allows the user to select a value or range\n * of values in-between a min and max range, by dragging the handle over the slider bar.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nlet Slider = class Slider extends Component {\n constructor(options, element) {\n super(options, element);\n this.horDir = 'left';\n this.verDir = 'bottom';\n this.transition = {\n handle: 'left .4s cubic-bezier(.25, .8, .25, 1), right .4s cubic-bezier(.25, .8, .25, 1), ' +\n 'top .4s cubic-bezier(.25, .8, .25, 1) , bottom .4s cubic-bezier(.25, .8, .25, 1)',\n rangeBar: 'all .4s cubic-bezier(.25, .8, .25, 1)'\n };\n this.transitionOnMaterialTooltip = {\n handle: 'left 1ms ease-out, right 1ms ease-out, bottom 1ms ease-out, top 1ms ease-out',\n rangeBar: 'left 1ms ease-out, right 1ms ease-out, bottom 1ms ease-out, width 1ms ease-out, height 1ms ease-out'\n };\n this.scaleTransform = 'transform .4s cubic-bezier(.25, .8, .25, 1)';\n this.customAriaText = null;\n this.drag = true;\n this.isDragComplete = false;\n this.initialTooltip = true;\n }\n preRender() {\n // eslint-disable-next-line\n const localeText = { incrementTitle: 'Increase', decrementTitle: 'Decrease' };\n this.l10n = new L10n('slider', localeText, this.locale);\n this.isElementFocused = false;\n this.tickElementCollection = [];\n this.tooltipFormatInfo = {};\n this.ticksFormatInfo = {};\n this.initCultureInfo();\n this.initCultureFunc();\n this.formChecker();\n }\n formChecker() {\n const formElement = closest(this.element, 'form');\n if (formElement) {\n this.isForm = true;\n // this condition needs to be checked, if the slider is going to be refreshed by `refresh()`\n // then we need to revert the slider `value` back to `formResetValue` to preserve the initial value\n if (!isNullOrUndefined(this.formResetValue)) {\n this.setProperties({ 'value': this.formResetValue }, true);\n }\n this.formResetValue = this.value;\n if (this.type === 'Range' &&\n (isNullOrUndefined(this.formResetValue) || typeof (this.formResetValue) !== 'object')) {\n this.formResetValue = [parseFloat(formatUnit(this.min)), parseFloat(formatUnit(this.max))];\n }\n else if (isNullOrUndefined(this.formResetValue)) {\n this.formResetValue = parseFloat(formatUnit(this.min));\n }\n this.formElement = formElement;\n }\n else {\n this.isForm = false;\n }\n }\n initCultureFunc() {\n this.internationalization = new Internationalization(this.locale);\n }\n initCultureInfo() {\n this.tooltipFormatInfo.format = (!isNullOrUndefined(this.tooltip.format)) ? this.tooltip.format : null;\n this.ticksFormatInfo.format = (!isNullOrUndefined(this.ticks.format)) ? this.ticks.format : null;\n }\n formatString(value, formatInfo) {\n let formatValue = null;\n let formatString = null;\n if ((value || value === 0)) {\n formatValue = this.formatNumber(value);\n const numberOfDecimals = this.numberOfDecimals(value);\n formatString = this.internationalization.getNumberFormat(formatInfo)(this.makeRoundNumber(value, numberOfDecimals));\n }\n return { elementVal: formatValue, formatString: formatString };\n }\n formatNumber(value) {\n const numberOfDecimals = this.numberOfDecimals(value);\n return this.internationalization.getNumberFormat({\n maximumFractionDigits: numberOfDecimals,\n minimumFractionDigits: numberOfDecimals, useGrouping: false\n })(value);\n }\n numberOfDecimals(value) {\n const decimalPart = value.toString().split('.')[1];\n const numberOfDecimals = !decimalPart || !decimalPart.length ? 0 : decimalPart.length;\n return numberOfDecimals;\n }\n makeRoundNumber(value, precision) {\n const decimals = precision || 0;\n return Number(value.toFixed(decimals));\n }\n fractionalToInteger(value) {\n value = (this.numberOfDecimals(value) === 0) ? Number(value).toFixed(this.noOfDecimals) : value;\n let tens = 1;\n for (let i = 0; i < this.noOfDecimals; i++) {\n tens *= 10;\n }\n value = Number((value * tens).toFixed(0));\n return value;\n }\n /**\n * To Initialize the control rendering\n * @private\n */\n render() {\n this.initialize();\n this.initRender();\n this.wireEvents();\n this.setZindex();\n this.renderComplete();\n }\n initialize() {\n addClass([this.element], classNames.root);\n this.setCSSClass();\n }\n setElementWidth(width) {\n if (!isNullOrUndefined(width)) {\n if (typeof width === 'number') {\n this.sliderContainer.style.width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n this.sliderContainer.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));\n }\n }\n }\n setCSSClass(oldCSSClass) {\n if (oldCSSClass) {\n removeClass([this.element], oldCSSClass.split(' '));\n }\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n }\n }\n setEnabled() {\n if (!this.enabled) {\n addClass([this.sliderContainer], [classNames.sliderDisabled]);\n if (this.tooltip.isVisible && this.tooltipElement && this.tooltip.showOn === 'Always') {\n this.tooltipElement.classList.add(classNames.sliderDisabled);\n }\n this.unwireEvents();\n }\n else {\n removeClass([this.sliderContainer], [classNames.sliderDisabled]);\n if (this.tooltip.isVisible && this.tooltipElement && this.tooltip.showOn === 'Always') {\n this.tooltipElement.classList.remove(classNames.sliderDisabled);\n }\n this.wireEvents();\n }\n }\n getTheme(container) {\n const theme = window.getComputedStyle(container, ':after').getPropertyValue('content');\n return theme.replace(/['\"]+/g, '');\n }\n /**\n * Initialize the rendering\n * @private\n */\n initRender() {\n this.sliderContainer = this.createElement('div', { className: classNames.sliderContainer + ' ' + classNames.controlWrapper });\n this.element.parentNode.insertBefore(this.sliderContainer, this.element);\n this.sliderContainer.appendChild(this.element);\n this.sliderTrack = this.createElement('div', { className: classNames.sliderTrack });\n this.element.appendChild(this.sliderTrack);\n this.setElementWidth(this.width);\n this.element.tabIndex = -1;\n this.getThemeInitialization();\n this.setHandler();\n this.createRangeBar();\n if (this.limits.enabled) {\n this.createLimitBar();\n }\n this.setOrientClass();\n this.hiddenInput = (this.createElement('input', {\n attrs: {\n type: 'hidden', value: (isNullOrUndefined(this.value) ? this.min.toString() : this.value.toString()),\n name: this.element.getAttribute('name') || this.element.getAttribute('id') ||\n '_' + (Math.random() * 1000).toFixed(0) + 'slider', class: classNames.sliderHiddenInput\n }\n }));\n this.hiddenInput.tabIndex = -1;\n this.sliderContainer.appendChild(this.hiddenInput);\n if (this.showButtons) {\n this.setButtons();\n }\n this.setEnableRTL();\n if (this.type === 'Range') {\n this.rangeValueUpdate();\n }\n else {\n this.value = isNullOrUndefined(this.value) ? parseFloat(formatUnit(this.min.toString())) : this.value;\n }\n this.previousVal = this.type !== 'Range' ? this.checkHandleValue(parseFloat(formatUnit(this.value.toString()))) :\n [this.checkHandleValue(parseFloat(formatUnit(this.value[0].toString()))),\n this.checkHandleValue(parseFloat(formatUnit(this.value[1].toString())))];\n this.previousChanged = this.previousVal;\n if (!isNullOrUndefined(this.element.hasAttribute('name'))) {\n this.element.removeAttribute('name');\n }\n this.setValue();\n if (this.limits.enabled) {\n this.setLimitBar();\n }\n if (this.ticks.placement !== 'None') {\n this.renderScale();\n }\n if (this.tooltip.isVisible) {\n this.renderTooltip();\n }\n if (!this.enabled) {\n addClass([this.sliderContainer], [classNames.sliderDisabled]);\n }\n else {\n removeClass([this.sliderContainer], [classNames.sliderDisabled]);\n }\n if (this.readonly) {\n addClass([this.sliderContainer], [classNames.readonly]);\n }\n else {\n removeClass([this.sliderContainer], [classNames.readonly]);\n }\n }\n getThemeInitialization() {\n this.isMaterial = this.getTheme(this.sliderContainer) === 'material'\n || this.getTheme(this.sliderContainer) === 'material-dark';\n this.isBootstrap = this.getTheme(this.sliderContainer) === 'bootstrap'\n || this.getTheme(this.sliderContainer) === 'bootstrap-dark';\n this.isBootstrap4 = this.getTheme(this.sliderContainer) === 'bootstrap4';\n this.isTailwind = this.getTheme(this.sliderContainer) === 'tailwind' || this.getTheme(this.sliderContainer) === 'tailwind-dark';\n this.isMaterialTooltip = this.isMaterial && this.type !== 'Range' && this.tooltip.isVisible;\n }\n createRangeBar() {\n if (this.type !== 'Default') {\n this.rangeBar = (this.createElement('div', { attrs: { class: classNames.rangeBar } }));\n this.element.appendChild(this.rangeBar);\n if (this.drag && this.type === 'Range') {\n if (this.orientation === 'Horizontal') {\n this.rangeBar.classList.add(classNames.dragHorizontal);\n }\n else {\n this.rangeBar.classList.add(classNames.dragVertical);\n }\n }\n }\n }\n createLimitBar() {\n let firstElementClassName = this.type !== 'Range' ? classNames.limitBarDefault :\n classNames.limitBarFirst;\n firstElementClassName += ' ' + classNames.limits;\n this.limitBarFirst = (this.createElement('div', {\n attrs: { class: firstElementClassName }\n }));\n this.element.appendChild(this.limitBarFirst);\n if (this.type === 'Range') {\n this.limitBarSecond = (this.createElement('div', {\n attrs: {\n class: classNames.limitBarSecond + ' ' + classNames.limits\n }\n }));\n this.element.appendChild(this.limitBarSecond);\n }\n }\n setOrientClass() {\n if (this.orientation !== 'Vertical') {\n this.sliderContainer.classList.remove(classNames.verticalSlider);\n this.sliderContainer.classList.add(classNames.horizontalSlider);\n this.firstHandle.setAttribute('aria-orientation', 'horizontal');\n if (this.type === 'Range') {\n this.secondHandle.setAttribute('aria-orientation', 'horizontal');\n }\n }\n else {\n this.sliderContainer.classList.remove(classNames.horizontalSlider);\n this.sliderContainer.classList.add(classNames.verticalSlider);\n this.firstHandle.setAttribute('aria-orientation', 'vertical');\n if (this.type === 'Range') {\n this.secondHandle.setAttribute('aria-orientation', 'vertical');\n }\n }\n }\n setAriaAttributes(element) {\n let min = this.min;\n let max = this.max;\n if (!isNullOrUndefined(this.customValues) && this.customValues.length > 0) {\n min = this.customValues[0];\n max = this.customValues[this.customValues.length - 1];\n }\n if (this.type !== 'Range') {\n attributes(element, {\n 'aria-valuemin': min.toString(), 'aria-valuemax': max.toString()\n });\n }\n else {\n const range = !isNullOrUndefined(this.customValues) && this.customValues.length > 0 ?\n [[min.toString(), (this.customValues[this.value[1]]).toString()],\n [(this.customValues[this.value[0]]).toString(), max.toString()]] :\n [[min.toString(), this.value[1].toString()], [this.value[0].toString(), max.toString()]];\n range.forEach((range, index) => {\n const element = index === 0 ? this.firstHandle : this.secondHandle;\n if (element) {\n attributes(element, {\n 'aria-valuemin': range[0], 'aria-valuemax': range[1]\n });\n }\n });\n }\n }\n createSecondHandle() {\n this.secondHandle = this.createElement('div', {\n attrs: {\n class: classNames.sliderHandle, 'role': 'slider', tabIndex: '0'\n }\n });\n this.secondHandle.classList.add(classNames.sliderSecondHandle);\n this.element.appendChild(this.secondHandle);\n }\n createFirstHandle() {\n this.firstHandle = this.createElement('div', {\n attrs: {\n class: classNames.sliderHandle, 'role': 'slider', tabIndex: '0'\n }\n });\n this.firstHandle.classList.add(classNames.sliderFirstHandle);\n this.element.appendChild(this.firstHandle);\n if (this.isMaterialTooltip) {\n this.materialHandle = this.createElement('div', {\n attrs: {\n class: classNames.sliderHandle + ' ' +\n classNames.sliderMaterialHandle\n }\n });\n this.element.appendChild(this.materialHandle);\n }\n }\n wireFirstHandleEvt(destroy) {\n if (!destroy) {\n EventHandler.add(this.firstHandle, 'mousedown touchstart', this.handleFocus, this);\n EventHandler.add(this.firstHandle, 'transitionend', this.transitionEnd, this);\n EventHandler.add(this.firstHandle, 'mouseenter touchenter', this.handleOver, this);\n EventHandler.add(this.firstHandle, 'mouseleave touchend', this.handleLeave, this);\n }\n else {\n EventHandler.remove(this.firstHandle, 'mousedown touchstart', this.handleFocus);\n EventHandler.remove(this.firstHandle, 'transitionend', this.transitionEnd);\n EventHandler.remove(this.firstHandle, 'mouseenter touchenter', this.handleOver);\n EventHandler.remove(this.firstHandle, 'mouseleave touchend', this.handleLeave);\n }\n }\n wireSecondHandleEvt(destroy) {\n if (!destroy) {\n EventHandler.add(this.secondHandle, 'mousedown touchstart', this.handleFocus, this);\n EventHandler.add(this.secondHandle, 'transitionend', this.transitionEnd, this);\n EventHandler.add(this.secondHandle, 'mouseenter touchenter', this.handleOver, this);\n EventHandler.add(this.secondHandle, 'mouseleave touchend', this.handleLeave, this);\n }\n else {\n EventHandler.remove(this.secondHandle, 'mousedown touchstart', this.handleFocus);\n EventHandler.remove(this.secondHandle, 'transitionend', this.transitionEnd);\n EventHandler.remove(this.secondHandle, 'mouseenter touchenter', this.handleOver);\n EventHandler.remove(this.secondHandle, 'mouseleave touchend', this.handleLeave);\n }\n }\n handleStart() {\n if (this.type !== 'Range') {\n this.firstHandle.classList[this.handlePos1 === 0 ? 'add' : 'remove'](classNames.sliderHandleStart);\n if (this.isMaterialTooltip) {\n this.materialHandle.classList[this.handlePos1 === 0 ? 'add' : 'remove'](classNames.sliderHandleStart);\n if (this.tooltipElement) {\n this.tooltipElement.classList[this.handlePos1 === 0 ? 'add' : 'remove'](classNames.sliderTooltipStart);\n }\n }\n }\n }\n transitionEnd(e) {\n if (e.propertyName !== 'transform') {\n this.handleStart();\n this.getHandle().style.transition = 'none';\n if (this.type !== 'Default') {\n this.rangeBar.style.transition = 'none';\n }\n if (this.isMaterial && this.tooltip.isVisible && this.type === 'Default') {\n this.tooltipElement.style.transition = this.transition.handle;\n }\n this.tooltipToggle(this.getHandle());\n this.closeTooltip();\n }\n }\n handleFocusOut() {\n if (this.firstHandle.classList.contains(classNames.sliderHandleFocused)) {\n this.firstHandle.classList.remove(classNames.sliderHandleFocused);\n }\n if (this.type === 'Range') {\n if (this.secondHandle.classList.contains(classNames.sliderHandleFocused)) {\n this.secondHandle.classList.remove(classNames.sliderHandleFocused);\n }\n }\n }\n handleFocus(e) {\n this.focusSliderElement();\n this.sliderBarClick(e);\n if (e.currentTarget === this.firstHandle) {\n this.firstHandle.classList.add(classNames.sliderHandleFocused);\n }\n else {\n this.secondHandle.classList.add(classNames.sliderHandleFocused);\n }\n EventHandler.add(document, 'mousemove touchmove', this.sliderBarMove, this);\n EventHandler.add(document, 'mouseup touchend', this.sliderBarUp, this);\n }\n handleOver(e) {\n if (this.tooltip.isVisible && this.tooltip.showOn === 'Hover') {\n this.tooltipToggle(e.currentTarget);\n }\n if (this.type === 'Default') {\n this.tooltipToggle(this.getHandle());\n }\n }\n handleLeave(e) {\n if (this.tooltip.isVisible && this.tooltip.showOn === 'Hover' &&\n !e.currentTarget.classList.contains(classNames.sliderHandleFocused) &&\n !e.currentTarget.classList.contains(classNames.sliderTabHandle)) {\n this.closeTooltip();\n }\n }\n setHandler() {\n if (this.min > this.max) {\n this.min = this.max;\n }\n this.createFirstHandle();\n if (this.type === 'Range') {\n this.createSecondHandle();\n }\n }\n setEnableRTL() {\n this.enableRtl && this.orientation !== 'Vertical' ? addClass([this.sliderContainer], classNames.rtl) :\n removeClass([this.sliderContainer], classNames.rtl);\n let preDir = (this.orientation !== 'Vertical') ? this.horDir : this.verDir;\n if (this.enableRtl) {\n this.horDir = 'right';\n this.verDir = 'bottom';\n }\n else {\n this.horDir = 'left';\n this.verDir = 'bottom';\n }\n let currDir = (this.orientation !== 'Vertical') ? this.horDir : this.verDir;\n if (preDir !== currDir) {\n if (this.orientation === 'Horizontal') {\n setStyleAttribute(this.firstHandle, { 'right': '', 'left': 'auto' });\n if (this.type === 'Range') {\n setStyleAttribute(this.secondHandle, { 'top': '', 'left': 'auto' });\n }\n }\n }\n this.setBarColor();\n }\n tooltipValue() {\n let text;\n const args = {\n value: this.value,\n text: ''\n };\n if (this.initialTooltip) {\n this.initialTooltip = false;\n this.setTooltipContent();\n args.text = text = this.tooltipObj.content;\n this.trigger('tooltipChange', args, (observedArgs) => {\n this.addTooltipClass(observedArgs.text);\n if (text !== observedArgs.text) {\n this.customAriaText = observedArgs.text;\n this.tooltipObj.content = observedArgs.text;\n this.setAriaAttrValue(this.firstHandle);\n if (this.type === 'Range') {\n this.setAriaAttrValue(this.secondHandle);\n }\n }\n });\n if (this.isMaterialTooltip) {\n this.setPreviousVal('change', this.value);\n }\n }\n }\n setTooltipContent() {\n let content;\n content = this.formatContent(this.tooltipFormatInfo, false);\n this.tooltipObj.content = content;\n }\n formatContent(formatInfo, ariaContent) {\n let content = '';\n let handle1 = this.handleVal1;\n let handle2 = this.handleVal2;\n if (!isNullOrUndefined(this.customValues) && this.customValues.length > 0) {\n handle1 = this.customValues[this.handleVal1];\n handle2 = this.customValues[this.handleVal2];\n }\n if (!ariaContent) {\n if (this.type === 'Range') {\n if (this.enableRtl && this.orientation !== 'Vertical') {\n content = (!isNullOrUndefined(formatInfo.format)) ? (this.formatString(handle2, formatInfo)\n .formatString + ' - ' + this.formatString(handle1, formatInfo).formatString) :\n (handle2.toString() + ' - ' + handle1.toString());\n }\n else {\n content = (!isNullOrUndefined(formatInfo.format)) ? (this.formatString(handle1, formatInfo)\n .formatString + ' - ' + this.formatString(handle2, formatInfo).formatString) :\n (handle1.toString() + ' - ' + handle2.toString());\n }\n }\n else {\n if (!isNullOrUndefined(handle1)) {\n content = (!isNullOrUndefined(formatInfo.format)) ?\n this.formatString(handle1, formatInfo).formatString : handle1.toString();\n }\n }\n return content;\n }\n else {\n if (this.type === 'Range') {\n if (this.enableRtl && this.orientation !== 'Vertical') {\n content = (!isNullOrUndefined(this.tooltip) && !isNullOrUndefined(this.tooltip.format)) ?\n (this.formatString(handle2, formatInfo).elementVal + ' - ' +\n this.formatString(handle1, formatInfo).elementVal) :\n (handle2.toString() + ' - ' + handle1.toString());\n }\n else {\n content = (!isNullOrUndefined(this.tooltip) && !isNullOrUndefined(this.tooltip.format)) ?\n (this.formatString(handle1, formatInfo).elementVal + ' - ' +\n this.formatString(handle2, formatInfo).elementVal) :\n (handle1.toString() + ' - ' + handle2.toString());\n }\n }\n else {\n if (!isNullOrUndefined(handle1)) {\n content = (!isNullOrUndefined(this.tooltip) && !isNullOrUndefined(this.tooltip.format)) ?\n this.formatString(handle1, formatInfo).elementVal : handle1.toString();\n }\n }\n return content;\n }\n }\n addTooltipClass(content) {\n if (this.isMaterialTooltip) {\n let count = content.toString().length;\n if (!this.tooltipElement) {\n let cssClass = count > 4 ? classNames.sliderMaterialRange : classNames.sliderMaterialDefault;\n this.tooltipObj.cssClass = classNames.sliderTooltip + ' ' + cssClass;\n }\n else {\n let cssClass = count > 4 ?\n { oldCss: classNames.sliderMaterialDefault, newCss: classNames.sliderMaterialRange } :\n { oldCss: classNames.sliderMaterialRange, newCss: classNames.sliderMaterialDefault };\n this.tooltipElement.classList.remove(cssClass.oldCss);\n if (!this.tooltipElement.classList.contains(cssClass.newCss)) {\n this.tooltipElement.classList.add(cssClass.newCss);\n this.tooltipElement.style.transform = count > 4 ? 'scale(1)' :\n this.getTooltipTransformProperties(this.previousTooltipClass).rotate;\n }\n }\n }\n }\n tooltipPlacement() {\n return this.orientation === 'Horizontal' ? (this.tooltip.placement === 'Before' ? 'TopCenter' : 'BottomCenter') :\n (this.tooltip.placement === 'Before' ? 'LeftCenter' : 'RightCenter');\n }\n tooltipBeforeOpen(args) {\n this.tooltipElement = args.element;\n if (this.tooltip.cssClass) {\n addClass([this.tooltipElement], this.tooltip.cssClass.split(' ').filter((css) => css));\n }\n args.target.removeAttribute('aria-describedby');\n if (this.isMaterialTooltip) {\n this.tooltipElement.firstElementChild.classList.add(classNames.materialTooltipHide);\n this.handleStart();\n this.setTooltipTransform();\n }\n }\n tooltipCollision(position) {\n if (this.isBootstrap || this.isBootstrap4 || (this.isMaterial && !this.isMaterialTooltip)) {\n const tooltipOffsetValue = this.isBootstrap4 ? bootstrap4TooltipOffset : bootstrapTooltipOffset;\n switch (position) {\n case 'TopCenter':\n this.tooltipObj.setProperties({ 'offsetY': -(tooltipOffsetValue) }, false);\n break;\n case 'BottomCenter':\n this.tooltipObj.setProperties({ 'offsetY': tooltipOffsetValue }, false);\n break;\n case 'LeftCenter':\n this.tooltipObj.setProperties({ 'offsetX': -(tooltipOffsetValue) }, false);\n break;\n case 'RightCenter':\n this.tooltipObj.setProperties({ 'offsetX': tooltipOffsetValue }, false);\n break;\n }\n }\n }\n materialTooltipEventCallBack(event) {\n this.sliderBarClick(event);\n EventHandler.add(document, 'mousemove touchmove', this.sliderBarMove, this);\n EventHandler.add(document, 'mouseup touchend', this.sliderBarUp, this);\n }\n wireMaterialTooltipEvent(destroy) {\n if (this.isMaterialTooltip) {\n if (!destroy) {\n EventHandler.add(this.tooltipElement, 'mousedown touchstart', this.materialTooltipEventCallBack, this);\n }\n else {\n EventHandler.remove(this.tooltipElement, 'mousedown touchstart', this.materialTooltipEventCallBack);\n }\n }\n }\n tooltipPositionCalculation(position) {\n let cssClass;\n switch (position) {\n case 'TopCenter':\n cssClass = classNames.horizontalTooltipBefore;\n break;\n case 'BottomCenter':\n cssClass = classNames.horizontalTooltipAfter;\n break;\n case 'LeftCenter':\n cssClass = classNames.verticalTooltipBefore;\n break;\n case 'RightCenter':\n cssClass = classNames.verticalTooltipAfter;\n break;\n }\n return cssClass;\n }\n getTooltipTransformProperties(className) {\n let transformProperties;\n if (this.tooltipElement) {\n let position = this.orientation === 'Horizontal' ?\n ((this.tooltipElement.clientHeight + 14) - (this.tooltipElement.clientHeight / 2)) :\n ((this.tooltipElement.clientWidth + 14) - (this.tooltipElement.clientWidth / 2));\n transformProperties = this.orientation === 'Horizontal' ?\n (className === classNames.horizontalTooltipBefore ? { rotate: 'rotate(45deg)', translate: `translateY(${position}px)` } :\n { rotate: 'rotate(225deg)', translate: `translateY(${-(position)}px)` }) :\n (className === classNames.verticalTooltipBefore ? { rotate: 'rotate(-45deg)', translate: `translateX(${position}px)` } :\n { rotate: 'rotate(-225deg)', translate: `translateX(${(-position)}px)` });\n }\n return transformProperties;\n }\n openMaterialTooltip() {\n if (this.isMaterialTooltip) {\n this.refreshTooltip(this.firstHandle);\n let tooltipContentElement = this.tooltipElement.firstElementChild;\n tooltipContentElement.classList.remove(classNames.materialTooltipHide);\n tooltipContentElement.classList.add(classNames.materialTooltipShow);\n this.firstHandle.style.cursor = 'default';\n this.tooltipElement.style.transition = this.scaleTransform;\n this.tooltipElement.classList.add(classNames.materialTooltipOpen);\n this.materialHandle.style.transform = 'scale(0)';\n if (tooltipContentElement.innerText.length > 4) {\n this.tooltipElement.style.transform = 'scale(1)';\n }\n else {\n this.tooltipElement.style.transform = this.getTooltipTransformProperties(this.previousTooltipClass).rotate;\n }\n if (this.type === 'Default') {\n setTimeout(() => { this.tooltipElement.style.transition = this.transition.handle; }, 2500);\n }\n else {\n setTimeout(() => { this.tooltipElement.style.transition = 'none'; }, 2500);\n }\n }\n }\n closeMaterialTooltip() {\n if (this.isMaterialTooltip) {\n let tooltipContentElement = this.tooltipElement.firstElementChild;\n this.tooltipElement.style.transition = this.scaleTransform;\n tooltipContentElement.classList.remove(classNames.materialTooltipShow);\n tooltipContentElement.classList.add(classNames.materialTooltipHide);\n this.firstHandle.style.cursor = '-webkit-grab';\n this.firstHandle.style.cursor = 'grab';\n if (this.materialHandle) {\n this.materialHandle.style.transform = 'scale(1)';\n }\n this.tooltipElement.classList.remove(classNames.materialTooltipOpen);\n this.setTooltipTransform();\n this.tooltipTarget = undefined;\n setTimeout(() => { this.tooltipElement.style.transition = 'none'; }, 2500);\n }\n }\n checkTooltipPosition(args) {\n let tooltipClass = this.tooltipPositionCalculation(args.collidedPosition);\n if (this.tooltipCollidedPosition === undefined ||\n this.tooltipCollidedPosition !== args.collidedPosition || !args.element.classList.contains(tooltipClass)) {\n if (this.isMaterialTooltip) {\n if (tooltipClass !== undefined) {\n args.element.classList.remove(this.previousTooltipClass);\n args.element.classList.add(tooltipClass);\n this.previousTooltipClass = tooltipClass;\n }\n if (args.element.style.transform && args.element.classList.contains(classNames.materialTooltipOpen) &&\n args.element.firstElementChild.innerText.length <= 4) {\n args.element.style.transform = this.getTooltipTransformProperties(this.previousTooltipClass).rotate;\n }\n }\n this.tooltipCollidedPosition = args.collidedPosition;\n }\n if (this.isMaterialTooltip && this.tooltipElement && this.tooltipElement.style.transform.indexOf('translate') !== -1) {\n this.setTooltipTransform();\n }\n }\n setTooltipTransform() {\n let transformProperties = this.getTooltipTransformProperties(this.previousTooltipClass);\n if (this.tooltipElement.firstElementChild.innerText.length > 4) {\n this.tooltipElement.style.transform = `${transformProperties.translate} scale(0.01)`;\n }\n else {\n this.tooltipElement.style.transform = `${transformProperties.translate} ${transformProperties.rotate} scale(0.01)`;\n }\n }\n renderTooltip() {\n this.tooltipObj = new Tooltip({\n showTipPointer: this.isBootstrap || this.isMaterial || this.isBootstrap4 || this.isTailwind,\n cssClass: classNames.sliderTooltip,\n height: this.isMaterial ? 30 : 'auto',\n animation: { open: { effect: 'None' }, close: { effect: 'FadeOut', duration: 500 } },\n opensOn: 'Custom',\n beforeOpen: this.tooltipBeforeOpen.bind(this),\n beforeCollision: this.checkTooltipPosition.bind(this),\n beforeClose: this.tooltipBeforeClose.bind(this),\n enableHtmlSanitizer: this.enableHtmlSanitizer\n });\n this.tooltipObj.appendTo(this.firstHandle);\n this.initializeTooltipProps();\n }\n initializeTooltipProps() {\n let tooltipShowOn = this.isMaterialTooltip ? 'Always' : (this.tooltip.showOn === 'Auto' ? 'Hover' : this.tooltip.showOn);\n this.setProperties({ tooltip: { showOn: tooltipShowOn } }, true);\n this.tooltipObj.position = this.tooltipPlacement();\n this.tooltipCollision(this.tooltipObj.position);\n [this.firstHandle, this.rangeBar, this.secondHandle].forEach((handle) => {\n if (!isNullOrUndefined(handle)) {\n handle.style.transition = 'none';\n }\n });\n if (this.isMaterialTooltip) {\n this.sliderContainer.classList.add(classNames.materialSlider);\n this.tooltipValue();\n this.tooltipObj.animation.close.effect = 'None';\n this.tooltipObj.open(this.firstHandle);\n }\n }\n tooltipBeforeClose() {\n this.tooltipElement = undefined;\n this.tooltipCollidedPosition = undefined;\n }\n setButtons() {\n this.firstBtn = this.createElement('div', { className: classNames.sliderButton + ' ' + classNames.firstButton });\n this.firstBtn.appendChild(this.createElement('span', { className: classNames.sliderButtonIcon }));\n if (this.isTailwind) {\n this.firstBtn.querySelector('span').classList.add('e-icons');\n }\n this.firstBtn.tabIndex = -1;\n this.secondBtn = this.createElement('div', { className: classNames.sliderButton + ' ' + classNames.secondButton });\n this.secondBtn.appendChild(this.createElement('span', { className: classNames.sliderButtonIcon }));\n if (this.isTailwind) {\n this.secondBtn.querySelector('span').classList.add('e-icons');\n }\n this.secondBtn.tabIndex = -1;\n this.sliderContainer.classList.add(classNames.sliderButtonClass);\n this.sliderContainer.appendChild(this.firstBtn);\n this.sliderContainer.appendChild(this.secondBtn);\n this.sliderContainer.appendChild(this.element);\n this.buttonTitle();\n }\n buttonTitle() {\n let enabledRTL = this.enableRtl && this.orientation !== 'Vertical';\n this.l10n.setLocale(this.locale);\n let decrementTitle = this.l10n.getConstant('decrementTitle');\n let incrementTitle = this.l10n.getConstant('incrementTitle');\n attributes(enabledRTL ? this.secondBtn : this.firstBtn, { 'aria-label': decrementTitle, title: decrementTitle });\n attributes(enabledRTL ? this.firstBtn : this.secondBtn, { 'aria-label': incrementTitle, title: incrementTitle });\n }\n buttonFocusOut() {\n if (this.isMaterial) {\n this.getHandle().classList.remove('e-large-thumb-size');\n }\n }\n repeatButton(args) {\n let hVal = this.handleValueUpdate();\n let enabledRTL = this.enableRtl && this.orientation !== 'Vertical';\n let value;\n if (args.target.parentElement.classList.contains(classNames.firstButton)\n || args.target.classList.contains(classNames.firstButton)) {\n enabledRTL ? (value = this.add(hVal, parseFloat(this.step.toString()), true)) :\n (value = this.add(hVal, parseFloat(this.step.toString()), false));\n }\n else if (args.target.parentElement.classList.contains(classNames.secondButton)\n || (args.target.classList.contains(classNames.secondButton))) {\n enabledRTL ? (value = this.add(hVal, parseFloat(this.step.toString()), false)) :\n (value = this.add(hVal, parseFloat(this.step.toString()), true));\n }\n if (this.limits.enabled) {\n value = this.getLimitCorrectedValues(value);\n }\n if (value >= this.min && value <= this.max) {\n this.changeHandleValue(value);\n this.tooltipToggle(this.getHandle());\n }\n }\n repeatHandlerMouse(args) {\n args.preventDefault();\n if (args.type === ('mousedown') || args.type === ('touchstart')) {\n this.buttonClick(args);\n this.repeatInterval = setInterval(this.repeatButton.bind(this), 180, args);\n }\n }\n materialChange() {\n if (!this.getHandle().classList.contains('e-large-thumb-size')) {\n this.getHandle().classList.add('e-large-thumb-size');\n }\n }\n repeatHandlerUp(e) {\n this.changeEvent('changed', e);\n this.closeTooltip();\n clearInterval(this.repeatInterval);\n this.getHandle().focus();\n }\n customTickCounter(bigNum) {\n let tickCount = 4;\n if (!isNullOrUndefined(this.customValues) && this.customValues.length > 0) {\n if (bigNum > 4) {\n tickCount = 3;\n }\n if (bigNum > 7) {\n tickCount = 2;\n }\n if (bigNum > 14) {\n tickCount = 1;\n }\n if (bigNum > 28) {\n tickCount = 0;\n }\n }\n return tickCount;\n }\n // tslint:disable-next-line:max-func-body-length\n renderScale() {\n let orien = this.orientation === 'Vertical' ? 'v' : 'h';\n this.noOfDecimals = this.numberOfDecimals(this.step);\n this.ul = this.createElement('ul', {\n className: classNames.scale + ' ' + 'e-' + orien + '-scale ' + classNames.tick + '-' + this.ticks.placement.toLowerCase(),\n attrs: { role: 'presentation', tabIndex: '-1', 'aria-hidden': 'true' }\n });\n this.ul.style.zIndex = '-1';\n if (Browser.isAndroid && orien === 'h') {\n this.ul.classList.add(classNames.sliderTickPosition);\n }\n let smallStep = this.ticks.smallStep;\n if (!this.ticks.showSmallTicks) {\n this.ticks.largeStep > 0 ? (smallStep = this.ticks.largeStep) :\n (smallStep = (parseFloat(formatUnit(this.max))) - (parseFloat(formatUnit(this.min))));\n }\n else if (smallStep <= 0) {\n smallStep = parseFloat(formatUnit(this.step));\n }\n let min = this.fractionalToInteger(this.min);\n let max = this.fractionalToInteger(this.max);\n let steps = this.fractionalToInteger(smallStep);\n let bigNum = !isNullOrUndefined(this.customValues) && this.customValues.length > 0 && this.customValues.length - 1;\n let customStep = this.customTickCounter(bigNum);\n let count = !isNullOrUndefined(this.customValues) && this.customValues.length > 0 ?\n (bigNum * customStep) + bigNum : Math.abs((max - min) / steps);\n this.element.appendChild(this.ul);\n let li;\n let start = parseFloat(this.min.toString());\n if (orien === 'v') {\n start = parseFloat(this.max.toString());\n }\n let left = 0;\n let islargeTick;\n let tickWidth = 100 / count;\n if (tickWidth === Infinity) {\n tickWidth = 5;\n }\n for (let i = 0, y = !isNullOrUndefined(this.customValues) && this.customValues.length > 0 ?\n this.customValues.length - 1 : 0, k = 0; i <= count; i++) {\n li = (this.createElement('li', {\n attrs: {\n class: classNames.tick, role: 'presentation', tabIndex: '-1',\n 'aria-hidden': 'true'\n }\n }));\n if (!isNullOrUndefined(this.customValues) && this.customValues.length > 0) {\n islargeTick = i % (customStep + 1) === 0;\n if (islargeTick) {\n if (orien === 'h') {\n start = this.customValues[k];\n k++;\n }\n else {\n start = this.customValues[y];\n y--;\n }\n li.setAttribute('title', start.toString());\n }\n }\n else {\n li.setAttribute('title', start.toString());\n if (this.numberOfDecimals(this.max) === 0 && this.numberOfDecimals(this.min) === 0 &&\n this.numberOfDecimals(this.step) === 0) {\n if (orien === 'h') {\n islargeTick = ((start - parseFloat(this.min.toString())) % this.ticks.largeStep === 0) ? true : false;\n }\n else {\n islargeTick = (Math.abs(start - parseFloat(this.max.toString())) % this.ticks.largeStep === 0) ? true : false;\n }\n }\n else {\n let largestep = this.fractionalToInteger(this.ticks.largeStep);\n let startValue = this.fractionalToInteger(start);\n if (orien === 'h') {\n islargeTick = ((startValue - min) % largestep === 0) ? true : false;\n }\n else {\n islargeTick = (Math.abs(startValue - parseFloat(max.toString())) % largestep === 0) ? true : false;\n }\n }\n }\n if (islargeTick) {\n li.classList.add(classNames.large);\n }\n (orien === 'h') ? (li.style.width = tickWidth + '%') : (li.style.height = tickWidth + '%');\n let repeat = islargeTick ? (this.ticks.placement === 'Both' ? 2 : 1) : 0;\n if (islargeTick) {\n for (let j = 0; j < repeat; j++) {\n this.createTick(li, start, tickWidth);\n }\n }\n else if (isNullOrUndefined(this.customValues)) {\n this.formatTicksValue(li, start);\n }\n this.ul.appendChild(li);\n this.tickElementCollection.push(li);\n let decimalPoints;\n if (isNullOrUndefined(this.customValues)) {\n if (this.numberOfDecimals(smallStep) > this.numberOfDecimals(start)) {\n decimalPoints = this.numberOfDecimals(smallStep);\n }\n else {\n decimalPoints = this.numberOfDecimals(start);\n }\n if (orien === 'h') {\n start = this.makeRoundNumber(start + smallStep, decimalPoints);\n }\n else {\n start = this.makeRoundNumber(start - smallStep, decimalPoints);\n }\n left = this.makeRoundNumber(left + smallStep, decimalPoints);\n }\n }\n this.ticksAlignment(orien, tickWidth);\n }\n ticksAlignment(orien, tickWidth, triggerEvent = true) {\n this.firstChild = this.ul.firstElementChild;\n this.lastChild = this.ul.lastElementChild;\n this.firstChild.classList.add(classNames.sliderFirstTick);\n this.lastChild.classList.add(classNames.sliderLastTick);\n this.sliderContainer.classList.add(classNames.scale + '-' + this.ticks.placement.toLowerCase());\n if (orien === 'h') {\n this.firstChild.style.width = tickWidth / 2 + '%';\n this.lastChild.style.width = tickWidth / 2 + '%';\n }\n else {\n this.firstChild.style.height = tickWidth / 2 + '%';\n this.lastChild.style.height = tickWidth / 2 + '%';\n }\n let eventArgs = { ticksWrapper: this.ul, tickElements: this.tickElementCollection };\n if (triggerEvent) {\n this.trigger('renderedTicks', eventArgs);\n }\n this.scaleAlignment();\n }\n createTick(li, start, tickWidth) {\n let span = this.createElement('span', {\n className: classNames.tickValue + ' ' + classNames.tick + '-' + this.ticks.placement.toLowerCase(),\n attrs: { role: 'presentation', tabIndex: '-1', 'aria-hidden': 'true' }\n });\n li.appendChild(span);\n if (isNullOrUndefined(this.customValues)) {\n this.formatTicksValue(li, start, span, tickWidth);\n }\n else {\n if (this.enableHtmlSanitizer) {\n span.innerHTML = SanitizeHtmlHelper.sanitize(start.toString());\n }\n else {\n span.innerHTML = start.toString();\n }\n }\n }\n formatTicksValue(li, start, spanElement, tickWidth) {\n const tickText = this.formatNumber(start);\n const text = !isNullOrUndefined(this.ticks) && !isNullOrUndefined(this.ticks.format) ?\n this.formatString(start, this.ticksFormatInfo).formatString : tickText;\n const eventArgs = { value: start, text: text, tickElement: li };\n this.trigger('renderingTicks', eventArgs, (observedArgs) => {\n li.setAttribute('title', observedArgs.text.toString());\n if (spanElement) {\n if (this.enableHtmlSanitizer) {\n spanElement.innerHTML = SanitizeHtmlHelper.sanitize(observedArgs.text.toString());\n }\n else {\n spanElement.innerHTML = observedArgs.text.toString();\n }\n }\n });\n }\n scaleAlignment() {\n this.tickValuePosition();\n let orien = this.orientation === 'Vertical' ? 'v' : 'h';\n if (this.orientation === 'Vertical') {\n (this.element.getBoundingClientRect().width <= 15) ?\n this.sliderContainer.classList.add(classNames.sliderSmallSize) :\n this.sliderContainer.classList.remove(classNames.sliderSmallSize);\n }\n else {\n (this.element.getBoundingClientRect().height <= 15) ?\n this.sliderContainer.classList.add(classNames.sliderSmallSize) :\n this.sliderContainer.classList.remove(classNames.sliderSmallSize);\n }\n }\n tickValuePosition() {\n this.firstChild = this.element.querySelector('ul').children[0];\n let first = this.firstChild.getBoundingClientRect();\n let firstChild;\n let otherChild;\n let smallStep = this.ticks.smallStep;\n let count = Math.abs((parseFloat(formatUnit(this.max))) - (parseFloat(formatUnit(this.min)))) / smallStep;\n if (this.firstChild.children.length > 0) {\n firstChild = this.firstChild.children[0].getBoundingClientRect();\n }\n let tickElements = [this.sliderContainer.querySelectorAll('.' + classNames.tick + '.' +\n classNames.large + ' .' + classNames.tickValue)];\n let other;\n if (this.ticks.placement === 'Both') {\n other = [].slice.call(tickElements[0], 2);\n }\n else {\n other = [].slice.call(tickElements[0], 1);\n }\n let tickWidth = this.orientation === 'Vertical' ?\n (first.height * 2) : (first.width * 2);\n for (let i = 0; i < this.firstChild.children.length; i++) {\n if (this.orientation === 'Vertical') {\n this.firstChild.children[i].style.top = -(firstChild.height / 2) + 'px';\n }\n else {\n if (!this.enableRtl) {\n this.firstChild.children[i].style.left = -(firstChild.width / 2) + 'px';\n }\n else {\n this.firstChild.children[i].style.left = (tickWidth -\n this.firstChild.children[i].getBoundingClientRect().width) / 2 + 'px';\n }\n }\n }\n for (let i = 0; i < other.length; i++) {\n otherChild = other[i].getBoundingClientRect();\n if (this.orientation === 'Vertical') {\n setStyleAttribute(other[i], { top: (tickWidth - otherChild.height) / 2 + 'px' });\n }\n else {\n setStyleAttribute(other[i], { left: (tickWidth - otherChild.width) / 2 + 'px' });\n }\n }\n if (this.enableRtl && this.lastChild.children.length && count !== 0) {\n this.lastChild.children[0].style.left = -(this.lastChild.getBoundingClientRect().width / 2) + 'px';\n if (this.ticks.placement === 'Both') {\n this.lastChild.children[1].style.left = -(this.lastChild.getBoundingClientRect().width / 2) + 'px';\n }\n }\n if (count === 0) {\n if (this.orientation === 'Horizontal') {\n if (!this.enableRtl) {\n this.firstChild.classList.remove(classNames.sliderLastTick);\n this.firstChild.style.left = this.firstHandle.style.left;\n }\n else {\n this.firstChild.classList.remove(classNames.sliderLastTick);\n this.firstChild.style.right = this.firstHandle.style.right;\n this.firstChild.children[0].style.left =\n (this.firstChild.getBoundingClientRect().width / 2) + 2 + 'px';\n if (this.ticks.placement === 'Both') {\n this.firstChild.children[1].style.left =\n (this.firstChild.getBoundingClientRect().width / 2) + 2 + 'px';\n }\n }\n }\n if (this.orientation === 'Vertical') {\n this.firstChild.classList.remove(classNames.sliderLastTick);\n }\n }\n }\n setAriaAttrValue(element) {\n let ariaValueText;\n const isTickFormatted = ((!isNullOrUndefined(this.ticks) && !isNullOrUndefined(this.ticks.format))) ? true : false;\n let text = !isTickFormatted ?\n this.formatContent(this.ticksFormatInfo, false) : this.formatContent(this.tooltipFormatInfo, false);\n const valuenow = isTickFormatted ? this.formatContent(this.ticksFormatInfo, true) :\n this.formatContent(this.tooltipFormatInfo, true);\n text = (!this.customAriaText) ? (text) : (this.customAriaText);\n if (text.split(' - ').length === 2) {\n ariaValueText = text.split(' - ');\n }\n else {\n ariaValueText = [text, text];\n }\n this.setAriaAttributes(element);\n if (this.type !== 'Range') {\n attributes(element, { 'aria-valuenow': valuenow, 'aria-valuetext': text });\n }\n else {\n // eslint-disable-next-line\n (!this.enableRtl) ? ((element === this.firstHandle) ?\n attributes(element, { 'aria-valuenow': valuenow.split(' - ')[0], 'aria-valuetext': ariaValueText[0] }) :\n attributes(element, { 'aria-valuenow': valuenow.split(' - ')[1], 'aria-valuetext': ariaValueText[1] })) :\n ((element === this.firstHandle) ?\n attributes(element, { 'aria-valuenow': valuenow.split(' - ')[1], 'aria-valuetext': ariaValueText[1] }) :\n attributes(element, { 'aria-valuenow': valuenow.split(' - ')[0], 'aria-valuetext': ariaValueText[0] }));\n }\n }\n handleValueUpdate() {\n let hVal;\n if (this.type === 'Range') {\n if (this.activeHandle === 1) {\n hVal = this.handleVal1;\n }\n else {\n hVal = this.handleVal2;\n }\n }\n else {\n hVal = this.handleVal1;\n }\n return hVal;\n }\n getLimitCorrectedValues(value) {\n if (this.type === 'MinRange' || this.type === 'Default') {\n value = (this.getLimitValueAndPosition(value, this.limits.minStart, this.limits.minEnd))[0];\n }\n else {\n if (this.activeHandle === 1) {\n value = (this.getLimitValueAndPosition(value, this.limits.minStart, this.limits.minEnd))[0];\n }\n else {\n value = (this.getLimitValueAndPosition(value, this.limits.maxStart, this.limits.maxEnd))[0];\n }\n }\n return value;\n }\n focusSliderElement() {\n if (!this.isElementFocused) {\n this.element.focus();\n this.isElementFocused = true;\n }\n }\n buttonClick(args) {\n this.focusSliderElement();\n let value;\n const enabledRTL = this.enableRtl && this.orientation !== 'Vertical';\n const hVal = this.handleValueUpdate();\n if ((args.keyCode === 40) || (args.keyCode === 37)\n || args.currentTarget.classList.contains(classNames.firstButton)) {\n // eslint-disable-next-line\n enabledRTL ? (value = this.add(hVal, parseFloat(this.step.toString()), true)) :\n (value = this.add(hVal, parseFloat(this.step.toString()), false));\n }\n else if ((args.keyCode === 38) || (args.keyCode === 39) ||\n args.currentTarget.classList.contains(classNames.secondButton)) {\n // eslint-disable-next-line\n enabledRTL ? (value = this.add(hVal, parseFloat(this.step.toString()), false)) :\n (value = this.add(hVal, parseFloat(this.step.toString()), true));\n }\n else if ((args.keyCode === 33\n || args.currentTarget.classList.contains(classNames.firstButton))) {\n // eslint-disable-next-line\n enabledRTL ? (value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), false)) :\n (value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), true));\n }\n else if ((args.keyCode === 34) ||\n args.currentTarget.classList.contains(classNames.secondButton)) {\n // eslint-disable-next-line\n enabledRTL ? (value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), true)) :\n (value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), false));\n }\n else if ((args.keyCode === 36)) {\n value = parseFloat(this.min.toString());\n }\n else if ((args.keyCode === 35)) {\n value = parseFloat(this.max.toString());\n }\n if (this.limits.enabled) {\n value = this.getLimitCorrectedValues(value);\n }\n this.changeHandleValue(value);\n if (this.isMaterial && !this.tooltip.isVisible &&\n !this.getHandle().classList.contains(classNames.sliderTabHandle)) {\n this.materialChange();\n }\n this.tooltipToggle(this.getHandle());\n this.getHandle().focus();\n if (args.currentTarget.classList.contains(classNames.firstButton)) {\n EventHandler.add(this.firstBtn, 'mouseup touchend', this.buttonUp, this);\n }\n if (args.currentTarget.classList.contains(classNames.secondButton)) {\n EventHandler.add(this.secondBtn, 'mouseup touchend', this.buttonUp, this);\n }\n }\n tooltipToggle(target) {\n if (this.isMaterialTooltip) {\n // eslint-disable-next-line\n !this.tooltipElement.classList.contains(classNames.materialTooltipOpen) ?\n this.openMaterialTooltip() : this.refreshTooltip(this.firstHandle);\n }\n else {\n // eslint-disable-next-line\n !this.tooltipElement ? this.openTooltip(target) : this.refreshTooltip(target);\n }\n }\n buttonUp(args) {\n if (args.currentTarget.classList.contains(classNames.firstButton)) {\n EventHandler.remove(this.firstBtn, 'mouseup touchend', this.buttonUp);\n }\n if (args.currentTarget.classList.contains(classNames.secondButton)) {\n EventHandler.remove(this.secondBtn, 'mouseup touchend', this.buttonUp);\n }\n }\n setRangeBar() {\n if (this.orientation === 'Horizontal') {\n if (this.type === 'MinRange') {\n // eslint-disable-next-line\n this.enableRtl ? (this.rangeBar.style.right = '0px') : (this.rangeBar.style.left = '0px');\n setStyleAttribute(this.rangeBar, { 'width': isNullOrUndefined(this.handlePos1) ? 0 : this.handlePos1 + 'px' });\n }\n else {\n // eslint-disable-next-line\n this.enableRtl ? (this.rangeBar.style.right =\n this.handlePos1 + 'px') : (this.rangeBar.style.left = this.handlePos1 + 'px');\n setStyleAttribute(this.rangeBar, { 'width': this.handlePos2 - this.handlePos1 + 'px' });\n }\n }\n else {\n if (this.type === 'MinRange') {\n this.rangeBar.style.bottom = '0px';\n setStyleAttribute(this.rangeBar, { 'height': isNullOrUndefined(this.handlePos1) ? 0 : this.handlePos1 + 'px' });\n }\n else {\n this.rangeBar.style.bottom = this.handlePos1 + 'px';\n setStyleAttribute(this.rangeBar, { 'height': this.handlePos2 - this.handlePos1 + 'px' });\n }\n }\n }\n checkValidValueAndPos(value) {\n value = this.checkHandleValue(value);\n value = this.checkHandlePosition(value);\n return value;\n }\n setLimitBarPositions(fromMinPostion, fromMaxpostion, toMinPostion, toMaxpostion) {\n if (this.orientation === 'Horizontal') {\n if (!this.enableRtl) {\n this.limitBarFirst.style.left = fromMinPostion + 'px';\n this.limitBarFirst.style.width = (fromMaxpostion - fromMinPostion) + 'px';\n }\n else {\n this.limitBarFirst.style.right = fromMinPostion + 'px';\n this.limitBarFirst.style.width = (fromMaxpostion - fromMinPostion) + 'px';\n }\n }\n else {\n this.limitBarFirst.style.bottom = fromMinPostion + 'px';\n this.limitBarFirst.style.height = (fromMaxpostion - fromMinPostion) + 'px';\n }\n if (this.type === 'Range') {\n if (this.orientation === 'Horizontal') {\n if (!this.enableRtl) {\n this.limitBarSecond.style.left = toMinPostion + 'px';\n this.limitBarSecond.style.width = (toMaxpostion - toMinPostion) + 'px';\n }\n else {\n this.limitBarSecond.style.right = toMinPostion + 'px';\n this.limitBarSecond.style.width = (toMaxpostion - toMinPostion) + 'px';\n }\n }\n else {\n this.limitBarSecond.style.bottom = toMinPostion + 'px';\n this.limitBarSecond.style.height = (toMaxpostion - toMinPostion) + 'px';\n }\n }\n }\n setLimitBar() {\n if (this.type === 'Default' || this.type === 'MinRange') {\n let fromPosition = (this.getLimitValueAndPosition(this.limits.minStart, this.limits.minStart, this.limits.minEnd, true))[0];\n fromPosition = this.checkValidValueAndPos(fromPosition);\n let toPosition = (this.getLimitValueAndPosition(this.limits.minEnd, this.limits.minStart, this.limits.minEnd, true))[0];\n toPosition = this.checkValidValueAndPos(toPosition);\n this.setLimitBarPositions(fromPosition, toPosition);\n }\n else if (this.type === 'Range') {\n let fromMinPostion = (this.getLimitValueAndPosition(this.limits.minStart, this.limits.minStart, this.limits.minEnd, true))[0];\n fromMinPostion = this.checkValidValueAndPos(fromMinPostion);\n let fromMaxpostion = (this.getLimitValueAndPosition(this.limits.minEnd, this.limits.minStart, this.limits.minEnd, true))[0];\n fromMaxpostion = this.checkValidValueAndPos(fromMaxpostion);\n let toMinPostion = (this.getLimitValueAndPosition(this.limits.maxStart, this.limits.maxStart, this.limits.maxEnd, true))[0];\n toMinPostion = this.checkValidValueAndPos(toMinPostion);\n let toMaxpostion = (this.getLimitValueAndPosition(this.limits.maxEnd, this.limits.maxStart, this.limits.maxEnd, true))[0];\n toMaxpostion = this.checkValidValueAndPos(toMaxpostion);\n this.setLimitBarPositions(fromMinPostion, fromMaxpostion, toMinPostion, toMaxpostion);\n }\n }\n getLimitValueAndPosition(currentValue, minValue, maxValue, limitBar) {\n if (isNullOrUndefined(minValue)) {\n minValue = this.min;\n if (isNullOrUndefined(currentValue) && limitBar) {\n currentValue = minValue;\n }\n }\n if (isNullOrUndefined(maxValue)) {\n maxValue = this.max;\n if (isNullOrUndefined(currentValue) && limitBar) {\n currentValue = maxValue;\n }\n }\n if (currentValue < minValue) {\n currentValue = minValue;\n }\n if (currentValue > maxValue) {\n currentValue = maxValue;\n }\n return [currentValue, this.checkHandlePosition(currentValue)];\n }\n setValue() {\n if (!isNullOrUndefined(this.customValues) && this.customValues.length > 0) {\n this.min = 0;\n this.max = this.customValues.length - 1;\n this.setBarColor();\n }\n this.setAriaAttributes(this.firstHandle);\n this.handleVal1 = isNullOrUndefined(this.value) ? this.checkHandleValue(parseFloat(this.min.toString())) :\n this.checkHandleValue(parseFloat(this.value.toString()));\n this.handlePos1 = this.checkHandlePosition(this.handleVal1);\n this.preHandlePos1 = this.handlePos1;\n // eslint-disable-next-line\n isNullOrUndefined(this.activeHandle) ? (this.type === 'Range' ? this.activeHandle = 2 : this.activeHandle = 1) :\n // eslint-disable-next-line no-self-assign\n this.activeHandle = this.activeHandle;\n if (this.type === 'Default' || this.type === 'MinRange') {\n if (this.limits.enabled) {\n const values = this.getLimitValueAndPosition(this.handleVal1, this.limits.minStart, this.limits.minEnd);\n this.handleVal1 = values[0];\n this.handlePos1 = values[1];\n this.preHandlePos1 = this.handlePos1;\n }\n this.setHandlePosition(null);\n this.handleStart();\n this.value = this.handleVal1;\n this.setAriaAttrValue(this.firstHandle);\n this.changeEvent('changed', null);\n }\n else {\n this.validateRangeValue();\n }\n if (this.type !== 'Default') {\n this.setRangeBar();\n }\n if (this.limits.enabled) {\n this.setLimitBar();\n }\n }\n rangeValueUpdate() {\n if (this.value === null || typeof (this.value) !== 'object') {\n this.value = [parseFloat(formatUnit(this.min)), parseFloat(formatUnit(this.max))];\n }\n }\n validateRangeValue() {\n this.rangeValueUpdate();\n this.setRangeValue();\n }\n modifyZindex() {\n if (this.type === 'Range') {\n if (this.activeHandle === 1) {\n this.firstHandle.style.zIndex = (this.zIndex + 4) + '';\n this.secondHandle.style.zIndex = (this.zIndex + 3) + '';\n }\n else {\n this.firstHandle.style.zIndex = (this.zIndex + 3) + '';\n this.secondHandle.style.zIndex = (this.zIndex + 4) + '';\n }\n }\n else if (this.isMaterialTooltip && this.tooltipElement) {\n this.tooltipElement.style.zIndex = getZindexPartial(this.element) + '';\n }\n }\n setHandlePosition(event) {\n let handle;\n const pos = (this.activeHandle === 1) ? this.handlePos1 : this.handlePos2;\n if (this.isMaterialTooltip) {\n handle = [this.firstHandle, this.materialHandle];\n }\n else {\n handle = [this.getHandle()];\n }\n this.handleStart();\n handle.forEach((handle) => {\n if (this.orientation === 'Horizontal') {\n // eslint-disable-next-line\n this.enableRtl ? (handle.style.right =\n `${pos}px`) : (handle.style.left = `${pos}px`);\n }\n else {\n handle.style.bottom = `${pos}px`;\n }\n });\n this.changeEvent('change', event);\n }\n getHandle() {\n return (this.activeHandle === 1) ? this.firstHandle : this.secondHandle;\n }\n setRangeValue() {\n this.updateRangeValue();\n this.activeHandle = 1;\n this.setHandlePosition(null);\n this.activeHandle = 2;\n this.setHandlePosition(null);\n this.activeHandle = 1;\n }\n changeEvent(eventName, e) {\n let previous = eventName === 'change' ? this.previousVal : this.previousChanged;\n if (this.type !== 'Range') {\n this.setProperties({ 'value': this.handleVal1 }, true);\n if (previous !== this.value && (!this.isMaterialTooltip || !this.initialTooltip)) {\n this.trigger(eventName, this.changeEventArgs(eventName, e));\n this.initialTooltip = true;\n this.setPreviousVal(eventName, this.value);\n }\n this.setAriaAttrValue(this.firstHandle);\n }\n else {\n let value = this.value = [this.handleVal1, this.handleVal2];\n this.setProperties({ 'value': value }, true);\n if (previous.length === this.value.length\n && this.value[0] !== previous[0] || this.value[1] !== previous[1]) {\n this.initialTooltip = false;\n this.trigger(eventName, this.changeEventArgs(eventName, e));\n this.initialTooltip = true;\n this.setPreviousVal(eventName, this.value);\n }\n this.setAriaAttrValue(this.getHandle());\n }\n this.hiddenInput.value = this.value.toString();\n }\n changeEventArgs(eventName, e) {\n let eventArgs;\n if (this.tooltip.isVisible && this.tooltipObj && this.initialTooltip) {\n this.tooltipValue();\n eventArgs = {\n value: this.value,\n previousValue: eventName === 'change' ? this.previousVal : this.previousChanged,\n action: eventName, text: this.tooltipObj.content, isInteracted: isNullOrUndefined(e) ? false : true\n };\n }\n else {\n eventArgs = {\n value: this.value,\n previousValue: eventName === 'change' ? this.previousVal : this.previousChanged,\n action: eventName, text: isNullOrUndefined(this.ticksFormatInfo.format) ? this.value.toString() :\n (this.type !== 'Range' ? this.formatString(this.value, this.ticksFormatInfo).formatString :\n (this.formatString(this.value[0], this.ticksFormatInfo).formatString + ' - ' +\n this.formatString(this.value[1], this.ticksFormatInfo).formatString)),\n isInteracted: isNullOrUndefined(e) ? false : true\n };\n }\n return eventArgs;\n }\n setPreviousVal(eventName, value) {\n if (eventName === 'change') {\n this.previousVal = value;\n }\n else {\n this.previousChanged = value;\n }\n }\n updateRangeValue() {\n const values = this.value.toString().split(',').map(Number);\n if ((this.enableRtl && this.orientation !== 'Vertical') || this.rtl) {\n this.value = [values[1], values[0]];\n }\n else {\n this.value = [values[0], values[1]];\n }\n if (this.enableRtl && this.orientation !== 'Vertical') {\n this.handleVal1 = this.checkHandleValue(this.value[1]);\n this.handleVal2 = this.checkHandleValue(this.value[0]);\n }\n else {\n this.handleVal1 = this.checkHandleValue(this.value[0]);\n this.handleVal2 = this.checkHandleValue(this.value[1]);\n }\n this.handlePos1 = this.checkHandlePosition(this.handleVal1);\n this.handlePos2 = this.checkHandlePosition(this.handleVal2);\n if (this.handlePos1 > this.handlePos2) {\n this.handlePos1 = this.handlePos2;\n this.handleVal1 = this.handleVal2;\n }\n this.preHandlePos1 = this.handlePos1;\n this.preHandlePos2 = this.handlePos2;\n if (this.limits.enabled) {\n this.activeHandle = 1;\n let values = this.getLimitValueAndPosition(this.handleVal1, this.limits.minStart, this.limits.minEnd);\n this.handleVal1 = values[0];\n this.handlePos1 = values[1];\n this.preHandlePos1 = this.handlePos1;\n this.activeHandle = 2;\n values = this.getLimitValueAndPosition(this.handleVal2, this.limits.maxStart, this.limits.maxEnd);\n this.handleVal2 = values[0];\n this.handlePos2 = values[1];\n this.preHandlePos2 = this.handlePos2;\n }\n }\n checkHandlePosition(value) {\n let pos;\n value = (100 *\n (value - (parseFloat(formatUnit(this.min))))) / ((parseFloat(formatUnit(this.max))) - (parseFloat(formatUnit(this.min))));\n if (this.orientation === 'Horizontal') {\n pos = this.element.getBoundingClientRect().width * (value / 100);\n }\n else {\n pos = this.element.getBoundingClientRect().height * (value / 100);\n }\n if (((parseFloat(formatUnit(this.max))) === (parseFloat(formatUnit(this.min))))) {\n if (this.orientation === 'Horizontal') {\n pos = this.element.getBoundingClientRect().width;\n }\n else {\n pos = this.element.getBoundingClientRect().height;\n }\n }\n return pos;\n }\n checkHandleValue(value) {\n if (this.min > this.max) {\n this.min = this.max;\n }\n if (this.min === this.max) {\n return (parseFloat(formatUnit(this.max)));\n }\n let handle = this.tempStartEnd();\n if (value < handle.start) {\n value = handle.start;\n }\n else if (value > handle.end) {\n value = handle.end;\n }\n return value;\n }\n /**\n * It is used to reposition slider.\n * @returns void\n */\n reposition() {\n this.firstHandle.style.transition = 'none';\n if (this.type !== 'Default') {\n this.rangeBar.style.transition = 'none';\n }\n if (this.type === 'Range') {\n this.secondHandle.style.transition = 'none';\n }\n this.handlePos1 = this.checkHandlePosition(this.handleVal1);\n if (this.handleVal2) {\n this.handlePos2 = this.checkHandlePosition(this.handleVal2);\n }\n if (this.orientation === 'Horizontal') {\n // eslint-disable-next-line\n this.enableRtl ? this.firstHandle.style.right =\n `${this.handlePos1}px` : this.firstHandle.style.left = `${this.handlePos1}px`;\n if (this.isMaterialTooltip) {\n // eslint-disable-next-line\n this.enableRtl ? this.materialHandle.style.right =\n `${this.handlePos1}px` : this.materialHandle.style.left = `${this.handlePos1}px`;\n }\n if (this.type === 'MinRange') {\n // eslint-disable-next-line\n this.enableRtl ? (this.rangeBar.style.right = '0px') : (this.rangeBar.style.left = '0px');\n setStyleAttribute(this.rangeBar, { 'width': isNullOrUndefined(this.handlePos1) ? 0 : this.handlePos1 + 'px' });\n }\n else if (this.type === 'Range') {\n // eslint-disable-next-line\n this.enableRtl ? this.secondHandle.style.right =\n `${this.handlePos2}px` : this.secondHandle.style.left = `${this.handlePos2}px`;\n // eslint-disable-next-line\n this.enableRtl ? (this.rangeBar.style.right =\n this.handlePos1 + 'px') : (this.rangeBar.style.left = this.handlePos1 + 'px');\n setStyleAttribute(this.rangeBar, { 'width': this.handlePos2 - this.handlePos1 + 'px' });\n }\n }\n else {\n this.firstHandle.style.bottom = `${this.handlePos1}px`;\n if (this.isMaterialTooltip) {\n this.materialHandle.style.bottom = `${this.handlePos1}px`;\n }\n if (this.type === 'MinRange') {\n this.rangeBar.style.bottom = '0px';\n setStyleAttribute(this.rangeBar, { 'height': isNullOrUndefined(this.handlePos1) ? 0 : this.handlePos1 + 'px' });\n }\n else if (this.type === 'Range') {\n this.secondHandle.style.bottom = `${this.handlePos2}px`;\n this.rangeBar.style.bottom = this.handlePos1 + 'px';\n setStyleAttribute(this.rangeBar, { 'height': this.handlePos2 - this.handlePos1 + 'px' });\n }\n }\n if (this.limits.enabled) {\n this.setLimitBar();\n }\n if (this.ticks.placement !== 'None' && this.ul) {\n this.removeElement(this.ul);\n this.ul = undefined;\n this.renderScale();\n }\n this.handleStart();\n if (!this.tooltip.isVisible) {\n setTimeout(() => {\n this.firstHandle.style.transition = this.scaleTransform;\n if (this.type === 'Range') {\n this.secondHandle.style.transition = this.scaleTransform;\n }\n });\n }\n this.refreshTooltip(this.tooltipTarget);\n this.setBarColor();\n }\n changeHandleValue(value) {\n let position = null;\n if (this.activeHandle === 1) {\n if (!(this.limits.enabled && this.limits.startHandleFixed)) {\n this.handleVal1 = this.checkHandleValue(value);\n this.handlePos1 = this.checkHandlePosition(this.handleVal1);\n if (this.type === 'Range' && this.handlePos1 > this.handlePos2) {\n this.handlePos1 = this.handlePos2;\n this.handleVal1 = this.handleVal2;\n }\n if (this.handlePos1 !== this.preHandlePos1) {\n position = this.preHandlePos1 = this.handlePos1;\n }\n }\n this.modifyZindex();\n }\n else {\n if (!(this.limits.enabled && this.limits.endHandleFixed)) {\n this.handleVal2 = this.checkHandleValue(value);\n this.handlePos2 = this.checkHandlePosition(this.handleVal2);\n if (this.type === 'Range' && this.handlePos2 < this.handlePos1) {\n this.handlePos2 = this.handlePos1;\n this.handleVal2 = this.handleVal1;\n }\n if (this.handlePos2 !== this.preHandlePos2) {\n position = this.preHandlePos2 = this.handlePos2;\n }\n }\n this.modifyZindex();\n }\n if (position !== null) {\n if (this.type !== 'Default') {\n this.setRangeBar();\n }\n this.setHandlePosition(null);\n }\n }\n // eslint-disable-next-line\n tempStartEnd() {\n if (this.min > this.max) {\n return {\n start: this.max,\n end: this.min\n };\n }\n else {\n return {\n start: this.min,\n end: this.max\n };\n }\n }\n // eslint-disable-next-line\n xyToPosition(position) {\n let pos;\n if (this.min === this.max) {\n return 100;\n }\n if (this.orientation === 'Horizontal') {\n let left = position.x - this.element.getBoundingClientRect().left;\n let num = this.element.offsetWidth / 100;\n this.val = (left / num);\n }\n else {\n let top = position.y - this.element.getBoundingClientRect().top;\n let num = this.element.offsetHeight / 100;\n this.val = 100 - (top / num);\n }\n let val = this.stepValueCalculation(this.val);\n if (val < 0) {\n val = 0;\n }\n else if (val > 100) {\n val = 100;\n }\n if (this.enableRtl && this.orientation !== 'Vertical') {\n val = 100 - val;\n }\n if (this.orientation === 'Horizontal') {\n pos = this.element.getBoundingClientRect().width * (val / 100);\n }\n else {\n pos = this.element.getBoundingClientRect().height * (val / 100);\n }\n return pos;\n }\n stepValueCalculation(value) {\n if (this.step === 0) {\n this.step = 1;\n }\n let percentStep = (parseFloat(formatUnit(this.step))) / ((parseFloat(formatUnit(this.max)) - parseFloat(formatUnit(this.min))) / 100);\n let remain = value % Math.abs(percentStep);\n if (remain !== 0) {\n if ((percentStep / 2) > remain) {\n value -= remain;\n }\n else {\n value += Math.abs(percentStep) - remain;\n }\n }\n return value;\n }\n add(a, b, addition) {\n let precision;\n let x = Math.pow(10, precision || 3);\n let val;\n if (addition) {\n val = (Math.round(a * x) + Math.round(b * x)) / x;\n }\n else {\n val = (Math.round(a * x) - Math.round(b * x)) / x;\n }\n return val;\n }\n positionToValue(pos) {\n let val;\n let diff = parseFloat(formatUnit(this.max)) - parseFloat(formatUnit(this.min));\n if (this.orientation === 'Horizontal') {\n val = (pos / this.element.getBoundingClientRect().width) * diff;\n }\n else {\n val = (pos / this.element.getBoundingClientRect().height) * diff;\n }\n let total = this.add(val, parseFloat(this.min.toString()), true);\n return (total);\n }\n sliderBarClick(evt) {\n evt.preventDefault();\n // eslint-disable-next-line\n let pos;\n if (evt.type === 'mousedown' || evt.type === 'mouseup' || evt.type === 'click') {\n pos = { x: evt.clientX, y: evt.clientY };\n }\n else if (evt.type === 'touchend' || evt.type === 'touchstart') {\n pos = { x: evt.changedTouches[0].clientX, y: evt.changedTouches[0].clientY };\n }\n let handlepos = this.xyToPosition(pos);\n let handleVal = this.positionToValue(handlepos);\n if (this.type === 'Range' && (this.handlePos2 - handlepos) < (handlepos - this.handlePos1)) {\n this.activeHandle = 2;\n if (!(this.limits.enabled && this.limits.endHandleFixed)) {\n if (this.limits.enabled) {\n let value = this.getLimitValueAndPosition(handleVal, this.limits.maxStart, this.limits.maxEnd);\n handleVal = value[0];\n handlepos = value[1];\n }\n this.secondHandle.classList.add(classNames.sliderActiveHandle);\n this.handlePos2 = this.preHandlePos2 = handlepos;\n this.handleVal2 = handleVal;\n }\n this.modifyZindex();\n this.secondHandle.focus();\n }\n else {\n this.activeHandle = 1;\n if (!(this.limits.enabled && this.limits.startHandleFixed)) {\n if (this.limits.enabled) {\n let value = this.getLimitValueAndPosition(handleVal, this.limits.minStart, this.limits.minEnd);\n handleVal = value[0];\n handlepos = value[1];\n }\n this.firstHandle.classList.add(classNames.sliderActiveHandle);\n this.handlePos1 = this.preHandlePos1 = handlepos;\n this.handleVal1 = handleVal;\n }\n this.modifyZindex();\n this.firstHandle.focus();\n }\n if (this.isMaterialTooltip) {\n this.tooltipElement.classList.add(classNames.materialTooltipActive);\n }\n let focusedElement = this.element.querySelector('.' + classNames.sliderTabHandle);\n if (focusedElement && this.getHandle() !== focusedElement) {\n focusedElement.classList.remove(classNames.sliderTabHandle);\n }\n let handle = this.activeHandle === 1 ? this.firstHandle : this.secondHandle;\n if (evt.target === handle) {\n if (this.isMaterial && !this.tooltip.isVisible &&\n !this.getHandle().classList.contains(classNames.sliderTabHandle)) {\n this.materialChange();\n }\n this.sliderBarUp(evt);\n this.tooltipToggle(this.getHandle());\n return;\n }\n if (!this.checkRepeatedValue(handleVal)) {\n return;\n }\n let transition = this.isMaterial && this.tooltip.isVisible ?\n this.transitionOnMaterialTooltip : this.transition;\n this.getHandle().style.transition = transition.handle;\n if (this.type !== 'Default') {\n this.rangeBar.style.transition = transition.rangeBar;\n }\n this.setHandlePosition(evt);\n if (this.isMaterialTooltip) {\n this.initialTooltip = false;\n }\n this.changeEvent('changed', evt);\n if (this.type !== 'Default') {\n this.setRangeBar();\n }\n }\n handleValueAdjust(handleValue, assignValue, handleNumber) {\n if (handleNumber === 1) {\n this.handleVal1 = assignValue;\n this.handleVal2 = this.handleVal1 + this.minDiff;\n }\n else if (handleNumber === 2) {\n this.handleVal2 = assignValue;\n this.handleVal1 = this.handleVal2 - this.minDiff;\n }\n this.handlePos1 = this.checkHandlePosition(this.handleVal1);\n this.handlePos2 = this.checkHandlePosition(this.handleVal2);\n }\n dragRangeBarMove(event) {\n if (event.type !== 'touchmove') {\n event.preventDefault();\n }\n this.rangeBarDragged = true;\n let pos;\n this.rangeBar.style.transition = 'none';\n this.firstHandle.style.transition = 'none';\n this.secondHandle.style.transition = 'none';\n let xPostion;\n let yPostion;\n if (event.type === 'mousemove') {\n [xPostion, yPostion] = [event.clientX, event.clientY];\n }\n else {\n [xPostion, yPostion] = [event.changedTouches[0].clientX, event.changedTouches[0].clientY];\n }\n if (!(this.limits.enabled && this.limits.startHandleFixed) && !(this.limits.enabled && this.limits.endHandleFixed)) {\n if (!this.enableRtl) {\n pos = { x: xPostion - this.firstPartRemain, y: yPostion + this.secondPartRemain };\n }\n else {\n pos = { x: xPostion + this.secondPartRemain, y: yPostion + this.secondPartRemain };\n }\n this.handlePos1 = this.xyToPosition(pos);\n this.handleVal1 = this.positionToValue(this.handlePos1);\n if (!this.enableRtl) {\n pos = { x: xPostion + this.secondPartRemain, y: yPostion - this.firstPartRemain };\n }\n else {\n pos = { x: xPostion - this.firstPartRemain, y: yPostion - this.firstPartRemain };\n }\n this.handlePos2 = this.xyToPosition(pos);\n this.handleVal2 = this.positionToValue(this.handlePos2);\n if (this.limits.enabled) {\n let value = this.getLimitValueAndPosition(this.handleVal1, this.limits.minStart, this.limits.minEnd);\n this.handleVal1 = value[0];\n this.handlePos1 = value[1];\n if (this.handleVal1 === this.limits.minEnd) {\n this.handleValueAdjust(this.handleVal1, this.limits.minEnd, 1);\n }\n if (this.handleVal1 === this.limits.minStart) {\n this.handleValueAdjust(this.handleVal1, this.limits.minStart, 1);\n }\n value = this.getLimitValueAndPosition(this.handleVal2, this.limits.maxStart, this.limits.maxEnd);\n this.handleVal2 = value[0];\n this.handlePos2 = value[1];\n if (this.handleVal2 === this.limits.maxStart) {\n this.handleValueAdjust(this.handleVal2, this.limits.maxStart, 2);\n }\n if (this.handleVal2 === this.limits.maxEnd) {\n this.handleValueAdjust(this.handleVal2, this.limits.maxEnd, 2);\n }\n }\n if (this.handleVal2 === this.max) {\n this.handleValueAdjust(this.handleVal2, this.max, 2);\n }\n if (this.handleVal1 === this.min) {\n this.handleValueAdjust(this.handleVal1, this.min, 1);\n }\n }\n this.activeHandle = 1;\n this.setHandlePosition(event);\n this.activeHandle = 2;\n this.setHandlePosition(event);\n this.tooltipToggle(this.rangeBar);\n this.setRangeBar();\n }\n sliderBarUp(event) {\n this.changeEvent('changed', event);\n this.handleFocusOut();\n this.firstHandle.classList.remove(classNames.sliderActiveHandle);\n if (this.type === 'Range') {\n this.initialTooltip = false;\n this.secondHandle.classList.remove(classNames.sliderActiveHandle);\n }\n this.closeTooltip();\n if (this.isMaterial) {\n this.getHandle().classList.remove('e-large-thumb-size');\n if (this.isMaterialTooltip) {\n this.tooltipElement.classList.remove(classNames.materialTooltipActive);\n }\n }\n EventHandler.remove(document, 'mousemove touchmove', this.sliderBarMove);\n EventHandler.remove(document, 'mouseup touchend', this.sliderBarUp);\n }\n sliderBarMove(evt) {\n if (evt.type !== 'touchmove') {\n evt.preventDefault();\n }\n let pos;\n if (evt.type === 'mousemove') {\n pos = { x: evt.clientX, y: evt.clientY };\n }\n else {\n pos = { x: evt.changedTouches[0].clientX, y: evt.changedTouches[0].clientY };\n }\n let handlepos = this.xyToPosition(pos);\n let handleVal = this.positionToValue(handlepos);\n handlepos = Math.round(handlepos);\n if (this.type !== 'Range' && this.activeHandle === 1) {\n if (!(this.limits.enabled && this.limits.startHandleFixed)) {\n if (this.limits.enabled) {\n let valueAndPostion = this.getLimitValueAndPosition(handleVal, this.limits.minStart, this.limits.minEnd);\n handlepos = valueAndPostion[1];\n handleVal = valueAndPostion[0];\n }\n this.handlePos1 = handlepos;\n this.handleVal1 = handleVal;\n }\n this.firstHandle.classList.add(classNames.sliderActiveHandle);\n }\n if (this.type === 'Range') {\n if (this.activeHandle === 1) {\n this.firstHandle.classList.add(classNames.sliderActiveHandle);\n if (!(this.limits.enabled && this.limits.startHandleFixed)) {\n if (handlepos > this.handlePos2) {\n handlepos = this.handlePos2;\n handleVal = this.handleVal2;\n }\n if (handlepos !== this.preHandlePos1) {\n if (this.limits.enabled) {\n let value = this.getLimitValueAndPosition(handleVal, this.limits.minStart, this.limits.minEnd);\n handleVal = value[0];\n handlepos = value[1];\n }\n this.handlePos1 = this.preHandlePos1 = handlepos;\n this.handleVal1 = handleVal;\n this.activeHandle = 1;\n }\n }\n }\n else if (this.activeHandle === 2) {\n this.secondHandle.classList.add(classNames.sliderActiveHandle);\n if (!(this.limits.enabled && this.limits.endHandleFixed)) {\n if (handlepos < this.handlePos1) {\n handlepos = this.handlePos1;\n handleVal = this.handleVal1;\n }\n if (handlepos !== this.preHandlePos2) {\n if (this.limits.enabled) {\n let value = this.getLimitValueAndPosition(handleVal, this.limits.maxStart, this.limits.maxEnd);\n handleVal = value[0];\n handlepos = value[1];\n }\n this.handlePos2 = this.preHandlePos2 = handlepos;\n this.handleVal2 = handleVal;\n this.activeHandle = 2;\n }\n }\n }\n }\n if (!this.checkRepeatedValue(handleVal)) {\n return;\n }\n this.getHandle().style.transition = this.scaleTransform;\n if (this.type !== 'Default') {\n this.rangeBar.style.transition = 'none';\n }\n this.setHandlePosition(evt);\n if (this.isMaterial && !this.tooltip.isVisible &&\n !this.getHandle().classList.contains(classNames.sliderTabHandle)) {\n this.materialChange();\n }\n this.tooltipToggle(this.getHandle());\n if (this.type !== 'Default') {\n this.setRangeBar();\n }\n }\n dragRangeBarUp(event) {\n if (!this.rangeBarDragged) {\n this.focusSliderElement();\n this.sliderBarClick(event);\n }\n else {\n this.isDragComplete = true;\n }\n this.changeEvent('changed', event);\n this.closeTooltip();\n EventHandler.remove(document, 'mousemove touchmove', this.dragRangeBarMove);\n EventHandler.remove(document, 'mouseup touchend', this.dragRangeBarUp);\n this.rangeBarDragged = false;\n }\n checkRepeatedValue(currentValue) {\n if (this.type === 'Range') {\n let previousVal = this.enableRtl && this.orientation !== 'Vertical' ? (this.activeHandle === 1 ?\n this.previousVal[1] : this.previousVal[0]) :\n (this.activeHandle === 1 ? this.previousVal[0] : this.previousVal[1]);\n if (currentValue === previousVal) {\n return 0;\n }\n }\n else {\n if (currentValue === this.previousVal) {\n return 0;\n }\n }\n return 1;\n }\n refreshTooltip(target) {\n if (this.tooltip.isVisible && this.tooltipObj) {\n this.tooltipValue();\n if (target) {\n this.tooltipObj.refresh(target);\n this.tooltipTarget = target;\n }\n }\n }\n openTooltip(target) {\n if (this.tooltip.isVisible && this.tooltipObj && !this.isMaterialTooltip) {\n this.tooltipValue();\n this.tooltipObj.open(target);\n this.tooltipTarget = target;\n }\n }\n closeTooltip() {\n if (this.tooltip.isVisible && this.tooltipObj && this.tooltip.showOn !== 'Always' && !this.isMaterialTooltip) {\n this.tooltipValue();\n this.tooltipObj.close();\n this.tooltipTarget = undefined;\n }\n }\n keyDown(event) {\n switch (event.keyCode) {\n case 37:\n case 38:\n case 39:\n case 40:\n case 33:\n case 34:\n case 36:\n case 35:\n event.preventDefault();\n this.buttonClick(event);\n break;\n }\n }\n wireButtonEvt(destroy) {\n if (!destroy) {\n EventHandler.add(this.firstBtn, 'mouseleave touchleave', this.buttonFocusOut, this);\n EventHandler.add(this.secondBtn, 'mouseleave touchleave', this.buttonFocusOut, this);\n EventHandler.add(this.firstBtn, 'mousedown touchstart', this.repeatHandlerMouse, this);\n EventHandler.add(this.firstBtn, 'mouseup mouseleave touchup touchend', this.repeatHandlerUp, this);\n EventHandler.add(this.secondBtn, 'mousedown touchstart', this.repeatHandlerMouse, this);\n EventHandler.add(this.secondBtn, 'mouseup mouseleave touchup touchend', this.repeatHandlerUp, this);\n EventHandler.add(this.firstBtn, 'focusout', this.sliderFocusOut, this);\n EventHandler.add(this.secondBtn, 'focusout', this.sliderFocusOut, this);\n }\n else {\n EventHandler.remove(this.firstBtn, 'mouseleave touchleave', this.buttonFocusOut);\n EventHandler.remove(this.secondBtn, 'mouseleave touchleave', this.buttonFocusOut);\n EventHandler.remove(this.firstBtn, 'mousedown touchstart', this.repeatHandlerMouse);\n EventHandler.remove(this.firstBtn, 'mouseup mouseleave touchup touchend', this.repeatHandlerUp);\n EventHandler.remove(this.secondBtn, 'mousedown touchstart', this.repeatHandlerMouse);\n EventHandler.remove(this.secondBtn, 'mouseup mouseleave touchup touchend', this.repeatHandlerUp);\n EventHandler.remove(this.firstBtn, 'focusout', this.sliderFocusOut);\n EventHandler.remove(this.secondBtn, 'focusout', this.sliderFocusOut);\n }\n }\n rangeBarMousedown(event) {\n event.preventDefault();\n this.focusSliderElement();\n if (this.type === 'Range' && this.drag && event.target === this.rangeBar) {\n let xPostion;\n let yPostion;\n if (event.type === 'mousedown') {\n [xPostion, yPostion] = [event.clientX, event.clientY];\n }\n else if (event.type === 'touchstart') {\n [xPostion, yPostion] = [event.changedTouches[0].clientX, event.changedTouches[0].clientY];\n }\n if (this.orientation === 'Horizontal') {\n this.firstPartRemain = xPostion - this.rangeBar.getBoundingClientRect().left;\n this.secondPartRemain = this.rangeBar.getBoundingClientRect().right - xPostion;\n }\n else {\n this.firstPartRemain = yPostion - this.rangeBar.getBoundingClientRect().top;\n this.secondPartRemain = this.rangeBar.getBoundingClientRect().bottom - yPostion;\n }\n this.minDiff = this.handleVal2 - this.handleVal1;\n this.tooltipToggle(this.rangeBar);\n let focusedElement = this.element.querySelector('.' + classNames.sliderTabHandle);\n if (focusedElement) {\n focusedElement.classList.remove(classNames.sliderTabHandle);\n }\n EventHandler.add(document, 'mousemove touchmove', this.dragRangeBarMove, this);\n EventHandler.add(document, 'mouseup touchend', this.dragRangeBarUp, this);\n }\n }\n elementClick(event) {\n if (this.isDragComplete) {\n this.isDragComplete = false;\n return;\n }\n event.preventDefault();\n this.focusSliderElement();\n this.sliderBarClick(event);\n }\n wireEvents() {\n this.onresize = this.reposition.bind(this);\n window.addEventListener('resize', this.onresize);\n if (this.enabled && !this.readonly) {\n EventHandler.add(this.element, 'click', this.elementClick, this);\n if (this.type === 'Range' && this.drag) {\n EventHandler.add(this.rangeBar, 'mousedown touchstart', this.rangeBarMousedown, this);\n }\n EventHandler.add(this.sliderContainer, 'keydown', this.keyDown, this);\n EventHandler.add(this.sliderContainer, 'keyup', this.keyUp, this);\n EventHandler.add(this.element, 'focusout', this.sliderFocusOut, this);\n EventHandler.add(this.sliderContainer, 'mouseover mouseout touchstart touchend', this.hover, this);\n this.wireFirstHandleEvt(false);\n if (this.type === 'Range') {\n this.wireSecondHandleEvt(false);\n }\n if (this.showButtons) {\n this.wireButtonEvt(false);\n }\n this.wireMaterialTooltipEvent(false);\n if (this.isForm) {\n EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);\n }\n }\n }\n unwireEvents() {\n EventHandler.remove(this.element, 'click', this.elementClick);\n if (this.type === 'Range' && this.drag) {\n EventHandler.remove(this.rangeBar, 'mousedown touchstart', this.rangeBarMousedown);\n }\n EventHandler.remove(this.sliderContainer, 'keydown', this.keyDown);\n EventHandler.remove(this.sliderContainer, 'keyup', this.keyUp);\n EventHandler.remove(this.element, 'focusout', this.sliderFocusOut);\n EventHandler.remove(this.sliderContainer, 'mouseover mouseout touchstart touchend', this.hover);\n this.wireFirstHandleEvt(true);\n if (this.type === 'Range') {\n this.wireSecondHandleEvt(true);\n }\n if (this.showButtons) {\n this.wireButtonEvt(true);\n }\n this.wireMaterialTooltipEvent(true);\n EventHandler.remove(this.element, 'reset', this.formResetHandler);\n }\n formResetHandler() {\n this.setProperties({ 'value': this.formResetValue }, true);\n this.setValue();\n }\n keyUp(event) {\n if (event.keyCode === 9 && event.target.classList.contains(classNames.sliderHandle)) {\n this.focusSliderElement();\n if (!event.target.classList.contains(classNames.sliderTabHandle)) {\n if (this.element.querySelector('.' + classNames.sliderTabHandle)) {\n this.element.querySelector('.' + classNames.sliderTabHandle).classList.remove(classNames.sliderTabHandle);\n }\n event.target.classList.add(classNames.sliderTabHandle);\n let parentElement = event.target.parentElement;\n if (parentElement === this.element) {\n parentElement.querySelector('.' + classNames.sliderTrack).classList.add(classNames.sliderTabTrack);\n if (this.type === 'Range' || this.type === 'MinRange') {\n parentElement.querySelector('.' + classNames.rangeBar).classList.add(classNames.sliderTabRange);\n }\n }\n if (this.type === 'Range') {\n (event.target.previousSibling).classList.contains(classNames.sliderHandle) ?\n this.activeHandle = 2 : this.activeHandle = 1;\n }\n this.getHandle().focus();\n this.tooltipToggle(this.getHandle());\n }\n }\n this.closeTooltip();\n this.changeEvent('changed', event);\n }\n hover(event) {\n if (!isNullOrUndefined(event)) {\n if (event.type === 'mouseover' || event.type === 'touchmove' || event.type === 'mousemove' ||\n event.type === 'pointermove' || event.type === 'touchstart') {\n this.sliderContainer.classList.add(classNames.sliderHover);\n }\n else {\n this.sliderContainer.classList.remove(classNames.sliderHover);\n }\n }\n }\n sliderFocusOut(event) {\n if (event.relatedTarget !== this.secondHandle && event.relatedTarget !== this.firstHandle &&\n event.relatedTarget !== this.element && event.relatedTarget !== this.firstBtn && event.relatedTarget !== this.secondBtn) {\n this.closeMaterialTooltip();\n this.closeTooltip();\n if (this.element.querySelector('.' + classNames.sliderTabHandle)) {\n this.element.querySelector('.' + classNames.sliderTabHandle).classList.remove(classNames.sliderTabHandle);\n }\n if (this.element.querySelector('.' + classNames.sliderTabTrack)) {\n this.element.querySelector('.' + classNames.sliderTabTrack).classList.remove(classNames.sliderTabTrack);\n if ((this.type === 'Range' || this.type === 'MinRange') &&\n this.element.querySelector('.' + classNames.sliderTabRange)) {\n this.element.querySelector('.' + classNames.sliderTabRange).classList.remove(classNames.sliderTabRange);\n }\n }\n this.hiddenInput.focus();\n this.hiddenInput.blur();\n this.isElementFocused = false;\n }\n }\n removeElement(element) {\n if (element.parentNode) {\n element.parentNode.removeChild(element);\n }\n }\n changeSliderType(type, args) {\n if (this.isMaterialTooltip && this.materialHandle) {\n this.sliderContainer.classList.remove(classNames.materialSlider);\n this.removeElement(this.materialHandle);\n this.materialHandle = undefined;\n }\n this.removeElement(this.firstHandle);\n this.firstHandle = undefined;\n if (type !== 'Default') {\n if (type === 'Range') {\n this.removeElement(this.secondHandle);\n this.secondHandle = undefined;\n }\n this.removeElement(this.rangeBar);\n this.rangeBar = undefined;\n }\n if (this.tooltip.isVisible && !isNullOrUndefined(this.tooltipObj)) {\n this.tooltipObj.destroy();\n this.tooltipElement = undefined;\n this.tooltipCollidedPosition = undefined;\n }\n if (this.limits.enabled) {\n if (type === 'MinRange' || type === 'Default') {\n if (!isNullOrUndefined(this.limitBarFirst)) {\n this.removeElement(this.limitBarFirst);\n this.limitBarFirst = undefined;\n }\n }\n else {\n if (!isNullOrUndefined(this.limitBarSecond)) {\n this.removeElement(this.limitBarSecond);\n this.limitBarSecond = undefined;\n }\n }\n }\n this.activeHandle = 1;\n this.getThemeInitialization();\n if (this.type === 'Range') {\n this.rangeValueUpdate();\n }\n this.createRangeBar();\n if (this.limits.enabled) {\n this.createLimitBar();\n }\n this.setHandler();\n this.setOrientClass();\n this.wireFirstHandleEvt(false);\n if (this.type === 'Range') {\n this.wireSecondHandleEvt(false);\n }\n this.setValue();\n if (this.tooltip.isVisible) {\n this.renderTooltip();\n this.wireMaterialTooltipEvent(false);\n }\n this.setBarColor();\n if (args !== 'tooltip') {\n this.updateConfig();\n }\n }\n changeRtl() {\n if (!this.enableRtl && this.type === 'Range') {\n this.value = [this.handleVal2, this.handleVal1];\n }\n this.updateConfig();\n if (this.tooltip.isVisible) {\n this.tooltipObj.refresh(this.firstHandle);\n }\n if (this.showButtons) {\n let enabledRTL = this.enableRtl && this.orientation !== 'Vertical';\n attributes(enabledRTL ? this.secondBtn : this.firstBtn, { 'aria-label': 'Decrease', title: 'Decrease' });\n attributes(enabledRTL ? this.firstBtn : this.secondBtn, { 'aria-label': 'Increase', title: 'Increase' });\n }\n }\n changeOrientation() {\n this.changeSliderType(this.type, 'null');\n }\n updateConfig() {\n this.setEnableRTL();\n this.setValue();\n if (this.tooltip.isVisible) {\n this.refreshTooltip(this.tooltipTarget);\n }\n if (this.ticks.placement !== 'None') {\n if (this.ul) {\n this.removeElement(this.ul);\n this.ul = undefined;\n this.renderScale();\n }\n }\n this.limitsPropertyChange();\n }\n limitsPropertyChange() {\n if (this.limits.enabled) {\n if (isNullOrUndefined(this.limitBarFirst) && this.type !== 'Range') {\n this.createLimitBar();\n }\n if (isNullOrUndefined(this.limitBarFirst) && isNullOrUndefined(this.limitBarSecond) && this.type === 'Range') {\n this.createLimitBar();\n }\n this.setLimitBar();\n this.setValue();\n }\n else {\n if (!isNullOrUndefined(this.limitBarFirst)) {\n detach(this.limitBarFirst);\n }\n if (!isNullOrUndefined(this.limitBarSecond)) {\n detach(this.limitBarSecond);\n }\n }\n }\n /**\n * Get the properties to be maintained in the persisted state.\n * @private\n */\n getPersistData() {\n let keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n }\n /**\n * Removes the component from the DOM and detaches all its related event handlers.\n * Also it removes the attributes and classes.\n * @method destroy\n * @return {void}\n */\n destroy() {\n super.destroy();\n this.unwireEvents();\n window.removeEventListener('resize', this.onresize);\n removeClass([this.sliderContainer], [classNames.sliderDisabled]);\n this.firstHandle.removeAttribute('aria-orientation');\n if (this.type === 'Range') {\n this.secondHandle.removeAttribute('aria-orientation');\n }\n this.sliderContainer.parentNode.insertBefore(this.element, this.sliderContainer);\n detach(this.sliderContainer);\n if (this.tooltip.isVisible) {\n this.tooltipObj.destroy();\n }\n this.element.innerHTML = '';\n }\n /**\n * Calls internally if any of the property value is changed.\n * @private\n */\n // tslint:disable-next-line\n onPropertyChanged(newProp, oldProp) {\n for (let prop of Object.keys(newProp)) {\n switch (prop) {\n case 'cssClass':\n this.setCSSClass(oldProp.cssClass);\n break;\n case 'value':\n if (newProp && oldProp) {\n let value = isNullOrUndefined(newProp.value) ?\n (this.type === 'Range' ? [this.min, this.max] : this.min) : newProp.value;\n this.setProperties({ 'value': value }, true);\n if (!isNullOrUndefined(oldProp.value) && oldProp.value.toString() !== value.toString()) {\n this.setValue();\n this.refreshTooltip(this.tooltipTarget);\n if (this.type === 'Range') {\n if (isNullOrUndefined(newProp.value) || oldProp.value[1] === value[1]) {\n this.activeHandle = 1;\n }\n else {\n this.activeHandle = 2;\n }\n }\n }\n }\n break;\n case 'min':\n case 'step':\n case 'max':\n this.setMinMaxValue();\n break;\n case 'tooltip':\n if (!isNullOrUndefined(newProp.tooltip) && !isNullOrUndefined(oldProp.tooltip)) {\n this.setTooltip(prop);\n }\n break;\n case 'type':\n if (!isNullOrUndefined(oldProp) && Object.keys(oldProp).length\n && !isNullOrUndefined(oldProp.type)) {\n this.changeSliderType(oldProp.type, prop);\n this.setZindex();\n }\n break;\n case 'enableRtl':\n if (oldProp.enableRtl !== newProp.enableRtl && this.orientation !== 'Vertical') {\n this.rtl = oldProp.enableRtl;\n this.changeRtl();\n }\n break;\n case 'limits':\n this.limitsPropertyChange();\n break;\n case 'orientation':\n this.changeOrientation();\n break;\n case 'ticks':\n if (!isNullOrUndefined(this.sliderContainer.querySelector('.' + classNames.scale))) {\n detach(this.ul);\n Array.prototype.forEach.call(this.sliderContainer.classList, (className) => {\n if (className.match(/e-scale-/)) {\n this.sliderContainer.classList.remove(className);\n }\n });\n }\n if (this.ticks.placement !== 'None') {\n this.renderScale();\n this.setZindex();\n }\n break;\n case 'locale':\n if (this.showButtons) {\n this.buttonTitle();\n }\n break;\n case 'showButtons':\n if (newProp.showButtons) {\n this.setButtons();\n this.reposition();\n if (this.enabled && !this.readonly) {\n this.wireButtonEvt(false);\n }\n }\n else {\n if (this.firstBtn && this.secondBtn) {\n this.sliderContainer.removeChild(this.firstBtn);\n this.sliderContainer.removeChild(this.secondBtn);\n this.sliderContainer.classList.remove(classNames.sliderButtonClass);\n this.firstBtn = undefined;\n this.secondBtn = undefined;\n this.reposition();\n }\n }\n break;\n case 'enabled':\n this.setEnabled();\n break;\n case 'readonly':\n this.setReadOnly();\n break;\n case 'customValues':\n this.setValue();\n this.reposition();\n break;\n case 'colorRange':\n this.reposition();\n break;\n case 'width':\n this.setElementWidth(newProp.width);\n this.setMinMaxValue();\n if (this.limits) {\n this.limitsPropertyChange();\n }\n break;\n }\n }\n }\n setReadOnly() {\n if (this.readonly) {\n this.unwireEvents();\n this.sliderContainer.classList.add(classNames.readonly);\n }\n else {\n this.wireEvents();\n this.sliderContainer.classList.remove(classNames.readonly);\n }\n }\n setMinMaxValue() {\n this.setValue();\n this.refreshTooltip(this.tooltipTarget);\n if (!isNullOrUndefined(this.sliderContainer.querySelector('.' + classNames.scale))) {\n if (this.ul) {\n detach(this.ul);\n Array.prototype.forEach.call(this.sliderContainer.classList, (className) => {\n if (className.match(/e-scale-/)) {\n this.sliderContainer.classList.remove(className);\n }\n });\n }\n }\n if (this.ticks.placement !== 'None') {\n this.renderScale();\n this.setZindex();\n }\n }\n setZindex() {\n this.zIndex = 6;\n if (!isNullOrUndefined(this.ticks) && this.ticks.placement !== 'None') {\n this.ul.style.zIndex = (this.zIndex + -7) + '';\n this.element.style.zIndex = (this.zIndex + 2) + '';\n }\n if (!this.isMaterial && !isNullOrUndefined(this.ticks) && this.ticks.placement === 'Both') {\n this.element.style.zIndex = (this.zIndex + 2) + '';\n }\n this.firstHandle.style.zIndex = (this.zIndex + 3) + '';\n if (this.type === 'Range') {\n this.secondHandle.style.zIndex = (this.zIndex + 4) + '';\n }\n }\n setTooltip(args) {\n this.changeSliderType(this.type, args);\n }\n setBarColor() {\n let trackPosition;\n let trackClassName;\n let child = this.sliderTrack.lastElementChild;\n while (child) {\n this.sliderTrack.removeChild(child);\n child = this.sliderTrack.lastElementChild;\n }\n for (let i = 0; i < this.colorRange.length; i++) {\n if (!isNullOrUndefined(this.colorRange[i].start) && !isNullOrUndefined(this.colorRange[i].end)) {\n if (this.colorRange[i].end > this.colorRange[i].start) {\n if (this.colorRange[i].start < this.min) {\n this.colorRange[i].start = this.min;\n }\n if (this.colorRange[i].end > this.max) {\n this.colorRange[i].end = this.max;\n }\n const startingPosition = this.checkHandlePosition(this.colorRange[i].start);\n const endPosition = this.checkHandlePosition(this.colorRange[i].end);\n const trackContainer = this.createElement('div');\n trackContainer.style.backgroundColor = this.colorRange[i].color;\n trackContainer.style.border = '1px solid ' + this.colorRange[i].color;\n if (this.orientation === 'Horizontal') {\n trackClassName = classNames.sliderHorizantalColor;\n if (this.enableRtl) {\n if (isNullOrUndefined(this.customValues)) {\n trackPosition = this.checkHandlePosition(this.max) - this.checkHandlePosition(this.colorRange[i].end);\n }\n else {\n trackPosition = this.checkHandlePosition(this.customValues.length - this.colorRange[i].end - 1);\n }\n }\n else {\n trackPosition = this.checkHandlePosition(this.colorRange[i].start);\n }\n trackContainer.style.width = endPosition - startingPosition + 'px';\n trackContainer.style.left = trackPosition + 'px';\n }\n else {\n trackClassName = classNames.sliderVerticalColor;\n trackPosition = this.checkHandlePosition(this.colorRange[i].start);\n trackContainer.style.height = endPosition - startingPosition + 'px';\n trackContainer.style.bottom = trackPosition + 'px';\n }\n trackContainer.classList.add(trackClassName);\n this.sliderTrack.appendChild(trackContainer);\n }\n }\n }\n }\n /**\n * Gets the component name\n * @private\n */\n getModuleName() {\n return 'slider';\n }\n};\n__decorate$2([\n Property(null)\n], Slider.prototype, \"value\", void 0);\n__decorate$2([\n Property(null)\n], Slider.prototype, \"customValues\", void 0);\n__decorate$2([\n Property(1)\n], Slider.prototype, \"step\", void 0);\n__decorate$2([\n Property(null)\n], Slider.prototype, \"width\", void 0);\n__decorate$2([\n Property(0)\n], Slider.prototype, \"min\", void 0);\n__decorate$2([\n Property(100)\n], Slider.prototype, \"max\", void 0);\n__decorate$2([\n Property(false)\n], Slider.prototype, \"readonly\", void 0);\n__decorate$2([\n Property('Default')\n], Slider.prototype, \"type\", void 0);\n__decorate$2([\n Collection([{}], ColorRangeData)\n], Slider.prototype, \"colorRange\", void 0);\n__decorate$2([\n Complex({}, TicksData)\n], Slider.prototype, \"ticks\", void 0);\n__decorate$2([\n Complex({}, LimitData)\n], Slider.prototype, \"limits\", void 0);\n__decorate$2([\n Property(true)\n], Slider.prototype, \"enabled\", void 0);\n__decorate$2([\n Complex({}, TooltipData)\n], Slider.prototype, \"tooltip\", void 0);\n__decorate$2([\n Property(false)\n], Slider.prototype, \"showButtons\", void 0);\n__decorate$2([\n Property(true)\n], Slider.prototype, \"enableAnimation\", void 0);\n__decorate$2([\n Property('Horizontal')\n], Slider.prototype, \"orientation\", void 0);\n__decorate$2([\n Property('')\n], Slider.prototype, \"cssClass\", void 0);\n__decorate$2([\n Property(false)\n], Slider.prototype, \"enableHtmlSanitizer\", void 0);\n__decorate$2([\n Event()\n], Slider.prototype, \"created\", void 0);\n__decorate$2([\n Event()\n], Slider.prototype, \"change\", void 0);\n__decorate$2([\n Event()\n], Slider.prototype, \"changed\", void 0);\n__decorate$2([\n Event()\n], Slider.prototype, \"renderingTicks\", void 0);\n__decorate$2([\n Event()\n], Slider.prototype, \"renderedTicks\", void 0);\n__decorate$2([\n Event()\n], Slider.prototype, \"tooltipChange\", void 0);\nSlider = __decorate$2([\n NotifyPropertyChanges\n], Slider);\n\n/**\n * Slider modules\n */\n\nvar __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nvar FormValidator_1;\n/**\n * global declarations\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst regex = {\n /* eslint-disable no-useless-escape */\n EMAIL: new RegExp('^[A-Za-z0-9._%+-]{1,}@[A-Za-z0-9._%+-]{1,}([.]{1}[a-zA-Z0-9]{2,}' +\n '|[.]{1}[a-zA-Z0-9]{2,4}[.]{1}[a-zA-Z0-9]{2,4})$'),\n URL: /^(?:http(s)?:\\/\\/)?[\\w.-]+(?:\\.[\\w\\.-]+)+[\\w\\-\\._~:/?#[\\]@!\\$&'\\(\\)\\*\\+,;=.]+$/m,\n DATE_ISO: new RegExp('^([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$'),\n DIGITS: new RegExp('^[0-9]*$'),\n PHONE: new RegExp('^[+]?[0-9]{9,13}$'),\n CREDITCARD: new RegExp('^\\\\d{13,16}$')\n /* eslint-enable no-useless-escape */\n};\n/**\n * ErrorOption values\n *\n * @private\n */\nvar ErrorOption;\n(function (ErrorOption) {\n /**\n * Defines the error message.\n */\n ErrorOption[ErrorOption[\"Message\"] = 0] = \"Message\";\n /**\n * Defines the error element type.\n */\n ErrorOption[ErrorOption[\"Label\"] = 1] = \"Label\";\n})(ErrorOption || (ErrorOption = {}));\n/**\n * FormValidator class enables you to validate the form fields based on your defined rules\n * ```html\n * \n * \n * ```\n */\nlet FormValidator = FormValidator_1 = class FormValidator extends Base {\n /**\n * Initializes the FormValidator.\n *\n * @param {string | HTMLFormElement} element - Specifies the element to render as component.\n * @param {FormValidatorModel} options - Specifies the FormValidator model.\n * @private\n */\n constructor(element, options) {\n super(options, element);\n this.validated = [];\n this.errorRules = [];\n this.allowSubmit = false;\n this.required = 'required';\n this.infoElement = null;\n this.inputElement = null;\n this.selectQuery = 'input:not([type=reset]):not([type=button]), select, textarea';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.localyMessage = {};\n /**\n * Specifies the default messages for validation rules.\n *\n * @default { List of validation message }\n */\n this.defaultMessages = {\n required: 'This field is required.',\n email: 'Please enter a valid email address.',\n url: 'Please enter a valid URL.',\n date: 'Please enter a valid date.',\n dateIso: 'Please enter a valid date ( ISO ).',\n creditcard: 'Please enter valid card number',\n number: 'Please enter a valid number.',\n digits: 'Please enter only digits.',\n maxLength: 'Please enter no more than {0} characters.',\n minLength: 'Please enter at least {0} characters.',\n rangeLength: 'Please enter a value between {0} and {1} characters long.',\n range: 'Please enter a value between {0} and {1}.',\n max: 'Please enter a value less than or equal to {0}.',\n min: 'Please enter a value greater than or equal to {0}.',\n regex: 'Please enter a correct value.',\n tel: 'Please enter a valid phone number.',\n pattern: 'Please enter a correct pattern value.',\n equalTo: 'Please enter the valid match text'\n };\n if (typeof this.rules === 'undefined') {\n this.rules = {};\n }\n this.l10n = new L10n('formValidator', this.defaultMessages, this.locale);\n if (this.locale) {\n this.localeFunc();\n }\n onIntlChange.on('notifyExternalChange', this.afterLocalization, this);\n element = typeof element === 'string' ? select(element, document) : element;\n // Set novalidate to prevent default HTML5 form validation\n if (this.element != null) {\n this.element.setAttribute('novalidate', '');\n this.inputElements = selectAll(this.selectQuery, this.element);\n this.createHTML5Rules();\n this.wireEvents();\n }\n else {\n return undefined;\n }\n }\n /* eslint-enable @typescript-eslint/no-explicit-any */\n /**\n * Add validation rules to the corresponding input element based on `name` attribute.\n *\n * @param {string} name `name` of form field.\n * @param {Object} rules Validation rules for the corresponding element.\n * @returns {void}\n */\n addRules(name, rules) {\n if (name) {\n // eslint-disable-next-line no-prototype-builtins\n if (this.rules.hasOwnProperty(name)) {\n extend(this.rules[name], rules, {});\n }\n else {\n this.rules[name] = rules;\n }\n }\n }\n /**\n * Remove validation to the corresponding field based on name attribute.\n * When no parameter is passed, remove all the validations in the form.\n *\n * @param {string} name Input name attribute value.\n * @param {string[]} rules List of validation rules need to be remove from the corresponding element.\n * @returns {void}\n */\n removeRules(name, rules) {\n if (!name && !rules) {\n this.rules = {};\n }\n else if (this.rules[name] && !rules) {\n delete this.rules[name];\n }\n else if (!isNullOrUndefined(this.rules[name] && rules)) {\n for (let i = 0; i < rules.length; i++) {\n delete this.rules[name][rules[i]];\n }\n }\n else {\n return;\n }\n }\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Validate the current form values using defined rules.\n * Returns `true` when the form is valid otherwise `false`\n *\n * @param {string} selected - Optional parameter to validate specified element.\n * @returns {boolean}\n */\n validate(selected) {\n const rules = Object.keys(this.rules);\n if (selected && rules.length) {\n this.validateRules(selected);\n //filter the selected element it don't have any valid input element\n return rules.indexOf(selected) !== -1 && this.errorRules.filter((data) => {\n return data.name === selected;\n }).length === 0;\n }\n else {\n this.errorRules = [];\n for (const name of rules) {\n this.validateRules(name);\n }\n return this.errorRules.length === 0;\n }\n }\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Reset the value of all the fields in form.\n *\n * @returns {void}\n */\n reset() {\n this.element.reset();\n this.clearForm();\n }\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Get input element by name.\n *\n * @param {string} name - Input element name attribute value.\n * @returns {HTMLInputElement}\n */\n getInputElement(name) {\n this.inputElement = (select('[name=\"' + name + '\"]', this.element));\n return this.inputElement;\n }\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Destroy the form validator object and error elements.\n *\n * @returns {void}\n */\n destroy() {\n this.reset();\n this.unwireEvents();\n this.rules = {};\n const elements = selectAll('.' + this.errorClass + ', .' + this.validClass, this.element);\n for (const element of elements) {\n detach(element);\n }\n super.destroy();\n onIntlChange.off('notifyExternalChange', this.afterLocalization);\n }\n /**\n * @param {FormValidatorModel} newProp - Returns the dynamic property value of the component.\n * @param {FormValidatorModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onPropertyChanged(newProp, oldProp) {\n for (const prop of Object.keys(newProp)) {\n switch (prop) {\n case 'locale':\n this.localeFunc();\n break;\n }\n }\n }\n /**\n * @private\n * @returns {void}\n */\n localeFunc() {\n for (const key of Object.keys(this.defaultMessages)) {\n this.l10n.setLocale(this.locale);\n const value = this.l10n.getConstant(key);\n this.localyMessage[key] = value;\n }\n }\n /**\n * @private\n * @returns {string} - Returns the component name.\n */\n getModuleName() {\n return 'formValidator';\n }\n /**\n * @param {any} args - Specifies the culture name.\n * @private\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types\n afterLocalization(args) {\n this.locale = args.locale;\n this.localeFunc();\n }\n /**\n * Allows you to refresh the form validator base events to the elements inside the form.\n *\n * @returns {void}\n */\n refresh() {\n this.unwireEvents();\n this.inputElements = selectAll(this.selectQuery, this.element);\n this.wireEvents();\n }\n clearForm() {\n this.errorRules = [];\n this.validated = [];\n const elements = selectAll(this.selectQuery, this.element);\n for (const element of elements) {\n const input = element;\n input.removeAttribute('aria-invalid');\n input.classList.remove(this.errorClass);\n if (input.name.length > 0) {\n this.getInputElement(input.name);\n this.getErrorElement(input.name);\n this.hideMessage(input.name);\n }\n input.classList.remove(this.validClass);\n }\n }\n createHTML5Rules() {\n const defRules = ['required', 'validateHidden', 'regex', 'rangeLength', 'maxLength', 'minLength', 'dateIso', 'digits',\n 'pattern', 'data-val-required', 'type', 'data-validation', 'min', 'max', 'range', 'equalTo', 'data-val-minlength-min',\n 'data-val-equalto-other', 'data-val-maxlength-max', 'data-val-range-min', 'data-val-regex-pattern', 'data-val-length-max',\n 'data-val-creditcard', 'data-val-phone'];\n const acceptedTypes = ['hidden', 'email', 'url', 'date', 'number', 'tel'];\n for (const input of (this.inputElements)) {\n // Default attribute rules\n const allRule = {};\n for (let rule of defRules) {\n if (input.getAttribute(rule) !== null) {\n switch (rule) {\n case 'required':\n this.defRule(input, allRule, rule, input.required);\n break;\n case 'data-validation':\n rule = input.getAttribute(rule);\n this.defRule(input, allRule, rule, true);\n break;\n case 'type':\n if (acceptedTypes.indexOf(input.type) !== -1) {\n this.defRule(input, allRule, input.type, true);\n }\n break;\n case 'rangeLength':\n case 'range':\n this.defRule(input, allRule, rule, JSON.parse(input.getAttribute(rule)));\n break;\n case 'equalTo':\n {\n const id = input.getAttribute(rule);\n this.defRule(input, allRule, rule, id);\n }\n break;\n default:\n if (input.getAttribute('data-val') === 'true') {\n this.annotationRule(input, allRule, rule, input.getAttribute(rule));\n }\n else {\n this.defRule(input, allRule, rule, input.getAttribute(rule));\n }\n }\n }\n }\n //adding pattern type validation\n if (Object.keys(allRule).length !== 0) {\n this.addRules(input.name, allRule);\n }\n }\n }\n annotationRule(input, ruleCon, ruleName, value) {\n const annotationRule = ruleName.split('-');\n const rulesList = ['required', 'creditcard', 'phone', 'maxlength', 'minlength', 'range', 'regex', 'equalto'];\n const ruleFirstName = annotationRule[annotationRule.length - 1];\n const ruleSecondName = annotationRule[annotationRule.length - 2];\n if (rulesList.indexOf(ruleFirstName) !== -1) {\n switch (ruleFirstName) {\n case 'required':\n this.defRule(input, ruleCon, 'required', value);\n break;\n case 'creditcard':\n this.defRule(input, ruleCon, 'creditcard', value);\n break;\n case 'phone':\n this.defRule(input, ruleCon, 'tel', value);\n break;\n }\n }\n else if (rulesList.indexOf(ruleSecondName) !== -1) {\n switch (ruleSecondName) {\n case 'maxlength':\n this.defRule(input, ruleCon, 'maxLength', value);\n break;\n case 'minlength':\n this.defRule(input, ruleCon, 'minLength', value);\n break;\n case 'range':\n {\n const minvalue = input.getAttribute('data-val-range-min');\n const maxvalue = input.getAttribute('data-val-range-max');\n this.defRule(input, ruleCon, 'range', [minvalue, maxvalue]);\n }\n break;\n case 'equalto':\n {\n const id = input.getAttribute(ruleName).split('.');\n this.defRule(input, ruleCon, 'equalTo', id[id.length - 1]);\n }\n break;\n case 'regex':\n this.defRule(input, ruleCon, 'regex', value);\n break;\n }\n }\n }\n defRule(input, ruleCon, ruleName, value) {\n const message = input.getAttribute('data-' + ruleName + '-message');\n const annotationMessage = input.getAttribute('data-val-' + ruleName);\n let customMessage;\n if (this.rules[input.name] && ruleName !== 'validateHidden' && ruleName !== 'hidden') {\n this.getInputElement(input.name);\n customMessage = this.getErrorMessage(this.rules[input.name][ruleName], ruleName);\n }\n if (message) {\n value = [value, message];\n }\n else if (annotationMessage) {\n value = [value, annotationMessage];\n }\n else if (customMessage) {\n value = [value, customMessage];\n }\n ruleCon[ruleName] = value;\n }\n // Wire events to the form elements\n wireEvents() {\n for (const input of (this.inputElements)) {\n if (FormValidator_1.isCheckable(input)) {\n EventHandler.add(input, 'click', this.clickHandler, this);\n }\n else if (input.tagName === 'SELECT') {\n EventHandler.add(input, 'change', this.changeHandler, this);\n }\n else {\n EventHandler.add(input, 'focusout', this.focusOutHandler, this);\n EventHandler.add(input, 'keyup', this.keyUpHandler, this);\n }\n }\n EventHandler.add(this.element, 'submit', this.submitHandler, this);\n EventHandler.add(this.element, 'reset', this.resetHandler, this);\n }\n // UnWire events to the form elements\n unwireEvents() {\n for (const input of (this.inputElements)) {\n EventHandler.clearEvents(input);\n }\n EventHandler.remove(this.element, 'submit', this.submitHandler);\n EventHandler.remove(this.element, 'reset', this.resetHandler);\n }\n // Handle input element focusout event\n focusOutHandler(e) {\n this.trigger('focusout', e);\n //FormValidator.triggerCallback(this.focusout, e);\n const element = e.target;\n if (this.rules[element.name]) {\n if (this.rules[element.name][this.required] || element.value.length > 0) {\n this.validate(element.name);\n }\n else if (this.validated.indexOf(element.name) === -1) {\n this.validated.push(element.name);\n }\n }\n }\n // Handle input element keyup event\n keyUpHandler(e) {\n this.trigger('keyup', e);\n const element = e.target;\n // List of keys need to prevent while validation\n const excludeKeys = [16, 17, 18, 20, 35, 36, 37, 38, 39, 40, 45, 144, 225];\n if (e.which === 9 && (!this.rules[element.name] || (this.rules[element.name] && !this.rules[element.name][this.required]))) {\n return;\n }\n if (this.validated.indexOf(element.name) !== -1 && this.rules[element.name] && excludeKeys.indexOf(e.which) === -1) {\n this.validate(element.name);\n }\n }\n // Handle input click event\n clickHandler(e) {\n this.trigger('click', e);\n const element = e.target;\n // If element type is not submit allow validation\n if (element.type !== 'submit') {\n this.validate(element.name);\n }\n else if (element.getAttribute('formnovalidate') !== null) {\n // Prevent form validation, if submit button has formnovalidate attribute\n this.allowSubmit = true;\n }\n }\n // Handle input change event\n changeHandler(e) {\n this.trigger('change', e);\n const element = e.target;\n this.validate(element.name);\n }\n // Handle form submit event\n submitHandler(e) {\n this.trigger('submit', e);\n //FormValidator.triggerCallback(this.submit, e);\n // Prevent form submit if validation failed\n if (!this.allowSubmit && !this.validate()) {\n e.preventDefault();\n }\n else {\n this.allowSubmit = false;\n }\n }\n // Handle form reset\n resetHandler() {\n this.clearForm();\n }\n // Validate each rule based on input element name\n validateRules(name) {\n if (!this.rules[name]) {\n return;\n }\n const rules = Object.keys(this.rules[name]);\n let hiddenType = false;\n let validateHiddenType = false;\n const vhPos = rules.indexOf('validateHidden');\n const hPos = rules.indexOf('hidden');\n this.getInputElement(name);\n if (hPos !== -1) {\n hiddenType = true;\n }\n if (vhPos !== -1) {\n validateHiddenType = true;\n }\n if (!hiddenType || (hiddenType && validateHiddenType)) {\n if (vhPos !== -1) {\n rules.splice(vhPos, 1);\n }\n if (hPos !== -1) {\n rules.splice((hPos - 1), 1);\n }\n this.getErrorElement(name);\n for (const rule of rules) {\n const errorMessage = this.getErrorMessage(this.rules[name][rule], rule);\n const errorRule = { name: name, message: errorMessage };\n const eventArgs = {\n inputName: name,\n element: this.inputElement,\n message: errorMessage\n };\n if (!this.isValid(name, rule) && !this.inputElement.classList.contains(this.ignore)) {\n this.removeErrorRules(name);\n this.errorRules.push(errorRule);\n // Set aria attributes to invalid elements\n this.inputElement.setAttribute('aria-invalid', 'true');\n this.inputElement.setAttribute('aria-describedby', this.inputElement.id + '-info');\n this.inputElement.classList.add(this.errorClass);\n this.inputElement.classList.remove(this.validClass);\n if (!this.infoElement) {\n this.createErrorElement(name, errorRule.message, this.inputElement);\n }\n else {\n this.showMessage(errorRule);\n }\n eventArgs.errorElement = this.infoElement;\n eventArgs.status = 'failure';\n this.inputElement.classList.add(this.errorClass);\n this.inputElement.classList.remove(this.validClass);\n this.optionalValidationStatus(name, eventArgs);\n this.trigger('validationComplete', eventArgs);\n // Set aria-required to required rule elements\n if (rule === 'required') {\n this.inputElement.setAttribute('aria-required', 'true');\n }\n break;\n }\n else {\n this.hideMessage(name);\n eventArgs.status = 'success';\n this.trigger('validationComplete', eventArgs);\n }\n }\n }\n else {\n return;\n }\n }\n // Update the optional validation status\n optionalValidationStatus(name, refer) {\n if (!this.rules[name][this.required] && !this.inputElement.value.length && !isNullOrUndefined(this.infoElement)) {\n this.infoElement.innerHTML = this.inputElement.value;\n this.infoElement.setAttribute('aria-invalid', 'false');\n refer.status = '';\n this.hideMessage(name);\n }\n }\n // Check the input element whether it's value satisfy the validation rule or not\n isValid(name, rule) {\n const params = this.rules[name][rule];\n const param = (params instanceof Array && typeof params[1] === 'string') ? params[0] : params;\n const currentRule = this.rules[name][rule];\n const args = { value: this.inputElement.value, param: param, element: this.inputElement, formElement: this.element };\n this.trigger('validationBegin', args);\n if (!args.param && rule === 'required') {\n return true;\n }\n if (currentRule && typeof currentRule[0] === 'function') {\n const fn = currentRule[0];\n return fn.call(this, { element: this.inputElement, value: this.inputElement.value });\n }\n else if (FormValidator_1.isCheckable(this.inputElement)) {\n if (rule !== 'required') {\n return true;\n }\n return selectAll('input[name=\"' + name + '\"]:checked', this.element).length > 0;\n }\n else {\n return FormValidator_1.checkValidator[rule](args);\n }\n }\n // Return default error message or custom error message\n getErrorMessage(ruleValue, rule) {\n let message = this.inputElement.getAttribute('data-' + rule + '-message') ?\n this.inputElement.getAttribute('data-' + rule + '-message') :\n (ruleValue instanceof Array && typeof ruleValue[1] === 'string') ? ruleValue[1] :\n (Object.keys(this.localyMessage).length !== 0) ? this.localyMessage[rule] : this.defaultMessages[rule];\n const formats = message.match(/{(\\d)}/g);\n if (!isNullOrUndefined(formats)) {\n for (let i = 0; i < formats.length; i++) {\n const value = ruleValue instanceof Array ? ruleValue[i] : ruleValue;\n message = message.replace(formats[i], value);\n }\n }\n return message;\n }\n // Create error element based on name and error message\n createErrorElement(name, message, input) {\n let errorElement = createElement(this.errorElement, {\n className: this.errorClass,\n innerHTML: message,\n attrs: { for: name }\n });\n // Create message design if errorOption is message\n if (this.errorOption === ErrorOption.Message) {\n errorElement.classList.remove(this.errorClass);\n errorElement.classList.add('e-message');\n errorElement = createElement(this.errorContainer, { className: this.errorClass, innerHTML: errorElement.outerHTML });\n }\n errorElement.id = this.inputElement.name + '-info';\n // Append error message into MVC error message element\n if (this.element.querySelector('[data-valmsg-for=\"' + input.id + '\"]')) {\n this.element.querySelector('[data-valmsg-for=\"' + input.id + '\"]').appendChild(errorElement);\n }\n else if (input.hasAttribute('data-msg-containerid') === true) {\n // Append error message into custom div element\n const containerId = input.getAttribute('data-msg-containerid');\n const divElement = select('#' + containerId, this.element);\n divElement.appendChild(errorElement);\n }\n else if (this.customPlacement != null) {\n // Call custom placement function if customPlacement is not null\n this.customPlacement.call(this, this.inputElement, errorElement);\n }\n else {\n this.inputElement.parentNode.insertBefore(errorElement, this.inputElement.nextSibling);\n }\n errorElement.style.display = 'block';\n this.getErrorElement(name);\n this.validated.push(name);\n this.checkRequired(name);\n }\n // Get error element by name\n getErrorElement(name) {\n this.infoElement = select(this.errorElement + '.' + this.errorClass, this.inputElement.parentElement);\n if (!this.infoElement) {\n this.infoElement = select(this.errorElement + '.' + this.errorClass + '[for=\"' + name + '\"]', this.element);\n }\n return this.infoElement;\n }\n // Remove existing rule from errorRules object\n removeErrorRules(name) {\n for (let i = 0; i < this.errorRules.length; i++) {\n const rule = this.errorRules[i];\n if (rule.name === name) {\n this.errorRules.splice(i, 1);\n }\n }\n }\n // Show error message to the input element\n showMessage(errorRule) {\n this.infoElement.style.display = 'block';\n this.infoElement.innerHTML = errorRule.message;\n this.checkRequired(errorRule.name);\n }\n // Hide error message based on input name\n hideMessage(name) {\n if (this.infoElement) {\n this.infoElement.style.display = 'none';\n this.removeErrorRules(name);\n this.inputElement.classList.add(this.validClass);\n this.inputElement.classList.remove(this.errorClass);\n this.inputElement.setAttribute('aria-invalid', 'false');\n }\n }\n // Check whether the input element have required rule and its value is not empty\n checkRequired(name) {\n if (!this.rules[name][this.required] && !this.inputElement.value.length && !isNullOrUndefined(this.infoElement)) {\n this.infoElement.innerHTML = this.inputElement.value;\n this.infoElement.setAttribute('aria-invalid', 'false');\n this.hideMessage(name);\n }\n }\n // Return boolean result if the input have chekcable or submit types\n static isCheckable(input) {\n const inputType = input.getAttribute('type');\n return inputType && (inputType === 'checkbox' || inputType === 'radio' || inputType === 'submit');\n }\n};\n// List of function to validate the rules\nFormValidator.checkValidator = {\n required: (option) => {\n return !isNaN(Date.parse(option.value)) ? !isNaN(new Date(option.value).getTime()) : option.value.toString().length > 0;\n },\n email: (option) => {\n return regex.EMAIL.test(option.value);\n },\n url: (option) => {\n return regex.URL.test(option.value);\n },\n dateIso: (option) => {\n return regex.DATE_ISO.test(option.value);\n },\n tel: (option) => {\n return regex.PHONE.test(option.value);\n },\n creditcard: (option) => {\n return regex.CREDITCARD.test(option.value);\n },\n number: (option) => {\n return !isNaN(Number(option.value)) && option.value.indexOf(' ') === -1;\n },\n digits: (option) => {\n return regex.DIGITS.test(option.value);\n },\n maxLength: (option) => {\n return option.value.length <= option.param;\n },\n minLength: (option) => {\n return option.value.length >= option.param;\n },\n rangeLength: (option) => {\n const param = option.param;\n return option.value.length >= param[0] && option.value.length <= param[1];\n },\n range: (option) => {\n const param = option.param;\n return !isNaN(Number(option.value)) && Number(option.value) >= param[0] && Number(option.value) <= param[1];\n },\n date: (option) => {\n return !isNaN(new Date(option.value).getTime());\n },\n max: (option) => {\n if (!isNaN(Number(option.value))) {\n // Maximum rule validation for number\n return +option.value <= option.param;\n }\n // Maximum rule validation for date\n return new Date(option.value).getTime() <= new Date(JSON.parse(JSON.stringify(option.param))).getTime();\n },\n min: (option) => {\n if (!isNaN(Number(option.value))) {\n // Minimum rule validation for number\n return +option.value >= option.param;\n }\n else if ((option.value).indexOf(',') !== -1) {\n const uNum = (option.value).replace(/,/g, '');\n return parseFloat(uNum) >= option.param;\n }\n else {\n // Minimum rule validation for date\n return new Date(option.value).getTime() >= new Date(JSON.parse(JSON.stringify(option.param))).getTime();\n }\n },\n regex: (option) => {\n return new RegExp(option.param).test(option.value);\n },\n equalTo: (option) => {\n const compareTo = option.formElement.querySelector('#' + option.param);\n option.param = compareTo.value;\n return option.param === option.value;\n }\n};\n__decorate$3([\n Property('')\n], FormValidator.prototype, \"locale\", void 0);\n__decorate$3([\n Property('e-hidden')\n], FormValidator.prototype, \"ignore\", void 0);\n__decorate$3([\n Property()\n], FormValidator.prototype, \"rules\", void 0);\n__decorate$3([\n Property('e-error')\n], FormValidator.prototype, \"errorClass\", void 0);\n__decorate$3([\n Property('e-valid')\n], FormValidator.prototype, \"validClass\", void 0);\n__decorate$3([\n Property('label')\n], FormValidator.prototype, \"errorElement\", void 0);\n__decorate$3([\n Property('div')\n], FormValidator.prototype, \"errorContainer\", void 0);\n__decorate$3([\n Property(ErrorOption.Label)\n], FormValidator.prototype, \"errorOption\", void 0);\n__decorate$3([\n Event()\n], FormValidator.prototype, \"focusout\", void 0);\n__decorate$3([\n Event()\n], FormValidator.prototype, \"keyup\", void 0);\n__decorate$3([\n Event()\n], FormValidator.prototype, \"click\", void 0);\n__decorate$3([\n Event()\n], FormValidator.prototype, \"change\", void 0);\n__decorate$3([\n Event()\n], FormValidator.prototype, \"submit\", void 0);\n__decorate$3([\n Event()\n], FormValidator.prototype, \"validationBegin\", void 0);\n__decorate$3([\n Event()\n], FormValidator.prototype, \"validationComplete\", void 0);\n__decorate$3([\n Event()\n], FormValidator.prototype, \"customPlacement\", void 0);\nFormValidator = FormValidator_1 = __decorate$3([\n NotifyPropertyChanges\n], FormValidator);\n\n/**\n * Input box Component\n */\n\nvar __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n/* eslint-disable @typescript-eslint/no-explicit-any */\nconst CONTROL_WRAPPER = 'e-upload e-control-wrapper';\nconst INPUT_WRAPPER = 'e-file-select';\nconst DROP_AREA = 'e-file-drop';\nconst DROP_WRAPPER = 'e-file-select-wrap';\nconst LIST_PARENT = 'e-upload-files';\nconst FILE = 'e-upload-file-list';\nconst STATUS = 'e-file-status';\nconst ACTION_BUTTONS = 'e-upload-actions';\nconst UPLOAD_BUTTONS = 'e-file-upload-btn e-css e-btn e-flat e-primary';\nconst CLEAR_BUTTONS = 'e-file-clear-btn e-css e-btn e-flat';\nconst FILE_NAME = 'e-file-name';\nconst FILE_TYPE = 'e-file-type';\nconst FILE_SIZE = 'e-file-size';\nconst REMOVE_ICON = 'e-file-remove-btn';\nconst DELETE_ICON = 'e-file-delete-btn';\nconst SPINNER_PANE = 'e-spinner-pane';\nconst ABORT_ICON = 'e-file-abort-btn';\nconst RETRY_ICON = 'e-file-reload-btn';\nconst DRAG_HOVER = 'e-upload-drag-hover';\nconst PROGRESS_WRAPPER = 'e-upload-progress-wrap';\nconst PROGRESSBAR = 'e-upload-progress-bar';\nconst PROGRESSBAR_TEXT = 'e-progress-bar-text';\nconst UPLOAD_INPROGRESS = 'e-upload-progress';\nconst UPLOAD_SUCCESS = 'e-upload-success';\nconst UPLOAD_FAILED = 'e-upload-fails';\nconst TEXT_CONTAINER = 'e-file-container';\nconst VALIDATION_FAILS = 'e-validation-fails';\nconst RTL = 'e-rtl';\nconst DISABLED = 'e-disabled';\nconst RTL_CONTAINER = 'e-rtl-container';\nconst ICON_FOCUSED = 'e-clear-icon-focus';\nconst PROGRESS_INNER_WRAPPER = 'e-progress-inner-wrap';\nconst PAUSE_UPLOAD = 'e-file-pause-btn';\nconst RESUME_UPLOAD = 'e-file-play-btn';\nconst RESTRICT_RETRY = 'e-restrict-retry';\nconst wrapperAttr$1 = ['title', 'style', 'class'];\nconst FORM_UPLOAD = 'e-form-upload';\nconst HIDDEN_INPUT = 'e-hidden-file-input';\nconst INVALID_FILE = 'e-file-invalid';\nconst INFORMATION = 'e-file-information';\nclass FilesProp extends ChildProperty {\n}\n__decorate$4([\n Property('')\n], FilesProp.prototype, \"name\", void 0);\n__decorate$4([\n Property(null)\n], FilesProp.prototype, \"size\", void 0);\n__decorate$4([\n Property('')\n], FilesProp.prototype, \"type\", void 0);\nclass ButtonsProps extends ChildProperty {\n}\n__decorate$4([\n Property('Browse...')\n], ButtonsProps.prototype, \"browse\", void 0);\n__decorate$4([\n Property('Upload')\n], ButtonsProps.prototype, \"upload\", void 0);\n__decorate$4([\n Property('Clear')\n], ButtonsProps.prototype, \"clear\", void 0);\nclass AsyncSettings extends ChildProperty {\n}\n__decorate$4([\n Property('')\n], AsyncSettings.prototype, \"saveUrl\", void 0);\n__decorate$4([\n Property('')\n], AsyncSettings.prototype, \"removeUrl\", void 0);\n__decorate$4([\n Property(0)\n], AsyncSettings.prototype, \"chunkSize\", void 0);\n__decorate$4([\n Property(3)\n], AsyncSettings.prototype, \"retryCount\", void 0);\n__decorate$4([\n Property(500)\n], AsyncSettings.prototype, \"retryAfterDelay\", void 0);\n/**\n * The uploader component allows to upload images, documents, and other files from local to server.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nlet Uploader = class Uploader extends Component {\n /**\n * Triggers when change the Uploader value.\n *\n * @param {UploaderModel} options - Specifies the Uploader model.\n * @param {string | HTMLInputElement} element - Specifies the element to render as component.\n * @private\n */\n constructor(options, element) {\n super(options, element);\n this.initialAttr = { accept: null, multiple: false, disabled: false };\n this.uploadedFilesData = [];\n this.base64String = [];\n this.isForm = false;\n this.allTypes = false;\n this.pausedData = [];\n this.uploadMetaData = [];\n this.tabIndex = '0';\n this.btnTabIndex = '0';\n this.disableKeyboardNavigation = false;\n this.count = -1;\n this.actionCompleteCount = 0;\n this.flag = true;\n this.selectedFiles = [];\n this.uploaderName = 'UploadFiles';\n this.fileStreams = [];\n this.newFileRef = 0;\n this.isFirstFileOnSelection = false;\n this.dragCounter = 0;\n /**\n * Get the file item(li) which are shown in file list.\n *\n * @private\n */\n this.fileList = [];\n /**\n * Get the data of files which are shown in file list.\n *\n * @private\n */\n this.filesData = [];\n this.uploaderOptions = options;\n }\n /**\n * Calls internally if any of the property value is changed.\n *\n * @param {UploaderModel} newProp - Returns the dynamic property value of the component.\n * @param {UploaderModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n onPropertyChanged(newProp, oldProp) {\n for (const prop of Object.keys(newProp)) {\n switch (prop) {\n case 'allowedExtensions':\n this.setExtensions(this.allowedExtensions);\n this.clearAll();\n break;\n case 'enabled':\n this.setControlStatus();\n break;\n case 'multiple':\n this.setMultipleSelection();\n break;\n case 'enableRtl':\n this.setRTL();\n this.reRenderFileList();\n break;\n case 'buttons':\n this.buttons.browse = isNullOrUndefined(this.buttons.browse) ? '' : this.buttons.browse;\n this.buttons.clear = isNullOrUndefined(this.buttons.clear) ? '' : this.buttons.clear;\n this.buttons.upload = isNullOrUndefined(this.buttons.upload) ? '' : this.buttons.upload;\n this.renderButtonTemplates();\n break;\n case 'dropArea':\n this.unBindDropEvents();\n this.updateDropArea();\n break;\n case 'htmlAttributes':\n this.updateHTMLAttrToElement();\n this.updateHTMLAttrToWrapper();\n this.checkHTMLAttributes(true);\n break;\n case 'files':\n this.renderPreLoadFiles();\n break;\n case 'directoryUpload':\n this.updateDirectoryAttributes();\n break;\n case 'template':\n if (!this.isServerBlazor) {\n this.clearAll();\n }\n break;\n case 'minFileSize':\n case 'maxFileSize':\n case 'autoUpload':\n this.clearAll();\n break;\n case 'sequentialUpload':\n this.clearAll();\n break;\n case 'locale':\n this.l10n.setLocale(this.locale);\n this.setLocalizedTexts();\n this.preLocaleObj = getValue('currentLocale', this.l10n);\n break;\n case 'cssClass':\n this.setCSSClass(oldProp.cssClass);\n break;\n }\n }\n }\n setLocalizedTexts() {\n if (isNullOrUndefined(this.template)) {\n if (typeof (this.buttons.browse) === 'string') {\n this.browseButton.innerText = (this.buttons.browse === 'Browse...') ?\n this.localizedTexts('Browse') : this.buttons.browse;\n this.browseButton.setAttribute('title', this.browseButton.innerText);\n if (this.uploadWrapper && !isNullOrUndefined(this.uploadWrapper.querySelector('.' + DROP_AREA))) {\n this.uploadWrapper.querySelector('.' + DROP_AREA).innerHTML = this.localizedTexts('dropFilesHint');\n }\n }\n this.updateFileList();\n }\n }\n getKeyValue(val) {\n let keyValue;\n for (const key of Object.keys(this.preLocaleObj)) {\n if (this.preLocaleObj[key] === val) {\n keyValue = key;\n }\n }\n return keyValue;\n }\n updateFileList() {\n let element;\n /* istanbul ignore next */\n if (this.fileList.length > 0 && !isNullOrUndefined(this.uploadWrapper.querySelector('.' + LIST_PARENT))) {\n for (let i = 0; i < this.fileList.length; i++) {\n element = this.fileList[i].querySelector('.e-file-status');\n element.innerHTML = this.localizedTexts(this.getKeyValue(this.filesData[i].status));\n this.filesData[i].status = this.localizedTexts(this.getKeyValue(this.filesData[i].status));\n if (this.fileList[i].classList.contains(UPLOAD_SUCCESS)) {\n this.fileList[i].querySelector('.e-icons').setAttribute('title', this.localizedTexts('delete'));\n }\n if (this.fileList[i].querySelector('.e-file-play-btn')) {\n this.fileList[i].querySelector('.e-icons').setAttribute('title', this.localizedTexts('resume'));\n }\n if (this.fileList[i].querySelector('.e-file-remove-btn')) {\n this.fileList[i].querySelector('.e-icons').setAttribute('title', this.localizedTexts('remove'));\n }\n if (this.fileList[i].querySelector('.e-file-reload-btn')) {\n this.fileList[i].querySelector('.e-icons').setAttribute('title', this.localizedTexts('retry'));\n }\n if (!this.autoUpload) {\n this.uploadButton.innerText = (this.buttons.upload === 'Upload') ?\n this.localizedTexts('Upload') : this.buttons.upload;\n this.uploadButton.setAttribute('title', this.localizedTexts('Upload'));\n this.clearButton.innerText = (this.buttons.clear === 'Clear') ?\n this.localizedTexts('Clear') : this.buttons.clear;\n this.clearButton.setAttribute('title', this.localizedTexts('Clear'));\n }\n }\n }\n }\n reRenderFileList() {\n if (this.listParent) {\n detach(this.listParent);\n this.listParent = null;\n this.fileList = [];\n this.createFileList(this.filesData);\n if (this.actionButtons) {\n this.removeActionButtons();\n this.renderActionButtons();\n this.checkActionButtonStatus();\n }\n }\n }\n preRender() {\n this.localeText = { Browse: 'Browse...', Clear: 'Clear', Upload: 'Upload',\n dropFilesHint: 'Or drop files here', invalidMaxFileSize: 'File size is too large',\n invalidMinFileSize: 'File size is too small', invalidFileType: 'File type is not allowed',\n uploadFailedMessage: 'File failed to upload', uploadSuccessMessage: 'File uploaded successfully',\n removedSuccessMessage: 'File removed successfully', removedFailedMessage: 'Unable to remove file', inProgress: 'Uploading',\n readyToUploadMessage: 'Ready to upload', abort: 'Abort', remove: 'Remove', cancel: 'Cancel', delete: 'Delete file',\n pauseUpload: 'File upload paused', pause: 'Pause', resume: 'Resume', retry: 'Retry',\n fileUploadCancel: 'File upload canceled', invalidFileSelection: 'Invalid files selected', totalFiles: 'Total files',\n size: 'Size'\n };\n this.l10n = new L10n('uploader', this.localeText, this.locale);\n this.preLocaleObj = getValue('currentLocale', this.l10n);\n this.isServerBlazor = (isBlazor() && this.isServerRendered) ? true : false;\n this.isBlazorTemplate = this.isServerBlazor && this.template !== '' && !isNullOrUndefined(this.template) ? true : false;\n this.isBlazorSaveUrl = (this.isServerRendered &&\n (this.asyncSettings.saveUrl === '' || isNullOrUndefined(this.asyncSettings.saveUrl))) ? true : false;\n if (this.isBlazorSaveUrl && this.sequentialUpload) {\n this.sequentialUpload = false;\n }\n if (!this.isBlazorSaveUrl) {\n this.formRendered();\n }\n if (!this.isServerBlazor) {\n this.updateHTMLAttrToElement();\n this.checkHTMLAttributes(false);\n const ejInstance = getValue('ej2_instances', this.element);\n /* istanbul ignore next */\n if (this.element.tagName === 'EJS-UPLOADER') {\n const inputElement = this.createElement('input', { attrs: { type: 'file' } });\n let index = 0;\n for (index; index < this.element.attributes.length; index++) {\n inputElement.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);\n inputElement.innerHTML = this.element.innerHTML;\n }\n if (!inputElement.hasAttribute('name')) {\n inputElement.setAttribute('name', 'UploadFiles');\n }\n this.element.appendChild(inputElement);\n this.element = inputElement;\n setValue('ej2_instances', ejInstance, this.element);\n }\n /* istanbul ignore next */\n if (ejInstance[0].isPureReactComponent) {\n if (!isNullOrUndefined(ejInstance[0].props.name)) {\n this.element.setAttribute('name', ejInstance[0].props.name);\n }\n else if (!isNullOrUndefined(ejInstance[0].props.id) && isNullOrUndefined(ejInstance[0].props.name)) {\n this.element.setAttribute('name', ejInstance[0].props.id);\n }\n else {\n this.element.setAttribute('name', 'UploadFiles');\n }\n }\n if (isNullOrUndefined(this.element.getAttribute('name'))) {\n this.element.setAttribute('name', this.element.getAttribute('id'));\n }\n if (!this.element.hasAttribute('type')) {\n this.element.setAttribute('type', 'file');\n }\n this.updateDirectoryAttributes();\n }\n this.keyConfigs = {\n enter: 'enter'\n };\n if (this.element.hasAttribute('tabindex')) {\n this.tabIndex = this.element.getAttribute('tabindex');\n }\n this.browserName = Browser.info.name;\n this.uploaderName = this.element.getAttribute('name');\n }\n formRendered() {\n let parentEle = closest(this.element, 'form');\n if (!isNullOrUndefined(parentEle)) {\n for (; parentEle && parentEle !== document.documentElement; parentEle = parentEle.parentElement) {\n if (parentEle.tagName === 'FORM') {\n this.isForm = true;\n this.formElement = parentEle;\n parentEle.setAttribute('enctype', 'multipart/form-data');\n parentEle.setAttribute('encoding', 'multipart/form-data');\n }\n }\n }\n }\n getPersistData() {\n return this.addOnPersist(['filesData']);\n }\n /**\n * Return the module name of the component.\n *\n * @returns {string} Returns the component name.\n */\n getModuleName() {\n return 'uploader';\n }\n updateDirectoryAttributes() {\n if (this.directoryUpload) {\n this.element.setAttribute('directory', 'true');\n this.element.setAttribute('webkitdirectory', 'true');\n }\n else {\n this.element.removeAttribute('directory');\n this.element.removeAttribute('webkitdirectory');\n }\n }\n /**\n * To Initialize the control rendering\n *\n * @private\n * @returns {void}\n */\n render() {\n if (!this.isServerBlazor) {\n this.renderBrowseButton();\n this.initializeUpload();\n this.updateHTMLAttrToWrapper();\n this.wireEvents();\n this.setMultipleSelection();\n this.setExtensions(this.allowedExtensions);\n this.setRTL();\n this.renderPreLoadFiles();\n this.setControlStatus();\n this.setCSSClass();\n }\n else {\n this.dropAreaWrapper = closest(this.element, '.' + DROP_WRAPPER);\n this.uploadWrapper = closest(this.element, '.e-upload.e-control-wrapper');\n this.browseButton = this.dropAreaWrapper.querySelector('button.e-upload-browse-btn');\n this.setDropArea();\n this.renderPreLoadFiles();\n this.wireEvents();\n }\n if (this.isServerBlazor) {\n this.renderComplete();\n }\n }\n renderBrowseButton() {\n this.browseButton = this.createElement('button', { className: 'e-css e-btn', attrs: { 'type': 'button' } });\n this.browseButton.setAttribute('tabindex', this.tabIndex);\n if (typeof (this.buttons.browse) === 'string') {\n this.browseButton.textContent = (this.buttons.browse === 'Browse...') ?\n this.localizedTexts('Browse') : this.buttons.browse;\n this.browseButton.setAttribute('title', this.browseButton.innerText);\n }\n else {\n this.browseButton.appendChild(this.buttons.browse);\n }\n this.element.setAttribute('aria-label', 'Uploader');\n }\n renderActionButtons() {\n this.element.setAttribute('tabindex', '-1');\n if (!(this.isBlazorSaveUrl || this.isBlazorTemplate)) {\n this.actionButtons = this.createElement('div', { className: ACTION_BUTTONS });\n this.uploadButton = this.createElement('button', { className: UPLOAD_BUTTONS,\n attrs: { 'type': 'button', 'tabindex': this.btnTabIndex } });\n this.clearButton = this.createElement('button', { className: CLEAR_BUTTONS,\n attrs: { 'type': 'button', 'tabindex': this.btnTabIndex } });\n this.actionButtons.appendChild(this.clearButton);\n this.actionButtons.appendChild(this.uploadButton);\n this.renderButtonTemplates();\n this.uploadWrapper.appendChild(this.actionButtons);\n this.browseButton.blur();\n if (!this.isPreloadFiles) {\n this.uploadButton.focus();\n }\n this.wireActionButtonEvents();\n }\n }\n /* istanbul ignore next */\n serverActionButtonsEventBind(element) {\n if (element && !this.isForm) {\n this.browseButton.blur();\n this.actionButtons = element;\n this.uploadButton = this.actionButtons.querySelector('.e-file-upload-btn');\n this.clearButton = this.actionButtons.querySelector('.e-file-clear-btn');\n this.uploadButton.focus();\n this.unwireActionButtonEvents();\n this.wireActionButtonEvents();\n this.checkActionButtonStatus();\n }\n }\n /* istanbul ignore next */\n serverUlElement(element) {\n if (element) {\n if (this.isBlazorSaveUrl || this.isBlazorTemplate) {\n this.listParent = element;\n this.fileList = [].slice.call(this.listParent.querySelectorAll('li'));\n this.serverRemoveIconBindEvent();\n if (!this.isForm) {\n this.checkAutoUpload(this.filesData);\n }\n }\n }\n }\n wireActionButtonEvents() {\n EventHandler.add(this.uploadButton, 'click', this.uploadButtonClick, this);\n EventHandler.add(this.clearButton, 'click', this.clearButtonClick, this);\n }\n unwireActionButtonEvents() {\n EventHandler.remove(this.uploadButton, 'click', this.uploadButtonClick);\n EventHandler.remove(this.clearButton, 'click', this.clearButtonClick);\n }\n removeActionButtons() {\n if (this.actionButtons) {\n this.unwireActionButtonEvents();\n if (!(this.isBlazorSaveUrl || this.isBlazorTemplate)) {\n detach(this.actionButtons);\n }\n this.actionButtons = null;\n }\n }\n renderButtonTemplates() {\n if (typeof (this.buttons.browse) === 'string') {\n this.browseButton.textContent = (this.buttons.browse === 'Browse...') ?\n this.localizedTexts('Browse') : this.buttons.browse;\n this.browseButton.setAttribute('title', this.browseButton.textContent);\n }\n else {\n this.browseButton.innerHTML = '';\n this.browseButton.appendChild(this.buttons.browse);\n }\n if (this.uploadButton) {\n const uploadText = isNullOrUndefined(this.buttons.upload) ? 'Upload' : this.buttons.upload;\n this.buttons.upload = uploadText;\n if (typeof (this.buttons.upload) === 'string') {\n this.uploadButton.textContent = (this.buttons.upload === 'Upload') ?\n this.localizedTexts('Upload') : this.buttons.upload;\n this.uploadButton.setAttribute('title', this.uploadButton.textContent);\n }\n else {\n this.uploadButton.innerHTML = '';\n this.uploadButton.appendChild(this.buttons.upload);\n }\n }\n if (this.clearButton) {\n const clearText = isNullOrUndefined(this.buttons.clear) ? 'Clear' : this.buttons.clear;\n this.buttons.clear = clearText;\n if (typeof (this.buttons.clear) === 'string') {\n this.clearButton.textContent = (this.buttons.clear === 'Clear') ?\n this.localizedTexts('Clear') : this.buttons.clear;\n this.clearButton.setAttribute('title', this.clearButton.textContent);\n }\n else {\n this.clearButton.innerHTML = '';\n this.clearButton.appendChild(this.buttons.clear);\n }\n }\n }\n initializeUpload() {\n this.element.setAttribute('tabindex', '-1');\n const inputWrapper = this.createElement('span', { className: INPUT_WRAPPER });\n this.element.parentElement.insertBefore(inputWrapper, this.element);\n this.dropAreaWrapper = this.createElement('div', { className: DROP_WRAPPER });\n this.element.parentElement.insertBefore(this.dropAreaWrapper, this.element);\n inputWrapper.appendChild(this.element);\n this.dropAreaWrapper.appendChild(this.browseButton);\n this.dropAreaWrapper.appendChild(inputWrapper);\n this.uploadWrapper = this.createElement('div', { className: CONTROL_WRAPPER });\n this.dropAreaWrapper.parentElement.insertBefore(this.uploadWrapper, this.dropAreaWrapper);\n this.uploadWrapper.appendChild(this.dropAreaWrapper);\n this.setDropArea();\n }\n renderPreLoadFiles() {\n if (this.files.length) {\n if (this.enablePersistence && this.filesData.length) {\n this.createFileList(this.filesData);\n return;\n }\n if (isNullOrUndefined(this.files[0].size)) {\n return;\n }\n this.isPreloadFiles = true;\n let files = [].slice.call(this.files);\n const filesData = [];\n if (!this.multiple) {\n this.clearData();\n files = [files[0]];\n }\n for (const data of files) {\n const fileData = {\n name: data.name + '.' + data.type.split('.')[data.type.split('.').length - 1],\n rawFile: '',\n size: data.size,\n status: this.localizedTexts('uploadSuccessMessage'),\n type: data.type,\n validationMessages: { minSize: '', maxSize: '' },\n statusCode: '2'\n };\n filesData.push(fileData);\n this.filesData.push(fileData);\n }\n this.createFileList(filesData);\n if (!this.autoUpload && this.listParent && !this.actionButtons && (!this.isForm || this.allowUpload()) && this.showFileList) {\n this.renderActionButtons();\n }\n this.checkActionButtonStatus();\n if (this.sequentialUpload) {\n this.count = this.filesData.length - 1;\n }\n this.isPreloadFiles = false;\n }\n }\n checkActionButtonStatus() {\n if (this.actionButtons) {\n const length = this.uploadWrapper.querySelectorAll('.' + VALIDATION_FAILS).length +\n this.uploadWrapper.querySelectorAll('.e-upload-fails:not(.e-upload-progress)').length +\n this.uploadWrapper.querySelectorAll('span.' + UPLOAD_SUCCESS).length +\n this.uploadWrapper.querySelectorAll('span.' + UPLOAD_INPROGRESS).length;\n if (length > 0 && length === this.uploadWrapper.querySelectorAll('li').length) {\n this.uploadButton.setAttribute('disabled', 'disabled');\n }\n else {\n this.uploadButton.removeAttribute('disabled');\n }\n }\n }\n setDropArea() {\n const dropTextArea = this.dropAreaWrapper.querySelector('.e-file-drop');\n if (this.dropArea) {\n this.dropZoneElement = (typeof (this.dropArea) !== 'string') ? this.dropArea :\n select(this.dropArea, document);\n let element = this.element;\n let enableDropText = false;\n while (element.parentNode) {\n element = element.parentNode;\n if (element === this.dropZoneElement) {\n enableDropText = true;\n if (!dropTextArea) {\n this.createDropTextHint();\n }\n else if (!this.isServerBlazor) {\n dropTextArea.innerHTML = this.localizedTexts('dropFilesHint');\n }\n }\n }\n if (!enableDropText && dropTextArea) {\n remove(dropTextArea);\n }\n }\n else if (!isNullOrUndefined(this.uploaderOptions) && this.uploaderOptions.dropArea === undefined) {\n this.createDropTextHint();\n this.dropZoneElement = this.uploadWrapper;\n this.setProperties({ dropArea: this.uploadWrapper }, true);\n }\n this.bindDropEvents();\n }\n updateDropArea() {\n if (this.dropArea) {\n this.setDropArea();\n }\n else {\n this.dropZoneElement = null;\n const dropTextArea = this.dropAreaWrapper.querySelector('.e-file-drop');\n if (dropTextArea) {\n remove(dropTextArea);\n }\n }\n }\n createDropTextHint() {\n if (!this.isServerBlazor) {\n const fileDropArea = this.createElement('span', { className: DROP_AREA });\n fileDropArea.innerHTML = this.localizedTexts('dropFilesHint');\n this.dropAreaWrapper.appendChild(fileDropArea);\n }\n }\n updateHTMLAttrToElement() {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (const pro of Object.keys(this.htmlAttributes)) {\n if (wrapperAttr$1.indexOf(pro) < 0) {\n this.element.setAttribute(pro, this.htmlAttributes[pro]);\n }\n }\n }\n }\n updateHTMLAttrToWrapper() {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (const pro of Object.keys(this.htmlAttributes)) {\n if (wrapperAttr$1.indexOf(pro) > -1) {\n if (pro === 'class') {\n const updatedClassValues = (this.htmlAttributes[pro].replace(/\\s+/g, ' ')).trim();\n if (updatedClassValues !== '') {\n addClass([this.uploadWrapper], updatedClassValues.split(' '));\n }\n }\n else if (pro === 'style') {\n let uploadStyle = this.uploadWrapper.getAttribute(pro);\n uploadStyle = !isNullOrUndefined(uploadStyle) ? (uploadStyle + this.htmlAttributes[pro]) :\n this.htmlAttributes[pro];\n this.uploadWrapper.setAttribute(pro, uploadStyle);\n }\n else {\n this.uploadWrapper.setAttribute(pro, this.htmlAttributes[pro]);\n }\n }\n }\n }\n }\n setMultipleSelection() {\n if (this.multiple && !this.element.hasAttribute('multiple')) {\n const newAttr = document.createAttribute('multiple');\n newAttr.value = 'multiple';\n this.element.setAttributeNode(newAttr);\n }\n else if (!this.multiple) {\n this.element.removeAttribute('multiple');\n }\n }\n checkAutoUpload(fileData) {\n if (this.autoUpload) {\n if (this.sequentialUpload) {\n /* istanbul ignore next */\n this.sequenceUpload(fileData);\n }\n else {\n this.upload(fileData);\n }\n this.removeActionButtons();\n }\n else if (!this.actionButtons) {\n this.renderActionButtons();\n }\n this.checkActionButtonStatus();\n }\n sequenceUpload(fileData) {\n if (this.filesData.length - fileData.length === 0 ||\n this.filesData[(this.filesData.length - fileData.length - 1)].statusCode !== '1') {\n ++this.count;\n const isFileListCreated = this.showFileList ? false : true;\n if (typeof this.filesData[this.count] === 'object') {\n this.isFirstFileOnSelection = false;\n this.upload(this.filesData[this.count], isFileListCreated);\n if (this.filesData[this.count].statusCode === '0') {\n this.sequenceUpload(fileData);\n }\n }\n else {\n --this.count;\n }\n }\n }\n setCSSClass(oldCSSClass) {\n let updatedCssClassValue = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassValue = (this.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(this.cssClass) && updatedCssClassValue !== '') {\n addClass([this.uploadWrapper], updatedCssClassValue.split(updatedCssClassValue.indexOf(',') > -1 ? ',' : ' '));\n }\n let updatedOldCssClass = oldCSSClass;\n if (!isNullOrUndefined(oldCSSClass)) {\n updatedOldCssClass = (oldCSSClass.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(oldCSSClass) && updatedOldCssClass !== '') {\n removeClass([this.uploadWrapper], updatedOldCssClass.split(' '));\n }\n }\n wireEvents() {\n EventHandler.add(this.browseButton, 'click', this.browseButtonClick, this);\n EventHandler.add(this.element, 'change', this.onSelectFiles, this);\n EventHandler.add(document, 'click', this.removeFocus, this);\n this.keyboardModule = new KeyboardEvents(this.uploadWrapper, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs,\n eventName: 'keydown'\n });\n if (this.isForm) {\n EventHandler.add(this.formElement, 'reset', this.resetForm, this);\n }\n }\n unWireEvents() {\n EventHandler.remove(this.browseButton, 'click', this.browseButtonClick);\n EventHandler.remove(this.element, 'change', this.onSelectFiles);\n EventHandler.remove(document, 'click', this.removeFocus);\n if (this.isForm) {\n EventHandler.remove(this.formElement, 'reset', this.resetForm);\n }\n if (this.keyboardModule) {\n this.keyboardModule.destroy();\n }\n }\n resetForm() {\n this.clearAll();\n }\n keyActionHandler(e) {\n const targetElement = e.target;\n switch (e.action) {\n case 'enter':\n if (e.target === this.clearButton) {\n this.clearButtonClick();\n }\n else if (e.target === this.uploadButton) {\n this.uploadButtonClick();\n }\n else if (e.target === this.browseButton) {\n this.browseButtonClick();\n }\n else if (targetElement.classList.contains(PAUSE_UPLOAD)) {\n const metaData = this.getCurrentMetaData(null, e);\n metaData.file.statusCode = '4';\n metaData.file.status = this.localizedTexts('pauseUpload');\n this.abortUpload(metaData, false);\n }\n else if (targetElement.classList.contains(RESUME_UPLOAD)) {\n this.resumeUpload(this.getCurrentMetaData(null, e), e);\n }\n else if (targetElement.classList.contains(RETRY_ICON)) {\n const metaData = this.getCurrentMetaData(null, e);\n if (!isNullOrUndefined(metaData)) {\n metaData.file.statusCode = '1';\n metaData.file.status = this.localizedTexts('readyToUploadMessage');\n this.chunkUpload(metaData.file);\n }\n else {\n const target = e.target.parentElement;\n const fileData = this.filesData[this.fileList.indexOf(target)];\n this.retry(fileData);\n }\n }\n else {\n this.removeFiles(e);\n if (!targetElement.classList.contains(ABORT_ICON)) {\n this.browseButton.focus();\n }\n }\n e.preventDefault();\n e.stopPropagation();\n break;\n }\n }\n getCurrentMetaData(fileInfo, e) {\n let fileData;\n let targetMetaData;\n if (isNullOrUndefined(fileInfo)) {\n const target = e.target.parentElement;\n fileData = this.filesData[this.fileList.indexOf(target)];\n }\n else {\n fileData = fileInfo;\n }\n for (let i = 0; i < this.uploadMetaData.length; i++) {\n if (this.uploadMetaData[i].file.name === fileData.name) {\n targetMetaData = this.uploadMetaData[i];\n }\n }\n return targetMetaData;\n }\n removeFocus() {\n if (this.uploadWrapper && this.listParent && this.listParent.querySelector('.' + ICON_FOCUSED)) {\n document.activeElement.blur();\n this.listParent.querySelector('.' + ICON_FOCUSED).classList.remove(ICON_FOCUSED);\n }\n }\n browseButtonClick() {\n this.element.click();\n }\n uploadButtonClick() {\n if (this.sequentialUpload) {\n this.sequenceUpload(this.filesData);\n }\n else {\n this.upload(this.filesData);\n }\n }\n clearButtonClick() {\n this.clearAll();\n /* istanbul ignore next */\n if (this.sequentialUpload) {\n this.count = -1;\n }\n this.actionCompleteCount = 0;\n }\n bindDropEvents() {\n if (this.dropZoneElement) {\n EventHandler.add(this.dropZoneElement, 'drop', this.dropElement, this);\n EventHandler.add(this.dropZoneElement, 'dragover', this.dragHover, this);\n EventHandler.add(this.dropZoneElement, 'dragleave', this.onDragLeave, this);\n EventHandler.add(this.dropZoneElement, 'paste', this.onPasteFile, this);\n EventHandler.add(this.dropZoneElement, 'dragenter', this.onDragEnter, this);\n }\n }\n unBindDropEvents() {\n if (this.dropZoneElement) {\n EventHandler.remove(this.dropZoneElement, 'drop', this.dropElement);\n EventHandler.remove(this.dropZoneElement, 'dragover', this.dragHover);\n EventHandler.remove(this.dropZoneElement, 'dragleave', this.onDragLeave);\n EventHandler.remove(this.dropZoneElement, 'dragenter', this.onDragEnter);\n }\n }\n onDragEnter(e) {\n if (!this.enabled) {\n return;\n }\n this.dropZoneElement.classList.add(DRAG_HOVER);\n this.dragCounter = this.dragCounter + 1;\n e.preventDefault();\n e.stopPropagation();\n }\n onDragLeave() {\n if (!this.enabled) {\n return;\n }\n this.dragCounter = this.dragCounter - 1;\n if (!this.dragCounter) {\n this.dropZoneElement.classList.remove(DRAG_HOVER);\n }\n }\n dragHover(e) {\n if (!this.enabled) {\n return;\n }\n if (this.dropEffect !== 'Default') {\n e.dataTransfer.dropEffect = this.dropEffect.toLowerCase();\n }\n e.preventDefault();\n e.stopPropagation();\n }\n /* istanbul ignore next */\n dropElement(e) {\n this.dragCounter = 0;\n this.dropZoneElement.classList.remove(DRAG_HOVER);\n this.onSelectFiles(e);\n e.preventDefault();\n e.stopPropagation();\n }\n /* istanbul ignore next */\n onPasteFile(event) {\n const item = event.clipboardData.items;\n if (item.length !== 1) {\n return;\n }\n const pasteFile = [].slice.call(item)[0];\n if ((pasteFile.kind === 'file') && pasteFile.type.match('^image/')) {\n this.renderSelectedFiles(event, [pasteFile.getAsFile()], false, true);\n }\n }\n getSelectedFiles(index) {\n const data = [];\n const liElement = this.fileList[index];\n const allFiles = this.getFilesData();\n const nameElements = +liElement.getAttribute('data-files-count');\n let startIndex = 0;\n for (let i = 0; i < index; i++) {\n startIndex += (+this.fileList[i].getAttribute('data-files-count'));\n }\n for (let j = startIndex; j < (startIndex + nameElements); j++) {\n data.push(allFiles[j]);\n }\n return data;\n }\n removeFiles(args) {\n if (!this.enabled) {\n return;\n }\n const selectedElement = args.target.parentElement;\n if (this.isBlazorSaveUrl) {\n this.fileList = [].slice.call(this.uploadWrapper.querySelectorAll('li'));\n }\n const index = this.fileList.indexOf(selectedElement);\n const liElement = this.fileList[index];\n const formUpload = this.isFormUpload();\n const fileData = formUpload ? this.getSelectedFiles(index) : this.getFilesInArray(this.filesData[index]);\n if (isNullOrUndefined(fileData)) {\n return;\n }\n if (args.target.classList.contains(ABORT_ICON) && !formUpload) {\n fileData[0].statusCode = '5';\n if (!isNullOrUndefined(liElement)) {\n const spinnerTarget = liElement.querySelector('.' + ABORT_ICON);\n createSpinner({ target: spinnerTarget, width: '20px' });\n showSpinner(spinnerTarget);\n }\n if (this.sequentialUpload) {\n /* istanbul ignore next */\n this.uploadSequential();\n }\n if (!(liElement.classList.contains(RESTRICT_RETRY))) {\n this.checkActionComplete(true);\n }\n }\n else if (!closest(args.target, '.' + SPINNER_PANE)) {\n this.remove(fileData, false, false, true, args);\n }\n this.element.value = '';\n this.checkActionButtonStatus();\n }\n removeFilesData(file, customTemplate) {\n let index;\n if (customTemplate) {\n if (!this.showFileList) {\n index = this.filesData.indexOf(file);\n this.filesData.splice(index, 1);\n }\n return;\n }\n const selectedElement = this.getLiElement(file);\n if (isNullOrUndefined(selectedElement)) {\n return;\n }\n if (!this.isBlazorSaveUrl) {\n detach(selectedElement);\n }\n index = this.fileList.indexOf(selectedElement);\n this.fileList.splice(index, 1);\n this.filesData.splice(index, 1);\n if (!this.isBlazorSaveUrl) {\n if (this.fileList.length === 0 && !isNullOrUndefined(this.listParent)) {\n detach(this.listParent);\n this.listParent = null;\n this.removeActionButtons();\n }\n if (this.sequentialUpload) {\n /* istanbul ignore next */\n if (index <= this.count) {\n --this.count;\n }\n }\n }\n else {\n this.interopAdaptor.invokeMethodAsync('removeFileData', index);\n }\n }\n removeUploadedFile(file, eventArgs, removeDirectly, custom) {\n const selectedFiles = file;\n const ajax = new Ajax(this.asyncSettings.removeUrl, 'POST', true, null);\n ajax.emitError = false;\n const formData = new FormData();\n ajax.beforeSend = (e) => {\n eventArgs.currentRequest = ajax.httpRequest;\n if (isBlazor()) {\n if (this.currentRequestHeader) {\n this.updateCustomheader(ajax.httpRequest, this.currentRequestHeader);\n }\n if (this.customFormDatas) {\n this.updateFormData(formData, this.customFormDatas);\n }\n }\n if (!removeDirectly) {\n this.trigger('removing', eventArgs, (eventArgs) => {\n if (eventArgs.cancel) {\n e.cancel = true;\n }\n else {\n this.removingEventCallback(eventArgs, formData, selectedFiles, file);\n }\n });\n }\n else {\n this.removingEventCallback(eventArgs, formData, selectedFiles, file);\n }\n };\n if (this.isServerBlazor) {\n const name = this.element.getAttribute('name');\n if (!isNullOrUndefined(selectedFiles.rawFile) && selectedFiles.rawFile !== '') {\n formData.append(name, selectedFiles.rawFile, selectedFiles.name);\n }\n else {\n formData.append(name, selectedFiles.name);\n }\n }\n ajax.onLoad = (e) => {\n this.removeCompleted(e, selectedFiles, custom);\n return {};\n };\n /* istanbul ignore next */\n ajax.onError = (e) => {\n this.removeFailed(e, selectedFiles, custom);\n return {};\n };\n ajax.send(formData);\n }\n removingEventCallback(eventArgs, formData, selectedFiles, file) {\n /* istanbul ignore next */\n const name = this.element.getAttribute('name');\n const liElement = this.getLiElement(file);\n if (!isNullOrUndefined(liElement) && (!isNullOrUndefined(liElement.querySelector('.' + DELETE_ICON)) ||\n !isNullOrUndefined(liElement.querySelector('.' + REMOVE_ICON)))) {\n const spinnerTarget = liElement.querySelector('.' + DELETE_ICON) ?\n liElement.querySelector('.' + DELETE_ICON) :\n liElement.querySelector('.' + REMOVE_ICON);\n createSpinner({ target: spinnerTarget, width: '20px' });\n showSpinner(spinnerTarget);\n }\n if (!this.isServerBlazor) {\n if (eventArgs.postRawFile && !isNullOrUndefined(selectedFiles.rawFile) && selectedFiles.rawFile !== '') {\n formData.append(name, selectedFiles.rawFile, selectedFiles.name);\n }\n else {\n formData.append(name, selectedFiles.name);\n }\n this.updateFormData(formData, eventArgs.customFormData);\n }\n }\n /* istanbul ignore next */\n updateFormData(formData, customData) {\n if (customData.length > 0 && customData[0]) {\n for (let i = 0; i < customData.length; i++) {\n const data = customData[i];\n // eslint-disable-next-line @typescript-eslint/tslint/config\n const value = Object.keys(data).map(function (e) {\n return data[e];\n });\n formData.append(Object.keys(data)[0], value);\n }\n }\n }\n /* istanbul ignore next */\n updateCustomheader(request, currentRequest) {\n if (currentRequest.length > 0 && currentRequest[0]) {\n for (let i = 0; i < currentRequest.length; i++) {\n const data = currentRequest[i];\n // eslint-disable-next-line @typescript-eslint/tslint/config\n const value = Object.keys(data).map(function (e) {\n return data[e];\n });\n request.setRequestHeader(Object.keys(data)[0], value);\n }\n }\n }\n removeCompleted(e, files, customTemplate) {\n const response = e && e.currentTarget ? this.getResponse(e) : null;\n const status = e.target;\n if (status.readyState === 4 && status.status >= 200 && status.status <= 299) {\n const args = {\n e, response: response, operation: 'remove', file: this.updateStatus(files, this.localizedTexts('removedSuccessMessage'), '2')\n };\n this.trigger('success', args);\n this.removeFilesData(files, customTemplate);\n const index = this.uploadedFilesData.indexOf(files);\n this.uploadedFilesData.splice(index, 1);\n this.trigger('change', { files: this.uploadedFilesData });\n }\n else {\n this.removeFailed(e, files, customTemplate);\n }\n }\n removeFailed(e, files, customTemplate) {\n const response = e && e.currentTarget ? this.getResponse(e) : null;\n const args = {\n e, response: response, operation: 'remove', file: this.updateStatus(files, this.localizedTexts('removedFailedMessage'), '0')\n };\n if (!customTemplate) {\n const index = this.filesData.indexOf(files);\n const rootElement = this.fileList[index];\n if (rootElement) {\n rootElement.classList.remove(UPLOAD_SUCCESS);\n rootElement.classList.add(UPLOAD_FAILED);\n const statusElement = rootElement.querySelector('.' + STATUS);\n if (statusElement) {\n statusElement.classList.remove(UPLOAD_SUCCESS);\n statusElement.classList.add(UPLOAD_FAILED);\n }\n }\n this.checkActionButtonStatus();\n }\n this.trigger('failure', args);\n const liElement = this.getLiElement(files);\n /* istanbul ignore next */\n if (!isNullOrUndefined(liElement) && !isNullOrUndefined(liElement.querySelector('.' + DELETE_ICON))) {\n const spinnerTarget = liElement.querySelector('.' + DELETE_ICON);\n hideSpinner(spinnerTarget);\n detach(liElement.querySelector('.e-spinner-pane'));\n }\n }\n /* istanbul ignore next */\n getFilesFromFolder(event) {\n this.filesEntries = [];\n const items = this.multiple ?\n event.dataTransfer.items : [event.dataTransfer.items[0]];\n const validDirectoryUpload = this.checkDirectoryUpload(items);\n if (!validDirectoryUpload) {\n return;\n }\n for (let i = 0; i < items.length; i++) {\n const item = items[i].webkitGetAsEntry();\n if (item.isFile) {\n const files = [];\n (item).file((fileObj) => {\n const path = item.fullPath;\n files.push({ 'path': path, 'file': fileObj });\n });\n this.renderSelectedFiles(event, files, true);\n }\n else if (item.isDirectory) {\n this.traverseFileTree(item, event);\n }\n }\n }\n /* istanbul ignore next */\n checkDirectoryUpload(items) {\n for (let i = 0; items && i < items.length; i++) {\n const item = items[i].webkitGetAsEntry();\n if (item.isDirectory) {\n return true;\n }\n }\n return false;\n }\n /* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n /* istanbul ignore next */\n traverseFileTree(item, event) {\n /* eslint-enable @typescript-eslint/explicit-module-boundary-types */\n if (item.isFile) {\n this.filesEntries.push(item);\n }\n else if (item.isDirectory) {\n const directoryReader = item.createReader();\n this.readFileFromDirectory(directoryReader, event);\n }\n }\n /* istanbul ignore next */\n readFileFromDirectory(directoryReader, event) {\n directoryReader.readEntries((entries) => {\n for (let i = 0; i < entries.length; i++) {\n this.traverseFileTree(entries[i], event);\n }\n this.pushFilesEntries(event);\n if (entries.length) {\n this.readFileFromDirectory(directoryReader);\n }\n });\n }\n pushFilesEntries(event) {\n const files = [];\n for (let i = 0; i < this.filesEntries.length; i++) {\n this.filesEntries[i].file((fileObj) => {\n if (this.filesEntries.length) {\n const path = this.filesEntries[i].fullPath;\n files.push({ 'path': path, 'file': fileObj });\n if (i === this.filesEntries.length - 1) {\n this.filesEntries = [];\n this.renderSelectedFiles(event, files, true);\n }\n }\n });\n }\n }\n onSelectFiles(args) {\n if (!this.enabled) {\n return;\n }\n let targetFiles;\n /* istanbul ignore next */\n if (args.type === 'drop') {\n if (this.directoryUpload) {\n this.getFilesFromFolder(args);\n }\n else {\n const files = this.sortFilesList = args.dataTransfer.files;\n if (this.browserName !== 'msie' && this.browserName !== 'edge' && this.browserName !== 'safari') {\n this.element.files = files;\n }\n if (files.length > 0) {\n targetFiles = this.multiple ? this.sortFileList(files) : [files[0]];\n this.renderSelectedFiles(args, targetFiles);\n }\n }\n }\n else {\n targetFiles = [].slice.call(args.target.files);\n this.renderSelectedFiles(args, targetFiles);\n }\n }\n /* istanbul ignore next */\n getBase64(file) {\n return new Promise((resolve, reject) => {\n const fileReader = new FileReader();\n fileReader.readAsDataURL(file);\n fileReader.onload = () => resolve(fileReader.result);\n fileReader.onerror = (error) => reject(error);\n });\n }\n /* istanbul ignore next */\n /* tslint:ignore */\n renderSelectedFiles(args, targetFiles, directory, paste) {\n this.base64String = [];\n const eventArgs = {\n event: args,\n cancel: false,\n filesData: [],\n isModified: false,\n modifiedFilesData: [],\n progressInterval: '',\n isCanceled: false,\n currentRequest: null,\n customFormData: null\n };\n /* istanbul ignore next */\n if (targetFiles.length < 1) {\n eventArgs.isCanceled = true;\n this.trigger('selected', eventArgs);\n return;\n }\n this.flag = true;\n let fileData = [];\n if (!this.multiple) {\n this.clearData(true);\n targetFiles = [targetFiles[0]];\n }\n for (let i = 0; i < targetFiles.length; i++) {\n const file = directory ? targetFiles[i].file : targetFiles[i];\n this.updateInitialFileDetails(args, targetFiles, file, i, fileData, directory, paste);\n }\n eventArgs.filesData = fileData;\n if (this.allowedExtensions.indexOf('*') > -1) {\n this.allTypes = true;\n }\n if (!this.allTypes) {\n fileData = this.checkExtension(fileData);\n }\n this.trigger('selected', eventArgs, (eventArgs) => {\n this._internalRenderSelect(eventArgs, fileData);\n });\n }\n updateInitialFileDetails(args, \n // eslint-disable-next-line @typescript-eslint/indent\n targetFiles, file, i, fileData, directory, paste) {\n const fileName = directory ? targetFiles[i].path.substring(1, targetFiles[i].path.length) : paste ?\n getUniqueID(file.name.substring(0, file.name.lastIndexOf('.'))) + '.' + this.getFileType(file.name) :\n this.directoryUpload ? targetFiles[i].webkitRelativePath : file.name;\n const fileDetails = {\n name: fileName,\n rawFile: file,\n size: file.size,\n status: this.localizedTexts('readyToUploadMessage'),\n type: this.getFileType(file.name),\n validationMessages: this.validatedFileSize(file.size),\n statusCode: '1',\n id: getUniqueID(file.name.substring(0, file.name.lastIndexOf('.'))) + '.' + this.getFileType(file.name)\n };\n /* istanbul ignore next */\n if (paste) {\n fileDetails.fileSource = 'paste';\n }\n fileDetails.status = fileDetails.validationMessages.minSize !== '' ? this.localizedTexts('invalidMinFileSize') :\n fileDetails.validationMessages.maxSize !== '' ? this.localizedTexts('invalidMaxFileSize') : fileDetails.status;\n if (fileDetails.validationMessages.minSize !== '' || fileDetails.validationMessages.maxSize !== '') {\n fileDetails.statusCode = '0';\n }\n fileData.push(fileDetails);\n }\n _internalRenderSelect(eventArgs, fileData) {\n if (!eventArgs.cancel) {\n /* istanbul ignore next */\n if (isBlazor()) {\n this.currentRequestHeader = eventArgs.currentRequest;\n this.customFormDatas = eventArgs.customFormData;\n }\n this.selectedFiles = this.selectedFiles.concat(fileData);\n this.btnTabIndex = this.disableKeyboardNavigation ? '-1' : '0';\n if (this.showFileList) {\n if (eventArgs.isModified && eventArgs.modifiedFilesData.length > 0) {\n for (let j = 0; j < eventArgs.modifiedFilesData.length; j++) {\n for (let k = 0; k < fileData.length; k++) {\n if (eventArgs.modifiedFilesData[j].id === fileData[k].id) {\n eventArgs.modifiedFilesData[j].rawFile = fileData[k].rawFile;\n }\n }\n }\n const dataFiles = this.allTypes ? eventArgs.modifiedFilesData :\n this.checkExtension(eventArgs.modifiedFilesData);\n this.updateSortedFileList(dataFiles);\n this.filesData = dataFiles;\n if (!this.isForm || this.allowUpload()) {\n this.checkAutoUpload(dataFiles);\n }\n }\n else {\n this.createFileList(fileData, true);\n if (!(this.isBlazorSaveUrl || this.isBlazorTemplate)) {\n this.filesData = this.filesData.concat(fileData);\n }\n if (!this.isForm || this.allowUpload()) {\n if (!(this.isBlazorSaveUrl || this.isBlazorTemplate)) {\n this.checkAutoUpload(fileData);\n }\n }\n }\n if (!isNullOrUndefined(eventArgs.progressInterval) && eventArgs.progressInterval !== '') {\n this.progressInterval = eventArgs.progressInterval;\n }\n }\n else {\n this.filesData = this.filesData.concat(fileData);\n if (this.isBlazorSaveUrl) {\n this.interopAdaptor.invokeMethodAsync('updateServerFileData', this.filesData, this.isForm);\n }\n if (this.autoUpload) {\n this.upload(this.filesData, true);\n }\n }\n this.raiseActionComplete();\n this.isFirstFileOnSelection = true;\n }\n }\n allowUpload() {\n let allowFormUpload = false;\n if (this.isForm && (!isNullOrUndefined(this.asyncSettings.saveUrl) && this.asyncSettings.saveUrl !== '')) {\n allowFormUpload = true;\n }\n return allowFormUpload;\n }\n isFormUpload() {\n let isFormUpload = false;\n if (this.isForm && ((isNullOrUndefined(this.asyncSettings.saveUrl) || this.asyncSettings.saveUrl === '')\n && (isNullOrUndefined(this.asyncSettings.removeUrl) || this.asyncSettings.removeUrl === ''))) {\n isFormUpload = true;\n }\n return isFormUpload;\n }\n clearData(singleUpload) {\n if (!isNullOrUndefined(this.listParent) && !(this.isBlazorSaveUrl || this.isBlazorTemplate)) {\n detach(this.listParent);\n this.listParent = null;\n }\n if (this.browserName !== 'msie' && !singleUpload) {\n this.element.value = '';\n }\n this.fileList = [];\n this.filesData = [];\n if (this.isBlazorSaveUrl || this.isBlazorTemplate) {\n this.interopAdaptor.invokeMethodAsync('clearAll');\n }\n else {\n this.removeActionButtons();\n }\n }\n updateSortedFileList(filesData) {\n const previousListClone = this.createElement('div', { id: 'clonewrapper' });\n let added = -1;\n let removedList;\n if (this.listParent) {\n for (let i = 0; i < this.listParent.querySelectorAll('li').length; i++) {\n const liElement = this.listParent.querySelectorAll('li')[i];\n previousListClone.appendChild(liElement.cloneNode(true));\n }\n removedList = this.listParent.querySelectorAll('li');\n for (const item of removedList) {\n detach(item);\n }\n this.removeActionButtons();\n const oldList = [].slice.call(previousListClone.childNodes);\n detach(this.listParent);\n this.listParent = null;\n this.fileList = [];\n this.createParentUL();\n for (let index = 0; index < filesData.length; index++) {\n for (let j = 0; j < this.filesData.length; j++) {\n if (this.filesData[j].name === filesData[index].name) {\n this.listParent.appendChild(oldList[j]);\n EventHandler.add(oldList[j].querySelector('.e-icons'), 'click', this.removeFiles, this);\n this.fileList.push(oldList[j]);\n added = index;\n }\n }\n if (added !== index) {\n this.createFileList([filesData[index]]);\n }\n }\n }\n else {\n this.createFileList(filesData);\n }\n }\n isBlank(str) {\n return (!str || /^\\s*$/.test(str));\n }\n checkExtension(files) {\n const dropFiles = files;\n if (!this.isBlank(this.allowedExtensions)) {\n const allowedExtensions = [];\n const extensions = this.allowedExtensions.split(',');\n for (const extension of extensions) {\n allowedExtensions.push(extension.trim().toLocaleLowerCase());\n }\n for (let i = 0; i < files.length; i++) {\n if (allowedExtensions.indexOf(('.' + files[i].type).toLocaleLowerCase()) === -1) {\n files[i].status = this.localizedTexts('invalidFileType');\n files[i].statusCode = '0';\n }\n }\n }\n return dropFiles;\n }\n validatedFileSize(fileSize) {\n let minSizeError = '';\n let maxSizeError = '';\n if (fileSize < this.minFileSize) {\n minSizeError = this.localizedTexts('invalidMinFileSize');\n }\n else if (fileSize > this.maxFileSize) {\n maxSizeError = this.localizedTexts('invalidMaxFileSize');\n }\n else {\n minSizeError = '';\n maxSizeError = '';\n }\n const errorMessage = { minSize: minSizeError, maxSize: maxSizeError };\n return errorMessage;\n }\n isPreLoadFile(fileData) {\n let isPreload = false;\n for (let i = 0; i < this.files.length; i++) {\n if (this.files[i].name === fileData.name.slice(0, fileData.name.lastIndexOf('.')) && this.files[i].type === fileData.type) {\n isPreload = true;\n }\n }\n return isPreload;\n }\n createCustomfileList(fileData) {\n this.createParentUL();\n resetBlazorTemplate(this.element.id + 'Template', 'Template');\n for (const listItem of fileData) {\n const listElement = this.createElement('li', { className: FILE, attrs: { 'data-file-name': listItem.name } });\n this.uploadTemplateFn = this.templateComplier(this.template);\n const liTempCompiler = this.uploadTemplateFn(listItem, this, 'template', this.element.id + 'Template', this.isStringTemplate, null, listElement);\n if (liTempCompiler) {\n const fromElements = [].slice.call(liTempCompiler);\n append(fromElements, listElement);\n }\n const index = fileData.indexOf(listItem);\n const eventArgs = {\n element: listElement,\n fileInfo: listItem,\n index: index,\n isPreload: this.isPreLoadFile(listItem)\n };\n const eventsArgs = {\n element: listElement,\n fileInfo: listItem,\n index: index,\n isPreload: this.isPreLoadFile(listItem)\n };\n this.trigger('rendering', eventArgs);\n this.trigger('fileListRendering', eventsArgs);\n this.listParent.appendChild(listElement);\n this.fileList.push(listElement);\n }\n this.renderReactTemplates();\n updateBlazorTemplate(this.element.id + 'Template', 'Template', this, false);\n }\n createParentUL() {\n if (isNullOrUndefined(this.listParent)) {\n this.listParent = this.createElement('ul', { className: LIST_PARENT });\n this.uploadWrapper.appendChild(this.listParent);\n }\n }\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n formFileList(fileData, files) {\n const fileList = this.createElement('li', { className: FILE });\n fileList.setAttribute('data-files-count', fileData.length + '');\n const fileContainer = this.createElement('span', { className: TEXT_CONTAINER });\n let statusMessage;\n for (const listItem of fileData) {\n const fileNameEle = this.createElement('span', { className: FILE_NAME });\n fileNameEle.innerHTML = this.getFileNameOnly(listItem.name);\n const fileTypeEle = this.createElement('span', { className: FILE_TYPE });\n const fileType = this.getFileType(listItem.name);\n fileTypeEle.innerHTML = '.' + fileType;\n if (!fileType) {\n fileTypeEle.classList.add('e-hidden');\n }\n if (!this.enableRtl) {\n fileContainer.appendChild(fileNameEle);\n fileContainer.appendChild(fileTypeEle);\n }\n else {\n const rtlContainer = this.createElement('span', { className: RTL_CONTAINER });\n rtlContainer.appendChild(fileTypeEle);\n rtlContainer.appendChild(fileNameEle);\n fileContainer.appendChild(rtlContainer);\n }\n this.truncateName(fileNameEle);\n statusMessage = this.formValidateFileInfo(listItem, fileList);\n }\n fileList.appendChild(fileContainer);\n this.setListToFileInfo(fileData, fileList);\n const index = this.listParent.querySelectorAll('li').length;\n const infoEle = this.createElement('span');\n if (fileList.classList.contains(INVALID_FILE)) {\n infoEle.classList.add(STATUS);\n infoEle.classList.add(INVALID_FILE);\n infoEle.innerText = fileData.length > 1 ? this.localizedTexts('invalidFileSelection') : statusMessage;\n }\n else {\n infoEle.classList.add(fileData.length > 1 ? INFORMATION : FILE_SIZE);\n infoEle.innerText = fileData.length > 1 ? this.localizedTexts('totalFiles') + ': ' + fileData.length + ' , '\n + this.localizedTexts('size') + ': ' +\n this.bytesToSize(this.getFileSize(fileData)) : this.bytesToSize(fileData[0].size);\n this.createFormInput(fileData);\n }\n fileContainer.appendChild(infoEle);\n if (isNullOrUndefined(fileList.querySelector('.e-icons'))) {\n const iconElement = this.createElement('span', { className: 'e-icons', attrs: { 'tabindex': this.btnTabIndex } });\n /* istanbul ignore next */\n if (this.browserName === 'msie') {\n iconElement.classList.add('e-msie');\n }\n iconElement.setAttribute('title', this.localizedTexts('remove'));\n fileList.appendChild(fileContainer);\n fileList.appendChild(iconElement);\n EventHandler.add(iconElement, 'click', this.removeFiles, this);\n iconElement.classList.add(REMOVE_ICON);\n }\n const eventArgs = {\n element: fileList,\n fileInfo: this.mergeFileInfo(fileData, fileList),\n index: index,\n isPreload: this.isPreLoadFile(this.mergeFileInfo(fileData, fileList))\n };\n const eventsArgs = {\n element: fileList,\n fileInfo: this.mergeFileInfo(fileData, fileList),\n index: index,\n isPreload: this.isPreLoadFile(this.mergeFileInfo(fileData, fileList))\n };\n this.trigger('rendering', eventArgs);\n this.trigger('fileListRendering', eventsArgs);\n this.listParent.appendChild(fileList);\n this.fileList.push(fileList);\n }\n formValidateFileInfo(listItem, fileList) {\n let statusMessage = listItem.status;\n const validationMessages = this.validatedFileSize(listItem.size);\n if (validationMessages.minSize !== '' || validationMessages.maxSize !== '') {\n this.addInvalidClass(fileList);\n statusMessage = validationMessages.minSize !== '' ? this.localizedTexts('invalidMinFileSize') :\n validationMessages.maxSize !== '' ? this.localizedTexts('invalidMaxFileSize') : statusMessage;\n }\n const typeValidationMessage = this.checkExtension(this.getFilesInArray(listItem))[0].status;\n if (typeValidationMessage === this.localizedTexts('invalidFileType')) {\n this.addInvalidClass(fileList);\n statusMessage = typeValidationMessage;\n }\n return statusMessage;\n }\n addInvalidClass(fileList) {\n fileList.classList.add(INVALID_FILE);\n }\n createFormInput(fileData) {\n const inputElement = this.element.cloneNode(true);\n inputElement.classList.add(HIDDEN_INPUT);\n for (const listItem of fileData) {\n listItem.input = inputElement;\n }\n inputElement.setAttribute('name', this.uploaderName);\n this.uploadWrapper.querySelector('.' + INPUT_WRAPPER).appendChild(inputElement);\n if (this.browserName !== 'msie' && this.browserName !== 'edge') {\n this.element.value = '';\n }\n }\n getFileSize(fileData) {\n let fileSize = 0;\n for (const file of fileData) {\n fileSize += file.size;\n }\n return fileSize;\n }\n mergeFileInfo(fileData, fileList) {\n const result = {\n name: '',\n rawFile: '',\n size: 0,\n status: '',\n type: '',\n validationMessages: { minSize: '', maxSize: '' },\n statusCode: '1',\n list: fileList\n };\n const fileNames = [];\n let type = '';\n for (const listItem of fileData) {\n fileNames.push(listItem.name);\n type = listItem.type;\n }\n result.name = fileNames.join(', ');\n result.size = this.getFileSize(fileData);\n result.type = type;\n result.status = this.statusForFormUpload(fileData, fileList);\n return result;\n }\n statusForFormUpload(fileData, fileList) {\n let isValid = true;\n let statusMessage;\n for (const listItem of fileData) {\n statusMessage = listItem.status;\n const validationMessages = this.validatedFileSize(listItem.size);\n if (validationMessages.minSize !== '' || validationMessages.maxSize !== '') {\n isValid = false;\n statusMessage = validationMessages.minSize !== '' ? this.localizedTexts('invalidMinFileSize') :\n validationMessages.maxSize !== '' ? this.localizedTexts('invalidMaxFileSize') : statusMessage;\n }\n const typeValidationMessage = this.checkExtension(this.getFilesInArray(listItem))[0].status;\n if (typeValidationMessage === this.localizedTexts('invalidFileType')) {\n isValid = false;\n statusMessage = typeValidationMessage;\n }\n }\n if (!isValid) {\n fileList.classList.add(INVALID_FILE);\n statusMessage = fileData.length > 1 ? this.localizedTexts('invalidFileSelection') : statusMessage;\n }\n else {\n statusMessage = this.localizedTexts('totalFiles') + ': ' + fileData.length + ' , '\n + this.localizedTexts('size') + ': ' +\n this.bytesToSize(this.getFileSize(fileData));\n }\n return statusMessage;\n }\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n formCustomFileList(fileData, files) {\n this.createParentUL();\n resetBlazorTemplate(this.element.id + 'Template', 'Template');\n const fileList = this.createElement('li', { className: FILE });\n fileList.setAttribute('data-files-count', fileData.length + '');\n this.setListToFileInfo(fileData, fileList);\n const result = this.mergeFileInfo(fileData, fileList);\n fileList.setAttribute('data-file-name', result.name);\n this.uploadTemplateFn = this.templateComplier(this.template);\n const liTempCompiler = this.uploadTemplateFn(result, this, 'template', this.element.id + 'Template', this.isStringTemplate, null, fileList);\n if (liTempCompiler) {\n const fromElements = [].slice.call(liTempCompiler);\n append(fromElements, fileList);\n }\n const index = this.listParent.querySelectorAll('li').length;\n if (!fileList.classList.contains(INVALID_FILE)) {\n this.createFormInput(fileData);\n }\n const eventArgs = {\n element: fileList,\n fileInfo: result,\n index: index,\n isPreload: this.isPreLoadFile(result)\n };\n const eventsArgs = {\n element: fileList,\n fileInfo: result,\n index: index,\n isPreload: this.isPreLoadFile(result)\n };\n this.trigger('rendering', eventArgs);\n this.trigger('fileListRendering', eventsArgs);\n this.listParent.appendChild(fileList);\n this.fileList.push(fileList);\n this.renderReactTemplates();\n updateBlazorTemplate(this.element.id + 'Template', 'Template', this, false);\n }\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Create the file list for specified files data.\n *\n * @param { FileInfo[] } fileData - Specifies the files data for file list creation.\n * @returns {void}\n */\n createFileList(fileData, isSelectedFile) {\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n if (this.isBlazorSaveUrl || this.isBlazorTemplate) {\n const fileListData = (isSelectedFile) ? this.filesData = this.filesData.concat(fileData) : fileData;\n this.interopAdaptor.invokeMethodAsync('createFileList', fileListData, this.isForm);\n }\n else {\n this.createParentUL();\n if (this.template !== '' && !isNullOrUndefined(this.template)) {\n if (this.isFormUpload()) {\n this.uploadWrapper.classList.add(FORM_UPLOAD);\n this.formCustomFileList(fileData, this.element.files);\n }\n else {\n this.createCustomfileList(fileData);\n }\n }\n else if (this.isFormUpload()) {\n this.uploadWrapper.classList.add(FORM_UPLOAD);\n this.formFileList(fileData, this.element.files);\n }\n else {\n for (const listItem of fileData) {\n const liElement = this.createElement('li', {\n className: FILE,\n attrs: { 'data-file-name': listItem.name, 'data-files-count': '1' }\n });\n const textContainer = this.createElement('span', { className: TEXT_CONTAINER });\n const textElement = this.createElement('span', { className: FILE_NAME, attrs: { 'title': listItem.name } });\n textElement.innerHTML = this.getFileNameOnly(listItem.name);\n const fileExtension = this.createElement('span', { className: FILE_TYPE });\n const fileType = this.getFileType(listItem.name);\n fileExtension.innerHTML = '.' + fileType;\n if (!fileType) {\n fileExtension.classList.add('e-hidden');\n }\n if (!this.enableRtl) {\n textContainer.appendChild(textElement);\n textContainer.appendChild(fileExtension);\n }\n else {\n const rtlContainer = this.createElement('span', { className: RTL_CONTAINER });\n rtlContainer.appendChild(fileExtension);\n rtlContainer.appendChild(textElement);\n textContainer.appendChild(rtlContainer);\n }\n const fileSize = this.createElement('span', { className: FILE_SIZE });\n fileSize.innerHTML = this.bytesToSize(listItem.size);\n textContainer.appendChild(fileSize);\n const statusElement = this.createElement('span', { className: STATUS });\n textContainer.appendChild(statusElement);\n statusElement.innerHTML = listItem.status;\n liElement.appendChild(textContainer);\n const iconElement = this.createElement('span', { className: ' e-icons',\n attrs: { 'tabindex': this.btnTabIndex } });\n /* istanbul ignore next */\n if (this.browserName === 'msie') {\n iconElement.classList.add('e-msie');\n }\n iconElement.setAttribute('title', this.localizedTexts('remove'));\n liElement.appendChild(iconElement);\n EventHandler.add(iconElement, 'click', this.removeFiles, this);\n if (listItem.statusCode === '2') {\n statusElement.classList.add(UPLOAD_SUCCESS);\n iconElement.classList.add(DELETE_ICON);\n iconElement.setAttribute('title', this.localizedTexts('delete'));\n }\n else if (listItem.statusCode !== '1') {\n statusElement.classList.remove(UPLOAD_SUCCESS);\n statusElement.classList.add(VALIDATION_FAILS);\n }\n if (this.autoUpload && listItem.statusCode === '1' && this.asyncSettings.saveUrl !== '') {\n statusElement.innerHTML = '';\n }\n if (!iconElement.classList.contains(DELETE_ICON)) {\n iconElement.classList.add(REMOVE_ICON);\n }\n const index = fileData.indexOf(listItem);\n const eventArgs = {\n element: liElement,\n fileInfo: listItem,\n index: index,\n isPreload: this.isPreLoadFile(listItem)\n };\n const eventsArgs = {\n element: liElement,\n fileInfo: listItem,\n index: index,\n isPreload: this.isPreLoadFile(listItem)\n };\n this.trigger('rendering', eventArgs);\n this.trigger('fileListRendering', eventsArgs);\n this.listParent.appendChild(liElement);\n this.fileList.push(liElement);\n this.truncateName(textElement);\n const preventActionComplete = this.flag;\n if (this.isPreLoadFile(listItem)) {\n this.flag = false;\n this.checkActionComplete(true);\n this.flag = preventActionComplete;\n }\n }\n }\n }\n }\n getSlicedName(nameElement) {\n const text = nameElement.textContent;\n nameElement.dataset.tail = text.slice(text.length - 10);\n }\n setListToFileInfo(fileData, fileList) {\n for (const listItem of fileData) {\n listItem.list = fileList;\n }\n }\n truncateName(name) {\n const nameElement = name;\n if (this.browserName !== 'edge' && nameElement.offsetWidth < nameElement.scrollWidth) {\n this.getSlicedName(nameElement);\n /* istanbul ignore next */\n }\n else if (nameElement.offsetWidth + 1 < nameElement.scrollWidth) {\n this.getSlicedName(nameElement);\n }\n }\n getFileType(name) {\n let extension;\n const index = name.lastIndexOf('.');\n if (index >= 0) {\n extension = name.substring(index + 1);\n }\n return extension ? extension : '';\n }\n getFileNameOnly(name) {\n let type = this.getFileType(name);\n const names = name.split('.' + type);\n return type = names[0];\n }\n setInitialAttributes() {\n if (this.initialAttr.accept) {\n this.element.setAttribute('accept', this.initialAttr.accept);\n }\n if (this.initialAttr.disabled) {\n this.element.setAttribute('disabled', 'disabled');\n }\n if (this.initialAttr.multiple) {\n const newAttr = document.createAttribute('multiple');\n this.element.setAttributeNode(newAttr);\n }\n }\n filterfileList(files) {\n const filterFiles = [];\n let li;\n for (let i = 0; i < files.length; i++) {\n li = this.getLiElement(files[i]);\n if (!li.classList.contains(UPLOAD_SUCCESS)) {\n filterFiles.push(files[i]);\n }\n }\n return filterFiles;\n }\n updateStatus(files, status, statusCode, updateLiStatus = true) {\n if (!(status === '' || isNullOrUndefined(status)) && !(statusCode === '' || isNullOrUndefined(statusCode))) {\n if (this.isBlazorSaveUrl) {\n for (let i = 0; i < this.filesData.length; i++) {\n if (this.filesData[i].name === files.name) {\n this.filesData[i].status = status;\n this.filesData[i].statusCode = statusCode;\n }\n }\n }\n else {\n files.status = status;\n files.statusCode = statusCode;\n }\n }\n if (updateLiStatus) {\n const li = this.getLiElement(files);\n if (!isNullOrUndefined(li)) {\n if (!isNullOrUndefined(li.querySelector('.' + STATUS)) && !((status === '' || isNullOrUndefined(status)))) {\n li.querySelector('.' + STATUS).textContent = status;\n }\n }\n }\n return files;\n }\n getLiElement(files) {\n let index;\n for (let i = 0; i < this.filesData.length; i++) {\n if ((!isNullOrUndefined(this.filesData[i].id) && !isNullOrUndefined(files.id)) ? (this.filesData[i].name === files.name &&\n this.filesData[i].id === files.id) : this.filesData[i].name === files.name) {\n index = i;\n }\n }\n return this.fileList[index];\n }\n createProgressBar(liElement) {\n const progressbarWrapper = this.createElement('span', { className: PROGRESS_WRAPPER });\n const progressBar = this.createElement('progressbar', { className: PROGRESSBAR, attrs: { value: '0', max: '100' } });\n const progressbarInnerWrapper = this.createElement('span', { className: PROGRESS_INNER_WRAPPER });\n progressBar.setAttribute('style', 'width: 0%');\n const progressbarText = this.createElement('span', { className: PROGRESSBAR_TEXT });\n progressbarText.textContent = '0%';\n progressbarInnerWrapper.appendChild(progressBar);\n progressbarWrapper.appendChild(progressbarInnerWrapper);\n progressbarWrapper.appendChild(progressbarText);\n liElement.querySelector('.' + TEXT_CONTAINER).appendChild(progressbarWrapper);\n }\n /* istanbul ignore next */\n updateProgressbar(e, li) {\n if (!isNaN(Math.round((e.loaded / e.total) * 100)) && !isNullOrUndefined(li.querySelector('.' + PROGRESSBAR))) {\n if (!isNullOrUndefined(this.progressInterval) && this.progressInterval !== '') {\n const value = (Math.round((e.loaded / e.total) * 100)) % parseInt(this.progressInterval, 10);\n if (value === 0 || value === 100) {\n this.changeProgressValue(li, Math.round((e.loaded / e.total) * 100).toString() + '%');\n }\n }\n else {\n this.changeProgressValue(li, Math.round((e.loaded / e.total) * 100).toString() + '%');\n }\n }\n }\n changeProgressValue(li, progressValue) {\n li.querySelector('.' + PROGRESSBAR).setAttribute('style', 'width:' + progressValue);\n li.querySelector('.' + PROGRESSBAR_TEXT).textContent = progressValue;\n }\n uploadInProgress(e, files, customUI, request) {\n const li = this.getLiElement(files);\n if (isNullOrUndefined(li) && (!customUI)) {\n return;\n }\n if (!isNullOrUndefined(li)) {\n /* istanbul ignore next */\n if (files.statusCode === '5') {\n this.cancelUploadingFile(files, e, request, li);\n }\n if (!(li.querySelectorAll('.' + PROGRESS_WRAPPER).length > 0) && li.querySelector('.' + STATUS)) {\n li.querySelector('.' + STATUS).classList.add(UPLOAD_INPROGRESS);\n this.createProgressBar(li);\n this.updateProgressBarClasses(li, UPLOAD_INPROGRESS);\n li.querySelector('.' + STATUS).classList.remove(UPLOAD_FAILED);\n }\n this.updateProgressbar(e, li);\n const iconEle = li.querySelector('.' + REMOVE_ICON);\n if (!isNullOrUndefined(iconEle)) {\n iconEle.classList.add(ABORT_ICON, UPLOAD_INPROGRESS);\n iconEle.setAttribute('title', this.localizedTexts('abort'));\n iconEle.classList.remove(REMOVE_ICON);\n }\n }\n else {\n this.cancelUploadingFile(files, e, request);\n }\n const args = { e, operation: 'upload', file: this.updateStatus(files, this.localizedTexts('inProgress'), '3') };\n this.trigger('progress', args);\n }\n /* istanbul ignore next */\n cancelUploadingFile(files, e, request, li) {\n if (files.statusCode === '5') {\n const eventArgs = {\n event: e,\n fileData: files,\n cancel: false,\n customFormData: []\n };\n this.trigger('canceling', eventArgs, (eventArgs) => {\n if (eventArgs.cancel) {\n files.statusCode = '3';\n if (!isNullOrUndefined(li)) {\n const spinnerTarget = li.querySelector('.' + ABORT_ICON);\n if (!isNullOrUndefined(spinnerTarget)) {\n hideSpinner(spinnerTarget);\n detach(li.querySelector('.e-spinner-pane'));\n }\n }\n }\n else {\n request.emitError = false;\n request.httpRequest.abort();\n const formData = new FormData();\n if (files.statusCode === '5') {\n const name = this.element.getAttribute('name');\n formData.append(name, files.name);\n formData.append('cancel-uploading', files.name);\n this.updateFormData(formData, eventArgs.customFormData);\n const ajax = new Ajax(this.asyncSettings.removeUrl, 'POST', true, null);\n ajax.emitError = false;\n ajax.onLoad = (e) => {\n this.removecanceledFile(e, files);\n return {};\n };\n ajax.send(formData);\n }\n }\n });\n }\n }\n removecanceledFile(e, file) {\n const liElement = this.getLiElement(file);\n if (liElement.querySelector('.' + RETRY_ICON) || isNullOrUndefined(liElement.querySelector('.' + ABORT_ICON))) {\n return;\n }\n this.updateStatus(file, this.localizedTexts('fileUploadCancel'), '5');\n this.renderFailureState(e, file, liElement);\n const spinnerTarget = liElement.querySelector('.' + REMOVE_ICON);\n if (!isNullOrUndefined(liElement)) {\n hideSpinner(spinnerTarget);\n if (!isNullOrUndefined(liElement.querySelector('.e-spinner-pane'))) {\n detach(liElement.querySelector('.e-spinner-pane'));\n }\n }\n const requestResponse = e && e.currentTarget ? this.getResponse(e) : null;\n const args = { event: e, response: requestResponse, operation: 'cancel', file: file };\n this.trigger('success', args);\n }\n renderFailureState(e, file, liElement) {\n this.updateProgressBarClasses(liElement, UPLOAD_FAILED);\n this.removeProgressbar(liElement, 'failure');\n if (!isNullOrUndefined(liElement.querySelector('.e-file-status'))) {\n liElement.querySelector('.e-file-status').classList.add(UPLOAD_FAILED);\n }\n const deleteIcon = liElement.querySelector('.' + ABORT_ICON);\n if (isNullOrUndefined(deleteIcon)) {\n return;\n }\n deleteIcon.classList.remove(ABORT_ICON, UPLOAD_INPROGRESS);\n deleteIcon.classList.add(REMOVE_ICON);\n deleteIcon.setAttribute('title', this.localizedTexts('remove'));\n this.pauseButton = this.createElement('span', { className: 'e-icons e-file-reload-btn', attrs: { 'tabindex': this.btnTabIndex } });\n deleteIcon.parentElement.insertBefore(this.pauseButton, deleteIcon);\n this.pauseButton.setAttribute('title', this.localizedTexts('retry'));\n const retryElement = liElement.querySelector('.' + RETRY_ICON);\n /* istanbul ignore next */\n retryElement.addEventListener('click', (e) => {\n this.reloadcanceledFile(e, file, liElement, false);\n }, false);\n }\n reloadcanceledFile(e, file, liElement, custom) {\n file.statusCode = '1';\n file.status = this.localizedTexts('readyToUploadMessage');\n if (!custom) {\n if (!isNullOrUndefined(liElement.querySelector('.' + STATUS))) {\n liElement.querySelector('.' + STATUS).classList.remove(UPLOAD_FAILED);\n }\n if (!isNullOrUndefined(liElement.querySelector('.' + RETRY_ICON))) {\n detach(liElement.querySelector('.' + RETRY_ICON));\n }\n this.pauseButton = null;\n }\n /* istanbul ignore next */\n liElement.classList.add(RESTRICT_RETRY);\n this.upload([file]);\n }\n /* istanbul ignore next */\n uploadComplete(e, file, customUI) {\n const status = e.target;\n if (status.readyState === 4 && status.status >= 200 && status.status <= 299) {\n const li = this.getLiElement(file);\n if (isNullOrUndefined(li) && (!customUI || isNullOrUndefined(customUI))) {\n return;\n }\n if (!isNullOrUndefined(li)) {\n this.updateProgressBarClasses(li, UPLOAD_SUCCESS);\n this.removeProgressbar(li, 'success');\n const iconEle = li.querySelector('.' + ABORT_ICON);\n if (!isNullOrUndefined(iconEle)) {\n iconEle.classList.add(DELETE_ICON);\n iconEle.setAttribute('title', this.localizedTexts('delete'));\n iconEle.classList.remove(ABORT_ICON);\n iconEle.classList.remove(UPLOAD_INPROGRESS);\n }\n }\n this.raiseSuccessEvent(e, file);\n }\n else {\n this.uploadFailed(e, file);\n }\n }\n getResponse(e) {\n const target = e.currentTarget;\n const response = {\n readyState: target.readyState,\n statusCode: target.status,\n statusText: target.statusText,\n headers: target.getAllResponseHeaders(),\n withCredentials: target.withCredentials\n };\n return response;\n }\n /* istanbul ignore next */\n serverRemoveIconBindEvent() {\n if (this.uploadWrapper && this.isBlazorSaveUrl) {\n const iconElement = [].slice.call(this.uploadWrapper.querySelectorAll('ul li'));\n for (let i = 0; i < iconElement.length; i++) {\n const removeIconEle = (iconElement[i]) ? iconElement[i].querySelector('.e-icons') : null;\n if (removeIconEle) {\n EventHandler.remove(removeIconEle, 'click', this.removeFiles);\n EventHandler.add(removeIconEle, 'click', this.removeFiles, this);\n }\n }\n }\n }\n raiseSuccessEvent(e, file) {\n const response = e && e.currentTarget ? this.getResponse(e) : null;\n const statusMessage = this.localizedTexts('uploadSuccessMessage');\n const args = {\n e, response: response, operation: 'upload', file: this.updateStatus(file, statusMessage, '2', false), statusText: statusMessage\n };\n if (!this.isBlazorSaveUrl) {\n const liElement = this.getLiElement(file);\n if (!isNullOrUndefined(liElement)) {\n const spinnerEle = liElement.querySelector('.' + SPINNER_PANE);\n if (!isNullOrUndefined(spinnerEle)) {\n hideSpinner(liElement);\n detach(spinnerEle);\n }\n }\n }\n this.trigger('success', args, (args) => {\n this.updateStatus(file, args.statusText, '2');\n this.uploadedFilesData.push(file);\n if (!this.isBlazorSaveUrl) {\n this.trigger('change', { file: this.uploadedFilesData });\n }\n this.checkActionButtonStatus();\n if (this.fileList.length > 0) {\n if ((!(this.getLiElement(file)).classList.contains(RESTRICT_RETRY))) {\n this.uploadSequential();\n this.checkActionComplete(true);\n }\n else {\n /* istanbul ignore next */\n (this.getLiElement(file)).classList.remove(RESTRICT_RETRY);\n }\n }\n });\n }\n uploadFailed(e, file) {\n const li = this.getLiElement(file);\n const response = e && e.currentTarget ? this.getResponse(e) : null;\n const statusMessage = this.localizedTexts('uploadFailedMessage');\n const args = {\n e, response: response, operation: 'upload', file: this.updateStatus(file, statusMessage, '0', false), statusText: statusMessage\n };\n if (!isNullOrUndefined(li)) {\n this.renderFailureState(e, file, li);\n }\n this.trigger('failure', args, (args) => {\n this.updateStatus(file, args.statusText, '0');\n this.checkActionButtonStatus();\n this.uploadSequential();\n this.checkActionComplete(true);\n });\n }\n uploadSequential() {\n if (this.sequentialUpload) {\n if (this.autoUpload) {\n /* istanbul ignore next */\n this.checkAutoUpload(this.filesData);\n }\n else {\n this.uploadButtonClick();\n }\n }\n }\n checkActionComplete(increment) {\n if (increment) {\n ++this.actionCompleteCount;\n }\n else {\n --this.actionCompleteCount;\n }\n this.raiseActionComplete();\n }\n raiseActionComplete() {\n if ((this.filesData.length === this.actionCompleteCount) && this.flag) {\n this.flag = false;\n const eventArgs = {\n fileData: []\n };\n eventArgs.fileData = this.getSelectedFileStatus(this.selectedFiles);\n this.trigger('actionComplete', eventArgs);\n }\n }\n getSelectedFileStatus(selectedFiles) {\n const matchFiles = [];\n let matchFilesIndex = 0;\n for (let selectFileIndex = 0; selectFileIndex < selectedFiles.length; selectFileIndex++) {\n const selectedFileData = selectedFiles[selectFileIndex];\n for (let fileDataIndex = 0; fileDataIndex < this.filesData.length; fileDataIndex++) {\n if (this.filesData[fileDataIndex].name === selectedFileData.name) {\n matchFiles[matchFilesIndex] = this.filesData[fileDataIndex];\n ++matchFilesIndex;\n }\n }\n }\n return matchFiles;\n }\n updateProgressBarClasses(li, className) {\n const progressBar = li.querySelector('.' + PROGRESSBAR);\n if (!isNullOrUndefined(progressBar)) {\n progressBar.classList.add(className);\n }\n }\n removeProgressbar(li, callType) {\n if (!isNullOrUndefined(li.querySelector('.' + PROGRESS_WRAPPER))) {\n this.progressAnimation = new Animation({ duration: 1250 });\n this.progressAnimation.animate(li.querySelector('.' + PROGRESS_WRAPPER), { name: 'FadeOut' });\n this.progressAnimation.animate(li.querySelector('.' + PROGRESSBAR_TEXT), { name: 'FadeOut' });\n setTimeout(() => {\n this.animateProgressBar(li, callType);\n }, 750);\n }\n }\n /* istanbul ignore next */\n animateProgressBar(li, callType) {\n if (callType === 'success') {\n li.classList.add(UPLOAD_SUCCESS);\n if (!isNullOrUndefined(li.querySelector('.' + STATUS))) {\n li.querySelector('.' + STATUS).classList.remove(UPLOAD_INPROGRESS);\n this.progressAnimation.animate(li.querySelector('.' + STATUS), { name: 'FadeIn' });\n li.querySelector('.' + STATUS).classList.add(UPLOAD_SUCCESS);\n }\n }\n else {\n if (!isNullOrUndefined(li.querySelector('.' + STATUS))) {\n li.querySelector('.' + STATUS).classList.remove(UPLOAD_INPROGRESS);\n this.progressAnimation.animate(li.querySelector('.' + STATUS), { name: 'FadeIn' });\n li.querySelector('.' + STATUS).classList.add(UPLOAD_FAILED);\n }\n }\n if (li.querySelector('.' + PROGRESS_WRAPPER)) {\n detach(li.querySelector('.' + PROGRESS_WRAPPER));\n }\n }\n setExtensions(extensions) {\n if (extensions !== '' && !isNullOrUndefined(extensions)) {\n this.element.setAttribute('accept', extensions);\n }\n else {\n this.element.removeAttribute('accept');\n }\n }\n templateComplier(uploadTemplate) {\n if (uploadTemplate) {\n try {\n if (selectAll(uploadTemplate, document).length) {\n return compile(select(uploadTemplate, document).innerHTML.trim());\n }\n }\n catch (exception) {\n return compile(uploadTemplate);\n }\n }\n return undefined;\n }\n setRTL() {\n if (this.enableRtl) {\n addClass([this.uploadWrapper], RTL);\n }\n else {\n removeClass([this.uploadWrapper], RTL);\n }\n }\n localizedTexts(localeText) {\n this.l10n.setLocale(this.locale);\n return this.l10n.getConstant(localeText);\n }\n setControlStatus() {\n if (!this.enabled) {\n this.uploadWrapper.classList.add(DISABLED);\n this.element.setAttribute('disabled', 'disabled');\n this.browseButton.setAttribute('disabled', 'disabled');\n if (!isNullOrUndefined(this.clearButton)) {\n this.clearButton.setAttribute('disabled', 'disabled');\n }\n if (!isNullOrUndefined(this.uploadButton)) {\n this.uploadButton.setAttribute('disabled', 'disabled');\n }\n }\n else {\n if (this.uploadWrapper.classList.contains(DISABLED)) {\n this.uploadWrapper.classList.remove(DISABLED);\n }\n if (!isNullOrUndefined(this.browseButton) && this.element.hasAttribute('disabled')) {\n this.element.removeAttribute('disabled');\n this.browseButton.removeAttribute('disabled');\n }\n if (!isNullOrUndefined(this.clearButton) && this.clearButton.hasAttribute('disabled')) {\n this.clearButton.removeAttribute('disabled');\n }\n if (!isNullOrUndefined(this.uploadButton) && this.uploadButton.hasAttribute('disabled')) {\n this.uploadButton.hasAttribute('disabled');\n }\n }\n }\n checkHTMLAttributes(isDynamic) {\n const attributes$$1 = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['accept', 'multiple', 'disabled'];\n for (const prop of attributes$$1) {\n if (!isNullOrUndefined(this.element.getAttribute(prop))) {\n switch (prop) {\n case 'accept':\n if ((isNullOrUndefined(this.uploaderOptions) || (this.uploaderOptions['allowedExtensions'] === undefined))\n || isDynamic) {\n this.setProperties({ allowedExtensions: this.element.getAttribute('accept') }, !isDynamic);\n this.initialAttr.accept = this.allowedExtensions;\n }\n break;\n case 'multiple':\n if ((isNullOrUndefined(this.uploaderOptions) || (this.uploaderOptions['multiple'] === undefined)) || isDynamic) {\n const isMutiple = this.element.getAttribute(prop) === 'multiple' ||\n this.element.getAttribute(prop) === '' || this.element.getAttribute(prop) === 'true' ? true : false;\n this.setProperties({ multiple: isMutiple }, !isDynamic);\n this.initialAttr.multiple = true;\n }\n break;\n case 'disabled':\n if ((isNullOrUndefined(this.uploaderOptions) || (this.uploaderOptions['enabled'] === undefined)) || isDynamic) {\n const isDisabled = this.element.getAttribute(prop) === 'disabled' ||\n this.element.getAttribute(prop) === '' || this.element.getAttribute(prop) === 'true' ? false : true;\n this.setProperties({ enabled: isDisabled }, !isDynamic);\n this.initialAttr.disabled = true;\n }\n }\n }\n }\n }\n chunkUpload(file, custom, fileIndex) {\n const start = 0;\n const end = Math.min(this.asyncSettings.chunkSize, file.size);\n const index = 0;\n const blob = file.rawFile.slice(start, end);\n const metaData = { chunkIndex: index, blob: blob, file: file, start: start, end: end, retryCount: 0, request: null };\n this.sendRequest(file, metaData, custom, fileIndex);\n }\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n sendRequest(file, metaData, custom, fileIndex) {\n const formData = new FormData();\n const blob = file.rawFile.slice(metaData.start, metaData.end);\n formData.append('chunkFile', blob, file.name);\n formData.append(this.uploaderName, blob, file.name);\n formData.append('chunk-index', metaData.chunkIndex.toString());\n formData.append('chunkIndex', metaData.chunkIndex.toString());\n const totalChunk = Math.max(Math.ceil(file.size / this.asyncSettings.chunkSize), 1);\n formData.append('total-chunk', totalChunk.toString());\n formData.append('totalChunk', totalChunk.toString());\n const ajax = new Ajax({ url: this.asyncSettings.saveUrl, type: 'POST', async: true, contentType: null });\n ajax.emitError = false;\n ajax.onLoad = (e) => {\n this.chunkUploadComplete(e, metaData, custom);\n return {};\n };\n ajax.onUploadProgress = (e) => {\n this.chunkUploadInProgress(e, metaData, custom);\n return {};\n };\n const eventArgs = {\n fileData: file,\n customFormData: [],\n cancel: false,\n chunkSize: this.asyncSettings.chunkSize === 0 ? null : this.asyncSettings.chunkSize\n };\n ajax.beforeSend = (e) => {\n eventArgs.currentRequest = ajax.httpRequest;\n eventArgs.currentChunkIndex = metaData.chunkIndex;\n /* istanbul ignore next */\n if (isBlazor()) {\n if (this.currentRequestHeader) {\n this.updateCustomheader(ajax.httpRequest, this.currentRequestHeader);\n }\n if (this.customFormDatas) {\n this.updateFormData(formData, this.customFormDatas);\n }\n }\n if (eventArgs.currentChunkIndex === 0) {\n // This event is currently not required but to avoid breaking changes for previous customer, we have included.\n this.trigger('uploading', eventArgs, (eventArgs) => {\n this.uploadingEventCallback(formData, eventArgs, e, file);\n });\n }\n else {\n this.trigger('chunkUploading', eventArgs, (eventArgs) => {\n this.uploadingEventCallback(formData, eventArgs, e, file);\n });\n }\n };\n /* istanbul ignore next */\n ajax.onError = (e) => {\n this.chunkUploadFailed(e, metaData, custom);\n return {};\n };\n ajax.send(formData);\n metaData.request = ajax;\n }\n uploadingEventCallback(formData, eventArgs, e, file) {\n if (eventArgs.cancel) {\n this.eventCancelByArgs(e, eventArgs, file);\n }\n else {\n this.updateFormData(formData, eventArgs.customFormData);\n }\n }\n eventCancelByArgs(e, eventArgs, file) {\n e.cancel = true;\n if (eventArgs.fileData.statusCode === '5') {\n return;\n }\n eventArgs.fileData.statusCode = '5';\n eventArgs.fileData.status = this.localizedTexts('fileUploadCancel');\n const liElement = this.getLiElement(eventArgs.fileData);\n if (liElement) {\n if (!isNullOrUndefined(liElement.querySelector('.' + STATUS))) {\n liElement.querySelector('.' + STATUS).innerHTML = this.localizedTexts('fileUploadCancel');\n liElement.querySelector('.' + STATUS).classList.add(UPLOAD_FAILED);\n }\n this.pauseButton = this.createElement('span', { className: 'e-icons e-file-reload-btn', attrs: { 'tabindex': this.btnTabIndex } });\n const removeIcon = liElement.querySelector('.' + REMOVE_ICON);\n if (removeIcon) {\n removeIcon.parentElement.insertBefore(this.pauseButton, removeIcon);\n }\n this.pauseButton.setAttribute('title', this.localizedTexts('retry'));\n /* istanbul ignore next */\n this.pauseButton.addEventListener('click', (e) => {\n this.reloadcanceledFile(e, file, liElement);\n }, false);\n this.checkActionButtonStatus();\n }\n }\n checkChunkUpload() {\n return (this.asyncSettings.chunkSize <= 0 || isNullOrUndefined(this.asyncSettings.chunkSize)) ? false : true;\n }\n chunkUploadComplete(e, metaData, custom) {\n const response = e.target;\n let liElement;\n if (response.readyState === 4 && response.status >= 200 && response.status < 300) {\n const requestResponse = e && e.currentTarget ? this.getResponse(e) : null;\n const totalChunk = Math.max(Math.ceil(metaData.file.size / this.asyncSettings.chunkSize), 1);\n const eventArgs = {\n event: e,\n file: metaData.file,\n chunkIndex: metaData.chunkIndex,\n totalChunk: totalChunk,\n chunkSize: this.asyncSettings.chunkSize,\n response: requestResponse\n };\n this.trigger('chunkSuccess', eventArgs);\n if (isNullOrUndefined(custom) || !custom) {\n liElement = this.getLiElement(metaData.file);\n }\n this.updateMetaData(metaData);\n if (metaData.end === metaData.file.size) {\n metaData.file.statusCode = '3';\n }\n if (metaData.file.statusCode === '5') {\n const eventArgs = { event: e, fileData: metaData.file, cancel: false, customFormData: [] };\n this.trigger('canceling', eventArgs, (eventArgs) => {\n /* istanbul ignore next */\n if (eventArgs.cancel) {\n metaData.file.statusCode = '3';\n const spinnerTarget = liElement.querySelector('.' + ABORT_ICON);\n if (!isNullOrUndefined(liElement) && !isNullOrUndefined(spinnerTarget)) {\n hideSpinner(spinnerTarget);\n detach(liElement.querySelector('.e-spinner-pane'));\n }\n this.sendNextRequest(metaData);\n }\n else {\n metaData.request.emitError = false;\n response.abort();\n const formData = new FormData();\n const name = this.element.getAttribute('name');\n formData.append(name, metaData.file.name);\n formData.append('cancel-uploading', metaData.file.name);\n formData.append('cancelUploading', metaData.file.name);\n this.updateFormData(formData, eventArgs.customFormData);\n const ajax = new Ajax(this.asyncSettings.removeUrl, 'POST', true, null);\n ajax.emitError = false;\n ajax.onLoad = (e) => {\n this.removeChunkFile(e, metaData, custom);\n return {};\n };\n ajax.send(formData);\n }\n });\n }\n else {\n if ((totalChunk - 1) === metaData.chunkIndex && totalChunk > metaData.chunkIndex) {\n const index = this.pausedData.indexOf(metaData);\n if (index >= 0) {\n this.pausedData.splice(index, 1);\n }\n if (isNullOrUndefined(this.template) && (isNullOrUndefined(custom) || !custom) && liElement) {\n if (liElement && !isNullOrUndefined(liElement.querySelector('.' + PAUSE_UPLOAD))) {\n detach(liElement.querySelector('.' + PAUSE_UPLOAD));\n }\n this.removeChunkProgressBar(metaData);\n }\n this.raiseSuccessEvent(e, metaData.file);\n return;\n }\n if (metaData.file.statusCode !== '4') {\n this.sendNextRequest(metaData);\n }\n }\n }\n else {\n this.chunkUploadFailed(e, metaData);\n }\n }\n sendNextRequest(metaData) {\n metaData.start = metaData.end;\n metaData.end += this.asyncSettings.chunkSize;\n metaData.end = Math.min(metaData.end, metaData.file.size);\n metaData.chunkIndex += 1;\n this.sendRequest(metaData.file, metaData);\n }\n removeChunkFile(e, metaData, custom) {\n if (isNullOrUndefined(this.template) && (isNullOrUndefined(custom) && !custom)) {\n const liElement = this.getLiElement(metaData.file);\n const deleteIcon = liElement.querySelector('.' + ABORT_ICON);\n const spinnerTarget = deleteIcon;\n this.updateStatus(metaData.file, this.localizedTexts('fileUploadCancel'), '5');\n this.updateProgressBarClasses(liElement, UPLOAD_FAILED);\n this.removeProgressbar(liElement, 'failure');\n deleteIcon && deleteIcon.classList.remove(ABORT_ICON);\n deleteIcon && deleteIcon.classList.add(REMOVE_ICON);\n deleteIcon && deleteIcon.setAttribute('title', this.localizedTexts('remove'));\n const pauseIcon = liElement.querySelector('.' + PAUSE_UPLOAD);\n pauseIcon && pauseIcon.classList.add(RETRY_ICON);\n pauseIcon && pauseIcon.classList.remove(PAUSE_UPLOAD);\n pauseIcon && pauseIcon.setAttribute('title', this.localizedTexts('retry'));\n if (!isNullOrUndefined(liElement) && !isNullOrUndefined(deleteIcon)\n && !isNullOrUndefined(liElement.querySelector('.e-spinner-pane'))) {\n hideSpinner(spinnerTarget);\n detach(liElement.querySelector('.e-spinner-pane'));\n }\n }\n }\n pauseUpload(metaData, e, custom) {\n metaData.file.statusCode = '4';\n metaData.file.status = this.localizedTexts('pause');\n this.updateMetaData(metaData);\n const eventArgs = {\n event: e ? e : null,\n file: metaData.file,\n chunkIndex: metaData.chunkIndex,\n chunkCount: Math.round(metaData.file.size / this.asyncSettings.chunkSize),\n chunkSize: this.asyncSettings.chunkSize\n };\n this.abortUpload(metaData, custom, eventArgs);\n }\n abortUpload(metaData, custom, eventArgs) {\n if (metaData.file.statusCode !== '4') {\n metaData.request.emitError = false;\n metaData.request.httpRequest.abort();\n }\n const liElement = this.getLiElement(metaData.file);\n if (isNullOrUndefined(this.template) && (isNullOrUndefined(custom) || !custom)) {\n const targetElement = liElement.querySelector('.' + PAUSE_UPLOAD);\n targetElement.classList.remove(PAUSE_UPLOAD);\n targetElement.classList.add(RESUME_UPLOAD);\n targetElement.setAttribute('title', this.localizedTexts('resume'));\n targetElement.nextElementSibling.classList.add(REMOVE_ICON);\n targetElement.nextElementSibling.classList.remove(ABORT_ICON);\n targetElement.nextElementSibling.setAttribute('title', this.localizedTexts('remove'));\n }\n for (let i = 0; i < this.pausedData.length; i++) {\n if (this.pausedData[i].file.name === metaData.file.name) {\n this.pausedData.splice(i, 1);\n }\n }\n this.pausedData.push(metaData);\n this.trigger('pausing', eventArgs);\n }\n resumeUpload(metaData, e, custom) {\n const liElement = this.getLiElement(metaData.file);\n let targetElement;\n if (!isNullOrUndefined(liElement)) {\n targetElement = liElement.querySelector('.' + RESUME_UPLOAD);\n }\n if (!isNullOrUndefined(targetElement) && (isNullOrUndefined(custom) || !custom)) {\n targetElement.classList.remove(RESUME_UPLOAD);\n targetElement.classList.add(PAUSE_UPLOAD);\n targetElement.setAttribute('title', this.localizedTexts('pause'));\n targetElement.nextElementSibling.classList.remove(REMOVE_ICON);\n targetElement.nextElementSibling.classList.add(ABORT_ICON);\n targetElement.nextElementSibling.setAttribute('title', this.localizedTexts('abort'));\n }\n metaData.file.status = this.localizedTexts('inProgress');\n metaData.file.statusCode = '3';\n this.updateMetaData(metaData);\n const eventArgs = {\n event: e ? e : null,\n file: metaData.file,\n chunkIndex: metaData.chunkIndex,\n chunkCount: Math.round(metaData.file.size / this.asyncSettings.chunkSize),\n chunkSize: this.asyncSettings.chunkSize\n };\n this.trigger('resuming', eventArgs);\n for (let i = 0; i < this.pausedData.length; i++) {\n if (this.pausedData[i].end === this.pausedData[i].file.size) {\n this.chunkUploadComplete(e, metaData, custom);\n }\n else {\n if (this.pausedData[i].file.name === metaData.file.name) {\n this.pausedData[i].start = this.pausedData[i].end;\n this.pausedData[i].end = this.pausedData[i].end + this.asyncSettings.chunkSize;\n this.pausedData[i].end = Math.min(this.pausedData[i].end, this.pausedData[i].file.size);\n this.pausedData[i].chunkIndex = this.pausedData[i].chunkIndex + 1;\n this.sendRequest(this.pausedData[i].file, this.pausedData[i], custom);\n }\n }\n }\n }\n updateMetaData(metaData) {\n if (this.uploadMetaData.indexOf(metaData) === -1) {\n this.uploadMetaData.push(metaData);\n }\n else {\n this.uploadMetaData.splice(this.uploadMetaData.indexOf(metaData), 1);\n this.uploadMetaData.push(metaData);\n }\n }\n removeChunkProgressBar(metaData) {\n const liElement = this.getLiElement(metaData.file);\n if (!isNullOrUndefined(liElement)) {\n this.updateProgressBarClasses(liElement, UPLOAD_SUCCESS);\n this.removeProgressbar(liElement, 'success');\n const cancelButton = liElement.querySelector('.' + ABORT_ICON);\n if (!isNullOrUndefined(cancelButton)) {\n cancelButton.classList.add(DELETE_ICON);\n cancelButton.setAttribute('title', this.localizedTexts('delete'));\n cancelButton.classList.remove(ABORT_ICON, UPLOAD_INPROGRESS);\n }\n }\n }\n chunkUploadFailed(e, metaData, custom) {\n const chunkCount = Math.max(Math.ceil(metaData.file.size / this.asyncSettings.chunkSize), 1);\n let liElement;\n if (isNullOrUndefined(this.template) && (isNullOrUndefined(custom) || !custom)) {\n liElement = this.getLiElement(metaData.file);\n }\n const requestResponse = e && e.currentTarget ? this.getResponse(e) : null;\n const eventArgs = {\n event: e,\n file: metaData.file,\n chunkIndex: metaData.chunkIndex,\n totalChunk: chunkCount,\n chunkSize: this.asyncSettings.chunkSize,\n cancel: false,\n response: requestResponse\n };\n this.trigger('chunkFailure', eventArgs, (eventArgs) => {\n // To prevent triggering of failure event\n if (!eventArgs.cancel) {\n if (metaData.retryCount < this.asyncSettings.retryCount) {\n setTimeout(() => {\n this.retryRequest(liElement, metaData, custom);\n }, this.asyncSettings.retryAfterDelay);\n }\n else {\n if (!isNullOrUndefined(liElement)) {\n const pauseButton = liElement.querySelector('.' + PAUSE_UPLOAD) ?\n liElement.querySelector('.' + PAUSE_UPLOAD) : liElement.querySelector('.' + RESUME_UPLOAD);\n if (!isNullOrUndefined(pauseButton)) {\n pauseButton.classList.add(RETRY_ICON);\n pauseButton.classList.remove(PAUSE_UPLOAD, RESUME_UPLOAD);\n }\n this.updateProgressBarClasses(liElement, UPLOAD_FAILED);\n this.removeProgressbar(liElement, 'failure');\n liElement.querySelector('.e-icons').classList.remove(UPLOAD_INPROGRESS);\n const iconElement = liElement.querySelector('.' + ABORT_ICON) ?\n liElement.querySelector('.' + ABORT_ICON) : liElement.querySelector('.' + REMOVE_ICON);\n iconElement.classList.remove(ABORT_ICON);\n if (!isNullOrUndefined(liElement.querySelector('.' + PAUSE_UPLOAD))) {\n detach(liElement.querySelector('.' + PAUSE_UPLOAD));\n }\n if (metaData.start > 0) {\n iconElement.classList.add(DELETE_ICON);\n iconElement.setAttribute('title', this.localizedTexts('delete'));\n }\n else {\n iconElement.classList.add(REMOVE_ICON);\n iconElement.setAttribute('title', this.localizedTexts('remove'));\n }\n }\n metaData.retryCount = 0;\n const file = metaData.file;\n const failureMessage = this.localizedTexts('uploadFailedMessage');\n const args = {\n e, response: requestResponse,\n operation: 'upload',\n file: this.updateStatus(file, failureMessage, '0', false),\n statusText: failureMessage\n };\n this.trigger('failure', args, (args) => {\n this.updateStatus(file, args.statusText, '0');\n this.uploadSequential();\n this.checkActionComplete(true);\n });\n }\n }\n });\n }\n retryRequest(liElement, metaData, custom) {\n if (isNullOrUndefined(this.template) && (isNullOrUndefined(custom) || !custom) && liElement) {\n this.updateProgressBarClasses(liElement, UPLOAD_FAILED);\n }\n metaData.retryCount += 1;\n this.sendRequest(metaData.file, metaData);\n }\n checkPausePlayAction(e) {\n const targetElement = e.target;\n const selectedElement = e.target.parentElement;\n const index = this.fileList.indexOf(selectedElement);\n const fileData = this.filesData[index];\n const metaData = this.getCurrentMetaData(fileData);\n if (targetElement.classList.contains(PAUSE_UPLOAD)) {\n /* istanbul ignore next */\n this.pauseUpload(metaData, e);\n }\n else if (targetElement.classList.contains(RESUME_UPLOAD)) {\n /* istanbul ignore next */\n this.resumeUpload(metaData, e);\n }\n else if (targetElement.classList.contains(RETRY_ICON)) {\n if (metaData.file.status === this.localizedTexts('fileUploadCancel')) {\n this.retryUpload(metaData, false);\n }\n else {\n this.retryUpload(metaData, true);\n }\n }\n }\n retryUpload(metaData, fromcanceledStage) {\n if (fromcanceledStage) {\n metaData.end = metaData.end + this.asyncSettings.chunkSize;\n metaData.start = metaData.start + this.asyncSettings.chunkSize;\n this.sendRequest(metaData.file, metaData);\n }\n else {\n metaData.file.statusCode = '1';\n metaData.file.status = this.localizedTexts('readyToUploadMessage');\n this.chunkUpload(metaData.file);\n }\n /* istanbul ignore next */\n (this.getLiElement(metaData.file)).classList.add(RESTRICT_RETRY);\n }\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n chunkUploadInProgress(e, metaData, custom) {\n if (metaData.file.statusCode === '4') {\n return;\n }\n if (metaData.file.statusCode !== '4' && metaData.file.statusCode !== '5') {\n metaData.file.statusCode = '3';\n metaData.file.status = this.localizedTexts('inProgress');\n }\n this.updateMetaData(metaData);\n const liElement = this.getLiElement(metaData.file);\n if (isNullOrUndefined(liElement)) {\n return;\n }\n const retryElement = liElement.querySelector('.' + RETRY_ICON);\n if (!isNullOrUndefined(retryElement)) {\n retryElement.classList.add(PAUSE_UPLOAD);\n retryElement.setAttribute('title', this.localizedTexts('pause'));\n retryElement.classList.remove(RETRY_ICON);\n }\n if (!isNullOrUndefined(liElement)) {\n if (!(liElement.querySelectorAll('.' + PROGRESS_WRAPPER).length > 0)) {\n const statusElement = liElement.querySelector('.' + STATUS);\n if (isNullOrUndefined(this.template)) {\n statusElement.classList.add(UPLOAD_INPROGRESS);\n statusElement.classList.remove(UPLOAD_FAILED);\n this.createProgressBar(liElement);\n this.updateProgressBarClasses(liElement, UPLOAD_INPROGRESS);\n }\n const clearIcon = liElement.querySelector('.' + REMOVE_ICON) ? liElement.querySelector('.' + REMOVE_ICON) :\n liElement.querySelector('.' + DELETE_ICON);\n if (!isNullOrUndefined(clearIcon)) {\n clearIcon.classList.add(ABORT_ICON);\n clearIcon.setAttribute('title', this.localizedTexts('abort'));\n clearIcon.classList.remove(REMOVE_ICON);\n }\n }\n if (!isNaN(Math.round((e.loaded / e.total) * 100)) && isNullOrUndefined(this.template) && metaData.file.statusCode !== '4') {\n let progressVal;\n let totalChunks = Math.ceil(metaData.file.size / this.asyncSettings.chunkSize) - 1;\n if (this.asyncSettings.chunkSize && totalChunks) {\n progressVal = Math.round(metaData.chunkIndex / totalChunks * 100);\n this.changeProgressValue(liElement, progressVal.toString() + '%');\n }\n }\n if (metaData.chunkIndex === 0) {\n this.checkActionButtonStatus();\n }\n }\n if (isNullOrUndefined(liElement.querySelector('.' + PAUSE_UPLOAD)) && isNullOrUndefined(this.template)\n && isNullOrUndefined(liElement.querySelector('.' + DELETE_ICON))) {\n this.pauseButton = this.createElement('span', { className: 'e-icons e-file-pause-btn', attrs: { 'tabindex': this.btnTabIndex } });\n if (this.browserName === 'msie') {\n this.pauseButton.classList.add('e-msie');\n }\n const abortIcon = liElement.querySelector('.' + ABORT_ICON);\n abortIcon.parentElement.insertBefore(this.pauseButton, abortIcon);\n this.pauseButton.setAttribute('title', this.localizedTexts('pause'));\n this.pauseButton.addEventListener('click', (e) => {\n this.checkPausePlayAction(e);\n }, false);\n }\n }\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * It is used to convert bytes value into kilobytes or megabytes depending on the size based\n * on [binary prefix](https://en.wikipedia.org/wiki/Binary_prefix).\n *\n * @param { number } bytes - Specifies the file size in bytes.\n * @returns {string}\n */\n bytesToSize(bytes) {\n let i = -1;\n if (!bytes) {\n return '0.0 KB';\n }\n do {\n bytes = bytes / 1024;\n i++;\n } while (bytes > 99);\n if (i >= 2) {\n bytes = bytes * 1024;\n i = 1;\n }\n return Math.max(bytes, 0).toFixed(1) + ' ' + ['KB', 'MB'][i];\n }\n /**\n * Allows you to sort the file data alphabetically based on its file name clearly.\n *\n * @param { FileList } filesData - specifies the files data for upload.\n * @returns {File[]}\n */\n /* istanbul ignore next */\n sortFileList(filesData) {\n filesData = filesData ? filesData : this.sortFilesList;\n const files = filesData;\n const fileNames = [];\n for (let i = 0; i < files.length; i++) {\n fileNames.push(files[i].name);\n }\n const sortedFileNames = fileNames.sort();\n const sortedFilesData = [];\n for (const name of sortedFileNames) {\n for (let i = 0; i < files.length; i++) {\n if (name === files[i].name) {\n sortedFilesData.push(files[i]);\n }\n }\n }\n return sortedFilesData;\n }\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.\n *\n * @method destroy\n * @returns {void}\n */\n destroy() {\n this.element.value = null;\n this.clearTemplate();\n if (!(this.isBlazorSaveUrl || this.isBlazorTemplate)) {\n this.clearAll();\n }\n this.unWireEvents();\n this.unBindDropEvents();\n if (this.multiple) {\n this.element.removeAttribute('multiple');\n }\n if (!this.enabled) {\n this.element.removeAttribute('disabled');\n }\n this.element.removeAttribute('accept');\n this.setInitialAttributes();\n const attributes$$1 = ['aria-label', 'directory', 'webkitdirectory', 'tabindex'];\n for (const key of attributes$$1) {\n this.element.removeAttribute(key);\n }\n if (!this.isServerBlazor) {\n if (!isNullOrUndefined(this.uploadWrapper)) {\n this.uploadWrapper.parentElement.appendChild(this.element);\n detach(this.uploadWrapper);\n }\n this.uploadWrapper = null;\n super.destroy();\n }\n else {\n this.uploadWrapper = null;\n }\n }\n /**\n * Allows you to call the upload process manually by calling save URL action.\n * To process the selected files (added in upload queue), pass an empty argument otherwise\n * upload the specific file based on its argument.\n *\n * @param { FileInfo | FileInfo[] } files - Specifies the files data for upload.\n * @param {boolean} custom - Specifies whether the uploader is rendered with custom file list.\n * @returns {void}\n */\n upload(files, custom) {\n files = files ? files : this.filesData;\n if (this.sequentialUpload && (this.isFirstFileOnSelection || custom)) {\n this.sequenceUpload(files);\n }\n else {\n const uploadFiles = this.getFilesInArray(files);\n const eventArgs = {\n customFormData: [],\n currentRequest: null,\n cancel: false\n };\n this.trigger('beforeUpload', eventArgs, (eventArgs) => {\n if (!eventArgs.cancel) {\n if (isBlazor()) {\n this.currentRequestHeader = eventArgs.currentRequest ? eventArgs.currentRequest : this.currentRequestHeader;\n this.customFormDatas = (eventArgs.customFormData && eventArgs.customFormData.length > 0) ?\n eventArgs.customFormData : this.customFormDatas;\n }\n this.uploadFiles(uploadFiles, custom);\n }\n });\n }\n }\n getFilesInArray(files) {\n let uploadFiles = [];\n if (files instanceof Array) {\n uploadFiles = files;\n }\n else {\n uploadFiles.push(files);\n }\n return uploadFiles;\n }\n /* istanbul ignore next */\n serverReadFileBase64(fileIndex, position, totalCount) {\n return new Promise((resolve, reject) => {\n const file = this.fileStreams[fileIndex].rawFile;\n try {\n const reader = new FileReader();\n reader.onload = ((args) => {\n return () => {\n try {\n const contents = args.result;\n const data = contents ? contents.split(';base64,')[1] : null;\n resolve(data);\n }\n catch (e) {\n reject(e);\n }\n };\n })(reader);\n reader.readAsDataURL(file.slice(position, position + totalCount));\n }\n catch (e) {\n reject(e);\n }\n });\n }\n /* eslint-disable @typescript-eslint/no-unused-vars */\n /* istanbul ignore next */\n uploadFileCount(ele) {\n /* eslint-enable @typescript-eslint/no-unused-vars */\n const files = this.filesData;\n if (!files || files.length === 0) {\n return -1;\n }\n const result = files.length;\n return result;\n }\n /* eslint-disable @typescript-eslint/no-unused-vars */\n /* istanbul ignore next */\n getFileRead(index, ele) {\n /* eslint-enable @typescript-eslint/no-unused-vars */\n const files = this.filesData;\n if (!files || files.length === 0) {\n return -1;\n }\n const file = files[index];\n const fileCount = this.newFileRef++;\n this.fileStreams[fileCount] = file;\n return fileCount;\n }\n /* eslint-disable @typescript-eslint/no-unused-vars */\n /* istanbul ignore next */\n getFileInfo(index, ele) {\n /* eslint-enable @typescript-eslint/no-unused-vars */\n const files = this.filesData;\n if (!files || files.length === 0) {\n return null;\n }\n const file = files[index];\n if (!file) {\n return null;\n }\n return this.filesData[index];\n }\n uploadFiles(files, custom) {\n let selectedFiles = [];\n if (this.asyncSettings.saveUrl === '' || isNullOrUndefined(this.asyncSettings.saveUrl)) {\n if (this.isServerBlazor) {\n this.interopAdaptor.invokeMethodAsync('GetFileDetails', files);\n }\n return;\n }\n if (!custom || isNullOrUndefined(custom)) {\n if (!this.multiple) {\n const file = [];\n file.push(files[0]);\n selectedFiles = this.filterfileList(file);\n }\n else {\n selectedFiles = this.filterfileList(files);\n }\n }\n else {\n selectedFiles = files;\n }\n for (let i = 0; i < selectedFiles.length; i++) {\n if (this.isServerBlazor && !this.checkChunkUpload()) {\n /* istanbul ignore next */\n if (selectedFiles[i] && selectedFiles[i].rawFile instanceof File) {\n this.getBase64(selectedFiles[i].rawFile).then((data) => {\n this.base64String.push(data);\n this.uploadFilesRequest(selectedFiles, i, custom);\n });\n }\n }\n else {\n this.uploadFilesRequest(selectedFiles, i, custom);\n }\n }\n }\n uploadFilesRequest(selectedFiles, i, custom) {\n const cloneFiles = [];\n const chunkEnabled = this.checkChunkUpload();\n const ajax = new Ajax(this.asyncSettings.saveUrl, 'POST', true, null);\n ajax.emitError = false;\n let getFileData;\n /* istanbul ignore next */\n if (this.isServerBlazor) {\n getFileData = selectedFiles.slice(0);\n cloneFiles.push(getFileData[i].rawFile);\n }\n const eventArgs = {\n fileData: (this.isServerBlazor) ? getFileData[i] : selectedFiles[i],\n customFormData: [],\n cancel: false\n };\n const formData = new FormData();\n ajax.beforeSend = (e) => {\n eventArgs.currentRequest = ajax.httpRequest;\n /* istanbul ignore next */\n if (isBlazor()) {\n eventArgs.fileData.rawFile = !chunkEnabled ? this.base64String[i] : eventArgs.fileData.rawFile;\n if (this.currentRequestHeader) {\n this.updateCustomheader(ajax.httpRequest, this.currentRequestHeader);\n }\n if (this.customFormDatas) {\n this.updateFormData(formData, this.customFormDatas);\n }\n }\n this.trigger('uploading', eventArgs, (eventArgs) => {\n /* istanbul ignore next */\n if (this.isServerBlazor && !chunkEnabled) {\n selectedFiles[i].rawFile = eventArgs.fileData.rawFile = cloneFiles[i];\n }\n if (eventArgs.cancel) {\n this.eventCancelByArgs(e, eventArgs, selectedFiles[i]);\n }\n this.updateFormData(formData, eventArgs.customFormData);\n });\n };\n if (selectedFiles[i].statusCode === '1') {\n const name = this.element.getAttribute('name');\n formData.append(name, selectedFiles[i].rawFile, selectedFiles[i].name);\n if (chunkEnabled && selectedFiles[i].size > this.asyncSettings.chunkSize) {\n this.chunkUpload(selectedFiles[i], custom, i);\n }\n else {\n ajax.onLoad = (e) => {\n if (eventArgs.cancel && this.isServerBlazor) {\n return {};\n }\n else {\n this.uploadComplete(e, selectedFiles[i], custom);\n return {};\n }\n };\n ajax.onUploadProgress = (e) => {\n if (eventArgs.cancel && this.isServerBlazor) {\n return {};\n }\n else {\n this.uploadInProgress(e, selectedFiles[i], custom, ajax);\n return {};\n }\n };\n /* istanbul ignore next */\n ajax.onError = (e) => {\n this.uploadFailed(e, selectedFiles[i]);\n return {};\n };\n ajax.send(formData);\n }\n }\n }\n spliceFiles(liIndex) {\n const liElement = this.fileList[liIndex];\n const allFiles = this.getFilesData();\n const nameElements = +liElement.getAttribute('data-files-count');\n let startIndex = 0;\n for (let i = 0; i < liIndex; i++) {\n startIndex += (+this.fileList[i].getAttribute('data-files-count'));\n }\n const endIndex = (startIndex + nameElements) - 1;\n for (let j = endIndex; j >= startIndex; j--) {\n allFiles.splice(j, 1);\n }\n }\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Remove the uploaded file from server manually by calling the remove URL action.\n * If you pass an empty argument to this method, the complete file list can be cleared,\n * otherwise remove the specific file based on its argument (“file_data”).\n *\n * @param { FileInfo | FileInfo[] } fileData - specifies the files data to remove from file list/server.\n * @param { boolean } customTemplate - Set true if the component rendering with customize template.\n * @param { boolean } removeDirectly - Set true if files remove without removing event.\n * @param { boolean } postRawFile - Set false, to post file name only to the remove action.\n * @returns {void}\n */\n remove(fileData, customTemplate, removeDirectly, postRawFile, args) {\n if (isNullOrUndefined(postRawFile)) {\n postRawFile = true;\n }\n const eventArgs = {\n event: args,\n cancel: false,\n filesData: [],\n customFormData: [],\n postRawFile: postRawFile,\n currentRequest: null\n };\n const beforeEventArgs = {\n cancel: false,\n customFormData: [],\n currentRequest: null\n };\n this.trigger('beforeRemove', beforeEventArgs, (beforeEventArgs) => {\n if (!beforeEventArgs.cancel) {\n if (isBlazor()) {\n this.currentRequestHeader = beforeEventArgs.currentRequest;\n this.customFormDatas = beforeEventArgs.customFormData;\n }\n if (this.isFormUpload() && !this.isBlazorSaveUrl) {\n eventArgs.filesData = fileData;\n this.trigger('removing', eventArgs, (eventArgs) => {\n if (!eventArgs.cancel) {\n const removingFiles = this.getFilesInArray(fileData);\n let isLiRemoved = false;\n let liIndex;\n for (const data of removingFiles) {\n if (!isLiRemoved) {\n liIndex = this.fileList.indexOf(data.list);\n }\n if (liIndex > -1) {\n const inputElement = !isNullOrUndefined(data.input) ? data.input : null;\n if (inputElement) {\n detach(inputElement);\n }\n this.spliceFiles(liIndex);\n detach(this.fileList[liIndex]);\n this.fileList.splice(liIndex, 1);\n isLiRemoved = true;\n liIndex = -1;\n }\n }\n }\n });\n }\n else if (this.isForm && (isNullOrUndefined(this.asyncSettings.removeUrl) || this.asyncSettings.removeUrl === '')\n && !this.isBlazorSaveUrl) {\n eventArgs.filesData = this.getFilesData();\n this.trigger('removing', eventArgs, (eventArgs) => {\n if (!eventArgs.cancel) {\n this.clearAll();\n }\n });\n }\n else {\n let removeFiles = [];\n fileData = !isNullOrUndefined(fileData) ? fileData : this.filesData;\n if (fileData instanceof Array) {\n removeFiles = fileData;\n }\n else {\n removeFiles.push(fileData);\n }\n eventArgs.filesData = removeFiles;\n const removeUrl = this.asyncSettings.removeUrl;\n const validUrl = (removeUrl === '' || isNullOrUndefined(removeUrl)) ? false : true;\n for (const files of removeFiles) {\n const fileUploadedIndex = this.uploadedFilesData.indexOf(files);\n if ((files.statusCode === '2' || files.statusCode === '4' || (files.statusCode === '0' &&\n fileUploadedIndex !== -1)) && validUrl) {\n this.removeUploadedFile(files, eventArgs, removeDirectly, customTemplate);\n }\n else {\n if (!removeDirectly) {\n this.trigger('removing', eventArgs, (eventArgs) => {\n if (!eventArgs.cancel) {\n this.removeFilesData(files, customTemplate);\n }\n });\n }\n else {\n this.removeFilesData(files, customTemplate);\n }\n }\n if (args && !args.target.classList.contains(REMOVE_ICON)) {\n this.checkActionComplete(false);\n }\n }\n }\n }\n });\n }\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n /**\n * Clear all the file entries from list that can be uploaded files or added in upload queue.\n *\n * @returns {void}\n */\n clearAll() {\n if (isNullOrUndefined(this.listParent) && !(this.isBlazorSaveUrl || this.isBlazorTemplate)) {\n if (this.browserName !== 'msie') {\n this.element.value = '';\n }\n this.filesData = [];\n return;\n }\n const eventArgs = {\n cancel: false,\n filesData: this.filesData\n };\n this.trigger('clearing', eventArgs, (eventArgs) => {\n if (!eventArgs.cancel) {\n this.clearData();\n this.actionCompleteCount = 0;\n this.count = -1;\n }\n });\n }\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Get the data of files which are shown in file list.\n *\n * @param { number } index - specifies the file list item(li) index.\n * @returns {FileInfo[]}\n */\n getFilesData(index) {\n if (!this.isServerBlazor) {\n if (isNullOrUndefined(index)) {\n return this.filesData;\n }\n else {\n return this.getSelectedFiles(index);\n }\n }\n else {\n for (let i = 0; i < this.filesData.length; i++) {\n this.filesData[i].rawFile = this.base64String[i];\n }\n return this.filesData;\n }\n }\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Pauses the in-progress chunked upload based on the file data.\n *\n * @param { FileInfo | FileInfo[] } fileData - specifies the files data to pause from uploading.\n * @param { boolean } custom - Set true if used custom UI.\n * @returns {void}\n */\n pause(fileData, custom) {\n fileData = fileData ? fileData : this.filesData;\n const fileDataFiles = this.getFilesInArray(fileData);\n this.pauseUploading(fileDataFiles, custom);\n }\n pauseUploading(fileData, custom) {\n const files = this.getFiles(fileData);\n for (let i = 0; i < files.length; i++) {\n if (files[i].statusCode === '3') {\n this.pauseUpload(this.getCurrentMetaData(files[i], null), null, custom);\n }\n }\n }\n getFiles(fileData) {\n let files = [];\n if (!isNullOrUndefined(fileData) && !(fileData instanceof Array)) {\n files.push(fileData);\n }\n else {\n files = fileData;\n }\n return files;\n }\n /**\n * Resumes the chunked upload that is previously paused based on the file data.\n *\n * @param { FileInfo | FileInfo[] } fileData - specifies the files data to resume the paused file.\n * @param { boolean } custom - Set true if used custom UI.\n * @returns {void}\n */\n resume(fileData, custom) {\n fileData = fileData ? fileData : this.filesData;\n const fileDataFiles = this.getFilesInArray(fileData);\n this.resumeFiles(fileDataFiles, custom);\n }\n resumeFiles(fileData, custom) {\n const files = this.getFiles(fileData);\n for (let i = 0; i < files.length; i++) {\n if (files[i].statusCode === '4') {\n this.resumeUpload(this.getCurrentMetaData(files[i], null), null, custom);\n }\n }\n }\n /**\n * Retries the canceled or failed file upload based on the file data.\n *\n * @param { FileInfo | FileInfo[] } fileData - specifies the files data to retry the canceled or failed file.\n * @param { boolean } fromcanceledStage - Set true to retry from canceled stage and set false to retry from initial stage.\n * @param {boolean} custom -Specifies whether the uploader is rendered with custom file list.\n * @returns {void}\n */\n retry(fileData, fromcanceledStage, custom) {\n fileData = fileData ? fileData : this.filesData;\n const fileDataFiles = this.getFilesInArray(fileData);\n this.retryFailedFiles(fileDataFiles, fromcanceledStage, custom);\n }\n retryFailedFiles(fileData, fromcanceledStage, custom) {\n const files = this.getFiles(fileData);\n for (let i = 0; i < files.length; i++) {\n if (files[i].statusCode === '5' || files[i].statusCode === '0') {\n if (this.asyncSettings.chunkSize > 0) {\n this.retryUpload(this.getCurrentMetaData(files[i], null), fromcanceledStage);\n }\n else {\n let liElement;\n if (!custom) {\n liElement = this.fileList[this.filesData.indexOf(files[i])];\n }\n this.reloadcanceledFile(null, files[i], liElement, custom);\n }\n }\n }\n }\n /**\n * Stops the in-progress chunked upload based on the file data.\n * When the file upload is canceled, the partially uploaded file is removed from server.\n *\n * @param { FileInfo | FileInfo[] } fileData - specifies the files data to cancel the progressing file.\n * @returns {void}\n */\n cancel(fileData) {\n fileData = fileData ? fileData : this.filesData;\n const cancelingFiles = this.getFilesInArray(fileData);\n this.cancelUpload(cancelingFiles);\n }\n cancelUpload(fileData) {\n const files = this.getFiles(fileData);\n if (this.asyncSettings.chunkSize > 0) {\n for (let i = 0; i < files.length; i++) {\n if (files[i].statusCode === '3') {\n const metaData = this.getCurrentMetaData(files[i], null);\n metaData.file.statusCode = '5';\n metaData.file.status = this.localizedTexts('fileUploadCancel');\n this.updateMetaData(metaData);\n this.showHideUploadSpinner(files[i]);\n }\n }\n }\n else {\n for (let i = 0; i < files.length; i++) {\n if (files[i].statusCode === '3') {\n files[i].statusCode = '5';\n files[i].status = this.localizedTexts('fileUploadCancel');\n this.showHideUploadSpinner(files[i]);\n }\n }\n }\n }\n showHideUploadSpinner(files) {\n const liElement = this.getLiElement(files);\n if (!isNullOrUndefined(liElement) && isNullOrUndefined(this.template)) {\n const spinnerTarget = liElement.querySelector('.' + ABORT_ICON);\n createSpinner({ target: spinnerTarget, width: '20px' });\n showSpinner(spinnerTarget);\n }\n }\n};\n__decorate$4([\n Complex({ saveUrl: '', removeUrl: '' }, AsyncSettings)\n], Uploader.prototype, \"asyncSettings\", void 0);\n__decorate$4([\n Property(false)\n], Uploader.prototype, \"sequentialUpload\", void 0);\n__decorate$4([\n Property({})\n], Uploader.prototype, \"htmlAttributes\", void 0);\n__decorate$4([\n Property('')\n], Uploader.prototype, \"cssClass\", void 0);\n__decorate$4([\n Property(true)\n], Uploader.prototype, \"enabled\", void 0);\n__decorate$4([\n Property(null)\n], Uploader.prototype, \"template\", void 0);\n__decorate$4([\n Property(true)\n], Uploader.prototype, \"multiple\", void 0);\n__decorate$4([\n Property(true)\n], Uploader.prototype, \"autoUpload\", void 0);\n__decorate$4([\n Complex({}, ButtonsProps)\n], Uploader.prototype, \"buttons\", void 0);\n__decorate$4([\n Property('')\n], Uploader.prototype, \"allowedExtensions\", void 0);\n__decorate$4([\n Property(0)\n], Uploader.prototype, \"minFileSize\", void 0);\n__decorate$4([\n Property(30000000)\n], Uploader.prototype, \"maxFileSize\", void 0);\n__decorate$4([\n Property(null)\n], Uploader.prototype, \"dropArea\", void 0);\n__decorate$4([\n Collection([{}], FilesProp)\n], Uploader.prototype, \"files\", void 0);\n__decorate$4([\n Property(true)\n], Uploader.prototype, \"showFileList\", void 0);\n__decorate$4([\n Property(false)\n], Uploader.prototype, \"directoryUpload\", void 0);\n__decorate$4([\n Property('Default')\n], Uploader.prototype, \"dropEffect\", void 0);\n__decorate$4([\n Event()\n], Uploader.prototype, \"created\", void 0);\n__decorate$4([\n Event()\n], Uploader.prototype, \"actionComplete\", void 0);\n__decorate$4([\n Event()\n], Uploader.prototype, \"rendering\", void 0);\n__decorate$4([\n Event()\n], Uploader.prototype, \"beforeUpload\", void 0);\n__decorate$4([\n Event()\n], Uploader.prototype, \"fileListRendering\", void 0);\n__decorate$4([\n Event()\n], Uploader.prototype, \"selected\", void 0);\n__decorate$4([\n Event()\n], Uploader.prototype, \"uploading\", void 0);\n__decorate$4([\n Event()\n], Uploader.prototype, \"success\", void 0);\n__decorate$4([\n Event()\n], Uploader.prototype, \"failure\", void 0);\n__decorate$4([\n Event()\n], Uploader.prototype, \"removing\", void 0);\n__decorate$4([\n Event()\n], Uploader.prototype, \"beforeRemove\", void 0);\n__decorate$4([\n Event()\n], Uploader.prototype, \"clearing\", void 0);\n__decorate$4([\n Event()\n], Uploader.prototype, \"progress\", void 0);\n__decorate$4([\n Event()\n], Uploader.prototype, \"change\", void 0);\n__decorate$4([\n Event()\n], Uploader.prototype, \"chunkSuccess\", void 0);\n__decorate$4([\n Event()\n], Uploader.prototype, \"chunkFailure\", void 0);\n__decorate$4([\n Event()\n], Uploader.prototype, \"chunkUploading\", void 0);\n__decorate$4([\n Event()\n], Uploader.prototype, \"canceling\", void 0);\n__decorate$4([\n Event()\n], Uploader.prototype, \"pausing\", void 0);\n__decorate$4([\n Event()\n], Uploader.prototype, \"resuming\", void 0);\nUploader = __decorate$4([\n NotifyPropertyChanges\n], Uploader);\n\n/* eslint-enable @typescript-eslint/no-explicit-any */\n\n/**\n * Uploader modules\n */\n\nvar __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n/* eslint-disable prefer-spread */\nconst APPLY = 'e-apply';\nconst CANCEL = 'e-cancel';\nconst CURRENT = 'e-current';\nconst CONTAINER = 'e-container';\nconst CTRLBTN = 'e-ctrl-btn';\nconst CTRLSWITCH = 'e-switch-ctrl-btn';\nconst DISABLED$1 = 'e-disabled';\nconst FORMATSWITCH = 'e-value-switch-btn';\nconst HANDLER = 'e-handler';\nconst HEX = 'e-hex';\nconst HIDEHEX = 'e-hide-hex-value';\nconst HIDEOPACITY = 'e-hide-opacity';\nconst HIDERGBA = 'e-hide-switchable-value';\nconst HIDEVALUE = 'e-hide-value';\nconst HIDEVALUESWITCH = 'e-hide-valueswitcher';\nconst HSVAREA = 'e-hsv-color';\nconst HSVCONTAINER = 'e-hsv-container';\nconst INPUTWRAPPER = 'e-selected-value';\nconst MODESWITCH = 'e-mode-switch-btn';\nconst NOCOLOR = 'e-nocolor-item';\nconst OPACITY = 'e-opacity-value';\nconst PALETTES = 'e-palette';\nconst PALETTECONTENT = 'e-color-palette';\nconst PICKERCONTENT = 'e-color-picker';\nconst PREVIEW = 'e-preview-container';\nconst PREVIOUS = 'e-previous';\nconst RTL$1 = 'e-rtl';\nconst SHOWVALUE = 'e-show-value';\nconst SELECT = 'e-selected';\nconst SPLITPREVIEW = 'e-split-preview';\nconst TILE = 'e-tile';\nconst presets = {\n default: ['#000000', '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#ffeb3b',\n '#ffffff', '#ffebee', '#fce4ec', '#f3e5f5', '#ede7f6', '#e3f2fd', '#e1f5fe', '#e0f7fa', '#e0f2f1', '#fffde7',\n '#f2f2f2', '#ffcdd2', '#f8bbd0', '#e1bee7', '#d1c4e9', '#bbdefb', '#b3e5fc', '#b2ebf2', '#b2dfdb', '#fff9c4',\n '#e6e6e6', '#ef9a9a', '#f48fb1', '#ce93d8', '#b39ddb', '#90caf9', '#81d4fa', '#80deea', '#80cbc4', '#fff59d',\n '#cccccc', '#e57373', '#f06292', '#ba68c8', '#9575cd', '#64b5f6', '#4fc3f7', '#4dd0e1', '#4db6ac', '#fff176',\n '#b3b3b3', '#ef5350', '#ec407a', '#ab47bc', '#7e57c2', '#42a5f5', '#29b6f6', '#26c6da', '#26a69a', '#ffee58',\n '#999999', '#e53935', '#d81b60', '#8e24aa', '#5e35b1', '#1e88e5', '#039be5', '#00acc1', '#00897b', '#fdd835',\n '#808080', '#d32f2f', '#c2185b', '#7b1fa2', '#512da8', '#1976d2', '#0288d1', '#0097a7', '#00796b', '#fbc02d',\n '#666666', '#c62828', '#ad1457', '#6a1b9a', '#4527a0', '#1565c0', '#0277bd', '#00838f', '#00695c', '#f9a825',\n '#4d4d4d', '#b71c1c', '#880e4f', '#4a148c', '#311b92', '#0d47a1', '#01579b', '#006064', '#004d40', '#f57f17']\n};\n/**\n * ColorPicker component is a user interface to select and adjust color values. It provides supports for various\n * color specification like Red Green Blue, Hue Saturation Value and Hex codes.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nlet ColorPicker = class ColorPicker extends Component {\n constructor(options, element) {\n super(options, element);\n }\n preRender() {\n const ele = this.element;\n this.formElement = closest(this.element, 'form');\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);\n }\n const localeText = { Apply: 'Apply', Cancel: 'Cancel', ModeSwitcher: 'Switch Mode' };\n this.l10n = new L10n('colorpicker', localeText, this.locale);\n if (ele.getAttribute('ejs-for') && !ele.getAttribute('name')) {\n ele.setAttribute('name', ele.id);\n }\n }\n /**\n * To Initialize the component rendering\n *\n * @private\n * @returns {void}\n */\n render() {\n this.initWrapper();\n if (this.inline) {\n this.createWidget();\n }\n else {\n this.createSplitBtn();\n }\n if (!this.enableOpacity) {\n addClass([this.container.parentElement], HIDEOPACITY);\n }\n this.renderComplete();\n }\n initWrapper() {\n const wrapper = this.createElement('div', { className: 'e-' + this.getModuleName() + '-wrapper' });\n this.element.parentNode.insertBefore(wrapper, this.element);\n wrapper.appendChild(this.element);\n attributes(this.element, { 'tabindex': '-1', 'spellcheck': 'false' });\n this.container = this.createElement('div', { className: CONTAINER });\n this.getWrapper().appendChild(this.container);\n let value = this.value ? this.roundValue(this.value).toLowerCase() : '#008000ff';\n if (this.noColor && this.mode === 'Palette' && this.value === '') {\n value = '';\n }\n const slicedValue = value.slice(0, 7);\n if (isNullOrUndefined(this.initialInputValue)) {\n this.initialInputValue = slicedValue;\n }\n this.element.value = slicedValue;\n if (this.enableOpacity) {\n this.setProperties({ 'value': value }, true);\n }\n else {\n this.setProperties({ 'value': slicedValue }, true);\n }\n if (this.enableRtl) {\n wrapper.classList.add(RTL$1);\n }\n if (this.cssClass) {\n addClass([wrapper], this.cssClass.split(' '));\n }\n this.tileRipple = rippleEffect(this.container, { selector: '.' + TILE });\n this.ctrlBtnRipple = rippleEffect(this.container, { selector: '.e-btn' });\n }\n getWrapper() {\n return this.element.parentElement;\n }\n createWidget() {\n if (this.mode === 'Palette') {\n this.createPalette();\n if (!this.inline) {\n this.firstPaletteFocus();\n }\n }\n else {\n this.createPicker();\n if (!this.inline) {\n this.getDragHandler().focus();\n }\n }\n this.isRgb = true;\n this.createInput();\n this.createCtrlBtn();\n if (!this.disabled) {\n this.wireEvents();\n }\n if (this.inline && this.disabled) {\n this.toggleDisabled(true);\n }\n if (Browser.isDevice) {\n this.refreshPopupPos();\n }\n }\n createSplitBtn() {\n const splitButton = this.createElement('button', { className: 'e-split-colorpicker' });\n this.getWrapper().appendChild(splitButton);\n this.splitBtn = new SplitButton({\n iconCss: 'e-selected-color',\n target: this.container,\n disabled: this.disabled,\n enableRtl: this.enableRtl,\n open: this.onOpen.bind(this),\n click: () => {\n this.trigger('change', {\n currentValue: { hex: this.value.slice(0, 7), rgba: this.convertToRgbString(this.hexToRgb(this.value)) },\n previousValue: { hex: null, rgba: null }, value: this.value\n });\n }\n });\n this.splitBtn.createElement = this.createElement;\n this.splitBtn.appendTo(splitButton);\n const preview = this.createElement('span', { className: SPLITPREVIEW });\n select('.e-selected-color', splitButton).appendChild(preview);\n preview.style.backgroundColor = this.convertToRgbString(this.hexToRgb(this.value));\n const popupEle = this.getPopupEle();\n addClass([popupEle], 'e-colorpicker-popup');\n if (this.cssClass) {\n addClass([popupEle], this.cssClass.split(' '));\n }\n if (Browser.isDevice) {\n const popupInst = this.getPopupInst();\n popupInst.relateTo = document.body;\n popupInst.position = { X: 'center', Y: 'center' };\n popupInst.targetType = 'container';\n popupInst.collision = { X: 'fit', Y: 'fit' };\n popupInst.offsetY = 4;\n popupEle.style.zIndex = getZindexPartial(this.splitBtn.element).toString();\n }\n this.bindCallBackEvent();\n }\n onOpen() {\n this.trigger('open', { element: this.container });\n }\n getPopupInst() {\n return getInstance(this.getPopupEle(), Popup);\n }\n bindCallBackEvent() {\n this.splitBtn.beforeOpen = (args) => {\n const callBackPromise = new Deferred();\n this.trigger('beforeOpen', args, (observeOpenArgs) => {\n if (!observeOpenArgs.cancel) {\n const popupEle = this.getPopupEle();\n popupEle.style.top = formatUnit(0 + pageYOffset);\n popupEle.style.left = formatUnit(0 + pageXOffset);\n popupEle.style.display = 'block';\n this.createWidget();\n popupEle.style.display = '';\n if (Browser.isDevice) {\n this.modal = this.createElement('div');\n this.modal.className = 'e-' + this.getModuleName() + ' e-modal';\n this.modal.style.display = 'none';\n document.body.insertBefore(this.modal, popupEle);\n document.body.className += ' e-colorpicker-overflow';\n this.modal.style.display = 'block';\n this.modal.style.zIndex = (Number(popupEle.style.zIndex) - 1).toString();\n }\n }\n args.cancel = observeOpenArgs.cancel;\n callBackPromise.resolve(observeOpenArgs);\n });\n return callBackPromise;\n };\n this.splitBtn.beforeClose = (args) => {\n const callBackPromise = new Deferred();\n if (!isNullOrUndefined(args.event)) {\n const beforeCloseArgs = { element: this.container, event: args.event, cancel: false };\n this.trigger('beforeClose', beforeCloseArgs, (observedCloseArgs) => {\n if (Browser.isDevice && args.event.target === this.modal) {\n observedCloseArgs.cancel = true;\n }\n if (!observedCloseArgs.cancel) {\n this.onPopupClose();\n }\n args.cancel = observedCloseArgs.cancel;\n callBackPromise.resolve(observedCloseArgs);\n });\n }\n else {\n callBackPromise.resolve(args);\n }\n return callBackPromise;\n };\n }\n onPopupClose() {\n this.unWireEvents();\n this.destroyOtherComp();\n this.container.style.width = '';\n select('.' + SPLITPREVIEW, this.splitBtn.element).style.backgroundColor\n = this.convertToRgbString(this.hexToRgb(this.value));\n this.container.innerHTML = '';\n removeClass([this.container], [PICKERCONTENT, PALETTECONTENT]);\n if (Browser.isDevice && this.modal) {\n removeClass([document.body], 'e-colorpicker-overflow');\n this.modal.style.display = 'none';\n this.modal.outerHTML = '';\n this.modal = null;\n }\n }\n createPalette() {\n classList(this.container, [PALETTECONTENT], [PICKERCONTENT]);\n if (this.presetColors) {\n const paletteGroup = this.createElement('div', { className: 'e-custom-palette' });\n this.appendElement(paletteGroup);\n const keys = Object.keys(this.presetColors);\n if (keys.length === 1) {\n this.appendPalette(this.presetColors[keys[0]], keys[0], paletteGroup);\n }\n else {\n for (let i = 0, len = keys.length; i < len; i++) {\n this.appendPalette(this.presetColors[keys[i]], keys[i], paletteGroup);\n }\n }\n if (selectAll('.e-row', paletteGroup).length > 10) {\n addClass([paletteGroup], 'e-palette-group');\n }\n }\n else {\n this.appendPalette(presets.default, 'default');\n }\n if (this.mode === 'Palette' && !this.modeSwitcher && this.noColor) {\n this.setNoColor();\n }\n const width = parseInt(getComputedStyle(this.container).borderBottomWidth, 10);\n this.container.style.width = formatUnit(this.container.children[0].offsetWidth + width + width);\n this.rgb = this.hexToRgb(this.roundValue(this.value));\n this.hsv = this.rgbToHsv.apply(this, this.rgb);\n }\n firstPaletteFocus() {\n if (!select('.' + SELECT, this.container.children[0])) {\n selectAll('.' + PALETTES, this.container)[0].focus();\n }\n }\n appendPalette(colors, key, refEle) {\n const palette = this.createElement('div', { className: PALETTES, attrs: { 'tabindex': '0' } });\n if (refEle) {\n refEle.appendChild(palette);\n }\n else {\n this.appendElement(palette);\n }\n let row;\n let tile;\n let roundedColor;\n for (let i = 0, len = colors.length; i < len; i++) {\n if (i === 0 || i % this.columns === 0) {\n row = this.createElement('div', {\n className: 'e-row', attrs: { 'role': 'presentation' }\n });\n palette.appendChild(row);\n }\n roundedColor = this.roundValue(colors[i]).toLowerCase();\n tile = this.createElement('span', {\n className: TILE, attrs: { 'role': 'gridcell', 'aria-label': roundedColor, 'aria-selected': 'false' }\n });\n this.trigger('beforeTileRender', { element: tile, presetName: key, value: colors[i] });\n row.appendChild(tile);\n if (this.value === roundedColor) {\n this.addTileSelection(tile);\n palette.focus();\n }\n tile.style.backgroundColor = this.convertToRgbString(this.hexToRgb(roundedColor));\n }\n }\n setNoColor() {\n const noColorEle = this.container.querySelector('.e-row').children[0];\n noColorEle.classList.add(NOCOLOR);\n if (!this.value) {\n noColorEle.classList.add(SELECT);\n closest(noColorEle, '.' + PALETTES).focus();\n }\n ['aria-selected', 'aria-label'].forEach((attr) => { noColorEle.removeAttribute(attr); });\n noColorEle.style.backgroundColor = '';\n }\n appendElement(ele, insertPos = 0) {\n const refEle = this.container.children[insertPos];\n if (refEle) {\n this.container.insertBefore(ele, refEle);\n }\n else {\n this.container.appendChild(ele);\n }\n }\n addTileSelection(ele) {\n ele.classList.add(SELECT);\n ele.setAttribute('aria-selected', 'true');\n }\n createPicker() {\n classList(this.container, [PICKERCONTENT], [PALETTECONTENT]);\n const hsvContainer = this.createElement('div', { className: HSVCONTAINER });\n this.appendElement(hsvContainer);\n hsvContainer.appendChild(this.createElement('div', { className: HSVAREA }));\n const dragHandler = this.createElement('span', { className: HANDLER, attrs: { 'tabindex': '0' } });\n hsvContainer.appendChild(dragHandler);\n this.rgb = this.hexToRgb(this.value);\n this.hsv = this.rgbToHsv.apply(this, this.rgb);\n this.setHsvContainerBg();\n this.setHandlerPosition();\n this.createSlider();\n this.createDragTooltip();\n }\n setHsvContainerBg(h = this.hsv[0]) {\n this.getHsvContainer().style.backgroundColor = this.convertToRgbString(this.hsvToRgb(h, 100, 100, 1));\n }\n getHsvContainer() {\n return select('.' + HSVCONTAINER, this.container);\n }\n setHandlerPosition() {\n const dragHandler = this.getDragHandler();\n const hsvArea = select('.' + HSVAREA, this.container);\n if (this.enableRtl) {\n dragHandler.style.left = formatUnit(hsvArea.offsetWidth * Math.abs(100 - this.hsv[1]) / 100);\n }\n else {\n dragHandler.style.left = formatUnit(hsvArea.offsetWidth * this.hsv[1] / 100);\n }\n dragHandler.style.top = formatUnit(hsvArea.offsetHeight * (100 - this.hsv[2]) / 100);\n }\n createSlider() {\n const sliderPreviewWrapper = this.createElement('div', { className: 'e-slider-preview' });\n this.appendElement(sliderPreviewWrapper, 1);\n this.createPreview(sliderPreviewWrapper);\n const sliderWrapper = this.createElement('div', { className: 'e-colorpicker-slider' });\n sliderPreviewWrapper.insertBefore(sliderWrapper, sliderPreviewWrapper.children[0]);\n let slider = this.createElement('div', { className: 'e-hue-slider' });\n sliderWrapper.appendChild(slider);\n this.hueSlider = new Slider({\n value: this.hsv[0],\n min: 0,\n max: 359,\n enableRtl: this.enableRtl,\n enabled: !this.disabled,\n change: this.hueChange.bind(this)\n });\n this.hueSlider.createElement = this.createElement;\n this.hueSlider.appendTo(slider);\n if (this.enableOpacity) {\n slider = this.createElement('div', { className: 'e-opacity-slider' });\n sliderWrapper.appendChild(slider);\n this.createOpacitySlider(slider);\n }\n }\n createOpacitySlider(slider) {\n this.opacitySlider = new Slider({\n value: this.rgb[3] * 100,\n min: 0,\n max: 100,\n enableRtl: this.enableRtl,\n enabled: !this.disabled,\n change: this.opacityChange.bind(this)\n });\n this.opacitySlider.createElement = this.createElement;\n this.opacitySlider.appendTo(slider);\n const opacityBgTrack = this.createElement('div', { className: 'e-opacity-empty-track' });\n slider.appendChild(opacityBgTrack);\n this.updateOpacitySliderBg();\n }\n updateOpacitySliderBg() {\n const direction = this.enableRtl ? 'to left' : 'to right';\n const opacityEle = select('.e-opacity-empty-track', this.opacitySlider.element);\n if (opacityEle) {\n opacityEle.style.background =\n 'linear-gradient(' + direction + ', rgba(' + this.rgb.slice(0, 3) + ', 0) 0%, ' +\n this.convertToRgbString(this.rgb.slice(0, 3)) + ' 100%)';\n }\n }\n hueChange(args) {\n this.hsv[0] = args.value;\n this.setHsvContainerBg();\n this.convertToOtherFormat();\n }\n opacityChange(args) {\n const value = args.value;\n const pValue = this.rgbToHex(this.rgb);\n this.hsv[3] = value / 100;\n this.rgb[3] = value / 100;\n const cValue = this.rgbToHex(this.rgb);\n this.updateOpacityInput(value);\n const rgb = this.convertToRgbString(this.rgb);\n this.updatePreview(rgb);\n this.triggerEvent(cValue, pValue, rgb);\n }\n updateOpacityInput(value) {\n if (this.enableOpacity && !this.getWrapper().classList.contains(HIDEVALUE)) {\n const opacityTextBoxInst = getInstance(select('.' + OPACITY, this.container), NumericTextBox);\n opacityTextBoxInst.value = value;\n opacityTextBoxInst.dataBind();\n }\n }\n createPreview(parentEle) {\n const previewContainer = this.createElement('div', { className: PREVIEW });\n parentEle.appendChild(previewContainer);\n let preview = this.createElement('span', { className: 'e-preview ' + CURRENT });\n previewContainer.appendChild(preview);\n const colorValue = this.convertToRgbString(this.rgb);\n preview.style.backgroundColor = colorValue;\n preview = this.createElement('span', { className: 'e-preview ' + PREVIOUS });\n previewContainer.appendChild(preview);\n preview.style.backgroundColor = colorValue;\n }\n isPicker() {\n return !this.container.classList.contains(PALETTECONTENT);\n }\n getPopupEle() {\n return this.container.parentElement;\n }\n createNumericInput(element, value, label, max) {\n const numericInput = new NumericTextBox({\n value: value,\n placeholder: label,\n min: 0,\n max: max,\n format: '###.##',\n showSpinButton: false,\n floatLabelType: 'Always',\n enableRtl: this.enableRtl,\n enabled: !this.disabled,\n readonly: this.isPicker() ? false : true,\n change: (args) => {\n if (args.event) {\n this.inputHandler(args.event);\n }\n }\n });\n numericInput.createElement = this.createElement;\n numericInput.appendTo(element);\n }\n createInput() {\n const isPicker = this.isPicker();\n const wrapper = this.getWrapper();\n if ((isPicker && !wrapper.classList.contains(HIDEVALUE)) || (!isPicker && wrapper.classList.contains(SHOWVALUE))) {\n const inputWrap = this.createElement('div', { className: INPUTWRAPPER });\n if (isPicker) {\n this.appendElement(inputWrap, 2);\n }\n else {\n this.appendElement(inputWrap, 1);\n }\n const container = this.createElement('div', { className: 'e-input-container' });\n inputWrap.appendChild(container);\n if (!wrapper.classList.contains(HIDEVALUESWITCH)) {\n this.appendValueSwitchBtn(inputWrap);\n }\n if (!wrapper.classList.contains(HIDEHEX)) {\n const hexInput = this.createElement('input', {\n className: HEX,\n attrs: { 'maxlength': '7', 'spellcheck': 'false' }\n });\n container.appendChild(hexInput);\n Input.createInput({\n element: hexInput,\n floatLabelType: 'Always',\n properties: {\n placeholder: 'HEX',\n enableRtl: this.enableRtl,\n enabled: !this.disabled,\n readonly: this.isPicker() ? false : true\n }\n }, this.createElement);\n Input.setValue(this.value.slice(0, 7), hexInput);\n hexInput.addEventListener('input', this.inputHandler.bind(this));\n }\n if (!wrapper.classList.contains(HIDERGBA)) {\n let label;\n let value;\n if (this.isRgb) {\n label = 'RGB';\n value = this.rgb;\n }\n else {\n label = 'HSV';\n value = this.hsv;\n }\n const clsName = ['rh', 'gs', 'bv'];\n for (let i = 0; i < 3; i++) {\n this.createNumericInput(container.appendChild(this.createElement('input', { className: 'e-' + clsName[i] + '-value' })), value[i], label[i], 255);\n }\n if (this.enableOpacity) {\n this.appendOpacityValue(container);\n }\n }\n }\n }\n appendOpacityValue(container) {\n this.createNumericInput(container.appendChild(this.createElement('input', { className: OPACITY })), this.rgb[3] * 100, 'A', 100);\n }\n appendValueSwitchBtn(targetEle) {\n const valueSwitchBtn = this.createElement('button', {\n className: 'e-icons e-css e-btn e-flat e-icon-btn ' + FORMATSWITCH\n });\n targetEle.appendChild(valueSwitchBtn);\n if (this.isPicker() && !this.getWrapper().classList.contains(HIDERGBA)) {\n valueSwitchBtn.addEventListener('click', this.formatSwitchHandler.bind(this));\n }\n }\n createCtrlBtn() {\n if (this.modeSwitcher || this.showButtons) {\n this.l10n.setLocale(this.locale);\n const btnWrapper = this.createElement('div', { className: CTRLSWITCH });\n this.container.appendChild(btnWrapper);\n if (this.showButtons) {\n const controlBtnWrapper = this.createElement('div', { className: CTRLBTN });\n btnWrapper.appendChild(controlBtnWrapper);\n const apply = this.l10n.getConstant('Apply');\n controlBtnWrapper.appendChild(this.createElement('button', {\n innerHTML: apply,\n className: 'e-btn e-css e-flat e-primary e-small ' + APPLY,\n attrs: { 'title': apply }\n }));\n const cancel = this.l10n.getConstant('Cancel');\n controlBtnWrapper.appendChild(this.createElement('button', {\n innerHTML: cancel,\n className: 'e-btn e-css e-flat e-small ' + CANCEL,\n attrs: { 'title': cancel }\n }));\n }\n if (this.modeSwitcher) {\n this.appendModeSwitchBtn();\n }\n }\n }\n appendModeSwitchBtn() {\n const modeSwitcher = this.createElement('button', {\n className: 'e-icons e-btn e-flat e-icon-btn ' + MODESWITCH, attrs: { title: this.l10n.getConstant('ModeSwitcher') }\n });\n select('.' + CTRLSWITCH, this.container).insertBefore(modeSwitcher, select('.' + CTRLBTN, this.container));\n }\n createDragTooltip() {\n const tooltip = new Tooltip({\n opensOn: 'Custom',\n showTipPointer: false,\n cssClass: 'e-color-picker-tooltip',\n beforeOpen: (args) => {\n this.tooltipEle = args.element;\n },\n animation: { open: { effect: 'None' }, close: { effect: 'None' } }\n });\n tooltip.createElement = this.createElement;\n tooltip.appendTo(this.container);\n tooltip.open(this.container);\n this.tooltipEle.style.zIndex = getZindexPartial(this.tooltipEle).toString();\n select('.e-tip-content', this.tooltipEle).appendChild(this.createElement('div', { className: 'e-tip-transparent' }));\n }\n getTooltipInst() {\n return getInstance(this.container, Tooltip);\n }\n setTooltipOffset(value) {\n this.getTooltipInst().offsetY = value;\n }\n toggleDisabled(enable) {\n if (enable) {\n this.getWrapper().classList.add(DISABLED$1);\n }\n else {\n this.getWrapper().classList.remove(DISABLED$1);\n }\n if (this.showButtons) {\n ([].slice.call(selectAll('.e-btn', this.container))).forEach((ele) => {\n if (enable) {\n attributes(ele, { 'disabled': '' });\n }\n else {\n ele.removeAttribute('disabled');\n }\n });\n }\n }\n convertToRgbString(rgb) {\n return rgb.length ? rgb.length === 4 ? 'rgba(' + rgb.join() + ')' : 'rgb(' + rgb.join() + ')' : '';\n }\n convertToHsvString(hsv) {\n return hsv.length === 4 ? 'hsva(' + hsv.join() + ')' : 'hsv(' + hsv.join() + ')';\n }\n updateHsv() {\n this.hsv[1] = this.hsv[1] > 100 ? 100 : this.hsv[1];\n this.hsv[2] = this.hsv[2] > 100 ? 100 : this.hsv[2];\n this.setHandlerPosition();\n }\n convertToOtherFormat(isKey = false) {\n const pValue = this.rgbToHex(this.rgb);\n this.rgb = this.hsvToRgb.apply(this, this.hsv);\n const cValue = this.rgbToHex(this.rgb);\n const rgba = this.convertToRgbString(this.rgb);\n this.updatePreview(rgba);\n this.updateInput(cValue);\n this.triggerEvent(cValue, pValue, rgba, isKey);\n }\n updateInput(value) {\n const wrapper = this.getWrapper();\n if (!wrapper.classList.contains(HIDEVALUE)) {\n if (!wrapper.classList.contains(HIDEHEX)) {\n Input.setValue(value.substr(0, 7), select('.' + HEX, this.container));\n }\n if (!wrapper.classList.contains(HIDERGBA)) {\n if (this.isRgb) {\n this.updateValue(this.rgb, false);\n }\n else {\n this.updateValue(this.hsv, false);\n }\n }\n }\n }\n updatePreview(value) {\n if (this.enableOpacity) {\n this.updateOpacitySliderBg();\n }\n select('.e-tip-transparent', this.tooltipEle).style.backgroundColor = value;\n select('.' + PREVIEW + ' .' + CURRENT, this.container).style.backgroundColor = value;\n select('.' + PREVIEW + ' .' + PREVIOUS, this.container).style.backgroundColor\n = this.convertToRgbString(this.hexToRgb(this.value));\n }\n getDragHandler() {\n return select('.' + HANDLER, this.container);\n }\n removeTileSelection() {\n const selectedEle = [].slice.call(selectAll('.' + SELECT, this.container.children[0]));\n selectedEle.forEach((ele) => {\n ele.classList.remove(SELECT);\n ele.setAttribute('aria-selected', 'false');\n });\n }\n convertRgbToNumberArray(value) {\n return (value.slice(value.indexOf('(') + 1, value.indexOf(')'))).split(',').map((n, i) => {\n return (i !== 3) ? parseInt(n, 10) : parseFloat(n);\n });\n }\n /**\n * To get color value in specified type.\n *\n * @param {string} value - Specify the color value.\n * @param {string} type - Specify the type to which the specified color needs to be converted.\n * @method getValue\n * @returns {string} - Color value\n */\n getValue(value, type) {\n if (!value) {\n value = this.value;\n }\n type = !type ? 'hex' : type.toLowerCase();\n if (value[0] === 'r') {\n const cValue = this.convertRgbToNumberArray(value);\n if (type === 'hex' || type === 'hexa') {\n const hex = this.rgbToHex(cValue);\n return type === 'hex' ? hex.slice(0, 7) : hex;\n }\n else {\n if (type === 'hsv') {\n return this.convertToHsvString(this.rgbToHsv.apply(this, cValue.slice(0, 3)));\n }\n else {\n if (type === 'hsva') {\n return this.convertToHsvString(this.rgbToHsv.apply(this, cValue));\n }\n else {\n return 'null';\n }\n }\n }\n }\n else {\n if (value[0] === 'h') {\n const cValue = this.hsvToRgb.apply(this, this.convertRgbToNumberArray(value));\n if (type === 'rgba') {\n return this.convertToRgbString(cValue);\n }\n else {\n if (type === 'hex' || type === 'hexa') {\n const hex = this.rgbToHex(cValue);\n return type === 'hex' ? hex.slice(0, 7) : hex;\n }\n else {\n if (type === 'rgb') {\n return this.convertToRgbString(cValue.slice(0, 3));\n }\n else {\n return 'null';\n }\n }\n }\n }\n else {\n value = this.roundValue(value);\n let rgb = this.hexToRgb(value);\n if (type === 'rgb' || type === 'hsv') {\n rgb = rgb.slice(0, 3);\n }\n if (type === 'rgba' || type === 'rgb') {\n return this.convertToRgbString(rgb);\n }\n else {\n if (type === 'hsva' || type === 'hsv') {\n return this.convertToHsvString(this.rgbToHsv.apply(this, rgb));\n }\n else {\n if (type === 'hex') {\n return value.slice(0, 7);\n }\n else {\n if (type === 'a') {\n return rgb[3].toString();\n }\n else {\n return 'null';\n }\n }\n }\n }\n }\n }\n }\n /**\n * To show/hide ColorPicker popup based on current state of the SplitButton.\n *\n * @method toggle\n * @returns {void}\n */\n toggle() {\n if (this.container.parentElement.classList.contains('e-popup-close')) {\n this.splitBtn.toggle();\n }\n else {\n this.closePopup(null);\n }\n }\n /**\n * Get component name.\n *\n * @returns {string} - Module Name\n * @private\n */\n getModuleName() {\n return 'colorpicker';\n }\n /**\n * Gets the properties to be maintained in the persisted state.\n *\n * @returns {string} - Persist data\n */\n getPersistData() {\n return this.addOnPersist(['value']);\n }\n wireEvents() {\n if (this.isPicker()) {\n const dragHandler = this.getDragHandler();\n EventHandler.add(dragHandler, 'keydown', this.pickerKeyDown, this);\n EventHandler.add(this.getHsvContainer(), 'mousedown touchstart', this.handlerDown, this);\n if (this.modeSwitcher || this.showButtons) {\n this.addCtrlSwitchEvent();\n }\n EventHandler.add(select('.' + PREVIOUS, this.container), 'click', this.previewHandler, this);\n }\n else {\n EventHandler.add(this.container, 'click', this.paletteClickHandler, this);\n EventHandler.add(this.container, 'keydown', this.paletteKeyDown, this);\n }\n }\n formResetHandler() {\n this.value = this.initialInputValue;\n attributes(this.element, { 'value': this.initialInputValue });\n }\n addCtrlSwitchEvent() {\n const ctrlSwitchBtn = select('.' + CTRLSWITCH, this.container);\n if (ctrlSwitchBtn) {\n EventHandler.add(ctrlSwitchBtn, 'click', this.btnClickHandler, this);\n }\n }\n pickerKeyDown(e) {\n switch (e.keyCode) {\n case 39:\n this.handlerDragPosition(1, this.enableRtl ? -1 : 1, e);\n break;\n case 37:\n this.handlerDragPosition(1, this.enableRtl ? 1 : -1, e);\n break;\n case 38:\n this.handlerDragPosition(2, 1, e);\n break;\n case 40:\n this.handlerDragPosition(2, -1, e);\n break;\n case 13: {\n e.preventDefault();\n const cValue = this.rgbToHex(this.rgb);\n this.enterKeyHandler(cValue, e);\n }\n }\n }\n enterKeyHandler(value, e) {\n this.triggerChangeEvent(value);\n if (!this.inline) {\n this.closePopup(e);\n this.splitBtn.element.focus();\n }\n }\n closePopup(e) {\n const beforeCloseArgs = { element: this.container, event: e, cancel: false };\n this.trigger('beforeClose', beforeCloseArgs, (observedcloseArgs) => {\n if (!observedcloseArgs.cancel) {\n this.splitBtn.toggle();\n this.onPopupClose();\n }\n });\n }\n triggerChangeEvent(value) {\n const hex = value.slice(0, 7);\n this.trigger('change', {\n currentValue: { hex: hex, rgba: this.convertToRgbString(this.rgb) },\n previousValue: { hex: this.value.slice(0, 7), rgba: this.convertToRgbString(this.hexToRgb(this.value)) },\n value: this.enableOpacity ? value : hex\n });\n if (this.enableOpacity) {\n this.setProperties({ 'value': value }, true);\n }\n else {\n this.setProperties({ 'value': hex }, true);\n }\n this.element.value = hex ? hex : '#000000';\n }\n handlerDragPosition(prob, value, e) {\n e.preventDefault();\n this.hsv[prob] += value * (e.ctrlKey ? 1 : 3);\n if (this.hsv[prob] < 0) {\n this.hsv[prob] = 0;\n }\n this.updateHsv();\n this.convertToOtherFormat(true);\n }\n handlerDown(e) {\n e.preventDefault();\n if (e.type === 'mousedown') {\n this.clientX = Math.abs(e.pageX - pageXOffset);\n this.clientY = Math.abs(e.pageY - pageYOffset);\n this.setTooltipOffset(8);\n }\n else {\n this.clientX = Math.abs(e.changedTouches[0].pageX - pageXOffset);\n this.clientY = Math.abs(e.changedTouches[0].pageY - pageYOffset);\n this.setTooltipOffset(-8);\n }\n this.setHsv(this.clientX, this.clientY);\n this.getDragHandler().style.transition = 'left .4s cubic-bezier(.25, .8, .25, 1), top .4s cubic-bezier(.25, .8, .25, 1)';\n this.updateHsv();\n this.convertToOtherFormat();\n this.getDragHandler().focus();\n EventHandler.add(document, 'mousemove touchmove', this.handlerMove, this);\n EventHandler.add(document, 'mouseup touchend', this.handlerEnd, this);\n }\n handlerMove(e) {\n if (e.type !== 'touchmove') {\n e.preventDefault();\n }\n let x;\n let y;\n if (e.type === 'mousemove') {\n x = Math.abs(e.pageX - pageXOffset);\n y = Math.abs(e.pageY - pageYOffset);\n }\n else {\n x = Math.abs(e.changedTouches[0].pageX - pageXOffset);\n y = Math.abs(e.changedTouches[0].pageY - pageYOffset);\n }\n this.setHsv(x, y);\n const dragHandler = this.getDragHandler();\n this.updateHsv();\n this.convertToOtherFormat();\n this.getTooltipInst().refresh(dragHandler);\n if (!this.tooltipEle.style.transform) {\n if (Math.abs(this.clientX - x) > 8 || Math.abs(this.clientY - y) > 8) {\n select('.' + HSVAREA, this.container).style.cursor = 'pointer';\n dragHandler.style.transition = 'none';\n if (!this.inline) {\n this.tooltipEle.style.zIndex = (parseInt(this.getPopupEle().style.zIndex, 10) + 1).toString();\n }\n this.tooltipEle.style.transform = 'rotate(45deg)';\n dragHandler.classList.add('e-hide-handler');\n }\n }\n }\n setHsv(clientX, clientY) {\n const ele = select('.' + HSVAREA, this.container);\n const position = ele.getBoundingClientRect();\n if (this.enableRtl) {\n clientX = clientX > position.right ? 0 : Math.abs(clientX - position.right);\n }\n else {\n clientX = clientX > position.left ? Math.abs(clientX - position.left) : 0;\n }\n clientY = clientY > position.top ? Math.abs(clientY - position.top) : 0;\n this.hsv[2] = Math.round(Number(100 * (ele.offsetHeight -\n Math.max(0, Math.min(ele.offsetHeight, (clientY - ele.offsetTop)))) / ele.offsetHeight) * 10) / 10;\n this.hsv[1] =\n Math.round(Number(100 * (Math.max(0, Math.min(ele.offsetWidth, (clientX - ele.offsetLeft)))) / ele.offsetWidth) * 10) / 10;\n }\n handlerEnd(e) {\n if (e.type !== 'touchend') {\n e.preventDefault();\n }\n EventHandler.remove(document, 'mousemove touchmove', this.handlerMove);\n EventHandler.remove(document, 'mouseup touchend', this.handlerEnd);\n const dragHandler = this.getDragHandler();\n select('.' + HSVAREA, this.container).style.cursor = '';\n if (this.tooltipEle.style.transform) {\n this.tooltipEle.style.transform = '';\n dragHandler.classList.remove('e-hide-handler');\n }\n if (!this.inline && !this.showButtons) {\n this.closePopup(e);\n }\n }\n btnClickHandler(e) {\n const target = e.target;\n if (closest(target, '.' + MODESWITCH)) {\n e.stopPropagation();\n this.switchToPalette();\n }\n else {\n if (target.classList.contains(APPLY) || target.classList.contains(CANCEL)) {\n this.ctrlBtnClick(target, e);\n }\n }\n }\n switchToPalette() {\n this.trigger('beforeModeSwitch', { element: this.container, mode: 'Palette' });\n this.unWireEvents();\n this.destroyOtherComp();\n detach(select('.e-slider-preview', this.container));\n if (!this.getWrapper().classList.contains(HIDEVALUE)) {\n remove(select('.' + INPUTWRAPPER, this.container));\n }\n detach(this.getHsvContainer());\n this.createPalette();\n this.firstPaletteFocus();\n this.createInput();\n this.refreshPopupPos();\n this.wireEvents();\n this.trigger('onModeSwitch', { element: this.container, mode: 'Palette' });\n }\n refreshPopupPos() {\n if (!this.inline) {\n const popupEle = this.getPopupEle();\n popupEle.style.left = formatUnit(0 + pageXOffset);\n popupEle.style.top = formatUnit(0 + pageYOffset);\n this.getPopupInst().refreshPosition(this.splitBtn.element.parentElement);\n }\n }\n formatSwitchHandler() {\n if (this.isRgb) {\n this.updateValue(this.hsv, true, 3, [360, 100, 100]);\n this.isRgb = false;\n }\n else {\n this.updateValue(this.rgb, true, 2);\n this.isRgb = true;\n }\n }\n updateValue(value, format, idx, max) {\n const clsName = ['e-rh-value', 'e-gs-value', 'e-bv-value'];\n let inst;\n for (let i = 0, len = clsName.length; i < len; i++) {\n inst = getInstance(select('.' + clsName[i], this.container), NumericTextBox);\n inst.value = Math.round(value[i]);\n if (format) {\n inst.placeholder = clsName[i].substr(idx, 1).toUpperCase();\n inst.max = max ? max[i] : 255;\n }\n inst.dataBind();\n }\n }\n previewHandler(e) {\n const target = e.target;\n const pValue = this.rgbToHex(this.rgb);\n this.rgb = this.convertRgbToNumberArray(target.style.backgroundColor);\n if (!this.rgb[3]) {\n this.rgb[3] = 1;\n }\n const cValue = this.rgbToHex(this.rgb);\n const hsv = this.rgbToHsv.apply(this, this.rgb);\n if (hsv[0] !== this.hsv[0]) {\n this.hueSlider.setProperties({ 'value': hsv[0] }, true);\n this.hueSlider.refresh();\n }\n this.setHsvContainerBg(hsv[0]);\n if (this.enableOpacity && hsv[3] !== this.hsv[3]) {\n this.opacitySlider.setProperties({ 'value': hsv[3] * 100 }, true);\n this.opacitySlider.refresh();\n this.updateOpacitySliderBg();\n }\n this.hsv = hsv;\n this.setHandlerPosition();\n this.updateInput(cValue);\n select('.' + PREVIEW + ' .' + CURRENT, this.container).style.backgroundColor = this.convertToRgbString(this.rgb);\n this.triggerEvent(cValue, pValue, this.convertToRgbString(this.rgb));\n }\n paletteClickHandler(e) {\n e.preventDefault();\n const target = e.target;\n if (target.classList.contains(TILE)) {\n this.removeTileSelection();\n this.addTileSelection(target);\n if (target.classList.contains(NOCOLOR)) {\n this.noColorTile();\n }\n else {\n const cValue = target.getAttribute('aria-label');\n const pValue = this.rgbToHex(this.rgb);\n this.rgb = this.hexToRgb(this.roundValue(cValue));\n this.hsv = this.rgbToHsv.apply(this, this.rgb);\n if (this.getWrapper().classList.contains(SHOWVALUE)) {\n this.updateInput(cValue);\n }\n this.triggerEvent(cValue, pValue, this.convertToRgbString(this.rgb));\n }\n if (!this.inline && !this.showButtons) {\n this.closePopup(e);\n }\n }\n else {\n if (closest(target, '.' + MODESWITCH)) {\n this.switchToPicker();\n }\n else {\n if (target.classList.contains(APPLY) || target.classList.contains(CANCEL)) {\n this.ctrlBtnClick(target, e);\n }\n else {\n if (this.getWrapper().classList.contains(SHOWVALUE) && closest(target, '.' + FORMATSWITCH)) {\n this.formatSwitchHandler();\n }\n }\n }\n }\n }\n noColorTile(isKey = false) {\n const pValue = this.rgbToHex(this.rgb);\n this.rgb = [];\n this.hsv = [];\n this.triggerEvent('', pValue, '', isKey);\n }\n switchToPicker() {\n const wrapper = this.getWrapper();\n this.trigger('beforeModeSwitch', { element: this.container, mode: 'Picker' });\n this.unWireEvents();\n ([].slice.call(selectAll('.' + PALETTES, this.container))).forEach((ele) => {\n detach(ele);\n });\n if (wrapper.classList.contains(SHOWVALUE)) {\n detach(select('.' + INPUTWRAPPER, this.container));\n }\n this.container.style.width = '';\n const grpEle = select('.e-custom-palette', this.container);\n if (this.presetColors) {\n remove(grpEle);\n }\n this.createPicker();\n this.getDragHandler().focus();\n this.createInput();\n this.refreshPopupPos();\n this.wireEvents();\n this.trigger('onModeSwitch', { element: this.container, mode: 'Picker' });\n }\n ctrlBtnClick(ele, e) {\n if (ele.classList.contains(APPLY)) {\n const cValue = this.rgbToHex(this.rgb);\n this.triggerChangeEvent(cValue);\n }\n if (!this.inline) {\n this.closePopup(e);\n this.splitBtn.element.focus();\n }\n }\n paletteKeyDown(e) {\n const target = e.target;\n if (!target.classList.contains(PALETTES)) {\n return;\n }\n let selectedEle;\n let idx;\n const tiles = [].slice.call(selectAll('.' + TILE, target));\n const prevSelectedEle = (tiles.filter((tile) => tile.classList.contains('e-selected'))).pop();\n switch (!e.altKey && e.keyCode) {\n case 39:\n e.preventDefault();\n selectedEle = prevSelectedEle ? tiles[this.tilePosition(tiles, prevSelectedEle, this.enableRtl ? -1 : 1)]\n : tiles[this.enableRtl ? tiles.length - 1 : 0];\n this.keySelectionChanges(selectedEle);\n break;\n case 37:\n e.preventDefault();\n selectedEle = prevSelectedEle ? tiles[this.tilePosition(tiles, prevSelectedEle, this.enableRtl ? 1 : -1)]\n : tiles[this.enableRtl ? 0 : tiles.length - 1];\n this.keySelectionChanges(selectedEle);\n break;\n case 38:\n e.preventDefault();\n idx = prevSelectedEle ? this.tilePosition(tiles, prevSelectedEle, -this.columns) : 0;\n selectedEle = tiles[idx] ? tiles[idx] : tiles[idx - this.columns];\n this.keySelectionChanges(selectedEle);\n break;\n case 40:\n e.preventDefault();\n idx = prevSelectedEle ? this.tilePosition(tiles, prevSelectedEle, this.columns) : tiles.length - 1;\n if (tiles[idx]) {\n selectedEle = tiles[idx];\n }\n else {\n idx %= tiles.length;\n idx += tiles[tiles.length - 1].parentElement.childElementCount;\n selectedEle = tiles[idx];\n }\n this.keySelectionChanges(selectedEle);\n break;\n case 13:\n e.preventDefault();\n if (prevSelectedEle) {\n const cValue = prevSelectedEle.getAttribute('aria-label');\n this.enterKeyHandler(cValue ? cValue : '', e);\n }\n }\n }\n keySelectionChanges(newEle) {\n this.removeTileSelection();\n this.addTileSelection(newEle);\n if (newEle.classList.contains(NOCOLOR)) {\n this.noColorTile(true);\n }\n else {\n const cValue = newEle.getAttribute('aria-label');\n const pValue = this.rgbToHex(this.rgb);\n this.rgb = this.hexToRgb(cValue);\n this.hsv = this.rgbToHsv.apply(this, this.rgb);\n if (this.getWrapper().classList.contains(SHOWVALUE)) {\n this.updateInput(cValue);\n }\n this.triggerEvent(cValue, pValue, this.convertToRgbString(this.rgb), true);\n }\n }\n tilePosition(items, element, cIdx) {\n items = Array.prototype.slice.call(items);\n const n = items.length;\n const emptyCount = this.columns - items[n - 1].parentElement.childElementCount;\n let idx = items.indexOf(element);\n idx += cIdx;\n if (idx < 0) {\n idx += n + emptyCount;\n }\n else {\n idx %= n + emptyCount;\n }\n return idx;\n }\n inputHandler(e) {\n const target = e.target;\n if (!target.value.length) {\n return;\n }\n let hsv;\n let pValue;\n const label = select('.e-float-text', target.parentElement).textContent;\n switch (label) {\n case 'HEX': {\n let value = '';\n if ((target.value[0] === '#' && target.value.length !== 5) || (target.value[0] !== '#' && target.value.length !== 4)) {\n value = this.roundValue(target.value);\n }\n if (value.length === 9) {\n pValue = this.rgbToHex(this.rgb);\n this.rgb = this.hexToRgb(value + value.substr(-2));\n this.inputValueChange(this.rgbToHsv.apply(this, this.rgb), pValue, target.value);\n }\n else {\n return;\n }\n break;\n }\n case 'R':\n if (this.rgb[0] !== Number(target.value)) {\n pValue = this.rgbToHex(this.rgb);\n this.rgb[0] = Number(target.value);\n hsv = this.rgbToHsv.apply(this, this.rgb);\n this.inputValueChange(hsv, pValue);\n }\n break;\n case 'G':\n if (this.rgb[1] !== Number(target.value)) {\n pValue = this.rgbToHex(this.rgb);\n this.rgb[1] = Number(target.value);\n hsv = this.rgbToHsv.apply(this, this.rgb);\n this.inputValueChange(hsv, pValue);\n }\n break;\n case 'B':\n if (this.rgb[2] !== Number(target.value)) {\n pValue = this.rgbToHex(this.rgb);\n this.rgb[2] = Number(target.value);\n hsv = this.rgbToHsv.apply(this, this.rgb);\n this.inputValueChange(hsv, pValue);\n }\n break;\n case 'H':\n this.hueSlider.value = Number(target.value);\n break;\n case 'S':\n if (this.hsv[1] !== Number(target.value)) {\n this.hsv[1] = Number(target.value);\n this.updateHsv();\n this.convertToOtherFormat();\n }\n break;\n case 'V':\n if (this.hsv[2] !== Number(target.value)) {\n this.hsv[2] = Number(target.value);\n this.updateHsv();\n this.convertToOtherFormat();\n }\n break;\n case 'A':\n this.opacitySlider.value = Number(target.value);\n break;\n }\n }\n inputValueChange(hsv, pValue, value) {\n if (hsv[0] !== this.hsv[0]) {\n this.hueSlider.setProperties({ 'value': hsv[0] }, true);\n this.hueSlider.refresh();\n this.setHsvContainerBg(hsv[0]);\n }\n this.hsv = hsv;\n const cValue = this.rgbToHex(this.rgb);\n this.setHandlerPosition();\n this.updateInput(value ? value : cValue);\n const rgba = this.convertToRgbString(this.rgb);\n this.updatePreview(rgba);\n this.triggerEvent(cValue, pValue, rgba);\n }\n triggerEvent(cValue, pValue, rgba, isKey = false) {\n const hex = cValue.slice(0, 7);\n if (!this.showButtons && !isKey) {\n this.trigger('change', { currentValue: { hex: hex, rgba: rgba },\n previousValue: { hex: this.value.slice(0, 7), rgba: this.convertToRgbString(this.hexToRgb(this.value)) }, value: cValue });\n this.setProperties({ 'value': cValue }, true);\n this.element.value = hex ? hex : '#000000';\n }\n else {\n this.trigger('select', {\n currentValue: { hex: hex, rgba: rgba },\n previousValue: { hex: pValue.slice(0, 7), rgba: this.convertToRgbString(this.hexToRgb(pValue)) }\n });\n }\n }\n /**\n * Removes the component from the DOM and detaches all its related event handlers.\n * Also it maintains the initial input element from the DOM.\n *\n * @method destroy\n * @returns {void}\n */\n destroy() {\n const wrapper = this.getWrapper();\n super.destroy();\n ['tabindex', 'spellcheck'].forEach((attr) => { this.element.removeAttribute(attr); });\n if (this.inline) {\n this.unWireEvents();\n this.destroyOtherComp();\n }\n else {\n if (this.isPopupOpen()) {\n this.unWireEvents();\n this.destroyOtherComp();\n }\n this.splitBtn.destroy();\n this.splitBtn = null;\n }\n this.tileRipple();\n this.tileRipple = null;\n this.ctrlBtnRipple();\n this.ctrlBtnRipple = null;\n if (this.element.nextElementSibling) {\n detach(this.element.nextElementSibling);\n }\n if (wrapper) {\n wrapper.parentElement.insertBefore(this.element, wrapper);\n detach(wrapper);\n }\n this.container = null;\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n }\n destroyOtherComp() {\n if (this.isPicker()) {\n this.hueSlider.destroy();\n if (this.enableOpacity) {\n this.opacitySlider.destroy();\n this.opacitySlider = null;\n }\n this.hueSlider = null;\n const tooltipInst = this.getTooltipInst();\n tooltipInst.close();\n tooltipInst.destroy();\n this.tooltipEle = null;\n }\n }\n isPopupOpen() {\n return this.getPopupEle().classList.contains('e-popup-open');\n }\n unWireEvents() {\n if (this.isPicker()) {\n const dragHandler = this.getDragHandler();\n EventHandler.remove(dragHandler, 'keydown', this.pickerKeyDown);\n EventHandler.remove(this.getHsvContainer(), 'mousedown touchstart', this.handlerDown);\n if (this.modeSwitcher || this.showButtons) {\n EventHandler.remove(select('.' + CTRLSWITCH, this.container), 'click', this.btnClickHandler);\n }\n EventHandler.remove(select('.' + PREVIOUS, this.container), 'click', this.previewHandler);\n }\n else {\n EventHandler.remove(this.container, 'click', this.paletteClickHandler);\n EventHandler.remove(this.container, 'keydown', this.paletteKeyDown);\n }\n }\n roundValue(value) {\n if (!value) {\n return '';\n }\n if (value[0] !== '#') {\n value = '#' + value;\n }\n let len = value.length;\n if (len === 4) {\n value += 'f';\n len = 5;\n }\n if (len === 5) {\n let tempValue = '';\n for (let i = 1, len = value.length; i < len; i++) {\n tempValue += (value.charAt(i) + value.charAt(i));\n }\n value = '#' + tempValue;\n len = 9;\n }\n if (len === 7) {\n value += 'ff';\n }\n return value;\n }\n hexToRgb(hex) {\n if (!hex) {\n return [];\n }\n hex = hex.trim();\n if (hex.length !== 9) {\n hex = this.roundValue(hex);\n }\n const opacity = Number((parseInt(hex.slice(-2), 16) / 255).toFixed(2));\n hex = hex.slice(1, 7);\n const bigInt = parseInt(hex, 16);\n const h = [];\n h.push((bigInt >> 16) & 255);\n h.push((bigInt >> 8) & 255);\n h.push(bigInt & 255);\n h.push(opacity);\n return h;\n }\n rgbToHsv(r, g, b, opacity) {\n if (this.rgb && !this.rgb.length) {\n return [];\n }\n r /= 255;\n g /= 255;\n b /= 255;\n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n let h;\n const v = max;\n const d = max - min;\n const s = max === 0 ? 0 : d / max;\n if (max === min) {\n h = 0;\n }\n else {\n switch (max) {\n case r:\n h = (g - b) / d + (g < b ? 6 : 0);\n break;\n case g:\n h = (b - r) / d + 2;\n break;\n case b:\n h = (r - g) / d + 4;\n break;\n }\n h /= 6;\n }\n const hsv = [Math.round(h * 360), Math.round(s * 1000) / 10, Math.round(v * 1000) / 10];\n if (!isNullOrUndefined(opacity)) {\n hsv.push(opacity);\n }\n return hsv;\n }\n hsvToRgb(h, s, v, opacity) {\n let r;\n let g;\n let b;\n s /= 100;\n v /= 100;\n if (s === 0) {\n r = g = b = v;\n return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), opacity];\n }\n h /= 60;\n const i = Math.floor(h);\n const f = h - i;\n const p = v * (1 - s);\n const q = v * (1 - s * f);\n const t = v * (1 - s * (1 - f));\n switch (i) {\n case 0:\n r = v;\n g = t;\n b = p;\n break;\n case 1:\n r = q;\n g = v;\n b = p;\n break;\n case 2:\n r = p;\n g = v;\n b = t;\n break;\n case 3:\n r = p;\n g = q;\n b = v;\n break;\n case 4:\n r = t;\n g = p;\n b = v;\n break;\n default:\n r = v;\n g = p;\n b = q;\n }\n const rgb = [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];\n if (!isNullOrUndefined(opacity)) {\n rgb.push(opacity);\n }\n return rgb;\n }\n rgbToHex(rgb) {\n return rgb.length ? ('#' + this.hex(rgb[0]) + this.hex(rgb[1]) + this.hex(rgb[2]) +\n (!isNullOrUndefined(rgb[3]) ? (rgb[3] !== 0 ? (Math.round(rgb[3] * 255) + 0x10000).toString(16).substr(-2) : '00') : '')) : '';\n }\n hex(x) {\n return ('0' + x.toString(16)).slice(-2);\n }\n changeModeSwitcherProp(prop) {\n const ctrlSwitchWrapper = select('.' + CTRLSWITCH, this.container);\n if (prop) {\n if (ctrlSwitchWrapper) {\n this.appendModeSwitchBtn();\n }\n else {\n this.createCtrlBtn();\n if (this.isPicker() && !this.disabled) {\n this.addCtrlSwitchEvent();\n }\n }\n }\n else {\n if (ctrlSwitchWrapper) {\n if (this.showButtons) {\n detach(select('.' + MODESWITCH, ctrlSwitchWrapper));\n }\n else {\n remove(ctrlSwitchWrapper);\n }\n }\n }\n }\n changeShowBtnProps(prop) {\n const ctrlBtnWrapper = select('.' + CTRLSWITCH, this.container);\n if (prop) {\n if (ctrlBtnWrapper) {\n remove(ctrlBtnWrapper);\n }\n this.createCtrlBtn();\n if (this.isPicker() && !this.disabled) {\n this.addCtrlSwitchEvent();\n }\n }\n else {\n if (this.modeSwitcher) {\n detach(select('.' + CTRLBTN, ctrlBtnWrapper));\n }\n else {\n remove(ctrlBtnWrapper);\n }\n }\n }\n changeValueProp(newProp) {\n if (this.isPicker()) {\n this.rgb = this.hexToRgb(newProp);\n this.hsv = this.rgbToHsv.apply(this, this.rgb);\n this.setHandlerPosition();\n detach(closest(this.hueSlider.element, '.e-slider-preview'));\n this.createSlider();\n this.setHsvContainerBg();\n this.updateInput(newProp);\n if (this.rgb.length === 4) {\n this.updateOpacityInput(this.rgb[3] * 100);\n }\n }\n else {\n this.removeTileSelection();\n const ele = this.container.querySelector('span[aria-label=\"' + this.roundValue(newProp) + '\"]');\n if (ele) {\n this.addTileSelection(ele);\n }\n }\n }\n setInputEleProps() {\n remove(select('.' + INPUTWRAPPER, this.container));\n this.createInput();\n }\n changeDisabledProp(newProp) {\n if (this.isPicker()) {\n this.hueSlider.enabled = !newProp;\n this.opacitySlider.enabled = !newProp;\n this.setInputEleProps();\n }\n if (newProp) {\n this.toggleDisabled(true);\n this.unWireEvents();\n }\n else {\n this.toggleDisabled(false);\n this.wireEvents();\n }\n }\n changeCssClassProps(newProp, oldProp) {\n const wrapper = this.getWrapper();\n const popupWrapper = this.getPopupEle();\n if (oldProp) {\n removeClass([wrapper, popupWrapper], oldProp.split(' '));\n }\n if (newProp) {\n addClass([wrapper, popupWrapper], newProp.split(' '));\n }\n }\n changeRtlProps(newProp) {\n if (newProp) {\n addClass([this.getWrapper()], 'e-rtl');\n }\n else {\n removeClass([this.getWrapper()], 'e-rtl');\n }\n }\n changePaletteProps() {\n detach(this.container.children[0]);\n this.container.style.width = '';\n this.createPalette();\n }\n changeOpacityProps(newProp) {\n const wrapper = this.getWrapper();\n if (newProp) {\n removeClass([this.container.parentElement], HIDEOPACITY);\n this.createOpacitySlider(select('.e-colorpicker-slider', this.container).appendChild(this.createElement('div', { className: 'e-opacity-slider' })));\n if (!wrapper.classList.contains(HIDEVALUE) && !wrapper.classList.contains(HIDERGBA)) {\n this.appendOpacityValue(select('.e-input-container', this.container));\n }\n }\n else {\n addClass([this.container.parentElement], HIDEOPACITY);\n this.opacitySlider.destroy();\n remove(this.opacitySlider.element);\n this.opacitySlider = null;\n if (!wrapper.classList.contains(HIDEVALUE) && !wrapper.classList.contains(HIDERGBA)) {\n remove(select('.' + OPACITY, this.container).parentElement);\n }\n }\n }\n /**\n * Called internally if any of the property value changed.\n *\n * @param {ColorPickerModel} newProp - Specifies new properties\n * @param {ColorPickerModel} oldProp - Specifies old properties\n * @returns {void}\n * @private\n */\n onPropertyChanged(newProp, oldProp) {\n if (!isNullOrUndefined(newProp.value)) {\n const value = this.roundValue(newProp.value);\n if (value.length === 9) {\n this.element.value = this.roundValue(value).slice(0, 7);\n const preview = this.splitBtn && select('.' + SPLITPREVIEW, this.splitBtn.element);\n if (preview) {\n preview.style.backgroundColor = this.convertToRgbString(this.hexToRgb(newProp.value));\n }\n }\n else {\n this.value = oldProp.value;\n }\n }\n if (!this.inline && isNullOrUndefined(newProp.inline)) {\n const otherCompModel = ['disabled', 'enableRtl'];\n this.splitBtn.setProperties(getModel(newProp, otherCompModel));\n if (!this.isPopupOpen()) {\n this.changeCssClassProps(newProp.cssClass, oldProp.cssClass);\n this.changeRtlProps(newProp.enableRtl);\n return;\n }\n }\n for (const prop of Object.keys(newProp)) {\n switch (prop) {\n case 'inline':\n if (newProp.inline) {\n this.getWrapper().appendChild(this.container);\n this.splitBtn.destroy();\n detach(this.element.nextElementSibling);\n if (!this.container.children.length) {\n this.createWidget();\n }\n }\n else {\n this.destroyOtherComp();\n this.unWireEvents();\n this.container.innerHTML = '';\n this.createSplitBtn();\n }\n break;\n case 'cssClass': {\n this.changeCssClassProps(newProp.cssClass, oldProp.cssClass);\n let props = newProp.cssClass.split(' ').concat(oldProp.cssClass.split(' '));\n props = props.reduce((a, b) => { if (a.indexOf(b) < 0) {\n a.push(b);\n } return a; }, []);\n let count = 0;\n props.forEach((cls) => {\n if (count === 0 &&\n (cls === HIDEVALUE || cls === HIDEVALUESWITCH || cls === SHOWVALUE || cls === HIDEHEX || cls === HIDERGBA)) {\n const inputWrap = select('.' + INPUTWRAPPER, this.container);\n if (inputWrap) {\n remove(select('.' + INPUTWRAPPER, this.container));\n }\n this.createInput();\n count++;\n }\n });\n break;\n }\n case 'enableRtl':\n if (this.isPicker()) {\n this.hueSlider.enableRtl = newProp.enableRtl;\n if (this.enableOpacity) {\n this.opacitySlider.enableRtl = newProp.enableRtl;\n }\n this.setInputEleProps();\n }\n this.changeRtlProps(newProp.enableRtl);\n break;\n case 'disabled':\n this.changeDisabledProp(newProp.disabled);\n break;\n case 'value':\n if (this.value !== oldProp.value) {\n this.changeValueProp(newProp.value);\n }\n break;\n case 'showButtons':\n this.changeShowBtnProps(newProp.showButtons);\n break;\n case 'mode':\n if (newProp.mode === 'Picker') {\n this.switchToPicker();\n }\n else {\n this.switchToPalette();\n }\n break;\n case 'modeSwitcher':\n this.changeModeSwitcherProp(newProp.modeSwitcher);\n break;\n case 'columns':\n case 'presetColors':\n if (!this.isPicker()) {\n this.changePaletteProps();\n }\n break;\n case 'noColor':\n if (newProp.noColor) {\n if (this.mode === 'Palette' && !this.modeSwitcher) {\n this.setNoColor();\n }\n }\n else {\n this.changePaletteProps();\n }\n break;\n case 'enableOpacity':\n this.changeOpacityProps(newProp.enableOpacity);\n break;\n }\n }\n }\n /**\n * Sets the focus to Colorpicker\n * its native method\n *\n * @public\n * @returns {void}\n */\n focusIn() {\n this.element.parentElement.focus();\n }\n};\n__decorate$5([\n Property('#008000ff')\n], ColorPicker.prototype, \"value\", void 0);\n__decorate$5([\n Property('')\n], ColorPicker.prototype, \"cssClass\", void 0);\n__decorate$5([\n Property(false)\n], ColorPicker.prototype, \"disabled\", void 0);\n__decorate$5([\n Property('Picker')\n], ColorPicker.prototype, \"mode\", void 0);\n__decorate$5([\n Property(true)\n], ColorPicker.prototype, \"modeSwitcher\", void 0);\n__decorate$5([\n Property(null)\n], ColorPicker.prototype, \"presetColors\", void 0);\n__decorate$5([\n Property(true)\n], ColorPicker.prototype, \"showButtons\", void 0);\n__decorate$5([\n Property(10)\n], ColorPicker.prototype, \"columns\", void 0);\n__decorate$5([\n Property(false)\n], ColorPicker.prototype, \"inline\", void 0);\n__decorate$5([\n Property(false)\n], ColorPicker.prototype, \"noColor\", void 0);\n__decorate$5([\n Property(false)\n], ColorPicker.prototype, \"enablePersistence\", void 0);\n__decorate$5([\n Property(true)\n], ColorPicker.prototype, \"enableOpacity\", void 0);\n__decorate$5([\n Event()\n], ColorPicker.prototype, \"select\", void 0);\n__decorate$5([\n Event()\n], ColorPicker.prototype, \"change\", void 0);\n__decorate$5([\n Event()\n], ColorPicker.prototype, \"beforeTileRender\", void 0);\n__decorate$5([\n Event()\n], ColorPicker.prototype, \"beforeOpen\", void 0);\n__decorate$5([\n Event()\n], ColorPicker.prototype, \"open\", void 0);\n__decorate$5([\n Event()\n], ColorPicker.prototype, \"beforeClose\", void 0);\n__decorate$5([\n Event()\n], ColorPicker.prototype, \"beforeModeSwitch\", void 0);\n__decorate$5([\n Event()\n], ColorPicker.prototype, \"onModeSwitch\", void 0);\n__decorate$5([\n Event()\n], ColorPicker.prototype, \"created\", void 0);\nColorPicker = __decorate$5([\n NotifyPropertyChanges\n], ColorPicker);\n\n/**\n * ColorPicker modules\n */\n\nvar __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nconst HIDE_CLEAR = 'e-clear-icon-hide';\nconst TEXTBOX_FOCUS = 'e-input-focus';\nconst containerAttr = ['title', 'style', 'class'];\n/**\n * Represents the TextBox component that allows the user to enter the values based on it's type.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nlet TextBox = class TextBox extends Component {\n /**\n *\n * @param {TextBoxModel} options - Specifies the TextBox model.\n * @param {string | HTMLInputElement | HTMLTextAreaElement} element - Specifies the element to render as component.\n * @private\n */\n constructor(options, element) {\n super(options, element);\n this.previousValue = null;\n this.isAngular = false;\n this.isHiddenInput = false;\n this.isForm = false;\n this.inputPreviousValue = null;\n this.isVue = false;\n this.textboxOptions = options;\n }\n /**\n * Calls internally if any of the property value is changed.\n *\n * @param {TextBoxModel} newProp - Returns the dynamic property value of the component.\n * @param {TextBoxModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n onPropertyChanged(newProp, oldProp) {\n for (const prop of Object.keys(newProp)) {\n switch (prop) {\n case 'floatLabelType':\n Input.removeFloating(this.textboxWrapper);\n Input.addFloating(this.respectiveElement, this.floatLabelType, this.placeholder);\n break;\n case 'enabled':\n Input.setEnabled(this.enabled, this.respectiveElement, this.floatLabelType, this.textboxWrapper.container);\n this.bindClearEvent();\n break;\n case 'width':\n Input.setWidth(newProp.width, this.textboxWrapper.container);\n break;\n case 'value':\n {\n const prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n if (!this.isBlank(this.value)) {\n this.value = this.value.toString();\n }\n this.isProtectedOnChange = prevOnChange;\n Input.setValue(this.value, this.respectiveElement, this.floatLabelType, this.showClearButton);\n if (this.isHiddenInput) {\n this.element.value = this.respectiveElement.value;\n }\n this.inputPreviousValue = this.respectiveElement.value;\n /* istanbul ignore next */\n if ((this.isAngular || this.isVue) && this.preventChange === true) {\n this.previousValue = this.isAngular ? this.value : this.previousValue;\n this.preventChange = false;\n }\n else if (isNullOrUndefined(this.isAngular) || !this.isAngular\n || (this.isAngular && !this.preventChange) || (this.isAngular && isNullOrUndefined(this.preventChange))) {\n this.raiseChangeEvent();\n }\n }\n break;\n case 'htmlAttributes':\n {\n this.updateHTMLAttrToElement();\n this.updateHTMLAttrToWrapper();\n this.checkAttributes(true);\n Input.validateInputType(this.textboxWrapper.container, this.element);\n }\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.respectiveElement);\n break;\n case 'type':\n if (this.respectiveElement.tagName !== 'TEXTAREA') {\n this.respectiveElement.setAttribute('type', this.type);\n Input.validateInputType(this.textboxWrapper.container, this.element);\n this.raiseChangeEvent();\n }\n break;\n case 'showClearButton':\n if (this.respectiveElement.tagName !== 'TEXTAREA') {\n Input.setClearButton(this.showClearButton, this.respectiveElement, this.textboxWrapper);\n this.bindClearEvent();\n }\n break;\n case 'enableRtl':\n Input.setEnableRtl(this.enableRtl, [this.textboxWrapper.container]);\n break;\n case 'placeholder':\n Input.setPlaceholder(this.placeholder, this.respectiveElement);\n break;\n case 'autocomplete':\n if (this.autocomplete !== 'on' && this.autocomplete !== '') {\n this.respectiveElement.autocomplete = this.autocomplete;\n }\n else {\n this.removeAttributes(['autocomplete']);\n }\n break;\n case 'cssClass':\n this.updateCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n case 'locale':\n this.globalize = new Internationalization(this.locale);\n this.l10n.setLocale(this.locale);\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n Input.setPlaceholder(this.placeholder, this.respectiveElement);\n break;\n }\n }\n }\n /**\n * Gets the component name\n *\n * @returns {string} Returns the component name.\n * @private\n */\n getModuleName() {\n return 'textbox';\n }\n isBlank(str) {\n return (!str || /^\\s*$/.test(str));\n }\n preRender() {\n if (!(isBlazor() && this.isServerRendered)) {\n this.cloneElement = this.element.cloneNode(true);\n this.formElement = closest(this.element, 'form');\n if (!isNullOrUndefined(this.formElement)) {\n this.isForm = true;\n }\n /* istanbul ignore next */\n if (this.element.tagName === 'EJS-TEXTBOX') {\n const ejInstance = getValue('ej2_instances', this.element);\n const inputElement = this.multiline ?\n this.createElement('textarea') :\n this.createElement('input');\n let index = 0;\n for (index; index < this.element.attributes.length; index++) {\n const attributeName = this.element.attributes[index].nodeName;\n if (attributeName !== 'id') {\n inputElement.setAttribute(attributeName, this.element.attributes[index].nodeValue);\n inputElement.innerHTML = this.element.innerHTML;\n if (attributeName === 'name') {\n this.element.removeAttribute('name');\n }\n }\n }\n this.element.appendChild(inputElement);\n this.element = inputElement;\n setValue('ej2_instances', ejInstance, this.element);\n }\n this.updateHTMLAttrToElement();\n this.checkAttributes(false);\n if (this.element.tagName !== 'TEXTAREA') {\n this.element.setAttribute('type', this.type);\n }\n this.element.setAttribute('role', 'textbox');\n this.globalize = new Internationalization(this.locale);\n const localeText = { placeholder: this.placeholder };\n this.l10n = new L10n('textbox', localeText, this.locale);\n if (this.l10n.getConstant('placeholder') !== '') {\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n }\n if (!this.element.hasAttribute('id')) {\n this.element.setAttribute('id', getUniqueID('textbox'));\n }\n if (!this.element.hasAttribute('name')) {\n this.element.setAttribute('name', this.element.getAttribute('id'));\n }\n if (this.element.tagName === 'INPUT' && this.multiline) {\n this.isHiddenInput = true;\n this.textarea = this.createElement('textarea');\n this.element.parentNode.insertBefore(this.textarea, this.element);\n this.element.setAttribute('type', 'hidden');\n this.textarea.setAttribute('name', this.element.getAttribute('name'));\n this.element.removeAttribute('name');\n this.textarea.setAttribute('role', this.element.getAttribute('role'));\n this.element.removeAttribute('role');\n this.textarea.setAttribute('id', getUniqueID('textarea'));\n const apiAttributes = ['placeholder', 'disabled', 'value', 'readonly', 'type', 'autocomplete'];\n for (let index = 0; index < this.element.attributes.length; index++) {\n const attributeName = this.element.attributes[index].nodeName;\n if (this.element.hasAttribute(attributeName) && containerAttr.indexOf(attributeName) < 0 &&\n !(attributeName === 'id' || attributeName === 'type' || attributeName === 'e-mappinguid')) {\n // e-mappinguid attribute is handled for Grid component.\n this.textarea.setAttribute(attributeName, this.element.attributes[index].nodeValue);\n if (apiAttributes.indexOf(attributeName) < 0) {\n this.element.removeAttribute(attributeName);\n index--;\n }\n }\n }\n }\n }\n }\n checkAttributes(isDynamic) {\n const attrs = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['placeholder', 'disabled', 'value', 'readonly', 'type', 'autocomplete'];\n for (const key of attrs) {\n if (!isNullOrUndefined(this.element.getAttribute(key))) {\n switch (key) {\n case 'disabled':\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['enabled'] === undefined)) || isDynamic) {\n const enabled = this.element.getAttribute(key) === 'disabled' || this.element.getAttribute(key) === '' ||\n this.element.getAttribute(key) === 'true' ? false : true;\n this.setProperties({ enabled: enabled }, !isDynamic);\n }\n break;\n case 'readonly':\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['readonly'] === undefined)) || isDynamic) {\n const readonly = this.element.getAttribute(key) === 'readonly' || this.element.getAttribute(key) === ''\n || this.element.getAttribute(key) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !isDynamic);\n }\n break;\n case 'placeholder':\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.element.placeholder }, !isDynamic);\n }\n break;\n case 'autocomplete':\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['autocomplete'] === undefined)) || isDynamic) {\n const autoCompleteTxt = this.element.autocomplete === 'off' ? 'off' : 'on';\n this.setProperties({ autocomplete: autoCompleteTxt }, !isDynamic);\n }\n break;\n case 'value':\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['value'] === undefined)) || isDynamic) {\n this.setProperties({ value: this.element.value }, !isDynamic);\n }\n break;\n case 'type':\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['type'] === undefined)) || isDynamic) {\n this.setProperties({ type: this.element.type }, !isDynamic);\n }\n break;\n }\n }\n }\n }\n /**\n * To Initialize the control rendering\n *\n * @returns {void}\n * @private\n */\n render() {\n let updatedCssClassValue = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassValue = this.getInputValidClassList(this.cssClass);\n }\n if (!(isBlazor() && this.isServerRendered)) {\n this.respectiveElement = (this.isHiddenInput) ? this.textarea : this.element;\n this.textboxWrapper = Input.createInput({\n element: this.respectiveElement,\n floatLabelType: this.floatLabelType,\n properties: {\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n cssClass: updatedCssClassValue,\n readonly: this.readonly,\n placeholder: this.placeholder,\n showClearButton: this.showClearButton\n }\n });\n this.updateHTMLAttrToWrapper();\n if (this.isHiddenInput) {\n this.respectiveElement.parentNode.insertBefore(this.element, this.respectiveElement);\n }\n }\n else {\n this.respectiveElement = this.element;\n this.textboxWrapper = { container: this.element.parentElement };\n if (this.showClearButton && !this.multiline) {\n this.textboxWrapper.clearButton = this.textboxWrapper.container.querySelector('.e-clear-icon');\n Input.wireClearBtnEvents(this.respectiveElement, this.textboxWrapper.clearButton, this.textboxWrapper.container);\n }\n if (this.floatLabelType === 'Auto') {\n Input.wireFloatingEvents(this.respectiveElement);\n }\n // eslint-disable-next-line max-len, @typescript-eslint/no-explicit-any\n Input.bindInitialEvent({ element: this.respectiveElement, buttons: null, customTag: null, floatLabelType: this.floatLabelType, properties: this.properties });\n }\n this.wireEvents();\n if (!isNullOrUndefined(this.value)) {\n Input.setValue(this.value, this.respectiveElement, this.floatLabelType, this.showClearButton);\n if (this.isHiddenInput) {\n this.element.value = this.respectiveElement.value;\n }\n }\n if (!isNullOrUndefined(this.value)) {\n this.initialValue = this.value;\n this.setInitialValue();\n }\n if (this.autocomplete !== 'on' && this.autocomplete !== '') {\n this.respectiveElement.autocomplete = this.autocomplete;\n }\n else if (!isNullOrUndefined(this.textboxOptions) && (this.textboxOptions['autocomplete'] !== undefined)) {\n this.removeAttributes(['autocomplete']);\n }\n this.previousValue = this.value;\n this.inputPreviousValue = this.value;\n this.respectiveElement.defaultValue = this.respectiveElement.value;\n Input.setWidth(this.width, this.textboxWrapper.container);\n this.renderComplete();\n }\n updateHTMLAttrToWrapper() {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (const key of Object.keys(this.htmlAttributes)) {\n if (containerAttr.indexOf(key) > -1) {\n if (key === 'class') {\n const updatedClassValues = this.getInputValidClassList(this.htmlAttributes[key]);\n if (updatedClassValues !== '') {\n addClass([this.textboxWrapper.container], updatedClassValues.split(' '));\n }\n }\n else if (key === 'style') {\n let setStyle = this.textboxWrapper.container.getAttribute(key);\n setStyle = !isNullOrUndefined(setStyle) ? (setStyle + this.htmlAttributes[key]) :\n this.htmlAttributes[key];\n this.textboxWrapper.container.setAttribute(key, setStyle);\n }\n else {\n this.textboxWrapper.container.setAttribute(key, this.htmlAttributes[key]);\n }\n }\n }\n }\n }\n updateHTMLAttrToElement() {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (const key of Object.keys(this.htmlAttributes)) {\n if (containerAttr.indexOf(key) < 0) {\n this.element.setAttribute(key, this.htmlAttributes[key]);\n }\n }\n }\n }\n updateCssClass(newClass, oldClass) {\n Input.setCssClass(this.getInputValidClassList(newClass), [this.textboxWrapper.container], this.getInputValidClassList(oldClass));\n }\n getInputValidClassList(inputClassName) {\n let result = inputClassName;\n if (!isNullOrUndefined(inputClassName) && inputClassName !== '') {\n result = (inputClassName.replace(/\\s+/g, ' ')).trim();\n }\n return result;\n }\n setInitialValue() {\n if (!this.isAngular) {\n this.respectiveElement.setAttribute('value', this.initialValue);\n }\n }\n wireEvents() {\n EventHandler.add(this.respectiveElement, 'focus', this.focusHandler, this);\n EventHandler.add(this.respectiveElement, 'blur', this.focusOutHandler, this);\n EventHandler.add(this.respectiveElement, 'input', this.inputHandler, this);\n EventHandler.add(this.respectiveElement, 'change', this.changeHandler, this);\n if (this.isForm) {\n EventHandler.add(this.formElement, 'reset', this.resetForm, this);\n }\n this.bindClearEvent();\n if (!isNullOrUndefined(this.textboxWrapper.container.querySelector('.e-float-text')) && this.floatLabelType === 'Auto'\n && this.textboxWrapper.container.classList.contains('e-autofill') &&\n this.textboxWrapper.container.classList.contains('e-outline')) {\n EventHandler.add((this.textboxWrapper.container.querySelector('.e-float-text')), 'animationstart', this.animationHandler, this);\n }\n }\n animationHandler() {\n this.textboxWrapper.container.classList.add('e-valid-input');\n const label = this.textboxWrapper.container.querySelector('.e-float-text');\n if (!isNullOrUndefined(label)) {\n label.classList.add('e-label-top');\n if (label.classList.contains('e-label-bottom')) {\n label.classList.remove('e-label-bottom');\n }\n }\n }\n resetValue(value) {\n const prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.value = value;\n this.isProtectedOnChange = prevOnChange;\n }\n resetForm() {\n if (this.isAngular) {\n this.resetValue('');\n }\n else {\n this.resetValue(this.initialValue);\n }\n if (!isNullOrUndefined(this.textboxWrapper)) {\n const label = this.textboxWrapper.container.querySelector('.e-float-text');\n if (!isNullOrUndefined(label)) {\n if ((isNullOrUndefined(this.initialValue) || this.initialValue === '')) {\n label.classList.add('e-label-bottom');\n label.classList.remove('e-label-top');\n }\n else if (this.initialValue !== '') {\n label.classList.add('e-label-top');\n label.classList.remove('e-label-bottom');\n }\n }\n }\n }\n focusHandler(args) {\n const eventArgs = {\n container: this.textboxWrapper.container,\n event: args,\n value: this.value\n };\n this.trigger('focus', eventArgs);\n }\n focusOutHandler(args) {\n if (!(this.previousValue === null && this.value === null && this.respectiveElement.value === '') &&\n (this.previousValue !== this.respectiveElement.value)) {\n this.raiseChangeEvent(args, true);\n }\n const eventArgs = {\n container: this.textboxWrapper.container,\n event: args,\n value: this.value\n };\n this.trigger('blur', eventArgs);\n }\n inputHandler(args) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-this-alias\n const textboxObj = this;\n const eventArgs = {\n event: args,\n value: this.respectiveElement.value,\n previousValue: this.inputPreviousValue,\n container: this.textboxWrapper.container\n };\n this.inputPreviousValue = this.respectiveElement.value;\n /* istanbul ignore next */\n if (this.isAngular) {\n textboxObj.localChange({ value: this.respectiveElement.value });\n this.preventChange = true;\n }\n if (this.isVue) {\n this.preventChange = true;\n }\n this.trigger('input', eventArgs);\n args.stopPropagation();\n }\n changeHandler(args) {\n this.setProperties({ value: this.respectiveElement.value }, true);\n this.raiseChangeEvent(args, true);\n args.stopPropagation();\n }\n raiseChangeEvent(event, interaction) {\n const eventArgs = {\n event: event,\n value: this.value,\n previousValue: this.previousValue,\n container: this.textboxWrapper.container,\n isInteraction: interaction ? interaction : false,\n isInteracted: interaction ? interaction : false\n };\n this.preventChange = false;\n this.trigger('change', eventArgs);\n this.previousValue = this.value;\n }\n bindClearEvent() {\n if (this.showClearButton && this.respectiveElement.tagName !== 'TEXTAREA') {\n if (this.enabled) {\n EventHandler.add(this.textboxWrapper.clearButton, 'mousedown touchstart', this.resetInputHandler, this);\n }\n else {\n EventHandler.remove(this.textboxWrapper.clearButton, 'mousedown touchstart', this.resetInputHandler);\n }\n }\n }\n resetInputHandler(event) {\n event.preventDefault();\n if (!(this.textboxWrapper.clearButton.classList.contains(HIDE_CLEAR))) {\n Input.setValue('', this.respectiveElement, this.floatLabelType, this.showClearButton);\n if (this.isHiddenInput) {\n this.element.value = this.respectiveElement.value;\n }\n this.setProperties({ value: this.respectiveElement.value }, true);\n const eventArgs = {\n event: event,\n value: this.respectiveElement.value,\n previousValue: this.inputPreviousValue,\n container: this.textboxWrapper.container\n };\n this.trigger('input', eventArgs);\n this.inputPreviousValue = this.respectiveElement.value;\n this.raiseChangeEvent(event, true);\n }\n }\n unWireEvents() {\n EventHandler.remove(this.respectiveElement, 'focus', this.focusHandler);\n EventHandler.remove(this.respectiveElement, 'blur', this.focusOutHandler);\n EventHandler.remove(this.respectiveElement, 'input', this.inputHandler);\n EventHandler.remove(this.respectiveElement, 'change', this.changeHandler);\n if (this.isForm) {\n EventHandler.remove(this.formElement, 'reset', this.resetForm);\n }\n if (!isNullOrUndefined(this.textboxWrapper.container.querySelector('.e-float-text')) && this.floatLabelType === 'Auto'\n && this.textboxWrapper.container.classList.contains('e-outline') &&\n this.textboxWrapper.container.classList.contains('e-autofill')) {\n EventHandler.remove((this.textboxWrapper.container.querySelector('.e-float-text')), 'animationstart', this.animationHandler);\n }\n }\n /**\n * Removes the component from the DOM and detaches all its related event handlers.\n * Also, it maintains the initial TextBox element from the DOM.\n *\n * @method destroy\n * @returns {void}\n */\n destroy() {\n this.unWireEvents();\n if (!(isBlazor() && this.isServerRendered)) {\n if (this.element.tagName === 'INPUT' && this.multiline) {\n detach(this.textboxWrapper.container.getElementsByTagName('textarea')[0]);\n this.respectiveElement = this.element;\n this.element.removeAttribute('type');\n }\n this.respectiveElement.value = this.respectiveElement.defaultValue;\n this.respectiveElement.classList.remove('e-input');\n this.removeAttributes(['aria-placeholder', 'aria-disabled', 'aria-readonly', 'aria-labelledby']);\n if (!isNullOrUndefined(this.textboxWrapper)) {\n this.textboxWrapper.container.insertAdjacentElement('afterend', this.respectiveElement);\n detach(this.textboxWrapper.container);\n }\n this.textboxWrapper = null;\n super.destroy();\n }\n else {\n this.textboxWrapper = null;\n }\n }\n /**\n * Adding the icons to the TextBox component.\n *\n * @param { string } position - Specify the icon placement on the TextBox. Possible values are append and prepend.\n * @param { string | string[] } icons - Icon classes which are need to add to the span element which is going to created.\n * Span element acts as icon or button element for TextBox.\n * @returns {void}\n */\n addIcon(position, icons) {\n Input.addIcon(position, icons, this.textboxWrapper.container, this.respectiveElement, this.createElement);\n }\n /* eslint-disable valid-jsdoc, jsdoc/require-returns */\n /**\n * Gets the properties to be maintained in the persisted state.\n *\n */\n getPersistData() {\n const keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n }\n /* eslint-enable valid-jsdoc, jsdoc/require-returns */\n /**\n * Adding the multiple attributes as key-value pair to the TextBox element.\n *\n * @param {string} attributes - Specifies the attributes to be add to TextBox element.\n * @returns {void}\n */\n addAttributes(attributes$$1) {\n for (const key of Object.keys(attributes$$1)) {\n if (key === 'disabled') {\n this.setProperties({ enabled: false }, true);\n Input.setEnabled(this.enabled, this.respectiveElement, this.floatLabelType, this.textboxWrapper.container);\n }\n else if (key === 'readonly') {\n this.setProperties({ readonly: true }, true);\n Input.setReadonly(this.readonly, this.respectiveElement);\n }\n else if (key === 'class') {\n this.respectiveElement.classList.add(attributes$$1[key]);\n }\n else if (key === 'placeholder') {\n this.setProperties({ placeholder: attributes$$1[key] }, true);\n Input.setPlaceholder(this.placeholder, this.respectiveElement);\n }\n else if (key === 'rows' && this.respectiveElement.tagName === 'TEXTAREA') {\n this.respectiveElement.setAttribute(key, attributes$$1[key]);\n }\n else {\n this.respectiveElement.setAttribute(key, attributes$$1[key]);\n }\n }\n }\n /**\n * Removing the multiple attributes as key-value pair to the TextBox element.\n *\n * @param { string[] } attributes - Specifies the attributes name to be removed from TextBox element.\n * @returns {void}\n */\n removeAttributes(attributes$$1) {\n for (const key of attributes$$1) {\n if (key === 'disabled') {\n this.setProperties({ enabled: true }, true);\n Input.setEnabled(this.enabled, this.respectiveElement, this.floatLabelType, this.textboxWrapper.container);\n }\n else if (key === 'readonly') {\n this.setProperties({ readonly: false }, true);\n Input.setReadonly(this.readonly, this.respectiveElement);\n }\n else if (key === 'placeholder') {\n this.setProperties({ placeholder: null }, true);\n Input.setPlaceholder(this.placeholder, this.respectiveElement);\n }\n else {\n this.respectiveElement.removeAttribute(key);\n }\n }\n }\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n focusIn() {\n if (document.activeElement !== this.respectiveElement && this.enabled) {\n this.respectiveElement.focus();\n if (this.textboxWrapper.container.classList.contains('e-input-group')\n || this.textboxWrapper.container.classList.contains('e-outline')\n || this.textboxWrapper.container.classList.contains('e-filled')) {\n addClass([this.textboxWrapper.container], [TEXTBOX_FOCUS]);\n }\n }\n }\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n focusOut() {\n if (document.activeElement === this.respectiveElement && this.enabled) {\n this.respectiveElement.blur();\n if (this.textboxWrapper.container.classList.contains('e-input-group')\n || this.textboxWrapper.container.classList.contains('e-outline')\n || this.textboxWrapper.container.classList.contains('e-filled')) {\n removeClass([this.textboxWrapper.container], [TEXTBOX_FOCUS]);\n }\n }\n }\n};\n__decorate$6([\n Property('text')\n], TextBox.prototype, \"type\", void 0);\n__decorate$6([\n Property(false)\n], TextBox.prototype, \"readonly\", void 0);\n__decorate$6([\n Property(null)\n], TextBox.prototype, \"value\", void 0);\n__decorate$6([\n Property('Never')\n], TextBox.prototype, \"floatLabelType\", void 0);\n__decorate$6([\n Property('')\n], TextBox.prototype, \"cssClass\", void 0);\n__decorate$6([\n Property(null)\n], TextBox.prototype, \"placeholder\", void 0);\n__decorate$6([\n Property('on')\n], TextBox.prototype, \"autocomplete\", void 0);\n__decorate$6([\n Property({})\n], TextBox.prototype, \"htmlAttributes\", void 0);\n__decorate$6([\n Property(false)\n], TextBox.prototype, \"multiline\", void 0);\n__decorate$6([\n Property(true)\n], TextBox.prototype, \"enabled\", void 0);\n__decorate$6([\n Property(false)\n], TextBox.prototype, \"showClearButton\", void 0);\n__decorate$6([\n Property(false)\n], TextBox.prototype, \"enablePersistence\", void 0);\n__decorate$6([\n Property(null)\n], TextBox.prototype, \"width\", void 0);\n__decorate$6([\n Event()\n], TextBox.prototype, \"created\", void 0);\n__decorate$6([\n Event()\n], TextBox.prototype, \"destroyed\", void 0);\n__decorate$6([\n Event()\n], TextBox.prototype, \"change\", void 0);\n__decorate$6([\n Event()\n], TextBox.prototype, \"blur\", void 0);\n__decorate$6([\n Event()\n], TextBox.prototype, \"focus\", void 0);\n__decorate$6([\n Event()\n], TextBox.prototype, \"input\", void 0);\nTextBox = __decorate$6([\n NotifyPropertyChanges\n], TextBox);\n\n/**\n * Uploader modules\n */\n\n/**\n * NumericTextBox all modules\n */\n\nexport { NumericTextBox, regularExpressions, createMask, applyMask, wireEvents, unwireEvents, bindClearEvent, unstrippedValue, strippedValue, maskInputMouseDownHandler, maskInputMouseUpHandler, maskInputFocusHandler, triggerFocus, maskInputBlurHandler, maskInputDropHandler, mobileRemoveFunction, setMaskValue, setElementValue, maskInput, getVal, getMaskedVal, MaskUndo, MaskedTextBox, Input, TicksData, ColorRangeData, LimitData, TooltipData, Slider, regex, ErrorOption, FormValidator, FilesProp, ButtonsProps, AsyncSettings, Uploader, ColorPicker, TextBox };\n//# sourceMappingURL=ej2-inputs.es2015.js.map\n"],"sourceRoot":"webpack:///"}