@cleavelandprice/ngx-lib 3.7.2 → 3.8.0

package/{fesm2020 → fesm2022}/cleavelandprice-ngx-lib-quill.mjs

@@ -19,514 +19,513 @@ import { CommonModule } from '@angular/common';
 import * as i5$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
-class Buttons {
-    constructor() {
-        //#region Font Style
-        this.bold = true;
-        this.italic = true;
-        this.strike = true;
-        this.underline = true;
-        //#endregion
-        //#region Media
-        this.link = true;
-        this.image = true;
-        this.video = true;
-        //#endregion
-        //#region Block Style
-        this.blockquote = true;
-        this.codeblock = true;
-        //#endregion
-        //#region Heading Style
-        this.h1 = true;
-        this.h2 = true;
-        //#endregion
-        //#region Color
-        this.color = true;
-        //#endregion
-        //#region List Style
-        this.bulleted = true;
-        this.ordered = true;
-        //#endregion
-        //#region Script Style
-        this.subScript = true;
-        this.superScript = true;
-        //#endregion
-        //#region Indent Style
-        this.increaseIndent = true;
-        this.decreaseIndent = true;
-        //#endregion
-        //#region DropDowns
-        this.align = true;
-        this.font = true;
-        this.fontSize = true;
-        this.headingStyle = true;
-        //#endregion
-        //#region Single Buttons
-        this.clean = true;
-        this.formula = true;
-        this.rtl = true;
-        this.editorSize = true;
-        this.rawEditor = false;
-        //#endregion
-    }
+class Buttons {
+    constructor() {
+        //#region Font Style
+        this.bold = true;
+        this.italic = true;
+        this.strike = true;
+        this.underline = true;
+        //#endregion
+        //#region Media
+        this.link = true;
+        this.image = true;
+        this.video = true;
+        //#endregion
+        //#region Block Style
+        this.blockquote = true;
+        this.codeblock = true;
+        //#endregion
+        //#region Heading Style
+        this.h1 = true;
+        this.h2 = true;
+        //#endregion
+        //#region Color
+        this.color = true;
+        //#endregion
+        //#region List Style
+        this.bulleted = true;
+        this.ordered = true;
+        //#endregion
+        //#region Script Style
+        this.subScript = true;
+        this.superScript = true;
+        //#endregion
+        //#region Indent Style
+        this.increaseIndent = true;
+        this.decreaseIndent = true;
+        //#endregion
+        //#region DropDowns
+        this.align = true;
+        this.font = true;
+        this.fontSize = true;
+        this.headingStyle = true;
+        //#endregion
+        //#region Single Buttons
+        this.clean = true;
+        this.formula = true;
+        this.rtl = true;
+        this.editorSize = true;
+        this.rawEditor = false;
+        //#endregion
+    }
 }
 
-class Icons {
-    constructor() {
-        this.maximize = 'open_in_full';
-        this.minimize = 'close_fullscreen';
-        this.popout = 'open_in_full';
-        this.popin = 'done';
-    }
+class Icons {
+    constructor() {
+        this.maximize = 'open_in_full';
+        this.minimize = 'close_fullscreen';
+        this.popout = 'open_in_full';
+        this.popin = 'done';
+    }
 }
 
-class Tooltips {
-    constructor() {
-        //#region Font Style
-        this.bold = 'Bold';
-        this.italic = 'Italic';
-        this.strike = 'Strikethrough';
-        this.underline = 'Underline';
-        //#endregion
-        //#region Media
-        this.link = 'Link';
-        this.image = 'Insert Image';
-        this.video = 'Insert Video';
-        //#endregion
-        //#region Block Style
-        this.blockquote = 'Blockquote';
-        this.codeblock = 'Code Block';
-        //#endregion
-        //#region Heading Style
-        this.h1 = 'Heading 1';
-        this.h2 = 'Heading 2';
-        //#endregion
-        //#region Color
-        this.color = 'Font / Background Color';
-        //#endregion
-        //#region List Style
-        this.bulleted = 'Bulleted List';
-        this.ordered = 'Ordered List';
-        //#endregion
-        //#region Script Style
-        this.subScript = 'Subscript';
-        this.superScript = 'Superscript';
-        //#endregion
-        //#region Indent Style
-        this.increaseIndent = 'Increase Indent';
-        this.decreaseIndent = 'Decrease Indent';
-        //#endregion
-        //#region DropDowns
-        this.align = 'Align';
-        this.font = 'Font';
-        this.fontSize = 'Font Size';
-        this.headingStyle = 'Heading';
-        //#endregion
-        //#region Single Buttons
-        this.clean = 'Clean';
-        this.formula = 'Formula';
-        this.rtl = 'Right-To-Left';
-        this.maximize = 'Maximize';
-        this.minimize = 'Minimize';
-        this.popout = 'Popout';
-        this.popin = 'Done';
-        this.rawEditor = 'Edit raw HTML (dangerous!)';
-        //#endregion
-    }
+class Tooltips {
+    constructor() {
+        //#region Font Style
+        this.bold = 'Bold';
+        this.italic = 'Italic';
+        this.strike = 'Strikethrough';
+        this.underline = 'Underline';
+        //#endregion
+        //#region Media
+        this.link = 'Link';
+        this.image = 'Insert Image';
+        this.video = 'Insert Video';
+        //#endregion
+        //#region Block Style
+        this.blockquote = 'Blockquote';
+        this.codeblock = 'Code Block';
+        //#endregion
+        //#region Heading Style
+        this.h1 = 'Heading 1';
+        this.h2 = 'Heading 2';
+        //#endregion
+        //#region Color
+        this.color = 'Font / Background Color';
+        //#endregion
+        //#region List Style
+        this.bulleted = 'Bulleted List';
+        this.ordered = 'Ordered List';
+        //#endregion
+        //#region Script Style
+        this.subScript = 'Subscript';
+        this.superScript = 'Superscript';
+        //#endregion
+        //#region Indent Style
+        this.increaseIndent = 'Increase Indent';
+        this.decreaseIndent = 'Decrease Indent';
+        //#endregion
+        //#region DropDowns
+        this.align = 'Align';
+        this.font = 'Font';
+        this.fontSize = 'Font Size';
+        this.headingStyle = 'Heading';
+        //#endregion
+        //#region Single Buttons
+        this.clean = 'Clean';
+        this.formula = 'Formula';
+        this.rtl = 'Right-To-Left';
+        this.maximize = 'Maximize';
+        this.minimize = 'Minimize';
+        this.popout = 'Popout';
+        this.popin = 'Done';
+        this.rawEditor = 'Edit raw HTML (dangerous!)';
+        //#endregion
+    }
 }
 
-class Config {
-    constructor() {
-        this.buttons = new Buttons();
-        this.tooltips = new Tooltips();
-        this.icons = new Icons();
-        //#region These can be overriden via @Input()
-        this.format = 'html';
-        this.height = '50vh';
-        this.width = '100%';
-        this.fullscreenHeight = '85vh';
-        this.fullscreenWidth = '100%';
-        this.enableTooltips = true;
-        this.fullscreen = false;
-        this.fullscreenMode = 'popout';
-        this.readonly = false;
-        this.applyReadonlyStyle = true;
-        this.showToolbar = true;
-        this.showBorder = true;
-        //#region Optional Quill modules
-        this.imageResizeModule = true;
-        this.imageDropModule = true;
-        //mentionModule = true;
-        this.syntaxModule = true;
-        //#endregion
-        //#endregion
-        //#region Groups
-        this.showBlockStyle = () => this.buttons.blockquote || this.buttons.codeblock;
-        this.showFontStyle = () => this.buttons.bold || this.buttons.italic || this.buttons.strike || this.buttons.underline;
-        this.showQuickHeadingStyle = () => this.buttons.h1 || this.buttons.h2;
-        this.showIndentStyle = () => this.buttons.decreaseIndent || this.buttons.increaseIndent;
-        this.showListStyle = () => this.buttons.bulleted || this.buttons.ordered;
-        this.showMedia = () => this.buttons.link || this.buttons.image || this.buttons.video;
-        this.showScriptStyle = () => this.buttons.subScript || this.buttons.superScript;
-        //#endregion
-    }
+class Config {
+    constructor() {
+        this.buttons = new Buttons();
+        this.tooltips = new Tooltips();
+        this.icons = new Icons();
+        //#region These can be overriden via @Input()
+        this.format = 'html';
+        this.height = '50vh';
+        this.width = '100%';
+        this.fullscreenHeight = '85vh';
+        this.fullscreenWidth = '100%';
+        this.enableTooltips = true;
+        this.fullscreen = false;
+        this.fullscreenMode = 'popout';
+        this.readonly = false;
+        this.applyReadonlyStyle = true;
+        this.showToolbar = true;
+        this.showBorder = true;
+        //#region Optional Quill modules
+        this.imageResizeModule = true;
+        this.imageDropModule = true;
+        //mentionModule = true;
+        this.syntaxModule = true;
+        //#endregion
+        //#endregion
+        //#region Groups
+        this.showBlockStyle = () => this.buttons.blockquote || this.buttons.codeblock;
+        this.showFontStyle = () => this.buttons.bold || this.buttons.italic || this.buttons.strike || this.buttons.underline;
+        this.showQuickHeadingStyle = () => this.buttons.h1 || this.buttons.h2;
+        this.showIndentStyle = () => this.buttons.decreaseIndent || this.buttons.increaseIndent;
+        this.showListStyle = () => this.buttons.bulleted || this.buttons.ordered;
+        this.showMedia = () => this.buttons.link || this.buttons.image || this.buttons.video;
+        this.showScriptStyle = () => this.buttons.subScript || this.buttons.superScript;
+        //#endregion
+    }
 }
 
-class RawComponent {
-    constructor(data) {
-        this.data = data;
-    }
-}
-RawComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RawComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-RawComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: RawComponent, selector: "cpquill-raw", ngImport: i0, template: "<mat-dialog-content>\n    <form>\n        <mat-form-field appearance=\"outline\">\n            <textarea matInput [(ngModel)]=\"data\" name=\"data\"></textarea>\n        </mat-form-field>\n    </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button mat-raised-button color=\"warn\" mat-dialog-close=\"__DO!!NOT!!UPDATE__\">\n        <mat-icon>cancel</mat-icon>\n        <span>Cancel</span>\n    </button>\n\n    <button mat-raised-button color=\"primary\" [mat-dialog-close]=\"data\">\n        <mat-icon>done</mat-icon>\n        <span>Accept</span>\n    </button>\n</mat-dialog-actions>", styles: ["mat-dialog-content{height:95%;max-height:initial!important}form{width:100%}mat-form-field{width:100%}textarea{height:70vh}\n"], dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RawComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cpquill-raw', template: "<mat-dialog-content>\n    <form>\n        <mat-form-field appearance=\"outline\">\n            <textarea matInput [(ngModel)]=\"data\" name=\"data\"></textarea>\n        </mat-form-field>\n    </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button mat-raised-button color=\"warn\" mat-dialog-close=\"__DO!!NOT!!UPDATE__\">\n        <mat-icon>cancel</mat-icon>\n        <span>Cancel</span>\n    </button>\n\n    <button mat-raised-button color=\"primary\" [mat-dialog-close]=\"data\">\n        <mat-icon>done</mat-icon>\n        <span>Accept</span>\n    </button>\n</mat-dialog-actions>", styles: ["mat-dialog-content{height:95%;max-height:initial!important}form{width:100%}mat-form-field{width:100%}textarea{height:70vh}\n"] }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
+class RawComponent {
+    constructor(data) {
+        this.data = data;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: RawComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: RawComponent, selector: "cpquill-raw", ngImport: i0, template: "<mat-dialog-content>\n    <form>\n        <mat-form-field appearance=\"outline\">\n            <textarea matInput [(ngModel)]=\"data\" name=\"data\"></textarea>\n        </mat-form-field>\n    </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button mat-raised-button color=\"warn\" mat-dialog-close=\"__DO!!NOT!!UPDATE__\">\n        <mat-icon>cancel</mat-icon>\n        <span>Cancel</span>\n    </button>\n\n    <button mat-raised-button color=\"primary\" [mat-dialog-close]=\"data\">\n        <mat-icon>done</mat-icon>\n        <span>Accept</span>\n    </button>\n</mat-dialog-actions>", styles: ["mat-dialog-content{height:95%;max-height:initial!important}form{width:100%}mat-form-field{width:100%}textarea{height:70vh}\n"], dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: RawComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cpquill-raw', template: "<mat-dialog-content>\n    <form>\n        <mat-form-field appearance=\"outline\">\n            <textarea matInput [(ngModel)]=\"data\" name=\"data\"></textarea>\n        </mat-form-field>\n    </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button mat-raised-button color=\"warn\" mat-dialog-close=\"__DO!!NOT!!UPDATE__\">\n        <mat-icon>cancel</mat-icon>\n        <span>Cancel</span>\n    </button>\n\n    <button mat-raised-button color=\"primary\" [mat-dialog-close]=\"data\">\n        <mat-icon>done</mat-icon>\n        <span>Accept</span>\n    </button>\n</mat-dialog-actions>", styles: ["mat-dialog-content{height:95%;max-height:initial!important}form{width:100%}mat-form-field{width:100%}textarea{height:70vh}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
                 }] }]; } });
 
