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

package/blazorGlobalSrc/rich-text-editor/actions/emoji-picker.js

@@ -1,853 +0,0 @@
-define(["require", "exports", "../base/constant", "@syncfusion/ej2-base", "@syncfusion/ej2-popups", "@syncfusion/ej2-navigations", "@syncfusion/ej2-inputs"], function (require, exports, events, ej2_base_1, ej2_popups_1, ej2_navigations_1, ej2_inputs_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var EmojiPicker = (function () {
-        function EmojiPicker(parent, serviceLocator) {
-            this.noResultsFoundCount = 0;
-            this.parent = parent;
-            this.locator = serviceLocator;
-            this.i10n = serviceLocator.getService('rteLocale');
-            this.renderFactory = this.locator.getService('rendererFactory');
-            this.addEventListener();
-            this.isDestroyed = false;
-            this.isPopupDestroyed = false;
-        }
-        EmojiPicker.prototype.destroy = function () {
-            if (this.isDestroyed) {
-                return;
-            }
-            this.removeEventListener();
-            this.isDestroyed = true;
-        };
-        EmojiPicker.prototype.childDestroy = function () {
-            if (this.isPopupDestroyed) {
-                return;
-            }
-            if (this.popupObj && !this.popupObj.isDestroyed) {
-                if (this.popupObj.element && this.popupObj.element.querySelector('.e-rte-emoji-search')) {
-                    var textBox = ej2_base_1.getComponent(this.popupObj.element.querySelector('.e-rte-emoji-search'), 'textbox');
-                    if (textBox && !textBox.isDestroyed) {
-                        textBox.destroy();
-                    }
-                }
-                if (this.popupObj.element && this.popupObj.element.querySelector('.e-rte-emojipicker-toolbar')) {
-                    var toolbar_1 = ej2_base_1.getComponent(this.popupObj.element.querySelector('.e-rte-emojipicker-toolbar'), 'toolbar');
-                    if (toolbar_1 && !toolbar_1.isDestroyed) {
-                        toolbar_1.destroy();
-                    }
-                }
-                var closeIcon = this.popupObj.element.querySelector('.e-clear-icon');
-                if (!ej2_base_1.isNullOrUndefined(closeIcon)) {
-                    ej2_base_1.EventHandler.remove(closeIcon, 'mousedown', this.searchFilter);
-                }
-                this.popupObj.destroy();
-                this.isPopupDestroyed = true;
-            }
-            if (this.popDiv) {
-                ej2_base_1.EventHandler.remove(this.popDiv, 'keydown', this.onKeyDown);
-                ej2_base_1.EventHandler.remove(this.popDiv, 'keyup', this.searchFilter);
-                if (this.popDiv.querySelector('.e-rte-emojipicker-btn')) {
-                    var btn = this.popDiv.querySelector('.e-rte-emojipicker-btn');
-                    ej2_base_1.EventHandler.remove(btn, 'scroll', this.scrollEvent);
-                    ej2_base_1.EventHandler.remove(btn, 'click', this.emojiBtnClick);
-                }
-            }
-        };
-        EmojiPicker.prototype.addEventListener = function () {
-            this.parent.on(events.emojiPicker, this.toolbarClick, this);
-            this.parent.on(events.docClick, this.docClick, this);
-            this.parent.on(events.iframeMouseDown, this.onIframeMouseDown, this);
-            this.parent.on(events.keyDown, this.onkeyPress, this);
-            this.parent.on(events.keyUp, this.onkeyUp, this);
-            this.parent.on(events.contentscroll, this.contentscroll, this);
-            this.parent.on(events.scroll, this.contentscroll, this);
-            this.parent.on(events.destroy, this.destroy, this);
-        };
-        EmojiPicker.prototype.toolbarClick = function (args) {
-            var _this = this;
-            var _a, _b;
-            this.noResultsFoundCount = 0;
-            var spanElement;
-            if (!ej2_base_1.isNullOrUndefined(this.parent.element.querySelector('.e-emoji'))) {
-                spanElement = this.parent.element.querySelector('.e-emoji');
-            }
-            else if (this.parent.inlineMode.enable) {
-                spanElement = this.parent.element.ownerDocument.querySelector('.e-emoji');
-            }
-            this.divElement = spanElement.closest('div');
-            if (!(this.parent.inputElement.contains(this.parent.formatter.editorManager.nodeSelection.
-                getRange(this.parent.contentModule.getDocument()).startContainer))) {
-                this.parent.contentModule.getEditPanel().focus();
-            }
-            var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
-            this.save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
-            this.clickEvent = args.args;
-            var emojiPicker = this.parent.emojiPickerSettings.iconsSet;
-            if (this.popupObj) {
-                ej2_base_1.removeClass([this.divElement], 'e-active');
-                if (this.popupObj.element.querySelector('.e-rte-emoji-search') || !this.parent.emojiPickerSettings.showSearchBox) {
-                    this.popupObj.hide();
-                    return;
-                }
-                this.popupObj.hide();
-            }
-            this.popDiv = this.parent.createElement('div', { className: 'e-rte-emojipicker-popup', id: this.parent.getID() + '_emojiPicker' });
-            if (!ej2_base_1.isNullOrUndefined(this.parent.getToolbar()) && !this.parent.inlineMode.enable) {
-                this.parent.getToolbar().parentElement.appendChild(this.popDiv);
-            }
-            else if (this.parent.inlineMode.enable) {
-                this.parent.rootContainer.appendChild(this.popDiv);
-            }
-            ej2_base_1.EventHandler.add(this.popDiv, 'keydown', this.onKeyDown, this);
-            ej2_base_1.EventHandler.add(this.popDiv, 'keyup', this.searchFilter, this);
-            var extendEle = this.parent.element.querySelector('.e-toolbar-extended');
-            var zIndex;
-            if (!ej2_base_1.isNullOrUndefined(extendEle)) {
-                var computedStyle = window.getComputedStyle(extendEle);
-                zIndex = computedStyle.getPropertyValue('z-index');
-            }
-            else {
-                zIndex = '10001';
-            }
-            var target;
-            var xValue;
-            var yValue;
-            if (!ej2_base_1.isNullOrUndefined(args.args) && !this.parent.inlineMode.enable &&
-                ej2_base_1.isNullOrUndefined(this.parent.quickToolbarSettings.text)) {
-                target = args.args.originalEvent.target;
-                target = target.classList.contains('e-toolbar-item') ? target.firstChild : target.parentElement;
-                xValue = 'left';
-                yValue = 'bottom';
-            }
-            else if (ej2_base_1.isNullOrUndefined(args.x) && ej2_base_1.isNullOrUndefined(args.y) && !this.parent.inlineMode.enable && ej2_base_1.isNullOrUndefined(this.parent.quickToolbarSettings.text)) {
-                target = this.parent.inputElement;
-                if (this.parent.contentModule.getDocument().getSelection().rangeCount > 0) {
-                    var coordinates = this.getCoordinates();
-                    xValue = coordinates.left;
-                    yValue = coordinates.top;
-                }
-            }
-            else if (ej2_base_1.isNullOrUndefined(args.x) && ej2_base_1.isNullOrUndefined(args.y) && (this.parent.inlineMode.enable || !ej2_base_1.isNullOrUndefined(this.parent.quickToolbarSettings.text))) {
-                this.parent.notify(events.hidePopup, {});
-                if (this.parent.contentModule.getDocument().getSelection().rangeCount > 0) {
-                    var coordinates = this.getCoordinates();
-                    xValue = coordinates.left;
-                    yValue = coordinates.top;
-                }
-            }
-            else {
-                target = this.parent.inputElement;
-                xValue = args.x;
-                yValue = args.y;
-            }
-            this.popupObj = new ej2_popups_1.Popup(this.popDiv, {
-                targetType: 'relative',
-                relateTo: target,
-                collision: { X: 'fit', Y: 'none' },
-                offsetY: 8,
-                viewPortElement: this.parent.element,
-                position: { X: xValue, Y: yValue },
-                enableRtl: this.parent.enableRtl,
-                zIndex: parseInt(zIndex, 10) + 1,
-                actionOnScroll: 'hide',
-                close: function () {
-                    _this.parent.isBlur = false;
-                    _this.childDestroy();
-                    _this.popupObj.element.parentElement.style.zIndex = '';
-                    ej2_base_1.detach(_this.popupObj.element);
-                    _this.popupObj = null;
-                    var activeElement = _this.divElement.firstChild;
-                    activeElement.focus();
-                }
-            });
-            this.isPopupDestroyed = false;
-            ej2_base_1.addClass([this.popupObj.element], 'e-popup-open');
-            this.popupObj.element.parentElement.style.zIndex = '11';
-            this.popupObj.refreshPosition(target);
-            if ((!ej2_base_1.isNullOrUndefined(args.args) || (ej2_base_1.isNullOrUndefined(args.x) && ej2_base_1.isNullOrUndefined(args.y))) &&
-                this.parent.emojiPickerSettings.showSearchBox) {
-                var inputEle = ej2_base_1.createElement('input', { id: 'e-rte-emoji-search', className: 'e-rte-emoji-search' });
-                this.popDiv.append(inputEle);
-                var inputobj = new ej2_inputs_1.TextBox({
-                    placeholder: this.i10n.getConstant('emojiPickerTypeToFind'),
-                    showClearButton: true
-                });
-                inputobj.appendTo(inputEle);
-                if (this.parent.userAgentData.isSafari() && this.parent.inputElement.contains(this.parent.getRange().startContainer)) {
-                    this.parent.notify(events.selectionSave, {});
-                }
-                inputEle.focus();
-            }
-            var closeIcon = this.popupObj.element.querySelector('.e-clear-icon');
-            if (!ej2_base_1.isNullOrUndefined(closeIcon)) {
-                ej2_base_1.EventHandler.add(closeIcon, 'mousedown', this.searchFilter, this);
-            }
-            var emojiToolBar = this.parent.createElement('div', { className: 'e-rte-emojipicker-toolbar' });
-            this.popDiv.appendChild(emojiToolBar);
-            var pushToolBar = [];
-            for (var i = 0; i < this.parent.emojiPickerSettings.iconsSet.length; i++) {
-                if (!ej2_base_1.isNullOrUndefined(this.parent.emojiPickerSettings.iconsSet[i].iconCss)) {
-                    pushToolBar.push({ prefixIcon: this.parent.emojiPickerSettings.iconsSet[i].iconCss, htmlAttributes: (_a = {}, _a['title'] = this.parent.emojiPickerSettings.iconsSet[i].name, _a) });
-                }
-                else {
-                    pushToolBar.push({ text: '&#x' + this.parent.emojiPickerSettings.iconsSet[i].code + ';', htmlAttributes: (_b = {}, _b['title'] = this.parent.emojiPickerSettings.iconsSet[i].name, _b) });
-                }
-            }
-            var toolbarObj = new ej2_navigations_1.Toolbar({
-                items: pushToolBar,
-                clicked: this.emojiToolbarClick.bind(this)
-            });
-            toolbarObj.appendTo(emojiToolBar);
-            var emojiBtnDiv = this.parent.createElement('div', { className: 'e-rte-emojipicker-btn' });
-            this.popDiv.appendChild(emojiBtnDiv);
-            var height;
-            var popupBorder = window.getComputedStyle(this.popDiv);
-            if ((ej2_base_1.isNullOrUndefined(args.args) && !(ej2_base_1.isNullOrUndefined(args.x) && ej2_base_1.isNullOrUndefined(args.y))) ||
-                !this.parent.emojiPickerSettings.showSearchBox) {
-                height = (this.popDiv.getBoundingClientRect().height - emojiToolBar.getBoundingClientRect().height - (2 * parseFloat(popupBorder.borderWidth))) + 'px';
-                emojiBtnDiv.style.setProperty('height', height, 'important');
-            }
-            else {
-                var inputELe = this.parent.element.querySelector('.e-rte-emoji-search').parentElement;
-                var getComputedStyle_1 = window.getComputedStyle(inputELe);
-                height = (this.popDiv.getBoundingClientRect().height - emojiToolBar.getBoundingClientRect().height
-                    - inputELe.getBoundingClientRect().height
-                    - parseFloat(getComputedStyle_1.marginTop) - parseFloat(getComputedStyle_1.marginBottom)
-                    - (2 * parseFloat(popupBorder.borderWidth))) + 'px';
-                emojiBtnDiv.style.setProperty('height', height, 'important');
-            }
-            for (var i = 0; i < emojiPicker.length; i++) {
-                var emojiGroupDiv = this.parent.createElement('div', { className: 'e-rte-emojipicker-group' });
-                emojiBtnDiv.appendChild(emojiGroupDiv);
-                var emojiName = this.parent.createElement('div', { className: 'e-rte-emojipicker-name' });
-                emojiName.innerText = this.parent.emojiPickerSettings.iconsSet[i].name;
-                emojiName.setAttribute('aria-label', this.parent.emojiPickerSettings.iconsSet[i].name);
-                emojiGroupDiv.appendChild(emojiName);
-                var emojiBtn = this.parent.createElement('div', { className: 'e-rte-emojipickerbtn-group' });
-                emojiGroupDiv.appendChild(emojiBtn);
-                for (var j = 0; j < emojiPicker[i].icons.length; j++) {
-                    var button = this.parent.createElement('button', { className: 'e-btn ' + ' ' + 'e-control' });
-                    button.innerHTML = this.buttoncode(this.parent.emojiPickerSettings.iconsSet[i].icons[j].code);
-                    button.setAttribute('aria-label', (this.parent.emojiPickerSettings.iconsSet[i].icons[j].desc));
-                    button.setAttribute('title', (this.parent.emojiPickerSettings.iconsSet[i].icons[j].desc));
-                    emojiBtn.appendChild(button);
-                    if (button.innerHTML.length > 2) {
-                        button.style.fontSize = '17px';
-                    }
-                }
-            }
-            ej2_base_1.EventHandler.add(emojiBtnDiv, 'scroll', this.scrollEvent, this);
-            ej2_base_1.EventHandler.add(emojiBtnDiv, 'click', this.emojiBtnClick, this);
-            var emojiButtons = this.parent.element.querySelectorAll('.e-rte-emojipicker-btn button');
-            if (ej2_base_1.isNullOrUndefined(this.parent.element.querySelector('.e-rte-emoji-search')) && !ej2_base_1.isNullOrUndefined(args.args)) {
-                emojiButtons[0].focus();
-                ej2_base_1.addClass([emojiButtons[0]], 'e-focus');
-            }
-            var popup = this.parent.element.querySelector('.e-rte-emojipicker-btn');
-            var toolbarName = this.parent.element.querySelectorAll('.e-rte-emojipicker-toolbar button');
-            var scrollTop;
-            if (!ej2_base_1.isNullOrUndefined(popup)) {
-                scrollTop = Math.round(popup.scrollTop);
-            }
-            if (scrollTop < toolbarName[0].offsetHeight) {
-                ej2_base_1.addClass([toolbarName[0]], 'e-selected');
-            }
-            if (this.popupObj) {
-                ej2_base_1.addClass([this.divElement], 'e-active');
-            }
-        };
-        EmojiPicker.prototype.onIframeMouseDown = function (e) {
-            if (this.popupObj) {
-                ej2_base_1.removeClass([this.divElement], 'e-active');
-                this.popupObj.hide();
-            }
-        };
-        EmojiPicker.prototype.buttoncode = function (value) {
-            var valueLength = value.split('-');
-            var joinedEmoji = valueLength.map(function (cp) { return String.fromCodePoint(parseInt(cp, 16)); }).join('\u200D');
-            return joinedEmoji;
-        };
-        EmojiPicker.prototype.docClick = function (e) {
-            var target = e.args.target;
-            if (target && target.classList && ((this.popupObj && !ej2_base_1.closest(target, '[id=' + '\'' + this.popupObj.element.id + '\'' + ']')))
-                && (!target.classList.contains('e-emoji') && !target.classList.contains('e-toolbar-item'))) {
-                if (this.popupObj) {
-                    ej2_base_1.removeClass([this.divElement], 'e-active');
-                    this.popupObj.hide();
-                }
-            }
-        };
-        EmojiPicker.prototype.scrollEvent = function () {
-            var popup = this.parent.element.querySelector('.e-rte-emojipicker-btn');
-            var emojiSet = this.parent.element.querySelectorAll('.e-rte-emojipicker-group');
-            var toolbarName = this.parent.element.querySelectorAll('.e-rte-emojipicker-toolbar button');
-            var scrollTop;
-            if (!ej2_base_1.isNullOrUndefined(popup)) {
-                scrollTop = Math.round(popup.scrollTop);
-            }
-            var firstSetWidth = 0;
-            for (var j = 0; j < toolbarName.length; j++) {
-                if (scrollTop < toolbarName[0].offsetHeight) {
-                    if (!ej2_base_1.isNullOrUndefined(toolbarName[j + 1])) {
-                        ej2_base_1.removeClass([toolbarName[j + 1]], 'e-selected');
-                    }
-                    ej2_base_1.addClass([toolbarName[0]], 'e-selected');
-                }
-            }
-            for (var i = 0; i < emojiSet.length; i++) {
-                firstSetWidth += Math.round(emojiSet[i].offsetHeight);
-                if (scrollTop >= firstSetWidth) {
-                    for (var k = 0; k < toolbarName.length; k++) {
-                        if (toolbarName[k].classList.contains('e-selected')) {
-                            ej2_base_1.removeClass([toolbarName[k]], 'e-selected');
-                        }
-                    }
-                    if (!ej2_base_1.isNullOrUndefined(toolbarName[i + 1])) {
-                        ej2_base_1.addClass([toolbarName[i + 1]], 'e-selected');
-                    }
-                }
-            }
-        };
-        EmojiPicker.prototype.contentscroll = function () {
-            if (ej2_base_1.isNullOrUndefined(this.clickEvent) && this.popupObj) {
-                ej2_base_1.removeClass([this.divElement], 'e-active');
-                this.popupObj.hide();
-                return;
-            }
-        };
-        EmojiPicker.prototype.emojiToolbarClick = function (e) {
-            var args = {
-                text: e.item.htmlAttributes.title,
-            };
-            var currentEleName = args.text;
-            var emojiGroups = this.parent.element.querySelectorAll('.e-rte-emojipicker-group');
-            var emojiButtons = this.parent.element.querySelectorAll('.e-rte-emojipicker-btn button');
-            var toolbarName = this.parent.element.querySelectorAll('.e-rte-emojipicker-toolbar button');
-            for (var i = 0; i < toolbarName.length; i++) {
-                if (toolbarName[i].classList.contains('e-selected')) {
-                    ej2_base_1.removeClass([toolbarName[i]], 'e-selected');
-                }
-            }
-            for (var i = 0; i < emojiButtons.length; i++) {
-                if (emojiButtons[i].classList.contains('e-focus')) {
-                    ej2_base_1.removeClass([emojiButtons[i]], 'e-focus');
-                }
-            }
-            var emojiGroupsheight = this.parent.element.querySelector('.e-rte-emojipicker-btn');
-            var emojiHeight = 0;
-            emojiGroups.forEach(function (group) {
-                var childNodes = group.childNodes[0];
-                var focusBtn = group.childNodes[1].childNodes[0];
-                var ariaLabel = childNodes.getAttribute('aria-label');
-                if (currentEleName === ariaLabel) {
-                    if (childNodes) {
-                        emojiGroupsheight.scrollTop = emojiHeight + 10;
-                        ej2_base_1.addClass([focusBtn], 'e-focus');
-                        focusBtn.focus();
-                    }
-                }
-                else {
-                    emojiHeight += group.scrollHeight;
-                    ej2_base_1.removeClass([focusBtn], 'e-focus');
-                }
-            });
-        };
-        EmojiPicker.prototype.onKeyDown = function (e) {
-            var emojiButtons = this.parent.element.querySelectorAll('.e-rte-emojipicker-btn button');
-            var emojiGroups = this.parent.element.querySelectorAll('.e-rte-emojipickerbtn-group');
-            var searchKeyHandler = this.parent.element.querySelector('.e-rte-emojisearch-btn button');
-            if (e.keyCode === 27) {
-                if (this.popupObj) {
-                    ej2_base_1.removeClass([this.divElement], 'e-active');
-                    this.popupObj.hide();
-                }
-            }
-            if (e.keyCode === 13) {
-                var activeEle = document.activeElement;
-                if (activeEle.classList.contains('e-btn')) {
-                    this.emojiBtnClick(e);
-                    e.preventDefault();
-                }
-            }
-            var srcElement = e.srcElement;
-            if (!ej2_base_1.isNullOrUndefined(srcElement)) {
-                if (srcElement.classList.contains('e-rte-emoji-search') && e.keyCode === 40) {
-                    for (var i = 0; i < emojiButtons.length; i++) {
-                        if (emojiButtons[i].classList.contains('e-focus')) {
-                            ej2_base_1.removeClass([emojiButtons[i]], 'e-focus');
-                        }
-                    }
-                }
-            }
-            if (!ej2_base_1.isNullOrUndefined(searchKeyHandler)) {
-                this.filterKeyHandler(e);
-            }
-            else {
-                for (var i = 0; i < emojiButtons.length; i++) {
-                    var focusIndex = i;
-                    if (emojiButtons[i].classList.contains('e-focus')) {
-                        if (e.keyCode === 40) {
-                            if (emojiButtons.length - 4 > i) {
-                                var count = 0;
-                                for (var j = 0; j < emojiGroups.length; j++) {
-                                    for (var k = 0; k < emojiGroups[j].childNodes.length; k++) {
-                                        var childNodes = emojiGroups[j].childNodes[k];
-                                        if (childNodes.classList.contains('e-focus') && count !== 1) {
-                                            var currentIndex = k;
-                                            var lastChild = emojiGroups[j].lastChild;
-                                            var lastRowIndex = Math.floor((k) % 6);
-                                            var lastEleLength = emojiGroups[j].childNodes.length - 1;
-                                            var lastEleIndex = Math.floor((lastEleLength) % 6);
-                                            if (currentIndex !== -1) {
-                                                var nextRowIndex = currentIndex + 6;
-                                                if (!ej2_base_1.isNullOrUndefined(emojiGroups[j].childNodes[nextRowIndex])) {
-                                                    var firstFocusEle = emojiButtons[i];
-                                                    ej2_base_1.removeClass([firstFocusEle], 'e-focus');
-                                                    var focusEle = emojiButtons[focusIndex += 6];
-                                                    ej2_base_1.addClass([focusEle], 'e-focus');
-                                                    focusEle.focus();
-                                                    break;
-                                                }
-                                                else if (ej2_base_1.isNullOrUndefined(emojiGroups[j].childNodes[nextRowIndex]) && !lastChild.classList.contains('e-focus') && lastEleIndex < lastRowIndex) {
-                                                    var firstFocusEle = emojiButtons[i];
-                                                    ej2_base_1.removeClass([firstFocusEle], 'e-focus');
-                                                    var focusEle = emojiGroups[j].lastChild;
-                                                    ej2_base_1.addClass([focusEle], 'e-focus');
-                                                    focusEle.focus();
-                                                    count = 1;
-                                                    break;
-                                                }
-                                                else {
-                                                    var firstFocusEle = emojiButtons[i];
-                                                    ej2_base_1.removeClass([firstFocusEle], 'e-focus');
-                                                    var focusEle = emojiGroups[j + 1]
-                                                        .childNodes[lastRowIndex];
-                                                    ej2_base_1.addClass([focusEle], 'e-focus');
-                                                    focusEle.focus();
-                                                    count = 1;
-                                                    break;
-                                                }
-                                            }
-                                        }
-                                    }
-                                }
-                                break;
-                            }
-                        }
-                        else if (e.keyCode === 38) {
-                            if (i >= 6) {
-                                var count = 0;
-                                for (var j = 0; j < emojiGroups.length; j++) {
-                                    for (var k = 0; k < emojiGroups[j].childNodes.length; k++) {
-                                        var childNodes = emojiGroups[j].childNodes[k];
-                                        if (childNodes.classList.contains('e-focus') && count !== 1) {
-                                            var currentIndex = k;
-                                            var previousRowLength = ej2_base_1.isNullOrUndefined(emojiGroups[j - 1]) ? null :
-                                                emojiGroups[j - 1].childNodes.length % 6 || 6;
-                                            if (currentIndex !== -1) {
-                                                var previousRowIndex = currentIndex - 6;
-                                                if (!ej2_base_1.isNullOrUndefined(emojiGroups[j].childNodes[previousRowIndex])) {
-                                                    var firstFocusEle = emojiButtons[i];
-                                                    ej2_base_1.removeClass([firstFocusEle], 'e-focus');
-                                                    var focusEle = emojiButtons[focusIndex -= 6];
-                                                    ej2_base_1.addClass([focusEle], 'e-focus');
-                                                    focusEle.focus();
-                                                    break;
-                                                }
-                                                else if (ej2_base_1.isNullOrUndefined(emojiGroups[j - 1].childNodes[emojiGroups[j - 1]
-                                                    .childNodes.length - (previousRowLength - k)])) {
-                                                    var firstFocusEle = emojiButtons[i];
-                                                    ej2_base_1.removeClass([firstFocusEle], 'e-focus');
-                                                    var focusEle = emojiGroups[j - 1].lastChild;
-                                                    ej2_base_1.addClass([focusEle], 'e-focus');
-                                                    focusEle.focus();
-                                                    count = 1;
-                                                    break;
-                                                }
-                                                else {
-                                                    var firstFocusEle = emojiButtons[i];
-                                                    ej2_base_1.removeClass([firstFocusEle], 'e-focus');
-                                                    var focusEle = emojiGroups[j - 1].childNodes[emojiGroups[j - 1].
-                                                        childNodes.length - (previousRowLength - k)];
-                                                    ej2_base_1.addClass([focusEle], 'e-focus');
-                                                    focusEle.focus();
-                                                    count = 1;
-                                                    break;
-                                                }
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                            else {
-                                var firstFocusEle = emojiButtons[i];
-                                ej2_base_1.removeClass([firstFocusEle], 'e-focus');
-                                var focusEle = emojiButtons[focusIndex -= 1];
-                                var inputELe = this.popupObj.element.querySelector('.e-rte-emoji-search');
-                                if (ej2_base_1.isNullOrUndefined(focusEle) && !ej2_base_1.isNullOrUndefined(inputELe)) {
-                                    inputELe.focus();
-                                    break;
-                                }
-                                ej2_base_1.addClass([focusEle], 'e-focus');
-                                focusEle.focus();
-                            }
-                            break;
-                        }
-                        else if (e.keyCode === 39) {
-                            if (emojiButtons.length !== i + 1) {
-                                var firstFocusEle = emojiButtons[i];
-                                ej2_base_1.removeClass([firstFocusEle], 'e-focus');
-                                var focusEle = emojiButtons[focusIndex += 1];
-                                ej2_base_1.addClass([focusEle], 'e-focus');
-                                emojiButtons[focusIndex].focus();
-                            }
-                            break;
-                        }
-                        else if (e.keyCode === 37) {
-                            if (i > 0) {
-                                var firstFocusEle = emojiButtons[i];
-                                ej2_base_1.removeClass([firstFocusEle], 'e-focus');
-                                var focusEle = emojiButtons[focusIndex -= 1];
-                                ej2_base_1.addClass([focusEle], 'e-focus');
-                                emojiButtons[focusIndex].focus();
-                            }
-                            break;
-                        }
-                    }
-                }
-            }
-            if (e.keyCode === 40) {
-                var firstFocusEle = this.parent.element.querySelector('.e-focus');
-                if (ej2_base_1.isNullOrUndefined(firstFocusEle)) {
-                    var focusEle = emojiButtons[0];
-                    ej2_base_1.addClass([focusEle], 'e-focus');
-                    if (this.parent.userAgentData.isSafari() && this.parent.inputElement.contains(this.parent.getRange().startContainer)) {
-                        this.parent.notify(events.selectionSave, {});
-                    }
-                    emojiButtons[0].focus();
-                }
-            }
-        };
-        EmojiPicker.prototype.filterKeyHandler = function (e) {
-            var emojiButtons = this.parent.element.querySelectorAll('.e-rte-emojisearch-btn button');
-            var firstFocusEle = this.parent.element.querySelector('.e-focus');
-            if (ej2_base_1.isNullOrUndefined(firstFocusEle) && e.keyCode === 40) {
-                var focusEle = emojiButtons[0];
-                ej2_base_1.addClass([focusEle], 'e-focus');
-                if (this.parent.userAgentData.isSafari()) {
-                    this.parent.notify(events.selectionSave, {});
-                }
-                emojiButtons[0].focus();
-            }
-            else {
-                for (var i = 0; i < emojiButtons.length; i++) {
-                    var focusIndex = i;
-                    var childNodes = emojiButtons[i];
-                    if (childNodes.classList.contains('e-focus')) {
-                        if (e.keyCode === 38) {
-                            if (i >= 6) {
-                                var firstFocusEle_1 = emojiButtons[i];
-                                ej2_base_1.removeClass([firstFocusEle_1], 'e-focus');
-                                var focusEle = emojiButtons[focusIndex -= 6];
-                                ej2_base_1.addClass([focusEle], 'e-focus');
-                                focusEle.focus();
-                                break;
-                            }
-                            else {
-                                var firstFocusEle_2 = emojiButtons[i];
-                                ej2_base_1.removeClass([firstFocusEle_2], 'e-focus');
-                                var focusEle = emojiButtons[focusIndex -= 1];
-                                var inputELe = this.popupObj.element.querySelector('.e-rte-emoji-search');
-                                if (ej2_base_1.isNullOrUndefined(focusEle) && !ej2_base_1.isNullOrUndefined(inputELe)) {
-                                    inputELe.focus();
-                                    break;
-                                }
-                                ej2_base_1.addClass([focusEle], 'e-focus');
-                                focusEle.focus();
-                            }
-                        }
-                        else if (e.keyCode === 40) {
-                            if (emojiButtons.length - 6 > i) {
-                                var firstFocusEle_3 = emojiButtons[i];
-                                ej2_base_1.removeClass([firstFocusEle_3], 'e-focus');
-                                var focusEle = emojiButtons[focusIndex += 6];
-                                ej2_base_1.addClass([focusEle], 'e-focus');
-                                focusEle.focus();
-                                break;
-                            }
-                        }
-                        else if (e.keyCode === 39) {
-                            if (emojiButtons.length !== i + 1) {
-                                var firstFocusEle_4 = emojiButtons[i];
-                                ej2_base_1.removeClass([firstFocusEle_4], 'e-focus');
-                                var focusEle = emojiButtons[focusIndex += 1];
-                                ej2_base_1.addClass([focusEle], 'e-focus');
-                                emojiButtons[focusIndex].focus();
-                            }
-                            break;
-                        }
-                        else if (e.keyCode === 37) {
-                            if (i > 0) {
-                                var firstFocusEle_5 = emojiButtons[i];
-                                ej2_base_1.removeClass([firstFocusEle_5], 'e-focus');
-                                var focusEle = emojiButtons[focusIndex -= 1];
-                                ej2_base_1.addClass([focusEle], 'e-focus');
-                                emojiButtons[focusIndex].focus();
-                                break;
-                            }
-                        }
-                    }
-                }
-            }
-        };
-        EmojiPicker.prototype.searchFilter = function (e, value, hasInternalCall) {
-            if (hasInternalCall === void 0) { hasInternalCall = false; }
-            var inputElement = this.parent.element.querySelector('.e-rte-emoji-search');
-            var contentELe = this.parent.iframeSettings.enable ? this.parent.contentModule.getPanel() :
-                this.parent.element.querySelector('.e-content');
-            if (document.activeElement === inputElement || document.activeElement === contentELe) {
-                var trimmedStr = void 0;
-                if (value !== ':' && !ej2_base_1.isNullOrUndefined(value)) {
-                    trimmedStr = value.replace(/^:/, '');
-                }
-                else if (!ej2_base_1.isNullOrUndefined(value)) {
-                    trimmedStr = value;
-                }
-                var inputValue = ej2_base_1.isNullOrUndefined(inputElement) ? trimmedStr : inputElement.value;
-                var emojiButtons = this.parent.element.querySelectorAll('.e-rte-emojipicker-btn button');
-                var emojipickerAll = this.parent.element.querySelector('.e-rte-emojipicker-btn');
-                var emojiGroups = this.parent.element.querySelectorAll('.e-rte-emojipicker-group');
-                var toolbarGroup = this.parent.element.querySelector('.e-rte-emojipicker-toolbar');
-                var excludedDiv_1 = this.parent.element.querySelector('.e-rte-emojisearch-btn');
-                var firstChild = this.popDiv.childNodes[0];
-                var getComputedStyle_2 = window.getComputedStyle(firstChild);
-                var inputHeight = firstChild.nodeName === 'SPAN' ? (firstChild.getBoundingClientRect().height + parseFloat(getComputedStyle_2.marginTop) +
-                    parseFloat(getComputedStyle_2.marginBottom)) : 0;
-                var popupBorder = window.getComputedStyle(this.popDiv);
-                var filteredButtons = ej2_base_1.isNullOrUndefined(excludedDiv_1) ? emojiButtons :
-                    Array.from(emojiButtons).filter(function (button) { return !excludedDiv_1.contains(button); });
-                if (!ej2_base_1.isNullOrUndefined(toolbarGroup) && !ej2_base_1.isNullOrUndefined(emojipickerAll) && !ej2_base_1.isNullOrUndefined(inputValue)) {
-                    if (inputValue === '' || value === ':') {
-                        toolbarGroup.style.display = '';
-                        emojipickerAll.style.height = (this.popDiv.getBoundingClientRect().height - toolbarGroup.getBoundingClientRect().height - inputHeight - (2 * parseFloat(popupBorder.borderWidth))) + 'px';
-                        emojiGroups.forEach(function (element) {
-                            element.style.display = '';
-                        });
-                    }
-                    else {
-                        emojiGroups.forEach(function (element) {
-                            element.style.display = 'none';
-                        });
-                        toolbarGroup.style.display = 'none';
-                        emojipickerAll.style.height = (this.popDiv.getBoundingClientRect().height - inputHeight - (2 * parseFloat(popupBorder.borderWidth))) + 'px';
-                    }
-                    var emojiBtnDiv = this.parent.createElement('div', { className: 'e-rte-emojisearch-btn' });
-                    var emojis = this.parent.element.querySelector('.e-rte-emojisearch-btn');
-                    if (emojis) {
-                        emojis.remove();
-                    }
-                    var noEMoji = true;
-                    for (var i = 0; i < filteredButtons.length; i++) {
-                        if (!ej2_base_1.isNullOrUndefined(filteredButtons[i].getAttribute('title'))) {
-                            var title = filteredButtons[i].getAttribute('title').toLowerCase();
-                            var titleLength = title.split(' ');
-                            for (var j = 0; j < titleLength.length; j++) {
-                                if (titleLength[j].startsWith(inputValue.toLowerCase()) && inputValue !== '') {
-                                    var emoji = filteredButtons[i].cloneNode(true);
-                                    emojiBtnDiv.appendChild(emoji);
-                                    noEMoji = false;
-                                    break;
-                                }
-                            }
-                        }
-                    }
-                    var noEmojiObj = this.parent.createElement('div', { className: 'e-rte-emojiSearch-noEmoji' });
-                    if (noEMoji && !this.parent.element.querySelector('.e-rte-emojiSearch-noEmoji') && (inputValue !== '' && value !== ':' && value !== ': :')) {
-                        if (!ej2_base_1.isNullOrUndefined(noEmojiObj)) {
-                            noEmojiObj.innerHTML = '<span style="color: rgba(0, 0, 0, 0.75); font-weight: 500; font-size: 16px;">' + this.i10n.getConstant('emojiPickerNoResultFound') + ' 😥 </span>' + '<br>' + '<span style="color: rgba(0, 0, 0, 0.75);"> ' + this.i10n.getConstant('emojiPickerTrySomethingElse') + ' ? </span>';
-                            noEmojiObj.style.margin = '55px';
-                            emojipickerAll.appendChild(noEmojiObj);
-                        }
-                    }
-                    else if (!noEMoji && this.parent.element.querySelector('.e-rte-emojiSearch-noEmoji') || (inputValue === '' && value === ':') || (inputValue === '' && this.parent.element.querySelector('.e-rte-emojiSearch-noEmoji'))) {
-                        emojipickerAll.removeChild(this.parent.element.querySelector('.e-rte-emojiSearch-noEmoji'));
-                    }
-                    emojipickerAll.appendChild(emojiBtnDiv);
-                    if (hasInternalCall) {
-                        if (noEMoji && value !== ':') {
-                            this.noResultsFoundCount += 1;
-                        }
-                        else {
-                            this.noResultsFoundCount = 0;
-                        }
-                        if (this.noResultsFoundCount >= 9) {
-                            if (!ej2_base_1.isNullOrUndefined(this.popupObj)) {
-                                ej2_base_1.removeClass([this.divElement], 'e-active');
-                                this.popupObj.hide();
-                                this.noResultsFoundCount = 0;
-                                return;
-                            }
-                        }
-                    }
-                }
-                else {
-                    return;
-                }
-            }
-            else {
-                return;
-            }
-        };
-        EmojiPicker.prototype.emojiBtnClick = function (e) {
-            var event = new MouseEvent('mouseleave', { bubbles: true, cancelable: true });
-            var emotePickerTooltips = this.parent.element.querySelectorAll('.e-rte-emojipicker-popup [data-tooltip-id]');
-            for (var i = 0; i < emotePickerTooltips.length; i++) {
-                emotePickerTooltips[i].dispatchEvent(event);
-            }
-            var targetEle = e.target;
-            if (targetEle.tagName !== 'BUTTON') {
-                return;
-            }
-            targetEle.focus();
-            var startOffset = this.save.startOffset;
-            var textContent = this.save.range.startContainer.textContent;
-            var previousText = textContent.substring(startOffset, startOffset + 1);
-            if (!ej2_base_1.isNullOrUndefined(this.clickEvent) || previousText !== ':') {
-                this.save.restore();
-            }
-            if (this.popupObj) {
-                ej2_base_1.removeClass([this.divElement], 'e-active');
-                this.popupObj.hide();
-            }
-            if (this.parent.userAgentData.isSafari() && e.type === 'keydown') {
-                this.parent.notify(events.selectionRestore, {});
-            }
-            var originalEvent = e;
-            this.parent.formatter.process(this.parent, {
-                item: {
-                    'command': 'EmojiPicker',
-                    'subCommand': 'EmojiPicker',
-                    value: targetEle.innerHTML
-                },
-                originalEvent: originalEvent
-            }, e, originalEvent);
-        };
-        EmojiPicker.prototype.onkeyPress = function (e) {
-            var originalEvent = e.args;
-            var selection = (this.parent.iframeSettings.enable) ?
-                this.parent.contentModule.getPanel().contentWindow.getSelection() :
-                this.parent.contentModule.getDocument().getSelection();
-            if (selection.rangeCount <= 0) {
-                return;
-            }
-            var range = selection.getRangeAt(0);
-            var cursorPos = range.startOffset;
-            var prevChar = selection.focusNode.textContent.substring(cursorPos - 1, cursorPos);
-            var isPrevSpace = /\s/.test(prevChar);
-            var isPrevColon = selection.focusNode.textContent.substring(cursorPos - 1, cursorPos) === ':';
-            var colon = selection.focusNode.textContent.charAt(cursorPos - 1) === ':';
-            if (originalEvent.keyCode === 186 && originalEvent.shiftKey && (isPrevSpace || selection.focusOffset === 0)) {
-                var coordinates = this.getCoordinates();
-                this.parent.showEmojiPicker(coordinates.left, coordinates.top);
-            }
-            if (originalEvent.keyCode === 8 && colon && this.popupObj) {
-                ej2_base_1.removeClass([this.divElement], 'e-active');
-                this.popupObj.hide();
-            }
-            if (originalEvent.keyCode === 32 && isPrevColon && this.popupObj) {
-                ej2_base_1.removeClass([this.divElement], 'e-active');
-                var currentDocument = this.parent.iframeSettings.enable ? this.parent.contentModule.getPanel().ownerDocument :
-                    this.parent.contentModule.getDocument();
-                if (this.parent.showTooltip && !ej2_base_1.isNullOrUndefined(currentDocument.querySelector('.e-tooltip-wrap'))) {
-                    this.parent.notify(events.destroyTooltip, { args: event });
-                }
-                this.popupObj.hide();
-            }
-            if (this.popupObj && (originalEvent.keyCode === 37 || originalEvent.keyCode === 38 || originalEvent.keyCode === 39
-                || originalEvent.keyCode === 27 || originalEvent.keyCode === 40)) {
-                this.onKeyDown(originalEvent);
-                originalEvent.preventDefault();
-            }
-        };
-        EmojiPicker.prototype.onkeyUp = function (e) {
-            var originalEvent = e.args;
-            var selection = (this.parent.iframeSettings.enable) ?
-                this.parent.contentModule.getPanel().contentWindow.getSelection() :
-                this.parent.contentModule.getDocument().getSelection();
-            if (selection.rangeCount <= 0) {
-                return;
-            }
-            var range = selection.getRangeAt(0);
-            var cursorPos = range.startOffset;
-            var selectedValue;
-            var count = 0;
-            for (var i = cursorPos - 1; i >= (cursorPos - selection.focusNode.textContent.length); i--) {
-                var prevChar = selection.focusNode.textContent.substring(i - 1, i);
-                var isPrevSpace = /:$/.test(prevChar);
-                if (isPrevSpace && !ej2_base_1.isNullOrUndefined(this.popDiv) && count === 0) {
-                    selectedValue = range.startContainer.textContent.substring(i - 1, cursorPos);
-                    this.searchFilter(originalEvent, selectedValue, true);
-                    count = 1;
-                }
-            }
-            var colon = selection.focusNode.textContent.substring(cursorPos - 1, cursorPos);
-            if (colon === ':' && !ej2_base_1.isNullOrUndefined(this.popupObj)) {
-                selectedValue = colon;
-                this.searchFilter(originalEvent, selectedValue, true);
-            }
-        };
-        EmojiPicker.prototype.getCoordinates = function () {
-            var coordinates;
-            var selection = (this.parent.iframeSettings.enable) ?
-                this.parent.contentModule.getPanel().contentWindow.getSelection() : window.getSelection();
-            var range = selection.getRangeAt(0);
-            var firstChild;
-            if (range.startContainer.nodeName === 'P' || range.startContainer.nodeName === 'DIV') {
-                if (range.startContainer.childNodes[0].nodeName !== '#text') {
-                    firstChild = range.startContainer.childNodes[0];
-                }
-            }
-            var rect = ej2_base_1.isNullOrUndefined(firstChild) ? range.getBoundingClientRect() : firstChild.getBoundingClientRect();
-            var rteContent = this.parent.element.querySelector('.e-rte-content');
-            var rteEle = this.parent.element;
-            var toolbarHeight = rteEle.offsetHeight - rteContent.offsetHeight;
-            var cursorTop = rect.top - this.parent.inputElement.getBoundingClientRect().top;
-            var cursorLeft = rect.left - this.parent.inputElement.getBoundingClientRect().left;
-            var screenHeight = window.innerHeight;
-            var popupHeight = 330;
-            var popupTop = cursorTop;
-            var popupLeft = cursorLeft + rect.width;
-            if (rteEle.getBoundingClientRect().top < 0 && !this.parent.inlineMode.enable) {
-                popupTop = popupTop + rteContent.getBoundingClientRect().top - toolbarHeight;
-            }
-            if (rect.top < popupHeight) {
-                popupTop = popupTop;
-            }
-            else if (rect.top + popupHeight > screenHeight) {
-                popupTop -= popupHeight + 20;
-            }
-            if (this.parent.inputElement) {
-                coordinates = {
-                    top: popupTop + 60,
-                    left: popupLeft + 8
-                };
-            }
-            return coordinates;
-        };
-        EmojiPicker.prototype.removeEventListener = function () {
-            this.parent.off(events.emojiPicker, this.toolbarClick);
-            this.parent.off(events.docClick, this.docClick);
-            this.parent.off(events.iframeMouseDown, this.onIframeMouseDown);
-            this.parent.off(events.keyDown, this.onkeyPress);
-            this.parent.off(events.keyUp, this.onkeyUp);
-            this.parent.off(events.contentscroll, this.contentscroll);
-            this.parent.off(events.scroll, this.contentscroll);
-            this.parent.off(events.destroy, this.destroy);
-        };
-        EmojiPicker.prototype.getModuleName = function () {
-            return 'emojiPicker';
-        };
-        return EmojiPicker;
-    }());
-    exports.EmojiPicker = EmojiPicker;
-});