@lenne.tech/ng-base 14.12.0 → 14.13.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/esm2020/base-components/components/change-password/change-password.component.mjs +44 -24
  2. package/esm2020/base-components/components/fab-button/fab-button.component.mjs +4 -4
  3. package/esm2020/base-components/components/input/input.component.mjs +3 -3
  4. package/esm2020/base-components/components/model-form/model-form.component.mjs +3 -3
  5. package/esm2020/base-components/components/tags/tags.component.mjs +17 -11
  6. package/esm2020/base-components/components/upload-image/upload-image.component.mjs +3 -3
  7. package/esm2020/base-prototype/pages/register/register.component.mjs +4 -4
  8. package/esm2020/base-prototype/pages/reset-password/reset-password.component.mjs +4 -4
  9. package/esm2020/shared/public-api.mjs +2 -1
  10. package/esm2020/shared/services/file.service.mjs +1 -2
  11. package/esm2020/shared/validators/secure-password.validator.mjs +7 -0
  12. package/fesm2015/lenne.tech-ng-base-base-components.mjs +70 -42
  13. package/fesm2015/lenne.tech-ng-base-base-components.mjs.map +1 -1
  14. package/fesm2015/lenne.tech-ng-base-base-prototype.mjs +5 -5
  15. package/fesm2015/lenne.tech-ng-base-base-prototype.mjs.map +1 -1
  16. package/fesm2015/lenne.tech-ng-base-shared.mjs +8 -2
  17. package/fesm2015/lenne.tech-ng-base-shared.mjs.map +1 -1
  18. package/fesm2020/lenne.tech-ng-base-base-components.mjs +68 -42
  19. package/fesm2020/lenne.tech-ng-base-base-components.mjs.map +1 -1
  20. package/fesm2020/lenne.tech-ng-base-base-prototype.mjs +5 -5
  21. package/fesm2020/lenne.tech-ng-base-base-prototype.mjs.map +1 -1
  22. package/fesm2020/lenne.tech-ng-base-shared.mjs +8 -2
  23. package/fesm2020/lenne.tech-ng-base-shared.mjs.map +1 -1
  24. package/package.json +1 -1
  25. package/shared/public-api.d.ts +1 -0
  26. package/shared/validators/secure-password.validator.d.ts +2 -0
@@ -7,7 +7,7 @@ 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, fullEmail, Validation } from '@lenne.tech/ng-base/shared';
10
+ import { ToastType, Sort, GraphQLRequestType, BasicUser, fullEmail, securePasswordValidator, Validation } from '@lenne.tech/ng-base/shared';
11
11
  import * as i2$1 from '@angular/router';
12
12
  import { RouterModule } from '@angular/router';
13
13
  import * as i1$2 from '@angular/common/http';
@@ -41,10 +41,10 @@ class InputComponent {
41
41
  }
42
42
  }
43
43
  InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
