@xiriframework/xiri-ng 0.4.14 → 0.4.15
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/fesm2022/xiriframework-xiri-ng.mjs +239 -16
- package/fesm2022/xiriframework-xiri-ng.mjs.map +1 -1
- package/package.json +1 -1
- package/skills/xiri-ng-expert/SKILL.md +27 -4
- package/skills/xiri-ng-expert/references/components.md +5 -0
- package/skills/xiri-ng-expert/references/dyncomponent.md +11 -11
- package/skills/xiri-ng-expert/references/form-fields.md +41 -2
- package/types/xiriframework-xiri-ng.d.ts +57 -4
- package/types/xiriframework-xiri-ng.d.ts.map +1 -1
|
@@ -5,7 +5,7 @@ import { DefaultUrlSerializer, RouterLink, Router, NavigationEnd } from '@angula
|
|
|
5
5
|
import { takeUntilDestroyed, toSignal, rxResource } from '@angular/core/rxjs-interop';
|
|
6
6
|
import * as i1 from '@angular/forms';
|
|
7
7
|
import { NgControl, FormGroup, FormControl, FormsModule, ReactiveFormsModule, NgForm, FormGroupDirective, Validators, FormBuilder, UntypedFormControl, NG_VALUE_ACCESSOR, UntypedFormBuilder } from '@angular/forms';
|
|
8
|
-
import { tap, Subject, Subscription, debounceTime, distinctUntilChanged, BehaviorSubject, ReplaySubject, switchMap, catchError, of, merge, filter as filter$1,
|
|
8
|
+
import { tap, Subject, Subscription, debounceTime, distinctUntilChanged, BehaviorSubject, ReplaySubject, switchMap, catchError, of, concat, timer, map, merge, filter as filter$1, EMPTY, finalize, throwError } from 'rxjs';
|
|
9
9
|
import { HttpClient } from '@angular/common/http';
|
|
10
10
|
import { MatSnackBar } from '@angular/material/snack-bar';
|
|
11
11
|
import { MatProgressSpinner } from '@angular/material/progress-spinner';
|
|
@@ -29,11 +29,11 @@ import { MatDatepickerInput, MatDatepickerToggle, MatDatepickerToggleIcon, MatDa
|
|
|
29
29
|
import { MatTree, MatTreeNestedDataSource, MatTreeNode, MatTreeNodeToggle, MatTreeNodePadding, MatTreeNodeDef } from '@angular/material/tree';
|
|
30
30
|
import { SelectionModel } from '@angular/cdk/collections';
|
|
31
31
|
import { filter, takeUntil, debounceTime as debounceTime$1 } from 'rxjs/operators';
|
|
32
|
+
import { MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
|
|
32
33
|
import * as i2 from 'ngx-mat-select-search';
|
|
33
34
|
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
|
|
34
35
|
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
|
|
35
36
|
import { ENTER, COMMA, ESCAPE } from '@angular/cdk/keycodes';
|
|
36
|
-
import { MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
|
|
37
37
|
import { MatChipGrid, MatChipRow, MatChipRemove, MatChipInput, MatChipSet, MatChip } from '@angular/material/chips';
|
|
38
38
|
import { MatTableDataSource, MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatFooterRow, MatFooterRowDef, MatFooterCell, MatFooterCellDef } from '@angular/material/table';
|
|
39
39
|
import { MatTooltip } from '@angular/material/tooltip';
|
|
@@ -250,6 +250,17 @@ function parseHttpError(err) {
|
|
|
250
250
|
return 'Connection error';
|
|
251
251
|
return 'Unknown error';
|
|
252
252
|
}
|
|
253
|
+
/** Liest `fields: {id: message}` aus einer 400-Antwort (xiri-go FieldErrors); nur String-Werte, sonst undefined. */
|
|
254
|
+
function parseFieldErrors(err) {
|
|
255
|
+
const fields = err.error?.fields;
|
|
256
|
+
if (err.status !== 400 || !fields || typeof fields !== 'object' || Array.isArray(fields))
|
|
257
|
+
return undefined;
|
|
258
|
+
const out = {};
|
|
259
|
+
for (const [id, message] of Object.entries(fields))
|
|
260
|
+
if (typeof message === 'string')
|
|
261
|
+
out[id] = message;
|
|
262
|
+
return Object.keys(out).length ? out : undefined;
|
|
263
|
+
}
|
|
253
264
|
|
|
254
265
|
// The "empty" value used to clear a control, matching the shape the control currently holds.
|
|
255
266
|
function emptyValueForField(field) {
|
|
@@ -2373,6 +2384,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
2373
2384
|
}]
|
|
2374
2385
|
}], ctorParameters: () => [], propDecorators: { predicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "predicate", required: false }] }], compare: [{ type: i0.Input, args: [{ isSignal: true, alias: "compare", required: false }] }], serverSideSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverSideSearch", required: false }] }], serverUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverUrl", required: false }] }], serverParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverParams", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }] } });
|
|
2375
2386
|
|
|
2387
|
+
/**
|
|
2388
|
+
* Vorschläge für ein Textfeld (mat-autocomplete): `field.list` wird lokal gefiltert, bei `field.url`
|
|
2389
|
+
* wird beim Tippen nachgeladen (POST {search, <searchWith-Felder>} -> [{id, name}]). Freie Eingabe
|
|
2390
|
+
* bleibt immer erlaubt - die Directive schreibt nie ins Control, sie liefert nur `options()`.
|
|
2391
|
+
*
|
|
2392
|
+
* Bewusst über DOM-Events statt control.valueChanges: form-fields tauscht Controls bei Formular-
|
|
2393
|
+
* ersetzung aus, die Directive überlebt dank `track field.id` - ein gegriffenes Control wäre alt.
|
|
2394
|
+
*/
|
|
2395
|
+
class XiriSuggestDirective {
|
|
2396
|
+
constructor() {
|
|
2397
|
+
this.field = input.required({ ...(ngDevMode ? { debugName: "field" } : /* istanbul ignore next */ {}), alias: 'xiriSuggest' });
|
|
2398
|
+
this.search = signal('', /* @ts-ignore */
|
|
2399
|
+
...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
|
|
2400
|
+
this.remote = signal([], /* @ts-ignore */
|
|
2401
|
+
...(ngDevMode ? [{ debugName: "remote" }] : /* istanbul ignore next */ []));
|
|
2402
|
+
/** Jeder next() startet die Remote-Kette neu und bricht die vorige ab. */
|
|
2403
|
+
this.typed$ = new Subject();
|
|
2404
|
+
this.dataService = inject(XiriDataService);
|
|
2405
|
+
/** Das formGroup von form-fields; optional, damit die Directive auch an einem nackten Input läuft. */
|
|
2406
|
+
this.formGroupDir = inject(FormGroupDirective, { optional: true });
|
|
2407
|
+
/** Was das Panel zeigt: lokale Treffer, dann Servertreffer, nach name dedupliziert. */
|
|
2408
|
+
this.options = computed(() => {
|
|
2409
|
+
const needle = this.search().toLowerCase();
|
|
2410
|
+
const local = cleanOptions(this.field().list).filter(o => !needle || o.name.toLowerCase().includes(needle));
|
|
2411
|
+
const seen = new Set();
|
|
2412
|
+
return local.concat(this.remote()).filter(o => {
|
|
2413
|
+
if (seen.has(o.name))
|
|
2414
|
+
return false;
|
|
2415
|
+
seen.add(o.name);
|
|
2416
|
+
return true;
|
|
2417
|
+
});
|
|
2418
|
+
}, /* @ts-ignore */
|
|
2419
|
+
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
2420
|
+
this.typed$.pipe(switchMap(s => {
|
|
2421
|
+
const url = this.field().url;
|
|
2422
|
+
if (!url || !s)
|
|
2423
|
+
return of([]);
|
|
2424
|
+
// Alte Treffer sofort weg, dann warten, dann fragen - neue Eingabe bricht alles davor ab.
|
|
2425
|
+
// Kontextwerte erst im Timer-Zweig lesen: eine Änderung innerhalb der 200 ms geht mit.
|
|
2426
|
+
return concat(of([]), timer(200).pipe(switchMap(() => this.dataService.post(url, { ...this.contextValues(), search: s }).pipe(map(cleanOptions), catchError(() => of([]))))));
|
|
2427
|
+
}), takeUntilDestroyed()).subscribe(r => this.remote.set(r));
|
|
2428
|
+
// Feldwechsel (Patch-Klon, Formularersetzung mit gleicher ID): der Text des alten Formulars darf
|
|
2429
|
+
// nie gegen die neue url laufen. Alles zurücksetzen, nichts suchen - der nächste Fokus oder
|
|
2430
|
+
// Tastendruck richtet den Filter neu aus.
|
|
2431
|
+
effect(() => {
|
|
2432
|
+
this.field();
|
|
2433
|
+
untracked(() => this.reset(''));
|
|
2434
|
+
});
|
|
2435
|
+
}
|
|
2436
|
+
onInput(event) {
|
|
2437
|
+
const value = event.target.value;
|
|
2438
|
+
this.search.set(value);
|
|
2439
|
+
this.typed$.next(value);
|
|
2440
|
+
}
|
|
2441
|
+
/** Fokus richtet den lokalen Filter am sichtbaren Wert aus und verwirft bei geändertem Wert alte
|
|
2442
|
+
* Servertreffer - ohne Request: form-fields fokussiert auch programmatisch. */
|
|
2443
|
+
onFocus(event) {
|
|
2444
|
+
const value = event.target.value;
|
|
2445
|
+
if (value !== this.search())
|
|
2446
|
+
this.reset(value);
|
|
2447
|
+
}
|
|
2448
|
+
reset(search) {
|
|
2449
|
+
this.search.set(search);
|
|
2450
|
+
this.typed$.next(''); // leerer Text -> of([]) im switchMap: bricht ab und leert remote
|
|
2451
|
+
}
|
|
2452
|
+
/** Aktuelle Werte der searchWith-Felder (flache Schlüssel, nur enabled), zur Request-Zeit gelesen. */
|
|
2453
|
+
contextValues() {
|
|
2454
|
+
// Nicht form.value: bei komplett deaktivierter Gruppe enthält das auch deaktivierte Kinder.
|
|
2455
|
+
const controls = this.formGroupDir?.form.controls ?? {};
|
|
2456
|
+
const values = {};
|
|
2457
|
+
for (const id of this.field().searchWith ?? []) {
|
|
2458
|
+
const control = controls[id];
|
|
2459
|
+
if (control?.enabled)
|
|
2460
|
+
values[id] = control.value;
|
|
2461
|
+
}
|
|
2462
|
+
return values;
|
|
2463
|
+
}
|
|
2464
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriSuggestDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2465
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.5", type: XiriSuggestDirective, isStandalone: true, selector: "input[xiriSuggest]", inputs: { field: { classPropertyName: "field", publicName: "xiriSuggest", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "input": "onInput( $event )", "focus": "onFocus( $event )" } }, exportAs: ["xiriSuggest"], ngImport: i0 }); }
|
|
2466
|
+
}
|
|
2467
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriSuggestDirective, decorators: [{
|
|
2468
|
+
type: Directive,
|
|
2469
|
+
args: [{
|
|
2470
|
+
selector: 'input[xiriSuggest]',
|
|
2471
|
+
exportAs: 'xiriSuggest',
|
|
2472
|
+
host: { '(input)': 'onInput( $event )', '(focus)': 'onFocus( $event )' },
|
|
2473
|
+
}]
|
|
2474
|
+
}], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "xiriSuggest", required: true }] }] } });
|
|
2475
|
+
/** Server und Liste sind Trust-Boundary: nur Objekte mit String-name kommen durch. */
|
|
2476
|
+
function cleanOptions(value) {
|
|
2477
|
+
return Array.isArray(value)
|
|
2478
|
+
? value.filter((o) => !!o && typeof o.name === 'string')
|
|
2479
|
+
: [];
|
|
2480
|
+
}
|
|
2481
|
+
|
|
2376
2482
|
class XiriChipsComponent {
|
|
2377
2483
|
constructor() {
|
|
2378
2484
|
this.field = input.required(/* @ts-ignore */
|
|
@@ -2528,6 +2634,9 @@ class XiriFormFieldsComponent {
|
|
|
2528
2634
|
this.formChange = output();
|
|
2529
2635
|
this.check = input(null, /* @ts-ignore */
|
|
2530
2636
|
...(ngDevMode ? [{ debugName: "check" }] : /* istanbul ignore next */ []));
|
|
2637
|
+
// Validierungsfehler pro Feld-ID vom Server (400 mit fields), siehe applyServerError().
|
|
2638
|
+
this.serverErrors = input(null, /* @ts-ignore */
|
|
2639
|
+
...(ngDevMode ? [{ debugName: "serverErrors" }] : /* istanbul ignore next */ []));
|
|
2531
2640
|
this.lastValue = null;
|
|
2532
2641
|
this._fields = null;
|
|
2533
2642
|
this.collapsedSections = signal(new Set(), /* @ts-ignore */
|
|
@@ -2669,6 +2778,15 @@ class XiriFormFieldsComponent {
|
|
|
2669
2778
|
if (formInput !== null && this._fieldsLoaded)
|
|
2670
2779
|
this.reloadKick.next();
|
|
2671
2780
|
});
|
|
2781
|
+
// Server-Feldfehler (400 mit fields) als Validierungseintrag 'server' einspeisen. Der nächste
|
|
2782
|
+
// valueChange lässt Angular die Validatoren neu laufen und räumt den Eintrag von selbst weg.
|
|
2783
|
+
effect(() => {
|
|
2784
|
+
const errors = this.serverErrors();
|
|
2785
|
+
if (!errors)
|
|
2786
|
+
return;
|
|
2787
|
+
for (const [id, message] of Object.entries(errors))
|
|
2788
|
+
this.applyServerError(id, message);
|
|
2789
|
+
});
|
|
2672
2790
|
}
|
|
2673
2791
|
ngOnInit() {
|
|
2674
2792
|
this.check()?.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
|
|
@@ -2782,6 +2900,21 @@ class XiriFormFieldsComponent {
|
|
|
2782
2900
|
this.patchedClones.set(id, { ...field });
|
|
2783
2901
|
this.patchVersion.update(v => v + 1);
|
|
2784
2902
|
}
|
|
2903
|
+
applyServerError(id, message) {
|
|
2904
|
+
const field = this._fields?.find(f => f.id === id);
|
|
2905
|
+
const control = field?.control;
|
|
2906
|
+
if (!field || !control)
|
|
2907
|
+
return; // unbekannte ID (z. B. Form=false-Feld): ignorieren
|
|
2908
|
+
// nullValidator: der Eintrag dient nur der Anzeige, der Fehler selbst kommt per setErrors.
|
|
2909
|
+
field.validations = [
|
|
2910
|
+
...(field.validations ?? []).filter(v => v.id !== 'server'),
|
|
2911
|
+
{ id: 'server', validator: Validators.nullValidator, message },
|
|
2912
|
+
];
|
|
2913
|
+
control.setErrors({ ...(control.errors ?? {}), server: true });
|
|
2914
|
+
control.markAsTouched();
|
|
2915
|
+
this.patchedClones.set(id, { ...field });
|
|
2916
|
+
this.patchVersion.update(v => v + 1);
|
|
2917
|
+
}
|
|
2785
2918
|
applyPatch(url, patch) {
|
|
2786
2919
|
const fields = this._fields;
|
|
2787
2920
|
if (fields === null || !patch)
|
|
@@ -2840,8 +2973,8 @@ class XiriFormFieldsComponent {
|
|
|
2840
2973
|
// monoton ist: ein leeres Feld hat nichts mehr zu verwerfen.
|
|
2841
2974
|
pruneValue(field, control) {
|
|
2842
2975
|
// Nur wenn die Liste autoritativ ist. Bei Server-Suche ist list nur der statische Sockel,
|
|
2843
|
-
// bei chips sind es Vorschläge - dort würde Pruning gültige Eingaben löschen.
|
|
2844
|
-
if (field.url || field.type === 'chips')
|
|
2976
|
+
// bei chips und text sind es Vorschläge - dort würde Pruning gültige Eingaben löschen.
|
|
2977
|
+
if (field.url || field.type === 'chips' || field.type === 'text')
|
|
2845
2978
|
return;
|
|
2846
2979
|
const ids = collectOptionIds(field.list ?? []);
|
|
2847
2980
|
const value = control.value;
|
|
@@ -3193,7 +3326,7 @@ class XiriFormFieldsComponent {
|
|
|
3193
3326
|
}
|
|
3194
3327
|
}
|
|
3195
3328
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriFormFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3196
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: XiriFormFieldsComponent, isStandalone: true, selector: "xiri-form-fields", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, check: { classPropertyName: "check", publicName: "check", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formChange: "formChange" }, ngImport: i0, template: "@if (reloading()) {\n\t<mat-progress-bar class=\"reloadbar\" mode=\"indeterminate\"></mat-progress-bar>\n}\n<form class=\"xrow dynamic-form\" [formGroup]=\"formGroup\" [class]=\"display()\">\n\t@for (field of displayFields(); track field.id) {\n\t\t@if (isFieldVisible(field)) {\n\t\t@switch (field.type) {\n\t\t\t@case ('text') {\n\t\t\t\t<mat-form-field [class]=\"field.class\" [formGroup]=\"formGroup\" floatLabel=\"auto\" [hidden]=\"field.hide\">\n\t\t\t\t\t@if (field.name) {\n\t\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t}\n\t\t\t\t\t<input matInput\n\t\t\t\t\t [formControlName]=\"field.id\"\n\t\t\t\t\t [type]=\"field.subtype || 'text'\"\n\t\t\t\t\t [autocomplete]=\"field.name\"\n\t\t\t\t\t [attr.minlength]=\"field.min\"\n\t\t\t\t\t [attr.maxlength]=\"field.max\"\n\t\t\t\t\t [required]=\"!!field.required\">\n\t\t\t\t\t@if (field.textPrefix) {\n\t\t\t\t\t\t<span matTextPrefix=\"\">{{ field.textPrefix }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.textSuffix) {\n\t\t\t\t\t\t<span matTextSuffix=\"\">{{ field.textSuffix }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.iconPrefix) {\n\t\t\t\t\t\t<mat-icon matPrefix>{{ field.iconPrefix }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.iconSuffix) {\n\t\t\t\t\t\t<mat-icon matSuffix>{{ field.iconSuffix }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.max) {\n\t\t\t\t\t\t<mat-hint align=\"end\">{{ formGroup.get(field.id)?.value?.length || 0 }} / {{ field.max }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('number') {\n\t\t\t\t<mat-form-field [class]=\"field.class\" [formGroup]=\"formGroup\" floatLabel=\"auto\" [hidden]=\"field.hide\">\n\t\t\t\t\t@if (field.name) {\n\t\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t}\n\t\t\t\t\t<input matInput\n\t\t\t\t\t [formControlName]=\"field.id\"\n\t\t\t\t\t [autocomplete]=\"field.name || field.id\"\n\t\t\t\t\t [lang]=\"field.locale || ''\"\n\t\t\t\t\t [type]=\"field.type\"\n\t\t\t\t\t [attr.min]=\"field.min\"\n\t\t\t\t\t [attr.max]=\"field.max\"\n\t\t\t\t\t [required]=\"!!field.required\">\n\t\t\t\t\t@if (field.textPrefix) {\n\t\t\t\t\t\t<span matTextPrefix=\"\">{{ field.textPrefix }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.textSuffix) {\n\t\t\t\t\t\t<span matTextSuffix=\"\">{{ field.textSuffix }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.iconPrefix) {\n\t\t\t\t\t\t<mat-icon matPrefix>{{ field.iconPrefix }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.iconSuffix) {\n\t\t\t\t\t\t<mat-icon matSuffix>{{ field.iconSuffix }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('password') {\n\t\t\t\t<mat-form-field [class]=\"field.class\" [formGroup]=\"formGroup\" floatLabel=\"auto\" [hidden]=\"field.hide\">\n\t\t\t\t\t@if (field.name) {\n\t\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t}\n\t\t\t\t\t<input matInput\n\t\t\t\t\t [formControlName]=\"field.id\"\n\t\t\t\t\t [type]=\"field.pwdhide ? 'password' : 'text'\"\n\t\t\t\t\t [autocomplete]=\"field.name\"\n\t\t\t\t\t [attr.minlength]=\"field.min\"\n\t\t\t\t\t [attr.maxlength]=\"field.max\"\n\t\t\t\t\t [required]=\"!!field.required\">\n\t\t\t\t\t<button mat-icon-button matSuffix class=\"form-field-button\" (click)=\"field.pwdhide = !field.pwdhide\" [attr.aria-label]=\"'Hide password'\"\n\t\t\t\t\t [attr.aria-pressed]=\"field.pwdhide\">\n\t\t\t\t\t\t<mat-icon>{{ field.pwdhide ? 'visibility_off' : 'visibility' }}</mat-icon>\n\t\t\t\t\t</button>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.max) {\n\t\t\t\t\t\t<mat-hint align=\"end\">{{ formGroup.get(field.id)?.value?.length || 0 }} / {{ field.max }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('select') {\n\t\t\t\t<div class=\"add-wrap\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t<mat-form-field class=\"add-wrap-control\" [formGroup]=\"formGroup\" floatLabel=\"auto\">\n\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t@if (field.search === false && !field.selectAll) {\n\t\t\t\t\t\t<mat-select [formControlName]=\"field.id\" [multiple]=\"field.multiple\" [required]=\"!!field.required\" panelClass=\"selectPanel\">\n\t\t\t\t\t\t\t@for (x of field.list; track x.id) {\n\t\t\t\t\t\t\t\t<mat-option [value]=\"x.id\" [disabled]=\"x.disabled\">{{ x.name }}</mat-option>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</mat-select>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<mat-select [formControlName]=\"field.id\" [multiple]=\"field.multiple\" [required]=\"!!field.required\" panelClass=\"selectPanel\">\n\t\t\t\t\t\t\t<mat-option>\n\t\t\t\t\t\t\t\t<ngx-mat-select-search [formControl]=\"xiriSelect.formControl\" xiriSelect #xiriSelect=\"xiriSelect\"\n\t\t\t\t\t\t\t\t [values]=\"field.list || []\" [searching]=\"xiriSelect.searching\"\n\t\t\t\t\t\t\t\t [serverSideSearch]=\"!!field.serverSideSearch\" [serverUrl]=\"field.url || ''\"\n\t\t\t\t\t\t\t\t [serverParams]=\"field.params || {}\"\n\t\t\t\t\t\t\t\t [showToggleAllCheckbox]=\"!!field.multiple && !!field.selectAll && xiriSelect.hasSelectable()\"\n\t\t\t\t\t\t\t\t [toggleAllCheckboxChecked]=\"!!field.multiple && !!field.selectAll && xiriSelect.allSelected(formGroup.get(field.id)?.value)\"\n\t\t\t\t\t\t\t\t [toggleAllCheckboxIndeterminate]=\"!!field.multiple && !!field.selectAll && xiriSelect.someSelected(formGroup.get(field.id)?.value)\"\n\t\t\t\t\t\t\t\t (toggleAll)=\"xiriSelect.toggleSelectAll($event, formGroup.get(field.id))\"></ngx-mat-select-search>\n\t\t\t\t\t\t\t</mat-option>\n\t\t\t\t\t\t\t@for (x of xiriSelect.filter | async; track x.id) {\n\t\t\t\t\t\t\t\t<mat-option [value]=\"x.id\" [disabled]=\"x.disabled\">{{ x.name }}</mat-option>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</mat-select>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t\t@if (field.addUrl) {\n\t\t\t\t\t<button mat-icon-button type=\"button\" class=\"add-option\" aria-label=\"Neu anlegen\"\n\t\t\t\t\t [disabled]=\"disabled() || formGroup.get(field.id)?.disabled\" (click)=\"openAdd(field.id)\"><mat-icon>add</mat-icon></button>\n\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('treeselect') {\n\t\t\t\t<div class=\"treeselect add-wrap\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t<div class=\"add-wrap-control\">\n\t\t\t\t\t<xiri-treeselect [field]=\"field\" [formControlName]=\"field.id\"\n\t\t\t\t\t [class.error]=\"formGroup.get(field.id)?.touched && formGroup.get(field.id)?.invalid\"></xiri-treeselect>\n\t\t\t\t\t<div class=\"xhint\" aria-live=\"polite\" [class.error]=\"formGroup.get(field.id)?.touched && formGroup.get(field.id)?.invalid\">\n\t\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (field.max) {\n\t\t\t\t\t\t\t<mat-hint align=\"end\">{{ formGroup.get(field.id)?.value?.length || 0 }} / {{ field.max }}</mat-hint>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.touched && formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t@if (field.addUrl) {\n\t\t\t\t\t<button mat-icon-button type=\"button\" class=\"add-option\" aria-label=\"Neu anlegen\"\n\t\t\t\t\t [disabled]=\"disabled() || formGroup.get(field.id)?.disabled\" (click)=\"openAdd(field.id)\"><mat-icon>add</mat-icon></button>\n\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('date') {\n\t\t\t\t<mat-form-field [formGroup]=\"formGroup\" class=\"date\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t<xiri-date [field]=\"field\" [formControlName]=\"field.id\"></xiri-date>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('yearmonth') {\n\t\t\t\t<mat-form-field [formGroup]=\"formGroup\" class=\"yearmonth\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t<xiri-yearmonth [field]=\"field\" [formControlName]=\"field.id\"></xiri-yearmonth>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('daterange') {\n\t\t\t\t<mat-form-field [formGroup]=\"formGroup\" class=\"daterange\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t<xiri-date-range [field]=\"field\" [formControlName]=\"field.id\"></xiri-date-range>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('datetimerange') {\n\t\t\t\t<mat-form-field [formGroup]=\"formGroup\" class=\"datetimerange\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t<xiri-date-time-range [field]=\"field\" [formControlName]=\"field.id\"></xiri-date-time-range>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('bool') {\n\t\t\t\t<div class=\"bool\" [class]=\"field.class\" [formGroup]=\"formGroup\" [hidden]=\"field.hide\">\n\t\t\t\t\t<mat-checkbox [formControlName]=\"field.id\">{{ field.name }}</mat-checkbox>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('radio') {\n\t\t\t\t<div class=\"radio\" [class]=\"field.class\" [formGroup]=\"formGroup\" [hidden]=\"field.hide\">\n\t\t\t\t\t@if (field.name) {\n\t\t\t\t\t\t<span class=\"radio-label\" [id]=\"field.id + '-label'\">{{ field.name }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t<mat-radio-group\n\t\t\t\t\t\t[formControlName]=\"field.id\"\n\t\t\t\t\t\t[attr.aria-labelledby]=\"field.name ? field.id + '-label' : null\"\n\t\t\t\t\t>\n\t\t\t\t\t\t@for (x of field.list; track x.id) {\n\t\t\t\t\t\t\t<mat-radio-button [value]=\"x.id\" [disabled]=\"x.disabled\">{{ x.name }}</mat-radio-button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</mat-radio-group>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('volume') {\n\t\t\t\t<div [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<xiri-volume [field]=\"field\" [formControlName]=\"field.id\"></xiri-volume>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('timelimit') {\n\t\t\t\t<div [class]=\"field.class\" [formGroup]=\"formGroup\" [hidden]=\"field.hide\">\n\t\t\t\t\t<xiri-timelimit matInput [formControlName]=\"field.id\" [required]=\"!!field.required\" [texts]=\"field.texts || {}\"></xiri-timelimit>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('textarea') {\n\t\t\t\t<mat-form-field [class]=\"field.class\" [formGroup]=\"formGroup\" [hidden]=\"field.hide\">\n\t\t\t\t\t@if (field.name) {\n\t\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t}\n\t\t\t\t\t<textarea matInput [formControlName]=\"field.id\" [required]=\"!!field.required\" [rows]=\"field.rows || 5\"></textarea>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.max) {\n\t\t\t\t\t\t<mat-hint align=\"end\">{{ formGroup.get(field.id)?.value?.length || 0 }} / {{ field.max }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('file') {\n\t\t\t\t<div [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<xiri-file [field]=\"field\" [formControlName]=\"field.id\"></xiri-file>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('info') {\n\t\t\t\t<div class=\"info\" [class]=\"field.class\">{{ field.value }}</div>\n\t\t\t}\n\t\t\t@case ('header') {\n\t\t\t\t@if (field.collapsible) {\n\t\t\t\t\t<div class=\"header collapsible\" [class]=\"field.class\" role=\"button\" tabindex=\"0\"\n\t\t\t\t\t [attr.aria-expanded]=\"!isSectionCollapsed(field.id)\"\n\t\t\t\t\t (click)=\"toggleSection(field)\" (keydown.enter)=\"toggleSection(field)\" (keydown.space)=\"toggleSection(field); $event.preventDefault()\">\n\t\t\t\t\t\t<mat-icon class=\"collapse-icon\" [class.collapsed]=\"isSectionCollapsed(field.id)\">expand_more</mat-icon>\n\t\t\t\t\t\t{{ field.value }}\n\t\t\t\t\t</div>\n\t\t\t\t} @else {\n\t\t\t\t\t<div class=\"header\" [class]=\"field.class\">{{ field.value }}</div>\n\t\t\t\t}\n\t\t\t}\n\t\t\t@case ('divider') {\n\t\t\t\t<div class=\"divider\" [class]=\"field.class\">\n\t\t\t\t\t@if (field.value) {\n\t\t\t\t\t\t<span class=\"divider-text\">{{ field.value }}</span>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('html') {\n\t\t\t\t<div class=\"html\" [class]=\"field.class\" [innerHtml]=\"$any(field.value) | safeHtml\"></div>\n\t\t\t}\n\t\t\t@case ('question') {\n\t\t\t\t<div class=\"xcol question\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<div class=\"left\">\n\t\t\t\t\t\t<mat-icon [class]=\"field.iconColor || 'warn'\" inline=\"true\">{{ field.icon }}</mat-icon>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"right\">{{ field.value }}</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('waiting') {\n\t\t\t\t<div class=\"xcol waiting\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<div class=\"left\">\n\t\t\t\t\t\t@if (!field.done) {\n\t\t\t\t\t\t\t<mat-spinner diameter=\"40\"></mat-spinner>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (field.done) {\n\t\t\t\t\t\t\t<mat-icon inline=\"true\">done</mat-icon>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"right\">{{ field.value }}</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('chips') {\n\t\t\t\t<div class=\"add-wrap\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<xiri-chips class=\"add-wrap-control\" [field]=\"field\" [formControlName]=\"field.id\"></xiri-chips>\n\t\t\t\t\t@if (field.addUrl) {\n\t\t\t\t\t\t<button mat-icon-button type=\"button\" class=\"add-option\" aria-label=\"Neu anlegen\"\n\t\t\t\t\t\t [disabled]=\"disabled() || formGroup.get(field.id)?.disabled\" (click)=\"openAdd(field.id)\"><mat-icon>add</mat-icon></button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@default {\n\t\t\t\t<div>default: {{ field.type }}</div>\n\t\t\t}\n\t\t}\n\t\t}\n\t}\n</form>\n", styles: [":host{position:relative}.reloadbar{position:absolute;top:0;left:0;right:0;z-index:1}.dynamic-form{grid-row-gap:7px}.dynamic-form>mat-form-field,.dynamic-form>.add-wrap{align-self:start}.dynamic-form .add-wrap{display:flex;align-items:flex-start;gap:4px}.dynamic-form .add-wrap .add-wrap-control{flex:1;min-width:0}.dynamic-form .add-wrap .add-option{margin-top:4px}.dynamic-form mat-form-field mat-icon{--mat-icon-color: var(--xiri-formfield-icon-color)}.dynamic-form.line{grid-row-gap:5px}.dynamic-form.small{grid-row-gap:2px}.dynamic-form .xhint{display:flex;min-height:20px;margin-top:4px}.dynamic-form .xhint mat-hint{font-size:var(--xiri-font-size-helper);padding:1px 16px 0}.dynamic-form .xhint mat-hint.mat-mdc-form-field-hint-end{flex:1;text-align:right}.dynamic-form .xhint mat-error{font-size:var(--xiri-font-size-helper);padding:1px 16px 0}.dynamic-form .xhint.error mat-hint{display:none}.dynamic-form .date{min-width:min(9.5rem,100%)}.dynamic-form .date.datetime,.dynamic-form .daterange{min-width:min(14.5rem,100%)}.dynamic-form .datetimerange{min-width:min(18.5rem,100%)}.dynamic-form .bool{display:flex;flex-direction:column}.dynamic-form .bool mat-hint{font-size:var(--xiri-font-size-helper);margin-top:-8px;padding-left:44px}.dynamic-form .radio{display:flex;flex-direction:column;gap:var(--xiri-spacing-xs)}.dynamic-form .radio .radio-label{font-size:var(--xiri-font-size-label)}.dynamic-form .radio mat-radio-group{display:flex;flex-wrap:wrap;gap:var(--xiri-spacing-xs) var(--xiri-spacing-md)}.dynamic-form .radio mat-hint{font-size:var(--xiri-font-size-helper)}.dynamic-form .info{padding-top:.8rem;padding-bottom:.4rem;color:var(--primary, #2892D9)}.dynamic-form .header{font-size:var(--xiri-font-size-title);padding-top:.8rem;padding-bottom:.4rem;color:var(--primary, #2892D9)}.dynamic-form .header.collapsible{cursor:pointer;display:flex;align-items:center;gap:.25rem;-webkit-user-select:none;user-select:none;border-radius:var(--xiri-radius-xs);padding:.5rem .25rem;margin:.25rem 0}.dynamic-form .header.collapsible:hover{background:color-mix(in srgb,var(--primary, #2892D9) 8%,transparent)}.dynamic-form .header.collapsible .collapse-icon{transition:transform var(--xiri-duration-fast) var(--xiri-easing-standard)}.dynamic-form .header.collapsible .collapse-icon.collapsed{transform:rotate(-90deg)}.dynamic-form .divider{width:100%;display:flex;align-items:center;padding:.5rem 0;margin:.25rem 0}.dynamic-form .divider:before,.dynamic-form .divider:after{content:\"\";flex:1;height:1px;background:var(--outline-variant, var(--mat-sys-outline-variant, rgba(0, 0, 0, .12)))}.dynamic-form .divider .divider-text{padding:0 1rem;font-size:var(--xiri-font-size-helper);color:var(--on-surface-variant, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)));white-space:nowrap}.dynamic-form .question,.dynamic-form .waiting{display:flex}.dynamic-form .question .left,.dynamic-form .waiting .left{font-size:var(--xiri-font-size-display);padding-right:1rem}.dynamic-form .question{align-items:center}.dynamic-form .question .left mat-icon{height:auto;width:auto;line-height:1;overflow:visible}.dynamic-form .form-field-button{margin-left:12px;margin-right:12px}.mat-mdc-select-panel.selectPanel{max-height:max(50vh,256px)}[hidden]{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: NgxMatSelectSearchModule }, { kind: "component", type: i2.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "directive", type: XiriSelectDirective, selector: "[xiriSelect]", inputs: ["predicate", "compare", "serverSideSearch", "serverUrl", "serverParams", "values"], exportAs: ["xiriSelect"] }, { kind: "component", type: XiriTreeselectComponent, selector: "xiri-treeselect", inputs: ["field", "value"] }, { kind: "component", type: XiriDateComponent, selector: "xiri-date", inputs: ["field", "value"] }, { kind: "component", type: XiriYearMonthComponent, selector: "xiri-yearmonth", inputs: ["field", "value"] }, { kind: "component", type: XiriDateRangeComponent, selector: "xiri-date-range", inputs: ["field", "value"] }, { kind: "component", type: XiriDateTimeRangeComponent, selector: "xiri-date-time-range", inputs: ["field", "value"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: XiriVolumeComponent, selector: "xiri-volume", inputs: ["field", "value"] }, { kind: "component", type: XiriTimelimitComponent, selector: "xiri-timelimit", inputs: ["placeholder", "required", "disabled", "value", "texts"] }, { kind: "component", type: XiriFileComponent, selector: "xiri-file", inputs: ["value", "field"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: XiriChipsComponent, selector: "xiri-chips", inputs: ["field"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }] }); }
|
|
3329
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: XiriFormFieldsComponent, isStandalone: true, selector: "xiri-form-fields", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, check: { classPropertyName: "check", publicName: "check", isSignal: true, isRequired: false, transformFunction: null }, serverErrors: { classPropertyName: "serverErrors", publicName: "serverErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formChange: "formChange" }, ngImport: i0, template: "@if (reloading()) {\n\t<mat-progress-bar class=\"reloadbar\" mode=\"indeterminate\"></mat-progress-bar>\n}\n<form class=\"xrow dynamic-form\" [formGroup]=\"formGroup\" [class]=\"display()\">\n\t@for (field of displayFields(); track field.id) {\n\t\t@if (isFieldVisible(field)) {\n\t\t@switch (field.type) {\n\t\t\t@case ('text') {\n\t\t\t\t<mat-form-field [class]=\"field.class\" [formGroup]=\"formGroup\" floatLabel=\"auto\" [hidden]=\"field.hide\">\n\t\t\t\t\t@if (field.name) {\n\t\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.list || field.url) {\n\t\t\t\t\t\t<!-- Vorschl\u00E4ge: eigener Zweig, weil MatAutocompleteTrigger den DefaultValueAccessor ersetzt\n\t\t\t\t\t\t (asynchrones writeValue, kein IME-Handling) - das darf normale Textfelder nicht treffen.\n\t\t\t\t\t\t Vorschl\u00E4ge, die erst per reloadOn kommen, brauchen initial list: [] (sonst Zweigwechsel). -->\n\t\t\t\t\t\t<input matInput\n\t\t\t\t\t\t [formControlName]=\"field.id\"\n\t\t\t\t\t\t [type]=\"field.subtype || 'text'\"\n\t\t\t\t\t\t autocomplete=\"off\"\n\t\t\t\t\t\t [xiriSuggest]=\"field\" #suggest=\"xiriSuggest\"\n\t\t\t\t\t\t [matAutocomplete]=\"auto\"\n\t\t\t\t\t\t [attr.minlength]=\"field.min\"\n\t\t\t\t\t\t [attr.maxlength]=\"field.max\"\n\t\t\t\t\t\t [required]=\"!!field.required\">\n\t\t\t\t\t\t<!-- Freitext darf nie \u00FCberschrieben werden - explizit, weil MAT_AUTOCOMPLETE_DEFAULT_OPTIONS\n\t\t\t\t\t\t der Host-App etwas anderes setzen k\u00F6nnte. Optionen disabled, sobald das Control gesperrt ist:\n\t\t\t\t\t\t Material schlie\u00DFt ein offenes Panel beim Disable nicht. -->\n\t\t\t\t\t\t<mat-autocomplete #auto=\"matAutocomplete\" [requireSelection]=\"false\" [autoActiveFirstOption]=\"false\"\n\t\t\t\t\t\t [autoSelectActiveOption]=\"false\">\n\t\t\t\t\t\t\t@for (opt of suggest.options(); track opt.name) {\n\t\t\t\t\t\t\t\t<mat-option [value]=\"opt.name\" [disabled]=\"formGroup.get(field.id)?.disabled\">{{ opt.name }}</mat-option>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</mat-autocomplete>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<input matInput\n\t\t\t\t\t\t [formControlName]=\"field.id\"\n\t\t\t\t\t\t [type]=\"field.subtype || 'text'\"\n\t\t\t\t\t\t [autocomplete]=\"field.name\"\n\t\t\t\t\t\t [attr.minlength]=\"field.min\"\n\t\t\t\t\t\t [attr.maxlength]=\"field.max\"\n\t\t\t\t\t\t [required]=\"!!field.required\">\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.textPrefix) {\n\t\t\t\t\t\t<span matTextPrefix=\"\">{{ field.textPrefix }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.textSuffix) {\n\t\t\t\t\t\t<span matTextSuffix=\"\">{{ field.textSuffix }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.iconPrefix) {\n\t\t\t\t\t\t<mat-icon matPrefix>{{ field.iconPrefix }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.iconSuffix) {\n\t\t\t\t\t\t<mat-icon matSuffix>{{ field.iconSuffix }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.max) {\n\t\t\t\t\t\t<mat-hint align=\"end\">{{ formGroup.get(field.id)?.value?.length || 0 }} / {{ field.max }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('number') {\n\t\t\t\t<mat-form-field [class]=\"field.class\" [formGroup]=\"formGroup\" floatLabel=\"auto\" [hidden]=\"field.hide\">\n\t\t\t\t\t@if (field.name) {\n\t\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t}\n\t\t\t\t\t<input matInput\n\t\t\t\t\t [formControlName]=\"field.id\"\n\t\t\t\t\t [autocomplete]=\"field.name || field.id\"\n\t\t\t\t\t [lang]=\"field.locale || ''\"\n\t\t\t\t\t [type]=\"field.type\"\n\t\t\t\t\t [attr.min]=\"field.min\"\n\t\t\t\t\t [attr.max]=\"field.max\"\n\t\t\t\t\t [required]=\"!!field.required\">\n\t\t\t\t\t@if (field.textPrefix) {\n\t\t\t\t\t\t<span matTextPrefix=\"\">{{ field.textPrefix }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.textSuffix) {\n\t\t\t\t\t\t<span matTextSuffix=\"\">{{ field.textSuffix }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.iconPrefix) {\n\t\t\t\t\t\t<mat-icon matPrefix>{{ field.iconPrefix }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.iconSuffix) {\n\t\t\t\t\t\t<mat-icon matSuffix>{{ field.iconSuffix }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('password') {\n\t\t\t\t<mat-form-field [class]=\"field.class\" [formGroup]=\"formGroup\" floatLabel=\"auto\" [hidden]=\"field.hide\">\n\t\t\t\t\t@if (field.name) {\n\t\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t}\n\t\t\t\t\t<input matInput\n\t\t\t\t\t [formControlName]=\"field.id\"\n\t\t\t\t\t [type]=\"field.pwdhide ? 'password' : 'text'\"\n\t\t\t\t\t [autocomplete]=\"field.name\"\n\t\t\t\t\t [attr.minlength]=\"field.min\"\n\t\t\t\t\t [attr.maxlength]=\"field.max\"\n\t\t\t\t\t [required]=\"!!field.required\">\n\t\t\t\t\t<button mat-icon-button matSuffix class=\"form-field-button\" (click)=\"field.pwdhide = !field.pwdhide\" [attr.aria-label]=\"'Hide password'\"\n\t\t\t\t\t [attr.aria-pressed]=\"field.pwdhide\">\n\t\t\t\t\t\t<mat-icon>{{ field.pwdhide ? 'visibility_off' : 'visibility' }}</mat-icon>\n\t\t\t\t\t</button>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.max) {\n\t\t\t\t\t\t<mat-hint align=\"end\">{{ formGroup.get(field.id)?.value?.length || 0 }} / {{ field.max }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('select') {\n\t\t\t\t<div class=\"add-wrap\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t<mat-form-field class=\"add-wrap-control\" [formGroup]=\"formGroup\" floatLabel=\"auto\">\n\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t@if (field.search === false && !field.selectAll) {\n\t\t\t\t\t\t<mat-select [formControlName]=\"field.id\" [multiple]=\"field.multiple\" [required]=\"!!field.required\" panelClass=\"selectPanel\">\n\t\t\t\t\t\t\t@for (x of field.list; track x.id) {\n\t\t\t\t\t\t\t\t<mat-option [value]=\"x.id\" [disabled]=\"x.disabled\">{{ x.name }}</mat-option>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</mat-select>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<mat-select [formControlName]=\"field.id\" [multiple]=\"field.multiple\" [required]=\"!!field.required\" panelClass=\"selectPanel\">\n\t\t\t\t\t\t\t<mat-option>\n\t\t\t\t\t\t\t\t<ngx-mat-select-search [formControl]=\"xiriSelect.formControl\" xiriSelect #xiriSelect=\"xiriSelect\"\n\t\t\t\t\t\t\t\t [values]=\"field.list || []\" [searching]=\"xiriSelect.searching\"\n\t\t\t\t\t\t\t\t [serverSideSearch]=\"!!field.serverSideSearch\" [serverUrl]=\"field.url || ''\"\n\t\t\t\t\t\t\t\t [serverParams]=\"field.params || {}\"\n\t\t\t\t\t\t\t\t [showToggleAllCheckbox]=\"!!field.multiple && !!field.selectAll && xiriSelect.hasSelectable()\"\n\t\t\t\t\t\t\t\t [toggleAllCheckboxChecked]=\"!!field.multiple && !!field.selectAll && xiriSelect.allSelected(formGroup.get(field.id)?.value)\"\n\t\t\t\t\t\t\t\t [toggleAllCheckboxIndeterminate]=\"!!field.multiple && !!field.selectAll && xiriSelect.someSelected(formGroup.get(field.id)?.value)\"\n\t\t\t\t\t\t\t\t (toggleAll)=\"xiriSelect.toggleSelectAll($event, formGroup.get(field.id))\"></ngx-mat-select-search>\n\t\t\t\t\t\t\t</mat-option>\n\t\t\t\t\t\t\t@for (x of xiriSelect.filter | async; track x.id) {\n\t\t\t\t\t\t\t\t<mat-option [value]=\"x.id\" [disabled]=\"x.disabled\">{{ x.name }}</mat-option>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</mat-select>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t\t@if (field.addUrl) {\n\t\t\t\t\t<button mat-icon-button type=\"button\" class=\"add-option\" aria-label=\"Neu anlegen\"\n\t\t\t\t\t [disabled]=\"disabled() || formGroup.get(field.id)?.disabled\" (click)=\"openAdd(field.id)\"><mat-icon>add</mat-icon></button>\n\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('treeselect') {\n\t\t\t\t<div class=\"treeselect add-wrap\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t<div class=\"add-wrap-control\">\n\t\t\t\t\t<xiri-treeselect [field]=\"field\" [formControlName]=\"field.id\"\n\t\t\t\t\t [class.error]=\"formGroup.get(field.id)?.touched && formGroup.get(field.id)?.invalid\"></xiri-treeselect>\n\t\t\t\t\t<div class=\"xhint\" aria-live=\"polite\" [class.error]=\"formGroup.get(field.id)?.touched && formGroup.get(field.id)?.invalid\">\n\t\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (field.max) {\n\t\t\t\t\t\t\t<mat-hint align=\"end\">{{ formGroup.get(field.id)?.value?.length || 0 }} / {{ field.max }}</mat-hint>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.touched && formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t@if (field.addUrl) {\n\t\t\t\t\t<button mat-icon-button type=\"button\" class=\"add-option\" aria-label=\"Neu anlegen\"\n\t\t\t\t\t [disabled]=\"disabled() || formGroup.get(field.id)?.disabled\" (click)=\"openAdd(field.id)\"><mat-icon>add</mat-icon></button>\n\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('date') {\n\t\t\t\t<mat-form-field [formGroup]=\"formGroup\" class=\"date\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t<xiri-date [field]=\"field\" [formControlName]=\"field.id\"></xiri-date>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('yearmonth') {\n\t\t\t\t<mat-form-field [formGroup]=\"formGroup\" class=\"yearmonth\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t<xiri-yearmonth [field]=\"field\" [formControlName]=\"field.id\"></xiri-yearmonth>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('daterange') {\n\t\t\t\t<mat-form-field [formGroup]=\"formGroup\" class=\"daterange\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t<xiri-date-range [field]=\"field\" [formControlName]=\"field.id\"></xiri-date-range>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('datetimerange') {\n\t\t\t\t<mat-form-field [formGroup]=\"formGroup\" class=\"datetimerange\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t<xiri-date-time-range [field]=\"field\" [formControlName]=\"field.id\"></xiri-date-time-range>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('bool') {\n\t\t\t\t<div class=\"bool\" [class]=\"field.class\" [formGroup]=\"formGroup\" [hidden]=\"field.hide\">\n\t\t\t\t\t<mat-checkbox [formControlName]=\"field.id\">{{ field.name }}</mat-checkbox>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('radio') {\n\t\t\t\t<div class=\"radio\" [class]=\"field.class\" [formGroup]=\"formGroup\" [hidden]=\"field.hide\">\n\t\t\t\t\t@if (field.name) {\n\t\t\t\t\t\t<span class=\"radio-label\" [id]=\"field.id + '-label'\">{{ field.name }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t<mat-radio-group\n\t\t\t\t\t\t[formControlName]=\"field.id\"\n\t\t\t\t\t\t[attr.aria-labelledby]=\"field.name ? field.id + '-label' : null\"\n\t\t\t\t\t>\n\t\t\t\t\t\t@for (x of field.list; track x.id) {\n\t\t\t\t\t\t\t<mat-radio-button [value]=\"x.id\" [disabled]=\"x.disabled\">{{ x.name }}</mat-radio-button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</mat-radio-group>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('volume') {\n\t\t\t\t<div [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<xiri-volume [field]=\"field\" [formControlName]=\"field.id\"></xiri-volume>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('timelimit') {\n\t\t\t\t<div [class]=\"field.class\" [formGroup]=\"formGroup\" [hidden]=\"field.hide\">\n\t\t\t\t\t<xiri-timelimit matInput [formControlName]=\"field.id\" [required]=\"!!field.required\" [texts]=\"field.texts || {}\"></xiri-timelimit>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('textarea') {\n\t\t\t\t<mat-form-field [class]=\"field.class\" [formGroup]=\"formGroup\" [hidden]=\"field.hide\">\n\t\t\t\t\t@if (field.name) {\n\t\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t}\n\t\t\t\t\t<textarea matInput [formControlName]=\"field.id\" [required]=\"!!field.required\" [rows]=\"field.rows || 5\"></textarea>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.max) {\n\t\t\t\t\t\t<mat-hint align=\"end\">{{ formGroup.get(field.id)?.value?.length || 0 }} / {{ field.max }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('file') {\n\t\t\t\t<div [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<xiri-file [field]=\"field\" [formControlName]=\"field.id\"></xiri-file>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('info') {\n\t\t\t\t<div class=\"info\" [class]=\"field.class\">{{ field.value }}</div>\n\t\t\t}\n\t\t\t@case ('header') {\n\t\t\t\t@if (field.collapsible) {\n\t\t\t\t\t<div class=\"header collapsible\" [class]=\"field.class\" role=\"button\" tabindex=\"0\"\n\t\t\t\t\t [attr.aria-expanded]=\"!isSectionCollapsed(field.id)\"\n\t\t\t\t\t (click)=\"toggleSection(field)\" (keydown.enter)=\"toggleSection(field)\" (keydown.space)=\"toggleSection(field); $event.preventDefault()\">\n\t\t\t\t\t\t<mat-icon class=\"collapse-icon\" [class.collapsed]=\"isSectionCollapsed(field.id)\">expand_more</mat-icon>\n\t\t\t\t\t\t{{ field.value }}\n\t\t\t\t\t</div>\n\t\t\t\t} @else {\n\t\t\t\t\t<div class=\"header\" [class]=\"field.class\">{{ field.value }}</div>\n\t\t\t\t}\n\t\t\t}\n\t\t\t@case ('divider') {\n\t\t\t\t<div class=\"divider\" [class]=\"field.class\">\n\t\t\t\t\t@if (field.value) {\n\t\t\t\t\t\t<span class=\"divider-text\">{{ field.value }}</span>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('html') {\n\t\t\t\t<div class=\"html\" [class]=\"field.class\" [innerHtml]=\"$any(field.value) | safeHtml\"></div>\n\t\t\t}\n\t\t\t@case ('question') {\n\t\t\t\t<div class=\"xcol question\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<div class=\"left\">\n\t\t\t\t\t\t<mat-icon [class]=\"field.iconColor || 'warn'\" inline=\"true\">{{ field.icon }}</mat-icon>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"right\">{{ field.value }}</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('waiting') {\n\t\t\t\t<div class=\"xcol waiting\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<div class=\"left\">\n\t\t\t\t\t\t@if (!field.done) {\n\t\t\t\t\t\t\t<mat-spinner diameter=\"40\"></mat-spinner>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (field.done) {\n\t\t\t\t\t\t\t<mat-icon inline=\"true\">done</mat-icon>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"right\">{{ field.value }}</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('chips') {\n\t\t\t\t<div class=\"add-wrap\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<xiri-chips class=\"add-wrap-control\" [field]=\"field\" [formControlName]=\"field.id\"></xiri-chips>\n\t\t\t\t\t@if (field.addUrl) {\n\t\t\t\t\t\t<button mat-icon-button type=\"button\" class=\"add-option\" aria-label=\"Neu anlegen\"\n\t\t\t\t\t\t [disabled]=\"disabled() || formGroup.get(field.id)?.disabled\" (click)=\"openAdd(field.id)\"><mat-icon>add</mat-icon></button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@default {\n\t\t\t\t<div>default: {{ field.type }}</div>\n\t\t\t}\n\t\t}\n\t\t}\n\t}\n</form>\n", styles: [":host{position:relative}.reloadbar{position:absolute;top:0;left:0;right:0;z-index:1}.dynamic-form{grid-row-gap:7px}.dynamic-form>mat-form-field,.dynamic-form>.add-wrap{align-self:start}.dynamic-form .add-wrap{display:flex;align-items:flex-start;gap:4px}.dynamic-form .add-wrap .add-wrap-control{flex:1;min-width:0}.dynamic-form .add-wrap .add-option{margin-top:4px}.dynamic-form mat-form-field mat-icon{--mat-icon-color: var(--xiri-formfield-icon-color)}.dynamic-form.line{grid-row-gap:5px}.dynamic-form.small{grid-row-gap:2px}.dynamic-form .xhint{display:flex;min-height:20px;margin-top:4px}.dynamic-form .xhint mat-hint{font-size:var(--xiri-font-size-helper);padding:1px 16px 0}.dynamic-form .xhint mat-hint.mat-mdc-form-field-hint-end{flex:1;text-align:right}.dynamic-form .xhint mat-error{font-size:var(--xiri-font-size-helper);padding:1px 16px 0}.dynamic-form .xhint.error mat-hint{display:none}.dynamic-form .date{min-width:min(9.5rem,100%)}.dynamic-form .date.datetime,.dynamic-form .daterange{min-width:min(14.5rem,100%)}.dynamic-form .datetimerange{min-width:min(18.5rem,100%)}.dynamic-form .bool{display:flex;flex-direction:column}.dynamic-form .bool mat-hint{font-size:var(--xiri-font-size-helper);margin-top:-8px;padding-left:44px}.dynamic-form .radio{display:flex;flex-direction:column;gap:var(--xiri-spacing-xs)}.dynamic-form .radio .radio-label{font-size:var(--xiri-font-size-label)}.dynamic-form .radio mat-radio-group{display:flex;flex-wrap:wrap;gap:var(--xiri-spacing-xs) var(--xiri-spacing-md)}.dynamic-form .radio mat-hint{font-size:var(--xiri-font-size-helper)}.dynamic-form .info{padding-top:.8rem;padding-bottom:.4rem;color:var(--primary, #2892D9)}.dynamic-form .header{font-size:var(--xiri-font-size-title);padding-top:.8rem;padding-bottom:.4rem;color:var(--primary, #2892D9)}.dynamic-form .header.collapsible{cursor:pointer;display:flex;align-items:center;gap:.25rem;-webkit-user-select:none;user-select:none;border-radius:var(--xiri-radius-xs);padding:.5rem .25rem;margin:.25rem 0}.dynamic-form .header.collapsible:hover{background:color-mix(in srgb,var(--primary, #2892D9) 8%,transparent)}.dynamic-form .header.collapsible .collapse-icon{transition:transform var(--xiri-duration-fast) var(--xiri-easing-standard)}.dynamic-form .header.collapsible .collapse-icon.collapsed{transform:rotate(-90deg)}.dynamic-form .divider{width:100%;display:flex;align-items:center;padding:.5rem 0;margin:.25rem 0}.dynamic-form .divider:before,.dynamic-form .divider:after{content:\"\";flex:1;height:1px;background:var(--outline-variant, var(--mat-sys-outline-variant, rgba(0, 0, 0, .12)))}.dynamic-form .divider .divider-text{padding:0 1rem;font-size:var(--xiri-font-size-helper);color:var(--on-surface-variant, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)));white-space:nowrap}.dynamic-form .question,.dynamic-form .waiting{display:flex}.dynamic-form .question .left,.dynamic-form .waiting .left{font-size:var(--xiri-font-size-display);padding-right:1rem}.dynamic-form .question{align-items:center}.dynamic-form .question .left mat-icon{height:auto;width:auto;line-height:1;overflow:visible}.dynamic-form .form-field-button{margin-left:12px;margin-right:12px}.mat-mdc-select-panel.selectPanel{max-height:max(50vh,256px)}[hidden]{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: NgxMatSelectSearchModule }, { kind: "component", type: i2.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "directive", type: XiriSelectDirective, selector: "[xiriSelect]", inputs: ["predicate", "compare", "serverSideSearch", "serverUrl", "serverParams", "values"], exportAs: ["xiriSelect"] }, { kind: "component", type: XiriTreeselectComponent, selector: "xiri-treeselect", inputs: ["field", "value"] }, { kind: "component", type: XiriDateComponent, selector: "xiri-date", inputs: ["field", "value"] }, { kind: "component", type: XiriYearMonthComponent, selector: "xiri-yearmonth", inputs: ["field", "value"] }, { kind: "component", type: XiriDateRangeComponent, selector: "xiri-date-range", inputs: ["field", "value"] }, { kind: "component", type: XiriDateTimeRangeComponent, selector: "xiri-date-time-range", inputs: ["field", "value"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: XiriVolumeComponent, selector: "xiri-volume", inputs: ["field", "value"] }, { kind: "component", type: XiriTimelimitComponent, selector: "xiri-timelimit", inputs: ["placeholder", "required", "disabled", "value", "texts"] }, { kind: "component", type: XiriFileComponent, selector: "xiri-file", inputs: ["value", "field"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: XiriChipsComponent, selector: "xiri-chips", inputs: ["field"] }, { kind: "directive", type: XiriSuggestDirective, selector: "input[xiriSuggest]", inputs: ["xiriSuggest"], exportAs: ["xiriSuggest"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }] }); }
|
|
3197
3330
|
}
|
|
3198
3331
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriFormFieldsComponent, decorators: [{
|
|
3199
3332
|
type: Component,
|
|
@@ -3229,15 +3362,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
3229
3362
|
AsyncPipe,
|
|
3230
3363
|
SafehtmlPipe,
|
|
3231
3364
|
XiriChipsComponent,
|
|
3232
|
-
], template: "@if (reloading()) {\n\t<mat-progress-bar class=\"reloadbar\" mode=\"indeterminate\"></mat-progress-bar>\n}\n<form class=\"xrow dynamic-form\" [formGroup]=\"formGroup\" [class]=\"display()\">\n\t@for (field of displayFields(); track field.id) {\n\t\t@if (isFieldVisible(field)) {\n\t\t@switch (field.type) {\n\t\t\t@case ('text') {\n\t\t\t\t<mat-form-field [class]=\"field.class\" [formGroup]=\"formGroup\" floatLabel=\"auto\" [hidden]=\"field.hide\">\n\t\t\t\t\t@if (field.name) {\n\t\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t}\n\t\t\t\t\t<input matInput\n\t\t\t\t\t [formControlName]=\"field.id\"\n\t\t\t\t\t [type]=\"field.subtype || 'text'\"\n\t\t\t\t\t [autocomplete]=\"field.name\"\n\t\t\t\t\t [attr.minlength]=\"field.min\"\n\t\t\t\t\t [attr.maxlength]=\"field.max\"\n\t\t\t\t\t [required]=\"!!field.required\">\n\t\t\t\t\t@if (field.textPrefix) {\n\t\t\t\t\t\t<span matTextPrefix=\"\">{{ field.textPrefix }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.textSuffix) {\n\t\t\t\t\t\t<span matTextSuffix=\"\">{{ field.textSuffix }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.iconPrefix) {\n\t\t\t\t\t\t<mat-icon matPrefix>{{ field.iconPrefix }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.iconSuffix) {\n\t\t\t\t\t\t<mat-icon matSuffix>{{ field.iconSuffix }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.max) {\n\t\t\t\t\t\t<mat-hint align=\"end\">{{ formGroup.get(field.id)?.value?.length || 0 }} / {{ field.max }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('number') {\n\t\t\t\t<mat-form-field [class]=\"field.class\" [formGroup]=\"formGroup\" floatLabel=\"auto\" [hidden]=\"field.hide\">\n\t\t\t\t\t@if (field.name) {\n\t\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t}\n\t\t\t\t\t<input matInput\n\t\t\t\t\t [formControlName]=\"field.id\"\n\t\t\t\t\t [autocomplete]=\"field.name || field.id\"\n\t\t\t\t\t [lang]=\"field.locale || ''\"\n\t\t\t\t\t [type]=\"field.type\"\n\t\t\t\t\t [attr.min]=\"field.min\"\n\t\t\t\t\t [attr.max]=\"field.max\"\n\t\t\t\t\t [required]=\"!!field.required\">\n\t\t\t\t\t@if (field.textPrefix) {\n\t\t\t\t\t\t<span matTextPrefix=\"\">{{ field.textPrefix }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.textSuffix) {\n\t\t\t\t\t\t<span matTextSuffix=\"\">{{ field.textSuffix }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.iconPrefix) {\n\t\t\t\t\t\t<mat-icon matPrefix>{{ field.iconPrefix }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.iconSuffix) {\n\t\t\t\t\t\t<mat-icon matSuffix>{{ field.iconSuffix }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('password') {\n\t\t\t\t<mat-form-field [class]=\"field.class\" [formGroup]=\"formGroup\" floatLabel=\"auto\" [hidden]=\"field.hide\">\n\t\t\t\t\t@if (field.name) {\n\t\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t}\n\t\t\t\t\t<input matInput\n\t\t\t\t\t [formControlName]=\"field.id\"\n\t\t\t\t\t [type]=\"field.pwdhide ? 'password' : 'text'\"\n\t\t\t\t\t [autocomplete]=\"field.name\"\n\t\t\t\t\t [attr.minlength]=\"field.min\"\n\t\t\t\t\t [attr.maxlength]=\"field.max\"\n\t\t\t\t\t [required]=\"!!field.required\">\n\t\t\t\t\t<button mat-icon-button matSuffix class=\"form-field-button\" (click)=\"field.pwdhide = !field.pwdhide\" [attr.aria-label]=\"'Hide password'\"\n\t\t\t\t\t [attr.aria-pressed]=\"field.pwdhide\">\n\t\t\t\t\t\t<mat-icon>{{ field.pwdhide ? 'visibility_off' : 'visibility' }}</mat-icon>\n\t\t\t\t\t</button>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.max) {\n\t\t\t\t\t\t<mat-hint align=\"end\">{{ formGroup.get(field.id)?.value?.length || 0 }} / {{ field.max }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('select') {\n\t\t\t\t<div class=\"add-wrap\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t<mat-form-field class=\"add-wrap-control\" [formGroup]=\"formGroup\" floatLabel=\"auto\">\n\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t@if (field.search === false && !field.selectAll) {\n\t\t\t\t\t\t<mat-select [formControlName]=\"field.id\" [multiple]=\"field.multiple\" [required]=\"!!field.required\" panelClass=\"selectPanel\">\n\t\t\t\t\t\t\t@for (x of field.list; track x.id) {\n\t\t\t\t\t\t\t\t<mat-option [value]=\"x.id\" [disabled]=\"x.disabled\">{{ x.name }}</mat-option>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</mat-select>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<mat-select [formControlName]=\"field.id\" [multiple]=\"field.multiple\" [required]=\"!!field.required\" panelClass=\"selectPanel\">\n\t\t\t\t\t\t\t<mat-option>\n\t\t\t\t\t\t\t\t<ngx-mat-select-search [formControl]=\"xiriSelect.formControl\" xiriSelect #xiriSelect=\"xiriSelect\"\n\t\t\t\t\t\t\t\t [values]=\"field.list || []\" [searching]=\"xiriSelect.searching\"\n\t\t\t\t\t\t\t\t [serverSideSearch]=\"!!field.serverSideSearch\" [serverUrl]=\"field.url || ''\"\n\t\t\t\t\t\t\t\t [serverParams]=\"field.params || {}\"\n\t\t\t\t\t\t\t\t [showToggleAllCheckbox]=\"!!field.multiple && !!field.selectAll && xiriSelect.hasSelectable()\"\n\t\t\t\t\t\t\t\t [toggleAllCheckboxChecked]=\"!!field.multiple && !!field.selectAll && xiriSelect.allSelected(formGroup.get(field.id)?.value)\"\n\t\t\t\t\t\t\t\t [toggleAllCheckboxIndeterminate]=\"!!field.multiple && !!field.selectAll && xiriSelect.someSelected(formGroup.get(field.id)?.value)\"\n\t\t\t\t\t\t\t\t (toggleAll)=\"xiriSelect.toggleSelectAll($event, formGroup.get(field.id))\"></ngx-mat-select-search>\n\t\t\t\t\t\t\t</mat-option>\n\t\t\t\t\t\t\t@for (x of xiriSelect.filter | async; track x.id) {\n\t\t\t\t\t\t\t\t<mat-option [value]=\"x.id\" [disabled]=\"x.disabled\">{{ x.name }}</mat-option>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</mat-select>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t\t@if (field.addUrl) {\n\t\t\t\t\t<button mat-icon-button type=\"button\" class=\"add-option\" aria-label=\"Neu anlegen\"\n\t\t\t\t\t [disabled]=\"disabled() || formGroup.get(field.id)?.disabled\" (click)=\"openAdd(field.id)\"><mat-icon>add</mat-icon></button>\n\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('treeselect') {\n\t\t\t\t<div class=\"treeselect add-wrap\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t<div class=\"add-wrap-control\">\n\t\t\t\t\t<xiri-treeselect [field]=\"field\" [formControlName]=\"field.id\"\n\t\t\t\t\t [class.error]=\"formGroup.get(field.id)?.touched && formGroup.get(field.id)?.invalid\"></xiri-treeselect>\n\t\t\t\t\t<div class=\"xhint\" aria-live=\"polite\" [class.error]=\"formGroup.get(field.id)?.touched && formGroup.get(field.id)?.invalid\">\n\t\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (field.max) {\n\t\t\t\t\t\t\t<mat-hint align=\"end\">{{ formGroup.get(field.id)?.value?.length || 0 }} / {{ field.max }}</mat-hint>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.touched && formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t@if (field.addUrl) {\n\t\t\t\t\t<button mat-icon-button type=\"button\" class=\"add-option\" aria-label=\"Neu anlegen\"\n\t\t\t\t\t [disabled]=\"disabled() || formGroup.get(field.id)?.disabled\" (click)=\"openAdd(field.id)\"><mat-icon>add</mat-icon></button>\n\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('date') {\n\t\t\t\t<mat-form-field [formGroup]=\"formGroup\" class=\"date\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t<xiri-date [field]=\"field\" [formControlName]=\"field.id\"></xiri-date>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('yearmonth') {\n\t\t\t\t<mat-form-field [formGroup]=\"formGroup\" class=\"yearmonth\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t<xiri-yearmonth [field]=\"field\" [formControlName]=\"field.id\"></xiri-yearmonth>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('daterange') {\n\t\t\t\t<mat-form-field [formGroup]=\"formGroup\" class=\"daterange\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t<xiri-date-range [field]=\"field\" [formControlName]=\"field.id\"></xiri-date-range>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('datetimerange') {\n\t\t\t\t<mat-form-field [formGroup]=\"formGroup\" class=\"datetimerange\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t<xiri-date-time-range [field]=\"field\" [formControlName]=\"field.id\"></xiri-date-time-range>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('bool') {\n\t\t\t\t<div class=\"bool\" [class]=\"field.class\" [formGroup]=\"formGroup\" [hidden]=\"field.hide\">\n\t\t\t\t\t<mat-checkbox [formControlName]=\"field.id\">{{ field.name }}</mat-checkbox>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('radio') {\n\t\t\t\t<div class=\"radio\" [class]=\"field.class\" [formGroup]=\"formGroup\" [hidden]=\"field.hide\">\n\t\t\t\t\t@if (field.name) {\n\t\t\t\t\t\t<span class=\"radio-label\" [id]=\"field.id + '-label'\">{{ field.name }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t<mat-radio-group\n\t\t\t\t\t\t[formControlName]=\"field.id\"\n\t\t\t\t\t\t[attr.aria-labelledby]=\"field.name ? field.id + '-label' : null\"\n\t\t\t\t\t>\n\t\t\t\t\t\t@for (x of field.list; track x.id) {\n\t\t\t\t\t\t\t<mat-radio-button [value]=\"x.id\" [disabled]=\"x.disabled\">{{ x.name }}</mat-radio-button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</mat-radio-group>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('volume') {\n\t\t\t\t<div [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<xiri-volume [field]=\"field\" [formControlName]=\"field.id\"></xiri-volume>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('timelimit') {\n\t\t\t\t<div [class]=\"field.class\" [formGroup]=\"formGroup\" [hidden]=\"field.hide\">\n\t\t\t\t\t<xiri-timelimit matInput [formControlName]=\"field.id\" [required]=\"!!field.required\" [texts]=\"field.texts || {}\"></xiri-timelimit>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('textarea') {\n\t\t\t\t<mat-form-field [class]=\"field.class\" [formGroup]=\"formGroup\" [hidden]=\"field.hide\">\n\t\t\t\t\t@if (field.name) {\n\t\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t}\n\t\t\t\t\t<textarea matInput [formControlName]=\"field.id\" [required]=\"!!field.required\" [rows]=\"field.rows || 5\"></textarea>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.max) {\n\t\t\t\t\t\t<mat-hint align=\"end\">{{ formGroup.get(field.id)?.value?.length || 0 }} / {{ field.max }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('file') {\n\t\t\t\t<div [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<xiri-file [field]=\"field\" [formControlName]=\"field.id\"></xiri-file>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('info') {\n\t\t\t\t<div class=\"info\" [class]=\"field.class\">{{ field.value }}</div>\n\t\t\t}\n\t\t\t@case ('header') {\n\t\t\t\t@if (field.collapsible) {\n\t\t\t\t\t<div class=\"header collapsible\" [class]=\"field.class\" role=\"button\" tabindex=\"0\"\n\t\t\t\t\t [attr.aria-expanded]=\"!isSectionCollapsed(field.id)\"\n\t\t\t\t\t (click)=\"toggleSection(field)\" (keydown.enter)=\"toggleSection(field)\" (keydown.space)=\"toggleSection(field); $event.preventDefault()\">\n\t\t\t\t\t\t<mat-icon class=\"collapse-icon\" [class.collapsed]=\"isSectionCollapsed(field.id)\">expand_more</mat-icon>\n\t\t\t\t\t\t{{ field.value }}\n\t\t\t\t\t</div>\n\t\t\t\t} @else {\n\t\t\t\t\t<div class=\"header\" [class]=\"field.class\">{{ field.value }}</div>\n\t\t\t\t}\n\t\t\t}\n\t\t\t@case ('divider') {\n\t\t\t\t<div class=\"divider\" [class]=\"field.class\">\n\t\t\t\t\t@if (field.value) {\n\t\t\t\t\t\t<span class=\"divider-text\">{{ field.value }}</span>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('html') {\n\t\t\t\t<div class=\"html\" [class]=\"field.class\" [innerHtml]=\"$any(field.value) | safeHtml\"></div>\n\t\t\t}\n\t\t\t@case ('question') {\n\t\t\t\t<div class=\"xcol question\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<div class=\"left\">\n\t\t\t\t\t\t<mat-icon [class]=\"field.iconColor || 'warn'\" inline=\"true\">{{ field.icon }}</mat-icon>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"right\">{{ field.value }}</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('waiting') {\n\t\t\t\t<div class=\"xcol waiting\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<div class=\"left\">\n\t\t\t\t\t\t@if (!field.done) {\n\t\t\t\t\t\t\t<mat-spinner diameter=\"40\"></mat-spinner>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (field.done) {\n\t\t\t\t\t\t\t<mat-icon inline=\"true\">done</mat-icon>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"right\">{{ field.value }}</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('chips') {\n\t\t\t\t<div class=\"add-wrap\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<xiri-chips class=\"add-wrap-control\" [field]=\"field\" [formControlName]=\"field.id\"></xiri-chips>\n\t\t\t\t\t@if (field.addUrl) {\n\t\t\t\t\t\t<button mat-icon-button type=\"button\" class=\"add-option\" aria-label=\"Neu anlegen\"\n\t\t\t\t\t\t [disabled]=\"disabled() || formGroup.get(field.id)?.disabled\" (click)=\"openAdd(field.id)\"><mat-icon>add</mat-icon></button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@default {\n\t\t\t\t<div>default: {{ field.type }}</div>\n\t\t\t}\n\t\t}\n\t\t}\n\t}\n</form>\n", styles: [":host{position:relative}.reloadbar{position:absolute;top:0;left:0;right:0;z-index:1}.dynamic-form{grid-row-gap:7px}.dynamic-form>mat-form-field,.dynamic-form>.add-wrap{align-self:start}.dynamic-form .add-wrap{display:flex;align-items:flex-start;gap:4px}.dynamic-form .add-wrap .add-wrap-control{flex:1;min-width:0}.dynamic-form .add-wrap .add-option{margin-top:4px}.dynamic-form mat-form-field mat-icon{--mat-icon-color: var(--xiri-formfield-icon-color)}.dynamic-form.line{grid-row-gap:5px}.dynamic-form.small{grid-row-gap:2px}.dynamic-form .xhint{display:flex;min-height:20px;margin-top:4px}.dynamic-form .xhint mat-hint{font-size:var(--xiri-font-size-helper);padding:1px 16px 0}.dynamic-form .xhint mat-hint.mat-mdc-form-field-hint-end{flex:1;text-align:right}.dynamic-form .xhint mat-error{font-size:var(--xiri-font-size-helper);padding:1px 16px 0}.dynamic-form .xhint.error mat-hint{display:none}.dynamic-form .date{min-width:min(9.5rem,100%)}.dynamic-form .date.datetime,.dynamic-form .daterange{min-width:min(14.5rem,100%)}.dynamic-form .datetimerange{min-width:min(18.5rem,100%)}.dynamic-form .bool{display:flex;flex-direction:column}.dynamic-form .bool mat-hint{font-size:var(--xiri-font-size-helper);margin-top:-8px;padding-left:44px}.dynamic-form .radio{display:flex;flex-direction:column;gap:var(--xiri-spacing-xs)}.dynamic-form .radio .radio-label{font-size:var(--xiri-font-size-label)}.dynamic-form .radio mat-radio-group{display:flex;flex-wrap:wrap;gap:var(--xiri-spacing-xs) var(--xiri-spacing-md)}.dynamic-form .radio mat-hint{font-size:var(--xiri-font-size-helper)}.dynamic-form .info{padding-top:.8rem;padding-bottom:.4rem;color:var(--primary, #2892D9)}.dynamic-form .header{font-size:var(--xiri-font-size-title);padding-top:.8rem;padding-bottom:.4rem;color:var(--primary, #2892D9)}.dynamic-form .header.collapsible{cursor:pointer;display:flex;align-items:center;gap:.25rem;-webkit-user-select:none;user-select:none;border-radius:var(--xiri-radius-xs);padding:.5rem .25rem;margin:.25rem 0}.dynamic-form .header.collapsible:hover{background:color-mix(in srgb,var(--primary, #2892D9) 8%,transparent)}.dynamic-form .header.collapsible .collapse-icon{transition:transform var(--xiri-duration-fast) var(--xiri-easing-standard)}.dynamic-form .header.collapsible .collapse-icon.collapsed{transform:rotate(-90deg)}.dynamic-form .divider{width:100%;display:flex;align-items:center;padding:.5rem 0;margin:.25rem 0}.dynamic-form .divider:before,.dynamic-form .divider:after{content:\"\";flex:1;height:1px;background:var(--outline-variant, var(--mat-sys-outline-variant, rgba(0, 0, 0, .12)))}.dynamic-form .divider .divider-text{padding:0 1rem;font-size:var(--xiri-font-size-helper);color:var(--on-surface-variant, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)));white-space:nowrap}.dynamic-form .question,.dynamic-form .waiting{display:flex}.dynamic-form .question .left,.dynamic-form .waiting .left{font-size:var(--xiri-font-size-display);padding-right:1rem}.dynamic-form .question{align-items:center}.dynamic-form .question .left mat-icon{height:auto;width:auto;line-height:1;overflow:visible}.dynamic-form .form-field-button{margin-left:12px;margin-right:12px}.mat-mdc-select-panel.selectPanel{max-height:max(50vh,256px)}[hidden]{display:none!important}\n"] }]
|
|
3233
|
-
|
|
3365
|
+
XiriSuggestDirective,
|
|
3366
|
+
MatAutocomplete,
|
|
3367
|
+
MatAutocompleteTrigger,
|
|
3368
|
+
], template: "@if (reloading()) {\n\t<mat-progress-bar class=\"reloadbar\" mode=\"indeterminate\"></mat-progress-bar>\n}\n<form class=\"xrow dynamic-form\" [formGroup]=\"formGroup\" [class]=\"display()\">\n\t@for (field of displayFields(); track field.id) {\n\t\t@if (isFieldVisible(field)) {\n\t\t@switch (field.type) {\n\t\t\t@case ('text') {\n\t\t\t\t<mat-form-field [class]=\"field.class\" [formGroup]=\"formGroup\" floatLabel=\"auto\" [hidden]=\"field.hide\">\n\t\t\t\t\t@if (field.name) {\n\t\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.list || field.url) {\n\t\t\t\t\t\t<!-- Vorschl\u00E4ge: eigener Zweig, weil MatAutocompleteTrigger den DefaultValueAccessor ersetzt\n\t\t\t\t\t\t (asynchrones writeValue, kein IME-Handling) - das darf normale Textfelder nicht treffen.\n\t\t\t\t\t\t Vorschl\u00E4ge, die erst per reloadOn kommen, brauchen initial list: [] (sonst Zweigwechsel). -->\n\t\t\t\t\t\t<input matInput\n\t\t\t\t\t\t [formControlName]=\"field.id\"\n\t\t\t\t\t\t [type]=\"field.subtype || 'text'\"\n\t\t\t\t\t\t autocomplete=\"off\"\n\t\t\t\t\t\t [xiriSuggest]=\"field\" #suggest=\"xiriSuggest\"\n\t\t\t\t\t\t [matAutocomplete]=\"auto\"\n\t\t\t\t\t\t [attr.minlength]=\"field.min\"\n\t\t\t\t\t\t [attr.maxlength]=\"field.max\"\n\t\t\t\t\t\t [required]=\"!!field.required\">\n\t\t\t\t\t\t<!-- Freitext darf nie \u00FCberschrieben werden - explizit, weil MAT_AUTOCOMPLETE_DEFAULT_OPTIONS\n\t\t\t\t\t\t der Host-App etwas anderes setzen k\u00F6nnte. Optionen disabled, sobald das Control gesperrt ist:\n\t\t\t\t\t\t Material schlie\u00DFt ein offenes Panel beim Disable nicht. -->\n\t\t\t\t\t\t<mat-autocomplete #auto=\"matAutocomplete\" [requireSelection]=\"false\" [autoActiveFirstOption]=\"false\"\n\t\t\t\t\t\t [autoSelectActiveOption]=\"false\">\n\t\t\t\t\t\t\t@for (opt of suggest.options(); track opt.name) {\n\t\t\t\t\t\t\t\t<mat-option [value]=\"opt.name\" [disabled]=\"formGroup.get(field.id)?.disabled\">{{ opt.name }}</mat-option>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</mat-autocomplete>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<input matInput\n\t\t\t\t\t\t [formControlName]=\"field.id\"\n\t\t\t\t\t\t [type]=\"field.subtype || 'text'\"\n\t\t\t\t\t\t [autocomplete]=\"field.name\"\n\t\t\t\t\t\t [attr.minlength]=\"field.min\"\n\t\t\t\t\t\t [attr.maxlength]=\"field.max\"\n\t\t\t\t\t\t [required]=\"!!field.required\">\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.textPrefix) {\n\t\t\t\t\t\t<span matTextPrefix=\"\">{{ field.textPrefix }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.textSuffix) {\n\t\t\t\t\t\t<span matTextSuffix=\"\">{{ field.textSuffix }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.iconPrefix) {\n\t\t\t\t\t\t<mat-icon matPrefix>{{ field.iconPrefix }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.iconSuffix) {\n\t\t\t\t\t\t<mat-icon matSuffix>{{ field.iconSuffix }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.max) {\n\t\t\t\t\t\t<mat-hint align=\"end\">{{ formGroup.get(field.id)?.value?.length || 0 }} / {{ field.max }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('number') {\n\t\t\t\t<mat-form-field [class]=\"field.class\" [formGroup]=\"formGroup\" floatLabel=\"auto\" [hidden]=\"field.hide\">\n\t\t\t\t\t@if (field.name) {\n\t\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t}\n\t\t\t\t\t<input matInput\n\t\t\t\t\t [formControlName]=\"field.id\"\n\t\t\t\t\t [autocomplete]=\"field.name || field.id\"\n\t\t\t\t\t [lang]=\"field.locale || ''\"\n\t\t\t\t\t [type]=\"field.type\"\n\t\t\t\t\t [attr.min]=\"field.min\"\n\t\t\t\t\t [attr.max]=\"field.max\"\n\t\t\t\t\t [required]=\"!!field.required\">\n\t\t\t\t\t@if (field.textPrefix) {\n\t\t\t\t\t\t<span matTextPrefix=\"\">{{ field.textPrefix }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.textSuffix) {\n\t\t\t\t\t\t<span matTextSuffix=\"\">{{ field.textSuffix }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.iconPrefix) {\n\t\t\t\t\t\t<mat-icon matPrefix>{{ field.iconPrefix }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.iconSuffix) {\n\t\t\t\t\t\t<mat-icon matSuffix>{{ field.iconSuffix }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('password') {\n\t\t\t\t<mat-form-field [class]=\"field.class\" [formGroup]=\"formGroup\" floatLabel=\"auto\" [hidden]=\"field.hide\">\n\t\t\t\t\t@if (field.name) {\n\t\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t}\n\t\t\t\t\t<input matInput\n\t\t\t\t\t [formControlName]=\"field.id\"\n\t\t\t\t\t [type]=\"field.pwdhide ? 'password' : 'text'\"\n\t\t\t\t\t [autocomplete]=\"field.name\"\n\t\t\t\t\t [attr.minlength]=\"field.min\"\n\t\t\t\t\t [attr.maxlength]=\"field.max\"\n\t\t\t\t\t [required]=\"!!field.required\">\n\t\t\t\t\t<button mat-icon-button matSuffix class=\"form-field-button\" (click)=\"field.pwdhide = !field.pwdhide\" [attr.aria-label]=\"'Hide password'\"\n\t\t\t\t\t [attr.aria-pressed]=\"field.pwdhide\">\n\t\t\t\t\t\t<mat-icon>{{ field.pwdhide ? 'visibility_off' : 'visibility' }}</mat-icon>\n\t\t\t\t\t</button>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.max) {\n\t\t\t\t\t\t<mat-hint align=\"end\">{{ formGroup.get(field.id)?.value?.length || 0 }} / {{ field.max }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('select') {\n\t\t\t\t<div class=\"add-wrap\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t<mat-form-field class=\"add-wrap-control\" [formGroup]=\"formGroup\" floatLabel=\"auto\">\n\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t@if (field.search === false && !field.selectAll) {\n\t\t\t\t\t\t<mat-select [formControlName]=\"field.id\" [multiple]=\"field.multiple\" [required]=\"!!field.required\" panelClass=\"selectPanel\">\n\t\t\t\t\t\t\t@for (x of field.list; track x.id) {\n\t\t\t\t\t\t\t\t<mat-option [value]=\"x.id\" [disabled]=\"x.disabled\">{{ x.name }}</mat-option>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</mat-select>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<mat-select [formControlName]=\"field.id\" [multiple]=\"field.multiple\" [required]=\"!!field.required\" panelClass=\"selectPanel\">\n\t\t\t\t\t\t\t<mat-option>\n\t\t\t\t\t\t\t\t<ngx-mat-select-search [formControl]=\"xiriSelect.formControl\" xiriSelect #xiriSelect=\"xiriSelect\"\n\t\t\t\t\t\t\t\t [values]=\"field.list || []\" [searching]=\"xiriSelect.searching\"\n\t\t\t\t\t\t\t\t [serverSideSearch]=\"!!field.serverSideSearch\" [serverUrl]=\"field.url || ''\"\n\t\t\t\t\t\t\t\t [serverParams]=\"field.params || {}\"\n\t\t\t\t\t\t\t\t [showToggleAllCheckbox]=\"!!field.multiple && !!field.selectAll && xiriSelect.hasSelectable()\"\n\t\t\t\t\t\t\t\t [toggleAllCheckboxChecked]=\"!!field.multiple && !!field.selectAll && xiriSelect.allSelected(formGroup.get(field.id)?.value)\"\n\t\t\t\t\t\t\t\t [toggleAllCheckboxIndeterminate]=\"!!field.multiple && !!field.selectAll && xiriSelect.someSelected(formGroup.get(field.id)?.value)\"\n\t\t\t\t\t\t\t\t (toggleAll)=\"xiriSelect.toggleSelectAll($event, formGroup.get(field.id))\"></ngx-mat-select-search>\n\t\t\t\t\t\t\t</mat-option>\n\t\t\t\t\t\t\t@for (x of xiriSelect.filter | async; track x.id) {\n\t\t\t\t\t\t\t\t<mat-option [value]=\"x.id\" [disabled]=\"x.disabled\">{{ x.name }}</mat-option>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</mat-select>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t\t@if (field.addUrl) {\n\t\t\t\t\t<button mat-icon-button type=\"button\" class=\"add-option\" aria-label=\"Neu anlegen\"\n\t\t\t\t\t [disabled]=\"disabled() || formGroup.get(field.id)?.disabled\" (click)=\"openAdd(field.id)\"><mat-icon>add</mat-icon></button>\n\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('treeselect') {\n\t\t\t\t<div class=\"treeselect add-wrap\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t<div class=\"add-wrap-control\">\n\t\t\t\t\t<xiri-treeselect [field]=\"field\" [formControlName]=\"field.id\"\n\t\t\t\t\t [class.error]=\"formGroup.get(field.id)?.touched && formGroup.get(field.id)?.invalid\"></xiri-treeselect>\n\t\t\t\t\t<div class=\"xhint\" aria-live=\"polite\" [class.error]=\"formGroup.get(field.id)?.touched && formGroup.get(field.id)?.invalid\">\n\t\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (field.max) {\n\t\t\t\t\t\t\t<mat-hint align=\"end\">{{ formGroup.get(field.id)?.value?.length || 0 }} / {{ field.max }}</mat-hint>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.touched && formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t@if (field.addUrl) {\n\t\t\t\t\t<button mat-icon-button type=\"button\" class=\"add-option\" aria-label=\"Neu anlegen\"\n\t\t\t\t\t [disabled]=\"disabled() || formGroup.get(field.id)?.disabled\" (click)=\"openAdd(field.id)\"><mat-icon>add</mat-icon></button>\n\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('date') {\n\t\t\t\t<mat-form-field [formGroup]=\"formGroup\" class=\"date\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t<xiri-date [field]=\"field\" [formControlName]=\"field.id\"></xiri-date>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('yearmonth') {\n\t\t\t\t<mat-form-field [formGroup]=\"formGroup\" class=\"yearmonth\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t<xiri-yearmonth [field]=\"field\" [formControlName]=\"field.id\"></xiri-yearmonth>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('daterange') {\n\t\t\t\t<mat-form-field [formGroup]=\"formGroup\" class=\"daterange\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t<xiri-date-range [field]=\"field\" [formControlName]=\"field.id\"></xiri-date-range>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('datetimerange') {\n\t\t\t\t<mat-form-field [formGroup]=\"formGroup\" class=\"datetimerange\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t<xiri-date-time-range [field]=\"field\" [formControlName]=\"field.id\"></xiri-date-time-range>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('bool') {\n\t\t\t\t<div class=\"bool\" [class]=\"field.class\" [formGroup]=\"formGroup\" [hidden]=\"field.hide\">\n\t\t\t\t\t<mat-checkbox [formControlName]=\"field.id\">{{ field.name }}</mat-checkbox>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('radio') {\n\t\t\t\t<div class=\"radio\" [class]=\"field.class\" [formGroup]=\"formGroup\" [hidden]=\"field.hide\">\n\t\t\t\t\t@if (field.name) {\n\t\t\t\t\t\t<span class=\"radio-label\" [id]=\"field.id + '-label'\">{{ field.name }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t<mat-radio-group\n\t\t\t\t\t\t[formControlName]=\"field.id\"\n\t\t\t\t\t\t[attr.aria-labelledby]=\"field.name ? field.id + '-label' : null\"\n\t\t\t\t\t>\n\t\t\t\t\t\t@for (x of field.list; track x.id) {\n\t\t\t\t\t\t\t<mat-radio-button [value]=\"x.id\" [disabled]=\"x.disabled\">{{ x.name }}</mat-radio-button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</mat-radio-group>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('volume') {\n\t\t\t\t<div [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<xiri-volume [field]=\"field\" [formControlName]=\"field.id\"></xiri-volume>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('timelimit') {\n\t\t\t\t<div [class]=\"field.class\" [formGroup]=\"formGroup\" [hidden]=\"field.hide\">\n\t\t\t\t\t<xiri-timelimit matInput [formControlName]=\"field.id\" [required]=\"!!field.required\" [texts]=\"field.texts || {}\"></xiri-timelimit>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('textarea') {\n\t\t\t\t<mat-form-field [class]=\"field.class\" [formGroup]=\"formGroup\" [hidden]=\"field.hide\">\n\t\t\t\t\t@if (field.name) {\n\t\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t}\n\t\t\t\t\t<textarea matInput [formControlName]=\"field.id\" [required]=\"!!field.required\" [rows]=\"field.rows || 5\"></textarea>\n\t\t\t\t\t@if (field.hint) {\n\t\t\t\t\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@if (field.max) {\n\t\t\t\t\t\t<mat-hint align=\"end\">{{ formGroup.get(field.id)?.value?.length || 0 }} / {{ field.max }}</mat-hint>\n\t\t\t\t\t}\n\t\t\t\t\t@for (vali of field.validations; track vali.id) {\n\t\t\t\t\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t\t\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-form-field>\n\t\t\t}\n\t\t\t@case ('file') {\n\t\t\t\t<div [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<xiri-file [field]=\"field\" [formControlName]=\"field.id\"></xiri-file>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('info') {\n\t\t\t\t<div class=\"info\" [class]=\"field.class\">{{ field.value }}</div>\n\t\t\t}\n\t\t\t@case ('header') {\n\t\t\t\t@if (field.collapsible) {\n\t\t\t\t\t<div class=\"header collapsible\" [class]=\"field.class\" role=\"button\" tabindex=\"0\"\n\t\t\t\t\t [attr.aria-expanded]=\"!isSectionCollapsed(field.id)\"\n\t\t\t\t\t (click)=\"toggleSection(field)\" (keydown.enter)=\"toggleSection(field)\" (keydown.space)=\"toggleSection(field); $event.preventDefault()\">\n\t\t\t\t\t\t<mat-icon class=\"collapse-icon\" [class.collapsed]=\"isSectionCollapsed(field.id)\">expand_more</mat-icon>\n\t\t\t\t\t\t{{ field.value }}\n\t\t\t\t\t</div>\n\t\t\t\t} @else {\n\t\t\t\t\t<div class=\"header\" [class]=\"field.class\">{{ field.value }}</div>\n\t\t\t\t}\n\t\t\t}\n\t\t\t@case ('divider') {\n\t\t\t\t<div class=\"divider\" [class]=\"field.class\">\n\t\t\t\t\t@if (field.value) {\n\t\t\t\t\t\t<span class=\"divider-text\">{{ field.value }}</span>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('html') {\n\t\t\t\t<div class=\"html\" [class]=\"field.class\" [innerHtml]=\"$any(field.value) | safeHtml\"></div>\n\t\t\t}\n\t\t\t@case ('question') {\n\t\t\t\t<div class=\"xcol question\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<div class=\"left\">\n\t\t\t\t\t\t<mat-icon [class]=\"field.iconColor || 'warn'\" inline=\"true\">{{ field.icon }}</mat-icon>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"right\">{{ field.value }}</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('waiting') {\n\t\t\t\t<div class=\"xcol waiting\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<div class=\"left\">\n\t\t\t\t\t\t@if (!field.done) {\n\t\t\t\t\t\t\t<mat-spinner diameter=\"40\"></mat-spinner>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (field.done) {\n\t\t\t\t\t\t\t<mat-icon inline=\"true\">done</mat-icon>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"right\">{{ field.value }}</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case ('chips') {\n\t\t\t\t<div class=\"add-wrap\" [class]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<xiri-chips class=\"add-wrap-control\" [field]=\"field\" [formControlName]=\"field.id\"></xiri-chips>\n\t\t\t\t\t@if (field.addUrl) {\n\t\t\t\t\t\t<button mat-icon-button type=\"button\" class=\"add-option\" aria-label=\"Neu anlegen\"\n\t\t\t\t\t\t [disabled]=\"disabled() || formGroup.get(field.id)?.disabled\" (click)=\"openAdd(field.id)\"><mat-icon>add</mat-icon></button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@default {\n\t\t\t\t<div>default: {{ field.type }}</div>\n\t\t\t}\n\t\t}\n\t\t}\n\t}\n</form>\n", styles: [":host{position:relative}.reloadbar{position:absolute;top:0;left:0;right:0;z-index:1}.dynamic-form{grid-row-gap:7px}.dynamic-form>mat-form-field,.dynamic-form>.add-wrap{align-self:start}.dynamic-form .add-wrap{display:flex;align-items:flex-start;gap:4px}.dynamic-form .add-wrap .add-wrap-control{flex:1;min-width:0}.dynamic-form .add-wrap .add-option{margin-top:4px}.dynamic-form mat-form-field mat-icon{--mat-icon-color: var(--xiri-formfield-icon-color)}.dynamic-form.line{grid-row-gap:5px}.dynamic-form.small{grid-row-gap:2px}.dynamic-form .xhint{display:flex;min-height:20px;margin-top:4px}.dynamic-form .xhint mat-hint{font-size:var(--xiri-font-size-helper);padding:1px 16px 0}.dynamic-form .xhint mat-hint.mat-mdc-form-field-hint-end{flex:1;text-align:right}.dynamic-form .xhint mat-error{font-size:var(--xiri-font-size-helper);padding:1px 16px 0}.dynamic-form .xhint.error mat-hint{display:none}.dynamic-form .date{min-width:min(9.5rem,100%)}.dynamic-form .date.datetime,.dynamic-form .daterange{min-width:min(14.5rem,100%)}.dynamic-form .datetimerange{min-width:min(18.5rem,100%)}.dynamic-form .bool{display:flex;flex-direction:column}.dynamic-form .bool mat-hint{font-size:var(--xiri-font-size-helper);margin-top:-8px;padding-left:44px}.dynamic-form .radio{display:flex;flex-direction:column;gap:var(--xiri-spacing-xs)}.dynamic-form .radio .radio-label{font-size:var(--xiri-font-size-label)}.dynamic-form .radio mat-radio-group{display:flex;flex-wrap:wrap;gap:var(--xiri-spacing-xs) var(--xiri-spacing-md)}.dynamic-form .radio mat-hint{font-size:var(--xiri-font-size-helper)}.dynamic-form .info{padding-top:.8rem;padding-bottom:.4rem;color:var(--primary, #2892D9)}.dynamic-form .header{font-size:var(--xiri-font-size-title);padding-top:.8rem;padding-bottom:.4rem;color:var(--primary, #2892D9)}.dynamic-form .header.collapsible{cursor:pointer;display:flex;align-items:center;gap:.25rem;-webkit-user-select:none;user-select:none;border-radius:var(--xiri-radius-xs);padding:.5rem .25rem;margin:.25rem 0}.dynamic-form .header.collapsible:hover{background:color-mix(in srgb,var(--primary, #2892D9) 8%,transparent)}.dynamic-form .header.collapsible .collapse-icon{transition:transform var(--xiri-duration-fast) var(--xiri-easing-standard)}.dynamic-form .header.collapsible .collapse-icon.collapsed{transform:rotate(-90deg)}.dynamic-form .divider{width:100%;display:flex;align-items:center;padding:.5rem 0;margin:.25rem 0}.dynamic-form .divider:before,.dynamic-form .divider:after{content:\"\";flex:1;height:1px;background:var(--outline-variant, var(--mat-sys-outline-variant, rgba(0, 0, 0, .12)))}.dynamic-form .divider .divider-text{padding:0 1rem;font-size:var(--xiri-font-size-helper);color:var(--on-surface-variant, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)));white-space:nowrap}.dynamic-form .question,.dynamic-form .waiting{display:flex}.dynamic-form .question .left,.dynamic-form .waiting .left{font-size:var(--xiri-font-size-display);padding-right:1rem}.dynamic-form .question{align-items:center}.dynamic-form .question .left mat-icon{height:auto;width:auto;line-height:1;overflow:visible}.dynamic-form .form-field-button{margin-left:12px;margin-right:12px}.mat-mdc-select-panel.selectPanel{max-height:max(50vh,256px)}[hidden]{display:none!important}\n"] }]
|
|
3369
|
+
}], ctorParameters: () => [], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], formChange: [{ type: i0.Output, args: ["formChange"] }], check: [{ type: i0.Input, args: [{ isSignal: true, alias: "check", required: false }] }], serverErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverErrors", required: false }] }] } });
|
|
3234
3370
|
// Was ein Reload-Patch am Feld ändern darf, jeweils mit Typprüfung. Der Server ist eine
|
|
3235
3371
|
// Trust-Boundary: eine kaputte `list` oder ein `min: "3"` dürfen weder das Pruning noch den
|
|
3236
3372
|
// Validator-Aufbau verfälschen.
|
|
3237
3373
|
//
|
|
3238
3374
|
// Bewusst nicht patchbar: `id`, `type`, `subtype` (createControl normalisiert die einmalig, ein
|
|
3239
3375
|
// Roh-Wert vom Server würde das zerlegen), `value` (den Wert behält der Client, siehe pruneValue),
|
|
3240
|
-
// `control`, `showWhen` und `
|
|
3376
|
+
// `control`, `showWhen`, `url` und `searchWith` (`serverSideSearch` und der Suchfluss der Select-Directive
|
|
3241
3377
|
// werden nur beim Aufbau abgeleitet, eine Änderung käme nie an).
|
|
3242
3378
|
const PATCH_GUARDS = {
|
|
3243
3379
|
list: isOptionList,
|
|
@@ -3958,7 +4094,7 @@ class XiriDialogComponent {
|
|
|
3958
4094
|
clearTimeout(this.to);
|
|
3959
4095
|
}
|
|
3960
4096
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3961
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: XiriDialogComponent, isStandalone: true, selector: "xiri-dialog", ngImport: i0, template: "<div class=\"dialog\">\n\t<div class=\"dialog-header\">\n\t\t<h1 mat-dialog-title>{{ header() }}</h1>\n\t\t@if (type() !== 'waiting' && !done()) {\n\t\t\t<button mat-icon-button aria-label=\"Schlie\u00DFen\" (click)=\"dialogRef.close(null)\"><mat-icon>close</mat-icon></button>\n\t\t}\n\t</div>\n\t<mat-dialog-content>\n\t\t@if (loading() && formFields() === null) {\n\t\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t\t}\n\t\t@if (formFields() !== null) {\n\t\t\t@if (type() === 'table') {\n\t\t\t\t<xiri-raw-table [settings]=\"rawTable\"></xiri-raw-table>\n\t\t\t} @else {\n\t\t\t\t<xiri-form-fields [form]=\"formFields()\" (formChange)=\"formChanged($event)\" [disabled]=\"loading()\"\n\t\t\t\t [check]=\"checkSubject.asObservable()\"></xiri-form-fields>\n\t\t\t}\n\t\t}\n\t\t@if (componentData() !== null && dynComponentType() !== null) {\n\t\t\t<ng-container [ngComponentOutlet]=\"dynComponentType()\"\n\t\t\t [ngComponentOutletInputs]=\"{ data: componentData() }\"></ng-container>\n\t\t}\n\t\t@if (error()) {\n\t\t\t<xiri-error class=\"error\" [text]=\"error()\"></xiri-error>\n\t\t}\n\t\t@if (done()) {\n\t\t\t<div class=\"xcol done\">\n\t\t\t\t<xiri-done></xiri-done>\n\t\t\t</div>\n\t\t}\n\t</mat-dialog-content>\n\t@if (!done() && !(loading() && formFields() === null) && (loading() || buttons().length > 0)) {\n\t\t<mat-divider></mat-divider>\n\t\t<mat-dialog-actions [class.one]=\"buttons().length===1\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"30\" class=\"actions-spinner\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t@for (button of buttons(); track $index) {\n\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" (click)=\"clickButton( button )\" [disabled]=\"!!button.default && !formValid()\"></xiri-buttonstyle>\n\t\t\t\t}\n\t\t\t}\n\t\t</mat-dialog-actions>\n\t}\n</div>", styles: ["mat-spinner{margin:var(--xiri-spacing-md)}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding-inline-end:var(--xiri-spacing-lg)}.dialog-header h1[mat-dialog-title]{margin-bottom:0;flex:0 1 auto;min-width:0;overflow-wrap:anywhere}mat-dialog-content{overflow-x:auto}.dynamic-form{margin-bottom:var(--xiri-spacing-md)}.dynamic-form .field{width:100%;margin-top:var(--xiri-spacing-sm)}.question,.waiting{display:flex}.question .left,.waiting .left{font-size:var(--xiri-font-size-display);padding-right:var(--xiri-spacing-md)}.waiting mat-icon{color:var(--color-success, #2ECC71);font-size:var(--xiri-font-size-headline)}.error{color:var(--error, red);font-size:var(--xiri-font-size-title);margin-top:var(--xiri-spacing-md);margin-bottom:var(--xiri-spacing-md)}mat-dialog-actions{justify-content:space-between;padding-left:var(--xiri-spacing-lg);padding-right:var(--xiri-spacing-lg)}mat-dialog-actions.one{justify-content:end}mat-dialog-actions .actions-spinner{margin:0 0 0 auto}mat-dialog-content{min-height:4rem}mat-dialog-content.mat-mdc-dialog-content{padding-bottom:var(--xiri-spacing-md)}mat-dialog-content>*{animation:fadeIn var(--xiri-duration-fast, .15s) var(--xiri-easing-standard, cubic-bezier(.4, 0, .2, 1))}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.done{text-align:center;font-size:var(--xiri-font-size-display)}[hidden]{display:none!important}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: XiriRawTableComponent, selector: "xiri-raw-table", inputs: ["settings"] }, { kind: "component", type: XiriFormFieldsComponent, selector: "xiri-form-fields", inputs: ["form", "display", "disabled", "check"], outputs: ["formChange"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: XiriErrorComponent, selector: "xiri-error", inputs: ["text"] }, { kind: "component", type: XiriDoneComponent, selector: "xiri-done" }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: XiriButtonstyleComponent, selector: "xiri-buttonstyle", inputs: ["button", "disabled", "loading", "countdown", "pollText"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
4097
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: XiriDialogComponent, isStandalone: true, selector: "xiri-dialog", ngImport: i0, template: "<div class=\"dialog\">\n\t<div class=\"dialog-header\">\n\t\t<h1 mat-dialog-title>{{ header() }}</h1>\n\t\t@if (type() !== 'waiting' && !done()) {\n\t\t\t<button mat-icon-button aria-label=\"Schlie\u00DFen\" (click)=\"dialogRef.close(null)\"><mat-icon>close</mat-icon></button>\n\t\t}\n\t</div>\n\t<mat-dialog-content>\n\t\t@if (loading() && formFields() === null) {\n\t\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t\t}\n\t\t@if (formFields() !== null) {\n\t\t\t@if (type() === 'table') {\n\t\t\t\t<xiri-raw-table [settings]=\"rawTable\"></xiri-raw-table>\n\t\t\t} @else {\n\t\t\t\t<xiri-form-fields [form]=\"formFields()\" (formChange)=\"formChanged($event)\" [disabled]=\"loading()\"\n\t\t\t\t [check]=\"checkSubject.asObservable()\"></xiri-form-fields>\n\t\t\t}\n\t\t}\n\t\t@if (componentData() !== null && dynComponentType() !== null) {\n\t\t\t<ng-container [ngComponentOutlet]=\"dynComponentType()\"\n\t\t\t [ngComponentOutletInputs]=\"{ data: componentData() }\"></ng-container>\n\t\t}\n\t\t@if (error()) {\n\t\t\t<xiri-error class=\"error\" [text]=\"error()\"></xiri-error>\n\t\t}\n\t\t@if (done()) {\n\t\t\t<div class=\"xcol done\">\n\t\t\t\t<xiri-done></xiri-done>\n\t\t\t</div>\n\t\t}\n\t</mat-dialog-content>\n\t@if (!done() && !(loading() && formFields() === null) && (loading() || buttons().length > 0)) {\n\t\t<mat-divider></mat-divider>\n\t\t<mat-dialog-actions [class.one]=\"buttons().length===1\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"30\" class=\"actions-spinner\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t@for (button of buttons(); track $index) {\n\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" (click)=\"clickButton( button )\" [disabled]=\"!!button.default && !formValid()\"></xiri-buttonstyle>\n\t\t\t\t}\n\t\t\t}\n\t\t</mat-dialog-actions>\n\t}\n</div>", styles: ["mat-spinner{margin:var(--xiri-spacing-md)}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding-inline-end:var(--xiri-spacing-lg)}.dialog-header h1[mat-dialog-title]{margin-bottom:0;flex:0 1 auto;min-width:0;overflow-wrap:anywhere}mat-dialog-content{overflow-x:auto}.dynamic-form{margin-bottom:var(--xiri-spacing-md)}.dynamic-form .field{width:100%;margin-top:var(--xiri-spacing-sm)}.question,.waiting{display:flex}.question .left,.waiting .left{font-size:var(--xiri-font-size-display);padding-right:var(--xiri-spacing-md)}.waiting mat-icon{color:var(--color-success, #2ECC71);font-size:var(--xiri-font-size-headline)}.error{color:var(--error, red);font-size:var(--xiri-font-size-title);margin-top:var(--xiri-spacing-md);margin-bottom:var(--xiri-spacing-md)}mat-dialog-actions{justify-content:space-between;padding-left:var(--xiri-spacing-lg);padding-right:var(--xiri-spacing-lg)}mat-dialog-actions.one{justify-content:end}mat-dialog-actions .actions-spinner{margin:0 0 0 auto}mat-dialog-content{min-height:4rem}mat-dialog-content.mat-mdc-dialog-content{padding-bottom:var(--xiri-spacing-md)}mat-dialog-content>*{animation:fadeIn var(--xiri-duration-fast, .15s) var(--xiri-easing-standard, cubic-bezier(.4, 0, .2, 1))}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.done{text-align:center;font-size:var(--xiri-font-size-display)}[hidden]{display:none!important}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: XiriRawTableComponent, selector: "xiri-raw-table", inputs: ["settings"] }, { kind: "component", type: XiriFormFieldsComponent, selector: "xiri-form-fields", inputs: ["form", "display", "disabled", "check", "serverErrors"], outputs: ["formChange"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: XiriErrorComponent, selector: "xiri-error", inputs: ["text"] }, { kind: "component", type: XiriDoneComponent, selector: "xiri-done" }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: XiriButtonstyleComponent, selector: "xiri-buttonstyle", inputs: ["button", "disabled", "loading", "countdown", "pollText"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
3962
4098
|
}
|
|
3963
4099
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriDialogComponent, decorators: [{
|
|
3964
4100
|
type: Component,
|
|
@@ -6091,7 +6227,8 @@ class XiriFormService {
|
|
|
6091
6227
|
: this.dataService.post(url, { ...data, ...extra });
|
|
6092
6228
|
return req.pipe(map(res => this.parse(res)), catchError((err) => {
|
|
6093
6229
|
return throwError(() => ({
|
|
6094
|
-
error: parseHttpError(err)
|
|
6230
|
+
error: parseHttpError(err),
|
|
6231
|
+
fields: parseFieldErrors(err),
|
|
6095
6232
|
}));
|
|
6096
6233
|
}));
|
|
6097
6234
|
}
|
|
@@ -6222,6 +6359,9 @@ class XiriFormComponent {
|
|
|
6222
6359
|
...(ngDevMode ? [{ debugName: "done" }] : /* istanbul ignore next */ []));
|
|
6223
6360
|
this.error = signal('', /* @ts-ignore */
|
|
6224
6361
|
...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
6362
|
+
// Validierungsfehler pro Feld-ID aus einer 400-Antwort, geht als serverErrors an xiri-form-fields.
|
|
6363
|
+
this.fieldErrors = signal(null, /* @ts-ignore */
|
|
6364
|
+
...(ngDevMode ? [{ debugName: "fieldErrors" }] : /* istanbul ignore next */ []));
|
|
6225
6365
|
this.buttons = [];
|
|
6226
6366
|
this.extra = {};
|
|
6227
6367
|
this.formValues = null;
|
|
@@ -6239,6 +6379,7 @@ class XiriFormComponent {
|
|
|
6239
6379
|
send(data) {
|
|
6240
6380
|
this.loading.set(true);
|
|
6241
6381
|
this.error.set('');
|
|
6382
|
+
this.fieldErrors.set(null);
|
|
6242
6383
|
this.formService.get(this.url, data, this.extra).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
|
|
6243
6384
|
next: (res) => {
|
|
6244
6385
|
this.loadData(res);
|
|
@@ -6246,7 +6387,9 @@ class XiriFormComponent {
|
|
|
6246
6387
|
error: (err) => {
|
|
6247
6388
|
this.loading.set(false);
|
|
6248
6389
|
this.loadingButton.set(null);
|
|
6249
|
-
this.
|
|
6390
|
+
this.fieldErrors.set(err.fields ?? null);
|
|
6391
|
+
// Mit Feldfehlern steht die Meldung am Feld; der Banner würde sie nur wiederholen.
|
|
6392
|
+
this.error.set(err.fields ? '' : (err.error ?? 'Unknown Error'));
|
|
6250
6393
|
if (this.buttons.length == 0) {
|
|
6251
6394
|
this.buttons = [{
|
|
6252
6395
|
text: 'Close',
|
|
@@ -6327,7 +6470,7 @@ class XiriFormComponent {
|
|
|
6327
6470
|
// this.events.push( '' + this.formValid + ' => ' + JSON.stringify( event.value ) );
|
|
6328
6471
|
}
|
|
6329
6472
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6330
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: XiriFormComponent, isStandalone: true, selector: "xiri-form", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"xrow\" cdkTrapFocus>\n\t<div class=\"xcol\">\n\t\t@if (loading() && formFields() === null) {\n\t\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t\t}\n\t\t@if (formFields() !== null) {\n\t\t\t<xiri-form-fields [form]=\"formFields()\" (formChange)=\"formChanged($event)\" [disabled]=\"loading()\"\n\t\t\t [check]=\"checkSubject.asObservable()\"></xiri-form-fields>\n\t\t}\n\t\t@if (error()) {\n\t\t\t<xiri-error class=\"error\" [text]=\"error()\"></xiri-error>\n\t\t}\n\t</div>\n\t@if (done()) {\n\t\t<div class=\"xcol done\">\n\t\t\t<xiri-done></xiri-done>\n\t\t</div>\n\t} @else {\n\t\t<div class=\"xcol formbtnline\">\n\t\t\t@for (button of buttons; track button) {\n\t\t\t\t@if (button.default) {\n\t\t\t\t\t<xiri-buttonstyle (click)=\"clickButton( button )\" [button]=\"button\" [disabled]=\"!formValid || loading()\" [loading]=\"loadingButton() === button\"></xiri-buttonstyle>\n\t\t\t\t} @else {\n\t\t\t\t\t<xiri-buttonstyle (click)=\"clickButton( button )\" [button]=\"button\" [disabled]=\"loading()\" [loading]=\"loadingButton() === button\"></xiri-buttonstyle>\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n</div>\n", styles: [".formbtnline{padding-top:var(--xiri-spacing-xl);display:flex;justify-content:space-between;padding-left:var(--xiri-spacing-md);padding-right:var(--xiri-spacing-md)}.done{text-align:center;font-size:var(--xiri-font-size-display);margin-bottom:var(--xiri-spacing-md)}mat-spinner{margin:var(--xiri-spacing-xl)}[hidden]{display:none!important}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: XiriFormFieldsComponent, selector: "xiri-form-fields", inputs: ["form", "display", "disabled", "check"], outputs: ["formChange"] }, { kind: "component", type: XiriErrorComponent, selector: "xiri-error", inputs: ["text"] }, { kind: "component", type: XiriDoneComponent, selector: "xiri-done" }, { kind: "component", type: XiriButtonstyleComponent, selector: "xiri-buttonstyle", inputs: ["button", "disabled", "loading", "countdown", "pollText"] }] }); }
|
|
6473
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: XiriFormComponent, isStandalone: true, selector: "xiri-form", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"xrow\" cdkTrapFocus>\n\t<div class=\"xcol\">\n\t\t@if (loading() && formFields() === null) {\n\t\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t\t}\n\t\t@if (formFields() !== null) {\n\t\t\t<xiri-form-fields [form]=\"formFields()\" (formChange)=\"formChanged($event)\" [disabled]=\"loading()\"\n\t\t\t [check]=\"checkSubject.asObservable()\" [serverErrors]=\"fieldErrors()\"></xiri-form-fields>\n\t\t}\n\t\t@if (error()) {\n\t\t\t<xiri-error class=\"error\" [text]=\"error()\"></xiri-error>\n\t\t}\n\t</div>\n\t@if (done()) {\n\t\t<div class=\"xcol done\">\n\t\t\t<xiri-done></xiri-done>\n\t\t</div>\n\t} @else {\n\t\t<div class=\"xcol formbtnline\">\n\t\t\t@for (button of buttons; track button) {\n\t\t\t\t@if (button.default) {\n\t\t\t\t\t<xiri-buttonstyle (click)=\"clickButton( button )\" [button]=\"button\" [disabled]=\"!formValid || loading()\" [loading]=\"loadingButton() === button\"></xiri-buttonstyle>\n\t\t\t\t} @else {\n\t\t\t\t\t<xiri-buttonstyle (click)=\"clickButton( button )\" [button]=\"button\" [disabled]=\"loading()\" [loading]=\"loadingButton() === button\"></xiri-buttonstyle>\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n</div>\n", styles: [".formbtnline{padding-top:var(--xiri-spacing-xl);display:flex;justify-content:space-between;padding-left:var(--xiri-spacing-md);padding-right:var(--xiri-spacing-md)}.done{text-align:center;font-size:var(--xiri-font-size-display);margin-bottom:var(--xiri-spacing-md)}mat-spinner{margin:var(--xiri-spacing-xl)}[hidden]{display:none!important}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: XiriFormFieldsComponent, selector: "xiri-form-fields", inputs: ["form", "display", "disabled", "check", "serverErrors"], outputs: ["formChange"] }, { kind: "component", type: XiriErrorComponent, selector: "xiri-error", inputs: ["text"] }, { kind: "component", type: XiriDoneComponent, selector: "xiri-done" }, { kind: "component", type: XiriButtonstyleComponent, selector: "xiri-buttonstyle", inputs: ["button", "disabled", "loading", "countdown", "pollText"] }] }); }
|
|
6331
6474
|
}
|
|
6332
6475
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriFormComponent, decorators: [{
|
|
6333
6476
|
type: Component,
|
|
@@ -6336,7 +6479,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
6336
6479
|
XiriFormFieldsComponent,
|
|
6337
6480
|
XiriErrorComponent,
|
|
6338
6481
|
XiriDoneComponent,
|
|
6339
|
-
XiriButtonstyleComponent], template: "<div class=\"xrow\" cdkTrapFocus>\n\t<div class=\"xcol\">\n\t\t@if (loading() && formFields() === null) {\n\t\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t\t}\n\t\t@if (formFields() !== null) {\n\t\t\t<xiri-form-fields [form]=\"formFields()\" (formChange)=\"formChanged($event)\" [disabled]=\"loading()\"\n\t\t\t [check]=\"checkSubject.asObservable()\"></xiri-form-fields>\n\t\t}\n\t\t@if (error()) {\n\t\t\t<xiri-error class=\"error\" [text]=\"error()\"></xiri-error>\n\t\t}\n\t</div>\n\t@if (done()) {\n\t\t<div class=\"xcol done\">\n\t\t\t<xiri-done></xiri-done>\n\t\t</div>\n\t} @else {\n\t\t<div class=\"xcol formbtnline\">\n\t\t\t@for (button of buttons; track button) {\n\t\t\t\t@if (button.default) {\n\t\t\t\t\t<xiri-buttonstyle (click)=\"clickButton( button )\" [button]=\"button\" [disabled]=\"!formValid || loading()\" [loading]=\"loadingButton() === button\"></xiri-buttonstyle>\n\t\t\t\t} @else {\n\t\t\t\t\t<xiri-buttonstyle (click)=\"clickButton( button )\" [button]=\"button\" [disabled]=\"loading()\" [loading]=\"loadingButton() === button\"></xiri-buttonstyle>\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n</div>\n", styles: [".formbtnline{padding-top:var(--xiri-spacing-xl);display:flex;justify-content:space-between;padding-left:var(--xiri-spacing-md);padding-right:var(--xiri-spacing-md)}.done{text-align:center;font-size:var(--xiri-font-size-display);margin-bottom:var(--xiri-spacing-md)}mat-spinner{margin:var(--xiri-spacing-xl)}[hidden]{display:none!important}\n"] }]
|
|
6482
|
+
XiriButtonstyleComponent], template: "<div class=\"xrow\" cdkTrapFocus>\n\t<div class=\"xcol\">\n\t\t@if (loading() && formFields() === null) {\n\t\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t\t}\n\t\t@if (formFields() !== null) {\n\t\t\t<xiri-form-fields [form]=\"formFields()\" (formChange)=\"formChanged($event)\" [disabled]=\"loading()\"\n\t\t\t [check]=\"checkSubject.asObservable()\" [serverErrors]=\"fieldErrors()\"></xiri-form-fields>\n\t\t}\n\t\t@if (error()) {\n\t\t\t<xiri-error class=\"error\" [text]=\"error()\"></xiri-error>\n\t\t}\n\t</div>\n\t@if (done()) {\n\t\t<div class=\"xcol done\">\n\t\t\t<xiri-done></xiri-done>\n\t\t</div>\n\t} @else {\n\t\t<div class=\"xcol formbtnline\">\n\t\t\t@for (button of buttons; track button) {\n\t\t\t\t@if (button.default) {\n\t\t\t\t\t<xiri-buttonstyle (click)=\"clickButton( button )\" [button]=\"button\" [disabled]=\"!formValid || loading()\" [loading]=\"loadingButton() === button\"></xiri-buttonstyle>\n\t\t\t\t} @else {\n\t\t\t\t\t<xiri-buttonstyle (click)=\"clickButton( button )\" [button]=\"button\" [disabled]=\"loading()\" [loading]=\"loadingButton() === button\"></xiri-buttonstyle>\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n</div>\n", styles: [".formbtnline{padding-top:var(--xiri-spacing-xl);display:flex;justify-content:space-between;padding-left:var(--xiri-spacing-md);padding-right:var(--xiri-spacing-md)}.done{text-align:center;font-size:var(--xiri-font-size-display);margin-bottom:var(--xiri-spacing-md)}mat-spinner{margin:var(--xiri-spacing-xl)}[hidden]{display:none!important}\n"] }]
|
|
6340
6483
|
}], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
|
|
6341
6484
|
|
|
6342
6485
|
class XiriSidepanelRef {
|
|
@@ -6616,7 +6759,7 @@ class XiriStepperComponent {
|
|
|
6616
6759
|
return this.dataService.post(url, data);
|
|
6617
6760
|
}
|
|
6618
6761
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6619
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: XiriStepperComponent, isStandalone: true, selector: "xiri-stepper", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "stepper", first: true, predicate: MatStepper, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-stepper [orientation]=\"orientation()\" [linear]=\"true\" (selectionChange)=\"stepChanged( $event )\" [hidden]=\"done()\">\n\t@for (step of steps(); track i; let i = $index) {\n\t\t<mat-step [label]=\"step.title\" [completed]=\"step.completed()\">\n\t\t\t<div class=\"xrow\">\n\t\t\t\t<div class=\"xcol\">\n\t\t\t\t\t@if (!step.load()) {\n\t\t\t\t\t\t<xiri-form-fields [form]=\"step.fields()\" (formChange)=\"formChanged(step, $event, i)\" [disabled]=\"step.check()\"></xiri-form-fields>\n\t\t\t\t\t}\n\t\t\t\t\t@if (step.errorMsg()) {\n\t\t\t\t\t\t<xiri-error class=\"error\" [text]=\"step.errorMsg()!\"></xiri-error>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t\t@if (step.check()) {\n\t\t\t\t\t<div class=\"xcol checking\">\n\t\t\t\t\t\t<mat-spinner diameter=\"25\"></mat-spinner>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"xcol buttons\">\n\t\t\t\t\t@for (button of step.buttons(); track button) {\n\t\t\t\t\t\t@if (!button.default) {\n\t\t\t\t\t\t\t<xiri-buttonstyle [disabled]=\"false\" (click)=\"clickButton( button )\" [button]=\"button\"></xiri-buttonstyle>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t<xiri-buttonstyle (click)=\"clickButton( button )\" [button]=\"button\" [disabled]=\"!step.valid() || step.check()\"></xiri-buttonstyle>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</mat-step>\n\t}\n</mat-stepper>\n\n@if (done()) {\n\t<div class=\"xcol done\">\n\t\t<xiri-done></xiri-done>\n\t</div>\n}\n", styles: [".error{padding:var(--xiri-spacing-sm) 0}.xrow{padding-top:var(--xiri-spacing-md)}.checking{padding:var(--xiri-spacing-md) var(--xiri-spacing-sm);display:flex;justify-content:flex-end}.buttons{padding-top:var(--xiri-spacing-md);display:flex;justify-content:space-between}.done{font-size:3rem;display:flex;justify-content:center}[hidden]{display:none!important}\n"], dependencies: [{ kind: "component", type: MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "aria-label", "headerPrefix", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "component", type: MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: XiriFormFieldsComponent, selector: "xiri-form-fields", inputs: ["form", "display", "disabled", "check"], outputs: ["formChange"] }, { kind: "component", type: XiriErrorComponent, selector: "xiri-error", inputs: ["text"] }, { kind: "component", type: XiriButtonstyleComponent, selector: "xiri-buttonstyle", inputs: ["button", "disabled", "loading", "countdown", "pollText"] }, { kind: "component", type: XiriDoneComponent, selector: "xiri-done" }] }); }
|
|
6762
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: XiriStepperComponent, isStandalone: true, selector: "xiri-stepper", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "stepper", first: true, predicate: MatStepper, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-stepper [orientation]=\"orientation()\" [linear]=\"true\" (selectionChange)=\"stepChanged( $event )\" [hidden]=\"done()\">\n\t@for (step of steps(); track i; let i = $index) {\n\t\t<mat-step [label]=\"step.title\" [completed]=\"step.completed()\">\n\t\t\t<div class=\"xrow\">\n\t\t\t\t<div class=\"xcol\">\n\t\t\t\t\t@if (!step.load()) {\n\t\t\t\t\t\t<xiri-form-fields [form]=\"step.fields()\" (formChange)=\"formChanged(step, $event, i)\" [disabled]=\"step.check()\"></xiri-form-fields>\n\t\t\t\t\t}\n\t\t\t\t\t@if (step.errorMsg()) {\n\t\t\t\t\t\t<xiri-error class=\"error\" [text]=\"step.errorMsg()!\"></xiri-error>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t\t@if (step.check()) {\n\t\t\t\t\t<div class=\"xcol checking\">\n\t\t\t\t\t\t<mat-spinner diameter=\"25\"></mat-spinner>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"xcol buttons\">\n\t\t\t\t\t@for (button of step.buttons(); track button) {\n\t\t\t\t\t\t@if (!button.default) {\n\t\t\t\t\t\t\t<xiri-buttonstyle [disabled]=\"false\" (click)=\"clickButton( button )\" [button]=\"button\"></xiri-buttonstyle>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t<xiri-buttonstyle (click)=\"clickButton( button )\" [button]=\"button\" [disabled]=\"!step.valid() || step.check()\"></xiri-buttonstyle>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</mat-step>\n\t}\n</mat-stepper>\n\n@if (done()) {\n\t<div class=\"xcol done\">\n\t\t<xiri-done></xiri-done>\n\t</div>\n}\n", styles: [".error{padding:var(--xiri-spacing-sm) 0}.xrow{padding-top:var(--xiri-spacing-md)}.checking{padding:var(--xiri-spacing-md) var(--xiri-spacing-sm);display:flex;justify-content:flex-end}.buttons{padding-top:var(--xiri-spacing-md);display:flex;justify-content:space-between}.done{font-size:3rem;display:flex;justify-content:center}[hidden]{display:none!important}\n"], dependencies: [{ kind: "component", type: MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "aria-label", "headerPrefix", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "component", type: MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: XiriFormFieldsComponent, selector: "xiri-form-fields", inputs: ["form", "display", "disabled", "check", "serverErrors"], outputs: ["formChange"] }, { kind: "component", type: XiriErrorComponent, selector: "xiri-error", inputs: ["text"] }, { kind: "component", type: XiriButtonstyleComponent, selector: "xiri-buttonstyle", inputs: ["button", "disabled", "loading", "countdown", "pollText"] }, { kind: "component", type: XiriDoneComponent, selector: "xiri-done" }] }); }
|
|
6620
6763
|
}
|
|
6621
6764
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriStepperComponent, decorators: [{
|
|
6622
6765
|
type: Component,
|
|
@@ -6862,7 +7005,7 @@ class XiriQueryComponent {
|
|
|
6862
7005
|
this.cdr.markForCheck();
|
|
6863
7006
|
}
|
|
6864
7007
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriQueryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6865
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: XiriQueryComponent, isStandalone: true, selector: "xiri-query", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, dyncomponent: { classPropertyName: "dyncomponent", publicName: "dyncomponent", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange" }, ngImport: i0, template: "<div class=\"xrow\">\n\t<div class=\"xcol\">\n\t\t@if (collapsed() !== undefined) {\n\t\t\t<mat-expansion-panel [expanded]=\"!collapsed()\" (expandedChange)=\"panelToggled($event)\" class=\"query-expansion\">\n\t\t\t\t<mat-expansion-panel-header>\n\t\t\t\t\t<mat-panel-title>\n\t\t\t\t\t\t<mat-icon>filter_list</mat-icon> Filter\n\t\t\t\t\t</mat-panel-title>\n\t\t\t\t</mat-expansion-panel-header>\n\t\t\t\t<div class=\"query\">\n\t\t\t\t\t<xiri-form-fields [form]=\"formFields()\" (formChange)=\"formChanged($event)\" display=\"line\"></xiri-form-fields>\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"filterState\"></ng-container>\n\t\t\t\t\t@if (error()) {\n\t\t\t\t\t\t<div class=\"error\">\n\t\t\t\t\t\t\t<span>{{ error() }}</span>\n\t\t\t\t\t\t\t<button mat-button type=\"button\" data-testid=\"query-retry\" (click)=\"retry()\">\n\t\t\t\t\t\t\t\t<mat-icon>refresh</mat-icon> Retry\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</mat-expansion-panel>\n\t\t} @else {\n\t\t\t<div class=\"query\">\n\t\t\t\t<xiri-form-fields [form]=\"formFields()\" (formChange)=\"formChanged($event)\" display=\"line\"></xiri-form-fields>\n\t\t\t\t<ng-container *ngTemplateOutlet=\"filterState\"></ng-container>\n\t\t\t\t@if (error()) {\n\t\t\t\t\t<div class=\"error\">\n\t\t\t\t\t\t<span>{{ error() }}</span>\n\t\t\t\t\t\t<button mat-button type=\"button\" data-testid=\"query-retry\" (click)=\"retry()\">\n\t\t\t\t\t\t\t<mat-icon>refresh</mat-icon> Retry\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t</div>\n\t@if (settings().buttonline; as buttonline) {\n\t\t<div class=\"xcol formbtnline\" [class]=\"buttonline.display\">\n\t\t\t<xiri-buttonline [settings]=\"$any(buttonline.data)\" [filterData]=\"filterData()\" [disabled]=\"!formValid()\"\n\t\t\t (result)=\"clickedButton($event)\"></xiri-buttonline>\n\t\t</div>\n\t\t@if (loading()) {\n\t\t\t<div class=\"xcol\">\n\t\t\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t\t\t</div>\n\t\t}\n\t}\n\t@if (dynData.data) {\n\t\t<div class=\"xcol\">\n\t\t\t<ng-container *ngTemplateOutlet=\"dyncomponent(); context: { $implicit: dynData }\"></ng-container>\n\t\t</div>\n\t}\n\t@if (data()) {\n\t\t<div class=\"xcol\" [class.is-loading]=\"loading()\">\n\t\t\t<ng-container *ngTemplateOutlet=\"dyncomponent(); context: { $implicit: data() }\"></ng-container>\n\t\t</div>\n\t}\n</div>\n\n<ng-template #filterState>\n\t@if (settings().showActiveFilters && activeFilters().length) {\n\t\t<div class=\"query-filter-state\">\n\t\t\t<mat-chip-set aria-label=\"Aktive Filter\">\n\t\t\t\t@for (filter of activeFilters(); track filter.id) {\n\t\t\t\t\t<mat-chip data-testid=\"query-filter-chip\" (removed)=\"removeFilter(filter.id)\">\n\t\t\t\t\t\t<span class=\"chip-label\">{{ filter.label }}: {{ filter.value }}</span>\n\t\t\t\t\t\t<button matChipRemove type=\"button\"\n\t\t\t\t\t\t [attr.aria-label]=\"'Filter entfernen: ' + filter.label + ' ' + filter.value\">\n\t\t\t\t\t\t\t<mat-icon>cancel</mat-icon>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</mat-chip>\n\t\t\t\t}\n\t\t\t</mat-chip-set>\n\t\t\t<button mat-button type=\"button\" class=\"reset-filters\" data-testid=\"query-reset-filters\"\n\t\t\t (click)=\"resetFilters()\">\n\t\t\t\t<mat-icon>filter_list_off</mat-icon> Alle zur\u00FCcksetzen\n\t\t\t</button>\n\t\t</div>\n\t}\n\t@if (settings().showResultCount && resultCount(); as rc) {\n\t\t<div class=\"query-result-count\" data-testid=\"query-result-count\" aria-live=\"polite\">\n\t\t\t@if (rc.total !== undefined) {\n\t\t\t\t<span><strong>{{ rc.filtered }}</strong> von {{ rc.total }} Treffern</span>\n\t\t\t} @else {\n\t\t\t\t<span><strong>{{ rc.filtered }}</strong> Treffer</span>\n\t\t\t}\n\t\t</div>\n\t}\n</ng-template>\n", styles: [".query{padding-left:var(--xiri-spacing-md);padding-right:var(--xiri-spacing-md)}.is-loading{opacity:.5;transition:opacity .15s ease-in-out;pointer-events:none}.query-filter-state{display:flex;align-items:center;flex-wrap:wrap;gap:var(--xiri-spacing-sm);margin-top:var(--xiri-spacing-sm)}.query-filter-state .reset-filters mat-icon{margin-right:var(--xiri-spacing-xs)}.query-result-count{margin-top:var(--xiri-spacing-sm);color:var(--on-surface-variant, var(--mat-sys-on-surface-variant, inherit));font-size:.9rem}.query-expansion .query{padding-left:0;padding-right:0}.query-expansion mat-panel-title mat-icon{margin-right:var(--xiri-spacing-sm)}\n"], dependencies: [{ kind: "component", type: XiriFormFieldsComponent, selector: "xiri-form-fields", inputs: ["form", "display", "disabled", "check"], outputs: ["formChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XiriButtonlineComponent, selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }] }); }
|
|
7008
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: XiriQueryComponent, isStandalone: true, selector: "xiri-query", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, dyncomponent: { classPropertyName: "dyncomponent", publicName: "dyncomponent", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange" }, ngImport: i0, template: "<div class=\"xrow\">\n\t<div class=\"xcol\">\n\t\t@if (collapsed() !== undefined) {\n\t\t\t<mat-expansion-panel [expanded]=\"!collapsed()\" (expandedChange)=\"panelToggled($event)\" class=\"query-expansion\">\n\t\t\t\t<mat-expansion-panel-header>\n\t\t\t\t\t<mat-panel-title>\n\t\t\t\t\t\t<mat-icon>filter_list</mat-icon> Filter\n\t\t\t\t\t</mat-panel-title>\n\t\t\t\t</mat-expansion-panel-header>\n\t\t\t\t<div class=\"query\">\n\t\t\t\t\t<xiri-form-fields [form]=\"formFields()\" (formChange)=\"formChanged($event)\" display=\"line\"></xiri-form-fields>\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"filterState\"></ng-container>\n\t\t\t\t\t@if (error()) {\n\t\t\t\t\t\t<div class=\"error\">\n\t\t\t\t\t\t\t<span>{{ error() }}</span>\n\t\t\t\t\t\t\t<button mat-button type=\"button\" data-testid=\"query-retry\" (click)=\"retry()\">\n\t\t\t\t\t\t\t\t<mat-icon>refresh</mat-icon> Retry\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</mat-expansion-panel>\n\t\t} @else {\n\t\t\t<div class=\"query\">\n\t\t\t\t<xiri-form-fields [form]=\"formFields()\" (formChange)=\"formChanged($event)\" display=\"line\"></xiri-form-fields>\n\t\t\t\t<ng-container *ngTemplateOutlet=\"filterState\"></ng-container>\n\t\t\t\t@if (error()) {\n\t\t\t\t\t<div class=\"error\">\n\t\t\t\t\t\t<span>{{ error() }}</span>\n\t\t\t\t\t\t<button mat-button type=\"button\" data-testid=\"query-retry\" (click)=\"retry()\">\n\t\t\t\t\t\t\t<mat-icon>refresh</mat-icon> Retry\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t</div>\n\t@if (settings().buttonline; as buttonline) {\n\t\t<div class=\"xcol formbtnline\" [class]=\"buttonline.display\">\n\t\t\t<xiri-buttonline [settings]=\"$any(buttonline.data)\" [filterData]=\"filterData()\" [disabled]=\"!formValid()\"\n\t\t\t (result)=\"clickedButton($event)\"></xiri-buttonline>\n\t\t</div>\n\t\t@if (loading()) {\n\t\t\t<div class=\"xcol\">\n\t\t\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t\t\t</div>\n\t\t}\n\t}\n\t@if (dynData.data) {\n\t\t<div class=\"xcol\">\n\t\t\t<ng-container *ngTemplateOutlet=\"dyncomponent(); context: { $implicit: dynData }\"></ng-container>\n\t\t</div>\n\t}\n\t@if (data()) {\n\t\t<div class=\"xcol\" [class.is-loading]=\"loading()\">\n\t\t\t<ng-container *ngTemplateOutlet=\"dyncomponent(); context: { $implicit: data() }\"></ng-container>\n\t\t</div>\n\t}\n</div>\n\n<ng-template #filterState>\n\t@if (settings().showActiveFilters && activeFilters().length) {\n\t\t<div class=\"query-filter-state\">\n\t\t\t<mat-chip-set aria-label=\"Aktive Filter\">\n\t\t\t\t@for (filter of activeFilters(); track filter.id) {\n\t\t\t\t\t<mat-chip data-testid=\"query-filter-chip\" (removed)=\"removeFilter(filter.id)\">\n\t\t\t\t\t\t<span class=\"chip-label\">{{ filter.label }}: {{ filter.value }}</span>\n\t\t\t\t\t\t<button matChipRemove type=\"button\"\n\t\t\t\t\t\t [attr.aria-label]=\"'Filter entfernen: ' + filter.label + ' ' + filter.value\">\n\t\t\t\t\t\t\t<mat-icon>cancel</mat-icon>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</mat-chip>\n\t\t\t\t}\n\t\t\t</mat-chip-set>\n\t\t\t<button mat-button type=\"button\" class=\"reset-filters\" data-testid=\"query-reset-filters\"\n\t\t\t (click)=\"resetFilters()\">\n\t\t\t\t<mat-icon>filter_list_off</mat-icon> Alle zur\u00FCcksetzen\n\t\t\t</button>\n\t\t</div>\n\t}\n\t@if (settings().showResultCount && resultCount(); as rc) {\n\t\t<div class=\"query-result-count\" data-testid=\"query-result-count\" aria-live=\"polite\">\n\t\t\t@if (rc.total !== undefined) {\n\t\t\t\t<span><strong>{{ rc.filtered }}</strong> von {{ rc.total }} Treffern</span>\n\t\t\t} @else {\n\t\t\t\t<span><strong>{{ rc.filtered }}</strong> Treffer</span>\n\t\t\t}\n\t\t</div>\n\t}\n</ng-template>\n", styles: [".query{padding-left:var(--xiri-spacing-md);padding-right:var(--xiri-spacing-md)}.is-loading{opacity:.5;transition:opacity .15s ease-in-out;pointer-events:none}.query-filter-state{display:flex;align-items:center;flex-wrap:wrap;gap:var(--xiri-spacing-sm);margin-top:var(--xiri-spacing-sm)}.query-filter-state .reset-filters mat-icon{margin-right:var(--xiri-spacing-xs)}.query-result-count{margin-top:var(--xiri-spacing-sm);color:var(--on-surface-variant, var(--mat-sys-on-surface-variant, inherit));font-size:.9rem}.query-expansion .query{padding-left:0;padding-right:0}.query-expansion mat-panel-title mat-icon{margin-right:var(--xiri-spacing-sm)}\n"], dependencies: [{ kind: "component", type: XiriFormFieldsComponent, selector: "xiri-form-fields", inputs: ["form", "display", "disabled", "check", "serverErrors"], outputs: ["formChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XiriButtonlineComponent, selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }] }); }
|
|
6866
7009
|
}
|
|
6867
7010
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriQueryComponent, decorators: [{
|
|
6868
7011
|
type: Component,
|
|
@@ -7762,6 +7905,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
7762
7905
|
args: [{ providedIn: 'root' }]
|
|
7763
7906
|
}] });
|
|
7764
7907
|
|
|
7908
|
+
/**
|
|
7909
|
+
* Vertrag über alle "type"-Werte, die xiri-dyncomponent rendert. Einzige Quelle für die Union
|
|
7910
|
+
* XiriDynDataType und den COMPONENT_CATALOG; xiri-go führt dieselbe Liste als core.ComponentTypes().
|
|
7911
|
+
*/
|
|
7912
|
+
const XIRI_COMPONENT_TYPES = [
|
|
7913
|
+
'card', 'buttonline', 'table', 'cardlink', 'links', 'form',
|
|
7914
|
+
'query', 'stepper', 'header', 'list', 'spacer', 'container', 'infopoint',
|
|
7915
|
+
'multiprogress', 'progress', 'imagetext', 'tabs', 'expansion', 'infotext', 'html', 'stat',
|
|
7916
|
+
'empty-state', 'timeline', 'page-header', 'section', 'divider', 'stat-grid', 'multi-stat',
|
|
7917
|
+
'toolbar', 'description-list', 'barchart', 'linechart', 'piechart', 'gaugechart',
|
|
7918
|
+
'bulletchart', 'heatmap', 'calendar', 'tree', 'sankey', 'gantt',
|
|
7919
|
+
'status', 'callout',
|
|
7920
|
+
];
|
|
7921
|
+
|
|
7922
|
+
// Komponenten-Katalog: maschinenlesbare Beschreibung aller "type"-Werte, die xiri-dyncomponent
|
|
7923
|
+
// rendert. Quelle der Typen ist XIRI_COMPONENT_TYPES (dyndata.interface.ts); der Katalog ergänzt
|
|
7924
|
+
// Name, Kategorie, Demo-Route und Suchbegriffe. Agenten und Tools können ihn importieren, um zu
|
|
7925
|
+
// erfahren, welche `type`-Werte der Renderer kennt. Der Demo-Explorer (/web/Overview) zeigt ihn an.
|
|
7926
|
+
//
|
|
7927
|
+
// Vertragsfelder (per Spec geprüft, siehe catalog-parity.spec.ts):
|
|
7928
|
+
// - `type` : aus XiriDynDataType; Katalog und XIRI_COMPONENT_TYPES sind deckungsgleich.
|
|
7929
|
+
// - `dyncomponent` : true, wenn der Typ einen @case in dyncomponent.component.html besitzt.
|
|
7930
|
+
// - `goBuilder` : true, wenn xiri-go diesen "type" ausgibt; xiri-go prüft das in
|
|
7931
|
+
// component/core/types_test.go gegen core.ComponentTypes(). Nur `cardlink`
|
|
7932
|
+
// hat keinen Go-Builder.
|
|
7933
|
+
// Informationsfelder (nicht geprüft):
|
|
7934
|
+
// - `angular` : eigene, aus public-api.ts exportierte Lib-Component. Die Inline-Primitive
|
|
7935
|
+
// (spacer/container/infotext/html) zeichnet der Renderer direkt → false.
|
|
7936
|
+
// - `route` : die Demo-Route (app-routing.module.ts), die den Typ zeigt.
|
|
7937
|
+
const COMPONENT_CATALOG = [
|
|
7938
|
+
// Data Entry
|
|
7939
|
+
{ type: 'form', name: 'Form', category: 'Data Entry', angular: true, dyncomponent: true, goBuilder: true, route: '/Forms', keywords: ['form', 'field', 'input', 'formular', 'eingabe'] },
|
|
7940
|
+
// Data Display
|
|
7941
|
+
{ type: 'table', name: 'Table', category: 'Data Display', angular: true, dyncomponent: true, goBuilder: true, route: '/Tables', keywords: ['table', 'grid', 'tabelle', 'daten', 'rows'] },
|
|
7942
|
+
{ type: 'card', name: 'Card', category: 'Data Display', angular: true, dyncomponent: true, goBuilder: true, route: '/Cards', keywords: ['card', 'karte', 'panel'] },
|
|
7943
|
+
{ type: 'cardlink', name: 'Card Link', category: 'Data Display', angular: true, dyncomponent: true, goBuilder: false, route: '/Cards', keywords: ['cardlink', 'link', 'navigation', 'tile', 'kachel'] },
|
|
7944
|
+
{ type: 'links', name: 'Links', category: 'Data Display', angular: true, dyncomponent: true, goBuilder: true, route: '/Display', keywords: ['links', 'anchor', 'verweise'] },
|
|
7945
|
+
{ type: 'list', name: 'List', category: 'Data Display', angular: true, dyncomponent: true, goBuilder: true, route: '/Display', keywords: ['list', 'liste', 'items'] },
|
|
7946
|
+
{ type: 'infopoint', name: 'Infopoint', category: 'Data Display', angular: true, dyncomponent: true, goBuilder: true, route: '/Display', keywords: ['infopoint', 'info', 'detail', 'label'] },
|
|
7947
|
+
{ type: 'imagetext', name: 'Image Text', category: 'Data Display', angular: true, dyncomponent: true, goBuilder: true, route: '/Display', keywords: ['imagetext', 'image', 'bild', 'media'] },
|
|
7948
|
+
{ type: 'infotext', name: 'Info Text', category: 'Data Display', angular: false, dyncomponent: true, goBuilder: true, route: '/Display', keywords: ['infotext', 'text', 'hinweis'] },
|
|
7949
|
+
{ type: 'html', name: 'HTML', category: 'Data Display', angular: false, dyncomponent: true, goBuilder: true, route: '/Display', keywords: ['html', 'raw', 'markup'] },
|
|
7950
|
+
{ type: 'stat', name: 'Stat', category: 'Data Display', angular: true, dyncomponent: true, goBuilder: true, route: '/Stats', keywords: ['stat', 'kpi', 'metric', 'kennzahl'] },
|
|
7951
|
+
{ type: 'stat-grid', name: 'Stat Grid', category: 'Data Display', angular: true, dyncomponent: true, goBuilder: true, route: '/Stats', keywords: ['stat-grid', 'stat', 'kpi', 'grid', 'dashboard'] },
|
|
7952
|
+
{ type: 'multi-stat', name: 'Multi Stat', category: 'Data Display', angular: true, dyncomponent: true, goBuilder: true, route: '/MultiStat', keywords: ['multi-stat', 'stat', 'kpi', 'metric', 'kennzahl'] },
|
|
7953
|
+
{ type: 'description-list', name: 'Description List', category: 'Data Display', angular: true, dyncomponent: true, goBuilder: true, route: '/Layout', keywords: ['description-list', 'definition', 'key value', 'metadaten'] },
|
|
7954
|
+
{ type: 'timeline', name: 'Timeline', category: 'Data Display', angular: true, dyncomponent: true, goBuilder: true, route: '/Timeline', keywords: ['timeline', 'verlauf', 'history', 'events'] },
|
|
7955
|
+
// Layout & Navigation
|
|
7956
|
+
{ type: 'header', name: 'Header', category: 'Layout & Navigation', angular: true, dyncomponent: true, goBuilder: true, route: '/Navigation', keywords: ['header', 'kopf', 'title'] },
|
|
7957
|
+
{ type: 'buttonline', name: 'Button Line', category: 'Layout & Navigation', angular: true, dyncomponent: true, goBuilder: true, route: '/Navigation', keywords: ['buttonline', 'button', 'actions', 'aktionen'] },
|
|
7958
|
+
{ type: 'tabs', name: 'Tabs', category: 'Layout & Navigation', angular: true, dyncomponent: true, goBuilder: true, route: '/Navigation', keywords: ['tabs', 'reiter', 'tab'] },
|
|
7959
|
+
{ type: 'expansion', name: 'Expansion', category: 'Layout & Navigation', angular: true, dyncomponent: true, goBuilder: true, route: '/Expansion', keywords: ['expansion', 'accordion', 'panel', 'ausklappen'] },
|
|
7960
|
+
{ type: 'toolbar', name: 'Toolbar', category: 'Layout & Navigation', angular: true, dyncomponent: true, goBuilder: true, route: '/Layout', keywords: ['toolbar', 'leiste', 'actions'] },
|
|
7961
|
+
{ type: 'section', name: 'Section', category: 'Layout & Navigation', angular: true, dyncomponent: true, goBuilder: true, route: '/Layout', keywords: ['section', 'abschnitt', 'gruppe'] },
|
|
7962
|
+
{ type: 'page-header', name: 'Page Header', category: 'Layout & Navigation', angular: true, dyncomponent: true, goBuilder: true, route: '/Layout', keywords: ['page-header', 'header', 'seitenkopf', 'title'] },
|
|
7963
|
+
{ type: 'divider', name: 'Divider', category: 'Layout & Navigation', angular: true, dyncomponent: true, goBuilder: true, route: '/Layout', keywords: ['divider', 'trenner', 'separator', 'line'] },
|
|
7964
|
+
{ type: 'spacer', name: 'Spacer', category: 'Layout & Navigation', angular: false, dyncomponent: true, goBuilder: true, route: '/Layout', keywords: ['spacer', 'abstand', 'gap', 'space'] },
|
|
7965
|
+
{ type: 'container', name: 'Container', category: 'Layout & Navigation', angular: false, dyncomponent: true, goBuilder: true, route: '/Layout', keywords: ['container', 'wrapper', 'group', 'nested'] },
|
|
7966
|
+
// Feedback & Status
|
|
7967
|
+
{ type: 'status', name: 'Status', category: 'Feedback & Status', angular: true, dyncomponent: true, goBuilder: true, route: '/Status', keywords: ['status', 'badge', 'zustand', 'tone'] },
|
|
7968
|
+
{ type: 'callout', name: 'Callout', category: 'Feedback & Status', angular: true, dyncomponent: true, goBuilder: true, route: '/Callout', keywords: ['callout', 'alert', 'banner', 'hinweis', 'inline'] },
|
|
7969
|
+
{ type: 'empty-state', name: 'Empty State', category: 'Feedback & Status', angular: true, dyncomponent: true, goBuilder: true, route: '/EmptyState', keywords: ['empty-state', 'empty', 'leer', 'placeholder'] },
|
|
7970
|
+
{ type: 'progress', name: 'Progress', category: 'Feedback & Status', angular: true, dyncomponent: true, goBuilder: true, route: '/Feedback', keywords: ['progress', 'fortschritt', 'bar', 'loading'] },
|
|
7971
|
+
{ type: 'multiprogress', name: 'Multi Progress', category: 'Feedback & Status', angular: true, dyncomponent: true, goBuilder: true, route: '/Feedback', keywords: ['multiprogress', 'progress', 'fortschritt', 'stacked'] },
|
|
7972
|
+
// Workflows
|
|
7973
|
+
{ type: 'stepper', name: 'Stepper', category: 'Workflows', angular: true, dyncomponent: true, goBuilder: true, route: '/Workflow', keywords: ['stepper', 'wizard', 'steps', 'schritte'] },
|
|
7974
|
+
{ type: 'query', name: 'Query', category: 'Workflows', angular: true, dyncomponent: true, goBuilder: true, route: '/Workflow', keywords: ['query', 'filter', 'suche', 'search'] },
|
|
7975
|
+
// Charts & Visualization
|
|
7976
|
+
{ type: 'barchart', name: 'Bar Chart', category: 'Charts & Visualization', angular: true, dyncomponent: true, goBuilder: true, route: '/BarCharts', keywords: ['barchart', 'bar', 'chart', 'balken', 'diagramm'] },
|
|
7977
|
+
{ type: 'linechart', name: 'Line Chart', category: 'Charts & Visualization', angular: true, dyncomponent: true, goBuilder: true, route: '/BarCharts', keywords: ['linechart', 'line', 'chart', 'linie', 'diagramm'] },
|
|
7978
|
+
{ type: 'piechart', name: 'Pie Chart', category: 'Charts & Visualization', angular: true, dyncomponent: true, goBuilder: true, route: '/BarCharts', keywords: ['piechart', 'pie', 'donut', 'chart', 'torte'] },
|
|
7979
|
+
{ type: 'gaugechart', name: 'Gauge Chart', category: 'Charts & Visualization', angular: true, dyncomponent: true, goBuilder: true, route: '/BarCharts', keywords: ['gaugechart', 'gauge', 'tacho', 'chart'] },
|
|
7980
|
+
{ type: 'bulletchart', name: 'Bullet Chart', category: 'Charts & Visualization', angular: true, dyncomponent: true, goBuilder: true, route: '/BarCharts', keywords: ['bulletchart', 'bullet', 'chart', 'ziel', 'target'] },
|
|
7981
|
+
{ type: 'heatmap', name: 'Heatmap', category: 'Charts & Visualization', angular: true, dyncomponent: true, goBuilder: true, route: '/BarCharts', keywords: ['heatmap', 'heat', 'matrix', 'chart'] },
|
|
7982
|
+
{ type: 'calendar', name: 'Calendar', category: 'Charts & Visualization', angular: true, dyncomponent: true, goBuilder: true, route: '/BarCharts', keywords: ['calendar', 'kalender', 'heatmap', 'chart'] },
|
|
7983
|
+
{ type: 'tree', name: 'Tree', category: 'Charts & Visualization', angular: true, dyncomponent: true, goBuilder: true, route: '/BarCharts', keywords: ['tree', 'baum', 'hierarchy', 'chart'] },
|
|
7984
|
+
{ type: 'sankey', name: 'Sankey', category: 'Charts & Visualization', angular: true, dyncomponent: true, goBuilder: true, route: '/BarCharts', keywords: ['sankey', 'flow', 'fluss', 'chart'] },
|
|
7985
|
+
{ type: 'gantt', name: 'Gantt', category: 'Charts & Visualization', angular: true, dyncomponent: true, goBuilder: true, route: '/BarCharts', keywords: ['gantt', 'timeline', 'projekt', 'chart'] },
|
|
7986
|
+
];
|
|
7987
|
+
|
|
7765
7988
|
class XiriAlertComponent {
|
|
7766
7989
|
constructor() {
|
|
7767
7990
|
this.dialogRef = inject(MatDialogRef);
|
|
@@ -9500,5 +9723,5 @@ function provideXiriServices(config) {
|
|
|
9500
9723
|
* Generated bundle index. Do not edit.
|
|
9501
9724
|
*/
|
|
9502
9725
|
|
|
9503
|
-
export { COLOR_CSS_VAR, DEFAULT_COMPARE, DEFAULT_PREDICATE, FALLBACK_COLORS, SafehtmlPipe, ThemeService, XIRI_PANEL_HOST, XiriAlertComponent, XiriBarChartComponent, XiriBreadcrumbComponent, XiriBulletChartComponent, XiriButtonComponent, XiriButtonlineComponent, XiriButtonstyleComponent, XiriCalendarComponent, XiriCalloutComponent, XiriCardComponent, XiriCardlinkComponent, XiriColsDirective, XiriDataService, XiriDataServiceConfig, XiriDescriptionListComponent, XiriDialogComponent, XiriDividerComponent, XiriDoneComponent, XiriDownloadService, XiriDynComponentComponent, XiriEchartsHostComponent, XiriEmptyStateComponent, XiriErrorComponent, XiriExpansionComponent, XiriExpansionPanelDirective, XiriFormComponent, XiriFormFieldsComponent, XiriFormService, XiriGanttComponent, XiriGaugeChartComponent, XiriHeaderComponent, XiriHeatmapComponent, XiriImagetextComponent, XiriInfopointComponent, XiriLineChartComponent, XiriLinksComponent, XiriListComponent, XiriLocalStorageService, XiriLocaleService, XiriMultiStatComponent, XiriMultiprogressComponent, XiriPageHeaderComponent, XiriPieChartComponent, XiriProgressComponent, XiriQueryComponent, XiriRawTableComponent, XiriResponseHandlerService, XiriSankeyComponent, XiriSearchComponent, XiriSectionComponent, XiriSelectDirective, XiriSessionStorageService, XiriSidenavComponent, XiriSidepanelComponent, XiriSidepanelRef, XiriSidepanelService, XiriSkeletonComponent, XiriSnackbarService, XiriStatComponent, XiriStatGridComponent, XiriStatusComponent, XiriStepperComponent, XiriTableComponent, XiriTabsComponent, XiriTimelineComponent, XiriToolbarComponent, XiriTreeComponent, XiriUrlPipe, colsToClasses, createPanelLoader, defaultXiriDataServiceConfig, escapeHtml, notifyThemeChanged, provideXiriServices, resolveColor };
|
|
9726
|
+
export { COLOR_CSS_VAR, COMPONENT_CATALOG, DEFAULT_COMPARE, DEFAULT_PREDICATE, FALLBACK_COLORS, SafehtmlPipe, ThemeService, XIRI_COMPONENT_TYPES, XIRI_PANEL_HOST, XiriAlertComponent, XiriBarChartComponent, XiriBreadcrumbComponent, XiriBulletChartComponent, XiriButtonComponent, XiriButtonlineComponent, XiriButtonstyleComponent, XiriCalendarComponent, XiriCalloutComponent, XiriCardComponent, XiriCardlinkComponent, XiriColsDirective, XiriDataService, XiriDataServiceConfig, XiriDescriptionListComponent, XiriDialogComponent, XiriDividerComponent, XiriDoneComponent, XiriDownloadService, XiriDynComponentComponent, XiriEchartsHostComponent, XiriEmptyStateComponent, XiriErrorComponent, XiriExpansionComponent, XiriExpansionPanelDirective, XiriFormComponent, XiriFormFieldsComponent, XiriFormService, XiriGanttComponent, XiriGaugeChartComponent, XiriHeaderComponent, XiriHeatmapComponent, XiriImagetextComponent, XiriInfopointComponent, XiriLineChartComponent, XiriLinksComponent, XiriListComponent, XiriLocalStorageService, XiriLocaleService, XiriMultiStatComponent, XiriMultiprogressComponent, XiriPageHeaderComponent, XiriPieChartComponent, XiriProgressComponent, XiriQueryComponent, XiriRawTableComponent, XiriResponseHandlerService, XiriSankeyComponent, XiriSearchComponent, XiriSectionComponent, XiriSelectDirective, XiriSessionStorageService, XiriSidenavComponent, XiriSidepanelComponent, XiriSidepanelRef, XiriSidepanelService, XiriSkeletonComponent, XiriSnackbarService, XiriStatComponent, XiriStatGridComponent, XiriStatusComponent, XiriStepperComponent, XiriSuggestDirective, XiriTableComponent, XiriTabsComponent, XiriTimelineComponent, XiriToolbarComponent, XiriTreeComponent, XiriUrlPipe, colsToClasses, createPanelLoader, defaultXiriDataServiceConfig, escapeHtml, notifyThemeChanged, provideXiriServices, resolveColor };
|
|
9504
9727
|
//# sourceMappingURL=xiriframework-xiri-ng.mjs.map
|