@phuong-tran-redoc/document-engine-angular 0.0.20 → 0.0.22

package/fesm2022/phuong-tran-redoc-document-engine-angular.mjs

@@ -1,7 +1,5 @@
-import * as i1 from '@angular/common';
-import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, Input, ChangeDetectionStrategy, Component, HostBinding, Directive, Injectable, ElementRef, ViewEncapsulation, EventEmitter, Output, InjectionToken, HostListener, forwardRef, ContentChildren, ViewChild, ViewChildren, ViewContainerRef, EnvironmentInjector, NgZone, ApplicationRef, createComponent, Renderer2 } from '@angular/core';
+import { HostBinding, Input, Directive, inject, Injectable, ChangeDetectorRef, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, Component, EventEmitter, Output, InjectionToken, HostListener, forwardRef, ContentChildren, ViewChild, ViewChildren, ViewContainerRef, EnvironmentInjector, NgZone, NgModule, ApplicationRef, createComponent, Renderer2 } from '@angular/core';
 import { Extension, Editor } from '@tiptap/core';
 import Blockquote from '@tiptap/extension-blockquote';
 import Bold from '@tiptap/extension-bold';
@@ -24,6 +22,8 @@ import { TextStyleKit } from '@tiptap/extension-text-style';
 import Underline from '@tiptap/extension-underline';
 import { Dropcursor, Gapcursor, TrailingNode, UndoRedo, CharacterCount, Placeholder } from '@tiptap/extensions';
 import { ResetOnEnter, EditableRegion, RestrictedEditing, CustomOrderedList, StyledTableKit, PageBreak, ResetFormat, Indent, ClearContent, TextCase, NotumHeading, DynamicField, Color, normalizeColor, getActiveMarkRange, getSelectedCells, getCombinedCellAttributeValue, TableDefaultAttributes, getCursorCellInfo, getClosestDomElement } from '@phuong-tran-redoc/document-engine-core';
+import * as i1 from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import { throttle } from 'lodash-es';
 import * as i2 from '@angular/forms';
 import { FormsModule, FormControl, ReactiveFormsModule, FormBuilder, Validators, NG_VALUE_ACCESSOR, NonNullableFormBuilder } from '@angular/forms';
@@ -269,118 +269,6 @@ const DefaultEditorConfig = {
     showPrintButton: false,
 };
 
