@lenne.tech/ng-base 15.0.0-beta-3 → 16.1.0

package/{fesm2020 → fesm2022}/lenne.tech-ng-base-base-components.mjs

@@ -4,8 +4,6 @@ import * as i1 from '@angular/forms';
 import { FormControl, UntypedFormControl, UntypedFormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
-import * as i3 from '@ng-bootstrap/ng-bootstrap';
-import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { trigger, transition, query, style, animate } from '@angular/animations';
 import { Subscription } from 'rxjs';
 import * as i1$1 from '@lenne.tech/ng-base/shared';
@@ -17,14 +15,19 @@ import * as i4 from 'ngx-image-cropper';
 import { ImageCropperModule } from 'ngx-image-cropper';
 
 class InputComponent {
-    constructor() {
-        this.placeholder = '';
-        this.type = 'text';
-        this.required = false;
-        this.eyeButton = false;
-        this.objectPath = '';
-        this.enter = new EventEmitter();
-    }
+    id;
+    name;
+    infoText;
+    label;
+    placeholder = '';
+    autocomplete;
+    tabIndex;
+    control;
+    type = 'text';
+    required = false;
+    eyeButton = false;
+    objectPath = '';
+    enter = new EventEmitter();
     /**
      * If the control has a value, emit the enter event
      */
@@ -44,12 +47,12 @@ class InputComponent {
             this.type = 'password';
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: InputComponent, selector: "base-input", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", type: "type", required: "required", eyeButton: "eyeButton", objectPath: "objectPath" }, outputs: { enter: "enter" }, ngImport: i0, template: "<div class=\"form-group mb-3\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n    <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n  </div>\n  <div class=\"input-group\">\n    <input\n      [id]=\"objectPath ? objectPath + '.' + id : id\"\n      [name]=\"name\"\n      class=\"form-control\"\n      [type]=\"type\"\n      [formControl]=\"control\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n      [autocomplete]=\"autocomplete ?? null\"\n      [tabIndex]=\"tabIndex ?? null\"\n      [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n      (keyup.enter)=\"enterEvent()\"\n      [attr.aria-describedby]=\"id + 'eye-button'\"\n      [attr.data-cy]=\"name\"\n    />\n    <button\n      class=\"btn btn-outline-primary\"\n      type=\"button\"\n      [id]=\"id + 'eye-button'\"\n      (click)=\"togglePasswordType()\"\n      *ngIf=\"eyeButton\"\n    >\n      <i class=\"bi bi-eye\" *ngIf=\"type === 'password'\"></i>\n      <i class=\"bi bi-eye-slash\" *ngIf=\"type === 'text'\"></i>\n    </button>\n\n    <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n      <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n      <div *ngIf=\"control?.errors?.['minlength']\">\n        Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n        {{control.errors?.['minlength']?.requiredLength}} Zeichen.\n      </div>\n      <div *ngIf=\"control?.errors?.['maxlength']\">\n        Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n        {{control.errors?.['maxlength']?.requiredLength}} Zeichen.\n      </div>\n      <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n      <div *ngIf=\"control?.errors?.['pattern'] && type === 'tel'\">Bitte eine g\u00FCltige Telefonnummer angeben.</div>\n      <div *ngIf=\"control?.errors?.['invalidEmail']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n      <div *ngIf=\"control?.errors?.['matching']\">Die Passw\u00F6rter m\u00FCssen \u00FCberein stimmen.</div>\n      <div *ngIf=\"control?.errors?.['invalidSecurePassword']\">\n        Das Passwort ist zu unsicher. Es muss mind. 8 Zeichen lang sein, ein Gro\u00DFbustabe, ein Kleinbuchstabe, eine Zahl\n        und ein Sonderzeichen enthalten.\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}.input-group>.btn{min-width:100px}button{height:100%}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: InputComponent, selector: "base-input", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", type: "type", required: "required", eyeButton: "eyeButton", objectPath: "objectPath" }, outputs: { enter: "enter" }, ngImport: i0, template: "<div class=\"form-group mb-3\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n    <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n  </div>\n  <div class=\"input-group\">\n    <input\n      [id]=\"objectPath ? objectPath + '.' + id : id\"\n      [name]=\"name\"\n      class=\"form-control\"\n      [type]=\"type\"\n      [formControl]=\"control\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n      [autocomplete]=\"autocomplete ?? null\"\n      [tabIndex]=\"tabIndex ?? null\"\n      [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n      (keyup.enter)=\"enterEvent()\"\n      [attr.aria-describedby]=\"id + 'eye-button'\"\n    />\n    <button\n      class=\"btn btn-outline-primary\"\n      type=\"button\"\n      [id]=\"id + 'eye-button'\"\n      (click)=\"togglePasswordType()\"\n      *ngIf=\"eyeButton\"\n    >\n      <i class=\"bi bi-eye\" *ngIf=\"type === 'password'\"></i>\n      <i class=\"bi bi-eye-slash\" *ngIf=\"type === 'text'\"></i>\n    </button>\n\n    <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n      <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n      <div *ngIf=\"control?.errors?.['minlength']\">\n        Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n        {{control.errors?.['minlength']?.requiredLength}} Zeichen.\n      </div>\n      <div *ngIf=\"control?.errors?.['maxlength']\">\n        Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n        {{control.errors?.['maxlength']?.requiredLength}} Zeichen.\n      </div>\n      <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n      <div *ngIf=\"control?.errors?.['pattern'] && type === 'tel'\">Bitte eine g\u00FCltige Telefonnummer angeben.</div>\n      <div *ngIf=\"control?.errors?.['invalidEmail']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n      <div *ngIf=\"control?.errors?.['matching']\">Die Passw\u00F6rter m\u00FCssen \u00FCberein stimmen.</div>\n      <div *ngIf=\"control?.errors?.['invalidSecurePassword']\">\n        Das Passwort ist zu unsicher. Es muss mind. 8 Zeichen lang sein, ein Gro\u00DFbustabe, ein Kleinbuchstabe, eine Zahl\n        und ein Sonderzeichen enthalten.\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}.input-group>.btn{min-width:100px}button{height:100%}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: InputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-input', template: "<div class=\"form-group mb-3\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n    <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n  </div>\n  <div class=\"input-group\">\n    <input\n      [id]=\"objectPath ? objectPath + '.' + id : id\"\n      [name]=\"name\"\n      class=\"form-control\"\n      [type]=\"type\"\n      [formControl]=\"control\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n      [autocomplete]=\"autocomplete ?? null\"\n      [tabIndex]=\"tabIndex ?? null\"\n      [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n      (keyup.enter)=\"enterEvent()\"\n      [attr.aria-describedby]=\"id + 'eye-button'\"\n    />\n    <button\n      class=\"btn btn-outline-primary\"\n      type=\"button\"\n      [id]=\"id + 'eye-button'\"\n      (click)=\"togglePasswordType()\"\n      *ngIf=\"eyeButton\"\n    >\n      <i class=\"bi bi-eye\" *ngIf=\"type === 'password'\"></i>\n      <i class=\"bi bi-eye-slash\" *ngIf=\"type === 'text'\"></i>\n    </button>\n\n    <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n      <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n      <div *ngIf=\"control?.errors?.['minlength']\">\n        Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n        {{control.errors?.['minlength']?.requiredLength}} Zeichen.\n      </div>\n      <div *ngIf=\"control?.errors?.['maxlength']\">\n        Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n        {{control.errors?.['maxlength']?.requiredLength}} Zeichen.\n      </div>\n      <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n      <div *ngIf=\"control?.errors?.['pattern'] && type === 'tel'\">Bitte eine g\u00FCltige Telefonnummer angeben.</div>\n      <div *ngIf=\"control?.errors?.['invalidEmail']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n      <div *ngIf=\"control?.errors?.['matching']\">Die Passw\u00F6rter m\u00FCssen \u00FCberein stimmen.</div>\n      <div *ngIf=\"control?.errors?.['invalidSecurePassword']\">\n        Das Passwort ist zu unsicher. Es muss mind. 8 Zeichen lang sein, ein Gro\u00DFbustabe, ein Kleinbuchstabe, eine Zahl\n        und ein Sonderzeichen enthalten.\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}.input-group>.btn{min-width:100px}button{height:100%}\n"] }]
+            args: [{ selector: 'base-input', template: "<div class=\"form-group mb-3\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n    <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n  </div>\n  <div class=\"input-group\">\n    <input\n      [id]=\"objectPath ? objectPath + '.' + id : id\"\n      [name]=\"name\"\n      class=\"form-control\"\n      [type]=\"type\"\n      [formControl]=\"control\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n      [autocomplete]=\"autocomplete ?? null\"\n      [tabIndex]=\"tabIndex ?? null\"\n      [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n      (keyup.enter)=\"enterEvent()\"\n      [attr.aria-describedby]=\"id + 'eye-button'\"\n      [attr.data-cy]=\"name\"\n    />\n    <button\n      class=\"btn btn-outline-primary\"\n      type=\"button\"\n      [id]=\"id + 'eye-button'\"\n      (click)=\"togglePasswordType()\"\n      *ngIf=\"eyeButton\"\n    >\n      <i class=\"bi bi-eye\" *ngIf=\"type === 'password'\"></i>\n      <i class=\"bi bi-eye-slash\" *ngIf=\"type === 'text'\"></i>\n    </button>\n\n    <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n      <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n      <div *ngIf=\"control?.errors?.['minlength']\">\n        Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n        {{control.errors?.['minlength']?.requiredLength}} Zeichen.\n      </div>\n      <div *ngIf=\"control?.errors?.['maxlength']\">\n        Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n        {{control.errors?.['maxlength']?.requiredLength}} Zeichen.\n      </div>\n      <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n      <div *ngIf=\"control?.errors?.['pattern'] && type === 'tel'\">Bitte eine g\u00FCltige Telefonnummer angeben.</div>\n      <div *ngIf=\"control?.errors?.['invalidEmail']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n      <div *ngIf=\"control?.errors?.['matching']\">Die Passw\u00F6rter m\u00FCssen \u00FCberein stimmen.</div>\n      <div *ngIf=\"control?.errors?.['invalidSecurePassword']\">\n        Das Passwort ist zu unsicher. Es muss mind. 8 Zeichen lang sein, ein Gro\u00DFbustabe, ein Kleinbuchstabe, eine Zahl\n        und ein Sonderzeichen enthalten.\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}.input-group>.btn{min-width:100px}button{height:100%}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], name: [{
@@ -79,23 +82,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 class SelectComponent {
-    constructor() {
-        this.placeholder = '';
-        this.objectPath = '';
-        this.required = false;
-        this.multiple = false;
-        this.search = false;
-        this.options = [];
-    }
+    select;
+    id;
+    name;
+    infoText;
+    label;
+    placeholder = '';
+    objectPath = '';
+    control;
+    tabIndex;
+    required = false;
+    multiple = false;
+    search = false;
+    options = [];
     ngOnInit() {
         if (this.multiple) {
             this.select.nativeElement.setAttribute('multiple', true);
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SelectComponent, selector: "base-select", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", placeholder: "placeholder", objectPath: "objectPath", control: "control", tabIndex: "tabIndex", required: "required", multiple: "multiple", search: "search", options: "options" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], ngImport: i0, template: "<div class=\"form-group mb-3\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n    <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n  </div>\n  <select\n    #select\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    [name]=\"name\"\n    class=\"form-select\"\n    [attr.aria-label]=\"placeholder\"\n    [attr.data-live-search]=\"search\"\n    [formControl]=\"control\"\n    [required]=\"required\"\n    [tabIndex]=\"tabIndex ?? null\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  >\n    <option [ngValue]=\"null\" disabled selected>{{ placeholder }}</option>\n    <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\n      {{ option.text }}\n    </option>\n  </select>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n    <div *ngIf=\"control?.errors?.['minlength']\">\n      Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['maxlength']\">\n      Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}\n"], dependencies: [{ kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SelectComponent, selector: "base-select", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", placeholder: "placeholder", objectPath: "objectPath", control: "control", tabIndex: "tabIndex", required: "required", multiple: "multiple", search: "search", options: "options" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], ngImport: i0, template: "<div class=\"form-group mb-3\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n    <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n  </div>\n  <select\n    #select\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    [name]=\"name\"\n    class=\"form-select\"\n    [attr.aria-label]=\"placeholder\"\n    [attr.data-live-search]=\"search\"\n    [formControl]=\"control\"\n    [required]=\"required\"\n    [tabIndex]=\"tabIndex ?? null\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  >\n    <option [ngValue]=\"null\" disabled selected>{{ placeholder }}</option>\n    <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\n      {{ option.text }}\n    </option>\n  </select>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n    <div *ngIf=\"control?.errors?.['minlength']\">\n      Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['maxlength']\">\n      Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}\n"], dependencies: [{ kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'base-select', template: "<div class=\"form-group mb-3\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n    <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n  </div>\n  <select\n    #select\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    [name]=\"name\"\n    class=\"form-select\"\n    [attr.aria-label]=\"placeholder\"\n    [attr.data-live-search]=\"search\"\n    [formControl]=\"control\"\n    [required]=\"required\"\n    [tabIndex]=\"tabIndex ?? null\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  >\n    <option [ngValue]=\"null\" disabled selected>{{ placeholder }}</option>\n    <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\n      {{ option.text }}\n    </option>\n  </select>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n    <div *ngIf=\"control?.errors?.['minlength']\">\n      Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['maxlength']\">\n      Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}\n"] }]
         }], propDecorators: { select: [{
@@ -128,14 +136,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 class CheckboxComponent {
-    constructor() {
-        this.required = false;
-        this.objectPath = '';
-    }
+    id;
+    name;
+    label;
+    value;
+    control;
+    required = false;
+    objectPath = '';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: CheckboxComponent, selector: "base-checkbox", inputs: { id: "id", name: "name", label: "label", value: "value", control: "control", required: "required", objectPath: "objectPath" }, ngImport: i0, template: "<div class=\"form-check\">\n  <input\n    class=\"form-check-input\"\n    type=\"checkbox\"\n    [formControl]=\"control\"\n    [required]=\"required\"\n    [value]=\"value\"\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    [name]=\"name\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  />\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\">\n    <ng-container *ngIf=\"label\">\n      {{ label }}\n    </ng-container>\n    <ng-content></ng-content>\n  </label>\n\n  <div class=\"invalid-feedback ms-0 m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}\n"], dependencies: [{ kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CheckboxComponent, selector: "base-checkbox", inputs: { id: "id", name: "name", label: "label", value: "value", control: "control", required: "required", objectPath: "objectPath" }, ngImport: i0, template: "<div class=\"form-check\">\n  <input\n    class=\"form-check-input\"\n    type=\"checkbox\"\n    [formControl]=\"control\"\n    [required]=\"required\"\n    [value]=\"value\"\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    [name]=\"name\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  />\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\">\n    <ng-container *ngIf=\"label\">\n      {{ label }}\n    </ng-container>\n    <ng-content></ng-content>\n  </label>\n\n  <div class=\"invalid-feedback ms-0 m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}\n"], dependencies: [{ kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'base-checkbox', template: "<div class=\"form-check\">\n  <input\n    class=\"form-check-input\"\n    type=\"checkbox\"\n    [formControl]=\"control\"\n    [required]=\"required\"\n    [value]=\"value\"\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    [name]=\"name\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  />\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\">\n    <ng-container *ngIf=\"label\">\n      {{ label }}\n    </ng-container>\n    <ng-content></ng-content>\n  </label>\n\n  <div class=\"invalid-feedback ms-0 m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}\n"] }]
         }], propDecorators: { id: [{
@@ -155,14 +166,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 class TextareaComponent {
-    constructor() {
-        this.label = '';
-        this.placeholder = '';
-        this.rows = 5;
-        this.required = false;
-        this.autoHeight = true;
-        this.objectPath = '';
-    }
+    textarea;
+    id;
+    name;
+    infoText;
+    label = '';
+    placeholder = '';
+    control;
+    rows = 5;
+    required = false;
+    autoHeight = true;
+    tabIndex;
+    objectPath = '';
     ngOnChanges(changes) {
         if (changes['control'] && this.autoHeight) {
             setTimeout(() => {
@@ -188,10 +203,10 @@ class TextareaComponent {
             event.target.style.cssText = 'height:' + (event.target.scrollHeight + 5) + 'px';
         }, 0);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: TextareaComponent, selector: "base-textarea", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", placeholder: "placeholder", control: "control", rows: "rows", required: "required", autoHeight: "autoHeight", tabIndex: "tabIndex", objectPath: "objectPath" }, viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group mb-3\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n    <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n  </div>\n\n  <textarea\n    #textarea\n    class=\"form-control\"\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    [name]=\"name\"\n    [rows]=\"rows\"\n    (input)=\"adjustHeight($event)\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [tabIndex]=\"tabIndex ?? null\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  ></textarea>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n    <div *ngIf=\"control?.errors?.['minlength']\">\n      Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['maxlength']\">\n      Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n    </div>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-TextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TextareaComponent, selector: "base-textarea", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", placeholder: "placeholder", control: "control", rows: "rows", required: "required", autoHeight: "autoHeight", tabIndex: "tabIndex", objectPath: "objectPath" }, viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group mb-3\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n    <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n  </div>\n\n  <textarea\n    #textarea\n    class=\"form-control\"\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    [name]=\"name\"\n    [rows]=\"rows\"\n    (input)=\"adjustHeight($event)\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [tabIndex]=\"tabIndex ?? null\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  ></textarea>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n    <div *ngIf=\"control?.errors?.['minlength']\">\n      Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['maxlength']\">\n      Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n    </div>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'base-textarea', template: "<div class=\"form-group mb-3\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n    <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n  </div>\n\n  <textarea\n    #textarea\n    class=\"form-control\"\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    [name]=\"name\"\n    [rows]=\"rows\"\n    (input)=\"adjustHeight($event)\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [tabIndex]=\"tabIndex ?? null\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  ></textarea>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n    <div *ngIf=\"control?.errors?.['minlength']\">\n      Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['maxlength']\">\n      Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n    </div>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}\n"] }]
         }], propDecorators: { textarea: [{
@@ -228,12 +243,13 @@ const toastAnimation = trigger('toastAnimation', [
     ]),
 ]);
 class ToastComponent {
+    toastService;
+    toasts = [];
+    ToastType = ToastType;
+    subscriptions = new Subscription();
+    position = 'bottom-right';
     constructor(toastService) {
         this.toastService = toastService;
-        this.toasts = [];
-        this.ToastType = ToastType;
-        this.subscriptions = new Subscription();
-        this.position = 'bottom-right';
     }
     ngOnInit() {
         this.subscriptions.add(this.toastService.toastsAsObservable.subscribe({
@@ -272,10 +288,10 @@ class ToastComponent {
     reload() {
         location.reload();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ToastComponent, deps: [{ token: i1$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: ToastComponent, selector: "base-toast", inputs: { position: "position" }, ngImport: i0, template: "<div\n  class=\"toast-container position-fixed\"\n  [ngClass]=\"position\"\n  [@toastAnimation]=\"{ value: toasts.length, params: { x: position.includes('left') ? '-100%' : '100%' } }\"\n>\n  <div\n    class=\"toast show\"\n    role=\"alert\"\n    aria-live=\"assertive\"\n    aria-atomic=\"true\"\n    *ngFor=\"let toast of toasts\"\n    [ngClass]=\"toast.type\"\n  >\n    <div class=\"toast-header\">\n      <strong class=\"me-auto\">{{ toast?.title ?? getDefaultTitle(toast) }}</strong>\n      <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"toast\" aria-label=\"Close\"></button>\n    </div>\n    <div class=\"toast-body\">\n      {{ toast?.description ?? getDefaultDescription(toast) }}\n\n      <div class=\"mt-2\" *ngIf=\"toast?.errorCode\">\n        <code>ERROR: {{ toast.errorCode }}</code>\n      </div>\n\n      <div class=\"mt-2\" *ngIf=\"toast.type === ToastType.ERROR\">\n        <a class=\"color-secondary\" href=\"#\" (click)=\"reload()\">Seite neu laden</a>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{--base-toast-z-index: 999}.toast-container{padding:10px;z-index:var(--base-toast-z-index)}.bottom-right{bottom:0;right:0}.top-right{top:0;right:0}.bottom-left{bottom:0;left:0}.top-left{top:0;left:0}.toast{border-radius:0;border:0}.toast a{text-decoration:none;font-weight:600}.toast .toast-header{border-radius:0}.error .toast-header{background-color:var(--bs-danger);color:var(--bs-white)}.warning .toast-header{background-color:var(--bs-warning);color:var(--bs-white)}.info .toast-header{background-color:var(--bs-info);color:var(--bs-white)}.success .toast-header{background-color:var(--bs-success);color:var(--bs-white)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [toastAnimation] });
 }
-ToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToastComponent, deps: [{ token: i1$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
-ToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ToastComponent, selector: "base-toast", inputs: { position: "position" }, ngImport: i0, template: "<div\n  class=\"toast-container position-fixed\"\n  [ngClass]=\"position\"\n  [@toastAnimation]=\"{ value: toasts.length, params: { x: position.includes('left') ? '-100%' : '100%' } }\"\n>\n  <div\n    class=\"toast show\"\n    role=\"alert\"\n    aria-live=\"assertive\"\n    aria-atomic=\"true\"\n    *ngFor=\"let toast of toasts\"\n    [ngClass]=\"toast.type\"\n  >\n    <div class=\"toast-header\">\n      <strong class=\"me-auto\">{{ toast?.title ?? getDefaultTitle(toast) }}</strong>\n      <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"toast\" aria-label=\"Close\"></button>\n    </div>\n    <div class=\"toast-body\">\n      {{ toast?.description ?? getDefaultDescription(toast) }}\n\n      <div class=\"mt-2\" *ngIf=\"toast?.errorCode\">\n        <code>ERROR: {{ toast.errorCode }}</code>\n      </div>\n\n      <div class=\"mt-2\" *ngIf=\"toast.type === ToastType.ERROR\">\n        <a class=\"color-secondary\" href=\"#\" (click)=\"reload()\">Seite neu laden</a>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{--base-toast-z-index: 999}.toast-container{padding:10px;z-index:var(--base-toast-z-index)}.bottom-right{bottom:0;right:0}.top-right{top:0;right:0}.bottom-left{bottom:0;left:0}.top-left{top:0;left:0}.toast{border-radius:0;border:0}.toast a{text-decoration:none;font-weight:600}.toast .toast-header{border-radius:0}.error .toast-header{background-color:var(--bs-danger);color:var(--bs-white)}.warning .toast-header{background-color:var(--bs-warning);color:var(--bs-white)}.info .toast-header{background-color:var(--bs-info);color:var(--bs-white)}.success .toast-header{background-color:var(--bs-success);color:var(--bs-white)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [toastAnimation] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToastComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
             args: [{ selector: 'base-toast', animations: [toastAnimation], template: "<div\n  class=\"toast-container position-fixed\"\n  [ngClass]=\"position\"\n  [@toastAnimation]=\"{ value: toasts.length, params: { x: position.includes('left') ? '-100%' : '100%' } }\"\n>\n  <div\n    class=\"toast show\"\n    role=\"alert\"\n    aria-live=\"assertive\"\n    aria-atomic=\"true\"\n    *ngFor=\"let toast of toasts\"\n    [ngClass]=\"toast.type\"\n  >\n    <div class=\"toast-header\">\n      <strong class=\"me-auto\">{{ toast?.title ?? getDefaultTitle(toast) }}</strong>\n      <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"toast\" aria-label=\"Close\"></button>\n    </div>\n    <div class=\"toast-body\">\n      {{ toast?.description ?? getDefaultDescription(toast) }}\n\n      <div class=\"mt-2\" *ngIf=\"toast?.errorCode\">\n        <code>ERROR: {{ toast.errorCode }}</code>\n      </div>\n\n      <div class=\"mt-2\" *ngIf=\"toast.type === ToastType.ERROR\">\n        <a class=\"color-secondary\" href=\"#\" (click)=\"reload()\">Seite neu laden</a>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{--base-toast-z-index: 999}.toast-container{padding:10px;z-index:var(--base-toast-z-index)}.bottom-right{bottom:0;right:0}.top-right{top:0;right:0}.bottom-left{bottom:0;left:0}.top-left{top:0;left:0}.toast{border-radius:0;border:0}.toast a{text-decoration:none;font-weight:600}.toast .toast-header{border-radius:0}.error .toast-header{background-color:var(--bs-danger);color:var(--bs-white)}.warning .toast-header{background-color:var(--bs-warning);color:var(--bs-white)}.info .toast-header{background-color:var(--bs-info);color:var(--bs-white)}.success .toast-header{background-color:var(--bs-success);color:var(--bs-white)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ToastService }]; }, propDecorators: { position: [{
@@ -283,16 +299,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 class TagsComponent {
-    constructor() {
-        this.label = '';
-        this.placeholder = '';
-        this.custom = true;
-        this.removeByKey = true;
-        this.required = false;
-        this.objectPath = '';
-        this.validators = [];
-        this.inputValue = '';
-    }
+    id;
+    name;
+    infoText;
+    label = '';
+    placeholder = '';
+    autocomplete;
+    tabIndex;
+    control;
+    options;
+    custom = true;
+    removeByKey = true;
+    required = false;
+    objectPath = '';
+    validators = [];
+    inputValue = '';
+    selectedElement;
     /**
      * Convert id into text field
      */
@@ -458,12 +480,12 @@ class TagsComponent {
             }, 250);
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: TagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: TagsComponent, selector: "base-tags", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", options: "options", custom: "custom", removeByKey: "removeByKey", required: "required", objectPath: "objectPath", validators: "validators" }, ngImport: i0, template: "<div class=\"form-group position-relative\" *ngIf=\"control\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n    <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n  </div>\n\n  <div class=\"tag-wrapper\" *ngIf=\"control?.value\">\n    <div class=\"tag\" *ngFor=\"let tag of control?.value\">\n      {{ getReadableTag(tag) }}\n      <span (click)=\"removeTag(tag)\" data-cy=\"input-tags-item-remove\"><i class=\"bi bi-x-circle\"></i></span>\n    </div>\n  </div>\n  <input [formControl]=\"control\" hidden />\n  <input\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n    [(ngModel)]=\"inputValue\"\n    [autocomplete]=\"autocomplete ?? null\"\n    [tabIndex]=\"tabIndex ?? null\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onFocus()\"\n    type=\"text\"\n    class=\"form-control\"\n    (keyup)=\"enterKey($event)\"\n    [attr.data-cy]=\"'input-tags-field'\"\n  />\n\n  <div class=\"tag-options\" *ngIf=\"options && selectedElement\">\n    <div class=\"tag-option-item\" *ngFor=\"let option of filterOptions()\" (click)=\"addTag(option?.text, true, true)\">\n      {{ option?.text }}\n    </div>\n  </div>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n    <div *ngIf=\"control?.errors?.['invalidReference'] && inputValue\">\n      {{ inputValue }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.\n    </div>\n    <div *ngIf=\"control?.errors?.['email']\">Bitte gib eine g\u00FCltige E-Mail Adresse ein.</div>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}.tag-options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999;max-height:200px;overflow-y:scroll}.tag-options .tag-option-item{padding:10px;cursor:pointer}.tag-options .tag-option-item:hover{color:var(--bs-primary)}.tag-wrapper{display:flex;flex-direction:row;justify-content:flex-start;column-gap:10px;row-gap:10px;flex-wrap:wrap;margin-bottom:10px;position:relative}.tag-wrapper .tag{background-color:var(--bs-light);color:var(--bs-dark);padding:10px 15px;font-style:normal;font-weight:300;font-size:14px;line-height:140%}.tag-wrapper .tag span{margin-left:20px;cursor:pointer}.tag-wrapper .tag span .bi{color:var(--bs-black)}.tag-wrapper .tag span .bi:before{vertical-align:-.175em}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-TagsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TagsComponent, selector: "base-tags", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", options: "options", custom: "custom", removeByKey: "removeByKey", required: "required", objectPath: "objectPath", validators: "validators" }, ngImport: i0, template: "<div class=\"form-group position-relative\" *ngIf=\"control\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n    <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n  </div>\n\n  <div class=\"tag-wrapper\" *ngIf=\"control?.value\">\n    <div class=\"tag\" *ngFor=\"let tag of control?.value\">\n      {{ getReadableTag(tag) }}\n      <span (click)=\"removeTag(tag)\"><i class=\"bi bi-x-circle\"></i></span>\n    </div>\n  </div>\n  <input [formControl]=\"control\" hidden />\n  <input\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n    [(ngModel)]=\"inputValue\"\n    [autocomplete]=\"autocomplete ?? null\"\n    [tabIndex]=\"tabIndex ?? null\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onFocus()\"\n    type=\"text\"\n    class=\"form-control\"\n    (keyup)=\"enterKey($event)\"\n  />\n\n  <div class=\"tag-options\" *ngIf=\"options && selectedElement\">\n    <div class=\"tag-option-item\" *ngFor=\"let option of filterOptions()\" (click)=\"addTag(option?.text, true, true)\">\n      {{ option?.text }}\n    </div>\n  </div>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n    <div *ngIf=\"control?.errors?.['invalidReference'] && inputValue\">\n      {{ inputValue }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.\n    </div>\n    <div *ngIf=\"control?.errors?.['email']\">Bitte gib eine g\u00FCltige E-Mail Adresse ein.</div>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}.tag-options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999;max-height:200px;overflow-y:scroll}.tag-options .tag-option-item{padding:10px;cursor:pointer}.tag-options .tag-option-item:hover{color:var(--bs-primary)}.tag-wrapper{display:flex;flex-direction:row;justify-content:flex-start;column-gap:10px;row-gap:10px;flex-wrap:wrap;margin-bottom:10px;position:relative}.tag-wrapper .tag{background-color:var(--bs-light);color:var(--bs-dark);padding:10px 15px;font-style:normal;font-weight:300;font-size:14px;line-height:140%}.tag-wrapper .tag span{margin-left:20px;cursor:pointer}.tag-wrapper .tag span .bi{color:var(--bs-black)}.tag-wrapper .tag span .bi:before{vertical-align:-.175em}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: TagsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-tags', template: "<div class=\"form-group position-relative\" *ngIf=\"control\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n    <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n  </div>\n\n  <div class=\"tag-wrapper\" *ngIf=\"control?.value\">\n    <div class=\"tag\" *ngFor=\"let tag of control?.value\">\n      {{ getReadableTag(tag) }}\n      <span (click)=\"removeTag(tag)\"><i class=\"bi bi-x-circle\"></i></span>\n    </div>\n  </div>\n  <input [formControl]=\"control\" hidden />\n  <input\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n    [(ngModel)]=\"inputValue\"\n    [autocomplete]=\"autocomplete ?? null\"\n    [tabIndex]=\"tabIndex ?? null\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onFocus()\"\n    type=\"text\"\n    class=\"form-control\"\n    (keyup)=\"enterKey($event)\"\n  />\n\n  <div class=\"tag-options\" *ngIf=\"options && selectedElement\">\n    <div class=\"tag-option-item\" *ngFor=\"let option of filterOptions()\" (click)=\"addTag(option?.text, true, true)\">\n      {{ option?.text }}\n    </div>\n  </div>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n    <div *ngIf=\"control?.errors?.['invalidReference'] && inputValue\">\n      {{ inputValue }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.\n    </div>\n    <div *ngIf=\"control?.errors?.['email']\">Bitte gib eine g\u00FCltige E-Mail Adresse ein.</div>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}.tag-options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999;max-height:200px;overflow-y:scroll}.tag-options .tag-option-item{padding:10px;cursor:pointer}.tag-options .tag-option-item:hover{color:var(--bs-primary)}.tag-wrapper{display:flex;flex-direction:row;justify-content:flex-start;column-gap:10px;row-gap:10px;flex-wrap:wrap;margin-bottom:10px;position:relative}.tag-wrapper .tag{background-color:var(--bs-light);color:var(--bs-dark);padding:10px 15px;font-style:normal;font-weight:300;font-size:14px;line-height:140%}.tag-wrapper .tag span{margin-left:20px;cursor:pointer}.tag-wrapper .tag span .bi{color:var(--bs-black)}.tag-wrapper .tag span .bi:before{vertical-align:-.175em}\n"] }]
+            args: [{ selector: 'base-tags', template: "<div class=\"form-group position-relative\" *ngIf=\"control\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n    <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n  </div>\n\n  <div class=\"tag-wrapper\" *ngIf=\"control?.value\">\n    <div class=\"tag\" *ngFor=\"let tag of control?.value\">\n      {{ getReadableTag(tag) }}\n      <span (click)=\"removeTag(tag)\" data-cy=\"input-tags-item-remove\"><i class=\"bi bi-x-circle\"></i></span>\n    </div>\n  </div>\n  <input [formControl]=\"control\" hidden />\n  <input\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n    [(ngModel)]=\"inputValue\"\n    [autocomplete]=\"autocomplete ?? null\"\n    [tabIndex]=\"tabIndex ?? null\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onFocus()\"\n    type=\"text\"\n    class=\"form-control\"\n    (keyup)=\"enterKey($event)\"\n    [attr.data-cy]=\"'input-tags-field'\"\n  />\n\n  <div class=\"tag-options\" *ngIf=\"options && selectedElement\">\n    <div class=\"tag-option-item\" *ngFor=\"let option of filterOptions()\" (click)=\"addTag(option?.text, true, true)\">\n      {{ option?.text }}\n    </div>\n  </div>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n    <div *ngIf=\"control?.errors?.['invalidReference'] && inputValue\">\n      {{ inputValue }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.\n    </div>\n    <div *ngIf=\"control?.errors?.['email']\">Bitte gib eine g\u00FCltige E-Mail Adresse ein.</div>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}.tag-options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999;max-height:200px;overflow-y:scroll}.tag-options .tag-option-item{padding:10px;cursor:pointer}.tag-options .tag-option-item:hover{color:var(--bs-primary)}.tag-wrapper{display:flex;flex-direction:row;justify-content:flex-start;column-gap:10px;row-gap:10px;flex-wrap:wrap;margin-bottom:10px;position:relative}.tag-wrapper .tag{background-color:var(--bs-light);color:var(--bs-dark);padding:10px 15px;font-style:normal;font-weight:300;font-size:14px;line-height:140%}.tag-wrapper .tag span{margin-left:20px;cursor:pointer}.tag-wrapper .tag span .bi{color:var(--bs-black)}.tag-wrapper .tag span .bi:before{vertical-align:-.175em}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], name: [{
@@ -495,13 +517,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 class LoadingBarComponent {
+    ngZone;
+    changeDetectorRef;
+    loaderService;
+    manuallyLoading = false;
+    loading = false;
+    subscription = new Subscription();
     constructor(ngZone, changeDetectorRef, loaderService) {
         this.ngZone = ngZone;
         this.changeDetectorRef = changeDetectorRef;
         this.loaderService = loaderService;
-        this.manuallyLoading = false;
-        this.loading = false;
-        this.subscription = new Subscription();
     }
     ngOnInit() {
         this.ngZone.runOutsideAngular(() => {
@@ -514,10 +539,10 @@ class LoadingBarComponent {
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: LoadingBarComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1$1.LoaderService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: LoadingBarComponent, selector: "base-loading-bar", inputs: { manuallyLoading: "manuallyLoading" }, ngImport: i0, template: "<div class=\"slider\" *ngIf=\"loading || manuallyLoading\">\n  <div class=\"line\"></div>\n  <div class=\"subline inc\"></div>\n  <div class=\"subline dec\"></div>\n</div>\n", styles: [":host{--base-loading-bar-color: #f28c18;--base-loading-bar-height: 5px;--base-loading-bar-z-index: 999999999}.slider{position:fixed;left:0;right:0;height:var(--base-loading-bar-height);overflow-x:hidden;z-index:var(--base-loading-bar-z-index);background-color:#fff}.line{position:absolute;opacity:.6;background:var(--base-loading-bar-color);width:150%;height:var(--base-loading-bar-height)}.subline{position:absolute;background:var(--base-loading-bar-color);height:var(--base-loading-bar-height)}.inc{animation:increase 2s infinite}.dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-LoadingBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LoadingBarComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1$1.LoaderService }], target: i0.ɵɵFactoryTarget.Component });
-LoadingBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: LoadingBarComponent, selector: "base-loading-bar", inputs: { manuallyLoading: "manuallyLoading" }, ngImport: i0, template: "<div class=\"slider\" *ngIf=\"loading || manuallyLoading\">\n  <div class=\"line\"></div>\n  <div class=\"subline inc\"></div>\n  <div class=\"subline dec\"></div>\n</div>\n", styles: [":host{--base-loading-bar-color: #f28c18;--base-loading-bar-height: 5px;--base-loading-bar-z-index: 999999999}.slider{position:fixed;left:0;right:0;height:var(--base-loading-bar-height);overflow-x:hidden;z-index:var(--base-loading-bar-z-index);background-color:#fff}.line{position:absolute;opacity:.6;background:var(--base-loading-bar-color);width:150%;height:var(--base-loading-bar-height)}.subline{position:absolute;background:var(--base-loading-bar-color);height:var(--base-loading-bar-height)}.inc{animation:increase 2s infinite}.dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LoadingBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: LoadingBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'base-loading-bar', template: "<div class=\"slider\" *ngIf=\"loading || manuallyLoading\">\n  <div class=\"line\"></div>\n  <div class=\"subline inc\"></div>\n  <div class=\"subline dec\"></div>\n</div>\n", styles: [":host{--base-loading-bar-color: #f28c18;--base-loading-bar-height: 5px;--base-loading-bar-z-index: 999999999}.slider{position:fixed;left:0;right:0;height:var(--base-loading-bar-height);overflow-x:hidden;z-index:var(--base-loading-bar-z-index);background-color:#fff}.line{position:absolute;opacity:.6;background:var(--base-loading-bar-color);width:150%;height:var(--base-loading-bar-height)}.subline{position:absolute;background:var(--base-loading-bar-color);height:var(--base-loading-bar-height)}.inc{animation:increase 2s infinite}.dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1$1.LoaderService }]; }, propDecorators: { manuallyLoading: [{
@@ -525,10 +550,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 class SkeletonLoaderComponent {
-    constructor() {
-        this.count = 1;
-        this.size = 18;
-    }
+    type;
+    count = 1;
+    size = 18;
     convertToArray(value) {
         if (!value) {
             return [];
@@ -539,10 +563,10 @@ class SkeletonLoaderComponent {
         }
         return res;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SkeletonLoaderComponent, selector: "base-skeleton-loader", inputs: { type: "type", count: "count", size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"type\" [ngSwitch]=\"type\">\n  <div *ngSwitchCase=\"'LINE'\">\n    <div class=\"line-loader-wrapper\">\n      <div class=\"line-loader\" *ngFor=\"let key of convertToArray(count)\"></div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'RECTANGLE'\">\n    <div class=\"line-rectangle\" [ngStyle]=\"{ height: size + 'px' }\"></div>\n  </div>\n\n  <div *ngSwitchCase=\"'AVATAR'\">\n    <div class=\"line-avatar\" [ngStyle]=\"{ height: size + 'px', width: size + 'px' }\"></div>\n  </div>\n</ng-container>\n", styles: ["@keyframes shine{to{background-position-x:-200%}}.line-loader-wrapper>:not(:first-of-type){margin-top:10px}.line-loader-wrapper .line-loader{background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;animation:1.5s shine linear infinite;height:18px;border-radius:5px}.line-rectangle{background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;animation:1.5s shine linear infinite;border-radius:5px}.line-avatar{background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;animation:1.5s shine linear infinite;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
 }
-SkeletonLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkeletonLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkeletonLoaderComponent, selector: "base-skeleton-loader", inputs: { type: "type", count: "count", size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"type\" [ngSwitch]=\"type\">\n  <div *ngSwitchCase=\"'LINE'\">\n    <div class=\"line-loader-wrapper\">\n      <div class=\"line-loader\" *ngFor=\"let key of convertToArray(count)\"></div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'RECTANGLE'\">\n    <div class=\"line-rectangle\" [ngStyle]=\"{ height: size + 'px' }\"></div>\n  </div>\n\n  <div *ngSwitchCase=\"'AVATAR'\">\n    <div class=\"line-avatar\" [ngStyle]=\"{ height: size + 'px', width: size + 'px' }\"></div>\n  </div>\n</ng-container>\n", styles: ["@keyframes shine{to{background-position-x:-200%}}.line-loader-wrapper>:not(:first-of-type){margin-top:10px}.line-loader-wrapper .line-loader{background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;animation:1.5s shine linear infinite;height:18px;border-radius:5px}.line-rectangle{background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;animation:1.5s shine linear infinite;border-radius:5px}.line-avatar{background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;animation:1.5s shine linear infinite;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkeletonLoaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SkeletonLoaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'base-skeleton-loader', template: "<ng-container *ngIf=\"type\" [ngSwitch]=\"type\">\n  <div *ngSwitchCase=\"'LINE'\">\n    <div class=\"line-loader-wrapper\">\n      <div class=\"line-loader\" *ngFor=\"let key of convertToArray(count)\"></div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'RECTANGLE'\">\n    <div class=\"line-rectangle\" [ngStyle]=\"{ height: size + 'px' }\"></div>\n  </div>\n\n  <div *ngSwitchCase=\"'AVATAR'\">\n    <div class=\"line-avatar\" [ngStyle]=\"{ height: size + 'px', width: size + 'px' }\"></div>\n  </div>\n</ng-container>\n", styles: ["@keyframes shine{to{background-position-x:-200%}}.line-loader-wrapper>:not(:first-of-type){margin-top:10px}.line-loader-wrapper .line-loader{background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;animation:1.5s shine linear infinite;height:18px;border-radius:5px}.line-rectangle{background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;animation:1.5s shine linear infinite;border-radius:5px}.line-avatar{background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;animation:1.5s shine linear infinite;border-radius:50%}\n"] }]
         }], propDecorators: { type: [{
@@ -554,23 +578,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 class BreadcrumbComponent {
+    breadcrumbService;
+    breadcrumbs$;
     constructor(breadcrumbService) {
         this.breadcrumbService = breadcrumbService;
         this.breadcrumbs$ = breadcrumbService.breadcrumbsObservable;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i1$1.BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: BreadcrumbComponent, selector: "base-breadcrumb", ngImport: i0, template: "<ul class=\"pt-3\">\n  <li *ngFor=\"let breadcrumb of breadcrumbs$ | async\">\n    <a [routerLink]=\"breadcrumb.url\">{{ breadcrumb.label }}</a>\n  </li>\n</ul>\n", styles: ["ul{list-style:none;margin:0;padding:0}ul li{display:inline}ul li:before{content:\"|\";margin:0 6px}ul li:first-child:before{content:\"\";margin:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
 }
-BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i1$1.BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component });
-BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: BreadcrumbComponent, selector: "base-breadcrumb", ngImport: i0, template: "<ul class=\"pt-3\">\n  <li *ngFor=\"let breadcrumb of breadcrumbs$ | async\">\n    <a [routerLink]=\"breadcrumb.url\">{{ breadcrumb.label }}</a>\n  </li>\n</ul>\n", styles: ["ul{list-style:none;margin:0;padding:0}ul li{display:inline}ul li:before{content:\"|\";margin:0 6px}ul li:first-child:before{content:\"\";margin:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'base-breadcrumb', template: "<ul class=\"pt-3\">\n  <li *ngFor=\"let breadcrumb of breadcrumbs$ | async\">\n    <a [routerLink]=\"breadcrumb.url\">{{ breadcrumb.label }}</a>\n  </li>\n</ul>\n", styles: ["ul{list-style:none;margin:0;padding:0}ul li{display:inline}ul li:before{content:\"|\";margin:0 6px}ul li:first-child:before{content:\"\";margin:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.BreadcrumbService }]; } });
 
 class SortDirective {
+    renderer;
+    targetElem;
+    baseSort;
+    baseSorted = new EventEmitter();
     constructor(renderer, targetElem, document) {
         this.renderer = renderer;
         this.targetElem = targetElem;
-        this.baseSorted = new EventEmitter();
     }
     /**
      * Sorts columns on click
@@ -599,10 +628,10 @@ class SortDirective {
             elem.classList.add('desc');
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SortDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: SortDirective, selector: "[baseSort]", inputs: { baseSort: "baseSort" }, outputs: { baseSorted: "baseSorted" }, host: { listeners: { "click": "sortColumn()" } }, ngImport: i0 });
 }
-SortDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SortDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
-SortDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: SortDirective, selector: "[baseSort]", inputs: { baseSort: "baseSort" }, outputs: { baseSorted: "baseSorted" }, host: { listeners: { "click": "sortColumn()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SortDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SortDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[baseSort]',
@@ -624,14 +653,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * See https://stackblitz.com/edit/angular-custom-context-menu
  */
 class ContextMenuDirective {
+    el;
+    contextMenuData;
+    ltContextMenu;
+    xGap = 0;
+    yGap = 0;
+    overflowSpace = 10;
+    selectors = '*';
+    clickedElement = null;
+    previousDisplayStatus = null;
     constructor(el) {
         this.el = el;
-        this.xGap = 0;
-        this.yGap = 0;
-        this.overflowSpace = 10;
-        this.selectors = '*';
-        this.clickedElement = null;
-        this.previousDisplayStatus = null;
     }
     ngOnInit() {
         if (this.ltContextMenu) {
@@ -700,10 +732,10 @@ class ContextMenuDirective {
             cm.style['pointer-events'] = 'none';
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ContextMenuDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: ContextMenuDirective, selector: "[ltContextMenu]", inputs: { contextMenuData: "contextMenuData", ltContextMenu: "ltContextMenu", xGap: "xGap", yGap: "yGap", overflowSpace: "overflowSpace", selectors: "selectors" }, outputs: { clickedElement: "clickedElement" }, exportAs: ["contextMenuData"], ngImport: i0 });
 }
-ContextMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ContextMenuDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ContextMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: ContextMenuDirective, selector: "[ltContextMenu]", inputs: { contextMenuData: "contextMenuData", ltContextMenu: "ltContextMenu", xGap: "xGap", yGap: "yGap", overflowSpace: "overflowSpace", selectors: "selectors" }, outputs: { clickedElement: "clickedElement" }, exportAs: ["contextMenuData"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ContextMenuDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ContextMenuDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ltContextMenu]',
@@ -733,10 +765,10 @@ class StopPropagationDirective {
     onClick(event) {
         event.stopPropagation();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: StopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: StopPropagationDirective, selector: "[baseStopPropagation]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
 }
-StopPropagationDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: StopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-StopPropagationDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: StopPropagationDirective, selector: "[baseStopPropagation]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: StopPropagationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: StopPropagationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[baseStopPropagation]',
@@ -747,32 +779,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 class UploadImageComponent {
+    httpClient;
+    authService;
+    fileService;
+    toastService;
+    fileInput;
+    id;
+    name;
+    infoText;
+    label;
+    supportText = 'Supports: JPEG, JPG, PNG';
+    required = false;
+    defaultDragText = 'Drag & Drop';
+    defaultReleaseText = 'Release to Upload';
+    preButtonText = 'or';
+    buttonText = 'browse';
+    validExtensions = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp'];
+    control;
+    url = 'http://localhost:3000';
+    uploadPath = '/files/upload';
+    deletePath = '/files/';
+    path = '/files/';
+    compressOptions;
+    maxSize;
+    uploadDirectly = false;
+    croppingImage = false;
+    croppingOptions;
+    objectPath;
+    mode = 'file';
+    imageUploaded = new EventEmitter();
+    imageDeleted = new EventEmitter();
+    fileChanged = new EventEmitter();
+    dragActive = false;
+    dragText = 'Drag & Drop';
+    selectedFile;
+    croppedFile;
+    fileUrl;
+    loading = false;
+    croppedInProgress = false;
+    fileEvent;
+    cOptions;
     constructor(httpClient, authService, fileService, toastService) {
         this.httpClient = httpClient;
         this.authService = authService;
         this.fileService = fileService;
         this.toastService = toastService;
-        this.supportText = 'Supports: JPEG, JPG, PNG';
-        this.required = false;
-        this.defaultDragText = 'Drag & Drop';
-        this.defaultReleaseText = 'Release to Upload';
-        this.preButtonText = 'or';
-        this.buttonText = 'browse';
-        this.validExtensions = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp'];
-        this.url = 'http://localhost:3000';
-        this.uploadPath = '/files/upload';
-        this.deletePath = '/files/';
-        this.path = '/files/';
-        this.uploadDirectly = false;
-        this.croppingImage = false;
-        this.mode = 'file';
-        this.imageUploaded = new EventEmitter();
-        this.imageDeleted = new EventEmitter();
-        this.fileChanged = new EventEmitter();
-        this.dragActive = false;
-        this.dragText = 'Drag & Drop';
-        this.loading = false;
-        this.croppedInProgress = false;
     }
     ngOnInit() {
         // Set default options for cropping
@@ -998,10 +1049,10 @@ class UploadImageComponent {
             description: 'Es ist ein Fehler aufgetreten. Bitte probieren Sie es später erneut oder wenden Sie sich an den Support.',
         }, 3500);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: UploadImageComponent, deps: [{ token: i1$2.HttpClient }, { token: i1$1.AuthService }, { token: i1$1.FileService }, { token: i1$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: UploadImageComponent, selector: "base-upload-image", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", supportText: "supportText", required: "required", defaultDragText: "defaultDragText", defaultReleaseText: "defaultReleaseText", preButtonText: "preButtonText", buttonText: "buttonText", validExtensions: "validExtensions", control: "control", url: "url", uploadPath: "uploadPath", deletePath: "deletePath", path: "path", compressOptions: "compressOptions", maxSize: "maxSize", uploadDirectly: "uploadDirectly", croppingImage: "croppingImage", croppingOptions: "croppingOptions", objectPath: "objectPath", mode: "mode" }, outputs: { imageUploaded: "imageUploaded", imageDeleted: "imageDeleted", fileChanged: "fileChanged" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"form-group mt-3\" [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n    <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n  </div>\n\n  <div\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    class=\"drag-area\"\n    (dragover)=\"dragOver($event)\"\n    (dragleave)=\"dragLeave($event)\"\n    (drop)=\"drop($event)\"\n    [ngClass]=\"{ active: dragActive, pointer: !loading, 'is-invalid': control?.invalid && control?.touched }\"\n    (click)=\"!croppedInProgress && !loading && fileInput.click()\"\n  >\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n      <div class=\"spinner-border text-primary\" role=\"status\">\n        <span class=\"visually-hidden\">Loading...</span>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"selectedFile && !fileEvent && !croppedInProgress && !loading\">\n      <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile()\" baseStopPropagation>L\u00F6schen</button>\n    </ng-container>\n\n    <ng-container *ngIf=\"control?.value && !fileEvent && !selectedFile && !loading && !croppedInProgress\">\n      <img [src]=\"control?.value.startsWith('data:') ? control?.value : url + path + control?.value\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\" baseStopPropagation>\n        L\u00F6schen\n      </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"!selectedFile && !control?.value && !loading && !fileEvent\">\n      <div class=\"icon\">\n        <i class=\"bi bi-images\"></i>\n      </div>\n\n      <span class=\"header\">{{ dragText }}</span>\n      <span class=\"header\"\n        >{{ preButtonText }}\n        <span class=\"button\" (click)=\"fileInput.click()\" baseStopPropagation>{{ buttonText }}</span></span\n      >\n      <span class=\"support\" [innerText]=\"supportText\"></span>\n    </ng-container>\n\n    <input type=\"file\" (change)=\"selectFile($event)\" [attr.accept]=\"validExtensions?.join(',')\" hidden #fileInput />\n\n    <ng-container *ngIf=\"croppedInProgress && fileEvent\">\n      <image-cropper\n        [imageChangedEvent]=\"fileEvent\"\n        [maintainAspectRatio]=\"cOptions.maintainAspectRatio\"\n        [aspectRatio]=\"cOptions.aspectRatio\"\n        [alignImage]=\"cOptions.alignImage\"\n        [resizeToWidth]=\"cOptions.resizeToWidth\"\n        [resizeToHeight]=\"cOptions.resizeToHeight\"\n        [autoCrop]=\"cOptions.autoCrop\"\n        [imageQuality]=\"cOptions.imageQuality\"\n        [onlyScaleDown]=\"cOptions.onlyScaleDown\"\n        [format]=\"cOptions.format\"\n        (imageCropped)=\"imageCropped($event, fileEvent)\"\n        (loadImageFailed)=\"loadImageFailed()\"\n      ></image-cropper>\n      <button class=\"btn btn-primary mt-2\" type=\"button\" (click)=\"finishedCropping()\" baseStopPropagation>\n        Zuschneiden\n      </button>\n    </ng-container>\n  </div>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n  </div>\n</div>\n", styles: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.is-invalid .drag-area{border-color:var(--bs-danger)}.is-invalid .invalid-feedback{display:block}.required:after{content:\" *\"}.drag-area{height:var(--base-upload-image-area-height);border:2px dashed var(--base-upload-image-area-border-color);background-color:var(--base-upload-image-area-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;margin:10px auto;padding:20px}.drag-area img{height:100%;max-height:280px;max-width:100%;object-fit:scale-down}.drag-area .btn-danger{margin-top:auto}.drag-area .icon{font-size:50px;color:var(--bs-primary)}.drag-area .header{font-size:20px;font-weight:500}.drag-area .support{font-size:12px;color:#e1e1e1;margin:10px 0 15px}.drag-area .button{font-size:20px;font-weight:500;color:var(--bs-primary);cursor:pointer}.active{border:2px solid var(--bs-primary)}.pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "directive", type: StopPropagationDirective, selector: "[baseStopPropagation]" }] });
 }
-UploadImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UploadImageComponent, deps: [{ token: i1$2.HttpClient }, { token: i1$1.AuthService }, { token: i1$1.FileService }, { token: i1$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
-UploadImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: UploadImageComponent, selector: "base-upload-image", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", supportText: "supportText", required: "required", defaultDragText: "defaultDragText", defaultReleaseText: "defaultReleaseText", preButtonText: "preButtonText", buttonText: "buttonText", validExtensions: "validExtensions", control: "control", url: "url", uploadPath: "uploadPath", deletePath: "deletePath", path: "path", compressOptions: "compressOptions", maxSize: "maxSize", uploadDirectly: "uploadDirectly", croppingImage: "croppingImage", croppingOptions: "croppingOptions", objectPath: "objectPath", mode: "mode" }, outputs: { imageUploaded: "imageUploaded", imageDeleted: "imageDeleted", fileChanged: "fileChanged" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"form-group mt-3\" [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n    <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n  </div>\n\n  <div\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    class=\"drag-area\"\n    (dragover)=\"dragOver($event)\"\n    (dragleave)=\"dragLeave($event)\"\n    (drop)=\"drop($event)\"\n    [ngClass]=\"{ active: dragActive, pointer: !loading, 'is-invalid': control?.invalid && control?.touched }\"\n    (click)=\"!croppedInProgress && !loading && fileInput.click()\"\n  >\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n      <div class=\"spinner-border text-primary\" role=\"status\">\n        <span class=\"visually-hidden\">Loading...</span>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"selectedFile && !fileEvent && !croppedInProgress && !loading\">\n      <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile()\" baseStopPropagation>L\u00F6schen</button>\n    </ng-container>\n\n    <ng-container *ngIf=\"control?.value && !fileEvent && !selectedFile && !loading && !croppedInProgress\">\n      <img [src]=\"control?.value.startsWith('data:') ? control?.value : url + path + control?.value\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\" baseStopPropagation>\n        L\u00F6schen\n      </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"!selectedFile && !control?.value && !loading && !fileEvent\">\n      <div class=\"icon\">\n        <i class=\"bi bi-images\"></i>\n      </div>\n\n      <span class=\"header\">{{ dragText }}</span>\n      <span class=\"header\"\n        >{{ preButtonText }}\n        <span class=\"button\" (click)=\"fileInput.click()\" baseStopPropagation>{{ buttonText }}</span></span\n      >\n      <span class=\"support\" [innerText]=\"supportText\"></span>\n    </ng-container>\n\n    <input type=\"file\" (change)=\"selectFile($event)\" [attr.accept]=\"validExtensions?.join(',')\" hidden #fileInput />\n\n    <ng-container *ngIf=\"croppedInProgress && fileEvent\">\n      <image-cropper\n        [imageChangedEvent]=\"fileEvent\"\n        [maintainAspectRatio]=\"cOptions.maintainAspectRatio\"\n        [aspectRatio]=\"cOptions.aspectRatio\"\n        [alignImage]=\"cOptions.alignImage\"\n        [resizeToWidth]=\"cOptions.resizeToWidth\"\n        [resizeToHeight]=\"cOptions.resizeToHeight\"\n        [autoCrop]=\"cOptions.autoCrop\"\n        [imageQuality]=\"cOptions.imageQuality\"\n        [onlyScaleDown]=\"cOptions.onlyScaleDown\"\n        [format]=\"cOptions.format\"\n        (imageCropped)=\"imageCropped($event, fileEvent)\"\n        (loadImageFailed)=\"loadImageFailed()\"\n      ></image-cropper>\n      <button class=\"btn btn-primary mt-2\" type=\"button\" (click)=\"finishedCropping()\" baseStopPropagation>\n        Zuschneiden\n      </button>\n    </ng-container>\n  </div>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n  </div>\n</div>\n", styles: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.is-invalid .drag-area{border-color:var(--bs-danger)}.is-invalid .invalid-feedback{display:block}.required:after{content:\" *\"}.drag-area{height:var(--base-upload-image-area-height);border:2px dashed var(--base-upload-image-area-border-color);background-color:var(--base-upload-image-area-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;margin:10px auto;padding:20px}.drag-area img{height:100%;max-height:280px;max-width:100%;object-fit:scale-down}.drag-area .btn-danger{margin-top:auto}.drag-area .icon{font-size:50px;color:var(--bs-primary)}.drag-area .header{font-size:20px;font-weight:500}.drag-area .support{font-size:12px;color:#e1e1e1;margin:10px 0 15px}.drag-area .button{font-size:20px;font-weight:500;color:var(--bs-primary);cursor:pointer}.active{border:2px solid var(--bs-primary)}.pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "directive", type: i3.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[baseStopPropagation]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UploadImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: UploadImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'base-upload-image', template: "<div class=\"form-group mt-3\" [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n    <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n  </div>\n\n  <div\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    class=\"drag-area\"\n    (dragover)=\"dragOver($event)\"\n    (dragleave)=\"dragLeave($event)\"\n    (drop)=\"drop($event)\"\n    [ngClass]=\"{ active: dragActive, pointer: !loading, 'is-invalid': control?.invalid && control?.touched }\"\n    (click)=\"!croppedInProgress && !loading && fileInput.click()\"\n  >\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n      <div class=\"spinner-border text-primary\" role=\"status\">\n        <span class=\"visually-hidden\">Loading...</span>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"selectedFile && !fileEvent && !croppedInProgress && !loading\">\n      <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile()\" baseStopPropagation>L\u00F6schen</button>\n    </ng-container>\n\n    <ng-container *ngIf=\"control?.value && !fileEvent && !selectedFile && !loading && !croppedInProgress\">\n      <img [src]=\"control?.value.startsWith('data:') ? control?.value : url + path + control?.value\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\" baseStopPropagation>\n        L\u00F6schen\n      </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"!selectedFile && !control?.value && !loading && !fileEvent\">\n      <div class=\"icon\">\n        <i class=\"bi bi-images\"></i>\n      </div>\n\n      <span class=\"header\">{{ dragText }}</span>\n      <span class=\"header\"\n        >{{ preButtonText }}\n        <span class=\"button\" (click)=\"fileInput.click()\" baseStopPropagation>{{ buttonText }}</span></span\n      >\n      <span class=\"support\" [innerText]=\"supportText\"></span>\n    </ng-container>\n\n    <input type=\"file\" (change)=\"selectFile($event)\" [attr.accept]=\"validExtensions?.join(',')\" hidden #fileInput />\n\n    <ng-container *ngIf=\"croppedInProgress && fileEvent\">\n      <image-cropper\n        [imageChangedEvent]=\"fileEvent\"\n        [maintainAspectRatio]=\"cOptions.maintainAspectRatio\"\n        [aspectRatio]=\"cOptions.aspectRatio\"\n        [alignImage]=\"cOptions.alignImage\"\n        [resizeToWidth]=\"cOptions.resizeToWidth\"\n        [resizeToHeight]=\"cOptions.resizeToHeight\"\n        [autoCrop]=\"cOptions.autoCrop\"\n        [imageQuality]=\"cOptions.imageQuality\"\n        [onlyScaleDown]=\"cOptions.onlyScaleDown\"\n        [format]=\"cOptions.format\"\n        (imageCropped)=\"imageCropped($event, fileEvent)\"\n        (loadImageFailed)=\"loadImageFailed()\"\n      ></image-cropper>\n      <button class=\"btn btn-primary mt-2\" type=\"button\" (click)=\"finishedCropping()\" baseStopPropagation>\n        Zuschneiden\n      </button>\n    </ng-container>\n  </div>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n  </div>\n</div>\n", styles: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.is-invalid .drag-area{border-color:var(--bs-danger)}.is-invalid .invalid-feedback{display:block}.required:after{content:\" *\"}.drag-area{height:var(--base-upload-image-area-height);border:2px dashed var(--base-upload-image-area-border-color);background-color:var(--base-upload-image-area-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;margin:10px auto;padding:20px}.drag-area img{height:100%;max-height:280px;max-width:100%;object-fit:scale-down}.drag-area .btn-danger{margin-top:auto}.drag-area .icon{font-size:50px;color:var(--bs-primary)}.drag-area .header{font-size:20px;font-weight:500}.drag-area .support{font-size:12px;color:#e1e1e1;margin:10px 0 15px}.drag-area .button{font-size:20px;font-weight:500;color:var(--bs-primary);cursor:pointer}.active{border:2px solid var(--bs-primary)}.pointer{cursor:pointer}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: i1$1.AuthService }, { type: i1$1.FileService }, { type: i1$1.ToastService }]; }, propDecorators: { fileInput: [{
@@ -1062,23 +1113,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 class RefenceInputComponent {
+    graphQLService;
+    router;
+    id;
+    name;
+    infoText;
+    label;
+    isList = false;
+    search = true;
+    useParamAsArg = false;
+    param;
+    placeholder = '';
+    autocomplete;
+    tabIndex;
+    control;
+    required = false;
+    method = 'find';
+    fields = ['id', 'name'];
+    valueField = 'id';
+    objectPath = '';
+    nameField = 'name';
+    creationLink = '';
+    objects = [];
+    currentValue;
+    optionsForTagInput = [];
+    selectedElement;
+    subscription = new Subscription();
     constructor(graphQLService, router) {
         this.graphQLService = graphQLService;
         this.router = router;
-        this.isList = false;
-        this.search = true;
-        this.useParamAsArg = false;
-        this.placeholder = '';
-        this.required = false;
-        this.method = 'find';
-        this.fields = ['id', 'name'];
-        this.valueField = 'id';
-        this.objectPath = '';
-        this.nameField = 'name';
-        this.creationLink = '';
-        this.objects = [];
-        this.optionsForTagInput = [];
-        this.subscription = new Subscription();
     }
     async ngOnInit() {
         this.getReferences();
@@ -1266,10 +1329,10 @@ class RefenceInputComponent {
             return object[this.nameField]?.includes(this.currentValue);
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: RefenceInputComponent, deps: [{ token: i1$1.GraphQLService }, { token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: RefenceInputComponent, selector: "base-refence-input", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", isList: "isList", search: "search", useParamAsArg: "useParamAsArg", param: "param", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", required: "required", method: "method", fields: "fields", valueField: "valueField", objectPath: "objectPath", nameField: "nameField", creationLink: "creationLink" }, ngImport: i0, template: "<ng-container *ngIf=\"!isList\">\n  <div class=\"form-group mb-3\">\n    <div class=\"d-flex justify-content-between align-items-center\">\n      <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n      <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n    </div>\n\n    <div class=\"position-relative\" *ngIf=\"search\">\n      <div class=\"d-flex flex-row\">\n        <input [formControl]=\"control\" hidden />\n        <input\n          [id]=\"objectPath ? objectPath + '.' + id : id\"\n          [name]=\"name\"\n          class=\"form-control\"\n          [(ngModel)]=\"currentValue\"\n          [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onFocus()\"\n          [required]=\"required\"\n          [placeholder]=\"placeholder\"\n          [autocomplete]=\"autocomplete ?? null\"\n          [tabIndex]=\"tabIndex ?? null\"\n          (keyup)=\"enterKey($event)\"\n        />\n        <button class=\"btn btn-primary\" (click)=\"openLink()\" *ngIf=\"creationLink\">Erstellen</button>\n      </div>\n      <div class=\"options\" *ngIf=\"objects && selectedElement\">\n        <div class=\"option-item\" *ngFor=\"let object of filterOptions()\" (click)=\"set(object[valueField])\">\n          {{ prepareNameField(object) }}\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"!search\">\n      <div class=\"d-flex flex-row\">\n        <select\n          [id]=\"objectPath ? objectPath + '.' + id : id\"\n          [name]=\"name\"\n          class=\"form-select\"\n          [attr.aria-label]=\"placeholder\"\n          [formControl]=\"control\"\n          [required]=\"required\"\n          [tabIndex]=\"tabIndex ?? null\"\n          [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n        >\n          <option [ngValue]=\"null\" selected>{{ placeholder }}</option>\n          <option *ngFor=\"let object of objects\" [ngValue]=\"object[valueField]\">\n            {{ prepareNameField(object) }}\n          </option>\n        </select>\n        <button class=\"btn btn-primary\" (click)=\"openLink()\" *ngIf=\"creationLink\">Erstellen</button>\n      </div>\n    </div>\n\n    <div\n      class=\"d-block invalid-feedback m-2\"\n      *ngIf=\"control?.invalid && (control?.dirty || control?.touched) && !selectedElement\"\n    >\n      <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n      <div *ngIf=\"control?.errors?.['invalidReference'] && currentValue\">\n        {{ currentValue }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.\n      </div>\n      <div *ngIf=\"control?.errors?.['minlength']\">\n        Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n        {{control.errors?.['minlength']?.requiredLength}} Zeichen.\n      </div>\n      <div *ngIf=\"control?.errors?.['maxlength']\">\n        Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n        {{control.errors?.['maxlength']?.requiredLength}} Zeichen.\n      </div>\n      <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n      <div *ngIf=\"control?.errors?.['matching']\">Die Passw\u00F6rter m\u00FCssen \u00FCberein stimmen.</div>\n    </div>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isList\">\n  <base-tags\n    [id]=\"id\"\n    [label]=\"label\"\n    [name]=\"name\"\n    [control]=\"control\"\n    [required]=\"required\"\n    [placeholder]=\"placeholder\"\n    [custom]=\"false\"\n    [options]=\"optionsForTagInput\"\n  ></base-tags>\n</ng-container>\n", styles: [".options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999;max-height:200px;overflow-y:scroll}.options .option-item{padding:10px;cursor:pointer}.options .option-item:hover{color:var(--bs-primary)}\n"], dependencies: [{ kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "infoText", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required", "objectPath", "validators"] }] });
 }
-RefenceInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RefenceInputComponent, deps: [{ token: i1$1.GraphQLService }, { token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-RefenceInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: RefenceInputComponent, selector: "base-refence-input", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", isList: "isList", search: "search", useParamAsArg: "useParamAsArg", param: "param", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", required: "required", method: "method", fields: "fields", valueField: "valueField", objectPath: "objectPath", nameField: "nameField", creationLink: "creationLink" }, ngImport: i0, template: "<ng-container *ngIf=\"!isList\">\n  <div class=\"form-group mb-3\">\n    <div class=\"d-flex justify-content-between align-items-center\">\n      <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n      <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n    </div>\n\n    <div class=\"position-relative\" *ngIf=\"search\">\n      <div class=\"d-flex flex-row\">\n        <input [formControl]=\"control\" hidden />\n        <input\n          [id]=\"objectPath ? objectPath + '.' + id : id\"\n          [name]=\"name\"\n          class=\"form-control\"\n          [(ngModel)]=\"currentValue\"\n          [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onFocus()\"\n          [required]=\"required\"\n          [placeholder]=\"placeholder\"\n          [autocomplete]=\"autocomplete ?? null\"\n          [tabIndex]=\"tabIndex ?? null\"\n          (keyup)=\"enterKey($event)\"\n        />\n        <button class=\"btn btn-primary\" (click)=\"openLink()\" *ngIf=\"creationLink\">Erstellen</button>\n      </div>\n      <div class=\"options\" *ngIf=\"objects && selectedElement\">\n        <div class=\"option-item\" *ngFor=\"let object of filterOptions()\" (click)=\"set(object[valueField])\">\n          {{ prepareNameField(object) }}\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"!search\">\n      <div class=\"d-flex flex-row\">\n        <select\n          [id]=\"objectPath ? objectPath + '.' + id : id\"\n          [name]=\"name\"\n          class=\"form-select\"\n          [attr.aria-label]=\"placeholder\"\n          [formControl]=\"control\"\n          [required]=\"required\"\n          [tabIndex]=\"tabIndex ?? null\"\n          [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n        >\n          <option [ngValue]=\"null\" selected>{{ placeholder }}</option>\n          <option *ngFor=\"let object of objects\" [ngValue]=\"object[valueField]\">\n            {{ prepareNameField(object) }}\n          </option>\n        </select>\n        <button class=\"btn btn-primary\" (click)=\"openLink()\" *ngIf=\"creationLink\">Erstellen</button>\n      </div>\n    </div>\n\n    <div\n      class=\"d-block invalid-feedback m-2\"\n      *ngIf=\"control?.invalid && (control?.dirty || control?.touched) && !selectedElement\"\n    >\n      <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n      <div *ngIf=\"control?.errors?.['invalidReference'] && currentValue\">\n        {{ currentValue }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.\n      </div>\n      <div *ngIf=\"control?.errors?.['minlength']\">\n        Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n        {{control.errors?.['minlength']?.requiredLength}} Zeichen.\n      </div>\n      <div *ngIf=\"control?.errors?.['maxlength']\">\n        Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n        {{control.errors?.['maxlength']?.requiredLength}} Zeichen.\n      </div>\n      <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n      <div *ngIf=\"control?.errors?.['matching']\">Die Passw\u00F6rter m\u00FCssen \u00FCberein stimmen.</div>\n    </div>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isList\">\n  <base-tags\n    [id]=\"id\"\n    [label]=\"label\"\n    [name]=\"name\"\n    [control]=\"control\"\n    [required]=\"required\"\n    [placeholder]=\"placeholder\"\n    [custom]=\"false\"\n    [options]=\"optionsForTagInput\"\n  ></base-tags>\n</ng-container>\n", styles: [".options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999;max-height:200px;overflow-y:scroll}.options .option-item{padding:10px;cursor:pointer}.options .option-item:hover{color:var(--bs-primary)}\n"], dependencies: [{ kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "infoText", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required", "objectPath", "validators"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RefenceInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: RefenceInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'base-refence-input', template: "<ng-container *ngIf=\"!isList\">\n  <div class=\"form-group mb-3\">\n    <div class=\"d-flex justify-content-between align-items-center\">\n      <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n      <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n    </div>\n\n    <div class=\"position-relative\" *ngIf=\"search\">\n      <div class=\"d-flex flex-row\">\n        <input [formControl]=\"control\" hidden />\n        <input\n          [id]=\"objectPath ? objectPath + '.' + id : id\"\n          [name]=\"name\"\n          class=\"form-control\"\n          [(ngModel)]=\"currentValue\"\n          [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onFocus()\"\n          [required]=\"required\"\n          [placeholder]=\"placeholder\"\n          [autocomplete]=\"autocomplete ?? null\"\n          [tabIndex]=\"tabIndex ?? null\"\n          (keyup)=\"enterKey($event)\"\n        />\n        <button class=\"btn btn-primary\" (click)=\"openLink()\" *ngIf=\"creationLink\">Erstellen</button>\n      </div>\n      <div class=\"options\" *ngIf=\"objects && selectedElement\">\n        <div class=\"option-item\" *ngFor=\"let object of filterOptions()\" (click)=\"set(object[valueField])\">\n          {{ prepareNameField(object) }}\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"!search\">\n      <div class=\"d-flex flex-row\">\n        <select\n          [id]=\"objectPath ? objectPath + '.' + id : id\"\n          [name]=\"name\"\n          class=\"form-select\"\n          [attr.aria-label]=\"placeholder\"\n          [formControl]=\"control\"\n          [required]=\"required\"\n          [tabIndex]=\"tabIndex ?? null\"\n          [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n        >\n          <option [ngValue]=\"null\" selected>{{ placeholder }}</option>\n          <option *ngFor=\"let object of objects\" [ngValue]=\"object[valueField]\">\n            {{ prepareNameField(object) }}\n          </option>\n        </select>\n        <button class=\"btn btn-primary\" (click)=\"openLink()\" *ngIf=\"creationLink\">Erstellen</button>\n      </div>\n    </div>\n\n    <div\n      class=\"d-block invalid-feedback m-2\"\n      *ngIf=\"control?.invalid && (control?.dirty || control?.touched) && !selectedElement\"\n    >\n      <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n      <div *ngIf=\"control?.errors?.['invalidReference'] && currentValue\">\n        {{ currentValue }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.\n      </div>\n      <div *ngIf=\"control?.errors?.['minlength']\">\n        Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n        {{control.errors?.['minlength']?.requiredLength}} Zeichen.\n      </div>\n      <div *ngIf=\"control?.errors?.['maxlength']\">\n        Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n        {{control.errors?.['maxlength']?.requiredLength}} Zeichen.\n      </div>\n      <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n      <div *ngIf=\"control?.errors?.['matching']\">Die Passw\u00F6rter m\u00FCssen \u00FCberein stimmen.</div>\n    </div>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isList\">\n  <base-tags\n    [id]=\"id\"\n    [label]=\"label\"\n    [name]=\"name\"\n    [control]=\"control\"\n    [required]=\"required\"\n    [placeholder]=\"placeholder\"\n    [custom]=\"false\"\n    [options]=\"optionsForTagInput\"\n  ></base-tags>\n</ng-container>\n", styles: [".options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999;max-height:200px;overflow-y:scroll}.options .option-item{padding:10px;cursor:pointer}.options .option-item:hover{color:var(--bs-primary)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.GraphQLService }, { type: i2$1.Router }]; }, propDecorators: { id: [{
@@ -1313,11 +1376,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 class ModelFormSubComponent {
+    authService;
+    id;
+    parentKey;
+    fields;
+    form;
+    config;
+    imageChanged = new EventEmitter();
+    fileChanged = new EventEmitter();
+    keys = [];
+    user;
+    objectPath;
     constructor(authService) {
         this.authService = authService;
-        this.imageChanged = new EventEmitter();
-        this.fileChanged = new EventEmitter();
-        this.keys = [];
     }
     ngOnInit() {
         // Get keys
@@ -1380,10 +1451,10 @@ class ModelFormSubComponent {
     transformToControl(control) {
         return control;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ModelFormSubComponent, deps: [{ token: i1$1.AuthService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: { id: "id", parentKey: "parentKey", fields: "fields", form: "form", config: "config" }, outputs: { imageChanged: "imageChanged", fileChanged: "fileChanged" }, ngImport: i0, template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n  <ng-container\n    *ngIf=\"checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <fieldset class=\"border rounded-3 p-3 mt-3\">\n      <legend class=\"float-none w-auto px-3\">\n        {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n      </legend>\n      <base-model-form-sub\n        [parentKey]=\"key\"\n        [fields]=\"fields[key].fields\"\n        [config]=\"config[key]?.fields || {}\"\n        [form]=\"form.get(key)\"\n        (imageChanged)=\"imageChanged.emit($event)\"\n        (fileChanged)=\"fileChanged.emit($event)\"\n      ></base-model-form-sub>\n    </fieldset>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"!checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <ng-container *ngIf=\"fields[key]?.isEnum && !config[key]?.exclude\">\n      <base-select\n        [id]=\"key\"\n        [name]=\"key\"\n        [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n        [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n        [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n        [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n        [control]=\"transformToControl(form?.get(key))\"\n        [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n        [objectPath]=\"objectPath\"\n      ></base-select>\n    </ng-container>\n\n    <ng-container *ngIf=\"!fields[key]?.isEnum && !config[key]?.exclude\">\n      <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n        <ng-container *ngSwitchCase=\"'String'\">\n          <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n            <base-tags\n              [id]=\"key\"\n              [name]=\"key\"\n              [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n              [validators]=\"config[key]?.validators\"\n              [objectPath]=\"objectPath\"\n            ></base-tags>\n          </ng-container>\n\n          <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [type]=\"'text'\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n              [objectPath]=\"objectPath\"\n            ></base-input>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Image'\">\n          <base-upload-image\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [url]=\"config[key]?.url\"\n            [path]=\"config[key]?.path || '/files/'\"\n            [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n            [deletePath]=\"config[key]?.deletePath || '/files/'\"\n            [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n            [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n            [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n            [buttonText]=\"config[key]?.buttonText || 'browse'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [compressOptions]=\"config[key]?.compressOptions\"\n            [croppingOptions]=\"config[key]?.croppingOptions\"\n            [croppingImage]=\"config[key]?.croppingImage\"\n            [maxSize]=\"config[key]?.maxSize\"\n            [uploadDirectly]=\"false\"\n            [objectPath]=\"objectPath\"\n            [mode]=\"config[key]?.imageMode || 'base64'\"\n            (fileChanged)=\"fileChanged.emit($event)\"\n            (imageDeleted)=\"imageChanged.emit(key)\"\n            (imageUploaded)=\"imageChanged.emit(key)\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Upload'\">\n          <base-upload-image\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n            [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n            [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n            [buttonText]=\"config[key]?.buttonText || 'browse'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [compressOptions]=\"config[key]?.compressOptions\"\n            [maxSize]=\"config[key]?.maxSize\"\n            [objectPath]=\"objectPath\"\n            [mode]=\"'file'\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Reference'\">\n          <base-refence-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [isList]=\"fields[key]?.isList\"\n            [useParamAsArg]=\"config[key]?.useParamAsArg ?? false\"\n            [param]=\"id\"\n            [search]=\"config[key]?.searchable ?? true\"\n            [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [method]=\"config[key]?.method || 'find'\"\n            [fields]=\"config[key]?.requestFields || ['id', 'name']\"\n            [valueField]=\"config[key]?.valueField || 'id'\"\n            [nameField]=\"config[key]?.nameField || 'name'\"\n            [creationLink]=\"config[key]?.creationLink || ''\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-refence-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Boolean'\">\n          <base-checkbox\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-checkbox>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'LongText'\">\n          <base-textarea\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-textarea>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Float'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [type]=\"'number'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Password'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [type]=\"'password'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Color'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [type]=\"'color'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'URL'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'url'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Email'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'email'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'DateTime'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'datetime-local'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["id", "name", "infoText", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required", "eyeButton", "objectPath"], outputs: ["enter"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["id", "name", "infoText", "label", "placeholder", "objectPath", "control", "tabIndex", "required", "multiple", "search", "options"] }, { kind: "component", type: CheckboxComponent, selector: "base-checkbox", inputs: ["id", "name", "label", "value", "control", "required", "objectPath"] }, { kind: "component", type: TextareaComponent, selector: "base-textarea", inputs: ["id", "name", "infoText", "label", "placeholder", "control", "rows", "required", "autoHeight", "tabIndex", "objectPath"] }, { kind: "component", type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "infoText", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required", "objectPath", "validators"] }, { kind: "component", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["id", "parentKey", "fields", "form", "config"], outputs: ["imageChanged", "fileChanged"] }, { kind: "component", type: UploadImageComponent, selector: "base-upload-image", inputs: ["id", "name", "infoText", "label", "supportText", "required", "defaultDragText", "defaultReleaseText", "preButtonText", "buttonText", "validExtensions", "control", "url", "uploadPath", "deletePath", "path", "compressOptions", "maxSize", "uploadDirectly", "croppingImage", "croppingOptions", "objectPath", "mode"], outputs: ["imageUploaded", "imageDeleted", "fileChanged"] }, { kind: "component", type: RefenceInputComponent, selector: "base-refence-input", inputs: ["id", "name", "infoText", "label", "isList", "search", "useParamAsArg", "param", "placeholder", "autocomplete", "tabIndex", "control", "required", "method", "fields", "valueField", "objectPath", "nameField", "creationLink"] }] });
 }
-ModelFormSubComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ModelFormSubComponent, deps: [{ token: i1$1.AuthService }], target: i0.ɵɵFactoryTarget.Component });
-ModelFormSubComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: { id: "id", parentKey: "parentKey", fields: "fields", form: "form", config: "config" }, outputs: { imageChanged: "imageChanged", fileChanged: "fileChanged" }, ngImport: i0, template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n  <ng-container\n    *ngIf=\"checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <fieldset class=\"border rounded-3 p-3 mt-3\">\n      <legend class=\"float-none w-auto px-3\">\n        {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n      </legend>\n      <base-model-form-sub\n        [parentKey]=\"key\"\n        [fields]=\"fields[key].fields\"\n        [config]=\"config[key]?.fields || {}\"\n        [form]=\"form.get(key)\"\n        (imageChanged)=\"imageChanged.emit($event)\"\n        (fileChanged)=\"fileChanged.emit($event)\"\n      ></base-model-form-sub>\n    </fieldset>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"!checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <ng-container *ngIf=\"fields[key]?.isEnum && !config[key]?.exclude\">\n      <base-select\n        [id]=\"key\"\n        [name]=\"key\"\n        [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n        [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n        [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n        [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n        [control]=\"transformToControl(form?.get(key))\"\n        [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n        [objectPath]=\"objectPath\"\n      ></base-select>\n    </ng-container>\n\n    <ng-container *ngIf=\"!fields[key]?.isEnum && !config[key]?.exclude\">\n      <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n        <ng-container *ngSwitchCase=\"'String'\">\n          <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n            <base-tags\n              [id]=\"key\"\n              [name]=\"key\"\n              [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n              [validators]=\"config[key]?.validators\"\n              [objectPath]=\"objectPath\"\n            ></base-tags>\n          </ng-container>\n\n          <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [type]=\"'text'\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n              [objectPath]=\"objectPath\"\n            ></base-input>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Image'\">\n          <base-upload-image\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [url]=\"config[key]?.url\"\n            [path]=\"config[key]?.path || '/files/'\"\n            [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n            [deletePath]=\"config[key]?.deletePath || '/files/'\"\n            [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n            [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n            [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n            [buttonText]=\"config[key]?.buttonText || 'browse'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [compressOptions]=\"config[key]?.compressOptions\"\n            [croppingOptions]=\"config[key]?.croppingOptions\"\n            [croppingImage]=\"config[key]?.croppingImage\"\n            [maxSize]=\"config[key]?.maxSize\"\n            [uploadDirectly]=\"false\"\n            [objectPath]=\"objectPath\"\n            [mode]=\"config[key]?.imageMode || 'base64'\"\n            (fileChanged)=\"fileChanged.emit($event)\"\n            (imageDeleted)=\"imageChanged.emit(key)\"\n            (imageUploaded)=\"imageChanged.emit(key)\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Upload'\">\n          <base-upload-image\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n            [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n            [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n            [buttonText]=\"config[key]?.buttonText || 'browse'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [compressOptions]=\"config[key]?.compressOptions\"\n            [maxSize]=\"config[key]?.maxSize\"\n            [objectPath]=\"objectPath\"\n            [mode]=\"'file'\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Reference'\">\n          <base-refence-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [isList]=\"fields[key]?.isList\"\n            [useParamAsArg]=\"config[key]?.useParamAsArg ?? false\"\n            [param]=\"id\"\n            [search]=\"config[key]?.searchable ?? true\"\n            [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [method]=\"config[key]?.method || 'find'\"\n            [fields]=\"config[key]?.requestFields || ['id', 'name']\"\n            [valueField]=\"config[key]?.valueField || 'id'\"\n            [nameField]=\"config[key]?.nameField || 'name'\"\n            [creationLink]=\"config[key]?.creationLink || ''\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-refence-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Boolean'\">\n          <base-checkbox\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-checkbox>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'LongText'\">\n          <base-textarea\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-textarea>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Float'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [type]=\"'number'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Password'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [type]=\"'password'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Color'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [type]=\"'color'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'URL'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'url'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Email'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'email'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'DateTime'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'datetime-local'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["id", "name", "infoText", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required", "eyeButton", "objectPath"], outputs: ["enter"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["id", "name", "infoText", "label", "placeholder", "objectPath", "control", "tabIndex", "required", "multiple", "search", "options"] }, { kind: "component", type: CheckboxComponent, selector: "base-checkbox", inputs: ["id", "name", "label", "value", "control", "required", "objectPath"] }, { kind: "component", type: TextareaComponent, selector: "base-textarea", inputs: ["id", "name", "infoText", "label", "placeholder", "control", "rows", "required", "autoHeight", "tabIndex", "objectPath"] }, { kind: "component", type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "infoText", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required", "objectPath", "validators"] }, { kind: "component", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["id", "parentKey", "fields", "form", "config"], outputs: ["imageChanged", "fileChanged"] }, { kind: "component", type: UploadImageComponent, selector: "base-upload-image", inputs: ["id", "name", "infoText", "label", "supportText", "required", "defaultDragText", "defaultReleaseText", "preButtonText", "buttonText", "validExtensions", "control", "url", "uploadPath", "deletePath", "path", "compressOptions", "maxSize", "uploadDirectly", "croppingImage", "croppingOptions", "objectPath", "mode"], outputs: ["imageUploaded", "imageDeleted", "fileChanged"] }, { kind: "component", type: RefenceInputComponent, selector: "base-refence-input", inputs: ["id", "name", "infoText", "label", "isList", "search", "useParamAsArg", "param", "placeholder", "autocomplete", "tabIndex", "control", "required", "method", "fields", "valueField", "objectPath", "nameField", "creationLink"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ModelFormSubComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ModelFormSubComponent, decorators: [{
             type: Component,
             args: [{ selector: 'base-model-form-sub', template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n  <ng-container\n    *ngIf=\"checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <fieldset class=\"border rounded-3 p-3 mt-3\">\n      <legend class=\"float-none w-auto px-3\">\n        {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n      </legend>\n      <base-model-form-sub\n        [parentKey]=\"key\"\n        [fields]=\"fields[key].fields\"\n        [config]=\"config[key]?.fields || {}\"\n        [form]=\"form.get(key)\"\n        (imageChanged)=\"imageChanged.emit($event)\"\n        (fileChanged)=\"fileChanged.emit($event)\"\n      ></base-model-form-sub>\n    </fieldset>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"!checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <ng-container *ngIf=\"fields[key]?.isEnum && !config[key]?.exclude\">\n      <base-select\n        [id]=\"key\"\n        [name]=\"key\"\n        [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n        [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n        [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n        [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n        [control]=\"transformToControl(form?.get(key))\"\n        [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n        [objectPath]=\"objectPath\"\n      ></base-select>\n    </ng-container>\n\n    <ng-container *ngIf=\"!fields[key]?.isEnum && !config[key]?.exclude\">\n      <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n        <ng-container *ngSwitchCase=\"'String'\">\n          <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n            <base-tags\n              [id]=\"key\"\n              [name]=\"key\"\n              [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n              [validators]=\"config[key]?.validators\"\n              [objectPath]=\"objectPath\"\n            ></base-tags>\n          </ng-container>\n\n          <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [type]=\"'text'\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n              [objectPath]=\"objectPath\"\n            ></base-input>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Image'\">\n          <base-upload-image\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [url]=\"config[key]?.url\"\n            [path]=\"config[key]?.path || '/files/'\"\n            [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n            [deletePath]=\"config[key]?.deletePath || '/files/'\"\n            [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n            [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n            [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n            [buttonText]=\"config[key]?.buttonText || 'browse'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [compressOptions]=\"config[key]?.compressOptions\"\n            [croppingOptions]=\"config[key]?.croppingOptions\"\n            [croppingImage]=\"config[key]?.croppingImage\"\n            [maxSize]=\"config[key]?.maxSize\"\n            [uploadDirectly]=\"false\"\n            [objectPath]=\"objectPath\"\n            [mode]=\"config[key]?.imageMode || 'base64'\"\n            (fileChanged)=\"fileChanged.emit($event)\"\n            (imageDeleted)=\"imageChanged.emit(key)\"\n            (imageUploaded)=\"imageChanged.emit(key)\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Upload'\">\n          <base-upload-image\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n            [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n            [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n            [buttonText]=\"config[key]?.buttonText || 'browse'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [compressOptions]=\"config[key]?.compressOptions\"\n            [maxSize]=\"config[key]?.maxSize\"\n            [objectPath]=\"objectPath\"\n            [mode]=\"'file'\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Reference'\">\n          <base-refence-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [isList]=\"fields[key]?.isList\"\n            [useParamAsArg]=\"config[key]?.useParamAsArg ?? false\"\n            [param]=\"id\"\n            [search]=\"config[key]?.searchable ?? true\"\n            [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [method]=\"config[key]?.method || 'find'\"\n            [fields]=\"config[key]?.requestFields || ['id', 'name']\"\n            [valueField]=\"config[key]?.valueField || 'id'\"\n            [nameField]=\"config[key]?.nameField || 'name'\"\n            [creationLink]=\"config[key]?.creationLink || ''\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-refence-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Boolean'\">\n          <base-checkbox\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-checkbox>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'LongText'\">\n          <base-textarea\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-textarea>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Float'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [type]=\"'number'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Password'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [type]=\"'password'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Color'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [type]=\"'color'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'URL'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'url'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Email'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'email'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'DateTime'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'datetime-local'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.AuthService }]; }, propDecorators: { id: [{
@@ -1403,14 +1474,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 class FabButtonComponent {
-    constructor() {
-        this.fabIcon = 'bi-list';
-        this.toggle = false;
-    }
+    fabIcon = 'bi-list';
+    buttons;
+    toggle = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: FabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: FabButtonComponent, selector: "base-fab-button", inputs: { fabIcon: "fabIcon", buttons: "buttons" }, ngImport: i0, template: "<div class=\"fab-container\" [ngClass]=\"{ 'fab-container-active': toggle }\">\n  <div class=\"fab shadow\">\n    <div class=\"fab-content\" (click)=\"toggle = !toggle\">\n      <i class=\"bi bi-x-lg\" *ngIf=\"toggle\"></i>\n      <i class=\"bi\" *ngIf=\"!toggle\" [ngClass]=\"fabIcon\"></i>\n    </div>\n  </div>\n  <div\n    class=\"sub-button shadow\"\n    *ngFor=\"let button of buttons\"\n    (click)=\"button.event.emit(true); toggle = !toggle\"\n    [ngStyle]=\"{ backgroundColor: button.color }\"\n  >\n    <a [routerLink]=\"button.routerLink\">\n      <i class=\"bi\" [ngClass]=\"button.icon\"></i>\n    </a>\n  </div>\n</div>\n", styles: [".fab-container{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;-webkit-user-select:none;user-select:none;position:absolute;bottom:10px;right:10px}.fab-container-active{height:100%}.fab-container-active .sub-button:nth-child(2){transform:translateY(-80px)}.fab-container-active .sub-button:nth-child(3){transform:translateY(-140px)}.fab-container-active .sub-button:nth-child(4){transform:translateY(-200px)}.fab-container-active .sub-button:nth-child(5){transform:translateY(-260px)}.fab-container-active .sub-button:nth-child(6){transform:translateY(-320px)}.fab-container .fab{position:relative;height:60px;width:60px;background-color:var(--bs-primary);border-radius:50%;z-index:2}.fab-container .fab:before{content:\" \";position:absolute;bottom:0;right:0;height:30px;width:30px;background-color:inherit;border-radius:0 0 10px;z-index:-1}.fab-container .fab .fab-content{display:flex;align-items:center;justify-content:center;height:inherit;width:inherit;border-radius:50%}.fab-container .fab .fab-content .bi{color:#fff;font-size:32px}.fab-container .sub-button{position:absolute;display:flex;align-items:center;justify-content:center;bottom:10px;right:10px;height:40px;width:40px;background-color:var(--bs-primary);border-radius:50%;transition:all .3s ease}.fab-container .sub-button:hover{cursor:pointer}.fab-container .sub-button .bi{color:#fff;padding-top:6px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
-FabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FabButtonComponent, selector: "base-fab-button", inputs: { fabIcon: "fabIcon", buttons: "buttons" }, ngImport: i0, template: "<div class=\"fab-container\" [ngClass]=\"{ 'fab-container-active': toggle }\">\n  <div class=\"fab shadow\">\n    <div class=\"fab-content\" (click)=\"toggle = !toggle\">\n      <i class=\"bi bi-x-lg\" *ngIf=\"toggle\"></i>\n      <i class=\"bi\" *ngIf=\"!toggle\" [ngClass]=\"fabIcon\"></i>\n    </div>\n  </div>\n  <div\n    class=\"sub-button shadow\"\n    *ngFor=\"let button of buttons\"\n    (click)=\"button.event.emit(true); toggle = !toggle\"\n    [ngStyle]=\"{ backgroundColor: button.color }\"\n  >\n    <a [routerLink]=\"button.routerLink\">\n      <i class=\"bi\" [ngClass]=\"button.icon\"></i>\n    </a>\n  </div>\n</div>\n", styles: [".fab-container{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;-webkit-user-select:none;user-select:none;position:absolute;bottom:10px;right:10px}.fab-container-active{height:100%}.fab-container-active .sub-button:nth-child(2){transform:translateY(-80px)}.fab-container-active .sub-button:nth-child(3){transform:translateY(-140px)}.fab-container-active .sub-button:nth-child(4){transform:translateY(-200px)}.fab-container-active .sub-button:nth-child(5){transform:translateY(-260px)}.fab-container-active .sub-button:nth-child(6){transform:translateY(-320px)}.fab-container .fab{position:relative;height:60px;width:60px;background-color:var(--bs-primary);border-radius:50%;z-index:2}.fab-container .fab:before{content:\" \";position:absolute;bottom:0;right:0;height:30px;width:30px;background-color:inherit;border-radius:0 0 10px;z-index:-1}.fab-container .fab .fab-content{display:flex;align-items:center;justify-content:center;height:inherit;width:inherit;border-radius:50%}.fab-container .fab .fab-content .bi{color:#fff;font-size:32px}.fab-container .sub-button{position:absolute;display:flex;align-items:center;justify-content:center;bottom:10px;right:10px;height:40px;width:40px;background-color:var(--bs-primary);border-radius:50%;transition:all .3s ease}.fab-container .sub-button:hover{cursor:pointer}.fab-container .sub-button .bi{color:#fff;padding-top:6px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FabButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: FabButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'base-fab-button', template: "<div class=\"fab-container\" [ngClass]=\"{ 'fab-container-active': toggle }\">\n  <div class=\"fab shadow\">\n    <div class=\"fab-content\" (click)=\"toggle = !toggle\">\n      <i class=\"bi bi-x-lg\" *ngIf=\"toggle\"></i>\n      <i class=\"bi\" *ngIf=\"!toggle\" [ngClass]=\"fabIcon\"></i>\n    </div>\n  </div>\n  <div\n    class=\"sub-button shadow\"\n    *ngFor=\"let button of buttons\"\n    (click)=\"button.event.emit(true); toggle = !toggle\"\n    [ngStyle]=\"{ backgroundColor: button.color }\"\n  >\n    <a [routerLink]=\"button.routerLink\">\n      <i class=\"bi\" [ngClass]=\"button.icon\"></i>\n    </a>\n  </div>\n</div>\n", styles: [".fab-container{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;-webkit-user-select:none;user-select:none;position:absolute;bottom:10px;right:10px}.fab-container-active{height:100%}.fab-container-active .sub-button:nth-child(2){transform:translateY(-80px)}.fab-container-active .sub-button:nth-child(3){transform:translateY(-140px)}.fab-container-active .sub-button:nth-child(4){transform:translateY(-200px)}.fab-container-active .sub-button:nth-child(5){transform:translateY(-260px)}.fab-container-active .sub-button:nth-child(6){transform:translateY(-320px)}.fab-container .fab{position:relative;height:60px;width:60px;background-color:var(--bs-primary);border-radius:50%;z-index:2}.fab-container .fab:before{content:\" \";position:absolute;bottom:0;right:0;height:30px;width:30px;background-color:inherit;border-radius:0 0 10px;z-index:-1}.fab-container .fab .fab-content{display:flex;align-items:center;justify-content:center;height:inherit;width:inherit;border-radius:50%}.fab-container .fab .fab-content .bi{color:#fff;font-size:32px}.fab-container .sub-button{position:absolute;display:flex;align-items:center;justify-content:center;bottom:10px;right:10px;height:40px;width:40px;background-color:var(--bs-primary);border-radius:50%;transition:all .3s ease}.fab-container .sub-button:hover{cursor:pointer}.fab-container .sub-button .bi{color:#fff;padding-top:6px}\n"] }]
         }], propDecorators: { fabIcon: [{
@@ -1426,6 +1496,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * If you want to use complete custom services and methods, extend ModelFormBaseComponent instead of ModelFormComponent
  */
 class ModelFormComponent {
+    graphQLMetaService;
+    graphQLService;
+    formsService;
+    authService;
+    router;
+    route;
+    cmsService;
+    toastService;
+    fileService;
+    modelName;
+    label;
+    id;
+    delete = true;
+    onlyUpdateMode = false;
+    duplicate = false;
+    logging = false;
+    config;
+    showFavButton = true;
+    finished = new EventEmitter();
+    meta;
+    form;
+    _loading = false;
+    fields;
+    operation;
+    keys = [];
+    user;
+    object;
+    fabButtons = [];
+    fileChanges;
     set loading(value) {
         if (!value) {
             setTimeout(() => {
@@ -1446,15 +1545,6 @@ class ModelFormComponent {
         this.cmsService = cmsService;
         this.toastService = toastService;
         this.fileService = fileService;
-        this.delete = true;
-        this.onlyUpdateMode = false;
-        this.duplicate = false;
-        this.logging = false;
-        this.showFavButton = true;
-        this.finished = new EventEmitter();
-        this._loading = false;
-        this.keys = [];
-        this.fabButtons = [];
     }
     ngOnInit() {
         // Set user for roles check
@@ -1945,10 +2035,10 @@ class ModelFormComponent {
         }
         return result;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ModelFormComponent, deps: [{ token: i1$1.GraphQLMetaService }, { token: i1$1.GraphQLService }, { token: i1$1.FormsService }, { token: i1$1.AuthService }, { token: i2$1.Router }, { token: i2$1.ActivatedRoute }, { token: i1$1.CmsService }, { token: i1$1.ToastService }, { token: i1$1.FileService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: ModelFormComponent, selector: "base-model-form", inputs: { modelName: "modelName", label: "label", id: "id", delete: "delete", onlyUpdateMode: "onlyUpdateMode", duplicate: "duplicate", logging: "logging", config: "config", showFavButton: "showFavButton" }, outputs: { finished: "finished" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"w-100\" *ngIf=\"form\">\n  <div class=\"d-flex flex-row justify-content-between mt-3\">\n    <div class=\"responsive-back d-flex d-lg-none\">\n      <i class=\"bi bi-arrow-left\" routerLink=\"../\"></i>\n    </div>\n    <h2 class=\"mb-0\">\n      {{ label ? label : capitalizeFirstLetter(modelName) }} {{ operation === 'update' ? 'bearbeiten' : 'erstellen' }}\n    </h2>\n\n    <div class=\"d-none d-lg-flex flex-row align-items-center justify-content-end\">\n      <button class=\"btn btn-outline-primary me-2\" *ngIf=\"id && duplicate && !_loading\" (click)=\"duplicateObject()\">\n        Duplizieren\n      </button>\n      <button\n        class=\"btn btn-primary\"\n        type=\"button\"\n        [disabled]=\"!form.touched && !form.dirty\"\n        (click)=\"submit(false)\"\n        *ngIf=\"!_loading\"\n      >\n        {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}\n      </button>\n      <button class=\"btn btn-primary\" type=\"button\" disabled *ngIf=\"_loading\">\n        <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n        {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}...\n      </button>\n    </div>\n  </div>\n\n  <form [formGroup]=\"form\">\n    <base-model-form-sub\n      [id]=\"id\"\n      [fields]=\"fields\"\n      [config]=\"config\"\n      [form]=\"form\"\n      (imageChanged)=\"imageChanged($event)\"\n      (fileChanged)=\"processFileChanges($event)\"\n    ></base-model-form-sub>\n\n    <div class=\"d-none d-lg-flex mt-4\" [ngClass]=\"id && delete ? 'justify-content-between' : 'justify-content-end'\">\n      <div *ngIf=\"id && delete\">\n        <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteObject()\">L\u00F6schen</button>\n      </div>\n      <div>\n        <button\n          class=\"btn btn-primary\"\n          type=\"button\"\n          [disabled]=\"!form.touched && !form.dirty\"\n          (click)=\"submit(false)\"\n          *ngIf=\"!_loading\"\n        >\n          {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}\n        </button>\n        <button class=\"btn btn-primary\" type=\"button\" disabled *ngIf=\"_loading\">\n          <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n          {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}...\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n\n<div class=\"d-block d-lg-none responsive-action-button\" *ngIf=\"showFavButton\">\n  <base-fab-button [buttons]=\"fabButtons\"></base-fab-button>\n</div>\n", styles: [".responsive-back{display:flex;align-items:center;margin-right:6px}.responsive-back .bi-arrow-left{font-size:28px}h2{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.responsive-action-button{position:fixed;bottom:15px;right:15px;z-index:100}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["id", "parentKey", "fields", "form", "config"], outputs: ["imageChanged", "fileChanged"] }, { kind: "component", type: FabButtonComponent, selector: "base-fab-button", inputs: ["fabIcon", "buttons"] }] });
 }
-ModelFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ModelFormComponent, deps: [{ token: i1$1.GraphQLMetaService }, { token: i1$1.GraphQLService }, { token: i1$1.FormsService }, { token: i1$1.AuthService }, { token: i2$1.Router }, { token: i2$1.ActivatedRoute }, { token: i1$1.CmsService }, { token: i1$1.ToastService }, { token: i1$1.FileService }], target: i0.ɵɵFactoryTarget.Component });
-ModelFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ModelFormComponent, selector: "base-model-form", inputs: { modelName: "modelName", label: "label", id: "id", delete: "delete", onlyUpdateMode: "onlyUpdateMode", duplicate: "duplicate", logging: "logging", config: "config", showFavButton: "showFavButton" }, outputs: { finished: "finished" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"w-100\" *ngIf=\"form\">\n  <div class=\"d-flex flex-row justify-content-between mt-3\">\n    <div class=\"responsive-back d-flex d-lg-none\">\n      <i class=\"bi bi-arrow-left\" routerLink=\"../\"></i>\n    </div>\n    <h2 class=\"mb-0\">\n      {{ label ? label : capitalizeFirstLetter(modelName) }} {{ operation === 'update' ? 'bearbeiten' : 'erstellen' }}\n    </h2>\n\n    <div class=\"d-none d-lg-flex flex-row align-items-center justify-content-end\">\n      <button class=\"btn btn-outline-primary me-2\" *ngIf=\"id && duplicate && !_loading\" (click)=\"duplicateObject()\">\n        Duplizieren\n      </button>\n      <button\n        class=\"btn btn-primary\"\n        type=\"button\"\n        [disabled]=\"!form.touched && !form.dirty\"\n        (click)=\"submit(false)\"\n        *ngIf=\"!_loading\"\n      >\n        {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}\n      </button>\n      <button class=\"btn btn-primary\" type=\"button\" disabled *ngIf=\"_loading\">\n        <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n        {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}...\n      </button>\n    </div>\n  </div>\n\n  <form [formGroup]=\"form\">\n    <base-model-form-sub\n      [id]=\"id\"\n      [fields]=\"fields\"\n      [config]=\"config\"\n      [form]=\"form\"\n      (imageChanged)=\"imageChanged($event)\"\n      (fileChanged)=\"processFileChanges($event)\"\n    ></base-model-form-sub>\n\n    <div class=\"d-none d-lg-flex mt-4\" [ngClass]=\"id && delete ? 'justify-content-between' : 'justify-content-end'\">\n      <div *ngIf=\"id && delete\">\n        <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteObject()\">L\u00F6schen</button>\n      </div>\n      <div>\n        <button\n          class=\"btn btn-primary\"\n          type=\"button\"\n          [disabled]=\"!form.touched && !form.dirty\"\n          (click)=\"submit(false)\"\n          *ngIf=\"!_loading\"\n        >\n          {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}\n        </button>\n        <button class=\"btn btn-primary\" type=\"button\" disabled *ngIf=\"_loading\">\n          <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n          {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}...\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n\n<div class=\"d-block d-lg-none responsive-action-button\" *ngIf=\"showFavButton\">\n  <base-fab-button [buttons]=\"fabButtons\"></base-fab-button>\n</div>\n", styles: [".responsive-back{display:flex;align-items:center;margin-right:6px}.responsive-back .bi-arrow-left{font-size:28px}h2{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.responsive-action-button{position:fixed;bottom:15px;right:15px;z-index:100}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["id", "parentKey", "fields", "form", "config"], outputs: ["imageChanged", "fileChanged"] }, { kind: "component", type: FabButtonComponent, selector: "base-fab-button", inputs: ["fabIcon", "buttons"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ModelFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ModelFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'base-model-form', template: "<div class=\"w-100\" *ngIf=\"form\">\n  <div class=\"d-flex flex-row justify-content-between mt-3\">\n    <div class=\"responsive-back d-flex d-lg-none\">\n      <i class=\"bi bi-arrow-left\" routerLink=\"../\"></i>\n    </div>\n    <h2 class=\"mb-0\">\n      {{ label ? label : capitalizeFirstLetter(modelName) }} {{ operation === 'update' ? 'bearbeiten' : 'erstellen' }}\n    </h2>\n\n    <div class=\"d-none d-lg-flex flex-row align-items-center justify-content-end\">\n      <button class=\"btn btn-outline-primary me-2\" *ngIf=\"id && duplicate && !_loading\" (click)=\"duplicateObject()\">\n        Duplizieren\n      </button>\n      <button\n        class=\"btn btn-primary\"\n        type=\"button\"\n        [disabled]=\"!form.touched && !form.dirty\"\n        (click)=\"submit(false)\"\n        *ngIf=\"!_loading\"\n      >\n        {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}\n      </button>\n      <button class=\"btn btn-primary\" type=\"button\" disabled *ngIf=\"_loading\">\n        <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n        {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}...\n      </button>\n    </div>\n  </div>\n\n  <form [formGroup]=\"form\">\n    <base-model-form-sub\n      [id]=\"id\"\n      [fields]=\"fields\"\n      [config]=\"config\"\n      [form]=\"form\"\n      (imageChanged)=\"imageChanged($event)\"\n      (fileChanged)=\"processFileChanges($event)\"\n    ></base-model-form-sub>\n\n    <div class=\"d-none d-lg-flex mt-4\" [ngClass]=\"id && delete ? 'justify-content-between' : 'justify-content-end'\">\n      <div *ngIf=\"id && delete\">\n        <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteObject()\">L\u00F6schen</button>\n      </div>\n      <div>\n        <button\n          class=\"btn btn-primary\"\n          type=\"button\"\n          [disabled]=\"!form.touched && !form.dirty\"\n          (click)=\"submit(false)\"\n          *ngIf=\"!_loading\"\n        >\n          {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}\n        </button>\n        <button class=\"btn btn-primary\" type=\"button\" disabled *ngIf=\"_loading\">\n          <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n          {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}...\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n\n<div class=\"d-block d-lg-none responsive-action-button\" *ngIf=\"showFavButton\">\n  <base-fab-button [buttons]=\"fabButtons\"></base-fab-button>\n</div>\n", styles: [".responsive-back{display:flex;align-items:center;margin-right:6px}.responsive-back .bi-arrow-left{font-size:28px}h2{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.responsive-action-button{position:fixed;bottom:15px;right:15px;z-index:100}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }, { type: i1$1.FormsService }, { type: i1$1.AuthService }, { type: i2$1.Router }, { type: i2$1.ActivatedRoute }, { type: i1$1.CmsService }, { type: i1$1.ToastService }, { type: i1$1.FileService }]; }, propDecorators: { modelName: [{
@@ -1983,10 +2073,10 @@ class EllipsesPipe {
         }
         return value.length > limit ? value.substring(0, limit) + '...' : value;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: EllipsesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: EllipsesPipe, name: "baseEllipses" });
 }
-EllipsesPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: EllipsesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-EllipsesPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: EllipsesPipe, name: "baseEllipses" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: EllipsesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: EllipsesPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'baseEllipses',
@@ -1994,6 +2084,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         }] });
 
 class ModelTableComponent {
+    graphQLMetaService;
+    graphQLService;
+    cmsService;
+    toastService;
+    scrollService;
+    storageService;
+    modelName;
+    objectId;
+    createMode = false;
+    logging = false;
+    create = true;
+    update = true;
+    delete = true;
+    import = true;
+    export = true;
+    duplicate = true;
+    modelConfig = null;
+    config;
+    showFavButton = false;
+    idSelected = new EventEmitter();
+    createModeChanged = new EventEmitter();
+    customFormTemplate;
+    uniqueField = 'id';
+    tableFields = {
+        id: { label: 'ID' },
+        name: { label: 'Name' },
+        title: { label: 'Titel' },
+        description: { label: 'Beschreibung' },
+        email: { label: 'E-Mail' },
+        createdAt: { label: 'Erstellt am', dateFormat: 'dd.MM.YYYY HH:mm' },
+        updatedAt: { label: 'Bearbeitet am', dateFormat: 'dd.MM.YYYY HH:mm' },
+    };
+    meta;
+    objects = [];
+    availableFields = [];
+    id = '';
+    queryName = null;
+    camelModelName;
+    possibleFields = {};
+    componentRef = undefined;
+    totalCount;
+    selectedPageIndex = 0;
+    pages = [];
+    pageItemsLimitControl = new FormControl(25);
+    pageOptions = [
+        {
+            text: '25',
+            value: 25,
+        },
+        {
+            text: '50',
+            value: 50,
+        },
+        {
+            text: '75',
+            value: 75,
+        },
+        {
+            text: '100',
+            value: 100,
+        },
+        {
+            text: '200',
+            value: 200,
+        },
+    ];
+    subscription = new Subscription();
     constructor(graphQLMetaService, graphQLService, cmsService, toastService, scrollService, storageService) {
         this.graphQLMetaService = graphQLMetaService;
         this.graphQLService = graphQLService;
@@ -2001,60 +2158,6 @@ class ModelTableComponent {
         this.toastService = toastService;
         this.scrollService = scrollService;
         this.storageService = storageService;
-        this.createMode = false;
-        this.logging = false;
-        this.create = true;
-        this.update = true;
-        this.delete = true;
-        this.import = true;
-        this.export = true;
-        this.duplicate = true;
-        this.modelConfig = null;
-        this.showFavButton = false;
-        this.idSelected = new EventEmitter();
-        this.createModeChanged = new EventEmitter();
-        this.uniqueField = 'id';
-        this.tableFields = {
-            id: { label: 'ID' },
-            name: { label: 'Name' },
-            title: { label: 'Titel' },
-            description: { label: 'Beschreibung' },
-            email: { label: 'E-Mail' },
-            createdAt: { label: 'Erstellt am', dateFormat: 'dd.MM.YYYY HH:mm' },
-            updatedAt: { label: 'Bearbeitet am', dateFormat: 'dd.MM.YYYY HH:mm' },
-        };
-        this.objects = [];
-        this.availableFields = [];
-        this.id = '';
-        this.queryName = null;
-        this.possibleFields = {};
-        this.componentRef = undefined;
-        this.selectedPageIndex = 0;
-        this.pages = [];
-        this.pageItemsLimitControl = new FormControl(25);
-        this.pageOptions = [
-            {
-                text: '25',
-                value: 25,
-            },
-            {
-                text: '50',
-                value: 50,
-            },
-            {
-                text: '75',
-                value: 75,
-            },
-            {
-                text: '100',
-                value: 100,
-            },
-            {
-                text: '200',
-                value: 200,
-            },
-        ];
-        this.subscription = new Subscription();
     }
     ngAfterViewInit() {
         // Needed time out to prevent ExpressionChangedAfterItHasBeenCheckedError
@@ -2395,10 +2498,10 @@ class ModelTableComponent {
         this.storageService.save('pageIndex', this.selectedPageIndex);
         this.objects = await this.loadObjects(this.availableFields, this.pages[this.selectedPageIndex].skip, this.pages[this.selectedPageIndex].limit);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ModelTableComponent, deps: [{ token: i1$1.GraphQLMetaService }, { token: i1$1.GraphQLService }, { token: i1$1.CmsService }, { token: i1$1.ToastService }, { token: i1$1.ScrollService }, { token: i1$1.StorageService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: ModelTableComponent, selector: "base-model-table", inputs: { modelName: "modelName", objectId: "objectId", createMode: "createMode", logging: "logging", create: "create", update: "update", delete: "delete", import: "import", export: "export", duplicate: "duplicate", modelConfig: "modelConfig", config: "config", showFavButton: "showFavButton" }, outputs: { idSelected: "idSelected", createModeChanged: "createModeChanged" }, viewQueries: [{ propertyName: "customFormTemplate", first: true, predicate: ["customFormTemplate"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!id && !createMode\">\n  <div class=\"w-100 d-flex flex-row justify-content-between align-items-center mb-2 mb-lg-4\">\n    <h2 id=\"model-table-top\" class=\"mb-0\" *ngIf=\"modelName\">\n      {{\n        modelConfig?.plural\n          ? modelConfig?.plural\n          : modelConfig?.label\n          ? modelConfig?.label\n          : capitalizeFirstLetter(camelModelName) + 's'\n      }}\n    </h2>\n    <div class=\"d-flex align-items-center d-none d-lg-block\">\n      <input #importFile type=\"file\" accept=\".json\" class=\"d-none\" (change)=\"processImport($event)\" />\n      <div class=\"btn-group me-4\" *ngIf=\"import || export\">\n        <i\n          class=\"bi bi-three-dots-vertical\"\n          id=\"settingsDropdown\"\n          type=\"button\"\n          data-bs-toggle=\"dropdown\"\n          data-bs-auto-close=\"true\"\n          aria-expanded=\"false\"\n        ></i>\n        <ul class=\"dropdown-menu dropdown-menu-end\" aria-labelledby=\"settingsDropdown\">\n          <li><a class=\"dropdown-item cursor-pointer\" *ngIf=\"export\" (click)=\"processExport()\">Export</a></li>\n          <li><a class=\"dropdown-item cursor-pointer\" *ngIf=\"import\" (click)=\"importFile.click()\"> Import </a></li>\n        </ul>\n      </div>\n      <button class=\"btn btn-primary\" (click)=\"createNewObject()\" *ngIf=\"create\">Erstellen</button>\n    </div>\n  </div>\n\n  <div class=\"container-fluid\" *ngIf=\"totalCount >= 0\">\n    <nav class=\"d-flex row\">\n      <div class=\"col-12 col-md-2\"></div>\n      <ul class=\"pagination justify-content-center col-12 col-md-8\">\n        <li class=\"page-item\">\n          <a\n            class=\"page-link\"\n            (click)=\"selectPage(selectedPageIndex - 1)\"\n            aria-label=\"Previous\"\n            [ngClass]=\"{ disabled: selectedPageIndex - 1 > 0 }\"\n          >\n            <span aria-hidden=\"true\">&laquo;</span>\n          </a>\n        </li>\n        <li class=\"page-item\" *ngFor=\"let page of pages; let i = index\">\n          <a class=\"page-link\" [ngClass]=\"{ active: selectedPageIndex === i }\" (click)=\"selectPage(i)\">{{ i + 1 }}</a>\n        </li>\n        <li class=\"page-item\">\n          <a\n            class=\"page-link\"\n            (click)=\"selectPage(selectedPageIndex + 1)\"\n            aria-label=\"Next\"\n            [ngClass]=\"{ disabled: pages[selectedPageIndex + 1] }\"\n          >\n            <span aria-hidden=\"true\">&raquo;</span>\n          </a>\n        </li>\n      </ul>\n\n      <div class=\"col-12 col-md-2\">\n        <base-select [options]=\"pageOptions\" [control]=\"pageItemsLimitControl\"></base-select>\n      </div>\n    </nav>\n  </div>\n\n  <div\n    class=\"table-responsive\"\n    [ltContextMenu]=\"contextMenu\"\n    [selectors]=\"'.object-col'\"\n    #contextMenuData=\"contextMenuData\"\n  >\n    <table class=\"table table-hover bg-white d-none d-lg-table\">\n      <thead>\n        <tr>\n          <th\n            scope=\"col\"\n            *ngFor=\"let field of availableFields\"\n            [baseSort]=\"objects\"\n            (baseSorted)=\"objects = $event\"\n            data-order=\"desc\"\n            [attr.data-name]=\"field\"\n          >\n            {{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr class=\"object-col\" *ngFor=\"let object of objects\" [id]=\"object[uniqueField]\">\n          <td class=\"cursor-pointer\" *ngFor=\"let field of availableFields\" (click)=\"selectId(object)\">\n            <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n              {{ object[field] | date : tableFields[field]?.dateFormat }} Uhr\n            </ng-container>\n\n            <ng-container *ngIf=\"tableFields[field]?.enumValues\">\n              {{ tableFields[field]?.enumValues[object[field]]?.text }}\n            </ng-container>\n\n            <ng-container *ngIf=\"!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues\">\n              {{ object[field] | baseEllipses : 60 }}\n            </ng-container>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n\n    <div class=\"d-flex d-lg-none flex-column flex-grow-1\">\n      <div class=\"table-card\" *ngFor=\"let object of objects\" [id]=\"object[uniqueField]\">\n        <div class=\"table-card-entry\" *ngFor=\"let field of availableFields; let i = index\" (click)=\"selectId(object)\">\n          <b *ngIf=\"i > 0\"\n            >{{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}:</b\n          >\n          <p [ngClass]=\"{ 'table-card-entry-first': i === 0 }\">\n            <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n              {{ object[field] | date : tableFields[field]?.dateFormat }} Uhr\n            </ng-container>\n\n            <ng-container *ngIf=\"tableFields[field]?.enumValues\">\n              {{ tableFields[field]?.enumValues[object[field]]?.text }}\n            </ng-container>\n\n            <ng-container *ngIf=\"!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues\">\n              {{ object[field] | baseEllipses : 60 }}\n            </ng-container>\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"container-fluid\" *ngIf=\"totalCount >= 0\">\n      <nav class=\"d-flex row\">\n        <div class=\"col-12 col-md-2\"></div>\n        <ul class=\"pagination justify-content-center col-12 col-md-8\">\n          <li class=\"page-item\">\n            <a\n              class=\"page-link\"\n              (click)=\"selectPage(selectedPageIndex - 1)\"\n              aria-label=\"Previous\"\n              [ngClass]=\"{ disabled: selectedPageIndex - 1 > 0 }\"\n            >\n              <span aria-hidden=\"true\">&laquo;</span>\n            </a>\n          </li>\n          <li class=\"page-item\" *ngFor=\"let page of pages; let i = index\">\n            <a class=\"page-link\" [ngClass]=\"{ active: selectedPageIndex === i }\" (click)=\"selectPage(i)\">{{ i + 1 }}</a>\n          </li>\n          <li class=\"page-item\">\n            <a\n              class=\"page-link\"\n              (click)=\"selectPage(selectedPageIndex + 1)\"\n              aria-label=\"Next\"\n              [ngClass]=\"{ disabled: pages[selectedPageIndex + 1] }\"\n            >\n              <span aria-hidden=\"true\">&raquo;</span>\n            </a>\n          </li>\n        </ul>\n\n        <div class=\"col-12 col-md-2\">\n          <base-select [options]=\"pageOptions\" [control]=\"pageItemsLimitControl\"></base-select>\n        </div>\n      </nav>\n    </div>\n\n    <div class=\"context-menu\" #contextMenu>\n      <div class=\"context-menu-item\" (click)=\"selectId({ id: contextMenuData.clickedElement?.id })\">Bearbeiten</div>\n      <div class=\"context-menu-item\" (click)=\"openNewTab({ id: contextMenuData.clickedElement?.id })\">\n        In neuen Tab \u00F6ffnen\n      </div>\n      <div class=\"context-menu-item\" *ngIf=\"duplicate\" (click)=\"duplicateObject(contextMenuData.clickedElement?.id)\">\n        Duplizieren\n      </div>\n      <div class=\"context-menu-item\" *ngIf=\"delete\" (click)=\"deleteObject(contextMenuData.clickedElement?.id)\">\n        L\u00F6schen\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"w-100\" *ngIf=\"id || createMode\">\n  <button class=\"d-none d-lg-block btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n  <base-model-form\n    *ngIf=\"!modelConfig?.customTemplateComponent\"\n    [modelName]=\"camelModelName\"\n    [label]=\"modelConfig?.label\"\n    [config]=\"config\"\n    [logging]=\"logging\"\n    [id]=\"id\"\n    (finished)=\"selectId('')\"\n    [delete]=\"delete\"\n    [duplicate]=\"duplicate\"\n    [showFavButton]=\"showFavButton\"\n  ></base-model-form>\n  <ng-template *ngIf=\"modelConfig?.customTemplateComponent\" #customFormTemplate></ng-template>\n</div>\n\n<div class=\"responsive-action-button d-block d-lg-none\">\n  <base-fab-button\n    [fabIcon]=\"'bi-plus'\"\n    (click)=\"createNewObject()\"\n    *ngIf=\"!(id || createMode) && showFavButton\"\n  ></base-fab-button>\n</div>\n", styles: [".cursor-pointer{cursor:pointer}.asc:after,.desc:after{border-style:solid;border-width:.2em .2em 0 0;content:\"\";display:inline-block;height:.45em;left:5px;position:relative;transform:rotate(-45deg);vertical-align:middle;width:.45em}.asc:after{transform:rotate(135deg)}td{vertical-align:middle}.bi,th{cursor:pointer;-webkit-user-select:none;user-select:none}.table>:not(:first-child){border-top:0}table{border-radius:.25rem;border-color:#e2e8f0!important}table thead{text-transform:uppercase;font-size:12px}table thead th{padding:12px 24px}table tbody tr td{font-weight:400!important;font-size:16px;padding:16px 24px}.context-menu{opacity:.01%;pointer-events:none;background-color:#fff;border:1px solid #ccc;box-shadow:1px 1px 10px #0000001a;padding:10px 0;position:fixed;top:0;left:0;width:200px;z-index:999}.context-menu-item{cursor:pointer;padding:8px 15px}.context-menu-item:hover{color:var(--bs-primary)}.table-card{background:var(--bs-white);padding:10px;margin-bottom:10px}.table-card-entry{margin-top:4px}.table-card-entry-first{font-size:18px;font-weight:800;color:var(--bs-primary)}.responsive-action-button{position:fixed;bottom:15px;right:15px}.bi-three-dots-vertical{font-size:18px;line-height:18px}.page-item{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: SortDirective, selector: "[baseSort]", inputs: ["baseSort"], outputs: ["baseSorted"] }, { kind: "directive", type: ContextMenuDirective, selector: "[ltContextMenu]", inputs: ["contextMenuData", "ltContextMenu", "xGap", "yGap", "overflowSpace", "selectors"], outputs: ["clickedElement"], exportAs: ["contextMenuData"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["id", "name", "infoText", "label", "placeholder", "objectPath", "control", "tabIndex", "required", "multiple", "search", "options"] }, { kind: "component", type: ModelFormComponent, selector: "base-model-form", inputs: ["modelName", "label", "id", "delete", "onlyUpdateMode", "duplicate", "logging", "config", "showFavButton"], outputs: ["finished"] }, { kind: "component", type: FabButtonComponent, selector: "base-fab-button", inputs: ["fabIcon", "buttons"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: EllipsesPipe, name: "baseEllipses" }] });
 }
-ModelTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ModelTableComponent, deps: [{ token: i1$1.GraphQLMetaService }, { token: i1$1.GraphQLService }, { token: i1$1.CmsService }, { token: i1$1.ToastService }, { token: i1$1.ScrollService }, { token: i1$1.StorageService }], target: i0.ɵɵFactoryTarget.Component });
-ModelTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ModelTableComponent, selector: "base-model-table", inputs: { modelName: "modelName", objectId: "objectId", createMode: "createMode", logging: "logging", create: "create", update: "update", delete: "delete", import: "import", export: "export", duplicate: "duplicate", modelConfig: "modelConfig", config: "config", showFavButton: "showFavButton" }, outputs: { idSelected: "idSelected", createModeChanged: "createModeChanged" }, viewQueries: [{ propertyName: "customFormTemplate", first: true, predicate: ["customFormTemplate"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!id && !createMode\">\n  <div class=\"w-100 d-flex flex-row justify-content-between align-items-center mb-2 mb-lg-4\">\n    <h2 id=\"model-table-top\" class=\"mb-0\" *ngIf=\"modelName\">\n      {{\n        modelConfig?.plural\n          ? modelConfig?.plural\n          : modelConfig?.label\n          ? modelConfig?.label\n          : capitalizeFirstLetter(camelModelName) + 's'\n      }}\n    </h2>\n    <div class=\"d-flex align-items-center d-none d-lg-block\">\n      <input #importFile type=\"file\" accept=\".json\" class=\"d-none\" (change)=\"processImport($event)\" />\n      <div class=\"btn-group me-4\" *ngIf=\"import || export\">\n        <i\n          class=\"bi bi-three-dots-vertical\"\n          id=\"settingsDropdown\"\n          type=\"button\"\n          data-bs-toggle=\"dropdown\"\n          data-bs-auto-close=\"true\"\n          aria-expanded=\"false\"\n        ></i>\n        <ul class=\"dropdown-menu dropdown-menu-end\" aria-labelledby=\"settingsDropdown\">\n          <li><a class=\"dropdown-item cursor-pointer\" *ngIf=\"export\" (click)=\"processExport()\">Export</a></li>\n          <li><a class=\"dropdown-item cursor-pointer\" *ngIf=\"import\" (click)=\"importFile.click()\"> Import </a></li>\n        </ul>\n      </div>\n      <button class=\"btn btn-primary\" (click)=\"createNewObject()\" *ngIf=\"create\">Erstellen</button>\n    </div>\n  </div>\n\n  <div class=\"container-fluid\" *ngIf=\"totalCount >= 0\">\n    <nav class=\"d-flex row\">\n      <div class=\"col-12 col-md-2\"></div>\n      <ul class=\"pagination justify-content-center col-12 col-md-8\">\n        <li class=\"page-item\">\n          <a\n            class=\"page-link\"\n            (click)=\"selectPage(selectedPageIndex - 1)\"\n            aria-label=\"Previous\"\n            [ngClass]=\"{ disabled: selectedPageIndex - 1 > 0 }\"\n          >\n            <span aria-hidden=\"true\">&laquo;</span>\n          </a>\n        </li>\n        <li class=\"page-item\" *ngFor=\"let page of pages; let i = index\">\n          <a class=\"page-link\" [ngClass]=\"{ active: selectedPageIndex === i }\" (click)=\"selectPage(i)\">{{ i + 1 }}</a>\n        </li>\n        <li class=\"page-item\">\n          <a\n            class=\"page-link\"\n            (click)=\"selectPage(selectedPageIndex + 1)\"\n            aria-label=\"Next\"\n            [ngClass]=\"{ disabled: pages[selectedPageIndex + 1] }\"\n          >\n            <span aria-hidden=\"true\">&raquo;</span>\n          </a>\n        </li>\n      </ul>\n\n      <div class=\"col-12 col-md-2\">\n        <base-select [options]=\"pageOptions\" [control]=\"pageItemsLimitControl\"></base-select>\n      </div>\n    </nav>\n  </div>\n\n  <div\n    class=\"table-responsive\"\n    [ltContextMenu]=\"contextMenu\"\n    [selectors]=\"'.object-col'\"\n    #contextMenuData=\"contextMenuData\"\n  >\n    <table class=\"table table-hover bg-white d-none d-lg-table\">\n      <thead>\n        <tr>\n          <th\n            scope=\"col\"\n            *ngFor=\"let field of availableFields\"\n            [baseSort]=\"objects\"\n            (baseSorted)=\"objects = $event\"\n            data-order=\"desc\"\n            [attr.data-name]=\"field\"\n          >\n            {{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr class=\"object-col\" *ngFor=\"let object of objects\" [id]=\"object[uniqueField]\">\n          <td class=\"cursor-pointer\" *ngFor=\"let field of availableFields\" (click)=\"selectId(object)\">\n            <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n              {{ object[field] | date : tableFields[field]?.dateFormat }} Uhr\n            </ng-container>\n\n            <ng-container *ngIf=\"tableFields[field]?.enumValues\">\n              {{ tableFields[field]?.enumValues[object[field]]?.text }}\n            </ng-container>\n\n            <ng-container *ngIf=\"!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues\">\n              {{ object[field] | baseEllipses : 60 }}\n            </ng-container>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n\n    <div class=\"d-flex d-lg-none flex-column flex-grow-1\">\n      <div class=\"table-card\" *ngFor=\"let object of objects\" [id]=\"object[uniqueField]\">\n        <div class=\"table-card-entry\" *ngFor=\"let field of availableFields; let i = index\" (click)=\"selectId(object)\">\n          <b *ngIf=\"i > 0\"\n            >{{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}:</b\n          >\n          <p [ngClass]=\"{ 'table-card-entry-first': i === 0 }\">\n            <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n              {{ object[field] | date : tableFields[field]?.dateFormat }} Uhr\n            </ng-container>\n\n            <ng-container *ngIf=\"tableFields[field]?.enumValues\">\n              {{ tableFields[field]?.enumValues[object[field]]?.text }}\n            </ng-container>\n\n            <ng-container *ngIf=\"!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues\">\n              {{ object[field] | baseEllipses : 60 }}\n            </ng-container>\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"container-fluid\" *ngIf=\"totalCount >= 0\">\n      <nav class=\"d-flex row\">\n        <div class=\"col-12 col-md-2\"></div>\n        <ul class=\"pagination justify-content-center col-12 col-md-8\">\n          <li class=\"page-item\">\n            <a\n              class=\"page-link\"\n              (click)=\"selectPage(selectedPageIndex - 1)\"\n              aria-label=\"Previous\"\n              [ngClass]=\"{ disabled: selectedPageIndex - 1 > 0 }\"\n            >\n              <span aria-hidden=\"true\">&laquo;</span>\n            </a>\n          </li>\n          <li class=\"page-item\" *ngFor=\"let page of pages; let i = index\">\n            <a class=\"page-link\" [ngClass]=\"{ active: selectedPageIndex === i }\" (click)=\"selectPage(i)\">{{ i + 1 }}</a>\n          </li>\n          <li class=\"page-item\">\n            <a\n              class=\"page-link\"\n              (click)=\"selectPage(selectedPageIndex + 1)\"\n              aria-label=\"Next\"\n              [ngClass]=\"{ disabled: pages[selectedPageIndex + 1] }\"\n            >\n              <span aria-hidden=\"true\">&raquo;</span>\n            </a>\n          </li>\n        </ul>\n\n        <div class=\"col-12 col-md-2\">\n          <base-select [options]=\"pageOptions\" [control]=\"pageItemsLimitControl\"></base-select>\n        </div>\n      </nav>\n    </div>\n\n    <div class=\"context-menu\" #contextMenu>\n      <div class=\"context-menu-item\" (click)=\"selectId({ id: contextMenuData.clickedElement?.id })\">Bearbeiten</div>\n      <div class=\"context-menu-item\" (click)=\"openNewTab({ id: contextMenuData.clickedElement?.id })\">\n        In neuen Tab \u00F6ffnen\n      </div>\n      <div class=\"context-menu-item\" *ngIf=\"duplicate\" (click)=\"duplicateObject(contextMenuData.clickedElement?.id)\">\n        Duplizieren\n      </div>\n      <div class=\"context-menu-item\" *ngIf=\"delete\" (click)=\"deleteObject(contextMenuData.clickedElement?.id)\">\n        L\u00F6schen\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"w-100\" *ngIf=\"id || createMode\">\n  <button class=\"d-none d-lg-block btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n  <base-model-form\n    *ngIf=\"!modelConfig?.customTemplateComponent\"\n    [modelName]=\"camelModelName\"\n    [label]=\"modelConfig?.label\"\n    [config]=\"config\"\n    [logging]=\"logging\"\n    [id]=\"id\"\n    (finished)=\"selectId('')\"\n    [delete]=\"delete\"\n    [duplicate]=\"duplicate\"\n    [showFavButton]=\"showFavButton\"\n  ></base-model-form>\n  <ng-template *ngIf=\"modelConfig?.customTemplateComponent\" #customFormTemplate></ng-template>\n</div>\n\n<div class=\"responsive-action-button d-block d-lg-none\">\n  <base-fab-button\n    [fabIcon]=\"'bi-plus'\"\n    (click)=\"createNewObject()\"\n    *ngIf=\"!(id || createMode) && showFavButton\"\n  ></base-fab-button>\n</div>\n", styles: [".cursor-pointer{cursor:pointer}.asc:after,.desc:after{border-style:solid;border-width:.2em .2em 0 0;content:\"\";display:inline-block;height:.45em;left:5px;position:relative;transform:rotate(-45deg);vertical-align:middle;width:.45em}.asc:after{transform:rotate(135deg)}td{vertical-align:middle}.bi,th{cursor:pointer;-webkit-user-select:none;user-select:none}.table>:not(:first-child){border-top:0}table{border-radius:.25rem;border-color:#e2e8f0!important}table thead{text-transform:uppercase;font-size:12px}table thead th{padding:12px 24px}table tbody tr td{font-weight:400!important;font-size:16px;padding:16px 24px}.context-menu{opacity:.01%;pointer-events:none;background-color:#fff;border:1px solid #ccc;box-shadow:1px 1px 10px #0000001a;padding:10px 0;position:fixed;top:0;left:0;width:200px;z-index:999}.context-menu-item{cursor:pointer;padding:8px 15px}.context-menu-item:hover{color:var(--bs-primary)}.table-card{background:var(--bs-white);padding:10px;margin-bottom:10px}.table-card-entry{margin-top:4px}.table-card-entry-first{font-size:18px;font-weight:800;color:var(--bs-primary)}.responsive-action-button{position:fixed;bottom:15px;right:15px}.bi-three-dots-vertical{font-size:18px;line-height:18px}.page-item{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: SortDirective, selector: "[baseSort]", inputs: ["baseSort"], outputs: ["baseSorted"] }, { kind: "directive", type: ContextMenuDirective, selector: "[ltContextMenu]", inputs: ["contextMenuData", "ltContextMenu", "xGap", "yGap", "overflowSpace", "selectors"], outputs: ["clickedElement"], exportAs: ["contextMenuData"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["id", "name", "infoText", "label", "placeholder", "objectPath", "control", "tabIndex", "required", "multiple", "search", "options"] }, { kind: "component", type: ModelFormComponent, selector: "base-model-form", inputs: ["modelName", "label", "id", "delete", "onlyUpdateMode", "duplicate", "logging", "config", "showFavButton"], outputs: ["finished"] }, { kind: "component", type: FabButtonComponent, selector: "base-fab-button", inputs: ["fabIcon", "buttons"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: EllipsesPipe, name: "baseEllipses" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ModelTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ModelTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'base-model-table', template: "<div *ngIf=\"!id && !createMode\">\n  <div class=\"w-100 d-flex flex-row justify-content-between align-items-center mb-2 mb-lg-4\">\n    <h2 id=\"model-table-top\" class=\"mb-0\" *ngIf=\"modelName\">\n      {{\n        modelConfig?.plural\n          ? modelConfig?.plural\n          : modelConfig?.label\n          ? modelConfig?.label\n          : capitalizeFirstLetter(camelModelName) + 's'\n      }}\n    </h2>\n    <div class=\"d-flex align-items-center d-none d-lg-block\">\n      <input #importFile type=\"file\" accept=\".json\" class=\"d-none\" (change)=\"processImport($event)\" />\n      <div class=\"btn-group me-4\" *ngIf=\"import || export\">\n        <i\n          class=\"bi bi-three-dots-vertical\"\n          id=\"settingsDropdown\"\n          type=\"button\"\n          data-bs-toggle=\"dropdown\"\n          data-bs-auto-close=\"true\"\n          aria-expanded=\"false\"\n        ></i>\n        <ul class=\"dropdown-menu dropdown-menu-end\" aria-labelledby=\"settingsDropdown\">\n          <li><a class=\"dropdown-item cursor-pointer\" *ngIf=\"export\" (click)=\"processExport()\">Export</a></li>\n          <li><a class=\"dropdown-item cursor-pointer\" *ngIf=\"import\" (click)=\"importFile.click()\"> Import </a></li>\n        </ul>\n      </div>\n      <button class=\"btn btn-primary\" (click)=\"createNewObject()\" *ngIf=\"create\">Erstellen</button>\n    </div>\n  </div>\n\n  <div class=\"container-fluid\" *ngIf=\"totalCount >= 0\">\n    <nav class=\"d-flex row\">\n      <div class=\"col-12 col-md-2\"></div>\n      <ul class=\"pagination justify-content-center col-12 col-md-8\">\n        <li class=\"page-item\">\n          <a\n            class=\"page-link\"\n            (click)=\"selectPage(selectedPageIndex - 1)\"\n            aria-label=\"Previous\"\n            [ngClass]=\"{ disabled: selectedPageIndex - 1 > 0 }\"\n          >\n            <span aria-hidden=\"true\">&laquo;</span>\n          </a>\n        </li>\n        <li class=\"page-item\" *ngFor=\"let page of pages; let i = index\">\n          <a class=\"page-link\" [ngClass]=\"{ active: selectedPageIndex === i }\" (click)=\"selectPage(i)\">{{ i + 1 }}</a>\n        </li>\n        <li class=\"page-item\">\n          <a\n            class=\"page-link\"\n            (click)=\"selectPage(selectedPageIndex + 1)\"\n            aria-label=\"Next\"\n            [ngClass]=\"{ disabled: pages[selectedPageIndex + 1] }\"\n          >\n            <span aria-hidden=\"true\">&raquo;</span>\n          </a>\n        </li>\n      </ul>\n\n      <div class=\"col-12 col-md-2\">\n        <base-select [options]=\"pageOptions\" [control]=\"pageItemsLimitControl\"></base-select>\n      </div>\n    </nav>\n  </div>\n\n  <div\n    class=\"table-responsive\"\n    [ltContextMenu]=\"contextMenu\"\n    [selectors]=\"'.object-col'\"\n    #contextMenuData=\"contextMenuData\"\n  >\n    <table class=\"table table-hover bg-white d-none d-lg-table\">\n      <thead>\n        <tr>\n          <th\n            scope=\"col\"\n            *ngFor=\"let field of availableFields\"\n            [baseSort]=\"objects\"\n            (baseSorted)=\"objects = $event\"\n            data-order=\"desc\"\n            [attr.data-name]=\"field\"\n          >\n            {{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr class=\"object-col\" *ngFor=\"let object of objects\" [id]=\"object[uniqueField]\">\n          <td class=\"cursor-pointer\" *ngFor=\"let field of availableFields\" (click)=\"selectId(object)\">\n            <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n              {{ object[field] | date : tableFields[field]?.dateFormat }} Uhr\n            </ng-container>\n\n            <ng-container *ngIf=\"tableFields[field]?.enumValues\">\n              {{ tableFields[field]?.enumValues[object[field]]?.text }}\n            </ng-container>\n\n            <ng-container *ngIf=\"!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues\">\n              {{ object[field] | baseEllipses : 60 }}\n            </ng-container>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n\n    <div class=\"d-flex d-lg-none flex-column flex-grow-1\">\n      <div class=\"table-card\" *ngFor=\"let object of objects\" [id]=\"object[uniqueField]\">\n        <div class=\"table-card-entry\" *ngFor=\"let field of availableFields; let i = index\" (click)=\"selectId(object)\">\n          <b *ngIf=\"i > 0\"\n            >{{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}:</b\n          >\n          <p [ngClass]=\"{ 'table-card-entry-first': i === 0 }\">\n            <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n              {{ object[field] | date : tableFields[field]?.dateFormat }} Uhr\n            </ng-container>\n\n            <ng-container *ngIf=\"tableFields[field]?.enumValues\">\n              {{ tableFields[field]?.enumValues[object[field]]?.text }}\n            </ng-container>\n\n            <ng-container *ngIf=\"!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues\">\n              {{ object[field] | baseEllipses : 60 }}\n            </ng-container>\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"container-fluid\" *ngIf=\"totalCount >= 0\">\n      <nav class=\"d-flex row\">\n        <div class=\"col-12 col-md-2\"></div>\n        <ul class=\"pagination justify-content-center col-12 col-md-8\">\n          <li class=\"page-item\">\n            <a\n              class=\"page-link\"\n              (click)=\"selectPage(selectedPageIndex - 1)\"\n              aria-label=\"Previous\"\n              [ngClass]=\"{ disabled: selectedPageIndex - 1 > 0 }\"\n            >\n              <span aria-hidden=\"true\">&laquo;</span>\n            </a>\n          </li>\n          <li class=\"page-item\" *ngFor=\"let page of pages; let i = index\">\n            <a class=\"page-link\" [ngClass]=\"{ active: selectedPageIndex === i }\" (click)=\"selectPage(i)\">{{ i + 1 }}</a>\n          </li>\n          <li class=\"page-item\">\n            <a\n              class=\"page-link\"\n              (click)=\"selectPage(selectedPageIndex + 1)\"\n              aria-label=\"Next\"\n              [ngClass]=\"{ disabled: pages[selectedPageIndex + 1] }\"\n            >\n              <span aria-hidden=\"true\">&raquo;</span>\n            </a>\n          </li>\n        </ul>\n\n        <div class=\"col-12 col-md-2\">\n          <base-select [options]=\"pageOptions\" [control]=\"pageItemsLimitControl\"></base-select>\n        </div>\n      </nav>\n    </div>\n\n    <div class=\"context-menu\" #contextMenu>\n      <div class=\"context-menu-item\" (click)=\"selectId({ id: contextMenuData.clickedElement?.id })\">Bearbeiten</div>\n      <div class=\"context-menu-item\" (click)=\"openNewTab({ id: contextMenuData.clickedElement?.id })\">\n        In neuen Tab \u00F6ffnen\n      </div>\n      <div class=\"context-menu-item\" *ngIf=\"duplicate\" (click)=\"duplicateObject(contextMenuData.clickedElement?.id)\">\n        Duplizieren\n      </div>\n      <div class=\"context-menu-item\" *ngIf=\"delete\" (click)=\"deleteObject(contextMenuData.clickedElement?.id)\">\n        L\u00F6schen\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"w-100\" *ngIf=\"id || createMode\">\n  <button class=\"d-none d-lg-block btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n  <base-model-form\n    *ngIf=\"!modelConfig?.customTemplateComponent\"\n    [modelName]=\"camelModelName\"\n    [label]=\"modelConfig?.label\"\n    [config]=\"config\"\n    [logging]=\"logging\"\n    [id]=\"id\"\n    (finished)=\"selectId('')\"\n    [delete]=\"delete\"\n    [duplicate]=\"duplicate\"\n    [showFavButton]=\"showFavButton\"\n  ></base-model-form>\n  <ng-template *ngIf=\"modelConfig?.customTemplateComponent\" #customFormTemplate></ng-template>\n</div>\n\n<div class=\"responsive-action-button d-block d-lg-none\">\n  <base-fab-button\n    [fabIcon]=\"'bi-plus'\"\n    (click)=\"createNewObject()\"\n    *ngIf=\"!(id || createMode) && showFavButton\"\n  ></base-fab-button>\n</div>\n", styles: [".cursor-pointer{cursor:pointer}.asc:after,.desc:after{border-style:solid;border-width:.2em .2em 0 0;content:\"\";display:inline-block;height:.45em;left:5px;position:relative;transform:rotate(-45deg);vertical-align:middle;width:.45em}.asc:after{transform:rotate(135deg)}td{vertical-align:middle}.bi,th{cursor:pointer;-webkit-user-select:none;user-select:none}.table>:not(:first-child){border-top:0}table{border-radius:.25rem;border-color:#e2e8f0!important}table thead{text-transform:uppercase;font-size:12px}table thead th{padding:12px 24px}table tbody tr td{font-weight:400!important;font-size:16px;padding:16px 24px}.context-menu{opacity:.01%;pointer-events:none;background-color:#fff;border:1px solid #ccc;box-shadow:1px 1px 10px #0000001a;padding:10px 0;position:fixed;top:0;left:0;width:200px;z-index:999}.context-menu-item{cursor:pointer;padding:8px 15px}.context-menu-item:hover{color:var(--bs-primary)}.table-card{background:var(--bs-white);padding:10px;margin-bottom:10px}.table-card-entry{margin-top:4px}.table-card-entry-first{font-size:18px;font-weight:800;color:var(--bs-primary)}.responsive-action-button{position:fixed;bottom:15px;right:15px}.bi-three-dots-vertical{font-size:18px;line-height:18px}.page-item{cursor:pointer}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }, { type: i1$1.CmsService }, { type: i1$1.ToastService }, { type: i1$1.ScrollService }, { type: i1$1.StorageService }]; }, propDecorators: { modelName: [{
@@ -2437,12 +2540,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 class ChangePasswordComponent {
+    formsService;
+    userService;
+    authService;
+    toastService;
+    form;
+    loading = false;
     constructor(formsService, userService, authService, toastService) {
         this.formsService = formsService;
         this.userService = userService;
         this.authService = authService;
         this.toastService = toastService;
-        this.loading = false;
     }
     ngOnInit() {
         this.createForm();
@@ -2510,22 +2618,26 @@ class ChangePasswordComponent {
             },
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ChangePasswordComponent, deps: [{ token: i1$1.FormsService }, { token: i1$1.UserService }, { token: i1$1.AuthService }, { token: i1$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: ChangePasswordComponent, selector: "base-change-password", ngImport: i0, template: "<h3>Passwort \u00E4ndern</h3>\n\n<form [formGroup]=\"form\">\n  <base-input\n    [id]=\"'Aktuelles Passwort'\"\n    [label]=\"'Passwort'\"\n    [required]=\"true\"\n    [type]=\"'password'\"\n    [control]=\"form.get('current')\"\n    [tabIndex]=\"1\"\n    [eyeButton]=\"true\"\n  ></base-input>\n  <base-input\n    [id]=\"'password'\"\n    [label]=\"'Neues Passwort'\"\n    [required]=\"true\"\n    [type]=\"'password'\"\n    [control]=\"form.get('password')\"\n    [tabIndex]=\"2\"\n    [eyeButton]=\"true\"\n  ></base-input>\n  <base-input\n    [id]=\"'password-confirm'\"\n    [label]=\"'Neues Passwort best\u00E4tigen'\"\n    [required]=\"true\"\n    [type]=\"'password'\"\n    [control]=\"form.get('passwordConfirm')\"\n    [tabIndex]=\"3\"\n    [eyeButton]=\"true\"\n  ></base-input>\n\n  <div class=\"d-flex justify-content-end\">\n    <div>\n      <button class=\"btn btn-primary\" (click)=\"submit()\" *ngIf=\"!loading\">Passwort \u00E4ndern</button>\n      <button class=\"btn btn-primary\" type=\"button\" disabled *ngIf=\"loading\">\n        <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n        Loading...\n      </button>\n    </div>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["id", "name", "infoText", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required", "eyeButton", "objectPath"], outputs: ["enter"] }] });
 }
-ChangePasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ChangePasswordComponent, deps: [{ token: i1$1.FormsService }, { token: i1$1.UserService }, { token: i1$1.AuthService }, { token: i1$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
-ChangePasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ChangePasswordComponent, selector: "base-change-password", ngImport: i0, template: "<h3>Passwort \u00E4ndern</h3>\n\n<form [formGroup]=\"form\">\n  <base-input\n    [id]=\"'Aktuelles Passwort'\"\n    [label]=\"'Passwort'\"\n    [required]=\"true\"\n    [type]=\"'password'\"\n    [control]=\"form.get('current')\"\n    [tabIndex]=\"1\"\n    [eyeButton]=\"true\"\n  ></base-input>\n  <base-input\n    [id]=\"'password'\"\n    [label]=\"'Neues Passwort'\"\n    [required]=\"true\"\n    [type]=\"'password'\"\n    [control]=\"form.get('password')\"\n    [tabIndex]=\"2\"\n    [eyeButton]=\"true\"\n  ></base-input>\n  <base-input\n    [id]=\"'password-confirm'\"\n    [label]=\"'Neues Passwort best\u00E4tigen'\"\n    [required]=\"true\"\n    [type]=\"'password'\"\n    [control]=\"form.get('passwordConfirm')\"\n    [tabIndex]=\"3\"\n    [eyeButton]=\"true\"\n  ></base-input>\n\n  <div class=\"d-flex justify-content-end\">\n    <div>\n      <button class=\"btn btn-primary\" (click)=\"submit()\" *ngIf=\"!loading\">Passwort \u00E4ndern</button>\n      <button class=\"btn btn-primary\" type=\"button\" disabled *ngIf=\"loading\">\n        <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n        Loading...\n      </button>\n    </div>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["id", "name", "infoText", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required", "eyeButton", "objectPath"], outputs: ["enter"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ChangePasswordComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ChangePasswordComponent, decorators: [{
             type: Component,
             args: [{ selector: 'base-change-password', template: "<h3>Passwort \u00E4ndern</h3>\n\n<form [formGroup]=\"form\">\n  <base-input\n    [id]=\"'Aktuelles Passwort'\"\n    [label]=\"'Passwort'\"\n    [required]=\"true\"\n    [type]=\"'password'\"\n    [control]=\"form.get('current')\"\n    [tabIndex]=\"1\"\n    [eyeButton]=\"true\"\n  ></base-input>\n  <base-input\n    [id]=\"'password'\"\n    [label]=\"'Neues Passwort'\"\n    [required]=\"true\"\n    [type]=\"'password'\"\n    [control]=\"form.get('password')\"\n    [tabIndex]=\"2\"\n    [eyeButton]=\"true\"\n  ></base-input>\n  <base-input\n    [id]=\"'password-confirm'\"\n    [label]=\"'Neues Passwort best\u00E4tigen'\"\n    [required]=\"true\"\n    [type]=\"'password'\"\n    [control]=\"form.get('passwordConfirm')\"\n    [tabIndex]=\"3\"\n    [eyeButton]=\"true\"\n  ></base-input>\n\n  <div class=\"d-flex justify-content-end\">\n    <div>\n      <button class=\"btn btn-primary\" (click)=\"submit()\" *ngIf=\"!loading\">Passwort \u00E4ndern</button>\n      <button class=\"btn btn-primary\" type=\"button\" disabled *ngIf=\"loading\">\n        <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n        Loading...\n      </button>\n    </div>\n  </div>\n</form>\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.FormsService }, { type: i1$1.UserService }, { type: i1$1.AuthService }, { type: i1$1.ToastService }]; } });
 
 class DeleteAccountComponent {
+    userService;
+    authService;
+    toastService;
+    router;
+    description = 'Mit dem Löschen Deines Kontos werden alle persönlichen Daten sofort gelöscht und sind nicht wiederherstellbar.';
+    loading = false;
     constructor(userService, authService, toastService, router) {
         this.userService = userService;
         this.authService = authService;
         this.toastService = toastService;
         this.router = router;
-        this.description = 'Mit dem Löschen Deines Kontos werden alle persönlichen Daten sofort gelöscht und sind nicht wiederherstellbar.';
-        this.loading = false;
     }
     deleteAccount() {
         this.loading = true;
@@ -2558,10 +2670,10 @@ class DeleteAccountComponent {
             },
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: DeleteAccountComponent, deps: [{ token: i1$1.UserService }, { token: i1$1.AuthService }, { token: i1$1.ToastService }, { token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: DeleteAccountComponent, selector: "base-delete-account", inputs: { description: "description" }, ngImport: i0, template: "<div>\n  <h3>Konto l\u00F6schen</h3>\n\n  <p>{{ description }}</p>\n\n  <div class=\"d-flex justify-content-end mt-3\">\n    <div>\n      <button class=\"btn btn-primary\" (click)=\"deleteAccount()\" *ngIf=\"!loading\">Konto l\u00F6schen</button>\n      <button class=\"btn btn-primary\" type=\"button\" disabled *ngIf=\"loading\">\n        <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n        Loading...\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-DeleteAccountComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DeleteAccountComponent, deps: [{ token: i1$1.UserService }, { token: i1$1.AuthService }, { token: i1$1.ToastService }, { token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-DeleteAccountComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DeleteAccountComponent, selector: "base-delete-account", inputs: { description: "description" }, ngImport: i0, template: "<div>\n  <h3>Konto l\u00F6schen</h3>\n\n  <p>{{ description }}</p>\n\n  <div class=\"d-flex justify-content-end mt-3\">\n    <div>\n      <button class=\"btn btn-primary\" (click)=\"deleteAccount()\" *ngIf=\"!loading\">Konto l\u00F6schen</button>\n      <button class=\"btn btn-primary\" type=\"button\" disabled *ngIf=\"loading\">\n        <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n        Loading...\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DeleteAccountComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: DeleteAccountComponent, decorators: [{
             type: Component,
             args: [{ selector: 'base-delete-account', template: "<div>\n  <h3>Konto l\u00F6schen</h3>\n\n  <p>{{ description }}</p>\n\n  <div class=\"d-flex justify-content-end mt-3\">\n    <div>\n      <button class=\"btn btn-primary\" (click)=\"deleteAccount()\" *ngIf=\"!loading\">Konto l\u00F6schen</button>\n      <button class=\"btn btn-primary\" type=\"button\" disabled *ngIf=\"loading\">\n        <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n        Loading...\n      </button>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.UserService }, { type: i1$1.AuthService }, { type: i1$1.ToastService }, { type: i2$1.Router }]; }, propDecorators: { description: [{
@@ -2569,16 +2681,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 class BackButtonDirective {
+    navigation;
     constructor(navigation) {
         this.navigation = navigation;
     }
     onClick() {
         this.navigation.back();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BackButtonDirective, deps: [{ token: i1$1.NavigationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: BackButtonDirective, selector: "[baseBackButton]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
 }
-BackButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: BackButtonDirective, deps: [{ token: i1$1.NavigationService }], target: i0.ɵɵFactoryTarget.Directive });
-BackButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: BackButtonDirective, selector: "[baseBackButton]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: BackButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BackButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[baseBackButton]',
@@ -2589,7 +2702,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 // Modules
-const imports = [FormsModule, ReactiveFormsModule, CommonModule, RouterModule, ImageCropperModule, NgbTooltipModule];
+const imports = [FormsModule, ReactiveFormsModule, CommonModule, RouterModule, ImageCropperModule];
 // Imported and exported elements
 const elements = [
     // Directives
@@ -2619,61 +2732,61 @@ const elements = [
     EllipsesPipe,
 ];
 class BaseComponentsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BaseComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: BaseComponentsModule, declarations: [
+            // Directives
+            SortDirective,
+            BackButtonDirective,
+            ContextMenuDirective,
+            StopPropagationDirective,
+            // Components
+            InputComponent,
+            SelectComponent,
+            CheckboxComponent,
+            TextareaComponent,
+            ToastComponent,
+            TagsComponent,
+            LoadingBarComponent,
+            SkeletonLoaderComponent,
+            BreadcrumbComponent,
+            ModelFormComponent,
+            ModelTableComponent,
+            ModelFormSubComponent,
+            UploadImageComponent,
+            RefenceInputComponent,
+            ChangePasswordComponent,
+            DeleteAccountComponent,
+            FabButtonComponent,
+            // Pipes
+            EllipsesPipe], imports: [FormsModule, ReactiveFormsModule, CommonModule, RouterModule, ImageCropperModule], exports: [
+            // Directives
+            SortDirective,
+            BackButtonDirective,
+            ContextMenuDirective,
+            StopPropagationDirective,
+            // Components
+            InputComponent,
+            SelectComponent,
+            CheckboxComponent,
+            TextareaComponent,
+            ToastComponent,
+            TagsComponent,
+            LoadingBarComponent,
+            SkeletonLoaderComponent,
+            BreadcrumbComponent,
+            ModelFormComponent,
+            ModelTableComponent,
+            ModelFormSubComponent,
+            UploadImageComponent,
+            RefenceInputComponent,
+            ChangePasswordComponent,
+            DeleteAccountComponent,
+            FabButtonComponent,
+            // Pipes
+            EllipsesPipe] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BaseComponentsModule, imports: [imports] });
 }
-BaseComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: BaseComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BaseComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: BaseComponentsModule, declarations: [
-        // Directives
-        SortDirective,
-        BackButtonDirective,
-        ContextMenuDirective,
-        StopPropagationDirective,
-        // Components
-        InputComponent,
-        SelectComponent,
-        CheckboxComponent,
-        TextareaComponent,
-        ToastComponent,
-        TagsComponent,
-        LoadingBarComponent,
-        SkeletonLoaderComponent,
-        BreadcrumbComponent,
-        ModelFormComponent,
-        ModelTableComponent,
-        ModelFormSubComponent,
-        UploadImageComponent,
-        RefenceInputComponent,
-        ChangePasswordComponent,
-        DeleteAccountComponent,
-        FabButtonComponent,
-        // Pipes
-        EllipsesPipe], imports: [FormsModule, ReactiveFormsModule, CommonModule, RouterModule, ImageCropperModule, NgbTooltipModule], exports: [
-        // Directives
-        SortDirective,
-        BackButtonDirective,
-        ContextMenuDirective,
-        StopPropagationDirective,
-        // Components
-        InputComponent,
-        SelectComponent,
-        CheckboxComponent,
-        TextareaComponent,
-        ToastComponent,
-        TagsComponent,
-        LoadingBarComponent,
-        SkeletonLoaderComponent,
-        BreadcrumbComponent,
-        ModelFormComponent,
-        ModelTableComponent,
-        ModelFormSubComponent,
-        UploadImageComponent,
-        RefenceInputComponent,
-        ChangePasswordComponent,
-        DeleteAccountComponent,
-        FabButtonComponent,
-        // Pipes
-        EllipsesPipe] });
-BaseComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: BaseComponentsModule, imports: [imports] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: BaseComponentsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BaseComponentsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: elements,
@@ -2689,19 +2802,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * If you want to use complete custom services and methods, extend ModelFormComponent instead of ModelFormBaseComponent
  */
 class ModelFormBaseComponent {
+    cmsService;
+    toastService;
+    router;
+    route;
+    modelName;
+    label;
+    id;
+    delete = true;
+    onlyUpdateMode = false;
+    duplicate = false;
+    logging = false;
+    config = null;
+    showFavButton = true;
+    finished = new EventEmitter();
+    fabButtons = [];
+    operation;
     constructor(cmsService, toastService, router, route) {
         this.cmsService = cmsService;
         this.toastService = toastService;
         this.router = router;
         this.route = route;
-        this.delete = true;
-        this.onlyUpdateMode = false;
-        this.duplicate = false;
-        this.logging = false;
-        this.config = null;
-        this.showFavButton = true;
-        this.finished = new EventEmitter();
-        this.fabButtons = [];
     }
     ngOnInit() {
         this.initFabActions();
@@ -2783,10 +2904,10 @@ class ModelFormBaseComponent {
         const newDate = new Date(date);
         return newDate.toISOString().substring(0, 16);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ModelFormBaseComponent, deps: [{ token: i1$1.CmsService }, { token: i1$1.ToastService }, { token: i2$1.Router }, { token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: ModelFormBaseComponent, selector: "ng-component", inputs: { modelName: "modelName", label: "label", id: "id", delete: "delete", onlyUpdateMode: "onlyUpdateMode", duplicate: "duplicate", logging: "logging", config: "config", showFavButton: "showFavButton" }, outputs: { finished: "finished" }, ngImport: i0, template: '', isInline: true });
 }
-ModelFormBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ModelFormBaseComponent, deps: [{ token: i1$1.CmsService }, { token: i1$1.ToastService }, { token: i2$1.Router }, { token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-ModelFormBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ModelFormBaseComponent, selector: "ng-component", inputs: { modelName: "modelName", label: "label", id: "id", delete: "delete", onlyUpdateMode: "onlyUpdateMode", duplicate: "duplicate", logging: "logging", config: "config", showFavButton: "showFavButton" }, outputs: { finished: "finished" }, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ModelFormBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ModelFormBaseComponent, decorators: [{
             type: Component,
             args: [{
                     template: '',