@lenne.tech/ng-base 14.22.0 → 14.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/base-components/components/model-form/model-form-base.component.d.ts +25 -0
  2. package/base-components/components/model-form/model-form.component.d.ts +6 -0
  3. package/base-components/components/model-table/model-table.component.d.ts +11 -6
  4. package/base-components/components/tags/tags.component.d.ts +3 -1
  5. package/base-components/public-api.d.ts +1 -0
  6. package/esm2020/base-cms/pages/base-cms/base-cms.component.mjs +3 -3
  7. package/esm2020/base-components/base-components.module.mjs +1 -1
  8. package/esm2020/base-components/components/model-form/model-form-base.component.mjs +45 -0
  9. package/esm2020/base-components/components/model-form/model-form.component.mjs +10 -1
  10. package/esm2020/base-components/components/model-form-sub/model-form-sub.component.mjs +3 -3
  11. package/esm2020/base-components/components/model-table/model-table.component.mjs +56 -18
  12. package/esm2020/base-components/components/refence-input/refence-input.component.mjs +1 -1
  13. package/esm2020/base-components/components/tags/tags.component.mjs +15 -6
  14. package/esm2020/base-components/public-api.mjs +2 -1
  15. package/esm2020/shared/interfaces/cms-field-config.interface.mjs +1 -1
  16. package/esm2020/shared/interfaces/cms-model-config.interface.mjs +1 -1
  17. package/fesm2015/lenne.tech-ng-base-base-cms.mjs +2 -2
  18. package/fesm2015/lenne.tech-ng-base-base-cms.mjs.map +1 -1
  19. package/fesm2015/lenne.tech-ng-base-base-components.mjs +129 -29
  20. package/fesm2015/lenne.tech-ng-base-base-components.mjs.map +1 -1
  21. package/fesm2020/lenne.tech-ng-base-base-cms.mjs +2 -2
  22. package/fesm2020/lenne.tech-ng-base-base-cms.mjs.map +1 -1
  23. package/fesm2020/lenne.tech-ng-base-base-components.mjs +125 -27
  24. package/fesm2020/lenne.tech-ng-base-base-components.mjs.map +1 -1
  25. package/package.json +1 -1
  26. package/shared/interfaces/cms-field-config.interface.d.ts +2 -0
  27. package/shared/interfaces/cms-model-config.interface.d.ts +2 -0
package/fesm2020/lenne.tech-ng-base-base-components.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as i0 from '@angular/core';
2
- import { EventEmitter, Component, Input, Output, ChangeDetectionStrategy, ViewChild, Directive, Inject, HostListener, Pipe, NgModule } from '@angular/core';
2
+ import { EventEmitter, Component, Input, Output, ChangeDetectionStrategy, ViewChild, Directive, Inject, HostListener, Pipe, ViewContainerRef, NgModule } from '@angular/core';
3
3
  import * as i1 from '@angular/forms';