-/**
- * Character Count component for document editor footer
- * Displays character/word count with optional limit and color coding
- */
-class CharacterCountComponent {
-    cdr = inject(ChangeDetectorRef);
-    editor;
-    config;
-    mode = 'characters';
-    count = 0;
-    limit = null;
-    updateCount = () => {
-        if (!this.editor) {
-            return;
-        }
-        // Get count from editor storage if available
-        const characterCountStorage = this.editor.storage.characterCount;
-        if (characterCountStorage) {
-            if (this.mode === 'characters') {
-                this.count = characterCountStorage.characters?.() || 0;
-            }
-            else {
-                this.count = characterCountStorage.words?.() || 0;
-            }
-        }
-        else {
-            // Fallback: calculate from text
-            const text = this.editor.getText();
-            if (this.mode === 'characters') {
-                this.count = text.length;
-            }
-            else {
-                this.count = text.trim() ? text.trim().split(/\s+/).length : 0;
-            }
-        }
-        // Get limit from config
-        const characterCountConfig = this.config?.characterCount;
-        if (characterCountConfig && typeof characterCountConfig === 'object') {
-            this.limit = characterCountConfig.limit || null;
-        }
-        else {
-            this.limit = null;
-        }
-        this.cdr.markForCheck();
-    };
-    ngOnInit() {
-        if (!this.editor) {
-            return;
-        }
-        // Subscribe to update events to keep count in sync
-        this.editor.on('update', this.updateCount);
-        this.editor.on('transaction', this.updateCount);
-        // Initialize count once
-        this.updateCount();
-    }
-    ngOnDestroy() {
-        if (this.editor) {
-            this.editor.off('update', this.updateCount);
-            this.editor.off('transaction', this.updateCount);
-        }
-    }
-    isNearLimit() {
-        if (!this.limit) {
-            return false;
-        }
-        // Consider near limit when >= 90% of limit
-        return this.count >= this.limit * 0.9 && this.count < this.limit;
-    }
-    isOverLimit() {
-        if (!this.limit) {
-            return false;
-        }
-        return this.count > this.limit;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CharacterCountComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: CharacterCountComponent, isStandalone: true, selector: "document-engine-character-count", inputs: { editor: "editor", config: "config", mode: "mode" }, ngImport: i0, template: "<div class=\"document-engine-character-count\">\n  <span\n    class=\"document-engine-character-count__text\"\n    [class.document-engine-character-count__text--muted]=\"!isNearLimit() && !isOverLimit()\"\n    [class.document-engine-character-count__text--warning]=\"isNearLimit() && !isOverLimit()\"\n    [class.document-engine-character-count__text--error]=\"isOverLimit()\"\n  >\n    <ng-container *ngIf=\"mode === 'characters'\">\n      <ng-container *ngIf=\"limit; else noLimit\"> {{ count }} / {{ limit }} characters. </ng-container>\n      <ng-template #noLimit> {{ count }} {{ count === 1 ? 'character' : 'characters' }}. </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"mode === 'words'\"> {{ count }} {{ count === 1 ? 'word' : 'words' }}. </ng-container>\n  </span>\n</div>\n", styles: [".document-engine-character-count{display:flex;justify-content:flex-end}.document-engine-character-count__text{font-size:.875rem;transition:color .2s ease-in-out}.document-engine-character-count__text--muted{color:var(--muted-foreground, #6b7280)}.document-engine-character-count__text--warning{color:var(--warning, #d97706)}.document-engine-character-count__text--error{color:var(--destructive, #dc2626)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CharacterCountComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'document-engine-character-count', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"document-engine-character-count\">\n  <span\n    class=\"document-engine-character-count__text\"\n    [class.document-engine-character-count__text--muted]=\"!isNearLimit() && !isOverLimit()\"\n    [class.document-engine-character-count__text--warning]=\"isNearLimit() && !isOverLimit()\"\n    [class.document-engine-character-count__text--error]=\"isOverLimit()\"\n  >\n    <ng-container *ngIf=\"mode === 'characters'\">\n      <ng-container *ngIf=\"limit; else noLimit\"> {{ count }} / {{ limit }} characters. </ng-container>\n      <ng-template #noLimit> {{ count }} {{ count === 1 ? 'character' : 'characters' }}. </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"mode === 'words'\"> {{ count }} {{ count === 1 ? 'word' : 'words' }}. </ng-container>\n  </span>\n</div>\n", styles: [".document-engine-character-count{display:flex;justify-content:flex-end}.document-engine-character-count__text{font-size:.875rem;transition:color .2s ease-in-out}.document-engine-character-count__text--muted{color:var(--muted-foreground, #6b7280)}.document-engine-character-count__text--warning{color:var(--warning, #d97706)}.document-engine-character-count__text--error{color:var(--destructive, #dc2626)}\n"] }]
-        }], propDecorators: { editor: [{
-                type: Input
-            }], config: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }] } });
-
-/**
- * Footer component for document editor
- * Container for footer components like character count
- */
-class FooterComponent {
-    editor;
-    config;
-    // @Input() editable = true;
-    hasCharacterCount() {
-        const config = this.config ?? {};
-        return config.characterCount !== false;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: FooterComponent, isStandalone: true, selector: "document-engine-footer", inputs: { editor: "editor", config: "config" }, ngImport: i0, template: "<div class=\"document-engine-document-editor__footer\">\n  <div class=\"document-engine-document-editor__footer-content\">\n    <div class=\"document-engine-document-editor__footer-left\">\n      <!-- Additional footer components can be added here -->\n    </div>\n\n    <div class=\"document-engine-document-editor__footer-right\">\n      <document-engine-character-count\n        *ngIf=\"hasCharacterCount()\"\n        [editor]=\"editor\"\n        [config]=\"config\"\n        mode=\"characters\"\n      ></document-engine-character-count>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CharacterCountComponent, selector: "document-engine-character-count", inputs: ["editor", "config", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FooterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'document-engine-footer', standalone: true, imports: [CommonModule, CharacterCountComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"document-engine-document-editor__footer\">\n  <div class=\"document-engine-document-editor__footer-content\">\n    <div class=\"document-engine-document-editor__footer-left\">\n      <!-- Additional footer components can be added here -->\n    </div>\n\n    <div class=\"document-engine-document-editor__footer-right\">\n      <document-engine-character-count\n        *ngIf=\"hasCharacterCount()\"\n        [editor]=\"editor\"\n        [config]=\"config\"\n        mode=\"characters\"\n      ></document-engine-character-count>\n    </div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { editor: [{
-                type: Input
-            }], config: [{
-                type: Input
-            }] } });
-
 const COLORS = Color.fromArray([
     { name: 'Black', value: '#000000', type: 'hex' },
     { name: 'Dim gray', value: '#696969', type: 'hex' },
@@ -2756,11 +2644,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                     },
                 }]
         }], propDecorators: { popover: [{
-                type: Input,
-                args: [{ required: true }]
+                type: Input
             }], isOpen: [{
-                type: Input,
-                args: [{ required: true }]
+                type: Input
             }], placement: [{
                 type: Input
             }], offset: [{
@@ -5917,6 +5803,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                 args: ['tableCreateBubbleMenu']
             }] } });
 
