' + htmlTextbox;\n var contentElem = parseHtml(content);\n linkContent.appendChild(contentElem);\n var linkTarget = linkContent.querySelector('.e-rte-linkTarget');\n var linkUrl = linkContent.querySelector('.e-rte-linkurl');\n var linkText = linkContent.querySelector('.e-rte-linkText');\n var linkTitle = linkContent.querySelector('.e-rte-linkTitle');\n var linkOpenLabel = this.i10n.getConstant('linkOpenInNewWindow');\n this.checkBoxObj = new CheckBox({ label: linkOpenLabel, checked: true, enableRtl: this.parent.enableRtl });\n this.checkBoxObj.isStringTemplate = true;\n this.checkBoxObj.createElement = this.parent.createElement;\n this.checkBoxObj.appendTo(linkTarget);\n var selectText = (this.parent.editorMode === 'HTML') ?\n e.selection.getRange(this.parent.contentModule.getDocument()).toString() : e.text;\n var linkInsert = this.i10n.getConstant('dialogInsert');\n var linkCancel = this.i10n.getConstant('dialogCancel');\n var selection = e.selection;\n var selectObj = { selfLink: this, selection: e.selection, selectParent: e.selectParent, args: e.args };\n var dialogModel = {\n header: this.i10n.getConstant('linkHeader'),\n content: linkContent,\n cssClass: CLS_RTE_ELEMENTS,\n enableRtl: this.parent.enableRtl,\n locale: this.parent.locale,\n showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '310px', height: 'inherit',\n isModal: Browser.isDevice,\n buttons: [{\n click: this.insertlink.bind(selectObj),\n buttonModel: { content: linkInsert, cssClass: 'e-flat e-insertLink', isPrimary: true }\n },\n { click: this.cancelDialog.bind(selectObj), buttonModel: { cssClass: 'e-flat', content: linkCancel } }],\n target: (Browser.isDevice) ? document.body : this.parent.element,\n animationSettings: { effect: 'None' },\n close: function (event) {\n _this.parent.isBlur = false;\n if (event && event.event.returnValue) {\n if (_this.parent.editorMode === 'HTML') {\n selection.restore();\n }\n else {\n _this.parent.formatter.editorManager.markdownSelection.restore(_this.parent.contentModule.getEditPanel());\n }\n }\n _this.dialogObj.destroy();\n detach(_this.dialogObj.element);\n var args = _this.dialogObj;\n _this.dialogRenderObj.close(args);\n _this.dialogObj = null;\n }\n };\n // eslint-disable-next-line\n this.dialogObj = this.dialogRenderObj.render(dialogModel);\n this.dialogObj.createElement = this.parent.createElement;\n this.dialogObj.appendTo(linkDialogEle);\n linkDialogEle.style.maxHeight = 'inherit';\n if (isNullOrUndefined(this.dialogObj)) {\n return;\n }\n if (!isNullOrUndefined(inputDetails)) {\n linkUrl.value = inputDetails.url;\n linkText.value = inputDetails.text;\n linkTitle.value = inputDetails.title;\n // eslint-disable-next-line\n (inputDetails.target) ? this.checkBoxObj.checked = true : this.checkBoxObj.checked = false;\n this.dialogObj.header = inputDetails.header;\n this.dialogObj.element.querySelector('.e-insertLink').textContent = inputDetails.btnText;\n }\n this.checkUrl(false);\n if ((this.parent.editorMode === 'HTML' && isNullOrUndefined(inputDetails) && ((!isNullOrUndefined(selectText)\n && selectText !== '') && (e.selection.range.startOffset === 0) || e.selection.range.startOffset !==\n e.selection.range.endOffset)) || e.module === 'Markdown') {\n linkText.value = selectText;\n }\n EventHandler.add(this.parent.element.ownerDocument, 'mousedown', this.onDocumentClick, this);\n if (this.quickToolObj) {\n this.hideLinkQuickToolbar();\n if (this.quickToolObj.inlineQTBar && document.body.contains(this.quickToolObj.inlineQTBar.element)) {\n this.quickToolObj.inlineQTBar.hidePopup();\n }\n }\n };\n // eslint-disable-next-line\n Link.prototype.insertlink = function (e) {\n var linkEle = this.selfLink.dialogObj.element;\n var linkUrl = linkEle.querySelector('.e-rte-linkurl').value;\n var linkText = linkEle.querySelector('.e-rte-linkText').value;\n var linkTitle;\n if (this.selfLink.parent.editorMode === 'HTML') {\n linkTitle = linkEle.querySelector('.e-rte-linkTitle').value;\n }\n var target = (this.selfLink.checkBoxObj.checked) ? '_blank' : null;\n if (linkUrl === '') {\n this.selfLink.checkUrl(true);\n return;\n }\n if (!this.selfLink.isUrl(linkUrl)) {\n linkText = (linkText === '') ? linkUrl : linkText;\n if (!this.selfLink.parent.enableAutoUrl) {\n linkUrl = linkUrl.indexOf('http') > -1 ? linkUrl : 'http://' + linkUrl;\n }\n else {\n // eslint-disable-next-line\n linkUrl = linkUrl;\n }\n }\n else {\n this.selfLink.checkUrl(false);\n }\n var proxy = this.selfLink;\n if (proxy.parent.editorMode === 'HTML' && isNullOrUndefined(closest(this.selection.range.startContainer.parentNode, '[id='\n // eslint-disable-next-line\n + \"'\" + proxy.parent.contentModule.getPanel().id + \"'\" + ']'))) {\n proxy.parent.contentModule.getEditPanel().focus();\n if (Browser.isIE && proxy.parent.iframeSettings.enable) {\n this.selection.restore();\n }\n var range = proxy.parent.formatter.editorManager.nodeSelection.getRange(proxy.parent.contentModule.getDocument());\n this.selection = proxy.parent.formatter.editorManager.nodeSelection.save(range, proxy.parent.contentModule.getDocument());\n this.selectParent = proxy.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);\n }\n var value = {\n url: linkUrl, text: linkText, title: linkTitle, target: target,\n selection: this.selection, selectParent: this.selectParent\n };\n if (document.body.contains(proxy.dialogObj.element)) {\n this.selfLink.dialogObj.hide({ returnValue: false });\n }\n if (isIDevice() && proxy.parent.iframeSettings.enable) {\n select('iframe', proxy.parent.element).contentWindow.focus();\n }\n if (proxy.parent.editorMode === 'HTML') {\n this.selection.restore();\n }\n if (proxy.parent.formatter.getUndoRedoStack().length === 0) {\n proxy.parent.formatter.saveData();\n }\n var argsValue;\n if (!isNullOrUndefined(this.args) &&\n this.args.code === 'KeyK') {\n var originalEvent = this.args;\n extend(this.args, { item: { command: 'Links', subCommand: 'CreateLink' }, originalEvent: originalEvent }, true);\n var argsVal = {\n item: { command: 'Links', subCommand: 'CreateLink' }, originalEvent: originalEvent\n };\n argsValue = argsVal;\n }\n else {\n argsValue = this.args;\n }\n this.selfLink.parent.formatter.process(this.selfLink.parent, argsValue, (!isNullOrUndefined(this.args) &&\n this.args.originalEvent), value);\n this.selfLink.parent.contentModule.getEditPanel().focus();\n };\n Link.prototype.isUrl = function (url) {\n // eslint-disable-next-line\n var regexp = /(ftp|http|https):\\/\\/(\\w+:{0,1}\\w*@)?(\\S+)(:[0-9]+)?(\\/|\\/([\\w#!:.?+=&%@!\\-\\/]))?/gi;\n return regexp.test(url);\n };\n Link.prototype.checkUrl = function (e) {\n var linkEle = this.dialogObj.element;\n var linkUrl = linkEle.querySelector('.e-rte-linkurl');\n if (e) {\n addClass([linkUrl], 'e-error');\n linkUrl.setSelectionRange(0, linkUrl.value.length);\n linkUrl.focus();\n }\n else {\n removeClass([linkUrl], 'e-error');\n }\n };\n Link.prototype.removeLink = function (e) {\n if (this.parent.formatter.getUndoRedoStack().length === 0) {\n this.parent.formatter.saveData();\n }\n this.parent.formatter.process(this.parent, e.args, e.args, {\n selectNode: e.selectNode, selectParent: e.selectParent, selection: e.selection,\n subCommand: e.args.item.subCommand\n });\n if (isIDevice() && this.parent.iframeSettings.enable) {\n select('iframe', this.parent.element).contentWindow.focus();\n }\n else {\n this.parent.contentModule.getEditPanel().focus();\n }\n this.hideLinkQuickToolbar();\n };\n Link.prototype.openLink = function (e) {\n var selectParentEle = this.getAnchorNode(e.selectParent[0]);\n if (selectParentEle.classList.contains('e-rte-anchor') || selectParentEle.tagName === 'A') {\n this.parent.formatter.process(this.parent, e.args, e.args, {\n url: selectParentEle.href,\n target: selectParentEle.target === '' ? '_self' : '_blank', selectNode: e.selectNode,\n subCommand: e.args.item.subCommand\n });\n }\n };\n Link.prototype.getAnchorNode = function (element) {\n var selectParent = closest(element, 'a');\n return (selectParent ? selectParent : element);\n };\n Link.prototype.editLink = function (e) {\n var selectedNode = this.getAnchorNode(e.selectNode[0]);\n var selectParentEle = this.getAnchorNode(e.selectParent[0]);\n selectParentEle = selectedNode.nodeName === 'A' ? selectedNode : selectParentEle;\n if (selectParentEle.classList.contains('e-rte-anchor') || selectParentEle.tagName === 'A') {\n var linkUpdate = this.i10n.getConstant('dialogUpdate');\n var inputDetails = {\n url: selectParentEle.getAttribute('href'), text: selectParentEle.innerText,\n title: selectParentEle.title, target: selectParentEle.target,\n header: this.i10n.getConstant('editLink'), btnText: linkUpdate\n };\n this.linkDialog(e, inputDetails);\n }\n };\n // eslint-disable-next-line\n Link.prototype.cancelDialog = function (e) {\n this.selfLink.parent.isBlur = false;\n this.selfLink.dialogObj.hide({ returnValue: true });\n if (isIDevice()) {\n this.selection.restore();\n }\n else {\n this.selfLink.parent.contentModule.getEditPanel().focus();\n }\n };\n Link.prototype.onDocumentClick = function (e) {\n var target = e.target;\n if (!isNullOrUndefined(this.dialogObj) && ((\n // eslint-disable-next-line\n !closest(target, '[id=' + \"'\" + this.dialogObj.element.id + \"'\" + ']') && this.parent.toolbarSettings.enable &&\n this.parent.getToolbarElement() && !this.parent.getToolbarElement().contains(e.target)) ||\n (((this.parent.getToolbarElement() && this.parent.getToolbarElement().contains(e.target)) ||\n this.parent.inlineMode.enable && !closest(target, '#' + this.dialogObj.element.id)) &&\n !closest(target, '#' + this.parent.getID() + '_toolbar_CreateLink') &&\n !target.querySelector('#' + this.parent.getID() + '_toolbar_CreateLink')))) {\n this.dialogObj.hide({ returnValue: true });\n EventHandler.remove(this.parent.element.ownerDocument, 'mousedown', this.onDocumentClick);\n this.parent.isBlur = true;\n dispatchEvent(this.parent.element, 'focusout');\n }\n };\n /**\n * Destroys the ToolBar.\n *\n * @function destroy\n * @returns {void}\n * @hidden\n\n */\n Link.prototype.destroy = function () {\n this.removeEventListener();\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {void}\n */\n Link.prototype.getModuleName = function () {\n return 'link';\n };\n return Link;\n}());\nexport { Link };\n","import { RenderType } from '../base/enum';\nimport * as events from '../base/constant';\n/**\n * Content module is used to render Rich Text Editor content\n *\n * @hidden\n\n */\nvar Render = /** @class */ (function () {\n /**\n * Constructor for render module\n *\n * @param {IRichTextEditor} parent - specifies the parent\n * @param {ServiceLocator} locator - specifies the locator.\n * @returns {void}\n */\n function Render(parent, locator) {\n this.parent = parent;\n this.locator = locator;\n this.renderer = this.locator.getService('rendererFactory');\n this.addEventListener();\n }\n /**\n * To initialize Rich Text Editor header, content and footer rendering\n *\n * @returns {void}\n * @hidden\n\n */\n Render.prototype.render = function () {\n // eslint-disable-next-line\n var rteObj = this.parent;\n this.contentRenderer = this.renderer.getRenderer(RenderType.Content);\n this.contentRenderer.renderPanel();\n };\n /**\n * Refresh the entire RichTextEditor.\n *\n * @param {NotifyArgs} e - specifies the arguments.\n * @returns {void}\n */\n Render.prototype.refresh = function (e) {\n if (e === void 0) { e = { requestType: 'refresh' }; }\n this.parent.notify(e.requestType + \"-begin\", e);\n };\n /**\n * Destroy the entire RichTextEditor.\n *\n * @returns {void}\n */\n Render.prototype.destroy = function () {\n this.removeEventListener();\n };\n Render.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.modelChanged, this.refresh, this);\n this.parent.on(events.keyUp, this.keyUp, this);\n };\n Render.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.modelChanged, this.refresh);\n this.parent.off(events.keyUp, this.keyUp);\n };\n Render.prototype.keyUp = function (e) {\n if (this.parent.editorMode === 'HTML') {\n switch (e.args.which) {\n case 46:\n case 8:\n // eslint-disable-next-line\n var childNodes = this.parent.contentModule.getEditPanel().childNodes;\n if ((childNodes.length === 0) ||\n (childNodes.length === 1 && childNodes[0].childNodes.length === 0 && ((childNodes[0].tagName === 'BR') ||\n ((childNodes[0].tagName === 'P' || childNodes[0].tagName === 'DIV') && childNodes[0].textContent === '')))) {\n var node = this.parent.contentModule.getEditPanel();\n if (this.parent.enterKey === 'DIV') {\n node.innerHTML = '
';\n }\n else if (this.parent.enterKey === 'BR') {\n node.innerHTML = '
';\n }\n else {\n node.innerHTML = '
';\n }\n this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), node.childNodes[0], 0);\n }\n break;\n }\n }\n };\n return Render;\n}());\nexport { Render };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, NotifyPropertyChanges, Event } from '@syncfusion/ej2-base';\nimport { Base } from '@syncfusion/ej2-base';\nvar keyCode = {\n 'backspace': 8,\n 'tab': 9,\n 'enter': 13,\n 'shift': 16,\n 'control': 17,\n 'alt': 18,\n 'pause': 19,\n 'capslock': 20,\n 'space': 32,\n 'escape': 27,\n 'pageup': 33,\n 'pagedown': 34,\n 'end': 35,\n 'home': 36,\n 'leftarrow': 37,\n 'uparrow': 38,\n 'rightarrow': 39,\n 'downarrow': 40,\n 'insert': 45,\n 'delete': 46,\n 'f1': 112,\n 'f2': 113,\n 'f3': 114,\n 'f4': 115,\n 'f5': 116,\n 'f6': 117,\n 'f7': 118,\n 'f8': 119,\n 'f9': 120,\n 'f10': 121,\n 'f11': 122,\n 'f12': 123,\n 'semicolon': 186,\n 'plus': 187,\n 'comma': 188,\n 'minus': 189,\n 'dot': 190,\n 'forwardslash': 191,\n 'graveaccent': 192,\n 'openbracket': 219,\n 'backslash': 220,\n 'closebracket': 221,\n 'singlequote': 222,\n ']': 221,\n '[': 219,\n '=': 187\n};\n/**\n * KeyboardEvents class enables you to bind key action desired key combinations for ex., Ctrl+A, Delete, Alt+Space etc.\n * ```html\n *
;\n * \n * ```\n *\n * @hidden\n\n */\nvar KeyboardEvents = /** @class */ (function (_super) {\n __extends(KeyboardEvents, _super);\n /**\n * Initializes the KeyboardEvents\n *\n * @param {HTMLElement} element - specifies the elements.\n * @param {KeyboardEventsModel} options - specify the options\n */\n function KeyboardEvents(element, options) {\n var _this = _super.call(this, options, element) || this;\n /**\n * To handle a key press event returns null\n *\n * @param {KeyboardEventArgs} e - specifies the event arguments.\n * @returns {void}\n */\n _this.keyPressHandler = function (e) {\n /* eslint-disable */\n var isAltKey = e.altKey;\n var isCtrlKey = e.ctrlKey;\n var isShiftKey = e.shiftKey;\n var isMetaKey = e.metaKey;\n /* eslint-enable */\n var curkeyCode = e.which;\n var keys = Object.keys(_this.keyConfigs);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n var configCollection = _this.keyConfigs[key].split(',');\n for (var _a = 0, configCollection_1 = configCollection; _a < configCollection_1.length; _a++) {\n var rconfig = configCollection_1[_a];\n var rKeyObj = KeyboardEvents_1.getKeyConfigData(rconfig.trim());\n if (isAltKey === rKeyObj.altKey && (isCtrlKey === rKeyObj.ctrlKey || isMetaKey) &&\n isShiftKey === rKeyObj.shiftKey && curkeyCode === rKeyObj.keyCode) {\n e.action = key;\n }\n }\n }\n if (_this.keyAction) {\n _this.keyAction(e);\n }\n };\n _this.bind();\n return _this;\n }\n KeyboardEvents_1 = KeyboardEvents;\n /**\n * Unwire bound events and destroy the instance.\n *\n * @returns {void}\n */\n KeyboardEvents.prototype.destroy = function () {\n this.unwireEvents();\n _super.prototype.destroy.call(this);\n };\n /**\n * Function can be used to specify certain action if a property is changed\n *\n * @param {KeyboardEventsModel} newProp - specifies the keyboard event.\n * @param {KeyboardEventsModel} oldProp - specifies the old property.\n * @returns {void}\n * @private\n */\n // eslint-disable-next-line\n KeyboardEvents.prototype.onPropertyChanged = function (newProp, oldProp) {\n // No code are needed\n };\n KeyboardEvents.prototype.bind = function () {\n this.wireEvents();\n };\n /**\n * To get the module name, returns 'keyboard'.\n *\n * @returns {void}\n */\n KeyboardEvents.prototype.getModuleName = function () {\n return 'keyboard';\n };\n /**\n * Wiring event handlers to events\n *\n * @returns {void}\n */\n KeyboardEvents.prototype.wireEvents = function () {\n this.element.addEventListener(this.eventName, this.keyPressHandler);\n };\n /**\n * Unwiring event handlers to events\n *\n * @returns {void}\n */\n KeyboardEvents.prototype.unwireEvents = function () {\n this.element.removeEventListener(this.eventName, this.keyPressHandler);\n };\n /**\n * To get the key configuration data\n *\n * @param {string} config - configuration data\n * @returns {KeyData} - specifies the key data\n */\n KeyboardEvents.getKeyConfigData = function (config) {\n if (config in this.configCache) {\n return this.configCache[config];\n }\n var keys = config.toLowerCase().split('+');\n var keyData = {\n altKey: (keys.indexOf('alt') !== -1 ? true : false),\n ctrlKey: (keys.indexOf('ctrl') !== -1 ? true : false),\n shiftKey: (keys.indexOf('shift') !== -1 ? true : false),\n keyCode: null\n };\n if (keys[keys.length - 1].length > 1 && !!Number(keys[keys.length - 1])) {\n keyData.keyCode = Number(keys[keys.length - 1]);\n }\n else {\n keyData.keyCode = KeyboardEvents_1.getKeyCode(keys[keys.length - 1]);\n }\n KeyboardEvents_1.configCache[config] = keyData;\n return keyData;\n };\n // Return the keycode value as string\n KeyboardEvents.getKeyCode = function (keyVal) {\n return keyCode[keyVal] || keyVal.toUpperCase().charCodeAt(0);\n };\n var KeyboardEvents_1;\n KeyboardEvents.configCache = {};\n __decorate([\n Property({})\n ], KeyboardEvents.prototype, \"keyConfigs\", void 0);\n __decorate([\n Property('keyup')\n ], KeyboardEvents.prototype, \"eventName\", void 0);\n __decorate([\n Event()\n ], KeyboardEvents.prototype, \"keyAction\", void 0);\n KeyboardEvents = KeyboardEvents_1 = __decorate([\n NotifyPropertyChanges\n ], KeyboardEvents);\n return KeyboardEvents;\n}(Base));\nexport { KeyboardEvents };\n","import { removeClass, selectAll, isNullOrUndefined, EventHandler } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\nimport { CLS_EXPAND_OPEN, CLS_TB_ITEM, CLS_ACTIVE } from '../base/classes';\nimport * as CONSTANT from '../../common/constant';\nimport { RenderType } from '../base/enum';\nimport { KeyboardEvents } from '../actions/keyboard';\n/**\n * Content module is used to render Rich Text Editor content\n *\n * @hidden\n\n */\nvar ViewSource = /** @class */ (function () {\n /**\n * Constructor for view source module\n *\n * @param {IRichTextEditor} parent - specifies the parent element.\n * @param {ServiceLocator} locator - specifies the locator.\n * @returns {void}\n */\n function ViewSource(parent, locator) {\n this.parent = parent;\n var serviceLocator = locator;\n this.rendererFactory = serviceLocator.getService('rendererFactory');\n this.addEventListener();\n }\n ViewSource.prototype.addEventListener = function () {\n this.parent.on(events.sourceCode, this.sourceCode, this);\n this.parent.on(events.initialEnd, this.onInitialEnd, this);\n this.parent.on(events.updateSource, this.updateSourceCode, this);\n this.parent.on(events.destroy, this.destroy, this);\n };\n ViewSource.prototype.onInitialEnd = function () {\n this.parent.formatter.editorManager.observer.on(CONSTANT.KEY_DOWN_HANDLER, this.onKeyDown, this);\n };\n ViewSource.prototype.removeEventListener = function () {\n this.unWireEvent();\n this.parent.off(events.sourceCode, this.sourceCode);\n this.parent.off(events.updateSource, this.updateSourceCode);\n this.parent.off(events.initialEnd, this.onInitialEnd);\n this.parent.off(events.destroy, this.destroy);\n this.parent.formatter.editorManager.observer.off(CONSTANT.KEY_DOWN_HANDLER, this.onKeyDown);\n };\n ViewSource.prototype.getSourceCode = function () {\n return this.parent.createElement('textarea', { className: 'e-rte-srctextarea' });\n };\n ViewSource.prototype.wireEvent = function (element) {\n this.keyboardModule = new KeyboardEvents(element, {\n keyAction: this.previewKeyDown.bind(this), keyConfigs: this.parent.formatter.keyConfig, eventName: 'keydown'\n });\n EventHandler.add(this.previewElement, 'mousedown', this.mouseDownHandler, this);\n };\n ViewSource.prototype.unWireEvent = function () {\n if (this.keyboardModule) {\n this.keyboardModule.destroy();\n }\n if (this.previewElement) {\n EventHandler.remove(this.previewElement, 'mousedown', this.mouseDownHandler);\n }\n };\n ViewSource.prototype.wireBaseKeyDown = function () {\n this.parent.keyboardModule = new KeyboardEvents(this.contentModule.getEditPanel(), {\n keyAction: this.parent.keyDown.bind(this.parent), keyConfigs: this.parent.formatter.keyConfig, eventName: 'keydown'\n });\n };\n ViewSource.prototype.unWireBaseKeyDown = function () {\n this.parent.keyboardModule.destroy();\n };\n ViewSource.prototype.mouseDownHandler = function (e) {\n this.parent.notify(events.sourceCodeMouseDown, { args: e });\n };\n ViewSource.prototype.previewKeyDown = function (event) {\n switch (event.action) {\n case 'html-source':\n this.updateSourceCode(event);\n event.preventDefault();\n break;\n case 'toolbar-focus':\n if (this.parent.toolbarSettings.enable) {\n var selector = '.e-toolbar-item[aria-disabled=\"false\"][title] [tabindex]';\n this.parent.toolbarModule.baseToolbar.toolbarObj.element.querySelector(selector).focus();\n }\n break;\n }\n };\n ViewSource.prototype.onKeyDown = function (e) {\n switch (e.event.action) {\n case 'html-source':\n e.event.preventDefault();\n this.sourceCode(e);\n e.callBack({\n requestType: 'SourceCode',\n editorMode: 'HTML',\n event: e.event\n });\n break;\n }\n };\n /**\n * sourceCode method\n *\n * @param {ClickEventArgs} args - specifies the click event.\n * @returns {void}\n * @hidden\n\n */\n ViewSource.prototype.sourceCode = function (args) {\n this.parent.isBlur = false;\n this.parent.trigger(events.actionBegin, { requestType: 'SourceCode', targetItem: 'SourceCode', args: args });\n var tbItems = selectAll('.' + CLS_TB_ITEM, this.parent.element);\n this.contentModule = this.rendererFactory.getRenderer(RenderType.Content);\n this.parent.notify(events.updateToolbarItem, {\n targetItem: 'SourceCode', updateItem: 'Preview',\n baseToolbar: this.parent.getBaseToolbarObject()\n });\n if (isNullOrUndefined(this.previewElement)) {\n this.previewElement = this.getSourceCode();\n }\n this.parent.updateValueData();\n if (this.parent.iframeSettings.enable) {\n var rteContent = void 0;\n if (isNullOrUndefined(this.parent.element.querySelector('#' + this.parent.element.id + '_source-view'))) {\n rteContent = this.parent.createElement('div', {\n className: 'e-source-content', id: this.parent.element.id + '_source-view'\n });\n }\n else {\n rteContent = this.parent.element.querySelector('#' + this.parent.element.id + '_source-view');\n }\n rteContent.appendChild(this.previewElement);\n this.parent.element.appendChild(rteContent);\n rteContent.style.height = this.contentModule.getPanel().style.height;\n rteContent.style.marginTop = this.contentModule.getPanel().style.marginTop;\n this.getPanel().value = this.getTextAreaValue();\n this.contentModule.getPanel().style.display = 'none';\n rteContent.style.display = 'block';\n this.getPanel().style.display = 'block';\n }\n else {\n this.contentModule.getPanel().appendChild(this.previewElement);\n this.getPanel().value = this.getTextAreaValue();\n this.contentModule.getEditPanel().style.display = 'none';\n this.previewElement.style.display = 'block';\n }\n this.parent.isBlur = false;\n this.parent.disableToolbarItem(this.parent.toolbarSettings.items);\n this.parent.enableToolbarItem('SourceCode');\n if (this.parent.getToolbar()) {\n removeClass([this.parent.getToolbar()], [CLS_EXPAND_OPEN]);\n }\n removeClass(tbItems, [CLS_ACTIVE]);\n this.parent.setContentHeight('sourceCode', true);\n this.wireEvent(this.previewElement);\n this.unWireBaseKeyDown();\n this.previewElement.focus();\n this.parent.updateValue();\n if (!isNullOrUndefined(this.parent.placeholder) && !this.parent.iframeSettings.enable) {\n var placeHolderWrapper = this.parent.element.querySelector('.rte-placeholder.e-rte-placeholder');\n placeHolderWrapper.style.display = 'none';\n }\n this.parent.trigger(events.actionComplete, { requestType: 'SourceCode', targetItem: 'SourceCode', args: args });\n this.parent.invokeChangeEvent();\n };\n /**\n * updateSourceCode method\n *\n * @param {ClickEventArgs} args - specifies the click event.\n * @returns {void}\n * @hidden\n\n */\n ViewSource.prototype.updateSourceCode = function (args) {\n this.parent.isBlur = false;\n this.parent.trigger(events.actionBegin, { requestType: 'Preview', targetItem: 'Preview', args: args });\n var editHTML = this.getPanel();\n this.parent.notify(events.updateToolbarItem, {\n targetItem: 'Preview', updateItem: 'SourceCode',\n baseToolbar: this.parent.getBaseToolbarObject()\n });\n var serializeValue = this.parent.serializeValue(editHTML.value);\n var value;\n if (serializeValue === null || serializeValue === '') {\n if (this.parent.enterKey === 'DIV') {\n value = '
';\n }\n else if (this.parent.enterKey === 'BR') {\n value = '
';\n }\n else {\n value = '
';\n }\n }\n else {\n value = serializeValue;\n }\n if (this.parent.iframeSettings.enable) {\n editHTML.parentElement.style.display = 'none';\n editHTML.style.display = 'none';\n this.contentModule.getPanel().style.display = 'block';\n this.contentModule.getEditPanel().innerHTML = value;\n }\n else {\n editHTML.style.display = 'none';\n this.contentModule.getEditPanel().style.display = 'block';\n this.contentModule.getEditPanel().innerHTML = value;\n }\n this.parent.isBlur = false;\n this.parent.enableToolbarItem(this.parent.toolbarSettings.items);\n if (this.parent.getToolbar()) {\n removeClass([this.parent.getToolbar()], [CLS_EXPAND_OPEN]);\n }\n this.parent.setContentHeight('preview', true);\n this.unWireEvent();\n this.wireBaseKeyDown();\n this.contentModule.getEditPanel().focus();\n this.parent.updateValue();\n if (!isNullOrUndefined(this.parent.placeholder) && this.contentModule.getEditPanel().innerText.length === 0) {\n var placeHolderWrapper = this.parent.element.querySelector('.rte-placeholder.e-rte-placeholder');\n placeHolderWrapper.style.display = 'block';\n }\n this.parent.trigger(events.actionComplete, { requestType: 'Preview', targetItem: 'Preview', args: args });\n this.parent.formatter.enableUndo(this.parent);\n this.parent.invokeChangeEvent();\n };\n ViewSource.prototype.getTextAreaValue = function () {\n return (this.contentModule.getEditPanel().innerHTML === '
') ||\n (this.contentModule.getEditPanel().innerHTML === '
') ||\n (this.contentModule.getEditPanel().innerHTML === '
') ||\n (this.contentModule.getEditPanel().childNodes.length === 1 &&\n (this.contentModule.getEditPanel().childNodes[0].tagName === 'P' &&\n this.contentModule.getEditPanel().innerHTML.length === 7) ||\n (this.contentModule.getEditPanel().childNodes[0].tagName === 'DIV' &&\n this.contentModule.getEditPanel().innerHTML.length === 11)) ? '' : this.parent.value;\n };\n /**\n * getPanel method\n *\n * @returns {void}\n * @hidden\n\n */\n ViewSource.prototype.getPanel = function () {\n return this.parent.element && this.parent.element.querySelector('.e-rte-srctextarea');\n };\n /**\n * getViewPanel method\n *\n * @returns {void}\n * @hidden\n\n */\n ViewSource.prototype.getViewPanel = function () {\n return (this.parent.iframeSettings.enable && this.getPanel()) ? this.getPanel().parentElement : this.getPanel();\n };\n /**\n * Destroy the entire RichTextEditor.\n *\n * @returns {void}\n * @hidden\n\n */\n ViewSource.prototype.destroy = function () {\n this.removeEventListener();\n };\n return ViewSource;\n}());\nexport { ViewSource };\n","/**\n * @hidden\n\n */\nexport var executeGroup = {\n 'bold': {\n command: 'Style',\n subCommand: 'Bold',\n value: 'strong'\n },\n 'italic': {\n command: 'Style',\n subCommand: 'Italic',\n value: 'em'\n },\n 'underline': {\n command: 'Style',\n subCommand: 'Underline',\n value: 'span'\n },\n 'strikeThrough': {\n command: 'Style',\n subCommand: 'StrikeThrough',\n value: 'span'\n },\n 'insertCode': {\n command: 'Formats',\n subCommand: 'Pre',\n value: 'pre'\n },\n 'superscript': {\n command: 'Effects',\n subCommand: 'SuperScript',\n value: 'sup'\n },\n 'subscript': {\n command: 'Effects',\n subCommand: 'SubScript',\n value: 'sub'\n },\n 'uppercase': {\n command: 'Casing',\n subCommand: 'UpperCase'\n },\n 'lowercase': {\n command: 'Casing',\n subCommand: 'LowerCase'\n },\n 'fontColor': {\n command: 'font',\n subCommand: 'fontcolor',\n value: '#ff0000'\n },\n 'fontName': {\n command: 'font',\n subCommand: 'fontname',\n value: 'Segoe UI'\n },\n 'fontSize': {\n command: 'font',\n subCommand: 'fontsize',\n value: '10pt'\n },\n 'backColor': {\n command: 'font',\n subCommand: 'backgroundcolor',\n value: '#ffff00'\n },\n 'justifyCenter': {\n command: 'Alignments',\n subCommand: 'JustifyCenter'\n },\n 'justifyFull': {\n command: 'Alignments',\n subCommand: 'JustifyFull'\n },\n 'justifyLeft': {\n command: 'Alignments',\n subCommand: 'JustifyLeft'\n },\n 'justifyRight': {\n command: 'Alignments',\n subCommand: 'JustifyRight'\n },\n 'undo': {\n command: 'Actions',\n subCommand: 'Undo'\n },\n 'redo': {\n command: 'Actions',\n subCommand: 'Redo'\n },\n 'createLink': {\n command: 'Links',\n subCommand: 'createLink'\n },\n 'editLink': {\n command: 'Links',\n subCommand: 'createLink'\n },\n 'createImage': {\n command: 'Images',\n subCommand: 'Images'\n },\n 'formatBlock': {\n command: 'Formats',\n value: 'P'\n },\n 'heading': {\n command: 'Formats',\n value: 'H1'\n },\n 'indent': {\n command: 'Indents',\n subCommand: 'Indent'\n },\n 'outdent': {\n command: 'Indents',\n subCommand: 'Outdent'\n },\n 'insertHTML': {\n command: 'InsertHTML',\n subCommand: 'InsertHTML',\n value: ''\n },\n 'insertText': {\n command: 'InsertText',\n subCommand: 'InsertText',\n value: ''\n },\n 'insertHorizontalRule': {\n command: 'InsertHTML',\n subCommand: 'InsertHTML',\n value: '
'\n },\n 'insertImage': {\n command: 'Images',\n subCommand: 'Image'\n },\n 'editImage': {\n command: 'Images',\n subCommand: 'Image'\n },\n 'insertTable': {\n command: 'Table',\n subCommand: 'CreateTable'\n },\n 'insertBrOnReturn': {\n command: 'InsertHTML',\n subCommand: 'InsertHTML',\n value: '
'\n },\n 'insertOrderedList': {\n command: 'Lists',\n value: 'OL'\n },\n 'insertUnorderedList': {\n command: 'Lists',\n value: 'UL'\n },\n 'insertParagraph': {\n command: 'Formats',\n value: 'P'\n },\n 'removeFormat': {\n command: 'Clear',\n subCommand: 'ClearFormat'\n }\n};\n","import * as events from '../base/constant';\n/**\n * `ExecCommandCallBack` module is used to run the editor manager command\n */\nvar ExecCommandCallBack = /** @class */ (function () {\n function ExecCommandCallBack(parent) {\n this.parent = parent;\n this.addEventListener();\n }\n ExecCommandCallBack.prototype.addEventListener = function () {\n this.parent.on(events.execCommandCallBack, this.commandCallBack, this);\n this.parent.on(events.destroy, this.removeEventListener, this);\n };\n ExecCommandCallBack.prototype.commandCallBack = function (args) {\n if (args.requestType !== 'Undo' && args.requestType !== 'Redo') {\n this.parent.formatter.saveData();\n }\n this.parent.notify(events.toolbarRefresh, { args: args });\n this.parent.notify(events.count, {});\n };\n ExecCommandCallBack.prototype.removeEventListener = function () {\n this.parent.off(events.execCommandCallBack, this.commandCallBack);\n this.parent.off(events.destroy, this.removeEventListener);\n };\n return ExecCommandCallBack;\n}());\nexport { ExecCommandCallBack };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * Specifies the Ajax settings of the File Manager.\n */\nvar AjaxSettings = /** @class */ (function (_super) {\n __extends(AjaxSettings, _super);\n function AjaxSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], AjaxSettings.prototype, \"downloadUrl\", void 0);\n __decorate([\n Property(null)\n ], AjaxSettings.prototype, \"getImageUrl\", void 0);\n __decorate([\n Property(null)\n ], AjaxSettings.prototype, \"uploadUrl\", void 0);\n __decorate([\n Property(null)\n ], AjaxSettings.prototype, \"url\", void 0);\n return AjaxSettings;\n}(ChildProperty));\nexport { AjaxSettings };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\nexport var fileItems = ['Open', '|', 'Cut', 'Copy', '|', 'Delete', 'Download', 'Rename', '|', 'Details'];\nexport var folderItems = ['Open', '|', 'Cut', 'Copy', 'Paste', '|', 'Delete', 'Rename', 'Download', '|', 'Details'];\nexport var layoutItems = [\n 'SortBy', 'View', 'Refresh', '|', 'Paste', '|', 'NewFolder', 'Upload', '|', 'Details', '|', 'SelectAll'\n];\n/**\n * Specifies the ContextMenu settings of the File Manager.\n */\nvar ContextMenuSettings = /** @class */ (function (_super) {\n __extends(ContextMenuSettings, _super);\n function ContextMenuSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(fileItems)\n ], ContextMenuSettings.prototype, \"file\", void 0);\n __decorate([\n Property(folderItems)\n ], ContextMenuSettings.prototype, \"folder\", void 0);\n __decorate([\n Property(layoutItems)\n ], ContextMenuSettings.prototype, \"layout\", void 0);\n __decorate([\n Property(true)\n ], ContextMenuSettings.prototype, \"visible\", void 0);\n return ContextMenuSettings;\n}(ChildProperty));\nexport { ContextMenuSettings };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * Specifies the columns in the details view of the file manager.\n */\nexport var columnArray = [\n {\n field: 'name', headerText: 'Name', minWidth: 120,\n template: '
${name}', customAttributes: { class: 'e-fe-grid-name' }\n },\n {\n field: '_fm_modified', headerText: 'DateModified', type: 'dateTime',\n format: 'MMMM dd, yyyy HH:mm', minWidth: 120, width: '190'\n },\n {\n field: 'size', headerText: 'Size', minWidth: 90, width: '110', template: '
${size}'\n }\n];\n/**\n * Specifies the grid settings of the File Manager.\n */\nvar DetailsViewSettings = /** @class */ (function (_super) {\n __extends(DetailsViewSettings, _super);\n function DetailsViewSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(true)\n ], DetailsViewSettings.prototype, \"columnResizing\", void 0);\n __decorate([\n Property(columnArray)\n ], DetailsViewSettings.prototype, \"columns\", void 0);\n return DetailsViewSettings;\n}(ChildProperty));\nexport { DetailsViewSettings };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * Specifies the navigationpane settings of the File Manager.\n */\nvar NavigationPaneSettings = /** @class */ (function (_super) {\n __extends(NavigationPaneSettings, _super);\n function NavigationPaneSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('650px')\n ], NavigationPaneSettings.prototype, \"maxWidth\", void 0);\n __decorate([\n Property('240px')\n ], NavigationPaneSettings.prototype, \"minWidth\", void 0);\n __decorate([\n Property(true)\n ], NavigationPaneSettings.prototype, \"visible\", void 0);\n __decorate([\n Property('None')\n ], NavigationPaneSettings.prototype, \"sortOrder\", void 0);\n return NavigationPaneSettings;\n}(ChildProperty));\nexport { NavigationPaneSettings };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * Specifies the Search settings of the File Manager.\n */\nvar SearchSettings = /** @class */ (function (_super) {\n __extends(SearchSettings, _super);\n function SearchSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(true)\n ], SearchSettings.prototype, \"allowSearchOnTyping\", void 0);\n __decorate([\n Property('contains')\n ], SearchSettings.prototype, \"filterType\", void 0);\n __decorate([\n Property(true)\n ], SearchSettings.prototype, \"ignoreCase\", void 0);\n __decorate([\n Property(null)\n ], SearchSettings.prototype, \"placeholder\", void 0);\n return SearchSettings;\n}(ChildProperty));\nexport { SearchSettings };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\nexport var toolbarItems = ['NewFolder', 'Upload', 'Cut', 'Copy', 'Paste', 'Delete', 'Download', 'Rename',\n 'SortBy', 'Refresh', 'Selection', 'View', 'Details'];\n/**\n * Specifies the Toolbar settings of the FileManager.\n */\nvar ToolbarSettings = /** @class */ (function (_super) {\n __extends(ToolbarSettings, _super);\n function ToolbarSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(toolbarItems)\n ], ToolbarSettings.prototype, \"items\", void 0);\n __decorate([\n Property(true)\n ], ToolbarSettings.prototype, \"visible\", void 0);\n return ToolbarSettings;\n}(ChildProperty));\nexport { ToolbarSettings };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * Specifies the Ajax settings of the File Manager.\n */\nvar UploadSettings = /** @class */ (function (_super) {\n __extends(UploadSettings, _super);\n function UploadSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], UploadSettings.prototype, \"allowedExtensions\", void 0);\n __decorate([\n Property(true)\n ], UploadSettings.prototype, \"autoUpload\", void 0);\n __decorate([\n Property(false)\n ], UploadSettings.prototype, \"autoClose\", void 0);\n __decorate([\n Property(0)\n ], UploadSettings.prototype, \"minFileSize\", void 0);\n __decorate([\n Property(30000000)\n ], UploadSettings.prototype, \"maxFileSize\", void 0);\n return UploadSettings;\n}(ChildProperty));\nexport { UploadSettings };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';\nimport { AjaxSettings, ContextMenuSettings } from '@syncfusion/ej2-filemanager';\nimport { DetailsViewSettings, NavigationPaneSettings } from '@syncfusion/ej2-filemanager';\nimport { SearchSettings } from '@syncfusion/ej2-filemanager';\nimport { ToolbarSettings as FileToolbarSettings } from '@syncfusion/ej2-filemanager';\nimport { UploadSettings } from '@syncfusion/ej2-filemanager';\nimport { ToolbarType } from '../base/enum';\nimport { backgroundColor, fontColor, fontFamily, fontSize, formatItems, predefinedItems, TableStyleItems, numberFormatList, bulletFormatList } from './items';\n/**\n * Configures the toolbar settings of the RichTextEditor.\n */\nvar ToolbarSettings = /** @class */ (function (_super) {\n __extends(ToolbarSettings, _super);\n function ToolbarSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(true)\n ], ToolbarSettings.prototype, \"enable\", void 0);\n __decorate([\n Property(true)\n ], ToolbarSettings.prototype, \"enableFloating\", void 0);\n __decorate([\n Property(ToolbarType.Expand)\n ], ToolbarSettings.prototype, \"type\", void 0);\n __decorate([\n Property(predefinedItems)\n ], ToolbarSettings.prototype, \"items\", void 0);\n __decorate([\n Property({})\n ], ToolbarSettings.prototype, \"itemConfigs\", void 0);\n return ToolbarSettings;\n}(ChildProperty));\nexport { ToolbarSettings };\n/**\n * Configures the image settings of the RichTextEditor.\n */\nvar ImageSettings = /** @class */ (function (_super) {\n __extends(ImageSettings, _super);\n function ImageSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(['.jpeg', '.jpg', '.png'])\n ], ImageSettings.prototype, \"allowedTypes\", void 0);\n __decorate([\n Property('inline')\n ], ImageSettings.prototype, \"display\", void 0);\n __decorate([\n Property('Blob')\n ], ImageSettings.prototype, \"saveFormat\", void 0);\n __decorate([\n Property('auto')\n ], ImageSettings.prototype, \"width\", void 0);\n __decorate([\n Property('auto')\n ], ImageSettings.prototype, \"height\", void 0);\n __decorate([\n Property(null)\n ], ImageSettings.prototype, \"saveUrl\", void 0);\n __decorate([\n Property(null)\n ], ImageSettings.prototype, \"path\", void 0);\n __decorate([\n Property(true)\n ], ImageSettings.prototype, \"resize\", void 0);\n __decorate([\n Property(null)\n ], ImageSettings.prototype, \"removeUrl\", void 0);\n __decorate([\n Property(0)\n ], ImageSettings.prototype, \"minWidth\", void 0);\n __decorate([\n Property(null)\n ], ImageSettings.prototype, \"maxWidth\", void 0);\n __decorate([\n Property(0)\n ], ImageSettings.prototype, \"minHeight\", void 0);\n __decorate([\n Property(null)\n ], ImageSettings.prototype, \"maxHeight\", void 0);\n __decorate([\n Property(false)\n ], ImageSettings.prototype, \"resizeByPercent\", void 0);\n return ImageSettings;\n}(ChildProperty));\nexport { ImageSettings };\n/**\n * Configures the file manager settings of the RichTextEditor.\n */\nvar FileManagerSettings = /** @class */ (function (_super) {\n __extends(FileManagerSettings, _super);\n function FileManagerSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Complex({ getImageUrl: null, url: null, uploadUrl: null }, AjaxSettings)\n ], FileManagerSettings.prototype, \"ajaxSettings\", void 0);\n __decorate([\n Property(false)\n ], FileManagerSettings.prototype, \"allowDragAndDrop\", void 0);\n __decorate([\n Complex({ visible: true, file: ['Open', '|', 'Cut', 'Copy', '|', 'Delete', 'Rename', '|', 'Details'], folder: ['Open', '|', 'Cut', 'Copy', 'Paste', '|', 'Delete', 'Rename', '|', 'Details'], layout: ['SortBy', 'View', 'Refresh', '|', 'Paste', '|', 'NewFolder', 'Upload', '|', 'Details', '|', 'SelectAll'] }, ContextMenuSettings)\n ], FileManagerSettings.prototype, \"contextMenuSettings\", void 0);\n __decorate([\n Property('')\n ], FileManagerSettings.prototype, \"cssClass\", void 0);\n __decorate([\n Complex({}, DetailsViewSettings)\n ], FileManagerSettings.prototype, \"detailsViewSettings\", void 0);\n __decorate([\n Property(false)\n ], FileManagerSettings.prototype, \"enable\", void 0);\n __decorate([\n Complex({ maxWidth: '650px', minWidth: '240px', visible: true }, NavigationPaneSettings)\n ], FileManagerSettings.prototype, \"navigationPaneSettings\", void 0);\n __decorate([\n Property('/')\n ], FileManagerSettings.prototype, \"path\", void 0);\n __decorate([\n Property(null)\n ], FileManagerSettings.prototype, \"rootAliasName\", void 0);\n __decorate([\n Complex({}, SearchSettings)\n ], FileManagerSettings.prototype, \"searchSettings\", void 0);\n __decorate([\n Property(true)\n ], FileManagerSettings.prototype, \"showFileExtension\", void 0);\n __decorate([\n Property(false)\n ], FileManagerSettings.prototype, \"showHiddenItems\", void 0);\n __decorate([\n Property(true)\n ], FileManagerSettings.prototype, \"showThumbnail\", void 0);\n __decorate([\n Property('Ascending')\n ], FileManagerSettings.prototype, \"sortOrder\", void 0);\n __decorate([\n Complex({ visible: true, items: ['NewFolder', 'Upload', 'Cut', 'Copy', 'Paste', 'Delete', 'Download', 'Rename', 'SortBy', 'Refresh', 'Selection', 'View', 'Details'] }, FileToolbarSettings)\n ], FileManagerSettings.prototype, \"toolbarSettings\", void 0);\n __decorate([\n Complex({ autoUpload: true, minFileSize: 0, maxFileSize: 30000000, allowedExtensions: '', autoClose: false }, UploadSettings)\n ], FileManagerSettings.prototype, \"uploadSettings\", void 0);\n __decorate([\n Property('LargeIcons')\n ], FileManagerSettings.prototype, \"view\", void 0);\n return FileManagerSettings;\n}(ChildProperty));\nexport { FileManagerSettings };\nvar TableSettings = /** @class */ (function (_super) {\n __extends(TableSettings, _super);\n function TableSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('100%')\n ], TableSettings.prototype, \"width\", void 0);\n __decorate([\n Property(TableStyleItems)\n ], TableSettings.prototype, \"styles\", void 0);\n __decorate([\n Property(true)\n ], TableSettings.prototype, \"resize\", void 0);\n __decorate([\n Property(0)\n ], TableSettings.prototype, \"minWidth\", void 0);\n __decorate([\n Property(null)\n ], TableSettings.prototype, \"maxWidth\", void 0);\n return TableSettings;\n}(ChildProperty));\nexport { TableSettings };\n/**\n * Configures the quick toolbar settings of the RichTextEditor.\n */\nvar QuickToolbarSettings = /** @class */ (function (_super) {\n __extends(QuickToolbarSettings, _super);\n function QuickToolbarSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(true)\n ], QuickToolbarSettings.prototype, \"enable\", void 0);\n __decorate([\n Property(false)\n ], QuickToolbarSettings.prototype, \"showOnRightClick\", void 0);\n __decorate([\n Property('hide')\n ], QuickToolbarSettings.prototype, \"actionOnScroll\", void 0);\n __decorate([\n Property(['Open', 'Edit', 'UnLink'])\n ], QuickToolbarSettings.prototype, \"link\", void 0);\n __decorate([\n Property(['Replace', 'Align', 'Caption', 'Remove', '-', 'InsertLink', 'OpenImageLink', 'EditImageLink', 'RemoveImageLink', 'Display', 'AltText', 'Dimension'])\n ], QuickToolbarSettings.prototype, \"image\", void 0);\n __decorate([\n Property(['Cut', 'Copy', 'Paste'])\n ], QuickToolbarSettings.prototype, \"text\", void 0);\n __decorate([\n Property(['TableHeader', 'TableRows', 'TableColumns', 'BackgroundColor', '-', 'TableRemove', 'Alignments', 'TableCellVerticalAlign', 'Styles'])\n ], QuickToolbarSettings.prototype, \"table\", void 0);\n return QuickToolbarSettings;\n}(ChildProperty));\nexport { QuickToolbarSettings };\n/**\n * Configures the Paste Cleanup settings of the RichTextEditor.\n */\nvar PasteCleanupSettings = /** @class */ (function (_super) {\n __extends(PasteCleanupSettings, _super);\n function PasteCleanupSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], PasteCleanupSettings.prototype, \"prompt\", void 0);\n __decorate([\n Property(null)\n ], PasteCleanupSettings.prototype, \"deniedAttrs\", void 0);\n __decorate([\n Property(['background', 'background-color', 'border', 'border-bottom', 'border-left', 'border-radius', 'border-right', 'border-style', 'border-top', 'border-width', 'clear', 'color', 'cursor', 'direction', 'display', 'float', 'font', 'font-family', 'font-size', 'font-weight', 'font-style', 'height', 'left', 'line-height', 'list-style-type', 'margin', 'margin-top', 'margin-left', 'margin-right', 'margin-bottom', 'max-height', 'max-width', 'min-height', 'min-width', 'overflow', 'overflow-x', 'overflow-y', 'padding', 'padding-bottom', 'padding-left', 'padding-right', 'padding-top', 'position', 'right', 'table-layout', 'text-align', 'text-decoration', 'text-indent', 'top', 'vertical-align', 'visibility', 'white-space', 'width'])\n ], PasteCleanupSettings.prototype, \"allowedStyleProps\", void 0);\n __decorate([\n Property(null)\n ], PasteCleanupSettings.prototype, \"deniedTags\", void 0);\n __decorate([\n Property(true)\n ], PasteCleanupSettings.prototype, \"keepFormat\", void 0);\n __decorate([\n Property(false)\n ], PasteCleanupSettings.prototype, \"plainText\", void 0);\n return PasteCleanupSettings;\n}(ChildProperty));\nexport { PasteCleanupSettings };\n/**\n * Configures the font family settings of the RichTextEditor.\n */\nvar FontFamily = /** @class */ (function (_super) {\n __extends(FontFamily, _super);\n function FontFamily() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], FontFamily.prototype, \"default\", void 0);\n __decorate([\n Property('65px')\n ], FontFamily.prototype, \"width\", void 0);\n __decorate([\n Property(fontFamily)\n ], FontFamily.prototype, \"items\", void 0);\n return FontFamily;\n}(ChildProperty));\nexport { FontFamily };\n/**\n * Configures the font size settings of the RichTextEditor.\n */\nvar FontSize = /** @class */ (function (_super) {\n __extends(FontSize, _super);\n function FontSize() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], FontSize.prototype, \"default\", void 0);\n __decorate([\n Property('35px')\n ], FontSize.prototype, \"width\", void 0);\n __decorate([\n Property(fontSize)\n ], FontSize.prototype, \"items\", void 0);\n return FontSize;\n}(ChildProperty));\nexport { FontSize };\n/**\n * Configures the format settings of the RichTextEditor.\n */\nvar Format = /** @class */ (function (_super) {\n __extends(Format, _super);\n function Format() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], Format.prototype, \"default\", void 0);\n __decorate([\n Property('65px')\n ], Format.prototype, \"width\", void 0);\n __decorate([\n Property(formatItems)\n ], Format.prototype, \"types\", void 0);\n return Format;\n}(ChildProperty));\nexport { Format };\n/**\n * Configures the font Color settings of the RichTextEditor.\n */\nvar FontColor = /** @class */ (function (_super) {\n __extends(FontColor, _super);\n function FontColor() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('#ff0000')\n ], FontColor.prototype, \"default\", void 0);\n __decorate([\n Property('Palette')\n ], FontColor.prototype, \"mode\", void 0);\n __decorate([\n Property(10)\n ], FontColor.prototype, \"columns\", void 0);\n __decorate([\n Property(fontColor)\n ], FontColor.prototype, \"colorCode\", void 0);\n __decorate([\n Property(false)\n ], FontColor.prototype, \"modeSwitcher\", void 0);\n return FontColor;\n}(ChildProperty));\nexport { FontColor };\n/**\n * Configures the background Color settings of the RichTextEditor.\n */\nvar BackgroundColor = /** @class */ (function (_super) {\n __extends(BackgroundColor, _super);\n function BackgroundColor() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('#ffff00')\n ], BackgroundColor.prototype, \"default\", void 0);\n __decorate([\n Property('Palette')\n ], BackgroundColor.prototype, \"mode\", void 0);\n __decorate([\n Property(10)\n ], BackgroundColor.prototype, \"columns\", void 0);\n __decorate([\n Property(backgroundColor)\n ], BackgroundColor.prototype, \"colorCode\", void 0);\n __decorate([\n Property(false)\n ], BackgroundColor.prototype, \"modeSwitcher\", void 0);\n return BackgroundColor;\n}(ChildProperty));\nexport { BackgroundColor };\n/**\n * Configures the numberFormatList settings of the RichTextEditor.\n */\nvar NumberFormatList = /** @class */ (function (_super) {\n __extends(NumberFormatList, _super);\n function NumberFormatList() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(numberFormatList)\n ], NumberFormatList.prototype, \"types\", void 0);\n return NumberFormatList;\n}(ChildProperty));\nexport { NumberFormatList };\n/**\n * Configures the bulletFormatList settings of the RichTextEditor.\n */\nvar BulletFormatList = /** @class */ (function (_super) {\n __extends(BulletFormatList, _super);\n function BulletFormatList() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(bulletFormatList)\n ], BulletFormatList.prototype, \"types\", void 0);\n return BulletFormatList;\n}(ChildProperty));\nexport { BulletFormatList };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';\n/**\n * Objects used for configuring the iframe resources properties.\n */\nvar Resources = /** @class */ (function (_super) {\n __extends(Resources, _super);\n function Resources() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property([])\n ], Resources.prototype, \"styles\", void 0);\n __decorate([\n Property([])\n ], Resources.prototype, \"scripts\", void 0);\n return Resources;\n}(ChildProperty));\nexport { Resources };\n/**\n * Configures the iframe settings of the RTE.\n */\nvar IFrameSettings = /** @class */ (function (_super) {\n __extends(IFrameSettings, _super);\n function IFrameSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], IFrameSettings.prototype, \"enable\", void 0);\n __decorate([\n Property(null)\n ], IFrameSettings.prototype, \"attributes\", void 0);\n __decorate([\n Complex({}, Resources)\n ], IFrameSettings.prototype, \"resources\", void 0);\n return IFrameSettings;\n}(ChildProperty));\nexport { IFrameSettings };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * Configures the inlineMode property of the RTE.\n */\nvar InlineMode = /** @class */ (function (_super) {\n __extends(InlineMode, _super);\n function InlineMode() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], InlineMode.prototype, \"enable\", void 0);\n __decorate([\n Property(true)\n ], InlineMode.prototype, \"onSelection\", void 0);\n return InlineMode;\n}(ChildProperty));\nexport { InlineMode };\n","/**\n * @param {string} htmlAttributes - specifies the string value\n * @param {IRichTextEditor} rte - specifies the rte value\n * @param {boolean} isFrame - specifies the boolean value\n * @param {boolean} initial - specifies the boolean value\n * @returns {void}\n * @hidden\n */\nexport function setAttributes(htmlAttributes, rte, isFrame, initial) {\n var target;\n if (isFrame) {\n var iFrame = rte.contentModule.getDocument();\n target = iFrame.querySelector('body');\n }\n else {\n target = rte.element;\n }\n if (Object.keys(htmlAttributes).length) {\n for (var _i = 0, _a = Object.keys(htmlAttributes); _i < _a.length; _i++) {\n var htmlAttr = _a[_i];\n if (htmlAttr === 'class') {\n target.classList.add(htmlAttributes[htmlAttr]);\n }\n else if (htmlAttr === 'disabled' && htmlAttributes[htmlAttr] === 'disabled') {\n rte.enabled = false;\n rte.setEnable();\n }\n else if (htmlAttr === 'readonly' && htmlAttributes[htmlAttr] === 'readonly') {\n rte.readonly = true;\n rte.setReadOnly(initial);\n }\n else if (htmlAttr === 'style') {\n target.setAttribute('style', htmlAttributes[htmlAttr]);\n }\n else if (htmlAttr === 'tabindex') {\n rte.inputElement.setAttribute('tabindex', htmlAttributes[htmlAttr]);\n }\n else if (htmlAttr === 'placeholder') {\n rte.placeholder = htmlAttributes[htmlAttr];\n rte.setPlaceHolder();\n }\n else {\n var validateAttr = ['name', 'required'];\n if (validateAttr.indexOf(htmlAttr) > -1) {\n rte.valueContainer.setAttribute(htmlAttr, htmlAttributes[htmlAttr]);\n }\n else {\n target.setAttribute(htmlAttr, htmlAttributes[htmlAttr]);\n }\n }\n }\n }\n}\n","import { Browser, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';\nimport { getScrollableParent } from '@syncfusion/ej2-popups';\nimport * as events from '../base/constant';\nimport * as classes from '../base/classes';\nimport { addClass, removeClass } from '@syncfusion/ej2-base';\n/**\n * `FullScreen` module is used to maximize and minimize screen\n */\nvar FullScreen = /** @class */ (function () {\n function FullScreen(parent) {\n this.parent = parent;\n this.addEventListener();\n }\n /**\n * showFullScreen method\n *\n * @param {MouseEvent} event - specifies the mouse event\n * @returns {void}\n * @hidden\n\n */\n FullScreen.prototype.showFullScreen = function (event) {\n var _this = this;\n if (this.parent.toolbarSettings.enable === true && this.parent.editorMode !== 'Markdown'\n && !isNOU(this.parent.quickToolbarModule)) {\n this.parent.quickToolbarModule.hideQuickToolbars();\n }\n this.scrollableParent = getScrollableParent(this.parent.element);\n if (!this.parent.element.classList.contains(classes.CLS_FULL_SCREEN)) {\n var evenArgs = {\n cancel: false,\n requestType: 'Maximize',\n targetItem: 'Maximize',\n args: event\n };\n this.parent.trigger(events.actionBegin, evenArgs, function (beginEventArgs) {\n if (!beginEventArgs.cancel) {\n if (_this.parent.toolbarSettings.enableFloating &&\n !_this.parent.inlineMode.enable && _this.parent.toolbarSettings.enable) {\n _this.parent.getToolbarElement().style.width = '100%';\n _this.parent.getToolbarElement().style.top = '0px';\n }\n _this.parent.element.classList.add(classes.CLS_FULL_SCREEN);\n _this.toggleParentOverflow(true);\n _this.parent.setContentHeight();\n if (_this.parent.toolbarModule) {\n if (!_this.parent.getBaseToolbarObject().toolbarObj.items[0].properties) {\n _this.parent.getBaseToolbarObject().toolbarObj.removeItems(0);\n }\n if (Browser.isDevice) {\n _this.parent.toolbarModule.removeFixedTBarClass();\n }\n _this.parent.toolbarModule.updateItem({\n targetItem: 'Maximize',\n updateItem: 'Minimize',\n baseToolbar: _this.parent.getBaseToolbarObject()\n });\n }\n _this.parent.trigger(events.actionComplete, { requestType: 'Maximize', targetItem: 'Maximize', args: event });\n }\n });\n }\n };\n /**\n * hideFullScreen method\n *\n * @param {MouseEvent} event - specifies the mouse event\n * @returns {void}\n * @hidden\n\n */\n FullScreen.prototype.hideFullScreen = function (event) {\n var _this = this;\n if (this.parent.toolbarSettings.enable === true && this.parent.editorMode !== 'Markdown'\n && !isNOU(this.parent.quickToolbarModule)) {\n this.parent.quickToolbarModule.hideQuickToolbars();\n }\n if (this.parent.element.classList.contains(classes.CLS_FULL_SCREEN)) {\n var evenArgs = {\n cancel: false,\n requestType: 'Minimize',\n targetItem: 'Minimize',\n args: event\n };\n this.parent.trigger(events.actionBegin, evenArgs, function (beginEventArgs) {\n if (!beginEventArgs.cancel) {\n _this.parent.element.classList.remove(classes.CLS_FULL_SCREEN);\n var elem = document.querySelectorAll('.e-rte-overflow');\n for (var i = 0; i < elem.length; i++) {\n removeClass([elem[i]], ['e-rte-overflow']);\n }\n _this.parent.setContentHeight();\n if (_this.parent.toolbarModule) {\n if (!_this.parent.getBaseToolbarObject().toolbarObj.items[0].properties) {\n _this.parent.getBaseToolbarObject().toolbarObj.removeItems(0);\n }\n _this.parent.toolbarModule.updateItem({\n targetItem: 'Minimize',\n updateItem: 'Maximize',\n baseToolbar: _this.parent.getBaseToolbarObject()\n });\n if (Browser.isDevice && _this.parent.inlineMode.enable) {\n _this.parent.toolbarModule.addFixedTBarClass();\n }\n }\n _this.parent.trigger(events.actionComplete, { requestType: 'Minimize', targetItem: 'Minimize', args: event });\n }\n });\n }\n };\n // eslint-disable-next-line\n FullScreen.prototype.toggleParentOverflow = function (isAdd) {\n if (isNOU(this.scrollableParent)) {\n return;\n }\n for (var i = 0; i < this.scrollableParent.length; i++) {\n if (this.scrollableParent[i].nodeName === '#document') {\n var elem = document.querySelector('body');\n addClass([elem], ['e-rte-overflow']);\n }\n else {\n var elem = this.scrollableParent[i];\n addClass([elem], ['e-rte-overflow']);\n }\n }\n };\n FullScreen.prototype.onKeyDown = function (event) {\n var originalEvent = event.args;\n switch (originalEvent.action) {\n case 'full-screen':\n this.showFullScreen(event.args);\n originalEvent.preventDefault();\n break;\n case 'escape':\n this.hideFullScreen(event.args);\n originalEvent.preventDefault();\n break;\n }\n };\n FullScreen.prototype.addEventListener = function () {\n this.parent.on(events.keyDown, this.onKeyDown, this);\n this.parent.on(events.destroy, this.destroy, this);\n };\n FullScreen.prototype.removeEventListener = function () {\n this.parent.off(events.keyDown, this.onKeyDown);\n this.parent.off(events.destroy, this.destroy);\n };\n /**\n * destroy method\n *\n * @returns {void}\n * @hidden\n\n */\n FullScreen.prototype.destroy = function () {\n if (this.parent.element.classList.contains(classes.CLS_FULL_SCREEN)) {\n this.toggleParentOverflow(false);\n }\n var elem = document.querySelectorAll('.e-rte-overflow');\n for (var i = 0; i < elem.length; i++) {\n removeClass([elem[i]], ['e-rte-overflow']);\n }\n this.removeEventListener();\n };\n return FullScreen;\n}());\nexport { FullScreen };\n","import { isNullOrUndefined as isNOU, detach, Browser } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\n/**\n * `EnterKey` module is used to handle enter key press actions.\n */\nvar EnterKeyAction = /** @class */ (function () {\n function EnterKeyAction(parent) {\n this.parent = parent;\n this.addEventListener();\n }\n EnterKeyAction.prototype.addEventListener = function () {\n this.parent.on(events.enterHandler, this.enterHandler, this);\n this.parent.on(events.destroy, this.destroy, this);\n };\n EnterKeyAction.prototype.destroy = function () {\n this.removeEventListener();\n };\n EnterKeyAction.prototype.removeEventListener = function () {\n this.parent.off(events.enterHandler, this.enterHandler);\n this.parent.off(events.destroy, this.destroy);\n };\n EnterKeyAction.prototype.getRangeNode = function () {\n this.range = this.parent.getRange();\n this.startNode = this.range.startContainer.nodeName === '#text' ? this.range.startContainer.parentElement :\n this.range.startContainer;\n this.endNode = this.range.endContainer.nodeName === '#text' ? this.range.endContainer.parentElement :\n this.range.endContainer;\n };\n EnterKeyAction.prototype.enterHandler = function (e) {\n var _this = this;\n this.getRangeNode();\n var isTableEnter = true;\n if (!isNOU(this.startNode.closest('TABLE')) && !isNOU(this.endNode.closest('TABLE'))) {\n isTableEnter = false;\n var curElement = this.startNode;\n var blockElement = curElement;\n while (!this.parent.formatter.editorManager.domNode.isBlockNode(curElement)) {\n blockElement = curElement;\n curElement = curElement.parentElement;\n }\n isTableEnter = blockElement.tagName === 'TD' ? false : true;\n }\n if (e.args.which === 13 && e.args.code === 'Enter') {\n if (isNOU(this.startNode.closest('LI')) && isNOU(this.endNode.closest('LI')) && isTableEnter &&\n isNOU(this.startNode.closest('PRE')) && isNOU(this.endNode.closest('PRE'))) {\n var shiftKey_1 = e.args.shiftKey;\n var actionBeginArgs = {\n cancel: false,\n name: events.actionBegin,\n requestType: shiftKey_1 ? 'ShiftEnterAction' : 'EnterAction',\n originalEvent: e.args\n };\n this.parent.trigger(events.actionBegin, actionBeginArgs, function (actionBeginArgs) {\n if (!actionBeginArgs.cancel) {\n if (!(_this.range.startOffset === _this.range.endOffset && _this.range.startContainer === _this.range.endContainer)) {\n _this.range.deleteContents();\n if (_this.range.startContainer.nodeName === '#text' && _this.range.startContainer.textContent.length === 0 &&\n _this.range.startContainer.parentElement !== _this.parent.inputElement) {\n if (_this.parent.enterKey === 'BR') {\n _this.range.startContainer.parentElement.innerHTML = '';\n }\n else {\n _this.range.startContainer.parentElement.innerHTML = '
';\n }\n }\n else if (_this.range.startContainer === _this.parent.inputElement && _this.range.startContainer.innerHTML === '') {\n _this.range.startContainer.innerHTML = '
';\n var focusElem = _this.range.startContainer.childNodes[_this.range.startOffset];\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), focusElem, 0);\n }\n else if (_this.parent.inputElement === _this.range.startContainer) {\n var focusElem = _this.range.startContainer.childNodes[_this.range.startOffset];\n if (focusElem.nodeName === '#text' && focusElem.textContent.length === 0) {\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), focusElem, focusElem.previousSibling.textContent.length);\n }\n else {\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), focusElem, focusElem.textContent.length >= 0 ? 0 : 1);\n if (focusElem.previousSibling.textContent.length === 0) {\n detach(focusElem.previousSibling);\n }\n else if (focusElem.textContent.length === 0) {\n var currentFocusElem = focusElem.previousSibling.lastChild;\n while (currentFocusElem.nodeName !== '#text') {\n currentFocusElem = currentFocusElem.lastChild;\n }\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), currentFocusElem, currentFocusElem.textContent.length);\n detach(focusElem);\n }\n else if (_this.parent.enterKey !== 'BR' &&\n focusElem.previousSibling.textContent.length !== 0 && focusElem.textContent.length !== 0) {\n e.args.preventDefault();\n return;\n }\n }\n _this.getRangeNode();\n }\n }\n if (_this.range.startContainer === _this.range.endContainer &&\n _this.range.startOffset === _this.range.endOffset && _this.range.startContainer === _this.parent.inputElement) {\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), _this.range.startContainer.childNodes[_this.range.startOffset], 0);\n _this.getRangeNode();\n }\n if ((_this.parent.enterKey === 'P' && !shiftKey_1) || (_this.parent.enterKey === 'DIV' && !shiftKey_1) ||\n (_this.parent.shiftEnterKey === 'P' && shiftKey_1) ||\n (_this.parent.shiftEnterKey === 'DIV' && shiftKey_1)) {\n var nearBlockNode = void 0;\n if (isTableEnter && _this.parent.formatter.editorManager.domNode.isBlockNode(_this.startNode)) {\n nearBlockNode = _this.startNode;\n }\n else {\n nearBlockNode = _this.parent.formatter.editorManager.domNode.blockParentNode(_this.startNode);\n }\n var isImageNode = false;\n var isFocusedFirst = false;\n if (_this.range.startOffset != 0 && _this.range.endOffset != 0 && _this.range.startContainer === _this.range.endContainer &&\n !(!isNOU(nearBlockNode.childNodes[0]) && nearBlockNode.childNodes[0].nodeName === 'IMG')) {\n var startNodeText = _this.range.startContainer.textContent;\n var splitFirstText = startNodeText.substring(0, _this.range.startOffset);\n if (splitFirstText.charCodeAt(_this.range.startOffset - 1) != 160 && splitFirstText.trim().length === 0) {\n isFocusedFirst = true;\n }\n }\n else if (_this.range.startOffset === 0 && _this.range.endOffset === 0) {\n isFocusedFirst = true;\n }\n _this.removeBRElement(nearBlockNode);\n if (((_this.range.startOffset === 0 && _this.range.endOffset === 0) || isFocusedFirst) &&\n !(!isNOU(_this.range.startContainer.previousSibling) &&\n (_this.range.startContainer.previousSibling.nodeName === 'IMG' || _this.range.startContainer.previousSibling.nodeName === 'BR'))) {\n var isNearBlockLengthZero = void 0;\n var newElem = void 0;\n if (_this.range.startContainer.nodeName === 'IMG') {\n newElem = _this.createInsertElement(shiftKey_1);\n isImageNode = true;\n isNearBlockLengthZero = false;\n }\n else {\n if (nearBlockNode.textContent.trim().length !== 0) {\n newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, false).cloneNode(true);\n isNearBlockLengthZero = false;\n }\n else {\n newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, true).cloneNode(true);\n isNearBlockLengthZero = true;\n }\n }\n var insertElem = _this.createInsertElement(shiftKey_1);\n while (newElem.firstChild) {\n insertElem.appendChild(newElem.firstChild);\n }\n nearBlockNode.parentElement.insertBefore(insertElem, nearBlockNode);\n if (!isNearBlockLengthZero) {\n var currentFocusElem = insertElem;\n var finalFocusElem = void 0;\n while (!isNOU(currentFocusElem) && currentFocusElem.nodeName !== '#text') {\n finalFocusElem = currentFocusElem;\n currentFocusElem = currentFocusElem.lastChild;\n }\n finalFocusElem.innerHTML = '
';\n if (!isImageNode) {\n detach(nearBlockNode);\n }\n }\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), insertElem.nextElementSibling, 0);\n }\n else if (nearBlockNode.textContent.length === 0 && !(!isNOU(nearBlockNode.childNodes[0]) && nearBlockNode.childNodes[0].nodeName === 'IMG')) {\n if (!isNOU(nearBlockNode.children[0]) && nearBlockNode.children[0].tagName !== 'BR') {\n var newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, false).cloneNode(true);\n _this.parent.formatter.editorManager.domNode.insertAfter(newElem, nearBlockNode);\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), newElem, newElem.textContent.length >= 0 ? 0 : 1);\n }\n else {\n var insertElem = _this.createInsertElement(shiftKey_1);\n insertElem.innerHTML = '
';\n _this.parent.formatter.editorManager.domNode.insertAfter(insertElem, nearBlockNode);\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), insertElem, 0);\n }\n }\n else {\n var newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, true);\n if (!isNOU(newElem.childNodes[0]) && newElem.childNodes[0].nodeName === '#text' &&\n newElem.childNodes[0].textContent.length === 0) {\n detach(newElem.childNodes[0]);\n }\n if (newElem.textContent.trim().length === 0) {\n var brElm = _this.parent.createElement('br');\n if (_this.startNode.nodeName === 'A') {\n var startParentElem = _this.startNode.parentElement;\n _this.startNode.parentElement.insertBefore(brElm, _this.startNode);\n detach(_this.startNode);\n _this.startNode = startParentElem;\n }\n else {\n _this.startNode.appendChild(brElm);\n }\n if (newElem.childNodes[0].textContent === '\\n') {\n detach(newElem.childNodes[0]);\n }\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), _this.startNode, 0);\n }\n if (((_this.parent.enterKey === 'P' || _this.parent.enterKey === 'DIV') && !shiftKey_1) || ((_this.parent.shiftEnterKey === 'DIV' ||\n _this.parent.shiftEnterKey === 'P') && shiftKey_1)) {\n var insertElm = _this.createInsertElement(shiftKey_1);\n while (newElem.firstChild) {\n insertElm.appendChild(newElem.firstChild);\n }\n _this.parent.formatter.editorManager.domNode.insertAfter(insertElm, newElem);\n detach(newElem);\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), _this.parent.formatter.editorManager.domNode.isBlockNode(_this.startNode) ?\n insertElm : _this.startNode, 0);\n }\n }\n e.args.preventDefault();\n }\n if ((_this.parent.enterKey === 'BR' && !shiftKey_1) || (_this.parent.shiftEnterKey === 'BR' && shiftKey_1)) {\n var currentParent = void 0;\n if (!_this.parent.formatter.editorManager.domNode.isBlockNode(_this.startNode)) {\n var currentNode = _this.startNode;\n var previousNode = currentNode;\n while (!_this.parent.formatter.editorManager.domNode.isBlockNode(currentNode)) {\n previousNode = currentNode;\n currentNode = currentNode.parentElement;\n }\n currentParent = currentNode === _this.parent.inputElement ?\n previousNode : currentNode;\n }\n else {\n currentParent = _this.startNode;\n }\n _this.removeBRElement(currentParent);\n var isEmptyBrInserted = false;\n var currentParentLastChild = currentParent.lastChild;\n while (!isNOU(currentParentLastChild) && !(currentParentLastChild.nodeName === '#text' || currentParentLastChild.nodeName === 'BR')) {\n currentParentLastChild = currentParentLastChild.lastChild;\n }\n var isLastNodeLength = _this.range.startContainer === currentParentLastChild ?\n _this.range.startContainer.textContent.length : currentParent.textContent.length;\n if (currentParent !== _this.parent.inputElement &&\n _this.parent.formatter.editorManager.domNode.isBlockNode(currentParent) &&\n _this.range.startOffset === _this.range.endOffset &&\n _this.range.startOffset === isLastNodeLength) {\n var focusBRElem = _this.parent.createElement('br');\n if (currentParentLastChild.nodeName === 'BR' && currentParent.textContent.length === 0) {\n _this.parent.formatter.editorManager.domNode.insertAfter(focusBRElem, currentParentLastChild);\n }\n else {\n var lineBreakBRElem = _this.parent.createElement('br');\n _this.parent.formatter.editorManager.domNode.insertAfter(focusBRElem, _this.range.startContainer);\n _this.parent.formatter.editorManager.domNode.insertAfter(lineBreakBRElem, _this.range.startContainer);\n }\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), focusBRElem, 0);\n }\n else if (!isNOU(currentParent) && currentParent !== _this.parent.inputElement && currentParent.nodeName !== 'BR') {\n if (currentParent.textContent.trim().length === 0 || (currentParent.textContent.trim().length === 1 &&\n currentParent.textContent.charCodeAt(0) === 8203)) {\n var newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, currentParent, true).cloneNode(true);\n _this.parent.formatter.editorManager.domNode.insertAfter(newElem, currentParent);\n var outerBRElem = _this.parent.createElement('br');\n newElem.parentElement.insertBefore(outerBRElem, newElem);\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), newElem, 0);\n }\n else {\n var newElem = void 0;\n var outerBRElem = _this.parent.createElement('br');\n if (_this.range.startOffset === 0 && _this.range.endOffset === 0 &&\n !isNOU(currentParent.previousSibling) && currentParent.previousSibling.nodeName === 'BR') {\n newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, currentParent, false).cloneNode(true);\n _this.parent.formatter.editorManager.domNode.insertAfter(outerBRElem, currentParent);\n _this.insertFocusContent();\n var currentFocusElem = outerBRElem.nextSibling;\n while (!isNOU(currentFocusElem) && currentFocusElem.nodeName !== '#text') {\n currentFocusElem = currentFocusElem.lastChild;\n }\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), currentFocusElem, 0);\n isEmptyBrInserted = true;\n }\n else {\n _this.insertBRElement();\n }\n }\n }\n else {\n _this.insertBRElement();\n }\n e.args.preventDefault();\n }\n _this.parent.trigger(events.actionComplete, { requestType: shiftKey_1 ? 'ShiftEnterAction' : 'EnterAction', args: e.args });\n }\n });\n }\n }\n };\n EnterKeyAction.prototype.removeBRElement = function (currentElement) {\n if (Browser.userAgent.indexOf('Firefox') != -1 &&\n this.range.endOffset === currentElement.textContent.length &&\n currentElement.lastChild.nodeName === 'BR') {\n detach(currentElement.lastChild);\n }\n };\n EnterKeyAction.prototype.insertBRElement = function () {\n var isEmptyBrInserted = false;\n var brElm = this.parent.createElement('br');\n if (this.startNode.nodeName === 'BR' && this.endNode.nodeName === 'BR' && this.range.startOffset === 0 && this.range.startOffset === this.range.endOffset) {\n this.parent.formatter.editorManager.domNode.insertAfter(brElm, this.startNode);\n isEmptyBrInserted = true;\n }\n else {\n if (this.startNode === this.parent.inputElement && !isNOU(this.range.startContainer.previousSibling) &&\n this.range.startContainer.previousSibling.nodeName === 'BR' && this.range.startContainer.textContent.length === 0) {\n isEmptyBrInserted = true;\n }\n this.range.insertNode(brElm);\n }\n if (isEmptyBrInserted || (!isNOU(brElm.nextElementSibling) && brElm.nextElementSibling.tagName === 'BR') || (!isNOU(brElm.nextSibling) && brElm.nextSibling.textContent.length > 0)) {\n this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), !isNOU(brElm.nextSibling) ? brElm.nextSibling : brElm, 0);\n isEmptyBrInserted = false;\n }\n else {\n var brElm2 = this.parent.createElement('br');\n this.range.insertNode(brElm2);\n this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), brElm, 0);\n }\n };\n EnterKeyAction.prototype.insertFocusContent = function () {\n if (this.range.startContainer.textContent.length === 0) {\n if (this.range.startContainer.nodeName === '#text') {\n this.range.startContainer.parentElement.innerHTML = '';\n }\n else {\n this.range.startContainer.innerHTML = '';\n }\n }\n };\n EnterKeyAction.prototype.createInsertElement = function (shiftKey) {\n var insertElem;\n if ((this.parent.enterKey === 'DIV' && !shiftKey) || (this.parent.shiftEnterKey === 'DIV' && shiftKey)) {\n insertElem = this.parent.createElement('div');\n }\n else if ((this.parent.enterKey === 'P' && !shiftKey) || (this.parent.shiftEnterKey === 'P' && shiftKey)) {\n insertElem = this.parent.createElement('p');\n }\n return insertElem;\n };\n return EnterKeyAction;\n}());\nexport { EnterKeyAction };\n","import { Dialog } from '@syncfusion/ej2-popups';\nimport { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\n/**\n * Dialog Renderer\n */\nvar DialogRenderer = /** @class */ (function () {\n function DialogRenderer(parent) {\n this.parent = parent;\n }\n /**\n * dialog render method\n *\n * @param {DialogModel} e - specifies the dialog model.\n * @returns {void}\n * @hidden\n\n */\n DialogRenderer.prototype.render = function (e) {\n var dlgObj;\n e.beforeOpen = this.beforeOpen.bind(this);\n e.open = this.open.bind(this);\n if (isNOU(e.close)) {\n e.close = this.close.bind(this);\n }\n e.beforeClose = this.beforeClose.bind(this);\n // eslint-disable-next-line\n dlgObj = new Dialog(e);\n dlgObj.isStringTemplate = true;\n return dlgObj;\n };\n DialogRenderer.prototype.beforeOpen = function (args) {\n this.parent.trigger(events.beforeDialogOpen, args, this.beforeOpenCallback.bind(this, args));\n };\n DialogRenderer.prototype.beforeOpenCallback = function (args) {\n if (args.cancel) {\n this.parent.notify(events.clearDialogObj, null);\n }\n };\n DialogRenderer.prototype.open = function (args) {\n this.parent.trigger(events.dialogOpen, args);\n };\n DialogRenderer.prototype.beforeClose = function (args) {\n this.parent.trigger(events.beforeDialogClose, args, function (closeArgs) {\n if (!closeArgs.cancel) {\n if (closeArgs.container.classList.contains('e-popup-close')) {\n closeArgs.cancel = true;\n }\n }\n });\n };\n /**\n * dialog close method\n *\n * @param {Object} args - specifies the arguments.\n * @returns {void}\n * @hidden\n\n */\n DialogRenderer.prototype.close = function (args) {\n this.parent.trigger(events.dialogClose, args);\n };\n return DialogRenderer;\n}());\nexport { DialogRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, EventHandler, Complex, Browser, addClass, select, detach } from '@syncfusion/ej2-base';\nimport { Property, NotifyPropertyChanges, formatUnit, L10n, closest } from '@syncfusion/ej2-base';\nimport { setStyleAttribute, Event, removeClass, print as printWindow, attributes } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined as isNOU, compile, append, extend, debounce } from '@syncfusion/ej2-base';\nimport { Touch as EJ2Touch } from '@syncfusion/ej2-base';\nimport { getScrollableParent } from '@syncfusion/ej2-popups';\nimport * as events from '../base/constant';\nimport * as classes from '../base/classes';\nimport { Render } from '../renderer/render';\nimport { ViewSource } from '../renderer/view-source';\nimport { executeGroup } from './interface';\nimport { ServiceLocator } from '../services/service-locator';\nimport { RendererFactory } from '../services/renderer-factory';\nimport { RenderType, ToolbarType, DialogType } from './enum';\nimport { ExecCommandCallBack } from '../actions/execute-command-callback';\nimport { KeyboardEvents } from '../actions/keyboard';\nimport { ToolbarSettings, ImageSettings, QuickToolbarSettings, FontFamily, FontSize, Format, NumberFormatList, BulletFormatList } from '../models/toolbar-settings';\nimport { FileManagerSettings } from '../models/toolbar-settings';\nimport { TableSettings, PasteCleanupSettings } from '../models/toolbar-settings';\nimport { FontColor, BackgroundColor } from '../models/toolbar-settings';\nimport { IFrameSettings } from '../models/iframe-settings';\nimport { InlineMode } from '../models/inline-mode';\nimport { defaultLocale } from '../models/default-locale';\nimport { setAttributes } from '../actions/html-attributes';\nimport { FullScreen } from '../actions/full-screen';\nimport { EnterKeyAction } from '../actions/enter-key';\nimport * as CONSTANT from '../../common/constant';\nimport { dispatchEvent, getEditValue, isIDevice, decode, isEditableValueEmpty, getDefaultValue } from '../base/util';\nimport { DialogRenderer } from '../renderer/dialog-renderer';\n/**\n * Represents the Rich Text Editor component.\n * ```html\n *
\n * \n * ```\n */\nvar RichTextEditor = /** @class */ (function (_super) {\n __extends(RichTextEditor, _super);\n function RichTextEditor(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.defaultResetValue = null;\n _this.isResizeInitialized = false;\n /**\n * @hidden\n\n */\n _this.isFocusOut = false;\n /**\n * @hidden\n\n */\n _this.isRTE = false;\n /**\n * @hidden\n\n */\n _this.isBlur = true;\n _this.needsID = true;\n return _this;\n }\n /**\n * To provide the array of modules needed for component rendering\n *\n * @returns {ModuleDeclaration[]} - specifies the declaration.\n * @hidden\n\n */\n RichTextEditor.prototype.requiredModules = function () {\n var modules = [];\n if (this.toolbarSettings.enable) {\n modules.push({ member: 'toolbar', args: [this, this.serviceLocator] });\n modules.push({\n member: 'link',\n args: [this, this.serviceLocator]\n });\n modules.push({\n member: 'table',\n args: [this, this.serviceLocator]\n });\n modules.push({\n member: 'image',\n args: [this, this.serviceLocator]\n });\n if (this.quickToolbarSettings.enable) {\n modules.push({ member: 'quickToolbar', args: [this, this.serviceLocator] });\n }\n }\n if (this.showCharCount) {\n modules.push({ member: 'count', args: [this, this.serviceLocator] });\n }\n if (this.editorMode === 'Markdown') {\n modules.push({ member: 'markdownEditor', args: [this, this.serviceLocator] });\n }\n if (this.editorMode === 'HTML') {\n modules.push({ member: 'htmlEditor', args: [this, this.serviceLocator] });\n modules.push({ member: 'pasteCleanup', args: [this, this.serviceLocator] });\n }\n if (this.fileManagerSettings.enable) {\n modules.push({ member: 'fileManager', args: [this, this.serviceLocator] });\n }\n if (this.enableResize) {\n modules.push({ member: 'resize', args: [this] });\n }\n return modules;\n };\n RichTextEditor.prototype.updateEnable = function () {\n if (this.enabled) {\n removeClass([this.element], classes.CLS_DISABLED);\n this.element.setAttribute('aria-disabled', 'false');\n if (!isNOU(this.htmlAttributes.tabindex)) {\n this.inputElement.setAttribute('tabindex', this.htmlAttributes.tabindex);\n }\n else {\n this.inputElement.setAttribute('tabindex', '0');\n }\n }\n else {\n if (this.getToolbar()) {\n removeClass(this.getToolbar().querySelectorAll('.' + classes.CLS_ACTIVE), classes.CLS_ACTIVE);\n removeClass([this.getToolbar()], [classes.CLS_TB_FLOAT, classes.CLS_TB_ABS_FLOAT]);\n }\n addClass([this.element], classes.CLS_DISABLED);\n this.element.tabIndex = -1;\n this.element.setAttribute('aria-disabled', 'true');\n this.inputElement.setAttribute('tabindex', '-1');\n }\n };\n /**\n * setEnable method\n *\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.setEnable = function () {\n this.updateEnable();\n // eslint-disable-next-line\n (this.enabled) ? this.eventInitializer() : this.unWireEvents();\n };\n /**\n * For internal use only - Initialize the event handler;\n *\n * @returns {void}\n * @hidden\n * @private\n */\n RichTextEditor.prototype.preRender = function () {\n this.onBlurHandler = this.blurHandler.bind(this);\n this.onFocusHandler = this.focusHandler.bind(this);\n this.onResizeHandler = this.resizeHandler.bind(this);\n this.clickPoints = { clientX: 0, clientY: 0 };\n this.initialValue = this.value;\n this.serviceLocator = new ServiceLocator;\n this.initializeServices();\n this.setContainer();\n this.persistData();\n setStyleAttribute(this.element, { 'width': formatUnit(this.width) });\n attributes(this.element, { role: 'application' });\n };\n RichTextEditor.prototype.persistData = function () {\n if (this.enablePersistence && this.originalElement.tagName === 'TEXTAREA') {\n this.element.id = this.originalElement.id + '_wrapper';\n var data = window.localStorage.getItem(this.getModuleName() + this.element.id);\n if (!(isNOU(data) || (data === ''))) {\n this.setProperties(JSON.parse(data), true);\n }\n }\n };\n RichTextEditor.prototype.setContainer = function () {\n this.originalElement = this.element.cloneNode(true);\n if (this.value === null || this.valueTemplate !== null) {\n this.setValue();\n }\n if (this.element.hasAttribute('tabindex')) {\n this.htmlAttributes = { 'tabindex': this.element.getAttribute('tabindex') };\n this.element.removeAttribute('tabindex');\n }\n this.element.innerHTML = '';\n var invalidAttr = ['class', 'style', 'id', 'ejs-for'];\n var htmlAttr = {};\n for (var a = 0; a < this.element.attributes.length; a++) {\n if (invalidAttr.indexOf(this.element.attributes[a].name) === -1 &&\n !(/^data-val/.test(this.element.attributes[a].name))) { // data-val for asp.net core data annotation validation.\n htmlAttr[this.element.attributes[a].name] = this.element.getAttribute(this.element.attributes[a].name);\n }\n }\n extend(htmlAttr, this.htmlAttributes, htmlAttr);\n this.setProperties({ htmlAttributes: htmlAttr }, true);\n if (!isNOU(this.htmlAttributes.id)) {\n this.element.id = this.htmlAttributes.id;\n }\n if (this.element.tagName === 'TEXTAREA') {\n var rteOuterWrapper = this.createElement('div', {\n className: this.element.getAttribute('class')\n });\n this.element.innerHTML = '';\n this.element.parentElement.insertBefore(rteOuterWrapper, this.element);\n this.valueContainer = this.element;\n removeClass([this.valueContainer], this.element.getAttribute('class').split(' '));\n this.element = rteOuterWrapper;\n }\n else {\n this.valueContainer = this.createElement('textarea', {\n id: this.getID() + '-value'\n });\n }\n this.valueContainer.name = this.getID();\n addClass([this.valueContainer], classes.CLS_RTE_HIDDEN);\n this.element.appendChild(this.valueContainer);\n };\n /**\n * getPersistData method\n *\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.getPersistData = function () {\n return this.addOnPersist(['value']);\n };\n /**\n * Focuses the Rich Text Editor component\n *\n * @returns {void}\n * @public\n */\n RichTextEditor.prototype.focusIn = function () {\n if (this.enabled) {\n this.inputElement.focus();\n this.focusHandler({});\n }\n };\n /**\n * Blurs the Rich Text Editor component\n *\n * @returns {void}\n * @public\n */\n RichTextEditor.prototype.focusOut = function () {\n if (this.enabled) {\n this.inputElement.blur();\n this.blurHandler({});\n }\n };\n /**\n * Selects all the content in RichTextEditor\n *\n * @returns {void}\n * @public\n */\n RichTextEditor.prototype.selectAll = function () {\n this.notify(events.selectAll, {});\n };\n /**\n * Selects a content range or an element\n *\n * @param {Range} range - Specify the range which you want to select within the content.\n * The method used to select a particular sentence or word or entire document.\n *\n * @returns {void}\n * @public\n */\n RichTextEditor.prototype.selectRange = function (range) {\n this.notify(events.selectRange, { range: range });\n };\n /**\n * Retrieves the HTML markup content from currently selected content of RichTextEditor.\n *\n * @returns {void}\n * @public\n */\n RichTextEditor.prototype.getSelection = function () {\n var str = '';\n this.notify(events.getSelectedHtml, {\n callBack: function (txt) {\n str = txt;\n }\n });\n return str;\n };\n /**\n * Executes the commands\n *\n * @returns {void}\n * @param {CommandName} commandName - Specifies the name of the command to be executed.\n * @param {string | HTMLElement | ILinkCommandsArgs | IImageCommandsArgs} value - Specifies the value that you want to execute.\n * @param {ExecuteCommandOption} option - specifies the command option\n * @public\n */\n RichTextEditor.prototype.executeCommand = function (commandName, value, option) {\n value = this.htmlPurifier(commandName, value);\n if (this.editorMode === 'HTML') {\n var range = this.getRange();\n if (this.iframeSettings.enable) {\n this.formatter.editorManager.nodeSelection.Clear(this.element.ownerDocument);\n }\n var toFocus = (this.iframeSettings.enable &&\n range.startContainer === this.inputElement) ? true : !this.inputElement.contains(range.startContainer);\n if (toFocus) {\n this.focusIn();\n }\n }\n var tool = executeGroup[commandName];\n if (option && option.undo) {\n if (option.undo && this.formatter.getUndoRedoStack().length === 0) {\n this.formatter.saveData();\n }\n }\n this.formatter.editorManager.execCommand(tool.command, tool.subCommand ? tool.subCommand : (value ? value : tool.value), null, null, (value ? value : tool.value), (value ? value : tool.value));\n if (option && option.undo) {\n this.formatter.saveData();\n this.formatter.enableUndo(this);\n }\n this.setPlaceHolder();\n this.notify(events.contentChanged, {});\n };\n RichTextEditor.prototype.htmlPurifier = function (command, value) {\n if (this.editorMode === 'HTML') {\n switch (command) {\n case 'insertHTML':\n if (this.enableHtmlSanitizer) {\n if (typeof value === 'string') {\n value = this.htmlEditorModule.sanitizeHelper(value);\n }\n else {\n value = this.htmlEditorModule.sanitizeHelper(value.outerHTML);\n }\n }\n break;\n case 'insertTable':\n if (isNOU(value.width)) {\n value.width = { minWidth: this.tableSettings.minWidth,\n maxWidth: this.tableSettings.maxWidth, width: this.tableSettings.width };\n }\n break;\n case 'insertImage': {\n var temp = this.createElement('img', {\n attrs: {\n src: value.url\n }\n });\n var imageValue = temp.outerHTML;\n if (this.enableHtmlSanitizer) {\n imageValue = this.htmlEditorModule.sanitizeHelper(temp.outerHTML);\n }\n var url = (imageValue !== '' && (this.createElement('div', {\n innerHTML: imageValue\n }).firstElementChild).getAttribute('src')) || null;\n url = !isNOU(url) ? url : '';\n value.url = url;\n if (isNOU(value.width)) {\n value.width = { minWidth: this.insertImageSettings.minWidth,\n maxWidth: this.insertImageSettings.maxWidth, width: this.insertImageSettings.width };\n }\n if (isNOU(value.height)) {\n value.height = { minHeight: this.insertImageSettings.minHeight,\n maxHeight: this.insertImageSettings.maxHeight, height: this.insertImageSettings.height };\n }\n break;\n }\n case 'createLink': {\n var tempNode = this.createElement('a', {\n attrs: {\n href: value.url\n }\n });\n var linkValue = tempNode.outerHTML;\n if (this.enableHtmlSanitizer) {\n linkValue = this.htmlEditorModule.sanitizeHelper(tempNode.outerHTML);\n }\n var href = (linkValue !== '' && (this.createElement('div', {\n innerHTML: linkValue\n }).firstElementChild).getAttribute('href')) || null;\n href = !isNOU(href) ? href : '';\n value.url = href;\n break;\n }\n }\n }\n return value;\n };\n RichTextEditor.prototype.encode = function (value) {\n var divNode = this.createElement('div');\n divNode.innerText = value.trim();\n // eslint-disable-next-line\n return divNode.innerHTML.replace(/
/gi, '\\n');\n };\n /**\n * For internal use only - To Initialize the component rendering.\n *\n * @returns {void}\n * @private\n\n */\n RichTextEditor.prototype.render = function () {\n if (this.value && !this.valueTemplate) {\n this.setProperties({ value: this.serializeValue(this.value) }, true);\n }\n this.renderModule = new Render(this, this.serviceLocator);\n this.sourceCodeModule = new ViewSource(this, this.serviceLocator);\n this.notify(events.initialLoad, {});\n this.trigger(events.load);\n this.RTERender();\n // eslint-disable-next-line\n var execCommandCallBack = new ExecCommandCallBack(this);\n this.notify(events.initialEnd, {});\n if (this.enableXhtml) {\n this.setProperties({ value: this.getXhtml() }, true);\n }\n if (this.toolbarSettings.enable && this.toolbarSettings.type === 'Expand' && !isNOU(this.getToolbar()) &&\n (this.toolbarSettings.items.indexOf('Undo') > -1 && this.toolbarSettings.items.indexOf('Redo') > -1)) {\n this.disableToolbarItem(['Undo', 'Redo']);\n }\n this.setContentHeight();\n if (this.value !== null) {\n this.valueContainer.defaultValue = this.value;\n }\n // eslint-disable-next-line\n (!this.enabled) ? this.unWireEvents() : this.eventInitializer();\n this.renderComplete();\n };\n /**\n * For internal use only - Initialize the event handler\n *\n * @returns {void}\n * @private\n\n * @hidden\n */\n RichTextEditor.prototype.eventInitializer = function () {\n this.wireEvents();\n };\n RichTextEditor.prototype.cleanList = function (e) {\n var range = this.getRange();\n var currentStartContainer = range.startContainer;\n var currentEndContainer = range.endContainer;\n var currentStartOffset = range.startOffset;\n var isSameContainer = currentStartContainer === currentEndContainer ? true : false;\n var currentEndOffset;\n var endNode = range.endContainer.nodeName === '#text' ? range.endContainer.parentElement :\n range.endContainer;\n var closestLI = closest(endNode, 'LI');\n if (!isNOU(closestLI) && endNode.textContent.length === range.endOffset &&\n !range.collapsed) {\n closestLI.textContent = closestLI.textContent.trim();\n currentEndOffset = closestLI.textContent.length - 1;\n var currentLastElem = closestLI;\n while (currentLastElem.nodeName !== '#text') {\n currentLastElem = currentLastElem.lastChild;\n }\n this.formatter.editorManager.nodeSelection.setSelectionText(this.contentModule.getDocument(), isSameContainer ? currentLastElem : currentStartContainer, currentLastElem, currentStartOffset, currentLastElem.textContent.length);\n }\n };\n /**\n * For internal use only - keydown the event handler;\n *\n * @param {KeyboardEvent} e - specifies the event.\n * @returns {void}\n * @private\n\n * @hidden\n */\n RichTextEditor.prototype.keyDown = function (e) {\n this.notify(events.keyDown, { member: 'keydown', args: e });\n this.restrict(e);\n if (this.editorMode === 'HTML') {\n this.cleanList(e);\n }\n if (this.editorMode === 'HTML' && ((e.which === 8 && e.code === 'Backspace') || (e.which === 46 && e.code === 'Delete'))) {\n var range = this.getRange();\n var startNode = range.startContainer.nodeName === '#text' ? range.startContainer.parentElement :\n range.startContainer;\n if (closest(startNode, 'pre') &&\n (e.which === 8 && range.startContainer.textContent.charCodeAt(range.startOffset - 1) === 8203) ||\n (e.which === 46 && range.startContainer.textContent.charCodeAt(range.startOffset) === 8203)) {\n var regEx = new RegExp(String.fromCharCode(8203), 'g');\n var pointer = e.which === 8 ? range.startOffset - 1 : range.startOffset;\n range.startContainer.textContent = range.startContainer.textContent.replace(regEx, '');\n this.formatter.editorManager.nodeSelection.setCursorPoint(this.contentModule.getDocument(), range.startContainer, pointer);\n }\n else if ((e.code === 'Backspace' && e.which === 8) &&\n range.startContainer.textContent.charCodeAt(0) === 8203 && range.collapsed) {\n var parentEle = range.startContainer.parentElement;\n var index = void 0;\n var i = void 0;\n for (i = 0; i < parentEle.childNodes.length; i++) {\n if (parentEle.childNodes[i] === range.startContainer) {\n index = i;\n }\n }\n var bool = true;\n var removeNodeArray = [];\n for (i = index; i >= 0; i--) {\n if (parentEle.childNodes[i].nodeType === 3 && parentEle.childNodes[i].textContent.charCodeAt(0) === 8203 && bool) {\n removeNodeArray.push(i);\n }\n else {\n bool = false;\n }\n }\n if (removeNodeArray.length > 0) {\n for (i = removeNodeArray.length - 1; i > 0; i--) {\n parentEle.childNodes[removeNodeArray[i]].textContent = '';\n }\n }\n this.formatter.editorManager.nodeSelection.setCursorPoint(this.contentModule.getDocument(), range.startContainer, range.startOffset);\n }\n }\n if (this.formatter.getUndoRedoStack().length === 0) {\n this.formatter.saveData();\n }\n if (e.action !== 'insert-link' &&\n (e.action && e.action !== 'paste' && e.action !== 'space'\n || e.which === 9 || (e.code === 'Backspace' && e.which === 8))) {\n this.formatter.process(this, null, e);\n switch (e.action) {\n case 'toolbar-focus':\n if (this.toolbarSettings.enable) {\n // eslint-disable-next-line\n var selector = '.e-toolbar-item[aria-disabled=\"false\"][title] [tabindex]';\n this.toolbarModule.baseToolbar.toolbarObj.element.querySelector(selector).focus();\n }\n break;\n case 'escape':\n this.contentModule.getEditPanel().focus();\n break;\n }\n }\n if (!isNOU(this.placeholder)) {\n if ((!isNOU(this.placeHolderWrapper)) && (this.inputElement.textContent.length !== 1)) {\n this.placeHolderWrapper.style.display = 'none';\n }\n else {\n this.setPlaceHolder();\n }\n }\n this.autoResize();\n };\n RichTextEditor.prototype.keyUp = function (e) {\n this.notify(events.keyUp, { member: 'keyup', args: e });\n if (e.code === 'KeyX' && e.which === 88 && e.keyCode === 88 && e.ctrlKey && (this.inputElement.innerHTML === '' ||\n this.inputElement.innerHTML === '
')) {\n this.inputElement.innerHTML = getEditValue(getDefaultValue(this), this);\n }\n var allowedKeys = e.which === 32 || e.which === 13 || e.which === 8 || e.which === 46;\n if (((e.key !== 'shift' && !e.ctrlKey) && e.key && e.key.length === 1 || allowedKeys) || (this.editorMode === 'Markdown'\n && ((e.key !== 'shift' && !e.ctrlKey) && e.key && e.key.length === 1 || allowedKeys)) && !this.inlineMode.enable) {\n this.formatter.onKeyHandler(this, e);\n }\n if (this.inputElement && this.inputElement.textContent.length !== 0\n || this.element.querySelectorAll('.e-toolbar-item.e-active').length > 0) {\n this.notify(events.toolbarRefresh, { args: e });\n }\n if (!isNOU(this.placeholder)) {\n if (!(e.key === 'Enter' && e.keyCode === 13) && (this.inputElement.innerHTML === '
' || this.inputElement.innerHTML === '
' ||\n this.inputElement.innerHTML === '
')) {\n this.setPlaceHolder();\n }\n }\n };\n /**\n * @param {string} value - specifies the value.\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.serializeValue = function (value) {\n if (this.editorMode === 'HTML' && !isNOU(value)) {\n if (this.enableHtmlEncode) {\n value = this.htmlEditorModule.sanitizeHelper(decode(value));\n value = this.encode(value);\n }\n else {\n value = this.htmlEditorModule.sanitizeHelper(value);\n }\n }\n return value;\n };\n /**\n * This method will clean up the HTML against cross-site scripting attack and return the HTML as string.\n * It's only applicable to editorMode as `HTML`.\n *\n * @param {string} value - Specifies the value that you want to sanitize.\n * @returns {string} - specifies the the string value\n */\n RichTextEditor.prototype.sanitizeHtml = function (value) {\n return this.serializeValue(value);\n };\n /**\n * updateValue method\n *\n * @param {string} value - specifies the string value.\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.updateValue = function (value) {\n if (isNOU(value)) {\n var inputVal = this.inputElement.innerHTML;\n this.setProperties({ value: isEditableValueEmpty(inputVal) ? null : inputVal });\n }\n else {\n this.setProperties({ value: value });\n }\n };\n RichTextEditor.prototype.triggerEditArea = function (e) {\n if (!isIDevice()) {\n this.notify(events.editAreaClick, { member: 'editAreaClick', args: e });\n }\n else {\n var touch = (e.touches ? e.changedTouches[0] : e);\n if (this.clickPoints.clientX === touch.clientX && this.clickPoints.clientY === touch.clientY) {\n this.notify(events.editAreaClick, { member: 'editAreaClick', args: e });\n }\n }\n };\n RichTextEditor.prototype.notifyMouseUp = function (e) {\n var touch = (e.touches ? e.changedTouches[0] : e);\n this.notify(events.mouseUp, { member: 'mouseUp', args: e,\n touchData: { prevClientX: this.clickPoints.clientX, prevClientY: this.clickPoints.clientY,\n clientX: touch.clientX, clientY: touch.clientY }\n });\n if (this.inputElement && ((this.editorMode === 'HTML' && this.inputElement.textContent.length !== 0) ||\n (this.editorMode === 'Markdown' && this.inputElement.value.length !== 0))) {\n this.notify(events.toolbarRefresh, { args: e });\n }\n this.triggerEditArea(e);\n };\n RichTextEditor.prototype.mouseUp = function (e) {\n if (this.quickToolbarSettings.showOnRightClick && Browser.isDevice) {\n var target = e.target;\n var closestTable = closest(target, 'table');\n if (target && target.nodeName === 'A' || target.nodeName === 'IMG' || (target.nodeName === 'TD' || target.nodeName === 'TH' ||\n target.nodeName === 'TABLE' || (closestTable && this.contentModule.getEditPanel().contains(closestTable)))) {\n return;\n }\n }\n this.notifyMouseUp(e);\n if (e.detail === 3) {\n var range = this.getRange();\n var selection = this.formatter.editorManager.domNode.getSelection();\n if (/\\s+$/.test(selection.toString())) {\n if (!isNOU(range.startContainer.parentElement) && (!isNOU(range.startContainer.parentElement.nextSibling) &&\n (range.startContainer.parentElement.nextSibling.nodeType !== 3 ||\n /\\s+$/.test(range.startContainer.parentElement.nextSibling.textContent)) || range.startOffset === range.endOffset)\n || range.startContainer.parentElement.tagName.toLocaleLowerCase() === 'li') {\n range.setStart(range.startContainer, range.startOffset);\n range.setEnd(range.startContainer, range.startContainer.textContent.length);\n }\n }\n }\n };\n /**\n * @param {Function} module - specifies the module function.\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.ensureModuleInjected = function (module) {\n return this.getInjectedModules().indexOf(module) >= 0;\n };\n /**\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.onCopy = function () {\n this.contentModule.getDocument().execCommand('copy', false, null);\n };\n /**\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.onCut = function () {\n this.contentModule.getDocument().execCommand('cut', false, null);\n };\n /**\n * @param {KeyboardEvent} e - specifies the keyboard event.\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.onPaste = function (e) {\n var _this = this;\n var evenArgs = {\n originalEvent: e,\n cancel: false,\n requestType: 'Paste'\n };\n this.trigger(events.actionBegin, evenArgs, function (pasteArgs) {\n var currentLength = _this.getText().trim().length;\n var selectionLength = _this.getSelection().length;\n var pastedContentLength = (isNOU(e) || isNOU(e.clipboardData))\n ? 0 : e.clipboardData.getData('text/plain').length;\n var totalLength = (currentLength - selectionLength) + pastedContentLength;\n if (_this.editorMode === 'Markdown') {\n if (!(_this.maxLength === -1 || totalLength <= _this.maxLength)) {\n e.preventDefault();\n }\n return;\n }\n if (!pasteArgs.cancel && _this.inputElement.contentEditable === 'true' &&\n (_this.maxLength === -1 || totalLength <= _this.maxLength)) {\n if (!isNOU(_this.pasteCleanupModule)) {\n _this.notify(events.pasteClean, { args: e });\n }\n else {\n var args_1 = { requestType: 'Paste', editorMode: _this.editorMode, event: e };\n var value = null;\n var htmlValue = false;\n if (e && !isNOU(e.clipboardData)) {\n value = e.clipboardData.getData('text/plain');\n htmlValue = e.clipboardData.getData('text/html').indexOf('MsoNormal') > 0;\n }\n var file = e && e.clipboardData && e.clipboardData.items.length > 0 ?\n e.clipboardData.items[0].getAsFile() : null;\n if (value !== null) {\n _this.notify(events.paste, {\n file: file,\n args: e,\n text: value,\n isWordPaste: htmlValue\n });\n }\n setTimeout(function () {\n _this.formatter.onSuccess(_this, args_1);\n }, 0);\n }\n }\n else {\n e.preventDefault();\n }\n });\n };\n /**\n * @param {string} action - specifies the string value.\n * @param {MouseEvent} event - specifies the event.\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.clipboardAction = function (action, event) {\n switch (action.toLowerCase()) {\n case 'cut':\n this.onCut();\n this.formatter.onSuccess(this, {\n requestType: 'Cut',\n editorMode: this.editorMode,\n event: event\n });\n break;\n case 'copy':\n this.onCopy();\n this.formatter.onSuccess(this, {\n requestType: 'Copy',\n editorMode: this.editorMode,\n event: event\n });\n break;\n case 'paste':\n this.onPaste(event);\n break;\n }\n };\n /**\n * Destroys the component (detaches/removes all event handlers, attributes, classes, and empties the component element).\n *\n * @returns {void}\n */\n RichTextEditor.prototype.destroy = function () {\n if (this.isDestroyed || !this.isRendered) {\n return;\n }\n if (this.element.offsetParent === null && !isNOU(this.toolbarModule)) {\n this.toolbarModule.destroy();\n return;\n }\n this.notify(events.destroy, {});\n this.destroyDependentModules();\n if (!isNOU(this.timeInterval)) {\n clearInterval(this.timeInterval);\n this.timeInterval = null;\n }\n this.unWireEvents();\n if (this.originalElement.tagName === 'TEXTAREA') {\n this.element.parentElement.insertBefore(this.valueContainer, this.element);\n this.valueContainer.id = this.getID();\n this.valueContainer.removeAttribute('name');\n detach(this.element);\n if (this.originalElement.innerHTML.trim() !== '') {\n this.valueContainer.value = this.originalElement.innerHTML.trim();\n this.setProperties({ value: (!isNOU(this.initialValue) ? this.initialValue : null) }, true);\n }\n else {\n this.valueContainer.value = this.valueContainer.defaultValue;\n }\n this.element = this.valueContainer;\n for (var i = 0; i < this.originalElement.classList.length; i++) {\n addClass([this.element], this.originalElement.classList[i]);\n }\n removeClass([this.element], classes.CLS_RTE_HIDDEN);\n }\n else {\n if (this.originalElement.innerHTML.trim() !== '') {\n this.element.innerHTML = this.originalElement.innerHTML.trim();\n this.setProperties({ value: (!isNOU(this.initialValue) ? this.initialValue : null) }, true);\n }\n else {\n this.element.innerHTML = '';\n }\n }\n if (this.placeholder && this.placeHolderWrapper) {\n this.placeHolderWrapper = null;\n }\n if (!isNOU(this.cssClass)) {\n var allClassName = this.cssClass.split(' ');\n for (var i = 0; i < allClassName.length; i++) {\n if (allClassName[i].trim() !== '') {\n removeClass([this.element], allClassName[i]);\n }\n }\n }\n this.removeHtmlAttributes();\n this.removeAttributes();\n _super.prototype.destroy.call(this);\n this.isRendered = false;\n if (this.enablePersistence) {\n window.localStorage.removeItem(this.getModuleName() + this.element.id);\n }\n };\n RichTextEditor.prototype.removeHtmlAttributes = function () {\n if (this.htmlAttributes) {\n var keys = Object.keys(this.htmlAttributes);\n for (var i = 0; i < keys.length && this.element.hasAttribute(keys[i]); i++) {\n this.element.removeAttribute(keys[i]);\n }\n }\n };\n RichTextEditor.prototype.removeAttributes = function () {\n if (!this.enabled) {\n removeClass([this.element], classes.CLS_DISABLED);\n }\n if (this.enableRtl) {\n removeClass([this.element], classes.CLS_RTL);\n }\n if (this.readonly) {\n removeClass([this.element], classes.CLS_RTE_READONLY);\n }\n if (this.element.style.width !== '' && this.originalElement.style.width === '') {\n this.element.style.removeProperty('width');\n }\n if (this.element.style.height !== '' && this.originalElement.style.height === '') {\n this.element.style.removeProperty('height');\n }\n this.element.removeAttribute('aria-disabled');\n this.element.removeAttribute('role');\n this.element.removeAttribute('tabindex');\n };\n RichTextEditor.prototype.destroyDependentModules = function () {\n /* destroy dependent modules */\n this.renderModule.destroy();\n this.formatter.editorManager.undoRedoManager.destroy();\n this.sourceCodeModule.destroy();\n };\n /**\n * Returns the HTML or Text inside the RichTextEditor.\n *\n * @returns {Element} - specifies the element.\n */\n RichTextEditor.prototype.getContent = function () {\n return this.contentModule.getPanel();\n };\n /**\n * Returns the text content as string.\n *\n * @returns {string} - specifies the string value.\n */\n RichTextEditor.prototype.getText = function () {\n return this.contentModule.getText();\n };\n /**\n * Returns the html value of the selected content as string.\n *\n * @returns {string} - specifies the string value.\n */\n RichTextEditor.prototype.getSelectedHtml = function () {\n var range;\n var wrapperElm = this.createElement('div');\n var selection = this.contentModule.getDocument().getSelection();\n if (selection.rangeCount > 0) {\n range = selection.getRangeAt(0);\n var selectedHtml = range.cloneContents();\n wrapperElm.appendChild(selectedHtml);\n }\n return wrapperElm.innerHTML;\n };\n /**\n * It shows the inline quick toolbar\n *\n * @returns {void}\n */\n RichTextEditor.prototype.showInlineToolbar = function () {\n if (this.inlineMode.enable) {\n var currentRange = this.getRange();\n var targetElm = currentRange.endContainer.nodeName === '#text' ?\n currentRange.endContainer.parentElement : currentRange.endContainer;\n var x = currentRange.getClientRects()[0].left;\n var y = currentRange.getClientRects()[0].top;\n this.quickToolbarModule.showInlineQTBar(x, y, targetElm);\n }\n };\n /**\n * It hides the inline quick toolbar\n *\n * @returns {void}\n */\n RichTextEditor.prototype.hideInlineToolbar = function () {\n this.quickToolbarModule.hideInlineQTBar();\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {void}\n * @private\n\n */\n RichTextEditor.prototype.getModuleName = function () {\n return 'richtexteditor';\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {RichTextEditorModel} newProp - specifies the the property.\n * @param {RichTextEditorModel} oldProp - specifies the old property.\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'enterKey':\n case 'value': {\n var nVal = void 0;\n if (prop === 'enterKey') {\n if (this.value === null || this.value === '
' || this.value === '
' ||\n this.value === '
') {\n nVal = null;\n }\n else {\n nVal = this.value;\n }\n }\n else {\n nVal = newProp[prop];\n }\n var val = this.editorMode === 'HTML' ? getEditValue(nVal, this) : nVal;\n if ((!isNOU(nVal) && nVal !== '') || prop === 'enterKey') {\n this.value = this.serializeValue(((this.enableHtmlEncode) ? this.encode(decode(val)) : val));\n }\n this.updatePanelValue();\n this.setPlaceHolder();\n this.notify(events.xhtmlValidation, { module: 'XhtmlValidation', newProp: newProp, oldProp: oldProp });\n if (this.enableXhtml) {\n this.setProperties({ value: this.getXhtml() }, true);\n }\n if (this.showCharCount) {\n this.countModule.refresh();\n }\n break;\n }\n case 'valueTemplate':\n this.setValue();\n if (this.showCharCount) {\n this.countModule.refresh();\n }\n break;\n case 'width':\n this.setWidth(newProp[prop]);\n if (this.toolbarSettings.enable && !this.inlineMode.enable) {\n this.toolbarModule.refreshToolbarOverflow();\n this.resizeHandler();\n }\n break;\n case 'height':\n this.setHeight(newProp[prop]);\n this.setContentHeight();\n this.autoResize();\n break;\n case 'readonly':\n this.setReadOnly(false);\n break;\n case 'cssClass':\n this.element.classList.remove(oldProp[prop]);\n this.setCssClass(newProp[prop]);\n break;\n case 'enabled':\n this.setEnable();\n break;\n case 'enableRtl':\n this.updateRTL();\n break;\n case 'placeholder':\n this.placeholder = newProp[prop];\n this.setPlaceHolder();\n break;\n case 'htmlAttributes':\n setAttributes(this.htmlAttributes, this, false, false);\n break;\n case 'iframeSettings': {\n var frameSetting = oldProp[prop];\n if (frameSetting.resources) {\n var iframe = this.contentModule.getDocument();\n var header = iframe.querySelector('head');\n var files = void 0;\n if (frameSetting.resources.scripts) {\n files = header.querySelectorAll('.' + classes.CLS_SCRIPT_SHEET);\n this.removeSheets(files);\n }\n if (frameSetting.resources.styles) {\n files = header.querySelectorAll('.' + classes.CLS_STYLE_SHEET);\n this.removeSheets(files);\n }\n }\n this.setIframeSettings();\n break;\n }\n case 'locale':\n _super.prototype.refresh.call(this);\n break;\n case 'inlineMode':\n this.notify(events.modelChanged, { module: 'quickToolbar', newProp: newProp, oldProp: oldProp });\n this.setContentHeight();\n break;\n case 'toolbarSettings':\n this.notify(events.modelChanged, { module: 'toolbar', newProp: newProp, oldProp: oldProp });\n this.setContentHeight();\n break;\n case 'maxLength':\n if (this.showCharCount) {\n this.countModule.refresh();\n }\n break;\n case 'showCharCount':\n if (newProp[prop] && this.countModule) {\n this.countModule.renderCount();\n }\n else if (newProp[prop] === false && this.countModule) {\n this.countModule.destroy();\n }\n break;\n case 'enableHtmlEncode':\n this.updateValueData();\n this.updatePanelValue();\n this.setPlaceHolder();\n if (this.showCharCount) {\n this.countModule.refresh();\n }\n break;\n case 'undoRedoSteps':\n case 'undoRedoTimer':\n this.formatter.editorManager.observer.notify(CONSTANT.MODEL_CHANGED, { newProp: newProp, oldProp: oldProp });\n break;\n case 'enableXhtml':\n this.notify(events.xhtmlValidation, { module: 'XhtmlValidation', newProp: newProp, oldProp: oldProp });\n break;\n case 'quickToolbarSettings':\n // eslint-disable-next-line\n newProp.quickToolbarSettings.showOnRightClick ? this.wireContextEvent() : this.unWireContextEvent();\n this.notify(events.modelChanged, { newProp: newProp, oldProp: oldProp });\n break;\n default:\n this.notify(events.modelChanged, { newProp: newProp, oldProp: oldProp });\n break;\n }\n }\n };\n /**\n * @hidden\n * @returns {void}\n\n */\n RichTextEditor.prototype.updateValueData = function () {\n if (this.enableHtmlEncode) {\n this.setProperties({ value: this.encode(decode(this.inputElement.innerHTML)) }, true);\n }\n else {\n this.setProperties({\n value: /<[a-z][\\s\\S]*>/i.test(this.inputElement.innerHTML) ? this.inputElement.innerHTML :\n decode(this.inputElement.innerHTML)\n });\n }\n };\n RichTextEditor.prototype.removeSheets = function (srcList) {\n var i;\n for (i = 0; i < srcList.length; i++) {\n detach(srcList[i]);\n }\n };\n RichTextEditor.prototype.updatePanelValue = function () {\n var value = this.value;\n value = (this.enableHtmlEncode && this.value) ? decode(value) : value;\n var getTextArea = this.element.querySelector('.e-rte-srctextarea');\n if (value) {\n if (getTextArea && getTextArea.style.display === 'block') {\n getTextArea.value = this.value;\n }\n if (this.valueContainer) {\n this.valueContainer.value = (this.enableHtmlEncode) ? this.value : value;\n }\n if (this.editorMode === 'HTML' && this.inputElement && this.inputElement.innerHTML.trim() !== value.trim()) {\n this.inputElement.innerHTML = value;\n }\n else if (this.editorMode === 'Markdown' && this.inputElement\n && this.inputElement.value.trim() !== value.trim()) {\n this.inputElement.value = value;\n }\n }\n else {\n if (getTextArea && getTextArea.style.display === 'block') {\n getTextArea.value = '';\n }\n if (this.editorMode === 'HTML') {\n if (this.enterKey === 'DIV') {\n this.inputElement.innerHTML = '
';\n }\n else if (this.enterKey === 'BR') {\n this.inputElement.innerHTML = '
';\n }\n else {\n this.inputElement.innerHTML = '
';\n if (value === '' && this.formatter && this.inputElement) {\n this.formatter.editorManager.nodeSelection.setCursorPoint(this.contentModule.getDocument(), this.inputElement.firstElementChild, this.inputElement.firstElementChild.childElementCount);\n }\n }\n }\n else {\n this.inputElement.value = '';\n }\n if (this.valueContainer) {\n this.valueContainer.value = '';\n }\n }\n if (this.showCharCount) {\n this.countModule.refresh();\n }\n };\n RichTextEditor.prototype.setHeight = function (height) {\n if (height !== 'auto') {\n this.element.style.height = formatUnit(height);\n }\n else {\n this.element.style.height = 'auto';\n }\n if (this.toolbarSettings.type === 'Expand' && (typeof (this.height) === 'string' &&\n this.height.indexOf('px') > -1 || typeof (this.height) === 'number')) {\n this.element.classList.add(classes.CLS_RTE_FIXED_TB_EXPAND);\n }\n else {\n this.element.classList.remove(classes.CLS_RTE_FIXED_TB_EXPAND);\n }\n };\n /**\n * setPlaceHolder method\n *\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.setPlaceHolder = function () {\n if (this.inputElement && this.placeholder && this.iframeSettings.enable !== true) {\n if (this.editorMode !== 'Markdown') {\n if (!this.placeHolderWrapper) {\n this.placeHolderWrapper = this.createElement('span', { className: 'rte-placeholder e-rte-placeholder' });\n if (this.inputElement) {\n this.inputElement.parentElement.insertBefore(this.placeHolderWrapper, this.inputElement);\n }\n attributes(this.placeHolderWrapper, {\n 'style': 'font-size: 14px; padding: 16px; margin-left: 0px; margin-right: 0px;'\n });\n }\n this.placeHolderWrapper.innerHTML = this.placeholder;\n if (this.inputElement.textContent.length === 0 && !isNOU(this.inputElement.firstChild) && (this.inputElement.firstChild.nodeName === 'BR' ||\n ((this.inputElement.firstChild.nodeName === 'P' || this.inputElement.firstChild.nodeName === 'DIV') && !isNOU(this.inputElement.firstChild.firstChild) &&\n this.inputElement.firstChild.firstChild.nodeName === 'BR'))) {\n this.placeHolderWrapper.style.display = 'block';\n }\n else {\n this.placeHolderWrapper.style.display = 'none';\n }\n }\n else {\n this.inputElement.setAttribute('placeholder', this.placeholder);\n }\n }\n };\n RichTextEditor.prototype.setWidth = function (width) {\n if (width !== 'auto') {\n setStyleAttribute(this.element, { 'width': formatUnit(this.width) });\n }\n else {\n this.element.style.width = 'auto';\n }\n };\n RichTextEditor.prototype.setCssClass = function (cssClass) {\n if (!isNOU(cssClass)) {\n var allClassName = cssClass.split(' ');\n for (var i = 0; i < allClassName.length; i++) {\n if (allClassName[i].trim() !== '') {\n this.element.classList.add(allClassName[i]);\n }\n }\n }\n };\n RichTextEditor.prototype.updateRTL = function () {\n this.notify(events.rtlMode, { enableRtl: this.enableRtl });\n if (this.enableRtl) {\n this.element.classList.add(classes.CLS_RTL);\n }\n else {\n this.element.classList.remove(classes.CLS_RTL);\n }\n };\n RichTextEditor.prototype.updateReadOnly = function () {\n this.notify(events.readOnlyMode, { editPanel: this.inputElement, mode: this.readonly });\n };\n /**\n * setReadOnly method\n *\n * @param {boolean} initial - specifies the boolean value\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.setReadOnly = function (initial) {\n this.updateReadOnly();\n if (!initial) {\n if (this.readonly && this.enabled) {\n this.unbindEvents();\n }\n else if (this.enabled) {\n this.bindEvents();\n }\n }\n };\n /**\n * By default, prints all the pages of the RichTextEditor.\n *\n * @returns {void}\n */\n RichTextEditor.prototype.print = function () {\n var _this = this;\n var printWind;\n var printArgs = {\n element: this.inputElement,\n requestType: 'print',\n cancel: false\n };\n this.trigger(events.actionBegin, printArgs, function (printingArgs) {\n printWind = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth);\n if (Browser.info.name === 'msie') {\n printWind.resizeTo(screen.availWidth, screen.availHeight);\n }\n printWind = printWindow(_this.inputElement, printWind);\n if (!printingArgs.cancel) {\n var actionArgs = {\n requestType: 'print'\n };\n _this.trigger(events.actionComplete, actionArgs);\n }\n });\n };\n /**\n * Refresh the view of the editor.\n *\n * @returns {void}\n * @public\n */\n RichTextEditor.prototype.refreshUI = function () {\n this.renderModule.refresh();\n };\n /**\n * Shows the Rich Text Editor component in full-screen mode.\n *\n * @returns {void}\n */\n RichTextEditor.prototype.showFullScreen = function () {\n this.fullScreenModule.showFullScreen();\n };\n /**\n * Enables the give toolbar items in the Rich Text Editor component.\n *\n * @returns {void}\n * @param {string | string[]} items - Specifies the single or collection of items\n * @param {boolean} muteToolbarUpdate enable/disables the toolbar item status in RichTextEditor.\n * that you want to be enable in Rich Text Editor’s Toolbar.\n *\n * @public\n */\n RichTextEditor.prototype.enableToolbarItem = function (items, muteToolbarUpdate) {\n this.toolbarModule.enableTBarItems(this.getBaseToolbarObject(), items, true, muteToolbarUpdate);\n };\n /**\n * Disables the given toolbar items in the Rich Text Editor component.\n *\n * @returns {void}\n * @param {string | string[]} items - Specifies the single or collection of items\n * @param {boolean} muteToolbarUpdate enable/disables the toolbar item status in RichTextEditor.\n * that you want to be disable in Rich Text Editor’s Toolbar.\n *\n * @public\n */\n RichTextEditor.prototype.disableToolbarItem = function (items, muteToolbarUpdate) {\n this.toolbarModule.enableTBarItems(this.getBaseToolbarObject(), items, false, muteToolbarUpdate);\n };\n /**\n * Removes the give toolbar items from the Rich Text Editor component.\n *\n * @returns {void}\n * @param {string | string[]} items - Specifies the single or collection of items\n * that you want to be remove from Rich Text Editor’s Toolbar.\n *\n * @public\n */\n RichTextEditor.prototype.removeToolbarItem = function (items) {\n this.toolbarModule.removeTBarItems(items);\n };\n /**\n * Get the selected range from the RichTextEditor's content.\n *\n * @returns {void}\n * @public\n\n */\n RichTextEditor.prototype.getRange = function () {\n return this.formatter.editorManager.nodeSelection.getRange(this.contentModule.getDocument());\n };\n RichTextEditor.prototype.initializeServices = function () {\n this.serviceLocator.register('rendererFactory', new RendererFactory);\n this.serviceLocator.register('rteLocale', this.localeObj = new L10n(this.getModuleName(), defaultLocale, this.locale));\n this.serviceLocator.register('dialogRenderObject', new DialogRenderer(this));\n };\n RichTextEditor.prototype.RTERender = function () {\n var rendererFactory = this.serviceLocator.getService('rendererFactory');\n this.contentModule = rendererFactory.getRenderer(RenderType.Content);\n this.fullScreenModule = new FullScreen(this);\n this.enterKeyModule = new EnterKeyAction(this);\n this.renderModule.render();\n this.inputElement = this.contentModule.getEditPanel();\n this.setHeight(this.height);\n setAttributes(this.htmlAttributes, this, false, true);\n if (this.iframeSettings) {\n this.setIframeSettings();\n }\n this.setCssClass(this.cssClass);\n this.updateEnable();\n this.setPlaceHolder();\n this.updateRTL();\n this.updateReadOnly();\n this.updatePanelValue();\n if (this.enableHtmlEncode && !isNOU(this.value)) {\n this.setProperties({ value: this.encode(decode(this.value)) });\n }\n };\n RichTextEditor.prototype.setIframeSettings = function () {\n if (this.iframeSettings.resources) {\n var styleSrc = this.iframeSettings.resources.styles;\n var scriptSrc = this.iframeSettings.resources.scripts;\n if (this.iframeSettings.resources.scripts.length > 0) {\n this.InjectSheet(true, scriptSrc);\n }\n if (this.iframeSettings.resources.styles.length > 0) {\n this.InjectSheet(false, styleSrc);\n }\n }\n if (this.iframeSettings.attributes) {\n setAttributes(this.iframeSettings.attributes, this, true, false);\n }\n };\n RichTextEditor.prototype.InjectSheet = function (scriptSheet, srcList) {\n try {\n if (srcList && srcList.length > 0) {\n var iFrame = this.contentModule.getDocument();\n var target = iFrame.querySelector('head');\n for (var i = 0; i < srcList.length; i++) {\n if (scriptSheet) {\n var scriptEle = this.createScriptElement();\n scriptEle.src = srcList[i];\n target.appendChild(scriptEle);\n }\n else {\n var styleEle = this.createStyleElement();\n styleEle.href = srcList[i];\n target.appendChild(styleEle);\n }\n }\n }\n }\n catch (e) {\n return;\n }\n };\n RichTextEditor.prototype.createScriptElement = function () {\n var scriptEle = this.createElement('script', {\n className: classes.CLS_SCRIPT_SHEET\n });\n scriptEle.type = 'text/javascript';\n return scriptEle;\n };\n RichTextEditor.prototype.createStyleElement = function () {\n var styleEle = this.createElement('link', {\n className: classes.CLS_STYLE_SHEET\n });\n styleEle.rel = 'stylesheet';\n return styleEle;\n };\n RichTextEditor.prototype.setValue = function () {\n if (this.valueTemplate) {\n if (typeof this.valueTemplate === 'string') {\n this.setProperties({ value: this.valueTemplate });\n }\n else {\n var compiledTemplate = compile(this.valueTemplate)(\"\", this, 'valueTemplate');\n for (var i = 0; i < compiledTemplate.length; i++) {\n var item = compiledTemplate[i];\n append([item], this.element);\n }\n this.setProperties({ value: this.element.innerHTML.trim() });\n }\n }\n else {\n // eslint-disable-next-line\n var innerHtml = !isNOU(this.element.innerHTML) && this.element.innerHTML.replace(/<(\\/?|\\!?)(!--!--)>/g, '').trim();\n if (innerHtml !== '') {\n if (this.element.tagName === 'TEXTAREA') {\n this.setProperties({ value: decode(innerHtml) });\n }\n else {\n this.setProperties({ value: innerHtml });\n }\n }\n }\n };\n RichTextEditor.prototype.updateResizeFlag = function () {\n this.isResizeInitialized = true;\n };\n /**\n * Image max width calculation method\n *\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.getInsertImgMaxWidth = function () {\n var maxWidth = this.insertImageSettings.maxWidth;\n // eslint-disable-next-line\n var imgPadding = 12;\n var imgResizeBorder = 2;\n var editEle = this.contentModule.getEditPanel();\n var eleStyle = window.getComputedStyle(editEle);\n var editEleMaxWidth = editEle.offsetWidth - (imgPadding + imgResizeBorder +\n parseFloat(eleStyle.paddingLeft.split('px')[0]) + parseFloat(eleStyle.paddingRight.split('px')[0]) +\n parseFloat(eleStyle.marginLeft.split('px')[0]) + parseFloat(eleStyle.marginRight.split('px')[0]));\n return isNOU(maxWidth) ? editEleMaxWidth : maxWidth;\n };\n /**\n * setContentHeight method\n *\n * @param {string} target - specifies the target value.\n * @param {boolean} isExpand - specifies the bollean value.\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.setContentHeight = function (target, isExpand) {\n var heightValue;\n var topValue = 0;\n var rteHeightPercent;\n var heightPercent = typeof (this.height) === 'string' && this.height.indexOf('%') > -1;\n var cntEle = (this.sourceCodeModule.getPanel() &&\n this.sourceCodeModule.getPanel().parentElement.style.display === 'block') ? this.sourceCodeModule.getPanel().parentElement :\n this.contentModule.getPanel();\n var rteHeight = this.element.offsetHeight;\n if (rteHeight === 0 && this.height !== 'auto' && !this.getToolbar()) {\n rteHeight = parseInt(this.height, 10);\n if (heightPercent) {\n rteHeightPercent = this.height;\n }\n }\n var tbHeight = this.getToolbar() ? this.toolbarModule.getToolbarHeight() : 0;\n var rzHandle = this.element.querySelector('.' + classes.CLS_RTE_RES_HANDLE);\n var rzHeight = this.enableResize ? (!isNOU(rzHandle) ? (rzHandle.offsetHeight + 8) : 0) : 0;\n var expandPopHeight = this.getToolbar() ? this.toolbarModule.getExpandTBarPopHeight() : 0;\n if (this.toolbarSettings.type === ToolbarType.Expand && isExpand && target !== 'preview') {\n heightValue = (this.height === 'auto' && rzHeight === 0) ? 'auto' : rteHeight - (tbHeight + expandPopHeight + rzHeight) + 'px';\n topValue = (!this.toolbarSettings.enableFloating) ? expandPopHeight : 0;\n }\n else {\n if (this.height === 'auto' && !(this.element.classList.contains('e-rte-full-screen')) && !this.isResizeInitialized) {\n heightValue = 'auto';\n }\n else {\n heightValue = heightPercent && rteHeightPercent ? rteHeightPercent : rteHeight - (tbHeight + rzHeight) + 'px';\n }\n }\n if (target !== 'windowResize') {\n if (this.iframeSettings.enable) {\n if (heightValue !== 'auto') {\n setStyleAttribute(cntEle, { height: heightValue, marginTop: topValue + 'px' });\n }\n }\n else {\n setStyleAttribute(cntEle, { height: heightValue, marginTop: topValue + 'px' });\n }\n }\n if (this.iframeSettings.enable && target === 'sourceCode') {\n var codeElement = select('.' + classes.CLS_RTE_CONTENT, this.element);\n setStyleAttribute(codeElement, { height: heightValue, marginTop: topValue + 'px' });\n }\n if (this.toolbarSettings.enableFloating && this.getToolbar() && !this.inlineMode.enable) {\n var tbWrapHeight = (isExpand ? (tbHeight + expandPopHeight) : tbHeight) + 'px';\n setStyleAttribute(this.getToolbar().parentElement, { height: tbWrapHeight });\n }\n if (rzHeight === 0) {\n this.autoResize();\n }\n };\n /**\n * Retrieves the HTML from RichTextEditor.\n *\n * @returns {void}\n * @public\n */\n RichTextEditor.prototype.getHtml = function () {\n return this.serializeValue(this.contentModule.getEditPanel().innerHTML);\n };\n /**\n * Retrieves the Rich Text Editor's XHTML validated HTML content when `enableXhtml` property is enabled.\n *\n * @returns {void}\n * @public\n */\n RichTextEditor.prototype.getXhtml = function () {\n var currentValue = this.value;\n if (!isNOU(currentValue) && this.enableXhtml) {\n currentValue = this.htmlEditorModule.xhtmlValidation.selfEncloseValidation(currentValue);\n }\n return currentValue;\n };\n /**\n * Shows the source HTML/MD markup.\n *\n * @returns {void}\n * @public\n */\n RichTextEditor.prototype.showSourceCode = function () {\n if (this.readonly) {\n return;\n }\n this.notify(events.sourceCode, {});\n };\n /**\n * Returns the maximum number of characters in the Rich Text Editor.\n *\n * @returns {void}\n * @public\n */\n RichTextEditor.prototype.getCharCount = function () {\n var htmlText = this.editorMode === 'Markdown' ? this.inputElement.value.trim() :\n this.inputElement.textContent.trim();\n var htmlLength;\n if (this.editorMode !== 'Markdown' && htmlText.indexOf('\\u200B') !== -1) {\n htmlLength = htmlText.replace(/\\u200B/g, '').length;\n }\n else {\n htmlLength = htmlText.length;\n }\n return htmlLength;\n };\n /**\n * Show the dialog in the Rich Text Editor.\n *\n * @param {DialogType} type - specifies the dialog type.\n * @returns {void}\n * @public\n */\n RichTextEditor.prototype.showDialog = function (type) {\n if (type === DialogType.InsertLink) {\n this.notify(events.showLinkDialog, {});\n }\n else if (type === DialogType.InsertImage) {\n this.notify(events.showImageDialog, {});\n }\n else if (type === DialogType.InsertTable) {\n this.notify(events.showTableDialog, {});\n }\n };\n /**\n * Close the dialog in the Rich Text Editor.\n *\n * @param {DialogType} type - specifies the dialog type.\n * @returns {void}\n * @public\n */\n RichTextEditor.prototype.closeDialog = function (type) {\n if (type === DialogType.InsertLink) {\n this.notify(events.closeLinkDialog, {});\n }\n else if (type === DialogType.InsertImage) {\n this.notify(events.closeImageDialog, {});\n }\n else if (type === DialogType.InsertTable) {\n this.notify(events.closeTableDialog, {});\n }\n };\n /**\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.getBaseToolbarObject = function () {\n var tbObj;\n if (this.inlineMode.enable && (!Browser.isDevice || isIDevice())) {\n tbObj = this.quickToolbarModule && this.quickToolbarModule.getInlineBaseToolbar();\n }\n else {\n tbObj = this.toolbarModule && this.toolbarModule.getBaseToolbar();\n }\n return tbObj;\n };\n /**\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.getToolbar = function () {\n return this.toolbarModule ? this.toolbarModule.getToolbarElement() : null;\n };\n /**\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.getToolbarElement = function () {\n return this.toolbarModule && this.toolbarModule.getToolbarElement();\n };\n /**\n * @returns {void}\n * getID method\n *\n * @hidden\n\n */\n RichTextEditor.prototype.getID = function () {\n return (this.originalElement.tagName === 'TEXTAREA' ? this.valueContainer.id : this.element.id);\n };\n RichTextEditor.prototype.mouseDownHandler = function (e) {\n var touch = (e.touches ? e.changedTouches[0] : e);\n addClass([this.element], [classes.CLS_FOCUS]);\n this.preventDefaultResize(e);\n this.notify(events.mouseDown, { args: e });\n this.clickPoints = { clientX: touch.clientX, clientY: touch.clientY };\n };\n RichTextEditor.prototype.preventImgResize = function (e) {\n if (e.target.nodeName.toLocaleLowerCase() === 'img') {\n e.preventDefault();\n }\n };\n /**\n * preventDefaultResize method\n *\n * @param {FocusEvent} e - specifies the event.\n * @returns {void}\n * @hidden\n\n */\n // eslint-disable-next-line\n RichTextEditor.prototype.preventDefaultResize = function (e) {\n if (Browser.info.name === 'msie') {\n this.contentModule.getEditPanel().addEventListener('mscontrolselect', this.preventImgResize);\n }\n else if (Browser.info.name === 'mozilla') {\n this.contentModule.getDocument().execCommand('enableObjectResizing', false, 'false');\n this.contentModule.getDocument().execCommand('enableInlineTableEditing', false, 'false');\n }\n };\n // eslint-disable-next-line\n RichTextEditor.prototype.defaultResize = function (e) {\n if (Browser.info.name === 'msie') {\n this.contentModule.getEditPanel().removeEventListener('mscontrolselect', this.preventImgResize);\n }\n else if (Browser.info.name === 'mozilla') {\n this.contentModule.getDocument().execCommand('enableObjectResizing', true, 'true');\n this.contentModule.getDocument().execCommand('enableInlineTableEditing', true, 'true');\n }\n };\n RichTextEditor.prototype.resizeHandler = function () {\n var isExpand = false;\n if (!document.body.contains(this.element)) {\n document.defaultView.removeEventListener('resize', this.onResizeHandler, true);\n return;\n }\n if (this.toolbarSettings.enable && !this.inlineMode.enable) {\n this.toolbarModule.refreshToolbarOverflow();\n isExpand = this.toolbarModule.baseToolbar.toolbarObj.element.classList.contains(classes.CLS_EXPAND_OPEN);\n }\n this.setContentHeight('windowResize', isExpand);\n this.notify(events.windowResize, null);\n };\n RichTextEditor.prototype.scrollHandler = function (e) {\n this.notify(events.scroll, { args: e });\n };\n RichTextEditor.prototype.contentScrollHandler = function (e) {\n this.notify(events.contentscroll, { args: e });\n };\n RichTextEditor.prototype.focusHandler = function (e) {\n if ((!this.isRTE || this.isFocusOut)) {\n this.isRTE = this.isFocusOut ? false : true;\n this.isFocusOut = false;\n addClass([this.element], [classes.CLS_FOCUS]);\n if (this.editorMode === 'HTML') {\n this.cloneValue = (this.inputElement.innerHTML === '
' || this.inputElement.innerHTML === '
' ||\n this.inputElement.innerHTML === '
') ? null : this.enableHtmlEncode ?\n this.encode(decode(this.inputElement.innerHTML)) : this.inputElement.innerHTML;\n }\n else {\n this.cloneValue = this.inputElement.value === '' ? null :\n this.inputElement.value;\n }\n var active = document.activeElement;\n if (active === this.element || active === this.getToolbarElement() || active === this.contentModule.getEditPanel()\n || ((this.iframeSettings.enable && active === this.contentModule.getPanel()) &&\n e.target && !e.target.classList.contains('e-img-inner')\n && (e.target && e.target.parentElement\n && !e.target.parentElement.classList.contains('e-img-wrap')))\n || closest(active, '.e-rte-toolbar') === this.getToolbarElement()) {\n this.contentModule.getEditPanel().focus();\n if (!isNOU(this.getToolbarElement())) {\n this.getToolbarElement().setAttribute('tabindex', '-1');\n var items = this.getToolbarElement().querySelectorAll('[tabindex=\"0\"]');\n for (var i = 0; i < items.length; i++) {\n items[i].setAttribute('tabindex', '-1');\n }\n }\n }\n this.preventDefaultResize(e);\n this.trigger('focus', { event: e, isInteracted: Object.keys(e).length === 0 ? false : true });\n if (!isNOU(this.saveInterval) && this.saveInterval > 0 && !this.autoSaveOnIdle) {\n this.timeInterval = setInterval(this.updateValueOnIdle.bind(this), this.saveInterval);\n }\n EventHandler.add(document, 'mousedown', this.onDocumentClick, this);\n }\n if (!isNOU(this.getToolbarElement())) {\n var toolbarItem = this.getToolbarElement().querySelectorAll('input,select,button,a,[tabindex]');\n for (var i = 0; i < toolbarItem.length; i++) {\n if ((!toolbarItem[i].classList.contains('e-rte-dropdown-btn') &&\n !toolbarItem[i].classList.contains('e-insert-table-btn')) &&\n (!toolbarItem[i].hasAttribute('tabindex') ||\n toolbarItem[i].getAttribute('tabindex') !== '-1')) {\n toolbarItem[i].setAttribute('tabindex', '-1');\n }\n }\n }\n };\n RichTextEditor.prototype.getUpdatedValue = function () {\n var value;\n if (!isNOU(this.tableModule)) {\n this.tableModule.removeResizeElement();\n }\n var getTextArea = this.element.querySelector('.e-rte-srctextarea');\n if (this.editorMode === 'HTML') {\n value = (this.inputElement.innerHTML === '
' || this.inputElement.innerHTML === '
' ||\n this.inputElement.innerHTML === '
') ? null : this.enableHtmlEncode ?\n this.encode(decode(this.inputElement.innerHTML)) : this.inputElement.innerHTML;\n if (getTextArea && getTextArea.style.display === 'block') {\n value = getTextArea.value;\n }\n }\n else {\n value = this.inputElement.value === '' ? null :\n this.inputElement.value;\n }\n return value;\n };\n RichTextEditor.prototype.updateValueOnIdle = function () {\n if (!isNOU(this.tableModule) && !isNOU(this.inputElement.querySelector('.e-table-box.e-rbox-select'))) {\n return;\n }\n this.setProperties({ value: this.getUpdatedValue() }, true);\n this.valueContainer.value = this.value;\n this.invokeChangeEvent();\n };\n RichTextEditor.prototype.updateIntervalValue = function () {\n clearTimeout(this.idleInterval);\n this.idleInterval = setTimeout(this.updateValueOnIdle.bind(this), 0);\n };\n RichTextEditor.prototype.updateStatus = function (e) {\n if (!isNOU(e.html) || !isNOU(e.markdown)) {\n var status_1 = this.formatter.editorManager.undoRedoManager.getUndoStatus();\n var eventArgs = {\n undo: status_1.undo,\n redo: status_1.redo,\n html: e.html,\n markdown: e.markdown\n };\n this.trigger(events.updatedToolbarStatus, eventArgs);\n }\n };\n RichTextEditor.prototype.onDocumentClick = function (e) {\n var target = e.target;\n var rteElement = closest(target, '.' + classes.CLS_RTE);\n if (!this.element.contains(e.target) && document !== e.target && rteElement !== this.element &&\n !closest(target, '[aria-owns=\"' + this.getID() + '\"]')) {\n this.isBlur = true;\n this.isRTE = false;\n }\n this.notify(events.docClick, { args: e });\n if (Browser.info.name !== 'msie' && e.detail > 3) {\n e.preventDefault();\n }\n };\n RichTextEditor.prototype.blurHandler = function (e) {\n var trg = e.relatedTarget;\n if (trg) {\n var rteElement = closest(trg, '.' + classes.CLS_RTE);\n if (rteElement && rteElement === this.element) {\n this.isBlur = false;\n if (trg === this.getToolbarElement()) {\n trg.setAttribute('tabindex', '-1');\n }\n }\n else if (closest(trg, '[aria-owns=\"' + this.getID() + '\"]')) {\n this.isBlur = false;\n }\n else {\n this.isBlur = true;\n trg = null;\n }\n }\n if (this.isBlur && isNOU(trg)) {\n removeClass([this.element], [classes.CLS_FOCUS]);\n this.notify(events.focusChange, {});\n var value = this.getUpdatedValue();\n this.setProperties({ value: value });\n this.notify(events.toolbarRefresh, { args: e, documentNode: document });\n this.invokeChangeEvent();\n this.isFocusOut = true;\n this.isBlur = false;\n dispatchEvent(this.valueContainer, 'focusout');\n this.defaultResize(e);\n this.trigger('blur', { event: e, isInteracted: Object.keys(e).length === 0 ? false : true });\n if (!isNOU(this.timeInterval)) {\n clearInterval(this.timeInterval);\n this.timeInterval = null;\n }\n EventHandler.remove(document, 'mousedown', this.onDocumentClick);\n }\n else {\n this.isRTE = true;\n }\n };\n /**\n * invokeChangeEvent method\n *\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.contentChanged = function () {\n if (this.autoSaveOnIdle) {\n if (!isNOU(this.saveInterval)) {\n clearTimeout(this.timeInterval);\n this.timeInterval = setTimeout(this.updateIntervalValue.bind(this), this.saveInterval);\n }\n }\n };\n /**\n * invokeChangeEvent method\n *\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.invokeChangeEvent = function () {\n var currentValue;\n if (this.enableXhtml) {\n currentValue = this.getXhtml();\n }\n else {\n currentValue = this.value;\n }\n var eventArgs = {\n value: currentValue\n };\n if (this.value !== this.cloneValue) {\n this.trigger('change', eventArgs);\n this.cloneValue = this.value;\n }\n };\n /**\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.wireScrollElementsEvents = function () {\n this.scrollParentElements = getScrollableParent(this.element);\n for (var _i = 0, _a = this.scrollParentElements; _i < _a.length; _i++) {\n var element = _a[_i];\n EventHandler.add(element, 'scroll', this.scrollHandler, this);\n }\n if (!this.iframeSettings.enable) {\n EventHandler.add(this.contentModule.getPanel(), 'scroll', this.contentScrollHandler, this);\n }\n };\n RichTextEditor.prototype.wireContextEvent = function () {\n if (this.quickToolbarSettings.showOnRightClick) {\n EventHandler.add(this.inputElement, 'contextmenu', this.contextHandler, this);\n if (Browser.isDevice) {\n this.touchModule = new EJ2Touch(this.inputElement, { tapHold: this.touchHandler.bind(this), tapHoldThreshold: 500 });\n }\n }\n };\n RichTextEditor.prototype.unWireContextEvent = function () {\n EventHandler.remove(this.inputElement, 'contextmenu', this.contextHandler);\n if (Browser.isDevice && this.touchModule) {\n this.touchModule.destroy();\n }\n };\n /**\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.unWireScrollElementsEvents = function () {\n this.scrollParentElements = getScrollableParent(this.element);\n for (var _i = 0, _a = this.scrollParentElements; _i < _a.length; _i++) {\n var element = _a[_i];\n EventHandler.remove(element, 'scroll', this.scrollHandler);\n }\n if (!this.iframeSettings.enable) {\n EventHandler.remove(this.contentModule.getPanel(), 'scroll', this.contentScrollHandler);\n }\n };\n RichTextEditor.prototype.touchHandler = function (e) {\n this.notifyMouseUp(e.originalEvent);\n this.triggerEditArea(e.originalEvent);\n };\n RichTextEditor.prototype.contextHandler = function (e) {\n var closestElem = closest(e.target, 'a, table, img');\n if (this.inlineMode.onSelection === false || (!isNOU(closestElem) && this.inputElement.contains(closestElem)\n && (closestElem.tagName === 'IMG' || closestElem.tagName === 'TABLE' || closestElem.tagName === 'A'))) {\n e.preventDefault();\n }\n };\n RichTextEditor.prototype.resetHandler = function () {\n var defaultValue = this.valueContainer.defaultValue.trim();\n this.setProperties({ value: defaultValue === '' ? null : defaultValue });\n };\n /**\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.autoResize = function () {\n var _this = this;\n if (this.height === 'auto') {\n if (this.editorMode === 'Markdown') {\n setTimeout(function () {\n _this.setAutoHeight(_this.inputElement);\n }, 0);\n }\n else if (this.iframeSettings.enable) {\n var iframeElement_1 = this.element.querySelector('#' + this.getID() + '_rte-view');\n setTimeout(function () {\n _this.setAutoHeight(iframeElement_1);\n }, 100);\n this.inputElement.style.overflow = 'hidden';\n }\n }\n else {\n this.inputElement.style.overflow = null;\n }\n };\n RichTextEditor.prototype.setAutoHeight = function (element) {\n if (!isNOU(element)) {\n element.style.height = '';\n element.style.height = this.inputElement.scrollHeight + 'px';\n element.style.overflow = 'hidden';\n }\n };\n RichTextEditor.prototype.wireEvents = function () {\n this.element.addEventListener('focusin', this.onFocusHandler, true);\n this.element.addEventListener('focusout', this.onBlurHandler, true);\n this.on(events.contentChanged, this.contentChanged, this);\n this.on(events.resizeInitialized, this.updateResizeFlag, this);\n this.on(events.updateTbItemsStatus, this.updateStatus, this);\n if (this.readonly && this.enabled) {\n return;\n }\n this.bindEvents();\n };\n RichTextEditor.prototype.restrict = function (e) {\n if (this.maxLength >= 0) {\n var element = this.editorMode === 'Markdown' ? this.contentModule.getText() :\n e.currentTarget.textContent.trim();\n var array = [8, 16, 17, 37, 38, 39, 40, 46, 65];\n var arrayKey = void 0;\n for (var i = 0; i <= array.length - 1; i++) {\n if (e.which === array[i]) {\n if (e.ctrlKey && e.which === 65) {\n return;\n }\n else if (e.which !== 65) {\n arrayKey = array[i];\n return;\n }\n }\n }\n if ((element.length >= this.maxLength && this.maxLength !== -1) && e.which !== arrayKey) {\n e.preventDefault();\n }\n }\n };\n RichTextEditor.prototype.bindEvents = function () {\n this.keyboardModule = new KeyboardEvents(this.inputElement, {\n keyAction: this.keyDown.bind(this), keyConfigs: __assign({}, this.formatter.keyConfig, this.keyConfig), eventName: 'keydown'\n });\n var formElement = closest(this.valueContainer, 'form');\n if (formElement) {\n EventHandler.add(formElement, 'reset', this.resetHandler, this);\n }\n EventHandler.add(this.inputElement, 'keyup', this.keyUp, this);\n EventHandler.add(this.inputElement, 'paste', this.onPaste, this);\n EventHandler.add(this.inputElement, Browser.touchEndEvent, debounce(this.mouseUp, 30), this);\n EventHandler.add(this.inputElement, Browser.touchStartEvent, this.mouseDownHandler, this);\n this.wireContextEvent();\n this.formatter.editorManager.observer.on(CONSTANT.KEY_DOWN_HANDLER, this.editorKeyDown, this);\n this.element.ownerDocument.defaultView.addEventListener('resize', this.onResizeHandler, true);\n if (this.iframeSettings.enable) {\n EventHandler.add(this.inputElement, 'focusin', this.focusHandler, this);\n EventHandler.add(this.inputElement, 'focusout', this.blurHandler, this);\n EventHandler.add(this.inputElement.ownerDocument, 'scroll', this.contentScrollHandler, this);\n EventHandler.add(this.inputElement.ownerDocument, Browser.touchStartEvent, this.onIframeMouseDown, this);\n }\n this.wireScrollElementsEvents();\n };\n RichTextEditor.prototype.onIframeMouseDown = function (e) {\n this.isBlur = false;\n this.notify(events.iframeMouseDown, e);\n };\n RichTextEditor.prototype.editorKeyDown = function (e) {\n switch (e.event.action) {\n case 'copy':\n this.onCopy();\n break;\n case 'cut':\n this.onCut();\n break;\n }\n if (e.callBack && (e.event.action === 'copy' || e.event.action === 'cut' || e.event.action === 'delete')) {\n e.callBack({\n requestType: e.event.action,\n editorMode: 'HTML',\n event: e.event\n });\n }\n };\n RichTextEditor.prototype.unWireEvents = function () {\n this.element.removeEventListener('focusin', this.onFocusHandler, true);\n this.element.removeEventListener('focusout', this.onBlurHandler, true);\n this.off(events.contentChanged, this.contentChanged);\n this.off(events.resizeInitialized, this.updateResizeFlag);\n this.off(events.updateTbItemsStatus, this.updateStatus);\n if (this.readonly && this.enabled) {\n return;\n }\n this.unbindEvents();\n };\n RichTextEditor.prototype.unbindEvents = function () {\n if (this.keyboardModule) {\n this.keyboardModule.destroy();\n }\n var formElement = closest(this.valueContainer, 'form');\n if (formElement) {\n EventHandler.remove(formElement, 'reset', this.resetHandler);\n }\n EventHandler.remove(this.inputElement, 'keyup', this.keyUp);\n EventHandler.remove(this.inputElement, 'paste', this.onPaste);\n EventHandler.remove(this.inputElement, Browser.touchEndEvent, debounce(this.mouseUp, 30));\n EventHandler.remove(this.inputElement, Browser.touchStartEvent, this.mouseDownHandler);\n this.unWireContextEvent();\n if (this.formatter) {\n this.formatter.editorManager.observer.off(CONSTANT.KEY_DOWN_HANDLER, this.editorKeyDown);\n }\n this.element.ownerDocument.defaultView.removeEventListener('resize', this.onResizeHandler, true);\n if (this.iframeSettings.enable) {\n EventHandler.remove(this.inputElement, 'focusin', this.focusHandler);\n EventHandler.remove(this.inputElement, 'focusout', this.blurHandler);\n EventHandler.remove(this.inputElement.ownerDocument, 'scroll', this.contentScrollHandler);\n EventHandler.remove(this.inputElement.ownerDocument, Browser.touchStartEvent, this.onIframeMouseDown);\n }\n this.unWireScrollElementsEvents();\n };\n __decorate([\n Complex({}, ToolbarSettings)\n ], RichTextEditor.prototype, \"toolbarSettings\", void 0);\n __decorate([\n Complex({}, QuickToolbarSettings)\n ], RichTextEditor.prototype, \"quickToolbarSettings\", void 0);\n __decorate([\n Complex({}, PasteCleanupSettings)\n ], RichTextEditor.prototype, \"pasteCleanupSettings\", void 0);\n __decorate([\n Complex({}, IFrameSettings)\n ], RichTextEditor.prototype, \"iframeSettings\", void 0);\n __decorate([\n Complex({}, ImageSettings)\n ], RichTextEditor.prototype, \"insertImageSettings\", void 0);\n __decorate([\n Complex({}, TableSettings)\n ], RichTextEditor.prototype, \"tableSettings\", void 0);\n __decorate([\n Property(0)\n ], RichTextEditor.prototype, \"floatingToolbarOffset\", void 0);\n __decorate([\n Complex({}, InlineMode)\n ], RichTextEditor.prototype, \"inlineMode\", void 0);\n __decorate([\n Complex({}, FileManagerSettings)\n ], RichTextEditor.prototype, \"fileManagerSettings\", void 0);\n __decorate([\n Property('100%')\n ], RichTextEditor.prototype, \"width\", void 0);\n __decorate([\n Property(false)\n ], RichTextEditor.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(false)\n ], RichTextEditor.prototype, \"enableResize\", void 0);\n __decorate([\n Property({})\n ], RichTextEditor.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(null)\n ], RichTextEditor.prototype, \"placeholder\", void 0);\n __decorate([\n Property(false)\n ], RichTextEditor.prototype, \"autoSaveOnIdle\", void 0);\n __decorate([\n Property(false)\n ], RichTextEditor.prototype, \"readonly\", void 0);\n __decorate([\n Property(true)\n ], RichTextEditor.prototype, \"enabled\", void 0);\n __decorate([\n Property(true)\n ], RichTextEditor.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property(false)\n ], RichTextEditor.prototype, \"enableHtmlEncode\", void 0);\n __decorate([\n Property(false)\n ], RichTextEditor.prototype, \"enableXhtml\", void 0);\n __decorate([\n Property('auto')\n ], RichTextEditor.prototype, \"height\", void 0);\n __decorate([\n Property(null)\n ], RichTextEditor.prototype, \"cssClass\", void 0);\n __decorate([\n Property(null)\n ], RichTextEditor.prototype, \"value\", void 0);\n __decorate([\n Property('P')\n ], RichTextEditor.prototype, \"enterKey\", void 0);\n __decorate([\n Property('BR')\n ], RichTextEditor.prototype, \"shiftEnterKey\", void 0);\n __decorate([\n Property(30)\n ], RichTextEditor.prototype, \"undoRedoSteps\", void 0);\n __decorate([\n Property(300)\n ], RichTextEditor.prototype, \"undoRedoTimer\", void 0);\n __decorate([\n Property('HTML')\n ], RichTextEditor.prototype, \"editorMode\", void 0);\n __decorate([\n Property(null)\n ], RichTextEditor.prototype, \"keyConfig\", void 0);\n __decorate([\n Property(false)\n ], RichTextEditor.prototype, \"showCharCount\", void 0);\n __decorate([\n Property(false)\n ], RichTextEditor.prototype, \"enableTabKey\", void 0);\n __decorate([\n Property(false)\n ], RichTextEditor.prototype, \"enableAutoUrl\", void 0);\n __decorate([\n Property(-1)\n ], RichTextEditor.prototype, \"maxLength\", void 0);\n __decorate([\n Complex({}, Format)\n ], RichTextEditor.prototype, \"format\", void 0);\n __decorate([\n Complex({}, NumberFormatList)\n ], RichTextEditor.prototype, \"numberFormatList\", void 0);\n __decorate([\n Complex({}, BulletFormatList)\n ], RichTextEditor.prototype, \"bulletFormatList\", void 0);\n __decorate([\n Complex({}, FontFamily)\n ], RichTextEditor.prototype, \"fontFamily\", void 0);\n __decorate([\n Complex({}, FontSize)\n ], RichTextEditor.prototype, \"fontSize\", void 0);\n __decorate([\n Complex({}, FontColor)\n ], RichTextEditor.prototype, \"fontColor\", void 0);\n __decorate([\n Complex({}, BackgroundColor)\n ], RichTextEditor.prototype, \"backgroundColor\", void 0);\n __decorate([\n Property(null)\n ], RichTextEditor.prototype, \"valueTemplate\", void 0);\n __decorate([\n Property(10000)\n ], RichTextEditor.prototype, \"saveInterval\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"actionBegin\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"actionComplete\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"beforeDialogOpen\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"dialogOpen\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"beforeDialogClose\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"dialogClose\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"beforeQuickToolbarOpen\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"quickToolbarOpen\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"quickToolbarClose\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"toolbarStatusUpdate\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"updatedToolbarStatus\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"imageSelected\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"beforeImageUpload\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"imageUploading\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"imageUploadSuccess\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"imageUploadFailed\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"imageRemoving\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"afterImageDelete\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"beforeSanitizeHtml\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"toolbarClick\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"resizing\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"resizeStart\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"resizeStop\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"beforePasteCleanup\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"afterPasteCleanup\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"beforeImageDrop\", void 0);\n __decorate([\n Property(null)\n ], RichTextEditor.prototype, \"formatter\", void 0);\n RichTextEditor = __decorate([\n NotifyPropertyChanges\n ], RichTextEditor);\n return RichTextEditor;\n}(Component));\nexport { RichTextEditor };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { isUndefined } from '@syncfusion/ej2-base';\nimport { ComponentBase, EJComponentDecorator, getProps, gh } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';\nimport { RichTextEditor } from '@syncfusion/ej2-richtexteditor';\n\nexport var properties = ['isLazyUpdate', 'autoSaveOnIdle', 'backgroundColor', 'bulletFormatList', 'cssClass', 'editorMode', 'enableAutoUrl', 'enableHtmlEncode', 'enableHtmlSanitizer', 'enablePersistence', 'enableResize', 'enableRtl', 'enableTabKey', 'enableXhtml', 'enabled', 'enterKey', 'fileManagerSettings', 'floatingToolbarOffset', 'fontColor', 'fontFamily', 'fontSize', 'format', 'formatter', 'height', 'htmlAttributes', 'iframeSettings', 'inlineMode', 'insertImageSettings', 'keyConfig', 'locale', 'maxLength', 'numberFormatList', 'pasteCleanupSettings', 'placeholder', 'quickToolbarSettings', 'readonly', 'saveInterval', 'shiftEnterKey', 'showCharCount', 'tableSettings', 'toolbarSettings', 'undoRedoSteps', 'undoRedoTimer', 'value', 'valueTemplate', 'width', 'actionBegin', 'actionComplete', 'afterImageDelete', 'afterPasteCleanup', 'beforeDialogClose', 'beforeDialogOpen', 'beforeImageDrop', 'beforeImageUpload', 'beforePasteCleanup', 'beforeQuickToolbarOpen', 'beforeSanitizeHtml', 'blur', 'change', 'created', 'destroyed', 'dialogClose', 'dialogOpen', 'focus', 'imageRemoving', 'imageSelected', 'imageUploadFailed', 'imageUploadSuccess', 'imageUploading', 'quickToolbarClose', 'quickToolbarOpen', 'resizeStart', 'resizeStop', 'resizing', 'toolbarClick', 'toolbarStatusUpdate', 'updatedToolbarStatus'];\nexport var modelProps = ['value'];\nexport var testProp = getProps({ props: properties });\nexport var props = testProp[0];\nexport var watch = testProp[1];\nexport var emitProbs = Object.keys(watch);\nemitProbs.push('modelchanged');\nfor (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {\n var props_1 = modelProps_1[_i];\n emitProbs.push('update:' + props_1);\n}\nexport var isExecute = gh ? false : true;\n/**\n * `ejs-richtexteditor` represents the VueJS RichTextEditor Component.\n * ```vue\n * \n * ```\n */\nvar RichTextEditorComponent = /** @class */ (function (_super) {\n __extends(RichTextEditorComponent, _super);\n function RichTextEditorComponent() {\n var _this = _super.call(this, arguments) || this;\n _this.propKeys = properties;\n _this.models = modelProps;\n _this.hasChildDirective = false;\n _this.hasInjectedModules = true;\n _this.tagMapper = {};\n _this.tagNameMapper = {};\n _this.isVue3 = !isExecute;\n _this.ej2Instances = new RichTextEditor({});\n _this.ej2Instances._trigger = _this.ej2Instances.trigger;\n _this.ej2Instances.trigger = _this.trigger;\n _this.bindProperties();\n _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;\n _this.ej2Instances.setProperties = _this.setProperties;\n _this.ej2Instances.clearTemplate = _this.clearTemplate;\n return _this;\n }\n RichTextEditorComponent.prototype.clearTemplate = function (templateNames) {\n if (!templateNames) {\n templateNames = Object.keys(this.templateCollection || {});\n }\n if (templateNames.length && this.templateCollection) {\n for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {\n var tempName = templateNames_1[_i];\n var elementCollection = this.templateCollection[tempName];\n if (elementCollection && elementCollection.length) {\n for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {\n var ele = elementCollection_1[_a];\n var destroy = getValue('__vue__.$destroy', ele);\n if (destroy) {\n ele.__vue__.$destroy();\n }\n if (ele.innerHTML) {\n ele.innerHTML = '';\n }\n }\n delete this.templateCollection[tempName];\n }\n }\n }\n };\n RichTextEditorComponent.prototype.setProperties = function (prop, muteOnChange) {\n var _this = this;\n if (this.isVue3) {\n this.models = !this.models ? this.ej2Instances.referModels : this.models;\n }\n if (this.ej2Instances && this.ej2Instances._setProperties) {\n this.ej2Instances._setProperties(prop, muteOnChange);\n }\n if (prop && this.models && this.models.length) {\n Object.keys(prop).map(function (key) {\n _this.models.map(function (model) {\n if ((key === model) && !(/datasource/i.test(key))) {\n if (_this.isVue3) {\n _this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);\n }\n else {\n _this.$emit('update:' + key, prop[key]);\n _this.$emit('modelchanged', prop[key]);\n }\n }\n });\n });\n }\n };\n RichTextEditorComponent.prototype.trigger = function (eventName, eventProp, successHandler) {\n if (!isExecute) {\n this.models = !this.models ? this.ej2Instances.referModels : this.models;\n }\n if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {\n var key = this.models.toString().match(/checked|value/) || [];\n var propKey = key[0];\n if (eventProp && key && !isUndefined(eventProp[propKey])) {\n if (!isExecute) {\n this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);\n this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);\n }\n else {\n if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {\n this.$emit('update:' + propKey, eventProp[propKey]);\n this.$emit('modelchanged', eventProp[propKey]);\n }\n }\n }\n }\n else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {\n var key = this.models.toString().match(/currentView|selectedDate/) || [];\n var propKey = key[0];\n if (eventProp && key && !isUndefined(eventProp[propKey])) {\n if (!isExecute) {\n this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);\n this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);\n }\n else {\n this.$emit('update:' + propKey, eventProp[propKey]);\n this.$emit('modelchanged', eventProp[propKey]);\n }\n }\n }\n if ((this.ej2Instances && this.ej2Instances._trigger)) {\n this.ej2Instances._trigger(eventName, eventProp, successHandler);\n }\n };\n RichTextEditorComponent.prototype.render = function (createElement) {\n var h = gh || createElement;\n var slots = null;\n if (!isNullOrUndefined(this.$slots.default)) {\n slots = gh ? this.$slots.default() : this.$slots.default;\n }\n return h('textarea', slots);\n };\n RichTextEditorComponent.prototype.cleanList = function (e) {\n return this.ej2Instances.cleanList(e);\n };\n RichTextEditorComponent.prototype.closeDialog = function (type) {\n return this.ej2Instances.closeDialog(type);\n };\n RichTextEditorComponent.prototype.disableToolbarItem = function (items, muteToolbarUpdate) {\n return this.ej2Instances.disableToolbarItem(items, muteToolbarUpdate);\n };\n RichTextEditorComponent.prototype.enableToolbarItem = function (items, muteToolbarUpdate) {\n return this.ej2Instances.enableToolbarItem(items, muteToolbarUpdate);\n };\n RichTextEditorComponent.prototype.executeCommand = function (commandName, value, option) {\n return this.ej2Instances.executeCommand(commandName, value, option);\n };\n RichTextEditorComponent.prototype.focusIn = function () {\n return this.ej2Instances.focusIn();\n };\n RichTextEditorComponent.prototype.focusOut = function () {\n return this.ej2Instances.focusOut();\n };\n RichTextEditorComponent.prototype.getCharCount = function () {\n return this.ej2Instances.getCharCount();\n };\n RichTextEditorComponent.prototype.getContent = function () {\n return this.ej2Instances.getContent();\n };\n RichTextEditorComponent.prototype.getHtml = function () {\n return this.ej2Instances.getHtml();\n };\n RichTextEditorComponent.prototype.getRange = function () {\n return this.ej2Instances.getRange();\n };\n RichTextEditorComponent.prototype.getSelectedHtml = function () {\n return this.ej2Instances.getSelectedHtml();\n };\n RichTextEditorComponent.prototype.getSelection = function () {\n return this.ej2Instances.getSelection();\n };\n RichTextEditorComponent.prototype.getText = function () {\n return this.ej2Instances.getText();\n };\n RichTextEditorComponent.prototype.getXhtml = function () {\n return this.ej2Instances.getXhtml();\n };\n RichTextEditorComponent.prototype.hideInlineToolbar = function () {\n return this.ej2Instances.hideInlineToolbar();\n };\n RichTextEditorComponent.prototype.print = function () {\n return this.ej2Instances.print();\n };\n RichTextEditorComponent.prototype.refreshUI = function () {\n return this.ej2Instances.refreshUI();\n };\n RichTextEditorComponent.prototype.removeToolbarItem = function (items) {\n return this.ej2Instances.removeToolbarItem(items);\n };\n RichTextEditorComponent.prototype.sanitizeHtml = function (value) {\n return this.ej2Instances.sanitizeHtml(value);\n };\n RichTextEditorComponent.prototype.selectAll = function () {\n return this.ej2Instances.selectAll();\n };\n RichTextEditorComponent.prototype.selectRange = function (range) {\n return this.ej2Instances.selectRange(range);\n };\n RichTextEditorComponent.prototype.showDialog = function (type) {\n return this.ej2Instances.showDialog(type);\n };\n RichTextEditorComponent.prototype.showFullScreen = function () {\n return this.ej2Instances.showFullScreen();\n };\n RichTextEditorComponent.prototype.showInlineToolbar = function () {\n return this.ej2Instances.showInlineToolbar();\n };\n RichTextEditorComponent.prototype.showSourceCode = function () {\n return this.ej2Instances.showSourceCode();\n };\n RichTextEditorComponent = __decorate([\n EJComponentDecorator({\n props: properties,\n model: {\n event: 'modelchanged'\n }\n }, isExecute)\n \n ], RichTextEditorComponent);\n return RichTextEditorComponent;\n}(ComponentBase));\nexport { RichTextEditorComponent };\nexport var RichTextEditorPlugin = {\n name: 'ejs-richtexteditor',\n install: function (Vue) {\n Vue.component(RichTextEditorPlugin.name, RichTextEditorComponent);\n }\n};\n","import { addClass, isNullOrUndefined, removeClass, select, closest } from '@syncfusion/ej2-base';\nimport { RenderType } from '../base/enum';\nimport { getIndex } from '../base/util';\nimport * as events from '../base/constant';\nimport * as classes from '../base/classes';\nimport { getDropDownValue, getFormattedFontSize, getTooltipText } from '../base/util';\nimport * as model from '../models/items';\nimport { dispatchEvent } from '../base/util';\n/**\n * `Toolbar` module is used to handle Toolbar actions.\n */\nvar DropDownButtons = /** @class */ (function () {\n function DropDownButtons(parent, serviceLocator) {\n this.parent = parent;\n this.locator = serviceLocator;\n this.renderFactory = this.locator.getService('rendererFactory');\n this.addEventListener();\n }\n DropDownButtons.prototype.initializeInstance = function () {\n this.toolbarRenderer = this.renderFactory.getRenderer(RenderType.Toolbar);\n };\n DropDownButtons.prototype.beforeRender = function (args) {\n var item = args.item;\n if (item.cssClass) {\n addClass([args.element], item.cssClass);\n }\n if (item.command === 'Alignments' || item.subCommand === 'JustifyLeft'\n || item.subCommand === 'JustifyRight' || item.subCommand === 'JustifyCenter') {\n args.element.setAttribute('title', getTooltipText(item.subCommand.toLocaleLowerCase(), this.locator));\n }\n };\n DropDownButtons.prototype.dropdownContent = function (width, type, content) {\n return ('' +\n '' + content + '');\n };\n /**\n * renderDropDowns method\n *\n * @param {IDropDownRenderArgs} args - specifies the arguments\n * @returns {void}\n * @hidden\n\n */\n DropDownButtons.prototype.renderDropDowns = function (args) {\n var _this = this;\n this.initializeInstance();\n var type = args.containerType;\n var tbElement = args.container;\n model.templateItems.forEach(function (item) {\n var targetElement = undefined;\n if (getIndex(item, args.items) !== -1) {\n switch (item) {\n case 'numberformatlist': {\n targetElement = select('#' + _this.parent.getID() + '_' + type + '_NumberFormatList', tbElement);\n if (isNullOrUndefined(targetElement) || targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {\n return;\n }\n var formatOLItem = _this.parent.numberFormatList.types.slice();\n formatOLItem.forEach(function (item) {\n Object.defineProperties(item, {\n command: { value: 'Lists', enumerable: true }, subCommand: { value: 'NumberFormatList', enumerable: true }\n });\n });\n _this.numberFormatListDropDown = _this.toolbarRenderer.renderListDropDown({\n cssClass: 'e-order-list' + ' ' + classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_ICONS,\n itemName: 'NumberFormatList', items: formatOLItem, element: targetElement\n });\n break;\n }\n case 'bulletformatlist': {\n targetElement = select('#' + _this.parent.getID() + '_' + type + '_BulletFormatList', tbElement);\n if (isNullOrUndefined(targetElement) || targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {\n return;\n }\n var formatULItem = _this.parent.bulletFormatList.types.slice();\n formatULItem.forEach(function (item) {\n Object.defineProperties(item, {\n command: { value: 'Lists', enumerable: true }, subCommand: { value: 'BulletFormatList', enumerable: true }\n });\n });\n _this.bulletFormatListDropDown = _this.toolbarRenderer.renderListDropDown({\n cssClass: 'e-unorder-list' + ' ' + classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_ICONS,\n itemName: 'BulletFormatList', items: formatULItem, element: targetElement\n });\n break;\n }\n case 'formats': {\n targetElement = select('#' + _this.parent.getID() + '_' + type + '_Formats', tbElement);\n if (isNullOrUndefined(targetElement) || targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {\n return;\n }\n var formatItem = _this.parent.format.types.slice();\n formatItem.forEach(function (item) {\n Object.defineProperties(item, {\n command: { value: 'Formats', enumerable: true }, subCommand: { value: item.value, enumerable: true }\n });\n });\n var formatContent = isNullOrUndefined(_this.parent.format.default) ? formatItem[0].text :\n _this.parent.format.default;\n _this.formatDropDown = _this.toolbarRenderer.renderDropDownButton({\n iconCss: ((type === 'quick') ? 'e-formats e-icons' : ''),\n content: _this.dropdownContent(_this.parent.format.width, type, ((type === 'quick') ? '' : getDropDownValue(formatItem, formatContent, 'text', 'text'))),\n cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_FORMATS_TB_BTN,\n itemName: 'Formats', items: formatItem, element: targetElement\n });\n break;\n }\n case 'fontname': {\n targetElement = select('#' + _this.parent.getID() + '_' + type + '_FontName', tbElement);\n if (isNullOrUndefined(targetElement) || targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {\n return;\n }\n var fontItem = _this.parent.fontFamily.items.slice();\n fontItem.forEach(function (item) {\n Object.defineProperties(item, {\n command: { value: 'Font', enumerable: true }, subCommand: { value: 'FontName', enumerable: true }\n });\n });\n var fontNameContent = isNullOrUndefined(_this.parent.fontFamily.default) ? fontItem[0].text :\n _this.parent.fontFamily.default;\n _this.fontNameDropDown = _this.toolbarRenderer.renderDropDownButton({\n iconCss: ((type === 'quick') ? 'e-font-name e-icons' : ''),\n content: _this.dropdownContent(_this.parent.fontFamily.width, type, ((type === 'quick') ? '' : getDropDownValue(fontItem, fontNameContent, 'text', 'text'))),\n cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_FONT_NAME_TB_BTN,\n itemName: 'FontName', items: fontItem, element: targetElement\n });\n if (!isNullOrUndefined(_this.parent.fontFamily.default)) {\n _this.getEditNode().style.fontFamily = _this.parent.fontFamily.default;\n }\n break;\n }\n case 'fontsize': {\n targetElement = select('#' + _this.parent.getID() + '_' + type + '_FontSize', tbElement);\n if (isNullOrUndefined(targetElement) || targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {\n return;\n }\n var fontsize = _this.parent.fontSize.items.slice();\n fontsize.forEach(function (item) {\n Object.defineProperties(item, {\n command: { value: 'Font', enumerable: true }, subCommand: { value: 'FontSize', enumerable: true }\n });\n });\n var fontSizeContent = isNullOrUndefined(_this.parent.fontSize.default) ? fontsize[1].text :\n _this.parent.fontSize.default;\n _this.fontSizeDropDown = _this.toolbarRenderer.renderDropDownButton({\n content: _this.dropdownContent(_this.parent.fontSize.width, type, getFormattedFontSize(getDropDownValue(fontsize, fontSizeContent.replace(/\\s/g, ''), 'value', 'text'))),\n cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_FONT_SIZE_TB_BTN,\n itemName: 'FontSize', items: fontsize, element: targetElement\n });\n if (!isNullOrUndefined(_this.parent.fontSize.default)) {\n _this.getEditNode().style.fontSize = _this.parent.fontSize.default;\n }\n break;\n }\n case 'alignments':\n targetElement = select('#' + _this.parent.getID() + '_' + type + '_Alignments', tbElement);\n if (isNullOrUndefined(targetElement) || targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {\n return;\n }\n _this.alignDropDown = _this.toolbarRenderer.renderDropDownButton({\n iconCss: 'e-justify-left e-icons',\n cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS,\n itemName: 'Alignments', items: model.alignmentItems, element: targetElement\n });\n break;\n case 'align':\n _this.imageAlignmentDropDown(type, tbElement, targetElement);\n break;\n case 'display':\n _this.imageDisplayDropDown(type, tbElement, targetElement);\n break;\n case 'tablerows':\n _this.rowDropDown(type, tbElement, targetElement);\n break;\n case 'tablecolumns':\n _this.columnDropDown(type, tbElement, targetElement);\n break;\n case 'tablecell':\n _this.cellDropDown(type, tbElement, targetElement);\n break;\n case 'tablecellverticalalign':\n _this.verticalAlignDropDown(type, tbElement, targetElement);\n break;\n case 'styles':\n _this.tableStylesDropDown(type, tbElement, targetElement);\n break;\n }\n }\n });\n };\n DropDownButtons.prototype.getUpdateItems = function (items, value) {\n var dropDownItems = items.slice();\n dropDownItems.forEach(function (item) {\n Object.defineProperties(item, {\n command: { value: (value === 'Format' ? 'Formats' : 'Font'), enumerable: true },\n subCommand: { value: (value === 'Format' ? item.value : value), enumerable: true }\n });\n });\n return dropDownItems;\n };\n DropDownButtons.prototype.onPropertyChanged = function (model) {\n var newProp = model.newProp;\n var type;\n var content;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'fontFamily':\n if (this.fontNameDropDown) {\n for (var _b = 0, _c = Object.keys(newProp.fontFamily); _b < _c.length; _b++) {\n var fontFamily = _c[_b];\n switch (fontFamily) {\n case 'default':\n case 'width': {\n var fontItems = this.fontNameDropDown.items;\n type = !isNullOrUndefined(closest(this.fontNameDropDown.element, '.' + classes.CLS_QUICK_TB)) ?\n 'quick' : 'toolbar';\n var fontNameContent = isNullOrUndefined(this.parent.fontFamily.default) ? fontItems[0].text :\n this.parent.fontFamily.default;\n content = this.dropdownContent(this.parent.fontFamily.width, type, ((type === 'quick') ? '' : getDropDownValue(fontItems, fontNameContent, 'text', 'text')));\n this.fontNameDropDown.setProperties({ content: content });\n if (!isNullOrUndefined(this.parent.fontFamily.default)) {\n this.getEditNode().style.fontFamily = this.parent.fontFamily.default;\n }\n else {\n this.getEditNode().style.removeProperty('font-family');\n }\n break;\n }\n case 'items':\n this.fontNameDropDown.setProperties({\n items: this.getUpdateItems(newProp.fontFamily.items, 'FontName')\n });\n break;\n }\n }\n }\n break;\n case 'fontSize':\n if (this.fontSizeDropDown) {\n for (var _d = 0, _e = Object.keys(newProp.fontSize); _d < _e.length; _d++) {\n var fontSize = _e[_d];\n switch (fontSize) {\n case 'default':\n case 'width': {\n var fontsize = this.fontSizeDropDown.items;\n type = !isNullOrUndefined(closest(this.fontSizeDropDown.element, '.' + classes.CLS_QUICK_TB)) ? 'quick' : 'toolbar';\n var fontSizeContent = isNullOrUndefined(this.parent.fontSize.default) ? fontsize[1].text :\n this.parent.fontSize.default;\n content = this.dropdownContent(this.parent.fontSize.width, type, getFormattedFontSize(getDropDownValue(fontsize, fontSizeContent.replace(/\\s/g, ''), 'value', 'text')));\n this.fontSizeDropDown.setProperties({ content: content });\n if (!isNullOrUndefined(this.parent.fontSize.default)) {\n this.getEditNode().style.fontSize = this.parent.fontSize.default;\n }\n else {\n this.getEditNode().style.removeProperty('font-size');\n }\n break;\n }\n case 'items':\n this.fontSizeDropDown.setProperties({\n items: this.getUpdateItems(newProp.fontSize.items, 'FontSize')\n });\n break;\n }\n }\n }\n break;\n case 'format':\n if (this.formatDropDown) {\n for (var _f = 0, _g = Object.keys(newProp.format); _f < _g.length; _f++) {\n var format = _g[_f];\n switch (format) {\n case 'default':\n case 'width': {\n var formatItems = this.formatDropDown.items;\n type = !isNullOrUndefined(closest(this.formatDropDown.element, '.' + classes.CLS_QUICK_TB)) ? 'quick' : 'toolbar';\n var formatContent = isNullOrUndefined(this.parent.format.default) ? formatItems[0].text :\n this.parent.format.default;\n content = this.dropdownContent(this.parent.format.width, type, ((type === 'quick') ? '' : getDropDownValue(formatItems, formatContent, 'text', 'text')));\n this.formatDropDown.setProperties({ content: content });\n break;\n }\n case 'types':\n this.formatDropDown.setProperties({\n items: this.getUpdateItems(newProp.format.types, 'Format')\n });\n break;\n }\n }\n }\n break;\n }\n }\n };\n DropDownButtons.prototype.getEditNode = function () {\n return this.parent.contentModule.getEditPanel();\n };\n DropDownButtons.prototype.rowDropDown = function (type, tbElement, targetElement) {\n targetElement = select('#' + this.parent.getID() + '_' + type + '_TableRows', tbElement);\n if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {\n return;\n }\n this.tableRowsDropDown = this.toolbarRenderer.renderDropDownButton({\n iconCss: 'e-table-rows e-icons',\n cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_QUICK_DROPDOWN,\n itemName: 'TableRows',\n items: model.tableRowsItems,\n element: targetElement\n });\n };\n DropDownButtons.prototype.columnDropDown = function (type, tbElement, targetElement) {\n targetElement = select('#' + this.parent.getID() + '_' + type + '_TableColumns', tbElement);\n if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {\n return;\n }\n this.tableColumnsDropDown = this.toolbarRenderer.renderDropDownButton({\n iconCss: 'e-table-columns e-icons',\n cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_QUICK_DROPDOWN,\n itemName: 'TableColumns',\n items: model.tableColumnsItems,\n element: targetElement\n });\n };\n DropDownButtons.prototype.cellDropDown = function (type, tbElement, targetElement) {\n targetElement = select('#' + this.parent.getID() + '_' + type + '_TableCell', tbElement);\n if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {\n return;\n }\n this.tableRowsDropDown = this.toolbarRenderer.renderDropDownButton({\n iconCss: 'e-table-cell e-icons',\n cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_QUICK_DROPDOWN,\n itemName: 'TableCell',\n items: model.tableCellItems,\n element: targetElement\n });\n };\n DropDownButtons.prototype.verticalAlignDropDown = function (type, tbElement, targetElement) {\n targetElement = select('#' + this.parent.getID() + '_' + type + '_TableCellVerticalAlign', tbElement);\n if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {\n return;\n }\n this.tableCellVerticalAlignDropDown = this.toolbarRenderer.renderDropDownButton({\n iconCss: 'e-table-cell-ver-align e-icons',\n cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_QUICK_DROPDOWN,\n itemName: 'TableCellVerticalAlign',\n items: model.TableCellVerticalAlignItems,\n element: targetElement\n });\n };\n DropDownButtons.prototype.imageDisplayDropDown = function (type, tbElement, targetElement) {\n targetElement = select('#' + this.parent.getID() + '_' + type + '_Display', tbElement);\n if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {\n return;\n }\n this.displayDropDown = this.toolbarRenderer.renderDropDownButton({\n iconCss: 'e-display e-icons',\n cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_QUICK_DROPDOWN,\n itemName: 'Display',\n items: model.imageDisplayItems,\n element: targetElement\n });\n };\n DropDownButtons.prototype.imageAlignmentDropDown = function (type, tbElement, targetElement) {\n targetElement = select('#' + this.parent.getID() + '_' + type + '_Align', tbElement);\n if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {\n return;\n }\n this.imageAlignDropDown = this.toolbarRenderer.renderDropDownButton({\n iconCss: 'e-justify-left e-icons',\n cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ICONS + ' ' + classes.CLS_QUICK_DROPDOWN,\n itemName: 'Align',\n items: model.imageAlignItems,\n element: targetElement\n });\n };\n DropDownButtons.prototype.tableStylesDropDown = function (type, tbElement, targetElement) {\n targetElement = select('#' + this.parent.getID() + '_' + type + '_Styles', tbElement);\n if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {\n return;\n }\n this.imageAlignDropDown = this.toolbarRenderer.renderDropDownButton({\n iconCss: 'e-style e-icons',\n cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ICONS + ' ' + classes.CLS_QUICK_DROPDOWN,\n itemName: 'Styles',\n items: this.parent.tableSettings.styles,\n element: targetElement\n });\n };\n DropDownButtons.prototype.removeDropDownClasses = function (target) {\n removeClass([target], [\n classes.CLS_DROPDOWN_BTN,\n classes.CLS_DROPDOWN_POPUP,\n classes.CLS_DROPDOWN_ICONS,\n classes.CLS_DROPDOWN_ITEMS\n ]);\n };\n /**\n * destroyDropDowns method\n *\n * @returns {void}\n * @hidden\n\n */\n DropDownButtons.prototype.destroyDropDowns = function () {\n if (this.formatDropDown) {\n this.removeDropDownClasses(this.formatDropDown.element);\n this.formatDropDown.destroy();\n }\n if (this.fontNameDropDown) {\n this.removeDropDownClasses(this.fontNameDropDown.element);\n this.fontNameDropDown.destroy();\n }\n if (this.fontSizeDropDown) {\n this.removeDropDownClasses(this.fontSizeDropDown.element);\n this.fontSizeDropDown.destroy();\n }\n if (this.alignDropDown) {\n this.removeDropDownClasses(this.alignDropDown.element);\n this.alignDropDown.destroy();\n }\n if (this.imageAlignDropDown) {\n this.removeDropDownClasses(this.imageAlignDropDown.element);\n this.imageAlignDropDown.destroy();\n }\n if (this.displayDropDown) {\n this.removeDropDownClasses(this.displayDropDown.element);\n this.displayDropDown.destroy();\n }\n if (this.tableRowsDropDown) {\n this.removeDropDownClasses(this.tableRowsDropDown.element);\n this.tableRowsDropDown.destroy();\n }\n if (this.tableColumnsDropDown) {\n this.removeDropDownClasses(this.tableColumnsDropDown.element);\n this.tableColumnsDropDown.destroy();\n }\n if (this.tableCellVerticalAlignDropDown) {\n this.removeDropDownClasses(this.tableCellVerticalAlignDropDown.element);\n this.tableCellVerticalAlignDropDown.destroy();\n }\n if (this.numberFormatListDropDown) {\n this.removeDropDownClasses(this.numberFormatListDropDown.element);\n this.numberFormatListDropDown.destroy();\n }\n if (this.bulletFormatListDropDown) {\n this.removeDropDownClasses(this.bulletFormatListDropDown.element);\n this.bulletFormatListDropDown.destroy();\n }\n };\n DropDownButtons.prototype.setRtl = function (args) {\n if (this.formatDropDown) {\n this.formatDropDown.setProperties({ enableRtl: args.enableRtl });\n }\n if (this.fontNameDropDown) {\n this.fontNameDropDown.setProperties({ enableRtl: args.enableRtl });\n }\n if (this.fontSizeDropDown) {\n this.fontSizeDropDown.setProperties({ enableRtl: args.enableRtl });\n }\n if (this.alignDropDown) {\n this.alignDropDown.setProperties({ enableRtl: args.enableRtl });\n }\n if (this.imageAlignDropDown) {\n this.imageAlignDropDown.setProperties({ enableRtl: args.enableRtl });\n }\n if (this.displayDropDown) {\n this.displayDropDown.setProperties({ enableRtl: args.enableRtl });\n }\n if (this.numberFormatListDropDown) {\n this.numberFormatListDropDown.setProperties({ enableRtl: args.enableRtl });\n }\n if (this.bulletFormatListDropDown) {\n this.bulletFormatListDropDown.setProperties({ enableRtl: args.enableRtl });\n }\n };\n DropDownButtons.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.beforeDropDownItemRender, this.beforeRender, this);\n this.parent.on(events.iframeMouseDown, this.onIframeMouseDown, this);\n this.parent.on(events.rtlMode, this.setRtl, this);\n this.parent.on(events.destroy, this.removeEventListener, this);\n this.parent.on(events.modelChanged, this.onPropertyChanged, this);\n };\n DropDownButtons.prototype.onIframeMouseDown = function () {\n dispatchEvent(document, 'mousedown');\n };\n DropDownButtons.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.iframeMouseDown, this.onIframeMouseDown);\n this.parent.off(events.rtlMode, this.setRtl);\n this.parent.off(events.beforeDropDownItemRender, this.beforeRender);\n this.parent.off(events.destroy, this.removeEventListener);\n this.parent.off(events.modelChanged, this.onPropertyChanged);\n };\n return DropDownButtons;\n}());\nexport { DropDownButtons };\n","import { select, detach, extend } from '@syncfusion/ej2-base';\nimport { RenderType } from '../base/enum';\nimport * as events from '../base/constant';\nimport * as classes from '../base/classes';\nimport { getIndex, toObjectLowerCase } from '../base/util';\nimport { templateItems, tools } from '../models/items';\n/**\n * `Color Picker` module is used to handle ColorPicker actions.\n */\nvar ColorPickerInput = /** @class */ (function () {\n function ColorPickerInput(parent, serviceLocator) {\n this.tools = {};\n this.parent = parent;\n this.locator = serviceLocator;\n this.renderFactory = this.locator.getService('rendererFactory');\n this.addEventListener();\n if (this.parent.toolbarSettings && Object.keys(this.parent.toolbarSettings.itemConfigs).length > 0) {\n extend(this.tools, tools, toObjectLowerCase(this.parent.toolbarSettings.itemConfigs), true);\n }\n else {\n this.tools = tools;\n }\n }\n ColorPickerInput.prototype.initializeInstance = function () {\n this.toolbarRenderer = this.renderFactory.getRenderer(RenderType.Toolbar);\n };\n /**\n * renderColorPickerInput method\n *\n * @param {IColorPickerRenderArgs} args - specify the arguments.\n * @returns {void}\n * @hidden\n\n */\n ColorPickerInput.prototype.renderColorPickerInput = function (args) {\n var _this = this;\n this.initializeInstance();\n var suffixID = args.containerType;\n var tbElement = args.container;\n var targetID;\n var options;\n templateItems.forEach(function (item) {\n if (getIndex(item, args.items) !== -1) {\n switch (item) {\n case 'fontcolor': {\n targetID = _this.parent.getID() + '_' + suffixID + '_FontColor_Target';\n var fontNode = _this.parent.createElement('input');\n fontNode.id = targetID;\n fontNode.classList.add(classes.CLS_FONT_COLOR_TARGET);\n document.body.appendChild(fontNode);\n options = {\n cssClass: _this.tools[item.toLocaleLowerCase()].icon\n + ' ' + classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_ICONS,\n value: _this.tools[item.toLocaleLowerCase()].value,\n command: _this.tools[item.toLocaleLowerCase()].command,\n subCommand: _this.tools[item.toLocaleLowerCase()].subCommand,\n element: select('#' + _this.parent.getID() + '_' + suffixID + '_FontColor', tbElement),\n target: (targetID)\n };\n _this.fontColorPicker = _this.toolbarRenderer.renderColorPicker(options, 'fontcolor');\n _this.fontColorDropDown = _this.toolbarRenderer.renderColorPickerDropDown(options, 'fontcolor', _this.fontColorPicker);\n break;\n }\n case 'backgroundcolor': {\n targetID = _this.parent.getID() + '_' + suffixID + '_BackgroundColor_Target';\n var backNode = _this.parent.createElement('input');\n backNode.id = targetID;\n backNode.classList.add(classes.CLS_BACKGROUND_COLOR_TARGET);\n document.body.appendChild(backNode);\n options = {\n cssClass: _this.tools[item.toLocaleLowerCase()].icon\n + ' ' + classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_ICONS,\n value: _this.tools[item.toLocaleLowerCase()].value,\n command: _this.tools[item.toLocaleLowerCase()].command,\n subCommand: _this.tools[item.toLocaleLowerCase()].subCommand,\n element: select('#' + _this.parent.getID() + '_' + suffixID + '_BackgroundColor', tbElement),\n target: (targetID)\n };\n _this.backgroundColorPicker = _this.toolbarRenderer.renderColorPicker(options, 'backgroundcolor');\n _this.backgroundColorDropDown = _this.toolbarRenderer.renderColorPickerDropDown(options, 'backgroundcolor', _this.backgroundColorPicker, _this.defaultColorPicker);\n break;\n }\n }\n }\n });\n };\n ColorPickerInput.prototype.destroy = function () {\n this.removeEventListener();\n this.destroyColorPicker();\n };\n /**\n * destroyColorPicker method\n *\n * @returns {void}\n * @hidden\n\n */\n ColorPickerInput.prototype.destroyColorPicker = function () {\n if (this.fontColorPicker && !this.fontColorPicker.isDestroyed) {\n this.fontColorPicker.destroy();\n }\n if (this.backgroundColorPicker && !this.backgroundColorPicker.isDestroyed) {\n this.backgroundColorPicker.destroy();\n }\n if (this.fontColorDropDown && !this.fontColorDropDown.isDestroyed) {\n var innerEle = this.fontColorDropDown.element.querySelector('.e-rte-color-content');\n if (innerEle) {\n detach(innerEle);\n }\n this.fontColorDropDown.destroy();\n }\n if (this.backgroundColorDropDown && !this.backgroundColorDropDown.isDestroyed) {\n var innerEle = this.backgroundColorDropDown.element.querySelector('.e-rte-color-content');\n if (innerEle) {\n this.defaultColorPicker = innerEle.children[0].style.borderBottomColor;\n detach(innerEle);\n }\n this.backgroundColorDropDown.destroy();\n }\n };\n ColorPickerInput.prototype.setRtl = function (args) {\n if (this.fontColorPicker) {\n this.fontColorPicker.setProperties({ enableRtl: args.enableRtl });\n this.fontColorDropDown.setProperties({ enableRtl: args.enableRtl });\n }\n if (this.backgroundColorPicker) {\n this.backgroundColorPicker.setProperties({ enableRtl: args.enableRtl });\n this.backgroundColorDropDown.setProperties({ enableRtl: args.enableRtl });\n }\n };\n ColorPickerInput.prototype.addEventListener = function () {\n this.parent.on(events.toolbarRenderComplete, this.renderColorPickerInput, this);\n this.parent.on(events.rtlMode, this.setRtl, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.parent.on(events.destroyColorPicker, this.destroyColorPicker, this);\n this.parent.on(events.modelChanged, this.onPropertyChanged, this);\n };\n ColorPickerInput.prototype.onPropertyChanged = function (model) {\n var newProp = model.newProp;\n var element;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'fontColor':\n if (this.fontColorPicker) {\n for (var _b = 0, _c = Object.keys(newProp.fontColor); _b < _c.length; _b++) {\n var font = _c[_b];\n switch (font) {\n case 'default': {\n this.fontColorPicker.setProperties({ value: newProp.fontColor.default });\n element = this.fontColorDropDown.element;\n var fontBorder = element.querySelector('.' + this.tools['fontcolor'].icon);\n fontBorder.style.borderBottomColor = newProp.fontColor.default;\n break;\n }\n case 'mode':\n this.fontColorPicker.setProperties({ mode: newProp.fontColor.mode });\n break;\n case 'columns':\n this.fontColorPicker.setProperties({ columns: newProp.fontColor.columns });\n break;\n case 'colorCode':\n this.fontColorPicker.setProperties({ presetColors: newProp.fontColor.colorCode });\n break;\n case 'modeSwitcher':\n this.fontColorPicker.setProperties({ modeSwitcher: newProp.fontColor.modeSwitcher });\n break;\n }\n }\n }\n break;\n case 'backgroundColor':\n if (this.backgroundColorPicker) {\n for (var _d = 0, _e = Object.keys(newProp.backgroundColor); _d < _e.length; _d++) {\n var background = _e[_d];\n switch (background) {\n case 'default': {\n this.backgroundColorPicker.setProperties({ value: newProp.backgroundColor.default });\n element = this.backgroundColorDropDown.element;\n var backgroundBorder = element.querySelector('.' + this.tools['backgroundcolor'].icon);\n backgroundBorder.style.borderBottomColor = newProp.backgroundColor.default;\n break;\n }\n case 'mode':\n this.backgroundColorPicker.setProperties({ mode: newProp.backgroundColor.mode });\n break;\n case 'columns':\n this.backgroundColorPicker.setProperties({ columns: newProp.backgroundColor.columns });\n break;\n case 'colorCode':\n this.backgroundColorPicker.setProperties({ presetColors: newProp.backgroundColor.colorCode });\n break;\n case 'modeSwitcher':\n this.backgroundColorPicker.setProperties({ modeSwitcher: newProp.backgroundColor.modeSwitcher });\n break;\n }\n }\n }\n break;\n }\n }\n };\n ColorPickerInput.prototype.removeEventListener = function () {\n this.parent.off(events.toolbarRenderComplete, this.renderColorPickerInput);\n this.parent.off(events.destroy, this.destroy);\n this.parent.off(events.rtlMode, this.setRtl);\n this.parent.off(events.destroyColorPicker, this.destroyColorPicker);\n this.parent.off(events.modelChanged, this.onPropertyChanged);\n };\n return ColorPickerInput;\n}());\nexport { ColorPickerInput };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n// eslint-disable-next-line @typescript-eslint/triple-slash-reference\n/// \nimport { Event, remove, addClass, removeClass, detach, getValue, setValue } from '@syncfusion/ej2-base';\nimport { EventHandler, Collection, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';\nimport { attributes, getUniqueID, getInstance, KeyboardEvents } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { getModel, Item } from './../common/common';\nimport { DropDownButton } from '../drop-down-button/drop-down-button';\nvar RTL = 'e-rtl';\nvar 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 */\nvar SplitButton = /** @class */ (function (_super) {\n __extends(SplitButton, _super);\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 function SplitButton(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Initialize Angular support.\n *\n * @private\n * @returns {void}\n */\n SplitButton.prototype.preRender = function () {\n var ele = this.element;\n if (ele.tagName === TAGNAME) {\n var ejInstance = getValue('ej2_instances', ele);\n var btn = this.createElement('button', { attrs: { 'type': 'button' } });\n var wrapper = this.createElement(TAGNAME, { className: 'e-' + this.getModuleName() + '-wrapper' });\n for (var 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 SplitButton.prototype.render = function () {\n this.initWrapper();\n this.createPrimaryButton();\n this.renderControl();\n };\n SplitButton.prototype.renderControl = function () {\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 SplitButton.prototype.addItems = function (items, text) {\n _super.prototype.addItems.call(this, 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 SplitButton.prototype.removeItems = function (items, isUniqueId) {\n _super.prototype.removeItems.call(this, items, isUniqueId);\n this.secondaryBtnObj.items = this.items;\n };\n SplitButton.prototype.initWrapper = function () {\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 SplitButton.prototype.createPrimaryButton = function () {\n var 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 SplitButton.prototype.createSecondaryButton = function () {\n var _this = this;\n var 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 var 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 = function (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 = function (args) {\n _this.trigger('open', args);\n };\n dropDownBtnModel.close = function (args) {\n _this.trigger('close', args);\n };\n dropDownBtnModel.select = function (args) {\n _this.trigger('select', args);\n };\n dropDownBtnModel.beforeOpen = function (args) {\n var callBackPromise = new Deferred();\n _this.trigger('beforeOpen', args, function (observedArgs) {\n callBackPromise.resolve(observedArgs);\n });\n return callBackPromise;\n };\n dropDownBtnModel.beforeClose = function (args) {\n var callBackPromise = new Deferred();\n _this.trigger('beforeClose', args, function (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 SplitButton.prototype.setAria = function () {\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 SplitButton.prototype.getModuleName = function () {\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 SplitButton.prototype.toggle = function () {\n this.secondaryBtnObj.toggle();\n };\n SplitButton.prototype.destroy = function () {\n var _this = this;\n var classList = [RTL];\n if (this.cssClass) {\n classList = classList.concat(this.cssClass.split(' '));\n }\n if (this.element) {\n var 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);\n ['aria-label', 'aria-haspopup', 'aria-expanded', 'aria-owns', 'type'].forEach(function (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.prototype.destroy.call(this);\n if (!this.element.getAttribute('class')) {\n this.element.removeAttribute('class');\n }\n };\n SplitButton.prototype.wireEvents = function () {\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 SplitButton.prototype.unWireEvents = function () {\n EventHandler.remove(this.element, 'click', this.primaryBtnClickHandler);\n getInstance(this.element, KeyboardEvents).destroy();\n };\n SplitButton.prototype.primaryBtnClickHandler = function () {\n this.trigger('click', { element: this.element });\n };\n SplitButton.prototype.btnKeyBoardHandler = function (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 SplitButton.prototype.onPropertyChanged = function (newProp, oldProp) {\n var 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 (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\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 SplitButton.prototype.focusIn = function () {\n this.element.focus();\n };\n __decorate([\n Property('')\n ], SplitButton.prototype, \"content\", void 0);\n __decorate([\n Property('')\n ], SplitButton.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], SplitButton.prototype, \"disabled\", void 0);\n __decorate([\n Property('')\n ], SplitButton.prototype, \"iconCss\", void 0);\n __decorate([\n Property('Left')\n ], SplitButton.prototype, \"iconPosition\", void 0);\n __decorate([\n Property(false)\n ], SplitButton.prototype, \"createPopupOnClick\", void 0);\n __decorate([\n Collection([], Item)\n ], SplitButton.prototype, \"items\", void 0);\n __decorate([\n Property('')\n ], SplitButton.prototype, \"target\", void 0);\n __decorate([\n Event()\n ], SplitButton.prototype, \"beforeItemRender\", void 0);\n __decorate([\n Event()\n ], SplitButton.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], SplitButton.prototype, \"beforeClose\", void 0);\n __decorate([\n Event()\n ], SplitButton.prototype, \"click\", void 0);\n __decorate([\n Event()\n ], SplitButton.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], SplitButton.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], SplitButton.prototype, \"select\", void 0);\n __decorate([\n Event()\n ], SplitButton.prototype, \"created\", void 0);\n SplitButton = __decorate([\n NotifyPropertyChanges\n ], SplitButton);\n return SplitButton;\n}(DropDownButton));\nexport { SplitButton };\n/**\n * Deferred is used to handle asynchronous operation.\n */\nvar Deferred = /** @class */ (function () {\n function Deferred() {\n var _this = this;\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(function (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 return Deferred;\n}());\nexport { Deferred };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, EventHandler, Property, Event, Complex, Collection } from '@syncfusion/ej2-base';\nimport { L10n, Internationalization } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, ChildProperty } from '@syncfusion/ej2-base';\nimport { attributes, addClass, removeClass, setStyleAttribute, detach, closest } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, formatUnit, Browser, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { Tooltip, getZindexPartial } from '@syncfusion/ej2-popups';\n/**\n * Configures the ticks data of the Slider.\n */\nvar TicksData = /** @class */ (function (_super) {\n __extends(TicksData, _super);\n function TicksData() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('None')\n ], TicksData.prototype, \"placement\", void 0);\n __decorate([\n Property(10)\n ], TicksData.prototype, \"largeStep\", void 0);\n __decorate([\n Property(1)\n ], TicksData.prototype, \"smallStep\", void 0);\n __decorate([\n Property(false)\n ], TicksData.prototype, \"showSmallTicks\", void 0);\n __decorate([\n Property(null)\n ], TicksData.prototype, \"format\", void 0);\n return TicksData;\n}(ChildProperty));\nexport { TicksData };\n/**\n * It illustrates the color track data in slider.\n * {% codeBlock src='slider/colorrange/index.md' %}{% endcodeBlock %}\n */\nvar ColorRangeData = /** @class */ (function (_super) {\n __extends(ColorRangeData, _super);\n function ColorRangeData() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], ColorRangeData.prototype, \"color\", void 0);\n __decorate([\n Property(null)\n ], ColorRangeData.prototype, \"start\", void 0);\n __decorate([\n Property(null)\n ], ColorRangeData.prototype, \"end\", void 0);\n return ColorRangeData;\n}(ChildProperty));\nexport { ColorRangeData };\n/**\n * It illustrates the limit data in slider.\n * {% codeBlock src='slider/limits/index.md' %}{% endcodeBlock %}\n */\nvar LimitData = /** @class */ (function (_super) {\n __extends(LimitData, _super);\n function LimitData() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], LimitData.prototype, \"enabled\", void 0);\n __decorate([\n Property(null)\n ], LimitData.prototype, \"minStart\", void 0);\n __decorate([\n Property(null)\n ], LimitData.prototype, \"minEnd\", void 0);\n __decorate([\n Property(null)\n ], LimitData.prototype, \"maxStart\", void 0);\n __decorate([\n Property(null)\n ], LimitData.prototype, \"maxEnd\", void 0);\n __decorate([\n Property(false)\n ], LimitData.prototype, \"startHandleFixed\", void 0);\n __decorate([\n Property(false)\n ], LimitData.prototype, \"endHandleFixed\", void 0);\n return LimitData;\n}(ChildProperty));\nexport { LimitData };\n/**\n * It illustrates the tooltip data in slider.\n */\nvar TooltipData = /** @class */ (function (_super) {\n __extends(TooltipData, _super);\n function TooltipData() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], TooltipData.prototype, \"cssClass\", void 0);\n __decorate([\n Property('Before')\n ], TooltipData.prototype, \"placement\", void 0);\n __decorate([\n Property('Focus')\n ], TooltipData.prototype, \"showOn\", void 0);\n __decorate([\n Property(false)\n ], TooltipData.prototype, \"isVisible\", void 0);\n __decorate([\n Property(null)\n ], TooltipData.prototype, \"format\", void 0);\n return TooltipData;\n}(ChildProperty));\nexport { TooltipData };\nvar bootstrapTooltipOffset = 6;\nvar bootstrap4TooltipOffset = 3;\nvar 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 */\nvar Slider = /** @class */ (function (_super) {\n __extends(Slider, _super);\n function Slider(options, element) {\n var _this = _super.call(this, options, element) || this;\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 return _this;\n }\n Slider.prototype.preRender = function () {\n // eslint-disable-next-line\n var 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 Slider.prototype.formChecker = function () {\n var 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 Slider.prototype.initCultureFunc = function () {\n this.internationalization = new Internationalization(this.locale);\n };\n Slider.prototype.initCultureInfo = function () {\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 Slider.prototype.formatString = function (value, formatInfo) {\n var formatValue = null;\n var formatString = null;\n if ((value || value === 0)) {\n formatValue = this.formatNumber(value);\n var numberOfDecimals = this.numberOfDecimals(value);\n formatString = this.internationalization.getNumberFormat(formatInfo)(this.makeRoundNumber(value, numberOfDecimals));\n }\n return { elementVal: formatValue, formatString: formatString };\n };\n Slider.prototype.formatNumber = function (value) {\n var numberOfDecimals = this.numberOfDecimals(value);\n return this.internationalization.getNumberFormat({\n maximumFractionDigits: numberOfDecimals,\n minimumFractionDigits: numberOfDecimals, useGrouping: false\n })(value);\n };\n Slider.prototype.numberOfDecimals = function (value) {\n var decimalPart = value.toString().split('.')[1];\n var numberOfDecimals = !decimalPart || !decimalPart.length ? 0 : decimalPart.length;\n return numberOfDecimals;\n };\n Slider.prototype.makeRoundNumber = function (value, precision) {\n var decimals = precision || 0;\n return Number(value.toFixed(decimals));\n };\n Slider.prototype.fractionalToInteger = function (value) {\n value = (this.numberOfDecimals(value) === 0) ? Number(value).toFixed(this.noOfDecimals) : value;\n var tens = 1;\n for (var 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 Slider.prototype.render = function () {\n var _this = this;\n this.initialize();\n this.initRender();\n this.wireEvents();\n this.setZindex();\n this.renderComplete();\n if (this.element.tagName === 'EJS-SLIDER') {\n if (this.getTheme(this.sliderContainer) == \"none\") {\n setTimeout(function () {\n _this.refresh();\n }, 0);\n }\n }\n };\n Slider.prototype.initialize = function () {\n addClass([this.element], classNames.root);\n this.setCSSClass();\n };\n Slider.prototype.setElementWidth = function (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 Slider.prototype.setCSSClass = function (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 Slider.prototype.setEnabled = function () {\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 Slider.prototype.getTheme = function (container) {\n var theme = window.getComputedStyle(container, ':after').getPropertyValue('content');\n return theme.replace(/['\"]+/g, '');\n };\n /**\n * Initialize the rendering\n * @private\n */\n Slider.prototype.initRender = function () {\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 Slider.prototype.getThemeInitialization = function () {\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.isBootstrap5 = this.getTheme(this.sliderContainer) === 'bootstrap5';\n this.isMaterialTooltip = this.isMaterial && this.type !== 'Range' && this.tooltip.isVisible;\n };\n Slider.prototype.createRangeBar = function () {\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 Slider.prototype.createLimitBar = function () {\n var 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 Slider.prototype.setOrientClass = function () {\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 Slider.prototype.setAriaAttributes = function (element) {\n var _this = this;\n var min = this.min;\n var 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 var 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(function (range, index) {\n var 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 Slider.prototype.createSecondHandle = function () {\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 Slider.prototype.createFirstHandle = function () {\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 Slider.prototype.wireFirstHandleEvt = function (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 Slider.prototype.wireSecondHandleEvt = function (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 Slider.prototype.handleStart = function () {\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 Slider.prototype.transitionEnd = function (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 Slider.prototype.handleFocusOut = function () {\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 Slider.prototype.handleFocus = function (e) {\n this.focusSliderElement();\n this.sliderBarClick(e);\n if (e.currentTarget === this.firstHandle) {\n this.firstHandle.classList.add(classNames.sliderHandleFocused);\n this.firstHandle.classList.add(classNames.sliderTabHandle);\n }\n else {\n this.secondHandle.classList.add(classNames.sliderHandleFocused);\n this.secondHandle.classList.add(classNames.sliderTabHandle);\n }\n EventHandler.add(document, 'mousemove touchmove', this.sliderBarMove, this);\n EventHandler.add(document, 'mouseup touchend', this.sliderBarUp, this);\n };\n Slider.prototype.handleOver = function (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 Slider.prototype.handleLeave = function (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 Slider.prototype.setHandler = function () {\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 Slider.prototype.setEnableRTL = function () {\n this.enableRtl && this.orientation !== 'Vertical' ? addClass([this.sliderContainer], classNames.rtl) :\n removeClass([this.sliderContainer], classNames.rtl);\n var 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 var 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 Slider.prototype.tooltipValue = function () {\n var _this = this;\n var text;\n var 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, function (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 Slider.prototype.setTooltipContent = function () {\n var content;\n content = this.formatContent(this.tooltipFormatInfo, false);\n this.tooltipObj.content = content;\n };\n Slider.prototype.formatContent = function (formatInfo, ariaContent) {\n var content = '';\n var handle1 = this.handleVal1;\n var 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 Slider.prototype.addTooltipClass = function (content) {\n if (this.isMaterialTooltip) {\n var count = content.toString().length;\n if (!this.tooltipElement) {\n var cssClass = count > 4 ? classNames.sliderMaterialRange : classNames.sliderMaterialDefault;\n this.tooltipObj.cssClass = classNames.sliderTooltip + ' ' + cssClass;\n }\n else {\n var 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 Slider.prototype.tooltipPlacement = function () {\n return this.orientation === 'Horizontal' ? (this.tooltip.placement === 'Before' ? 'TopCenter' : 'BottomCenter') :\n (this.tooltip.placement === 'Before' ? 'LeftCenter' : 'RightCenter');\n };\n Slider.prototype.tooltipBeforeOpen = function (args) {\n this.tooltipElement = args.element;\n if (this.tooltip.cssClass) {\n addClass([this.tooltipElement], this.tooltip.cssClass.split(' ').filter(function (css) { return 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 Slider.prototype.tooltipCollision = function (position) {\n if (this.isBootstrap || this.isBootstrap4 || (this.isMaterial && !this.isMaterialTooltip)) {\n var 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 Slider.prototype.materialTooltipEventCallBack = function (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 Slider.prototype.wireMaterialTooltipEvent = function (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 Slider.prototype.tooltipPositionCalculation = function (position) {\n var 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 Slider.prototype.getTooltipTransformProperties = function (className) {\n var transformProperties;\n if (this.tooltipElement) {\n var 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 Slider.prototype.openMaterialTooltip = function () {\n var _this = this;\n if (this.isMaterialTooltip) {\n this.refreshTooltip(this.firstHandle);\n var 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(function () { _this.tooltipElement.style.transition = _this.transition.handle; }, 2500);\n }\n else {\n setTimeout(function () { _this.tooltipElement.style.transition = 'none'; }, 2500);\n }\n }\n };\n Slider.prototype.closeMaterialTooltip = function () {\n var _this = this;\n if (this.isMaterialTooltip) {\n var 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(function () { _this.tooltipElement.style.transition = 'none'; }, 2500);\n }\n };\n Slider.prototype.checkTooltipPosition = function (args) {\n var 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 Slider.prototype.setTooltipTransform = function () {\n var 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 Slider.prototype.renderTooltip = function () {\n this.tooltipObj = new Tooltip({\n showTipPointer: this.isBootstrap || this.isMaterial || this.isBootstrap4 || this.isTailwind || this.isBootstrap5,\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 Slider.prototype.initializeTooltipProps = function () {\n var tooltipShowOn = (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(function (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 Slider.prototype.tooltipBeforeClose = function () {\n this.tooltipElement = undefined;\n this.tooltipCollidedPosition = undefined;\n };\n Slider.prototype.setButtons = function () {\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 Slider.prototype.buttonTitle = function () {\n var enabledRTL = this.enableRtl && this.orientation !== 'Vertical';\n this.l10n.setLocale(this.locale);\n var decrementTitle = this.l10n.getConstant('decrementTitle');\n var 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 Slider.prototype.buttonFocusOut = function () {\n if (this.isMaterial) {\n this.getHandle().classList.remove('e-large-thumb-size');\n }\n };\n Slider.prototype.repeatButton = function (args) {\n var hVal = this.handleValueUpdate();\n var enabledRTL = this.enableRtl && this.orientation !== 'Vertical';\n var 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 Slider.prototype.repeatHandlerMouse = function (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 Slider.prototype.materialChange = function () {\n if (!this.getHandle().classList.contains('e-large-thumb-size')) {\n this.getHandle().classList.add('e-large-thumb-size');\n }\n };\n Slider.prototype.focusHandle = function () {\n if (!this.getHandle().classList.contains(classNames.sliderTabHandle)) {\n this.getHandle().classList.add(classNames.sliderTabHandle);\n }\n };\n Slider.prototype.repeatHandlerUp = function (e) {\n this.changeEvent('changed', e);\n this.closeTooltip();\n clearInterval(this.repeatInterval);\n this.getHandle().focus();\n };\n Slider.prototype.customTickCounter = function (bigNum) {\n var 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 Slider.prototype.renderScale = function () {\n var liElementPosition = 0;\n var orien = this.orientation === 'Vertical' ? 'v' : 'h';\n var spanText;\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 var 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 var min = this.fractionalToInteger(this.min);\n var max = this.fractionalToInteger(this.max);\n var steps = this.fractionalToInteger(smallStep);\n var bigNum = !isNullOrUndefined(this.customValues) && this.customValues.length > 0 && this.customValues.length - 1;\n var customStep = this.customTickCounter(bigNum);\n var count = !isNullOrUndefined(this.customValues) && this.customValues.length > 0 ?\n (bigNum * customStep) + bigNum : Math.abs((max - min) / steps);\n this.element.appendChild(this.ul);\n var li;\n var start = parseFloat(this.min.toString());\n if (orien === 'v') {\n start = parseFloat(this.max.toString());\n }\n var left = 0;\n var islargeTick;\n var tickWidth = 100 / count;\n if (tickWidth === Infinity) {\n tickWidth = 5;\n }\n for (var 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 var largestep = this.fractionalToInteger(this.ticks.largeStep);\n var 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 var repeat = islargeTick ? (this.ticks.placement === 'Both' ? 2 : 1) : 0;\n if (islargeTick) {\n for (var 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 var decimalPoints = void 0;\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 Slider.prototype.ticksAlignment = function (orien, tickWidth, triggerEvent) {\n if (triggerEvent === void 0) { 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 var eventArgs = { ticksWrapper: this.ul, tickElements: this.tickElementCollection };\n if (triggerEvent) {\n this.trigger('renderedTicks', eventArgs);\n }\n this.scaleAlignment();\n };\n Slider.prototype.createTick = function (li, start, tickWidth) {\n var 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 Slider.prototype.formatTicksValue = function (li, start, spanElement, tickWidth) {\n var _this = this;\n var tickText = this.formatNumber(start);\n var text = !isNullOrUndefined(this.ticks) && !isNullOrUndefined(this.ticks.format) ?\n this.formatString(start, this.ticksFormatInfo).formatString : tickText;\n var eventArgs = { value: start, text: text, tickElement: li };\n this.trigger('renderingTicks', eventArgs, function (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 Slider.prototype.scaleAlignment = function () {\n this.tickValuePosition();\n var smallTick = 12;\n var largeTick = 20;\n var half = largeTick / 2;\n var 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 Slider.prototype.tickValuePosition = function () {\n this.firstChild = this.element.querySelector('ul').children[0];\n var first = this.firstChild.getBoundingClientRect();\n var firstChild;\n var otherChild;\n var smallStep = this.ticks.smallStep;\n var 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 var tickElements = [this.sliderContainer.querySelectorAll('.' + classNames.tick + '.' +\n classNames.large + ' .' + classNames.tickValue)];\n var 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 var tickWidth = this.orientation === 'Vertical' ?\n (first.height * 2) : (first.width * 2);\n for (var 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 (var 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 Slider.prototype.setAriaAttrValue = function (element) {\n var ariaValueText;\n var isTickFormatted = ((!isNullOrUndefined(this.ticks) && !isNullOrUndefined(this.ticks.format))) ? true : false;\n var text = !isTickFormatted ?\n this.formatContent(this.ticksFormatInfo, false) : this.formatContent(this.tooltipFormatInfo, false);\n var 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 Slider.prototype.handleValueUpdate = function () {\n var 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 Slider.prototype.getLimitCorrectedValues = function (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 Slider.prototype.focusSliderElement = function () {\n if (!this.isElementFocused) {\n this.element.focus();\n this.isElementFocused = true;\n }\n };\n Slider.prototype.buttonClick = function (args) {\n this.focusSliderElement();\n var value;\n var enabledRTL = this.enableRtl && this.orientation !== 'Vertical';\n var 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 this.focusHandle();\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 Slider.prototype.tooltipToggle = function (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 Slider.prototype.buttonUp = function (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 Slider.prototype.setRangeBar = function () {\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 Slider.prototype.checkValidValueAndPos = function (value) {\n value = this.checkHandleValue(value);\n value = this.checkHandlePosition(value);\n return value;\n };\n Slider.prototype.setLimitBarPositions = function (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 Slider.prototype.setLimitBar = function () {\n if (this.type === 'Default' || this.type === 'MinRange') {\n var fromPosition = (this.getLimitValueAndPosition(this.limits.minStart, this.limits.minStart, this.limits.minEnd, true))[0];\n fromPosition = this.checkValidValueAndPos(fromPosition);\n var 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 var fromMinPostion = (this.getLimitValueAndPosition(this.limits.minStart, this.limits.minStart, this.limits.minEnd, true))[0];\n fromMinPostion = this.checkValidValueAndPos(fromMinPostion);\n var fromMaxpostion = (this.getLimitValueAndPosition(this.limits.minEnd, this.limits.minStart, this.limits.minEnd, true))[0];\n fromMaxpostion = this.checkValidValueAndPos(fromMaxpostion);\n var toMinPostion = (this.getLimitValueAndPosition(this.limits.maxStart, this.limits.maxStart, this.limits.maxEnd, true))[0];\n toMinPostion = this.checkValidValueAndPos(toMinPostion);\n var 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 Slider.prototype.getLimitValueAndPosition = function (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 Slider.prototype.setValue = function () {\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 var 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 Slider.prototype.rangeValueUpdate = function () {\n if (this.value === null || typeof (this.value) !== 'object') {\n this.value = [parseFloat(formatUnit(this.min)), parseFloat(formatUnit(this.max))];\n }\n };\n Slider.prototype.validateRangeValue = function () {\n this.rangeValueUpdate();\n this.setRangeValue();\n };\n Slider.prototype.modifyZindex = function () {\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 Slider.prototype.setHandlePosition = function (event) {\n var _this = this;\n var handle;\n var 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(function (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 Slider.prototype.getHandle = function () {\n return (this.activeHandle === 1) ? this.firstHandle : this.secondHandle;\n };\n Slider.prototype.setRangeValue = function () {\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 Slider.prototype.changeEvent = function (eventName, e) {\n var 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 var 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 Slider.prototype.changeEventArgs = function (eventName, e) {\n var 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 Slider.prototype.setPreviousVal = function (eventName, value) {\n if (eventName === 'change') {\n this.previousVal = value;\n }\n else {\n this.previousChanged = value;\n }\n };\n Slider.prototype.updateRangeValue = function () {\n var 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 var values_1 = this.getLimitValueAndPosition(this.handleVal1, this.limits.minStart, this.limits.minEnd);\n this.handleVal1 = values_1[0];\n this.handlePos1 = values_1[1];\n this.preHandlePos1 = this.handlePos1;\n this.activeHandle = 2;\n values_1 = this.getLimitValueAndPosition(this.handleVal2, this.limits.maxStart, this.limits.maxEnd);\n this.handleVal2 = values_1[0];\n this.handlePos2 = values_1[1];\n this.preHandlePos2 = this.handlePos2;\n }\n };\n Slider.prototype.checkHandlePosition = function (value) {\n var 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 Slider.prototype.checkHandleValue = function (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 var 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 Slider.prototype.reposition = function () {\n var _this = this;\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(function () {\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 Slider.prototype.changeHandleValue = function (value) {\n var 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 Slider.prototype.tempStartEnd = function () {\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 Slider.prototype.xyToPosition = function (position) {\n var pos;\n if (this.min === this.max) {\n return 100;\n }\n if (this.orientation === 'Horizontal') {\n var left = position.x - this.element.getBoundingClientRect().left;\n var num = this.element.offsetWidth / 100;\n this.val = (left / num);\n }\n else {\n var top_1 = position.y - this.element.getBoundingClientRect().top;\n var num = this.element.offsetHeight / 100;\n this.val = 100 - (top_1 / num);\n }\n var 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 Slider.prototype.stepValueCalculation = function (value) {\n if (this.step === 0) {\n this.step = 1;\n }\n var percentStep = (parseFloat(formatUnit(this.step))) / ((parseFloat(formatUnit(this.max)) - parseFloat(formatUnit(this.min))) / 100);\n var 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 Slider.prototype.add = function (a, b, addition) {\n var precision;\n var x = Math.pow(10, precision || 3);\n var 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 Slider.prototype.positionToValue = function (pos) {\n var val;\n var 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 var total = this.add(val, parseFloat(this.min.toString()), true);\n return (total);\n };\n Slider.prototype.sliderBarClick = function (evt) {\n evt.preventDefault();\n // eslint-disable-next-line\n var 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 var handlepos = this.xyToPosition(pos);\n var 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 var 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 var 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 var focusedElement = this.element.querySelector('.' + classNames.sliderTabHandle);\n if (focusedElement && this.getHandle() !== focusedElement) {\n focusedElement.classList.remove(classNames.sliderTabHandle);\n }\n var 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 var 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 Slider.prototype.handleValueAdjust = function (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 Slider.prototype.dragRangeBarMove = function (event) {\n var _a, _b;\n if (event.type !== 'touchmove') {\n event.preventDefault();\n }\n this.rangeBarDragged = true;\n var pos;\n this.rangeBar.style.transition = 'none';\n this.firstHandle.style.transition = 'none';\n this.secondHandle.style.transition = 'none';\n var xPostion;\n var yPostion;\n if (event.type === 'mousemove') {\n _a = [event.clientX, event.clientY], xPostion = _a[0], yPostion = _a[1];\n }\n else {\n _b = [event.changedTouches[0].clientX, event.changedTouches[0].clientY], xPostion = _b[0], yPostion = _b[1];\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 var 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 Slider.prototype.sliderBarUp = function (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 Slider.prototype.sliderBarMove = function (evt) {\n if (evt.type !== 'touchmove') {\n evt.preventDefault();\n }\n var 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 var handlepos = this.xyToPosition(pos);\n var 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 var 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 var 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 var 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 Slider.prototype.dragRangeBarUp = function (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 Slider.prototype.checkRepeatedValue = function (currentValue) {\n if (this.type === 'Range') {\n var 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 Slider.prototype.refreshTooltip = function (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 Slider.prototype.openTooltip = function (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 Slider.prototype.closeTooltip = function () {\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 Slider.prototype.keyDown = function (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 Slider.prototype.wireButtonEvt = function (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 Slider.prototype.rangeBarMousedown = function (event) {\n var _a, _b;\n event.preventDefault();\n this.focusSliderElement();\n if (this.type === 'Range' && this.drag && event.target === this.rangeBar) {\n var xPostion = void 0;\n var yPostion = void 0;\n if (event.type === 'mousedown') {\n _a = [event.clientX, event.clientY], xPostion = _a[0], yPostion = _a[1];\n }\n else if (event.type === 'touchstart') {\n _b = [event.changedTouches[0].clientX, event.changedTouches[0].clientY], xPostion = _b[0], yPostion = _b[1];\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 var 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 Slider.prototype.elementClick = function (event) {\n if (this.isDragComplete) {\n this.isDragComplete = false;\n return;\n }\n event.preventDefault();\n this.focusSliderElement();\n this.sliderBarClick(event);\n this.focusHandle();\n };\n Slider.prototype.wireEvents = function () {\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 Slider.prototype.unwireEvents = function () {\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 Slider.prototype.formResetHandler = function () {\n this.setProperties({ 'value': this.formResetValue }, true);\n this.setValue();\n };\n Slider.prototype.keyUp = function (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 var 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 Slider.prototype.hover = function (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 var curTarget = event.currentTarget;\n if (this.tooltip.isVisible && this.tooltip.showOn !== 'Always' && this.tooltipObj && this.isMaterialTooltip &&\n !curTarget.classList.contains(classNames.sliderHandleFocused) &&\n !curTarget.classList.contains(classNames.sliderTabHandle)) {\n this.closeMaterialTooltip();\n }\n }\n }\n };\n Slider.prototype.sliderFocusOut = function (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 Slider.prototype.removeElement = function (element) {\n if (element.parentNode) {\n element.parentNode.removeChild(element);\n }\n };\n Slider.prototype.changeSliderType = function (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 Slider.prototype.changeRtl = function () {\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 var 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 Slider.prototype.changeOrientation = function () {\n this.changeSliderType(this.type, 'null');\n };\n Slider.prototype.updateConfig = function () {\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 Slider.prototype.limitsPropertyChange = function () {\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 Slider.prototype.getPersistData = function () {\n var 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 Slider.prototype.destroy = function () {\n _super.prototype.destroy.call(this);\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 Slider.prototype.onPropertyChanged = function (newProp, oldProp) {\n var _this = this;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'cssClass':\n this.setCSSClass(oldProp.cssClass);\n break;\n case 'value':\n if (newProp && oldProp) {\n var 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, function (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 Slider.prototype.setReadOnly = function () {\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 Slider.prototype.setMinMaxValue = function () {\n var _this = this;\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, function (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 Slider.prototype.setZindex = function () {\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 Slider.prototype.setTooltip = function (args) {\n this.changeSliderType(this.type, args);\n };\n Slider.prototype.setBarColor = function () {\n var trackPosition;\n var trackClassName;\n var child = this.sliderTrack.lastElementChild;\n while (child) {\n this.sliderTrack.removeChild(child);\n child = this.sliderTrack.lastElementChild;\n }\n for (var 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 var startingPosition = this.checkHandlePosition(this.colorRange[i].start);\n var endPosition = this.checkHandlePosition(this.colorRange[i].end);\n var 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 Slider.prototype.getModuleName = function () {\n return 'slider';\n };\n __decorate([\n Property(null)\n ], Slider.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], Slider.prototype, \"customValues\", void 0);\n __decorate([\n Property(1)\n ], Slider.prototype, \"step\", void 0);\n __decorate([\n Property(null)\n ], Slider.prototype, \"width\", void 0);\n __decorate([\n Property(0)\n ], Slider.prototype, \"min\", void 0);\n __decorate([\n Property(100)\n ], Slider.prototype, \"max\", void 0);\n __decorate([\n Property(false)\n ], Slider.prototype, \"readonly\", void 0);\n __decorate([\n Property('Default')\n ], Slider.prototype, \"type\", void 0);\n __decorate([\n Collection([{}], ColorRangeData)\n ], Slider.prototype, \"colorRange\", void 0);\n __decorate([\n Complex({}, TicksData)\n ], Slider.prototype, \"ticks\", void 0);\n __decorate([\n Complex({}, LimitData)\n ], Slider.prototype, \"limits\", void 0);\n __decorate([\n Property(true)\n ], Slider.prototype, \"enabled\", void 0);\n __decorate([\n Complex({}, TooltipData)\n ], Slider.prototype, \"tooltip\", void 0);\n __decorate([\n Property(false)\n ], Slider.prototype, \"showButtons\", void 0);\n __decorate([\n Property(true)\n ], Slider.prototype, \"enableAnimation\", void 0);\n __decorate([\n Property('Horizontal')\n ], Slider.prototype, \"orientation\", void 0);\n __decorate([\n Property('')\n ], Slider.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], Slider.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Event()\n ], Slider.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Slider.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], Slider.prototype, \"changed\", void 0);\n __decorate([\n Event()\n ], Slider.prototype, \"renderingTicks\", void 0);\n __decorate([\n Event()\n ], Slider.prototype, \"renderedTicks\", void 0);\n __decorate([\n Event()\n ], Slider.prototype, \"tooltipChange\", void 0);\n Slider = __decorate([\n NotifyPropertyChanges\n ], Slider);\n return Slider;\n}(Component));\nexport { Slider };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n/* eslint-disable prefer-spread */\nimport { Component, Event, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';\nimport { Browser, closest, detach, EventHandler, getInstance, select, selectAll, formatUnit } from '@syncfusion/ej2-base';\nimport { addClass, attributes, classList, isNullOrUndefined, L10n } from '@syncfusion/ej2-base';\nimport { remove, removeClass, rippleEffect } from '@syncfusion/ej2-base';\nimport { SplitButton, getModel } from '@syncfusion/ej2-splitbuttons';\nimport { Deferred } from '@syncfusion/ej2-splitbuttons';\nimport { Tooltip, getZindexPartial, Popup } from '@syncfusion/ej2-popups';\nimport { Input } from './../input/index';\nimport { NumericTextBox } from './../numerictextbox/index';\nimport { Slider } from './../slider/slider';\nvar APPLY = 'e-apply';\nvar CANCEL = 'e-cancel';\nvar CURRENT = 'e-current';\nvar CONTAINER = 'e-container';\nvar CTRLBTN = 'e-ctrl-btn';\nvar CTRLSWITCH = 'e-switch-ctrl-btn';\nvar DISABLED = 'e-disabled';\nvar FORMATSWITCH = 'e-value-switch-btn';\nvar HANDLER = 'e-handler';\nvar HEX = 'e-hex';\nvar HIDEHEX = 'e-hide-hex-value';\nvar HIDEOPACITY = 'e-hide-opacity';\nvar HIDERGBA = 'e-hide-switchable-value';\nvar HIDEVALUE = 'e-hide-value';\nvar HIDEVALUESWITCH = 'e-hide-valueswitcher';\nvar HSVAREA = 'e-hsv-color';\nvar HSVCONTAINER = 'e-hsv-container';\nvar INPUTWRAPPER = 'e-selected-value';\nvar MODESWITCH = 'e-mode-switch-btn';\nvar NOCOLOR = 'e-nocolor-item';\nvar OPACITY = 'e-opacity-value';\nvar PALETTES = 'e-palette';\nvar PALETTECONTENT = 'e-color-palette';\nvar PICKERCONTENT = 'e-color-picker';\nvar PREVIEW = 'e-preview-container';\nvar PREVIOUS = 'e-previous';\nvar RTL = 'e-rtl';\nvar SHOWVALUE = 'e-show-value';\nvar SELECT = 'e-selected';\nvar SPLITPREVIEW = 'e-split-preview';\nvar TILE = 'e-tile';\nvar 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 */\nvar ColorPicker = /** @class */ (function (_super) {\n __extends(ColorPicker, _super);\n function ColorPicker(options, element) {\n return _super.call(this, options, element) || this;\n }\n ColorPicker.prototype.preRender = function () {\n var 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 var 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 ColorPicker.prototype.render = function () {\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 ColorPicker.prototype.initWrapper = function () {\n var 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 var value = this.value ? this.roundValue(this.value).toLowerCase() : '#008000ff';\n if (this.noColor && this.mode === 'Palette' && this.value === '') {\n value = '';\n }\n var 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);\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 ColorPicker.prototype.getWrapper = function () {\n return this.element.parentElement;\n };\n ColorPicker.prototype.createWidget = function () {\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 ColorPicker.prototype.createSplitBtn = function () {\n var _this = this;\n var 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 createPopupOnClick: this.createPopupOnClick,\n open: this.onOpen.bind(this),\n click: function () {\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 var 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 var 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 var 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 ColorPicker.prototype.onOpen = function () {\n this.trigger('open', { element: this.container });\n };\n ColorPicker.prototype.getPopupInst = function () {\n return getInstance(this.getPopupEle(), Popup);\n };\n ColorPicker.prototype.bindCallBackEvent = function () {\n var _this = this;\n this.splitBtn.beforeOpen = function (args) {\n var callBackPromise = new Deferred();\n _this.trigger('beforeOpen', args, function (observeOpenArgs) {\n if (!observeOpenArgs.cancel) {\n var 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 = function (args) {\n var callBackPromise = new Deferred();\n if (!isNullOrUndefined(args.event)) {\n var beforeCloseArgs = { element: _this.container, event: args.event, cancel: false };\n _this.trigger('beforeClose', beforeCloseArgs, function (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 ColorPicker.prototype.onPopupClose = function () {\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 ColorPicker.prototype.createPalette = function () {\n classList(this.container, [PALETTECONTENT], [PICKERCONTENT]);\n if (this.presetColors) {\n var paletteGroup = this.createElement('div', { className: 'e-custom-palette' });\n this.appendElement(paletteGroup);\n var 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 (var 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 var 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 ColorPicker.prototype.firstPaletteFocus = function () {\n if (!select('.' + SELECT, this.container.children[0])) {\n selectAll('.' + PALETTES, this.container)[0].focus();\n }\n };\n ColorPicker.prototype.appendPalette = function (colors, key, refEle) {\n var 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 var row;\n var tile;\n var roundedColor;\n for (var 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 ColorPicker.prototype.setNoColor = function () {\n var 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(function (attr) { noColorEle.removeAttribute(attr); });\n noColorEle.style.backgroundColor = '';\n };\n ColorPicker.prototype.appendElement = function (ele, insertPos) {\n if (insertPos === void 0) { insertPos = 0; }\n var 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 ColorPicker.prototype.addTileSelection = function (ele) {\n ele.classList.add(SELECT);\n ele.setAttribute('aria-selected', 'true');\n };\n ColorPicker.prototype.createPicker = function () {\n classList(this.container, [PICKERCONTENT], [PALETTECONTENT]);\n var hsvContainer = this.createElement('div', { className: HSVCONTAINER });\n this.appendElement(hsvContainer);\n hsvContainer.appendChild(this.createElement('div', { className: HSVAREA }));\n var dragHandler = this.createElement('span', { className: HANDLER, attrs: { 'tabindex': '0' } });\n hsvContainer.appendChild(dragHandler);\n if (this.value === null) {\n this.value = '#008000ff';\n }\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 ColorPicker.prototype.setHsvContainerBg = function (h) {\n if (h === void 0) { h = this.hsv[0]; }\n this.getHsvContainer().style.backgroundColor = this.convertToRgbString(this.hsvToRgb(h, 100, 100, 1));\n };\n ColorPicker.prototype.getHsvContainer = function () {\n return select('.' + HSVCONTAINER, this.container);\n };\n ColorPicker.prototype.setHandlerPosition = function () {\n var dragHandler = this.getDragHandler();\n var 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 ColorPicker.prototype.createSlider = function () {\n var sliderPreviewWrapper = this.createElement('div', { className: 'e-slider-preview' });\n this.appendElement(sliderPreviewWrapper, 1);\n this.createPreview(sliderPreviewWrapper);\n var sliderWrapper = this.createElement('div', { className: 'e-colorpicker-slider' });\n sliderPreviewWrapper.insertBefore(sliderWrapper, sliderPreviewWrapper.children[0]);\n var 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 ColorPicker.prototype.createOpacitySlider = function (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 var opacityBgTrack = this.createElement('div', { className: 'e-opacity-empty-track' });\n slider.appendChild(opacityBgTrack);\n this.updateOpacitySliderBg();\n };\n ColorPicker.prototype.updateOpacitySliderBg = function () {\n var direction = this.enableRtl ? 'to left' : 'to right';\n var 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 ColorPicker.prototype.hueChange = function (args) {\n this.hsv[0] = args.value;\n this.setHsvContainerBg();\n this.convertToOtherFormat();\n };\n ColorPicker.prototype.opacityChange = function (args) {\n var value = args.value;\n var pValue = this.rgbToHex(this.rgb);\n this.hsv[3] = value / 100;\n this.rgb[3] = value / 100;\n var cValue = this.rgbToHex(this.rgb);\n this.updateOpacityInput(value);\n var rgb = this.convertToRgbString(this.rgb);\n this.updatePreview(rgb);\n this.triggerEvent(cValue, pValue, rgb);\n };\n ColorPicker.prototype.updateOpacityInput = function (value) {\n if (this.enableOpacity && !this.getWrapper().classList.contains(HIDEVALUE)) {\n var opacityTextBoxInst = getInstance(select('.' + OPACITY, this.container), NumericTextBox);\n opacityTextBoxInst.value = value;\n opacityTextBoxInst.dataBind();\n }\n };\n ColorPicker.prototype.createPreview = function (parentEle) {\n var previewContainer = this.createElement('div', { className: PREVIEW });\n parentEle.appendChild(previewContainer);\n var preview = this.createElement('span', { className: 'e-preview ' + CURRENT });\n previewContainer.appendChild(preview);\n var 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 ColorPicker.prototype.isPicker = function () {\n return !this.container.classList.contains(PALETTECONTENT);\n };\n ColorPicker.prototype.getPopupEle = function () {\n return this.container.parentElement;\n };\n ColorPicker.prototype.createNumericInput = function (element, value, label, max) {\n var _this = this;\n var 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: function (args) {\n if (args.event) {\n _this.inputHandler(args.event);\n }\n }\n });\n numericInput.createElement = this.createElement;\n numericInput.appendTo(element);\n };\n ColorPicker.prototype.createInput = function () {\n var isPicker = this.isPicker();\n var wrapper = this.getWrapper();\n if ((isPicker && !wrapper.classList.contains(HIDEVALUE)) || (!isPicker && wrapper.classList.contains(SHOWVALUE))) {\n var inputWrap = this.createElement('div', { className: INPUTWRAPPER });\n if (isPicker) {\n this.appendElement(inputWrap, 2);\n }\n else {\n this.appendElement(inputWrap, 1);\n }\n var 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 var 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 var label = void 0;\n var value = void 0;\n if (this.isRgb) {\n label = 'RGB';\n value = this.rgb;\n }\n else {\n label = 'HSV';\n value = this.hsv;\n }\n var clsName = ['rh', 'gs', 'bv'];\n for (var 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 ColorPicker.prototype.appendOpacityValue = function (container) {\n this.createNumericInput(container.appendChild(this.createElement('input', { className: OPACITY })), this.rgb[3] * 100, 'A', 100);\n };\n ColorPicker.prototype.appendValueSwitchBtn = function (targetEle) {\n var 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 ColorPicker.prototype.createCtrlBtn = function () {\n if (this.modeSwitcher || this.showButtons) {\n this.l10n.setLocale(this.locale);\n var btnWrapper = this.createElement('div', { className: CTRLSWITCH });\n this.container.appendChild(btnWrapper);\n if (this.showButtons) {\n var controlBtnWrapper = this.createElement('div', { className: CTRLBTN });\n btnWrapper.appendChild(controlBtnWrapper);\n var 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 var 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 ColorPicker.prototype.appendModeSwitchBtn = function () {\n var 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 ColorPicker.prototype.createDragTooltip = function () {\n var _this = this;\n var tooltip = new Tooltip({\n opensOn: 'Custom',\n showTipPointer: false,\n cssClass: 'e-color-picker-tooltip',\n beforeOpen: function (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 ColorPicker.prototype.getTooltipInst = function () {\n return getInstance(this.container, Tooltip);\n };\n ColorPicker.prototype.setTooltipOffset = function (value) {\n this.getTooltipInst().offsetY = value;\n };\n ColorPicker.prototype.toggleDisabled = function (enable) {\n if (enable) {\n this.getWrapper().classList.add(DISABLED);\n }\n else {\n this.getWrapper().classList.remove(DISABLED);\n }\n if (this.showButtons) {\n ([].slice.call(selectAll('.e-btn', this.container))).forEach(function (ele) {\n if (enable) {\n attributes(ele, { 'disabled': '' });\n }\n else {\n ele.removeAttribute('disabled');\n }\n });\n }\n };\n ColorPicker.prototype.convertToRgbString = function (rgb) {\n return rgb.length ? rgb.length === 4 ? 'rgba(' + rgb.join() + ')' : 'rgb(' + rgb.join() + ')' : '';\n };\n ColorPicker.prototype.convertToHsvString = function (hsv) {\n return hsv.length === 4 ? 'hsva(' + hsv.join() + ')' : 'hsv(' + hsv.join() + ')';\n };\n ColorPicker.prototype.updateHsv = function () {\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 ColorPicker.prototype.convertToOtherFormat = function (isKey) {\n if (isKey === void 0) { isKey = false; }\n var pValue = this.rgbToHex(this.rgb);\n this.rgb = this.hsvToRgb.apply(this, this.hsv);\n var cValue = this.rgbToHex(this.rgb);\n var rgba = this.convertToRgbString(this.rgb);\n this.updatePreview(rgba);\n this.updateInput(cValue);\n this.triggerEvent(cValue, pValue, rgba, isKey);\n };\n ColorPicker.prototype.updateInput = function (value) {\n var 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 ColorPicker.prototype.updatePreview = function (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 ColorPicker.prototype.getDragHandler = function () {\n return select('.' + HANDLER, this.container);\n };\n ColorPicker.prototype.removeTileSelection = function () {\n var selectedEle = [].slice.call(selectAll('.' + SELECT, this.container.children[0]));\n selectedEle.forEach(function (ele) {\n ele.classList.remove(SELECT);\n ele.setAttribute('aria-selected', 'false');\n });\n };\n ColorPicker.prototype.convertRgbToNumberArray = function (value) {\n return (value.slice(value.indexOf('(') + 1, value.indexOf(')'))).split(',').map(function (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 ColorPicker.prototype.getValue = function (value, type) {\n if (!value) {\n value = this.value;\n }\n type = !type ? 'hex' : type.toLowerCase();\n if (value[0] === 'r') {\n var cValue = this.convertRgbToNumberArray(value);\n if (type === 'hex' || type === 'hexa') {\n var 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 var 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 var 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 var 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 ColorPicker.prototype.toggle = function () {\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 ColorPicker.prototype.getModuleName = function () {\n return 'colorpicker';\n };\n /**\n * Gets the properties to be maintained in the persisted state.\n *\n * @returns {string} - Persist data\n */\n ColorPicker.prototype.getPersistData = function () {\n return this.addOnPersist(['value']);\n };\n ColorPicker.prototype.wireEvents = function () {\n if (this.isPicker()) {\n var 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 ColorPicker.prototype.formResetHandler = function () {\n this.value = this.initialInputValue;\n attributes(this.element, { 'value': this.initialInputValue });\n };\n ColorPicker.prototype.addCtrlSwitchEvent = function () {\n var ctrlSwitchBtn = select('.' + CTRLSWITCH, this.container);\n if (ctrlSwitchBtn) {\n EventHandler.add(ctrlSwitchBtn, 'click', this.btnClickHandler, this);\n }\n };\n ColorPicker.prototype.pickerKeyDown = function (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 var cValue = this.rgbToHex(this.rgb);\n this.enterKeyHandler(cValue, e);\n }\n }\n };\n ColorPicker.prototype.enterKeyHandler = function (value, e) {\n this.triggerChangeEvent(value);\n if (!this.inline) {\n this.closePopup(e);\n this.splitBtn.element.focus();\n }\n };\n ColorPicker.prototype.closePopup = function (e) {\n var _this = this;\n var beforeCloseArgs = { element: this.container, event: e, cancel: false };\n this.trigger('beforeClose', beforeCloseArgs, function (observedcloseArgs) {\n if (!observedcloseArgs.cancel) {\n _this.splitBtn.toggle();\n _this.onPopupClose();\n }\n });\n };\n ColorPicker.prototype.triggerChangeEvent = function (value) {\n var 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 ColorPicker.prototype.handlerDragPosition = function (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 ColorPicker.prototype.handlerDown = function (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 ColorPicker.prototype.handlerMove = function (e) {\n if (e.type !== 'touchmove') {\n e.preventDefault();\n }\n var x;\n var 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 var 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 ColorPicker.prototype.setHsv = function (clientX, clientY) {\n var ele = select('.' + HSVAREA, this.container);\n var 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 ColorPicker.prototype.handlerEnd = function (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 var 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 ColorPicker.prototype.btnClickHandler = function (e) {\n var 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 ColorPicker.prototype.switchToPalette = function () {\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 ColorPicker.prototype.refreshPopupPos = function () {\n if (!this.inline) {\n var 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 ColorPicker.prototype.formatSwitchHandler = function () {\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 ColorPicker.prototype.updateValue = function (value, format, idx, max) {\n var clsName = ['e-rh-value', 'e-gs-value', 'e-bv-value'];\n var inst;\n for (var 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 ColorPicker.prototype.previewHandler = function (e) {\n var target = e.target;\n var 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 var cValue = this.rgbToHex(this.rgb);\n var 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 ColorPicker.prototype.paletteClickHandler = function (e) {\n e.preventDefault();\n var 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 var cValue = target.getAttribute('aria-label');\n var 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 ColorPicker.prototype.noColorTile = function (isKey) {\n if (isKey === void 0) { isKey = false; }\n var pValue = this.rgbToHex(this.rgb);\n this.rgb = [];\n this.hsv = [];\n this.triggerEvent('', pValue, '', isKey);\n };\n ColorPicker.prototype.switchToPicker = function () {\n var wrapper = this.getWrapper();\n this.trigger('beforeModeSwitch', { element: this.container, mode: 'Picker' });\n this.unWireEvents();\n ([].slice.call(selectAll('.' + PALETTES, this.container))).forEach(function (ele) {\n detach(ele);\n });\n if (wrapper.classList.contains(SHOWVALUE)) {\n detach(select('.' + INPUTWRAPPER, this.container));\n }\n this.container.style.width = '';\n var 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 ColorPicker.prototype.ctrlBtnClick = function (ele, e) {\n if (ele.classList.contains(APPLY)) {\n var 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 ColorPicker.prototype.paletteKeyDown = function (e) {\n var target = e.target;\n if (!target.classList.contains(PALETTES)) {\n return;\n }\n var selectedEle;\n var idx;\n var tiles = [].slice.call(selectAll('.' + TILE, target));\n var prevSelectedEle = (tiles.filter(function (tile) { return 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 var cValue = prevSelectedEle.getAttribute('aria-label');\n this.enterKeyHandler(cValue ? cValue : '', e);\n }\n }\n };\n ColorPicker.prototype.keySelectionChanges = function (newEle) {\n this.removeTileSelection();\n this.addTileSelection(newEle);\n if (newEle.classList.contains(NOCOLOR)) {\n this.noColorTile(true);\n }\n else {\n var cValue = newEle.getAttribute('aria-label');\n var 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 ColorPicker.prototype.tilePosition = function (items, element, cIdx) {\n items = Array.prototype.slice.call(items);\n var n = items.length;\n var emptyCount = this.columns - items[n - 1].parentElement.childElementCount;\n var 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 ColorPicker.prototype.inputHandler = function (e) {\n var target = e.target;\n if (!target.value.length) {\n return;\n }\n var hsv;\n var pValue;\n var label = select('.e-float-text', target.parentElement).textContent;\n switch (label) {\n case 'HEX': {\n var 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 ColorPicker.prototype.inputValueChange = function (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 var cValue = this.rgbToHex(this.rgb);\n this.setHandlerPosition();\n this.updateInput(value ? value : cValue);\n var rgba = this.convertToRgbString(this.rgb);\n this.updatePreview(rgba);\n this.triggerEvent(cValue, pValue, rgba);\n };\n ColorPicker.prototype.triggerEvent = function (cValue, pValue, rgba, isKey) {\n if (isKey === void 0) { isKey = false; }\n var 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 if (this.enableOpacity) {\n this.setProperties({ 'value': cValue }, true);\n }\n else {\n this.setProperties({ 'value': hex }, true);\n }\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 ColorPicker.prototype.destroy = function () {\n var _this = this;\n var wrapper = this.getWrapper();\n _super.prototype.destroy.call(this);\n ['tabindex', 'spellcheck'].forEach(function (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 ColorPicker.prototype.destroyOtherComp = function () {\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 var tooltipInst = this.getTooltipInst();\n tooltipInst.close();\n tooltipInst.destroy();\n this.tooltipEle = null;\n }\n };\n ColorPicker.prototype.isPopupOpen = function () {\n return this.getPopupEle().classList.contains('e-popup-open');\n };\n ColorPicker.prototype.unWireEvents = function () {\n if (this.isPicker()) {\n var 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 ColorPicker.prototype.roundValue = function (value) {\n if (!value) {\n return '';\n }\n if (value[0] !== '#') {\n value = '#' + value;\n }\n var len = value.length;\n if (len === 4) {\n value += 'f';\n len = 5;\n }\n if (len === 5) {\n var tempValue = '';\n for (var i = 1, len_1 = value.length; i < len_1; 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 ColorPicker.prototype.hexToRgb = function (hex) {\n if (!hex) {\n return [];\n }\n hex = hex.trim();\n if (hex.length !== 9) {\n hex = this.roundValue(hex);\n }\n var opacity = Number((parseInt(hex.slice(-2), 16) / 255).toFixed(2));\n hex = hex.slice(1, 7);\n var bigInt = parseInt(hex, 16);\n var 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 ColorPicker.prototype.rgbToHsv = function (r, g, b, opacity) {\n if (this.rgb && !this.rgb.length) {\n return [];\n }\n r /= 255;\n g /= 255;\n b /= 255;\n var max = Math.max(r, g, b);\n var min = Math.min(r, g, b);\n var h;\n var v = max;\n var d = max - min;\n var 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 var 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 ColorPicker.prototype.hsvToRgb = function (h, s, v, opacity) {\n var r;\n var g;\n var 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 var i = Math.floor(h);\n var f = h - i;\n var p = v * (1 - s);\n var q = v * (1 - s * f);\n var 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 var 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 ColorPicker.prototype.rgbToHex = function (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 ColorPicker.prototype.hex = function (x) {\n return ('0' + x.toString(16)).slice(-2);\n };\n ColorPicker.prototype.changeModeSwitcherProp = function (prop) {\n var 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 ColorPicker.prototype.changeShowBtnProps = function (prop) {\n var 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 ColorPicker.prototype.changeValueProp = function (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 var ele = this.container.querySelector('span[aria-label=\"' + this.roundValue(newProp) + '\"]');\n if (ele) {\n this.addTileSelection(ele);\n }\n }\n };\n ColorPicker.prototype.setInputEleProps = function () {\n remove(select('.' + INPUTWRAPPER, this.container));\n this.createInput();\n };\n ColorPicker.prototype.changeDisabledProp = function (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 ColorPicker.prototype.changeCssClassProps = function (newProp, oldProp) {\n var wrapper = this.getWrapper();\n var 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 ColorPicker.prototype.changeRtlProps = function (newProp) {\n if (newProp) {\n addClass([this.getWrapper()], 'e-rtl');\n }\n else {\n removeClass([this.getWrapper()], 'e-rtl');\n }\n };\n ColorPicker.prototype.changePaletteProps = function () {\n detach(this.container.children[0]);\n this.container.style.width = '';\n this.createPalette();\n };\n ColorPicker.prototype.changeOpacityProps = function (newProp) {\n var 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 ColorPicker.prototype.onPropertyChanged = function (newProp, oldProp) {\n var _this = this;\n if (!isNullOrUndefined(newProp.value)) {\n var value = this.roundValue(newProp.value);\n if (value.length === 9) {\n this.element.value = this.roundValue(value).slice(0, 7);\n var 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 var 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 var _loop_1 = function (prop) {\n switch (prop) {\n case 'inline':\n if (newProp.inline) {\n this_1.getWrapper().appendChild(this_1.container);\n this_1.splitBtn.destroy();\n detach(this_1.element.nextElementSibling);\n if (!this_1.container.children.length) {\n this_1.createWidget();\n }\n }\n else {\n this_1.destroyOtherComp();\n this_1.unWireEvents();\n this_1.container.innerHTML = '';\n this_1.createSplitBtn();\n }\n break;\n case 'cssClass': {\n this_1.changeCssClassProps(newProp.cssClass, oldProp.cssClass);\n var props = newProp.cssClass.split(' ').concat(oldProp.cssClass.split(' '));\n props = props.reduce(function (a, b) { if (a.indexOf(b) < 0) {\n a.push(b);\n } return a; }, []);\n var count_1 = 0;\n props.forEach(function (cls) {\n if (count_1 === 0 &&\n (cls === HIDEVALUE || cls === HIDEVALUESWITCH || cls === SHOWVALUE || cls === HIDEHEX || cls === HIDERGBA)) {\n var inputWrap = select('.' + INPUTWRAPPER, _this.container);\n if (inputWrap) {\n remove(select('.' + INPUTWRAPPER, _this.container));\n }\n _this.createInput();\n count_1++;\n }\n });\n break;\n }\n case 'enableRtl':\n if (this_1.isPicker()) {\n this_1.hueSlider.enableRtl = newProp.enableRtl;\n if (this_1.enableOpacity) {\n this_1.opacitySlider.enableRtl = newProp.enableRtl;\n }\n this_1.setInputEleProps();\n }\n this_1.changeRtlProps(newProp.enableRtl);\n break;\n case 'disabled':\n this_1.changeDisabledProp(newProp.disabled);\n break;\n case 'value':\n if (this_1.value !== oldProp.value) {\n this_1.changeValueProp(newProp.value);\n }\n break;\n case 'showButtons':\n this_1.changeShowBtnProps(newProp.showButtons);\n break;\n case 'mode':\n if (newProp.mode === 'Picker') {\n this_1.switchToPicker();\n }\n else {\n this_1.switchToPalette();\n }\n break;\n case 'modeSwitcher':\n this_1.changeModeSwitcherProp(newProp.modeSwitcher);\n break;\n case 'columns':\n case 'presetColors':\n if (!this_1.isPicker()) {\n this_1.changePaletteProps();\n }\n break;\n case 'noColor':\n if (newProp.noColor) {\n if (this_1.mode === 'Palette' && !this_1.modeSwitcher) {\n this_1.setNoColor();\n }\n }\n else {\n this_1.changePaletteProps();\n }\n break;\n case 'enableOpacity':\n this_1.changeOpacityProps(newProp.enableOpacity);\n break;\n }\n };\n var this_1 = this;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n _loop_1(prop);\n }\n };\n /**\n * Sets the focus to Colorpicker\n * its native method\n *\n * @public\n * @returns {void}\n */\n ColorPicker.prototype.focusIn = function () {\n this.element.parentElement.focus();\n };\n __decorate([\n Property('#008000ff')\n ], ColorPicker.prototype, \"value\", void 0);\n __decorate([\n Property('')\n ], ColorPicker.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], ColorPicker.prototype, \"disabled\", void 0);\n __decorate([\n Property('Picker')\n ], ColorPicker.prototype, \"mode\", void 0);\n __decorate([\n Property(true)\n ], ColorPicker.prototype, \"modeSwitcher\", void 0);\n __decorate([\n Property(null)\n ], ColorPicker.prototype, \"presetColors\", void 0);\n __decorate([\n Property(true)\n ], ColorPicker.prototype, \"showButtons\", void 0);\n __decorate([\n Property(10)\n ], ColorPicker.prototype, \"columns\", void 0);\n __decorate([\n Property(false)\n ], ColorPicker.prototype, \"inline\", void 0);\n __decorate([\n Property(false)\n ], ColorPicker.prototype, \"noColor\", void 0);\n __decorate([\n Property(false)\n ], ColorPicker.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(true)\n ], ColorPicker.prototype, \"enableOpacity\", void 0);\n __decorate([\n Property(false)\n ], ColorPicker.prototype, \"createPopupOnClick\", void 0);\n __decorate([\n Event()\n ], ColorPicker.prototype, \"select\", void 0);\n __decorate([\n Event()\n ], ColorPicker.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], ColorPicker.prototype, \"beforeTileRender\", void 0);\n __decorate([\n Event()\n ], ColorPicker.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], ColorPicker.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], ColorPicker.prototype, \"beforeClose\", void 0);\n __decorate([\n Event()\n ], ColorPicker.prototype, \"beforeModeSwitch\", void 0);\n __decorate([\n Event()\n ], ColorPicker.prototype, \"onModeSwitch\", void 0);\n __decorate([\n Event()\n ], ColorPicker.prototype, \"created\", void 0);\n ColorPicker = __decorate([\n NotifyPropertyChanges\n ], ColorPicker);\n return ColorPicker;\n}(Component));\nexport { ColorPicker };\n","import { addClass, Browser, removeClass, EventHandler, formatUnit, isNullOrUndefined, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';\nimport { getInstance, closest, selectAll, detach } from '@syncfusion/ej2-base';\nimport { Toolbar } from '@syncfusion/ej2-navigations';\nimport { DropDownButton } from '@syncfusion/ej2-splitbuttons';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport * as classes from '../base/classes';\nimport * as events from '../base/constant';\nimport { CLS_TOOLBAR, CLS_DROPDOWN_BTN, CLS_RTE_ELEMENTS, CLS_TB_BTN, CLS_INLINE_DROPDOWN, CLS_COLOR_CONTENT, CLS_FONT_COLOR_DROPDOWN, CLS_BACKGROUND_COLOR_DROPDOWN, CLS_COLOR_PALETTE, CLS_FONT_COLOR_PICKER, CLS_BACKGROUND_COLOR_PICKER, CLS_CUSTOM_TILE, CLS_NOCOLOR_ITEM, CLS_BULLETFORMATLIST_TB_BTN, CLS_NUMBERFORMATLIST_TB_BTN, CLS_LIST_PRIMARY_CONTENT } from '../base/classes';\nimport { ColorPicker } from '@syncfusion/ej2-inputs';\nimport { hasClass } from '../base/util';\n/**\n * `Toolbar renderer` module is used to render toolbar in RichTextEditor.\n *\n * @hidden\n\n */\nvar ToolbarRenderer = /** @class */ (function () {\n /**\n * Constructor for toolbar renderer module\n *\n * @param {IRichTextEditor} parent - specifies the parent element.\n */\n function ToolbarRenderer(parent) {\n this.parent = parent;\n this.wireEvent();\n }\n ToolbarRenderer.prototype.wireEvent = function () {\n this.parent.on(events.destroy, this.unWireEvent, this);\n };\n ToolbarRenderer.prototype.unWireEvent = function () {\n this.parent.off(events.destroy, this.unWireEvent);\n if (this.popupOverlay) {\n EventHandler.remove(this.popupOverlay, 'click touchmove', this.onPopupOverlay);\n }\n this.removePopupContainer();\n };\n ToolbarRenderer.prototype.toolbarBeforeCreate = function (e) {\n if (this.mode === 'Extended') {\n e.enableCollision = false;\n }\n };\n ToolbarRenderer.prototype.toolbarCreated = function () {\n this.parent.notify(events.toolbarCreated, this);\n };\n ToolbarRenderer.prototype.toolbarClicked = function (args) {\n if (!this.parent.enabled) {\n return;\n }\n if (!this.parent.readonly || isNullOrUndefined(args.item)) {\n this.parent.notify(events.toolbarClick, args);\n }\n this.parent.trigger('toolbarClick', args);\n };\n ToolbarRenderer.prototype.dropDownSelected = function (args) {\n this.parent.notify(events.dropDownSelect, args);\n this.onPopupOverlay();\n };\n ToolbarRenderer.prototype.beforeDropDownItemRender = function (args) {\n if (this.parent.readonly || !this.parent.enabled) {\n return;\n }\n this.parent.notify(events.beforeDropDownItemRender, args);\n };\n ToolbarRenderer.prototype.dropDownOpen = function (args) {\n if (args.element.parentElement.getAttribute('id').indexOf('TableCell') > -1 && !isNOU(args.element.parentElement.querySelector('.e-cell-merge')) &&\n (!isNOU(args.element.parentElement.querySelector('.e-cell-horizontal-split')) || !isNOU(args.element.parentElement.querySelector('.e-cell-vertical-split')))) {\n var listEle = args.element.querySelectorAll('li');\n if (this.parent.inputElement.querySelectorAll('.e-cell-select').length === 1) {\n addClass([listEle[0]], 'e-disabled');\n removeClass([listEle[1], listEle[2]], 'e-disabled');\n }\n else if (this.parent.inputElement.querySelectorAll('.e-cell-select').length > 1) {\n removeClass([listEle[0]], 'e-disabled');\n addClass([listEle[1], listEle[2]], 'e-disabled');\n }\n }\n if (Browser.isDevice && !args.element.parentElement.classList.contains(classes.CLS_QUICK_DROPDOWN)) {\n this.popupModal(args.element.parentElement);\n }\n this.parent.notify(events.selectionSave, args);\n };\n ToolbarRenderer.prototype.dropDownClose = function (args) {\n this.removePopupContainer();\n this.parent.notify(events.selectionRestore, args);\n };\n ToolbarRenderer.prototype.removePopupContainer = function () {\n if (Browser.isDevice && !isNullOrUndefined(this.popupContainer)) {\n var popupEle = this.popupContainer.querySelector('.e-dropdown-popup.e-tbar-btn.e-control');\n if (popupEle) {\n this.popupContainer.parentNode.insertBefore(popupEle, this.popupContainer.nextSibling);\n popupEle.style.removeProperty('position');\n removeClass([popupEle], 'e-popup-modal');\n }\n detach(this.popupContainer);\n this.popupContainer = undefined;\n }\n };\n /**\n * renderToolbar method\n *\n * @param {IToolbarOptions} args - specifies the arguments.\n * @returns {void}\n * @hidden\n\n */\n ToolbarRenderer.prototype.renderToolbar = function (args) {\n this.setPanel(args.target);\n this.renderPanel();\n this.mode = args.overflowMode;\n args.rteToolbarObj.toolbarObj = new Toolbar({\n items: args.items,\n width: '100%',\n overflowMode: args.overflowMode,\n beforeCreate: this.toolbarBeforeCreate.bind(this),\n created: this.toolbarCreated.bind(this),\n clicked: this.toolbarClicked.bind(this),\n enablePersistence: args.enablePersistence,\n enableRtl: args.enableRtl\n });\n args.rteToolbarObj.toolbarObj.isStringTemplate = true;\n args.rteToolbarObj.toolbarObj.createElement = this.parent.createElement;\n args.rteToolbarObj.toolbarObj.appendTo(args.target);\n };\n /**\n * renderDropDownButton method\n *\n * @param {IDropDownModel} args - specifies the the arguments.\n * @returns {void}\n * @hidden\n\n */\n ToolbarRenderer.prototype.renderDropDownButton = function (args) {\n var _this = this;\n var css;\n args.element.classList.add(CLS_DROPDOWN_BTN);\n css = args.cssClass + ' ' + CLS_RTE_ELEMENTS + ' ' + CLS_TB_BTN;\n if (this.parent.inlineMode.enable && Browser.isDevice) {\n css = css + ' ' + CLS_INLINE_DROPDOWN;\n }\n // eslint-disable-next-line\n var proxy = this;\n var dropDown = new DropDownButton({\n items: args.items,\n iconCss: args.iconCss,\n cssClass: css,\n content: args.content,\n enablePersistence: this.parent.enablePersistence,\n enableRtl: this.parent.enableRtl,\n select: this.dropDownSelected.bind(this),\n beforeOpen: function (args) {\n if (proxy.parent.readonly || !proxy.parent.enabled) {\n args.cancel = true;\n return;\n }\n // eslint-disable-next-line\n for (var index = 0; index < args.element.childNodes.length; index++) {\n var divNode = _this.parent.createElement('div');\n divNode.innerHTML = dropDown.content.trim();\n if (divNode.textContent.trim() !== ''\n && args.element.childNodes[index].textContent.trim() === divNode.textContent.trim()) {\n if (!args.element.childNodes[index].classList.contains('e-active')) {\n addClass([args.element.childNodes[index]], 'e-active');\n }\n }\n else {\n removeClass([args.element.childNodes[index]], 'e-active');\n }\n }\n proxy.parent.notify(events.beforeDropDownOpen, args);\n },\n close: this.dropDownClose.bind(this),\n open: this.dropDownOpen.bind(this),\n beforeItemRender: this.beforeDropDownItemRender.bind(this)\n });\n dropDown.isStringTemplate = true;\n dropDown.createElement = proxy.parent.createElement;\n dropDown.appendTo(args.element);\n args.element.tabIndex = -1;\n var popupElement = document.getElementById(dropDown.element.id + '-popup');\n popupElement.setAttribute('aria-owns', this.parent.getID());\n return dropDown;\n };\n /**\n * renderListDropDown method\n *\n * @param {IDropDownModel} args - specifies the the arguments.\n * @returns {void}\n * @hidden\n\n */\n ToolbarRenderer.prototype.renderListDropDown = function (args) {\n // eslint-disable-next-line\n var proxy = this;\n var css = CLS_RTE_ELEMENTS + ' ' + CLS_TB_BTN + ((this.parent.inlineMode) ? (' ' + CLS_INLINE_DROPDOWN) : '');\n css += (' ' + ((args.itemName === 'NumberFormatList') ? CLS_NUMBERFORMATLIST_TB_BTN : CLS_BULLETFORMATLIST_TB_BTN));\n var content = proxy.parent.createElement('span', { className: CLS_LIST_PRIMARY_CONTENT });\n var inlineEle = proxy.parent.createElement('span', { className: args.cssClass });\n content.appendChild(inlineEle);\n var dropDown = new DropDownButton({\n items: args.items,\n cssClass: css,\n content: args.content,\n enablePersistence: this.parent.enablePersistence,\n enableRtl: this.parent.enableRtl,\n select: this.dropDownSelected.bind(this),\n beforeOpen: function (args) {\n if (proxy.parent.readonly || !proxy.parent.enabled) {\n args.cancel = true;\n return;\n }\n var element = (args.event) ? args.event.target : null;\n proxy.currentElement = dropDown.element;\n proxy.currentDropdown = dropDown;\n if (args.event && args.event.type === 'click' && (element.classList.contains(CLS_LIST_PRIMARY_CONTENT)\n || element.parentElement.classList.contains(CLS_LIST_PRIMARY_CONTENT))) {\n args.cancel = true;\n return;\n }\n proxy.parent.notify(events.beforeDropDownOpen, args);\n },\n close: this.dropDownClose.bind(this),\n open: this.dropDownOpen.bind(this),\n beforeItemRender: this.beforeDropDownItemRender.bind(this)\n });\n dropDown.isStringTemplate = true;\n dropDown.createElement = proxy.parent.createElement;\n dropDown.appendTo(args.element);\n args.element.tabIndex = -1;\n var popupElement = document.getElementById(dropDown.element.id + '-popup');\n popupElement.setAttribute('aria-owns', this.parent.getID());\n if (args.element.childElementCount === 1) {\n dropDown.element.insertBefore(content, dropDown.element.querySelector('.e-caret'));\n }\n args.element.tabIndex = -1;\n dropDown.element.removeAttribute('type');\n return dropDown;\n };\n // eslint-disable-next-line\n ToolbarRenderer.prototype.onPopupOverlay = function (args) {\n if (!isNullOrUndefined(this.popupOverlay)) {\n closest(this.popupOverlay, '.e-popup-container').style.display = 'none';\n this.popupOverlay.style.display = 'none';\n removeClass([this.popupOverlay], 'e-popup-overlay');\n }\n };\n ToolbarRenderer.prototype.setIsModel = function (element) {\n if (!closest(element, '.e-popup-container')) {\n this.popupContainer = this.parent.createElement('div', {\n className: 'e-rte-modal-popup e-popup-container e-center'\n });\n element.parentNode.insertBefore(this.popupContainer, element);\n this.popupContainer.appendChild(element);\n this.popupContainer.style.zIndex = element.style.zIndex;\n this.popupContainer.style.display = 'flex';\n element.style.position = 'relative';\n addClass([element], 'e-popup-modal');\n this.popupOverlay = this.parent.createElement('div', { className: 'e-popup-overlay' });\n // eslint-disable-next-line\n this.popupOverlay.style.zIndex = (parseInt(element.style.zIndex, null) - 1).toString();\n this.popupOverlay.style.display = 'block';\n this.popupContainer.appendChild(this.popupOverlay);\n EventHandler.add(this.popupOverlay, 'click touchmove', this.onPopupOverlay, this);\n }\n else {\n element.parentElement.style.display = 'flex';\n this.popupOverlay = element.nextElementSibling;\n this.popupOverlay.style.display = 'block';\n addClass([this.popupOverlay], 'e-popup-overlay');\n }\n };\n ToolbarRenderer.prototype.paletteSelection = function (dropDownArgs, currentElement) {\n var ele = dropDownArgs.element.querySelector('.e-control.e-colorpicker');\n var colorbox = [].slice.call(selectAll('.e-tile', ele.parentElement));\n removeClass(colorbox, 'e-selected');\n var style = currentElement.querySelector('.' + CLS_RTE_ELEMENTS).style.borderBottomColor;\n (colorbox.filter(function (colorbox) {\n if (colorbox.style.backgroundColor === style) {\n addClass([colorbox], 'e-selected');\n }\n }));\n };\n /**\n * renderColorPickerDropDown method\n *\n * @param {IColorPickerModel} args - specifies the arguments.\n * @param {string} item - specifies the item.\n * @param {ColorPicker} colorPicker - specifies the colorpicker.\n * @returns {void}\n * @hidden\n\n */\n ToolbarRenderer.prototype.renderColorPickerDropDown = function (args, item, colorPicker, defaultColor) {\n var _this = this;\n // eslint-disable-next-line\n var proxy = this;\n var css = CLS_RTE_ELEMENTS + ' ' + CLS_TB_BTN + ((this.parent.inlineMode) ? (' ' + CLS_INLINE_DROPDOWN) : '');\n css += (' ' + ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_DROPDOWN : CLS_FONT_COLOR_DROPDOWN));\n var content = proxy.parent.createElement('span', { className: CLS_COLOR_CONTENT });\n var inlineEle = proxy.parent.createElement('span', { className: args.cssClass });\n var range;\n var initialBackgroundColor = (isNullOrUndefined(defaultColor)) ? proxy.parent.backgroundColor.default : defaultColor;\n inlineEle.style.borderBottomColor = (item === 'backgroundcolor') ?\n initialBackgroundColor : proxy.parent.fontColor.default;\n content.appendChild(inlineEle);\n var dropDown = new DropDownButton({\n target: colorPicker.element.parentElement, cssClass: css,\n enablePersistence: this.parent.enablePersistence, enableRtl: this.parent.enableRtl,\n beforeOpen: function (dropDownArgs) {\n if (proxy.parent.readonly || !proxy.parent.enabled) {\n dropDownArgs.cancel = true;\n return;\n }\n var element = (dropDownArgs.event) ? dropDownArgs.event.target : null;\n proxy.currentElement = dropDown.element;\n proxy.currentDropdown = dropDown;\n proxy.paletteSelection(dropDownArgs, proxy.currentElement);\n if (dropDownArgs.event && dropDownArgs.event.type === 'click' && (element.classList.contains(CLS_COLOR_CONTENT)\n || element.parentElement.classList.contains(CLS_COLOR_CONTENT))) {\n dropDownArgs.cancel = true;\n var colorpickerValue = element.classList.contains(CLS_RTE_ELEMENTS) ? element.style.borderBottomColor :\n element.querySelector('.' + CLS_RTE_ELEMENTS).style.borderBottomColor;\n proxy.parent.notify(events.selectionRestore, {});\n range = proxy.parent.formatter.editorManager.nodeSelection.getRange(proxy.parent.contentModule.getDocument());\n var parentNode = range.startContainer.parentNode;\n if ((range.startContainer.nodeName === 'TD' || range.startContainer.nodeName === 'TH' ||\n (closest(range.startContainer.parentNode, 'td,th')) ||\n (proxy.parent.iframeSettings.enable && !hasClass(parentNode.ownerDocument.querySelector('body'), 'e-lib')))\n && range.collapsed && args.subCommand === 'BackgroundColor') {\n proxy.parent.notify(events.tableColorPickerChanged, {\n item: { command: args.command, subCommand: args.subCommand,\n value: colorpickerValue }\n });\n }\n else {\n proxy.parent.notify(events.colorPickerChanged, { item: { command: args.command, subCommand: args.subCommand,\n value: colorpickerValue }\n });\n }\n return;\n }\n else {\n var ele = dropDownArgs.element.querySelector('.e-control.e-colorpicker');\n var inst = getInstance(ele, ColorPicker);\n inst.showButtons = (dropDownArgs.element.querySelector('.e-color-palette')) ? false : true;\n inst.dataBind();\n }\n dropDownArgs.element.onclick = function (args) {\n if (args.target.classList.contains('e-cancel')) {\n dropDown.toggle();\n }\n };\n },\n open: function (dropDownArgs) {\n _this.setColorPickerContentWidth(colorPicker);\n var focusEle;\n var ele = dropDownArgs.element.querySelector('.e-control.e-colorpicker');\n if (dropDownArgs.element.querySelector('.e-color-palette')) {\n focusEle = ele.parentElement.querySelector('.e-palette');\n }\n else {\n focusEle = ele.parentElement.querySelector('e-handler');\n }\n if (focusEle) {\n focusEle.focus();\n }\n if (Browser.isDevice) {\n _this.popupModal(dropDownArgs.element.parentElement);\n }\n _this.pickerRefresh(dropDownArgs);\n },\n beforeClose: function (dropDownArgs) {\n var element = (dropDownArgs.event) ? dropDownArgs.event.target : null;\n if (dropDownArgs.event && dropDownArgs.event.type === 'click' && (element.classList.contains(CLS_COLOR_CONTENT)\n || element.parentElement.classList.contains(CLS_COLOR_CONTENT))) {\n var colorpickerValue = element.classList.contains(CLS_RTE_ELEMENTS) ? element.style.borderBottomColor :\n element.querySelector('.' + CLS_RTE_ELEMENTS).style.borderBottomColor;\n range = proxy.parent.formatter.editorManager.nodeSelection.getRange(proxy.parent.contentModule.getDocument());\n if ((range.startContainer.nodeName === 'TD' || range.startContainer.nodeName === 'TH' ||\n closest(range.startContainer.parentNode, 'td,th')) && range.collapsed) {\n proxy.parent.notify(events.tableColorPickerChanged, { item: {\n command: args.command, subCommand: args.subCommand,\n value: colorpickerValue\n }\n });\n }\n else {\n proxy.parent.notify(events.colorPickerChanged, { item: { command: args.command, subCommand: args.subCommand,\n value: colorpickerValue }\n });\n }\n return;\n }\n },\n close: function (dropDownArgs) {\n proxy.parent.notify(events.selectionRestore, {});\n var dropElement = closest(dropDownArgs.element.parentElement, '.e-popup-container');\n if (dropElement) {\n dropElement.style.display = 'none';\n dropElement.lastElementChild.style.display = 'none';\n removeClass([dropElement.lastElementChild], 'e-popup-overlay');\n }\n if (Browser.isDevice && !isNullOrUndefined(dropElement)) {\n var popupEle = dropElement.querySelector('.e-dropdown-popup.e-tbar-btn.e-control');\n if (popupEle) {\n dropElement.parentNode.insertBefore(popupEle, dropElement.nextSibling);\n popupEle.style.removeProperty('position');\n removeClass([popupEle], 'e-popup-modal');\n }\n detach(dropElement);\n proxy.popupContainer = undefined;\n }\n }\n });\n dropDown.isStringTemplate = true;\n dropDown.createElement = proxy.parent.createElement;\n args.element.setAttribute('role', 'button');\n dropDown.appendTo(args.element);\n var popupElement = document.getElementById(dropDown.element.id + '-popup');\n popupElement.setAttribute('aria-owns', this.parent.getID());\n dropDown.element.insertBefore(content, dropDown.element.querySelector('.e-caret'));\n args.element.tabIndex = -1;\n dropDown.element.removeAttribute('type');\n dropDown.element.onmousedown = function () {\n proxy.parent.notify(events.selectionSave, {});\n };\n dropDown.element.onkeydown = function () {\n proxy.parent.notify(events.selectionSave, {});\n };\n return dropDown;\n };\n ToolbarRenderer.prototype.pickerRefresh = function (dropDownArgs) {\n if (this.parent.backgroundColor.mode === 'Picker') {\n var popupElem = dropDownArgs.element.parentElement;\n popupElem.style.width = (popupElem.offsetWidth + 5).toString() + 'px';\n getInstance(popupElem, Popup).refreshPosition(popupElem);\n popupElem.style.width = (popupElem.offsetWidth - 5).toString() + 'px';\n }\n };\n ToolbarRenderer.prototype.popupModal = function (element) {\n var popupInst = getInstance(element, Popup);\n popupInst.relateTo = document.body;\n popupInst.position = { X: 0, Y: 0 };\n popupInst.targetType = 'container';\n popupInst.collision = { X: 'fit', Y: 'fit' };\n popupInst.offsetY = 4;\n popupInst.dataBind();\n this.setIsModel(element);\n };\n ToolbarRenderer.prototype.setColorPickerContentWidth = function (colorPicker) {\n var colorPickerContent = colorPicker.element.nextSibling;\n if (colorPickerContent.style.width === '0px') {\n colorPickerContent.style.width = '';\n var borderWidth = parseInt(getComputedStyle(colorPickerContent).borderBottomWidth, 10);\n colorPickerContent.style.width = formatUnit(colorPickerContent.children[0].offsetWidth\n + borderWidth + borderWidth);\n }\n };\n /**\n * renderColorPicker method\n *\n * @param {IColorPickerModel} args - specifies the arguments\n * @param {string} item - specifies the string values\n * @returns {void}\n * @hidden\n\n */\n ToolbarRenderer.prototype.renderColorPicker = function (args, item) {\n // eslint-disable-next-line\n var proxy = this;\n var value;\n var colorPicker = new ColorPicker({\n enablePersistence: this.parent.enablePersistence,\n enableRtl: this.parent.enableRtl,\n inline: true,\n value: '#fff',\n created: function () {\n var value = (item === 'backgroundcolor') ? proxy.parent.backgroundColor.default : proxy.parent.fontColor.default;\n colorPicker.setProperties({ value: value });\n },\n mode: ((item === 'backgroundcolor') ? proxy.parent.backgroundColor.mode : proxy.parent.fontColor.mode),\n modeSwitcher: ((item === 'backgroundcolor') ? proxy.parent.backgroundColor.modeSwitcher : proxy.parent.fontColor.modeSwitcher),\n beforeTileRender: function (args) {\n args.element.classList.add(CLS_COLOR_PALETTE);\n args.element.classList.add(CLS_CUSTOM_TILE);\n if (args.value === '') {\n args.element.classList.add(CLS_NOCOLOR_ITEM);\n }\n },\n change: function (colorPickerArgs) {\n var colorpickerValue = colorPickerArgs.currentValue.rgba;\n colorPickerArgs.item = {\n command: args.command,\n subCommand: args.subCommand,\n value: colorpickerValue\n };\n proxy.parent.notify(events.selectionRestore, {});\n proxy.currentElement.querySelector('.' + CLS_RTE_ELEMENTS).style.borderBottomColor = colorpickerValue;\n var range = proxy.parent.formatter.editorManager.nodeSelection.getRange(proxy.parent.contentModule.getDocument());\n if ((range.startContainer.nodeName === 'TD' || range.startContainer.nodeName === 'TH' || range.startContainer.nodeName === 'BODY' ||\n closest(range.startContainer.parentNode, 'td,th')) && range.collapsed && args.subCommand === 'BackgroundColor') {\n proxy.parent.notify(events.tableColorPickerChanged, colorPickerArgs);\n }\n else {\n proxy.parent.notify(events.colorPickerChanged, colorPickerArgs);\n }\n proxy.currentDropdown.toggle();\n },\n beforeModeSwitch: function (args) {\n value = colorPicker.value;\n if (value === '') {\n colorPicker.setProperties({ value: ((args.mode === 'Picker') ? '#008000ff' : '') }, true);\n }\n colorPicker.showButtons = args.mode === 'Palette' ? false : true;\n }\n });\n colorPicker.isStringTemplate = true;\n colorPicker.columns = (item === 'backgroundcolor') ? this.parent.backgroundColor.columns : this.parent.fontColor.columns;\n colorPicker.presetColors = (item === 'backgroundcolor') ? this.parent.backgroundColor.colorCode :\n this.parent.fontColor.colorCode;\n colorPicker.cssClass = (item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER;\n colorPicker.createElement = this.parent.createElement;\n colorPicker.appendTo(document.getElementById(args.target));\n return colorPicker;\n };\n /**\n * The function is used to render Rich Text Editor toolbar\n *\n * @returns {void}\n * @hidden\n\n */\n ToolbarRenderer.prototype.renderPanel = function () {\n this.getPanel().classList.add(CLS_TOOLBAR);\n };\n /**\n * Get the toolbar element of RichTextEditor\n *\n * @returns {Element} - specifies the element.\n * @hidden\n\n */\n ToolbarRenderer.prototype.getPanel = function () {\n return this.toolbarPanel;\n };\n /**\n * Set the toolbar element of RichTextEditor\n *\n * @returns {void}\n * @param {Element} panel - specifies the element.\n * @hidden\n\n */\n ToolbarRenderer.prototype.setPanel = function (panel) {\n this.toolbarPanel = panel;\n };\n return ToolbarRenderer;\n}());\nexport { ToolbarRenderer };\n","import { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\nimport { ServiceLocator } from '../services/service-locator';\nimport { RendererFactory } from '../services/renderer-factory';\n/**\n * `ToolbarAction` module is used to toolbar click action\n */\nvar ToolbarAction = /** @class */ (function () {\n function ToolbarAction(parent) {\n this.parent = parent;\n this.addEventListener();\n this.serviceLocator = new ServiceLocator;\n this.serviceLocator.register('rendererFactory', new RendererFactory);\n }\n ToolbarAction.prototype.addEventListener = function () {\n this.parent.on(events.toolbarClick, this.toolbarClick, this);\n this.parent.on(events.dropDownSelect, this.dropDownSelect, this);\n this.parent.on(events.colorPickerChanged, this.renderSelection, this);\n this.parent.on(events.destroy, this.removeEventListener, this);\n };\n ToolbarAction.prototype.toolbarClick = function (args) {\n if (isNOU(args.item)) {\n return;\n }\n if (!isNOU(args.item.controlParent)) {\n // eslint-disable-next-line\n var activeEle = args.item.controlParent\n .activeEle;\n if (activeEle) {\n activeEle.tabIndex = -1;\n }\n }\n if (args.item.command === 'NumberFormatList' || args.item.command === 'BulletFormatList') {\n if (args.originalEvent.target.classList.contains('e-order-list') || args.originalEvent.target.classList.contains('e-unorder-list')) {\n args.item.command = 'Lists';\n args.item.subCommand = args.item.subCommand === 'NumberFormatList' ? 'OL' : 'UL';\n }\n }\n if (args.item.command === 'Lists') {\n if (args.originalEvent.target.classList.contains('e-caret') &&\n (args.originalEvent.target.parentElement.classList.contains('e-rte-bulletformatlist-dropdown') || args.originalEvent.target.parentElement.classList.contains('e-rte-numberformatlist-dropdown'))) {\n args.item.command = args.item.subCommand = null;\n }\n }\n this.parent.notify(events.htmlToolbarClick, args);\n this.parent.notify(events.markdownToolbarClick, args);\n };\n ToolbarAction.prototype.dropDownSelect = function (e) {\n this.parent.notify(events.selectionRestore, {});\n if (!(document.body.contains(document.body.querySelector('.e-rte-quick-toolbar'))\n && e.item && (e.item.command === 'Images' || e.item.command === 'Display' || e.item.command === 'Table'))) {\n var value = e.item.controlParent && this.parent.quickToolbarModule && this.parent.quickToolbarModule.tableQTBar\n && this.parent.quickToolbarModule.tableQTBar.element.contains(e.item.controlParent.element) ? 'Table' : null;\n if (e.item.command === 'Lists') {\n var listItem = { listStyle: e.item.value, listImage: e.item.listImage, type: e.item.subCommand };\n this.parent.formatter.process(this.parent, e, e.originalEvent, listItem);\n }\n else {\n this.parent.formatter.process(this.parent, e, e.originalEvent, value);\n }\n }\n this.parent.notify(events.selectionSave, {});\n };\n ToolbarAction.prototype.renderSelection = function (args) {\n this.parent.notify(events.selectionRestore, {});\n this.parent.formatter.process(this.parent, args, args.originalEvent, null);\n this.parent.notify(events.selectionSave, {});\n };\n ToolbarAction.prototype.removeEventListener = function () {\n this.parent.off(events.toolbarClick, this.toolbarClick);\n this.parent.off(events.dropDownSelect, this.dropDownSelect);\n this.parent.off(events.colorPickerChanged, this.renderSelection);\n this.parent.off(events.destroy, this.removeEventListener);\n };\n return ToolbarAction;\n}());\nexport { ToolbarAction };\n","import { addClass, Browser, EventHandler, detach, removeClass, select, selectAll, KeyboardEvents } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined as isNOU, closest, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { setStyleAttribute, extend } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\nimport * as classes from '../base/classes';\nimport { RenderType, ToolbarType } from '../base/enum';\nimport { setToolbarStatus, updateUndoRedoStatus, getTBarItemsIndex, getCollection, toObjectLowerCase, isIDevice } from '../base/util';\nimport { updateDropDownFontFormatLocale } from '../base/util';\nimport * as model from '../models/items';\nimport { ToolbarRenderer } from '../renderer/toolbar-renderer';\nimport { BaseToolbar } from './base-toolbar';\nimport { DropDownButtons } from './dropdown-buttons';\nimport { ToolbarAction } from './toolbar-action';\n/**\n * `Toolbar` module is used to handle Toolbar actions.\n */\nvar Toolbar = /** @class */ (function () {\n function Toolbar(parent, serviceLocator) {\n this.parent = parent;\n this.isToolbar = false;\n this.locator = serviceLocator;\n this.isTransformChild = false;\n this.renderFactory = this.locator.getService('rendererFactory');\n model.updateDropDownLocale(this.parent);\n updateDropDownFontFormatLocale(this.parent);\n this.renderFactory.addRenderer(RenderType.Toolbar, new ToolbarRenderer(this.parent));\n this.toolbarRenderer = this.renderFactory.getRenderer(RenderType.Toolbar);\n this.baseToolbar = new BaseToolbar(this.parent, this.locator);\n this.addEventListener();\n if (this.parent.toolbarSettings && Object.keys(this.parent.toolbarSettings.itemConfigs).length > 0) {\n extend(this.tools, model.tools, toObjectLowerCase(this.parent.toolbarSettings.itemConfigs), true);\n }\n else {\n this.tools = model.tools;\n }\n }\n Toolbar.prototype.initializeInstance = function () {\n this.contentRenderer = this.renderFactory.getRenderer(RenderType.Content);\n this.editableElement = this.contentRenderer.getEditPanel();\n this.editPanel = this.contentRenderer.getPanel();\n };\n Toolbar.prototype.toolbarBindEvent = function () {\n if (!this.parent.inlineMode.enable) {\n this.keyBoardModule = new KeyboardEvents(this.getToolbarElement(), {\n keyAction: this.toolBarKeyDown.bind(this), keyConfigs: this.parent.formatter.keyConfig, eventName: 'keydown'\n });\n }\n };\n Toolbar.prototype.toolBarKeyDown = function (e) {\n switch (e.action) {\n case 'escape':\n this.parent.contentModule.getEditPanel().focus();\n break;\n }\n };\n Toolbar.prototype.createToolbarElement = function () {\n this.tbElement = this.parent.createElement('div', { id: this.parent.getID() + '_toolbar' });\n if (!Browser.isDevice && this.parent.inlineMode.enable && isIDevice()) {\n return;\n }\n else {\n if (this.parent.toolbarSettings.enableFloating && !this.parent.inlineMode.enable) {\n this.tbWrapper = this.parent.createElement('div', {\n id: this.parent.getID() + '_toolbar_wrapper',\n innerHTML: this.tbElement.outerHTML,\n className: classes.CLS_TB_WRAP\n });\n this.tbElement = this.tbWrapper.firstElementChild;\n this.parent.element.insertBefore(this.tbWrapper, this.editPanel);\n }\n else {\n this.parent.element.insertBefore(this.tbElement, this.editPanel);\n }\n }\n };\n Toolbar.prototype.getToolbarMode = function () {\n var tbMode;\n switch (this.parent.toolbarSettings.type) {\n case ToolbarType.Expand:\n tbMode = 'Extended';\n break;\n case ToolbarType.Scrollable:\n tbMode = 'Scrollable';\n break;\n default:\n tbMode = 'MultiRow';\n }\n if (isIDevice() && this.parent.toolbarSettings.type === ToolbarType.Expand) {\n tbMode = ToolbarType.Scrollable;\n }\n return tbMode;\n };\n Toolbar.prototype.checkToolbarResponsive = function (ele) {\n if (!Browser.isDevice || isIDevice()) {\n return false;\n }\n var tBarMode;\n if (this.parent.toolbarSettings.type === ToolbarType.Expand) {\n tBarMode = ToolbarType.MultiRow;\n }\n else {\n tBarMode = this.parent.toolbarSettings.type;\n }\n this.baseToolbar.render({\n container: ((this.parent.inlineMode.enable) ? 'quick' : 'toolbar'),\n items: this.parent.toolbarSettings.items,\n mode: tBarMode,\n target: ele\n });\n if (this.parent.toolbarSettings.type === ToolbarType.Expand) {\n addClass([ele], ['e-rte-tb-mobile']);\n if (this.parent.inlineMode.enable) {\n this.addFixedTBarClass();\n }\n else {\n addClass([ele], [classes.CLS_TB_STATIC]);\n }\n }\n this.wireEvents();\n this.dropDownModule.renderDropDowns({\n container: ele,\n containerType: ((this.parent.inlineMode.enable) ? 'quick' : 'toolbar'),\n items: this.parent.toolbarSettings.items\n });\n this.parent.notify(events.renderColorPicker, {\n container: this.tbElement,\n containerType: ((this.parent.inlineMode.enable) ? 'quick' : 'toolbar'),\n items: this.parent.toolbarSettings.items\n });\n return true;\n };\n Toolbar.prototype.checkIsTransformChild = function () {\n this.isTransformChild = false;\n var transformElements = selectAll('[style*=\"transform\"]', document);\n for (var i = 0; i < transformElements.length; i++) {\n if (!isNullOrUndefined(transformElements[i].contains) && transformElements[i].contains(this.parent.element)) {\n this.isTransformChild = true;\n break;\n }\n }\n };\n Toolbar.prototype.toggleFloatClass = function (e) {\n var topValue;\n var isBody = false;\n var isFloat = false;\n var scrollParent;\n var floatOffset = this.parent.floatingToolbarOffset;\n if (e && this.parent.iframeSettings.enable && this.parent.inputElement.ownerDocument === e.target) {\n scrollParent = e.target.body;\n }\n else if (e && e.target !== document) {\n scrollParent = e.target;\n }\n else {\n isBody = true;\n scrollParent = document.body;\n }\n var tbHeight = this.getToolbarHeight() + this.getExpandTBarPopHeight();\n if (this.isTransformChild) {\n topValue = 0;\n var scrollParentRelativeTop = 0;\n var trgHeight = this.parent.element.offsetHeight;\n if (isBody) {\n var bodyStyle = window.getComputedStyle(scrollParent);\n scrollParentRelativeTop = parseFloat(bodyStyle.marginTop.split('px')[0]) + parseFloat(bodyStyle.paddingTop.split('px')[0]);\n }\n var targetTop = this.parent.element.getBoundingClientRect().top;\n var scrollParentYOffset = (Browser.isMSPointer && isBody) ? window.pageYOffset : scrollParent.parentElement.scrollTop;\n var scrollParentRect = scrollParent.getBoundingClientRect();\n var scrollParentTop = (!isBody) ? scrollParentRect.top : (scrollParentRect.top + scrollParentYOffset);\n var outOfRange = ((targetTop - ((!isBody) ? scrollParentTop : 0))\n + trgHeight > tbHeight + floatOffset) ? false : true;\n if (targetTop > (scrollParentTop + floatOffset) || targetTop < -trgHeight || ((targetTop < 0) ? outOfRange : false)) {\n isFloat = false;\n removeClass([this.tbElement], [classes.CLS_TB_ABS_FLOAT]);\n }\n else if (targetTop < (scrollParentTop + floatOffset)) {\n if (targetTop < 0) {\n topValue = (-targetTop) + scrollParentTop;\n }\n else {\n topValue = scrollParentTop - targetTop;\n }\n topValue = (isBody) ? topValue - scrollParentRelativeTop : topValue;\n addClass([this.tbElement], [classes.CLS_TB_ABS_FLOAT]);\n isFloat = true;\n }\n }\n else {\n var parent_1 = this.parent.element.getBoundingClientRect();\n if (window.innerHeight < parent_1.top) {\n return;\n }\n topValue = (e && e.target !== document) ? scrollParent.getBoundingClientRect().top : 0;\n if ((parent_1.bottom < (floatOffset + tbHeight + topValue)) || parent_1.bottom < 0 || parent_1.top > floatOffset + topValue) {\n isFloat = false;\n }\n else if (parent_1.top < floatOffset) {\n isFloat = true;\n }\n }\n if (!isFloat) {\n removeClass([this.tbElement], [classes.CLS_TB_FLOAT]);\n setStyleAttribute(this.tbElement, { top: 0 + 'px', width: '100%' });\n }\n else {\n addClass([this.tbElement], [classes.CLS_TB_FLOAT]);\n setStyleAttribute(this.tbElement, { width: this.parent.element.offsetWidth + 'px', top: (floatOffset + topValue) + 'px' });\n }\n };\n Toolbar.prototype.renderToolbar = function () {\n this.initializeInstance();\n this.createToolbarElement();\n if (this.checkToolbarResponsive(this.tbElement)) {\n return;\n }\n if (this.parent.inlineMode.enable) {\n this.parent.notify(events.renderInlineToolbar, {});\n }\n else {\n this.baseToolbar.render({\n container: 'toolbar',\n items: this.parent.toolbarSettings.items,\n mode: this.getToolbarMode(),\n target: this.tbElement\n });\n if (!this.parent.inlineMode.enable) {\n if (this.parent.toolbarSettings.enableFloating) {\n this.checkIsTransformChild();\n this.toggleFloatClass();\n }\n addClass([this.parent.element], [classes.CLS_RTE_TB_ENABLED]);\n if (this.parent.toolbarSettings.type === ToolbarType.Expand) {\n addClass([this.parent.element], [classes.CLS_RTE_EXPAND_TB]);\n }\n }\n }\n this.wireEvents();\n if (this.parent.inlineMode.enable && !isIDevice()) {\n this.addFixedTBarClass();\n }\n if (!this.parent.inlineMode.enable) {\n this.dropDownModule.renderDropDowns({\n container: this.tbElement,\n containerType: 'toolbar',\n items: this.parent.toolbarSettings.items\n });\n this.parent.notify(events.renderColorPicker, {\n container: this.tbElement,\n containerType: 'toolbar',\n items: this.parent.toolbarSettings.items\n });\n this.refreshToolbarOverflow();\n }\n var divEle = this.parent.element.querySelector('.e-rte-srctextarea');\n var iframeEle = this.parent.element.querySelector('.e-source-content');\n if ((!this.parent.iframeSettings.enable && (!isNOU(divEle) && divEle.style.display === 'block')) ||\n (this.parent.iframeSettings.enable && (!isNOU(iframeEle) && iframeEle.style.display === 'block'))) {\n this.parent.notify(events.updateToolbarItem, {\n targetItem: 'SourceCode', updateItem: 'Preview',\n baseToolbar: this.parent.getBaseToolbarObject()\n });\n this.parent.disableToolbarItem(this.parent.toolbarSettings.items);\n }\n };\n /**\n * addFixedTBarClass method\n *\n * @returns {void}\n * @hidden\n\n */\n Toolbar.prototype.addFixedTBarClass = function () {\n addClass([this.tbElement], [classes.CLS_TB_FIXED]);\n };\n /**\n * removeFixedTBarClass method\n *\n * @returns {void}\n * @hidden\n\n */\n Toolbar.prototype.removeFixedTBarClass = function () {\n removeClass([this.tbElement], [classes.CLS_TB_FIXED]);\n };\n Toolbar.prototype.showFixedTBar = function () {\n addClass([this.tbElement], [classes.CLS_SHOW]);\n if (Browser.isIos) {\n addClass([this.tbElement], [classes.CLS_TB_IOS_FIX]);\n }\n };\n Toolbar.prototype.hideFixedTBar = function () {\n // eslint-disable-next-line\n (!this.isToolbar) ? removeClass([this.tbElement], [classes.CLS_SHOW, classes.CLS_TB_IOS_FIX]) : this.isToolbar = false;\n };\n /**\n * updateItem method\n *\n * @param {IUpdateItemsModel} args - specifies the arguments.\n * @returns {void}\n * @hidden\n\n */\n Toolbar.prototype.updateItem = function (args) {\n var item = this.tools[args.updateItem.toLocaleLowerCase()];\n var trgItem = this.tools[args.targetItem.toLocaleLowerCase()];\n var index = getTBarItemsIndex(getCollection(trgItem.subCommand), args.baseToolbar.toolbarObj.items)[0];\n if (!isNOU(index)) {\n var prefixId = this.parent.inlineMode.enable ? '_quick_' : '_toolbar_';\n args.baseToolbar.toolbarObj.items[index].id = this.parent.getID() + prefixId + item.id;\n args.baseToolbar.toolbarObj.items[index].prefixIcon = item.icon;\n args.baseToolbar.toolbarObj.items[index].tooltipText = item.tooltip;\n args.baseToolbar.toolbarObj.items[index].subCommand = item.subCommand;\n args.baseToolbar.toolbarObj.dataBind();\n }\n else {\n this.addTBarItem(args, 0);\n }\n };\n Toolbar.prototype.updateToolbarStatus = function (args) {\n if (!this.tbElement || (this.parent.inlineMode.enable && (isIDevice() || !Browser.isDevice))) {\n return;\n }\n var options = {\n args: args,\n dropDownModule: this.dropDownModule,\n parent: this.parent,\n tbElements: selectAll('.' + classes.CLS_TB_ITEM, this.tbElement),\n tbItems: this.baseToolbar.toolbarObj.items\n };\n setToolbarStatus(options, (this.parent.inlineMode.enable ? true : false), this.parent);\n };\n Toolbar.prototype.fullScreen = function (e) {\n this.parent.fullScreenModule.showFullScreen(e);\n };\n Toolbar.prototype.hideScreen = function (e) {\n this.parent.fullScreenModule.hideFullScreen(e);\n };\n /**\n * getBaseToolbar method\n *\n * @returns {void}\n * @hidden\n\n */\n Toolbar.prototype.getBaseToolbar = function () {\n return this.baseToolbar;\n };\n /**\n * addTBarItem method\n *\n * @param {IUpdateItemsModel} args - specifies the arguments.\n * @param {number} index - specifies the index value.\n * @returns {void}\n * @hidden\n\n */\n Toolbar.prototype.addTBarItem = function (args, index) {\n args.baseToolbar.toolbarObj.addItems([args.baseToolbar.getObject(args.updateItem, 'toolbar')], index);\n };\n /**\n * enableTBarItems method\n *\n * @param {BaseToolbar} baseToolbar - specifies the toolbar.\n * @param {string} items - specifies the string value.\n * @param {boolean} isEnable - specifies the boolean value.\n * @param {boolean} muteToolbarUpdate - specifies the toolbar.\n * @returns {void}\n * @hidden\n\n */\n Toolbar.prototype.enableTBarItems = function (baseToolbar, items, isEnable, muteToolbarUpdate) {\n var trgItems = getTBarItemsIndex(getCollection(items), baseToolbar.toolbarObj.items);\n this.tbItems = selectAll('.' + classes.CLS_TB_ITEM, baseToolbar.toolbarObj.element);\n for (var i = 0; i < trgItems.length; i++) {\n var item = this.tbItems[trgItems[i]];\n if (item) {\n baseToolbar.toolbarObj.enableItems(item, isEnable);\n }\n }\n if (!select('.e-rte-srctextarea', this.parent.element) && !muteToolbarUpdate) {\n updateUndoRedoStatus(baseToolbar, this.parent.formatter.editorManager.undoRedoManager.getUndoStatus());\n }\n };\n /**\n * removeTBarItems method\n *\n * @param {string} items - specifies the string value.\n * @returns {void}\n * @hidden\n\n */\n Toolbar.prototype.removeTBarItems = function (items) {\n if (isNullOrUndefined(this.baseToolbar.toolbarObj)) {\n this.baseToolbar = this.parent.getBaseToolbarObject();\n }\n var trgItems = getTBarItemsIndex(getCollection(items), this.baseToolbar.toolbarObj.items);\n this.tbItems = (this.parent.inlineMode.enable) ? selectAll('.' + classes.CLS_TB_ITEM, this.baseToolbar.toolbarObj.element)\n : selectAll('.' + classes.CLS_TB_ITEM, this.parent.element);\n for (var i = 0; i < trgItems.length; i++) {\n this.baseToolbar.toolbarObj.removeItems(this.tbItems[trgItems[i]]);\n }\n };\n /**\n * getExpandTBarPopHeight method\n *\n * @returns {void}\n * @hidden\n\n */\n Toolbar.prototype.getExpandTBarPopHeight = function () {\n var popHeight = 0;\n if (this.parent.toolbarSettings.type === ToolbarType.Expand && this.tbElement.classList.contains('e-extended-toolbar')) {\n var expandPopup = select('.e-toolbar-extended', this.tbElement);\n if (expandPopup && this.tbElement.classList.contains('e-expand-open')\n || expandPopup && expandPopup.classList.contains('e-popup-open')) {\n addClass([expandPopup], [classes.CLS_VISIBLE]);\n popHeight = popHeight + expandPopup.offsetHeight;\n removeClass([expandPopup], [classes.CLS_VISIBLE]);\n }\n else {\n removeClass([this.tbElement], [classes.CLS_EXPAND_OPEN]);\n }\n }\n return popHeight;\n };\n /**\n * getToolbarHeight method\n *\n * @returns {void}\n * @hidden\n\n */\n Toolbar.prototype.getToolbarHeight = function () {\n return this.tbElement.offsetHeight;\n };\n /**\n * getToolbarElement method\n *\n * @returns {void}\n * @hidden\n\n */\n Toolbar.prototype.getToolbarElement = function () {\n return select('.' + classes.CLS_TOOLBAR, this.parent.element);\n };\n /**\n * refreshToolbarOverflow method\n *\n * @returns {void}\n * @hidden\n\n */\n Toolbar.prototype.refreshToolbarOverflow = function () {\n this.baseToolbar.toolbarObj.refreshOverflow();\n };\n Toolbar.prototype.isToolbarDestroyed = function () {\n return this.baseToolbar.toolbarObj && !this.baseToolbar.toolbarObj.isDestroyed;\n };\n Toolbar.prototype.destroyToolbar = function () {\n if (this.isToolbarDestroyed()) {\n this.parent.unWireScrollElementsEvents();\n this.unWireEvents();\n this.parent.notify(events.destroyColorPicker, {});\n this.dropDownModule.destroyDropDowns();\n this.baseToolbar.toolbarObj.destroy();\n this.removeEventListener();\n removeClass([this.parent.element], [classes.CLS_RTE_TB_ENABLED]);\n removeClass([this.parent.element], [classes.CLS_RTE_EXPAND_TB]);\n var tbWrapper = select('.' + classes.CLS_TB_WRAP, this.parent.element);\n var tbElement = select('.' + classes.CLS_TOOLBAR, this.parent.element);\n if (!isNullOrUndefined(tbWrapper)) {\n detach(tbWrapper);\n }\n else if (!isNullOrUndefined(tbElement)) {\n detach(tbElement);\n }\n }\n };\n /**\n * Destroys the ToolBar.\n *\n * @function destroy\n * @returns {void}\n * @hidden\n\n */\n Toolbar.prototype.destroy = function () {\n if (this.isToolbarDestroyed()) {\n this.destroyToolbar();\n if (this.keyBoardModule) {\n this.keyBoardModule.destroy();\n }\n }\n };\n Toolbar.prototype.scrollHandler = function (e) {\n if (!this.parent.inlineMode.enable) {\n if (this.parent.toolbarSettings.enableFloating && this.getDOMVisibility(this.tbElement)) {\n this.toggleFloatClass(e.args);\n }\n }\n };\n Toolbar.prototype.getDOMVisibility = function (el) {\n if (!el.offsetParent && el.offsetWidth === 0 && el.offsetHeight === 0) {\n return false;\n }\n return true;\n };\n Toolbar.prototype.mouseDownHandler = function () {\n if (Browser.isDevice && this.parent.inlineMode.enable && !isIDevice()) {\n this.showFixedTBar();\n }\n };\n Toolbar.prototype.focusChangeHandler = function () {\n if (Browser.isDevice && this.parent.inlineMode.enable && !isIDevice()) {\n this.isToolbar = false;\n this.hideFixedTBar();\n }\n };\n Toolbar.prototype.dropDownBeforeOpenHandler = function () {\n this.isToolbar = true;\n };\n // eslint-disable-next-line\n Toolbar.prototype.tbFocusHandler = function (e) {\n var activeElm = document.activeElement;\n var isToolbaractive = closest(activeElm, '.e-rte-toolbar');\n if (activeElm === this.parent.getToolbarElement() || isToolbaractive === this.parent.getToolbarElement()) {\n var toolbarItem = this.parent.getToolbarElement().querySelectorAll('.e-expended-nav');\n for (var i = 0; i < toolbarItem.length; i++) {\n if (isNOU(this.parent.getToolbarElement().querySelector('.e-insert-table-btn'))) {\n toolbarItem[i].setAttribute('tabindex', '0');\n }\n else {\n toolbarItem[i].setAttribute('tabindex', '1');\n }\n }\n }\n };\n Toolbar.prototype.tbKeydownHandler = function (e) {\n if (e.target.classList.contains('e-dropdown-btn') ||\n e.target.getAttribute('id') === this.parent.getID() + '_toolbar_CreateTable') {\n e.target.setAttribute('tabindex', '0');\n }\n };\n Toolbar.prototype.toolbarClickHandler = function (e) {\n var trg = closest(e.originalEvent.target, '.e-hor-nav');\n if (trg && this.parent.toolbarSettings.type === ToolbarType.Expand && !isNOU(trg)) {\n if (!trg.classList.contains('e-nav-active')) {\n removeClass([this.tbElement], [classes.CLS_EXPAND_OPEN]);\n this.parent.setContentHeight('toolbar', false);\n }\n else {\n addClass([this.tbElement], [classes.CLS_EXPAND_OPEN]);\n this.parent.setContentHeight('toolbar', true);\n }\n }\n else if (Browser.isDevice || this.parent.inlineMode.enable) {\n this.isToolbar = true;\n }\n if (isNOU(trg) && this.parent.toolbarSettings.type === ToolbarType.Expand) {\n removeClass([this.tbElement], [classes.CLS_EXPAND_OPEN]);\n }\n };\n Toolbar.prototype.wireEvents = function () {\n if (this.parent.inlineMode.enable && isIDevice()) {\n return;\n }\n EventHandler.add(this.tbElement, 'focusin', this.tbFocusHandler, this);\n EventHandler.add(this.tbElement, 'keydown', this.tbKeydownHandler, this);\n };\n Toolbar.prototype.unWireEvents = function () {\n EventHandler.remove(this.tbElement, 'focusin', this.tbFocusHandler);\n EventHandler.remove(this.tbElement, 'keydown', this.tbKeydownHandler);\n };\n Toolbar.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.dropDownModule = new DropDownButtons(this.parent, this.locator);\n this.toolbarActionModule = new ToolbarAction(this.parent);\n this.parent.on(events.initialEnd, this.renderToolbar, this);\n this.parent.on(events.scroll, this.scrollHandler, this);\n this.parent.on(events.bindOnEnd, this.toolbarBindEvent, this);\n this.parent.on(events.toolbarUpdated, this.updateToolbarStatus, this);\n this.parent.on(events.modelChanged, this.onPropertyChanged, this);\n this.parent.on(events.refreshBegin, this.onRefresh, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.parent.on(events.enableFullScreen, this.fullScreen, this);\n this.parent.on(events.disableFullScreen, this.hideScreen, this);\n this.parent.on(events.updateToolbarItem, this.updateItem, this);\n this.parent.on(events.beforeDropDownOpen, this.dropDownBeforeOpenHandler, this);\n this.parent.on(events.expandPopupClick, this.parent.setContentHeight, this.parent);\n this.parent.on(events.focusChange, this.focusChangeHandler, this);\n this.parent.on(events.mouseDown, this.mouseDownHandler, this);\n this.parent.on(events.sourceCodeMouseDown, this.mouseDownHandler, this);\n if (!this.parent.inlineMode.enable && !isIDevice()) {\n this.parent.on(events.toolbarClick, this.toolbarClickHandler, this);\n }\n };\n Toolbar.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.initialEnd, this.renderToolbar);\n this.parent.off(events.scroll, this.scrollHandler);\n this.parent.off(events.bindOnEnd, this.toolbarBindEvent);\n this.parent.off(events.toolbarUpdated, this.updateToolbarStatus);\n this.parent.off(events.modelChanged, this.onPropertyChanged);\n this.parent.off(events.refreshBegin, this.onRefresh);\n this.parent.off(events.destroy, this.destroy);\n this.parent.off(events.enableFullScreen, this.parent.fullScreenModule.showFullScreen);\n this.parent.off(events.disableFullScreen, this.parent.fullScreenModule.hideFullScreen);\n this.parent.off(events.updateToolbarItem, this.updateItem);\n this.parent.off(events.beforeDropDownOpen, this.dropDownBeforeOpenHandler);\n this.parent.off(events.expandPopupClick, this.parent.setContentHeight);\n this.parent.off(events.focusChange, this.focusChangeHandler);\n this.parent.off(events.mouseDown, this.mouseDownHandler);\n this.parent.off(events.sourceCodeMouseDown, this.mouseDownHandler);\n if (!this.parent.inlineMode.enable && !isIDevice()) {\n this.parent.off(events.toolbarClick, this.toolbarClickHandler);\n }\n };\n Toolbar.prototype.onRefresh = function () {\n this.refreshToolbarOverflow();\n this.parent.setContentHeight('', true);\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {RichTextEditorModel} e - specifies the string value\n * @returns {void}\n * @hidden\n\n */\n Toolbar.prototype.onPropertyChanged = function (e) {\n if (!isNullOrUndefined(e.newProp.inlineMode)) {\n for (var _i = 0, _a = Object.keys(e.newProp.inlineMode); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'enable':\n this.refreshToolbar();\n break;\n }\n }\n }\n if (e.module !== this.getModuleName()) {\n return;\n }\n this.refreshToolbar();\n };\n Toolbar.prototype.refreshToolbar = function () {\n if (isNullOrUndefined(this.baseToolbar.toolbarObj)) {\n this.baseToolbar = this.parent.getBaseToolbarObject();\n }\n var tbWrapper = select('.' + classes.CLS_TB_WRAP, this.parent.element);\n var tbElement = select('.' + classes.CLS_TOOLBAR, this.parent.element);\n if (tbElement || tbWrapper) {\n this.destroyToolbar();\n }\n if (this.parent.toolbarSettings.enable) {\n this.addEventListener();\n this.renderToolbar();\n this.parent.wireScrollElementsEvents();\n if (!select('.e-rte-srctextarea', this.parent.element)) {\n updateUndoRedoStatus(this.baseToolbar, this.parent.formatter.editorManager.undoRedoManager.getUndoStatus());\n }\n this.parent.notify(events.dynamicModule, {});\n }\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {void}\n * @hidden\n */\n Toolbar.prototype.getModuleName = function () {\n return 'toolbar';\n };\n return Toolbar;\n}());\nexport { Toolbar };\n","import { isNullOrUndefined, getEnumValue } from '@syncfusion/ej2-base';\nimport { RenderType } from '../base/enum';\n/**\n * RendererFactory\n *\n * @hidden\n\n */\nvar RendererFactory = /** @class */ (function () {\n function RendererFactory() {\n this.rendererMap = {};\n }\n /**\n * addRenderer method\n *\n * @param {RenderType} name - specifies the render type\n * @param {IRenderer} type - specifies the renderer.\n * @returns {void}\n * @hidden\n\n */\n RendererFactory.prototype.addRenderer = function (name, type) {\n var rName = getEnumValue(RenderType, name);\n if (isNullOrUndefined(this.rendererMap[rName])) {\n this.rendererMap[rName] = type;\n }\n };\n /**\n * getRenderer method\n *\n * @param {RenderType} name - specifies the render type\n * @returns {void}\n * @hidden\n\n */\n RendererFactory.prototype.getRenderer = function (name) {\n var rName = getEnumValue(RenderType, name);\n if (isNullOrUndefined(this.rendererMap[rName])) {\n // eslint-disable-next-line\n throw \"The renderer \" + rName + \" is not found\";\n }\n else {\n return this.rendererMap[rName];\n }\n };\n return RendererFactory;\n}());\nexport { RendererFactory };\n","/**\n * Defines types of Render\n *\n * @hidden\n\n */\nexport var RenderType;\n(function (RenderType) {\n /* eslint-disable */\n /** Defines RenderType as Toolbar */\n RenderType[RenderType[\"Toolbar\"] = 0] = \"Toolbar\";\n /** Defines RenderType as Content */\n RenderType[RenderType[\"Content\"] = 1] = \"Content\";\n /** Defines RenderType as Popup */\n RenderType[RenderType[\"Popup\"] = 2] = \"Popup\";\n /** Defines RenderType as LinkToolbar */\n RenderType[RenderType[\"LinkToolbar\"] = 3] = \"LinkToolbar\";\n /** Defines RenderType as TextToolbar */\n RenderType[RenderType[\"TextToolbar\"] = 4] = \"TextToolbar\";\n /** Defines RenderType as ImageToolbar */\n RenderType[RenderType[\"ImageToolbar\"] = 5] = \"ImageToolbar\";\n /** Defines RenderType as InlineToolbar */\n RenderType[RenderType[\"InlineToolbar\"] = 6] = \"InlineToolbar\";\n /** Defines RenderType as TableToolbar */\n RenderType[RenderType[\"TableToolbar\"] = 7] = \"TableToolbar\";\n /* eslint-enable */\n})(RenderType || (RenderType = {}));\n/**\n * Defines types to be used as Toolbar.\n */\nexport var ToolbarType;\n(function (ToolbarType) {\n /* eslint-disable */\n /** Defines ToolbarType as Standard */\n ToolbarType[\"Expand\"] = \"Expand\";\n /** Defines ToolbarType as MultiRow */\n ToolbarType[\"MultiRow\"] = \"MultiRow\";\n /** Defines ToolbarType as Scrollable */\n ToolbarType[\"Scrollable\"] = \"Scrollable\";\n /* eslint-enable */\n})(ToolbarType || (ToolbarType = {}));\n/**\n * Defines the type of dialog, which open or close in the Rich Text Editor.\n */\nexport var DialogType;\n(function (DialogType) {\n /* eslint-disable */\n /** Defines ToolbarType as Standard */\n DialogType[\"InsertLink\"] = \"InsertLink\";\n /** Defines ToolbarType as MultiRow */\n DialogType[\"InsertImage\"] = \"InsertImage\";\n /** Defines ToolbarType as Scrollable */\n DialogType[\"InsertTable\"] = \"InsertTable\";\n /* eslint-enable */\n})(DialogType || (DialogType = {}));\n","/**\n * Defines util methods used by Rich Text Editor.\n */\nimport { isNullOrUndefined as isNOU, addClass, removeClass, selectAll, createElement } from '@syncfusion/ej2-base';\nimport { Browser, detach, SanitizeHtmlHelper, extend } from '@syncfusion/ej2-base';\nimport * as classes from '../base/classes';\nimport * as model from '../models/items';\nimport { toolsLocale, fontNameLocale, formatsLocale, numberFormatListLocale, bulletFormatListLocale } from '../models/default-locale';\nvar undoRedoItems = ['Undo', 'Redo'];\nvar inlineNode = ['a', 'abbr', 'acronym', 'audio', 'b', 'bdi', 'bdo', 'big', 'br', 'button',\n 'canvas', 'cite', 'code', 'data', 'datalist', 'del', 'dfn', 'em', 'embed', 'font', 'i', 'iframe', 'img', 'input',\n 'ins', 'kbd', 'label', 'map', 'mark', 'meter', 'noscript', 'object', 'output', 'picture', 'progress',\n 'q', 'ruby', 's', 'samp', 'script', 'select', 'slot', 'small', 'span', 'strong', 'strike', 'sub', 'sup', 'svg',\n 'template', 'textarea', 'time', 'u', 'tt', 'var', 'video', 'wbr'];\n/**\n * @param {string} val - specifies the string value\n * @param {string} items - specifies the value\n * @returns {number} - returns the number value\n * @hidden\n */\nexport function getIndex(val, items) {\n var index = -1;\n items.some(function (item, i) {\n if (typeof item === 'string' && val === item.toLocaleLowerCase()) {\n index = i;\n return true;\n }\n return false;\n });\n return index;\n}\n/**\n * @param {Element} element - specifies the element\n * @param {string} className - specifies the string value\n * @returns {boolean} - returns the boolean value\n * @hidden\n */\nexport function hasClass(element, className) {\n var hasClass = false;\n if (element.classList.contains(className)) {\n hasClass = true;\n }\n return hasClass;\n}\n/**\n * @param {IDropDownItemModel} items - specifies the item model\n * @param {string} value - specifies the string value\n * @param {string} type - specifies the string value\n * @param {string} returnType - specifies the return type\n * @returns {string} - returns the string value\n * @hidden\n */\nexport function getDropDownValue(items, value, type, returnType) {\n var data;\n var result;\n for (var k = 0; k < items.length; k++) {\n if (type === 'value' && items[k].value.toLocaleLowerCase() === value.toLocaleLowerCase()) {\n data = items[k];\n break;\n }\n else if (type === 'text' && items[k].text.toLocaleLowerCase() === value.toLocaleLowerCase()) {\n data = items[k];\n break;\n }\n else if (type === 'subCommand' && items[k].subCommand.toLocaleLowerCase() === value.toLocaleLowerCase()) {\n data = items[k];\n break;\n }\n }\n if (!isNOU(data)) {\n switch (returnType) {\n case 'text':\n result = data.text;\n break;\n case 'value':\n result = data.value;\n break;\n case 'iconCss':\n result = data.iconCss;\n break;\n }\n }\n return result;\n}\n/**\n * @returns {boolean} - returns the boolean value\n * @hidden\n */\nexport function isIDevice() {\n var result = false;\n if (Browser.isDevice && Browser.isIos) {\n result = true;\n }\n return result;\n}\n/**\n * @param {string} value - specifies the value\n * @returns {string} - returns the string value\n * @hidden\n */\nexport function getFormattedFontSize(value) {\n if (isNOU(value)) {\n return '';\n }\n return value;\n}\n/**\n * @param {MouseEvent} e - specifies the mouse event\n * @param {HTMLElement} parentElement - specifies the parent element\n * @param {boolean} isIFrame - specifies the boolean value\n * @returns {number} - returns the number\n * @hidden\n */\nexport function pageYOffset(e, parentElement, isIFrame) {\n var y = 0;\n if (isIFrame) {\n y = window.pageYOffset + parentElement.getBoundingClientRect().top + e.clientY;\n }\n else {\n y = e.pageY;\n }\n return y;\n}\n/**\n * @param {string} item - specifies the string\n * @param {ServiceLocator} serviceLocator - specifies the service locator\n * @returns {string} - returns the string\n * @hidden\n */\nexport function getTooltipText(item, serviceLocator) {\n var i10n = serviceLocator.getService('rteLocale');\n var itemLocale = toolsLocale[item];\n var tooltipText = i10n.getConstant(itemLocale);\n return tooltipText;\n}\n/**\n * @param {ISetToolbarStatusArgs} e - specifies the e element\n * @param {boolean} isPopToolbar - specifies the boolean value\n * @param {IRichTextEditor} self - specifies the parent element\n * @returns {void}\n * @hidden\n */\nexport function setToolbarStatus(e, isPopToolbar, self) {\n updateDropDownFontFormatLocale(self);\n var dropDown = e.dropDownModule;\n var data = e.args;\n var keys = Object.keys(e.args);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n for (var j = 0; j < e.tbItems.length; j++) {\n var item = e.tbItems[j].subCommand;\n var itemStr = item && item.toLocaleLowerCase();\n if (item && (itemStr === key) || (item === 'UL' && key === 'unorderedlist') || (item === 'OL' && key === 'orderedlist') ||\n (itemStr === 'pre' && key === 'insertcode')) {\n if (typeof data[key] === 'boolean') {\n if (data[key] === true) {\n addClass([e.tbElements[j]], [classes.CLS_ACTIVE]);\n }\n else {\n removeClass([e.tbElements[j]], [classes.CLS_ACTIVE]);\n }\n }\n else if ((typeof data[key] === 'string' || data[key] === null) &&\n getIndex(key, e.parent.toolbarSettings.items) > -1) {\n var value = ((data[key]) ? data[key] : '');\n var result = '';\n switch (key) {\n case 'formats': {\n if (isNOU(dropDown.formatDropDown) || isPopToolbar ||\n (!isNOU(dropDown.formatDropDown) && dropDown.formatDropDown.isDestroyed)) {\n break;\n }\n var formatItems = e.parent.format.types;\n var formatContent = isNOU(e.parent.format.default) ? formatItems[0].text :\n e.parent.format.default;\n result = getDropDownValue(formatItems, value, 'subCommand', 'text');\n dropDown.formatDropDown.content = ('' +\n ''\n + (isNOU(result) ? formatContent : result) +\n '');\n dropDown.formatDropDown.dataBind();\n break;\n }\n case 'alignments': {\n if (isNOU(dropDown.alignDropDown) ||\n (!isNOU(dropDown.alignDropDown) && dropDown.alignDropDown.isDestroyed)) {\n break;\n }\n var alignItems = model.alignmentItems;\n result = getDropDownValue(alignItems, value, 'subCommand', 'iconCss');\n dropDown.alignDropDown.iconCss = isNOU(result) ? 'e-icons e-justify-left' : result;\n dropDown.alignDropDown.dataBind();\n break;\n }\n case 'fontname': {\n if (isNOU(dropDown.fontNameDropDown) || isPopToolbar ||\n (!isNOU(dropDown.fontNameDropDown) && dropDown.fontNameDropDown.isDestroyed)) {\n break;\n }\n var fontNameItems = e.parent.fontFamily.items;\n result = getDropDownValue(fontNameItems, value, 'value', 'text');\n var fontNameContent = isNOU(e.parent.fontFamily.default) ? fontNameItems[0].text :\n e.parent.fontFamily.default;\n var name_1 = (isNOU(result) ? fontNameContent : result);\n e.tbElements[j].title = name_1;\n dropDown.fontNameDropDown.content = ('' +\n ''\n + name_1 + '');\n dropDown.fontNameDropDown.dataBind();\n break;\n }\n case 'fontsize': {\n if (isNOU(dropDown.fontSizeDropDown) ||\n (!isNOU(dropDown.fontSizeDropDown) && dropDown.fontSizeDropDown.isDestroyed)) {\n break;\n }\n var fontSizeItems = e.parent.fontSize.items;\n var fontSizeContent = isNOU(e.parent.fontSize.default) ? fontSizeItems[1].text :\n e.parent.fontSize.default;\n result = getDropDownValue(fontSizeItems, (value === '' ? fontSizeContent.replace(/\\s/g, '') : value), 'value', 'text');\n dropDown.fontSizeDropDown.content = ('' +\n ''\n + getFormattedFontSize(result) + '');\n dropDown.fontSizeDropDown.dataBind();\n break;\n }\n }\n }\n }\n }\n }\n}\n/**\n * @param {string} items - specifies the string value\n * @returns {string[]} - returns the array value\n * @hidden\n */\nexport function getCollection(items) {\n if (typeof items === 'object') {\n return items;\n }\n else {\n return [items];\n }\n}\n/**\n * @param {string[]} items - specifies the array of string value\n * @param {IToolbarItemModel} toolbarItems - specifies the tool bar model\n * @returns {number} - returns the number\n * @hidden\n */\nexport function getTBarItemsIndex(items, toolbarItems) {\n var itemsIndex = [];\n for (var i = 0; i < items.length; i++) {\n for (var j = 0; j < toolbarItems.length; j++) {\n if (toolbarItems[j].type === 'Separator') {\n continue;\n }\n else {\n if (items[i] === 'OrderedList' && toolbarItems[j].subCommand === 'OL') {\n itemsIndex.push(j);\n break;\n }\n else if (items[i] === 'UnorderedList' && toolbarItems[j].subCommand === 'UL') {\n itemsIndex.push(j);\n break;\n }\n else if (items[i] === 'InsertCode' && toolbarItems[j].subCommand === 'Pre') {\n itemsIndex.push(j);\n break;\n }\n else if (items[i] === 'FileManager' && toolbarItems[j].subCommand === 'File') {\n itemsIndex.push(j);\n break;\n }\n else if (typeof (items[i]) === 'object' && items[i].command === 'Custom') {\n itemsIndex.push(i);\n break;\n }\n else if (items[i] === toolbarItems[j].subCommand) {\n itemsIndex.push(j);\n break;\n }\n }\n }\n }\n return itemsIndex;\n}\n/**\n * @param {BaseToolbar} baseToolbar - specifies the base\n * @param {boolean} undoRedoStatus - specifies the boolean value\n * @returns {void}\n * @hidden\n */\nexport function updateUndoRedoStatus(baseToolbar, undoRedoStatus) {\n var i = 0;\n var trgItems = getTBarItemsIndex(getCollection(undoRedoItems), baseToolbar.toolbarObj.items);\n var tbItems = selectAll('.' + classes.CLS_TB_ITEM, baseToolbar.toolbarObj.element);\n var keys = Object.keys(undoRedoStatus);\n for (var _i = 0, keys_2 = keys; _i < keys_2.length; _i++) {\n var key = keys_2[_i];\n var target = tbItems[trgItems[i]];\n if (target) {\n baseToolbar.toolbarObj.enableItems(target, undoRedoStatus[key]);\n }\n i++;\n }\n}\n/**\n * To dispatch the event manually\n *\n * @param {Element} element - specifies the element.\n * @param {string} type - specifies the string type.\n * @returns {void}\n * @hidden\n\n */\nexport function dispatchEvent(element, type) {\n var evt = document.createEvent('HTMLEvents');\n evt.initEvent(type, false, true);\n element.dispatchEvent(evt);\n}\n/**\n * To parse the HTML\n *\n * @param {string} value - specifies the string value\n * @returns {DocumentFragment} - returns the document\n * @hidden\n */\nexport function parseHtml(value) {\n var tempNode = createElement('template');\n tempNode.innerHTML = value;\n if (tempNode.content instanceof DocumentFragment) {\n return tempNode.content;\n }\n else {\n return document.createRange().createContextualFragment(value);\n }\n}\n/**\n * @param {Document} docElement - specifies the document element\n * @param {Element} node - specifies the node\n * @returns {Node[]} - returns the node array\n * @hidden\n */\nexport function getTextNodesUnder(docElement, node) {\n var nodes = [];\n for (node = node.firstChild; node; node = node.nextSibling) {\n if (node.nodeType === 3) {\n nodes.push(node);\n }\n else {\n nodes = nodes.concat(getTextNodesUnder(docElement, node));\n }\n }\n return nodes;\n}\n/**\n * @param {IToolsItemConfigs} obj - specifies the configuration\n * @returns {void}\n * @hidden\n */\nexport function toObjectLowerCase(obj) {\n var convertedValue = {};\n var keys = Object.keys(obj);\n for (var i = 0; i < Object.keys(obj).length; i++) {\n convertedValue[keys[i].toLocaleLowerCase()] = obj[keys[i]];\n }\n return convertedValue;\n}\n/**\n * @param {string} value - specifies the string value\n * @param {IRichTextEditor} rteObj - specifies the rte object\n * @returns {string} - returns the string\n * @hidden\n */\nexport function getEditValue(value, rteObj) {\n var val;\n if (value !== null && value !== '') {\n val = rteObj.enableHtmlEncode ? updateTextNode(decode(value), rteObj) : updateTextNode(value, rteObj);\n rteObj.setProperties({ value: val }, true);\n }\n else {\n if (rteObj.enterKey === 'DIV') {\n val = rteObj.enableHtmlEncode ? '<div><br/></div>' : '
';\n }\n else if (rteObj.enterKey === 'BR') {\n val = rteObj.enableHtmlEncode ? '<br/>' : '
';\n }\n else {\n val = rteObj.enableHtmlEncode ? '<p><br/></p>' : '
';\n }\n }\n return val;\n}\n/**\n * @param {string} value - specifies the value\n * @param {IRichTextEditor} rteObj - specifies the rich text editor instance.\n * @returns {string} - returns the string\n * @hidden\n */\nexport function updateTextNode(value, rteObj) {\n var tempNode = document.createElement('div');\n var resultElm = document.createElement('div');\n var childNodes = tempNode.childNodes;\n tempNode.innerHTML = value;\n tempNode.setAttribute('class', 'tempDiv');\n if (childNodes.length > 0) {\n var isPreviousInlineElem = void 0;\n var previousParent = void 0;\n var insertElem = void 0;\n while (tempNode.firstChild) {\n if (rteObj.enterKey !== 'BR' && ((tempNode.firstChild.nodeName === '#text' &&\n (tempNode.firstChild.textContent.indexOf('\\n') < 0 || tempNode.firstChild.textContent.trim() !== '')) ||\n inlineNode.indexOf(tempNode.firstChild.nodeName.toLocaleLowerCase()) >= 0)) {\n if (!isPreviousInlineElem) {\n if (rteObj.enterKey === 'DIV') {\n insertElem = createElement('div');\n }\n else {\n insertElem = createElement('p');\n }\n resultElm.appendChild(insertElem);\n insertElem.appendChild(tempNode.firstChild);\n }\n else {\n previousParent.appendChild(tempNode.firstChild);\n }\n previousParent = insertElem;\n isPreviousInlineElem = true;\n }\n else if (tempNode.firstChild.nodeName === '#text' && (tempNode.firstChild.textContent === '\\n' ||\n (tempNode.firstChild.textContent.indexOf('\\n') >= 0 && tempNode.firstChild.textContent.trim() === ''))) {\n detach(tempNode.firstChild);\n }\n else {\n resultElm.appendChild(tempNode.firstChild);\n isPreviousInlineElem = false;\n }\n }\n var imageElm = resultElm.querySelectorAll('img');\n for (var i = 0; i < imageElm.length; i++) {\n if (!imageElm[i].classList.contains(classes.CLS_RTE_IMAGE)) {\n imageElm[i].classList.add(classes.CLS_RTE_IMAGE);\n }\n if (!(imageElm[i].classList.contains(classes.CLS_IMGINLINE) ||\n imageElm[i].classList.contains(classes.CLS_IMGBREAK))) {\n imageElm[i].classList.add(classes.CLS_IMGINLINE);\n }\n }\n }\n return resultElm.innerHTML;\n}\n/**\n * @param {IRichTextEditor} rteObj - specifies the rte object\n * @returns {string} - returns the value based on enter configuration.\n * @hidden\n */\nexport function getDefaultValue(rteObj) {\n var currentVal;\n if (rteObj.enterKey === 'DIV') {\n currentVal = rteObj.enableHtmlEncode ? '<div><br/></div>' : '
';\n }\n else if (rteObj.enterKey === 'BR') {\n currentVal = rteObj.enableHtmlEncode ? '<br/>' : '
';\n }\n else {\n currentVal = rteObj.enableHtmlEncode ? '<p><br/></p>' : '
';\n }\n return currentVal;\n}\n/**\n * @param {string} value - specifies the value\n * @returns {boolean} - returns the boolean value\n * @hidden\n */\nexport function isEditableValueEmpty(value) {\n return (value === '
' || value === '<p><br></p>'\n || value === '
' || value === '<div><br></div>'\n || value === '
' || value === '<br>'\n || value === '') ? true : false;\n}\n/**\n * @param {string} value - specifies the string value\n * @returns {string} - returns the string\n * @hidden\n */\nexport function decode(value) {\n return value.replace(/&/g, '&').replace(/</g, '<')\n .replace(/</g, '<').replace(/>/g, '>')\n .replace(/>/g, '>').replace(/ /g, ' ')\n .replace(/ /g, ' ').replace(/"/g, '');\n}\n/**\n * @param {string} value - specifies the string value\n * @param {IRichTextEditor} parent - specifies the rte\n * @returns {string} - returns the string value\n * @hidden\n */\nexport function sanitizeHelper(value, parent) {\n if (parent.enableHtmlSanitizer) {\n var item = SanitizeHtmlHelper.beforeSanitize();\n var beforeEvent = {\n cancel: false,\n helper: null\n };\n extend(item, item, beforeEvent);\n parent.trigger('beforeSanitizeHtml', item);\n if (item.cancel && !isNOU(item.helper)) {\n value = item.helper(value);\n }\n else if (!item.cancel) {\n value = SanitizeHtmlHelper.serializeValue(item, value);\n }\n }\n return value;\n}\n/**\n * @param {string} dataUrl - specifies the string value\n * @returns {BaseToolbar} - returns the value\n * @hidden\n */\n//Converting the base64 url to blob\nexport function convertToBlob(dataUrl) {\n var arr = dataUrl.split(',');\n var mime = arr[0].match(/:(.*?);/)[1];\n var bstr = atob(arr[1]);\n var n = bstr.length;\n var u8arr = new Uint8Array(n);\n while (n--) {\n u8arr[n] = bstr.charCodeAt(n);\n }\n return new Blob([u8arr], { type: mime });\n}\n/**\n * @param {IRichTextEditor} self - specifies the rte\n * @param {string} localeItems - specifies the locale items\n * @param {IDropDownItemModel} item - specifies the dropdown item\n * @returns {string} - returns the value\n * @hidden\n */\nexport function getLocaleFontFormat(self, localeItems, item) {\n for (var i = 0; localeItems.length > i; i++) {\n if (localeItems[i].value === item.value || localeItems[i].value === item.subCommand) {\n return self.localeObj.getConstant(localeItems[i].locale);\n }\n }\n return item.text;\n}\n/**\n * @param {IRichTextEditor} self - specifies the rte\n * @returns {void}\n * @hidden\n */\nexport function updateDropDownFontFormatLocale(self) {\n model.fontFamily.forEach(function (item, i) {\n model.fontFamily[i].text = getLocaleFontFormat(self, fontNameLocale, model.fontFamily[i]);\n });\n model.formatItems.forEach(function (item, i) {\n model.formatItems[i].text = getLocaleFontFormat(self, formatsLocale, model.formatItems[i]);\n });\n model.numberFormatList.forEach(function (item, i) {\n model.numberFormatList[i].text = getLocaleFontFormat(self, numberFormatListLocale, model.numberFormatList[i]);\n });\n model.bulletFormatList.forEach(function (item, i) {\n model.bulletFormatList[i].text = getLocaleFontFormat(self, bulletFormatListLocale, model.bulletFormatList[i]);\n });\n}\n","/**\n * Defines common util methods used by Rich Text Editor.\n */\nimport { isNullOrUndefined, Browser, createElement, detach } from '@syncfusion/ej2-base';\nimport * as classes from '../rich-text-editor/base/classes';\nvar inlineNode = ['a', 'abbr', 'acronym', 'audio', 'b', 'bdi', 'bdo', 'big', 'br', 'button',\n 'canvas', 'cite', 'code', 'data', 'datalist', 'del', 'dfn', 'em', 'embed', 'font', 'i', 'iframe', 'img', 'input',\n 'ins', 'kbd', 'label', 'map', 'mark', 'meter', 'noscript', 'object', 'output', 'picture', 'progress',\n 'q', 'ruby', 's', 'samp', 'script', 'select', 'slot', 'small', 'span', 'strong', 'strike', 'sub', 'sup', 'svg',\n 'template', 'textarea', 'time', 'u', 'tt', 'var', 'video', 'wbr'];\n/**\n * @returns {void}\n * @hidden\n */\nexport function isIDevice() {\n var result = false;\n if (Browser.isDevice && Browser.isIos) {\n result = true;\n }\n return result;\n}\n/**\n * @param {Element} editableElement - specifies the editable element.\n * @param {string} selector - specifies the string values.\n * @returns {void}\n * @hidden\n */\nexport function setEditFrameFocus(editableElement, selector) {\n if (editableElement.nodeName === 'BODY' && !isNullOrUndefined(selector)) {\n var iframe = top.window.document.querySelector(selector);\n if (!isNullOrUndefined(iframe)) {\n iframe.contentWindow.focus();\n }\n }\n}\n/**\n * @param {string} value - specifies the string value\n * @returns {void}\n * @hidden\n */\nexport function updateTextNode(value) {\n var tempNode = document.createElement('div');\n tempNode.innerHTML = value;\n tempNode.setAttribute('class', 'tempDiv');\n var resultElm = document.createElement('div');\n var childNodes = tempNode.childNodes;\n if (childNodes.length > 0) {\n var isPreviousInlineElem = void 0;\n var previousParent = void 0;\n var paraElm = void 0;\n while (tempNode.firstChild) {\n if ((tempNode.firstChild.nodeName === '#text' &&\n (tempNode.firstChild.textContent.indexOf('\\n') < 0 || tempNode.firstChild.textContent.trim() !== '')) ||\n inlineNode.indexOf(tempNode.firstChild.nodeName.toLocaleLowerCase()) >= 0) {\n if (!isPreviousInlineElem) {\n paraElm = createElement('p');\n resultElm.appendChild(paraElm);\n paraElm.appendChild(tempNode.firstChild);\n }\n else {\n previousParent.appendChild(tempNode.firstChild);\n }\n previousParent = paraElm;\n isPreviousInlineElem = true;\n }\n else if (tempNode.firstChild.nodeName === '#text' && (tempNode.firstChild.textContent === '\\n' ||\n (tempNode.firstChild.textContent.indexOf('\\n') >= 0 && tempNode.firstChild.textContent.trim() === ''))) {\n detach(tempNode.firstChild);\n }\n else {\n resultElm.appendChild(tempNode.firstChild);\n isPreviousInlineElem = false;\n }\n }\n var tableElm = resultElm.querySelectorAll('table');\n for (var i = 0; i < tableElm.length; i++) {\n if (tableElm[i].getAttribute('border') === '0') {\n tableElm[i].removeAttribute('border');\n }\n var tdElm = tableElm[i].querySelectorAll('td');\n for (var j = 0; j < tdElm.length; j++) {\n if (tdElm[j].style.borderLeft === 'none') {\n tdElm[j].style.removeProperty('border-left');\n }\n if (tdElm[j].style.borderRight === 'none') {\n tdElm[j].style.removeProperty('border-right');\n }\n if (tdElm[j].style.borderBottom === 'none') {\n tdElm[j].style.removeProperty('border-bottom');\n }\n if (tdElm[j].style.borderTop === 'none') {\n tdElm[j].style.removeProperty('border-top');\n }\n if (tdElm[j].style.border === 'none') {\n tdElm[j].style.removeProperty('border');\n }\n }\n if (!tableElm[i].classList.contains(classes.CLS_TABLE)) {\n tableElm[i].classList.add(classes.CLS_TABLE);\n }\n }\n var imageElm = resultElm.querySelectorAll('img');\n for (var i = 0; i < imageElm.length; i++) {\n if (!imageElm[i].classList.contains(classes.CLS_RTE_IMAGE)) {\n imageElm[i].classList.add(classes.CLS_RTE_IMAGE);\n }\n if (!(imageElm[i].classList.contains(classes.CLS_IMGINLINE) ||\n imageElm[i].classList.contains(classes.CLS_IMGBREAK))) {\n imageElm[i].classList.add(classes.CLS_IMGINLINE);\n }\n }\n }\n return resultElm.innerHTML;\n}\n/**\n * @param {Node} startChildNodes - specifies the node\n * @returns {void}\n * @hidden\n */\nexport function getLastTextNode(startChildNodes) {\n var finalNode = startChildNodes;\n do {\n if (finalNode.childNodes.length > 0) {\n finalNode = finalNode.childNodes[0];\n }\n } while (finalNode.childNodes.length > 0);\n return finalNode;\n}\n/**\n * @returns {void}\n * @hidden\n */\nexport function getDefaultHtmlTbStatus() {\n return {\n bold: false,\n italic: false,\n subscript: false,\n superscript: false,\n strikethrough: false,\n orderedlist: false,\n unorderedlist: false,\n underline: false,\n alignments: null,\n backgroundcolor: null,\n fontcolor: null,\n fontname: null,\n fontsize: null,\n formats: null,\n createlink: false,\n insertcode: false\n };\n}\n/**\n * @returns {void}\n * @hidden\n */\nexport function getDefaultMDTbStatus() {\n return {\n bold: false,\n italic: false,\n subscript: false,\n superscript: false,\n strikethrough: false,\n orderedlist: false,\n uppercase: false,\n lowercase: false,\n inlinecode: false,\n unorderedlist: false,\n formats: null\n };\n}\n","/**\n * Constant values for Common\n */\n/**\n * Keydown event trigger\n *\n * @hidden\n */\nexport var KEY_DOWN = 'keydown';\n/**\n * Undo and Redo action HTML plugin events\n *\n * @hidden\n */\nexport var ACTION = 'action';\n/**\n * Formats plugin events\n *\n * @hidden\n */\nexport var FORMAT_TYPE = 'format-type';\n/**\n * Keydown handler event trigger\n *\n * @hidden\n */\nexport var KEY_DOWN_HANDLER = 'keydown-handler';\n/**\n * List plugin events\n *\n * @hidden\n */\nexport var LIST_TYPE = 'list-type';\n/**\n * Keyup handler event trigger\n *\n * @hidden\n */\nexport var KEY_UP_HANDLER = 'keyup-handler';\n/**\n * Keyup event trigger\n *\n * @hidden\n */\nexport var KEY_UP = 'keyup';\n/**\n * Model changed plugin event trigger\n *\n * @hidden\n */\nexport var MODEL_CHANGED_PLUGIN = 'model_changed_plugin';\n/**\n * Model changed event trigger\n *\n * @hidden\n */\nexport var MODEL_CHANGED = 'model_changed';\n/**\n * PasteCleanup plugin for MSWord content\n *\n * @hidden\n */\nexport var MS_WORD_CLEANUP_PLUGIN = 'ms_word_cleanup_plugin';\n/**\n * PasteCleanup for MSWord content\n *\n * @hidden\n */\nexport var MS_WORD_CLEANUP = 'ms_word_cleanup';\n/**\n * ActionBegin event callback\n *\n * @hidden\n */\nexport var ON_BEGIN = 'onBegin';\n/**\n * Callback for spacelist action\n *\n * @hidden\n */\nexport var SPACE_ACTION = 'actionBegin';\n","import { RenderType } from '../base/enum';\nimport { CLS_HR_SEPARATOR } from '../base/classes';\nimport * as events from '../base/constant';\nimport { getTooltipText, toObjectLowerCase } from '../base/util';\nimport { tools, templateItems } from '../models/items';\nimport { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\n/**\n * `Toolbar` module is used to handle Toolbar actions.\n */\nvar BaseToolbar = /** @class */ (function () {\n function BaseToolbar(parent, serviceLocator) {\n this.tools = {};\n this.parent = parent;\n this.locator = serviceLocator;\n this.renderFactory = this.locator.getService('rendererFactory');\n this.addEventListener();\n if (this.parent.toolbarSettings && Object.keys(this.parent.toolbarSettings.itemConfigs).length > 0) {\n extend(this.tools, tools, toObjectLowerCase(this.parent.toolbarSettings.itemConfigs), true);\n }\n else {\n this.tools = tools;\n }\n }\n BaseToolbar.prototype.addEventListener = function () {\n this.parent.on(events.rtlMode, this.setRtl, this);\n this.parent.on(events.destroy, this.removeEventListener, this);\n };\n BaseToolbar.prototype.removeEventListener = function () {\n this.parent.off(events.rtlMode, this.setRtl);\n this.parent.off(events.destroy, this.removeEventListener);\n };\n BaseToolbar.prototype.setRtl = function (args) {\n if (!isNullOrUndefined(this.toolbarObj)) {\n this.toolbarObj.setProperties({ enableRtl: args.enableRtl });\n }\n };\n BaseToolbar.prototype.getClass = function (item) {\n var classes;\n switch (item) {\n case 'fontsize':\n classes = 'e-rte-inline-size-template';\n break;\n case 'fontcolor':\n case 'backgroundcolor':\n classes = 'e-rte-inline-color-template';\n break;\n default:\n classes = 'e-rte-inline-template';\n break;\n }\n return classes;\n };\n BaseToolbar.prototype.getTemplateObject = function (itemStr, container) {\n var tagName;\n switch (itemStr) {\n case 'fontcolor':\n case 'backgroundcolor':\n case 'numberformatlist':\n case 'bulletformatlist':\n tagName = 'span';\n break;\n default:\n tagName = 'button';\n break;\n }\n return {\n command: this.tools[itemStr.toLocaleLowerCase()].command,\n subCommand: this.tools[itemStr.toLocaleLowerCase()].subCommand,\n template: this.parent.createElement(tagName, {\n id: this.parent.getID() + '_' + container\n + '_' + this.tools[itemStr.toLocaleLowerCase()].id\n }).outerHTML,\n cssClass: this.parent.inlineMode.enable ? this.getClass(itemStr) : '',\n tooltipText: getTooltipText(itemStr, this.locator)\n };\n };\n /**\n * getObject method\n *\n * @param {string} item - specifies the string value\n * @param {string} container - specifies the value of string\n * @returns {IToolbarItemModel} - returns the model element\n * @hidden\n\n */\n BaseToolbar.prototype.getObject = function (item, container) {\n var itemStr = item.toLowerCase();\n if (templateItems.indexOf(itemStr) !== -1) {\n return this.getTemplateObject(itemStr, container);\n }\n else {\n switch (itemStr) {\n case '|':\n return { type: 'Separator' };\n case '-':\n return { type: 'Separator', cssClass: CLS_HR_SEPARATOR };\n default:\n return {\n id: this.parent.getID() + '_' + container + '_' + this.tools[itemStr.toLocaleLowerCase()].id,\n prefixIcon: this.tools[itemStr.toLocaleLowerCase()].icon,\n tooltipText: getTooltipText(itemStr, this.locator),\n command: this.tools[itemStr.toLocaleLowerCase()].command,\n subCommand: this.tools[itemStr.toLocaleLowerCase()].subCommand\n };\n }\n }\n };\n /**\n * @param {string} tbItems - specifies the string value\n * @param {string} container - specifies the container value\n * @returns {ItemModel} - retunrs the model element\n * @hidden\n\n */\n BaseToolbar.prototype.getItems = function (tbItems, container) {\n var _this = this;\n if (this.parent.toolbarSettings.items.length < 1) {\n return [];\n }\n var items = [];\n var _loop_1 = function (item) {\n switch (typeof item) {\n case 'string':\n items.push(this_1.getObject(item, container));\n break;\n default:\n if (!isNullOrUndefined(item.click)) {\n var proxy_1 = item;\n var callback_1 = proxy_1.click;\n proxy_1.click = function () {\n if (proxy_1.undo && _this.parent.formatter.getUndoRedoStack().length === 0) {\n _this.parent.formatter.saveData();\n }\n callback_1.call(_this);\n if ((_this.parent.formatter.getUndoRedoStack()[_this.parent.formatter.getUndoRedoStack().length - 1].text.trim()\n === _this.parent.inputElement.innerHTML.trim())) {\n return;\n }\n if (proxy_1.undo) {\n _this.parent.formatter.saveData();\n }\n };\n }\n items.push(item);\n }\n };\n var this_1 = this;\n for (var _i = 0, tbItems_1 = tbItems; _i < tbItems_1.length; _i++) {\n var item = tbItems_1[_i];\n _loop_1(item);\n }\n return items;\n };\n BaseToolbar.prototype.getToolbarOptions = function (args) {\n return {\n target: args.target,\n rteToolbarObj: this,\n items: this.getItems(args.items, args.container),\n overflowMode: args.mode,\n enablePersistence: this.parent.enablePersistence,\n enableRtl: this.parent.enableRtl\n };\n };\n /**\n * render method\n *\n * @param {IToolbarRenderOptions} args - specifies the toolbar options\n * @returns {void}\n * @hidden\n\n */\n BaseToolbar.prototype.render = function (args) {\n this.toolbarRenderer = this.renderFactory.getRenderer(RenderType.Toolbar);\n this.toolbarRenderer.renderToolbar(this.getToolbarOptions(args));\n };\n return BaseToolbar;\n}());\nexport { BaseToolbar };\n","/* eslint-disable */\n/**\n * Export items model\n */\nexport var templateItems = ['alignments', 'formats', 'fontname', 'fontsize', 'fontcolor', 'backgroundcolor', 'align', 'display', 'tablerows', 'tablecolumns', 'tablecell', 'tablecellhorizontalalign', 'tablecellverticalalign', 'styles', 'numberformatlist', 'bulletformatlist'];\nexport var tools = {\n 'alignments': {\n 'id': 'Alignments',\n 'icon': 'e-alignments',\n 'tooltip': 'Alignments',\n 'command': 'Alignments',\n 'subCommand': 'Alignments'\n },\n 'justifyleft': {\n 'id': 'JustifyLeft',\n 'icon': 'e-justify-left',\n 'tooltip': 'JustifyLeft',\n 'command': 'Alignments',\n 'subCommand': 'JustifyLeft'\n },\n 'justifycenter': {\n 'id': 'JustifyCenter',\n 'icon': 'e-justify-center',\n 'tooltip': 'JustifyCenter',\n 'command': 'Alignments',\n 'subCommand': 'JustifyCenter'\n },\n 'justifyright': {\n 'id': 'JustifyRight',\n 'icon': 'e-justify-right',\n 'tooltip': 'JustifyRight',\n 'command': 'Alignments',\n 'subCommand': 'JustifyRight'\n },\n 'justifyfull': {\n 'id': 'JustifyFull',\n 'icon': 'e-justify-full',\n 'tooltip': 'JustifyFull',\n 'command': 'Alignments',\n 'subCommand': 'JustifyFull'\n },\n 'fontname': {\n 'id': 'FontName',\n 'icon': 'e-font-name',\n 'tooltip': 'Font Name',\n 'command': 'Font',\n 'subCommand': 'FontName'\n },\n 'fontsize': {\n 'id': 'FontSize',\n 'icon': 'e-font-size',\n 'tooltip': 'Font Size',\n 'command': 'Font',\n 'subCommand': 'FontSize'\n },\n 'fontcolor': {\n 'id': 'FontColor',\n 'icon': 'e-font-color',\n 'tooltip': 'Font Color',\n 'command': 'Font',\n 'subCommand': 'FontColor',\n 'value': '#ff0000ff'\n },\n 'backgroundcolor': {\n 'id': 'BackgroundColor',\n 'icon': 'e-background-color',\n 'tooltip': 'Background Color',\n 'command': 'Font',\n 'subCommand': 'BackgroundColor',\n 'value': '#ffff00ff'\n },\n 'bold': {\n 'id': 'Bold',\n 'icon': 'e-bold',\n 'tooltip': 'Bold',\n 'command': 'Style',\n 'subCommand': 'Bold'\n },\n 'italic': {\n 'id': 'Italic',\n 'icon': 'e-italic',\n 'tooltip': 'Italic',\n 'command': 'Style',\n 'subCommand': 'Italic'\n },\n 'underline': {\n 'id': 'Underline',\n 'icon': 'e-underline',\n 'tooltip': 'Underline',\n 'command': 'Style',\n 'subCommand': 'Underline'\n },\n 'strikethrough': {\n 'id': 'StrikeThrough',\n 'icon': 'e-strike-through',\n 'tooltip': 'StrikeThrough',\n 'command': 'Style',\n 'subCommand': 'StrikeThrough'\n },\n 'clearformat': {\n 'id': 'ClearFormat',\n 'icon': 'e-clear-format',\n 'tooltip': 'Clear Format',\n 'command': 'Clear',\n 'subCommand': 'ClearFormat'\n },\n 'clearall': {\n 'id': 'ClearAll',\n 'icon': 'e-clear-all',\n 'tooltip': 'Clear All',\n 'command': 'Clear',\n 'subCommand': 'ClearAll'\n },\n 'cut': {\n 'id': 'Cut',\n 'icon': 'e-cut',\n 'tooltip': 'Cut',\n 'command': 'ClipBoard',\n 'subCommand': 'Cut'\n },\n 'copy': {\n 'id': 'Copy',\n 'icon': 'e-copy',\n 'tooltip': 'Copy',\n 'command': 'ClipBoard',\n 'subCommand': 'Copy'\n },\n 'paste': {\n 'id': 'Paste',\n 'icon': 'e-paste',\n 'tooltip': 'Paste',\n 'command': 'ClipBoard',\n 'subCommand': 'Paste'\n },\n 'unorderedlist': {\n 'id': 'UnorderedList',\n 'icon': 'e-unorder-list',\n 'tooltip': 'Bulleted List',\n 'command': 'Lists',\n 'subCommand': 'UL'\n },\n 'orderedlist': {\n 'id': 'OrderedList',\n 'icon': 'e-order-list',\n 'tooltip': 'Numbered List',\n 'command': 'Lists',\n 'subCommand': 'OL'\n },\n 'numberformatlist': {\n 'id': 'NumberFormatList',\n 'icon': 'e-order-list',\n 'tooltip': 'Number Format List',\n 'command': 'NumberFormatList',\n 'subCommand': 'NumberFormatList'\n },\n 'bulletformatlist': {\n 'id': 'BulletFormatList',\n 'icon': 'e-unorder-list',\n 'tooltip': 'Bullet Format List',\n 'command': 'BulletFormatList',\n 'subCommand': 'BulletFormatList'\n },\n 'indent': {\n 'id': 'Indent',\n 'icon': 'e-indent',\n 'tooltip': 'Increase Indent',\n 'command': 'Indents',\n 'subCommand': 'Indent'\n },\n 'outdent': {\n 'id': 'Outdent',\n 'icon': 'e-outdent',\n 'tooltip': 'Decrease Indent',\n 'command': 'Indents',\n 'subCommand': 'Outdent'\n },\n 'undo': {\n 'id': 'Undo',\n 'icon': 'e-undo',\n 'tooltip': 'Undo',\n 'command': 'Actions',\n 'subCommand': 'Undo'\n },\n 'redo': {\n 'id': 'Redo',\n 'icon': 'e-redo',\n 'tooltip': 'Redo',\n 'command': 'Actions',\n 'subCommand': 'Redo'\n },\n 'superscript': {\n 'id': 'SuperScript',\n 'icon': 'e-super-script',\n 'tooltip': 'Superscript',\n 'command': 'Effects',\n 'subCommand': 'SuperScript'\n },\n 'subscript': {\n 'id': 'SubScript',\n 'icon': 'e-sub-script',\n 'tooltip': 'Subscript',\n 'command': 'Effects',\n 'subCommand': 'SubScript'\n },\n 'createlink': {\n 'id': 'CreateLink',\n 'icon': 'e-create-link',\n 'tooltip': 'Insert Hyperlink',\n 'command': 'Links',\n 'subCommand': 'CreateLink'\n },\n 'openlink': {\n 'id': 'OpenLink',\n 'icon': 'e-open-link',\n 'tooltip': 'Open Link',\n 'command': 'Links',\n 'subCommand': 'OpenLink'\n },\n 'editlink': {\n 'id': 'EditLink',\n 'icon': 'e-edit-link',\n 'tooltip': 'Edit Link',\n 'command': 'Links',\n 'subCommand': 'EditLink'\n },\n 'removelink': {\n 'id': 'RemoveLink',\n 'icon': 'e-remove-link',\n 'tooltip': 'Remove Link',\n 'command': 'Links',\n 'subCommand': 'RemoveLink'\n },\n 'image': {\n 'id': 'Image',\n 'icon': 'e-image',\n 'tooltip': 'Insert Image',\n 'command': 'Images',\n 'subCommand': 'Image'\n },\n 'filemanager': {\n 'id': 'FileManager',\n 'icon': 'e-rte-file-manager',\n 'tooltip': 'File Manager',\n 'command': 'Files',\n 'subCommand': 'File'\n },\n 'createtable': {\n 'id': 'CreateTable',\n 'icon': 'e-create-table',\n 'tooltip': 'Create Table',\n 'command': 'Table',\n 'subCommand': 'CreateTable'\n },\n 'removetable': {\n 'id': 'removeTable',\n 'icon': 'e-remove-table',\n 'tooltip': 'Remove Table',\n 'command': 'removeTable',\n 'subCommand': 'removeTable'\n },\n 'replace': {\n 'id': 'Replace',\n 'icon': 'e-replace',\n 'tooltip': 'Replace',\n 'command': 'Images',\n 'subCommand': 'Replace'\n },\n 'align': {\n 'id': 'Align',\n 'icon': 'e-align',\n 'tooltip': 'Align',\n 'command': 'Images',\n 'subCommand': 'Align'\n },\n 'caption': {\n 'id': 'Caption',\n 'icon': 'e-caption',\n 'tooltip': 'Image Caption',\n 'command': 'Images',\n 'subCommand': 'Caption'\n },\n 'remove': {\n 'id': 'Remove',\n 'icon': 'e-remove',\n 'tooltip': 'Remove',\n 'command': 'Images',\n 'subCommand': 'Remove'\n },\n 'openimagelink': {\n 'id': 'OpenImageLink',\n 'icon': 'e-open-link',\n 'tooltip': 'Open Link',\n 'command': 'Images',\n 'subCommand': 'OpenImageLink'\n },\n 'editimagelink': {\n 'id': 'EditImageLink',\n 'icon': 'e-edit-link',\n 'tooltip': 'Edit Link',\n 'command': 'Images',\n 'subCommand': 'EditImageLink'\n },\n 'removeimagelink': {\n 'id': 'RemoveImageLink',\n 'icon': 'e-remove-link',\n 'tooltip': 'Remove Link',\n 'command': 'Images',\n 'subCommand': 'RemoveImageLink'\n },\n 'insertlink': {\n 'id': 'InsertLink',\n 'icon': 'e-insert-link',\n 'tooltip': 'Insert Link',\n 'command': 'Images',\n 'subCommand': 'InsertLink'\n },\n 'display': {\n 'id': 'Display',\n 'icon': 'e-display',\n 'tooltip': 'Display',\n 'command': 'Images',\n 'subCommand': 'Display'\n },\n 'alttext': {\n 'id': 'AltText',\n 'icon': 'e-alt-text',\n 'tooltip': 'Alternative Text',\n 'command': 'Images',\n 'subCommand': 'AltText'\n },\n 'dimension': {\n 'id': 'Dimension',\n 'icon': 'e-img-dimension',\n 'tooltip': 'Change Size',\n 'command': 'Images',\n 'subCommand': 'Dimension'\n },\n 'fullscreen': {\n 'id': 'Maximize',\n 'icon': 'e-maximize',\n 'tooltip': 'Maximize',\n 'command': 'View',\n 'subCommand': 'Maximize'\n },\n 'maximize': {\n 'id': 'Maximize',\n 'icon': 'e-maximize',\n 'tooltip': 'Maximize',\n 'command': 'FullScreen',\n 'subCommand': 'Maximize'\n },\n 'minimize': {\n 'id': 'Minimize',\n 'icon': 'e-minimize',\n 'tooltip': 'Minimize',\n 'command': 'FullScreen',\n 'subCommand': 'Minimize'\n },\n 'lowercase': {\n 'id': 'LowerCase',\n 'icon': 'e-lower-case',\n 'tooltip': 'Lower Case',\n 'command': 'Casing',\n 'subCommand': 'LowerCase'\n },\n 'uppercase': {\n 'id': 'UpperCase',\n 'icon': 'e-upper-case',\n 'tooltip': 'Upper Case',\n 'command': 'Casing',\n 'subCommand': 'UpperCase'\n },\n 'print': {\n 'id': 'Print',\n 'icon': 'e-print',\n 'tooltip': 'Print',\n 'command': 'Print',\n 'subCommand': 'Print'\n },\n 'formats': {\n 'id': 'Formats',\n 'icon': 'e-formats',\n 'tooltip': 'Formats',\n 'command': 'Formats',\n 'subCommand': 'Formats'\n },\n 'sourcecode': {\n 'id': 'SourceCode',\n 'icon': 'e-source-code',\n 'tooltip': 'Source Code',\n 'command': 'SourceCode',\n 'subCommand': 'SourceCode'\n },\n 'preview': {\n 'id': 'Preview',\n 'icon': 'e-preview',\n 'tooltip': 'Preview',\n 'command': 'Preview',\n 'subCommand': 'Preview'\n },\n 'viewside': {\n 'id': 'ViewSide',\n 'icon': 'e-view-side',\n 'tooltip': 'ViewSide',\n 'command': 'ViewSide',\n 'subCommand': 'ViewSide'\n },\n 'insertcode': {\n 'id': 'InsertCode',\n 'icon': 'e-insert-code',\n 'tooltip': 'Insert Code',\n 'command': 'Formats',\n 'subCommand': 'Pre'\n },\n 'tableheader': {\n 'id': 'TableHeader',\n 'icon': 'e-table-header',\n 'tooltip': 'Table Header',\n 'command': 'Table',\n 'subCommand': 'TableHeader'\n },\n 'tableremove': {\n 'id': 'TableRemove',\n 'icon': 'e-table-remove',\n 'tooltip': 'Table Remove',\n 'command': 'Table',\n 'subCommand': 'TableRemove'\n },\n 'tablerows': {\n 'id': 'TableRows',\n 'icon': 'e-table-rows',\n 'tooltip': 'Table Rows',\n 'command': 'Table',\n 'subCommand': 'TableRows'\n },\n 'tablecolumns': {\n 'id': 'TableColumns',\n 'icon': 'e-table-columns',\n 'tooltip': 'Table Columns',\n 'command': 'Table',\n 'subCommand': 'TableColumns'\n },\n 'tablecell': {\n 'id': 'TableCell',\n 'icon': 'e-table-cell',\n 'tooltip': 'Table Cell',\n 'command': 'Table',\n 'subCommand': 'TableCell'\n },\n 'tablecellbackground': {\n 'id': 'TableCellBackground',\n 'icon': 'e-table-cell-background',\n 'tooltip': 'Table Cell Background',\n 'command': 'Table',\n 'subCommand': 'TableCellBackground'\n },\n 'tablecellhorizontalalign': {\n 'id': 'TableCellHorizontalAlign',\n 'icon': 'e-table-cell-horizontalAlign',\n 'tooltip': 'Table Cell HorizontalAlign',\n 'command': 'Table',\n 'subCommand': 'TableCellHorizontalAlign'\n },\n 'tablecellverticalalign': {\n 'id': 'TableCellVerticalAlign',\n 'icon': 'e-table-cell-verticalAlign',\n 'tooltip': 'Table Cell VerticalAlign',\n 'command': 'Table',\n 'subCommand': 'TableCellVerticalAlign'\n },\n 'tableeditproperties': {\n 'id': 'TableEditProperties',\n 'icon': 'e-table-edit-properties',\n 'tooltip': 'Table Edit Properties',\n 'command': 'Table',\n 'subCommand': 'TableEditProperties'\n },\n 'styles': {\n 'id': 'Styles',\n 'icon': 'e-table-styles',\n 'tooltip': 'Styles',\n 'command': 'Table',\n 'subCommand': 'Styles'\n }\n};\nvar alignmentLocale = [\n { locale: 'alignmentsDropDownLeft', value: 'JustifyLeft' },\n { locale: 'alignmentsDropDownCenter', value: 'JustifyCenter' },\n { locale: 'alignmentsDropDownRight', value: 'JustifyRight' },\n { locale: 'alignmentsDropDownJustify', value: 'JustifyFull' }\n];\nexport var alignmentItems = [\n { iconCss: 'e-icons e-justify-left', text: 'Align Left', command: 'Alignments', subCommand: 'JustifyLeft' },\n { iconCss: 'e-icons e-justify-center', text: 'Align Center', command: 'Alignments', subCommand: 'JustifyCenter' },\n { iconCss: 'e-icons e-justify-right', text: 'Align Right', command: 'Alignments', subCommand: 'JustifyRight' },\n { iconCss: 'e-icons e-justify-full', text: 'Align Justify', command: 'Alignments', subCommand: 'JustifyFull' }\n];\nexport var imageAlignItems = [\n { iconCss: 'e-icons e-justify-left', command: 'Images', subCommand: 'JustifyLeft' },\n { iconCss: 'e-icons e-justify-center', command: 'Images', subCommand: 'JustifyCenter' },\n { iconCss: 'e-icons e-justify-right', command: 'Images', subCommand: 'JustifyRight' },\n];\nvar displayLocale = [\n { locale: 'imageDisplayDropDownInline', value: 'Inline' },\n { locale: 'imageDisplayDropDownBreak', value: 'Break' }\n];\nexport var imageDisplayItems = [\n { text: 'Inline', cssClass: 'e-inline', command: 'Images', subCommand: 'Inline' },\n { text: 'Break', cssClass: 'e-break', command: 'Images', subCommand: 'Break' },\n];\nexport var tableCellItems = [\n { iconCss: 'e-icons e-cell-merge', text: 'Merge cells', command: 'Table', subCommand: 'Merge' },\n { iconCss: 'e-icons e-cell-horizontal-split', text: 'Horizontal split', command: 'Table', subCommand: 'HorizontalSplit' },\n { iconCss: 'e-icons e-cell-vertical-split', text: 'Vertical split', command: 'Table', subCommand: 'VerticalSplit' },\n];\nvar tableRowLocale = [\n { locale: 'tableInsertRowDropDownBefore', value: 'InsertRowBefore' },\n { locale: 'tableInsertRowDropDownAfter', value: 'InsertRowAfter' },\n { locale: 'tableInsertRowDropDownDelete', value: 'DeleteRow' }\n];\nexport var tableRowsItems = [\n { iconCss: 'e-icons e-insert-row-before', text: 'Insert row before', command: 'Table', subCommand: 'InsertRowBefore' },\n { iconCss: 'e-icons e-insert-row-after', text: 'Insert row after', command: 'Table', subCommand: 'InsertRowAfter' },\n { iconCss: 'e-icons e-delete-row', text: 'Delete row', command: 'Table', subCommand: 'DeleteRow' },\n];\nvar tableColumnLocale = [\n { locale: 'tableInsertColumnDropDownLeft', value: 'InsertColumnLeft' },\n { locale: 'tableInsertColumnDropDownRight', value: 'InsertColumnRight' },\n { locale: 'tableInsertColumnDropDownDelete', value: 'DeleteColumn' }\n];\nexport var tableColumnsItems = [\n { iconCss: 'e-icons e-insert-column-left', text: 'Insert column left', command: 'Table', subCommand: 'InsertColumnLeft' },\n { iconCss: 'e-icons e-insert-column-right', text: 'Insert column right', command: 'Table', subCommand: 'InsertColumnRight' },\n { iconCss: 'e-icons e-delete-column', text: 'Delete column', command: 'Table', subCommand: 'DeleteColumn' },\n];\nvar tableVerticalLocale = [\n { locale: 'tableVerticalAlignDropDownTop', value: 'AlignTop' },\n { locale: 'tableVerticalAlignDropDownMiddle', value: 'AlignMiddle' },\n { locale: 'tableVerticalAlignDropDownBottom', value: 'AlignBottom' }\n];\nexport var TableCellVerticalAlignItems = [\n { iconCss: 'e-icons e-align-top', text: 'Align Top', command: 'Table', subCommand: 'AlignTop' },\n { iconCss: 'e-icons e-align-middle', text: 'Align Middle', command: 'Table', subCommand: 'AlignMiddle' },\n { iconCss: 'e-icons e-align-bottom', text: 'Align Bottom', command: 'Table', subCommand: 'AlignBottom' },\n];\nvar tableStyleLocale = [\n { locale: 'tableStylesDropDownDashedBorder', value: 'Dashed' },\n { locale: 'tableStylesDropDownAlternateRows', value: 'Alternate' }\n];\nexport var TableStyleItems = [\n { text: 'Dashed Borders', cssClass: 'e-dashed-borders', command: 'Table', subCommand: 'Dashed' },\n { text: 'Alternate Rows', cssClass: 'e-alternate-rows', command: 'Table', subCommand: 'Alternate' }\n];\nexport var predefinedItems = ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments',\n 'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode', 'Undo', 'Redo'];\nexport var fontFamily = [\n { cssClass: 'e-segoe-ui', text: 'Segoe UI', command: 'Font', subCommand: 'FontName', value: 'Segoe UI' },\n { cssClass: 'e-arial', text: 'Arial', command: 'Font', subCommand: 'FontName', value: 'Arial,Helvetica,sans-serif' },\n { cssClass: 'e-georgia', text: 'Georgia', command: 'Font', subCommand: 'FontName', value: 'Georgia,serif' },\n { cssClass: 'e-impact', text: 'Impact', command: 'Font', subCommand: 'FontName', value: 'Impact,Charcoal,sans-serif' },\n { cssClass: 'e-tahoma', text: 'Tahoma', command: 'Font', subCommand: 'FontName', value: 'Tahoma,Geneva,sans-serif' },\n { cssClass: 'e-times-new-roman', text: 'Times New Roman', command: 'Font', subCommand: 'FontName', value: 'Times New Roman,Times,serif' },\n { cssClass: 'e-verdana', text: 'Verdana', command: 'Font', subCommand: 'FontName', value: 'Verdana,Geneva,sans-serif' }\n];\nexport var fontSize = [\n { text: '8 pt', value: '8pt' },\n { text: '10 pt', value: '10pt' },\n { text: '12 pt', value: '12pt' },\n { text: '14 pt', value: '14pt' },\n { text: '18 pt', value: '18pt' },\n { text: '24 pt', value: '24pt' },\n { text: '36 pt', value: '36pt' }\n];\nexport var formatItems = [\n { cssClass: 'e-paragraph', text: 'Paragraph', command: 'Formats', subCommand: 'P', value: 'P' },\n { cssClass: 'e-code', text: 'Code', command: 'Formats', subCommand: 'Pre', value: 'Pre' },\n { cssClass: 'e-quote', text: 'Quotation', command: 'Formats', subCommand: 'BlockQuote', value: 'BlockQuote' },\n { cssClass: 'e-h1', text: 'Heading 1', command: 'Formats', subCommand: 'H1', value: 'H1' },\n { cssClass: 'e-h2', text: 'Heading 2', command: 'Formats', subCommand: 'H2', value: 'H2' },\n { cssClass: 'e-h3', text: 'Heading 3', command: 'Formats', subCommand: 'H3', value: 'H3' },\n { cssClass: 'e-h4', text: 'Heading 4', command: 'Formats', subCommand: 'H4', value: 'H4' }\n];\nexport var fontColor = {\n 'Custom': [\n '', '#000000', '#e7e6e6', '#44546a', '#4472c4', '#ed7d31', '#a5a5a5', '#ffc000', '#70ad47', '#ff0000',\n '#f2f2f2', '#808080', '#cfcdcd', '#d5dce4', '#d9e2f3', '#fbe4d5', '#ededed', '#fff2cc', '#e2efd9', '#ffcccc',\n '#d9d9d9', '#595959', '#aeaaaa', '#acb9ca', '#b4c6e7', '#f7caac', '#dbdbdb', '#ffe599', '#c5e0b3', '#ff8080',\n '#bfbfbf', '#404040', '#747070', '#8496b0', '#8eaadb', '#f4b083', '#c9c9c9', '#ffd966', '#a8d08d', '#ff3333',\n '#a6a6a6', '#262626', '#3b3838', '#323e4f', '#2f5496', '#c45911', '#7b7b7b', '#bf8f00', '#538135', '#b30000',\n '#7f7f7f', '#0d0d0d', '#161616', '#212934', '#1f3763', '#823b0b', '#525252', '#7f5f00', '#375623', '#660000'\n ]\n};\nexport var backgroundColor = {\n 'Custom': [\n '', '#000000', '#ffff00', '#00ff00', '#00ffff', '#0000ff', '#ff0000', '#000080', '#800080', '#996633',\n '#f2f2f2', '#808080', '#ffffcc', '#b3ffb3', '#ccffff', '#ccccff', '#ffcccc', '#ccccff', '#ff80ff', '#f2e6d9',\n '#d9d9d9', '#595959', '#ffff80', '#80ff80', '#b3ffff', '#8080ff', '#ff8080', '#8080ff', '#ff00ff', '#dfbf9f',\n '#bfbfbf', '#404040', '#ffff33', '#33ff33', '#33ffff', '#3333ff', '#ff3333', '#0000b3', '#b300b3', '#c68c53',\n '#a6a6a6', '#262626', '#e6e600', '#00b300', '#009999', '#000099', '#b30000', '#000066', '#660066', '#86592d',\n '#7f7f7f', '#0d0d0d', '#999900', '#006600', '#006666', '#000066', '#660000', '#00004d', '#4d004d', '#734d26'\n ]\n};\nexport var numberFormatList = [\n { text: 'None', command: 'Lists', subCommand: 'NumberFormatList', value: 'none' },\n { text: 'Number', command: 'Lists', subCommand: 'NumberFormatList', value: 'decimal' },\n { text: 'Lower Greek', command: 'Lists', subCommand: 'NumberFormatList', value: 'lowerGreek' },\n { text: 'Lower Roman', command: 'Lists', subCommand: 'NumberFormatList', value: 'lowerRoman' },\n { text: 'Upper Alpha', command: 'Lists', subCommand: 'NumberFormatList', value: 'upperAlpha' },\n { text: 'Lower Alpha', command: 'Lists', subCommand: 'NumberFormatList', value: 'lowerAlpha' },\n { text: 'Upper Roman', command: 'Lists', subCommand: 'NumberFormatList', value: 'upperRoman' },\n];\nexport var bulletFormatList = [\n { text: 'None', command: 'Lists', subCommand: 'BulletFormatList', value: 'none' },\n { text: 'Disc', command: 'Lists', subCommand: 'BulletFormatList', value: 'disc' },\n { text: 'Circle', command: 'Lists', subCommand: 'BulletFormatList', value: 'circle' },\n { text: 'Square', command: 'Lists', subCommand: 'BulletFormatList', value: 'square' },\n];\nfunction getLocale(self, localeItems, item) {\n for (var i = 0; localeItems.length > i; i++) {\n if (localeItems[i].value === item.subCommand) {\n return self.localeObj.getConstant(localeItems[i].locale);\n }\n }\n return item.text;\n}\nexport function updateDropDownLocale(self) {\n alignmentItems.forEach(function (item, i) {\n alignmentItems[i].text = getLocale(self, alignmentLocale, alignmentItems[i]);\n });\n imageDisplayItems.forEach(function (item, i) {\n imageDisplayItems[i].text = getLocale(self, displayLocale, imageDisplayItems[i]);\n });\n tableRowsItems.forEach(function (item, i) {\n tableRowsItems[i].text = getLocale(self, tableRowLocale, tableRowsItems[i]);\n });\n tableColumnsItems.forEach(function (item, i) {\n tableColumnsItems[i].text = getLocale(self, tableColumnLocale, tableColumnsItems[i]);\n });\n TableCellVerticalAlignItems.forEach(function (item, i) {\n TableCellVerticalAlignItems[i].text = getLocale(self, tableVerticalLocale, TableCellVerticalAlignItems[i]);\n });\n TableStyleItems.forEach(function (item, i) {\n TableStyleItems[i].text = getLocale(self, tableStyleLocale, TableStyleItems[i]);\n });\n}\n","import { detach, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\nimport { RenderType } from '../base/enum';\nimport { CLS_COUNT, CLS_WARNING, CLS_ERROR } from '../base/classes';\n/**\n * `Count` module is used to handle Count actions.\n */\nvar Count = /** @class */ (function () {\n function Count(parent, serviceLocator) {\n this.parent = parent;\n this.locator = serviceLocator;\n this.renderFactory = this.locator.getService('rendererFactory');\n this.addEventListener();\n }\n Count.prototype.initializeInstance = function () {\n this.contentRenderer = this.renderFactory.getRenderer(RenderType.Content);\n this.editPanel = this.contentRenderer.getEditPanel();\n this.addEventListener();\n };\n /**\n * renderCount method\n *\n * @returns {void}\n * @hidden\n\n */\n Count.prototype.renderCount = function () {\n this.initializeInstance();\n this.element = this.parent.createElement('span', { className: CLS_COUNT });\n this.contentRenderer.getPanel().parentElement.appendChild(this.element);\n this.appendCount();\n if (this.parent.maxLength !== -1) {\n this.charCountBackground(this.htmlLength);\n }\n };\n Count.prototype.appendCount = function () {\n var htmlText = this.parent.editorMode === 'Markdown' ? this.editPanel.value.trim() :\n this.editPanel.textContent.trim();\n if (this.parent.editorMode !== 'Markdown' && htmlText.indexOf('\\u200B') !== -1) {\n this.htmlLength = htmlText.replace(/\\u200B/g, '').length;\n }\n else {\n this.htmlLength = htmlText.length;\n }\n var string = this.parent.maxLength === -1 ? this.htmlLength : this.htmlLength + ' / ' + this.parent.maxLength;\n this.element.innerHTML = string;\n };\n Count.prototype.charCountBackground = function (htmlLength) {\n var percentage = (htmlLength / this.parent.maxLength) * 100;\n if (percentage < 85) {\n this.element.classList.remove(CLS_WARNING);\n this.element.classList.remove(CLS_ERROR);\n }\n else if (percentage > 85 && percentage <= 90) {\n this.element.classList.remove(CLS_ERROR);\n this.element.classList.add(CLS_WARNING);\n }\n else if (percentage > 90) {\n this.element.classList.remove(CLS_WARNING);\n this.element.classList.add(CLS_ERROR);\n }\n };\n /**\n * @returns {void}\n * @hidden\n\n */\n Count.prototype.refresh = function () {\n if (!isNullOrUndefined(this.editPanel)) {\n this.appendCount();\n if (this.parent.maxLength !== -1) {\n this.charCountBackground(this.htmlLength);\n }\n }\n };\n /**\n * Destroys the Count.\n *\n * @function destroy\n * @returns {void}\n * @hidden\n\n */\n Count.prototype.destroy = function () {\n if (this.element && !isNullOrUndefined(this.parent.element.querySelector('.' + CLS_COUNT))) {\n detach(this.element);\n }\n this.removeEventListener();\n };\n Count.prototype.toggle = function (e) {\n this.element.style.display = (e.member === 'viewSource') ? 'none' : 'block';\n };\n Count.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.initialEnd, this.renderCount, this);\n this.parent.on(events.keyUp, this.refresh, this);\n this.parent.on(events.count, this.refresh, this);\n this.parent.on(events.refreshBegin, this.refresh, this);\n this.parent.on(events.mouseDown, this.refresh, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.parent.on(events.sourceCode, this.toggle, this);\n this.parent.on(events.updateSource, this.toggle, this);\n };\n Count.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.initialEnd, this.renderCount);\n this.parent.off(events.keyUp, this.refresh);\n this.parent.off(events.refreshBegin, this.refresh);\n this.parent.off(events.count, this.refresh);\n this.parent.off(events.mouseDown, this.refresh);\n this.parent.off(events.destroy, this.destroy);\n this.parent.off(events.sourceCode, this.toggle);\n this.parent.off(events.updateSource, this.toggle);\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} - returns the string value\n */\n Count.prototype.getModuleName = function () {\n return 'count';\n };\n return Count;\n}());\nexport { Count };\n","/**\n * @hidden\n\n */\nexport var created = 'create';\n/**\n * @hidden\n\n */\nexport var destroyed = 'destroy';\n/**\n * @hidden\n\n */\nexport var load = 'load';\n/**\n * Specifies Rich Text Editor internal events\n */\n/**\n * @hidden\n\n */\nexport var initialLoad = 'initial-load';\n/**\n * @hidden\n\n */\nexport var contentChanged = 'content-changed';\n/**\n * @hidden\n\n */\nexport var initialEnd = 'initial-end';\n/**\n * @hidden\n\n */\nexport var iframeMouseDown = 'iframe-click';\n/**\n * @hidden\n\n */\nexport var destroy = 'destroy';\n/**\n * @hidden\n\n */\nexport var toolbarClick = 'toolbarClick';\n/**\n * @hidden\n\n */\nexport var toolbarRefresh = 'toolbar-refresh';\n/**\n * @hidden\n\n */\nexport var refreshBegin = 'refresh-begin';\n/**\n * @hidden\n\n */\nexport var toolbarUpdated = 'toolbar-updated';\n/**\n * @hidden\n\n */\nexport var bindOnEnd = 'bind-on-end';\n/**\n * @hidden\n\n */\nexport var renderColorPicker = 'render-color-picker';\n/**\n * @hidden\n\n */\nexport var htmlToolbarClick = 'html-toolbar-click';\n/**\n * @hidden\n\n */\nexport var markdownToolbarClick = 'markdown-toolbar-click';\n/**\n * @hidden\n\n */\nexport var destroyColorPicker = 'destroy-color-picker';\n/**\n * @hidden\n\n */\nexport var modelChanged = 'model-changed';\n/**\n * @hidden\n\n */\nexport var keyUp = 'keyUp';\n/**\n * @hidden\n\n */\nexport var keyDown = 'keyDown';\n/**\n * @hidden\n\n */\nexport var mouseUp = 'mouseUp';\n/**\n * @hidden\n\n */\nexport var toolbarCreated = 'toolbarCreated';\n/**\n * @hidden\n\n */\nexport var toolbarRenderComplete = 'toolbarRenderComplete';\n/**\n * @hidden\n\n */\nexport var enableFullScreen = 'enableFullScreen';\n/**\n * @hidden\n\n */\nexport var disableFullScreen = 'disableFullScreen';\n/**\n * @hidden\n\n */\nexport var dropDownSelect = 'dropDownSelect';\n/**\n * @hidden\n\n */\nexport var beforeDropDownItemRender = 'beforeDropDownItemRender';\n/**\n * @hidden\n\n */\nexport var execCommandCallBack = 'execCommandCallBack';\n/**\n * @hidden\n\n */\nexport var imageToolbarAction = 'image-toolbar-action';\n/**\n * @hidden\n\n */\nexport var linkToolbarAction = 'link-toolbar-action';\n/**\n * @hidden\n\n */\nexport var windowResize = 'resize';\n/**\n * @hidden\n\n */\nexport var resizeStart = 'resizeStart';\n/**\n * @hidden\n\n */\nexport var onResize = 'resizing';\n/**\n * @hidden\n\n */\nexport var resizeStop = 'resizeStop';\n/**\n * @hidden\n\n */\nexport var undo = 'undo';\n/**\n * @hidden\n\n */\nexport var redo = 'redo';\n/**\n * @hidden\n\n */\nexport var insertLink = 'insertLink';\n/**\n * @hidden\n\n */\nexport var unLink = 'unLink';\n/**\n * @hidden\n\n */\nexport var editLink = 'editLink';\n/**\n * @hidden\n\n */\nexport var openLink = 'openLink';\n/**\n * @hidden\n\n */\nexport var actionBegin = 'actionBegin';\n/**\n * @hidden\n\n */\nexport var actionComplete = 'actionComplete';\n/**\n * @hidden\n\n */\nexport var updatedToolbarStatus = 'updatedToolbarStatus';\n/**\n * @hidden\n\n */\nexport var actionSuccess = 'actionSuccess';\n/**\n * @hidden\n\n */\nexport var updateToolbarItem = 'updateToolbarItem';\n/**\n * @hidden\n\n */\nexport var insertImage = 'insertImage';\n/**\n * @hidden\n\n */\nexport var insertCompleted = 'insertCompleted';\n/**\n * @hidden\n\n */\nexport var imageLeft = 'justifyLeft';\n/**\n * @hidden\n\n */\nexport var imageRight = 'justifyRight';\n/**\n * @hidden\n\n */\nexport var imageCenter = 'justifyCenter';\n/**\n * @hidden\n\n */\nexport var imageBreak = 'break';\n/**\n * @hidden\n\n */\nexport var imageInline = 'inline';\n/**\n * @hidden\n\n */\nexport var imageLink = 'insertImgLink';\n/**\n * @hidden\n\n */\nexport var imageAlt = 'imgAltText';\n/**\n * @hidden\n\n */\nexport var imageDelete = 'delete';\n/**\n * @hidden\n\n */\nexport var imageCaption = 'caption';\n/**\n * @hidden\n\n */\nexport var imageSize = 'imageSize';\n/**\n * @hidden\n\n */\nexport var sourceCode = 'sourceCode';\n/**\n * @hidden\n\n */\nexport var updateSource = 'updateSource';\n/**\n * @hidden\n\n */\nexport var toolbarOpen = 'toolbarOpen';\n/**\n * @hidden\n\n */\nexport var beforeDropDownOpen = 'beforeDropDownOpen';\n/**\n * @hidden\n\n */\nexport var selectionSave = 'selection-save';\n/**\n * @hidden\n\n */\nexport var selectionRestore = 'selection-restore';\n/**\n * @hidden\n\n */\nexport var expandPopupClick = 'expandPopupClick';\n/**\n * @hidden\n\n */\nexport var count = 'count';\n/**\n * @hidden\n\n */\nexport var contentFocus = 'contentFocus';\n/**\n * @hidden\n\n */\nexport var contentBlur = 'contentBlur';\n/**\n * @hidden\n\n */\nexport var mouseDown = 'mouseDown';\n/**\n * @hidden\n\n */\nexport var sourceCodeMouseDown = 'sourceCodeMouseDown';\n/**\n * @hidden\n\n */\nexport var editAreaClick = 'editAreaClick';\n/**\n * @hidden\n\n */\nexport var scroll = 'scroll';\n/**\n * @hidden\n\n */\nexport var contentscroll = 'contentscroll';\n/**\n * @hidden\n\n */\nexport var colorPickerChanged = 'colorPickerChanged';\n/**\n * @hidden\n\n */\nexport var tableColorPickerChanged = 'tableColorPickerChanged';\n/**\n * @hidden\n\n */\nexport var focusChange = 'focusChange';\n/**\n * @hidden\n\n */\nexport var selectAll = 'selectAll';\n/**\n * @hidden\n\n */\nexport var selectRange = 'selectRange';\n/**\n * @hidden\n\n */\nexport var getSelectedHtml = 'getSelectedHtml';\n/**\n * @hidden\n\n */\nexport var renderInlineToolbar = 'renderInlineToolbar';\n/**\n * @hidden\n\n */\nexport var paste = 'paste-content';\n/**\n * @hidden\n\n */\nexport var imgModule = 'imageModule';\n/**\n * @hidden\n\n */\nexport var rtlMode = 'rtl-mode';\n/**\n * @hidden\n\n */\nexport var createTable = 'createTable';\n/**\n * @hidden\n\n */\nexport var docClick = 'docClick';\n/**\n * @hidden\n\n */\nexport var tableToolbarAction = 'table-toolbar-action';\n/**\n * @hidden\n\n */\nexport var checkUndo = 'checkUndoStack';\n/**\n * @hidden\n\n */\nexport var readOnlyMode = 'readOnlyMode';\n/**\n * @hidden\n\n */\nexport var pasteClean = 'pasteClean';\n/**\n * @hidden\n\n */\nexport var enterHandler = 'enterHandler';\n/**\n * @hidden\n\n */\nexport var beforeDialogOpen = 'beforeDialogOpen';\n/**\n * @hidden\n\n */\nexport var clearDialogObj = 'clearDialogObj';\n/**\n * @hidden\n\n */\nexport var dialogOpen = 'dialogOpen';\n/**\n * @hidden\n\n */\nexport var beforeDialogClose = 'beforeDialogClose';\n/**\n * @hidden\n\n */\nexport var dialogClose = 'dialogClose';\n/**\n * @hidden\n\n */\nexport var beforeQuickToolbarOpen = 'beforeQuickToolbarOpen';\n/**\n * @hidden\n\n */\nexport var quickToolbarOpen = 'quickToolbarOpen';\n/**\n * @hidden\n\n */\nexport var quickToolbarClose = 'quickToolbarClose';\n/**\n * @hidden\n\n */\nexport var popupHide = 'popupHide';\n/**\n * @hidden\n\n */\nexport var imageSelected = 'imageSelected';\n/**\n * @hidden\n\n */\nexport var imageUploading = 'imageUploading';\n/**\n * @hidden\n\n */\nexport var imageUploadSuccess = 'imageUploadSuccess';\n/**\n * @hidden\n\n */\nexport var imageUploadFailed = 'imageUploadFailed';\n/**\n * @hidden\n\n */\nexport var imageRemoving = 'imageRemoving';\n/**\n * @hidden\n\n */\nexport var afterImageDelete = 'afterImageDelete';\n/**\n * @hidden\n\n */\nexport var drop = 'drop';\n/**\n * @hidden\n\n */\nexport var xhtmlValidation = 'xhtmlValidation';\n/**\n * @hidden\n\n */\nexport var beforeImageUpload = 'beforeImageUpload';\n/**\n * @hidden\n\n */\nexport var resizeInitialized = 'resizeInitialized';\n/**\n * @hidden\n\n */\nexport var renderFileManager = 'renderFileManager';\n/**\n * @hidden\n\n */\nexport var beforeImageDrop = 'beforeImageDrop';\n/**\n * @hidden\n\n */\nexport var dynamicModule = 'dynamicModule';\n/**\n * @hidden\n\n */\nexport var beforePasteCleanup = 'beforePasteCleanup';\n/**\n * @hidden\n\n */\nexport var afterPasteCleanup = 'afterPasteCleanup';\n/**\n * @hidden\n\n */\nexport var updateTbItemsStatus = 'updateTbItemsStatus';\n/**\n * @hidden\n\n */\nexport var showLinkDialog = 'showLinkDialog';\n/**\n * @hidden\n\n */\nexport var closeLinkDialog = 'closeLinkDialog';\n/**\n * @hidden\n\n */\nexport var showImageDialog = 'showImageDialog';\n/**\n * @hidden\n\n */\nexport var closeImageDialog = 'closeImageDialog';\n/**\n * @hidden\n\n */\nexport var showTableDialog = 'showTableDialog';\n/**\n * @hidden\n\n */\nexport var closeTableDialog = 'closeTableDialog';\n","import { detach, getUniqueID, append, closest, selectAll, select, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, Browser, isNullOrUndefined, setStyleAttribute } from '@syncfusion/ej2-base';\nimport { isCollide } from '@syncfusion/ej2-popups';\nimport * as events from '../base/constant';\nimport * as classes from '../base/classes';\nimport { RenderType } from '../base/enum';\nimport { setToolbarStatus, updateUndoRedoStatus, isIDevice } from '../base/util';\nimport { BaseToolbar } from './base-toolbar';\nimport { DropDownButtons } from './dropdown-buttons';\nimport { ColorPickerInput } from './color-picker';\n/**\n * `Quick toolbar` module is used to handle Quick toolbar actions.\n */\nvar BaseQuickToolbar = /** @class */ (function () {\n function BaseQuickToolbar(parent, locator) {\n this.parent = parent;\n this.locator = locator;\n this.isDOMElement = false;\n this.renderFactory = this.locator.getService('rendererFactory');\n this.contentRenderer = this.renderFactory.getRenderer(RenderType.Content);\n this.popupRenderer = this.renderFactory.getRenderer(RenderType.Popup);\n this.dropDownButtons = new DropDownButtons(this.parent, this.locator);\n this.colorPickerObj = new ColorPickerInput(this.parent, this.locator);\n }\n BaseQuickToolbar.prototype.appendPopupContent = function () {\n this.toolbarElement = this.parent.createElement('div', { className: classes.CLS_QUICK_TB });\n this.element.appendChild(this.toolbarElement);\n };\n /**\n * render method\n *\n * @param {IQuickToolbarOptions} args - specifies the arguments\n * @returns {void}\n * @hidden\n\n */\n BaseQuickToolbar.prototype.render = function (args) {\n var className;\n if (args.popupType === 'Image') {\n className = classes.CLS_IMAGE_POP;\n }\n else if (args.popupType === 'Inline') {\n className = classes.CLS_INLINE_POP;\n }\n else {\n className = '';\n }\n var popupId = getUniqueID(args.popupType + '_Quick_Popup');\n this.stringItems = args.toolbarItems;\n this.element = this.parent.createElement('div', { id: popupId, className: className + ' ' + classes.CLS_RTE_ELEMENTS });\n this.element.setAttribute('aria-owns', this.parent.getID());\n this.appendPopupContent();\n this.createToolbar(args.toolbarItems, args.mode);\n this.popupRenderer.renderPopup(this);\n this.addEventListener();\n };\n BaseQuickToolbar.prototype.createToolbar = function (items, mode) {\n this.quickTBarObj = new BaseToolbar(this.parent, this.locator);\n this.quickTBarObj.render({\n container: 'quick',\n target: this.toolbarElement,\n items: items,\n mode: mode\n });\n this.quickTBarObj.toolbarObj.refresh();\n };\n BaseQuickToolbar.prototype.setPosition = function (e) {\n var x;\n var y;\n var imgWrapper = closest(e.target, '.e-img-caption');\n var target = !isNOU(imgWrapper) ? imgWrapper : e.target;\n addClass([this.toolbarElement], [classes.CLS_RM_WHITE_SPACE]);\n var targetOffsetTop = target.offsetTop;\n var parentOffsetTop = window.pageYOffset + e.parentData.top;\n if ((targetOffsetTop - e.editTop) > e.popHeight) {\n y = parentOffsetTop + e.tBarElementHeight + (targetOffsetTop - e.editTop) - e.popHeight - 5;\n }\n else if (((e.editTop + e.editHeight) - (targetOffsetTop + target.offsetHeight)) > e.popHeight) {\n y = parentOffsetTop + e.tBarElementHeight + (targetOffsetTop - e.editTop) + target.offsetHeight + 5;\n }\n else {\n y = e.y;\n }\n if (target.offsetWidth > e.popWidth) {\n x = (target.offsetWidth / 2) - (e.popWidth / 2) + e.parentData.left + target.offsetLeft;\n }\n else {\n x = e.parentData.left + target.offsetLeft;\n }\n this.popupObj.position.X = ((x + e.popWidth) > e.parentData.right) ? e.parentData.right - e.popWidth : x;\n this.popupObj.position.Y = (y >= 0) ? y : e.y + 5;\n this.popupObj.dataBind();\n removeClass([this.toolbarElement], [classes.CLS_RM_WHITE_SPACE]);\n };\n BaseQuickToolbar.prototype.checkCollision = function (e, viewPort, type) {\n var x;\n var y;\n var parentTop = e.parentData.top;\n var contentTop = e.windowY + parentTop + e.tBarElementHeight;\n var collision = [];\n if (viewPort === 'document') {\n collision = isCollide(e.popup);\n }\n else {\n collision = isCollide(e.popup, e.parentElement);\n }\n for (var i = 0; i < collision.length; i++) {\n switch (collision[i]) {\n case 'top':\n if (viewPort === 'document') {\n y = e.windowY;\n }\n else {\n y = (window.pageYOffset + parentTop) + e.tBarElementHeight;\n }\n break;\n case 'bottom': {\n var posY = void 0;\n if (viewPort === 'document') {\n if (type === 'inline') {\n posY = (e.y - e.popHeight - 10);\n }\n else {\n if ((e.windowHeight - (parentTop + e.tBarElementHeight)) > e.popHeight) {\n if ((contentTop - e.windowHeight) > e.popHeight) {\n posY = (contentTop + (e.windowHeight - parentTop)) - e.popHeight;\n }\n else {\n posY = contentTop;\n }\n }\n else {\n posY = e.windowY + (parentTop + e.tBarElementHeight);\n }\n }\n }\n else {\n if (e.target.tagName !== 'IMG') {\n posY = (e.parentData.bottom + window.pageYOffset) - e.popHeight - 10;\n }\n else {\n posY = (e.parentData.bottom + window.pageYOffset) - e.popHeight - 5;\n }\n }\n y = posY;\n break;\n }\n case 'right':\n if (type === 'inline') {\n x = window.pageXOffset + (e.windowWidth - (e.popWidth + e.bodyRightSpace + 10));\n }\n else {\n x = e.x - e.popWidth;\n }\n break;\n case 'left':\n if (type === 'inline') {\n x = 0;\n }\n else {\n x = e.parentData.left;\n }\n break;\n }\n }\n this.popupObj.position.X = (x) ? x : this.popupObj.position.X;\n this.popupObj.position.Y = (y) ? y : this.popupObj.position.Y;\n this.popupObj.dataBind();\n };\n /**\n * showPopup method\n *\n * @param {number} x - specifies the x value\n * @param {number} y - specifies the y value\n * @param {Element} target - specifies the element\n * @returns {void}\n * @hidden\n\n */\n BaseQuickToolbar.prototype.showPopup = function (x, y, target) {\n var _this = this;\n var eventArgs = { popup: this.popupObj, cancel: false, targetElement: target };\n this.parent.trigger(events.beforeQuickToolbarOpen, eventArgs, function (beforeQuickToolbarArgs) {\n if (!beforeQuickToolbarArgs.cancel) {\n var editPanelTop = void 0;\n var editPanelHeight = void 0;\n var bodyStyle = window.getComputedStyle(document.body);\n var bodyRight = parseFloat(bodyStyle.marginRight.split('px')[0]) + parseFloat(bodyStyle.paddingRight.split('px')[0]);\n var windowHeight = window.innerHeight;\n var windowWidth = window.innerWidth;\n var parent_1 = _this.parent.element;\n var toolbarAvail = !isNullOrUndefined(_this.parent.getToolbar());\n var tbHeight = toolbarAvail && _this.parent.toolbarModule.getToolbarHeight();\n var expTBHeight = toolbarAvail && _this.parent.toolbarModule.getExpandTBarPopHeight();\n var tBarHeight = (toolbarAvail) ? (tbHeight + expTBHeight) : 0;\n addClass([_this.element], [classes.CLS_HIDE]);\n if (Browser.isDevice && !isIDevice()) {\n addClass([_this.parent.getToolbar()], [classes.CLS_HIDE]);\n }\n if (_this.parent.iframeSettings.enable) {\n var cntEle = _this.contentRenderer.getPanel().contentWindow;\n editPanelTop = cntEle.pageYOffset;\n editPanelHeight = cntEle.innerHeight;\n }\n else {\n var cntEle = closest(target, '.' + classes.CLS_RTE_CONTENT);\n editPanelTop = (cntEle) ? cntEle.scrollTop : 0;\n editPanelHeight = (cntEle) ? cntEle.offsetHeight : 0;\n }\n if (!_this.parent.inlineMode.enable && !closest(target, 'table')) {\n _this.parent.disableToolbarItem(_this.parent.toolbarSettings.items);\n _this.parent.enableToolbarItem(['Undo', 'Redo']);\n }\n append([_this.element], document.body);\n _this.popupObj.position.X = x + 20;\n _this.popupObj.position.Y = y + 20;\n _this.popupObj.dataBind();\n _this.popupObj.element.classList.add('e-popup-open');\n _this.dropDownButtons.renderDropDowns({\n container: _this.toolbarElement,\n containerType: 'quick',\n items: _this.stringItems\n });\n _this.colorPickerObj.renderColorPickerInput({\n container: _this.toolbarElement,\n containerType: 'quick',\n items: _this.stringItems\n });\n var showPopupData = {\n x: x, y: y,\n target: target,\n editTop: editPanelTop,\n editHeight: editPanelHeight,\n popup: _this.popupObj.element,\n popHeight: _this.popupObj.element.offsetHeight,\n popWidth: _this.popupObj.element.offsetWidth,\n parentElement: parent_1,\n bodyRightSpace: bodyRight,\n windowY: window.pageYOffset,\n windowHeight: windowHeight,\n windowWidth: windowWidth,\n parentData: parent_1.getBoundingClientRect(),\n tBarElementHeight: tBarHeight\n };\n if (target.tagName === 'IMG') {\n _this.setPosition(showPopupData);\n }\n if (!_this.parent.inlineMode.enable) {\n _this.checkCollision(showPopupData, 'parent', '');\n }\n _this.checkCollision(showPopupData, 'document', ((_this.parent.inlineMode.enable) ? 'inline' : ''));\n _this.popupObj.element.classList.remove('e-popup-open');\n removeClass([_this.element], [classes.CLS_HIDE]);\n _this.popupObj.show({ name: 'ZoomIn', duration: (Browser.isIE ? 250 : 400) });\n setStyleAttribute(_this.element, {\n maxWidth: window.outerWidth + 'px'\n });\n addClass([_this.element], [classes.CLS_POP]);\n _this.isDOMElement = true;\n }\n });\n };\n /**\n * hidePopup method\n *\n * @returns {void}\n * @hidden\n\n */\n BaseQuickToolbar.prototype.hidePopup = function () {\n var viewSourcePanel = this.parent.sourceCodeModule.getViewPanel();\n if (Browser.isDevice && !isIDevice()) {\n removeClass([this.parent.getToolbar()], [classes.CLS_HIDE]);\n }\n if (!isNullOrUndefined(this.parent.getToolbar()) && !this.parent.inlineMode.enable) {\n if (isNullOrUndefined(viewSourcePanel) || viewSourcePanel.style.display === 'none') {\n this.parent.enableToolbarItem(this.parent.toolbarSettings.items);\n }\n }\n this.removeEleFromDOM();\n this.isDOMElement = false;\n };\n /**\n * @param {string} item - specifies the string value\n * @param {number} index - specifies the index value\n * @returns {void}\n * @hidden\n\n */\n BaseQuickToolbar.prototype.addQTBarItem = function (item, index) {\n this.quickTBarObj.toolbarObj.addItems(this.quickTBarObj.getItems(item, 'toolbar'), index);\n };\n /**\n * @param {number} index - specifies the index value\n * @returns {void}\n * @hidden\n\n */\n BaseQuickToolbar.prototype.removeQTBarItem = function (index) {\n this.quickTBarObj.toolbarObj.removeItems(index);\n };\n BaseQuickToolbar.prototype.removeEleFromDOM = function () {\n var element = this.popupObj.element;\n if (this.isDOMElement) {\n this.dropDownButtons.destroyDropDowns();\n this.colorPickerObj.destroyColorPicker();\n removeClass([this.element], [classes.CLS_POP]);\n detach(element);\n var args = this.popupObj;\n this.parent.trigger(events.quickToolbarClose, args);\n }\n };\n BaseQuickToolbar.prototype.updateStatus = function (args) {\n var options = {\n args: args,\n dropDownModule: this.dropDownButtons,\n parent: this.parent,\n tbElements: selectAll('.' + classes.CLS_TB_ITEM, this.element),\n tbItems: this.quickTBarObj.toolbarObj.items\n };\n setToolbarStatus(options, true, this.parent);\n if (!select('.e-rte-srctextarea', this.parent.element)) {\n updateUndoRedoStatus(this.parent.getBaseToolbarObject(), this.parent.formatter.editorManager.undoRedoManager.getUndoStatus());\n }\n };\n /**\n * Destroys the Quick toolbar.\n *\n * @function destroy\n * @returns {void}\n * @hidden\n\n */\n BaseQuickToolbar.prototype.destroy = function () {\n if (this.popupObj && !this.popupObj.isDestroyed) {\n this.popupObj.destroy();\n this.removeEleFromDOM();\n }\n this.removeEventListener();\n };\n /**\n * addEventListener method\n *\n * @returns {void}\n * @hidden\n\n */\n BaseQuickToolbar.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.destroy, this.destroy, this);\n this.parent.on(events.modelChanged, this.onPropertyChanged, this);\n if (this.parent.inlineMode.enable) {\n this.parent.on(events.toolbarUpdated, this.updateStatus, this);\n }\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {RichTextEditorModel} e - specifies the model element\n * @returns {void}\n * @hidden\n\n */\n BaseQuickToolbar.prototype.onPropertyChanged = function (e) {\n if (!isNullOrUndefined(e.newProp.inlineMode)) {\n for (var _i = 0, _a = Object.keys(e.newProp.inlineMode); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'enable':\n if (e.newProp.inlineMode.enable) {\n this.parent.on(events.toolbarUpdated, this.updateStatus, this);\n }\n else {\n this.parent.off(events.toolbarUpdated, this.updateStatus);\n }\n break;\n }\n }\n }\n };\n /**\n * removeEventListener method\n *\n * @returns {void}\n * @hidden\n\n */\n BaseQuickToolbar.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.destroy, this.destroy);\n this.parent.off(events.modelChanged, this.onPropertyChanged);\n if (this.parent.inlineMode.enable) {\n this.parent.off(events.toolbarUpdated, this.updateStatus);\n }\n };\n return BaseQuickToolbar;\n}());\nexport { BaseQuickToolbar };\n","import { Popup } from '@syncfusion/ej2-popups';\nimport { CLS_QUICK_POP } from '../base/classes';\nimport * as events from '../base/constant';\n/**\n * `Popup renderer` module is used to render popup in RichTextEditor.\n *\n * @hidden\n\n */\nvar PopupRenderer = /** @class */ (function () {\n /**\n * Constructor for popup renderer module\n *\n * @param {IRichTextEditor} parent - specifies the parent.\n */\n function PopupRenderer(parent) {\n this.parent = parent;\n }\n PopupRenderer.prototype.quickToolbarOpen = function () {\n var args = this.popupObj;\n this.parent.trigger(events.quickToolbarOpen, args);\n };\n /**\n * renderPopup method\n *\n * @param {BaseQuickToolbar} args - specifies the arguments.\n * @returns {void}\n * @hidden\n\n */\n PopupRenderer.prototype.renderPopup = function (args) {\n this.setPanel(args.element);\n this.renderPanel();\n args.popupObj = new Popup(args.element, {\n targetType: 'relative',\n relateTo: this.parent.element,\n open: this.quickToolbarOpen.bind(this)\n });\n this.popupObj = args.popupObj;\n args.popupObj.hide();\n };\n /**\n * The function is used to add popup class in Quick Toolbar\n *\n * @returns {void}\n * @hidden\n\n */\n PopupRenderer.prototype.renderPanel = function () {\n this.getPanel().classList.add(CLS_QUICK_POP);\n };\n /**\n * Get the popup element of RichTextEditor\n *\n * @returns {Element} - specifies the element\n * @hidden\n\n */\n PopupRenderer.prototype.getPanel = function () {\n return this.popupPanel;\n };\n /**\n * Set the popup element of RichTextEditor\n *\n * @returns {void}\n * @param {Element} panel - specifies the element\n * @hidden\n\n */\n PopupRenderer.prototype.setPanel = function (panel) {\n this.popupPanel = panel;\n };\n return PopupRenderer;\n}());\nexport { PopupRenderer };\n","import { select, isNullOrUndefined, Browser, addClass, removeClass, EventHandler, closest, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';\nimport { RenderType } from '../base/enum';\nimport * as events from '../base/constant';\nimport { pageYOffset, hasClass, isIDevice } from '../base/util';\nimport { BaseQuickToolbar } from './base-quick-toolbar';\nimport { PopupRenderer } from '../renderer/popup-renderer';\nimport { CLS_INLINE_POP, CLS_INLINE } from '../base/classes';\n/**\n * `Quick toolbar` module is used to handle Quick toolbar actions.\n */\nvar QuickToolbar = /** @class */ (function () {\n function QuickToolbar(parent, locator) {\n this.parent = parent;\n this.locator = locator;\n this.renderFactory = this.locator.getService('rendererFactory');\n this.renderFactory.addRenderer(RenderType.Popup, new PopupRenderer(this.parent));\n this.addEventListener();\n }\n QuickToolbar.prototype.formatItems = function (items) {\n var formattedItems = [];\n items.forEach(function (item) {\n if (typeof item === 'string') {\n switch (item.toLocaleLowerCase()) {\n case 'open':\n formattedItems.push('openLink');\n break;\n case 'edit':\n formattedItems.push('editLink');\n break;\n case 'unlink':\n formattedItems.push('removeLink');\n break;\n default:\n formattedItems.push(item);\n break;\n }\n }\n else {\n formattedItems.push(item);\n }\n });\n return formattedItems;\n };\n QuickToolbar.prototype.getQTBarOptions = function (popType, mode, items, type) {\n return {\n popupType: popType,\n toolbarItems: items,\n mode: mode,\n renderType: type\n };\n };\n /**\n * createQTBar method\n *\n * @param {string} popupType - specifies the string value\n * @param {string} mode - specifies the string value.\n * @param {string} items - specifies the string.\n * @param {RenderType} type - specifies the render type.\n * @returns {BaseQuickToolbar} - specifies the quick toolbar\n * @hidden\n\n */\n QuickToolbar.prototype.createQTBar = function (popupType, mode, items, type) {\n if (items.length < 1) {\n return null;\n }\n var qTBar = new BaseQuickToolbar(this.parent, this.locator);\n qTBar.render(this.getQTBarOptions(popupType, mode, this.formatItems(items), type));\n return qTBar;\n };\n QuickToolbar.prototype.initializeQuickToolbars = function () {\n this.parent.quickToolbarModule = this;\n this.contentRenderer = this.renderFactory.getRenderer(RenderType.Content);\n if (this.parent.inlineMode.enable && this.parent.inlineMode.onSelection && isIDevice()) {\n EventHandler.add(this.contentRenderer.getDocument(), 'selectionchange', this.selectionChangeHandler, this);\n }\n };\n // eslint-disable-next-line\n QuickToolbar.prototype.onMouseDown = function (e) {\n this.parent.isBlur = false;\n this.parent.isRTE = true;\n };\n QuickToolbar.prototype.keyUpQT = function (e) {\n if (e.which == 27) {\n this.hideQuickToolbars();\n }\n };\n QuickToolbar.prototype.renderQuickToolbars = function () {\n if (this.linkQTBar || this.imageQTBar || this.textQTBar || this.tableQTBar) {\n return;\n }\n this.linkQTBar = this.createQTBar('Link', 'Scrollable', this.parent.quickToolbarSettings.link, RenderType.LinkToolbar);\n this.renderFactory.addRenderer(RenderType.LinkToolbar, this.linkQTBar);\n this.textQTBar = this.createQTBar('Text', 'Scrollable', this.parent.quickToolbarSettings.text, RenderType.TextToolbar);\n this.renderFactory.addRenderer(RenderType.TextToolbar, this.textQTBar);\n this.imageQTBar = this.createQTBar('Image', 'MultiRow', this.parent.quickToolbarSettings.image, RenderType.ImageToolbar);\n this.renderFactory.addRenderer(RenderType.ImageToolbar, this.imageQTBar);\n this.tableQTBar = this.createQTBar('Table', 'MultiRow', this.parent.quickToolbarSettings.table, RenderType.TableToolbar);\n this.renderFactory.addRenderer(RenderType.TableToolbar, this.tableQTBar);\n if (this.linkQTBar) {\n EventHandler.add(this.linkQTBar.element, 'mousedown', this.onMouseDown, this);\n EventHandler.add(this.linkQTBar.element, 'keyup', this.keyUpQT, this);\n }\n if (this.imageQTBar) {\n EventHandler.add(this.imageQTBar.element, 'mousedown', this.onMouseDown, this);\n EventHandler.add(this.imageQTBar.element, 'keyup', this.keyUpQT, this);\n }\n if (this.textQTBar) {\n EventHandler.add(this.textQTBar.element, 'mousedown', this.onMouseDown, this);\n EventHandler.add(this.textQTBar.element, 'keyup', this.keyUpQT, this);\n }\n if (this.tableQTBar) {\n EventHandler.add(this.tableQTBar.element, 'mousedown', this.onMouseDown, this);\n EventHandler.add(this.tableQTBar.element, 'keyup', this.keyUpQT, this);\n }\n };\n QuickToolbar.prototype.renderInlineQuickToolbar = function () {\n if (this.parent.inlineMode.enable && (!Browser.isDevice || isIDevice())) {\n addClass([this.parent.element], [CLS_INLINE]);\n this.inlineQTBar = this.createQTBar('Inline', 'MultiRow', this.parent.toolbarSettings.items, RenderType.InlineToolbar);\n this.renderFactory.addRenderer(RenderType.InlineToolbar, this.inlineQTBar);\n EventHandler.add(this.inlineQTBar.element, 'mousedown', this.onMouseDown, this);\n EventHandler.add(this.inlineQTBar.element, 'keyup', this.keyUpQT, this);\n }\n };\n /**\n * Method for showing the inline quick toolbar\n *\n * @param {number} x -specifies the value of x.\n * @param {number} y - specifies the y valu.\n * @param {HTMLElement} target - specifies the target element.\n * @returns {void}\n * @hidden\n\n */\n QuickToolbar.prototype.showInlineQTBar = function (x, y, target) {\n if (this.parent.readonly || target.tagName.toLowerCase() === \"img\") {\n return;\n }\n this.inlineQTBar.showPopup(x, y, target);\n };\n /**\n * Method for hidding the inline quick toolbar\n *\n * @returns {void}\n * @hidden\n\n */\n QuickToolbar.prototype.hideInlineQTBar = function () {\n if (this.inlineQTBar && !hasClass(this.inlineQTBar.element, 'e-popup-close')) {\n this.inlineQTBar.hidePopup();\n }\n };\n /**\n * Method for hidding the quick toolbar\n *\n * @returns {void}\n * @hidden\n\n */\n QuickToolbar.prototype.hideQuickToolbars = function () {\n if (this.linkQTBar && !hasClass(this.linkQTBar.element, 'e-popup-close') && document.body.contains(this.linkQTBar.element)) {\n this.linkQTBar.hidePopup();\n }\n if (this.textQTBar && !hasClass(this.textQTBar.element, 'e-popup-close') && document.body.contains(this.textQTBar.element)) {\n this.textQTBar.hidePopup();\n }\n if (this.imageQTBar && !hasClass(this.imageQTBar.element, 'e-popup-close') && document.body.contains(this.imageQTBar.element)) {\n this.imageQTBar.hidePopup();\n }\n if (this.tableQTBar && !hasClass(this.tableQTBar.element, 'e-popup-close') && document.body.contains(this.tableQTBar.element)) {\n this.tableQTBar.hidePopup();\n }\n if (this.parent.inlineMode.enable && (!Browser.isDevice || isIDevice())) {\n this.hideInlineQTBar();\n }\n };\n QuickToolbar.prototype.deBounce = function (x, y, target) {\n var _this = this;\n clearTimeout(this.deBouncer);\n this.deBouncer = window.setTimeout(function () {\n _this.showInlineQTBar(x, y, target);\n }, 1000);\n };\n QuickToolbar.prototype.mouseUpHandler = function (e) {\n if (this.parent.inlineMode.enable && (!Browser.isDevice || isIDevice())) {\n var args = e.args.touches ?\n e.args.changedTouches[0] : e.args;\n var range = this.parent.getRange();\n var target = e.args.target;\n if (isNullOrUndefined(select('.' + CLS_INLINE_POP, document.body))) {\n if (isIDevice() && e.touchData && e.touchData.prevClientX !== e.touchData.clientX\n && e.touchData.prevClientY !== e.touchData.clientY) {\n return;\n }\n this.hideInlineQTBar();\n var parentLeft = this.parent.element.getBoundingClientRect().left;\n this.offsetX = this.parent.iframeSettings.enable ? window.pageXOffset + parentLeft + args.clientX : args.pageX;\n this.offsetY = pageYOffset(args, this.parent.element, this.parent.iframeSettings.enable);\n if (target.nodeName === 'TEXTAREA') {\n this.showInlineQTBar(this.offsetX, this.offsetY, target);\n }\n else {\n var closestAnchor = closest(target, 'a');\n target = closestAnchor ? closestAnchor : target;\n var startNode = this.parent.getRange().startContainer.parentElement;\n var endNode = this.parent.getRange().endContainer.parentElement;\n if ((isNOU(closest(startNode, 'A')) || isNOU(closest(endNode, 'A'))) && (!closest(target, 'td,th') || !range.collapsed) &&\n (target.tagName !== 'IMG' || this.parent.getRange().startOffset !== this.parent.getRange().endOffset)) {\n if (this.parent.inlineMode.onSelection && range.collapsed) {\n return;\n }\n this.target = target;\n this.showInlineQTBar(this.offsetX, this.offsetY, target);\n }\n }\n }\n }\n };\n QuickToolbar.prototype.keyDownHandler = function () {\n if ((this.parent.inlineMode.enable && (!Browser.isDevice || isIDevice()))\n && !isNullOrUndefined(select('.' + CLS_INLINE_POP, document))) {\n this.hideInlineQTBar();\n }\n };\n QuickToolbar.prototype.inlineQTBarMouseDownHandler = function () {\n if ((this.parent.inlineMode.enable && (!Browser.isDevice || isIDevice()))\n && !isNullOrUndefined(select('.' + CLS_INLINE_POP, document))) {\n this.hideInlineQTBar();\n }\n };\n QuickToolbar.prototype.keyUpHandler = function (e) {\n if (this.parent.inlineMode.enable && !Browser.isDevice) {\n if (this.parent.inlineMode.onSelection) {\n return;\n }\n var args = e.args;\n this.deBounce(this.offsetX, this.offsetY, args.target);\n }\n };\n QuickToolbar.prototype.selectionChangeHandler = function (e) {\n var _this = this;\n clearTimeout(this.deBouncer);\n this.deBouncer = window.setTimeout(function () {\n _this.onSelectionChange(e);\n }, 1000);\n };\n QuickToolbar.prototype.onSelectionChange = function (e) {\n if (!isNullOrUndefined(select('.' + CLS_INLINE_POP, document.body))) {\n return;\n }\n var selection = this.contentRenderer.getDocument().getSelection();\n if (!selection.isCollapsed) {\n this.mouseUpHandler({ args: e });\n }\n };\n /**\n * getInlineBaseToolbar method\n *\n * @returns {void}\n * @hidden\n\n */\n QuickToolbar.prototype.getInlineBaseToolbar = function () {\n return this.inlineQTBar && this.inlineQTBar.quickTBarObj;\n };\n /**\n * Destroys the ToolBar.\n *\n * @function destroy\n * @returns {void}\n * @hidden\n\n */\n QuickToolbar.prototype.destroy = function () {\n if (this.linkQTBar) {\n EventHandler.remove(this.linkQTBar.element, 'mousedown', this.onMouseDown);\n EventHandler.remove(this.linkQTBar.element, 'keyup', this.keyUpQT);\n this.linkQTBar.destroy();\n }\n if (this.textQTBar) {\n EventHandler.remove(this.textQTBar.element, 'mousedown', this.onMouseDown);\n EventHandler.remove(this.textQTBar.element, 'keyup', this.keyUpQT);\n this.textQTBar.destroy();\n }\n if (this.imageQTBar) {\n EventHandler.remove(this.imageQTBar.element, 'mousedown', this.onMouseDown);\n EventHandler.remove(this.imageQTBar.element, 'keyup', this.keyUpQT);\n this.imageQTBar.destroy();\n }\n if (this.tableQTBar) {\n EventHandler.remove(this.tableQTBar.element, 'mousedown', this.onMouseDown);\n EventHandler.remove(this.tableQTBar.element, 'keyup', this.keyUpQT);\n this.tableQTBar.destroy();\n }\n if (this.inlineQTBar) {\n EventHandler.remove(this.inlineQTBar.element, 'mousedown', this.onMouseDown);\n EventHandler.remove(this.inlineQTBar.element, 'keyup', this.keyUpQT);\n if (isIDevice()) {\n EventHandler.remove(document, 'selectionchange', this.selectionChangeHandler);\n }\n this.inlineQTBar.destroy();\n }\n this.removeEventListener();\n };\n QuickToolbar.prototype.wireInlineQTBarEvents = function () {\n this.parent.on(events.mouseUp, this.mouseUpHandler, this);\n this.parent.on(events.mouseDown, this.inlineQTBarMouseDownHandler, this);\n this.parent.on(events.keyDown, this.keyDownHandler, this);\n this.parent.on(events.keyUp, this.keyUpHandler, this);\n this.parent.on(events.sourceCodeMouseDown, this.mouseUpHandler, this);\n this.parent.on(events.renderInlineToolbar, this.renderInlineQuickToolbar, this);\n };\n QuickToolbar.prototype.unWireInlineQTBarEvents = function () {\n this.parent.off(events.mouseUp, this.mouseUpHandler);\n this.parent.off(events.mouseDown, this.inlineQTBarMouseDownHandler);\n this.parent.off(events.keyDown, this.keyDownHandler);\n this.parent.off(events.keyUp, this.keyUpHandler);\n this.parent.off(events.sourceCodeMouseDown, this.mouseUpHandler);\n this.parent.off(events.renderInlineToolbar, this.renderInlineQuickToolbar);\n };\n // eslint-disable-next-line\n QuickToolbar.prototype.toolbarUpdated = function (args) {\n if (this.linkQTBar && !hasClass(this.linkQTBar.element, 'e-popup-close')) {\n this.linkQTBar.hidePopup();\n }\n if (this.imageQTBar && !hasClass(this.imageQTBar.element, 'e-popup-close')) {\n this.imageQTBar.hidePopup();\n }\n if (this.tableQTBar && !hasClass(this.tableQTBar.element, 'e-popup-close')) {\n this.tableQTBar.hidePopup();\n }\n };\n /**\n * addEventListener\n *\n * @returns {void}\n * @hidden\n\n */\n QuickToolbar.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.initialEnd, this.initializeQuickToolbars, this);\n this.parent.on(events.mouseDown, this.renderQuickToolbars, this);\n this.parent.on(events.toolbarUpdated, this.toolbarUpdated, this);\n this.parent.on(events.drop, this.renderQuickToolbars, this);\n this.wireInlineQTBarEvents();\n this.parent.on(events.modelChanged, this.onPropertyChanged, this);\n if (this.parent.quickToolbarSettings.actionOnScroll === 'hide') {\n this.parent.on(events.scroll, this.hideQuickToolbars, this);\n this.parent.on(events.contentscroll, this.hideQuickToolbars, this);\n }\n this.parent.on(events.focusChange, this.hideQuickToolbars, this);\n this.parent.on(events.iframeMouseDown, this.onIframeMouseDown, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.parent.on(events.keyDown, this.onKeyDown, this);\n this.parent.on(events.rtlMode, this.setRtl, this);\n };\n QuickToolbar.prototype.onKeyDown = function (e) {\n var args = e.args;\n if (args.which === 8 || args.which === 46) {\n if (this.imageQTBar && !hasClass(this.imageQTBar.element, 'e-popup-close')) {\n this.imageQTBar.hidePopup();\n }\n }\n };\n QuickToolbar.prototype.onIframeMouseDown = function () {\n this.hideQuickToolbars();\n this.hideInlineQTBar();\n };\n QuickToolbar.prototype.setRtl = function (args) {\n if (this.inlineQTBar) {\n this.inlineQTBar.quickTBarObj.toolbarObj.setProperties({ enableRtl: args.enableRtl });\n }\n if (this.imageQTBar) {\n this.imageQTBar.quickTBarObj.toolbarObj.setProperties({ enableRtl: args.enableRtl });\n }\n if (this.linkQTBar) {\n this.imageQTBar.quickTBarObj.toolbarObj.setProperties({ enableRtl: args.enableRtl });\n }\n };\n /**\n * removeEventListener\n *\n * @returns {void}\n * @hidden\n\n */\n QuickToolbar.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.initialEnd, this.initializeQuickToolbars);\n this.parent.off(events.mouseDown, this.renderQuickToolbars);\n this.parent.off(events.toolbarUpdated, this.toolbarUpdated);\n this.parent.off(events.drop, this.renderQuickToolbars);\n this.unWireInlineQTBarEvents();\n this.parent.off(events.modelChanged, this.onPropertyChanged);\n if (this.parent.quickToolbarSettings.actionOnScroll === 'hide') {\n this.parent.off(events.scroll, this.hideQuickToolbars);\n this.parent.off(events.contentscroll, this.hideQuickToolbars);\n }\n this.parent.off(events.focusChange, this.hideQuickToolbars);\n this.parent.off(events.destroy, this.destroy);\n this.parent.off(events.iframeMouseDown, this.onIframeMouseDown);\n this.parent.off(events.keyDown, this.onKeyDown);\n this.parent.off(events.rtlMode, this.setRtl);\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {RichTextEditorModel} e - specifies the element.\n * @returns {void}\n * @hidden\n\n */\n QuickToolbar.prototype.onPropertyChanged = function (e) {\n if (!isNullOrUndefined(e.newProp.quickToolbarSettings)) {\n for (var _i = 0, _a = Object.keys(e.newProp.quickToolbarSettings); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'actionOnScroll':\n if (e.newProp.quickToolbarSettings.actionOnScroll === 'none') {\n this.parent.off(events.scroll, this.hideQuickToolbars);\n this.parent.off(events.contentscroll, this.hideQuickToolbars);\n }\n else {\n this.parent.on(events.scroll, this.hideQuickToolbars, this);\n this.parent.on(events.contentscroll, this.hideQuickToolbars, this);\n }\n break;\n }\n }\n }\n if (e.module !== this.getModuleName()) {\n return;\n }\n if (this.inlineQTBar) {\n removeClass([this.parent.element], [CLS_INLINE]);\n this.unWireInlineQTBarEvents();\n this.hideInlineQTBar();\n }\n if (this.parent.inlineMode.enable && (!Browser.isDevice || isIDevice())) {\n addClass([this.parent.element], [CLS_INLINE]);\n this.wireInlineQTBarEvents();\n }\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {void}\n * @hidden\n */\n QuickToolbar.prototype.getModuleName = function () {\n return 'quickToolbar';\n };\n return QuickToolbar;\n}());\nexport { QuickToolbar };\n","import { extend, isNullOrUndefined, Browser } from '@syncfusion/ej2-base';\nimport * as CONSTANT from '../base/constant';\nimport { updateUndoRedoStatus, isIDevice } from '../base/util';\nimport { KEY_DOWN, KEY_UP } from './../../common/constant';\n/**\n * Formatter\n *\n * @hidden\n\n */\nvar Formatter = /** @class */ (function () {\n function Formatter() {\n }\n /**\n * To execute the command\n *\n * @param {IRichTextEditor} self - specifies the self element.\n * @param {ActionBeginEventArgs} args - specifies the event arguments.\n * @param {MouseEvent|KeyboardEvent} event - specifies the keyboard event.\n * @param {IItemCollectionArgs} value - specifies the collection arguments\n * @returns {void}\n * @hidden\n\n */\n Formatter.prototype.process = function (self, args, event, value) {\n var _this = this;\n var selection = self.contentModule.getDocument().getSelection();\n var range = (selection.rangeCount > 0) ? selection.getRangeAt(selection.rangeCount - 1) : null;\n var saveSelection;\n if (self.editorMode === 'HTML') {\n saveSelection = this.editorManager.nodeSelection.save(range, self.contentModule.getDocument());\n }\n if (!isNullOrUndefined(args)\n && args.item.command\n && args.item.command !== 'Table'\n && args.item.command !== 'Actions'\n && args.item.command !== 'Links'\n && args.item.command !== 'Images'\n && args.item.command !== 'Files'\n && range\n && !(self.contentModule.getEditPanel().contains(this.getAncestorNode(range.commonAncestorContainer))\n || self.contentModule.getEditPanel() === range.commonAncestorContainer\n || self.contentModule.getPanel() === range.commonAncestorContainer)) {\n return;\n }\n if (isNullOrUndefined(args)) {\n var action_1 = event.action;\n if (action_1 !== 'tab' && action_1 !== 'enter' && action_1 !== 'space' && action_1 !== 'escape') {\n args = {};\n if (self.editorMode === 'Markdown' && action_1 === 'insert-table') {\n value = {\n 'headingText': self.localeObj.getConstant('TableHeadingText'),\n 'colText': self.localeObj.getConstant('TableColText')\n };\n }\n var items = {\n originalEvent: event, cancel: false,\n requestType: action_1 || (event.key + 'Key'),\n itemCollection: value\n };\n extend(args, args, items, true);\n self.trigger(CONSTANT.actionBegin, args, function (actionBeginArgs) {\n if (actionBeginArgs.cancel) {\n if (action_1 === 'paste' || action_1 === 'cut' || action_1 === 'copy') {\n event.preventDefault();\n }\n }\n });\n }\n var isTableModule = isNullOrUndefined(self.tableModule) ? true : self.tableModule ?\n self.tableModule.ensureInsideTableList : false;\n if ((event.which === 9 && isTableModule) || event.which !== 9) {\n if (event.which === 13 && self.editorMode === 'HTML') {\n value = {\n 'enterAction': self.enterKey\n };\n }\n this.editorManager.observer.notify((event.type === 'keydown' ? KEY_DOWN : KEY_UP), {\n event: event,\n callBack: this.onSuccess.bind(this, self),\n value: value,\n enterAction: self.enterKey\n });\n }\n }\n else if (!isNullOrUndefined(args) && args.item.command && args.item.subCommand && ((args.item.command !== args.item.subCommand\n && args.item.command !== 'Font')\n || ((args.item.subCommand === 'FontName' || args.item.subCommand === 'FontSize') && args.name === 'dropDownSelect')\n || ((args.item.subCommand === 'BackgroundColor' || args.item.subCommand === 'FontColor')\n && args.name === 'colorPickerChanged'))) {\n extend(args, args, { requestType: args.item.subCommand, cancel: false, itemCollection: value, selectType: args.name }, true);\n self.trigger(CONSTANT.actionBegin, args, function (actionBeginArgs) {\n if (!actionBeginArgs.cancel) {\n if (_this.getUndoRedoStack().length === 0 && actionBeginArgs.item.command !== 'Links'\n && actionBeginArgs.item.command !== 'Images') {\n _this.saveData();\n }\n self.isBlur = false;\n self.contentModule.getEditPanel().focus();\n if (self.editorMode === 'HTML') {\n saveSelection.restore();\n }\n var command = actionBeginArgs.item.subCommand.toLocaleLowerCase();\n if (command === 'paste' || command === 'cut' || command === 'copy') {\n self.clipboardAction(command, event);\n }\n else {\n _this.editorManager.observer.notify(CONSTANT.checkUndo, { subCommand: actionBeginArgs.item.subCommand });\n _this.editorManager.execCommand(actionBeginArgs.item.command, actionBeginArgs.item.subCommand, event, _this.onSuccess.bind(_this, self), actionBeginArgs.item.value, actionBeginArgs.item.subCommand === 'Pre' && actionBeginArgs.selectType === 'dropDownSelect' ?\n { name: actionBeginArgs.selectType } : value, ('#' + self.getID() + ' iframe'), self.enterKey);\n }\n }\n });\n }\n if (isNullOrUndefined(event) || event && event.action !== 'copy') {\n this.enableUndo(self);\n }\n };\n Formatter.prototype.getAncestorNode = function (node) {\n node = node.nodeType === 3 ? node.parentNode : node;\n return node;\n };\n /**\n * onKeyHandler method\n *\n * @param {IRichTextEditor} self - specifies the self element.\n * @param {KeyboardEvent} e - specifies the keyboard event.\n * @returns {void}\n * @hidden\n\n */\n Formatter.prototype.onKeyHandler = function (self, e) {\n var _this = this;\n this.editorManager.observer.notify(KEY_UP, {\n event: e, callBack: function () {\n self.notify(CONSTANT.contentChanged, {});\n _this.enableUndo(self);\n }\n });\n };\n /**\n * onSuccess method\n *\n * @param {IRichTextEditor} self - specifies the self element.\n * @param {IMarkdownFormatterCallBack} events - specifies the event call back\n * @returns {void}\n * @hidden\n\n */\n Formatter.prototype.onSuccess = function (self, events) {\n self.notify(CONSTANT.contentChanged, {});\n if (events && (isNullOrUndefined(events.event) || events.event.action !== 'copy')) {\n this.enableUndo(self);\n self.notify(CONSTANT.execCommandCallBack, events);\n }\n self.trigger(CONSTANT.actionComplete, events, function (callbackArgs) {\n self.setPlaceHolder();\n if (callbackArgs.requestType === 'Images' || callbackArgs.requestType === 'Links' && self.editorMode === 'HTML') {\n var args = callbackArgs;\n if (callbackArgs.requestType === 'Links' && callbackArgs.event &&\n callbackArgs.event.type === 'keydown' &&\n callbackArgs.event.keyCode === 32) {\n return;\n }\n self.notify(CONSTANT.insertCompleted, {\n args: args.event, type: callbackArgs.requestType, isNotify: true,\n elements: args.elements\n });\n }\n self.autoResize();\n });\n };\n /**\n * Save the data for undo and redo action.\n *\n * @param {KeyboardEvent} e - specifies the keyboard event.\n * @returns {void}\n * @hidden\n\n */\n Formatter.prototype.saveData = function (e) {\n this.editorManager.undoRedoManager.saveData(e);\n };\n /**\n * getUndoStatus method\n *\n * @returns {void}\n * @hidden\n\n */\n Formatter.prototype.getUndoStatus = function () {\n return this.editorManager.undoRedoManager.getUndoStatus();\n };\n /* eslint-disable */\n /**\n * getUndoRedoStack method\n *\n * @param {IHtmlUndoRedoData} - specifies the redo data.\n * @returns {void}\n * @hidden\n\n */\n /* eslint-enable */\n Formatter.prototype.getUndoRedoStack = function () {\n return this.editorManager.undoRedoManager.undoRedoStack;\n };\n /**\n * enableUndo method\n *\n * @param {IRichTextEditor} self - specifies the self element.\n * @returns {void}\n * @hidden\n\n */\n Formatter.prototype.enableUndo = function (self) {\n var status = this.getUndoStatus();\n if (self.inlineMode.enable && (!Browser.isDevice || isIDevice())) {\n updateUndoRedoStatus(self.quickToolbarModule.inlineQTBar.quickTBarObj, status);\n }\n else {\n if (self.toolbarModule) {\n updateUndoRedoStatus(self.toolbarModule.baseToolbar, status);\n }\n }\n };\n return Formatter;\n}());\nexport { Formatter };\n","/**\n * Constant values for EditorManager\n */\n/**\n * Image plugin events\n *\n * @hidden\n */\nexport var IMAGE = 'INSERT-IMAGE';\nexport var TABLE = 'INSERT-TABLE';\nexport var LINK = 'INSERT-LINK';\nexport var INSERT_ROW = 'INSERT-ROW';\nexport var INSERT_COLUMN = 'INSERT-COLUMN';\nexport var DELETEROW = 'DELETE-ROW';\nexport var DELETECOLUMN = 'DELETE-COLUMN';\nexport var REMOVETABLE = 'REMOVE-TABLE';\nexport var TABLEHEADER = 'TABLE-HEADER';\nexport var TABLE_VERTICAL_ALIGN = 'TABLE_VERTICAL_ALIGN';\nexport var TABLE_MERGE = 'TABLE_MERGE';\nexport var TABLE_VERTICAL_SPLIT = 'TABLE_VERTICAL_SPLIT';\nexport var TABLE_HORIZONTAL_SPLIT = 'TABLE_HORIZONTAL_SPLIT';\nexport var TABLE_MOVE = 'TABLE_MOVE';\n/**\n * Alignments plugin events\n *\n * @hidden\n */\nexport var ALIGNMENT_TYPE = 'alignment-type';\n/**\n * Indents plugin events\n *\n * @hidden\n */\nexport var INDENT_TYPE = 'indent-type';\n/**\n * Constant tag names\n *\n * @hidden\n */\nexport var DEFAULT_TAG = 'p';\n/**\n * @hidden\n */\nexport var BLOCK_TAGS = ['address', 'article', 'aside', 'audio', 'blockquote',\n 'canvas', 'details', 'dd', 'div', 'dl', 'dt', 'fieldset', 'figcaption', 'figure', 'footer',\n 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hgroup', 'hr', 'li', 'main', 'nav',\n 'noscript', 'ol', 'output', 'p', 'pre', 'section', 'table', 'tbody', 'td', 'tfoot', 'th',\n 'thead', 'tr', 'ul', 'video', 'body'];\n/**\n * @hidden\n */\nexport var IGNORE_BLOCK_TAGS = ['td', 'th'];\n/**\n * @hidden\n */\nexport var TABLE_BLOCK_TAGS = ['table', 'tbody', 'td', 'tfoot', 'th',\n 'thead', 'tr'];\n/**\n * Selection plugin events\n *\n * @hidden\n */\nexport var SELECTION_TYPE = 'selection-type';\n/**\n * Insert HTML plugin events\n *\n * @hidden\n */\nexport var INSERTHTML_TYPE = 'inserthtml-type';\n/**\n * Insert Text plugin events\n *\n * @hidden\n */\nexport var INSERT_TEXT_TYPE = 'insert-text-type';\n/**\n * Clear Format HTML plugin events\n *\n * @hidden\n */\nexport var CLEAR_TYPE = 'clear-type';\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * `Selection` module is used to handle RTE Selections.\n */\nvar NodeSelection = /** @class */ (function () {\n function NodeSelection() {\n this.startNodeName = [];\n this.endNodeName = [];\n }\n NodeSelection.prototype.saveInstance = function (range, body) {\n this.range = range.cloneRange();\n this.rootNode = this.documentFromRange(range);\n this.body = body;\n this.startContainer = this.getNodeArray(range.startContainer, true);\n this.endContainer = this.getNodeArray(range.endContainer, false);\n this.startOffset = range.startOffset;\n this.endOffset = range.endOffset;\n this.html = this.body.innerHTML;\n return this;\n };\n NodeSelection.prototype.documentFromRange = function (range) {\n return (9 === range.startContainer.nodeType) ? range.startContainer : range.startContainer.ownerDocument;\n };\n NodeSelection.prototype.getRange = function (docElement) {\n var select = this.get(docElement);\n var range = select && select.rangeCount > 0 ? select.getRangeAt(select.rangeCount - 1) : docElement.createRange();\n return (range.startContainer !== docElement || range.endContainer !== docElement\n || range.startOffset || range.endOffset || (range.setStart(docElement.body, 0),\n range.collapse(!0)),\n range);\n };\n /**\n * get method\n *\n * @param {Document} docElement - specifies the get function\n * @returns {void}\n * @hidden\n\n */\n NodeSelection.prototype.get = function (docElement) {\n return docElement.defaultView.getSelection();\n };\n /**\n * save method\n *\n * @param {Range} range - range value.\n * @param {Document} docElement - specifies the document.\n * @returns {void}\n * @hidden\n\n */\n NodeSelection.prototype.save = function (range, docElement) {\n range = (range) ? range.cloneRange() : this.getRange(docElement);\n return this.saveInstance(range, docElement.body);\n };\n /**\n * getIndex method\n *\n * @param {Node} node - specifies the node value.\n * @returns {void}\n * @hidden\n\n */\n NodeSelection.prototype.getIndex = function (node) {\n var index;\n var num = 0;\n node = !node.previousSibling && node.tagName === 'BR' ? node : node.previousSibling;\n if (node) {\n for (var type = node.nodeType; node; null) {\n index = node.nodeType;\n num++;\n //eslint-disable-next-line\n type = index;\n node = node.previousSibling;\n }\n }\n return num;\n };\n NodeSelection.prototype.isChildNode = function (nodeCollection, parentNode) {\n for (var index = 0; index < parentNode.childNodes.length; index++) {\n if (nodeCollection.indexOf(parentNode.childNodes[index]) > -1) {\n return true;\n }\n }\n return false;\n };\n NodeSelection.prototype.getNode = function (startNode, endNode, nodeCollection) {\n if (endNode === startNode &&\n (startNode.nodeType === 3 || !startNode.firstChild || nodeCollection.indexOf(startNode.firstChild) !== -1\n || this.isChildNode(nodeCollection, startNode))) {\n return null;\n }\n if (nodeCollection.indexOf(startNode.firstChild) === -1 && startNode.firstChild && !this.isChildNode(nodeCollection, startNode)) {\n return startNode.firstChild;\n }\n if (startNode.nextSibling) {\n return startNode.nextSibling;\n }\n if (!startNode.parentNode) {\n return null;\n }\n else {\n return startNode.parentNode;\n }\n };\n /**\n * getNodeCollection method\n *\n * @param {Range} range -specifies the range.\n * @returns {void}\n * @hidden\n\n */\n NodeSelection.prototype.getNodeCollection = function (range) {\n var startNode = range.startContainer.childNodes[range.startOffset]\n || range.startContainer;\n var endNode = range.endContainer.childNodes[(range.endOffset > 0) ? (range.endOffset - 1) : range.endOffset]\n || range.endContainer;\n if ((startNode === endNode || (startNode.nodeName === 'BR' && startNode === range.endContainer.childNodes[range.endOffset])) &&\n startNode.childNodes.length === 0) {\n return [startNode];\n }\n if (range.startOffset === range.endOffset && range.startOffset !== 0 && range.startContainer.nodeName === 'PRE') {\n return [startNode.nodeName === 'BR' || startNode.nodeName === '#text' ? startNode : startNode.childNodes[0]];\n }\n var nodeCollection = [];\n do {\n if (nodeCollection.indexOf(startNode) === -1) {\n nodeCollection.push(startNode);\n }\n startNode = this.getNode(startNode, endNode, nodeCollection);\n } while (startNode);\n return nodeCollection;\n };\n /**\n * getParentNodeCollection method\n *\n * @param {Range} range - specifies the range value.\n * @returns {void}\n * @hidden\n\n */\n NodeSelection.prototype.getParentNodeCollection = function (range) {\n return this.getParentNodes(this.getNodeCollection(range), range);\n };\n /**\n * getParentNodes method\n *\n * @param {Node[]} nodeCollection - specifies the collection of nodes.\n * @param {Range} range - specifies the range values.\n * @returns {void}\n * @hidden\n\n */\n NodeSelection.prototype.getParentNodes = function (nodeCollection, range) {\n nodeCollection = nodeCollection.reverse();\n for (var index = 0; index < nodeCollection.length; index++) {\n if ((nodeCollection.indexOf(nodeCollection[index].parentNode) !== -1)\n || (nodeCollection[index].nodeType === 3 &&\n range.startContainer !== range.endContainer &&\n range.startContainer.parentNode !== range.endContainer.parentNode)) {\n nodeCollection.splice(index, 1);\n index--;\n }\n else if (nodeCollection[index].nodeType === 3) {\n nodeCollection[index] = nodeCollection[index].parentNode;\n }\n }\n return nodeCollection;\n };\n /**\n * getSelectionNodeCollection method\n *\n * @param {Range} range - specifies the range value.\n * @returns {void}\n * @hidden\n\n */\n NodeSelection.prototype.getSelectionNodeCollection = function (range) {\n return this.getSelectionNodes(this.getNodeCollection(range));\n };\n /**\n * getSelectionNodeCollection along with BR node method\n *\n * @param {Range} range - specifies the range value.\n * @returns {void}\n * @hidden\n\n */\n NodeSelection.prototype.getSelectionNodeCollectionBr = function (range) {\n return this.getSelectionNodesBr(this.getNodeCollection(range));\n };\n /**\n * getParentNodes method\n *\n * @param {Node[]} nodeCollection - specifies the collection of nodes.\n * @returns {void}\n * @hidden\n\n */\n NodeSelection.prototype.getSelectionNodes = function (nodeCollection) {\n nodeCollection = nodeCollection.reverse();\n var regEx = new RegExp(String.fromCharCode(8203), 'g');\n for (var index = 0; index < nodeCollection.length; index++) {\n if (nodeCollection[index].nodeType !== 3 || (nodeCollection[index].textContent.trim() === '' ||\n (nodeCollection[index].textContent.length === 1 && nodeCollection[index].textContent.match(regEx)))) {\n nodeCollection.splice(index, 1);\n index--;\n }\n }\n return nodeCollection.reverse();\n };\n /**\n * Get selection text nodes with br method.\n *\n * @param {Node[]} nodeCollection - specifies the collection of nodes.\n * @returns {void}\n * @hidden\n\n */\n NodeSelection.prototype.getSelectionNodesBr = function (nodeCollection) {\n nodeCollection = nodeCollection.reverse();\n var regEx = new RegExp(String.fromCharCode(8203), 'g');\n for (var index = 0; index < nodeCollection.length; index++) {\n if (nodeCollection[index].nodeName !== 'BR' &&\n (nodeCollection[index].nodeType !== 3 || (nodeCollection[index].textContent.trim() === '' ||\n (nodeCollection[index].textContent.length === 1 && nodeCollection[index].textContent.match(regEx))))) {\n nodeCollection.splice(index, 1);\n index--;\n }\n }\n return nodeCollection.reverse();\n };\n /**\n * getInsertNodeCollection method\n *\n * @param {Range} range - specifies the range value.\n * @returns {void}\n * @hidden\n\n */\n NodeSelection.prototype.getInsertNodeCollection = function (range) {\n return this.getInsertNodes(this.getNodeCollection(range));\n };\n /**\n * getInsertNodes method\n *\n * @param {Node[]} nodeCollection - specifies the collection of nodes.\n * @returns {void}\n * @hidden\n\n */\n NodeSelection.prototype.getInsertNodes = function (nodeCollection) {\n nodeCollection = nodeCollection.reverse();\n for (var index = 0; index < nodeCollection.length; index++) {\n if ((nodeCollection[index].childNodes.length !== 0 &&\n nodeCollection[index].nodeType !== 3) ||\n (nodeCollection[index].nodeType === 3 &&\n nodeCollection[index].textContent === '')) {\n nodeCollection.splice(index, 1);\n index--;\n }\n }\n return nodeCollection.reverse();\n };\n /**\n * getNodeArray method\n *\n * @param {Node} node - specifies the node content.\n * @param {boolean} isStart - specifies the boolean value.\n * @param {Document} root - specifies the root document.\n * @returns {void}\n * @hidden\n\n */\n NodeSelection.prototype.getNodeArray = function (node, isStart, root) {\n var array = [];\n // eslint-disable-next-line\n ((isStart) ? (this.startNodeName = []) : (this.endNodeName = []));\n for (; node !== (root ? root : this.rootNode); null) {\n if (isNullOrUndefined(node)) {\n break;\n }\n // eslint-disable-next-line\n (isStart) ? this.startNodeName.push(node.nodeName.toLowerCase()) : this.endNodeName.push(node.nodeName.toLowerCase());\n array.push(this.getIndex(node));\n node = node.parentNode;\n }\n return array;\n };\n NodeSelection.prototype.setRangePoint = function (range, isvalid, num, size) {\n var node = this.rootNode;\n var index = num.length;\n var constant = size;\n for (; index--; null) {\n node = node && node.childNodes[num[index]];\n }\n if (node && constant >= 0 && node.nodeName !== 'html') {\n range[isvalid ? 'setStart' : 'setEnd'](node, constant);\n }\n return range;\n };\n /**\n * restore method\n *\n * @returns {void}\n * @hidden\n\n */\n NodeSelection.prototype.restore = function () {\n var range = this.range.cloneRange();\n range = this.setRangePoint(range, true, this.startContainer, this.startOffset);\n range = this.setRangePoint(range, false, this.endContainer, this.endOffset);\n this.selectRange(this.rootNode, range);\n return range;\n };\n NodeSelection.prototype.selectRange = function (docElement, range) {\n this.setRange(docElement, range);\n this.save(range, docElement);\n };\n /**\n * setRange method\n *\n * @param {Document} docElement - specifies the document.\n * @param {Range} range - specifies the range.\n * @returns {void}\n * @hidden\n\n */\n NodeSelection.prototype.setRange = function (docElement, range) {\n var selection = this.get(docElement);\n selection.removeAllRanges();\n selection.addRange(range);\n };\n /**\n * setSelectionText method\n *\n * @param {Document} docElement - specifies the documrent\n * @param {Node} startNode - specifies the starting node.\n * @param {Node} endNode - specifies the the end node.\n * @param {number} startIndex - specifies the starting index.\n * @param {number} endIndex - specifies the end index.\n * @returns {void}\n * @hidden\n\n */\n NodeSelection.prototype.setSelectionText = function (docElement, startNode, endNode, startIndex, endIndex) {\n var range = docElement.createRange();\n range.setStart(startNode, startIndex);\n range.setEnd(endNode, endIndex);\n this.setRange(docElement, range);\n };\n /**\n * setSelectionContents method\n *\n * @param {Document} docElement - specifies the document.\n * @param {Node} element - specifies the node.\n * @returns {void}\n * @hidden\n\n */\n NodeSelection.prototype.setSelectionContents = function (docElement, element) {\n var range = docElement.createRange();\n range.selectNode(element);\n this.setRange(docElement, range);\n };\n /**\n * setSelectionNode method\n *\n * @param {Document} docElement - specifies the document.\n * @param {Node} element - specifies the node.\n * @returns {void}\n * @hidden\n\n */\n NodeSelection.prototype.setSelectionNode = function (docElement, element) {\n var range = docElement.createRange();\n range.selectNodeContents(element);\n this.setRange(docElement, range);\n };\n /**\n * getSelectedNodes method\n *\n * @param {Document} docElement - specifies the document.\n * @returns {void}\n * @hidden\n\n */\n NodeSelection.prototype.getSelectedNodes = function (docElement) {\n return this.getNodeCollection(this.getRange(docElement));\n };\n /**\n * Clear method\n *\n * @param {Document} docElement - specifies the document.\n * @returns {void}\n * @hidden\n\n */\n NodeSelection.prototype.Clear = function (docElement) {\n this.get(docElement).removeAllRanges();\n };\n /**\n * insertParentNode method\n *\n * @param {Document} docElement - specifies the document.\n * @param {Node} newNode - specicfies the new node.\n * @param {Range} range - specifies the range.\n * @returns {void}\n * @hidden\n\n */\n NodeSelection.prototype.insertParentNode = function (docElement, newNode, range) {\n range.surroundContents(newNode);\n this.selectRange(docElement, range);\n };\n /**\n * setCursorPoint method\n *\n * @param {Document} docElement - specifies the document.\n * @param {Element} element - specifies the element.\n * @param {number} point - specifies the point.\n * @returns {void}\n * @hidden\n\n */\n NodeSelection.prototype.setCursorPoint = function (docElement, element, point) {\n var range = docElement.createRange();\n var selection = docElement.defaultView.getSelection();\n range.setStart(element, point);\n range.collapse(true);\n selection.removeAllRanges();\n selection.addRange(range);\n };\n return NodeSelection;\n}());\nexport { NodeSelection };\n","/**\n * Default Markdown formats config for adapter\n */\nexport var markdownFormatTags = {\n 'h6': '###### ',\n 'h5': '##### ',\n 'h4': '#### ',\n 'h3': '### ',\n 'h2': '## ',\n 'h1': '# ',\n 'blockquote': '> ',\n 'pre': '```\\n',\n 'p': ''\n};\n/**\n * Default selection formats config for adapter\n */\nexport var markdownSelectionTags = {\n 'Bold': '**',\n 'Italic': '*',\n 'StrikeThrough': '~~',\n 'InlineCode': '`',\n 'SubScript': '',\n 'SuperScript': '',\n 'UpperCase': 'A-Z',\n 'LowerCase': 'a-z'\n};\n/**\n * Default Markdown lists config for adapter\n */\nexport var markdownListsTags = {\n 'OL': '1. ',\n 'UL': '- '\n};\n/**\n * Default html key config for adapter\n */\nexport var htmlKeyConfig = {\n 'toolbar-focus': 'alt+f10',\n 'escape': '27',\n 'insert-link': 'ctrl+k',\n 'insert-image': 'ctrl+shift+i',\n 'insert-table': 'ctrl+shift+e',\n 'undo': 'ctrl+z',\n 'redo': 'ctrl+y',\n 'copy': 'ctrl+c',\n 'cut': 'ctrl+x',\n 'paste': 'ctrl+v',\n 'bold': 'ctrl+b',\n 'italic': 'ctrl+i',\n 'underline': 'ctrl+u',\n 'strikethrough': 'ctrl+shift+s',\n 'uppercase': 'ctrl+shift+u',\n 'lowercase': 'ctrl+shift+l',\n 'superscript': 'ctrl+shift+=',\n 'subscript': 'ctrl+=',\n 'indents': 'ctrl+]',\n 'outdents': 'ctrl+[',\n 'html-source': 'ctrl+shift+h',\n 'full-screen': 'ctrl+shift+f',\n 'decrease-fontsize': 'ctrl+shift+<',\n 'increase-fontsize': 'ctrl+shift+>',\n 'justify-center': 'ctrl+e',\n 'justify-full': 'ctrl+j',\n 'justify-left': 'ctrl+l',\n 'justify-right': 'ctrl+r',\n 'clear-format': 'ctrl+shift+r',\n 'ordered-list': 'ctrl+shift+o',\n 'unordered-list': 'ctrl+alt+o',\n 'space': '32',\n 'enter': '13',\n 'tab': 'tab',\n 'delete': '46'\n};\n/**\n * Default markdown key config for adapter\n */\nexport var markdownKeyConfig = {\n 'toolbar-focus': 'alt+f10',\n 'escape': '27',\n 'insert-link': 'ctrl+k',\n 'insert-image': 'ctrl+shift+i',\n 'insert-table': 'ctrl+shift+e',\n 'undo': 'ctrl+z',\n 'redo': 'ctrl+y',\n 'copy': 'ctrl+c',\n 'cut': 'ctrl+x',\n 'paste': 'ctrl+v',\n 'bold': 'ctrl+b',\n 'italic': 'ctrl+i',\n 'strikethrough': 'ctrl+shift+s',\n 'uppercase': 'ctrl+shift+u',\n 'lowercase': 'ctrl+shift+l',\n 'superscript': 'ctrl+shift+=',\n 'subscript': 'ctrl+=',\n 'full-screen': 'ctrl+shift+f',\n 'ordered-list': 'ctrl+shift+o',\n 'unordered-list': 'ctrl+alt+o'\n};\n/**\n * PasteCleanup Grouping of similar functionality tags\n */\nexport var pasteCleanupGroupingTags = {\n 'b': ['strong'],\n 'strong': ['b'],\n 'i': ['emp', 'cite'],\n 'emp': ['i', 'cite'],\n 'cite': ['i', 'emp']\n};\n/**\n * PasteCleanup Grouping of similar functionality tags\n */\nexport var listConversionFilters = {\n 'first': 'MsoListParagraphCxSpFirst',\n 'middle': 'MsoListParagraphCxSpMiddle',\n 'last': 'MsoListParagraphCxSpLast'\n};\n/**\n * Dom-Node Grouping of self closing tags\n *\n * @hidden\n */\nexport var selfClosingTags = [\n 'BR',\n 'IMG'\n];\n","import * as CONSTANT from './../base/constant';\nimport { append, detach, createElement, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { NodeSelection } from './../../selection/index';\nimport { selfClosingTags } from '../../common/config';\nimport { getLastTextNode } from '../../common/util';\nexport var markerClassName = {\n startSelection: 'e-editor-select-start',\n endSelection: 'e-editor-select-end'\n};\n/**\n * DOMNode internal plugin\n *\n * @hidden\n\n */\nvar DOMNode = /** @class */ (function () {\n /**\n * Constructor for creating the DOMNode plugin\n *\n * @param {Element} parent - specifies the parent element\n * @param {Document} currentDocument - specifies the current document.\n * @hidden\n\n */\n function DOMNode(parent, currentDocument) {\n this.parent = parent;\n this.nodeSelection = new NodeSelection();\n this.currentDocument = currentDocument;\n }\n /**\n * contents method\n *\n * @param {Element} element - specifies the element.\n * @returns {void}\n * @hidden\n\n */\n DOMNode.prototype.contents = function (element) {\n return (element && 'IFRAME' !== element.tagName ? Array.prototype.slice.call(element.childNodes || []) : []);\n };\n /**\n * isBlockNode method\n *\n * @param {Element} element - specifies the node element.\n * @returns {boolean} - sepcifies the boolean value\n * @hidden\n\n */\n DOMNode.prototype.isBlockNode = function (element) {\n return (!!element && (element.nodeType === Node.ELEMENT_NODE && CONSTANT.BLOCK_TAGS.indexOf(element.tagName.toLowerCase()) >= 0));\n };\n /**\n * isLink method\n *\n * @param {Element} element - specifies the element\n * @returns {boolean} - specifies the boolean value\n * @hidden\n\n */\n DOMNode.prototype.isLink = function (element) {\n return (!!element && (element.nodeType === Node.ELEMENT_NODE && 'a' === element.tagName.toLowerCase()));\n };\n /**\n * blockParentNode method\n *\n * @param {Element} element - specifies the element\n * @returns {Element} - returns the element value\n * @hidden\n\n */\n DOMNode.prototype.blockParentNode = function (element) {\n for (; element && element.parentNode !== this.parent && ((!element.parentNode ||\n !this.hasClass(element.parentNode, 'e-node-inner'))); null) {\n element = element.parentNode;\n if (this.isBlockNode(element)) {\n return element;\n }\n }\n return element;\n };\n /**\n * rawAttributes method\n *\n * @param {Element} element - specifies the element\n * @returns {string} - returns the string value\n * @hidden\n\n */\n DOMNode.prototype.rawAttributes = function (element) {\n var rawAttr = {};\n var attributes = element.attributes;\n if (attributes.length > 0) {\n for (var d = 0; d < attributes.length; d++) {\n var e = attributes[d];\n rawAttr[e.nodeName] = e.value;\n }\n }\n return rawAttr;\n };\n /**\n * attributes method\n *\n * @param {Element} element - sepcifies the element.\n * @returns {string} - returns the string value.\n * @hidden\n\n */\n DOMNode.prototype.attributes = function (element) {\n if (!element) {\n return '';\n }\n var attr = '';\n var rawAttr = this.rawAttributes(element);\n var orderRawAttr = Object.keys(rawAttr).sort();\n for (var e = 0; e < orderRawAttr.length; e++) {\n var attrKey = orderRawAttr[e];\n var attrValue = rawAttr[attrKey];\n /* eslint-disable */\n if (attrValue.indexOf(\"'\") < 0 && attrValue.indexOf('\"') >= 0) {\n attr += ' ' + attrKey + \"='\" + attrValue + \"'\";\n }\n else if (attrValue.indexOf('\"') >= 0 && attrValue.indexOf(\"'\") >= 0) {\n /* eslint-enable */\n attrValue = attrValue.replace(/\"/g, '"');\n attr += ' ' + attrKey + '=\"' + attrValue + '\"';\n }\n else {\n attr += ' ' + attrKey + '=\"' + attrValue + '\"';\n }\n }\n return attr;\n };\n /**\n * clearAttributes method\n *\n * @param {Element} element - specifies the element\n * @returns {void}\n * @hidden\n\n */\n DOMNode.prototype.clearAttributes = function (element) {\n for (var attr = element.attributes, c = attr.length - 1; c >= 0; c--) {\n var key = attr[c];\n element.removeAttribute(key.nodeName);\n }\n };\n /**\n * openTagString method\n *\n * @param {Element} element - specifies the element.\n * @returns {string} - returns the string\n * @hidden\n\n */\n DOMNode.prototype.openTagString = function (element) {\n return '<' + element.tagName.toLowerCase() + this.attributes(element) + '>';\n };\n /**\n * closeTagString method\n *\n * @param {Element} element - specifies the element\n * @returns {string} - returns the string value\n * @hidden\n\n */\n DOMNode.prototype.closeTagString = function (element) {\n return '';\n };\n /**\n * createTagString method\n *\n * @param {string} tagName - specifies the tag name\n * @param {Element} relativeElement - specifies the relative element\n * @param {string} innerHTML - specifies the string value\n * @returns {string} - returns the string value.\n * @hidden\n\n */\n DOMNode.prototype.createTagString = function (tagName, relativeElement, innerHTML) {\n return '<' + tagName.toLowerCase() + this.attributes(relativeElement) + '>' + innerHTML + '';\n };\n /**\n * isList method\n *\n * @param {Element} element - specifes the element.\n * @returns {boolean} - returns the boolean value\n * @hidden\n\n */\n DOMNode.prototype.isList = function (element) {\n return !!element && ['UL', 'OL'].indexOf(element.tagName) >= 0;\n };\n /**\n * isElement method\n *\n * @param {Element} element - specifes the element.\n * @returns {boolean} - returns the boolean value\n * @hidden\n\n */\n DOMNode.prototype.isElement = function (element) {\n return element === this.parent;\n };\n /**\n * isEditable method\n *\n * @param {Element} element - specifes the element.\n * @returns {boolean} - returns the boolean value\n * @hidden\n\n */\n DOMNode.prototype.isEditable = function (element) {\n return ((!element.getAttribute || element.getAttribute('contenteditable') === 'true')\n && ['STYLE', 'SCRIPT'].indexOf(element.tagName) < 0);\n };\n /**\n * hasClass method\n *\n * @param {Element} element - specifes the element.\n * @param {string} className - specifies the class name value\n * @returns {boolean} - returns the boolean value\n * @hidden\n\n */\n DOMNode.prototype.hasClass = function (element, className) {\n return element && element.classList && element.classList.contains(className);\n };\n /**\n * replaceWith method\n *\n * @param {Element} element - specifes the element.\n * @param {string} value - specifies the string value\n * @returns {void}\n * @hidden\n\n */\n DOMNode.prototype.replaceWith = function (element, value) {\n var parentNode = element.parentNode;\n parentNode.insertBefore(this.parseHTMLFragment(value), element);\n detach(element);\n };\n /**\n * parseHTMLFragment method\n *\n * @param {string} value - specifies the string value\n * @returns {Element} - returns the element\n * @hidden\n\n */\n DOMNode.prototype.parseHTMLFragment = function (value) {\n /* eslint-disable */\n var temp = createElement('template');\n temp.innerHTML = value;\n if (temp.content instanceof DocumentFragment) {\n return temp.content;\n }\n else {\n return document.createRange().createContextualFragment(value);\n }\n /* eslint-enable */\n };\n /**\n * wrap method\n *\n * @param {Element} element - specifies the element\n * @param {Element} wrapper - specifies the element.\n * @returns {Element} - returns the element\n * @hidden\n\n */\n DOMNode.prototype.wrap = function (element, wrapper) {\n element.parentNode.insertBefore(wrapper, element);\n wrapper = element.previousSibling;\n wrapper.appendChild(element);\n return wrapper;\n };\n /**\n * insertAfter method\n *\n * @param {Element} newNode - specifies the new node element\n * @param {Element} referenceNode - specifies the referenece node\n * @returns {void}\n * @hidden\n\n */\n DOMNode.prototype.insertAfter = function (newNode, referenceNode) {\n referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);\n };\n /**\n * wrapInner method\n *\n * @param {Element} parent - specifies the parent element.\n * @param {Element} wrapper - specifies the wrapper element.\n * @returns {Element} - returns the element\n * @hidden\n\n */\n DOMNode.prototype.wrapInner = function (parent, wrapper) {\n parent.appendChild(wrapper);\n wrapper = parent.querySelector('.e-rte-wrap-inner');\n wrapper.classList.remove('e-rte-wrap-inner');\n if (wrapper.classList.length === 0) {\n wrapper.removeAttribute('class');\n }\n while (parent.firstChild !== wrapper) {\n wrapper.appendChild(parent.firstChild);\n }\n return wrapper;\n };\n /**\n * unWrap method\n *\n * @param {Element} element - specifies the element.\n * @returns {Element} - returns the element.\n * @hidden\n\n */\n DOMNode.prototype.unWrap = function (element) {\n var parent = element.parentNode;\n var unWrapNode = [];\n while (element.firstChild) {\n unWrapNode.push(element.firstChild);\n parent.insertBefore(element.firstChild, element);\n }\n unWrapNode = unWrapNode.length > 0 ? unWrapNode : [element.parentNode];\n parent.removeChild(element);\n return unWrapNode;\n };\n /**\n * getSelectedNode method\n *\n * @param {Element} element - specifies the element\n * @param {number} index - specifies the index value.\n * @returns {Element} - returns the element\n * @hidden\n\n */\n DOMNode.prototype.getSelectedNode = function (element, index) {\n if (element.nodeType === Node.ELEMENT_NODE && element.childNodes.length > 0 &&\n element.childNodes[index - 1] && element.childNodes[index - 1].nodeType === Node.ELEMENT_NODE &&\n (element.childNodes[index - 1].classList.contains(markerClassName.startSelection) ||\n element.childNodes[index - 1].classList.contains(markerClassName.endSelection))) {\n element = element.childNodes[index - 1];\n }\n else if (element.nodeType === Node.ELEMENT_NODE && element.childNodes.length > 0 && element.childNodes[index]) {\n element = element.childNodes[index];\n }\n if (element.nodeType === Node.TEXT_NODE) {\n element = element.parentNode;\n }\n return element;\n };\n /**\n * nodeFinds method\n *\n * @param {Element} element - specifies the element.\n * @param {Element[]} elements - specifies the array of elements\n * @returns {Element[]} - returnts the array elements\n * @hidden\n\n */\n DOMNode.prototype.nodeFinds = function (element, elements) {\n var existNodes = [];\n for (var i = 0; i < elements.length; i++) {\n if (element.contains(elements[i]) && element !== elements[i]) {\n existNodes.push(elements[i]);\n }\n }\n return existNodes;\n };\n /**\n * isEditorArea method\n *\n * @returns {boolean} - returns the boolean value\n * @hidden\n\n */\n DOMNode.prototype.isEditorArea = function () {\n var range = this.getRangePoint(0);\n var element;\n for (element = range.commonAncestorContainer; element && !this.isElement(element); null) {\n element = element.parentNode;\n }\n return !!this.isElement(element);\n };\n /**\n * getRangePoint method\n *\n * @param {number} point - specifies the number value.\n * @returns {Range} - returns the range.\n * @hidden\n\n */\n DOMNode.prototype.getRangePoint = function (point) {\n var selection = this.getSelection();\n var ranges = [];\n if (selection && selection.getRangeAt && selection.rangeCount) {\n ranges = [];\n for (var f = 0; f < selection.rangeCount; f++) {\n ranges.push(selection.getRangeAt(f));\n }\n }\n else {\n ranges = [this.currentDocument.createRange()];\n }\n return 'undefined' !== typeof point ? ranges[point] : ranges;\n };\n DOMNode.prototype.getSelection = function () {\n return this.nodeSelection.get(this.currentDocument);\n };\n /**\n * getPreviousNode method\n *\n * @param {Element} element - specifies the element\n * @returns {Element} - returns the element\n * @hidden\n\n */\n DOMNode.prototype.getPreviousNode = function (element) {\n element = element.previousElementSibling;\n for (; element && element.textContent === '\\n'; null) {\n element = element.previousElementSibling;\n }\n return element;\n };\n /**\n * encode method\n *\n * @param {string} value - specifies the string value\n * @returns {string} - specifies the string value\n * @hidden\n\n */\n DOMNode.prototype.encode = function (value) {\n var divNode = document.createElement('div');\n divNode.innerText = value;\n // eslint-disable-next-line\n return divNode.innerHTML.replace(//gi, '\\n');\n };\n /**\n * saveMarker method\n *\n * @param {NodeSelection} save - specifies the node selection,\n * @param {string} action - specifies the action value.\n * @returns {NodeSelection} - returns the value\n * @hidden\n\n */\n DOMNode.prototype.saveMarker = function (save, action) {\n var start = this.parent.querySelector('.' + markerClassName.startSelection);\n var end = this.parent.querySelector('.' + markerClassName.endSelection);\n var startTextNode;\n var endTextNode;\n if (start.textContent === '' && isNullOrUndefined(end) && action !== 'tab') {\n if (start.childNodes.length === 1 && start.childNodes[0].nodeName === 'BR') {\n start.innerHTML = '
';\n }\n else {\n start.innerHTML = '';\n }\n }\n if (this.hasClass(start, markerClassName.startSelection) && start.classList.length > 1) {\n var replace = this.createTagString(CONSTANT.DEFAULT_TAG, start, this.encode(start.textContent));\n this.replaceWith(start, replace);\n start = this.parent.querySelector('.' + markerClassName.startSelection);\n start.classList.remove(markerClassName.startSelection);\n startTextNode = start.childNodes[0];\n }\n else {\n startTextNode = this.unWrap(start)[0];\n }\n if (this.hasClass(end, markerClassName.endSelection) && end.classList.length > 1) {\n var replace = this.createTagString(CONSTANT.DEFAULT_TAG, end, this.encode(end.textContent));\n this.replaceWith(end, replace);\n end = this.parent.querySelector('.' + markerClassName.endSelection);\n end.classList.remove(markerClassName.endSelection);\n endTextNode = end.childNodes[0];\n }\n else {\n endTextNode = end ? this.unWrap(end)[0] : startTextNode;\n }\n save.startContainer = save.getNodeArray(startTextNode, true);\n save.endContainer = save.getNodeArray(endTextNode, false);\n return save;\n };\n DOMNode.prototype.marker = function (className, textContent) {\n return '' + textContent + '';\n };\n /**\n * setMarker method\n *\n * @param {NodeSelection} save - specifies the node selection.\n * @returns {void}\n * @hidden\n\n */\n DOMNode.prototype.setMarker = function (save) {\n var range = save.range;\n var startChildNodes = range.startContainer.childNodes;\n var isTableStart = startChildNodes.length > 1 && startChildNodes[0].nodeName === 'TABLE';\n var start = ((isTableStart ? getLastTextNode(startChildNodes[range.startOffset + 1]) :\n startChildNodes[(range.startOffset > 0) ? (range.startOffset - 1) : range.startOffset]) || range.startContainer);\n var end = (range.endContainer.childNodes[(range.endOffset > 0) ? (range.endOffset - 1) : range.endOffset]\n || range.endContainer);\n if ((start.nodeType === Node.ELEMENT_NODE && end.nodeType === Node.ELEMENT_NODE) && (start.contains(end) || end.contains(start))) {\n var existNode = start.contains(end) ? start : end;\n var isElement = existNode.nodeType !== Node.TEXT_NODE;\n if (isElement) {\n var nodes = [];\n var textNodes = [];\n for (var node = existNode; existNode.contains(node); null) {\n if (nodes.indexOf(node) < 0 && node.childNodes && node.childNodes.length) {\n nodes.push(node);\n node = node.childNodes[0];\n }\n else if (node.nextSibling) {\n node = node.nextSibling;\n }\n else if (node.parentNode) {\n node = node.parentNode;\n nodes.push(node);\n }\n if (textNodes.indexOf(node) < 0 && (node.nodeType === Node.TEXT_NODE ||\n (CONSTANT.IGNORE_BLOCK_TAGS.indexOf(node.parentNode.tagName.toLocaleLowerCase()) >= 0\n && (node.tagName === 'BR' || node.tagName === 'IMG')))) {\n textNodes.push(node);\n }\n }\n if (textNodes.length) {\n start = start.contains(end) ? textNodes[0] : start;\n end = textNodes[textNodes.length - 1];\n }\n }\n }\n if (start !== end) {\n if (start.nodeType !== Node.TEXT_NODE && ((start.tagName === 'BR' &&\n CONSTANT.IGNORE_BLOCK_TAGS.indexOf(start.parentNode.tagName.toLocaleLowerCase()) >= 0) ||\n start.tagName === 'IMG')) {\n this.replaceWith(start, this.marker(markerClassName.startSelection, this.encode(start.textContent)));\n var markerStart = range.startContainer.querySelector('.' + markerClassName.startSelection);\n markerStart.appendChild(start);\n }\n else {\n this.replaceWith(start, this.marker(markerClassName.startSelection, this.encode(start.textContent)));\n }\n if (end.nodeType !== Node.TEXT_NODE && end.tagName === 'BR' &&\n CONSTANT.IGNORE_BLOCK_TAGS.indexOf(end.parentNode.tagName.toLocaleLowerCase()) >= 0) {\n this.replaceWith(end, this.marker(markerClassName.endSelection, this.encode(end.textContent)));\n var markerEnd = range.endContainer.querySelector('.' + markerClassName.endSelection);\n markerEnd.appendChild(end);\n }\n else {\n this.ensureSelfClosingTag(end, markerClassName.endSelection, range);\n }\n }\n else {\n this.ensureSelfClosingTag(start, markerClassName.startSelection, range);\n }\n };\n /**\n * ensureSelfClosingTag method\n *\n * @param {Element} start - specifies the element.\n * @param {string} className - specifes the class name string value\n * @param {Range} range - specifies the range value\n * @returns {void}\n * @hidden\n\n */\n DOMNode.prototype.ensureSelfClosingTag = function (start, className, range) {\n var isTable = false;\n if (start.nodeType === 3) {\n this.replaceWith(start, this.marker(className, this.encode(start.textContent)));\n }\n else if (start.tagName === 'BR') {\n this.replaceWith(start, this.marker(className, this.encode(start.textContent)));\n var markerStart = range.startContainer.querySelector('.' + className);\n markerStart.appendChild(start);\n }\n else {\n if (start.tagName === 'IMG') {\n var parNode = document.createElement('p');\n start.parentElement.insertBefore(parNode, start);\n parNode.appendChild(start);\n start = parNode.children[0];\n }\n if (start.tagName === 'TABLE') {\n isTable = true;\n if (start.textContent === '') {\n var tdNode = start.querySelectorAll('td');\n start = tdNode[tdNode.length - 1];\n start = !isNullOrUndefined(start.childNodes[0]) ? start.childNodes[0] : start;\n }\n else {\n var lastNode = start.lastChild;\n while (lastNode.nodeType !== 3 && lastNode.nodeName !== '#text' &&\n lastNode.nodeName !== 'BR') {\n lastNode = lastNode.lastChild;\n }\n start = lastNode;\n }\n }\n for (var i = 0; i < selfClosingTags.length; i++) {\n start = (start.tagName === selfClosingTags[i] && !isTable) ? start.parentNode : start;\n }\n if (start.nodeType === 3 && start.nodeName === '#text') {\n this.replaceWith(start, this.marker(className, this.encode(start.textContent)));\n }\n else if (start.nodeName === 'BR') {\n this.replaceWith(start, this.marker(markerClassName.endSelection, this.encode(start.textContent)));\n var markerEnd = range.endContainer.querySelector('.' + markerClassName.endSelection);\n markerEnd.appendChild(start);\n }\n else {\n var marker = this.marker(className, '');\n append([this.parseHTMLFragment(marker)], start);\n }\n }\n };\n /**\n * createTempNode method\n *\n * @param {Element} element - specifies the element.\n * @returns {Element} - returns the element\n * @hidden\n\n */\n DOMNode.prototype.createTempNode = function (element) {\n var textContent = element.textContent;\n if (element.tagName === 'BR') {\n var wrapper = '<' + CONSTANT.DEFAULT_TAG + '>';\n var node = element.parentNode;\n if (CONSTANT.IGNORE_BLOCK_TAGS.indexOf(node.tagName.toLocaleLowerCase()) >= 0) {\n element = this.wrap(element, this.parseHTMLFragment(wrapper));\n }\n }\n else if (((element.nodeType !== Node.TEXT_NODE &&\n (element.classList.contains(markerClassName.startSelection) ||\n element.classList.contains(markerClassName.endSelection))) ||\n textContent.replace(/\\n/g, '').replace(/(^ *)|( *$)/g, '').length > 0 ||\n textContent.length && textContent.indexOf('\\n') < 0)) {\n var wrapper = '<' + CONSTANT.DEFAULT_TAG + '>';\n var target = element;\n element = this.wrap(element, this.parseHTMLFragment(wrapper));\n var ignoreBr = target.nodeType === Node.ELEMENT_NODE && target.firstChild && target.firstChild.nodeName === 'BR'\n && (target.classList.contains(markerClassName.startSelection) ||\n target.classList.contains(markerClassName.endSelection));\n if (!ignoreBr && element.nextElementSibling && element.nextElementSibling.tagName === 'BR') {\n element.appendChild(element.nextElementSibling);\n }\n }\n return element;\n };\n /**\n * getImageTagInSelection method\n *\n * @returns {void}\n * @hidden\n\n */\n DOMNode.prototype.getImageTagInSelection = function () {\n var selection = this.getSelection();\n if (this.isEditorArea() && selection.rangeCount) {\n return selection.focusNode.querySelectorAll('img');\n }\n return null;\n };\n /**\n * blockNodes method\n *\n * @returns {Node[]} - returns the node array values\n * @hidden\n\n */\n DOMNode.prototype.blockNodes = function () {\n var collectionNodes = [];\n var selection = this.getSelection();\n if (this.isEditorArea() && selection.rangeCount) {\n var ranges = this.getRangePoint();\n for (var j = 0; j < ranges.length; j++) {\n var parentNode = void 0;\n var range = ranges[j];\n var startNode = this.getSelectedNode(range.startContainer, range.startOffset);\n var endNode = this.getSelectedNode(range.endContainer, range.endOffset);\n if (this.isBlockNode(startNode) && collectionNodes.indexOf(startNode) < 0) {\n collectionNodes.push(startNode);\n }\n parentNode = this.blockParentNode(startNode);\n if (parentNode && collectionNodes.indexOf(parentNode) < 0) {\n if (CONSTANT.IGNORE_BLOCK_TAGS.indexOf(parentNode.tagName.toLocaleLowerCase()) >= 0 && (startNode.tagName === 'BR' ||\n startNode.nodeType === Node.TEXT_NODE ||\n startNode.classList.contains(markerClassName.startSelection) ||\n startNode.classList.contains(markerClassName.endSelection))) {\n var tempNode = startNode.previousSibling &&\n startNode.previousSibling.nodeType === Node.TEXT_NODE ?\n startNode.previousSibling : startNode;\n if (!startNode.nextSibling && !startNode.previousSibling && startNode.tagName === 'BR') {\n collectionNodes.push(tempNode);\n }\n else {\n collectionNodes.push(this.createTempNode(tempNode));\n }\n }\n else {\n collectionNodes.push(parentNode);\n }\n }\n var nodes = [];\n for (var node = startNode; node !== endNode && node !== this.parent; null) {\n if (nodes.indexOf(node) < 0 && node.childNodes && node.childNodes.length) {\n nodes.push(node);\n node = node.childNodes[0];\n }\n else if (node && node.nodeType !== 8 && (node.tagName === 'BR' || (node.nodeType === Node.TEXT_NODE &&\n node.textContent.trim() !== '') || (node.nodeType !== Node.TEXT_NODE &&\n (node.classList.contains(markerClassName.startSelection) ||\n node.classList.contains(markerClassName.endSelection)))) &&\n CONSTANT.IGNORE_BLOCK_TAGS.indexOf(node.parentNode.tagName.toLocaleLowerCase()) >= 0) {\n node = this.createTempNode(node);\n }\n else if (node.nextSibling && node.nextSibling.nodeType !== 8 &&\n (node.nextSibling.tagName === 'BR' ||\n node.nextSibling.nodeType === Node.TEXT_NODE ||\n node.nextSibling.classList.contains(markerClassName.startSelection) ||\n node.nextSibling.classList.contains(markerClassName.endSelection)) &&\n CONSTANT.IGNORE_BLOCK_TAGS.indexOf(node.nextSibling.parentNode.tagName.toLocaleLowerCase()) >= 0) {\n node = this.createTempNode(node.nextSibling);\n }\n else if (node.nextSibling) {\n node = node.nextSibling;\n }\n else if (node.parentNode) {\n node = node.parentNode;\n nodes.push(node);\n }\n if (collectionNodes.indexOf(node) < 0 && node.nodeType === Node.ELEMENT_NODE &&\n CONSTANT.IGNORE_BLOCK_TAGS.indexOf(node.parentNode.tagName.toLocaleLowerCase()) >= 0 &&\n (node.classList.contains(markerClassName.startSelection) ||\n node.classList.contains(markerClassName.endSelection))) {\n collectionNodes.push(this.createTempNode(node));\n }\n if (this.isBlockNode(node) && this.ignoreTableTag(node) && nodes.indexOf(node) < 0 &&\n collectionNodes.indexOf(node) < 0 && (node !== endNode || range.endOffset > 0)) {\n collectionNodes.push(node);\n }\n if (node.nodeName === 'IMG' && node.parentElement.contentEditable === 'true') {\n collectionNodes.push(node);\n }\n }\n parentNode = this.blockParentNode(endNode);\n if (parentNode && this.ignoreTableTag(parentNode) && collectionNodes.indexOf(parentNode) < 0 &&\n (!isNullOrUndefined(parentNode.previousElementSibling) && parentNode.previousElementSibling.tagName !== 'IMG')) {\n collectionNodes.push(parentNode);\n }\n }\n }\n for (var i = collectionNodes.length - 1; i > 0; i--) {\n var nodes = this.nodeFinds(collectionNodes[i], collectionNodes);\n if (nodes.length) {\n var listNodes = collectionNodes[i].querySelectorAll('ul, ol');\n if (collectionNodes[i].tagName === 'LI' && listNodes.length > 0) {\n continue;\n }\n else {\n collectionNodes.splice(i, 1);\n }\n }\n }\n return collectionNodes;\n };\n DOMNode.prototype.ignoreTableTag = function (element) {\n return !(CONSTANT.TABLE_BLOCK_TAGS.indexOf(element.tagName.toLocaleLowerCase()) >= 0);\n };\n return DOMNode;\n}());\nexport { DOMNode };\n","import * as CONSTANT from './../base/constant';\nimport { createElement, detach, prepend, append, attributes } from '@syncfusion/ej2-base';\nimport { markerClassName } from './dom-node';\nimport * as EVENTS from './../../common/constant';\nimport { setStyleAttribute } from '@syncfusion/ej2-base';\nimport { isIDevice, setEditFrameFocus } from '../../common/util';\nimport { isNullOrUndefined, isNullOrUndefined as isNOU, closest } from '@syncfusion/ej2-base';\n/**\n * Lists internal component\n *\n * @hidden\n\n */\nvar Lists = /** @class */ (function () {\n /**\n * Constructor for creating the Lists plugin\n *\n * @param {EditorManager} parent - specifies the parent element\n * @hidden\n\n */\n function Lists(parent) {\n this.parent = parent;\n this.domNode = this.parent.domNode;\n this.addEventListener();\n }\n Lists.prototype.addEventListener = function () {\n this.parent.observer.on(EVENTS.LIST_TYPE, this.applyListsHandler, this);\n this.parent.observer.on(EVENTS.KEY_DOWN_HANDLER, this.keyDownHandler, this);\n this.parent.observer.on(EVENTS.SPACE_ACTION, this.spaceKeyAction, this);\n };\n Lists.prototype.testList = function (elem) {\n var olListRegex = [/^[\\d]+[.]+$/,\n /^(?=[MDCLXVI])M*(C[MD]|D?C{0,3})(X[CL]|L?X{0,3})(I[XV]|V?I{0,3})[.]$/gi,\n /^[a-zA-Z][.]+$/];\n var elementStart = !isNullOrUndefined(elem) ? elem.innerText.trim().split('.')[0] + '.' : null;\n if (!isNullOrUndefined(elementStart)) {\n for (var i = 0; i < olListRegex.length; i++) {\n if (olListRegex[i].test(elementStart)) {\n return true;\n }\n }\n }\n return false;\n };\n Lists.prototype.testCurrentList = function (range) {\n var olListStartRegex = [/^[1]+[.]+$/, /^[i]+[.]+$/, /^[a]+[.]+$/];\n if (!isNullOrUndefined(range.startContainer.textContent.slice(0, range.startOffset))) {\n var currentContent = range.startContainer.textContent.replace(/\\u200B/g, '').slice(0, range.startOffset).trim();\n for (var i = 0; i < olListStartRegex.length; i++) {\n if (olListStartRegex[i].test(currentContent) && currentContent.length === 2) {\n return true;\n }\n }\n }\n return false;\n };\n Lists.prototype.spaceList = function (e) {\n var range = this.parent.nodeSelection.getRange(this.parent.currentDocument);\n this.saveSelection = this.parent.nodeSelection.save(range, this.parent.currentDocument);\n var startNode = this.parent.domNode.getSelectedNode(range.startContainer, range.startOffset);\n // eslint-disable-next-line\n var endNode = this.parent.domNode.getSelectedNode(range.endContainer, range.endOffset);\n var preElement = startNode.previousElementSibling;\n var nextElement = startNode.nextElementSibling;\n var preElemULStart = !isNullOrUndefined(preElement) ?\n preElement.innerText.trim().substring(0, 1) : null;\n var nextElemULStart = !isNullOrUndefined(nextElement) ?\n nextElement.innerText.trim().substring(0, 1) : null;\n var startElementOLTest = this.testCurrentList(range);\n var preElementOLTest = this.testList(preElement);\n var nextElementOLTest = this.testList(nextElement);\n if (!preElementOLTest && !nextElementOLTest && preElemULStart !== '*' && nextElemULStart !== '*') {\n if (startElementOLTest) {\n range.startContainer.textContent = range.startContainer.textContent.slice(range.startOffset, range.startContainer.textContent.length);\n this.applyListsHandler({ subCommand: 'OL', callBack: e.callBack });\n e.event.preventDefault();\n }\n else if (range.startContainer.textContent.replace(/\\u200B/g, '').slice(0, range.startOffset).trim() === '*' ||\n range.startContainer.textContent.replace(/\\u200B/g, '').slice(0, range.startOffset).trim() === '-') {\n range.startContainer.textContent = range.startContainer.textContent.slice(range.startOffset, range.startContainer.textContent.length);\n this.applyListsHandler({ subCommand: 'UL', callBack: e.callBack });\n e.event.preventDefault();\n }\n }\n };\n Lists.prototype.enterList = function (e) {\n var range = this.parent.nodeSelection.getRange(this.parent.currentDocument);\n var startNode = range.startContainer.nodeName === 'LI' ? range.startContainer :\n range.startContainer.parentElement.closest('LI');\n var endNode = range.endContainer.nodeName === 'LI' ? range.endContainer :\n range.endContainer.parentElement.closest('LI');\n if (!isNOU(startNode) && !isNOU(endNode) && startNode === endNode && startNode.tagName === 'LI' &&\n startNode.textContent.trim() === '' && startNode.querySelectorAll('IMG').length === 0) {\n if (startNode.textContent.charCodeAt(0) === 65279) {\n startNode.textContent = '';\n }\n var startNodeParent = startNode.parentElement;\n if (isNOU(startNodeParent.parentElement.closest('UL')) && isNOU(startNodeParent.parentElement.closest('OL'))) {\n if (!isNOU(startNode.nextElementSibling)) {\n var nearBlockNode = this.parent.domNode.blockParentNode(startNode);\n this.parent.nodeCutter.GetSpliceNode(range, nearBlockNode);\n }\n var insertTag = void 0;\n if (e.enterAction === 'DIV') {\n insertTag = createElement('div');\n insertTag.innerHTML = '
';\n }\n else if (e.enterAction === 'P') {\n insertTag = createElement('p');\n insertTag.innerHTML = '
';\n }\n else {\n insertTag = createElement('br');\n }\n this.parent.domNode.insertAfter(insertTag, startNodeParent);\n e.event.preventDefault();\n this.parent.nodeSelection.setCursorPoint(this.parent.currentDocument, insertTag, 0);\n if (startNodeParent.textContent === '') {\n detach(startNodeParent);\n }\n else {\n detach(startNode);\n }\n }\n }\n };\n // eslint-disable-next-line\n Lists.prototype.backspaceList = function (e) {\n var range = this.parent.nodeSelection.getRange(this.parent.currentDocument);\n var startNode = this.parent.domNode.getSelectedNode(range.startContainer, range.startOffset);\n var endNode = this.parent.domNode.getSelectedNode(range.endContainer, range.endOffset);\n startNode = startNode.nodeName === 'BR' ? startNode.parentElement : startNode;\n endNode = endNode.nodeName === 'BR' ? endNode.parentElement : endNode;\n if (startNode === endNode && !isNullOrUndefined(closest(startNode, 'li')) &&\n ((startNode.textContent.trim() === '' && startNode.textContent.charCodeAt(0) === 65279) ||\n (startNode.textContent.length === 1 && startNode.textContent.charCodeAt(0) === 8203))) {\n startNode.textContent = '';\n }\n if (startNode === endNode && startNode.textContent === '') {\n if (startNode.parentElement.tagName === 'LI' && endNode.parentElement.tagName === 'LI') {\n detach(startNode);\n }\n else if (startNode.closest('ul') || startNode.closest('ol')) {\n var parentList = !isNOU(startNode.closest('ul')) ? startNode.closest('ul') : startNode.closest('ol');\n if (parentList.firstElementChild === startNode && !isNOU(parentList.children[1]) &&\n (parentList.children[1].tagName === 'OL' || parentList.children[1].tagName === 'UL')) {\n if (parentList.tagName === parentList.children[1].tagName) {\n while (parentList.children[1].lastChild) {\n this.parent.domNode.insertAfter(parentList.children[1].lastChild, parentList.children[1]);\n }\n detach(parentList.children[1]);\n }\n else {\n parentList.parentElement.insertBefore(parentList.children[1], parentList);\n }\n }\n }\n }\n else if (!isNOU(startNode.firstChild) && startNode.firstChild.nodeName === 'BR' &&\n (!isNullOrUndefined(startNode.childNodes[1]) && (startNode.childNodes[1].nodeName === 'UL' ||\n startNode.childNodes[1].nodeName === 'OL'))) {\n var parentList = !isNOU(startNode.closest('ul')) ? startNode.closest('ul') : startNode.closest('ol');\n if (parentList.tagName === startNode.childNodes[1].nodeName) {\n while (startNode.childNodes[1].lastChild) {\n this.parent.domNode.insertAfter(startNode.children[1].lastChild, startNode);\n }\n detach(startNode.childNodes[1]);\n }\n else {\n parentList.parentElement.insertBefore(startNode.children[1], parentList);\n }\n }\n };\n Lists.prototype.keyDownHandler = function (e) {\n if (e.event.which === 13) {\n this.enterList(e);\n }\n if (e.event.which === 32) {\n this.spaceList(e);\n }\n if (e.event.which === 8) {\n this.backspaceList(e);\n }\n if (e.event.which === 46 && e.event.action === 'delete') {\n var range = this.parent.nodeSelection.getRange(this.parent.currentDocument);\n var commonAncestor = range.commonAncestorContainer;\n var startEle = range.startContainer;\n var endEle = range.endContainer;\n var startNode = startEle.nodeType === 3 ? startEle.parentElement : startEle;\n var endNode = endEle.nodeType === 3 ? endEle.parentElement : endEle;\n if ((commonAncestor.nodeName === 'UL' || commonAncestor.nodeName === 'OL') && startNode !== endNode\n && (!isNullOrUndefined(closest(startNode, 'ul')) || !isNullOrUndefined(closest(startNode, 'ol')))\n && (!isNullOrUndefined(closest(endNode, 'ul')) || !isNullOrUndefined(closest(endNode, 'ol')))\n && (commonAncestor.lastElementChild === closest(endNode, 'li')) && !range.collapsed) {\n detach(commonAncestor);\n }\n }\n if (e.event.which === 9) {\n var range = this.parent.nodeSelection.getRange(this.parent.currentDocument);\n if (!(e.event.action && e.event.action === 'indent')) {\n this.saveSelection = this.parent.nodeSelection.save(range, this.parent.currentDocument);\n }\n var blockNodes = void 0;\n var startOffset = range.startOffset;\n var endOffset = range.endOffset;\n var startNode = this.parent.domNode.getSelectedNode(range.startContainer, range.startOffset);\n var endNode = this.parent.domNode.getSelectedNode(range.endContainer, range.endOffset);\n if ((startNode === endNode && (startNode.nodeName === 'BR' || startNode.nodeName === '#text') &&\n CONSTANT.IGNORE_BLOCK_TAGS.indexOf(startNode.parentNode.tagName.toLocaleLowerCase()) >= 0)) {\n return;\n }\n else {\n if (!(e.event.action && e.event.action === 'indent')) {\n this.domNode.setMarker(this.saveSelection);\n }\n blockNodes = this.domNode.blockNodes();\n }\n var nodes = [];\n var isNested = true;\n for (var i = 0; i < blockNodes.length; i++) {\n if (blockNodes[i].parentNode.tagName === 'LI') {\n nodes.push(blockNodes[i].parentNode);\n }\n else if (blockNodes[i].tagName === 'LI' && blockNodes[i].childNodes[0].tagName !== 'P' &&\n (blockNodes[i].childNodes[0].tagName !== 'OL' &&\n blockNodes[i].childNodes[0].tagName !== 'UL')) {\n nodes.push(blockNodes[i]);\n }\n }\n if (nodes.length > 1 || nodes.length && ((startOffset === 0 && endOffset === 0) || e.ignoreDefault)) {\n e.event.preventDefault();\n e.event.stopPropagation();\n this.currentAction = this.getAction(nodes[0]);\n if (e.event.shiftKey) {\n this.revertList(nodes);\n this.revertClean();\n }\n else {\n isNested = this.nestedList(nodes);\n }\n if (isNested) {\n this.cleanNode();\n this.parent.editableElement.focus();\n }\n if (!(e.event.action && e.event.action === 'indent')) {\n this.saveSelection = this.domNode.saveMarker(this.saveSelection);\n this.saveSelection.restore();\n if (e.callBack) {\n e.callBack({\n requestType: this.currentAction,\n editorMode: 'HTML',\n range: this.parent.nodeSelection.getRange(this.parent.currentDocument),\n elements: this.parent.domNode.blockNodes(),\n event: e.event\n });\n }\n }\n }\n else {\n if (!(e.event.action && e.event.action === 'indent')) {\n if (e.event && e.event.shiftKey && e.event.key === 'Tab') {\n e.event.action = 'tab';\n }\n this.saveSelection = this.domNode.saveMarker(this.saveSelection, e.event.action);\n this.saveSelection.restore();\n }\n }\n }\n else {\n switch (e.event.action) {\n case 'ordered-list':\n this.applyListsHandler({ subCommand: 'OL', callBack: e.callBack });\n e.event.preventDefault();\n break;\n case 'unordered-list':\n this.applyListsHandler({ subCommand: 'UL', callBack: e.callBack });\n e.event.preventDefault();\n break;\n }\n }\n };\n Lists.prototype.spaceKeyAction = function (e) {\n if (e.event.which === 32) {\n this.spaceList(e);\n }\n };\n Lists.prototype.getAction = function (element) {\n var parentNode = element.parentNode;\n return (parentNode.nodeName === 'OL' ? 'OL' : 'UL');\n };\n Lists.prototype.revertClean = function () {\n var collectionNodes = this.parent.editableElement.querySelectorAll('ul, ol');\n for (var i = 0; i < collectionNodes.length; i++) {\n var listNodes = collectionNodes[i].querySelectorAll('ul, ol');\n if (listNodes.length > 0) {\n for (var j = 0; j < listNodes.length; j++) {\n var prevSibling = listNodes[j].previousSibling;\n if (prevSibling && prevSibling.tagName === 'LI') {\n prevSibling.appendChild(listNodes[j]);\n }\n }\n }\n }\n };\n Lists.prototype.noPreviousElement = function (elements) {\n var firstNode;\n var firstNodeOL;\n var siblingListOL = elements.querySelectorAll('ol, ul');\n var siblingListLI = elements\n .querySelectorAll('li');\n var siblingListLIFirst = this.domNode.contents(siblingListLI[0])[0];\n if (siblingListLI.length > 0 && (siblingListLIFirst.nodeName === 'OL' || siblingListLIFirst.nodeName === 'UL')) {\n firstNode = siblingListLI[0];\n }\n else {\n firstNodeOL = siblingListOL[0];\n }\n if (firstNode) {\n for (var h = this.domNode.contents(elements)[0]; h && !this.domNode.isList(h); null) {\n var nextSibling = h.nextSibling;\n prepend([h], firstNode);\n setStyleAttribute(elements, { 'list-style-type': 'none' });\n setStyleAttribute(firstNode, { 'list-style-type': '' });\n h = nextSibling;\n }\n }\n else if (firstNodeOL) {\n var nestedElement = createElement('li');\n prepend([nestedElement], firstNodeOL);\n for (var h = this.domNode.contents(elements)[0]; h && !this.domNode.isList(h); null) {\n var nextSibling = h.nextSibling;\n nestedElement.appendChild(h);\n h = nextSibling;\n }\n prepend([firstNodeOL], elements.parentNode);\n detach(elements);\n var nestedElementLI = createElement('li', { styles: 'list-style-type: none;' });\n prepend([nestedElementLI], firstNodeOL.parentNode);\n append([firstNodeOL], nestedElementLI);\n }\n else {\n var nestedElementLI = createElement('li', { styles: 'list-style-type: none;' });\n prepend([nestedElementLI], elements.parentNode);\n var nestedElement = createElement(elements.parentNode.tagName);\n prepend([nestedElement], nestedElementLI);\n append([elements], nestedElement);\n }\n };\n Lists.prototype.nestedList = function (elements) {\n var isNested = false;\n for (var i = 0; i < elements.length; i++) {\n var prevSibling = this.domNode.getPreviousNode(elements[i]);\n if (prevSibling) {\n isNested = true;\n var firstNode = void 0;\n var firstNodeLI = void 0;\n var siblingListOL = elements[i].querySelectorAll('ol, ul');\n var siblingListLI = elements[i]\n .querySelectorAll('li');\n var siblingListLIFirst = this.domNode.contents(siblingListLI[0])[0];\n if (siblingListLI.length > 0 && (siblingListLIFirst.nodeName === 'OL' || siblingListLIFirst.nodeName === 'UL')) {\n firstNodeLI = siblingListLI[0];\n }\n else {\n firstNode = siblingListOL[0];\n }\n if (firstNode) {\n var nestedElement = createElement('li');\n prepend([nestedElement], firstNode);\n for (var h = this.domNode.contents(elements[i])[0]; h && !this.domNode.isList(h); null) {\n var nextSibling = h.nextSibling;\n nestedElement.appendChild(h);\n h = nextSibling;\n }\n append([firstNode], prevSibling);\n detach(elements[i]);\n }\n else if (firstNodeLI) {\n if (prevSibling.tagName === 'LI') {\n for (var h = this.domNode.contents(elements[i])[0]; h && !this.domNode.isList(h); null) {\n var nextSibling = h.nextSibling;\n prepend([h], firstNodeLI);\n setStyleAttribute(elements[i], { 'list-style-type': 'none' });\n setStyleAttribute(firstNodeLI, { 'list-style-type': '' });\n h = nextSibling;\n }\n append([firstNodeLI.parentNode], prevSibling);\n detach(elements[i]);\n }\n }\n else {\n if (prevSibling.tagName === 'LI') {\n var nestedElement = createElement(elements[i].parentNode.tagName);\n append([nestedElement], prevSibling);\n append([elements[i]], nestedElement);\n }\n }\n }\n else {\n var element = elements[i];\n isNested = true;\n this.noPreviousElement(element);\n }\n }\n return isNested;\n };\n Lists.prototype.applyListsHandler = function (e) {\n var range = this.parent.nodeSelection.getRange(this.parent.currentDocument);\n if (range.startContainer === range.endContainer && range.startContainer === this.parent.editableElement &&\n range.startOffset === range.endOffset && range.startOffset === 0 &&\n this.parent.editableElement.textContent.length === 0 && (this.parent.editableElement.childNodes[0].nodeName != 'TABLE' &&\n this.parent.editableElement.childNodes[0].nodeName != 'IMG')) {\n var focusNode = range.startContainer.childNodes[0];\n this.parent.nodeSelection.setSelectionText(this.parent.currentDocument, focusNode, focusNode, 0, 0);\n range = this.parent.nodeSelection.getRange(this.parent.currentDocument);\n }\n this.saveSelection = this.parent.nodeSelection.save(range, this.parent.currentDocument);\n this.currentAction = e.subCommand;\n this.currentAction = e.subCommand = this.currentAction === 'NumberFormatList' ? 'OL' : this.currentAction === 'BulletFormatList' ? 'UL' : this.currentAction;\n this.domNode.setMarker(this.saveSelection);\n var listsNodes = this.domNode.blockNodes();\n if (e.enterAction === 'BR') {\n this.setSelectionBRConfig();\n var allSelectedNode = this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument);\n var selectedNodes = this.parent.nodeSelection.getSelectionNodes(allSelectedNode);\n var currentFormatNodes = [];\n if (selectedNodes.length === 0) {\n selectedNodes.push(listsNodes[0]);\n }\n for (var i = 0; i < selectedNodes.length; i++) {\n var currentNode = selectedNodes[i];\n var previousCurrentNode = void 0;\n while (!this.parent.domNode.isBlockNode(currentNode) && currentNode !== this.parent.editableElement) {\n previousCurrentNode = currentNode;\n currentNode = currentNode.parentElement;\n }\n if (this.parent.domNode.isBlockNode(currentNode) && currentNode === this.parent.editableElement) {\n currentFormatNodes.push(previousCurrentNode);\n }\n }\n for (var i = 0; i < currentFormatNodes.length; i++) {\n if (!this.parent.domNode.isBlockNode(currentFormatNodes[i])) {\n var currentNode = currentFormatNodes[i];\n var previousNode = currentNode;\n while (currentNode === this.parent.editableElement) {\n previousNode = currentNode;\n currentNode = currentNode.parentElement;\n }\n var tempElem = void 0;\n if (this.parent.domNode.isBlockNode(previousNode.parentElement) &&\n previousNode.parentElement === this.parent.editableElement) {\n tempElem = createElement('p');\n previousNode.parentElement.insertBefore(tempElem, previousNode);\n tempElem.appendChild(previousNode);\n }\n else {\n tempElem = previousNode;\n }\n var preNode = tempElem.previousSibling;\n while (!isNOU(preNode) && preNode.nodeName !== 'BR' &&\n !this.parent.domNode.isBlockNode(preNode)) {\n tempElem.firstChild.parentElement.insertBefore(preNode, tempElem.firstChild);\n preNode = tempElem.previousSibling;\n }\n if (!isNOU(preNode) && preNode.nodeName === 'BR') {\n detach(preNode);\n }\n var postNode = tempElem.nextSibling;\n while (!isNOU(postNode) && postNode.nodeName !== 'BR' &&\n !this.parent.domNode.isBlockNode(postNode)) {\n tempElem.appendChild(postNode);\n postNode = tempElem.nextSibling;\n }\n if (!isNOU(postNode) && postNode.nodeName === 'BR') {\n detach(postNode);\n }\n }\n }\n this.setSelectionBRConfig();\n listsNodes = this.parent.domNode.blockNodes();\n }\n for (var i = 0; i < listsNodes.length; i++) {\n if (listsNodes[i].tagName === 'TABLE' && !range.collapsed) {\n listsNodes.splice(i, 1);\n }\n if (listsNodes.length > 0 && listsNodes[i].tagName !== 'LI'\n && 'LI' === listsNodes[i].parentNode.tagName) {\n listsNodes[i] = listsNodes[i].parentNode;\n }\n }\n this.applyLists(listsNodes, this.currentAction, e.selector, e.item);\n if (e.callBack) {\n e.callBack({\n requestType: this.currentAction,\n event: e.event,\n editorMode: 'HTML',\n range: this.parent.nodeSelection.getRange(this.parent.currentDocument),\n elements: this.parent.domNode.blockNodes()\n });\n }\n };\n Lists.prototype.setSelectionBRConfig = function () {\n var startElem = this.parent.editableElement.querySelector('.' + markerClassName.startSelection);\n var endElem = this.parent.editableElement.querySelector('.' + markerClassName.endSelection);\n if (isNOU(endElem)) {\n this.parent.nodeSelection.setCursorPoint(this.parent.currentDocument, startElem, 0);\n }\n else {\n this.parent.nodeSelection.setSelectionText(this.parent.currentDocument, startElem, endElem, 0, 0);\n }\n };\n Lists.prototype.applyLists = function (elements, type, selector, item) {\n var isReverse = true;\n if (this.isRevert(elements, type) && isNOU(item)) {\n this.revertList(elements);\n this.removeEmptyListElements();\n }\n else {\n this.checkLists(elements, type, item);\n for (var i = 0; i < elements.length; i++) {\n if (!isNOU(item) && !isNOU(item.listStyle)) {\n if (item.listStyle === 'listImage') {\n setStyleAttribute(elements[i], { 'list-style-image': item.listImage });\n }\n else {\n setStyleAttribute(elements[i], { 'list-style-image': 'none' });\n setStyleAttribute(elements[i], { 'list-style-type': item.listStyle.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() });\n }\n }\n if (elements[i].getAttribute('contenteditable') === 'true'\n && elements[i].childNodes.length === 1 && elements[i].childNodes[0].nodeName === 'TABLE') {\n var listEle = document.createElement(type);\n listEle.innerHTML = '
';\n elements[i].appendChild(listEle);\n }\n else if ('LI' !== elements[i].tagName && isNOU(item)) {\n isReverse = false;\n var elemAtt = elements[i].tagName === 'IMG' ? '' : this.domNode.attributes(elements[i]);\n var openTag = '<' + type + '>';\n var closeTag = '';\n var newTag = 'li' + elemAtt;\n var replaceHTML = (elements[i].tagName.toLowerCase() === CONSTANT.DEFAULT_TAG ? elements[i].innerHTML :\n elements[i].outerHTML);\n var innerHTML = this.domNode.createTagString(newTag, null, replaceHTML);\n var collectionString = openTag + innerHTML + closeTag;\n this.domNode.replaceWith(elements[i], collectionString);\n }\n else if (!isNOU(item) && 'LI' !== elements[i].tagName) {\n // eslint-disable-next-line\n isReverse = false;\n var elemAtt = elements[i].tagName === 'IMG' ? '' : this.domNode.attributes(elements[i]);\n var openTag = '<' + type + elemAtt + '>';\n var closeTag = '';\n var newTag = 'li';\n var replaceHTML = (elements[i].tagName.toLowerCase() === CONSTANT.DEFAULT_TAG ? elements[i].innerHTML :\n elements[i].outerHTML);\n var innerHTML = this.domNode.createTagString(newTag, null, replaceHTML);\n var collectionString = openTag + innerHTML + closeTag;\n this.domNode.replaceWith(elements[i], collectionString);\n }\n }\n }\n this.cleanNode();\n this.parent.editableElement.focus();\n if (isIDevice()) {\n setEditFrameFocus(this.parent.editableElement, selector);\n }\n this.saveSelection = this.domNode.saveMarker(this.saveSelection);\n this.saveSelection.restore();\n };\n Lists.prototype.removeEmptyListElements = function () {\n var listElem = this.parent.editableElement.querySelectorAll('ol, ul');\n for (var i = 0; i < listElem.length; i++) {\n if (listElem[i].textContent.trim() === '') {\n detach(listElem[i]);\n }\n }\n };\n Lists.prototype.isRevert = function (nodes, tagName) {\n var isRevert = true;\n for (var i = 0; i < nodes.length; i++) {\n if (nodes[i].tagName !== 'LI') {\n return false;\n }\n if (nodes[i].parentNode.tagName !== tagName) {\n isRevert = false;\n }\n }\n return isRevert;\n };\n Lists.prototype.checkLists = function (nodes, tagName, item) {\n var nodesTemp = [];\n for (var i = 0; i < nodes.length; i++) {\n var node = nodes[i].parentNode;\n if (!isNOU(item) && 'LI' === nodes[i].tagName && !isNOU(item.listStyle)) {\n if (item.listStyle === 'listImage') {\n setStyleAttribute(node, { 'list-style-image': item.listImage });\n }\n else {\n setStyleAttribute(node, { 'list-style-image': 'none' });\n setStyleAttribute(node, { 'list-style-type': item.listStyle.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() });\n }\n }\n if ((nodes[i].tagName === 'LI' && node.tagName !== tagName && nodesTemp.indexOf(node) < 0) ||\n (nodes[i].tagName === 'LI' && node.tagName === tagName && nodesTemp.indexOf(node) < 0 && item !== null)) {\n nodesTemp.push(node);\n }\n }\n for (var j = nodesTemp.length - 1; j >= 0; j--) {\n var h = nodesTemp[j];\n var replace = '<' + tagName.toLowerCase() + ' '\n + this.domNode.attributes(h) + '>' + h.innerHTML + '';\n this.domNode.replaceWith(nodesTemp[j], replace);\n }\n };\n Lists.prototype.cleanNode = function () {\n var liParents = this.parent.editableElement.querySelectorAll('ol + ol, ul + ul');\n for (var c = 0; c < liParents.length; c++) {\n var node = liParents[c];\n if (this.domNode.isList(node.previousElementSibling) &&\n this.domNode.openTagString(node) === this.domNode.openTagString(node.previousElementSibling)) {\n var contentNodes = this.domNode.contents(node);\n for (var f = 0; f < contentNodes.length; f++) {\n node.previousElementSibling.appendChild(contentNodes[f]);\n }\n node.parentNode.removeChild(node);\n }\n }\n };\n Lists.prototype.findUnSelected = function (temp, elements) {\n temp = temp.slice().reverse();\n if (temp.length > 0) {\n var rightIndent = [];\n var indentElements = [];\n var lastElement = elements[elements.length - 1];\n var lastElementChild = [];\n var childElements = [];\n lastElementChild = (lastElement.childNodes);\n for (var z = 0; z < lastElementChild.length; z++) {\n if (lastElementChild[z].tagName === 'OL' || lastElementChild[z].tagName === 'UL') {\n var childLI = lastElementChild[z]\n .querySelectorAll('li');\n if (childLI.length > 0) {\n for (var y = 0; y < childLI.length; y++) {\n childElements.push(childLI[y]);\n }\n }\n }\n }\n for (var i = 0; i < childElements.length; i++) {\n var count = 0;\n for (var j = 0; j < temp.length; j++) {\n if (!childElements[i].contains((temp[j]))) {\n count = count + 1;\n }\n }\n if (count === temp.length) {\n indentElements.push(childElements[i]);\n }\n }\n if (indentElements.length > 0) {\n for (var x = 0; x < indentElements.length; x++) {\n if (this.domNode.contents(indentElements[x])[0].nodeName !== 'OL' &&\n this.domNode.contents(indentElements[x])[0].nodeName !== 'UL') {\n rightIndent.push(indentElements[x]);\n }\n }\n }\n if (rightIndent.length > 0) {\n this.nestedList(rightIndent);\n }\n }\n };\n Lists.prototype.revertList = function (elements) {\n var temp = [];\n for (var i = elements.length - 1; i >= 0; i--) {\n for (var j = i - 1; j >= 0; j--) {\n if (elements[j].contains((elements[i])) || elements[j] === elements[i]) {\n temp.push(elements[i]);\n elements.splice(i, 1);\n break;\n }\n }\n }\n this.findUnSelected(temp, elements);\n var viewNode = [];\n for (var i = 0; i < elements.length; i++) {\n var element = elements[i];\n if (this.domNode.contents(element)[0].nodeType === 3 && this.domNode.contents(element)[0].textContent.trim().length === 0) {\n detach(this.domNode.contents(element)[0]);\n }\n var parentNode = elements[i].parentNode;\n var className = element.getAttribute('class');\n if (temp.length === 0) {\n var siblingList = elements[i].querySelectorAll('ul, ol');\n var firstNode = siblingList[0];\n if (firstNode) {\n var child = firstNode\n .querySelectorAll('li');\n if (child) {\n var nestedElement = createElement(firstNode.tagName);\n append([nestedElement], firstNode.parentNode);\n var nestedElementLI = createElement('li', { styles: 'list-style-type: none;' });\n append([nestedElementLI], nestedElement);\n append([firstNode], nestedElementLI);\n }\n }\n }\n if (element.parentNode.insertBefore(this.closeTag(parentNode.tagName), element),\n 'LI' === parentNode.parentNode.tagName) {\n element.parentNode.insertBefore(this.closeTag('LI'), element);\n }\n else {\n var classAttr = '';\n if (className) {\n // eslint-disable-next-line\n classAttr += ' class=\"' + className + '\"';\n }\n if (CONSTANT.DEFAULT_TAG && 0 === element.querySelectorAll(CONSTANT.BLOCK_TAGS.join(', ')).length) {\n var wrapperclass = isNullOrUndefined(className) ? ' class=\"e-rte-wrap-inner\"' :\n ' class=\"' + className + ' e-rte-wrap-inner\"';\n var wrapper = '<' + CONSTANT.DEFAULT_TAG + wrapperclass +\n this.domNode.attributes(parentNode) + '>';\n this.domNode.wrapInner(element, this.domNode.parseHTMLFragment(wrapper));\n }\n else if (this.domNode.contents(element)[0].nodeType === 3) {\n var replace = this.domNode.createTagString(CONSTANT.DEFAULT_TAG, parentNode, this.parent.domNode.encode(this.domNode.contents(element)[0].textContent));\n this.domNode.replaceWith(this.domNode.contents(element)[0], replace);\n }\n else if (this.domNode.contents(element)[0].classList.contains(markerClassName.startSelection) ||\n this.domNode.contents(element)[0].classList.contains(markerClassName.endSelection)) {\n var replace = this.domNode.createTagString(CONSTANT.DEFAULT_TAG, parentNode, this.domNode.contents(element)[0].outerHTML);\n this.domNode.replaceWith(this.domNode.contents(element)[0], replace);\n }\n else {\n var childNode = element.firstChild;\n className = childNode.getAttribute('class');\n attributes(childNode, this.domNode.rawAttributes(parentNode));\n if (className && childNode.getAttribute('class')) {\n attributes(childNode, { 'class': className + ' ' + childNode.getAttribute('class') });\n }\n }\n append([this.openTag('LI')], element);\n prepend([this.closeTag('LI')], element);\n }\n this.domNode.insertAfter(this.openTag(parentNode.tagName), element);\n if (parentNode.parentNode.tagName === 'LI') {\n parentNode = parentNode.parentNode.parentNode;\n }\n if (viewNode.indexOf(parentNode) < 0) {\n viewNode.push(parentNode);\n }\n }\n for (var i = 0; i < viewNode.length; i++) {\n var node = viewNode[i];\n var nodeInnerHtml = node.innerHTML;\n var closeTag = /<\\/span>/g;\n var openTag = /<\\/span>/g;\n nodeInnerHtml = nodeInnerHtml.replace(closeTag, '');\n nodeInnerHtml = nodeInnerHtml.replace(openTag, '<$1 ' + this.domNode.attributes(node) + '>');\n this.domNode.replaceWith(node, this.domNode.openTagString(node) + nodeInnerHtml.trim() + this.domNode.closeTagString(node));\n }\n var emptyUl = this.parent.editableElement.querySelectorAll('ul:empty, ol:empty');\n for (var i = 0; i < emptyUl.length; i++) {\n detach(emptyUl[i]);\n }\n var emptyLi = this.parent.editableElement.querySelectorAll('li:empty');\n for (var i = 0; i < emptyLi.length; i++) {\n detach(emptyLi[i]);\n }\n };\n Lists.prototype.openTag = function (type) {\n return this.domNode.parseHTMLFragment('');\n };\n Lists.prototype.closeTag = function (type) {\n return this.domNode.parseHTMLFragment('');\n };\n return Lists;\n}());\nexport { Lists };\n","/**\n * Node appending methods.\n *\n * @hidden\n */\nvar InsertMethods = /** @class */ (function () {\n function InsertMethods() {\n }\n /**\n * WrapBefore method\n *\n * @param {Text} textNode - specifies the text node\n * @param {HTMLElement} parentNode - specifies the parent node\n * @param {boolean} isAfter - specifies the boolean value\n * @returns {Text} - returns the text value\n * @hidden\n\n */\n InsertMethods.WrapBefore = function (textNode, parentNode, isAfter) {\n parentNode.innerText = textNode.textContent;\n //eslint-disable-next-line\n (!isAfter) ? this.AppendBefore(parentNode, textNode) : this.AppendBefore(parentNode, textNode, true);\n if (textNode.parentNode) {\n textNode.parentNode.removeChild(textNode);\n }\n return parentNode.childNodes[0];\n };\n /**\n * Wrap method\n *\n * @param {HTMLElement} childNode - specifies the child node\n * @param {HTMLElement} parentNode - specifies the parent node.\n * @returns {HTMLElement} - returns the element\n * @hidden\n\n */\n InsertMethods.Wrap = function (childNode, parentNode) {\n this.AppendBefore(parentNode, childNode);\n parentNode.appendChild(childNode);\n return childNode;\n };\n /**\n * unwrap method\n *\n * @param {Node} node - specifies the node element.\n * @returns {Node[]} - returns the array of value\n * @hidden\n\n */\n InsertMethods.unwrap = function (node) {\n var parent = node.parentNode;\n var child = [];\n for (; node.firstChild; null) {\n child.push(parent.insertBefore(node.firstChild, node));\n }\n parent.removeChild(node);\n return child;\n };\n /**\n * AppendBefore method\n *\n * @param {HTMLElement} textNode - specifies the element\n * @param {HTMLElement} parentNode - specifies the parent node\n * @param {boolean} isAfter - specifies the boolean value\n * @returns {void}\n * @hidden\n\n */\n InsertMethods.AppendBefore = function (textNode, parentNode, isAfter) {\n return (parentNode.parentNode) ? ((!isAfter) ? parentNode.parentNode.insertBefore(textNode, parentNode)\n : parentNode.parentNode.insertBefore(textNode, parentNode.nextSibling)) :\n parentNode;\n };\n return InsertMethods;\n}());\nexport { InsertMethods };\n","import { NodeSelection } from './../../selection/index';\nimport { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';\nimport { InsertMethods } from './insert-methods';\n/**\n * Split the Node based on selection\n *\n * @hidden\n\n */\nvar NodeCutter = /** @class */ (function () {\n function NodeCutter() {\n this.enterAction = 'P';\n this.position = -1;\n this.nodeSelection = new NodeSelection();\n }\n // Split Selection Node\n /**\n * GetSpliceNode method\n *\n * @param {Range} range - specifies the range\n * @param {HTMLElement} node - specifies the node element.\n * @returns {Node} - returns the node value\n * @hidden\n\n */\n NodeCutter.prototype.GetSpliceNode = function (range, node) {\n node = this.SplitNode(range, node, true);\n node = this.SplitNode(range, node, false);\n return node;\n };\n /**\n * @param {Range} range - specifies the range\n * @param {HTMLElement} node - specifies the node element.\n * @param {boolean} isCollapsed - specifies the boolean value\n * @returns {HTMLElement} - returns the element\n * @hidden\n\n */\n NodeCutter.prototype.SplitNode = function (range, node, isCollapsed) {\n if (node) {\n var clone = range.cloneRange();\n var parent_1 = node.parentNode;\n var index = this.nodeSelection.getIndex(node);\n clone.collapse(isCollapsed);\n // eslint-disable-next-line\n (isCollapsed) ? clone.setStartBefore(node) : clone.setEndAfter(node);\n var fragment = clone.extractContents();\n if (isCollapsed) {\n node = parent_1.childNodes[index];\n fragment = this.spliceEmptyNode(fragment, false);\n if (fragment && fragment.childNodes.length > 0) {\n var isEmpty = (fragment.childNodes.length === 1 && fragment.childNodes[0].nodeName !== 'IMG'\n && this.isImgElm(fragment) && fragment.textContent === '') ? true : false;\n if (!isEmpty) {\n if (node) {\n InsertMethods.AppendBefore(fragment, node);\n }\n else {\n parent_1.appendChild(fragment);\n var divNode = document.createElement('div');\n divNode.innerHTML = '';\n node = divNode.firstChild;\n parent_1.appendChild(node);\n }\n }\n }\n }\n else {\n node = parent_1.childNodes.length > 1 ? parent_1.childNodes[index] :\n parent_1.childNodes[0];\n fragment = this.spliceEmptyNode(fragment, true);\n if (fragment && fragment.childNodes.length > 0) {\n var isEmpty = (fragment.childNodes.length === 1 && fragment.childNodes[0].nodeName !== 'IMG'\n && this.isImgElm(fragment) && fragment.textContent.trim() === '') ? true : false;\n if (!isEmpty) {\n if (node) {\n InsertMethods.AppendBefore(fragment, node, true);\n }\n else {\n parent_1.appendChild(fragment);\n var divNode = document.createElement('div');\n divNode.innerHTML = '';\n parent_1.insertBefore(divNode.firstChild, parent_1.firstChild);\n node = parent_1.firstChild;\n }\n }\n }\n }\n return node;\n }\n else {\n return null;\n }\n };\n NodeCutter.prototype.isImgElm = function (fragment) {\n var result = true;\n if (fragment.childNodes.length === 1 && fragment.childNodes[0].nodeName !== 'IMG') {\n var firstChild = fragment.childNodes[0];\n for (var i = 0; !isNOU(firstChild.childNodes) && i < firstChild.childNodes.length; i++) {\n if (firstChild.childNodes[i].nodeName === 'IMG') {\n result = false;\n }\n }\n }\n else {\n result = true;\n }\n return result;\n };\n NodeCutter.prototype.spliceEmptyNode = function (fragment, isStart) {\n var len;\n if (fragment.childNodes.length === 1 && fragment.childNodes[0].nodeName === '#text' &&\n fragment.childNodes[0].textContent === '' || fragment.textContent === '') {\n len = -1;\n }\n else {\n len = fragment.childNodes.length - 1;\n }\n if (len > -1 && !isStart) {\n this.spliceEmptyNode(fragment.childNodes[len], isStart);\n }\n else if (len > -1) {\n this.spliceEmptyNode(fragment.childNodes[0], isStart);\n }\n else if (fragment.nodeType !== 3 && fragment.nodeType !== 11) {\n fragment.parentNode.removeChild(fragment);\n }\n return fragment;\n };\n // Cursor Position split\n NodeCutter.prototype.GetCursorStart = function (indexes, index, isStart) {\n indexes = (isStart) ? indexes : indexes.reverse();\n var position = indexes[0];\n for (var num = 0; num < indexes.length && ((isStart) ? (indexes[num] < index) : (indexes[num] >= index)); num++) {\n position = indexes[num];\n }\n return position;\n };\n /**\n * GetCursorRange method\n *\n * @param {Document} docElement - specifies the document\n * @param {Range} range - specifies the range\n * @param {Node} node - specifies the node.\n * @returns {Range} - returns the range value\n * @hidden\n\n */\n NodeCutter.prototype.GetCursorRange = function (docElement, range, node) {\n var cursorRange = docElement.createRange();\n var indexes = [];\n indexes.push(0);\n var str = this.TrimLineBreak(node.data);\n var index = str.indexOf(' ', 0);\n while (index !== -1) {\n if (indexes.indexOf(index) < 0) {\n indexes.push(index);\n }\n if (new RegExp('\\\\s').test(str[index - 1]) && (indexes.indexOf(index - 1) < 0)) {\n indexes.push(index - 1);\n }\n if (new RegExp('\\\\s').test(str[index + 1])) {\n indexes.push(index + 1);\n }\n index = str.indexOf(' ', (index + 1));\n }\n indexes.push(str.length);\n if ((indexes.indexOf(range.startOffset) >= 0)\n || ((indexes.indexOf(range.startOffset - 1) >= 0) && (range.startOffset !== 1\n || (range.startOffset === 1 && new RegExp('\\\\s').test(str[0])))\n || ((indexes[indexes.length - 1] - 1) === range.startOffset))) {\n cursorRange = range;\n this.position = 1;\n }\n else {\n var startOffset = this.GetCursorStart(indexes, range.startOffset, true);\n this.position = range.startOffset - startOffset;\n cursorRange.setStart(range.startContainer, startOffset);\n cursorRange.setEnd(range.startContainer, this.GetCursorStart(indexes, range.startOffset, false));\n }\n return cursorRange;\n };\n /**\n * GetCursorNode method\n *\n * @param {Document} docElement - specifies the document\n * @param {Range} range - specifies the range\n * @param {Node} node - specifies the node.\n * @returns {Node} - returns the node value\n * @hidden\n\n */\n NodeCutter.prototype.GetCursorNode = function (docElement, range, node) {\n return this.GetSpliceNode(this.GetCursorRange(docElement, range, node), node);\n };\n /**\n * TrimLineBreak method\n *\n * @param {string} line - specifies the string value.\n * @returns {string} - returns the string\n * @hidden\n\n */\n NodeCutter.prototype.TrimLineBreak = function (line) {\n return line.replace(/(\\r\\n\\t|\\n|\\r\\t)/gm, ' ');\n };\n return NodeCutter;\n}());\nexport { NodeCutter };\n","import * as EVENTS from './../../common/constant';\nimport { isNullOrUndefined as isNOU, detach, createElement, closest } from '@syncfusion/ej2-base';\nimport { isIDevice, setEditFrameFocus } from '../../common/util';\nimport { markerClassName } from './dom-node';\nimport { NodeCutter } from './nodecutter';\n/**\n * Formats internal component\n *\n * @hidden\n\n */\nvar Formats = /** @class */ (function () {\n /**\n * Constructor for creating the Formats plugin\n *\n * @param {EditorManager} parent - specifies the parent element.\n * @hidden\n\n */\n function Formats(parent) {\n this.parent = parent;\n this.addEventListener();\n }\n Formats.prototype.addEventListener = function () {\n this.parent.observer.on(EVENTS.FORMAT_TYPE, this.applyFormats, this);\n this.parent.observer.on(EVENTS.KEY_UP_HANDLER, this.onKeyUp, this);\n this.parent.observer.on(EVENTS.KEY_DOWN_HANDLER, this.onKeyDown, this);\n };\n Formats.prototype.getParentNode = function (node) {\n for (; node.parentNode && node.parentNode !== this.parent.editableElement; null) {\n node = node.parentNode;\n }\n return node;\n };\n Formats.prototype.onKeyUp = function (e) {\n var range = this.parent.nodeSelection.getRange(this.parent.currentDocument);\n var endCon = range.endContainer;\n var lastChild = endCon.lastChild;\n if (e.event.which === 13 && range.startContainer === endCon && endCon.nodeType !== 3) {\n var pTag = createElement('p');\n pTag.innerHTML = '
';\n if (!isNOU(lastChild) && lastChild && lastChild.nodeName === 'BR' && (lastChild.previousSibling && lastChild.previousSibling.nodeName === 'TABLE')) {\n endCon.replaceChild(pTag, lastChild);\n this.parent.nodeSelection.setCursorPoint(this.parent.currentDocument, pTag, 0);\n }\n else {\n var brNode = this.parent.nodeSelection.getSelectionNodeCollectionBr(range)[0];\n if (!isNOU(brNode) && brNode.nodeName === 'BR' && (brNode.previousSibling && brNode.previousSibling.nodeName === 'TABLE')) {\n endCon.replaceChild(pTag, brNode);\n this.parent.nodeSelection.setCursorPoint(this.parent.currentDocument, pTag, 0);\n }\n }\n }\n };\n Formats.prototype.onKeyDown = function (e) {\n if (e.event.which === 13) {\n var range = this.parent.nodeSelection.getRange(this.parent.currentDocument);\n var startCon = (range.startContainer.textContent.length === 0 || range.startContainer.nodeName === 'PRE')\n ? range.startContainer : range.startContainer.parentElement;\n var endCon = (range.endContainer.textContent.length === 0 || range.endContainer.nodeName === 'PRE')\n ? range.endContainer : range.endContainer.parentElement;\n var preElem = closest(startCon, 'pre');\n var endPreElem = closest(endCon, 'pre');\n var liParent = !isNOU(preElem) && !isNOU(preElem.parentElement) && preElem.parentElement.tagName === 'LI';\n if (liParent) {\n return;\n }\n if (((isNOU(preElem) && !isNOU(endPreElem)) || (!isNOU(preElem) && isNOU(endPreElem)))) {\n e.event.preventDefault();\n this.deleteContent(range);\n this.removeCodeContent(range);\n range = this.parent.nodeSelection.getRange(this.parent.currentDocument);\n this.parent.nodeSelection.setCursorPoint(this.parent.currentDocument, endCon, 0);\n }\n if (e.event.which === 13 && !isNOU(preElem) && !isNOU(endPreElem)) {\n e.event.preventDefault();\n this.deleteContent(range);\n this.removeCodeContent(range);\n range = this.parent.nodeSelection.getRange(this.parent.currentDocument);\n var lastEmpty = range.startContainer.childNodes[range.endOffset];\n var lastBeforeBr = range.startContainer.childNodes[range.endOffset - 1];\n var startParent = range.startContainer;\n if (!isNOU(lastEmpty) && !isNOU(lastBeforeBr) && isNOU(lastEmpty.nextSibling) &&\n lastEmpty.nodeName === 'BR' && lastBeforeBr.nodeName === 'BR') {\n this.paraFocus(range.startContainer, e.enterAction);\n }\n else if ((startParent.textContent.charCodeAt(0) === 8203 &&\n startParent.textContent.length === 1) || startParent.textContent.length === 0) {\n //Double enter with any parent tag for the node\n while (startParent.parentElement.nodeName !== 'PRE' &&\n (startParent.textContent.length === 1 || startParent.textContent.length === 0)) {\n startParent = startParent.parentElement;\n }\n if (!isNOU(startParent.previousSibling) && startParent.previousSibling.nodeName === 'BR' &&\n isNOU(startParent.nextSibling)) {\n this.paraFocus(startParent.parentElement);\n }\n else {\n this.isNotEndCursor(preElem, range);\n }\n }\n else {\n //Cursor at start and middle\n this.isNotEndCursor(preElem, range);\n }\n }\n }\n };\n Formats.prototype.removeCodeContent = function (range) {\n var regEx = new RegExp(String.fromCharCode(65279), 'g');\n if (!isNOU(range.endContainer.textContent.match(regEx))) {\n var pointer = range.endContainer.textContent.charCodeAt(range.endOffset - 1) === 65279 ?\n range.endOffset - 2 : range.endOffset;\n range.endContainer.textContent = range.endContainer.textContent.replace(regEx, '');\n if (range.endContainer.textContent === '') {\n this.parent.nodeSelection.setCursorPoint(this.parent.currentDocument, range.endContainer.parentElement, 0);\n }\n else {\n this.parent.nodeSelection.setCursorPoint(this.parent.currentDocument, range.endContainer, pointer);\n }\n }\n };\n Formats.prototype.deleteContent = function (range) {\n if (range.startContainer !== range.endContainer || range.startOffset !== range.endOffset) {\n range.deleteContents();\n }\n };\n Formats.prototype.paraFocus = function (referNode, enterAction) {\n var insertTag;\n if (enterAction === 'DIV') {\n insertTag = createElement('div');\n insertTag.innerHTML = '
';\n }\n else if (enterAction === 'BR') {\n insertTag = createElement('br');\n }\n else {\n insertTag = createElement('p');\n insertTag.innerHTML = '
';\n }\n this.parent.domNode.insertAfter(insertTag, referNode);\n this.parent.nodeSelection.setCursorPoint(this.parent.currentDocument, insertTag, 0);\n detach(referNode.lastChild);\n };\n Formats.prototype.isNotEndCursor = function (preElem, range) {\n var nodeCutter = new NodeCutter();\n var isEnd = range.startOffset === preElem.lastChild.textContent.length &&\n preElem.lastChild.textContent === range.startContainer.textContent;\n //Cursor at start point\n if (preElem.textContent.indexOf(range.startContainer.textContent) === 0 &&\n ((range.startOffset === 0 && range.endOffset === 0) || range.startContainer.nodeName === 'PRE')) {\n this.insertMarker(preElem, range);\n var brTag = createElement('br');\n preElem.childNodes[range.endOffset].parentElement.insertBefore(brTag, preElem.childNodes[range.endOffset]);\n }\n else {\n //Cursor at middle\n var cloneNode = nodeCutter.SplitNode(range, preElem, true);\n this.insertMarker(preElem, range);\n var previousSib = preElem.previousElementSibling;\n if (previousSib.tagName === 'PRE') {\n previousSib.insertAdjacentHTML('beforeend', '
' + cloneNode.innerHTML);\n detach(preElem);\n }\n }\n //To place the cursor position\n this.setCursorPosition(isEnd, preElem);\n };\n Formats.prototype.setCursorPosition = function (isEnd, preElem) {\n var isEmpty = false;\n var markerElem = this.parent.editableElement.querySelector('.tempSpan');\n var mrkParentElem = markerElem.parentElement;\n // eslint-disable-next-line\n markerElem.parentNode.textContent === '' ? isEmpty = true :\n this.parent.nodeSelection.setCursorPoint(this.parent.currentDocument, markerElem, 0);\n if (isEnd) {\n if (isEmpty) {\n //Enter press when pre element is empty\n if (mrkParentElem === preElem) {\n this.parent.nodeSelection.setCursorPoint(this.parent.currentDocument, markerElem, 0);\n detach(markerElem);\n }\n else {\n this.focusSelectionParent(markerElem, mrkParentElem);\n }\n }\n else {\n var brElm = createElement('br');\n this.parent.domNode.insertAfter(brElm, markerElem);\n this.parent.nodeSelection.setCursorPoint(this.parent.currentDocument, markerElem, 0);\n detach(markerElem);\n }\n }\n else {\n // eslint-disable-next-line\n isEmpty ? this.focusSelectionParent(markerElem, mrkParentElem) : detach(markerElem);\n }\n };\n Formats.prototype.focusSelectionParent = function (markerElem, tempSpanPElem) {\n detach(markerElem);\n tempSpanPElem.innerHTML = '\\u200B';\n this.parent.nodeSelection.setCursorPoint(this.parent.currentDocument, tempSpanPElem, 0);\n };\n Formats.prototype.insertMarker = function (preElem, range) {\n var tempSpan = createElement('span', { className: 'tempSpan' });\n if (range.startContainer.nodeName === 'PRE') {\n preElem.childNodes[range.endOffset].parentElement.insertBefore(tempSpan, preElem.childNodes[range.endOffset]);\n }\n else {\n range.startContainer.parentElement.insertBefore(tempSpan, range.startContainer);\n }\n };\n Formats.prototype.applyFormats = function (e) {\n var range = this.parent.nodeSelection.getRange(this.parent.currentDocument);\n var isSelectAll = false;\n if (this.parent.editableElement === range.endContainer &&\n !isNOU(this.parent.editableElement.children[range.endOffset - 1]) &&\n this.parent.editableElement.children[range.endOffset - 1].tagName === 'TABLE' && !range.collapsed) {\n isSelectAll = true;\n }\n var save = this.parent.nodeSelection.save(range, this.parent.currentDocument);\n this.parent.domNode.setMarker(save);\n var formatsNodes = this.parent.domNode.blockNodes();\n if (e.enterAction === 'BR') {\n this.setSelectionBRConfig();\n var allSelectedNode = this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument);\n var selectedNodes = this.parent.nodeSelection.getSelectionNodes(allSelectedNode);\n var currentFormatNodes = [];\n if (selectedNodes.length === 0) {\n selectedNodes.push(formatsNodes[0]);\n }\n for (var i = 0; i < selectedNodes.length; i++) {\n var currentNode = selectedNodes[i];\n var previousCurrentNode = void 0;\n while (!this.parent.domNode.isBlockNode(currentNode) && currentNode !== this.parent.editableElement) {\n previousCurrentNode = currentNode;\n currentNode = currentNode.parentElement;\n }\n if (this.parent.domNode.isBlockNode(currentNode) && currentNode === this.parent.editableElement) {\n currentFormatNodes.push(previousCurrentNode);\n }\n }\n for (var i = 0; i < currentFormatNodes.length; i++) {\n if (!this.parent.domNode.isBlockNode(currentFormatNodes[i])) {\n var currentNode = currentFormatNodes[i];\n var previousNode = currentNode;\n while (currentNode === this.parent.editableElement) {\n previousNode = currentNode;\n currentNode = currentNode.parentElement;\n }\n var tempElem = void 0;\n if (this.parent.domNode.isBlockNode(previousNode.parentElement) &&\n previousNode.parentElement === this.parent.editableElement) {\n tempElem = createElement('div');\n previousNode.parentElement.insertBefore(tempElem, previousNode);\n tempElem.appendChild(previousNode);\n }\n else {\n tempElem = previousNode;\n }\n var preNode = tempElem.previousSibling;\n while (!isNOU(preNode) && preNode.nodeName !== 'BR' &&\n !this.parent.domNode.isBlockNode(preNode)) {\n tempElem.firstChild.parentElement.insertBefore(preNode, tempElem.firstChild);\n preNode = tempElem.previousSibling;\n }\n if (!isNOU(preNode) && preNode.nodeName === 'BR') {\n detach(preNode);\n }\n var postNode = tempElem.nextSibling;\n while (!isNOU(postNode) && postNode.nodeName !== 'BR' &&\n !this.parent.domNode.isBlockNode(postNode)) {\n tempElem.appendChild(postNode);\n postNode = tempElem.nextSibling;\n }\n if (!isNOU(postNode) && postNode.nodeName === 'BR') {\n detach(postNode);\n }\n }\n }\n this.setSelectionBRConfig();\n formatsNodes = this.parent.domNode.blockNodes();\n }\n for (var i = 0; i < formatsNodes.length; i++) {\n var parentNode = void 0;\n var replaceHTML = void 0;\n if (e.subCommand.toLowerCase() === 'blockquote') {\n parentNode = this.getParentNode(formatsNodes[i]);\n replaceHTML = this.parent.domNode.isList(parentNode) ||\n parentNode.tagName === 'TABLE' ? parentNode.outerHTML : parentNode.innerHTML;\n }\n else {\n parentNode = formatsNodes[i];\n replaceHTML = parentNode.innerHTML;\n }\n if ((e.subCommand.toLowerCase() === parentNode.tagName.toLowerCase() &&\n (e.subCommand.toLowerCase() !== 'pre' ||\n (!isNOU(e.exeValue) && e.exeValue.name === 'dropDownSelect'))) ||\n isNOU(parentNode.parentNode) ||\n (parentNode.tagName === 'TABLE' && e.subCommand.toLowerCase() === 'pre')) {\n continue;\n }\n this.cleanFormats(parentNode, e.subCommand);\n var replaceNode = (e.subCommand.toLowerCase() === 'pre' && parentNode.tagName.toLowerCase() === 'pre') ?\n 'p' : e.subCommand;\n var replaceTag = this.parent.domNode.createTagString(replaceNode, parentNode, replaceHTML.replace(/>\\s+<'));\n if (parentNode.tagName === 'LI') {\n parentNode.innerHTML = '';\n parentNode.insertAdjacentHTML('beforeend', replaceTag);\n }\n else {\n this.parent.domNode.replaceWith(parentNode, replaceTag);\n }\n }\n this.preFormatMerge();\n var startNode = this.parent.editableElement.querySelector('.' + markerClassName.startSelection);\n var endNode = this.parent.editableElement.querySelector('.' + markerClassName.endSelection);\n if (!isNOU(startNode) && !isNOU(endNode)) {\n startNode = startNode.lastChild;\n endNode = endNode.lastChild;\n }\n save = this.parent.domNode.saveMarker(save, null);\n if (isIDevice()) {\n setEditFrameFocus(this.parent.editableElement, e.selector);\n }\n if (isSelectAll) {\n this.parent.nodeSelection.setSelectionText(this.parent.currentDocument, startNode, endNode, 0, endNode.textContent.length);\n }\n else {\n save.restore();\n }\n if (e.callBack) {\n e.callBack({\n requestType: e.subCommand,\n editorMode: 'HTML',\n event: e.event,\n range: this.parent.nodeSelection.getRange(this.parent.currentDocument),\n elements: this.parent.domNode.blockNodes()\n });\n }\n };\n Formats.prototype.setSelectionBRConfig = function () {\n var startElem = this.parent.editableElement.querySelector('.' + markerClassName.startSelection);\n var endElem = this.parent.editableElement.querySelector('.' + markerClassName.endSelection);\n if (isNOU(endElem)) {\n this.parent.nodeSelection.setCursorPoint(this.parent.currentDocument, startElem, 0);\n }\n else {\n this.parent.nodeSelection.setSelectionText(this.parent.currentDocument, startElem, endElem, 0, 0);\n }\n };\n Formats.prototype.preFormatMerge = function () {\n var preNodes = this.parent.editableElement.querySelectorAll('PRE');\n if (!isNOU(preNodes)) {\n for (var i = 0; i < preNodes.length; i++) {\n var previousSib = preNodes[i].previousElementSibling;\n if (!isNOU(previousSib) && previousSib.tagName === 'PRE') {\n previousSib.insertAdjacentHTML('beforeend', '
' + preNodes[i].innerHTML);\n detach(preNodes[i]);\n }\n }\n }\n };\n Formats.prototype.cleanFormats = function (element, tagName) {\n var ignoreAttr = ['display', 'font-size', 'margin-top', 'margin-bottom', 'margin-left', 'margin-right', 'font-weight'];\n tagName = tagName.toLowerCase();\n for (var i = 0; i < ignoreAttr.length && (tagName !== 'p' && tagName !== 'blockquote' && tagName !== 'pre'); i++) {\n element.style.removeProperty(ignoreAttr[i]);\n }\n };\n return Formats;\n}());\nexport { Formats };\n","import { NodeSelection } from './../../selection/index';\nimport { NodeCutter } from './nodecutter';\nimport * as CONSTANT from './../base/constant';\nimport { detach, Browser, isNullOrUndefined as isNOU, createElement, closest } from '@syncfusion/ej2-base';\nimport { InsertMethods } from './insert-methods';\nimport { updateTextNode } from './../../common/util';\n/**\n * Insert a HTML Node or Text\n *\n * @hidden\n\n */\nvar InsertHtml = /** @class */ (function () {\n function InsertHtml() {\n }\n InsertHtml.Insert = function (docElement, insertNode, editNode, isExternal) {\n var node;\n if (typeof insertNode === 'string') {\n var divNode = document.createElement('div');\n divNode.innerHTML = insertNode;\n node = isExternal ? divNode : divNode.firstChild;\n }\n else {\n if (isExternal && !(!isNOU(insertNode) && !isNOU(insertNode.classList) &&\n insertNode.classList.contains('pasteContent'))) {\n var divNode = document.createElement('div');\n divNode.appendChild(insertNode);\n node = divNode;\n }\n else {\n node = insertNode;\n }\n }\n var nodeSelection = new NodeSelection();\n var nodeCutter = new NodeCutter();\n var range = nodeSelection.getRange(docElement);\n if (range.startContainer === editNode && range.startContainer === range.endContainer && range.startOffset === 0 &&\n range.startOffset === range.endOffset && editNode.textContent.length === 0 && editNode.children[0].tagName === 'P') {\n nodeSelection.setSelectionText(docElement, range.startContainer.children[0], range.startContainer.children[0], 0, 0);\n range = nodeSelection.getRange(docElement);\n }\n var isCursor = range.startOffset === range.endOffset && range.startOffset === 0 &&\n range.startContainer === range.endContainer;\n var isCollapsed = range.collapsed;\n var nodes = this.getNodeCollection(range, nodeSelection, node);\n var closestParentNode = (node.nodeName.toLowerCase() === 'table') ? this.closestEle(nodes[0].parentNode, editNode) : nodes[0];\n if (isExternal || (!isNOU(node) && !isNOU(node.classList) &&\n node.classList.contains('pasteContent'))) {\n this.pasteInsertHTML(nodes, node, range, nodeSelection, nodeCutter, docElement, isCollapsed, closestParentNode, editNode);\n return;\n }\n if (editNode !== range.startContainer && ((!isCollapsed && !(closestParentNode.nodeType === Node.ELEMENT_NODE &&\n CONSTANT.TABLE_BLOCK_TAGS.indexOf(closestParentNode.tagName.toLocaleLowerCase()) !== -1))\n || (node.nodeName.toLowerCase() === 'table' && closestParentNode &&\n CONSTANT.TABLE_BLOCK_TAGS.indexOf(closestParentNode.tagName.toLocaleLowerCase()) === -1))) {\n var preNode = nodeCutter.GetSpliceNode(range, closestParentNode);\n var sibNode = preNode.previousSibling;\n var parentNode = preNode.parentNode;\n if (nodes.length === 1 || (node.nodeName.toLowerCase() === 'table' && preNode.childElementCount === 0)) {\n nodeSelection.setSelectionContents(docElement, preNode);\n range = nodeSelection.getRange(docElement);\n }\n else {\n var lasNode = nodeCutter.GetSpliceNode(range, nodes[nodes.length - 1].parentElement);\n lasNode = isNOU(lasNode) ? preNode : lasNode;\n nodeSelection.setSelectionText(docElement, preNode, lasNode, 0, (lasNode.nodeType === 3) ?\n lasNode.textContent.length : lasNode.childNodes.length);\n range = nodeSelection.getRange(docElement);\n }\n range.extractContents();\n if (insertNode.tagName === 'TABLE') {\n this.removeEmptyElements(editNode);\n }\n for (var index = 0; index < nodes.length; index++) {\n if (nodes[index].nodeType !== 3 && nodes[index].parentNode != null) {\n if (nodes[index].nodeName === 'IMG') {\n continue;\n }\n nodes[index].parentNode.removeChild(nodes[index]);\n }\n }\n if (sibNode) {\n InsertMethods.AppendBefore(node, sibNode, true);\n }\n else {\n var previousNode = null;\n while (parentNode !== editNode && parentNode.firstChild &&\n (parentNode.textContent.trim() === '')) {\n var parentNode1 = parentNode.parentNode;\n previousNode = parentNode;\n parentNode = parentNode1;\n }\n if (previousNode !== null) {\n parentNode = previousNode;\n }\n if (parentNode.firstChild && (parentNode !== editNode ||\n (node.nodeName === 'TABLE' && isCursor && parentNode === range.startContainer &&\n parentNode === range.endContainer))) {\n if (parentNode.textContent.trim() === '' && parentNode !== editNode) {\n InsertMethods.AppendBefore(node, parentNode, false);\n detach(parentNode);\n }\n else {\n InsertMethods.AppendBefore(node, parentNode.firstChild, false);\n }\n }\n else {\n parentNode.appendChild(node);\n }\n }\n if (node.nodeName === 'IMG') {\n this.imageFocus(node, nodeSelection, docElement);\n }\n else if (node.nodeType !== 3) {\n nodeSelection.setSelectionText(docElement, node, node, 0, node.childNodes.length);\n }\n else {\n nodeSelection.setSelectionText(docElement, node, node, 0, node.textContent.length);\n }\n }\n else {\n range.deleteContents();\n if (isCursor && range.startContainer.textContent === '' && range.startContainer.nodeName !== 'BR') {\n range.startContainer.innerHTML = '';\n }\n if (Browser.isIE) {\n var frag = docElement.createDocumentFragment();\n frag.appendChild(node);\n range.insertNode(frag);\n }\n else if (range.startContainer.nodeType === 1 && range.startContainer.nodeName.toLowerCase() === 'hr'\n && range.endContainer.nodeName.toLowerCase() === 'hr') {\n var paraElem = range.startContainer.nextElementSibling;\n if (paraElem) {\n if (paraElem.querySelector('br')) {\n detach(paraElem.querySelector('br'));\n }\n paraElem.appendChild(node);\n }\n }\n else {\n if (range.startContainer.nodeName === 'BR') {\n range.startContainer.parentElement.insertBefore(node, range.startContainer);\n }\n else {\n range.insertNode(node);\n }\n }\n if (node.nodeType !== 3 && node.childNodes.length > 0) {\n nodeSelection.setSelectionText(docElement, node, node, 1, 1);\n }\n else if (node.nodeName === 'IMG') {\n this.imageFocus(node, nodeSelection, docElement);\n }\n else if (node.nodeType !== 3) {\n nodeSelection.setSelectionContents(docElement, node);\n }\n else {\n nodeSelection.setSelectionText(docElement, node, node, node.textContent.length, node.textContent.length);\n }\n }\n };\n InsertHtml.pasteInsertHTML = function (nodes, node, range, nodeSelection, nodeCutter, docElement, isCollapsed, closestParentNode, editNode) {\n var isCursor = range.startOffset === range.endOffset &&\n range.startContainer === range.endContainer;\n if (isCursor && range.startContainer === editNode && editNode.textContent === '') {\n var currentBlockNode = this.getImmediateBlockNode(nodes[nodes.length - 1], editNode);\n nodeSelection.setSelectionText(docElement, currentBlockNode, currentBlockNode, 0, 0);\n range = nodeSelection.getRange(docElement);\n }\n var lasNode;\n var sibNode;\n var isSingleNode;\n var preNode;\n if (editNode !== range.startContainer && ((!isCollapsed && !(closestParentNode.nodeType === Node.ELEMENT_NODE &&\n CONSTANT.TABLE_BLOCK_TAGS.indexOf(closestParentNode.tagName.toLocaleLowerCase()) !== -1))\n || (node.nodeName.toLowerCase() === 'table' && closestParentNode &&\n CONSTANT.TABLE_BLOCK_TAGS.indexOf(closestParentNode.tagName.toLocaleLowerCase()) === -1))) {\n preNode = nodeCutter.GetSpliceNode(range, closestParentNode);\n sibNode = isNOU(preNode.previousSibling) ? preNode.parentNode.previousSibling : preNode.previousSibling;\n if (nodes.length === 1) {\n nodeSelection.setSelectionContents(docElement, preNode);\n range = nodeSelection.getRange(docElement);\n isSingleNode = true;\n }\n else {\n lasNode = nodeCutter.GetSpliceNode(range, nodes[nodes.length - 1].parentElement);\n lasNode = isNOU(lasNode) ? preNode : lasNode;\n nodeSelection.setSelectionText(docElement, preNode, lasNode, 0, (lasNode.nodeType === 3) ?\n lasNode.textContent.length : lasNode.childNodes.length);\n range = nodeSelection.getRange(docElement);\n isSingleNode = false;\n }\n }\n var containsBlockNode = false;\n this.removingComments(node);\n var allChildNodes = node.childNodes;\n for (var i = 0; i < allChildNodes.length; i++) {\n if (CONSTANT.BLOCK_TAGS.indexOf(allChildNodes[i].nodeName.toLocaleLowerCase()) >= 0) {\n containsBlockNode = true;\n break;\n }\n }\n var lastSelectionNode;\n var fragment = document.createDocumentFragment();\n if (!containsBlockNode) {\n if (!isCursor) {\n while (node.firstChild) {\n lastSelectionNode = node.firstChild;\n fragment.appendChild(node.firstChild);\n }\n if (isSingleNode) {\n preNode.parentNode.replaceChild(fragment, preNode);\n }\n else {\n range.deleteContents();\n detach(lasNode);\n // eslint-disable-next-line\n !isNOU(sibNode) ? sibNode.parentNode.appendChild(fragment) : editNode.appendChild(fragment);\n }\n }\n else {\n var tempSpan = createElement('span', { className: 'tempSpan' });\n var nearestAnchor = closest(range.startContainer.parentElement, 'a');\n if (range.startContainer.nodeType === 3 && nearestAnchor) {\n var immediateBlockNode = this.getImmediateBlockNode(range.startContainer, editNode);\n if (immediateBlockNode.querySelectorAll('br').length > 0) {\n detach(immediateBlockNode.querySelector('br'));\n }\n var rangeElement = closest(nearestAnchor, 'span');\n rangeElement.appendChild(tempSpan);\n }\n else {\n range.insertNode(tempSpan);\n }\n while (node.firstChild) {\n lastSelectionNode = node.firstChild;\n fragment.appendChild(node.firstChild);\n }\n tempSpan.parentNode.replaceChild(fragment, tempSpan);\n }\n }\n else {\n this.insertTempNode(range, node, nodes, nodeCutter, editNode);\n var isFirstTextNode = true;\n var isPreviousInlineElem = void 0;\n var paraElm = void 0;\n var previousParent = void 0;\n range.deleteContents();\n while (node.firstChild) {\n if (node.firstChild.nodeName === '#text' && node.firstChild.textContent.trim() === '') {\n detach(node.firstChild);\n continue;\n }\n if (node.firstChild.nodeName === '#text' && isFirstTextNode ||\n (this.inlineNode.indexOf(node.firstChild.nodeName.toLocaleLowerCase()) >= 0 && isFirstTextNode)) {\n lastSelectionNode = node.firstChild;\n if (isNOU(node.previousElementSibling)) {\n var firstParaElm = createElement('p');\n node.parentElement.insertBefore(firstParaElm, node);\n }\n node.previousElementSibling.appendChild(node.firstChild);\n }\n else {\n lastSelectionNode = node.firstChild;\n if (node.firstChild.nodeName === '#text' ||\n (this.inlineNode.indexOf(node.firstChild.nodeName.toLocaleLowerCase()) >= 0)) {\n if (!isPreviousInlineElem) {\n paraElm = createElement('p');\n paraElm.appendChild(node.firstChild);\n fragment.appendChild(paraElm);\n }\n else {\n previousParent.appendChild(node.firstChild);\n fragment.appendChild(previousParent);\n }\n previousParent = paraElm;\n isPreviousInlineElem = true;\n }\n else {\n fragment.appendChild(node.firstChild);\n isPreviousInlineElem = false;\n }\n isFirstTextNode = false;\n }\n }\n node.parentNode.replaceChild(fragment, node);\n }\n if (lastSelectionNode.nodeName === '#text') {\n this.placeCursorEnd(lastSelectionNode, node, nodeSelection, docElement, editNode);\n }\n else {\n this.cursorPos(lastSelectionNode, node, nodeSelection, docElement, editNode);\n }\n };\n InsertHtml.placeCursorEnd = function (lastSelectionNode, node, nodeSelection, docElement, editNode) {\n lastSelectionNode = lastSelectionNode.nodeName === 'BR' ? (isNOU(lastSelectionNode.previousSibling) ? lastSelectionNode.parentNode\n : lastSelectionNode.previousSibling) : lastSelectionNode;\n while (!isNOU(lastSelectionNode) && lastSelectionNode.nodeName !== '#text' && lastSelectionNode.nodeName !== 'IMG' &&\n lastSelectionNode.nodeName !== 'BR' && lastSelectionNode.nodeName !== 'HR') {\n lastSelectionNode = lastSelectionNode.lastChild;\n }\n lastSelectionNode = isNOU(lastSelectionNode) ? node : lastSelectionNode;\n if (lastSelectionNode.nodeName === 'IMG') {\n this.imageFocus(lastSelectionNode, nodeSelection, docElement);\n }\n else {\n nodeSelection.setSelectionText(docElement, lastSelectionNode, lastSelectionNode, lastSelectionNode.textContent.length, lastSelectionNode.textContent.length);\n }\n this.removeEmptyElements(editNode);\n };\n InsertHtml.getNodeCollection = function (range, nodeSelection, node) {\n var nodes = [];\n if (range.startOffset === range.endOffset && range.startContainer === range.endContainer &&\n range.startContainer.nodeName != 'BR' &&\n (range.startContainer.nodeName === 'TD' || (range.startContainer.nodeType !== 3 &&\n node.classList && node.classList.contains('pasteContent')))) {\n nodes.push(range.startContainer.childNodes[range.endOffset]);\n }\n else {\n nodes = nodeSelection.getInsertNodeCollection(range);\n }\n return nodes;\n };\n InsertHtml.insertTempNode = function (range, node, nodes, nodeCutter, editNode) {\n if (range.startContainer === editNode && !isNOU(range.startContainer.childNodes[range.endOffset - 1]) &&\n range.startContainer.childNodes[range.endOffset - 1].nodeName === 'TABLE') {\n if (isNOU(range.startContainer.childNodes[range.endOffset - 1].nextSibling)) {\n range.startContainer.appendChild(node);\n }\n else {\n range.startContainer.insertBefore(node, range.startContainer.childNodes[range.endOffset - 1].nextSibling);\n }\n }\n else if (range.startContainer === editNode && !isNOU(range.startContainer.childNodes[range.endOffset]) &&\n range.startContainer.childNodes[range.endOffset].nodeName === 'TABLE') {\n range.startContainer.insertBefore(node, range.startContainer.childNodes[range.endOffset]);\n }\n else if (range.startContainer === range.endContainer && range.startContainer.nodeType !== 3\n && node.firstChild.nodeName === 'HR') {\n if (range.startContainer.classList.contains('e-content') || range.startContainer.nodeName === 'BODY') {\n range.startContainer.appendChild(node);\n }\n else {\n range.startContainer.parentNode.insertBefore(node, range.startContainer);\n }\n }\n else {\n var blockNode = this.getImmediateBlockNode(nodes[nodes.length - 1], editNode);\n if ((isNOU(blockNode) || isNOU(blockNode.parentElement)) && range.endContainer.nodeType !== 3) {\n blockNode = range.endContainer;\n range.setEnd(blockNode, range.endContainer.textContent.length);\n }\n if (blockNode.nodeName === 'BODY' && range.startContainer === range.endContainer && range.startContainer.nodeType === 1) {\n blockNode = range.startContainer;\n }\n if (blockNode.closest('LI') && node && node.firstElementChild &&\n ((node).firstElementChild.tagName === 'OL' || node.firstElementChild.tagName === 'UL')) {\n var liNode = void 0;\n while (node.firstElementChild.lastElementChild && node.firstElementChild.lastElementChild.tagName === 'LI') {\n liNode = node.firstElementChild.lastElementChild;\n liNode.style.removeProperty('margin-left');\n liNode.style.removeProperty('margin-top');\n liNode.style.removeProperty('margin-bottom');\n node.firstElementChild.insertAdjacentElement('afterend', liNode);\n }\n }\n if (blockNode.nodeName === 'TD' || blockNode.nodeName === 'TH') {\n var tempSpan = createElement('span', { className: 'tempSpan' });\n range.insertNode(tempSpan);\n tempSpan.parentNode.replaceChild(node, tempSpan);\n }\n else {\n var currentNode = nodes[nodes.length - 1];\n var splitedElm = void 0;\n if ((currentNode.nodeName === 'BR' || currentNode.nodeName === 'HR') && !isNOU(currentNode.parentElement) &&\n currentNode.parentElement.textContent.trim().length === 0) {\n splitedElm = currentNode;\n }\n else {\n splitedElm = nodeCutter.GetSpliceNode(range, blockNode);\n }\n splitedElm.parentNode.replaceChild(node, splitedElm);\n }\n }\n };\n InsertHtml.cursorPos = function (lastSelectionNode, node, nodeSelection, docElement, editNode) {\n lastSelectionNode.classList.add('lastNode');\n editNode.innerHTML = updateTextNode(editNode.innerHTML);\n lastSelectionNode = editNode.querySelector('.lastNode');\n if (!isNOU(lastSelectionNode)) {\n this.placeCursorEnd(lastSelectionNode, node, nodeSelection, docElement, editNode);\n lastSelectionNode.classList.remove('lastNode');\n if (lastSelectionNode.classList.length === 0) {\n lastSelectionNode.removeAttribute('class');\n }\n }\n };\n InsertHtml.imageFocus = function (node, nodeSelection, docElement) {\n var focusNode = document.createTextNode(' ');\n node.parentNode.insertBefore(focusNode, node.nextSibling);\n nodeSelection.setSelectionText(docElement, node.nextSibling, node.nextSibling, 0, 0);\n };\n // eslint-disable-next-line\n InsertHtml.getImmediateBlockNode = function (node, editNode) {\n do {\n node = node.parentNode;\n } while (node && CONSTANT.BLOCK_TAGS.indexOf(node.nodeName.toLocaleLowerCase()) < 0);\n return node;\n };\n InsertHtml.removingComments = function (elm) {\n var innerElement = elm.innerHTML;\n innerElement = innerElement.replace(//g, '');\n elm.innerHTML = innerElement;\n };\n InsertHtml.findDetachEmptyElem = function (element) {\n var removableElement;\n if (!isNOU(element.parentElement)) {\n if (element.parentElement.textContent.trim() === '' && element.parentElement.contentEditable !== 'true') {\n removableElement = this.findDetachEmptyElem(element.parentElement);\n }\n else {\n removableElement = element;\n }\n }\n else {\n removableElement = null;\n }\n return removableElement;\n };\n InsertHtml.removeEmptyElements = function (element) {\n var emptyElements = element.querySelectorAll(':empty');\n for (var i = 0; i < emptyElements.length; i++) {\n if (emptyElements[i].tagName !== 'IMG' && emptyElements[i].tagName !== 'BR' &&\n emptyElements[i].tagName !== 'IFRAME' && emptyElements[i].tagName !== 'TD' &&\n emptyElements[i].tagName !== 'SOURCE' && emptyElements[i].tagName !== 'HR') {\n var detachableElement = this.findDetachEmptyElem(emptyElements[i]);\n if (!isNOU(detachableElement)) {\n detach(detachableElement);\n }\n }\n }\n };\n InsertHtml.closestEle = function (element, editNode) {\n var el = element;\n while (el && el.nodeType === 1) {\n if (el.parentNode === editNode ||\n (!isNOU(el.parentNode.tagName) &&\n CONSTANT.IGNORE_BLOCK_TAGS.indexOf(el.parentNode.tagName.toLocaleLowerCase()) !== -1)) {\n return el;\n }\n el = el.parentNode;\n }\n return null;\n };\n /**\n * Insert method\n *\n * @hidden\n\n */\n InsertHtml.inlineNode = ['a', 'abbr', 'acronym', 'audio', 'b', 'bdi', 'bdo', 'big', 'br', 'button',\n 'canvas', 'cite', 'code', 'data', 'datalist', 'del', 'dfn', 'em', 'embed', 'font', 'i', 'iframe', 'img', 'input',\n 'ins', 'kbd', 'label', 'map', 'mark', 'meter', 'noscript', 'object', 'output', 'picture', 'progress',\n 'q', 'ruby', 's', 'samp', 'script', 'select', 'slot', 'small', 'span', 'strong', 'sub', 'sup', 'svg',\n 'template', 'textarea', 'time', 'u', 'tt', 'var', 'video', 'wbr'];\n return InsertHtml;\n}());\nexport { InsertHtml };\n","import * as CONSTANT from './../base/constant';\nimport { NodeSelection } from '../../selection/selection';\nimport { NodeCutter } from './nodecutter';\nimport { InsertHtml } from './inserthtml';\nimport { createElement, isNullOrUndefined as isNOU, closest } from '@syncfusion/ej2-base';\n/**\n * Link internal component\n *\n * @hidden\n\n */\nvar LinkCommand = /** @class */ (function () {\n /**\n * Constructor for creating the Formats plugin\n *\n * @param {EditorManager} parent - specifies the editor manager\n * @hidden\n\n */\n function LinkCommand(parent) {\n this.parent = parent;\n this.addEventListener();\n }\n LinkCommand.prototype.addEventListener = function () {\n this.parent.observer.on(CONSTANT.LINK, this.linkCommand, this);\n };\n LinkCommand.prototype.linkCommand = function (e) {\n switch (e.value.toString().toLocaleLowerCase()) {\n case 'createlink':\n case 'editlink':\n this.createLink(e);\n break;\n case 'openlink':\n this.openLink(e);\n break;\n case 'removelink':\n this.removeLink(e);\n break;\n }\n };\n LinkCommand.prototype.createLink = function (e) {\n var closestAnchor = (!isNOU(e.item.selectParent) && e.item.selectParent.length > 0) &&\n closest(e.item.selectParent[0], 'a');\n closestAnchor = !isNOU(closestAnchor) ? closestAnchor :\n (!isNOU(e.item.selectParent) && e.item.selectParent.length > 0) ? (e.item.selectParent[0]) : null;\n if (!isNOU(closestAnchor) && closestAnchor.tagName === 'A') {\n var anchorEle = closestAnchor;\n var linkText = '';\n if (!isNOU(e.item.url)) {\n anchorEle.setAttribute('href', e.item.url);\n }\n if (!isNOU(e.item.title)) {\n anchorEle.setAttribute('title', e.item.title);\n }\n if (!isNOU(e.item.text) && e.item.text !== '') {\n linkText = anchorEle.innerText;\n anchorEle.innerText = e.item.text;\n }\n if (!isNOU(e.item.target)) {\n anchorEle.setAttribute('target', e.item.target);\n }\n else {\n anchorEle.removeAttribute('target');\n }\n if (linkText === e.item.text) {\n e.item.selection.setSelectionText(this.parent.currentDocument, anchorEle, anchorEle, 1, 1);\n e.item.selection.restore();\n }\n else {\n var startIndex = e.item.action === 'Paste' ? anchorEle.childNodes[0].textContent.length : 0;\n e.item.selection.setSelectionText(this.parent.currentDocument, anchorEle.childNodes[0], anchorEle.childNodes[0], startIndex, anchorEle.childNodes[0].textContent.length);\n }\n }\n else {\n var domSelection = new NodeSelection();\n var range = domSelection.getRange(this.parent.currentDocument);\n if (range.endContainer.nodeName === '#text' && range.startContainer.textContent.length === (range.endOffset + 1) &&\n range.endContainer.textContent.charAt(range.endOffset) === ' ' && range.endContainer.nextSibling.nodeName === 'A') {\n domSelection.setSelectionText(this.parent.currentDocument, range.startContainer, range.endContainer, range.startOffset, range.endOffset + 1);\n range = domSelection.getRange(this.parent.currentDocument);\n }\n var text = isNOU(e.item.text) ? true : e.item.text.replace(/ /g, '').localeCompare(range.toString()\n .replace(/\\n/g, ' ').replace(/ /g, '')) < 0;\n if (e.event && e.event.type === 'keydown' && (e.event.keyCode === 32\n || e.event.keyCode === 13) || e.item.action === 'Paste' || range.collapsed || text) {\n var anchor = this.createAchorNode(e);\n anchor.innerText = e.item.text === '' ? e.item.url : e.item.text;\n e.item.selection.restore();\n InsertHtml.Insert(this.parent.currentDocument, anchor, this.parent.editableElement);\n if (e.event && e.event.type === 'keydown' && (e.event.keyCode === 32\n || e.event.keyCode === 13)) {\n var startContainer = e.item.selection.range.startContainer;\n startContainer.textContent = this.removeText(startContainer.textContent, e.item.text);\n }\n else {\n var startIndex = e.item.action === 'Paste' ? anchor.childNodes[0].textContent.length : 0;\n e.item.selection.setSelectionText(this.parent.currentDocument, anchor.childNodes[0], anchor.childNodes[0], startIndex, anchor.childNodes[0].textContent.length);\n }\n }\n else {\n this.createLinkNode(e);\n }\n }\n if (e.callBack) {\n e.callBack({\n requestType: 'Links',\n editorMode: 'HTML',\n event: e.event,\n range: this.parent.nodeSelection.getRange(this.parent.currentDocument),\n elements: this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument)\n });\n }\n };\n LinkCommand.prototype.createLinkNode = function (e) {\n var domSelection = new NodeSelection();\n var nodeCutter = new NodeCutter();\n var range = domSelection.getRange(this.parent.currentDocument);\n var nodes = this.getSelectionNodes(domSelection.getNodeCollection(range));\n var save = domSelection.save(range, this.parent.currentDocument);\n var txtArray = [];\n var inlineNodes = [];\n var currentNode;\n var removeNodes = [];\n var anchorNodes = [];\n var finalinlineNodes = [];\n var cloneNode;\n for (var index = 0; index < nodes.length; index++) {\n nodes[index] = nodeCutter.GetSpliceNode(range, nodes[index]);\n txtArray[index] = nodes[index];\n }\n for (var i = 0; i < txtArray.length; i++) {\n var check = true;\n currentNode = txtArray[i];\n while (check === true) {\n if (currentNode.parentNode.nodeName === 'A') {\n var anchorEle = currentNode.parentNode;\n currentNode.parentNode.parentNode.insertBefore(anchorEle.firstChild, anchorEle);\n currentNode.parentNode.removeChild(anchorEle);\n }\n if (this.isBlockNode(currentNode.parentNode) || txtArray.length === 0 || i === 0 || i === txtArray.length - 1\n || range.startContainer.nodeType === 3) {\n inlineNodes[i] = currentNode;\n check = false;\n }\n else {\n currentNode = currentNode.parentNode;\n }\n }\n }\n for (var i = 0, j_1 = 0; i < inlineNodes.length; i++) {\n if (i === 0) {\n finalinlineNodes[j_1] = inlineNodes[i];\n }\n if (inlineNodes.length > 1 && i < inlineNodes.length - 1) {\n if ((inlineNodes[i].parentElement === inlineNodes[i + 1].parentElement) && (inlineNodes[i] === inlineNodes[i + 1])) {\n continue;\n }\n else {\n finalinlineNodes[j_1 + 1] = inlineNodes[i + 1];\n j_1++;\n }\n }\n }\n var j = 0;\n anchorNodes[j] = this.createAchorNode(e);\n for (var i = 0; i < finalinlineNodes.length; i++) {\n if (i === 0) {\n cloneNode = finalinlineNodes[i].cloneNode(true);\n anchorNodes[i].appendChild(cloneNode);\n }\n if (i < finalinlineNodes.length - 1) {\n if (finalinlineNodes[i].parentNode === finalinlineNodes[i + 1].parentNode) {\n var cln = finalinlineNodes[i + 1].cloneNode(true);\n anchorNodes[j].appendChild(cln);\n }\n else {\n j = j + 1;\n anchorNodes[j] = this.createAchorNode(e);\n cloneNode = finalinlineNodes[i + 1].cloneNode(true);\n anchorNodes[j].appendChild(cloneNode);\n }\n }\n }\n this.parent.nodeSelection.setRange(document, save.range);\n for (var i = 0, j_2 = 0, k = 0; i <= finalinlineNodes.length; i++) {\n if (i === 0) {\n finalinlineNodes[i].parentNode.insertBefore(anchorNodes[j_2], finalinlineNodes[i].nextSibling);\n if (this.parent.domNode.blockNodes().length === 1) {\n this.parent.nodeSelection.setSelectionNode(this.parent.currentDocument, anchorNodes[j_2]);\n }\n removeNodes[k] = finalinlineNodes[i];\n k++;\n }\n if (i < finalinlineNodes.length - 1) {\n if (finalinlineNodes[i].parentNode === finalinlineNodes[i + 1].parentNode) {\n removeNodes[k] = finalinlineNodes[i + 1];\n k++;\n }\n else {\n j_2 = j_2 + 1;\n finalinlineNodes[i + 1].parentNode.insertBefore(anchorNodes[j_2], finalinlineNodes[i + 1]);\n removeNodes[k] = finalinlineNodes[i + 1];\n k++;\n }\n }\n }\n for (var i = 0; i < removeNodes.length; i++) {\n if (removeNodes[i].parentNode) {\n removeNodes[i].parentNode.removeChild(removeNodes[i]);\n }\n }\n };\n LinkCommand.prototype.createAchorNode = function (e) {\n var anchorEle = createElement('a', {\n className: 'e-rte-anchor',\n attrs: {\n href: e.item.url,\n title: isNOU(e.item.title) || e.item.title === '' ? e.item.url : e.item.title\n }\n });\n if (!isNOU(e.item.target)) {\n anchorEle.setAttribute('target', e.item.target);\n }\n return anchorEle;\n };\n LinkCommand.prototype.getSelectionNodes = function (nodeCollection) {\n nodeCollection = nodeCollection.reverse();\n for (var index = 0; index < nodeCollection.length; index++) {\n if (nodeCollection[index].nodeType !== 3 || nodeCollection[index].textContent.trim() === '') {\n if (nodeCollection[index].nodeName !== 'IMG') {\n nodeCollection.splice(index, 1);\n index--;\n }\n }\n }\n return nodeCollection.reverse();\n };\n LinkCommand.prototype.isBlockNode = function (element) {\n return (!!element && (element.nodeType === Node.ELEMENT_NODE && CONSTANT.BLOCK_TAGS.indexOf(element.tagName.toLowerCase()) >= 0));\n };\n LinkCommand.prototype.removeText = function (text, val) {\n var arr = text.split(' ');\n for (var i = 0; i < arr.length; i++) {\n if (arr[i] === val) {\n arr.splice(i, 1);\n i--;\n }\n }\n return arr.join(' ') + ' ';\n };\n LinkCommand.prototype.openLink = function (e) {\n document.defaultView.open(e.item.url, e.item.target);\n this.callBack(e);\n };\n LinkCommand.prototype.removeLink = function (e) {\n var blockNodes = this.parent.domNode.blockNodes();\n if (blockNodes.length < 2) {\n this.parent.domNode.setMarker(e.item.selection);\n var closestAnchor = closest(e.item.selectParent[0], 'a');\n var selectParent = closestAnchor ? closestAnchor : e.item.selectParent[0];\n var parent_1 = selectParent.parentNode;\n var child = [];\n for (; selectParent.firstChild; null) {\n child.push(parent_1.insertBefore(selectParent.firstChild, selectParent));\n }\n parent_1.removeChild(selectParent);\n if (child && child.length === 1) {\n e.item.selection.startContainer = e.item.selection.getNodeArray(child[child.length - 1], true);\n e.item.selection.endContainer = e.item.selection.startContainer;\n }\n e.item.selection = this.parent.domNode.saveMarker(e.item.selection);\n }\n else {\n for (var i = 0; i < blockNodes.length; i++) {\n var linkNode = blockNodes[i].querySelectorAll('a');\n for (var j = 0; j < linkNode.length; j++) {\n if (document.getSelection().containsNode(linkNode[j], true)) {\n linkNode[j].outerHTML = linkNode[j].innerHTML;\n }\n }\n }\n }\n e.item.selection.restore();\n this.callBack(e);\n };\n LinkCommand.prototype.callBack = function (e) {\n if (e.callBack) {\n e.callBack({\n requestType: e.item.subCommand,\n editorMode: 'HTML',\n event: e.event,\n range: this.parent.nodeSelection.getRange(this.parent.currentDocument),\n elements: this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument)\n });\n }\n };\n return LinkCommand;\n}());\nexport { LinkCommand };\n","import * as CONSTANT from './../base/constant';\nimport { setStyleAttribute, closest } from '@syncfusion/ej2-base';\nimport * as EVENTS from './../../common/constant';\nimport { isIDevice, setEditFrameFocus } from '../../common/util';\n/**\n * Formats internal component\n *\n * @hidden\n\n */\nvar Alignments = /** @class */ (function () {\n /**\n * Constructor for creating the Formats plugin\n *\n * @param {EditorManager} parent - specifies the parent element.\n * @returns {void}\n * @hidden\n\n */\n function Alignments(parent) {\n this.alignments = {\n 'JustifyLeft': 'left',\n 'JustifyCenter': 'center',\n 'JustifyRight': 'right',\n 'JustifyFull': 'justify'\n };\n this.parent = parent;\n this.addEventListener();\n }\n Alignments.prototype.addEventListener = function () {\n this.parent.observer.on(CONSTANT.ALIGNMENT_TYPE, this.applyAlignment, this);\n this.parent.observer.on(EVENTS.KEY_DOWN_HANDLER, this.onKeyDown, this);\n };\n Alignments.prototype.onKeyDown = function (e) {\n switch (e.event.action) {\n case 'justify-center':\n this.applyAlignment({ subCommand: 'JustifyCenter', callBack: e.callBack });\n e.event.preventDefault();\n break;\n case 'justify-full':\n this.applyAlignment({ subCommand: 'JustifyFull', callBack: e.callBack });\n e.event.preventDefault();\n break;\n case 'justify-left':\n this.applyAlignment({ subCommand: 'JustifyLeft', callBack: e.callBack });\n e.event.preventDefault();\n break;\n case 'justify-right':\n this.applyAlignment({ subCommand: 'JustifyRight', callBack: e.callBack });\n e.event.preventDefault();\n break;\n }\n };\n Alignments.prototype.getTableNode = function (range) {\n var startNode = range.startContainer.nodeType === Node.ELEMENT_NODE\n ? range.startContainer : range.startContainer.parentNode;\n var cellNode = closest(startNode, 'td,th');\n return [cellNode];\n };\n Alignments.prototype.applyAlignment = function (e) {\n var isTableAlign = e.value === 'Table' ? true : false;\n var range = this.parent.nodeSelection.getRange(this.parent.currentDocument);\n var save = this.parent.nodeSelection.save(range, this.parent.currentDocument);\n if (!isTableAlign) {\n this.parent.domNode.setMarker(save);\n var alignmentNodes = this.parent.domNode.blockNodes();\n for (var i = 0; i < alignmentNodes.length; i++) {\n var parentNode = alignmentNodes[i];\n setStyleAttribute(parentNode, { 'text-align': this.alignments[e.subCommand] });\n }\n var imageTags = this.parent.domNode.getImageTagInSelection();\n for (var i = 0; i < imageTags.length; i++) {\n var elementNode = [];\n elementNode.push(imageTags[i]);\n this.parent.imgObj.imageCommand({\n item: {\n selectNode: elementNode\n },\n subCommand: e.subCommand,\n value: e.subCommand,\n callBack: e.callBack,\n selector: e.selector\n });\n }\n this.parent.editableElement.focus();\n save = this.parent.domNode.saveMarker(save);\n if (isIDevice()) {\n setEditFrameFocus(this.parent.editableElement, e.selector);\n }\n save.restore();\n }\n else {\n setStyleAttribute(this.getTableNode(range)[0], { 'text-align': this.alignments[e.subCommand] });\n }\n if (e.callBack) {\n e.callBack({\n requestType: e.subCommand,\n editorMode: 'HTML',\n event: e.event,\n range: this.parent.nodeSelection.getRange(this.parent.currentDocument),\n elements: (isTableAlign ? this.getTableNode(range) : this.parent.domNode.blockNodes())\n });\n }\n };\n return Alignments;\n}());\nexport { Alignments };\n","import * as CONSTANT from './../base/constant';\nimport * as EVENTS from './../../common/constant';\nimport { isIDevice, setEditFrameFocus } from '../../common/util';\n/**\n * Indents internal component\n *\n * @hidden\n\n */\nvar Indents = /** @class */ (function () {\n /**\n * Constructor for creating the Formats plugin\n *\n * @param {EditorManager} parent - specifies the parent element\n * @hidden\n\n */\n function Indents(parent) {\n this.indentValue = 20;\n this.parent = parent;\n this.addEventListener();\n }\n Indents.prototype.addEventListener = function () {\n this.parent.observer.on(CONSTANT.INDENT_TYPE, this.applyIndents, this);\n this.parent.observer.on(EVENTS.KEY_DOWN_HANDLER, this.onKeyDown, this);\n };\n Indents.prototype.onKeyDown = function (e) {\n switch (e.event.action) {\n case 'indents':\n this.applyIndents({ subCommand: 'Indent', callBack: e.callBack });\n e.event.preventDefault();\n break;\n case 'outdents':\n this.applyIndents({ subCommand: 'Outdent', callBack: e.callBack });\n e.event.preventDefault();\n break;\n }\n };\n Indents.prototype.applyIndents = function (e) {\n var editEle = this.parent.editableElement;\n var isRtl = editEle.classList.contains('e-rtl');\n var range = this.parent.nodeSelection.getRange(this.parent.currentDocument);\n var save = this.parent.nodeSelection.save(range, this.parent.currentDocument);\n this.parent.domNode.setMarker(save);\n var indentsNodes = this.parent.domNode.blockNodes();\n var parentNodes = indentsNodes.slice();\n var listsNodes = [];\n for (var i = 0; i < parentNodes.length; i++) {\n if (parentNodes[i].tagName !== 'LI' && 'LI' === parentNodes[i].parentNode.tagName) {\n indentsNodes.splice(indentsNodes.indexOf(parentNodes[i]), 1);\n listsNodes.push(parentNodes[i].parentNode);\n }\n else if (parentNodes[i].tagName === 'LI') {\n indentsNodes.splice(indentsNodes.indexOf(parentNodes[i]), 1);\n listsNodes.push(parentNodes[i]);\n }\n }\n if (listsNodes.length > 0) {\n this.parent.observer.notify(EVENTS.KEY_DOWN_HANDLER, {\n event: {\n preventDefault: function () {\n return;\n },\n stopPropagation: function () {\n return;\n },\n shiftKey: (e.subCommand === 'Indent' ? false : true),\n which: 9,\n action: 'indent'\n },\n ignoreDefault: true\n });\n }\n for (var i = 0; i < indentsNodes.length; i++) {\n var parentNode = indentsNodes[i];\n var marginLeftOrRight = isRtl ? parentNode.style.marginRight : parentNode.style.marginLeft;\n var indentsValue = void 0;\n if (e.subCommand === 'Indent') {\n /* eslint-disable */\n indentsValue = marginLeftOrRight === '' ? this.indentValue + 'px' : parseInt(marginLeftOrRight, null) + this.indentValue + 'px';\n isRtl ? (parentNode.style.marginRight = indentsValue) : (parentNode.style.marginLeft = indentsValue);\n }\n else {\n indentsValue = (marginLeftOrRight === '' || marginLeftOrRight === '0px') ? '' : parseInt(marginLeftOrRight, null) - this.indentValue + 'px';\n isRtl ? (parentNode.style.marginRight = indentsValue) : (parentNode.style.marginLeft = indentsValue);\n /* eslint-enable */\n }\n }\n editEle.focus();\n if (isIDevice()) {\n setEditFrameFocus(editEle, e.selector);\n }\n save = this.parent.domNode.saveMarker(save);\n save.restore();\n if (e.callBack) {\n e.callBack({\n requestType: e.subCommand,\n editorMode: 'HTML',\n event: e.event,\n range: this.parent.nodeSelection.getRange(this.parent.currentDocument),\n elements: this.parent.domNode.blockNodes()\n });\n }\n };\n return Indents;\n}());\nexport { Indents };\n","/**\n * Rich Text Editor classes defined here.\n */\n/**\n * @hidden\n\n */\nexport var CLASS_IMAGE_RIGHT = 'e-imgright';\nexport var CLASS_IMAGE_LEFT = 'e-imgleft';\nexport var CLASS_IMAGE_CENTER = 'e-imgcenter';\nexport var CLASS_IMAGE_BREAK = 'e-imgbreak';\nexport var CLASS_CAPTION = 'e-img-caption';\nexport var CLASS_RTE_CAPTION = 'e-rte-img-caption';\nexport var CLASS_CAPTION_INLINE = 'e-caption-inline';\nexport var CLASS_IMAGE_INLINE = 'e-imginline';\n","import { createElement, isNullOrUndefined as isNOU, detach, closest, addClass, removeClass, select, Browser, formatUnit } from '@syncfusion/ej2-base';\nimport * as CONSTANT from './../base/constant';\nimport * as classes from './../base/classes';\nimport { InsertHtml } from './inserthtml';\n/**\n * Link internal component\n *\n * @hidden\n\n */\nvar ImageCommand = /** @class */ (function () {\n /**\n * Constructor for creating the Formats plugin\n *\n * @param {EditorManager} parent - specifies the parent element\n * @hidden\n\n */\n function ImageCommand(parent) {\n this.parent = parent;\n this.addEventListener();\n }\n ImageCommand.prototype.addEventListener = function () {\n this.parent.observer.on(CONSTANT.IMAGE, this.imageCommand, this);\n };\n /**\n * imageCommand method\n *\n * @param {IHtmlItem} e - specifies the element\n * @returns {void}\n * @hidden\n\n */\n ImageCommand.prototype.imageCommand = function (e) {\n switch (e.value.toString().toLowerCase()) {\n case 'image':\n case 'replace':\n this.createImage(e);\n break;\n case 'insertlink':\n this.insertImageLink(e);\n break;\n case 'openimagelink':\n this.openImageLink(e);\n break;\n case 'editimagelink':\n this.editImageLink(e);\n break;\n case 'removeimagelink':\n this.removeImageLink(e);\n break;\n case 'remove':\n this.removeImage(e);\n break;\n case 'alttext':\n this.insertAltTextImage(e);\n break;\n case 'dimension':\n this.imageDimension(e);\n break;\n case 'caption':\n this.imageCaption(e);\n break;\n case 'justifyleft':\n this.imageJustifyLeft(e);\n break;\n case 'justifycenter':\n this.imageJustifyCenter(e);\n break;\n case 'justifyright':\n this.imageJustifyRight(e);\n break;\n case 'inline':\n this.imageInline(e);\n break;\n case 'break':\n this.imageBreak(e);\n break;\n }\n };\n ImageCommand.prototype.createImage = function (e) {\n var _this = this;\n var isReplaced = false;\n e.item.url = isNOU(e.item.url) || e.item.url === 'undefined' ? e.item.src : e.item.url;\n if (!isNOU(e.item.selectParent) && e.item.selectParent[0].tagName === 'IMG') {\n var imgEle = e.item.selectParent[0];\n this.setStyle(imgEle, e);\n isReplaced = true;\n }\n else {\n var imgElement = createElement('img');\n this.setStyle(imgElement, e);\n if (!isNOU(e.item.selection)) {\n e.item.selection.restore();\n }\n if (!isNOU(e.selector) && e.selector === 'pasteCleanupModule') {\n e.callBack({ requestType: 'Images',\n editorMode: 'HTML',\n event: e.event,\n range: this.parent.nodeSelection.getRange(this.parent.currentDocument),\n elements: [imgElement]\n });\n }\n else {\n InsertHtml.Insert(this.parent.currentDocument, imgElement, this.parent.editableElement);\n }\n }\n if (e.callBack && (isNOU(e.selector) || !isNOU(e.selector) && e.selector !== 'pasteCleanupModule')) {\n var selectedNode = this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument)[0];\n var imgElm_1 = (e.value === 'Replace' || isReplaced) ? e.item.selectParent[0] :\n (Browser.isIE ? selectedNode.previousSibling : selectedNode.previousElementSibling);\n imgElm_1.addEventListener('load', function () {\n if (e.value !== 'Replace' || !isReplaced) {\n e.callBack({\n requestType: 'Images',\n editorMode: 'HTML',\n event: e.event,\n range: _this.parent.nodeSelection.getRange(_this.parent.currentDocument),\n elements: [imgElm_1]\n });\n }\n });\n }\n };\n ImageCommand.prototype.setStyle = function (imgElement, e) {\n if (!isNOU(e.item.url)) {\n imgElement.setAttribute('src', e.item.url);\n }\n imgElement.setAttribute('class', 'e-rte-image' + (isNOU(e.item.cssClass) ? '' : ' ' + e.item.cssClass));\n if (!isNOU(e.item.altText)) {\n imgElement.setAttribute('alt', e.item.altText);\n }\n if (!isNOU(e.item.width) && !isNOU(e.item.width.width)) {\n imgElement.setAttribute('width', this.calculateStyleValue(e.item.width.width));\n }\n if (!isNOU(e.item.height) && !isNOU(e.item.height.height)) {\n imgElement.setAttribute('height', this.calculateStyleValue(e.item.height.height));\n }\n if (!isNOU(e.item.width) && !isNOU(e.item.width.minWidth)) {\n imgElement.style.minWidth = this.calculateStyleValue(e.item.width.minWidth);\n }\n if (!isNOU(e.item.width) && !isNOU(e.item.width.maxWidth)) {\n imgElement.style.maxWidth = this.calculateStyleValue(e.item.width.maxWidth);\n }\n if (!isNOU(e.item.height) && !isNOU(e.item.height.minHeight)) {\n imgElement.style.minHeight = this.calculateStyleValue(e.item.height.minHeight);\n }\n if (!isNOU(e.item.height) && !isNOU(e.item.height.maxHeight)) {\n imgElement.style.maxHeight = this.calculateStyleValue(e.item.height.maxHeight);\n }\n };\n ImageCommand.prototype.calculateStyleValue = function (value) {\n var styleValue;\n if (typeof (value) === 'string') {\n if (value.indexOf('px') || value.indexOf('%') || value.indexOf('auto')) {\n styleValue = value;\n }\n else {\n styleValue = value + 'px';\n }\n }\n else {\n styleValue = value + 'px';\n }\n return styleValue;\n };\n ImageCommand.prototype.insertImageLink = function (e) {\n var anchor = createElement('a', {\n attrs: {\n href: e.item.url\n }\n });\n if (e.item.selectNode[0].parentElement.classList.contains('e-img-wrap')) {\n e.item.selection.restore();\n anchor.setAttribute('contenteditable', 'true');\n }\n anchor.appendChild(e.item.selectNode[0]);\n if (!isNOU(e.item.target)) {\n anchor.setAttribute('target', e.item.target);\n }\n InsertHtml.Insert(this.parent.currentDocument, anchor, this.parent.editableElement);\n this.callBack(e);\n };\n ImageCommand.prototype.openImageLink = function (e) {\n document.defaultView.open(e.item.url, e.item.target);\n this.callBack(e);\n };\n ImageCommand.prototype.removeImageLink = function (e) {\n var selectParent = e.item.selectParent[0];\n if (selectParent.classList.contains('e-img-caption')) {\n var capImgWrap = select('.e-img-wrap', selectParent);\n var textEle = select('.e-img-inner', selectParent);\n var newTextEle = textEle.cloneNode(true);\n detach(select('a', selectParent));\n detach(textEle);\n capImgWrap.appendChild(e.item.insertElement);\n capImgWrap.appendChild(newTextEle);\n }\n else {\n detach(selectParent);\n if (Browser.isIE) {\n e.item.selection.restore();\n }\n InsertHtml.Insert(this.parent.currentDocument, e.item.insertElement, this.parent.editableElement);\n }\n this.callBack(e);\n };\n ImageCommand.prototype.editImageLink = function (e) {\n e.item.selectNode[0].parentElement.href = e.item.url;\n if (isNOU(e.item.target)) {\n e.item.selectNode[0].parentElement.removeAttribute('target');\n }\n else {\n e.item.selectNode[0].parentElement.target = e.item.target;\n }\n this.callBack(e);\n };\n ImageCommand.prototype.removeImage = function (e) {\n if (closest(e.item.selectNode[0], 'a')) {\n if (e.item.selectNode[0].parentElement.nodeName === 'A' && !isNOU(e.item.selectNode[0].parentElement.innerText)) {\n if (!isNOU(closest(e.item.selectNode[0], '.' + classes.CLASS_CAPTION))) {\n detach(closest(e.item.selectNode[0], '.' + classes.CLASS_CAPTION));\n }\n else {\n detach(e.item.selectNode[0]);\n }\n }\n else {\n detach(closest(e.item.selectNode[0], 'a'));\n }\n }\n else if (!isNOU(closest(e.item.selectNode[0], '.' + classes.CLASS_CAPTION))) {\n detach(closest(e.item.selectNode[0], '.' + classes.CLASS_CAPTION));\n }\n else {\n detach(e.item.selectNode[0]);\n }\n this.callBack(e);\n };\n ImageCommand.prototype.insertAltTextImage = function (e) {\n e.item.selectNode[0].setAttribute('alt', e.item.altText);\n this.callBack(e);\n };\n ImageCommand.prototype.imageDimension = function (e) {\n var selectNode = e.item.selectNode[0];\n selectNode.style.height = '';\n selectNode.style.width = '';\n if (e.item.width !== 'auto') {\n selectNode.style.width = formatUnit(e.item.width);\n }\n else {\n selectNode.removeAttribute('width');\n }\n if (e.item.height !== 'auto') {\n selectNode.style.height = formatUnit(e.item.height);\n }\n else {\n selectNode.removeAttribute('height');\n }\n this.callBack(e);\n };\n ImageCommand.prototype.imageCaption = function (e) {\n InsertHtml.Insert(this.parent.currentDocument, e.item.insertElement, this.parent.editableElement);\n this.callBack(e);\n };\n ImageCommand.prototype.imageJustifyLeft = function (e) {\n var selectNode = e.item.selectNode[0];\n if (!isNOU(selectNode)) {\n selectNode.removeAttribute('class');\n addClass([selectNode], 'e-rte-image');\n if (!isNOU(closest(selectNode, '.' + classes.CLASS_CAPTION))) {\n removeClass([closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_RIGHT);\n addClass([closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_LEFT);\n }\n if (selectNode.parentElement.nodeName === 'A') {\n removeClass([selectNode.parentElement], classes.CLASS_IMAGE_RIGHT);\n addClass([selectNode.parentElement], classes.CLASS_IMAGE_LEFT);\n addClass([selectNode], classes.CLASS_IMAGE_LEFT);\n }\n else {\n addClass([selectNode], classes.CLASS_IMAGE_LEFT);\n }\n this.callBack(e);\n }\n };\n ImageCommand.prototype.imageJustifyCenter = function (e) {\n var selectNode = e.item.selectNode[0];\n if (!isNOU(selectNode)) {\n selectNode.removeAttribute('class');\n addClass([selectNode], 'e-rte-image');\n if (!isNOU(closest(selectNode, '.' + classes.CLASS_CAPTION))) {\n removeClass([closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_LEFT);\n removeClass([closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_RIGHT);\n addClass([closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_CENTER);\n }\n if (selectNode.parentElement.nodeName === 'A') {\n removeClass([selectNode.parentElement], classes.CLASS_IMAGE_LEFT);\n removeClass([selectNode.parentElement], classes.CLASS_IMAGE_RIGHT);\n addClass([selectNode.parentElement], classes.CLASS_IMAGE_CENTER);\n addClass([selectNode], classes.CLASS_IMAGE_CENTER);\n }\n else {\n addClass([selectNode], classes.CLASS_IMAGE_CENTER);\n }\n this.callBack(e);\n }\n };\n ImageCommand.prototype.imageJustifyRight = function (e) {\n var selectNode = e.item.selectNode[0];\n if (!isNOU(selectNode)) {\n selectNode.removeAttribute('class');\n addClass([selectNode], 'e-rte-image');\n if (!isNOU(closest(selectNode, '.' + classes.CLASS_CAPTION))) {\n removeClass([closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_LEFT);\n addClass([closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_RIGHT);\n }\n if (selectNode.parentElement.nodeName === 'A') {\n removeClass([selectNode.parentElement], classes.CLASS_IMAGE_LEFT);\n addClass([selectNode.parentElement], classes.CLASS_IMAGE_RIGHT);\n addClass([selectNode], classes.CLASS_IMAGE_RIGHT);\n }\n else {\n addClass([selectNode], classes.CLASS_IMAGE_RIGHT);\n }\n this.callBack(e);\n }\n };\n ImageCommand.prototype.imageInline = function (e) {\n var selectNode = e.item.selectNode[0];\n selectNode.removeAttribute('class');\n addClass([selectNode], 'e-rte-image');\n addClass([selectNode], classes.CLASS_IMAGE_INLINE);\n if (!isNOU(closest(selectNode, '.' + classes.CLASS_CAPTION))) {\n removeClass([closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_BREAK);\n removeClass([closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_CENTER);\n removeClass([closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_LEFT);\n removeClass([closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_RIGHT);\n addClass([closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_CAPTION_INLINE);\n }\n this.callBack(e);\n };\n ImageCommand.prototype.imageBreak = function (e) {\n var selectNode = e.item.selectNode[0];\n selectNode.removeAttribute('class');\n addClass([selectNode], classes.CLASS_IMAGE_BREAK);\n addClass([selectNode], 'e-rte-image');\n if (!isNOU(closest(selectNode, '.' + classes.CLASS_CAPTION))) {\n removeClass([closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_CAPTION_INLINE);\n removeClass([closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_CENTER);\n removeClass([closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_LEFT);\n removeClass([closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_RIGHT);\n addClass([closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_BREAK);\n }\n this.callBack(e);\n };\n ImageCommand.prototype.callBack = function (e) {\n if (e.callBack) {\n e.callBack({\n requestType: e.item.subCommand,\n editorMode: 'HTML',\n event: e.event,\n range: this.parent.nodeSelection.getRange(this.parent.currentDocument),\n elements: this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument)\n });\n }\n };\n return ImageCommand;\n}());\nexport { ImageCommand };\n","import { createElement, closest, detach, Browser, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';\nimport * as CONSTANT from './../base/constant';\nimport { InsertHtml } from './inserthtml';\n/**\n * Link internal component\n *\n * @hidden\n\n */\nvar TableCommand = /** @class */ (function () {\n /**\n * Constructor for creating the Formats plugin\n *\n * @param {EditorManager} parent - specifies the parent element\n * @hidden\n\n */\n function TableCommand(parent) {\n this.parent = parent;\n this.addEventListener();\n }\n TableCommand.prototype.addEventListener = function () {\n this.parent.observer.on(CONSTANT.TABLE, this.createTable, this);\n this.parent.observer.on(CONSTANT.INSERT_ROW, this.insertRow, this);\n this.parent.observer.on(CONSTANT.INSERT_COLUMN, this.insertColumn, this);\n this.parent.observer.on(CONSTANT.DELETEROW, this.deleteRow, this);\n this.parent.observer.on(CONSTANT.DELETECOLUMN, this.deleteColumn, this);\n this.parent.observer.on(CONSTANT.REMOVETABLE, this.removeTable, this);\n this.parent.observer.on(CONSTANT.TABLEHEADER, this.tableHeader, this);\n this.parent.observer.on(CONSTANT.TABLE_VERTICAL_ALIGN, this.tableVerticalAlign, this);\n this.parent.observer.on(CONSTANT.TABLE_MERGE, this.cellMerge, this);\n this.parent.observer.on(CONSTANT.TABLE_HORIZONTAL_SPLIT, this.HorizontalSplit, this);\n this.parent.observer.on(CONSTANT.TABLE_VERTICAL_SPLIT, this.VerticalSplit, this);\n this.parent.observer.on(CONSTANT.TABLE_MOVE, this.tableMove, this);\n };\n TableCommand.prototype.createTable = function (e) {\n var table = createElement('table', { className: 'e-rte-table' });\n var tblBody = createElement('tbody');\n if (!isNOU(e.item.width.width)) {\n table.style.width = this.calculateStyleValue(e.item.width.width);\n }\n if (!isNOU(e.item.width.minWidth)) {\n table.style.minWidth = this.calculateStyleValue(e.item.width.minWidth);\n }\n if (!isNOU(e.item.width.maxWidth)) {\n table.style.maxWidth = this.calculateStyleValue(e.item.width.maxWidth);\n }\n var tdWid = parseInt(e.item.width.width, 10) > 100 ?\n 100 / e.item.columns : parseInt(e.item.width.width, 10) / e.item.columns;\n for (var i = 0; i < e.item.rows; i++) {\n var row = createElement('tr');\n for (var j = 0; j < e.item.columns; j++) {\n var cell = createElement('td');\n cell.appendChild(createElement('br'));\n cell.style.width = tdWid + '%';\n row.appendChild(cell);\n }\n tblBody.appendChild(row);\n }\n table.appendChild(tblBody);\n e.item.selection.restore();\n InsertHtml.Insert(this.parent.currentDocument, table, this.parent.editableElement);\n this.removeEmptyNode();\n e.item.selection.setSelectionText(this.parent.currentDocument, table.querySelector('td'), table.querySelector('td'), 0, 0);\n if (table.nextElementSibling === null) {\n var insertElem = void 0;\n if (e.enterAction === 'DIV') {\n insertElem = createElement('div');\n insertElem.appendChild(createElement('br'));\n }\n else if (e.enterAction === 'BR') {\n insertElem = createElement('br');\n }\n else {\n insertElem = createElement('p');\n insertElem.appendChild(createElement('br'));\n }\n this.insertAfter(insertElem, table);\n }\n table.querySelector('td').classList.add('e-cell-select');\n if (e.callBack) {\n e.callBack({\n requestType: 'Table',\n editorMode: 'HTML',\n event: e.event,\n range: this.parent.nodeSelection.getRange(this.parent.currentDocument),\n elements: [table]\n });\n }\n return table;\n };\n TableCommand.prototype.calculateStyleValue = function (value) {\n var styleValue;\n if (typeof (value) === 'string') {\n if (value.indexOf('px') || value.indexOf('%') || value.indexOf('auto')) {\n styleValue = value;\n }\n else {\n styleValue = value + 'px';\n }\n }\n else {\n styleValue = value + 'px';\n }\n return styleValue;\n };\n TableCommand.prototype.removeEmptyNode = function () {\n var emptyUl = this.parent.editableElement.querySelectorAll('ul:empty, ol:empty');\n for (var i = 0; i < emptyUl.length; i++) {\n detach(emptyUl[i]);\n }\n var emptyLiChild = this.parent.editableElement.querySelectorAll('li *:empty');\n for (var i = 0; i < emptyLiChild.length; i++) {\n detach(emptyLiChild[i]);\n if (emptyLiChild.length === i + 1) {\n emptyLiChild = this.parent.editableElement.querySelectorAll('li *:empty');\n i = -1;\n }\n }\n var emptyLi = this.parent.editableElement.querySelectorAll('li:empty');\n for (var i = 0; i < emptyLi.length; i++) {\n detach(emptyLi[i]);\n }\n };\n TableCommand.prototype.insertAfter = function (newNode, referenceNode) {\n referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);\n };\n TableCommand.prototype.getSelectedCellMinMaxIndex = function (e) {\n var selectedCells = this.curTable.querySelectorAll('.e-cell-select');\n var a = 0;\n var minI = e.length;\n var maxI = 0;\n var minJ = e[0].length;\n var maxJ = 0;\n //eslint-disable-next-line\n for (var i = 0; a < selectedCells.length; a++) {\n var selectedCellIndex = this.getCorrespondingIndex(selectedCells[a], e);\n var minMaxIndex = this.FindIndex(selectedCellIndex[0], selectedCellIndex[1], e);\n //eslint-disable-next-line\n minI = Math.min(selectedCellIndex[0], minI),\n maxI = Math.max(minMaxIndex[0], maxI),\n minJ = Math.min(selectedCellIndex[1], minJ),\n maxJ = Math.max(minMaxIndex[1], maxJ);\n }\n return {\n startRow: minI,\n endRow: maxI,\n startColumn: minJ,\n endColumn: maxJ\n };\n };\n TableCommand.prototype.insertRow = function (e) {\n var isBelow = e.item.subCommand === 'InsertRowBefore' ? false : true;\n var selectedCell = e.item.selection.range.startContainer;\n if (!(selectedCell.nodeName === 'TH' || selectedCell.nodeName === 'TD')) {\n selectedCell = closest(selectedCell.parentElement, 'td,th');\n }\n if (selectedCell.nodeName.toLowerCase() === 'th' && e.item.subCommand === 'InsertRowBefore') {\n return;\n }\n this.curTable = closest(this.parent.nodeSelection.range.startContainer.parentElement, 'table');\n if (this.curTable.querySelectorAll('.e-cell-select').length === 0) {\n var lastRow = this.curTable.rows[this.curTable.rows.length - 1];\n var cloneRow = lastRow.cloneNode(true);\n cloneRow.removeAttribute('rowspan');\n this.insertAfter(cloneRow, lastRow);\n }\n else {\n var allCells = this.getCorrespondingColumns();\n var minMaxIndex = this.getSelectedCellMinMaxIndex(allCells);\n var minVal = isBelow ? minMaxIndex.endRow : minMaxIndex.startRow;\n var newRow = createElement('tr');\n var isHeaderSelect = this.curTable.querySelectorAll('th.e-cell-select').length > 0;\n for (var i = 0; i < allCells[minVal].length; i++) {\n if (isBelow && minVal < allCells.length - 1 && allCells[minVal][i] === allCells[minVal + 1][i] ||\n !isBelow && 0 < minVal && allCells[minVal][i] === allCells[minVal - 1][i]) {\n if (0 === i || 0 < i && allCells[minVal][i] !== allCells[minVal][i - 1]) {\n allCells[minVal][i].setAttribute('rowspan', (parseInt(allCells[minVal][i].getAttribute('rowspan'), 10) + 1).toString());\n }\n }\n else {\n var tdElement = createElement('td');\n tdElement.appendChild(createElement('br'));\n newRow.appendChild(tdElement);\n tdElement.setAttribute('style', allCells[(isHeaderSelect && isBelow) ? (minVal + 1) : minVal][i].getAttribute('style'));\n }\n }\n // eslint-disable-next-line\n var selectedRow = void 0;\n if (isHeaderSelect && isBelow) {\n selectedRow = this.curTable.querySelector('tbody').childNodes[0];\n }\n else {\n selectedRow = this.curTable.rows[minVal];\n }\n // eslint-disable-next-line\n (e.item.subCommand === 'InsertRowBefore') ? selectedRow.parentElement.insertBefore(newRow, selectedRow) :\n (isHeaderSelect ? selectedRow.parentElement.insertBefore(newRow, selectedRow) :\n this.insertAfter(newRow, selectedRow));\n }\n e.item.selection.setSelectionText(this.parent.currentDocument, e.item.selection.range.startContainer, e.item.selection.range.startContainer, 0, 0);\n if (e.callBack) {\n e.callBack({\n requestType: e.item.subCommand,\n editorMode: 'HTML',\n event: e.event,\n range: this.parent.nodeSelection.getRange(this.parent.currentDocument),\n elements: this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument)\n });\n }\n };\n TableCommand.prototype.insertColumn = function (e) {\n var selectedCell = e.item.selection.range.startContainer;\n if (!(selectedCell.nodeName === 'TH' || selectedCell.nodeName === 'TD')) {\n selectedCell = closest(selectedCell.parentElement, 'td,th');\n }\n var curRow = closest(selectedCell, 'tr');\n var curCell;\n var allRows = closest((curRow), 'table').rows;\n var colIndex = Array.prototype.slice.call(curRow.querySelectorAll(':scope > td, :scope > th')).indexOf(selectedCell);\n var previousWidth = parseInt(e.item.width, 10) / (curRow.querySelectorAll(':scope > td, :scope > th').length);\n var currentWidth = parseInt(e.item.width, 10) / (curRow.querySelectorAll(':scope > td, :scope > th').length + 1);\n var currentTabElm = closest(curRow, 'table');\n var thTdElm = closest(curRow, 'table').querySelectorAll('th,td');\n for (var i = 0; i < thTdElm.length; i++) {\n thTdElm[i].dataset.oldWidth = (thTdElm[i].offsetWidth / currentTabElm.offsetWidth * 100) + '%';\n }\n for (var i = 0; i < allRows.length; i++) {\n curCell = allRows[i].querySelectorAll(':scope > td, :scope > th')[colIndex];\n var colTemplate = curCell.cloneNode(true);\n colTemplate.innerHTML = '';\n colTemplate.appendChild(createElement('br'));\n colTemplate.removeAttribute('class');\n colTemplate.removeAttribute('colspan');\n colTemplate.removeAttribute('rowspan');\n // eslint-disable-next-line\n (e.item.subCommand === 'InsertColumnLeft') ? curCell.parentElement.insertBefore(colTemplate, curCell) :\n this.insertAfter(colTemplate, curCell);\n colTemplate.style.width = currentWidth.toFixed(4) + '%';\n delete colTemplate.dataset.oldWidth;\n }\n for (var i = 0; i < thTdElm.length; i++) {\n thTdElm[i].style.width = (Number(thTdElm[i].dataset.oldWidth.split('%')[0]) * currentWidth / previousWidth).toFixed(4) + '%';\n delete thTdElm[i].dataset.oldWidth;\n }\n e.item.selection.setSelectionText(this.parent.currentDocument, selectedCell, selectedCell, 0, 0);\n if (e.callBack) {\n e.callBack({\n requestType: e.item.subCommand,\n editorMode: 'HTML',\n event: e.event,\n range: this.parent.nodeSelection.getRange(this.parent.currentDocument),\n elements: this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument)\n });\n }\n };\n TableCommand.prototype.deleteColumn = function (e) {\n var selectedCell = e.item.selection.range.startContainer;\n if (selectedCell.nodeType === 3) {\n selectedCell = closest(selectedCell.parentElement, 'td,th');\n }\n var tBodyHeadEle = closest(selectedCell, selectedCell.tagName === 'TH' ? 'thead' : 'tbody');\n var rowIndex = tBodyHeadEle && Array.prototype.indexOf.call(tBodyHeadEle.childNodes, selectedCell.parentNode);\n this.curTable = closest(selectedCell, 'table');\n var curRow = closest(selectedCell, 'tr');\n if (curRow.querySelectorAll('th,td').length === 1) {\n e.item.selection.restore();\n detach(closest(selectedCell.parentElement, 'table'));\n }\n else {\n var deleteIndex = void 0;\n var allCells = this.getCorrespondingColumns();\n //eslint-disable-next-line\n var selectedMinMaxIndex = this.getSelectedCellMinMaxIndex(allCells);\n var minCol = selectedMinMaxIndex.startColumn;\n var maxCol = selectedMinMaxIndex.endColumn;\n for (var i = 0; i < allCells.length; i++) {\n var currentRow = allCells[i];\n for (var j = 0; j < currentRow.length; j++) {\n var currentCell = currentRow[j];\n //eslint-disable-next-line\n var currentCellIndex = this.getCorrespondingIndex(currentCell, allCells);\n var colSpanVal = parseInt(currentCell.getAttribute('colspan'), 10) || 1;\n if (currentCellIndex[1] + (colSpanVal - 1) >= minCol && currentCellIndex[1] <= maxCol) {\n if (colSpanVal > 1) {\n currentCell.setAttribute('colspan', (colSpanVal - 1).toString());\n }\n else {\n detach(currentCell);\n deleteIndex = j;\n if (Browser.isIE) {\n e.item.selection.setSelectionText(this.parent.currentDocument, this.curTable.querySelector('td'), this.curTable.querySelector('td'), 0, 0);\n this.curTable.querySelector('td, th').classList.add('e-cell-select');\n }\n }\n }\n }\n }\n if (deleteIndex > -1) {\n var rowHeadEle = tBodyHeadEle.children[rowIndex];\n var nextFocusCell = rowHeadEle &&\n rowHeadEle.children[(deleteIndex <= rowHeadEle.children.length - 1 ? deleteIndex : deleteIndex - 1)];\n if (nextFocusCell) {\n e.item.selection.setSelectionText(this.parent.currentDocument, nextFocusCell, nextFocusCell, 0, 0);\n nextFocusCell.classList.add('e-cell-select');\n }\n }\n }\n if (e.callBack) {\n var sContainer = this.parent.nodeSelection.getRange(this.parent.currentDocument).startContainer;\n if (sContainer.nodeName !== 'TD') {\n var startChildLength = this.parent.nodeSelection.getRange(this.parent.currentDocument).startOffset;\n var focusNode = sContainer.children[startChildLength];\n if (focusNode) {\n this.parent.nodeSelection.setCursorPoint(this.parent.currentDocument, focusNode, 0);\n }\n }\n e.callBack({\n requestType: e.item.subCommand,\n editorMode: 'HTML',\n event: e.event,\n range: this.parent.nodeSelection.getRange(this.parent.currentDocument),\n elements: this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument)\n });\n }\n };\n TableCommand.prototype.deleteRow = function (e) {\n var selectedCell = e.item.selection.range.startContainer;\n if (selectedCell.nodeType === 3) {\n selectedCell = closest(selectedCell.parentElement, 'td,th');\n }\n var colIndex = Array.prototype.indexOf.call(selectedCell.parentNode.childNodes, selectedCell);\n this.curTable = closest(selectedCell, 'table');\n var currentRow;\n var allCells = this.getCorrespondingColumns();\n var minMaxIndex = this.getSelectedCellMinMaxIndex(allCells);\n var maxI;\n var j;\n if (this.curTable.rows.length === 1) {\n e.item.selection.restore();\n detach(closest(selectedCell.parentElement, 'table'));\n }\n else {\n for (maxI = minMaxIndex.endRow; maxI >= minMaxIndex.startRow; maxI--) {\n currentRow = this.curTable.rows[maxI];\n for (j = 0; j < allCells[maxI].length; j++) {\n if (j === 0 || allCells[maxI][j] !== allCells[maxI][j - 1]) {\n if (1 < parseInt(allCells[maxI][j].getAttribute('rowspan'), 10)) {\n var rowSpanVal = parseInt(allCells[maxI][j].getAttribute('rowspan'), 10) - 1;\n //eslint-disable-next-line\n 1 === rowSpanVal ? allCells[maxI][j].removeAttribute('rowspan') : allCells[maxI][j].setAttribute('rowspan', rowSpanVal.toString());\n }\n }\n if (maxI < allCells.length - 1 && allCells[maxI][j] === allCells[maxI + 1][j] && (0 === maxI ||\n allCells[maxI][j] !== allCells[maxI - 1][j])) {\n var element = allCells[maxI][j];\n var index = void 0;\n for (index = j; 0 < index && allCells[maxI][index] === allCells[maxI][index - 1]; index--) {\n if (index === 0) {\n this.curTable.rows[maxI + 1].prepend(element);\n }\n else {\n allCells[maxI + 1][index - 1].insertAdjacentElement('afterend', element);\n }\n }\n }\n }\n var deleteIndex = currentRow.rowIndex;\n this.curTable.deleteRow(deleteIndex);\n var focusTrEle = !isNOU(this.curTable.rows[deleteIndex]) ? this.curTable.querySelectorAll('tbody tr')[deleteIndex]\n : this.curTable.querySelectorAll('tbody tr')[deleteIndex - 1];\n var nextFocusCell = focusTrEle && focusTrEle.querySelectorAll('td')[colIndex];\n if (nextFocusCell) {\n e.item.selection.setSelectionText(this.parent.currentDocument, nextFocusCell, nextFocusCell, 0, 0);\n nextFocusCell.classList.add('e-cell-select');\n }\n else {\n e.item.selection.setSelectionText(this.parent.currentDocument, this.curTable.querySelector('td'), this.curTable.querySelector('td'), 0, 0);\n this.curTable.querySelector('td, th').classList.add('e-cell-select');\n }\n }\n }\n if (e.callBack) {\n e.callBack({\n requestType: e.item.subCommand,\n editorMode: 'HTML',\n event: e.event,\n range: this.parent.nodeSelection.getRange(this.parent.currentDocument),\n elements: this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument)\n });\n }\n };\n TableCommand.prototype.removeTable = function (e) {\n var selectedCell = e.item.selection.range.startContainer;\n selectedCell = (selectedCell.nodeType === 3) ? selectedCell.parentNode : selectedCell;\n var selectedTable = closest(selectedCell.parentElement, 'table');\n if (selectedTable) {\n e.item.selection.restore();\n detach(selectedTable);\n }\n if (e.callBack) {\n e.callBack({\n requestType: e.item.subCommand,\n editorMode: 'HTML',\n event: e.event,\n range: this.parent.nodeSelection.getRange(this.parent.currentDocument),\n elements: this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument)\n });\n }\n };\n TableCommand.prototype.tableHeader = function (e) {\n var headerExit = false;\n var selectedCell = e.item.selection.range.startContainer;\n selectedCell = (selectedCell.nodeType === 3) ? selectedCell.parentNode : selectedCell;\n var table = closest(selectedCell.parentElement, 'table');\n [].slice.call(table.childNodes).forEach(function (el) {\n if (el.nodeName === 'THEAD') {\n headerExit = true;\n }\n });\n if (table && !headerExit) {\n var cellCount = table.querySelector('tr').childElementCount;\n var colSpanCount = 0;\n for (var i = 0; i < cellCount; i++) {\n colSpanCount = colSpanCount + (parseInt(table.querySelector('tr').children[i].getAttribute('colspan'), 10) || 1);\n }\n var header = table.createTHead();\n var row = header.insertRow(0);\n for (var j = 0; j < colSpanCount; j++) {\n var th = createElement('th');\n th.appendChild(createElement('br'));\n row.appendChild(th);\n }\n }\n else {\n table.deleteTHead();\n }\n if (e.callBack) {\n e.callBack({\n requestType: e.item.subCommand,\n editorMode: 'HTML',\n event: e.event,\n range: this.parent.nodeSelection.getRange(this.parent.currentDocument),\n elements: this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument)\n });\n }\n };\n TableCommand.prototype.tableVerticalAlign = function (e) {\n if (e.item.subCommand === 'AlignTop') {\n e.item.tableCell.style.verticalAlign = 'top';\n }\n else if (e.item.subCommand === 'AlignMiddle') {\n e.item.tableCell.style.verticalAlign = 'middle';\n }\n else {\n e.item.tableCell.style.verticalAlign = 'bottom';\n }\n if (e.callBack) {\n e.callBack({\n requestType: e.item.subCommand,\n editorMode: 'HTML',\n event: e.event,\n range: this.parent.nodeSelection.getRange(this.parent.currentDocument),\n elements: this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument)\n });\n }\n };\n TableCommand.prototype.cellMerge = function (e) {\n if (isNOU(this.curTable)) {\n this.curTable = closest(this.parent.nodeSelection.range.startContainer.parentElement, 'table');\n }\n var selectedCells = this.curTable.querySelectorAll('.e-cell-select');\n if (selectedCells.length < 2) {\n return;\n }\n this.mergeCellContent();\n var minMaxIndexes = this.getSelectedMinMaxIndexes(this.getCorrespondingColumns());\n var firstCell = selectedCells[0];\n var rowSelectedCells = firstCell.parentElement.querySelectorAll('.e-cell-select');\n if (minMaxIndexes.startColumn < minMaxIndexes.endColumn) {\n firstCell.setAttribute('colspan', (minMaxIndexes.endColumn - minMaxIndexes.startColumn + 1).toString());\n }\n if (minMaxIndexes.startRow < minMaxIndexes.endRow) {\n firstCell.setAttribute('rowspan', (minMaxIndexes.endRow - minMaxIndexes.startRow + 1).toString());\n }\n var totalWidth = 0;\n for (var j = rowSelectedCells.length - 1; j >= 0; j--) {\n totalWidth = totalWidth + parseFloat(rowSelectedCells[j].style.width);\n }\n firstCell.style.width = totalWidth + '%';\n for (var i = 1; i <= selectedCells.length - 1; i++) {\n detach(selectedCells[i]);\n }\n for (var i = 0; i < this.curTable.rows.length; i++) {\n if (this.curTable.rows[i].innerHTML === '') {\n detach(this.curTable.rows[i]);\n }\n }\n this.updateRowSpanStyle(minMaxIndexes.startRow, minMaxIndexes.endRow, this.getCorrespondingColumns());\n this.updateColSpanStyle(minMaxIndexes.startColumn, minMaxIndexes.endColumn, this.getCorrespondingColumns());\n e.item.selection.setSelectionText(this.parent.currentDocument, e.item.selection.range.startContainer, e.item.selection.range.startContainer, 0, 0);\n if (this.parent.nodeSelection.range) {\n this.parent.nodeSelection.setCursorPoint(this.parent.currentDocument, \n // eslint-disable-next-line\n this.parent.nodeSelection.range.endContainer, 0);\n }\n if (e.callBack) {\n e.callBack({\n requestType: e.item.subCommand,\n editorMode: 'HTML',\n event: e.event,\n range: this.parent.nodeSelection.getRange(this.parent.currentDocument),\n elements: this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument)\n });\n }\n };\n TableCommand.prototype.updateColSpanStyle = function (min, max, elements) {\n var colValue;\n var colIndex;\n var colMin;\n var index = 0;\n var attrValue;\n var count = 0;\n var eleArray = elements;\n //eslint-disable-next-line\n if (min < (max = Math.min(max, eleArray[0].length - 1))) {\n for (colIndex === min; colIndex <= max; colIndex++) {\n // eslint-disable-next-line\n if (!(min < colIndex && eleArray[0][colIndex] === eleArray[0][colIndex - 1]) && 1 < (index =\n Math.min(parseInt(eleArray[0][colIndex].getAttribute('colspan'), 10) || 1, max - min + 1)) &&\n eleArray[0][colIndex] === eleArray[0][colIndex + 1]) {\n for (count = index - 1, colValue = 1; colValue < eleArray.length; colValue++) {\n if (eleArray[colValue][colIndex] !== eleArray[colValue - 1][colIndex]) {\n /* eslint-disable */\n for (colMin = colIndex; colMin < colIndex + index; colMin++) {\n if (1 < (attrValue = parseInt(eleArray[colValue][colMin].getAttribute('colspan'), 10) || 1) &&\n eleArray[colValue][colMin] === eleArray[colValue][colMin + 1]) {\n colMin += count = Math.min(count, attrValue - 1);\n }\n else if (!(count = Math.max(0, count - 1))) {\n break;\n }\n /* eslint-enable */\n }\n }\n if (!count) {\n break;\n }\n }\n }\n }\n if (count) {\n this.updateCellAttribute(eleArray, count, 'colspan', 0, eleArray.length - 1, min, max);\n }\n }\n };\n TableCommand.prototype.updateRowSpanStyle = function (min, max, ele) {\n var rowValue;\n var colIndex;\n var rowMin;\n var index = 0;\n var attrValue;\n var count = 0;\n var eleArray = ele;\n // eslint-disable-next-line\n if (min < (max = Math.min(max, eleArray.length - 1))) {\n for (rowValue = min; rowValue <= max; rowValue++) {\n // eslint-disable-next-line\n if (!(min < rowValue && eleArray[rowValue][0] === eleArray[rowValue - 1][0]) && 1 < (index = Math.min(parseInt(eleArray[rowValue][0].getAttribute('rowspan'), 10) || 1, max - min + 1)) && eleArray[rowValue][0] === eleArray[rowValue + 1][0]) {\n for (count = index - 1, colIndex = 1; colIndex < eleArray[0].length; colIndex++) {\n if (eleArray[rowValue][colIndex] !== eleArray[rowValue][colIndex - 1]) {\n for (rowMin = rowValue; rowMin < rowValue + index; rowMin++) {\n // eslint-disable-next-line\n if (1 < (attrValue = parseInt(eleArray[rowMin][colIndex].getAttribute('rowspan'), 10) || 1) && eleArray[rowMin][colIndex] === eleArray[rowMin + 1][colIndex]) {\n rowMin += count = Math.min(count, attrValue - 1);\n }\n // eslint-disable-next-line\n else if (!(count = Math.max(0, count - 1))) {\n break;\n }\n }\n if (!count) {\n break;\n }\n }\n }\n }\n }\n if (count) {\n this.updateCellAttribute(eleArray, count, 'rowspan', min, max, 0, eleArray[0].length - 1);\n }\n }\n };\n TableCommand.prototype.updateCellAttribute = function (elements, index, attr, min, max, firstIndex, length) {\n var rowIndex;\n var colIndex;\n var spanCount;\n for (rowIndex = min; rowIndex <= max; rowIndex++) {\n for (colIndex = firstIndex; colIndex <= length; colIndex++) {\n // eslint-disable-next-line\n min < rowIndex && elements[rowIndex][colIndex] === elements[rowIndex - 1][colIndex] ||\n firstIndex < colIndex && elements[rowIndex][colIndex] === elements[rowIndex][colIndex - 1] ||\n 1 < (spanCount = parseInt(elements[rowIndex][colIndex].getAttribute(attr), 10) || 1) &&\n (1 < spanCount - index ? elements[rowIndex][colIndex].setAttribute(attr, (spanCount - index).toString()) :\n elements[rowIndex][colIndex].removeAttribute(attr));\n }\n }\n };\n TableCommand.prototype.mergeCellContent = function () {\n var selectedCells = this.curTable.querySelectorAll('.e-cell-select');\n var innerHtml = selectedCells[0].innerHTML;\n for (var i = 1; i < selectedCells.length - 1; i++) {\n if ('
' !== selectedCells[i].innerHTML) {\n innerHtml = innerHtml + selectedCells[i].innerHTML;\n }\n }\n selectedCells[0].innerHTML = innerHtml;\n };\n TableCommand.prototype.getSelectedMinMaxIndexes = function (correspondingCells) {\n var selectedCells = this.curTable.querySelectorAll('.e-cell-select');\n if (0 < selectedCells.length) {\n var minRow = correspondingCells.length;\n var maxRow = 0;\n var minCol = correspondingCells[0].length;\n var maxCol = 0;\n for (var i = 0; i < selectedCells.length; i++) {\n var currentRowCol = this.getCorrespondingIndex(selectedCells[i], correspondingCells);\n var targetRowCol = this.FindIndex(currentRowCol[0], currentRowCol[1], correspondingCells);\n minRow = Math.min(currentRowCol[0], minRow);\n maxRow = Math.max(targetRowCol[0], maxRow);\n minCol = Math.min(currentRowCol[1], minCol);\n maxCol = Math.max(targetRowCol[1], maxCol);\n }\n return {\n startRow: minRow,\n endRow: maxRow,\n startColumn: minCol,\n endColumn: maxCol\n };\n }\n return null;\n };\n TableCommand.prototype.HorizontalSplit = function (e) {\n var selectedCell = e.item.selection.range.startContainer;\n this.curTable = closest(selectedCell.parentElement, 'table');\n if (this.curTable.querySelectorAll('.e-cell-select').length > 1) {\n return;\n }\n this.activeCell = this.curTable.querySelector('.e-cell-select');\n var newCell = this.activeCell.cloneNode(true);\n newCell.removeAttribute('class');\n newCell.innerHTML = '';\n var activeCellIndex = this.getCorrespondingIndex(this.activeCell, this.getCorrespondingColumns());\n var correspondingCells = this.getCorrespondingColumns();\n var activeCellRowSpan = this.activeCell.getAttribute('rowspan') ? parseInt(this.activeCell.getAttribute('rowspan'), 10) : 1;\n if (activeCellRowSpan > 1) {\n var avgCount = Math.ceil(activeCellRowSpan / 2);\n // eslint-disable-next-line\n 1 < avgCount ? this.activeCell.setAttribute('rowspan', avgCount.toString()) :\n this.activeCell.removeAttribute('rowspan');\n // eslint-disable-next-line\n 1 < (activeCellRowSpan - avgCount) ? newCell.setAttribute('rowspan', (activeCellRowSpan - avgCount).toString()) : newCell.removeAttribute('rowspan');\n var avgRowIndex = void 0;\n var colIndex = void 0;\n for (avgRowIndex = activeCellIndex[0] + Math.ceil(activeCellRowSpan / 2),\n colIndex = 0 === activeCellIndex[1] ? activeCellIndex[1]\n : activeCellIndex[1] - 1; 0 <= colIndex && (correspondingCells[avgRowIndex][colIndex] ===\n correspondingCells[avgRowIndex][colIndex - 1] || 0 < avgRowIndex && correspondingCells[avgRowIndex][colIndex]\n === correspondingCells[avgRowIndex - 1][colIndex]);) {\n colIndex--;\n }\n if (colIndex === -1) {\n // eslint-disable-next-line\n this.curTable.rows[avgRowIndex].firstChild ? this.curTable.rows[avgRowIndex].prepend(newCell) : this.curTable.appendChild(newCell);\n }\n else {\n correspondingCells[avgRowIndex][colIndex].insertAdjacentElement('afterend', newCell);\n }\n }\n else {\n var newTrEle = createElement('tr');\n newTrEle.appendChild(newCell);\n var selectedRow = correspondingCells[activeCellIndex[0]];\n for (var j = 0; j <= selectedRow.length - 1; j++) {\n if (selectedRow[j] !== selectedRow[j - 1] && selectedRow[j] !== this.activeCell) {\n selectedRow[j].setAttribute('rowspan', ((parseInt(selectedRow[j].getAttribute('rowspan'), 10) ?\n parseInt(selectedRow[j].getAttribute('rowspan'), 10) : 1) + 1).toString());\n }\n }\n this.activeCell.parentNode.insertAdjacentElement('afterend', newTrEle);\n }\n if (e.callBack) {\n e.callBack({\n requestType: e.item.subCommand,\n editorMode: 'HTML',\n event: e.event,\n range: this.parent.nodeSelection.getRange(this.parent.currentDocument),\n elements: this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument)\n });\n }\n };\n TableCommand.prototype.VerticalSplit = function (e) {\n var selectedCell = e.item.selection.range.startContainer;\n this.curTable = closest(selectedCell.parentElement, 'table');\n if (this.curTable.querySelectorAll('.e-cell-select').length > 1) {\n return;\n }\n this.activeCell = this.curTable.querySelector('.e-cell-select');\n var allRows = this.curTable.rows;\n var newCell = this.activeCell.cloneNode(true);\n newCell.removeAttribute('class');\n newCell.innerHTML = '';\n var avgWidth = parseFloat(this.activeCell.style.width) / 2;\n if (this.activeCell.tagName === 'TH' && isNaN(avgWidth)) {\n var cellCount = this.curTable.querySelector('tr').childElementCount;\n var colSpanCount = 0;\n for (var i = 0; i < cellCount; i++) {\n colSpanCount = colSpanCount + (parseInt(this.curTable.querySelector('tr').children[i].getAttribute('colspan'), 10) || 1);\n }\n avgWidth = parseFloat((((this.activeCell.offsetWidth / 2) / this.curTable.offsetWidth) * 100).toFixed(1));\n }\n var activeCellIndex = this.getCorrespondingIndex(this.activeCell, this.getCorrespondingColumns());\n var correspondingColumns = this.getCorrespondingColumns();\n var activeCellcolSpan = parseInt(this.activeCell.getAttribute('colspan'), 10);\n if (activeCellcolSpan > 1) {\n // eslint-disable-next-line\n 1 < Math.ceil(activeCellcolSpan / 2) ? this.activeCell.setAttribute('colspan', (activeCellcolSpan / 2).toString())\n : this.activeCell.removeAttribute('colspan');\n // eslint-disable-next-line\n 1 < (activeCellcolSpan - activeCellcolSpan / 2) ? newCell.setAttribute('colspan', \n // eslint-disable-next-line\n (activeCellcolSpan - activeCellcolSpan / 2).toString()) : newCell.removeAttribute('colspan');\n }\n else {\n for (var i = 0; i <= allRows.length - 1; i++) {\n if (0 === i || correspondingColumns[i][activeCellIndex[1]] !== correspondingColumns[i - 1][activeCellIndex[1]]) {\n var currentCell = correspondingColumns[i][activeCellIndex[1]];\n if (currentCell !== this.activeCell) {\n currentCell.setAttribute('colspan', ((parseInt(currentCell.getAttribute('colspan'), 10) ?\n parseInt(currentCell.getAttribute('colspan'), 10) : 1) + 1).toString());\n }\n }\n }\n }\n this.activeCell.style.width = avgWidth + '%';\n newCell.style.width = avgWidth + '%';\n this.activeCell.parentNode.insertBefore(newCell, this.activeCell.nextSibling);\n if (e.callBack) {\n e.callBack({\n requestType: e.item.subCommand,\n editorMode: 'HTML',\n event: e.event,\n range: this.parent.nodeSelection.getRange(this.parent.currentDocument),\n elements: this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument)\n });\n }\n };\n TableCommand.prototype.getCorrespondingColumns = function () {\n var elementArray = [];\n // eslint-disable-next-line\n var _this = this;\n var colspan = 0;\n var allRows = _this.curTable.rows;\n for (var i = 0; i <= allRows.length - 1; i++) {\n var ele = allRows[i];\n var index = 0;\n for (var j = 0; j <= ele.children.length - 1; j++) {\n /* eslint-disable */\n var colEle = ele.children[j];\n for (var ele_1 = colEle, colspan_1 = parseInt(ele_1.getAttribute('colspan'), 10) || 1, rowSpan = parseInt(ele_1.getAttribute('rowspan'), 10) || 1, rowIndex = i; rowIndex < i + rowSpan; rowIndex++) {\n for (var colIndex = index; colIndex < index + colspan_1; colIndex++) {\n elementArray[rowIndex] || (elementArray[rowIndex] = []);\n elementArray[rowIndex][colIndex] ? index++ : elementArray[rowIndex][colIndex] = colEle;\n }\n }\n index += colspan;\n }\n /* eslint-enable */\n }\n return elementArray;\n };\n // eslint-disable-next-line\n TableCommand.prototype.FindIndex = function (rowIndex, columnIndex, cells) {\n var nextIndex;\n var nextCol;\n for (nextIndex = rowIndex + 1, nextCol = columnIndex + 1; nextIndex < cells.length;) {\n if (cells[nextIndex][columnIndex] !== cells[rowIndex][columnIndex]) {\n nextIndex--;\n break;\n }\n nextIndex++;\n }\n for (nextIndex === cells.length && nextIndex--; nextCol < cells[rowIndex].length;) {\n if (cells[rowIndex][nextCol] !== cells[rowIndex][columnIndex]) {\n nextCol--;\n break;\n }\n nextCol++;\n }\n return nextCol === cells[rowIndex].length && nextCol--,\n [\n nextIndex,\n nextCol\n ];\n };\n TableCommand.prototype.getCorrespondingIndex = function (cell, allCells) {\n //let value: RowCol = new RowCol();\n for (var i = 0; i < allCells.length; i++) {\n for (var j = 0; j < allCells[i].length; j++) {\n if (allCells[i][j] === cell) {\n return [i, j];\n }\n }\n }\n return [];\n };\n TableCommand.prototype.highlightCells = function (minRow, maxRow, minCol, maxCol, eleArray) {\n var j;\n var k;\n var startCell;\n var endCell;\n var minRowIndex = minRow;\n var maxRowIndex = maxRow;\n var minColIndex = minCol;\n var maxColIndex = maxCol;\n var minMaxValues = new MinMax();\n for (j = minRowIndex; j <= maxRowIndex; j++) {\n /* eslint-disable */\n if ((1 < (parseInt(eleArray[j][minColIndex].getAttribute('rowspan'), 10) || 1) ||\n 1 < (parseInt(eleArray[j][minColIndex].getAttribute('colspan'), 10) || 1)) &&\n (endCell = this.FindIndex((startCell = this.getCorrespondingIndex(eleArray[j][minColIndex], eleArray))[0], startCell[1], eleArray))) {\n minRowIndex = Math.min(startCell[0], minRowIndex);\n maxRowIndex = Math.max(endCell[0], maxRowIndex);\n minColIndex = Math.min(startCell[1], minColIndex);\n maxColIndex = Math.max(endCell[1], maxColIndex);\n }\n else if ((1 < (parseInt(eleArray[j][maxColIndex].getAttribute('rowspan'), 10) || 1) ||\n 1 < (parseInt(eleArray[j][maxColIndex].getAttribute('colspan'), 10) || 1)) &&\n (endCell = this.FindIndex((startCell = this.getCorrespondingIndex(eleArray[j][maxColIndex], eleArray))[0], startCell[1], eleArray))) {\n minRowIndex = Math.min(startCell[0], minRowIndex);\n maxRowIndex = Math.max(endCell[0], maxRowIndex);\n minColIndex = Math.min(startCell[1], minColIndex);\n maxColIndex = Math.max(endCell[1], maxColIndex);\n }\n for (k = minColIndex; k <= maxColIndex; k++) {\n if ((1 < (parseInt(eleArray[minRowIndex][k].getAttribute('rowspan'), 10) || 1) ||\n 1 < (parseInt(eleArray[minRowIndex][k].getAttribute('colspan'), 10) || 1)) &&\n (endCell = this.FindIndex((startCell = this.getCorrespondingIndex(eleArray[minRowIndex][k], eleArray))[0], startCell[1], eleArray))) {\n minRowIndex = Math.min(startCell[0], minRowIndex);\n maxRowIndex = Math.max(endCell[0], maxRowIndex);\n minColIndex = Math.min(startCell[1], minColIndex);\n maxColIndex = Math.max(endCell[1], maxColIndex);\n }\n else if ((1 < (parseInt(eleArray[maxRowIndex][k].getAttribute('rowspan'), 10) || 1) ||\n 1 < (parseInt(eleArray[maxRowIndex][k].getAttribute('colspan'), 10) || 1)) &&\n (endCell = this.FindIndex((startCell = this.getCorrespondingIndex(eleArray[maxRowIndex][k], eleArray))[0], startCell[1], eleArray))) {\n minRowIndex = Math.min(startCell[0], minRowIndex);\n maxRowIndex = Math.max(endCell[0], maxRowIndex);\n minColIndex = Math.min(startCell[1], minColIndex);\n maxColIndex = Math.max(endCell[1], maxColIndex);\n }\n }\n minMaxValues = minRowIndex === minRow && maxRowIndex === maxRow && minColIndex === minCol && maxColIndex === maxCol ? {\n startRow: minRow,\n endRow: maxRow,\n startColumn: minCol,\n endColumn: maxCol\n } : this.highlightCells(minRowIndex, maxRowIndex, minColIndex, maxColIndex, eleArray);\n }\n return minMaxValues;\n /* eslint-enable */\n };\n TableCommand.prototype.tableMove = function (e) {\n this.activeCell = e.selectNode[0];\n var target = e.event.target;\n var activeCellTag = this.activeCell.tagName;\n var targetCellTag = target.tagName;\n this.curTable = closest(target, 'table');\n if (this.curTable.querySelectorAll('.e-cell-select').length > 1) {\n this.parent.nodeSelection.Clear(this.parent.currentDocument);\n }\n if ((target.tagName !== 'TD' && target.tagName !== 'TH') && activeCellTag !== targetCellTag) {\n return;\n }\n var activeRowIndex = Array.prototype.slice.call((this.activeCell).parentElement.parentElement.children)\n .indexOf((this.activeCell).parentElement);\n var activeColumnIndex = Array.prototype.slice.call((this.activeCell).parentElement.children).indexOf(this.activeCell);\n var targetRowIndex = Array.prototype.slice.call(target.parentElement.parentElement.children)\n .indexOf(target.parentElement);\n var targetColumnIndex = Array.prototype.slice.call(target.parentElement.children).indexOf(target);\n var activeCellList = this.curTable.querySelectorAll('.e-cell-select');\n for (var i = activeCellList.length - 1; i >= 0; i--) {\n if (this.activeCell !== activeCellList[i]) {\n activeCellList[i].classList.remove('e-cell-select');\n }\n }\n if (activeRowIndex === targetRowIndex && activeColumnIndex === targetColumnIndex) {\n return;\n }\n var correspondingCells = this.getCorrespondingColumns();\n var activeIndexes = this.getCorrespondingIndex(this.activeCell, correspondingCells);\n var targetIndexes = this.getCorrespondingIndex(target, correspondingCells);\n var minMaxIndexes = this.highlightCells(Math.min(activeIndexes[0], targetIndexes[0]), Math.max(activeIndexes[0], \n /* eslint-disable */\n targetIndexes[0]), Math.min(activeIndexes[1], targetIndexes[1]), Math.max(activeIndexes[1], targetIndexes[1]), correspondingCells);\n for (var rowIndex = minMaxIndexes.startRow; rowIndex <= minMaxIndexes.endRow; rowIndex++) {\n for (var colIndex = minMaxIndexes.startColumn; colIndex <= minMaxIndexes.endColumn; colIndex++) {\n correspondingCells[rowIndex][colIndex].classList.add('e-cell-select');\n }\n }\n if (this.parent.nodeSelection.range) {\n this.parent.nodeSelection.setSelectionText(this.parent.currentDocument, this.parent.nodeSelection.range.endContainer, this.parent.nodeSelection.range.endContainer, 0, 0);\n this.parent.nodeSelection.setCursorPoint(this.parent.currentDocument, this.parent.nodeSelection.range.endContainer, 0);\n }\n };\n ;\n return TableCommand;\n}());\nexport { TableCommand };\nvar MinMax = /** @class */ (function () {\n function MinMax() {\n }\n return MinMax;\n}());\n","/**\n * Is formatted or not.\n *\n * @hidden\n\n */\nvar IsFormatted = /** @class */ (function () {\n function IsFormatted() {\n }\n /**\n * getFormattedNode method\n *\n * @param {Node} node - specifies the node.\n * @param {string} format - specifies the string value.\n * @param {Node} endNode - specifies the end node\n * @returns {Node} - returns the node\n * @hidden\n\n */\n IsFormatted.prototype.getFormattedNode = function (node, format, endNode) {\n var parentNode = this.getFormatParent(node, format, endNode);\n if (parentNode !== null && parentNode !== endNode) {\n return parentNode;\n }\n return null;\n };\n IsFormatted.prototype.getFormatParent = function (node, format, endNode) {\n do {\n node = node.parentNode;\n } while (node && (node !== endNode) && !this.isFormattedNode(node, format));\n return node;\n };\n IsFormatted.prototype.isFormattedNode = function (node, format) {\n switch (format) {\n case 'bold':\n return IsFormatted.isBold(node);\n case 'italic':\n return IsFormatted.isItalic(node);\n case 'underline':\n return IsFormatted.isUnderline(node);\n case 'strikethrough':\n return IsFormatted.isStrikethrough(node);\n case 'superscript':\n return IsFormatted.isSuperscript(node);\n case 'subscript':\n return IsFormatted.isSubscript(node);\n case 'fontcolor':\n return this.isFontColor(node);\n case 'fontname':\n return this.isFontName(node);\n case 'fontsize':\n return this.isFontSize(node);\n case 'backgroundcolor':\n return this.isBackgroundColor(node);\n default:\n return false;\n }\n };\n /**\n * isBold method\n *\n * @param {Node} node - specifies the node value\n * @returns {boolean} - returns the boolean value\n * @hidden\n\n */\n IsFormatted.isBold = function (node) {\n var validTags = ['strong', 'b'];\n if (validTags.indexOf(node.nodeName.toLowerCase()) !== -1) {\n return true;\n }\n else if (this.inlineTags.indexOf(node.nodeName.toLowerCase()) !== -1 &&\n node.style && node.style.fontWeight === 'bold') {\n return true;\n }\n else {\n return false;\n }\n };\n /**\n * isItalic method\n *\n * @param {Node} node - specifies the node value\n * @returns {boolean} - returns the boolean value\n * @hidden\n\n */\n IsFormatted.isItalic = function (node) {\n var validTags = ['em', 'i'];\n if (validTags.indexOf(node.nodeName.toLowerCase()) !== -1) {\n return true;\n }\n else if (this.inlineTags.indexOf(node.nodeName.toLowerCase()) !== -1 &&\n node.style && node.style.fontStyle === 'italic') {\n return true;\n }\n else {\n return false;\n }\n };\n /**\n * isUnderline method\n *\n * @param {Node} node - specifies the node value\n * @returns {boolean} - returns the boolean value\n * @hidden\n\n */\n IsFormatted.isUnderline = function (node) {\n var validTags = ['u'];\n if (validTags.indexOf(node.nodeName.toLowerCase()) !== -1) {\n return true;\n }\n else if (this.inlineTags.indexOf(node.nodeName.toLowerCase()) !== -1 &&\n node.style && node.style.textDecoration === 'underline') {\n return true;\n }\n else {\n return false;\n }\n };\n /**\n * isStrikethrough method\n *\n * @param {Node} node - specifies the node value\n * @returns {boolean} - returns the boolean value\n * @hidden\n\n */\n IsFormatted.isStrikethrough = function (node) {\n var validTags = ['del', 'strike'];\n if (validTags.indexOf(node.nodeName.toLowerCase()) !== -1) {\n return true;\n }\n else if (this.inlineTags.indexOf(node.nodeName.toLowerCase()) !== -1 &&\n node.style && node.style.textDecoration === 'line-through') {\n return true;\n }\n else {\n return false;\n }\n };\n /**\n * isSuperscript method\n *\n * @param {Node} node - specifies the node value\n * @returns {boolean} - returns the boolean value\n * @hidden\n\n */\n IsFormatted.isSuperscript = function (node) {\n var validTags = ['sup'];\n if (validTags.indexOf(node.nodeName.toLowerCase()) !== -1) {\n return true;\n }\n else {\n return false;\n }\n };\n /**\n * isSubscript method\n *\n * @param {Node} node - specifies the node value\n * @returns {boolean} - returns the boolean value\n * @hidden\n\n */\n IsFormatted.isSubscript = function (node) {\n var validTags = ['sub'];\n if (validTags.indexOf(node.nodeName.toLowerCase()) !== -1) {\n return true;\n }\n else {\n return false;\n }\n };\n IsFormatted.prototype.isFontColor = function (node) {\n var color = node.style && node.style.color;\n if (IsFormatted.inlineTags.indexOf(node.nodeName.toLowerCase()) !== -1 &&\n color !== null && color !== '' && color !== undefined) {\n return true;\n }\n else {\n return false;\n }\n };\n IsFormatted.prototype.isBackgroundColor = function (node) {\n var backColor = node.style && node.style.backgroundColor;\n if (IsFormatted.inlineTags.indexOf(node.nodeName.toLowerCase()) !== -1 &&\n backColor !== null && backColor !== '' && backColor !== undefined) {\n return true;\n }\n else {\n return false;\n }\n };\n IsFormatted.prototype.isFontSize = function (node) {\n var size = node.style && node.style.fontSize;\n if (IsFormatted.inlineTags.indexOf(node.nodeName.toLowerCase()) !== -1 &&\n size !== null && size !== '' && size !== undefined) {\n return true;\n }\n else {\n return false;\n }\n };\n IsFormatted.prototype.isFontName = function (node) {\n var name = node.style && node.style.fontFamily;\n if (IsFormatted.inlineTags.indexOf(node.nodeName.toLowerCase()) !== -1 &&\n name !== null && name !== '' && name !== undefined) {\n return true;\n }\n else {\n return false;\n }\n };\n // Get Formatted Node\n IsFormatted.inlineTags = [\n 'a',\n 'abbr',\n 'acronym',\n 'b',\n 'bdo',\n 'big',\n 'cite',\n 'code',\n 'dfn',\n 'em',\n 'i',\n 'kbd',\n 'label',\n 'q',\n 'samp',\n 'small',\n 'span',\n 'strong',\n 'sub',\n 'sup',\n 'tt',\n 'u',\n 'var',\n 'del'\n ];\n return IsFormatted;\n}());\nexport { IsFormatted };\n","/**\n * `Selection` module is used to handle RTE Selections.\n */\nimport { NodeSelection } from './../../selection/index';\nimport { NodeCutter } from './nodecutter';\nimport { InsertMethods } from './insert-methods';\nimport { IsFormatted } from './isformatted';\nimport { isIDevice, setEditFrameFocus } from '../../common/util';\nimport { isNullOrUndefined as isNOU, Browser, closest, detach } from '@syncfusion/ej2-base';\nimport { DOMNode } from './dom-node';\nvar SelectionCommands = /** @class */ (function () {\n function SelectionCommands() {\n }\n /**\n * applyFormat method\n *\n * @param {Document} docElement - specifies the document\n * @param {string} format - specifies the string value\n * @param {Node} endNode - specifies the end node\n * @param {string} enterAction - specifies the enter key action\n * @param {string} value - specifies the string value\n * @param {string} selector - specifies the string\n * @returns {void}\n * @hidden\n\n */\n SelectionCommands.applyFormat = function (docElement, format, endNode, enterAction, value, selector) {\n this.enterAction = enterAction;\n var validFormats = ['bold', 'italic', 'underline', 'strikethrough', 'superscript',\n 'subscript', 'uppercase', 'lowercase', 'fontcolor', 'fontname', 'fontsize', 'backgroundcolor'];\n if (validFormats.indexOf(format) > -1) {\n if (format === 'backgroundcolor' && value === '') {\n value = 'transparent';\n }\n var domSelection = new NodeSelection();\n var domNode = new DOMNode(endNode, docElement);\n var nodeCutter = new NodeCutter();\n var isFormatted = new IsFormatted();\n var range = domSelection.getRange(docElement);\n var save = domSelection.save(range, docElement);\n var nodes = range.collapsed ? domSelection.getSelectionNodeCollection(range) :\n domSelection.getSelectionNodeCollectionBr(range);\n var isCollapsed = false;\n var isFormat = false;\n var isCursor = false;\n var preventRestore = false;\n var isFontStyle = (['fontcolor', 'fontname', 'fontsize', 'backgroundcolor'].indexOf(format) > -1);\n if (range.collapsed) {\n if (nodes.length > 0) {\n isCollapsed = true;\n range = nodeCutter.GetCursorRange(docElement, range, nodes[0]);\n }\n else if (range.startContainer.nodeType === 3 && range.startContainer.parentElement.childElementCount > 0 &&\n range.startOffset > 0 && range.startContainer.parentElement.firstElementChild.tagName.toLowerCase() !== 'br') {\n isCollapsed = true;\n range = nodeCutter.GetCursorRange(docElement, range, range.startContainer);\n nodes.push(range.startContainer);\n }\n else {\n var cursorNode = this.insertCursorNode(docElement, domSelection, range, isFormatted, nodeCutter, format, value, endNode);\n domSelection.endContainer = domSelection.startContainer = domSelection.getNodeArray(cursorNode, true);\n var childNodes = cursorNode.nodeName === 'BR' && cursorNode.parentNode.childNodes;\n if (!isNOU(childNodes) && childNodes.length === 1 && childNodes[0].nodeName === 'BR' && nodes.length === 0) {\n domSelection.setSelectionText(docElement, range.startContainer, range.endContainer, 0, 0);\n preventRestore = true;\n }\n else {\n domSelection.endOffset = domSelection.startOffset = 1;\n }\n if (cursorNode.nodeName === 'BR' && cursorNode.parentNode.textContent.length === 0) {\n preventRestore = true;\n }\n }\n }\n isCursor = range.collapsed;\n var isSubSup = false;\n for (var index = 0; index < nodes.length; index++) {\n var formatNode = isFormatted.getFormattedNode(nodes[index], format, endNode);\n if (formatNode === null) {\n if (format === 'subscript') {\n formatNode = isFormatted.getFormattedNode(nodes[index], 'superscript', endNode);\n isSubSup = formatNode === null ? false : true;\n }\n else if (format === 'superscript') {\n formatNode = isFormatted.getFormattedNode(nodes[index], 'subscript', endNode);\n isSubSup = formatNode === null ? false : true;\n }\n }\n if (index === 0 && formatNode === null) {\n isFormat = true;\n }\n if (formatNode !== null && (!isFormat || isFontStyle)) {\n nodes[index] = this.removeFormat(nodes, index, formatNode, isCursor, isFormat, isFontStyle, range, nodeCutter, format, value, domSelection, endNode, domNode);\n }\n else {\n nodes[index] = this.insertFormat(docElement, nodes, index, formatNode, isCursor, isFormat, isFontStyle, range, nodeCutter, format, value);\n }\n domSelection = this.applySelection(nodes, domSelection, nodeCutter, index, isCollapsed);\n }\n if (isIDevice()) {\n setEditFrameFocus(endNode, selector);\n }\n if (!preventRestore) {\n save.restore();\n }\n if (isSubSup) {\n this.applyFormat(docElement, format, endNode, enterAction);\n }\n }\n };\n SelectionCommands.insertCursorNode = function (docElement, domSelection, range, isFormatted, nodeCutter, format, value, endNode) {\n var cursorNodes = domSelection.getNodeCollection(range);\n var domNode = new DOMNode(endNode, docElement);\n var cursorFormat = (cursorNodes.length > 0) ?\n (cursorNodes.length > 1 && range.startContainer === range.endContainer) ?\n this.getCursorFormat(isFormatted, cursorNodes, format, endNode) :\n isFormatted.getFormattedNode(cursorNodes[0], format, endNode) : null;\n var cursorNode = null;\n if (cursorFormat) {\n cursorNode = cursorNodes[0];\n if (cursorFormat.firstChild.textContent.charCodeAt(0) === 8203 && cursorFormat.firstChild.nodeType === 3) {\n var isCursorEqual = false;\n var regEx = new RegExp(String.fromCharCode(8203), 'g');\n var emptySpaceNode = void 0;\n if (cursorFormat.firstChild === cursorNode) {\n cursorNode.textContent = (cursorFormat.parentElement && (domNode.isBlockNode(cursorFormat.parentElement) &&\n cursorFormat.parentElement.textContent.length <= 1 ? cursorFormat.parentElement.childElementCount > 1 :\n cursorFormat.childElementCount === 0) &&\n (cursorFormat.parentElement.textContent.length > 1 ||\n cursorFormat.parentElement.firstChild && cursorFormat.parentElement.firstChild.nodeType === 1) ?\n cursorNode.textContent : cursorNode.textContent.replace(regEx, ''));\n emptySpaceNode = cursorNode;\n isCursorEqual = true;\n }\n else {\n cursorFormat.firstChild.textContent = cursorFormat.firstChild.textContent.replace(regEx, '');\n emptySpaceNode = cursorFormat.firstChild;\n }\n var pointer = void 0;\n if (emptySpaceNode.textContent.length === 0) {\n if (!isNOU(emptySpaceNode.previousSibling)) {\n cursorNode = emptySpaceNode.previousSibling;\n pointer = emptySpaceNode.textContent.length - 1;\n domSelection.setCursorPoint(docElement, emptySpaceNode, pointer);\n }\n else if (!isNOU(emptySpaceNode.parentElement) && emptySpaceNode.parentElement.textContent.length === 0) {\n var brElem = document.createElement('BR');\n emptySpaceNode.parentElement.appendChild(brElem);\n detach(emptySpaceNode);\n cursorNode = brElem;\n domSelection.setCursorPoint(docElement, cursorNode.parentElement, 0);\n }\n }\n }\n if ((['fontcolor', 'fontname', 'fontsize', 'backgroundcolor'].indexOf(format) > -1)) {\n if (format === 'fontcolor') {\n cursorFormat.style.color = value;\n }\n else if (format === 'fontname') {\n cursorFormat.style.fontFamily = value;\n }\n else if (format === 'fontsize') {\n cursorFormat.style.fontSize = value;\n }\n else {\n cursorFormat.style.backgroundColor = value;\n }\n cursorNode = cursorFormat;\n }\n else {\n InsertMethods.unwrap(cursorFormat);\n }\n }\n else {\n if (cursorNodes.length > 1 && range.startOffset > 0 && (cursorNodes[0].firstElementChild &&\n cursorNodes[0].firstElementChild.tagName.toLowerCase() === 'br')) {\n cursorNodes[0].innerHTML = '';\n }\n if (cursorNodes.length === 1 && range.startOffset === 0 && (cursorNodes[0].nodeName === 'BR' ||\n cursorNodes[0].nextSibling.nodeName === 'BR')) {\n detach(cursorNodes[0].nodeName === '#text' ? cursorNodes[0].nextSibling : cursorNodes[0]);\n }\n cursorNode = this.getInsertNode(docElement, range, format, value).firstChild;\n }\n return cursorNode;\n };\n SelectionCommands.getCursorFormat = function (isFormatted, cursorNodes, format, endNode) {\n var currentNode;\n for (var index = 0; index < cursorNodes.length; index++) {\n currentNode = cursorNodes[index].lastElementChild ?\n cursorNodes[index].lastElementChild : cursorNodes[index];\n }\n return isFormatted.getFormattedNode(currentNode, format, endNode);\n };\n SelectionCommands.removeFormat = function (nodes, index, formatNode, isCursor, isFormat, isFontStyle, range, nodeCutter, format, value, domSelection, endNode, domNode) {\n var splitNode = null;\n var startText = range.startContainer.nodeName === '#text' ?\n range.startContainer.textContent.substring(range.startOffset, range.startContainer.textContent.length) :\n range.startContainer.textContent;\n if (!(range.startContainer === range.endContainer && range.startOffset === 0\n && range.endOffset === range.startContainer.length)) {\n var nodeIndex = [];\n var cloneNode = nodes[index];\n do {\n nodeIndex.push(domSelection.getIndex(cloneNode));\n cloneNode = cloneNode.parentNode;\n } while (cloneNode && (cloneNode !== formatNode));\n if (nodes[index].nodeName !== 'BR') {\n cloneNode = splitNode = (isCursor && (formatNode.textContent.length - 1) === range.startOffset) ?\n nodeCutter.SplitNode(range, formatNode, true)\n : nodeCutter.GetSpliceNode(range, formatNode);\n }\n if (!isCursor) {\n while (cloneNode && cloneNode.childNodes.length > 0 && ((nodeIndex.length - 1) >= 0)\n && (cloneNode.childNodes.length > nodeIndex[nodeIndex.length - 1])) {\n cloneNode = cloneNode.childNodes[nodeIndex[nodeIndex.length - 1]];\n nodeIndex.pop();\n }\n if (nodes[index].nodeName !== 'BR') {\n if (cloneNode.nodeType === 3 && !(isCursor && cloneNode.nodeValue === '')) {\n nodes[index] = cloneNode;\n }\n else {\n var divNode = document.createElement('div');\n divNode.innerHTML = '';\n if (cloneNode.nodeType !== 3) {\n cloneNode.insertBefore(divNode.firstChild, cloneNode.firstChild);\n nodes[index] = cloneNode.firstChild;\n }\n else {\n cloneNode.parentNode.insertBefore(divNode.firstChild, cloneNode);\n nodes[index] = cloneNode.previousSibling;\n cloneNode.parentNode.removeChild(cloneNode);\n }\n }\n }\n }\n else {\n var lastNode = splitNode;\n for (; lastNode.firstChild !== null && lastNode.firstChild.nodeType !== 3; null) {\n lastNode = lastNode.firstChild;\n }\n lastNode.innerHTML = '';\n nodes[index] = lastNode.firstChild;\n }\n }\n var fontStyle;\n if (format === 'backgroundcolor') {\n fontStyle = formatNode.style.fontSize;\n }\n var bgStyle;\n if (format === 'fontsize') {\n var bg = closest(nodes[index].parentElement, 'span[style*=' + 'background-color' + ']');\n if (!isNOU(bg)) {\n bgStyle = bg.style.backgroundColor;\n }\n }\n var formatNodeStyles = formatNode.getAttribute('style');\n var formatNodeTagName = formatNode.tagName;\n var child = InsertMethods.unwrap(formatNode);\n if (child[0] && !isFontStyle) {\n var nodeTraverse = child[index] ? child[index] : child[0];\n var textNode = nodeTraverse;\n for (; nodeTraverse && nodeTraverse.parentElement && nodeTraverse.parentElement !== endNode; \n // eslint-disable-next-line\n nodeTraverse = nodeTraverse) {\n if (nodeTraverse.parentElement && nodeTraverse.parentElement.tagName.toLocaleLowerCase()\n === formatNode.tagName.toLocaleLowerCase() &&\n (nodeTraverse.parentElement.childElementCount > 1 || range.startOffset > 1)) {\n if (textNode.parentElement && textNode.parentElement.tagName.toLocaleLowerCase()\n === formatNode.tagName.toLocaleLowerCase()) {\n if ((range.startOffset === range.endOffset) && textNode.nodeType !== 1 &&\n !isNOU(textNode.textContent) && textNode.parentElement.childElementCount > 1) {\n range.setStart(textNode, 0);\n range.setEnd(textNode, textNode.textContent.length);\n nodeCutter.SplitNode(range, textNode.parentElement, false);\n }\n }\n if (nodeTraverse.parentElement.tagName.toLocaleLowerCase() === 'span') {\n if (formatNode.style.textDecoration === 'underline' &&\n nodeTraverse.parentElement.style.textDecoration !== 'underline') {\n nodeTraverse = nodeTraverse.parentElement;\n continue;\n }\n }\n InsertMethods.unwrap(nodeTraverse.parentElement);\n nodeTraverse = !isNOU(nodeTraverse.parentElement) && !domNode.isBlockNode(nodeTraverse.parentElement) ? textNode :\n nodeTraverse.parentElement;\n }\n else {\n nodeTraverse = nodeTraverse.parentElement;\n }\n }\n }\n if (child.length > 0 && isFontStyle) {\n for (var num = 0; num < child.length; num++) {\n if (child[num].nodeType !== 3 || (child[num].textContent && child[num].textContent.trim().length > 0)) {\n child[num] = InsertMethods.Wrap(child[num], this.GetFormatNode(format, value, formatNodeTagName, formatNodeStyles));\n if (child[num].textContent === startText) {\n if (num === 0) {\n range.setStartBefore(child[num]);\n }\n else if (num === child.length - 1) {\n range.setEndAfter(child[num]);\n }\n }\n }\n }\n var currentNodeElem = nodes[index].parentElement;\n if (!isNOU(fontStyle) && fontStyle !== '') {\n currentNodeElem.style.fontSize = fontStyle;\n }\n if (!isNOU(bgStyle) && bgStyle !== '') {\n currentNodeElem.style.backgroundColor = bgStyle;\n }\n if ((format === 'backgroundcolor' && !isNOU(fontStyle) && fontStyle !== '') &&\n currentNodeElem.parentElement.innerHTML === currentNodeElem.outerHTML) {\n var curParentElem = currentNodeElem.parentElement;\n curParentElem.parentElement.insertBefore(currentNodeElem, curParentElem);\n detach(curParentElem);\n }\n if (format === 'fontsize' || format === 'fontcolor') {\n var liElement = nodes[index].parentElement;\n var parentElement = nodes[index].parentElement;\n while (!isNOU(parentElement) && parentElement.tagName.toLowerCase() !== 'li') {\n parentElement = parentElement.parentElement;\n liElement = parentElement;\n }\n if (!isNOU(liElement) && liElement.tagName.toLowerCase() === 'li' &&\n liElement.textContent.trim() === nodes[index].textContent.trim()) {\n if (format === 'fontsize') {\n liElement.style.fontSize = value;\n }\n else {\n liElement.style.color = value;\n liElement.style.textDecoration = 'inherit';\n }\n }\n }\n }\n return nodes[index];\n };\n SelectionCommands.insertFormat = function (docElement, nodes, index, formatNode, isCursor, isFormat, isFontStyle, range, nodeCutter, format, value) {\n if (!isCursor) {\n if ((formatNode === null && isFormat) || isFontStyle) {\n if (nodes[index].nodeName !== 'BR') {\n nodes[index] = nodeCutter.GetSpliceNode(range, nodes[index]);\n nodes[index].textContent = nodeCutter.TrimLineBreak(nodes[index].textContent);\n }\n if (format === 'uppercase' || format === 'lowercase') {\n nodes[index].textContent = (format === 'uppercase') ? nodes[index].textContent.toLocaleUpperCase()\n : nodes[index].textContent.toLocaleLowerCase();\n }\n else if (!(isFontStyle === true && value === '')) {\n var element = this.GetFormatNode(format, value);\n if (format === 'fontsize' || format === 'fontcolor') {\n var liElement = nodes[index].parentElement;\n var parentElement = nodes[index].parentElement;\n while (!isNOU(parentElement) && parentElement.tagName.toLowerCase() !== 'li') {\n parentElement = parentElement.parentElement;\n liElement = parentElement;\n }\n if (!isNOU(liElement) && liElement.tagName.toLowerCase() === 'li' &&\n liElement.textContent.trim() === nodes[index].textContent.trim()) {\n if (format === 'fontsize') {\n liElement.style.fontSize = value;\n }\n else {\n liElement.style.color = value;\n liElement.style.textDecoration = 'inherit';\n }\n }\n nodes[index] = this.applyStyles(nodes, index, element);\n if (format === 'fontsize') {\n var bg = closest(nodes[index].parentElement, 'span[style*=' + 'background-color' + ']');\n if (!isNOU(bg)) {\n nodes[index].parentElement.style.backgroundColor = bg.style.backgroundColor;\n }\n }\n }\n else {\n nodes[index] = this.applyStyles(nodes, index, element);\n }\n }\n }\n else {\n nodes[index] = nodeCutter.GetSpliceNode(range, nodes[index]);\n }\n }\n else {\n if (format !== 'uppercase' && format !== 'lowercase') {\n var element = this.getInsertNode(docElement, range, format, value);\n nodes[index] = element.firstChild;\n nodeCutter.position = 1;\n }\n else {\n nodeCutter.position = range.startOffset;\n }\n }\n return nodes[index];\n };\n SelectionCommands.applyStyles = function (nodes, index, element) {\n if (!(nodes[index].nodeName === 'BR' && this.enterAction === 'BR')) {\n nodes[index] = (index === (nodes.length - 1)) || nodes[index].nodeName === 'BR' ?\n InsertMethods.Wrap(nodes[index], element)\n : InsertMethods.WrapBefore(nodes[index], element, true);\n nodes[index] = this.getChildNode(nodes[index], element);\n }\n return nodes[index];\n };\n SelectionCommands.getInsertNode = function (docElement, range, format, value) {\n var element = this.GetFormatNode(format, value);\n element.innerHTML = '';\n if (Browser.isIE) {\n var frag = docElement.createDocumentFragment();\n frag.appendChild(element);\n range.insertNode(frag);\n }\n else {\n range.insertNode(element);\n }\n return element;\n };\n SelectionCommands.getChildNode = function (node, element) {\n if (node === undefined || node === null) {\n element.innerHTML = '';\n node = element.firstChild;\n }\n return node;\n };\n SelectionCommands.applySelection = function (nodes, domSelection, nodeCutter, index, isCollapsed) {\n if (nodes.length === 1 && !isCollapsed) {\n domSelection.startContainer = domSelection.getNodeArray(nodes[index], true);\n domSelection.endContainer = domSelection.startContainer;\n domSelection.startOffset = 0;\n domSelection.endOffset = nodes[index].textContent.length;\n }\n else if (nodes.length === 1 && isCollapsed) {\n domSelection.startContainer = domSelection.getNodeArray(nodes[index], true);\n domSelection.endContainer = domSelection.startContainer;\n domSelection.startOffset = nodeCutter.position;\n domSelection.endOffset = nodeCutter.position;\n }\n else if (index === 0) {\n domSelection.startContainer = domSelection.getNodeArray(nodes[index], true);\n domSelection.startOffset = 0;\n }\n else if (index === nodes.length - 1) {\n domSelection.endContainer = domSelection.getNodeArray(nodes[index], false);\n domSelection.endOffset = nodes[index].textContent.length;\n }\n return domSelection;\n };\n SelectionCommands.GetFormatNode = function (format, value, tagName, styles) {\n var node;\n switch (format) {\n case 'bold':\n return document.createElement('strong');\n case 'italic':\n return document.createElement('em');\n case 'underline':\n node = document.createElement('span');\n this.updateStyles(node, tagName, styles);\n node.style.textDecoration = 'underline';\n return node;\n case 'strikethrough':\n node = document.createElement('span');\n this.updateStyles(node, tagName, styles);\n node.style.textDecoration = 'line-through';\n return node;\n case 'superscript':\n return document.createElement('sup');\n case 'subscript':\n return document.createElement('sub');\n case 'fontcolor':\n node = document.createElement('span');\n this.updateStyles(node, tagName, styles);\n node.style.color = value;\n node.style.textDecoration = 'inherit';\n return node;\n case 'fontname':\n node = document.createElement('span');\n this.updateStyles(node, tagName, styles);\n node.style.fontFamily = value;\n return node;\n case 'fontsize':\n node = document.createElement('span');\n this.updateStyles(node, tagName, styles);\n node.style.fontSize = value;\n return node;\n default:\n node = document.createElement('span');\n this.updateStyles(node, tagName, styles);\n node.style.backgroundColor = value;\n return node;\n }\n };\n SelectionCommands.updateStyles = function (ele, tag, styles) {\n if (styles !== null && tag === 'SPAN') {\n ele.setAttribute('style', styles);\n }\n };\n SelectionCommands.enterAction = 'P';\n return SelectionCommands;\n}());\nexport { SelectionCommands };\n","import * as CONSTANT from './../base/constant';\nimport { SelectionCommands } from './selection-commands';\nimport * as EVENTS from './../../common/constant';\n/**\n * Selection EXEC internal component\n *\n * @hidden\n\n */\nvar SelectionBasedExec = /** @class */ (function () {\n /**\n * Constructor for creating the Formats plugin\n *\n * @param {EditorManager} parent - specifies the parent element\n * @hidden\n\n */\n function SelectionBasedExec(parent) {\n this.parent = parent;\n this.addEventListener();\n }\n SelectionBasedExec.prototype.addEventListener = function () {\n this.parent.observer.on(CONSTANT.SELECTION_TYPE, this.applySelection, this);\n this.parent.observer.on(EVENTS.KEY_DOWN_HANDLER, this.keyDownHandler, this);\n };\n SelectionBasedExec.prototype.keyDownHandler = function (e) {\n var validFormats = ['bold', 'italic', 'underline', 'strikethrough', 'superscript',\n 'subscript', 'uppercase', 'lowercase'];\n if (e.event.ctrlKey && validFormats.indexOf(e.event.action) > -1) {\n e.event.preventDefault();\n SelectionCommands.applyFormat(this.parent.currentDocument, e.event.action, this.parent.editableElement, e.enterAction);\n this.callBack(e, e.event.action);\n }\n };\n SelectionBasedExec.prototype.applySelection = function (e) {\n SelectionCommands.applyFormat(this.parent.currentDocument, e.subCommand.toLocaleLowerCase(), this.parent.editableElement, e.enterAction, e.value, e.selector);\n this.callBack(e, e.subCommand);\n };\n SelectionBasedExec.prototype.callBack = function (event, action) {\n if (event.callBack) {\n event.callBack({\n requestType: action,\n event: event.event,\n editorMode: 'HTML',\n range: this.parent.nodeSelection.getRange(this.parent.currentDocument),\n elements: this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument)\n });\n }\n };\n return SelectionBasedExec;\n}());\nexport { SelectionBasedExec };\n","import * as CONSTANT from './../base/constant';\nimport { InsertHtml } from './inserthtml';\n/**\n * Selection EXEC internal component\n *\n * @hidden\n\n */\nvar InsertHtmlExec = /** @class */ (function () {\n /**\n * Constructor for creating the Formats plugin\n *\n * @param {EditorManager} parent - sepcifies the parent element\n * @hidden\n\n */\n function InsertHtmlExec(parent) {\n this.parent = parent;\n this.addEventListener();\n }\n InsertHtmlExec.prototype.addEventListener = function () {\n this.parent.observer.on(CONSTANT.INSERTHTML_TYPE, this.applyHtml, this);\n };\n InsertHtmlExec.prototype.applyHtml = function (e) {\n InsertHtml.Insert(this.parent.currentDocument, e.value, this.parent.editableElement, true);\n if (e.subCommand === 'pasteCleanup') {\n var pastedElements = this.parent.editableElement.querySelectorAll('.pasteContent_RTE');\n var allPastedElements = [].slice.call(pastedElements);\n var imgElements = this.parent.editableElement.querySelectorAll('.pasteContent_Img');\n var allImgElm = [].slice.call(imgElements);\n e.callBack({\n requestType: e.subCommand,\n editorMode: 'HTML',\n elements: allPastedElements,\n imgElem: allImgElm\n });\n }\n else {\n if (e.callBack) {\n e.callBack({\n requestType: e.subCommand,\n editorMode: 'HTML',\n event: e.event,\n range: this.parent.nodeSelection.getRange(this.parent.currentDocument),\n elements: this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument)\n });\n }\n }\n };\n return InsertHtmlExec;\n}());\nexport { InsertHtmlExec };\n","/**\n * `Clear Format` module is used to handle Clear Format.\n */\nimport { closest } from '@syncfusion/ej2-base';\nimport { NodeSelection } from './../../selection/index';\nimport { NodeCutter } from './nodecutter';\nimport { DOMNode } from './dom-node';\nimport { InsertMethods } from './insert-methods';\nimport { IsFormatted } from './isformatted';\nimport { isIDevice, setEditFrameFocus } from '../../common/util';\nvar ClearFormat = /** @class */ (function () {\n function ClearFormat() {\n }\n /**\n * clear method\n *\n * @param {Document} docElement - specifies the document element.\n * @param {Node} endNode - specifies the end node\n * @param {string} enterAction - specifies the enter key action\n * @param {string} selector - specifies the string value\n * @returns {void}\n * @hidden\n\n */\n ClearFormat.clear = function (docElement, endNode, enterAction, selector) {\n this.domNode = new DOMNode(endNode, docElement);\n this.defaultTag = enterAction === 'P' ? this.defaultTag : 'div';\n var nodeSelection = new NodeSelection();\n var nodeCutter = new NodeCutter();\n var range = nodeSelection.getRange(docElement);\n var isCollapsed = range.collapsed;\n var nodes = nodeSelection.getInsertNodeCollection(range);\n var save = nodeSelection.save(range, docElement);\n if (!isCollapsed) {\n var preNode = void 0;\n if (nodes[0].nodeName === 'BR' && closest(nodes[0], 'table')) {\n preNode = nodeCutter.GetSpliceNode(range, closest(nodes[0], 'table'));\n }\n else {\n preNode = nodeCutter.GetSpliceNode(range, nodes[nodes.length > 1 && nodes[0].nodeName === 'IMG' ? 1 : 0]);\n }\n if (nodes.length === 1) {\n nodeSelection.setSelectionContents(docElement, preNode);\n range = nodeSelection.getRange(docElement);\n }\n else {\n var i = 1;\n var lastText = nodes[nodes.length - i];\n while (nodes.length <= i && nodes[nodes.length - i].nodeName === 'BR') {\n i++;\n lastText = nodes[nodes.length - i];\n }\n var lasNode = nodeCutter.GetSpliceNode(range, lastText);\n nodeSelection.setSelectionText(docElement, preNode, lasNode, 0, (lasNode.nodeType === 3) ?\n lasNode.textContent.length : lasNode.childNodes.length);\n range = nodeSelection.getRange(docElement);\n }\n var exactNodes = nodeSelection.getNodeCollection(range);\n var cloneSelectNodes = exactNodes.slice();\n this.clearInlines(nodeSelection.getSelectionNodes(cloneSelectNodes), cloneSelectNodes, nodeSelection.getRange(docElement), nodeCutter, endNode);\n this.reSelection(docElement, save, exactNodes);\n range = nodeSelection.getRange(docElement);\n exactNodes = nodeSelection.getNodeCollection(range);\n var cloneParentNodes = exactNodes.slice();\n this.clearBlocks(docElement, cloneParentNodes, endNode, nodeCutter, nodeSelection);\n if (isIDevice()) {\n setEditFrameFocus(endNode, selector);\n }\n this.reSelection(docElement, save, exactNodes);\n }\n };\n ClearFormat.reSelection = function (docElement, save, exactNodes) {\n var selectionNodes = save.getInsertNodes(exactNodes);\n save.startContainer = save.getNodeArray(selectionNodes[0], true, docElement);\n save.startOffset = 0;\n save.endContainer = save.getNodeArray(selectionNodes[selectionNodes.length - 1], false, docElement);\n var endIndexNode = selectionNodes[selectionNodes.length - 1];\n save.endOffset = (endIndexNode.nodeType === 3) ? endIndexNode.textContent.length\n : endIndexNode.childNodes.length;\n save.restore();\n };\n ClearFormat.clearBlocks = function (docElement, nodes, endNode, nodeCutter, nodeSelection) {\n var parentNodes = [];\n for (var index = 0; index < nodes.length; index++) {\n if (this.BLOCK_TAGS.indexOf(nodes[index].nodeName.toLocaleLowerCase()) > -1\n && parentNodes.indexOf(nodes[index]) === -1) {\n parentNodes.push(nodes[index]);\n }\n else if ((this.BLOCK_TAGS.indexOf(nodes[index].parentNode.nodeName.toLocaleLowerCase()) > -1)\n && parentNodes.indexOf(nodes[index].parentNode) === -1\n && endNode !== nodes[index].parentNode) {\n parentNodes.push(nodes[index].parentNode);\n }\n }\n parentNodes = this.spliceParent(parentNodes, nodes)[0];\n parentNodes = this.removeParent(parentNodes);\n this.unWrap(docElement, parentNodes, nodeCutter, nodeSelection);\n };\n ClearFormat.spliceParent = function (parentNodes, nodes) {\n for (var index1 = 0; index1 < parentNodes.length; index1++) {\n var len = parentNodes[index1].childNodes.length;\n for (var index2 = 0; index2 < len; index2++) {\n if ((nodes.indexOf(parentNodes[index1].childNodes[index2]) > 0)\n && (parentNodes[index1].childNodes[index2].childNodes.length > 0)) {\n nodes = this.spliceParent([parentNodes[index1].childNodes[index2]], nodes)[1];\n }\n if ((nodes.indexOf(parentNodes[index1].childNodes[index2]) <= -1) &&\n (parentNodes[index1].childNodes[index2].textContent.trim() !== '')) {\n for (var index3 = 0; index3 < len; index3++) {\n if (nodes.indexOf(parentNodes[index1].childNodes[index3]) > -1) {\n nodes.splice(nodes.indexOf(parentNodes[index1].childNodes[index3]), 1);\n }\n }\n index2 = parentNodes[index1].childNodes.length;\n var parentIndex = parentNodes.indexOf(parentNodes[index1].parentNode);\n var nodeIndex = nodes.indexOf(parentNodes[index1].parentNode);\n if (parentIndex > -1) {\n parentNodes.splice(parentIndex, 1);\n }\n if (nodeIndex > -1) {\n nodes.splice(nodeIndex, 1);\n }\n var elementIndex = nodes.indexOf(parentNodes[index1]);\n if (elementIndex > -1) {\n nodes.splice(elementIndex, 1);\n }\n parentNodes.splice(index1, 1);\n index1--;\n }\n }\n }\n return [parentNodes, nodes];\n };\n ClearFormat.removeChild = function (parentNodes, parentNode) {\n var count = parentNode.childNodes.length;\n if (count > 0) {\n for (var index = 0; index < count; index++) {\n if (parentNodes.indexOf(parentNode.childNodes[index]) > -1) {\n parentNodes = this.removeChild(parentNodes, parentNode.childNodes[index]);\n parentNodes.splice(parentNodes.indexOf(parentNode.childNodes[index]), 1);\n }\n }\n }\n return parentNodes;\n };\n ClearFormat.removeParent = function (parentNodes) {\n for (var index = 0; index < parentNodes.length; index++) {\n if (parentNodes.indexOf(parentNodes[index].parentNode) > -1) {\n parentNodes = this.removeChild(parentNodes, parentNodes[index]);\n parentNodes.splice(index, 1);\n index--;\n }\n }\n return parentNodes;\n };\n ClearFormat.unWrap = function (docElement, parentNodes, nodeCutter, nodeSelection) {\n for (var index1 = 0; index1 < parentNodes.length; index1++) {\n if (this.NONVALID_TAGS.indexOf(parentNodes[index1].nodeName.toLowerCase()) > -1\n && parentNodes[index1].parentNode\n && this.NONVALID_PARENT_TAGS.indexOf(parentNodes[index1].parentNode.nodeName.toLowerCase()) > -1) {\n nodeSelection.setSelectionText(docElement, parentNodes[index1], parentNodes[index1], 0, parentNodes[index1].childNodes.length);\n InsertMethods.unwrap(nodeCutter.GetSpliceNode(nodeSelection.getRange(docElement), parentNodes[index1].parentNode));\n }\n if (parentNodes[index1].nodeName.toLocaleLowerCase() !== 'p') {\n if (this.NONVALID_PARENT_TAGS.indexOf(parentNodes[index1].nodeName.toLowerCase()) < 0\n && parentNodes[index1].parentNode.nodeName.toLocaleLowerCase() !== 'p'\n && !((parentNodes[index1].nodeName.toLocaleLowerCase() === 'blockquote'\n || parentNodes[index1].nodeName.toLocaleLowerCase() === 'li')\n && this.IGNORE_PARENT_TAGS.indexOf(parentNodes[index1].childNodes[0].nodeName.toLocaleLowerCase()) > -1)\n && !(parentNodes[index1].childNodes.length === 1\n && parentNodes[index1].childNodes[0].nodeName.toLocaleLowerCase() === 'p')) {\n InsertMethods.Wrap(parentNodes[index1], docElement.createElement(this.defaultTag));\n }\n var childNodes = InsertMethods.unwrap(parentNodes[index1]);\n if (childNodes.length === 1\n && childNodes[0].parentNode.nodeName.toLocaleLowerCase() === 'p') {\n InsertMethods.Wrap(parentNodes[index1], docElement.createElement(this.defaultTag));\n InsertMethods.unwrap(parentNodes[index1]);\n }\n for (var index2 = 0; index2 < childNodes.length; index2++) {\n if (this.NONVALID_TAGS.indexOf(childNodes[index2].nodeName.toLowerCase()) > -1) {\n this.unWrap(docElement, [childNodes[index2]], nodeCutter, nodeSelection);\n }\n else if (this.BLOCK_TAGS.indexOf(childNodes[index2].nodeName.toLocaleLowerCase()) > -1 &&\n childNodes[index2].nodeName.toLocaleLowerCase() !== 'p') {\n var blockNodes = this.removeParent([childNodes[index2]]);\n this.unWrap(docElement, blockNodes, nodeCutter, nodeSelection);\n }\n else if (this.BLOCK_TAGS.indexOf(childNodes[index2].nodeName.toLocaleLowerCase()) > -1 &&\n childNodes[index2].parentNode.nodeName.toLocaleLowerCase() === childNodes[index2].nodeName.toLocaleLowerCase()) {\n InsertMethods.unwrap(childNodes[index2]);\n }\n else if (this.BLOCK_TAGS.indexOf(childNodes[index2].nodeName.toLocaleLowerCase()) > -1 &&\n childNodes[index2].nodeName.toLocaleLowerCase() === 'p') {\n InsertMethods.Wrap(childNodes[index2], docElement.createElement(this.defaultTag));\n InsertMethods.unwrap(childNodes[index2]);\n }\n }\n }\n else {\n InsertMethods.Wrap(parentNodes[index1], docElement.createElement(this.defaultTag));\n InsertMethods.unwrap(parentNodes[index1]);\n }\n }\n };\n ClearFormat.clearInlines = function (textNodes, nodes, range, nodeCutter, \n // eslint-disable-next-line\n endNode) {\n for (var index = 0; index < textNodes.length; index++) {\n var currentInlineNode = textNodes[index];\n var currentNode = void 0;\n while (!this.domNode.isBlockNode(currentInlineNode)) {\n currentNode = currentInlineNode;\n currentInlineNode = currentInlineNode.parentElement;\n }\n if (currentNode &&\n IsFormatted.inlineTags.indexOf(currentNode.nodeName.toLocaleLowerCase()) > -1) {\n nodeCutter.GetSpliceNode(range, currentNode);\n this.removeInlineParent(currentNode);\n }\n }\n };\n ClearFormat.removeInlineParent = function (textNodes) {\n var nodes = InsertMethods.unwrap(textNodes);\n for (var index = 0; index < nodes.length; index++) {\n if (nodes[index].parentNode.childNodes.length === 1\n && IsFormatted.inlineTags.indexOf(nodes[index].parentNode.nodeName.toLocaleLowerCase()) > -1) {\n this.removeInlineParent(nodes[index].parentNode);\n }\n else if (IsFormatted.inlineTags.indexOf(nodes[index].nodeName.toLocaleLowerCase()) > -1) {\n this.removeInlineParent(nodes[index]);\n }\n }\n };\n ClearFormat.BLOCK_TAGS = ['address', 'article', 'aside', 'blockquote',\n 'details', 'dd', 'div', 'dl', 'dt', 'fieldset', 'figcaption', 'figure', 'footer',\n 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hgroup', 'li', 'main', 'nav',\n 'noscript', 'ol', 'p', 'pre', 'section', 'ul'];\n ClearFormat.NONVALID_PARENT_TAGS = ['thead', 'tbody', 'ul', 'ol', 'table', 'tfoot', 'tr'];\n ClearFormat.IGNORE_PARENT_TAGS = ['ul', 'ol', 'table'];\n ClearFormat.NONVALID_TAGS = ['thead', 'tbody', 'figcaption', 'td', 'tr', 'th', 'tfoot', 'figcaption', 'li'];\n ClearFormat.defaultTag = 'p';\n return ClearFormat;\n}());\nexport { ClearFormat };\n","import * as CONSTANT from './../base/constant';\nimport { ClearFormat } from './clearformat';\nimport * as EVENTS from './../../common/constant';\n/**\n * Clear Format EXEC internal component\n *\n * @hidden\n\n */\nvar ClearFormatExec = /** @class */ (function () {\n /**\n * Constructor for creating the Formats plugin\n *\n * @param {EditorManager} parent - specifies the parent element.\n * @returns {void}\n * @hidden\n\n */\n function ClearFormatExec(parent) {\n this.parent = parent;\n this.addEventListener();\n }\n ClearFormatExec.prototype.addEventListener = function () {\n this.parent.observer.on(CONSTANT.CLEAR_TYPE, this.applyClear, this);\n this.parent.observer.on(EVENTS.KEY_DOWN_HANDLER, this.onKeyDown, this);\n };\n ClearFormatExec.prototype.onKeyDown = function (e) {\n switch (e.event.action) {\n case 'clear-format':\n this.applyClear({ subCommand: 'ClearFormat', callBack: e.callBack, enterAction: e.enterAction });\n e.event.preventDefault();\n break;\n }\n };\n ClearFormatExec.prototype.applyClear = function (e) {\n if (e.subCommand === 'ClearFormat') {\n ClearFormat.clear(this.parent.currentDocument, this.parent.editableElement, e.enterAction, e.selector);\n if (e.callBack) {\n e.callBack({\n requestType: e.subCommand,\n event: e.event,\n editorMode: 'HTML',\n range: this.parent.nodeSelection.getRange(this.parent.currentDocument),\n elements: this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument)\n });\n }\n }\n };\n return ClearFormatExec;\n}());\nexport { ClearFormatExec };\n","import { debounce, isNullOrUndefined, detach } from '@syncfusion/ej2-base';\nimport { NodeSelection } from './../../selection/selection';\nimport * as EVENTS from './../../common/constant';\nimport { isIDevice, setEditFrameFocus } from '../../common/util';\n/**\n * `Undo` module is used to handle undo actions.\n */\nvar UndoRedoManager = /** @class */ (function () {\n function UndoRedoManager(parent, options) {\n this.undoRedoStack = [];\n this.parent = parent;\n this.undoRedoSteps = !isNullOrUndefined(options) ? options.undoRedoSteps : 30;\n this.undoRedoTimer = !isNullOrUndefined(options) ? options.undoRedoTimer : 300;\n this.addEventListener();\n }\n UndoRedoManager.prototype.addEventListener = function () {\n var debounceListener = debounce(this.keyUp, this.undoRedoTimer);\n this.parent.observer.on(EVENTS.KEY_UP_HANDLER, debounceListener, this);\n this.parent.observer.on(EVENTS.KEY_DOWN_HANDLER, this.keyDown, this);\n this.parent.observer.on(EVENTS.ACTION, this.onAction, this);\n this.parent.observer.on(EVENTS.MODEL_CHANGED_PLUGIN, this.onPropertyChanged, this);\n };\n UndoRedoManager.prototype.onPropertyChanged = function (props) {\n for (var _i = 0, _a = Object.keys(props.newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'undoRedoSteps':\n this.undoRedoSteps = props.newProp.undoRedoSteps;\n break;\n case 'undoRedoTimer':\n this.undoRedoTimer = props.newProp.undoRedoTimer;\n break;\n }\n }\n };\n UndoRedoManager.prototype.removeEventListener = function () {\n this.parent.observer.off(EVENTS.KEY_UP_HANDLER, this.keyUp);\n this.parent.observer.off(EVENTS.KEY_DOWN_HANDLER, this.keyDown);\n this.parent.observer.off(EVENTS.ACTION, this.onAction);\n };\n /**\n * onAction method\n *\n * @param {IHtmlSubCommands} e - specifies the sub command\n * @returns {void}\n * @hidden\n\n */\n UndoRedoManager.prototype.onAction = function (e) {\n if (e.subCommand === 'Undo') {\n this.undo(e);\n }\n else {\n this.redo(e);\n }\n };\n /**\n * Destroys the ToolBar.\n *\n * @function destroy\n * @returns {void}\n * @hidden\n\n */\n UndoRedoManager.prototype.destroy = function () {\n this.removeEventListener();\n };\n UndoRedoManager.prototype.keyDown = function (e) {\n var event = e.event;\n // eslint-disable-next-line\n var proxy = this;\n switch (event.action) {\n case 'undo':\n event.preventDefault();\n proxy.undo(e);\n break;\n case 'redo':\n event.preventDefault();\n proxy.redo(e);\n break;\n }\n };\n UndoRedoManager.prototype.keyUp = function (e) {\n if (e.event.keyCode !== 17 && !e.event.ctrlKey) {\n this.saveData(e);\n }\n };\n /**\n * RTE collection stored html format.\n *\n * @function saveData\n * @param {KeyboardEvent} e - specifies the keyboard event\n * @returns {void}\n * @hidden\n\n */\n UndoRedoManager.prototype.saveData = function (e) {\n var range = new NodeSelection().getRange(this.parent.currentDocument);\n var currentContainer = range.startContainer;\n for (var i = currentContainer.childNodes.length - 1; i >= 0; i--) {\n if (!isNullOrUndefined(currentContainer.childNodes[i]) && currentContainer.childNodes[i].nodeName === '#text' &&\n currentContainer.childNodes[i].textContent.length === 0 && currentContainer.childNodes[i].nodeName !== 'IMG' &&\n currentContainer.childNodes[i].nodeName !== 'BR' && currentContainer.childNodes[i].nodeName && 'HR') {\n detach(currentContainer.childNodes[i]);\n }\n }\n range = new NodeSelection().getRange(this.parent.currentDocument);\n var save = new NodeSelection().save(range, this.parent.currentDocument);\n var htmlText = this.parent.editableElement.innerHTML;\n var changEle = { text: htmlText, range: save };\n if (this.undoRedoStack.length >= this.steps) {\n this.undoRedoStack = this.undoRedoStack.slice(0, this.steps + 1);\n }\n if (this.undoRedoStack.length > 1 && (this.undoRedoStack[this.undoRedoStack.length - 1].range.range.collapsed === range.collapsed)\n && (this.undoRedoStack[this.undoRedoStack.length - 1].range.startOffset === save.range.startOffset) &&\n (this.undoRedoStack[this.undoRedoStack.length - 1].range.endOffset === save.range.endOffset) &&\n (this.undoRedoStack[this.undoRedoStack.length - 1].range.range.startContainer === save.range.startContainer) &&\n (this.undoRedoStack[this.undoRedoStack.length - 1].text.trim() === changEle.text.trim())) {\n return;\n }\n this.undoRedoStack.push(changEle);\n this.steps = this.undoRedoStack.length - 1;\n if (this.steps > this.undoRedoSteps) {\n this.undoRedoStack.shift();\n this.steps--;\n }\n if (e && e.callBack) {\n e.callBack();\n }\n };\n /**\n * Undo the editable text.\n *\n * @function undo\n * @param {IHtmlSubCommands} e - specifies the sub commands\n * @returns {void}\n * @hidden\n\n */\n UndoRedoManager.prototype.undo = function (e) {\n if (this.steps > 0) {\n var range = this.undoRedoStack[this.steps - 1].range;\n var removedContent = this.undoRedoStack[this.steps - 1].text;\n this.parent.editableElement.innerHTML = removedContent;\n this.parent.editableElement.focus();\n if (isIDevice()) {\n setEditFrameFocus(this.parent.editableElement, e.selector);\n }\n range.restore();\n this.steps--;\n if (e.callBack) {\n e.callBack({\n requestType: 'Undo',\n editorMode: 'HTML',\n range: range,\n elements: this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument),\n event: e.event\n });\n }\n }\n };\n /**\n * Redo the editable text.\n *\n * @param {IHtmlSubCommands} e - specifies the sub commands\n * @function redo\n * @returns {void}\n * @hidden\n\n */\n UndoRedoManager.prototype.redo = function (e) {\n if (this.undoRedoStack[this.steps + 1] != null) {\n var range = this.undoRedoStack[this.steps + 1].range;\n this.parent.editableElement.innerHTML = this.undoRedoStack[this.steps + 1].text;\n this.parent.editableElement.focus();\n if (isIDevice()) {\n setEditFrameFocus(this.parent.editableElement, e.selector);\n }\n range.restore();\n this.steps++;\n if (e.callBack) {\n e.callBack({\n requestType: 'Redo',\n editorMode: 'HTML',\n range: range,\n elements: this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument),\n event: e.event\n });\n }\n }\n };\n /**\n * getUndoStatus method\n *\n * @returns {boolean} - returns the boolean value\n * @hidden\n\n */\n UndoRedoManager.prototype.getUndoStatus = function () {\n var status = { undo: false, redo: false };\n if (this.steps > 0) {\n status.undo = true;\n }\n if (this.undoRedoStack[this.steps + 1] != null) {\n status.redo = true;\n }\n return status;\n };\n return UndoRedoManager;\n}());\nexport { UndoRedoManager };\n","import * as EVENTS from '../../common/constant';\nimport { createElement, isNullOrUndefined as isNOU, detach } from '@syncfusion/ej2-base';\n/**\n * PasteCleanup for MsWord content\n *\n * @hidden\n\n */\nvar MsWordPaste = /** @class */ (function () {\n function MsWordPaste(parent) {\n this.olData = [\n 'decimal',\n 'lower-alpha',\n 'lower-roman',\n 'upper-alpha',\n 'upper-roman',\n 'lower-greek'\n ];\n this.ulData = [\n 'disc',\n 'square',\n 'circle',\n 'disc',\n 'square',\n 'circle'\n ];\n this.ignorableNodes = ['A', 'APPLET', 'B', 'BLOCKQUOTE', 'BR',\n 'BUTTON', 'CENTER', 'CODE', 'COL', 'COLGROUP', 'DD', 'DEL', 'DFN', 'DIR', 'DIV',\n 'DL', 'DT', 'EM', 'FIELDSET', 'FONT', 'FORM', 'FRAME', 'FRAMESET', 'H1', 'H2',\n 'H3', 'H4', 'H5', 'H6', 'HR', 'I', 'IMG', 'IFRAME', 'INPUT', 'INS', 'LABEL',\n 'LI', 'OL', 'OPTION', 'P', 'PARAM', 'PRE', 'Q', 'S', 'SELECT', 'SPAN', 'STRIKE',\n 'STRONG', 'SUB', 'SUP', 'TABLE', 'TBODY', 'TD', 'TEXTAREA', 'TFOOT', 'TH',\n 'THEAD', 'TITLE', 'TR', 'TT', 'U', 'UL'];\n this.blockNode = ['div', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',\n 'address', 'blockquote', 'button', 'center', 'dd', 'dir', 'dl', 'dt', 'fieldset',\n 'frameset', 'hr', 'iframe', 'isindex', 'li', 'map', 'menu', 'noframes', 'noscript',\n 'object', 'ol', 'pre', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'ul',\n 'header', 'article', 'nav', 'footer', 'section', 'aside', 'main', 'figure', 'figcaption'];\n this.borderStyle = ['border-top', 'border-right', 'border-bottom', 'border-left'];\n this.removableElements = ['o:p', 'style'];\n this.listContents = [];\n this.parent = parent;\n this.addEventListener();\n }\n MsWordPaste.prototype.addEventListener = function () {\n this.parent.observer.on(EVENTS.MS_WORD_CLEANUP_PLUGIN, this.wordCleanup, this);\n };\n MsWordPaste.prototype.wordCleanup = function (e) {\n var wordPasteStyleConfig = !isNOU(e.allowedStylePropertiesArray) ? e.allowedStylePropertiesArray : [];\n var listNodes = [];\n var tempHTMLContent = e.args.clipboardData.getData('text/HTML');\n var rtfData = e.args.clipboardData.getData('text/rtf');\n var elm = createElement('p');\n elm.setAttribute('id', 'MSWord-Content');\n elm.innerHTML = tempHTMLContent;\n var patern = /class='?Mso|style='[^ ]*\\bmso-/i;\n var patern2 = /class=\"?Mso|style=\"[^ ]*\\bmso-/i;\n var patern3 = /(class=\"?Mso|class='?Mso|class=\"?Xl|class='?Xl|class=Xl|style=\"[^\"]*\\bmso-|style='[^']*\\bmso-|w:WordDocument)/gi;\n var pattern4 = /style='mso-width-source:/i;\n if (patern.test(tempHTMLContent) || patern2.test(tempHTMLContent) || patern3.test(tempHTMLContent) ||\n pattern4.test(tempHTMLContent)) {\n this.imageConversion(elm, rtfData);\n tempHTMLContent = tempHTMLContent.replace(/]+>/i, '');\n this.addListClass(elm);\n listNodes = this.cleanUp(elm, listNodes);\n if (!isNOU(listNodes[0]) && listNodes[0].parentElement.tagName !== 'UL' &&\n listNodes[0].parentElement.tagName !== 'OL') {\n this.listConverter(listNodes);\n }\n this.styleCorrection(elm, wordPasteStyleConfig);\n this.removingComments(elm);\n this.removeUnwantedElements(elm);\n this.removeEmptyElements(elm);\n this.breakLineAddition(elm);\n this.removeClassName(elm);\n if (pattern4.test(tempHTMLContent)) {\n this.addTableBorderClass(elm);\n }\n e.callBack(elm.innerHTML);\n }\n else {\n e.callBack(elm.innerHTML);\n }\n };\n MsWordPaste.prototype.addListClass = function (elm) {\n var allNodes = elm.querySelectorAll('*');\n for (var index = 0; index < allNodes.length; index++) {\n if (!isNOU(allNodes[index].getAttribute('style')) && allNodes[index].getAttribute('style').replace(/ /g, '').replace('\\n', '').indexOf('mso-list:l') >= 0 &&\n allNodes[index].className.toLowerCase().indexOf('msolistparagraph') === -1 && allNodes[index].tagName.charAt(0) !== 'H') {\n allNodes[index].classList.add('msolistparagraph');\n }\n }\n };\n MsWordPaste.prototype.addTableBorderClass = function (elm) {\n var allTableElm = elm.querySelectorAll('table');\n var hasTableBorder = false;\n for (var i = 0; i < allTableElm.length; i++) {\n for (var j = 0; j < this.borderStyle.length; j++) {\n if (allTableElm[i].innerHTML.indexOf(this.borderStyle[j]) >= 0) {\n hasTableBorder = true;\n break;\n }\n }\n if (hasTableBorder) {\n allTableElm[i].classList.add('e-rte-table-border');\n hasTableBorder = false;\n }\n }\n };\n MsWordPaste.prototype.imageConversion = function (elm, rtfData) {\n this.checkVShape(elm);\n var imgElem = elm.querySelectorAll('img');\n var imgSrc = [];\n var base64Src = [];\n var imgName = [];\n // eslint-disable-next-line\n var linkRegex = new RegExp(/([^\\S]|^)(((https?\\:\\/\\/)|(www\\.))(\\S+))/gi);\n if (imgElem.length > 0) {\n for (var i = 0; i < imgElem.length; i++) {\n imgSrc.push(imgElem[i].getAttribute('src'));\n imgName.push(imgElem[i].getAttribute('src').split('/')[imgElem[i].getAttribute('src').split('/').length - 1].split('.')[0]);\n }\n var hexValue = this.hexConversion(rtfData);\n for (var i = 0; i < hexValue.length; i++) {\n base64Src.push(this.convertToBase64(hexValue[i]));\n }\n for (var i = 0; i < imgElem.length; i++) {\n if (imgSrc[i].match(linkRegex)) {\n imgElem[i].setAttribute('src', imgSrc[i]);\n }\n else {\n imgElem[i].setAttribute('src', base64Src[i]);\n }\n imgElem[i].setAttribute('id', 'msWordImg-' + imgName[i]);\n }\n }\n };\n MsWordPaste.prototype.checkVShape = function (elm) {\n var allNodes = elm.querySelectorAll('*');\n for (var i = 0; i < allNodes.length; i++) {\n switch (allNodes[i].nodeName) {\n case 'V:SHAPETYPE':\n detach(allNodes[i]);\n break;\n case 'V:SHAPE':\n if (allNodes[i].firstElementChild.nodeName === 'V:IMAGEDATA') {\n var src = allNodes[i].firstElementChild.getAttribute('src');\n var imgElement = createElement('img');\n imgElement.setAttribute('src', src);\n allNodes[i].parentElement.insertBefore(imgElement, allNodes[i]);\n detach(allNodes[i]);\n }\n break;\n }\n }\n };\n MsWordPaste.prototype.convertToBase64 = function (hexValue) {\n var byteArr = this.conHexStringToBytes(hexValue.hex);\n var base64String = this.conBytesToBase64(byteArr);\n var base64 = hexValue.type ? 'data:' + hexValue.type + ';base64,' + base64String : null;\n return base64;\n };\n MsWordPaste.prototype.conBytesToBase64 = function (byteArr) {\n var base64Str = '';\n var base64Char = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';\n var byteArrLen = byteArr.length;\n for (var i = 0; i < byteArrLen; i += 3) {\n var array3 = byteArr.slice(i, i + 3);\n var array3length = array3.length;\n var array4 = [];\n if (array3length < 3) {\n for (var j = array3length; j < 3; j++) {\n array3[j] = 0;\n }\n }\n array4[0] = (array3[0] & 0xFC) >> 2;\n array4[1] = ((array3[0] & 0x03) << 4) | (array3[1] >> 4);\n array4[2] = ((array3[1] & 0x0F) << 2) | ((array3[2] & 0xC0) >> 6);\n array4[3] = array3[2] & 0x3F;\n for (var j = 0; j < 4; j++) {\n if (j <= array3length) {\n base64Str += base64Char.charAt(array4[j]);\n }\n else {\n base64Str += '=';\n }\n }\n }\n return base64Str;\n };\n MsWordPaste.prototype.conHexStringToBytes = function (hex) {\n var byteArr = [];\n var byteArrLen = hex.length / 2;\n for (var i = 0; i < byteArrLen; i++) {\n byteArr.push(parseInt(hex.substr(i * 2, 2), 16));\n }\n return byteArr;\n };\n MsWordPaste.prototype.hexConversion = function (rtfData) {\n // eslint-disable-next-line\n var picHead = /\\{\\\\pict[\\s\\S]+?\\\\bliptag\\-?\\d+(\\\\blipupi\\-?\\d+)?(\\{\\\\\\*\\\\blipuid\\s?[\\da-fA-F]+)?[\\s\\}]*?/;\n var pic = new RegExp('(?:(' + picHead.source + '))([\\\\da-fA-F\\\\s]+)\\\\}', 'g');\n var fullImg = rtfData.match(pic);\n var imgType;\n var result = [];\n if (!isNOU(fullImg)) {\n for (var i = 0; i < fullImg.length; i++) {\n if (picHead.test(fullImg[i])) {\n if (fullImg[i].indexOf('\\\\pngblip') !== -1) {\n imgType = 'image/png';\n }\n else if (fullImg[i].indexOf('\\\\jpegblip') !== -1) {\n imgType = 'image/jpeg';\n }\n else {\n continue;\n }\n result.push({\n hex: imgType ? fullImg[i].replace(picHead, '').replace(/[^\\da-fA-F]/g, '') : null,\n type: imgType\n });\n }\n }\n }\n return result;\n };\n MsWordPaste.prototype.removeClassName = function (elm) {\n var elmWithClass = elm.querySelectorAll('*[class]');\n for (var i = 0; i < elmWithClass.length; i++) {\n elmWithClass[i].removeAttribute('class');\n }\n };\n MsWordPaste.prototype.breakLineAddition = function (elm) {\n var allElements = elm.querySelectorAll('*');\n for (var i = 0; i < allElements.length; i++) {\n if (allElements[i].children.length === 0 && allElements[i].innerHTML === ' ' &&\n (allElements[i].innerHTML === ' ' && !allElements[i].closest('li')) &&\n !allElements[i].closest('td')) {\n var detachableElement = this.findDetachElem(allElements[i]);\n var brElement = createElement('br');\n if (!isNOU(detachableElement.parentElement)) {\n detachableElement.parentElement.insertBefore(brElement, detachableElement);\n detach(detachableElement);\n }\n }\n }\n };\n MsWordPaste.prototype.findDetachElem = function (element) {\n var removableElement;\n if (!isNOU(element.parentElement) &&\n element.parentElement.textContent.trim() === '' && element.parentElement.tagName !== 'TD' &&\n isNOU(element.parentElement.querySelector('img'))) {\n removableElement = this.findDetachElem(element.parentElement);\n }\n else {\n removableElement = element;\n }\n return removableElement;\n };\n MsWordPaste.prototype.removeUnwantedElements = function (elm) {\n var innerElement = elm.innerHTML;\n for (var i = 0; i < this.removableElements.length; i++) {\n var regExpStartElem = new RegExp('<' + this.removableElements[i] + '>', 'g');\n var regExpEndElem = new RegExp('', 'g');\n innerElement = innerElement.replace(regExpStartElem, '');\n innerElement = innerElement.replace(regExpEndElem, '');\n }\n elm.innerHTML = innerElement;\n elm.querySelectorAll(':empty');\n };\n MsWordPaste.prototype.findDetachEmptyElem = function (element) {\n var removableElement;\n if (!isNOU(element.parentElement)) {\n if (element.parentElement.textContent.trim() === '' &&\n element.parentElement.getAttribute('id') !== 'MSWord-Content' &&\n isNOU(element.parentElement.querySelector('img'))) {\n removableElement = this.findDetachEmptyElem(element.parentElement);\n }\n else {\n removableElement = element;\n }\n }\n else {\n removableElement = null;\n }\n return removableElement;\n };\n MsWordPaste.prototype.removeEmptyElements = function (element) {\n var emptyElements = element.querySelectorAll(':empty');\n for (var i = 0; i < emptyElements.length; i++) {\n if (!isNOU(emptyElements[i].closest('td')) &&\n !isNOU(emptyElements[i].closest('td').querySelector('.MsoNormal'))) {\n emptyElements[i].innerHTML = '-';\n }\n if (emptyElements[i].tagName !== 'IMG' && emptyElements[i].tagName !== 'BR' &&\n emptyElements[i].tagName !== 'IFRAME' && emptyElements[i].tagName !== 'TD' &&\n emptyElements[i].tagName !== 'HR') {\n var detachableElement = this.findDetachEmptyElem(emptyElements[i]);\n if (!isNOU(detachableElement)) {\n detach(detachableElement);\n }\n }\n }\n };\n MsWordPaste.prototype.styleCorrection = function (elm, wordPasteStyleConfig) {\n var styleElement = elm.querySelectorAll('style');\n if (styleElement.length > 0) {\n var styles = styleElement[0].innerHTML.match(/[\\S ]+\\s+{[\\s\\S]+?}/gi);\n var styleClassObject_1 = !isNOU(styles) ? this.findStyleObject(styles) : null;\n var keys = Object.keys(styleClassObject_1);\n var values = keys.map(function (key) {\n return styleClassObject_1[key];\n });\n values = this.removeUnwantedStyle(values, wordPasteStyleConfig);\n this.filterStyles(elm, wordPasteStyleConfig);\n var resultElem = void 0;\n var fromClass = false;\n for (var i = 0; i < keys.length; i++) {\n if (keys[i].split('.')[0] === '') {\n resultElem = elm.getElementsByClassName(keys[i].split('.')[1]);\n fromClass = true;\n }\n else if (keys[i].split('.').length === 1 && keys[i].split('.')[0].indexOf('@') >= 0) {\n continue;\n }\n else if (keys[i].split('.').length === 1 && keys[i].split('.')[0].indexOf('@') < 0) {\n resultElem = elm.getElementsByTagName(keys[i]);\n }\n else {\n resultElem = elm.querySelectorAll(keys[i]);\n }\n for (var j = 0; j < resultElem.length; j++) {\n var styleProperty = resultElem[j].getAttribute('style');\n if (!isNOU(styleProperty) && styleProperty.trim() !== '') {\n var valueSplit = values[i].split(';');\n if (!fromClass) {\n for (var k = 0; k < valueSplit.length; k++) {\n if (styleProperty.indexOf(valueSplit[k].split(':')[0]) >= 0) {\n valueSplit.splice(k, 1);\n k--;\n }\n }\n }\n values[i] = valueSplit.join(';') + ';';\n var changedValue = styleProperty + values[i];\n resultElem[j].setAttribute('style', changedValue);\n }\n else {\n values[i] = values[i].replace(/text-indent:-(.*?)(?=;|$)/gm, '');\n resultElem[j].setAttribute('style', values[i]);\n }\n }\n fromClass = false;\n }\n }\n };\n MsWordPaste.prototype.filterStyles = function (elm, wordPasteStyleConfig) {\n var elmWithStyles = elm.querySelectorAll('*[style]');\n for (var i = 0; i < elmWithStyles.length; i++) {\n var elemStyleProperty = elmWithStyles[i].getAttribute('style').split(';');\n var styleValue = '';\n for (var j = 0; j < elemStyleProperty.length; j++) {\n if (wordPasteStyleConfig.indexOf(elemStyleProperty[j].split(':')[0].trim()) >= 0) {\n styleValue += elemStyleProperty[j] + ';';\n }\n }\n elmWithStyles[i].setAttribute('style', styleValue);\n }\n };\n MsWordPaste.prototype.removeUnwantedStyle = function (values, wordPasteStyleConfig) {\n for (var i = 0; i < values.length; i++) {\n var styleValues = values[i].split(';');\n values[i] = '';\n for (var j = 0; j < styleValues.length; j++) {\n if (wordPasteStyleConfig.indexOf(styleValues[j].split(':')[0]) >= 0) {\n values[i] += styleValues[j] + ';';\n }\n }\n }\n return values;\n };\n MsWordPaste.prototype.findStyleObject = function (styles) {\n var styleClassObject = {};\n for (var i = 0; i < styles.length; i++) {\n var tempStyle = styles[i];\n var classNameCollection = tempStyle.replace(/([\\S ]+\\s+){[\\s\\S]+?}/gi, '$1');\n var stylesCollection = tempStyle.replace(/[\\S ]+\\s+{([\\s\\S]+?)}/gi, '$1');\n classNameCollection = classNameCollection.replace(/^[\\s]|[\\s]$/gm, '');\n stylesCollection = stylesCollection.replace(/^[\\s]|[\\s]$/gm, '');\n classNameCollection = classNameCollection.replace(/\\n|\\r|\\n\\r/g, '');\n stylesCollection = stylesCollection.replace(/\\n|\\r|\\n\\r/g, '');\n for (var classNames = classNameCollection.split(', '), j = 0; j < classNames.length; j++) {\n styleClassObject[classNames[j]] = stylesCollection;\n }\n }\n return styleClassObject;\n };\n MsWordPaste.prototype.removingComments = function (elm) {\n var innerElement = elm.innerHTML;\n innerElement = innerElement.replace(//g, '');\n elm.innerHTML = innerElement;\n };\n MsWordPaste.prototype.cleanUp = function (node, listNodes) {\n // eslint-disable-next-line\n var temp = '';\n var tempCleaner = [];\n var prevflagState;\n var allNodes = node.querySelectorAll('*');\n for (var index = 0; index < allNodes.length; index++) {\n if (this.ignorableNodes.indexOf(allNodes[index].nodeName) === -1 ||\n (allNodes[index].nodeType === 3 && allNodes[index].textContent.trim() === '')) {\n tempCleaner.push(allNodes[index]);\n continue;\n }\n else if (allNodes[index].className &&\n allNodes[index].className.toLowerCase().indexOf('msolistparagraph') !== -1 &&\n allNodes[index].childElementCount !== 1 && !isNOU(allNodes[index].getAttribute('style')) &&\n allNodes[index].getAttribute('style').indexOf('mso-list:') >= 0) {\n if (allNodes[index].className.indexOf('MsoListParagraphCxSpFirst') >= 0 && listNodes.length > 0 &&\n listNodes[listNodes.length - 1] !== null) {\n listNodes.push(null);\n }\n listNodes.push(allNodes[index]);\n }\n if (prevflagState && (this.blockNode.indexOf(allNodes[index].nodeName.toLowerCase()) !== -1) &&\n !(allNodes[index].className &&\n allNodes[index].className.toLowerCase().indexOf('msolistparagraph') !== -1 && !isNOU(allNodes[index].getAttribute('style')) &&\n allNodes[index].getAttribute('style').indexOf('mso-list:') >= 0)) {\n listNodes.push(null);\n }\n if (this.blockNode.indexOf(allNodes[index].nodeName.toLowerCase()) !== -1) {\n if (allNodes[index].className &&\n allNodes[index].className.toLowerCase().indexOf('msolistparagraph') !== -1 && !isNOU(allNodes[index].getAttribute('style')) &&\n allNodes[index].getAttribute('style').indexOf('mso-list:') >= 0) {\n prevflagState = true;\n }\n else {\n prevflagState = false;\n }\n }\n }\n if (listNodes.length && (listNodes[listNodes.length - 1] !== null)) {\n listNodes.push(null);\n }\n return listNodes;\n };\n MsWordPaste.prototype.listConverter = function (listNodes) {\n var level;\n var data = [];\n var collection = [];\n var content = '';\n var stNode;\n var currentListStyle = '';\n for (var i = 0; i < listNodes.length; i++) {\n if (listNodes[i] === null) {\n data.push({ content: this.makeConversion(collection), node: listNodes[i - 1] });\n collection = [];\n continue;\n }\n if (listNodes[i].getAttribute('style') && listNodes[i].getAttribute('style').indexOf('mso-outline-level') !== -1) {\n listNodes[i].setAttribute('style', listNodes[i].getAttribute('style').replace('mso-outline-level', 'mso-outline'));\n }\n content = listNodes[i].getAttribute('style');\n if (content && content.indexOf('level') !== -1) {\n // eslint-disable-next-line\n level = parseInt(content.charAt(content.indexOf('level') + 5), null);\n }\n else {\n level = 1;\n }\n this.listContents = [];\n this.getListContent(listNodes[i]);\n var type = void 0;\n var listStyleType = void 0;\n if (!isNOU(this.listContents[0])) {\n type = this.listContents[0].trim().length > 1 ? 'ol' : 'ul';\n listStyleType = this.getlistStyleType(this.listContents[0], type);\n var tempNode = [];\n for (var j = 1; j < this.listContents.length; j++) {\n tempNode.push(this.listContents[j]);\n }\n var currentClassName = void 0;\n if (!isNOU(listNodes[i].className)) {\n currentClassName = listNodes[i].className;\n }\n if (!isNOU(listNodes[i].getAttribute('style'))) {\n listNodes[i].setAttribute('style', listNodes[i].getAttribute('style').replace('text-align:start;', ''));\n if (listNodes[i].style.textAlign !== '') {\n listNodes[i].setAttribute('style', 'text-align:' + listNodes[i].style.textAlign);\n currentListStyle = listNodes[i].getAttribute('style');\n }\n }\n collection.push({ listType: type, content: tempNode, nestedLevel: level, class: currentClassName,\n listStyle: currentListStyle, listStyleTypeName: listStyleType });\n }\n }\n stNode = listNodes.shift();\n while (stNode) {\n var elemColl = [];\n for (var temp1 = 0; temp1 < data.length; temp1++) {\n if (data[temp1].node === stNode) {\n for (var index = 0; index < data[temp1].content.childNodes.length; index++) {\n elemColl.push(data[temp1].content.childNodes[index]);\n }\n for (var index = 0; index < elemColl.length; index++) {\n stNode.parentElement.insertBefore(elemColl[index], stNode);\n }\n break;\n }\n }\n stNode.remove();\n stNode = listNodes.shift();\n if (!stNode) {\n stNode = listNodes.shift();\n }\n }\n };\n MsWordPaste.prototype.getlistStyleType = function (listContent, type) {\n var currentListClass;\n if (type === 'ol') {\n switch (listContent.split('.')[0]) {\n case \"A\":\n currentListClass = \"upper-alpha\";\n break;\n case \"a\":\n currentListClass = \"lower-alpha\";\n break;\n case \"I\":\n currentListClass = \"upper-roman\";\n break;\n case \"i\":\n currentListClass = \"lower-roman\";\n break;\n case \"α\":\n currentListClass = \"lower-greek\";\n break;\n default:\n currentListClass = \"decimal\";\n break;\n }\n }\n else {\n switch (listContent.split('.')[0]) {\n case \"o\":\n currentListClass = \"circle\";\n break;\n case \"§\":\n currentListClass = \"square\";\n break;\n default:\n currentListClass = \"disc\";\n break;\n }\n }\n return currentListClass;\n };\n MsWordPaste.prototype.makeConversion = function (collection) {\n var root = createElement('div');\n var temp;\n var pLevel = 1;\n var prevList;\n var listCount = 0;\n var elem;\n for (var index = 0; index < collection.length; index++) {\n var pElement = createElement('p');\n pElement.innerHTML = collection[index].content.join(' ');\n if ((collection[index].nestedLevel === 1) && listCount === 0 && collection[index].content) {\n root.appendChild(temp = createElement(collection[index].listType));\n prevList = createElement('li');\n prevList.appendChild(pElement);\n temp.appendChild(prevList);\n temp.setAttribute('level', collection[index].nestedLevel.toString());\n temp.style.listStyleType = collection[index].listStyleTypeName;\n }\n else if (collection[index].nestedLevel === pLevel) {\n if (prevList.parentElement.tagName.toLowerCase() === collection[index].listType) {\n prevList.parentElement.appendChild(prevList = createElement('li'));\n prevList.appendChild(pElement);\n }\n else {\n temp = createElement(collection[index].listType);\n temp.style.listStyleType = collection[index].listStyleTypeName;\n prevList.parentElement.parentElement.appendChild(temp);\n prevList = createElement('li');\n prevList.appendChild(pElement);\n temp.appendChild(prevList);\n temp.setAttribute('level', collection[index].nestedLevel.toString());\n }\n }\n else if (collection[index].nestedLevel > pLevel) {\n if (!isNOU(prevList)) {\n for (var j = 0; j < collection[index].nestedLevel - pLevel; j++) {\n prevList.appendChild(temp = createElement(collection[index].listType));\n prevList = createElement('li');\n if (j != collection[index].nestedLevel - pLevel - 1 && collection[index].nestedLevel - pLevel > 1) {\n prevList.style.listStyleType = \"none\";\n }\n temp.appendChild(prevList);\n }\n prevList.appendChild(pElement);\n temp.setAttribute('level', collection[index].nestedLevel.toString());\n temp.style.listStyleType = collection[index].listStyleTypeName;\n }\n else {\n root.appendChild(temp = createElement(collection[index].listType));\n prevList = createElement('li');\n prevList.appendChild(pElement);\n temp.appendChild(prevList);\n temp.setAttribute('level', collection[index].nestedLevel.toString());\n temp.style.listStyleType = collection[index].listStyleTypeName;\n }\n }\n else if (collection[index].nestedLevel === 1) {\n if (root.lastChild.tagName.toLowerCase() === collection[index].listType) {\n temp = root.lastChild;\n }\n else {\n root.appendChild(temp = createElement(collection[index].listType));\n temp.style.listStyleType = collection[index].listStyleTypeName;\n }\n prevList = createElement('li');\n prevList.appendChild(pElement);\n temp.appendChild(prevList);\n temp.setAttribute('level', collection[index].nestedLevel.toString());\n }\n else {\n elem = prevList;\n while (elem.parentElement) {\n elem = elem.parentElement;\n if (elem.attributes.getNamedItem('level')) {\n // eslint-disable-next-line\n if (parseInt(elem.attributes.getNamedItem('level').textContent, null) === collection[index].nestedLevel) {\n prevList = createElement('li');\n prevList.appendChild(pElement);\n elem.appendChild(prevList);\n break;\n // eslint-disable-next-line\n }\n else if (collection[index].nestedLevel > parseInt(elem.attributes.getNamedItem('level').textContent, null)) {\n elem.appendChild(temp = createElement(collection[index].listType));\n prevList = createElement('li');\n prevList.appendChild(pElement);\n temp.appendChild(prevList);\n temp.setAttribute('level', collection[index].nestedLevel.toString());\n temp.style.listStyleType = collection[index].listStyleTypeName;\n break;\n }\n }\n continue;\n }\n }\n prevList.setAttribute('class', collection[index].class);\n var currentStyle = prevList.getAttribute('style');\n prevList.setAttribute('style', (!isNOU(currentStyle) ? currentStyle : ''));\n pLevel = collection[index].nestedLevel;\n listCount++;\n }\n return root;\n };\n MsWordPaste.prototype.getListContent = function (elem) {\n var pushContent = '';\n var firstChild = elem.firstElementChild;\n if (firstChild.textContent.trim() === '' && !isNOU(firstChild.firstElementChild) &&\n firstChild.firstElementChild.nodeName === 'IMG') {\n pushContent = elem.innerHTML.trim();\n this.listContents.push('');\n this.listContents.push(pushContent);\n }\n else {\n var styleNodes = ['b', 'em'];\n if (firstChild.childNodes.length > 0 && (firstChild.querySelectorAll('b').length > 0\n || firstChild.querySelectorAll('em').length > 0)) {\n for (var i = 0; i < firstChild.childNodes.length; i++) {\n var nodeName = firstChild.childNodes[i].nodeName.toLowerCase();\n if (firstChild.childNodes[i].textContent.trim().length > 1 && styleNodes.indexOf(nodeName) !== -1) {\n pushContent = '<' + nodeName + '>' + firstChild.childNodes[i].textContent + '';\n this.listContents.push(pushContent);\n }\n else if (firstChild.childNodes[i].textContent.trim().length === 1) {\n this.listContents.push(firstChild.childNodes[i].textContent.trim());\n }\n }\n }\n else {\n pushContent = firstChild.textContent.trim();\n this.listContents.push(pushContent);\n }\n }\n detach(firstChild);\n this.listContents.push(elem.innerHTML);\n };\n return MsWordPaste;\n}());\nexport { MsWordPaste };\n","import * as CONSTANT from '../base/constant';\nimport { InsertHtml } from './inserthtml';\n/**\n * Insert a Text Node or Text\n *\n * @hidden\n\n */\nvar InsertTextExec = /** @class */ (function () {\n /**\n * Constructor for creating the InsertText plugin\n *\n * @param {EditorManager} parent - specifies the parent element\n * @hidden\n\n */\n function InsertTextExec(parent) {\n this.parent = parent;\n this.addEventListener();\n }\n InsertTextExec.prototype.addEventListener = function () {\n this.parent.observer.on(CONSTANT.INSERT_TEXT_TYPE, this.insertText, this);\n };\n InsertTextExec.prototype.insertText = function (e) {\n var node = document.createTextNode(e.value);\n InsertHtml.Insert(this.parent.currentDocument, node);\n if (e.callBack) {\n e.callBack({\n requestType: e.subCommand,\n editorMode: 'HTML',\n event: e.event,\n range: this.parent.nodeSelection.getRange(this.parent.currentDocument),\n elements: this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument)\n });\n }\n };\n return InsertTextExec;\n}());\nexport { InsertTextExec };\n","import { Observer } from '@syncfusion/ej2-base';\nimport * as CONSTANT from './constant';\nimport { Lists } from './../plugin/lists';\nimport { NodeSelection } from './../../selection/index';\nimport { DOMNode } from './../plugin/dom-node';\nimport { Formats } from './../plugin/formats';\nimport { LinkCommand } from './../plugin/link';\nimport { Alignments } from './../plugin/alignments';\nimport { Indents } from './../plugin/indents';\nimport { ImageCommand } from './../plugin/image';\nimport { TableCommand } from './../plugin/table';\nimport { SelectionBasedExec } from './../plugin/selection-exec';\nimport { InsertHtmlExec } from './../plugin/inserthtml-exec';\nimport { ClearFormatExec } from './../plugin/clearformat-exec';\nimport { UndoRedoManager } from './../plugin/undo';\nimport { MsWordPaste } from '../plugin/ms-word-clean-up';\nimport * as EVENTS from './../../common/constant';\nimport { InsertTextExec } from '../plugin/insert-text';\nimport { NodeCutter } from '../plugin/nodecutter';\n/**\n * EditorManager internal component\n *\n * @hidden\n\n */\nvar EditorManager = /** @class */ (function () {\n /**\n * Constructor for creating the component\n *\n * @hidden\n\n * @param {ICommandModel} options - specifies the command Model\n */\n function EditorManager(options) {\n this.currentDocument = options.document;\n this.editableElement = options.editableElement;\n this.nodeSelection = new NodeSelection();\n this.nodeCutter = new NodeCutter();\n this.domNode = new DOMNode(this.editableElement, this.currentDocument);\n this.observer = new Observer(this);\n this.listObj = new Lists(this);\n this.formatObj = new Formats(this);\n this.alignmentObj = new Alignments(this);\n this.indentsObj = new Indents(this);\n this.linkObj = new LinkCommand(this);\n this.imgObj = new ImageCommand(this);\n this.selectionObj = new SelectionBasedExec(this);\n this.inserthtmlObj = new InsertHtmlExec(this);\n this.insertTextObj = new InsertTextExec(this);\n this.clearObj = new ClearFormatExec(this);\n this.tableObj = new TableCommand(this);\n this.undoRedoManager = new UndoRedoManager(this, options.options);\n this.msWordPaste = new MsWordPaste(this);\n this.wireEvents();\n }\n EditorManager.prototype.wireEvents = function () {\n this.observer.on(EVENTS.KEY_DOWN, this.editorKeyDown, this);\n this.observer.on(EVENTS.KEY_UP, this.editorKeyUp, this);\n this.observer.on(EVENTS.KEY_UP, this.editorKeyUp, this);\n this.observer.on(EVENTS.MODEL_CHANGED, this.onPropertyChanged, this);\n this.observer.on(EVENTS.MS_WORD_CLEANUP, this.onWordPaste, this);\n this.observer.on(EVENTS.ON_BEGIN, this.onBegin, this);\n };\n EditorManager.prototype.onWordPaste = function (e) {\n this.observer.notify(EVENTS.MS_WORD_CLEANUP_PLUGIN, e);\n };\n EditorManager.prototype.onPropertyChanged = function (props) {\n this.observer.notify(EVENTS.MODEL_CHANGED_PLUGIN, props);\n };\n EditorManager.prototype.editorKeyDown = function (e) {\n this.observer.notify(EVENTS.KEY_DOWN_HANDLER, e);\n };\n EditorManager.prototype.editorKeyUp = function (e) {\n this.observer.notify(EVENTS.KEY_UP_HANDLER, e);\n };\n EditorManager.prototype.onBegin = function (e) {\n this.observer.notify(EVENTS.SPACE_ACTION, e);\n };\n /* eslint-disable */\n /**\n * execCommand\n *\n * @param {ExecCommand} command - specifies the execution command\n * @param {T} value - specifes the value.\n * @param {Event} event - specifies the call back event\n * @param {Function} callBack - specifies the function\n * @param {string} text - specifies the string value\n * @param {T} exeValue - specifies the values to be executed\n * @param {string} selector - specifies the selector values\n * @returns {void}\n * @hidden\n\n */\n /* eslint-enable */\n EditorManager.prototype.execCommand = function (command, value, event, callBack, text, exeValue, selector, enterAction) {\n switch (command.toLowerCase()) {\n case 'lists':\n this.observer.notify(EVENTS.LIST_TYPE, { subCommand: value, event: event, callBack: callBack,\n selector: selector, item: exeValue, enterAction: enterAction });\n break;\n case 'formats':\n this.observer.notify(EVENTS.FORMAT_TYPE, { subCommand: value, event: event, callBack: callBack,\n selector: selector, exeValue: exeValue, enterAction: enterAction\n });\n break;\n case 'alignments':\n this.observer.notify(CONSTANT.ALIGNMENT_TYPE, {\n subCommand: value, event: event, callBack: callBack,\n selector: selector,\n value: exeValue\n });\n break;\n case 'indents':\n this.observer.notify(CONSTANT.INDENT_TYPE, { subCommand: value, event: event, callBack: callBack, selector: selector });\n break;\n case 'links':\n this.observer.notify(CONSTANT.LINK, { command: command, value: value, item: exeValue, event: event, callBack: callBack });\n break;\n case 'files':\n this.observer.notify(CONSTANT.IMAGE, {\n command: command, value: 'Image', item: exeValue, event: event, callBack: callBack, selector: selector\n });\n break;\n case 'images':\n this.observer.notify(CONSTANT.IMAGE, {\n command: command, value: value, item: exeValue, event: event, callBack: callBack, selector: selector\n });\n break;\n case 'table':\n switch (value.toString().toLocaleLowerCase()) {\n case 'createtable':\n this.observer.notify(CONSTANT.TABLE, { item: exeValue, event: event, callBack: callBack, enterAction: enterAction });\n break;\n case 'insertrowbefore':\n case 'insertrowafter':\n this.observer.notify(CONSTANT.INSERT_ROW, { item: exeValue, event: event, callBack: callBack });\n break;\n case 'insertcolumnleft':\n case 'insertcolumnright':\n this.observer.notify(CONSTANT.INSERT_COLUMN, { item: exeValue, event: event, callBack: callBack });\n break;\n case 'deleterow':\n this.observer.notify(CONSTANT.DELETEROW, { item: exeValue, event: event, callBack: callBack });\n break;\n case 'deletecolumn':\n this.observer.notify(CONSTANT.DELETECOLUMN, { item: exeValue, event: event, callBack: callBack });\n break;\n case 'tableremove':\n this.observer.notify(CONSTANT.REMOVETABLE, { item: exeValue, event: event, callBack: callBack });\n break;\n case 'tableheader':\n this.observer.notify(CONSTANT.TABLEHEADER, { item: exeValue, event: event, callBack: callBack });\n break;\n case 'aligntop':\n case 'alignmiddle':\n case 'alignbottom':\n this.observer.notify(CONSTANT.TABLE_VERTICAL_ALIGN, { item: exeValue, event: event, callBack: callBack });\n break;\n case 'merge':\n this.observer.notify(CONSTANT.TABLE_MERGE, { item: exeValue, event: event, callBack: callBack });\n break;\n case 'horizontalsplit':\n this.observer.notify(CONSTANT.TABLE_HORIZONTAL_SPLIT, { item: exeValue, event: event, callBack: callBack });\n break;\n case 'verticalsplit':\n this.observer.notify(CONSTANT.TABLE_VERTICAL_SPLIT, { item: exeValue, event: event, callBack: callBack });\n break;\n }\n break;\n case 'font':\n case 'style':\n case 'effects':\n case 'casing':\n this.observer.notify(CONSTANT.SELECTION_TYPE, { subCommand: value, event: event, callBack: callBack, value: text, selector: selector, enterAction: enterAction });\n break;\n case 'inserthtml':\n this.observer.notify(CONSTANT.INSERTHTML_TYPE, { subCommand: value, callBack: callBack, value: text });\n break;\n case 'inserttext':\n this.observer.notify(CONSTANT.INSERT_TEXT_TYPE, { subCommand: value, callBack: callBack, value: text });\n break;\n case 'clear':\n this.observer.notify(CONSTANT.CLEAR_TYPE, { subCommand: value, event: event, callBack: callBack, selector: selector, enterAction: enterAction });\n break;\n case 'actions':\n this.observer.notify(EVENTS.ACTION, { subCommand: value, event: event, callBack: callBack, selector: selector });\n break;\n }\n };\n return EditorManager;\n}());\nexport { EditorManager };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { Formatter } from './formatter';\nimport { EditorManager } from './../../editor-manager/base/editor-manager';\nimport { extend } from '@syncfusion/ej2-base';\nimport { htmlKeyConfig } from './../../common/config';\n/**\n * HTML adapter\n *\n * @hidden\n\n */\nvar HTMLFormatter = /** @class */ (function (_super) {\n __extends(HTMLFormatter, _super);\n function HTMLFormatter(options) {\n var _this = _super.call(this) || this;\n _this.initialize();\n extend(_this, _this, options, true);\n if (_this.currentDocument && _this.element) {\n _this.updateFormatter(_this.element, _this.currentDocument, options.options);\n }\n return _this;\n }\n HTMLFormatter.prototype.initialize = function () {\n this.keyConfig = htmlKeyConfig;\n };\n /**\n * Update the formatter of RichTextEditor\n *\n * @param {Element} editElement - specifies the edit element.\n * @param {Document} doc - specifies the doucment\n * @param {number} options - specifies the options\n * @returns {void}\n * @hidden\n\n */\n HTMLFormatter.prototype.updateFormatter = function (editElement, doc, options) {\n if (editElement && doc) {\n this.editorManager = new EditorManager({\n document: doc,\n editableElement: editElement,\n options: options\n });\n }\n };\n return HTMLFormatter;\n}(Formatter));\nexport { HTMLFormatter };\n","import { IsFormatted } from './isformatted';\nimport * as CONSTANT from './../base/constant';\nimport { NodeSelection } from './../../selection/index';\nimport { getDefaultHtmlTbStatus } from './../../common/util';\n/**\n * Update Toolbar Status\n *\n * @hidden\n\n */\nexport var statusCollection = getDefaultHtmlTbStatus();\nvar ToolbarStatus = /** @class */ (function () {\n function ToolbarStatus() {\n }\n /**\n * get method\n *\n * @param {Document} docElement - specifies the document element\n * @param {Node} targetNode - specifies the target node\n * @param {string[]} formatNode - specifies the format node\n * @param {string[]} fontSize - specifies the font size\n * @param {string[]} fontName - specifies the font name.\n * @param {Node} documentNode - specifies the document node.\n * @returns {IToolbarStatus} - returns the toolbar status\n * @hidden\n\n */\n ToolbarStatus.get = function (docElement, targetNode, formatNode, fontSize, fontName, documentNode) {\n var formatCollection = JSON.parse(JSON.stringify(statusCollection));\n var nodeCollection = JSON.parse(JSON.stringify(statusCollection));\n var nodeSelection = new NodeSelection();\n var nodes = documentNode ? [documentNode] : nodeSelection.getNodeCollection(nodeSelection.getRange(docElement));\n var nodesLength = nodes.length;\n var isNodeChanged = false;\n var range = nodeSelection.getRange(docElement);\n for (var index = 0; index < nodes.length; index++) {\n while (nodes[index].nodeType === 3 && range.startContainer.nodeType === 3 && nodes[index].parentNode &&\n nodes[index].parentNode.lastElementChild && nodes[index].parentNode.lastElementChild.nodeName !== 'BR' &&\n (this.getImmediateBlockNode(nodes[index].parentNode)).textContent.replace(/\\u200B/g, '').length === 0 &&\n range.startContainer.textContent.replace(/\\u200B/g, '').length === 0 &&\n nodeSelection.get(docElement).toString().replace(/\\u200B/g, '').length === 0) {\n nodes[index] = nodes[index].parentNode.lastElementChild.firstChild;\n isNodeChanged = true;\n }\n if (isNodeChanged && nodes[index]) {\n nodeSelection.setCursorPoint(docElement, nodes[index], nodes[index].textContent.length);\n isNodeChanged = false;\n }\n if ((nodes[index].nodeName !== 'BR' && nodes[index].nodeType !== 3) ||\n (nodesLength > 1 && nodes[index].nodeType === 3 && nodes[index].textContent.trim() === '')) {\n nodes.splice(index, 1);\n index--;\n }\n }\n for (var index = 0; index < nodes.length; index++) {\n formatCollection = this.getFormatParent(docElement, formatCollection, nodes[index], targetNode, formatNode, fontSize, fontName);\n if ((index === 0 && formatCollection.bold) || !formatCollection.bold) {\n nodeCollection.bold = formatCollection.bold;\n }\n if ((index === 0 && formatCollection.insertcode) || !formatCollection.insertcode) {\n nodeCollection.insertcode = formatCollection.insertcode;\n }\n if ((index === 0 && formatCollection.italic) || !formatCollection.italic) {\n nodeCollection.italic = formatCollection.italic;\n }\n if ((index === 0 && formatCollection.underline) || !formatCollection.underline) {\n nodeCollection.underline = formatCollection.underline;\n }\n if ((index === 0 && formatCollection.strikethrough) || !formatCollection.strikethrough) {\n nodeCollection.strikethrough = formatCollection.strikethrough;\n }\n if ((index === 0 && formatCollection.superscript) || !formatCollection.superscript) {\n nodeCollection.superscript = formatCollection.superscript;\n }\n if ((index === 0 && formatCollection.subscript) || !formatCollection.subscript) {\n nodeCollection.subscript = formatCollection.subscript;\n }\n if ((index === 0 && formatCollection.fontcolor) || !formatCollection.fontcolor) {\n nodeCollection.fontcolor = formatCollection.fontcolor;\n }\n if ((index === 0 && formatCollection.fontname) || !formatCollection.fontname) {\n nodeCollection.fontname = formatCollection.fontname;\n }\n if ((index === 0 && formatCollection.fontsize) || !formatCollection.fontsize) {\n nodeCollection.fontsize = formatCollection.fontsize;\n }\n if ((index === 0 && formatCollection.backgroundcolor) || !formatCollection.backgroundcolor) {\n nodeCollection.backgroundcolor = formatCollection.backgroundcolor;\n }\n if ((index === 0 && formatCollection.orderedlist) || !formatCollection.orderedlist) {\n nodeCollection.orderedlist = formatCollection.orderedlist;\n }\n if ((index === 0 && formatCollection.unorderedlist) || !formatCollection.unorderedlist) {\n nodeCollection.unorderedlist = formatCollection.unorderedlist;\n }\n if ((index === 0 && formatCollection.alignments) || !formatCollection.alignments) {\n nodeCollection.alignments = formatCollection.alignments;\n }\n if ((index === 0 && formatCollection.formats) || !formatCollection.formats) {\n nodeCollection.formats = formatCollection.formats;\n }\n if ((index === 0 && formatCollection.createlink) || !formatCollection.createlink) {\n nodeCollection.createlink = formatCollection.createlink;\n }\n if ((index === 0 && formatCollection.numberFormatList) || !formatCollection.numberFormatList) {\n nodeCollection.numberFormatList = formatCollection.numberFormatList;\n }\n if ((index === 0 && formatCollection.bulletFormatList) || !formatCollection.bulletFormatList) {\n nodeCollection.bulletFormatList = formatCollection.bulletFormatList;\n }\n formatCollection = JSON.parse(JSON.stringify(statusCollection));\n }\n return nodeCollection;\n };\n ToolbarStatus.getImmediateBlockNode = function (node) {\n do {\n node = node.parentNode;\n } while (node && CONSTANT.BLOCK_TAGS.indexOf(node.nodeName.toLocaleLowerCase()) < 0);\n return node;\n };\n ToolbarStatus.getFormatParent = function (docElement, formatCollection, node, targetNode, formatNode, fontSize, fontName) {\n if (targetNode.contains(node) ||\n (node.nodeType === 3 && targetNode.nodeType !== 3 && targetNode.contains(node.parentNode))) {\n do {\n formatCollection = this.isFormattedNode(docElement, formatCollection, node, formatNode, fontSize, fontName);\n node = node.parentNode;\n } while (node && (node !== targetNode));\n }\n return formatCollection;\n };\n ToolbarStatus.isFormattedNode = function (docElement, formatCollection, node, formatNode, fontSize, fontName) {\n if (!formatCollection.bold) {\n formatCollection.bold = IsFormatted.isBold(node);\n }\n if (!formatCollection.italic) {\n formatCollection.italic = IsFormatted.isItalic(node);\n }\n if (!formatCollection.underline) {\n formatCollection.underline = IsFormatted.isUnderline(node);\n }\n if (!formatCollection.strikethrough) {\n formatCollection.strikethrough = IsFormatted.isStrikethrough(node);\n }\n if (!formatCollection.superscript) {\n formatCollection.superscript = IsFormatted.isSuperscript(node);\n }\n if (!formatCollection.subscript) {\n formatCollection.subscript = IsFormatted.isSubscript(node);\n }\n if (!formatCollection.fontcolor) {\n formatCollection.fontcolor = this.isFontColor(docElement, node);\n }\n if (!formatCollection.fontname) {\n formatCollection.fontname = this.isFontName(docElement, node, fontName);\n }\n if (!formatCollection.fontsize) {\n formatCollection.fontsize = this.isFontSize(node, fontSize);\n }\n if (!formatCollection.backgroundcolor) {\n formatCollection.backgroundcolor = this.isBackgroundColor(node);\n }\n if (!formatCollection.orderedlist) {\n formatCollection.orderedlist = this.isOrderedList(node);\n }\n if (!formatCollection.unorderedlist) {\n formatCollection.unorderedlist = this.isUnorderedList(node);\n }\n if (!formatCollection.alignments) {\n formatCollection.alignments = this.isAlignment(node);\n }\n if (!formatCollection.formats) {\n formatCollection.formats = this.isFormats(node, formatNode);\n if (formatCollection.formats === 'pre') {\n formatCollection.insertcode = true;\n }\n }\n if (!formatCollection.createlink) {\n formatCollection.createlink = this.isLink(node);\n }\n if (!formatCollection.numberFormatList) {\n formatCollection.numberFormatList = this.isNumberFormatList(node);\n }\n if (!formatCollection.bulletFormatList) {\n formatCollection.bulletFormatList = this.isBulletFormatList(node);\n }\n return formatCollection;\n };\n ToolbarStatus.isFontColor = function (docElement, node) {\n var color = node.style && node.style.color;\n if ((color === null || color === undefined || color === '') && node.nodeType !== 3) {\n color = this.getComputedStyle(docElement, node, 'color');\n }\n if (color !== null && color !== '' && color !== undefined) {\n return color;\n }\n else {\n return null;\n }\n };\n ToolbarStatus.isLink = function (node) {\n if (node.nodeName.toLocaleLowerCase() === 'a') {\n return true;\n }\n else {\n return false;\n }\n };\n ToolbarStatus.isBackgroundColor = function (node) {\n var backColor = node.style && node.style.backgroundColor;\n if (backColor !== null && backColor !== '' && backColor !== undefined) {\n return backColor;\n }\n else {\n return null;\n }\n };\n ToolbarStatus.isFontSize = function (node, fontSize) {\n var size = node.style && node.style.fontSize;\n if ((size !== null && size !== '' && size !== undefined)\n && (fontSize === null || fontSize === undefined || (fontSize.indexOf(size) > -1))) {\n return size;\n }\n else {\n return null;\n }\n };\n ToolbarStatus.isFontName = function (docElement, node, fontName) {\n var name = node.style && node.style.fontFamily;\n if ((name === null || name === undefined || name === '') && node.nodeType !== 3) {\n name = this.getComputedStyle(docElement, node, 'font-family');\n }\n var index = null;\n if ((name !== null && name !== '' && name !== undefined)\n && (fontName === null || fontName === undefined || (fontName.filter(function (value, pos) {\n var pattern = new RegExp(name, 'i');\n if ((value.replace(/\"/g, '').replace(/ /g, '') === name.replace(/\"/g, '').replace(/ /g, '')) ||\n (value.search(pattern) > -1)) {\n index = pos;\n }\n }) && (index !== null)))) {\n return (index !== null) ? fontName[index] : name.replace(/\"/g, '');\n }\n else {\n return null;\n }\n };\n ToolbarStatus.isOrderedList = function (node) {\n if (node.nodeName.toLocaleLowerCase() === 'ol') {\n return true;\n }\n else {\n return false;\n }\n };\n ToolbarStatus.isUnorderedList = function (node) {\n if (node.nodeName.toLocaleLowerCase() === 'ul') {\n return true;\n }\n else {\n return false;\n }\n };\n ToolbarStatus.isAlignment = function (node) {\n var align = node.style && node.style.textAlign;\n if (align === 'left') {\n return 'justifyleft';\n }\n else if (align === 'center') {\n return 'justifycenter';\n }\n else if (align === 'right') {\n return 'justifyright';\n }\n else if (align === 'justify') {\n return 'justifyfull';\n }\n else {\n return null;\n }\n };\n ToolbarStatus.isFormats = function (node, formatNode) {\n if (((formatNode === undefined || formatNode === null)\n && CONSTANT.BLOCK_TAGS.indexOf(node.nodeName.toLocaleLowerCase()) > -1)\n || (formatNode !== null && formatNode !== undefined\n && formatNode.indexOf(node.nodeName.toLocaleLowerCase()) > -1)) {\n return node.nodeName.toLocaleLowerCase();\n }\n else {\n return null;\n }\n };\n ToolbarStatus.getComputedStyle = function (docElement, node, prop) {\n return docElement.defaultView.getComputedStyle(node, null).getPropertyValue(prop);\n };\n ToolbarStatus.isNumberFormatList = function (node) {\n var list = node.style && node.style.listStyleType;\n if (list === 'lower-alpha') {\n return 'Lower Alpha';\n }\n else if (list === 'number') {\n return 'Number';\n }\n else if (list === 'upper-alpha') {\n return 'Upper Alpha';\n }\n else if (list === 'lower-roman') {\n return 'Lower Roman';\n }\n else if (list === 'upper-roman') {\n return 'Upper Roman';\n }\n else if (list === 'lower-greek') {\n return 'Lower Greek';\n }\n else if (list === 'none') {\n return 'None';\n }\n else {\n return null;\n }\n };\n ToolbarStatus.isBulletFormatList = function (node) {\n var list = node.style && node.style.listStyleType;\n if (list === 'circle') {\n return 'Circle';\n }\n else if (list === 'square') {\n return 'Square';\n }\n else if (list === 'none') {\n return 'None';\n }\n else if (list === 'disc') {\n return 'Disc';\n }\n else {\n return null;\n }\n };\n return ToolbarStatus;\n}());\nexport { ToolbarStatus };\n","import * as events from '../base/constant';\nimport { ToolbarStatus } from '../../editor-manager/plugin/toolbar-status';\nimport { getDefaultHtmlTbStatus } from '../../common/util';\n/**\n * HtmlToolbarStatus module for refresh the toolbar status\n */\nvar HtmlToolbarStatus = /** @class */ (function () {\n function HtmlToolbarStatus(parent) {\n this.parent = parent;\n this.toolbarStatus = this.prevToolbarStatus = getDefaultHtmlTbStatus();\n this.addEventListener();\n }\n HtmlToolbarStatus.prototype.addEventListener = function () {\n this.parent.on(events.toolbarRefresh, this.onRefreshHandler, this);\n this.parent.on(events.destroy, this.removeEventListener, this);\n };\n HtmlToolbarStatus.prototype.removeEventListener = function () {\n this.parent.off(events.toolbarRefresh, this.onRefreshHandler);\n this.parent.off(events.destroy, this.removeEventListener);\n };\n HtmlToolbarStatus.prototype.onRefreshHandler = function (args) {\n if (this.parent.readonly) {\n return;\n }\n var fontsize = [];\n var fontName = [];\n var formats = [];\n this.parent.fontSize.items.forEach(function (item) {\n fontsize.push(item.value);\n });\n this.parent.fontFamily.items.forEach(function (item) {\n fontName.push(item.value);\n });\n this.parent.format.types.forEach(function (item) {\n formats.push(item.value.toLocaleLowerCase());\n });\n this.toolbarStatus = ToolbarStatus.get(this.parent.contentModule.getDocument(), this.parent.contentModule.getEditPanel(), formats, fontsize, fontName, args.documentNode);\n var tbStatusString = JSON.stringify(this.toolbarStatus);\n this.parent.notify(events.toolbarUpdated, this.toolbarStatus);\n if (JSON.stringify(this.prevToolbarStatus) !== tbStatusString) {\n this.parent.notify(events.updateTbItemsStatus, { html: JSON.parse(tbStatusString), markdown: null });\n this.prevToolbarStatus = JSON.parse(tbStatusString);\n }\n };\n return HtmlToolbarStatus;\n}());\nexport { HtmlToolbarStatus };\n","import { getEditValue } from '../base/util';\n/**\n * Content module is used to render Rich Text Editor content\n *\n * @hidden\n\n */\nvar ContentRender = /** @class */ (function () {\n /**\n * Constructor for content renderer module\n *\n * @param {IRichTextEditor} parent - specifies the parent element.\n * @param {ServiceLocator} serviceLocator - specifies the service.\n * @returns {void}\n */\n function ContentRender(parent, serviceLocator) {\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n }\n /**\n * The function is used to render Rich Text Editor content div\n *\n * @returns {void}\n * @hidden\n\n */\n ContentRender.prototype.renderPanel = function () {\n var rteObj = this.parent;\n var div = this.parent.createElement('div', { className: 'e-rte-content', id: this.parent.getID() + 'rte-view' });\n var rteContent = getEditValue(rteObj.value, rteObj);\n this.editableElement = this.parent.createElement('div', {\n className: 'e-content',\n id: this.parent.getID() + '_rte-edit-view',\n attrs: {\n 'contenteditable': 'true'\n },\n innerHTML: rteContent\n });\n div.appendChild(this.editableElement);\n this.setPanel(div);\n rteObj.element.appendChild(div);\n };\n /**\n * Get the content div element of RichTextEditor\n *\n * @returns {Element} - specifies the element.\n * @hidden\n\n */\n ContentRender.prototype.getPanel = function () {\n return this.contentPanel;\n };\n /**\n * Get the editable element of RichTextEditor\n *\n * @returns {Element} - specifies the return element.\n * @hidden\n\n */\n ContentRender.prototype.getEditPanel = function () {\n return this.editableElement;\n };\n /**\n * Returns the text content as string.\n *\n * @returns {string} - specifies the string element.\n */\n ContentRender.prototype.getText = function () {\n return this.getEditPanel().innerText;\n };\n /**\n * Set the content div element of RichTextEditor\n *\n * @param {Element} panel - specifies the panel element.\n * @returns {void}\n * @hidden\n\n */\n ContentRender.prototype.setPanel = function (panel) {\n this.contentPanel = panel;\n };\n /**\n * Get the document of RichTextEditor\n *\n * @returns {Document} - specifies the document.\n * @hidden\n\n */\n ContentRender.prototype.getDocument = function () {\n return this.getEditPanel().ownerDocument;\n };\n return ContentRender;\n}());\nexport { ContentRender };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { ContentRender } from '../renderer/content-renderer';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { getEditValue } from '../base/util';\nvar IFRAMEHEADER = \"\\n \\n \\n \\n \\n \\n \";\n/**\n * Content module is used to render Rich Text Editor content\n *\n * @hidden\n\n */\nvar IframeContentRender = /** @class */ (function (_super) {\n __extends(IframeContentRender, _super);\n function IframeContentRender() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * The function is used to render Rich Text Editor iframe\n *\n * @hidden\n\n */\n IframeContentRender.prototype.renderPanel = function () {\n var rteObj = this.parent;\n var rteContent = getEditValue(rteObj.value, rteObj);\n var iFrameBodyContent = '' +\n rteContent + '';\n var iFrameContent = IFRAMEHEADER + iFrameBodyContent;\n var iframe = this.parent.createElement('iframe', {\n id: this.parent.getID() + '_rte-view',\n className: 'e-rte-content',\n styles: 'display:block;',\n attrs: { 'srcdoc': iFrameContent }\n });\n this.setPanel(iframe);\n rteObj.element.appendChild(iframe);\n iframe.contentDocument.body.id = this.parent.getID() + '_rte-edit-view';\n iframe.contentDocument.body.setAttribute('aria-owns', this.parent.getID());\n iframe.contentDocument.open();\n iFrameContent = this.setThemeColor(iFrameContent, { color: '#333' });\n iframe.contentDocument.write(iFrameContent);\n iframe.contentDocument.close();\n if (rteObj.enableRtl) {\n this.contentPanel.contentDocument.body.setAttribute('class', 'e-rtl');\n }\n };\n IframeContentRender.prototype.setThemeColor = function (content, styles) {\n var fontColor = getComputedStyle(this.parent.element, '.e-richtexteditor').getPropertyValue('color');\n return content.replace(styles.color, fontColor);\n };\n /**\n * Get the editable element of RichTextEditor\n *\n * @returns {Element} - specifies the element.\n * @hidden\n\n */\n IframeContentRender.prototype.getEditPanel = function () {\n var editNode;\n if (!isNullOrUndefined(this.contentPanel.contentDocument)) {\n editNode = this.contentPanel.contentDocument.body;\n }\n else {\n editNode = this.parent.inputElement;\n }\n return editNode;\n };\n /**\n * Get the document of RichTextEditor\n *\n * @returns {void}\n * @hidden\n\n */\n IframeContentRender.prototype.getDocument = function () {\n return this.getEditPanel().ownerDocument;\n };\n return IframeContentRender;\n}(ContentRender));\nexport { IframeContentRender };\n","import * as events from '../base/constant';\nimport { detach, isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * XhtmlValidation module called when set enableXhtml as true\n */\nvar XhtmlValidation = /** @class */ (function () {\n function XhtmlValidation(parent) {\n this.parent = parent;\n this.addEventListener();\n }\n XhtmlValidation.prototype.addEventListener = function () {\n this.parent.on(events.xhtmlValidation, this.enableXhtmlValidation, this);\n this.parent.on(events.destroy, this.removeEventListener, this);\n };\n XhtmlValidation.prototype.removeEventListener = function () {\n this.parent.off(events.xhtmlValidation, this.enableXhtmlValidation);\n this.parent.off(events.destroy, this.removeEventListener);\n };\n XhtmlValidation.prototype.enableXhtmlValidation = function () {\n if (this.parent.enableXhtml) {\n if (isNullOrUndefined(this.parent.inputElement)) {\n this.currentElement = this.parent.element;\n }\n else {\n this.currentElement = this.parent.inputElement;\n }\n this.clean(this.currentElement);\n this.AddRootElement();\n this.ImageTags();\n this.removeTags();\n this.RemoveUnsupported();\n this.currentElement.innerHTML = this.selfEncloseValidation(this.currentElement.innerHTML, this.currentElement.innerText === \"\\n\" ?\n this.currentElement.innerText.length : this.currentElement.innerText.trim().length);\n this.parent.setProperties({ value: this.currentElement.innerHTML }, true);\n }\n };\n /**\n * @param {string} currentValue - specifies the string value.\n * @param {number} valueLength - specifies the length of the current value.\n * @returns {void}\n\n */\n XhtmlValidation.prototype.selfEncloseValidation = function (currentValue, valueLength) {\n if (valueLength === 0 && currentValue.indexOf('table') < 0 && currentValue.indexOf('img') < 0) {\n var arrayValue = currentValue.split(' ');\n arrayValue[arrayValue.length - 1] = '' + arrayValue[arrayValue.length - 1];\n currentValue = arrayValue.join('');\n }\n currentValue = currentValue.replace(/
/g, '
').replace(/
/g, '
').replace(/ /g, ' ');\n var valueTemp;\n var valueDupe = [];\n var valueOriginal = [];\n var imgRegexp = [//gi, //gi, //gi, //gi, //gi,\n //gi, //gi, //gi, //gi, //gi,\n //gi, //gi];\n for (var j = 0; j < imgRegexp.length; j++) {\n valueTemp = imgRegexp[j].exec(currentValue);\n while ((valueTemp) !== null) {\n valueDupe.push(valueTemp[0].toString());\n valueTemp = imgRegexp[j].exec(currentValue);\n }\n valueOriginal = valueDupe.slice(0);\n for (var i = 0; i < valueDupe.length; i++) {\n if (valueDupe[i].indexOf('/') === -1 || valueDupe[i].lastIndexOf('/') !== valueDupe[i].length - 2) {\n valueDupe[i] = valueDupe[i].substr(0, valueDupe[i].length - 1) + ' /' +\n valueDupe[i].substr(valueDupe[i].length - 1, valueDupe[i].length);\n }\n }\n for (var g = 0; g <= valueDupe.length - 1; g++) {\n currentValue = currentValue.replace(valueOriginal[g], valueDupe[g]);\n }\n }\n return currentValue;\n };\n XhtmlValidation.prototype.AddRootElement = function () {\n if ((this.currentElement.childNodes.length === 1 && this.currentElement.firstChild.nodeName !== 'DIV') ||\n this.currentElement.childNodes.length > 1) {\n var parentEle = this.parent.createElement('div');\n while (this.currentElement.childNodes.length > 0) {\n parentEle.appendChild(this.currentElement.childNodes[0]);\n }\n this.currentElement.appendChild(parentEle);\n }\n };\n XhtmlValidation.prototype.clean = function (node) {\n for (var n = 0; n < node.childNodes.length; n++) {\n var child = node.childNodes[n];\n if (child.nodeType === 8 || child.nodeName === 'V:IMAGE') {\n node.removeChild(child);\n n--;\n }\n else if (child.nodeType === 1) {\n this.clean(child);\n }\n }\n return this.currentElement.innerHTML;\n };\n XhtmlValidation.prototype.ImageTags = function () {\n var imgNodes = this.currentElement.querySelectorAll('IMG');\n for (var i = imgNodes.length - 1; i >= 0; i--) {\n if (!imgNodes[i].hasAttribute('alt')) {\n var img = imgNodes[i];\n img.setAttribute('alt', '');\n }\n }\n };\n XhtmlValidation.prototype.removeTags = function () {\n var removeAttribute = [['br', 'ul'], ['br', 'ol'], ['table', 'span'], ['div', 'span'], ['p', 'span']];\n for (var i = 0; i < removeAttribute.length; i++) {\n this.RemoveElementNode(removeAttribute[i][0], removeAttribute[i][1]);\n }\n };\n XhtmlValidation.prototype.RemoveElementNode = function (rmvNode, parentNode) {\n var parentArray = this.currentElement.querySelectorAll(parentNode);\n for (var i = 0; i < parentArray.length; i++) {\n var rmvArray = parentArray[i].querySelectorAll(rmvNode);\n for (var j = rmvArray.length; j > 0; j--) {\n detach(rmvArray[j - 1]);\n }\n }\n };\n XhtmlValidation.prototype.RemoveUnsupported = function () {\n var underlineEle = this.currentElement.querySelectorAll('u');\n for (var i = underlineEle.length - 1; i >= 0; i--) {\n var spanEle = this.parent.createElement('span');\n spanEle.style.textDecoration = 'underline';\n spanEle.innerHTML = underlineEle[i].innerHTML;\n underlineEle[i].parentNode.insertBefore(spanEle, underlineEle[i]);\n detach(underlineEle[i]);\n }\n var strongEle = this.currentElement.querySelectorAll('strong');\n for (var i = strongEle.length - 1; i >= 0; i--) {\n var boldEle = this.parent.createElement('b');\n boldEle.innerHTML = strongEle[i].innerHTML;\n strongEle[i].parentNode.insertBefore(boldEle, strongEle[i]);\n detach(strongEle[i]);\n }\n var attrArray = ['language', 'role', 'target', 'contenteditable', 'cellspacing',\n 'cellpadding', 'border', 'valign', 'colspan'];\n for (var i = 0; i <= attrArray.length; i++) {\n this.RemoveAttributeByName(attrArray[i]);\n }\n };\n XhtmlValidation.prototype.RemoveAttributeByName = function (attrName) {\n if (this.currentElement.firstChild !== null) {\n if (this.currentElement.firstChild.nodeType !== 3) {\n for (var i = 0; i < this.currentElement.childNodes.length; i++) {\n var ele = this.currentElement.childNodes[i];\n if (ele.nodeType !== 3 && ele.nodeName !== 'TABLE' && ele.nodeName !== 'TBODY' && ele.nodeName !== 'THEAD' &&\n ele.nodeName !== 'TH' && ele.nodeName !== 'TR' && ele.nodeName !== 'TD') {\n if (ele.hasAttribute(attrName)) {\n ele.removeAttribute(attrName);\n }\n if (ele.hasChildNodes()) {\n for (var j = 0; j < ele.childNodes.length; j++) {\n var childEle = ele.childNodes[j];\n if (childEle.nodeType !== 3 && childEle.nodeName !== 'TABLE' && childEle.nodeName !== 'TBODY' &&\n childEle.nodeName !== 'THEAD' && childEle.nodeName !== 'TH' && childEle.nodeName !== 'TR' &&\n childEle.nodeName !== 'TD' && childEle.hasAttribute(attrName)) {\n childEle.removeAttribute(attrName);\n }\n if (childEle.hasChildNodes()) {\n for (var k = 0; k < childEle.childNodes.length; k++) {\n if (childEle.childNodes[k].nodeType !== 3 && childEle.childNodes[k].nodeName !== 'TABLE' &&\n childEle.childNodes[k].nodeName !== 'TBODY' && childEle.childNodes[k].nodeName !== 'THEAD' &&\n childEle.childNodes[k].nodeName !== 'TH' && childEle.childNodes[k].nodeName !== 'TR'\n && childEle.childNodes[k].nodeName !== 'TD'\n && childEle.childNodes[k].hasAttribute(attrName)) {\n childEle.childNodes[k].removeAttribute(attrName);\n }\n }\n }\n }\n }\n }\n }\n }\n }\n };\n return XhtmlValidation;\n}());\nexport { XhtmlValidation };\n","import * as events from '../base/constant';\nimport { isNullOrUndefined, closest, attributes, removeClass, addClass, Browser, detach } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';\nimport { HTMLFormatter } from '../formatter/html-formatter';\nimport { RenderType } from '../base/enum';\nimport * as classes from '../base/classes';\nimport { HtmlToolbarStatus } from './html-toolbar-status';\nimport { IframeContentRender } from '../renderer/iframe-content-renderer';\nimport { ContentRender } from '../renderer/content-renderer';\nimport { ColorPickerInput } from './color-picker';\nimport { NodeSelection } from '../../selection/selection';\nimport { InsertHtml } from '../../editor-manager/plugin/inserthtml';\nimport { getTextNodesUnder, sanitizeHelper, getDefaultValue } from '../base/util';\nimport { isIDevice } from '../../common/util';\nimport { XhtmlValidation } from './xhtml-validation';\nimport { ON_BEGIN } from './../../common/constant';\n/**\n * `HtmlEditor` module is used to HTML editor\n */\nvar HtmlEditor = /** @class */ (function () {\n function HtmlEditor(parent, serviceLocator) {\n this.rangeCollection = [];\n this.isImageDelete = false;\n this.parent = parent;\n this.locator = serviceLocator;\n this.renderFactory = this.locator.getService('rendererFactory');\n this.xhtmlValidation = new XhtmlValidation(parent);\n this.addEventListener();\n }\n /**\n * Destroys the Markdown.\n *\n * @function destroy\n * @returns {void}\n * @hidden\n\n */\n HtmlEditor.prototype.destroy = function () {\n this.removeEventListener();\n };\n /**\n * @param {string} value - specifies the string value\n * @returns {void}\n * @hidden\n\n */\n HtmlEditor.prototype.sanitizeHelper = function (value) {\n value = sanitizeHelper(value, this.parent);\n return value;\n };\n HtmlEditor.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.nodeSelectionObj = new NodeSelection();\n this.colorPickerModule = new ColorPickerInput(this.parent, this.locator);\n this.parent.on(events.initialLoad, this.instantiateRenderer, this);\n this.parent.on(events.htmlToolbarClick, this.onToolbarClick, this);\n this.parent.on(events.keyDown, this.onKeyDown, this);\n this.parent.on(events.keyUp, this.onKeyUp, this);\n this.parent.on(events.renderColorPicker, this.renderColorPicker, this);\n this.parent.on(events.initialEnd, this.render, this);\n this.parent.on(events.modelChanged, this.onPropertyChanged, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.parent.on(events.selectAll, this.selectAll, this);\n this.parent.on(events.selectRange, this.selectRange, this);\n this.parent.on(events.getSelectedHtml, this.getSelectedHtml, this);\n this.parent.on(events.selectionSave, this.onSelectionSave, this);\n this.parent.on(events.selectionRestore, this.onSelectionRestore, this);\n this.parent.on(events.readOnlyMode, this.updateReadOnly, this);\n this.parent.on(events.paste, this.onPaste, this);\n };\n HtmlEditor.prototype.updateReadOnly = function () {\n if (this.parent.readonly) {\n attributes(this.parent.contentModule.getEditPanel(), { contenteditable: 'false' });\n addClass([this.parent.element], classes.CLS_RTE_READONLY);\n }\n else {\n attributes(this.parent.contentModule.getEditPanel(), { contenteditable: 'true' });\n removeClass([this.parent.element], classes.CLS_RTE_READONLY);\n }\n };\n HtmlEditor.prototype.onSelectionSave = function () {\n var currentDocument = this.contentRenderer.getDocument();\n var range = this.nodeSelectionObj.getRange(currentDocument);\n this.saveSelection = this.nodeSelectionObj.save(range, currentDocument);\n };\n HtmlEditor.prototype.onSelectionRestore = function (e) {\n this.parent.isBlur = false;\n this.contentRenderer.getEditPanel().focus();\n if (isNullOrUndefined(e.items) || e.items) {\n this.saveSelection.restore();\n }\n };\n HtmlEditor.prototype.onKeyUp = function (e) {\n var args = e.args;\n var restrictKeys = [8, 9, 13, 16, 17, 18, 20, 27, 37, 38, 39, 40, 44, 45, 46, 91,\n 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123];\n var range = this.parent.getRange();\n var regEx = new RegExp(String.fromCharCode(8203), 'g');\n var pointer;\n if (restrictKeys.indexOf(args.keyCode) < 0 && !args.shiftKey && !args.ctrlKey && !args.altKey) {\n if (range.startContainer.textContent.charCodeAt(0) === 8203) {\n pointer = range.startOffset - 1;\n range.startContainer.textContent = range.startContainer.textContent.replace(regEx, '');\n this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), range.startContainer, pointer);\n }\n if (!isNOU(range.startContainer.previousSibling) && !isNOU(range.startContainer.previousSibling.parentElement) &&\n range.startContainer.parentElement === range.startContainer.previousSibling.parentElement &&\n range.startContainer.previousSibling.textContent.charCodeAt(0) === 8203 &&\n range.startContainer.previousSibling.textContent.length <= 1) {\n range.startContainer.previousSibling.textContent = range.startContainer.previousSibling.textContent.replace(regEx, '');\n }\n if (range.endContainer.textContent.charCodeAt(range.endOffset) === 8203) {\n pointer = range.startOffset;\n range.endContainer.textContent = range.endContainer.textContent.replace(regEx, '');\n this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), range.startContainer, pointer);\n }\n }\n };\n HtmlEditor.prototype.onKeyDown = function (e) {\n var _this = this;\n var currentRange;\n var args = e.args;\n if (Browser.info.name === 'chrome') {\n currentRange = this.parent.getRange();\n this.backSpaceCleanup(e, currentRange);\n this.deleteCleanup(e, currentRange);\n }\n if (args.keyCode === 9 && this.parent.enableTabKey) {\n if (!isNOU(args.target) && isNullOrUndefined(closest(args.target, '.e-rte-toolbar'))) {\n var range = this.nodeSelectionObj.getRange(this.contentRenderer.getDocument());\n var parentNode = this.nodeSelectionObj.getParentNodeCollection(range);\n if (!((parentNode[0].nodeName === 'LI' || closest(parentNode[0], 'li') ||\n closest(parentNode[0], 'table')) && range.startOffset === 0)) {\n args.preventDefault();\n if (!args.shiftKey) {\n InsertHtml.Insert(this.contentRenderer.getDocument(), ' ');\n this.rangeCollection.push(this.nodeSelectionObj.getRange(this.contentRenderer.getDocument()));\n }\n else if (this.rangeCollection.length > 0 &&\n this.rangeCollection[this.rangeCollection.length - 1].startContainer.textContent.length === 4) {\n var textCont = this.rangeCollection[this.rangeCollection.length - 1].startContainer;\n this.nodeSelectionObj.setSelectionText(this.contentRenderer.getDocument(), textCont, textCont, 0, textCont.textContent.length);\n InsertHtml.Insert(this.contentRenderer.getDocument(), document.createTextNode(''));\n this.rangeCollection.pop();\n }\n }\n }\n }\n if (e.args.action === 'space' ||\n e.args.action === 'enter' ||\n e.args.keyCode === 13) {\n this.spaceLink(e.args);\n if (this.parent.editorMode === 'HTML' && !this.parent.readonly) {\n this.parent.notify(events.enterHandler, { args: e.args });\n }\n }\n if (e.args.action === 'space') {\n var currentRange_1 = this.parent.getRange();\n var editorValue = currentRange_1.startContainer.textContent.slice(0, currentRange_1.startOffset);\n var orderedList_1 = this.isOrderedList(editorValue);\n var unOrderedList = this.isUnOrderedList(editorValue);\n if (orderedList_1 && !unOrderedList || unOrderedList && !orderedList_1) {\n var eventArgs_1 = {\n callBack: null,\n event: e.args,\n name: 'keydown-handler'\n };\n var actionBeginArgs = {\n cancel: false,\n item: { command: 'Lists', subCommand: orderedList_1 ? 'OL' : 'UL' },\n name: 'actionBegin',\n originalEvent: e.args,\n requestType: orderedList_1 ? 'OL' : 'UL'\n };\n this.parent.trigger(events.actionBegin, actionBeginArgs, function (actionBeginArgs) {\n if (!actionBeginArgs.cancel) {\n _this.parent.formatter.editorManager.observer.notify(ON_BEGIN, eventArgs_1);\n _this.parent.trigger(events.actionComplete, {\n editorMode: _this.parent.editorMode,\n elements: _this.parent.formatter.editorManager.domNode.blockNodes(),\n event: e.args,\n name: events.actionComplete,\n range: _this.parent.getRange(),\n requestType: orderedList_1 ? 'OL' : 'UL'\n });\n }\n });\n }\n }\n if (Browser.info.name === 'chrome' && (!isNullOrUndefined(this.rangeElement) && !isNullOrUndefined(this.oldRangeElement) ||\n !isNullOrUndefined(this.deleteRangeElement) && !isNullOrUndefined(this.deleteOldRangeElement)) &&\n currentRange.startContainer.parentElement.tagName !== 'TD' && currentRange.startContainer.parentElement.tagName !== 'TH') {\n this.rangeElement = null;\n this.oldRangeElement = null;\n this.deleteRangeElement = null;\n this.deleteOldRangeElement = null;\n if (!this.isImageDelete) {\n args.preventDefault();\n }\n }\n };\n HtmlEditor.prototype.isOrderedList = function (editorValue) {\n editorValue = editorValue.replace(/\\u200B/g, '');\n var olListStartRegex = [/^[1]+[.]+$/, /^[i]+[.]+$/, /^[a]+[.]+$/];\n if (!isNullOrUndefined(editorValue)) {\n for (var i = 0; i < olListStartRegex.length; i++) {\n if (olListStartRegex[i].test(editorValue)) {\n return true;\n }\n }\n }\n return false;\n };\n HtmlEditor.prototype.isUnOrderedList = function (editorValue) {\n editorValue = editorValue.replace(/\\u200B/g, '');\n var ulListStartRegex = [/^[*]$/, /^[-]$/];\n if (!isNullOrUndefined(editorValue)) {\n for (var i = 0; i < ulListStartRegex.length; i++) {\n if (ulListStartRegex[i].test(editorValue)) {\n return true;\n }\n }\n }\n return false;\n };\n HtmlEditor.prototype.backSpaceCleanup = function (e, currentRange) {\n var isLiElement = false;\n if (e.args.code === 'Backspace' && e.args.keyCode === 8 && currentRange.startOffset === 0 &&\n currentRange.endOffset === 0 && this.parent.getSelection().length === 0 && currentRange.startContainer.textContent.length > 0 &&\n currentRange.startContainer.parentElement.tagName !== 'TD' && currentRange.startContainer.parentElement.tagName !== 'TH') {\n this.rangeElement = this.getRootBlockNode(currentRange.startContainer);\n if (this.rangeElement.tagName === 'OL' || this.rangeElement.tagName === 'UL') {\n var liElement = this.getRangeLiNode(currentRange.startContainer);\n if (liElement.previousElementSibling && liElement.previousElementSibling.childElementCount > 0) {\n this.oldRangeElement = liElement.previousElementSibling.lastElementChild.nodeName === 'BR' ?\n liElement.previousElementSibling : liElement.previousElementSibling.lastElementChild;\n if (!isNullOrUndefined(liElement.lastElementChild) && liElement.lastElementChild.nodeName !== 'BR') {\n this.rangeElement = liElement.lastElementChild;\n isLiElement = true;\n }\n else {\n this.rangeElement = liElement;\n }\n }\n }\n else if (this.rangeElement.tagName === 'TABLE' || (!isNullOrUndefined(this.rangeElement.previousElementSibling) &&\n this.rangeElement.previousElementSibling.tagName === 'TABLE')) {\n return;\n }\n else {\n this.oldRangeElement = this.rangeElement.previousElementSibling;\n }\n if (isNullOrUndefined(this.oldRangeElement)) {\n return;\n }\n else {\n if (this.oldRangeElement.tagName === 'OL' || this.oldRangeElement.tagName === 'UL') {\n this.oldRangeElement = this.oldRangeElement.lastElementChild.lastElementChild\n ? this.oldRangeElement.lastElementChild.lastElementChild :\n this.oldRangeElement.lastElementChild;\n }\n this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), \n // eslint-disable-next-line\n this.oldRangeElement, this.oldRangeElement.childNodes.length);\n if (this.oldRangeElement.querySelector('BR')) {\n detach(this.oldRangeElement.querySelector('BR'));\n }\n if (!isNullOrUndefined(this.rangeElement) && this.oldRangeElement !== this.rangeElement) {\n while (this.rangeElement.firstChild) {\n this.oldRangeElement.appendChild(this.rangeElement.childNodes[0]);\n }\n // eslint-disable-next-line\n !isLiElement ? detach(this.rangeElement) : detach(this.rangeElement.parentElement);\n this.oldRangeElement.normalize();\n }\n }\n }\n };\n HtmlEditor.prototype.deleteCleanup = function (e, currentRange) {\n var isLiElement = false;\n var liElement;\n var rootElement;\n if (e.args.code === 'Delete' && e.args.keyCode === 46 &&\n this.parent.contentModule.getText().trim().length !== 0 && this.parent.getSelection().length === 0 && currentRange.startContainer.parentElement.tagName !== 'TD' &&\n currentRange.startContainer.parentElement.tagName !== 'TH') {\n this.deleteRangeElement = rootElement = this.getRootBlockNode(currentRange.startContainer);\n if (this.deleteRangeElement.tagName === 'OL' || this.deleteRangeElement.tagName === 'UL') {\n liElement = this.getRangeLiNode(currentRange.startContainer);\n if (liElement.nextElementSibling && liElement.nextElementSibling.childElementCount > 0\n && !liElement.nextElementSibling.querySelector('BR')) {\n if (!isNullOrUndefined(liElement.lastElementChild)) {\n this.deleteRangeElement = liElement.lastElementChild;\n isLiElement = true;\n }\n else {\n this.deleteRangeElement = liElement;\n }\n }\n else {\n this.deleteRangeElement = this.getRangeElement(liElement);\n }\n }\n else if (this.deleteRangeElement.nodeType === 3 || (this.deleteRangeElement.tagName === 'TABLE' ||\n (!isNullOrUndefined(this.deleteRangeElement.nextElementSibling) && this.deleteRangeElement.nextElementSibling.tagName === 'TABLE'))) {\n return;\n }\n if (this.getCaretIndex(currentRange, this.deleteRangeElement) === this.deleteRangeElement.textContent.length) {\n if (!isNullOrUndefined(liElement)) {\n if (isLiElement || !isNullOrUndefined(liElement.nextElementSibling)) {\n this.deleteOldRangeElement = this.getRangeElement(liElement.nextElementSibling);\n }\n else {\n this.deleteOldRangeElement = rootElement.nextElementSibling;\n }\n }\n else {\n this.deleteOldRangeElement = this.deleteRangeElement.nextElementSibling;\n }\n if (isNullOrUndefined(this.deleteOldRangeElement)) {\n return;\n }\n else {\n if (currentRange.startOffset === 0 && currentRange.endOffset === 1 &&\n this.deleteRangeElement.childNodes[0].nodeName === 'IMG') {\n this.parent.formatter.editorManager.nodeSelection.setSelectionText(this.parent.contentModule.getDocument(), this.deleteRangeElement, this.deleteRangeElement, 0, 1);\n this.isImageDelete = true;\n }\n else {\n this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), this.deleteRangeElement, this.deleteRangeElement.childNodes.length);\n this.isImageDelete = false;\n }\n if (this.deleteRangeElement.querySelector('BR')) {\n detach(this.deleteRangeElement.querySelector('BR'));\n }\n if (!isNullOrUndefined(this.deleteRangeElement) && (this.deleteOldRangeElement.tagName !== 'OL' && this.deleteOldRangeElement.tagName !== 'UL')\n && this.deleteOldRangeElement !== this.deleteRangeElement) {\n while (this.deleteOldRangeElement.firstChild) {\n this.deleteRangeElement.appendChild(this.deleteOldRangeElement.childNodes[0]);\n }\n if (!isLiElement) {\n detach(this.deleteOldRangeElement);\n }\n else {\n detach(this.deleteOldRangeElement.parentElement);\n }\n this.deleteRangeElement.normalize();\n }\n else {\n this.deleteRangeElement = null;\n this.deleteOldRangeElement = null;\n }\n }\n }\n else {\n this.deleteRangeElement = null;\n }\n }\n };\n HtmlEditor.prototype.getCaretIndex = function (currentRange, element) {\n var position = 0;\n if (this.parent.contentModule.getDocument().getSelection().rangeCount !== 0) {\n var preCaretRange = currentRange.cloneRange();\n preCaretRange.selectNodeContents(element);\n preCaretRange.setEnd(currentRange.endContainer, currentRange.endOffset);\n position = preCaretRange.toString().length;\n }\n return position;\n };\n HtmlEditor.prototype.getRangeElement = function (element) {\n var rangeElement = element.lastElementChild ? element.lastElementChild.tagName === 'BR' ?\n element.lastElementChild.previousElementSibling ? element.lastElementChild.previousElementSibling\n : element : element.lastElementChild : element;\n return rangeElement;\n };\n HtmlEditor.prototype.getRootBlockNode = function (rangeBlockNode) {\n // eslint-disable-next-line\n for (; rangeBlockNode && this.parent && this.parent.inputElement !== rangeBlockNode; rangeBlockNode = rangeBlockNode) {\n if (rangeBlockNode.parentElement === this.parent.inputElement) {\n break;\n }\n else {\n rangeBlockNode = rangeBlockNode.parentElement;\n }\n }\n return rangeBlockNode;\n };\n HtmlEditor.prototype.getRangeLiNode = function (rangeLiNode) {\n var node = rangeLiNode.parentElement;\n while (node !== this.parent.inputElement) {\n if (node.nodeType === 1 && node.tagName === 'LI') {\n break;\n }\n node = node.parentElement;\n }\n return node;\n };\n HtmlEditor.prototype.onPaste = function (e) {\n // eslint-disable-next-line\n var regex = new RegExp(/([^\\S]|^)(((https?\\:\\/\\/)|(www\\.))(\\S+))/gi);\n if (e.text.match(regex)) {\n if (e.isWordPaste) {\n return;\n }\n e.args.preventDefault();\n var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());\n // eslint-disable-next-line\n var saveSelection = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());\n // eslint-disable-next-line\n var httpRegex = new RegExp(/([^\\S]|^)(((https?\\:\\/\\/)))/gi);\n var wwwRegex = new RegExp(/([^\\S]|^)(((www\\.))(\\S+))/gi);\n var enterSplitText = e.text.split('\\n');\n var contentInnerElem = '';\n for (var i = 0; i < enterSplitText.length; i++) {\n if (enterSplitText[i].trim() === '') {\n contentInnerElem += getDefaultValue(this.parent);\n }\n else {\n var contentWithSpace = '';\n var spaceBetweenContent = true;\n var spaceSplit = enterSplitText[i].split(' ');\n for (var j = 0; j < spaceSplit.length; j++) {\n if (spaceSplit[j].trim() === '') {\n contentWithSpace += spaceBetweenContent ? ' ' : ' ';\n }\n else {\n spaceBetweenContent = false;\n contentWithSpace += spaceSplit[j] + ' ';\n }\n }\n if (i === 0) {\n contentInnerElem += '' + contentWithSpace.trim() + '';\n }\n else {\n contentInnerElem += '' + contentWithSpace.trim() + '
';\n }\n }\n }\n var divElement = this.parent.createElement('div');\n divElement.setAttribute('class', 'pasteContent');\n divElement.style.display = 'inline';\n divElement.innerHTML = contentInnerElem.replace('¶', '¶');\n var paraElem = divElement.querySelectorAll('span, p');\n for (var i = 0; i < paraElem.length; i++) {\n var splitTextContent = paraElem[i].innerHTML.split(' ');\n var resultSplitContent = '';\n for (var j = 0; j < splitTextContent.length; j++) {\n if (splitTextContent[j].match(httpRegex) || splitTextContent[j].match(wwwRegex)) {\n resultSplitContent += '' + splitTextContent[j] + ' ';\n }\n else {\n resultSplitContent += splitTextContent[j] + ' ';\n }\n }\n paraElem[i].innerHTML = resultSplitContent.trim();\n }\n if (!isNullOrUndefined(this.parent.pasteCleanupModule)) {\n e.callBack(divElement.innerHTML);\n }\n else {\n this.parent.formatter.editorManager.execCommand('insertHTML', null, null, null, divElement);\n }\n }\n };\n HtmlEditor.prototype.spaceLink = function (e) {\n var range = this.nodeSelectionObj.getRange(this.contentRenderer.getDocument());\n var selectNodeEle = this.nodeSelectionObj.getParentNodeCollection(range);\n var text = range.startContainer.textContent.substr(0, range.endOffset);\n var splitText = text.split(' ');\n var urlText = splitText[splitText.length - 1];\n var urlTextRange = range.startOffset - (text.length - splitText[splitText.length - 1].length);\n urlText = urlText.slice(0, urlTextRange);\n // eslint-disable-next-line\n var regex = new RegExp(/([^\\S]|^)(((https?\\:\\/\\/)|(www\\.))(\\S+))/gi);\n if (selectNodeEle[0].nodeName !== 'A' && urlText.match(regex)) {\n var selection = this.nodeSelectionObj.save(range, this.parent.contentModule.getDocument());\n var url = urlText.indexOf('http') > -1 ? urlText : 'http://' + urlText;\n var selectParent = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);\n var value = {\n url: url,\n selection: selection, selectParent: selectParent,\n text: urlText,\n title: '',\n target: '_blank'\n };\n this.parent.formatter.process(this.parent, {\n item: {\n 'command': 'Links',\n 'subCommand': 'CreateLink'\n }\n }, e, value);\n }\n };\n HtmlEditor.prototype.onToolbarClick = function (args) {\n var save;\n var selectNodeEle;\n var selectParentEle;\n var item = args.item;\n var closestElement = closest(args.originalEvent.target, '.e-rte-quick-popup');\n if (closestElement && !closestElement.classList.contains('e-rte-inline-popup')) {\n if (!(item.subCommand === 'SourceCode' || item.subCommand === 'Preview' ||\n item.subCommand === 'FontColor' || item.subCommand === 'BackgroundColor')) {\n if (isIDevice() && item.command === 'Images') {\n this.nodeSelectionObj.restore();\n }\n var range = this.nodeSelectionObj.getRange(this.parent.contentModule.getDocument());\n save = this.nodeSelectionObj.save(range, this.parent.contentModule.getDocument());\n selectNodeEle = this.nodeSelectionObj.getNodeCollection(range);\n selectParentEle = this.nodeSelectionObj.getParentNodeCollection(range);\n }\n if (item.command === 'Images') {\n this.parent.notify(events.imageToolbarAction, {\n member: 'image', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle\n });\n }\n if (item.command === 'Links') {\n this.parent.notify(events.linkToolbarAction, {\n member: 'link', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle\n });\n }\n if (item.command === 'Table') {\n this.parent.notify(events.tableToolbarAction, {\n member: 'table', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle\n });\n }\n }\n else {\n var linkDialog = document.getElementById(this.parent.getID() + '_rtelink');\n var imageDialog = document.getElementById(this.parent.getID() + '_image');\n if (!(item.subCommand === 'SourceCode' || item.subCommand === 'Preview' ||\n item.subCommand === 'FontColor' || item.subCommand === 'BackgroundColor')) {\n var range = this.nodeSelectionObj.getRange(this.parent.contentModule.getDocument());\n if (isNullOrUndefined(linkDialog) && isNullOrUndefined(imageDialog)) {\n save = this.nodeSelectionObj.save(range, this.parent.contentModule.getDocument());\n }\n selectNodeEle = this.nodeSelectionObj.getNodeCollection(range);\n selectParentEle = this.nodeSelectionObj.getParentNodeCollection(range);\n }\n switch (item.subCommand) {\n case 'Maximize':\n this.parent.notify(events.enableFullScreen, { args: args });\n break;\n case 'Minimize':\n this.parent.notify(events.disableFullScreen, { args: args });\n break;\n case 'CreateLink':\n this.parent.notify(events.insertLink, {\n member: 'link', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle\n });\n break;\n case 'RemoveLink':\n this.parent.notify(events.unLink, {\n member: 'link', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle\n });\n break;\n case 'Print':\n this.parent.print();\n break;\n case 'Image':\n this.parent.notify(events.insertImage, {\n member: 'image', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle\n });\n break;\n case 'CreateTable':\n this.parent.notify(events.createTable, {\n member: 'table', args: args, selection: save\n });\n break;\n case 'SourceCode':\n this.parent.notify(events.sourceCode, { member: 'viewSource', args: args });\n break;\n case 'Preview':\n this.parent.notify(events.updateSource, { member: 'updateSource', args: args });\n break;\n case 'FontColor':\n case 'BackgroundColor':\n break;\n case 'File':\n this.parent.notify(events.renderFileManager, {\n member: 'fileManager', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle\n });\n break;\n default:\n this.parent.formatter.process(this.parent, args, args.originalEvent, null);\n break;\n }\n }\n };\n HtmlEditor.prototype.renderColorPicker = function (args) {\n this.colorPickerModule.renderColorPickerInput(args);\n };\n HtmlEditor.prototype.instantiateRenderer = function () {\n if (this.parent.iframeSettings.enable) {\n this.renderFactory.addRenderer(RenderType.Content, new IframeContentRender(this.parent, this.locator));\n }\n else {\n this.renderFactory.addRenderer(RenderType.Content, new ContentRender(this.parent, this.locator));\n }\n };\n HtmlEditor.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.initialEnd, this.render);\n this.parent.off(events.modelChanged, this.onPropertyChanged);\n this.parent.off(events.htmlToolbarClick, this.onToolbarClick);\n this.parent.off(events.renderColorPicker, this.renderColorPicker);\n this.parent.off(events.destroy, this.destroy);\n this.parent.off(events.keyDown, this.onKeyDown);\n this.parent.off(events.initialLoad, this.instantiateRenderer);\n this.parent.off(events.selectAll, this.selectAll);\n this.parent.off(events.selectRange, this.selectRange);\n this.parent.off(events.getSelectedHtml, this.getSelectedHtml);\n this.parent.off(events.selectionSave, this.onSelectionSave);\n this.parent.off(events.selectionRestore, this.onSelectionRestore);\n this.parent.off(events.readOnlyMode, this.updateReadOnly);\n this.parent.off(events.paste, this.onPaste);\n };\n HtmlEditor.prototype.render = function () {\n this.contentRenderer = this.renderFactory.getRenderer(RenderType.Content);\n var editElement = this.contentRenderer.getEditPanel();\n var option = { undoRedoSteps: this.parent.undoRedoSteps, undoRedoTimer: this.parent.undoRedoTimer };\n if (isNullOrUndefined(this.parent.formatter)) {\n var formatterClass = new HTMLFormatter({\n currentDocument: this.contentRenderer.getDocument(),\n element: editElement,\n options: option\n });\n this.parent.setProperties({ formatter: formatterClass }, true);\n }\n else {\n this.parent.formatter.updateFormatter(editElement, this.contentRenderer.getDocument(), option);\n }\n if (this.parent.enableXhtml) {\n this.parent.notify(events.xhtmlValidation, {});\n }\n if (this.parent.toolbarSettings.enable) {\n this.toolbarUpdate = new HtmlToolbarStatus(this.parent);\n }\n if (this.parent.inlineMode.enable) {\n if (!isNullOrUndefined(this.parent.fontFamily.default)) {\n editElement.style.fontFamily = this.parent.fontFamily.default;\n }\n if (!isNullOrUndefined(this.parent.fontSize.default)) {\n editElement.style.fontSize = this.parent.fontSize.default;\n }\n }\n this.parent.notify(events.bindOnEnd, {});\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {RichTextEditorModel} e - specifies the editor model\n * @returns {void}\n * @hidden\n\n */\n HtmlEditor.prototype.onPropertyChanged = function (e) {\n // On property code change here\n if (!isNullOrUndefined(e.newProp.formatter)) {\n var editElement = this.contentRenderer.getEditPanel();\n var option = { undoRedoSteps: this.parent.undoRedoSteps,\n undoRedoTimer: this.parent.undoRedoTimer };\n this.parent.formatter.updateFormatter(editElement, this.contentRenderer.getDocument(), option);\n }\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} - returns the string value\n * @hidden\n */\n HtmlEditor.prototype.getModuleName = function () {\n return 'htmlEditor';\n };\n /**\n * For selecting all content in RTE\n *\n * @returns {void}\n * @private\n * @hidden\n */\n HtmlEditor.prototype.selectAll = function () {\n var nodes = getTextNodesUnder(this.parent.contentModule.getDocument(), this.parent.contentModule.getEditPanel());\n if (nodes.length > 0) {\n this.parent.formatter.editorManager.nodeSelection.setSelectionText(this.parent.contentModule.getDocument(), nodes[0], nodes[nodes.length - 1], 0, nodes[nodes.length - 1].textContent.length);\n }\n };\n /**\n * For selecting all content in RTE\n *\n * @param {NotifyArgs} e - specifies the notified arguments\n * @returns {void}\n * @private\n * @hidden\n */\n HtmlEditor.prototype.selectRange = function (e) {\n this.parent.formatter.editorManager.nodeSelection.setRange(this.parent.contentModule.getDocument(), e.range);\n };\n /**\n * For get a selected text in RTE\n *\n * @param {NotifyArgs} e - specifies the notified arguments\n * @returns {void}\n * @hidden\n */\n HtmlEditor.prototype.getSelectedHtml = function (e) {\n e.callBack(this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument()).toString());\n };\n return HtmlEditor;\n}());\nexport { HtmlEditor };\n","import { addClass, detach, EventHandler, isNullOrUndefined, select, Ajax, formatUnit } from '@syncfusion/ej2-base';\nimport { Browser, closest, removeClass, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\nimport * as classes from '../base/classes';\nimport { Uploader, TextBox } from '@syncfusion/ej2-inputs';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { Button, CheckBox } from '@syncfusion/ej2-buttons';\nimport { RenderType } from '../base/enum';\nimport { dispatchEvent, parseHtml, hasClass, convertToBlob } from '../base/util';\nimport { isIDevice } from '../../common/util';\n/**\n * `Image` module is used to handle image actions.\n */\nvar Image = /** @class */ (function () {\n function Image(parent, serviceLocator) {\n this.isImgUploaded = false;\n this.isAllowedTypes = true;\n this.pageX = null;\n this.pageY = null;\n this.deletedImg = [];\n this.parent = parent;\n this.rteID = parent.element.id;\n this.i10n = serviceLocator.getService('rteLocale');\n this.rendererFactory = serviceLocator.getService('rendererFactory');\n this.dialogRenderObj = serviceLocator.getService('dialogRenderObject');\n this.addEventListener();\n }\n Image.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.keyDown, this.onKeyDown, this);\n this.parent.on(events.keyUp, this.onKeyUp, this);\n this.parent.on(events.insertImage, this.insertImage, this);\n this.parent.on(events.showImageDialog, this.showDialog, this);\n this.parent.on(events.closeImageDialog, this.closeDialog, this);\n this.parent.on(events.windowResize, this.onWindowResize, this);\n this.parent.on(events.insertCompleted, this.showImageQuickToolbar, this);\n this.parent.on(events.clearDialogObj, this.clearDialogObj, this);\n this.parent.on(events.imageToolbarAction, this.onToolbarAction, this);\n this.parent.on(events.imageCaption, this.caption, this);\n this.parent.on(events.imageDelete, this.deleteImg, this);\n this.parent.on(events.imageLink, this.insertImgLink, this);\n this.parent.on(events.imageAlt, this.insertAltText, this);\n this.parent.on(events.editAreaClick, this.editAreaClickHandler, this);\n this.parent.on(events.iframeMouseDown, this.onIframeMouseDown, this);\n this.parent.on(events.imageSize, this.imageSize, this);\n this.parent.on(events.dropDownSelect, this.alignmentSelect, this);\n this.parent.on(events.initialEnd, this.afterRender, this);\n this.parent.on(events.dynamicModule, this.afterRender, this);\n this.parent.on(events.paste, this.imagePaste, this);\n this.parent.on(events.destroy, this.removeEventListener, this);\n };\n Image.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.keyDown, this.onKeyDown);\n this.parent.off(events.keyUp, this.onKeyUp);\n this.parent.off(events.windowResize, this.onWindowResize);\n this.parent.off(events.insertImage, this.insertImage);\n this.parent.off(events.showImageDialog, this.showDialog);\n this.parent.off(events.closeImageDialog, this.closeDialog);\n this.parent.off(events.insertCompleted, this.showImageQuickToolbar);\n this.parent.off(events.clearDialogObj, this.clearDialogObj);\n this.parent.off(events.imageCaption, this.caption);\n this.parent.off(events.imageToolbarAction, this.onToolbarAction);\n this.parent.off(events.imageDelete, this.deleteImg);\n this.parent.off(events.imageLink, this.insertImgLink);\n this.parent.off(events.imageAlt, this.insertAltText);\n this.parent.off(events.editAreaClick, this.editAreaClickHandler);\n this.parent.off(events.iframeMouseDown, this.onIframeMouseDown);\n this.parent.off(events.imageSize, this.imageSize);\n this.parent.off(events.dropDownSelect, this.alignmentSelect);\n this.parent.off(events.initialEnd, this.afterRender);\n this.parent.off(events.dynamicModule, this.afterRender);\n this.parent.off(events.paste, this.imagePaste);\n this.parent.off(events.destroy, this.removeEventListener);\n var dropElement = this.parent.iframeSettings.enable ? this.parent.inputElement.ownerDocument\n : this.parent.inputElement;\n dropElement.removeEventListener('drop', this.dragDrop.bind(this), true);\n dropElement.removeEventListener('dragstart', this.dragStart.bind(this), true);\n dropElement.removeEventListener('dragenter', this.dragEnter.bind(this), true);\n dropElement.removeEventListener('dragover', this.dragOver.bind(this), true);\n if (!isNullOrUndefined(this.contentModule)) {\n EventHandler.remove(this.contentModule.getEditPanel(), Browser.touchEndEvent, this.imageClick);\n this.parent.formatter.editorManager.observer.off(events.checkUndo, this.undoStack);\n if (this.parent.insertImageSettings.resize) {\n EventHandler.remove(this.parent.contentModule.getEditPanel(), Browser.touchStartEvent, this.resizeStart);\n EventHandler.remove(this.parent.element.ownerDocument, 'mousedown', this.onDocumentClick);\n EventHandler.remove(this.contentModule.getEditPanel(), 'cut', this.onCutHandler);\n }\n }\n };\n Image.prototype.onIframeMouseDown = function () {\n if (this.dialogObj) {\n this.dialogObj.hide({ returnValue: true });\n }\n };\n Image.prototype.afterRender = function () {\n this.contentModule = this.rendererFactory.getRenderer(RenderType.Content);\n EventHandler.add(this.contentModule.getEditPanel(), Browser.touchEndEvent, this.imageClick, this);\n if (this.parent.insertImageSettings.resize) {\n EventHandler.add(this.parent.contentModule.getEditPanel(), Browser.touchStartEvent, this.resizeStart, this);\n EventHandler.add(this.parent.element.ownerDocument, 'mousedown', this.onDocumentClick, this);\n EventHandler.add(this.contentModule.getEditPanel(), 'cut', this.onCutHandler, this);\n }\n var dropElement = this.parent.iframeSettings.enable ? this.parent.inputElement.ownerDocument :\n this.parent.inputElement;\n dropElement.addEventListener('drop', this.dragDrop.bind(this), true);\n dropElement.addEventListener('dragstart', this.dragStart.bind(this), true);\n dropElement.addEventListener('dragenter', this.dragOver.bind(this), true);\n dropElement.addEventListener('dragover', this.dragOver.bind(this), true);\n };\n Image.prototype.undoStack = function (args) {\n if (args.subCommand.toLowerCase() === 'undo' || args.subCommand.toLowerCase() === 'redo') {\n for (var i = 0; i < this.parent.formatter.getUndoRedoStack().length; i++) {\n var temp = this.parent.createElement('div');\n var contentElem = parseHtml(this.parent.formatter.getUndoRedoStack()[i].text);\n temp.appendChild(contentElem);\n var img = temp.querySelectorAll('img');\n if (temp.querySelector('.e-img-resize') && img.length > 0) {\n for (var j = 0; j < img.length; j++) {\n img[j].style.outline = '';\n }\n detach(temp.querySelector('.e-img-resize'));\n this.parent.formatter.getUndoRedoStack()[i].text = temp.innerHTML;\n }\n }\n }\n };\n Image.prototype.resizeEnd = function (e) {\n this.resizeBtnInit();\n this.imgEle.parentElement.style.cursor = 'auto';\n if (Browser.isDevice) {\n removeClass([e.target.parentElement], 'e-mob-span');\n }\n var args = { event: e, requestType: 'images' };\n this.parent.trigger(events.resizeStop, args);\n /* eslint-disable */\n var pageX = this.getPointX(e);\n var pageY = (this.parent.iframeSettings.enable) ? window.pageYOffset +\n this.parent.element.getBoundingClientRect().top + e.clientY : e.pageY;\n /* eslint-enable */\n this.parent.formatter.editorManager.observer.on(events.checkUndo, this.undoStack, this);\n this.parent.formatter.saveData();\n };\n Image.prototype.resizeStart = function (e, ele) {\n var _this = this;\n if (this.parent.readonly) {\n return;\n }\n var target = ele ? ele : e.target;\n this.prevSelectedImgEle = this.imgEle;\n if (target.tagName === 'IMG') {\n this.parent.preventDefaultResize(e);\n var img = target;\n if (this.imgResizeDiv && this.contentModule.getEditPanel().contains(this.imgResizeDiv)) {\n detach(this.imgResizeDiv);\n }\n this.imageResize(img);\n }\n if (target.classList.contains('e-rte-imageboxmark')) {\n if (this.parent.formatter.getUndoRedoStack().length === 0) {\n this.parent.formatter.saveData();\n }\n this.pageX = this.getPointX(e);\n this.pageY = this.getPointY(e);\n e.preventDefault();\n e.stopImmediatePropagation();\n this.resizeBtnInit();\n if (this.quickToolObj) {\n this.quickToolObj.imageQTBar.hidePopup();\n }\n if (target.classList.contains('e-rte-topLeft')) {\n this.resizeBtnStat.topLeft = true;\n }\n if (target.classList.contains('e-rte-topRight')) {\n this.resizeBtnStat.topRight = true;\n }\n if (target.classList.contains('e-rte-botLeft')) {\n this.resizeBtnStat.botLeft = true;\n }\n if (target.classList.contains('e-rte-botRight')) {\n this.resizeBtnStat.botRight = true;\n }\n if (Browser.isDevice && this.contentModule.getEditPanel().contains(this.imgResizeDiv) &&\n !this.imgResizeDiv.classList.contains('e-mob-span')) {\n addClass([this.imgResizeDiv], 'e-mob-span');\n }\n else {\n var args = { event: e, requestType: 'images' };\n this.parent.trigger(events.resizeStart, args, function (resizeStartArgs) {\n if (resizeStartArgs.cancel) {\n _this.cancelResizeAction();\n }\n });\n }\n EventHandler.add(this.contentModule.getDocument(), Browser.touchEndEvent, this.resizeEnd, this);\n }\n };\n Image.prototype.imageClick = function (e) {\n if (Browser.isDevice) {\n if ((e.target.tagName === 'IMG' &&\n e.target.parentElement.tagName === 'A') ||\n (e.target.tagName === 'IMG')) {\n this.contentModule.getEditPanel().setAttribute('contenteditable', 'false');\n e.target.focus();\n }\n else {\n if (!this.parent.readonly) {\n this.contentModule.getEditPanel().setAttribute('contenteditable', 'true');\n }\n }\n }\n if (e.target.tagName === 'IMG' &&\n e.target.parentElement.tagName === 'A') {\n e.preventDefault();\n }\n };\n Image.prototype.onCutHandler = function () {\n if (this.imgResizeDiv && this.contentModule.getEditPanel().contains(this.imgResizeDiv)) {\n this.cancelResizeAction();\n }\n };\n Image.prototype.imageResize = function (e) {\n this.resizeBtnInit();\n this.imgEle = e;\n addClass([this.imgEle], 'e-resize');\n this.imgResizeDiv = this.parent.createElement('span', { className: 'e-img-resize', id: this.rteID + '_imgResize' });\n this.imgResizeDiv.appendChild(this.parent.createElement('span', {\n className: 'e-rte-imageboxmark e-rte-topLeft', styles: 'cursor: nwse-resize'\n }));\n this.imgResizeDiv.appendChild(this.parent.createElement('span', {\n className: 'e-rte-imageboxmark e-rte-topRight', styles: 'cursor: nesw-resize'\n }));\n this.imgResizeDiv.appendChild(this.parent.createElement('span', {\n className: 'e-rte-imageboxmark e-rte-botLeft', styles: 'cursor: nesw-resize'\n }));\n this.imgResizeDiv.appendChild(this.parent.createElement('span', {\n className: 'e-rte-imageboxmark e-rte-botRight', styles: 'cursor: nwse-resize'\n }));\n if (Browser.isDevice) {\n addClass([this.imgResizeDiv], 'e-mob-rte');\n }\n e.style.outline = '2px solid #4a90e2';\n this.imgResizePos(e, this.imgResizeDiv);\n this.resizeImgDupPos(e);\n this.contentModule.getEditPanel().appendChild(this.imgResizeDiv);\n EventHandler.add(this.contentModule.getDocument(), Browser.touchMoveEvent, this.resizing, this);\n };\n Image.prototype.getPointX = function (e) {\n if (e.touches && e.touches.length) {\n return e.touches[0].pageX;\n }\n else {\n return e.pageX;\n }\n };\n Image.prototype.getPointY = function (e) {\n if (e.touches && e.touches.length) {\n return e.touches[0].pageY;\n }\n else {\n return e.pageY;\n }\n };\n Image.prototype.imgResizePos = function (e, imgResizeDiv) {\n var pos = this.calcPos(e);\n var top = pos.top;\n var left = pos.left;\n var imgWid = e.width;\n var imgHgt = e.height;\n var borWid = (Browser.isDevice) ? (4 * parseInt((e.style.outline.slice(-3)), 10)) + 2 :\n (2 * parseInt((e.style.outline.slice(-3)), 10)) + 2; //span border width + image outline width\n var devWid = ((Browser.isDevice) ? 0 : 2); // span border width\n imgResizeDiv.querySelector('.e-rte-botLeft').style.left = (left - borWid) + 'px';\n imgResizeDiv.querySelector('.e-rte-botLeft').style.top = ((imgHgt - borWid) + top) + 'px';\n imgResizeDiv.querySelector('.e-rte-botRight').style.left = ((imgWid - (borWid - devWid)) + left) + 'px';\n imgResizeDiv.querySelector('.e-rte-botRight').style.top = ((imgHgt - borWid) + top) + 'px';\n imgResizeDiv.querySelector('.e-rte-topRight').style.left = ((imgWid - (borWid - devWid)) + left) + 'px';\n imgResizeDiv.querySelector('.e-rte-topRight').style.top = (top - (borWid)) + 'px';\n imgResizeDiv.querySelector('.e-rte-topLeft').style.left = (left - borWid) + 'px';\n imgResizeDiv.querySelector('.e-rte-topLeft').style.top = (top - borWid) + 'px';\n };\n Image.prototype.calcPos = function (elem) {\n var ignoreOffset = ['TD', 'TH', 'TABLE', 'A'];\n var parentOffset = { top: 0, left: 0 };\n var doc = elem.ownerDocument;\n var offsetParent = ((elem.offsetParent && (elem.offsetParent.classList.contains('e-img-caption') ||\n ignoreOffset.indexOf(elem.offsetParent.tagName) > -1)) ?\n closest(elem, '#' + this.parent.getID() + '_rte-edit-view') : elem.offsetParent) || doc.documentElement;\n while (offsetParent &&\n (offsetParent === doc.body || offsetParent === doc.documentElement) &&\n offsetParent.style.position === 'static') {\n offsetParent = offsetParent.parentNode;\n }\n if (offsetParent && offsetParent !== elem && offsetParent.nodeType === 1) {\n // eslint-disable-next-line\n parentOffset = offsetParent.getBoundingClientRect();\n }\n return {\n top: elem.offsetTop,\n left: elem.offsetLeft\n };\n };\n Image.prototype.setAspectRatio = function (img, expectedX, expectedY, e) {\n if (isNullOrUndefined(img.width)) {\n return;\n }\n var width = img.style.width !== '' ? img.style.width.match(/^\\d+(\\.\\d*)?%$/g) ? parseFloat(img.style.width) :\n parseInt(img.style.width, 10) : img.width;\n var height = img.style.height !== '' ? parseInt(img.style.height, 10) : img.height;\n if (width > height) {\n img.style.minWidth = '20px';\n if (this.parent.insertImageSettings.resizeByPercent) {\n if (parseInt('' + img.getBoundingClientRect().width + '', 10) !== 0 && parseInt('' + width + '', 10) !== 0) {\n var percentageValue = this.pixToPerc((width / height * expectedY), (img.previousElementSibling || img.parentElement));\n img.style.width = Math.min(Math.round((percentageValue / img.getBoundingClientRect().width) * expectedX * 100) / 100, 100) + '%';\n }\n else {\n img.style.width = this.pixToPerc((width / height * expectedY), (img.previousElementSibling || img.parentElement)) + '%';\n }\n img.style.height = null;\n img.removeAttribute('height');\n }\n else if (img.style.width === '' && img.style.height !== '') {\n img.style.height = expectedY + 'px';\n }\n else if (img.style.width !== '' && img.style.height === '') {\n var currentWidth = ((width / height * expectedY) + width / height) < (this.parent.inputElement.getBoundingClientRect().right - 32) ?\n ((width / height * expectedY) + width / height) : (this.parent.inputElement.getBoundingClientRect().right - 32);\n img.style.width = currentWidth.toString() + 'px';\n }\n else if (img.style.width !== '') {\n var currentWidth = (width / height * expectedY) < (this.parent.inputElement.getBoundingClientRect().right - 32) ?\n (width / height * expectedY) : (this.parent.inputElement.getBoundingClientRect().right - 32);\n img.style.width = currentWidth + 'px';\n img.style.height = expectedY + 'px';\n }\n else {\n img.setAttribute('width', ((width / height * expectedY) + width / height).toString());\n }\n }\n else if (height > width) {\n if (this.parent.insertImageSettings.resizeByPercent) {\n if (parseInt('' + img.getBoundingClientRect().width + '', 10) !== 0 && parseInt('' + width + '', 10) !== 0) {\n img.style.width = Math.min(Math.round((width / img.getBoundingClientRect().width) * expectedX * 100) / 100, 100) + '%';\n }\n else {\n img.style.width = this.pixToPerc((expectedX / height * expectedY), (img.previousElementSibling || img.parentElement)) + '%';\n }\n img.style.height = null;\n img.removeAttribute('height');\n }\n else if (img.style.width !== '') {\n img.style.width = expectedX + 'px';\n img.style.height = (height / width * expectedX) + 'px';\n }\n else {\n img.setAttribute('width', this.resizeBtnStat.botRight ? (this.getPointX(e.event) - img.getBoundingClientRect().left).toString() : expectedX.toString());\n }\n }\n else {\n if (this.parent.insertImageSettings.resizeByPercent) {\n img.style.width = this.pixToPerc(expectedX, (img.previousElementSibling || img.parentElement)) + '%';\n img.style.height = null;\n img.removeAttribute('height');\n }\n else if (img.style.width !== '') {\n img.style.width = expectedX + 'px';\n img.style.height = expectedX + 'px';\n }\n else {\n img.setAttribute('width', expectedX.toString());\n img.setAttribute('height', expectedX.toString());\n }\n }\n };\n Image.prototype.pixToPerc = function (expected, parentEle) {\n return expected / parseFloat(getComputedStyle(parentEle).width) * 100;\n };\n Image.prototype.imgDupMouseMove = function (width, height, e) {\n var _this = this;\n var args = { event: e, requestType: 'images' };\n this.parent.trigger(events.onResize, args, function (resizingArgs) {\n if (resizingArgs.cancel) {\n _this.cancelResizeAction();\n }\n else {\n if ((parseInt(_this.parent.insertImageSettings.minWidth, 10) >= parseInt(width, 10) ||\n (parseInt(_this.parent.getInsertImgMaxWidth(), 10) <= parseInt(width, 10) &&\n isNOU(_this.imgEle.style.width)))) {\n return;\n }\n if (!_this.parent.insertImageSettings.resizeByPercent &&\n (parseInt(_this.parent.insertImageSettings.minHeight, 10) >= parseInt(height, 10) ||\n parseInt(_this.parent.insertImageSettings.maxHeight, 10) <= parseInt(height, 10))) {\n return;\n }\n _this.imgEle.parentElement.style.cursor = 'pointer';\n _this.setAspectRatio(_this.imgEle, parseInt(width, 10), parseInt(height, 10), args);\n _this.resizeImgDupPos(_this.imgEle);\n _this.imgResizePos(_this.imgEle, _this.imgResizeDiv);\n _this.parent.setContentHeight('', false);\n }\n });\n };\n Image.prototype.resizing = function (e) {\n if (this.imgEle.offsetWidth >= this.parent.getInsertImgMaxWidth()) {\n this.imgEle.style.maxHeight = this.imgEle.offsetHeight + 'px';\n }\n var pageX = this.getPointX(e);\n var pageY = this.getPointY(e);\n var mouseX = (this.resizeBtnStat.botLeft || this.resizeBtnStat.topLeft) ? -(pageX - this.pageX) : (pageX - this.pageX);\n var mouseY = (this.resizeBtnStat.topLeft || this.resizeBtnStat.topRight) ? -(pageY - this.pageY) : (pageY - this.pageY);\n var width = parseInt(this.imgDupPos.width, 10) + mouseX;\n var height = parseInt(this.imgDupPos.height, 10) + mouseY;\n this.pageX = pageX;\n this.pageY = pageY;\n if (this.resizeBtnStat.botRight) {\n this.imgDupMouseMove(width + 'px', height + 'px', e);\n }\n else if (this.resizeBtnStat.botLeft) {\n this.imgDupMouseMove(width + 'px', height + 'px', e);\n }\n else if (this.resizeBtnStat.topRight) {\n this.imgDupMouseMove(width + 'px', height + 'px', e);\n }\n else if (this.resizeBtnStat.topLeft) {\n this.imgDupMouseMove(width + 'px', height + 'px', e);\n }\n };\n Image.prototype.cancelResizeAction = function () {\n EventHandler.remove(this.contentModule.getDocument(), Browser.touchMoveEvent, this.resizing);\n EventHandler.remove(this.contentModule.getDocument(), Browser.touchEndEvent, this.resizeEnd);\n if (this.imgEle && this.imgResizeDiv && this.contentModule.getEditPanel().contains(this.imgResizeDiv)) {\n detach(this.imgResizeDiv);\n this.imgEle.style.outline = '';\n this.imgResizeDiv = null;\n this.pageX = null;\n this.pageY = null;\n }\n };\n Image.prototype.resizeImgDupPos = function (e) {\n this.imgDupPos = {\n width: (e.style.width !== '' && (this.parent.insertImageSettings &&\n !this.parent.insertImageSettings.resizeByPercent)) ? this.imgEle.style.width : e.width + 'px',\n height: (e.style.height !== '') ? this.imgEle.style.height : e.height + 'px'\n };\n };\n Image.prototype.resizeBtnInit = function () {\n return this.resizeBtnStat = { botLeft: false, botRight: false, topRight: false, topLeft: false };\n };\n Image.prototype.onToolbarAction = function (args) {\n if (isIDevice()) {\n this.parent.notify(events.selectionRestore, {});\n }\n var item = args.args.item;\n switch (item.subCommand) {\n case 'Replace':\n if (this.parent.fileManagerSettings.enable) {\n this.parent.notify(events.renderFileManager, args);\n }\n else {\n this.parent.notify(events.insertImage, args);\n }\n break;\n case 'Caption':\n this.parent.notify(events.imageCaption, args);\n break;\n case 'InsertLink':\n this.parent.notify(events.imageLink, args);\n break;\n case 'AltText':\n this.parent.notify(events.imageAlt, args);\n break;\n case 'Remove':\n this.parent.notify(events.imageDelete, args);\n break;\n case 'Dimension':\n this.parent.notify(events.imageSize, args);\n break;\n case 'OpenImageLink':\n this.openImgLink(args);\n break;\n case 'EditImageLink':\n this.editImgLink(args);\n break;\n case 'RemoveImageLink':\n this.removeImgLink(args);\n break;\n }\n };\n Image.prototype.openImgLink = function (e) {\n var target = e.selectParent[0].parentNode.target === '' ? '_self' : '_blank';\n this.parent.formatter.process(this.parent, e.args, e.args, {\n url: e.selectParent[0].parentNode.href, target: target, selectNode: e.selectNode,\n subCommand: e.args.item.subCommand\n });\n };\n Image.prototype.editImgLink = function (e) {\n var selectParentEle = e.selectParent[0].parentNode;\n var linkUpdate = this.i10n.getConstant('dialogUpdate');\n var inputDetails = {\n url: selectParentEle.href, target: selectParentEle.target,\n header: 'Edit Link', btnText: linkUpdate\n };\n this.insertImgLink(e, inputDetails);\n };\n Image.prototype.removeImgLink = function (e) {\n if (Browser.isIE) {\n this.contentModule.getEditPanel().focus();\n }\n e.selection.restore();\n var isCapLink = (this.contentModule.getEditPanel().contains(this.captionEle) && select('a', this.captionEle)) ?\n true : false;\n var selectParent = isCapLink ? [this.captionEle] : [e.selectNode[0].parentElement];\n this.parent.formatter.process(this.parent, e.args, e.args, {\n insertElement: e.selectNode[0], selectParent: selectParent, selection: e.selection,\n subCommand: e.args.item.subCommand\n });\n if (this.quickToolObj && document.body.contains(this.quickToolObj.imageQTBar.element)) {\n this.quickToolObj.imageQTBar.hidePopup();\n if (!isNullOrUndefined(e.selectParent)) {\n removeClass([e.selectParent[0]], 'e-img-focus');\n }\n }\n if (isCapLink) {\n select('.e-img-inner', this.captionEle).focus();\n }\n };\n Image.prototype.onKeyDown = function (event) {\n var originalEvent = event.args;\n var range;\n var save;\n var selectNodeEle;\n var selectParentEle;\n this.deletedImg = [];\n var isCursor;\n var keyCodeValues = [27, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123,\n 44, 45, 9, 16, 17, 18, 19, 20, 33, 34, 35, 36, 37, 38, 39, 40, 91, 92, 93, 144, 145, 182, 183];\n if (this.parent.editorMode === 'HTML') {\n range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());\n isCursor = range.startContainer === range.endContainer && range.startOffset === range.endOffset;\n }\n if (!isCursor && this.parent.editorMode === 'HTML' && keyCodeValues.indexOf(originalEvent.which) < 0) {\n var nodes = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range);\n for (var i = 0; i < nodes.length; i++) {\n if (nodes[i].nodeName === 'IMG') {\n this.deletedImg.push(nodes[i]);\n }\n }\n }\n if (this.parent.editorMode === 'HTML' && ((originalEvent.which === 8 && originalEvent.code === 'Backspace') ||\n (originalEvent.which === 46 && originalEvent.code === 'Delete'))) {\n var isCursor_1 = range.startContainer === range.endContainer && range.startOffset === range.endOffset;\n if ((originalEvent.which === 8 && originalEvent.code === 'Backspace' && isCursor_1)) {\n this.checkImageBack(range);\n }\n else if ((originalEvent.which === 46 && originalEvent.code === 'Delete' && isCursor_1)) {\n this.checkImageDel(range);\n }\n }\n if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection) &&\n originalEvent.code !== 'KeyK') {\n range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());\n save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());\n selectNodeEle = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range);\n selectParentEle = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);\n if (!originalEvent.ctrlKey && originalEvent.key && (originalEvent.key.length === 1 || originalEvent.action === 'enter') &&\n (selectParentEle[0].tagName === 'IMG') && selectParentEle[0].parentElement) {\n var prev = selectParentEle[0].parentElement.childNodes[0];\n if (this.contentModule.getEditPanel().querySelector('.e-img-resize')) {\n this.removeResizeEle();\n }\n this.parent.formatter.editorManager.nodeSelection.setSelectionText(this.contentModule.getDocument(), prev, prev, prev.textContent.length, prev.textContent.length);\n removeClass([selectParentEle[0]], 'e-img-focus');\n this.quickToolObj.imageQTBar.hidePopup();\n }\n }\n if (originalEvent.ctrlKey && (originalEvent.keyCode === 89 || originalEvent.keyCode === 90)) {\n this.undoStack({ subCommand: (originalEvent.keyCode === 90 ? 'undo' : 'redo') });\n }\n if (originalEvent.keyCode === 8 || originalEvent.keyCode === 46) {\n if (selectNodeEle && selectNodeEle[0].nodeName === 'IMG' && selectNodeEle.length < 1) {\n originalEvent.preventDefault();\n var event_1 = {\n selectNode: selectNodeEle, selection: save, selectParent: selectParentEle,\n args: {\n item: { command: 'Images', subCommand: 'Remove' },\n originalEvent: originalEvent\n }\n };\n this.deleteImg(event_1, originalEvent.keyCode);\n }\n if (this.parent.contentModule.getEditPanel().querySelector('.e-img-resize')) {\n this.removeResizeEle();\n }\n }\n if (originalEvent.code === 'Backspace') {\n originalEvent.action = 'backspace';\n }\n switch (originalEvent.action) {\n case 'escape':\n if (!isNullOrUndefined(this.dialogObj)) {\n this.dialogObj.close();\n }\n break;\n case 'backspace':\n case 'delete':\n for (var i = 0; i < this.deletedImg.length; i++) {\n var src = this.deletedImg[i].src;\n this.imageRemovePost(src);\n }\n if (this.parent.editorMode !== 'Markdown') {\n if (range.startContainer.nodeType === 3) {\n if (originalEvent.code === 'Backspace') {\n if (range.startContainer.previousElementSibling && range.startOffset === 0 &&\n range.startContainer.previousElementSibling.classList.contains(classes.CLS_CAPTION) &&\n range.startContainer.previousElementSibling.classList.contains(classes.CLS_CAPINLINE)) {\n detach(range.startContainer.previousElementSibling);\n }\n }\n else {\n if (range.startContainer.nextElementSibling &&\n range.endContainer.textContent.length === range.endOffset &&\n range.startContainer.nextElementSibling.classList.contains(classes.CLS_CAPTION) &&\n range.startContainer.nextElementSibling.classList.contains(classes.CLS_CAPINLINE)) {\n detach(range.startContainer.nextElementSibling);\n }\n }\n }\n else if ((range.startContainer.nodeType === 1 &&\n range.startContainer.querySelector('.' + classes.CLS_CAPTION + '.' + classes.CLS_CAPINLINE))) {\n detach(range.startContainer.querySelector('.' + classes.CLS_CAPTION + '.' + classes.CLS_CAPINLINE));\n }\n }\n break;\n case 'insert-image':\n this.openDialog(true, originalEvent, save, selectNodeEle, selectParentEle);\n originalEvent.preventDefault();\n break;\n }\n };\n Image.prototype.openDialog = function (isInternal, event, selection, ele, parentEle) {\n var range;\n var save;\n var selectNodeEle;\n var selectParentEle;\n if (!isInternal && !isNOU(this.parent.formatter.editorManager.nodeSelection)) {\n range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());\n save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());\n selectNodeEle = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range);\n selectParentEle = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);\n }\n else {\n save = selection;\n selectNodeEle = ele;\n selectParentEle = parentEle;\n }\n if (this.parent.editorMode === 'HTML') {\n this.insertImage({\n args: {\n item: { command: 'Images', subCommand: 'Image' },\n originalEvent: event\n },\n selectNode: selectNodeEle,\n selection: save,\n selectParent: selectParentEle\n });\n }\n else {\n this.insertImage({\n args: {\n item: { command: 'Images', subCommand: 'Image' },\n originalEvent: event\n },\n member: 'image',\n text: this.parent.formatter.editorManager.markdownSelection.getSelectedText(this.parent.contentModule.getEditPanel()),\n module: 'Markdown',\n name: 'insertImage'\n });\n }\n };\n Image.prototype.showDialog = function () {\n this.openDialog(false);\n };\n Image.prototype.closeDialog = function () {\n if (this.dialogObj) {\n this.dialogObj.hide({ returnValue: true });\n }\n };\n // eslint-disable-next-line\n Image.prototype.onKeyUp = function (event) {\n if (!isNOU(this.deletedImg) && this.deletedImg.length > 0) {\n for (var i = 0; i < this.deletedImg.length; i++) {\n var args = {\n element: this.deletedImg[i],\n src: this.deletedImg[i].getAttribute('src')\n };\n this.parent.trigger(events.afterImageDelete, args);\n }\n }\n };\n Image.prototype.checkImageBack = function (range) {\n if (range.startContainer.nodeName === '#text' && range.startOffset === 0 &&\n !isNOU(range.startContainer.previousSibling) && range.startContainer.previousSibling.nodeName === 'IMG') {\n this.deletedImg.push(range.startContainer.previousSibling);\n }\n else if (range.startContainer.nodeName !== '#text' && !isNOU(range.startContainer.childNodes[range.startOffset - 1]) &&\n range.startContainer.childNodes[range.startOffset - 1].nodeName === 'IMG') {\n this.deletedImg.push(range.startContainer.childNodes[range.startOffset - 1]);\n }\n };\n Image.prototype.checkImageDel = function (range) {\n if (range.startContainer.nodeName === '#text' && range.startOffset === range.startContainer.textContent.length &&\n !isNOU(range.startContainer.nextSibling) && range.startContainer.nextSibling.nodeName === 'IMG') {\n this.deletedImg.push(range.startContainer.nextSibling);\n }\n else if (range.startContainer.nodeName !== '#text' && !isNOU(range.startContainer.childNodes[range.startOffset]) &&\n range.startContainer.childNodes[range.startOffset].nodeName === 'IMG') {\n this.deletedImg.push(range.startContainer.childNodes[range.startOffset]);\n }\n };\n Image.prototype.alignmentSelect = function (e) {\n var item = e.item;\n if (!document.body.contains(document.body.querySelector('.e-rte-quick-toolbar')) || item.command !== 'Images') {\n return;\n }\n var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());\n var selectNodeEle = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range);\n selectNodeEle = (selectNodeEle[0].nodeName === 'IMG') ? selectNodeEle : [this.imgEle];\n var args = { args: e, selectNode: selectNodeEle };\n if (this.parent.formatter.getUndoRedoStack().length === 0) {\n this.parent.formatter.saveData();\n }\n switch (item.subCommand) {\n case 'JustifyLeft':\n this.alignImage(args, 'JustifyLeft');\n break;\n case 'JustifyCenter':\n this.alignImage(args, 'JustifyCenter');\n break;\n case 'JustifyRight':\n this.alignImage(args, 'JustifyRight');\n break;\n case 'Inline':\n this.inline(args);\n break;\n case 'Break':\n this.break(args);\n break;\n }\n if (this.quickToolObj && document.body.contains(this.quickToolObj.imageQTBar.element)) {\n this.quickToolObj.imageQTBar.hidePopup();\n removeClass([selectNodeEle[0]], 'e-img-focus');\n }\n this.cancelResizeAction();\n };\n Image.prototype.imageWithLinkQTBarItemUpdate = function () {\n var separator;\n var items = this.quickToolObj.imageQTBar.toolbarElement.querySelectorAll('.e-toolbar-item');\n for (var i = 0; i < items.length; i++) {\n if (items[i].getAttribute('title') === this.i10n.getConstant('openLink') ||\n items[i].getAttribute('title') === this.i10n.getConstant('editLink') ||\n items[i].getAttribute('title') === this.i10n.getConstant('removeLink')) {\n addClass([items[i]], 'e-link-groups');\n items[i].style.display = 'none';\n }\n else if (items[i].getAttribute('title') === 'Insert Link') {\n items[i].style.display = '';\n }\n else if (items[i].classList.contains('e-rte-horizontal-separator')) {\n // eslint-disable-next-line\n separator = items[i];\n detach(items[i]);\n }\n }\n var newItems = this.quickToolObj.imageQTBar.toolbarElement.querySelectorAll('.e-toolbar-item:not(.e-link-groups)');\n this.quickToolObj.imageQTBar.addQTBarItem(['-'], Math.round(newItems.length / 2));\n };\n Image.prototype.showImageQuickToolbar = function (e) {\n var _this = this;\n if (e.type !== 'Images' || isNullOrUndefined(this.parent.quickToolbarModule)\n || isNullOrUndefined(this.parent.quickToolbarModule.imageQTBar) || isNullOrUndefined(e.args)) {\n return;\n }\n this.quickToolObj = this.parent.quickToolbarModule;\n var args = e.args;\n var target = e.elements;\n [].forEach.call(e.elements, function (element, index) {\n if (index === 0) {\n target = element;\n }\n });\n if (target && !closest(target, 'a')) {\n this.imageWithLinkQTBarItemUpdate();\n }\n if (target.nodeName === 'IMG') {\n addClass([target], ['e-img-focus']);\n }\n var pageY = (this.parent.iframeSettings.enable) ? window.pageYOffset +\n this.parent.element.getBoundingClientRect().top + args.clientY : args.pageY;\n if (this.parent.quickToolbarModule.imageQTBar) {\n if (e.isNotify) {\n setTimeout(function () {\n _this.quickToolObj.imageQTBar.showPopup(args.pageX, pageY, target);\n }, 400);\n }\n else {\n this.quickToolObj.imageQTBar.showPopup(args.pageX, pageY, target);\n }\n }\n };\n Image.prototype.hideImageQuickToolbar = function () {\n if (!isNullOrUndefined(this.contentModule.getEditPanel().querySelector('.e-img-focus'))) {\n removeClass([this.contentModule.getEditPanel().querySelector('.e-img-focus')], 'e-img-focus');\n if (this.quickToolObj && this.quickToolObj.imageQTBar && document.body.contains(this.quickToolObj.imageQTBar.element)) {\n this.quickToolObj.imageQTBar.hidePopup();\n }\n }\n };\n Image.prototype.editAreaClickHandler = function (e) {\n if (this.parent.readonly) {\n this.hideImageQuickToolbar();\n return;\n }\n var args = e.args;\n var showOnRightClick = this.parent.quickToolbarSettings.showOnRightClick;\n if (args.which === 2 || (showOnRightClick && args.which === 1) || (!showOnRightClick && args.which === 3)) {\n if ((showOnRightClick && args.which === 1) && !isNullOrUndefined(args.target) &&\n args.target.tagName === 'IMG') {\n this.parent.formatter.editorManager.nodeSelection.Clear(this.contentModule.getDocument());\n this.parent.formatter.editorManager.nodeSelection.setSelectionContents(this.contentModule.getDocument(), args.target);\n }\n return;\n }\n if (this.parent.editorMode === 'HTML' && this.parent.quickToolbarModule && this.parent.quickToolbarModule.imageQTBar) {\n this.quickToolObj = this.parent.quickToolbarModule;\n var target = args.target;\n this.contentModule = this.rendererFactory.getRenderer(RenderType.Content);\n var isPopupOpen = this.quickToolObj.imageQTBar.element.classList.contains('e-rte-pop');\n if (target.nodeName === 'IMG' && this.parent.quickToolbarModule) {\n if (isPopupOpen) {\n return;\n }\n this.parent.formatter.editorManager.nodeSelection.Clear(this.contentModule.getDocument());\n this.parent.formatter.editorManager.nodeSelection.setSelectionContents(this.contentModule.getDocument(), target);\n if (isIDevice()) {\n this.parent.notify(events.selectionSave, e);\n }\n addClass([target], 'e-img-focus');\n var items = this.quickToolObj.imageQTBar.toolbarElement.querySelectorAll('.e-toolbar-item');\n var separator = void 0;\n if (closest(target, 'a')) {\n for (var i = 0; i < items.length; i++) {\n if (items[i].getAttribute('title') === this.i10n.getConstant('openLink') ||\n items[i].getAttribute('title') === this.i10n.getConstant('editLink') ||\n items[i].getAttribute('title') === this.i10n.getConstant('removeLink')) {\n items[i].style.display = '';\n removeClass([items[i]], 'e-link-groups');\n }\n else if (items[i].getAttribute('title') === 'Insert Link') {\n items[i].style.display = 'none';\n }\n else if (items[i].classList.contains('e-rte-horizontal-separator')) {\n // eslint-disable-next-line\n separator = items[i];\n detach(items[i]);\n }\n }\n var newItems = this.quickToolObj.imageQTBar.toolbarElement.querySelectorAll('.e-toolbar-item:not(.e-link-groups)');\n this.quickToolObj.imageQTBar.addQTBarItem(['-'], Math.round(newItems.length / 2));\n }\n else if (!closest(target, 'a')) {\n this.imageWithLinkQTBarItemUpdate();\n }\n this.showImageQuickToolbar({ args: args, type: 'Images', elements: [args.target] });\n }\n else {\n this.hideImageQuickToolbar();\n }\n }\n };\n Image.prototype.insertImgLink = function (e, inputDetails) {\n var _this = this;\n if (e.selectNode[0].nodeName !== 'IMG') {\n return;\n }\n this.imagDialog(e);\n if (!isNullOrUndefined(this.dialogObj)) {\n var linkWrap = this.parent.createElement('div', { className: 'e-img-linkwrap' });\n var linkUrl = this.i10n.getConstant('linkurl');\n var content = '' +\n '
' +\n '' + '' +\n '
';\n var contentElem = parseHtml(content);\n linkWrap.appendChild(contentElem);\n var linkTarget = linkWrap.querySelector('.e-rte-linkTarget');\n var inputLink = linkWrap.querySelector('.e-img-link');\n var linkOpenLabel = this.i10n.getConstant('linkOpenInNewWindow');\n this.checkBoxObj = new CheckBox({\n label: linkOpenLabel, checked: true, enableRtl: this.parent.enableRtl, change: function (e) {\n if (e.checked) {\n target_1 = '_blank';\n }\n else {\n target_1 = null;\n }\n }\n });\n this.checkBoxObj.isStringTemplate = true;\n this.checkBoxObj.createElement = this.parent.createElement;\n this.checkBoxObj.appendTo(linkTarget);\n var target_1 = this.checkBoxObj.checked ? '_blank' : null;\n var linkUpdate = this.i10n.getConstant('dialogUpdate');\n var linkargs_1 = {\n args: e.args,\n selfImage: this, selection: e.selection,\n selectNode: e.selectNode, selectParent: e.selectParent, link: inputLink, target: target_1\n };\n this.dialogObj.setProperties({\n height: 'inherit',\n width: '290px',\n header: this.parent.localeObj.getConstant('imageInsertLinkHeader'),\n content: linkWrap,\n position: { X: 'center', Y: 'center' },\n buttons: [{\n // eslint-disable-next-line\n click: function (e) {\n _this.insertlink(linkargs_1);\n },\n buttonModel: {\n content: linkUpdate, cssClass: 'e-flat e-update-link', isPrimary: true\n }\n }]\n });\n if (!isNullOrUndefined(inputDetails)) {\n inputLink.value = inputDetails.url;\n // eslint-disable-next-line\n (inputDetails.target) ? this.checkBoxObj.checked = true : this.checkBoxObj.checked = false;\n this.dialogObj.header = inputDetails.header;\n }\n this.dialogObj.element.style.maxHeight = 'inherit';\n this.dialogObj.content.querySelector('input').focus();\n }\n };\n Image.prototype.insertAltText = function (e) {\n var _this = this;\n if (e.selectNode[0].nodeName !== 'IMG') {\n return;\n }\n this.imagDialog(e);\n var altText = this.i10n.getConstant('altText');\n if (!isNullOrUndefined(this.dialogObj)) {\n var altWrap = this.parent.createElement('div', { className: 'e-img-altwrap' });\n var altHeader = this.i10n.getConstant('alternateHeader');\n var linkUpdate = this.i10n.getConstant('dialogUpdate');\n var getAlt = (e.selectNode[0].getAttribute('alt') === null) ? '' :\n e.selectNode[0].getAttribute('alt');\n var content = '' +\n '' +\n '
';\n var contentElem = parseHtml(content);\n altWrap.appendChild(contentElem);\n var inputAlt = altWrap.querySelector('.e-img-alt');\n var altArgs_1 = {\n args: e.args, selfImage: this, selection: e.selection, selectNode: e.selectNode,\n alt: inputAlt\n };\n this.dialogObj.setProperties({\n height: 'inherit', width: '290px', header: altHeader, content: altWrap, position: { X: 'center', Y: 'center' },\n buttons: [{\n // eslint-disable-next-line\n click: function (e) {\n _this.insertAlt(altArgs_1);\n },\n buttonModel: {\n content: linkUpdate, cssClass: 'e-flat e-update-alt', isPrimary: true\n }\n }]\n });\n this.dialogObj.element.style.maxHeight = 'inherit';\n this.dialogObj.content.querySelector('input').focus();\n }\n };\n Image.prototype.insertAlt = function (e) {\n if (!isNullOrUndefined(e.alt)) {\n e.selection.restore();\n if (this.parent.formatter.getUndoRedoStack().length === 0) {\n this.parent.formatter.saveData();\n }\n var altText = e.alt.value;\n this.parent.formatter.process(this.parent, e.args, e.args, {\n altText: altText, selectNode: e.selectNode,\n subCommand: e.args.item.subCommand\n });\n this.dialogObj.hide({ returnValue: false });\n }\n };\n Image.prototype.insertlink = function (e) {\n if (e.selectNode[0].nodeName !== 'IMG') {\n return;\n }\n var url = e.link.value;\n if (url === '') {\n addClass([e.link], 'e-error');\n e.link.setSelectionRange(0, url.length);\n e.link.focus();\n return;\n }\n if (!this.isUrl(url)) {\n url = 'http://' + url;\n }\n else {\n removeClass([e.link], 'e-error');\n }\n var proxy = e.selfImage;\n if (proxy.parent.editorMode === 'HTML') {\n e.selection.restore();\n }\n if (proxy.parent.formatter.getUndoRedoStack().length === 0) {\n proxy.parent.formatter.saveData();\n }\n if (e.selectNode[0].parentElement.nodeName === 'A') {\n proxy.parent.formatter.process(proxy.parent, e.args, e.args, {\n url: url, target: proxy.checkBoxObj.checked ? '_blank' : null, selectNode: e.selectNode,\n subCommand: e.args.item.subCommand\n });\n proxy.dialogObj.hide({ returnValue: true });\n return;\n }\n proxy.parent.formatter.process(proxy.parent, e.args, e.args, {\n url: url, target: proxy.checkBoxObj.checked ? '_blank' : null, selectNode: e.selectNode,\n subCommand: e.args.item.subCommand, selection: e.selection\n });\n var captionEle = closest(e.selectNode[0], '.e-img-caption');\n if (captionEle) {\n select('.e-img-inner', captionEle).focus();\n }\n if (captionEle) {\n select('.e-img-inner', captionEle).focus();\n }\n proxy.dialogObj.hide({ returnValue: false });\n };\n Image.prototype.isUrl = function (url) {\n // eslint-disable-next-line\n var regexp = /(ftp|http|https):\\/\\/(\\w+:{0,1}\\w*@)?(\\S+)(:[0-9]+)?(\\/|\\/([\\w#!:.?+=&%@!\\-\\/]))?/gi;\n return regexp.test(url);\n };\n Image.prototype.deleteImg = function (e, keyCode) {\n if (e.selectNode[0].nodeName !== 'IMG') {\n return;\n }\n var args = {\n element: e.selectNode[0],\n src: e.selectNode[0].getAttribute('src')\n };\n if (this.parent.formatter.getUndoRedoStack().length === 0) {\n this.parent.formatter.saveData();\n }\n e.selection.restore();\n if (this.contentModule.getEditPanel().querySelector('.e-img-resize')) {\n this.removeResizeEle();\n }\n this.parent.formatter.process(this.parent, e.args, e.args, {\n selectNode: e.selectNode,\n captionClass: classes.CLS_CAPTION,\n subCommand: e.args.item.subCommand\n });\n this.imageRemovePost(args.src);\n if (this.quickToolObj && document.body.contains(this.quickToolObj.imageQTBar.element)) {\n this.quickToolObj.imageQTBar.hidePopup();\n }\n this.cancelResizeAction();\n if (isNullOrUndefined(keyCode)) {\n this.parent.trigger(events.afterImageDelete, args);\n }\n };\n Image.prototype.imageRemovePost = function (src) {\n var proxy = this;\n var absoluteUrl = '';\n if (isNOU(this.parent.insertImageSettings.removeUrl) || this.parent.insertImageSettings.removeUrl === '') {\n return;\n }\n if (src.indexOf('http://') > -1 || src.indexOf('https://') > -1) {\n absoluteUrl = src;\n }\n else {\n absoluteUrl = new URL(src, document.baseURI).href;\n }\n this.removingImgName = absoluteUrl.replace(/^.*[\\\\\\/]/, '');\n var xhr = new XMLHttpRequest();\n xhr.addEventListener(\"readystatechange\", function () {\n if (this.readyState == 4 && this.status == 200) {\n proxy.triggerPost(this.response);\n }\n });\n xhr.open('GET', absoluteUrl);\n xhr.responseType = 'blob';\n xhr.send();\n };\n Image.prototype.triggerPost = function (response) {\n var removeUrl = this.parent.insertImageSettings.removeUrl;\n if (isNOU(removeUrl) || removeUrl === '') {\n return;\n }\n var file = new File([response], this.removingImgName);\n var ajax = new Ajax(removeUrl, 'POST', true, null);\n var formData = new FormData();\n formData.append('UploadFiles', file);\n ajax.send(formData);\n };\n Image.prototype.caption = function (e) {\n var selectNode = e.selectNode[0];\n if (selectNode.nodeName !== 'IMG') {\n return;\n }\n e.selection.restore();\n if (this.parent.formatter.getUndoRedoStack().length === 0) {\n this.parent.formatter.saveData();\n }\n this.cancelResizeAction();\n addClass([selectNode], 'e-rte-image');\n var subCommand = (e.args.item) ?\n e.args.item.subCommand : 'Caption';\n if (!isNullOrUndefined(closest(selectNode, '.' + classes.CLS_CAPTION))) {\n detach(closest(selectNode, '.' + classes.CLS_CAPTION));\n if (Browser.isIE) {\n this.contentModule.getEditPanel().focus();\n e.selection.restore();\n }\n if (selectNode.parentElement.tagName === 'A') {\n this.parent.formatter.process(this.parent, e.args, e.args, { insertElement: selectNode.parentElement, selectNode: e.selectNode, subCommand: subCommand });\n }\n else {\n this.parent.formatter.process(this.parent, e.args, e.args, { insertElement: selectNode, selectNode: e.selectNode, subCommand: subCommand });\n }\n }\n else {\n this.captionEle = this.parent.createElement('span', {\n className: classes.CLS_CAPTION + ' ' + classes.CLS_RTE_CAPTION,\n attrs: { contenteditable: 'false', draggable: 'false', style: 'width:' + this.parent.insertImageSettings.width }\n });\n var imgWrap = this.parent.createElement('span', { className: 'e-img-wrap' });\n var imgInner = this.parent.createElement('span', { className: 'e-img-inner',\n attrs: { contenteditable: 'true' } });\n var parent_1 = e.selectNode[0].parentElement;\n if (parent_1.tagName === 'A') {\n parent_1.setAttribute('contenteditable', 'true');\n }\n imgWrap.appendChild(parent_1.tagName === 'A' ? parent_1 : e.selectNode[0]);\n imgWrap.appendChild(imgInner);\n var imgCaption = this.i10n.getConstant('imageCaption');\n imgInner.innerHTML = imgCaption;\n this.captionEle.appendChild(imgWrap);\n if (selectNode.classList.contains(classes.CLS_IMGINLINE)) {\n addClass([this.captionEle], classes.CLS_CAPINLINE);\n }\n if (selectNode.classList.contains(classes.CLS_IMGBREAK)) {\n addClass([this.captionEle], classes.CLS_IMGBREAK);\n }\n if (selectNode.classList.contains(classes.CLS_IMGLEFT)) {\n addClass([this.captionEle], classes.CLS_IMGLEFT);\n }\n if (selectNode.classList.contains(classes.CLS_IMGRIGHT)) {\n addClass([this.captionEle], classes.CLS_IMGRIGHT);\n }\n if (selectNode.classList.contains(classes.CLS_IMGCENTER)) {\n addClass([this.captionEle], classes.CLS_IMGCENTER);\n }\n this.parent.formatter.process(this.parent, e.args, e.args, { insertElement: this.captionEle, selectNode: e.selectNode, subCommand: subCommand });\n this.parent.formatter.editorManager.nodeSelection.setSelectionText(this.contentModule.getDocument(), imgInner.childNodes[0], imgInner.childNodes[0], 0, imgInner.childNodes[0].textContent.length);\n }\n if (this.quickToolObj && document.body.contains(this.quickToolObj.imageQTBar.element)) {\n this.quickToolObj.imageQTBar.hidePopup();\n removeClass([selectNode], 'e-img-focus');\n }\n };\n Image.prototype.imageSize = function (e) {\n var _this = this;\n if (e.selectNode[0].nodeName !== 'IMG') {\n return;\n }\n this.imagDialog(e);\n if (!isNullOrUndefined(this.dialogObj)) {\n var imgSizeHeader = this.i10n.getConstant('imageSizeHeader');\n var linkUpdate = this.i10n.getConstant('dialogUpdate');\n var dialogContent = this.imgsizeInput(e);\n var selectObj_1 = { args: e.args, selfImage: this, selection: e.selection, selectNode: e.selectNode };\n this.dialogObj.setProperties({\n height: 'inherit', width: '290px', header: imgSizeHeader, content: dialogContent, position: { X: 'center', Y: 'center' },\n buttons: [{\n // eslint-disable-next-line\n click: function (e) {\n _this.insertSize(selectObj_1);\n },\n buttonModel: {\n content: linkUpdate, cssClass: 'e-flat e-update-size', isPrimary: true\n }\n }]\n });\n this.dialogObj.element.style.maxHeight = 'inherit';\n this.dialogObj.content.querySelector('input').focus();\n }\n };\n Image.prototype.break = function (e) {\n if (e.selectNode[0].nodeName !== 'IMG') {\n return;\n }\n var subCommand = (e.args.item) ?\n e.args.item.subCommand : 'Break';\n this.parent.formatter.process(this.parent, e.args, e.args, { selectNode: e.selectNode, subCommand: subCommand });\n };\n Image.prototype.inline = function (e) {\n if (e.selectNode[0].nodeName !== 'IMG') {\n return;\n }\n var subCommand = (e.args.item) ?\n e.args.item.subCommand : 'Inline';\n this.parent.formatter.process(this.parent, e.args, e.args, { selectNode: e.selectNode, subCommand: subCommand });\n };\n Image.prototype.alignImage = function (e, type) {\n var subCommand = (e.args.item) ?\n e.args.item.subCommand : type;\n this.parent.formatter.process(this.parent, e.args, e.args, { selectNode: e.selectNode, subCommand: subCommand });\n };\n Image.prototype.clearDialogObj = function () {\n if (this.dialogObj) {\n this.dialogObj.destroy();\n detach(this.dialogObj.element);\n this.dialogObj = null;\n }\n };\n Image.prototype.imagDialog = function (e) {\n var _this = this;\n if (this.dialogObj) {\n this.dialogObj.hide({ returnValue: true });\n return;\n }\n var imgDialog = this.parent.createElement('div', { className: 'e-rte-img-dialog', id: this.rteID + '_image' });\n this.parent.element.appendChild(imgDialog);\n var imgInsert = this.i10n.getConstant('dialogInsert');\n var imglinkCancel = this.i10n.getConstant('dialogCancel');\n var imgHeader = this.i10n.getConstant('imageHeader');\n var selection = e.selection;\n var selectObj = { selfImage: this, selection: e.selection, args: e.args, selectParent: e.selectParent };\n var dialogModel = {\n header: imgHeader,\n cssClass: classes.CLS_RTE_ELEMENTS,\n enableRtl: this.parent.enableRtl,\n locale: this.parent.locale,\n showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px', height: 'inherit',\n position: { X: 'center', Y: (Browser.isDevice) ? 'center' : 'top' },\n isModal: Browser.isDevice,\n buttons: [{\n click: this.insertImageUrl.bind(selectObj),\n buttonModel: { content: imgInsert, cssClass: 'e-flat e-insertImage', isPrimary: true, disabled: true }\n },\n {\n click: function (e) {\n _this.cancelDialog(e);\n },\n buttonModel: { cssClass: 'e-flat e-cancel', content: imglinkCancel }\n }],\n target: (Browser.isDevice) ? document.body : this.parent.element,\n animationSettings: { effect: 'None' },\n close: function (event) {\n if (_this.isImgUploaded) {\n _this.uploadObj.removing();\n }\n _this.parent.isBlur = false;\n if (event && event.event.returnValue) {\n if (_this.parent.editorMode === 'HTML') {\n selection.restore();\n }\n else {\n _this.parent.formatter.editorManager.markdownSelection.restore(_this.parent.contentModule.getEditPanel());\n }\n }\n _this.dialogObj.destroy();\n detach(_this.dialogObj.element);\n _this.dialogRenderObj.close(event);\n _this.dialogObj = null;\n }\n };\n var dialogContent = this.parent.createElement('div', { className: 'e-img-content' });\n if ((!isNullOrUndefined(this.parent.insertImageSettings.path) && this.parent.editorMode === 'Markdown')\n || this.parent.editorMode === 'HTML') {\n dialogContent.appendChild(this.imgUpload(e));\n }\n var linkHeader = this.parent.createElement('div', { className: 'e-linkheader' });\n var linkHeaderText = this.i10n.getConstant('imageLinkHeader');\n if (this.parent.editorMode === 'HTML') {\n linkHeader.innerHTML = linkHeaderText;\n }\n else {\n linkHeader.innerHTML = this.i10n.getConstant('mdimageLink');\n }\n dialogContent.appendChild(linkHeader);\n dialogContent.appendChild(this.imageUrlPopup(e));\n if (e.selectNode && e.selectNode[0].nodeName === 'IMG') {\n dialogModel.header = this.parent.localeObj.getConstant('editImageHeader');\n dialogModel.content = dialogContent;\n }\n else {\n dialogModel.content = dialogContent;\n }\n this.dialogObj = this.dialogRenderObj.render(dialogModel);\n this.dialogObj.createElement = this.parent.createElement;\n this.dialogObj.appendTo(imgDialog);\n if (isNullOrUndefined(this.dialogObj)) {\n return;\n }\n if (e.selectNode && e.selectNode[0].nodeName === 'IMG' && (e.name === 'insertImage')) {\n this.dialogObj.element.querySelector('.e-insertImage').textContent = this.parent.localeObj.getConstant('dialogUpdate');\n }\n imgDialog.style.maxHeight = 'inherit';\n if (this.quickToolObj) {\n if (this.quickToolObj.imageQTBar && document.body.contains(this.quickToolObj.imageQTBar.element)) {\n this.quickToolObj.imageQTBar.hidePopup();\n if (!isNullOrUndefined(e.selectParent)) {\n removeClass([e.selectParent[0]], 'e-img-focus');\n }\n }\n if (this.quickToolObj.inlineQTBar && document.body.contains(this.quickToolObj.inlineQTBar.element)) {\n this.quickToolObj.inlineQTBar.hidePopup();\n }\n }\n };\n // eslint-disable-next-line\n Image.prototype.cancelDialog = function (e) {\n this.parent.isBlur = false;\n this.dialogObj.hide({ returnValue: true });\n if (this.isImgUploaded) {\n this.uploadObj.removing();\n }\n };\n Image.prototype.onDocumentClick = function (e) {\n var target = e.target;\n if (target.nodeName === 'IMG') {\n this.imgEle = target;\n }\n if (!isNullOrUndefined(this.dialogObj) && ((\n // eslint-disable-next-line\n !closest(target, '[id=' + \"'\" + this.dialogObj.element.id + \"'\" + ']') && this.parent.toolbarSettings.enable && this.parent.getToolbarElement() &&\n !this.parent.getToolbarElement().contains(e.target)) ||\n (this.parent.getToolbarElement() && this.parent.getToolbarElement().contains(e.target) &&\n !closest(target, '#' + this.parent.getID() + '_toolbar_Image') &&\n !target.querySelector('#' + this.parent.getID() + '_toolbar_Image')))) {\n /* eslint-disable */\n if (e.offsetX > e.target.clientWidth || e.offsetY > e.target.clientHeight) {\n }\n else {\n this.dialogObj.hide({ returnValue: true });\n this.parent.isBlur = true;\n dispatchEvent(this.parent.element, 'focusout');\n }\n /* eslint-enable */\n }\n if (e.target.tagName !== 'IMG' && this.imgResizeDiv && !(this.quickToolObj &&\n this.quickToolObj.imageQTBar && this.quickToolObj.imageQTBar.element.contains(e.target)) &&\n this.contentModule.getEditPanel().contains(this.imgResizeDiv)) {\n this.cancelResizeAction();\n }\n if (this.contentModule.getEditPanel().querySelector('.e-img-resize')) {\n if (target.tagName !== 'IMG') {\n this.removeResizeEle();\n }\n if (target.tagName !== 'IMG' && !isNOU(this.imgEle)) {\n this.imgEle.style.outline = '';\n }\n else if (!isNOU(this.prevSelectedImgEle) && this.prevSelectedImgEle !== target) {\n this.prevSelectedImgEle.style.outline = '';\n }\n }\n };\n Image.prototype.removeResizeEle = function () {\n EventHandler.remove(this.contentModule.getDocument(), Browser.touchMoveEvent, this.resizing);\n EventHandler.remove(this.contentModule.getDocument(), Browser.touchEndEvent, this.resizeEnd);\n detach(this.contentModule.getEditPanel().querySelector('.e-img-resize'));\n };\n Image.prototype.onWindowResize = function () {\n if (!isNOU(this.contentModule) && !isNOU(this.contentModule.getEditPanel().querySelector('.e-img-resize'))) {\n this.cancelResizeAction();\n }\n };\n // eslint-disable-next-line\n Image.prototype.imageUrlPopup = function (e) {\n var _this = this;\n var imgUrl = this.parent.createElement('div', { className: 'imgUrl' });\n var placeUrl = this.i10n.getConstant('imageUrl');\n this.inputUrl = this.parent.createElement('input', {\n className: 'e-input e-img-url',\n attrs: { placeholder: placeUrl, spellcheck: 'false' }\n });\n this.inputUrl.addEventListener('input', function () {\n if (!isNOU(_this.inputUrl)) {\n if (_this.inputUrl.value.length === 0) {\n _this.dialogObj.getButtons(0).element.disabled = true;\n }\n else {\n _this.dialogObj.getButtons(0).element.removeAttribute('disabled');\n }\n }\n });\n imgUrl.appendChild(this.inputUrl);\n return imgUrl;\n };\n // eslint-disable-next-line\n Image.prototype.insertImageUrl = function (e) {\n var proxy = this.selfImage;\n proxy.isImgUploaded = false;\n var url = proxy.inputUrl.value;\n if (proxy.parent.formatter.getUndoRedoStack().length === 0) {\n proxy.parent.formatter.saveData();\n }\n if (!isNullOrUndefined(proxy.uploadUrl) && proxy.uploadUrl.url !== '') {\n proxy.uploadUrl.cssClass = (proxy.parent.insertImageSettings.display === 'inline' ?\n classes.CLS_IMGINLINE : classes.CLS_IMGBREAK);\n proxy.dialogObj.hide({ returnValue: false });\n proxy.parent.formatter.process(proxy.parent, this.args, this.args.originalEvent, proxy.uploadUrl);\n proxy.uploadUrl.url = '';\n if (proxy.contentModule.getEditPanel().querySelector('.e-img-resize')) {\n proxy.imgEle.style.outline = '';\n proxy.removeResizeEle();\n }\n }\n else if (url !== '') {\n if (proxy.parent.editorMode === 'HTML' && isNullOrUndefined(closest(\n // eslint-disable-next-line\n this.selection.range.startContainer.parentNode, '[id=' + \"'\" + proxy.contentModule.getPanel().id + \"'\" + ']'))) {\n proxy.contentModule.getEditPanel().focus();\n var range = proxy.parent.formatter.editorManager.nodeSelection.getRange(proxy.contentModule.getDocument());\n this.selection = proxy.parent.formatter.editorManager.nodeSelection.save(range, proxy.contentModule.getDocument());\n this.selectParent = proxy.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);\n }\n var regex = /[\\w-]+.(jpg|png|jpeg|gif)/g;\n var matchUrl = (!isNullOrUndefined(url.match(regex)) && proxy.parent.editorMode === 'HTML') ? url.match(regex)[0] : '';\n var value = {\n cssClass: (proxy.parent.insertImageSettings.display === 'inline' ? classes.CLS_IMGINLINE : classes.CLS_IMGBREAK),\n url: url, selection: this.selection, altText: matchUrl,\n selectParent: this.selectParent, width: {\n width: proxy.parent.insertImageSettings.width, minWidth: proxy.parent.insertImageSettings.minWidth,\n maxWidth: proxy.parent.getInsertImgMaxWidth()\n },\n height: {\n height: proxy.parent.insertImageSettings.height, minHeight: proxy.parent.insertImageSettings.minHeight,\n maxHeight: proxy.parent.insertImageSettings.maxHeight\n }\n };\n proxy.parent.formatter.process(proxy.parent, this.args, this.args.originalEvent, value);\n proxy.dialogObj.hide({ returnValue: false });\n }\n };\n Image.prototype.imgsizeInput = function (e) {\n var _this = this;\n var selectNode = e.selectNode[0];\n var imgHeight = this.i10n.getConstant('imageHeight');\n var imgWidth = this.i10n.getConstant('imageWidth');\n var imgSizeWrap = this.parent.createElement('div', { className: 'e-img-sizewrap' });\n var widthVal = isNullOrUndefined(this.changedWidthValue) && (selectNode.style.width.toString() === 'auto' ||\n selectNode.style.width !== '') ? selectNode.style.width : !isNullOrUndefined(this.changedWidthValue) ?\n this.changedWidthValue : (parseInt(selectNode.getClientRects()[0].width.toString(), 10)).toString();\n var heightVal = isNullOrUndefined(this.changedHeightValue) && (selectNode.style.height.toString() === 'auto' ||\n selectNode.style.height !== '') ? selectNode.style.height : !isNullOrUndefined(this.changedHeightValue) ?\n this.changedHeightValue : (parseInt(selectNode.getClientRects()[0].height.toString(), 10)).toString();\n this.changedWidthValue = null;\n this.changedHeightValue = null;\n var content = '' +\n '' + '
' +\n '
';\n var contentElem = parseHtml(content);\n imgSizeWrap.appendChild(contentElem);\n var widthNum = new TextBox({\n value: formatUnit(widthVal),\n enableRtl: this.parent.enableRtl,\n input: function (e) {\n _this.inputWidthValue = formatUnit(_this.inputValue(e.value));\n }\n });\n widthNum.createElement = this.parent.createElement;\n widthNum.appendTo(imgSizeWrap.querySelector('#imgwidth'));\n var heightNum = new TextBox({\n value: formatUnit(heightVal),\n enableRtl: this.parent.enableRtl,\n input: function (e) {\n _this.inputHeightValue = formatUnit(_this.inputValue(e.value));\n }\n });\n heightNum.createElement = this.parent.createElement;\n heightNum.appendTo(imgSizeWrap.querySelector('#imgheight'));\n return imgSizeWrap;\n };\n Image.prototype.inputValue = function (value) {\n if (value === 'auto' || value.indexOf('%') !== -1 || value.indexOf('px') !== -1\n || value.match(/(\\d+)/)) {\n return value;\n }\n else {\n return 'auto';\n }\n };\n Image.prototype.insertSize = function (e) {\n e.selection.restore();\n var proxy = e.selfImage;\n if (proxy.parent.formatter.getUndoRedoStack().length === 0) {\n proxy.parent.formatter.saveData();\n }\n var dialogEle = proxy.dialogObj.element;\n this.changedWidthValue = this.inputWidthValue;\n this.changedHeightValue = this.inputHeightValue;\n var width = dialogEle.querySelector('.e-img-width').value;\n var height = dialogEle.parentElement.querySelector('.e-img-height').value;\n proxy.parent.formatter.process(this.parent, e.args, e.args, {\n width: width, height: height, selectNode: e.selectNode,\n subCommand: e.args.item.subCommand\n });\n if (this.imgResizeDiv) {\n proxy.imgResizePos(e.selectNode[0], this.imgResizeDiv);\n }\n proxy.dialogObj.hide({ returnValue: true });\n };\n Image.prototype.insertImage = function (e) {\n this.imagDialog(e);\n if (!isNullOrUndefined(this.dialogObj)) {\n this.dialogObj.element.style.maxHeight = 'inherit';\n var dialogContent = this.dialogObj.element.querySelector('.e-img-content');\n if (((!isNullOrUndefined(this.parent.insertImageSettings.path) && this.parent.editorMode === 'Markdown')\n || this.parent.editorMode === 'HTML')) {\n document.getElementById(this.rteID + '_insertImage').focus();\n }\n else {\n dialogContent.querySelector('.e-img-url').focus();\n }\n }\n };\n Image.prototype.imgUpload = function (e) {\n var _this = this;\n var save;\n var selectParent;\n // eslint-disable-next-line\n var proxy = this;\n var iframe = proxy.parent.iframeSettings.enable;\n if (proxy.parent.editorMode === 'HTML' && (!iframe && isNullOrUndefined(closest(e.selection.range.startContainer.parentNode, '[id='\n // eslint-disable-next-line\n + \"'\" + this.parent.contentModule.getPanel().id + \"'\" + ']'))\n || (iframe && !hasClass(e.selection.range.startContainer.parentNode.ownerDocument.querySelector('body'), 'e-lib')))) {\n this.contentModule.getEditPanel().focus();\n var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());\n save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());\n selectParent = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);\n }\n else {\n save = e.selection;\n selectParent = e.selectParent;\n }\n var uploadParentEle = this.parent.createElement('div', { className: 'e-img-uploadwrap e-droparea' });\n var deviceImgUpMsg = this.i10n.getConstant('imageDeviceUploadMessage');\n var imgUpMsg = this.i10n.getConstant('imageUploadMessage');\n var span = this.parent.createElement('span', { className: 'e-droptext' });\n var spanMsg = this.parent.createElement('span', {\n className: 'e-rte-upload-text', innerHTML: ((Browser.isDevice) ? deviceImgUpMsg : imgUpMsg)\n });\n span.appendChild(spanMsg);\n var btnEle = this.parent.createElement('button', {\n className: 'e-browsebtn', id: this.rteID + '_insertImage', attrs: { autofocus: 'true', type: 'button' }\n });\n span.appendChild(btnEle);\n uploadParentEle.appendChild(span);\n var browserMsg = this.i10n.getConstant('browse');\n var button = new Button({ content: browserMsg, enableRtl: this.parent.enableRtl });\n button.isStringTemplate = true;\n button.createElement = this.parent.createElement;\n button.appendTo(btnEle);\n var btnClick = (Browser.isDevice) ? span : btnEle;\n EventHandler.add(btnClick, 'click', this.fileSelect, this);\n var uploadEle = this.parent.createElement('input', {\n id: this.rteID + '_upload', attrs: { type: 'File', name: 'UploadFiles' }\n });\n uploadParentEle.appendChild(uploadEle);\n var altText;\n var rawFile;\n var selectArgs;\n var filesData;\n var beforeUploadArgs;\n this.uploadObj = new Uploader({\n asyncSettings: { saveUrl: this.parent.insertImageSettings.saveUrl, removeUrl: this.parent.insertImageSettings.removeUrl },\n dropArea: span, multiple: false, enableRtl: this.parent.enableRtl,\n allowedExtensions: this.parent.insertImageSettings.allowedTypes.toString(),\n selected: function (e) {\n proxy.isImgUploaded = true;\n selectArgs = e;\n filesData = e.filesData;\n if (_this.parent.isServerRendered) {\n selectArgs = JSON.parse(JSON.stringify(e));\n e.cancel = true;\n rawFile = e.filesData;\n selectArgs.filesData = rawFile;\n }\n _this.parent.trigger(events.imageSelected, selectArgs, function (selectArgs) {\n if (!selectArgs.cancel) {\n _this.checkExtension(selectArgs.filesData[0]);\n altText = selectArgs.filesData[0].name;\n if (_this.parent.editorMode === 'HTML' && isNullOrUndefined(_this.parent.insertImageSettings.path)) {\n var reader_1 = new FileReader();\n // eslint-disable-next-line\n reader_1.addEventListener('load', function (e) {\n var url = _this.parent.insertImageSettings.saveFormat === 'Base64' ? reader_1.result :\n URL.createObjectURL(convertToBlob(reader_1.result));\n proxy.uploadUrl = {\n url: url, selection: save, altText: altText,\n selectParent: selectParent,\n width: {\n width: proxy.parent.insertImageSettings.width, minWidth: proxy.parent.insertImageSettings.minWidth,\n maxWidth: proxy.parent.getInsertImgMaxWidth()\n }, height: {\n height: proxy.parent.insertImageSettings.height,\n minHeight: proxy.parent.insertImageSettings.minHeight,\n maxHeight: proxy.parent.insertImageSettings.maxHeight\n }\n };\n proxy.inputUrl.setAttribute('disabled', 'true');\n if (isNullOrUndefined(proxy.parent.insertImageSettings.saveUrl) && _this.isAllowedTypes\n && !isNullOrUndefined(_this.dialogObj)) {\n _this.dialogObj.getButtons(0).element.removeAttribute('disabled');\n }\n });\n reader_1.readAsDataURL(selectArgs.filesData[0].rawFile);\n }\n if (_this.parent.isServerRendered) {\n /* eslint-disable */\n _this.uploadObj._internalRenderSelect(selectArgs, rawFile);\n /* eslint-enable */\n }\n }\n });\n },\n beforeUpload: function (args) {\n if (_this.parent.isServerRendered) {\n beforeUploadArgs = JSON.parse(JSON.stringify(args));\n beforeUploadArgs.filesData = filesData;\n args.cancel = true;\n _this.parent.trigger(events.imageUploading, beforeUploadArgs, function (beforeUploadArgs) {\n if (beforeUploadArgs.cancel) {\n return;\n }\n /* eslint-disable */\n _this.uploadObj.currentRequestHeader = beforeUploadArgs.currentRequest ?\n beforeUploadArgs.currentRequest : _this.uploadObj.currentRequestHeader;\n _this.uploadObj.customFormDatas = beforeUploadArgs.customFormData && beforeUploadArgs.customFormData.length > 0 ?\n beforeUploadArgs.customFormData : _this.uploadObj.customFormDatas;\n _this.uploadObj.uploadFiles(rawFile, null);\n /* eslint-enable */\n });\n }\n else {\n _this.parent.trigger(events.beforeImageUpload, args);\n }\n },\n uploading: function (e) {\n if (!_this.parent.isServerRendered) {\n _this.parent.trigger(events.imageUploading, e);\n }\n },\n success: function (e) {\n _this.parent.trigger(events.imageUploadSuccess, e, function (e) {\n if (!isNullOrUndefined(_this.parent.insertImageSettings.path)) {\n var url = _this.parent.insertImageSettings.path + e.file.name;\n // eslint-disable-next-line\n var value = { url: url, selection: save };\n proxy.uploadUrl = {\n url: url, selection: save, altText: altText, selectParent: selectParent,\n width: {\n width: proxy.parent.insertImageSettings.width, minWidth: proxy.parent.insertImageSettings.minWidth,\n maxWidth: proxy.parent.getInsertImgMaxWidth()\n }, height: {\n height: proxy.parent.insertImageSettings.height, minHeight: proxy.parent.insertImageSettings.minHeight,\n maxHeight: proxy.parent.insertImageSettings.maxHeight\n }\n };\n proxy.inputUrl.setAttribute('disabled', 'true');\n }\n if (e.operation === 'upload' && !isNullOrUndefined(_this.dialogObj)) {\n _this.dialogObj.getButtons(0).element.removeAttribute('disabled');\n }\n });\n },\n failure: function (e) {\n _this.parent.trigger(events.imageUploadFailed, e);\n },\n removing: function () {\n // eslint-disable-next-line\n _this.parent.trigger(events.imageRemoving, e, function (e) {\n proxy.isImgUploaded = false;\n _this.dialogObj.getButtons(0).element.disabled = true;\n proxy.inputUrl.removeAttribute('disabled');\n if (proxy.uploadUrl) {\n proxy.uploadUrl.url = '';\n }\n });\n }\n });\n this.uploadObj.isStringTemplate = true;\n this.uploadObj.createElement = this.parent.createElement;\n this.uploadObj.appendTo(uploadEle);\n return uploadParentEle;\n };\n Image.prototype.checkExtension = function (e) {\n if (this.uploadObj.allowedExtensions) {\n if (this.uploadObj.allowedExtensions.toLocaleLowerCase().indexOf(('.' + e.type).toLocaleLowerCase()) === -1) {\n this.dialogObj.getButtons(0).element.setAttribute('disabled', 'disabled');\n this.isAllowedTypes = false;\n }\n else {\n this.isAllowedTypes = true;\n }\n }\n };\n Image.prototype.fileSelect = function () {\n this.dialogObj.element.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();\n return false;\n };\n Image.prototype.dragStart = function (e) {\n if (e.target.nodeName === 'IMG') {\n this.parent.trigger(events.actionBegin, e, function (actionBeginArgs) {\n if (actionBeginArgs.cancel) {\n e.preventDefault();\n }\n else {\n e.dataTransfer.effectAllowed = 'copyMove';\n e.target.classList.add(classes.CLS_RTE_DRAG_IMAGE);\n }\n });\n }\n else {\n return true;\n }\n };\n Image.prototype.dragEnter = function (e) {\n e.dataTransfer.dropEffect = 'copy';\n e.preventDefault();\n };\n Image.prototype.dragOver = function (e) {\n if ((Browser.info.name === 'edge' && e.dataTransfer.items[0].type.split('/')[0].indexOf('image') > -1) ||\n (Browser.isIE && e.dataTransfer.types[0] === 'Files')) {\n e.preventDefault();\n }\n else {\n return true;\n }\n };\n /**\n * Used to set range When drop an image\n *\n * @param {ImageDropEventArgs} args - specifies the image arguments.\n * @returns {void}\n */\n Image.prototype.dragDrop = function (args) {\n var _this = this;\n this.parent.trigger(events.beforeImageDrop, args, function (e) {\n var imgElement = _this.parent.inputElement.ownerDocument.querySelector('.' + classes.CLS_RTE_DRAG_IMAGE);\n var isImgOrFileDrop = (imgElement && imgElement.tagName === 'IMG') || e.dataTransfer.files.length > 0;\n if (!e.cancel && isImgOrFileDrop) {\n _this.parent.trigger(events.actionBegin, e, function (actionBeginArgs) {\n if (actionBeginArgs.cancel) {\n e.preventDefault();\n }\n else {\n if (closest(e.target, '#' + _this.parent.getID() + '_toolbar') ||\n _this.parent.inputElement.contentEditable === 'false') {\n e.preventDefault();\n return;\n }\n if (_this.parent.element.querySelector('.' + classes.CLS_IMG_RESIZE)) {\n detach(_this.imgResizeDiv);\n }\n e.preventDefault();\n var range = void 0;\n if (_this.contentModule.getDocument().caretRangeFromPoint) { //For chrome\n range = _this.contentModule.getDocument().caretRangeFromPoint(e.clientX, e.clientY);\n }\n else if ((e.rangeParent)) { //For mozilla firefox\n range = _this.contentModule.getDocument().createRange();\n range.setStart(e.rangeParent, e.rangeOffset);\n }\n else {\n range = _this.getDropRange(e.clientX, e.clientY); //For internet explorer\n }\n _this.parent.notify(events.selectRange, { range: range });\n var uploadArea = _this.parent.element.querySelector('.' + classes.CLS_DROPAREA);\n if (uploadArea) {\n return;\n }\n _this.insertDragImage(e);\n }\n });\n }\n else {\n if (isImgOrFileDrop) {\n e.preventDefault();\n }\n }\n });\n };\n /**\n * Used to calculate range on internet explorer\n *\n * @param {number} x - specifies the x range.\n * @param {number} y - specifies the y range.\n * @returns {void}\n */\n Image.prototype.getDropRange = function (x, y) {\n var startRange = this.contentModule.getDocument().createRange();\n this.parent.formatter.editorManager.nodeSelection.setRange(this.contentModule.getDocument(), startRange);\n var elem = this.contentModule.getDocument().elementFromPoint(x, y);\n var startNode = (elem.childNodes.length > 0 ? elem.childNodes[0] : elem);\n var startCharIndexCharacter = 0;\n if (this.parent.inputElement.firstChild.innerHTML === '
') {\n startRange.setStart(startNode, startCharIndexCharacter);\n startRange.setEnd(startNode, startCharIndexCharacter);\n }\n else {\n var rangeRect = void 0;\n do {\n startCharIndexCharacter++;\n startRange.setStart(startNode, startCharIndexCharacter);\n startRange.setEnd(startNode, startCharIndexCharacter + 1);\n rangeRect = startRange.getBoundingClientRect();\n } while (rangeRect.left < x && startCharIndexCharacter < startNode.length - 1);\n }\n return startRange;\n };\n Image.prototype.insertDragImage = function (e) {\n var _this = this;\n e.preventDefault();\n var activePopupElement = this.parent.element.querySelector('' + classes.CLS_POPUP_OPEN);\n this.parent.notify(events.drop, { args: e });\n if (activePopupElement) {\n activePopupElement.classList.add(classes.CLS_HIDE);\n }\n var imgElement = this.parent.inputElement.ownerDocument.querySelector('.' + classes.CLS_RTE_DRAG_IMAGE);\n if (e.dataTransfer.files.length > 0 && imgElement === null) { //For external image drag and drop\n if (e.dataTransfer.files.length > 1) {\n return;\n }\n var imgFiles = e.dataTransfer.files;\n var fileName = imgFiles[0].name;\n var imgType = fileName.substring(fileName.lastIndexOf('.'));\n var allowedTypes = this.parent.insertImageSettings.allowedTypes;\n for (var i = 0; i < allowedTypes.length; i++) {\n if (imgType.toLocaleLowerCase() === allowedTypes[i].toLowerCase()) {\n if (this.parent.insertImageSettings.saveUrl) {\n this.onSelect(e);\n }\n else {\n var args = { args: e, text: '', file: imgFiles[0] };\n e.preventDefault();\n this.imagePaste(args);\n }\n }\n }\n }\n else { //For internal image drag and drop\n var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());\n if (imgElement && imgElement.tagName === 'IMG') {\n if (imgElement.nextElementSibling) {\n if (imgElement.nextElementSibling.classList.contains(classes.CLS_IMG_INNER)) {\n range.insertNode(imgElement.parentElement.parentElement);\n }\n else {\n range.insertNode(imgElement);\n }\n }\n else {\n range.insertNode(imgElement);\n }\n imgElement.classList.remove(classes.CLS_RTE_DRAG_IMAGE);\n var imgArgs_1 = { elements: [imgElement] };\n imgElement.addEventListener('load', function () {\n _this.parent.trigger(events.actionComplete, imgArgs_1);\n });\n this.parent.formatter.editorManager.nodeSelection.Clear(this.contentModule.getDocument());\n var args = e;\n this.resizeStart(args, imgElement);\n this.hideImageQuickToolbar();\n }\n }\n };\n Image.prototype.onSelect = function (args) {\n var _this = this;\n // eslint-disable-next-line\n var proxy = this;\n var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());\n var parentElement = this.parent.createElement('ul', { className: classes.CLS_UPLOAD_FILES });\n this.parent.element.appendChild(parentElement);\n var validFiles = {\n name: '',\n size: 0,\n status: '',\n statusCode: '',\n type: '',\n rawFile: args.dataTransfer.files[0],\n validationMessages: {}\n };\n var imageTag = this.parent.createElement('IMG');\n imageTag.style.opacity = '0.5';\n imageTag.classList.add(classes.CLS_RTE_IMAGE);\n imageTag.classList.add(classes.CLS_IMGINLINE);\n imageTag.classList.add(classes.CLS_RESIZE);\n var file = validFiles.rawFile;\n var reader = new FileReader();\n reader.addEventListener('load', function () {\n var url = URL.createObjectURL(convertToBlob(reader.result));\n imageTag.src = proxy.parent.insertImageSettings.saveFormat === 'Blob' ? url : reader.result;\n });\n if (file) {\n reader.readAsDataURL(file);\n }\n range.insertNode(imageTag);\n this.uploadMethod(args, imageTag);\n var e = { elements: [imageTag] };\n imageTag.addEventListener('load', function () {\n _this.parent.trigger(events.actionComplete, e);\n });\n detach(parentElement);\n };\n /**\n * Rendering uploader and popup for drag and drop\n *\n * @param {DragEvent} dragEvent - specifies the event.\n * @param {HTMLImageElement} imageElement - specifies the element.\n * @returns {void}\n */\n Image.prototype.uploadMethod = function (dragEvent, imageElement) {\n var _this = this;\n var isUploading = false;\n // eslint-disable-next-line\n var proxy = this;\n var popupEle = this.parent.createElement('div');\n this.parent.element.appendChild(popupEle);\n var uploadEle = this.parent.createElement('input', {\n id: this.rteID + '_upload', attrs: { type: 'File', name: 'UploadFiles' }\n });\n var offsetY = this.parent.iframeSettings.enable ? -50 : -90;\n this.popupObj = new Popup(popupEle, {\n relateTo: imageElement,\n height: '85px',\n width: '300px',\n offsetY: offsetY,\n content: uploadEle,\n viewPortElement: this.parent.element,\n position: { X: 'center', Y: 'top' },\n enableRtl: this.parent.enableRtl,\n zIndex: 10001,\n // eslint-disable-next-line\n close: function (event) {\n _this.parent.isBlur = false;\n _this.popupObj.destroy();\n detach(_this.popupObj.element);\n _this.popupObj = null;\n if (!_this.parent.inlineMode.enable) {\n _this.parent.toolbarModule.baseToolbar.toolbarObj.disable(false);\n }\n }\n });\n this.popupObj.element.style.display = 'none';\n addClass([this.popupObj.element], classes.CLS_POPUP_OPEN);\n addClass([this.popupObj.element], classes.CLS_RTE_UPLOAD_POPUP);\n var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());\n var timeOut = dragEvent.dataTransfer.files[0].size > 1000000 ? 300 : 100;\n setTimeout(function () {\n proxy.refreshPopup(imageElement);\n }, timeOut);\n var rawFile;\n var beforeUploadArgs;\n this.uploadObj = new Uploader({\n asyncSettings: {\n saveUrl: this.parent.insertImageSettings.saveUrl,\n removeUrl: this.parent.insertImageSettings.removeUrl\n },\n cssClass: classes.CLS_RTE_DIALOG_UPLOAD,\n dropArea: this.parent.element,\n allowedExtensions: this.parent.insertImageSettings.allowedTypes.toString(),\n removing: function () {\n _this.parent.inputElement.contentEditable = 'true';\n isUploading = false;\n detach(imageElement);\n _this.popupObj.close();\n },\n canceling: function () {\n _this.parent.inputElement.contentEditable = 'true';\n isUploading = false;\n detach(imageElement);\n _this.popupObj.close();\n _this.quickToolObj.imageQTBar.hidePopup();\n setTimeout(function () {\n _this.uploadObj.destroy();\n }, 900);\n },\n beforeUpload: function (args) {\n if (_this.parent.isServerRendered) {\n beforeUploadArgs = JSON.parse(JSON.stringify(args));\n beforeUploadArgs.filesData = rawFile;\n isUploading = true;\n args.cancel = true;\n _this.parent.trigger(events.imageUploading, beforeUploadArgs, function (beforeUploadArgs) {\n if (beforeUploadArgs.cancel) {\n return;\n }\n if (!_this.parent.inlineMode.enable) {\n _this.parent.toolbarModule.baseToolbar.toolbarObj.disable(true);\n }\n /* eslint-disable */\n _this.uploadObj.currentRequestHeader = beforeUploadArgs.currentRequest ?\n beforeUploadArgs.currentRequest : _this.uploadObj.currentRequestHeader;\n _this.uploadObj.customFormDatas = beforeUploadArgs.customFormData && beforeUploadArgs.customFormData.length > 0 ?\n beforeUploadArgs.customFormData : _this.uploadObj.customFormDatas;\n _this.uploadObj.uploadFiles(rawFile, null);\n _this.parent.inputElement.contentEditable = 'false';\n /* eslint-enable */\n });\n }\n else {\n _this.parent.trigger(events.beforeImageUpload, args);\n if (!_this.parent.inlineMode.enable) {\n _this.parent.toolbarModule.baseToolbar.toolbarObj.disable(true);\n }\n }\n },\n uploading: function (e) {\n if (!_this.parent.isServerRendered) {\n isUploading = true;\n _this.parent.trigger(events.imageUploading, e, function (imageUploadingArgs) {\n if (imageUploadingArgs.cancel) {\n if (!isNullOrUndefined(imageElement)) {\n detach(imageElement);\n }\n if (!isNullOrUndefined(_this.popupObj.element)) {\n detach(_this.popupObj.element);\n }\n }\n else {\n _this.parent.inputElement.contentEditable = 'false';\n }\n });\n }\n },\n selected: function (e) {\n if (isUploading) {\n e.cancel = true;\n }\n if (_this.parent.isServerRendered) {\n rawFile = e.filesData;\n }\n },\n failure: function (e) {\n isUploading = false;\n _this.parent.inputElement.contentEditable = 'true';\n var args = {\n args: dragEvent,\n type: 'Images',\n isNotify: undefined,\n elements: imageElement\n };\n setTimeout(function () {\n _this.uploadFailure(imageElement, args, e);\n }, 900);\n },\n success: function (e) {\n if (e.operation === \"cancel\") {\n return;\n }\n isUploading = false;\n _this.parent.inputElement.contentEditable = 'true';\n var args = {\n args: dragEvent,\n type: 'Images',\n isNotify: undefined,\n elements: imageElement\n };\n setTimeout(function () {\n _this.uploadSuccess(imageElement, dragEvent, args, e);\n }, 900);\n }\n });\n this.uploadObj.appendTo(this.popupObj.element.childNodes[0]);\n this.popupObj.element.querySelector('.e-rte-dialog-upload .e-file-select-wrap').style.display = 'none';\n range.selectNodeContents(imageElement);\n this.parent.formatter.editorManager.nodeSelection.setRange(this.contentModule.getDocument(), range);\n };\n Image.prototype.refreshPopup = function (imageElement) {\n var imgPosition = this.parent.iframeSettings.enable ? this.parent.element.offsetTop +\n imageElement.offsetTop : imageElement.offsetTop;\n var rtePosition = this.parent.element.offsetTop + this.parent.element.offsetHeight;\n if (imgPosition > rtePosition) {\n this.popupObj.relateTo = this.parent.inputElement;\n this.popupObj.offsetY = this.parent.iframeSettings.enable ? -30 : -65;\n this.popupObj.element.style.display = 'block';\n }\n else {\n if (this.popupObj) {\n this.popupObj.refreshPosition(imageElement);\n this.popupObj.element.style.display = 'block';\n }\n }\n };\n /**\n * Called when drop image upload was failed\n *\n * @param {HTMLElement} imgEle - specifies the image element.\n * @param {IShowPopupArgs} args - specifies the arguments.\n * @param {Object} e - specfies the object.\n * @returns {void}\n */\n Image.prototype.uploadFailure = function (imgEle, args, e) {\n detach(imgEle);\n if (this.popupObj) {\n this.popupObj.close();\n }\n this.parent.trigger(events.imageUploadFailed, e);\n this.uploadObj.destroy();\n };\n /**\n * Called when drop image upload was successful\n *\n * @param {HTMLElement} imageElement - specifies the image element.\n * @param {DragEvent} dragEvent - specifies the drag event.\n * @param {IShowPopupArgs} args - specifies the arguments.\n * @param {ImageSuccessEventArgs} e - specifies the success event.\n * @returns {void}\n */\n Image.prototype.uploadSuccess = function (imageElement, dragEvent, args, e) {\n var _this = this;\n imageElement.style.opacity = '1';\n imageElement.classList.add(classes.CLS_IMG_FOCUS);\n e.element = imageElement;\n this.parent.trigger(events.imageUploadSuccess, e, function (e) {\n if (!isNullOrUndefined(_this.parent.insertImageSettings.path)) {\n var url = _this.parent.insertImageSettings.path + e.file.name;\n imageElement.src = url;\n imageElement.setAttribute('alt', e.file.name);\n }\n });\n if (this.popupObj) {\n this.popupObj.close();\n this.uploadObj.destroy();\n }\n this.showImageQuickToolbar(args);\n this.resizeStart(dragEvent, imageElement);\n };\n Image.prototype.imagePaste = function (args) {\n var _this = this;\n if (args.text.length === 0 && !isNullOrUndefined(args.file)) {\n // eslint-disable-next-line\n var proxy_1 = this;\n var reader_2 = new FileReader();\n args.args.preventDefault();\n // eslint-disable-next-line\n reader_2.addEventListener('load', function (e) {\n var url = {\n cssClass: (proxy_1.parent.insertImageSettings.display === 'inline' ? classes.CLS_IMGINLINE : classes.CLS_IMGBREAK),\n url: _this.parent.insertImageSettings.saveFormat === 'Base64' || !isNullOrUndefined(args.callBack) ?\n reader_2.result : URL.createObjectURL(convertToBlob(reader_2.result)),\n width: {\n width: proxy_1.parent.insertImageSettings.width, minWidth: proxy_1.parent.insertImageSettings.minWidth,\n maxWidth: proxy_1.parent.getInsertImgMaxWidth()\n },\n height: {\n height: proxy_1.parent.insertImageSettings.height, minHeight: proxy_1.parent.insertImageSettings.minHeight,\n maxHeight: proxy_1.parent.insertImageSettings.maxHeight\n }\n };\n if (!isNullOrUndefined(args.callBack)) {\n args.callBack(url);\n return;\n }\n else {\n proxy_1.parent.formatter.process(proxy_1.parent, { item: { command: 'Images', subCommand: 'Image' } }, args.args, url);\n _this.showPopupToolBar(args, url);\n }\n });\n reader_2.readAsDataURL(args.file);\n }\n };\n Image.prototype.showPopupToolBar = function (e, url) {\n var _this = this;\n var imageSrc = 'img[src=\"' + url.url + '\"]';\n var imageElement = this.parent.inputElement.querySelector(imageSrc);\n this.parent.quickToolbarModule.createQTBar('Image', 'MultiRow', this.parent.quickToolbarSettings.image, RenderType.ImageToolbar);\n var args = {\n args: e.args,\n type: 'Images',\n isNotify: undefined,\n elements: imageElement\n };\n if (imageElement) {\n setTimeout(function () {\n _this.showImageQuickToolbar(args);\n _this.resizeStart(e.args, imageElement);\n }, 0);\n }\n };\n /* eslint-disable */\n /**\n * Destroys the ToolBar.\n *\n * @method destroy\n * @returns {void}\n * @hidden\n\n */\n /* eslint-enable */\n Image.prototype.destroy = function () {\n this.prevSelectedImgEle = undefined;\n this.removeEventListener();\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {void}\n */\n Image.prototype.getModuleName = function () {\n return 'image';\n };\n return Image;\n}());\nexport { Image };\n","/* eslint-disable */\n/**\n * Export default locale\n */\nexport var defaultLocale = {\n 'alignments': 'Alignments',\n 'justifyLeft': 'Align Left',\n 'justifyCenter': 'Align Center',\n 'justifyRight': 'Align Right',\n 'justifyFull': 'Align Justify',\n 'fontName': 'Font Name',\n 'fontSize': 'Font Size',\n 'fontColor': 'Font Color',\n 'backgroundColor': 'Background Color',\n 'bold': 'Bold',\n 'italic': 'Italic',\n 'underline': 'Underline',\n 'strikethrough': 'Strikethrough',\n 'clearFormat': 'Clear Format',\n 'clearAll': 'Clear All',\n 'cut': 'Cut',\n 'copy': 'Copy',\n 'paste': 'Paste',\n 'unorderedList': 'Bulleted List',\n 'orderedList': 'Numbered List',\n 'indent': 'Increase Indent',\n 'outdent': 'Decrease Indent',\n 'undo': 'Undo',\n 'redo': 'Redo',\n 'superscript': 'Superscript',\n 'subscript': 'Subscript',\n 'createLink': 'Insert Link',\n 'openLink': 'Open Link',\n 'editLink': 'Edit Link',\n 'removeLink': 'Remove Link',\n 'image': 'Insert Image',\n 'replace': 'Replace',\n 'align': 'Align',\n 'caption': 'Image Caption',\n 'remove': 'Remove',\n 'insertLink': 'Insert Link',\n 'display': 'Display',\n 'altText': 'Alternative Text',\n 'dimension': 'Change Size',\n 'fullscreen': 'Maximize',\n 'maximize': 'Maximize',\n 'minimize': 'Minimize',\n 'lowerCase': 'Lower Case',\n 'upperCase': 'Upper Case',\n 'print': 'Print',\n 'formats': 'Formats',\n 'sourcecode': 'Code View',\n 'preview': 'Preview',\n 'viewside': 'ViewSide',\n 'insertCode': 'Insert Code',\n 'linkText': 'Display Text',\n 'linkTooltipLabel': 'Title',\n 'linkWebUrl': 'Web Address',\n 'linkTitle': 'Enter a title',\n 'linkurl': 'http://example.com',\n 'linkOpenInNewWindow': 'Open Link in New Window',\n 'linkHeader': 'Insert Link',\n 'dialogInsert': 'Insert',\n 'dialogCancel': 'Cancel',\n 'dialogUpdate': 'Update',\n 'imageHeader': 'Insert Image',\n 'imageLinkHeader': 'You can also provide a link from the web',\n 'mdimageLink': 'Please provide a URL for your image',\n 'imageUploadMessage': 'Drop image here or browse to upload',\n 'imageDeviceUploadMessage': 'Click here to upload',\n 'imageAlternateText': 'Alternate Text',\n 'alternateHeader': 'Alternative Text',\n 'browse': 'Browse',\n 'imageUrl': 'http://example.com/image.png',\n 'imageCaption': 'Caption',\n 'imageSizeHeader': 'Image Size',\n 'imageHeight': 'Height',\n 'imageWidth': 'Width',\n 'textPlaceholder': 'Enter Text',\n 'inserttablebtn': 'Insert Table',\n 'tabledialogHeader': 'Insert Table',\n 'tableWidth': 'Width',\n 'cellpadding': 'Cell Padding',\n 'cellspacing': 'Cell Spacing',\n 'columns': 'Number of columns',\n 'rows': 'Number of rows',\n 'tableRows': 'Table Rows',\n 'tableColumns': 'Table Columns',\n 'tableCellHorizontalAlign': 'Table Cell Horizontal Align',\n 'tableCellVerticalAlign': 'Table Cell Vertical Align',\n 'createTable': 'Create Table',\n 'removeTable': 'Remove Table',\n 'tableHeader': 'Table Header',\n 'tableRemove': 'Table Remove',\n 'tableCellBackground': 'Table Cell Background',\n 'tableEditProperties': 'Table Edit Properties',\n 'styles': 'Styles',\n 'insertColumnLeft': 'Insert Column Left',\n 'insertColumnRight': 'Insert Column Right',\n 'deleteColumn': 'Delete Column',\n 'insertRowBefore': 'Insert Row Before',\n 'insertRowAfter': 'Insert Row After',\n 'deleteRow': 'Delete Row',\n 'tableEditHeader': 'Edit Table',\n 'TableHeadingText': 'Heading',\n 'TableColText': 'Col',\n 'imageInsertLinkHeader': 'Insert Link',\n 'editImageHeader': 'Edit Image',\n \"alignmentsDropDownLeft\": 'Align Left',\n \"alignmentsDropDownCenter\": 'Align Center',\n \"alignmentsDropDownRight\": 'Align Right',\n \"alignmentsDropDownJustify\": 'Align Justify',\n \"imageDisplayDropDownInline\": 'Inline',\n \"imageDisplayDropDownBreak\": 'Break',\n \"tableInsertRowDropDownBefore\": 'Insert row before',\n \"tableInsertRowDropDownAfter\": 'Insert row after',\n \"tableInsertRowDropDownDelete\": 'Delete row',\n \"tableInsertColumnDropDownLeft\": 'Insert column left',\n \"tableInsertColumnDropDownRight\": 'Insert column right',\n \"tableInsertColumnDropDownDelete\": 'Delete column',\n \"tableVerticalAlignDropDownTop\": 'Align Top',\n \"tableVerticalAlignDropDownMiddle\": 'Align Middle',\n \"tableVerticalAlignDropDownBottom\": 'Align Bottom',\n \"tableStylesDropDownDashedBorder\": 'Dashed Borders',\n \"tableStylesDropDownAlternateRows\": 'Alternate Rows',\n 'pasteFormat': 'Paste Format',\n 'pasteFormatContent': 'Choose the formatting action',\n 'plainText': 'Plain Text',\n 'cleanFormat': 'Clean',\n 'keepFormat': 'Keep',\n 'pasteDialogOk': 'OK',\n 'pasteDialogCancel': 'Cancel',\n 'fileManager': 'File Manager',\n 'fileDialogHeader': 'File Browser',\n \"formatsDropDownParagraph\": 'Paragraph',\n 'formatsDropDownCode': 'Code',\n 'formatsDropDownQuotation': 'Quotation',\n 'formatsDropDownHeading1': 'Heading 1',\n 'formatsDropDownHeading2': 'Heading 2',\n 'formatsDropDownHeading3': 'Heading 3',\n 'formatsDropDownHeading4': 'Heading 4',\n 'fontNameSegoeUI': 'Segoe UI',\n 'fontNameArial': 'Arial',\n 'fontNameGeorgia': 'Georgia',\n 'fontNameImpact': 'Impact',\n 'fontNameTahoma': 'Tahoma',\n 'fontNameTimesNewRoman': 'Times New Roman',\n 'fontNameVerdana': 'Verdana',\n 'numberFormatListNumber': 'Number',\n 'numberFormatListLowerAlpha': 'LowerAlpha',\n 'numberFormatListUpperAlpha': 'UpperAlpha',\n 'numberFormatListLowerRoman': 'LowerRoman',\n 'numberFormatListUpperRoman': 'UpperRoman',\n 'numberFormatListLowerGreek': 'LowerGreek',\n 'bulletFormatListDisc': 'Disc',\n 'bulletFormatListCircle': 'Circle',\n 'bulletFormatListSquare': 'Square',\n 'numberFormatListNone': 'None',\n 'bulletFormatListNone': 'None'\n};\nexport var toolsLocale = {\n 'alignments': 'alignments',\n 'justifyleft': 'justifyLeft',\n 'justifycenter': 'justifyCenter',\n 'justifyright': 'justifyRight',\n 'justifyfull': 'justifyFull',\n 'fontname': 'fontName',\n 'fontsize': 'fontSize',\n 'fontcolor': 'fontColor',\n 'backgroundcolor': 'backgroundColor',\n 'bold': 'bold',\n 'italic': 'italic',\n 'underline': 'underline',\n 'strikethrough': 'strikethrough',\n 'clearformat': 'clearFormat',\n 'clearall': 'clearAll',\n 'cut': 'cut',\n 'copy': 'copy',\n 'paste': 'paste',\n 'unorderedlist': 'unorderedList',\n 'orderedlist': 'orderedList',\n 'indent': 'indent',\n 'outdent': 'outdent',\n 'undo': 'undo',\n 'redo': 'redo',\n 'superscript': 'superscript',\n 'subscript': 'subscript',\n 'createlink': 'createLink',\n 'openlink': 'openLink',\n 'editlink': 'editLink',\n 'removelink': 'removeLink',\n 'openimagelink': 'openLink',\n 'editimagelink': 'editLink',\n 'removeimagelink': 'removeLink',\n 'image': 'image',\n 'replace': 'replace',\n 'align': 'align',\n 'caption': 'caption',\n 'remove': 'remove',\n 'insertlink': 'insertLink',\n 'display': 'display',\n 'alttext': 'altText',\n 'dimension': 'dimension',\n 'fullscreen': 'fullscreen',\n 'maximize': 'maximize',\n 'minimize': 'minimize',\n 'lowercase': 'lowerCase',\n 'uppercase': 'upperCase',\n 'print': 'print',\n 'formats': 'formats',\n 'sourcecode': 'sourcecode',\n 'preview': 'preview',\n 'viewside': 'viewside',\n 'insertcode': 'insertCode',\n 'tablerows': 'tableRows',\n 'tablecolumns': 'tableColumns',\n 'tablecellhorizontalalign': 'tableCellHorizontalAlign',\n 'tablecellverticalalign': 'tableCellVerticalAlign',\n 'createtable': 'createTable',\n 'removetable': 'removeTable',\n 'tableheader': 'tableHeader',\n 'tableremove': 'tableRemove',\n 'tablecellbackground': 'tableCellBackground',\n 'tableeditproperties': 'tableEditProperties',\n 'styles': 'styles',\n 'insertcolumnleft': 'insertColumnLeft',\n 'insertcolumnright': 'insertColumnRight',\n 'deletecolumn': 'deleteColumn',\n 'aligntop': 'AlignTop',\n 'alignmiddle': 'AlignMiddle',\n 'alignbottom': 'AlignBottom',\n 'insertrowbefore': 'insertRowBefore',\n 'insertrowafter': 'insertRowAfter',\n 'deleterow': 'deleteRow'\n};\nexport var fontNameLocale = [\n { locale: 'fontNameSegoeUI', value: 'Segoe UI' },\n { locale: 'fontNameArial', value: 'Arial,Helvetica,sans-serif' },\n { locale: 'fontNameGeorgia', value: 'Georgia,serif' },\n { locale: 'fontNameImpact', value: 'Impact,Charcoal,sans-serif' },\n { locale: 'fontNameTahoma', value: 'Tahoma,Geneva,sans-serif' },\n { locale: 'fontNameTimesNewRoman', value: 'Times New Roman,Times,serif' },\n { locale: 'fontNameVerdana', value: 'Verdana,Geneva,sans-serif' }\n];\nexport var formatsLocale = [\n { locale: 'formatsDropDownParagraph', value: 'P' },\n { locale: 'formatsDropDownCode', value: 'Pre' },\n { locale: 'formatsDropDownQuotation', value: 'BlockQuote' },\n { locale: 'formatsDropDownHeading1', value: 'H1' },\n { locale: 'formatsDropDownHeading2', value: 'H2' },\n { locale: 'formatsDropDownHeading3', value: 'H3' },\n { locale: 'formatsDropDownHeading4', value: 'H4' }\n];\nexport var numberFormatListLocale = [\n { locale: 'numberFormatListNone', value: 'none' },\n { locale: 'numberFormatListNumber', value: 'decimal' },\n { locale: 'numberFormatListLowerAlpha', value: 'lower-alpha' },\n { locale: 'numberFormatListUpperAlpha', value: 'upper-alpha' },\n { locale: 'numberFormatListLowerRoman', value: 'lower-roman' },\n { locale: 'numberFormatListUpperRoman', value: 'upper-roman' },\n { locale: 'numberFormatListLowerGreek', value: 'lower-greek' }\n];\nexport var bulletFormatListLocale = [\n { locale: 'bulletFormatListNone', value: 'none' },\n { locale: 'bulletFormatListDisc', value: 'disc' },\n { locale: 'bulletFormatListCircle', value: 'circle' },\n { locale: 'bulletFormatListSquare', value: 'square' },\n];\n"],"sourceRoot":""}