@lenne.tech/ng-base 14.21.1 → 14.21.3

package/fesm2020/lenne.tech-ng-base-base-components.mjs

@@ -18,6 +18,7 @@ class InputComponent {
         this.type = 'text';
         this.required = false;
         this.eyeButton = false;
+        this.objectPath = '';
         this.enter = new EventEmitter();
     }
     /**
@@ -41,10 +42,10 @@ class InputComponent {
     }
 }
 InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: InputComponent, selector: "base-input", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", type: "type", required: "required", eyeButton: "eyeButton" }, outputs: { enter: "enter" }, ngImport: i0, template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <div class=\"input-group\">\n    <input\n      [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"] }] });
+InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: InputComponent, selector: "base-input", inputs: { id: "id", name: "name", 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  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-input', template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <div class=\"input-group\">\n    <input\n      [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  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\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"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], name: [{
@@ -65,6 +66,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
                 type: Input
             }], eyeButton: [{
                 type: Input
+            }], objectPath: [{
+                type: Input
             }], enter: [{
                 type: Output
             }] } });
@@ -72,6 +75,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
 class SelectComponent {
     constructor() {
         this.placeholder = '';
+        this.objectPath = '';
         this.required = false;
         this.multiple = false;
         this.search = false;
@@ -84,10 +88,10 @@ class SelectComponent {
     }
 }
 SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: SelectComponent, selector: "base-select", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", 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  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <select\n    #select\n    [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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: SelectComponent, selector: "base-select", inputs: { id: "id", name: "name", 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  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <select\n    #select\n    [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"] }]
+            args: [{ selector: 'base-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\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: [{
                 type: ViewChild,
                 args: ['select']
@@ -99,6 +103,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
                 type: Input
             }], placeholder: [{
                 type: Input
+            }], objectPath: [{
+                type: Input
             }], control: [{
                 type: Input
             }], tabIndex: [{
@@ -116,13 +122,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
 class CheckboxComponent {
     constructor() {
         this.required = false;
+        this.objectPath = '';
     }
 }
 CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: CheckboxComponent, selector: "base-checkbox", inputs: { id: "id", name: "name", label: "label", value: "value", control: "control", required: "required" }, 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]=\"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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.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]=\"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"] }]
+            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: [{
                 type: Input
             }], name: [{
@@ -135,6 +142,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
                 type: Input
             }], required: [{
                 type: Input
+            }], objectPath: [{
+                type: Input
             }] } });
 
 class TextareaComponent {
@@ -143,13 +152,14 @@ class TextareaComponent {
         this.placeholder = '';
         this.rows = 5;
         this.required = false;
+        this.objectPath = '';
     }
 }
 TextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TextareaComponent, selector: "base-textarea", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", control: "control", rows: "rows", required: "required", tabIndex: "tabIndex" }, ngImport: i0, template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <textarea\n    class=\"form-control\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [rows]=\"rows\"\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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TextareaComponent, selector: "base-textarea", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", control: "control", rows: "rows", required: "required", tabIndex: "tabIndex", objectPath: "objectPath" }, ngImport: i0, template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <textarea\n    class=\"form-control\"\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    [name]=\"name\"\n    [rows]=\"rows\"\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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-textarea', template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <textarea\n    class=\"form-control\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [rows]=\"rows\"\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"] }]
+            args: [{ selector: 'base-textarea', template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <textarea\n    class=\"form-control\"\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    [name]=\"name\"\n    [rows]=\"rows\"\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: { id: [{
                 type: Input
             }], name: [{
@@ -166,6 +176,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
                 type: Input
             }], tabIndex: [{
                 type: Input
+            }], objectPath: [{
+                type: Input
             }] } });
 
 const toastAnimation = trigger('toastAnimation', [
@@ -236,6 +248,7 @@ class TagsComponent {
         this.custom = true;
         this.removeByKey = true;
         this.required = false;
+        this.objectPath = '';
         this.inputValue = '';
     }
     /**
@@ -400,10 +413,10 @@ class TagsComponent {
     }
 }
 TagsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TagsComponent, selector: "base-tags", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", options: "options", custom: "custom", removeByKey: "removeByKey", required: "required" }, ngImport: i0, template: "<div class=\"form-group position-relative\" *ngIf=\"control\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\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]=\"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>\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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TagsComponent, selector: "base-tags", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", options: "options", custom: "custom", removeByKey: "removeByKey", required: "required", objectPath: "objectPath" }, ngImport: i0, template: "<div class=\"form-group position-relative\" *ngIf=\"control\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\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>\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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TagsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-tags', template: "<div class=\"form-group position-relative\" *ngIf=\"control\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\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]=\"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>\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  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\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>\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: [{
@@ -426,6 +439,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
                 type: Input
             }], required: [{
                 type: Input
+            }], objectPath: [{
+                type: Input
             }] } });
 
 class LoadingBarComponent {
@@ -788,7 +803,11 @@ class UploadImageComponent {
      */
     async upload() {
         let result;
-        const fileData = { field: this.id, file: this.selectedFile, base64: await this.getBase64(this.selectedFile) };
+        const fileData = {
+            field: this.objectPath ? this.objectPath + '.' + this.id : this.id,
+            file: this.selectedFile,
+            base64: await this.getBase64(this.selectedFile),
+        };
         this.fileChanged.emit(fileData);
         if (this.uploadDirectly) {
             result = await this.fileService.upload(this.url, this.uploadPath, this.selectedFile, this.compressOptions);
@@ -814,7 +833,11 @@ class UploadImageComponent {
             this.fileUrl = null;
             this.control.setValue('');
             this.control.markAsTouched();
-            this.fileChanged.emit({ field: this.id, file: null, base64: null });
+            this.fileChanged.emit({
+                field: this.objectPath ? this.objectPath + '.' + this.id : this.id,
+                file: null,
+                base64: null,
+            });
             return;
         }
         this.loading = true;
@@ -854,10 +877,10 @@ class UploadImageComponent {
     }
 }
 UploadImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.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 });
-UploadImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: UploadImageComponent, selector: "base-upload-image", inputs: { id: "id", name: "name", 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" }, outputs: { imageUploaded: "imageUploaded", imageDeleted: "imageDeleted", fileChanged: "fileChanged" }, ngImport: i0, template: "<div class=\"form-group mt-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <div\n    class=\"drag-area\"\n    (dragover)=\"dragOver($event)\"\n    (dragleave)=\"dragLeave($event)\"\n    (drop)=\"drop($event)\"\n    [ngClass]=\"{ active: dragActive, pointer: !loading }\"\n    (click)=\"!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 && !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 && !selectedFile && !loading\">\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\">\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  </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?.['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: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.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:300px;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: "directive", type: StopPropagationDirective, selector: "[baseStopPropagation]" }] });
+UploadImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: UploadImageComponent, selector: "base-upload-image", inputs: { id: "id", name: "name", 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", objectPath: "objectPath" }, outputs: { imageUploaded: "imageUploaded", imageDeleted: "imageDeleted", fileChanged: "fileChanged" }, ngImport: i0, template: "<div class=\"form-group mt-3\" [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\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 }\"\n    (click)=\"!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 && !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 && !selectedFile && !loading\">\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\">\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  </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: "directive", type: StopPropagationDirective, selector: "[baseStopPropagation]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: UploadImageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-upload-image', template: "<div class=\"form-group mt-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <div\n    class=\"drag-area\"\n    (dragover)=\"dragOver($event)\"\n    (dragleave)=\"dragLeave($event)\"\n    (drop)=\"drop($event)\"\n    [ngClass]=\"{ active: dragActive, pointer: !loading }\"\n    (click)=\"!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 && !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 && !selectedFile && !loading\">\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\">\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  </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?.['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: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.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:300px;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"] }]
+            args: [{ selector: 'base-upload-image', template: "<div class=\"form-group mt-3\" [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\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 }\"\n    (click)=\"!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 && !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 && !selectedFile && !loading\">\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\">\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  </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: { id: [{
                 type: Input
             }], name: [{
@@ -894,6 +917,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
                 type: Input
             }], uploadDirectly: [{
                 type: Input
+            }], objectPath: [{
+                type: Input
             }], imageUploaded: [{
                 type: Output
             }], imageDeleted: [{
@@ -913,6 +938,7 @@ class RefenceInputComponent {
         this.method = 'find';
         this.fields = ['id', 'name'];
         this.valueField = 'id';
+        this.objectPath = '';
         this.nameField = 'name';
         this.objects = [];
         this.optionsForTagInput = [];
@@ -1100,10 +1126,10 @@ class RefenceInputComponent {
     }
 }
 RefenceInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: RefenceInputComponent, deps: [{ token: i1$1.GraphQLService }], target: i0.ɵɵFactoryTarget.Component });
-RefenceInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: RefenceInputComponent, selector: "base-refence-input", inputs: { id: "id", name: "name", 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", nameField: "nameField" }, ngImport: i0, template: "<ng-container *ngIf=\"!isList\">\n  <div class=\"form-group mb-3\">\n    <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n\n    <div class=\"position-relative\" *ngIf=\"search\">\n      <input [formControl]=\"control\" hidden />\n      <input\n        [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      <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      <select\n        [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    </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", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required"] }] });
+RefenceInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: RefenceInputComponent, selector: "base-refence-input", inputs: { id: "id", name: "name", 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" }, ngImport: i0, template: "<ng-container *ngIf=\"!isList\">\n  <div class=\"form-group mb-3\">\n    <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n\n    <div class=\"position-relative\" *ngIf=\"search\">\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      <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      <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    </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", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required", "objectPath"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.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    <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n\n    <div class=\"position-relative\" *ngIf=\"search\">\n      <input [formControl]=\"control\" hidden />\n      <input\n        [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      <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      <select\n        [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    </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"] }]
+            args: [{ selector: 'base-refence-input', template: "<ng-container *ngIf=\"!isList\">\n  <div class=\"form-group mb-3\">\n    <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n\n    <div class=\"position-relative\" *ngIf=\"search\">\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      <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      <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    </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 }]; }, propDecorators: { id: [{
                 type: Input
             }], name: [{
@@ -1134,6 +1160,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
                 type: Input
             }], valueField: [{
                 type: Input
+            }], objectPath: [{
+                type: Input
             }], nameField: [{
                 type: Input
             }] } });