+/**
+ * Character Count component for document editor footer
+ * Displays character/word count with optional limit and color coding
+ */
+class CharacterCountComponent {
+    cdr = inject(ChangeDetectorRef);
+    editor;
+    config;
+    mode = 'characters';
+    count = 0;
+    limit = null;
+    updateCount = () => {
+        if (!this.editor) {
+            return;
+        }
+        // Get count from editor storage if available
+        const characterCountStorage = this.editor.storage.characterCount;
+        if (characterCountStorage) {
+            if (this.mode === 'characters') {
+                this.count = characterCountStorage.characters?.() || 0;
+            }
+            else {
+                this.count = characterCountStorage.words?.() || 0;
+            }
+        }
+        else {
+            // Fallback: calculate from text
+            const text = this.editor.getText();
+            if (this.mode === 'characters') {
+                this.count = text.length;
+            }
+            else {
+                this.count = text.trim() ? text.trim().split(/\s+/).length : 0;
+            }
+        }
+        // Get limit from config
+        const characterCountConfig = this.config?.characterCount;
+        if (characterCountConfig && typeof characterCountConfig === 'object') {
+            this.limit = characterCountConfig.limit || null;
+        }
+        else {
+            this.limit = null;
+        }
+        this.cdr.markForCheck();
+    };
+    ngOnInit() {
+        if (!this.editor) {
+            return;
+        }
+        // Subscribe to update events to keep count in sync
+        this.editor.on('update', this.updateCount);
+        this.editor.on('transaction', this.updateCount);
+        // Initialize count once
+        this.updateCount();
+    }
+    ngOnDestroy() {
+        if (this.editor) {
+            this.editor.off('update', this.updateCount);
+            this.editor.off('transaction', this.updateCount);
+        }
+    }
+    isNearLimit() {
+        if (!this.limit) {
+            return false;
+        }
+        // Consider near limit when >= 90% of limit
+        return this.count >= this.limit * 0.9 && this.count < this.limit;
+    }
+    isOverLimit() {
+        if (!this.limit) {
+            return false;
+        }
+        return this.count > this.limit;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CharacterCountComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: CharacterCountComponent, isStandalone: true, selector: "document-engine-character-count", inputs: { editor: "editor", config: "config", mode: "mode" }, ngImport: i0, template: "<div class=\"document-engine-character-count\">\n  <span\n    class=\"document-engine-character-count__text\"\n    [class.document-engine-character-count__text--muted]=\"!isNearLimit() && !isOverLimit()\"\n    [class.document-engine-character-count__text--warning]=\"isNearLimit() && !isOverLimit()\"\n    [class.document-engine-character-count__text--error]=\"isOverLimit()\"\n  >\n    <ng-container *ngIf=\"mode === 'characters'\">\n      <ng-container *ngIf=\"limit; else noLimit\"> {{ count }} / {{ limit }} characters. </ng-container>\n      <ng-template #noLimit> {{ count }} {{ count === 1 ? 'character' : 'characters' }}. </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"mode === 'words'\"> {{ count }} {{ count === 1 ? 'word' : 'words' }}. </ng-container>\n  </span>\n</div>\n", styles: [".document-engine-character-count{display:flex;justify-content:flex-end}.document-engine-character-count__text{font-size:.875rem;transition:color .2s ease-in-out}.document-engine-character-count__text--muted{color:var(--muted-foreground, #6b7280)}.document-engine-character-count__text--warning{color:var(--warning, #d97706)}.document-engine-character-count__text--error{color:var(--destructive, #dc2626)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CharacterCountComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'document-engine-character-count', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"document-engine-character-count\">\n  <span\n    class=\"document-engine-character-count__text\"\n    [class.document-engine-character-count__text--muted]=\"!isNearLimit() && !isOverLimit()\"\n    [class.document-engine-character-count__text--warning]=\"isNearLimit() && !isOverLimit()\"\n    [class.document-engine-character-count__text--error]=\"isOverLimit()\"\n  >\n    <ng-container *ngIf=\"mode === 'characters'\">\n      <ng-container *ngIf=\"limit; else noLimit\"> {{ count }} / {{ limit }} characters. </ng-container>\n      <ng-template #noLimit> {{ count }} {{ count === 1 ? 'character' : 'characters' }}. </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"mode === 'words'\"> {{ count }} {{ count === 1 ? 'word' : 'words' }}. </ng-container>\n  </span>\n</div>\n", styles: [".document-engine-character-count{display:flex;justify-content:flex-end}.document-engine-character-count__text{font-size:.875rem;transition:color .2s ease-in-out}.document-engine-character-count__text--muted{color:var(--muted-foreground, #6b7280)}.document-engine-character-count__text--warning{color:var(--warning, #d97706)}.document-engine-character-count__text--error{color:var(--destructive, #dc2626)}\n"] }]
+        }], propDecorators: { editor: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }] } });
+
+/**
+ * Footer component for document editor
+ * Container for footer components like character count
+ */
+class FooterComponent {
+    editor;
+    config;
+    // @Input() editable = true;
+    hasCharacterCount() {
+        const config = this.config ?? {};
+        return config.characterCount !== false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: FooterComponent, isStandalone: true, selector: "document-engine-footer", inputs: { editor: "editor", config: "config" }, ngImport: i0, template: "<div class=\"document-engine-document-editor__footer\">\n  <div class=\"document-engine-document-editor__footer-content\">\n    <div class=\"document-engine-document-editor__footer-left\">\n      <!-- Additional footer components can be added here -->\n    </div>\n\n    <div class=\"document-engine-document-editor__footer-right\">\n      <document-engine-character-count\n        *ngIf=\"hasCharacterCount()\"\n        [editor]=\"editor\"\n        [config]=\"config\"\n        mode=\"characters\"\n      ></document-engine-character-count>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CharacterCountComponent, selector: "document-engine-character-count", inputs: ["editor", "config", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'document-engine-footer', standalone: true, imports: [CommonModule, CharacterCountComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"document-engine-document-editor__footer\">\n  <div class=\"document-engine-document-editor__footer-content\">\n    <div class=\"document-engine-document-editor__footer-left\">\n      <!-- Additional footer components can be added here -->\n    </div>\n\n    <div class=\"document-engine-document-editor__footer-right\">\n      <document-engine-character-count\n        *ngIf=\"hasCharacterCount()\"\n        [editor]=\"editor\"\n        [config]=\"config\"\n        mode=\"characters\"\n      ></document-engine-character-count>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { editor: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }] } });
+
 /**
  * Document Editor Component
  * High-level wrapper that encapsulates TiptapEditor and DocumentEngineKit
@@ -6012,11 +6010,11 @@ class DocumentEditorComponent {
         return merged;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: DocumentEditorComponent, isStandalone: true, selector: "document-engine-editor", inputs: { config: "config" }, outputs: { editorReady: "editorReady" }, host: { classAttribute: "no-twp" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"document-engine-document-editor\">\n  <document-engine-toolbar\n    *ngIf=\"mergedConfig.showToolbar\"\n    [editor]=\"editor\"\n    [capabilities]=\"capabilities\"\n    [config]=\"mergedConfig\"\n  ></document-engine-toolbar>\n\n  <div class=\"document-engine-document-editor__content\">\n    <ng-content></ng-content>\n  </div>\n\n  <document-engine-footer\n    *ngIf=\"editor && mergedConfig.showFooter\"\n    [editor]=\"editor\"\n    [config]=\"mergedConfig\"\n  ></document-engine-footer>\n</div>\n", styles: [":is() *,:is() *:before,:is() *:after{box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolbarComponent, selector: "document-engine-toolbar", inputs: ["editor", "capabilities", "config"], outputs: ["action"] }, { kind: "component", type: FooterComponent, selector: "document-engine-footer", inputs: ["editor", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: DocumentEditorComponent, isStandalone: false, selector: "document-engine-editor", inputs: { config: "config" }, outputs: { editorReady: "editorReady" }, host: { classAttribute: "no-twp" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"document-engine-document-editor\">\n  <document-engine-toolbar\n    *ngIf=\"mergedConfig.showToolbar\"\n    [editor]=\"editor\"\n    [capabilities]=\"capabilities\"\n    [config]=\"mergedConfig\"\n  ></document-engine-toolbar>\n\n  <div class=\"document-engine-document-editor__content\">\n    <ng-content></ng-content>\n  </div>\n\n  <document-engine-footer\n    *ngIf=\"editor && mergedConfig.showFooter\"\n    [editor]=\"editor\"\n    [config]=\"mergedConfig\"\n  ></document-engine-footer>\n</div>\n", styles: [":is() *,:is() *:before,:is() *:after{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolbarComponent, selector: "document-engine-toolbar", inputs: ["editor", "capabilities", "config"], outputs: ["action"] }, { kind: "component", type: FooterComponent, selector: "document-engine-footer", inputs: ["editor", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'document-engine-editor', standalone: true, imports: [CommonModule, ToolbarComponent, FooterComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'document-engine-editor', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'no-twp',
                     }, template: "<div class=\"document-engine-document-editor\">\n  <document-engine-toolbar\n    *ngIf=\"mergedConfig.showToolbar\"\n    [editor]=\"editor\"\n    [capabilities]=\"capabilities\"\n    [config]=\"mergedConfig\"\n  ></document-engine-toolbar>\n\n  <div class=\"document-engine-document-editor__content\">\n    <ng-content></ng-content>\n  </div>\n\n  <document-engine-footer\n    *ngIf=\"editor && mergedConfig.showFooter\"\n    [editor]=\"editor\"\n    [config]=\"mergedConfig\"\n  ></document-engine-footer>\n</div>\n", styles: [":is() *,:is() *:before,:is() *:after{box-sizing:border-box}\n"] }]
         }], propDecorators: { config: [{
@@ -6025,6 +6023,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                 type: Output
             }] } });
 
+class DocumentEditorModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorModule, declarations: [DocumentEditorComponent], imports: [CommonModule, ToolbarComponent, FooterComponent], exports: [DocumentEditorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorModule, imports: [CommonModule, ToolbarComponent, FooterComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DocumentEditorComponent],
+                    imports: [CommonModule, ToolbarComponent, FooterComponent],
+                    exports: [DocumentEditorComponent],
+                }]
+        }] });
+
 class AngularRenderer {
     applicationRef;
     componentRef;
@@ -6264,5 +6276,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ARCHIVE, ARROW_DROP_DOWN, AngularRenderer, ButtonDirective, CHECK, CLEAR_ALL, CLOSE, CODE, CharacterCountComponent, CheckboxComponent, ColorPickerComponent, ColorPickerViewComponent, DEFAULT, DEFAULT_TOOLBAR_STATE, DESCRIPTION, DYNAMIC_FORM, DocumentEditorComponent, DocumentEngineKit, DynamicFieldsViewComponent, EDIT, EditorBubbleMenuComponent, EditorCapabilities, ErrorMessageComponent, EventManager, FORMAT_ALIGN_CENTER, FORMAT_ALIGN_JUSTIFY, FORMAT_ALIGN_LEFT, FORMAT_ALIGN_RIGHT, FORMAT_BOLD, FORMAT_CLEAR, FORMAT_COLOR_FILL, FORMAT_COLOR_TEXT, FORMAT_INDENT_DECREASE, FORMAT_INDENT_INCREASE, FORMAT_ITALIC, FORMAT_LINE_SPACING, FORMAT_LIST_BULLETED, FORMAT_LIST_NUMBERED, FORMAT_QUOTE, FORMAT_SIZE, FORMAT_STRIKETHROUGH, FORMAT_UNDERLINE, FocusTrapService, FooterComponent, INSERT_PAGE_BREAK, IconComponent, IconRegistryService, ImageInsertViewComponent, InputDirective, LINK, LINK_OFF, LabelDirective, LinkEditViewComponent, LinkMainViewComponent, LinkPropertiesViewComponent, MARKDOWN, MATCH_CASE, PHOTO, PRINT, PopoverDirective, REDO, RESTRICT_EDIT, SEARCH, SEARCH_OFF, SETTINGS, SPECIAL_CHARACTER, SUBSCRIPT, SUPERSCRIPT, SelectComponent, SelectLabelDirective, SelectOptionDirective, SpecialCharactersViewComponent, TABLE_CELL_PROPERTY, TABLE_COLUMN, TABLE_MERGE_CELL, TABLE_PROPERTY, TABLE_ROW, TABLE_ROWS, TableCellStyleViewComponent, TableCreateViewComponent, TableMainViewComponent, TableStyleViewComponent, TemplateViewComponent, TiptapBubbleMenuDirective, TiptapDraggableDirective, TiptapEditorDirective, TiptapFloatingMenuDirective, ToggleGroupComponent, ToggleOptionDirective, ToolbarBubbleMenuComponent, ToolbarComponent, ToolbarService, UNDO, VERTICAL_ALIGN_BOTTOM, VERTICAL_ALIGN_CENTER, VERTICAL_ALIGN_TOP, buildToolbarState, selectionChangeHandler, shouldShowFnFactory, urlValidator };
+export { ARCHIVE, ARROW_DROP_DOWN, AngularRenderer, ButtonDirective, CHECK, CLEAR_ALL, CLOSE, CODE, CharacterCountComponent, CheckboxComponent, ColorPickerComponent, ColorPickerViewComponent, DEFAULT, DEFAULT_TOOLBAR_STATE, DESCRIPTION, DYNAMIC_FORM, DocumentEditorComponent, DocumentEditorModule, DocumentEngineKit, DynamicFieldsViewComponent, EDIT, EditorBubbleMenuComponent, EditorCapabilities, ErrorMessageComponent, EventManager, FORMAT_ALIGN_CENTER, FORMAT_ALIGN_JUSTIFY, FORMAT_ALIGN_LEFT, FORMAT_ALIGN_RIGHT, FORMAT_BOLD, FORMAT_CLEAR, FORMAT_COLOR_FILL, FORMAT_COLOR_TEXT, FORMAT_INDENT_DECREASE, FORMAT_INDENT_INCREASE, FORMAT_ITALIC, FORMAT_LINE_SPACING, FORMAT_LIST_BULLETED, FORMAT_LIST_NUMBERED, FORMAT_QUOTE, FORMAT_SIZE, FORMAT_STRIKETHROUGH, FORMAT_UNDERLINE, FocusTrapService, FooterComponent, INSERT_PAGE_BREAK, IconComponent, IconRegistryService, ImageInsertViewComponent, InputDirective, LINK, LINK_OFF, LabelDirective, LinkEditViewComponent, LinkMainViewComponent, LinkPropertiesViewComponent, MARKDOWN, MATCH_CASE, PHOTO, PRINT, PopoverDirective, REDO, RESTRICT_EDIT, SEARCH, SEARCH_OFF, SETTINGS, SPECIAL_CHARACTER, SUBSCRIPT, SUPERSCRIPT, SelectComponent, SelectLabelDirective, SelectOptionDirective, SpecialCharactersViewComponent, TABLE_CELL_PROPERTY, TABLE_COLUMN, TABLE_MERGE_CELL, TABLE_PROPERTY, TABLE_ROW, TABLE_ROWS, TableCellStyleViewComponent, TableCreateViewComponent, TableMainViewComponent, TableStyleViewComponent, TemplateViewComponent, TiptapBubbleMenuDirective, TiptapDraggableDirective, TiptapEditorDirective, TiptapFloatingMenuDirective, ToggleGroupComponent, ToggleOptionDirective, ToolbarBubbleMenuComponent, ToolbarComponent, ToolbarService, UNDO, VERTICAL_ALIGN_BOTTOM, VERTICAL_ALIGN_CENTER, VERTICAL_ALIGN_TOP, buildToolbarState, selectionChangeHandler, shouldShowFnFactory, urlValidator };
 //# sourceMappingURL=phuong-tran-redoc-document-engine-angular.mjs.map