@messaia/cdk-cms 21.1.0 → 22.0.0-rc.3

package/fesm2022/messaia-cdk-cms.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, ViewChild, Component, Directive, Inject, ViewEncapsulation, NgModule } from '@angular/core';
-import * as i3$1 from '@angular/router';
+import { Injectable, inject, ViewChild, ChangeDetectionStrategy, Component, Directive, Inject, ViewEncapsulation, NgModule } from '@angular/core';
+import * as i1$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i2 from '@messaia/cdk';
 import { prop, required, AuditEntity, Column, FormField, Display, Grid, FormFieldType, Utils, Api, Table, GenericService, GenericReactiveFormComponent, EnumService, RxReactiveFormsModule, MatFormFieldEditorDirective, VdLayoutNavComponent, VdLayoutCardOverComponent, VdGenericFormComponent, VdEditorDirective, AuthHelper, SaveAction, VdFileInputComponent, BaseComponent, VdChipsComponent, GlobalRoles } from '@messaia/cdk';
@@ -8,22 +8,22 @@ import { VdAuditComponent, DocumentBase, VdDynamicListComponent, VdDynamicFormCo
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import * as i3 from '@angular/common/http';
 import { HttpEventType, HttpResponse } from '@angular/common/http';
-import * as i5 from '@angular/forms';
+import * as i4 from '@angular/forms';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import * as i9 from '@angular/material/button';
+import * as i8 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i7 from '@angular/material/expansion';
+import * as i6 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
-import * as i8 from '@angular/material/form-field';
+import * as i7 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i6 from '@tinymce/tinymce-angular';
+import * as i5 from '@tinymce/tinymce-angular';
 import { EditorModule } from '@tinymce/tinymce-angular';
 import { of, map as map$1 } from 'rxjs';
-import { __decorate, __metadata } from 'tslib';
+import { __decorate } from 'tslib';
 import { map } from 'rxjs/operators';
-import * as i4 from '@angular/material/dialog';
+import * as i3$1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i7$2 from '@ctrl/ngx-codemirror';
+import * as i6$2 from '@ctrl/ngx-codemirror';
 import { CodemirrorModule } from '@ctrl/ngx-codemirror';
 import 'codemirror/addon/edit/closetag';
 import 'codemirror/addon/edit/matchbrackets';
@@ -34,9 +34,9 @@ import { saveAs } from 'file-saver';
 import { MatCard } from '@angular/material/card';
 import { MatDivider } from '@angular/material/divider';
 import { MatIcon } from '@angular/material/icon';
-import * as i5$1 from '@angular/material/progress-bar';
+import * as i4$1 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i7$1 from 'ng2-pdf-viewer';
+import * as i6$1 from 'ng2-pdf-viewer';
 import { PdfViewerModule } from 'ng2-pdf-viewer';
 import * as i1 from 'angular-auth-oidc-client';
 
@@ -114,12 +114,10 @@ class ContentClient {
     }
 }
 __decorate([
-    prop(),
-    __metadata("design:type", Number)
+    prop()
 ], ContentClient.prototype, "contentId", void 0);
 __decorate([
-    required(),
-    __metadata("design:type", Number)
+    required()
 ], ContentClient.prototype, "clientId", void 0);
 
 /**
@@ -151,12 +149,10 @@ class ContentDepartment {
     }
 }
 __decorate([
-    prop(),
-    __metadata("design:type", Number)
+    prop()
 ], ContentDepartment.prototype, "contentId", void 0);
 __decorate([
-    required(),
-    __metadata("design:type", Number)
+    required()
 ], ContentDepartment.prototype, "departmentId", void 0);
 
 let Content = class Content extends AuditEntity {
@@ -258,50 +254,42 @@ let Content = class Content extends AuditEntity {
     departmentJoins;
 };
 __decorate([
-    prop(),
-    __metadata("design:type", Number)
+    prop()
 ], Content.prototype, "type", void 0);
 __decorate([
-    prop(),
-    __metadata("design:type", Number)
+    prop()
 ], Content.prototype, "sectionId", void 0);
 __decorate([
     required(),
     Column(),
     FormField({ row: 20 }),
-    Display($localize `:@@title:Title`),
-    __metadata("design:type", String)
+    Display($localize `:@@title:Title`)
 ], Content.prototype, "title", void 0);
 __decorate([
     required(),
     Column({ maxWidth: 190, display: Grid.Md }),
     FormField({ row: 30 }),
-    Display($localize `:@@name:Name`),
-    __metadata("design:type", String)
+    Display($localize `:@@name:Name`)
 ], Content.prototype, "name", void 0);
 __decorate([
     prop(),
     FormField({ row: 40, type: FormFieldType.Chips }),
-    Display($localize `:@@aliases:Aliases`),
-    __metadata("design:type", String)
+    Display($localize `:@@aliases:Aliases`)
 ], Content.prototype, "aliases", void 0);
 __decorate([
     prop(),
     FormField({ row: 50 }),
-    Display($localize `:@@wrap:Wrap`),
-    __metadata("design:type", String)
+    Display($localize `:@@wrap:Wrap`)
 ], Content.prototype, "wrapTag", void 0);
 __decorate([
     prop(),
     FormField({ row: 50 }),
-    Display($localize `:@@layout:Layout`),
-    __metadata("design:type", String)
+    Display($localize `:@@layout:Layout`)
 ], Content.prototype, "layout", void 0);
 __decorate([
     prop(),
     FormField({ row: 60, type: FormFieldType.Editor }),
-    Display($localize `:@@content:Content`),
-    __metadata("design:type", String)
+    Display($localize `:@@content:Content`)
 ], Content.prototype, "body", void 0);
 __decorate([
     prop(),
@@ -310,8 +298,7 @@ __decorate([
         type: FormFieldType.TextArea,
         hint: $localize `:@@scriptHint:Do not include <script> tags.`
     }),
-    Display($localize `:@@bodyScript:Body Script`),
-    __metadata("design:type", String)
+    Display($localize `:@@bodyScript:Body Script`)
 ], Content.prototype, "script", void 0);
 __decorate([
     prop(),
@@ -320,8 +307,7 @@ __decorate([
         type: FormFieldType.TextArea,
         hint: $localize `:@@headScriptHint:Do not include <script> tags.`
     }),
-    Display($localize `:@@headScript:Head Script`),
-    __metadata("design:type", String)
+    Display($localize `:@@headScript:Head Script`)
 ], Content.prototype, "headScript", void 0);
 __decorate([
     prop(),
@@ -330,8 +316,7 @@ __decorate([
         type: FormFieldType.TextArea,
         hint: $localize `:@@noScriptHint:Do not include <noscript> tags.`
     }),
-    Display($localize `:@@noScript:NoScript`),
-    __metadata("design:type", String)
+    Display($localize `:@@noScript:NoScript`)
 ], Content.prototype, "noScript", void 0);
 __decorate([
     prop(),
@@ -340,14 +325,12 @@ __decorate([
         type: FormFieldType.TextArea,
         hint: $localize `:@@styleHint:Do not include <style> or <link> tags.`
     }),
-    Display($localize `:@@style:Style`),
-    __metadata("design:type", String)
+    Display($localize `:@@style:Style`)
 ], Content.prototype, "style", void 0);
 __decorate([
     prop(),
     FormField({ row: 200 }),
-    Display($localize `:@@showTitle:Show title`),
-    __metadata("design:type", Boolean)
+    Display($localize `:@@showTitle:Show title`)
 ], Content.prototype, "showTitle", void 0);
 __decorate([
     prop(),
@@ -356,8 +339,7 @@ __decorate([
         event: 'toggle'
     }),
     FormField({ row: 210 }),
-    Display($localize `:@@enabled:Enabled`),
-    __metadata("design:type", Boolean)
+    Display($localize `:@@enabled:Enabled`)
 ], Content.prototype, "enabled", void 0);
 __decorate([
     required({ conditionalExpression: (x) => true }),
@@ -385,8 +367,7 @@ __decorate([
         optionTemplate: (x) => x?.clientName,
         triggerMapper: (x) => x?.clientName
     }),
-    Display($localize `:@@projects:Projects`),
-    __metadata("design:type", Array)
+    Display($localize `:@@projects:Projects`)
 ], Content.prototype, "clientJoins", void 0);
 __decorate([
     prop(),
@@ -415,8 +396,7 @@ __decorate([
         optionTemplate: (x) => x?.departmentName,
         triggerMapper: (x) => x?.departmentName
     }),
-    Display($localize `:@@departments:Departments`),
-    __metadata("design:type", Array)
+    Display($localize `:@@departments:Departments`)
 ], Content.prototype, "departmentJoins", void 0);
 Content = __decorate([
     Api('content'),
@@ -442,10 +422,10 @@ class ContentService extends GenericService {
     isAliasAvailable(item) {
         return this.create(item, '/isAliasAvailable').pipe(map((x) => x.value));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -454,8 +434,6 @@ class ContentFormComponent extends GenericReactiveFormComponent {
     service;
     fileService;
     httpClient;
-    route;
-    changeDetectorRef;
     /**
      * Injects the CmsSettings service using Angular's `inject()` function.
      * This allows access to the CmsSettings instance outside of constructor-based dependency injection,
@@ -497,13 +475,11 @@ class ContentFormComponent extends GenericReactiveFormComponent {
     /**
      * Constructor
      */
