@messaia/cdk-cms 19.0.1 → 20.0.0-RC.1

package/fesm2022/messaia-cdk-cms.mjs

@@ -1,53 +1,45 @@
-import * as i5 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, Component, ViewChild, Directive, Inject, ViewEncapsulation, NgModule } from '@angular/core';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i8 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i7$1 from '@angular/material/card';
-import { MatCardModule } from '@angular/material/card';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatChipsModule } from '@angular/material/chips';
-import * as i4 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i13 from '@angular/material/divider';
-import { MatDividerModule } from '@angular/material/divider';
-import * as i7 from '@angular/material/expansion';
-import { MatExpansionModule } from '@angular/material/expansion';
-import * as i9$1 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i11$1 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i12 from '@angular/material/progress-bar';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatSelectModule } from '@angular/material/select';
-import * as i7$2 from '@ctrl/ngx-codemirror';
-import { CodemirrorModule } from '@ctrl/ngx-codemirror';
-import * as i2 from '@messaia/cdk';
-import { prop, required, AuditEntity, Column, FormField, Display, Grid, FormFieldType, Utils, Api, Table, GenericService, GenericReactiveFormComponent, EnumService, AuthHelper, SaveAction, BaseComponent, ServiceLocator, GlobalRoles, VdCommonModule, VdLayoutModule, VdMediaModule, VdSelectModule, VdChipsModule, VdFileModule } from '@messaia/cdk';
-import * as i11 from '@messaia/cdk-base';
-import { DocumentBase, VdDynamicListComponent, VdDynamicFormComponent, DocumentType, VdCdkBaseModule } from '@messaia/cdk-base';
-import * as i10 from '@tinymce/tinymce-angular';
-import { EditorModule } from '@tinymce/tinymce-angular';
-import * as i14 from 'ng2-pdf-viewer';
-import { PdfViewerModule } from 'ng2-pdf-viewer';
+import { Injectable, inject, ViewChild, Component, Directive, Inject, ViewEncapsulation, NgModule } from '@angular/core';
 import * as i3$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';
+import { VdAuditComponent, DocumentBase, VdDynamicListComponent, VdDynamicFormComponent, DocumentType } from '@messaia/cdk-base';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
+import * as i5 from '@angular/common';
+import { CommonModule } from '@angular/common';
 import * as i3 from '@angular/common/http';
 import { HttpEventType, HttpResponse } from '@angular/common/http';
+import * as i6 from '@angular/forms';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i10 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i8 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
+import * as i9 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i7 from '@tinymce/tinymce-angular';
+import { EditorModule } from '@tinymce/tinymce-angular';
 import { of, map as map$1 } from 'rxjs';
 import { __decorate, __metadata } from 'tslib';
 import { map } from 'rxjs/operators';
-import * as i6 from '@angular/forms';
-import * as i9 from '@angular/material/form-field';
+import * as i4 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i9$1 from '@ctrl/ngx-codemirror';
+import { CodemirrorModule } from '@ctrl/ngx-codemirror';
 import 'codemirror/addon/edit/closetag';
 import 'codemirror/addon/edit/matchbrackets';
 import 'codemirror/addon/selection/active-line';
 import 'codemirror/mode/htmlmixed/htmlmixed';
 import 'codemirror/mode/javascript/javascript';
 import { saveAs } from 'file-saver';
+import { MatCard } from '@angular/material/card';
+import { MatDivider } from '@angular/material/divider';
+import { MatIcon } from '@angular/material/icon';
+import * as i6$1 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i8$1 from 'ng2-pdf-viewer';
+import { PdfViewerModule } from 'ng2-pdf-viewer';
 import * as i1 from 'angular-auth-oidc-client';
 
 var ContentType;
