@lenne.tech/ng-base 14.25.9 → 14.26.0

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

@@ -12,6 +12,8 @@ import * as i2$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { __awaiter } from 'tslib';
 import * as i1$2 from '@angular/common/http';
+import * as i4 from 'ngx-image-cropper';
+import { ImageCropperModule } from 'ngx-image-cropper';
 
 class InputComponent {
     constructor() {
@@ -727,6 +729,7 @@ class UploadImageComponent {
         this.deletePath = '/files/';
         this.path = '/files/';
         this.uploadDirectly = false;
+        this.croppingImage = false;
         this.mode = 'file';
         this.imageUploaded = new EventEmitter();
         this.imageDeleted = new EventEmitter();
@@ -734,6 +737,11 @@ class UploadImageComponent {
         this.dragActive = false;
         this.dragText = 'Drag & Drop';
         this.loading = false;
+        this.croppedInProgress = false;
+    }
+    ngOnInit() {
+        // Set default options for cropping
+        this.cOptions = Object.assign({ maintainAspectRatio: true, aspectRatio: 4 / 3, onlyScaleDown: false, imageQuality: 92, autoCrop: true, alignImage: 'center', format: 'jpeg' }, this.croppingOptions);
     }
     /**
      * The dragOver function is called when the user drags a file over the dropzone. It prevents the default action of the
@@ -765,6 +773,9 @@ class UploadImageComponent {
      */
     drop(event) {
         event.preventDefault();
+        if (!this.checkFile(event.dataTransfer.files[0])) {
+            return;
+        }
         this.setUrl(event.dataTransfer.files[0]);
         this.dragText = 'Drag & Drop';
         this.dragActive = false;
@@ -777,6 +788,16 @@ class UploadImageComponent {
      * @param file - any - this is the file that is selected by the user.
      */
     setUrl(file) {
+        const fileReader = new FileReader();
+        fileReader.onload = (result) => {
+            this.loading = true;
+            this.fileUrl = fileReader.result;
+            this.selectedFile = file;
+            this.upload();
+        };
+        fileReader.readAsDataURL(file);
+    }
+    checkFile(file) {
         if (this.maxSize && file.size > this.maxSize) {
             this.toastService.show({
                 id: 'image-invalid-size',
@@ -786,25 +807,21 @@ class UploadImageComponent {
                     (this.maxSize / (1024 * 1024)).toFixed(2) +
                     'MB sein.',
             }, 3500);
-            return;
-        }
-        if (this.validExtensions.includes(file === null || file === void 0 ? void 0 : file.type)) {
-            const fileReader = new FileReader();
-            fileReader.onload = (result) => {
-                this.loading = true;
-                this.fileUrl = fileReader.result;
-                this.selectedFile = file;
-                this.upload();
-            };
-            fileReader.readAsDataURL(file);
+            return false;
         }
         else {
-            this.toastService.show({
-                id: 'image-invalid-format',
-                type: ToastType.ERROR,
-                title: 'Fehlgeschlagen',
-                description: 'Das Format der Datei wird nicht unterstützt.',
-            }, 3500);
+            if (this.validExtensions.includes(file === null || file === void 0 ? void 0 : file.type)) {
+                return true;
+            }
+            else {
+                this.toastService.show({
+                    id: 'image-invalid-format',
+                    type: ToastType.ERROR,
+                    title: 'Fehlgeschlagen',
+                    description: 'Das Format der Datei wird nicht unterstützt.',
+                }, 3500);
+                return false;
+            }
         }
     }
     /**
@@ -814,7 +831,16 @@ class UploadImageComponent {
      * @param event - any - The event that is triggered when the user selects a file.
      */
     selectFile(event) {
-        this.setUrl(event.target.files[0]);
+        if (!this.checkFile(event.target.files[0])) {
+            return;
+        }
+        if (this.croppingImage) {
+            this.croppedInProgress = true;
+            this.fileEvent = event;
+        }
+        else {
+            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
@@ -904,12 +930,43 @@ class UploadImageComponent {
             };
         });
     }
+    base64ToFile(base64, fileName, fileType) {
+        return new Promise((resolve, reject) => {
+            fetch(base64)
+                .then((res) => res.blob())
+                .then((blob) => {
+                resolve(new File([blob], fileName, { type: fileType }));
+            }, (err) => {
+                reject(err);
+            });
+        });
+    }
+    imageCropped($event, fileEvent) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const file = fileEvent.target.files[0];
+            this.croppedFile = yield this.base64ToFile($event.base64, file.name, file.type);
+        });
+    }
+    finishedCropping() {
+        this.fileEvent = null;
+        this.setUrl(this.croppedFile);
+        this.croppedInProgress = false;
+        this.croppedFile = null;
+    }
+    loadImageFailed() {
+        this.toastService.show({
+            id: 'image-invalid-cropped',
+            type: ToastType.ERROR,
+            title: 'Fehlgeschlagen',
+            description: 'Es ist ein Fehler aufgetreten. Bitte probieren Sie es später erneut oder wenden Sie sich an den Support.',
+        }, 3500);
+    }
 }
 UploadImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: UploadImageComponent, deps: [{ token: i1$2.HttpClient }, { token: i1$1.AuthService }, { token: i1$1.FileService }, { token: i1$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
-UploadImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: UploadImageComponent, selector: "base-upload-image", inputs: { id: "id", name: "name", label: "label", supportText: "supportText", required: "required", defaultDragText: "defaultDragText", defaultReleaseText: "defaultReleaseText", preButtonText: "preButtonText", buttonText: "buttonText", validExtensions: "validExtensions", control: "control", url: "url", uploadPath: "uploadPath", deletePath: "deletePath", path: "path", compressOptions: "compressOptions", maxSize: "maxSize", uploadDirectly: "uploadDirectly", objectPath: "objectPath", mode: "mode" }, outputs: { imageUploaded: "imageUploaded", imageDeleted: "imageDeleted", fileChanged: "fileChanged" }, ngImport: i0, template: "<div class=\"form-group mt-3\" [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <div\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    class=\"drag-area\"\n    (dragover)=\"dragOver($event)\"\n    (dragleave)=\"dragLeave($event)\"\n    (drop)=\"drop($event)\"\n    [ngClass]=\"{ active: dragActive, pointer: !loading, 'is-invalid': control?.invalid && control?.touched }\"\n    (click)=\"!loading && fileInput.click()\"\n  >\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n      <div class=\"spinner-border text-primary\" role=\"status\">\n        <span class=\"visually-hidden\">Loading...</span>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"selectedFile && !loading\">\n      <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile()\" baseStopPropagation>L\u00F6schen</button>\n    </ng-container>\n\n    <ng-container *ngIf=\"control?.value && !selectedFile && !loading\">\n      <img [src]=\"control?.value.startsWith('data:') ? control?.value : url + path + control?.value\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\" baseStopPropagation>\n        L\u00F6schen\n      </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"!selectedFile && !control?.value && !loading\">\n      <div class=\"icon\">\n        <i class=\"bi bi-images\"></i>\n      </div>\n\n      <span class=\"header\">{{ dragText }}</span>\n      <span class=\"header\"\n        >{{ preButtonText }}\n        <span class=\"button\" (click)=\"fileInput.click()\" baseStopPropagation>{{ buttonText }}</span></span\n      >\n      <span class=\"support\" [innerText]=\"supportText\"></span>\n    </ng-container>\n\n    <input type=\"file\" (change)=\"selectFile($event)\" [attr.accept]=\"validExtensions?.join(',')\" hidden #fileInput />\n  </div>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n  </div>\n</div>\n", styles: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.is-invalid .drag-area{border-color:var(--bs-danger)}.is-invalid .invalid-feedback{display:block}.required:after{content:\" *\"}.drag-area{height:var(--base-upload-image-area-height);border:2px dashed var(--base-upload-image-area-border-color);background-color:var(--base-upload-image-area-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;margin:10px auto;padding:20px}.drag-area img{height:100%;max-height:280px;max-width:100%;object-fit:scale-down}.drag-area .btn-danger{margin-top:auto}.drag-area .icon{font-size:50px;color:var(--bs-primary)}.drag-area .header{font-size:20px;font-weight:500}.drag-area .support{font-size:12px;color:#e1e1e1;margin:10px 0 15px}.drag-area .button{font-size:20px;font-weight:500;color:var(--bs-primary);cursor:pointer}.active{border:2px solid var(--bs-primary)}.pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: StopPropagationDirective, selector: "[baseStopPropagation]" }] });
+UploadImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: UploadImageComponent, selector: "base-upload-image", inputs: { id: "id", name: "name", label: "label", supportText: "supportText", required: "required", defaultDragText: "defaultDragText", defaultReleaseText: "defaultReleaseText", preButtonText: "preButtonText", buttonText: "buttonText", validExtensions: "validExtensions", control: "control", url: "url", uploadPath: "uploadPath", deletePath: "deletePath", path: "path", compressOptions: "compressOptions", maxSize: "maxSize", uploadDirectly: "uploadDirectly", croppingImage: "croppingImage", croppingOptions: "croppingOptions", objectPath: "objectPath", mode: "mode" }, outputs: { imageUploaded: "imageUploaded", imageDeleted: "imageDeleted", fileChanged: "fileChanged" }, ngImport: i0, template: "<div class=\"form-group mt-3\" [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <div\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    class=\"drag-area\"\n    (dragover)=\"dragOver($event)\"\n    (dragleave)=\"dragLeave($event)\"\n    (drop)=\"drop($event)\"\n    [ngClass]=\"{ active: dragActive, pointer: !loading, 'is-invalid': control?.invalid && control?.touched }\"\n    (click)=\"!croppedInProgress && !loading && fileInput.click()\"\n  >\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n      <div class=\"spinner-border text-primary\" role=\"status\">\n        <span class=\"visually-hidden\">Loading...</span>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"selectedFile && !fileEvent && !croppedInProgress && !loading\">\n      <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile()\" baseStopPropagation>L\u00F6schen</button>\n    </ng-container>\n\n    <ng-container *ngIf=\"control?.value && !fileEvent && !selectedFile && !loading && !croppedInProgress\">\n      <img [src]=\"control?.value.startsWith('data:') ? control?.value : url + path + control?.value\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\" baseStopPropagation>\n        L\u00F6schen\n      </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"!selectedFile && !control?.value && !loading && !fileEvent\">\n      <div class=\"icon\">\n        <i class=\"bi bi-images\"></i>\n      </div>\n\n      <span class=\"header\">{{ dragText }}</span>\n      <span class=\"header\"\n        >{{ preButtonText }}\n        <span class=\"button\" (click)=\"fileInput.click()\" baseStopPropagation>{{ buttonText }}</span></span\n      >\n      <span class=\"support\" [innerText]=\"supportText\"></span>\n    </ng-container>\n\n    <input type=\"file\" (change)=\"selectFile($event)\" [attr.accept]=\"validExtensions?.join(',')\" hidden #fileInput />\n\n    <ng-container *ngIf=\"croppedInProgress && fileEvent\">\n      <image-cropper\n        [imageChangedEvent]=\"fileEvent\"\n        [maintainAspectRatio]=\"cOptions.maintainAspectRatio\"\n        [aspectRatio]=\"cOptions.aspectRatio\"\n        [alignImage]=\"cOptions.alignImage\"\n        [autoCrop]=\"cOptions.autoCrop\"\n        [imageQuality]=\"cOptions.imageQuality\"\n        [onlyScaleDown]=\"cOptions.onlyScaleDown\"\n        [format]=\"cOptions.format\"\n        (imageCropped)=\"imageCropped($event, fileEvent)\"\n        (loadImageFailed)=\"loadImageFailed()\"\n      ></image-cropper>\n      <button class=\"btn btn-primary\" type=\"button\" (click)=\"finishedCropping()\" baseStopPropagation>\n        Zuschneiden\n      </button>\n    </ng-container>\n  </div>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n  </div>\n</div>\n", styles: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.is-invalid .drag-area{border-color:var(--bs-danger)}.is-invalid .invalid-feedback{display:block}.required:after{content:\" *\"}.drag-area{height:var(--base-upload-image-area-height);border:2px dashed var(--base-upload-image-area-border-color);background-color:var(--base-upload-image-area-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;margin:10px auto;padding:20px}.drag-area img{height:100%;max-height:280px;max-width:100%;object-fit:scale-down}.drag-area .btn-danger{margin-top:auto}.drag-area .icon{font-size:50px;color:var(--bs-primary)}.drag-area .header{font-size:20px;font-weight:500}.drag-area .support{font-size:12px;color:#e1e1e1;margin:10px 0 15px}.drag-area .button{font-size:20px;font-weight:500;color:var(--bs-primary);cursor:pointer}.active{border:2px solid var(--bs-primary)}.pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "directive", type: StopPropagationDirective, selector: "[baseStopPropagation]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: UploadImageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-upload-image', template: "<div class=\"form-group mt-3\" [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <div\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    class=\"drag-area\"\n    (dragover)=\"dragOver($event)\"\n    (dragleave)=\"dragLeave($event)\"\n    (drop)=\"drop($event)\"\n    [ngClass]=\"{ active: dragActive, pointer: !loading, 'is-invalid': control?.invalid && control?.touched }\"\n    (click)=\"!loading && fileInput.click()\"\n  >\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n      <div class=\"spinner-border text-primary\" role=\"status\">\n        <span class=\"visually-hidden\">Loading...</span>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"selectedFile && !loading\">\n      <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile()\" baseStopPropagation>L\u00F6schen</button>\n    </ng-container>\n\n    <ng-container *ngIf=\"control?.value && !selectedFile && !loading\">\n      <img [src]=\"control?.value.startsWith('data:') ? control?.value : url + path + control?.value\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\" baseStopPropagation>\n        L\u00F6schen\n      </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"!selectedFile && !control?.value && !loading\">\n      <div class=\"icon\">\n        <i class=\"bi bi-images\"></i>\n      </div>\n\n      <span class=\"header\">{{ dragText }}</span>\n      <span class=\"header\"\n        >{{ preButtonText }}\n        <span class=\"button\" (click)=\"fileInput.click()\" baseStopPropagation>{{ buttonText }}</span></span\n      >\n      <span class=\"support\" [innerText]=\"supportText\"></span>\n    </ng-container>\n\n    <input type=\"file\" (change)=\"selectFile($event)\" [attr.accept]=\"validExtensions?.join(',')\" hidden #fileInput />\n  </div>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n  </div>\n</div>\n", styles: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.is-invalid .drag-area{border-color:var(--bs-danger)}.is-invalid .invalid-feedback{display:block}.required:after{content:\" *\"}.drag-area{height:var(--base-upload-image-area-height);border:2px dashed var(--base-upload-image-area-border-color);background-color:var(--base-upload-image-area-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;margin:10px auto;padding:20px}.drag-area img{height:100%;max-height:280px;max-width:100%;object-fit:scale-down}.drag-area .btn-danger{margin-top:auto}.drag-area .icon{font-size:50px;color:var(--bs-primary)}.drag-area .header{font-size:20px;font-weight:500}.drag-area .support{font-size:12px;color:#e1e1e1;margin:10px 0 15px}.drag-area .button{font-size:20px;font-weight:500;color:var(--bs-primary);cursor:pointer}.active{border:2px solid var(--bs-primary)}.pointer{cursor:pointer}\n"] }]
+            args: [{ selector: 'base-upload-image', template: "<div class=\"form-group mt-3\" [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <div\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    class=\"drag-area\"\n    (dragover)=\"dragOver($event)\"\n    (dragleave)=\"dragLeave($event)\"\n    (drop)=\"drop($event)\"\n    [ngClass]=\"{ active: dragActive, pointer: !loading, 'is-invalid': control?.invalid && control?.touched }\"\n    (click)=\"!croppedInProgress && !loading && fileInput.click()\"\n  >\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n      <div class=\"spinner-border text-primary\" role=\"status\">\n        <span class=\"visually-hidden\">Loading...</span>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"selectedFile && !fileEvent && !croppedInProgress && !loading\">\n      <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile()\" baseStopPropagation>L\u00F6schen</button>\n    </ng-container>\n\n    <ng-container *ngIf=\"control?.value && !fileEvent && !selectedFile && !loading && !croppedInProgress\">\n      <img [src]=\"control?.value.startsWith('data:') ? control?.value : url + path + control?.value\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\" baseStopPropagation>\n        L\u00F6schen\n      </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"!selectedFile && !control?.value && !loading && !fileEvent\">\n      <div class=\"icon\">\n        <i class=\"bi bi-images\"></i>\n      </div>\n\n      <span class=\"header\">{{ dragText }}</span>\n      <span class=\"header\"\n        >{{ preButtonText }}\n        <span class=\"button\" (click)=\"fileInput.click()\" baseStopPropagation>{{ buttonText }}</span></span\n      >\n      <span class=\"support\" [innerText]=\"supportText\"></span>\n    </ng-container>\n\n    <input type=\"file\" (change)=\"selectFile($event)\" [attr.accept]=\"validExtensions?.join(',')\" hidden #fileInput />\n\n    <ng-container *ngIf=\"croppedInProgress && fileEvent\">\n      <image-cropper\n        [imageChangedEvent]=\"fileEvent\"\n        [maintainAspectRatio]=\"cOptions.maintainAspectRatio\"\n        [aspectRatio]=\"cOptions.aspectRatio\"\n        [alignImage]=\"cOptions.alignImage\"\n        [autoCrop]=\"cOptions.autoCrop\"\n        [imageQuality]=\"cOptions.imageQuality\"\n        [onlyScaleDown]=\"cOptions.onlyScaleDown\"\n        [format]=\"cOptions.format\"\n        (imageCropped)=\"imageCropped($event, fileEvent)\"\n        (loadImageFailed)=\"loadImageFailed()\"\n      ></image-cropper>\n      <button class=\"btn btn-primary\" type=\"button\" (click)=\"finishedCropping()\" baseStopPropagation>\n        Zuschneiden\n      </button>\n    </ng-container>\n  </div>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n  </div>\n</div>\n", styles: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.is-invalid .drag-area{border-color:var(--bs-danger)}.is-invalid .invalid-feedback{display:block}.required:after{content:\" *\"}.drag-area{height:var(--base-upload-image-area-height);border:2px dashed var(--base-upload-image-area-border-color);background-color:var(--base-upload-image-area-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;margin:10px auto;padding:20px}.drag-area img{height:100%;max-height:280px;max-width:100%;object-fit:scale-down}.drag-area .btn-danger{margin-top:auto}.drag-area .icon{font-size:50px;color:var(--bs-primary)}.drag-area .header{font-size:20px;font-weight:500}.drag-area .support{font-size:12px;color:#e1e1e1;margin:10px 0 15px}.drag-area .button{font-size:20px;font-weight:500;color:var(--bs-primary);cursor:pointer}.active{border:2px solid var(--bs-primary)}.pointer{cursor:pointer}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: i1$1.AuthService }, { type: i1$1.FileService }, { type: i1$1.ToastService }]; }, propDecorators: { id: [{
                 type: Input
             }], name: [{
@@ -946,6 +1003,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
                 type: Input
             }], uploadDirectly: [{
                 type: Input
+            }], croppingImage: [{
+                type: Input
+            }], croppingOptions: [{
+                type: Input
             }], objectPath: [{
                 type: Input
             }], mode: [{
@@ -1275,10 +1336,10 @@ class ModelFormSubComponent {
     }
 }
 ModelFormSubComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ModelFormSubComponent, deps: [{ token: i1$1.AuthService }], target: i0.ɵɵFactoryTarget.Component });
-ModelFormSubComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: { id: "id", parentKey: "parentKey", fields: "fields", form: "form", config: "config" }, outputs: { imageChanged: "imageChanged", fileChanged: "fileChanged" }, ngImport: i0, template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n  <ng-container\n    *ngIf=\"checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <fieldset class=\"border rounded-3 p-3 mt-3\">\n      <legend class=\"float-none w-auto px-3\">\n        {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n      </legend>\n      <base-model-form-sub\n        [parentKey]=\"key\"\n        [fields]=\"fields[key].fields\"\n        [config]=\"config[key]?.fields || {}\"\n        [form]=\"form.get(key)\"\n        (imageChanged)=\"imageChanged.emit($event)\"\n        (fileChanged)=\"fileChanged.emit($event)\"\n      ></base-model-form-sub>\n    </fieldset>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"!checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <ng-container *ngIf=\"fields[key]?.isEnum && !config[key]?.exclude\">\n      <base-select\n        [id]=\"key\"\n        [name]=\"key\"\n        [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n        [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n        [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n        [control]=\"transformToControl(form?.get(key))\"\n        [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n        [objectPath]=\"objectPath\"\n      ></base-select>\n    </ng-container>\n\n    <ng-container *ngIf=\"!fields[key]?.isEnum && !config[key]?.exclude\">\n      <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n        <ng-container *ngSwitchCase=\"'String'\">\n          <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n            <base-tags\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n              [validators]=\"config[key]?.validators\"\n              [objectPath]=\"objectPath\"\n            ></base-tags>\n          </ng-container>\n\n          <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [type]=\"'text'\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n              [objectPath]=\"objectPath\"\n            ></base-input>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Image'\">\n          <base-upload-image\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [url]=\"config[key]?.url\"\n            [path]=\"config[key]?.path || '/files/'\"\n            [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n            [deletePath]=\"config[key]?.deletePath || '/files/'\"\n            [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n            [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n            [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n            [buttonText]=\"config[key]?.buttonText || 'browse'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [compressOptions]=\"config[key]?.compressOptions\"\n            [maxSize]=\"config[key]?.maxSize\"\n            [uploadDirectly]=\"false\"\n            [objectPath]=\"objectPath\"\n            [mode]=\"config[key]?.imageMode || 'base64'\"\n            (fileChanged)=\"fileChanged.emit($event)\"\n            (imageDeleted)=\"imageChanged.emit(key)\"\n            (imageUploaded)=\"imageChanged.emit(key)\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Upload'\">\n          <base-upload-image\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n            [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n            [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n            [buttonText]=\"config[key]?.buttonText || 'browse'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [compressOptions]=\"config[key]?.compressOptions\"\n            [maxSize]=\"config[key]?.maxSize\"\n            [objectPath]=\"objectPath\"\n            [mode]=\"'file'\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Reference'\">\n          <base-refence-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [isList]=\"fields[key]?.isList\"\n            [useParamAsArg]=\"config[key]?.useParamAsArg ?? false\"\n            [param]=\"id\"\n            [search]=\"config[key]?.searchable ?? true\"\n            [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [method]=\"config[key]?.method || 'find'\"\n            [fields]=\"config[key]?.requestFields || ['id', 'name']\"\n            [valueField]=\"config[key]?.valueField || 'id'\"\n            [nameField]=\"config[key]?.nameField || 'name'\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-refence-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Boolean'\">\n          <base-checkbox\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-checkbox>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'LongText'\">\n          <base-textarea\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-textarea>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Float'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'number'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Password'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'password'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Color'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'color'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'URL'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'url'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Email'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'email'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'DateTime'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'datetime-local'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required", "eyeButton", "objectPath"], outputs: ["enter"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["id", "name", "label", "placeholder", "objectPath", "control", "tabIndex", "required", "multiple", "search", "options"] }, { kind: "component", type: CheckboxComponent, selector: "base-checkbox", inputs: ["id", "name", "label", "value", "control", "required", "objectPath"] }, { kind: "component", type: TextareaComponent, selector: "base-textarea", inputs: ["id", "name", "label", "placeholder", "control", "rows", "required", "tabIndex", "objectPath"] }, { kind: "component", type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required", "objectPath", "validators"] }, { kind: "component", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["id", "parentKey", "fields", "form", "config"], outputs: ["imageChanged", "fileChanged"] }, { kind: "component", type: UploadImageComponent, selector: "base-upload-image", inputs: ["id", "name", "label", "supportText", "required", "defaultDragText", "defaultReleaseText", "preButtonText", "buttonText", "validExtensions", "control", "url", "uploadPath", "deletePath", "path", "compressOptions", "maxSize", "uploadDirectly", "objectPath", "mode"], outputs: ["imageUploaded", "imageDeleted", "fileChanged"] }, { kind: "component", type: RefenceInputComponent, selector: "base-refence-input", inputs: ["id", "name", "label", "isList", "search", "useParamAsArg", "param", "placeholder", "autocomplete", "tabIndex", "control", "required", "method", "fields", "valueField", "objectPath", "nameField"] }] });
+ModelFormSubComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: { id: "id", parentKey: "parentKey", fields: "fields", form: "form", config: "config" }, outputs: { imageChanged: "imageChanged", fileChanged: "fileChanged" }, ngImport: i0, template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n  <ng-container\n    *ngIf=\"checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <fieldset class=\"border rounded-3 p-3 mt-3\">\n      <legend class=\"float-none w-auto px-3\">\n        {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n      </legend>\n      <base-model-form-sub\n        [parentKey]=\"key\"\n        [fields]=\"fields[key].fields\"\n        [config]=\"config[key]?.fields || {}\"\n        [form]=\"form.get(key)\"\n        (imageChanged)=\"imageChanged.emit($event)\"\n        (fileChanged)=\"fileChanged.emit($event)\"\n      ></base-model-form-sub>\n    </fieldset>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"!checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <ng-container *ngIf=\"fields[key]?.isEnum && !config[key]?.exclude\">\n      <base-select\n        [id]=\"key\"\n        [name]=\"key\"\n        [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n        [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n        [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n        [control]=\"transformToControl(form?.get(key))\"\n        [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n        [objectPath]=\"objectPath\"\n      ></base-select>\n    </ng-container>\n\n    <ng-container *ngIf=\"!fields[key]?.isEnum && !config[key]?.exclude\">\n      <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n        <ng-container *ngSwitchCase=\"'String'\">\n          <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n            <base-tags\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n              [validators]=\"config[key]?.validators\"\n              [objectPath]=\"objectPath\"\n            ></base-tags>\n          </ng-container>\n\n          <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [type]=\"'text'\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n              [objectPath]=\"objectPath\"\n            ></base-input>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Image'\">\n          <base-upload-image\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [url]=\"config[key]?.url\"\n            [path]=\"config[key]?.path || '/files/'\"\n            [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n            [deletePath]=\"config[key]?.deletePath || '/files/'\"\n            [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n            [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n            [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n            [buttonText]=\"config[key]?.buttonText || 'browse'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [compressOptions]=\"config[key]?.compressOptions\"\n            [croppingOptions]=\"config[key]?.croppingOptions\"\n            [croppingImage]=\"config[key]?.croppingImage\"\n            [maxSize]=\"config[key]?.maxSize\"\n            [uploadDirectly]=\"false\"\n            [objectPath]=\"objectPath\"\n            [mode]=\"config[key]?.imageMode || 'base64'\"\n            (fileChanged)=\"fileChanged.emit($event)\"\n            (imageDeleted)=\"imageChanged.emit(key)\"\n            (imageUploaded)=\"imageChanged.emit(key)\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Upload'\">\n          <base-upload-image\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n            [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n            [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n            [buttonText]=\"config[key]?.buttonText || 'browse'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [compressOptions]=\"config[key]?.compressOptions\"\n            [maxSize]=\"config[key]?.maxSize\"\n            [objectPath]=\"objectPath\"\n            [mode]=\"'file'\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Reference'\">\n          <base-refence-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [isList]=\"fields[key]?.isList\"\n            [useParamAsArg]=\"config[key]?.useParamAsArg ?? false\"\n            [param]=\"id\"\n            [search]=\"config[key]?.searchable ?? true\"\n            [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [method]=\"config[key]?.method || 'find'\"\n            [fields]=\"config[key]?.requestFields || ['id', 'name']\"\n            [valueField]=\"config[key]?.valueField || 'id'\"\n            [nameField]=\"config[key]?.nameField || 'name'\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-refence-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Boolean'\">\n          <base-checkbox\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-checkbox>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'LongText'\">\n          <base-textarea\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-textarea>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Float'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'number'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Password'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'password'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Color'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'color'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'URL'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'url'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Email'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'email'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'DateTime'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'datetime-local'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required", "eyeButton", "objectPath"], outputs: ["enter"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["id", "name", "label", "placeholder", "objectPath", "control", "tabIndex", "required", "multiple", "search", "options"] }, { kind: "component", type: CheckboxComponent, selector: "base-checkbox", inputs: ["id", "name", "label", "value", "control", "required", "objectPath"] }, { kind: "component", type: TextareaComponent, selector: "base-textarea", inputs: ["id", "name", "label", "placeholder", "control", "rows", "required", "tabIndex", "objectPath"] }, { kind: "component", type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required", "objectPath", "validators"] }, { kind: "component", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["id", "parentKey", "fields", "form", "config"], outputs: ["imageChanged", "fileChanged"] }, { kind: "component", type: UploadImageComponent, selector: "base-upload-image", inputs: ["id", "name", "label", "supportText", "required", "defaultDragText", "defaultReleaseText", "preButtonText", "buttonText", "validExtensions", "control", "url", "uploadPath", "deletePath", "path", "compressOptions", "maxSize", "uploadDirectly", "croppingImage", "croppingOptions", "objectPath", "mode"], outputs: ["imageUploaded", "imageDeleted", "fileChanged"] }, { kind: "component", type: RefenceInputComponent, selector: "base-refence-input", inputs: ["id", "name", "label", "isList", "search", "useParamAsArg", "param", "placeholder", "autocomplete", "tabIndex", "control", "required", "method", "fields", "valueField", "objectPath", "nameField"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ModelFormSubComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-model-form-sub', template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n  <ng-container\n    *ngIf=\"checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <fieldset class=\"border rounded-3 p-3 mt-3\">\n      <legend class=\"float-none w-auto px-3\">\n        {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n      </legend>\n      <base-model-form-sub\n        [parentKey]=\"key\"\n        [fields]=\"fields[key].fields\"\n        [config]=\"config[key]?.fields || {}\"\n        [form]=\"form.get(key)\"\n        (imageChanged)=\"imageChanged.emit($event)\"\n        (fileChanged)=\"fileChanged.emit($event)\"\n      ></base-model-form-sub>\n    </fieldset>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"!checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <ng-container *ngIf=\"fields[key]?.isEnum && !config[key]?.exclude\">\n      <base-select\n        [id]=\"key\"\n        [name]=\"key\"\n        [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n        [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n        [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n        [control]=\"transformToControl(form?.get(key))\"\n        [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n        [objectPath]=\"objectPath\"\n      ></base-select>\n    </ng-container>\n\n    <ng-container *ngIf=\"!fields[key]?.isEnum && !config[key]?.exclude\">\n      <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n        <ng-container *ngSwitchCase=\"'String'\">\n          <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n            <base-tags\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n              [validators]=\"config[key]?.validators\"\n              [objectPath]=\"objectPath\"\n            ></base-tags>\n          </ng-container>\n\n          <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [type]=\"'text'\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n              [objectPath]=\"objectPath\"\n            ></base-input>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Image'\">\n          <base-upload-image\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [url]=\"config[key]?.url\"\n            [path]=\"config[key]?.path || '/files/'\"\n            [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n            [deletePath]=\"config[key]?.deletePath || '/files/'\"\n            [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n            [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n            [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n            [buttonText]=\"config[key]?.buttonText || 'browse'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [compressOptions]=\"config[key]?.compressOptions\"\n            [maxSize]=\"config[key]?.maxSize\"\n            [uploadDirectly]=\"false\"\n            [objectPath]=\"objectPath\"\n            [mode]=\"config[key]?.imageMode || 'base64'\"\n            (fileChanged)=\"fileChanged.emit($event)\"\n            (imageDeleted)=\"imageChanged.emit(key)\"\n            (imageUploaded)=\"imageChanged.emit(key)\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Upload'\">\n          <base-upload-image\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n            [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n            [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n            [buttonText]=\"config[key]?.buttonText || 'browse'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [compressOptions]=\"config[key]?.compressOptions\"\n            [maxSize]=\"config[key]?.maxSize\"\n            [objectPath]=\"objectPath\"\n            [mode]=\"'file'\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Reference'\">\n          <base-refence-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [isList]=\"fields[key]?.isList\"\n            [useParamAsArg]=\"config[key]?.useParamAsArg ?? false\"\n            [param]=\"id\"\n            [search]=\"config[key]?.searchable ?? true\"\n            [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [method]=\"config[key]?.method || 'find'\"\n            [fields]=\"config[key]?.requestFields || ['id', 'name']\"\n            [valueField]=\"config[key]?.valueField || 'id'\"\n            [nameField]=\"config[key]?.nameField || 'name'\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-refence-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Boolean'\">\n          <base-checkbox\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-checkbox>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'LongText'\">\n          <base-textarea\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-textarea>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Float'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'number'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Password'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'password'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Color'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'color'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'URL'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'url'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Email'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'email'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'DateTime'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'datetime-local'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n" }]
+            args: [{ selector: 'base-model-form-sub', template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n  <ng-container\n    *ngIf=\"checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <fieldset class=\"border rounded-3 p-3 mt-3\">\n      <legend class=\"float-none w-auto px-3\">\n        {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n      </legend>\n      <base-model-form-sub\n        [parentKey]=\"key\"\n        [fields]=\"fields[key].fields\"\n        [config]=\"config[key]?.fields || {}\"\n        [form]=\"form.get(key)\"\n        (imageChanged)=\"imageChanged.emit($event)\"\n        (fileChanged)=\"fileChanged.emit($event)\"\n      ></base-model-form-sub>\n    </fieldset>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"!checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <ng-container *ngIf=\"fields[key]?.isEnum && !config[key]?.exclude\">\n      <base-select\n        [id]=\"key\"\n        [name]=\"key\"\n        [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n        [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n        [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n        [control]=\"transformToControl(form?.get(key))\"\n        [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n        [objectPath]=\"objectPath\"\n      ></base-select>\n    </ng-container>\n\n    <ng-container *ngIf=\"!fields[key]?.isEnum && !config[key]?.exclude\">\n      <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n        <ng-container *ngSwitchCase=\"'String'\">\n          <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n            <base-tags\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n              [validators]=\"config[key]?.validators\"\n              [objectPath]=\"objectPath\"\n            ></base-tags>\n          </ng-container>\n\n          <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [type]=\"'text'\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n              [objectPath]=\"objectPath\"\n            ></base-input>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Image'\">\n          <base-upload-image\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [url]=\"config[key]?.url\"\n            [path]=\"config[key]?.path || '/files/'\"\n            [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n            [deletePath]=\"config[key]?.deletePath || '/files/'\"\n            [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n            [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n            [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n            [buttonText]=\"config[key]?.buttonText || 'browse'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [compressOptions]=\"config[key]?.compressOptions\"\n            [croppingOptions]=\"config[key]?.croppingOptions\"\n            [croppingImage]=\"config[key]?.croppingImage\"\n            [maxSize]=\"config[key]?.maxSize\"\n            [uploadDirectly]=\"false\"\n            [objectPath]=\"objectPath\"\n            [mode]=\"config[key]?.imageMode || 'base64'\"\n            (fileChanged)=\"fileChanged.emit($event)\"\n            (imageDeleted)=\"imageChanged.emit(key)\"\n            (imageUploaded)=\"imageChanged.emit(key)\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Upload'\">\n          <base-upload-image\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n            [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n            [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n            [buttonText]=\"config[key]?.buttonText || 'browse'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [compressOptions]=\"config[key]?.compressOptions\"\n            [maxSize]=\"config[key]?.maxSize\"\n            [objectPath]=\"objectPath\"\n            [mode]=\"'file'\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Reference'\">\n          <base-refence-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [isList]=\"fields[key]?.isList\"\n            [useParamAsArg]=\"config[key]?.useParamAsArg ?? false\"\n            [param]=\"id\"\n            [search]=\"config[key]?.searchable ?? true\"\n            [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [method]=\"config[key]?.method || 'find'\"\n            [fields]=\"config[key]?.requestFields || ['id', 'name']\"\n            [valueField]=\"config[key]?.valueField || 'id'\"\n            [nameField]=\"config[key]?.nameField || 'name'\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-refence-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Boolean'\">\n          <base-checkbox\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-checkbox>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'LongText'\">\n          <base-textarea\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-textarea>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Float'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'number'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Password'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'password'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Color'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'color'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'URL'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'url'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Email'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'email'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'DateTime'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'datetime-local'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.AuthService }]; }, propDecorators: { id: [{
                 type: Input
             }], parentKey: [{
@@ -2448,7 +2509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
             }] } });
 
 // Modules
-const imports = [FormsModule, ReactiveFormsModule, CommonModule, RouterModule];
+const imports = [FormsModule, ReactiveFormsModule, CommonModule, RouterModule, ImageCropperModule];
 // Imported and exported elements
 const elements = [
     // Directives
@@ -2506,7 +2567,7 @@ BaseComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
         FabButtonComponent,
         // Pipes
         EllipsesPipe
-    ], imports: [FormsModule, ReactiveFormsModule, CommonModule, RouterModule], exports: [
+    ], imports: [FormsModule, ReactiveFormsModule, CommonModule, RouterModule, ImageCropperModule], exports: [
         // Directives
         SortDirective,
         BackButtonDirective,