@cleavelandprice/ngx-lib 3.7.2 → 3.8.0

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

@@ -18,208 +18,207 @@ import * as i6 from 'ngx-quill';
 import { QuillModule } from 'ngx-quill';
 import { MatButtonModule } from '@angular/material/button';
 
-class Buttons extends Buttons$1 {
+class Buttons extends Buttons$1 {
 }
 
-class Config extends Config$1 {
+class Config extends Config$1 {
 }
 
-class Icons extends Icons$1 {
+class Icons extends Icons$1 {
 }
 
-class Tooltips extends Tooltips$1 {
+class Tooltips extends Tooltips$1 {
 }
 
-class EditorComponent extends EditorComponent$1 {
-    constructor(data, dlgRef, dlg, activeDirectoryService) {
-        super(data, dlgRef, dlg);
-        this.dlgRef = dlgRef;
-        this.dlg = dlg;
-        this.activeDirectoryService = activeDirectoryService;
-    }
-    ngOnInit() {
-        this.initialize();
-        if (!this.users) {
-            this.activeDirectoryService.getUsers().subscribe(users => this.users = users);
-        }
-    }
-    toggleFullscreen() {
-        if (this.fullscreenMode === 'expand') {
-            this.fullscreen = !this.fullscreen;
-            this.fullscreenChanged.emit(this.fullscreen);
-        }
-        else {
-            if (this.fullscreen) {
-                this.dlgRef.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.dlg.open(EditorComponent, {
-                    disableClose: true,
-                    width: this.fullscreenWidth,
-                    height: this.fullscreenHeight,
-                    data
-                })
-                    .afterClosed()
-                    .subscribe(value => {
-                    this.value = value;
-                    this.updateChanges();
-                });
-                this.fullscreenChanged.emit(true);
-            }
-        }
-    }
-    get modules() {
-        if (!this.users) {
-            return {};
-        }
-        const modules = {
-            mention: {
-                allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
-                onSelect: (item, insertItem) => {
-                    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, renderList) => {
-                    if (searchTerm.length === 0) {
-                        renderList(this.users?.map(u => ({ value: `${u.displayName} (${u.sAMAccountName.toLowerCase()})` })), searchTerm);
-                    }
-                    else {
-                        const matches = [];
-                        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);
-                    }
-                }
-            }
-        };
-        if (!this.showToolbar) {
-            modules['toolbar'] = [];
-        }
-        if (this.imageResizeModule) {
-            modules['imageResize'] = {};
-        }
-        if (this.imageDropModule) {
-            modules['imageDrop'] = true;
-        }
-        if (this.syntaxModule) {
-            modules['syntax'] = true;
-        }
-        return modules;
-    }
-}
-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 }, { token: ActiveDirectoryService }], target: i0.ɵɵFactoryTarget.Component });
-EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: EditorComponent, selector: "cpquill-editor-with-mention", inputs: { users: "users" }, providers: [{
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => EditorComponent),
-            multi: true
-        }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"users\">\n    <form>\n        <quill-editor name=\"editor\"\n            [(ngModel)]=\"value\"\n            (ngModelChange)=\"updateChanges()\"\n\n            [placeholder]=\"placeholder\"\n            [format]=\"format\"\n            [style.height]=\"fullscreen ? fullscreenHeight : height\"\n            [style.width]=\"fullscreen ? fullscreenWidth : width\"\n            [readOnly]=\"readonly\"\n            [class.readonly]=\"readonly && applyReadonlyStyle\"\n            [class.no-toolbar]=\"!showToolbar\"\n            [class.no-border]=\"!showBorder\"\n            [modules]=\"modules\"\n    \n            (onBlur)=\"onBlur.emit($event)\"\n            (onContentChanged)=\"onContentChanged.emit($event)\"\n            (onEditorChanged)=\"onEditorChanged.emit($event)\"\n            (onEditorCreated)=\"onEditorCreated.emit()\"\n            (onFocus)=\"onFocus.emit($event)\"\n            (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\n    \n            <div quill-editor-toolbar *ngIf=\"showToolbar\">\n                <ng-container [ngTemplateOutlet]=\"toolbar\"></ng-container>\n                <ng-container [ngTemplateOutlet]=\"editorSize\"></ng-container>\n            </div>\n        </quill-editor>\n    </form>\n</ng-container>\n\n<ng-template #toolbar>\n    <div>\n        <ng-container [ngTemplateOutlet]=\"fontStyle\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"blockStyle\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"headingStyle\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"listStyle\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"scriptStyle\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"indentStyle\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"rtl\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"fontSize\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"heading\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"color\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"font\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"align\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"clean\"></ng-container>\n        <nt-container [ngTemplateOutlet]=\"formula\"></nt-container>\n        <ng-container [ngTemplateOutlet]=\"media\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #fontStyle>\n    <span class=\"ql-formats\" *ngIf=\"config!.showFontStyle\">\n        <button class=\"ql-bold\"      *ngIf=\"config!.buttons.bold\"      [matTooltip]=\"tooltip(config!.tooltips.bold)\"></button>\n        <button class=\"ql-italic\"    *ngIf=\"config!.buttons.italic\"    [matTooltip]=\"tooltip(config!.tooltips.italic)\"></button>\n        <button class=\"ql-underline\" *ngIf=\"config!.buttons.underline\" [matTooltip]=\"tooltip(config!.tooltips.underline)\"></button>\n        <button class=\"ql-strike\"    *ngIf=\"config!.buttons.strike\"    [matTooltip]=\"tooltip(config!.tooltips.strike)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #blockStyle>\n    <span class=\"ql-formats\" *ngIf=\"config!.showBlockStyle\">\n        <button class=\"ql-blockquote\" *ngIf=\"config!.buttons.blockquote\" [matTooltip]=\"tooltip(config!.tooltips.blockquote)\"></button>\n        <button class=\"ql-code-block\" *ngIf=\"config!.buttons.codeblock\"  [matTooltip]=\"tooltip(config!.tooltips.codeblock)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #headingStyle>\n    <span class=\"ql-formats\" *ngIf=\"config!.showQuickHeadingStyle\">\n        <button class=\"ql-header\" value=\"1\" *ngIf=\"config!.buttons.h1\" [matTooltip]=\"tooltip(config!.tooltips.h1)\"></button>\n        <button class=\"ql-header\" value=\"2\" *ngIf=\"config!.buttons.h2\" [matTooltip]=\"tooltip(config!.tooltips.h2)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #listStyle>\n    <span class=\"ql-formats\" *ngIf=\"config!.showListStyle\">\n        <button class=\"ql-list\" value=\"ordered\" *ngIf=\"config!.buttons.ordered\"  [matTooltip]=\"tooltip(config!.tooltips.ordered)\"></button>\n        <button class=\"ql-list\" value=\"bullet\"  *ngIf=\"config!.buttons.bulleted\" [matTooltip]=\"tooltip(config!.tooltips.bulleted)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #scriptStyle>\n    <span class=\"ql-formats\" *ngIf=\"config!.showScriptStyle\">\n        <button class=\"ql-script\" value=\"sub\"   *ngIf=\"config!.buttons.subScript\" [matTooltip]=\"tooltip(config!.tooltips.subScript)\"></button>\n        <button class=\"ql-script\" value=\"super\" *ngIf=\"config!.buttons.superScript\" [matTooltip]=\"tooltip(config!.tooltips.superScript)\"></button>\n    </span>\n</ng-template>\n    \n<ng-template #indentStyle>\n    <span class=\"ql-formats\" *ngIf=\"config!.showIndentStyle\">\n        <button class=\"ql-indent\" value=\"-1\" *ngIf=\"config!.buttons.decreaseIndent\" [matTooltip]=\"tooltip(config!.tooltips.decreaseIndent)\"></button>\n        <button class=\"ql-indent\" value=\"+1\" *ngIf=\"config!.buttons.increaseIndent\" [matTooltip]=\"tooltip(config!.tooltips.increaseIndent)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #rtl>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.rtl\">\n        <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config!.tooltips.rtl)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #fontSize>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.fontSize\" [matTooltip]=\"tooltip(config!.tooltips.fontSize)\">\n        <select class=\"ql-size\">\n            <option value=\"small\"></option>\n            <option selected></option>\n            <option value=\"large\"></option>\n            <option value=\"huge\"></option>\n        </select>\n    </span>\n</ng-template>\n\n<ng-template #heading>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.headingStyle\" [matTooltip]=\"tooltip(config!.tooltips.headingStyle)\">\n        <select class=\"ql-header\">\n            <option value=\"1\"></option>\n            <option value=\"2\"></option>\n            <option value=\"3\"></option>\n            <option value=\"4\"></option>\n            <option value=\"5\"></option>\n            <option value=\"6\"></option>\n            <option selected=\"selected\"></option>\n        </select>\n    </span>\n</ng-template>\n\n<ng-template #color>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.color\" [matTooltip]=\"tooltip(config!.tooltips.color)\">\n        <select class=\"ql-color\"></select>\n        <select class=\"ql-background\"></select>\n    </span>\n</ng-template>\n\n<ng-template #font>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.font\" [matTooltip]=\"tooltip(config!.tooltips.font)\">\n        <select class=\"ql-font\">\n            <option selected></option>\n            <option value=\"serif\"></option>\n            <option value=\"monospace\"></option>\n        </select>\n    </span>\n</ng-template>\n\n<ng-template #align>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.align\" [matTooltip]=\"tooltip(config!.tooltips.align)\">\n        <select class=\"ql-align\">\n            <option selected></option>\n            <option value=\"center\"></option>\n            <option value=\"right\"></option>\n            <option value=\"justify\"></option>\n        </select>\n    </span>\n</ng-template>\n\n<ng-template #clean>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.clean\" [matTooltip]=\"tooltip(config!.tooltips.clean)\">\n        <button class=\"ql-clean\"></button>\n    </span>\n</ng-template>\n\n<ng-template #media>\n    <span class=\"ql-formats\" *ngIf=\"config!.showMedia\">\n        <button class=\"ql-link\"  *ngIf=\"config!.buttons.link\" [matTooltip]=\"tooltip(config!.tooltips.link)\"></button>\n        <button class=\"ql-image\" *ngIf=\"config!.buttons.image\" [matTooltip]=\"tooltip(config!.tooltips.image)\"></button>\n        <button class=\"ql-video\" *ngIf=\"config!.buttons.video\" [matTooltip]=\"tooltip(config!.tooltips.video)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #editorSize>\n    <div>\n        <span class=\"ql-formats\" *ngIf=\"config!.buttons.rawEditor\">\n            <button id=\"rawdog\"\n                [matTooltip]=\"tooltip(config!.tooltips.rawEditor)\">\n\n                <mat-icon (click)=\"rawEdit()\">\n                    code\n                </mat-icon>\n            </button>\n        </span>\n\n        <span class=\"ql-formats\" *ngIf=\"config!.buttons.editorSize\">\n            <button id=\"fullscreen\"\n                [matTooltip]=\"tooltip(fullscreen ?\n                    (fullscreenMode === 'expand' ? config!.tooltips.minimize : config!.tooltips.popin) :\n                    (fullscreenMode === 'expand' ? config!.tooltips.maximize : config!.tooltips.popout))\">\n\n                <mat-icon (click)=\"toggleFullscreen()\">\n                    {{ fullscreen ?\n                        (fullscreenMode === 'expand' ? config!.icons.minimize : config!.icons.popin) :\n                        (fullscreenMode === 'expand' ? config!.icons.maximize : config!.icons.popout)\n                    }}\n                </mat-icon>\n            </button>\n        </span>\n    </div>\n</ng-template>\n\n<ng-template #formula>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.formula\" [matTooltip]=\"tooltip(config!.tooltips.formula)\">\n        <button class=\"ql-formula\"></button>\n    </span>\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6.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-with-mention', providers: [{
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => EditorComponent),
-                            multi: true
-                        }], template: "<ng-container *ngIf=\"users\">\n    <form>\n        <quill-editor name=\"editor\"\n            [(ngModel)]=\"value\"\n            (ngModelChange)=\"updateChanges()\"\n\n            [placeholder]=\"placeholder\"\n            [format]=\"format\"\n            [style.height]=\"fullscreen ? fullscreenHeight : height\"\n            [style.width]=\"fullscreen ? fullscreenWidth : width\"\n            [readOnly]=\"readonly\"\n            [class.readonly]=\"readonly && applyReadonlyStyle\"\n            [class.no-toolbar]=\"!showToolbar\"\n            [class.no-border]=\"!showBorder\"\n            [modules]=\"modules\"\n    \n            (onBlur)=\"onBlur.emit($event)\"\n            (onContentChanged)=\"onContentChanged.emit($event)\"\n            (onEditorChanged)=\"onEditorChanged.emit($event)\"\n            (onEditorCreated)=\"onEditorCreated.emit()\"\n            (onFocus)=\"onFocus.emit($event)\"\n            (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\n    \n            <div quill-editor-toolbar *ngIf=\"showToolbar\">\n                <ng-container [ngTemplateOutlet]=\"toolbar\"></ng-container>\n                <ng-container [ngTemplateOutlet]=\"editorSize\"></ng-container>\n            </div>\n        </quill-editor>\n    </form>\n</ng-container>\n\n<ng-template #toolbar>\n    <div>\n        <ng-container [ngTemplateOutlet]=\"fontStyle\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"blockStyle\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"headingStyle\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"listStyle\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"scriptStyle\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"indentStyle\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"rtl\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"fontSize\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"heading\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"color\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"font\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"align\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"clean\"></ng-container>\n        <nt-container [ngTemplateOutlet]=\"formula\"></nt-container>\n        <ng-container [ngTemplateOutlet]=\"media\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #fontStyle>\n    <span class=\"ql-formats\" *ngIf=\"config!.showFontStyle\">\n        <button class=\"ql-bold\"      *ngIf=\"config!.buttons.bold\"      [matTooltip]=\"tooltip(config!.tooltips.bold)\"></button>\n        <button class=\"ql-italic\"    *ngIf=\"config!.buttons.italic\"    [matTooltip]=\"tooltip(config!.tooltips.italic)\"></button>\n        <button class=\"ql-underline\" *ngIf=\"config!.buttons.underline\" [matTooltip]=\"tooltip(config!.tooltips.underline)\"></button>\n        <button class=\"ql-strike\"    *ngIf=\"config!.buttons.strike\"    [matTooltip]=\"tooltip(config!.tooltips.strike)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #blockStyle>\n    <span class=\"ql-formats\" *ngIf=\"config!.showBlockStyle\">\n        <button class=\"ql-blockquote\" *ngIf=\"config!.buttons.blockquote\" [matTooltip]=\"tooltip(config!.tooltips.blockquote)\"></button>\n        <button class=\"ql-code-block\" *ngIf=\"config!.buttons.codeblock\"  [matTooltip]=\"tooltip(config!.tooltips.codeblock)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #headingStyle>\n    <span class=\"ql-formats\" *ngIf=\"config!.showQuickHeadingStyle\">\n        <button class=\"ql-header\" value=\"1\" *ngIf=\"config!.buttons.h1\" [matTooltip]=\"tooltip(config!.tooltips.h1)\"></button>\n        <button class=\"ql-header\" value=\"2\" *ngIf=\"config!.buttons.h2\" [matTooltip]=\"tooltip(config!.tooltips.h2)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #listStyle>\n    <span class=\"ql-formats\" *ngIf=\"config!.showListStyle\">\n        <button class=\"ql-list\" value=\"ordered\" *ngIf=\"config!.buttons.ordered\"  [matTooltip]=\"tooltip(config!.tooltips.ordered)\"></button>\n        <button class=\"ql-list\" value=\"bullet\"  *ngIf=\"config!.buttons.bulleted\" [matTooltip]=\"tooltip(config!.tooltips.bulleted)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #scriptStyle>\n    <span class=\"ql-formats\" *ngIf=\"config!.showScriptStyle\">\n        <button class=\"ql-script\" value=\"sub\"   *ngIf=\"config!.buttons.subScript\" [matTooltip]=\"tooltip(config!.tooltips.subScript)\"></button>\n        <button class=\"ql-script\" value=\"super\" *ngIf=\"config!.buttons.superScript\" [matTooltip]=\"tooltip(config!.tooltips.superScript)\"></button>\n    </span>\n</ng-template>\n    \n<ng-template #indentStyle>\n    <span class=\"ql-formats\" *ngIf=\"config!.showIndentStyle\">\n        <button class=\"ql-indent\" value=\"-1\" *ngIf=\"config!.buttons.decreaseIndent\" [matTooltip]=\"tooltip(config!.tooltips.decreaseIndent)\"></button>\n        <button class=\"ql-indent\" value=\"+1\" *ngIf=\"config!.buttons.increaseIndent\" [matTooltip]=\"tooltip(config!.tooltips.increaseIndent)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #rtl>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.rtl\">\n        <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config!.tooltips.rtl)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #fontSize>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.fontSize\" [matTooltip]=\"tooltip(config!.tooltips.fontSize)\">\n        <select class=\"ql-size\">\n            <option value=\"small\"></option>\n            <option selected></option>\n            <option value=\"large\"></option>\n            <option value=\"huge\"></option>\n        </select>\n    </span>\n</ng-template>\n\n<ng-template #heading>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.headingStyle\" [matTooltip]=\"tooltip(config!.tooltips.headingStyle)\">\n        <select class=\"ql-header\">\n            <option value=\"1\"></option>\n            <option value=\"2\"></option>\n            <option value=\"3\"></option>\n            <option value=\"4\"></option>\n            <option value=\"5\"></option>\n            <option value=\"6\"></option>\n            <option selected=\"selected\"></option>\n        </select>\n    </span>\n</ng-template>\n\n<ng-template #color>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.color\" [matTooltip]=\"tooltip(config!.tooltips.color)\">\n        <select class=\"ql-color\"></select>\n        <select class=\"ql-background\"></select>\n    </span>\n</ng-template>\n\n<ng-template #font>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.font\" [matTooltip]=\"tooltip(config!.tooltips.font)\">\n        <select class=\"ql-font\">\n            <option selected></option>\n            <option value=\"serif\"></option>\n            <option value=\"monospace\"></option>\n        </select>\n    </span>\n</ng-template>\n\n<ng-template #align>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.align\" [matTooltip]=\"tooltip(config!.tooltips.align)\">\n        <select class=\"ql-align\">\n            <option selected></option>\n            <option value=\"center\"></option>\n            <option value=\"right\"></option>\n            <option value=\"justify\"></option>\n        </select>\n    </span>\n</ng-template>\n\n<ng-template #clean>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.clean\" [matTooltip]=\"tooltip(config!.tooltips.clean)\">\n        <button class=\"ql-clean\"></button>\n    </span>\n</ng-template>\n\n<ng-template #media>\n    <span class=\"ql-formats\" *ngIf=\"config!.showMedia\">\n        <button class=\"ql-link\"  *ngIf=\"config!.buttons.link\" [matTooltip]=\"tooltip(config!.tooltips.link)\"></button>\n        <button class=\"ql-image\" *ngIf=\"config!.buttons.image\" [matTooltip]=\"tooltip(config!.tooltips.image)\"></button>\n        <button class=\"ql-video\" *ngIf=\"config!.buttons.video\" [matTooltip]=\"tooltip(config!.tooltips.video)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #editorSize>\n    <div>\n        <span class=\"ql-formats\" *ngIf=\"config!.buttons.rawEditor\">\n            <button id=\"rawdog\"\n                [matTooltip]=\"tooltip(config!.tooltips.rawEditor)\">\n\n                <mat-icon (click)=\"rawEdit()\">\n                    code\n                </mat-icon>\n            </button>\n        </span>\n\n        <span class=\"ql-formats\" *ngIf=\"config!.buttons.editorSize\">\n            <button id=\"fullscreen\"\n                [matTooltip]=\"tooltip(fullscreen ?\n                    (fullscreenMode === 'expand' ? config!.tooltips.minimize : config!.tooltips.popin) :\n                    (fullscreenMode === 'expand' ? config!.tooltips.maximize : config!.tooltips.popout))\">\n\n                <mat-icon (click)=\"toggleFullscreen()\">\n                    {{ fullscreen ?\n                        (fullscreenMode === 'expand' ? config!.icons.minimize : config!.icons.popin) :\n                        (fullscreenMode === 'expand' ? config!.icons.maximize : config!.icons.popout)\n                    }}\n                </mat-icon>\n            </button>\n        </span>\n    </div>\n</ng-template>\n\n<ng-template #formula>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.formula\" [matTooltip]=\"tooltip(config!.tooltips.formula)\">\n        <button class=\"ql-formula\"></button>\n    </span>\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 }, { type: i7.ActiveDirectoryService, decorators: [{
-                    type: Inject,
-                    args: [ActiveDirectoryService]
-                }] }]; }, propDecorators: { users: [{
-                type: Input
+class EditorComponent extends EditorComponent$1 {
+    constructor(data, dlgRef, dlg, activeDirectoryService) {
+        super(data, dlgRef, dlg);
+        this.dlgRef = dlgRef;
+        this.dlg = dlg;
+        this.activeDirectoryService = activeDirectoryService;
+    }
+    ngOnInit() {
+        this.initialize();
+        if (!this.users) {
+            this.activeDirectoryService.getUsers().subscribe(users => this.users = users);
+        }
+    }
+    toggleFullscreen() {
+        if (this.fullscreenMode === 'expand') {
+            this.fullscreen = !this.fullscreen;
+            this.fullscreenChanged.emit(this.fullscreen);
+        }
+        else {
+            if (this.fullscreen) {
+                this.dlgRef.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.dlg.open(EditorComponent, {
+                    disableClose: true,
+                    width: this.fullscreenWidth,
+                    height: this.fullscreenHeight,
+                    data
+                })
+                    .afterClosed()
+                    .subscribe(value => {
+                    this.value = value;
+                    this.updateChanges();
+                });
+                this.fullscreenChanged.emit(true);
+            }
+        }
+    }
+    get modules() {
+        if (!this.users) {
+            return {};
+        }
+        const modules = {
+            mention: {
+                allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
+                onSelect: (item, insertItem) => {
+                    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, renderList) => {
+                    if (searchTerm.length === 0) {
+                        renderList(this.users?.map(u => ({ value: `${u.displayName} (${u.sAMAccountName.toLowerCase()})` })), searchTerm);
+                    }
+                    else {
+                        const matches = [];
+                        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);
+                    }
+                }
+            }
+        };
+        if (!this.showToolbar) {
+            modules['toolbar'] = [];
+        }
+        if (this.imageResizeModule) {
+            modules['imageResize'] = {};
+        }
+        if (this.imageDropModule) {
+            modules['imageDrop'] = true;
+        }
+        if (this.syntaxModule) {
+            modules['syntax'] = true;
+        }
+        return modules;
+    }
+    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 }, { token: ActiveDirectoryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: EditorComponent, selector: "cpquill-editor-with-mention", inputs: { users: "users" }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => EditorComponent),
+                multi: true
+            }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"users\">\n    <form>\n        <quill-editor name=\"editor\"\n            [(ngModel)]=\"value\"\n            (ngModelChange)=\"updateChanges()\"\n\n            [placeholder]=\"placeholder\"\n            [format]=\"format\"\n            [style.height]=\"fullscreen ? fullscreenHeight : height\"\n            [style.width]=\"fullscreen ? fullscreenWidth : width\"\n            [readOnly]=\"readonly\"\n            [class.readonly]=\"readonly && applyReadonlyStyle\"\n            [class.no-toolbar]=\"!showToolbar\"\n            [class.no-border]=\"!showBorder\"\n            [modules]=\"modules\"\n    \n            (onBlur)=\"onBlur.emit($event)\"\n            (onContentChanged)=\"onContentChanged.emit($event)\"\n            (onEditorChanged)=\"onEditorChanged.emit($event)\"\n            (onEditorCreated)=\"onEditorCreated.emit()\"\n            (onFocus)=\"onFocus.emit($event)\"\n            (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\n    \n            <div quill-editor-toolbar *ngIf=\"showToolbar\">\n                <ng-container [ngTemplateOutlet]=\"toolbar\"></ng-container>\n                <ng-container [ngTemplateOutlet]=\"editorSize\"></ng-container>\n            </div>\n        </quill-editor>\n    </form>\n</ng-container>\n\n<ng-template #toolbar>\n    <div>\n        <ng-container [ngTemplateOutlet]=\"fontStyle\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"blockStyle\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"headingStyle\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"listStyle\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"scriptStyle\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"indentStyle\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"rtl\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"fontSize\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"heading\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"color\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"font\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"align\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"clean\"></ng-container>\n        <nt-container [ngTemplateOutlet]=\"formula\"></nt-container>\n        <ng-container [ngTemplateOutlet]=\"media\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #fontStyle>\n    <span class=\"ql-formats\" *ngIf=\"config!.showFontStyle\">\n        <button class=\"ql-bold\"      *ngIf=\"config!.buttons.bold\"      [matTooltip]=\"tooltip(config!.tooltips.bold)\"></button>\n        <button class=\"ql-italic\"    *ngIf=\"config!.buttons.italic\"    [matTooltip]=\"tooltip(config!.tooltips.italic)\"></button>\n        <button class=\"ql-underline\" *ngIf=\"config!.buttons.underline\" [matTooltip]=\"tooltip(config!.tooltips.underline)\"></button>\n        <button class=\"ql-strike\"    *ngIf=\"config!.buttons.strike\"    [matTooltip]=\"tooltip(config!.tooltips.strike)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #blockStyle>\n    <span class=\"ql-formats\" *ngIf=\"config!.showBlockStyle\">\n        <button class=\"ql-blockquote\" *ngIf=\"config!.buttons.blockquote\" [matTooltip]=\"tooltip(config!.tooltips.blockquote)\"></button>\n        <button class=\"ql-code-block\" *ngIf=\"config!.buttons.codeblock\"  [matTooltip]=\"tooltip(config!.tooltips.codeblock)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #headingStyle>\n    <span class=\"ql-formats\" *ngIf=\"config!.showQuickHeadingStyle\">\n        <button class=\"ql-header\" value=\"1\" *ngIf=\"config!.buttons.h1\" [matTooltip]=\"tooltip(config!.tooltips.h1)\"></button>\n        <button class=\"ql-header\" value=\"2\" *ngIf=\"config!.buttons.h2\" [matTooltip]=\"tooltip(config!.tooltips.h2)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #listStyle>\n    <span class=\"ql-formats\" *ngIf=\"config!.showListStyle\">\n        <button class=\"ql-list\" value=\"ordered\" *ngIf=\"config!.buttons.ordered\"  [matTooltip]=\"tooltip(config!.tooltips.ordered)\"></button>\n        <button class=\"ql-list\" value=\"bullet\"  *ngIf=\"config!.buttons.bulleted\" [matTooltip]=\"tooltip(config!.tooltips.bulleted)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #scriptStyle>\n    <span class=\"ql-formats\" *ngIf=\"config!.showScriptStyle\">\n        <button class=\"ql-script\" value=\"sub\"   *ngIf=\"config!.buttons.subScript\" [matTooltip]=\"tooltip(config!.tooltips.subScript)\"></button>\n        <button class=\"ql-script\" value=\"super\" *ngIf=\"config!.buttons.superScript\" [matTooltip]=\"tooltip(config!.tooltips.superScript)\"></button>\n    </span>\n</ng-template>\n    \n<ng-template #indentStyle>\n    <span class=\"ql-formats\" *ngIf=\"config!.showIndentStyle\">\n        <button class=\"ql-indent\" value=\"-1\" *ngIf=\"config!.buttons.decreaseIndent\" [matTooltip]=\"tooltip(config!.tooltips.decreaseIndent)\"></button>\n        <button class=\"ql-indent\" value=\"+1\" *ngIf=\"config!.buttons.increaseIndent\" [matTooltip]=\"tooltip(config!.tooltips.increaseIndent)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #rtl>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.rtl\">\n        <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config!.tooltips.rtl)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #fontSize>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.fontSize\" [matTooltip]=\"tooltip(config!.tooltips.fontSize)\">\n        <select class=\"ql-size\">\n            <option value=\"small\"></option>\n            <option selected></option>\n            <option value=\"large\"></option>\n            <option value=\"huge\"></option>\n        </select>\n    </span>\n</ng-template>\n\n<ng-template #heading>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.headingStyle\" [matTooltip]=\"tooltip(config!.tooltips.headingStyle)\">\n        <select class=\"ql-header\">\n            <option value=\"1\"></option>\n            <option value=\"2\"></option>\n            <option value=\"3\"></option>\n            <option value=\"4\"></option>\n            <option value=\"5\"></option>\n            <option value=\"6\"></option>\n            <option selected=\"selected\"></option>\n        </select>\n    </span>\n</ng-template>\n\n<ng-template #color>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.color\" [matTooltip]=\"tooltip(config!.tooltips.color)\">\n        <select class=\"ql-color\"></select>\n        <select class=\"ql-background\"></select>\n    </span>\n</ng-template>\n\n<ng-template #font>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.font\" [matTooltip]=\"tooltip(config!.tooltips.font)\">\n        <select class=\"ql-font\">\n            <option selected></option>\n            <option value=\"serif\"></option>\n            <option value=\"monospace\"></option>\n        </select>\n    </span>\n</ng-template>\n\n<ng-template #align>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.align\" [matTooltip]=\"tooltip(config!.tooltips.align)\">\n        <select class=\"ql-align\">\n            <option selected></option>\n            <option value=\"center\"></option>\n            <option value=\"right\"></option>\n            <option value=\"justify\"></option>\n        </select>\n    </span>\n</ng-template>\n\n<ng-template #clean>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.clean\" [matTooltip]=\"tooltip(config!.tooltips.clean)\">\n        <button class=\"ql-clean\"></button>\n    </span>\n</ng-template>\n\n<ng-template #media>\n    <span class=\"ql-formats\" *ngIf=\"config!.showMedia\">\n        <button class=\"ql-link\"  *ngIf=\"config!.buttons.link\" [matTooltip]=\"tooltip(config!.tooltips.link)\"></button>\n        <button class=\"ql-image\" *ngIf=\"config!.buttons.image\" [matTooltip]=\"tooltip(config!.tooltips.image)\"></button>\n        <button class=\"ql-video\" *ngIf=\"config!.buttons.video\" [matTooltip]=\"tooltip(config!.tooltips.video)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #editorSize>\n    <div>\n        <span class=\"ql-formats\" *ngIf=\"config!.buttons.rawEditor\">\n            <button id=\"rawdog\"\n                [matTooltip]=\"tooltip(config!.tooltips.rawEditor)\">\n\n                <mat-icon (click)=\"rawEdit()\">\n                    code\n                </mat-icon>\n            </button>\n        </span>\n\n        <span class=\"ql-formats\" *ngIf=\"config!.buttons.editorSize\">\n            <button id=\"fullscreen\"\n                [matTooltip]=\"tooltip(fullscreen ?\n                    (fullscreenMode === 'expand' ? config!.tooltips.minimize : config!.tooltips.popin) :\n                    (fullscreenMode === 'expand' ? config!.tooltips.maximize : config!.tooltips.popout))\">\n\n                <mat-icon (click)=\"toggleFullscreen()\">\n                    {{ fullscreen ?\n                        (fullscreenMode === 'expand' ? config!.icons.minimize : config!.icons.popin) :\n                        (fullscreenMode === 'expand' ? config!.icons.maximize : config!.icons.popout)\n                    }}\n                </mat-icon>\n            </button>\n        </span>\n    </div>\n</ng-template>\n\n<ng-template #formula>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.formula\" [matTooltip]=\"tooltip(config!.tooltips.formula)\">\n        <button class=\"ql-formula\"></button>\n    </span>\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6.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-with-mention', providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => EditorComponent),
+                            multi: true
+                        }], template: "<ng-container *ngIf=\"users\">\n    <form>\n        <quill-editor name=\"editor\"\n            [(ngModel)]=\"value\"\n            (ngModelChange)=\"updateChanges()\"\n\n            [placeholder]=\"placeholder\"\n            [format]=\"format\"\n            [style.height]=\"fullscreen ? fullscreenHeight : height\"\n            [style.width]=\"fullscreen ? fullscreenWidth : width\"\n            [readOnly]=\"readonly\"\n            [class.readonly]=\"readonly && applyReadonlyStyle\"\n            [class.no-toolbar]=\"!showToolbar\"\n            [class.no-border]=\"!showBorder\"\n            [modules]=\"modules\"\n    \n            (onBlur)=\"onBlur.emit($event)\"\n            (onContentChanged)=\"onContentChanged.emit($event)\"\n            (onEditorChanged)=\"onEditorChanged.emit($event)\"\n            (onEditorCreated)=\"onEditorCreated.emit()\"\n            (onFocus)=\"onFocus.emit($event)\"\n            (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\n    \n            <div quill-editor-toolbar *ngIf=\"showToolbar\">\n                <ng-container [ngTemplateOutlet]=\"toolbar\"></ng-container>\n                <ng-container [ngTemplateOutlet]=\"editorSize\"></ng-container>\n            </div>\n        </quill-editor>\n    </form>\n</ng-container>\n\n<ng-template #toolbar>\n    <div>\n        <ng-container [ngTemplateOutlet]=\"fontStyle\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"blockStyle\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"headingStyle\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"listStyle\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"scriptStyle\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"indentStyle\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"rtl\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"fontSize\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"heading\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"color\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"font\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"align\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"clean\"></ng-container>\n        <nt-container [ngTemplateOutlet]=\"formula\"></nt-container>\n        <ng-container [ngTemplateOutlet]=\"media\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #fontStyle>\n    <span class=\"ql-formats\" *ngIf=\"config!.showFontStyle\">\n        <button class=\"ql-bold\"      *ngIf=\"config!.buttons.bold\"      [matTooltip]=\"tooltip(config!.tooltips.bold)\"></button>\n        <button class=\"ql-italic\"    *ngIf=\"config!.buttons.italic\"    [matTooltip]=\"tooltip(config!.tooltips.italic)\"></button>\n        <button class=\"ql-underline\" *ngIf=\"config!.buttons.underline\" [matTooltip]=\"tooltip(config!.tooltips.underline)\"></button>\n        <button class=\"ql-strike\"    *ngIf=\"config!.buttons.strike\"    [matTooltip]=\"tooltip(config!.tooltips.strike)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #blockStyle>\n    <span class=\"ql-formats\" *ngIf=\"config!.showBlockStyle\">\n        <button class=\"ql-blockquote\" *ngIf=\"config!.buttons.blockquote\" [matTooltip]=\"tooltip(config!.tooltips.blockquote)\"></button>\n        <button class=\"ql-code-block\" *ngIf=\"config!.buttons.codeblock\"  [matTooltip]=\"tooltip(config!.tooltips.codeblock)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #headingStyle>\n    <span class=\"ql-formats\" *ngIf=\"config!.showQuickHeadingStyle\">\n        <button class=\"ql-header\" value=\"1\" *ngIf=\"config!.buttons.h1\" [matTooltip]=\"tooltip(config!.tooltips.h1)\"></button>\n        <button class=\"ql-header\" value=\"2\" *ngIf=\"config!.buttons.h2\" [matTooltip]=\"tooltip(config!.tooltips.h2)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #listStyle>\n    <span class=\"ql-formats\" *ngIf=\"config!.showListStyle\">\n        <button class=\"ql-list\" value=\"ordered\" *ngIf=\"config!.buttons.ordered\"  [matTooltip]=\"tooltip(config!.tooltips.ordered)\"></button>\n        <button class=\"ql-list\" value=\"bullet\"  *ngIf=\"config!.buttons.bulleted\" [matTooltip]=\"tooltip(config!.tooltips.bulleted)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #scriptStyle>\n    <span class=\"ql-formats\" *ngIf=\"config!.showScriptStyle\">\n        <button class=\"ql-script\" value=\"sub\"   *ngIf=\"config!.buttons.subScript\" [matTooltip]=\"tooltip(config!.tooltips.subScript)\"></button>\n        <button class=\"ql-script\" value=\"super\" *ngIf=\"config!.buttons.superScript\" [matTooltip]=\"tooltip(config!.tooltips.superScript)\"></button>\n    </span>\n</ng-template>\n    \n<ng-template #indentStyle>\n    <span class=\"ql-formats\" *ngIf=\"config!.showIndentStyle\">\n        <button class=\"ql-indent\" value=\"-1\" *ngIf=\"config!.buttons.decreaseIndent\" [matTooltip]=\"tooltip(config!.tooltips.decreaseIndent)\"></button>\n        <button class=\"ql-indent\" value=\"+1\" *ngIf=\"config!.buttons.increaseIndent\" [matTooltip]=\"tooltip(config!.tooltips.increaseIndent)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #rtl>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.rtl\">\n        <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config!.tooltips.rtl)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #fontSize>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.fontSize\" [matTooltip]=\"tooltip(config!.tooltips.fontSize)\">\n        <select class=\"ql-size\">\n            <option value=\"small\"></option>\n            <option selected></option>\n            <option value=\"large\"></option>\n            <option value=\"huge\"></option>\n        </select>\n    </span>\n</ng-template>\n\n<ng-template #heading>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.headingStyle\" [matTooltip]=\"tooltip(config!.tooltips.headingStyle)\">\n        <select class=\"ql-header\">\n            <option value=\"1\"></option>\n            <option value=\"2\"></option>\n            <option value=\"3\"></option>\n            <option value=\"4\"></option>\n            <option value=\"5\"></option>\n            <option value=\"6\"></option>\n            <option selected=\"selected\"></option>\n        </select>\n    </span>\n</ng-template>\n\n<ng-template #color>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.color\" [matTooltip]=\"tooltip(config!.tooltips.color)\">\n        <select class=\"ql-color\"></select>\n        <select class=\"ql-background\"></select>\n    </span>\n</ng-template>\n\n<ng-template #font>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.font\" [matTooltip]=\"tooltip(config!.tooltips.font)\">\n        <select class=\"ql-font\">\n            <option selected></option>\n            <option value=\"serif\"></option>\n            <option value=\"monospace\"></option>\n        </select>\n    </span>\n</ng-template>\n\n<ng-template #align>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.align\" [matTooltip]=\"tooltip(config!.tooltips.align)\">\n        <select class=\"ql-align\">\n            <option selected></option>\n            <option value=\"center\"></option>\n            <option value=\"right\"></option>\n            <option value=\"justify\"></option>\n        </select>\n    </span>\n</ng-template>\n\n<ng-template #clean>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.clean\" [matTooltip]=\"tooltip(config!.tooltips.clean)\">\n        <button class=\"ql-clean\"></button>\n    </span>\n</ng-template>\n\n<ng-template #media>\n    <span class=\"ql-formats\" *ngIf=\"config!.showMedia\">\n        <button class=\"ql-link\"  *ngIf=\"config!.buttons.link\" [matTooltip]=\"tooltip(config!.tooltips.link)\"></button>\n        <button class=\"ql-image\" *ngIf=\"config!.buttons.image\" [matTooltip]=\"tooltip(config!.tooltips.image)\"></button>\n        <button class=\"ql-video\" *ngIf=\"config!.buttons.video\" [matTooltip]=\"tooltip(config!.tooltips.video)\"></button>\n    </span>\n</ng-template>\n\n<ng-template #editorSize>\n    <div>\n        <span class=\"ql-formats\" *ngIf=\"config!.buttons.rawEditor\">\n            <button id=\"rawdog\"\n                [matTooltip]=\"tooltip(config!.tooltips.rawEditor)\">\n\n                <mat-icon (click)=\"rawEdit()\">\n                    code\n                </mat-icon>\n            </button>\n        </span>\n\n        <span class=\"ql-formats\" *ngIf=\"config!.buttons.editorSize\">\n            <button id=\"fullscreen\"\n                [matTooltip]=\"tooltip(fullscreen ?\n                    (fullscreenMode === 'expand' ? config!.tooltips.minimize : config!.tooltips.popin) :\n                    (fullscreenMode === 'expand' ? config!.tooltips.maximize : config!.tooltips.popout))\">\n\n                <mat-icon (click)=\"toggleFullscreen()\">\n                    {{ fullscreen ?\n                        (fullscreenMode === 'expand' ? config!.icons.minimize : config!.icons.popin) :\n                        (fullscreenMode === 'expand' ? config!.icons.maximize : config!.icons.popout)\n                    }}\n                </mat-icon>\n            </button>\n        </span>\n    </div>\n</ng-template>\n\n<ng-template #formula>\n    <span class=\"ql-formats\" *ngIf=\"config!.buttons.formula\" [matTooltip]=\"tooltip(config!.tooltips.formula)\">\n        <button class=\"ql-formula\"></button>\n    </span>\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 }, { type: i7.ActiveDirectoryService, decorators: [{
+                    type: Inject,
+                    args: [ActiveDirectoryService]
+                }] }]; }, propDecorators: { users: [{
+                type: Input
             }] } });
 