@@ -1154,6 +1182,14 @@ class ModelFormSubComponent {
         });
         // Set user for roles check
         this.user = BasicUser.map(this.authService.currentUser);
+        if (this.parentKey) {
+            if (!this.objectPath) {
+                this.objectPath = this.parentKey;
+            }
+            else {
+                this.objectPath = this.objectPath + '.' + this.parentKey;
+            }
+        }
     }
     /**
      * If the field has fields, return true, otherwise return false.
@@ -1200,12 +1236,14 @@ class ModelFormSubComponent {
     }
 }
 ModelFormSubComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ModelFormSubComponent, deps: [{ token: i1$1.AuthService }], target: i0.ɵɵFactoryTarget.Component });
-ModelFormSubComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: { id: "id", 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        [fields]=\"fields[key].fields\"\n        [config]=\"config[key]?.fields || {}\"\n        [form]=\"form.get(key)\"\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        [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      ></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              [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            ></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              [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            ></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            [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            [maxSize]=\"config[key]?.maxSize\"\n            [uploadDirectly]=\"false\"\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=\"'Reference'\">\n          <base-refence-input\n            [id]=\"key\"\n            [name]=\"key\"\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            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\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          ></base-checkbox>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'LongText'\">\n          <base-textarea\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          ></base-textarea>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Float'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\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          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Password'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\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          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Color'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\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          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'URL'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\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          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Email'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\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          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'DateTime'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\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          ></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", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required", "eyeButton"], outputs: ["enter"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["id", "name", "label", "placeholder", "control", "tabIndex", "required", "multiple", "search", "options"] }, { kind: "component", type: CheckboxComponent, selector: "base-checkbox", inputs: ["id", "name", "label", "value", "control", "required"] }, { kind: "component", type: TextareaComponent, selector: "base-textarea", inputs: ["id", "name", "label", "placeholder", "control", "rows", "required", "tabIndex"] }, { kind: "component", type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required"] }, { kind: "component", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["id", "fields", "form", "config"], outputs: ["imageChanged", "fileChanged"] }, { kind: "component", type: UploadImageComponent, selector: "base-upload-image", inputs: ["id", "name", "label", "supportText", "required", "defaultDragText", "defaultReleaseText", "preButtonText", "buttonText", "validExtensions", "control", "url", "uploadPath", "deletePath", "path", "compressOptions", "maxSize", "uploadDirectly"], outputs: ["imageUploaded", "imageDeleted", "fileChanged"] }, { kind: "component", type: RefenceInputComponent, selector: "base-refence-input", inputs: ["id", "name", "label", "isList", "search", "useParamAsArg", "param", "placeholder", "autocomplete", "tabIndex", "control", "required", "method", "fields", "valueField", "nameField"] }] });
+ModelFormSubComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.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        [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              [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-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              [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            [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            [maxSize]=\"config[key]?.maxSize\"\n            [uploadDirectly]=\"false\"\n            [objectPath]=\"objectPath\"\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=\"'Reference'\">\n          <base-refence-input\n            [id]=\"key\"\n            [name]=\"key\"\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            [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            [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            [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            [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            [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            [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            [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            [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", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required", "eyeButton", "objectPath"], outputs: ["enter"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["id", "name", "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", "label", "placeholder", "control", "rows", "required", "tabIndex", "objectPath"] }, { kind: "component", type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required", "objectPath"] }, { 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", "label", "supportText", "required", "defaultDragText", "defaultReleaseText", "preButtonText", "buttonText", "validExtensions", "control", "url", "uploadPath", "deletePath", "path", "compressOptions", "maxSize", "uploadDirectly", "objectPath"], outputs: ["imageUploaded", "imageDeleted", "fileChanged"] }, { kind: "component", type: RefenceInputComponent, selector: "base-refence-input", inputs: ["id", "name", "label", "isList", "search", "useParamAsArg", "param", "placeholder", "autocomplete", "tabIndex", "control", "required", "method", "fields", "valueField", "objectPath", "nameField"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.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        [fields]=\"fields[key].fields\"\n        [config]=\"config[key]?.fields || {}\"\n        [form]=\"form.get(key)\"\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        [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      ></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              [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            ></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              [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            ></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            [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            [maxSize]=\"config[key]?.maxSize\"\n            [uploadDirectly]=\"false\"\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=\"'Reference'\">\n          <base-refence-input\n            [id]=\"key\"\n            [name]=\"key\"\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            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\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          ></base-checkbox>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'LongText'\">\n          <base-textarea\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          ></base-textarea>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Float'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\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          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Password'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\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          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Color'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\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          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'URL'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\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          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Email'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\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          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'DateTime'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\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          ></base-input>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n" }]
+            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        [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              [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-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              [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            [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            [maxSize]=\"config[key]?.maxSize\"\n            [uploadDirectly]=\"false\"\n            [objectPath]=\"objectPath\"\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=\"'Reference'\">\n          <base-refence-input\n            [id]=\"key\"\n            [name]=\"key\"\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            [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            [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            [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            [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            [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            [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            [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            [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: [{
                 type: Input
+            }], parentKey: [{
+                type: Input
             }], fields: [{
                 type: Input
             }], form: [{
@@ -1350,23 +1388,30 @@ class ModelFormComponent {
                 this.form.patchValue({ ...{}, ...response });
                 // Process patchFields for reference input
                 for (const [key, value] of Object.entries(this.fields)) {
-                    if (this.fields[key]?.type === 'DateTime' || this.config[key]?.type === 'DateTime') {
-                        this.form.get(key).patchValue(this.formatDate(response[key]));
+                    if (this.nestedObject(key, this.fields)?.type === 'DateTime' ||
+                        this.nestedObject(key, this.config)?.type === 'DateTime') {
+                        this.form.get(key).patchValue(this.formatDate(this.nestedObject(key, response)));
                     }
                     // If it not an array
-                    if (this.config[key]?.type === 'Reference' && !this.fields[key]?.isList) {
+                    if (this.nestedObject(key, this.config)?.type === 'Reference' &&
+                        !this.nestedObject(key, this.fields)?.isList) {
                         if (this.form.get(key)) {
                             this.form
                                 .get(key)
-                                .patchValue(response[this.config[key]?.patchField ? this.config[key]?.patchField : key]?.id);
+                                .patchValue(response[this.nestedObject(key, this.config)?.patchField
+                                ? this.nestedObject(key, this.config)?.patchField
+                                : key]?.id);
                         }
                     }
                     // If value is an array
-                    if (this.config[key]?.type === 'Reference' && this.fields[key]?.isList) {
+                    if (this.nestedObject(key, this.config)?.type === 'Reference' &&
+                        this.nestedObject(key, this.fields)?.isList) {
                         if (this.form.get(key)) {
                             this.form
                                 .get(key)
-                                .patchValue(response[this.config[key]?.patchField ? this.config[key]?.patchField : key]?.map((e) => e?.id));
+                                .patchValue(response[this.nestedObject(key, this.config)?.patchField
+                                ? this.nestedObject(key, this.config)?.patchField
+                                : key]?.map((e) => e?.id));
                         }
                     }
                 }
@@ -1417,15 +1462,19 @@ class ModelFormComponent {
      * It takes a collection of GraphQL types and creates a form group with a form control for each type
      *
      * @param fields - IGraphQLTypeCollection
+     * @param parents
      */
