@lenne.tech/ng-base 13.10.5 → 13.13.0

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

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { Component, Input, NgModule } from '@angular/core';
+import { Component, Input, EventEmitter, Output, NgModule } from '@angular/core';
 import * as i2 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormControl, Validators, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { trigger, transition, query, style, animate } from '@angular/animations';
 import { Subscription } from 'rxjs';
 import * as i1$1 from '@lenne.tech/ng-base/shared';
-import { ToastType } from '@lenne.tech/ng-base/shared';
+import { ToastType, GraphQLRequestType } from '@lenne.tech/ng-base/shared';
 
 class InputComponent {
     constructor() {
@@ -17,10 +17,10 @@ class InputComponent {
     }
 }
 InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: InputComponent, selector: "base-input", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", type: "type", required: "required" }, 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    [type]=\"type\"\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  />\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"] }] });
+InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: InputComponent, selector: "base-input", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", type: "type", required: "required" }, 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    [type]=\"type\"\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  />\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: [".required:after{content:\" *\"}\n"], 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-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    [type]=\"type\"\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  />\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n    <div *ngIf=\"control?.errors?.['minlength']\">\n      Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control.errors?.['minlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['maxlength']\">\n      Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control.errors?.['maxlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n    <div *ngIf=\"control?.errors?.['matching']\">Die Passw\u00F6rter m\u00FCssen \u00FCberein stimmen.</div>\n  </div>\n</div>\n", styles: [""] }]
+            args: [{ selector: 'base-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    [type]=\"type\"\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  />\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: [".required:after{content:\" *\"}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], name: [{
@@ -51,10 +51,10 @@ class SelectComponent {
     }
 }
 SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: SelectComponent, selector: "base-select", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", control: "control", tabIndex: "tabIndex", required: "required", multiple: "multiple", search: "search", options: "options" }, ngImport: i0, template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <select\n    [id]=\"id\"\n    [name]=\"name\"\n    class=\"form-select\"\n    [attr.aria-label]=\"placeholder\"\n    [attr.data-live-search]=\"search\"\n    [formControl]=\"control\"\n    [required]=\"required\"\n    [tabIndex]=\"tabIndex ?? null\"\n    [multiple]=\"multiple\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  >\n    <option [ngValue]=\"null\" selected>{{ placeholder }}</option>\n    <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\n      {{ option.text }}\n    </option>\n  </select>\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: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { 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: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: SelectComponent, selector: "base-select", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", control: "control", tabIndex: "tabIndex", required: "required", multiple: "multiple", search: "search", options: "options" }, ngImport: i0, template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <select\n    [id]=\"id\"\n    [name]=\"name\"\n    class=\"form-select\"\n    [attr.aria-label]=\"placeholder\"\n    [attr.data-live-search]=\"search\"\n    [formControl]=\"control\"\n    [required]=\"required\"\n    [tabIndex]=\"tabIndex ?? null\"\n    [multiple]=\"multiple\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  >\n    <option [ngValue]=\"null\" selected>{{ placeholder }}</option>\n    <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\n      {{ option.text }}\n    </option>\n  </select>\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: [".required:after{content:\" *\"}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { 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: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-select', template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <select\n    [id]=\"id\"\n    [name]=\"name\"\n    class=\"form-select\"\n    [attr.aria-label]=\"placeholder\"\n    [attr.data-live-search]=\"search\"\n    [formControl]=\"control\"\n    [required]=\"required\"\n    [tabIndex]=\"tabIndex ?? null\"\n    [multiple]=\"multiple\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  >\n    <option [ngValue]=\"null\" selected>{{ placeholder }}</option>\n    <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\n      {{ option.text }}\n    </option>\n  </select>\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: [""] }]
+            args: [{ selector: 'base-select', template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <select\n    [id]=\"id\"\n    [name]=\"name\"\n    class=\"form-select\"\n    [attr.aria-label]=\"placeholder\"\n    [attr.data-live-search]=\"search\"\n    [formControl]=\"control\"\n    [required]=\"required\"\n    [tabIndex]=\"tabIndex ?? null\"\n    [multiple]=\"multiple\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  >\n    <option [ngValue]=\"null\" selected>{{ placeholder }}</option>\n    <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\n      {{ option.text }}\n    </option>\n  </select>\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: [".required:after{content:\" *\"}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], name: [{
@@ -83,10 +83,10 @@ class CheckboxComponent {
     }
 }
 CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: CheckboxComponent, selector: "base-checkbox", inputs: { id: "id", name: "name", label: "label", value: "value", control: "control", required: "required" }, ngImport: i0, template: "<div class=\"form-check\">\n  <input\n    class=\"form-check-input\"\n    type=\"checkbox\"\n    [formControl]=\"control\"\n    [required]=\"required\"\n    [value]=\"value\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  />\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\">\n    <ng-container *ngIf=\"label\">\n      {{ label }}\n    </ng-container>\n    <ng-content></ng-content>\n  </label>\n\n  <div class=\"invalid-feedback ms-0 m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n  </div>\n</div>\n", styles: [""], directives: [{ type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: CheckboxComponent, selector: "base-checkbox", inputs: { id: "id", name: "name", label: "label", value: "value", control: "control", required: "required" }, ngImport: i0, template: "<div class=\"form-check\">\n  <input\n    class=\"form-check-input\"\n    type=\"checkbox\"\n    [formControl]=\"control\"\n    [required]=\"required\"\n    [value]=\"value\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  />\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\">\n    <ng-container *ngIf=\"label\">\n      {{ label }}\n    </ng-container>\n    <ng-content></ng-content>\n  </label>\n\n  <div class=\"invalid-feedback ms-0 m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}\n"], directives: [{ type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-checkbox', template: "<div class=\"form-check\">\n  <input\n    class=\"form-check-input\"\n    type=\"checkbox\"\n    [formControl]=\"control\"\n    [required]=\"required\"\n    [value]=\"value\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  />\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\">\n    <ng-container *ngIf=\"label\">\n      {{ label }}\n    </ng-container>\n    <ng-content></ng-content>\n  </label>\n\n  <div class=\"invalid-feedback ms-0 m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n  </div>\n</div>\n", styles: [""] }]
+            args: [{ selector: 'base-checkbox', template: "<div class=\"form-check\">\n  <input\n    class=\"form-check-input\"\n    type=\"checkbox\"\n    [formControl]=\"control\"\n    [required]=\"required\"\n    [value]=\"value\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  />\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\">\n    <ng-container *ngIf=\"label\">\n      {{ label }}\n    </ng-container>\n    <ng-content></ng-content>\n  </label>\n\n  <div class=\"invalid-feedback ms-0 m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], name: [{
@@ -110,10 +110,10 @@ class TextareaComponent {
     }
 }
 TextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: TextareaComponent, selector: "base-textarea", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", control: "control", rows: "rows", required: "required", tabIndex: "tabIndex" }, ngImport: i0, template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <textarea\n    class=\"form-control\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [rows]=\"rows\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [tabIndex]=\"tabIndex ?? null\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  ></textarea>\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>\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"] }] });
+TextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: TextareaComponent, selector: "base-textarea", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", control: "control", rows: "rows", required: "required", tabIndex: "tabIndex" }, ngImport: i0, template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <textarea\n    class=\"form-control\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [rows]=\"rows\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [tabIndex]=\"tabIndex ?? null\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  ></textarea>\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>\n</div>\n", styles: [".required:after{content:\" *\"}\n"], 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-textarea', template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <textarea\n    class=\"form-control\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [rows]=\"rows\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [tabIndex]=\"tabIndex ?? null\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  ></textarea>\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>\n</div>\n", styles: [""] }]
+            args: [{ selector: 'base-textarea', template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <textarea\n    class=\"form-control\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [rows]=\"rows\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [tabIndex]=\"tabIndex ?? null\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  ></textarea>\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>\n</div>\n", styles: [".required:after{content:\" *\"}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], name: [{
@@ -290,10 +290,10 @@ class TagsComponent {
     }
 }
 TagsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: TagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: TagsComponent, selector: "base-tags", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", options: "options", custom: "custom", removeByKey: "removeByKey", required: "required" }, ngImport: i0, template: "<div class=\"form-group position-relative\" *ngIf=\"control\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n\n  <div class=\"tag-wrapper\" *ngIf=\"control?.value\">\n    <div class=\"tag\" *ngFor=\"let tag of control?.value\">\n      {{ tag }}\n      <span (click)=\"removeTag(tag)\"><i class=\"bi bi-x-circle\"></i></span>\n    </div>\n  </div>\n  <input\n    [id]=\"id\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n    [(ngModel)]=\"inputValue\"\n    [autocomplete]=\"autocomplete ?? null\"\n    [tabIndex]=\"tabIndex ?? null\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onFocus()\"\n    type=\"text\"\n    class=\"form-control\"\n    (keyup)=\"enterKey($event)\"\n  />\n\n  <div class=\"tag-options\" *ngIf=\"options && selectedElement\">\n    <div class=\"tag-option-item\" *ngFor=\"let option of filterOptions()\" (click)=\"addTag(option)\">{{ option }}</div>\n  </div>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n  </div>\n</div>\n", styles: [".tag-options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999}.tag-options .tag-option-item{padding:10px;cursor:pointer}.tag-options .tag-option-item:hover{color:var(--bs-primary)}.tag-wrapper{display:flex;flex-direction:row;justify-content:flex-start;column-gap:10px;row-gap:10px;flex-wrap:wrap;margin-bottom:10px;position:relative}.tag-wrapper .tag{background-color:var(--bs-light);color:var(--bs-dark);padding:10px 15px;font-style:normal;font-weight:300;font-size:14px;line-height:140%}.tag-wrapper .tag span{margin-left:20px;cursor:pointer}.tag-wrapper .tag span .bi{color:var(--bs-black)}.tag-wrapper .tag span .bi:before{vertical-align:-.175em}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: TagsComponent, selector: "base-tags", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", options: "options", custom: "custom", removeByKey: "removeByKey", required: "required" }, ngImport: i0, template: "<div class=\"form-group position-relative\" *ngIf=\"control\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n\n  <div class=\"tag-wrapper\" *ngIf=\"control?.value\">\n    <div class=\"tag\" *ngFor=\"let tag of control?.value\">\n      {{ tag }}\n      <span (click)=\"removeTag(tag)\"><i class=\"bi bi-x-circle\"></i></span>\n    </div>\n  </div>\n  <input\n    [id]=\"id\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n    [(ngModel)]=\"inputValue\"\n    [autocomplete]=\"autocomplete ?? null\"\n    [tabIndex]=\"tabIndex ?? null\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onFocus()\"\n    type=\"text\"\n    class=\"form-control\"\n    (keyup)=\"enterKey($event)\"\n  />\n\n  <div class=\"tag-options\" *ngIf=\"options && selectedElement\">\n    <div class=\"tag-option-item\" *ngFor=\"let option of filterOptions()\" (click)=\"addTag(option)\">{{ option }}</div>\n  </div>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}.tag-options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999}.tag-options .tag-option-item{padding:10px;cursor:pointer}.tag-options .tag-option-item:hover{color:var(--bs-primary)}.tag-wrapper{display:flex;flex-direction:row;justify-content:flex-start;column-gap:10px;row-gap:10px;flex-wrap:wrap;margin-bottom:10px;position:relative}.tag-wrapper .tag{background-color:var(--bs-light);color:var(--bs-dark);padding:10px 15px;font-style:normal;font-weight:300;font-size:14px;line-height:140%}.tag-wrapper .tag span{margin-left:20px;cursor:pointer}.tag-wrapper .tag span .bi{color:var(--bs-black)}.tag-wrapper .tag span .bi:before{vertical-align:-.175em}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: TagsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-tags', template: "<div class=\"form-group position-relative\" *ngIf=\"control\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n\n  <div class=\"tag-wrapper\" *ngIf=\"control?.value\">\n    <div class=\"tag\" *ngFor=\"let tag of control?.value\">\n      {{ tag }}\n      <span (click)=\"removeTag(tag)\"><i class=\"bi bi-x-circle\"></i></span>\n    </div>\n  </div>\n  <input\n    [id]=\"id\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n    [(ngModel)]=\"inputValue\"\n    [autocomplete]=\"autocomplete ?? null\"\n    [tabIndex]=\"tabIndex ?? null\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onFocus()\"\n    type=\"text\"\n    class=\"form-control\"\n    (keyup)=\"enterKey($event)\"\n  />\n\n  <div class=\"tag-options\" *ngIf=\"options && selectedElement\">\n    <div class=\"tag-option-item\" *ngFor=\"let option of filterOptions()\" (click)=\"addTag(option)\">{{ option }}</div>\n  </div>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n  </div>\n</div>\n", styles: [".tag-options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999}.tag-options .tag-option-item{padding:10px;cursor:pointer}.tag-options .tag-option-item:hover{color:var(--bs-primary)}.tag-wrapper{display:flex;flex-direction:row;justify-content:flex-start;column-gap:10px;row-gap:10px;flex-wrap:wrap;margin-bottom:10px;position:relative}.tag-wrapper .tag{background-color:var(--bs-light);color:var(--bs-dark);padding:10px 15px;font-style:normal;font-weight:300;font-size:14px;line-height:140%}.tag-wrapper .tag span{margin-left:20px;cursor:pointer}.tag-wrapper .tag span .bi{color:var(--bs-black)}.tag-wrapper .tag span .bi:before{vertical-align:-.175em}\n"] }]
+            args: [{ selector: 'base-tags', template: "<div class=\"form-group position-relative\" *ngIf=\"control\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n\n  <div class=\"tag-wrapper\" *ngIf=\"control?.value\">\n    <div class=\"tag\" *ngFor=\"let tag of control?.value\">\n      {{ tag }}\n      <span (click)=\"removeTag(tag)\"><i class=\"bi bi-x-circle\"></i></span>\n    </div>\n  </div>\n  <input\n    [id]=\"id\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n    [(ngModel)]=\"inputValue\"\n    [autocomplete]=\"autocomplete ?? null\"\n    [tabIndex]=\"tabIndex ?? null\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onFocus()\"\n    type=\"text\"\n    class=\"form-control\"\n    (keyup)=\"enterKey($event)\"\n  />\n\n  <div class=\"tag-options\" *ngIf=\"options && selectedElement\">\n    <div class=\"tag-option-item\" *ngFor=\"let option of filterOptions()\" (click)=\"addTag(option)\">{{ option }}</div>\n  </div>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}.tag-options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999}.tag-options .tag-option-item{padding:10px;cursor:pointer}.tag-options .tag-option-item:hover{color:var(--bs-primary)}.tag-wrapper{display:flex;flex-direction:row;justify-content:flex-start;column-gap:10px;row-gap:10px;flex-wrap:wrap;margin-bottom:10px;position:relative}.tag-wrapper .tag{background-color:var(--bs-light);color:var(--bs-dark);padding:10px 15px;font-style:normal;font-weight:300;font-size:14px;line-height:140%}.tag-wrapper .tag span{margin-left:20px;cursor:pointer}.tag-wrapper .tag span .bi{color:var(--bs-black)}.tag-wrapper .tag span .bi:before{vertical-align:-.175em}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], name: [{
@@ -370,6 +370,303 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
             args: [{ selector: 'base-breadcrumb', template: "<ul class=\"pt-3\">\n  <li *ngFor=\"let breadcrumb of breadcrumbs$ | async\">\n    <a [routerLink]=\"breadcrumb.url\">{{ breadcrumb.label }}</a>\n  </li>\n</ul>\n", styles: ["ul{list-style:none;margin:0;padding:0}ul li{display:inline}ul li:before{content:\">\";margin:0 6px}ul li:first-child:before{content:\"\";margin:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.BreadcrumbService }]; } });
 
+class ModelFormComponent {
+    constructor(graphQLMetaService, graphQLService, formsService) {
+        this.graphQLMetaService = graphQLMetaService;
+        this.graphQLService = graphQLService;
+        this.formsService = formsService;
+        this.delete = true;
+        this.finished = new EventEmitter();
+        this.loading = false;
+        this.keys = [];
+    }
+    ngOnInit() {
+        this.graphQLMetaService.getMeta().subscribe((meta) => {
+            this.meta = meta;
+            if (this.modelName) {
+                this.init();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes['modelName'] || changes['value']) {
+            this.init();
+        }
+    }
+    /**
+     * > If the model name and meta data are present, set the operation to update or create, get the fields from the meta
+     * data, create the form, and if the value is present, patch the form with the value
+     */
+    init() {
+        if (this.modelName && this.meta) {
+            this.operation = this.id ? 'update' : 'create';
+            this.fields = this.meta.getArgs(this.operation + this.capitalizeFirstLetter(this.modelName), {
+                type: GraphQLRequestType.MUTATION,
+            });
+            this.fields = this.fields['input'];
+            this.keys = Object.keys(this.fields);
+            this.createForm(this.fields);
+            if (this.id) {
+                this.getObjectById(this.id);
+            }
+        }
+    }
+    /**
+     * It takes an id, and then calls the graphQLService to get the object from the database
+     *
+     * @param id - The id of the object to be loaded
+     */
+    getObjectById(id) {
+        this.graphQLService
+            .graphQl('get' + this.capitalizeFirstLetter(this.modelName), {
+            arguments: { id },
+            fields: this.keys,
+            type: GraphQLRequestType.QUERY,
+        })
+            .subscribe({
+            next: (value) => {
+                this.form.patchValue(value);
+            },
+            error: (err) => {
+                console.error('Error on load object', err);
+                this.finished.emit(false);
+            },
+        });
+    }
+    /**
+     * It takes a collection of GraphQL types and creates a form group with a form control for each type
+     *
+     * @param fields - IGraphQLTypeCollection
+     */
+    createForm(fields) {
+        var _a;
+        const group = {};
+        for (const [key, value] of Object.entries(fields)) {
+            if ((_a = fields[key]) === null || _a === void 0 ? void 0 : _a.type) {
+                group[key] = new FormControl('', Validators.required);
+            }
+        }
+        this.form = new FormGroup(group);
+    }
+    /**
+     * It calls the graphQLService to delete the object with the id of the object that is currently being edited
+     */
+    deleteObject() {
+        this.graphQLService
+            .graphQl('delete' + this.capitalizeFirstLetter(this.modelName), {
+            arguments: { id: this.id },
+            fields: ['id'],
+            type: GraphQLRequestType.MUTATION,
+        })
+            .subscribe({
+            next: (value) => {
+                this.finished.emit(true);
+            },
+            error: (err) => {
+                console.error('Error on delete object', err);
+            },
+        });
+    }
+    /**
+     * It takes a string, capitalizes the first letter, and returns the modified string
+     *
+     * @param value - The string to capitalize.
+     * @returns The first letter of the string is being capitalized and the rest of the string is being returned.
+     */
+    capitalizeFirstLetter(value) {
+        return value.charAt(0).toUpperCase() + value.slice(1);
+    }
+    /**
+     * It takes an AbstractControl and returns a FormControl
+     *
+     * @param control - AbstractControl | null | undefined
+     * @returns A FormControl
+     */
+    transformToControl(control) {
+        return control;
+    }
+    /**
+     * It takes the form, validates it, and then sends it to the GraphQL server
+     *
+     * @returns The id of the newly created or updated object.
+     */
+    submit() {
+        this.loading = true;
+        if (this.form.invalid) {
+            this.formsService.validateAllFormFields(this.form);
+            this.loading = false;
+            return;
+        }
+        if (this.operation === 'update' && !this.id) {
+            console.error('ID is missing for update!');
+            this.loading = false;
+            return;
+        }
+        this.graphQLService
+            .graphQl(this.operation + this.capitalizeFirstLetter(this.modelName), {
+            arguments: this.operation === 'update' ? { id: this.id, input: this.form.value } : { input: this.form.value },
+            fields: ['id'],
+            type: GraphQLRequestType.MUTATION,
+        })
+            .subscribe({
+            next: (value) => {
+                this.loading = false;
+                this.finished.emit(true);
+            },
+            error: (err) => {
+                console.error('Failed on ' + this.operation, err);
+                this.loading = false;
+            },
+        });
+    }
+}
+ModelFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelFormComponent, deps: [{ token: i1$1.GraphQLMetaService }, { token: i1$1.GraphQLService }, { token: i1$1.FormsService }], target: i0.ɵɵFactoryTarget.Component });
+ModelFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ModelFormComponent, selector: "base-model-form", inputs: { modelName: "modelName", id: "id", delete: "delete" }, outputs: { finished: "finished" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"w-100\" *ngIf=\"form\">\n  <h1>{{ capitalizeFirstLetter(modelName) }} {{ operation === 'update' ? 'bearbeiten' : 'erstellen' }}</h1>\n\n  <form [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n    <div class=\"mt-3\" *ngFor=\"let key of keys\">\n      <ng-container [ngSwitch]=\"fields[key]?.type\">\n        <ng-container *ngSwitchCase=\"'[String]'\">\n          <base-tags\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"true\"\n          ></base-tags>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'String'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"capitalizeFirstLetter(key)\"\n            [type]=\"'text'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"true\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Boolean'\">\n          <base-checkbox\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"true\"\n          ></base-checkbox>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'DateTime'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"capitalizeFirstLetter(key)\"\n            [type]=\"'datetime-local'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"true\"\n          ></base-input>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"d-flex\" [ngClass]=\"id && delete ? 'justify-content-between' : 'justify-content-end'\">\n      <div *ngIf=\"id && delete\">\n        <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteObject()\">L\u00F6schen</button>\n      </div>\n      <div>\n        <button class=\"btn btn-primary\" type=\"submit\" *ngIf=\"!loading\">\n          {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}\n        </button>\n        <button class=\"btn btn-primary\" type=\"button\" disabled *ngIf=\"loading\">\n          <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n          {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}...\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n", styles: [""], components: [{ type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required"] }, { type: InputComponent, selector: "base-input", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required"] }, { type: CheckboxComponent, selector: "base-checkbox", inputs: ["id", "name", "label", "value", "control", "required"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'base-model-form', template: "<div class=\"w-100\" *ngIf=\"form\">\n  <h1>{{ capitalizeFirstLetter(modelName) }} {{ operation === 'update' ? 'bearbeiten' : 'erstellen' }}</h1>\n\n  <form [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n    <div class=\"mt-3\" *ngFor=\"let key of keys\">\n      <ng-container [ngSwitch]=\"fields[key]?.type\">\n        <ng-container *ngSwitchCase=\"'[String]'\">\n          <base-tags\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"true\"\n          ></base-tags>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'String'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"capitalizeFirstLetter(key)\"\n            [type]=\"'text'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"true\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Boolean'\">\n          <base-checkbox\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"true\"\n          ></base-checkbox>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'DateTime'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"capitalizeFirstLetter(key)\"\n            [type]=\"'datetime-local'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"true\"\n          ></base-input>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"d-flex\" [ngClass]=\"id && delete ? 'justify-content-between' : 'justify-content-end'\">\n      <div *ngIf=\"id && delete\">\n        <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteObject()\">L\u00F6schen</button>\n      </div>\n      <div>\n        <button class=\"btn btn-primary\" type=\"submit\" *ngIf=\"!loading\">\n          {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}\n        </button>\n        <button class=\"btn btn-primary\" type=\"button\" disabled *ngIf=\"loading\">\n          <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n          {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}...\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }, { type: i1$1.FormsService }]; }, propDecorators: { modelName: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], delete: [{
+                type: Input
+            }], finished: [{
+                type: Output
+            }] } });
+
+class ModelTableComponent {
+    constructor(graphQLMetaService, graphQLService) {
+        this.graphQLMetaService = graphQLMetaService;
+        this.graphQLService = graphQLService;
+        this.createMode = false;
+        this.create = true;
+        this.update = true;
+        this.delete = true;
+        this.tableFields = ['id', 'name', 'title', 'description', 'email', 'createdAt', 'updatedAt'];
+        this.idSelected = new EventEmitter();
+        this.createModeChanged = new EventEmitter();
+        this.objects = [];
+        this.availableFields = [];
+        this.selectedId = '';
+    }
+    ngOnInit() {
+        this.graphQLMetaService.getMeta().subscribe((meta) => {
+            this.meta = meta;
+            if (this.modelName) {
+                this.init();
+            }
+            if (this.objectId) {
+                this.selectedId = this.objectId;
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes['modelName'] && this.meta) {
+            this.init();
+        }
+        if (changes['objectId'] && this.meta) {
+            if (this.selectedId !== this.objectId) {
+                this.selectedId = this.objectId;
+            }
+        }
+    }
+    /**
+     * We're using the `meta` service to get the fields that are available for the `find` query for the model we're working
+     * with. We're then using that information to populate the `availableFields` array
+     */
+    init() {
+        var _a;
+        this.availableFields = [];
+        const possibleFields = this.meta.getFields('find' + this.capitalizeFirstLetter(this.modelName) + 's');
+        const keys = Object.keys(possibleFields);
+        (_a = this.tableFields) === null || _a === void 0 ? void 0 : _a.forEach((field) => {
+            if (keys.includes(field)) {
+                this.availableFields.push(field);
+            }
+        });
+        this.loadObjects(this.availableFields);
+    }
+    /**
+     * When the user clicks the "Create New" button, the createModeChanged event is emitted, which is then handled by the
+     * parent component
+     */
+    createNewObject() {
+        this.createMode = true;
+        this.createModeChanged.emit(true);
+    }
+    /**
+     * It loads the objects from the database and stores them in the objects variable
+     *
+     * @param fields - string[] - The fields you want to load from the database.
+     */
+    loadObjects(fields) {
+        this.objects = [];
+        this.graphQLService
+            .graphQl('find' + this.capitalizeFirstLetter(this.modelName) + 's', {
+            fields,
+            type: GraphQLRequestType.QUERY,
+        })
+            .subscribe({
+            next: (value) => {
+                this.objects = value;
+            },
+            error: (err) => {
+                console.log('Error on loading objects', err);
+            },
+        });
+    }
+    /**
+     * If the update property is true, then set the selectedId property to the id of the object passed in, and emit the
+     * selectedId property
+     *
+     * @param object - any - this is the object that is passed in from the child component.
+     */
+    selectId(object) {
+        if (!object) {
+            this.createMode = false;
+            this.createModeChanged.emit(false);
+        }
+        if (this.update) {
+            this.selectedId = object['id'];
+            this.idSelected.emit(this.selectedId);
+        }
+    }
+    /**
+     * It takes a string, capitalizes the first letter, and returns the modified string
+     *
+     * @param value - The string to capitalize.
+     * @returns The first letter of the string is being capitalized and the rest of the string is being returned.
+     */
+    capitalizeFirstLetter(value) {
+        return value.charAt(0).toUpperCase() + value.slice(1);
+    }
+}
+ModelTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelTableComponent, deps: [{ token: i1$1.GraphQLMetaService }, { token: i1$1.GraphQLService }], target: i0.ɵɵFactoryTarget.Component });
+ModelTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ModelTableComponent, selector: "base-model-table", inputs: { modelName: "modelName", objectId: "objectId", createMode: "createMode", create: "create", update: "update", delete: "delete", tableFields: "tableFields" }, outputs: { idSelected: "idSelected", createModeChanged: "createModeChanged" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!selectedId && !createMode\">\n  <div class=\"w-100 d-flex flex-row justify-content-between mb-4\">\n    <h1 *ngIf=\"modelName\">{{ capitalizeFirstLetter(modelName) }}s</h1>\n    <div class=\"d-flex align-items-center\">\n      <button class=\"btn btn-primary\" (click)=\"createNewObject()\" *ngIf=\"create\">Erstellen</button>\n    </div>\n  </div>\n  <table class=\"table table-hover table-responsive bg-white\">\n    <thead>\n      <tr>\n        <th scope=\"col\" *ngFor=\"let field of availableFields\">{{ capitalizeFirstLetter(field) }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let object of objects\">\n        <td class=\"cursor-pointer\" *ngFor=\"let field of availableFields\" (click)=\"selectId(object)\">\n          {{ object[field] }}\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<div class=\"w-100\" *ngIf=\"selectedId || createMode\">\n  <button class=\"btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n  <base-model-form\n    [modelName]=\"modelName\"\n    [id]=\"selectedId\"\n    (finished)=\"selectId('')\"\n    [delete]=\"delete\"\n  ></base-model-form>\n</div>\n", styles: [".cursor-pointer{cursor:pointer}.table>:not(:first-child){border-top:0}table{border-radius:.25rem;border-color:#e2e8f0!important}table thead{text-transform:uppercase;font-size:12px}table thead th{padding:12px 24px}table tbody tr td{font-weight:400!important;font-size:16px;padding:16px 24px}\n"], components: [{ type: ModelFormComponent, selector: "base-model-form", inputs: ["modelName", "id", "delete"], outputs: ["finished"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'base-model-table', template: "<div *ngIf=\"!selectedId && !createMode\">\n  <div class=\"w-100 d-flex flex-row justify-content-between mb-4\">\n    <h1 *ngIf=\"modelName\">{{ capitalizeFirstLetter(modelName) }}s</h1>\n    <div class=\"d-flex align-items-center\">\n      <button class=\"btn btn-primary\" (click)=\"createNewObject()\" *ngIf=\"create\">Erstellen</button>\n    </div>\n  </div>\n  <table class=\"table table-hover table-responsive bg-white\">\n    <thead>\n      <tr>\n        <th scope=\"col\" *ngFor=\"let field of availableFields\">{{ capitalizeFirstLetter(field) }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let object of objects\">\n        <td class=\"cursor-pointer\" *ngFor=\"let field of availableFields\" (click)=\"selectId(object)\">\n          {{ object[field] }}\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<div class=\"w-100\" *ngIf=\"selectedId || createMode\">\n  <button class=\"btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n  <base-model-form\n    [modelName]=\"modelName\"\n    [id]=\"selectedId\"\n    (finished)=\"selectId('')\"\n    [delete]=\"delete\"\n  ></base-model-form>\n</div>\n", styles: [".cursor-pointer{cursor:pointer}.table>:not(:first-child){border-top:0}table{border-radius:.25rem;border-color:#e2e8f0!important}table thead{text-transform:uppercase;font-size:12px}table thead th{padding:12px 24px}table tbody tr td{font-weight:400!important;font-size:16px;padding:16px 24px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }]; }, propDecorators: { modelName: [{
+                type: Input
+            }], objectId: [{
+                type: Input
+            }], createMode: [{
+                type: Input
+            }], create: [{
+                type: Input
+            }], update: [{
+                type: Input
+            }], delete: [{
+                type: Input
+            }], tableFields: [{
+                type: Input
+            }], idSelected: [{
+                type: Output
+            }], createModeChanged: [{
+                type: Output
+            }] } });
+
 // Modules
 const imports = [FormsModule, ReactiveFormsModule, CommonModule];
 // Imported and exported elements
@@ -384,6 +681,8 @@ const elements = [
     LoadingBarComponent,
     SkeletonLoaderComponent,
     BreadcrumbComponent,
+    ModelFormComponent,
+    ModelTableComponent,
 ];
 class BaseComponentsModule {
 }
@@ -398,7 +697,9 @@ BaseComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
         TagsComponent,
         LoadingBarComponent,
         SkeletonLoaderComponent,
-        BreadcrumbComponent
+        BreadcrumbComponent,
+        ModelFormComponent,
+        ModelTableComponent
     ], imports: [FormsModule, ReactiveFormsModule, CommonModule], exports: [
         // Components
         InputComponent,
@@ -409,7 +710,9 @@ BaseComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
         TagsComponent,
         LoadingBarComponent,
         SkeletonLoaderComponent,
-        BreadcrumbComponent
+        BreadcrumbComponent,
+        ModelFormComponent,
+        ModelTableComponent
     ] });
 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: [{
@@ -429,5 +732,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseComponentsModule, BreadcrumbComponent, CheckboxComponent, InputComponent, LoadingBarComponent, SelectComponent, SkeletonLoaderComponent, TagsComponent, TextareaComponent, ToastComponent };
+export { BaseComponentsModule, BreadcrumbComponent, CheckboxComponent, InputComponent, LoadingBarComponent, ModelFormComponent, ModelTableComponent, SelectComponent, SkeletonLoaderComponent, TagsComponent, TextareaComponent, ToastComponent };
 //# sourceMappingURL=lenne.tech-ng-base-base-components.mjs.map