@lenne.tech/ng-base 13.19.0 → 13.20.0

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

@@ -504,6 +504,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
                 type: Input
             }] } });
 
+class RefenceInputComponent {
+    constructor(graphQLService) {
+        this.graphQLService = graphQLService;
+        this.placeholder = '';
+        this.required = false;
+        this.method = 'find';
+        this.fields = ['id', 'name'];
+        this.valueField = 'id';
+        this.nameField = 'name';
+        this.objects = [];
+    }
+    ngOnInit() {
+        this.graphQLService
+            .graphQl(this.method, {
+            fields: this.fields,
+            type: GraphQLRequestType.QUERY,
+        })
+            .subscribe((result) => {
+            if (result) {
+                this.objects = result;
+            }
+        });
+    }
+}
+RefenceInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: RefenceInputComponent, deps: [{ token: i1$1.GraphQLService }], target: i0.ɵɵFactoryTarget.Component });
+RefenceInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: RefenceInputComponent, selector: "base-refence-input", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", required: "required", method: "method", fields: "fields", valueField: "valueField", nameField: "nameField" }, ngImport: i0, template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <input\n    [id]=\"id\"\n    [name]=\"name\"\n    class=\"form-control\"\n    [formControl]=\"control\"\n    [required]=\"required\"\n    [placeholder]=\"placeholder\"\n    [autocomplete]=\"autocomplete ?? null\"\n    [tabIndex]=\"tabIndex ?? null\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n    [attr.list]=\"id + '-datalistOptions'\"\n  />\n  <datalist [id]=\"id + '-datalistOptions'\">\n    <option *ngFor=\"let object of objects\" [value]=\"object[valueField]\">{{ object[nameField] }}</option>\n  </datalist>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n    <div *ngIf=\"control?.errors?.['minlength']\">\n      Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control.errors?.['minlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['maxlength']\">\n      Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control.errors?.['maxlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n    <div *ngIf=\"control?.errors?.['matching']\">Die Passw\u00F6rter m\u00FCssen \u00FCberein stimmen.</div>\n  </div>\n</div>\n", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: RefenceInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'base-refence-input', template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <input\n    [id]=\"id\"\n    [name]=\"name\"\n    class=\"form-control\"\n    [formControl]=\"control\"\n    [required]=\"required\"\n    [placeholder]=\"placeholder\"\n    [autocomplete]=\"autocomplete ?? null\"\n    [tabIndex]=\"tabIndex ?? null\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n    [attr.list]=\"id + '-datalistOptions'\"\n  />\n  <datalist [id]=\"id + '-datalistOptions'\">\n    <option *ngFor=\"let object of objects\" [value]=\"object[valueField]\">{{ object[nameField] }}</option>\n  </datalist>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n    <div *ngIf=\"control?.errors?.['minlength']\">\n      Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control.errors?.['minlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['maxlength']\">\n      Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control.errors?.['maxlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n    <div *ngIf=\"control?.errors?.['matching']\">Die Passw\u00F6rter m\u00FCssen \u00FCberein stimmen.</div>\n  </div>\n</div>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i1$1.GraphQLService }]; }, propDecorators: { id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], method: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], valueField: [{
+                type: Input
+            }], nameField: [{
+                type: Input
+            }] } });
+
 class ModelFormSubComponent {
     constructor() {
         this.config = {};
@@ -532,10 +587,10 @@ class ModelFormSubComponent {
     }
 }
 ModelFormSubComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelFormSubComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ModelFormSubComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: { fields: "fields", form: "form", config: "config" }, ngImport: i0, template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n  <ng-container *ngIf=\"!fields[key]?.type\">\n    <fieldset class=\"border rounded-3 p-3\">\n      <legend class=\"float-none w-auto px-3\">\n        {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n      </legend>\n      <base-model-form-sub\n        [fields]=\"fields[key]\"\n        [config]=\"config[key]?.fields || {}\"\n        [form]=\"form.get(key)\"\n      ></base-model-form-sub>\n    </fieldset>\n  </ng-container>\n\n  <ng-container *ngIf=\"fields[key]?.type\">\n    <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n      <ng-container *ngSwitchCase=\"'String'\">\n        <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n          <base-tags\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"fields[key].isRequired\"\n          ></base-tags>\n        </ng-container>\n\n        <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'text'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"fields[key].isRequired\"\n          ></base-input>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'Image'\">\n        <base-upload-image\n          [id]=\"key\"\n          [name]=\"key\"\n          [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n          [control]=\"transformToControl(form?.get(key))\"\n          [url]=\"config[key]?.url\"\n          [path]=\"config[key]?.path || '/files/'\"\n          [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n          [deletePath]=\"config[key]?.deletePath || '/files/'\"\n          [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n          [dragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n          [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png']\"\n          [required]=\"fields[key].isRequired\"\n        ></base-upload-image>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'Boolean'\">\n        <base-checkbox\n          [id]=\"key\"\n          [name]=\"key\"\n          [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n          [control]=\"transformToControl(form?.get(key))\"\n          [required]=\"fields[key].isRequired\"\n        ></base-checkbox>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'Float'\">\n        <base-input\n          [id]=\"key\"\n          [name]=\"key\"\n          [type]=\"'number'\"\n          [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n          [placeholder]=\"config[key]?.placeholder || ''\"\n          [control]=\"transformToControl(form?.get(key))\"\n          [required]=\"fields[key].isRequired\"\n        ></base-input>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'DateTime'\">\n        <base-input\n          [id]=\"key\"\n          [name]=\"key\"\n          [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n          [placeholder]=\"config[key]?.placeholder || ''\"\n          [type]=\"'datetime-local'\"\n          [control]=\"transformToControl(form?.get(key))\"\n          [required]=\"fields[key].isRequired\"\n        ></base-input>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n", styles: [""], components: [{ type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["fields", "form", "config"] }, { type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required"] }, { type: InputComponent, selector: "base-input", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required"] }, { type: UploadImageComponent, selector: "base-upload-image", inputs: ["id", "name", "label", "supportText", "required", "dragText", "validExtensions", "control", "url", "uploadPath", "deletePath", "path"] }, { type: CheckboxComponent, selector: "base-checkbox", inputs: ["id", "name", "label", "value", "control", "required"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
+ModelFormSubComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: { fields: "fields", form: "form", config: "config" }, ngImport: i0, template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n  <ng-container *ngIf=\"!fields[key]?.type\">\n    <fieldset class=\"border rounded-3 p-3\">\n      <legend class=\"float-none w-auto px-3\">\n        {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n      </legend>\n      <base-model-form-sub\n        [fields]=\"fields[key]\"\n        [config]=\"config[key]?.fields || {}\"\n        [form]=\"form.get(key)\"\n      ></base-model-form-sub>\n    </fieldset>\n  </ng-container>\n\n  <ng-container *ngIf=\"fields[key]?.type\">\n    <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n      <ng-container *ngSwitchCase=\"'String'\">\n        <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n          <base-tags\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"fields[key].isRequired\"\n          ></base-tags>\n        </ng-container>\n\n        <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'text'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"fields[key].isRequired\"\n          ></base-input>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'Image'\">\n        <base-upload-image\n          [id]=\"key\"\n          [name]=\"key\"\n          [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n          [control]=\"transformToControl(form?.get(key))\"\n          [url]=\"config[key]?.url\"\n          [path]=\"config[key]?.path || '/files/'\"\n          [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n          [deletePath]=\"config[key]?.deletePath || '/files/'\"\n          [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n          [dragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n          [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png']\"\n          [required]=\"fields[key].isRequired\"\n        ></base-upload-image>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'Reference'\">\n        <base-refence-input\n          [id]=\"key\"\n          [name]=\"key\"\n          [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n          [control]=\"transformToControl(form?.get(key))\"\n          [method]=\"config[key]?.method || 'find'\"\n          [fields]=\"config[key]?.fields || ['id', 'name']\"\n          [valueField]=\"config[key]?.valueField || 'id'\"\n          [nameField]=\"config[key]?.nameField || 'name'\"\n          [required]=\"fields[key].isRequired\"\n        ></base-refence-input>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'Boolean'\">\n        <base-checkbox\n          [id]=\"key\"\n          [name]=\"key\"\n          [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n          [control]=\"transformToControl(form?.get(key))\"\n          [required]=\"fields[key].isRequired\"\n        ></base-checkbox>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'Float'\">\n        <base-input\n          [id]=\"key\"\n          [name]=\"key\"\n          [type]=\"'number'\"\n          [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n          [placeholder]=\"config[key]?.placeholder || ''\"\n          [control]=\"transformToControl(form?.get(key))\"\n          [required]=\"fields[key].isRequired\"\n        ></base-input>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'DateTime'\">\n        <base-input\n          [id]=\"key\"\n          [name]=\"key\"\n          [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n          [placeholder]=\"config[key]?.placeholder || ''\"\n          [type]=\"'datetime-local'\"\n          [control]=\"transformToControl(form?.get(key))\"\n          [required]=\"fields[key].isRequired\"\n        ></base-input>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n", styles: [""], components: [{ type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["fields", "form", "config"] }, { type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required"] }, { type: InputComponent, selector: "base-input", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required"] }, { type: UploadImageComponent, selector: "base-upload-image", inputs: ["id", "name", "label", "supportText", "required", "dragText", "validExtensions", "control", "url", "uploadPath", "deletePath", "path"] }, { type: RefenceInputComponent, selector: "base-refence-input", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "required", "method", "fields", "valueField", "nameField"] }, { type: CheckboxComponent, selector: "base-checkbox", inputs: ["id", "name", "label", "value", "control", "required"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelFormSubComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-model-form-sub', template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n  <ng-container *ngIf=\"!fields[key]?.type\">\n    <fieldset class=\"border rounded-3 p-3\">\n      <legend class=\"float-none w-auto px-3\">\n        {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n      </legend>\n      <base-model-form-sub\n        [fields]=\"fields[key]\"\n        [config]=\"config[key]?.fields || {}\"\n        [form]=\"form.get(key)\"\n      ></base-model-form-sub>\n    </fieldset>\n  </ng-container>\n\n  <ng-container *ngIf=\"fields[key]?.type\">\n    <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n      <ng-container *ngSwitchCase=\"'String'\">\n        <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n          <base-tags\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"fields[key].isRequired\"\n          ></base-tags>\n        </ng-container>\n\n        <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'text'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"fields[key].isRequired\"\n          ></base-input>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'Image'\">\n        <base-upload-image\n          [id]=\"key\"\n          [name]=\"key\"\n          [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n          [control]=\"transformToControl(form?.get(key))\"\n          [url]=\"config[key]?.url\"\n          [path]=\"config[key]?.path || '/files/'\"\n          [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n          [deletePath]=\"config[key]?.deletePath || '/files/'\"\n          [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n          [dragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n          [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png']\"\n          [required]=\"fields[key].isRequired\"\n        ></base-upload-image>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'Boolean'\">\n        <base-checkbox\n          [id]=\"key\"\n          [name]=\"key\"\n          [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n          [control]=\"transformToControl(form?.get(key))\"\n          [required]=\"fields[key].isRequired\"\n        ></base-checkbox>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'Float'\">\n        <base-input\n          [id]=\"key\"\n          [name]=\"key\"\n          [type]=\"'number'\"\n          [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n          [placeholder]=\"config[key]?.placeholder || ''\"\n          [control]=\"transformToControl(form?.get(key))\"\n          [required]=\"fields[key].isRequired\"\n        ></base-input>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'DateTime'\">\n        <base-input\n          [id]=\"key\"\n          [name]=\"key\"\n          [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n          [placeholder]=\"config[key]?.placeholder || ''\"\n          [type]=\"'datetime-local'\"\n          [control]=\"transformToControl(form?.get(key))\"\n          [required]=\"fields[key].isRequired\"\n        ></base-input>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n", styles: [""] }]
+            args: [{ selector: 'base-model-form-sub', template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n  <ng-container *ngIf=\"!fields[key]?.type\">\n    <fieldset class=\"border rounded-3 p-3\">\n      <legend class=\"float-none w-auto px-3\">\n        {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n      </legend>\n      <base-model-form-sub\n        [fields]=\"fields[key]\"\n        [config]=\"config[key]?.fields || {}\"\n        [form]=\"form.get(key)\"\n      ></base-model-form-sub>\n    </fieldset>\n  </ng-container>\n\n  <ng-container *ngIf=\"fields[key]?.type\">\n    <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n      <ng-container *ngSwitchCase=\"'String'\">\n        <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n          <base-tags\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"fields[key].isRequired\"\n          ></base-tags>\n        </ng-container>\n\n        <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'text'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"fields[key].isRequired\"\n          ></base-input>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'Image'\">\n        <base-upload-image\n          [id]=\"key\"\n          [name]=\"key\"\n          [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n          [control]=\"transformToControl(form?.get(key))\"\n          [url]=\"config[key]?.url\"\n          [path]=\"config[key]?.path || '/files/'\"\n          [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n          [deletePath]=\"config[key]?.deletePath || '/files/'\"\n          [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n          [dragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n          [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png']\"\n          [required]=\"fields[key].isRequired\"\n        ></base-upload-image>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'Reference'\">\n        <base-refence-input\n          [id]=\"key\"\n          [name]=\"key\"\n          [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n          [control]=\"transformToControl(form?.get(key))\"\n          [method]=\"config[key]?.method || 'find'\"\n          [fields]=\"config[key]?.fields || ['id', 'name']\"\n          [valueField]=\"config[key]?.valueField || 'id'\"\n          [nameField]=\"config[key]?.nameField || 'name'\"\n          [required]=\"fields[key].isRequired\"\n        ></base-refence-input>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'Boolean'\">\n        <base-checkbox\n          [id]=\"key\"\n          [name]=\"key\"\n          [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n          [control]=\"transformToControl(form?.get(key))\"\n          [required]=\"fields[key].isRequired\"\n        ></base-checkbox>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'Float'\">\n        <base-input\n          [id]=\"key\"\n          [name]=\"key\"\n          [type]=\"'number'\"\n          [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n          [placeholder]=\"config[key]?.placeholder || ''\"\n          [control]=\"transformToControl(form?.get(key))\"\n          [required]=\"fields[key].isRequired\"\n        ></base-input>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'DateTime'\">\n        <base-input\n          [id]=\"key\"\n          [name]=\"key\"\n          [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n          [placeholder]=\"config[key]?.placeholder || ''\"\n          [type]=\"'datetime-local'\"\n          [control]=\"transformToControl(form?.get(key))\"\n          [required]=\"fields[key].isRequired\"\n        ></base-input>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n", styles: [""] }]
         }], propDecorators: { fields: [{
                 type: Input
             }], form: [{
@@ -927,6 +982,7 @@ const elements = [
     ModelTableComponent,
     ModelFormSubComponent,
     UploadImageComponent,
+    RefenceInputComponent,
 ];
 class BaseComponentsModule {
 }
@@ -945,7 +1001,8 @@ BaseComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
         ModelFormComponent,
         ModelTableComponent,
         ModelFormSubComponent,
-        UploadImageComponent], imports: [FormsModule, ReactiveFormsModule, CommonModule], exports: [
+        UploadImageComponent,
+        RefenceInputComponent], imports: [FormsModule, ReactiveFormsModule, CommonModule], exports: [
         // Components
         InputComponent,
         SelectComponent,
@@ -959,7 +1016,8 @@ BaseComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
         ModelFormComponent,
         ModelTableComponent,
         ModelFormSubComponent,
-        UploadImageComponent] });
+        UploadImageComponent,
+        RefenceInputComponent] });
 BaseComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: BaseComponentsModule, imports: [imports] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: BaseComponentsModule, decorators: [{
             type: NgModule,
@@ -978,5 +1036,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseComponentsModule, BreadcrumbComponent, CheckboxComponent, InputComponent, LoadingBarComponent, ModelFormComponent, ModelFormSubComponent, ModelTableComponent, SelectComponent, SkeletonLoaderComponent, TagsComponent, TextareaComponent, ToastComponent, UploadImageComponent };
+export { BaseComponentsModule, BreadcrumbComponent, CheckboxComponent, InputComponent, LoadingBarComponent, ModelFormComponent, ModelFormSubComponent, ModelTableComponent, RefenceInputComponent, SelectComponent, SkeletonLoaderComponent, TagsComponent, TextareaComponent, ToastComponent, UploadImageComponent };
 //# sourceMappingURL=lenne.tech-ng-base-base-components.mjs.map