-class QuillMentionModule {
-    constructor(parentModule) {
-        if (parentModule) {
-            throw new Error('QuillMentionModule is already loaded. Import it in the AppModule only');
-        }
-    }
-    static forRoot() {
-        return {
-            ngModule: QuillMentionModule
-        };
-    }
-}
-QuillMentionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: QuillMentionModule, deps: [{ token: QuillMentionModule, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule });
-QuillMentionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: QuillMentionModule, declarations: [EditorComponent], imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MatButtonModule,
-        MatDialogModule,
-        MatIconModule,
-        MatTooltipModule, i6.QuillModule], exports: [EditorComponent] });
-QuillMentionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: QuillMentionModule, imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MatButtonModule,
-        MatDialogModule,
-        MatIconModule,
-        MatTooltipModule,
-        QuillModule.forRoot()] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: QuillMentionModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        EditorComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        MatButtonModule,
-                        MatDialogModule,
-                        MatIconModule,
-                        MatTooltipModule,
-                        QuillModule.forRoot()
-                    ],
-                    exports: [
-                        EditorComponent
-                    ]
-                }]
-        }], ctorParameters: function () { return [{ type: QuillMentionModule, decorators: [{
-                    type: Optional
-                }, {
-                    type: SkipSelf
+class QuillMentionModule {
+    static forRoot() {
+        return {
+            ngModule: QuillMentionModule
+        };
+    }
+    constructor(parentModule) {
+        if (parentModule) {
+            throw new Error('QuillMentionModule 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: QuillMentionModule, deps: [{ token: QuillMentionModule, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: QuillMentionModule, declarations: [EditorComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatButtonModule,
+            MatDialogModule,
+            MatIconModule,
+            MatTooltipModule, i6.QuillModule], exports: [EditorComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: QuillMentionModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatButtonModule,
+            MatDialogModule,
+            MatIconModule,
+            MatTooltipModule,
+            QuillModule.forRoot()] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: QuillMentionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        EditorComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatDialogModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                        QuillModule.forRoot()
+                    ],
+                    exports: [
+                        EditorComponent
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: QuillMentionModule, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
                 }] }]; } });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { Buttons, Config, EditorComponent, Icons, QuillMentionModule, Tooltips };
 //# sourceMappingURL=cleavelandprice-ngx-lib-quill-mention.mjs.map
-//# sourceMappingURL=cleavelandprice-ngx-lib-quill-mention.mjs.map