44
- 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?.['invalidEmail']\">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:\" *\"}.input-group>.btn{min-width:100px}\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"] }] });
44
+ 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?.['pattern'] && type === 'tel'\">Bitte eine g\u00FCltige Telefonnummer angeben.</div>\n <div *ngIf=\"control?.errors?.['invalidEmail']\">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 *ngIf=\"control?.errors?.['invalidSecurePassword']\">\n Das Passwort ist zu unsicher. Es muss mind. 8 Zeichen lang sein und ein Gro\u00DFbustabe, ein Kleinbuchstabe, eine\n Zahl und ein Sonderzeichen enthalten.\n </div>\n </div>\n </div>\n</div>\n", styles: [".required:after{content:\" *\"}.input-group>.btn{min-width:100px}button{height:100%}\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"] }] });
45
45
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: InputComponent, decorators: [{
46
46
  type: Component,
47
- 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?.['invalidEmail']\">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:\" *\"}.input-group>.btn{min-width:100px}\n"] }]
47
+ 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?.['pattern'] && type === 'tel'\">Bitte eine g\u00FCltige Telefonnummer angeben.</div>\n <div *ngIf=\"control?.errors?.['invalidEmail']\">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 *ngIf=\"control?.errors?.['invalidSecurePassword']\">\n Das Passwort ist zu unsicher. Es muss mind. 8 Zeichen lang sein und ein Gro\u00DFbustabe, ein Kleinbuchstabe, eine\n Zahl und ein Sonderzeichen enthalten.\n </div>\n </div>\n </div>\n</div>\n", styles: [".required:after{content:\" *\"}.input-group>.btn{min-width:100px}button{height:100%}\n"] }]
48
48
  }], propDecorators: { id: [{
49
49
  type: Input
50
50
  }], name: [{
@@ -322,13 +322,14 @@ class TagsComponent {
322
322
  else {
323
323
  foundOption = this.options.find((e) => e.value === tag);
324
324
  }
325
+ this.control.markAsTouched();
325
326
  if (foundOption) {
326
327
  this.control.setValue(this.control.value.filter((item) => item !== foundOption.value));
327
328
  }
328
- else {
329
+ else if (this.control.value) {
329
330
  this.control.value.splice(-1);
330
331
  }
331
- if (this.control.value.length === 0) {
332
+ if (this.control.value?.length === 0) {
332
333
  this.control.setErrors({ required: true });
333
334
  }
334
335
  }
@@ -344,20 +345,25 @@ class TagsComponent {
344
345
  * Show dropdown focus
345
346
  */
346
347
  onFocus(event) {
347
- if (this.options) {
348
- if (this.options.find((e) => e.text === this.inputValue)) {
349
- this.control.setErrors({ invalidReference: false });
350
- }
351
- else {
352
- this.control.setErrors({ invalidReference: true });
353
- }
354
- }
355
348
  if (event) {
349
+ this.control.setErrors(null);
356
350
  this.selectedElement = event.target;
357
351
  }
358
352
  else {
359
353
  this.control.markAsTouched();
360
354
  setTimeout(() => {
355
+ if (this.options && this.inputValue) {
356
+ if (this.options.find((e) => e.text === this.inputValue)) {
357
+ this.addTag(this.inputValue);
358
+ this.control.setErrors(null);
359
+ }
360
+ else {
361
+ this.inputValue = '';
362
+ }
363
+ }
364
+ if (!this.control.value || this.control.value?.length === 0) {
365
+ this.control.setErrors({ required: true });
366
+ }
361
367
  this.selectedElement = null;
362
368
  }, 250);
363
369
  }
@@ -777,10 +783,10 @@ class UploadImageComponent {
777
783
  }
778
784
  }
779
785
  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 }, { token: i1$1.FileService }, { token: i1$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
780
- 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", defaultDragText: "defaultDragText", defaultReleaseText: "defaultReleaseText", preButtonText: "preButtonText", buttonText: "buttonText", validExtensions: "validExtensions", control: "control", url: "url", uploadPath: "uploadPath", deletePath: "deletePath", path: "path", compressOptions: "compressOptions", maxSize: "maxSize", uploadDirectly: "uploadDirectly" }, outputs: { imageUploaded: "imageUploaded", imageDeleted: "imageDeleted", fileChanged: "fileChanged" }, 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"] }] });
786
+ 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", defaultDragText: "defaultDragText", defaultReleaseText: "defaultReleaseText", preButtonText: "preButtonText", buttonText: "buttonText", validExtensions: "validExtensions", control: "control", url: "url", uploadPath: "uploadPath", deletePath: "deletePath", path: "path", compressOptions: "compressOptions", maxSize: "maxSize", uploadDirectly: "uploadDirectly" }, outputs: { imageUploaded: "imageUploaded", imageDeleted: "imageDeleted", fileChanged: "fileChanged" }, 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 && !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 && !selectedFile && !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"] }] });
781
787
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: UploadImageComponent, decorators: [{
782
788
  type: Component,
783
- 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"] }]
789
+ 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 && !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 && !selectedFile && !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"] }]
784
790
  }], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: i1$1.AuthService }, { type: i1$1.FileService }, { type: i1$1.ToastService }]; }, propDecorators: { id: [{
785
791
  type: Input
786
792
  }], name: [{
@@ -1126,15 +1132,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
1126
1132
 
1127
1133
  class FabButtonComponent {
1128
1134
  constructor() {
1129
- this.fabIcon = 'bi-three-dots';
1135
+ this.fabIcon = 'bi-list';
1130
1136
  this.toggle = false;
1131
1137
  }
1132
1138
  }
1133
1139
  FabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: FabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1134
- FabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: FabButtonComponent, selector: "base-fab-button", inputs: { fabIcon: "fabIcon", buttons: "buttons" }, ngImport: i0, template: "<div class=\"fab-container\" [ngClass]=\"{ 'fab-container-active': toggle }\">\n <div class=\"fab shadow\">\n <div class=\"fab-content\" (click)=\"toggle = !toggle\">\n <i class=\"bi\" [ngClass]=\"fabIcon\"></i>\n </div>\n </div>\n <div\n class=\"sub-button shadow\"\n *ngFor=\"let button of buttons\"\n (click)=\"button.event.emit(true); toggle = !toggle\"\n [ngStyle]=\"{ backgroundColor: button.color }\"\n >\n <a [routerLink]=\"button.routerLink\">\n <i class=\"bi\" [ngClass]=\"button.icon\"></i>\n </a>\n </div>\n</div>\n", styles: [".fab-container{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;-webkit-user-select:none;user-select:none;position:absolute;bottom:10px;right:10px}.fab-container-active{height:100%}.fab-container-active .sub-button:nth-child(2){transform:translateY(-80px)}.fab-container-active .sub-button:nth-child(3){transform:translateY(-140px)}.fab-container-active .sub-button:nth-child(4){transform:translateY(-200px)}.fab-container-active .sub-button:nth-child(5){transform:translateY(-260px)}.fab-container-active .sub-button:nth-child(6){transform:translateY(-320px)}.fab-container .fab{position:relative;height:60px;width:60px;background-color:var(--bs-primary);border-radius:50%;z-index:2}.fab-container .fab:before{content:\" \";position:absolute;bottom:0;right:0;height:30px;width:30px;background-color:inherit;border-radius:0 0 10px;z-index:-1}.fab-container .fab .fab-content{display:flex;align-items:center;justify-content:center;height:inherit;width:inherit;border-radius:50%}.fab-container .fab .fab-content .bi{color:#fff;font-size:32px}.fab-container .sub-button{position:absolute;display:flex;align-items:center;justify-content:center;bottom:10px;right:10px;height:40px;width:40px;background-color:var(--bs-primary);border-radius:50%;transition:all .3s ease}.fab-container .sub-button:hover{cursor:pointer}.fab-container .sub-button .bi{color:#fff;padding-top:6px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }] });
1140
+ FabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: FabButtonComponent, selector: "base-fab-button", inputs: { fabIcon: "fabIcon", buttons: "buttons" }, ngImport: i0, template: "<div class=\"fab-container\" [ngClass]=\"{ 'fab-container-active': toggle }\">\n <div class=\"fab shadow\">\n <div class=\"fab-content\" (click)=\"toggle = !toggle\">\n <i class=\"bi bi-x-lg\" *ngIf=\"toggle\"></i>\n <i class=\"bi\" *ngIf=\"!toggle\" [ngClass]=\"fabIcon\"></i>\n </div>\n </div>\n <div\n class=\"sub-button shadow\"\n *ngFor=\"let button of buttons\"\n (click)=\"button.event.emit(true); toggle = !toggle\"\n [ngStyle]=\"{ backgroundColor: button.color }\"\n >\n <a [routerLink]=\"button.routerLink\">\n <i class=\"bi\" [ngClass]=\"button.icon\"></i>\n </a>\n </div>\n</div>\n", styles: [".fab-container{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;-webkit-user-select:none;user-select:none;position:absolute;bottom:10px;right:10px}.fab-container-active{height:100%}.fab-container-active .sub-button:nth-child(2){transform:translateY(-80px)}.fab-container-active .sub-button:nth-child(3){transform:translateY(-140px)}.fab-container-active .sub-button:nth-child(4){transform:translateY(-200px)}.fab-container-active .sub-button:nth-child(5){transform:translateY(-260px)}.fab-container-active .sub-button:nth-child(6){transform:translateY(-320px)}.fab-container .fab{position:relative;height:60px;width:60px;background-color:var(--bs-primary);border-radius:50%;z-index:2}.fab-container .fab:before{content:\" \";position:absolute;bottom:0;right:0;height:30px;width:30px;background-color:inherit;border-radius:0 0 10px;z-index:-1}.fab-container .fab .fab-content{display:flex;align-items:center;justify-content:center;height:inherit;width:inherit;border-radius:50%}.fab-container .fab .fab-content .bi{color:#fff;font-size:32px}.fab-container .sub-button{position:absolute;display:flex;align-items:center;justify-content:center;bottom:10px;right:10px;height:40px;width:40px;background-color:var(--bs-primary);border-radius:50%;transition:all .3s ease}.fab-container .sub-button:hover{cursor:pointer}.fab-container .sub-button .bi{color:#fff;padding-top:6px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }] });
1135
1141
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: FabButtonComponent, decorators: [{
1136
1142
  type: Component,
1137
- args: [{ selector: 'base-fab-button', template: "<div class=\"fab-container\" [ngClass]=\"{ 'fab-container-active': toggle }\">\n <div class=\"fab shadow\">\n <div class=\"fab-content\" (click)=\"toggle = !toggle\">\n <i class=\"bi\" [ngClass]=\"fabIcon\"></i>\n </div>\n </div>\n <div\n class=\"sub-button shadow\"\n *ngFor=\"let button of buttons\"\n (click)=\"button.event.emit(true); toggle = !toggle\"\n [ngStyle]=\"{ backgroundColor: button.color }\"\n >\n <a [routerLink]=\"button.routerLink\">\n <i class=\"bi\" [ngClass]=\"button.icon\"></i>\n </a>\n </div>\n</div>\n", styles: [".fab-container{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;-webkit-user-select:none;user-select:none;position:absolute;bottom:10px;right:10px}.fab-container-active{height:100%}.fab-container-active .sub-button:nth-child(2){transform:translateY(-80px)}.fab-container-active .sub-button:nth-child(3){transform:translateY(-140px)}.fab-container-active .sub-button:nth-child(4){transform:translateY(-200px)}.fab-container-active .sub-button:nth-child(5){transform:translateY(-260px)}.fab-container-active .sub-button:nth-child(6){transform:translateY(-320px)}.fab-container .fab{position:relative;height:60px;width:60px;background-color:var(--bs-primary);border-radius:50%;z-index:2}.fab-container .fab:before{content:\" \";position:absolute;bottom:0;right:0;height:30px;width:30px;background-color:inherit;border-radius:0 0 10px;z-index:-1}.fab-container .fab .fab-content{display:flex;align-items:center;justify-content:center;height:inherit;width:inherit;border-radius:50%}.fab-container .fab .fab-content .bi{color:#fff;font-size:32px}.fab-container .sub-button{position:absolute;display:flex;align-items:center;justify-content:center;bottom:10px;right:10px;height:40px;width:40px;background-color:var(--bs-primary);border-radius:50%;transition:all .3s ease}.fab-container .sub-button:hover{cursor:pointer}.fab-container .sub-button .bi{color:#fff;padding-top:6px}\n"] }]
1143
+ args: [{ selector: 'base-fab-button', template: "<div class=\"fab-container\" [ngClass]=\"{ 'fab-container-active': toggle }\">\n <div class=\"fab shadow\">\n <div class=\"fab-content\" (click)=\"toggle = !toggle\">\n <i class=\"bi bi-x-lg\" *ngIf=\"toggle\"></i>\n <i class=\"bi\" *ngIf=\"!toggle\" [ngClass]=\"fabIcon\"></i>\n </div>\n </div>\n <div\n class=\"sub-button shadow\"\n *ngFor=\"let button of buttons\"\n (click)=\"button.event.emit(true); toggle = !toggle\"\n [ngStyle]=\"{ backgroundColor: button.color }\"\n >\n <a [routerLink]=\"button.routerLink\">\n <i class=\"bi\" [ngClass]=\"button.icon\"></i>\n </a>\n </div>\n</div>\n", styles: [".fab-container{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;-webkit-user-select:none;user-select:none;position:absolute;bottom:10px;right:10px}.fab-container-active{height:100%}.fab-container-active .sub-button:nth-child(2){transform:translateY(-80px)}.fab-container-active .sub-button:nth-child(3){transform:translateY(-140px)}.fab-container-active .sub-button:nth-child(4){transform:translateY(-200px)}.fab-container-active .sub-button:nth-child(5){transform:translateY(-260px)}.fab-container-active .sub-button:nth-child(6){transform:translateY(-320px)}.fab-container .fab{position:relative;height:60px;width:60px;background-color:var(--bs-primary);border-radius:50%;z-index:2}.fab-container .fab:before{content:\" \";position:absolute;bottom:0;right:0;height:30px;width:30px;background-color:inherit;border-radius:0 0 10px;z-index:-1}.fab-container .fab .fab-content{display:flex;align-items:center;justify-content:center;height:inherit;width:inherit;border-radius:50%}.fab-container .fab .fab-content .bi{color:#fff;font-size:32px}.fab-container .sub-button{position:absolute;display:flex;align-items:center;justify-content:center;bottom:10px;right:10px;height:40px;width:40px;background-color:var(--bs-primary);border-radius:50%;transition:all .3s ease}.fab-container .sub-button:hover{cursor:pointer}.fab-container .sub-button .bi{color:#fff;padding-top:6px}\n"] }]
1138
1144
  }], propDecorators: { fabIcon: [{
1139
1145
  type: Input
1140
1146
  }], buttons: [{
@@ -1573,9 +1579,9 @@ class ModelFormComponent {
1573
1579
  this.fabButtons.push({ icon: 'bi-back', color: 'var(--bs-info)', event });
1574
1580
  event.subscribe(() => this.duplicateObject());
1575
1581
  }
1576
- if (this.operation === 'update') {
1582
+ if (this.operation === 'update' && this.delete) {
1577
1583
  const event = new EventEmitter();
1578
- this.fabButtons.push({ icon: 'bi-x-lg', color: 'var(--bs-danger)', event });
1584
+ this.fabButtons.push({ icon: 'bi-trash3', color: 'var(--bs-danger)', event });
1579
1585
  event.subscribe(() => this.deleteObject());
1580
1586
  }
1581
1587
  }
@@ -1863,8 +1869,9 @@ class ChangePasswordComponent {
1863
1869
  */
1864
1870
  createForm() {
1865
1871
  this.form = new UntypedFormGroup({
1866
- password: new FormControl('', [Validators.required, Validators.minLength(6)]),
1867
- passwordConfirm: new FormControl('', [Validators.required, Validators.minLength(6)]),
1872
+ current: new FormControl('', [Validators.required]),
1873
+ password: new FormControl('', [Validators.required, securePasswordValidator()]),
1874
+ passwordConfirm: new FormControl('', [Validators.required, securePasswordValidator()]),
1868
1875
  }, { validators: Validation.match('password', 'passwordConfirm') });
1869
1876
  }
1870
1877
  /**
@@ -1872,41 +1879,60 @@ class ChangePasswordComponent {
1872
1879
  */
1873
1880
  submit() {
1874
1881
  this.loading = true;
1875
- if (this.form.invalid) {
1876
- this.formsService.validateAllFormFields(this.form);
1877
- this.loading = false;
1878
- return;
1879
- }
1880
- this.userService.changePassword(this.authService.currentUser.id, this.form.get('password').value).subscribe({
1881
- next: (response) => {
1882
- if (response) {
1883
- this.form.reset();
1884
- this.toastService.show({
1885
- id: 'password-change-success',
1886
- title: 'Erfolgreich',
1887
- description: 'Passwort wurde erfolgreich geändert.',
1888
- type: ToastType.SUCCESS,
1889
- });
1882
+ this.userService
1883
+ .login({
1884
+ email: this.authService.currentUser.email,
1885
+ password: this.form.get('current').value,
1886
+ })
1887
+ .subscribe({
1888
+ next: () => {
1889
+ if (this.form.invalid) {
1890
+ this.formsService.validateAllFormFields(this.form);
1891
+ this.loading = false;
1892
+ return;
1890
1893
  }
1891
- this.loading = false;
1894
+ this.userService.changePassword(this.authService.currentUser.id, this.form.get('password').value).subscribe({
1895
+ next: (response) => {
1896
+ if (response) {
1897
+ this.form.reset();
1898
+ this.toastService.show({
1899
+ id: 'password-change-success',
1900
+ title: 'Erfolgreich',
1901
+ description: 'Passwort wurde erfolgreich geändert.',
1902
+ type: ToastType.SUCCESS,
1903
+ });
1904
+ }
1905
+ this.loading = false;
1906
+ },
1907
+ error: () => {
1908
+ this.loading = false;
1909
+ this.toastService.show({
1910
+ id: 'password-change-error',
1911
+ title: 'Fehlgeschlagen',
1912
+ description: 'Passwort ändern ist fehlgeschlagen, bitte versuche es später erneut.',
1913
+ type: ToastType.ERROR,
1914
+ });
1915
+ },
1916
+ });
1892
1917
  },
1893
- error: (error) => {
1918
+ error: () => {
1894
1919
  this.loading = false;
1895
1920
  this.toastService.show({
1896
1921
  id: 'password-change-error',
1897
1922
  title: 'Fehlgeschlagen',
1898
- description: 'Passwort ändern ist fehlgeschlagen, bitte versuche es später erneut.',
1923
+ description: 'Passwort ändern ist fehlgeschlagen. Falsches Passwort.',
1899
1924
  type: ToastType.ERROR,
1925
+ errorCode: '401',
1900
1926
  });
1901
1927
  },
1902
1928
  });
1903
1929
  }
1904
1930
  }
1905
1931
  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 });
1906
- ChangePasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ChangePasswordComponent, selector: "base-change-password", ngImport: i0, template: "<h3>Passwort \u00E4ndern</h3>\n\n<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"] }] });
1932
+ ChangePasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ChangePasswordComponent, selector: "base-change-password", ngImport: i0, template: "<h3>Passwort \u00E4ndern</h3>\n\n<form [formGroup]=\"form\">\n <base-input\n [id]=\"'Aktuelles Passwort'\"\n [label]=\"'Passwort'\"\n [required]=\"true\"\n [type]=\"'password'\"\n [control]=\"form.get('current')\"\n [tabIndex]=\"1\"\n [eyeButton]=\"true\"\n ></base-input>\n <base-input\n [id]=\"'password'\"\n [label]=\"'Neues Passwort'\"\n [required]=\"true\"\n [type]=\"'password'\"\n [control]=\"form.get('password')\"\n [tabIndex]=\"2\"\n [eyeButton]=\"true\"\n ></base-input>\n <base-input\n [id]=\"'password-confirm'\"\n [label]=\"'Neues Passwort best\u00E4tigen'\"\n [required]=\"true\"\n [type]=\"'password'\"\n [control]=\"form.get('passwordConfirm')\"\n [tabIndex]=\"3\"\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"] }] });
1907
1933
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ChangePasswordComponent, decorators: [{
1908
1934
  type: Component,
1909
- args: [{ selector: 'base-change-password', template: "<h3>Passwort \u00E4ndern</h3>\n\n<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" }]
1935
+ args: [{ selector: 'base-change-password', template: "<h3>Passwort \u00E4ndern</h3>\n\n<form [formGroup]=\"form\">\n <base-input\n [id]=\"'Aktuelles Passwort'\"\n [label]=\"'Passwort'\"\n [required]=\"true\"\n [type]=\"'password'\"\n [control]=\"form.get('current')\"\n [tabIndex]=\"1\"\n [eyeButton]=\"true\"\n ></base-input>\n <base-input\n [id]=\"'password'\"\n [label]=\"'Neues Passwort'\"\n [required]=\"true\"\n [type]=\"'password'\"\n [control]=\"form.get('password')\"\n [tabIndex]=\"2\"\n [eyeButton]=\"true\"\n ></base-input>\n <base-input\n [id]=\"'password-confirm'\"\n [label]=\"'Neues Passwort best\u00E4tigen'\"\n [required]=\"true\"\n [type]=\"'password'\"\n [control]=\"form.get('passwordConfirm')\"\n [tabIndex]=\"3\"\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" }]
1910
1936
  }], ctorParameters: function () { return [{ type: i1$1.FormsService }, { type: i1$1.UserService }, { type: i1$1.AuthService }, { type: i1$1.ToastService }]; } });
1911
1937
 
1912
1938
  class DeleteAccountComponent {