@lenne.tech/ng-base 14.2.6 → 14.4.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.
- package/base-components/base-components.module.d.ts +5 -4
- package/base-components/components/change-password/change-password.component.d.ts +24 -0
- package/base-components/components/input/input.component.d.ts +6 -1
- package/base-components/components/refence-input/refence-input.component.d.ts +10 -2
- package/base-components/components/tags/tags.component.d.ts +0 -2
- package/base-components/public-api.d.ts +1 -0
- package/esm2020/base-cms/pages/base-cms/base-cms.component.mjs +2 -2
- package/esm2020/base-components/base-components.module.mjs +5 -1
- package/esm2020/base-components/components/change-password/change-password.component.mjs +71 -0
- package/esm2020/base-components/components/input/input.component.mjs +17 -3
- package/esm2020/base-components/components/model-form/model-form.component.mjs +8 -2
- package/esm2020/base-components/components/model-form-sub/model-form-sub.component.mjs +3 -3
- package/esm2020/base-components/components/refence-input/refence-input.component.mjs +60 -10
- package/esm2020/base-components/components/tags/tags.component.mjs +12 -5
- package/esm2020/base-components/public-api.mjs +2 -1
- package/esm2020/base-prototype/pages/forgot-password/forgot-password.component.mjs +3 -3
- package/esm2020/base-prototype/pages/login/login.component.mjs +3 -3
- package/esm2020/base-prototype/pages/profile/profile.component.mjs +2 -2
- package/esm2020/base-prototype/pages/register/register.component.mjs +4 -4
- package/esm2020/shared/classes/graphql-meta.class.mjs +13 -2
- package/esm2020/shared/services/user.service.mjs +15 -1
- package/fesm2015/lenne.tech-ng-base-base-cms.mjs +4 -4
- package/fesm2015/lenne.tech-ng-base-base-cms.mjs.map +1 -1
- package/fesm2015/lenne.tech-ng-base-base-components.mjs +165 -24
- package/fesm2015/lenne.tech-ng-base-base-components.mjs.map +1 -1
- package/fesm2015/lenne.tech-ng-base-base-prototype.mjs +8 -8
- package/fesm2015/lenne.tech-ng-base-base-prototype.mjs.map +1 -1
- package/fesm2015/lenne.tech-ng-base-shared.mjs +26 -1
- package/fesm2015/lenne.tech-ng-base-shared.mjs.map +1 -1
- package/fesm2020/lenne.tech-ng-base-base-cms.mjs +1 -1
- package/fesm2020/lenne.tech-ng-base-base-cms.mjs.map +1 -1
- package/fesm2020/lenne.tech-ng-base-base-components.mjs +164 -21
- package/fesm2020/lenne.tech-ng-base-base-components.mjs.map +1 -1
- package/fesm2020/lenne.tech-ng-base-base-prototype.mjs +8 -8
- package/fesm2020/lenne.tech-ng-base-base-prototype.mjs.map +1 -1
- package/fesm2020/lenne.tech-ng-base-shared.mjs +26 -1
- package/fesm2020/lenne.tech-ng-base-shared.mjs.map +1 -1
- package/package.json +1 -1
- package/shared/classes/graphql-meta.class.d.ts +1 -1
- package/shared/services/user.service.d.ts +7 -0
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { EventEmitter, Component, Input, Output, ViewChild, Directive, Inject, HostListener, Pipe, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/forms';
|
|
4
|
-
import { UntypedFormControl, UntypedFormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
4
|
+
import { UntypedFormControl, UntypedFormGroup, Validators, FormControl, 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';
|
|
8
8
|
import { Subscription } from 'rxjs';
|
|
9
9
|
import * as i1$1 from '@lenne.tech/ng-base/shared';
|
|
10
|
-
import { ToastType, Sort, GraphQLRequestType, BasicUser } from '@lenne.tech/ng-base/shared';
|
|
10
|
+
import { ToastType, Sort, GraphQLRequestType, BasicUser, Validation } from '@lenne.tech/ng-base/shared';
|
|
11
11
|
import { __awaiter } from 'tslib';
|
|
12
12
|
import * as i2$1 from '@angular/router';
|
|
13
13
|
import * as i1$2 from '@angular/common/http';
|
|
@@ -18,6 +18,7 @@ class InputComponent {
|
|
|
18
18
|
this.placeholder = '';
|
|
19
19
|
this.type = 'text';
|
|
20
20
|
this.required = false;
|
|
21
|
+
this.eyeButton = false;
|
|
21
22
|
this.enter = new EventEmitter();
|
|
22
23
|
}
|
|
23
24
|
/**
|
|
@@ -29,12 +30,23 @@ class InputComponent {
|
|
|
29
30
|
this.enter.emit();
|
|
30
31
|
}
|
|
31
32
|
}
|
|
33
|
+
/**
|
|
34
|
+
* Switch input type
|
|
35
|
+
*/
|
|
36
|
+
togglePasswordType() {
|
|
37
|
+
if (this.type === 'password') {
|
|
38
|
+
this.type = 'text';
|
|
39
|
+
}
|
|
40
|
+
else {
|
|
41
|
+
this.type = 'password';
|
|
42
|
+
}
|
|
43
|
+
}
|
|
32
44
|
}
|
|
33
45
|
InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
34
|
-
InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: InputComponent, selector: "base-input", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", type: "type", required: "required" }, outputs: { enter: "enter" }, ngImport: i0, template: "<div class=\"form-group mb-3\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <input\n [id]=\"id\"\n
|
|
46
|
+
InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: InputComponent, selector: "base-input", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", type: "type", required: "required", eyeButton: "eyeButton" }, outputs: { enter: "enter" }, ngImport: i0, template: "<div class=\"form-group mb-3\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <div class=\"input-group\">\n <input\n [id]=\"id\"\n [name]=\"name\"\n class=\"form-control\"\n [type]=\"type\"\n [formControl]=\"control\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n [autocomplete]=\"autocomplete ?? null\"\n [tabIndex]=\"tabIndex ?? null\"\n [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n (keyup.enter)=\"enterEvent()\"\n [attr.aria-describedby]=\"id + 'eye-button'\"\n />\n <button\n class=\"btn btn-outline-primary\"\n type=\"button\"\n [id]=\"id + 'eye-button'\"\n (click)=\"togglePasswordType()\"\n *ngIf=\"eyeButton\"\n >\n <i class=\"bi bi-eye\" *ngIf=\"type === 'password'\"></i>\n <i class=\"bi bi-eye-slash\" *ngIf=\"type === 'text'\"></i>\n </button>\n\n <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n <div *ngIf=\"control?.errors?.['minlength']\">\n Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control.errors?.['minlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['maxlength']\">\n Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control.errors?.['maxlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n <div *ngIf=\"control?.errors?.['matching']\">Die Passw\u00F6rter m\u00FCssen \u00FCberein stimmen.</div>\n </div>\n </div>\n</div>\n", styles: [".required:after{content:\" *\"}\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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
35
47
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: InputComponent, decorators: [{
|
|
36
48
|
type: Component,
|
|
37
|
-
args: [{ selector: 'base-input', template: "<div class=\"form-group mb-3\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <input\n [id]=\"id\"\n
|
|
49
|
+
args: [{ selector: 'base-input', template: "<div class=\"form-group mb-3\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <div class=\"input-group\">\n <input\n [id]=\"id\"\n [name]=\"name\"\n class=\"form-control\"\n [type]=\"type\"\n [formControl]=\"control\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n [autocomplete]=\"autocomplete ?? null\"\n [tabIndex]=\"tabIndex ?? null\"\n [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n (keyup.enter)=\"enterEvent()\"\n [attr.aria-describedby]=\"id + 'eye-button'\"\n />\n <button\n class=\"btn btn-outline-primary\"\n type=\"button\"\n [id]=\"id + 'eye-button'\"\n (click)=\"togglePasswordType()\"\n *ngIf=\"eyeButton\"\n >\n <i class=\"bi bi-eye\" *ngIf=\"type === 'password'\"></i>\n <i class=\"bi bi-eye-slash\" *ngIf=\"type === 'text'\"></i>\n </button>\n\n <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n <div *ngIf=\"control?.errors?.['minlength']\">\n Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control.errors?.['minlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['maxlength']\">\n Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control.errors?.['maxlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n <div *ngIf=\"control?.errors?.['matching']\">Die Passw\u00F6rter m\u00FCssen \u00FCberein stimmen.</div>\n </div>\n </div>\n</div>\n", styles: [".required:after{content:\" *\"}\n"] }]
|
|
38
50
|
}], propDecorators: { id: [{
|
|
39
51
|
type: Input
|
|
40
52
|
}], name: [{
|
|
@@ -53,6 +65,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
53
65
|
type: Input
|
|
54
66
|
}], required: [{
|
|
55
67
|
type: Input
|
|
68
|
+
}], eyeButton: [{
|
|
69
|
+
type: Input
|
|
56
70
|
}], enter: [{
|
|
57
71
|
type: Output
|
|
58
72
|
}] } });
|
|
@@ -332,14 +346,21 @@ class TagsComponent {
|
|
|
332
346
|
}
|
|
333
347
|
/**
|
|
334
348
|
* Show dropdown focus
|
|
335
|
-
*
|
|
336
|
-
* @param event
|
|
337
349
|
*/
|
|
338
350
|
onFocus(event) {
|
|
351
|
+
if (this.options) {
|
|
352
|
+
if (this.options.find((e) => e.text === this.inputValue)) {
|
|
353
|
+
this.control.setErrors({ invalidReference: false });
|
|
354
|
+
}
|
|
355
|
+
else {
|
|
356
|
+
this.control.setErrors({ invalidReference: true });
|
|
357
|
+
}
|
|
358
|
+
}
|
|
339
359
|
if (event) {
|
|
340
360
|
this.selectedElement = event.target;
|
|
341
361
|
}
|
|
342
362
|
else {
|
|
363
|
+
this.control.markAsTouched();
|
|
343
364
|
setTimeout(() => {
|
|
344
365
|
this.selectedElement = null;
|
|
345
366
|
}, 250);
|
|
@@ -347,10 +368,10 @@ class TagsComponent {
|
|
|
347
368
|
}
|
|
348
369
|
}
|
|
349
370
|
TagsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
350
|
-
TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TagsComponent, selector: "base-tags", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", options: "options", custom: "custom", removeByKey: "removeByKey", required: "required" }, ngImport: i0, template: "<div class=\"form-group position-relative\" *ngIf=\"control\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n\n <div class=\"tag-wrapper\" *ngIf=\"control?.value\">\n <div class=\"tag\" *ngFor=\"let tag of control?.value\">\n {{ 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]=\"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)\">\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>\n</div>\n", styles: [".required:after{content:\" *\"}.tag-options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999}.tag-options .tag-option-item{padding:10px;cursor:pointer}.tag-options .tag-option-item:hover{color:var(--bs-primary)}.tag-wrapper{display:flex;flex-direction:row;justify-content:flex-start;column-gap:10px;row-gap:10px;flex-wrap:wrap;margin-bottom:10px;position:relative}.tag-wrapper .tag{background-color:var(--bs-light);color:var(--bs-dark);padding:10px 15px;font-style:normal;font-weight:300;font-size:14px;line-height:140%}.tag-wrapper .tag span{margin-left:20px;cursor:pointer}.tag-wrapper .tag span .bi{color:var(--bs-black)}.tag-wrapper .tag span .bi:before{vertical-align:-.175em}\n"], 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"] }] });
|
|
371
|
+
TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TagsComponent, selector: "base-tags", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", options: "options", custom: "custom", removeByKey: "removeByKey", required: "required" }, ngImport: i0, template: "<div class=\"form-group position-relative\" *ngIf=\"control\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n\n <div class=\"tag-wrapper\" *ngIf=\"control?.value\">\n <div class=\"tag\" *ngFor=\"let tag of control?.value\">\n {{ 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]=\"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)\">\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 }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.</div>\n </div>\n</div>\n", styles: [".required:after{content:\" *\"}.tag-options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999}.tag-options .tag-option-item{padding:10px;cursor:pointer}.tag-options .tag-option-item:hover{color:var(--bs-primary)}.tag-wrapper{display:flex;flex-direction:row;justify-content:flex-start;column-gap:10px;row-gap:10px;flex-wrap:wrap;margin-bottom:10px;position:relative}.tag-wrapper .tag{background-color:var(--bs-light);color:var(--bs-dark);padding:10px 15px;font-style:normal;font-weight:300;font-size:14px;line-height:140%}.tag-wrapper .tag span{margin-left:20px;cursor:pointer}.tag-wrapper .tag span .bi{color:var(--bs-black)}.tag-wrapper .tag span .bi:before{vertical-align:-.175em}\n"], 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"] }] });
|
|
351
372
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TagsComponent, decorators: [{
|
|
352
373
|
type: Component,
|
|
353
|
-
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]=\"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)\">\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>\n</div>\n", styles: [".required:after{content:\" *\"}.tag-options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999}.tag-options .tag-option-item{padding:10px;cursor:pointer}.tag-options .tag-option-item:hover{color:var(--bs-primary)}.tag-wrapper{display:flex;flex-direction:row;justify-content:flex-start;column-gap:10px;row-gap:10px;flex-wrap:wrap;margin-bottom:10px;position:relative}.tag-wrapper .tag{background-color:var(--bs-light);color:var(--bs-dark);padding:10px 15px;font-style:normal;font-weight:300;font-size:14px;line-height:140%}.tag-wrapper .tag span{margin-left:20px;cursor:pointer}.tag-wrapper .tag span .bi{color:var(--bs-black)}.tag-wrapper .tag span .bi:before{vertical-align:-.175em}\n"] }]
|
|
374
|
+
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]=\"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)\">\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 }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.</div>\n </div>\n</div>\n", styles: [".required:after{content:\" *\"}.tag-options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999}.tag-options .tag-option-item{padding:10px;cursor:pointer}.tag-options .tag-option-item:hover{color:var(--bs-primary)}.tag-wrapper{display:flex;flex-direction:row;justify-content:flex-start;column-gap:10px;row-gap:10px;flex-wrap:wrap;margin-bottom:10px;position:relative}.tag-wrapper .tag{background-color:var(--bs-light);color:var(--bs-dark);padding:10px 15px;font-style:normal;font-weight:300;font-size:14px;line-height:140%}.tag-wrapper .tag span{margin-left:20px;cursor:pointer}.tag-wrapper .tag span .bi{color:var(--bs-black)}.tag-wrapper .tag span .bi:before{vertical-align:-.175em}\n"] }]
|
|
354
375
|
}], propDecorators: { id: [{
|
|
355
376
|
type: Input
|
|
356
377
|
}], name: [{
|
|
@@ -780,7 +801,7 @@ class RefenceInputComponent {
|
|
|
780
801
|
this.method = 'find';
|
|
781
802
|
this.fields = ['id', 'name'];
|
|
782
803
|
this.valueField = 'id';
|
|
783
|
-
this.
|
|
804
|
+
this.nameField = 'name';
|
|
784
805
|
this.objects = [];
|
|
785
806
|
this.optionsForTagInput = [];
|
|
786
807
|
this.subscription = new Subscription();
|
|
@@ -802,9 +823,22 @@ class RefenceInputComponent {
|
|
|
802
823
|
* It gets the references from the GraphQL server and sets the value of the select
|
|
803
824
|
*/
|
|
804
825
|
getReferences() {
|
|
826
|
+
const fields = [...this.fields];
|
|
827
|
+
if (Array.isArray(this.nameField)) {
|
|
828
|
+
for (const field of this.nameField) {
|
|
829
|
+
if (!fields.includes(field)) {
|
|
830
|
+
fields.push(field);
|
|
831
|
+
}
|
|
832
|
+
}
|
|
833
|
+
}
|
|
834
|
+
else {
|
|
835
|
+
if (!fields.includes(this.nameField)) {
|
|
836
|
+
fields.push(this.nameField);
|
|
837
|
+
}
|
|
838
|
+
}
|
|
805
839
|
this.graphQLService
|
|
806
840
|
.graphQl(this.method, {
|
|
807
|
-
fields
|
|
841
|
+
fields,
|
|
808
842
|
type: GraphQLRequestType.QUERY,
|
|
809
843
|
})
|
|
810
844
|
.subscribe((result) => __awaiter(this, void 0, void 0, function* () {
|
|
@@ -858,7 +892,7 @@ class RefenceInputComponent {
|
|
|
858
892
|
}
|
|
859
893
|
const foundElement = this.objects.find((e) => e[this.valueField] === this.control.value);
|
|
860
894
|
if (foundElement) {
|
|
861
|
-
this.currentValue =
|
|
895
|
+
this.currentValue = this.prepareNameField(foundElement);
|
|
862
896
|
}
|
|
863
897
|
}
|
|
864
898
|
}
|
|
@@ -877,11 +911,7 @@ class RefenceInputComponent {
|
|
|
877
911
|
*/
|
|
878
912
|
filterOptions() {
|
|
879
913
|
return this.objects
|
|
880
|
-
? this.objects.filter((e) => {
|
|
881
|
-
var _a, _b, _c;
|
|
882
|
-
return (!this.currentValue || ((_a = e[this.textField]) === null || _a === void 0 ? void 0 : _a.includes(this.currentValue))) &&
|
|
883
|
-
!((_c = (_b = this.control) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.includes(e === null || e === void 0 ? void 0 : e.value));
|
|
884
|
-
})
|
|
914
|
+
? this.objects.filter((e) => { var _a, _b; return (!this.currentValue || this.checkForNameFields(e)) && !((_b = (_a = this.control) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.includes(e === null || e === void 0 ? void 0 : e.value)); })
|
|
885
915
|
: [];
|
|
886
916
|
}
|
|
887
917
|
/**
|
|
@@ -890,7 +920,7 @@ class RefenceInputComponent {
|
|
|
890
920
|
setObjectsAsOptions() {
|
|
891
921
|
this.optionsForTagInput = this.objects.map((e) => {
|
|
892
922
|
return {
|
|
893
|
-
text:
|
|
923
|
+
text: this.prepareNameField(e),
|
|
894
924
|
value: e[this.valueField],
|
|
895
925
|
};
|
|
896
926
|
});
|
|
@@ -909,12 +939,51 @@ class RefenceInputComponent {
|
|
|
909
939
|
}, 250);
|
|
910
940
|
}
|
|
911
941
|
}
|
|
942
|
+
/**
|
|
943
|
+
* Prepare string function if name fields is an array
|
|
944
|
+
*/
|
|
945
|
+
prepareNameField(object) {
|
|
946
|
+
let result;
|
|
947
|
+
if (Array.isArray(this.nameField)) {
|
|
948
|
+
for (const field of this.nameField) {
|
|
949
|
+
if (!result) {
|
|
950
|
+
result = object[field];
|
|
951
|
+
}
|
|
952
|
+
else {
|
|
953
|
+
result = result + ' ' + object[field];
|
|
954
|
+
}
|
|
955
|
+
}
|
|
956
|
+
}
|
|
957
|
+
else {
|
|
958
|
+
result = object[this.nameField];
|
|
959
|
+
}
|
|
960
|
+
return result;
|
|
961
|
+
}
|
|
962
|
+
/**
|
|
963
|
+
* Check function if name fields is an array
|
|
964
|
+
*/
|
|
965
|
+
checkForNameFields(object) {
|
|
966
|
+
var _a;
|
|
967
|
+
if (Array.isArray(this.nameField)) {
|
|
968
|
+
let result = false;
|
|
969
|
+
for (const field of this.nameField) {
|
|
970
|
+
const check = object[field].includes(this.currentValue);
|
|
971
|
+
if (check) {
|
|
972
|
+
result = check;
|
|
973
|
+
}
|
|
974
|
+
}
|
|
975
|
+
return result;
|
|
976
|
+
}
|
|
977
|
+
else {
|
|
978
|
+
return (_a = object[this.nameField]) === null || _a === void 0 ? void 0 : _a.includes(this.currentValue);
|
|
979
|
+
}
|
|
980
|
+
}
|
|
912
981
|
}
|
|
913
982
|
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 });
|
|
914
|
-
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",
|
|
983
|
+
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", 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]=\"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]=\"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']\">\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}.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"] }] });
|
|
915
984
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: RefenceInputComponent, decorators: [{
|
|
916
985
|
type: Component,
|
|
917
|
-
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
|
|
986
|
+
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 {{ prepareNameField(object) }}\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 {{ 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']\">\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}.options .option-item{padding:10px;cursor:pointer}.options .option-item:hover{color:var(--bs-primary)}\n"] }]
|
|
918
987
|
}], ctorParameters: function () { return [{ type: i1$1.GraphQLService }]; }, propDecorators: { id: [{
|
|
919
988
|
type: Input
|
|
920
989
|
}], name: [{
|
|
@@ -941,7 +1010,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
941
1010
|
type: Input
|
|
942
1011
|
}], valueField: [{
|
|
943
1012
|
type: Input
|
|
944
|
-
}],
|
|
1013
|
+
}], nameField: [{
|
|
945
1014
|
type: Input
|
|
946
1015
|
}] } });
|
|
947
1016
|
|
|
@@ -1011,10 +1080,10 @@ class ModelFormSubComponent {
|
|
|
1011
1080
|
}
|
|
1012
1081
|
}
|
|
1013
1082
|
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 });
|
|
1014
|
-
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"] }] });
|
|
1083
|
+
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 [nameField]=\"config[key]?.nameField || 'name'\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-refence-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Boolean'\">\n <base-checkbox\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-checkbox>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'LongText'\">\n <base-textarea\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-textarea>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Float'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'number'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Password'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'password'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Color'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'color'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'URL'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'url'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Email'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'email'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'DateTime'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'datetime-local'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required", "eyeButton"], outputs: ["enter"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["id", "name", "label", "placeholder", "control", "tabIndex", "required", "multiple", "search", "options"] }, { kind: "component", type: CheckboxComponent, selector: "base-checkbox", inputs: ["id", "name", "label", "value", "control", "required"] }, { kind: "component", type: TextareaComponent, selector: "base-textarea", inputs: ["id", "name", "label", "placeholder", "control", "rows", "required", "tabIndex"] }, { kind: "component", type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required"] }, { kind: "component", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["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", "nameField"] }] });
|
|
1015
1084
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ModelFormSubComponent, decorators: [{
|
|
1016
1085
|
type: Component,
|
|
1017
|
-
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 [
|
|
1086
|
+
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 [nameField]=\"config[key]?.nameField || 'name'\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-refence-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Boolean'\">\n <base-checkbox\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-checkbox>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'LongText'\">\n <base-textarea\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-textarea>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Float'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'number'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Password'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'password'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Color'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'color'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'URL'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'url'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Email'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'email'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'DateTime'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'datetime-local'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n</div>\n" }]
|
|
1018
1087
|
}], ctorParameters: function () { return [{ type: i1$1.AuthService }]; }, propDecorators: { fields: [{
|
|
1019
1088
|
type: Input
|
|
1020
1089
|
}], form: [{
|
|
@@ -1232,7 +1301,13 @@ class ModelFormComponent {
|
|
|
1232
1301
|
validators.push(Validators.email);
|
|
1233
1302
|
}
|
|
1234
1303
|
if ((config === null || config === void 0 ? void 0 : config.type) === 'Password') {
|
|
1235
|
-
validators.push(Validators.
|
|
1304
|
+
validators.push(Validators.minLength(6));
|
|
1305
|
+
}
|
|
1306
|
+
if (typeof (config === null || config === void 0 ? void 0 : config.min) === 'number') {
|
|
1307
|
+
validators.push(Validators.min(config.min));
|
|
1308
|
+
}
|
|
1309
|
+
if (typeof (config === null || config === void 0 ? void 0 : config.max) === 'number') {
|
|
1310
|
+
validators.push(Validators.max(config.max));
|
|
1236
1311
|
}
|
|
1237
1312
|
}
|
|
1238
1313
|
return validators;
|
|
@@ -1661,6 +1736,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
1661
1736
|
type: Output
|
|
1662
1737
|
}] } });
|
|
1663
1738
|
|
|
1739
|
+
class ChangePasswordComponent {
|
|
1740
|
+
constructor(formsService, userService, authService, toastService) {
|
|
1741
|
+
this.formsService = formsService;
|
|
1742
|
+
this.userService = userService;
|
|
1743
|
+
this.authService = authService;
|
|
1744
|
+
this.toastService = toastService;
|
|
1745
|
+
this.loading = false;
|
|
1746
|
+
}
|
|
1747
|
+
ngOnInit() {
|
|
1748
|
+
this.createForm();
|
|
1749
|
+
}
|
|
1750
|
+
/**
|
|
1751
|
+
* Create password change form
|
|
1752
|
+
*/
|
|
1753
|
+
createForm() {
|
|
1754
|
+
this.form = new UntypedFormGroup({
|
|
1755
|
+
password: new FormControl('', [Validators.required, Validators.minLength(6)]),
|
|
1756
|
+
passwordConfirm: new FormControl('', [Validators.required, Validators.minLength(6)]),
|
|
1757
|
+
}, { validators: Validation.match('password', 'passwordConfirm') });
|
|
1758
|
+
}
|
|
1759
|
+
/**
|
|
1760
|
+
* Submit form and change password of user
|
|
1761
|
+
*/
|
|
1762
|
+
submit() {
|
|
1763
|
+
console.log(this.form);
|
|
1764
|
+
this.loading = true;
|
|
1765
|
+
if (this.form.invalid) {
|
|
1766
|
+
this.formsService.validateAllFormFields(this.form);
|
|
1767
|
+
this.loading = false;
|
|
1768
|
+
return;
|
|
1769
|
+
}
|
|
1770
|
+
this.userService.changePassword(this.authService.currentUser.id, this.form.get('password').value).subscribe({
|
|
1771
|
+
next: (response) => {
|
|
1772
|
+
if (response) {
|
|
1773
|
+
this.form.reset();
|
|
1774
|
+
this.toastService.show({
|
|
1775
|
+
id: 'password-change-success',
|
|
1776
|
+
title: 'Erfolgreich',
|
|
1777
|
+
description: 'Passwort wurde erfolgreich geändert.',
|
|
1778
|
+
type: ToastType.SUCCESS,
|
|
1779
|
+
});
|
|
1780
|
+
}
|
|
1781
|
+
this.loading = false;
|
|
1782
|
+
},
|
|
1783
|
+
error: (error) => {
|
|
1784
|
+
this.loading = false;
|
|
1785
|
+
this.toastService.show({
|
|
1786
|
+
id: 'password-change-success',
|
|
1787
|
+
title: 'Fehlgeschlagen',
|
|
1788
|
+
description: 'Passwort ändern ist fehlgeschlagen, bitte versuche es später erneut.',
|
|
1789
|
+
type: ToastType.ERROR,
|
|
1790
|
+
});
|
|
1791
|
+
},
|
|
1792
|
+
});
|
|
1793
|
+
}
|
|
1794
|
+
}
|
|
1795
|
+
ChangePasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ChangePasswordComponent, deps: [{ token: i1$1.FormsService }, { token: i1$1.UserService }, { token: i1$1.AuthService }, { token: i1$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1796
|
+
ChangePasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ChangePasswordComponent, selector: "base-change-password", ngImport: i0, template: "<form [formGroup]=\"form\">\n <base-input\n [id]=\"'password'\"\n [label]=\"'Passwort'\"\n [required]=\"true\"\n [type]=\"'password'\"\n [control]=\"form.get('password')\"\n [tabIndex]=\"1\"\n [eyeButton]=\"true\"\n ></base-input>\n <base-input\n [id]=\"'password-confirm'\"\n [label]=\"'Passwort best\u00E4tigen'\"\n [required]=\"true\"\n [type]=\"'password'\"\n [control]=\"form.get('passwordConfirm')\"\n [tabIndex]=\"2\"\n [eyeButton]=\"true\"\n ></base-input>\n\n <div class=\"d-flex justify-content-end\">\n <div>\n <button class=\"btn btn-primary\" (click)=\"submit()\" *ngIf=\"!loading\">Passwort \u00E4ndern</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 Loading...\n </button>\n </div>\n </div>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required", "eyeButton"], outputs: ["enter"] }] });
|
|
1797
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ChangePasswordComponent, decorators: [{
|
|
1798
|
+
type: Component,
|
|
1799
|
+
args: [{ selector: 'base-change-password', template: "<form [formGroup]=\"form\">\n <base-input\n [id]=\"'password'\"\n [label]=\"'Passwort'\"\n [required]=\"true\"\n [type]=\"'password'\"\n [control]=\"form.get('password')\"\n [tabIndex]=\"1\"\n [eyeButton]=\"true\"\n ></base-input>\n <base-input\n [id]=\"'password-confirm'\"\n [label]=\"'Passwort best\u00E4tigen'\"\n [required]=\"true\"\n [type]=\"'password'\"\n [control]=\"form.get('passwordConfirm')\"\n [tabIndex]=\"2\"\n [eyeButton]=\"true\"\n ></base-input>\n\n <div class=\"d-flex justify-content-end\">\n <div>\n <button class=\"btn btn-primary\" (click)=\"submit()\" *ngIf=\"!loading\">Passwort \u00E4ndern</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 Loading...\n </button>\n </div>\n </div>\n</form>\n" }]
|
|
1800
|
+
}], ctorParameters: function () { return [{ type: i1$1.FormsService }, { type: i1$1.UserService }, { type: i1$1.AuthService }, { type: i1$1.ToastService }]; } });
|
|
1801
|
+
|
|
1664
1802
|
class BackButtonDirective {
|
|
1665
1803
|
constructor(navigation) {
|
|
1666
1804
|
this.navigation = navigation;
|
|
@@ -1704,6 +1842,7 @@ const elements = [
|
|
|
1704
1842
|
ModelFormSubComponent,
|
|
1705
1843
|
UploadImageComponent,
|
|
1706
1844
|
RefenceInputComponent,
|
|
1845
|
+
ChangePasswordComponent,
|
|
1707
1846
|
// Pipes
|
|
1708
1847
|
EllipsesPipe,
|
|
1709
1848
|
];
|
|
@@ -1730,6 +1869,7 @@ BaseComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
|
|
|
1730
1869
|
ModelFormSubComponent,
|
|
1731
1870
|
UploadImageComponent,
|
|
1732
1871
|
RefenceInputComponent,
|
|
1872
|
+
ChangePasswordComponent,
|
|
1733
1873
|
// Pipes
|
|
1734
1874
|
EllipsesPipe
|
|
1735
1875
|
], imports: [FormsModule, ReactiveFormsModule, CommonModule], exports: [
|
|
@@ -1752,6 +1892,7 @@ BaseComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
|
|
|
1752
1892
|
ModelFormSubComponent,
|
|
1753
1893
|
UploadImageComponent,
|
|
1754
1894
|
RefenceInputComponent,
|
|
1895
|
+
ChangePasswordComponent,
|
|
1755
1896
|
// Pipes
|
|
1756
1897
|
EllipsesPipe
|
|
1757
1898
|
] });
|
|
@@ -1773,5 +1914,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
1773
1914
|
* Generated bundle index. Do not edit.
|
|
1774
1915
|
*/
|
|
1775
1916
|
|
|
1776
|
-
export { BackButtonDirective, BaseComponentsModule, BreadcrumbComponent, CheckboxComponent, ContextMenuDirective, EllipsesPipe, InputComponent, LoadingBarComponent, ModelFormComponent, ModelFormSubComponent, ModelTableComponent, RefenceInputComponent, SelectComponent, SkeletonLoaderComponent, SortDirective, TagsComponent, TextareaComponent, ToastComponent, UploadImageComponent };
|
|
1917
|
+
export { BackButtonDirective, BaseComponentsModule, BreadcrumbComponent, ChangePasswordComponent, CheckboxComponent, ContextMenuDirective, EllipsesPipe, InputComponent, LoadingBarComponent, ModelFormComponent, ModelFormSubComponent, ModelTableComponent, RefenceInputComponent, SelectComponent, SkeletonLoaderComponent, SortDirective, TagsComponent, TextareaComponent, ToastComponent, UploadImageComponent };
|
|
1777
1918
|
//# sourceMappingURL=lenne.tech-ng-base-base-components.mjs.map
|