var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Component, Property, NotifyPropertyChanges, L10n, Complex, isNullOrUndefined, formatUnit } from '@syncfusion/ej2-base';
import { Event } from '@syncfusion/ej2-base';
import { DocumentEditor, DocumentEditorSettings, DocumentSettings } from '../document-editor/document-editor';
import { HeaderFooterProperties } from './properties-pane/header-footer-pane';
import { ImageProperties } from './properties-pane/image-properties-pane';
import { TocProperties } from './properties-pane/table-of-content-pane';
import { TableProperties } from './properties-pane/table-properties-pane';
import { StatusBar } from './properties-pane/status-bar';
import { createSpinner } from '@syncfusion/ej2-popups';
import { beforeAutoResize, internalAutoResize, internalZoomFactorChange, beforeCommentActionEvent, commentDeleteEvent, contentChangeEvent, trackChangeEvent, beforePaneSwitchEvent, serviceFailureEvent, documentChangeEvent, selectionChangeEvent, customContextMenuSelectEvent, customContextMenuBeforeOpenEvent, internalviewChangeEvent, beforeXmlHttpRequestSend, protectionTypeChangeEvent, internalDocumentEditorSettingsChange, internalStyleCollectionChange, revisionActionEvent, trackChanges, internalOptionPaneChange, beforePaste, internalAsyncPagesVisible } from '../document-editor/base/constants';
import { HelperMethods } from '../index';
import { SanitizeHtmlHelper } from '@syncfusion/ej2-base';
import { DialogUtility } from '@syncfusion/ej2-popups';
import { defaultLocaleStrings } from './locale-strings';
/**
 * Document Editor container component.
 */
