@lenne.tech/ng-base 13.24.0 → 13.25.0

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

@@ -529,6 +529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
 class RefenceInputComponent {
     constructor(graphQLService) {
         this.graphQLService = graphQLService;
+        this.isList = false;
         this.placeholder = '';
         this.required = false;
         this.method = 'find';
@@ -549,18 +550,25 @@ class RefenceInputComponent {
             }
         });
     }
+    getObjectsAsOptions() {
+        return this.objects.map((e) => {
+            return e === null || e === void 0 ? void 0 : e.id;
+        });
+    }
 }
 RefenceInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: RefenceInputComponent, deps: [{ token: i1$1.GraphQLService }], target: i0.ɵɵFactoryTarget.Component });
-RefenceInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: RefenceInputComponent, selector: "base-refence-input", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", required: "required", method: "method", fields: "fields", valueField: "valueField", nameField: "nameField" }, ngImport: i0, template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <input\n    [id]=\"id\"\n    [name]=\"name\"\n    class=\"form-control\"\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    [attr.list]=\"id + '-datalistOptions'\"\n  />\n  <datalist [id]=\"id + '-datalistOptions'\">\n    <option *ngFor=\"let object of objects\" [value]=\"object[valueField]\">{{ object[nameField] }}</option>\n  </datalist>\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?.['matching']\">Die Passw\u00F6rter m\u00FCssen \u00FCberein stimmen.</div>\n  </div>\n</div>\n", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+RefenceInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: RefenceInputComponent, selector: "base-refence-input", inputs: { id: "id", name: "name", label: "label", isList: "isList", 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    <input\n      [id]=\"id\"\n      [name]=\"name\"\n      class=\"form-control\"\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      [attr.list]=\"id + '-datalistOptions'\"\n    />\n    <datalist [id]=\"id + '-datalistOptions'\">\n      <option *ngFor=\"let object of objects\" [value]=\"object[valueField]\">{{ object[nameField] }}</option>\n    </datalist>\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?.['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]=\"getObjectsAsOptions()\"\n  ></base-tags>\n</ng-container>\n", styles: [""], components: [{ type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: RefenceInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-refence-input', template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <input\n    [id]=\"id\"\n    [name]=\"name\"\n    class=\"form-control\"\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    [attr.list]=\"id + '-datalistOptions'\"\n  />\n  <datalist [id]=\"id + '-datalistOptions'\">\n    <option *ngFor=\"let object of objects\" [value]=\"object[valueField]\">{{ object[nameField] }}</option>\n  </datalist>\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?.['matching']\">Die Passw\u00F6rter m\u00FCssen \u00FCberein stimmen.</div>\n  </div>\n</div>\n", styles: [""] }]
+            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    <input\n      [id]=\"id\"\n      [name]=\"name\"\n      class=\"form-control\"\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      [attr.list]=\"id + '-datalistOptions'\"\n    />\n    <datalist [id]=\"id + '-datalistOptions'\">\n      <option *ngFor=\"let object of objects\" [value]=\"object[valueField]\">{{ object[nameField] }}</option>\n    </datalist>\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?.['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]=\"getObjectsAsOptions()\"\n  ></base-tags>\n</ng-container>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1$1.GraphQLService }]; }, propDecorators: { id: [{
                 type: Input
             }], name: [{
                 type: Input
             }], label: [{
                 type: Input
+            }], isList: [{
+                type: Input
             }], placeholder: [{
                 type: Input
             }], autocomplete: [{
@@ -640,10 +648,10 @@ class ModelFormSubComponent {
     }
 }
 ModelFormSubComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelFormSubComponent, deps: [{ token: i1$1.AuthService }], target: i0.ɵɵFactoryTarget.Component });
-ModelFormSubComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: { fields: "fields", form: "form", config: "config" }, outputs: { imageChanged: "imageChanged" }, ngImport: i0, template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n  <ng-container *ngIf=\"!fields[key]?.type && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\">\n    <fieldset class=\"border rounded-3 p-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]\"\n        [config]=\"config[key]?.fields || {}\"\n        [form]=\"form.get(key)\"\n      ></base-model-form-sub>\n    </fieldset>\n  </ng-container>\n\n  <ng-container *ngIf=\"fields[key]?.type && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\">\n    <ng-container *ngIf=\"fields[key]?.isEnum\">\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\">\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            [dragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            (imageDeleted)=\"imageChanged.emit()\"\n            (imageUploaded)=\"imageChanged.emit()\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Reference'\">\n          <base-refence-input\n            [id]=\"key\"\n            [name]=\"key\"\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]?.fields || ['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=\"'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=\"'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: [""], components: [{ type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["fields", "form", "config"], outputs: ["imageChanged"] }, { type: SelectComponent, selector: "base-select", inputs: ["id", "name", "label", "placeholder", "control", "tabIndex", "required", "multiple", "search", "options"] }, { type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required"] }, { type: InputComponent, selector: "base-input", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required"] }, { type: UploadImageComponent, selector: "base-upload-image", inputs: ["id", "name", "label", "supportText", "required", "dragText", "validExtensions", "control", "url", "uploadPath", "deletePath", "path"], outputs: ["imageUploaded", "imageDeleted"] }, { type: RefenceInputComponent, selector: "base-refence-input", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "required", "method", "fields", "valueField", "nameField"] }, { type: CheckboxComponent, selector: "base-checkbox", inputs: ["id", "name", "label", "value", "control", "required"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
+ModelFormSubComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: { fields: "fields", form: "form", config: "config" }, outputs: { imageChanged: "imageChanged" }, ngImport: i0, template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n  <ng-container *ngIf=\"!fields[key]?.type && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\">\n    <fieldset class=\"border rounded-3 p-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]\"\n        [config]=\"config[key]?.fields || {}\"\n        [form]=\"form.get(key)\"\n      ></base-model-form-sub>\n    </fieldset>\n  </ng-container>\n\n  <ng-container *ngIf=\"fields[key]?.type && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\">\n    <ng-container *ngIf=\"fields[key]?.isEnum\">\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\">\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            [dragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            (imageDeleted)=\"imageChanged.emit()\"\n            (imageUploaded)=\"imageChanged.emit()\"\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            [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]?.fields || ['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=\"'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: [""], components: [{ type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["fields", "form", "config"], outputs: ["imageChanged"] }, { type: SelectComponent, selector: "base-select", inputs: ["id", "name", "label", "placeholder", "control", "tabIndex", "required", "multiple", "search", "options"] }, { type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required"] }, { type: InputComponent, selector: "base-input", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required"] }, { type: UploadImageComponent, selector: "base-upload-image", inputs: ["id", "name", "label", "supportText", "required", "dragText", "validExtensions", "control", "url", "uploadPath", "deletePath", "path"], outputs: ["imageUploaded", "imageDeleted"] }, { type: RefenceInputComponent, selector: "base-refence-input", inputs: ["id", "name", "label", "isList", "placeholder", "autocomplete", "tabIndex", "control", "required", "method", "fields", "valueField", "nameField"] }, { type: CheckboxComponent, selector: "base-checkbox", inputs: ["id", "name", "label", "value", "control", "required"] }, { type: TextareaComponent, selector: "base-textarea", inputs: ["id", "name", "label", "placeholder", "control", "rows", "required", "tabIndex"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", 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 *ngIf=\"!fields[key]?.type && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\">\n    <fieldset class=\"border rounded-3 p-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]\"\n        [config]=\"config[key]?.fields || {}\"\n        [form]=\"form.get(key)\"\n      ></base-model-form-sub>\n    </fieldset>\n  </ng-container>\n\n  <ng-container *ngIf=\"fields[key]?.type && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\">\n    <ng-container *ngIf=\"fields[key]?.isEnum\">\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\">\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            [dragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            (imageDeleted)=\"imageChanged.emit()\"\n            (imageUploaded)=\"imageChanged.emit()\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Reference'\">\n          <base-refence-input\n            [id]=\"key\"\n            [name]=\"key\"\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]?.fields || ['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=\"'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=\"'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: [""] }]
+            args: [{ selector: 'base-model-form-sub', template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n  <ng-container *ngIf=\"!fields[key]?.type && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\">\n    <fieldset class=\"border rounded-3 p-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]\"\n        [config]=\"config[key]?.fields || {}\"\n        [form]=\"form.get(key)\"\n      ></base-model-form-sub>\n    </fieldset>\n  </ng-container>\n\n  <ng-container *ngIf=\"fields[key]?.type && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\">\n    <ng-container *ngIf=\"fields[key]?.isEnum\">\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\">\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            [dragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            (imageDeleted)=\"imageChanged.emit()\"\n            (imageUploaded)=\"imageChanged.emit()\"\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            [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]?.fields || ['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=\"'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: [""] }]
         }], ctorParameters: function () { return [{ type: i1$1.AuthService }]; }, propDecorators: { fields: [{
                 type: Input
             }], form: [{
@@ -725,16 +733,24 @@ class ModelFormComponent {
         })
             .subscribe({
             next: (response) => {
-                var _a, _b, _c;
+                var _a, _b, _c, _d, _e, _f, _g, _h;
                 if (this.logging) {
                     console.log('ModelFormComponent::get->value', response);
                 }
                 this.form.patchValue(Object.assign({}, response));
                 // Process patchFields for reference input
                 for (const [key, value] of Object.entries(this.config)) {
-                    if ((_a = this.config[key]) === null || _a === void 0 ? void 0 : _a.patchField) {
-                        this.form.get(key).patchValue((_c = response[(_b = this.config[key]) === null || _b === void 0 ? void 0 : _b.patchField]) === null || _c === void 0 ? void 0 : _c.id);
+                    // If it not an array
+                    if (((_a = this.config[key]) === null || _a === void 0 ? void 0 : _a.patchField) && !((_b = this.fields[key]) === null || _b === void 0 ? void 0 : _b.isList)) {
+                        this.form.get(key).patchValue((_d = response[(_c = this.config[key]) === null || _c === void 0 ? void 0 : _c.patchField]) === null || _d === void 0 ? void 0 : _d.id);
                     }
+                    // If value is an array
+                    if (((_e = this.config[key]) === null || _e === void 0 ? void 0 : _e.patchField) && ((_f = this.fields[key]) === null || _f === void 0 ? void 0 : _f.isList)) {
+                        this.form.get(key).patchValue((_h = response[(_g = this.config[key]) === null || _g === void 0 ? void 0 : _g.patchField]) === null || _h === void 0 ? void 0 : _h.map((e) => e === null || e === void 0 ? void 0 : e.id));
+                    }
+                }
+                if (this.logging) {
+                    console.log('ModelFormComponent::getObjectById->patchedForm', this.form);
                 }
             },
             error: (err) => {
@@ -769,6 +785,9 @@ class ModelFormComponent {
                 requestFields.push(resultObject);
             }
         }
+        if (this.logging) {
+            console.log('ModelFormComponent::createRequestObject->requestFields', requestFields);
+        }
         return requestFields;
     }
     /**
@@ -780,13 +799,18 @@ class ModelFormComponent {
         var _a, _b;
         const group = {};
         for (const [key, value] of Object.entries(fields)) {
-            if ((_a = fields[key]) === null || _a === void 0 ? void 0 : _a.type) {
-                group[key] = new FormControl(((_b = fields[key]) === null || _b === void 0 ? void 0 : _b.type) === 'Float' ? 0 : '', value.isRequired ? Validators.required : []);
+            if (value === null || value === void 0 ? void 0 : value.type) {
+                group[key] = new FormControl((value === null || value === void 0 ? void 0 : value.type) === 'Float' ? 0 : '', (this.config[key] && ((_a = this.config[key]) === null || _a === void 0 ? void 0 : _a.required) !== undefined ? (_b = this.config[key]) === null || _b === void 0 ? void 0 : _b.required : value.isRequired)
+                    ? Validators.required
+                    : []);
             }
             else {
                 group[key] = this.createForm(fields[key]);
             }
         }
+        if (this.logging) {
+            console.log('ModelFormComponent::createForm->group', group);
+        }
         return new FormGroup(group);
     }
     /**
@@ -910,6 +934,7 @@ class ModelTableComponent {
         this.graphQLMetaService = graphQLMetaService;
         this.graphQLService = graphQLService;
         this.createMode = false;
+        this.logging = false;
         this.create = true;
         this.update = true;
         this.delete = true;
@@ -943,13 +968,12 @@ class ModelTableComponent {
         });
     }
     ngOnChanges(changes) {
-        var _a;
         if (changes['modelName'] && this.meta) {
             this.init();
         }
         if (changes['objectId'] && this.meta) {
             if (this.selectedId !== this.objectId) {
-                if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.logging) {
+                if (this.logging) {
                     console.log('ModelTableComponent::ngOnChanges->selectedId', this.selectedId);
                 }
                 this.selectedId = this.objectId;
@@ -961,7 +985,7 @@ class ModelTableComponent {
      * with. We're then using that information to populate the `availableFields` array
      */
     init() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         this.availableFields = [];
         // Set query name
         if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.queryName)) {
@@ -981,7 +1005,7 @@ class ModelTableComponent {
                 this.availableFields.push(field);
             }
         });
-        if ((_d = this.config) === null || _d === void 0 ? void 0 : _d.logging) {
+        if (this.logging) {
             console.log('ModelTableComponent::init->possibleFields', possibleFields);
             console.log('ModelTableComponent::init->keys', keys);
             console.log('ModelTableComponent::init->availableFields', this.availableFields);
@@ -1010,8 +1034,7 @@ class ModelTableComponent {
         })
             .subscribe({
             next: (value) => {
-                var _a;
-                if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.logging) {
+                if (this.logging) {
                     console.log('ModelTableComponent::loadObjects->value', value);
                 }
                 this.objects = value;
@@ -1048,16 +1071,18 @@ class ModelTableComponent {
     }
 }
 ModelTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelTableComponent, deps: [{ token: i1$1.GraphQLMetaService }, { token: i1$1.GraphQLService }], target: i0.ɵɵFactoryTarget.Component });
-ModelTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ModelTableComponent, selector: "base-model-table", inputs: { modelName: "modelName", objectId: "objectId", createMode: "createMode", create: "create", update: "update", delete: "delete", config: "config", fieldConfig: "fieldConfig" }, outputs: { idSelected: "idSelected", createModeChanged: "createModeChanged" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!selectedId && !createMode\">\n  <div class=\"w-100 d-flex flex-row justify-content-between mb-4\">\n    <h2 *ngIf=\"modelName\">\n      {{ config?.plural ? config?.plural : config?.label ? config?.label : capitalizeFirstLetter(modelName) + 's' }}\n    </h2>\n    <div class=\"d-flex align-items-center\">\n      <button class=\"btn btn-primary\" (click)=\"createNewObject()\" *ngIf=\"create\">Erstellen</button>\n    </div>\n  </div>\n  <table class=\"table table-hover table-responsive bg-white\">\n    <thead>\n      <tr>\n        <th scope=\"col\" *ngFor=\"let field of availableFields\">\n          {{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let object of objects\">\n        <td class=\"cursor-pointer\" *ngFor=\"let field of availableFields\" (click)=\"selectId(object)\">\n          <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n            {{ object[field] | date: tableFields[field]?.dateFormat }} Uhr\n          </ng-container>\n\n          <ng-container *ngIf=\"!tableFields[field]?.dateFormat\">\n            {{ object[field] }}\n          </ng-container>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<div class=\"w-100\" *ngIf=\"selectedId || createMode\">\n  <button class=\"btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n  <base-model-form\n    [modelName]=\"modelName\"\n    [label]=\"config?.label\"\n    [config]=\"fieldConfig\"\n    [logging]=\"config?.logging\"\n    [id]=\"selectedId\"\n    (finished)=\"selectId('')\"\n    [delete]=\"delete\"\n  ></base-model-form>\n</div>\n", styles: [".cursor-pointer{cursor:pointer}.table>:not(:first-child){border-top:0}table{border-radius:.25rem;border-color:#e2e8f0!important}table thead{text-transform:uppercase;font-size:12px}table thead th{padding:12px 24px}table tbody tr td{font-weight:400!important;font-size:16px;padding:16px 24px}\n"], components: [{ type: ModelFormComponent, selector: "base-model-form", inputs: ["modelName", "label", "id", "delete", "logging", "config"], outputs: ["finished"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "date": i1.DatePipe } });
+ModelTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ModelTableComponent, selector: "base-model-table", inputs: { modelName: "modelName", objectId: "objectId", createMode: "createMode", logging: "logging", create: "create", update: "update", delete: "delete", config: "config", fieldConfig: "fieldConfig" }, outputs: { idSelected: "idSelected", createModeChanged: "createModeChanged" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!selectedId && !createMode\">\n  <div class=\"w-100 d-flex flex-row justify-content-between mb-4\">\n    <h2 *ngIf=\"modelName\">\n      {{ config?.plural ? config?.plural : config?.label ? config?.label : capitalizeFirstLetter(modelName) + 's' }}\n    </h2>\n    <div class=\"d-flex align-items-center\">\n      <button class=\"btn btn-primary\" (click)=\"createNewObject()\" *ngIf=\"create\">Erstellen</button>\n    </div>\n  </div>\n  <table class=\"table table-hover table-responsive bg-white\">\n    <thead>\n      <tr>\n        <th scope=\"col\" *ngFor=\"let field of availableFields\">\n          {{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let object of objects\">\n        <td class=\"cursor-pointer\" *ngFor=\"let field of availableFields\" (click)=\"selectId(object)\">\n          <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n            {{ object[field] | date: tableFields[field]?.dateFormat }} Uhr\n          </ng-container>\n\n          <ng-container *ngIf=\"!tableFields[field]?.dateFormat\">\n            {{ object[field] }}\n          </ng-container>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<div class=\"w-100\" *ngIf=\"selectedId || createMode\">\n  <button class=\"btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n  <base-model-form\n    [modelName]=\"modelName\"\n    [label]=\"config?.label\"\n    [config]=\"fieldConfig\"\n    [logging]=\"logging\"\n    [id]=\"selectedId\"\n    (finished)=\"selectId('')\"\n    [delete]=\"delete\"\n  ></base-model-form>\n</div>\n", styles: [".cursor-pointer{cursor:pointer}.table>:not(:first-child){border-top:0}table{border-radius:.25rem;border-color:#e2e8f0!important}table thead{text-transform:uppercase;font-size:12px}table thead th{padding:12px 24px}table tbody tr td{font-weight:400!important;font-size:16px;padding:16px 24px}\n"], components: [{ type: ModelFormComponent, selector: "base-model-form", inputs: ["modelName", "label", "id", "delete", "logging", "config"], outputs: ["finished"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "date": i1.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-model-table', template: "<div *ngIf=\"!selectedId && !createMode\">\n  <div class=\"w-100 d-flex flex-row justify-content-between mb-4\">\n    <h2 *ngIf=\"modelName\">\n      {{ config?.plural ? config?.plural : config?.label ? config?.label : capitalizeFirstLetter(modelName) + 's' }}\n    </h2>\n    <div class=\"d-flex align-items-center\">\n      <button class=\"btn btn-primary\" (click)=\"createNewObject()\" *ngIf=\"create\">Erstellen</button>\n    </div>\n  </div>\n  <table class=\"table table-hover table-responsive bg-white\">\n    <thead>\n      <tr>\n        <th scope=\"col\" *ngFor=\"let field of availableFields\">\n          {{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let object of objects\">\n        <td class=\"cursor-pointer\" *ngFor=\"let field of availableFields\" (click)=\"selectId(object)\">\n          <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n            {{ object[field] | date: tableFields[field]?.dateFormat }} Uhr\n          </ng-container>\n\n          <ng-container *ngIf=\"!tableFields[field]?.dateFormat\">\n            {{ object[field] }}\n          </ng-container>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<div class=\"w-100\" *ngIf=\"selectedId || createMode\">\n  <button class=\"btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n  <base-model-form\n    [modelName]=\"modelName\"\n    [label]=\"config?.label\"\n    [config]=\"fieldConfig\"\n    [logging]=\"config?.logging\"\n    [id]=\"selectedId\"\n    (finished)=\"selectId('')\"\n    [delete]=\"delete\"\n  ></base-model-form>\n</div>\n", styles: [".cursor-pointer{cursor:pointer}.table>:not(:first-child){border-top:0}table{border-radius:.25rem;border-color:#e2e8f0!important}table thead{text-transform:uppercase;font-size:12px}table thead th{padding:12px 24px}table tbody tr td{font-weight:400!important;font-size:16px;padding:16px 24px}\n"] }]
+            args: [{ selector: 'base-model-table', template: "<div *ngIf=\"!selectedId && !createMode\">\n  <div class=\"w-100 d-flex flex-row justify-content-between mb-4\">\n    <h2 *ngIf=\"modelName\">\n      {{ config?.plural ? config?.plural : config?.label ? config?.label : capitalizeFirstLetter(modelName) + 's' }}\n    </h2>\n    <div class=\"d-flex align-items-center\">\n      <button class=\"btn btn-primary\" (click)=\"createNewObject()\" *ngIf=\"create\">Erstellen</button>\n    </div>\n  </div>\n  <table class=\"table table-hover table-responsive bg-white\">\n    <thead>\n      <tr>\n        <th scope=\"col\" *ngFor=\"let field of availableFields\">\n          {{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let object of objects\">\n        <td class=\"cursor-pointer\" *ngFor=\"let field of availableFields\" (click)=\"selectId(object)\">\n          <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n            {{ object[field] | date: tableFields[field]?.dateFormat }} Uhr\n          </ng-container>\n\n          <ng-container *ngIf=\"!tableFields[field]?.dateFormat\">\n            {{ object[field] }}\n          </ng-container>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<div class=\"w-100\" *ngIf=\"selectedId || createMode\">\n  <button class=\"btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n  <base-model-form\n    [modelName]=\"modelName\"\n    [label]=\"config?.label\"\n    [config]=\"fieldConfig\"\n    [logging]=\"logging\"\n    [id]=\"selectedId\"\n    (finished)=\"selectId('')\"\n    [delete]=\"delete\"\n  ></base-model-form>\n</div>\n", styles: [".cursor-pointer{cursor:pointer}.table>:not(:first-child){border-top:0}table{border-radius:.25rem;border-color:#e2e8f0!important}table thead{text-transform:uppercase;font-size:12px}table thead th{padding:12px 24px}table tbody tr td{font-weight:400!important;font-size:16px;padding:16px 24px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }]; }, propDecorators: { modelName: [{
                 type: Input
             }], objectId: [{
                 type: Input
             }], createMode: [{
                 type: Input
+            }], logging: [{
+                type: Input
             }], create: [{
                 type: Input
             }], update: [{