@@ -93,12 +85,7 @@ class CmsSettings {
     constructor(init) {
         Object.assign(this, init);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CmsSettings, deps: "invalid", target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CmsSettings });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CmsSettings, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: undefined }] });
 
 /**
  * @class
@@ -383,7 +370,7 @@ __decorate([
         content: (x) => x ? Utils.joinArray(x?.clientJoins?.map(y => y.client?.displayName ?? '') ?? []) : undefined,
         display: Grid.Lg,
         maxWidth: 200,
-        hide: (_, __, ctx) => !ctx.showClientJoins(),
+        hide: (_, __, ctx) => !ctx.isAdmin || (!ctx.settings?.multitenantable && !ctx.settings?.multiClients),
     }),
     FormField({
         row: 1,
@@ -458,17 +445,10 @@ class ContentService extends GenericService {
     isAliasAvailable(item) {
         return this.create(item, '/isAliasAvailable').pipe(map((x) => x.value));
     }
-    /**
-     * Duplicates a tariff
-     * @param id
-     */
-    duplicate(id) {
-        return this.create(null, `/duplicate/${id}`);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ContentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ContentService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ContentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ContentService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ContentService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ContentService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -479,6 +459,12 @@ class ContentFormComponent extends GenericReactiveFormComponent {
     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,
+     * commonly used in standalone components or functional-style Angular APIs.
+     */
+    settings = inject(CmsSettings);
     /**
      * Router Subscription
      */
@@ -499,14 +485,10 @@ class ContentFormComponent extends GenericReactiveFormComponent {
      * Separator keys codes
      */
     separatorKeysCodes = [ENTER, COMMA];
-    /**
-     * settings: CmsSettings
-     */
-    settings = new CmsSettings();
     /**
      * Gets the aliases control
      */
-    get aliasesControl() { return this.form.controls.aliases; }
+    get aliasesControl() { return this.form.controls['aliases']; }
     /**
      * A ref to form html element
      */
@@ -525,7 +507,6 @@ class ContentFormComponent extends GenericReactiveFormComponent {
         this.httpClient = httpClient;
         this.route = route;
         this.changeDetectorRef = changeDetectorRef;
-        this.settings = this.getService(CmsSettings);
         if (this.settings?.multitenantable || this.settings?.multiClients) {
             this.include('ClientJoins', true);
         }
@@ -546,7 +527,6 @@ class ContentFormComponent extends GenericReactiveFormComponent {
         this.route.data.subscribe((data) => {
             this.formValidation = data.formValidation;
         });
-        console.log('ngOnInit');
         super.ngOnInit();
     }
     /**
@@ -561,7 +541,7 @@ class ContentFormComponent extends GenericReactiveFormComponent {
      */
     isAliasAvailable() {
         this.service.isAliasAvailable(this.item).subscribe((x) => {
-            this.formElement?.form.controls['alias'].setErrors(x ? null : { 'inUse': true });
+            this.formElement['form']?.controls['alias'].setErrors(x ? null : { 'inUse': true });
         });
     }
     /**
@@ -715,16 +695,40 @@ class ContentFormComponent extends GenericReactiveFormComponent {
      * Cleanup subscriptions when this component is destroyed.
      */
     ngOnDestroy() {
+        super.ngOnDestroy();
         if (this.routeSubscription) {
             this.routeSubscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", 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: "14.0.0", version: "19.0.5", type: ContentFormComponent, isStandalone: false, 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\t<form *ngIf=\"form\" [formGroup]=\"form\" novalidate (ngSubmit)=\"save()\">\r\n\t\t<vd-layout-card-over class=\"accordion\" cardWidth=\"70\" color=\"primary\" flex>\r\n\t\t\t<mat-accordion [multi]=\"!isEditMode\">\r\n\t\t\t\t<!-- #region Details -->\r\n\t\t\t\t<mat-expansion-panel expanded=\"true\" id=\"details\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title i18n=\"@@details\">Details</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<vd-generic-form [formGroup]=\"form\" [fieldGroups]=\"fieldGroups\" [context]=\"this\">\r\n\t\t\t\t\t\t\t<ng-template vd-editor let-field=\"field\" let-formGroup=\"formGroup\">\r\n\t\t\t\t\t\t\t\t<mat-form-field [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\" flex>\r\n\t\t\t\t\t\t\t\t\t<mat-label>{{field.label}}</mat-label>\r\n\t\t\t\t\t\t\t\t\t<editor [formControlName]=\"field.name\" [init]=\"editorConfig\" tinyMatFormControl flex></editor>\r\n\t\t\t\t\t\t\t\t\t<mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n\t\t\t\t\t\t\t\t\t<mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</mat-error>\r\n\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t</vd-generic-form>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button *ngIf=\"isEditMode || true\" (click)=\"apply()\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t<!-- #region Audit -->\r\n\t\t\t\t<mat-expansion-panel id=\"audit\" *ngIf=\"isEditMode\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title>\r\n\t\t\t\t\t\t\t<span i18n=\"@@audit\">Audit</span>\r\n\t\t\t\t\t\t</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<vd-audit [entity]=\"item\"> </vd-audit>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"button\" mat-flat-button color=\"accent\" (click)=\"back()\" i18n=\"@@close\">Close</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\t\t\t</mat-accordion>\r\n\t\t</vd-layout-card-over>\r\n\t</form>\r\n</vd-layout-nav>", dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: i7.MatAccordion, selector: "mat-accordion", inputs: ["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: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i9.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i10.EditorComponent, selector: "editor", inputs: ["cloudChannel", "apiKey", "licenseKey", "init", "id", "initialValue", "outputFormat", "inline", "tagName", "plugins", "toolbar", "modelEvents", "allowedEvents", "ignoreEvents", "disabled"] }, { kind: "component", type: i2.VdLayoutNavComponent, selector: "vd-layout-nav", inputs: ["toolbarTitle", "editMode", "actions", "data", "context", "hideToolbar", "icon", "logo", "color", "hideToggle", "backNavigationRoute", "navigationRoute"], outputs: ["reload"] }, { kind: "component", type: i2.VdLayoutCardOverComponent, selector: "vd-layout-card-over", inputs: ["cardTitle", "cardSubtitle", "cardWidth", "color"] }, { kind: "directive", type: i2.EmptyStringResetDirective, selector: "[ngModel],[formControlName],[formControl]" }, { kind: "directive", type: i2.MatFormFieldEditorDirective, selector: "[tinyMatFormControl]", inputs: ["errorStateMatcher", "disabled", "id", "placeholder", "required", "value"], outputs: ["editorChange"] }, { kind: "directive", type: i2.MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { kind: "directive", type: i2.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: i2.VdEditorDirective, selector: "[vd-editor]ng-template" }, { kind: "component", type: i2.VdGenericFormComponent, selector: "vd-generic-form", inputs: ["formGroup", "classType", "formDefinition", "fieldGroups", "groupName", "fieldSets", "context", "debugValue", "readonly", "separatorKeysCodes"] }, { kind: "component", type: i11.VdAuditComponent, selector: "vd-audit", inputs: ["entity"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", 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: "14.0.0", version: "20.0.3", 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\t<form *ngIf=\"form\" [formGroup]=\"form\" novalidate (ngSubmit)=\"save()\">\r\n\t\t<vd-layout-card-over class=\"accordion\" cardWidth=\"70\" color=\"primary\" flex>\r\n\t\t\t<mat-accordion [multi]=\"!isEditMode\">\r\n\t\t\t\t<!-- #region Details -->\r\n\t\t\t\t<mat-expansion-panel expanded=\"true\" id=\"details\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title i18n=\"@@details\">Details</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<vd-generic-form [formGroup]=\"form\" [fieldGroups]=\"fieldGroups\" [context]=\"this\">\r\n\t\t\t\t\t\t\t<ng-template vd-editor let-field=\"field\" let-formGroup=\"formGroup\">\r\n\t\t\t\t\t\t\t\t<mat-form-field [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\" flex>\r\n\t\t\t\t\t\t\t\t\t<mat-label>{{field.label}}</mat-label>\r\n\t\t\t\t\t\t\t\t\t<editor [formControlName]=\"field.name\" [init]=\"editorConfig\" tinyMatFormControl flex></editor>\r\n\t\t\t\t\t\t\t\t\t<mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n\t\t\t\t\t\t\t\t\t<mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</mat-error>\r\n\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t</vd-generic-form>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button *ngIf=\"isEditMode || true\" (click)=\"apply()\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t<!-- #region Audit -->\r\n\t\t\t\t<mat-expansion-panel id=\"audit\" *ngIf=\"isEditMode\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title>\r\n\t\t\t\t\t\t\t<span i18n=\"@@audit\">Audit</span>\r\n\t\t\t\t\t\t</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<vd-audit [entity]=\"item\"> </vd-audit>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"button\" mat-flat-button color=\"accent\" (click)=\"back()\" i18n=\"@@close\">Close</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\t\t\t</mat-accordion>\r\n\t\t</vd-layout-card-over>\r\n\t</form>\r\n</vd-layout-nav>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: 
+                //-----------------------
+                ReactiveFormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "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: i7.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: i8.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i8.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i8.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i8.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i8.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i8.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i9.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i10.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"] }, { kind: "directive", type: VdEditorDirective, selector: "[vd-editor]ng-template" }, { kind: "component", type: VdAuditComponent, selector: "vd-audit", inputs: ["entity"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ContentFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ContentFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-content-form', standalone: false, template: "<vd-layout-nav color=\"primary\" [backNavigationRoute]=\"listRoute\" toolbarTitle=\"Content\" i18n-toolbarTitle=\"@@content\" [editMode]=\"isEditMode\" [actions]=\"toolbarActions\" [data]=\"item\" [context]=\"this\">\r\n\t<form *ngIf=\"form\" [formGroup]=\"form\" novalidate (ngSubmit)=\"save()\">\r\n\t\t<vd-layout-card-over class=\"accordion\" cardWidth=\"70\" color=\"primary\" flex>\r\n\t\t\t<mat-accordion [multi]=\"!isEditMode\">\r\n\t\t\t\t<!-- #region Details -->\r\n\t\t\t\t<mat-expansion-panel expanded=\"true\" id=\"details\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title i18n=\"@@details\">Details</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<vd-generic-form [formGroup]=\"form\" [fieldGroups]=\"fieldGroups\" [context]=\"this\">\r\n\t\t\t\t\t\t\t<ng-template vd-editor let-field=\"field\" let-formGroup=\"formGroup\">\r\n\t\t\t\t\t\t\t\t<mat-form-field [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\" flex>\r\n\t\t\t\t\t\t\t\t\t<mat-label>{{field.label}}</mat-label>\r\n\t\t\t\t\t\t\t\t\t<editor [formControlName]=\"field.name\" [init]=\"editorConfig\" tinyMatFormControl flex></editor>\r\n\t\t\t\t\t\t\t\t\t<mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n\t\t\t\t\t\t\t\t\t<mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</mat-error>\r\n\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t</vd-generic-form>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button *ngIf=\"isEditMode || true\" (click)=\"apply()\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t<!-- #region Audit -->\r\n\t\t\t\t<mat-expansion-panel id=\"audit\" *ngIf=\"isEditMode\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title>\r\n\t\t\t\t\t\t\t<span i18n=\"@@audit\">Audit</span>\r\n\t\t\t\t\t\t</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<vd-audit [entity]=\"item\"> </vd-audit>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"button\" mat-flat-button color=\"accent\" (click)=\"back()\" i18n=\"@@close\">Close</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\t\t\t</mat-accordion>\r\n\t\t</vd-layout-card-over>\r\n\t</form>\r\n</vd-layout-nav>" }]
+            args: [{ selector: 'app-content-form', imports: [
+                        CommonModule,
+                        //-----------------------
+                        ReactiveFormsModule,
+                        RxReactiveFormsModule,
+                        EditorModule,
+                        //-----------------------
+                        MatExpansionModule,
+                        MatFormFieldModule,
+                        MatButtonModule,
+                        MatFormFieldEditorDirective,
+                        //-----------------------
+                        VdLayoutNavComponent,
+                        VdLayoutCardOverComponent,
+                        VdGenericFormComponent,
+                        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\t<form *ngIf=\"form\" [formGroup]=\"form\" novalidate (ngSubmit)=\"save()\">\r\n\t\t<vd-layout-card-over class=\"accordion\" cardWidth=\"70\" color=\"primary\" flex>\r\n\t\t\t<mat-accordion [multi]=\"!isEditMode\">\r\n\t\t\t\t<!-- #region Details -->\r\n\t\t\t\t<mat-expansion-panel expanded=\"true\" id=\"details\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title i18n=\"@@details\">Details</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<vd-generic-form [formGroup]=\"form\" [fieldGroups]=\"fieldGroups\" [context]=\"this\">\r\n\t\t\t\t\t\t\t<ng-template vd-editor let-field=\"field\" let-formGroup=\"formGroup\">\r\n\t\t\t\t\t\t\t\t<mat-form-field [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\" flex>\r\n\t\t\t\t\t\t\t\t\t<mat-label>{{field.label}}</mat-label>\r\n\t\t\t\t\t\t\t\t\t<editor [formControlName]=\"field.name\" [init]=\"editorConfig\" tinyMatFormControl flex></editor>\r\n\t\t\t\t\t\t\t\t\t<mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n\t\t\t\t\t\t\t\t\t<mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</mat-error>\r\n\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t</vd-generic-form>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button *ngIf=\"isEditMode || true\" (click)=\"apply()\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t<!-- #region Audit -->\r\n\t\t\t\t<mat-expansion-panel id=\"audit\" *ngIf=\"isEditMode\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title>\r\n\t\t\t\t\t\t\t<span i18n=\"@@audit\">Audit</span>\r\n\t\t\t\t\t\t</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<vd-audit [entity]=\"item\"> </vd-audit>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"button\" mat-flat-button color=\"accent\" (click)=\"back()\" i18n=\"@@close\">Close</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\t\t\t</mat-accordion>\r\n\t\t</vd-layout-card-over>\r\n\t</form>\r\n</vd-layout-nav>" }]
         }], ctorParameters: () => [{ type: ContentService }, { type: i2.FileService }, { type: i3.HttpClient }, { type: i3$1.ActivatedRoute }, { type: i0.ChangeDetectorRef }], propDecorators: { formElement: [{
                 type: ViewChild,
                 args: ['form', { static: false }]
@@ -836,10 +840,10 @@ class DocumentService extends DocumentGenericService {
     sendMail(id) {
         return this.update(`sendMail/${id}`, null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DocumentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DocumentService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DocumentService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -940,10 +944,10 @@ class DocumentFormBaseComponent extends GenericReactiveFormComponent {
             departmentId: this.currentUser?.departmentId
         }), this.data || {}));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentFormBaseComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: DocumentFormBaseComponent, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DocumentFormBaseComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: DocumentFormBaseComponent, isStandalone: true, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentFormBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", 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 }] });
 
@@ -972,15 +976,22 @@ class DocumentDialogComponent extends DocumentFormBaseComponent {
     onBeforeFormBuild() {
         this.item.isPublic = true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", 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: "14.0.0", version: "19.0.5", type: DocumentDialogComponent, isStandalone: false, selector: "document-dialog", usesInheritance: true, ngImport: i0, template: "\n    <div mat-dialog-title class=\"mat-headline-6\" i18n=\"@@newDocument\">New document</div>\n    <form *ngIf=\"form\" [formGroup]=\"form\" (ngSubmit)=\"save()\">\n        <vd-generic-form [formGroup]=\"form\" [fieldGroups]=\"fieldGroups\" [context]=\"this\">\n            <ng-template vd-file let-field=\"field\" let-formGroup=\"formGroup\">\n                <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\n                    <mat-label>{{field.header}}</mat-label>\n                    <div vd-file-input [formControlName]=\"field.name\" (select)=\"upload($event)\" [accept]=\"field.fileExtensions\"></div>\n                </mat-form-field>\n            </ng-template>\n        </vd-generic-form>\n        <div mat-dialog-actions class=\"pad-top\">\n            <button type=\"submit\" mat-flat-button [disabled]=\"isSaving\" color=\"primary\" i18n=\"@@save\">Save</button>\n            <button type=\"button\" mat-button (click)=\"cancel()\" i18n=\"@@cancel\">Cancel</button>\n        </div>\n    </form>", isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.EmptyStringResetDirective, selector: "[ngModel],[formControlName],[formControl]" }, { kind: "directive", type: i2.MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { kind: "directive", type: i2.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: i2.VdFileDirective, selector: "[vd-file]ng-template" }, { kind: "component", type: i2.VdGenericFormComponent, selector: "vd-generic-form", inputs: ["formGroup", "classType", "formDefinition", "fieldGroups", "groupName", "fieldSets", "context", "debugValue", "readonly", "separatorKeysCodes"] }, { kind: "component", type: i2.VdFileInputComponent, selector: "[vd-file-input]", inputs: ["accept", "placeholder", "required", "multiple", "disabled", "errorState"], outputs: ["select", "clear"] }, { kind: "directive", type: 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", 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: "14.0.0", version: "20.0.3", 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    <form *ngIf=\"form\" [formGroup]=\"form\" (ngSubmit)=\"save()\">\n        <vd-generic-form [formGroup]=\"form\" [fieldGroups]=\"fieldGroups\" [context]=\"this\">\n            <ng-template vd-file let-field=\"field\" let-formGroup=\"formGroup\">\n                <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\n                    <mat-label>{{field.header}}</mat-label>\n                    <div vd-file-input [formControlName]=\"field.name\" (select)=\"upload($event)\" [accept]=\"field.fileExtensions\"></div>\n                </mat-form-field>\n            </ng-template>\n        </vd-generic-form>\n        <div mat-dialog-actions class=\"pad-top\">\n            <button type=\"submit\" mat-flat-button [disabled]=\"isSaving\" color=\"primary\" i18n=\"@@save\">Save</button>\n            <button type=\"button\" mat-button (click)=\"cancel()\" i18n=\"@@cancel\">Cancel</button>\n        </div>\n    </form>", isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "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: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "component", type: VdGenericFormComponent, selector: "vd-generic-form", inputs: ["formGroup", "classType", "formDefinition", "fieldGroups", "groupName", "fieldSets", "context", "debugValue", "readonly", "separatorKeysCodes"] }, { kind: "component", type: VdFileInputComponent, selector: "[vd-file-input]", inputs: ["accept", "placeholder", "required", "multiple", "disabled", "errorState"], outputs: ["select", "clear"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DocumentDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'document-dialog',
                     template: DocumentFormTemplate,
-                    standalone: false
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatDialogModule,
+                        MatFormFieldModule,
+                        VdGenericFormComponent,
+                        VdFileInputComponent
+                    ]
                 }]
         }], ctorParameters: () => [{ type: DocumentService }, { type: i2.FileService }, { type: i3$1.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i4.MatDialogRef }, { type: Document, decorators: [{
                     type: Inject,
@@ -1332,32 +1343,32 @@ class TemplatePreview {
     }
 }
 
-class TemplateDocService extends GenericService {
+class TemplateService extends GenericService {
     /**
      * Constructor
      */
     constructor() {
-        super('templateDoc');
+        super('template');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TemplateDocService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TemplateDocService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TemplateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TemplateService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TemplateDocService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TemplateService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
-class TemplateService extends GenericService {
+class TemplateDocService extends GenericService {
     /**
      * Constructor
      */
     constructor() {
-        super('template');
+        super('templateDoc');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TemplateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TemplateService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TemplateDocService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TemplateDocService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TemplateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TemplateDocService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -1369,10 +1380,10 @@ class TemplatePreviewService extends GenericService {
     constructor() {
         super('templatePreview');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TemplatePreviewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TemplatePreviewService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TemplatePreviewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TemplatePreviewService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TemplatePreviewService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TemplatePreviewService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -1536,12 +1547,22 @@ class TemplatePreviewDialogComponent extends BaseComponent {
             this.dialogRef.removePanelClass('full-screen');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", 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: "14.0.0", version: "19.0.5", type: TemplatePreviewDialogComponent, isStandalone: false, 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    <div *ngIf=\"data.type == TemplateType.Pdf && pdfSrc ||true\">\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</div>\r\n<form #form=\"ngForm\" novalidate layout=\"column\" flex>\r\n    <!-- #region Entity -->\r\n    <div layout=\"row\" flex *ngIf=\"data.endpoint\">\r\n        <mat-form-field flex layout-margin>\r\n            <mat-label>{{data.entityName}}</mat-label>\r\n            <vd-chips [(ngModel)]=\"data.entityId\" [endpoint]=\"data.endpoint\" [params]=\"{sortBy: 'id'}\" text=\"displayName\" name=\"entityId\" #entityId=\"ngModel\" [placeholder]=\"data.entityName??''\" required flex>\r\n                <ng-template vd-chip let-entity=\"chip\">\r\n                    <span>{{entity[data.displayName??'']}}</span>\r\n                </ng-template>\r\n                <ng-template vd-autocomplete-option let-entity=\"option\">\r\n                    <span>{{entity[data.displayName??'']}}</span>\r\n                </ng-template>\r\n            </vd-chips>\r\n            <mat-error *ngIf=\"entityId.errors?.required\"><span>{{data.entityName}}</span><span i18n=\"@@isRequired\"> is required</span></mat-error>\r\n        </mat-form-field>\r\n    </div>\r\n    <!-- #endregion -->\r\n\r\n    <div layout=\"column\" layout-gt-sm=\"row\" class=\"push-bottom\" flex *ngIf=\"isLoading\">\r\n        <div flex layout-margin>\r\n            <div class=\"push-bottom-sm\" i18n=\"@@pleaseWait\">Please Wait...</div>\r\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- #region PDF Content -->\r\n    <mat-card *ngIf=\"data.type == TemplateType.Pdf\" flex>\r\n        <pdf-viewer [src]=\"pdfSrc\" *ngIf=\"data.type == TemplateType.Pdf && pdfSrc\" [render-text]=\"true\" [zoom]=\"zoom\" [zoom-scale]=\"zoomScale\" [show-borders]=\"true\" [original-size]=\"false\" [autoresize]=\"true\"></pdf-viewer>\r\n    </mat-card>\r\n    <!-- #region Content -->\r\n\r\n    <div *ngIf=\"data.type != TemplateType.Pdf\" 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\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                <mat-error *ngIf=\"email.errors?.required\"><span i18n=\"@@email\">Email</span><span i18n=\"@@isRequired\"> is required</span></mat-error>\r\n                <mat-error *ngIf=\"!email.errors?.required && email.errors?.email\"><span i18n=\"@@email\">Email</span><span i18n=\"@@isInvalid\"> is invalid</span></mat-error>\r\n            </mat-form-field>\r\n        </div>\r\n        <!-- #endregion -->\r\n    </div>\r\n    <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: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i9$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i11$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2.EmptyStringResetDirective, selector: "[ngModel],[formControlName],[formControl]" }, { kind: "directive", type: i2.MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { kind: "directive", type: i2.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "component", type: i2.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: "directive", type: i2.VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { kind: "directive", type: i2.VdChipDirective, selector: "[vd-chip]ng-template" }, { 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: "component", type: i12.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i13.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i14.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: "20.0.3", 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: "14.0.0", version: "20.0.3", 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    <div *ngIf=\"data.type == TemplateType.Pdf && pdfSrc ||true\">\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</div>\r\n<form #form=\"ngForm\" novalidate layout=\"column\" flex>\r\n    <!-- #region Entity -->\r\n    <div layout=\"row\" flex *ngIf=\"data.endpoint\">\r\n        <mat-form-field flex layout-margin>\r\n            <mat-label>{{data.entityName}}</mat-label>\r\n            <vd-chips [(ngModel)]=\"data.entityId\" [endpoint]=\"data.endpoint\" [params]=\"{sortBy: 'id'}\" text=\"displayName\" name=\"entityId\" #entityId=\"ngModel\" [placeholder]=\"data.entityName??''\" required flex>\r\n                <ng-template vd-chip let-entity=\"chip\">\r\n                    <span>{{entity[data.displayName??'']}}</span>\r\n                </ng-template>\r\n                <ng-template vd-autocomplete-option let-entity=\"option\">\r\n                    <span>{{entity[data.displayName??'']}}</span>\r\n                </ng-template>\r\n            </vd-chips>\r\n            <mat-error *ngIf=\"entityId.errors!['required']\"><span>{{data.entityName}}</span><span i18n=\"@@isRequired\"> is required</span></mat-error>\r\n        </mat-form-field>\r\n    </div>\r\n    <!-- #endregion -->\r\n\r\n    <div layout=\"column\" layout-gt-sm=\"row\" class=\"push-bottom\" flex *ngIf=\"isLoading\">\r\n        <div flex layout-margin>\r\n            <div class=\"push-bottom-sm\" i18n=\"@@pleaseWait\">Please Wait...</div>\r\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- #region PDF Content -->\r\n    <mat-card *ngIf=\"data.type == TemplateType.Pdf\" flex>\r\n        <pdf-viewer [src]=\"pdfSrc\" *ngIf=\"data.type == TemplateType.Pdf && pdfSrc\" [render-text]=\"true\" [zoom]=\"zoom\" [zoom-scale]=\"zoomScale\" [show-borders]=\"true\" [original-size]=\"false\" [autoresize]=\"true\"></pdf-viewer>\r\n    </mat-card>\r\n    <!-- #region Content -->\r\n\r\n    <div *ngIf=\"data.type != TemplateType.Pdf\" 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\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                <mat-error *ngIf=\"email.errors && email.errors!['required']\"><span i18n=\"@@email\">Email</span><span i18n=\"@@isRequired\"> is required</span></mat-error>\r\n                <mat-error *ngIf=\"!email.errors!['required'] && email.errors!['email']\"><span i18n=\"@@email\">Email</span><span i18n=\"@@isInvalid\"> is invalid</span></mat-error>\r\n            </mat-form-field>\r\n        </div>\r\n        <!-- #endregion -->\r\n    </div>\r\n    <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: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6$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: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PdfViewerModule }, { kind: "component", type: i8$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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TemplatePreviewDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TemplatePreviewDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-template-preview', standalone: false, template: "<div mat-dialog-title>\r\n    <span i18n=\"@@templatePreview\">Template preview</span>\r\n    <span flex></span>\r\n    <div *ngIf=\"data.type == TemplateType.Pdf && pdfSrc ||true\">\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</div>\r\n<form #form=\"ngForm\" novalidate layout=\"column\" flex>\r\n    <!-- #region Entity -->\r\n    <div layout=\"row\" flex *ngIf=\"data.endpoint\">\r\n        <mat-form-field flex layout-margin>\r\n            <mat-label>{{data.entityName}}</mat-label>\r\n            <vd-chips [(ngModel)]=\"data.entityId\" [endpoint]=\"data.endpoint\" [params]=\"{sortBy: 'id'}\" text=\"displayName\" name=\"entityId\" #entityId=\"ngModel\" [placeholder]=\"data.entityName??''\" required flex>\r\n                <ng-template vd-chip let-entity=\"chip\">\r\n                    <span>{{entity[data.displayName??'']}}</span>\r\n                </ng-template>\r\n                <ng-template vd-autocomplete-option let-entity=\"option\">\r\n                    <span>{{entity[data.displayName??'']}}</span>\r\n                </ng-template>\r\n            </vd-chips>\r\n            <mat-error *ngIf=\"entityId.errors?.required\"><span>{{data.entityName}}</span><span i18n=\"@@isRequired\"> is required</span></mat-error>\r\n        </mat-form-field>\r\n    </div>\r\n    <!-- #endregion -->\r\n\r\n    <div layout=\"column\" layout-gt-sm=\"row\" class=\"push-bottom\" flex *ngIf=\"isLoading\">\r\n        <div flex layout-margin>\r\n            <div class=\"push-bottom-sm\" i18n=\"@@pleaseWait\">Please Wait...</div>\r\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- #region PDF Content -->\r\n    <mat-card *ngIf=\"data.type == TemplateType.Pdf\" flex>\r\n        <pdf-viewer [src]=\"pdfSrc\" *ngIf=\"data.type == TemplateType.Pdf && pdfSrc\" [render-text]=\"true\" [zoom]=\"zoom\" [zoom-scale]=\"zoomScale\" [show-borders]=\"true\" [original-size]=\"false\" [autoresize]=\"true\"></pdf-viewer>\r\n    </mat-card>\r\n    <!-- #region Content -->\r\n\r\n    <div *ngIf=\"data.type != TemplateType.Pdf\" 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\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                <mat-error *ngIf=\"email.errors?.required\"><span i18n=\"@@email\">Email</span><span i18n=\"@@isRequired\"> is required</span></mat-error>\r\n                <mat-error *ngIf=\"!email.errors?.required && email.errors?.email\"><span i18n=\"@@email\">Email</span><span i18n=\"@@isInvalid\"> is invalid</span></mat-error>\r\n            </mat-form-field>\r\n        </div>\r\n        <!-- #endregion -->\r\n    </div>\r\n    <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"] }]
+            args: [{ selector: 'app-template-preview', imports: [
+                        CommonModule,
+                        MatIcon,
+                        MatFormFieldModule,
+                        MatProgressBarModule,
+                        MatDivider,
+                        MatCard,
+                        VdChipsComponent,
+                        FormsModule,
+                        PdfViewerModule
+                    ], template: "<div mat-dialog-title>\r\n    <span i18n=\"@@templatePreview\">Template preview</span>\r\n    <span flex></span>\r\n    <div *ngIf=\"data.type == TemplateType.Pdf && pdfSrc ||true\">\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</div>\r\n<form #form=\"ngForm\" novalidate layout=\"column\" flex>\r\n    <!-- #region Entity -->\r\n    <div layout=\"row\" flex *ngIf=\"data.endpoint\">\r\n        <mat-form-field flex layout-margin>\r\n            <mat-label>{{data.entityName}}</mat-label>\r\n            <vd-chips [(ngModel)]=\"data.entityId\" [endpoint]=\"data.endpoint\" [params]=\"{sortBy: 'id'}\" text=\"displayName\" name=\"entityId\" #entityId=\"ngModel\" [placeholder]=\"data.entityName??''\" required flex>\r\n                <ng-template vd-chip let-entity=\"chip\">\r\n                    <span>{{entity[data.displayName??'']}}</span>\r\n                </ng-template>\r\n                <ng-template vd-autocomplete-option let-entity=\"option\">\r\n                    <span>{{entity[data.displayName??'']}}</span>\r\n                </ng-template>\r\n            </vd-chips>\r\n            <mat-error *ngIf=\"entityId.errors!['required']\"><span>{{data.entityName}}</span><span i18n=\"@@isRequired\"> is required</span></mat-error>\r\n        </mat-form-field>\r\n    </div>\r\n    <!-- #endregion -->\r\n\r\n    <div layout=\"column\" layout-gt-sm=\"row\" class=\"push-bottom\" flex *ngIf=\"isLoading\">\r\n        <div flex layout-margin>\r\n            <div class=\"push-bottom-sm\" i18n=\"@@pleaseWait\">Please Wait...</div>\r\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- #region PDF Content -->\r\n    <mat-card *ngIf=\"data.type == TemplateType.Pdf\" flex>\r\n        <pdf-viewer [src]=\"pdfSrc\" *ngIf=\"data.type == TemplateType.Pdf && pdfSrc\" [render-text]=\"true\" [zoom]=\"zoom\" [zoom-scale]=\"zoomScale\" [show-borders]=\"true\" [original-size]=\"false\" [autoresize]=\"true\"></pdf-viewer>\r\n    </mat-card>\r\n    <!-- #region Content -->\r\n\r\n    <div *ngIf=\"data.type != TemplateType.Pdf\" 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\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                <mat-error *ngIf=\"email.errors && email.errors!['required']\"><span i18n=\"@@email\">Email</span><span i18n=\"@@isRequired\"> is required</span></mat-error>\r\n                <mat-error *ngIf=\"!email.errors!['required'] && email.errors!['email']\"><span i18n=\"@@email\">Email</span><span i18n=\"@@isInvalid\"> is invalid</span></mat-error>\r\n            </mat-form-field>\r\n        </div>\r\n        <!-- #endregion -->\r\n    </div>\r\n    <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: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -1561,17 +1582,19 @@ class TemplateFormComponent extends GenericReactiveFormComponent {
     route;
     changeDetectorRef;
     /**
-     * Represents the available template types.
+     * Injects the CmsSettings service using Angular's `inject()` function.
+     * This allows access to the CmsSettings instance outside of constructor-based dependency injection,
+     * commonly used in standalone components or functional-style Angular APIs.
      */
-    TemplateType = TemplateType;
+    settings = inject(CmsSettings);
     /**
-     * Stores CMS settings.
+     * Represents the available template types.
      */
-    settings = new CmsSettings();
+    TemplateType = TemplateType;
     /**
      * Retrieves the attachments form control.
      */
-    get attachmentsControl() { return this.form.controls.attachments; }
+    get attachmentsControl() { return this.form.controls['attachments']; }
     /**
      * Configuration options for the HTML editor.
      */
@@ -1612,7 +1635,6 @@ class TemplateFormComponent extends GenericReactiveFormComponent {
         this.dialog = dialog;
         this.route = route;
         this.changeDetectorRef = changeDetectorRef;
-        this.settings = this.getService(CmsSettings);
         if (this.settings?.multitenantable || this.settings?.multiClients) {
             this.include('ClientJoins', true);
         }
@@ -1701,12 +1723,21 @@ class TemplateFormComponent extends GenericReactiveFormComponent {
             this.form.markAllAsTouched();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", 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: "14.0.0", version: "19.0.5", type: TemplateFormComponent, isStandalone: false, selector: "app-template-form", usesInheritance: true, ngImport: i0, template: "<vd-layout-nav color=\"primary\" [backNavigationRoute]=\"listRoute\" toolbarTitle=\"Template\" i18n-toolbarTitle=\"@@template\" [editMode]=\"isEditMode\" [actions]=\"toolbarActions\" [data]=\"item\" [context]=\"this\">\r\n\t<form *ngIf=\"form\" [formGroup]=\"form\" novalidate (ngSubmit)=\"save()\">\r\n\t\t<vd-layout-card-over class=\"accordion\" cardWidth=\"70\" color=\"primary\" flex>\r\n\t\t\t<mat-accordion [multi]=\"!isEditMode\">\r\n\t\t\t\t<!-- #region Details -->\r\n\t\t\t\t<mat-expansion-panel expanded=\"true\" id=\"details\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title i18n=\"@@details\">Details</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<vd-generic-form [formGroup]=\"form\" [fieldGroups]=\"fieldGroups\" [fieldSets]=\"['details']\" [context]=\"this\"></vd-generic-form>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"apply()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t<!-- #region Content -->\r\n\t\t\t\t<mat-expansion-panel id=\"content\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title>\r\n\t\t\t\t\t\t\t<span i18n=\"@@content\">Content</span>\r\n\t\t\t\t\t\t</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<div layout-margin>\r\n\t\t\t\t\t\t\t<ngx-codemirror formControlName=\"content\" rows=\"160\" [options]=\"editorOptions\"></ngx-codemirror>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"apply()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"showPreview()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving || !form.pristine\" i18n=\"@@preview\">Preview</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t<!-- #region Content -->\r\n\t\t\t\t<mat-expansion-panel id=\"testData\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title>\r\n\t\t\t\t\t\t\t<span i18n=\"@@testData\">Test Data</span>\r\n\t\t\t\t\t\t</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<div layout-margin>\r\n\t\t\t\t\t\t\t<ngx-codemirror formControlName=\"dummyData\" rows=\"120\" [options]=\"jsonEditorOptions\"></ngx-codemirror>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"apply()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"showPreview()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving || !form.pristine\" i18n=\"@@preview\">Preview</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t<!-- #region Audit -->\r\n\t\t\t\t<mat-expansion-panel id=\"audit\" *ngIf=\"isEditMode\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title>\r\n\t\t\t\t\t\t\t<span i18n=\"@@audit\">Audit</span>\r\n\t\t\t\t\t\t</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<vd-audit [entity]=\"item\"> </vd-audit>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"button\" mat-flat-button color=\"accent\" (click)=\"back()\" i18n=\"@@close\">Close</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\t\t\t</mat-accordion>\r\n\t\t</vd-layout-card-over>\r\n\t</form>\r\n</vd-layout-nav>", styles: ["codemirror{width:100%}.CodeMirror{height:500px}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$2.CodemirrorComponent, selector: "ngx-codemirror", inputs: ["className", "name", "autoFocus", "options", "preserveScrollPosition"], outputs: ["cursorActivity", "focusChange", "scroll", "drop", "codeMirrorLoaded"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: i7.MatAccordion, selector: "mat-accordion", inputs: ["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: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.VdLayoutNavComponent, selector: "vd-layout-nav", inputs: ["toolbarTitle", "editMode", "actions", "data", "context", "hideToolbar", "icon", "logo", "color", "hideToggle", "backNavigationRoute", "navigationRoute"], outputs: ["reload"] }, { kind: "component", type: i2.VdLayoutCardOverComponent, selector: "vd-layout-card-over", inputs: ["cardTitle", "cardSubtitle", "cardWidth", "color"] }, { kind: "directive", type: i2.EmptyStringResetDirective, selector: "[ngModel],[formControlName],[formControl]" }, { kind: "directive", type: i2.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "component", type: i2.VdGenericFormComponent, selector: "vd-generic-form", inputs: ["formGroup", "classType", "formDefinition", "fieldGroups", "groupName", "fieldSets", "context", "debugValue", "readonly", "separatorKeysCodes"] }, { kind: "component", type: i11.VdAuditComponent, selector: "vd-audit", inputs: ["entity"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", 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: "14.0.0", version: "20.0.3", 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\t<form *ngIf=\"form\" [formGroup]=\"form\" novalidate (ngSubmit)=\"save()\">\r\n\t\t<vd-layout-card-over class=\"accordion\" cardWidth=\"70\" color=\"primary\" flex>\r\n\t\t\t<mat-accordion [multi]=\"!isEditMode\">\r\n\t\t\t\t<!-- #region Details -->\r\n\t\t\t\t<mat-expansion-panel expanded=\"true\" id=\"details\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title i18n=\"@@details\">Details</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<vd-generic-form [formGroup]=\"form\" [fieldGroups]=\"fieldGroups\" [fieldSets]=\"['details']\" [context]=\"this\"></vd-generic-form>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"apply()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t<!-- #region Content -->\r\n\t\t\t\t<mat-expansion-panel id=\"content\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title>\r\n\t\t\t\t\t\t\t<span i18n=\"@@content\">Content</span>\r\n\t\t\t\t\t\t</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<div layout-margin>\r\n\t\t\t\t\t\t\t<ngx-codemirror formControlName=\"content\" rows=\"160\" [options]=\"editorOptions\"></ngx-codemirror>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"apply()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"showPreview()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving || !form.pristine\" i18n=\"@@preview\">Preview</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t<!-- #region Content -->\r\n\t\t\t\t<mat-expansion-panel id=\"testData\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title>\r\n\t\t\t\t\t\t\t<span i18n=\"@@testData\">Test Data</span>\r\n\t\t\t\t\t\t</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<div layout-margin>\r\n\t\t\t\t\t\t\t<ngx-codemirror formControlName=\"dummyData\" rows=\"120\" [options]=\"jsonEditorOptions\"></ngx-codemirror>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"apply()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"showPreview()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving || !form.pristine\" i18n=\"@@preview\">Preview</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t<!-- #region Audit -->\r\n\t\t\t\t<mat-expansion-panel id=\"audit\" *ngIf=\"isEditMode\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title>\r\n\t\t\t\t\t\t\t<span i18n=\"@@audit\">Audit</span>\r\n\t\t\t\t\t\t</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<vd-audit [entity]=\"item\"> </vd-audit>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"button\" mat-flat-button color=\"accent\" (click)=\"back()\" i18n=\"@@close\">Close</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\t\t\t</mat-accordion>\r\n\t\t</vd-layout-card-over>\r\n\t</form>\r\n</vd-layout-nav>", styles: ["codemirror{width:100%}.CodeMirror{height:500px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i8.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i8.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i8.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i8.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i8.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i8.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "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"] }, { kind: "ngmodule", type: CodemirrorModule }, { kind: "component", type: i9$1.CodemirrorComponent, selector: "ngx-codemirror", inputs: ["className", "name", "autoFocus", "options", "preserveScrollPosition"], outputs: ["cursorActivity", "focusChange", "scroll", "drop", "codeMirrorLoaded"] }, { kind: "component", type: VdAuditComponent, selector: "vd-audit", inputs: ["entity"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TemplateFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TemplateFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-template-form', encapsulation: ViewEncapsulation.None, standalone: false, template: "<vd-layout-nav color=\"primary\" [backNavigationRoute]=\"listRoute\" toolbarTitle=\"Template\" i18n-toolbarTitle=\"@@template\" [editMode]=\"isEditMode\" [actions]=\"toolbarActions\" [data]=\"item\" [context]=\"this\">\r\n\t<form *ngIf=\"form\" [formGroup]=\"form\" novalidate (ngSubmit)=\"save()\">\r\n\t\t<vd-layout-card-over class=\"accordion\" cardWidth=\"70\" color=\"primary\" flex>\r\n\t\t\t<mat-accordion [multi]=\"!isEditMode\">\r\n\t\t\t\t<!-- #region Details -->\r\n\t\t\t\t<mat-expansion-panel expanded=\"true\" id=\"details\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title i18n=\"@@details\">Details</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<vd-generic-form [formGroup]=\"form\" [fieldGroups]=\"fieldGroups\" [fieldSets]=\"['details']\" [context]=\"this\"></vd-generic-form>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"apply()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t<!-- #region Content -->\r\n\t\t\t\t<mat-expansion-panel id=\"content\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title>\r\n\t\t\t\t\t\t\t<span i18n=\"@@content\">Content</span>\r\n\t\t\t\t\t\t</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<div layout-margin>\r\n\t\t\t\t\t\t\t<ngx-codemirror formControlName=\"content\" rows=\"160\" [options]=\"editorOptions\"></ngx-codemirror>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"apply()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"showPreview()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving || !form.pristine\" i18n=\"@@preview\">Preview</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t<!-- #region Content -->\r\n\t\t\t\t<mat-expansion-panel id=\"testData\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title>\r\n\t\t\t\t\t\t\t<span i18n=\"@@testData\">Test Data</span>\r\n\t\t\t\t\t\t</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<div layout-margin>\r\n\t\t\t\t\t\t\t<ngx-codemirror formControlName=\"dummyData\" rows=\"120\" [options]=\"jsonEditorOptions\"></ngx-codemirror>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"apply()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"showPreview()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving || !form.pristine\" i18n=\"@@preview\">Preview</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t<!-- #region Audit -->\r\n\t\t\t\t<mat-expansion-panel id=\"audit\" *ngIf=\"isEditMode\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title>\r\n\t\t\t\t\t\t\t<span i18n=\"@@audit\">Audit</span>\r\n\t\t\t\t\t\t</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<vd-audit [entity]=\"item\"> </vd-audit>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"button\" mat-flat-button color=\"accent\" (click)=\"back()\" i18n=\"@@close\">Close</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\t\t\t</mat-accordion>\r\n\t\t</vd-layout-card-over>\r\n\t</form>\r\n</vd-layout-nav>", styles: ["codemirror{width:100%}.CodeMirror{height:500px}\n"] }]
+            args: [{ selector: 'app-template-form', encapsulation: ViewEncapsulation.None, imports: [
+                        CommonModule,
+                        MatExpansionModule,
+                        ReactiveFormsModule,
+                        VdLayoutNavComponent,
+                        VdLayoutCardOverComponent,
+                        VdGenericFormComponent,
+                        CodemirrorModule,
+                        VdAuditComponent
+                    ], template: "<vd-layout-nav color=\"primary\" [backNavigationRoute]=\"listRoute\" toolbarTitle=\"Template\" i18n-toolbarTitle=\"@@template\" [editMode]=\"isEditMode\" [actions]=\"toolbarActions\" [data]=\"item\" [context]=\"this\">\r\n\t<form *ngIf=\"form\" [formGroup]=\"form\" novalidate (ngSubmit)=\"save()\">\r\n\t\t<vd-layout-card-over class=\"accordion\" cardWidth=\"70\" color=\"primary\" flex>\r\n\t\t\t<mat-accordion [multi]=\"!isEditMode\">\r\n\t\t\t\t<!-- #region Details -->\r\n\t\t\t\t<mat-expansion-panel expanded=\"true\" id=\"details\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title i18n=\"@@details\">Details</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<vd-generic-form [formGroup]=\"form\" [fieldGroups]=\"fieldGroups\" [fieldSets]=\"['details']\" [context]=\"this\"></vd-generic-form>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"apply()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t<!-- #region Content -->\r\n\t\t\t\t<mat-expansion-panel id=\"content\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title>\r\n\t\t\t\t\t\t\t<span i18n=\"@@content\">Content</span>\r\n\t\t\t\t\t\t</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<div layout-margin>\r\n\t\t\t\t\t\t\t<ngx-codemirror formControlName=\"content\" rows=\"160\" [options]=\"editorOptions\"></ngx-codemirror>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"apply()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"showPreview()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving || !form.pristine\" i18n=\"@@preview\">Preview</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t<!-- #region Content -->\r\n\t\t\t\t<mat-expansion-panel id=\"testData\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title>\r\n\t\t\t\t\t\t\t<span i18n=\"@@testData\">Test Data</span>\r\n\t\t\t\t\t\t</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<div layout-margin>\r\n\t\t\t\t\t\t\t<ngx-codemirror formControlName=\"dummyData\" rows=\"120\" [options]=\"jsonEditorOptions\"></ngx-codemirror>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"submit\" mat-flat-button color=\"primary\" [disabled]=\"isSaving\" i18n=\"@@save\">Save</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"apply()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving\" i18n=\"@@apply\">Apply</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"showPreview()\" *ngIf=\"isEditMode\" [disabled]=\"isSaving || !form.pristine\" i18n=\"@@preview\">Preview</button>\r\n\t\t\t\t\t\t<button type=\"button\" mat-button (click)=\"back()\" i18n=\"@@cancel\">Cancel</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t<!-- #region Audit -->\r\n\t\t\t\t<mat-expansion-panel id=\"audit\" *ngIf=\"isEditMode\">\r\n\t\t\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t\t\t<mat-panel-title>\r\n\t\t\t\t\t\t\t<span i18n=\"@@audit\">Audit</span>\r\n\t\t\t\t\t\t</mat-panel-title>\r\n\t\t\t\t\t</mat-expansion-panel-header>\r\n\t\t\t\t\t<ng-template matExpansionPanelContent>\r\n\t\t\t\t\t\t<vd-audit [entity]=\"item\"> </vd-audit>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<mat-action-row>\r\n\t\t\t\t\t\t<button type=\"button\" mat-flat-button color=\"accent\" (click)=\"back()\" i18n=\"@@close\">Close</button>\r\n\t\t\t\t\t\t<span flex></span>\r\n\t\t\t\t\t</mat-action-row>\r\n\t\t\t\t</mat-expansion-panel>\r\n\t\t\t\t<!-- #endregion -->\r\n\t\t\t</mat-accordion>\r\n\t\t</vd-layout-card-over>\r\n\t</form>\r\n</vd-layout-nav>", styles: ["codemirror{width:100%}.CodeMirror{height:500px}\n"] }]
         }], ctorParameters: () => [{ type: TemplateService }, { type: TemplateDocService }, { type: i2.FileService }, { type: i4.MatDialog }, { type: i3$1.ActivatedRoute }, { type: i0.ChangeDetectorRef }] });
 
 /**
@@ -2142,20 +2173,32 @@ Faq = __decorate([
 
 let Slider = class Slider extends AuditEntity {
     /**
-     * @property
+     * @property Slider name.
+     * @description The title or identifier for the slider.
+     * @type {string | undefined}
      */
     name;
     /**
-     * @property
+     * @property Slider group.
+     * @description A group identifier used to categorize sliders.
+     * @type {string | undefined}
      */
     group;
     /**
-     * @property
+     * @property Slider content.
+     * @description HTML or rich text content displayed within the slider.
+     * @type {string | undefined}
      */
     content;
     /**
-     * @property Path for the slider image.
-     * @description This property stores the file path for the slider's image.
+     * @property Embedded style.
+     * @description Optional CSS styling specific to this content.
+     * @type {string}
+     */
+    styleInline;
+    /**
+     * @property Slider image path.
+     * @description File path to the slider image, typically used internally.
      * @type {string | undefined}
      */
     imagePath;
@@ -2166,15 +2209,27 @@ let Slider = class Slider extends AuditEntity {
      */
     image;
     /**
-     * @property
+     * @property CSS class.
+     * @description Custom CSS class applied to the slider, useful for styling purposes.
+     * @type {string | undefined}
+     */
+    cssClass;
+    /**
+     * @property Client ID.
+     * @description Reference to the associated client or project.
+     * @type {number | undefined}
      */
     clientId;
     /**
-     * @property
+     * @property Ordering index.
+     * @description Position of the slider in a sorted list.
+     * @type {number | undefined}
      */
     ordering;
     /**
-     * @property
+     * @property Enabled flag.
+     * @description Indicates whether the slider is active or visible.
+     * @type {boolean | undefined}
      */
     enabled;
 };
@@ -2198,6 +2253,15 @@ __decorate([
     Display($localize `:@@content:Content`),
     __metadata("design:type", String)
 ], Slider.prototype, "content", void 0);
+__decorate([
+    prop(),
+    FormField({
+        row: 60,
+        type: FormFieldType.TextArea
+    }),
+    Display($localize `:@@style:Style`),
+    __metadata("design:type", String)
+], Slider.prototype, "styleInline", void 0);
 __decorate([
     prop(),
     __metadata("design:type", String)
@@ -2214,6 +2278,12 @@ __decorate([
     prop(),
     __metadata("design:type", String)
 ], Slider.prototype, "image", void 0);
+__decorate([
+    prop(),
+    FormField({ row: 40 }),
+    Display($localize `:@@cssClass:CSS Class`),
+    __metadata("design:type", String)
+], Slider.prototype, "cssClass", void 0);
 __decorate([
     FormField({
         row: 1,
@@ -2253,6 +2323,12 @@ Slider = __decorate([
  */
 class DocumentListProjectionResolve {
     oidcSecurityService;
+    /*
+     * Injects the CmsSettings service using Angular's `inject()` function.
+     * This allows access to the CmsSettings instance outside of constructor-based dependency injection,
+     * commonly used in standalone components or functional-style Angular APIs.
+     */
+    settings = inject(CmsSettings);
     /**
      * Constructor
      * @param oidcSecurityService
@@ -2272,21 +2348,20 @@ class DocumentListProjectionResolve {
                     id: x.userData.sub,
                     isAuthenticated: x.isAuthenticated
                 });
-                let settings = ServiceLocator.getService(CmsSettings);
-                if (AuthHelper.hasRole(GlobalRoles.Administrator) && (settings?.multitenantable || settings?.multiClients)) {
+                if (AuthHelper.hasRole(GlobalRoles.Administrator) && (this.settings?.multitenantable || this.settings?.multiClients)) {
                     projection.push('client(displayName)');
                 }
-                if ((AuthHelper.hasRole(GlobalRoles.Administrator) || AuthHelper.hasRole(GlobalRoles.ClientAdministrator)) && (settings?.multitenantable || settings?.multiDepartments)) {
+                if ((AuthHelper.hasRole(GlobalRoles.Administrator) || AuthHelper.hasRole(GlobalRoles.ClientAdministrator)) && (this.settings?.multitenantable || this.settings?.multiDepartments)) {
                     projection.push('department(displayName)');
                 }
             }
             return projection;
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentListProjectionResolve, deps: [{ token: i1.OidcSecurityService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentListProjectionResolve });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DocumentListProjectionResolve, deps: [{ token: i1.OidcSecurityService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DocumentListProjectionResolve });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentListProjectionResolve, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DocumentListProjectionResolve, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.OidcSecurityService }] });
 
@@ -2294,16 +2369,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  * Excluded columns resolve service
  */
 class ExcludedColumnsResolve {
+    /**
+     * Injects the CmsSettings service using Angular's `inject()` function.
+     * This allows access to the CmsSettings instance outside of constructor-based dependency injection,
+     * commonly used in standalone components or functional-style Angular APIs.
+     */
+    settings = inject(CmsSettings);
     /**
      * Resolves excluded columns
      */
     resolve() {
-        return of(ServiceLocator.getService(CmsSettings)?.multitenantable ? [] : ['client.displayName']);
+        return of(this.settings?.multitenantable ? [] : ['client.displayName']);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ExcludedColumnsResolve, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ExcludedColumnsResolve });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ExcludedColumnsResolve, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ExcludedColumnsResolve });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ExcludedColumnsResolve, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ExcludedColumnsResolve, decorators: [{
             type: Injectable
         }] });
 
@@ -2311,16 +2392,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  * Excluded fields resolve service
  */
 class ExcludedFieldsResolve {
+    /**
+     * Injects the CmsSettings service using Angular's `inject()` function.
+     * This allows access to the CmsSettings instance outside of constructor-based dependency injection,
+     * commonly used in standalone components or functional-style Angular APIs.
+     */
+    settings = inject(CmsSettings);
     /**
      * Resolves excluded fields
      */
     resolve() {
-        return of(ServiceLocator.getService(CmsSettings)?.multitenantable ? [] : ['clientId']);
+        return of(this.settings?.multitenantable ? [] : ['clientId']);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ExcludedFieldsResolve, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ExcludedFieldsResolve });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ExcludedFieldsResolve, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ExcludedFieldsResolve });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ExcludedFieldsResolve, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ExcludedFieldsResolve, decorators: [{
             type: Injectable
         }] });
 
@@ -2329,6 +2416,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  */
 class FormIncludesResolve {
     oidcSecurityService;
+    /**
+     * Injects the CmsSettings service using Angular's `inject()` function.
+     * This allows access to the CmsSettings instance outside of constructor-based dependency injection,
+     * commonly used in standalone components or functional-style Angular APIs.
+     */
+    settings = inject(CmsSettings);
     /**
      * Constructor
      * @param oidcSecurityService
@@ -2348,21 +2441,20 @@ class FormIncludesResolve {
                     id: x.userData.sub,
                     isAuthenticated: x.isAuthenticated
                 });
-                let settings = ServiceLocator.getService(CmsSettings);
-                if (settings?.multitenantable || settings?.multiClients) {
+                if (this.settings?.multitenantable || this.settings?.multiClients) {
                     includes.push('ClientJoins');
                 }
-                if (settings?.multitenantable || settings?.multiDepartments) {
+                if (this.settings?.multitenantable || this.settings?.multiDepartments) {
                     includes.push('DepartmentJoins');
                 }
             }
             return includes;
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FormIncludesResolve, deps: [{ token: i1.OidcSecurityService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FormIncludesResolve });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FormIncludesResolve, deps: [{ token: i1.OidcSecurityService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FormIncludesResolve });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FormIncludesResolve, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FormIncludesResolve, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.OidcSecurityService }] });
 
@@ -2370,16 +2462,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  * Form validation resolve service
  */
 class FormValidationResolve {
+    /**
+     * Injects the CmsSettings service using Angular's `inject()` function.
+     * This allows access to the CmsSettings instance outside of constructor-based dependency injection,
+     * commonly used in standalone components or functional-style Angular APIs.
+     */
+    settings = inject(CmsSettings);
     /**
      * Resolves Form validation
      */
     resolve() {
-        return of(ServiceLocator.getService(CmsSettings)?.multitenantable ? { clientId: { required: true } } : {});
+        return of(this.settings?.multitenantable ? { clientId: { required: true } } : {});
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FormValidationResolve, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FormValidationResolve });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FormValidationResolve, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FormValidationResolve });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FormValidationResolve, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FormValidationResolve, decorators: [{
             type: Injectable
         }] });
 
@@ -2388,6 +2486,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  */
 class ListProjectionResolve {
     oidcSecurityService;
+    /**
+     * Injects the CmsSettings service using Angular's `inject()` function.
+     * This allows access to the CmsSettings instance outside of constructor-based dependency injection,
+     * commonly used in standalone components or functional-style Angular APIs.
+     */
+    settings = inject(CmsSettings);
     /**
      * Constructor
      * @param oidcSecurityService
@@ -2407,21 +2511,20 @@ class ListProjectionResolve {
                     id: x.userData.sub,
                     isAuthenticated: x.isAuthenticated
                 });
-                let settings = ServiceLocator.getService(CmsSettings);
-                if (AuthHelper.hasRole(GlobalRoles.Administrator) && (settings?.multitenantable || settings?.multiClients)) {
+                if (AuthHelper.hasRole(GlobalRoles.Administrator) && (this.settings?.multitenantable || this.settings?.multiClients)) {
                     projection.push('clientJoins(client(displayName))');
                 }
-                if ((AuthHelper.hasRole(GlobalRoles.Administrator) || AuthHelper.hasRole(GlobalRoles.ClientAdministrator)) && (settings?.multitenantable || settings?.multiDepartments)) {
+                if ((AuthHelper.hasRole(GlobalRoles.Administrator) || AuthHelper.hasRole(GlobalRoles.ClientAdministrator)) && (this.settings?.multitenantable || this.settings?.multiDepartments)) {
                     projection.push('departmentJoins(department(displayName))');
                 }
             }
             return projection;
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ListProjectionResolve, deps: [{ token: i1.OidcSecurityService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ListProjectionResolve });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ListProjectionResolve, deps: [{ token: i1.OidcSecurityService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ListProjectionResolve });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ListProjectionResolve, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ListProjectionResolve, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.OidcSecurityService }] });
 
@@ -2433,14 +2536,13 @@ class SettingsResolve {
      * Resolves settings
      */
     resolve(route) {
-        let settings = route.parent?.data.settings;
-        ServiceLocator.create([{ provide: CmsSettings, useValue: settings }]);
+        let settings = route.parent?.data['settings'];
         return of(settings);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SettingsResolve, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SettingsResolve });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: SettingsResolve, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: SettingsResolve });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SettingsResolve, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: SettingsResolve, decorators: [{
             type: Injectable
         }] });
 
@@ -2466,7 +2568,6 @@ const routes = [
     { path: 'contents/block', component: VdDynamicListComponent, data: { classType: Content, query: { type: ContentType.Block } }, resolve: ListResolve },
     { path: 'contents/:type/add', component: ContentFormComponent, resolve: FormResolve },
     { path: 'contents/:type/edit/:id', component: ContentFormComponent, resolve: FormResolve },
-    //
     { path: 'variables', component: VdDynamicListComponent, data: { classType: ContentVariable }, resolve: ListResolve },
     { path: 'variables/edit/:id', component: VdDynamicFormComponent, data: { classType: ContentVariable, subtitle: $localize `:@@variables:Variables` }, resolve: FormResolve },
     { path: 'variables/add', component: VdDynamicFormComponent, data: { classType: ContentVariable, subtitle: $localize `:@@variables:Variables` }, resolve: FormResolve },
@@ -2482,9 +2583,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: "19.0.5", ngImport: i0, type: VdCmsRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: VdCmsRoutingModule, imports: [i3$1.RouterModule], exports: [RouterModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: VdCmsRoutingModule, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VdCmsRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: VdCmsRoutingModule, imports: [i3$1.RouterModule], exports: [RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VdCmsRoutingModule, providers: [
             SettingsResolve,
             ListProjectionResolve,
             DocumentListProjectionResolve,
@@ -2494,7 +2595,7 @@ class VdCmsRoutingModule {
             FormValidationResolve
         ], imports: [RouterModule.forChild(routes), RouterModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: VdCmsRoutingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VdCmsRoutingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [RouterModule.forChild(routes)],
@@ -2511,130 +2612,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 }]
         }] });
 
-class MaterialModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: MaterialModule, exports: [MatCardModule,
-            MatExpansionModule,
-            MatButtonModule,
-            MatIconModule,
-            MatChipsModule,
-            MatAutocompleteModule,
-            MatCheckboxModule,
-            MatDialogModule,
-            MatInputModule,
-            MatSelectModule,
-            MatProgressBarModule,
-            MatDividerModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MaterialModule, imports: [MatCardModule,
-            MatExpansionModule,
-            MatButtonModule,
-            MatIconModule,
-            MatChipsModule,
-            MatAutocompleteModule,
-            MatCheckboxModule,
-            MatDialogModule,
-            MatInputModule,
-            MatSelectModule,
-            MatProgressBarModule,
-            MatDividerModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MaterialModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [
-                        MatCardModule,
-                        MatExpansionModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        MatChipsModule,
-                        MatAutocompleteModule,
-                        MatCheckboxModule,
-                        MatDialogModule,
-                        MatInputModule,
-                        MatSelectModule,
-                        MatProgressBarModule,
-                        MatDividerModule
-                    ]
-                }]
-        }] });
-class VdModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: VdModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: VdModule, exports: [VdCommonModule,
-            VdLayoutModule,
-            VdMediaModule,
-            VdSelectModule,
-            VdChipsModule,
-            VdFileModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: VdModule, imports: [VdCommonModule,
-            VdLayoutModule,
-            VdMediaModule,
-            VdSelectModule,
-            VdChipsModule,
-            VdFileModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: VdModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [
-                        VdCommonModule,
-                        VdLayoutModule,
-                        VdMediaModule,
-                        VdSelectModule,
-                        VdChipsModule,
-                        VdFileModule
-                    ]
-                }]
-        }] });
-const DECLARATION = [
-    ContentFormComponent,
-    TemplateFormComponent,
-    TemplatePreviewDialogComponent,
-    DocumentDialogComponent
-];
 class VdCmsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: VdCmsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: VdCmsModule, declarations: [ContentFormComponent,
-            TemplateFormComponent,
-            TemplatePreviewDialogComponent,
-            DocumentDialogComponent], imports: [CommonModule,
-            CodemirrorModule,
-            VdCdkBaseModule, VdModule, MaterialModule, VdCmsRoutingModule,
-            EditorModule,
-            PdfViewerModule], exports: [VdModule, MaterialModule, EditorModule,
-            PdfViewerModule, ContentFormComponent,
-            TemplateFormComponent,
-            TemplatePreviewDialogComponent,
-            DocumentDialogComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: VdCmsModule, imports: [CommonModule,
-            CodemirrorModule,
-            VdCdkBaseModule,
-            VdModule,
-            MaterialModule,
-            VdCmsRoutingModule,
-            EditorModule,
-            PdfViewerModule, VdModule, MaterialModule, EditorModule,
-            PdfViewerModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VdCmsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: VdCmsModule, imports: [VdCmsRoutingModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VdCmsModule, imports: [VdCmsRoutingModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: VdCmsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VdCmsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule,
-                        CodemirrorModule,
-                        VdCdkBaseModule,
-                        VdModule,
-                        MaterialModule,
-                        VdCmsRoutingModule,
-                        EditorModule,
-                        PdfViewerModule
-                    ],
-                    declarations: [DECLARATION],
-                    exports: [
-                        VdModule,
-                        MaterialModule,
-                        EditorModule,
-                        PdfViewerModule,
-                        DECLARATION
+                        VdCmsRoutingModule
                     ]
                 }]
         }] });
