@lenne.tech/ng-base 14.19.0 → 14.21.0

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

@@ -656,6 +656,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
                 type: Output
             }] } });
 
+/**
+ * Stops propagation of click events
+ * Inspired by https://stackoverflow.com/a/41001184
+ */
+class StopPropagationDirective {
+    onClick(event) {
+        event.stopPropagation();
+    }
+}
+StopPropagationDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: StopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+StopPropagationDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.0", type: StopPropagationDirective, selector: "[baseStopPropagation]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: StopPropagationDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[baseStopPropagation]',
+                }]
+        }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
 class UploadImageComponent {
     constructor(httpClient, authService, fileService, toastService) {
         this.httpClient = httpClient;
@@ -734,7 +755,7 @@ class UploadImageComponent {
             }, 3500);
             return;
         }
-        if (this.validExtensions.includes(file.type)) {
+        if (this.validExtensions.includes(file?.type)) {
             const fileReader = new FileReader();
             fileReader.onload = (result) => {
                 this.loading = true;
@@ -767,18 +788,17 @@ class UploadImageComponent {
      */
     async upload() {
         let result;
+        const fileData = { field: this.id, file: this.selectedFile, base64: await this.getBase64(this.selectedFile) };
+        this.fileChanged.emit(fileData);
         if (this.uploadDirectly) {
             result = await this.fileService.upload(this.url, this.uploadPath, this.selectedFile, this.compressOptions);
+            if (result?.id) {
+                this.control.setValue(result.id);
+                this.imageUploaded.emit(result.id);
+            }
         }
         else {
-            this.control.markAsTouched();
-            this.fileChanged.emit({ field: this.id, file: this.selectedFile });
-            this.loading = false;
-            return;
-        }
-        if (result?.id) {
-            this.control.setValue(result.id);
-            this.imageUploaded.emit(result.id);
+            this.control.setValue(fileData.base64);
         }
         this.control.markAsTouched();
         this.loading = false;
@@ -794,7 +814,7 @@ class UploadImageComponent {
             this.fileUrl = null;
             this.control.setValue('');
             this.control.markAsTouched();
-            this.fileChanged.emit({ field: this.id, file: null });
+            this.fileChanged.emit({ field: this.id, file: null, base64: null });
             return;
         }
         this.loading = true;
@@ -811,12 +831,33 @@ class UploadImageComponent {
             }
         }
     }
+    /**
+     * Convert a file into a BASE64 encoded string
+     */
+    getBase64(file) {
+        return new Promise((resolve, reject) => {
+            if (!file) {
+                return resolve(null);
+            }
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                if (!reader.result) {
+                    return reject(new Error('Conversion failed'));
+                }
+                resolve(reader.result.toString());
+            };
+            reader.onerror = (error) => {
+                reject(error);
+            };
+        });
+    }
 }
 UploadImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: UploadImageComponent, deps: [{ token: i1$2.HttpClient }, { token: i1$1.AuthService }, { token: i1$1.FileService }, { token: i1$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
-UploadImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: UploadImageComponent, selector: "base-upload-image", inputs: { id: "id", name: "name", label: "label", supportText: "supportText", required: "required", defaultDragText: "defaultDragText", defaultReleaseText: "defaultReleaseText", preButtonText: "preButtonText", buttonText: "buttonText", validExtensions: "validExtensions", control: "control", url: "url", uploadPath: "uploadPath", deletePath: "deletePath", path: "path", compressOptions: "compressOptions", maxSize: "maxSize", uploadDirectly: "uploadDirectly" }, outputs: { imageUploaded: "imageUploaded", imageDeleted: "imageDeleted", fileChanged: "fileChanged" }, ngImport: i0, template: "<div class=\"form-group mt-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <div\n    class=\"drag-area\"\n    (dragover)=\"dragOver($event)\"\n    (dragleave)=\"dragLeave($event)\"\n    (drop)=\"drop($event)\"\n    [ngClass]=\"{ active: dragActive }\"\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()\">L\u00F6schen</button>\n    </ng-container>\n\n    <ng-container *ngIf=\"control?.value && !selectedFile && !loading\">\n      <img [src]=\"url + path + control?.value\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\">L\u00F6schen</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 }} <span class=\"button\" (click)=\"fileInput.click()\">{{ buttonText }}</span></span\n      >\n      <input type=\"file\" (change)=\"selectFile($event)\" [attr.accept]=\"validExtensions?.join(',')\" hidden #fileInput />\n      <span class=\"support\" [innerText]=\"supportText\"></span>\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 *ngIf=\"control?.errors?.['minlength']\">\n      Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['maxlength']\">\n      Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n  </div>\n</div>\n", styles: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.required:after{content:\" *\"}.drag-area{height:var(--base-upload-image-area-height);border:2px dashed var(--base-upload-image-area-border-color);background-color:var(--base-upload-image-area-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;margin:10px auto;padding:20px}.drag-area img{height:100%;max-height:300px;max-width:100%;object-fit:scale-down}.drag-area .btn-danger{margin-top:auto}.drag-area .icon{font-size:50px;color:var(--bs-primary)}.drag-area .header{font-size:20px;font-weight:500}.drag-area .support{font-size:12px;color:#e1e1e1;margin:10px 0 15px}.drag-area .button{font-size:20px;font-weight:500;color:var(--bs-primary);cursor:pointer}.active{border:2px solid var(--bs-primary)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+UploadImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: UploadImageComponent, selector: "base-upload-image", inputs: { id: "id", name: "name", label: "label", supportText: "supportText", required: "required", defaultDragText: "defaultDragText", defaultReleaseText: "defaultReleaseText", preButtonText: "preButtonText", buttonText: "buttonText", validExtensions: "validExtensions", control: "control", url: "url", uploadPath: "uploadPath", deletePath: "deletePath", path: "path", compressOptions: "compressOptions", maxSize: "maxSize", uploadDirectly: "uploadDirectly" }, outputs: { imageUploaded: "imageUploaded", imageDeleted: "imageDeleted", fileChanged: "fileChanged" }, ngImport: i0, template: "<div class=\"form-group mt-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <div\n    class=\"drag-area\"\n    (dragover)=\"dragOver($event)\"\n    (dragleave)=\"dragLeave($event)\"\n    (drop)=\"drop($event)\"\n    [ngClass]=\"{ active: dragActive, pointer: !loading }\"\n    (click)=\"!loading && fileInput.click()\"\n  >\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n      <div class=\"spinner-border text-primary\" role=\"status\">\n        <span class=\"visually-hidden\">Loading...</span>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"selectedFile && !loading\">\n      <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile()\" baseStopPropagation>L\u00F6schen</button>\n    </ng-container>\n\n    <ng-container *ngIf=\"control?.value && !selectedFile && !loading\">\n      <img [src]=\"control?.value.startsWith('data:') ? control?.value : url + path + control?.value\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\" baseStopPropagation>\n        L\u00F6schen\n      </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"!selectedFile && !control?.value && !loading\">\n      <div class=\"icon\">\n        <i class=\"bi bi-images\"></i>\n      </div>\n\n      <span class=\"header\">{{ dragText }}</span>\n      <span class=\"header\"\n        >{{ preButtonText }}\n        <span class=\"button\" (click)=\"fileInput.click()\" baseStopPropagation>{{ buttonText }}</span></span\n      >\n      <span class=\"support\" [innerText]=\"supportText\"></span>\n    </ng-container>\n\n    <input type=\"file\" (change)=\"selectFile($event)\" [attr.accept]=\"validExtensions?.join(',')\" hidden #fileInput />\n  </div>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n    <div *ngIf=\"control?.errors?.['minlength']\">\n      Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['maxlength']\">\n      Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n  </div>\n</div>\n", styles: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.required:after{content:\" *\"}.drag-area{height:var(--base-upload-image-area-height);border:2px dashed var(--base-upload-image-area-border-color);background-color:var(--base-upload-image-area-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;margin:10px auto;padding:20px}.drag-area img{height:100%;max-height:300px;max-width:100%;object-fit:scale-down}.drag-area .btn-danger{margin-top:auto}.drag-area .icon{font-size:50px;color:var(--bs-primary)}.drag-area .header{font-size:20px;font-weight:500}.drag-area .support{font-size:12px;color:#e1e1e1;margin:10px 0 15px}.drag-area .button{font-size:20px;font-weight:500;color:var(--bs-primary);cursor:pointer}.active{border:2px solid var(--bs-primary)}.pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: StopPropagationDirective, selector: "[baseStopPropagation]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: UploadImageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-upload-image', template: "<div class=\"form-group mt-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <div\n    class=\"drag-area\"\n    (dragover)=\"dragOver($event)\"\n    (dragleave)=\"dragLeave($event)\"\n    (drop)=\"drop($event)\"\n    [ngClass]=\"{ active: dragActive }\"\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()\">L\u00F6schen</button>\n    </ng-container>\n\n    <ng-container *ngIf=\"control?.value && !selectedFile && !loading\">\n      <img [src]=\"url + path + control?.value\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\">L\u00F6schen</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 }} <span class=\"button\" (click)=\"fileInput.click()\">{{ buttonText }}</span></span\n      >\n      <input type=\"file\" (change)=\"selectFile($event)\" [attr.accept]=\"validExtensions?.join(',')\" hidden #fileInput />\n      <span class=\"support\" [innerText]=\"supportText\"></span>\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 *ngIf=\"control?.errors?.['minlength']\">\n      Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['maxlength']\">\n      Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n  </div>\n</div>\n", styles: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.required:after{content:\" *\"}.drag-area{height:var(--base-upload-image-area-height);border:2px dashed var(--base-upload-image-area-border-color);background-color:var(--base-upload-image-area-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;margin:10px auto;padding:20px}.drag-area img{height:100%;max-height:300px;max-width:100%;object-fit:scale-down}.drag-area .btn-danger{margin-top:auto}.drag-area .icon{font-size:50px;color:var(--bs-primary)}.drag-area .header{font-size:20px;font-weight:500}.drag-area .support{font-size:12px;color:#e1e1e1;margin:10px 0 15px}.drag-area .button{font-size:20px;font-weight:500;color:var(--bs-primary);cursor:pointer}.active{border:2px solid var(--bs-primary)}\n"] }]
+            args: [{ selector: 'base-upload-image', template: "<div class=\"form-group mt-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <div\n    class=\"drag-area\"\n    (dragover)=\"dragOver($event)\"\n    (dragleave)=\"dragLeave($event)\"\n    (drop)=\"drop($event)\"\n    [ngClass]=\"{ active: dragActive, pointer: !loading }\"\n    (click)=\"!loading && fileInput.click()\"\n  >\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n      <div class=\"spinner-border text-primary\" role=\"status\">\n        <span class=\"visually-hidden\">Loading...</span>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"selectedFile && !loading\">\n      <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile()\" baseStopPropagation>L\u00F6schen</button>\n    </ng-container>\n\n    <ng-container *ngIf=\"control?.value && !selectedFile && !loading\">\n      <img [src]=\"control?.value.startsWith('data:') ? control?.value : url + path + control?.value\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\" baseStopPropagation>\n        L\u00F6schen\n      </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"!selectedFile && !control?.value && !loading\">\n      <div class=\"icon\">\n        <i class=\"bi bi-images\"></i>\n      </div>\n\n      <span class=\"header\">{{ dragText }}</span>\n      <span class=\"header\"\n        >{{ preButtonText }}\n        <span class=\"button\" (click)=\"fileInput.click()\" baseStopPropagation>{{ buttonText }}</span></span\n      >\n      <span class=\"support\" [innerText]=\"supportText\"></span>\n    </ng-container>\n\n    <input type=\"file\" (change)=\"selectFile($event)\" [attr.accept]=\"validExtensions?.join(',')\" hidden #fileInput />\n  </div>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n    <div *ngIf=\"control?.errors?.['minlength']\">\n      Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['maxlength']\">\n      Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n  </div>\n</div>\n", styles: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.required:after{content:\" *\"}.drag-area{height:var(--base-upload-image-area-height);border:2px dashed var(--base-upload-image-area-border-color);background-color:var(--base-upload-image-area-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;margin:10px auto;padding:20px}.drag-area img{height:100%;max-height:300px;max-width:100%;object-fit:scale-down}.drag-area .btn-danger{margin-top:auto}.drag-area .icon{font-size:50px;color:var(--bs-primary)}.drag-area .header{font-size:20px;font-weight:500}.drag-area .support{font-size:12px;color:#e1e1e1;margin:10px 0 15px}.drag-area .button{font-size:20px;font-weight:500;color:var(--bs-primary);cursor:pointer}.active{border:2px solid var(--bs-primary)}.pointer{cursor:pointer}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: i1$1.AuthService }, { type: i1$1.FileService }, { type: i1$1.ToastService }]; }, propDecorators: { id: [{
                 type: Input
             }], name: [{
@@ -942,7 +983,7 @@ class RefenceInputComponent {
             this.control.setErrors(null);
             return;
         }
-        const foundElement = this.objects.find((e) => e[this.nameField] === this.currentValue);
+        const foundElement = this.objects.find((e) => this.checkForNameFields(e));
         if (!foundElement) {
             this.control.setValue(null);
             this.control.markAsTouched();
@@ -1100,7 +1141,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
 class ModelFormSubComponent {
     constructor(authService) {
         this.authService = authService;
-        this.config = {};
         this.imageChanged = new EventEmitter();
         this.fileChanged = new EventEmitter();
         this.keys = [];
@@ -1160,10 +1200,10 @@ class ModelFormSubComponent {
     }
 }
 ModelFormSubComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ModelFormSubComponent, deps: [{ token: i1$1.AuthService }], target: i0.ɵɵFactoryTarget.Component });
-ModelFormSubComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: { id: "id", fields: "fields", form: "form", config: "config" }, outputs: { imageChanged: "imageChanged", fileChanged: "fileChanged" }, ngImport: i0, template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n  <ng-container\n    *ngIf=\"checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <fieldset class=\"border rounded-3 p-3 mt-3\">\n      <legend class=\"float-none w-auto px-3\">\n        {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n      </legend>\n      <base-model-form-sub\n        [fields]=\"fields[key].fields\"\n        [config]=\"config[key]?.fields || {}\"\n        [form]=\"form.get(key)\"\n      ></base-model-form-sub>\n    </fieldset>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"!checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <ng-container *ngIf=\"fields[key]?.isEnum && !config[key]?.exclude\">\n      <base-select\n        [id]=\"key\"\n        [name]=\"key\"\n        [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n        [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n        [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n        [control]=\"transformToControl(form?.get(key))\"\n        [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n      ></base-select>\n    </ng-container>\n\n    <ng-container *ngIf=\"!fields[key]?.isEnum && !config[key]?.exclude\">\n      <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n        <ng-container *ngSwitchCase=\"'String'\">\n          <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n            <base-tags\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n            ></base-tags>\n          </ng-container>\n\n          <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [type]=\"'text'\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n            ></base-input>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Image'\">\n          <base-upload-image\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [url]=\"config[key]?.url\"\n            [path]=\"config[key]?.path || '/files/'\"\n            [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n            [deletePath]=\"config[key]?.deletePath || '/files/'\"\n            [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n            [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n            [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n            [buttonText]=\"config[key]?.buttonText || 'browse'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [compressOptions]=\"config[key]?.compressOptions\"\n            [maxSize]=\"config[key]?.maxSize\"\n            [uploadDirectly]=\"false\"\n            (fileChanged)=\"fileChanged.emit($event)\"\n            (imageDeleted)=\"imageChanged.emit(key)\"\n            (imageUploaded)=\"imageChanged.emit(key)\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Reference'\">\n          <base-refence-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [isList]=\"fields[key]?.isList\"\n            [useParamAsArg]=\"config[key]?.useParamAsArg ?? false\"\n            [param]=\"id\"\n            [search]=\"config[key]?.searchable ?? true\"\n            [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [method]=\"config[key]?.method || 'find'\"\n            [fields]=\"config[key]?.fields || ['id', 'name']\"\n            [valueField]=\"config[key]?.valueField || 'id'\"\n            [nameField]=\"config[key]?.nameField || 'name'\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-refence-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Boolean'\">\n          <base-checkbox\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-checkbox>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'LongText'\">\n          <base-textarea\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-textarea>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Float'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'number'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Password'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'password'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Color'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'color'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'URL'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'url'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Email'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'email'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'DateTime'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'datetime-local'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-input>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required", "eyeButton"], outputs: ["enter"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["id", "name", "label", "placeholder", "control", "tabIndex", "required", "multiple", "search", "options"] }, { kind: "component", type: CheckboxComponent, selector: "base-checkbox", inputs: ["id", "name", "label", "value", "control", "required"] }, { kind: "component", type: TextareaComponent, selector: "base-textarea", inputs: ["id", "name", "label", "placeholder", "control", "rows", "required", "tabIndex"] }, { kind: "component", type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required"] }, { kind: "component", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["id", "fields", "form", "config"], outputs: ["imageChanged", "fileChanged"] }, { kind: "component", type: UploadImageComponent, selector: "base-upload-image", inputs: ["id", "name", "label", "supportText", "required", "defaultDragText", "defaultReleaseText", "preButtonText", "buttonText", "validExtensions", "control", "url", "uploadPath", "deletePath", "path", "compressOptions", "maxSize", "uploadDirectly"], outputs: ["imageUploaded", "imageDeleted", "fileChanged"] }, { kind: "component", type: RefenceInputComponent, selector: "base-refence-input", inputs: ["id", "name", "label", "isList", "search", "useParamAsArg", "param", "placeholder", "autocomplete", "tabIndex", "control", "required", "method", "fields", "valueField", "nameField"] }] });
+ModelFormSubComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: { id: "id", fields: "fields", form: "form", config: "config" }, outputs: { imageChanged: "imageChanged", fileChanged: "fileChanged" }, ngImport: i0, template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n  <ng-container\n    *ngIf=\"checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <fieldset class=\"border rounded-3 p-3 mt-3\">\n      <legend class=\"float-none w-auto px-3\">\n        {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n      </legend>\n      <base-model-form-sub\n        [fields]=\"fields[key].fields\"\n        [config]=\"config[key]?.fields || {}\"\n        [form]=\"form.get(key)\"\n      ></base-model-form-sub>\n    </fieldset>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"!checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <ng-container *ngIf=\"fields[key]?.isEnum && !config[key]?.exclude\">\n      <base-select\n        [id]=\"key\"\n        [name]=\"key\"\n        [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n        [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n        [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n        [control]=\"transformToControl(form?.get(key))\"\n        [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n      ></base-select>\n    </ng-container>\n\n    <ng-container *ngIf=\"!fields[key]?.isEnum && !config[key]?.exclude\">\n      <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n        <ng-container *ngSwitchCase=\"'String'\">\n          <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n            <base-tags\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n            ></base-tags>\n          </ng-container>\n\n          <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [type]=\"'text'\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n            ></base-input>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Image'\">\n          <base-upload-image\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [url]=\"config[key]?.url\"\n            [path]=\"config[key]?.path || '/files/'\"\n            [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n            [deletePath]=\"config[key]?.deletePath || '/files/'\"\n            [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n            [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n            [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n            [buttonText]=\"config[key]?.buttonText || 'browse'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [compressOptions]=\"config[key]?.compressOptions\"\n            [maxSize]=\"config[key]?.maxSize\"\n            [uploadDirectly]=\"false\"\n            (fileChanged)=\"fileChanged.emit($event)\"\n            (imageDeleted)=\"imageChanged.emit(key)\"\n            (imageUploaded)=\"imageChanged.emit(key)\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Reference'\">\n          <base-refence-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [isList]=\"fields[key]?.isList\"\n            [useParamAsArg]=\"config[key]?.useParamAsArg ?? false\"\n            [param]=\"id\"\n            [search]=\"config[key]?.searchable ?? true\"\n            [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [method]=\"config[key]?.method || 'find'\"\n            [fields]=\"config[key]?.requestFields || ['id', 'name']\"\n            [valueField]=\"config[key]?.valueField || 'id'\"\n            [nameField]=\"config[key]?.nameField || 'name'\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-refence-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Boolean'\">\n          <base-checkbox\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-checkbox>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'LongText'\">\n          <base-textarea\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-textarea>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Float'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'number'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Password'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'password'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Color'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'color'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'URL'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'url'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Email'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'email'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'DateTime'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'datetime-local'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-input>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required", "eyeButton"], outputs: ["enter"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["id", "name", "label", "placeholder", "control", "tabIndex", "required", "multiple", "search", "options"] }, { kind: "component", type: CheckboxComponent, selector: "base-checkbox", inputs: ["id", "name", "label", "value", "control", "required"] }, { kind: "component", type: TextareaComponent, selector: "base-textarea", inputs: ["id", "name", "label", "placeholder", "control", "rows", "required", "tabIndex"] }, { kind: "component", type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required"] }, { kind: "component", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["id", "fields", "form", "config"], outputs: ["imageChanged", "fileChanged"] }, { kind: "component", type: UploadImageComponent, selector: "base-upload-image", inputs: ["id", "name", "label", "supportText", "required", "defaultDragText", "defaultReleaseText", "preButtonText", "buttonText", "validExtensions", "control", "url", "uploadPath", "deletePath", "path", "compressOptions", "maxSize", "uploadDirectly"], outputs: ["imageUploaded", "imageDeleted", "fileChanged"] }, { kind: "component", type: RefenceInputComponent, selector: "base-refence-input", inputs: ["id", "name", "label", "isList", "search", "useParamAsArg", "param", "placeholder", "autocomplete", "tabIndex", "control", "required", "method", "fields", "valueField", "nameField"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ModelFormSubComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-model-form-sub', template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n  <ng-container\n    *ngIf=\"checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <fieldset class=\"border rounded-3 p-3 mt-3\">\n      <legend class=\"float-none w-auto px-3\">\n        {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n      </legend>\n      <base-model-form-sub\n        [fields]=\"fields[key].fields\"\n        [config]=\"config[key]?.fields || {}\"\n        [form]=\"form.get(key)\"\n      ></base-model-form-sub>\n    </fieldset>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"!checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <ng-container *ngIf=\"fields[key]?.isEnum && !config[key]?.exclude\">\n      <base-select\n        [id]=\"key\"\n        [name]=\"key\"\n        [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n        [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n        [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n        [control]=\"transformToControl(form?.get(key))\"\n        [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n      ></base-select>\n    </ng-container>\n\n    <ng-container *ngIf=\"!fields[key]?.isEnum && !config[key]?.exclude\">\n      <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n        <ng-container *ngSwitchCase=\"'String'\">\n          <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n            <base-tags\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n            ></base-tags>\n          </ng-container>\n\n          <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [type]=\"'text'\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n            ></base-input>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Image'\">\n          <base-upload-image\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [url]=\"config[key]?.url\"\n            [path]=\"config[key]?.path || '/files/'\"\n            [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n            [deletePath]=\"config[key]?.deletePath || '/files/'\"\n            [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n            [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n            [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n            [buttonText]=\"config[key]?.buttonText || 'browse'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [compressOptions]=\"config[key]?.compressOptions\"\n            [maxSize]=\"config[key]?.maxSize\"\n            [uploadDirectly]=\"false\"\n            (fileChanged)=\"fileChanged.emit($event)\"\n            (imageDeleted)=\"imageChanged.emit(key)\"\n            (imageUploaded)=\"imageChanged.emit(key)\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Reference'\">\n          <base-refence-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [isList]=\"fields[key]?.isList\"\n            [useParamAsArg]=\"config[key]?.useParamAsArg ?? false\"\n            [param]=\"id\"\n            [search]=\"config[key]?.searchable ?? true\"\n            [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [method]=\"config[key]?.method || 'find'\"\n            [fields]=\"config[key]?.fields || ['id', 'name']\"\n            [valueField]=\"config[key]?.valueField || 'id'\"\n            [nameField]=\"config[key]?.nameField || 'name'\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-refence-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Boolean'\">\n          <base-checkbox\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-checkbox>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'LongText'\">\n          <base-textarea\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-textarea>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Float'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'number'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Password'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'password'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Color'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'color'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'URL'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'url'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Email'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'email'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'DateTime'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'datetime-local'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-input>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n" }]
+            args: [{ selector: 'base-model-form-sub', template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n  <ng-container\n    *ngIf=\"checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <fieldset class=\"border rounded-3 p-3 mt-3\">\n      <legend class=\"float-none w-auto px-3\">\n        {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n      </legend>\n      <base-model-form-sub\n        [fields]=\"fields[key].fields\"\n        [config]=\"config[key]?.fields || {}\"\n        [form]=\"form.get(key)\"\n      ></base-model-form-sub>\n    </fieldset>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"!checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <ng-container *ngIf=\"fields[key]?.isEnum && !config[key]?.exclude\">\n      <base-select\n        [id]=\"key\"\n        [name]=\"key\"\n        [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n        [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n        [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n        [control]=\"transformToControl(form?.get(key))\"\n        [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n      ></base-select>\n    </ng-container>\n\n    <ng-container *ngIf=\"!fields[key]?.isEnum && !config[key]?.exclude\">\n      <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n        <ng-container *ngSwitchCase=\"'String'\">\n          <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n            <base-tags\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n            ></base-tags>\n          </ng-container>\n\n          <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [type]=\"'text'\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n            ></base-input>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Image'\">\n          <base-upload-image\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [url]=\"config[key]?.url\"\n            [path]=\"config[key]?.path || '/files/'\"\n            [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n            [deletePath]=\"config[key]?.deletePath || '/files/'\"\n            [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n            [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n            [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n            [buttonText]=\"config[key]?.buttonText || 'browse'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [compressOptions]=\"config[key]?.compressOptions\"\n            [maxSize]=\"config[key]?.maxSize\"\n            [uploadDirectly]=\"false\"\n            (fileChanged)=\"fileChanged.emit($event)\"\n            (imageDeleted)=\"imageChanged.emit(key)\"\n            (imageUploaded)=\"imageChanged.emit(key)\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Reference'\">\n          <base-refence-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [isList]=\"fields[key]?.isList\"\n            [useParamAsArg]=\"config[key]?.useParamAsArg ?? false\"\n            [param]=\"id\"\n            [search]=\"config[key]?.searchable ?? true\"\n            [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [method]=\"config[key]?.method || 'find'\"\n            [fields]=\"config[key]?.requestFields || ['id', 'name']\"\n            [valueField]=\"config[key]?.valueField || 'id'\"\n            [nameField]=\"config[key]?.nameField || 'name'\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-refence-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Boolean'\">\n          <base-checkbox\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-checkbox>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'LongText'\">\n          <base-textarea\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-textarea>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Float'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'number'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Password'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'password'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Color'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'color'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'URL'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'url'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Email'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'email'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'DateTime'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'datetime-local'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n          ></base-input>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.AuthService }]; }, propDecorators: { id: [{
                 type: Input
             }], fields: [{
@@ -1210,7 +1250,6 @@ class ModelFormComponent {
         this.onlyUpdateMode = false;
         this.duplicate = false;
         this.logging = false;
-        this.config = {};
         this.showFavButton = true;
         this.finished = new EventEmitter();
         this._loading = false;
@@ -1745,7 +1784,6 @@ class ModelTableComponent {
         this.export = true;
         this.duplicate = true;
         this.config = {};
-        this.fieldConfig = {};
         this.showFavButton = true;
         this.idSelected = new EventEmitter();
         this.createModeChanged = new EventEmitter();
@@ -2232,6 +2270,7 @@ const elements = [
     SortDirective,
     BackButtonDirective,
     ContextMenuDirective,
+    StopPropagationDirective,
     // Components
     InputComponent,
     SelectComponent,
@@ -2261,6 +2300,7 @@ BaseComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
         SortDirective,
         BackButtonDirective,
         ContextMenuDirective,
+        StopPropagationDirective,
         // Components
         InputComponent,
         SelectComponent,
@@ -2285,6 +2325,7 @@ BaseComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
         SortDirective,
         BackButtonDirective,
         ContextMenuDirective,
+        StopPropagationDirective,
         // Components
         InputComponent,
         SelectComponent,
@@ -2323,5 +2364,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BackButtonDirective, BaseComponentsModule, BreadcrumbComponent, ChangePasswordComponent, CheckboxComponent, ContextMenuDirective, DeleteAccountComponent, EllipsesPipe, FabButtonComponent, InputComponent, LoadingBarComponent, ModelFormComponent, ModelFormSubComponent, ModelTableComponent, RefenceInputComponent, SelectComponent, SkeletonLoaderComponent, SortDirective, TagsComponent, TextareaComponent, ToastComponent, UploadImageComponent };
+export { BackButtonDirective, BaseComponentsModule, BreadcrumbComponent, ChangePasswordComponent, CheckboxComponent, ContextMenuDirective, DeleteAccountComponent, EllipsesPipe, FabButtonComponent, InputComponent, LoadingBarComponent, ModelFormComponent, ModelFormSubComponent, ModelTableComponent, RefenceInputComponent, SelectComponent, SkeletonLoaderComponent, SortDirective, StopPropagationDirective, TagsComponent, TextareaComponent, ToastComponent, UploadImageComponent };
 //# sourceMappingURL=lenne.tech-ng-base-base-components.mjs.map