@lenne.tech/ng-base 14.31.0 → 14.32.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 +2 -1
- package/base-components/components/input/input.component.d.ts +2 -4
- package/base-components/components/refence-input/refence-input.component.d.ts +2 -4
- package/base-components/components/select/select.component.d.ts +2 -4
- package/base-components/components/tags/tags.component.d.ts +1 -4
- package/base-components/components/textarea/textarea.component.d.ts +1 -4
- package/base-components/components/upload-image/upload-image.component.d.ts +2 -4
- package/esm2020/base-components/base-components.module.mjs +4 -3
- package/esm2020/base-components/components/input/input.component.mjs +6 -14
- package/esm2020/base-components/components/refence-input/refence-input.component.mjs +7 -15
- package/esm2020/base-components/components/select/select.component.mjs +4 -12
- package/esm2020/base-components/components/tags/tags.component.mjs +6 -14
- package/esm2020/base-components/components/textarea/textarea.component.mjs +6 -14
- package/esm2020/base-components/components/upload-image/upload-image.component.mjs +5 -13
- package/fesm2015/lenne.tech-ng-base-base-components.mjs +21 -68
- package/fesm2015/lenne.tech-ng-base-base-components.mjs.map +1 -1
- package/fesm2020/lenne.tech-ng-base-base-components.mjs +21 -68
- package/fesm2020/lenne.tech-ng-base-base-components.mjs.map +1 -1
- package/package.json +2 -1
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, Component,
|
|
2
|
+
import { EventEmitter, Component, Input, Output, ViewChild, Directive, Inject, HostListener, Pipe, ViewContainerRef, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/forms';
|
|
4
4
|
import { FormControl, UntypedFormControl, UntypedFormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
5
5
|
import * as i2 from '@angular/common';
|
|
6
6
|
import { DOCUMENT, CommonModule } from '@angular/common';
|
|
7
|
-
import
|
|
7
|
+
import * as i3 from '@ng-bootstrap/ng-bootstrap';
|
|
8
|
+
import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
|
|
8
9
|
import { trigger, transition, query, style, animate } from '@angular/animations';
|
|
9
10
|
import { Subscription } from 'rxjs';
|
|
10
11
|
import * as i1$1 from '@lenne.tech/ng-base/shared';
|
|
@@ -25,11 +26,6 @@ class InputComponent {
|
|
|
25
26
|
this.objectPath = '';
|
|
26
27
|
this.enter = new EventEmitter();
|
|
27
28
|
}
|
|
28
|
-
ngAfterViewInit() {
|
|
29
|
-
if (this.toolTipElement && this.infoText) {
|
|
30
|
-
new Tooltip(this.toolTipElement.nativeElement);
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
29
|
/**
|
|
34
30
|
* If the control has a value, emit the enter event
|
|
35
31
|
*/
|
|
@@ -52,14 +48,11 @@ class InputComponent {
|
|
|
52
48
|
}
|
|
53
49
|
}
|
|
54
50
|
InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
55
|
-
InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: InputComponent, selector: "base-input", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", type: "type", required: "required", eyeButton: "eyeButton", objectPath: "objectPath" }, outputs: { enter: "enter" },
|
|
51
|
+
InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: InputComponent, selector: "base-input", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", type: "type", required: "required", eyeButton: "eyeButton", objectPath: "objectPath" }, outputs: { enter: "enter" }, ngImport: i0, template: "<div class=\"form-group mb-3\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n </div>\n <div class=\"input-group\">\n <input\n [id]=\"objectPath ? objectPath + '.' + 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, ein Gro\u00DFbustabe, ein Kleinbuchstabe, eine Zahl\n 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"] }, { kind: "directive", type: i3.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
|
|
56
52
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: InputComponent, decorators: [{
|
|
57
53
|
type: Component,
|
|
58
|
-
args: [{ selector: 'base-input', template: "<div class=\"form-group mb-3\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <i
|
|
59
|
-
}], propDecorators: {
|
|
60
|
-
type: ViewChild,
|
|
61
|
-
args: ['tooltip']
|
|
62
|
-
}], id: [{
|
|
54
|
+
args: [{ selector: 'base-input', template: "<div class=\"form-group mb-3\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n </div>\n <div class=\"input-group\">\n <input\n [id]=\"objectPath ? objectPath + '.' + 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, ein Gro\u00DFbustabe, ein Kleinbuchstabe, eine Zahl\n 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"] }]
|
|
55
|
+
}], propDecorators: { id: [{
|
|
63
56
|
type: Input
|
|
64
57
|
}], name: [{
|
|
65
58
|
type: Input
|
|
@@ -101,23 +94,15 @@ class SelectComponent {
|
|
|
101
94
|
this.select.nativeElement.setAttribute('multiple', true);
|
|
102
95
|
}
|
|
103
96
|
}
|
|
104
|
-
ngAfterViewInit() {
|
|
105
|
-
if (this.toolTipElement && this.infoText) {
|
|
106
|
-
new Tooltip(this.toolTipElement.nativeElement);
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
97
|
}
|
|
110
98
|
SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
111
|
-
SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SelectComponent, selector: "base-select", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", placeholder: "placeholder", objectPath: "objectPath", control: "control", tabIndex: "tabIndex", required: "required", multiple: "multiple", search: "search", options: "options" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }
|
|
99
|
+
SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SelectComponent, selector: "base-select", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", placeholder: "placeholder", objectPath: "objectPath", control: "control", tabIndex: "tabIndex", required: "required", multiple: "multiple", search: "search", options: "options" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], ngImport: i0, template: "<div class=\"form-group mb-3\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n </div>\n <select\n #select\n [id]=\"objectPath ? objectPath + '.' + id : id\"\n [name]=\"name\"\n class=\"form-select\"\n [attr.aria-label]=\"placeholder\"\n [attr.data-live-search]=\"search\"\n [formControl]=\"control\"\n [required]=\"required\"\n [tabIndex]=\"tabIndex ?? null\"\n [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n >\n <option [ngValue]=\"null\" disabled selected>{{ placeholder }}</option>\n <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\n {{ option.text }}\n </option>\n </select>\n\n <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n <div *ngIf=\"control?.errors?.['minlength']\">\n Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['maxlength']\">\n Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n </div>\n</div>\n", styles: [".required:after{content:\" *\"}\n"], 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.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.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: "directive", type: i3.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
|
|
112
100
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SelectComponent, decorators: [{
|
|
113
101
|
type: Component,
|
|
114
|
-
args: [{ selector: 'base-select', template: "<div class=\"form-group mb-3\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <i
|
|
102
|
+
args: [{ selector: 'base-select', template: "<div class=\"form-group mb-3\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n </div>\n <select\n #select\n [id]=\"objectPath ? objectPath + '.' + id : id\"\n [name]=\"name\"\n class=\"form-select\"\n [attr.aria-label]=\"placeholder\"\n [attr.data-live-search]=\"search\"\n [formControl]=\"control\"\n [required]=\"required\"\n [tabIndex]=\"tabIndex ?? null\"\n [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n >\n <option [ngValue]=\"null\" disabled selected>{{ placeholder }}</option>\n <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\n {{ option.text }}\n </option>\n </select>\n\n <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n <div *ngIf=\"control?.errors?.['minlength']\">\n Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['maxlength']\">\n Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n </div>\n</div>\n", styles: [".required:after{content:\" *\"}\n"] }]
|
|
115
103
|
}], propDecorators: { select: [{
|
|
116
104
|
type: ViewChild,
|
|
117
105
|
args: ['select']
|
|
118
|
-
}], toolTipElement: [{
|
|
119
|
-
type: ViewChild,
|
|
120
|
-
args: ['tooltip']
|
|
121
106
|
}], id: [{
|
|
122
107
|
type: Input
|
|
123
108
|
}], name: [{
|
|
@@ -179,21 +164,13 @@ class TextareaComponent {
|
|
|
179
164
|
this.required = false;
|
|
180
165
|
this.objectPath = '';
|
|
181
166
|
}
|
|
182
|
-
ngAfterViewInit() {
|
|
183
|
-
if (this.toolTipElement && this.infoText) {
|
|
184
|
-
new Tooltip(this.toolTipElement.nativeElement);
|
|
185
|
-
}
|
|
186
|
-
}
|
|
187
167
|
}
|
|
188
168
|
TextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
189
|
-
TextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TextareaComponent, selector: "base-textarea", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", placeholder: "placeholder", control: "control", rows: "rows", required: "required", tabIndex: "tabIndex", objectPath: "objectPath" },
|
|
169
|
+
TextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TextareaComponent, selector: "base-textarea", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", placeholder: "placeholder", control: "control", rows: "rows", required: "required", tabIndex: "tabIndex", objectPath: "objectPath" }, ngImport: i0, template: "<div class=\"form-group mb-3\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n </div>\n\n <textarea\n class=\"form-control\"\n [id]=\"objectPath ? objectPath + '.' + id : id\"\n [name]=\"name\"\n [rows]=\"rows\"\n [placeholder]=\"placeholder\"\n [formControl]=\"control\"\n [tabIndex]=\"tabIndex ?? null\"\n [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n ></textarea>\n\n <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n <div *ngIf=\"control?.errors?.['minlength']\">\n Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['maxlength']\">\n Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n </div>\n </div>\n</div>\n", styles: [".required:after{content:\" *\"}\n"], 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.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"] }, { kind: "directive", type: i3.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
|
|
190
170
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
191
171
|
type: Component,
|
|
192
|
-
args: [{ selector: 'base-textarea', template: "<div class=\"form-group mb-3\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <i
|
|
193
|
-
}], propDecorators: {
|
|
194
|
-
type: ViewChild,
|
|
195
|
-
args: ['tooltip']
|
|
196
|
-
}], id: [{
|
|
172
|
+
args: [{ selector: 'base-textarea', template: "<div class=\"form-group mb-3\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n </div>\n\n <textarea\n class=\"form-control\"\n [id]=\"objectPath ? objectPath + '.' + id : id\"\n [name]=\"name\"\n [rows]=\"rows\"\n [placeholder]=\"placeholder\"\n [formControl]=\"control\"\n [tabIndex]=\"tabIndex ?? null\"\n [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n ></textarea>\n\n <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n <div *ngIf=\"control?.errors?.['minlength']\">\n Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['maxlength']\">\n Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n </div>\n </div>\n</div>\n", styles: [".required:after{content:\" *\"}\n"] }]
|
|
173
|
+
}], propDecorators: { id: [{
|
|
197
174
|
type: Input
|
|
198
175
|
}], name: [{
|
|
199
176
|
type: Input
|
|
@@ -287,11 +264,6 @@ class TagsComponent {
|
|
|
287
264
|
this.validators = [];
|
|
288
265
|
this.inputValue = '';
|
|
289
266
|
}
|
|
290
|
-
ngAfterViewInit() {
|
|
291
|
-
if (this.toolTipElement && this.infoText) {
|
|
292
|
-
new Tooltip(this.toolTipElement.nativeElement);
|
|
293
|
-
}
|
|
294
|
-
}
|
|
295
267
|
/**
|
|
296
268
|
* Convert id into text field
|
|
297
269
|
*/
|
|
@@ -463,14 +435,11 @@ class TagsComponent {
|
|
|
463
435
|
}
|
|
464
436
|
}
|
|
465
437
|
TagsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
466
|
-
TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TagsComponent, selector: "base-tags", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", options: "options", custom: "custom", removeByKey: "removeByKey", required: "required", objectPath: "objectPath", validators: "validators" },
|
|
438
|
+
TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TagsComponent, selector: "base-tags", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", options: "options", custom: "custom", removeByKey: "removeByKey", required: "required", objectPath: "objectPath", validators: "validators" }, ngImport: i0, template: "<div class=\"form-group position-relative\" *ngIf=\"control\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n </div>\n\n <div class=\"tag-wrapper\" *ngIf=\"control?.value\">\n <div class=\"tag\" *ngFor=\"let tag of control?.value\">\n {{ getReadableTag(tag) }}\n <span (click)=\"removeTag(tag)\"><i class=\"bi bi-x-circle\"></i></span>\n </div>\n </div>\n <input [formControl]=\"control\" hidden />\n <input\n [id]=\"objectPath ? objectPath + '.' + id : id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n [(ngModel)]=\"inputValue\"\n [autocomplete]=\"autocomplete ?? null\"\n [tabIndex]=\"tabIndex ?? null\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onFocus()\"\n type=\"text\"\n class=\"form-control\"\n (keyup)=\"enterKey($event)\"\n />\n\n <div class=\"tag-options\" *ngIf=\"options && selectedElement\">\n <div class=\"tag-option-item\" *ngFor=\"let option of filterOptions()\" (click)=\"addTag(option?.text, true, true)\">\n {{ option?.text }}\n </div>\n </div>\n\n <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n <div *ngIf=\"control?.errors?.['invalidReference'] && inputValue\">\n {{ inputValue }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.\n </div>\n <div *ngIf=\"control?.errors?.['email']\">Bitte gib eine g\u00FCltige E-Mail Adresse ein.</div>\n </div>\n</div>\n", styles: [".required:after{content:\" *\"}.tag-options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999;max-height:200px;overflow-y:scroll}.tag-options .tag-option-item{padding:10px;cursor:pointer}.tag-options .tag-option-item:hover{color:var(--bs-primary)}.tag-wrapper{display:flex;flex-direction:row;justify-content:flex-start;column-gap:10px;row-gap:10px;flex-wrap:wrap;margin-bottom:10px;position:relative}.tag-wrapper .tag{background-color:var(--bs-light);color:var(--bs-dark);padding:10px 15px;font-style:normal;font-weight:300;font-size:14px;line-height:140%}.tag-wrapper .tag span{margin-left:20px;cursor:pointer}.tag-wrapper .tag span .bi{color:var(--bs-black)}.tag-wrapper .tag span .bi:before{vertical-align:-.175em}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
|
|
467
439
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TagsComponent, decorators: [{
|
|
468
440
|
type: Component,
|
|
469
|
-
args: [{ selector: 'base-tags', template: "<div class=\"form-group position-relative\" *ngIf=\"control\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <i
|
|
470
|
-
}], propDecorators: {
|
|
471
|
-
type: ViewChild,
|
|
472
|
-
args: ['tooltip']
|
|
473
|
-
}], id: [{
|
|
441
|
+
args: [{ selector: 'base-tags', template: "<div class=\"form-group position-relative\" *ngIf=\"control\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n </div>\n\n <div class=\"tag-wrapper\" *ngIf=\"control?.value\">\n <div class=\"tag\" *ngFor=\"let tag of control?.value\">\n {{ getReadableTag(tag) }}\n <span (click)=\"removeTag(tag)\"><i class=\"bi bi-x-circle\"></i></span>\n </div>\n </div>\n <input [formControl]=\"control\" hidden />\n <input\n [id]=\"objectPath ? objectPath + '.' + id : id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n [(ngModel)]=\"inputValue\"\n [autocomplete]=\"autocomplete ?? null\"\n [tabIndex]=\"tabIndex ?? null\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onFocus()\"\n type=\"text\"\n class=\"form-control\"\n (keyup)=\"enterKey($event)\"\n />\n\n <div class=\"tag-options\" *ngIf=\"options && selectedElement\">\n <div class=\"tag-option-item\" *ngFor=\"let option of filterOptions()\" (click)=\"addTag(option?.text, true, true)\">\n {{ option?.text }}\n </div>\n </div>\n\n <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n <div *ngIf=\"control?.errors?.['invalidReference'] && inputValue\">\n {{ inputValue }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.\n </div>\n <div *ngIf=\"control?.errors?.['email']\">Bitte gib eine g\u00FCltige E-Mail Adresse ein.</div>\n </div>\n</div>\n", styles: [".required:after{content:\" *\"}.tag-options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999;max-height:200px;overflow-y:scroll}.tag-options .tag-option-item{padding:10px;cursor:pointer}.tag-options .tag-option-item:hover{color:var(--bs-primary)}.tag-wrapper{display:flex;flex-direction:row;justify-content:flex-start;column-gap:10px;row-gap:10px;flex-wrap:wrap;margin-bottom:10px;position:relative}.tag-wrapper .tag{background-color:var(--bs-light);color:var(--bs-dark);padding:10px 15px;font-style:normal;font-weight:300;font-size:14px;line-height:140%}.tag-wrapper .tag span{margin-left:20px;cursor:pointer}.tag-wrapper .tag span .bi{color:var(--bs-black)}.tag-wrapper .tag span .bi:before{vertical-align:-.175em}\n"] }]
|
|
442
|
+
}], propDecorators: { id: [{
|
|
474
443
|
type: Input
|
|
475
444
|
}], name: [{
|
|
476
445
|
type: Input
|
|
@@ -784,11 +753,6 @@ class UploadImageComponent {
|
|
|
784
753
|
// Set default options for cropping
|
|
785
754
|
this.cOptions = Object.assign({ maintainAspectRatio: true, aspectRatio: 4 / 3, onlyScaleDown: false, imageQuality: 92, autoCrop: true, alignImage: 'center', format: 'jpeg' }, this.croppingOptions);
|
|
786
755
|
}
|
|
787
|
-
ngAfterViewInit() {
|
|
788
|
-
if (this.toolTipElement && this.infoText) {
|
|
789
|
-
new Tooltip(this.toolTipElement.nativeElement);
|
|
790
|
-
}
|
|
791
|
-
}
|
|
792
756
|
/**
|
|
793
757
|
* The dragOver function is called when the user drags a file over the dropzone. It prevents the default action of the
|
|
794
758
|
* event, and sets the dragText to 'Release to Upload' and the dragActive to true
|
|
@@ -1008,16 +972,13 @@ class UploadImageComponent {
|
|
|
1008
972
|
}
|
|
1009
973
|
}
|
|
1010
974
|
UploadImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", 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 });
|
|
1011
|
-
UploadImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: UploadImageComponent, selector: "base-upload-image", inputs: { id: "id", name: "name", infoText: "infoText", 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", croppingImage: "croppingImage", croppingOptions: "croppingOptions", objectPath: "objectPath", mode: "mode" }, outputs: { imageUploaded: "imageUploaded", imageDeleted: "imageDeleted", fileChanged: "fileChanged" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }
|
|
975
|
+
UploadImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: UploadImageComponent, selector: "base-upload-image", inputs: { id: "id", name: "name", infoText: "infoText", 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", croppingImage: "croppingImage", croppingOptions: "croppingOptions", objectPath: "objectPath", mode: "mode" }, outputs: { imageUploaded: "imageUploaded", imageDeleted: "imageDeleted", fileChanged: "fileChanged" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"form-group mt-3\" [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n </div>\n\n <div\n [id]=\"objectPath ? objectPath + '.' + id : id\"\n class=\"drag-area\"\n (dragover)=\"dragOver($event)\"\n (dragleave)=\"dragLeave($event)\"\n (drop)=\"drop($event)\"\n [ngClass]=\"{ active: dragActive, pointer: !loading, 'is-invalid': control?.invalid && control?.touched }\"\n (click)=\"!croppedInProgress && !loading && fileInput.click()\"\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 && !fileEvent && !croppedInProgress && !loading\">\n <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile()\" baseStopPropagation>L\u00F6schen</button>\n </ng-container>\n\n <ng-container *ngIf=\"control?.value && !fileEvent && !selectedFile && !loading && !croppedInProgress\">\n <img [src]=\"control?.value.startsWith('data:') ? control?.value : url + path + control?.value\" />\n <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\" baseStopPropagation>\n L\u00F6schen\n </button>\n </ng-container>\n\n <ng-container *ngIf=\"!selectedFile && !control?.value && !loading && !fileEvent\">\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 }}\n <span class=\"button\" (click)=\"fileInput.click()\" baseStopPropagation>{{ buttonText }}</span></span\n >\n <span class=\"support\" [innerText]=\"supportText\"></span>\n </ng-container>\n\n <input type=\"file\" (change)=\"selectFile($event)\" [attr.accept]=\"validExtensions?.join(',')\" hidden #fileInput />\n\n <ng-container *ngIf=\"croppedInProgress && fileEvent\">\n <image-cropper\n [imageChangedEvent]=\"fileEvent\"\n [maintainAspectRatio]=\"cOptions.maintainAspectRatio\"\n [aspectRatio]=\"cOptions.aspectRatio\"\n [alignImage]=\"cOptions.alignImage\"\n [resizeToWidth]=\"cOptions.resizeToWidth\"\n [resizeToHeight]=\"cOptions.resizeToHeight\"\n [autoCrop]=\"cOptions.autoCrop\"\n [imageQuality]=\"cOptions.imageQuality\"\n [onlyScaleDown]=\"cOptions.onlyScaleDown\"\n [format]=\"cOptions.format\"\n (imageCropped)=\"imageCropped($event, fileEvent)\"\n (loadImageFailed)=\"loadImageFailed()\"\n ></image-cropper>\n <button class=\"btn btn-primary mt-2\" type=\"button\" (click)=\"finishedCropping()\" baseStopPropagation>\n Zuschneiden\n </button>\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>\n</div>\n", styles: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.is-invalid .drag-area{border-color:var(--bs-danger)}.is-invalid .invalid-feedback{display:block}.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:280px;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)}.pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "directive", type: i3.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[baseStopPropagation]" }] });
|
|
1012
976
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: UploadImageComponent, decorators: [{
|
|
1013
977
|
type: Component,
|
|
1014
|
-
args: [{ selector: 'base-upload-image', template: "<div class=\"form-group mt-3\" [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <i
|
|
978
|
+
args: [{ selector: 'base-upload-image', template: "<div class=\"form-group mt-3\" [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n </div>\n\n <div\n [id]=\"objectPath ? objectPath + '.' + id : id\"\n class=\"drag-area\"\n (dragover)=\"dragOver($event)\"\n (dragleave)=\"dragLeave($event)\"\n (drop)=\"drop($event)\"\n [ngClass]=\"{ active: dragActive, pointer: !loading, 'is-invalid': control?.invalid && control?.touched }\"\n (click)=\"!croppedInProgress && !loading && fileInput.click()\"\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 && !fileEvent && !croppedInProgress && !loading\">\n <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile()\" baseStopPropagation>L\u00F6schen</button>\n </ng-container>\n\n <ng-container *ngIf=\"control?.value && !fileEvent && !selectedFile && !loading && !croppedInProgress\">\n <img [src]=\"control?.value.startsWith('data:') ? control?.value : url + path + control?.value\" />\n <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\" baseStopPropagation>\n L\u00F6schen\n </button>\n </ng-container>\n\n <ng-container *ngIf=\"!selectedFile && !control?.value && !loading && !fileEvent\">\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 }}\n <span class=\"button\" (click)=\"fileInput.click()\" baseStopPropagation>{{ buttonText }}</span></span\n >\n <span class=\"support\" [innerText]=\"supportText\"></span>\n </ng-container>\n\n <input type=\"file\" (change)=\"selectFile($event)\" [attr.accept]=\"validExtensions?.join(',')\" hidden #fileInput />\n\n <ng-container *ngIf=\"croppedInProgress && fileEvent\">\n <image-cropper\n [imageChangedEvent]=\"fileEvent\"\n [maintainAspectRatio]=\"cOptions.maintainAspectRatio\"\n [aspectRatio]=\"cOptions.aspectRatio\"\n [alignImage]=\"cOptions.alignImage\"\n [resizeToWidth]=\"cOptions.resizeToWidth\"\n [resizeToHeight]=\"cOptions.resizeToHeight\"\n [autoCrop]=\"cOptions.autoCrop\"\n [imageQuality]=\"cOptions.imageQuality\"\n [onlyScaleDown]=\"cOptions.onlyScaleDown\"\n [format]=\"cOptions.format\"\n (imageCropped)=\"imageCropped($event, fileEvent)\"\n (loadImageFailed)=\"loadImageFailed()\"\n ></image-cropper>\n <button class=\"btn btn-primary mt-2\" type=\"button\" (click)=\"finishedCropping()\" baseStopPropagation>\n Zuschneiden\n </button>\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>\n</div>\n", styles: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.is-invalid .drag-area{border-color:var(--bs-danger)}.is-invalid .invalid-feedback{display:block}.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:280px;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)}.pointer{cursor:pointer}\n"] }]
|
|
1015
979
|
}], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: i1$1.AuthService }, { type: i1$1.FileService }, { type: i1$1.ToastService }]; }, propDecorators: { fileInput: [{
|
|
1016
980
|
type: ViewChild,
|
|
1017
981
|
args: ['fileInput']
|
|
1018
|
-
}], toolTipElement: [{
|
|
1019
|
-
type: ViewChild,
|
|
1020
|
-
args: ['tooltip']
|
|
1021
982
|
}], id: [{
|
|
1022
983
|
type: Input
|
|
1023
984
|
}], name: [{
|
|
@@ -1101,11 +1062,6 @@ class RefenceInputComponent {
|
|
|
1101
1062
|
}));
|
|
1102
1063
|
});
|
|
1103
1064
|
}
|
|
1104
|
-
ngAfterViewInit() {
|
|
1105
|
-
if (this.toolTipElement && this.infoText) {
|
|
1106
|
-
new Tooltip(this.toolTipElement.nativeElement);
|
|
1107
|
-
}
|
|
1108
|
-
}
|
|
1109
1065
|
ngOnDestroy() {
|
|
1110
1066
|
this.subscription.unsubscribe();
|
|
1111
1067
|
}
|
|
@@ -1288,14 +1244,11 @@ class RefenceInputComponent {
|
|
|
1288
1244
|
}
|
|
1289
1245
|
}
|
|
1290
1246
|
RefenceInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RefenceInputComponent, deps: [{ token: i1$1.GraphQLService }, { token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
1291
|
-
RefenceInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: RefenceInputComponent, selector: "base-refence-input", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", isList: "isList", search: "search", useParamAsArg: "useParamAsArg", param: "param", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", required: "required", method: "method", fields: "fields", valueField: "valueField", objectPath: "objectPath", nameField: "nameField", creationLink: "creationLink" },
|
|
1247
|
+
RefenceInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: RefenceInputComponent, selector: "base-refence-input", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", isList: "isList", search: "search", useParamAsArg: "useParamAsArg", param: "param", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", required: "required", method: "method", fields: "fields", valueField: "valueField", objectPath: "objectPath", nameField: "nameField", creationLink: "creationLink" }, ngImport: i0, template: "<ng-container *ngIf=\"!isList\">\n <div class=\"form-group mb-3\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n </div>\n\n <div class=\"position-relative\" *ngIf=\"search\">\n <div class=\"d-flex flex-row\">\n <input [formControl]=\"control\" hidden />\n <input\n [id]=\"objectPath ? objectPath + '.' + id : id\"\n [name]=\"name\"\n class=\"form-control\"\n [(ngModel)]=\"currentValue\"\n [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onFocus()\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n [autocomplete]=\"autocomplete ?? null\"\n [tabIndex]=\"tabIndex ?? null\"\n (keyup)=\"enterKey($event)\"\n />\n <button class=\"btn btn-primary\" (click)=\"openLink()\" *ngIf=\"creationLink\">Erstellen</button>\n </div>\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 <div class=\"d-flex flex-row\">\n <select\n [id]=\"objectPath ? objectPath + '.' + id : id\"\n [name]=\"name\"\n class=\"form-select\"\n [attr.aria-label]=\"placeholder\"\n [formControl]=\"control\"\n [required]=\"required\"\n [tabIndex]=\"tabIndex ?? null\"\n [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n >\n <option [ngValue]=\"null\" selected>{{ placeholder }}</option>\n <option *ngFor=\"let object of objects\" [ngValue]=\"object[valueField]\">\n {{ prepareNameField(object) }}\n </option>\n </select>\n <button class=\"btn btn-primary\" (click)=\"openLink()\" *ngIf=\"creationLink\">Erstellen</button>\n </div>\n </div>\n\n <div\n class=\"d-block invalid-feedback m-2\"\n *ngIf=\"control?.invalid && (control?.dirty || control?.touched) && !selectedElement\"\n >\n <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n <div *ngIf=\"control?.errors?.['invalidReference'] && currentValue\">\n {{ currentValue }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.\n </div>\n <div *ngIf=\"control?.errors?.['minlength']\">\n Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control.errors?.['minlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['maxlength']\">\n Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control.errors?.['maxlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n <div *ngIf=\"control?.errors?.['matching']\">Die Passw\u00F6rter m\u00FCssen \u00FCberein stimmen.</div>\n </div>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isList\">\n <base-tags\n [id]=\"id\"\n [label]=\"label\"\n [name]=\"name\"\n [control]=\"control\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n [custom]=\"false\"\n [options]=\"optionsForTagInput\"\n ></base-tags>\n</ng-container>\n", styles: [".options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999;max-height:200px;overflow-y:scroll}.options .option-item{padding:10px;cursor:pointer}.options .option-item:hover{color:var(--bs-primary)}\n"], dependencies: [{ kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "infoText", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required", "objectPath", "validators"] }] });
|
|
1292
1248
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RefenceInputComponent, decorators: [{
|
|
1293
1249
|
type: Component,
|
|
1294
|
-
args: [{ selector: 'base-refence-input', template: "<ng-container *ngIf=\"!isList\">\n <div class=\"form-group mb-3\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <i
|
|
1295
|
-
}], ctorParameters: function () { return [{ type: i1$1.GraphQLService }, { type: i2$1.Router }]; }, propDecorators: {
|
|
1296
|
-
type: ViewChild,
|
|
1297
|
-
args: ['tooltip']
|
|
1298
|
-
}], id: [{
|
|
1250
|
+
args: [{ selector: 'base-refence-input', template: "<ng-container *ngIf=\"!isList\">\n <div class=\"form-group mb-3\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\" *ngIf=\"infoText\"></i>\n </div>\n\n <div class=\"position-relative\" *ngIf=\"search\">\n <div class=\"d-flex flex-row\">\n <input [formControl]=\"control\" hidden />\n <input\n [id]=\"objectPath ? objectPath + '.' + id : id\"\n [name]=\"name\"\n class=\"form-control\"\n [(ngModel)]=\"currentValue\"\n [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onFocus()\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n [autocomplete]=\"autocomplete ?? null\"\n [tabIndex]=\"tabIndex ?? null\"\n (keyup)=\"enterKey($event)\"\n />\n <button class=\"btn btn-primary\" (click)=\"openLink()\" *ngIf=\"creationLink\">Erstellen</button>\n </div>\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 <div class=\"d-flex flex-row\">\n <select\n [id]=\"objectPath ? objectPath + '.' + id : id\"\n [name]=\"name\"\n class=\"form-select\"\n [attr.aria-label]=\"placeholder\"\n [formControl]=\"control\"\n [required]=\"required\"\n [tabIndex]=\"tabIndex ?? null\"\n [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n >\n <option [ngValue]=\"null\" selected>{{ placeholder }}</option>\n <option *ngFor=\"let object of objects\" [ngValue]=\"object[valueField]\">\n {{ prepareNameField(object) }}\n </option>\n </select>\n <button class=\"btn btn-primary\" (click)=\"openLink()\" *ngIf=\"creationLink\">Erstellen</button>\n </div>\n </div>\n\n <div\n class=\"d-block invalid-feedback m-2\"\n *ngIf=\"control?.invalid && (control?.dirty || control?.touched) && !selectedElement\"\n >\n <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n <div *ngIf=\"control?.errors?.['invalidReference'] && currentValue\">\n {{ currentValue }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.\n </div>\n <div *ngIf=\"control?.errors?.['minlength']\">\n Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control.errors?.['minlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['maxlength']\">\n Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control.errors?.['maxlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n <div *ngIf=\"control?.errors?.['matching']\">Die Passw\u00F6rter m\u00FCssen \u00FCberein stimmen.</div>\n </div>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isList\">\n <base-tags\n [id]=\"id\"\n [label]=\"label\"\n [name]=\"name\"\n [control]=\"control\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n [custom]=\"false\"\n [options]=\"optionsForTagInput\"\n ></base-tags>\n</ng-container>\n", styles: [".options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999;max-height:200px;overflow-y:scroll}.options .option-item{padding:10px;cursor:pointer}.options .option-item:hover{color:var(--bs-primary)}\n"] }]
|
|
1251
|
+
}], ctorParameters: function () { return [{ type: i1$1.GraphQLService }, { type: i2$1.Router }]; }, propDecorators: { id: [{
|
|
1299
1252
|
type: Input
|
|
1300
1253
|
}], name: [{
|
|
1301
1254
|
type: Input
|
|
@@ -2582,7 +2535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
2582
2535
|
}] } });
|
|
2583
2536
|
|
|
2584
2537
|
// Modules
|
|
2585
|
-
const imports = [FormsModule, ReactiveFormsModule, CommonModule, RouterModule, ImageCropperModule];
|
|
2538
|
+
const imports = [FormsModule, ReactiveFormsModule, CommonModule, RouterModule, ImageCropperModule, NgbTooltipModule];
|
|
2586
2539
|
// Imported and exported elements
|
|
2587
2540
|
const elements = [
|
|
2588
2541
|
// Directives
|
|
@@ -2640,7 +2593,7 @@ BaseComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
|
|
|
2640
2593
|
FabButtonComponent,
|
|
2641
2594
|
// Pipes
|
|
2642
2595
|
EllipsesPipe
|
|
2643
|
-
], imports: [FormsModule, ReactiveFormsModule, CommonModule, RouterModule, ImageCropperModule], exports: [
|
|
2596
|
+
], imports: [FormsModule, ReactiveFormsModule, CommonModule, RouterModule, ImageCropperModule, NgbTooltipModule], exports: [
|
|
2644
2597
|
// Directives
|
|
2645
2598
|
SortDirective,
|
|
2646
2599
|
BackButtonDirective,
|