@xiriframework/xiri-ng 0.4.14 → 0.5.0

package/fesm2022/xiriframework-xiri-ng.mjs

@@ -1,11 +1,11 @@
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i0 from '@angular/core';
-import { inject, Pipe, input, computed, Directive, Injectable, ElementRef, ChangeDetectorRef, Input, Component, PLATFORM_ID, signal, effect, Service, output, numberAttribute, afterRenderEffect, untracked, booleanAttribute, viewChild, DestroyRef, forwardRef, InjectionToken, Injector, afterNextRender, ViewEncapsulation, linkedSignal, ChangeDetectionStrategy, NgZone, makeEnvironmentProviders } from '@angular/core';
+import { inject, SecurityContext, Pipe, input, computed, Directive, Injectable, ElementRef, ChangeDetectorRef, Input, Component, PLATFORM_ID, signal, effect, Service, output, numberAttribute, afterRenderEffect, untracked, booleanAttribute, viewChild, DestroyRef, forwardRef, InjectionToken, Injector, afterNextRender, ViewEncapsulation, linkedSignal, ChangeDetectionStrategy, NgZone, makeEnvironmentProviders } from '@angular/core';
 import { DefaultUrlSerializer, RouterLink, Router, NavigationEnd } from '@angular/router';
 import { takeUntilDestroyed, toSignal, rxResource } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { NgControl, FormGroup, FormControl, FormsModule, ReactiveFormsModule, NgForm, FormGroupDirective, Validators, FormBuilder, UntypedFormControl, NG_VALUE_ACCESSOR, UntypedFormBuilder } from '@angular/forms';
-import { tap, Subject, Subscription, debounceTime, distinctUntilChanged, BehaviorSubject, ReplaySubject, switchMap, catchError, of, merge, filter as filter$1, map, EMPTY, timer, finalize, throwError } from 'rxjs';
+import { tap, Subject, Subscription, debounceTime, distinctUntilChanged, BehaviorSubject, ReplaySubject, switchMap, catchError, of, concat, timer, map, merge, filter as filter$1, EMPTY, finalize, throwError } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
@@ -16,11 +16,11 @@ import { MatIcon } from '@angular/material/icon';
 import { MatIconButton, MatButton, MatFabButton, MatMiniFabButton } from '@angular/material/button';
 import { MatInput } from '@angular/material/input';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { KeyValuePipe, isPlatformBrowser, AsyncPipe, NgTemplateOutlet, NgComponentOutlet, Location, DatePipe, SlicePipe } from '@angular/common';
 import { MatOption, DateAdapter, ErrorStateMatcher, _ErrorStateTracker, MAT_DATE_FORMATS, MatRipple } from '@angular/material/core';
 import { MatSelect, MatOption as MatOption$1 } from '@angular/material/select';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { MatRadioButton, MatRadioGroup } from '@angular/material/radio';
+import { isPlatformBrowser, AsyncPipe, NgTemplateOutlet, NgComponentOutlet, Location, DatePipe, SlicePipe } from '@angular/common';
 import { fromUnixTime, format, transpose } from 'date-fns';
 import { tz } from '@date-fns/tz';
 import { de } from 'date-fns/locale/de';