@@ -2660,10 +2647,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: "19.0.5", ngImport: i0, type: ContentVariableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ContentVariableService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ContentVariableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ContentVariableService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ContentVariableService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ContentVariableService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -2675,10 +2662,10 @@ class FaqService extends GenericService {
     constructor() {
         super('faq');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FaqService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FaqService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FaqService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FaqService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FaqService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FaqService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -2690,14 +2677,15 @@ class SliderService extends GenericService {
     constructor() {
         super('slider');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SliderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SliderService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: SliderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: SliderService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SliderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: SliderService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+/// <reference types="@angular/localize" />
 /*
  * Public API Surface of cdk-base
  */
@@ -2710,5 +2698,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CmsSettings, Content, ContentClient, ContentDepartment, ContentFormComponent, ContentService, ContentType, ContentVariable, ContentVariableClient, ContentVariableDepartment, ContentVariableService, Document, DocumentDialogComponent, DocumentFormBaseComponent, DocumentFormTemplate, DocumentGenericService, DocumentService, Faq, FaqClient, FaqDepartment, FaqScope, FaqService, FormIncludesResolve, ListProjectionResolve, MaterialModule, Slider, SliderService, Template, TemplateClient, TemplateDepartment, TemplateFormComponent, TemplatePreview, TemplatePreviewDialogComponent, TemplatePreviewService, TemplateService, TemplateType, VdCmsModule, VdModule, WrapTag };
+export { CmsSettings, Content, ContentClient, ContentDepartment, ContentFormComponent, ContentService, ContentType, ContentVariable, ContentVariableClient, ContentVariableDepartment, ContentVariableService, Document, DocumentDialogComponent, DocumentFormBaseComponent, DocumentFormTemplate, DocumentGenericService, DocumentListProjectionResolve, DocumentService, ExcludedColumnsResolve, ExcludedFieldsResolve, Faq, FaqClient, FaqDepartment, FaqScope, FaqService, FormIncludesResolve, FormValidationResolve, ListProjectionResolve, SettingsResolve, Slider, SliderService, Template, TemplateClient, TemplateDepartment, TemplateDocService, TemplateFormComponent, TemplatePreview, TemplatePreviewDialogComponent, TemplatePreviewService, TemplateService, TemplateType, VdCmsModule, VdCmsRoutingModule, WrapTag };
 //# sourceMappingURL=messaia-cdk-cms.mjs.map