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

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

@@ -0,0 +1,747 @@
+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;
+});