@@ -29,11 +29,11 @@ import { MatDatepickerInput, MatDatepickerToggle, MatDatepickerToggleIcon, MatDa
 import { MatTree, MatTreeNestedDataSource, MatTreeNode, MatTreeNodeToggle, MatTreeNodePadding, MatTreeNodeDef } from '@angular/material/tree';
 import { SelectionModel } from '@angular/cdk/collections';
 import { filter, takeUntil, debounceTime as debounceTime$1 } from 'rxjs/operators';
+import { MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
 import * as i2 from 'ngx-mat-select-search';
 import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
 import { ENTER, COMMA, ESCAPE } from '@angular/cdk/keycodes';
-import { MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
 import { MatChipGrid, MatChipRow, MatChipRemove, MatChipInput, MatChipSet, MatChip } from '@angular/material/chips';
 import { MatTableDataSource, MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatFooterRow, MatFooterRowDef, MatFooterCell, MatFooterCellDef } from '@angular/material/table';
 import { MatTooltip } from '@angular/material/tooltip';
@@ -51,12 +51,14 @@ import { Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { CdkScrollable } from '@angular/cdk/scrolling';
 
+// HTML aus dem Backend enthält oft Record-Daten (Status, Adressen, Notizen). Angulars Sanitizer
+// behält Formatierung und class, entfernt aber Scripts, Event-Handler und javascript:-URLs.
 class SafehtmlPipe {
     constructor() {
         this.sanitizer = inject(DomSanitizer);
     }
-    transform(style) {
-        return this.sanitizer.bypassSecurityTrustHtml(style);
+    transform(value) {
+        return this.sanitizer.sanitize(SecurityContext.HTML, value ?? '') ?? '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SafehtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.5", ngImport: i0, type: SafehtmlPipe, isStandalone: true, name: "safeHtml" }); }
@@ -250,6 +252,17 @@ function parseHttpError(err) {
         return 'Connection error';
     return 'Unknown error';
 }
+/** Liest `fields: {id: message}` aus einer 400-Antwort (xiri-go FieldErrors); nur String-Werte, sonst undefined. */
+function parseFieldErrors(err) {
+    const fields = err.error?.fields;
+    if (err.status !== 400 || !fields || typeof fields !== 'object' || Array.isArray(fields))
+        return undefined;
+    const out = {};
+    for (const [id, message] of Object.entries(fields))
+        if (typeof message === 'string')
+            out[id] = message;
+    return Object.keys(out).length ? out : undefined;
+}
 
 // The "empty" value used to clear a control, matching the shape the control currently holds.
 function emptyValueForField(field) {
@@ -496,20 +509,7 @@ class XiriTimelimitComponent {
         this.hours = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09',
             '10', '11', '12', '13', '14', '15', '16', '17', '18', '19',
             '20', '21', '22', '23', '24'];
-        this.minutes = {
-            0: '00',
-            5: '05',
-            10: '10',
-            15: '15',
-            20: '20',
-            25: '25',
-            30: '30',
-            35: '35',
-            40: '40',
-            45: '45',
-            50: '50',
-            55: '55'
-        };
+        this.minutes = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
         this.onChange = () => { };
         this.onTouched = () => { };
         this._texts = {};
@@ -575,7 +575,7 @@ class XiriTimelimitComponent {
                     !limit.wd[4] &&
                     !limit.wd[5] &&
                     !limit.wd[6])) &&
-                limit.fromhour == 0 && limit.frommin == 0 && limit.tohour == 24 && limit.frommin == 0) {
+                limit.fromhour == 0 && limit.frommin == 0 && limit.tohour == 24 && limit.tomin == 0) {
                 isNotValid = true;
             }
         }
@@ -673,14 +673,11 @@ class XiriTimelimitComponent {
             return;
         this._texts = input;
     }
-    onCompare() {
-        return -1;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriTimelimitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: XiriTimelimitComponent, isStandalone: true, selector: "xiri-timelimit", inputs: { placeholder: "placeholder", required: "required", disabled: "disabled", value: "value", texts: "texts" }, host: { properties: { "id": "id", "attr.aria-describedby": "describedBy" } }, providers: [{
                 provide: MatFormFieldControl,
                 useExisting: XiriTimelimitComponent
-            }], ngImport: i0, template: "<div class=\"timelimit\" [formGroup]=\"parts\">\n\n\t<mat-checkbox id=\"check\" formControlName=\"check\" (change)=\"changed()\">{{ _texts.check }}</mat-checkbox>\n\n\t<div [hidden]=\"!parts.value.check\" class=\"space\">\n\t\t<div class=\"xrow xsmall\">\n\t\t\t<div class=\"xcol-12\">\n\t\t\t\t<mat-label>{{ _texts.weekdays }}</mat-label>\n\t\t\t\t<div class=\"form-group timelimit-weekdays\">\n\t\t\t\t\t<mat-checkbox id=\"wd0\" formControlName=\"wd0\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd0 }}</mat-checkbox>\n\t\t\t\t\t<mat-checkbox id=\"wd1\" formControlName=\"wd1\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd1 }}</mat-checkbox>\n\t\t\t\t\t<mat-checkbox id=\"wd2\" formControlName=\"wd2\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd2 }}</mat-checkbox>\n\t\t\t\t\t<mat-checkbox id=\"wd3\" formControlName=\"wd3\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd3 }}</mat-checkbox>\n\t\t\t\t\t<mat-checkbox id=\"wd4\" formControlName=\"wd4\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd4 }}</mat-checkbox>\n\t\t\t\t\t<mat-checkbox id=\"wd5\" formControlName=\"wd5\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd5 }}</mat-checkbox>\n\t\t\t\t\t<mat-checkbox id=\"wd6\" formControlName=\"wd6\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd6 }}</mat-checkbox>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"xcol-md-6\">\n\t\t\t\t<mat-label>{{ _texts.from }}</mat-label>\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<mat-form-field class=\"time\">\n\t\t\t\t\t\t<mat-select formControlName=\"fromhour\" panelWidth=\"auto\">\n\t\t\t\t\t\t\t@for (h of hours; track h; let i = $index) {\n\t\t\t\t\t\t\t\t<mat-option [value]=\"i\">{{ h }}</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</mat-form-field>\n\t\t\t\t\t<mat-form-field class=\"time\">\n\t\t\t\t\t\t<mat-select formControlName=\"frommin\" panelWidth=\"auto\">\n\t\t\t\t\t\t\t@for (m of minutes | keyvalue:onCompare; track m; let i = $index) {\n\t\t\t\t\t\t\t\t<mat-option [value]=\"i\">{{ m.value }}</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</mat-form-field>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"xcol-md-6\">\n\t\t\t\t<mat-label>{{ _texts.to }}</mat-label>\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<mat-form-field class=\"time\">\n\t\t\t\t\t\t<mat-select formControlName=\"tohour\" panelWidth=\"auto\">\n\t\t\t\t\t\t\t@for (h of hours; track h; let i = $index) {\n\t\t\t\t\t\t\t\t<mat-option [value]=\"i\">{{ h }}</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</mat-form-field>\n\t\t\t\t\t<mat-form-field class=\"time\">\n\t\t\t\t\t\t<mat-select formControlName=\"tomin\" panelWidth=\"auto\">\n\t\t\t\t\t\t\t@for (m of minutes | keyvalue; track m; let i = $index) {\n\t\t\t\t\t\t\t\t<mat-option [value]=\"i\">{{ m.value }}</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</mat-form-field>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"xcol-12\">\n\t\t\t\t<mat-checkbox id=\"inout\" formControlName=\"inout\" (change)=\"changed()\">{{ _texts.inout }}</mat-checkbox>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>", styles: [".time{width:5.5rem;margin-left:.5rem;margin-right:.5rem}.timelimit-weekdays .wd+.wd{margin-left:1.2rem}mat-label{color:var(--on-surface-variant, rgba(0, 0, 0, .54))}.space{margin-top:1rem;padding-left:1rem;padding-bottom:1rem;border-left:1px solid var(--outline-variant, #C2C7CF)}.form-group{padding-bottom:7px}[hidden]{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: 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: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
+            }], ngImport: i0, template: "<div class=\"timelimit\" [formGroup]=\"parts\">\n\n\t<mat-checkbox id=\"check\" formControlName=\"check\" (change)=\"changed()\">{{ _texts.check }}</mat-checkbox>\n\n\t<div [hidden]=\"!parts.value.check\" class=\"space\">\n\t\t<div class=\"xrow xsmall\">\n\t\t\t<div class=\"xcol-12\">\n\t\t\t\t<mat-label>{{ _texts.weekdays }}</mat-label>\n\t\t\t\t<div class=\"form-group timelimit-weekdays\">\n\t\t\t\t\t<mat-checkbox id=\"wd0\" formControlName=\"wd0\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd0 }}</mat-checkbox>\n\t\t\t\t\t<mat-checkbox id=\"wd1\" formControlName=\"wd1\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd1 }}</mat-checkbox>\n\t\t\t\t\t<mat-checkbox id=\"wd2\" formControlName=\"wd2\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd2 }}</mat-checkbox>\n\t\t\t\t\t<mat-checkbox id=\"wd3\" formControlName=\"wd3\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd3 }}</mat-checkbox>\n\t\t\t\t\t<mat-checkbox id=\"wd4\" formControlName=\"wd4\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd4 }}</mat-checkbox>\n\t\t\t\t\t<mat-checkbox id=\"wd5\" formControlName=\"wd5\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd5 }}</mat-checkbox>\n\t\t\t\t\t<mat-checkbox id=\"wd6\" formControlName=\"wd6\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd6 }}</mat-checkbox>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"xcol-md-6\">\n\t\t\t\t<mat-label>{{ _texts.from }}</mat-label>\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<mat-form-field class=\"time\">\n\t\t\t\t\t\t<mat-select formControlName=\"fromhour\" panelWidth=\"auto\">\n\t\t\t\t\t\t\t@for (h of hours; track h; let i = $index) {\n\t\t\t\t\t\t\t\t<mat-option [value]=\"i\">{{ h }}</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</mat-form-field>\n\t\t\t\t\t<mat-form-field class=\"time\">\n\t\t\t\t\t\t<mat-select formControlName=\"frommin\" panelWidth=\"auto\">\n\t\t\t\t\t\t\t@for (m of minutes; track m) {\n\t\t\t\t\t\t\t\t<mat-option [value]=\"m\">{{ m < 10 ? '0' + m : m }}</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</mat-form-field>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"xcol-md-6\">\n\t\t\t\t<mat-label>{{ _texts.to }}</mat-label>\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<mat-form-field class=\"time\">\n\t\t\t\t\t\t<mat-select formControlName=\"tohour\" panelWidth=\"auto\">\n\t\t\t\t\t\t\t@for (h of hours; track h; let i = $index) {\n\t\t\t\t\t\t\t\t<mat-option [value]=\"i\">{{ h }}</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</mat-form-field>\n\t\t\t\t\t<mat-form-field class=\"time\">\n\t\t\t\t\t\t<mat-select formControlName=\"tomin\" panelWidth=\"auto\">\n\t\t\t\t\t\t\t@for (m of minutes; track m) {\n\t\t\t\t\t\t\t\t<mat-option [value]=\"m\">{{ m < 10 ? '0' + m : m }}</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</mat-form-field>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"xcol-12\">\n\t\t\t\t<mat-checkbox id=\"inout\" formControlName=\"inout\" (change)=\"changed()\">{{ _texts.inout }}</mat-checkbox>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>", styles: [".time{width:5.5rem;margin-left:.5rem;margin-right:.5rem}.timelimit-weekdays .wd+.wd{margin-left:1.2rem}mat-label{color:var(--on-surface-variant, rgba(0, 0, 0, .54))}.space{margin-top:1rem;padding-left:1rem;padding-bottom:1rem;border-left:1px solid var(--outline-variant, #C2C7CF)}.form-group{padding-bottom:7px}[hidden]{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: 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: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriTimelimitComponent, decorators: [{
             type: Component,
@@ -698,8 +695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                         MatFormField,
                         MatSelect,
                         MatOption,
-                        KeyValuePipe,
-                    ], template: "<div class=\"timelimit\" [formGroup]=\"parts\">\n\n\t<mat-checkbox id=\"check\" formControlName=\"check\" (change)=\"changed()\">{{ _texts.check }}</mat-checkbox>\n\n\t<div [hidden]=\"!parts.value.check\" class=\"space\">\n\t\t<div class=\"xrow xsmall\">\n\t\t\t<div class=\"xcol-12\">\n\t\t\t\t<mat-label>{{ _texts.weekdays }}</mat-label>\n\t\t\t\t<div class=\"form-group timelimit-weekdays\">\n\t\t\t\t\t<mat-checkbox id=\"wd0\" formControlName=\"wd0\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd0 }}</mat-checkbox>\n\t\t\t\t\t<mat-checkbox id=\"wd1\" formControlName=\"wd1\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd1 }}</mat-checkbox>\n\t\t\t\t\t<mat-checkbox id=\"wd2\" formControlName=\"wd2\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd2 }}</mat-checkbox>\n\t\t\t\t\t<mat-checkbox id=\"wd3\" formControlName=\"wd3\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd3 }}</mat-checkbox>\n\t\t\t\t\t<mat-checkbox id=\"wd4\" formControlName=\"wd4\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd4 }}</mat-checkbox>\n\t\t\t\t\t<mat-checkbox id=\"wd5\" formControlName=\"wd5\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd5 }}</mat-checkbox>\n\t\t\t\t\t<mat-checkbox id=\"wd6\" formControlName=\"wd6\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd6 }}</mat-checkbox>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"xcol-md-6\">\n\t\t\t\t<mat-label>{{ _texts.from }}</mat-label>\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<mat-form-field class=\"time\">\n\t\t\t\t\t\t<mat-select formControlName=\"fromhour\" panelWidth=\"auto\">\n\t\t\t\t\t\t\t@for (h of hours; track h; let i = $index) {\n\t\t\t\t\t\t\t\t<mat-option [value]=\"i\">{{ h }}</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</mat-form-field>\n\t\t\t\t\t<mat-form-field class=\"time\">\n\t\t\t\t\t\t<mat-select formControlName=\"frommin\" panelWidth=\"auto\">\n\t\t\t\t\t\t\t@for (m of minutes | keyvalue:onCompare; track m; let i = $index) {\n\t\t\t\t\t\t\t\t<mat-option [value]=\"i\">{{ m.value }}</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</mat-form-field>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"xcol-md-6\">\n\t\t\t\t<mat-label>{{ _texts.to }}</mat-label>\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<mat-form-field class=\"time\">\n\t\t\t\t\t\t<mat-select formControlName=\"tohour\" panelWidth=\"auto\">\n\t\t\t\t\t\t\t@for (h of hours; track h; let i = $index) {\n\t\t\t\t\t\t\t\t<mat-option [value]=\"i\">{{ h }}</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</mat-form-field>\n\t\t\t\t\t<mat-form-field class=\"time\">\n\t\t\t\t\t\t<mat-select formControlName=\"tomin\" panelWidth=\"auto\">\n\t\t\t\t\t\t\t@for (m of minutes | keyvalue; track m; let i = $index) {\n\t\t\t\t\t\t\t\t<mat-option [value]=\"i\">{{ m.value }}</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</mat-form-field>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"xcol-12\">\n\t\t\t\t<mat-checkbox id=\"inout\" formControlName=\"inout\" (change)=\"changed()\">{{ _texts.inout }}</mat-checkbox>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>", styles: [".time{width:5.5rem;margin-left:.5rem;margin-right:.5rem}.timelimit-weekdays .wd+.wd{margin-left:1.2rem}mat-label{color:var(--on-surface-variant, rgba(0, 0, 0, .54))}.space{margin-top:1rem;padding-left:1rem;padding-bottom:1rem;border-left:1px solid var(--outline-variant, #C2C7CF)}.form-group{padding-bottom:7px}[hidden]{display:none!important}\n"] }]
+                    ], template: "<div class=\"timelimit\" [formGroup]=\"parts\">\n\n\t<mat-checkbox id=\"check\" formControlName=\"check\" (change)=\"changed()\">{{ _texts.check }}</mat-checkbox>\n\n\t<div [hidden]=\"!parts.value.check\" class=\"space\">\n\t\t<div class=\"xrow xsmall\">\n\t\t\t<div class=\"xcol-12\">\n\t\t\t\t<mat-label>{{ _texts.weekdays }}</mat-label>\n\t\t\t\t<div class=\"form-group timelimit-weekdays\">\n\t\t\t\t\t<mat-checkbox id=\"wd0\" formControlName=\"wd0\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd0 }}</mat-checkbox>\n\t\t\t\t\t<mat-checkbox id=\"wd1\" formControlName=\"wd1\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd1 }}</mat-checkbox>\n\t\t\t\t\t<mat-checkbox id=\"wd2\" formControlName=\"wd2\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd2 }}</mat-checkbox>\n\t\t\t\t\t<mat-checkbox id=\"wd3\" formControlName=\"wd3\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd3 }}</mat-checkbox>\n\t\t\t\t\t<mat-checkbox id=\"wd4\" formControlName=\"wd4\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd4 }}</mat-checkbox>\n\t\t\t\t\t<mat-checkbox id=\"wd5\" formControlName=\"wd5\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd5 }}</mat-checkbox>\n\t\t\t\t\t<mat-checkbox id=\"wd6\" formControlName=\"wd6\" class=\"wd\" (change)=\"changed()\">{{ _texts.wd6 }}</mat-checkbox>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"xcol-md-6\">\n\t\t\t\t<mat-label>{{ _texts.from }}</mat-label>\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<mat-form-field class=\"time\">\n\t\t\t\t\t\t<mat-select formControlName=\"fromhour\" panelWidth=\"auto\">\n\t\t\t\t\t\t\t@for (h of hours; track h; let i = $index) {\n\t\t\t\t\t\t\t\t<mat-option [value]=\"i\">{{ h }}</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</mat-form-field>\n\t\t\t\t\t<mat-form-field class=\"time\">\n\t\t\t\t\t\t<mat-select formControlName=\"frommin\" panelWidth=\"auto\">\n\t\t\t\t\t\t\t@for (m of minutes; track m) {\n\t\t\t\t\t\t\t\t<mat-option [value]=\"m\">{{ m < 10 ? '0' + m : m }}</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</mat-form-field>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"xcol-md-6\">\n\t\t\t\t<mat-label>{{ _texts.to }}</mat-label>\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<mat-form-field class=\"time\">\n\t\t\t\t\t\t<mat-select formControlName=\"tohour\" panelWidth=\"auto\">\n\t\t\t\t\t\t\t@for (h of hours; track h; let i = $index) {\n\t\t\t\t\t\t\t\t<mat-option [value]=\"i\">{{ h }}</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</mat-form-field>\n\t\t\t\t\t<mat-form-field class=\"time\">\n\t\t\t\t\t\t<mat-select formControlName=\"tomin\" panelWidth=\"auto\">\n\t\t\t\t\t\t\t@for (m of minutes; track m) {\n\t\t\t\t\t\t\t\t<mat-option [value]=\"m\">{{ m < 10 ? '0' + m : m }}</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</mat-form-field>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"xcol-12\">\n\t\t\t\t<mat-checkbox id=\"inout\" formControlName=\"inout\" (change)=\"changed()\">{{ _texts.inout }}</mat-checkbox>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>", styles: [".time{width:5.5rem;margin-left:.5rem;margin-right:.5rem}.timelimit-weekdays .wd+.wd{margin-left:1.2rem}mat-label{color:var(--on-surface-variant, rgba(0, 0, 0, .54))}.space{margin-top:1rem;padding-left:1rem;padding-bottom:1rem;border-left:1px solid var(--outline-variant, #C2C7CF)}.form-group{padding-bottom:7px}[hidden]{display:none!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { placeholder: [{
                 type: Input
             }], required: [{
@@ -2373,6 +2369,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                 }]
         }], 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 }] }] } });
 