4
- import { UntypedFormControl, UntypedFormGroup, Validators, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
4
+ import { FormControl, UntypedFormControl, UntypedFormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
5
5
  import * as i2 from '@angular/common';
6
6
  import { DOCUMENT, CommonModule } from '@angular/common';
7
7
  import { trigger, transition, query, style, animate } from '@angular/animations';
@@ -249,6 +249,7 @@ class TagsComponent {
249
249
  this.removeByKey = true;
250
250
  this.required = false;
251
251
  this.objectPath = '';
252
+ this.validators = [];
252
253
  this.inputValue = '';
253
254
  }
254
255
  /**
@@ -296,6 +297,11 @@ class TagsComponent {
296
297
  if (tag.endsWith(',') || tag.endsWith(' ')) {
297
298
  tag = tag.slice(0, -1);
298
299
  }
300
+ const temp = new FormControl(tag, this.validators);
301
+ this.control.setErrors({ ...this.control.errors, ...temp.errors });
302
+ if (temp.invalid) {
303
+ return;
304
+ }
299
305
  // Check if user copy string into input
300
306
  if (tag.split(' ').length > 1 && !isOption) {
301
307
  const tags = tag.split(' ');
@@ -364,13 +370,13 @@ class TagsComponent {
364
370
  }
365
371
  this.control.markAsTouched();
366
372
  if (foundOption) {
367
- this.control.setValue(this.control.value.filter((item) => item !== foundOption.value));
373
+ this.control.setValue(this.control.value?.filter((item) => item !== foundOption.value));
368
374
  }
369
375
  else if (this.control.value) {
370
376
  this.control.value.splice(-1);
371
377
  }
372
378
  if (this.control.value?.length === 0) {
373
- this.control.setErrors({ required: true });
379
+ this.control.setErrors({ ...this.control.errors, required: true });
374
380
  }
375
381
  }
376
382
  /**
@@ -405,7 +411,7 @@ class TagsComponent {
405
411
  }
406
412
  }
407
413
  if (!this.control.value || this.control.value?.length === 0) {
408
- this.control.setErrors({ required: true });
414
+ this.control.setErrors({ ...this.control.errors, required: true });
409
415
  }
410
416
  this.selectedElement = null;
411
417
  }, 250);
@@ -413,10 +419,10 @@ class TagsComponent {
413
419
  }
414
420
  }
415
421
  TagsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: TagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
416
- TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", 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", objectPath: "objectPath" }, 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 {{ getReadableTag(tag) }}\n <span (click)=\"removeTag(tag)\"><i class=\"bi bi-x-circle\"></i></span>\n </div>\n </div>\n <input [formControl]=\"control\" hidden />\n <input\n [id]=\"objectPath ? objectPath + '.' + 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?.text, true, true)\">\n {{ option?.text }}\n </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 *ngIf=\"control?.errors?.['invalidReference'] && inputValue\">\n {{ inputValue }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.\n </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;max-height:200px;overflow-y:scroll}.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"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
422
+ TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", 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", objectPath: "objectPath", validators: "validators" }, 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 {{ getReadableTag(tag) }}\n <span (click)=\"removeTag(tag)\"><i class=\"bi bi-x-circle\"></i></span>\n </div>\n </div>\n <input [formControl]=\"control\" hidden />\n <input\n [id]=\"objectPath ? objectPath + '.' + 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?.text, true, true)\">\n {{ option?.text }}\n </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 *ngIf=\"control?.errors?.['invalidReference'] && inputValue\">\n {{ inputValue }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.\n </div>\n <div *ngIf=\"control?.errors?.['email']\">Bitte gib eine g\u00FCltige E-Mail Adresse ein.</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;max-height:200px;overflow-y:scroll}.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"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
417
423
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: TagsComponent, decorators: [{
418
424
  type: Component,
419
- 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 {{ getReadableTag(tag) }}\n <span (click)=\"removeTag(tag)\"><i class=\"bi bi-x-circle\"></i></span>\n </div>\n </div>\n <input [formControl]=\"control\" hidden />\n <input\n [id]=\"objectPath ? objectPath + '.' + 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?.text, true, true)\">\n {{ option?.text }}\n </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 *ngIf=\"control?.errors?.['invalidReference'] && inputValue\">\n {{ inputValue }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.\n </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;max-height:200px;overflow-y:scroll}.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"] }]
425
+ 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 {{ getReadableTag(tag) }}\n <span (click)=\"removeTag(tag)\"><i class=\"bi bi-x-circle\"></i></span>\n </div>\n </div>\n <input [formControl]=\"control\" hidden />\n <input\n [id]=\"objectPath ? objectPath + '.' + 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?.text, true, true)\">\n {{ option?.text }}\n </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 *ngIf=\"control?.errors?.['invalidReference'] && inputValue\">\n {{ inputValue }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.\n </div>\n <div *ngIf=\"control?.errors?.['email']\">Bitte gib eine g\u00FCltige E-Mail Adresse ein.</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;max-height:200px;overflow-y:scroll}.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"] }]
420
426
  }], propDecorators: { id: [{
421
427
  type: Input
422
428
  }], name: [{
@@ -441,6 +447,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
441
447
  type: Input
442
448
  }], objectPath: [{
443
449
  type: Input
450
+ }], validators: [{
451
+ type: Input
444
452
  }] } });
445
453
 
446
454
  class LoadingBarComponent {
@@ -1136,7 +1144,7 @@ class RefenceInputComponent {
1136
1144
  }
1137
1145
  }
1138
1146
  RefenceInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: RefenceInputComponent, deps: [{ token: i1$1.GraphQLService }], target: i0.ɵɵFactoryTarget.Component });
1139
- RefenceInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: RefenceInputComponent, selector: "base-refence-input", inputs: { id: "id", name: "name", label: "label", isList: "isList", search: "search", useParamAsArg: "useParamAsArg", param: "param", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", required: "required", method: "method", fields: "fields", valueField: "valueField", objectPath: "objectPath", nameField: "nameField" }, ngImport: i0, template: "<ng-container *ngIf=\"!isList\">\n <div class=\"form-group mb-3\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n\n <div class=\"position-relative\" *ngIf=\"search\">\n <input [formControl]=\"control\" hidden />\n <input\n [id]=\"objectPath ? objectPath + '.' + id : id\"\n [name]=\"name\"\n class=\"form-control\"\n [(ngModel)]=\"currentValue\"\n [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onFocus()\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n [autocomplete]=\"autocomplete ?? null\"\n [tabIndex]=\"tabIndex ?? null\"\n (keyup)=\"enterKey($event)\"\n />\n <div class=\"options\" *ngIf=\"objects && selectedElement\">\n <div class=\"option-item\" *ngFor=\"let object of filterOptions()\" (click)=\"set(object[valueField])\">\n {{ prepareNameField(object) }}\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!search\">\n <select\n [id]=\"objectPath ? objectPath + '.' + id : id\"\n [name]=\"name\"\n class=\"form-select\"\n [attr.aria-label]=\"placeholder\"\n [formControl]=\"control\"\n [required]=\"required\"\n [tabIndex]=\"tabIndex ?? null\"\n [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n >\n <option [ngValue]=\"null\" selected>{{ placeholder }}</option>\n <option *ngFor=\"let object of objects\" [ngValue]=\"object[valueField]\">\n {{ prepareNameField(object) }}\n </option>\n </select>\n </div>\n\n <div\n class=\"d-block invalid-feedback m-2\"\n *ngIf=\"control?.invalid && (control?.dirty || control?.touched) && !selectedElement\"\n >\n <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n <div *ngIf=\"control?.errors?.['invalidReference'] && currentValue\">\n {{ currentValue }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.\n </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</ng-container>\n\n<ng-container *ngIf=\"isList\">\n <base-tags\n [id]=\"id\"\n [label]=\"label\"\n [name]=\"name\"\n [control]=\"control\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n [custom]=\"false\"\n [options]=\"optionsForTagInput\"\n ></base-tags>\n</ng-container>\n", styles: [".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;max-height:200px;overflow-y:scroll}.options .option-item{padding:10px;cursor:pointer}.options .option-item:hover{color:var(--bs-primary)}\n"], dependencies: [{ kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required", "objectPath"] }] });
1147
+ RefenceInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: RefenceInputComponent, selector: "base-refence-input", inputs: { id: "id", name: "name", label: "label", isList: "isList", search: "search", useParamAsArg: "useParamAsArg", param: "param", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", required: "required", method: "method", fields: "fields", valueField: "valueField", objectPath: "objectPath", nameField: "nameField" }, ngImport: i0, template: "<ng-container *ngIf=\"!isList\">\n <div class=\"form-group mb-3\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n\n <div class=\"position-relative\" *ngIf=\"search\">\n <input [formControl]=\"control\" hidden />\n <input\n [id]=\"objectPath ? objectPath + '.' + id : id\"\n [name]=\"name\"\n class=\"form-control\"\n [(ngModel)]=\"currentValue\"\n [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onFocus()\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n [autocomplete]=\"autocomplete ?? null\"\n [tabIndex]=\"tabIndex ?? null\"\n (keyup)=\"enterKey($event)\"\n />\n <div class=\"options\" *ngIf=\"objects && selectedElement\">\n <div class=\"option-item\" *ngFor=\"let object of filterOptions()\" (click)=\"set(object[valueField])\">\n {{ prepareNameField(object) }}\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!search\">\n <select\n [id]=\"objectPath ? objectPath + '.' + id : id\"\n [name]=\"name\"\n class=\"form-select\"\n [attr.aria-label]=\"placeholder\"\n [formControl]=\"control\"\n [required]=\"required\"\n [tabIndex]=\"tabIndex ?? null\"\n [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n >\n <option [ngValue]=\"null\" selected>{{ placeholder }}</option>\n <option *ngFor=\"let object of objects\" [ngValue]=\"object[valueField]\">\n {{ prepareNameField(object) }}\n </option>\n </select>\n </div>\n\n <div\n class=\"d-block invalid-feedback m-2\"\n *ngIf=\"control?.invalid && (control?.dirty || control?.touched) && !selectedElement\"\n >\n <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n <div *ngIf=\"control?.errors?.['invalidReference'] && currentValue\">\n {{ currentValue }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.\n </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</ng-container>\n\n<ng-container *ngIf=\"isList\">\n <base-tags\n [id]=\"id\"\n [label]=\"label\"\n [name]=\"name\"\n [control]=\"control\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n [custom]=\"false\"\n [options]=\"optionsForTagInput\"\n ></base-tags>\n</ng-container>\n", styles: [".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;max-height:200px;overflow-y:scroll}.options .option-item{padding:10px;cursor:pointer}.options .option-item:hover{color:var(--bs-primary)}\n"], dependencies: [{ kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required", "objectPath", "validators"] }] });
1140
1148
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: RefenceInputComponent, decorators: [{
1141
1149
  type: Component,
1142
1150
  args: [{ selector: 'base-refence-input', template: "<ng-container *ngIf=\"!isList\">\n <div class=\"form-group mb-3\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n\n <div class=\"position-relative\" *ngIf=\"search\">\n <input [formControl]=\"control\" hidden />\n <input\n [id]=\"objectPath ? objectPath + '.' + id : id\"\n [name]=\"name\"\n class=\"form-control\"\n [(ngModel)]=\"currentValue\"\n [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onFocus()\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n [autocomplete]=\"autocomplete ?? null\"\n [tabIndex]=\"tabIndex ?? null\"\n (keyup)=\"enterKey($event)\"\n />\n <div class=\"options\" *ngIf=\"objects && selectedElement\">\n <div class=\"option-item\" *ngFor=\"let object of filterOptions()\" (click)=\"set(object[valueField])\">\n {{ prepareNameField(object) }}\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!search\">\n <select\n [id]=\"objectPath ? objectPath + '.' + id : id\"\n [name]=\"name\"\n class=\"form-select\"\n [attr.aria-label]=\"placeholder\"\n [formControl]=\"control\"\n [required]=\"required\"\n [tabIndex]=\"tabIndex ?? null\"\n [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n >\n <option [ngValue]=\"null\" selected>{{ placeholder }}</option>\n <option *ngFor=\"let object of objects\" [ngValue]=\"object[valueField]\">\n {{ prepareNameField(object) }}\n </option>\n </select>\n </div>\n\n <div\n class=\"d-block invalid-feedback m-2\"\n *ngIf=\"control?.invalid && (control?.dirty || control?.touched) && !selectedElement\"\n >\n <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n <div *ngIf=\"control?.errors?.['invalidReference'] && currentValue\">\n {{ currentValue }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.\n </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</ng-container>\n\n<ng-container *ngIf=\"isList\">\n <base-tags\n [id]=\"id\"\n [label]=\"label\"\n [name]=\"name\"\n [control]=\"control\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n [custom]=\"false\"\n [options]=\"optionsForTagInput\"\n ></base-tags>\n</ng-container>\n", styles: [".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;max-height:200px;overflow-y:scroll}.options .option-item{padding:10px;cursor:pointer}.options .option-item:hover{color:var(--bs-primary)}\n"] }]
@@ -1246,10 +1254,10 @@ class ModelFormSubComponent {
1246
1254
  }
1247
1255
  }
1248
1256
  ModelFormSubComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ModelFormSubComponent, deps: [{ token: i1$1.AuthService }], target: i0.ɵɵFactoryTarget.Component });
1249
- ModelFormSubComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: { id: "id", parentKey: "parentKey", fields: "fields", form: "form", config: "config" }, outputs: { imageChanged: "imageChanged", fileChanged: "fileChanged" }, ngImport: i0, template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n <ng-container\n *ngIf=\"checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n >\n <fieldset class=\"border rounded-3 p-3 mt-3\">\n <legend class=\"float-none w-auto px-3\">\n {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n </legend>\n <base-model-form-sub\n [parentKey]=\"key\"\n [fields]=\"fields[key].fields\"\n [config]=\"config[key]?.fields || {}\"\n [form]=\"form.get(key)\"\n (imageChanged)=\"imageChanged.emit($event)\"\n (fileChanged)=\"fileChanged.emit($event)\"\n ></base-model-form-sub>\n </fieldset>\n </ng-container>\n\n <ng-container\n *ngIf=\"!checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n >\n <ng-container *ngIf=\"fields[key]?.isEnum && !config[key]?.exclude\">\n <base-select\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n [objectPath]=\"objectPath\"\n ></base-select>\n </ng-container>\n\n <ng-container *ngIf=\"!fields[key]?.isEnum && !config[key]?.exclude\">\n <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n <ng-container *ngSwitchCase=\"'String'\">\n <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n <base-tags\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-tags>\n </ng-container>\n\n <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'text'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Image'\">\n <base-upload-image\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [url]=\"config[key]?.url\"\n [path]=\"config[key]?.path || '/files/'\"\n [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n [deletePath]=\"config[key]?.deletePath || '/files/'\"\n [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n [buttonText]=\"config[key]?.buttonText || 'browse'\"\n [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [compressOptions]=\"config[key]?.compressOptions\"\n [maxSize]=\"config[key]?.maxSize\"\n [uploadDirectly]=\"false\"\n [objectPath]=\"objectPath\"\n [mode]=\"config[key]?.imageMode || 'file'\"\n (fileChanged)=\"fileChanged.emit($event)\"\n (imageDeleted)=\"imageChanged.emit(key)\"\n (imageUploaded)=\"imageChanged.emit(key)\"\n ></base-upload-image>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Upload'\">\n <base-upload-image\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n [buttonText]=\"config[key]?.buttonText || 'browse'\"\n [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [compressOptions]=\"config[key]?.compressOptions\"\n [maxSize]=\"config[key]?.maxSize\"\n [objectPath]=\"objectPath\"\n [mode]=\"'file'\"\n ></base-upload-image>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Reference'\">\n <base-refence-input\n [id]=\"key\"\n [name]=\"key\"\n [isList]=\"fields[key]?.isList\"\n [useParamAsArg]=\"config[key]?.useParamAsArg ?? false\"\n [param]=\"id\"\n [search]=\"config[key]?.searchable ?? true\"\n [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [method]=\"config[key]?.method || 'find'\"\n [fields]=\"config[key]?.requestFields || ['id', 'name']\"\n [valueField]=\"config[key]?.valueField || 'id'\"\n [nameField]=\"config[key]?.nameField || 'name'\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-refence-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Boolean'\">\n <base-checkbox\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-checkbox>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'LongText'\">\n <base-textarea\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-textarea>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Float'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'number'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Password'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'password'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Color'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'color'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'URL'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'url'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Email'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'email'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'DateTime'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'datetime-local'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required", "eyeButton", "objectPath"], outputs: ["enter"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["id", "name", "label", "placeholder", "objectPath", "control", "tabIndex", "required", "multiple", "search", "options"] }, { kind: "component", type: CheckboxComponent, selector: "base-checkbox", inputs: ["id", "name", "label", "value", "control", "required", "objectPath"] }, { kind: "component", type: TextareaComponent, selector: "base-textarea", inputs: ["id", "name", "label", "placeholder", "control", "rows", "required", "tabIndex", "objectPath"] }, { kind: "component", type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required", "objectPath"] }, { kind: "component", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["id", "parentKey", "fields", "form", "config"], outputs: ["imageChanged", "fileChanged"] }, { kind: "component", type: UploadImageComponent, selector: "base-upload-image", inputs: ["id", "name", "label", "supportText", "required", "defaultDragText", "defaultReleaseText", "preButtonText", "buttonText", "validExtensions", "control", "url", "uploadPath", "deletePath", "path", "compressOptions", "maxSize", "uploadDirectly", "objectPath", "mode"], outputs: ["imageUploaded", "imageDeleted", "fileChanged"] }, { kind: "component", type: RefenceInputComponent, selector: "base-refence-input", inputs: ["id", "name", "label", "isList", "search", "useParamAsArg", "param", "placeholder", "autocomplete", "tabIndex", "control", "required", "method", "fields", "valueField", "objectPath", "nameField"] }] });
1257
+ ModelFormSubComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: { id: "id", parentKey: "parentKey", fields: "fields", form: "form", config: "config" }, outputs: { imageChanged: "imageChanged", fileChanged: "fileChanged" }, ngImport: i0, template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n <ng-container\n *ngIf=\"checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n >\n <fieldset class=\"border rounded-3 p-3 mt-3\">\n <legend class=\"float-none w-auto px-3\">\n {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n </legend>\n <base-model-form-sub\n [parentKey]=\"key\"\n [fields]=\"fields[key].fields\"\n [config]=\"config[key]?.fields || {}\"\n [form]=\"form.get(key)\"\n (imageChanged)=\"imageChanged.emit($event)\"\n (fileChanged)=\"fileChanged.emit($event)\"\n ></base-model-form-sub>\n </fieldset>\n </ng-container>\n\n <ng-container\n *ngIf=\"!checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n >\n <ng-container *ngIf=\"fields[key]?.isEnum && !config[key]?.exclude\">\n <base-select\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n [objectPath]=\"objectPath\"\n ></base-select>\n </ng-container>\n\n <ng-container *ngIf=\"!fields[key]?.isEnum && !config[key]?.exclude\">\n <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n <ng-container *ngSwitchCase=\"'String'\">\n <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n <base-tags\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [validators]=\"config[key]?.validators\"\n [objectPath]=\"objectPath\"\n ></base-tags>\n </ng-container>\n\n <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'text'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Image'\">\n <base-upload-image\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [url]=\"config[key]?.url\"\n [path]=\"config[key]?.path || '/files/'\"\n [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n [deletePath]=\"config[key]?.deletePath || '/files/'\"\n [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n [buttonText]=\"config[key]?.buttonText || 'browse'\"\n [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [compressOptions]=\"config[key]?.compressOptions\"\n [maxSize]=\"config[key]?.maxSize\"\n [uploadDirectly]=\"false\"\n [objectPath]=\"objectPath\"\n [mode]=\"config[key]?.imageMode || 'file'\"\n (fileChanged)=\"fileChanged.emit($event)\"\n (imageDeleted)=\"imageChanged.emit(key)\"\n (imageUploaded)=\"imageChanged.emit(key)\"\n ></base-upload-image>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Upload'\">\n <base-upload-image\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n [buttonText]=\"config[key]?.buttonText || 'browse'\"\n [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [compressOptions]=\"config[key]?.compressOptions\"\n [maxSize]=\"config[key]?.maxSize\"\n [objectPath]=\"objectPath\"\n [mode]=\"'file'\"\n ></base-upload-image>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Reference'\">\n <base-refence-input\n [id]=\"key\"\n [name]=\"key\"\n [isList]=\"fields[key]?.isList\"\n [useParamAsArg]=\"config[key]?.useParamAsArg ?? false\"\n [param]=\"id\"\n [search]=\"config[key]?.searchable ?? true\"\n [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [method]=\"config[key]?.method || 'find'\"\n [fields]=\"config[key]?.requestFields || ['id', 'name']\"\n [valueField]=\"config[key]?.valueField || 'id'\"\n [nameField]=\"config[key]?.nameField || 'name'\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-refence-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Boolean'\">\n <base-checkbox\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-checkbox>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'LongText'\">\n <base-textarea\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-textarea>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Float'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'number'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Password'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'password'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Color'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'color'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'URL'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'url'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Email'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'email'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'DateTime'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'datetime-local'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required", "eyeButton", "objectPath"], outputs: ["enter"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["id", "name", "label", "placeholder", "objectPath", "control", "tabIndex", "required", "multiple", "search", "options"] }, { kind: "component", type: CheckboxComponent, selector: "base-checkbox", inputs: ["id", "name", "label", "value", "control", "required", "objectPath"] }, { kind: "component", type: TextareaComponent, selector: "base-textarea", inputs: ["id", "name", "label", "placeholder", "control", "rows", "required", "tabIndex", "objectPath"] }, { kind: "component", type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required", "objectPath", "validators"] }, { kind: "component", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["id", "parentKey", "fields", "form", "config"], outputs: ["imageChanged", "fileChanged"] }, { kind: "component", type: UploadImageComponent, selector: "base-upload-image", inputs: ["id", "name", "label", "supportText", "required", "defaultDragText", "defaultReleaseText", "preButtonText", "buttonText", "validExtensions", "control", "url", "uploadPath", "deletePath", "path", "compressOptions", "maxSize", "uploadDirectly", "objectPath", "mode"], outputs: ["imageUploaded", "imageDeleted", "fileChanged"] }, { kind: "component", type: RefenceInputComponent, selector: "base-refence-input", inputs: ["id", "name", "label", "isList", "search", "useParamAsArg", "param", "placeholder", "autocomplete", "tabIndex", "control", "required", "method", "fields", "valueField", "objectPath", "nameField"] }] });
1250
1258
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ModelFormSubComponent, decorators: [{
1251
1259
  type: Component,
1252
- args: [{ selector: 'base-model-form-sub', template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n <ng-container\n *ngIf=\"checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n >\n <fieldset class=\"border rounded-3 p-3 mt-3\">\n <legend class=\"float-none w-auto px-3\">\n {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n </legend>\n <base-model-form-sub\n [parentKey]=\"key\"\n [fields]=\"fields[key].fields\"\n [config]=\"config[key]?.fields || {}\"\n [form]=\"form.get(key)\"\n (imageChanged)=\"imageChanged.emit($event)\"\n (fileChanged)=\"fileChanged.emit($event)\"\n ></base-model-form-sub>\n </fieldset>\n </ng-container>\n\n <ng-container\n *ngIf=\"!checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n >\n <ng-container *ngIf=\"fields[key]?.isEnum && !config[key]?.exclude\">\n <base-select\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n [objectPath]=\"objectPath\"\n ></base-select>\n </ng-container>\n\n <ng-container *ngIf=\"!fields[key]?.isEnum && !config[key]?.exclude\">\n <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n <ng-container *ngSwitchCase=\"'String'\">\n <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n <base-tags\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-tags>\n </ng-container>\n\n <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'text'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Image'\">\n <base-upload-image\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [url]=\"config[key]?.url\"\n [path]=\"config[key]?.path || '/files/'\"\n [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n [deletePath]=\"config[key]?.deletePath || '/files/'\"\n [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n [buttonText]=\"config[key]?.buttonText || 'browse'\"\n [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [compressOptions]=\"config[key]?.compressOptions\"\n [maxSize]=\"config[key]?.maxSize\"\n [uploadDirectly]=\"false\"\n [objectPath]=\"objectPath\"\n [mode]=\"config[key]?.imageMode || 'file'\"\n (fileChanged)=\"fileChanged.emit($event)\"\n (imageDeleted)=\"imageChanged.emit(key)\"\n (imageUploaded)=\"imageChanged.emit(key)\"\n ></base-upload-image>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Upload'\">\n <base-upload-image\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n [buttonText]=\"config[key]?.buttonText || 'browse'\"\n [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [compressOptions]=\"config[key]?.compressOptions\"\n [maxSize]=\"config[key]?.maxSize\"\n [objectPath]=\"objectPath\"\n [mode]=\"'file'\"\n ></base-upload-image>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Reference'\">\n <base-refence-input\n [id]=\"key\"\n [name]=\"key\"\n [isList]=\"fields[key]?.isList\"\n [useParamAsArg]=\"config[key]?.useParamAsArg ?? false\"\n [param]=\"id\"\n [search]=\"config[key]?.searchable ?? true\"\n [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [method]=\"config[key]?.method || 'find'\"\n [fields]=\"config[key]?.requestFields || ['id', 'name']\"\n [valueField]=\"config[key]?.valueField || 'id'\"\n [nameField]=\"config[key]?.nameField || 'name'\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-refence-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Boolean'\">\n <base-checkbox\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-checkbox>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'LongText'\">\n <base-textarea\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-textarea>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Float'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'number'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Password'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'password'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Color'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'color'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'URL'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'url'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Email'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'email'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'DateTime'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'datetime-local'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n</div>\n" }]
1260
+ args: [{ selector: 'base-model-form-sub', template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n <ng-container\n *ngIf=\"checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n >\n <fieldset class=\"border rounded-3 p-3 mt-3\">\n <legend class=\"float-none w-auto px-3\">\n {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n </legend>\n <base-model-form-sub\n [parentKey]=\"key\"\n [fields]=\"fields[key].fields\"\n [config]=\"config[key]?.fields || {}\"\n [form]=\"form.get(key)\"\n (imageChanged)=\"imageChanged.emit($event)\"\n (fileChanged)=\"fileChanged.emit($event)\"\n ></base-model-form-sub>\n </fieldset>\n </ng-container>\n\n <ng-container\n *ngIf=\"!checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n >\n <ng-container *ngIf=\"fields[key]?.isEnum && !config[key]?.exclude\">\n <base-select\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n [objectPath]=\"objectPath\"\n ></base-select>\n </ng-container>\n\n <ng-container *ngIf=\"!fields[key]?.isEnum && !config[key]?.exclude\">\n <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n <ng-container *ngSwitchCase=\"'String'\">\n <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n <base-tags\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [validators]=\"config[key]?.validators\"\n [objectPath]=\"objectPath\"\n ></base-tags>\n </ng-container>\n\n <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'text'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Image'\">\n <base-upload-image\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [url]=\"config[key]?.url\"\n [path]=\"config[key]?.path || '/files/'\"\n [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n [deletePath]=\"config[key]?.deletePath || '/files/'\"\n [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n [buttonText]=\"config[key]?.buttonText || 'browse'\"\n [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [compressOptions]=\"config[key]?.compressOptions\"\n [maxSize]=\"config[key]?.maxSize\"\n [uploadDirectly]=\"false\"\n [objectPath]=\"objectPath\"\n [mode]=\"config[key]?.imageMode || 'file'\"\n (fileChanged)=\"fileChanged.emit($event)\"\n (imageDeleted)=\"imageChanged.emit(key)\"\n (imageUploaded)=\"imageChanged.emit(key)\"\n ></base-upload-image>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Upload'\">\n <base-upload-image\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n [buttonText]=\"config[key]?.buttonText || 'browse'\"\n [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [compressOptions]=\"config[key]?.compressOptions\"\n [maxSize]=\"config[key]?.maxSize\"\n [objectPath]=\"objectPath\"\n [mode]=\"'file'\"\n ></base-upload-image>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Reference'\">\n <base-refence-input\n [id]=\"key\"\n [name]=\"key\"\n [isList]=\"fields[key]?.isList\"\n [useParamAsArg]=\"config[key]?.useParamAsArg ?? false\"\n [param]=\"id\"\n [search]=\"config[key]?.searchable ?? true\"\n [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [method]=\"config[key]?.method || 'find'\"\n [fields]=\"config[key]?.requestFields || ['id', 'name']\"\n [valueField]=\"config[key]?.valueField || 'id'\"\n [nameField]=\"config[key]?.nameField || 'name'\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-refence-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Boolean'\">\n <base-checkbox\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-checkbox>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'LongText'\">\n <base-textarea\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-textarea>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Float'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'number'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Password'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'password'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Color'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'color'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'URL'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'url'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Email'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'email'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'DateTime'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'datetime-local'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n [objectPath]=\"objectPath\"\n ></base-input>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n</div>\n" }]
1253
1261
  }], ctorParameters: function () { return [{ type: i1$1.AuthService }]; }, propDecorators: { id: [{
1254
1262
  type: Input
1255
1263
  }], parentKey: [{
@@ -1283,6 +1291,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
1283
1291
  type: Input
1284
1292
  }] } });
1285
1293
 
1294
+ /**
1295
+ * ModelFormComponent
1296
+ *
1297
+ * Hint for handling extensions of this component in project:
1298
+ * If you want to use complete custom services and methods, extend ModelFormBaseComponent instead of ModelFormComponent
1299
+ */
1286
1300
  class ModelFormComponent {
1287
1301
  constructor(graphQLMetaService, graphQLService, formsService, authService, router, route, cmsService, toastService, fileService) {
1288
1302
  this.graphQLMetaService = graphQLMetaService;
@@ -1513,6 +1527,9 @@ class ModelFormComponent {
1513
1527
  if (typeof config?.max === 'number') {
1514
1528
  validators.push(Validators.max(config.max));
1515
1529
  }
1530
+ if (Array.isArray(config?.validators)) {
1531
+ validators.push(...config?.validators);
1532
+ }
1516
1533
  }
1517
1534
  return validators;
1518
1535
  }
@@ -1860,7 +1877,7 @@ class ModelTableComponent {
1860
1877
  this.import = true;
1861
1878
  this.export = true;
1862
1879
  this.duplicate = true;
1863
- this.config = {};
1880
+ this.modelConfig = {};
1864
1881
  this.showFavButton = true;
1865
1882
  this.idSelected = new EventEmitter();
1866
1883
  this.createModeChanged = new EventEmitter();
@@ -1876,12 +1893,16 @@ class ModelTableComponent {
1876
1893
  };
1877
1894
  this.objects = [];
1878
1895
  this.availableFields = [];
1879
- this.selectedId = '';
1896
+ this.id = '';
1880
1897
  this.queryName = null;
1881
1898
  this.possibleFields = {};
1899
+ this.componentRef = undefined;
1882
1900
  this.selectedPageIndex = 0;
1883
1901
  this.pages = [];
1884
1902
  }
1903
+ ngAfterViewInit() {
1904
+ this.integrateCustomFormComponent();
1905
+ }
1885
1906
  ngOnInit() {
1886
1907
  this.graphQLMetaService.getMeta().subscribe((meta) => {
1887
1908
  this.meta = meta;
@@ -1889,7 +1910,7 @@ class ModelTableComponent {
1889
1910
  this.init();
1890
1911
  }
1891
1912
  if (this.objectId) {
1892
- this.selectedId = this.objectId;
1913
+ this.id = this.objectId;
1893
1914
  }
1894
1915
  });
1895
1916
  }
@@ -1898,13 +1919,14 @@ class ModelTableComponent {
1898
1919
  this.init();
1899
1920
  }
1900
1921
  if (changes['objectId'] && this.meta) {
1901
- if (this.selectedId !== this.objectId) {
1922
+ if (this.id !== this.objectId) {
1902
1923
  if (this.logging) {
1903
- console.log('ModelTableComponent::ngOnChanges->selectedId', this.selectedId);
1924
+ console.log('ModelTableComponent::ngOnChanges->selectedId', this.id);
1904
1925
  }
1905
- this.selectedId = this.objectId;
1926
+ this.id = this.objectId;
1906
1927
  }
1907
1928
  }
1929
+ this.setChangesInComponentRef();
1908
1930
  }
1909
1931
  /**
1910
1932
  * We're using the `meta` service to get the fields that are available for the `find` query for the model we're working
@@ -1916,14 +1938,14 @@ class ModelTableComponent {
1916
1938
  this.totalCount = null;
1917
1939
  this.camelModelName = this.kebabToCamelCase(this.modelName);
1918
1940
  // Set query name
1919
- if (!this.config?.queryName) {
1941
+ if (!this.modelConfig?.queryName) {
1920
1942
  this.queryName = 'findAndCount' + this.capitalizeFirstLetter(this.camelModelName) + 's';
1921
1943
  }
1922
1944
  else {
1923
- this.queryName = this.config?.queryName;
1945
+ this.queryName = this.modelConfig?.queryName;
1924
1946
  }
1925
- if (this.config?.tableFields) {
1926
- this.tableFields = this.config.tableFields;
1947
+ if (this.modelConfig?.tableFields) {
1948
+ this.tableFields = this.modelConfig.tableFields;
1927
1949
  }
1928
1950
  if (this.logging) {
1929
1951
  console.log('ModelTableComponent::init->modelName', this.modelName);
@@ -1953,6 +1975,36 @@ class ModelTableComponent {
1953
1975
  this.selectedPageIndex = 0;
1954
1976
  this.objects = await this.loadObjects(this.availableFields, 0, 25);
1955
1977
  }
1978
+ integrateCustomFormComponent() {
1979
+ if (!(this.id || this.createMode)) {
1980
+ return;
1981
+ }
1982
+ const customComponent = this.modelConfig?.customFormComponent;
1983
+ if (customComponent) {
1984
+ this.componentRef = this.customFormTemplate?.createComponent(customComponent);
1985
+ this.setChangesInComponentRef();
1986
+ this.componentRef.instance.finished.subscribe(() => {
1987
+ this.selectId('');
1988
+ });
1989
+ }
1990
+ }
1991
+ setChangesInComponentRef() {
1992
+ if (this.componentRef) {
1993
+ const data = {
1994
+ config: this.config,
1995
+ delete: this.delete,
1996
+ duplicate: this.duplicate,
1997
+ id: this.id,
1998
+ label: this.modelConfig?.label,
1999
+ logging: this.logging,
2000
+ modelName: this.camelModelName,
2001
+ showFavButton: this.showFavButton,
2002
+ };
2003
+ for (const [key, value] of Object.entries(data)) {
2004
+ this.componentRef.setInput(key, value);
2005
+ }
2006
+ }
2007
+ }
1956
2008
  /**
1957
2009
  * When the user clicks the "Create New" button, the createModeChanged event is emitted, which is then handled by the
1958
2010
  * parent component
@@ -2027,8 +2079,8 @@ class ModelTableComponent {
2027
2079
  this.createModeChanged.emit(false);
2028
2080
  }
2029
2081
  if (this.update) {
2030
- this.selectedId = object['id'];
2031
- this.idSelected.emit(this.selectedId);
2082
+ this.id = object['id'];
2083
+ this.idSelected.emit(this.id);
2032
2084
  }
2033
2085
  }
2034
2086
  /**
@@ -2151,10 +2203,10 @@ class ModelTableComponent {
2151
2203
  }
2152
2204
  }
2153
2205
  ModelTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ModelTableComponent, deps: [{ token: i1$1.GraphQLMetaService }, { token: i1$1.GraphQLService }, { token: i1$1.CmsService }, { token: i1$1.ToastService }, { token: i1$1.ScrollService }], target: i0.ɵɵFactoryTarget.Component });
2154
- ModelTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ModelTableComponent, selector: "base-model-table", inputs: { modelName: "modelName", objectId: "objectId", createMode: "createMode", logging: "logging", create: "create", update: "update", delete: "delete", import: "import", export: "export", duplicate: "duplicate", config: "config", fieldConfig: "fieldConfig", showFavButton: "showFavButton" }, 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 align-items-center mb-2 mb-lg-4\">\n <h2 id=\"model-table-top\" class=\"mb-0\" *ngIf=\"modelName\">\n {{\n config?.plural ? config?.plural : config?.label ? config?.label : capitalizeFirstLetter(camelModelName) + 's'\n }}\n </h2>\n <div class=\"d-flex align-items-center d-none d-lg-block\">\n <input #importFile type=\"file\" accept=\".json\" class=\"d-none\" (change)=\"processImport($event)\" />\n <div class=\"btn-group me-4\" *ngIf=\"import || export\">\n <i\n class=\"bi bi-three-dots-vertical\"\n id=\"settingsDropdown\"\n type=\"button\"\n data-bs-toggle=\"dropdown\"\n data-bs-auto-close=\"true\"\n aria-expanded=\"false\"\n ></i>\n <ul class=\"dropdown-menu dropdown-menu-end\" aria-labelledby=\"settingsDropdown\">\n <li><a class=\"dropdown-item cursor-pointer\" *ngIf=\"export\" (click)=\"processExport()\">Export</a></li>\n <li><a class=\"dropdown-item cursor-pointer\" *ngIf=\"import\" (click)=\"importFile.click()\"> Import </a></li>\n </ul>\n </div>\n <button class=\"btn btn-primary\" (click)=\"createNewObject()\" *ngIf=\"create\">Erstellen</button>\n </div>\n </div>\n\n <div\n class=\"table-responsive\"\n [ltContextMenu]=\"contextMenu\"\n [selectors]=\"'.object-col'\"\n #contextMenuData=\"contextMenuData\"\n >\n <table class=\"table table-hover bg-white d-none d-lg-table\">\n <thead>\n <tr>\n <th\n scope=\"col\"\n *ngFor=\"let field of availableFields\"\n [baseSort]=\"objects\"\n data-order=\"desc\"\n [attr.data-name]=\"field\"\n >\n {{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}\n </th>\n </tr>\n </thead>\n <tbody>\n <tr class=\"object-col\" *ngFor=\"let object of objects\" [id]=\"object[uniqueField]\">\n <td class=\"cursor-pointer\" *ngFor=\"let field of availableFields\" (click)=\"selectId(object)\">\n <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n {{ object[field] | date: tableFields[field]?.dateFormat }} Uhr\n </ng-container>\n\n <ng-container *ngIf=\"tableFields[field]?.enumValues\">\n {{ tableFields[field]?.enumValues[object[field]]?.text }}\n </ng-container>\n\n <ng-container *ngIf=\"!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues\">\n {{ object[field] | baseEllipses: 60 }}\n </ng-container>\n </td>\n </tr>\n </tbody>\n </table>\n\n <div class=\"d-flex d-lg-none flex-column flex-grow-1\">\n <div class=\"table-card\" *ngFor=\"let object of objects\" [id]=\"object[uniqueField]\">\n <div class=\"table-card-entry\" *ngFor=\"let field of availableFields; let i = index\" (click)=\"selectId(object)\">\n <b *ngIf=\"i > 0\"\n >{{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}:</b\n >\n <p [ngClass]=\"{ 'table-card-entry-first': i === 0 }\">\n <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n {{ object[field] | date: tableFields[field]?.dateFormat }} Uhr\n </ng-container>\n\n <ng-container *ngIf=\"tableFields[field]?.enumValues\">\n {{ tableFields[field]?.enumValues[object[field]]?.text }}\n </ng-container>\n\n <ng-container *ngIf=\"!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues\">\n {{ object[field] | baseEllipses: 60 }}\n </ng-container>\n </p>\n </div>\n </div>\n </div>\n\n <nav *ngIf=\"totalCount >= 0\">\n <ul class=\"pagination justify-content-center\">\n <li class=\"page-item\">\n <a\n class=\"page-link\"\n (click)=\"selectPage(selectedPageIndex - 1)\"\n aria-label=\"Previous\"\n [ngClass]=\"{ disabled: selectedPageIndex - 1 > 0 }\"\n >\n <span aria-hidden=\"true\">&laquo;</span>\n </a>\n </li>\n <li class=\"page-item\" *ngFor=\"let page of pages; let i = index\">\n <a class=\"page-link\" [ngClass]=\"{ active: selectedPageIndex === i }\" (click)=\"selectPage(i)\">{{ i + 1 }}</a>\n </li>\n <li class=\"page-item\">\n <a\n class=\"page-link\"\n (click)=\"selectPage(selectedPageIndex + 1)\"\n aria-label=\"Next\"\n [ngClass]=\"{ disabled: pages[selectedPageIndex + 1] }\"\n >\n <span aria-hidden=\"true\">&raquo;</span>\n </a>\n </li>\n </ul>\n </nav>\n\n <div class=\"context-menu\" #contextMenu>\n <div class=\"context-menu-item\" (click)=\"selectId({ id: contextMenuData.clickedElement?.id })\">Bearbeiten</div>\n <div class=\"context-menu-item\" *ngIf=\"duplicate\" (click)=\"duplicateObject(contextMenuData.clickedElement?.id)\">\n Duplizieren\n </div>\n <div class=\"context-menu-item\" *ngIf=\"delete\" (click)=\"deleteObject(contextMenuData.clickedElement?.id)\">\n L\u00F6schen\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-100\" *ngIf=\"selectedId || createMode\">\n <button class=\"d-none d-lg-block btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n <base-model-form\n [modelName]=\"camelModelName\"\n [label]=\"config?.label\"\n [config]=\"fieldConfig\"\n [logging]=\"logging\"\n [id]=\"selectedId\"\n (finished)=\"selectId('')\"\n [delete]=\"delete\"\n [duplicate]=\"duplicate\"\n [showFavButton]=\"showFavButton\"\n ></base-model-form>\n</div>\n\n<div class=\"responsive-action-button d-block d-lg-none\">\n <base-fab-button\n [fabIcon]=\"'bi-plus'\"\n (click)=\"createNewObject()\"\n *ngIf=\"!(selectedId || createMode) && showFavButton\"\n ></base-fab-button>\n</div>\n", styles: [".cursor-pointer{cursor:pointer}.asc:after,.desc:after{border-style:solid;border-width:.2em .2em 0 0;content:\"\";display:inline-block;height:.45em;left:5px;position:relative;transform:rotate(-45deg);vertical-align:middle;width:.45em}.asc:after{transform:rotate(135deg)}td{vertical-align:middle}.bi,th{cursor:pointer;-webkit-user-select:none;user-select:none}.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}.context-menu{opacity:.01%;pointer-events:none;background-color:#fff;border:1px solid #ccc;box-shadow:1px 1px 10px #0000001a;padding:10px 0;position:fixed;top:0;left:0;width:200px}.context-menu-item{cursor:pointer;padding:8px 15px}.context-menu-item:hover{color:var(--bs-primary)}.table-card{background:var(--bs-white);padding:10px;margin-bottom:10px}.table-card-entry{margin-top:4px}.table-card-entry-first{font-size:18px;font-weight:800;color:var(--bs-primary)}.responsive-action-button{position:fixed;bottom:15px;right:15px}.bi-three-dots-vertical{font-size:18px;line-height:18px}.page-item{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: SortDirective, selector: "[baseSort]", inputs: ["baseSort"] }, { kind: "directive", type: ContextMenuDirective, selector: "[ltContextMenu]", inputs: ["contextMenuData", "ltContextMenu", "xGap", "yGap", "overflowSpace", "selectors"], outputs: ["clickedElement"], exportAs: ["contextMenuData"] }, { kind: "component", type: ModelFormComponent, selector: "base-model-form", inputs: ["modelName", "label", "id", "delete", "onlyUpdateMode", "duplicate", "logging", "config", "showFavButton"], outputs: ["finished"] }, { kind: "component", type: FabButtonComponent, selector: "base-fab-button", inputs: ["fabIcon", "buttons"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: EllipsesPipe, name: "baseEllipses" }] });
2206
+ ModelTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ModelTableComponent, selector: "base-model-table", inputs: { modelName: "modelName", objectId: "objectId", createMode: "createMode", logging: "logging", create: "create", update: "update", delete: "delete", import: "import", export: "export", duplicate: "duplicate", modelConfig: "modelConfig", config: "config", showFavButton: "showFavButton" }, outputs: { idSelected: "idSelected", createModeChanged: "createModeChanged" }, viewQueries: [{ propertyName: "customFormTemplate", first: true, predicate: ["customFormTemplate"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!id && !createMode\">\n <div class=\"w-100 d-flex flex-row justify-content-between align-items-center mb-2 mb-lg-4\">\n <h2 id=\"model-table-top\" class=\"mb-0\" *ngIf=\"modelName\">\n {{\n modelConfig?.plural\n ? modelConfig?.plural\n : modelConfig?.label\n ? modelConfig?.label\n : capitalizeFirstLetter(camelModelName) + 's'\n }}\n </h2>\n <div class=\"d-flex align-items-center d-none d-lg-block\">\n <input #importFile type=\"file\" accept=\".json\" class=\"d-none\" (change)=\"processImport($event)\" />\n <div class=\"btn-group me-4\" *ngIf=\"import || export\">\n <i\n class=\"bi bi-three-dots-vertical\"\n id=\"settingsDropdown\"\n type=\"button\"\n data-bs-toggle=\"dropdown\"\n data-bs-auto-close=\"true\"\n aria-expanded=\"false\"\n ></i>\n <ul class=\"dropdown-menu dropdown-menu-end\" aria-labelledby=\"settingsDropdown\">\n <li><a class=\"dropdown-item cursor-pointer\" *ngIf=\"export\" (click)=\"processExport()\">Export</a></li>\n <li><a class=\"dropdown-item cursor-pointer\" *ngIf=\"import\" (click)=\"importFile.click()\"> Import </a></li>\n </ul>\n </div>\n <button class=\"btn btn-primary\" (click)=\"createNewObject()\" *ngIf=\"create\">Erstellen</button>\n </div>\n </div>\n\n <div\n class=\"table-responsive\"\n [ltContextMenu]=\"contextMenu\"\n [selectors]=\"'.object-col'\"\n #contextMenuData=\"contextMenuData\"\n >\n <table class=\"table table-hover bg-white d-none d-lg-table\">\n <thead>\n <tr>\n <th\n scope=\"col\"\n *ngFor=\"let field of availableFields\"\n [baseSort]=\"objects\"\n data-order=\"desc\"\n [attr.data-name]=\"field\"\n >\n {{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}\n </th>\n </tr>\n </thead>\n <tbody>\n <tr class=\"object-col\" *ngFor=\"let object of objects\" [id]=\"object[uniqueField]\">\n <td class=\"cursor-pointer\" *ngFor=\"let field of availableFields\" (click)=\"selectId(object)\">\n <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n {{ object[field] | date: tableFields[field]?.dateFormat }} Uhr\n </ng-container>\n\n <ng-container *ngIf=\"tableFields[field]?.enumValues\">\n {{ tableFields[field]?.enumValues[object[field]]?.text }}\n </ng-container>\n\n <ng-container *ngIf=\"!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues\">\n {{ object[field] | baseEllipses: 60 }}\n </ng-container>\n </td>\n </tr>\n </tbody>\n </table>\n\n <div class=\"d-flex d-lg-none flex-column flex-grow-1\">\n <div class=\"table-card\" *ngFor=\"let object of objects\" [id]=\"object[uniqueField]\">\n <div class=\"table-card-entry\" *ngFor=\"let field of availableFields; let i = index\" (click)=\"selectId(object)\">\n <b *ngIf=\"i > 0\"\n >{{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}:</b\n >\n <p [ngClass]=\"{ 'table-card-entry-first': i === 0 }\">\n <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n {{ object[field] | date: tableFields[field]?.dateFormat }} Uhr\n </ng-container>\n\n <ng-container *ngIf=\"tableFields[field]?.enumValues\">\n {{ tableFields[field]?.enumValues[object[field]]?.text }}\n </ng-container>\n\n <ng-container *ngIf=\"!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues\">\n {{ object[field] | baseEllipses: 60 }}\n </ng-container>\n </p>\n </div>\n </div>\n </div>\n\n <nav *ngIf=\"totalCount >= 0\">\n <ul class=\"pagination justify-content-center\">\n <li class=\"page-item\">\n <a\n class=\"page-link\"\n (click)=\"selectPage(selectedPageIndex - 1)\"\n aria-label=\"Previous\"\n [ngClass]=\"{ disabled: selectedPageIndex - 1 > 0 }\"\n >\n <span aria-hidden=\"true\">&laquo;</span>\n </a>\n </li>\n <li class=\"page-item\" *ngFor=\"let page of pages; let i = index\">\n <a class=\"page-link\" [ngClass]=\"{ active: selectedPageIndex === i }\" (click)=\"selectPage(i)\">{{ i + 1 }}</a>\n </li>\n <li class=\"page-item\">\n <a\n class=\"page-link\"\n (click)=\"selectPage(selectedPageIndex + 1)\"\n aria-label=\"Next\"\n [ngClass]=\"{ disabled: pages[selectedPageIndex + 1] }\"\n >\n <span aria-hidden=\"true\">&raquo;</span>\n </a>\n </li>\n </ul>\n </nav>\n\n <div class=\"context-menu\" #contextMenu>\n <div class=\"context-menu-item\" (click)=\"selectId({ id: contextMenuData.clickedElement?.id })\">Bearbeiten</div>\n <div class=\"context-menu-item\" *ngIf=\"duplicate\" (click)=\"duplicateObject(contextMenuData.clickedElement?.id)\">\n Duplizieren\n </div>\n <div class=\"context-menu-item\" *ngIf=\"delete\" (click)=\"deleteObject(contextMenuData.clickedElement?.id)\">\n L\u00F6schen\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-100\" *ngIf=\"id || createMode\">\n <button class=\"d-none d-lg-block btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n <base-model-form\n *ngIf=\"!modelConfig?.customFormComponent\"\n [modelName]=\"camelModelName\"\n [label]=\"modelConfig?.label\"\n [config]=\"config\"\n [logging]=\"logging\"\n [id]=\"id\"\n (finished)=\"selectId('')\"\n [delete]=\"delete\"\n [duplicate]=\"duplicate\"\n [showFavButton]=\"showFavButton\"\n ></base-model-form>\n <ng-template *ngIf=\"modelConfig?.customFormComponent\" #customFormTemplate></ng-template>\n</div>\n\n<div class=\"responsive-action-button d-block d-lg-none\">\n <base-fab-button\n [fabIcon]=\"'bi-plus'\"\n (click)=\"createNewObject()\"\n *ngIf=\"!(id || createMode) && showFavButton\"\n ></base-fab-button>\n</div>\n", styles: [".cursor-pointer{cursor:pointer}.asc:after,.desc:after{border-style:solid;border-width:.2em .2em 0 0;content:\"\";display:inline-block;height:.45em;left:5px;position:relative;transform:rotate(-45deg);vertical-align:middle;width:.45em}.asc:after{transform:rotate(135deg)}td{vertical-align:middle}.bi,th{cursor:pointer;-webkit-user-select:none;user-select:none}.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}.context-menu{opacity:.01%;pointer-events:none;background-color:#fff;border:1px solid #ccc;box-shadow:1px 1px 10px #0000001a;padding:10px 0;position:fixed;top:0;left:0;width:200px}.context-menu-item{cursor:pointer;padding:8px 15px}.context-menu-item:hover{color:var(--bs-primary)}.table-card{background:var(--bs-white);padding:10px;margin-bottom:10px}.table-card-entry{margin-top:4px}.table-card-entry-first{font-size:18px;font-weight:800;color:var(--bs-primary)}.responsive-action-button{position:fixed;bottom:15px;right:15px}.bi-three-dots-vertical{font-size:18px;line-height:18px}.page-item{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: SortDirective, selector: "[baseSort]", inputs: ["baseSort"] }, { kind: "directive", type: ContextMenuDirective, selector: "[ltContextMenu]", inputs: ["contextMenuData", "ltContextMenu", "xGap", "yGap", "overflowSpace", "selectors"], outputs: ["clickedElement"], exportAs: ["contextMenuData"] }, { kind: "component", type: ModelFormComponent, selector: "base-model-form", inputs: ["modelName", "label", "id", "delete", "onlyUpdateMode", "duplicate", "logging", "config", "showFavButton"], outputs: ["finished"] }, { kind: "component", type: FabButtonComponent, selector: "base-fab-button", inputs: ["fabIcon", "buttons"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: EllipsesPipe, name: "baseEllipses" }] });
2155
2207
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ModelTableComponent, decorators: [{
2156
2208
  type: Component,
2157
- args: [{ selector: 'base-model-table', template: "<div *ngIf=\"!selectedId && !createMode\">\n <div class=\"w-100 d-flex flex-row justify-content-between align-items-center mb-2 mb-lg-4\">\n <h2 id=\"model-table-top\" class=\"mb-0\" *ngIf=\"modelName\">\n {{\n config?.plural ? config?.plural : config?.label ? config?.label : capitalizeFirstLetter(camelModelName) + 's'\n }}\n </h2>\n <div class=\"d-flex align-items-center d-none d-lg-block\">\n <input #importFile type=\"file\" accept=\".json\" class=\"d-none\" (change)=\"processImport($event)\" />\n <div class=\"btn-group me-4\" *ngIf=\"import || export\">\n <i\n class=\"bi bi-three-dots-vertical\"\n id=\"settingsDropdown\"\n type=\"button\"\n data-bs-toggle=\"dropdown\"\n data-bs-auto-close=\"true\"\n aria-expanded=\"false\"\n ></i>\n <ul class=\"dropdown-menu dropdown-menu-end\" aria-labelledby=\"settingsDropdown\">\n <li><a class=\"dropdown-item cursor-pointer\" *ngIf=\"export\" (click)=\"processExport()\">Export</a></li>\n <li><a class=\"dropdown-item cursor-pointer\" *ngIf=\"import\" (click)=\"importFile.click()\"> Import </a></li>\n </ul>\n </div>\n <button class=\"btn btn-primary\" (click)=\"createNewObject()\" *ngIf=\"create\">Erstellen</button>\n </div>\n </div>\n\n <div\n class=\"table-responsive\"\n [ltContextMenu]=\"contextMenu\"\n [selectors]=\"'.object-col'\"\n #contextMenuData=\"contextMenuData\"\n >\n <table class=\"table table-hover bg-white d-none d-lg-table\">\n <thead>\n <tr>\n <th\n scope=\"col\"\n *ngFor=\"let field of availableFields\"\n [baseSort]=\"objects\"\n data-order=\"desc\"\n [attr.data-name]=\"field\"\n >\n {{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}\n </th>\n </tr>\n </thead>\n <tbody>\n <tr class=\"object-col\" *ngFor=\"let object of objects\" [id]=\"object[uniqueField]\">\n <td class=\"cursor-pointer\" *ngFor=\"let field of availableFields\" (click)=\"selectId(object)\">\n <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n {{ object[field] | date: tableFields[field]?.dateFormat }} Uhr\n </ng-container>\n\n <ng-container *ngIf=\"tableFields[field]?.enumValues\">\n {{ tableFields[field]?.enumValues[object[field]]?.text }}\n </ng-container>\n\n <ng-container *ngIf=\"!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues\">\n {{ object[field] | baseEllipses: 60 }}\n </ng-container>\n </td>\n </tr>\n </tbody>\n </table>\n\n <div class=\"d-flex d-lg-none flex-column flex-grow-1\">\n <div class=\"table-card\" *ngFor=\"let object of objects\" [id]=\"object[uniqueField]\">\n <div class=\"table-card-entry\" *ngFor=\"let field of availableFields; let i = index\" (click)=\"selectId(object)\">\n <b *ngIf=\"i > 0\"\n >{{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}:</b\n >\n <p [ngClass]=\"{ 'table-card-entry-first': i === 0 }\">\n <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n {{ object[field] | date: tableFields[field]?.dateFormat }} Uhr\n </ng-container>\n\n <ng-container *ngIf=\"tableFields[field]?.enumValues\">\n {{ tableFields[field]?.enumValues[object[field]]?.text }}\n </ng-container>\n\n <ng-container *ngIf=\"!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues\">\n {{ object[field] | baseEllipses: 60 }}\n </ng-container>\n </p>\n </div>\n </div>\n </div>\n\n <nav *ngIf=\"totalCount >= 0\">\n <ul class=\"pagination justify-content-center\">\n <li class=\"page-item\">\n <a\n class=\"page-link\"\n (click)=\"selectPage(selectedPageIndex - 1)\"\n aria-label=\"Previous\"\n [ngClass]=\"{ disabled: selectedPageIndex - 1 > 0 }\"\n >\n <span aria-hidden=\"true\">&laquo;</span>\n </a>\n </li>\n <li class=\"page-item\" *ngFor=\"let page of pages; let i = index\">\n <a class=\"page-link\" [ngClass]=\"{ active: selectedPageIndex === i }\" (click)=\"selectPage(i)\">{{ i + 1 }}</a>\n </li>\n <li class=\"page-item\">\n <a\n class=\"page-link\"\n (click)=\"selectPage(selectedPageIndex + 1)\"\n aria-label=\"Next\"\n [ngClass]=\"{ disabled: pages[selectedPageIndex + 1] }\"\n >\n <span aria-hidden=\"true\">&raquo;</span>\n </a>\n </li>\n </ul>\n </nav>\n\n <div class=\"context-menu\" #contextMenu>\n <div class=\"context-menu-item\" (click)=\"selectId({ id: contextMenuData.clickedElement?.id })\">Bearbeiten</div>\n <div class=\"context-menu-item\" *ngIf=\"duplicate\" (click)=\"duplicateObject(contextMenuData.clickedElement?.id)\">\n Duplizieren\n </div>\n <div class=\"context-menu-item\" *ngIf=\"delete\" (click)=\"deleteObject(contextMenuData.clickedElement?.id)\">\n L\u00F6schen\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-100\" *ngIf=\"selectedId || createMode\">\n <button class=\"d-none d-lg-block btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n <base-model-form\n [modelName]=\"camelModelName\"\n [label]=\"config?.label\"\n [config]=\"fieldConfig\"\n [logging]=\"logging\"\n [id]=\"selectedId\"\n (finished)=\"selectId('')\"\n [delete]=\"delete\"\n [duplicate]=\"duplicate\"\n [showFavButton]=\"showFavButton\"\n ></base-model-form>\n</div>\n\n<div class=\"responsive-action-button d-block d-lg-none\">\n <base-fab-button\n [fabIcon]=\"'bi-plus'\"\n (click)=\"createNewObject()\"\n *ngIf=\"!(selectedId || createMode) && showFavButton\"\n ></base-fab-button>\n</div>\n", styles: [".cursor-pointer{cursor:pointer}.asc:after,.desc:after{border-style:solid;border-width:.2em .2em 0 0;content:\"\";display:inline-block;height:.45em;left:5px;position:relative;transform:rotate(-45deg);vertical-align:middle;width:.45em}.asc:after{transform:rotate(135deg)}td{vertical-align:middle}.bi,th{cursor:pointer;-webkit-user-select:none;user-select:none}.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}.context-menu{opacity:.01%;pointer-events:none;background-color:#fff;border:1px solid #ccc;box-shadow:1px 1px 10px #0000001a;padding:10px 0;position:fixed;top:0;left:0;width:200px}.context-menu-item{cursor:pointer;padding:8px 15px}.context-menu-item:hover{color:var(--bs-primary)}.table-card{background:var(--bs-white);padding:10px;margin-bottom:10px}.table-card-entry{margin-top:4px}.table-card-entry-first{font-size:18px;font-weight:800;color:var(--bs-primary)}.responsive-action-button{position:fixed;bottom:15px;right:15px}.bi-three-dots-vertical{font-size:18px;line-height:18px}.page-item{cursor:pointer}\n"] }]
2209
+ args: [{ selector: 'base-model-table', template: "<div *ngIf=\"!id && !createMode\">\n <div class=\"w-100 d-flex flex-row justify-content-between align-items-center mb-2 mb-lg-4\">\n <h2 id=\"model-table-top\" class=\"mb-0\" *ngIf=\"modelName\">\n {{\n modelConfig?.plural\n ? modelConfig?.plural\n : modelConfig?.label\n ? modelConfig?.label\n : capitalizeFirstLetter(camelModelName) + 's'\n }}\n </h2>\n <div class=\"d-flex align-items-center d-none d-lg-block\">\n <input #importFile type=\"file\" accept=\".json\" class=\"d-none\" (change)=\"processImport($event)\" />\n <div class=\"btn-group me-4\" *ngIf=\"import || export\">\n <i\n class=\"bi bi-three-dots-vertical\"\n id=\"settingsDropdown\"\n type=\"button\"\n data-bs-toggle=\"dropdown\"\n data-bs-auto-close=\"true\"\n aria-expanded=\"false\"\n ></i>\n <ul class=\"dropdown-menu dropdown-menu-end\" aria-labelledby=\"settingsDropdown\">\n <li><a class=\"dropdown-item cursor-pointer\" *ngIf=\"export\" (click)=\"processExport()\">Export</a></li>\n <li><a class=\"dropdown-item cursor-pointer\" *ngIf=\"import\" (click)=\"importFile.click()\"> Import </a></li>\n </ul>\n </div>\n <button class=\"btn btn-primary\" (click)=\"createNewObject()\" *ngIf=\"create\">Erstellen</button>\n </div>\n </div>\n\n <div\n class=\"table-responsive\"\n [ltContextMenu]=\"contextMenu\"\n [selectors]=\"'.object-col'\"\n #contextMenuData=\"contextMenuData\"\n >\n <table class=\"table table-hover bg-white d-none d-lg-table\">\n <thead>\n <tr>\n <th\n scope=\"col\"\n *ngFor=\"let field of availableFields\"\n [baseSort]=\"objects\"\n data-order=\"desc\"\n [attr.data-name]=\"field\"\n >\n {{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}\n </th>\n </tr>\n </thead>\n <tbody>\n <tr class=\"object-col\" *ngFor=\"let object of objects\" [id]=\"object[uniqueField]\">\n <td class=\"cursor-pointer\" *ngFor=\"let field of availableFields\" (click)=\"selectId(object)\">\n <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n {{ object[field] | date: tableFields[field]?.dateFormat }} Uhr\n </ng-container>\n\n <ng-container *ngIf=\"tableFields[field]?.enumValues\">\n {{ tableFields[field]?.enumValues[object[field]]?.text }}\n </ng-container>\n\n <ng-container *ngIf=\"!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues\">\n {{ object[field] | baseEllipses: 60 }}\n </ng-container>\n </td>\n </tr>\n </tbody>\n </table>\n\n <div class=\"d-flex d-lg-none flex-column flex-grow-1\">\n <div class=\"table-card\" *ngFor=\"let object of objects\" [id]=\"object[uniqueField]\">\n <div class=\"table-card-entry\" *ngFor=\"let field of availableFields; let i = index\" (click)=\"selectId(object)\">\n <b *ngIf=\"i > 0\"\n >{{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}:</b\n >\n <p [ngClass]=\"{ 'table-card-entry-first': i === 0 }\">\n <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n {{ object[field] | date: tableFields[field]?.dateFormat }} Uhr\n </ng-container>\n\n <ng-container *ngIf=\"tableFields[field]?.enumValues\">\n {{ tableFields[field]?.enumValues[object[field]]?.text }}\n </ng-container>\n\n <ng-container *ngIf=\"!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues\">\n {{ object[field] | baseEllipses: 60 }}\n </ng-container>\n </p>\n </div>\n </div>\n </div>\n\n <nav *ngIf=\"totalCount >= 0\">\n <ul class=\"pagination justify-content-center\">\n <li class=\"page-item\">\n <a\n class=\"page-link\"\n (click)=\"selectPage(selectedPageIndex - 1)\"\n aria-label=\"Previous\"\n [ngClass]=\"{ disabled: selectedPageIndex - 1 > 0 }\"\n >\n <span aria-hidden=\"true\">&laquo;</span>\n </a>\n </li>\n <li class=\"page-item\" *ngFor=\"let page of pages; let i = index\">\n <a class=\"page-link\" [ngClass]=\"{ active: selectedPageIndex === i }\" (click)=\"selectPage(i)\">{{ i + 1 }}</a>\n </li>\n <li class=\"page-item\">\n <a\n class=\"page-link\"\n (click)=\"selectPage(selectedPageIndex + 1)\"\n aria-label=\"Next\"\n [ngClass]=\"{ disabled: pages[selectedPageIndex + 1] }\"\n >\n <span aria-hidden=\"true\">&raquo;</span>\n </a>\n </li>\n </ul>\n </nav>\n\n <div class=\"context-menu\" #contextMenu>\n <div class=\"context-menu-item\" (click)=\"selectId({ id: contextMenuData.clickedElement?.id })\">Bearbeiten</div>\n <div class=\"context-menu-item\" *ngIf=\"duplicate\" (click)=\"duplicateObject(contextMenuData.clickedElement?.id)\">\n Duplizieren\n </div>\n <div class=\"context-menu-item\" *ngIf=\"delete\" (click)=\"deleteObject(contextMenuData.clickedElement?.id)\">\n L\u00F6schen\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-100\" *ngIf=\"id || createMode\">\n <button class=\"d-none d-lg-block btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n <base-model-form\n *ngIf=\"!modelConfig?.customFormComponent\"\n [modelName]=\"camelModelName\"\n [label]=\"modelConfig?.label\"\n [config]=\"config\"\n [logging]=\"logging\"\n [id]=\"id\"\n (finished)=\"selectId('')\"\n [delete]=\"delete\"\n [duplicate]=\"duplicate\"\n [showFavButton]=\"showFavButton\"\n ></base-model-form>\n <ng-template *ngIf=\"modelConfig?.customFormComponent\" #customFormTemplate></ng-template>\n</div>\n\n<div class=\"responsive-action-button d-block d-lg-none\">\n <base-fab-button\n [fabIcon]=\"'bi-plus'\"\n (click)=\"createNewObject()\"\n *ngIf=\"!(id || createMode) && showFavButton\"\n ></base-fab-button>\n</div>\n", styles: [".cursor-pointer{cursor:pointer}.asc:after,.desc:after{border-style:solid;border-width:.2em .2em 0 0;content:\"\";display:inline-block;height:.45em;left:5px;position:relative;transform:rotate(-45deg);vertical-align:middle;width:.45em}.asc:after{transform:rotate(135deg)}td{vertical-align:middle}.bi,th{cursor:pointer;-webkit-user-select:none;user-select:none}.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}.context-menu{opacity:.01%;pointer-events:none;background-color:#fff;border:1px solid #ccc;box-shadow:1px 1px 10px #0000001a;padding:10px 0;position:fixed;top:0;left:0;width:200px}.context-menu-item{cursor:pointer;padding:8px 15px}.context-menu-item:hover{color:var(--bs-primary)}.table-card{background:var(--bs-white);padding:10px;margin-bottom:10px}.table-card-entry{margin-top:4px}.table-card-entry-first{font-size:18px;font-weight:800;color:var(--bs-primary)}.responsive-action-button{position:fixed;bottom:15px;right:15px}.bi-three-dots-vertical{font-size:18px;line-height:18px}.page-item{cursor:pointer}\n"] }]
2158
2210
  }], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }, { type: i1$1.CmsService }, { type: i1$1.ToastService }, { type: i1$1.ScrollService }]; }, propDecorators: { modelName: [{
2159
2211
  type: Input
2160
2212
  }], objectId: [{
@@ -2175,9 +2227,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
2175
2227
  type: Input
2176
2228
  }], duplicate: [{
2177
2229
  type: Input
2178
- }], config: [{
2230
+ }], modelConfig: [{
2179
2231
  type: Input
2180
- }], fieldConfig: [{
2232
+ }], config: [{
2181
2233
  type: Input
2182
2234
  }], showFavButton: [{
2183
2235
  type: Input
@@ -2185,6 +2237,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
2185
2237
  type: Output
2186
2238
  }], createModeChanged: [{
2187
2239
  type: Output
2240
+ }], customFormTemplate: [{
2241
+ type: ViewChild,
2242
+ args: ['customFormTemplate', { read: ViewContainerRef }]
2188
2243
  }] } });
2189
2244
 
2190
2245
  class ChangePasswordComponent {
@@ -2433,6 +2488,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
2433
2488
  }]
2434
2489
  }] });
2435
2490
 
2491
+ /**
2492
+ * Abstract Component for inputs and outputs only
2493
+ *
2494
+ * Hint for handling extensions of this component in project:
2495
+ * If you want to use complete custom services and methods, extend ModelFormComponent instead of ModelFormBaseComponent
2496
+ */
2497
+ class ModelFormBaseComponent {
2498
+ constructor() {
2499
+ this.delete = true;
2500
+ this.onlyUpdateMode = false;
2501
+ this.duplicate = false;
2502
+ this.logging = false;
2503
+ this.showFavButton = true;
2504
+ this.finished = new EventEmitter();
2505
+ }
2506
+ }
2507
+ ModelFormBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ModelFormBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2508
+ ModelFormBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ModelFormBaseComponent, selector: "base-model-form", inputs: { modelName: "modelName", label: "label", id: "id", delete: "delete", onlyUpdateMode: "onlyUpdateMode", duplicate: "duplicate", logging: "logging", config: "config", showFavButton: "showFavButton" }, outputs: { finished: "finished" }, ngImport: i0, template: "<div class=\"w-100\" *ngIf=\"form\">\n <div class=\"d-flex flex-row justify-content-between mt-3\">\n <div class=\"responsive-back d-flex d-lg-none\">\n <i class=\"bi bi-arrow-left\" routerLink=\"../\"></i>\n </div>\n <h2 class=\"mb-0\">\n {{ label ? label : capitalizeFirstLetter(modelName) }} {{ operation === 'update' ? 'bearbeiten' : 'erstellen' }}\n </h2>\n\n <div class=\"d-none d-lg-flex flex-row align-items-center justify-content-end\">\n <button class=\"btn btn-outline-primary me-2\" *ngIf=\"id && duplicate && !_loading\" (click)=\"duplicateObject()\">\n Duplizieren\n </button>\n <button\n class=\"btn btn-primary\"\n type=\"button\"\n [disabled]=\"!form.touched && !form.dirty\"\n (click)=\"submit(false)\"\n *ngIf=\"!_loading\"\n >\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\n <form [formGroup]=\"form\">\n <base-model-form-sub\n [id]=\"id\"\n [fields]=\"fields\"\n [config]=\"config\"\n [form]=\"form\"\n (imageChanged)=\"imageChanged($event)\"\n (fileChanged)=\"processFileChanges($event)\"\n ></base-model-form-sub>\n\n <div class=\"d-none d-lg-flex mt-4\" [ngClass]=\"id && delete ? 'justify-content-between' : 'justify-content-end'\">\n <div *ngIf=\"id && delete\">\n <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteObject()\">L\u00F6schen</button>\n </div>\n <div>\n <button\n class=\"btn btn-primary\"\n type=\"button\"\n [disabled]=\"!form.touched && !form.dirty\"\n (click)=\"submit(false)\"\n *ngIf=\"!_loading\"\n >\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\n<div class=\"d-block d-lg-none responsive-action-button\" *ngIf=\"showFavButton\">\n <base-fab-button [buttons]=\"fabButtons\"></base-fab-button>\n</div>\n", styles: [".responsive-back{display:flex;align-items:center;margin-right:6px}.responsive-back .bi-arrow-left{font-size:28px}h2{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.responsive-action-button{position:fixed;bottom:15px;right:15px;z-index:100}\n"] });
2509
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ModelFormBaseComponent, decorators: [{
2510
+ type: Component,
2511
+ args: [{ selector: 'base-model-form', template: "<div class=\"w-100\" *ngIf=\"form\">\n <div class=\"d-flex flex-row justify-content-between mt-3\">\n <div class=\"responsive-back d-flex d-lg-none\">\n <i class=\"bi bi-arrow-left\" routerLink=\"../\"></i>\n </div>\n <h2 class=\"mb-0\">\n {{ label ? label : capitalizeFirstLetter(modelName) }} {{ operation === 'update' ? 'bearbeiten' : 'erstellen' }}\n </h2>\n\n <div class=\"d-none d-lg-flex flex-row align-items-center justify-content-end\">\n <button class=\"btn btn-outline-primary me-2\" *ngIf=\"id && duplicate && !_loading\" (click)=\"duplicateObject()\">\n Duplizieren\n </button>\n <button\n class=\"btn btn-primary\"\n type=\"button\"\n [disabled]=\"!form.touched && !form.dirty\"\n (click)=\"submit(false)\"\n *ngIf=\"!_loading\"\n >\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\n <form [formGroup]=\"form\">\n <base-model-form-sub\n [id]=\"id\"\n [fields]=\"fields\"\n [config]=\"config\"\n [form]=\"form\"\n (imageChanged)=\"imageChanged($event)\"\n (fileChanged)=\"processFileChanges($event)\"\n ></base-model-form-sub>\n\n <div class=\"d-none d-lg-flex mt-4\" [ngClass]=\"id && delete ? 'justify-content-between' : 'justify-content-end'\">\n <div *ngIf=\"id && delete\">\n <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteObject()\">L\u00F6schen</button>\n </div>\n <div>\n <button\n class=\"btn btn-primary\"\n type=\"button\"\n [disabled]=\"!form.touched && !form.dirty\"\n (click)=\"submit(false)\"\n *ngIf=\"!_loading\"\n >\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\n<div class=\"d-block d-lg-none responsive-action-button\" *ngIf=\"showFavButton\">\n <base-fab-button [buttons]=\"fabButtons\"></base-fab-button>\n</div>\n", styles: [".responsive-back{display:flex;align-items:center;margin-right:6px}.responsive-back .bi-arrow-left{font-size:28px}h2{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.responsive-action-button{position:fixed;bottom:15px;right:15px;z-index:100}\n"] }]
2512
+ }], propDecorators: { modelName: [{
2513
+ type: Input
2514
+ }], label: [{
2515
+ type: Input
2516
+ }], id: [{
2517
+ type: Input
2518
+ }], delete: [{
2519
+ type: Input
2520
+ }], onlyUpdateMode: [{
2521
+ type: Input
2522
+ }], duplicate: [{
2523
+ type: Input
2524
+ }], logging: [{
2525
+ type: Input
2526
+ }], config: [{
2527
+ type: Input
2528
+ }], showFavButton: [{
2529
+ type: Input
2530
+ }], finished: [{
2531
+ type: Output
2532
+ }] } });
2533
+
2436
2534
  /**
2437
2535
  * Exports for public API
2438
2536
  */