-class EditorComponent {
-    //#endregion
-    constructor(data, dialogRef, 
-    //private activeDirectoryService: ActiveDirectoryService,
-    dialog) {
-        this.data = data;
-        this.dialogRef = dialogRef;
-        this.dialog = dialog;
-        this.onChange = (_) => { }; // Invoked when the model has been changed
-        this.onTouched = () => { }; // Invoked when the model has been touched
-        //#endregion
-        //#endregion
-        this.fullscreenChanged = new EventEmitter();
-        //#region Passthrough events
-        this.onBlur = new EventEmitter();
-        this.onContentChanged = new EventEmitter();
-        this.onEditorChanged = new EventEmitter();
-        this.onEditorCreated = new EventEmitter();
-        this.onFocus = new EventEmitter();
-        this.onSelectionChanged = new EventEmitter();
-    }
-    ngOnInit() {
-        this.initialize();
-        /*if (!this.users) {
-          this.activeDirectoryService.getUsers().subscribe(users =>
-            this.users = users
-          );
-        }*/
-    }
-    initialize() {
-        this.config = this.config ?? this.data?.config ?? new Config();
-        this.value = this.value ?? this.data?.value;
-        // Moved to client responsibility
-        /*if (this.imageDropModule) {
-          Quill.register('modules/imageDrop', ImageDrop);
-        }*/
-        this.placeholder = this.placeholder ?? this.data?.placeholder;
-        //this.users = this.users ?? this.data?.users;
-        this.imageDropModule = this.imageDropModule ?? this.data?.imageDropModule ?? this.config.imageDropModule;
-        this.imageResizeModule = this.imageResizeModule ?? this.data?.imageResizeModule ?? this.config.imageResizeModule;
-        this.syntaxModule = this.syntaxModule ?? this.data?.syntaxModule ?? this.config.syntaxModule;
-        this.format = this.format ?? this.data?.format ?? this.config.format;
-        this.height = this.height ?? this.data?.height ?? this.config.height;
-        this.width = this.width ?? this.data?.width ?? this.config.width;
-        this.fullscreenHeight = this.fullscreenHeight ?? this.data?.maxHeight ?? this.config.fullscreenHeight;
-        this.fullscreenWidth = this.fullscreenWidth ?? this.data?.maxWidth ?? this.config.fullscreenWidth;
-        this.fullscreenMode = this.fullscreenMode ?? this.data?.fullscreenMode ?? this.config.fullscreenMode;
-        this.enableTooltips = this.enableTooltips !== undefined ?
-            this.enableTooltips :
-            this.data?.enableTooltips ?? this.config.enableTooltips;
-        this.fullscreen = this.fullscreen !== undefined ?
-            this.fullscreen :
-            this.data?.fullscreen ?? this.config.fullscreen;
-        this.readonly = this.readonly !== undefined ?
-            this.readonly :
-            this.data?.readonly ?? this.config.readonly;
-        this.applyReadonlyStyle = this.applyReadonlyStyle !== undefined ?
-            this.applyReadonlyStyle :
-            this.data?.applyReadonlyStyle ?? this.config.applyReadonlyStyle;
-        this.showToolbar = this.showToolbar !== undefined ?
-            this.showToolbar :
-            this.data?.showToolbar ?? this.config.showToolbar;
-        this.showBorder = this.showBorder !== undefined ?
-            this.showBorder :
-            this.data?.showBorder ?? this.config.showBorder;
-    }
-    toggleFullscreen() {
-        if (this.fullscreenMode === 'expand') {
-            this.fullscreen = !this.fullscreen;
-            this.fullscreenChanged.emit(this.fullscreen);
-        }
-        else {
-            if (this.fullscreen) {
-                this.dialogRef.close(this.value);
-                this.fullscreenChanged.emit(false);
-            }
-            else {
-                const data = {
-                    value: this.value,
-                    config: this.config,
-                    placeholder: this.placeholder,
-                    format: this.format,
-                    height: this.fullscreenHeight,
-                    width: '100%',
-                    maxHeight: this.fullscreenHeight,
-                    maxWidth: '100%',
-                    enableTooltips: this.enableTooltips,
-                    fullscreen: true,
-                    fullscreenMode: this.fullscreenMode,
-                    readonly: this.readonly,
-                    applyReadonlyStyle: this.applyReadonlyStyle,
-                    showToolbar: this.showToolbar,
-                    showBorder: this.showBorder,
-                    imageResizeModule: this.imageResizeModule,
-                    imageDropModule: this.imageDropModule,
-                    syntaxModule: this.syntaxModule
-                    //users: this.users
-                };
-                this.dialog.open(EditorComponent, {
-                    disableClose: true,
-                    width: this.fullscreenWidth,
-                    height: this.fullscreenHeight,
-                    data
-                })
-                    .afterClosed()
-                    .subscribe(value => {
-                    this.value = value;
-                    this.updateChanges();
-                });
-                this.fullscreenChanged.emit(true);
-            }
-        }
-    }
-    rawEdit() {
-        this.dialog.open(RawComponent, {
-            data: this.value,
-            disableClose: true,
-            height: '90%',
-            width: '100%'
-        })
-            .afterClosed()
-            .subscribe(value => {
-            if (value === '__DO!!NOT!!UPDATE__') {
-                return;
-            }
-            this.value = value;
-        });
-    }
-    tooltip(val) {
-        return this.enableTooltips ? val : '';
-    }
-    get modules() {
-        //if (!this.users) { return undefined; }
-        const modules = {};
-        if (!this.showToolbar) {
-            modules['toolbar'] = [];
-        }
-        if (this.imageResizeModule) {
-            modules['imageResize'] = {};
-        }
-        if (this.imageDropModule) {
-            modules['imageDrop'] = true;
-        }
-        if (this.syntaxModule) {
-            modules['syntax'] = true;
-        }
-        /*if (this.mentionModule) {
-          modules['mention'] = {
-            allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
-    
-            onSelect: (item: DOMStringMap, insertItem: any) => {
-              const editor = this.editor!.quillEditor
-              insertItem(item)
-              // necessary because quill-mention triggers changes as 'api' instead of 'user'
-              editor.insertText(editor.getLength() - 1, '', 'user')
-            },
-    
-            source: (searchTerm: string, renderList: any) => {
-              if (searchTerm.length === 0) {
-                renderList(this.users?.map(u => ({ value: `${u.displayName} (${u.sAMAccountName.toLowerCase()})` })), searchTerm)
-              } else {
-                const matches: any[] = []
-    
-                this.users!.forEach((entry) => {
-                  if (
-                    entry.displayName.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1 ||
-                    entry.sAMAccountName.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1
-                    ) {
-                    matches.push({ value: `${entry.displayName} (${entry.sAMAccountName.toLowerCase()})` })
-                  }
-                })
-    
-                renderList(matches, searchTerm)
-              }
-            }
-          };
-        }*/
-        return modules;
-    }
-    //#region ControlValueAccessor methods
-    // Method that is invoked on an update of a model.
-    updateChanges() {
-        this.onChange(this.value);
-    }
-    //#region ControlValueAccessor Overrides
-    // Writes a new item to the element.
-    writeValue(value) {
-        this.value = value;
-        this.updateChanges();
-    }
-    // Registers a callback function that should be called when the control's value changes in the UI.
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    // Registers a callback function that should be called when the control receives a blur event.
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-}
-EditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: EditorComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: i1.MatDialogRef, optional: true }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: EditorComponent, selector: "cpquill-editor", inputs: { config: "config", placeholder: "placeholder", format: "format", height: "height", width: "width", fullscreenHeight: "fullscreenHeight", fullscreenWidth: "fullscreenWidth", fullscreenMode: "fullscreenMode", enableTooltips: "enableTooltips", fullscreen: "fullscreen", readonly: "readonly", applyReadonlyStyle: "applyReadonlyStyle", showToolbar: "showToolbar", showBorder: "showBorder", imageResizeModule: "imageResizeModule", imageDropModule: "imageDropModule", syntaxModule: "syntaxModule" }, outputs: { fullscreenChanged: "fullscreenChanged", onBlur: "onBlur", onContentChanged: "onContentChanged", onEditorChanged: "onEditorChanged", onEditorCreated: "onEditorCreated", onFocus: "onFocus", onSelectionChanged: "onSelectionChanged" }, providers: [{
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => EditorComponent),
-            multi: true
-        }], viewQueries: [{ propertyName: "editor", first: true, predicate: QuillEditorComponent, descendants: true }], ngImport: i0, template: "<ng-container>\r\n    <form>\r\n        <quill-editor name=\"editor\"\r\n            [(ngModel)]=\"value\"\r\n            (ngModelChange)=\"updateChanges()\"\r\n\r\n            [placeholder]=\"placeholder\"\r\n            [format]=\"format\"\r\n            [style.height]=\"fullscreen ? fullscreenHeight : height\"\r\n            [style.width]=\"fullscreen ? fullscreenWidth : width\"\r\n            [readOnly]=\"readonly\"\r\n            [class.readonly]=\"readonly && applyReadonlyStyle\"\r\n            [class.no-toolbar]=\"!showToolbar\"\r\n            [class.no-border]=\"!showBorder\"\r\n            [modules]=\"modules\"\r\n    \r\n            (onBlur)=\"onBlur.emit($event)\"\r\n            (onContentChanged)=\"onContentChanged.emit($event)\"\r\n            (onEditorChanged)=\"onEditorChanged.emit($event)\"\r\n            (onEditorCreated)=\"onEditorCreated.emit()\"\r\n            (onFocus)=\"onFocus.emit($event)\"\r\n            (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\r\n    \r\n            <div quill-editor-toolbar *ngIf=\"showToolbar\">\r\n                <ng-container [ngTemplateOutlet]=\"toolbar\"></ng-container>\r\n                <ng-container [ngTemplateOutlet]=\"editorSize\"></ng-container>\r\n            </div>\r\n        </quill-editor>\r\n    </form>\r\n</ng-container>\r\n\r\n<ng-template #toolbar>\r\n    <div>\r\n        <ng-container [ngTemplateOutlet]=\"fontStyle\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"blockStyle\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"headingStyle\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"listStyle\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"scriptStyle\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"indentStyle\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"rtl\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"fontSize\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"heading\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"color\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"font\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"align\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"clean\"></ng-container>\r\n        <nt-container [ngTemplateOutlet]=\"formula\"></nt-container>\r\n        <ng-container [ngTemplateOutlet]=\"media\"></ng-container>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #fontStyle>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showFontStyle\">\r\n        <button class=\"ql-bold\"      *ngIf=\"config!.buttons.bold\"      [matTooltip]=\"tooltip(config!.tooltips.bold)\"></button>\r\n        <button class=\"ql-italic\"    *ngIf=\"config!.buttons.italic\"    [matTooltip]=\"tooltip(config!.tooltips.italic)\"></button>\r\n        <button class=\"ql-underline\" *ngIf=\"config!.buttons.underline\" [matTooltip]=\"tooltip(config!.tooltips.underline)\"></button>\r\n        <button class=\"ql-strike\"    *ngIf=\"config!.buttons.strike\"    [matTooltip]=\"tooltip(config!.tooltips.strike)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #blockStyle>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showBlockStyle\">\r\n        <button class=\"ql-blockquote\" *ngIf=\"config!.buttons.blockquote\" [matTooltip]=\"tooltip(config!.tooltips.blockquote)\"></button>\r\n        <button class=\"ql-code-block\" *ngIf=\"config!.buttons.codeblock\"  [matTooltip]=\"tooltip(config!.tooltips.codeblock)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #headingStyle>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showQuickHeadingStyle\">\r\n        <button class=\"ql-header\" value=\"1\" *ngIf=\"config!.buttons.h1\" [matTooltip]=\"tooltip(config!.tooltips.h1)\"></button>\r\n        <button class=\"ql-header\" value=\"2\" *ngIf=\"config!.buttons.h2\" [matTooltip]=\"tooltip(config!.tooltips.h2)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #listStyle>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showListStyle\">\r\n        <button class=\"ql-list\" value=\"ordered\" *ngIf=\"config!.buttons.ordered\"  [matTooltip]=\"tooltip(config!.tooltips.ordered)\"></button>\r\n        <button class=\"ql-list\" value=\"bullet\"  *ngIf=\"config!.buttons.bulleted\" [matTooltip]=\"tooltip(config!.tooltips.bulleted)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #scriptStyle>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showScriptStyle\">\r\n        <button class=\"ql-script\" value=\"sub\"   *ngIf=\"config!.buttons.subScript\" [matTooltip]=\"tooltip(config!.tooltips.subScript)\"></button>\r\n        <button class=\"ql-script\" value=\"super\" *ngIf=\"config!.buttons.superScript\" [matTooltip]=\"tooltip(config!.tooltips.superScript)\"></button>\r\n    </span>\r\n</ng-template>\r\n    \r\n<ng-template #indentStyle>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showIndentStyle\">\r\n        <button class=\"ql-indent\" value=\"-1\" *ngIf=\"config!.buttons.decreaseIndent\" [matTooltip]=\"tooltip(config!.tooltips.decreaseIndent)\"></button>\r\n        <button class=\"ql-indent\" value=\"+1\" *ngIf=\"config!.buttons.increaseIndent\" [matTooltip]=\"tooltip(config!.tooltips.increaseIndent)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #rtl>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.rtl\">\r\n        <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config!.tooltips.rtl)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #fontSize>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.fontSize\" [matTooltip]=\"tooltip(config!.tooltips.fontSize)\">\r\n        <select class=\"ql-size\">\r\n            <option value=\"small\"></option>\r\n            <option selected></option>\r\n            <option value=\"large\"></option>\r\n            <option value=\"huge\"></option>\r\n        </select>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #heading>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.headingStyle\" [matTooltip]=\"tooltip(config!.tooltips.headingStyle)\">\r\n        <select class=\"ql-header\">\r\n            <option value=\"1\"></option>\r\n            <option value=\"2\"></option>\r\n            <option value=\"3\"></option>\r\n            <option value=\"4\"></option>\r\n            <option value=\"5\"></option>\r\n            <option value=\"6\"></option>\r\n            <option selected=\"selected\"></option>\r\n        </select>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #color>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.color\" [matTooltip]=\"tooltip(config!.tooltips.color)\">\r\n        <select class=\"ql-color\"></select>\r\n        <select class=\"ql-background\"></select>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #font>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.font\" [matTooltip]=\"tooltip(config!.tooltips.font)\">\r\n        <select class=\"ql-font\">\r\n            <option selected></option>\r\n            <option value=\"serif\"></option>\r\n            <option value=\"monospace\"></option>\r\n        </select>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #align>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.align\" [matTooltip]=\"tooltip(config!.tooltips.align)\">\r\n        <select class=\"ql-align\">\r\n            <option selected></option>\r\n            <option value=\"center\"></option>\r\n            <option value=\"right\"></option>\r\n            <option value=\"justify\"></option>\r\n        </select>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #clean>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.clean\" [matTooltip]=\"tooltip(config!.tooltips.clean)\">\r\n        <button class=\"ql-clean\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #media>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showMedia\">\r\n        <button class=\"ql-link\"  *ngIf=\"config!.buttons.link\" [matTooltip]=\"tooltip(config!.tooltips.link)\"></button>\r\n        <button class=\"ql-image\" *ngIf=\"config!.buttons.image\" [matTooltip]=\"tooltip(config!.tooltips.image)\"></button>\r\n        <button class=\"ql-video\" *ngIf=\"config!.buttons.video\" [matTooltip]=\"tooltip(config!.tooltips.video)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #editorSize>\r\n    <div>\r\n        <span class=\"ql-formats\" *ngIf=\"config!.buttons.rawEditor\">\r\n            <button id=\"rawdog\"\r\n                [matTooltip]=\"tooltip(config!.tooltips.rawEditor)\">\r\n\r\n                <mat-icon (click)=\"rawEdit()\">\r\n                    code\r\n                </mat-icon>\r\n            </button>\r\n        </span>\r\n\r\n        <span class=\"ql-formats\" *ngIf=\"config!.buttons.editorSize\">\r\n            <button id=\"fullscreen\"\r\n                [matTooltip]=\"tooltip(fullscreen ?\r\n                    (fullscreenMode === 'expand' ? config!.tooltips.minimize : config!.tooltips.popin) :\r\n                    (fullscreenMode === 'expand' ? config!.tooltips.maximize : config!.tooltips.popout))\">\r\n\r\n                <mat-icon (click)=\"toggleFullscreen()\">\r\n                    {{ fullscreen ?\r\n                        (fullscreenMode === 'expand' ? config!.icons.minimize : config!.icons.popin) :\r\n                        (fullscreenMode === 'expand' ? config!.icons.maximize : config!.icons.popout)\r\n                    }}\r\n                </mat-icon>\r\n            </button>\r\n        </span>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #formula>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.formula\" [matTooltip]=\"tooltip(config!.tooltips.formula)\">\r\n        <button class=\"ql-formula\"></button>\r\n    </span>\r\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6$1.QuillEditorComponent, selector: "quill-editor" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: EditorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cpquill-editor', providers: [{
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => EditorComponent),
-                            multi: true
-                        }], template: "<ng-container>\r\n    <form>\r\n        <quill-editor name=\"editor\"\r\n            [(ngModel)]=\"value\"\r\n            (ngModelChange)=\"updateChanges()\"\r\n\r\n            [placeholder]=\"placeholder\"\r\n            [format]=\"format\"\r\n            [style.height]=\"fullscreen ? fullscreenHeight : height\"\r\n            [style.width]=\"fullscreen ? fullscreenWidth : width\"\r\n            [readOnly]=\"readonly\"\r\n            [class.readonly]=\"readonly && applyReadonlyStyle\"\r\n            [class.no-toolbar]=\"!showToolbar\"\r\n            [class.no-border]=\"!showBorder\"\r\n            [modules]=\"modules\"\r\n    \r\n            (onBlur)=\"onBlur.emit($event)\"\r\n            (onContentChanged)=\"onContentChanged.emit($event)\"\r\n            (onEditorChanged)=\"onEditorChanged.emit($event)\"\r\n            (onEditorCreated)=\"onEditorCreated.emit()\"\r\n            (onFocus)=\"onFocus.emit($event)\"\r\n            (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\r\n    \r\n            <div quill-editor-toolbar *ngIf=\"showToolbar\">\r\n                <ng-container [ngTemplateOutlet]=\"toolbar\"></ng-container>\r\n                <ng-container [ngTemplateOutlet]=\"editorSize\"></ng-container>\r\n            </div>\r\n        </quill-editor>\r\n    </form>\r\n</ng-container>\r\n\r\n<ng-template #toolbar>\r\n    <div>\r\n        <ng-container [ngTemplateOutlet]=\"fontStyle\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"blockStyle\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"headingStyle\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"listStyle\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"scriptStyle\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"indentStyle\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"rtl\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"fontSize\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"heading\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"color\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"font\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"align\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"clean\"></ng-container>\r\n        <nt-container [ngTemplateOutlet]=\"formula\"></nt-container>\r\n        <ng-container [ngTemplateOutlet]=\"media\"></ng-container>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #fontStyle>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showFontStyle\">\r\n        <button class=\"ql-bold\"      *ngIf=\"config!.buttons.bold\"      [matTooltip]=\"tooltip(config!.tooltips.bold)\"></button>\r\n        <button class=\"ql-italic\"    *ngIf=\"config!.buttons.italic\"    [matTooltip]=\"tooltip(config!.tooltips.italic)\"></button>\r\n        <button class=\"ql-underline\" *ngIf=\"config!.buttons.underline\" [matTooltip]=\"tooltip(config!.tooltips.underline)\"></button>\r\n        <button class=\"ql-strike\"    *ngIf=\"config!.buttons.strike\"    [matTooltip]=\"tooltip(config!.tooltips.strike)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #blockStyle>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showBlockStyle\">\r\n        <button class=\"ql-blockquote\" *ngIf=\"config!.buttons.blockquote\" [matTooltip]=\"tooltip(config!.tooltips.blockquote)\"></button>\r\n        <button class=\"ql-code-block\" *ngIf=\"config!.buttons.codeblock\"  [matTooltip]=\"tooltip(config!.tooltips.codeblock)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #headingStyle>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showQuickHeadingStyle\">\r\n        <button class=\"ql-header\" value=\"1\" *ngIf=\"config!.buttons.h1\" [matTooltip]=\"tooltip(config!.tooltips.h1)\"></button>\r\n        <button class=\"ql-header\" value=\"2\" *ngIf=\"config!.buttons.h2\" [matTooltip]=\"tooltip(config!.tooltips.h2)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #listStyle>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showListStyle\">\r\n        <button class=\"ql-list\" value=\"ordered\" *ngIf=\"config!.buttons.ordered\"  [matTooltip]=\"tooltip(config!.tooltips.ordered)\"></button>\r\n        <button class=\"ql-list\" value=\"bullet\"  *ngIf=\"config!.buttons.bulleted\" [matTooltip]=\"tooltip(config!.tooltips.bulleted)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #scriptStyle>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showScriptStyle\">\r\n        <button class=\"ql-script\" value=\"sub\"   *ngIf=\"config!.buttons.subScript\" [matTooltip]=\"tooltip(config!.tooltips.subScript)\"></button>\r\n        <button class=\"ql-script\" value=\"super\" *ngIf=\"config!.buttons.superScript\" [matTooltip]=\"tooltip(config!.tooltips.superScript)\"></button>\r\n    </span>\r\n</ng-template>\r\n    \r\n<ng-template #indentStyle>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showIndentStyle\">\r\n        <button class=\"ql-indent\" value=\"-1\" *ngIf=\"config!.buttons.decreaseIndent\" [matTooltip]=\"tooltip(config!.tooltips.decreaseIndent)\"></button>\r\n        <button class=\"ql-indent\" value=\"+1\" *ngIf=\"config!.buttons.increaseIndent\" [matTooltip]=\"tooltip(config!.tooltips.increaseIndent)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #rtl>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.rtl\">\r\n        <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config!.tooltips.rtl)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #fontSize>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.fontSize\" [matTooltip]=\"tooltip(config!.tooltips.fontSize)\">\r\n        <select class=\"ql-size\">\r\n            <option value=\"small\"></option>\r\n            <option selected></option>\r\n            <option value=\"large\"></option>\r\n            <option value=\"huge\"></option>\r\n        </select>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #heading>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.headingStyle\" [matTooltip]=\"tooltip(config!.tooltips.headingStyle)\">\r\n        <select class=\"ql-header\">\r\n            <option value=\"1\"></option>\r\n            <option value=\"2\"></option>\r\n            <option value=\"3\"></option>\r\n            <option value=\"4\"></option>\r\n            <option value=\"5\"></option>\r\n            <option value=\"6\"></option>\r\n            <option selected=\"selected\"></option>\r\n        </select>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #color>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.color\" [matTooltip]=\"tooltip(config!.tooltips.color)\">\r\n        <select class=\"ql-color\"></select>\r\n        <select class=\"ql-background\"></select>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #font>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.font\" [matTooltip]=\"tooltip(config!.tooltips.font)\">\r\n        <select class=\"ql-font\">\r\n            <option selected></option>\r\n            <option value=\"serif\"></option>\r\n            <option value=\"monospace\"></option>\r\n        </select>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #align>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.align\" [matTooltip]=\"tooltip(config!.tooltips.align)\">\r\n        <select class=\"ql-align\">\r\n            <option selected></option>\r\n            <option value=\"center\"></option>\r\n            <option value=\"right\"></option>\r\n            <option value=\"justify\"></option>\r\n        </select>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #clean>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.clean\" [matTooltip]=\"tooltip(config!.tooltips.clean)\">\r\n        <button class=\"ql-clean\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #media>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showMedia\">\r\n        <button class=\"ql-link\"  *ngIf=\"config!.buttons.link\" [matTooltip]=\"tooltip(config!.tooltips.link)\"></button>\r\n        <button class=\"ql-image\" *ngIf=\"config!.buttons.image\" [matTooltip]=\"tooltip(config!.tooltips.image)\"></button>\r\n        <button class=\"ql-video\" *ngIf=\"config!.buttons.video\" [matTooltip]=\"tooltip(config!.tooltips.video)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #editorSize>\r\n    <div>\r\n        <span class=\"ql-formats\" *ngIf=\"config!.buttons.rawEditor\">\r\n            <button id=\"rawdog\"\r\n                [matTooltip]=\"tooltip(config!.tooltips.rawEditor)\">\r\n\r\n                <mat-icon (click)=\"rawEdit()\">\r\n                    code\r\n                </mat-icon>\r\n            </button>\r\n        </span>\r\n\r\n        <span class=\"ql-formats\" *ngIf=\"config!.buttons.editorSize\">\r\n            <button id=\"fullscreen\"\r\n                [matTooltip]=\"tooltip(fullscreen ?\r\n                    (fullscreenMode === 'expand' ? config!.tooltips.minimize : config!.tooltips.popin) :\r\n                    (fullscreenMode === 'expand' ? config!.tooltips.maximize : config!.tooltips.popout))\">\r\n\r\n                <mat-icon (click)=\"toggleFullscreen()\">\r\n                    {{ fullscreen ?\r\n                        (fullscreenMode === 'expand' ? config!.icons.minimize : config!.icons.popin) :\r\n                        (fullscreenMode === 'expand' ? config!.icons.maximize : config!.icons.popout)\r\n                    }}\r\n                </mat-icon>\r\n            </button>\r\n        </span>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #formula>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.formula\" [matTooltip]=\"tooltip(config!.tooltips.formula)\">\r\n        <button class=\"ql-formula\"></button>\r\n    </span>\r\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i1.MatDialogRef, decorators: [{
-                    type: Optional
-                }] }, { type: i1.MatDialog }]; }, propDecorators: { editor: [{
-                type: ViewChild,
-                args: [QuillEditorComponent, { static: false }]
-            }], config: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], format: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], fullscreenHeight: [{
-                type: Input
-            }], fullscreenWidth: [{
-                type: Input
-            }], fullscreenMode: [{
-                type: Input
-            }], enableTooltips: [{
-                type: Input
-            }], fullscreen: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], applyReadonlyStyle: [{
-                type: Input
-            }], showToolbar: [{
-                type: Input
-            }], showBorder: [{
-                type: Input
-            }], imageResizeModule: [{
-                type: Input
-            }], imageDropModule: [{
-                type: Input
-            }], syntaxModule: [{
-                type: Input
-            }], fullscreenChanged: [{
-                type: Output
-            }], onBlur: [{
-                type: Output
-            }], onContentChanged: [{
-                type: Output
-            }], onEditorChanged: [{
-                type: Output
-            }], onEditorCreated: [{
-                type: Output
-            }], onFocus: [{
-                type: Output
-            }], onSelectionChanged: [{
-                type: Output
+class EditorComponent {
+    //#endregion
+    constructor(data, dialogRef, 
+    //private activeDirectoryService: ActiveDirectoryService,
+    dialog) {
+        this.data = data;
+        this.dialogRef = dialogRef;
+        this.dialog = dialog;
+        this.onChange = (_) => { }; // Invoked when the model has been changed
+        this.onTouched = () => { }; // Invoked when the model has been touched
+        //#endregion
+        //#endregion
+        this.fullscreenChanged = new EventEmitter();
+        //#region Passthrough events
+        this.onBlur = new EventEmitter();
+        this.onContentChanged = new EventEmitter();
+        this.onEditorChanged = new EventEmitter();
+        this.onEditorCreated = new EventEmitter();
+        this.onFocus = new EventEmitter();
+        this.onSelectionChanged = new EventEmitter();
+    }
+    ngOnInit() {
+        this.initialize();
+        /*if (!this.users) {
+          this.activeDirectoryService.getUsers().subscribe(users =>
+            this.users = users
+          );
+        }*/
+    }
+    initialize() {
+        this.config = this.config ?? this.data?.config ?? new Config();
+        this.value = this.value ?? this.data?.value;
+        // Moved to client responsibility
+        /*if (this.imageDropModule) {
+          Quill.register('modules/imageDrop', ImageDrop);
+        }*/
+        this.placeholder = this.placeholder ?? this.data?.placeholder;
+        //this.users = this.users ?? this.data?.users;
+        this.imageDropModule = this.imageDropModule ?? this.data?.imageDropModule ?? this.config.imageDropModule;
+        this.imageResizeModule = this.imageResizeModule ?? this.data?.imageResizeModule ?? this.config.imageResizeModule;
+        this.syntaxModule = this.syntaxModule ?? this.data?.syntaxModule ?? this.config.syntaxModule;
+        this.format = this.format ?? this.data?.format ?? this.config.format;
+        this.height = this.height ?? this.data?.height ?? this.config.height;
+        this.width = this.width ?? this.data?.width ?? this.config.width;
+        this.fullscreenHeight = this.fullscreenHeight ?? this.data?.maxHeight ?? this.config.fullscreenHeight;
+        this.fullscreenWidth = this.fullscreenWidth ?? this.data?.maxWidth ?? this.config.fullscreenWidth;
+        this.fullscreenMode = this.fullscreenMode ?? this.data?.fullscreenMode ?? this.config.fullscreenMode;
+        this.enableTooltips = this.enableTooltips !== undefined ?
+            this.enableTooltips :
+            this.data?.enableTooltips ?? this.config.enableTooltips;
+        this.fullscreen = this.fullscreen !== undefined ?
+            this.fullscreen :
+            this.data?.fullscreen ?? this.config.fullscreen;
+        this.readonly = this.readonly !== undefined ?
+            this.readonly :
+            this.data?.readonly ?? this.config.readonly;
+        this.applyReadonlyStyle = this.applyReadonlyStyle !== undefined ?
+            this.applyReadonlyStyle :
+            this.data?.applyReadonlyStyle ?? this.config.applyReadonlyStyle;
+        this.showToolbar = this.showToolbar !== undefined ?
+            this.showToolbar :
+            this.data?.showToolbar ?? this.config.showToolbar;
+        this.showBorder = this.showBorder !== undefined ?
+            this.showBorder :
+            this.data?.showBorder ?? this.config.showBorder;
+    }
+    toggleFullscreen() {
+        if (this.fullscreenMode === 'expand') {
+            this.fullscreen = !this.fullscreen;
+            this.fullscreenChanged.emit(this.fullscreen);
+        }
+        else {
+            if (this.fullscreen) {
+                this.dialogRef.close(this.value);
+                this.fullscreenChanged.emit(false);
+            }
+            else {
+                const data = {
+                    value: this.value,
+                    config: this.config,
+                    placeholder: this.placeholder,
+                    format: this.format,
+                    height: this.fullscreenHeight,
+                    width: '100%',
+                    maxHeight: this.fullscreenHeight,
+                    maxWidth: '100%',
+                    enableTooltips: this.enableTooltips,
+                    fullscreen: true,
+                    fullscreenMode: this.fullscreenMode,
+                    readonly: this.readonly,
+                    applyReadonlyStyle: this.applyReadonlyStyle,
+                    showToolbar: this.showToolbar,
+                    showBorder: this.showBorder,
+                    imageResizeModule: this.imageResizeModule,
+                    imageDropModule: this.imageDropModule,
+                    syntaxModule: this.syntaxModule
+                    //users: this.users
+                };
+                this.dialog.open(EditorComponent, {
+                    disableClose: true,
+                    width: this.fullscreenWidth,
+                    height: this.fullscreenHeight,
+                    data
+                })
+                    .afterClosed()
+                    .subscribe(value => {
+                    this.value = value;
+                    this.updateChanges();
+                });
+                this.fullscreenChanged.emit(true);
+            }
+        }
+    }
+    rawEdit() {
+        this.dialog.open(RawComponent, {
+            data: this.value,
+            disableClose: true,
+            height: '90%',
+            width: '100%'
+        })
+            .afterClosed()
+            .subscribe(value => {
+            if (value === '__DO!!NOT!!UPDATE__') {
+                return;
+            }
+            this.value = value;
+        });
+    }
+    tooltip(val) {
+        return this.enableTooltips ? val : '';
+    }
+    get modules() {
+        //if (!this.users) { return undefined; }
+        const modules = {};
+        if (!this.showToolbar) {
+            modules['toolbar'] = [];
+        }
+        if (this.imageResizeModule) {
+            modules['imageResize'] = {};
+        }
+        if (this.imageDropModule) {
+            modules['imageDrop'] = true;
+        }
+        if (this.syntaxModule) {
+            modules['syntax'] = true;
+        }
+        /*if (this.mentionModule) {
+          modules['mention'] = {
+            allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
+    
+            onSelect: (item: DOMStringMap, insertItem: any) => {
+              const editor = this.editor!.quillEditor
+              insertItem(item)
+              // necessary because quill-mention triggers changes as 'api' instead of 'user'
+              editor.insertText(editor.getLength() - 1, '', 'user')
+            },
+    
+            source: (searchTerm: string, renderList: any) => {
+              if (searchTerm.length === 0) {
+                renderList(this.users?.map(u => ({ value: `${u.displayName} (${u.sAMAccountName.toLowerCase()})` })), searchTerm)
+              } else {
+                const matches: any[] = []
+    
+                this.users!.forEach((entry) => {
+                  if (
+                    entry.displayName.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1 ||
+                    entry.sAMAccountName.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1
+                    ) {
+                    matches.push({ value: `${entry.displayName} (${entry.sAMAccountName.toLowerCase()})` })
+                  }
+                })
+    
+                renderList(matches, searchTerm)
+              }
+            }
+          };
+        }*/
+        return modules;
+    }
+    //#region ControlValueAccessor methods
+    // Method that is invoked on an update of a model.
+    updateChanges() {
+        this.onChange(this.value);
+    }
+    //#region ControlValueAccessor Overrides
+    // Writes a new item to the element.
+    writeValue(value) {
+        this.value = value;
+        this.updateChanges();
+    }
+    // Registers a callback function that should be called when the control's value changes in the UI.
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    // Registers a callback function that should be called when the control receives a blur event.
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: EditorComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: i1.MatDialogRef, optional: true }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: EditorComponent, selector: "cpquill-editor", inputs: { config: "config", placeholder: "placeholder", format: "format", height: "height", width: "width", fullscreenHeight: "fullscreenHeight", fullscreenWidth: "fullscreenWidth", fullscreenMode: "fullscreenMode", enableTooltips: "enableTooltips", fullscreen: "fullscreen", readonly: "readonly", applyReadonlyStyle: "applyReadonlyStyle", showToolbar: "showToolbar", showBorder: "showBorder", imageResizeModule: "imageResizeModule", imageDropModule: "imageDropModule", syntaxModule: "syntaxModule" }, outputs: { fullscreenChanged: "fullscreenChanged", onBlur: "onBlur", onContentChanged: "onContentChanged", onEditorChanged: "onEditorChanged", onEditorCreated: "onEditorCreated", onFocus: "onFocus", onSelectionChanged: "onSelectionChanged" }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => EditorComponent),
+                multi: true
+            }], viewQueries: [{ propertyName: "editor", first: true, predicate: QuillEditorComponent, descendants: true }], ngImport: i0, template: "<ng-container>\r\n    <form>\r\n        <quill-editor name=\"editor\"\r\n            [(ngModel)]=\"value\"\r\n            (ngModelChange)=\"updateChanges()\"\r\n\r\n            [placeholder]=\"placeholder\"\r\n            [format]=\"format\"\r\n            [style.height]=\"fullscreen ? fullscreenHeight : height\"\r\n            [style.width]=\"fullscreen ? fullscreenWidth : width\"\r\n            [readOnly]=\"readonly\"\r\n            [class.readonly]=\"readonly && applyReadonlyStyle\"\r\n            [class.no-toolbar]=\"!showToolbar\"\r\n            [class.no-border]=\"!showBorder\"\r\n            [modules]=\"modules\"\r\n    \r\n            (onBlur)=\"onBlur.emit($event)\"\r\n            (onContentChanged)=\"onContentChanged.emit($event)\"\r\n            (onEditorChanged)=\"onEditorChanged.emit($event)\"\r\n            (onEditorCreated)=\"onEditorCreated.emit()\"\r\n            (onFocus)=\"onFocus.emit($event)\"\r\n            (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\r\n    \r\n            <div quill-editor-toolbar *ngIf=\"showToolbar\">\r\n                <ng-container [ngTemplateOutlet]=\"toolbar\"></ng-container>\r\n                <ng-container [ngTemplateOutlet]=\"editorSize\"></ng-container>\r\n            </div>\r\n        </quill-editor>\r\n    </form>\r\n</ng-container>\r\n\r\n<ng-template #toolbar>\r\n    <div>\r\n        <ng-container [ngTemplateOutlet]=\"fontStyle\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"blockStyle\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"headingStyle\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"listStyle\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"scriptStyle\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"indentStyle\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"rtl\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"fontSize\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"heading\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"color\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"font\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"align\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"clean\"></ng-container>\r\n        <nt-container [ngTemplateOutlet]=\"formula\"></nt-container>\r\n        <ng-container [ngTemplateOutlet]=\"media\"></ng-container>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #fontStyle>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showFontStyle\">\r\n        <button class=\"ql-bold\"      *ngIf=\"config!.buttons.bold\"      [matTooltip]=\"tooltip(config!.tooltips.bold)\"></button>\r\n        <button class=\"ql-italic\"    *ngIf=\"config!.buttons.italic\"    [matTooltip]=\"tooltip(config!.tooltips.italic)\"></button>\r\n        <button class=\"ql-underline\" *ngIf=\"config!.buttons.underline\" [matTooltip]=\"tooltip(config!.tooltips.underline)\"></button>\r\n        <button class=\"ql-strike\"    *ngIf=\"config!.buttons.strike\"    [matTooltip]=\"tooltip(config!.tooltips.strike)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #blockStyle>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showBlockStyle\">\r\n        <button class=\"ql-blockquote\" *ngIf=\"config!.buttons.blockquote\" [matTooltip]=\"tooltip(config!.tooltips.blockquote)\"></button>\r\n        <button class=\"ql-code-block\" *ngIf=\"config!.buttons.codeblock\"  [matTooltip]=\"tooltip(config!.tooltips.codeblock)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #headingStyle>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showQuickHeadingStyle\">\r\n        <button class=\"ql-header\" value=\"1\" *ngIf=\"config!.buttons.h1\" [matTooltip]=\"tooltip(config!.tooltips.h1)\"></button>\r\n        <button class=\"ql-header\" value=\"2\" *ngIf=\"config!.buttons.h2\" [matTooltip]=\"tooltip(config!.tooltips.h2)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #listStyle>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showListStyle\">\r\n        <button class=\"ql-list\" value=\"ordered\" *ngIf=\"config!.buttons.ordered\"  [matTooltip]=\"tooltip(config!.tooltips.ordered)\"></button>\r\n        <button class=\"ql-list\" value=\"bullet\"  *ngIf=\"config!.buttons.bulleted\" [matTooltip]=\"tooltip(config!.tooltips.bulleted)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #scriptStyle>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showScriptStyle\">\r\n        <button class=\"ql-script\" value=\"sub\"   *ngIf=\"config!.buttons.subScript\" [matTooltip]=\"tooltip(config!.tooltips.subScript)\"></button>\r\n        <button class=\"ql-script\" value=\"super\" *ngIf=\"config!.buttons.superScript\" [matTooltip]=\"tooltip(config!.tooltips.superScript)\"></button>\r\n    </span>\r\n</ng-template>\r\n    \r\n<ng-template #indentStyle>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showIndentStyle\">\r\n        <button class=\"ql-indent\" value=\"-1\" *ngIf=\"config!.buttons.decreaseIndent\" [matTooltip]=\"tooltip(config!.tooltips.decreaseIndent)\"></button>\r\n        <button class=\"ql-indent\" value=\"+1\" *ngIf=\"config!.buttons.increaseIndent\" [matTooltip]=\"tooltip(config!.tooltips.increaseIndent)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #rtl>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.rtl\">\r\n        <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config!.tooltips.rtl)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #fontSize>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.fontSize\" [matTooltip]=\"tooltip(config!.tooltips.fontSize)\">\r\n        <select class=\"ql-size\">\r\n            <option value=\"small\"></option>\r\n            <option selected></option>\r\n            <option value=\"large\"></option>\r\n            <option value=\"huge\"></option>\r\n        </select>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #heading>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.headingStyle\" [matTooltip]=\"tooltip(config!.tooltips.headingStyle)\">\r\n        <select class=\"ql-header\">\r\n            <option value=\"1\"></option>\r\n            <option value=\"2\"></option>\r\n            <option value=\"3\"></option>\r\n            <option value=\"4\"></option>\r\n            <option value=\"5\"></option>\r\n            <option value=\"6\"></option>\r\n            <option selected=\"selected\"></option>\r\n        </select>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #color>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.color\" [matTooltip]=\"tooltip(config!.tooltips.color)\">\r\n        <select class=\"ql-color\"></select>\r\n        <select class=\"ql-background\"></select>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #font>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.font\" [matTooltip]=\"tooltip(config!.tooltips.font)\">\r\n        <select class=\"ql-font\">\r\n            <option selected></option>\r\n            <option value=\"serif\"></option>\r\n            <option value=\"monospace\"></option>\r\n        </select>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #align>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.align\" [matTooltip]=\"tooltip(config!.tooltips.align)\">\r\n        <select class=\"ql-align\">\r\n            <option selected></option>\r\n            <option value=\"center\"></option>\r\n            <option value=\"right\"></option>\r\n            <option value=\"justify\"></option>\r\n        </select>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #clean>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.clean\" [matTooltip]=\"tooltip(config!.tooltips.clean)\">\r\n        <button class=\"ql-clean\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #media>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showMedia\">\r\n        <button class=\"ql-link\"  *ngIf=\"config!.buttons.link\" [matTooltip]=\"tooltip(config!.tooltips.link)\"></button>\r\n        <button class=\"ql-image\" *ngIf=\"config!.buttons.image\" [matTooltip]=\"tooltip(config!.tooltips.image)\"></button>\r\n        <button class=\"ql-video\" *ngIf=\"config!.buttons.video\" [matTooltip]=\"tooltip(config!.tooltips.video)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #editorSize>\r\n    <div>\r\n        <span class=\"ql-formats\" *ngIf=\"config!.buttons.rawEditor\">\r\n            <button id=\"rawdog\"\r\n                [matTooltip]=\"tooltip(config!.tooltips.rawEditor)\">\r\n\r\n                <mat-icon (click)=\"rawEdit()\">\r\n                    code\r\n                </mat-icon>\r\n            </button>\r\n        </span>\r\n\r\n        <span class=\"ql-formats\" *ngIf=\"config!.buttons.editorSize\">\r\n            <button id=\"fullscreen\"\r\n                [matTooltip]=\"tooltip(fullscreen ?\r\n                    (fullscreenMode === 'expand' ? config!.tooltips.minimize : config!.tooltips.popin) :\r\n                    (fullscreenMode === 'expand' ? config!.tooltips.maximize : config!.tooltips.popout))\">\r\n\r\n                <mat-icon (click)=\"toggleFullscreen()\">\r\n                    {{ fullscreen ?\r\n                        (fullscreenMode === 'expand' ? config!.icons.minimize : config!.icons.popin) :\r\n                        (fullscreenMode === 'expand' ? config!.icons.maximize : config!.icons.popout)\r\n                    }}\r\n                </mat-icon>\r\n            </button>\r\n        </span>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #formula>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.formula\" [matTooltip]=\"tooltip(config!.tooltips.formula)\">\r\n        <button class=\"ql-formula\"></button>\r\n    </span>\r\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6$1.QuillEditorComponent, selector: "quill-editor" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: EditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cpquill-editor', providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => EditorComponent),
+                            multi: true
+                        }], template: "<ng-container>\r\n    <form>\r\n        <quill-editor name=\"editor\"\r\n            [(ngModel)]=\"value\"\r\n            (ngModelChange)=\"updateChanges()\"\r\n\r\n            [placeholder]=\"placeholder\"\r\n            [format]=\"format\"\r\n            [style.height]=\"fullscreen ? fullscreenHeight : height\"\r\n            [style.width]=\"fullscreen ? fullscreenWidth : width\"\r\n            [readOnly]=\"readonly\"\r\n            [class.readonly]=\"readonly && applyReadonlyStyle\"\r\n            [class.no-toolbar]=\"!showToolbar\"\r\n            [class.no-border]=\"!showBorder\"\r\n            [modules]=\"modules\"\r\n    \r\n            (onBlur)=\"onBlur.emit($event)\"\r\n            (onContentChanged)=\"onContentChanged.emit($event)\"\r\n            (onEditorChanged)=\"onEditorChanged.emit($event)\"\r\n            (onEditorCreated)=\"onEditorCreated.emit()\"\r\n            (onFocus)=\"onFocus.emit($event)\"\r\n            (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\r\n    \r\n            <div quill-editor-toolbar *ngIf=\"showToolbar\">\r\n                <ng-container [ngTemplateOutlet]=\"toolbar\"></ng-container>\r\n                <ng-container [ngTemplateOutlet]=\"editorSize\"></ng-container>\r\n            </div>\r\n        </quill-editor>\r\n    </form>\r\n</ng-container>\r\n\r\n<ng-template #toolbar>\r\n    <div>\r\n        <ng-container [ngTemplateOutlet]=\"fontStyle\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"blockStyle\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"headingStyle\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"listStyle\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"scriptStyle\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"indentStyle\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"rtl\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"fontSize\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"heading\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"color\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"font\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"align\"></ng-container>\r\n        <ng-container [ngTemplateOutlet]=\"clean\"></ng-container>\r\n        <nt-container [ngTemplateOutlet]=\"formula\"></nt-container>\r\n        <ng-container [ngTemplateOutlet]=\"media\"></ng-container>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #fontStyle>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showFontStyle\">\r\n        <button class=\"ql-bold\"      *ngIf=\"config!.buttons.bold\"      [matTooltip]=\"tooltip(config!.tooltips.bold)\"></button>\r\n        <button class=\"ql-italic\"    *ngIf=\"config!.buttons.italic\"    [matTooltip]=\"tooltip(config!.tooltips.italic)\"></button>\r\n        <button class=\"ql-underline\" *ngIf=\"config!.buttons.underline\" [matTooltip]=\"tooltip(config!.tooltips.underline)\"></button>\r\n        <button class=\"ql-strike\"    *ngIf=\"config!.buttons.strike\"    [matTooltip]=\"tooltip(config!.tooltips.strike)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #blockStyle>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showBlockStyle\">\r\n        <button class=\"ql-blockquote\" *ngIf=\"config!.buttons.blockquote\" [matTooltip]=\"tooltip(config!.tooltips.blockquote)\"></button>\r\n        <button class=\"ql-code-block\" *ngIf=\"config!.buttons.codeblock\"  [matTooltip]=\"tooltip(config!.tooltips.codeblock)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #headingStyle>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showQuickHeadingStyle\">\r\n        <button class=\"ql-header\" value=\"1\" *ngIf=\"config!.buttons.h1\" [matTooltip]=\"tooltip(config!.tooltips.h1)\"></button>\r\n        <button class=\"ql-header\" value=\"2\" *ngIf=\"config!.buttons.h2\" [matTooltip]=\"tooltip(config!.tooltips.h2)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #listStyle>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showListStyle\">\r\n        <button class=\"ql-list\" value=\"ordered\" *ngIf=\"config!.buttons.ordered\"  [matTooltip]=\"tooltip(config!.tooltips.ordered)\"></button>\r\n        <button class=\"ql-list\" value=\"bullet\"  *ngIf=\"config!.buttons.bulleted\" [matTooltip]=\"tooltip(config!.tooltips.bulleted)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #scriptStyle>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showScriptStyle\">\r\n        <button class=\"ql-script\" value=\"sub\"   *ngIf=\"config!.buttons.subScript\" [matTooltip]=\"tooltip(config!.tooltips.subScript)\"></button>\r\n        <button class=\"ql-script\" value=\"super\" *ngIf=\"config!.buttons.superScript\" [matTooltip]=\"tooltip(config!.tooltips.superScript)\"></button>\r\n    </span>\r\n</ng-template>\r\n    \r\n<ng-template #indentStyle>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showIndentStyle\">\r\n        <button class=\"ql-indent\" value=\"-1\" *ngIf=\"config!.buttons.decreaseIndent\" [matTooltip]=\"tooltip(config!.tooltips.decreaseIndent)\"></button>\r\n        <button class=\"ql-indent\" value=\"+1\" *ngIf=\"config!.buttons.increaseIndent\" [matTooltip]=\"tooltip(config!.tooltips.increaseIndent)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #rtl>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.rtl\">\r\n        <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config!.tooltips.rtl)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #fontSize>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.fontSize\" [matTooltip]=\"tooltip(config!.tooltips.fontSize)\">\r\n        <select class=\"ql-size\">\r\n            <option value=\"small\"></option>\r\n            <option selected></option>\r\n            <option value=\"large\"></option>\r\n            <option value=\"huge\"></option>\r\n        </select>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #heading>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.headingStyle\" [matTooltip]=\"tooltip(config!.tooltips.headingStyle)\">\r\n        <select class=\"ql-header\">\r\n            <option value=\"1\"></option>\r\n            <option value=\"2\"></option>\r\n            <option value=\"3\"></option>\r\n            <option value=\"4\"></option>\r\n            <option value=\"5\"></option>\r\n            <option value=\"6\"></option>\r\n            <option selected=\"selected\"></option>\r\n        </select>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #color>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.color\" [matTooltip]=\"tooltip(config!.tooltips.color)\">\r\n        <select class=\"ql-color\"></select>\r\n        <select class=\"ql-background\"></select>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #font>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.font\" [matTooltip]=\"tooltip(config!.tooltips.font)\">\r\n        <select class=\"ql-font\">\r\n            <option selected></option>\r\n            <option value=\"serif\"></option>\r\n            <option value=\"monospace\"></option>\r\n        </select>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #align>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.align\" [matTooltip]=\"tooltip(config!.tooltips.align)\">\r\n        <select class=\"ql-align\">\r\n            <option selected></option>\r\n            <option value=\"center\"></option>\r\n            <option value=\"right\"></option>\r\n            <option value=\"justify\"></option>\r\n        </select>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #clean>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.clean\" [matTooltip]=\"tooltip(config!.tooltips.clean)\">\r\n        <button class=\"ql-clean\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #media>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.showMedia\">\r\n        <button class=\"ql-link\"  *ngIf=\"config!.buttons.link\" [matTooltip]=\"tooltip(config!.tooltips.link)\"></button>\r\n        <button class=\"ql-image\" *ngIf=\"config!.buttons.image\" [matTooltip]=\"tooltip(config!.tooltips.image)\"></button>\r\n        <button class=\"ql-video\" *ngIf=\"config!.buttons.video\" [matTooltip]=\"tooltip(config!.tooltips.video)\"></button>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #editorSize>\r\n    <div>\r\n        <span class=\"ql-formats\" *ngIf=\"config!.buttons.rawEditor\">\r\n            <button id=\"rawdog\"\r\n                [matTooltip]=\"tooltip(config!.tooltips.rawEditor)\">\r\n\r\n                <mat-icon (click)=\"rawEdit()\">\r\n                    code\r\n                </mat-icon>\r\n            </button>\r\n        </span>\r\n\r\n        <span class=\"ql-formats\" *ngIf=\"config!.buttons.editorSize\">\r\n            <button id=\"fullscreen\"\r\n                [matTooltip]=\"tooltip(fullscreen ?\r\n                    (fullscreenMode === 'expand' ? config!.tooltips.minimize : config!.tooltips.popin) :\r\n                    (fullscreenMode === 'expand' ? config!.tooltips.maximize : config!.tooltips.popout))\">\r\n\r\n                <mat-icon (click)=\"toggleFullscreen()\">\r\n                    {{ fullscreen ?\r\n                        (fullscreenMode === 'expand' ? config!.icons.minimize : config!.icons.popin) :\r\n                        (fullscreenMode === 'expand' ? config!.icons.maximize : config!.icons.popout)\r\n                    }}\r\n                </mat-icon>\r\n            </button>\r\n        </span>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #formula>\r\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.formula\" [matTooltip]=\"tooltip(config!.tooltips.formula)\">\r\n        <button class=\"ql-formula\"></button>\r\n    </span>\r\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1.MatDialogRef, decorators: [{
+                    type: Optional
+                }] }, { type: i1.MatDialog }]; }, propDecorators: { editor: [{
+                type: ViewChild,
+                args: [QuillEditorComponent, { static: false }]
+            }], config: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], fullscreenHeight: [{
+                type: Input
+            }], fullscreenWidth: [{
+                type: Input
+            }], fullscreenMode: [{
+                type: Input
+            }], enableTooltips: [{
+                type: Input
+            }], fullscreen: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], applyReadonlyStyle: [{
+                type: Input
+            }], showToolbar: [{
+                type: Input
+            }], showBorder: [{
+                type: Input
+            }], imageResizeModule: [{
+                type: Input
+            }], imageDropModule: [{
+                type: Input
+            }], syntaxModule: [{
+                type: Input
+            }], fullscreenChanged: [{
+                type: Output
+            }], onBlur: [{
+                type: Output
+            }], onContentChanged: [{
+                type: Output
+            }], onEditorChanged: [{
+                type: Output
+            }], onEditorCreated: [{
+                type: Output
+            }], onFocus: [{
+                type: Output
+            }], onSelectionChanged: [{
+                type: Output
             }] } });
 