+/**
+ * Vorschläge für ein Textfeld (mat-autocomplete): `field.list` wird lokal gefiltert, bei `field.url`
+ * wird beim Tippen nachgeladen (POST {search, <searchWith-Felder>} -> [{id, name}]). Freie Eingabe
+ * bleibt immer erlaubt - die Directive schreibt nie ins Control, sie liefert nur `options()`.
+ *
+ * Bewusst über DOM-Events statt control.valueChanges: form-fields tauscht Controls bei Formular-
+ * ersetzung aus, die Directive überlebt dank `track field.id` - ein gegriffenes Control wäre alt.
+ */
+class XiriSuggestDirective {
+    constructor() {
+        this.field = input.required({ ...(ngDevMode ? { debugName: "field" } : /* istanbul ignore next */ {}), alias: 'xiriSuggest' });
+        this.search = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+        this.remote = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "remote" }] : /* istanbul ignore next */ []));
+        /** Jeder next() startet die Remote-Kette neu und bricht die vorige ab. */
+        this.typed$ = new Subject();
+        this.dataService = inject(XiriDataService);
+        /** Das formGroup von form-fields; optional, damit die Directive auch an einem nackten Input läuft. */
+        this.formGroupDir = inject(FormGroupDirective, { optional: true });
+        /** Was das Panel zeigt: lokale Treffer, dann Servertreffer, nach name dedupliziert. */
+        this.options = computed(() => {
+            const needle = this.search().toLowerCase();
+            const local = cleanOptions(this.field().list).filter(o => !needle || o.name.toLowerCase().includes(needle));
+            const seen = new Set();
+            return local.concat(this.remote()).filter(o => {
+                if (seen.has(o.name))
+                    return false;
+                seen.add(o.name);
+                return true;
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        this.typed$.pipe(switchMap(s => {
+            const url = this.field().url;
+            if (!url || !s)
+                return of([]);
+            // Alte Treffer sofort weg, dann warten, dann fragen - neue Eingabe bricht alles davor ab.
+            // Kontextwerte erst im Timer-Zweig lesen: eine Änderung innerhalb der 200 ms geht mit.
+            return concat(of([]), timer(200).pipe(switchMap(() => this.dataService.post(url, { ...this.contextValues(), search: s }).pipe(map(cleanOptions), catchError(() => of([]))))));
+        }), takeUntilDestroyed()).subscribe(r => this.remote.set(r));
+        // Feldwechsel (Patch-Klon, Formularersetzung mit gleicher ID): der Text des alten Formulars darf
+        // nie gegen die neue url laufen. Alles zurücksetzen, nichts suchen - der nächste Fokus oder
+        // Tastendruck richtet den Filter neu aus.
+        effect(() => {
+            this.field();
+            untracked(() => this.reset(''));
+        });
+    }
+    onInput(event) {
+        const value = event.target.value;
+        this.search.set(value);
+        this.typed$.next(value);
+    }
+    /** Fokus richtet den lokalen Filter am sichtbaren Wert aus und verwirft bei geändertem Wert alte
+     *  Servertreffer - ohne Request: form-fields fokussiert auch programmatisch. */
+    onFocus(event) {
+        const value = event.target.value;
+        if (value !== this.search())
+            this.reset(value);
+    }
+    reset(search) {
+        this.search.set(search);
+        this.typed$.next(''); // leerer Text -> of([]) im switchMap: bricht ab und leert remote
+    }
+    /** Aktuelle Werte der searchWith-Felder (flache Schlüssel, nur enabled), zur Request-Zeit gelesen. */
+    contextValues() {
+        // Nicht form.value: bei komplett deaktivierter Gruppe enthält das auch deaktivierte Kinder.
+        const controls = this.formGroupDir?.form.controls ?? {};
+        const values = {};
+        for (const id of this.field().searchWith ?? []) {
+            const control = controls[id];
+            if (control?.enabled)
+                values[id] = control.value;
+        }
+        return values;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriSuggestDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriSuggestDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[xiriSuggest]',
+                    exportAs: 'xiriSuggest',
+                    host: { '(input)': 'onInput( $event )', '(focus)': 'onFocus( $event )' },
+                }]
+        }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "xiriSuggest", required: true }] }] } });
+/** Server und Liste sind Trust-Boundary: nur Objekte mit String-name kommen durch. */
+function cleanOptions(value) {
+    return Array.isArray(value)
+        ? value.filter((o) => !!o && typeof o.name === 'string')
+        : [];
+}
+
 class XiriChipsComponent {
     constructor() {
         this.field = input.required(/* @ts-ignore */
@@ -2528,6 +2619,9 @@ class XiriFormFieldsComponent {
         this.formChange = output();
         this.check = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "check" }] : /* istanbul ignore next */ []));
