@lenne.tech/ng-base 13.17.0 → 13.20.0

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

@@ -8,6 +8,7 @@ import { trigger, transition, query, style, animate } from '@angular/animations'
 import { Subscription } from 'rxjs';
 import * as i1$1 from '@lenne.tech/ng-base/shared';
 import { ToastType, GraphQLRequestType } from '@lenne.tech/ng-base/shared';
+import * as i1$2 from '@angular/common/http';
 
 class InputComponent {
     constructor() {
@@ -369,6 +370,235 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
             args: [{ selector: 'base-breadcrumb', template: "<ul class=\"pt-3\">\n  <li *ngFor=\"let breadcrumb of breadcrumbs$ | async\">\n    <a [routerLink]=\"breadcrumb.url\">{{ breadcrumb.label }}</a>\n  </li>\n</ul>\n", styles: ["ul{list-style:none;margin:0;padding:0}ul li{display:inline}ul li:before{content:\">\";margin:0 6px}ul li:first-child:before{content:\"\";margin:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.BreadcrumbService }]; } });
 
+class UploadImageComponent {
+    constructor(httpClient) {
+        this.httpClient = httpClient;
+        this.supportText = 'Supports: JPEG, JPG, PNG';
+        this.required = false;
+        this.dragText = 'Drag & Drop';
+        this.validExtensions = ['image/jpeg', 'image/jpg', 'image/png'];
+        this.url = 'http://localhost:3000';
+        this.uploadPath = '/files/upload';
+        this.deletePath = '/files/';
+        this.path = '/files/';
+        this.dragActive = false;
+    }
+    /**
+     * The dragOver function is called when the user drags a file over the dropzone. It prevents the default action of the
+     * event, and sets the dragText to 'Release to Upload' and the dragActive to true
+     *
+     * @param event - any - This is the event that is triggered when the user drags a file over the dropzone.
+     */
+    dragOver(event) {
+        event.preventDefault();
+        this.dragText = 'Release to Upload';
+        this.dragActive = true;
+    }
+    /**
+     * When the user drags a file over the drop zone, the dragActive variable is set to true, which will change the color of
+     * the drop zone to green
+     *
+     * @param event - The event object that is passed to the dragLeave event.
+     */
+    dragLeave(event) {
+        this.dragText = 'Drag & Drop';
+        this.dragActive = false;
+    }
+    /**
+     * The function takes an event as a parameter, prevents the default action of the event, sets the URL of the image to the
+     * file that was dragged and dropped, sets the text of the drag and drop area to the default text, and sets the
+     * dragActive variable to false
+     *
+     * @param event - any - This is the event that is triggered when the user drags and drops a file.
+     */
+    drop(event) {
+        event.preventDefault();
+        this.setUrl(event.dataTransfer.files[0]);
+        this.dragText = 'Drag & Drop';
+        this.dragActive = false;
+    }
+    /**
+     * It takes a file as an argument, checks if the file type is valid, and if it is, it creates a new FileReader object,
+     * sets the onload function to set the fileUrl to the result of the fileReader, sets the selectedFile to the file, and
+     * calls the upload function
+     *
+     * @param file - any - this is the file that is selected by the user.
+     */
+    setUrl(file) {
+        if (this.validExtensions.includes(file.type)) {
+            const fileReader = new FileReader();
+            fileReader.onload = () => {
+                this.fileUrl = fileReader.result;
+                this.selectedFile = file;
+                this.upload();
+            };
+            fileReader.readAsDataURL(file);
+        }
+    }
+    /**
+     * The function takes an event as an argument, and then sets the url of the file to the first file in the event's
+     * target's files array
+     *
+     * @param event - any - The event that is triggered when the user selects a file.
+     */
+    selectFile(event) {
+        this.setUrl(event.target.files[0]);
+    }
+    /**
+     * We create a new FormData object, append the selected file to it, and then send it to the server
+     */
+    upload() {
+        const data = new FormData();
+        data.append('file', this.selectedFile);
+        this.httpClient.post(this.url + this.uploadPath, data).subscribe((result) => {
+            if (result?.id) {
+                this.control.setValue(result.id);
+            }
+        });
+    }
+    /**
+     * It deletes the file from the server and sets the selectedFile and fileUrl to null
+     *
+     * @param [id] - The id of the file to delete.
+     */
+    deleteFile(id) {
+        this.selectedFile = null;
+        this.fileUrl = null;
+        if (id) {
+            this.httpClient.delete(this.url + this.deletePath + id).subscribe((result) => {
+                this.selectedFile = null;
+                this.fileUrl = null;
+                this.control.setValue('');
+            });
+        }
+    }
+}
+UploadImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: UploadImageComponent, deps: [{ token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+UploadImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: UploadImageComponent, selector: "base-upload-image", inputs: { id: "id", name: "name", label: "label", supportText: "supportText", required: "required", dragText: "dragText", validExtensions: "validExtensions", control: "control", url: "url", uploadPath: "uploadPath", deletePath: "deletePath", path: "path" }, ngImport: i0, template: "<div class=\"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 }\"\n  >\n    <ng-container *ngIf=\"selectedFile && !control?.value\">\n      <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n      <button class=\"btn btn-danger\" (click)=\"deleteFile()\">L\u00F6schen</button>\n    </ng-container>\n\n    <ng-container *ngIf=\"control?.value\">\n      <img [src]=\"url + path + control?.value\" />\n      <button class=\"btn btn-danger\" (click)=\"deleteFile(control?.value)\">L\u00F6schen</button>\n    </ng-container>\n\n    <ng-container *ngIf=\"!selectedFile && !control?.value\">\n      <div class=\"icon\">\n        <i class=\"bi bi-images\"></i>\n      </div>\n\n      <span class=\"header\">{{ dragText }}</span>\n      <span class=\"header\">or <span class=\"button\" (click)=\"fileInput.click()\">browse</span></span>\n      <input type=\"file\" (change)=\"selectFile($event)\" hidden #fileInput />\n      <span class=\"support\">{{ supportText }}</span>\n    </ng-container>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}.drag-area{height:400px;border:2px dashed #e1e1e1;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%}.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)}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: UploadImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'base-upload-image', template: "<div class=\"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 }\"\n  >\n    <ng-container *ngIf=\"selectedFile && !control?.value\">\n      <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n      <button class=\"btn btn-danger\" (click)=\"deleteFile()\">L\u00F6schen</button>\n    </ng-container>\n\n    <ng-container *ngIf=\"control?.value\">\n      <img [src]=\"url + path + control?.value\" />\n      <button class=\"btn btn-danger\" (click)=\"deleteFile(control?.value)\">L\u00F6schen</button>\n    </ng-container>\n\n    <ng-container *ngIf=\"!selectedFile && !control?.value\">\n      <div class=\"icon\">\n        <i class=\"bi bi-images\"></i>\n      </div>\n\n      <span class=\"header\">{{ dragText }}</span>\n      <span class=\"header\">or <span class=\"button\" (click)=\"fileInput.click()\">browse</span></span>\n      <input type=\"file\" (change)=\"selectFile($event)\" hidden #fileInput />\n      <span class=\"support\">{{ supportText }}</span>\n    </ng-container>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}.drag-area{height:400px;border:2px dashed #e1e1e1;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%}.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)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }]; }, propDecorators: { id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], supportText: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], dragText: [{
+                type: Input
+            }], validExtensions: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], uploadPath: [{
+                type: Input
+            }], deletePath: [{
+                type: Input
+            }], path: [{
+                type: Input
+            }] } });
+
+class RefenceInputComponent {
+    constructor(graphQLService) {
+        this.graphQLService = graphQLService;
+        this.placeholder = '';
+        this.required = false;
+        this.method = 'find';
+        this.fields = ['id', 'name'];
+        this.valueField = 'id';
+        this.nameField = 'name';
+        this.objects = [];
+    }
+    ngOnInit() {
+        this.graphQLService
+            .graphQl(this.method, {
+            fields: this.fields,
+            type: GraphQLRequestType.QUERY,
+        })
+            .subscribe((result) => {
+            if (result) {
+                this.objects = result;
+            }
+        });
+    }
+}
+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"] }] });
+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: [""] }]
+        }], ctorParameters: function () { return [{ type: i1$1.GraphQLService }]; }, propDecorators: { id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], method: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], valueField: [{
+                type: Input
+            }], nameField: [{
+                type: Input
+            }] } });
+
+class ModelFormSubComponent {
+    constructor() {
+        this.config = {};
+        this.keys = [];
+    }
+    ngOnInit() {
+        this.keys = Object.keys(this.fields);
+    }
+    /**
+     * It takes a string, capitalizes the first letter, and returns the new string
+     *
+     * @param value - The string that you want to capitalize the first letter of.
+     * @returns The first letter of the string is being capitalized and the rest of the string is being returned.
+     */
+    capitalizeFirstLetter(value) {
+        return value.charAt(0).toUpperCase() + value.slice(1);
+    }
+    /**
+     * It takes an AbstractControl and returns a FormControl
+     *
+     * @param control - AbstractControl | null | undefined
+     * @returns A FormControl
+     */
+    transformToControl(control) {
+        return control;
+    }
+}
+ModelFormSubComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelFormSubComponent, deps: [], 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" }, ngImport: i0, template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n  <ng-container *ngIf=\"!fields[key]?.type\">\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\">\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]=\"fields[key].isRequired\"\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]=\"fields[key].isRequired\"\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]=\"fields[key].isRequired\"\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]=\"fields[key].isRequired\"\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]=\"fields[key].isRequired\"\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]=\"fields[key].isRequired\"\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]=\"fields[key].isRequired\"\n        ></base-input>\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"] }, { 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"] }, { 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"] }] });
+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\">\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\">\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]=\"fields[key].isRequired\"\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]=\"fields[key].isRequired\"\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]=\"fields[key].isRequired\"\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]=\"fields[key].isRequired\"\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]=\"fields[key].isRequired\"\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]=\"fields[key].isRequired\"\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]=\"fields[key].isRequired\"\n        ></base-input>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n", styles: [""] }]
+        }], propDecorators: { fields: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }] } });
+
 class ModelFormComponent {
     constructor(graphQLMetaService, graphQLService, formsService) {
         this.graphQLMetaService = graphQLMetaService;
@@ -376,6 +606,7 @@ class ModelFormComponent {
         this.formsService = formsService;
         this.delete = true;
         this.logging = false;
+        this.config = {};
         this.finished = new EventEmitter();
         this.loading = false;
         this.keys = [];
@@ -409,12 +640,15 @@ class ModelFormComponent {
                 console.log('ModelFormComponent::init->fields', this.fields);
                 console.log('ModelFormComponent::init->keys', this.keys);
             }
-            this.createForm(this.fields);
+            this.form = this.createForm(this.fields);
             if (this.id) {
                 this.getObjectById(this.id);
             }
         }
     }
+    getKeysFromSubObject(key) {
+        return Object.keys(this.fields[key]);
+    }
     /**
      * It takes an id, and then calls the graphQLService to get the object from the database
      *
@@ -423,11 +657,12 @@ class ModelFormComponent {
     getObjectById(id) {
         if (this.logging) {
             console.log('ModelFormComponent::getObjectById->id', id);
+            console.log('ModelFormComponent::getObjectById->requestFields', this.createRequestObject(this.fields));
         }
         this.graphQLService
             .graphQl('get' + this.capitalizeFirstLetter(this.modelName), {
             arguments: { id },
-            fields: this.keys,
+            fields: this.createRequestObject(this.fields),
             type: GraphQLRequestType.QUERY,
         })
             .subscribe({
@@ -443,6 +678,28 @@ class ModelFormComponent {
             },
         });
     }
+    /**
+     * It takes a GraphQL type collection and returns an array of strings and objects
+     *
+     * @param fields - IGraphQLTypeCollection - This is the object that is returned from the
+     * introspection query.
+     * @returns An array of strings and objects.
+     */
+    createRequestObject(fields) {
+        const requestFields = [];
+        for (const [key, value] of Object.entries(fields)) {
+            if (fields[key]?.type) {
+                requestFields.push(key);
+            }
+            else {
+                const subkeys = this.createRequestObject(fields[key]);
+                const resultObject = {};
+                resultObject[key] = subkeys;
+                requestFields.push(resultObject);
+            }
+        }
+        return requestFields;
+    }
     /**
      * It takes a collection of GraphQL types and creates a form group with a form control for each type
      *
@@ -452,10 +709,13 @@ class ModelFormComponent {
         const group = {};
         for (const [key, value] of Object.entries(fields)) {
             if (fields[key]?.type) {
-                group[key] = new FormControl('', value.isRequired ? Validators.required : []);
+                group[key] = new FormControl(fields[key]?.type === 'Float' ? 0 : '', value.isRequired ? Validators.required : []);
+            }
+            else {
+                group[key] = this.createForm(fields[key]);
             }
         }
-        this.form = new FormGroup(group);
+        return new FormGroup(group);
     }
     /**
      * It calls the graphQLService to delete the object with the id of the object that is currently being edited
@@ -513,6 +773,9 @@ class ModelFormComponent {
             this.loading = false;
             return;
         }
+        if (this.logging) {
+            console.log('ModelFormComponent::submit->formValue', this.form.value);
+        }
         this.graphQLService
             .graphQl(this.operation + this.capitalizeFirstLetter(this.modelName), {
             arguments: this.operation === 'update' ? { id: this.id, input: this.form.value } : { input: this.form.value },
@@ -532,18 +795,22 @@ class ModelFormComponent {
     }
 }
 ModelFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelFormComponent, deps: [{ token: i1$1.GraphQLMetaService }, { token: i1$1.GraphQLService }, { token: i1$1.FormsService }], target: i0.ɵɵFactoryTarget.Component });
-ModelFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ModelFormComponent, selector: "base-model-form", inputs: { modelName: "modelName", id: "id", delete: "delete", logging: "logging" }, outputs: { finished: "finished" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"w-100\" *ngIf=\"form\">\n  <h1>{{ capitalizeFirstLetter(modelName) }} {{ operation === 'update' ? 'bearbeiten' : 'erstellen' }}</h1>\n\n  <form [formGroup]=\"form\">\n    <div class=\"mt-3\" *ngFor=\"let key of keys\">\n      <ng-container [ngSwitch]=\"fields[key]?.type\">\n        <ng-container *ngSwitchCase=\"'String'\">\n          <ng-container *ngIf=\"fields[key]?.isList\">\n            <base-tags\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"capitalizeFirstLetter(key)\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"fields[key].isRequired\"\n            ></base-tags>\n          </ng-container>\n\n          <ng-container *ngIf=\"!fields[key]?.isList\">\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"capitalizeFirstLetter(key)\"\n              [type]=\"'text'\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"fields[key].isRequired\"\n            ></base-input>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Boolean'\">\n          <base-checkbox\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"true\"\n          ></base-checkbox>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'DateTime'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"capitalizeFirstLetter(key)\"\n            [type]=\"'datetime-local'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"true\"\n          ></base-input>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"d-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 class=\"btn btn-primary\" type=\"button\" (click)=\"submit()\" *ngIf=\"!loading\">\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", styles: [""], components: [{ 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: CheckboxComponent, selector: "base-checkbox", inputs: ["id", "name", "label", "value", "control", "required"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+ModelFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ModelFormComponent, selector: "base-model-form", inputs: { modelName: "modelName", label: "label", id: "id", delete: "delete", logging: "logging", config: "config" }, outputs: { finished: "finished" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"w-100\" *ngIf=\"form\">\n  <h2>\n    {{ label ? label : capitalizeFirstLetter(modelName) }} {{ operation === 'update' ? 'bearbeiten' : 'erstellen' }}\n  </h2>\n\n  <form [formGroup]=\"form\">\n    <base-model-form-sub [fields]=\"fields\" [config]=\"config\" [form]=\"form\"></base-model-form-sub>\n\n    <div class=\"d-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 class=\"btn btn-primary\" type=\"button\" (click)=\"submit()\" *ngIf=\"!loading\">\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", styles: [""], components: [{ type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["fields", "form", "config"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-model-form', template: "<div class=\"w-100\" *ngIf=\"form\">\n  <h1>{{ capitalizeFirstLetter(modelName) }} {{ operation === 'update' ? 'bearbeiten' : 'erstellen' }}</h1>\n\n  <form [formGroup]=\"form\">\n    <div class=\"mt-3\" *ngFor=\"let key of keys\">\n      <ng-container [ngSwitch]=\"fields[key]?.type\">\n        <ng-container *ngSwitchCase=\"'String'\">\n          <ng-container *ngIf=\"fields[key]?.isList\">\n            <base-tags\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"capitalizeFirstLetter(key)\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"fields[key].isRequired\"\n            ></base-tags>\n          </ng-container>\n\n          <ng-container *ngIf=\"!fields[key]?.isList\">\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"capitalizeFirstLetter(key)\"\n              [type]=\"'text'\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"fields[key].isRequired\"\n            ></base-input>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Boolean'\">\n          <base-checkbox\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"true\"\n          ></base-checkbox>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'DateTime'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"capitalizeFirstLetter(key)\"\n            [type]=\"'datetime-local'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"true\"\n          ></base-input>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"d-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 class=\"btn btn-primary\" type=\"button\" (click)=\"submit()\" *ngIf=\"!loading\">\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", styles: [""] }]
+            args: [{ selector: 'base-model-form', template: "<div class=\"w-100\" *ngIf=\"form\">\n  <h2>\n    {{ label ? label : capitalizeFirstLetter(modelName) }} {{ operation === 'update' ? 'bearbeiten' : 'erstellen' }}\n  </h2>\n\n  <form [formGroup]=\"form\">\n    <base-model-form-sub [fields]=\"fields\" [config]=\"config\" [form]=\"form\"></base-model-form-sub>\n\n    <div class=\"d-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 class=\"btn btn-primary\" type=\"button\" (click)=\"submit()\" *ngIf=\"!loading\">\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", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }, { type: i1$1.FormsService }]; }, propDecorators: { modelName: [{
                 type: Input
+            }], label: [{
+                type: Input
             }], id: [{
                 type: Input
             }], delete: [{
                 type: Input
             }], logging: [{
                 type: Input
+            }], config: [{
+                type: Input
             }], finished: [{
                 type: Output
             }] } });
@@ -556,10 +823,11 @@ class ModelTableComponent {
         this.create = true;
         this.update = true;
         this.delete = true;
-        this.logging = false;
-        this.tableFields = ['id', 'name', 'title', 'description', 'email', 'createdAt', 'updatedAt'];
+        this.config = {};
+        this.fieldConfig = {};
         this.idSelected = new EventEmitter();
         this.createModeChanged = new EventEmitter();
+        this.tableFields = ['id', 'name', 'title', 'description', 'email', 'createdAt', 'updatedAt'];
         this.objects = [];
         this.availableFields = [];
         this.selectedId = '';
@@ -581,7 +849,7 @@ class ModelTableComponent {
         }
         if (changes['objectId'] && this.meta) {
             if (this.selectedId !== this.objectId) {
-                if (this.logging) {
+                if (this.config?.logging) {
                     console.log('ModelTableComponent::ngOnChanges->selectedId', this.selectedId);
                 }
                 this.selectedId = this.objectId;
@@ -594,6 +862,9 @@ class ModelTableComponent {
      */
     init() {
         this.availableFields = [];
+        if (this.config?.tableFields) {
+            this.tableFields = this.config.tableFields;
+        }
         const possibleFields = this.meta.getFields('find' + this.capitalizeFirstLetter(this.modelName) + 's');
         const keys = Object.keys(possibleFields);
         this.tableFields?.forEach((field) => {
@@ -601,7 +872,7 @@ class ModelTableComponent {
                 this.availableFields.push(field);
             }
         });
-        if (this.logging) {
+        if (this.config?.logging) {
             console.log('ModelTableComponent::init->possibleFields', possibleFields);
             console.log('ModelTableComponent::init->keys', keys);
             console.log('ModelTableComponent::init->availableFields', this.availableFields);
@@ -630,7 +901,7 @@ class ModelTableComponent {
         })
             .subscribe({
             next: (value) => {
-                if (this.logging) {
+                if (this.config?.logging) {
                     console.log('ModelTableComponent::loadObjects->value', value);
                 }
                 this.objects = value;
@@ -667,10 +938,10 @@ 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", logging: "logging", tableFields: "tableFields" }, 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    <h1 *ngIf=\"modelName\">{{ capitalizeFirstLetter(modelName) }}s</h1>\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\">{{ capitalizeFirstLetter(field) }}</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          {{ object[field] }}\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    [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", "id", "delete", "logging"], outputs: ["finished"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+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\">{{ capitalizeFirstLetter(field) }}</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          {{ object[field] }}\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"] }] });
 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    <h1 *ngIf=\"modelName\">{{ capitalizeFirstLetter(modelName) }}s</h1>\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\">{{ capitalizeFirstLetter(field) }}</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          {{ object[field] }}\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    [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"] }]