-    createForm(fields) {
+    createForm(fields, parents = []) {
         const group = {};
+        let internParents = [...[], ...parents];
         for (const [key, value] of Object.entries(fields)) {
             if (Object.keys(value?.fields)?.length === 0) {
-                group[key] = new UntypedFormControl(null, this.processValidators(this.config[key], value));
+                group[key] = new UntypedFormControl(null, this.processValidators(this.nestedObject(internParents.length ? internParents.join('.') + '.' + key : key, this.config), value));
             }
             else {
-                group[key] = this.createForm(fields[key].fields);
+                internParents.push(key);
+                group[key] = this.createForm(fields[key].fields, internParents);
+                internParents = [];
             }
         }
         if (this.logging) {
@@ -1572,6 +1621,7 @@ class ModelFormComponent {
             data = this.prepareDataForRequest(this.config, this.fields, data);
             if (this.logging) {
                 console.log('ModelFormComponent::submit->valueToGraphql', data);
+                console.log('ModelFormComponent::submit->fileChanges', this.fileChanges);
             }
             if (this.fileChanges?.length) {
                 for (const fileChange of this.fileChanges) {
@@ -1580,21 +1630,21 @@ class ModelFormComponent {
                         // Upload
                         if (this.form.get(key).value && !this.form.get(key).value?.startsWith('data:')) {
                             // Delete
-                            const deleteResult = await this.fileService.delete(this.config[key]?.url, this.config[key]?.deletePath || '/files/', this.object[key]);
+                            const deleteResult = await this.fileService.delete(this.nestedObject(key, this.config)?.url, this.nestedObject(key, this.config)?.deletePath || '/files/', this.nestedObject(key, this.object));
                             if (deleteResult) {
-                                data[key] = '';
+                                this.nestedObject(key, data, '');
                             }
                         }
-                        const uploadResult = await this.fileService.upload(this.config[key]?.url, this.config[key]?.uploadPath || '/files/upload', fileChange.file, this.config[key]?.compressOptions);
+                        const uploadResult = await this.fileService.upload(this.nestedObject(key, this.config)?.url, this.nestedObject(key, this.config)?.uploadPath || '/files/upload', fileChange.file, this.nestedObject(key, this.config)?.compressOptions);
                         if (uploadResult?.id) {
-                            data[key] = uploadResult.id;
+                            this.nestedObject(key, data, uploadResult.id);
                         }
                     }
                     else {
                         // Delete
-                        const result = await this.fileService.delete(this.config[key]?.url, this.config[key]?.deletePath || '/files/', this.object[key]);
+                        const result = await this.fileService.delete(this.nestedObject(key, this.config)?.url, this.nestedObject(key, this.config)?.deletePath || '/files/', this.nestedObject(key, this.object));
                         if (result) {
-                            data[key] = '';
+                            this.nestedObject(key, data, '');
                         }
                     }
                 }
@@ -1720,9 +1770,21 @@ class ModelFormComponent {
         const newDate = new Date(date);
         return newDate.toISOString().substring(0, 16);
     }
+    nestedObject(key, nestedObject, value) {
+        const props = key.split('.');
+        let result = nestedObject;
+        for (let i = 0; i < props.length; i++) {
+            if (value && i === props.length - 1) {
+                result[props[i]] = value;
+                return result[props[i]];
+            }
+            result = result[props[i]]?.fields ? result[props[i]]?.fields : result[props[i]];
+        }
+        return result;
+    }
 }
 ModelFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.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 });
-ModelFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.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: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "component", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["id", "fields", "form", "config"], outputs: ["imageChanged", "fileChanged"] }, { kind: "component", type: FabButtonComponent, selector: "base-fab-button", inputs: ["fabIcon", "buttons"] }] });
+ModelFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.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: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "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: "14.1.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"] }]
@@ -2186,7 +2248,7 @@ class ChangePasswordComponent {
     }
 }
 ChangePasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.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 });
-ChangePasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.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", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required", "eyeButton"], outputs: ["enter"] }] });
+ChangePasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.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", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required", "eyeButton", "objectPath"], outputs: ["enter"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.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" }]