+        // Validierungsfehler pro Feld-ID vom Server (400 mit fields), siehe applyServerError().
+        this.serverErrors = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "serverErrors" }] : /* istanbul ignore next */ []));
         this.lastValue = null;
         this._fields = null;
         this.collapsedSections = signal(new Set(), /* @ts-ignore */
@@ -2669,6 +2763,15 @@ class XiriFormFieldsComponent {
             if (formInput !== null && this._fieldsLoaded)
                 this.reloadKick.next();
         });
+        // Server-Feldfehler (400 mit fields) als Validierungseintrag 'server' einspeisen. Der nächste
+        // valueChange lässt Angular die Validatoren neu laufen und räumt den Eintrag von selbst weg.
+        effect(() => {
+            const errors = this.serverErrors();
+            if (!errors)
+                return;
+            for (const [id, message] of Object.entries(errors))
+                this.applyServerError(id, message);
+        });
     }
     ngOnInit() {
         this.check()?.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
@@ -2782,6 +2885,21 @@ class XiriFormFieldsComponent {
         this.patchedClones.set(id, { ...field });
         this.patchVersion.update(v => v + 1);
     }
+    applyServerError(id, message) {
+        const field = this._fields?.find(f => f.id === id);
+        const control = field?.control;
+        if (!field || !control)
+            return; // unbekannte ID (z. B. Form=false-Feld): ignorieren
+        // nullValidator: der Eintrag dient nur der Anzeige, der Fehler selbst kommt per setErrors.
+        field.validations = [
+            ...(field.validations ?? []).filter(v => v.id !== 'server'),
+            { id: 'server', validator: Validators.nullValidator, message },
+        ];
+        control.setErrors({ ...(control.errors ?? {}), server: true });
+        control.markAsTouched();
+        this.patchedClones.set(id, { ...field });
+        this.patchVersion.update(v => v + 1);
+    }
     applyPatch(url, patch) {
         const fields = this._fields;
         if (fields === null || !patch)
@@ -2840,8 +2958,8 @@ class XiriFormFieldsComponent {
     // monoton ist: ein leeres Feld hat nichts mehr zu verwerfen.
     pruneValue(field, control) {
         // Nur wenn die Liste autoritativ ist. Bei Server-Suche ist list nur der statische Sockel,
-        // bei chips sind es Vorschläge - dort würde Pruning gültige Eingaben löschen.
-        if (field.url || field.type === 'chips')
+        // bei chips und text sind es Vorschläge - dort würde Pruning gültige Eingaben löschen.
+        if (field.url || field.type === 'chips' || field.type === 'text')
             return;
         const ids = collectOptionIds(field.list ?? []);
         const value = control.value;
@@ -3193,7 +3311,7 @@ class XiriFormFieldsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriFormFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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" }] }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriFormFieldsComponent, decorators: [{
             type: Component,
@@ -3229,15 +3347,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                         AsyncPipe,
                         SafehtmlPipe,
                         XiriChipsComponent,
-                    ], 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"] }]
-        }], 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 }] }] } });
+                        XiriSuggestDirective,
+                        MatAutocomplete,
+                        MatAutocompleteTrigger,
+                    ], 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"] }]
+        }], 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 }] }] } });
 // Was ein Reload-Patch am Feld ändern darf, jeweils mit Typprüfung. Der Server ist eine
 // Trust-Boundary: eine kaputte `list` oder ein `min: "3"` dürfen weder das Pruning noch den
 // Validator-Aufbau verfälschen.
 //
 // Bewusst nicht patchbar: `id`, `type`, `subtype` (createControl normalisiert die einmalig, ein
 // Roh-Wert vom Server würde das zerlegen), `value` (den Wert behält der Client, siehe pruneValue),
