WebBuild/wwwroot/apps/collaboration/components/doceditor/ribbon.js

var Unibase;
(function (Unibase) {
    let Apps;
    (function (Apps) {
        let Collaboration;
        (function (Collaboration) {
            let Components;
            (function (Components) {
                let DocEditor;
                (function (DocEditor) {
                    class Ribbon {
                        init(docobj, result) {
                            this.FileName = result.FileName;
                            this.FileId = result.FileId;
                            this.documentGroup = result.DocumentGroup;
                            this.wordDocumentObj = docobj;
                            this.docBase = Unibase.Apps.Collaboration.Components.DocEditor.Base.Instance();
                            this.fileDownload = Unibase.Apps.Collaboration.Components.Common.Download.Instance();
                            this.util = Unibase.Apps.Collaboration.Components.Common.Util.Instance();
                            this.render();
                        }
                        render() {
                            this.wordDocumentMenubar(this.FileId, this.documentGroup, this.FileName);
                            this.appendToolbarElements();
                            this.createResponsiveToolbar();
                            this.updateProp();
                        }
                        updateProp() {
                            this.fontSize = document.getElementById("DocumentViewer_editor_font_properties_fontSize").ej2_instances[0];
                        }
                        setFontSize(size) {
                            this.wordDocumentObj.textProperties.text.isRetrieving = false;
                            this.fontSize.value = size;
                        }
                        wordDocumentMenubar(FileId, documentGroup, FileName) {
                            var instance = this;
                            var menuItems = [
                                {
                                    text: 'File',
                                    items: [
                                        { text: 'New', iconCss: 'e-icons add-new' },
                                        { text: 'Open', iconCss: 'e-icons e-open' },
                                        { text: 'Make a copy', iconCss: 'e-icons biz_make_a_copy' },
                                        {
                                            text: 'Download', iconCss: 'e-icons e-save',
                                            items: [
                                                { text: 'Microsoft Word Document (.docx)', iconCss: 'e-icons' },
                                                { text: 'Portable Document Format (.pdf)', iconCss: 'e-icons Pdf_Export' },
                                                { text: 'Text Document (.txt)', iconCss: 'e-icons' }
                                            ]
                                        },
                                        { text: 'Close', iconCss: 'e-icons cross-close' },
                                    ]
                                },
                                {
                                    text: 'Edit',
                                    items: [
                                        { text: 'Undo', iconCss: 'e-icons biz-doc-undo-icon' },
                                        { text: 'Redo', iconCss: 'e-icons biz-doc-redo-icon' },
                                        { separator: true },
                                        { text: 'Cut', iconCss: 'e-icons biz-doc-cut-icon' },
                                        { text: 'Copy', iconCss: 'e-icons biz-doc-copy-icon' },
                                        { text: 'Paste', iconCss: 'e-icons biz-doc-paste-icon' },
                                        {
                                            text: 'Special paste', iconCss: 'e-icons biz-doc-paste-icon', items: [
                                                { text: "Keep source formatting", iconCss: 'e-icons MT_PasteStyle' },
                                                { text: "Match destination formatting", iconCss: 'e-icons M_MergeFormatting' },
                                                { text: "Text only", iconCss: 'e-icons MT_PasteTextonly' },
                                            ]
                                        },
                                        { separator: true },
                                        { text: 'Delete', iconCss: 'e-icons MT_Delete' },
                                        { text: 'Select all', iconCss: 'e-icons MT_SelectAll' },
                                        { text: 'Search', iconCss: 'e-icons MT_Search' },
                                    ]
                                },
                                {
                                    text: 'View',
                                    items: [
                                        { text: 'Page Setup', iconCss: 'e-icons M_PageSetup' },
                                        { text: 'Page Number', iconCss: 'e-icons M_PageNumber' },
                                        {
                                            text: 'Mode', iconCss: 'e-icons MT_Preview',
                                            items: [
                                                { text: 'Editing', iconCss: 'e-icons biz_edit_icon' },
                                                { text: 'View only', iconCss: 'e-icons MT_Preview' },
                                            ]
                                        },
                                        {
                                            text: 'Break', iconCss: 'e-icons M_Break',
                                            items: [
                                                { text: 'Page Break', iconCss: 'e-icons M_PageBreak' },
                                                { text: 'Section Break', iconCss: 'e-icons M_SectionBreak' },
                                            ]
                                        },
                                        { separator: true },
                                        { text: 'Full screen', iconCss: 'e-icons biz-enterfullscreen' },
                                    ]
                                },
                                {
                                    text: 'Insert',
                                    items: [
                                        { text: 'Header', iconCss: 'e-icons M_Header' },
                                        { text: 'Footer', iconCss: 'e-icons M_Footer' },
                                        { separator: true },
                                        { text: 'Image', iconCss: 'e-icons B_Image' },
                                        { text: 'Table', iconCss: 'e-icons table-02' },
                                        { text: 'Link', iconCss: 'e-icons e-Hyperlink' },
                                        { text: 'Bookmark', iconCss: 'e-icons M_Bookmark' },
                                        { text: 'Table Of Contents', iconCss: 'e-icons M_TableOfContent' },
                                        { separator: true },
                                        { text: 'Footnote', iconCss: 'e-icons M_Footnote' },
                                        { text: 'Endnote', iconCss: 'e-icons M_Endnote' },
                                    ]
                                },
                                {
                                    text: 'Format',
                                    items: [
                                        {
                                            text: 'Text', iconCss: 'e-icons ',
                                            items: [
                                                { text: 'Bold', iconCss: 'e-icons ' },
                                                { text: 'Italic', iconCss: 'e-icons ' },
                                                { text: 'Underline', iconCss: 'e-icons ' },
                                                { text: 'Strikethrough', iconCss: 'e-icons ' },
                                                { text: 'Superscript', iconCss: 'e-icons ' },
                                                { text: 'Subscript', iconCss: 'e-icons ' },
                                            ]
                                        },
                                        {
                                            text: 'Font size', iconCss: 'e-icons ',
                                            items: [
                                                { text: '8', iconCss: 'e-icons ' },
                                                { text: '9', iconCss: 'e-icons ' },
                                                { text: '10', iconCss: 'e-icons ' },
                                                { text: '11', iconCss: 'e-icons ' },
                                                { text: '12', iconCss: 'e-icons ' },
                                                { text: '14', iconCss: 'e-icons ' },
                                                { text: '16', iconCss: 'e-icons ' },
                                                { text: '18', iconCss: 'e-icons ' },
                                                { text: '20', iconCss: 'e-icons ' },
                                                { text: '22', iconCss: 'e-icons ' },
                                                { text: '24', iconCss: 'e-icons ' },
                                                { text: '26', iconCss: 'e-icons ' },
                                                { text: '28', iconCss: 'e-icons ' },
                                                { text: '36', iconCss: 'e-icons ' },
                                                { text: '48', iconCss: 'e-icons ' },
                                                { text: '72', iconCss: 'e-icons ' },
                                                { text: '96', iconCss: 'e-icons ' },
                                            ]
                                        },
                                        {
                                            text: 'Paragraph styles', iconCss: 'e-icons ',
                                            items: [
                                                { text: 'Normal', iconCss: 'e-icons ' },
                                                { text: 'Heading 1', iconCss: 'e-icons ' },
                                                { text: 'Heading 2', iconCss: 'e-icons ' },
                                                { text: 'Heading 3', iconCss: 'e-icons ' },
                                                { text: 'Heading 4', iconCss: 'e-icons ' },
                                                { text: 'Heading 5', iconCss: 'e-icons ' },
                                                { text: 'Heading 6', iconCss: 'e-icons ' },
                                            ]
                                        },
                                        {
                                            text: 'Align & indent', iconCss: 'e-icons ',
                                            items: [
                                                { text: 'Left', iconCss: 'e-icons ' },
                                                { text: 'Center', iconCss: 'e-icons ' },
                                                { text: 'Right', iconCss: 'e-icons ' },
                                                { text: 'Justified', iconCss: 'e-icons ' },
                                                { separator: true },
                                                { text: 'Increase indent', iconCss: 'e-icons ' },
                                                { text: 'Decrease indent', iconCss: 'e-icons ' },
                                            ]
                                        },
                                        {
                                            text: 'Line spacing', iconCss: 'e-icons ',
                                            items: [
                                                { text: 'Single' },
                                                { text: '1.15' },
                                                { text: '1.5' },
                                                { text: 'Double' },
                                            ]
                                        },
                                        {
                                            text: 'Bulletes & numbering', iconCss: 'e-icons ', items: [
                                                {
                                                    text: 'Bullets',
                                                    items: [
                                                        { text: 'None' },
                                                        { text: 'Bullet dot' },
                                                        { text: 'Bullet circle' },
                                                        { text: 'Bullet square' },
                                                        { text: 'Bullet flower' },
                                                        { text: 'Bullet arrow' },
                                                        { text: 'Bullet tick' },
                                                    ]
                                                },
                                                {
                                                    text: 'Numbering', items: [
                                                        { text: 'No numbering' },
                                                        { text: 'Numbers' },
                                                        { text: 'Lower case' },
                                                        { text: 'Upper case' },
                                                        { text: 'roman' },
                                                        { text: 'roman two' },
                                                    ]
                                                },
                                            ]
                                        },
                                        { separator: true },
                                        { text: 'Clear formatting', iconCss: 'e-icons ' },
                                    ]
                                },
                                {
                                    text: 'Tools',
                                    items: [
                                        { text: 'Comments', iconCss: 'e-icons AddComment' },
                                        { text: 'Track Changes', iconCss: 'e-icons M_TrackChanges' },
                                        { text: 'Local ClipBoard', iconCss: 'e-icons MT_Paste' },
                                        { text: 'Restrict Editing', iconCss: 'e-icons M_Lock', items: [{ text: "Read Only" }, { text: "Protections" }] },
                                    ]
                                },
                                {
                                    text: 'Add-ons',
                                    items: [
                                        {
                                            text: 'Form Fields', iconCss: 'e-icons M_FormField', items: [{ text: "Text Form", iconCss: 'e-icons M_Textform' },
                                                { text: "Check Box", iconCss: 'e-icons M_CheckBox' }, { text: "Drop-Down", iconCss: 'e-icons M_Dropdown' }]
                                        },
                                        { text: 'Update Fields', iconCss: 'e-icons M_UpdateField' },
                                    ]
                                }
                            ];
                            if (!this.wordDocumentMenubarObj) {
                                let menubaritems = ["File", "Edit", "View", "Insert", "Format", "Tools", "Add-ons"];
                                this.wordDocumentMenubarObj = new ej.navigations.Menu({
                                    cssClass: 'biz-doc-menu',
                                    showItemOnClick: true,
                                    beforeItemRender: (e) => {
                                        let popupitems = ["Text", "Font size", "Paragraph styles", "Align & indent", "Line spacing",
                                            "Bullets & numbering", "Bold", "Italic", "Underline", "Strikethrough", "Superscript",
                                            "Subscript", "Normal", "Heading 1", "Heading 2", "Heading 3", "Heading 4", "Heading 5",
                                            "Heading 6", "8", "9", "10", "11", "12", "16", "14", "18", "20", "22", "24", "26", "48", "28", "36", "72", "96"];
                                        if (popupitems.includes(e.item.text)) {
                                            if (this.docBase.formatInfo && this.docBase.formatInfo.element && this.docBase.formatInfo.element.characterFormat) {
                                                (this.docBase.formatInfo.element.characterFormat.bold) && (e.item.text == "Bold") && (this.addOrRemoveSelectIcon(e));
                                                (this.docBase.formatInfo.element.characterFormat.italic) && (e.item.text == "Italic") && (this.addOrRemoveSelectIcon(e));
                                                (this.docBase.formatInfo.element.characterFormat.baselineAlignment == e.item.text) && (this.addOrRemoveSelectIcon(e));
                                                (e.item.text == "Underline") && (this.docBase.formatInfo.element.characterFormat.underline == "Single") && (this.addOrRemoveSelectIcon(e));
                                                (e.item.text == "Strikethrough") && (this.docBase.formatInfo.element.characterFormat.strikethrough == "SingleStrike") && (this.addOrRemoveSelectIcon(e));
                                                (e.item.text == "Text") && ((this.docBase.formatInfo.element.characterFormat.bold) || (this.docBase.formatInfo.element.characterFormat.italic) ||
                                                    (this.docBase.formatInfo.element.characterFormat.baselineAlignment == e.item.text) ||
                                                    (this.docBase.formatInfo.element.characterFormat.underline == "Single") ||
                                                    (this.docBase.formatInfo.element.characterFormat.strikethrough == "SingleStrike")) && (this.addOrRemoveSelectIcon(e));
                                                (this.docBase.formatInfo.element.characterFormat.fontSize == e.item.text) && (this.addOrRemoveSelectIcon(e));
                                                if (this.docBase.formatInfo.element.characterFormat.baseCharStyle) {
                                                    ((this.docBase.formatInfo.element.characterFormat.baseCharStyle.name).slice(0, -5) == e.item.text) && (this.addOrRemoveSelectIcon(e));
                                                }
                                                else {
                                                    (e.item.text == "Normal") && (this.addOrRemoveSelectIcon(e));
                                                }
                                                (e.item.text == "Paragraph styles") && (this.addOrRemoveSelectIcon(e));
                                                var fontsizes = ["8", "9", "10", "11", "12", "16", "14", "18", "20", "22", "24", "26", "48", "28", "36", "72", "96"];
                                                (e.item.text == "Font size") && (fontsizes.includes(this.docBase.formatInfo.element.characterFormat.fontSize.toString())) && (this.addOrRemoveSelectIcon(e));
                                            }
                                        }
                                    },
                                    beforeClose: e => {
                                        if (menubaritems.indexOf(e.parentItem.text) > -1) {
                                            this.wordDocumentMenubarObj.showItemOnClick = true;
                                        }
                                    },
                                    beforeOpen: (e) => {
                                        if (menubaritems.indexOf(e.parentItem.text) > -1) {
                                            this.wordDocumentMenubarObj.showItemOnClick = false;
                                        }
                                        let editItems = ["Undo", "Redo", "Paste", "Special paste"];
                                        if (e.items.find(x => x.text == "Undo") != null) {
                                            let undoOverley = document.getElementById("DocumentViewer_toolbar_undo").parentElement.classList.contains("e-overlay");
                                            if (undoOverley) {
                                                this.wordDocumentMenubarObj.enableItems(["Undo"], false);
                                            }
                                        }
                                        if (e.items.find(x => x.text == "Redo") != null) {
                                            let redoOverley = document.getElementById("DocumentViewer_toolbar_redo").parentElement.classList.contains("e-overlay");
                                            if (redoOverley) {
                                                this.wordDocumentMenubarObj.enableItems(["Redo"], false);
                                            }
                                        }
                                    },
                                    select: (e) => {
                                        var lineHeight = document.getElementById("DocumentViewer_editor_font_properties_lineHeight").ej2_instances[0];
                                        var bullets = document.getElementById("DocumentViewer_editor_font_properties_bullet_dropdownbtn").ej2_instances[0];
                                        console.log(e);
                                        switch (e.item.text) {
                                            case "New":
                                                this.processNewWord();
                                                break;
                                            case "Microsoft Word Document (.docx)":
                                                this.fileDownload.downloadDocumentFile(FileId, documentGroup, FileName, 'Docx', instance.docBase.documentContainer);
                                                break;
                                            case "Portable Document Format (.pdf)":
                                                this.docBase.convertDocsToPdfDownload(FileId);
                                                break;
                                            case "Text Document (.txt)":
                                                this.fileDownload.downloadDocumentFile(FileId, documentGroup, FileName, 'Txt', instance.docBase.documentContainer);
                                                break;
                                            case "Open":
                                                this.renderOpenNewDialogue();
                                                break;
                                            case "Close":
                                                this.closePopup();
                                                break;
                                            case "Undo":
                                                document.getElementById("DocumentViewer_toolbar_undo").click();
                                                break;
                                            case "Redo":
                                                document.getElementById("DocumentViewer_toolbar_redo").click();
                                                break;
                                            case "Cut":
                                                this.docBase.wordDocumentObj.documentEditor.editor.cut();
                                                break;
                                            case "Copy":
                                                this.docBase.wordDocumentObj.documentEditor.selection.copy();
                                                break;
                                            case "Paste":
                                                this.docBase.wordDocumentObj.documentEditor.editor.paste();
                                                break;
                                            case "Match destination formatting":
                                                this.closePopup();
                                                break;
                                            case "Text only":
                                                this.closePopup();
                                                break;
                                            case "Keep source formatting":
                                                this.closePopup();
                                                break;
                                            case "Delete":
                                                this.docBase.wordDocumentObj.documentEditor.editor.delete();
                                                break;
                                            case "Select all":
                                                this.docBase.wordDocumentObj.documentEditor.selection.selectAll();
                                                break;
                                            case "Search":
                                                this.docBase.wordDocumentObj.documentEditor.showOptionsPane();
                                                break;
                                            case "View only":
                                                this.docBase.wordDocumentObj.documentEditor.isReadOnly = true;
                                                break;
                                            case "Editing":
                                                this.docBase.wordDocumentObj.documentEditor.isReadOnly = false;
                                                break;
                                            case "Header":
                                                this.wordDocumentObj.toolbarModule.clickHandler({ item: { id: this.wordDocumentObj.element.id + "_toolbar_header" }, name: "clicked", originalEvent: { target: this.wordDocumentObj.element } });
                                                break;
                                            case "Footer":
                                                this.wordDocumentObj.toolbarModule.clickHandler({ item: { id: this.wordDocumentObj.element.id + "_toolbar_footer" }, name: "clicked", originalEvent: { target: this.wordDocumentObj.element } });
                                                break;
                                            case "Page Setup":
                                                this.wordDocumentObj.toolbarModule.clickHandler({ item: { id: this.wordDocumentObj.element.id + "_toolbar_page_setup" }, name: "clicked", originalEvent: { target: this.wordDocumentObj.element } });
                                                break;
                                            case "Page Number":
                                                this.wordDocumentObj.toolbarModule.clickHandler({ item: { id: this.wordDocumentObj.element.id + "_toolbar_page_number" }, name: "clicked", originalEvent: { target: this.wordDocumentObj.element } });
                                                break;
                                            case "Page Break":
                                                this.wordDocumentObj.toolbarModule.container.documentEditor.editorModule.insertPageBreak();
                                                break;
                                            case "Section Break":
                                                this.wordDocumentObj.toolbarModule.container.documentEditor.editorModule.insertSectionBreak();
                                                break;
                                            case "Footnote":
                                                this.wordDocumentObj.toolbarModule.clickHandler({ item: { id: this.wordDocumentObj.element.id + "_toolbar_footnote" }, name: "clicked", originalEvent: { target: this.wordDocumentObj.element } });
                                                break;
                                            case "Endnote":
                                                this.wordDocumentObj.toolbarModule.clickHandler({ item: { id: this.wordDocumentObj.element.id + "_toolbar_endnote" }, name: "clicked", originalEvent: { target: this.wordDocumentObj.element } });
                                                break;
                                            case "Full screen":
                                                Unibase.Apps.Collaboration.Components.Fullscreen.Instance().refreshWordDocumentHeight(this.wordDocumentObj);
                                                break;
                                            case "Image":
                                                this.wordDocumentObj.toolbarModule.imagePicker.value = "";
                                                this.wordDocumentObj.toolbarModule.imagePicker.click();
                                                setTimeout(() => { this.wordDocumentObj.toolbarModule.documentEditor.focusIn(); }, 30);
                                                break;
                                            case "Table":
                                                this.wordDocumentObj.toolbarModule.clickHandler({ item: { id: this.wordDocumentObj.element.id + "_toolbar_table" }, name: "clicked", originalEvent: { target: this.wordDocumentObj.element } });
                                                break;
                                            case "Link":
                                                this.wordDocumentObj.toolbarModule.clickHandler({ item: { id: this.wordDocumentObj.element.id + "_toolbar_link" }, name: "clicked", originalEvent: { target: this.wordDocumentObj.element } });
                                                break;
                                            case "Bookmark":
                                                this.wordDocumentObj.toolbarModule.clickHandler({ item: { id: this.wordDocumentObj.element.id + "_toolbar_bookmark" }, name: "clicked", originalEvent: { target: this.wordDocumentObj.element } });
                                                break;
                                            case "Table Of Contents":
                                                this.wordDocumentObj.documentEditor.showDialog('TableOfContents');
                                                break;
                                            case "Bold":
                                                document.getElementById("DocumentViewer_editor_font_properties_bold").click();
                                                break;
                                            case "Italic":
                                                document.getElementById("DocumentViewer_editor_font_properties_italic").click();
                                                break;
                                            case "Underline":
                                                document.getElementById("DocumentViewer_editor_font_properties_underline").click();
                                                break;
                                            case "Strikethrough":
                                                document.getElementById("DocumentViewer_editor_font_properties_strikethrough").click();
                                                break;
                                            case "Superscript":
                                                document.getElementById("DocumentViewer_editor_font_properties_superscript").click();
                                                break;
                                            case "Subscript":
                                                document.getElementById("DocumentViewer_editor_font_properties_subscript").click();
                                                break;
                                            case "Clear formatting":
                                                document.getElementById("DocumentViewer_editor_font_properties_clearFormat").click();
                                                break;
                                            case "Left":
                                                document.getElementById("DocumentViewer_editor_font_properties_leftIndent").click();
                                                break;
                                            case "Center":
                                                document.getElementById("DocumentViewer_editor_font_properties_centerIndent").click();
                                                break;
                                            case "Right":
                                                document.getElementById("DocumentViewer_editor_font_properties_rightIndent").click();
                                                break;
                                            case "Justified":
                                                document.getElementById("DocumentViewer_editor_font_properties_justify").click();
                                                break;
                                            case "Increase indent":
                                                document.getElementById("DocumentViewer_editor_font_properties_increaseIndent").click();
                                                break;
                                            case "Decrease indent":
                                                document.getElementById("DocumentViewer_editor_font_properties_decreaseIndent").click();
                                                break;
                                            case "Single":
                                                lineHeight.trigger('select', { item: lineHeight.items[0] });
                                                break;
                                            case "1.15":
                                                lineHeight.trigger('select', { item: lineHeight.items[1] });
                                                break;
                                            case "1.5":
                                                lineHeight.trigger('select', { item: lineHeight.items[2] });
                                                break;
                                            case "Double":
                                                lineHeight.trigger('select', { item: lineHeight.items[3] });
                                                break;
                                            case "None":
                                                this.wordDocumentObj.textProperties.paragraph.numberedNoneClick();
                                                break;
                                            case "Bullet dot":
                                                this.wordDocumentObj.textProperties.paragraph.bulletDotClick();
                                                break;
                                            case "Bullet circle":
                                                this.wordDocumentObj.textProperties.paragraph.bulletCircleClick();
                                                break;
                                            case "Bullet square":
                                                this.wordDocumentObj.textProperties.paragraph.bulletSquareClick();
                                                break;
                                            case "Bullet flower":
                                                this.wordDocumentObj.textProperties.paragraph.bulletFlowerClick();
                                                break;
                                            case "Bullet arrow":
                                                this.wordDocumentObj.textProperties.paragraph.bulletArrowClick();
                                                break;
                                            case "Bullet tick":
                                                this.wordDocumentObj.textProperties.paragraph.bulletTickClick();
                                                break;
                                            case "Numbers":
                                                this.wordDocumentObj.textProperties.paragraph.numberedNumberDotClick();
                                                break;
                                            case "Lower case":
                                                this.wordDocumentObj.textProperties.paragraph.numberedLowLetterClick();
                                                break;
                                            case "Upper case":
                                                this.wordDocumentObj.textProperties.paragraph.numberedUpLetterClick();
                                                break;
                                            case "roman":
                                                this.wordDocumentObj.textProperties.paragraph.numberedLowRomanClick();
                                                break;
                                            case "roman two":
                                                this.wordDocumentObj.textProperties.paragraph.numberedUpRomanClick();
                                                break;
                                            case "No numbering":
                                                this.wordDocumentObj.textProperties.paragraph.numberedNoneClick();
                                                break;
                                            case "Normal":
                                                this.wordDocumentObj.documentEditor.editorModule.applyStyle('Normal', true);
                                                break;
                                            case "Heading 1":
                                                this.wordDocumentObj.documentEditor.editorModule.applyStyle('Heading 1', true);
                                                break;
                                            case "Heading 2":
                                                this.wordDocumentObj.documentEditor.editorModule.applyStyle('Heading 2', true);
                                                break;
                                            case "Heading 3":
                                                this.wordDocumentObj.documentEditor.editorModule.applyStyle('Heading 3', true);
                                                break;
                                            case "Heading 4":
                                                this.wordDocumentObj.documentEditor.editorModule.applyStyle('Heading 4', true);
                                                break;
                                            case "Heading 5":
                                                this.wordDocumentObj.documentEditor.editorModule.applyStyle('Heading 5', true);
                                                break;
                                            case "Heading 6":
                                                this.wordDocumentObj.documentEditor.editorModule.applyStyle('Heading 6', true);
                                                break;
                                            case "8":
                                                this.setFontSize('8');
                                                break;
                                            case "9":
                                                this.setFontSize('9');
                                                break;
                                            case "10":
                                                this.setFontSize('10');
                                                break;
                                            case "11":
                                                this.setFontSize('11');
                                                break;
                                            case "12":
                                                this.setFontSize('12');
                                                break;
                                            case "14":
                                                this.setFontSize('14');
                                                break;
                                            case "16":
                                                this.setFontSize('16');
                                                break;
                                            case "18":
                                                this.setFontSize('18');
                                                break;
                                            case "20":
                                                this.setFontSize('20');
                                                break;
                                            case "22":
                                                this.setFontSize('22');
                                                break;
                                            case "24":
                                                this.setFontSize('24');
                                                break;
                                            case "36":
                                                this.setFontSize('36');
                                                break;
                                            case "Find":
                                                this.wordDocumentObj.toolbarModule.clickHandler({ item: { id: this.wordDocumentObj.element.id + "_toolbar_find" }, name: "clicked", originalEvent: { target: this.wordDocumentObj.element } });
                                                break;
                                            case "Comments":
                                                this.wordDocumentObj.toolbarModule.clickHandler({ item: { id: this.wordDocumentObj.element.id + "_toolbar_comment" }, name: "clicked", originalEvent: { target: this.wordDocumentObj.element } });
                                                break;
                                            case "Track Changes":
                                                this.wordDocumentObj.toolbarModule.clickHandler({ item: { id: this.wordDocumentObj.element.id + "_toolbar_track" }, name: "clicked", originalEvent: { target: this.wordDocumentObj.element } });
                                                break;
                                            case "Local ClipBoard":
                                                this.wordDocumentObj.toolbarModule.clickHandler({ item: { id: this.wordDocumentObj.element.id + "_toolbar_use_local_clipboard" }, name: "clicked", originalEvent: { target: this.wordDocumentObj.element } });
                                                break;
                                            case "Read Only":
                                                var ele = $('li[aria-label="Read Only"]').children('span').toggleClass('Selection');
                                                const value = 12;
                                                this.wordDocumentObj.toolbarModule.toggleEditing();
                                                break;
                                            case "Protections":
                                                this.wordDocumentObj.toolbarModule.documentEditor.documentHelper.restrictEditingPane.showHideRestrictPane(true);
                                                break;
                                            case "Text Form":
                                                this.wordDocumentObj.toolbarModule.documentEditor.editor.insertFormField('Text');
                                                break;
                                            case "Check Box":
                                                this.wordDocumentObj.toolbarModule.documentEditor.editor.insertFormField('CheckBox');
                                                break;
                                            case "Drop-Down":
                                                this.wordDocumentObj.toolbarModule.documentEditor.editor.insertFormField('DropDown');
                                                break;
                                            case "Update Fields":
                                                this.wordDocumentObj.toolbarModule.clickHandler({ item: { id: this.wordDocumentObj.element.id + "_toolbar_update_fields" }, name: "clicked", originalEvent: { target: this.wordDocumentObj.element } });
                                                break;
                                        }
                                    },
                                    items: menuItems,
                                }, '#menu');
                            }
                        }
                        addOrRemoveSelectIcon(ele) {
                            if (!ele.element.firstElementChild.classList.contains("biz-ss-selecticon")) {
                                ele.element.firstElementChild.classList.add("biz-ss-selecticon");
                            }
                        }
                        processNewWord() {
                            Unibase.Platform.Helpers.FileCacheHelper.Instance().loadJsFile("apps/collaboration/components/common/util.js", () => {
                                let urlStr = Unibase.Apps.Collaboration.Components.Common.Util.Instance().makeid(40);
                                window.open(window.origin + "#/documents/" + urlStr + "/newword/0");
                            });
                        }
                        renderOpenNewDialogue() {
                            this.OpenSelectButton = new ej.buttons.Button({ cssClass: `e-flat` });
                            this.OpenCancelButton = new ej.buttons.Button({ cssClass: `e-flat` });
                            var elem = document.getElementById("opendocfile");
                            if (elem == null) {
                                this.docOpenDialougObj = new ej.popups.Dialog({
                                    isModal: true,
                                    header: 'Open File',
                                    content: `<div id='tabobjforopendoc'></div>`,
                                    target: document.getElementById("container"),
                                    width: '470px',
                                    height: '330px',
                                    animationSettings: { effect: 'Zoom' },
                                    cssClass: "biz-doc-importopen-dialog"
                                });
                                this.docOpenDialougObj.appendTo('#dialog');
                                var tabObjForOpen = new ej.navigations.Tab({
                                    items: [{
                                            header: { 'text': 'Upload' },
                                            content: `<div id="opendocfile-wrapper">
                                        <h2 style="color: #ccc">Drag a file...</h2>
                                        <label id='opendocfilelable'>
                                            select file from device
                                            <br>
                                        <input type="file" name="" id="opendocfile" accept=".doc, .docx, .txt , .rtf" placeholder="select a file from your device" >
                                        </label>
                                            <div id="filename"></div>
                                        </div>

                                        </div>
                                        <button id='opendocfile-select-btn' class='e-disabled'>select</button>
                                        <button  id='opendocfile-cancel-btn'>cancel</button>`
                                        }]
                                });
                                tabObjForOpen.appendTo('#tabobjforopendoc');
                            }
                            else {
                                this.docOpenDialougObj.show();
                            }
                            this.importOpenDialogcreated();
                        }
                        importOpenDialogcreated() {
                            document.getElementById('opendocfile-select-btn').setAttribute("disabled", 'true');
                            document.getElementById('opendocfile-select-btn').addEventListener('click', () => {
                                this.openWordDocument();
                                this.docOpenDialougObj.hide();
                            });
                            document.getElementById('opendocfile-cancel-btn').addEventListener('click', () => {
                                this.docOpenDialougObj.hide();
                                document.getElementById('opendocfile-select-btn').classList.add('e-disabled');
                                document.getElementById('filename').innerHTML = "";
                                this.importedFile.value = null;
                                if (this.docOpenDialougObj) {
                                    this.docOpenDialougObj.destroy();
                                }
                            });
                            this.OpenSelectButton.appendTo('#opendocfile-select-btn');
                            this.OpenCancelButton.appendTo('#opendocfile-cancel-btn');
                            document.body.addEventListener('dragover', (e) => {
                                e.preventDefault();
                            });
                            document.getElementsByClassName('biz-doc-importopen-dialog')[0].addEventListener('dragover', (e) => {
                                e.preventDefault();
                            });
                            document.getElementsByClassName('biz-doc-importopen-dialog')[0].addEventListener("drop", (e) => {
                                e.preventDefault();
                                document.getElementById('opendocfile').files = e.dataTransfer.files;
                                var ele = { target: { files: e.dataTransfer.files } };
                                this.fileSelected(ele);
                            });
                            document.getElementById('opendocfile').addEventListener('change', (e) => {
                                debugger;
                                this.fileSelected(e);
                            });
                        }
                        fileSelected(e) {
                            document.getElementById('opendocfile-select-btn').removeAttribute('disabled');
                            document.getElementById('opendocfile-select-btn').classList.remove('e-disabled');
                            this.importedFile = document.getElementById('opendocfile');
                            document.getElementById('filename').innerHTML = this.importedFile.files[0].name;
                            Unibase.Platform.Helpers.FileCacheHelper.Instance().loadJsFile('platform/core/helpers/file/filehelper.js', () => {
                                Unibase.Platform.Helpers.FileHelper.Instance().getBase64(e).then((response) => {
                                    if (Unibase.Themes.Providers.Detail_Settings.Instance().InputParameters.length != 0) {
                                        var InstalledAppId = Unibase.Themes.Providers.DetailHelper.installedAppId;
                                        var refId = Number(Unibase.Themes.Providers.Detail_Settings.Instance().InputParameters.find(x => x.Key == "hf_" + InstalledAppId + "_recordid").Value);
                                        if (refId != 0 && refId != null && refId != undefined) {
                                        }
                                    }
                                    var fileobject = {
                                        filedata: response.FileData,
                                        filename: response.FileName,
                                        filetype: response.FileType,
                                        RefId: refId,
                                        FileId: this.FileId,
                                    };
                                    this.documentOpenFileData = fileobject;
                                });
                            });
                        }
                        openWordDocument() {
                            Unibase.Apps.Collaboration.DocumentManager.Instance().importCreateSpreadSheet(this.documentOpenFileData).then((response) => {
                                var result = response.result;
                            });
                        }
                        closePopup() {
                            if (!this.docBase.NewDocument) {
                                Unibase.Apps.Collaboration.Components.DocConnector.Instance().closeDoc();
                            }
                            window.close();
                        }
                        appendToolbarElements() {
                            let sideBarElementsText = [];
                            let sideBarElementsIndent = [];
                            let sideBarElementsParagraph = [];
                            var idsText = ['DocumentViewer_editor_font_properties_fontFamilyDiv', 'DocumentViewer_editor_font_properties_fontSizeDiv', 'DocumentViewer_editor_font_properties_leftDiv',
                                'DocumentViewer_editor_font_properties_rightDiv'];
                            let idsParagraph = ['DocumentViewer_editor_font_properties_color', 'DocumentViewer_editor_font_properties_styleDiv'];
                            var idsIndent = ['DocumentViewer_editor_font_properties_leftIndent', 'DocumentViewer_editor_font_properties_centerIndent', 'DocumentViewer_editor_font_properties_rightIndent', 'DocumentViewer_editor_font_properties_justify',
                                'DocumentViewer_editor_font_properties_decreaseIndent', 'DocumentViewer_editor_font_properties_increaseIndent', 'DocumentViewer_editor_font_properties_lineHeight',
                                'DocumentViewer_editor_font_properties_listDropDiv'];
                            idsText.forEach(element => {
                                sideBarElementsText.push(document.getElementById(element));
                            });
                            idsIndent.forEach(element => {
                                sideBarElementsIndent.push(document.getElementById(element));
                            });
                            idsParagraph.forEach(element => {
                                sideBarElementsParagraph.push(document.getElementById(element));
                            });
                            sideBarElementsText.forEach(element => {
                                this.util.appendChildren('biz-doc-bottomtoolbar-text', 0, element);
                            });
                            sideBarElementsIndent.forEach(element => {
                                this.util.appendChildren('biz-doc-bottomtoolbar-indent', 0, element);
                            });
                            sideBarElementsParagraph.forEach(element => {
                                this.util.appendChildren('biz-doc-bottomtoolbar-paragraph', 0, element);
                            });
                            this.docBase.bottomtoolbartext = document.getElementsByClassName('biz-doc-bottomtoolbar-text')[0];
                            this.util.appendChildren('biz-doc-bottomtoolbar-undoredo', 0, this.util.createElement("button", 'class', 'biz-doc-undo e-disabled e-btn e-lib'));
                            this.util.appendChildren('biz-doc-undo', 0, this.util.createElement("span", 'class', 'e-icons e-icon-left  biz-doc-undo-icon e-btn-icon'));
                            this.util.appendChildren('biz-doc-bottomtoolbar-undoredo', 0, this.util.createElement("button", 'class', 'biz-doc-redo e-disabled e-btn e-lib'));
                            this.util.appendChildren('biz-doc-redo', 0, this.util.createElement("span", 'class', 'e-icons e-icon-left biz-doc-redo-icon e-btn-icon'));
                            document.getElementsByClassName("biz-doc-undo")[0].id = "biz_doc_undobtn";
                            document.getElementsByClassName("biz-doc-redo")[0].id = "biz_doc_redobtn";
                            this.docBase.bottomtoolbartext.insertBefore(this.util.createElement('div', 'class', 'biz-doc-toobarspace'), document.getElementsByClassName('biz-doc-bottomtoolbar-text')[0].childNodes[0]);
                            this.docBase.bottomtoolbartext.insertBefore(this.util.createElement('div', 'class', 'biz-doc-toobarspace'), document.getElementsByClassName('biz-doc-bottomtoolbar-text')[0].childNodes[2]);
                            document.getElementsByClassName('biz-doc-bottomtoolbar-indent')[0].insertBefore(this.util.createElement('div', 'class', 'biz-doc-toobarspace'), document.getElementsByClassName('biz-doc-bottomtoolbar-indent')[0].childNodes[0]);
                            document.getElementById('biz_doc_undobtn').insertBefore(this.util.createElement('div', 'class', 'biz-doc-toobarspace'), document.getElementById('biz_doc_undobtn').childNodes[0]);
                            document.getElementById('DocumentViewer_editor_font_properties_increaseIndent').after(this.util.createElement('div', 'class', 'biz-doc-toobarspace'));
                            document.getElementById('DocumentViewer_editor_font_properties_clearFormat').after(this.util.createElement('div', 'class', 'biz-doc-toobarspace'));
                            document.getElementById('DocumentViewer_editor_font_properties_fontSizeDiv').after(this.util.createElement('div', 'class', 'e-toolbar-item e-separator biz-doc-seperator'));
                            document.getElementById('DocumentViewer_editor_font_properties_rightDiv').after(this.util.createElement('div', 'class', 'e-toolbar-item e-separator biz-doc-seperator'));
                            document.getElementById('DocumentViewer_editor_font_properties_styleDiv').after(this.util.createElement('div', 'class', 'e-toolbar-item e-separator biz-doc-seperator'));
                            document.getElementById('DocumentViewer_editor_font_properties_lineHeight').after(this.util.createElement('div', 'class', 'e-toolbar-item e-separator biz-doc-seperator'));
                            document.getElementById('DocumentViewer_editor_font_properties_color').getElementsByClassName("e-colorpicker-wrapper")[0].after(this.util.createElement('div', 'class', 'e-toolbar-item e-separator biz-doc-seperator'));
                            this.util.appendChildren('biz-doc-bottomtoolbar-undoredo', 0, this.util.createElement("button", 'class', 'biz-doc-undo e-disabled e-btn e-lib'));
                            this.util.appendChildren('biz-doc-undo', 0, this.util.createElement("span", 'class', 'e-icons e-icon-left  biz-doc-undo-icon e-btn-icon'));
                            this.util.appendChildren('biz-doc-bottomtoolbar-undoredo', 0, this.util.createElement("button", 'class', 'biz-doc-redo e-disabled e-btn e-lib'));
                            this.util.appendChildren('biz-doc-redo', 0, this.util.createElement("span", 'class', 'e-icons e-icon-left biz-doc-redo-icon e-btn-icon'));
                            this.docBase.toolbarWidth = document.querySelector('.biz-doc-bottomtoolbar-undoredo').getBoundingClientRect().width + document.querySelector('.biz-doc-bottomtoolbar-text').getBoundingClientRect().width + document.querySelector('.biz-doc-bottomtoolbar-paragraph').getBoundingClientRect().width + document.querySelector('.biz-doc-bottomtoolbar-indent').getBoundingClientRect().width;
                        }
                        createResponsiveToolbar() {
                            var instance = this;
                            document.getElementsByClassName('biz-doc-bottomtoolbar')[0].insertBefore(this.util.createElement('div', 'class', 'leftarrow-wrapper'), document.getElementsByClassName('biz-doc-bottomtoolbar')[0].childNodes[0]);
                            document.getElementsByClassName('biz-doc-bottomtoolbar')[0].appendChild(this.util.createElement('div', 'class', 'rightarrow-wrapper'));
                            document.getElementsByClassName('leftarrow-wrapper')[0].appendChild(this.util.createElement('button', 'id', 'leftarrow-btn'));
                            document.getElementsByClassName('rightarrow-wrapper')[0].appendChild(this.util.createElement('button', 'id', 'rightarrow-btn'));
                            this.docBase.rightArrowBtn = document.getElementById('rightarrow-btn');
                            this.docBase.leftArrowBtn = document.getElementById('leftarrow-btn');
                            this.docBase.leftArrowWrapper = document.getElementsByClassName('leftarrow-wrapper')[0];
                            this.docBase.rightArrowWrapper = document.getElementsByClassName('rightarrow-wrapper')[0];
                            this.docBase.toolbarWrapper = document.getElementsByClassName('biz-doc-toolbar-wrapper')[0];
                            this.docBase.rightArrowBtn.classList.add('e-icons');
                            this.docBase.rightArrowBtn.classList.add('biz_right_arrow');
                            this.docBase.leftArrowBtn.classList.add('e-icons');
                            this.docBase.leftArrowBtn.classList.add('biz_left_arrow');
                            this.docBase.leftArrowBtn.classList.add('e-disabled');
                            this.docBase.leftArrowWrapper.style.display = 'none';
                            this.docBase.rightArrowWrapper.style.display = 'none';
                            this.setToolbarWidth();
                            this.docBase.rightArrowBtn.addEventListener('click', () => {
                                this.docBase.toolbarWrapper.scrollBy({
                                    top: 0,
                                    left: 300,
                                    behavior: "smooth"
                                });
                                this.docBase.leftArrowBtn.classList.remove('e-disabled');
                            });
                            this.docBase.leftArrowBtn.addEventListener('click', () => {
                                this.docBase.toolbarWrapper.scrollBy({
                                    top: 0,
                                    left: -300,
                                    behavior: "smooth"
                                });
                                this.docBase.rightArrowBtn.classList.remove('e-disabled');
                            });
                            this.docBase.toolbarWrapper.addEventListener('scroll', () => {
                                if (this.docBase.toolbarWrapper.scrollWidth - this.docBase.toolbarWrapper.scrollLeft - this.docBase.toolbarWrapper.clientWidth < 1) {
                                    this.docBase.rightArrowBtn.classList.add("e-disabled");
                                }
                                else if (this.docBase.toolbarWrapper.scrollLeft == 0) {
                                    this.docBase.leftArrowBtn.classList.add("e-disabled");
                                }
                            });
                            window.addEventListener('resize', () => {
                                this.setToolbarWidth();
                            });
                        }
                        setDisplay(value) {
                            this.docBase.leftArrowWrapper.style.display = value;
                            this.docBase.rightArrowWrapper.style.display = value;
                        }
                        getBtnsWidth() {
                            return document.getElementsByClassName('leftarrow-wrapper')[0].getBoundingClientRect().width + document.getElementsByClassName('rightarrow-wrapper')[0].getBoundingClientRect().width;
                        }
                        setToolbarWidth() {
                            if (window.innerWidth <= this.docBase.toolbarWidth + this.getBtnsWidth()) {
                                this.setDisplay('');
                                this.docBase.toolbarWrapper.style.width = 'calc(100% - 72px)';
                            }
                            else {
                                this.setDisplay('none');
                                this.docBase.toolbarWrapper.style.width = this.docBase.toolbarWidth + 3 + 'px';
                            }
                        }
                        static Instance() {
                            if (this.instance === undefined) {
                                this.instance = new Ribbon();
                            }
                            return this.instance;
                        }
                    }
                    DocEditor.Ribbon = Ribbon;
                })(DocEditor = Components.DocEditor || (Components.DocEditor = {}));
            })(Components = Collaboration.Components || (Collaboration.Components = {}));
        })(Collaboration = Apps.Collaboration || (Apps.Collaboration = {}));
    })(Apps = Unibase.Apps || (Unibase.Apps = {}));
})(Unibase || (Unibase = {}));