-    constructor(service, fileService, httpClient, route, changeDetectorRef) {
-        super(Content, service, route, changeDetectorRef);
+    constructor(service, fileService, httpClient) {
+        super(Content, service);
         this.service = service;
         this.fileService = fileService;
         this.httpClient = httpClient;
-        this.route = route;
-        this.changeDetectorRef = changeDetectorRef;
         if (this.settings?.multitenantable || this.settings?.multiClients) {
             this.include('ClientJoins', true);
         }
@@ -697,12 +673,12 @@ class ContentFormComponent extends GenericReactiveFormComponent {
             this.routeSubscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentFormComponent, deps: [{ token: ContentService }, { token: i2.FileService }, { token: i3.HttpClient }, { token: i3$1.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ContentFormComponent, isStandalone: true, selector: "app-content-form", viewQueries: [{ propertyName: "formElement", first: true, predicate: ["form"], descendants: true }, { propertyName: "editorComponent", first: true, predicate: ["editor"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<vd-layout-nav color=\"primary\" [backNavigationRoute]=\"listRoute\" toolbarTitle=\"Content\" i18n-toolbarTitle=\"@@content\" [editMode]=\"isEditMode\" [actions]=\"toolbarActions\" [data]=\"item\" [context]=\"this\">\r\n    @if (form) {\r\n        <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save()\">\r\n            <vd-layout-card-over class=\"accordion\" cardWidth=\"70\" color=\"primary\" flex>\r\n                <mat-accordion [multi]=\"!isEditMode\">\r\n                    <!-- #region Details -->\r\n                    <mat-expansion-panel expanded=\"true\" id=\"details\">\r\n                        <mat-expansion-panel-header>\r\n                            <mat-panel-title i18n=\"@@details\">Details</mat-panel-title>\r\n                        </mat-expansion-panel-header>\r\n                        <ng-template matExpansionPanelContent>\r\n                            <vd-generic-form [formGroup]=\"form\" [fieldGroups]=\"fieldGroups\" [context]=\"this\">\r\n                                <ng-template vd-editor let-field=\"field\" let-formGroup=\"formGroup\">\r\n                                    <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\" flex>\r\n                                        <mat-label>{{field.label}}</mat-label>\r\n                                        <editor [formControlName]=\"field.name\" [init]=\"editorConfig\" tinyMatFormControl flex></editor>\r\n                                        @if (field.hint) {\r\n                                            <mat-hint>{{field.hint}}</mat-hint>\r\n                                        }\r\n                                        @for (errorMessage of formGroup.controls[field.name]['errorMessages']; track errorMessage) {\r\n                                            <mat-error>{{errorMessage}}</mat-error>\r\n                                        }\r\n                                    </mat-form-field>\r\n                                </ng-template>\r\n                            </vd-generic-form>\r\n                        </ng-template>\r\n                        <mat-action-row>\r\n                            <button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n                            @if (isEditMode || true) {\r\n                                <button type=\"button\" mat-button (click)=\"apply()\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n                            }\r\n                            <button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n                            <span flex></span>\r\n                        </mat-action-row>\r\n                    </mat-expansion-panel>\r\n                    <!-- #endregion -->\r\n                    <!-- #region Audit -->\r\n                    @if (isEditMode) {\r\n                        <mat-expansion-panel id=\"audit\">\r\n                            <mat-expansion-panel-header>\r\n                                <mat-panel-title>\r\n                                    <span i18n=\"@@audit\">Audit</span>\r\n                                </mat-panel-title>\r\n                            </mat-expansion-panel-header>\r\n                            <ng-template matExpansionPanelContent>\r\n                                <vd-audit [entity]=\"item\"> </vd-audit>\r\n                            </ng-template>\r\n                            <mat-action-row>\r\n                                <button type=\"button\" mat-flat-button color=\"accent\" (click)=\"back()\" i18n=\"@@close\">Close</button>\r\n                                <span flex></span>\r\n                            </mat-action-row>\r\n                        </mat-expansion-panel>\r\n                    }\r\n                    <!-- #endregion -->\r\n                </mat-accordion>\r\n            </vd-layout-card-over>\r\n        </form>\r\n    }\r\n</vd-layout-nav>", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { 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: "ngmodule", type: EditorModule }, { kind: "component", type: i6.EditorComponent, selector: "editor", inputs: ["cloudChannel", "apiKey", "licenseKey", "init", "id", "initialValue", "outputFormat", "inline", "tagName", "plugins", "toolbar", "modelEvents", "allowedEvents", "ignoreEvents", "disabled"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i7.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i7.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i7.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i7.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i7.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i7.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i9.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatFormFieldEditorDirective, selector: "[tinyMatFormControl]", inputs: ["errorStateMatcher", "disabled", "id", "placeholder", "required", "value"], outputs: ["editorChange"] }, { kind: "component", type: VdLayoutNavComponent, selector: "vd-layout-nav", inputs: ["toolbarTitle", "editMode", "actions", "data", "context", "hideToolbar", "icon", "logo", "color", "hideToggle", "backNavigationRoute", "navigationRoute"], outputs: ["reload"] }, { kind: "component", type: VdLayoutCardOverComponent, selector: "vd-layout-card-over", inputs: ["cardTitle", "cardSubtitle", "cardWidth", "color"] }, { kind: "component", type: VdGenericFormComponent, selector: "vd-generic-form", inputs: ["formGroup", "classType", "formDefinition", "fieldGroups", "groupName", "fieldSets", "context", "debugValue", "readonly", "separatorKeysCodes"], outputs: ["init"] }, { kind: "directive", type: VdEditorDirective, selector: "[vd-editor]ng-template" }, { kind: "component", type: VdAuditComponent, selector: "vd-audit", inputs: ["entity"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentFormComponent, deps: [{ token: ContentService }, { token: i2.FileService }, { token: i3.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ContentFormComponent, isStandalone: true, selector: "app-content-form", viewQueries: [{ propertyName: "formElement", first: true, predicate: ["form"], descendants: true }, { propertyName: "editorComponent", first: true, predicate: ["editor"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<vd-layout-nav color=\"primary\" [backNavigationRoute]=\"listRoute\" toolbarTitle=\"Content\" i18n-toolbarTitle=\"@@content\" [editMode]=\"isEditMode\" [actions]=\"toolbarActions\" [data]=\"item\" [context]=\"this\">\r\n    @if (form) {\r\n        <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save()\">\r\n            <vd-layout-card-over class=\"accordion\" cardWidth=\"70\" color=\"primary\" flex>\r\n                <mat-accordion [multi]=\"!isEditMode\">\r\n                    <!-- #region Details -->\r\n                    <mat-expansion-panel expanded=\"true\" id=\"details\">\r\n                        <mat-expansion-panel-header>\r\n                            <mat-panel-title i18n=\"@@details\">Details</mat-panel-title>\r\n                        </mat-expansion-panel-header>\r\n                        <ng-template matExpansionPanelContent>\r\n                            <vd-generic-form [formGroup]=\"form\" [fieldGroups]=\"fieldGroups\" [context]=\"this\">\r\n                                <ng-template vd-editor let-field=\"field\" let-formGroup=\"formGroup\">\r\n                                    <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\" flex>\r\n                                        <mat-label>{{field.label}}</mat-label>\r\n                                        <editor [formControlName]=\"field.name\" [init]=\"editorConfig\" tinyMatFormControl flex></editor>\r\n                                        @if (field.hint) {\r\n                                            <mat-hint>{{field.hint}}</mat-hint>\r\n                                        }\r\n                                        @for (errorMessage of formGroup.controls[field.name]['errorMessages']; track errorMessage) {\r\n                                            <mat-error>{{errorMessage}}</mat-error>\r\n                                        }\r\n                                    </mat-form-field>\r\n                                </ng-template>\r\n                            </vd-generic-form>\r\n                        </ng-template>\r\n                        <mat-action-row>\r\n                            <button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n                            @if (isEditMode || true) {\r\n                                <button type=\"button\" mat-button (click)=\"apply()\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n                            }\r\n                            <button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n                            <span flex></span>\r\n                        </mat-action-row>\r\n                    </mat-expansion-panel>\r\n                    <!-- #endregion -->\r\n                    <!-- #region Audit -->\r\n                    @if (isEditMode) {\r\n                        <mat-expansion-panel id=\"audit\">\r\n                            <mat-expansion-panel-header>\r\n                                <mat-panel-title>\r\n                                    <span i18n=\"@@audit\">Audit</span>\r\n                                </mat-panel-title>\r\n                            </mat-expansion-panel-header>\r\n                            <ng-template matExpansionPanelContent>\r\n                                <vd-audit [entity]=\"item\"> </vd-audit>\r\n                            </ng-template>\r\n                            <mat-action-row>\r\n                                <button type=\"button\" mat-flat-button color=\"accent\" (click)=\"back()\" i18n=\"@@close\">Close</button>\r\n                                <span flex></span>\r\n                            </mat-action-row>\r\n                        </mat-expansion-panel>\r\n                    }\r\n                    <!-- #endregion -->\r\n                </mat-accordion>\r\n            </vd-layout-card-over>\r\n        </form>\r\n    }\r\n</vd-layout-nav>", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { 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: "ngmodule", type: EditorModule }, { kind: "component", type: i5.EditorComponent, selector: "editor", inputs: ["cloudChannel", "apiKey", "licenseKey", "init", "id", "initialValue", "outputFormat", "inline", "tagName", "plugins", "toolbar", "modelEvents", "allowedEvents", "ignoreEvents", "disabled"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i6.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i6.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i6.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatFormFieldEditorDirective, selector: "[tinyMatFormControl]", inputs: ["errorStateMatcher", "disabled", "id", "placeholder", "required", "value"], outputs: ["editorChange"] }, { kind: "component", type: VdLayoutNavComponent, selector: "vd-layout-nav", inputs: ["toolbarTitle", "editMode", "actions", "data", "context", "hideToolbar", "icon", "logo", "color", "hideToggle", "backNavigationRoute", "navigationRoute"], outputs: ["reload"] }, { kind: "component", type: VdLayoutCardOverComponent, selector: "vd-layout-card-over", inputs: ["cardTitle", "cardSubtitle", "cardWidth", "color"] }, { kind: "component", type: VdGenericFormComponent, selector: "vd-generic-form", inputs: ["formGroup", "classType", "formDefinition", "fieldGroups", "groupName", "fieldSets", "context", "debugValue", "readonly", "separatorKeysCodes"], outputs: ["init"] }, { kind: "directive", type: VdEditorDirective, selector: "[vd-editor]ng-template" }, { kind: "component", type: VdAuditComponent, selector: "vd-audit", inputs: ["entity"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-content-form', imports: [
+            args: [{ selector: 'app-content-form', changeDetection: ChangeDetectionStrategy.Eager, imports: [
                         ReactiveFormsModule,
                         RxReactiveFormsModule,
                         EditorModule,
@@ -716,7 +692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         VdEditorDirective,
                         VdAuditComponent
                     ], template: "<vd-layout-nav color=\"primary\" [backNavigationRoute]=\"listRoute\" toolbarTitle=\"Content\" i18n-toolbarTitle=\"@@content\" [editMode]=\"isEditMode\" [actions]=\"toolbarActions\" [data]=\"item\" [context]=\"this\">\r\n    @if (form) {\r\n        <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save()\">\r\n            <vd-layout-card-over class=\"accordion\" cardWidth=\"70\" color=\"primary\" flex>\r\n                <mat-accordion [multi]=\"!isEditMode\">\r\n                    <!-- #region Details -->\r\n                    <mat-expansion-panel expanded=\"true\" id=\"details\">\r\n                        <mat-expansion-panel-header>\r\n                            <mat-panel-title i18n=\"@@details\">Details</mat-panel-title>\r\n                        </mat-expansion-panel-header>\r\n                        <ng-template matExpansionPanelContent>\r\n                            <vd-generic-form [formGroup]=\"form\" [fieldGroups]=\"fieldGroups\" [context]=\"this\">\r\n                                <ng-template vd-editor let-field=\"field\" let-formGroup=\"formGroup\">\r\n                                    <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\" flex>\r\n                                        <mat-label>{{field.label}}</mat-label>\r\n                                        <editor [formControlName]=\"field.name\" [init]=\"editorConfig\" tinyMatFormControl flex></editor>\r\n                                        @if (field.hint) {\r\n                                            <mat-hint>{{field.hint}}</mat-hint>\r\n                                        }\r\n                                        @for (errorMessage of formGroup.controls[field.name]['errorMessages']; track errorMessage) {\r\n                                            <mat-error>{{errorMessage}}</mat-error>\r\n                                        }\r\n                                    </mat-form-field>\r\n                                </ng-template>\r\n                            </vd-generic-form>\r\n                        </ng-template>\r\n                        <mat-action-row>\r\n                            <button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n                            @if (isEditMode || true) {\r\n                                <button type=\"button\" mat-button (click)=\"apply()\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n                            }\r\n                            <button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n                            <span flex></span>\r\n                        </mat-action-row>\r\n                    </mat-expansion-panel>\r\n                    <!-- #endregion -->\r\n                    <!-- #region Audit -->\r\n                    @if (isEditMode) {\r\n                        <mat-expansion-panel id=\"audit\">\r\n                            <mat-expansion-panel-header>\r\n                                <mat-panel-title>\r\n                                    <span i18n=\"@@audit\">Audit</span>\r\n                                </mat-panel-title>\r\n                            </mat-expansion-panel-header>\r\n                            <ng-template matExpansionPanelContent>\r\n                                <vd-audit [entity]=\"item\"> </vd-audit>\r\n                            </ng-template>\r\n                            <mat-action-row>\r\n                                <button type=\"button\" mat-flat-button color=\"accent\" (click)=\"back()\" i18n=\"@@close\">Close</button>\r\n                                <span flex></span>\r\n                            </mat-action-row>\r\n                        </mat-expansion-panel>\r\n                    }\r\n                    <!-- #endregion -->\r\n                </mat-accordion>\r\n            </vd-layout-card-over>\r\n        </form>\r\n    }\r\n</vd-layout-nav>" }]
-        }], ctorParameters: () => [{ type: ContentService }, { type: i2.FileService }, { type: i3.HttpClient }, { type: i3$1.ActivatedRoute }, { type: i0.ChangeDetectorRef }], propDecorators: { formElement: [{
+        }], ctorParameters: () => [{ type: ContentService }, { type: i2.FileService }, { type: i3.HttpClient }], propDecorators: { formElement: [{
                 type: ViewChild,
                 args: ['form', { static: false }]
             }], editorComponent: [{
@@ -771,8 +747,7 @@ __decorate([
         readonly: (x) => (x.id ?? 0) > 0,
         hide: (_, __, ctx) => ctx?.currentUser?.isDepartmentAdmin
     }),
-    Display($localize `:@@project:Project`),
-    __metadata("design:type", Number)
+    Display($localize `:@@project:Project`)
 ], Document.prototype, "clientId", void 0);
 __decorate([
     prop(),
@@ -793,12 +768,10 @@ __decorate([
         readonly: (x) => (x.id ?? 0) > 0 || !x.clientId,
         hide: (_, __, ctx) => ctx?.currentUser?.isDepartmentAdmin
     }),
-    Display($localize `:@@department:Department`),
-    __metadata("design:type", Number)
+    Display($localize `:@@department:Department`)
 ], Document.prototype, "departmentId", void 0);
 __decorate([
-    required(),
-    __metadata("design:type", String)
+    required()
 ], Document.prototype, "path", void 0);
 Document = __decorate([
     Table({
@@ -806,42 +779,9 @@ Document = __decorate([
         projection: ['id', 'createdDate', 'name', 'extension', 'publicLink', 'isEditable', 'isDeletable'],
         editable: false,
         downloadable: true
-    }),
-    __metadata("design:paramtypes", [Object])
+    })
 ], Document);
 
-class DocumentGenericService extends GenericService {
-    /**
-     * Constructor
-     * @param serviceName
-     */
-    constructor(serviceName) {
-        super(serviceName);
-    }
-}
-
-class DocumentService extends DocumentGenericService {
-    /**
-     * Constructor
-     */
-    constructor() {
-        super('document');
-    }
-    /**
-     * Sends an email to the customer
-     * @param id The ID of the document
-     */
-    sendMail(id) {
-        return this.update(`sendMail/${id}`, null);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DocumentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DocumentService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DocumentService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
-
 const DocumentFormTemplate = /* html */ `
     <div mat-dialog-title class="mat-headline-6" i18n="@@newDocument">New document</div>
     @if(form){
@@ -866,8 +806,6 @@ class DocumentFormBaseComponent extends GenericReactiveFormComponent {
     documentService;
     fileService;
     dialogRef;
-    route;
-    changeDetectorRef;
     data;
     /**
      * Upload status
@@ -880,14 +818,12 @@ class DocumentFormBaseComponent extends GenericReactiveFormComponent {
     /**
      * Constructor
      */
-    constructor(entityType, documentService, fileService, dialogRef, route, changeDetectorRef, data) {
-        super(entityType, documentService, route, changeDetectorRef);
+    constructor(entityType, documentService, fileService, dialogRef, data) {
+        super(entityType, documentService);
         this.entityType = entityType;
         this.documentService = documentService;
         this.fileService = fileService;
         this.dialogRef = dialogRef;
-        this.route = route;
-        this.changeDetectorRef = changeDetectorRef;
         this.data = data;
         this.item = data;
     }
@@ -940,29 +876,57 @@ class DocumentFormBaseComponent extends GenericReactiveFormComponent {
             departmentId: this.currentUser?.departmentId
         }), this.data || {}));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DocumentFormBaseComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: DocumentFormBaseComponent, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DocumentFormBaseComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: DocumentFormBaseComponent, isStandalone: true, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DocumentFormBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DocumentFormBaseComponent, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i0.Type }, { type: undefined }, { type: i2.FileService }, { type: i4.MatDialogRef }, { type: i3$1.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: undefined }] });
+        }], ctorParameters: () => [{ type: i0.Type }, { type: undefined }, { type: i2.FileService }, { type: i3$1.MatDialogRef }, { type: undefined }] });
+
+class DocumentGenericService extends GenericService {
+    /**
+     * Constructor
+     * @param serviceName
+     */
+    constructor(serviceName) {
+        super(serviceName);
+    }
+}
+
+class DocumentService extends DocumentGenericService {
+    /**
+     * Constructor
+     */
+    constructor() {
+        super('document');
+    }
+    /**
+     * Sends an email to the customer
+     * @param id The ID of the document
+     */
+    sendMail(id) {
+        return this.update(`sendMail/${id}`, null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DocumentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DocumentService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DocumentService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
 
 class DocumentDialogComponent extends DocumentFormBaseComponent {
     documentService;
     fileService;
-    route;
-    changeDetectorRef;
     dialogRef;
     data;
     /**
      * Constructor
      */
-    constructor(documentService, fileService, route, changeDetectorRef, dialogRef, data = new Document()) {
-        super(Document, documentService, fileService, dialogRef, route, changeDetectorRef, data);
+    constructor(documentService, fileService, dialogRef, data = new Document()) {
+        super(Document, documentService, fileService, dialogRef, data);
         this.documentService = documentService;
         this.fileService = fileService;
-        this.route = route;
-        this.changeDetectorRef = changeDetectorRef;
         this.dialogRef = dialogRef;
         this.data = data;
     }
@@ -972,14 +936,15 @@ class DocumentDialogComponent extends DocumentFormBaseComponent {
     onBeforeFormBuild() {
         this.item.isPublic = true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", 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 });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DocumentDialogComponent, isStandalone: true, selector: "document-dialog", usesInheritance: true, ngImport: i0, template: "\n    <div mat-dialog-title class=\"mat-headline-6\" i18n=\"@@newDocument\">New document</div>\n    @if(form){\n        <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>\n    }", isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "component", type: VdGenericFormComponent, selector: "vd-generic-form", inputs: ["formGroup", "classType", "formDefinition", "fieldGroups", "groupName", "fieldSets", "context", "debugValue", "readonly", "separatorKeysCodes"], outputs: ["init"] }, { kind: "component", type: VdFileInputComponent, selector: "[vd-file-input]", inputs: ["accept", "placeholder", "required", "multiple", "disabled", "errorState"], outputs: ["select", "clear"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DocumentDialogComponent, deps: [{ token: DocumentService }, { token: i2.FileService }, { token: i3$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DocumentDialogComponent, isStandalone: true, selector: "document-dialog", usesInheritance: true, ngImport: i0, template: "\n    <div mat-dialog-title class=\"mat-headline-6\" i18n=\"@@newDocument\">New document</div>\n    @if(form){\n        <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>\n    }", isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i3$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "component", type: VdGenericFormComponent, selector: "vd-generic-form", inputs: ["formGroup", "classType", "formDefinition", "fieldGroups", "groupName", "fieldSets", "context", "debugValue", "readonly", "separatorKeysCodes"], outputs: ["init"] }, { kind: "component", type: VdFileInputComponent, selector: "[vd-file-input]", inputs: ["accept", "placeholder", "required", "multiple", "disabled", "errorState"], outputs: ["select", "clear"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DocumentDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DocumentDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'document-dialog',
                     template: DocumentFormTemplate,
+                    changeDetection: ChangeDetectionStrategy.Eager,
                     imports: [
                         ReactiveFormsModule,
                         MatDialogModule,
@@ -988,7 +953,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         VdFileInputComponent
                     ]
                 }]
-        }], ctorParameters: () => [{ type: DocumentService }, { type: i2.FileService }, { type: i3$1.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i4.MatDialogRef }, { type: Document, decorators: [{
+        }], ctorParameters: () => [{ type: DocumentService }, { type: i2.FileService }, { type: i3$1.MatDialogRef }, { type: Document, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }] });
@@ -1022,12 +987,10 @@ class FaqClient {
     }
 }
 __decorate([
-    prop(),
-    __metadata("design:type", Number)
+    prop()
 ], FaqClient.prototype, "faqId", void 0);
 __decorate([
-    required(),
-    __metadata("design:type", Number)
+    required()
 ], FaqClient.prototype, "clientId", void 0);
 
 /**
@@ -1059,12 +1022,10 @@ class FaqDepartment {
     }
 }
 __decorate([
-    prop(),
-    __metadata("design:type", Number)
+    prop()
 ], FaqDepartment.prototype, "faqId", void 0);
 __decorate([
-    required(),
-    __metadata("design:type", Number)
+    required()
 ], FaqDepartment.prototype, "departmentId", void 0);
 
 let Faq = class Faq extends AuditEntity {
@@ -1119,8 +1080,7 @@ __decorate([
         contentLength: 30
     }),
     FormField({ row: 10 }),
-    Display($localize `:@@question:Question`),
-    __metadata("design:type", String)
+    Display($localize `:@@question:Question`)
 ], Faq.prototype, "question", void 0);
 __decorate([
     required(),
@@ -1133,8 +1093,7 @@ __decorate([
         row: 20,
         type: FormFieldType.Autocomplete
     }),
-    Display($localize `:@@group:Group`),
-    __metadata("design:type", String)
+    Display($localize `:@@group:Group`)
 ], Faq.prototype, "group", void 0);
 __decorate([
     required({ conditionalExpression: (x) => true }),
@@ -1163,8 +1122,7 @@ __decorate([
         optionTemplate: (x) => x?.clientName,
         triggerMapper: (x) => x?.clientName
     }),
-    Display($localize `:@@projects:Projects`),
-    __metadata("design:type", Array)
+    Display($localize `:@@projects:Projects`)
 ], Faq.prototype, "clientJoins", void 0);
 __decorate([
     prop(),
@@ -1194,14 +1152,12 @@ __decorate([
         optionTemplate: (x) => x?.departmentName,
         triggerMapper: (x) => x?.departmentName
     }),
-    Display($localize `:@@departments:Departments`),
-    __metadata("design:type", Array)
+    Display($localize `:@@departments:Departments`)
 ], Faq.prototype, "departmentJoins", void 0);
 __decorate([
     prop(),
     FormField({ row: 20 }),
-    Display($localize `:@@ordering:Ordering`),
-    __metadata("design:type", Number)
+    Display($localize `:@@ordering:Ordering`)
 ], Faq.prototype, "ordering", void 0);
 __decorate([
     required(),
@@ -1209,8 +1165,7 @@ __decorate([
         row: 50,
         type: FormFieldType.Editor
     }),
-    Display($localize `:@@answer:Answer`),
-    __metadata("design:type", String)
+    Display($localize `:@@answer:Answer`)
 ], Faq.prototype, "answer", void 0);
 __decorate([
     prop(),
@@ -1219,8 +1174,7 @@ __decorate([
         event: 'toggle'
     }),
     FormField({ row: 100 }),
-    Display($localize `:@@enabled:Enabled`),
-    __metadata("design:type", Boolean)
+    Display($localize `:@@enabled:Enabled`)
 ], Faq.prototype, "enabled", void 0);
 Faq = __decorate([
     Api('faq'),
@@ -1228,8 +1182,7 @@ Faq = __decorate([
         endpoint: 'faq',
         projection: ['id', 'createdDate', 'question', 'group', 'enabled'],
         duplicable: true
-    }),
-    __metadata("design:paramtypes", [Object])
+    })
 ], Faq);
 
 class FaqService extends GenericService {
@@ -1239,10 +1192,10 @@ class FaqService extends GenericService {
     constructor() {
         super('faq');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FaqService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FaqService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FaqService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FaqService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FaqService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FaqService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -1251,8 +1204,6 @@ class FaqFormComponent extends GenericReactiveFormComponent {
     service;
     fileService;
     httpClient;
-    route;
-    changeDetectorRef;
     /**
      * Injects the CmsSettings service using Angular's `inject()` function.
      * This allows access to the CmsSettings instance outside of constructor-based dependency injection,
@@ -1262,13 +1213,11 @@ class FaqFormComponent extends GenericReactiveFormComponent {
     /**
      * Constructor
      */
-    constructor(service, fileService, httpClient, route, changeDetectorRef) {
-        super(Faq, service, route, changeDetectorRef);
+    constructor(service, fileService, httpClient) {
+        super(Faq, service);
         this.service = service;
         this.fileService = fileService;
         this.httpClient = httpClient;
-        this.route = route;
-        this.changeDetectorRef = changeDetectorRef;
         if (this.settings?.multitenantable || this.settings?.multiClients) {
             this.include('ClientJoins', true);
         }
@@ -1294,12 +1243,12 @@ class FaqFormComponent extends GenericReactiveFormComponent {
     showClientJoins() {
         return (!this.canCreate || (!this.settings?.multitenantable && !this.settings?.multiClients)) || this.isClientAdmin;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FaqFormComponent, deps: [{ token: FaqService }, { token: i2.FileService }, { token: i3.HttpClient }, { token: i3$1.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FaqFormComponent, isStandalone: true, selector: "app-faq-form", usesInheritance: true, ngImport: i0, template: "<vd-layout-nav color=\"primary\" [backNavigationRoute]=\"listRoute\" toolbarTitle=\"FAQ\" i18n-toolbarTitle=\"@@faq\" [editMode]=\"isEditMode\" [actions]=\"toolbarActions\" [data]=\"item\" [context]=\"this\">\r\n    @if (form) {\r\n        <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save()\">\r\n            <vd-layout-card-over class=\"accordion\" cardWidth=\"70\" color=\"primary\" flex>\r\n                <mat-accordion [multi]=\"!isEditMode\">\r\n                    <!-- #region Details -->\r\n                    <mat-expansion-panel expanded=\"true\" id=\"details\">\r\n                        <mat-expansion-panel-header>\r\n                            <mat-panel-title i18n=\"@@details\">Details</mat-panel-title>\r\n                        </mat-expansion-panel-header>\r\n                        <ng-template matExpansionPanelContent>\r\n                            <vd-generic-form [formGroup]=\"form\" [fieldGroups]=\"fieldGroups\" [context]=\"this\">\r\n                                <ng-template vd-editor let-field=\"field\" let-formGroup=\"formGroup\">\r\n                                    <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\" flex>\r\n                                        <mat-label>{{field.label}}</mat-label>\r\n                                        <editor [formControlName]=\"field.name\" [init]=\"editorConfig\" tinyMatFormControl flex></editor>\r\n                                        @if (field.hint) {\r\n                                            <mat-hint>{{field.hint}}</mat-hint>\r\n                                        }\r\n                                        @for (errorMessage of formGroup.controls[field.name]['errorMessages']; track errorMessage) {\r\n                                            <mat-error>{{errorMessage}}</mat-error>\r\n                                        }\r\n                                    </mat-form-field>\r\n                                </ng-template>\r\n                            </vd-generic-form>\r\n                        </ng-template>\r\n                        <mat-action-row>\r\n                            <button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n                            @if (isEditMode || true) {\r\n                                <button type=\"button\" mat-button (click)=\"apply()\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n                            }\r\n                            <button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n                            <span flex></span>\r\n                        </mat-action-row>\r\n                    </mat-expansion-panel>\r\n                    <!-- #endregion -->\r\n                    <!-- #region Audit -->\r\n                    @if (isEditMode) {\r\n                        <mat-expansion-panel id=\"audit\">\r\n                            <mat-expansion-panel-header>\r\n                                <mat-panel-title>\r\n                                    <span i18n=\"@@audit\">Audit</span>\r\n                                </mat-panel-title>\r\n                            </mat-expansion-panel-header>\r\n                            <ng-template matExpansionPanelContent>\r\n                                <vd-audit [entity]=\"item\"> </vd-audit>\r\n                            </ng-template>\r\n                            <mat-action-row>\r\n                                <button type=\"button\" mat-flat-button color=\"accent\" (click)=\"back()\" i18n=\"@@close\">Close</button>\r\n                                <span flex></span>\r\n                            </mat-action-row>\r\n                        </mat-expansion-panel>\r\n                    }\r\n                    <!-- #endregion -->\r\n                </mat-accordion>\r\n            </vd-layout-card-over>\r\n        </form>\r\n    }\r\n</vd-layout-nav>", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { 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: "ngmodule", type: EditorModule }, { kind: "component", type: i6.EditorComponent, selector: "editor", inputs: ["cloudChannel", "apiKey", "licenseKey", "init", "id", "initialValue", "outputFormat", "inline", "tagName", "plugins", "toolbar", "modelEvents", "allowedEvents", "ignoreEvents", "disabled"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i7.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i7.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i7.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i7.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i7.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i7.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i9.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatFormFieldEditorDirective, selector: "[tinyMatFormControl]", inputs: ["errorStateMatcher", "disabled", "id", "placeholder", "required", "value"], outputs: ["editorChange"] }, { kind: "component", type: VdLayoutNavComponent, selector: "vd-layout-nav", inputs: ["toolbarTitle", "editMode", "actions", "data", "context", "hideToolbar", "icon", "logo", "color", "hideToggle", "backNavigationRoute", "navigationRoute"], outputs: ["reload"] }, { kind: "component", type: VdLayoutCardOverComponent, selector: "vd-layout-card-over", inputs: ["cardTitle", "cardSubtitle", "cardWidth", "color"] }, { kind: "component", type: VdGenericFormComponent, selector: "vd-generic-form", inputs: ["formGroup", "classType", "formDefinition", "fieldGroups", "groupName", "fieldSets", "context", "debugValue", "readonly", "separatorKeysCodes"], outputs: ["init"] }, { kind: "directive", type: VdEditorDirective, selector: "[vd-editor]ng-template" }, { kind: "component", type: VdAuditComponent, selector: "vd-audit", inputs: ["entity"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FaqFormComponent, deps: [{ token: FaqService }, { token: i2.FileService }, { token: i3.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: FaqFormComponent, isStandalone: true, selector: "app-faq-form", usesInheritance: true, ngImport: i0, template: "<vd-layout-nav color=\"primary\" [backNavigationRoute]=\"listRoute\" toolbarTitle=\"FAQ\" i18n-toolbarTitle=\"@@faq\" [editMode]=\"isEditMode\" [actions]=\"toolbarActions\" [data]=\"item\" [context]=\"this\">\r\n    @if (form) {\r\n        <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save()\">\r\n            <vd-layout-card-over class=\"accordion\" cardWidth=\"70\" color=\"primary\" flex>\r\n                <mat-accordion [multi]=\"!isEditMode\">\r\n                    <!-- #region Details -->\r\n                    <mat-expansion-panel expanded=\"true\" id=\"details\">\r\n                        <mat-expansion-panel-header>\r\n                            <mat-panel-title i18n=\"@@details\">Details</mat-panel-title>\r\n                        </mat-expansion-panel-header>\r\n                        <ng-template matExpansionPanelContent>\r\n                            <vd-generic-form [formGroup]=\"form\" [fieldGroups]=\"fieldGroups\" [context]=\"this\">\r\n                                <ng-template vd-editor let-field=\"field\" let-formGroup=\"formGroup\">\r\n                                    <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\" flex>\r\n                                        <mat-label>{{field.label}}</mat-label>\r\n                                        <editor [formControlName]=\"field.name\" [init]=\"editorConfig\" tinyMatFormControl flex></editor>\r\n                                        @if (field.hint) {\r\n                                            <mat-hint>{{field.hint}}</mat-hint>\r\n                                        }\r\n                                        @for (errorMessage of formGroup.controls[field.name]['errorMessages']; track errorMessage) {\r\n                                            <mat-error>{{errorMessage}}</mat-error>\r\n                                        }\r\n                                    </mat-form-field>\r\n                                </ng-template>\r\n                            </vd-generic-form>\r\n                        </ng-template>\r\n                        <mat-action-row>\r\n                            <button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n                            @if (isEditMode || true) {\r\n                                <button type=\"button\" mat-button (click)=\"apply()\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n                            }\r\n                            <button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n                            <span flex></span>\r\n                        </mat-action-row>\r\n                    </mat-expansion-panel>\r\n                    <!-- #endregion -->\r\n                    <!-- #region Audit -->\r\n                    @if (isEditMode) {\r\n                        <mat-expansion-panel id=\"audit\">\r\n                            <mat-expansion-panel-header>\r\n                                <mat-panel-title>\r\n                                    <span i18n=\"@@audit\">Audit</span>\r\n                                </mat-panel-title>\r\n                            </mat-expansion-panel-header>\r\n                            <ng-template matExpansionPanelContent>\r\n                                <vd-audit [entity]=\"item\"> </vd-audit>\r\n                            </ng-template>\r\n                            <mat-action-row>\r\n                                <button type=\"button\" mat-flat-button color=\"accent\" (click)=\"back()\" i18n=\"@@close\">Close</button>\r\n                                <span flex></span>\r\n                            </mat-action-row>\r\n                        </mat-expansion-panel>\r\n                    }\r\n                    <!-- #endregion -->\r\n                </mat-accordion>\r\n            </vd-layout-card-over>\r\n        </form>\r\n    }\r\n</vd-layout-nav>", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { 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: "ngmodule", type: EditorModule }, { kind: "component", type: i5.EditorComponent, selector: "editor", inputs: ["cloudChannel", "apiKey", "licenseKey", "init", "id", "initialValue", "outputFormat", "inline", "tagName", "plugins", "toolbar", "modelEvents", "allowedEvents", "ignoreEvents", "disabled"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i6.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i6.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i6.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatFormFieldEditorDirective, selector: "[tinyMatFormControl]", inputs: ["errorStateMatcher", "disabled", "id", "placeholder", "required", "value"], outputs: ["editorChange"] }, { kind: "component", type: VdLayoutNavComponent, selector: "vd-layout-nav", inputs: ["toolbarTitle", "editMode", "actions", "data", "context", "hideToolbar", "icon", "logo", "color", "hideToggle", "backNavigationRoute", "navigationRoute"], outputs: ["reload"] }, { kind: "component", type: VdLayoutCardOverComponent, selector: "vd-layout-card-over", inputs: ["cardTitle", "cardSubtitle", "cardWidth", "color"] }, { kind: "component", type: VdGenericFormComponent, selector: "vd-generic-form", inputs: ["formGroup", "classType", "formDefinition", "fieldGroups", "groupName", "fieldSets", "context", "debugValue", "readonly", "separatorKeysCodes"], outputs: ["init"] }, { kind: "directive", type: VdEditorDirective, selector: "[vd-editor]ng-template" }, { kind: "component", type: VdAuditComponent, selector: "vd-audit", inputs: ["entity"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FaqFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FaqFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-faq-form', imports: [
+            args: [{ selector: 'app-faq-form', changeDetection: ChangeDetectionStrategy.Eager, imports: [
                         ReactiveFormsModule,
                         RxReactiveFormsModule,
                         EditorModule,
@@ -1313,7 +1262,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         VdEditorDirective,
                         VdAuditComponent
                     ], template: "<vd-layout-nav color=\"primary\" [backNavigationRoute]=\"listRoute\" toolbarTitle=\"FAQ\" i18n-toolbarTitle=\"@@faq\" [editMode]=\"isEditMode\" [actions]=\"toolbarActions\" [data]=\"item\" [context]=\"this\">\r\n    @if (form) {\r\n        <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save()\">\r\n            <vd-layout-card-over class=\"accordion\" cardWidth=\"70\" color=\"primary\" flex>\r\n                <mat-accordion [multi]=\"!isEditMode\">\r\n                    <!-- #region Details -->\r\n                    <mat-expansion-panel expanded=\"true\" id=\"details\">\r\n                        <mat-expansion-panel-header>\r\n                            <mat-panel-title i18n=\"@@details\">Details</mat-panel-title>\r\n                        </mat-expansion-panel-header>\r\n                        <ng-template matExpansionPanelContent>\r\n                            <vd-generic-form [formGroup]=\"form\" [fieldGroups]=\"fieldGroups\" [context]=\"this\">\r\n                                <ng-template vd-editor let-field=\"field\" let-formGroup=\"formGroup\">\r\n                                    <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\" flex>\r\n                                        <mat-label>{{field.label}}</mat-label>\r\n                                        <editor [formControlName]=\"field.name\" [init]=\"editorConfig\" tinyMatFormControl flex></editor>\r\n                                        @if (field.hint) {\r\n                                            <mat-hint>{{field.hint}}</mat-hint>\r\n                                        }\r\n                                        @for (errorMessage of formGroup.controls[field.name]['errorMessages']; track errorMessage) {\r\n                                            <mat-error>{{errorMessage}}</mat-error>\r\n                                        }\r\n                                    </mat-form-field>\r\n                                </ng-template>\r\n                            </vd-generic-form>\r\n                        </ng-template>\r\n                        <mat-action-row>\r\n                            <button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n                            @if (isEditMode || true) {\r\n                                <button type=\"button\" mat-button (click)=\"apply()\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n                            }\r\n                            <button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n                            <span flex></span>\r\n                        </mat-action-row>\r\n                    </mat-expansion-panel>\r\n                    <!-- #endregion -->\r\n                    <!-- #region Audit -->\r\n                    @if (isEditMode) {\r\n                        <mat-expansion-panel id=\"audit\">\r\n                            <mat-expansion-panel-header>\r\n                                <mat-panel-title>\r\n                                    <span i18n=\"@@audit\">Audit</span>\r\n                                </mat-panel-title>\r\n                            </mat-expansion-panel-header>\r\n                            <ng-template matExpansionPanelContent>\r\n                                <vd-audit [entity]=\"item\"> </vd-audit>\r\n                            </ng-template>\r\n                            <mat-action-row>\r\n                                <button type=\"button\" mat-flat-button color=\"accent\" (click)=\"back()\" i18n=\"@@close\">Close</button>\r\n                                <span flex></span>\r\n                            </mat-action-row>\r\n                        </mat-expansion-panel>\r\n                    }\r\n                    <!-- #endregion -->\r\n                </mat-accordion>\r\n            </vd-layout-card-over>\r\n        </form>\r\n    }\r\n</vd-layout-nav>" }]
-        }], ctorParameters: () => [{ type: FaqService }, { type: i2.FileService }, { type: i3.HttpClient }, { type: i3$1.ActivatedRoute }, { type: i0.ChangeDetectorRef }] });
+        }], ctorParameters: () => [{ type: FaqService }, { type: i2.FileService }, { type: i3.HttpClient }] });
 
 var TemplateType;
 (function (TemplateType) {
@@ -1357,12 +1306,10 @@ class TemplateClient {
     }
 }
 __decorate([
-    prop(),
-    __metadata("design:type", Number)
+    prop()
 ], TemplateClient.prototype, "templateId", void 0);
 __decorate([
-    required(),
-    __metadata("design:type", Number)
+    required()
 ], TemplateClient.prototype, "clientId", void 0);
 
 /**
@@ -1394,12 +1341,10 @@ class TemplateDepartment {
     }
 }
 __decorate([
-    prop(),
-    __metadata("design:type", Number)
+    prop()
 ], TemplateDepartment.prototype, "templateId", void 0);
 __decorate([
-    required(),
-    __metadata("design:type", Number)
+    required()
 ], TemplateDepartment.prototype, "departmentId", void 0);
 
 let Template = class Template extends AuditEntity {
@@ -1507,8 +1452,7 @@ __decorate([
         enumType: TemplateEngine,
         fieldSets: ['details']
     }),
-    Display($localize `:@@engine:Engine`),
-    __metadata("design:type", Number)
+    Display($localize `:@@engine:Engine`)
 ], Template.prototype, "engine", void 0);
 __decorate([
     required(),
@@ -1517,8 +1461,7 @@ __decorate([
         enumType: TemplateType,
         fieldSets: ['details']
     }),
-    Display($localize `:@@type:Type`),
-    __metadata("design:type", Number)
+    Display($localize `:@@type:Type`)
 ], Template.prototype, "type", void 0);
 __decorate([
     required(),
@@ -1527,8 +1470,7 @@ __decorate([
         row: 10,
         fieldSets: ['details']
     }),
-    Display($localize `:@@name:Name`),
-    __metadata("design:type", String)
+    Display($localize `:@@name:Name`)
 ], Template.prototype, "name", void 0);
 __decorate([
     prop(),
@@ -1540,8 +1482,7 @@ __decorate([
         fieldSets: ['details'],
         change: (_, __, ___, ctx) => ctx?.loadDraft()
     }),
-    Display($localize `:@@draft:Draft`),
-    __metadata("design:type", String)
+    Display($localize `:@@draft:Draft`)
 ], Template.prototype, "draft", void 0);
 __decorate([
     prop(),
@@ -1550,8 +1491,7 @@ __decorate([
         row: 30,
         fieldSets: ['details']
     }),
-    Display($localize `:@@subject:Subject`),
-    __metadata("design:type", String)
+    Display($localize `:@@subject:Subject`)
 ], Template.prototype, "subject", void 0);
 __decorate([
     required(),
@@ -1560,8 +1500,7 @@ __decorate([
         row: 10,
         fieldSets: ['details']
     }),
-    Display('Key'),
-    __metadata("design:type", String)
+    Display('Key')
 ], Template.prototype, "key", void 0);
 __decorate([
     prop(),
@@ -1570,21 +1509,17 @@ __decorate([
         type: FormFieldType.TextArea,
         fieldSets: ['details']
     }),
-    Display($localize `:@@notice:Notice`),
-    __metadata("design:type", String)
+    Display($localize `:@@notice:Notice`)
 ], Template.prototype, "notice", void 0);
 __decorate([
     prop(),
-    Display($localize `:@@email:Email`),
-    __metadata("design:type", String)
+    Display($localize `:@@email:Email`)
 ], Template.prototype, "email", void 0);
 __decorate([
-    required(),
-    __metadata("design:type", String)
+    required()
 ], Template.prototype, "content", void 0);
 __decorate([
-    prop(),
-    __metadata("design:type", String)
+    prop()
 ], Template.prototype, "dummyData", void 0);
 __decorate([
     required({ conditionalExpression: (x) => true }),
@@ -1614,8 +1549,7 @@ __decorate([
         optionTemplate: (x) => x?.clientName,
         triggerMapper: (x) => x?.clientName
     }),
-    Display($localize `:@@projects:Projects`),
-    __metadata("design:type", Array)
+    Display($localize `:@@projects:Projects`)
 ], Template.prototype, "clientJoins", void 0);
 __decorate([
     prop(),
@@ -1646,8 +1580,7 @@ __decorate([
         optionTemplate: (x) => x?.departmentName,
         triggerMapper: (x) => x?.departmentName
     }),
-    Display($localize `:@@departments:Departments`),
-    __metadata("design:type", Array)
+    Display($localize `:@@departments:Departments`)
 ], Template.prototype, "departmentJoins", void 0);
 __decorate([
     prop(),
@@ -1661,8 +1594,7 @@ __decorate([
         fieldSets: ['details'],
         readonly: _ => true
     }),
-    Display($localize `:@@reviewed:Reviewed`),
-    __metadata("design:type", Boolean)
+    Display($localize `:@@reviewed:Reviewed`)
 ], Template.prototype, "reviewed", void 0);
 __decorate([
     prop(),
@@ -1671,12 +1603,10 @@ __decorate([
         row: 100,
         fieldSets: ['details']
     }),
-    Display($localize `:@@enabled:Enabled`),
-    __metadata("design:type", Boolean)
+    Display($localize `:@@enabled:Enabled`)
 ], Template.prototype, "enabled", void 0);
 __decorate([
-    prop(),
-    __metadata("design:type", Array)
+    prop()
 ], Template.prototype, "attachments", void 0);
 Template = __decorate([
     Table({
@@ -1732,36 +1662,6 @@ class TemplatePreview {
     }
 }
 
-class TemplateService extends GenericService {
-    /**
-     * Constructor
-     */
-    constructor() {
-        super('template');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TemplateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TemplateService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TemplateService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
-
-class TemplateDocService extends GenericService {
-    /**
-     * Constructor
-     */
-    constructor() {
-        super('templateDoc');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TemplateDocService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TemplateDocService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TemplateDocService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
-
 class TemplatePreviewService extends GenericService {
     /**
      * Constructor
@@ -1769,10 +1669,10 @@ class TemplatePreviewService extends GenericService {
     constructor() {
         super('templatePreview');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TemplatePreviewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TemplatePreviewService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TemplatePreviewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TemplatePreviewService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TemplatePreviewService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TemplatePreviewService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -1781,8 +1681,6 @@ class TemplatePreviewDialogComponent extends BaseComponent {
     service;
     dialogRef;
     data;
-    route;
-    changeDetectorRef;
     /**
      * TemplateType
      */
@@ -1822,13 +1720,11 @@ class TemplatePreviewDialogComponent extends BaseComponent {
      * @param dialogRef
      * @param data
      */
-    constructor(service, dialogRef, data, route, changeDetectorRef) {
-        super(route, changeDetectorRef);
+    constructor(service, dialogRef, data) {
+        super();
         this.service = service;
         this.dialogRef = dialogRef;
         this.data = data;
-        this.route = route;
-        this.changeDetectorRef = changeDetectorRef;
         this.data.email = localStorage.getItem('templatePreviewEmail') ?? '';
     }
     /**
@@ -1936,12 +1832,12 @@ class TemplatePreviewDialogComponent extends BaseComponent {
             this.dialogRef.removePanelClass('full-screen');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", 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 });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TemplatePreviewDialogComponent, isStandalone: true, selector: "app-template-preview", viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["iframeRef"], descendants: true }, { propertyName: "emailModel", first: true, predicate: ["email"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div mat-dialog-title>\r\n  <span i18n=\"@@templatePreview\">Template preview</span>\r\n  <span flex></span>\r\n  @if (data.type == TemplateType.Pdf && pdfSrc ||true) {\r\n    <div>\r\n      <a mat-icon-button (click)=\"download()\">\r\n        <mat-icon fontSet=\"material-symbols-outlined\">download</mat-icon>\r\n      </a>\r\n      <a mat-icon-button (click)=\"zoomIn()\">\r\n        <mat-icon fontSet=\"material-symbols-outlined\">zoom_in</mat-icon>\r\n      </a>\r\n      <a mat-icon-button (click)=\"zoomOut()\">\r\n        <mat-icon fontSet=\"material-symbols-outlined\">zoom_out</mat-icon>\r\n      </a>\r\n      <a mat-icon-button (click)=\"toggleMaximize()\" class=\"maximize-button\">\r\n        <mat-icon>{{ isMaximized ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>\r\n      </a>\r\n    </div>\r\n  }\r\n</div>\r\n<form #form=\"ngForm\" novalidate layout=\"column\" flex>\r\n  <!-- #region Entity -->\r\n  @if (data.endpoint) {\r\n    <div layout=\"row\" flex>\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        @if (entityId.errors!['required']) {\r\n          <mat-error><span>{{data.entityName}}</span><span i18n=\"@@isRequired\"> is required</span></mat-error>\r\n        }\r\n      </mat-form-field>\r\n    </div>\r\n  }\r\n  <!-- #endregion -->\r\n\r\n  @if (isLoading) {\r\n    <div layout=\"column\" layout-gt-sm=\"row\" class=\"push-bottom\" flex>\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\r\n  <!-- #region PDF Content -->\r\n  @if (data.type == TemplateType.Pdf) {\r\n    <mat-card flex>\r\n      @if (data.type == TemplateType.Pdf && pdfSrc) {\r\n        <pdf-viewer [src]=\"pdfSrc\" [render-text]=\"true\" [zoom]=\"zoom\" [zoom-scale]=\"zoomScale\" [show-borders]=\"true\" [original-size]=\"false\" [autoresize]=\"true\"></pdf-viewer>\r\n      }\r\n    </mat-card>\r\n  }\r\n  <!-- #region Content -->\r\n\r\n  @if (data.type != TemplateType.Pdf) {\r\n    <div layout=\"column\" class=\"pad-top-none\" layout-padding margin-layout flex>\r\n      <!-- #region Content -->\r\n      <div class=\"pad-top-none\" layout-padding margin-layout flex>\r\n        <iframe #iframeRef frameborder=\"0\"></iframe>\r\n      </div>\r\n      <!-- #endregion -->\r\n      <!-- #region Email-->\r\n      <div layout-gt-sm=\"row\" layout=\"column\" class=\"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\" email placeholder=\"Email\" i18n-placeholder=\"@@email\">\r\n          @if (email.errors && email.errors!['required']) {\r\n            <mat-error><span i18n=\"@@email\">Email</span><span i18n=\"@@isRequired\"> is required</span></mat-error>\r\n          }\r\n          @if (!email.errors!['required'] && email.errors!['email']) {\r\n            <mat-error><span i18n=\"@@email\">Email</span><span i18n=\"@@isInvalid\"> is invalid</span></mat-error>\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n      <!-- #endregion -->\r\n    </div>\r\n  }\r\n  <mat-divider></mat-divider>\r\n  <div mat-dialog-actions class=\"pad-left\">\r\n    <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"cancel()\" [autofocus]=\"true\" i18n=\"@@close\">Close</button>\r\n    <button type=\"button\" mat-flat-button (click)=\"sendMail()\" [disabled]=\"data.email == undefined || !emailModel?.valid\" i18n=\"@@sendMail\">Send mail</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}iframe{width:100%;height:100%;min-height:200px;border:1px solid #e5e5e5;border-radius:4px}pdf-viewer{display:block;margin-left:-16px;width:calc(100% + 32px);height:calc(100vh - 170px);background:#dbdbdb}.mat-mdc-dialog-title{display:flex;padding:8px 12px;align-items:center}.dialog-content{width:100%;height:100%;box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i5$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: VdChipsComponent, selector: "vd-chips", inputs: ["classType", "chips", "endpoint", "params", "projection", "paginated", "customValue", "context", "key", "searchField", "searchFields", "filters", "removable", "selectFirst", "debounce", "autocompleteCssClass", "suffixButtons"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PdfViewerModule }, { kind: "component", type: i7$1.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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TemplatePreviewDialogComponent, deps: [{ token: TemplatePreviewService }, { token: i3$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TemplatePreviewDialogComponent, isStandalone: true, selector: "app-template-preview", viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["iframeRef"], descendants: true }, { propertyName: "emailModel", first: true, predicate: ["email"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div mat-dialog-title>\r\n  <span i18n=\"@@templatePreview\">Template preview</span>\r\n  <span flex></span>\r\n  @if (data.type == TemplateType.Pdf && pdfSrc ||true) {\r\n    <div>\r\n      <a mat-icon-button (click)=\"download()\">\r\n        <mat-icon fontSet=\"material-symbols-outlined\">download</mat-icon>\r\n      </a>\r\n      <a mat-icon-button (click)=\"zoomIn()\">\r\n        <mat-icon fontSet=\"material-symbols-outlined\">zoom_in</mat-icon>\r\n      </a>\r\n      <a mat-icon-button (click)=\"zoomOut()\">\r\n        <mat-icon fontSet=\"material-symbols-outlined\">zoom_out</mat-icon>\r\n      </a>\r\n      <a mat-icon-button (click)=\"toggleMaximize()\" class=\"maximize-button\">\r\n        <mat-icon>{{ isMaximized ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>\r\n      </a>\r\n    </div>\r\n  }\r\n</div>\r\n<form #form=\"ngForm\" novalidate layout=\"column\" flex>\r\n  <!-- #region Entity -->\r\n  @if (data.endpoint) {\r\n    <div layout=\"row\" flex>\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        @if (entityId.errors!['required']) {\r\n          <mat-error><span>{{data.entityName}}</span><span i18n=\"@@isRequired\"> is required</span></mat-error>\r\n        }\r\n      </mat-form-field>\r\n    </div>\r\n  }\r\n  <!-- #endregion -->\r\n\r\n  @if (isLoading) {\r\n    <div layout=\"column\" layout-gt-sm=\"row\" class=\"push-bottom\" flex>\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\r\n  <!-- #region PDF Content -->\r\n  @if (data.type == TemplateType.Pdf) {\r\n    <mat-card flex>\r\n      @if (data.type == TemplateType.Pdf && pdfSrc) {\r\n        <pdf-viewer [src]=\"pdfSrc\" [render-text]=\"true\" [zoom]=\"zoom\" [zoom-scale]=\"zoomScale\" [show-borders]=\"true\" [original-size]=\"false\" [autoresize]=\"true\"></pdf-viewer>\r\n      }\r\n    </mat-card>\r\n  }\r\n  <!-- #region Content -->\r\n\r\n  @if (data.type != TemplateType.Pdf) {\r\n    <div layout=\"column\" class=\"pad-top-none\" layout-padding margin-layout flex>\r\n      <!-- #region Content -->\r\n      <div class=\"pad-top-none\" layout-padding margin-layout flex>\r\n        <iframe #iframeRef frameborder=\"0\"></iframe>\r\n      </div>\r\n      <!-- #endregion -->\r\n      <!-- #region Email-->\r\n      <div layout-gt-sm=\"row\" layout=\"column\" class=\"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\" email placeholder=\"Email\" i18n-placeholder=\"@@email\">\r\n          @if (email.errors && email.errors!['required']) {\r\n            <mat-error><span i18n=\"@@email\">Email</span><span i18n=\"@@isRequired\"> is required</span></mat-error>\r\n          }\r\n          @if (!email.errors!['required'] && email.errors!['email']) {\r\n            <mat-error><span i18n=\"@@email\">Email</span><span i18n=\"@@isInvalid\"> is invalid</span></mat-error>\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n      <!-- #endregion -->\r\n    </div>\r\n  }\r\n  <mat-divider></mat-divider>\r\n  <div mat-dialog-actions class=\"pad-left\">\r\n    <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"cancel()\" [autofocus]=\"true\" i18n=\"@@close\">Close</button>\r\n    <button type=\"button\" mat-flat-button (click)=\"sendMail()\" [disabled]=\"data.email == undefined || !emailModel?.valid\" i18n=\"@@sendMail\">Send mail</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}iframe{width:100%;height:100%;min-height:200px;border:1px solid #e5e5e5;border-radius:4px}pdf-viewer{display:block;margin-left:-16px;width:calc(100% + 32px);height:calc(100vh - 170px);background:#dbdbdb}.mat-mdc-dialog-title{display:flex;padding:8px 12px;align-items:center}.dialog-content{width:100%;height:100%;box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i4$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: VdChipsComponent, selector: "vd-chips", inputs: ["classType", "chips", "endpoint", "params", "projection", "paginated", "customValue", "context", "key", "searchField", "searchFields", "filters", "removable", "selectFirst", "debounce", "autocompleteCssClass", "suffixButtons"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PdfViewerModule }, { kind: "component", type: i6$1.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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TemplatePreviewDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TemplatePreviewDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-template-preview', imports: [
+            args: [{ selector: 'app-template-preview', changeDetection: ChangeDetectionStrategy.Eager, imports: [
                         MatIcon,
                         MatFormFieldModule,
                         MatProgressBarModule,
@@ -1951,10 +1847,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         FormsModule,
                         PdfViewerModule
                     ], template: "<div mat-dialog-title>\r\n  <span i18n=\"@@templatePreview\">Template preview</span>\r\n  <span flex></span>\r\n  @if (data.type == TemplateType.Pdf && pdfSrc ||true) {\r\n    <div>\r\n      <a mat-icon-button (click)=\"download()\">\r\n        <mat-icon fontSet=\"material-symbols-outlined\">download</mat-icon>\r\n      </a>\r\n      <a mat-icon-button (click)=\"zoomIn()\">\r\n        <mat-icon fontSet=\"material-symbols-outlined\">zoom_in</mat-icon>\r\n      </a>\r\n      <a mat-icon-button (click)=\"zoomOut()\">\r\n        <mat-icon fontSet=\"material-symbols-outlined\">zoom_out</mat-icon>\r\n      </a>\r\n      <a mat-icon-button (click)=\"toggleMaximize()\" class=\"maximize-button\">\r\n        <mat-icon>{{ isMaximized ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>\r\n      </a>\r\n    </div>\r\n  }\r\n</div>\r\n<form #form=\"ngForm\" novalidate layout=\"column\" flex>\r\n  <!-- #region Entity -->\r\n  @if (data.endpoint) {\r\n    <div layout=\"row\" flex>\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        @if (entityId.errors!['required']) {\r\n          <mat-error><span>{{data.entityName}}</span><span i18n=\"@@isRequired\"> is required</span></mat-error>\r\n        }\r\n      </mat-form-field>\r\n    </div>\r\n  }\r\n  <!-- #endregion -->\r\n\r\n  @if (isLoading) {\r\n    <div layout=\"column\" layout-gt-sm=\"row\" class=\"push-bottom\" flex>\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\r\n  <!-- #region PDF Content -->\r\n  @if (data.type == TemplateType.Pdf) {\r\n    <mat-card flex>\r\n      @if (data.type == TemplateType.Pdf && pdfSrc) {\r\n        <pdf-viewer [src]=\"pdfSrc\" [render-text]=\"true\" [zoom]=\"zoom\" [zoom-scale]=\"zoomScale\" [show-borders]=\"true\" [original-size]=\"false\" [autoresize]=\"true\"></pdf-viewer>\r\n      }\r\n    </mat-card>\r\n  }\r\n  <!-- #region Content -->\r\n\r\n  @if (data.type != TemplateType.Pdf) {\r\n    <div layout=\"column\" class=\"pad-top-none\" layout-padding margin-layout flex>\r\n      <!-- #region Content -->\r\n      <div class=\"pad-top-none\" layout-padding margin-layout flex>\r\n        <iframe #iframeRef frameborder=\"0\"></iframe>\r\n      </div>\r\n      <!-- #endregion -->\r\n      <!-- #region Email-->\r\n      <div layout-gt-sm=\"row\" layout=\"column\" class=\"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\" email placeholder=\"Email\" i18n-placeholder=\"@@email\">\r\n          @if (email.errors && email.errors!['required']) {\r\n            <mat-error><span i18n=\"@@email\">Email</span><span i18n=\"@@isRequired\"> is required</span></mat-error>\r\n          }\r\n          @if (!email.errors!['required'] && email.errors!['email']) {\r\n            <mat-error><span i18n=\"@@email\">Email</span><span i18n=\"@@isInvalid\"> is invalid</span></mat-error>\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n      <!-- #endregion -->\r\n    </div>\r\n  }\r\n  <mat-divider></mat-divider>\r\n  <div mat-dialog-actions class=\"pad-left\">\r\n    <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"cancel()\" [autofocus]=\"true\" i18n=\"@@close\">Close</button>\r\n    <button type=\"button\" mat-flat-button (click)=\"sendMail()\" [disabled]=\"data.email == undefined || !emailModel?.valid\" i18n=\"@@sendMail\">Send mail</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}iframe{width:100%;height:100%;min-height:200px;border:1px solid #e5e5e5;border-radius:4px}pdf-viewer{display:block;margin-left:-16px;width:calc(100% + 32px);height:calc(100vh - 170px);background:#dbdbdb}.mat-mdc-dialog-title{display:flex;padding:8px 12px;align-items:center}.dialog-content{width:100%;height:100%;box-sizing:border-box}\n"] }]
-        }], ctorParameters: () => [{ type: TemplatePreviewService }, { type: i4.MatDialogRef }, { type: TemplatePreview, decorators: [{
+        }], ctorParameters: () => [{ type: TemplatePreviewService }, { type: i3$1.MatDialogRef }, { type: TemplatePreview, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: i3$1.ActivatedRoute }, { type: i0.ChangeDetectorRef }], propDecorators: { iframeRef: [{
+                }] }], propDecorators: { iframeRef: [{
                 type: ViewChild,
                 args: ['iframeRef', { static: false }]
             }], emailModel: [{
@@ -1962,13 +1858,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 args: ['email']
             }] } });
 
+class TemplateService extends GenericService {
+    /**
+     * Constructor
+     */
+    constructor() {
+        super('template');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TemplateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TemplateService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TemplateService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class TemplateDocService extends GenericService {
+    /**
+     * Constructor
+     */
+    constructor() {
+        super('templateDoc');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TemplateDocService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TemplateDocService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TemplateDocService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 class TemplateFormComponent extends GenericReactiveFormComponent {
     service;
     templateDocService;
     fileService;
     dialog;
-    route;
-    changeDetectorRef;
     /**
      * Injects the CmsSettings service using Angular's `inject()` function.
      * This allows access to the CmsSettings instance outside of constructor-based dependency injection,
@@ -2015,14 +1939,12 @@ class TemplateFormComponent extends GenericReactiveFormComponent {
     /**
      * Initializes an instance of TemplateFormComponent.
      */
-    constructor(service, templateDocService, fileService, dialog, route, changeDetectorRef) {
-        super(Template, service, route, changeDetectorRef);
+    constructor(service, templateDocService, fileService, dialog) {
+        super(Template, service);
         this.service = service;
         this.templateDocService = templateDocService;
         this.fileService = fileService;
         this.dialog = dialog;
-        this.route = route;
-        this.changeDetectorRef = changeDetectorRef;
         if (this.settings?.multitenantable || this.settings?.multiClients) {
             this.include('ClientJoins', true);
         }
@@ -2111,12 +2033,12 @@ class TemplateFormComponent extends GenericReactiveFormComponent {
             this.form.markAllAsTouched();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TemplateFormComponent, deps: [{ token: TemplateService }, { token: TemplateDocService }, { token: i2.FileService }, { token: i4.MatDialog }, { token: i3$1.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TemplateFormComponent, isStandalone: true, 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    @if (form) {\r\n        <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save()\">\r\n            <vd-layout-card-over class=\"accordion\" cardWidth=\"70\" color=\"primary\" flex>\r\n                <mat-accordion [multi]=\"!isEditMode\">\r\n                    <!-- #region Details -->\r\n                    <mat-expansion-panel expanded=\"true\" id=\"details\">\r\n                        <mat-expansion-panel-header>\r\n                            <mat-panel-title i18n=\"@@details\">Details</mat-panel-title>\r\n                        </mat-expansion-panel-header>\r\n                        <ng-template matExpansionPanelContent>\r\n                            <vd-generic-form [formGroup]=\"form\" [fieldGroups]=\"fieldGroups\" [fieldSets]=\"['details']\" [context]=\"this\"></vd-generic-form>\r\n                        </ng-template>\r\n                        <mat-action-row>\r\n                            <button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n                            @if (isEditMode) {\r\n                                <button type=\"button\" mat-button (click)=\"apply()\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n                            }\r\n                            <button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n                            <span flex></span>\r\n                        </mat-action-row>\r\n                    </mat-expansion-panel>\r\n                    <!-- #endregion -->\r\n                    <!-- #region Content -->\r\n                    <mat-expansion-panel id=\"content\">\r\n                        <mat-expansion-panel-header>\r\n                            <mat-panel-title>\r\n                                <span i18n=\"@@content\">Content</span>\r\n                            </mat-panel-title>\r\n                        </mat-expansion-panel-header>\r\n                        <ng-template matExpansionPanelContent>\r\n                            <div layout-margin>\r\n                                <ngx-codemirror formControlName=\"content\" rows=\"160\" [options]=\"editorOptions\"></ngx-codemirror>\r\n                            </div>\r\n                        </ng-template>\r\n                        <mat-action-row>\r\n                            <button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n                            @if (isEditMode) {\r\n                                <button type=\"button\" mat-button (click)=\"apply()\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n                            }\r\n                            @if (isEditMode) {\r\n                                <button type=\"button\" mat-button (click)=\"showPreview()\" [disabled]=\"isSaving || !form.pristine\" i18n=\"@@preview\">Preview</button>\r\n                            }\r\n                            <button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n                            <span flex></span>\r\n                        </mat-action-row>\r\n                    </mat-expansion-panel>\r\n                    <!-- #endregion -->\r\n                    <!-- #region Content -->\r\n                    <mat-expansion-panel id=\"testData\">\r\n                        <mat-expansion-panel-header>\r\n                            <mat-panel-title>\r\n                                <span i18n=\"@@testData\">Test Data</span>\r\n                            </mat-panel-title>\r\n                        </mat-expansion-panel-header>\r\n                        <ng-template matExpansionPanelContent>\r\n                            <div layout-margin>\r\n                                <ngx-codemirror formControlName=\"dummyData\" rows=\"120\" [options]=\"jsonEditorOptions\"></ngx-codemirror>\r\n                            </div>\r\n                        </ng-template>\r\n                        <mat-action-row>\r\n                            <button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n                            @if (isEditMode) {\r\n                                <button type=\"button\" mat-button (click)=\"apply()\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n                            }\r\n                            @if (isEditMode) {\r\n                                <button type=\"button\" mat-button (click)=\"showPreview()\" [disabled]=\"isSaving || !form.pristine\" i18n=\"@@preview\">Preview</button>\r\n                            }\r\n                            <button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n                            <span flex></span>\r\n                        </mat-action-row>\r\n                    </mat-expansion-panel>\r\n                    <!-- #endregion -->\r\n                    <!-- #region Audit -->\r\n                    @if (isEditMode) {\r\n                        <mat-expansion-panel id=\"audit\">\r\n                            <mat-expansion-panel-header>\r\n                                <mat-panel-title>\r\n                                    <span i18n=\"@@audit\">Audit</span>\r\n                                </mat-panel-title>\r\n                            </mat-expansion-panel-header>\r\n                            <ng-template matExpansionPanelContent>\r\n                                <vd-audit [entity]=\"item\"> </vd-audit>\r\n                            </ng-template>\r\n                            <mat-action-row>\r\n                                <button type=\"button\" mat-flat-button color=\"accent\" (click)=\"back()\" i18n=\"@@close\">Close</button>\r\n                                <span flex></span>\r\n                            </mat-action-row>\r\n                        </mat-expansion-panel>\r\n                    }\r\n                    <!-- #endregion -->\r\n                </mat-accordion>\r\n            </vd-layout-card-over>\r\n        </form>\r\n    }\r\n</vd-layout-nav>", styles: ["codemirror{width:100%}.CodeMirror{height:500px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { 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: "ngmodule", type: CodemirrorModule }, { kind: "component", type: i7$2.CodemirrorComponent, selector: "ngx-codemirror", inputs: ["className", "name", "autoFocus", "options", "preserveScrollPosition"], outputs: ["cursorActivity", "focusChange", "scroll", "drop", "codeMirrorLoaded"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i7.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i7.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i7.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i7.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i7.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i7.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i9.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: VdLayoutNavComponent, selector: "vd-layout-nav", inputs: ["toolbarTitle", "editMode", "actions", "data", "context", "hideToolbar", "icon", "logo", "color", "hideToggle", "backNavigationRoute", "navigationRoute"], outputs: ["reload"] }, { kind: "component", type: VdLayoutCardOverComponent, selector: "vd-layout-card-over", inputs: ["cardTitle", "cardSubtitle", "cardWidth", "color"] }, { kind: "component", type: VdGenericFormComponent, selector: "vd-generic-form", inputs: ["formGroup", "classType", "formDefinition", "fieldGroups", "groupName", "fieldSets", "context", "debugValue", "readonly", "separatorKeysCodes"], outputs: ["init"] }, { kind: "component", type: VdAuditComponent, selector: "vd-audit", inputs: ["entity"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TemplateFormComponent, deps: [{ token: TemplateService }, { token: TemplateDocService }, { token: i2.FileService }, { token: i3$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TemplateFormComponent, isStandalone: true, 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    @if (form) {\r\n        <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save()\">\r\n            <vd-layout-card-over class=\"accordion\" cardWidth=\"70\" color=\"primary\" flex>\r\n                <mat-accordion [multi]=\"!isEditMode\">\r\n                    <!-- #region Details -->\r\n                    <mat-expansion-panel expanded=\"true\" id=\"details\">\r\n                        <mat-expansion-panel-header>\r\n                            <mat-panel-title i18n=\"@@details\">Details</mat-panel-title>\r\n                        </mat-expansion-panel-header>\r\n                        <ng-template matExpansionPanelContent>\r\n                            <vd-generic-form [formGroup]=\"form\" [fieldGroups]=\"fieldGroups\" [fieldSets]=\"['details']\" [context]=\"this\"></vd-generic-form>\r\n                        </ng-template>\r\n                        <mat-action-row>\r\n                            <button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n                            @if (isEditMode) {\r\n                                <button type=\"button\" mat-button (click)=\"apply()\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n                            }\r\n                            <button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n                            <span flex></span>\r\n                        </mat-action-row>\r\n                    </mat-expansion-panel>\r\n                    <!-- #endregion -->\r\n                    <!-- #region Content -->\r\n                    <mat-expansion-panel id=\"content\">\r\n                        <mat-expansion-panel-header>\r\n                            <mat-panel-title>\r\n                                <span i18n=\"@@content\">Content</span>\r\n                            </mat-panel-title>\r\n                        </mat-expansion-panel-header>\r\n                        <ng-template matExpansionPanelContent>\r\n                            <div layout-margin>\r\n                                <ngx-codemirror formControlName=\"content\" rows=\"160\" [options]=\"editorOptions\"></ngx-codemirror>\r\n                            </div>\r\n                        </ng-template>\r\n                        <mat-action-row>\r\n                            <button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n                            @if (isEditMode) {\r\n                                <button type=\"button\" mat-button (click)=\"apply()\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n                            }\r\n                            @if (isEditMode) {\r\n                                <button type=\"button\" mat-button (click)=\"showPreview()\" [disabled]=\"isSaving || !form.pristine\" i18n=\"@@preview\">Preview</button>\r\n                            }\r\n                            <button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n                            <span flex></span>\r\n                        </mat-action-row>\r\n                    </mat-expansion-panel>\r\n                    <!-- #endregion -->\r\n                    <!-- #region Content -->\r\n                    <mat-expansion-panel id=\"testData\">\r\n                        <mat-expansion-panel-header>\r\n                            <mat-panel-title>\r\n                                <span i18n=\"@@testData\">Test Data</span>\r\n                            </mat-panel-title>\r\n                        </mat-expansion-panel-header>\r\n                        <ng-template matExpansionPanelContent>\r\n                            <div layout-margin>\r\n                                <ngx-codemirror formControlName=\"dummyData\" rows=\"120\" [options]=\"jsonEditorOptions\"></ngx-codemirror>\r\n                            </div>\r\n                        </ng-template>\r\n                        <mat-action-row>\r\n                            <button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n                            @if (isEditMode) {\r\n                                <button type=\"button\" mat-button (click)=\"apply()\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n                            }\r\n                            @if (isEditMode) {\r\n                                <button type=\"button\" mat-button (click)=\"showPreview()\" [disabled]=\"isSaving || !form.pristine\" i18n=\"@@preview\">Preview</button>\r\n                            }\r\n                            <button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n                            <span flex></span>\r\n                        </mat-action-row>\r\n                    </mat-expansion-panel>\r\n                    <!-- #endregion -->\r\n                    <!-- #region Audit -->\r\n                    @if (isEditMode) {\r\n                        <mat-expansion-panel id=\"audit\">\r\n                            <mat-expansion-panel-header>\r\n                                <mat-panel-title>\r\n                                    <span i18n=\"@@audit\">Audit</span>\r\n                                </mat-panel-title>\r\n                            </mat-expansion-panel-header>\r\n                            <ng-template matExpansionPanelContent>\r\n                                <vd-audit [entity]=\"item\"> </vd-audit>\r\n                            </ng-template>\r\n                            <mat-action-row>\r\n                                <button type=\"button\" mat-flat-button color=\"accent\" (click)=\"back()\" i18n=\"@@close\">Close</button>\r\n                                <span flex></span>\r\n                            </mat-action-row>\r\n                        </mat-expansion-panel>\r\n                    }\r\n                    <!-- #endregion -->\r\n                </mat-accordion>\r\n            </vd-layout-card-over>\r\n        </form>\r\n    }\r\n</vd-layout-nav>", styles: ["codemirror{width:100%}.CodeMirror{height:500px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { 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: "ngmodule", type: CodemirrorModule }, { kind: "component", type: i6$2.CodemirrorComponent, selector: "ngx-codemirror", inputs: ["className", "name", "autoFocus", "options", "preserveScrollPosition"], outputs: ["cursorActivity", "focusChange", "scroll", "drop", "codeMirrorLoaded"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i6.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i6.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i6.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: VdLayoutNavComponent, selector: "vd-layout-nav", inputs: ["toolbarTitle", "editMode", "actions", "data", "context", "hideToolbar", "icon", "logo", "color", "hideToggle", "backNavigationRoute", "navigationRoute"], outputs: ["reload"] }, { kind: "component", type: VdLayoutCardOverComponent, selector: "vd-layout-card-over", inputs: ["cardTitle", "cardSubtitle", "cardWidth", "color"] }, { kind: "component", type: VdGenericFormComponent, selector: "vd-generic-form", inputs: ["formGroup", "classType", "formDefinition", "fieldGroups", "groupName", "fieldSets", "context", "debugValue", "readonly", "separatorKeysCodes"], outputs: ["init"] }, { kind: "component", type: VdAuditComponent, selector: "vd-audit", inputs: ["entity"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TemplateFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TemplateFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-template-form', encapsulation: ViewEncapsulation.None, imports: [
+            args: [{ selector: 'app-template-form', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, imports: [
                         ReactiveFormsModule,
                         RxReactiveFormsModule,
                         CodemirrorModule,
@@ -2127,7 +2049,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         VdGenericFormComponent,
                         VdAuditComponent
                     ], template: "<vd-layout-nav color=\"primary\" [backNavigationRoute]=\"listRoute\" toolbarTitle=\"Template\" i18n-toolbarTitle=\"@@template\" [editMode]=\"isEditMode\" [actions]=\"toolbarActions\" [data]=\"item\" [context]=\"this\">\r\n    @if (form) {\r\n        <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save()\">\r\n            <vd-layout-card-over class=\"accordion\" cardWidth=\"70\" color=\"primary\" flex>\r\n                <mat-accordion [multi]=\"!isEditMode\">\r\n                    <!-- #region Details -->\r\n                    <mat-expansion-panel expanded=\"true\" id=\"details\">\r\n                        <mat-expansion-panel-header>\r\n                            <mat-panel-title i18n=\"@@details\">Details</mat-panel-title>\r\n                        </mat-expansion-panel-header>\r\n                        <ng-template matExpansionPanelContent>\r\n                            <vd-generic-form [formGroup]=\"form\" [fieldGroups]=\"fieldGroups\" [fieldSets]=\"['details']\" [context]=\"this\"></vd-generic-form>\r\n                        </ng-template>\r\n                        <mat-action-row>\r\n                            <button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n                            @if (isEditMode) {\r\n                                <button type=\"button\" mat-button (click)=\"apply()\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n                            }\r\n                            <button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n                            <span flex></span>\r\n                        </mat-action-row>\r\n                    </mat-expansion-panel>\r\n                    <!-- #endregion -->\r\n                    <!-- #region Content -->\r\n                    <mat-expansion-panel id=\"content\">\r\n                        <mat-expansion-panel-header>\r\n                            <mat-panel-title>\r\n                                <span i18n=\"@@content\">Content</span>\r\n                            </mat-panel-title>\r\n                        </mat-expansion-panel-header>\r\n                        <ng-template matExpansionPanelContent>\r\n                            <div layout-margin>\r\n                                <ngx-codemirror formControlName=\"content\" rows=\"160\" [options]=\"editorOptions\"></ngx-codemirror>\r\n                            </div>\r\n                        </ng-template>\r\n                        <mat-action-row>\r\n                            <button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n                            @if (isEditMode) {\r\n                                <button type=\"button\" mat-button (click)=\"apply()\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n                            }\r\n                            @if (isEditMode) {\r\n                                <button type=\"button\" mat-button (click)=\"showPreview()\" [disabled]=\"isSaving || !form.pristine\" i18n=\"@@preview\">Preview</button>\r\n                            }\r\n                            <button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n                            <span flex></span>\r\n                        </mat-action-row>\r\n                    </mat-expansion-panel>\r\n                    <!-- #endregion -->\r\n                    <!-- #region Content -->\r\n                    <mat-expansion-panel id=\"testData\">\r\n                        <mat-expansion-panel-header>\r\n                            <mat-panel-title>\r\n                                <span i18n=\"@@testData\">Test Data</span>\r\n                            </mat-panel-title>\r\n                        </mat-expansion-panel-header>\r\n                        <ng-template matExpansionPanelContent>\r\n                            <div layout-margin>\r\n                                <ngx-codemirror formControlName=\"dummyData\" rows=\"120\" [options]=\"jsonEditorOptions\"></ngx-codemirror>\r\n                            </div>\r\n                        </ng-template>\r\n                        <mat-action-row>\r\n                            <button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n                            @if (isEditMode) {\r\n                                <button type=\"button\" mat-button (click)=\"apply()\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n                            }\r\n                            @if (isEditMode) {\r\n                                <button type=\"button\" mat-button (click)=\"showPreview()\" [disabled]=\"isSaving || !form.pristine\" i18n=\"@@preview\">Preview</button>\r\n                            }\r\n                            <button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n                            <span flex></span>\r\n                        </mat-action-row>\r\n                    </mat-expansion-panel>\r\n                    <!-- #endregion -->\r\n                    <!-- #region Audit -->\r\n                    @if (isEditMode) {\r\n                        <mat-expansion-panel id=\"audit\">\r\n                            <mat-expansion-panel-header>\r\n                                <mat-panel-title>\r\n                                    <span i18n=\"@@audit\">Audit</span>\r\n                                </mat-panel-title>\r\n                            </mat-expansion-panel-header>\r\n                            <ng-template matExpansionPanelContent>\r\n                                <vd-audit [entity]=\"item\"> </vd-audit>\r\n                            </ng-template>\r\n                            <mat-action-row>\r\n                                <button type=\"button\" mat-flat-button color=\"accent\" (click)=\"back()\" i18n=\"@@close\">Close</button>\r\n                                <span flex></span>\r\n                            </mat-action-row>\r\n                        </mat-expansion-panel>\r\n                    }\r\n                    <!-- #endregion -->\r\n                </mat-accordion>\r\n            </vd-layout-card-over>\r\n        </form>\r\n    }\r\n</vd-layout-nav>", styles: ["codemirror{width:100%}.CodeMirror{height:500px}\n"] }]
-        }], ctorParameters: () => [{ type: TemplateService }, { type: TemplateDocService }, { type: i2.FileService }, { type: i4.MatDialog }, { type: i3$1.ActivatedRoute }, { type: i0.ChangeDetectorRef }] });
+        }], ctorParameters: () => [{ type: TemplateService }, { type: TemplateDocService }, { type: i2.FileService }, { type: i3$1.MatDialog }] });
 
 /**
  * @class
@@ -2158,12 +2080,10 @@ class ContentVariableClient {
     }
 }
 __decorate([
-    prop(),
-    __metadata("design:type", Number)
+    prop()
 ], ContentVariableClient.prototype, "contentVariableId", void 0);
 __decorate([
-    required(),
-    __metadata("design:type", Number)
+    required()
 ], ContentVariableClient.prototype, "clientId", void 0);
 
 /**
@@ -2195,12 +2115,10 @@ class ContentVariableDepartment {
     }
 }
 __decorate([
-    prop(),
-    __metadata("design:type", Number)
+    prop()
 ], ContentVariableDepartment.prototype, "contentVariableId", void 0);
 __decorate([
-    required(),
-    __metadata("design:type", Number)
+    required()
 ], ContentVariableDepartment.prototype, "departmentId", void 0);
 
 let ContentVariable = class ContentVariable extends AuditEntity {
@@ -2230,22 +2148,19 @@ let ContentVariable = class ContentVariable extends AuditEntity {
     enabled;
 };
 __decorate([
-    prop(),
-    __metadata("design:type", String)
+    prop()
 ], ContentVariable.prototype, "title", void 0);
 __decorate([
     required(),
     FormField({ row: 10 }),
     Column({}),
-    Display($localize `:@@name:Name`),
-    __metadata("design:type", String)
+    Display($localize `:@@name:Name`)
 ], ContentVariable.prototype, "name", void 0);
 __decorate([
     required(),
     FormField({ row: 11 }),
     Column({ display: Grid.Sm }),
-    Display($localize `:@@value:Value`),
-    __metadata("design:type", String)
+    Display($localize `:@@value:Value`)
 ], ContentVariable.prototype, "value", void 0);
 __decorate([
     required({ conditionalExpression: (x) => true }),
@@ -2275,8 +2190,7 @@ __decorate([
         optionTemplate: (x) => x?.clientName,
         triggerMapper: (x) => x?.clientName
     }),
-    Display($localize `:@@projects:Projects`),
-    __metadata("design:type", Array)
+    Display($localize `:@@projects:Projects`)
 ], ContentVariable.prototype, "clientJoins", void 0);
 __decorate([
     prop(),
@@ -2307,15 +2221,13 @@ __decorate([
         optionTemplate: (x) => x?.departmentName,
         triggerMapper: (x) => x?.departmentName
     }),
-    Display($localize `:@@departments:Departments`),
-    __metadata("design:type", Array)
+    Display($localize `:@@departments:Departments`)
 ], ContentVariable.prototype, "departmentJoins", void 0);
 __decorate([
     prop(),
     FormField({ row: 21 }),
     Column({ event: 'toggle' }),
-    Display($localize `:@@enabled:Enabled`),
-    __metadata("design:type", Boolean)
+    Display($localize `:@@enabled:Enabled`)
 ], ContentVariable.prototype, "enabled", void 0);
 ContentVariable = __decorate([
     Api('contentvariable'),
@@ -2391,21 +2303,18 @@ __decorate([
     required(),
     FormField({ row: 10 }),
     Column({}),
-    Display($localize `:@@name:Name`),
-    __metadata("design:type", String)
+    Display($localize `:@@name:Name`)
 ], Slider.prototype, "name", void 0);
 __decorate([
     required(),
     FormField({ row: 20 }),
     Column({ maxWidth: 150, display: Grid.Lg }),
-    Display($localize `:@@group:Group`),
-    __metadata("design:type", String)
+    Display($localize `:@@group:Group`)
 ], Slider.prototype, "group", void 0);
 __decorate([
     required(),
     FormField({ row: 50, type: FormFieldType.Editor }),
-    Display($localize `:@@content:Content`),
-    __metadata("design:type", String)
+    Display($localize `:@@content:Content`)
 ], Slider.prototype, "content", void 0);
 __decorate([
     prop(),
@@ -2413,12 +2322,10 @@ __decorate([
         row: 60,
         type: FormFieldType.TextArea
     }),
-    Display($localize `:@@style:Style`),
-    __metadata("design:type", String)
+    Display($localize `:@@style:Style`)
 ], Slider.prototype, "styleInline", void 0);
 __decorate([
-    prop(),
-    __metadata("design:type", String)
+    prop()
 ], Slider.prototype, "imagePath", void 0);
 __decorate([
     FormField({
@@ -2429,14 +2336,12 @@ __decorate([
         change: (_, img, __, ctx) => ctx?.upload(img, 'images/sliders', true)
     }),
     Display($localize `:@@image:Image`),
-    prop(),
-    __metadata("design:type", String)
+    prop()
 ], Slider.prototype, "image", void 0);
 __decorate([
     prop(),
     FormField({ row: 40 }),
-    Display($localize `:@@cssClass:CSS Class`),
-    __metadata("design:type", String)
+    Display($localize `:@@cssClass:CSS Class`)
 ], Slider.prototype, "cssClass", void 0);
 __decorate([
     FormField({
@@ -2449,21 +2354,18 @@ __decorate([
         display: Grid.Lg
     }),
     Display($localize `:@@project:Project`),
-    prop(),
-    __metadata("design:type", Number)
+    prop()
 ], Slider.prototype, "clientId", void 0);
 __decorate([
     prop(),
     FormField({ row: 20 }),
-    Display($localize `:@@ordering:Ordering`),
-    __metadata("design:type", Number)
+    Display($localize `:@@ordering:Ordering`)
 ], Slider.prototype, "ordering", void 0);
 __decorate([
     prop(),
     FormField({ row: 100 }),
     Column({ event: 'toggle' }),
-    Display($localize `:@@enabled:Enabled`),
-    __metadata("design:type", Boolean)
+    Display($localize `:@@enabled:Enabled`)
 ], Slider.prototype, "enabled", void 0);
 Slider = __decorate([
     Api('slider'),
@@ -2512,10 +2414,10 @@ class DocumentListProjectionResolve {
             return projection;
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DocumentListProjectionResolve, deps: [{ token: i1.OidcSecurityService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DocumentListProjectionResolve });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DocumentListProjectionResolve, deps: [{ token: i1.OidcSecurityService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DocumentListProjectionResolve });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DocumentListProjectionResolve, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DocumentListProjectionResolve, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.OidcSecurityService }] });
 
@@ -2535,10 +2437,10 @@ class ExcludedColumnsResolve {
     resolve() {
         return of(this.settings?.multitenantable ? [] : ['client.displayName']);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ExcludedColumnsResolve, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ExcludedColumnsResolve });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExcludedColumnsResolve, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExcludedColumnsResolve });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ExcludedColumnsResolve, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExcludedColumnsResolve, decorators: [{
             type: Injectable
         }] });
 
@@ -2558,10 +2460,10 @@ class ExcludedFieldsResolve {
     resolve() {
         return of(this.settings?.multitenantable ? [] : ['clientId']);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ExcludedFieldsResolve, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ExcludedFieldsResolve });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExcludedFieldsResolve, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExcludedFieldsResolve });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ExcludedFieldsResolve, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExcludedFieldsResolve, decorators: [{
             type: Injectable
         }] });
 
@@ -2605,10 +2507,10 @@ class FormIncludesResolve {
             return includes;
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormIncludesResolve, deps: [{ token: i1.OidcSecurityService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormIncludesResolve });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormIncludesResolve, deps: [{ token: i1.OidcSecurityService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormIncludesResolve });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormIncludesResolve, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormIncludesResolve, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.OidcSecurityService }] });
 
@@ -2628,10 +2530,10 @@ class FormValidationResolve {
     resolve() {
         return of(this.settings?.multitenantable ? { clientId: { required: true } } : {});
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormValidationResolve, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormValidationResolve });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormValidationResolve, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormValidationResolve });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormValidationResolve, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormValidationResolve, decorators: [{
             type: Injectable
         }] });
 
@@ -2675,10 +2577,10 @@ class ListProjectionResolve {
             return projection;
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ListProjectionResolve, deps: [{ token: i1.OidcSecurityService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ListProjectionResolve });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ListProjectionResolve, deps: [{ token: i1.OidcSecurityService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ListProjectionResolve });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ListProjectionResolve, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ListProjectionResolve, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.OidcSecurityService }] });
 
@@ -2707,10 +2609,10 @@ class SettingsResolve {
         /** Return the injected settings as an observable */
         return of(this.cmsSettings);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SettingsResolve, deps: [{ token: CmsSettings }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SettingsResolve });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SettingsResolve, deps: [{ token: CmsSettings }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SettingsResolve });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SettingsResolve, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SettingsResolve, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: CmsSettings, decorators: [{
                     type: Inject,
@@ -2754,9 +2656,9 @@ const routes = [
     { path: 'documents', component: VdDynamicListComponent, data: { classType: Document, addDialogType: DocumentDialogComponent, query: { type: DocumentType.Document } }, resolve: DocsListResolve },
 ];
 class VdCmsRoutingModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdCmsRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: VdCmsRoutingModule, imports: [i3$1.RouterModule], exports: [RouterModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdCmsRoutingModule, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdCmsRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: VdCmsRoutingModule, imports: [i1$1.RouterModule], exports: [RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdCmsRoutingModule, providers: [
             SettingsResolve,
             ListProjectionResolve,
             DocumentListProjectionResolve,
@@ -2766,7 +2668,7 @@ class VdCmsRoutingModule {
             FormValidationResolve
         ], imports: [RouterModule.forChild(routes), RouterModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdCmsRoutingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdCmsRoutingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [RouterModule.forChild(routes)],
@@ -2784,11 +2686,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }] });
 
 class VdCmsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdCmsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: VdCmsModule, imports: [VdCmsRoutingModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdCmsModule, imports: [VdCmsRoutingModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdCmsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: VdCmsModule, imports: [VdCmsRoutingModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdCmsModule, imports: [VdCmsRoutingModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdCmsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdCmsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2818,10 +2720,10 @@ class ContentVariableService extends GenericService {
     isNameAvailable(item) {
         return this.create(item, '/isNameAvailable').pipe(map((x) => x.value));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentVariableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentVariableService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentVariableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentVariableService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentVariableService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentVariableService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -2833,10 +2735,10 @@ class SliderService extends GenericService {
     constructor() {
         super('slider');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SliderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SliderService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SliderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SliderService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SliderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SliderService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });