@xiriframework/xiri-ng 0.4.3 → 0.4.4

package/fesm2022/xiriframework-xiri-ng.mjs

@@ -1,14 +1,15 @@
 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, booleanAttribute, viewChild, DestroyRef, forwardRef, untracked, Injector, afterNextRender, ViewEncapsulation, linkedSignal, ChangeDetectionStrategy, NgZone, makeEnvironmentProviders } 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, 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, timer, EMPTY, throwError } from 'rxjs';
+import { tap, Subject, Subscription, debounceTime, distinctUntilChanged, BehaviorSubject, ReplaySubject, switchMap, catchError, of, merge, filter as filter$1, map, EMPTY, timer, finalize, throwError } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { MatProgressBar } from '@angular/material/progress-bar';
 import { MatFormField, MatLabel, MatSuffix, MatHint, MatError, MatFormFieldControl, MatPrefix } from '@angular/material/form-field';
 import { FocusMonitor, CdkTrapFocus, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
 import { MatIcon } from '@angular/material/icon';
@@ -42,7 +43,6 @@ import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { MatDivider } from '@angular/material/divider';
 import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
 import { MatCard, MatCardContent, MatCardHeader, MatCardAvatar, MatCardSubtitle, MatCardTitle, MatCardActions } from '@angular/material/card';
-import { MatProgressBar } from '@angular/material/progress-bar';
 import { MatListSubheaderCssMatStyler, MatNavList, MatListItem, MatListItemIcon, MatListItemTitle, MatListItemLine, MatListItemMeta } from '@angular/material/list';
 import { MatStepper, MatStep } from '@angular/material/stepper';
 import { MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle, MatAccordion, MatExpansionPanelDescription } from '@angular/material/expansion';
@@ -58,10 +58,10 @@ class SafehtmlPipe {
     transform(style) {
         return this.sanitizer.bypassSecurityTrustHtml(style);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SafehtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: SafehtmlPipe, isStandalone: true, name: "safeHtml" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SafehtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: SafehtmlPipe, isStandalone: true, name: "safeHtml" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SafehtmlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SafehtmlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'safeHtml'
@@ -82,10 +82,10 @@ class XiriUrlPipe {
         const tree = serializer.parse(url);
         return { path: url.split(/[?#]/)[0], queryParams: tree.queryParams };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriUrlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: XiriUrlPipe, isStandalone: true, name: "xiriUrl" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriUrlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: XiriUrlPipe, isStandalone: true, name: "xiriUrl" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriUrlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriUrlPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'xiriUrl' }]
         }] });
@@ -108,10 +108,10 @@ class XiriColsDirective {
         this.classes = computed(() => colsToClasses(this.xiriCols()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriColsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: XiriColsDirective, isStandalone: true, selector: "[xiriCols]", inputs: { xiriCols: { classPropertyName: "xiriCols", publicName: "xiriCols", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriColsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: XiriColsDirective, isStandalone: true, selector: "[xiriCols]", inputs: { xiriCols: { classPropertyName: "xiriCols", publicName: "xiriCols", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriColsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriColsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[xiriCols]',
@@ -166,10 +166,10 @@ class XiriSnackbarService {
         };
         return this.snackbar.open(message, action || undefined, config);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriSnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriSnackbarService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriSnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriSnackbarService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriSnackbarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriSnackbarService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -183,10 +183,10 @@ class XiriDataServiceConfig {
     constructor() {
         this.api = '/api/';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriDataServiceConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriDataServiceConfig, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriDataServiceConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriDataServiceConfig, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriDataServiceConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriDataServiceConfig, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -229,10 +229,10 @@ class XiriDataService {
     getConfigApi() {
         return this.config.api;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriDataService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriDataService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriDataService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriDataService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -263,6 +263,26 @@ function emptyValueForField(field) {
 
 class XiriFileComponent {
     static { this.nextId = 0; }
+    get disabled() {
+        return this._disabled;
+    }
+    // Der oeffentliche Input ist dieselbe Quelle wie field.disabled: eine deklarative Sperre, die
+    // ein setDisabledState(false) beim Control-Setup nicht aufheben darf.
+    set disabled(value) {
+        this.inputDisabled = value;
+        this.applyDisabled();
+    }
+    applyDisabled() {
+        const value = this.fieldDisabled || this.inputDisabled || this.controlDisabled;
+        this._disabled = value;
+        if (value)
+            this.readGeneration++;
+        if (value)
+            this.parts.disable({ emitEvent: false });
+        else
+            this.parts.enable({ emitEvent: false });
+        this.stateChanges.next();
+    }
     constructor() {
         this.focusMonitor = inject(FocusMonitor);
         this.ngControl = inject(NgControl, { optional: true, self: true });
@@ -274,7 +294,19 @@ class XiriFileComponent {
         this.focused = false;
         this.controlType = 'xiri-file';
         this.required = false;
-        this.disabled = false;
+        // Zwei Sperrquellen, getrennt gehalten und verodert: Angular ruft beim Control-Setup
+        // setDisabledState(false) -- callSetDisabledState ist per Default 'always' -- und zwar nach
+        // dem field-Input. Schlüge das direkt durch, höbe es ein Backend-disabled wieder auf.
+        // Getrennt, obwohl beide deklarativ sind: sind [field] und [disabled] gleichzeitig gebunden,
+        // ruft Angular den unveraenderten zweiten Input nicht erneut auf.
+        this.fieldDisabled = false;
+        this.inputDisabled = false;
+        this.controlDisabled = false;
+        // Wird bei jedem Sperren UND bei jeder neuen Auswahl hochgezaehlt. Nur beim Sperren zu zaehlen
+        // wuerde zwei schnell aufeinander folgende Auswahlen nicht trennen: der langsamere Reader der
+        // ersten Auswahl traegt dann dieselbe Generation und darf trotzdem schreiben.
+        this.readGeneration = 0;
+        this._disabled = false;
         this.shouldLabelFloat = true;
         this.currentFiles = [];
         this.onChange = () => { };
@@ -320,11 +352,8 @@ class XiriFileComponent {
     set field(value) {
         this._field = value;
         this.required = value.required ?? false;
-        this.disabled = value.disabled ?? false;
-        if (this.disabled)
-            this.parts.disable();
-        else
-            this.parts.enable();
+        this.fieldDisabled = !!value.disabled;
+        this.applyDisabled();
         this.stateChanges.next();
     }
     get errorState() {
@@ -343,13 +372,33 @@ class XiriFileComponent {
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+        this.controlDisabled = isDisabled;
+        this.applyDisabled();
     }
     setDescribedByIds(ids) {
         this.describedBy = ids.join(' ');
     }
     onContainerClick() { }
+    // Ein deaktiviertes `parts` sperrt nur die Anzeige -- der Dateidialog haengt am
+    // mat-form-field, nicht am Input, und kann beim Sperren schon offen sein. Deshalb hier ein
+    // eigener Guard und nicht nur einer im Template.
+    openFileDialog(input) {
+        if (this.disabled)
+            return;
+        input.click();
+    }
     fileChange(event) {
+        if (this.disabled)
+            return;
+        // Der FileReader antwortet asynchron. Wird das Feld waehrend des Lesens gesperrt oder eine
+        // neue Auswahl getroffen, darf der Callback nichts mehr schreiben -- und ein disable/enable
+        // dazwischen darf ihn auch nicht wieder gueltig machen. Deshalb eine Generation statt
+        // eines blossen Guards.
+        //
+        // Direkt hier hochzaehlen, vor jedem Abbruch: auch eine verworfene Auswahl (zu viele
+        // Dateien) muss eine noch laufende vorherige entwerten, sonst schreibt deren Reader in
+        // einen Stand, den der Nutzer gerade ersetzen wollte.
+        const generation = ++this.readGeneration;
         const element = event.currentTarget;
         const fileList = element.files;
         if (fileList === null || fileList.length === 0 || fileList.length > 100)
@@ -370,6 +419,8 @@ class XiriFileComponent {
             }
             const reader = new FileReader();
             reader.addEventListener("load", () => {
+                if (generation !== this.readGeneration)
+                    return;
                 this.currentFiles.push({
                     file: file,
                     name: file.name,
@@ -392,13 +443,13 @@ class XiriFileComponent {
         console.log('unknown error file', errors);
         return 'error';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriFileComponent, isStandalone: true, selector: "xiri-file", inputs: { value: "value", field: "field" }, host: { properties: { "id": "id", "attr.aria-describedby": "describedBy" } }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriFileComponent, isStandalone: true, selector: "xiri-file", inputs: { value: "value", field: "field" }, host: { properties: { "id": "id", "attr.aria-describedby": "describedBy" } }, providers: [{
                 provide: MatFormFieldControl,
                 useExisting: XiriFileComponent
-            }], ngImport: i0, template: "<mat-form-field [formGroup]=\"parts\" floatLabel=\"auto\" class=\"fileselect\" (click)=\"fileInput.click()\">\n\t<mat-label>{{ field.name }}</mat-label>\n\n\t<input matInput formControlName=\"text\" type=\"text\" [required]=\"required\" readonly>\n\t<button mat-icon-button matSuffix class=\"form-field-button\" aria-label=\"Datei ausw\u00E4hlen\">\n\t\t<mat-icon>file_upload</mat-icon>\n\t</button>\n\n\t<input hidden type=\"file\" [accept]=\"field.accept\" [multiple]=\"field.multiple\" (change)=\"fileChange($event)\" #fileInput>\n\n\t@if (field.hint) {\n\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t}\n\t@if (errorState) {\n\t\t<mat-error>{{ getErrorMessage() }}</mat-error>\n\t}\n</mat-form-field>", styles: [".fileselect{cursor:pointer}.fileselect mat-icon{--mat-icon-color: var(--xiri-formfield-icon-color)}.fileselect .form-field-button{margin-left:12px;margin-right:12px}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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"] }] }); }
+            }], ngImport: i0, template: "<mat-form-field [formGroup]=\"parts\" floatLabel=\"auto\" class=\"fileselect\" (click)=\"openFileDialog(fileInput)\">\n\t<mat-label>{{ field.name }}</mat-label>\n\n\t<input matInput formControlName=\"text\" type=\"text\" [required]=\"required\" readonly>\n\t<button mat-icon-button matSuffix class=\"form-field-button\" aria-label=\"Datei ausw\u00E4hlen\" [disabled]=\"disabled\">\n\t\t<mat-icon>file_upload</mat-icon>\n\t</button>\n\n\t<input hidden type=\"file\" [accept]=\"field.accept\" [multiple]=\"field.multiple\" [disabled]=\"disabled\"\n\t       (change)=\"fileChange($event)\" #fileInput>\n\n\t@if (field.hint) {\n\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t}\n\t@if (errorState) {\n\t\t<mat-error>{{ getErrorMessage() }}</mat-error>\n\t}\n</mat-form-field>", styles: [".fileselect{cursor:pointer}.fileselect mat-icon{--mat-icon-color: var(--xiri-formfield-icon-color)}.fileselect .form-field-button{margin-left:12px;margin-right:12px}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriFileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriFileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-file', host: {
                         '[id]': 'id',
@@ -417,7 +468,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         MatIcon,
                         MatHint,
                         MatError,
-                    ], template: "<mat-form-field [formGroup]=\"parts\" floatLabel=\"auto\" class=\"fileselect\" (click)=\"fileInput.click()\">\n\t<mat-label>{{ field.name }}</mat-label>\n\n\t<input matInput formControlName=\"text\" type=\"text\" [required]=\"required\" readonly>\n\t<button mat-icon-button matSuffix class=\"form-field-button\" aria-label=\"Datei ausw\u00E4hlen\">\n\t\t<mat-icon>file_upload</mat-icon>\n\t</button>\n\n\t<input hidden type=\"file\" [accept]=\"field.accept\" [multiple]=\"field.multiple\" (change)=\"fileChange($event)\" #fileInput>\n\n\t@if (field.hint) {\n\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t}\n\t@if (errorState) {\n\t\t<mat-error>{{ getErrorMessage() }}</mat-error>\n\t}\n</mat-form-field>", styles: [".fileselect{cursor:pointer}.fileselect mat-icon{--mat-icon-color: var(--xiri-formfield-icon-color)}.fileselect .form-field-button{margin-left:12px;margin-right:12px}\n"] }]
+                    ], template: "<mat-form-field [formGroup]=\"parts\" floatLabel=\"auto\" class=\"fileselect\" (click)=\"openFileDialog(fileInput)\">\n\t<mat-label>{{ field.name }}</mat-label>\n\n\t<input matInput formControlName=\"text\" type=\"text\" [required]=\"required\" readonly>\n\t<button mat-icon-button matSuffix class=\"form-field-button\" aria-label=\"Datei ausw\u00E4hlen\" [disabled]=\"disabled\">\n\t\t<mat-icon>file_upload</mat-icon>\n\t</button>\n\n\t<input hidden type=\"file\" [accept]=\"field.accept\" [multiple]=\"field.multiple\" [disabled]=\"disabled\"\n\t       (change)=\"fileChange($event)\" #fileInput>\n\n\t@if (field.hint) {\n\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t}\n\t@if (errorState) {\n\t\t<mat-error>{{ getErrorMessage() }}</mat-error>\n\t}\n</mat-form-field>", styles: [".fileselect{cursor:pointer}.fileselect mat-icon{--mat-icon-color: var(--xiri-formfield-icon-color)}.fileselect .form-field-button{margin-left:12px;margin-right:12px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], field: [{
@@ -625,13 +676,13 @@ class XiriTimelimitComponent {
     onCompare() {
         return -1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriTimelimitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriTimelimitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriTimelimitComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriTimelimitComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-timelimit', host: {
                         '[id]': 'id',
@@ -663,6 +714,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class XiriVolumeComponent {
     static { this.nextId = 0; }
+    get disabled() {
+        return this._disabled;
+    }
+    // Der oeffentliche Input ist dieselbe Quelle wie field.disabled: eine deklarative Sperre, die
+    // ein setDisabledState(false) beim Control-Setup nicht aufheben darf.
+    set disabled(value) {
+        this.inputDisabled = value;
+        this.applyDisabled();
+    }
+    applyDisabled() {
+        const value = this.fieldDisabled || this.inputDisabled || this.controlDisabled;
+        this._disabled = value;
+        if (value)
+            this.parts.disable({ emitEvent: false });
+        else
+            this.parts.enable({ emitEvent: false });
+        this.stateChanges.next();
+    }
     constructor() {
         this.focusMonitor = inject(FocusMonitor);
         this.ngControl = inject(NgControl, { optional: true, self: true });
@@ -676,7 +745,15 @@ class XiriVolumeComponent {
         this.focused = false;
         this.controlType = 'xiri-volume';
         this.required = false;
-        this.disabled = false;
+        // Zwei Sperrquellen, getrennt gehalten und verodert: Angular ruft beim Control-Setup
+        // setDisabledState(false) -- callSetDisabledState ist per Default 'always' -- und zwar nach
+        // dem field-Input. Schlüge das direkt durch, höbe es ein Backend-disabled wieder auf.
+        // Getrennt, obwohl beide deklarativ sind: sind [field] und [disabled] gleichzeitig gebunden,
+        // ruft Angular den unveraenderten zweiten Input nicht erneut auf.
+        this.fieldDisabled = false;
+        this.inputDisabled = false;
+        this.controlDisabled = false;
+        this._disabled = false;
         this.shouldLabelFloat = true;
         this._lastValue = null;
         this.onChange = () => { };
@@ -712,11 +789,8 @@ class XiriVolumeComponent {
         if (value.max)
             this.max = value.max;
         this.required = coerceBooleanProperty(value.required);
-        this.disabled = coerceBooleanProperty(value.disabled);
-        if (this.disabled)
-            this.parts.disable();
-        else
-            this.parts.enable();
+        this.fieldDisabled = !!value.disabled;
+        this.applyDisabled();
         this.stateChanges.next();
     }
     get field() {
@@ -761,10 +835,19 @@ class XiriVolumeComponent {
             this.changeValue(val);
     }
     changeValue(val) {
-        this._lastValue = val ?? null;
         if (this.changeTO)
             clearTimeout(this.changeTO);
         this.changeTO = setTimeout(() => {
+            // Erneut pruefen: zwischen Planung und Callback kann control.disable() gelaufen sein.
+            // Ein gesperrtes Feld schreibt nichts nach aussen.
+            //
+            // _lastValue wird erst hier gesetzt, nicht schon beim Planen. Sonst merkte sich das
+            // Feld einen Wert, den das aeussere Control nie bekommen hat: nach einem spaeteren
+            // enable() ruft Angular nur setDisabledState(false) und kein writeValue(), runCheck()
+            // saehe value === _lastValue und gliche nie wieder ab.
+            if (this.disabled)
+                return;
+            this._lastValue = val ?? null;
             this.onChange(val);
             this.stateChanges.next();
             this.cdr.markForCheck();
@@ -789,19 +872,20 @@ class XiriVolumeComponent {
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+        this.controlDisabled = isDisabled;
+        this.applyDisabled();
     }
     setDescribedByIds(ids) {
         this.describedBy = ids.join(' ');
     }
     onContainerClick() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriVolumeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriVolumeComponent, isStandalone: true, selector: "xiri-volume", inputs: { field: "field", value: "value" }, host: { properties: { "id": "id", "attr.aria-describedby": "describedBy" } }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriVolumeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriVolumeComponent, isStandalone: true, selector: "xiri-volume", inputs: { field: "field", value: "value" }, host: { properties: { "id": "id", "attr.aria-describedby": "describedBy" } }, providers: [{
                 provide: MatFormFieldControl,
                 useExisting: XiriVolumeComponent
             }], ngImport: i0, template: "<mat-form-field [formGroup]=\"parts\" floatLabel=\"auto\">\n\t<mat-label>{{ field.name }}</mat-label>\n\t<div role=\"group\" [formGroup]=\"parts\">\n\t\t<input matInput id=\"voll\" formControlName=\"voll\" type=\"number\" [attr.min]=\"min\" [attr.max]=\"max\" [required]=\"required\">\n\t\t<input matInput id=\"volw\" formControlName=\"volw\" type=\"number\" [attr.min]=\"min\" [attr.max]=\"max\" [required]=\"required\">\n\t\t<input matInput id=\"volh\" formControlName=\"volh\" type=\"number\" [attr.min]=\"min\" [attr.max]=\"max\" [required]=\"required\">\n\t</div>\n\n\t@if (field.hint) {\n\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t}\n\t@if (parts.invalid) {\n\t\t<mat-error>{{ getErrorMessage() }}</mat-error>\n\t}\n</mat-form-field>", styles: ["div{display:flex}div input{text-align:right}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { 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.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriVolumeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriVolumeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-volume', host: {
                         '[id]': 'id',
@@ -972,10 +1056,10 @@ class XiriLocaleService {
             // Persistenz nicht verfügbar (Private-Mode o. Ä.) — Sprachwechsel gilt trotzdem für die Session.
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriLocaleService, deps: [], target: i0.ɵɵFactoryTarget.Service }); }
-    static { this.ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.7", ngImport: i0, type: XiriLocaleService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriLocaleService, deps: [], target: i0.ɵɵFactoryTarget.Service }); }
+    static { this.ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.0", ngImport: i0, type: XiriLocaleService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriLocaleService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriLocaleService, decorators: [{
             type: Service
         }], ctorParameters: () => [] });
 
@@ -1000,6 +1084,20 @@ class XiriFieldMain {
         this._value = null;
         this._disabled = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+        // Zwei Quellen, getrennt gehalten und verodert. Angular ruft beim Control-Setup
+        // setDisabledState(false) -- callSetDisabledState ist per Default 'always' -- und zwar nach
+        // dem field-Input. Schlüge das direkt auf `disabled` durch, höbe es ein Backend-disabled
+        // wieder auf.
+        //
+        // controlDisabled ist dabei nicht "die programmatische Quelle": XiriFormFieldsComponent
+        // schreibt Backend-Zustand über applyPatch() und den globalen disabled-Effect ebenfalls auf
+        // das äussere Control. Auf der Control-Seite gilt last writer wins, wie bisher auch.
+        // Getrennt, obwohl beide deklarativ sind: sind [field] und [disabled] gleichzeitig gebunden,
+        // ruft Angular den unveraenderten zweiten Input nicht erneut auf. Mit einem gemeinsamen Flag
+        // hoebe der zuletzt laufende Setter den anderen auf.
+        this.fieldDisabled = false;
+        this.inputDisabled = false;
+        this.controlDisabled = false;
         this.focused = false;
         this.ariaDescribedby = input(undefined, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: "aria-describedby" });
         this._errorStateTracker = new _ErrorStateTracker(this._defaultErrorStateMatcher, this.ngControl, this._parentFormGroup, this._parentForm, this.stateChanges);
@@ -1029,11 +1127,12 @@ class XiriFieldMain {
         const ngControl = this.ngControl;
         if (ngControl) {
             if (this._previousControl !== ngControl.control) {
-                if (this._previousControl !== undefined &&
-                    ngControl.disabled !== null &&
-                    ngControl.disabled !== this.disabled) {
-                    this.disabled = ngControl.disabled;
-                }
+                // Über setDisabledState gehen, nicht direkt auf `disabled` schreiben: sonst
+                // überschreibt eine frisch angelegte, enabled Control-Instanz das fieldDisabled
+                // eines Backend-gesperrten Felds. Das passiert real, weil `track field.id` die
+                // Kindkomponente behält, während createControl() ein neues Control anlegt.
+                if (this._previousControl !== undefined && ngControl.disabled !== null)
+                    this.setDisabledState(ngControl.disabled);
                 this._previousControl = ngControl.control;
             }
             this.updateErrorState();
@@ -1056,6 +1155,12 @@ class XiriFieldMain {
         this._value = value;
     }
     runChangeValue(val) {
+        // Ein gesperrtes Feld schreibt nichts nach aussen. Ohne den Guard laeuft nach jedem
+        // control.disable() noch ein _onChange durch -- der Renderlauf, den das Sperren ausloest,
+        // erreicht doCheckLogic() und von dort startChangeValue(). Das aeussere Control bekaeme
+        // also eine zweite setValue-Emission, ausgeloest allein durch einen Zustandswechsel.
+        if (this.disabled)
+            return;
         this._onTouched();
         this._onChange(val);
         this.valueChange.emit(val);
@@ -1068,12 +1173,30 @@ class XiriFieldMain {
     get disabled() {
         return this._disabled();
     }
+    // Der oeffentliche Input ist dieselbe Quelle wie field.disabled: eine deklarative Sperre, die
+    // ein setDisabledState(false) beim Control-Setup nicht aufheben darf. Er schreibt deshalb
+    // fieldDisabled und nicht den effektiven Zustand.
     set disabled(value) {
-        this._disabled.set(value);
+        this.inputDisabled = value;
+        this.applyDisabled();
+    }
+    applyDisabled() {
+        const value = this.fieldDisabled || this.inputDisabled || this.controlDisabled;
+        // untracked, weil Angular setDisabledState() aus setUpControlValueAccessor heraus ruft --
+        // also waehrend der Template-Auswertung, wo ein Signal-Write sonst NG0600 wirft. Angulars
+        // eigenes FormControl.setValue macht es an derselben Stelle genauso.
+        untracked(() => this._disabled.set(value));
+        if (value)
+            this.inner?.disable({ emitEvent: false });
+        else
+            this.inner?.enable({ emitEvent: false });
         this._changeDetectorRef.markForCheck();
         this.stateChanges.next();
     }
-    setDisabledState() { }
+    setDisabledState(isDisabled) {
+        this.controlDisabled = isDisabled;
+        this.applyDisabled();
+    }
     get required() {
         return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
     }
@@ -1139,13 +1262,13 @@ class XiriFieldMain {
     get userAriaDescribedBy() {
         return this.ariaDescribedby() ?? '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriFieldMain, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: XiriFieldMain, isStandalone: true, selector: "ng-component", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: false, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriFieldMain, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: XiriFieldMain, isStandalone: true, selector: "ng-component", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: false, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [{
                 provide: MatFormFieldControl,
                 useExisting: XiriFieldMain
             }], ngImport: i0, template: ``, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriFieldMain, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriFieldMain, decorators: [{
             type: Component,
             args: [{
                     providers: [{
@@ -1203,6 +1326,9 @@ class XiriDateTimeRangeComponent extends XiriFieldMain {
             thour: new FormControl(0, { nonNullable: true }),
             tminute: new FormControl(0, { nonNullable: true }),
         });
+        // Meldet die innere Gruppe an XiriFieldMain: control.disable() von aussen muss sie
+        // genauso treffen wie field.disabled.
+        this.inner = this.parts;
     }
     ngOnInit() {
         this.subs.add(this.parts.valueChanges.subscribe(() => {
@@ -1216,11 +1342,8 @@ class XiriDateTimeRangeComponent extends XiriFieldMain {
         if (value.max)
             this.maxDate = this.dateService.unixToLocal(value.max);
         this.required = !!value.required;
-        this.disabled = !!value.disabled;
-        if (this.disabled)
-            this.parts.disable();
-        else
-            this.parts.enable();
+        this.fieldDisabled = !!value.disabled;
+        this.applyDisabled();
         this.stateChanges.next();
     }
     get value() {
@@ -1302,13 +1425,13 @@ class XiriDateTimeRangeComponent extends XiriFieldMain {
     getInt(num) {
         return parseInt(num);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriDateTimeRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriDateTimeRangeComponent, isStandalone: true, selector: "xiri-date-time-range", inputs: { field: "field", value: "value" }, host: { listeners: { "focus": "focus()" }, properties: { "id": "id" } }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriDateTimeRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriDateTimeRangeComponent, isStandalone: true, selector: "xiri-date-time-range", inputs: { field: "field", value: "value" }, host: { listeners: { "focus": "focus()" }, properties: { "id": "id" } }, providers: [{
                 provide: MatFormFieldControl,
                 useExisting: XiriDateTimeRangeComponent
             }], usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"parts\">\n\t<input matInput formControlName=\"date\" [matDatepicker]=\"picker\" [required]=\"required\" [min]=\"minDate\" [max]=\"maxDate\">\n\n\t<mat-select formControlName=\"fhour\" class=\"time\" [required]=\"required\">\n\t\t@for (h of hours; track h; let i = $index) {\n\t\t\t<mat-option [value]=\"getInt(h)\">{{ h }}</mat-option>\n\t\t}\n\t</mat-select>\n\t<span class=\"spacert\">:</span>\n\t<mat-select formControlName=\"fminute\" class=\"time\" [required]=\"required\">\n\t\t@for (m of minutes; track m; let i = $index) {\n\t\t\t<mat-option [value]=\"getInt(m)\">{{ m }}</mat-option>\n\t\t}\n\t</mat-select>\n\n\t<span class=\"spacer\">-</span>\n\n\t<mat-select formControlName=\"thour\" class=\"time\" [required]=\"required\">\n\t\t@for (h of hours; track h; let i = $index) {\n\t\t\t<mat-option [value]=\"getInt(h)\">{{ h }}</mat-option>\n\t\t}\n\t</mat-select>\n\t<span class=\"spacert\">:</span>\n\t<mat-select formControlName=\"tminute\" class=\"time\" [required]=\"required\">\n\t\t@for (m of minutes; track m; let i = $index) {\n\t\t\t<mat-option [value]=\"getInt(m)\">{{ m }}</mat-option>\n\t\t}\n\t</mat-select>\n\n\t<mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n\t\t<mat-icon matDatepickerToggleIcon>today</mat-icon>\n\t</mat-datepicker-toggle>\n\t<mat-datepicker #picker></mat-datepicker>\n</ng-container>", styles: [":host{display:flex;align-items:center;margin-top:-2px;margin-bottom:-8px}mat-datepicker-toggle{margin-left:10px;margin-top:-15px;margin-right:-10px;--mat-icon-color: var(--xiri-formfield-icon-color)}.spacer{padding-left:8px;padding-right:8px}.spacert{padding-right:4px}.time{width:2.3rem;text-align:center}mat-select{--mat-select-arrow-transform: translateY(-1px) translateX(2px)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { 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: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { 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: MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriDateTimeRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriDateTimeRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-date-time-range', host: {
                         '[id]': 'id',
@@ -1358,6 +1481,9 @@ class XiriDateRangeComponent extends XiriFieldMain {
             start: new FormControl(null),
             end: new FormControl(null),
         });
+        // Meldet die innere Gruppe an XiriFieldMain: control.disable() von aussen muss sie
+        // genauso treffen wie field.disabled.
+        this.inner = this.parts;
     }
     ngOnInit() {
         this.subs.add(this.parts.valueChanges.subscribe(() => {
@@ -1371,11 +1497,8 @@ class XiriDateRangeComponent extends XiriFieldMain {
         if (value.max)
             this.maxDate = this.dateService.unixToLocal(value.max);
         this.required = !!value.required;
-        this.disabled = !!value.disabled;
-        if (this.disabled)
-            this.parts.disable();
-        else
-            this.parts.enable();
+        this.fieldDisabled = !!value.disabled;
+        this.applyDisabled();
         this.stateChanges.next();
     }
     get value() {
@@ -1443,13 +1566,13 @@ class XiriDateRangeComponent extends XiriFieldMain {
     writeValue(value) {
         this.value = value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: XiriDateRangeComponent, isStandalone: true, selector: "xiri-date-range", inputs: { field: "field", value: "value" }, host: { listeners: { "focus": "focus()" }, properties: { "id": "id" } }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: XiriDateRangeComponent, isStandalone: true, selector: "xiri-date-range", inputs: { field: "field", value: "value" }, host: { listeners: { "focus": "focus()" }, properties: { "id": "id" } }, providers: [{
                 provide: MatFormFieldControl,
                 useExisting: XiriDateRangeComponent
             }], usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"parts\">\n\t<mat-date-range-input [rangePicker]=\"picker\" [required]=\"required\" [min]=\"minDate\" [max]=\"maxDate\">\n\t\t<input matStartDate formControlName=\"start\" placeholder=\"Start date\" [required]=\"required\">\n\t\t<input matEndDate formControlName=\"end\" placeholder=\"End date\" [required]=\"required\">\n\t</mat-date-range-input>\n\n\t<mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n\t\t<mat-icon matDatepickerToggleIcon>today</mat-icon>\n\t</mat-datepicker-toggle>\n\t<mat-date-range-picker #picker></mat-date-range-picker>\n</ng-container>", styles: [":host{display:flex;align-items:center;margin-top:-2px;margin-bottom:-8px}mat-datepicker-toggle{margin-top:-15px;margin-right:-10px;--mat-icon-color: var(--xiri-formfield-icon-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.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: MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { 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: MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriDateRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriDateRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-date-range', host: {
                         '[id]': 'id',
@@ -1503,6 +1626,9 @@ class XiriDateComponent extends XiriFieldMain {
             hour: new FormControl(0, { nonNullable: true }),
             minute: new FormControl(0, { nonNullable: true }),
         });
+        // Meldet die innere Gruppe an XiriFieldMain: control.disable() von aussen muss sie
+        // genauso treffen wie field.disabled.
+        this.inner = this.parts;
     }
     ngOnInit() {
         this.subs.add(this.parts.valueChanges.subscribe(() => {
@@ -1517,11 +1643,8 @@ class XiriDateComponent extends XiriFieldMain {
         if (value.max)
             this.maxDate = this.dateService.unixToLocal(value.max);
         this.required = !!value.required;
-        this.disabled = !!value.disabled;
-        if (this.disabled)
-            this.parts.disable();
-        else
-            this.parts.enable();
+        this.fieldDisabled = !!value.disabled;
+        this.applyDisabled();
         this.stateChanges.next();
     }
     get value() {
@@ -1577,13 +1700,13 @@ class XiriDateComponent extends XiriFieldMain {
     writeValue(value) {
         this.value = value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriDateComponent, isStandalone: true, selector: "xiri-date", inputs: { field: "field", value: "value" }, host: { listeners: { "focus": "focus()" }, properties: { "id": "id" } }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriDateComponent, isStandalone: true, selector: "xiri-date", inputs: { field: "field", value: "value" }, host: { listeners: { "focus": "focus()" }, properties: { "id": "id" } }, providers: [{
                 provide: MatFormFieldControl,
                 useExisting: XiriDateComponent
             }], usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"parts\">\n\t<input matInput formControlName=\"date\" class=\"date\" [required]=\"required\" [min]=\"minDate\" [max]=\"maxDate\" [matDatepicker]=\"picker\">\n\n\t@if (type === 'datetime') {\n\t\t<mat-select formControlName=\"hour\" class=\"time\" [required]=\"required\">\n\t\t\t@for (h of hours; track h; let i = $index) {\n\t\t\t\t<mat-option [value]=\"i\">{{ h }}</mat-option>\n\t\t\t}\n\t\t</mat-select>\n\t\t<span class=\"spacer\">:</span>\n\t\t<mat-select formControlName=\"minute\" class=\"time\" [required]=\"required\">\n\t\t\t@for (m of minutes; track m; let i = $index) {\n\t\t\t\t<mat-option [value]=\"i\">{{ m }}</mat-option>\n\t\t\t}\n\t\t</mat-select>\n\t}\n\n\t<mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n\t\t<mat-icon matDatepickerToggleIcon>today</mat-icon>\n\t</mat-datepicker-toggle>\n\t<mat-datepicker #picker></mat-datepicker>\n</ng-container>", styles: [":host{display:flex;align-items:center;margin-top:-2px;margin-bottom:-8px}mat-datepicker-toggle{margin-left:10px;margin-top:-15px;margin-right:-10px;--mat-icon-color: var(--xiri-formfield-icon-color)}.spacer{padding-left:8px;padding-right:8px}.time{width:2.3rem;text-align:center}mat-select{--mat-select-arrow-transform: translateY(-1px) translateX(2px)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { 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: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { 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: MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriDateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-date', host: {
                         '[id]': 'id',
@@ -1635,6 +1758,9 @@ class XiriYearMonthComponent extends XiriFieldMain {
         this._id = this._uid;
         if (this.ngControl != null)
             this.ngControl.valueAccessor = this;
+        // Meldet das innere Control an XiriFieldMain: control.disable() von aussen muss es
+        // genauso treffen wie field.disabled.
+        this.inner = this.dateControl;
     }
     ngOnInit() {
         this.subs.add(this.dateControl.valueChanges.subscribe(() => {
@@ -1648,11 +1774,8 @@ class XiriYearMonthComponent extends XiriFieldMain {
         if (value.max)
             this.maxDate = this.dateService.unixToLocal(value.max);
         this.required = !!value.required;
-        this.disabled = !!value.disabled;
-        if (this.disabled)
-            this.dateControl.disable();
-        else
-            this.dateControl.enable();
+        this.fieldDisabled = !!value.disabled;
+        this.applyDisabled();
         this.stateChanges.next();
     }
     get value() {
@@ -1704,13 +1827,13 @@ class XiriYearMonthComponent extends XiriFieldMain {
     writeValue(value) {
         this.value = value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriYearMonthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: XiriYearMonthComponent, isStandalone: true, selector: "xiri-yearmonth", inputs: { field: "field", value: "value" }, host: { listeners: { "focus": "focus()" }, properties: { "id": "id" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriYearMonthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: XiriYearMonthComponent, isStandalone: true, selector: "xiri-yearmonth", inputs: { field: "field", value: "value" }, host: { listeners: { "focus": "focus()" }, properties: { "id": "id" } }, providers: [
             { provide: MatFormFieldControl, useExisting: XiriYearMonthComponent },
             { provide: MAT_DATE_FORMATS, useValue: XIRI_YEAR_MONTH_FORMATS },
         ], viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<input matInput [formControl]=\"dateControl\" class=\"date\" [required]=\"required\"\n       [min]=\"minDate\" [max]=\"maxDate\" [matDatepicker]=\"picker\">\n\n<mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n\t<mat-icon matDatepickerToggleIcon>today</mat-icon>\n</mat-datepicker-toggle>\n<mat-datepicker #picker startView=\"multi-year\" (monthSelected)=\"onYearMonthSelected($event)\"></mat-datepicker>\n", styles: [":host{display:flex;align-items:center;margin-top:-2px;margin-bottom:-8px}mat-datepicker-toggle{margin-left:10px;margin-top:-15px;margin-right:-10px;--mat-icon-color: var(--xiri-formfield-icon-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.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: 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: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { 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: MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriYearMonthComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriYearMonthComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-yearmonth', host: {
                         '[id]': 'id',
@@ -1802,10 +1925,10 @@ class XiriSearchComponent {
         this._text = '';
         this.filter.next(this._text);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriSearchComponent, isStandalone: true, selector: "xiri-search", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, reset: { classPropertyName: "reset", publicName: "reset", isSignal: true, isRequired: false, transformFunction: null }, escape: { classPropertyName: "escape", publicName: "escape", isSignal: true, isRequired: false, transformFunction: null }, focus: { classPropertyName: "focus", publicName: "focus", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler()" } }, viewQueries: [{ propertyName: "_search", first: true, predicate: ["search"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"search\" [class.open]=\"show\">\n\t@if (show) {\n\t\t<input type=\"text\" name=\"input\" class=\"input lens\" autocomplete=\"off\"\n\t\t       [cdkTrapFocusAutoCapture]=\"show\" [cdkTrapFocus]=\"show\"\n\t\t       [placeholder]=\"placeholder()\"\n\t\t       [class.open]=\"show\"\n\t\t       (keyup)=\"searchDo()\" [value]=\"_text\" [(ngModel)]=\"_text\">\n\t}\n\t<button mat-icon-button color=\"primary\" (click)=\"click()\" [attr.aria-label]=\"show ? 'Suche schlie\u00DFen' : 'Suche \u00F6ffnen'\">\n\t\t<mat-icon>{{ show ? 'close' : 'search' }}</mat-icon>\n\t</button>\n</div>", styles: [".search{display:flex;justify-content:flex-end;align-items:center;height:42px;padding-bottom:2px;min-width:44px;max-width:180px;margin-right:2px;width:44px;transition:width var(--xiri-duration-slow) var(--xiri-easing-standard)}.search.open{border-bottom:2px solid var(--primary);padding-bottom:0;width:100%;margin-left:8px}input{box-sizing:border-box;padding:0 10px;height:44px;border:none;background:none;outline:none;width:100%;color:var(--on-surface)}input:focus-visible{outline:2px solid var(--primary, #2892D9);outline-offset:-2px;border-radius:var(--xiri-radius-xs)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriSearchComponent, isStandalone: true, selector: "xiri-search", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, reset: { classPropertyName: "reset", publicName: "reset", isSignal: true, isRequired: false, transformFunction: null }, escape: { classPropertyName: "escape", publicName: "escape", isSignal: true, isRequired: false, transformFunction: null }, focus: { classPropertyName: "focus", publicName: "focus", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler()" } }, viewQueries: [{ propertyName: "_search", first: true, predicate: ["search"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"search\" [class.open]=\"show\">\n\t@if (show) {\n\t\t<input type=\"text\" name=\"input\" class=\"input lens\" autocomplete=\"off\"\n\t\t       [cdkTrapFocusAutoCapture]=\"show\" [cdkTrapFocus]=\"show\"\n\t\t       [placeholder]=\"placeholder()\"\n\t\t       [class.open]=\"show\"\n\t\t       (keyup)=\"searchDo()\" [value]=\"_text\" [(ngModel)]=\"_text\">\n\t}\n\t<button mat-icon-button color=\"primary\" (click)=\"click()\" [attr.aria-label]=\"show ? 'Suche schlie\u00DFen' : 'Suche \u00F6ffnen'\">\n\t\t<mat-icon>{{ show ? 'close' : 'search' }}</mat-icon>\n\t</button>\n</div>", styles: [".search{display:flex;justify-content:flex-end;align-items:center;height:42px;padding-bottom:2px;min-width:44px;max-width:180px;margin-right:2px;width:44px;transition:width var(--xiri-duration-slow) var(--xiri-easing-standard)}.search.open{border-bottom:2px solid var(--primary);padding-bottom:0;width:100%;margin-left:8px}input{box-sizing:border-box;padding:0 10px;height:44px;border:none;background:none;outline:none;width:100%;color:var(--on-surface)}input:focus-visible{outline:2px solid var(--primary, #2892D9);outline-offset:-2px;border-radius:var(--xiri-radius-xs)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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.0.7", ngImport: i0, type: XiriSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-search', host: {
                         '(document:keydown.escape)': 'onKeydownHandler()'
@@ -1863,7 +1986,8 @@ class XiriTreeselectComponent extends XiriFieldMain {
     set field(value) {
         this._field = value;
         this.required = !!value.required;
-        this.disabled = !!value.disabled;
+        this.fieldDisabled = !!value.disabled;
+        this.applyDisabled();
         if (value.url) {
             this.dataService.get(value.url).subscribe({
                 next: (response) => {
@@ -2063,13 +2187,13 @@ class XiriTreeselectComponent extends XiriFieldMain {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriTreeselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriTreeselectComponent, isStandalone: true, selector: "xiri-treeselect", inputs: { field: "field", value: "value" }, host: { listeners: { "focus": "focus()" }, properties: { "id": "id" } }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriTreeselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriTreeselectComponent, isStandalone: true, selector: "xiri-treeselect", inputs: { field: "field", value: "value" }, host: { listeners: { "focus": "focus()" }, properties: { "id": "id" } }, providers: [{
                 provide: MatFormFieldControl,
                 useExisting: XiriTreeselectComponent
-            }], viewQueries: [{ propertyName: "tree", first: true, predicate: MatTree, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"main\">\n\t<div class=\"line\">\n\t\t<div class=\"xrow xsmall\">\n\t\t\t<div class=\"xcol xcol-md-6 header\"><span>{{ field.name }}</span></div>\n\t\t\t<div class=\"xcol xcol-md-6 search\">\n\t\t\t\t@if (field.search !== false) {\n\t\t\t\t\t<xiri-search (changed)=\"searchDo($event)\"></xiri-search>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"tree\">\n\t\t@if (loading()) {\n\t\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t\t}\n\t\t<mat-tree [dataSource]=\"dataSource\" [childrenAccessor]=\"getChildren\">\n\t\t\t<mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding=\"\" matTreeNodePaddingIndent=\"20px\" [hidden]=\"node.hidden\"\n\t\t\t               [class.notree]=\"!field.tree\">\n\t\t\t\t<button mat-icon-button disabled aria-hidden=\"true\">\n\t\t\t\t\t<mat-icon style=\"visibility: hidden\">chevron_right</mat-icon>\n\t\t\t\t</button>\n\t\t\t\t<mat-checkbox class=\"checklist-leaf-node\" [checked]=\"node.state === 1\"\n\t\t\t\t              (change)=\"treeItemSelectionToggle(node)\">{{ node.name }}\n\t\t\t\t</mat-checkbox>\n\t\t\t</mat-tree-node>\n\t\t\t<mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding=\"\" matTreeNodePaddingIndent=\"20px\" [hidden]=\"node.hidden\">\n\t\t\t\t<button mat-icon-button matTreeNodeToggle [attr.aria-label]=\"tree().isExpanded(node) ? 'Zuklappen' : 'Aufklappen'\">\n\t\t\t\t\t<mat-icon class=\"mat-icon-rtl-mirror\">\n\t\t\t\t\t\t{{ tree().isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n\t\t\t\t\t</mat-icon>\n\t\t\t\t</button>\n\t\t\t\t<mat-checkbox class=\"group\"\n\t\t\t\t              [checked]=\"node.state === 1\"\n\t\t\t\t              [indeterminate]=\"node.state === 2\"\n\t\t\t\t              (change)=\"treeItemSelectionToggle(node)\">{{ node.name }}\n\t\t\t\t</mat-checkbox>\n\t\t\t</mat-tree-node>\n\t\t</mat-tree>\n\t</div>\n</div>", styles: [".main{border:1px solid var(--outline-variant, #C2C7CF);border-radius:var(--mat-form-field-filled-container-shape, var(--xiri-radius-xs, var(--mat-sys-corner-extra-small)));overflow:hidden}:host.error .main{border:1px solid var(--error, red)}.line{background-color:var(--surface-bright, #F9F9FC);padding:0 0 0 1rem;border-bottom:1px solid var(--outline-variant, #C2C7CF);border-top-left-radius:var(--mat-form-field-filled-container-shape, var(--xiri-radius-xs, var(--mat-sys-corner-extra-small)));border-top-right-radius:var(--mat-form-field-filled-container-shape, var(--xiri-radius-xs, var(--mat-sys-corner-extra-small)))}.line .header{color:var(--on-surface-variant, rgba(0, 0, 0, .54));display:flex;align-items:center;min-height:32px}.line .search{display:flex;justify-content:flex-end;padding-right:.5rem}.tree{height:300px;width:100%;overflow-y:scroll;background-color:var(--surface, #FFF)}.tree mat-spinner{margin:1rem}.tree .group{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, rgba(0, 0, 0, .54))}.tree mat-tree-node{min-height:20px;max-height:38px}.tree mat-tree-node.notree{margin-left:-25px}[hidden]{display:none!important}\n"], dependencies: [{ kind: "component", type: XiriSearchComponent, selector: "xiri-search", inputs: ["placeholder", "open", "reset", "escape", "focus", "text"], outputs: ["changed"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "directive", type: MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }] }); }
+            }], viewQueries: [{ propertyName: "tree", first: true, predicate: MatTree, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"main\">\n\t<div class=\"line\">\n\t\t<div class=\"xrow xsmall\">\n\t\t\t<div class=\"xcol xcol-md-6 header\"><span>{{ field.name }}</span></div>\n\t\t\t<div class=\"xcol xcol-md-6 search\">\n\t\t\t\t@if (field.search !== false) {\n\t\t\t\t\t<!-- ponytail: Suche und Aufklapp-Button bleiben auch gesperrt bedienbar. Beide\n\t\t\t\t\t     \u00E4ndern den Wert nicht, sperren w\u00FCrde nur das Nachschauen behindern. -->\n\t\t\t\t\t<xiri-search (changed)=\"searchDo($event)\"></xiri-search>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"tree\">\n\t\t@if (loading()) {\n\t\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t\t}\n\t\t<mat-tree [dataSource]=\"dataSource\" [childrenAccessor]=\"getChildren\">\n\t\t\t<mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding=\"\" matTreeNodePaddingIndent=\"20px\" [hidden]=\"node.hidden\"\n\t\t\t               [class.notree]=\"!field.tree\">\n\t\t\t\t<button mat-icon-button disabled aria-hidden=\"true\">\n\t\t\t\t\t<mat-icon style=\"visibility: hidden\">chevron_right</mat-icon>\n\t\t\t\t</button>\n\t\t\t\t<mat-checkbox class=\"checklist-leaf-node\" [checked]=\"node.state === 1\" [disabled]=\"disabled\"\n\t\t\t\t              (change)=\"treeItemSelectionToggle(node)\">{{ node.name }}\n\t\t\t\t</mat-checkbox>\n\t\t\t</mat-tree-node>\n\t\t\t<mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding=\"\" matTreeNodePaddingIndent=\"20px\" [hidden]=\"node.hidden\">\n\t\t\t\t<button mat-icon-button matTreeNodeToggle [attr.aria-label]=\"tree().isExpanded(node) ? 'Zuklappen' : 'Aufklappen'\">\n\t\t\t\t\t<mat-icon class=\"mat-icon-rtl-mirror\">\n\t\t\t\t\t\t{{ tree().isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n\t\t\t\t\t</mat-icon>\n\t\t\t\t</button>\n\t\t\t\t<mat-checkbox class=\"group\"\n\t\t\t\t              [checked]=\"node.state === 1\"\n\t\t\t\t              [indeterminate]=\"node.state === 2\"\n\t\t\t\t              [disabled]=\"disabled\"\n\t\t\t\t              (change)=\"treeItemSelectionToggle(node)\">{{ node.name }}\n\t\t\t\t</mat-checkbox>\n\t\t\t</mat-tree-node>\n\t\t</mat-tree>\n\t</div>\n</div>", styles: [".main{border:1px solid var(--outline-variant, #C2C7CF);border-radius:var(--mat-form-field-filled-container-shape, var(--xiri-radius-xs, var(--mat-sys-corner-extra-small)));overflow:hidden}:host.error .main{border:1px solid var(--error, red)}.line{background-color:var(--surface-bright, #F9F9FC);padding:0 0 0 1rem;border-bottom:1px solid var(--outline-variant, #C2C7CF);border-top-left-radius:var(--mat-form-field-filled-container-shape, var(--xiri-radius-xs, var(--mat-sys-corner-extra-small)));border-top-right-radius:var(--mat-form-field-filled-container-shape, var(--xiri-radius-xs, var(--mat-sys-corner-extra-small)))}.line .header{color:var(--on-surface-variant, rgba(0, 0, 0, .54));display:flex;align-items:center;min-height:32px}.line .search{display:flex;justify-content:flex-end;padding-right:.5rem}.tree{height:300px;width:100%;overflow-y:scroll;background-color:var(--surface, #FFF)}.tree mat-spinner{margin:1rem}.tree .group{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, rgba(0, 0, 0, .54))}.tree mat-tree-node{min-height:20px;max-height:38px}.tree mat-tree-node.notree{margin-left:-25px}[hidden]{display:none!important}\n"], dependencies: [{ kind: "component", type: XiriSearchComponent, selector: "xiri-search", inputs: ["placeholder", "open", "reset", "escape", "focus", "text"], outputs: ["changed"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "directive", type: MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriTreeselectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriTreeselectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-treeselect', host: {
                         '[id]': 'id',
@@ -2088,7 +2212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         MatCheckbox,
                         MatIcon,
                         MatTreeNodeDef,
-                    ], template: "<div class=\"main\">\n\t<div class=\"line\">\n\t\t<div class=\"xrow xsmall\">\n\t\t\t<div class=\"xcol xcol-md-6 header\"><span>{{ field.name }}</span></div>\n\t\t\t<div class=\"xcol xcol-md-6 search\">\n\t\t\t\t@if (field.search !== false) {\n\t\t\t\t\t<xiri-search (changed)=\"searchDo($event)\"></xiri-search>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"tree\">\n\t\t@if (loading()) {\n\t\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t\t}\n\t\t<mat-tree [dataSource]=\"dataSource\" [childrenAccessor]=\"getChildren\">\n\t\t\t<mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding=\"\" matTreeNodePaddingIndent=\"20px\" [hidden]=\"node.hidden\"\n\t\t\t               [class.notree]=\"!field.tree\">\n\t\t\t\t<button mat-icon-button disabled aria-hidden=\"true\">\n\t\t\t\t\t<mat-icon style=\"visibility: hidden\">chevron_right</mat-icon>\n\t\t\t\t</button>\n\t\t\t\t<mat-checkbox class=\"checklist-leaf-node\" [checked]=\"node.state === 1\"\n\t\t\t\t              (change)=\"treeItemSelectionToggle(node)\">{{ node.name }}\n\t\t\t\t</mat-checkbox>\n\t\t\t</mat-tree-node>\n\t\t\t<mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding=\"\" matTreeNodePaddingIndent=\"20px\" [hidden]=\"node.hidden\">\n\t\t\t\t<button mat-icon-button matTreeNodeToggle [attr.aria-label]=\"tree().isExpanded(node) ? 'Zuklappen' : 'Aufklappen'\">\n\t\t\t\t\t<mat-icon class=\"mat-icon-rtl-mirror\">\n\t\t\t\t\t\t{{ tree().isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n\t\t\t\t\t</mat-icon>\n\t\t\t\t</button>\n\t\t\t\t<mat-checkbox class=\"group\"\n\t\t\t\t              [checked]=\"node.state === 1\"\n\t\t\t\t              [indeterminate]=\"node.state === 2\"\n\t\t\t\t              (change)=\"treeItemSelectionToggle(node)\">{{ node.name }}\n\t\t\t\t</mat-checkbox>\n\t\t\t</mat-tree-node>\n\t\t</mat-tree>\n\t</div>\n</div>", styles: [".main{border:1px solid var(--outline-variant, #C2C7CF);border-radius:var(--mat-form-field-filled-container-shape, var(--xiri-radius-xs, var(--mat-sys-corner-extra-small)));overflow:hidden}:host.error .main{border:1px solid var(--error, red)}.line{background-color:var(--surface-bright, #F9F9FC);padding:0 0 0 1rem;border-bottom:1px solid var(--outline-variant, #C2C7CF);border-top-left-radius:var(--mat-form-field-filled-container-shape, var(--xiri-radius-xs, var(--mat-sys-corner-extra-small)));border-top-right-radius:var(--mat-form-field-filled-container-shape, var(--xiri-radius-xs, var(--mat-sys-corner-extra-small)))}.line .header{color:var(--on-surface-variant, rgba(0, 0, 0, .54));display:flex;align-items:center;min-height:32px}.line .search{display:flex;justify-content:flex-end;padding-right:.5rem}.tree{height:300px;width:100%;overflow-y:scroll;background-color:var(--surface, #FFF)}.tree mat-spinner{margin:1rem}.tree .group{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, rgba(0, 0, 0, .54))}.tree mat-tree-node{min-height:20px;max-height:38px}.tree mat-tree-node.notree{margin-left:-25px}[hidden]{display:none!important}\n"] }]
+                    ], template: "<div class=\"main\">\n\t<div class=\"line\">\n\t\t<div class=\"xrow xsmall\">\n\t\t\t<div class=\"xcol xcol-md-6 header\"><span>{{ field.name }}</span></div>\n\t\t\t<div class=\"xcol xcol-md-6 search\">\n\t\t\t\t@if (field.search !== false) {\n\t\t\t\t\t<!-- ponytail: Suche und Aufklapp-Button bleiben auch gesperrt bedienbar. Beide\n\t\t\t\t\t     \u00E4ndern den Wert nicht, sperren w\u00FCrde nur das Nachschauen behindern. -->\n\t\t\t\t\t<xiri-search (changed)=\"searchDo($event)\"></xiri-search>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"tree\">\n\t\t@if (loading()) {\n\t\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t\t}\n\t\t<mat-tree [dataSource]=\"dataSource\" [childrenAccessor]=\"getChildren\">\n\t\t\t<mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding=\"\" matTreeNodePaddingIndent=\"20px\" [hidden]=\"node.hidden\"\n\t\t\t               [class.notree]=\"!field.tree\">\n\t\t\t\t<button mat-icon-button disabled aria-hidden=\"true\">\n\t\t\t\t\t<mat-icon style=\"visibility: hidden\">chevron_right</mat-icon>\n\t\t\t\t</button>\n\t\t\t\t<mat-checkbox class=\"checklist-leaf-node\" [checked]=\"node.state === 1\" [disabled]=\"disabled\"\n\t\t\t\t              (change)=\"treeItemSelectionToggle(node)\">{{ node.name }}\n\t\t\t\t</mat-checkbox>\n\t\t\t</mat-tree-node>\n\t\t\t<mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding=\"\" matTreeNodePaddingIndent=\"20px\" [hidden]=\"node.hidden\">\n\t\t\t\t<button mat-icon-button matTreeNodeToggle [attr.aria-label]=\"tree().isExpanded(node) ? 'Zuklappen' : 'Aufklappen'\">\n\t\t\t\t\t<mat-icon class=\"mat-icon-rtl-mirror\">\n\t\t\t\t\t\t{{ tree().isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n\t\t\t\t\t</mat-icon>\n\t\t\t\t</button>\n\t\t\t\t<mat-checkbox class=\"group\"\n\t\t\t\t              [checked]=\"node.state === 1\"\n\t\t\t\t              [indeterminate]=\"node.state === 2\"\n\t\t\t\t              [disabled]=\"disabled\"\n\t\t\t\t              (change)=\"treeItemSelectionToggle(node)\">{{ node.name }}\n\t\t\t\t</mat-checkbox>\n\t\t\t</mat-tree-node>\n\t\t</mat-tree>\n\t</div>\n</div>", styles: [".main{border:1px solid var(--outline-variant, #C2C7CF);border-radius:var(--mat-form-field-filled-container-shape, var(--xiri-radius-xs, var(--mat-sys-corner-extra-small)));overflow:hidden}:host.error .main{border:1px solid var(--error, red)}.line{background-color:var(--surface-bright, #F9F9FC);padding:0 0 0 1rem;border-bottom:1px solid var(--outline-variant, #C2C7CF);border-top-left-radius:var(--mat-form-field-filled-container-shape, var(--xiri-radius-xs, var(--mat-sys-corner-extra-small)));border-top-right-radius:var(--mat-form-field-filled-container-shape, var(--xiri-radius-xs, var(--mat-sys-corner-extra-small)))}.line .header{color:var(--on-surface-variant, rgba(0, 0, 0, .54));display:flex;align-items:center;min-height:32px}.line .search{display:flex;justify-content:flex-end;padding-right:.5rem}.tree{height:300px;width:100%;overflow-y:scroll;background-color:var(--surface, #FFF)}.tree mat-spinner{margin:1rem}.tree .group{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, rgba(0, 0, 0, .54))}.tree mat-tree-node{min-height:20px;max-height:38px}.tree mat-tree-node.notree{margin-left:-25px}[hidden]{display:none!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { field: [{
                 type: Input
             }], value: [{
@@ -2190,10 +2314,10 @@ class XiriSelectDirective {
         // filter the _allValues
         this._filteredValuesSubject.next(this._allValues.filter(el => this.predicate()(search, el)));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: XiriSelectDirective, isStandalone: true, selector: "[xiriSelect]", inputs: { predicate: { classPropertyName: "predicate", publicName: "predicate", isSignal: true, isRequired: false, transformFunction: null }, compare: { classPropertyName: "compare", publicName: "compare", isSignal: true, isRequired: false, transformFunction: null }, serverSideSearch: { classPropertyName: "serverSideSearch", publicName: "serverSideSearch", isSignal: true, isRequired: false, transformFunction: null }, serverUrl: { classPropertyName: "serverUrl", publicName: "serverUrl", isSignal: true, isRequired: false, transformFunction: null }, serverParams: { classPropertyName: "serverParams", publicName: "serverParams", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["xiriSelect"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: XiriSelectDirective, isStandalone: true, selector: "[xiriSelect]", inputs: { predicate: { classPropertyName: "predicate", publicName: "predicate", isSignal: true, isRequired: false, transformFunction: null }, compare: { classPropertyName: "compare", publicName: "compare", isSignal: true, isRequired: false, transformFunction: null }, serverSideSearch: { classPropertyName: "serverSideSearch", publicName: "serverSideSearch", isSignal: true, isRequired: false, transformFunction: null }, serverUrl: { classPropertyName: "serverUrl", publicName: "serverUrl", isSignal: true, isRequired: false, transformFunction: null }, serverParams: { classPropertyName: "serverParams", publicName: "serverParams", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["xiriSelect"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriSelectDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriSelectDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[xiriSelect]",
@@ -2212,11 +2336,21 @@ class XiriChipsComponent {
         this.separatorKeyCodes = [ENTER, COMMA];
         this.chipInput = viewChild('chipInput', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "chipInput" }] : /* istanbul ignore next */ []));
+        // Zwei Sperrquellen, verodert. field ist hier ein input(), kein Setter -- die Ableitung
+        // gehoert deshalb in ein computed. Angular ruft beim Control-Setup setDisabledState(false),
+        // was ein Backend-disabled sonst wieder aufhoebe.
+        this.controlDisabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "controlDisabled" }] : /* istanbul ignore next */ []));
+        this.disabled = computed(() => !!this.field().disabled || this.controlDisabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.onChange = () => { };
         this.onTouched = () => { };
     }
     writeValue(value) {
-        this.chips.set(value || []);
+        // untracked wie bei setDisabledState: Angular ruft writeValue aus
+        // setUpControlValueAccessor, also waehrend der Template-Auswertung. Ohne das wirft ein
+        // Neuaufbau des Formulars mit gleicher Feld-ID NG0600.
+        untracked(() => this.chips.set(value || []));
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -2224,7 +2358,14 @@ class XiriChipsComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    setDisabledState(isDisabled) {
+        // untracked: Angular ruft das aus setUpControlValueAccessor, also waehrend der
+        // Template-Auswertung -- ein Signal-Write wuerde dort NG0600 werfen.
+        untracked(() => this.controlDisabled.set(isDisabled));
+    }
     add(event) {
+        if (this.disabled())
+            return;
         const value = (event.value || '').trim();
         if (!value)
             return;
@@ -2237,11 +2378,18 @@ class XiriChipsComponent {
         event.chipInput.clear();
     }
     remove(chip) {
+        // Auch bei deaktiviertem Grid: hatte ein Chip beim Sperren den Fokus, leitet Material
+        // Delete/Backspace weiter und prueft dabei nur `removable`.
+        if (this.disabled())
+            return;
         const current = this.chips().filter(c => c !== chip);
         this.chips.set(current);
         this.onChange(current);
     }
     selected(event) {
+        // Ein bereits offenes Autocomplete-Overlay kann nach dem Sperren noch liefern.
+        if (this.disabled())
+            return;
         const option = event.option.value;
         const current = [...this.chips()];
         if (!current.includes(option.id)) {
@@ -2282,14 +2430,14 @@ class XiriChipsComponent {
         }
         return chip;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriChipsComponent, isStandalone: true, selector: "xiri-chips", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriChipsComponent, isStandalone: true, selector: "xiri-chips", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => XiriChipsComponent),
                 multi: true
-            }], viewQueries: [{ propertyName: "chipInput", first: true, predicate: ["chipInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field>\n\t@if (field().name) {\n\t\t<mat-label>{{ field().name }}</mat-label>\n\t}\n\t<mat-chip-grid #chipGrid>\n\t\t@for (chip of chips(); track chip) {\n\t\t\t<mat-chip-row (removed)=\"remove(chip)\" [class]=\"chipColor(chip)\">\n\t\t\t\t{{ displayLabel(chip) }}\n\t\t\t\t<button matChipRemove [attr.aria-label]=\"'Entfernen: ' + displayLabel( chip )\">\n\t\t\t\t\t<mat-icon>cancel</mat-icon>\n\t\t\t\t</button>\n\t\t\t</mat-chip-row>\n\t\t}\n\t</mat-chip-grid>\n\t<input #chipInput\n\t       [matChipInputFor]=\"chipGrid\"\n\t       [matChipInputSeparatorKeyCodes]=\"separatorKeyCodes\"\n\t       [matChipInputAddOnBlur]=\"true\"\n\t       (matChipInputTokenEnd)=\"add($event)\"\n\t       (input)=\"onInputChange($event)\"\n\t       (focus)=\"onFocus()\"\n\t       [matAutocomplete]=\"auto\"\n\t       [placeholder]=\"field().hint || ''\">\n\t<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n\t\t@for (option of filteredOptions(); track option.id) {\n\t\t\t<mat-option [value]=\"option\">{{ option.name }}</mat-option>\n\t\t}\n\t</mat-autocomplete>\n</mat-form-field>\n", styles: [":host{display:block;width:100%}mat-form-field{width:100%}\n"], dependencies: [{ 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: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { 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: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+            }], viewQueries: [{ propertyName: "chipInput", first: true, predicate: ["chipInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field>\n\t@if (field().name) {\n\t\t<mat-label>{{ field().name }}</mat-label>\n\t}\n\t<mat-chip-grid #chipGrid [disabled]=\"disabled()\">\n\t\t@for (chip of chips(); track chip) {\n\t\t\t<mat-chip-row (removed)=\"remove(chip)\" [class]=\"chipColor(chip)\" [removable]=\"!disabled()\">\n\t\t\t\t{{ displayLabel(chip) }}\n\t\t\t\t<button matChipRemove [disabled]=\"disabled()\" [attr.aria-label]=\"'Entfernen: ' + displayLabel( chip )\">\n\t\t\t\t\t<mat-icon>cancel</mat-icon>\n\t\t\t\t</button>\n\t\t\t</mat-chip-row>\n\t\t}\n\t</mat-chip-grid>\n\t<input #chipInput\n\t       [matChipInputFor]=\"chipGrid\"\n\t       [matChipInputSeparatorKeyCodes]=\"separatorKeyCodes\"\n\t       [matChipInputAddOnBlur]=\"true\"\n\t       (matChipInputTokenEnd)=\"add($event)\"\n\t       (input)=\"onInputChange($event)\"\n\t       (focus)=\"onFocus()\"\n\t       [matAutocomplete]=\"auto\"\n\t       [disabled]=\"disabled()\"\n\t       [placeholder]=\"field().hint || ''\">\n\t<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n\t\t@for (option of filteredOptions(); track option.id) {\n\t\t\t<mat-option [value]=\"option\">{{ option.name }}</mat-option>\n\t\t}\n\t</mat-autocomplete>\n</mat-form-field>\n", styles: [":host{display:block;width:100%}mat-form-field{width:100%}\n"], dependencies: [{ 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: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { 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: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriChipsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-chips', providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -2306,7 +2454,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         MatAutocomplete,
                         MatOption,
                         MatIcon
-                    ], template: "<mat-form-field>\n\t@if (field().name) {\n\t\t<mat-label>{{ field().name }}</mat-label>\n\t}\n\t<mat-chip-grid #chipGrid>\n\t\t@for (chip of chips(); track chip) {\n\t\t\t<mat-chip-row (removed)=\"remove(chip)\" [class]=\"chipColor(chip)\">\n\t\t\t\t{{ displayLabel(chip) }}\n\t\t\t\t<button matChipRemove [attr.aria-label]=\"'Entfernen: ' + displayLabel( chip )\">\n\t\t\t\t\t<mat-icon>cancel</mat-icon>\n\t\t\t\t</button>\n\t\t\t</mat-chip-row>\n\t\t}\n\t</mat-chip-grid>\n\t<input #chipInput\n\t       [matChipInputFor]=\"chipGrid\"\n\t       [matChipInputSeparatorKeyCodes]=\"separatorKeyCodes\"\n\t       [matChipInputAddOnBlur]=\"true\"\n\t       (matChipInputTokenEnd)=\"add($event)\"\n\t       (input)=\"onInputChange($event)\"\n\t       (focus)=\"onFocus()\"\n\t       [matAutocomplete]=\"auto\"\n\t       [placeholder]=\"field().hint || ''\">\n\t<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n\t\t@for (option of filteredOptions(); track option.id) {\n\t\t\t<mat-option [value]=\"option\">{{ option.name }}</mat-option>\n\t\t}\n\t</mat-autocomplete>\n</mat-form-field>\n", styles: [":host{display:block;width:100%}mat-form-field{width:100%}\n"] }]
+                    ], template: "<mat-form-field>\n\t@if (field().name) {\n\t\t<mat-label>{{ field().name }}</mat-label>\n\t}\n\t<mat-chip-grid #chipGrid [disabled]=\"disabled()\">\n\t\t@for (chip of chips(); track chip) {\n\t\t\t<mat-chip-row (removed)=\"remove(chip)\" [class]=\"chipColor(chip)\" [removable]=\"!disabled()\">\n\t\t\t\t{{ displayLabel(chip) }}\n\t\t\t\t<button matChipRemove [disabled]=\"disabled()\" [attr.aria-label]=\"'Entfernen: ' + displayLabel( chip )\">\n\t\t\t\t\t<mat-icon>cancel</mat-icon>\n\t\t\t\t</button>\n\t\t\t</mat-chip-row>\n\t\t}\n\t</mat-chip-grid>\n\t<input #chipInput\n\t       [matChipInputFor]=\"chipGrid\"\n\t       [matChipInputSeparatorKeyCodes]=\"separatorKeyCodes\"\n\t       [matChipInputAddOnBlur]=\"true\"\n\t       (matChipInputTokenEnd)=\"add($event)\"\n\t       (input)=\"onInputChange($event)\"\n\t       (focus)=\"onFocus()\"\n\t       [matAutocomplete]=\"auto\"\n\t       [disabled]=\"disabled()\"\n\t       [placeholder]=\"field().hint || ''\">\n\t<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n\t\t@for (option of filteredOptions(); track option.id) {\n\t\t\t<mat-option [value]=\"option\">{{ option.name }}</mat-option>\n\t\t}\n\t</mat-autocomplete>\n</mat-form-field>\n", styles: [":host{display:block;width:100%}mat-form-field{width:100%}\n"] }]
         }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], chipInput: [{ type: i0.ViewChild, args: ['chipInput', { isSignal: true }] }] } });
 
 function formatValidationDate(localeString, unixSeconds) {
@@ -2352,6 +2500,11 @@ class XiriFormFieldsComponent {
         // Unterdrückt den formChange-Emit der valueChanges-Subscription, während ein Patch angewendet
         // wird - nach dem Patch wird genau einmal emittiert.
         this.applyingPatch = false;
+        // Läuft gerade ein Reload? Trägt den Fortschrittsbalken über dem Feldblock. Bewusst nur eine
+        // Anzeige und kein control.disable(): ein deaktiviertes Control fällt aus formGroup.value, und
+        // genau das lesen xiri-query und xiri-form aus dem formChange.
+        this.reloading = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "reloading" }] : /* istanbul ignore next */ []));
         // Gepatchte Felder werden als Kopie gerendert, damit Kind-Komponenten mit eigenem State
         // (treeselect, chips, die Select-Directive) ihre Inputs neu auswerten. Die Originale bleiben
         // die Quelle der Wahrheit - sie tragen field.control und werden von xiri-query mitgelesen.
@@ -2480,7 +2633,17 @@ class XiriFormFieldsComponent {
         merge(this.reloadKick, this.formGroup.valueChanges).pipe(
         // Während des Control-Aufbaus feuert valueChanges für jedes entfernte und neue Control;
         // diese Zwischenstände sind kein Trigger-Wechsel. Der Kick danach übernimmt.
-        filter$1(() => this._fieldsLoaded), map(() => JSON.stringify({ g: this.formGeneration, v: this.triggerValues() })), distinctUntilChanged(), switchMap(() => timer(200).pipe(switchMap(() => this.fetchPatches()))), takeUntilDestroyed(this.destroyRef)).subscribe(patch => this.applyPatch(patch.url, patch.fields));
+        filter$1(() => this._fieldsLoaded), map(() => JSON.stringify({ g: this.formGeneration, v: this.triggerValues() })), distinctUntilChanged(), 
+        // Der Balken hängt am Trigger-Wechsel, nicht am Request: gesetzt wird vor dem Timer,
+        // sonst bliebe die Entprellzeit ohne Rückmeldung. Bei einem zweiten Wechsel bleibt er
+        // durchgehend an, weil switchMap den alten Inner-Stream abräumt (finalize -> false),
+        // bevor diese Projektion für den neuen läuft (-> true).
+        switchMap(() => {
+            if (this.dependentFields().length === 0)
+                return EMPTY;
+            this.reloading.set(true);
+            return timer(200).pipe(switchMap(() => this.fetchPatches()), finalize(() => this.reloading.set(false)));
+        }), takeUntilDestroyed(this.destroyRef)).subscribe(patch => this.applyPatch(patch.url, patch.fields));
     }
     // Felder, die inhaltlich von anderen abhängen (beide Angaben nötig, siehe field.interface).
     dependentFields() {
@@ -2895,10 +3058,10 @@ class XiriFormFieldsComponent {
                 return true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriFormFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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: "<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<mat-form-field [class]=\"field.class\" [formGroup]=\"formGroup\" floatLabel=\"auto\" [hidden]=\"field.hide\">\n\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t@if (field.search === false) {\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 || {}\"></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}\n\t\t\t@case ('treeselect') {\n\t\t\t\t<div class=\"treeselect\" [class]=\"field.class\" [hidden]=\"field.hide\">\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}\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]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<xiri-chips [field]=\"field\" [formControlName]=\"field.id\"></xiri-chips>\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: [".dynamic-form{grid-row-gap:7px}.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 textarea{white-space:pre}.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{align-self:start;min-width:min(9.5rem,100%)}.dynamic-form .date.datetime{min-width:min(14.5rem,100%)}.dynamic-form .daterange{align-self:start;min-width:min(14.5rem,100%)}.dynamic-form .datetimerange{align-self:start;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: XiriChipsComponent, selector: "xiri-chips", inputs: ["field"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriFormFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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<mat-form-field [class]=\"field.class\" [formGroup]=\"formGroup\" floatLabel=\"auto\" [hidden]=\"field.hide\">\n\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t@if (field.search === false) {\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 || {}\"></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}\n\t\t\t@case ('treeselect') {\n\t\t\t\t<div class=\"treeselect\" [class]=\"field.class\" [hidden]=\"field.hide\">\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}\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]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<xiri-chips [field]=\"field\" [formControlName]=\"field.id\"></xiri-chips>\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 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 textarea{white-space:pre}.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{align-self:start;min-width:min(9.5rem,100%)}.dynamic-form .date.datetime{min-width:min(14.5rem,100%)}.dynamic-form .daterange{align-self:start;min-width:min(14.5rem,100%)}.dynamic-form .datetimerange{align-self:start;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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriFormFieldsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriFormFieldsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-form-fields', imports: [
                         FormsModule,
@@ -2928,10 +3091,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         XiriTimelimitComponent,
                         XiriFileComponent,
                         MatProgressSpinner,
+                        MatProgressBar,
                         AsyncPipe,
                         SafehtmlPipe,
                         XiriChipsComponent,
-                    ], template: "<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<mat-form-field [class]=\"field.class\" [formGroup]=\"formGroup\" floatLabel=\"auto\" [hidden]=\"field.hide\">\n\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t@if (field.search === false) {\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 || {}\"></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}\n\t\t\t@case ('treeselect') {\n\t\t\t\t<div class=\"treeselect\" [class]=\"field.class\" [hidden]=\"field.hide\">\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}\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]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<xiri-chips [field]=\"field\" [formControlName]=\"field.id\"></xiri-chips>\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: [".dynamic-form{grid-row-gap:7px}.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 textarea{white-space:pre}.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{align-self:start;min-width:min(9.5rem,100%)}.dynamic-form .date.datetime{min-width:min(14.5rem,100%)}.dynamic-form .daterange{align-self:start;min-width:min(14.5rem,100%)}.dynamic-form .datetimerange{align-self:start;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"] }]
+                    ], 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<mat-form-field [class]=\"field.class\" [formGroup]=\"formGroup\" floatLabel=\"auto\" [hidden]=\"field.hide\">\n\t\t\t\t\t<mat-label>{{ field.name }}</mat-label>\n\t\t\t\t\t@if (field.search === false) {\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 || {}\"></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}\n\t\t\t@case ('treeselect') {\n\t\t\t\t<div class=\"treeselect\" [class]=\"field.class\" [hidden]=\"field.hide\">\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}\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]=\"field.class\" [hidden]=\"field.hide\">\n\t\t\t\t\t<xiri-chips [field]=\"field\" [formControlName]=\"field.id\"></xiri-chips>\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 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 textarea{white-space:pre}.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{align-self:start;min-width:min(9.5rem,100%)}.dynamic-form .date.datetime{min-width:min(14.5rem,100%)}.dynamic-form .daterange{align-self:start;min-width:min(14.5rem,100%)}.dynamic-form .datetimerange{align-self:start;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 }] }] } });
 // 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
@@ -3118,10 +3282,10 @@ class XiriRawTableComponent {
             this.columnsToDisplay.push(column.name);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriRawTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriRawTableComponent, isStandalone: true, selector: "xiri-raw-table", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"table-out\" [class]=\"tableClass()\">\n\t<table mat-table [dataSource]=\"dataSource\">\n\t\t@for (column of displayedColumns; track column) {\n\t\t\t<ng-container [matColumnDef]=\"column.name\">\n\t\t\t\t<th mat-header-cell *matHeaderCellDef [class]=\"column.display\"> {{ column.header }}</th>\n\t\t\t\t@switch (column.format) {\n\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@if ($any(column.icons)[ $any(row)[ column.id ] ]) {\n\t\t\t\t\t\t\t\t<mat-icon [class]=\"$any(column.icons)[ $any(row)[ column.id ] ][ 'color' ] || 'primary'\"\n\t\t\t\t\t\t\t\t          [matTooltip]=\"$any(column.icons)[ $any(row)[ column.id ] ][ 'hint' ]\"\n\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!$any(column.icons)[ $any(row)[ column.id ] ][ 'hint' ]\">{{ $any(column.icons)[$any(row)[column.id]]['icon'] }}\n\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('html') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [innerHtml]=\"$any(row)[column.id] | safeHtml\" [class]=\"column.display\"></td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@if ($any(row)[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t@let cellUrl = $any(row)[column.id + 'Link'] | xiriUrl;\n\t\t\t\t\t\t\t\t<a [routerLink]=\"cellUrl?.path\" [queryParams]=\"cellUrl?.queryParams\" class=\"tablelink\">{{ $any(row)[column.id] }}</a>\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t<span>{{ $any(row)[column.id] }}</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('text2') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t<div>{{ $any(row)[column.id][0] }}</div>\n\t\t\t\t\t\t\t<div>{{ $any(row)[column.id][1] }}</div>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('textn') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@for (line of $any(row)[column.id]; track $index) {\n\t\t\t\t\t\t\t\t<div>{{ line }}</div>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('linkrow') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@if ($any(row)[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t@let rowUrl = $any(row)[column.id + 'Link'] | xiriUrl;\n\t\t\t\t\t\t\t\t<a [routerLink]=\"rowUrl?.path\" [queryParams]=\"rowUrl?.queryParams\">\n\t\t\t\t\t\t\t\t\t<div class=\"linkrow\">\n\t\t\t\t\t\t\t\t\t\t@if ($any(row)['icon']) {\n\t\t\t\t\t\t\t\t\t\t\t@if ($any(row)['iconSet']) {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"$any(row)['iconColor'] || 'primary'\" [fontSet]=\"$any(row)['iconSet']\">{{ $any(row)['icon'] }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"$any(row)['iconColor'] || 'primary'\">{{ $any(row)['icon'] }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t<span class=\"text\" [class.hasIcon]=\"$any(row)['icon']\">{{ $any(row)[column.id] }}</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('number') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t{{ column.textPrefix }}{{ $any(row)[column.id][0] }}{{ column.textSuffix }}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('chips') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t<div class=\"xiri-chips-display\">\n\t\t\t\t\t\t\t\t@for (chip of $any(row)[column.id]; track chip.label) {\n\t\t\t\t\t\t\t\t\t<span class=\"xiri-chip-display\" [class]=\"chip.color || ''\">{{ chip.label }}</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@default {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">{{ $any(row)[column.id] }}</td>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</ng-container>\n\t\t}\n\n\t\t@if (showHeader()) {\n\t\t\t<tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n\t\t}\n\t\t<tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\"></tr>\n\t</table>\n</div>", styles: [".table-out{overflow-x:auto}.table-out.dense-1{--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px}.table-out.dense-2{--mat-table-header-container-height: 48px;--mat-table-footer-container-height: 44px;--mat-table-row-item-container-height: 44px}.table-out.dense-3{--mat-table-header-container-height: 44px;--mat-table-footer-container-height: 40px;--mat-table-row-item-container-height: 40px}.table-out.dense-4,.table-out.dense-6{--mat-table-header-container-height: 40px;--mat-table-footer-container-height: 36px;--mat-table-row-item-container-height: 36px}.table-out.dense-6 table tr.mat-mdc-row{height:32px}.table-out.dense-8{--mat-table-header-container-height: 40px;--mat-table-footer-container-height: 36px;--mat-table-row-item-container-height: 36px}.table-out.dense-8 table tr.mat-mdc-row{height:30px}.table-out.force-min-width td{min-width:150px}table{width:100%}table tr.mat-mdc-row:hover{background:var(--surface-variant, #DEE3EB)}table .tablelink{text-decoration:underline}table .linkrow{display:table-row}table .linkrow mat-icon{display:table-cell;width:30px;text-align:center;padding-right:1rem;line-height:31px;color:var(--xiri-linkrow-icon-color)}table .linkrow .text{display:table-cell;text-decoration:underline}table .linkrow .text.hasIcon{vertical-align:middle;line-height:33px}table td.mat-mdc-cell mat-icon{vertical-align:middle}table td.mat-mdc-cell.info{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, #42474E)}table td.mat-mdc-cell.number{text-align:right;font-variant-numeric:tabular-nums}table td.mat-mdc-cell.right,table td.mat-mdc-cell.align-right{text-align:right;padding-left:1rem;word-wrap:anywhere}table td.mat-mdc-cell.center,table td.mat-mdc-cell.align-center{text-align:center;padding-left:1rem}table td.mat-mdc-cell.left,table td.mat-mdc-cell.align-left{text-align:left}table td.mat-mdc-cell.middle{padding-left:1rem}table th.mat-mdc-header-cell.number{text-align:right;font-variant-numeric:tabular-nums}table th.mat-mdc-header-cell.align-right{text-align:right}table th.mat-mdc-header-cell.align-center{text-align:center}table th.mat-mdc-header-cell.align-left{text-align:left}\n"], dependencies: [{ kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }, { kind: "pipe", type: XiriUrlPipe, name: "xiriUrl" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriRawTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriRawTableComponent, isStandalone: true, selector: "xiri-raw-table", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"table-out\" [class]=\"tableClass()\">\n\t<table mat-table [dataSource]=\"dataSource\">\n\t\t@for (column of displayedColumns; track column) {\n\t\t\t<ng-container [matColumnDef]=\"column.name\">\n\t\t\t\t<th mat-header-cell *matHeaderCellDef [class]=\"column.display\"> {{ column.header }}</th>\n\t\t\t\t@switch (column.format) {\n\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@if ($any(column.icons)[ $any(row)[ column.id ] ]) {\n\t\t\t\t\t\t\t\t<mat-icon [class]=\"$any(column.icons)[ $any(row)[ column.id ] ][ 'color' ] || 'primary'\"\n\t\t\t\t\t\t\t\t          [matTooltip]=\"$any(column.icons)[ $any(row)[ column.id ] ][ 'hint' ]\"\n\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!$any(column.icons)[ $any(row)[ column.id ] ][ 'hint' ]\">{{ $any(column.icons)[$any(row)[column.id]]['icon'] }}\n\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('html') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [innerHtml]=\"$any(row)[column.id] | safeHtml\" [class]=\"column.display\"></td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@if ($any(row)[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t@let cellUrl = $any(row)[column.id + 'Link'] | xiriUrl;\n\t\t\t\t\t\t\t\t<a [routerLink]=\"cellUrl?.path\" [queryParams]=\"cellUrl?.queryParams\" class=\"tablelink\">{{ $any(row)[column.id] }}</a>\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t<span>{{ $any(row)[column.id] }}</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('text2') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t<div>{{ $any(row)[column.id][0] }}</div>\n\t\t\t\t\t\t\t<div>{{ $any(row)[column.id][1] }}</div>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('textn') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@for (line of $any(row)[column.id]; track $index) {\n\t\t\t\t\t\t\t\t<div>{{ line }}</div>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('linkrow') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@if ($any(row)[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t@let rowUrl = $any(row)[column.id + 'Link'] | xiriUrl;\n\t\t\t\t\t\t\t\t<a [routerLink]=\"rowUrl?.path\" [queryParams]=\"rowUrl?.queryParams\">\n\t\t\t\t\t\t\t\t\t<div class=\"linkrow\">\n\t\t\t\t\t\t\t\t\t\t@if ($any(row)['icon']) {\n\t\t\t\t\t\t\t\t\t\t\t@if ($any(row)['iconSet']) {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"$any(row)['iconColor'] || 'primary'\" [fontSet]=\"$any(row)['iconSet']\">{{ $any(row)['icon'] }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"$any(row)['iconColor'] || 'primary'\">{{ $any(row)['icon'] }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t<span class=\"text\" [class.hasIcon]=\"$any(row)['icon']\">{{ $any(row)[column.id] }}</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('number') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t{{ column.textPrefix }}{{ $any(row)[column.id][0] }}{{ column.textSuffix }}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('chips') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t<div class=\"xiri-chips-display\">\n\t\t\t\t\t\t\t\t@for (chip of $any(row)[column.id]; track chip.label) {\n\t\t\t\t\t\t\t\t\t<span class=\"xiri-chip-display\" [class]=\"chip.color || ''\">{{ chip.label }}</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@default {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">{{ $any(row)[column.id] }}</td>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</ng-container>\n\t\t}\n\n\t\t@if (showHeader()) {\n\t\t\t<tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n\t\t}\n\t\t<tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\"></tr>\n\t</table>\n</div>", styles: [".table-out{overflow-x:auto}.table-out.dense-1{--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px}.table-out.dense-2{--mat-table-header-container-height: 48px;--mat-table-footer-container-height: 44px;--mat-table-row-item-container-height: 44px}.table-out.dense-3{--mat-table-header-container-height: 44px;--mat-table-footer-container-height: 40px;--mat-table-row-item-container-height: 40px}.table-out.dense-4,.table-out.dense-6{--mat-table-header-container-height: 40px;--mat-table-footer-container-height: 36px;--mat-table-row-item-container-height: 36px}.table-out.dense-6 table tr.mat-mdc-row{height:32px}.table-out.dense-8{--mat-table-header-container-height: 40px;--mat-table-footer-container-height: 36px;--mat-table-row-item-container-height: 36px}.table-out.dense-8 table tr.mat-mdc-row{height:30px}.table-out.force-min-width td{min-width:150px}table{width:100%}table tr.mat-mdc-row:hover{background:var(--surface-variant, #DEE3EB)}table .tablelink{text-decoration:underline}table .linkrow{display:table-row}table .linkrow mat-icon{display:table-cell;width:30px;text-align:center;padding-right:1rem;line-height:31px;color:var(--xiri-linkrow-icon-color)}table .linkrow .text{display:table-cell;text-decoration:underline}table .linkrow .text.hasIcon{vertical-align:middle;line-height:33px}table td.mat-mdc-cell mat-icon{vertical-align:middle}table td.mat-mdc-cell.info{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, #42474E)}table td.mat-mdc-cell.number{text-align:right;font-variant-numeric:tabular-nums}table td.mat-mdc-cell.right,table td.mat-mdc-cell.align-right{text-align:right;padding-left:1rem;word-wrap:anywhere}table td.mat-mdc-cell.center,table td.mat-mdc-cell.align-center{text-align:center;padding-left:1rem}table td.mat-mdc-cell.left,table td.mat-mdc-cell.align-left{text-align:left}table td.mat-mdc-cell.middle{padding-left:1rem}table th.mat-mdc-header-cell.number{text-align:right;font-variant-numeric:tabular-nums}table th.mat-mdc-header-cell.align-right{text-align:right}table th.mat-mdc-header-cell.align-center{text-align:center}table th.mat-mdc-header-cell.align-left{text-align:left}\n"], dependencies: [{ kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }, { kind: "pipe", type: XiriUrlPipe, name: "xiriUrl" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriRawTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriRawTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-raw-table', imports: [MatTable,
                         MatColumnDef,
@@ -3155,10 +3319,10 @@ class XiriButtonstyleComponent {
         this.pollText = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pollText" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriButtonstyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriButtonstyleComponent, isStandalone: true, selector: "xiri-buttonstyle", inputs: { button: { classPropertyName: "button", publicName: "button", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, countdown: { classPropertyName: "countdown", publicName: "countdown", isSignal: true, isRequired: false, transformFunction: null }, pollText: { classPropertyName: "pollText", publicName: "pollText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-template #textContent>\n\t@if (loading()) {\n\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t@if (pollText() || countdown() > 0) {\n\t\t\t<span class=\"poll-countdown\">{{ pollText() || countdown() + 's' }}</span>\n\t\t}\n\t} @else {\n\t\t{{ button().text }}\n\t}\n</ng-template>\n\n<!-- Guard sitzt hier, nicht nur in xiri-button: form, dialog, alert und stepper\n     rendern XiriButton direkt ueber buttonstyle. -->\n@if (!button().hide) {\n\t@switch (button().type) {\n\t\t@case ('icon') {\n\t\t\t<button mat-icon-button [matTooltip]=\"button().hint\" [matTooltipDisabled]=\"!button().hint\"\n\t\t\t        [attr.aria-label]=\"button().hint || button().text\"\n\t\t\t        [color]=\"button().color || 'primary'\" [disabled]=\"disabled() || loading()\">\n\t\t\t\t@if (loading()) {\n\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t} @else {\n\t\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t</button>\n\t\t}\n\t\t@case ('icontext') {\n\t\t\t<button mat-fab extended=\"true\"\n\t\t\t        class=\"icontext\"\n\t\t\t        [matTooltip]=\"button().hint\"\n\t\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t\t        [color]=\"button().color || 'primary'\"\n\t\t\t        [disabled]=\"disabled() || loading()\"\n\t\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t\t@if (loading()) {\n\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t@if (pollText() || countdown() > 0) {\n\t\t\t\t\t\t<span class=\"poll-countdown\">{{ pollText() || countdown() + 's' }}</span>\n\t\t\t\t\t}\n\t\t\t\t} @else {\n\t\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t\t{{ button().text }}\n\t\t\t</button>\n\t\t}\n\t\t@case ('raised') {\n\t\t\t<button mat-raised-button\n\t\t\t        [matTooltip]=\"button().hint\"\n\t\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t\t        [color]=\"button().color || 'primary'\"\n\t\t\t        [disabled]=\"disabled() || loading()\"\n\t\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"textContent\"></ng-container>\n\t\t\t</button>\n\t\t}\n\t\t@case ('basic') {\n\t\t\t<button mat-button\n\t\t\t        [matTooltip]=\"button().hint\"\n\t\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t\t        [color]=\"button().color || 'primary'\"\n\t\t\t        [disabled]=\"disabled() || loading()\"\n\t\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"textContent\"></ng-container>\n\t\t\t</button>\n\t\t}\n\t\t@case ('stroked') {\n\t\t\t<button mat-stroked-button\n\t\t\t        [matTooltip]=\"button().hint\"\n\t\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t\t        [color]=\"button().color || 'primary'\"\n\t\t\t        [disabled]=\"disabled() || loading()\"\n\t\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"textContent\"></ng-container>\n\t\t\t</button>\n\t\t}\n\t\t@case ('flat') {\n\t\t\t<button mat-flat-button\n\t\t\t        [matTooltip]=\"button().hint\"\n\t\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t\t        [color]=\"button().color || 'primary'\"\n\t\t\t        [disabled]=\"disabled() || loading()\"\n\t\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"textContent\"></ng-container>\n\t\t\t</button>\n\t\t}\n\t\t@case ('minifab') {\n\t\t\t<button mat-mini-fab [matTooltip]=\"button().hint\" [matTooltipDisabled]=\"!button().hint\"\n\t\t\t        [attr.aria-label]=\"button().hint || button().text\"\n\t\t\t        [color]=\"button().color || 'primary'\" [disabled]=\"disabled() || loading()\"\n\t\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t\t@if (loading()) {\n\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t} @else {\n\t\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t</button>\n\t\t}\n\t\t@case ('fab') {\n\t\t\t<button mat-fab [matTooltip]=\"button().hint\" [matTooltipDisabled]=\"!button().hint\"\n\t\t\t        [attr.aria-label]=\"button().hint || button().text\"\n\t\t\t        [color]=\"button().color || 'primary'\" [disabled]=\"disabled() || loading()\"\n\t\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t\t@if (loading()) {\n\t\t\t\t\t<mat-spinner diameter=\"24\"></mat-spinner>\n\t\t\t\t} @else {\n\t\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t</button>\n\t\t}\n\t\t@default {\n\t\t\t@if (button().icon) {\n\t\t\t\t<button mat-icon-button [matTooltip]=\"button().hint\" [matTooltipDisabled]=\"!button().hint\"\n\t\t\t\t        [attr.aria-label]=\"button().hint || button().text\"\n\t\t\t\t        [color]=\"button().color || 'primary'\" [disabled]=\"disabled() || loading()\"\n\t\t\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t\t\t@if (loading()) {\n\t\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t</button>\n\t\t\t}\n\t\t\t@if (button().text) {\n\t\t\t\t<button mat-raised-button\n\t\t\t\t        [matTooltip]=\"button().hint\"\n\t\t\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t\t\t        [color]=\"button().color || 'primary'\"\n\t\t\t\t        [disabled]=\"disabled() || loading()\"\n\t\t\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"textContent\"></ng-container>\n\t\t\t\t</button>\n\t\t\t}\n\t\t}\n\t}\n}\n", styles: ["mat-spinner{display:inline-block;--mat-progress-spinner-active-indicator-color: currentColor}.poll-countdown{display:inline-block;margin-left:6px;font-variant-numeric:tabular-nums;font-size:.85em;opacity:.9}\n"], dependencies: [{ 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: MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriButtonstyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriButtonstyleComponent, isStandalone: true, selector: "xiri-buttonstyle", inputs: { button: { classPropertyName: "button", publicName: "button", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, countdown: { classPropertyName: "countdown", publicName: "countdown", isSignal: true, isRequired: false, transformFunction: null }, pollText: { classPropertyName: "pollText", publicName: "pollText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-template #textContent>\n\t@if (loading()) {\n\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t@if (pollText() || countdown() > 0) {\n\t\t\t<span class=\"poll-countdown\">{{ pollText() || countdown() + 's' }}</span>\n\t\t}\n\t} @else {\n\t\t{{ button().text }}\n\t}\n</ng-template>\n\n<!-- Guard sitzt hier, nicht nur in xiri-button: form, dialog, alert und stepper\n     rendern XiriButton direkt ueber buttonstyle. -->\n@if (!button().hide) {\n\t@switch (button().type) {\n\t\t@case ('icon') {\n\t\t\t<button mat-icon-button [matTooltip]=\"button().hint\" [matTooltipDisabled]=\"!button().hint\"\n\t\t\t        [attr.aria-label]=\"button().hint || button().text\"\n\t\t\t        [color]=\"button().color || 'primary'\" [disabled]=\"disabled() || loading()\">\n\t\t\t\t@if (loading()) {\n\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t} @else {\n\t\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t</button>\n\t\t}\n\t\t@case ('icontext') {\n\t\t\t<button mat-fab extended=\"true\"\n\t\t\t        class=\"icontext\"\n\t\t\t        [matTooltip]=\"button().hint\"\n\t\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t\t        [color]=\"button().color || 'primary'\"\n\t\t\t        [disabled]=\"disabled() || loading()\"\n\t\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t\t@if (loading()) {\n\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t@if (pollText() || countdown() > 0) {\n\t\t\t\t\t\t<span class=\"poll-countdown\">{{ pollText() || countdown() + 's' }}</span>\n\t\t\t\t\t}\n\t\t\t\t} @else {\n\t\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t\t{{ button().text }}\n\t\t\t</button>\n\t\t}\n\t\t@case ('raised') {\n\t\t\t<button mat-raised-button\n\t\t\t        [matTooltip]=\"button().hint\"\n\t\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t\t        [color]=\"button().color || 'primary'\"\n\t\t\t        [disabled]=\"disabled() || loading()\"\n\t\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"textContent\"></ng-container>\n\t\t\t</button>\n\t\t}\n\t\t@case ('basic') {\n\t\t\t<button mat-button\n\t\t\t        [matTooltip]=\"button().hint\"\n\t\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t\t        [color]=\"button().color || 'primary'\"\n\t\t\t        [disabled]=\"disabled() || loading()\"\n\t\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"textContent\"></ng-container>\n\t\t\t</button>\n\t\t}\n\t\t@case ('stroked') {\n\t\t\t<button mat-stroked-button\n\t\t\t        [matTooltip]=\"button().hint\"\n\t\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t\t        [color]=\"button().color || 'primary'\"\n\t\t\t        [disabled]=\"disabled() || loading()\"\n\t\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"textContent\"></ng-container>\n\t\t\t</button>\n\t\t}\n\t\t@case ('flat') {\n\t\t\t<button mat-flat-button\n\t\t\t        [matTooltip]=\"button().hint\"\n\t\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t\t        [color]=\"button().color || 'primary'\"\n\t\t\t        [disabled]=\"disabled() || loading()\"\n\t\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"textContent\"></ng-container>\n\t\t\t</button>\n\t\t}\n\t\t@case ('minifab') {\n\t\t\t<button mat-mini-fab [matTooltip]=\"button().hint\" [matTooltipDisabled]=\"!button().hint\"\n\t\t\t        [attr.aria-label]=\"button().hint || button().text\"\n\t\t\t        [color]=\"button().color || 'primary'\" [disabled]=\"disabled() || loading()\"\n\t\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t\t@if (loading()) {\n\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t} @else {\n\t\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t</button>\n\t\t}\n\t\t@case ('fab') {\n\t\t\t<button mat-fab [matTooltip]=\"button().hint\" [matTooltipDisabled]=\"!button().hint\"\n\t\t\t        [attr.aria-label]=\"button().hint || button().text\"\n\t\t\t        [color]=\"button().color || 'primary'\" [disabled]=\"disabled() || loading()\"\n\t\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t\t@if (loading()) {\n\t\t\t\t\t<mat-spinner diameter=\"24\"></mat-spinner>\n\t\t\t\t} @else {\n\t\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t</button>\n\t\t}\n\t\t@default {\n\t\t\t@if (button().icon) {\n\t\t\t\t<button mat-icon-button [matTooltip]=\"button().hint\" [matTooltipDisabled]=\"!button().hint\"\n\t\t\t\t        [attr.aria-label]=\"button().hint || button().text\"\n\t\t\t\t        [color]=\"button().color || 'primary'\" [disabled]=\"disabled() || loading()\"\n\t\t\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t\t\t@if (loading()) {\n\t\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t</button>\n\t\t\t}\n\t\t\t@if (button().text) {\n\t\t\t\t<button mat-raised-button\n\t\t\t\t        [matTooltip]=\"button().hint\"\n\t\t\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t\t\t        [color]=\"button().color || 'primary'\"\n\t\t\t\t        [disabled]=\"disabled() || loading()\"\n\t\t\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"textContent\"></ng-container>\n\t\t\t\t</button>\n\t\t\t}\n\t\t}\n\t}\n}\n", styles: ["mat-spinner{display:inline-block;--mat-progress-spinner-active-indicator-color: currentColor}.poll-countdown{display:inline-block;margin-left:6px;font-variant-numeric:tabular-nums;font-size:.85em;opacity:.9}\n"], dependencies: [{ 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: MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriButtonstyleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriButtonstyleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-buttonstyle', imports: [
                         MatButton,
@@ -3173,10 +3337,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         }], propDecorators: { button: [{ type: i0.Input, args: [{ isSignal: true, alias: "button", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], countdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "countdown", required: false }] }], pollText: [{ type: i0.Input, args: [{ isSignal: true, alias: "pollText", required: false }] }] } });
 
 class XiriDoneComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriDoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: XiriDoneComponent, isStandalone: true, selector: "xiri-done", ngImport: i0, template: "<mat-icon aria-label=\"Erfolgreich abgeschlossen\" role=\"status\">done</mat-icon>\n", styles: ["@keyframes bounceIn{0%{transform:scale(.2);opacity:0}70%{transform:scale(1.4);opacity:1}to{transform:scale(1)}}:host{margin:1em;min-height:60px}mat-icon{color:var(--color-success, #2ECC71);font-size:4rem;height:auto;width:auto;animation:bounceIn .4s .1s cubic-bezier(.8,-.6,.2,1.5) both}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriDoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: XiriDoneComponent, isStandalone: true, selector: "xiri-done", ngImport: i0, template: "<mat-icon aria-label=\"Erfolgreich abgeschlossen\" role=\"status\">done</mat-icon>\n", styles: ["@keyframes bounceIn{0%{transform:scale(.2);opacity:0}70%{transform:scale(1.4);opacity:1}to{transform:scale(1)}}:host{margin:1em;min-height:60px}mat-icon{color:var(--color-success, #2ECC71);font-size:4rem;height:auto;width:auto;animation:bounceIn .4s .1s cubic-bezier(.8,-.6,.2,1.5) both}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriDoneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriDoneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-done', imports: [MatIcon], template: "<mat-icon aria-label=\"Erfolgreich abgeschlossen\" role=\"status\">done</mat-icon>\n", styles: ["@keyframes bounceIn{0%{transform:scale(.2);opacity:0}70%{transform:scale(1.4);opacity:1}to{transform:scale(1)}}:host{margin:1em;min-height:60px}mat-icon{color:var(--color-success, #2ECC71);font-size:4rem;height:auto;width:auto;animation:bounceIn .4s .1s cubic-bezier(.8,-.6,.2,1.5) both}\n"] }]
         }] });
@@ -3186,10 +3350,10 @@ class XiriErrorComponent {
         this.text = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: XiriErrorComponent, isStandalone: true, selector: "xiri-error", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"error\">\n\t{{ text() }}\n</div>\n", styles: ["@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.error{padding:var(--xiri-spacing-md);margin:var(--xiri-spacing-md) 0;border:1px solid transparent;border-radius:var(--xiri-radius-sm);background-color:var(--error-container, #FFDAD6);color:var(--on-error-container, #410002);animation:fadeInUp var(--xiri-duration-normal) var(--xiri-easing-decelerate)}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: XiriErrorComponent, isStandalone: true, selector: "xiri-error", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"error\">\n\t{{ text() }}\n</div>\n", styles: ["@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.error{padding:var(--xiri-spacing-md);margin:var(--xiri-spacing-md) 0;border:1px solid transparent;border-radius:var(--xiri-radius-sm);background-color:var(--error-container, #FFDAD6);color:var(--on-error-container, #410002);animation:fadeInUp var(--xiri-duration-normal) var(--xiri-easing-decelerate)}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriErrorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriErrorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-error', template: "<div class=\"error\">\n\t{{ text() }}\n</div>\n", styles: ["@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.error{padding:var(--xiri-spacing-md);margin:var(--xiri-spacing-md) 0;border:1px solid transparent;border-radius:var(--xiri-radius-sm);background-color:var(--error-container, #FFDAD6);color:var(--on-error-container, #410002);animation:fadeInUp var(--xiri-duration-normal) var(--xiri-easing-decelerate)}\n"] }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }] } });
@@ -3238,10 +3402,10 @@ class XiriDownloadService {
         setTimeout(() => a.click(), 0);
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriDownloadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriDownloadService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriDownloadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriDownloadService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriDownloadService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriDownloadService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3552,10 +3716,10 @@ class XiriDialogComponent {
         if (this.to)
             clearTimeout(this.to);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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') {\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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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') {\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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-dialog', imports: [MatDialogTitle,
                         MatDialogContent,
@@ -3593,10 +3757,10 @@ class XiriResponseHandlerService {
         else if (res.table == 'update' || res.update == 'table')
             callbacks?.onTableUpdate?.(res.id, res.field, res.content);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriResponseHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriResponseHandlerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriResponseHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriResponseHandlerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriResponseHandlerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriResponseHandlerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3892,10 +4056,10 @@ class XiriButtonComponent {
             this.dialogRef.close(null);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriButtonComponent, isStandalone: true, selector: "xiri-button", inputs: { button: { classPropertyName: "button", publicName: "button", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterData: { classPropertyName: "filterData", publicName: "filterData", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { result: "result" }, ngImport: i0, template: "<!-- hide has always been part of the XiriButton contract; a hidden button must not\n     render and must not run its action (see the autoLoad effect). -->\n@if (!displayButton().hide) {\n\t@switch (button().action) {\n\t\t@case ('link') {\n\t\t\t@let linkUrl = _url() | xiriUrl;\n\t\t\t<a [routerLink]=\"linkUrl?.path\" [queryParams]=\"linkUrl?.queryParams\" [href]=\"_url()\" (click)=\"clicked($event)\">\n\t\t\t\t<xiri-buttonstyle [button]=\"displayButton()\" [disabled]=\"_disabled()\" [loading]=\"loading()\" [countdown]=\"countdown()\" [pollText]=\"pollText()\"></xiri-buttonstyle>\n\t\t\t</a>\n\t\t}\n\t\t@case ('href') {\n\t\t\t<a [href]=\"_url()\" [target]=\"button().target\" (click)=\"clicked($event)\">\n\t\t\t\t<xiri-buttonstyle [button]=\"displayButton()\" [disabled]=\"_disabled()\" [loading]=\"loading()\" [countdown]=\"countdown()\" [pollText]=\"pollText()\"></xiri-buttonstyle>\n\t\t\t</a>\n\t\t}\n\t\t@case ('menu') {\n\t\t\t<button mat-icon-button [matMenuTriggerFor]=\"menuRef\"\n\t\t\t        [class]=\"displayButton().color || 'primary'\"\n\t\t\t        [matTooltip]=\"button().hint\"\n\t\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t\t        [attr.aria-label]=\"displayButton().hint || displayButton().text\"\n\t\t\t        (click)=\"$event.stopPropagation()\">\n\t\t\t\t<mat-icon>{{ displayButton().icon }}</mat-icon>\n\t\t\t</button>\n\t\t\t<mat-menu #menuRef=\"matMenu\">\n\t\t\t\t@for (item of button().menuItems; track item) {\n\t\t\t\t\t@switch (item.action) {\n\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t@let menuUrl = item.url | xiriUrl;\n\t\t\t\t\t\t\t<a mat-menu-item [routerLink]=\"menuUrl?.path\" [queryParams]=\"menuUrl?.queryParams\">\n\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@case ('href') {\n\t\t\t\t\t\t\t<a mat-menu-item [href]=\"item.url\" target=\"_blank\">\n\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t<button mat-menu-item (click)=\"openMenuDialog($event, item)\">\n\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</mat-menu>\n\t\t}\n\t\t@default {\n\t\t\t<xiri-buttonstyle [button]=\"displayButton()\" [disabled]=\"_disabled()\" [loading]=\"loading()\" [countdown]=\"countdown()\" [pollText]=\"pollText()\" (click)=\"clicked($event)\"></xiri-buttonstyle>\n\t\t}\n\t}\n}\n", styles: [""], dependencies: [{ kind: "component", type: XiriButtonstyleComponent, selector: "xiri-buttonstyle", inputs: ["button", "disabled", "loading", "countdown", "pollText"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: XiriUrlPipe, name: "xiriUrl" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriButtonComponent, isStandalone: true, selector: "xiri-button", inputs: { button: { classPropertyName: "button", publicName: "button", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterData: { classPropertyName: "filterData", publicName: "filterData", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { result: "result" }, ngImport: i0, template: "<!-- hide has always been part of the XiriButton contract; a hidden button must not\n     render and must not run its action (see the autoLoad effect). -->\n@if (!displayButton().hide) {\n\t@switch (button().action) {\n\t\t@case ('link') {\n\t\t\t@let linkUrl = _url() | xiriUrl;\n\t\t\t<a [routerLink]=\"linkUrl?.path\" [queryParams]=\"linkUrl?.queryParams\" [href]=\"_url()\" (click)=\"clicked($event)\">\n\t\t\t\t<xiri-buttonstyle [button]=\"displayButton()\" [disabled]=\"_disabled()\" [loading]=\"loading()\" [countdown]=\"countdown()\" [pollText]=\"pollText()\"></xiri-buttonstyle>\n\t\t\t</a>\n\t\t}\n\t\t@case ('href') {\n\t\t\t<a [href]=\"_url()\" [target]=\"button().target\" (click)=\"clicked($event)\">\n\t\t\t\t<xiri-buttonstyle [button]=\"displayButton()\" [disabled]=\"_disabled()\" [loading]=\"loading()\" [countdown]=\"countdown()\" [pollText]=\"pollText()\"></xiri-buttonstyle>\n\t\t\t</a>\n\t\t}\n\t\t@case ('menu') {\n\t\t\t<button mat-icon-button [matMenuTriggerFor]=\"menuRef\"\n\t\t\t        [class]=\"displayButton().color || 'primary'\"\n\t\t\t        [matTooltip]=\"button().hint\"\n\t\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t\t        [attr.aria-label]=\"displayButton().hint || displayButton().text\"\n\t\t\t        (click)=\"$event.stopPropagation()\">\n\t\t\t\t<mat-icon>{{ displayButton().icon }}</mat-icon>\n\t\t\t</button>\n\t\t\t<mat-menu #menuRef=\"matMenu\">\n\t\t\t\t@for (item of button().menuItems; track item) {\n\t\t\t\t\t@switch (item.action) {\n\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t@let menuUrl = item.url | xiriUrl;\n\t\t\t\t\t\t\t<a mat-menu-item [routerLink]=\"menuUrl?.path\" [queryParams]=\"menuUrl?.queryParams\">\n\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@case ('href') {\n\t\t\t\t\t\t\t<a mat-menu-item [href]=\"item.url\" target=\"_blank\">\n\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t<button mat-menu-item (click)=\"openMenuDialog($event, item)\">\n\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</mat-menu>\n\t\t}\n\t\t@default {\n\t\t\t<xiri-buttonstyle [button]=\"displayButton()\" [disabled]=\"_disabled()\" [loading]=\"loading()\" [countdown]=\"countdown()\" [pollText]=\"pollText()\" (click)=\"clicked($event)\"></xiri-buttonstyle>\n\t\t}\n\t}\n}\n", styles: [""], dependencies: [{ kind: "component", type: XiriButtonstyleComponent, selector: "xiri-buttonstyle", inputs: ["button", "disabled", "loading", "countdown", "pollText"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: XiriUrlPipe, name: "xiriUrl" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-button', imports: [
                         XiriButtonstyleComponent,
@@ -4208,10 +4372,10 @@ class XiriTableInlineEditService {
             return { label: opt?.label || val, color: opt?.color || '' };
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriTableInlineEditService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriTableInlineEditService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriTableInlineEditService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriTableInlineEditService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriTableInlineEditService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriTableInlineEditService, decorators: [{
             type: Injectable
         }] });
 
@@ -4278,10 +4442,10 @@ class XiriLocalStorageService extends XiriStorageServiceBase {
     constructor() {
         super(window.localStorage);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriLocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriLocalStorageService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriLocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriLocalStorageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriLocalStorageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriLocalStorageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -4566,10 +4730,10 @@ class XiriTableTreeService {
         if (key)
             this.localStorage.set(key, Array.from(this.expanded));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriTableTreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriTableTreeService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriTableTreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriTableTreeService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriTableTreeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriTableTreeService, decorators: [{
             type: Injectable
         }] });
 
@@ -4583,10 +4747,10 @@ class XiriButtonlineComponent {
         ...(ngDevMode ? [{ debugName: "filterData" }] : /* istanbul ignore next */ []));
         this.result = output();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriButtonlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriButtonlineComponent, isStandalone: true, selector: "xiri-buttonline", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterData: { classPropertyName: "filterData", publicName: "filterData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { result: "result" }, ngImport: i0, template: "<div class=\"buttonline\" [class]=\"settings().class\">\n\t@for (button of settings().buttons; track i; let i = $index) {\n\t\t<xiri-button [button]=\"button\" [filterData]=\"filterData()\" [disabled]=\"disabled()\" (result)=\"result.emit( $event )\"></xiri-button>\n\t}\n</div>\n", styles: [".buttonline.right{text-align:right}.buttonline.right>xiri-button,.buttonline.right a{margin-left:var(--xiri-spacing-sm)}.buttonline.center{text-align:center}.buttonline.center button,.buttonline.center a,.buttonline.center xiri-button{margin-left:var(--xiri-spacing-sm);margin-right:var(--xiri-spacing-sm)}.buttonline.left button,.buttonline.left a,.buttonline.left xiri-button{margin-left:var(--xiri-spacing-sm);margin-right:var(--xiri-spacing-sm)}.buttonline.small{padding-bottom:0}.buttonline xiri-button+xiri-button{margin-left:var(--xiri-spacing-sm)}\n"], dependencies: [{ kind: "component", type: XiriButtonComponent, selector: "xiri-button", inputs: ["button", "disabled", "filterData", "url"], outputs: ["result"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriButtonlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriButtonlineComponent, isStandalone: true, selector: "xiri-buttonline", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterData: { classPropertyName: "filterData", publicName: "filterData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { result: "result" }, ngImport: i0, template: "<div class=\"buttonline\" [class]=\"settings().class\">\n\t@for (button of settings().buttons; track i; let i = $index) {\n\t\t<xiri-button [button]=\"button\" [filterData]=\"filterData()\" [disabled]=\"disabled()\" (result)=\"result.emit( $event )\"></xiri-button>\n\t}\n</div>\n", styles: [".buttonline.right{text-align:right}.buttonline.right>xiri-button,.buttonline.right a{margin-left:var(--xiri-spacing-sm)}.buttonline.center{text-align:center}.buttonline.center button,.buttonline.center a,.buttonline.center xiri-button{margin-left:var(--xiri-spacing-sm);margin-right:var(--xiri-spacing-sm)}.buttonline.left button,.buttonline.left a,.buttonline.left xiri-button{margin-left:var(--xiri-spacing-sm);margin-right:var(--xiri-spacing-sm)}.buttonline.small{padding-bottom:0}.buttonline xiri-button+xiri-button{margin-left:var(--xiri-spacing-sm)}\n"], dependencies: [{ kind: "component", type: XiriButtonComponent, selector: "xiri-button", inputs: ["button", "disabled", "filterData", "url"], outputs: ["result"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriButtonlineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriButtonlineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-buttonline', imports: [
                         XiriButtonComponent
@@ -4597,10 +4761,10 @@ class XiriSessionStorageService extends XiriStorageServiceBase {
     constructor() {
         super(window.sessionStorage);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriSessionStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriSessionStorageService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriSessionStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriSessionStorageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriSessionStorageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriSessionStorageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -4613,10 +4777,10 @@ class XiriEmptyStateComponent {
         ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
         this.buttonResult = output();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriEmptyStateComponent, isStandalone: true, selector: "xiri-empty-state", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { buttonResult: "buttonResult" }, ngImport: i0, template: "<div class=\"empty-state\">\n\t@if (settings().icon) {\n\t\t<mat-icon [class]=\"settings().iconColor || 'gray'\">{{ settings().icon }}</mat-icon>\n\t}\n\t<div class=\"title\">{{ settings().title }}</div>\n\t@if (settings().description) {\n\t\t<div class=\"description\">{{ settings().description }}</div>\n\t}\n\t@if (settings().button) {\n\t\t<div class=\"action\">\n\t\t\t<xiri-button [button]=\"settings().button!\" (result)=\"buttonResult.emit($event)\"></xiri-button>\n\t\t</div>\n\t}\n</div>\n", styles: [".empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--xiri-spacing-xl) var(--xiri-spacing-md);text-align:center;animation:fadeInUp var(--xiri-duration-normal) var(--xiri-easing-decelerate)}.empty-state mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:var(--xiri-spacing-md);opacity:.6}.empty-state .title{font-size:1.1rem;font-weight:500;color:var(--on-surface, #1B1B1F);margin-bottom:var(--xiri-spacing-sm)}.empty-state .description{font-size:.875rem;color:var(--on-surface-variant, #44474F);max-width:400px;margin-bottom:var(--xiri-spacing-md)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: XiriButtonComponent, selector: "xiri-button", inputs: ["button", "disabled", "filterData", "url"], outputs: ["result"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriEmptyStateComponent, isStandalone: true, selector: "xiri-empty-state", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { buttonResult: "buttonResult" }, ngImport: i0, template: "<div class=\"empty-state\">\n\t@if (settings().icon) {\n\t\t<mat-icon [class]=\"settings().iconColor || 'gray'\">{{ settings().icon }}</mat-icon>\n\t}\n\t<div class=\"title\">{{ settings().title }}</div>\n\t@if (settings().description) {\n\t\t<div class=\"description\">{{ settings().description }}</div>\n\t}\n\t@if (settings().button) {\n\t\t<div class=\"action\">\n\t\t\t<xiri-button [button]=\"settings().button!\" (result)=\"buttonResult.emit($event)\"></xiri-button>\n\t\t</div>\n\t}\n</div>\n", styles: [".empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--xiri-spacing-xl) var(--xiri-spacing-md);text-align:center;animation:fadeInUp var(--xiri-duration-normal) var(--xiri-easing-decelerate)}.empty-state mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:var(--xiri-spacing-md);opacity:.6}.empty-state .title{font-size:1.1rem;font-weight:500;color:var(--on-surface, #1B1B1F);margin-bottom:var(--xiri-spacing-sm)}.empty-state .description{font-size:.875rem;color:var(--on-surface-variant, #44474F);max-width:400px;margin-bottom:var(--xiri-spacing-md)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: XiriButtonComponent, selector: "xiri-button", inputs: ["button", "disabled", "filterData", "url"], outputs: ["result"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriEmptyStateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriEmptyStateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-empty-state', imports: [MatIcon, XiriButtonComponent], template: "<div class=\"empty-state\">\n\t@if (settings().icon) {\n\t\t<mat-icon [class]=\"settings().iconColor || 'gray'\">{{ settings().icon }}</mat-icon>\n\t}\n\t<div class=\"title\">{{ settings().title }}</div>\n\t@if (settings().description) {\n\t\t<div class=\"description\">{{ settings().description }}</div>\n\t}\n\t@if (settings().button) {\n\t\t<div class=\"action\">\n\t\t\t<xiri-button [button]=\"settings().button!\" (result)=\"buttonResult.emit($event)\"></xiri-button>\n\t\t</div>\n\t}\n</div>\n", styles: [".empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--xiri-spacing-xl) var(--xiri-spacing-md);text-align:center;animation:fadeInUp var(--xiri-duration-normal) var(--xiri-easing-decelerate)}.empty-state mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:var(--xiri-spacing-md);opacity:.6}.empty-state .title{font-size:1.1rem;font-weight:500;color:var(--on-surface, #1B1B1F);margin-bottom:var(--xiri-spacing-sm)}.empty-state .description{font-size:.875rem;color:var(--on-surface-variant, #44474F);max-width:400px;margin-bottom:var(--xiri-spacing-md)}\n"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }], buttonResult: [{ type: i0.Output, args: ["buttonResult"] }] } });
@@ -5462,10 +5626,10 @@ class XiriTableComponent {
             return data[sortHeaderId];
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriTableComponent, isStandalone: true, selector: "xiri-table", inputs: { dyncomponent: { classPropertyName: "dyncomponent", publicName: "dyncomponent", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, filterData: { classPropertyName: "filterData", publicName: "filterData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickedRow: "clickedRow" }, providers: [XiriTableInlineEditService, XiriTableTreeService], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-card class=\"xiritablecard mat-mdc-elevation-specific mat-elevation-z3\">\n\t<div class=\"xiritable\" [class]=\"options.class\">\n\t\t<div class=\"table-full\">\n\t\t\t@if (bulkBarActive) {\n\t\t\t\t<div class=\"xiri-bulk-bar\" [class.sticky]=\"options.stickyBulkBar\" role=\"toolbar\"\n\t\t\t\t     aria-label=\"Massenaktionen\" data-testid=\"table-bulk-bar\">\n\t\t\t\t\t<button mat-icon-button (click)=\"cancelBulk()\" matTooltip=\"Auswahl aufheben\"\n\t\t\t\t\t        aria-label=\"Auswahl aufheben\">\n\t\t\t\t\t\t<mat-icon>close</mat-icon>\n\t\t\t\t\t</button>\n\t\t\t\t\t<span class=\"xiri-bulk-count\" aria-live=\"polite\" data-testid=\"table-bulk-count\">\n\t\t\t\t\t\t@if (bulkAllResults()) {\n\t\t\t\t\t\t\tAlle {{ bulkTotalCount() }} Ergebnisse ausgew\u00E4hlt\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t{{ selection.selected.length }} ausgew\u00E4hlt\n\t\t\t\t\t\t}\n\t\t\t\t\t</span>\n\t\t\t\t\t@if (canSelectAllResults()) {\n\t\t\t\t\t\t<button mat-button color=\"primary\" (click)=\"selectAllResults()\"\n\t\t\t\t\t\t        data-testid=\"table-bulk-selectall\">\n\t\t\t\t\t\t\tAlle {{ bulkTotalCount() }} Ergebnisse ausw\u00E4hlen\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t\t<span class=\"xiri-bulk-spacer\"></span>\n\t\t\t\t\t@for (button of options.bulkActions; track button) {\n\t\t\t\t\t\t@if (!button.hide) {\n\t\t\t\t\t\t\t<button mat-button [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t        (click)=\"bulkAction($event, button)\"\n\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\" [matTooltipDisabled]=\"!button.hint\">\n\t\t\t\t\t\t\t\t@if (button.icon) {\n\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t{{ button.text }}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div class=\"header\" [hidden]=\"bulkBarActive\">\n\t\t\t\t@if (options.reload) {\n\t\t\t\t\t<div class=\"buttons\">\n\t\t\t\t\t\t<button mat-icon-button (click)=\"reload()\" color=\"primary\" aria-label=\"Tabelle neu laden\">\n\t\t\t\t\t\t\t<mat-icon>autorenew</mat-icon>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (autoRefresh()) {\n\t\t\t\t\t<div class=\"autorefresh-indicator\" role=\"status\" aria-live=\"polite\"\n\t\t\t\t\t     matTooltip=\"Tabelle aktualisiert sich automatisch\">\n\t\t\t\t\t\t<mat-icon class=\"spin\">sync</mat-icon>\n\t\t\t\t\t\t<span>Auto-Refresh aktiv \u00B7 n\u00E4chste in {{ countdown() }}s</span>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (lastUpdated(); as updated) {\n\t\t\t\t\t<div class=\"lastupdated-indicator\" data-testid=\"table-last-updated\" role=\"status\" aria-live=\"polite\">\n\t\t\t\t\t\tStand {{ updated | date:'HH:mm' }}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (treeEnabled) {\n\t\t\t\t\t<div class=\"buttons xiri-tree-actions\">\n\t\t\t\t\t\t<button mat-icon-button (click)=\"expandAllNodes()\" color=\"primary\"\n\t\t\t\t\t\t        matTooltip=\"Alle ausklappen\" aria-label=\"Alle ausklappen\">\n\t\t\t\t\t\t\t<mat-icon>unfold_more</mat-icon>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<button mat-icon-button (click)=\"collapseAllNodes()\" color=\"primary\"\n\t\t\t\t\t\t        matTooltip=\"Alle einklappen\" aria-label=\"Alle einklappen\">\n\t\t\t\t\t\t\t<mat-icon>unfold_less</mat-icon>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"middle\" [class.hasButtons]=\"options.buttons\">{{ options.title }}</div>\n\t\t\t\t@if (options.buttons) {\n\t\t\t\t\t<xiri-buttonline [settings]=\"options.buttons\" (result)=\"buttonReturn($event)\"\n\t\t\t\t\t                 [filterData]=\"_filterData()\"></xiri-buttonline>\n\t\t\t\t}\n\t\t\t\t@if (options.search) {\n\t\t\t\t\t<xiri-search (changed)=\"searchDo($event)\" [placeholder]=\"''\" [text]=\"searchTextInit\"></xiri-search>\n\t\t\t\t}\n\t\t\t\t@if (options.saveInput) {\n\t\t\t\t\t<div class=\"buttons saveInput\">\n\t\t\t\t\t\t<button mat-raised-button (click)=\"saveInputData()\" color=\"primary\">\n\t\t\t\t\t\t\t{{ options.saveInput }}\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\t<div class=\"tableout-wrap\">\n\t\t\t<div class=\"tableout\" [class.is-loading]=\"loading()\" [style.max-height]=\"options.scrollHeight || null\">\n\t\t\t\t<table mat-table [dataSource]=\"dataSource\" matSort [style.min-width]=\"options.minWidth ?? '100%'\"\n\t\t\t\t       [class]=\"densityClass()\"\n\t\t\t\t       [class.borders]=\"options.borders\" [class.bordersHeader]=\"options.bordersHeader\"\n\t\t\t\t       [trackBy]=\"trackByRowId\">\n\n\t\t\t\t\t@for (column of displayedColumns; track column.id) {\n\t\t\t\t\t\t<ng-container [matColumnDef]=\"column.id\" [sticky]=\"column.sticky\">\n\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef mat-sort-header=\"{{ column.id }}\" [disabled]=\"!column.sort || !options.sort\" disableClear\n\t\t\t\t\t\t\t    [style.width]=\"column.width\" [style.min-width]=\"column.minWidth\"\n\t\t\t\t\t\t\t    [class]=\"column.display + ' ' + (column.header || '')\"> {{ column.name }}\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t@switch (column.format) {\n\t\t\t\t\t\t\t\t@case ('buttons') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@for (button of column.buttons; track button; let i = $index) {\n\t\t\t\t\t\t\t\t\t\t\t@if (row[column.id][i] !== false && !button.hide) {\n\t\t\t\t\t\t\t\t\t\t\t\t@switch (button.action) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('href') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('download') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" [disabled]=\"false\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  (click)=\"openDialog( $event, button, column.id, i, row)\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('api') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" [disabled]=\"false\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  (click)=\"apiCall( $event, row[column.id][ i ] )\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('save') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" (click)=\"saveCall( $event, button, row, row[column.id][ i ] )\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  [disabled]=\"!saveCallCheck( button, row )\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon class=\"btnicon\" [class]=\"button.color || 'primary'\" [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!button.hint\">{{ button.icon }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('menu') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button mat-icon-button [matMenuTriggerFor]=\"menuRef\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [class]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [attr.aria-label]=\"button.hint || button.text\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        (click)=\"$event.stopPropagation()\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-menu #menuRef=\"matMenu\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@for (item of button.menuItems; track item; let j = $index) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (row[column.id][i][j] !== false) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@switch (item.action) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@let menuUrl = row[column.id][i][j] | xiriUrl;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a mat-menu-item [routerLink]=\"menuUrl?.path\" [queryParams]=\"menuUrl?.queryParams\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('href') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a mat-menu-item [href]=\"row[column.id][i][j]\" target=\"_blank\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button mat-menu-item (click)=\"openMenuDialog($event, item, column.id, i, j, row)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-menu>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@if (column.icons?.[ $any(row[ column.id ]) ]; as icon) {\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"icon[ 'color' ] || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltip]=\"icon[ 'hint' ] || '' \"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!icon[ 'hint' ]\">{{ icon['icon'] }}\n\t\t\t\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('html') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [innerHtml]=\"row[column.id] | safeHtml\" [class]=\"column.display\"></td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\"\n\t\t\t\t\t\t\t\t\t    [class.xiri-tree-td]=\"treeEnabled && column.id === treeColumnId\">\n\t\t\t\t\t\t\t\t\t\t@if (treeEnabled && column.id === treeColumnId) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treePrefix; context: { $implicit: row }\"></ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (row[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t\t\t\t@let cellUrl = row[column.id + 'Link'] | xiriUrl;\n\t\t\t\t\t\t\t\t\t\t\t<a [routerLink]=\"cellUrl?.path\" [queryParams]=\"cellUrl?.queryParams\" class=\"tablelink\">{{ row[column.id] }}</a>\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t<span>{{ row[column.id] }}</span>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (treeEnabled && column.id === treeColumnId) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treeSuffix; context: { $implicit: row }\"></ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('input') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t<mat-form-field subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t<input matInput\n\t\t\t\t\t\t\t\t\t\t\t       [type]=\"column.inputType || 'text'\"\n\t\t\t\t\t\t\t\t\t\t\t       [(ngModel)]=\"row[ column.id ]\"\n\t\t\t\t\t\t\t\t\t\t\t       [lang]=\"column.inputLang || ''\"\n\t\t\t\t\t\t\t\t\t\t\t       [required]=\"column.inputRequired || true\"\n\t\t\t\t\t\t\t\t\t\t\t       (paste)=\"pasteInput( $event, row, column )\">\n\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('text2') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t<div>{{ row[column.id][0] }}</div>\n\t\t\t\t\t\t\t\t\t\t<div>{{ row[column.id][1] }}</div>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('textn') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@for (line of row[column.id]; track $index) {\n\t\t\t\t\t\t\t\t\t\t\t<div>{{ line }}</div>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('number') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ row[column.id][0] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('chips') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@if (isSaving(row, column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t\t\t\t\t\t} @else if (column.editable && options.editUrl && isEditing(row, column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t@if (editableOptionsLoading()) {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-form-field class=\"xiri-inline-edit\" subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-select multiple\n\t\t\t\t\t\t\t\t\t\t\t\t\t            [ngModel]=\"editingChipsValues()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t            (selectionChange)=\"onChipsSelectionChange(row, column, $event.value)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t            (keydown)=\"onInlineEditKeydown($event, row, column)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t            (openedChange)=\"!$event && saveInlineEdit(row, column)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (column.editableOptionsSearch || column.editableSearchUrl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ngx-mat-select-search [formControl]=\"inlineSearchControl\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                       [searching]=\"inlineSearching()\"></ngx-mat-select-search>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t@for (opt of getEditableOptions(column); track opt.value) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-select>\n\t\t\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} @else if (column.editable && options.editUrl) {\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"xiri-editable-cell\" role=\"button\" tabindex=\"0\"\n\t\t\t\t\t\t\t\t\t\t\t     (click)=\"startInlineEdit(row, column); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t     (keydown.enter)=\"startInlineEdit(row, column); $event.stopPropagation()\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"xiri-chips-display\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t@for (chip of row[column.id]; track chip.label) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"xiri-chip-display\" [class]=\"chip.color || ''\">{{ chip.label }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon class=\"xiri-edit-icon\">edit</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"xiri-chips-display\">\n\t\t\t\t\t\t\t\t\t\t\t\t@for (chip of row[column.id]; track chip.label) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"xiri-chip-display\" [class]=\"chip.color || ''\">{{ chip.label }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@default {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\"\n\t\t\t\t\t\t\t\t\t    [class.xiri-tree-td]=\"treeEnabled && column.id === treeColumnId\">\n\t\t\t\t\t\t\t\t\t\t@if (treeEnabled && column.id === treeColumnId) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treePrefix; context: { $implicit: row }\"></ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (isSaving(row, column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t\t\t\t\t\t} @else if (column.editable && options.editUrl && isEditing(row, column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t@if (column.editableOptions || column.editableOptionsUrl || column.editableSearchUrl) {\n\t\t\t\t\t\t\t\t\t\t\t\t@if (editableOptionsLoading()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-form-field class=\"xiri-inline-edit\" subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-select [(ngModel)]=\"row[column.id]\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t            (keydown)=\"onInlineEditKeydown($event, row, column)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t            (openedChange)=\"!$event && saveInlineEdit(row, column)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (column.editableOptionsSearch || column.editableSearchUrl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ngx-mat-select-search [formControl]=\"inlineSearchControl\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                       [searching]=\"inlineSearching()\"></ngx-mat-select-search>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@for (opt of getEditableOptions(column); track opt.value) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-select>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-form-field class=\"xiri-inline-edit\" subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<input matInput\n\t\t\t\t\t\t\t\t\t\t\t\t\t       [(ngModel)]=\"row[column.id]\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t       (blur)=\"saveInlineEdit(row, column)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t       (keydown)=\"onInlineEditKeydown($event, row, column)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button matSuffix mat-icon-button class=\"xiri-inline-edit-confirm\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t        (mousedown)=\"$event.preventDefault(); saveInlineEdit(row, column)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t        aria-label=\"\u00C4nderung speichern\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t        tabindex=\"-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon>check</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} @else if (column.editable && options.editUrl) {\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"xiri-editable-cell\" role=\"button\" tabindex=\"0\"\n\t\t\t\t\t\t\t\t\t\t\t      (click)=\"startInlineEdit(row, column); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t      (keydown.enter)=\"startInlineEdit(row, column); $event.stopPropagation()\">\n\t\t\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ row[column.id] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon class=\"xiri-edit-icon\">edit</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ row[column.id] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (treeEnabled && column.id === treeColumnId) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treeSuffix; context: { $implicit: row }\"></ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t<td mat-footer-cell *matFooterCellDef [hidden]=\"!options.footer\"\n\t\t\t\t\t\t\t    [style.width]=\"column.width\" [style.min-width]=\"column.minWidth\" class=\"bottomrow\"\n\t\t\t\t\t\t\t    [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t@if ( footer[ column.id ] ) {\n\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ footer[ column.id ] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t\t@if (showSelectColumn) {\n\t\t\t\t\t\t<ng-container matColumnDef=\"select\" [sticky]=\"true\">\n\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef [style.width]=\"'65px'\">\n\t\t\t\t\t\t\t\t<mat-checkbox (change)=\"$event ? masterToggle() : null\"\n\t\t\t\t\t\t\t\t              [checked]=\"selection.hasValue() && isAllSelected()\"\n\t\t\t\t\t\t\t\t              [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\">\n\t\t\t\t\t\t\t\t@if (isSelectable(row)) {\n\t\t\t\t\t\t\t\t\t<mat-checkbox\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t(change)=\"$event ? toggleRow(row) : null\"\n\t\t\t\t\t\t\t\t\t\t\t[checked]=\"selection.isSelected(row)\">\n\t\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t<td mat-footer-cell *matFooterCellDef [style.width]=\"'65px'\" class=\"bottomrow\" [hidden]=\"!options.footer\">\n\t\t\t\t\t\t\t\t<mat-checkbox (change)=\"$event ? masterToggle() : null\"\n\t\t\t\t\t\t\t\t              [checked]=\"selection.hasValue() && isAllSelected()\"\n\t\t\t\t\t\t\t\t              [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\n\t\t\t\t\t@if (extraHeaderFields.length > 0) {\n\t\t\t\t\t\t@for (column of extraHeaderFields; track column.id) {\n\t\t\t\t\t\t\t<ng-container matColumnDef=\"{{ column.id }}\" [sticky]=\"column.sticky\">\n\t\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef [attr.colspan]=\"column.headerSpan\">{{ column.name }}</th>\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<tr mat-header-row *matHeaderRowDef=\"extraHeaders; sticky: true\" [class.dense]=\"options.dense\"></tr>\n\t\t\t\t\t}\n\n\t\t\t\t\t<tr mat-header-row *matHeaderRowDef=\"columnsToDisplay; sticky: true\" [class.dense]=\"options.dense\"></tr>\n\t\t\t\t\t<tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\" (click)=\"clicked(row)\"\n\t\t\t\t\t    [class.xiri-tree-dimmed]=\"treeEnabled && row._tree?.dimmed\"></tr>\n\t\t\t\t\t<tr mat-footer-row *matFooterRowDef=\"columnsToDisplay; sticky: true\" [hidden]=\"!options.footer\"></tr>\n\t\t\t\t</table>\n\t\t\t</div>\n\t\t\t<div class=\"loader\" [hidden]=\"!loading()\" [class.has-bottombar]=\"(options.select || options.pagination) && !options.footer\">\n\t\t\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t@if (!loading()) {\n\t\t\t\t@if (!errorMsg && dataSource.filteredData.length === 0) {\n\t\t\t\t\t@if (options.emptyState) {\n\t\t\t\t\t\t<xiri-empty-state [settings]=\"options.emptyState\"></xiri-empty-state>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<div class=\"nodata\">{{ options.textNoData }}</div>\n\t\t\t\t\t}\n\t\t\t\t} @else if (errorMsg) {\n\t\t\t\t\t<div class=\"alert alert-danger\">\n\t\t\t\t\t\t<span>{{ errorMsg }}</span>\n\t\t\t\t\t\t<button mat-button type=\"button\" data-testid=\"table-retry\" (click)=\"reload()\">\n\t\t\t\t\t\t\t<mat-icon>autorenew</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}\n\n\t\t\t<div class=\"xrow xsmall\" [class.bottomrow]=\"(options.select || options.pagination) && !options.footer\">\n\t\t\t\t@if (options.select) {\n\t\t\t\t\t<div class=\"xcol xcol-md-2 select-buttons\">\n\t\t\t\t\t\t@for (button of options.selectButtons; track button) {\n\t\t\t\t\t\t\t@if (!button.hide) {\n\t\t\t\t\t\t\t\t@switch (button.action) {\n\t\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t\t        (click)=\"openDialogSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [attr.aria-label]=\"button.hint || button.text\">\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t@case ('api') {\n\t\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t\t        (click)=\"apiCallSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [attr.aria-label]=\"button.hint || button.text\">\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t@case ('download') {\n\t\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t\t        (click)=\"downloadSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [attr.aria-label]=\"button.hint || button.text\">\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"xcol xcol-right-md-10\">\n\t\t\t\t\t<mat-paginator [hidden]=\"!options.pagination\" [pageSizeOptions]=\"options.pageSizes || []\" showFirstLastButtons=\"true\"></mat-paginator>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</mat-card>\n\n@if (dynData.data) {\n\t<ng-container *ngTemplateOutlet=\"dyncomponent(); context: { $implicit: dynData }\"></ng-container>\n}\n\n<!-- Tree mode: indent + expand/collapse arrow rendered before the tree column's content -->\n<ng-template #treePrefix let-row>\n\t<span class=\"xiri-tree-prefix\" [style.padding-left.px]=\"(row._tree?.level || 0) * 24\">\n\t\t@if (row._tree?.hasChildren) {\n\t\t\t<button type=\"button\" class=\"xiri-tree-iconbtn xiri-tree-toggle\" (click)=\"toggleNode($event, row)\"\n\t\t\t        tabindex=\"-1\" [attr.aria-label]=\"row._tree.expanded ? 'einklappen' : 'ausklappen'\">\n\t\t\t\t<mat-icon color=\"primary\">{{ row._tree.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n\t\t\t</button>\n\t\t} @else {\n\t\t\t<span class=\"xiri-tree-spacer\"></span>\n\t\t}\n\t</span>\n</ng-template>\n\n<!-- Tree mode: child-count badge (when collapsed) + optional \"+ sub\" button after the content -->\n<ng-template #treeSuffix let-row>\n\t@if (treeShowCounts && row._tree && !row._tree.expanded && row._tree.childCount > 0) {\n\t\t<span class=\"xiri-tree-count\">({{ row._tree.childCount }})</span>\n\t}\n\t@if (treeHasAddSub && treeCanAddSub(row)) {\n\t\t<button type=\"button\" class=\"xiri-tree-iconbtn xiri-tree-addsub\" (click)=\"addSub($event, row)\"\n\t\t        tabindex=\"-1\" matTooltip=\"Sub-Eintrag hinzuf\u00FCgen\" aria-label=\"Sub-Eintrag hinzuf\u00FCgen\">\n\t\t\t<mat-icon color=\"primary\">add</mat-icon>\n\t\t</button>\n\t}\n</ng-template>\n", styles: ["mat-card.xiritablecard{padding:0;margin-bottom:var(--xiri-spacing-xl)}.xiritable{width:100%;overflow:auto}.xiritable.canbreak{word-break:break-all}.xiritable .table-full{display:inline-block;width:100%}.xiritable .table-full .xiri-bulk-bar{display:flex;align-items:center;gap:var(--xiri-spacing-sm);padding:var(--xiri-spacing-xs) var(--xiri-spacing-sm);background:var(--secondary-container, var(--mat-sys-secondary-container, #e0e0e0));color:var(--on-secondary-container, var(--mat-sys-on-secondary-container, inherit));border-radius:var(--xiri-radius-sm, 4px);margin-bottom:var(--xiri-spacing-xs)}.xiritable .table-full .xiri-bulk-bar.sticky{position:sticky;top:0;z-index:5}.xiritable .table-full .xiri-bulk-bar .xiri-bulk-count{font-weight:500}.xiritable .table-full .xiri-bulk-bar .xiri-bulk-spacer{flex:1 1 auto}.xiritable .table-full .tableout-wrap{position:relative}.xiritable .table-full .tableout{max-height:60vh;overflow-y:auto;width:100%;min-width:100%;max-width:100%}.xiritable .table-full .tableout.is-loading{min-height:100px}.xiritable .table-full .alert{padding:var(--xiri-spacing-md)}.xiritable .table-full mat-paginator{--mat-paginator-container-background-color: transparent;--mat-paginator-container-size: 51px;--mat-form-field-container-height: 32px;--mat-form-field-container-vertical-padding: 4px}.xiritable .table-full .bottomrow{border-top:1px solid var(--outline-variant, #C2C7CF)}.xiritable .table-full div.bottomrow{background-color:var(--surface-container, #F3F3F6);border-bottom-left-radius:var(--mat-card-elevated-container-shape, 12px);border-bottom-right-radius:var(--mat-card-elevated-container-shape, 12px)}.xiritable .header{background-color:var(--surface-container, #F3F3F6);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;min-height:51px;padding:0 16px;border-bottom:1px solid var(--outline-variant, #C2C7CF);border-top-left-radius:var(--mat-card-elevated-container-shape, 12px);border-top-right-radius:var(--mat-card-elevated-container-shape, 12px)}.xiritable .header .buttons{padding:0 7px 0 .5rem;margin-left:-16px}.xiritable .header .buttons button{z-index:200}.xiritable .header .buttons.saveInput{padding-left:21px}.xiritable .header .middle{flex-grow:1;font-size:var(--xiri-font-size-title);display:flex;padding:0}.xiritable .header xiri-buttonline{padding:0 0 0 16px}.xiritable .header .autorefresh-indicator{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;font-size:var(--xiri-font-size-small, .8rem);color:var(--primary, var(--mat-sys-primary, #006398))}.xiritable .header .autorefresh-indicator mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.xiritable .header .autorefresh-indicator mat-icon.spin{animation:xiri-autorefresh-spin 1.5s linear infinite}.xiritable .header .lastupdated-indicator{display:inline-flex;align-items:center;padding:2px 8px;font-size:var(--xiri-font-size-small, .8rem);color:var(--on-surface-variant, #44474F);opacity:.75}@keyframes xiri-autorefresh-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.xiritable table{width:100%}.xiritable table.density-regular{--mat-table-header-container-height: 42px;--mat-table-footer-container-height: 42px;--mat-table-row-item-container-height: 42px}.xiritable table.density-compact{--mat-table-header-container-height: 32px;--mat-table-footer-container-height: 32px;--mat-table-row-item-container-height: 32px}.xiritable table.density-relaxed{--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 52px;--mat-table-row-item-container-height: 52px}.xiritable table th.mat-mdc-header-cell:not(:first-of-type),.xiritable table td.mat-mdc-cell:not(:first-of-type),.xiritable table td.mat-mdc-footer-cell:not(:first-of-type){padding-left:5px}.xiritable table th.mat-mdc-header-cell:not(:last-of-type),.xiritable table td.mat-mdc-cell:not(:last-of-type),.xiritable table td.mat-mdc-footer-cell:not(:last-of-type){padding-right:7px}.xiritable table tr.mat-mdc-row{transition:background-color var(--xiri-duration-fast) var(--xiri-easing-standard)}.xiritable table tr.mat-mdc-row:hover{background:var(--surface-variant, #DEE3EB)}.xiritable table .tablelink{text-decoration:underline}.xiritable table td.buttons xiri-button,.xiritable table td.buttons xiri-buttonstyle,.xiritable table td.buttons .btnicon{margin-right:8px}.xiritable table td.buttons xiri-button:last-child,.xiritable table td.buttons xiri-buttonstyle:last-child,.xiritable table td.buttons .btnicon:last-child{margin-right:0}.xiritable table td.number,.xiritable table th.number,.xiritable table td.mat-mdc-footer-cell.number{text-align:right;font-variant-numeric:tabular-nums}.xiritable table td.right,.xiritable table td.align-right,.xiritable table th.right,.xiritable table th.align-right{text-align:right}.xiritable table td.center,.xiritable table td.align-center,.xiritable table th.center,.xiritable table th.align-center{text-align:center}.xiritable table td.left,.xiritable table td.align-left,.xiritable table th.left,.xiritable table th.align-left{text-align:left}.xiritable table td.vertical,.xiritable table th.vertical{writing-mode:sideways-rl;text-orientation:sideways}.xiritable table td.vertical div,.xiritable table th.vertical div{max-height:6rem}.xiritable table td.sideways,.xiritable table th.sideways{writing-mode:sideways-lr;text-orientation:sideways}.xiritable table td.sideways div,.xiritable table th.sideways div{max-height:6rem}.xiritable table td.upright,.xiritable table th.upright{writing-mode:vertical-rl;text-orientation:upright}.xiritable table.borders td+td{border-left:1px solid var(--outline-variant, #C2C7CF)}.xiritable table.bordersHeader th+th{border-left:1px solid var(--outline-variant, #C2C7CF)}.xiritable table td.mat-mdc-cell mat-form-field{--mat-form-field-container-height: 40px;--mat-form-field-container-vertical-padding: 8px}.xiritable .xiri-editable-cell{cursor:pointer;display:inline-flex;align-items:center;border-radius:var(--xiri-radius-xs);padding:2px 4px}.xiritable .xiri-editable-cell:hover,.xiritable .xiri-editable-cell:focus-visible{background-color:var(--surface-variant, #DEE3EB)}.xiritable .xiri-editable-cell:hover .xiri-edit-icon,.xiritable .xiri-editable-cell:focus-visible .xiri-edit-icon{opacity:1}.xiritable .xiri-edit-icon{opacity:0;font-size:14px;width:14px;height:14px;margin-left:4px;color:var(--on-surface-variant, #44474F);transition:opacity var(--xiri-duration-fast) var(--xiri-easing-standard)}.xiritable .xiri-inline-edit{--mat-form-field-container-height: 36px;--mat-form-field-container-vertical-padding: 6px;width:100%}.xiritable .xiri-inline-edit-confirm{--mdc-icon-button-icon-size: 18px;--mdc-icon-button-state-layer-size: 28px;width:28px;height:28px;padding:0;margin-right:5px;color:var(--primary, #1976d2);display:inline-flex;align-items:center;justify-content:center}.xiritable .xiri-inline-edit-confirm mat-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:18px}.xiritable .mat-column-select{overflow:initial}.xiritable .select-buttons{padding:.3rem .8rem;display:flex;align-items:center}.xiritable .select-buttons button{margin-right:.5rem}.xiritable .xiri-cell-saved{animation:pulse .5s var(--xiri-easing-standard);border-radius:var(--xiri-radius-xs)}.xiritable .nodata{padding:.5rem 1.5rem;font-size:var(--xiri-font-size-label);background-color:var(--surface, #FFFFFF);animation:fadeInUp var(--xiri-duration-normal) var(--xiri-easing-decelerate)}.xiritable .loader{position:absolute;top:0;left:0;width:100%;bottom:0;display:flex;justify-content:center;align-items:center;background-color:var(--ripple, rgba(206, 212, 218, .5));z-index:200;border-bottom-left-radius:var(--mat-card-elevated-container-shape, 12px);border-bottom-right-radius:var(--mat-card-elevated-container-shape, 12px);animation:fadeIn var(--xiri-duration-fast) var(--xiri-easing-standard)}.xiritable .loader.has-bottombar{border-bottom-left-radius:0;border-bottom-right-radius:0}xiri-dyncomponent{margin-bottom:var(--xiri-spacing-xl)}[hidden]{display:none!important}.xiri-tree-actions{display:flex;align-items:center}td.xiri-tree-td{white-space:nowrap}td.xiri-tree-td .xiri-tree-prefix{display:inline-flex;align-items:center;vertical-align:middle}td.xiri-tree-td .xiri-tree-iconbtn{appearance:none;border:0;background:transparent;padding:0;margin:0;flex:0 0 24px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent}td.xiri-tree-td .xiri-tree-iconbtn .mat-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:20px;line-height:20px;margin:0}td.xiri-tree-td .xiri-tree-iconbtn:hover{background:#0000000f}td.xiri-tree-td .xiri-tree-iconbtn:focus-visible{outline:2px solid var(--primary, var(--mat-sys-primary, currentColor));outline-offset:-2px}td.xiri-tree-td .xiri-tree-spacer{width:24px;height:24px;flex:0 0 24px}td.xiri-tree-td .xiri-tree-count{margin-left:var(--xiri-spacing-xs, 4px);opacity:.6;font-size:.85em}td.xiri-tree-td .xiri-tree-addsub{margin-left:var(--xiri-spacing-xs, 4px);opacity:0;transition:opacity .15s ease-in-out}tr.mat-mdc-row:hover td.xiri-tree-td .xiri-tree-addsub,td.xiri-tree-td .xiri-tree-addsub:focus-visible{opacity:1}tr.xiri-tree-dimmed{opacity:.6}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { 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"] }, { kind: "component", type: XiriButtonlineComponent, selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "component", type: XiriSearchComponent, selector: "xiri-search", inputs: ["placeholder", "open", "reset", "escape", "focus", "text"], outputs: ["changed"] }, { 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: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: XiriButtonstyleComponent, selector: "xiri-buttonstyle", inputs: ["button", "disabled", "loading", "countdown", "pollText"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: "ngmodule", type: FormsModule }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "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: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XiriButtonComponent, selector: "xiri-button", inputs: ["button", "disabled", "filterData", "url"], outputs: ["result"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { 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$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: XiriEmptyStateComponent, selector: "xiri-empty-state", inputs: ["settings"], outputs: ["buttonResult"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }, { kind: "pipe", type: XiriUrlPipe, name: "xiriUrl" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriTableComponent, isStandalone: true, selector: "xiri-table", inputs: { dyncomponent: { classPropertyName: "dyncomponent", publicName: "dyncomponent", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, filterData: { classPropertyName: "filterData", publicName: "filterData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickedRow: "clickedRow" }, providers: [XiriTableInlineEditService, XiriTableTreeService], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-card class=\"xiritablecard mat-mdc-elevation-specific mat-elevation-z3\">\n\t<div class=\"xiritable\" [class]=\"options.class\">\n\t\t<div class=\"table-full\">\n\t\t\t@if (bulkBarActive) {\n\t\t\t\t<div class=\"xiri-bulk-bar\" [class.sticky]=\"options.stickyBulkBar\" role=\"toolbar\"\n\t\t\t\t     aria-label=\"Massenaktionen\" data-testid=\"table-bulk-bar\">\n\t\t\t\t\t<button mat-icon-button (click)=\"cancelBulk()\" matTooltip=\"Auswahl aufheben\"\n\t\t\t\t\t        aria-label=\"Auswahl aufheben\">\n\t\t\t\t\t\t<mat-icon>close</mat-icon>\n\t\t\t\t\t</button>\n\t\t\t\t\t<span class=\"xiri-bulk-count\" aria-live=\"polite\" data-testid=\"table-bulk-count\">\n\t\t\t\t\t\t@if (bulkAllResults()) {\n\t\t\t\t\t\t\tAlle {{ bulkTotalCount() }} Ergebnisse ausgew\u00E4hlt\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t{{ selection.selected.length }} ausgew\u00E4hlt\n\t\t\t\t\t\t}\n\t\t\t\t\t</span>\n\t\t\t\t\t@if (canSelectAllResults()) {\n\t\t\t\t\t\t<button mat-button color=\"primary\" (click)=\"selectAllResults()\"\n\t\t\t\t\t\t        data-testid=\"table-bulk-selectall\">\n\t\t\t\t\t\t\tAlle {{ bulkTotalCount() }} Ergebnisse ausw\u00E4hlen\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t\t<span class=\"xiri-bulk-spacer\"></span>\n\t\t\t\t\t@for (button of options.bulkActions; track button) {\n\t\t\t\t\t\t@if (!button.hide) {\n\t\t\t\t\t\t\t<button mat-button [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t        (click)=\"bulkAction($event, button)\"\n\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\" [matTooltipDisabled]=\"!button.hint\">\n\t\t\t\t\t\t\t\t@if (button.icon) {\n\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t{{ button.text }}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div class=\"header\" [hidden]=\"bulkBarActive\">\n\t\t\t\t@if (options.reload) {\n\t\t\t\t\t<div class=\"buttons\">\n\t\t\t\t\t\t<button mat-icon-button (click)=\"reload()\" color=\"primary\" aria-label=\"Tabelle neu laden\">\n\t\t\t\t\t\t\t<mat-icon>autorenew</mat-icon>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (autoRefresh()) {\n\t\t\t\t\t<div class=\"autorefresh-indicator\" role=\"status\" aria-live=\"polite\"\n\t\t\t\t\t     matTooltip=\"Tabelle aktualisiert sich automatisch\">\n\t\t\t\t\t\t<mat-icon class=\"spin\">sync</mat-icon>\n\t\t\t\t\t\t<span>Auto-Refresh aktiv \u00B7 n\u00E4chste in {{ countdown() }}s</span>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (lastUpdated(); as updated) {\n\t\t\t\t\t<div class=\"lastupdated-indicator\" data-testid=\"table-last-updated\" role=\"status\" aria-live=\"polite\">\n\t\t\t\t\t\tStand {{ updated | date:'HH:mm' }}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (treeEnabled) {\n\t\t\t\t\t<div class=\"buttons xiri-tree-actions\">\n\t\t\t\t\t\t<button mat-icon-button (click)=\"expandAllNodes()\" color=\"primary\"\n\t\t\t\t\t\t        matTooltip=\"Alle ausklappen\" aria-label=\"Alle ausklappen\">\n\t\t\t\t\t\t\t<mat-icon>unfold_more</mat-icon>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<button mat-icon-button (click)=\"collapseAllNodes()\" color=\"primary\"\n\t\t\t\t\t\t        matTooltip=\"Alle einklappen\" aria-label=\"Alle einklappen\">\n\t\t\t\t\t\t\t<mat-icon>unfold_less</mat-icon>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"middle\" [class.hasButtons]=\"options.buttons\">{{ options.title }}</div>\n\t\t\t\t@if (options.buttons) {\n\t\t\t\t\t<xiri-buttonline [settings]=\"options.buttons\" (result)=\"buttonReturn($event)\"\n\t\t\t\t\t                 [filterData]=\"_filterData()\"></xiri-buttonline>\n\t\t\t\t}\n\t\t\t\t@if (options.search) {\n\t\t\t\t\t<xiri-search (changed)=\"searchDo($event)\" [placeholder]=\"''\" [text]=\"searchTextInit\"></xiri-search>\n\t\t\t\t}\n\t\t\t\t@if (options.saveInput) {\n\t\t\t\t\t<div class=\"buttons saveInput\">\n\t\t\t\t\t\t<button mat-raised-button (click)=\"saveInputData()\" color=\"primary\">\n\t\t\t\t\t\t\t{{ options.saveInput }}\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\t<div class=\"tableout-wrap\">\n\t\t\t<div class=\"tableout\" [class.is-loading]=\"loading()\" [style.max-height]=\"options.scrollHeight || null\">\n\t\t\t\t<table mat-table [dataSource]=\"dataSource\" matSort [style.min-width]=\"options.minWidth ?? '100%'\"\n\t\t\t\t       [class]=\"densityClass()\"\n\t\t\t\t       [class.borders]=\"options.borders\" [class.bordersHeader]=\"options.bordersHeader\"\n\t\t\t\t       [trackBy]=\"trackByRowId\">\n\n\t\t\t\t\t@for (column of displayedColumns; track column.id) {\n\t\t\t\t\t\t<ng-container [matColumnDef]=\"column.id\" [sticky]=\"column.sticky\">\n\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef mat-sort-header=\"{{ column.id }}\" [disabled]=\"!column.sort || !options.sort\" disableClear\n\t\t\t\t\t\t\t    [style.width]=\"column.width\" [style.min-width]=\"column.minWidth\"\n\t\t\t\t\t\t\t    [class]=\"column.display + ' ' + (column.header || '')\"> {{ column.name }}\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t@switch (column.format) {\n\t\t\t\t\t\t\t\t@case ('buttons') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@for (button of column.buttons; track button; let i = $index) {\n\t\t\t\t\t\t\t\t\t\t\t@if (row[column.id][i] !== false && !button.hide) {\n\t\t\t\t\t\t\t\t\t\t\t\t@switch (button.action) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('href') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('download') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" [disabled]=\"false\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  (click)=\"openDialog( $event, button, column.id, i, row)\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('api') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" [disabled]=\"false\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  (click)=\"apiCall( $event, row[column.id][ i ] )\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('save') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" (click)=\"saveCall( $event, button, row, row[column.id][ i ] )\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  [disabled]=\"!saveCallCheck( button, row )\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon class=\"btnicon\" [class]=\"button.color || 'primary'\" [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!button.hint\">{{ button.icon }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('menu') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button mat-icon-button [matMenuTriggerFor]=\"menuRef\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [class]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [attr.aria-label]=\"button.hint || button.text\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        (click)=\"$event.stopPropagation()\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-menu #menuRef=\"matMenu\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@for (item of button.menuItems; track item; let j = $index) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (row[column.id][i][j] !== false) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@switch (item.action) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@let menuUrl = row[column.id][i][j] | xiriUrl;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a mat-menu-item [routerLink]=\"menuUrl?.path\" [queryParams]=\"menuUrl?.queryParams\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('href') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a mat-menu-item [href]=\"row[column.id][i][j]\" target=\"_blank\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button mat-menu-item (click)=\"openMenuDialog($event, item, column.id, i, j, row)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-menu>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@if (column.icons?.[ $any(row[ column.id ]) ]; as icon) {\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"icon[ 'color' ] || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltip]=\"icon[ 'hint' ] || '' \"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!icon[ 'hint' ]\">{{ icon['icon'] }}\n\t\t\t\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('html') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [innerHtml]=\"row[column.id] | safeHtml\" [class]=\"column.display\"></td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\"\n\t\t\t\t\t\t\t\t\t    [class.xiri-tree-td]=\"treeEnabled && column.id === treeColumnId\">\n\t\t\t\t\t\t\t\t\t\t@if (treeEnabled && column.id === treeColumnId) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treePrefix; context: { $implicit: row }\"></ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (row[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t\t\t\t@let cellUrl = row[column.id + 'Link'] | xiriUrl;\n\t\t\t\t\t\t\t\t\t\t\t<a [routerLink]=\"cellUrl?.path\" [queryParams]=\"cellUrl?.queryParams\" class=\"tablelink\">{{ row[column.id] }}</a>\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t<span>{{ row[column.id] }}</span>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (treeEnabled && column.id === treeColumnId) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treeSuffix; context: { $implicit: row }\"></ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('input') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t<mat-form-field subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t<input matInput\n\t\t\t\t\t\t\t\t\t\t\t       [type]=\"column.inputType || 'text'\"\n\t\t\t\t\t\t\t\t\t\t\t       [(ngModel)]=\"row[ column.id ]\"\n\t\t\t\t\t\t\t\t\t\t\t       [lang]=\"column.inputLang || ''\"\n\t\t\t\t\t\t\t\t\t\t\t       [required]=\"column.inputRequired || true\"\n\t\t\t\t\t\t\t\t\t\t\t       (paste)=\"pasteInput( $event, row, column )\">\n\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('text2') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t<div>{{ row[column.id][0] }}</div>\n\t\t\t\t\t\t\t\t\t\t<div>{{ row[column.id][1] }}</div>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('textn') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@for (line of row[column.id]; track $index) {\n\t\t\t\t\t\t\t\t\t\t\t<div>{{ line }}</div>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('number') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ row[column.id][0] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('chips') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@if (isSaving(row, column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t\t\t\t\t\t} @else if (column.editable && options.editUrl && isEditing(row, column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t@if (editableOptionsLoading()) {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-form-field class=\"xiri-inline-edit\" subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-select multiple\n\t\t\t\t\t\t\t\t\t\t\t\t\t            [ngModel]=\"editingChipsValues()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t            (selectionChange)=\"onChipsSelectionChange(row, column, $event.value)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t            (keydown)=\"onInlineEditKeydown($event, row, column)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t            (openedChange)=\"!$event && saveInlineEdit(row, column)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (column.editableOptionsSearch || column.editableSearchUrl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ngx-mat-select-search [formControl]=\"inlineSearchControl\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                       [searching]=\"inlineSearching()\"></ngx-mat-select-search>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t@for (opt of getEditableOptions(column); track opt.value) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-select>\n\t\t\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} @else if (column.editable && options.editUrl) {\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"xiri-editable-cell\" role=\"button\" tabindex=\"0\"\n\t\t\t\t\t\t\t\t\t\t\t     (click)=\"startInlineEdit(row, column); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t     (keydown.enter)=\"startInlineEdit(row, column); $event.stopPropagation()\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"xiri-chips-display\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t@for (chip of row[column.id]; track chip.label) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"xiri-chip-display\" [class]=\"chip.color || ''\">{{ chip.label }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon class=\"xiri-edit-icon\">edit</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"xiri-chips-display\">\n\t\t\t\t\t\t\t\t\t\t\t\t@for (chip of row[column.id]; track chip.label) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"xiri-chip-display\" [class]=\"chip.color || ''\">{{ chip.label }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@default {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\"\n\t\t\t\t\t\t\t\t\t    [class.xiri-tree-td]=\"treeEnabled && column.id === treeColumnId\">\n\t\t\t\t\t\t\t\t\t\t@if (treeEnabled && column.id === treeColumnId) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treePrefix; context: { $implicit: row }\"></ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (isSaving(row, column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t\t\t\t\t\t} @else if (column.editable && options.editUrl && isEditing(row, column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t@if (column.editableOptions || column.editableOptionsUrl || column.editableSearchUrl) {\n\t\t\t\t\t\t\t\t\t\t\t\t@if (editableOptionsLoading()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-form-field class=\"xiri-inline-edit\" subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-select [(ngModel)]=\"row[column.id]\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t            (keydown)=\"onInlineEditKeydown($event, row, column)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t            (openedChange)=\"!$event && saveInlineEdit(row, column)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (column.editableOptionsSearch || column.editableSearchUrl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ngx-mat-select-search [formControl]=\"inlineSearchControl\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                       [searching]=\"inlineSearching()\"></ngx-mat-select-search>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@for (opt of getEditableOptions(column); track opt.value) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-select>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-form-field class=\"xiri-inline-edit\" subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<input matInput\n\t\t\t\t\t\t\t\t\t\t\t\t\t       [(ngModel)]=\"row[column.id]\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t       (blur)=\"saveInlineEdit(row, column)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t       (keydown)=\"onInlineEditKeydown($event, row, column)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button matSuffix mat-icon-button class=\"xiri-inline-edit-confirm\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t        (mousedown)=\"$event.preventDefault(); saveInlineEdit(row, column)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t        aria-label=\"\u00C4nderung speichern\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t        tabindex=\"-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon>check</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} @else if (column.editable && options.editUrl) {\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"xiri-editable-cell\" role=\"button\" tabindex=\"0\"\n\t\t\t\t\t\t\t\t\t\t\t      (click)=\"startInlineEdit(row, column); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t      (keydown.enter)=\"startInlineEdit(row, column); $event.stopPropagation()\">\n\t\t\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ row[column.id] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon class=\"xiri-edit-icon\">edit</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ row[column.id] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (treeEnabled && column.id === treeColumnId) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treeSuffix; context: { $implicit: row }\"></ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t<td mat-footer-cell *matFooterCellDef [hidden]=\"!options.footer\"\n\t\t\t\t\t\t\t    [style.width]=\"column.width\" [style.min-width]=\"column.minWidth\" class=\"bottomrow\"\n\t\t\t\t\t\t\t    [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t@if ( footer[ column.id ] ) {\n\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ footer[ column.id ] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t\t@if (showSelectColumn) {\n\t\t\t\t\t\t<ng-container matColumnDef=\"select\" [sticky]=\"true\">\n\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef [style.width]=\"'65px'\">\n\t\t\t\t\t\t\t\t<mat-checkbox (change)=\"$event ? masterToggle() : null\"\n\t\t\t\t\t\t\t\t              [checked]=\"selection.hasValue() && isAllSelected()\"\n\t\t\t\t\t\t\t\t              [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\">\n\t\t\t\t\t\t\t\t@if (isSelectable(row)) {\n\t\t\t\t\t\t\t\t\t<mat-checkbox\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t(change)=\"$event ? toggleRow(row) : null\"\n\t\t\t\t\t\t\t\t\t\t\t[checked]=\"selection.isSelected(row)\">\n\t\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t<td mat-footer-cell *matFooterCellDef [style.width]=\"'65px'\" class=\"bottomrow\" [hidden]=\"!options.footer\">\n\t\t\t\t\t\t\t\t<mat-checkbox (change)=\"$event ? masterToggle() : null\"\n\t\t\t\t\t\t\t\t              [checked]=\"selection.hasValue() && isAllSelected()\"\n\t\t\t\t\t\t\t\t              [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\n\t\t\t\t\t@if (extraHeaderFields.length > 0) {\n\t\t\t\t\t\t@for (column of extraHeaderFields; track column.id) {\n\t\t\t\t\t\t\t<ng-container matColumnDef=\"{{ column.id }}\" [sticky]=\"column.sticky\">\n\t\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef [attr.colspan]=\"column.headerSpan\">{{ column.name }}</th>\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<tr mat-header-row *matHeaderRowDef=\"extraHeaders; sticky: true\" [class.dense]=\"options.dense\"></tr>\n\t\t\t\t\t}\n\n\t\t\t\t\t<tr mat-header-row *matHeaderRowDef=\"columnsToDisplay; sticky: true\" [class.dense]=\"options.dense\"></tr>\n\t\t\t\t\t<tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\" (click)=\"clicked(row)\"\n\t\t\t\t\t    [class.xiri-tree-dimmed]=\"treeEnabled && row._tree?.dimmed\"></tr>\n\t\t\t\t\t<tr mat-footer-row *matFooterRowDef=\"columnsToDisplay; sticky: true\" [hidden]=\"!options.footer\"></tr>\n\t\t\t\t</table>\n\t\t\t</div>\n\t\t\t<div class=\"loader\" [hidden]=\"!loading()\" [class.has-bottombar]=\"(options.select || options.pagination) && !options.footer\">\n\t\t\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t@if (!loading()) {\n\t\t\t\t@if (!errorMsg && dataSource.filteredData.length === 0) {\n\t\t\t\t\t@if (options.emptyState) {\n\t\t\t\t\t\t<xiri-empty-state [settings]=\"options.emptyState\"></xiri-empty-state>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<div class=\"nodata\">{{ options.textNoData }}</div>\n\t\t\t\t\t}\n\t\t\t\t} @else if (errorMsg) {\n\t\t\t\t\t<div class=\"alert alert-danger\">\n\t\t\t\t\t\t<span>{{ errorMsg }}</span>\n\t\t\t\t\t\t<button mat-button type=\"button\" data-testid=\"table-retry\" (click)=\"reload()\">\n\t\t\t\t\t\t\t<mat-icon>autorenew</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}\n\n\t\t\t<div class=\"xrow xsmall\" [class.bottomrow]=\"(options.select || options.pagination) && !options.footer\">\n\t\t\t\t@if (options.select) {\n\t\t\t\t\t<div class=\"xcol xcol-md-2 select-buttons\">\n\t\t\t\t\t\t@for (button of options.selectButtons; track button) {\n\t\t\t\t\t\t\t@if (!button.hide) {\n\t\t\t\t\t\t\t\t@switch (button.action) {\n\t\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t\t        (click)=\"openDialogSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [attr.aria-label]=\"button.hint || button.text\">\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t@case ('api') {\n\t\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t\t        (click)=\"apiCallSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [attr.aria-label]=\"button.hint || button.text\">\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t@case ('download') {\n\t\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t\t        (click)=\"downloadSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [attr.aria-label]=\"button.hint || button.text\">\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"xcol xcol-right-md-10\">\n\t\t\t\t\t<mat-paginator [hidden]=\"!options.pagination\" [pageSizeOptions]=\"options.pageSizes || []\" showFirstLastButtons=\"true\"></mat-paginator>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</mat-card>\n\n@if (dynData.data) {\n\t<ng-container *ngTemplateOutlet=\"dyncomponent(); context: { $implicit: dynData }\"></ng-container>\n}\n\n<!-- Tree mode: indent + expand/collapse arrow rendered before the tree column's content -->\n<ng-template #treePrefix let-row>\n\t<span class=\"xiri-tree-prefix\" [style.padding-left.px]=\"(row._tree?.level || 0) * 24\">\n\t\t@if (row._tree?.hasChildren) {\n\t\t\t<button type=\"button\" class=\"xiri-tree-iconbtn xiri-tree-toggle\" (click)=\"toggleNode($event, row)\"\n\t\t\t        tabindex=\"-1\" [attr.aria-label]=\"row._tree.expanded ? 'einklappen' : 'ausklappen'\">\n\t\t\t\t<mat-icon color=\"primary\">{{ row._tree.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n\t\t\t</button>\n\t\t} @else {\n\t\t\t<span class=\"xiri-tree-spacer\"></span>\n\t\t}\n\t</span>\n</ng-template>\n\n<!-- Tree mode: child-count badge (when collapsed) + optional \"+ sub\" button after the content -->\n<ng-template #treeSuffix let-row>\n\t@if (treeShowCounts && row._tree && !row._tree.expanded && row._tree.childCount > 0) {\n\t\t<span class=\"xiri-tree-count\">({{ row._tree.childCount }})</span>\n\t}\n\t@if (treeHasAddSub && treeCanAddSub(row)) {\n\t\t<button type=\"button\" class=\"xiri-tree-iconbtn xiri-tree-addsub\" (click)=\"addSub($event, row)\"\n\t\t        tabindex=\"-1\" matTooltip=\"Sub-Eintrag hinzuf\u00FCgen\" aria-label=\"Sub-Eintrag hinzuf\u00FCgen\">\n\t\t\t<mat-icon color=\"primary\">add</mat-icon>\n\t\t</button>\n\t}\n</ng-template>\n", styles: ["mat-card.xiritablecard{padding:0;margin-bottom:var(--xiri-spacing-xl)}.xiritable{width:100%;overflow:auto}.xiritable.canbreak{word-break:break-all}.xiritable .table-full{display:inline-block;width:100%}.xiritable .table-full .xiri-bulk-bar{display:flex;align-items:center;gap:var(--xiri-spacing-sm);padding:var(--xiri-spacing-xs) var(--xiri-spacing-sm);background:var(--secondary-container, var(--mat-sys-secondary-container, #e0e0e0));color:var(--on-secondary-container, var(--mat-sys-on-secondary-container, inherit));border-radius:var(--xiri-radius-sm, 4px);margin-bottom:var(--xiri-spacing-xs)}.xiritable .table-full .xiri-bulk-bar.sticky{position:sticky;top:0;z-index:5}.xiritable .table-full .xiri-bulk-bar .xiri-bulk-count{font-weight:500}.xiritable .table-full .xiri-bulk-bar .xiri-bulk-spacer{flex:1 1 auto}.xiritable .table-full .tableout-wrap{position:relative}.xiritable .table-full .tableout{max-height:60vh;overflow-y:auto;width:100%;min-width:100%;max-width:100%}.xiritable .table-full .tableout.is-loading{min-height:100px}.xiritable .table-full .alert{padding:var(--xiri-spacing-md)}.xiritable .table-full mat-paginator{--mat-paginator-container-background-color: transparent;--mat-paginator-container-size: 51px;--mat-form-field-container-height: 32px;--mat-form-field-container-vertical-padding: 4px}.xiritable .table-full .bottomrow{border-top:1px solid var(--outline-variant, #C2C7CF)}.xiritable .table-full div.bottomrow{background-color:var(--surface-container, #F3F3F6);border-bottom-left-radius:var(--mat-card-elevated-container-shape, 12px);border-bottom-right-radius:var(--mat-card-elevated-container-shape, 12px)}.xiritable .header{background-color:var(--surface-container, #F3F3F6);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;min-height:51px;padding:0 16px;border-bottom:1px solid var(--outline-variant, #C2C7CF);border-top-left-radius:var(--mat-card-elevated-container-shape, 12px);border-top-right-radius:var(--mat-card-elevated-container-shape, 12px)}.xiritable .header .buttons{padding:0 7px 0 .5rem;margin-left:-16px}.xiritable .header .buttons button{z-index:200}.xiritable .header .buttons.saveInput{padding-left:21px}.xiritable .header .middle{flex-grow:1;font-size:var(--xiri-font-size-title);display:flex;padding:0}.xiritable .header xiri-buttonline{padding:0 0 0 16px}.xiritable .header .autorefresh-indicator{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;font-size:var(--xiri-font-size-small, .8rem);color:var(--primary, var(--mat-sys-primary, #006398))}.xiritable .header .autorefresh-indicator mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.xiritable .header .autorefresh-indicator mat-icon.spin{animation:xiri-autorefresh-spin 1.5s linear infinite}.xiritable .header .lastupdated-indicator{display:inline-flex;align-items:center;padding:2px 8px;font-size:var(--xiri-font-size-small, .8rem);color:var(--on-surface-variant, #44474F);opacity:.75}@keyframes xiri-autorefresh-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.xiritable table{width:100%}.xiritable table.density-regular{--mat-table-header-container-height: 42px;--mat-table-footer-container-height: 42px;--mat-table-row-item-container-height: 42px}.xiritable table.density-compact{--mat-table-header-container-height: 32px;--mat-table-footer-container-height: 32px;--mat-table-row-item-container-height: 32px}.xiritable table.density-relaxed{--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 52px;--mat-table-row-item-container-height: 52px}.xiritable table th.mat-mdc-header-cell:not(:first-of-type),.xiritable table td.mat-mdc-cell:not(:first-of-type),.xiritable table td.mat-mdc-footer-cell:not(:first-of-type){padding-left:5px}.xiritable table th.mat-mdc-header-cell:not(:last-of-type),.xiritable table td.mat-mdc-cell:not(:last-of-type),.xiritable table td.mat-mdc-footer-cell:not(:last-of-type){padding-right:7px}.xiritable table tr.mat-mdc-row{transition:background-color var(--xiri-duration-fast) var(--xiri-easing-standard)}.xiritable table tr.mat-mdc-row:hover{background:var(--surface-variant, #DEE3EB)}.xiritable table .tablelink{text-decoration:underline}.xiritable table td.buttons xiri-button,.xiritable table td.buttons xiri-buttonstyle,.xiritable table td.buttons .btnicon{margin-right:8px}.xiritable table td.buttons xiri-button:last-child,.xiritable table td.buttons xiri-buttonstyle:last-child,.xiritable table td.buttons .btnicon:last-child{margin-right:0}.xiritable table td.number,.xiritable table th.number,.xiritable table td.mat-mdc-footer-cell.number{text-align:right;font-variant-numeric:tabular-nums}.xiritable table td.right,.xiritable table td.align-right,.xiritable table th.right,.xiritable table th.align-right{text-align:right}.xiritable table td.center,.xiritable table td.align-center,.xiritable table th.center,.xiritable table th.align-center{text-align:center}.xiritable table td.left,.xiritable table td.align-left,.xiritable table th.left,.xiritable table th.align-left{text-align:left}.xiritable table td.vertical,.xiritable table th.vertical{writing-mode:sideways-rl;text-orientation:sideways}.xiritable table td.vertical div,.xiritable table th.vertical div{max-height:6rem}.xiritable table td.sideways,.xiritable table th.sideways{writing-mode:sideways-lr;text-orientation:sideways}.xiritable table td.sideways div,.xiritable table th.sideways div{max-height:6rem}.xiritable table td.upright,.xiritable table th.upright{writing-mode:vertical-rl;text-orientation:upright}.xiritable table.borders td+td{border-left:1px solid var(--outline-variant, #C2C7CF)}.xiritable table.bordersHeader th+th{border-left:1px solid var(--outline-variant, #C2C7CF)}.xiritable table td.mat-mdc-cell mat-form-field{--mat-form-field-container-height: 40px;--mat-form-field-container-vertical-padding: 8px}.xiritable .xiri-editable-cell{cursor:pointer;display:inline-flex;align-items:center;border-radius:var(--xiri-radius-xs);padding:2px 4px}.xiritable .xiri-editable-cell:hover,.xiritable .xiri-editable-cell:focus-visible{background-color:var(--surface-variant, #DEE3EB)}.xiritable .xiri-editable-cell:hover .xiri-edit-icon,.xiritable .xiri-editable-cell:focus-visible .xiri-edit-icon{opacity:1}.xiritable .xiri-edit-icon{opacity:0;font-size:14px;width:14px;height:14px;margin-left:4px;color:var(--on-surface-variant, #44474F);transition:opacity var(--xiri-duration-fast) var(--xiri-easing-standard)}.xiritable .xiri-inline-edit{--mat-form-field-container-height: 36px;--mat-form-field-container-vertical-padding: 6px;width:100%}.xiritable .xiri-inline-edit-confirm{--mdc-icon-button-icon-size: 18px;--mdc-icon-button-state-layer-size: 28px;width:28px;height:28px;padding:0;margin-right:5px;color:var(--primary, #1976d2);display:inline-flex;align-items:center;justify-content:center}.xiritable .xiri-inline-edit-confirm mat-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:18px}.xiritable .mat-column-select{overflow:initial}.xiritable .select-buttons{padding:.3rem .8rem;display:flex;align-items:center}.xiritable .select-buttons button{margin-right:.5rem}.xiritable .xiri-cell-saved{animation:pulse .5s var(--xiri-easing-standard);border-radius:var(--xiri-radius-xs)}.xiritable .nodata{padding:.5rem 1.5rem;font-size:var(--xiri-font-size-label);background-color:var(--surface, #FFFFFF);animation:fadeInUp var(--xiri-duration-normal) var(--xiri-easing-decelerate)}.xiritable .loader{position:absolute;top:0;left:0;width:100%;bottom:0;display:flex;justify-content:center;align-items:center;background-color:var(--ripple, rgba(206, 212, 218, .5));z-index:200;border-bottom-left-radius:var(--mat-card-elevated-container-shape, 12px);border-bottom-right-radius:var(--mat-card-elevated-container-shape, 12px);animation:fadeIn var(--xiri-duration-fast) var(--xiri-easing-standard)}.xiritable .loader.has-bottombar{border-bottom-left-radius:0;border-bottom-right-radius:0}xiri-dyncomponent{margin-bottom:var(--xiri-spacing-xl)}[hidden]{display:none!important}.xiri-tree-actions{display:flex;align-items:center}td.xiri-tree-td{white-space:nowrap}td.xiri-tree-td .xiri-tree-prefix{display:inline-flex;align-items:center;vertical-align:middle}td.xiri-tree-td .xiri-tree-iconbtn{appearance:none;border:0;background:transparent;padding:0;margin:0;flex:0 0 24px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent}td.xiri-tree-td .xiri-tree-iconbtn .mat-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:20px;line-height:20px;margin:0}td.xiri-tree-td .xiri-tree-iconbtn:hover{background:#0000000f}td.xiri-tree-td .xiri-tree-iconbtn:focus-visible{outline:2px solid var(--primary, var(--mat-sys-primary, currentColor));outline-offset:-2px}td.xiri-tree-td .xiri-tree-spacer{width:24px;height:24px;flex:0 0 24px}td.xiri-tree-td .xiri-tree-count{margin-left:var(--xiri-spacing-xs, 4px);opacity:.6;font-size:.85em}td.xiri-tree-td .xiri-tree-addsub{margin-left:var(--xiri-spacing-xs, 4px);opacity:0;transition:opacity .15s ease-in-out}tr.mat-mdc-row:hover td.xiri-tree-td .xiri-tree-addsub,td.xiri-tree-td .xiri-tree-addsub:focus-visible{opacity:1}tr.xiri-tree-dimmed{opacity:.6}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { 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"] }, { kind: "component", type: XiriButtonlineComponent, selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "component", type: XiriSearchComponent, selector: "xiri-search", inputs: ["placeholder", "open", "reset", "escape", "focus", "text"], outputs: ["changed"] }, { 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: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: XiriButtonstyleComponent, selector: "xiri-buttonstyle", inputs: ["button", "disabled", "loading", "countdown", "pollText"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: "ngmodule", type: FormsModule }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "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: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XiriButtonComponent, selector: "xiri-button", inputs: ["button", "disabled", "filterData", "url"], outputs: ["result"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { 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$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: XiriEmptyStateComponent, selector: "xiri-empty-state", inputs: ["settings"], outputs: ["buttonResult"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }, { kind: "pipe", type: XiriUrlPipe, name: "xiriUrl" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-table', encapsulation: ViewEncapsulation.None, providers: [XiriTableInlineEditService, XiriTableTreeService], imports: [MatCard,
                         MatIconButton,
@@ -5617,10 +5781,10 @@ class XiriFormService {
             return;
         this.sessionStorageService.set(saveStateId, values);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriFormService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriFormService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriFormService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriFormService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -5747,10 +5911,10 @@ class XiriFormComponent {
         // data = { ...data, ...this.extra }
         // this.events.push( '' + this.formValid + ' => ' + JSON.stringify( event.value ) );
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-form', imports: [CdkTrapFocus,
                         MatProgressSpinner,
@@ -5784,10 +5948,10 @@ class XiriProgressComponent {
         this.mode = computed(() => this.settings().indeterminate ? 'indeterminate' : 'determinate', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriProgressComponent, isStandalone: true, selector: "xiri-progress", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"xiri-progress\">\n\t<div class=\"progress-head\">\n\t\t<span class=\"progress-label\">{{ settings().label }}</span>\n\t\t@if (!settings().indeterminate) {\n\t\t\t<span class=\"progress-count\">{{ settings().current }} / {{ settings().total }}</span>\n\t\t}\n\t</div>\n\t<mat-progress-bar [mode]=\"mode()\" [value]=\"settings().value\" [class]=\"settings().color || ''\"></mat-progress-bar>\n</div>\n", styles: [".xiri-progress{display:flex;flex-direction:column;gap:var(--xiri-spacing-xs, 4px)}.progress-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--xiri-spacing-sm, 8px);font-size:var(--xiri-font-size-label)}.progress-count{color:var(--on-surface-variant, #44474F);font-weight:500;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriProgressComponent, isStandalone: true, selector: "xiri-progress", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"xiri-progress\">\n\t<div class=\"progress-head\">\n\t\t<span class=\"progress-label\">{{ settings().label }}</span>\n\t\t@if (!settings().indeterminate) {\n\t\t\t<span class=\"progress-count\">{{ settings().current }} / {{ settings().total }}</span>\n\t\t}\n\t</div>\n\t<mat-progress-bar [mode]=\"mode()\" [value]=\"settings().value\" [class]=\"settings().color || ''\"></mat-progress-bar>\n</div>\n", styles: [".xiri-progress{display:flex;flex-direction:column;gap:var(--xiri-spacing-xs, 4px)}.progress-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--xiri-spacing-sm, 8px);font-size:var(--xiri-font-size-label)}.progress-count{color:var(--on-surface-variant, #44474F);font-weight:500;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriProgressComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriProgressComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-progress', imports: [MatProgressBar], template: "<div class=\"xiri-progress\">\n\t<div class=\"progress-head\">\n\t\t<span class=\"progress-label\">{{ settings().label }}</span>\n\t\t@if (!settings().indeterminate) {\n\t\t\t<span class=\"progress-count\">{{ settings().current }} / {{ settings().total }}</span>\n\t\t}\n\t</div>\n\t<mat-progress-bar [mode]=\"mode()\" [value]=\"settings().value\" [class]=\"settings().color || ''\"></mat-progress-bar>\n</div>\n", styles: [".xiri-progress{display:flex;flex-direction:column;gap:var(--xiri-spacing-xs, 4px)}.progress-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--xiri-spacing-sm, 8px);font-size:var(--xiri-font-size-label)}.progress-count{color:var(--on-surface-variant, #44474F);font-weight:500;flex-shrink:0}\n"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
@@ -5799,10 +5963,10 @@ class XiriInfopointComponent {
         this.compact = computed(() => !!this.settings().compact, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriInfopointComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriInfopointComponent, isStandalone: true, selector: "xiri-infopoint", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.compact": "compact()" } }, ngImport: i0, template: "<div class=\"point\" [class.isLink]=\"settings().url\" [routerLink]=\"settings().url\" [queryParams]=\"settings().urlParams\">\n\t@if (compact()) {\n\t\t<div class=\"card xiri-infopoint-flat\" [class.dense]=\"settings().dense\">\n\t\t\t<div class=\"icon\" [class]=\"settings().iconColor\">\n\t\t\t\t@if (settings().iconSet) {\n\t\t\t\t\t<mat-icon [fontSet]=\"settings().iconSet!\">{{ settings().icon }}</mat-icon>\n\t\t\t\t} @else {\n\t\t\t\t\t<mat-icon>{{ settings().icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div class=\"right\">\n\t\t\t\t@if (settings().text) {\n\t\t\t\t\t@if (settings().html) {\n\t\t\t\t\t\t<div class=\"text\" [innerHtml]=\"settings().text | safeHtml\"></div>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<div class=\"text\">{{ settings().text }}</div>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t@if (settings().html) {\n\t\t\t\t\t<div class=\"info\" [innerHtml]=\"settings().info | safeHtml\"></div>\n\t\t\t\t} @else {\n\t\t\t\t\t<div class=\"info\">{{ settings().info }}</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t} @else {\n\t\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t\t<mat-card-content [class.dense]=\"settings().dense\">\n\t\t\t\t<div class=\"icon\" [class]=\"settings().iconColor\">\n\t\t\t\t\t@if (settings().iconSet) {\n\t\t\t\t\t\t<mat-icon [fontSet]=\"settings().iconSet!\">{{ settings().icon }}</mat-icon>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<mat-icon>{{ settings().icon }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t\t<div class=\"right\">\n\t\t\t\t\t@if (settings().text) {\n\t\t\t\t\t\t@if (settings().html) {\n\t\t\t\t\t\t\t<div class=\"text\" [innerHtml]=\"settings().text | safeHtml\"></div>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t<div class=\"text\">{{ settings().text }}</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t@if (settings().html) {\n\t\t\t\t\t\t<div class=\"info\" [innerHtml]=\"settings().info | safeHtml\"></div>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<div class=\"info\">{{ settings().info }}</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</mat-card-content>\n\t\t</mat-card>\n\t}\n</div>\n", styles: [".point mat-card{background-color:var(--surface, #FFFFFF)}.point mat-card-content{display:flex;flex-direction:row;align-items:center;overflow:hidden}.point mat-card-content.dense{padding:6px 16px}:host(.compact) .point .xiri-infopoint-flat{display:flex;flex-direction:row;align-items:center;overflow:hidden;background:transparent;box-shadow:none;padding:var(--xiri-spacing-sm, 8px)}:host(.compact) .point .xiri-infopoint-flat.dense{padding:4px 8px}.point.isLink{cursor:pointer}.point.isLink mat-card{transition:background-color var(--xiri-duration-fast, .15s) var(--xiri-easing-standard, cubic-bezier(.4, 0, .2, 1))}.point.isLink:hover mat-card{background-color:var(--surface-variant, #DEE3EB)}.right{text-align:right;flex-grow:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding-left:7px;overflow-wrap:anywhere}.right .text{color:var(--on-surface-variant, rgba(0, 0, 0, .54));font-size:var(--xiri-font-size-label)}.right .info{font-size:var(--xiri-font-size-display);font-weight:500}.icon{width:64px;min-width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center}.icon mat-icon{transform:scale(1.5)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriInfopointComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriInfopointComponent, isStandalone: true, selector: "xiri-infopoint", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.compact": "compact()" } }, ngImport: i0, template: "<div class=\"point\" [class.isLink]=\"settings().url\" [routerLink]=\"settings().url\" [queryParams]=\"settings().urlParams\">\n\t@if (compact()) {\n\t\t<div class=\"card xiri-infopoint-flat\" [class.dense]=\"settings().dense\">\n\t\t\t<div class=\"icon\" [class]=\"settings().iconColor\">\n\t\t\t\t@if (settings().iconSet) {\n\t\t\t\t\t<mat-icon [fontSet]=\"settings().iconSet!\">{{ settings().icon }}</mat-icon>\n\t\t\t\t} @else {\n\t\t\t\t\t<mat-icon>{{ settings().icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div class=\"right\">\n\t\t\t\t@if (settings().text) {\n\t\t\t\t\t@if (settings().html) {\n\t\t\t\t\t\t<div class=\"text\" [innerHtml]=\"settings().text | safeHtml\"></div>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<div class=\"text\">{{ settings().text }}</div>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t@if (settings().html) {\n\t\t\t\t\t<div class=\"info\" [innerHtml]=\"settings().info | safeHtml\"></div>\n\t\t\t\t} @else {\n\t\t\t\t\t<div class=\"info\">{{ settings().info }}</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t} @else {\n\t\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t\t<mat-card-content [class.dense]=\"settings().dense\">\n\t\t\t\t<div class=\"icon\" [class]=\"settings().iconColor\">\n\t\t\t\t\t@if (settings().iconSet) {\n\t\t\t\t\t\t<mat-icon [fontSet]=\"settings().iconSet!\">{{ settings().icon }}</mat-icon>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<mat-icon>{{ settings().icon }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t\t<div class=\"right\">\n\t\t\t\t\t@if (settings().text) {\n\t\t\t\t\t\t@if (settings().html) {\n\t\t\t\t\t\t\t<div class=\"text\" [innerHtml]=\"settings().text | safeHtml\"></div>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t<div class=\"text\">{{ settings().text }}</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t@if (settings().html) {\n\t\t\t\t\t\t<div class=\"info\" [innerHtml]=\"settings().info | safeHtml\"></div>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<div class=\"info\">{{ settings().info }}</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</mat-card-content>\n\t\t</mat-card>\n\t}\n</div>\n", styles: [".point mat-card{background-color:var(--surface, #FFFFFF)}.point mat-card-content{display:flex;flex-direction:row;align-items:center;overflow:hidden}.point mat-card-content.dense{padding:6px 16px}:host(.compact) .point .xiri-infopoint-flat{display:flex;flex-direction:row;align-items:center;overflow:hidden;background:transparent;box-shadow:none;padding:var(--xiri-spacing-sm, 8px)}:host(.compact) .point .xiri-infopoint-flat.dense{padding:4px 8px}.point.isLink{cursor:pointer}.point.isLink mat-card{transition:background-color var(--xiri-duration-fast, .15s) var(--xiri-easing-standard, cubic-bezier(.4, 0, .2, 1))}.point.isLink:hover mat-card{background-color:var(--surface-variant, #DEE3EB)}.right{text-align:right;flex-grow:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding-left:7px;overflow-wrap:anywhere}.right .text{color:var(--on-surface-variant, rgba(0, 0, 0, .54));font-size:var(--xiri-font-size-label)}.right .info{font-size:var(--xiri-font-size-display);font-weight:500}.icon{width:64px;min-width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center}.icon mat-icon{transform:scale(1.5)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriInfopointComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriInfopointComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-infopoint', imports: [RouterLink, MatCard, MatCardContent, MatIcon, SafehtmlPipe], host: { '[class.compact]': 'compact()' }, template: "<div class=\"point\" [class.isLink]=\"settings().url\" [routerLink]=\"settings().url\" [queryParams]=\"settings().urlParams\">\n\t@if (compact()) {\n\t\t<div class=\"card xiri-infopoint-flat\" [class.dense]=\"settings().dense\">\n\t\t\t<div class=\"icon\" [class]=\"settings().iconColor\">\n\t\t\t\t@if (settings().iconSet) {\n\t\t\t\t\t<mat-icon [fontSet]=\"settings().iconSet!\">{{ settings().icon }}</mat-icon>\n\t\t\t\t} @else {\n\t\t\t\t\t<mat-icon>{{ settings().icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div class=\"right\">\n\t\t\t\t@if (settings().text) {\n\t\t\t\t\t@if (settings().html) {\n\t\t\t\t\t\t<div class=\"text\" [innerHtml]=\"settings().text | safeHtml\"></div>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<div class=\"text\">{{ settings().text }}</div>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t@if (settings().html) {\n\t\t\t\t\t<div class=\"info\" [innerHtml]=\"settings().info | safeHtml\"></div>\n\t\t\t\t} @else {\n\t\t\t\t\t<div class=\"info\">{{ settings().info }}</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t} @else {\n\t\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t\t<mat-card-content [class.dense]=\"settings().dense\">\n\t\t\t\t<div class=\"icon\" [class]=\"settings().iconColor\">\n\t\t\t\t\t@if (settings().iconSet) {\n\t\t\t\t\t\t<mat-icon [fontSet]=\"settings().iconSet!\">{{ settings().icon }}</mat-icon>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<mat-icon>{{ settings().icon }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t\t<div class=\"right\">\n\t\t\t\t\t@if (settings().text) {\n\t\t\t\t\t\t@if (settings().html) {\n\t\t\t\t\t\t\t<div class=\"text\" [innerHtml]=\"settings().text | safeHtml\"></div>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t<div class=\"text\">{{ settings().text }}</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t@if (settings().html) {\n\t\t\t\t\t\t<div class=\"info\" [innerHtml]=\"settings().info | safeHtml\"></div>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<div class=\"info\">{{ settings().info }}</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</mat-card-content>\n\t\t</mat-card>\n\t}\n</div>\n", styles: [".point mat-card{background-color:var(--surface, #FFFFFF)}.point mat-card-content{display:flex;flex-direction:row;align-items:center;overflow:hidden}.point mat-card-content.dense{padding:6px 16px}:host(.compact) .point .xiri-infopoint-flat{display:flex;flex-direction:row;align-items:center;overflow:hidden;background:transparent;box-shadow:none;padding:var(--xiri-spacing-sm, 8px)}:host(.compact) .point .xiri-infopoint-flat.dense{padding:4px 8px}.point.isLink{cursor:pointer}.point.isLink mat-card{transition:background-color var(--xiri-duration-fast, .15s) var(--xiri-easing-standard, cubic-bezier(.4, 0, .2, 1))}.point.isLink:hover mat-card{background-color:var(--surface-variant, #DEE3EB)}.right{text-align:right;flex-grow:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding-left:7px;overflow-wrap:anywhere}.right .text{color:var(--on-surface-variant, rgba(0, 0, 0, .54));font-size:var(--xiri-font-size-label)}.right .info{font-size:var(--xiri-font-size-display);font-weight:500}.icon{width:64px;min-width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center}.icon mat-icon{transform:scale(1.5)}\n"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
@@ -5821,10 +5985,10 @@ class XiriListComponent {
         this.dataService.get(url).pipe(takeUntilDestroyed(this.destroyRef)).subscribe();
         item.isFavorite = !item.isFavorite;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriListComponent, isStandalone: true, selector: "xiri-list", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (section of settings().sections; track section) {\n\t@if (section.name) {\n\t\t<div mat-subheader>{{ section.name }}</div>\n\t}\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-content>\n\t\t\t<mat-nav-list>\n\t\t\t\t@for (item of section.data; track item) {\n\t\t\t\t\t@let itemUrl = item.url | xiriUrl;\n\t\t\t\t\t<a mat-list-item [routerLink]=\"itemUrl?.path\" [queryParams]=\"itemUrl?.queryParams\" class=\"linelink\">\n\t\t\t\t\t\t<div matListItemIcon class=\"list-icon\" [class]=\"item.iconColor\">\n\t\t\t\t\t\t\t@if (item.iconSet) {\n\t\t\t\t\t\t\t\t<mat-icon [fontSet]=\"item.iconSet\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span matListItemTitle>{{ item.name }}</span>\n\t\t\t\t\t\t<span matListItemLine>{{ item.info }}</span>\n\t\t\t\t\t\t@if (item.hasFavorite) {\n\t\t\t\t\t\t\t<div matListItemMeta class=\"list-fav\">\n\t\t\t\t\t\t\t\t<button mat-icon-button (click)=\"changeFavorite(item, $event)\" [matTooltip]=\"item.favoriteHint\"\n\t\t\t\t\t\t\t        [attr.aria-label]=\"'Favorit: ' + item.name\"\n\t\t\t\t\t\t\t        [attr.aria-pressed]=\"!!item.isFavorite\">\n\t\t\t\t\t\t\t\t\t@if (item.isFavorite) {\n\t\t\t\t\t\t\t\t\t\t<mat-icon class=\"accent\">star</mat-icon>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t@if (!item.isFavorite) {\n\t\t\t\t\t\t\t\t\t\t<mat-icon class=\"gray\">star_outline</mat-icon>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</a>\n\t\t\t\t}\n\t\t\t</mat-nav-list>\n\t\t</mat-card-content>\n\t</mat-card>\n}\n", styles: [".card{background-color:var(--surface, #FFFFFF)}.card mat-card-content,.card mat-nav-list{padding:0}.card a+a{border-top:1px solid var(--outline-variant, #C2C7CF)}.card a.mat-mdc-list-item{align-items:center;border-radius:0}.card a.mat-mdc-list-item:before{border-radius:var(--xiri-radius-md)}.card a.mat-mdc-list-item.mdc-list-item--with-two-lines ::ng-deep .mdc-list-item__content{transform:translateY(-7px)}.card .list-icon{width:48px;height:48px;color:var(--on-primary, #FFFFFF);border-radius:50%;margin:0 16px;align-self:center;display:flex;justify-content:center;align-items:center}.card .list-icon mat-icon{text-align:center;font-size:var(--xiri-icon-size-lg);--mat-icon-color: var(--on-primary, white)}.card .list-icon.primary{background-color:var(--primary)}.card .list-icon.secondary{background-color:var(--secondary)}.card .list-icon.tertiary{background-color:var(--tertiary)}.card .list-icon.accent{background-color:var(--secondary)}.card .list-icon.warn,.card .list-icon.error{background-color:var(--error)}.card .list-icon.success{background-color:var(--color-success)}.card .list-icon.emerald{background-color:#2892d9}.card .list-icon.red{background-color:#e74c3c}.card .list-icon.yellow{background-color:#f1c40f}.card .list-icon.green{background-color:#2ecc71}.card .list-icon.blue{background-color:#3498db}.card .list-icon.purple{background-color:#9b59b6}.card .list-icon.gray{background-color:#95a5a6}.card .list-icon.lightgray{background-color:#bdc3c7}.card .list-icon.darkgray{background-color:#7f8c8d}.card .list-icon.orange{background-color:#e67e22}.card .list-icon.white{background-color:#fff}.card .list-icon.black{background-color:#000}.card .list-icon.inherit{background-color:inherit}.card .list-fav{display:flex;justify-content:center;align-items:center;height:100%}.card .list-fav mat-icon.gray{--mat-icon-color: var(--on-surface-variant, gray)}.card .list-fav mat-icon.accent{--mat-icon-color: var(--secondary, #6750A4)}\n"], dependencies: [{ kind: "directive", type: MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: XiriUrlPipe, name: "xiriUrl" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriListComponent, isStandalone: true, selector: "xiri-list", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (section of settings().sections; track section) {\n\t@if (section.name) {\n\t\t<div mat-subheader>{{ section.name }}</div>\n\t}\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-content>\n\t\t\t<mat-nav-list>\n\t\t\t\t@for (item of section.data; track item) {\n\t\t\t\t\t@let itemUrl = item.url | xiriUrl;\n\t\t\t\t\t<a mat-list-item [routerLink]=\"itemUrl?.path\" [queryParams]=\"itemUrl?.queryParams\" class=\"linelink\">\n\t\t\t\t\t\t<div matListItemIcon class=\"list-icon\" [class]=\"item.iconColor\">\n\t\t\t\t\t\t\t@if (item.iconSet) {\n\t\t\t\t\t\t\t\t<mat-icon [fontSet]=\"item.iconSet\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span matListItemTitle>{{ item.name }}</span>\n\t\t\t\t\t\t<span matListItemLine>{{ item.info }}</span>\n\t\t\t\t\t\t@if (item.hasFavorite) {\n\t\t\t\t\t\t\t<div matListItemMeta class=\"list-fav\">\n\t\t\t\t\t\t\t\t<button mat-icon-button (click)=\"changeFavorite(item, $event)\" [matTooltip]=\"item.favoriteHint\"\n\t\t\t\t\t\t\t        [attr.aria-label]=\"'Favorit: ' + item.name\"\n\t\t\t\t\t\t\t        [attr.aria-pressed]=\"!!item.isFavorite\">\n\t\t\t\t\t\t\t\t\t@if (item.isFavorite) {\n\t\t\t\t\t\t\t\t\t\t<mat-icon class=\"accent\">star</mat-icon>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t@if (!item.isFavorite) {\n\t\t\t\t\t\t\t\t\t\t<mat-icon class=\"gray\">star_outline</mat-icon>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</a>\n\t\t\t\t}\n\t\t\t</mat-nav-list>\n\t\t</mat-card-content>\n\t</mat-card>\n}\n", styles: [".card{background-color:var(--surface, #FFFFFF)}.card mat-card-content,.card mat-nav-list{padding:0}.card a+a{border-top:1px solid var(--outline-variant, #C2C7CF)}.card a.mat-mdc-list-item{align-items:center;border-radius:0}.card a.mat-mdc-list-item:before{border-radius:var(--xiri-radius-md)}.card a.mat-mdc-list-item.mdc-list-item--with-two-lines ::ng-deep .mdc-list-item__content{transform:translateY(-7px)}.card .list-icon{width:48px;height:48px;color:var(--on-primary, #FFFFFF);border-radius:50%;margin:0 16px;align-self:center;display:flex;justify-content:center;align-items:center}.card .list-icon mat-icon{text-align:center;font-size:var(--xiri-icon-size-lg);--mat-icon-color: var(--on-primary, white)}.card .list-icon.primary{background-color:var(--primary)}.card .list-icon.secondary{background-color:var(--secondary)}.card .list-icon.tertiary{background-color:var(--tertiary)}.card .list-icon.accent{background-color:var(--secondary)}.card .list-icon.warn,.card .list-icon.error{background-color:var(--error)}.card .list-icon.success{background-color:var(--color-success)}.card .list-icon.emerald{background-color:#2892d9}.card .list-icon.red{background-color:#e74c3c}.card .list-icon.yellow{background-color:#f1c40f}.card .list-icon.green{background-color:#2ecc71}.card .list-icon.blue{background-color:#3498db}.card .list-icon.purple{background-color:#9b59b6}.card .list-icon.gray{background-color:#95a5a6}.card .list-icon.lightgray{background-color:#bdc3c7}.card .list-icon.darkgray{background-color:#7f8c8d}.card .list-icon.orange{background-color:#e67e22}.card .list-icon.white{background-color:#fff}.card .list-icon.black{background-color:#000}.card .list-icon.inherit{background-color:inherit}.card .list-fav{display:flex;justify-content:center;align-items:center;height:100%}.card .list-fav mat-icon.gray{--mat-icon-color: var(--on-surface-variant, gray)}.card .list-fav mat-icon.accent{--mat-icon-color: var(--secondary, #6750A4)}\n"], dependencies: [{ kind: "directive", type: MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: XiriUrlPipe, name: "xiriUrl" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-list', imports: [
                         MatListSubheaderCssMatStyler,
@@ -5849,10 +6013,10 @@ class XiriHeaderComponent {
         this.settings = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: XiriHeaderComponent, isStandalone: true, selector: "xiri-header", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"name\" [class]=\"settings().color + ' ' + settings().size\">{{ settings().text }}</div>\n", styles: [".name{font-size:1.6rem;padding-top:1rem}.name.x1{font-size:1rem}.name.x15{font-size:1.5rem}.name.x2{font-size:2rem}.name.x25{font-size:2.5rem}.name.x3{font-size:3rem}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: XiriHeaderComponent, isStandalone: true, selector: "xiri-header", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"name\" [class]=\"settings().color + ' ' + settings().size\">{{ settings().text }}</div>\n", styles: [".name{font-size:1.6rem;padding-top:1rem}.name.x1{font-size:1rem}.name.x15{font-size:1.5rem}.name.x2{font-size:2rem}.name.x25{font-size:2.5rem}.name.x3{font-size:3rem}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-header', imports: [], template: "<div class=\"name\" [class]=\"settings().color + ' ' + settings().size\">{{ settings().text }}</div>\n", styles: [".name{font-size:1.6rem;padding-top:1rem}.name.x1{font-size:1rem}.name.x15{font-size:1.5rem}.name.x2{font-size:2rem}.name.x25{font-size:2.5rem}.name.x3{font-size:3rem}\n"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
@@ -6035,10 +6199,10 @@ class XiriStepperComponent {
         const url = step.url ? step.url : (this.settings().url ?? '');
         return this.dataService.post(url, data);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriStepperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriStepperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-stepper', imports: [MatStepper,
                         MatStep,
@@ -6277,10 +6441,10 @@ class XiriQueryComponent {
         console.log('XiriQueryComponent error', err);
         this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriQueryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriQueryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriQueryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriQueryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-query', imports: [XiriFormFieldsComponent, NgTemplateOutlet, XiriButtonlineComponent, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle, MatIcon, MatButton, MatProgressSpinner, MatChipSet, MatChip, MatChipRemove], 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"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }], dyncomponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "dyncomponent", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }] } });
@@ -6342,10 +6506,10 @@ class XiriLinksComponent {
         });
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriLinksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriLinksComponent, isStandalone: true, selector: "xiri-links", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.compact": "compact()" } }, ngImport: i0, template: "@if (compact()) {\n\t<div class=\"card xiri-links-flat\">\n\t\t@if (settings().header || settings().headerIcon) {\n\t\t\t<div class=\"xiri-links-header\">\n\t\t\t\t@if (settings().headerIcon) {\n\t\t\t\t\t<div class=\"header-image\">\n\t\t\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"header-text\">\n\t\t\t\t\t@if (settings().header) {\n\t\t\t\t\t\t<div class=\"header-title\">{{ settings().header }}</div>\n\t\t\t\t\t}\n\t\t\t\t\t@if (settings().headerSub) {\n\t\t\t\t\t\t<div class=\"header-sub\">{{ settings().headerSub }}</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t}\n\t\t<ng-container *ngTemplateOutlet=\"linkList\"></ng-container>\n\t</div>\n} @else {\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-header>\n\t\t\t@if (settings().headerIcon) {\n\t\t\t\t<div mat-card-avatar class=\"header-image\">\n\t\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (settings().headerSub) {\n\t\t\t\t<mat-card-subtitle>{{ settings().headerSub }}</mat-card-subtitle>\n\t\t\t}\n\t\t\t@if (settings().header) {\n\t\t\t\t<mat-card-title>{{ settings().header }}</mat-card-title>\n\t\t\t}\n\t\t</mat-card-header>\n\t\t<mat-card-content>\n\t\t\t<ng-container *ngTemplateOutlet=\"linkList\"></ng-container>\n\t\t</mat-card-content>\n\t</mat-card>\n}\n\n<ng-template #linkList>\n\t<mat-nav-list>\n\t\t@for (item of settings().data; track item) {\n\t\t\t@if (!item.hide && (!item.action || item.action === 'link')) {\n\t\t\t\t@let itemUrl = item.url | xiriUrl;\n\t\t\t\t<a mat-list-item [routerLink]=\"itemUrl?.path\" [queryParams]=\"itemUrl?.queryParams\">\n\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t<mat-icon matListItemIcon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t\t<span matListItemTitle>{{ item.text }}</span>\n\t\t\t\t</a>\n\t\t\t} @else if (!item.hide && item.action === 'dialog') {\n\t\t\t\t<mat-list-item (click)=\"openDialog( item ) && $event.stopPropagation()\" (keydown.enter)=\"openDialog( item )\" (keydown.space)=\"openDialog( item ); $event.preventDefault()\">\n\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t<mat-icon matListItemIcon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t\t<span matListItemTitle>{{ item.text }}</span>\n\t\t\t\t</mat-list-item>\n\t\t\t}\n\t\t}\n\t</mat-nav-list>\n</ng-template>\n", styles: ["mat-card{margin-bottom:2rem}mat-card mat-card-content{margin:0 -1rem}mat-card mat-nav-list .mat-mdc-list-item{border-bottom:1px solid var(--outline-variant, #E7EBEE);text-decoration:underline}:host(.compact) .xiri-links-flat{background:transparent;box-shadow:none;padding:0;margin-bottom:0}:host(.compact) .xiri-links-header{display:flex;gap:var(--xiri-spacing-sm, 8px);align-items:center;margin-bottom:var(--xiri-spacing-sm, 8px)}:host(.compact) .xiri-links-header .header-title{font-size:var(--xiri-font-size-body);font-weight:500}:host(.compact) .xiri-links-header .header-sub{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, var(--mat-sys-on-surface-variant, #555))}:host(.compact) mat-nav-list .mat-mdc-list-item{border-bottom:1px solid var(--outline-variant, #E7EBEE);text-decoration:underline}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: XiriUrlPipe, name: "xiriUrl" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriLinksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriLinksComponent, isStandalone: true, selector: "xiri-links", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.compact": "compact()" } }, ngImport: i0, template: "@if (compact()) {\n\t<div class=\"card xiri-links-flat\">\n\t\t@if (settings().header || settings().headerIcon) {\n\t\t\t<div class=\"xiri-links-header\">\n\t\t\t\t@if (settings().headerIcon) {\n\t\t\t\t\t<div class=\"header-image\">\n\t\t\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"header-text\">\n\t\t\t\t\t@if (settings().header) {\n\t\t\t\t\t\t<div class=\"header-title\">{{ settings().header }}</div>\n\t\t\t\t\t}\n\t\t\t\t\t@if (settings().headerSub) {\n\t\t\t\t\t\t<div class=\"header-sub\">{{ settings().headerSub }}</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t}\n\t\t<ng-container *ngTemplateOutlet=\"linkList\"></ng-container>\n\t</div>\n} @else {\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-header>\n\t\t\t@if (settings().headerIcon) {\n\t\t\t\t<div mat-card-avatar class=\"header-image\">\n\t\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (settings().headerSub) {\n\t\t\t\t<mat-card-subtitle>{{ settings().headerSub }}</mat-card-subtitle>\n\t\t\t}\n\t\t\t@if (settings().header) {\n\t\t\t\t<mat-card-title>{{ settings().header }}</mat-card-title>\n\t\t\t}\n\t\t</mat-card-header>\n\t\t<mat-card-content>\n\t\t\t<ng-container *ngTemplateOutlet=\"linkList\"></ng-container>\n\t\t</mat-card-content>\n\t</mat-card>\n}\n\n<ng-template #linkList>\n\t<mat-nav-list>\n\t\t@for (item of settings().data; track item) {\n\t\t\t@if (!item.hide && (!item.action || item.action === 'link')) {\n\t\t\t\t@let itemUrl = item.url | xiriUrl;\n\t\t\t\t<a mat-list-item [routerLink]=\"itemUrl?.path\" [queryParams]=\"itemUrl?.queryParams\">\n\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t<mat-icon matListItemIcon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t\t<span matListItemTitle>{{ item.text }}</span>\n\t\t\t\t</a>\n\t\t\t} @else if (!item.hide && item.action === 'dialog') {\n\t\t\t\t<mat-list-item (click)=\"openDialog( item ) && $event.stopPropagation()\" (keydown.enter)=\"openDialog( item )\" (keydown.space)=\"openDialog( item ); $event.preventDefault()\">\n\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t<mat-icon matListItemIcon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t\t<span matListItemTitle>{{ item.text }}</span>\n\t\t\t\t</mat-list-item>\n\t\t\t}\n\t\t}\n\t</mat-nav-list>\n</ng-template>\n", styles: ["mat-card{margin-bottom:2rem}mat-card mat-card-content{margin:0 -1rem}mat-card mat-nav-list .mat-mdc-list-item{border-bottom:1px solid var(--outline-variant, #E7EBEE);text-decoration:underline}:host(.compact) .xiri-links-flat{background:transparent;box-shadow:none;padding:0;margin-bottom:0}:host(.compact) .xiri-links-header{display:flex;gap:var(--xiri-spacing-sm, 8px);align-items:center;margin-bottom:var(--xiri-spacing-sm, 8px)}:host(.compact) .xiri-links-header .header-title{font-size:var(--xiri-font-size-body);font-weight:500}:host(.compact) .xiri-links-header .header-sub{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, var(--mat-sys-on-surface-variant, #555))}:host(.compact) mat-nav-list .mat-mdc-list-item{border-bottom:1px solid var(--outline-variant, #E7EBEE);text-decoration:underline}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: XiriUrlPipe, name: "xiriUrl" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriLinksComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriLinksComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-links', imports: [MatCard,
                         MatCardHeader,
@@ -6370,10 +6534,10 @@ class XiriCardlinkComponent {
         this.compact = computed(() => !!this.settings().compact, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriCardlinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriCardlinkComponent, isStandalone: true, selector: "xiri-cardlink", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.compact": "compact()" } }, ngImport: i0, template: "@let cardUrl = settings().link | xiriUrl;\n<a [routerLink]=\"cardUrl?.path\" [queryParams]=\"cardUrl?.queryParams\">\n\t@if (compact()) {\n\t\t<div class=\"card xiri-cardlink-flat\" matRipple>\n\t\t\t<mat-card-header>\n\t\t\t\t@if (settings().icon) {\n\t\t\t\t\t<div mat-card-avatar>\n\t\t\t\t\t\t<mat-icon [fontSet]=\"settings().iconSet\">{{ settings().icon }}</mat-icon>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (settings().text) {\n\t\t\t\t\t<mat-card-title>{{ settings().text }}</mat-card-title>\n\t\t\t\t}\n\t\t\t\t@if (settings().sub) {\n\t\t\t\t\t<mat-card-subtitle>{{ settings().sub }}</mat-card-subtitle>\n\t\t\t\t}\n\t\t\t</mat-card-header>\n\t\t</div>\n\t} @else {\n\t\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\" matRipple>\n\t\t\t<mat-card-header>\n\t\t\t\t@if (settings().icon) {\n\t\t\t\t\t<div mat-card-avatar>\n\t\t\t\t\t\t<mat-icon [fontSet]=\"settings().iconSet\">{{ settings().icon }}</mat-icon>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (settings().text) {\n\t\t\t\t\t<mat-card-title>{{ settings().text }}</mat-card-title>\n\t\t\t\t}\n\t\t\t\t@if (settings().sub) {\n\t\t\t\t\t<mat-card-subtitle>{{ settings().sub }}</mat-card-subtitle>\n\t\t\t\t}\n\t\t\t</mat-card-header>\n\t\t</mat-card>\n\t}\n</a>\n", styles: [":host{margin-bottom:2rem}mat-card{transition:background-color var(--xiri-duration-fast, .15s) var(--xiri-easing-standard, cubic-bezier(.4, 0, .2, 1))}mat-card:hover{background-color:var(--surface-variant, #DEE3EB)}:host(.compact){margin-bottom:0}:host(.compact) .xiri-cardlink-flat{background:transparent;box-shadow:none;padding:0;display:block;transition:background-color var(--xiri-duration-fast, .15s) var(--xiri-easing-standard, cubic-bezier(.4, 0, .2, 1))}:host(.compact) .xiri-cardlink-flat:hover{background-color:var(--surface-variant, #DEE3EB)}.mat-mdc-card-avatar{background-color:var(--primary, #2892D9);border-radius:50%;color:var(--on-primary, white);text-align:center;width:4rem;height:4rem}.mat-mdc-card-avatar mat-icon{font-size:2rem;line-height:4rem;width:2rem;height:4rem}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "pipe", type: XiriUrlPipe, name: "xiriUrl" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriCardlinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriCardlinkComponent, isStandalone: true, selector: "xiri-cardlink", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.compact": "compact()" } }, ngImport: i0, template: "@let cardUrl = settings().link | xiriUrl;\n<a [routerLink]=\"cardUrl?.path\" [queryParams]=\"cardUrl?.queryParams\">\n\t@if (compact()) {\n\t\t<div class=\"card xiri-cardlink-flat\" matRipple>\n\t\t\t<mat-card-header>\n\t\t\t\t@if (settings().icon) {\n\t\t\t\t\t<div mat-card-avatar>\n\t\t\t\t\t\t<mat-icon [fontSet]=\"settings().iconSet\">{{ settings().icon }}</mat-icon>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (settings().text) {\n\t\t\t\t\t<mat-card-title>{{ settings().text }}</mat-card-title>\n\t\t\t\t}\n\t\t\t\t@if (settings().sub) {\n\t\t\t\t\t<mat-card-subtitle>{{ settings().sub }}</mat-card-subtitle>\n\t\t\t\t}\n\t\t\t</mat-card-header>\n\t\t</div>\n\t} @else {\n\t\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\" matRipple>\n\t\t\t<mat-card-header>\n\t\t\t\t@if (settings().icon) {\n\t\t\t\t\t<div mat-card-avatar>\n\t\t\t\t\t\t<mat-icon [fontSet]=\"settings().iconSet\">{{ settings().icon }}</mat-icon>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (settings().text) {\n\t\t\t\t\t<mat-card-title>{{ settings().text }}</mat-card-title>\n\t\t\t\t}\n\t\t\t\t@if (settings().sub) {\n\t\t\t\t\t<mat-card-subtitle>{{ settings().sub }}</mat-card-subtitle>\n\t\t\t\t}\n\t\t\t</mat-card-header>\n\t\t</mat-card>\n\t}\n</a>\n", styles: [":host{margin-bottom:2rem}mat-card{transition:background-color var(--xiri-duration-fast, .15s) var(--xiri-easing-standard, cubic-bezier(.4, 0, .2, 1))}mat-card:hover{background-color:var(--surface-variant, #DEE3EB)}:host(.compact){margin-bottom:0}:host(.compact) .xiri-cardlink-flat{background:transparent;box-shadow:none;padding:0;display:block;transition:background-color var(--xiri-duration-fast, .15s) var(--xiri-easing-standard, cubic-bezier(.4, 0, .2, 1))}:host(.compact) .xiri-cardlink-flat:hover{background-color:var(--surface-variant, #DEE3EB)}.mat-mdc-card-avatar{background-color:var(--primary, #2892D9);border-radius:50%;color:var(--on-primary, white);text-align:center;width:4rem;height:4rem}.mat-mdc-card-avatar mat-icon{font-size:2rem;line-height:4rem;width:2rem;height:4rem}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "pipe", type: XiriUrlPipe, name: "xiriUrl" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriCardlinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriCardlinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-cardlink', imports: [RouterLink,
                         MatCard,
@@ -6407,10 +6571,10 @@ class XiriSkeletonComponent {
         this.columnsArray = computed(() => Array.from({ length: this.columns() }), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "columnsArray" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriSkeletonComponent, isStandalone: true, selector: "xiri-skeleton", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-label": "Laden..." }, properties: { "class.fill": "fill()" } }, ngImport: i0, template: "@switch (type()) {\n\t@case ('text') {\n\t\t<div class=\"skeleton-text\">\n\t\t\t@for (_ of linesArray(); track $index) {\n\t\t\t\t<div class=\"skeleton-line\" [class.animate]=\"animate()\"\n\t\t\t\t     [style.width]=\"$last ? '60%' : width()\"\n\t\t\t\t     [style.height]=\"height()\"></div>\n\t\t\t}\n\t\t</div>\n\t}\n\t@case ('circle') {\n\t\t<div class=\"skeleton-circle\" [class.animate]=\"animate()\"\n\t\t     [style.width]=\"width()\"\n\t\t     [style.height]=\"width()\"></div>\n\t}\n\t@case ('rect') {\n\t\t<div class=\"skeleton-rect\" [class.animate]=\"animate()\"\n\t\t     [style.width]=\"width()\"\n\t\t     [style.height]=\"height()\"></div>\n\t}\n\t@case ('table-row') {\n\t\t<div class=\"skeleton-table\" [class.fill-height]=\"fill()\">\n\t\t\t@for (_ of linesArray(); track $index) {\n\t\t\t\t<div class=\"skeleton-table-row\">\n\t\t\t\t\t@for (_ of columnsArray(); track $index) {\n\t\t\t\t\t\t<div class=\"skeleton-table-cell\">\n\t\t\t\t\t\t\t<div class=\"skeleton-line\" [class.animate]=\"animate()\"></div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t}\n}\n", styles: [":host{display:block}:host.fill{height:100%}.skeleton-line,.skeleton-circle,.skeleton-rect{background-color:var(--color-gray-200, #E9ECEF);border-radius:var(--xiri-radius-xs)}.skeleton-line.animate,.skeleton-circle.animate,.skeleton-rect.animate{background-image:linear-gradient(90deg,var(--color-gray-200, #E9ECEF) 0px,var(--color-gray-100, #F8F9FA) 40px,var(--color-gray-200, #E9ECEF) 80px);background-size:200px 100%;animation:shimmer 1.5s var(--xiri-easing-standard) infinite}.skeleton-text{display:flex;flex-direction:column;gap:8px}.skeleton-text .skeleton-line{height:1em}.skeleton-circle{border-radius:50%}.skeleton-rect{border-radius:var(--xiri-radius-md)}.skeleton-table{display:flex;flex-direction:column;gap:12px}.skeleton-table.fill-height{height:100%;overflow:hidden}.skeleton-table.fill-height .skeleton-table-row{flex:1;min-height:0}.skeleton-table-row{display:flex;gap:16px}.skeleton-table-cell{flex:1}.skeleton-table-cell .skeleton-line{height:1em;width:100%}@media(prefers-reduced-motion:reduce){.skeleton-line.animate,.skeleton-circle.animate,.skeleton-rect.animate{animation:none}}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriSkeletonComponent, isStandalone: true, selector: "xiri-skeleton", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-label": "Laden..." }, properties: { "class.fill": "fill()" } }, ngImport: i0, template: "@switch (type()) {\n\t@case ('text') {\n\t\t<div class=\"skeleton-text\">\n\t\t\t@for (_ of linesArray(); track $index) {\n\t\t\t\t<div class=\"skeleton-line\" [class.animate]=\"animate()\"\n\t\t\t\t     [style.width]=\"$last ? '60%' : width()\"\n\t\t\t\t     [style.height]=\"height()\"></div>\n\t\t\t}\n\t\t</div>\n\t}\n\t@case ('circle') {\n\t\t<div class=\"skeleton-circle\" [class.animate]=\"animate()\"\n\t\t     [style.width]=\"width()\"\n\t\t     [style.height]=\"width()\"></div>\n\t}\n\t@case ('rect') {\n\t\t<div class=\"skeleton-rect\" [class.animate]=\"animate()\"\n\t\t     [style.width]=\"width()\"\n\t\t     [style.height]=\"height()\"></div>\n\t}\n\t@case ('table-row') {\n\t\t<div class=\"skeleton-table\" [class.fill-height]=\"fill()\">\n\t\t\t@for (_ of linesArray(); track $index) {\n\t\t\t\t<div class=\"skeleton-table-row\">\n\t\t\t\t\t@for (_ of columnsArray(); track $index) {\n\t\t\t\t\t\t<div class=\"skeleton-table-cell\">\n\t\t\t\t\t\t\t<div class=\"skeleton-line\" [class.animate]=\"animate()\"></div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t}\n}\n", styles: [":host{display:block}:host.fill{height:100%}.skeleton-line,.skeleton-circle,.skeleton-rect{background-color:var(--color-gray-200, #E9ECEF);border-radius:var(--xiri-radius-xs)}.skeleton-line.animate,.skeleton-circle.animate,.skeleton-rect.animate{background-image:linear-gradient(90deg,var(--color-gray-200, #E9ECEF) 0px,var(--color-gray-100, #F8F9FA) 40px,var(--color-gray-200, #E9ECEF) 80px);background-size:200px 100%;animation:shimmer 1.5s var(--xiri-easing-standard) infinite}.skeleton-text{display:flex;flex-direction:column;gap:8px}.skeleton-text .skeleton-line{height:1em}.skeleton-circle{border-radius:50%}.skeleton-rect{border-radius:var(--xiri-radius-md)}.skeleton-table{display:flex;flex-direction:column;gap:12px}.skeleton-table.fill-height{height:100%;overflow:hidden}.skeleton-table.fill-height .skeleton-table-row{flex:1;min-height:0}.skeleton-table-row{display:flex;gap:16px}.skeleton-table-cell{flex:1}.skeleton-table-cell .skeleton-line{height:1em;width:100%}@media(prefers-reduced-motion:reduce){.skeleton-line.animate,.skeleton-circle.animate,.skeleton-rect.animate{animation:none}}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriSkeletonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriSkeletonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-skeleton', host: { 'role': 'status', 'aria-label': 'Laden...', '[class.fill]': 'fill()' }, template: "@switch (type()) {\n\t@case ('text') {\n\t\t<div class=\"skeleton-text\">\n\t\t\t@for (_ of linesArray(); track $index) {\n\t\t\t\t<div class=\"skeleton-line\" [class.animate]=\"animate()\"\n\t\t\t\t     [style.width]=\"$last ? '60%' : width()\"\n\t\t\t\t     [style.height]=\"height()\"></div>\n\t\t\t}\n\t\t</div>\n\t}\n\t@case ('circle') {\n\t\t<div class=\"skeleton-circle\" [class.animate]=\"animate()\"\n\t\t     [style.width]=\"width()\"\n\t\t     [style.height]=\"width()\"></div>\n\t}\n\t@case ('rect') {\n\t\t<div class=\"skeleton-rect\" [class.animate]=\"animate()\"\n\t\t     [style.width]=\"width()\"\n\t\t     [style.height]=\"height()\"></div>\n\t}\n\t@case ('table-row') {\n\t\t<div class=\"skeleton-table\" [class.fill-height]=\"fill()\">\n\t\t\t@for (_ of linesArray(); track $index) {\n\t\t\t\t<div class=\"skeleton-table-row\">\n\t\t\t\t\t@for (_ of columnsArray(); track $index) {\n\t\t\t\t\t\t<div class=\"skeleton-table-cell\">\n\t\t\t\t\t\t\t<div class=\"skeleton-line\" [class.animate]=\"animate()\"></div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t}\n}\n", styles: [":host{display:block}:host.fill{height:100%}.skeleton-line,.skeleton-circle,.skeleton-rect{background-color:var(--color-gray-200, #E9ECEF);border-radius:var(--xiri-radius-xs)}.skeleton-line.animate,.skeleton-circle.animate,.skeleton-rect.animate{background-image:linear-gradient(90deg,var(--color-gray-200, #E9ECEF) 0px,var(--color-gray-100, #F8F9FA) 40px,var(--color-gray-200, #E9ECEF) 80px);background-size:200px 100%;animation:shimmer 1.5s var(--xiri-easing-standard) infinite}.skeleton-text{display:flex;flex-direction:column;gap:8px}.skeleton-text .skeleton-line{height:1em}.skeleton-circle{border-radius:50%}.skeleton-rect{border-radius:var(--xiri-radius-md)}.skeleton-table{display:flex;flex-direction:column;gap:12px}.skeleton-table.fill-height{height:100%;overflow:hidden}.skeleton-table.fill-height .skeleton-table-row{flex:1;min-height:0}.skeleton-table-row{display:flex;gap:16px}.skeleton-table-cell{flex:1}.skeleton-table-cell .skeleton-line{height:1em;width:100%}@media(prefers-reduced-motion:reduce){.skeleton-line.animate,.skeleton-circle.animate,.skeleton-rect.animate{animation:none}}\n"] }]
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }] } });
@@ -6531,10 +6695,10 @@ class XiriCardComponent {
             return;
         this.cardResource.reload();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriCardComponent, isStandalone: true, selector: "xiri-card", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t<mat-card-header>\n\t\t@if (settings().headerIcon) {\n\t\t\t<div mat-card-avatar class=\"header-image\">\n\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t</div>\n\t\t}\n\t\t@if (settings().header) {\n\t\t\t<mat-card-title [class]=\"{hasHeaderSub: settings().headerSub}\">{{ settings().header }}</mat-card-title>\n\t\t}\n\t\t@if (settings().headerSub) {\n\t\t\t<mat-card-subtitle>{{ settings().headerSub }}</mat-card-subtitle>\n\t\t}\n\t\t@if (settings().buttonsTop) {\n\t\t\t<xiri-buttonline [settings]=\"settings().buttonsTop!\"></xiri-buttonline>\n\t\t}\n\t\t@if (settings().collapsible) {\n\t\t\t<button mat-icon-button (click)=\"toggleCollapse()\" class=\"collapse-btn\" aria-label=\"Auf-/Zuklappen\">\n\t\t\t\t<mat-icon>{{ isCollapsed() ? 'expand_more' : 'expand_less' }}</mat-icon>\n\t\t\t</button>\n\t\t}\n\t\t@if (settings().reload && settings().url) {\n\t\t\t<button mat-icon-button (click)=\"reload()\" [disabled]=\"loading()\" class=\"reload-btn\" aria-label=\"Neu laden\">\n\t\t\t\t<mat-icon [class.spinning]=\"loading()\">autorenew</mat-icon>\n\t\t\t</button>\n\t\t}\n\t</mat-card-header>\n\t<div class=\"collapse-wrapper\" [class.collapsed]=\"isCollapsed()\">\n\t\t<div class=\"collapse-inner\">\n\t\t\t@if (loading() && !cardData()) {\n\t\t\t\t<mat-card-content>\n\t\t\t\t\t<xiri-skeleton type=\"table-row\" [columns]=\"2\" [lines]=\"3\"></xiri-skeleton>\n\t\t\t\t</mat-card-content>\n\t\t\t} @else if (errorMsg()) {\n\t\t\t\t<mat-card-content>\n\t\t\t\t\t<div class=\"load-error\">{{ errorMsg() }}</div>\n\t\t\t\t</mat-card-content>\n\t\t\t} @else if (hasComponents()) {\n\t\t\t\t<mat-card-content class=\"hasComponents\" [style.--xiri-card-padding]=\"componentsPadding()\">\n\t\t\t\t\t<xiri-dyncomponent [data]=\"settings().components!\" class=\"xrow\"></xiri-dyncomponent>\n\t\t\t\t</mat-card-content>\n\t\t\t} @else {\n\t\t\t\t<mat-card-content class=\"hasTable\" [style.max-height]=\"settings().maxHeight || '50vh'\">\n\t\t\t\t\t@if (rawTable()) {\n\t\t\t\t\t\t<xiri-raw-table [settings]=\"rawTable()!\"></xiri-raw-table>\n\t\t\t\t\t}\n\t\t\t\t</mat-card-content>\n\t\t\t}\n\t\t\t@if (settings().buttonsBottom) {\n\t\t\t\t<mat-card-actions align=\"end\">\n\t\t\t\t\t<xiri-buttonline [settings]=\"settings().buttonsBottom!\"></xiri-buttonline>\n\t\t\t\t</mat-card-actions>\n\t\t\t}\n\t\t</div>\n\t</div>\n</mat-card>\n", styles: [":host{animation:fadeIn var(--xiri-duration-fast) var(--xiri-easing-standard)}.collapse-wrapper{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--xiri-duration-normal) var(--xiri-easing-standard)}.collapse-wrapper.collapsed{grid-template-rows:0fr}.collapse-inner{overflow:hidden;min-height:0}.spinning{animation:spin 1s linear infinite}.card{overflow:hidden}.card mat-card-header{margin:0 0 2px;box-shadow:var(--xiri-shadow-xs);padding:4px 8px 4px 16px;align-items:center;min-height:32px}.card mat-card-header .header-image{margin-bottom:0;width:var(--xiri-icon-size-lg);height:var(--xiri-icon-size-lg);align-items:center;display:flex}.card mat-card-header .header-image mat-icon{font-size:var(--xiri-icon-size-lg);height:var(--xiri-icon-size-lg);width:var(--xiri-icon-size-lg);color:var(--primary)}.card mat-card-header mat-card-title.hasHeaderSub{padding-top:2px}.card mat-card-header mat-card-subtitle{padding-bottom:2px}.card mat-card-header xiri-buttonline{display:flex;justify-content:flex-end;flex:1}.card mat-card-header xiri-buttonline ::ng-deep button{width:32px;height:32px;padding:4px}.card mat-card-header xiri-buttonline ::ng-deep button mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}.card .collapse-btn{margin-left:auto;width:32px;height:32px;padding:4px}.card .collapse-btn mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}.card .reload-btn{width:32px;height:32px;padding:4px}.card .reload-btn mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}.card mat-card-content{padding:0}.card mat-card-content.hasTable{overflow-x:auto}.card mat-card-content.hasComponents{padding:var(--xiri-card-padding, var(--xiri-spacing-md, 16px))}@media(max-width:575.98px){.card mat-card-content.hasComponents{padding:8px}}.card mat-card-content xiri-skeleton{padding:16px}.card mat-card-content .load-error{padding:16px;color:var(--error, #B3261E)}.card mat-card-actions{padding:4px 8px;min-height:32px;border-top:1px solid var(--outline-variant, rgba(0, 0, 0, .12))}.card mat-card-actions xiri-buttonline ::ng-deep button{width:32px;height:32px;padding:4px}.card mat-card-actions xiri-buttonline ::ng-deep button mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => MatCard), selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i0.forwardRef(() => MatCardHeader), selector: "mat-card-header" }, { kind: "directive", type: i0.forwardRef(() => MatCardAvatar), selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "component", type: i0.forwardRef(() => MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => MatIconButton), selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i0.forwardRef(() => MatCardTitle), selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i0.forwardRef(() => MatCardSubtitle), selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i0.forwardRef(() => XiriButtonlineComponent), selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "directive", type: i0.forwardRef(() => MatCardContent), selector: "mat-card-content" }, { kind: "component", type: i0.forwardRef(() => XiriRawTableComponent), selector: "xiri-raw-table", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriSkeletonComponent), selector: "xiri-skeleton", inputs: ["type", "width", "height", "lines", "columns", "animate", "fill"] }, { kind: "directive", type: i0.forwardRef(() => MatCardActions), selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "component", type: i0.forwardRef(() => XiriDynComponentComponent), selector: "xiri-dyncomponent", inputs: ["data", "filterData", "dyncomponent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriCardComponent, isStandalone: true, selector: "xiri-card", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t<mat-card-header>\n\t\t@if (settings().headerIcon) {\n\t\t\t<div mat-card-avatar class=\"header-image\">\n\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t</div>\n\t\t}\n\t\t@if (settings().header) {\n\t\t\t<mat-card-title [class]=\"{hasHeaderSub: settings().headerSub}\">{{ settings().header }}</mat-card-title>\n\t\t}\n\t\t@if (settings().headerSub) {\n\t\t\t<mat-card-subtitle>{{ settings().headerSub }}</mat-card-subtitle>\n\t\t}\n\t\t@if (settings().buttonsTop) {\n\t\t\t<xiri-buttonline [settings]=\"settings().buttonsTop!\"></xiri-buttonline>\n\t\t}\n\t\t@if (settings().collapsible) {\n\t\t\t<button mat-icon-button (click)=\"toggleCollapse()\" class=\"collapse-btn\" aria-label=\"Auf-/Zuklappen\">\n\t\t\t\t<mat-icon>{{ isCollapsed() ? 'expand_more' : 'expand_less' }}</mat-icon>\n\t\t\t</button>\n\t\t}\n\t\t@if (settings().reload && settings().url) {\n\t\t\t<button mat-icon-button (click)=\"reload()\" [disabled]=\"loading()\" class=\"reload-btn\" aria-label=\"Neu laden\">\n\t\t\t\t<mat-icon [class.spinning]=\"loading()\">autorenew</mat-icon>\n\t\t\t</button>\n\t\t}\n\t</mat-card-header>\n\t<div class=\"collapse-wrapper\" [class.collapsed]=\"isCollapsed()\">\n\t\t<div class=\"collapse-inner\">\n\t\t\t@if (loading() && !cardData()) {\n\t\t\t\t<mat-card-content>\n\t\t\t\t\t<xiri-skeleton type=\"table-row\" [columns]=\"2\" [lines]=\"3\"></xiri-skeleton>\n\t\t\t\t</mat-card-content>\n\t\t\t} @else if (errorMsg()) {\n\t\t\t\t<mat-card-content>\n\t\t\t\t\t<div class=\"load-error\">{{ errorMsg() }}</div>\n\t\t\t\t</mat-card-content>\n\t\t\t} @else if (hasComponents()) {\n\t\t\t\t<mat-card-content class=\"hasComponents\" [style.--xiri-card-padding]=\"componentsPadding()\">\n\t\t\t\t\t<xiri-dyncomponent [data]=\"settings().components!\" class=\"xrow\"></xiri-dyncomponent>\n\t\t\t\t</mat-card-content>\n\t\t\t} @else {\n\t\t\t\t<mat-card-content class=\"hasTable\" [style.max-height]=\"settings().maxHeight || '50vh'\">\n\t\t\t\t\t@if (rawTable()) {\n\t\t\t\t\t\t<xiri-raw-table [settings]=\"rawTable()!\"></xiri-raw-table>\n\t\t\t\t\t}\n\t\t\t\t</mat-card-content>\n\t\t\t}\n\t\t\t@if (settings().buttonsBottom) {\n\t\t\t\t<mat-card-actions align=\"end\">\n\t\t\t\t\t<xiri-buttonline [settings]=\"settings().buttonsBottom!\"></xiri-buttonline>\n\t\t\t\t</mat-card-actions>\n\t\t\t}\n\t\t</div>\n\t</div>\n</mat-card>\n", styles: [":host{animation:fadeIn var(--xiri-duration-fast) var(--xiri-easing-standard)}.collapse-wrapper{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--xiri-duration-normal) var(--xiri-easing-standard)}.collapse-wrapper.collapsed{grid-template-rows:0fr}.collapse-inner{overflow:hidden;min-height:0}.spinning{animation:spin 1s linear infinite}.card{overflow:hidden}.card mat-card-header{margin:0 0 2px;box-shadow:var(--xiri-shadow-xs);padding:4px 8px 4px 16px;align-items:center;min-height:32px}.card mat-card-header .header-image{margin-bottom:0;width:var(--xiri-icon-size-lg);height:var(--xiri-icon-size-lg);align-items:center;display:flex}.card mat-card-header .header-image mat-icon{font-size:var(--xiri-icon-size-lg);height:var(--xiri-icon-size-lg);width:var(--xiri-icon-size-lg);color:var(--primary)}.card mat-card-header mat-card-title.hasHeaderSub{padding-top:2px}.card mat-card-header mat-card-subtitle{padding-bottom:2px}.card mat-card-header xiri-buttonline{display:flex;justify-content:flex-end;flex:1}.card mat-card-header xiri-buttonline ::ng-deep button{width:32px;height:32px;padding:4px}.card mat-card-header xiri-buttonline ::ng-deep button mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}.card .collapse-btn{margin-left:auto;width:32px;height:32px;padding:4px}.card .collapse-btn mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}.card .reload-btn{width:32px;height:32px;padding:4px}.card .reload-btn mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}.card mat-card-content{padding:0}.card mat-card-content.hasTable{overflow-x:auto}.card mat-card-content.hasComponents{padding:var(--xiri-card-padding, var(--xiri-spacing-md, 16px))}@media(max-width:575.98px){.card mat-card-content.hasComponents{padding:8px}}.card mat-card-content xiri-skeleton{padding:16px}.card mat-card-content .load-error{padding:16px;color:var(--error, #B3261E)}.card mat-card-actions{padding:4px 8px;min-height:32px;border-top:1px solid var(--outline-variant, rgba(0, 0, 0, .12))}.card mat-card-actions xiri-buttonline ::ng-deep button{width:32px;height:32px;padding:4px}.card mat-card-actions xiri-buttonline ::ng-deep button mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => MatCard), selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i0.forwardRef(() => MatCardHeader), selector: "mat-card-header" }, { kind: "directive", type: i0.forwardRef(() => MatCardAvatar), selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "component", type: i0.forwardRef(() => MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => MatIconButton), selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i0.forwardRef(() => MatCardTitle), selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i0.forwardRef(() => MatCardSubtitle), selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i0.forwardRef(() => XiriButtonlineComponent), selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "directive", type: i0.forwardRef(() => MatCardContent), selector: "mat-card-content" }, { kind: "component", type: i0.forwardRef(() => XiriRawTableComponent), selector: "xiri-raw-table", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriSkeletonComponent), selector: "xiri-skeleton", inputs: ["type", "width", "height", "lines", "columns", "animate", "fill"] }, { kind: "directive", type: i0.forwardRef(() => MatCardActions), selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "component", type: i0.forwardRef(() => XiriDynComponentComponent), selector: "xiri-dyncomponent", inputs: ["data", "filterData", "dyncomponent"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-card', imports: [MatCard,
                         MatCardHeader,
@@ -6592,10 +6756,10 @@ class XiriTabsComponent {
             return true;
         return this.visitedTabs().has(index);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriTabsComponent, isStandalone: true, selector: "xiri-tabs", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, filterData: { classPropertyName: "filterData", publicName: "filterData", isSignal: true, isRequired: false, transformFunction: null }, dyncomponent: { classPropertyName: "dyncomponent", publicName: "dyncomponent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-tab-group\n\t[selectedIndex]=\"selectedIndex()\"\n\t[dynamicHeight]=\"settings().dynamicHeight ?? false\"\n\t[animationDuration]=\"settings().animationDuration ?? '225ms'\"\n\t[headerPosition]=\"settings().headerPosition ?? 'above'\"\n\t[mat-align-tabs]=\"settings().alignTabs ?? 'start'\"\n\t[mat-stretch-tabs]=\"settings().stretchTabs ?? false\"\n\t(selectedIndexChange)=\"onTabChange($event)\">\n\n\t@for (tab of settings().tabs; track tab.label; let i = $index) {\n\t\t<mat-tab [disabled]=\"tab.disabled ?? false\">\n\t\t\t<ng-template mat-tab-label>\n\t\t\t\t@if (tab.icon) {\n\t\t\t\t\t<mat-icon>{{ tab.icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t\t{{ tab.label }}\n\t\t\t</ng-template>\n\n\t\t\t@if (shouldRenderContent(i, tab)) {\n\t\t\t\t<ng-container *ngTemplateOutlet=\"dyncomponent(); context: { $implicit: { data: tab.data, filterData: filterData() } }\"></ng-container>\n\t\t\t}\n\t\t</mat-tab>\n\t}\n</mat-tab-group>\n", styles: [":host{display:block}mat-icon{margin-right:8px}\n"], dependencies: [{ kind: "component", type: MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "directive", type: MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriTabsComponent, isStandalone: true, selector: "xiri-tabs", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, filterData: { classPropertyName: "filterData", publicName: "filterData", isSignal: true, isRequired: false, transformFunction: null }, dyncomponent: { classPropertyName: "dyncomponent", publicName: "dyncomponent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-tab-group\n\t[selectedIndex]=\"selectedIndex()\"\n\t[dynamicHeight]=\"settings().dynamicHeight ?? false\"\n\t[animationDuration]=\"settings().animationDuration ?? '225ms'\"\n\t[headerPosition]=\"settings().headerPosition ?? 'above'\"\n\t[mat-align-tabs]=\"settings().alignTabs ?? 'start'\"\n\t[mat-stretch-tabs]=\"settings().stretchTabs ?? false\"\n\t(selectedIndexChange)=\"onTabChange($event)\">\n\n\t@for (tab of settings().tabs; track tab.label; let i = $index) {\n\t\t<mat-tab [disabled]=\"tab.disabled ?? false\">\n\t\t\t<ng-template mat-tab-label>\n\t\t\t\t@if (tab.icon) {\n\t\t\t\t\t<mat-icon>{{ tab.icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t\t{{ tab.label }}\n\t\t\t</ng-template>\n\n\t\t\t@if (shouldRenderContent(i, tab)) {\n\t\t\t\t<ng-container *ngTemplateOutlet=\"dyncomponent(); context: { $implicit: { data: tab.data, filterData: filterData() } }\"></ng-container>\n\t\t\t}\n\t\t</mat-tab>\n\t}\n</mat-tab-group>\n", styles: [":host{display:block}mat-icon{margin-right:8px}\n"], dependencies: [{ kind: "component", type: MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "directive", type: MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-tabs', imports: [
                         MatTabGroup,
@@ -6649,10 +6813,10 @@ class XiriExpansionComponent {
             return true;
         return this.visitedPanels().has(index);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriExpansionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriExpansionComponent, isStandalone: true, selector: "xiri-expansion", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, filterData: { classPropertyName: "filterData", publicName: "filterData", isSignal: true, isRequired: false, transformFunction: null }, dyncomponent: { classPropertyName: "dyncomponent", publicName: "dyncomponent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-accordion\n\t[multi]=\"settings().multi ?? false\"\n\t[displayMode]=\"settings().displayMode ?? 'default'\"\n\t[hideToggle]=\"settings().hideToggle ?? false\"\n\t[togglePosition]=\"settings().togglePosition ?? 'after'\">\n\n\t@for (panel of settings().panels; track panel.title; let i = $index) {\n\t\t<mat-expansion-panel\n\t\t\t[disabled]=\"panel.disabled ?? false\"\n\t\t\t[expanded]=\"panel.expanded ?? false\"\n\t\t\t(opened)=\"onPanelOpened(i)\"\n\t\t\t(closed)=\"onPanelClosed(i)\">\n\n\t\t\t<mat-expansion-panel-header>\n\t\t\t\t@if (panel.icon) {\n\t\t\t\t\t<mat-icon>{{ panel.icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t\t<mat-panel-title>{{ panel.title }}</mat-panel-title>\n\t\t\t\t@if (panel.description) {\n\t\t\t\t\t<mat-panel-description>{{ panel.description }}</mat-panel-description>\n\t\t\t\t}\n\t\t\t</mat-expansion-panel-header>\n\n\t\t\t@if (shouldRenderContent(i, panel)) {\n\t\t\t\t<ng-container *ngTemplateOutlet=\"dyncomponent(); context: { $implicit: { data: panel.data, filterData: filterData() } }\"></ng-container>\n\t\t\t}\n\t\t</mat-expansion-panel>\n\t}\n</mat-accordion>\n", styles: [":host{display:block}mat-icon{margin-right:8px}\n"], dependencies: [{ kind: "directive", type: MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { 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: "directive", type: MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriExpansionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriExpansionComponent, isStandalone: true, selector: "xiri-expansion", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, filterData: { classPropertyName: "filterData", publicName: "filterData", isSignal: true, isRequired: false, transformFunction: null }, dyncomponent: { classPropertyName: "dyncomponent", publicName: "dyncomponent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-accordion\n\t[multi]=\"settings().multi ?? false\"\n\t[displayMode]=\"settings().displayMode ?? 'default'\"\n\t[hideToggle]=\"settings().hideToggle ?? false\"\n\t[togglePosition]=\"settings().togglePosition ?? 'after'\">\n\n\t@for (panel of settings().panels; track panel.title; let i = $index) {\n\t\t<mat-expansion-panel\n\t\t\t[disabled]=\"panel.disabled ?? false\"\n\t\t\t[expanded]=\"panel.expanded ?? false\"\n\t\t\t(opened)=\"onPanelOpened(i)\"\n\t\t\t(closed)=\"onPanelClosed(i)\">\n\n\t\t\t<mat-expansion-panel-header>\n\t\t\t\t@if (panel.icon) {\n\t\t\t\t\t<mat-icon>{{ panel.icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t\t<mat-panel-title>{{ panel.title }}</mat-panel-title>\n\t\t\t\t@if (panel.description) {\n\t\t\t\t\t<mat-panel-description>{{ panel.description }}</mat-panel-description>\n\t\t\t\t}\n\t\t\t</mat-expansion-panel-header>\n\n\t\t\t@if (shouldRenderContent(i, panel)) {\n\t\t\t\t<ng-container *ngTemplateOutlet=\"dyncomponent(); context: { $implicit: { data: panel.data, filterData: filterData() } }\"></ng-container>\n\t\t\t}\n\t\t</mat-expansion-panel>\n\t}\n</mat-accordion>\n", styles: [":host{display:block}mat-icon{margin-right:8px}\n"], dependencies: [{ kind: "directive", type: MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { 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: "directive", type: MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriExpansionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriExpansionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-expansion', imports: [
                         MatAccordion,
@@ -6672,10 +6836,10 @@ class XiriStatComponent {
         this.compact = computed(() => !!this.settings().compact, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriStatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriStatComponent, isStandalone: true, selector: "xiri-stat", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.compact": "compact()" } }, ngImport: i0, template: "@if (compact()) {\n\t<div class=\"stat-flat\">\n\t\t<ng-container *ngTemplateOutlet=\"statBody\"></ng-container>\n\t</div>\n} @else {\n\t<mat-card class=\"stat-card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-content>\n\t\t\t<ng-container *ngTemplateOutlet=\"statBody\"></ng-container>\n\t\t</mat-card-content>\n\t</mat-card>\n}\n\n<ng-template #statBody>\n\t<div class=\"stat-content\">\n\t\t@if (settings().icon) {\n\t\t\t<div class=\"stat-icon\">\n\t\t\t\t<mat-icon [class]=\"settings().iconColor || 'primary'\">{{ settings().icon }}</mat-icon>\n\t\t\t</div>\n\t\t}\n\t\t<div class=\"stat-data\">\n\t\t\t<div class=\"stat-value\" [class]=\"settings().color || ''\">\n\t\t\t\t@if (settings().prefix) {\n\t\t\t\t\t<span class=\"prefix\">{{ settings().prefix }}</span>\n\t\t\t\t}\n\t\t\t\t{{ settings().value }}\n\t\t\t\t@if (settings().suffix) {\n\t\t\t\t\t<span class=\"suffix\">{{ settings().suffix }}</span>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div class=\"stat-label\">{{ settings().label }}</div>\n\t\t\t@if (settings().reference; as reference) {\n\t\t\t\t<div class=\"stat-reference\">{{ reference }}</div>\n\t\t\t}\n\t\t</div>\n\t\t@if (settings().trend; as trend) {\n\t\t\t<div class=\"stat-trend\" [class]=\"trend.direction\">\n\t\t\t\t<mat-icon>\n\t\t\t\t\t@switch (trend.direction) {\n\t\t\t\t\t\t@case ('up') { trending_up }\n\t\t\t\t\t\t@case ('down') { trending_down }\n\t\t\t\t\t\t@default { trending_flat }\n\t\t\t\t\t}\n\t\t\t\t</mat-icon>\n\t\t\t\t<span>{{ trend.value > 0 ? '+' : '' }}{{ trend.value }}%</span>\n\t\t\t</div>\n\t\t}\n\t</div>\n</ng-template>\n", styles: [":host{display:block;animation:scaleIn var(--xiri-duration-normal) var(--xiri-easing-decelerate) both}:host-context(.xiri-stat-grid):nth-child(1){animation-delay:0ms}:host-context(.xiri-stat-grid):nth-child(2){animation-delay:50ms}:host-context(.xiri-stat-grid):nth-child(3){animation-delay:.1s}:host-context(.xiri-stat-grid):nth-child(4){animation-delay:.15s}:host-context(.xiri-stat-grid):nth-child(5){animation-delay:.2s}:host-context(.xiri-stat-grid):nth-child(6){animation-delay:.25s}:host-context(.xiri-stat-grid):nth-child(7){animation-delay:.3s}:host-context(.xiri-stat-grid):nth-child(8){animation-delay:.35s}:host-context(.xiri-stat-grid):nth-child(9){animation-delay:.4s}:host-context(.xiri-stat-grid):nth-child(10){animation-delay:.45s}:host-context(.xiri-stat-grid):nth-child(11){animation-delay:.5s}:host-context(.xiri-stat-grid):nth-child(12){animation-delay:.55s}.stat-card{padding:0}.stat-card mat-card-content{padding:var(--xiri-spacing-md) var(--xiri-spacing-md)}:host(.compact){animation:none}:host(.compact) .stat-flat{padding:var(--xiri-spacing-sm) var(--xiri-spacing-sm);background:transparent;box-shadow:none}:host(.compact) .stat-icon mat-icon{font-size:24px;width:24px;height:24px}:host(.compact) .stat-value{font-size:1.25rem;font-weight:600}:host(.compact) .stat-value .prefix,:host(.compact) .stat-value .suffix{font-size:var(--xiri-font-size-label)}:host(.compact) .stat-label{font-size:var(--xiri-font-size-label)}.stat-content{display:flex;align-items:center;flex-wrap:wrap;gap:var(--xiri-spacing-md);min-width:0}.stat-icon{flex-shrink:0}.stat-icon mat-icon{font-size:36px;width:36px;height:36px;opacity:.8}.stat-data{flex:1;min-width:5rem;color:var(--on-surface, #1B1B1F)}.stat-value{font-size:1.75rem;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stat-value .prefix,.stat-value .suffix{font-size:var(--xiri-font-size-body);font-weight:400;opacity:.7}.stat-label{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, #44474F);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stat-reference{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, #44474F);opacity:.7;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stat-trend{display:flex;align-items:center;flex-shrink:0;gap:2px;font-size:var(--xiri-font-size-label);font-weight:500;padding:var(--xiri-spacing-xs) var(--xiri-spacing-sm);border-radius:var(--xiri-radius-xs)}.stat-trend mat-icon{font-size:18px;width:18px;height:18px}.stat-trend.up{color:var(--color-success, #2ECC71);background-color:color-mix(in srgb,var(--color-success, #2ECC71) 10%,transparent)}.stat-trend.down{color:var(--error, #E74C3C);background-color:color-mix(in srgb,var(--error, #E74C3C) 10%,transparent)}.stat-trend.neutral{color:var(--on-surface-variant, #44474F);background-color:var(--surface-variant, #DEE3EB)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriStatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriStatComponent, isStandalone: true, selector: "xiri-stat", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.compact": "compact()" } }, ngImport: i0, template: "@if (compact()) {\n\t<div class=\"stat-flat\">\n\t\t<ng-container *ngTemplateOutlet=\"statBody\"></ng-container>\n\t</div>\n} @else {\n\t<mat-card class=\"stat-card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-content>\n\t\t\t<ng-container *ngTemplateOutlet=\"statBody\"></ng-container>\n\t\t</mat-card-content>\n\t</mat-card>\n}\n\n<ng-template #statBody>\n\t<div class=\"stat-content\">\n\t\t@if (settings().icon) {\n\t\t\t<div class=\"stat-icon\">\n\t\t\t\t<mat-icon [class]=\"settings().iconColor || 'primary'\">{{ settings().icon }}</mat-icon>\n\t\t\t</div>\n\t\t}\n\t\t<div class=\"stat-data\">\n\t\t\t<div class=\"stat-value\" [class]=\"settings().color || ''\">\n\t\t\t\t@if (settings().prefix) {\n\t\t\t\t\t<span class=\"prefix\">{{ settings().prefix }}</span>\n\t\t\t\t}\n\t\t\t\t{{ settings().value }}\n\t\t\t\t@if (settings().suffix) {\n\t\t\t\t\t<span class=\"suffix\">{{ settings().suffix }}</span>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div class=\"stat-label\">{{ settings().label }}</div>\n\t\t\t@if (settings().reference; as reference) {\n\t\t\t\t<div class=\"stat-reference\">{{ reference }}</div>\n\t\t\t}\n\t\t</div>\n\t\t@if (settings().trend; as trend) {\n\t\t\t<div class=\"stat-trend\" [class]=\"trend.direction\">\n\t\t\t\t<mat-icon>\n\t\t\t\t\t@switch (trend.direction) {\n\t\t\t\t\t\t@case ('up') { trending_up }\n\t\t\t\t\t\t@case ('down') { trending_down }\n\t\t\t\t\t\t@default { trending_flat }\n\t\t\t\t\t}\n\t\t\t\t</mat-icon>\n\t\t\t\t<span>{{ trend.value > 0 ? '+' : '' }}{{ trend.value }}%</span>\n\t\t\t</div>\n\t\t}\n\t</div>\n</ng-template>\n", styles: [":host{display:block;animation:scaleIn var(--xiri-duration-normal) var(--xiri-easing-decelerate) both}:host-context(.xiri-stat-grid):nth-child(1){animation-delay:0ms}:host-context(.xiri-stat-grid):nth-child(2){animation-delay:50ms}:host-context(.xiri-stat-grid):nth-child(3){animation-delay:.1s}:host-context(.xiri-stat-grid):nth-child(4){animation-delay:.15s}:host-context(.xiri-stat-grid):nth-child(5){animation-delay:.2s}:host-context(.xiri-stat-grid):nth-child(6){animation-delay:.25s}:host-context(.xiri-stat-grid):nth-child(7){animation-delay:.3s}:host-context(.xiri-stat-grid):nth-child(8){animation-delay:.35s}:host-context(.xiri-stat-grid):nth-child(9){animation-delay:.4s}:host-context(.xiri-stat-grid):nth-child(10){animation-delay:.45s}:host-context(.xiri-stat-grid):nth-child(11){animation-delay:.5s}:host-context(.xiri-stat-grid):nth-child(12){animation-delay:.55s}.stat-card{padding:0}.stat-card mat-card-content{padding:var(--xiri-spacing-md) var(--xiri-spacing-md)}:host(.compact){animation:none}:host(.compact) .stat-flat{padding:var(--xiri-spacing-sm) var(--xiri-spacing-sm);background:transparent;box-shadow:none}:host(.compact) .stat-icon mat-icon{font-size:24px;width:24px;height:24px}:host(.compact) .stat-value{font-size:1.25rem;font-weight:600}:host(.compact) .stat-value .prefix,:host(.compact) .stat-value .suffix{font-size:var(--xiri-font-size-label)}:host(.compact) .stat-label{font-size:var(--xiri-font-size-label)}.stat-content{display:flex;align-items:center;flex-wrap:wrap;gap:var(--xiri-spacing-md);min-width:0}.stat-icon{flex-shrink:0}.stat-icon mat-icon{font-size:36px;width:36px;height:36px;opacity:.8}.stat-data{flex:1;min-width:5rem;color:var(--on-surface, #1B1B1F)}.stat-value{font-size:1.75rem;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stat-value .prefix,.stat-value .suffix{font-size:var(--xiri-font-size-body);font-weight:400;opacity:.7}.stat-label{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, #44474F);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stat-reference{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, #44474F);opacity:.7;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stat-trend{display:flex;align-items:center;flex-shrink:0;gap:2px;font-size:var(--xiri-font-size-label);font-weight:500;padding:var(--xiri-spacing-xs) var(--xiri-spacing-sm);border-radius:var(--xiri-radius-xs)}.stat-trend mat-icon{font-size:18px;width:18px;height:18px}.stat-trend.up{color:var(--color-success, #2ECC71);background-color:color-mix(in srgb,var(--color-success, #2ECC71) 10%,transparent)}.stat-trend.down{color:var(--error, #E74C3C);background-color:color-mix(in srgb,var(--error, #E74C3C) 10%,transparent)}.stat-trend.neutral{color:var(--on-surface-variant, #44474F);background-color:var(--surface-variant, #DEE3EB)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriStatComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriStatComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-stat', imports: [MatIcon, MatCard, MatCardContent, NgTemplateOutlet], host: { '[class.compact]': 'compact()' }, template: "@if (compact()) {\n\t<div class=\"stat-flat\">\n\t\t<ng-container *ngTemplateOutlet=\"statBody\"></ng-container>\n\t</div>\n} @else {\n\t<mat-card class=\"stat-card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-content>\n\t\t\t<ng-container *ngTemplateOutlet=\"statBody\"></ng-container>\n\t\t</mat-card-content>\n\t</mat-card>\n}\n\n<ng-template #statBody>\n\t<div class=\"stat-content\">\n\t\t@if (settings().icon) {\n\t\t\t<div class=\"stat-icon\">\n\t\t\t\t<mat-icon [class]=\"settings().iconColor || 'primary'\">{{ settings().icon }}</mat-icon>\n\t\t\t</div>\n\t\t}\n\t\t<div class=\"stat-data\">\n\t\t\t<div class=\"stat-value\" [class]=\"settings().color || ''\">\n\t\t\t\t@if (settings().prefix) {\n\t\t\t\t\t<span class=\"prefix\">{{ settings().prefix }}</span>\n\t\t\t\t}\n\t\t\t\t{{ settings().value }}\n\t\t\t\t@if (settings().suffix) {\n\t\t\t\t\t<span class=\"suffix\">{{ settings().suffix }}</span>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div class=\"stat-label\">{{ settings().label }}</div>\n\t\t\t@if (settings().reference; as reference) {\n\t\t\t\t<div class=\"stat-reference\">{{ reference }}</div>\n\t\t\t}\n\t\t</div>\n\t\t@if (settings().trend; as trend) {\n\t\t\t<div class=\"stat-trend\" [class]=\"trend.direction\">\n\t\t\t\t<mat-icon>\n\t\t\t\t\t@switch (trend.direction) {\n\t\t\t\t\t\t@case ('up') { trending_up }\n\t\t\t\t\t\t@case ('down') { trending_down }\n\t\t\t\t\t\t@default { trending_flat }\n\t\t\t\t\t}\n\t\t\t\t</mat-icon>\n\t\t\t\t<span>{{ trend.value > 0 ? '+' : '' }}{{ trend.value }}%</span>\n\t\t\t</div>\n\t\t}\n\t</div>\n</ng-template>\n", styles: [":host{display:block;animation:scaleIn var(--xiri-duration-normal) var(--xiri-easing-decelerate) both}:host-context(.xiri-stat-grid):nth-child(1){animation-delay:0ms}:host-context(.xiri-stat-grid):nth-child(2){animation-delay:50ms}:host-context(.xiri-stat-grid):nth-child(3){animation-delay:.1s}:host-context(.xiri-stat-grid):nth-child(4){animation-delay:.15s}:host-context(.xiri-stat-grid):nth-child(5){animation-delay:.2s}:host-context(.xiri-stat-grid):nth-child(6){animation-delay:.25s}:host-context(.xiri-stat-grid):nth-child(7){animation-delay:.3s}:host-context(.xiri-stat-grid):nth-child(8){animation-delay:.35s}:host-context(.xiri-stat-grid):nth-child(9){animation-delay:.4s}:host-context(.xiri-stat-grid):nth-child(10){animation-delay:.45s}:host-context(.xiri-stat-grid):nth-child(11){animation-delay:.5s}:host-context(.xiri-stat-grid):nth-child(12){animation-delay:.55s}.stat-card{padding:0}.stat-card mat-card-content{padding:var(--xiri-spacing-md) var(--xiri-spacing-md)}:host(.compact){animation:none}:host(.compact) .stat-flat{padding:var(--xiri-spacing-sm) var(--xiri-spacing-sm);background:transparent;box-shadow:none}:host(.compact) .stat-icon mat-icon{font-size:24px;width:24px;height:24px}:host(.compact) .stat-value{font-size:1.25rem;font-weight:600}:host(.compact) .stat-value .prefix,:host(.compact) .stat-value .suffix{font-size:var(--xiri-font-size-label)}:host(.compact) .stat-label{font-size:var(--xiri-font-size-label)}.stat-content{display:flex;align-items:center;flex-wrap:wrap;gap:var(--xiri-spacing-md);min-width:0}.stat-icon{flex-shrink:0}.stat-icon mat-icon{font-size:36px;width:36px;height:36px;opacity:.8}.stat-data{flex:1;min-width:5rem;color:var(--on-surface, #1B1B1F)}.stat-value{font-size:1.75rem;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stat-value .prefix,.stat-value .suffix{font-size:var(--xiri-font-size-body);font-weight:400;opacity:.7}.stat-label{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, #44474F);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stat-reference{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, #44474F);opacity:.7;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stat-trend{display:flex;align-items:center;flex-shrink:0;gap:2px;font-size:var(--xiri-font-size-label);font-weight:500;padding:var(--xiri-spacing-xs) var(--xiri-spacing-sm);border-radius:var(--xiri-radius-xs)}.stat-trend mat-icon{font-size:18px;width:18px;height:18px}.stat-trend.up{color:var(--color-success, #2ECC71);background-color:color-mix(in srgb,var(--color-success, #2ECC71) 10%,transparent)}.stat-trend.down{color:var(--error, #E74C3C);background-color:color-mix(in srgb,var(--error, #E74C3C) 10%,transparent)}.stat-trend.neutral{color:var(--on-surface-variant, #44474F);background-color:var(--surface-variant, #DEE3EB)}\n"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
@@ -6697,10 +6861,10 @@ class XiriSectionComponent {
     toggle() {
         this.collapsed.update(v => !v);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriSectionComponent, isStandalone: true, selector: "xiri-section", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, dyncomponent: { classPropertyName: "dyncomponent", publicName: "dyncomponent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"xiri-section\">\n\t@if (settings().title) {\n\t\t<div class=\"section-header\"\n\t\t     [class.collapsible]=\"settings().collapsible\"\n\t\t     [attr.role]=\"settings().collapsible ? 'button' : null\"\n\t\t     [attr.tabindex]=\"settings().collapsible ? 0 : null\"\n\t\t     (click)=\"settings().collapsible && toggle()\"\n\t\t     (keydown.enter)=\"settings().collapsible && toggle()\"\n\t\t     (keydown.space)=\"settings().collapsible && toggle(); settings().collapsible && $event.preventDefault()\">\n\t\t\t<div class=\"section-header-left\">\n\t\t\t\t@if (settings().icon) {\n\t\t\t\t\t<mat-icon [class]=\"settings().iconColor || ''\">{{ settings().icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t\t<div>\n\t\t\t\t\t<h2>{{ settings().title }}</h2>\n\t\t\t\t\t@if (settings().subtitle) {\n\t\t\t\t\t\t<span class=\"section-subtitle\">{{ settings().subtitle }}</span>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"section-header-right\">\n\t\t\t\t@if (settings().buttons) {\n\t\t\t\t\t<xiri-buttonline [settings]=\"settings().buttons!\"></xiri-buttonline>\n\t\t\t\t}\n\t\t\t\t@if (settings().collapsible) {\n\t\t\t\t\t<mat-icon class=\"collapse-icon\" [class.collapsed]=\"collapsed()\">expand_more</mat-icon>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t\t<mat-divider></mat-divider>\n\t}\n\t<div class=\"collapse-wrapper\" [class.collapsed]=\"collapsed()\">\n\t\t<div class=\"collapse-inner\">\n\t\t\t<div class=\"section-content\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t\t@if (settings().components) {\n\t\t\t\t\t<xiri-dyncomponent [data]=\"settings().components!\" [dyncomponent]=\"dyncomponent()\" class=\"xrow\"></xiri-dyncomponent>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>\n", styles: [".xiri-section{margin-bottom:var(--xiri-spacing-xl, 2rem)}.xiri-section .section-header{display:flex;align-items:center;justify-content:space-between;padding:var(--xiri-spacing-sm, .5rem) 0}.xiri-section .section-header h2{font-size:var(--xiri-font-size-title);font-weight:500;margin:0}.xiri-section .section-header .section-subtitle{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant)}.xiri-section .section-header.collapsible{cursor:pointer}.xiri-section .section-header .collapse-icon{transition:transform var(--xiri-duration-normal, .3s) var(--xiri-easing-standard, cubic-bezier(.4, 0, .2, 1))}.xiri-section .section-header .collapse-icon.collapsed{transform:rotate(-90deg)}.xiri-section .section-header .section-header-left,.xiri-section .section-header .section-header-right{display:flex;align-items:center;gap:var(--xiri-spacing-sm)}.xiri-section .collapse-wrapper{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--xiri-duration-normal, .3s) var(--xiri-easing-standard, cubic-bezier(.4, 0, .2, 1))}.xiri-section .collapse-wrapper.collapsed{grid-template-rows:0fr}.xiri-section .collapse-inner{overflow:hidden;min-height:0;padding:0 8px 8px;margin:0 -8px -8px}.xiri-section .section-content{padding-top:var(--xiri-spacing-md, 1rem)}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => MatDivider), selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i0.forwardRef(() => XiriButtonlineComponent), selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "component", type: i0.forwardRef(() => XiriDynComponentComponent), selector: "xiri-dyncomponent", inputs: ["data", "filterData", "dyncomponent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriSectionComponent, isStandalone: true, selector: "xiri-section", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, dyncomponent: { classPropertyName: "dyncomponent", publicName: "dyncomponent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"xiri-section\">\n\t@if (settings().title) {\n\t\t<div class=\"section-header\"\n\t\t     [class.collapsible]=\"settings().collapsible\"\n\t\t     [attr.role]=\"settings().collapsible ? 'button' : null\"\n\t\t     [attr.tabindex]=\"settings().collapsible ? 0 : null\"\n\t\t     (click)=\"settings().collapsible && toggle()\"\n\t\t     (keydown.enter)=\"settings().collapsible && toggle()\"\n\t\t     (keydown.space)=\"settings().collapsible && toggle(); settings().collapsible && $event.preventDefault()\">\n\t\t\t<div class=\"section-header-left\">\n\t\t\t\t@if (settings().icon) {\n\t\t\t\t\t<mat-icon [class]=\"settings().iconColor || ''\">{{ settings().icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t\t<div>\n\t\t\t\t\t<h2>{{ settings().title }}</h2>\n\t\t\t\t\t@if (settings().subtitle) {\n\t\t\t\t\t\t<span class=\"section-subtitle\">{{ settings().subtitle }}</span>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"section-header-right\">\n\t\t\t\t@if (settings().buttons) {\n\t\t\t\t\t<xiri-buttonline [settings]=\"settings().buttons!\"></xiri-buttonline>\n\t\t\t\t}\n\t\t\t\t@if (settings().collapsible) {\n\t\t\t\t\t<mat-icon class=\"collapse-icon\" [class.collapsed]=\"collapsed()\">expand_more</mat-icon>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t\t<mat-divider></mat-divider>\n\t}\n\t<div class=\"collapse-wrapper\" [class.collapsed]=\"collapsed()\">\n\t\t<div class=\"collapse-inner\">\n\t\t\t<div class=\"section-content\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t\t@if (settings().components) {\n\t\t\t\t\t<xiri-dyncomponent [data]=\"settings().components!\" [dyncomponent]=\"dyncomponent()\" class=\"xrow\"></xiri-dyncomponent>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>\n", styles: [".xiri-section{margin-bottom:var(--xiri-spacing-xl, 2rem)}.xiri-section .section-header{display:flex;align-items:center;justify-content:space-between;padding:var(--xiri-spacing-sm, .5rem) 0}.xiri-section .section-header h2{font-size:var(--xiri-font-size-title);font-weight:500;margin:0}.xiri-section .section-header .section-subtitle{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant)}.xiri-section .section-header.collapsible{cursor:pointer}.xiri-section .section-header .collapse-icon{transition:transform var(--xiri-duration-normal, .3s) var(--xiri-easing-standard, cubic-bezier(.4, 0, .2, 1))}.xiri-section .section-header .collapse-icon.collapsed{transform:rotate(-90deg)}.xiri-section .section-header .section-header-left,.xiri-section .section-header .section-header-right{display:flex;align-items:center;gap:var(--xiri-spacing-sm)}.xiri-section .collapse-wrapper{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--xiri-duration-normal, .3s) var(--xiri-easing-standard, cubic-bezier(.4, 0, .2, 1))}.xiri-section .collapse-wrapper.collapsed{grid-template-rows:0fr}.xiri-section .collapse-inner{overflow:hidden;min-height:0;padding:0 8px 8px;margin:0 -8px -8px}.xiri-section .section-content{padding-top:var(--xiri-spacing-md, 1rem)}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => MatDivider), selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i0.forwardRef(() => XiriButtonlineComponent), selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "component", type: i0.forwardRef(() => XiriDynComponentComponent), selector: "xiri-dyncomponent", inputs: ["data", "filterData", "dyncomponent"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-section', imports: [MatIcon, MatDivider, XiriButtonlineComponent, forwardRef(() => XiriDynComponentComponent)], template: "<section class=\"xiri-section\">\n\t@if (settings().title) {\n\t\t<div class=\"section-header\"\n\t\t     [class.collapsible]=\"settings().collapsible\"\n\t\t     [attr.role]=\"settings().collapsible ? 'button' : null\"\n\t\t     [attr.tabindex]=\"settings().collapsible ? 0 : null\"\n\t\t     (click)=\"settings().collapsible && toggle()\"\n\t\t     (keydown.enter)=\"settings().collapsible && toggle()\"\n\t\t     (keydown.space)=\"settings().collapsible && toggle(); settings().collapsible && $event.preventDefault()\">\n\t\t\t<div class=\"section-header-left\">\n\t\t\t\t@if (settings().icon) {\n\t\t\t\t\t<mat-icon [class]=\"settings().iconColor || ''\">{{ settings().icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t\t<div>\n\t\t\t\t\t<h2>{{ settings().title }}</h2>\n\t\t\t\t\t@if (settings().subtitle) {\n\t\t\t\t\t\t<span class=\"section-subtitle\">{{ settings().subtitle }}</span>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"section-header-right\">\n\t\t\t\t@if (settings().buttons) {\n\t\t\t\t\t<xiri-buttonline [settings]=\"settings().buttons!\"></xiri-buttonline>\n\t\t\t\t}\n\t\t\t\t@if (settings().collapsible) {\n\t\t\t\t\t<mat-icon class=\"collapse-icon\" [class.collapsed]=\"collapsed()\">expand_more</mat-icon>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t\t<mat-divider></mat-divider>\n\t}\n\t<div class=\"collapse-wrapper\" [class.collapsed]=\"collapsed()\">\n\t\t<div class=\"collapse-inner\">\n\t\t\t<div class=\"section-content\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t\t@if (settings().components) {\n\t\t\t\t\t<xiri-dyncomponent [data]=\"settings().components!\" [dyncomponent]=\"dyncomponent()\" class=\"xrow\"></xiri-dyncomponent>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>\n", styles: [".xiri-section{margin-bottom:var(--xiri-spacing-xl, 2rem)}.xiri-section .section-header{display:flex;align-items:center;justify-content:space-between;padding:var(--xiri-spacing-sm, .5rem) 0}.xiri-section .section-header h2{font-size:var(--xiri-font-size-title);font-weight:500;margin:0}.xiri-section .section-header .section-subtitle{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant)}.xiri-section .section-header.collapsible{cursor:pointer}.xiri-section .section-header .collapse-icon{transition:transform var(--xiri-duration-normal, .3s) var(--xiri-easing-standard, cubic-bezier(.4, 0, .2, 1))}.xiri-section .section-header .collapse-icon.collapsed{transform:rotate(-90deg)}.xiri-section .section-header .section-header-left,.xiri-section .section-header .section-header-right{display:flex;align-items:center;gap:var(--xiri-spacing-sm)}.xiri-section .collapse-wrapper{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--xiri-duration-normal, .3s) var(--xiri-easing-standard, cubic-bezier(.4, 0, .2, 1))}.xiri-section .collapse-wrapper.collapsed{grid-template-rows:0fr}.xiri-section .collapse-inner{overflow:hidden;min-height:0;padding:0 8px 8px;margin:0 -8px -8px}.xiri-section .section-content{padding-top:var(--xiri-spacing-md, 1rem)}\n"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }], dyncomponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "dyncomponent", required: false }] }] } });
@@ -6741,10 +6905,10 @@ class XiriMultiStatComponent {
             return;
         this.resource.reload();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriMultiStatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriMultiStatComponent, isStandalone: true, selector: "xiri-multi-stat", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-card class=\"multi-stat-card mat-mdc-elevation-specific mat-elevation-z2\">\n\t<mat-card-content>\n\t\t@if (settings().title || settings().icon || (settings().reload && settings().url)) {\n\t\t\t<div class=\"multi-stat-header\">\n\t\t\t\t@if (settings().icon) {\n\t\t\t\t\t<mat-icon [class]=\"settings().iconColor || 'primary'\">{{ settings().icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t\t@if (settings().title) {\n\t\t\t\t\t<h3 class=\"multi-stat-title\">{{ settings().title }}</h3>\n\t\t\t\t}\n\t\t\t\t@if (settings().reload && settings().url) {\n\t\t\t\t\t<button mat-icon-button (click)=\"reload()\" [disabled]=\"loading()\" class=\"reload-btn\" aria-label=\"Neu laden\">\n\t\t\t\t\t\t<mat-icon [class.spinning]=\"loading()\">autorenew</mat-icon>\n\t\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\n\t\t@if (loading() && !items().length) {\n\t\t\t<xiri-skeleton type=\"rect\" height=\"72px\"></xiri-skeleton>\n\t\t} @else if (errorMsg()) {\n\t\t\t<div class=\"load-error\">{{ errorMsg() }}</div>\n\t\t} @else {\n\t\t\t<div class=\"multi-stat-items\" [class.vertical]=\"settings().verticalItems\">\n\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t<div class=\"multi-stat-item\">\n\t\t\t\t\t\t@if (item.link) {\n\t\t\t\t\t\t\t@let itemUrl = item.link | xiriUrl;\n\t\t\t\t\t\t\t<a class=\"multi-stat-link\" [routerLink]=\"itemUrl?.path\" [queryParams]=\"itemUrl?.queryParams\">\n\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t</mat-card-content>\n</mat-card>\n\n<ng-template #itemBody let-item>\n\t@if (item.icon) {\n\t\t<div class=\"stat-icon\">\n\t\t\t<mat-icon [class]=\"item.iconColor || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t</div>\n\t}\n\t<div class=\"stat-data\">\n\t\t<div class=\"stat-value\" [class]=\"item.color || ''\">\n\t\t\t@if (item.prefix) {\n\t\t\t\t<span class=\"prefix\">{{ item.prefix }}</span>\n\t\t\t}\n\t\t\t{{ item.value }}\n\t\t\t@if (item.suffix) {\n\t\t\t\t<span class=\"suffix\">{{ item.suffix }}</span>\n\t\t\t}\n\t\t</div>\n\t\t<div class=\"stat-label\">{{ item.label }}</div>\n\t</div>\n\t@if (item.trend; as trend) {\n\t\t<!-- Trend als Geschwister von .stat-data: horizontal daneben, vertikal darunter.\n\t\t     ponytail: Trend-Mapping dupliziert stat.component.html; teilen wenn ein 3. Nutzer kommt -->\n\t\t<div class=\"stat-trend\" [class]=\"trend.direction\">\n\t\t\t<mat-icon>\n\t\t\t\t@switch (trend.direction) {\n\t\t\t\t\t@case ('up') { trending_up }\n\t\t\t\t\t@case ('down') { trending_down }\n\t\t\t\t\t@default { trending_flat }\n\t\t\t\t}\n\t\t\t</mat-icon>\n\t\t\t<span>{{ trend.value > 0 ? '+' : '' }}{{ trend.value }}%</span>\n\t\t</div>\n\t}\n</ng-template>\n", styles: [":host{display:block;animation:scaleIn var(--xiri-duration-normal) var(--xiri-easing-decelerate) both}.multi-stat-card{padding:0}.multi-stat-card mat-card-content{padding:var(--xiri-spacing-md) var(--xiri-spacing-md)}.multi-stat-header{display:flex;align-items:center;gap:var(--xiri-spacing-sm);margin-bottom:var(--xiri-spacing-md)}.multi-stat-header mat-icon{font-size:24px;width:24px;height:24px;opacity:.8}.multi-stat-title{margin:0;font-size:var(--xiri-font-size-body);font-weight:600;color:var(--on-surface, #1B1B1F)}.multi-stat-items{display:flex;align-items:stretch;flex-wrap:wrap;gap:var(--xiri-spacing-md);overflow-x:clip}.multi-stat-item{flex:1 1 auto;min-width:5rem;display:flex;flex-direction:row;align-items:center;gap:var(--xiri-spacing-sm);color:var(--on-surface, #1B1B1F);position:relative}.multi-stat-item:before{content:\"\";position:absolute;left:calc(var(--xiri-spacing-md) / -2);top:0;bottom:0;width:1px;background:var(--outline-variant, #C4C7CF)}.multi-stat-link{display:flex;flex-direction:row;align-items:center;gap:var(--xiri-spacing-sm);color:inherit;text-decoration:none;cursor:pointer}.multi-stat-link:hover .stat-value{text-decoration:underline}.stat-data{display:flex;flex-direction:column;gap:2px;min-width:0}.multi-stat-items.vertical .multi-stat-item,.multi-stat-items.vertical .multi-stat-link{flex-direction:column;align-items:stretch;gap:2px}.multi-stat-items.vertical .stat-trend{align-self:flex-start;margin-top:var(--xiri-spacing-xs)}.reload-btn{margin-left:auto}.reload-btn .spinning{animation:multi-stat-spin 1s linear infinite}@keyframes multi-stat-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.load-error{color:var(--error, #E74C3C);font-size:var(--xiri-font-size-label);padding:var(--xiri-spacing-sm) 0}.stat-icon mat-icon{font-size:28px;width:28px;height:28px;opacity:.8}.stat-value{font-size:1.5rem;font-weight:600;line-height:1.2}.stat-value .prefix,.stat-value .suffix{font-size:var(--xiri-font-size-body);font-weight:400;opacity:.7}.stat-label{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, #44474F)}.stat-trend{display:inline-flex;align-items:center;flex-shrink:0;gap:2px;font-size:var(--xiri-font-size-label);font-weight:500;padding:var(--xiri-spacing-xs) var(--xiri-spacing-sm);border-radius:var(--xiri-radius-xs)}.stat-trend mat-icon{font-size:18px;width:18px;height:18px}.stat-trend.up{color:var(--color-success, #2ECC71);background-color:color-mix(in srgb,var(--color-success, #2ECC71) 10%,transparent)}.stat-trend.down{color:var(--error, #E74C3C);background-color:color-mix(in srgb,var(--error, #E74C3C) 10%,transparent)}.stat-trend.neutral{color:var(--on-surface-variant, #44474F);background-color:var(--surface-variant, #DEE3EB)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XiriSkeletonComponent, selector: "xiri-skeleton", inputs: ["type", "width", "height", "lines", "columns", "animate", "fill"] }, { kind: "pipe", type: XiriUrlPipe, name: "xiriUrl" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriMultiStatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriMultiStatComponent, isStandalone: true, selector: "xiri-multi-stat", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-card class=\"multi-stat-card mat-mdc-elevation-specific mat-elevation-z2\">\n\t<mat-card-content>\n\t\t@if (settings().title || settings().icon || (settings().reload && settings().url)) {\n\t\t\t<div class=\"multi-stat-header\">\n\t\t\t\t@if (settings().icon) {\n\t\t\t\t\t<mat-icon [class]=\"settings().iconColor || 'primary'\">{{ settings().icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t\t@if (settings().title) {\n\t\t\t\t\t<h3 class=\"multi-stat-title\">{{ settings().title }}</h3>\n\t\t\t\t}\n\t\t\t\t@if (settings().reload && settings().url) {\n\t\t\t\t\t<button mat-icon-button (click)=\"reload()\" [disabled]=\"loading()\" class=\"reload-btn\" aria-label=\"Neu laden\">\n\t\t\t\t\t\t<mat-icon [class.spinning]=\"loading()\">autorenew</mat-icon>\n\t\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\n\t\t@if (loading() && !items().length) {\n\t\t\t<xiri-skeleton type=\"rect\" height=\"72px\"></xiri-skeleton>\n\t\t} @else if (errorMsg()) {\n\t\t\t<div class=\"load-error\">{{ errorMsg() }}</div>\n\t\t} @else {\n\t\t\t<div class=\"multi-stat-items\" [class.vertical]=\"settings().verticalItems\">\n\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t<div class=\"multi-stat-item\">\n\t\t\t\t\t\t@if (item.link) {\n\t\t\t\t\t\t\t@let itemUrl = item.link | xiriUrl;\n\t\t\t\t\t\t\t<a class=\"multi-stat-link\" [routerLink]=\"itemUrl?.path\" [queryParams]=\"itemUrl?.queryParams\">\n\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t</mat-card-content>\n</mat-card>\n\n<ng-template #itemBody let-item>\n\t@if (item.icon) {\n\t\t<div class=\"stat-icon\">\n\t\t\t<mat-icon [class]=\"item.iconColor || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t</div>\n\t}\n\t<div class=\"stat-data\">\n\t\t<div class=\"stat-value\" [class]=\"item.color || ''\">\n\t\t\t@if (item.prefix) {\n\t\t\t\t<span class=\"prefix\">{{ item.prefix }}</span>\n\t\t\t}\n\t\t\t{{ item.value }}\n\t\t\t@if (item.suffix) {\n\t\t\t\t<span class=\"suffix\">{{ item.suffix }}</span>\n\t\t\t}\n\t\t</div>\n\t\t<div class=\"stat-label\">{{ item.label }}</div>\n\t</div>\n\t@if (item.trend; as trend) {\n\t\t<!-- Trend als Geschwister von .stat-data: horizontal daneben, vertikal darunter.\n\t\t     ponytail: Trend-Mapping dupliziert stat.component.html; teilen wenn ein 3. Nutzer kommt -->\n\t\t<div class=\"stat-trend\" [class]=\"trend.direction\">\n\t\t\t<mat-icon>\n\t\t\t\t@switch (trend.direction) {\n\t\t\t\t\t@case ('up') { trending_up }\n\t\t\t\t\t@case ('down') { trending_down }\n\t\t\t\t\t@default { trending_flat }\n\t\t\t\t}\n\t\t\t</mat-icon>\n\t\t\t<span>{{ trend.value > 0 ? '+' : '' }}{{ trend.value }}%</span>\n\t\t</div>\n\t}\n</ng-template>\n", styles: [":host{display:block;animation:scaleIn var(--xiri-duration-normal) var(--xiri-easing-decelerate) both}.multi-stat-card{padding:0}.multi-stat-card mat-card-content{padding:var(--xiri-spacing-md) var(--xiri-spacing-md)}.multi-stat-header{display:flex;align-items:center;gap:var(--xiri-spacing-sm);margin-bottom:var(--xiri-spacing-md)}.multi-stat-header mat-icon{font-size:24px;width:24px;height:24px;opacity:.8}.multi-stat-title{margin:0;font-size:var(--xiri-font-size-body);font-weight:600;color:var(--on-surface, #1B1B1F)}.multi-stat-items{display:flex;align-items:stretch;flex-wrap:wrap;gap:var(--xiri-spacing-md);overflow-x:clip}.multi-stat-item{flex:1 1 auto;min-width:5rem;display:flex;flex-direction:row;align-items:center;gap:var(--xiri-spacing-sm);color:var(--on-surface, #1B1B1F);position:relative}.multi-stat-item:before{content:\"\";position:absolute;left:calc(var(--xiri-spacing-md) / -2);top:0;bottom:0;width:1px;background:var(--outline-variant, #C4C7CF)}.multi-stat-link{display:flex;flex-direction:row;align-items:center;gap:var(--xiri-spacing-sm);color:inherit;text-decoration:none;cursor:pointer}.multi-stat-link:hover .stat-value{text-decoration:underline}.stat-data{display:flex;flex-direction:column;gap:2px;min-width:0}.multi-stat-items.vertical .multi-stat-item,.multi-stat-items.vertical .multi-stat-link{flex-direction:column;align-items:stretch;gap:2px}.multi-stat-items.vertical .stat-trend{align-self:flex-start;margin-top:var(--xiri-spacing-xs)}.reload-btn{margin-left:auto}.reload-btn .spinning{animation:multi-stat-spin 1s linear infinite}@keyframes multi-stat-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.load-error{color:var(--error, #E74C3C);font-size:var(--xiri-font-size-label);padding:var(--xiri-spacing-sm) 0}.stat-icon mat-icon{font-size:28px;width:28px;height:28px;opacity:.8}.stat-value{font-size:1.5rem;font-weight:600;line-height:1.2}.stat-value .prefix,.stat-value .suffix{font-size:var(--xiri-font-size-body);font-weight:400;opacity:.7}.stat-label{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, #44474F)}.stat-trend{display:inline-flex;align-items:center;flex-shrink:0;gap:2px;font-size:var(--xiri-font-size-label);font-weight:500;padding:var(--xiri-spacing-xs) var(--xiri-spacing-sm);border-radius:var(--xiri-radius-xs)}.stat-trend mat-icon{font-size:18px;width:18px;height:18px}.stat-trend.up{color:var(--color-success, #2ECC71);background-color:color-mix(in srgb,var(--color-success, #2ECC71) 10%,transparent)}.stat-trend.down{color:var(--error, #E74C3C);background-color:color-mix(in srgb,var(--error, #E74C3C) 10%,transparent)}.stat-trend.neutral{color:var(--on-surface-variant, #44474F);background-color:var(--surface-variant, #DEE3EB)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XiriSkeletonComponent, selector: "xiri-skeleton", inputs: ["type", "width", "height", "lines", "columns", "animate", "fill"] }, { kind: "pipe", type: XiriUrlPipe, name: "xiriUrl" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriMultiStatComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriMultiStatComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-multi-stat', imports: [MatIcon, MatIconButton, MatCard, MatCardContent, RouterLink, NgTemplateOutlet, XiriUrlPipe, XiriSkeletonComponent], template: "<mat-card class=\"multi-stat-card mat-mdc-elevation-specific mat-elevation-z2\">\n\t<mat-card-content>\n\t\t@if (settings().title || settings().icon || (settings().reload && settings().url)) {\n\t\t\t<div class=\"multi-stat-header\">\n\t\t\t\t@if (settings().icon) {\n\t\t\t\t\t<mat-icon [class]=\"settings().iconColor || 'primary'\">{{ settings().icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t\t@if (settings().title) {\n\t\t\t\t\t<h3 class=\"multi-stat-title\">{{ settings().title }}</h3>\n\t\t\t\t}\n\t\t\t\t@if (settings().reload && settings().url) {\n\t\t\t\t\t<button mat-icon-button (click)=\"reload()\" [disabled]=\"loading()\" class=\"reload-btn\" aria-label=\"Neu laden\">\n\t\t\t\t\t\t<mat-icon [class.spinning]=\"loading()\">autorenew</mat-icon>\n\t\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\n\t\t@if (loading() && !items().length) {\n\t\t\t<xiri-skeleton type=\"rect\" height=\"72px\"></xiri-skeleton>\n\t\t} @else if (errorMsg()) {\n\t\t\t<div class=\"load-error\">{{ errorMsg() }}</div>\n\t\t} @else {\n\t\t\t<div class=\"multi-stat-items\" [class.vertical]=\"settings().verticalItems\">\n\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t<div class=\"multi-stat-item\">\n\t\t\t\t\t\t@if (item.link) {\n\t\t\t\t\t\t\t@let itemUrl = item.link | xiriUrl;\n\t\t\t\t\t\t\t<a class=\"multi-stat-link\" [routerLink]=\"itemUrl?.path\" [queryParams]=\"itemUrl?.queryParams\">\n\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t</mat-card-content>\n</mat-card>\n\n<ng-template #itemBody let-item>\n\t@if (item.icon) {\n\t\t<div class=\"stat-icon\">\n\t\t\t<mat-icon [class]=\"item.iconColor || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t</div>\n\t}\n\t<div class=\"stat-data\">\n\t\t<div class=\"stat-value\" [class]=\"item.color || ''\">\n\t\t\t@if (item.prefix) {\n\t\t\t\t<span class=\"prefix\">{{ item.prefix }}</span>\n\t\t\t}\n\t\t\t{{ item.value }}\n\t\t\t@if (item.suffix) {\n\t\t\t\t<span class=\"suffix\">{{ item.suffix }}</span>\n\t\t\t}\n\t\t</div>\n\t\t<div class=\"stat-label\">{{ item.label }}</div>\n\t</div>\n\t@if (item.trend; as trend) {\n\t\t<!-- Trend als Geschwister von .stat-data: horizontal daneben, vertikal darunter.\n\t\t     ponytail: Trend-Mapping dupliziert stat.component.html; teilen wenn ein 3. Nutzer kommt -->\n\t\t<div class=\"stat-trend\" [class]=\"trend.direction\">\n\t\t\t<mat-icon>\n\t\t\t\t@switch (trend.direction) {\n\t\t\t\t\t@case ('up') { trending_up }\n\t\t\t\t\t@case ('down') { trending_down }\n\t\t\t\t\t@default { trending_flat }\n\t\t\t\t}\n\t\t\t</mat-icon>\n\t\t\t<span>{{ trend.value > 0 ? '+' : '' }}{{ trend.value }}%</span>\n\t\t</div>\n\t}\n</ng-template>\n", styles: [":host{display:block;animation:scaleIn var(--xiri-duration-normal) var(--xiri-easing-decelerate) both}.multi-stat-card{padding:0}.multi-stat-card mat-card-content{padding:var(--xiri-spacing-md) var(--xiri-spacing-md)}.multi-stat-header{display:flex;align-items:center;gap:var(--xiri-spacing-sm);margin-bottom:var(--xiri-spacing-md)}.multi-stat-header mat-icon{font-size:24px;width:24px;height:24px;opacity:.8}.multi-stat-title{margin:0;font-size:var(--xiri-font-size-body);font-weight:600;color:var(--on-surface, #1B1B1F)}.multi-stat-items{display:flex;align-items:stretch;flex-wrap:wrap;gap:var(--xiri-spacing-md);overflow-x:clip}.multi-stat-item{flex:1 1 auto;min-width:5rem;display:flex;flex-direction:row;align-items:center;gap:var(--xiri-spacing-sm);color:var(--on-surface, #1B1B1F);position:relative}.multi-stat-item:before{content:\"\";position:absolute;left:calc(var(--xiri-spacing-md) / -2);top:0;bottom:0;width:1px;background:var(--outline-variant, #C4C7CF)}.multi-stat-link{display:flex;flex-direction:row;align-items:center;gap:var(--xiri-spacing-sm);color:inherit;text-decoration:none;cursor:pointer}.multi-stat-link:hover .stat-value{text-decoration:underline}.stat-data{display:flex;flex-direction:column;gap:2px;min-width:0}.multi-stat-items.vertical .multi-stat-item,.multi-stat-items.vertical .multi-stat-link{flex-direction:column;align-items:stretch;gap:2px}.multi-stat-items.vertical .stat-trend{align-self:flex-start;margin-top:var(--xiri-spacing-xs)}.reload-btn{margin-left:auto}.reload-btn .spinning{animation:multi-stat-spin 1s linear infinite}@keyframes multi-stat-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.load-error{color:var(--error, #E74C3C);font-size:var(--xiri-font-size-label);padding:var(--xiri-spacing-sm) 0}.stat-icon mat-icon{font-size:28px;width:28px;height:28px;opacity:.8}.stat-value{font-size:1.5rem;font-weight:600;line-height:1.2}.stat-value .prefix,.stat-value .suffix{font-size:var(--xiri-font-size-body);font-weight:400;opacity:.7}.stat-label{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, #44474F)}.stat-trend{display:inline-flex;align-items:center;flex-shrink:0;gap:2px;font-size:var(--xiri-font-size-label);font-weight:500;padding:var(--xiri-spacing-xs) var(--xiri-spacing-sm);border-radius:var(--xiri-radius-xs)}.stat-trend mat-icon{font-size:18px;width:18px;height:18px}.stat-trend.up{color:var(--color-success, #2ECC71);background-color:color-mix(in srgb,var(--color-success, #2ECC71) 10%,transparent)}.stat-trend.down{color:var(--error, #E74C3C);background-color:color-mix(in srgb,var(--error, #E74C3C) 10%,transparent)}.stat-trend.neutral{color:var(--on-surface-variant, #44474F);background-color:var(--surface-variant, #DEE3EB)}\n"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
@@ -6761,10 +6925,10 @@ class XiriStatusComponent {
         this.hostClass = computed(() => `xiri-status tone-${this.tone()} variant-${this.variant()}`, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriStatusComponent, isStandalone: true, selector: "xiri-status", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "hostClass()", "attr.role": "'status'", "attr.aria-label": "settings().ariaLabel ?? null", "attr.title": "settings().hint ?? null" } }, ngImport: i0, template: "@if (variant() === 'dot') {\n\t<span class=\"status-dot\" aria-hidden=\"true\"></span>\n}\n@if (settings().icon; as icon) {\n\t<mat-icon class=\"status-icon\" aria-hidden=\"true\">{{ icon }}</mat-icon>\n}\n<span class=\"status-label\">{{ settings().label }}</span>\n", styles: [":host{--status-tone: var(--on-surface-variant, #42474E);display:inline-flex;align-items:center;gap:var(--xiri-spacing-xs, 4px);max-width:100%;font-size:var(--xiri-font-size-label);line-height:1.35;vertical-align:middle}:host(.tone-info){--status-tone: var(--color-info)}:host(.tone-success){--status-tone: var(--color-success)}:host(.tone-warning){--status-tone: var(--color-warning)}:host(.tone-error){--status-tone: var(--error)}.status-label{min-width:0;overflow-wrap:anywhere;color:var(--on-surface)}.status-icon{flex:0 0 auto;color:var(--status-tone);font-size:var(--xiri-icon-size-sm, 18px);width:var(--xiri-icon-size-sm, 18px);height:var(--xiri-icon-size-sm, 18px)}.status-dot{flex:0 0 auto;width:.6em;height:.6em;border-radius:var(--xiri-radius-full, 999px);background:var(--status-tone)}:host(.variant-badge){padding:var(--xiri-spacing-xs, 4px) var(--xiri-spacing-sm, 8px);border-radius:var(--xiri-radius-full, 999px);background:color-mix(in srgb,var(--status-tone) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--status-tone) 38%,transparent)}:host(.tone-neutral.variant-badge) .status-label{color:var(--on-surface-variant, #42474E)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriStatusComponent, isStandalone: true, selector: "xiri-status", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "hostClass()", "attr.role": "'status'", "attr.aria-label": "settings().ariaLabel ?? null", "attr.title": "settings().hint ?? null" } }, ngImport: i0, template: "@if (variant() === 'dot') {\n\t<span class=\"status-dot\" aria-hidden=\"true\"></span>\n}\n@if (settings().icon; as icon) {\n\t<mat-icon class=\"status-icon\" aria-hidden=\"true\">{{ icon }}</mat-icon>\n}\n<span class=\"status-label\">{{ settings().label }}</span>\n", styles: [":host{--status-tone: var(--on-surface-variant, #42474E);display:inline-flex;align-items:center;gap:var(--xiri-spacing-xs, 4px);max-width:100%;font-size:var(--xiri-font-size-label);line-height:1.35;vertical-align:middle}:host(.tone-info){--status-tone: var(--color-info)}:host(.tone-success){--status-tone: var(--color-success)}:host(.tone-warning){--status-tone: var(--color-warning)}:host(.tone-error){--status-tone: var(--error)}.status-label{min-width:0;overflow-wrap:anywhere;color:var(--on-surface)}.status-icon{flex:0 0 auto;color:var(--status-tone);font-size:var(--xiri-icon-size-sm, 18px);width:var(--xiri-icon-size-sm, 18px);height:var(--xiri-icon-size-sm, 18px)}.status-dot{flex:0 0 auto;width:.6em;height:.6em;border-radius:var(--xiri-radius-full, 999px);background:var(--status-tone)}:host(.variant-badge){padding:var(--xiri-spacing-xs, 4px) var(--xiri-spacing-sm, 8px);border-radius:var(--xiri-radius-full, 999px);background:color-mix(in srgb,var(--status-tone) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--status-tone) 38%,transparent)}:host(.tone-neutral.variant-badge) .status-label{color:var(--on-surface-variant, #42474E)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriStatusComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriStatusComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-status', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon], host: {
                         '[class]': 'hostClass()',
@@ -6792,10 +6956,10 @@ class XiriCalloutComponent {
     dismiss() {
         this.dismissed.set(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriCalloutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriCalloutComponent, isStandalone: true, selector: "xiri-callout", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { buttonResult: "buttonResult" }, ngImport: i0, template: "@if (!dismissed()) {\n\t<div class=\"callout\" [class]=\"'tone-' + settings().tone\" [class.compact]=\"compact()\" [attr.role]=\"role()\">\n\t\t@if (settings().icon) {\n\t\t\t<div class=\"icon\">\n\t\t\t\t<mat-icon>{{ settings().icon }}</mat-icon>\n\t\t\t</div>\n\t\t}\n\t\t<div class=\"body\">\n\t\t\t@if (settings().title) {\n\t\t\t\t<div class=\"title\">{{ settings().title }}</div>\n\t\t\t}\n\t\t\t<div class=\"text\">{{ settings().text }}</div>\n\t\t\t@if (settings().actions?.length) {\n\t\t\t\t<div class=\"actions\">\n\t\t\t\t\t@for (button of settings().actions!; track button) {\n\t\t\t\t\t\t<xiri-button [button]=\"button\" (result)=\"buttonResult.emit( $event )\"></xiri-button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t\t@if (settings().dismissible) {\n\t\t\t<button mat-icon-button class=\"dismiss\" (click)=\"dismiss()\" aria-label=\"Hinweis schlie\u00DFen\">\n\t\t\t\t<mat-icon>close</mat-icon>\n\t\t\t</button>\n\t\t}\n\t</div>\n}\n", styles: ["@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.callout{--callout-tone: var(--color-info);display:flex;align-items:flex-start;gap:var(--xiri-spacing-md);padding:var(--xiri-spacing-md);margin:var(--xiri-spacing-md) 0;border:1px solid transparent;border-left:4px solid var(--callout-tone);border-radius:var(--xiri-radius-sm);background-color:color-mix(in srgb,var(--callout-tone) 12%,var(--surface));color:var(--on-surface);animation:fadeInUp var(--xiri-duration-normal) var(--xiri-easing-decelerate)}.callout.tone-info{--callout-tone: var(--color-info)}.callout.tone-success{--callout-tone: var(--color-success)}.callout.tone-warning{--callout-tone: var(--color-warning)}.callout.tone-error{--callout-tone: var(--error)}.callout.compact{padding:var(--xiri-spacing-sm) var(--xiri-spacing-md);gap:var(--xiri-spacing-sm)}.icon{flex-shrink:0;line-height:1}.icon mat-icon{color:var(--callout-tone)}.body{flex-grow:1;min-width:0;overflow-wrap:anywhere}.title{font-weight:500;margin-bottom:var(--xiri-spacing-xs)}.text{line-height:1.5;max-width:70ch}.actions{display:flex;flex-wrap:wrap;gap:var(--xiri-spacing-sm);margin-top:var(--xiri-spacing-sm)}.dismiss{flex-shrink:0;margin:calc(-1 * var(--xiri-spacing-sm)) calc(-1 * var(--xiri-spacing-sm)) 0 0}.dismiss:focus-visible{outline:2px solid var(--callout-tone);outline-offset:2px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: XiriButtonComponent, selector: "xiri-button", inputs: ["button", "disabled", "filterData", "url"], outputs: ["result"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriCalloutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriCalloutComponent, isStandalone: true, selector: "xiri-callout", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { buttonResult: "buttonResult" }, ngImport: i0, template: "@if (!dismissed()) {\n\t<div class=\"callout\" [class]=\"'tone-' + settings().tone\" [class.compact]=\"compact()\" [attr.role]=\"role()\">\n\t\t@if (settings().icon) {\n\t\t\t<div class=\"icon\">\n\t\t\t\t<mat-icon>{{ settings().icon }}</mat-icon>\n\t\t\t</div>\n\t\t}\n\t\t<div class=\"body\">\n\t\t\t@if (settings().title) {\n\t\t\t\t<div class=\"title\">{{ settings().title }}</div>\n\t\t\t}\n\t\t\t<div class=\"text\">{{ settings().text }}</div>\n\t\t\t@if (settings().actions?.length) {\n\t\t\t\t<div class=\"actions\">\n\t\t\t\t\t@for (button of settings().actions!; track button) {\n\t\t\t\t\t\t<xiri-button [button]=\"button\" (result)=\"buttonResult.emit( $event )\"></xiri-button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t\t@if (settings().dismissible) {\n\t\t\t<button mat-icon-button class=\"dismiss\" (click)=\"dismiss()\" aria-label=\"Hinweis schlie\u00DFen\">\n\t\t\t\t<mat-icon>close</mat-icon>\n\t\t\t</button>\n\t\t}\n\t</div>\n}\n", styles: ["@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.callout{--callout-tone: var(--color-info);display:flex;align-items:flex-start;gap:var(--xiri-spacing-md);padding:var(--xiri-spacing-md);margin:var(--xiri-spacing-md) 0;border:1px solid transparent;border-left:4px solid var(--callout-tone);border-radius:var(--xiri-radius-sm);background-color:color-mix(in srgb,var(--callout-tone) 12%,var(--surface));color:var(--on-surface);animation:fadeInUp var(--xiri-duration-normal) var(--xiri-easing-decelerate)}.callout.tone-info{--callout-tone: var(--color-info)}.callout.tone-success{--callout-tone: var(--color-success)}.callout.tone-warning{--callout-tone: var(--color-warning)}.callout.tone-error{--callout-tone: var(--error)}.callout.compact{padding:var(--xiri-spacing-sm) var(--xiri-spacing-md);gap:var(--xiri-spacing-sm)}.icon{flex-shrink:0;line-height:1}.icon mat-icon{color:var(--callout-tone)}.body{flex-grow:1;min-width:0;overflow-wrap:anywhere}.title{font-weight:500;margin-bottom:var(--xiri-spacing-xs)}.text{line-height:1.5;max-width:70ch}.actions{display:flex;flex-wrap:wrap;gap:var(--xiri-spacing-sm);margin-top:var(--xiri-spacing-sm)}.dismiss{flex-shrink:0;margin:calc(-1 * var(--xiri-spacing-sm)) calc(-1 * var(--xiri-spacing-sm)) 0 0}.dismiss:focus-visible{outline:2px solid var(--callout-tone);outline-offset:2px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: XiriButtonComponent, selector: "xiri-button", inputs: ["button", "disabled", "filterData", "url"], outputs: ["result"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriCalloutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriCalloutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-callout', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, MatIconButton, XiriButtonComponent], template: "@if (!dismissed()) {\n\t<div class=\"callout\" [class]=\"'tone-' + settings().tone\" [class.compact]=\"compact()\" [attr.role]=\"role()\">\n\t\t@if (settings().icon) {\n\t\t\t<div class=\"icon\">\n\t\t\t\t<mat-icon>{{ settings().icon }}</mat-icon>\n\t\t\t</div>\n\t\t}\n\t\t<div class=\"body\">\n\t\t\t@if (settings().title) {\n\t\t\t\t<div class=\"title\">{{ settings().title }}</div>\n\t\t\t}\n\t\t\t<div class=\"text\">{{ settings().text }}</div>\n\t\t\t@if (settings().actions?.length) {\n\t\t\t\t<div class=\"actions\">\n\t\t\t\t\t@for (button of settings().actions!; track button) {\n\t\t\t\t\t\t<xiri-button [button]=\"button\" (result)=\"buttonResult.emit( $event )\"></xiri-button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t\t@if (settings().dismissible) {\n\t\t\t<button mat-icon-button class=\"dismiss\" (click)=\"dismiss()\" aria-label=\"Hinweis schlie\u00DFen\">\n\t\t\t\t<mat-icon>close</mat-icon>\n\t\t\t</button>\n\t\t}\n\t</div>\n}\n", styles: ["@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.callout{--callout-tone: var(--color-info);display:flex;align-items:flex-start;gap:var(--xiri-spacing-md);padding:var(--xiri-spacing-md);margin:var(--xiri-spacing-md) 0;border:1px solid transparent;border-left:4px solid var(--callout-tone);border-radius:var(--xiri-radius-sm);background-color:color-mix(in srgb,var(--callout-tone) 12%,var(--surface));color:var(--on-surface);animation:fadeInUp var(--xiri-duration-normal) var(--xiri-easing-decelerate)}.callout.tone-info{--callout-tone: var(--color-info)}.callout.tone-success{--callout-tone: var(--color-success)}.callout.tone-warning{--callout-tone: var(--color-warning)}.callout.tone-error{--callout-tone: var(--error)}.callout.compact{padding:var(--xiri-spacing-sm) var(--xiri-spacing-md);gap:var(--xiri-spacing-sm)}.icon{flex-shrink:0;line-height:1}.icon mat-icon{color:var(--callout-tone)}.body{flex-grow:1;min-width:0;overflow-wrap:anywhere}.title{font-weight:500;margin-bottom:var(--xiri-spacing-xs)}.text{line-height:1.5;max-width:70ch}.actions{display:flex;flex-wrap:wrap;gap:var(--xiri-spacing-sm);margin-top:var(--xiri-spacing-sm)}.dismiss{flex-shrink:0;margin:calc(-1 * var(--xiri-spacing-sm)) calc(-1 * var(--xiri-spacing-sm)) 0 0}.dismiss:focus-visible{outline:2px solid var(--callout-tone);outline-offset:2px}\n"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }], buttonResult: [{ type: i0.Output, args: ["buttonResult"] }] } });
@@ -6829,8 +6993,8 @@ class XiriDynComponentComponent {
             return colsToClasses(obj.cols);
         return fallback;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriDynComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriDynComponentComponent, isStandalone: true, selector: "xiri-dyncomponent", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, filterData: { classPropertyName: "filterData", publicName: "filterData", isSignal: true, isRequired: false, transformFunction: null }, dyncomponent: { classPropertyName: "dyncomponent", publicName: "dyncomponent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (obj of dataInt(); track obj.id) {\n\n\t@switch (obj.type) {\n\t\t@case ('card') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol xcol-md-6 xcol-xl-4')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-card [settings]=\"$any(obj.data)\"></xiri-card>\n\t\t\t</div>\n\t\t}\n\t\t@case ('buttonline') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-buttonline [settings]=\"$any(obj.data)\" [filterData]=\"filterData()\"></xiri-buttonline>\n\t\t\t</div>\n\t\t}\n\t\t@case ('table') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-table [settings]=\"$any(obj.data)\" [filterData]=\"filterData()\" [dyncomponent]=\"selfdyncomponent\"></xiri-table>\n\t\t\t</div>\n\t\t}\n\t\t@case ('cardlink') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol xcol-md-4 xcol-lg-3')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-cardlink [settings]=\"$any(obj.data)\"></xiri-cardlink>\n\t\t\t</div>\n\t\t}\n\t\t@case ('links') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol xcol-md-4 xcol-lg-3')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-links [settings]=\"$any(obj.data)\"></xiri-links>\n\t\t\t</div>\n\t\t}\n\t\t@case ('form') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol form')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<mat-card class=\"mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t\t\t\t@if ($any(obj.data).header) {\n\t\t\t\t\t\t<mat-card-header>\n\t\t\t\t\t\t\t<mat-card-title>{{ $any(obj.data).header }}</mat-card-title>\n\t\t\t\t\t\t</mat-card-header>\n\t\t\t\t\t}\n\t\t\t\t\t<mat-card-content>\n\t\t\t\t\t\t<xiri-form [settings]=\"$any(obj.data)\"></xiri-form>\n\t\t\t\t\t</mat-card-content>\n\t\t\t\t</mat-card>\n\t\t\t</div>\n\t\t}\n\t\t@case ('query') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-query [settings]=\"$any(obj.data)\" [dyncomponent]=\"selfdyncomponent\"></xiri-query>\n\t\t\t</div>\n\t\t}\n\t\t@case ('stepper') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-stepper [settings]=\"$any(obj.data)\"></xiri-stepper>\n\t\t\t</div>\n\t\t}\n\t\t@case ('header') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-header [settings]=\"$any(obj.data)\"></xiri-header>\n\t\t\t</div>\n\t\t}\n\t\t@case ('list') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-list [settings]=\"$any(obj.data)\"></xiri-list>\n\t\t\t</div>\n\t\t}\n\t\t@case ('spacer') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<div class=\"spacer\">&nbsp;</div>\n\t\t\t</div>\n\t\t}\n\t\t@case ('container') {\n\t\t\t@if (obj.data) {\n\t\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t\t<xiri-dyncomponent [data]=\"$any(obj.data).components\" [dyncomponent]=\"dyncomponent()\" class=\"xrow\"></xiri-dyncomponent>\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\t\t@case ('infopoint') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-infopoint [settings]=\"$any(obj.data)\"></xiri-infopoint>\n\t\t\t</div>\n\t\t}\n\t\t@case ('multiprogress') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol xcol-md-4')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer (on viewport) { <xiri-multiprogress [settings]=\"$any(obj.data)\"></xiri-multiprogress> } @placeholder { <xiri-skeleton type=\"rect\" height=\"48px\" /> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('progress') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol xcol-md-6 xcol-xl-4')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-progress [settings]=\"$any(obj.data)\"></xiri-progress>\n\t\t\t</div>\n\t\t}\n\t\t@case ('imagetext') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol xcol-md-4')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer (on viewport) { <xiri-imagetext [settings]=\"$any(obj.data)\"></xiri-imagetext> } @placeholder { <xiri-skeleton type=\"rect\" height=\"120px\" /> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('tabs') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-tabs [settings]=\"$any(obj.data)\" [filterData]=\"filterData()\" [dyncomponent]=\"selfdyncomponent\"></xiri-tabs>\n\t\t\t</div>\n\t\t}\n\t\t@case ('expansion') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-expansion [settings]=\"$any(obj.data)\" [filterData]=\"filterData()\" [dyncomponent]=\"selfdyncomponent\"></xiri-expansion>\n\t\t\t</div>\n\t\t}\n\t\t@case ('infotext') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@if ($any(obj.data).html) {\n\t\t\t\t\t<div class=\"infotext\" [innerHtml]=\"$any(obj.data).text | safeHtml\"></div>\n\t\t\t\t} @else {\n\t\t\t\t\t<div class=\"infotext\">{{ $any(obj.data).text }}</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t\t@case ('html') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<div class=\"html\" [innerHtml]=\"$any(obj.data).html | safeHtml\"></div>\n\t\t\t</div>\n\t\t}\n\t\t@case ('stat') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol xcol-md-6 xcol-xl-4')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-stat [settings]=\"$any(obj.data)\"></xiri-stat>\n\t\t\t</div>\n\t\t}\n\t\t@case ('empty-state') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-empty-state [settings]=\"$any(obj.data)\"></xiri-empty-state>\n\t\t\t</div>\n\t\t}\n\t\t@case ('status') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-status [settings]=\"$any(obj.data)\"></xiri-status>\n\t\t\t</div>\n\t\t}\n\t\t@case ('callout') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-callout [settings]=\"$any(obj.data)\"></xiri-callout>\n\t\t\t</div>\n\t\t}\n\t\t@case ('timeline') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer (on viewport) { <xiri-timeline [settings]=\"$any(obj.data)\"></xiri-timeline> } @placeholder { <xiri-skeleton type=\"rect\" height=\"96px\" /> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('page-header') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer (on viewport) { <xiri-page-header [settings]=\"$any(obj.data)\"></xiri-page-header> } @placeholder { <xiri-skeleton type=\"rect\" height=\"64px\" /> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('section') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-section [settings]=\"$any(obj.data)\" [dyncomponent]=\"dyncomponent()\"></xiri-section>\n\t\t\t</div>\n\t\t}\n\t\t@case ('divider') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer (on viewport) { <xiri-divider [settings]=\"$any(obj.data)\"></xiri-divider> } @placeholder { <xiri-skeleton type=\"rect\" height=\"16px\" /> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('stat-grid') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-stat-grid [settings]=\"$any(obj.data)\"></xiri-stat-grid> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('multi-stat') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol xcol-md-6')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-multi-stat [settings]=\"$any(obj.data)\"></xiri-multi-stat>\n\t\t\t</div>\n\t\t}\n\t\t@case ('toolbar') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-toolbar [settings]=\"$any(obj.data)\" [filterData]=\"filterData()\"></xiri-toolbar> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('description-list') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-description-list [settings]=\"$any(obj.data)\"></xiri-description-list> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('barchart') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol xcol-md-6 xcol-xl-3')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-barchart [mode]=\"obj.mode ?? 'simple'\" [settings]=\"$any(obj.data)\"></xiri-barchart> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('linechart') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol xcol-md-6 xcol-xl-3')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-linechart [settings]=\"$any(obj.data)\"></xiri-linechart> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('piechart') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol xcol-md-6 xcol-xl-3')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-piechart [settings]=\"$any(obj.data)\"></xiri-piechart> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('gaugechart') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol xcol-md-6 xcol-xl-3')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-gaugechart [settings]=\"$any(obj.data)\"></xiri-gaugechart> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('bulletchart') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol xcol-md-6 xcol-xl-3')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-bulletchart [settings]=\"$any(obj.data)\"></xiri-bulletchart> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('heatmap') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-heatmap [settings]=\"$any(obj.data)\"></xiri-heatmap> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('calendar') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-calendar [settings]=\"$any(obj.data)\"></xiri-calendar> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('tree') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-tree [settings]=\"$any(obj.data)\"></xiri-tree> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('sankey') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-sankey [settings]=\"$any(obj.data)\"></xiri-sankey> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('gantt') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-gantt [settings]=\"$any(obj.data)\"></xiri-gantt> }\n\t\t\t</div>\n\t\t}\n\t\t@default {\n\t\t\t<ng-container *ngTemplateOutlet=\"dyncomponent() || defaultComponentUnknown; context: { $implicit: obj, filterData: filterData() }\"></ng-container>\n\t\t}\n\t}\n}\n\n<ng-template #selfdyncomponent let-obj>\n\t<xiri-dyncomponent [data]=\"$any(obj).data\" [filterData]=\"$any(obj).filterData\" [dyncomponent]=\"dyncomponent()\" class=\"xrow\"></xiri-dyncomponent>\n</ng-template>\n<ng-template #defaultComponentUnknown let-obj>\n\t<div class=\"xcol\">unknown type: {{ $any(obj).type }}</div>\n</ng-template>\n", styles: [".spacer.double{padding-top:1rem}.form mat-card-header{padding-bottom:1rem}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => XiriDynComponentComponent), selector: "xiri-dyncomponent", inputs: ["data", "filterData", "dyncomponent"] }, { kind: "component", type: i0.forwardRef(() => XiriCardComponent), selector: "xiri-card", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriButtonlineComponent), selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "component", type: i0.forwardRef(() => XiriTableComponent), selector: "xiri-table", inputs: ["dyncomponent", "settings", "filterData"], outputs: ["clickedRow"] }, { kind: "component", type: i0.forwardRef(() => XiriCardlinkComponent), selector: "xiri-cardlink", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriLinksComponent), selector: "xiri-links", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => MatCard), selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i0.forwardRef(() => MatCardHeader), selector: "mat-card-header" }, { kind: "directive", type: i0.forwardRef(() => MatCardTitle), selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i0.forwardRef(() => MatCardContent), selector: "mat-card-content" }, { kind: "component", type: i0.forwardRef(() => XiriFormComponent), selector: "xiri-form", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriQueryComponent), selector: "xiri-query", inputs: ["settings", "dyncomponent", "count"], outputs: ["filterChange"] }, { kind: "component", type: i0.forwardRef(() => XiriStepperComponent), selector: "xiri-stepper", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriHeaderComponent), selector: "xiri-header", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriListComponent), selector: "xiri-list", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriInfopointComponent), selector: "xiri-infopoint", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriProgressComponent), selector: "xiri-progress", inputs: ["settings"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => XiriTabsComponent), selector: "xiri-tabs", inputs: ["settings", "filterData", "dyncomponent"] }, { kind: "component", type: i0.forwardRef(() => XiriExpansionComponent), selector: "xiri-expansion", inputs: ["settings", "filterData", "dyncomponent"] }, { kind: "component", type: i0.forwardRef(() => XiriStatComponent), selector: "xiri-stat", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriEmptyStateComponent), selector: "xiri-empty-state", inputs: ["settings"], outputs: ["buttonResult"] }, { kind: "component", type: i0.forwardRef(() => XiriStatusComponent), selector: "xiri-status", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriCalloutComponent), selector: "xiri-callout", inputs: ["settings"], outputs: ["buttonResult"] }, { kind: "component", type: i0.forwardRef(() => XiriSectionComponent), selector: "xiri-section", inputs: ["settings", "dyncomponent"] }, { kind: "component", type: i0.forwardRef(() => XiriSkeletonComponent), selector: "xiri-skeleton", inputs: ["type", "width", "height", "lines", "columns", "animate", "fill"] }, { kind: "component", type: i0.forwardRef(() => XiriMultiStatComponent), selector: "xiri-multi-stat", inputs: ["settings"] }, { kind: "pipe", type: i0.forwardRef(() => SafehtmlPipe), name: "safeHtml" }], deferBlockDependencies: [() => [/* @ts-ignore */
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriDynComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriDynComponentComponent, isStandalone: true, selector: "xiri-dyncomponent", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, filterData: { classPropertyName: "filterData", publicName: "filterData", isSignal: true, isRequired: false, transformFunction: null }, dyncomponent: { classPropertyName: "dyncomponent", publicName: "dyncomponent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (obj of dataInt(); track obj.id) {\n\n\t@switch (obj.type) {\n\t\t@case ('card') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol xcol-md-6 xcol-xl-4')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-card [settings]=\"$any(obj.data)\"></xiri-card>\n\t\t\t</div>\n\t\t}\n\t\t@case ('buttonline') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-buttonline [settings]=\"$any(obj.data)\" [filterData]=\"filterData()\"></xiri-buttonline>\n\t\t\t</div>\n\t\t}\n\t\t@case ('table') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-table [settings]=\"$any(obj.data)\" [filterData]=\"filterData()\" [dyncomponent]=\"selfdyncomponent\"></xiri-table>\n\t\t\t</div>\n\t\t}\n\t\t@case ('cardlink') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol xcol-md-4 xcol-lg-3')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-cardlink [settings]=\"$any(obj.data)\"></xiri-cardlink>\n\t\t\t</div>\n\t\t}\n\t\t@case ('links') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol xcol-md-4 xcol-lg-3')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-links [settings]=\"$any(obj.data)\"></xiri-links>\n\t\t\t</div>\n\t\t}\n\t\t@case ('form') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol form')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<mat-card class=\"mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t\t\t\t@if ($any(obj.data).header) {\n\t\t\t\t\t\t<mat-card-header>\n\t\t\t\t\t\t\t<mat-card-title>{{ $any(obj.data).header }}</mat-card-title>\n\t\t\t\t\t\t</mat-card-header>\n\t\t\t\t\t}\n\t\t\t\t\t<mat-card-content>\n\t\t\t\t\t\t<xiri-form [settings]=\"$any(obj.data)\"></xiri-form>\n\t\t\t\t\t</mat-card-content>\n\t\t\t\t</mat-card>\n\t\t\t</div>\n\t\t}\n\t\t@case ('query') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-query [settings]=\"$any(obj.data)\" [dyncomponent]=\"selfdyncomponent\"></xiri-query>\n\t\t\t</div>\n\t\t}\n\t\t@case ('stepper') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-stepper [settings]=\"$any(obj.data)\"></xiri-stepper>\n\t\t\t</div>\n\t\t}\n\t\t@case ('header') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-header [settings]=\"$any(obj.data)\"></xiri-header>\n\t\t\t</div>\n\t\t}\n\t\t@case ('list') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-list [settings]=\"$any(obj.data)\"></xiri-list>\n\t\t\t</div>\n\t\t}\n\t\t@case ('spacer') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<div class=\"spacer\">&nbsp;</div>\n\t\t\t</div>\n\t\t}\n\t\t@case ('container') {\n\t\t\t@if (obj.data) {\n\t\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t\t<xiri-dyncomponent [data]=\"$any(obj.data).components\" [dyncomponent]=\"dyncomponent()\" class=\"xrow\"></xiri-dyncomponent>\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\t\t@case ('infopoint') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-infopoint [settings]=\"$any(obj.data)\"></xiri-infopoint>\n\t\t\t</div>\n\t\t}\n\t\t@case ('multiprogress') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol xcol-md-4')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer (on viewport) { <xiri-multiprogress [settings]=\"$any(obj.data)\"></xiri-multiprogress> } @placeholder { <xiri-skeleton type=\"rect\" height=\"48px\" /> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('progress') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol xcol-md-6 xcol-xl-4')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-progress [settings]=\"$any(obj.data)\"></xiri-progress>\n\t\t\t</div>\n\t\t}\n\t\t@case ('imagetext') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol xcol-md-4')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer (on viewport) { <xiri-imagetext [settings]=\"$any(obj.data)\"></xiri-imagetext> } @placeholder { <xiri-skeleton type=\"rect\" height=\"120px\" /> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('tabs') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-tabs [settings]=\"$any(obj.data)\" [filterData]=\"filterData()\" [dyncomponent]=\"selfdyncomponent\"></xiri-tabs>\n\t\t\t</div>\n\t\t}\n\t\t@case ('expansion') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-expansion [settings]=\"$any(obj.data)\" [filterData]=\"filterData()\" [dyncomponent]=\"selfdyncomponent\"></xiri-expansion>\n\t\t\t</div>\n\t\t}\n\t\t@case ('infotext') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@if ($any(obj.data).html) {\n\t\t\t\t\t<div class=\"infotext\" [innerHtml]=\"$any(obj.data).text | safeHtml\"></div>\n\t\t\t\t} @else {\n\t\t\t\t\t<div class=\"infotext\">{{ $any(obj.data).text }}</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t\t@case ('html') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<div class=\"html\" [innerHtml]=\"$any(obj.data).html | safeHtml\"></div>\n\t\t\t</div>\n\t\t}\n\t\t@case ('stat') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol xcol-md-6 xcol-xl-4')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-stat [settings]=\"$any(obj.data)\"></xiri-stat>\n\t\t\t</div>\n\t\t}\n\t\t@case ('empty-state') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-empty-state [settings]=\"$any(obj.data)\"></xiri-empty-state>\n\t\t\t</div>\n\t\t}\n\t\t@case ('status') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-status [settings]=\"$any(obj.data)\"></xiri-status>\n\t\t\t</div>\n\t\t}\n\t\t@case ('callout') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-callout [settings]=\"$any(obj.data)\"></xiri-callout>\n\t\t\t</div>\n\t\t}\n\t\t@case ('timeline') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer (on viewport) { <xiri-timeline [settings]=\"$any(obj.data)\"></xiri-timeline> } @placeholder { <xiri-skeleton type=\"rect\" height=\"96px\" /> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('page-header') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer (on viewport) { <xiri-page-header [settings]=\"$any(obj.data)\"></xiri-page-header> } @placeholder { <xiri-skeleton type=\"rect\" height=\"64px\" /> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('section') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-section [settings]=\"$any(obj.data)\" [dyncomponent]=\"dyncomponent()\"></xiri-section>\n\t\t\t</div>\n\t\t}\n\t\t@case ('divider') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer (on viewport) { <xiri-divider [settings]=\"$any(obj.data)\"></xiri-divider> } @placeholder { <xiri-skeleton type=\"rect\" height=\"16px\" /> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('stat-grid') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-stat-grid [settings]=\"$any(obj.data)\"></xiri-stat-grid> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('multi-stat') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol xcol-md-6')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-multi-stat [settings]=\"$any(obj.data)\"></xiri-multi-stat>\n\t\t\t</div>\n\t\t}\n\t\t@case ('toolbar') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-toolbar [settings]=\"$any(obj.data)\" [filterData]=\"filterData()\"></xiri-toolbar> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('description-list') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-description-list [settings]=\"$any(obj.data)\"></xiri-description-list> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('barchart') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol xcol-md-6 xcol-xl-3')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-barchart [mode]=\"obj.mode ?? 'simple'\" [settings]=\"$any(obj.data)\"></xiri-barchart> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('linechart') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol xcol-md-6 xcol-xl-3')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-linechart [settings]=\"$any(obj.data)\"></xiri-linechart> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('piechart') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol xcol-md-6 xcol-xl-3')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-piechart [settings]=\"$any(obj.data)\"></xiri-piechart> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('gaugechart') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol xcol-md-6 xcol-xl-3')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-gaugechart [settings]=\"$any(obj.data)\"></xiri-gaugechart> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('bulletchart') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol xcol-md-6 xcol-xl-3')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-bulletchart [settings]=\"$any(obj.data)\"></xiri-bulletchart> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('heatmap') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-heatmap [settings]=\"$any(obj.data)\"></xiri-heatmap> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('calendar') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-calendar [settings]=\"$any(obj.data)\"></xiri-calendar> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('tree') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-tree [settings]=\"$any(obj.data)\"></xiri-tree> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('sankey') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-sankey [settings]=\"$any(obj.data)\"></xiri-sankey> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('gantt') {\n\t\t\t<div [class]=\"resolveClass(obj, 'xcol')\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-gantt [settings]=\"$any(obj.data)\"></xiri-gantt> }\n\t\t\t</div>\n\t\t}\n\t\t@default {\n\t\t\t<ng-container *ngTemplateOutlet=\"dyncomponent() || defaultComponentUnknown; context: { $implicit: obj, filterData: filterData() }\"></ng-container>\n\t\t}\n\t}\n}\n\n<ng-template #selfdyncomponent let-obj>\n\t<xiri-dyncomponent [data]=\"$any(obj).data\" [filterData]=\"$any(obj).filterData\" [dyncomponent]=\"dyncomponent()\" class=\"xrow\"></xiri-dyncomponent>\n</ng-template>\n<ng-template #defaultComponentUnknown let-obj>\n\t<div class=\"xcol\">unknown type: {{ $any(obj).type }}</div>\n</ng-template>\n", styles: [".spacer.double{padding-top:1rem}.form mat-card-header{padding-bottom:1rem}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => XiriDynComponentComponent), selector: "xiri-dyncomponent", inputs: ["data", "filterData", "dyncomponent"] }, { kind: "component", type: i0.forwardRef(() => XiriCardComponent), selector: "xiri-card", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriButtonlineComponent), selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "component", type: i0.forwardRef(() => XiriTableComponent), selector: "xiri-table", inputs: ["dyncomponent", "settings", "filterData"], outputs: ["clickedRow"] }, { kind: "component", type: i0.forwardRef(() => XiriCardlinkComponent), selector: "xiri-cardlink", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriLinksComponent), selector: "xiri-links", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => MatCard), selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i0.forwardRef(() => MatCardHeader), selector: "mat-card-header" }, { kind: "directive", type: i0.forwardRef(() => MatCardTitle), selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i0.forwardRef(() => MatCardContent), selector: "mat-card-content" }, { kind: "component", type: i0.forwardRef(() => XiriFormComponent), selector: "xiri-form", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriQueryComponent), selector: "xiri-query", inputs: ["settings", "dyncomponent", "count"], outputs: ["filterChange"] }, { kind: "component", type: i0.forwardRef(() => XiriStepperComponent), selector: "xiri-stepper", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriHeaderComponent), selector: "xiri-header", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriListComponent), selector: "xiri-list", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriInfopointComponent), selector: "xiri-infopoint", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriProgressComponent), selector: "xiri-progress", inputs: ["settings"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => XiriTabsComponent), selector: "xiri-tabs", inputs: ["settings", "filterData", "dyncomponent"] }, { kind: "component", type: i0.forwardRef(() => XiriExpansionComponent), selector: "xiri-expansion", inputs: ["settings", "filterData", "dyncomponent"] }, { kind: "component", type: i0.forwardRef(() => XiriStatComponent), selector: "xiri-stat", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriEmptyStateComponent), selector: "xiri-empty-state", inputs: ["settings"], outputs: ["buttonResult"] }, { kind: "component", type: i0.forwardRef(() => XiriStatusComponent), selector: "xiri-status", inputs: ["settings"] }, { kind: "component", type: i0.forwardRef(() => XiriCalloutComponent), selector: "xiri-callout", inputs: ["settings"], outputs: ["buttonResult"] }, { kind: "component", type: i0.forwardRef(() => XiriSectionComponent), selector: "xiri-section", inputs: ["settings", "dyncomponent"] }, { kind: "component", type: i0.forwardRef(() => XiriSkeletonComponent), selector: "xiri-skeleton", inputs: ["type", "width", "height", "lines", "columns", "animate", "fill"] }, { kind: "component", type: i0.forwardRef(() => XiriMultiStatComponent), selector: "xiri-multi-stat", inputs: ["settings"] }, { kind: "pipe", type: i0.forwardRef(() => SafehtmlPipe), name: "safeHtml" }], deferBlockDependencies: [() => [/* @ts-ignore */
                 Promise.resolve().then(function () { return multiprogress_component; }).then(m => m.XiriMultiprogressComponent)], () => [/* @ts-ignore */
                 Promise.resolve().then(function () { return imagetext_component; }).then(m => m.XiriImagetextComponent)], () => [/* @ts-ignore */
                 Promise.resolve().then(function () { return timeline_component; }).then(m => m.XiriTimelineComponent)], () => [/* @ts-ignore */
@@ -6850,7 +7014,7 @@ class XiriDynComponentComponent {
                 Promise.resolve().then(function () { return sankey_component; }).then(m => m.XiriSankeyComponent)], () => [/* @ts-ignore */
                 Promise.resolve().then(function () { return gantt_component; }).then(m => m.XiriGanttComponent)]] }); }
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.7", ngImport: i0, type: XiriDynComponentComponent, resolveDeferredDeps: () => [/* @ts-ignore */
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.1.0", ngImport: i0, type: XiriDynComponentComponent, resolveDeferredDeps: () => [/* @ts-ignore */
         Promise.resolve().then(function () { return multiprogress_component; }).then(m => m.XiriMultiprogressComponent), /* @ts-ignore */
         Promise.resolve().then(function () { return imagetext_component; }).then(m => m.XiriImagetextComponent), /* @ts-ignore */
         Promise.resolve().then(function () { return timeline_component; }).then(m => m.XiriTimelineComponent), /* @ts-ignore */
@@ -6931,8 +7095,8 @@ class XiriSidepanelComponent {
         this.titleId = computed(() => this.config().title ? 'xiri-sidepanel-title' : null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "titleId" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriSidepanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriSidepanelComponent, isStandalone: true, selector: "xiri-sidepanel", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, ref: { classPropertyName: "ref", publicName: "ref", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "dialog", "aria-modal": "true" }, properties: { "attr.aria-labelledby": "titleId()" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriSidepanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriSidepanelComponent, isStandalone: true, selector: "xiri-sidepanel", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, ref: { classPropertyName: "ref", publicName: "ref", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "dialog", "aria-modal": "true" }, properties: { "attr.aria-labelledby": "titleId()" } }, ngImport: i0, template: `
 		<div class="sidepanel-header">
 			<span class="sidepanel-title" [id]="titleId()">{{ config().title }}</span>
 			<button mat-icon-button (click)="ref().close()" aria-label="Schließen"><mat-icon>close</mat-icon></button>
@@ -6944,7 +7108,7 @@ class XiriSidepanelComponent {
 		</div>
 	`, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%;background:var(--surface, var(--mat-sys-surface, #fff));box-shadow:var(--xiri-elevation-2, 0 0 16px rgba(0, 0, 0, .2))}.sidepanel-header{display:flex;align-items:center;justify-content:space-between;padding:var(--xiri-spacing-md);border-bottom:1px solid var(--xiri-border-color, rgba(0, 0, 0, .12))}.sidepanel-title{font-size:var(--xiri-font-size-title);font-weight:500}.sidepanel-content{flex:1 1 auto;overflow-y:auto;padding:var(--xiri-spacing-md)}\n"], dependencies: [{ 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"] }, { kind: "component", type: XiriDynComponentComponent, selector: "xiri-dyncomponent", inputs: ["data", "filterData", "dyncomponent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriSidepanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriSidepanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-sidepanel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconButton, MatIcon, XiriDynComponentComponent], host: {
                         role: 'dialog',
@@ -6991,10 +7155,10 @@ class XiriSidepanelService {
         overlayRef.keydownEvents().pipe(filter(e => e.keyCode === ESCAPE)).subscribe(() => ref.close());
         return ref;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriSidepanelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriSidepanelService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriSidepanelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriSidepanelService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriSidepanelService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriSidepanelService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -7043,10 +7207,10 @@ class XiriAlertComponent {
     clickButton(button) {
         this.dialogRef.close(button);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriAlertComponent, isStandalone: true, selector: "xiri-alert", ngImport: i0, template: "@if (!loading()) {\n\t<h1 mat-dialog-title>{{ header() }}</h1>\n}\n<mat-dialog-content>\n\t@if (loading()) {\n\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t} @else {\n\t\t<div class=\"content\">\n\t\t\t<div class=\"icon\">\n\t\t\t\t<mat-icon class=\"warn\" inline=\"true\">{{ icon() }}</mat-icon>\n\t\t\t</div>\n\t\t\t<div class=\"text\" [innerHtml]=\"text() | safeHtml\"></div>\n\t\t</div>\n\t}\n</mat-dialog-content>\n@if (!loading()) {\n\t<mat-divider></mat-divider>\n\t<mat-dialog-actions>\n\t\t@for (button of buttons(); track button) {\n\t\t\t<xiri-buttonstyle [button]=\"button\" [disabled]=\"false\" (click)=\"clickButton( button )\"></xiri-buttonstyle>\n\t\t}\n\t</mat-dialog-actions>\n}\n", styles: ["mat-spinner{margin:var(--xiri-spacing-md)}.content{display:flex;align-items:center}.content .icon{font-size:2rem;margin:var(--xiri-spacing-md) 0;flex-shrink:0;min-width:2rem;line-height:1}.content .text{flex-grow:1;padding:0 var(--xiri-spacing-md)}.mat-mdc-dialog-actions{justify-content:space-between}\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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "pipe", type: SafehtmlPipe, name: "safeHtml" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriAlertComponent, isStandalone: true, selector: "xiri-alert", ngImport: i0, template: "@if (!loading()) {\n\t<h1 mat-dialog-title>{{ header() }}</h1>\n}\n<mat-dialog-content>\n\t@if (loading()) {\n\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t} @else {\n\t\t<div class=\"content\">\n\t\t\t<div class=\"icon\">\n\t\t\t\t<mat-icon class=\"warn\" inline=\"true\">{{ icon() }}</mat-icon>\n\t\t\t</div>\n\t\t\t<div class=\"text\" [innerHtml]=\"text() | safeHtml\"></div>\n\t\t</div>\n\t}\n</mat-dialog-content>\n@if (!loading()) {\n\t<mat-divider></mat-divider>\n\t<mat-dialog-actions>\n\t\t@for (button of buttons(); track button) {\n\t\t\t<xiri-buttonstyle [button]=\"button\" [disabled]=\"false\" (click)=\"clickButton( button )\"></xiri-buttonstyle>\n\t\t}\n\t</mat-dialog-actions>\n}\n", styles: ["mat-spinner{margin:var(--xiri-spacing-md)}.content{display:flex;align-items:center}.content .icon{font-size:2rem;margin:var(--xiri-spacing-md) 0;flex-shrink:0;min-width:2rem;line-height:1}.content .text{flex-grow:1;padding:0 var(--xiri-spacing-md)}.mat-mdc-dialog-actions{justify-content:space-between}\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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "pipe", type: SafehtmlPipe, name: "safeHtml" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriAlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriAlertComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-alert', imports: [MatDialogTitle,
                         CdkScrollable,
@@ -7068,10 +7232,10 @@ class XiriMultiprogressComponent {
         this.compact = computed(() => !!this.settings().compact, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriMultiprogressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriMultiprogressComponent, isStandalone: true, selector: "xiri-multiprogress", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.compact": "compact()" } }, ngImport: i0, template: "@if (compact()) {\n\t<div class=\"card xiri-multiprogress-flat\">\n\t\t<div class=\"header align-items-center\">\n\t\t\t@if (settings().headerIcon) {\n\t\t\t\t<div class=\"header-image\">\n\t\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<span class=\"title\">{{ settings().header }}</span>\n\t\t\t@if (settings().show && settings().data.length > settings().show!) {\n\t\t\t\t<span class=\"open\">\n\t\t\t\t\t<button mat-icon-button class=\"d-btn\" (click)=\"isOpen.set(!isOpen())\" [attr.aria-label]=\"isOpen() ? 'Weniger anzeigen' : 'Mehr anzeigen'\" [attr.aria-expanded]=\"isOpen()\">\n\t\t\t\t\t\t@if (isOpen()) { <mat-icon>expand_less</mat-icon> } @else { <mat-icon>expand_more</mat-icon> }\n\t\t\t\t\t</button>\n\t\t\t\t</span>\n\t\t\t}\n\t\t</div>\n\t\t<div class=\"xiri-multiprogress-content\">\n\t\t\t@for (item of settings().data | slice:0:(isOpen() ? 999 : settings().show); track item) {\n\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<div class=\"line\">\n\t\t\t\t\t\t<span class=\"text\">{{ item.text }}</span>\n\t\t\t\t\t\t<span class=\"value\">{{ item.value }}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<mat-progress-bar mode=\"determinate\" [class]=\"item.color\" [value]=\"item.progress\" class=\"bar\"></mat-progress-bar>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</div>\n} @else {\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<div class=\"header align-items-center\">\n\t\t\t@if (settings().headerIcon) {\n\t\t\t\t<div mat-card-avatar class=\"header-image\">\n\t\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<span class=\"title\">{{ settings().header }}</span>\n\t\t\t@if (settings().show && settings().data.length > settings().show!) {\n\t\t\t\t<span class=\"open\">\n\t\t\t\t\t<button mat-icon-button class=\"d-btn\" (click)=\"isOpen.set(!isOpen())\" [attr.aria-label]=\"isOpen() ? 'Weniger anzeigen' : 'Mehr anzeigen'\" [attr.aria-expanded]=\"isOpen()\">\n\t\t\t\t\t\t@if (isOpen()) { <mat-icon>expand_less</mat-icon> } @else { <mat-icon>expand_more</mat-icon> }\n\t\t\t\t\t</button>\n\t\t\t\t</span>\n\t\t\t}\n\t\t</div>\n\t\t<mat-card-content>\n\t\t\t@for (item of settings().data | slice:0:(isOpen() ? 999 : settings().show); track item) {\n\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<div class=\"line\">\n\t\t\t\t\t\t<span class=\"text\">{{ item.text }}</span>\n\t\t\t\t\t\t<span class=\"value\">{{ item.value }}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<mat-progress-bar mode=\"determinate\" [class]=\"item.color\" [value]=\"item.progress\" class=\"bar\"></mat-progress-bar>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</mat-card-content>\n\t</mat-card>\n}\n", styles: ["mat-card.card{padding:20px}mat-card-content{padding:0}:host(.compact) .xiri-multiprogress-flat{background:transparent;box-shadow:none;padding:0}.header{margin-top:0;margin-bottom:12px;display:flex;justify-content:space-between}.header .title{font-size:var(--xiri-font-size-title);font-weight:500}.item .line{display:flex;justify-content:space-between;padding-bottom:.3rem}.item .line .text{font-weight:400;word-break:break-all}.item .line .value{font-size:var(--xiri-font-size-label);padding-left:1rem}.item .bar{transform:scaleY(1.5);transform-origin:bottom}.item+.item{padding-top:.8rem}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: SlicePipe, name: "slice" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriMultiprogressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriMultiprogressComponent, isStandalone: true, selector: "xiri-multiprogress", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.compact": "compact()" } }, ngImport: i0, template: "@if (compact()) {\n\t<div class=\"card xiri-multiprogress-flat\">\n\t\t<div class=\"header align-items-center\">\n\t\t\t@if (settings().headerIcon) {\n\t\t\t\t<div class=\"header-image\">\n\t\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<span class=\"title\">{{ settings().header }}</span>\n\t\t\t@if (settings().show && settings().data.length > settings().show!) {\n\t\t\t\t<span class=\"open\">\n\t\t\t\t\t<button mat-icon-button class=\"d-btn\" (click)=\"isOpen.set(!isOpen())\" [attr.aria-label]=\"isOpen() ? 'Weniger anzeigen' : 'Mehr anzeigen'\" [attr.aria-expanded]=\"isOpen()\">\n\t\t\t\t\t\t@if (isOpen()) { <mat-icon>expand_less</mat-icon> } @else { <mat-icon>expand_more</mat-icon> }\n\t\t\t\t\t</button>\n\t\t\t\t</span>\n\t\t\t}\n\t\t</div>\n\t\t<div class=\"xiri-multiprogress-content\">\n\t\t\t@for (item of settings().data | slice:0:(isOpen() ? 999 : settings().show); track item) {\n\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<div class=\"line\">\n\t\t\t\t\t\t<span class=\"text\">{{ item.text }}</span>\n\t\t\t\t\t\t<span class=\"value\">{{ item.value }}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<mat-progress-bar mode=\"determinate\" [class]=\"item.color\" [value]=\"item.progress\" class=\"bar\"></mat-progress-bar>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</div>\n} @else {\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<div class=\"header align-items-center\">\n\t\t\t@if (settings().headerIcon) {\n\t\t\t\t<div mat-card-avatar class=\"header-image\">\n\t\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<span class=\"title\">{{ settings().header }}</span>\n\t\t\t@if (settings().show && settings().data.length > settings().show!) {\n\t\t\t\t<span class=\"open\">\n\t\t\t\t\t<button mat-icon-button class=\"d-btn\" (click)=\"isOpen.set(!isOpen())\" [attr.aria-label]=\"isOpen() ? 'Weniger anzeigen' : 'Mehr anzeigen'\" [attr.aria-expanded]=\"isOpen()\">\n\t\t\t\t\t\t@if (isOpen()) { <mat-icon>expand_less</mat-icon> } @else { <mat-icon>expand_more</mat-icon> }\n\t\t\t\t\t</button>\n\t\t\t\t</span>\n\t\t\t}\n\t\t</div>\n\t\t<mat-card-content>\n\t\t\t@for (item of settings().data | slice:0:(isOpen() ? 999 : settings().show); track item) {\n\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<div class=\"line\">\n\t\t\t\t\t\t<span class=\"text\">{{ item.text }}</span>\n\t\t\t\t\t\t<span class=\"value\">{{ item.value }}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<mat-progress-bar mode=\"determinate\" [class]=\"item.color\" [value]=\"item.progress\" class=\"bar\"></mat-progress-bar>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</mat-card-content>\n\t</mat-card>\n}\n", styles: ["mat-card.card{padding:20px}mat-card-content{padding:0}:host(.compact) .xiri-multiprogress-flat{background:transparent;box-shadow:none;padding:0}.header{margin-top:0;margin-bottom:12px;display:flex;justify-content:space-between}.header .title{font-size:var(--xiri-font-size-title);font-weight:500}.item .line{display:flex;justify-content:space-between;padding-bottom:.3rem}.item .line .text{font-weight:400;word-break:break-all}.item .line .value{font-size:var(--xiri-font-size-label);padding-left:1rem}.item .bar{transform:scaleY(1.5);transform-origin:bottom}.item+.item{padding-top:.8rem}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: SlicePipe, name: "slice" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriMultiprogressComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriMultiprogressComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-multiprogress', imports: [MatCard, MatCardAvatar, MatIcon, MatIconButton, MatCardContent, MatProgressBar, SlicePipe], host: { '[class.compact]': 'compact()' }, template: "@if (compact()) {\n\t<div class=\"card xiri-multiprogress-flat\">\n\t\t<div class=\"header align-items-center\">\n\t\t\t@if (settings().headerIcon) {\n\t\t\t\t<div class=\"header-image\">\n\t\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<span class=\"title\">{{ settings().header }}</span>\n\t\t\t@if (settings().show && settings().data.length > settings().show!) {\n\t\t\t\t<span class=\"open\">\n\t\t\t\t\t<button mat-icon-button class=\"d-btn\" (click)=\"isOpen.set(!isOpen())\" [attr.aria-label]=\"isOpen() ? 'Weniger anzeigen' : 'Mehr anzeigen'\" [attr.aria-expanded]=\"isOpen()\">\n\t\t\t\t\t\t@if (isOpen()) { <mat-icon>expand_less</mat-icon> } @else { <mat-icon>expand_more</mat-icon> }\n\t\t\t\t\t</button>\n\t\t\t\t</span>\n\t\t\t}\n\t\t</div>\n\t\t<div class=\"xiri-multiprogress-content\">\n\t\t\t@for (item of settings().data | slice:0:(isOpen() ? 999 : settings().show); track item) {\n\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<div class=\"line\">\n\t\t\t\t\t\t<span class=\"text\">{{ item.text }}</span>\n\t\t\t\t\t\t<span class=\"value\">{{ item.value }}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<mat-progress-bar mode=\"determinate\" [class]=\"item.color\" [value]=\"item.progress\" class=\"bar\"></mat-progress-bar>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</div>\n} @else {\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<div class=\"header align-items-center\">\n\t\t\t@if (settings().headerIcon) {\n\t\t\t\t<div mat-card-avatar class=\"header-image\">\n\t\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<span class=\"title\">{{ settings().header }}</span>\n\t\t\t@if (settings().show && settings().data.length > settings().show!) {\n\t\t\t\t<span class=\"open\">\n\t\t\t\t\t<button mat-icon-button class=\"d-btn\" (click)=\"isOpen.set(!isOpen())\" [attr.aria-label]=\"isOpen() ? 'Weniger anzeigen' : 'Mehr anzeigen'\" [attr.aria-expanded]=\"isOpen()\">\n\t\t\t\t\t\t@if (isOpen()) { <mat-icon>expand_less</mat-icon> } @else { <mat-icon>expand_more</mat-icon> }\n\t\t\t\t\t</button>\n\t\t\t\t</span>\n\t\t\t}\n\t\t</div>\n\t\t<mat-card-content>\n\t\t\t@for (item of settings().data | slice:0:(isOpen() ? 999 : settings().show); track item) {\n\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<div class=\"line\">\n\t\t\t\t\t\t<span class=\"text\">{{ item.text }}</span>\n\t\t\t\t\t\t<span class=\"value\">{{ item.value }}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<mat-progress-bar mode=\"determinate\" [class]=\"item.color\" [value]=\"item.progress\" class=\"bar\"></mat-progress-bar>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</mat-card-content>\n\t</mat-card>\n}\n", styles: ["mat-card.card{padding:20px}mat-card-content{padding:0}:host(.compact) .xiri-multiprogress-flat{background:transparent;box-shadow:none;padding:0}.header{margin-top:0;margin-bottom:12px;display:flex;justify-content:space-between}.header .title{font-size:var(--xiri-font-size-title);font-weight:500}.item .line{display:flex;justify-content:space-between;padding-bottom:.3rem}.item .line .text{font-weight:400;word-break:break-all}.item .line .value{font-size:var(--xiri-font-size-label);padding-left:1rem}.item .bar{transform:scaleY(1.5);transform-origin:bottom}.item+.item{padding-top:.8rem}\n"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
@@ -7090,10 +7254,10 @@ class XiriImagetextComponent {
         this.compact = computed(() => !!this.settings().compact, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriImagetextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriImagetextComponent, isStandalone: true, selector: "xiri-imagetext", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.compact": "compact()" } }, ngImport: i0, template: "@if (compact()) {\n\t<div class=\"card xiri-imagetext-flat\">\n\t\t@if (settings().header || settings().headerIcon) {\n\t\t\t<div class=\"xiri-imagetext-header align-items-center\">\n\t\t\t\t@if (settings().headerIcon) {\n\t\t\t\t\t<div class=\"header-image\">\n\t\t\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"header-text\">\n\t\t\t\t\t@if (settings().header) {\n\t\t\t\t\t\t<div class=\"header-title\">{{ settings().header }}</div>\n\t\t\t\t\t}\n\t\t\t\t\t@if (settings().headerSub) {\n\t\t\t\t\t\t<div class=\"header-sub\">{{ settings().headerSub }}</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t}\n\t\t<div class=\"xiri-imagetext-content\">\n\t\t\t<mat-spinner [hidden]=\"!loading()\" diameter=\"30\"></mat-spinner>\n\t\t\t<img [hidden]=\"loading()\" (load)=\"loading.set(false)\" [src]=\"settings().url\" [alt]=\"settings().info\" id=\"ximg\"/>\n\t\t</div>\n\t</div>\n} @else {\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-header class=\"align-items-center\">\n\t\t\t@if (settings().headerIcon) {\n\t\t\t\t<div mat-card-avatar class=\"header-image\">\n\t\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (settings().header) {\n\t\t\t\t<mat-card-title>{{ settings().header }}</mat-card-title>\n\t\t\t}\n\t\t\t@if (settings().headerSub) {\n\t\t\t\t<mat-card-subtitle>{{ settings().headerSub }}</mat-card-subtitle>\n\t\t\t}\n\t\t</mat-card-header>\n\t\t<mat-card-content>\n\t\t\t<mat-spinner [hidden]=\"!loading()\" diameter=\"30\"></mat-spinner>\n\t\t\t<img [hidden]=\"loading()\" (load)=\"loading.set(false)\" [src]=\"settings().url\" [alt]=\"settings().info\" id=\"ximg\"/>\n\t\t</mat-card-content>\n\t</mat-card>\n}\n", styles: [".card{margin-bottom:2rem;text-align:center}#ximg{max-width:100%}[hidden]{display:none!important}:host(.compact) .xiri-imagetext-flat{background:transparent;box-shadow:none;padding:0;margin-bottom:0}:host(.compact) .xiri-imagetext-header{display:flex;gap:var(--xiri-spacing-sm, 8px);margin-bottom:var(--xiri-spacing-sm, 8px)}:host(.compact) .header-title{font-size:var(--xiri-font-size-body);font-weight:500}:host(.compact) .header-sub{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, var(--mat-sys-on-surface-variant, #555))}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriImagetextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriImagetextComponent, isStandalone: true, selector: "xiri-imagetext", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.compact": "compact()" } }, ngImport: i0, template: "@if (compact()) {\n\t<div class=\"card xiri-imagetext-flat\">\n\t\t@if (settings().header || settings().headerIcon) {\n\t\t\t<div class=\"xiri-imagetext-header align-items-center\">\n\t\t\t\t@if (settings().headerIcon) {\n\t\t\t\t\t<div class=\"header-image\">\n\t\t\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"header-text\">\n\t\t\t\t\t@if (settings().header) {\n\t\t\t\t\t\t<div class=\"header-title\">{{ settings().header }}</div>\n\t\t\t\t\t}\n\t\t\t\t\t@if (settings().headerSub) {\n\t\t\t\t\t\t<div class=\"header-sub\">{{ settings().headerSub }}</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t}\n\t\t<div class=\"xiri-imagetext-content\">\n\t\t\t<mat-spinner [hidden]=\"!loading()\" diameter=\"30\"></mat-spinner>\n\t\t\t<img [hidden]=\"loading()\" (load)=\"loading.set(false)\" [src]=\"settings().url\" [alt]=\"settings().info\" id=\"ximg\"/>\n\t\t</div>\n\t</div>\n} @else {\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-header class=\"align-items-center\">\n\t\t\t@if (settings().headerIcon) {\n\t\t\t\t<div mat-card-avatar class=\"header-image\">\n\t\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (settings().header) {\n\t\t\t\t<mat-card-title>{{ settings().header }}</mat-card-title>\n\t\t\t}\n\t\t\t@if (settings().headerSub) {\n\t\t\t\t<mat-card-subtitle>{{ settings().headerSub }}</mat-card-subtitle>\n\t\t\t}\n\t\t</mat-card-header>\n\t\t<mat-card-content>\n\t\t\t<mat-spinner [hidden]=\"!loading()\" diameter=\"30\"></mat-spinner>\n\t\t\t<img [hidden]=\"loading()\" (load)=\"loading.set(false)\" [src]=\"settings().url\" [alt]=\"settings().info\" id=\"ximg\"/>\n\t\t</mat-card-content>\n\t</mat-card>\n}\n", styles: [".card{margin-bottom:2rem;text-align:center}#ximg{max-width:100%}[hidden]{display:none!important}:host(.compact) .xiri-imagetext-flat{background:transparent;box-shadow:none;padding:0;margin-bottom:0}:host(.compact) .xiri-imagetext-header{display:flex;gap:var(--xiri-spacing-sm, 8px);margin-bottom:var(--xiri-spacing-sm, 8px)}:host(.compact) .header-title{font-size:var(--xiri-font-size-body);font-weight:500}:host(.compact) .header-sub{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, var(--mat-sys-on-surface-variant, #555))}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriImagetextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriImagetextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-imagetext', imports: [MatCard,
                         MatCardHeader,
@@ -7180,10 +7344,10 @@ class XiriSidenavComponent {
         field.active = matchesSelf;
         return field.active;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriSidenavComponent, isStandalone: true, selector: "xiri-sidenav", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (loading) {\n\t<div class=\"loading\">\n\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t</div>\n}\n\n@for (nav of fields; track nav) {\n\n\t<!-- One guard per level, not per branch: a hidden entry can never slip through\n\t     link/menu/extern. Structural, so no routerLink is left in the DOM. -->\n\t@if (!nav.hide) {\n\t\t@if ( nav.link ) {\n\t\t\t@let navUrl = nav.link | xiriUrl;\n\t\t\t<a mat-list-item [routerLink]=\"navUrl?.path\" [queryParams]=\"navUrl?.queryParams\" [class.active]=\"nav.active\">\n\t\t\t\t@if (nav.iconSet) {\n\t\t\t\t\t<mat-icon matListItemIcon [fontSet]=\"nav.iconSet\" [class]=\"nav.active ? 'primary' : 'accent'\">{{ nav.icon }}</mat-icon>\n\t\t\t\t} @else {\n\t\t\t\t\t<mat-icon matListItemIcon [class]=\"nav.active ? 'primary' : 'accent'\">{{ nav.icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t\t<span matListItemTitle>{{ nav.name }}</span>\n\t\t\t</a>\n\t\t} @else if (nav.menu) {\n\t\t\t<mat-list-item (click)=\"nav.showSubmenu = !nav.showSubmenu\" (keydown.enter)=\"nav.showSubmenu = !nav.showSubmenu\" (keydown.space)=\"nav.showSubmenu = !nav.showSubmenu; $event.preventDefault()\" [attr.aria-expanded]=\"nav.showSubmenu\" class=\"parent\">\n\t\t\t\t@if (nav.iconSet) {\n\t\t\t\t\t<mat-icon matListItemIcon [fontSet]=\"nav.iconSet\" [class]=\"nav.active ? 'primary' : 'accent'\">{{ nav.icon }}</mat-icon>\n\t\t\t\t} @else {\n\t\t\t\t\t<mat-icon matListItemIcon [class]=\"nav.active ? 'primary' : 'accent'\">{{ nav.icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t\t<span matListItemTitle>{{ nav.name }}</span>\n\t\t\t\t<span matListItemMeta>\n\t\t\t\t\t<mat-icon class=\"menu-button\" [class.rotated]=\"nav.showSubmenu\">expand_more</mat-icon>\n\t\t\t\t</span>\n\t\t\t</mat-list-item>\n\t\t\t<div class=\"submenu\" [class.expanded]=\"nav.showSubmenu\">\n\t\t\t\t@for (subnav of nav.sub; track subnav) {\n\t\t\t\t\t@if (!subnav.hide) {\n\t\t\t\t\t\t@if (subnav.link) {\n\t\t\t\t\t\t\t@let subnavUrl = subnav.link | xiriUrl;\n\t\t\t\t\t\t\t<a mat-list-item [routerLink]=\"subnavUrl?.path\" [queryParams]=\"subnavUrl?.queryParams\" [class.active]=\"subnav.active\">{{ subnav.name }}</a>\n\t\t\t\t\t\t} @else if (subnav.menu) {\n\t\t\t\t\t\t\t<mat-list-item (click)=\"subnav.showSubmenu = !subnav.showSubmenu\" (keydown.enter)=\"subnav.showSubmenu = !subnav.showSubmenu\" (keydown.space)=\"subnav.showSubmenu = !subnav.showSubmenu; $event.preventDefault()\" [attr.aria-expanded]=\"subnav.showSubmenu\" class=\"parent\">\n\t\t\t\t\t\t\t\t<span matListItemTitle>{{ subnav.name }}</span>\n\t\t\t\t\t\t\t\t<span matListItemMeta>\n\t\t\t\t\t\t\t\t\t<mat-icon class=\"menu-button\" [class.rotated]=\"subnav.showSubmenu\">expand_more</mat-icon>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</mat-list-item>\n\t\t\t\t\t\t\t<div class=\"submenu submenu-nested\" [class.expanded]=\"subnav.showSubmenu\">\n\t\t\t\t\t\t\t\t@for (subsubnav of subnav.sub; track subsubnav) {\n\t\t\t\t\t\t\t\t\t@if (!subsubnav.hide) {\n\t\t\t\t\t\t\t\t\t\t@if (subsubnav.link) {\n\t\t\t\t\t\t\t\t\t\t\t@let subsubnavUrl = subsubnav.link | xiriUrl;\n\t\t\t\t\t\t\t\t\t\t\t<a mat-list-item [routerLink]=\"subsubnavUrl?.path\" [queryParams]=\"subsubnavUrl?.queryParams\" [class.active]=\"subsubnav.active\">{{ subsubnav.name }}</a>\n\t\t\t\t\t\t\t\t\t\t} @else if (subsubnav.extern) {\n\t\t\t\t\t\t\t\t\t\t\t<a mat-list-item [href]=\"subsubnav.extern\">{{ subsubnav.name }}</a>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t} @else if (subnav.extern) {\n\t\t\t\t\t\t\t<a mat-list-item [href]=\"subnav.extern\">{{ subnav.name }}</a>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</div>\n\t\t} @else if (nav.extern) {\n\t\t\t<a mat-list-item [href]=\"nav.extern\">\n\t\t\t\t@if (nav.iconSet) {\n\t\t\t\t\t<mat-icon matListItemIcon [fontSet]=\"nav.iconSet\" class=\"accent\">{{ nav.icon }}</mat-icon>\n\t\t\t\t} @else {\n\t\t\t\t\t<mat-icon matListItemIcon class=\"accent\">{{ nav.icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t\t<span matListItemTitle>{{ nav.name }}</span>\n\t\t\t</a>\n\t\t}\n\t}\n}\n", styles: [":host{min-width:160px}.loading{margin:var(--xiri-spacing-md)}.mat-mdc-list-item{--mat-list-list-item-label-text-size: .9rem;--mat-list-list-item-label-text-weight: 400}.mat-mdc-list-item mat-icon{display:flex;align-items:center;justify-content:center}.mat-mdc-list-item mat-icon.mat-mdc-list-item-icon{color:var(--xiri-sidenav-icon-color, var(--secondary, #51606F))}.mat-mdc-list-item .mdc-list-item__start{margin-right:var(--xiri-spacing-md)}.mat-mdc-list-item .menu-button{font-size:var(--xiri-font-size-title);transition:var(--xiri-duration-slow) var(--xiri-easing-standard);transform:rotate(0)}.mat-mdc-list-item .menu-button.rotated{transform:rotate(180deg)}.mat-mdc-list-item.active{text-decoration:var(--xiri-sidenav-active-decoration, none);background-color:var(--xiri-sidenav-active-color, transparent)}.mat-mdc-list-item.active mat-icon.mat-mdc-list-item-icon{color:var(--xiri-sidenav-active-icon-color, var(--primary))}.submenu{overflow-y:hidden;transition:max-height var(--xiri-duration-slow) var(--xiri-easing-decelerate);max-height:0;padding-left:var(--xiri-spacing-xl)}.submenu.expanded{transition:max-height var(--xiri-duration-slow) var(--xiri-easing-standard);max-height:1000px}.submenu-nested{padding-left:var(--xiri-spacing-md)}\n"], dependencies: [{ kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "pipe", type: XiriUrlPipe, name: "xiriUrl" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriSidenavComponent, isStandalone: true, selector: "xiri-sidenav", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (loading) {\n\t<div class=\"loading\">\n\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t</div>\n}\n\n@for (nav of fields; track nav) {\n\n\t<!-- One guard per level, not per branch: a hidden entry can never slip through\n\t     link/menu/extern. Structural, so no routerLink is left in the DOM. -->\n\t@if (!nav.hide) {\n\t\t@if ( nav.link ) {\n\t\t\t@let navUrl = nav.link | xiriUrl;\n\t\t\t<a mat-list-item [routerLink]=\"navUrl?.path\" [queryParams]=\"navUrl?.queryParams\" [class.active]=\"nav.active\">\n\t\t\t\t@if (nav.iconSet) {\n\t\t\t\t\t<mat-icon matListItemIcon [fontSet]=\"nav.iconSet\" [class]=\"nav.active ? 'primary' : 'accent'\">{{ nav.icon }}</mat-icon>\n\t\t\t\t} @else {\n\t\t\t\t\t<mat-icon matListItemIcon [class]=\"nav.active ? 'primary' : 'accent'\">{{ nav.icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t\t<span matListItemTitle>{{ nav.name }}</span>\n\t\t\t</a>\n\t\t} @else if (nav.menu) {\n\t\t\t<mat-list-item (click)=\"nav.showSubmenu = !nav.showSubmenu\" (keydown.enter)=\"nav.showSubmenu = !nav.showSubmenu\" (keydown.space)=\"nav.showSubmenu = !nav.showSubmenu; $event.preventDefault()\" [attr.aria-expanded]=\"nav.showSubmenu\" class=\"parent\">\n\t\t\t\t@if (nav.iconSet) {\n\t\t\t\t\t<mat-icon matListItemIcon [fontSet]=\"nav.iconSet\" [class]=\"nav.active ? 'primary' : 'accent'\">{{ nav.icon }}</mat-icon>\n\t\t\t\t} @else {\n\t\t\t\t\t<mat-icon matListItemIcon [class]=\"nav.active ? 'primary' : 'accent'\">{{ nav.icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t\t<span matListItemTitle>{{ nav.name }}</span>\n\t\t\t\t<span matListItemMeta>\n\t\t\t\t\t<mat-icon class=\"menu-button\" [class.rotated]=\"nav.showSubmenu\">expand_more</mat-icon>\n\t\t\t\t</span>\n\t\t\t</mat-list-item>\n\t\t\t<div class=\"submenu\" [class.expanded]=\"nav.showSubmenu\">\n\t\t\t\t@for (subnav of nav.sub; track subnav) {\n\t\t\t\t\t@if (!subnav.hide) {\n\t\t\t\t\t\t@if (subnav.link) {\n\t\t\t\t\t\t\t@let subnavUrl = subnav.link | xiriUrl;\n\t\t\t\t\t\t\t<a mat-list-item [routerLink]=\"subnavUrl?.path\" [queryParams]=\"subnavUrl?.queryParams\" [class.active]=\"subnav.active\">{{ subnav.name }}</a>\n\t\t\t\t\t\t} @else if (subnav.menu) {\n\t\t\t\t\t\t\t<mat-list-item (click)=\"subnav.showSubmenu = !subnav.showSubmenu\" (keydown.enter)=\"subnav.showSubmenu = !subnav.showSubmenu\" (keydown.space)=\"subnav.showSubmenu = !subnav.showSubmenu; $event.preventDefault()\" [attr.aria-expanded]=\"subnav.showSubmenu\" class=\"parent\">\n\t\t\t\t\t\t\t\t<span matListItemTitle>{{ subnav.name }}</span>\n\t\t\t\t\t\t\t\t<span matListItemMeta>\n\t\t\t\t\t\t\t\t\t<mat-icon class=\"menu-button\" [class.rotated]=\"subnav.showSubmenu\">expand_more</mat-icon>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</mat-list-item>\n\t\t\t\t\t\t\t<div class=\"submenu submenu-nested\" [class.expanded]=\"subnav.showSubmenu\">\n\t\t\t\t\t\t\t\t@for (subsubnav of subnav.sub; track subsubnav) {\n\t\t\t\t\t\t\t\t\t@if (!subsubnav.hide) {\n\t\t\t\t\t\t\t\t\t\t@if (subsubnav.link) {\n\t\t\t\t\t\t\t\t\t\t\t@let subsubnavUrl = subsubnav.link | xiriUrl;\n\t\t\t\t\t\t\t\t\t\t\t<a mat-list-item [routerLink]=\"subsubnavUrl?.path\" [queryParams]=\"subsubnavUrl?.queryParams\" [class.active]=\"subsubnav.active\">{{ subsubnav.name }}</a>\n\t\t\t\t\t\t\t\t\t\t} @else if (subsubnav.extern) {\n\t\t\t\t\t\t\t\t\t\t\t<a mat-list-item [href]=\"subsubnav.extern\">{{ subsubnav.name }}</a>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t} @else if (subnav.extern) {\n\t\t\t\t\t\t\t<a mat-list-item [href]=\"subnav.extern\">{{ subnav.name }}</a>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</div>\n\t\t} @else if (nav.extern) {\n\t\t\t<a mat-list-item [href]=\"nav.extern\">\n\t\t\t\t@if (nav.iconSet) {\n\t\t\t\t\t<mat-icon matListItemIcon [fontSet]=\"nav.iconSet\" class=\"accent\">{{ nav.icon }}</mat-icon>\n\t\t\t\t} @else {\n\t\t\t\t\t<mat-icon matListItemIcon class=\"accent\">{{ nav.icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t\t<span matListItemTitle>{{ nav.name }}</span>\n\t\t\t</a>\n\t\t}\n\t}\n}\n", styles: [":host{min-width:160px}.loading{margin:var(--xiri-spacing-md)}.mat-mdc-list-item{--mat-list-list-item-label-text-size: .9rem;--mat-list-list-item-label-text-weight: 400}.mat-mdc-list-item mat-icon{display:flex;align-items:center;justify-content:center}.mat-mdc-list-item mat-icon.mat-mdc-list-item-icon{color:var(--xiri-sidenav-icon-color, var(--secondary, #51606F))}.mat-mdc-list-item .mdc-list-item__start{margin-right:var(--xiri-spacing-md)}.mat-mdc-list-item .menu-button{font-size:var(--xiri-font-size-title);transition:var(--xiri-duration-slow) var(--xiri-easing-standard);transform:rotate(0)}.mat-mdc-list-item .menu-button.rotated{transform:rotate(180deg)}.mat-mdc-list-item.active{text-decoration:var(--xiri-sidenav-active-decoration, none);background-color:var(--xiri-sidenav-active-color, transparent)}.mat-mdc-list-item.active mat-icon.mat-mdc-list-item-icon{color:var(--xiri-sidenav-active-icon-color, var(--primary))}.submenu{overflow-y:hidden;transition:max-height var(--xiri-duration-slow) var(--xiri-easing-decelerate);max-height:0;padding-left:var(--xiri-spacing-xl)}.submenu.expanded{transition:max-height var(--xiri-duration-slow) var(--xiri-easing-standard);max-height:1000px}.submenu-nested{padding-left:var(--xiri-spacing-md)}\n"], dependencies: [{ kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "pipe", type: XiriUrlPipe, name: "xiriUrl" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriSidenavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriSidenavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-sidenav', imports: [
                         MatProgressSpinner,
@@ -7202,10 +7366,10 @@ class XiriBreadcrumbComponent {
         this.settings = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriBreadcrumbComponent, isStandalone: true, selector: "xiri-breadcrumb", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n\t<ol>\n\t\t@for (item of settings(); track $index; let last = $last) {\n\t\t\t<li [class.active]=\"last\">\n\t\t\t\t@if (item.link) {\n\t\t\t\t\t@if (item.extern) {\n\t\t\t\t\t\t<a [href]=\"item.link\" target=\"_blank\" rel=\"noopener\">\n\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t@let itemUrl = item.link | xiriUrl;\n\t\t\t\t\t\t<a [routerLink]=\"itemUrl?.path\" [queryParams]=\"itemUrl?.queryParams\">\n\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t}\n\t\t\t\t} @else {\n\t\t\t\t\t<span>\n\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t</span>\n\t\t\t\t}\n\t\t\t\t@if (!last) {\n\t\t\t\t\t<mat-icon class=\"separator\">chevron_right</mat-icon>\n\t\t\t\t}\n\t\t\t</li>\n\t\t}\n\t</ol>\n</nav>\n", styles: [".breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0;gap:var(--xiri-spacing-xs)}.breadcrumb li{display:flex;align-items:center;gap:var(--xiri-spacing-xs);font-size:var(--xiri-font-size-body, .875rem);color:var(--on-surface-variant, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)))}.breadcrumb li a{display:flex;align-items:center;gap:.25rem;color:var(--primary, #2892D9);text-decoration:none;border-radius:var(--xiri-radius-xs);padding:.125rem .25rem;margin:-.125rem -.25rem}.breadcrumb li a:hover{text-decoration:underline;background:color-mix(in srgb,var(--primary, #2892D9) 8%,transparent)}.breadcrumb li a mat-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.breadcrumb li span{display:flex;align-items:center;gap:var(--xiri-spacing-xs)}.breadcrumb li span mat-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.breadcrumb li.active{font-weight:500;color:var(--on-surface, var(--mat-sys-on-surface, rgba(0, 0, 0, .87)))}.breadcrumb li .separator{font-size:1.125rem;width:1.125rem;height:1.125rem;color:var(--on-surface-variant, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)))}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "pipe", type: XiriUrlPipe, name: "xiriUrl" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriBreadcrumbComponent, isStandalone: true, selector: "xiri-breadcrumb", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n\t<ol>\n\t\t@for (item of settings(); track $index; let last = $last) {\n\t\t\t<li [class.active]=\"last\">\n\t\t\t\t@if (item.link) {\n\t\t\t\t\t@if (item.extern) {\n\t\t\t\t\t\t<a [href]=\"item.link\" target=\"_blank\" rel=\"noopener\">\n\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t@let itemUrl = item.link | xiriUrl;\n\t\t\t\t\t\t<a [routerLink]=\"itemUrl?.path\" [queryParams]=\"itemUrl?.queryParams\">\n\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t}\n\t\t\t\t} @else {\n\t\t\t\t\t<span>\n\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t</span>\n\t\t\t\t}\n\t\t\t\t@if (!last) {\n\t\t\t\t\t<mat-icon class=\"separator\">chevron_right</mat-icon>\n\t\t\t\t}\n\t\t\t</li>\n\t\t}\n\t</ol>\n</nav>\n", styles: [".breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0;gap:var(--xiri-spacing-xs)}.breadcrumb li{display:flex;align-items:center;gap:var(--xiri-spacing-xs);font-size:var(--xiri-font-size-body, .875rem);color:var(--on-surface-variant, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)))}.breadcrumb li a{display:flex;align-items:center;gap:.25rem;color:var(--primary, #2892D9);text-decoration:none;border-radius:var(--xiri-radius-xs);padding:.125rem .25rem;margin:-.125rem -.25rem}.breadcrumb li a:hover{text-decoration:underline;background:color-mix(in srgb,var(--primary, #2892D9) 8%,transparent)}.breadcrumb li a mat-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.breadcrumb li span{display:flex;align-items:center;gap:var(--xiri-spacing-xs)}.breadcrumb li span mat-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.breadcrumb li.active{font-weight:500;color:var(--on-surface, var(--mat-sys-on-surface, rgba(0, 0, 0, .87)))}.breadcrumb li .separator{font-size:1.125rem;width:1.125rem;height:1.125rem;color:var(--on-surface-variant, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)))}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "pipe", type: XiriUrlPipe, name: "xiriUrl" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriBreadcrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriBreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-breadcrumb', imports: [MatIcon, RouterLink, XiriUrlPipe], template: "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n\t<ol>\n\t\t@for (item of settings(); track $index; let last = $last) {\n\t\t\t<li [class.active]=\"last\">\n\t\t\t\t@if (item.link) {\n\t\t\t\t\t@if (item.extern) {\n\t\t\t\t\t\t<a [href]=\"item.link\" target=\"_blank\" rel=\"noopener\">\n\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t@let itemUrl = item.link | xiriUrl;\n\t\t\t\t\t\t<a [routerLink]=\"itemUrl?.path\" [queryParams]=\"itemUrl?.queryParams\">\n\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t}\n\t\t\t\t} @else {\n\t\t\t\t\t<span>\n\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t</span>\n\t\t\t\t}\n\t\t\t\t@if (!last) {\n\t\t\t\t\t<mat-icon class=\"separator\">chevron_right</mat-icon>\n\t\t\t\t}\n\t\t\t</li>\n\t\t}\n\t</ol>\n</nav>\n", styles: [".breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0;gap:var(--xiri-spacing-xs)}.breadcrumb li{display:flex;align-items:center;gap:var(--xiri-spacing-xs);font-size:var(--xiri-font-size-body, .875rem);color:var(--on-surface-variant, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)))}.breadcrumb li a{display:flex;align-items:center;gap:.25rem;color:var(--primary, #2892D9);text-decoration:none;border-radius:var(--xiri-radius-xs);padding:.125rem .25rem;margin:-.125rem -.25rem}.breadcrumb li a:hover{text-decoration:underline;background:color-mix(in srgb,var(--primary, #2892D9) 8%,transparent)}.breadcrumb li a mat-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.breadcrumb li span{display:flex;align-items:center;gap:var(--xiri-spacing-xs)}.breadcrumb li span mat-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.breadcrumb li.active{font-weight:500;color:var(--on-surface, var(--mat-sys-on-surface, rgba(0, 0, 0, .87)))}.breadcrumb li .separator{font-size:1.125rem;width:1.125rem;height:1.125rem;color:var(--on-surface-variant, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)))}\n"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
@@ -7215,10 +7379,10 @@ class XiriTimelineComponent {
         this.settings = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriTimelineComponent, isStandalone: true, selector: "xiri-timeline", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"timeline\" [class.horizontal]=\"settings().orientation === 'horizontal'\">\n\t@for (item of settings().items; track $index; let last = $last; let first = $first) {\n\t\t<div class=\"timeline-item\" [class.last]=\"last\" [class.first]=\"first\">\n\t\t\t<div class=\"timeline-marker\">\n\t\t\t\t<div class=\"timeline-line line-before\"></div>\n\t\t\t\t<div class=\"timeline-dot\" [class]=\"item.iconColor || 'primary'\">\n\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t\t<div class=\"timeline-line line-after\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"timeline-content\">\n\t\t\t\t<div class=\"timeline-header\">\n\t\t\t\t\t<span class=\"timeline-title\">{{ item.title }}</span>\n\t\t\t\t\t@if (item.datetime) {\n\t\t\t\t\t\t<span class=\"timeline-datetime\">{{ item.datetime }}</span>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t\t@if (item.description && settings().orientation !== 'horizontal') {\n\t\t\t\t\t<div class=\"timeline-description\">{{ item.description }}</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t}\n</div>\n", styles: [":host{display:block;container-type:inline-size}.timeline{display:flex;flex-direction:column}.timeline-item{display:flex;gap:var(--xiri-spacing-md);animation:fadeInUp var(--xiri-duration-normal, .3s) var(--xiri-easing-decelerate, cubic-bezier(0, 0, .2, 1)) both}.timeline-item:nth-child(1){animation-delay:0ms}.timeline-item:nth-child(2){animation-delay:50ms}.timeline-item:nth-child(3){animation-delay:.1s}.timeline-item:nth-child(4){animation-delay:.15s}.timeline-item:nth-child(5){animation-delay:.2s}.timeline-item:nth-child(6){animation-delay:.25s}.timeline-item:nth-child(7){animation-delay:.3s}.timeline-item:nth-child(8){animation-delay:.35s}.timeline-item:nth-child(9){animation-delay:.4s}.timeline-item:nth-child(10){animation-delay:.45s}.timeline-item:nth-child(11){animation-delay:.5s}.timeline-item:nth-child(12){animation-delay:.55s}.timeline-item:nth-child(13){animation-delay:.6s}.timeline-item:nth-child(14){animation-delay:.65s}.timeline-item:nth-child(15){animation-delay:.7s}.timeline-item:nth-child(16){animation-delay:.75s}.timeline-item:nth-child(17){animation-delay:.8s}.timeline-item:nth-child(18){animation-delay:.85s}.timeline-item:nth-child(19){animation-delay:.9s}.timeline-item:nth-child(20){animation-delay:.95s}.timeline-item .timeline-line.line-before,.timeline-item.last .timeline-line.line-after{display:none}.timeline-marker{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:2.5rem}.timeline-dot{width:2.5rem;height:2.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--primary, #2892D9);color:var(--on-primary, white)}.timeline-dot mat-icon{font-size:1.25rem;width:1.25rem;height:1.25rem}.timeline-dot.primary{background:var(--primary)}.timeline-dot.secondary{background:var(--secondary)}.timeline-dot.tertiary{background:var(--tertiary)}.timeline-dot.accent{background:var(--secondary)}.timeline-dot.warn,.timeline-dot.error{background:var(--error)}.timeline-dot.success{background:var(--color-success)}.timeline-dot.emerald{background:#2892d9}.timeline-dot.red{background:#e74c3c}.timeline-dot.yellow{background:#f1c40f}.timeline-dot.green{background:#2ecc71}.timeline-dot.blue{background:#3498db}.timeline-dot.purple{background:#9b59b6}.timeline-dot.gray{background:#95a5a6}.timeline-dot.lightgray{background:#bdc3c7}.timeline-dot.darkgray{background:#7f8c8d}.timeline-dot.orange{background:#e67e22}.timeline-dot.white{background:#fff}.timeline-dot.black{background:#000}.timeline-dot.inherit{background:inherit}.timeline-line{width:2px;flex:1;min-height:var(--xiri-spacing-lg);background:var(--outline-variant, var(--mat-sys-outline-variant, rgba(0, 0, 0, .12)))}.timeline-content{padding-bottom:var(--xiri-spacing-lg);flex:1;min-width:0}.timeline-header{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;min-height:2.5rem;align-content:center}.timeline-title{font-weight:500;font-size:var(--xiri-font-size-body, .875rem);color:var(--on-surface, var(--mat-sys-on-surface, rgba(0, 0, 0, .87)))}.timeline-datetime{font-size:var(--xiri-font-size-helper, .75rem);color:var(--on-surface-variant, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)))}.timeline-description{margin-top:.25rem;font-size:var(--xiri-font-size-body, .875rem);color:var(--on-surface-variant, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)));line-height:1.5}@container (min-width: 481px){.timeline.horizontal{flex-direction:row}.timeline.horizontal .timeline-item{flex:1;min-width:0;flex-direction:column;align-items:center;gap:var(--xiri-spacing-xs);padding-bottom:0}.timeline.horizontal .timeline-item .timeline-line.line-before{display:block}.timeline.horizontal .timeline-item.first .timeline-line.line-before{visibility:hidden}.timeline.horizontal .timeline-item.last .timeline-line.line-after{display:block;visibility:hidden}.timeline.horizontal .timeline-content,.timeline.horizontal .timeline-header{display:contents}.timeline.horizontal .timeline-title{order:-2;text-align:center;min-height:2.5em;display:flex;align-items:center;justify-content:center;padding:0 var(--xiri-spacing-xs)}.timeline.horizontal .timeline-marker{order:-1;width:100%;flex-direction:row;align-items:center;gap:0}.timeline.horizontal .timeline-datetime{order:1;text-align:center;min-height:1.5em;display:flex;align-items:center;justify-content:center}.timeline.horizontal .timeline-line{flex:1;width:auto;height:2px;min-height:0}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriTimelineComponent, isStandalone: true, selector: "xiri-timeline", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"timeline\" [class.horizontal]=\"settings().orientation === 'horizontal'\">\n\t@for (item of settings().items; track $index; let last = $last; let first = $first) {\n\t\t<div class=\"timeline-item\" [class.last]=\"last\" [class.first]=\"first\">\n\t\t\t<div class=\"timeline-marker\">\n\t\t\t\t<div class=\"timeline-line line-before\"></div>\n\t\t\t\t<div class=\"timeline-dot\" [class]=\"item.iconColor || 'primary'\">\n\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t\t<div class=\"timeline-line line-after\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"timeline-content\">\n\t\t\t\t<div class=\"timeline-header\">\n\t\t\t\t\t<span class=\"timeline-title\">{{ item.title }}</span>\n\t\t\t\t\t@if (item.datetime) {\n\t\t\t\t\t\t<span class=\"timeline-datetime\">{{ item.datetime }}</span>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t\t@if (item.description && settings().orientation !== 'horizontal') {\n\t\t\t\t\t<div class=\"timeline-description\">{{ item.description }}</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t}\n</div>\n", styles: [":host{display:block;container-type:inline-size}.timeline{display:flex;flex-direction:column}.timeline-item{display:flex;gap:var(--xiri-spacing-md);animation:fadeInUp var(--xiri-duration-normal, .3s) var(--xiri-easing-decelerate, cubic-bezier(0, 0, .2, 1)) both}.timeline-item:nth-child(1){animation-delay:0ms}.timeline-item:nth-child(2){animation-delay:50ms}.timeline-item:nth-child(3){animation-delay:.1s}.timeline-item:nth-child(4){animation-delay:.15s}.timeline-item:nth-child(5){animation-delay:.2s}.timeline-item:nth-child(6){animation-delay:.25s}.timeline-item:nth-child(7){animation-delay:.3s}.timeline-item:nth-child(8){animation-delay:.35s}.timeline-item:nth-child(9){animation-delay:.4s}.timeline-item:nth-child(10){animation-delay:.45s}.timeline-item:nth-child(11){animation-delay:.5s}.timeline-item:nth-child(12){animation-delay:.55s}.timeline-item:nth-child(13){animation-delay:.6s}.timeline-item:nth-child(14){animation-delay:.65s}.timeline-item:nth-child(15){animation-delay:.7s}.timeline-item:nth-child(16){animation-delay:.75s}.timeline-item:nth-child(17){animation-delay:.8s}.timeline-item:nth-child(18){animation-delay:.85s}.timeline-item:nth-child(19){animation-delay:.9s}.timeline-item:nth-child(20){animation-delay:.95s}.timeline-item .timeline-line.line-before,.timeline-item.last .timeline-line.line-after{display:none}.timeline-marker{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:2.5rem}.timeline-dot{width:2.5rem;height:2.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--primary, #2892D9);color:var(--on-primary, white)}.timeline-dot mat-icon{font-size:1.25rem;width:1.25rem;height:1.25rem}.timeline-dot.primary{background:var(--primary)}.timeline-dot.secondary{background:var(--secondary)}.timeline-dot.tertiary{background:var(--tertiary)}.timeline-dot.accent{background:var(--secondary)}.timeline-dot.warn,.timeline-dot.error{background:var(--error)}.timeline-dot.success{background:var(--color-success)}.timeline-dot.emerald{background:#2892d9}.timeline-dot.red{background:#e74c3c}.timeline-dot.yellow{background:#f1c40f}.timeline-dot.green{background:#2ecc71}.timeline-dot.blue{background:#3498db}.timeline-dot.purple{background:#9b59b6}.timeline-dot.gray{background:#95a5a6}.timeline-dot.lightgray{background:#bdc3c7}.timeline-dot.darkgray{background:#7f8c8d}.timeline-dot.orange{background:#e67e22}.timeline-dot.white{background:#fff}.timeline-dot.black{background:#000}.timeline-dot.inherit{background:inherit}.timeline-line{width:2px;flex:1;min-height:var(--xiri-spacing-lg);background:var(--outline-variant, var(--mat-sys-outline-variant, rgba(0, 0, 0, .12)))}.timeline-content{padding-bottom:var(--xiri-spacing-lg);flex:1;min-width:0}.timeline-header{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;min-height:2.5rem;align-content:center}.timeline-title{font-weight:500;font-size:var(--xiri-font-size-body, .875rem);color:var(--on-surface, var(--mat-sys-on-surface, rgba(0, 0, 0, .87)))}.timeline-datetime{font-size:var(--xiri-font-size-helper, .75rem);color:var(--on-surface-variant, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)))}.timeline-description{margin-top:.25rem;font-size:var(--xiri-font-size-body, .875rem);color:var(--on-surface-variant, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)));line-height:1.5}@container (min-width: 481px){.timeline.horizontal{flex-direction:row}.timeline.horizontal .timeline-item{flex:1;min-width:0;flex-direction:column;align-items:center;gap:var(--xiri-spacing-xs);padding-bottom:0}.timeline.horizontal .timeline-item .timeline-line.line-before{display:block}.timeline.horizontal .timeline-item.first .timeline-line.line-before{visibility:hidden}.timeline.horizontal .timeline-item.last .timeline-line.line-after{display:block;visibility:hidden}.timeline.horizontal .timeline-content,.timeline.horizontal .timeline-header{display:contents}.timeline.horizontal .timeline-title{order:-2;text-align:center;min-height:2.5em;display:flex;align-items:center;justify-content:center;padding:0 var(--xiri-spacing-xs)}.timeline.horizontal .timeline-marker{order:-1;width:100%;flex-direction:row;align-items:center;gap:0}.timeline.horizontal .timeline-datetime{order:1;text-align:center;min-height:1.5em;display:flex;align-items:center;justify-content:center}.timeline.horizontal .timeline-line{flex:1;width:auto;height:2px;min-height:0}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriTimelineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriTimelineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-timeline', imports: [MatIcon], template: "<div class=\"timeline\" [class.horizontal]=\"settings().orientation === 'horizontal'\">\n\t@for (item of settings().items; track $index; let last = $last; let first = $first) {\n\t\t<div class=\"timeline-item\" [class.last]=\"last\" [class.first]=\"first\">\n\t\t\t<div class=\"timeline-marker\">\n\t\t\t\t<div class=\"timeline-line line-before\"></div>\n\t\t\t\t<div class=\"timeline-dot\" [class]=\"item.iconColor || 'primary'\">\n\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t\t<div class=\"timeline-line line-after\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"timeline-content\">\n\t\t\t\t<div class=\"timeline-header\">\n\t\t\t\t\t<span class=\"timeline-title\">{{ item.title }}</span>\n\t\t\t\t\t@if (item.datetime) {\n\t\t\t\t\t\t<span class=\"timeline-datetime\">{{ item.datetime }}</span>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t\t@if (item.description && settings().orientation !== 'horizontal') {\n\t\t\t\t\t<div class=\"timeline-description\">{{ item.description }}</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t}\n</div>\n", styles: [":host{display:block;container-type:inline-size}.timeline{display:flex;flex-direction:column}.timeline-item{display:flex;gap:var(--xiri-spacing-md);animation:fadeInUp var(--xiri-duration-normal, .3s) var(--xiri-easing-decelerate, cubic-bezier(0, 0, .2, 1)) both}.timeline-item:nth-child(1){animation-delay:0ms}.timeline-item:nth-child(2){animation-delay:50ms}.timeline-item:nth-child(3){animation-delay:.1s}.timeline-item:nth-child(4){animation-delay:.15s}.timeline-item:nth-child(5){animation-delay:.2s}.timeline-item:nth-child(6){animation-delay:.25s}.timeline-item:nth-child(7){animation-delay:.3s}.timeline-item:nth-child(8){animation-delay:.35s}.timeline-item:nth-child(9){animation-delay:.4s}.timeline-item:nth-child(10){animation-delay:.45s}.timeline-item:nth-child(11){animation-delay:.5s}.timeline-item:nth-child(12){animation-delay:.55s}.timeline-item:nth-child(13){animation-delay:.6s}.timeline-item:nth-child(14){animation-delay:.65s}.timeline-item:nth-child(15){animation-delay:.7s}.timeline-item:nth-child(16){animation-delay:.75s}.timeline-item:nth-child(17){animation-delay:.8s}.timeline-item:nth-child(18){animation-delay:.85s}.timeline-item:nth-child(19){animation-delay:.9s}.timeline-item:nth-child(20){animation-delay:.95s}.timeline-item .timeline-line.line-before,.timeline-item.last .timeline-line.line-after{display:none}.timeline-marker{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:2.5rem}.timeline-dot{width:2.5rem;height:2.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--primary, #2892D9);color:var(--on-primary, white)}.timeline-dot mat-icon{font-size:1.25rem;width:1.25rem;height:1.25rem}.timeline-dot.primary{background:var(--primary)}.timeline-dot.secondary{background:var(--secondary)}.timeline-dot.tertiary{background:var(--tertiary)}.timeline-dot.accent{background:var(--secondary)}.timeline-dot.warn,.timeline-dot.error{background:var(--error)}.timeline-dot.success{background:var(--color-success)}.timeline-dot.emerald{background:#2892d9}.timeline-dot.red{background:#e74c3c}.timeline-dot.yellow{background:#f1c40f}.timeline-dot.green{background:#2ecc71}.timeline-dot.blue{background:#3498db}.timeline-dot.purple{background:#9b59b6}.timeline-dot.gray{background:#95a5a6}.timeline-dot.lightgray{background:#bdc3c7}.timeline-dot.darkgray{background:#7f8c8d}.timeline-dot.orange{background:#e67e22}.timeline-dot.white{background:#fff}.timeline-dot.black{background:#000}.timeline-dot.inherit{background:inherit}.timeline-line{width:2px;flex:1;min-height:var(--xiri-spacing-lg);background:var(--outline-variant, var(--mat-sys-outline-variant, rgba(0, 0, 0, .12)))}.timeline-content{padding-bottom:var(--xiri-spacing-lg);flex:1;min-width:0}.timeline-header{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;min-height:2.5rem;align-content:center}.timeline-title{font-weight:500;font-size:var(--xiri-font-size-body, .875rem);color:var(--on-surface, var(--mat-sys-on-surface, rgba(0, 0, 0, .87)))}.timeline-datetime{font-size:var(--xiri-font-size-helper, .75rem);color:var(--on-surface-variant, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)))}.timeline-description{margin-top:.25rem;font-size:var(--xiri-font-size-body, .875rem);color:var(--on-surface-variant, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)));line-height:1.5}@container (min-width: 481px){.timeline.horizontal{flex-direction:row}.timeline.horizontal .timeline-item{flex:1;min-width:0;flex-direction:column;align-items:center;gap:var(--xiri-spacing-xs);padding-bottom:0}.timeline.horizontal .timeline-item .timeline-line.line-before{display:block}.timeline.horizontal .timeline-item.first .timeline-line.line-before{visibility:hidden}.timeline.horizontal .timeline-item.last .timeline-line.line-after{display:block;visibility:hidden}.timeline.horizontal .timeline-content,.timeline.horizontal .timeline-header{display:contents}.timeline.horizontal .timeline-title{order:-2;text-align:center;min-height:2.5em;display:flex;align-items:center;justify-content:center;padding:0 var(--xiri-spacing-xs)}.timeline.horizontal .timeline-marker{order:-1;width:100%;flex-direction:row;align-items:center;gap:0}.timeline.horizontal .timeline-datetime{order:1;text-align:center;min-height:1.5em;display:flex;align-items:center;justify-content:center}.timeline.horizontal .timeline-line{flex:1;width:auto;height:2px;min-height:0}}\n"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
@@ -7323,10 +7487,10 @@ class XiriEchartsHostComponent {
             return;
         this.chart.setOption(opt, true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriEchartsHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriEchartsHostComponent, isStandalone: true, selector: "xiri-echarts-host", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, headerIconColor: { classPropertyName: "headerIconColor", publicName: "headerIconColor", isSignal: true, isRequired: false, transformFunction: null }, chartHeight: { classPropertyName: "chartHeight", publicName: "chartHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.compact": "compact()" } }, viewQueries: [{ propertyName: "chartHostRef", first: true, predicate: ["chartHost"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (compact()) {\n\t<div class=\"xiri-echarts xiri-echarts-flat\">\n\t\t@if (hasHeader()) {\n\t\t\t<div class=\"xiri-echarts-header\">\n\t\t\t\t@if (headerIcon()) {\n\t\t\t\t\t<mat-icon [class]=\"headerIconColor() || 'primary'\">{{ headerIcon() }}</mat-icon>\n\t\t\t\t}\n\t\t\t\t@if (title()) {\n\t\t\t\t\t<div class=\"xiri-echarts-title\">{{ title() }}</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t\t<div #chartHost class=\"xiri-echarts-host\" [style.height]=\"chartHeight()\"></div>\n\t\t@if (error()) {\n\t\t\t<div class=\"xiri-echarts-error\">{{ error() }}</div>\n\t\t}\n\t</div>\n} @else {\n\t<mat-card class=\"xiri-echarts mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-content>\n\t\t\t@if (hasHeader()) {\n\t\t\t\t<div class=\"xiri-echarts-header\">\n\t\t\t\t\t@if (headerIcon()) {\n\t\t\t\t\t\t<mat-icon [class]=\"headerIconColor() || 'primary'\">{{ headerIcon() }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t\t@if (title()) {\n\t\t\t\t\t\t<div class=\"xiri-echarts-title\">{{ title() }}</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div #chartHost class=\"xiri-echarts-host\" [style.height]=\"chartHeight()\"></div>\n\t\t\t@if (error()) {\n\t\t\t\t<div class=\"xiri-echarts-error\">{{ error() }}</div>\n\t\t\t}\n\t\t</mat-card-content>\n\t</mat-card>\n}\n", styles: [".xiri-echarts{height:100%}.xiri-echarts .xiri-echarts-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.xiri-echarts .xiri-echarts-header mat-icon{font-size:var(--xiri-icon-size-md, 24px);width:var(--xiri-icon-size-md, 24px);height:var(--xiri-icon-size-md, 24px)}.xiri-echarts .xiri-echarts-title{font-size:14px;font-weight:500;color:var(--on-surface-variant, var(--mat-sys-on-surface-variant, #555))}.xiri-echarts .xiri-echarts-host{width:100%;min-height:160px}.xiri-echarts .xiri-echarts-error{font-size:12px;color:var(--error, var(--mat-sys-error, #b00020));padding:8px 0}.xiri-echarts-flat{background:transparent;box-shadow:none;padding:0}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriEchartsHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriEchartsHostComponent, isStandalone: true, selector: "xiri-echarts-host", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, headerIconColor: { classPropertyName: "headerIconColor", publicName: "headerIconColor", isSignal: true, isRequired: false, transformFunction: null }, chartHeight: { classPropertyName: "chartHeight", publicName: "chartHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.compact": "compact()" } }, viewQueries: [{ propertyName: "chartHostRef", first: true, predicate: ["chartHost"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (compact()) {\n\t<div class=\"xiri-echarts xiri-echarts-flat\">\n\t\t@if (hasHeader()) {\n\t\t\t<div class=\"xiri-echarts-header\">\n\t\t\t\t@if (headerIcon()) {\n\t\t\t\t\t<mat-icon [class]=\"headerIconColor() || 'primary'\">{{ headerIcon() }}</mat-icon>\n\t\t\t\t}\n\t\t\t\t@if (title()) {\n\t\t\t\t\t<div class=\"xiri-echarts-title\">{{ title() }}</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t\t<div #chartHost class=\"xiri-echarts-host\" [style.height]=\"chartHeight()\"></div>\n\t\t@if (error()) {\n\t\t\t<div class=\"xiri-echarts-error\">{{ error() }}</div>\n\t\t}\n\t</div>\n} @else {\n\t<mat-card class=\"xiri-echarts mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-content>\n\t\t\t@if (hasHeader()) {\n\t\t\t\t<div class=\"xiri-echarts-header\">\n\t\t\t\t\t@if (headerIcon()) {\n\t\t\t\t\t\t<mat-icon [class]=\"headerIconColor() || 'primary'\">{{ headerIcon() }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t\t@if (title()) {\n\t\t\t\t\t\t<div class=\"xiri-echarts-title\">{{ title() }}</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div #chartHost class=\"xiri-echarts-host\" [style.height]=\"chartHeight()\"></div>\n\t\t\t@if (error()) {\n\t\t\t\t<div class=\"xiri-echarts-error\">{{ error() }}</div>\n\t\t\t}\n\t\t</mat-card-content>\n\t</mat-card>\n}\n", styles: [".xiri-echarts{height:100%}.xiri-echarts .xiri-echarts-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.xiri-echarts .xiri-echarts-header mat-icon{font-size:var(--xiri-icon-size-md, 24px);width:var(--xiri-icon-size-md, 24px);height:var(--xiri-icon-size-md, 24px)}.xiri-echarts .xiri-echarts-title{font-size:14px;font-weight:500;color:var(--on-surface-variant, var(--mat-sys-on-surface-variant, #555))}.xiri-echarts .xiri-echarts-host{width:100%;min-height:160px}.xiri-echarts .xiri-echarts-error{font-size:12px;color:var(--error, var(--mat-sys-error, #b00020));padding:8px 0}.xiri-echarts-flat{background:transparent;box-shadow:none;padding:0}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriEchartsHostComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriEchartsHostComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-echarts-host', encapsulation: ViewEncapsulation.None, imports: [MatCard, MatCardContent, MatIcon], host: { '[class.compact]': 'compact()' }, template: "@if (compact()) {\n\t<div class=\"xiri-echarts xiri-echarts-flat\">\n\t\t@if (hasHeader()) {\n\t\t\t<div class=\"xiri-echarts-header\">\n\t\t\t\t@if (headerIcon()) {\n\t\t\t\t\t<mat-icon [class]=\"headerIconColor() || 'primary'\">{{ headerIcon() }}</mat-icon>\n\t\t\t\t}\n\t\t\t\t@if (title()) {\n\t\t\t\t\t<div class=\"xiri-echarts-title\">{{ title() }}</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t\t<div #chartHost class=\"xiri-echarts-host\" [style.height]=\"chartHeight()\"></div>\n\t\t@if (error()) {\n\t\t\t<div class=\"xiri-echarts-error\">{{ error() }}</div>\n\t\t}\n\t</div>\n} @else {\n\t<mat-card class=\"xiri-echarts mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-content>\n\t\t\t@if (hasHeader()) {\n\t\t\t\t<div class=\"xiri-echarts-header\">\n\t\t\t\t\t@if (headerIcon()) {\n\t\t\t\t\t\t<mat-icon [class]=\"headerIconColor() || 'primary'\">{{ headerIcon() }}</mat-icon>\n\t\t\t\t\t}\n\t\t\t\t\t@if (title()) {\n\t\t\t\t\t\t<div class=\"xiri-echarts-title\">{{ title() }}</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div #chartHost class=\"xiri-echarts-host\" [style.height]=\"chartHeight()\"></div>\n\t\t\t@if (error()) {\n\t\t\t\t<div class=\"xiri-echarts-error\">{{ error() }}</div>\n\t\t\t}\n\t\t</mat-card-content>\n\t</mat-card>\n}\n", styles: [".xiri-echarts{height:100%}.xiri-echarts .xiri-echarts-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.xiri-echarts .xiri-echarts-header mat-icon{font-size:var(--xiri-icon-size-md, 24px);width:var(--xiri-icon-size-md, 24px);height:var(--xiri-icon-size-md, 24px)}.xiri-echarts .xiri-echarts-title{font-size:14px;font-weight:500;color:var(--on-surface-variant, var(--mat-sys-on-surface-variant, #555))}.xiri-echarts .xiri-echarts-host{width:100%;min-height:160px}.xiri-echarts .xiri-echarts-error{font-size:12px;color:var(--error, var(--mat-sys-error, #b00020));padding:8px 0}.xiri-echarts-flat{background:transparent;box-shadow:none;padding:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: true }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], headerIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerIcon", required: false }] }], headerIconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerIconColor", required: false }] }], chartHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartHeight", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], chartHostRef: [{ type: i0.ViewChild, args: ['chartHost', { isSignal: true }] }] } });
@@ -7652,8 +7816,8 @@ class XiriBarChartComponent {
                 }]
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: XiriBarChartComponent, isStandalone: true, selector: "xiri-barchart", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: XiriBarChartComponent, isStandalone: true, selector: "xiri-barchart", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
 		<xiri-echarts-host
 			[option]="option()"
 			[compact]="compact()"
@@ -7663,7 +7827,7 @@ class XiriBarChartComponent {
 		</xiri-echarts-host>
 	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"], outputs: ["itemClick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriBarChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriBarChartComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'xiri-barchart',
@@ -7763,8 +7927,8 @@ class XiriLineChartComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriLineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: XiriLineChartComponent, isStandalone: true, selector: "xiri-linechart", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriLineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: XiriLineChartComponent, isStandalone: true, selector: "xiri-linechart", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
 		<xiri-echarts-host
 			[option]="option()"
 			[compact]="compact()"
@@ -7773,7 +7937,7 @@ class XiriLineChartComponent {
 		</xiri-echarts-host>
 	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"], outputs: ["itemClick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriLineChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriLineChartComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'xiri-linechart',
@@ -7842,8 +8006,8 @@ class XiriPieChartComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriPieChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriPieChartComponent, isStandalone: true, selector: "xiri-piechart", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriPieChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriPieChartComponent, isStandalone: true, selector: "xiri-piechart", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
 		@if (warn()) {
 			<div class="chart-hint">Mehr als 4 Segmente erschweren den Vergleich — Balken- oder Tabellendarstellung erwägen.</div>
 		}
@@ -7854,7 +8018,7 @@ class XiriPieChartComponent {
 		</xiri-echarts-host>
 	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"], outputs: ["itemClick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriPieChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriPieChartComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'xiri-piechart',
@@ -7924,8 +8088,8 @@ class XiriGaugeChartComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriGaugeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: XiriGaugeChartComponent, isStandalone: true, selector: "xiri-gaugechart", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriGaugeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: XiriGaugeChartComponent, isStandalone: true, selector: "xiri-gaugechart", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
 		<xiri-echarts-host
 			[option]="option()"
 			[compact]="compact()"
@@ -7933,7 +8097,7 @@ class XiriGaugeChartComponent {
 		</xiri-echarts-host>
 	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"], outputs: ["itemClick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriGaugeChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriGaugeChartComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'xiri-gaugechart',
@@ -7999,8 +8163,8 @@ class XiriBulletChartComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriBulletChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: XiriBulletChartComponent, isStandalone: true, selector: "xiri-bulletchart", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriBulletChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: XiriBulletChartComponent, isStandalone: true, selector: "xiri-bulletchart", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
 		<xiri-echarts-host
 			[option]="option()"
 			[compact]="compact()"
@@ -8008,7 +8172,7 @@ class XiriBulletChartComponent {
 		</xiri-echarts-host>
 	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"], outputs: ["itemClick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriBulletChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriBulletChartComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'xiri-bulletchart',
@@ -8100,8 +8264,8 @@ class XiriHeatmapComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriHeatmapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: XiriHeatmapComponent, isStandalone: true, selector: "xiri-heatmap", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriHeatmapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: XiriHeatmapComponent, isStandalone: true, selector: "xiri-heatmap", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
 		<xiri-echarts-host
 			[option]="option()"
 			[compact]="compact()"
@@ -8110,7 +8274,7 @@ class XiriHeatmapComponent {
 		</xiri-echarts-host>
 	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"], outputs: ["itemClick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriHeatmapComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriHeatmapComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'xiri-heatmap',
@@ -8192,8 +8356,8 @@ class XiriCalendarComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: XiriCalendarComponent, isStandalone: true, selector: "xiri-calendar", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: XiriCalendarComponent, isStandalone: true, selector: "xiri-calendar", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
 		<xiri-echarts-host
 			[option]="option()"
 			[compact]="compact()"
@@ -8202,7 +8366,7 @@ class XiriCalendarComponent {
 		</xiri-echarts-host>
 	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"], outputs: ["itemClick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriCalendarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'xiri-calendar',
@@ -8285,8 +8449,8 @@ class XiriTreeComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: XiriTreeComponent, isStandalone: true, selector: "xiri-tree", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: XiriTreeComponent, isStandalone: true, selector: "xiri-tree", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
 		<xiri-echarts-host
 			[option]="option()"
 			[compact]="compact()"
@@ -8295,7 +8459,7 @@ class XiriTreeComponent {
 		</xiri-echarts-host>
 	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"], outputs: ["itemClick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriTreeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'xiri-tree',
@@ -8360,8 +8524,8 @@ class XiriSankeyComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriSankeyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: XiriSankeyComponent, isStandalone: true, selector: "xiri-sankey", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriSankeyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: XiriSankeyComponent, isStandalone: true, selector: "xiri-sankey", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
 		<xiri-echarts-host
 			[option]="option()"
 			[compact]="compact()"
@@ -8370,7 +8534,7 @@ class XiriSankeyComponent {
 		</xiri-echarts-host>
 	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"], outputs: ["itemClick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriSankeyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriSankeyComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'xiri-sankey',
@@ -8468,8 +8632,8 @@ class XiriGanttComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriGanttComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: XiriGanttComponent, isStandalone: true, selector: "xiri-gantt", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriGanttComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: XiriGanttComponent, isStandalone: true, selector: "xiri-gantt", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
 		<xiri-echarts-host
 			[option]="option()"
 			[compact]="compact()"
@@ -8478,7 +8642,7 @@ class XiriGanttComponent {
 		</xiri-echarts-host>
 	`, isInline: true, dependencies: [{ kind: "component", type: XiriEchartsHostComponent, selector: "xiri-echarts-host", inputs: ["option", "compact", "title", "headerIcon", "headerIconColor", "chartHeight"], outputs: ["itemClick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriGanttComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriGanttComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'xiri-gantt',
@@ -8514,10 +8678,10 @@ class XiriPageHeaderComponent {
         this.settings = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriPageHeaderComponent, isStandalone: true, selector: "xiri-page-header", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"page-header\">\n\t<div class=\"page-header-content\">\n\t\t@if (settings().icon) {\n\t\t\t<div class=\"page-header-icon\" [class]=\"settings().iconColor || 'primary'\">\n\t\t\t\t<mat-icon>{{ settings().icon }}</mat-icon>\n\t\t\t</div>\n\t\t}\n\t\t<div class=\"page-header-text\">\n\t\t\t<h1>{{ settings().title }}</h1>\n\t\t\t@if (settings().subtitle) {\n\t\t\t\t<p>{{ settings().subtitle }}</p>\n\t\t\t}\n\t\t</div>\n\t</div>\n\t@if (settings().buttons) {\n\t\t<xiri-buttonline [settings]=\"settings().buttons!\"></xiri-buttonline>\n\t}\n</div>\n", styles: [".page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--xiri-spacing-md, 1rem);padding:var(--xiri-spacing-lg, 1.5rem) 0 var(--xiri-spacing-sm, .5rem);border-bottom:3px solid var(--primary);margin-bottom:var(--xiri-spacing-lg, 1.5rem)}.page-header h1{font-size:var(--xiri-font-size-headline);font-weight:500;margin:0;color:var(--on-surface)}.page-header p{font-size:var(--xiri-font-size-body);color:var(--on-surface-variant);margin:var(--xiri-spacing-xs) 0 0}.page-header .page-header-icon mat-icon{font-size:var(--xiri-font-size-headline);width:var(--xiri-font-size-headline);height:var(--xiri-font-size-headline)}.page-header .page-header-content{display:flex;align-items:center;gap:var(--xiri-spacing-md, 1rem)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: XiriButtonlineComponent, selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriPageHeaderComponent, isStandalone: true, selector: "xiri-page-header", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"page-header\">\n\t<div class=\"page-header-content\">\n\t\t@if (settings().icon) {\n\t\t\t<div class=\"page-header-icon\" [class]=\"settings().iconColor || 'primary'\">\n\t\t\t\t<mat-icon>{{ settings().icon }}</mat-icon>\n\t\t\t</div>\n\t\t}\n\t\t<div class=\"page-header-text\">\n\t\t\t<h1>{{ settings().title }}</h1>\n\t\t\t@if (settings().subtitle) {\n\t\t\t\t<p>{{ settings().subtitle }}</p>\n\t\t\t}\n\t\t</div>\n\t</div>\n\t@if (settings().buttons) {\n\t\t<xiri-buttonline [settings]=\"settings().buttons!\"></xiri-buttonline>\n\t}\n</div>\n", styles: [".page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--xiri-spacing-md, 1rem);padding:var(--xiri-spacing-lg, 1.5rem) 0 var(--xiri-spacing-sm, .5rem);border-bottom:3px solid var(--primary);margin-bottom:var(--xiri-spacing-lg, 1.5rem)}.page-header h1{font-size:var(--xiri-font-size-headline);font-weight:500;margin:0;color:var(--on-surface)}.page-header p{font-size:var(--xiri-font-size-body);color:var(--on-surface-variant);margin:var(--xiri-spacing-xs) 0 0}.page-header .page-header-icon mat-icon{font-size:var(--xiri-font-size-headline);width:var(--xiri-font-size-headline);height:var(--xiri-font-size-headline)}.page-header .page-header-content{display:flex;align-items:center;gap:var(--xiri-spacing-md, 1rem)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: XiriButtonlineComponent, selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriPageHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriPageHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-page-header', imports: [MatIcon, XiriButtonlineComponent], template: "<div class=\"page-header\">\n\t<div class=\"page-header-content\">\n\t\t@if (settings().icon) {\n\t\t\t<div class=\"page-header-icon\" [class]=\"settings().iconColor || 'primary'\">\n\t\t\t\t<mat-icon>{{ settings().icon }}</mat-icon>\n\t\t\t</div>\n\t\t}\n\t\t<div class=\"page-header-text\">\n\t\t\t<h1>{{ settings().title }}</h1>\n\t\t\t@if (settings().subtitle) {\n\t\t\t\t<p>{{ settings().subtitle }}</p>\n\t\t\t}\n\t\t</div>\n\t</div>\n\t@if (settings().buttons) {\n\t\t<xiri-buttonline [settings]=\"settings().buttons!\"></xiri-buttonline>\n\t}\n</div>\n", styles: [".page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--xiri-spacing-md, 1rem);padding:var(--xiri-spacing-lg, 1.5rem) 0 var(--xiri-spacing-sm, .5rem);border-bottom:3px solid var(--primary);margin-bottom:var(--xiri-spacing-lg, 1.5rem)}.page-header h1{font-size:var(--xiri-font-size-headline);font-weight:500;margin:0;color:var(--on-surface)}.page-header p{font-size:var(--xiri-font-size-body);color:var(--on-surface-variant);margin:var(--xiri-spacing-xs) 0 0}.page-header .page-header-icon mat-icon{font-size:var(--xiri-font-size-headline);width:var(--xiri-font-size-headline);height:var(--xiri-font-size-headline)}.page-header .page-header-content{display:flex;align-items:center;gap:var(--xiri-spacing-md, 1rem)}\n"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
@@ -8532,10 +8696,10 @@ class XiriDividerComponent {
         this.settings = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriDividerComponent, isStandalone: true, selector: "xiri-divider", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"xiri-divider\" [class]=\"settings().spacing || 'normal'\">\n\t@if (settings().text || settings().icon) {\n\t\t<mat-divider></mat-divider>\n\t\t<span class=\"divider-label\">\n\t\t\t@if (settings().icon) { <mat-icon>{{ settings().icon }}</mat-icon> }\n\t\t\t@if (settings().text) { {{ settings().text }} }\n\t\t</span>\n\t\t<mat-divider></mat-divider>\n\t} @else {\n\t\t<mat-divider></mat-divider>\n\t}\n</div>\n", styles: [".xiri-divider{display:flex;align-items:center;gap:var(--xiri-spacing-md)}.xiri-divider mat-divider{flex:1}.xiri-divider .divider-label{display:flex;align-items:center;gap:.25rem;color:var(--on-surface-variant);font-size:var(--xiri-font-size-label);white-space:nowrap}.xiri-divider.compact{padding:var(--xiri-spacing-xs) 0}.xiri-divider.normal{padding:var(--xiri-spacing-md) 0}.xiri-divider.large{padding:var(--xiri-spacing-xl) 0}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriDividerComponent, isStandalone: true, selector: "xiri-divider", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"xiri-divider\" [class]=\"settings().spacing || 'normal'\">\n\t@if (settings().text || settings().icon) {\n\t\t<mat-divider></mat-divider>\n\t\t<span class=\"divider-label\">\n\t\t\t@if (settings().icon) { <mat-icon>{{ settings().icon }}</mat-icon> }\n\t\t\t@if (settings().text) { {{ settings().text }} }\n\t\t</span>\n\t\t<mat-divider></mat-divider>\n\t} @else {\n\t\t<mat-divider></mat-divider>\n\t}\n</div>\n", styles: [".xiri-divider{display:flex;align-items:center;gap:var(--xiri-spacing-md)}.xiri-divider mat-divider{flex:1}.xiri-divider .divider-label{display:flex;align-items:center;gap:.25rem;color:var(--on-surface-variant);font-size:var(--xiri-font-size-label);white-space:nowrap}.xiri-divider.compact{padding:var(--xiri-spacing-xs) 0}.xiri-divider.normal{padding:var(--xiri-spacing-md) 0}.xiri-divider.large{padding:var(--xiri-spacing-xl) 0}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriDividerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriDividerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-divider', imports: [MatIcon, MatDivider], template: "<div class=\"xiri-divider\" [class]=\"settings().spacing || 'normal'\">\n\t@if (settings().text || settings().icon) {\n\t\t<mat-divider></mat-divider>\n\t\t<span class=\"divider-label\">\n\t\t\t@if (settings().icon) { <mat-icon>{{ settings().icon }}</mat-icon> }\n\t\t\t@if (settings().text) { {{ settings().text }} }\n\t\t</span>\n\t\t<mat-divider></mat-divider>\n\t} @else {\n\t\t<mat-divider></mat-divider>\n\t}\n</div>\n", styles: [".xiri-divider{display:flex;align-items:center;gap:var(--xiri-spacing-md)}.xiri-divider mat-divider{flex:1}.xiri-divider .divider-label{display:flex;align-items:center;gap:.25rem;color:var(--on-surface-variant);font-size:var(--xiri-font-size-label);white-space:nowrap}.xiri-divider.compact{padding:var(--xiri-spacing-xs) 0}.xiri-divider.normal{padding:var(--xiri-spacing-md) 0}.xiri-divider.large{padding:var(--xiri-spacing-xl) 0}\n"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
@@ -8550,10 +8714,10 @@ class XiriStatGridComponent {
         this.settings = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriStatGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriStatGridComponent, isStandalone: true, selector: "xiri-stat-grid", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (settings().title) {\n\t<h3 class=\"stat-grid-title\">{{ settings().title }}</h3>\n}\n<div class=\"stat-grid\" [style.--stat-cols]=\"settings().columns || 4\">\n\t@for (stat of settings().stats; track $index) {\n\t\t<xiri-stat [settings]=\"stat\"></xiri-stat>\n\t}\n</div>\n", styles: [".stat-grid-title{font-size:var(--xiri-font-size-title);font-weight:500;margin:0 0 var(--xiri-spacing-md)}:host{display:block;container-type:inline-size}.stat-grid{display:grid;grid-template-columns:repeat(var(--stat-cols, 4),minmax(0,1fr));gap:var(--xiri-spacing-md)}@container (max-width: 992px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@container (max-width: 576px){.stat-grid{grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "component", type: XiriStatComponent, selector: "xiri-stat", inputs: ["settings"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriStatGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriStatGridComponent, isStandalone: true, selector: "xiri-stat-grid", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (settings().title) {\n\t<h3 class=\"stat-grid-title\">{{ settings().title }}</h3>\n}\n<div class=\"stat-grid\" [style.--stat-cols]=\"settings().columns || 4\">\n\t@for (stat of settings().stats; track $index) {\n\t\t<xiri-stat [settings]=\"stat\"></xiri-stat>\n\t}\n</div>\n", styles: [".stat-grid-title{font-size:var(--xiri-font-size-title);font-weight:500;margin:0 0 var(--xiri-spacing-md)}:host{display:block;container-type:inline-size}.stat-grid{display:grid;grid-template-columns:repeat(var(--stat-cols, 4),minmax(0,1fr));gap:var(--xiri-spacing-md)}@container (max-width: 992px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@container (max-width: 576px){.stat-grid{grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "component", type: XiriStatComponent, selector: "xiri-stat", inputs: ["settings"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriStatGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriStatGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-stat-grid', imports: [XiriStatComponent], template: "@if (settings().title) {\n\t<h3 class=\"stat-grid-title\">{{ settings().title }}</h3>\n}\n<div class=\"stat-grid\" [style.--stat-cols]=\"settings().columns || 4\">\n\t@for (stat of settings().stats; track $index) {\n\t\t<xiri-stat [settings]=\"stat\"></xiri-stat>\n\t}\n</div>\n", styles: [".stat-grid-title{font-size:var(--xiri-font-size-title);font-weight:500;margin:0 0 var(--xiri-spacing-md)}:host{display:block;container-type:inline-size}.stat-grid{display:grid;grid-template-columns:repeat(var(--stat-cols, 4),minmax(0,1fr));gap:var(--xiri-spacing-md)}@container (max-width: 992px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@container (max-width: 576px){.stat-grid{grid-template-columns:minmax(0,1fr)}}\n"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
@@ -8579,10 +8743,10 @@ class XiriToolbarComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriToolbarComponent, isStandalone: true, selector: "xiri-toolbar", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, filterData: { classPropertyName: "filterData", publicName: "filterData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChanged: "searchChanged" }, ngImport: i0, template: "<div class=\"xiri-toolbar\">\n\t@if (settings().icon) {\n\t\t<mat-icon>{{ settings().icon }}</mat-icon>\n\t}\n\t@if (settings().title) {\n\t\t<span class=\"toolbar-title\">{{ settings().title }}</span>\n\t}\n\t<div class=\"toolbar-spacer\"></div>\n\t@if (settings().search) {\n\t\t<xiri-search [placeholder]=\"searchPlaceholder()\" [open]=\"true\" (changed)=\"searchChanged.emit($event)\"></xiri-search>\n\t}\n\t@if (settings().buttons) {\n\t\t<xiri-buttonline [settings]=\"settings().buttons!\" [filterData]=\"filterData()\"></xiri-buttonline>\n\t}\n</div>\n", styles: [".xiri-toolbar{display:flex;align-items:center;gap:var(--xiri-spacing-sm);padding:var(--xiri-spacing-sm) var(--xiri-spacing-md);background:var(--surface-container, var(--surface));border-radius:var(--mat-card-elevated-container-shape, 12px);min-height:48px}.xiri-toolbar .toolbar-title{font-size:var(--xiri-font-size-title);font-weight:500}.xiri-toolbar .toolbar-spacer{flex:1}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: XiriButtonlineComponent, selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "component", type: XiriSearchComponent, selector: "xiri-search", inputs: ["placeholder", "open", "reset", "escape", "focus", "text"], outputs: ["changed"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriToolbarComponent, isStandalone: true, selector: "xiri-toolbar", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, filterData: { classPropertyName: "filterData", publicName: "filterData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChanged: "searchChanged" }, ngImport: i0, template: "<div class=\"xiri-toolbar\">\n\t@if (settings().icon) {\n\t\t<mat-icon>{{ settings().icon }}</mat-icon>\n\t}\n\t@if (settings().title) {\n\t\t<span class=\"toolbar-title\">{{ settings().title }}</span>\n\t}\n\t<div class=\"toolbar-spacer\"></div>\n\t@if (settings().search) {\n\t\t<xiri-search [placeholder]=\"searchPlaceholder()\" [open]=\"true\" (changed)=\"searchChanged.emit($event)\"></xiri-search>\n\t}\n\t@if (settings().buttons) {\n\t\t<xiri-buttonline [settings]=\"settings().buttons!\" [filterData]=\"filterData()\"></xiri-buttonline>\n\t}\n</div>\n", styles: [".xiri-toolbar{display:flex;align-items:center;gap:var(--xiri-spacing-sm);padding:var(--xiri-spacing-sm) var(--xiri-spacing-md);background:var(--surface-container, var(--surface));border-radius:var(--mat-card-elevated-container-shape, 12px);min-height:48px}.xiri-toolbar .toolbar-title{font-size:var(--xiri-font-size-title);font-weight:500}.xiri-toolbar .toolbar-spacer{flex:1}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: XiriButtonlineComponent, selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "component", type: XiriSearchComponent, selector: "xiri-search", inputs: ["placeholder", "open", "reset", "escape", "focus", "text"], outputs: ["changed"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-toolbar', imports: [MatIcon, XiriButtonlineComponent, XiriSearchComponent], template: "<div class=\"xiri-toolbar\">\n\t@if (settings().icon) {\n\t\t<mat-icon>{{ settings().icon }}</mat-icon>\n\t}\n\t@if (settings().title) {\n\t\t<span class=\"toolbar-title\">{{ settings().title }}</span>\n\t}\n\t<div class=\"toolbar-spacer\"></div>\n\t@if (settings().search) {\n\t\t<xiri-search [placeholder]=\"searchPlaceholder()\" [open]=\"true\" (changed)=\"searchChanged.emit($event)\"></xiri-search>\n\t}\n\t@if (settings().buttons) {\n\t\t<xiri-buttonline [settings]=\"settings().buttons!\" [filterData]=\"filterData()\"></xiri-buttonline>\n\t}\n</div>\n", styles: [".xiri-toolbar{display:flex;align-items:center;gap:var(--xiri-spacing-sm);padding:var(--xiri-spacing-sm) var(--xiri-spacing-md);background:var(--surface-container, var(--surface));border-radius:var(--mat-card-elevated-container-shape, 12px);min-height:48px}.xiri-toolbar .toolbar-title{font-size:var(--xiri-font-size-title);font-weight:500}.xiri-toolbar .toolbar-spacer{flex:1}\n"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }], filterData: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterData", required: false }] }], searchChanged: [{ type: i0.Output, args: ["searchChanged"] }] } });
@@ -8603,10 +8767,10 @@ class XiriDescriptionListComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "layoutClass" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriDescriptionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: XiriDescriptionListComponent, isStandalone: true, selector: "xiri-description-list", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<dl class=\"description-list\" [class]=\"layoutClass()\" [style.--dl-cols]=\"settings().columns || 2\">\n\t@for (item of settings().items; track $index) {\n\t\t<div class=\"dl-item\">\n\t\t\t<dt>\n\t\t\t\t@if (item.icon) { <mat-icon [class]=\"item.color || ''\">{{ item.icon }}</mat-icon> }\n\t\t\t\t{{ item.label }}\n\t\t\t</dt>\n\t\t\t<dd>\n\t\t\t\t@switch (item.type) {\n\t\t\t\t\t@case ('link') { <a [href]=\"item.value\" target=\"_blank\" rel=\"noopener\">{{ item.value }}</a> }\n\t\t\t\t\t@case ('html') { <span [innerHTML]=\"item.value | safeHtml\"></span> }\n\t\t\t\t\t@case ('badge') { <span class=\"dl-badge\" [class]=\"item.color || 'primary'\">{{ item.value }}</span> }\n\t\t\t\t\t@default { {{ item.value || '\\u2014' }} }\n\t\t\t\t}\n\t\t\t</dd>\n\t\t</div>\n\t}\n</dl>\n", styles: [".description-list{display:grid;grid-template-columns:repeat(var(--dl-cols, 2),1fr);gap:var(--xiri-spacing-md);margin:0;padding:0}@media(max-width:768px){.description-list{grid-template-columns:1fr}}.description-list .dl-item dt{display:flex;align-items:center;gap:var(--xiri-spacing-xs);font-size:var(--xiri-font-size-label);color:var(--on-surface-variant);margin-bottom:var(--xiri-spacing-xs)}.description-list .dl-item dd{font-size:var(--xiri-font-size-body);color:var(--on-surface);margin:0}.description-list.horizontal .dl-item{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:var(--xiri-spacing-md)}.description-list.horizontal .dl-item dt{margin-bottom:0}.description-list .dl-badge{display:inline-block;padding:.125rem .5rem;border-radius:var(--xiri-radius-xs);font-size:var(--xiri-font-size-label)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriDescriptionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: XiriDescriptionListComponent, isStandalone: true, selector: "xiri-description-list", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<dl class=\"description-list\" [class]=\"layoutClass()\" [style.--dl-cols]=\"settings().columns || 2\">\n\t@for (item of settings().items; track $index) {\n\t\t<div class=\"dl-item\">\n\t\t\t<dt>\n\t\t\t\t@if (item.icon) { <mat-icon [class]=\"item.color || ''\">{{ item.icon }}</mat-icon> }\n\t\t\t\t{{ item.label }}\n\t\t\t</dt>\n\t\t\t<dd>\n\t\t\t\t@switch (item.type) {\n\t\t\t\t\t@case ('link') { <a [href]=\"item.value\" target=\"_blank\" rel=\"noopener\">{{ item.value }}</a> }\n\t\t\t\t\t@case ('html') { <span [innerHTML]=\"item.value | safeHtml\"></span> }\n\t\t\t\t\t@case ('badge') { <span class=\"dl-badge\" [class]=\"item.color || 'primary'\">{{ item.value }}</span> }\n\t\t\t\t\t@default { {{ item.value || '\\u2014' }} }\n\t\t\t\t}\n\t\t\t</dd>\n\t\t</div>\n\t}\n</dl>\n", styles: [".description-list{display:grid;grid-template-columns:repeat(var(--dl-cols, 2),1fr);gap:var(--xiri-spacing-md);margin:0;padding:0}@media(max-width:768px){.description-list{grid-template-columns:1fr}}.description-list .dl-item dt{display:flex;align-items:center;gap:var(--xiri-spacing-xs);font-size:var(--xiri-font-size-label);color:var(--on-surface-variant);margin-bottom:var(--xiri-spacing-xs)}.description-list .dl-item dd{font-size:var(--xiri-font-size-body);color:var(--on-surface);margin:0}.description-list.horizontal .dl-item{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:var(--xiri-spacing-md)}.description-list.horizontal .dl-item dt{margin-bottom:0}.description-list .dl-badge{display:inline-block;padding:.125rem .5rem;border-radius:var(--xiri-radius-xs);font-size:var(--xiri-font-size-label)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: XiriDescriptionListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: XiriDescriptionListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-description-list', imports: [MatIcon, SafehtmlPipe], template: "<dl class=\"description-list\" [class]=\"layoutClass()\" [style.--dl-cols]=\"settings().columns || 2\">\n\t@for (item of settings().items; track $index) {\n\t\t<div class=\"dl-item\">\n\t\t\t<dt>\n\t\t\t\t@if (item.icon) { <mat-icon [class]=\"item.color || ''\">{{ item.icon }}</mat-icon> }\n\t\t\t\t{{ item.label }}\n\t\t\t</dt>\n\t\t\t<dd>\n\t\t\t\t@switch (item.type) {\n\t\t\t\t\t@case ('link') { <a [href]=\"item.value\" target=\"_blank\" rel=\"noopener\">{{ item.value }}</a> }\n\t\t\t\t\t@case ('html') { <span [innerHTML]=\"item.value | safeHtml\"></span> }\n\t\t\t\t\t@case ('badge') { <span class=\"dl-badge\" [class]=\"item.color || 'primary'\">{{ item.value }}</span> }\n\t\t\t\t\t@default { {{ item.value || '\\u2014' }} }\n\t\t\t\t}\n\t\t\t</dd>\n\t\t</div>\n\t}\n</dl>\n", styles: [".description-list{display:grid;grid-template-columns:repeat(var(--dl-cols, 2),1fr);gap:var(--xiri-spacing-md);margin:0;padding:0}@media(max-width:768px){.description-list{grid-template-columns:1fr}}.description-list .dl-item dt{display:flex;align-items:center;gap:var(--xiri-spacing-xs);font-size:var(--xiri-font-size-label);color:var(--on-surface-variant);margin-bottom:var(--xiri-spacing-xs)}.description-list .dl-item dd{font-size:var(--xiri-font-size-body);color:var(--on-surface);margin:0}.description-list.horizontal .dl-item{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:var(--xiri-spacing-md)}.description-list.horizontal .dl-item dt{margin-bottom:0}.description-list .dl-badge{display:inline-block;padding:.125rem .5rem;border-radius:var(--xiri-radius-xs);font-size:var(--xiri-font-size-label)}\n"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
@@ -8712,10 +8876,10 @@ class ThemeService {
         // variables), so they have to be told to re-resolve.
         notifyThemeChanged();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Service }); }
-    static { this.ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.7", ngImport: i0, type: ThemeService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Service }); }
+    static { this.ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.0", ngImport: i0, type: ThemeService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ThemeService, decorators: [{
             type: Service
         }], ctorParameters: () => [] });