-class QuillModule {
-    constructor(parentModule) {
-        if (parentModule) {
-            throw new Error('QuillModule is already loaded. Import it in the AppModule only');
-        }
-    }
-    static forRoot() {
-        return {
-            ngModule: QuillModule
-        };
-    }
-}
-QuillModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: QuillModule, deps: [{ token: QuillModule, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule });
-QuillModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: QuillModule, declarations: [EditorComponent,
-        RawComponent], imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MatButtonModule,
-        MatDialogModule,
-        MatFormFieldModule,
-        MatIconModule,
-        MatInputModule,
-        MatTooltipModule, i6$1.QuillModule], exports: [EditorComponent,
-        RawComponent] });
-QuillModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: QuillModule, imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MatButtonModule,
-        MatDialogModule,
-        MatFormFieldModule,
-        MatIconModule,
-        MatInputModule,
-        MatTooltipModule,
-        QuillModule$1.forRoot()] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: QuillModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        EditorComponent,
-                        RawComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        MatButtonModule,
-                        MatDialogModule,
-                        MatFormFieldModule,
-                        MatIconModule,
-                        MatInputModule,
-                        MatTooltipModule,
-                        QuillModule$1.forRoot()
-                    ],
-                    exports: [
-                        EditorComponent,
-                        RawComponent
-                    ]
-                }]
-        }], ctorParameters: function () { return [{ type: QuillModule, decorators: [{
-                    type: Optional
-                }, {
-                    type: SkipSelf
+class QuillModule {
+    static forRoot() {
+        return {
+            ngModule: QuillModule
+        };
+    }
+    constructor(parentModule) {
+        if (parentModule) {
+            throw new Error('QuillModule is already loaded. Import it in the AppModule only');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: QuillModule, deps: [{ token: QuillModule, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: QuillModule, declarations: [EditorComponent,
+            RawComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatButtonModule,
+            MatDialogModule,
+            MatFormFieldModule,
+            MatIconModule,
+            MatInputModule,
+            MatTooltipModule, i6$1.QuillModule], exports: [EditorComponent,
+            RawComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: QuillModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatButtonModule,
+            MatDialogModule,
+            MatFormFieldModule,
+            MatIconModule,
+            MatInputModule,
+            MatTooltipModule,
+            QuillModule$1.forRoot()] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: QuillModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        EditorComponent,
+                        RawComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatDialogModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatTooltipModule,
+                        QuillModule$1.forRoot()
+                    ],
+                    exports: [
+                        EditorComponent,
+                        RawComponent
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: QuillModule, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
                 }] }]; } });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { Buttons, Config, EditorComponent, Icons, QuillModule, RawComponent, Tooltips };
 //# sourceMappingURL=cleavelandprice-ngx-lib-quill.mjs.map
-//# sourceMappingURL=cleavelandprice-ngx-lib-quill.mjs.map