@@ -2441,5 +2539,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
2441
2539
  * Generated bundle index. Do not edit.
2442
2540
  */
2443
2541
 
2444
- export { BackButtonDirective, BaseComponentsModule, BreadcrumbComponent, ChangePasswordComponent, CheckboxComponent, ContextMenuDirective, DeleteAccountComponent, EllipsesPipe, FabButtonComponent, InputComponent, LoadingBarComponent, ModelFormComponent, ModelFormSubComponent, ModelTableComponent, RefenceInputComponent, SelectComponent, SkeletonLoaderComponent, SortDirective, StopPropagationDirective, TagsComponent, TextareaComponent, ToastComponent, UploadImageComponent };
2542
+ export { BackButtonDirective, BaseComponentsModule, BreadcrumbComponent, ChangePasswordComponent, CheckboxComponent, ContextMenuDirective, DeleteAccountComponent, EllipsesPipe, FabButtonComponent, InputComponent, LoadingBarComponent, ModelFormBaseComponent, ModelFormComponent, ModelFormSubComponent, ModelTableComponent, RefenceInputComponent, SelectComponent, SkeletonLoaderComponent, SortDirective, StopPropagationDirective, TagsComponent, TextareaComponent, ToastComponent, UploadImageComponent };
2445
2543
  //# sourceMappingURL=lenne.tech-ng-base-base-components.mjs.map