@messaia/cdk-cms 15.0.0-rc67 → 15.0.0-rc69

package/fesm2020/messaia-cdk-cms.mjs

@@ -1,29 +1,29 @@
 import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, Component, ViewChild, Inject, ViewEncapsulation, NgModule } from '@angular/core';
+import { Injectable, Component, ViewChild, Directive, Inject, ViewEncapsulation, NgModule } from '@angular/core';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i8 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i7$1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i10$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
+import * as i2$1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i7 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
-import * as i9$2 from '@angular/material/icon';
+import * as i9$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i11$2 from '@angular/material/input';
+import * as i11$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i12 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i11$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i6$1 from '@ctrl/ngx-codemirror';
 import { CodemirrorModule } from '@ctrl/ngx-codemirror';
 import * as i2 from '@messaia/cdk';
-import { prop, required, AuditEntity, Column, FormField, Display, Grid, FormFieldType, Utils, Api, Table, GenericService, GenericReactiveFormComponent, EnumService, AuthHelper, SaveAction, BaseComponent, ServiceLocator, GlobalRoles, VdCommonModule, VdLayoutModule, VdMediaModule, VdFormsModule, VdSelectModule, VdChipsModule } from '@messaia/cdk';
+import { prop, required, AuditEntity, Column, FormField, Display, Grid, FormFieldType, Utils, Api, Table, GenericService, GenericReactiveFormComponent, EnumService, AuthHelper, SaveAction, BaseComponent, ServiceLocator, GlobalRoles, VdCommonModule, VdLayoutModule, VdMediaModule, VdFormsModule, VdSelectModule, VdChipsModule, VdFileModule } from '@messaia/cdk';
 import * as i11 from '@messaia/cdk-base';
 import { DocumentBase, VdDynamicListComponent, VdDynamicFormComponent, DocumentType, VdCdkBaseModule } from '@messaia/cdk-base';
 import * as i10 from '@tinymce/tinymce-angular';
@@ -39,17 +39,14 @@ import { __decorate, __metadata } from 'tslib';
 import { map } from 'rxjs/operators';
 import * as i6 from '@angular/forms';
 import * as i9 from '@angular/material/form-field';
-import * as i4 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
-import * as i9$1 from '@angular/material/core';
 import 'codemirror/addon/edit/closetag';
 import 'codemirror/addon/edit/matchbrackets';
 import 'codemirror/addon/selection/active-line';
 import 'codemirror/mode/htmlmixed/htmlmixed';
 import 'codemirror/mode/javascript/javascript';
 import { saveAs } from 'file-saver';
-import { of, map as map$1 } from 'rxjs';
 import * as i1 from 'angular-auth-oidc-client';
+import { map as map$1, of } from 'rxjs';
 
 var ContentType;
 (function (ContentType) {
@@ -225,7 +222,7 @@ __decorate([
         filter: 'clientJoins.client.displayName',
         sortBy: 'clientJoins.Min(client.displayName)',
         content: (x) => Utils.joinArray(x.clientJoins?.map(y => y.clientName)),
-        display: Grid.Xl,
+        display: Grid.Lg,
         maxWidth: 200,
         hide: (_, ctx) => !ctx.isAdmin || (!ctx.settings?.multitenantable && !ctx.settings?.multiClients),
     }),
@@ -257,7 +254,7 @@ __decorate([
         filter: 'departmentJoins.department.displayName',
         sortBy: 'departmentJoins.Min(department.displayName)',
         content: (x) => Utils.joinArray(x.departmentJoins?.map(y => y.departmentName)),
-        display: Grid.Xl,
+        display: Grid.Lg,
         maxWidth: 200,
         hide: (_, ctx) => !ctx.isAdmin || (!ctx.settings?.multitenantable && !ctx.settings?.multiClients),
     }),
@@ -556,37 +553,73 @@ let Document = class Document extends DocumentBase {
         /**
          * @property
          */
-        this.attachments = [];
+        this.clientId = AuthHelper.user.clientId;
+        /**
+         * @property
+         */
+        this.departmentId = AuthHelper.user.departmentId;
+        /**
+         * @property
+         */
+        this.path = 'docs';
         Object.assign(this, init);
     }
 };
 __decorate([
-    prop(),
-    __metadata("design:type", Number)
-], Document.prototype, "customerId", void 0);
-__decorate([
+    required(),
     Column({
-        index: 5,
-        name: 'client.displayName',
-        header: $localize `:@@client:Client`,
+        index: 10,
+        name: 'clientName',
+        filter: 'client.displayName',
+        sortBy: 'client.displayName',
         endpoint: 'client?enabled=true&projection=id,name',
-        maxWidth: 250,
-        display: Grid.Xl
+        maxWidth: 200,
+        display: Grid.Lg,
+        hide: (_, ctx) => !ctx.isAdmin || (!ctx.settings?.multitenantable && !ctx.settings?.multiClients),
     }),
-    required(),
+    FormField({
+        row: 1,
+        endpoint: 'client',
+        projection: 'id,name',
+        params: (x) => { return { enabled: true }; },
+        readonly: (x) => x.id,
+        hide: (_, __, ctx) => ctx.currentUser?.isDepartmentAdmin
+    }),
+    Display($localize `:@@project:Project`),
     __metadata("design:type", Number)
 ], Document.prototype, "clientId", void 0);
+__decorate([
+    prop(),
+    Column({
+        index: 11,
+        name: 'departmentName',
+        filter: 'department.displayName',
+        sortBy: 'department.displayName',
+        endpoint: 'department?enabled=true&projection=id,name',
+        maxWidth: 200,
+        display: Grid.Lg,
+        hide: (_, ctx) => !ctx.isAdmin || (!ctx.settings?.multitenantable && !ctx.settings?.multiClients),
+    }),
+    FormField({
+        row: 2,
+        endpoint: 'department',
+        projection: 'id,name',
+        params: (x) => { return { clientId: x.clientId, enabled: true }; },
+        fetchCondition: (x) => x.clientId > 0,
+        readonly: (x) => x.id || !x.clientId,
+        hide: (_, __, ctx) => ctx.currentUser?.isDepartmentAdmin
+    }),
+    Display($localize `:@@department:Department`),
+    __metadata("design:type", Number)
+], Document.prototype, "departmentId", void 0);
 __decorate([
     required(),
     __metadata("design:type", String)
 ], Document.prototype, "path", void 0);
-__decorate([
-    prop(),
-    __metadata("design:type", Array)
-], Document.prototype, "attachments", void 0);
 Document = __decorate([
     Table({
         endpoint: 'document',
+        projection: ['id', 'createdDate', 'name', 'extension', 'publicLink'],
         editable: false,
         downloadable: true
     }),
@@ -625,26 +658,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return []; } });
 
