@lenne.tech/ng-base 14.2.4 → 14.2.5
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.
- package/base-cms/pages/base-cms/base-cms.component.d.ts +16 -2
- package/base-components/components/model-table/model-table.component.d.ts +5 -0
- package/base-components/components/refence-input/refence-input.component.d.ts +2 -1
- package/base-components/components/upload-image/upload-image.component.d.ts +3 -1
- package/esm2020/base-cms/pages/base-cms/base-cms.component.mjs +43 -11
- package/esm2020/base-components/components/model-form/model-form.component.mjs +5 -1
- package/esm2020/base-components/components/model-form-sub/model-form-sub.component.mjs +3 -3
- package/esm2020/base-components/components/model-table/model-table.component.mjs +19 -6
- package/esm2020/base-components/components/refence-input/refence-input.component.mjs +6 -3
- package/esm2020/base-components/components/upload-image/upload-image.component.mjs +9 -3
- package/esm2020/shared/services/cms.service.mjs +7 -1
- package/fesm2015/lenne.tech-ng-base-base-cms.mjs +43 -10
- package/fesm2015/lenne.tech-ng-base-base-cms.mjs.map +1 -1
- package/fesm2015/lenne.tech-ng-base-base-components.mjs +37 -11
- package/fesm2015/lenne.tech-ng-base-base-components.mjs.map +1 -1
- package/fesm2015/lenne.tech-ng-base-shared.mjs +6 -0
- package/fesm2015/lenne.tech-ng-base-shared.mjs.map +1 -1
- package/fesm2020/lenne.tech-ng-base-base-cms.mjs +41 -9
- package/fesm2020/lenne.tech-ng-base-base-cms.mjs.map +1 -1
- package/fesm2020/lenne.tech-ng-base-base-components.mjs +37 -11
- package/fesm2020/lenne.tech-ng-base-base-components.mjs.map +1 -1
- package/fesm2020/lenne.tech-ng-base-shared.mjs +6 -0
- package/fesm2020/lenne.tech-ng-base-shared.mjs.map +1 -1
- package/package.json +1 -1
- package/shared/services/cms.service.d.ts +4 -0
|
@@ -606,6 +606,8 @@ class UploadImageComponent {
|
|
|
606
606
|
this.supportText = 'Supports: JPEG, JPG, PNG';
|
|
607
607
|
this.required = false;
|
|
608
608
|
this.dragText = 'Drag & Drop';
|
|
609
|
+
this.preButtonText = 'or';
|
|
610
|
+
this.buttonText = 'browse';
|
|
609
611
|
this.validExtensions = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp'];
|
|
610
612
|
this.url = 'http://localhost:3000';
|
|
611
613
|
this.uploadPath = '/files/upload';
|
|
@@ -723,10 +725,10 @@ class UploadImageComponent {
|
|
|
723
725
|
}
|
|
724
726
|
}
|
|
725
727
|
UploadImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: UploadImageComponent, deps: [{ token: i1$2.HttpClient }, { token: i1$1.AuthService }], target: i0.ɵɵFactoryTarget.Component });
|
|
726
|
-
UploadImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: UploadImageComponent, selector: "base-upload-image", inputs: { id: "id", name: "name", label: "label", supportText: "supportText", required: "required", dragText: "dragText", validExtensions: "validExtensions", control: "control", url: "url", uploadPath: "uploadPath", deletePath: "deletePath", path: "path" }, outputs: { imageUploaded: "imageUploaded", imageDeleted: "imageDeleted" }, ngImport: i0, template: "<div class=\"form-group mt-3\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <div\n class=\"drag-area\"\n (dragover)=\"dragOver($event)\"\n (dragleave)=\"dragLeave($event)\"\n (drop)=\"drop($event)\"\n [ngClass]=\"{ active: dragActive }\"\n >\n <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n <div class=\"spinner-border text-primary\" role=\"status\">\n <span class=\"visually-hidden\">Loading...</span>\n </div>\n </div>\n\n <ng-container *ngIf=\"selectedFile && !control?.value && !loading\">\n <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile()\">L\u00F6schen</button>\n </ng-container>\n\n <ng-container *ngIf=\"control?.value && !loading\">\n <img [src]=\"url + path + control?.value\" />\n <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\">L\u00F6schen</button>\n </ng-container>\n\n <ng-container *ngIf=\"!selectedFile && !control?.value && !loading\">\n <div class=\"icon\">\n <i class=\"bi bi-images\"></i>\n </div>\n\n <span class=\"header\">{{ dragText }}</span>\n <span class=\"header\">
|
|
728
|
+
UploadImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: UploadImageComponent, selector: "base-upload-image", inputs: { id: "id", name: "name", label: "label", supportText: "supportText", required: "required", dragText: "dragText", preButtonText: "preButtonText", buttonText: "buttonText", validExtensions: "validExtensions", control: "control", url: "url", uploadPath: "uploadPath", deletePath: "deletePath", path: "path" }, outputs: { imageUploaded: "imageUploaded", imageDeleted: "imageDeleted" }, ngImport: i0, template: "<div class=\"form-group mt-3\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <div\n class=\"drag-area\"\n (dragover)=\"dragOver($event)\"\n (dragleave)=\"dragLeave($event)\"\n (drop)=\"drop($event)\"\n [ngClass]=\"{ active: dragActive }\"\n >\n <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n <div class=\"spinner-border text-primary\" role=\"status\">\n <span class=\"visually-hidden\">Loading...</span>\n </div>\n </div>\n\n <ng-container *ngIf=\"selectedFile && !control?.value && !loading\">\n <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile()\">L\u00F6schen</button>\n </ng-container>\n\n <ng-container *ngIf=\"control?.value && !loading\">\n <img [src]=\"url + path + control?.value\" />\n <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\">L\u00F6schen</button>\n </ng-container>\n\n <ng-container *ngIf=\"!selectedFile && !control?.value && !loading\">\n <div class=\"icon\">\n <i class=\"bi bi-images\"></i>\n </div>\n\n <span class=\"header\">{{ dragText }}</span>\n <span class=\"header\"\n >{{ preButtonText }} <span class=\"button\" (click)=\"fileInput.click()\">{{ buttonText }}</span></span\n >\n <input type=\"file\" (change)=\"selectFile($event)\" [attr.accept]=\"validExtensions?.join(',')\" hidden #fileInput />\n <span class=\"support\" [innerText]=\"supportText\"></span>\n </ng-container>\n </div>\n\n <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n <div *ngIf=\"control?.errors?.['minlength']\">\n Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['maxlength']\">\n Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n </div>\n</div>\n", styles: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.required:after{content:\" *\"}.drag-area{height:var(--base-upload-image-area-height);border:2px dashed var(--base-upload-image-area-border-color);background-color:var(--base-upload-image-area-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;margin:10px auto;padding:20px}.drag-area img{height:100%;max-height:300px;max-width:100%;object-fit:scale-down}.drag-area .btn-danger{margin-top:auto}.drag-area .icon{font-size:50px;color:var(--bs-primary)}.drag-area .header{font-size:20px;font-weight:500}.drag-area .support{font-size:12px;color:#e1e1e1;margin:10px 0 15px}.drag-area .button{font-size:20px;font-weight:500;color:var(--bs-primary);cursor:pointer}.active{border:2px solid var(--bs-primary)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
727
729
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: UploadImageComponent, decorators: [{
|
|
728
730
|
type: Component,
|
|
729
|
-
args: [{ selector: 'base-upload-image', template: "<div class=\"form-group mt-3\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <div\n class=\"drag-area\"\n (dragover)=\"dragOver($event)\"\n (dragleave)=\"dragLeave($event)\"\n (drop)=\"drop($event)\"\n [ngClass]=\"{ active: dragActive }\"\n >\n <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n <div class=\"spinner-border text-primary\" role=\"status\">\n <span class=\"visually-hidden\">Loading...</span>\n </div>\n </div>\n\n <ng-container *ngIf=\"selectedFile && !control?.value && !loading\">\n <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile()\">L\u00F6schen</button>\n </ng-container>\n\n <ng-container *ngIf=\"control?.value && !loading\">\n <img [src]=\"url + path + control?.value\" />\n <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\">L\u00F6schen</button>\n </ng-container>\n\n <ng-container *ngIf=\"!selectedFile && !control?.value && !loading\">\n <div class=\"icon\">\n <i class=\"bi bi-images\"></i>\n </div>\n\n <span class=\"header\">{{ dragText }}</span>\n <span class=\"header\">
|
|
731
|
+
args: [{ selector: 'base-upload-image', template: "<div class=\"form-group mt-3\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <div\n class=\"drag-area\"\n (dragover)=\"dragOver($event)\"\n (dragleave)=\"dragLeave($event)\"\n (drop)=\"drop($event)\"\n [ngClass]=\"{ active: dragActive }\"\n >\n <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n <div class=\"spinner-border text-primary\" role=\"status\">\n <span class=\"visually-hidden\">Loading...</span>\n </div>\n </div>\n\n <ng-container *ngIf=\"selectedFile && !control?.value && !loading\">\n <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile()\">L\u00F6schen</button>\n </ng-container>\n\n <ng-container *ngIf=\"control?.value && !loading\">\n <img [src]=\"url + path + control?.value\" />\n <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\">L\u00F6schen</button>\n </ng-container>\n\n <ng-container *ngIf=\"!selectedFile && !control?.value && !loading\">\n <div class=\"icon\">\n <i class=\"bi bi-images\"></i>\n </div>\n\n <span class=\"header\">{{ dragText }}</span>\n <span class=\"header\"\n >{{ preButtonText }} <span class=\"button\" (click)=\"fileInput.click()\">{{ buttonText }}</span></span\n >\n <input type=\"file\" (change)=\"selectFile($event)\" [attr.accept]=\"validExtensions?.join(',')\" hidden #fileInput />\n <span class=\"support\" [innerText]=\"supportText\"></span>\n </ng-container>\n </div>\n\n <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n <div *ngIf=\"control?.errors?.['minlength']\">\n Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['maxlength']\">\n Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n </div>\n</div>\n", styles: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.required:after{content:\" *\"}.drag-area{height:var(--base-upload-image-area-height);border:2px dashed var(--base-upload-image-area-border-color);background-color:var(--base-upload-image-area-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;margin:10px auto;padding:20px}.drag-area img{height:100%;max-height:300px;max-width:100%;object-fit:scale-down}.drag-area .btn-danger{margin-top:auto}.drag-area .icon{font-size:50px;color:var(--bs-primary)}.drag-area .header{font-size:20px;font-weight:500}.drag-area .support{font-size:12px;color:#e1e1e1;margin:10px 0 15px}.drag-area .button{font-size:20px;font-weight:500;color:var(--bs-primary);cursor:pointer}.active{border:2px solid var(--bs-primary)}\n"] }]
|
|
730
732
|
}], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: i1$1.AuthService }]; }, propDecorators: { id: [{
|
|
731
733
|
type: Input
|
|
732
734
|
}], name: [{
|
|
@@ -739,6 +741,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
739
741
|
type: Input
|
|
740
742
|
}], dragText: [{
|
|
741
743
|
type: Input
|
|
744
|
+
}], preButtonText: [{
|
|
745
|
+
type: Input
|
|
746
|
+
}], buttonText: [{
|
|
747
|
+
type: Input
|
|
742
748
|
}], validExtensions: [{
|
|
743
749
|
type: Input
|
|
744
750
|
}], control: [{
|
|
@@ -761,6 +767,7 @@ class RefenceInputComponent {
|
|
|
761
767
|
constructor(graphQLService) {
|
|
762
768
|
this.graphQLService = graphQLService;
|
|
763
769
|
this.isList = false;
|
|
770
|
+
this.search = true;
|
|
764
771
|
this.placeholder = '';
|
|
765
772
|
this.required = false;
|
|
766
773
|
this.method = 'find';
|
|
@@ -891,10 +898,10 @@ class RefenceInputComponent {
|
|
|
891
898
|
}
|
|
892
899
|
}
|
|
893
900
|
RefenceInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: RefenceInputComponent, deps: [{ token: i1$1.GraphQLService }], target: i0.ɵɵFactoryTarget.Component });
|
|
894
|
-
RefenceInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: RefenceInputComponent, selector: "base-refence-input", inputs: { id: "id", name: "name", label: "label", isList: "isList", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", required: "required", method: "method", fields: "fields", valueField: "valueField", textField: "textField" }, 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\">\n <input [formControl]=\"control\" hidden />\n <input\n [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 {{ object[textField] }}\n </div>\n </div>\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']\">Bitte w\u00E4hle einen g\u00FCltigen Wert aus.</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}.options .option-item{padding:10px;cursor:pointer}.options .option-item:hover{color:var(--bs-primary)}\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.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"] }] });
|
|
901
|
+
RefenceInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: RefenceInputComponent, selector: "base-refence-input", inputs: { id: "id", name: "name", label: "label", isList: "isList", search: "search", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", required: "required", method: "method", fields: "fields", valueField: "valueField", textField: "textField" }, 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]=\"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 {{ object[textField] }}\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!search\">\n <select\n [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 {{ object[textField] }}\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']\">Bitte w\u00E4hle einen g\u00FCltigen Wert aus.</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}.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"] }] });
|
|
895
902
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: RefenceInputComponent, decorators: [{
|
|
896
903
|
type: Component,
|
|
897
|
-
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\">\n <input [formControl]=\"control\" hidden />\n <input\n [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 {{ object[textField] }}\n </div>\n </div>\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']\">Bitte w\u00E4hle einen g\u00FCltigen Wert aus.</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}.options .option-item{padding:10px;cursor:pointer}.options .option-item:hover{color:var(--bs-primary)}\n"] }]
|
|
904
|
+
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]=\"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 {{ object[textField] }}\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!search\">\n <select\n [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 {{ object[textField] }}\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']\">Bitte w\u00E4hle einen g\u00FCltigen Wert aus.</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}.options .option-item{padding:10px;cursor:pointer}.options .option-item:hover{color:var(--bs-primary)}\n"] }]
|
|
898
905
|
}], ctorParameters: function () { return [{ type: i1$1.GraphQLService }]; }, propDecorators: { id: [{
|
|
899
906
|
type: Input
|
|
900
907
|
}], name: [{
|
|
@@ -903,6 +910,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
903
910
|
type: Input
|
|
904
911
|
}], isList: [{
|
|
905
912
|
type: Input
|
|
913
|
+
}], search: [{
|
|
914
|
+
type: Input
|
|
906
915
|
}], placeholder: [{
|
|
907
916
|
type: Input
|
|
908
917
|
}], autocomplete: [{
|
|
@@ -985,10 +994,10 @@ class ModelFormSubComponent {
|
|
|
985
994
|
}
|
|
986
995
|
}
|
|
987
996
|
ModelFormSubComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ModelFormSubComponent, deps: [{ token: i1$1.AuthService }], target: i0.ɵɵFactoryTarget.Component });
|
|
988
|
-
ModelFormSubComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: { fields: "fields", form: "form", config: "config" }, outputs: { imageChanged: "imageChanged" }, ngImport: i0, template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n <ng-container\n *ngIf=\"checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n >\n <fieldset class=\"border rounded-3 p-3 mt-3\">\n <legend class=\"float-none w-auto px-3\">\n {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n </legend>\n <base-model-form-sub\n [fields]=\"fields[key].fields\"\n [config]=\"config[key]?.fields || {}\"\n [form]=\"form.get(key)\"\n ></base-model-form-sub>\n </fieldset>\n </ng-container>\n\n <ng-container\n *ngIf=\"!checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n >\n <ng-container *ngIf=\"fields[key]?.isEnum && !config[key]?.exclude\">\n <base-select\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n ></base-select>\n </ng-container>\n\n <ng-container *ngIf=\"!fields[key]?.isEnum && !config[key]?.exclude\">\n <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n <ng-container *ngSwitchCase=\"'String'\">\n <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n <base-tags\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-tags>\n </ng-container>\n\n <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'text'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Image'\">\n <base-upload-image\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [url]=\"config[key]?.url\"\n [path]=\"config[key]?.path || '/files/'\"\n [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n [deletePath]=\"config[key]?.deletePath || '/files/'\"\n [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n [dragText]=\"config[key]?.dragText || 'Drag & Drop'\"\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 (imageDeleted)=\"imageChanged.emit(key)\"\n (imageUploaded)=\"imageChanged.emit(key)\"\n ></base-upload-image>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Reference'\">\n <base-refence-input\n [id]=\"key\"\n [name]=\"key\"\n [isList]=\"fields[key]?.isList\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [method]=\"config[key]?.method || 'find'\"\n [fields]=\"config[key]?.fields || ['id', 'name']\"\n [valueField]=\"config[key]?.valueField || 'id'\"\n [textField]=\"config[key]?.nameField || 'name'\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-refence-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Boolean'\">\n <base-checkbox\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-checkbox>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'LongText'\">\n <base-textarea\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-textarea>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Float'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'number'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Password'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'password'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Color'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'color'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'URL'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'url'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Email'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'email'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'DateTime'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'datetime-local'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required"], outputs: ["enter"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["id", "name", "label", "placeholder", "control", "tabIndex", "required", "multiple", "search", "options"] }, { kind: "component", type: CheckboxComponent, selector: "base-checkbox", inputs: ["id", "name", "label", "value", "control", "required"] }, { kind: "component", type: TextareaComponent, selector: "base-textarea", inputs: ["id", "name", "label", "placeholder", "control", "rows", "required", "tabIndex"] }, { kind: "component", type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required"] }, { kind: "component", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["fields", "form", "config"], outputs: ["imageChanged"] }, { kind: "component", type: UploadImageComponent, selector: "base-upload-image", inputs: ["id", "name", "label", "supportText", "required", "dragText", "validExtensions", "control", "url", "uploadPath", "deletePath", "path"], outputs: ["imageUploaded", "imageDeleted"] }, { kind: "component", type: RefenceInputComponent, selector: "base-refence-input", inputs: ["id", "name", "label", "isList", "placeholder", "autocomplete", "tabIndex", "control", "required", "method", "fields", "valueField", "textField"] }] });
|
|
997
|
+
ModelFormSubComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: { fields: "fields", form: "form", config: "config" }, outputs: { imageChanged: "imageChanged" }, ngImport: i0, template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n <ng-container\n *ngIf=\"checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n >\n <fieldset class=\"border rounded-3 p-3 mt-3\">\n <legend class=\"float-none w-auto px-3\">\n {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n </legend>\n <base-model-form-sub\n [fields]=\"fields[key].fields\"\n [config]=\"config[key]?.fields || {}\"\n [form]=\"form.get(key)\"\n ></base-model-form-sub>\n </fieldset>\n </ng-container>\n\n <ng-container\n *ngIf=\"!checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n >\n <ng-container *ngIf=\"fields[key]?.isEnum && !config[key]?.exclude\">\n <base-select\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n ></base-select>\n </ng-container>\n\n <ng-container *ngIf=\"!fields[key]?.isEnum && !config[key]?.exclude\">\n <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n <ng-container *ngSwitchCase=\"'String'\">\n <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n <base-tags\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-tags>\n </ng-container>\n\n <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'text'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Image'\">\n <base-upload-image\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [url]=\"config[key]?.url\"\n [path]=\"config[key]?.path || '/files/'\"\n [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n [deletePath]=\"config[key]?.deletePath || '/files/'\"\n [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n [dragText]=\"config[key]?.dragText || 'Drag & Drop'\"\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 (imageDeleted)=\"imageChanged.emit(key)\"\n (imageUploaded)=\"imageChanged.emit(key)\"\n ></base-upload-image>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Reference'\">\n <base-refence-input\n [id]=\"key\"\n [name]=\"key\"\n [isList]=\"fields[key]?.isList\"\n [search]=\"config[key]?.searchable ?? true\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [method]=\"config[key]?.method || 'find'\"\n [fields]=\"config[key]?.fields || ['id', 'name']\"\n [valueField]=\"config[key]?.valueField || 'id'\"\n [textField]=\"config[key]?.nameField || 'name'\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-refence-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Boolean'\">\n <base-checkbox\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-checkbox>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'LongText'\">\n <base-textarea\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-textarea>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Float'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'number'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Password'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'password'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Color'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'color'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'URL'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'url'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Email'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'email'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'DateTime'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'datetime-local'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required"], outputs: ["enter"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["id", "name", "label", "placeholder", "control", "tabIndex", "required", "multiple", "search", "options"] }, { kind: "component", type: CheckboxComponent, selector: "base-checkbox", inputs: ["id", "name", "label", "value", "control", "required"] }, { kind: "component", type: TextareaComponent, selector: "base-textarea", inputs: ["id", "name", "label", "placeholder", "control", "rows", "required", "tabIndex"] }, { kind: "component", type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required"] }, { kind: "component", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["fields", "form", "config"], outputs: ["imageChanged"] }, { kind: "component", type: UploadImageComponent, selector: "base-upload-image", inputs: ["id", "name", "label", "supportText", "required", "dragText", "preButtonText", "buttonText", "validExtensions", "control", "url", "uploadPath", "deletePath", "path"], outputs: ["imageUploaded", "imageDeleted"] }, { kind: "component", type: RefenceInputComponent, selector: "base-refence-input", inputs: ["id", "name", "label", "isList", "search", "placeholder", "autocomplete", "tabIndex", "control", "required", "method", "fields", "valueField", "textField"] }] });
|
|
989
998
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ModelFormSubComponent, decorators: [{
|
|
990
999
|
type: Component,
|
|
991
|
-
args: [{ selector: 'base-model-form-sub', template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n <ng-container\n *ngIf=\"checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n >\n <fieldset class=\"border rounded-3 p-3 mt-3\">\n <legend class=\"float-none w-auto px-3\">\n {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n </legend>\n <base-model-form-sub\n [fields]=\"fields[key].fields\"\n [config]=\"config[key]?.fields || {}\"\n [form]=\"form.get(key)\"\n ></base-model-form-sub>\n </fieldset>\n </ng-container>\n\n <ng-container\n *ngIf=\"!checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n >\n <ng-container *ngIf=\"fields[key]?.isEnum && !config[key]?.exclude\">\n <base-select\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n ></base-select>\n </ng-container>\n\n <ng-container *ngIf=\"!fields[key]?.isEnum && !config[key]?.exclude\">\n <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n <ng-container *ngSwitchCase=\"'String'\">\n <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n <base-tags\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-tags>\n </ng-container>\n\n <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'text'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Image'\">\n <base-upload-image\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [url]=\"config[key]?.url\"\n [path]=\"config[key]?.path || '/files/'\"\n [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n [deletePath]=\"config[key]?.deletePath || '/files/'\"\n [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n [dragText]=\"config[key]?.dragText || 'Drag & Drop'\"\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 (imageDeleted)=\"imageChanged.emit(key)\"\n (imageUploaded)=\"imageChanged.emit(key)\"\n ></base-upload-image>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Reference'\">\n <base-refence-input\n [id]=\"key\"\n [name]=\"key\"\n [isList]=\"fields[key]?.isList\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [method]=\"config[key]?.method || 'find'\"\n [fields]=\"config[key]?.fields || ['id', 'name']\"\n [valueField]=\"config[key]?.valueField || 'id'\"\n [textField]=\"config[key]?.nameField || 'name'\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-refence-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Boolean'\">\n <base-checkbox\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-checkbox>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'LongText'\">\n <base-textarea\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-textarea>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Float'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'number'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Password'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'password'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Color'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'color'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'URL'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'url'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Email'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'email'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'DateTime'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'datetime-local'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n</div>\n" }]
|
|
1000
|
+
args: [{ selector: 'base-model-form-sub', template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n <ng-container\n *ngIf=\"checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n >\n <fieldset class=\"border rounded-3 p-3 mt-3\">\n <legend class=\"float-none w-auto px-3\">\n {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n </legend>\n <base-model-form-sub\n [fields]=\"fields[key].fields\"\n [config]=\"config[key]?.fields || {}\"\n [form]=\"form.get(key)\"\n ></base-model-form-sub>\n </fieldset>\n </ng-container>\n\n <ng-container\n *ngIf=\"!checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n >\n <ng-container *ngIf=\"fields[key]?.isEnum && !config[key]?.exclude\">\n <base-select\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n ></base-select>\n </ng-container>\n\n <ng-container *ngIf=\"!fields[key]?.isEnum && !config[key]?.exclude\">\n <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n <ng-container *ngSwitchCase=\"'String'\">\n <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n <base-tags\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-tags>\n </ng-container>\n\n <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'text'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Image'\">\n <base-upload-image\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [url]=\"config[key]?.url\"\n [path]=\"config[key]?.path || '/files/'\"\n [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n [deletePath]=\"config[key]?.deletePath || '/files/'\"\n [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n [dragText]=\"config[key]?.dragText || 'Drag & Drop'\"\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 (imageDeleted)=\"imageChanged.emit(key)\"\n (imageUploaded)=\"imageChanged.emit(key)\"\n ></base-upload-image>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Reference'\">\n <base-refence-input\n [id]=\"key\"\n [name]=\"key\"\n [isList]=\"fields[key]?.isList\"\n [search]=\"config[key]?.searchable ?? true\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [method]=\"config[key]?.method || 'find'\"\n [fields]=\"config[key]?.fields || ['id', 'name']\"\n [valueField]=\"config[key]?.valueField || 'id'\"\n [textField]=\"config[key]?.nameField || 'name'\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-refence-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Boolean'\">\n <base-checkbox\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-checkbox>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'LongText'\">\n <base-textarea\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-textarea>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Float'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'number'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Password'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'password'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Color'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'color'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'URL'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'url'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Email'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'email'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'DateTime'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'datetime-local'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n</div>\n" }]
|
|
992
1001
|
}], ctorParameters: function () { return [{ type: i1$1.AuthService }]; }, propDecorators: { fields: [{
|
|
993
1002
|
type: Input
|
|
994
1003
|
}], form: [{
|
|
@@ -1046,6 +1055,10 @@ class ModelFormComponent {
|
|
|
1046
1055
|
}
|
|
1047
1056
|
if (this.modelName && this.meta) {
|
|
1048
1057
|
this.operation = this.id ? 'update' : 'create';
|
|
1058
|
+
if (this.logging) {
|
|
1059
|
+
console.log('ModelFormComponent::init->operation', this.operation);
|
|
1060
|
+
console.log('ModelFormComponent::init->meta.getArgs', this.operation + this.capitalizeFirstLetter(this.modelName));
|
|
1061
|
+
}
|
|
1049
1062
|
this.fields = this.meta.getArgs(this.operation + this.capitalizeFirstLetter(this.modelName), {
|
|
1050
1063
|
type: GraphQLRequestType.MUTATION,
|
|
1051
1064
|
}).fields;
|
|
@@ -1410,9 +1423,10 @@ class ModelTableComponent {
|
|
|
1410
1423
|
*/
|
|
1411
1424
|
init() {
|
|
1412
1425
|
this.availableFields = [];
|
|
1426
|
+
this.camelModelName = this.kebabToCamelCase(this.modelName);
|
|
1413
1427
|
// Set query name
|
|
1414
1428
|
if (!this.config?.queryName) {
|
|
1415
|
-
this.queryName = 'find' + this.capitalizeFirstLetter(this.
|
|
1429
|
+
this.queryName = 'find' + this.capitalizeFirstLetter(this.camelModelName) + 's';
|
|
1416
1430
|
}
|
|
1417
1431
|
else {
|
|
1418
1432
|
this.queryName = this.config?.queryName;
|
|
@@ -1420,6 +1434,12 @@ class ModelTableComponent {
|
|
|
1420
1434
|
if (this.config?.tableFields) {
|
|
1421
1435
|
this.tableFields = this.config.tableFields;
|
|
1422
1436
|
}
|
|
1437
|
+
if (this.logging) {
|
|
1438
|
+
console.log('ModelTableComponent::init->modelName', this.modelName);
|
|
1439
|
+
console.log('ModelTableComponent::init->camelModelName', this.camelModelName);
|
|
1440
|
+
console.log('ModelTableComponent::init->queryName', this.queryName);
|
|
1441
|
+
console.log('ModelTableComponent::init->tableFields', this.tableFields);
|
|
1442
|
+
}
|
|
1423
1443
|
const possibleFields = this.meta.getFields(this.queryName).fields;
|
|
1424
1444
|
const keys = Object.keys(possibleFields);
|
|
1425
1445
|
const tableFieldKeys = Object.keys(this.tableFields);
|
|
@@ -1488,7 +1508,7 @@ class ModelTableComponent {
|
|
|
1488
1508
|
* modelName of the object
|
|
1489
1509
|
*/
|
|
1490
1510
|
async duplicateObject(id) {
|
|
1491
|
-
await this.cmsService.duplicateObject(id, this.
|
|
1511
|
+
await this.cmsService.duplicateObject(id, this.camelModelName);
|
|
1492
1512
|
this.loadObjects(this.availableFields);
|
|
1493
1513
|
}
|
|
1494
1514
|
/**
|
|
@@ -1496,7 +1516,7 @@ class ModelTableComponent {
|
|
|
1496
1516
|
* model
|
|
1497
1517
|
*/
|
|
1498
1518
|
async deleteObject(id) {
|
|
1499
|
-
await this.cmsService.deleteObject(id, this.
|
|
1519
|
+
await this.cmsService.deleteObject(id, this.camelModelName);
|
|
1500
1520
|
this.loadObjects(this.availableFields);
|
|
1501
1521
|
}
|
|
1502
1522
|
/**
|
|
@@ -1505,12 +1525,18 @@ class ModelTableComponent {
|
|
|
1505
1525
|
capitalizeFirstLetter(value) {
|
|
1506
1526
|
return this.cmsService.capitalizeFirstLetter(value);
|
|
1507
1527
|
}
|
|
1528
|
+
/**
|
|
1529
|
+
* Kebab to camel case string
|
|
1530
|
+
*/
|
|
1531
|
+
kebabToCamelCase(str) {
|
|
1532
|
+
return str.replace(/-./g, (match) => match[1].toUpperCase());
|
|
1533
|
+
}
|
|
1508
1534
|
}
|
|
1509
1535
|
ModelTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ModelTableComponent, deps: [{ token: i1$1.GraphQLMetaService }, { token: i1$1.GraphQLService }, { token: i1$1.CmsService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1510
|
-
ModelTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ModelTableComponent, selector: "base-model-table", inputs: { modelName: "modelName", objectId: "objectId", createMode: "createMode", logging: "logging", create: "create", update: "update", delete: "delete", duplicate: "duplicate", config: "config", fieldConfig: "fieldConfig" }, 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-4\">\n <h2 class=\"mb-0\" *ngIf=\"modelName\">\n {{
|
|
1536
|
+
ModelTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ModelTableComponent, selector: "base-model-table", inputs: { modelName: "modelName", objectId: "objectId", createMode: "createMode", logging: "logging", create: "create", update: "update", delete: "delete", duplicate: "duplicate", config: "config", fieldConfig: "fieldConfig" }, 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-4\">\n <h2 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\">\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\">\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] }}\n </ng-container>\n </td>\n </tr>\n </tbody>\n </table>\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=\"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 ></base-model-form>\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)}\n"], 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: 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"], outputs: ["finished"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
|
|
1511
1537
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ModelTableComponent, decorators: [{
|
|
1512
1538
|
type: Component,
|
|
1513
|
-
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-4\">\n <h2 class=\"mb-0\" *ngIf=\"modelName\">\n {{
|
|
1539
|
+
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-4\">\n <h2 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\">\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\">\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] }}\n </ng-container>\n </td>\n </tr>\n </tbody>\n </table>\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=\"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 ></base-model-form>\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)}\n"] }]
|
|
1514
1540
|
}], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }, { type: i1$1.CmsService }]; }, propDecorators: { modelName: [{
|
|
1515
1541
|
type: Input
|
|
1516
1542
|
}], objectId: [{
|