+            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\">{{ capitalizeFirstLetter(field) }}</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          {{ object[field] }}\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"] }]
         }], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }]; }, propDecorators: { modelName: [{
                 type: Input
             }], objectId: [{
@@ -683,9 +954,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
                 type: Input
             }], delete: [{
                 type: Input
-            }], logging: [{
+            }], config: [{
                 type: Input
-            }], tableFields: [{
+            }], fieldConfig: [{
                 type: Input
             }], idSelected: [{
                 type: Output
@@ -709,6 +980,9 @@ const elements = [
     BreadcrumbComponent,
     ModelFormComponent,
     ModelTableComponent,
+    ModelFormSubComponent,
+    UploadImageComponent,
+    RefenceInputComponent,
 ];
 class BaseComponentsModule {
 }
@@ -725,7 +999,10 @@ BaseComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
         SkeletonLoaderComponent,
         BreadcrumbComponent,
         ModelFormComponent,
-        ModelTableComponent], imports: [FormsModule, ReactiveFormsModule, CommonModule], exports: [
+        ModelTableComponent,
+        ModelFormSubComponent,
+        UploadImageComponent,
+        RefenceInputComponent], imports: [FormsModule, ReactiveFormsModule, CommonModule], exports: [
         // Components
         InputComponent,
         SelectComponent,
@@ -737,7 +1014,10 @@ BaseComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
         SkeletonLoaderComponent,
         BreadcrumbComponent,
         ModelFormComponent,
-        ModelTableComponent] });
+        ModelTableComponent,
+        ModelFormSubComponent,
+        UploadImageComponent,
+        RefenceInputComponent] });
 BaseComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: BaseComponentsModule, imports: [imports] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: BaseComponentsModule, decorators: [{
             type: NgModule,
@@ -756,5 +1036,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseComponentsModule, BreadcrumbComponent, CheckboxComponent, InputComponent, LoadingBarComponent, ModelFormComponent, ModelTableComponent, SelectComponent, SkeletonLoaderComponent, TagsComponent, TextareaComponent, ToastComponent };
+export { BaseComponentsModule, BreadcrumbComponent, CheckboxComponent, InputComponent, LoadingBarComponent, ModelFormComponent, ModelFormSubComponent, ModelTableComponent, RefenceInputComponent, SelectComponent, SkeletonLoaderComponent, TagsComponent, TextareaComponent, ToastComponent, UploadImageComponent };
 //# sourceMappingURL=lenne.tech-ng-base-base-components.mjs.map