var DocumentEditorContainer = /** @class */ (function (_super) {
    __extends(DocumentEditorContainer, _super);
    /**
     * Initializes a new instance of the DocumentEditorContainer class.
     *
     * @param { DocumentEditorContainerModel } options Specifies the DocumentEditorContainer model as options.
     * @param { string | HTMLElement } element Specifies the element that is rendered as a DocumentEditorContainer.
     */
    function DocumentEditorContainer(options, element) {
        var _this = _super.call(this, options, element) || this;
        /**
         * @private
         */
        _this.previousContext = '';
        /**
         * @private
         */
        _this.showHeaderProperties = true;
        /**
         * This will hold the value of showPropertiesPane during initial rendering or whenever the propertyChange occurs
         *
         * @private
         */
        _this.showPane = true;
        /**
         * default locale
         *
         * @private
         */
        _this.defaultLocale = defaultLocaleStrings;
        return _this;
    }
    Object.defineProperty(DocumentEditorContainer.prototype, "documentEditor", {
        /* eslint-enable */
        /**
         * Gets the DocumentEditor instance.
         *
         * @aspType DocumentEditor
         * @returns {DocumentEditor} Returns the DocumentEditor instance.
         */
        get: function () {
            return this.documentEditorInternal;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DocumentEditorContainer.prototype, "toolbar", {
        /**
         * Gets the toolbar instance.
         *
         * @returns {Toolbar} Returns the toolbar module.
         */
        get: function () {
            return this.toolbarModule;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DocumentEditorContainer.prototype, "ribbon", {
        /**
         * Gets the ribbon instance.
         *
         * @returns {Ribbon} Returns the ribbon module.
         */
        get: function () {
            return this.ribbonModule;
        },
        enumerable: true,
        configurable: true
    });
    /* eslint-enable @typescript-eslint/naming-convention */
    /**
     * @private
     * @returns {string} Returns the DocumentEditorContainer module name.
     */
    DocumentEditorContainer.prototype.getModuleName = function () {
        return 'DocumentEditorContainer';
    };
    Object.defineProperty(DocumentEditorContainer.prototype, "toolbarHandler", {
        // Create a property to hold the current toolbar handler
        get: function () {
            if (this.toolbarMode === 'Ribbon') {
                return this.ribbonModule;
            }
            else {
                return this.toolbarModule;
            }
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @private
     */
    /* eslint-disable  */
    DocumentEditorContainer.prototype.onPropertyChanged = function (newModel, oldModel) {
        for (var _i = 0, _a = Object.keys(newModel); _i < _a.length; _i++) {
            var prop = _a[_i];
            switch (prop) {
                case 'restrictEditing':
                    this.restrictEditingToggleHelper(newModel.restrictEditing);
                    break;
                case 'showPropertiesPane':
                    this.showHidePropertiesPane(newModel.showPropertiesPane);
                    this.showPane = this.showPropertiesPane;
                    break;
                case 'enableTrackChanges':
                    if (this.documentEditor.documentHelper.isTrackedOnlyMode && !newModel.enableTrackChanges && newModel.enableTrackChanges !== this.enableTrackChanges) {
                        this.enableTrackChanges = true;
                    }
                    if (this.documentEditor) {
                        this.documentEditor.enableTrackChanges = newModel.enableTrackChanges;
                        if (this.toolbarHandler) {
                            this.toolbarHandler.toggleTrackChanges(newModel.enableTrackChanges);
                        }
                        this.documentEditor.resize();
                    }
                    break;
                case 'enableLocalPaste':
                    if (this.documentEditor) {
                        this.documentEditor.enableLocalPaste = newModel.enableLocalPaste;
                    }
                    break;
                case 'serviceUrl':
                    if (this.documentEditor) {
                        this.documentEditor.serviceUrl = newModel.serviceUrl;
                    }
                    break;
                case 'serverActionSettings':
                    if (this.documentEditor) {
                        this.setserverActionSettings();
                    }
                    break;
                case 'zIndex':
                    if (this.documentEditor) {
                        this.documentEditor.zIndex = newModel.zIndex;
                    }
                    break;
                case 'headers':
                    if (this.documentEditor) {
                        this.documentEditor.headers = newModel.headers;
                    }
                    break;
                case 'locale':
                case 'enableRtl':
                    this.refresh();
                    break;
                case 'enableComment':
                    if (this.documentEditor) {
                        this.documentEditor.enableComment = newModel.enableComment;
                    }
                    if (this.toolbarHandler) {
                        this.toolbarHandler.enableDisableInsertComment(newModel.enableComment);
                    }
                    break;
                case 'enableSpellCheck':
                    if (this.documentEditor) {
                        this.documentEditor.enableSpellCheck = newModel.enableSpellCheck;
                    }
                    break;
                case 'documentSettings':
                    if (this.documentEditor) {
                        this.documentEditor.documentSettings.compatibilityMode = this.documentSettings.compatibilityMode;
                    }
                    break;
                case 'documentEditorSettings':
                    if (this.documentEditor) {
                        this.customizeDocumentEditorSettings();
                    }
                    if (!isNullOrUndefined(newModel.documentEditorSettings.fontFamilies)) {
                        var fontFamilyValue = newModel.documentEditorSettings.fontFamilies;
                        this.refreshFontFamilies(fontFamilyValue);
                    }
                    break;
                case 'toolbarItems':
                    if (this.toolbarModule) {
                        this.toolbarModule.reInitToolbarItems(newModel.toolbarItems);
                    }
                    break;
                case 'currentUser':
                    if (this.documentEditor) {
                        this.documentEditor.currentUser = newModel.currentUser;
                    }
                    break;
                case 'userColor':
                    if (this.documentEditor) {
                        this.documentEditor.userColor = newModel.userColor;
                    }
                    break;
                case 'layoutType':
                    if (this.documentEditor) {
                        if (this.documentEditor.documentHelper.isDocumentLoadAsynchronously) {
                            break;
                        }
                        this.documentEditor.layoutType = newModel.layoutType;
                        if (newModel.layoutType === 'Continuous') {
                            this.statusBar.togglePageLayout();
                        }
                        else {
                            this.statusBar.toggleWebLayout();
                        }
                        if (this.ribbon) {
                            this.ribbon.tabManager.viewTab.onSelectionChange();
                        }
                    }
                    break;
                case 'toolbarMode':
                case 'enableToolbar':
                    this.handleToolbarModeChange();
                    break;
                case 'height':
                    this.element.style.height = formatUnit(this.height);
                    if (this.documentEditor) {
                        this.documentEditor.resize();
                    }
                    this.resize();
                    break;
                case 'width':
                    this.element.style.width = formatUnit(this.width);
                    if (this.documentEditor) {
                        this.documentEditor.resize();
                    }
                    break;
                case 'enableAutoFocus':
                    if (this.documentEditor) {
                        this.documentEditor.enableAutoFocus = newModel.enableAutoFocus;
                    }
                    break;
                case 'autoResizeOnVisibilityChange':
                    if (this.documentEditor) {
                        this.documentEditor.autoResizeOnVisibilityChange = newModel.autoResizeOnVisibilityChange;
                    }
                    break;
                case 'backstageMenu':
                    if (this.ribbonModule) {
                        this.ribbonModule.backstageMenu = newModel.backstageMenu;
                        this.ribbonModule.ribbon.refresh();
                    }
                    break;
                case 'fileMenuItems':
                    if (this.ribbonModule) {
                        this.ribbonModule.fileMenuItems = newModel.fileMenuItems;
                        this.ribbonModule.ribbon.refresh();
                    }
                    break;
            }
        }
    };
    DocumentEditorContainer.prototype.handleToolbarModeChange = function () {
        this.createToolbarContainer(this.enableRtl, true);
        if (this.toolbarHandler) {
            this.toolbarHandler.initialize(true);
        }
        if (this.documentEditor) {
            this.documentEditor.resize();
        }
    };
    /**
     * @private
     */
    DocumentEditorContainer.prototype.preRender = function () {
        this.localObj = new L10n('documenteditorcontainer', this.defaultLocale, this.locale);
        if (!isNullOrUndefined(this.element) && this.element.id === '') {
            //Set unique id, if id is empty
            this.element.id = HelperMethods.getUniqueElementId();
        }
        this.initContainerElement();
    };
    /**
     * @private
     */
    DocumentEditorContainer.prototype.render = function () {
        this.setIsModalDialogValue();
        if (this.toolbarHandler) {
            this.toolbarHandler.initialize();
        }
        if (this.height !== '') {
            this.element.style.height = formatUnit(this.height);
        }
        if (this.width !== '') {
            this.element.style.width = formatUnit(this.width);
        }
        this.element.style.minHeight = '320px';
        this.initializeDocumentEditor();
        if (this.restrictEditing) {
            this.restrictEditingToggleHelper(this.restrictEditing);
        }
        if (this.toolbarMode !== 'Ribbon') {
            this.initializePane();
        }
        this.statusBar = new StatusBar(this.statusBarElement, this);
        // Waiting popup
        createSpinner({ target: this.containerTarget, cssClass: 'e-spin-overlay' });
        this.setserverActionSettings();
        this.renderComplete();
    };
    DocumentEditorContainer.prototype.setIsModalDialogValue = function () {
        if (this.isAngular && !isNullOrUndefined(this.element.closest('.cdk-overlay-pane'))) {
            this.isModalDialog = true;
        }
    };
    /**
     * @return {void}
     * @private
     */
    DocumentEditorContainer.prototype.initializePane = function () {
        if (!this.headerFooterProperties) {
            this.headerFooterProperties = new HeaderFooterProperties(this, this.enableRtl);
        }
        if (!this.imageProperties) {
            this.imageProperties = new ImageProperties(this, this.enableRtl);
        }
        if (!this.tocProperties) {
            this.tocProperties = new TocProperties(this, this.enableRtl);
        }
        if (!this.tableProperties) {
            this.tableProperties = new TableProperties(this, this.imageProperties, this.enableRtl);
        }
    };
    /**
     * @return {void}
     * @private
     */
    DocumentEditorContainer.prototype.destroyPane = function () {
        if (this.headerFooterProperties) {
            this.headerFooterProperties.destroy();
            this.headerFooterProperties = undefined;
        }
        if (this.imageProperties) {
            this.imageProperties.destroy();
            this.imageProperties = undefined;
        }
        if (this.tocProperties) {
            this.tocProperties.destroy();
            this.tocProperties = undefined;
        }
        if (this.tableProperties) {
            this.tableProperties.destroy();
            this.tableProperties = undefined;
        }
        if (this.propertiesPaneContainer) {
            this.propertiesPaneContainer.parentElement.removeChild(this.propertiesPaneContainer);
            this.propertiesPaneContainer = undefined;
        }
    };
    DocumentEditorContainer.prototype.restrictEditingToggleHelper = function (restrictEditing) {
        this.documentEditor.isReadOnly = restrictEditing;
        if (this.toolbarHandler) {
            this.toolbarHandler.restrictEditingToggleHelper(restrictEditing);
        }
        if (this.showPane && this.toolbarMode !== 'Ribbon') {
            this.showPropertiesPane = !restrictEditing;
            this.showHidePropertiesPane(!restrictEditing);
        }
        this.documentEditor.trackChangesPane.enableDisableButton(!restrictEditing && !this.documentEditor.documentHelper.isDocumentProtected);
    };
    DocumentEditorContainer.prototype.setFormat = function () {
        if (this.characterFormat && this.documentEditor) {
            this.documentEditor.setDefaultCharacterFormat(this.characterFormat);
        }
        if (this.paragraphFormat && this.documentEditor) {
            this.documentEditor.setDefaultParagraphFormat(this.paragraphFormat);
        }
        if (this.sectionFormat && this.documentEditor) {
            this.documentEditor.setDefaultSectionFormat(this.sectionFormat);
        }
        if (this.documentParagraphFormat && this.documentEditor) {
            this.documentEditor.setDocumentParagraphFormat(this.documentParagraphFormat);
        }
        if (this.documentCharacterFormat && this.documentEditor) {
            this.documentEditor.setDocumentCharacterFormat(this.documentCharacterFormat);
        }
    };
    DocumentEditorContainer.prototype.setserverActionSettings = function () {
        if (this.serviceUrl) {
            this.documentEditor.serviceUrl = HelperMethods.sanitizeString(this.serviceUrl);
        }
        if (this.serverActionSettings.spellCheck) {
            this.documentEditor.serverActionSettings.spellCheck = HelperMethods.sanitizeString(this.serverActionSettings.spellCheck);
        }
        if (this.serverActionSettings.spellCheckByPage) {
            this.documentEditor.serverActionSettings.spellCheckByPage = HelperMethods.sanitizeString(this.serverActionSettings.spellCheckByPage);
        }
        if (this.serverActionSettings.restrictEditing) {
            this.documentEditor.serverActionSettings.restrictEditing = HelperMethods.sanitizeString(this.serverActionSettings.restrictEditing);
        }
        if (this.serverActionSettings.systemClipboard) {
            this.documentEditor.serverActionSettings.systemClipboard = HelperMethods.sanitizeString(this.serverActionSettings.systemClipboard);
        }
        if (this.serverActionSettings.import) {
            this.documentEditor.serverActionSettingsImport = HelperMethods.sanitizeString(this.serverActionSettings.import);
        }
        if (this.headers) {
            this.documentEditor.headers = JSON.parse(HelperMethods.sanitizeString(JSON.stringify(this.headers)));
        }
    };
    DocumentEditorContainer.prototype.customizeDocumentEditorSettings = function () {
        if (this.documentEditorSettings.formFieldSettings) {
            var settings = this.documentEditorSettings.formFieldSettings;
            var documentEditor = this.documentEditor;
            if (!isNullOrUndefined(settings.applyShading)) {
                documentEditor.documentEditorSettings.formFieldSettings.applyShading = settings.applyShading;
            }
            if (!isNullOrUndefined(settings.formFillingMode)) {
                documentEditor.documentEditorSettings.formFieldSettings.formFillingMode = settings.formFillingMode;
            }
            if (!isNullOrUndefined(settings.formattingExceptions)) {
                documentEditor.documentEditorSettings.formFieldSettings.formattingExceptions = settings.formattingExceptions;
            }
            if (!isNullOrUndefined(settings.selectionColor)) {
                documentEditor.documentEditorSettings.formFieldSettings.selectionColor = settings.selectionColor;
            }
            if (!isNullOrUndefined(settings.shadingColor)) {
                documentEditor.documentEditorSettings.formFieldSettings.shadingColor = settings.shadingColor;
            }
        }
        if (this.documentEditorSettings.searchHighlightColor) {
            this.documentEditor.documentEditorSettings.searchHighlightColor = HelperMethods.sanitizeString(this.documentEditorSettings.searchHighlightColor);
        }
        if (this.documentEditorSettings.fontFamilies) {
            this.documentEditor.documentEditorSettings.fontFamilies = JSON.parse(HelperMethods.sanitizeString(JSON.stringify(this.documentEditorSettings.fontFamilies)));
        }
        if (this.documentEditorSettings.collaborativeEditingSettings) {
            this.documentEditor.documentEditorSettings.collaborativeEditingSettings = this.documentEditorSettings.collaborativeEditingSettings;
        }
        if (this.documentEditorSettings.printDevicePixelRatio) {
            this.documentEditor.documentEditorSettings.printDevicePixelRatio = this.documentEditorSettings.printDevicePixelRatio;
        }
        if (!isNullOrUndefined(this.documentEditorSettings.enableOptimizedTextMeasuring)) {
            this.documentEditor.documentEditorSettings.enableOptimizedTextMeasuring = this.documentEditorSettings.enableOptimizedTextMeasuring;
        }
        if (!isNullOrUndefined(this.documentEditorSettings.maximumRows)) {
            this.documentEditor.documentEditorSettings.maximumRows = this.documentEditorSettings.maximumRows;
        }
        if (!isNullOrUndefined(this.documentEditorSettings.maximumColumns)) {
            this.documentEditor.documentEditorSettings.maximumColumns = this.documentEditorSettings.maximumColumns;
        }
        if (!isNullOrUndefined(this.documentEditorSettings.showHiddenMarks)) {
            this.documentEditor.documentEditorSettings.showHiddenMarks = this.documentEditorSettings.showHiddenMarks;
        }
        if (!isNullOrUndefined(this.documentEditorSettings.showBookmarks)) {
            this.documentEditor.documentEditorSettings.showBookmarks = this.documentEditorSettings.showBookmarks;
        }
        if (!isNullOrUndefined(this.documentEditorSettings.highlightEditableRanges)) {
            this.documentEditor.documentEditorSettings.highlightEditableRanges = this.documentEditorSettings.highlightEditableRanges;
        }
        if (!isNullOrUndefined(this.documentEditorSettings.allowDragAndDrop)) {
            this.documentEditor.documentEditorSettings.allowDragAndDrop = this.documentEditorSettings.allowDragAndDrop;
        }
        if (!isNullOrUndefined(this.documentEditorSettings.optimizeSfdt)) {
            this.documentEditor.documentEditorSettings.optimizeSfdt = this.documentEditorSettings.optimizeSfdt;
        }
        if (!isNullOrUndefined(this.documentEditorSettings.autoResizeSettings)) {
            this.documentEditor.documentEditorSettings.autoResizeSettings = this.documentEditorSettings.autoResizeSettings;
        }
        if (!isNullOrUndefined(this.documentEditorSettings.showRuler)) {
            this.documentEditor.documentEditorSettings.showRuler = this.documentEditorSettings.showRuler;
        }
        if (!isNullOrUndefined(this.documentEditorSettings.colorPickerSettings)) {
            this.documentEditor.documentEditorSettings.colorPickerSettings = this.documentEditorSettings.colorPickerSettings;
        }
        if (!isNullOrUndefined(this.documentEditorSettings.popupTarget)) {
            this.documentEditor.documentEditorSettings.popupTarget = this.documentEditorSettings.popupTarget;
        }
        if (!isNullOrUndefined(this.documentEditorSettings.showNavigationPane)) {
            this.documentEditor.documentEditorSettings.showNavigationPane = this.documentEditorSettings.showNavigationPane;
        }
        if (!isNullOrUndefined(this.documentEditorSettings.mentionSettings)) {
            this.documentEditor.documentEditorSettings.mentionSettings = this.documentEditorSettings.mentionSettings;
        }
        if (!isNullOrUndefined(this.documentEditorSettings.pasteAsNewParagraph)) {
            this.documentEditor.documentEditorSettings.pasteAsNewParagraph = this.documentEditorSettings.pasteAsNewParagraph;
        }
        if (!isNullOrUndefined(this.documentEditorSettings.enableScreenReader)) {
            this.documentEditor.documentEditorSettings.enableScreenReader = this.documentEditorSettings.enableScreenReader;
        }
        if (!isNullOrUndefined(this.documentEditorSettings.enableSpellCheckOnScroll)) {
            this.documentEditor.documentEditorSettings.enableSpellCheckOnScroll = this.documentEditorSettings.enableSpellCheckOnScroll;
        }
        if (!isNullOrUndefined(this.documentEditorSettings.revisionSettings)) {
            this.documentEditor.documentEditorSettings.revisionSettings = this.documentEditorSettings.revisionSettings;
        }
        if (!isNullOrUndefined(this.documentEditorSettings.openAsyncSettings)) {
            this.documentEditor.documentEditorSettings.openAsyncSettings = this.documentEditorSettings.openAsyncSettings;
        }
        if (!isNullOrUndefined(this.documentEditorSettings.allowHyphensInBookmarkNames)) {
            this.documentEditor.documentEditorSettings.allowHyphensInBookmarkNames = this.documentEditorSettings.allowHyphensInBookmarkNames;
        }
    };
    /**
     * @private
     */
    DocumentEditorContainer.prototype.getPersistData = function () {
        return 'documenteditor-container';
    };
    /* eslint-disable  */
    DocumentEditorContainer.prototype.requiredModules = function () {
        var modules = [];
        if (this.enableToolbar) {
            if (this.toolbarMode === 'Ribbon') {
                modules.push({
                    member: 'ribbon', args: [this]
                });
            }
            else {
                modules.push({
                    member: 'toolbar', args: [this]
                });
            }
        }
        return modules;
    };
    DocumentEditorContainer.prototype.initContainerElement = function () {
        // Toolbar container
        var isRtl = this.enableRtl;
        this.containerTarget = this.createElement('div', { className: 'e-de-ctn' });
        this.containerTarget.contentEditable = 'false';
        this.createToolbarContainer(isRtl);
        this.containerTarget.appendChild(this.editorContainer);
        this.statusBarElement = this.createElement('div', { className: 'e-de-status-bar' });
        if (isRtl) {
            this.statusBarElement.style.direction = 'rtl';
        }
        this.containerTarget.appendChild(this.statusBarElement);
        this.element.appendChild(this.containerTarget);
    };
    DocumentEditorContainer.prototype.initializePaneElement = function () {
        if (this.toolbarMode != 'Ribbon' && !this.propertiesPaneContainer) {
            var propertiesPaneContainerBorder = void 0;
            if (!this.enableRtl) {
                propertiesPaneContainerBorder = 'e-de-pane';
            }
            else {
                propertiesPaneContainerBorder = 'e-de-pane-rtl';
            }
            this.propertiesPaneContainer = this.createElement('div', { className: propertiesPaneContainerBorder, styles: 'display:none' });
            this.editorContainer.appendChild(this.propertiesPaneContainer);
        }
    };
    DocumentEditorContainer.prototype.createToolbarContainer = function (isRtl, isCustom) {
        var _a, _b;
        if (isNullOrUndefined((this.editorContainer))) {
            this.editorContainer = this.createElement('div', { className: 'e-de-tool-ctnr-properties-pane' + (isRtl ? ' e-de-ctnr-rtl' : '') });
        }
        if (this.enableToolbar) {
            (_a = this.editorContainer.classList).remove.apply(_a, ['e-de-tool-ctnr-properties-pane', 'e-de-ribbon-simplified-ctnr-properties-pane', 'e-de-ribbon-classic-ctnr-properties-pane']);
            if (this.toolbarMode === 'Ribbon') {
                // Create ribbon container
                this.ribbonContainer = this.createElement('div', {
                    className: 'e-de-ctnr-ribbon' + (isRtl ? ' e-de-ctnr-rtl' : '')
                    // styles: 'min-height: 150px' // Adjust height as needed
                });
                // Add to DOM
                if (isCustom) {
                    this.containerTarget.insertBefore(this.ribbonContainer, this.containerTarget.firstChild);
                }
                else {
                    this.containerTarget.appendChild(this.ribbonContainer);
                }
                if (this.ribbonLayout === 'Simplified') {
                    this.editorContainer.classList.add('e-de-ribbon-simplified-ctnr-properties-pane');
                }
                else {
                    this.editorContainer.classList.add('e-de-ribbon-classic-ctnr-properties-pane');
                }
            }
            else {
                // Original toolbar container creation
                this.toolbarContainer = this.createElement('div', {
                    className: 'e-de-ctnr-toolbar' + (isRtl ? ' e-de-ctnr-rtl' : '')
                });
                if (isCustom) {
                    this.containerTarget.insertBefore(this.toolbarContainer, this.containerTarget.firstChild);
                }
                else {
                    this.containerTarget.appendChild(this.toolbarContainer);
                }
                this.editorContainer.classList.add('e-de-tool-ctnr-properties-pane');
            }
            this.editorContainer.classList.remove('e-de-ctnr-properties-pane');
        }
        else {
            (_b = this.editorContainer.classList).remove.apply(_b, ['e-de-tool-ctnr-properties-pane', 'e-de-ribbon-simplified-ctnr-properties-pane', 'e-de-ribbon-classic-ctnr-properties-pane']);
            this.editorContainer.classList.add('e-de-ctnr-properties-pane');
        }
        this.initializePaneElement();
    };
    DocumentEditorContainer.prototype.initializeDocumentEditor = function () {
        var id = this.element.id + '_editor';
        var documentEditorTarget = this.createElement('div', { id: id, styles: 'width:100%;height:100%' });
        this.documentEditorInternal = new DocumentEditor({
            isReadOnly: false, enableRtl: this.enableRtl,
            selectionChange: this.onSelectionChange.bind(this),
            contentChange: this.onContentChange.bind(this),
            documentChange: this.onDocumentChange.bind(this),
            beforePaste: this.onBeforePaste.bind(this),
            requestNavigate: this.onRequestNavigate.bind(this),
            viewChange: this.onViewChange.bind(this),
            customContextMenuSelect: this.onCustomContextMenuSelect.bind(this),
            customContextMenuBeforeOpen: this.onCustomContextMenuBeforeOpen.bind(this),
            beforePaneSwitch: this.onBeforePaneSwitch.bind(this),
            commentBegin: this.onCommentBegin.bind(this),
            commentEnd: this.onCommentEnd.bind(this),
            commentDelete: this.onCommentDelete.bind(this),
            beforeAcceptRejectChanges: this.onBeforeAcceptRejectChanges.bind(this),
            beforeCommentAction: this.onCommentAction.bind(this),
            trackChange: this.onTrackChange.bind(this),
            serviceFailure: this.fireServiceFailure.bind(this),
            beforeXmlHttpRequestSend: this.beforeXmlHttpSend.bind(this),
            locale: this.locale,
            acceptTab: true,
            zIndex: this.zIndex,
            enableLocalPaste: this.enableLocalPaste,
            layoutType: this.layoutType,
            pageOutline: '#E0E0E0',
            currentUser: this.currentUser,
            userColor: this.userColor,
            height: '100%',
            width: '100%',
            enableTrackChanges: this.enableTrackChanges,
            showRevisions: true,
            showComments: true,
            enableLockAndEdit: this.enableLockAndEdit,
            enableAutoFocus: this.enableAutoFocus
        });
        // Pass isAngular property from container to document editor
        this.documentEditorInternal.isAngular = this.isModalDialog;
        this.wireEvents();
        this.customizeDocumentEditorSettings();
        this.documentEditor.enableAllModules();
        this.documentEditor.enableComment = this.enableComment;
        this.showPane = this.showPropertiesPane;
        this.editorContainer.insertBefore(documentEditorTarget, this.editorContainer.firstChild);
        this.setFormat();
        this.documentEditor.appendTo(documentEditorTarget);
        this.documentEditor.resize();
    };
    DocumentEditorContainer.prototype.wireEvents = function () {
        window.addEventListener('resize', this.onWindowResize.bind(this));
        this.documentEditor.on(internalZoomFactorChange, this.onZoomFactorChange, this);
        this.documentEditor.on(internalviewChangeEvent, this.onViewChange, this);
        this.documentEditor.on(protectionTypeChangeEvent, this.onProtectionChange, this);
        this.documentEditor.on(internalDocumentEditorSettingsChange, this.updateShowHiddenMarks, this);
        this.documentEditor.on(internalStyleCollectionChange, this.updateStyleCollection, this);
        this.documentEditor.on(internalAsyncPagesVisible, this.onAsyncPagesVisible, this);
        // Internal event to trigger auto resize.
        this.documentEditor.on(internalAutoResize, this.triggerAutoResize, this);
        this.documentEditor.on(beforeAutoResize, this.onBeforeAutoResize, this);
        this.documentEditor.on(trackChanges, this.onEnableTrackChanges, this);
        this.documentEditor.on(internalOptionPaneChange, this.onOptionPaneChange, this);
        this.documentEditor.on('isReadOnlyChanged', this.onReadOnlyChanged, this);
    };
    DocumentEditorContainer.prototype.onWindowResize = function () {
        if (!isNullOrUndefined(this.documentEditor)) {
            this.documentEditor.isContainerResize = true;
            this.resize();
            if (this.documentEditor.viewer.zoomType && this.documentEditor.viewer.zoomType === 'FitPageWidth') {
                this.documentEditor.fitPage('FitPageWidth');
                if (this.statusBar) {
                    this.statusBar.updateZoomContent();
                }
            }
        }
    };
    DocumentEditorContainer.prototype.onOptionPaneChange = function (args) {
        //this.documentEditorSettings.showNavigationPane = args.show;
        if (this.toolbarMode === 'Ribbon' && this.ribbonModule) {
            this.ribbonModule.tabManager.viewTab.onSelectionChange();
        }
    };
    DocumentEditorContainer.prototype.onEnableTrackChanges = function (model) {
        if (model.enableTrackChanges !== this.enableTrackChanges) {
            this.enableTrackChanges = model.enableTrackChanges;
        }
    };
    DocumentEditorContainer.prototype.onReadOnlyChanged = function (model) {
        if (model.isReadOnly !== this.restrictEditing) {
            this.restrictEditing = model.isReadOnly;
        }
    };
    DocumentEditorContainer.prototype.triggerAutoResize = function (args) {
        // Cancels the auto resize of the document editor.
        args.cancel = true;
        this.resize();
    };
    DocumentEditorContainer.prototype.onBeforeAutoResize = function (args) {
        args.element = this.element;
    };
    DocumentEditorContainer.prototype.unWireEvents = function () {
        if (isNullOrUndefined(this.documentEditor)) {
            return;
        }
        else {
            if (this.documentEditor.isDestroyed) {
                return;
            }
        }
        this.documentEditor.off(internalZoomFactorChange, this.onZoomFactorChange);
        this.documentEditor.off(internalviewChangeEvent, this.onViewChange);
        this.documentEditor.off(protectionTypeChangeEvent, this.onProtectionChange);
        this.documentEditor.off(internalDocumentEditorSettingsChange, this.updateShowHiddenMarks);
        this.documentEditor.off(internalStyleCollectionChange, this.updateStyleCollection);
        this.documentEditor.off(internalAsyncPagesVisible, this.onAsyncPagesVisible);
    };
    DocumentEditorContainer.prototype.onCommentBegin = function () {
        if (this.toolbarHandler) {
            this.toolbarHandler.enableDisableInsertComment(false);
        }
    };
    DocumentEditorContainer.prototype.onCommentEnd = function () {
        if (this.toolbarHandler) {
            this.toolbarHandler.enableDisableInsertComment(true && this.enableComment);
        }
    };
    DocumentEditorContainer.prototype.beforeXmlHttpSend = function (args) {
        this.trigger(beforeXmlHttpRequestSend, args);
    };
    DocumentEditorContainer.prototype.onCommentDelete = function (args) {
        this.trigger(commentDeleteEvent, args);
    };
    DocumentEditorContainer.prototype.onBeforeAcceptRejectChanges = function (args) {
        this.trigger(revisionActionEvent, args);
    };
    DocumentEditorContainer.prototype.onCommentAction = function (args) {
        this.trigger(beforeCommentActionEvent, args);
    };
    DocumentEditorContainer.prototype.onBeforePaste = function (args) {
        this.trigger(beforePaste, args);
    };
    DocumentEditorContainer.prototype.onTrackChange = function (args) {
        this.trigger(trackChangeEvent, args);
        if (this.toolbarHandler) {
            this.toolbarHandler.toggleTrackChanges(args.isTrackChangesEnabled);
        }
    };
    DocumentEditorContainer.prototype.onBeforePaneSwitch = function (args) {
        this.trigger(beforePaneSwitchEvent, args);
    };
    /**
     * @private
     */
    DocumentEditorContainer.prototype.fireServiceFailure = function (eventArgs) {
        this.trigger(serviceFailureEvent, eventArgs);
    };
    /**
     * @private
     */
    DocumentEditorContainer.prototype.showHidePropertiesPane = function (show) {
        if (this.showPropertiesPane) {
            this.showPropertiesPaneOnSelection();
        }
        if (this.propertiesPaneContainer) {
            this.propertiesPaneContainer.style.display = show ? 'block' : 'none';
        }
        if (this.toolbarModule) {
            this.toolbarModule.propertiesPaneButton.element.style.opacity = show ? '1' : '0.5';
        }
        this.documentEditor.resize();
    };
    DocumentEditorContainer.prototype.updateStyleCollection = function () {
        if (this.documentEditor.skipStyleUpdate) {
            return;
        }
        if (!isNullOrUndefined(this.tableProperties) && !isNullOrUndefined(this.tableProperties.tableTextProperties) && !isNullOrUndefined(this.tableProperties.tableTextProperties.paragraph)) {
            this.tableProperties.tableTextProperties.paragraph.updateStyleNames();
        }
        if (this.toolbarMode == 'Ribbon' && this.ribbon) {
            this.ribbon.tabManager.homeTab.updateStyleGallery();
        }
    };
    /**
     * Resizes the container component and its sub elements based on given size or client size.
     * @param width The width to be applied.
     * @param height The height to be applied.
     */
    DocumentEditorContainer.prototype.resize = function (width, height) {
        if (this.element) {
            if (!this.documentEditor.isContainerResize) {
                if (isNullOrUndefined(height) && this.element && this.element.parentElement) {
                    height = this.element.parentElement.clientHeight;
                }
                if (isNullOrUndefined(width) && this.element && this.element.parentElement) {
                    width = this.element.parentElement.clientWidth;
                }
                if (!isNullOrUndefined(width) && width > 200) {
                    this.width = width.toString();
                    this.element.style.width = width + 'px';
                }
                if (!isNullOrUndefined(height) && height > 200) {
                    this.height = height.toString();
                    this.element.style.height = height + 'px';
                }
            }
            if (this.documentEditor) {
                this.documentEditor.resize();
            }
            if (this.toolbarModule) {
                this.toolbarModule.toolbar.refreshOverflow();
            }
            if (this.showPropertiesPane && this.tableProperties) {
                this.tableProperties.updateTabContainerHeight();
            }
            if (this.toolbarMode == 'Ribbon' && this.ribbon && this.ribbon.ribbon.tabs[this.ribbon.ribbon.selectedTab].header === this.ribbon.localObj.getConstant('Layout')) {
                this.ribbon.tabManager.layoutTab.layoutParagraphGroup.initializeNumericTextBoxes();
                this.ribbon.tabManager.layoutTab.layoutParagraphGroup.updateSelection();
            }
        }
    };
    /**
    * @private
    */
    DocumentEditorContainer.prototype.refreshFontFamilies = function (fontFamilies) {
        if (!isNullOrUndefined(this.tableProperties) && !isNullOrUndefined(this.tableProperties.tableTextProperties) && !isNullOrUndefined(this.tableProperties.tableTextProperties.text)) {
            var text = this.tableProperties.tableTextProperties.text;
            text.fontFamily.refresh();
            for (var i = 0; i < fontFamilies.length; i++) {
                var fontValue = fontFamilies[i];
                var fontStyleValue = { 'FontName': fontValue, 'FontValue': fontValue };
                text.fontFamily.addItem(fontStyleValue, i);
            }
        }
    };
    /**
     * @private
     */
    DocumentEditorContainer.prototype.onContentChange = function (args) {
        if (this.toolbarHandler) {
            this.toolbarHandler.onContentChange();
        }
        if (this.statusBar) {
            this.statusBar.updatePageCount();
        }
        var eventArgs = { source: this, operations: args.operations };
        this.trigger(contentChangeEvent, eventArgs);
    };
    /**
     * @private
     */
    DocumentEditorContainer.prototype.onDocumentChange = function () {
        this.enableTrackChanges = this.documentEditor.enableTrackChanges;
        if (!isNullOrUndefined(this.documentSettings) && !isNullOrUndefined(this.documentEditor)
            && !isNullOrUndefined(this.documentEditor.documentSettings)) {
            this.documentSettings.compatibilityMode = this.documentEditor.documentSettings.compatibilityMode;
        }
        if (!isNullOrUndefined(this.documentEditorSettings) && !isNullOrUndefined(this.documentEditorSettings.fontFamilies)) {
            var fontFamilyValue = this.documentEditorSettings.fontFamilies;
            this.refreshFontFamilies(fontFamilyValue);
        }
        if (this.toolbarHandler) {
            this.toolbarHandler.onDocumentChange();
        }
        if (this.statusBar) {
            this.statusBar.updatePageCount();
            this.statusBar.loadingDiv.style.display = 'none';
        }
        var eventArgs = { source: this };
        this.trigger(documentChangeEvent, eventArgs);
        this.updateStyleCollection();
    };
    /**
     * @private
     */
    DocumentEditorContainer.prototype.onSelectionChange = function () {
        var _this = this;
        setTimeout(function () {
            if (!isNullOrUndefined(_this.documentEditor)) {
                _this.showPropertiesPaneOnSelection();
                if (_this.ribbonModule) {
                    _this.ribbonModule.updateRibbonState();
                }
                var eventArgs = { source: _this, isCompleted: _this.documentEditor.documentHelper.isSelectionCompleted };
                _this.trigger(selectionChangeEvent, eventArgs);
                _this.documentEditor.documentHelper.isSelectionCompleted = true;
            }
        });
    };
    /**
     * @private
     */
    DocumentEditorContainer.prototype.onZoomFactorChange = function () {
        if (this.statusBar) {
            this.statusBar.updateZoomContent();
        }
        // Update ribbon zoom button states if ribbon is active
        if (this.toolbarMode === 'Ribbon' && this.ribbonModule) {
            this.ribbonModule.onZoomFactorChange();
        }
    };
    DocumentEditorContainer.prototype.onProtectionChange = function () {
        if (this.toolbarMode == 'Ribbon') {
            this.ribbon.stateManager.updateRibbonState(this.ribbon.ribbon);
        }
        else {
            this.showPropertiesPaneOnSelection();
        }
    };
    DocumentEditorContainer.prototype.updateShowHiddenMarks = function (settings) {
        this.documentEditorSettings.showHiddenMarks = settings.showHiddenMarks;
        this.tableProperties.tableTextProperties.paragraph.toggleHiddenMarks();
    };
    /**
     * @private
     */
    DocumentEditorContainer.prototype.onRequestNavigate = function (args) {
        var _this = this;
        var isAngularModal = this.isModalDialog;
        if (args.linkType !== 'Bookmark') {
            var navLink = args.navigationLink;
            var link = SanitizeHtmlHelper.sanitize(navLink);
            if (args.localReference.length > 0) {
                link += '#' + args.localReference;
            }
            if (navLink.substring(0, 8) === 'file:///'
                || (navLink.substring(0, 7) === 'http://' && navLink.length > 7)
                || (navLink.substring(0, 8) === 'https://' && navLink.length > 8)
                || (navLink.substring(0, 4) === 'www.' && navLink.length > 4)
                || (navLink.substring(0, 7) === 'mailto:' && navLink.length > 7)) {
                window.open(link);
            }
            else {
                DialogUtility.alert({
                    title: this.localObj.getConstant("Information"),
                    content: this.localObj.getConstant("The address of this site is not valid. Check the address and try again."),
                    open: function (e) {
                        if (isAngularModal) {
                            _this.moveAlertToCdkOverlay(e);
                        }
                    },
                    okButton: { text: this.localObj.getConstant("OK") },
                    closeOnEscape: true,
                });
            }
            args.isHandled = true;
        }
    };
    /**
     * Moves the dialog container element to the Angular CDK overlay pane.
     * This ensures that the dialog is rendered within the modal overlay layer
     * and appears correctly when displayed inside an Angular modal dialog.
     *
     * @param e - Event arguments containing the dialog element.
     * @returns void
     */
    DocumentEditorContainer.prototype.moveAlertToCdkOverlay = function (e) {
        var cdkPane = document.querySelector('.cdk-overlay-pane');
        var dlgContainer = e.element.parentElement;
        if (dlgContainer && cdkPane) {
            cdkPane.appendChild(dlgContainer);
        }
    };
    /**
     * @private
     */
    DocumentEditorContainer.prototype.onViewChange = function (args) {
        if (this.statusBar) {
            this.statusBar.updatePageNumberOnViewChange(args);
        }
    };
    /**
     * @private
     */
    DocumentEditorContainer.prototype.onCustomContextMenuSelect = function (args) {
        this.trigger(customContextMenuSelectEvent, args);
    };
    /**
     * @private
     */
    DocumentEditorContainer.prototype.onCustomContextMenuBeforeOpen = function (args) {
        this.trigger(customContextMenuBeforeOpenEvent, args);
    };
    /**
     * @private
     */
    DocumentEditorContainer.prototype.onAsyncPagesVisible = function () {
        if (this.statusBar) {
            this.statusBar.updatePageCount();
            this.statusBar.loadingDiv.style.display = 'inline-flex';
        }
    };
    /**
     * @private
     */
    DocumentEditorContainer.prototype.showPropertiesPaneOnSelection = function () {
        if (((this.restrictEditing) && !this.showPropertiesPane) || isNullOrUndefined(this.tableProperties)) {
            return;
        }
        var isProtectedDocument = this.documentEditor.documentHelper.protectionType !== 'NoProtection';
        var allowFormatting = isProtectedDocument && this.documentEditor.documentHelper.restrictFormatting;
        var isSelectionInProtectecRegion = this.documentEditor.editorModule.restrictEditing;
        if (isProtectedDocument) {
            if (this.toolbarModule) {
                this.toolbarModule.enableDisableToolBarItem(!isSelectionInProtectecRegion, true);
            }
            this.tableProperties.enableDisableElements(!allowFormatting && !isSelectionInProtectecRegion);
            this.tocProperties.enableDisableElements(!isSelectionInProtectecRegion);
            this.headerFooterProperties.enableDisableElements(!isSelectionInProtectecRegion);
            this.imageProperties.enableDisableElements(!isSelectionInProtectecRegion);
        }
        else {
            var isReadOnly = !this.documentEditor.isReadOnly;
            if (this.toolbarModule) {
                this.toolbarModule.enableDisableToolBarItem(isReadOnly, true || this.showPropertiesPane);
            }
            this.tableProperties.enableDisableElements(true);
            this.tocProperties.enableDisableElements(true);
            this.headerFooterProperties.enableDisableElements(true);
            this.imageProperties.enableDisableElements(true);
        }
        var currentContext = this.documentEditor.selectionModule.contextType;
        var isInHeaderFooter = currentContext.indexOf('Header') >= 0
            || currentContext.indexOf('Footer') >= 0;
        if (!isInHeaderFooter) {
            this.showHeaderProperties = true;
        }
        if (!this.showPropertiesPane) {
            this.showHidePropertiesPane(false);
            this.propertiesPaneContainer.style.display = 'none';
        }
        else {
            this.propertiesPaneContainer.style.display = 'block';
            if (isInHeaderFooter && this.showHeaderProperties) {
                this.showProperties('headerfooter');
            }
            else if ((currentContext.indexOf('List') >= 0 || currentContext.indexOf('Text') >= 0
                && currentContext.indexOf('Table') < 0)) {
                this.showProperties('text');
            }
            else if (currentContext.indexOf('Image') >= 0) {
                this.showProperties('image');
            }
            else if (currentContext.indexOf('TableOfContents') >= 0) {
                this.showProperties('toc');
            }
            else if (currentContext.indexOf('Table') >= 0) {
                this.showProperties('table');
            }
        }
        this.previousContext = this.documentEditor.selectionModule.contextType;
        if (this.toolbarHandler) {
            this.toolbarModule.enableDisableInsertComment(!this.documentEditor.enableHeaderAndFooter && this.enableComment && (!this.documentEditor.isReadOnlyMode || this.documentEditor.documentHelper.isDocumentLoadAsynchronously) && !this.documentEditor.selectionModule.isinFootnote && !this.documentEditor.selectionModule.isinEndnote &&
                !this.documentEditor.selectionModule.isPlainContentControl() && !this.documentEditor.selectionModule.isInShape);
        }
    };
    /**
     * @private
     * @param property
     */
    DocumentEditorContainer.prototype.showProperties = function (property) {
        if (this.toolbarModule && property !== 'headerfooter' && property !== 'toc') {
            this.toolbarModule.enableDisablePropertyPaneButton(true);
        }
        this.tableProperties.showTableProperties((property === 'table' || property === 'text'), property);
        this.imageProperties.showImageProperties(property === 'image');
        this.headerFooterProperties.showHeaderFooterPane(property === 'headerfooter');
        this.tocProperties.showTocPane(property === 'toc');
    };
    /**
     * Set the default character format for document editor container
     * @param characterFormat Specify the character format properties to be applied for document editor.
     */
    DocumentEditorContainer.prototype.setDefaultCharacterFormat = function (characterFormat) {
        this.characterFormat = characterFormat;
        this.setFormat();
    };
    /**
     * Get the default character format for document editor container
     * @returns Returns the default character format for document editor container.
     */
    DocumentEditorContainer.prototype.getDefaultCharacterFormat = function () {
        return this.characterFormat;
    };
    /**
     * Set the default paragraph format for document editor container
     * @param paragraphFormat Specify the paragraph format properties to be applied for document editor.
     */
    DocumentEditorContainer.prototype.setDefaultParagraphFormat = function (paragraphFormat) {
        this.paragraphFormat = paragraphFormat;
        this.setFormat();
    };
    /**
     * get the document paragraph format for document editor container
     * @returns Returns the default paragraph format for document editor container.
     */
    DocumentEditorContainer.prototype.getDefaultParagraphFormat = function () {
        return this.paragraphFormat;
    };
    /**
     * Moves the component popup element into the Angular CDK overlay container.
     * This is required when the dropdown is rendered inside an Angular modal dialog
     *
     * @param e - Provides event arguments containing the popup element.
     * @returns void
     */
    DocumentEditorContainer.prototype.movePopupToCdkOverlay = function (dropDownButtonEl, popupEl) {
        if (!popupEl || !dropDownButtonEl) {
            return;
        }
        var cdkPane = dropDownButtonEl.closest('.cdk-overlay-pane');
        var popoverEl = dropDownButtonEl.closest('[popover]');
        if (!cdkPane || !popoverEl) {
            return;
        }
        if (popupEl.parentElement === cdkPane) {
            return;
        }
        cdkPane.appendChild(popupEl);
    };
    /**
     * Set the default section format for document editor container
     * @param sectionFormat Specify the section format properties to be applied for document editor.
     */
    DocumentEditorContainer.prototype.setDefaultSectionFormat = function (sectionFormat) {
        this.sectionFormat = sectionFormat;
        this.setFormat();
    };
    /**
     * get the document section format for document editor container
     * @returns Returns the default section format for document editor container.
     */
    DocumentEditorContainer.prototype.getDefaultSectionFormat = function () {
        return this.sectionFormat;
    };
    /**
     * Sets the document default paragraph format for document editor
     *
     * @param paragraphFormat - Specifies the paragraph format.
     * @returns {void}
     */
    DocumentEditorContainer.prototype.setDocumentParagraphFormat = function (paragraphFormat) {
        this.documentParagraphFormat = JSON.parse(HelperMethods.sanitizeString(JSON.stringify(paragraphFormat)));
        this.setFormat();
    };
    /**
     * Gets the document default paragraph format for document editor
     * @returns Returns the default paragraph format for document editor.
     */
    DocumentEditorContainer.prototype.getDocumentParagraphFormat = function () {
        var format = {};
        HelperMethods.writeParagraphFormatProperties(this.documentEditor.documentHelper.paragraphFormat, format);
        return format;
    };
    /**
     * Set the document character format for document editor container
     * @param characterFormat Specify the character format properties to be applied for document editor container.
     */
    DocumentEditorContainer.prototype.setDocumentCharacterFormat = function (characterFormat) {
        this.documentCharacterFormat = characterFormat;
        this.setFormat();
    };
    /**
     * get the document character format for document editor container
     * @returns Returns the document character format for document editor container.
     */
    DocumentEditorContainer.prototype.getDocumentCharacterFormat = function () {
        var format = {};
        HelperMethods.writeCharacterFormatProperties(this.documentEditor.documentHelper.characterFormat, format);
        return format;
    };
    /**
     * Destroys all managed resources used by this object.
     */
    DocumentEditorContainer.prototype.destroy = function () {
        _super.prototype.destroy.call(this);
        if (this.element) {
            if (!this.refreshing) {
                this.element.classList.remove('e-documenteditorcontainer');
            }
            this.element.innerHTML = '';
        }
        if (!this.refreshing) {
            this.element = undefined;
            this.paragraphFormat = undefined;
            this.sectionFormat = undefined;
            this.characterFormat = undefined;
        }
        if (this.toolbarContainer && this.toolbarContainer.parentElement) {
            this.toolbarContainer.innerHTML = '';
            this.toolbarContainer.parentElement.removeChild(this.toolbarContainer);
        }
        this.toolbarContainer = undefined;
        if (this.documentEditorInternal) {
            this.unWireEvents();
            this.documentEditorInternal.destroy();
            this.documentEditorInternal = undefined;
        }
        if (this.headerFooterProperties) {
            this.headerFooterProperties.destroy();
        }
        this.headerFooterProperties = undefined;
        if (this.imageProperties) {
            this.imageProperties.destroy();
        }
        this.imageProperties = undefined;
        if (this.tocProperties) {
            this.tocProperties.destroy();
        }
        this.tocProperties = undefined;
        if (this.tableProperties) {
            this.tableProperties.destroy();
        }
        this.tableProperties = undefined;
        if (this.statusBar) {
            this.statusBar.destroy();
        }
        if (this.propertiesPaneContainer && this.propertiesPaneContainer.parentElement) {
            this.propertiesPaneContainer.remove();
        }
        this.propertiesPaneContainer = undefined;
        if (this.editorContainer && this.editorContainer.parentElement) {
            this.editorContainer.innerHTML = '';
            this.editorContainer.parentElement.removeChild(this.editorContainer);
        }
        if (this.statusBarElement && this.statusBarElement.parentElement) {
            this.statusBarElement.innerHTML = '';
            this.statusBarElement.parentElement.removeChild(this.statusBarElement);
        }
        if (this.containerTarget && this.containerTarget.parentElement) {
            this.containerTarget.innerHTML = '';
            this.containerTarget.parentElement.removeChild(this.containerTarget);
        }
        this.containerTarget = undefined;
        this.statusBarElement = undefined;
        this.editorContainer = undefined;
        this.statusBar = undefined;
        this.previousContext = undefined;
    };
    __decorate([
        Property(true)
    ], DocumentEditorContainer.prototype, "showPropertiesPane", void 0);
    __decorate([
        Property(true)
    ], DocumentEditorContainer.prototype, "enableToolbar", void 0);
    __decorate([
        Property(false)
    ], DocumentEditorContainer.prototype, "restrictEditing", void 0);
    __decorate([
        Property(false)
    ], DocumentEditorContainer.prototype, "enableSpellCheck", void 0);
    __decorate([
        Property(false)
    ], DocumentEditorContainer.prototype, "enableTrackChanges", void 0);
    __decorate([
        Property('Pages')
    ], DocumentEditorContainer.prototype, "layoutType", void 0);
    __decorate([
        Property('')
    ], DocumentEditorContainer.prototype, "currentUser", void 0);
    __decorate([
        Property('#FFFF00')
    ], DocumentEditorContainer.prototype, "userColor", void 0);
    __decorate([
        Property(false)
    ], DocumentEditorContainer.prototype, "enableLocalPaste", void 0);
    __decorate([
        Property()
    ], DocumentEditorContainer.prototype, "serviceUrl", void 0);
    __decorate([
        Property(2000)
    ], DocumentEditorContainer.prototype, "zIndex", void 0);
    __decorate([
        Property(false)
    ], DocumentEditorContainer.prototype, "enableCsp", void 0);
    __decorate([
        Property(true)
    ], DocumentEditorContainer.prototype, "enableComment", void 0);
    __decorate([
        Property('100%')
    ], DocumentEditorContainer.prototype, "width", void 0);
    __decorate([
        Property('320px')
    ], DocumentEditorContainer.prototype, "height", void 0);
    __decorate([
        Property(true)
    ], DocumentEditorContainer.prototype, "enableAutoFocus", void 0);
    __decorate([
        Property(false)
    ], DocumentEditorContainer.prototype, "enableLockAndEdit", void 0);
    __decorate([
        Property(false)
    ], DocumentEditorContainer.prototype, "isModalDialog", void 0);
    __decorate([
        Property(false)
    ], DocumentEditorContainer.prototype, "autoResizeOnVisibilityChange", void 0);
    __decorate([
        Property('Toolbar')
    ], DocumentEditorContainer.prototype, "toolbarMode", void 0);
    __decorate([
        Property('Simplified')
    ], DocumentEditorContainer.prototype, "ribbonLayout", void 0);
    __decorate([
        Event()
    ], DocumentEditorContainer.prototype, "created", void 0);
    __decorate([
        Event()
    ], DocumentEditorContainer.prototype, "destroyed", void 0);
    __decorate([
        Event()
    ], DocumentEditorContainer.prototype, "beforePaste", void 0);
    __decorate([
        Event()
    ], DocumentEditorContainer.prototype, "contentChange", void 0);
    __decorate([
        Event()
    ], DocumentEditorContainer.prototype, "selectionChange", void 0);
    __decorate([
        Event()
    ], DocumentEditorContainer.prototype, "documentChange", void 0);
    __decorate([
        Event()
    ], DocumentEditorContainer.prototype, "toolbarClick", void 0);
    __decorate([
        Event()
    ], DocumentEditorContainer.prototype, "fileMenuItemClick", void 0);
    __decorate([
        Event()
    ], DocumentEditorContainer.prototype, "customContextMenuSelect", void 0);
    __decorate([
        Event()
    ], DocumentEditorContainer.prototype, "customContextMenuBeforeOpen", void 0);
    __decorate([
        Event()
    ], DocumentEditorContainer.prototype, "beforePaneSwitch", void 0);
    __decorate([
        Event()
    ], DocumentEditorContainer.prototype, "commentDelete", void 0);
    __decorate([
        Event()
    ], DocumentEditorContainer.prototype, "beforeAcceptRejectChanges", void 0);
    __decorate([
        Event()
    ], DocumentEditorContainer.prototype, "beforeCommentAction", void 0);
    __decorate([
        Event()
    ], DocumentEditorContainer.prototype, "serviceFailure", void 0);
    __decorate([
        Event()
    ], DocumentEditorContainer.prototype, "trackChange", void 0);
    __decorate([
        Event()
    ], DocumentEditorContainer.prototype, "contentControl", void 0);
    __decorate([
        Event()
    ], DocumentEditorContainer.prototype, "beforeXmlHttpRequestSend", void 0);
    __decorate([
        Complex({}, DocumentEditorSettings)
    ], DocumentEditorContainer.prototype, "documentEditorSettings", void 0);
    __decorate([
        Complex({}, DocumentSettings)
    ], DocumentEditorContainer.prototype, "documentSettings", void 0);
    __decorate([
        Property({ import: 'Import', systemClipboard: 'SystemClipboard', spellCheck: 'SpellCheck', spellCheckByPage: 'SpellCheckByPage', restrictEditing: 'RestrictEditing', canLock: 'CanLock', getPendingActions: 'GetPendingActions' })
    ], DocumentEditorContainer.prototype, "serverActionSettings", void 0);
    __decorate([
        Property(['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields', 'ContentControl', 'XML Mapping'])
    ], DocumentEditorContainer.prototype, "toolbarItems", void 0);
    __decorate([
        Property([])
    ], DocumentEditorContainer.prototype, "headers", void 0);
    __decorate([
        Property(['New', 'Open', 'Export', 'Print'])
    ], DocumentEditorContainer.prototype, "fileMenuItems", void 0);
    __decorate([
        Property(undefined)
    ], DocumentEditorContainer.prototype, "backstageMenu", void 0);
    DocumentEditorContainer = __decorate([
        NotifyPropertyChanges
    ], DocumentEditorContainer);
    return DocumentEditorContainer;
}(Component));
export { DocumentEditorContainer };