-class DocumentDialogComponent extends GenericReactiveFormComponent {
+const DocumentFormTemplate = `
+    <div mat-dialog-title class="mat-headline-6" i18n="@@newDocument">New document</div>
+    <form *ngIf="form" [formGroup]="form" (ngSubmit)="save()">
+        <vd-generic-form [formGroup]="form" [fieldGroups]="fieldGroups" [context]="this">
+            <ng-template vd-file let-field="field" let-formGroup="formGroup">
+                <mat-form-field [attr.flex]="field.flex||0" layout-margin appearance="outline">
+                    <mat-label>{{field.header}}</mat-label>
+                    <div vd-file-input [formControlName]="field.name" (select)="upload($event)" [accept]="field.fileExtensions"></div>
+                </mat-form-field>
+            </ng-template>
+        </vd-generic-form>
+        <div mat-dialog-actions class="pad-top">
+            <button type="submit" mat-flat-button [disabled]="isSaving" color="primary" i18n="@@save">Save</button>
+            <button type="button" mat-button (click)="cancel()" i18n="@@cancel">Cancel</button>
+        </div>
+    </form>`;
+
+class DocumentFormBaseComponent extends GenericReactiveFormComponent {
     /**
      * Constructor
      */
-    constructor(documentService, fileService, route, changeDetectorRef, dialogRef, data = new Document()) {
-        super(Document, documentService, route, changeDetectorRef);
+    constructor(entityType, documentService, fileService, dialogRef, route, changeDetectorRef, data) {
+        super(entityType, documentService, route, changeDetectorRef);
+        this.entityType = entityType;
         this.documentService = documentService;
         this.fileService = fileService;
+        this.dialogRef = dialogRef;
         this.route = route;
         this.changeDetectorRef = changeDetectorRef;
-        this.dialogRef = dialogRef;
         this.data = data;
         /**
          * Upload progress
          */
         this.uploadProgress = 0;
-        /**
-         * Used to disable some properties for client manager
-         */
-        this.isClientManager = AuthHelper.hasRole('ClientAdministrator') || AuthHelper.hasRole('ClientManager');
         /**
          * settings: CmsSettings
          */
@@ -656,14 +703,10 @@ class DocumentDialogComponent extends GenericReactiveFormComponent {
      * Uploads a new document
      */
     upload(file) {
-        if (file != null && this.item && this.item.clientId) {
-            this.isUploading = true;
-            this.fileService.upload(file, `upload`, {
-                clientId: this.formValue?.clientId,
-                path: this.formValue?.path,
-                isPublic: true,
-                preserveOriginalName: this.formValue?.preserveOriginalName
-            }).subscribe({
+        if (file != null) {
+            this.fileService
+                .upload(file, `upload`, new this.entityType(Object.assign(this.data || {}, this.formValue)))
+                .subscribe({
                 next: (event) => {
                     if (event.type === HttpEventType.UploadProgress) {
                         /* Calculate the progress percentage */
@@ -685,7 +728,7 @@ class DocumentDialogComponent extends GenericReactiveFormComponent {
      * @param action
      * @param response
      */
-    onAfterSubmit(action = SaveAction.SaveAndClose, response = null) {
+    onAfterSubmit(_1 = SaveAction.SaveAndClose, _2 = null) {
         this.isSaving = false;
         this.cancel();
     }
@@ -694,14 +737,53 @@ class DocumentDialogComponent extends GenericReactiveFormComponent {
      */
     cancel() {
         this.dialogRef.close();
+        this.reloadPage();
+    }
+    /**
+     * Creates a new instance of the TEntity
+     */
+    newInstance() {
+        return super.newInstance(Object.assign(new this.entityType({
+            clientId: this.currentUser?.clientId,
+            departmentId: this.currentUser?.departmentId
+        }), this.data || {}));
     }
 }
-DocumentDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: DocumentDialogComponent, deps: [{ token: DocumentService }, { token: i2.FileService }, { token: i3$1.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-DocumentDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: DocumentDialogComponent, selector: "document-dialog", usesInheritance: true, ngImport: i0, template: "<div mat-dialog-title class=\"mat-headline-6\" i18n=\"@@newDocument\">New document</div>\r\n<form *ngIf=\"form\" [formGroup]=\"form\" (ngSubmit)=\"save()\">\r\n\t<div>\r\n\t\t<!-- #region Client-->\r\n\t\t<div layout-gt-sm=\"row\" layout=\"column\" *ngIf=\"!isClientManager\">\r\n\t\t\t<mat-form-field flex layout-margin>\r\n\t\t\t\t<mat-label i18n=\"@@client\">Client</mat-label>\r\n\t\t\t\t<vd-select formControlName=\"clientId\" endpoint=\"client?enabled=true\" projection=\"id,displayName\" text=\"displayName\" layout=\"column\" flex></vd-select>\r\n\t\t\t\t<mat-error *ngFor=\"let errorMessage of form.controls.clientId['errorMessages']\">{{errorMessage}}</mat-error>\r\n\t\t\t</mat-form-field>\r\n\t\t</div>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Path -->\r\n\t\t<div layout-gt-sm=\"row\" layout=\"column\">\r\n\t\t\t<mat-form-field flex layout-margin>\r\n\t\t\t\t<mat-label i18n=\"@@type\">Type</mat-label>\r\n\t\t\t\t<mat-select formControlName=\"path\">\r\n\t\t\t\t\t<mat-option value=\"docs\"><span i18n=\"@@document\">Document</span></mat-option>\r\n\t\t\t\t\t<mat-option value=\"images\"><span i18n=\"@@image\">Image</span></mat-option>\r\n\t\t\t\t\t<mat-option value=\"videos\"><span i18n=\"@@video\">Video</span></mat-option>\r\n\t\t\t\t</mat-select>\r\n\t\t\t\t<mat-error *ngFor=\"let errorMessage of form.controls.path['errorMessages']\">{{errorMessage}}</mat-error>\r\n\t\t\t</mat-form-field>\r\n\t\t</div>\r\n\t\t<!-- #endregion-->\r\n\r\n\t\t<!-- #region PreserveOriginalName -->\r\n\t\t<div layout-gt-sm=\"row\" layout=\"column\" *ngIf=\"!isClientManager\">\r\n\t\t\t<div layout-margin>\r\n\t\t\t\t<mat-checkbox name=\"preserveOriginalName\" formControlName=\"preserveOriginalName\" (change)=\"item.name = ''\" i18n=\"@@preserveOriginalName\">Preserve original name</mat-checkbox>\r\n\t\t\t\t<br />\r\n\t\t\t\t<mat-hint *ngIf=\"formValue?.preserveOriginalName\" class=\"tc-red-500\" i18n=\"@@warningOldFilesWillBeBverridden\">Warning: old files will be overridden</mat-hint>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region File -->\r\n\t\t<div layout-gt-sm=\"row\" layout=\"column\">\r\n\t\t\t<mat-form-field flex layout-margin>\r\n\t\t\t\t<mat-label i18n=\"@@file\">File</mat-label>\r\n\t\t\t\t<div vd-file-input formControlName=\"name\" (select)=\"upload($event)\" [required]=\"true\"></div>\r\n\t\t\t</mat-form-field>\r\n\t\t</div>\r\n\t\t<!-- #endregion -->\r\n\t</div>\r\n\t<div mat-dialog-actions class=\"pad-top\">\r\n\t\t<button type=\"submit\" mat-flat-button [disabled]=\"isSaving\" color=\"primary\" i18n=\"@@save\">Save</button>\r\n\t\t<button type=\"button\" mat-button (click)=\"cancel()\" i18n=\"@@cancel\">Cancel</button>\r\n\t</div>\r\n</form>", dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i9.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: i2.MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { kind: "directive", type: i2.EmptyStringResetDirective, selector: "[ngModel],[formControlName],[formControl]" }, { kind: "component", type: i2.VdFileInputComponent, selector: "[vd-file-input]", inputs: ["accept", "placeholder", "required", "multiple", "disabled", "errorState"], outputs: ["select", "clear"] }, { kind: "component", type: i2.VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass", "triggerMode"] }, { kind: "component", type: i9$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i10$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i11$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }] });
+DocumentFormBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: DocumentFormBaseComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+DocumentFormBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.0", type: DocumentFormBaseComponent, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: DocumentFormBaseComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.Type }, { type: undefined }, { type: i2.FileService }, { type: i2$1.MatDialogRef }, { type: i3$1.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: undefined }]; } });
+
+class DocumentDialogComponent extends DocumentFormBaseComponent {
+    /**
+     * Constructor
+     */
+    constructor(documentService, fileService, route, changeDetectorRef, dialogRef, data = new Document()) {
+        super(Document, documentService, fileService, dialogRef, route, changeDetectorRef, data);
+        this.documentService = documentService;
+        this.fileService = fileService;
+        this.route = route;
+        this.changeDetectorRef = changeDetectorRef;
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    /**
+     * Event emitted before the form has built.
+     */
+    onBeforeFormBuild() {
+        this.item.isPublic = true;
+    }
+}
+DocumentDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: DocumentDialogComponent, deps: [{ token: DocumentService }, { token: i2.FileService }, { token: i3$1.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i2$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+DocumentDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: DocumentDialogComponent, selector: "document-dialog", usesInheritance: true, ngImport: i0, template: "\n    <div mat-dialog-title class=\"mat-headline-6\" i18n=\"@@newDocument\">New document</div>\n    <form *ngIf=\"form\" [formGroup]=\"form\" (ngSubmit)=\"save()\">\n        <vd-generic-form [formGroup]=\"form\" [fieldGroups]=\"fieldGroups\" [context]=\"this\">\n            <ng-template vd-file let-field=\"field\" let-formGroup=\"formGroup\">\n                <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\n                    <mat-label>{{field.header}}</mat-label>\n                    <div vd-file-input [formControlName]=\"field.name\" (select)=\"upload($event)\" [accept]=\"field.fileExtensions\"></div>\n                </mat-form-field>\n            </ng-template>\n        </vd-generic-form>\n        <div mat-dialog-actions class=\"pad-top\">\n            <button type=\"submit\" mat-flat-button [disabled]=\"isSaving\" color=\"primary\" i18n=\"@@save\">Save</button>\n            <button type=\"button\" mat-button (click)=\"cancel()\" i18n=\"@@cancel\">Cancel</button>\n        </div>\n    </form>", isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: i2.MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { kind: "directive", type: i2.VdFileDirective, selector: "[vd-file]ng-template" }, { kind: "directive", type: i2.EmptyStringResetDirective, selector: "[ngModel],[formControlName],[formControl]" }, { kind: "component", type: i2.VdGenericFormComponent, selector: "vd-generic-form", inputs: ["formGroup", "classType", "formDefinition", "fieldGroups", "groupName", "fieldSets", "context", "debugValue", "readonly", "separatorKeysCodes"] }, { kind: "component", type: i2.VdFileInputComponent, selector: "[vd-file-input]", inputs: ["accept", "placeholder", "required", "multiple", "disabled", "errorState"], outputs: ["select", "clear"] }, { kind: "directive", type: i2$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: DocumentDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'document-dialog', template: "<div mat-dialog-title class=\"mat-headline-6\" i18n=\"@@newDocument\">New document</div>\r\n<form *ngIf=\"form\" [formGroup]=\"form\" (ngSubmit)=\"save()\">\r\n\t<div>\r\n\t\t<!-- #region Client-->\r\n\t\t<div layout-gt-sm=\"row\" layout=\"column\" *ngIf=\"!isClientManager\">\r\n\t\t\t<mat-form-field flex layout-margin>\r\n\t\t\t\t<mat-label i18n=\"@@client\">Client</mat-label>\r\n\t\t\t\t<vd-select formControlName=\"clientId\" endpoint=\"client?enabled=true\" projection=\"id,displayName\" text=\"displayName\" layout=\"column\" flex></vd-select>\r\n\t\t\t\t<mat-error *ngFor=\"let errorMessage of form.controls.clientId['errorMessages']\">{{errorMessage}}</mat-error>\r\n\t\t\t</mat-form-field>\r\n\t\t</div>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Path -->\r\n\t\t<div layout-gt-sm=\"row\" layout=\"column\">\r\n\t\t\t<mat-form-field flex layout-margin>\r\n\t\t\t\t<mat-label i18n=\"@@type\">Type</mat-label>\r\n\t\t\t\t<mat-select formControlName=\"path\">\r\n\t\t\t\t\t<mat-option value=\"docs\"><span i18n=\"@@document\">Document</span></mat-option>\r\n\t\t\t\t\t<mat-option value=\"images\"><span i18n=\"@@image\">Image</span></mat-option>\r\n\t\t\t\t\t<mat-option value=\"videos\"><span i18n=\"@@video\">Video</span></mat-option>\r\n\t\t\t\t</mat-select>\r\n\t\t\t\t<mat-error *ngFor=\"let errorMessage of form.controls.path['errorMessages']\">{{errorMessage}}</mat-error>\r\n\t\t\t</mat-form-field>\r\n\t\t</div>\r\n\t\t<!-- #endregion-->\r\n\r\n\t\t<!-- #region PreserveOriginalName -->\r\n\t\t<div layout-gt-sm=\"row\" layout=\"column\" *ngIf=\"!isClientManager\">\r\n\t\t\t<div layout-margin>\r\n\t\t\t\t<mat-checkbox name=\"preserveOriginalName\" formControlName=\"preserveOriginalName\" (change)=\"item.name = ''\" i18n=\"@@preserveOriginalName\">Preserve original name</mat-checkbox>\r\n\t\t\t\t<br />\r\n\t\t\t\t<mat-hint *ngIf=\"formValue?.preserveOriginalName\" class=\"tc-red-500\" i18n=\"@@warningOldFilesWillBeBverridden\">Warning: old files will be overridden</mat-hint>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region File -->\r\n\t\t<div layout-gt-sm=\"row\" layout=\"column\">\r\n\t\t\t<mat-form-field flex layout-margin>\r\n\t\t\t\t<mat-label i18n=\"@@file\">File</mat-label>\r\n\t\t\t\t<div vd-file-input formControlName=\"name\" (select)=\"upload($event)\" [required]=\"true\"></div>\r\n\t\t\t</mat-form-field>\r\n\t\t</div>\r\n\t\t<!-- #endregion -->\r\n\t</div>\r\n\t<div mat-dialog-actions class=\"pad-top\">\r\n\t\t<button type=\"submit\" mat-flat-button [disabled]=\"isSaving\" color=\"primary\" i18n=\"@@save\">Save</button>\r\n\t\t<button type=\"button\" mat-button (click)=\"cancel()\" i18n=\"@@cancel\">Cancel</button>\r\n\t</div>\r\n</form>" }]
-        }], ctorParameters: function () { return [{ type: DocumentService }, { type: i2.FileService }, { type: i3$1.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i4.MatDialogRef }, { type: Document, decorators: [{
+            args: [{
+                    selector: 'document-dialog',
+                    template: DocumentFormTemplate
+                }]
+        }], ctorParameters: function () { return [{ type: DocumentService }, { type: i2.FileService }, { type: i3$1.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i2$1.MatDialogRef }, { type: Document, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }]; } });
@@ -837,7 +919,7 @@ __decorate([
         filter: 'clientJoins.client.displayName',
         sortBy: 'clientJoins.Min(client.displayName)',
         content: (x) => Utils.joinArray(x.clientJoins?.map(y => y.clientName)),
-        display: Grid.Xl,
+        display: Grid.Lg,
         maxWidth: 200,
         hide: (_, ctx) => !ctx.isAdmin || (!ctx.settings?.multitenantable && !ctx.settings?.multiClients),
     }),
@@ -870,7 +952,7 @@ __decorate([
         filter: 'departmentJoins.department.displayName',
         sortBy: 'departmentJoins.Min(department.displayName)',
         content: (x) => Utils.joinArray(x.departmentJoins?.map(y => y.departmentName)),
-        display: Grid.Xl,
+        display: Grid.Lg,
         maxWidth: 200,
         hide: (_, ctx) => !ctx.isAdmin || (!ctx.settings?.multitenantable && !ctx.settings?.multiClients),
     }),
@@ -1053,12 +1135,12 @@ class TemplatePreviewDialogComponent extends BaseComponent {
         this.dialogRef.close();
     }
 }
-TemplatePreviewDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: TemplatePreviewDialogComponent, deps: [{ token: TemplatePreviewService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i3$1.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TemplatePreviewDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: TemplatePreviewDialogComponent, selector: "app-template-preview", usesInheritance: true, ngImport: i0, template: "<div mat-dialog-title class=\"mat-headline-6\">\r\n    <div layout=\"row\" flex>\r\n        <span i18n=\"@@templatePreview\">Template preview</span>\r\n        <span flex></span>\r\n        <div *ngIf=\"data.type == TemplateType.Pdf && pdfSrc\">\r\n            <a mat-icon-button (click)=\"download()\">\r\n                <mat-icon>download</mat-icon>\r\n            </a>\r\n            <a mat-icon-button (click)=\"zoomIn()\">\r\n                <mat-icon>zoom_in</mat-icon>\r\n            </a>\r\n            <a mat-icon-button (click)=\"zoomOut()\">\r\n                <mat-icon>zoom_out</mat-icon>\r\n            </a>\r\n        </div>\r\n    </div>\r\n</div>\r\n<form #form=\"ngForm\" novalidate>\r\n    <!-- #region Entity -->\r\n    <div layout=\"row\" flex *ngIf=\"data.endpoint\">\r\n        <mat-form-field flex layout-margin>\r\n            <mat-label>{{data.entityName}}</mat-label>\r\n            <vd-chips [(ngModel)]=\"data.entityId\" [endpoint]=\"data.endpoint\" [params]=\"{sortBy: 'id'}\" text=\"displayName\" name=\"entityId\" #entityId=\"ngModel\" [placeholder]=\"data.entityName\" required flex>\r\n                <ng-template vd-chip let-entity=\"chip\">\r\n                    <span>{{entity[data.displayName]}}</span>\r\n                </ng-template>\r\n                <ng-template vd-autocomplete-option let-entity=\"option\">\r\n                    <span>{{entity[data.displayName]}}</span>\r\n                </ng-template>\r\n            </vd-chips>\r\n            <mat-error *ngIf=\"entityId.errors?.required\"><span>{{data.entityName}}</span><span i18n=\"@@isRequired\"> is required</span></mat-error>\r\n        </mat-form-field>\r\n    </div>\r\n    <!-- #endregion -->\r\n\r\n    <div layout=\"column\" layout-gt-sm=\"row\" class=\"push-bottom\" flex *ngIf=\"isLoading\">\r\n        <div flex layout-margin>\r\n            <div class=\"push-bottom-sm\" i18n=\"@@pleaseWait\">Please Wait...</div>\r\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- #region PDF Content -->\r\n    <mat-card>\r\n        <pdf-viewer [src]=\"pdfSrc\" *ngIf=\"data.type == TemplateType.Pdf && pdfSrc\" [render-text]=\"true\" [zoom]=\"zoom\" [zoom-scale]=\"zoomScale\" [show-borders]=\"true\" [original-size]=\"false\" [autoresize]=\"true\"></pdf-viewer>\r\n    </mat-card>\r\n    <!-- #region Content -->\r\n\r\n    <div *ngIf=\"data.type != TemplateType.Pdf\">\r\n        <!-- #region Content -->\r\n        <div layout=\"row\" layout-margin flex class=\"content\">\r\n            <div *ngIf=\"data.content\" [innerHtml]=\"data.content\"></div>\r\n        </div>\r\n        <!-- #endregion -->\r\n\r\n        <!-- #region Email-->\r\n        <div layout-gt-sm=\"row\" layout=\"column\" class=\"push-top pad-top\">\r\n            <mat-form-field flex layout-margin>\r\n                <mat-label i18n=\"@@email\">Email</mat-label>\r\n                <input matInput type=\"email\" name=\"email\" [(ngModel)]=\"data.email\" #email=\"ngModel\" required email placeholder=\"Email\" i18n-placeholder=\"@@email\">\r\n                <button mat-icon-button matSuffix (click)=\"sendMail()\" [disabled]=\"!email.valid\">\r\n                    <mat-icon>send</mat-icon>\r\n                </button>\r\n                <mat-error *ngIf=\"email.errors?.required\"><span i18n=\"@@email\">Email</span><span i18n=\"@@isRequired\"> is required</span></mat-error>\r\n                <mat-error *ngIf=\"!email.errors?.required && email.errors?.email\"><span i18n=\"@@email\">Email</span><span i18n=\"@@isInvalid\"> is invalid</span></mat-error>\r\n            </mat-form-field>\r\n        </div>\r\n        <!-- #endregion -->\r\n    </div>\r\n\r\n    <div mat-dialog-actions class=\"pad-top\">\r\n        <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"cancel()\" i18n=\"@@close\">Close</button>\r\n    </div>\r\n</form>", styles: [".content{overflow:scroll;min-height:200px;max-height:500px;border:1px solid #e5e5e5;border-radius:4px;padding:8px}pdf-viewer{display:block;margin-left:-16px;width:calc(100% + 32px);height:calc(100vh - 170px);background:#dbdbdb}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatIconAnchor, selector: "a[mat-icon-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i2.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: i2.MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { kind: "directive", type: i2.EmptyStringResetDirective, selector: "[ngModel],[formControlName],[formControl]" }, { kind: "component", type: i2.VdChipsComponent, selector: "vd-chips", inputs: ["classType", "chips", "endpoint", "params", "projection", "paginated", "customValue", "context", "key", "searchField", "searchFields", "removable", "debounce", "autocompleteCssClass", "suffixButtons"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { kind: "directive", type: i2.VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { kind: "directive", type: i2.VdChipDirective, selector: "[vd-chip]ng-template" }, { kind: "directive", type: i11$2.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"] }, { kind: "component", type: i12.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i13.PdfViewerComponent, selector: "pdf-viewer", inputs: ["src", "c-maps-url", "page", "render-text", "render-text-mode", "original-size", "show-all", "stick-to-page", "zoom", "zoom-scale", "rotation", "external-link-target", "autoresize", "fit-to-page", "show-borders"], outputs: ["after-load-complete", "page-rendered", "pages-initialized", "text-layer-rendered", "error", "on-progress", "pageChange"] }] });
+TemplatePreviewDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: TemplatePreviewDialogComponent, deps: [{ token: TemplatePreviewService }, { token: i2$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i3$1.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TemplatePreviewDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: TemplatePreviewDialogComponent, selector: "app-template-preview", usesInheritance: true, ngImport: i0, template: "<div mat-dialog-title class=\"mat-headline-6\">\r\n    <div layout=\"row\" flex>\r\n        <span i18n=\"@@templatePreview\">Template preview</span>\r\n        <span flex></span>\r\n        <div *ngIf=\"data.type == TemplateType.Pdf && pdfSrc\">\r\n            <a mat-icon-button (click)=\"download()\">\r\n                <mat-icon>download</mat-icon>\r\n            </a>\r\n            <a mat-icon-button (click)=\"zoomIn()\">\r\n                <mat-icon>zoom_in</mat-icon>\r\n            </a>\r\n            <a mat-icon-button (click)=\"zoomOut()\">\r\n                <mat-icon>zoom_out</mat-icon>\r\n            </a>\r\n        </div>\r\n    </div>\r\n</div>\r\n<form #form=\"ngForm\" novalidate>\r\n    <!-- #region Entity -->\r\n    <div layout=\"row\" flex *ngIf=\"data.endpoint\">\r\n        <mat-form-field flex layout-margin>\r\n            <mat-label>{{data.entityName}}</mat-label>\r\n            <vd-chips [(ngModel)]=\"data.entityId\" [endpoint]=\"data.endpoint\" [params]=\"{sortBy: 'id'}\" text=\"displayName\" name=\"entityId\" #entityId=\"ngModel\" [placeholder]=\"data.entityName\" required flex>\r\n                <ng-template vd-chip let-entity=\"chip\">\r\n                    <span>{{entity[data.displayName]}}</span>\r\n                </ng-template>\r\n                <ng-template vd-autocomplete-option let-entity=\"option\">\r\n                    <span>{{entity[data.displayName]}}</span>\r\n                </ng-template>\r\n            </vd-chips>\r\n            <mat-error *ngIf=\"entityId.errors?.required\"><span>{{data.entityName}}</span><span i18n=\"@@isRequired\"> is required</span></mat-error>\r\n        </mat-form-field>\r\n    </div>\r\n    <!-- #endregion -->\r\n\r\n    <div layout=\"column\" layout-gt-sm=\"row\" class=\"push-bottom\" flex *ngIf=\"isLoading\">\r\n        <div flex layout-margin>\r\n            <div class=\"push-bottom-sm\" i18n=\"@@pleaseWait\">Please Wait...</div>\r\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- #region PDF Content -->\r\n    <mat-card>\r\n        <pdf-viewer [src]=\"pdfSrc\" *ngIf=\"data.type == TemplateType.Pdf && pdfSrc\" [render-text]=\"true\" [zoom]=\"zoom\" [zoom-scale]=\"zoomScale\" [show-borders]=\"true\" [original-size]=\"false\" [autoresize]=\"true\"></pdf-viewer>\r\n    </mat-card>\r\n    <!-- #region Content -->\r\n\r\n    <div *ngIf=\"data.type != TemplateType.Pdf\">\r\n        <!-- #region Content -->\r\n        <div layout=\"row\" layout-margin flex class=\"content\">\r\n            <div *ngIf=\"data.content\" [innerHtml]=\"data.content\"></div>\r\n        </div>\r\n        <!-- #endregion -->\r\n\r\n        <!-- #region Email-->\r\n        <div layout-gt-sm=\"row\" layout=\"column\" class=\"push-top pad-top\">\r\n            <mat-form-field flex layout-margin>\r\n                <mat-label i18n=\"@@email\">Email</mat-label>\r\n                <input matInput type=\"email\" name=\"email\" [(ngModel)]=\"data.email\" #email=\"ngModel\" required email placeholder=\"Email\" i18n-placeholder=\"@@email\">\r\n                <button mat-icon-button matSuffix (click)=\"sendMail()\" [disabled]=\"!email.valid\">\r\n                    <mat-icon>send</mat-icon>\r\n                </button>\r\n                <mat-error *ngIf=\"email.errors?.required\"><span i18n=\"@@email\">Email</span><span i18n=\"@@isRequired\"> is required</span></mat-error>\r\n                <mat-error *ngIf=\"!email.errors?.required && email.errors?.email\"><span i18n=\"@@email\">Email</span><span i18n=\"@@isInvalid\"> is invalid</span></mat-error>\r\n            </mat-form-field>\r\n        </div>\r\n        <!-- #endregion -->\r\n    </div>\r\n\r\n    <div mat-dialog-actions class=\"pad-top\">\r\n        <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"cancel()\" i18n=\"@@close\">Close</button>\r\n    </div>\r\n</form>", styles: [".content{overflow:scroll;min-height:200px;max-height:500px;border:1px solid #e5e5e5;border-radius:4px;padding:8px}pdf-viewer{display:block;margin-left:-16px;width:calc(100% + 32px);height:calc(100vh - 170px);background:#dbdbdb}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatIconAnchor, selector: "a[mat-icon-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i2.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: i2.MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { kind: "directive", type: i2.EmptyStringResetDirective, selector: "[ngModel],[formControlName],[formControl]" }, { kind: "component", type: i2.VdChipsComponent, selector: "vd-chips", inputs: ["classType", "chips", "endpoint", "params", "projection", "paginated", "customValue", "context", "key", "searchField", "searchFields", "removable", "debounce", "autocompleteCssClass", "suffixButtons"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { kind: "directive", type: i2.VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { kind: "directive", type: i2.VdChipDirective, selector: "[vd-chip]ng-template" }, { kind: "directive", type: i2$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i11$1.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"] }, { kind: "component", type: i12.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i13.PdfViewerComponent, selector: "pdf-viewer", inputs: ["src", "c-maps-url", "page", "render-text", "render-text-mode", "original-size", "show-all", "stick-to-page", "zoom", "zoom-scale", "rotation", "external-link-target", "autoresize", "fit-to-page", "show-borders"], outputs: ["after-load-complete", "page-rendered", "pages-initialized", "text-layer-rendered", "error", "on-progress", "pageChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: TemplatePreviewDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-template-preview', template: "<div mat-dialog-title class=\"mat-headline-6\">\r\n    <div layout=\"row\" flex>\r\n        <span i18n=\"@@templatePreview\">Template preview</span>\r\n        <span flex></span>\r\n        <div *ngIf=\"data.type == TemplateType.Pdf && pdfSrc\">\r\n            <a mat-icon-button (click)=\"download()\">\r\n                <mat-icon>download</mat-icon>\r\n            </a>\r\n            <a mat-icon-button (click)=\"zoomIn()\">\r\n                <mat-icon>zoom_in</mat-icon>\r\n            </a>\r\n            <a mat-icon-button (click)=\"zoomOut()\">\r\n                <mat-icon>zoom_out</mat-icon>\r\n            </a>\r\n        </div>\r\n    </div>\r\n</div>\r\n<form #form=\"ngForm\" novalidate>\r\n    <!-- #region Entity -->\r\n    <div layout=\"row\" flex *ngIf=\"data.endpoint\">\r\n        <mat-form-field flex layout-margin>\r\n            <mat-label>{{data.entityName}}</mat-label>\r\n            <vd-chips [(ngModel)]=\"data.entityId\" [endpoint]=\"data.endpoint\" [params]=\"{sortBy: 'id'}\" text=\"displayName\" name=\"entityId\" #entityId=\"ngModel\" [placeholder]=\"data.entityName\" required flex>\r\n                <ng-template vd-chip let-entity=\"chip\">\r\n                    <span>{{entity[data.displayName]}}</span>\r\n                </ng-template>\r\n                <ng-template vd-autocomplete-option let-entity=\"option\">\r\n                    <span>{{entity[data.displayName]}}</span>\r\n                </ng-template>\r\n            </vd-chips>\r\n            <mat-error *ngIf=\"entityId.errors?.required\"><span>{{data.entityName}}</span><span i18n=\"@@isRequired\"> is required</span></mat-error>\r\n        </mat-form-field>\r\n    </div>\r\n    <!-- #endregion -->\r\n\r\n    <div layout=\"column\" layout-gt-sm=\"row\" class=\"push-bottom\" flex *ngIf=\"isLoading\">\r\n        <div flex layout-margin>\r\n            <div class=\"push-bottom-sm\" i18n=\"@@pleaseWait\">Please Wait...</div>\r\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- #region PDF Content -->\r\n    <mat-card>\r\n        <pdf-viewer [src]=\"pdfSrc\" *ngIf=\"data.type == TemplateType.Pdf && pdfSrc\" [render-text]=\"true\" [zoom]=\"zoom\" [zoom-scale]=\"zoomScale\" [show-borders]=\"true\" [original-size]=\"false\" [autoresize]=\"true\"></pdf-viewer>\r\n    </mat-card>\r\n    <!-- #region Content -->\r\n\r\n    <div *ngIf=\"data.type != TemplateType.Pdf\">\r\n        <!-- #region Content -->\r\n        <div layout=\"row\" layout-margin flex class=\"content\">\r\n            <div *ngIf=\"data.content\" [innerHtml]=\"data.content\"></div>\r\n        </div>\r\n        <!-- #endregion -->\r\n\r\n        <!-- #region Email-->\r\n        <div layout-gt-sm=\"row\" layout=\"column\" class=\"push-top pad-top\">\r\n            <mat-form-field flex layout-margin>\r\n                <mat-label i18n=\"@@email\">Email</mat-label>\r\n                <input matInput type=\"email\" name=\"email\" [(ngModel)]=\"data.email\" #email=\"ngModel\" required email placeholder=\"Email\" i18n-placeholder=\"@@email\">\r\n                <button mat-icon-button matSuffix (click)=\"sendMail()\" [disabled]=\"!email.valid\">\r\n                    <mat-icon>send</mat-icon>\r\n                </button>\r\n                <mat-error *ngIf=\"email.errors?.required\"><span i18n=\"@@email\">Email</span><span i18n=\"@@isRequired\"> is required</span></mat-error>\r\n                <mat-error *ngIf=\"!email.errors?.required && email.errors?.email\"><span i18n=\"@@email\">Email</span><span i18n=\"@@isInvalid\"> is invalid</span></mat-error>\r\n            </mat-form-field>\r\n        </div>\r\n        <!-- #endregion -->\r\n    </div>\r\n\r\n    <div mat-dialog-actions class=\"pad-top\">\r\n        <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"cancel()\" i18n=\"@@close\">Close</button>\r\n    </div>\r\n</form>", styles: [".content{overflow:scroll;min-height:200px;max-height:500px;border:1px solid #e5e5e5;border-radius:4px;padding:8px}pdf-viewer{display:block;margin-left:-16px;width:calc(100% + 32px);height:calc(100vh - 170px);background:#dbdbdb}\n"] }]
-        }], ctorParameters: function () { return [{ type: TemplatePreviewService }, { type: i4.MatDialogRef }, { type: TemplatePreview, decorators: [{
+        }], ctorParameters: function () { return [{ type: TemplatePreviewService }, { type: i2$1.MatDialogRef }, { type: TemplatePreview, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: i3$1.ActivatedRoute }, { type: i0.ChangeDetectorRef }]; } });
@@ -1193,12 +1275,12 @@ class TemplateFormComponent extends GenericReactiveFormComponent {
         }).afterClosed().subscribe();
     }
 }
-TemplateFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: TemplateFormComponent, deps: [{ token: TemplateService }, { token: i2.FileService }, { token: i4.MatDialog }, { token: i3$1.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TemplateFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: TemplateFormComponent, deps: [{ token: TemplateService }, { token: i2.FileService }, { token: i2$1.MatDialog }, { token: i3$1.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 TemplateFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: TemplateFormComponent, selector: "app-template-form", usesInheritance: true, ngImport: i0, template: "<vd-layout-nav color=\"primary\" [backNavigationRoute]=\"listRoute\" toolbarTitle=\"Template\" i18n-toolbarTitle=\"@@template\" [editMode]=\"isEditMode\" [actions]=\"toolbarActions\" [data]=\"item\" [context]=\"this\">\r\n\t<form *ngIf=\"form\" [formGroup]=\"form\" novalidate (ngSubmit)=\"save()\">\r\n\t\t<vd-layout-card-over class=\"accordion\" cardWidth=\"70\" color=\"primary\" flex>\r\n\t\t\t<mat-accordion [multi]=\"!isEditMode\">\r\n\t\t\t\t<!-- #region Details -->\r\n\t\t\t\t<mat-expansion-panel expanded=\"true\" id=\"details\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title i18n=\"@@details\">Details</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<vd-generic-form [formGroup]=\"form\" [fieldGroups]=\"fieldGroups\" [fieldSets]=\"['details']\" [context]=\"this\"></vd-generic-form>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"apply()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t<!-- #region Content -->\r\n\t\t\t\t<mat-expansion-panel id=\"content\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title>\r\n\t\t\t\t\t\t\t<span i18n=\"@@content\">Content</span>\r\n\t\t\t\t\t\t</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<div layout-margin>\r\n\t\t\t\t\t\t\t<ngx-codemirror formControlName=\"content\" rows=\"160\" [options]=\"editorOptions\"></ngx-codemirror>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"apply()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"showPreview()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving || !form.pristine\" i18n=\"@@preview\">Preview</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t<!-- #region Content -->\r\n\t\t\t\t<mat-expansion-panel id=\"testData\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title>\r\n\t\t\t\t\t\t\t<span i18n=\"@@testData\">Test Data</span>\r\n\t\t\t\t\t\t</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<div layout-margin>\r\n\t\t\t\t\t\t\t<ngx-codemirror formControlName=\"dummyData\" rows=\"120\" [options]=\"jsonEditorOptions\"></ngx-codemirror>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"apply()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"showPreview()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving || !form.pristine\" i18n=\"@@preview\">Preview</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t<!-- #region Audit -->\r\n\t\t\t\t<mat-expansion-panel id=\"audit\" *ngIf=\"isEditMode\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title>\r\n\t\t\t\t\t\t\t<span i18n=\"@@audit\">Audit</span>\r\n\t\t\t\t\t\t</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<vd-audit [item]=\"item\"> </vd-audit>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"button\" mat-flat-button color=\"accent\" (click)=\"back()\" i18n=\"@@close\">Close</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\t\t\t</mat-accordion>\r\n\t\t</vd-layout-card-over>\r\n\t</form>\r\n</vd-layout-nav>", styles: ["codemirror{width:100%}.CodeMirror{height:500px}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.CodemirrorComponent, selector: "ngx-codemirror", inputs: ["className", "name", "autoFocus", "options", "preserveScrollPosition"], outputs: ["cursorActivity", "focusChange", "scroll", "drop"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: i7.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i7.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i7.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i7.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i7.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i7.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2.VdLayoutNavComponent, selector: "vd-layout-nav", inputs: ["toolbarTitle", "editMode", "actions", "data", "context", "icon", "logo", "color", "hideToggle", "backNavigationRoute", "navigationRoute"], outputs: ["reload"] }, { kind: "component", type: i2.VdLayoutCardOverComponent, selector: "vd-layout-card-over", inputs: ["cardTitle", "cardSubtitle", "cardWidth", "color"] }, { kind: "directive", type: i2.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: i2.EmptyStringResetDirective, selector: "[ngModel],[formControlName],[formControl]" }, { kind: "component", type: i2.VdGenericFormComponent, selector: "vd-generic-form", inputs: ["formGroup", "classType", "formDefinition", "fieldGroups", "groupName", "fieldSets", "context", "debugValue", "readonly", "separatorKeysCodes"] }, { kind: "component", type: i11.VdAuditComponent, selector: "vd-audit", inputs: ["item"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: TemplateFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-template-form', encapsulation: ViewEncapsulation.None, template: "<vd-layout-nav color=\"primary\" [backNavigationRoute]=\"listRoute\" toolbarTitle=\"Template\" i18n-toolbarTitle=\"@@template\" [editMode]=\"isEditMode\" [actions]=\"toolbarActions\" [data]=\"item\" [context]=\"this\">\r\n\t<form *ngIf=\"form\" [formGroup]=\"form\" novalidate (ngSubmit)=\"save()\">\r\n\t\t<vd-layout-card-over class=\"accordion\" cardWidth=\"70\" color=\"primary\" flex>\r\n\t\t\t<mat-accordion [multi]=\"!isEditMode\">\r\n\t\t\t\t<!-- #region Details -->\r\n\t\t\t\t<mat-expansion-panel expanded=\"true\" id=\"details\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title i18n=\"@@details\">Details</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<vd-generic-form [formGroup]=\"form\" [fieldGroups]=\"fieldGroups\" [fieldSets]=\"['details']\" [context]=\"this\"></vd-generic-form>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"apply()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t<!-- #region Content -->\r\n\t\t\t\t<mat-expansion-panel id=\"content\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title>\r\n\t\t\t\t\t\t\t<span i18n=\"@@content\">Content</span>\r\n\t\t\t\t\t\t</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<div layout-margin>\r\n\t\t\t\t\t\t\t<ngx-codemirror formControlName=\"content\" rows=\"160\" [options]=\"editorOptions\"></ngx-codemirror>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"apply()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"showPreview()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving || !form.pristine\" i18n=\"@@preview\">Preview</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t<!-- #region Content -->\r\n\t\t\t\t<mat-expansion-panel id=\"testData\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title>\r\n\t\t\t\t\t\t\t<span i18n=\"@@testData\">Test Data</span>\r\n\t\t\t\t\t\t</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<div layout-margin>\r\n\t\t\t\t\t\t\t<ngx-codemirror formControlName=\"dummyData\" rows=\"120\" [options]=\"jsonEditorOptions\"></ngx-codemirror>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"apply()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"showPreview()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving || !form.pristine\" i18n=\"@@preview\">Preview</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t<!-- #region Audit -->\r\n\t\t\t\t<mat-expansion-panel id=\"audit\" *ngIf=\"isEditMode\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title>\r\n\t\t\t\t\t\t\t<span i18n=\"@@audit\">Audit</span>\r\n\t\t\t\t\t\t</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<vd-audit [item]=\"item\"> </vd-audit>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"button\" mat-flat-button color=\"accent\" (click)=\"back()\" i18n=\"@@close\">Close</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\t\t\t</mat-accordion>\r\n\t\t</vd-layout-card-over>\r\n\t</form>\r\n</vd-layout-nav>", styles: ["codemirror{width:100%}.CodeMirror{height:500px}\n"] }]
-        }], ctorParameters: function () { return [{ type: TemplateService }, { type: i2.FileService }, { type: i4.MatDialog }, { type: i3$1.ActivatedRoute }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: TemplateService }, { type: i2.FileService }, { type: i2$1.MatDialog }, { type: i3$1.ActivatedRoute }, { type: i0.ChangeDetectorRef }]; } });
 
 /**
  * @class
@@ -1269,7 +1351,7 @@ __decorate([
         filter: 'clientJoins.client.displayName',
         sortBy: 'clientJoins.Min(client.displayName)',
         content: (x) => Utils.joinArray(x.clientJoins?.map(y => y.clientName)),
-        display: Grid.Xl,
+        display: Grid.Lg,
         maxWidth: 200,
         hide: (_, ctx) => !ctx.isAdmin || (!ctx.settings?.multitenantable && !ctx.settings?.multiClients),
     }),
@@ -1301,7 +1383,7 @@ __decorate([
         filter: 'departmentJoins.department.displayName',
         sortBy: 'departmentJoins.Min(department.displayName)',
         content: (x) => Utils.joinArray(x.departmentJoins?.map(y => y.departmentName)),
-        display: Grid.Xl,
+        display: Grid.Lg,
         maxWidth: 200,
         hide: (_, ctx) => !ctx.isAdmin || (!ctx.settings?.multitenantable && !ctx.settings?.multiClients),
     }),
@@ -1425,7 +1507,7 @@ __decorate([
         filter: 'clientJoins.client.displayName',
         sortBy: 'clientJoins.Min(client.displayName)',
         content: (x) => Utils.joinArray(x.clientJoins?.map(y => y.clientName)),
-        display: Grid.Xl,
+        display: Grid.Lg,
         maxWidth: 200,
         hide: (_, ctx) => !ctx.isAdmin || (!ctx.settings?.multitenantable && !ctx.settings?.multiClients),
     }),
@@ -1457,7 +1539,7 @@ __decorate([
         filter: 'departmentJoins.department.displayName',
         sortBy: 'departmentJoins.Min(department.displayName)',
         content: (x) => Utils.joinArray(x.departmentJoins?.map(y => y.departmentName)),
-        display: Grid.Xl,
+        display: Grid.Lg,
         maxWidth: 200,
         hide: (_, ctx) => !ctx.isAdmin || (!ctx.settings?.multitenantable && !ctx.settings?.multiClients),
     }),
@@ -1567,6 +1649,47 @@ Slider = __decorate([
     Table()
 ], Slider);
 
+/**
+ * Includes resolve service
+ */
+class DocumentListProjectionResolve {
+    /**
+     * Constructor
+     * @param oidcSecurityService
+     */
+    constructor(oidcSecurityService) {
+        this.oidcSecurityService = oidcSecurityService;
+    }
+    /**
+     * Resolves includes
+     */
+    resolve() {
+        var projection = [];
+        return this.oidcSecurityService.checkAuth().pipe(map$1(x => {
+            AuthHelper.user.isAuthenticated = x.isAuthenticated;
+            if (x.userData) {
+                AuthHelper.user = Object.assign(x.userData, {
+                    id: x.userData.sub,
+                    isAuthenticated: x.isAuthenticated
+                });
+                let settings = ServiceLocator.getService(CmsSettings);
+                if (AuthHelper.hasRole(GlobalRoles.Administrator) && (settings?.multitenantable || settings?.multiClients)) {
+                    projection.push('client(displayName:clientName)');
+                }
+                if ((AuthHelper.hasRole(GlobalRoles.Administrator) || AuthHelper.hasRole(GlobalRoles.ClientAdministrator)) && (settings?.multitenantable || settings?.multiDepartments)) {
+                    projection.push('department(displayName:departmentName)');
+                }
+            }
+            return projection;
+        }));
+    }
+}
+DocumentListProjectionResolve.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: DocumentListProjectionResolve, deps: [{ token: i1.OidcSecurityService }], target: i0.ɵɵFactoryTarget.Injectable });
+DocumentListProjectionResolve.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: DocumentListProjectionResolve });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: DocumentListProjectionResolve, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.OidcSecurityService }]; } });
+
 /**
  * Excluded columns resolve service
  */
@@ -1724,6 +1847,10 @@ const ListResolve = {
     projection: ListProjectionResolve,
     excludedColumns: ExcludedColumnsResolve
 };
+const DocsListResolve = {
+    settings: SettingsResolve,
+    projection: DocumentListProjectionResolve,
+};
 const FormResolve = {
     settings: SettingsResolve,
     updateIncludes: FormIncludesResolve,
@@ -1750,7 +1877,7 @@ const routes = [
     { path: 'sliders', component: VdDynamicListComponent, data: { classType: Slider }, resolve: ListResolve },
     { path: 'sliders/edit/:id', component: VdDynamicFormComponent, data: { classType: Slider, subtitle: $localize `:@@slider:Slider` }, resolve: FormResolve },
     { path: 'sliders/add', component: VdDynamicFormComponent, data: { classType: Slider, query: { clientId: AuthHelper.user.clientId }, subtitle: $localize `:@@slider:Slider` }, resolve: FormResolve },
-    { path: 'documents', component: VdDynamicListComponent, data: { classType: Document, addDialogType: DocumentDialogComponent, query: { type: DocumentType.Document } }, resolve: ListResolve },
+    { path: 'documents', component: VdDynamicListComponent, data: { classType: Document, addDialogType: DocumentDialogComponent, query: { type: DocumentType.Document } }, resolve: DocsListResolve },
 ];
 class VdCmsRoutingModule {
 }
@@ -1759,6 +1886,7 @@ VdCmsRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
 VdCmsRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: VdCmsRoutingModule, providers: [
         SettingsResolve,
         ListProjectionResolve,
+        DocumentListProjectionResolve,
         FormIncludesResolve,
         ExcludedColumnsResolve,
         ExcludedFieldsResolve,
@@ -1772,6 +1900,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
                     providers: [
                         SettingsResolve,
                         ListProjectionResolve,
+                        DocumentListProjectionResolve,
                         FormIncludesResolve,
                         ExcludedColumnsResolve,
                         ExcludedFieldsResolve,
@@ -1790,6 +1919,7 @@ MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         MatChipsModule,
         MatAutocompleteModule,
         MatCheckboxModule,
+        MatDialogModule,
         MatInputModule,
         MatSelectModule,
         MatProgressBarModule] });
@@ -1800,6 +1930,7 @@ MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         MatChipsModule,
         MatAutocompleteModule,
         MatCheckboxModule,
+        MatDialogModule,
         MatInputModule,
         MatSelectModule,
         MatProgressBarModule] });
@@ -1814,6 +1945,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
                         MatChipsModule,
                         MatAutocompleteModule,
                         MatCheckboxModule,
+                        MatDialogModule,
                         MatInputModule,
                         MatSelectModule,
                         MatProgressBarModule
@@ -1828,13 +1960,15 @@ VdModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1
         VdMediaModule,
         VdFormsModule,
         VdSelectModule,
-        VdChipsModule] });
+        VdChipsModule,
+        VdFileModule] });
 VdModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: VdModule, imports: [VdCommonModule,
         VdLayoutModule,
         VdMediaModule,
         VdFormsModule,
         VdSelectModule,
-        VdChipsModule] });
+        VdChipsModule,
+        VdFileModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: VdModule, decorators: [{
             type: NgModule,
             args: [{
@@ -1844,7 +1978,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
                         VdMediaModule,
                         VdFormsModule,
                         VdSelectModule,
-                        VdChipsModule
+                        VdChipsModule,
+                        VdFileModule
                     ]
                 }]
         }] });
@@ -1973,6 +2108,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CmsSettings, Content, ContentClient, ContentDepartment, ContentFormComponent, ContentService, ContentType, ContentVariable, ContentVariableClient, ContentVariableDepartment, ContentVariableService, Document, DocumentDialogComponent, DocumentGenericService, DocumentService, Faq, FaqClient, FaqDepartment, FaqScope, FaqService, FormIncludesResolve, ListProjectionResolve, MaterialModule, Slider, SliderService, Template, TemplateClient, TemplateDepartment, TemplateFormComponent, TemplatePreview, TemplatePreviewDialogComponent, TemplatePreviewService, TemplateService, TemplateType, VdCmsModule, VdModule, WrapTag };
-//# sourceMappingURL=messaia-cdk-cms.mjs.map
+export { CmsSettings, Content, ContentClient, ContentDepartment, ContentFormComponent, ContentService, ContentType, ContentVariable, ContentVariableClient, ContentVariableDepartment, ContentVariableService, Document, DocumentDialogComponent, DocumentFormBaseComponent, DocumentFormTemplate, DocumentGenericService, DocumentService, Faq, FaqClient, FaqDepartment, FaqScope, FaqService, FormIncludesResolve, ListProjectionResolve, MaterialModule, Slider, SliderService, Template, TemplateClient, TemplateDepartment, TemplateFormComponent, TemplatePreview, TemplatePreviewDialogComponent, TemplatePreviewService, TemplateService, TemplateType, VdCmsModule, VdModule, WrapTag };
 //# sourceMappingURL=messaia-cdk-cms.mjs.map