-// `control`, `showWhen` und `url` (`serverSideSearch` und der Suchfluss der Select-Directive
+// `control`, `showWhen`, `url` und `searchWith` (`serverSideSearch` und der Suchfluss der Select-Directive
 // werden nur beim Aufbau abgeleitet, eine Änderung käme nie an).
 const PATCH_GUARDS = {
     list: isOptionList,
@@ -3641,6 +3762,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                 }]
         }] });
 
+// window.location.href wird von Angular nicht sanitisiert: javascript:/data: würden im Seitenkontext laufen.
+function isSafeHref(url) {
+    try {
+        return ['http:', 'https:', 'mailto:', 'tel:'].includes(new URL(url, window.location.href).protocol);
+    }
+    catch {
+        return false;
+    }
+}
+
 function formState(event) {
     if (event.disabled === true)
         return { valid: true, value: {} };
@@ -3929,7 +4060,9 @@ class XiriDialogComponent {
             this.router.navigate([button.url]).then();
         }
         else if (button.action == 'href') {
-            window.location.href = button.url ?? '';
+            const url = button.url ?? '';
+            if (isSafeHref(url))
+                window.location.href = url;
         }
         else {
             if (this.loading())
@@ -3958,7 +4091,7 @@ class XiriDialogComponent {
             clearTimeout(this.to);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriDialogComponent, decorators: [{
             type: Component,
@@ -6091,7 +6224,8 @@ class XiriFormService {
             : this.dataService.post(url, { ...data, ...extra });
         return req.pipe(map(res => this.parse(res)), catchError((err) => {
             return throwError(() => ({
-                error: parseHttpError(err)
+                error: parseHttpError(err),
+                fields: parseFieldErrors(err),
             }));
         }));
     }
@@ -6222,6 +6356,9 @@ class XiriFormComponent {
         ...(ngDevMode ? [{ debugName: "done" }] : /* istanbul ignore next */ []));
         this.error = signal('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+        // Validierungsfehler pro Feld-ID aus einer 400-Antwort, geht als serverErrors an xiri-form-fields.
+        this.fieldErrors = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldErrors" }] : /* istanbul ignore next */ []));
         this.buttons = [];
         this.extra = {};
         this.formValues = null;
@@ -6239,6 +6376,7 @@ class XiriFormComponent {
     send(data) {
         this.loading.set(true);
         this.error.set('');
+        this.fieldErrors.set(null);
         this.formService.get(this.url, data, this.extra).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
             next: (res) => {
                 this.loadData(res);
@@ -6246,6 +6384,8 @@ class XiriFormComponent {
             error: (err) => {
                 this.loading.set(false);
                 this.loadingButton.set(null);
+                this.fieldErrors.set(err.fields ?? null);
+                // Banner immer zeigen: Fehler an unbekannten/unsichtbaren Feldern hätten sonst keine Anzeige.
                 this.error.set(err.error ?? 'Unknown Error');
                 if (this.buttons.length == 0) {
                     this.buttons = [{
@@ -6327,7 +6467,7 @@ class XiriFormComponent {
         // this.events.push( '' + this.formValid + ' => ' + JSON.stringify( event.value ) );
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriFormComponent, decorators: [{
             type: Component,
@@ -6336,7 +6476,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                         XiriFormFieldsComponent,
                         XiriErrorComponent,
                         XiriDoneComponent,
-                        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"] }]
+                        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"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
 
 class XiriSidepanelRef {
@@ -6616,7 +6756,7 @@ class XiriStepperComponent {
         return this.dataService.post(url, data);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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" }] }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriStepperComponent, decorators: [{
             type: Component,
@@ -6862,7 +7002,7 @@ class XiriQueryComponent {
         this.cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriQueryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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]" }] }); }
+    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]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriQueryComponent, decorators: [{
             type: Component,
@@ -7762,6 +7902,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+/**
+ * Vertrag über alle "type"-Werte, die xiri-dyncomponent rendert. Einzige Quelle für die Union
+ * XiriDynDataType und den COMPONENT_CATALOG; xiri-go führt dieselbe Liste als core.ComponentTypes().
+ */
+const XIRI_COMPONENT_TYPES = [
+    'card', 'buttonline', 'table', 'cardlink', 'links', 'form',
+    'query', 'stepper', 'header', 'list', 'spacer', 'container', 'infopoint',
+    'multiprogress', 'progress', 'imagetext', 'tabs', 'expansion', 'infotext', 'html', 'stat',
+    'empty-state', 'timeline', 'page-header', 'section', 'divider', 'stat-grid', 'multi-stat',
+    'toolbar', 'description-list', 'barchart', 'linechart', 'piechart', 'gaugechart',
+    'bulletchart', 'heatmap', 'calendar', 'tree', 'sankey', 'gantt',
+    'status', 'callout',
+];
+
+// Komponenten-Katalog: maschinenlesbare Beschreibung aller "type"-Werte, die xiri-dyncomponent
+// rendert. Quelle der Typen ist XIRI_COMPONENT_TYPES (dyndata.interface.ts); der Katalog ergänzt
+// Name, Kategorie, Demo-Route und Suchbegriffe. Agenten und Tools können ihn importieren, um zu
+// erfahren, welche `type`-Werte der Renderer kennt. Der Demo-Explorer (/web/Overview) zeigt ihn an.
+//
+// Vertragsfelder (per Spec geprüft, siehe catalog-parity.spec.ts):
+//   - `type`         : aus XiriDynDataType; Katalog und XIRI_COMPONENT_TYPES sind deckungsgleich.
+//   - `dyncomponent` : true, wenn der Typ einen @case in dyncomponent.component.html besitzt.
+//   - `goBuilder`    : true, wenn xiri-go diesen "type" ausgibt; xiri-go prüft das in
+//                      component/core/types_test.go gegen core.ComponentTypes(). Nur `cardlink`
+//                      hat keinen Go-Builder.
+// Informationsfelder (nicht geprüft):
+//   - `angular`      : eigene, aus public-api.ts exportierte Lib-Component. Die Inline-Primitive
+//                      (spacer/container/infotext/html) zeichnet der Renderer direkt → false.
+//   - `route`        : die Demo-Route (app-routing.module.ts), die den Typ zeigt.
+const COMPONENT_CATALOG = [
+    // Data Entry
+    { type: 'form', name: 'Form', category: 'Data Entry', angular: true, dyncomponent: true, goBuilder: true, route: '/Forms', keywords: ['form', 'field', 'input', 'formular', 'eingabe'] },
+    // Data Display
+    { type: 'table', name: 'Table', category: 'Data Display', angular: true, dyncomponent: true, goBuilder: true, route: '/Tables', keywords: ['table', 'grid', 'tabelle', 'daten', 'rows'] },
+    { type: 'card', name: 'Card', category: 'Data Display', angular: true, dyncomponent: true, goBuilder: true, route: '/Cards', keywords: ['card', 'karte', 'panel'] },
+    { type: 'cardlink', name: 'Card Link', category: 'Data Display', angular: true, dyncomponent: true, goBuilder: false, route: '/Cards', keywords: ['cardlink', 'link', 'navigation', 'tile', 'kachel'] },
+    { type: 'links', name: 'Links', category: 'Data Display', angular: true, dyncomponent: true, goBuilder: true, route: '/Display', keywords: ['links', 'anchor', 'verweise'] },
+    { type: 'list', name: 'List', category: 'Data Display', angular: true, dyncomponent: true, goBuilder: true, route: '/Display', keywords: ['list', 'liste', 'items'] },
+    { type: 'infopoint', name: 'Infopoint', category: 'Data Display', angular: true, dyncomponent: true, goBuilder: true, route: '/Display', keywords: ['infopoint', 'info', 'detail', 'label'] },
+    { type: 'imagetext', name: 'Image Text', category: 'Data Display', angular: true, dyncomponent: true, goBuilder: true, route: '/Display', keywords: ['imagetext', 'image', 'bild', 'media'] },
+    { type: 'infotext', name: 'Info Text', category: 'Data Display', angular: false, dyncomponent: true, goBuilder: true, route: '/Display', keywords: ['infotext', 'text', 'hinweis'] },
+    { type: 'html', name: 'HTML', category: 'Data Display', angular: false, dyncomponent: true, goBuilder: true, route: '/Display', keywords: ['html', 'raw', 'markup'] },
+    { type: 'stat', name: 'Stat', category: 'Data Display', angular: true, dyncomponent: true, goBuilder: true, route: '/Stats', keywords: ['stat', 'kpi', 'metric', 'kennzahl'] },
+    { type: 'stat-grid', name: 'Stat Grid', category: 'Data Display', angular: true, dyncomponent: true, goBuilder: true, route: '/Stats', keywords: ['stat-grid', 'stat', 'kpi', 'grid', 'dashboard'] },
+    { type: 'multi-stat', name: 'Multi Stat', category: 'Data Display', angular: true, dyncomponent: true, goBuilder: true, route: '/MultiStat', keywords: ['multi-stat', 'stat', 'kpi', 'metric', 'kennzahl'] },
+    { type: 'description-list', name: 'Description List', category: 'Data Display', angular: true, dyncomponent: true, goBuilder: true, route: '/Layout', keywords: ['description-list', 'definition', 'key value', 'metadaten'] },
+    { type: 'timeline', name: 'Timeline', category: 'Data Display', angular: true, dyncomponent: true, goBuilder: true, route: '/Timeline', keywords: ['timeline', 'verlauf', 'history', 'events'] },
+    // Layout & Navigation
+    { type: 'header', name: 'Header', category: 'Layout & Navigation', angular: true, dyncomponent: true, goBuilder: true, route: '/Navigation', keywords: ['header', 'kopf', 'title'] },
+    { type: 'buttonline', name: 'Button Line', category: 'Layout & Navigation', angular: true, dyncomponent: true, goBuilder: true, route: '/Navigation', keywords: ['buttonline', 'button', 'actions', 'aktionen'] },
+    { type: 'tabs', name: 'Tabs', category: 'Layout & Navigation', angular: true, dyncomponent: true, goBuilder: true, route: '/Navigation', keywords: ['tabs', 'reiter', 'tab'] },
+    { type: 'expansion', name: 'Expansion', category: 'Layout & Navigation', angular: true, dyncomponent: true, goBuilder: true, route: '/Expansion', keywords: ['expansion', 'accordion', 'panel', 'ausklappen'] },
+    { type: 'toolbar', name: 'Toolbar', category: 'Layout & Navigation', angular: true, dyncomponent: true, goBuilder: true, route: '/Layout', keywords: ['toolbar', 'leiste', 'actions'] },
+    { type: 'section', name: 'Section', category: 'Layout & Navigation', angular: true, dyncomponent: true, goBuilder: true, route: '/Layout', keywords: ['section', 'abschnitt', 'gruppe'] },
+    { type: 'page-header', name: 'Page Header', category: 'Layout & Navigation', angular: true, dyncomponent: true, goBuilder: true, route: '/Layout', keywords: ['page-header', 'header', 'seitenkopf', 'title'] },
+    { type: 'divider', name: 'Divider', category: 'Layout & Navigation', angular: true, dyncomponent: true, goBuilder: true, route: '/Layout', keywords: ['divider', 'trenner', 'separator', 'line'] },
+    { type: 'spacer', name: 'Spacer', category: 'Layout & Navigation', angular: false, dyncomponent: true, goBuilder: true, route: '/Layout', keywords: ['spacer', 'abstand', 'gap', 'space'] },
+    { type: 'container', name: 'Container', category: 'Layout & Navigation', angular: false, dyncomponent: true, goBuilder: true, route: '/Layout', keywords: ['container', 'wrapper', 'group', 'nested'] },
+    // Feedback & Status
+    { type: 'status', name: 'Status', category: 'Feedback & Status', angular: true, dyncomponent: true, goBuilder: true, route: '/Status', keywords: ['status', 'badge', 'zustand', 'tone'] },
+    { type: 'callout', name: 'Callout', category: 'Feedback & Status', angular: true, dyncomponent: true, goBuilder: true, route: '/Callout', keywords: ['callout', 'alert', 'banner', 'hinweis', 'inline'] },
+    { type: 'empty-state', name: 'Empty State', category: 'Feedback & Status', angular: true, dyncomponent: true, goBuilder: true, route: '/EmptyState', keywords: ['empty-state', 'empty', 'leer', 'placeholder'] },
+    { type: 'progress', name: 'Progress', category: 'Feedback & Status', angular: true, dyncomponent: true, goBuilder: true, route: '/Feedback', keywords: ['progress', 'fortschritt', 'bar', 'loading'] },
+    { type: 'multiprogress', name: 'Multi Progress', category: 'Feedback & Status', angular: true, dyncomponent: true, goBuilder: true, route: '/Feedback', keywords: ['multiprogress', 'progress', 'fortschritt', 'stacked'] },
+    // Workflows
+    { type: 'stepper', name: 'Stepper', category: 'Workflows', angular: true, dyncomponent: true, goBuilder: true, route: '/Workflow', keywords: ['stepper', 'wizard', 'steps', 'schritte'] },
+    { type: 'query', name: 'Query', category: 'Workflows', angular: true, dyncomponent: true, goBuilder: true, route: '/Workflow', keywords: ['query', 'filter', 'suche', 'search'] },
+    // Charts & Visualization
+    { type: 'barchart', name: 'Bar Chart', category: 'Charts & Visualization', angular: true, dyncomponent: true, goBuilder: true, route: '/BarCharts', keywords: ['barchart', 'bar', 'chart', 'balken', 'diagramm'] },
+    { type: 'linechart', name: 'Line Chart', category: 'Charts & Visualization', angular: true, dyncomponent: true, goBuilder: true, route: '/BarCharts', keywords: ['linechart', 'line', 'chart', 'linie', 'diagramm'] },
+    { type: 'piechart', name: 'Pie Chart', category: 'Charts & Visualization', angular: true, dyncomponent: true, goBuilder: true, route: '/BarCharts', keywords: ['piechart', 'pie', 'donut', 'chart', 'torte'] },
+    { type: 'gaugechart', name: 'Gauge Chart', category: 'Charts & Visualization', angular: true, dyncomponent: true, goBuilder: true, route: '/BarCharts', keywords: ['gaugechart', 'gauge', 'tacho', 'chart'] },
+    { type: 'bulletchart', name: 'Bullet Chart', category: 'Charts & Visualization', angular: true, dyncomponent: true, goBuilder: true, route: '/BarCharts', keywords: ['bulletchart', 'bullet', 'chart', 'ziel', 'target'] },
+    { type: 'heatmap', name: 'Heatmap', category: 'Charts & Visualization', angular: true, dyncomponent: true, goBuilder: true, route: '/BarCharts', keywords: ['heatmap', 'heat', 'matrix', 'chart'] },
+    { type: 'calendar', name: 'Calendar', category: 'Charts & Visualization', angular: true, dyncomponent: true, goBuilder: true, route: '/BarCharts', keywords: ['calendar', 'kalender', 'heatmap', 'chart'] },
+    { type: 'tree', name: 'Tree', category: 'Charts & Visualization', angular: true, dyncomponent: true, goBuilder: true, route: '/BarCharts', keywords: ['tree', 'baum', 'hierarchy', 'chart'] },
+    { type: 'sankey', name: 'Sankey', category: 'Charts & Visualization', angular: true, dyncomponent: true, goBuilder: true, route: '/BarCharts', keywords: ['sankey', 'flow', 'fluss', 'chart'] },
+    { type: 'gantt', name: 'Gantt', category: 'Charts & Visualization', angular: true, dyncomponent: true, goBuilder: true, route: '/BarCharts', keywords: ['gantt', 'timeline', 'projekt', 'chart'] },
+];
+
 class XiriAlertComponent {
     constructor() {
         this.dialogRef = inject(MatDialogRef);
@@ -9500,5 +9720,5 @@ function provideXiriServices(config) {
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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 };
 //# sourceMappingURL=xiriframework-xiri-ng.mjs.map