@syncfusion/ej2-richtexteditor 29.2.4-760237 → 29.2.4-795127

package/blazorGlobalSrc/rich-text-editor/renderer/toolbar-renderer.js

@@ -1,747 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-navigations", "@syncfusion/ej2-splitbuttons", "@syncfusion/ej2-popups", "../base/classes", "../base/constant", "../base/classes", "@syncfusion/ej2-inputs", "../base/util", "../../editor-manager/plugin/toolbar-status", "../models/default-locale"], function (require, exports, ej2_base_1, ej2_base_2, ej2_navigations_1, ej2_splitbuttons_1, ej2_popups_1, classes, events, classes_1, ej2_inputs_1, util_1, toolbar_status_1, default_locale_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var ToolbarRenderer = (function () {
-        function ToolbarRenderer(parent, serviceLocator) {
-            this.isEscapeKey = false;
-            this.parent = parent;
-            this.isDestroyed = false;
-            if (serviceLocator) {
-                this.l10n = serviceLocator.getService('rteLocale');
-            }
-            this.wireEvent();
-        }
-        ToolbarRenderer.prototype.wireEvent = function () {
-            this.parent.on(events.destroy, this.destroy, this);
-            this.parent.on(events.destroyTooltip, this.destroyTooltip, this);
-            this.parent.on(events.closeTooltip, this.closeTooltip, this);
-        };
-        ToolbarRenderer.prototype.destroyTooltip = function () {
-            var currentDocument = this.parent.iframeSettings.enable ? this.parent.contentModule.getPanel().ownerDocument :
-                this.parent.contentModule.getDocument();
-            if (!ej2_base_1.isNullOrUndefined(currentDocument.querySelector('.e-tooltip-wrap')) && !ej2_base_1.isNullOrUndefined(currentDocument.querySelector('[data-tooltip-id]'))) {
-                var tooltipTargetEle = currentDocument.querySelector('[data-tooltip-id]');
-                var event_1 = new MouseEvent('mouseleave', { bubbles: true, cancelable: true });
-                tooltipTargetEle.dispatchEvent(event_1);
-            }
-        };
-        ToolbarRenderer.prototype.unWireEvent = function () {
-            this.parent.off(events.destroy, this.destroy);
-            this.parent.off(events.destroyTooltip, this.destroyTooltip);
-            this.parent.off(events.closeTooltip, this.closeTooltip);
-        };
-        ToolbarRenderer.prototype.toolbarBeforeCreate = function (e) {
-            if (this.mode === 'Extended') {
-                e.enableCollision = false;
-            }
-        };
-        ToolbarRenderer.prototype.toolbarCreated = function () {
-            this.parent.notify(events.toolbarCreated, this);
-            if (this.mode === 'Extended') {
-                var extendedToolbarElement = this.toolbarPanel.querySelector('.e-expended-nav');
-                if (extendedToolbarElement) {
-                    ej2_base_1.EventHandler.add(extendedToolbarElement, 'mousedown', this.extendedToolbarMouseDownHandler, this);
-                }
-            }
-        };
-        ToolbarRenderer.prototype.extendedToolbarMouseDownHandler = function () {
-            if (this.parent.userAgentData.isSafari()) {
-                this.parent.notify(events.selectionSave, {});
-            }
-        };
-        ToolbarRenderer.prototype.toolbarClicked = function (args) {
-            var _this = this;
-            if (!this.parent.enabled) {
-                return;
-            }
-            var toolbarClickEventArgs = { item: args.item, originalEvent: args.originalEvent, cancel: false };
-            this.parent.trigger('toolbarClick', toolbarClickEventArgs, function (clickEventArgs) {
-                if ((!_this.parent.readonly || ej2_base_1.isNullOrUndefined(args.item)) && !clickEventArgs.cancel) {
-                    _this.parent.notify(events.toolbarClick, clickEventArgs);
-                }
-            });
-        };
-        ToolbarRenderer.prototype.dropDownSelected = function (args) {
-            this.parent.notify(events.dropDownSelect, { element: args.element, item: args.item, originalEvent: args.event });
-            this.destroyTooltip();
-        };
-        ToolbarRenderer.prototype.beforeDropDownItemRender = function (args) {
-            if (this.parent.readonly || !this.parent.enabled) {
-                return;
-            }
-            this.parent.notify(events.beforeDropDownItemRender, args);
-        };
-        ToolbarRenderer.prototype.tooltipBeforeRender = function (args) {
-            if (!ej2_base_1.isNullOrUndefined(args.target.getAttribute('title'))) {
-                var tooltipTarget = args.target.getAttribute('title');
-                var tooltipText = void 0;
-                switch (tooltipTarget) {
-                    case 'Minimize':
-                        tooltipText = this.l10n.getConstant('minimize');
-                        args.target.setAttribute('title', tooltipText + ' (Esc)');
-                        break;
-                    case 'Maximize':
-                        tooltipText = this.l10n.getConstant('maximize');
-                        args.target.setAttribute('title', tooltipText + ' (Ctrl+Shift+F)');
-                        break;
-                }
-            }
-            if (args.target.querySelector('.e-active')) {
-                args.cancel = true;
-                if (!ej2_base_1.isNullOrUndefined(args.target.getAttribute('title'))) {
-                    this.closeTooltip({ target: args.target, isTitle: true });
-                }
-            }
-        };
-        ToolbarRenderer.prototype.dropDownOpen = function (args) {
-            if (args.element.parentElement.getAttribute('id').indexOf('TableCell') > -1 && !ej2_base_1.isNullOrUndefined(args.element.parentElement.querySelector('.e-cell-merge'))) {
-                var listEle = args.element.querySelectorAll('li');
-                var selectedEles_1 = this.parent.inputElement.querySelectorAll('.e-cell-select');
-                if (selectedEles_1.length === 1) {
-                    ej2_base_1.addClass([listEle[0]], 'e-disabled');
-                    ej2_base_1.removeClass([listEle[1], listEle[2]], 'e-disabled');
-                }
-                else if (selectedEles_1.length > 1) {
-                    if (!Array.from(selectedEles_1).every(function (element) {
-                        return element.tagName.toLowerCase() === selectedEles_1[0].tagName.toLowerCase();
-                    })) {
-                        ej2_base_1.addClass([listEle[0]], 'e-disabled');
-                    }
-                    else {
-                        ej2_base_1.removeClass([listEle[0]], 'e-disabled');
-                    }
-                    ej2_base_1.addClass([listEle[1], listEle[2]], 'e-disabled');
-                }
-            }
-            this.parent.notify(events.selectionSave, args);
-        };
-        ToolbarRenderer.prototype.dropDownClose = function (args) {
-            if (!this.isEscapeKey) {
-                this.parent.notify(events.selectionRestore, args);
-            }
-            this.isEscapeKey = false;
-        };
-        ToolbarRenderer.prototype.dropDownBeforeClose = function (args) {
-            if (!ej2_base_1.isNullOrUndefined(args.event) && args.event.key === 'Escape' && args.event.keyCode === 27) {
-                this.isEscapeKey = true;
-                this.parent.notify(events.preventQuickToolbarClose, args);
-            }
-        };
-        ToolbarRenderer.prototype.renderToolbar = function (args) {
-            this.setPanel(args.target);
-            this.renderPanel();
-            this.mode = args.overflowMode;
-            args.rteToolbarObj.toolbarObj = new ej2_navigations_1.Toolbar({
-                items: args.items,
-                width: '100%',
-                overflowMode: args.overflowMode,
-                beforeCreate: this.toolbarBeforeCreate.bind(this),
-                created: this.toolbarCreated.bind(this),
-                clicked: this.toolbarClicked.bind(this),
-                enablePersistence: args.enablePersistence,
-                enableRtl: args.enableRtl,
-                cssClass: args.cssClass
-            });
-            args.rteToolbarObj.toolbarObj.isStringTemplate = true;
-            args.rteToolbarObj.toolbarObj.createElement = this.parent.createElement;
-            args.rteToolbarObj.toolbarObj.appendTo(args.target);
-            if (this.parent.showTooltip && args.type === 'toolbar') {
-                this.tooltip = new ej2_popups_1.Tooltip({
-                    target: '#' + this.parent.getID() + '_toolbar_wrapper [title]',
-                    showTipPointer: true,
-                    openDelay: 400,
-                    opensOn: 'Hover',
-                    beforeRender: this.tooltipBeforeRender.bind(this),
-                    beforeOpen: this.tooltipBeforeOpen.bind(this),
-                    cssClass: this.parent.getCssClass(),
-                    windowCollision: true,
-                    position: 'BottomCenter'
-                });
-                this.tooltip.appendTo(args.target.parentElement);
-            }
-        };
-        ToolbarRenderer.prototype.tooltipBeforeOpen = function (args) {
-            if (args.element) {
-                args.element.setAttribute('data-rte-id', this.parent.getID());
-            }
-        };
-        ToolbarRenderer.prototype.renderDropDownButton = function (args) {
-            var _this = this;
-            var css;
-            var targetEle = args.activeElement;
-            args.element.classList.add(classes_1.CLS_DROPDOWN_BTN);
-            css = args.cssClass + ' ' + classes_1.CLS_RTE_ELEMENTS + ' ' + classes_1.CLS_TB_BTN;
-            if (this.parent.inlineMode.enable && ej2_base_1.Browser.isDevice) {
-                css = css + ' ' + classes_1.CLS_INLINE_DROPDOWN;
-            }
-            var proxy = this;
-            var dropDown = new ej2_splitbuttons_1.DropDownButton({
-                items: args.items,
-                iconCss: args.iconCss,
-                cssClass: css,
-                content: args.content,
-                enablePersistence: this.parent.enablePersistence,
-                enableRtl: this.parent.enableRtl,
-                select: this.dropDownSelected.bind(this),
-                beforeOpen: function (args) {
-                    if (proxy.parent.readonly || !proxy.parent.enabled) {
-                        args.cancel = true;
-                        return;
-                    }
-                    if (_this.parent.userAgentData.isSafari() && args.event.type === 'keydown' && _this.parent.formatter.editorManager.nodeSelection &&
-                        !_this.parent.inputElement.contains(_this.parent.getRange().startContainer)) {
-                        _this.parent.notify(events.selectionRestore, args);
-                    }
-                    if (proxy.parent.editorMode !== 'Markdown') {
-                        var startNode = proxy.parent.getRange().startContainer.parentElement;
-                        var tableEle = startNode.closest('table');
-                        var trow = startNode.closest('tr');
-                        if (!ej2_base_1.isNullOrUndefined(tableEle) && tableEle.classList.contains('e-dashed-border')) {
-                            for (var index = 0; index < args.element.childNodes.length; index++) {
-                                if (args.element.childNodes[index].classList.contains('e-dashed-borders')) {
-                                    ej2_base_1.addClass([args.element.childNodes[index]], 'e-active');
-                                }
-                            }
-                        }
-                        if (!ej2_base_1.isNullOrUndefined(tableEle) && tableEle.classList.contains('e-alternate-rows') && window.getComputedStyle(trow).backgroundColor !== '') {
-                            for (var index = 0; index < args.element.childNodes.length; index++) {
-                                if (args.element.childNodes[index].classList.contains('e-alternate-rows')) {
-                                    ej2_base_1.addClass([args.element.childNodes[index]], 'e-active');
-                                }
-                            }
-                        }
-                        var alignEle = proxy.parent.getRange().startContainer;
-                        while (alignEle !== proxy.parent.inputElement && !ej2_base_1.isNullOrUndefined(alignEle.parentElement)) {
-                            if (alignEle.nodeName === '#text') {
-                                alignEle = alignEle.parentElement;
-                            }
-                            var alignStyle = window.getComputedStyle(alignEle).textAlign;
-                            if (!ej2_base_1.isNullOrUndefined(args.items[0]) && args.items[0].command === 'Alignments') {
-                                if ((args.items[0].text === 'Align Left' && (alignStyle === 'left') || alignStyle === 'start')) {
-                                    ej2_base_1.addClass([args.element.childNodes[0]], 'e-active');
-                                    break;
-                                }
-                                else if (args.items[1].text === 'Align Center' && alignStyle === 'center') {
-                                    ej2_base_1.addClass([args.element.childNodes[1]], 'e-active');
-                                    break;
-                                }
-                                else if (args.items[2].text === 'Align Right' && alignStyle === 'right') {
-                                    ej2_base_1.addClass([args.element.childNodes[2]], 'e-active');
-                                    break;
-                                }
-                                else if (args.items[3].text === 'Align Justify' && alignStyle === 'justify') {
-                                    ej2_base_1.addClass([args.element.childNodes[3]], 'e-active');
-                                    break;
-                                }
-                            }
-                            alignEle = alignEle.parentElement;
-                        }
-                        var closestNode = startNode.closest('img');
-                        var imageEle = closestNode ? closestNode : (targetEle ? targetEle : startNode.querySelector('img'));
-                        if (!ej2_base_1.isNullOrUndefined(args.items[0]) && args.items[0].command === 'Images') {
-                            if (!ej2_base_1.isNullOrUndefined(imageEle)) {
-                                var index = void 0;
-                                if (imageEle.classList.contains('e-imgleft') || imageEle.classList.contains('e-imginline')) {
-                                    index = 0;
-                                }
-                                else if (imageEle.classList.contains('e-imgcenter') || imageEle.classList.contains('e-imgbreak')) {
-                                    index = 1;
-                                }
-                                else if (imageEle.classList.contains('e-imgright')) {
-                                    index = 2;
-                                }
-                                if (!ej2_base_1.isNullOrUndefined(args.element.childNodes[index])) {
-                                    ej2_base_1.addClass([args.element.childNodes[index]], 'e-active');
-                                }
-                            }
-                        }
-                        var videoClosestNode = startNode.closest('.e-video-wrap');
-                        var videoEle = videoClosestNode ? videoClosestNode : (targetEle ? targetEle : startNode.querySelector('video'));
-                        if (!ej2_base_1.isNullOrUndefined(args.items[0]) && args.items[0].command === 'Videos') {
-                            if (!ej2_base_1.isNullOrUndefined(videoEle)) {
-                                var index = void 0;
-                                if (videoEle.classList.contains('e-video-left') || videoEle.classList.contains('e-video-inline')) {
-                                    index = 0;
-                                }
-                                else if (videoEle.classList.contains('e-video-center') || videoEle.classList.contains('e-video-break')) {
-                                    index = 1;
-                                }
-                                else if (videoEle.classList.contains('e-video-right')) {
-                                    index = 2;
-                                }
-                                if (!ej2_base_1.isNullOrUndefined(args.element.childNodes[index])) {
-                                    ej2_base_1.addClass([args.element.childNodes[index]], 'e-active');
-                                }
-                            }
-                        }
-                        if (!ej2_base_1.isNullOrUndefined(args.items[0]) && (args.items[0].command === 'Formats' || args.items[0].command === 'Font')) {
-                            var fontName_1 = [];
-                            var formats_1 = [];
-                            var hasUpdatedActive = false;
-                            _this.parent.format.types.forEach(function (item) {
-                                formats_1.push(item.value.toLocaleLowerCase());
-                            });
-                            _this.parent.fontFamily.items.forEach(function (item) {
-                                fontName_1.push(item.value);
-                            });
-                            var toolbarStatus = toolbar_status_1.ToolbarStatus.get(_this.parent.contentModule.getDocument(), _this.parent.contentModule.getEditPanel(), formats_1, null, fontName_1);
-                            for (var index = 0; index < args.element.childNodes.length; index++) {
-                                var htmlString = dropDown.content.trim();
-                                var styleMatch = htmlString.match(/style="([^"]*)"/);
-                                var styleValue = '';
-                                if (styleMatch) {
-                                    styleValue = styleMatch[1];
-                                }
-                                var updatedHtml = htmlString.replace(/ style="([^"]*)"/, '');
-                                var divNode = _this.parent.createElement('div');
-                                divNode.innerHTML = updatedHtml;
-                                var spanElement = divNode.querySelector('span');
-                                spanElement.style.cssText = styleValue;
-                                if (!hasUpdatedActive && ((divNode.textContent.trim() !== ''
-                                    && args.element.childNodes[index].textContent.trim() === divNode.textContent.trim()) ||
-                                    ((args.items[0].command === 'Formats' && !ej2_base_1.isNullOrUndefined(toolbarStatus.formats) && _this.parent.format.types[index].value.toLowerCase() === toolbarStatus.formats.toLowerCase() && args.element.childNodes[index].classList.contains(_this.parent.format.types[index].cssClass))
-                                        || (args.items[0].subCommand === 'FontName' && args.items[0].command === 'Font' && !ej2_base_1.isNullOrUndefined(toolbarStatus.fontname) && !ej2_base_1.isNullOrUndefined(_this.parent.fontFamily.items[index]) && _this.parent.fontFamily.items[index].value.toLowerCase() === toolbarStatus.fontname.toLowerCase() && args.element.childNodes[index].classList.contains(_this.parent.fontFamily.items[index].cssClass)))
-                                    || (((args.items[0].subCommand === 'FontName') && _this.parent.fontFamily.items[index].value === '' && ej2_base_1.isNullOrUndefined(toolbarStatus.fontname) && args.element.childNodes[index].classList.contains(_this.parent.fontFamily.items[index].cssClass)) ||
-                                        ((args.items[0].subCommand === 'FontSize') && args.element.childNodes[index].textContent === 'Default' && divNode.textContent === 'Font Size' && _this.parent.fontSize.items[index].value === '' && !ej2_base_1.isNullOrUndefined(toolbarStatus.fontsize))))) {
-                                    if (!args.element.childNodes[index].classList.contains('e-active')) {
-                                        ej2_base_1.addClass([args.element.childNodes[index]], 'e-active');
-                                        hasUpdatedActive = true;
-                                    }
-                                }
-                                else {
-                                    ej2_base_1.removeClass([args.element.childNodes[index]], 'e-active');
-                                }
-                            }
-                        }
-                    }
-                    else if (proxy.parent.editorMode === 'Markdown') {
-                        if (args.items[0].command === 'Formats') {
-                            var formats_2 = [];
-                            var hasUpdatedActive = false;
-                            _this.parent.format.types.forEach(function (item) {
-                                formats_2.push(item.value.toLocaleLowerCase());
-                            });
-                            var childNodes = args.element.childNodes;
-                            for (var index = 0; index < childNodes.length; index++) {
-                                var divNode = _this.parent.createElement('div');
-                                divNode.innerHTML = dropDown.content.trim();
-                                if (!hasUpdatedActive && ((divNode.textContent.trim() !== '' && childNodes[index].textContent.trim() === divNode.textContent.trim()))) {
-                                    if (!childNodes[index].classList.contains('e-active')) {
-                                        ej2_base_1.addClass([childNodes[index]], 'e-active');
-                                        hasUpdatedActive = true;
-                                    }
-                                }
-                                else {
-                                    ej2_base_1.removeClass([childNodes[index]], 'e-active');
-                                }
-                            }
-                        }
-                    }
-                    proxy.parent.notify(events.beforeDropDownOpen, args);
-                },
-                close: this.dropDownClose.bind(this),
-                beforeClose: this.dropDownBeforeClose.bind(this),
-                open: this.dropDownOpen.bind(this),
-                beforeItemRender: this.beforeDropDownItemRender.bind(this)
-            });
-            dropDown.isStringTemplate = true;
-            dropDown.createElement = proxy.parent.createElement;
-            dropDown.appendTo(args.element);
-            args.element.tabIndex = -1;
-            var popupElement = document.getElementById(dropDown.element.id + '-popup');
-            popupElement.setAttribute('aria-owns', this.parent.getID());
-            return dropDown;
-        };
-        ToolbarRenderer.prototype.mouseOutHandler = function () {
-            if (!ej2_base_1.isNullOrUndefined(this.tooltipTargetEle)) {
-                this.tooltipTargetEle.setAttribute('title', this.tooltipTargetEle.getAttribute('data-title'));
-            }
-            else {
-                var currentDocument = this.parent.iframeSettings.enable ? this.parent.contentModule.getPanel().ownerDocument :
-                    this.parent.contentModule.getDocument();
-                this.tooltipTargetEle = currentDocument.querySelector('[data-title]');
-                this.tooltipTargetEle.setAttribute('title', this.tooltipTargetEle.getAttribute('data-title'));
-            }
-            this.tooltipTargetEle.removeAttribute('data-title');
-            ej2_base_1.EventHandler.remove(this.tooltipTargetEle, 'mouseout', this.mouseOutHandler);
-        };
-        ToolbarRenderer.prototype.closeTooltip = function (args) {
-            if (args.isTitle) {
-                this.tooltipTargetEle = args.target;
-                this.tooltipTargetEle.setAttribute('data-title', this.tooltipTargetEle.getAttribute('title'));
-                this.tooltipTargetEle.removeAttribute('title');
-                ej2_base_1.EventHandler.add(this.tooltipTargetEle, 'mouseout', this.mouseOutHandler, this);
-            }
-            else {
-                var currentDocument = this.parent.iframeSettings.enable ? this.parent.contentModule.getPanel().ownerDocument :
-                    this.parent.contentModule.getDocument();
-                this.tooltipTargetEle = ej2_base_2.closest(args.target, '[data-tooltip-id]');
-                if (!ej2_base_1.isNullOrUndefined(this.tooltipTargetEle) && this.parent.showTooltip && !ej2_base_1.isNullOrUndefined(currentDocument.querySelector('.e-tooltip-wrap'))) {
-                    this.destroyTooltip();
-                    this.tooltipTargetEle.setAttribute('data-title', this.tooltipTargetEle.getAttribute('title'));
-                    this.tooltipTargetEle.removeAttribute('title');
-                    ej2_base_1.EventHandler.add(this.tooltipTargetEle, 'mouseout', this.mouseOutHandler, this);
-                }
-            }
-        };
-        ToolbarRenderer.prototype.renderListDropDown = function (args) {
-            var _this = this;
-            var proxy = this;
-            var css = classes_1.CLS_RTE_ELEMENTS + ' ' + classes_1.CLS_TB_BTN + ((this.parent.inlineMode) ? (' ' + classes_1.CLS_INLINE_DROPDOWN) : '');
-            css += (' ' + ((args.itemName === 'NumberFormatList') ? classes_1.CLS_NUMBERFORMATLIST_TB_BTN : classes_1.CLS_BULLETFORMATLIST_TB_BTN));
-            var content = proxy.parent.createElement('span', { className: classes_1.CLS_LIST_PRIMARY_CONTENT });
-            var inlineEle = proxy.parent.createElement('span', { className: args.cssClass });
-            content.appendChild(inlineEle);
-            var dropDown = new ej2_splitbuttons_1.DropDownButton({
-                items: args.items,
-                cssClass: css,
-                content: args.content,
-                enablePersistence: this.parent.enablePersistence,
-                enableRtl: this.parent.enableRtl,
-                select: this.dropDownSelected.bind(this),
-                beforeOpen: function (args) {
-                    if (ej2_base_1.Browser.info.name === 'safari' && !proxy.parent.inputElement.contains(proxy.parent.getRange().startContainer)) {
-                        proxy.parent.notify(events.selectionRestore, {});
-                    }
-                    if (proxy.parent.editorMode !== 'Markdown') {
-                        var startNode = proxy.parent.getRange().startContainer.parentElement;
-                        var listElem = startNode.closest('LI');
-                        var currentLiElem = !ej2_base_1.isNullOrUndefined(listElem) ? listElem.parentElement : null;
-                        var currentAction = args.items[0].subCommand;
-                        if (!ej2_base_1.isNullOrUndefined(currentLiElem)) {
-                            var validNumberFormatAction = (currentAction === 'NumberFormatList' && currentLiElem.nodeName === 'OL');
-                            var validBulletFormatAction = (currentAction === 'BulletFormatList' && currentLiElem.nodeName === 'UL');
-                            if (validNumberFormatAction || validBulletFormatAction) {
-                                var currentListStyle = currentLiElem.style.listStyleType.split('-').join('').toLocaleLowerCase();
-                                currentListStyle = currentListStyle === 'decimal' ? 'number' : currentListStyle;
-                                for (var index = 0; index < args.element.childNodes.length; index++) {
-                                    if (currentListStyle === args.element.childNodes[index].innerHTML.split(' ').join('').toLocaleLowerCase()) {
-                                        ej2_base_1.addClass([args.element.childNodes[index]], 'e-active');
-                                        break;
-                                    }
-                                    else if (currentListStyle === '' && args.element.childNodes[index].innerHTML !== 'None') {
-                                        ej2_base_1.addClass([args.element.childNodes[index]], 'e-active');
-                                        break;
-                                    }
-                                }
-                            }
-                        }
-                    }
-                    _this.closeTooltip({ target: args.event.target });
-                    if (proxy.parent.readonly || !proxy.parent.enabled) {
-                        args.cancel = true;
-                        return;
-                    }
-                    var element = (args.event) ? args.event.target : null;
-                    proxy.currentElement = dropDown.element;
-                    proxy.currentDropdown = dropDown;
-                    if (args.event && args.event.type === 'click' && (element.classList.contains(classes_1.CLS_LIST_PRIMARY_CONTENT)
-                        || element.parentElement.classList.contains(classes_1.CLS_LIST_PRIMARY_CONTENT))) {
-                        args.cancel = true;
-                        return;
-                    }
-                    proxy.parent.notify(events.beforeDropDownOpen, args);
-                },
-                close: this.dropDownClose.bind(this),
-                open: this.dropDownOpen.bind(this),
-                beforeItemRender: this.beforeDropDownItemRender.bind(this)
-            });
-            dropDown.isStringTemplate = true;
-            dropDown.createElement = proxy.parent.createElement;
-            dropDown.appendTo(args.element);
-            args.element.tabIndex = -1;
-            args.element.setAttribute('role', 'button');
-            var popupElement = document.getElementById(dropDown.element.id + '-popup');
-            popupElement.setAttribute('aria-owns', this.parent.getID());
-            if (args.element.childElementCount === 1) {
-                dropDown.element.insertBefore(content, dropDown.element.querySelector('.e-caret'));
-            }
-            args.element.tabIndex = -1;
-            dropDown.element.removeAttribute('type');
-            dropDown.element.onmousedown = function () {
-                if (ej2_base_1.Browser.info.name === 'safari') {
-                    proxy.parent.notify(events.selectionSave, {});
-                }
-            };
-            dropDown.element.onkeydown = function () {
-                if (ej2_base_1.Browser.info.name === 'safari') {
-                    proxy.parent.notify(events.selectionSave, {});
-                }
-            };
-            return dropDown;
-        };
-        ToolbarRenderer.prototype.paletteSelection = function (dropDownArgs, currentElement) {
-            var ele = dropDownArgs.element.querySelector('.e-control.e-colorpicker');
-            var colorbox = [].slice.call(ej2_base_2.selectAll('.e-tile', ele.parentElement));
-            ej2_base_1.removeClass(colorbox, 'e-selected');
-            var style = currentElement.querySelector('.' + classes_1.CLS_RTE_ELEMENTS).style.borderBottomColor;
-            (colorbox.filter(function (colorbox) {
-                if (colorbox.style.backgroundColor === style) {
-                    ej2_base_1.addClass([colorbox], 'e-selected');
-                }
-            }));
-        };
-        ToolbarRenderer.prototype.renderColorPickerDropDown = function (args, item, colorPicker, defaultColor, toolbarType) {
-            var _this = this;
-            var proxy = this;
-            var css = classes_1.CLS_RTE_ELEMENTS + ' ' + classes_1.CLS_TB_BTN + ((this.parent.inlineMode) ? (' ' + classes_1.CLS_INLINE_DROPDOWN) : '');
-            css += (' ' + ((item === 'backgroundcolor') ? classes_1.CLS_BACKGROUND_COLOR_DROPDOWN : classes_1.CLS_FONT_COLOR_DROPDOWN));
-            css += this.parent.getCssClass(true);
-            var content = proxy.parent.createElement('span', { className: classes_1.CLS_COLOR_CONTENT });
-            var inlineEle = proxy.parent.createElement('span', { className: args.cssClass });
-            var range;
-            var initialBackgroundColor = (ej2_base_1.isNullOrUndefined(defaultColor)) ? proxy.parent.backgroundColor.default : defaultColor;
-            inlineEle.style.borderBottomColor = (item === 'backgroundcolor') ?
-                initialBackgroundColor : proxy.parent.fontColor.default;
-            content.appendChild(inlineEle);
-            var dropDown = new ej2_splitbuttons_1.DropDownButton({
-                target: colorPicker.element.parentElement, cssClass: css,
-                enablePersistence: this.parent.enablePersistence, enableRtl: this.parent.enableRtl,
-                beforeOpen: function (dropDownArgs) {
-                    if (proxy.parent.readonly || !proxy.parent.enabled) {
-                        dropDownArgs.cancel = true;
-                        return;
-                    }
-                    var element = (dropDownArgs.event) ? dropDownArgs.event.target : null;
-                    proxy.currentElement = dropDown.element;
-                    proxy.currentDropdown = dropDown;
-                    proxy.paletteSelection(dropDownArgs, proxy.currentElement);
-                    if (dropDownArgs.event && dropDownArgs.event.type === 'click' && (element.classList.contains(classes_1.CLS_COLOR_CONTENT)
-                        || element.parentElement.classList.contains(classes_1.CLS_COLOR_CONTENT))) {
-                        dropDownArgs.cancel = true;
-                        var colorpickerValue = element.classList.contains(classes_1.CLS_RTE_ELEMENTS) ? element.style.borderBottomColor :
-                            element.querySelector('.' + classes_1.CLS_RTE_ELEMENTS).style.borderBottomColor;
-                        proxy.parent.notify(events.selectionRestore, {});
-                        range = proxy.parent.formatter.editorManager.nodeSelection.getRange(proxy.parent.contentModule.getDocument());
-                        var parentNode = range.startContainer.parentNode;
-                        var closestElement = ej2_base_2.closest(range.startContainer.parentNode, 'table');
-                        var isMACSelection = _this.parent.userAgentData.getPlatform() === 'macOS' && !range.collapsed;
-                        var allowSelectionRange = isMACSelection ? true : range.collapsed;
-                        if ((range.startContainer.nodeName === 'TD' || range.startContainer.nodeName === 'TH' ||
-                            (ej2_base_2.closest(range.startContainer.parentNode, 'td,th')) ||
-                            (proxy.parent.iframeSettings.enable && !util_1.hasClass(parentNode.ownerDocument.querySelector('body'), 'e-lib')))
-                            && allowSelectionRange && args.subCommand === 'BackgroundColor' && (ej2_base_2.closest(closestElement, '.' + classes.CLS_RTE) || proxy.parent.iframeSettings.enable) && toolbarType === 'quick') {
-                            var colorPickerArgs = __assign({ name: 'tableColorPickerChanged', item: { command: 'Table', subCommand: 'BackgroundColor', value: colorpickerValue } }, args);
-                            proxy.parent.formatter.process(_this.parent, colorPickerArgs, null, colorpickerValue);
-                            proxy.parent.notify(events.hideTableQuickToolbar, {});
-                        }
-                        else {
-                            proxy.parent.notify(events.colorPickerChanged, { item: { command: args.command, subCommand: args.subCommand,
-                                    value: colorpickerValue }
-                            });
-                        }
-                        return;
-                    }
-                    else {
-                        var ele = dropDownArgs.element.querySelector('.e-control.e-colorpicker');
-                        var inst = ej2_base_2.getInstance(ele, ej2_inputs_1.ColorPicker);
-                        inst.showButtons = (dropDownArgs.element.querySelector('.e-color-palette')) ? false : true;
-                        inst.dataBind();
-                    }
-                    dropDownArgs.element.onclick = function (args) {
-                        if (args.target.classList.contains('e-cancel')) {
-                            dropDown.toggle();
-                        }
-                    };
-                },
-                open: function (dropDownArgs) {
-                    _this.setColorPickerContentWidth(colorPicker);
-                    var focusEle;
-                    var ele = dropDownArgs.element.querySelector('.e-control.e-colorpicker');
-                    if (dropDownArgs.element.querySelector('.e-color-palette')) {
-                        focusEle = ele.parentElement.querySelector('.e-palette');
-                    }
-                    else {
-                        focusEle = ele.parentElement.querySelector('e-handler');
-                    }
-                    if (focusEle) {
-                        focusEle.focus();
-                    }
-                    _this.pickerRefresh(dropDownArgs);
-                },
-                beforeClose: function (dropDownArgs) {
-                    var element = (dropDownArgs.event) ? dropDownArgs.event.target : null;
-                    _this.dropDownBeforeClose(dropDownArgs);
-                    if (dropDownArgs.event && dropDownArgs.event.type === 'click' && (element.classList.contains(classes_1.CLS_COLOR_CONTENT)
-                        || element.parentElement.classList.contains(classes_1.CLS_COLOR_CONTENT))) {
-                        var colorpickerValue = element.classList.contains(classes_1.CLS_RTE_ELEMENTS) ? element.style.borderBottomColor :
-                            element.querySelector('.' + classes_1.CLS_RTE_ELEMENTS).style.borderBottomColor;
-                        range = proxy.parent.formatter.editorManager.nodeSelection.getRange(proxy.parent.contentModule.getDocument());
-                        if ((range.startContainer.nodeName === 'TD' || range.startContainer.nodeName === 'TH' ||
-                            ej2_base_2.closest(range.startContainer.parentNode, 'td,th')) && range.collapsed && toolbarType === 'quick') {
-                            var colorPickerArgs = __assign({ name: 'tableColorPickerChanged', item: { command: 'Table', subCommand: 'BackgroundColor', value: colorpickerValue } }, args);
-                            proxy.parent.formatter.process(_this.parent, colorPickerArgs, null, colorpickerValue);
-                            proxy.parent.notify(events.hideTableQuickToolbar, {});
-                        }
-                        else {
-                            proxy.parent.notify(events.colorPickerChanged, { item: { command: args.command, subCommand: args.subCommand,
-                                    value: colorpickerValue }
-                            });
-                        }
-                        return;
-                    }
-                },
-                close: function () {
-                    if (!_this.isEscapeKey) {
-                        proxy.parent.notify(events.selectionRestore, {});
-                    }
-                }
-            });
-            dropDown.isStringTemplate = true;
-            dropDown.createElement = proxy.parent.createElement;
-            args.element.setAttribute('role', 'button');
-            dropDown.appendTo(args.element);
-            var popupElement = document.getElementById(dropDown.element.id + '-popup');
-            popupElement.setAttribute('aria-owns', this.parent.getID());
-            args.element.setAttribute('aria-label', item === 'backgroundcolor' ? default_locale_1.defaultLocale.backgroundColor : default_locale_1.defaultLocale.fontColor);
-            dropDown.element.insertBefore(content, dropDown.element.querySelector('.e-caret'));
-            args.element.tabIndex = -1;
-            dropDown.element.removeAttribute('type');
-            dropDown.element.onmousedown = function () {
-                proxy.parent.notify(events.selectionSave, {});
-            };
-            dropDown.element.onkeydown = function () {
-                if (!_this.parent.userAgentData.isSafari() || _this.parent.userAgentData.isSafari()
-                    && proxy.parent.inputElement.contains(proxy.parent.getRange().startContainer)) {
-                    proxy.parent.notify(events.selectionSave, {});
-                }
-            };
-            return dropDown;
-        };
-        ToolbarRenderer.prototype.pickerRefresh = function (dropDownArgs) {
-            if (this.parent.backgroundColor.mode === 'Picker') {
-                var popupElem = dropDownArgs.element.parentElement;
-                popupElem.style.width = (popupElem.offsetWidth + 5).toString() + 'px';
-                ej2_base_2.getInstance(popupElem, ej2_popups_1.Popup).refreshPosition(popupElem);
-                popupElem.style.width = (popupElem.offsetWidth - 5).toString() + 'px';
-            }
-        };
-        ToolbarRenderer.prototype.setColorPickerContentWidth = function (colorPicker) {
-            var colorPickerContent = colorPicker.element.nextSibling;
-            if (colorPickerContent.style.width === '0px') {
-                colorPickerContent.style.width = '';
-                var borderWidth = parseInt(getComputedStyle(colorPickerContent).borderBottomWidth, 10);
-                colorPickerContent.style.width = ej2_base_1.formatUnit(colorPickerContent.children[0].offsetWidth
-                    + borderWidth + borderWidth);
-            }
-        };
-        ToolbarRenderer.prototype.renderColorPicker = function (args, item, toolbarType) {
-            var _this = this;
-            var proxy = this;
-            var value;
-            var colorPicker = new ej2_inputs_1.ColorPicker({
-                enableRtl: this.parent.enableRtl,
-                inline: true,
-                value: null,
-                cssClass: ((item === 'backgroundcolor') ? classes_1.CLS_BACKGROUND_COLOR_PICKER : classes_1.CLS_FONT_COLOR_PICKER) + ' ' + args.cssClass,
-                created: function () {
-                    var value = (item === 'backgroundcolor') ? proxy.parent.backgroundColor.default : proxy.parent.fontColor.default;
-                    colorPicker.setProperties({ value: value });
-                },
-                mode: ((item === 'backgroundcolor') ? proxy.parent.backgroundColor.mode : proxy.parent.fontColor.mode),
-                modeSwitcher: ((item === 'backgroundcolor') ? proxy.parent.backgroundColor.modeSwitcher : proxy.parent.fontColor.modeSwitcher),
-                presetColors: (item === 'backgroundcolor') ? this.parent.backgroundColor.colorCode : this.parent.fontColor.colorCode,
-                columns: (item === 'backgroundcolor') ? this.parent.backgroundColor.columns : this.parent.fontColor.columns,
-                beforeTileRender: function (args) {
-                    args.element.classList.add(classes_1.CLS_COLOR_PALETTE);
-                    args.element.classList.add(classes_1.CLS_CUSTOM_TILE);
-                    if (!ej2_base_1.isNullOrUndefined(_this.parent.cssClass)) {
-                        var allClassName = _this.parent.getCssClass().split(' ');
-                        for (var i = 0; i < allClassName.length; i++) {
-                            if (allClassName[i].trim() !== '') {
-                                args.element.classList.add(allClassName[i]);
-                            }
-                        }
-                    }
-                    if (args.value === '') {
-                        args.element.classList.add(classes_1.CLS_NOCOLOR_ITEM);
-                    }
-                },
-                change: function (colorPickerArgs) {
-                    var colorpickerValue = colorPickerArgs.currentValue.rgba;
-                    colorPickerArgs.item = {
-                        command: args.command,
-                        subCommand: args.subCommand,
-                        value: colorpickerValue
-                    };
-                    proxy.parent.notify(events.selectionRestore, {});
-                    if (proxy.currentElement) {
-                        proxy.currentElement.querySelector('.' + classes_1.CLS_RTE_ELEMENTS).style.borderBottomColor = colorpickerValue;
-                    }
-                    var range = proxy.parent.formatter.editorManager.nodeSelection.getRange(proxy.parent.contentModule.getDocument());
-                    var closestElement = ej2_base_2.closest(range.startContainer.parentNode, 'table');
-                    if ((range.startContainer.nodeName === 'TD' || range.startContainer.nodeName === 'TH' || range.startContainer.nodeName === 'BODY' ||
-                        (range.startContainer.parentNode && ej2_base_2.closest(range.startContainer.parentNode, 'td,th'))) && range.collapsed && args.subCommand === 'BackgroundColor' && (closestElement && ej2_base_2.closest(closestElement, '.' + classes.CLS_RTE) || proxy.parent.iframeSettings.enable)
-                        && toolbarType === 'quick') {
-                        colorPickerArgs.name = 'tableColorPickerChanged';
-                        colorPickerArgs.item.command = 'Table';
-                        proxy.parent.formatter.process(_this.parent, colorPickerArgs, colorPickerArgs.event, colorPickerArgs.item.value);
-                        proxy.parent.notify(events.hideTableQuickToolbar, {});
-                    }
-                    else {
-                        proxy.parent.notify(events.colorPickerChanged, colorPickerArgs);
-                    }
-                    if (proxy.currentDropdown) {
-                        proxy.currentDropdown.toggle();
-                    }
-                },
-                beforeModeSwitch: function (args) {
-                    value = colorPicker.value;
-                    if (value === '') {
-                        colorPicker.setProperties({ value: ((args.mode === 'Picker') ? '#008000ff' : '') }, true);
-                    }
-                    colorPicker.showButtons = args.mode === 'Palette' ? false : true;
-                }
-            });
-            colorPicker.isStringTemplate = true;
-            colorPicker.createElement = this.parent.createElement;
-            colorPicker.appendTo(document.getElementById(args.target));
-            return colorPicker;
-        };
-        ToolbarRenderer.prototype.renderPanel = function () {
-            this.getPanel().classList.add(classes_1.CLS_TOOLBAR);
-        };
-        ToolbarRenderer.prototype.getPanel = function () {
-            return this.toolbarPanel;
-        };
-        ToolbarRenderer.prototype.setPanel = function (panel) {
-            this.toolbarPanel = panel;
-        };
-        ToolbarRenderer.prototype.destroy = function () {
-            if (this.isDestroyed) {
-                return;
-            }
-            if (this.tooltip && !this.tooltip.isDestroyed) {
-                this.tooltip.destroy();
-                var tooltipElements = document.querySelectorAll('[data-rte-id="' + this.parent.getID() + '"]');
-                for (var i = 0; i < tooltipElements.length; i++) {
-                    var tooltipEle = tooltipElements[i];
-                    if (this.parent.getID() === tooltipEle.getAttribute('data-rte-id')) {
-                        ej2_base_1.detach(tooltipEle);
-                    }
-                }
-            }
-            this.unWireEvent();
-            this.mode = null;
-            this.toolbarPanel = null;
-            this.currentElement = null;
-            this.currentDropdown = null;
-            this.tooltip = null;
-            this.tooltipTargetEle = null;
-            this.isDestroyed = true;
-        };
-        return ToolbarRenderer;
-    }());
-    exports.ToolbarRenderer = ToolbarRenderer;
-});