@xiriframework/xiri-ng 0.2.9 → 0.2.12

package/fesm2022/xiriframework-xiri-ng.mjs

@@ -1,32 +1,31 @@
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i0 from '@angular/core';
-import { inject, Pipe, ElementRef, ChangeDetectorRef, Input, ChangeDetectionStrategy, Component, output, signal, booleanAttribute, numberAttribute, Optional, Self, Injectable, input, viewChild, DestroyRef, effect, Directive, forwardRef, computed, ViewEncapsulation, PLATFORM_ID, makeEnvironmentProviders } from '@angular/core';
+import { inject, Pipe, ElementRef, ChangeDetectorRef, Input, ChangeDetectionStrategy, Component, Injectable, output, signal, afterRenderEffect, booleanAttribute, numberAttribute, input, viewChild, DestroyRef, effect, Directive, forwardRef, computed, Injector, afterNextRender, ViewEncapsulation, PLATFORM_ID, makeEnvironmentProviders } from '@angular/core';
+import { trigger, transition, style, animate } from '@angular/animations';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i2 from '@angular/forms';
-import { NgControl, FormGroup, FormControl, FormsModule, ReactiveFormsModule, Validators, UntypedFormControl, NG_VALUE_ACCESSOR, UntypedFormBuilder } from '@angular/forms';
+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 { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { MatFormField, MatLabel, MatSuffix, MatHint, MatError, MatFormFieldControl, MatPrefix } from '@angular/material/form-field';
 import { Subject, Subscription, tap, debounceTime, distinctUntilChanged, BehaviorSubject, ReplaySubject, switchMap, catchError, of, map, throwError, timer, filter as filter$1 } from 'rxjs';
-import * as i1 from '@angular/cdk/a11y';
 import { FocusMonitor, CdkTrapFocus } from '@angular/cdk/a11y';
 import { MatIcon } from '@angular/material/icon';
 import { MatIconButton, MatButton, MatFabButton, MatMiniFabButton } from '@angular/material/button';
 import { MatInput } from '@angular/material/input';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { KeyValuePipe, AsyncPipe, Location, NgTemplateOutlet, SlicePipe, isPlatformBrowser } from '@angular/common';
-import * as i3 from '@angular/material/core';
-import { MatOption, _ErrorStateTracker, DateAdapter, MatLine, MatRipple } from '@angular/material/core';
-import { MatSelect } from '@angular/material/select';
+import { KeyValuePipe, NgTemplateOutlet, AsyncPipe, Location, SlicePipe, isPlatformBrowser } from '@angular/common';
+import { MatOption, DateAdapter, ErrorStateMatcher, _ErrorStateTracker, MatLine, MatRipple } from '@angular/material/core';
+import { MatSelect, MatOption as MatOption$1 } from '@angular/material/select';
 import { MatCheckbox } from '@angular/material/checkbox';
-import { MatDatepickerInput, MatDatepickerToggle, MatDatepickerToggleIcon, MatDatepicker, MatDateRangeInput, MatStartDate, MatEndDate, MatDateRangePicker } from '@angular/material/datepicker';
 import { fromUnixTime, format, transpose } from 'date-fns';
 import { tz } from '@date-fns/tz';
+import { MatDatepickerInput, MatDatepickerToggle, MatDatepickerToggleIcon, MatDatepicker, MatDateRangeInput, MatStartDate, MatEndDate, MatDateRangePicker } from '@angular/material/datepicker';
 import { MatTree, MatTreeNestedDataSource, MatTreeNode, MatTreeNodeToggle, MatTreeNodePadding, MatTreeNodeDef } from '@angular/material/tree';
 import { SelectionModel } from '@angular/cdk/collections';
 import { HttpClient } from '@angular/common/http';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { filter, takeUntil } from 'rxjs/operators';
-import * as i2$1 from 'ngx-mat-select-search';
+import * as i2 from 'ngx-mat-select-search';
 import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import { MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
@@ -42,11 +41,11 @@ import { MatDivider } from '@angular/material/divider';
 import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
 import { MatCard, MatCardHeader, MatCardAvatar, MatCardTitle, MatCardSubtitle, MatCardContent, MatCardActions } from '@angular/material/card';
 import { MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle, MatAccordion, MatExpansionPanelDescription } from '@angular/material/expansion';
-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 { MatTabGroup, MatTab, MatTabLabel } from '@angular/material/tabs';
 import { CdkScrollable } from '@angular/cdk/scrolling';
+import { MatProgressBar } from '@angular/material/progress-bar';
 
 class SafehtmlPipe {
     constructor() {
@@ -55,10 +54,10 @@ class SafehtmlPipe {
     transform(style) {
         return this.sanitizer.bypassSecurityTrustHtml(style);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SafehtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: SafehtmlPipe, isStandalone: true, name: "safeHtml" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SafehtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: SafehtmlPipe, isStandalone: true, name: "safeHtml" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SafehtmlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SafehtmlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'safeHtml'
@@ -196,13 +195,13 @@ class XiriFileComponent {
         console.log('unknown error file', errors);
         return 'error';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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: "21.2.2", ngImport: i0, type: XiriFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.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: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            }], 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriFileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriFileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-file', host: {
                         '[id]': 'id',
@@ -428,13 +427,13 @@ class XiriTimelimitComponent {
     onCompare(_left, _right) {
         return -1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriTimelimitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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: "21.2.2", ngImport: i0, type: XiriTimelimitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            }], 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriTimelimitComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriTimelimitComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-timelimit', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[id]': 'id',
@@ -601,13 +600,13 @@ class XiriVolumeComponent {
     }
     onContainerClick(event) {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriVolumeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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: "21.2.2", ngImport: i0, type: XiriVolumeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.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: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            }], 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriVolumeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriVolumeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-volume', host: {
                         '[id]': 'id',
@@ -630,16 +629,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 type: Input
             }] } });
 
+class XiriDateService {
+    constructor() {
+        this.currentTimezone = 'Europe/Vienna';
+        this.dateAdapter = inject(DateAdapter);
+    }
+    setTimezone(tz) {
+        this.currentTimezone = tz;
+    }
+    setLocale(localeString, locale) {
+        this.dateAdapter.setLocale(locale);
+    }
+    unixToLocal(stime) {
+        if (stime === null || stime === undefined)
+            return null;
+        return fromUnixTime(stime, { in: tz(this.currentTimezone) });
+    }
+    unixToStringDateTime(stime) {
+        return format(this.unixToLocal(stime), 'yyyy-MM-dd HH:mm');
+    }
+    unixToStringDate(stime) {
+        return format(this.unixToLocal(stime), 'd. LLL.');
+    }
+    unixToStringDateYear(stime) {
+        return format(this.unixToLocal(stime), 'd. LLL. yy');
+    }
+    dateToUnix(date) {
+        return Math.floor(transpose(date, tz(this.currentTimezone)).getTime() / 1000);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriDateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriDateService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriDateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class XiriFieldMain {
-    constructor(_elementRef, _parentForm, _parentFormGroup, _changeDetectorRef, _defaultErrorStateMatcher, ngControl, _focusMonitor) {
-        this._elementRef = _elementRef;
-        this._changeDetectorRef = _changeDetectorRef;
-        this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
-        this.ngControl = ngControl;
-        this._focusMonitor = _focusMonitor;
-        /**
-         * Implemented as part of MatFormFieldControl.
-         */
+    constructor() {
+        this._elementRef = inject(ElementRef);
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._focusMonitor = inject(FocusMonitor);
+        this._defaultErrorStateMatcher = inject(ErrorStateMatcher);
+        this.ngControl = inject(NgControl, { self: true, optional: true });
+        this._parentForm = inject(NgForm, { optional: true });
+        this._parentFormGroup = inject(FormGroupDirective, { optional: true });
         this.stateChanges = new Subject();
         this.autofilled = false;
         this.valueChange = output();
@@ -650,15 +686,14 @@ class XiriFieldMain {
         this.touched = false;
         this.subs = new Subscription();
         this.controlType = 'xiri-form-field';
-        /** Tabindex of the chip set. */
         this.tabIndex = 0;
         this._value = null;
-        this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
-        /**
-         * Implemented as part of MatFormFieldControl.
-         */
+        this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
         this.focused = false;
-        this._errorStateTracker = new _ErrorStateTracker(_defaultErrorStateMatcher, ngControl, _parentFormGroup, _parentForm, this.stateChanges);
+        this._errorStateTracker = new _ErrorStateTracker(this._defaultErrorStateMatcher, this.ngControl, this._parentFormGroup, this._parentForm, this.stateChanges);
+        afterRenderEffect(() => {
+            this.doCheckLogic();
+        });
     }
     ngOnInit() {
         this.subs.add(this._focusMonitor.monitor(this._elementRef, true).subscribe(origin => {
@@ -678,19 +713,30 @@ class XiriFieldMain {
         this.subs.unsubscribe();
         this.stateChanges.complete();
     }
-    /**
-     * Implemented as part of MatFormFieldControl.
-     * @docs-private
-     */
+    doCheckLogic() {
+        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;
+                }
+                this._previousControl = ngControl.control;
+            }
+            this.updateErrorState();
+            if (ngControl.touched != this.touched) {
+                this.touched = true;
+                this.startChangeValue();
+            }
+        }
+    }
     get id() {
         return this._id;
     }
     set id(value) {
         this._id = value;
     }
-    /**
-     * Implemented as part of MatFormFieldControl.
-     */
     get value() {
         return this._value;
     }
@@ -704,33 +750,9 @@ class XiriFieldMain {
         this.stateChanges.next();
         this._changeDetectorRef.markForCheck();
     }
-    ngDoCheck() {
-        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;
-                }
-                this._previousControl = ngControl.control;
-            }
-            this.updateErrorState();
-            if (ngControl.touched != this.touched) {
-                this.touched = true;
-                this.startChangeValue();
-            }
-        }
-    }
-    /**
-     * Implemented as part of MatFormFieldControl.
-     */
     get empty() {
         return this._value === null;
     }
-    /**
-     * Implemented as part of MatFormFieldControl.
-     */
     get disabled() {
         return this._disabled();
     }
@@ -739,16 +761,8 @@ class XiriFieldMain {
         this._changeDetectorRef.markForCheck();
         this.stateChanges.next();
     }
-    /**
-     * Implemented as part of ControlValueAccessor.
-     */
     setDisabledState(isDisabled) {
-        // this is the [disabled] field
-        // we only use form.disabled
     }
-    /**
-     * Implemented as part of MatFormFieldControl.
-     */
     get required() {
         return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
     }
@@ -756,9 +770,6 @@ class XiriFieldMain {
         this._required = value;
         this.stateChanges.next();
     }
-    /**
-     * Implemented as part of MatFormFieldControl.
-     */
     get placeholder() {
         return this._placeholder;
     }
@@ -766,33 +777,15 @@ class XiriFieldMain {
         this._placeholder = value;
         this.stateChanges.next();
     }
-    /*
-     get focused(): boolean {
-     // return this.elementRef.nativeElement.focus();
-     return false;
-     }
-     */
-    /**
-     * Implemented as part of ControlValueAccessor.
-     */
     writeValue(value) {
         this._value = value;
     }
-    /**
-     * Implemented as part of ControlValueAccessor.
-     */
     registerOnChange(fn) {
         this._onChange = fn;
     }
-    /**
-     * Implemented as part of ControlValueAccessor.
-     */
     registerOnTouched(fn) {
         this._onTouched = fn;
     }
-    /**
-     * Implemented as part of MatFormFieldControl.
-     */
     setDescribedByIds(ids) {
         if (ids.length) {
             this._elementRef.nativeElement.setAttribute('aria-describedby', ids.join(' '));
@@ -801,59 +794,44 @@ class XiriFieldMain {
             this._elementRef.nativeElement.removeAttribute('aria-describedby');
         }
     }
-    /**
-     * Implemented as part of MatFormFieldControl.
-     */
     get shouldLabelFloat() {
-        // console.log( 'shouldLabelFloat', !this.empty || this.focused );
         return !this.empty || this.focused;
     }
-    /**
-     * Implemented as part of MatFormFieldControl.
-     */
     onContainerClick() {
-        // Do not re-focus the input element if the element is already focused. Otherwise, it can happen
-        // that someone clicks on a time input and the cursor resets to the "hours" field while the
-        // "minutes" field was actually clicked. See: https://github.com/angular/components/issues/12849
         if (!this.focused) {
             this.focus();
         }
     }
-    /** Focuses the input. */
     focus(options) {
         this._elementRef.nativeElement.focus(options);
     }
-    /** An object used to control when error messages are shown. */
     get errorStateMatcher() {
         return this._errorStateTracker.matcher;
     }
     set errorStateMatcher(value) {
         this._errorStateTracker.matcher = value;
     }
-    /** Whether the input is in an error state. */
     get errorState() {
         return this._errorStateTracker.errorState;
     }
     set errorState(value) {
         this._errorStateTracker.errorState = value;
     }
-    /** Refreshes the error state */
     updateErrorState() {
         this._errorStateTracker.updateErrorState();
     }
-    /** Mark the field as touched */
     _markAsTouched() {
         this._onTouched();
         this._changeDetectorRef.markForCheck();
         this.stateChanges.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriFieldMain, deps: [{ token: i0.ElementRef }, { token: i2.NgForm, optional: true }, { token: i2.FormGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }, { token: i3.ErrorStateMatcher }, { token: i2.NgControl, optional: true, self: true }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.1", type: XiriFieldMain, isStandalone: true, selector: "ng-component", inputs: { id: "id", tabIndex: ["tabIndex", "tabIndex", (value) => (value == null ? 0 : numberAttribute(value))], value: "value", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], placeholder: "placeholder", errorStateMatcher: "errorStateMatcher", userAriaDescribedBy: ["aria-describedby", "userAriaDescribedBy"] }, outputs: { valueChange: "valueChange" }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriFieldMain, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.2", type: XiriFieldMain, isStandalone: true, selector: "ng-component", inputs: { id: "id", tabIndex: ["tabIndex", "tabIndex", (value) => (value == null ? 0 : numberAttribute(value))], value: "value", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], placeholder: "placeholder", errorStateMatcher: "errorStateMatcher", userAriaDescribedBy: ["aria-describedby", "userAriaDescribedBy"] }, outputs: { valueChange: "valueChange" }, providers: [{
                 provide: MatFormFieldControl,
                 useExisting: XiriFieldMain
             }], ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriFieldMain, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriFieldMain, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -864,15 +842,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     imports: [],
                     template: ``
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2.NgForm, decorators: [{
-                    type: Optional
-                }] }, { type: i2.FormGroupDirective, decorators: [{
-                    type: Optional
-                }] }, { type: i0.ChangeDetectorRef }, { type: i3.ErrorStateMatcher }, { type: i2.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: i1.FocusMonitor }], propDecorators: { valueChange: [{ type: i0.Output, args: ["valueChange"] }], id: [{
+        }], ctorParameters: () => [], propDecorators: { valueChange: [{ type: i0.Output, args: ["valueChange"] }], id: [{
                 type: Input
             }], tabIndex: [{
                 type: Input,
@@ -896,44 +866,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 args: ['aria-describedby']
             }] } });
 
-class XiriDateService {
-    constructor() {
-        this.currentTimezone = 'Europe/Vienna';
-        this.dateAdapter = inject(DateAdapter);
-    }
-    setTimezone(tz) {
-        this.currentTimezone = tz;
-    }
-    setLocale(localeString, locale) {
-        this.dateAdapter.setLocale(locale);
-    }
-    unixToLocal(stime) {
-        if (stime === null || stime === undefined)
-            return null;
-        return fromUnixTime(stime, { in: tz(this.currentTimezone) });
-    }
-    unixToStringDateTime(stime) {
-        return format(this.unixToLocal(stime), 'yyyy-MM-dd HH:mm');
-    }
-    unixToStringDate(stime) {
-        return format(this.unixToLocal(stime), 'd. LLL.');
-    }
-    unixToStringDateYear(stime) {
-        return format(this.unixToLocal(stime), 'd. LLL. yy');
-    }
-    dateToUnix(date) {
-        return Math.floor(transpose(date, tz(this.currentTimezone)).getTime() / 1000);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriDateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriDateService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriDateService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
 let nextUniqueIdXiriDateTimeRange = 0;
 class DateTimeRange {
     constructor(start, end) {
@@ -942,15 +874,8 @@ class DateTimeRange {
     }
 }
 class XiriDateTimeRangeComponent extends XiriFieldMain {
-    constructor(_focusMonitor, _elementRef, _parentForm, _parentFormGroup, _changeDetectorRef, _defaultErrorStateMatcher, dateService, ngControl, fb) {
-        super(_elementRef, _parentForm, _parentFormGroup, _changeDetectorRef, _defaultErrorStateMatcher, ngControl, _focusMonitor);
-        this._focusMonitor = _focusMonitor;
-        this._elementRef = _elementRef;
-        this._changeDetectorRef = _changeDetectorRef;
-        this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
-        this.dateService = dateService;
-        this.ngControl = ngControl;
-        this.fb = fb;
+    constructor() {
+        super();
         this._uid = `xiri-date-${nextUniqueIdXiriDateTimeRange++}`;
         this.minDate = null;
         this.maxDate = null;
@@ -961,6 +886,8 @@ class XiriDateTimeRangeComponent extends XiriFieldMain {
         this.minutes = ['00', '05', '10', '15',
             '20', '25', '30', '35',
             '40', '45', '50', '55',];
+        this.dateService = inject(XiriDateService);
+        this.fb = inject(FormBuilder);
         this._id = this._uid;
         if (this.ngControl != null)
             this.ngControl.valueAccessor = this;
@@ -1065,13 +992,13 @@ class XiriDateTimeRangeComponent extends XiriFieldMain {
     getInt(num) {
         return parseInt(num);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriDateTimeRangeComponent, deps: [{ token: i1.FocusMonitor }, { token: i0.ElementRef }, { token: i2.NgForm, optional: true }, { token: i2.FormGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }, { token: i3.ErrorStateMatcher }, { token: XiriDateService }, { token: i2.NgControl, optional: true, self: true }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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: "21.2.2", ngImport: i0, type: XiriDateTimeRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.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: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            }], 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriDateTimeRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriDateTimeRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-date-time-range', host: {
                         '[id]': 'id',
@@ -1092,15 +1019,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         MatDatepickerToggleIcon,
                         MatDatepicker,
                     ], 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"] }]
-        }], ctorParameters: () => [{ type: i1.FocusMonitor }, { type: i0.ElementRef }, { type: i2.NgForm, decorators: [{
-                    type: Optional
-                }] }, { type: i2.FormGroupDirective, decorators: [{
-                    type: Optional
-                }] }, { type: i0.ChangeDetectorRef }, { type: i3.ErrorStateMatcher }, { type: XiriDateService }, { type: i2.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: i2.FormBuilder }], propDecorators: { field: [{
+        }], ctorParameters: () => [], propDecorators: { field: [{
                 type: Input
             }], value: [{
                 type: Input
@@ -1114,19 +1033,14 @@ class DateRange {
     }
 }
 class XiriDateRangeComponent extends XiriFieldMain {
-    constructor(_focusMonitor, _elementRef, _parentForm, _parentFormGroup, _changeDetectorRef, _defaultErrorStateMatcher, dateService, ngControl, fb) {
-        super(_elementRef, _parentForm, _parentFormGroup, _changeDetectorRef, _defaultErrorStateMatcher, ngControl, _focusMonitor);
-        this._focusMonitor = _focusMonitor;
-        this._elementRef = _elementRef;
-        this._changeDetectorRef = _changeDetectorRef;
-        this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
-        this.dateService = dateService;
-        this.ngControl = ngControl;
-        this.fb = fb;
+    constructor() {
+        super();
         this._uid = `xiri-date-${nextUniqueIdXiriDateRange++}`;
         this.minDate = null;
         this.maxDate = null;
         this._lastValue = null;
+        this.dateService = inject(XiriDateService);
+        this.fb = inject(FormBuilder);
         this._id = this._uid;
         if (this.ngControl != null)
             this.ngControl.valueAccessor = this;
@@ -1218,13 +1132,13 @@ class XiriDateRangeComponent extends XiriFieldMain {
     writeValue(value) {
         this.value = value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriDateRangeComponent, deps: [{ token: i1.FocusMonitor }, { token: i0.ElementRef }, { token: i2.NgForm, optional: true }, { token: i2.FormGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }, { token: i3.ErrorStateMatcher }, { token: XiriDateService }, { token: i2.NgControl, optional: true, self: true }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", 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: "21.2.2", ngImport: i0, type: XiriDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", 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: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.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: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            }], 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriDateRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriDateRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-date-range', host: {
                         '[id]': 'id',
@@ -1244,15 +1158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         MatDatepickerToggleIcon,
                         MatDateRangePicker,
                     ], 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"] }]
-        }], ctorParameters: () => [{ type: i1.FocusMonitor }, { type: i0.ElementRef }, { type: i2.NgForm, decorators: [{
-                    type: Optional
-                }] }, { type: i2.FormGroupDirective, decorators: [{
-                    type: Optional
-                }] }, { type: i0.ChangeDetectorRef }, { type: i3.ErrorStateMatcher }, { type: XiriDateService }, { type: i2.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: i2.FormBuilder }], propDecorators: { field: [{
+        }], ctorParameters: () => [], propDecorators: { field: [{
                 type: Input
             }], value: [{
                 type: Input
@@ -1260,15 +1166,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 
 let nextUniqueIdXiriDate = 0;
 class XiriDateComponent extends XiriFieldMain {
-    constructor(_focusMonitor, _elementRef, _parentForm, _parentFormGroup, _changeDetectorRef, _defaultErrorStateMatcher, dateService, ngControl, fb) {
-        super(_elementRef, _parentForm, _parentFormGroup, _changeDetectorRef, _defaultErrorStateMatcher, ngControl, _focusMonitor);
-        this._focusMonitor = _focusMonitor;
-        this._elementRef = _elementRef;
-        this._changeDetectorRef = _changeDetectorRef;
-        this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
-        this.dateService = dateService;
-        this.ngControl = ngControl;
-        this.fb = fb;
+    constructor() {
+        super();
         this._uid = `xiri-date-${nextUniqueIdXiriDate++}`;
         this.minDate = null;
         this.maxDate = null;
@@ -1283,6 +1182,8 @@ class XiriDateComponent extends XiriFieldMain {
             '30', '31', '32', '33', '34', '35', '36', '37', '38', '39',
             '40', '41', '42', '43', '44', '45', '46', '47', '48', '49',
             '50', '51', '52', '53', '54', '55', '56', '57', '58', '59',];
+        this.dateService = inject(XiriDateService);
+        this.fb = inject(FormBuilder);
         this._id = this._uid;
         if (this.ngControl != null)
             this.ngControl.valueAccessor = this;
@@ -1364,13 +1265,13 @@ class XiriDateComponent extends XiriFieldMain {
     writeValue(value) {
         this.value = value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriDateComponent, deps: [{ token: i1.FocusMonitor }, { token: i0.ElementRef }, { token: i2.NgForm, optional: true }, { token: i2.FormGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }, { token: i3.ErrorStateMatcher }, { token: XiriDateService }, { token: i2.NgControl, optional: true, self: true }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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: "21.2.2", ngImport: i0, type: XiriDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.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: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            }], 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriDateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-date', host: {
                         '[id]': 'id',
@@ -1391,15 +1292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         MatDatepickerToggleIcon,
                         MatDatepicker,
                     ], 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"] }]
-        }], ctorParameters: () => [{ type: i1.FocusMonitor }, { type: i0.ElementRef }, { type: i2.NgForm, decorators: [{
-                    type: Optional
-                }] }, { type: i2.FormGroupDirective, decorators: [{
-                    type: Optional
-                }] }, { type: i0.ChangeDetectorRef }, { type: i3.ErrorStateMatcher }, { type: XiriDateService }, { type: i2.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: i2.FormBuilder }], propDecorators: { field: [{
+        }], ctorParameters: () => [], propDecorators: { field: [{
                 type: Input
             }], value: [{
                 type: Input
@@ -1447,13 +1340,14 @@ class XiriSnackbarService {
             horizontalPosition: 'center',
             verticalPosition: 'bottom',
             panelClass: [`xiri-snackbar-${type}`],
+            politeness: type === 'error' ? 'assertive' : 'polite',
         };
         return this.snackbar.open(message, action || undefined, config);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriSnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriSnackbarService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriSnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriSnackbarService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriSnackbarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriSnackbarService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1486,7 +1380,9 @@ class XiriDataService {
     postFileResponse(url, data) {
         return this.http.post(this.config.api + url, data, { observe: 'response', responseType: 'blob' });
     }
+    /** @deprecated Use postFileResponse() + XiriDownloadService.download() instead */
     postDownload(url, data) {
+        console.warn('XiriDataService.postDownload() is deprecated. Use postFileResponse() + XiriDownloadService.download() instead.');
         const downForm = document.createElement('form');
         downForm.target = '_blank';
         downForm.method = 'POST';
@@ -1502,10 +1398,10 @@ class XiriDataService {
     getConfigApi() {
         return this.config.api;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriDataService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriDataService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriDataService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriDataService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1515,17 +1411,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 class XiriSearchComponent {
     constructor() {
         this.changed = output();
-        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-        this.open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
-        this.reset = input(-1, ...(ngDevMode ? [{ debugName: "reset" }] : []));
-        this.escape = input(true, ...(ngDevMode ? [{ debugName: "escape" }] : []));
-        this.focus = input(-1, ...(ngDevMode ? [{ debugName: "focus" }] : []));
-        this._search = viewChild('search', ...(ngDevMode ? [{ debugName: "_search" }] : []));
+        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.reset = input(-1, ...(ngDevMode ? [{ debugName: "reset" }] : /* istanbul ignore next */ []));
+        this.escape = input(true, ...(ngDevMode ? [{ debugName: "escape" }] : /* istanbul ignore next */ []));
+        this.focus = input(-1, ...(ngDevMode ? [{ debugName: "focus" }] : /* istanbul ignore next */ []));
+        this._search = viewChild('search', ...(ngDevMode ? [{ debugName: "_search" }] : /* istanbul ignore next */ []));
         this.destroyRef = inject(DestroyRef);
         this.filter = new Subject();
         this._text = '';
         this.show = false;
-        this.text = input('', ...(ngDevMode ? [{ debugName: "text" }] : []));
+        this.text = input('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
         effect(() => {
             let num = this.reset();
             if (num != -1) {
@@ -1573,10 +1469,10 @@ class XiriSearchComponent {
         this._text = '';
         this.filter.next(this._text);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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}.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:4px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-search', host: {
                         '(document:keydown.escape)': 'onKeydownHandler()'
@@ -1585,24 +1481,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         CdkTrapFocus,
                         MatIconButton,
                         MatIcon,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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}.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:4px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
         }], ctorParameters: () => [], propDecorators: { changed: [{ type: i0.Output, args: ["changed"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], reset: [{ type: i0.Input, args: [{ isSignal: true, alias: "reset", required: false }] }], escape: [{ type: i0.Input, args: [{ isSignal: true, alias: "escape", required: false }] }], focus: [{ type: i0.Input, args: [{ isSignal: true, alias: "focus", required: false }] }], _search: [{ type: i0.ViewChild, args: ['search', { isSignal: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
 
 class XiriTreeselectTreeNode {
 }
 let nextUniqueIdXiriTreeselect = 0;
 class XiriTreeselectComponent extends XiriFieldMain {
-    constructor(_focusMonitor, _elementRef, _parentForm, _parentFormGroup, _changeDetectorRef, _defaultErrorStateMatcher, ngControl) {
-        super(_elementRef, _parentForm, _parentFormGroup, _changeDetectorRef, _defaultErrorStateMatcher, ngControl, _focusMonitor);
-        this._focusMonitor = _focusMonitor;
-        this._elementRef = _elementRef;
-        this._changeDetectorRef = _changeDetectorRef;
-        this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
-        this.ngControl = ngControl;
+    constructor() {
+        super();
         this.dataService = inject(XiriDataService);
         this.snackbar = inject(XiriSnackbarService);
         this._uid = `xiri-treeselect-${nextUniqueIdXiriTreeselect++}`;
-        this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
         this._input = [];
         /**
          * Tree
@@ -1803,13 +1694,13 @@ class XiriTreeselectComponent extends XiriFieldMain {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriTreeselectComponent, deps: [{ token: i1.FocusMonitor }, { token: i0.ElementRef }, { token: i2.NgForm, optional: true }, { token: i2.FormGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }, { token: i3.ErrorStateMatcher }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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: "21.2.2", ngImport: i0, type: XiriTreeselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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\"></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-top-left-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small));border-top-right-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small))}: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(--mat-sys-corner-extra-small));border-top-right-radius:var(--mat-form-field-filled-container-shape, 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            }], 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\"></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(--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(--mat-sys-corner-extra-small));border-top-right-radius:var(--mat-form-field-filled-container-shape, 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriTreeselectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriTreeselectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-treeselect', host: {
                         '[id]': 'id',
@@ -1828,16 +1719,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", 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\"></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-top-left-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small));border-top-right-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small))}: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(--mat-sys-corner-extra-small));border-top-right-radius:var(--mat-form-field-filled-container-shape, 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: () => [{ type: i1.FocusMonitor }, { type: i0.ElementRef }, { type: i2.NgForm, decorators: [{
-                    type: Optional
-                }] }, { type: i2.FormGroupDirective, decorators: [{
-                    type: Optional
-                }] }, { type: i0.ChangeDetectorRef }, { type: i3.ErrorStateMatcher }, { type: i2.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }], propDecorators: { field: [{
+                    ], 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\"></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(--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(--mat-sys-corner-extra-small));border-top-right-radius:var(--mat-form-field-filled-container-shape, 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: [{
                 type: Input
@@ -1866,14 +1749,14 @@ class XiriSelectDirective {
         // @ViewChild('multiSelect', { static: true }) multiSelect: MatSelect;
         /** Subject that emits when the component has been destroyed. */
         this._onDestroy = new Subject();
-        this.searchPredicate = input(DEFAULT_PREDICATE, { ...(ngDevMode ? { debugName: "searchPredicate" } : {}), alias: 'predicate' });
-        this.compareWith = input(DEFAULT_COMPARE, { ...(ngDevMode ? { debugName: "compareWith" } : {}), alias: 'compare' });
-        this.serverSideSearch = input(false, { ...(ngDevMode ? { debugName: "serverSideSearch" } : {}), alias: 'serverSideSearch' });
-        this.serverUrl = input('', { ...(ngDevMode ? { debugName: "serverUrl" } : {}), alias: 'serverUrl' });
-        this.serverParams = input({}, { ...(ngDevMode ? { debugName: "serverParams" } : {}), alias: 'serverParams' });
+        this.searchPredicate = input(DEFAULT_PREDICATE, { ...(ngDevMode ? { debugName: "searchPredicate" } : /* istanbul ignore next */ {}), alias: 'predicate' });
+        this.compareWith = input(DEFAULT_COMPARE, { ...(ngDevMode ? { debugName: "compareWith" } : /* istanbul ignore next */ {}), alias: 'compare' });
+        this.serverSideSearch = input(false, { ...(ngDevMode ? { debugName: "serverSideSearch" } : /* istanbul ignore next */ {}), alias: 'serverSideSearch' });
+        this.serverUrl = input('', { ...(ngDevMode ? { debugName: "serverUrl" } : /* istanbul ignore next */ {}), alias: 'serverUrl' });
+        this.serverParams = input({}, { ...(ngDevMode ? { debugName: "serverParams" } : /* istanbul ignore next */ {}), alias: 'serverParams' });
         /** list of _allValues */
         this._allValues = [];
-        this.allValues = input([], { ...(ngDevMode ? { debugName: "allValues" } : {}), alias: 'values' });
+        this.allValues = input([], { ...(ngDevMode ? { debugName: "allValues" } : /* istanbul ignore next */ {}), alias: 'values' });
         effect(() => {
             let value = this.allValues();
             if (value === undefined)
@@ -1932,10 +1815,10 @@ class XiriSelectDirective {
         // filter the _allValues
         this._filteredValuesSubject.next(this._allValues.filter(el => this.searchPredicate()(search, el)));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: XiriSelectDirective, isStandalone: true, selector: "[xiriSelect]", inputs: { searchPredicate: { classPropertyName: "searchPredicate", publicName: "predicate", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", 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 }, allValues: { classPropertyName: "allValues", publicName: "values", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["xiriSelect"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: XiriSelectDirective, isStandalone: true, selector: "[xiriSelect]", inputs: { searchPredicate: { classPropertyName: "searchPredicate", publicName: "predicate", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", 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 }, allValues: { classPropertyName: "allValues", publicName: "values", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["xiriSelect"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriSelectDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriSelectDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[xiriSelect]",
@@ -1945,11 +1828,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 
 class XiriChipsComponent {
     constructor() {
-        this.field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
-        this.chips = signal([], ...(ngDevMode ? [{ debugName: "chips" }] : []));
-        this.filteredOptions = signal([], ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
+        this.field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+        this.chips = signal([], ...(ngDevMode ? [{ debugName: "chips" }] : /* istanbul ignore next */ []));
+        this.filteredOptions = signal([], ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
         this.separatorKeyCodes = [ENTER, COMMA];
-        this.chipInput = viewChild('chipInput', ...(ngDevMode ? [{ debugName: "chipInput" }] : []));
+        this.chipInput = viewChild('chipInput', ...(ngDevMode ? [{ debugName: "chipInput" }] : /* istanbul ignore next */ []));
         this.onChange = () => { };
         this.onTouched = () => { };
     }
@@ -2012,14 +1895,14 @@ class XiriChipsComponent {
         const option = this.field().list?.find(o => o.name === chip);
         return option?.color ? 'chip-' + option.color : '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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: "21.2.2", ngImport: i0, type: XiriChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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{{ chip }}\n\t\t\t\t<button matChipRemove>\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.name\">{{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriChipsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-chips', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -2042,15 +1925,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 class XiriFormFieldsComponent {
     constructor() {
         this.formBuilder = inject(UntypedFormBuilder);
-        this._changeDetectorRef = inject(ChangeDetectorRef);
         this.destroyRef = inject(DestroyRef);
-        this.form = input(null, ...(ngDevMode ? [{ debugName: "form" }] : []));
-        this.display = input('full', ...(ngDevMode ? [{ debugName: "display" }] : []));
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.form = input(null, ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
+        this.display = input('full', ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.formChange = output();
-        this.check = input(null, ...(ngDevMode ? [{ debugName: "check" }] : []));
+        this.check = input(null, ...(ngDevMode ? [{ debugName: "check" }] : /* istanbul ignore next */ []));
         this.lastValue = null;
         this._fields = null;
+        this.collapsedSections = signal(new Set(), ...(ngDevMode ? [{ debugName: "collapsedSections" }] : /* istanbul ignore next */ []));
         this._fieldsLoaded = false;
         this._initialEmitDone = false;
         this.fields = computed(() => {
@@ -2070,7 +1953,7 @@ class XiriFormFieldsComponent {
             this.lastValue = JSON.stringify(this.formGroup.value);
             this._fieldsLoaded = true;
             return this._fields;
-        }, ...(ngDevMode ? [{ debugName: "fields" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
         this.formGroup = this.formBuilder.group({});
         effect(() => {
             const isDisabled = this.disabled();
@@ -2112,9 +1995,10 @@ class XiriFormFieldsComponent {
         });
         this.formGroup.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             if (this._fieldsLoaded) {
-                if (JSON.stringify(this.formGroup.value) === this.lastValue)
+                const currentValue = JSON.stringify(this.formGroup.value);
+                if (currentValue === this.lastValue)
                     return;
-                this.lastValue = JSON.stringify(this.formGroup.value);
+                this.lastValue = currentValue;
                 this.formChange.emit(this.formGroup);
             }
         });
@@ -2207,11 +2091,11 @@ class XiriFormFieldsComponent {
                     if (field.required === undefined)
                         field.required = true;
                     break;
-                case 'bool': // TODO
+                case 'bool':
                     if (field.name === undefined && field.placeholder)
                         field.name = field.placeholder;
                     break;
-                case 'question': // TODO
+                case 'question':
                     if (field.question)
                         field.value = field.question;
                     break;
@@ -2326,7 +2210,7 @@ class XiriFormFieldsComponent {
     validateAllFormFields() {
         this.formGroup.markAsDirty();
         this.formGroup.markAllAsTouched();
-        this._changeDetectorRef.detectChanges();
+        this.formGroup.updateValueAndValidity();
     }
     isFieldVisible(field) {
         // Check if field is inside a collapsed section
@@ -2340,8 +2224,17 @@ class XiriFormFieldsComponent {
         return conditions.every(condition => this.evaluateCondition(condition));
     }
     toggleSection(header) {
-        header.collapsed = !header.collapsed;
-        this._changeDetectorRef.detectChanges();
+        this.collapsedSections.update(set => {
+            const next = new Set(set);
+            if (next.has(header.id))
+                next.delete(header.id);
+            else
+                next.add(header.id);
+            return next;
+        });
+    }
+    isSectionCollapsed(headerId) {
+        return this.collapsedSections().has(headerId);
     }
     isInCollapsedSection(field) {
         const fields = this._fields;
@@ -2354,7 +2247,7 @@ class XiriFormFieldsComponent {
         for (let i = idx - 1; i >= 0; i--) {
             const f = fields[i];
             if (f.type === 'header') {
-                return f.collapsible && f.collapsed;
+                return f.collapsible && this.collapsedSections().has(f.id);
             }
             if (f.type === 'divider') {
                 return false; // Divider breaks the section
@@ -2386,12 +2279,34 @@ class XiriFormFieldsComponent {
                 return true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriFormFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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 fields(); 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\"\n\t\t\t\t\t       [placeholder]=\"field.name\"\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 (validation of field.validations; track validation) {\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(validation.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ validation.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       [placeholder]=\"field.name || ''\"\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) {\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       [placeholder]=\"field.name\"\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 (validation of field.validations; track validation) {\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(validation.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ validation.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) {\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\" [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) {\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) {\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) {\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) {\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) {\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) {\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\" [placeholder]=\"field.name\" [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 (validation of field.validations; track validation) {\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(validation.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ validation.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]=\"!field.collapsed\"\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]=\"field.collapsed\">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]=\"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\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:9.5rem}.dynamic-form .date.datetime{min-width:14.5rem}.dynamic-form .daterange{align-self:start;min-width:14.5rem}.dynamic-form .datetimerange{align-self:start;min-width:18.5rem}.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 .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:4px;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 .2s ease}.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(--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(--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 .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: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.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: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.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$1.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: 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: 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriFormFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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: "<ng-template #validationErrors let-field=\"field\">\n\t@for (vali of field.validations; track vali) {\n\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t}\n\t\t</ng-container>\n\t}\n</ng-template>\n\n<ng-template #validationErrorsTouched let-field=\"field\">\n\t@for (vali of field.validations; track vali) {\n\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t@if (formGroup.get(field.id)?.touched && formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t}\n\t\t</ng-container>\n\t}\n</ng-template>\n\n<ng-template #fieldHints let-field=\"field\">\n\t@if (field.hint) {\n\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t}\n\t@if (field.max) {\n\t\t<mat-hint align=\"end\">{{ formGroup.get(field.id)?.value?.length || 0 }} / {{ field.max }}</mat-hint>\n\t}\n</ng-template>\n\n<form class=\"xrow dynamic-form\" [formGroup]=\"formGroup\" [class]=\"display()\">\n\t@for (field of fields(); track field.id) {\n\t\t@if (isFieldVisible(field)) {\n\t\t<div @showWhenField>\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\"\n\t\t\t\t\t       [placeholder]=\"field.name\"\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<ng-container *ngTemplateOutlet=\"fieldHints; context: { field }\"></ng-container>\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"validationErrors; context: { field }\"></ng-container>\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       [placeholder]=\"field.name || ''\"\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<ng-container *ngTemplateOutlet=\"validationErrors; context: { field }\"></ng-container>\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       [placeholder]=\"field.name\"\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<ng-container *ngTemplateOutlet=\"fieldHints; context: { field }\"></ng-container>\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"validationErrors; context: { field }\"></ng-container>\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<ng-container *ngTemplateOutlet=\"validationErrors; context: { field }\"></ng-container>\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<ng-container *ngTemplateOutlet=\"fieldHints; context: { field }\"></ng-container>\n\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"validationErrorsTouched; context: { field }\"></ng-container>\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<ng-container *ngTemplateOutlet=\"validationErrors; context: { field }\"></ng-container>\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<ng-container *ngTemplateOutlet=\"validationErrors; context: { field }\"></ng-container>\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<ng-container *ngTemplateOutlet=\"validationErrors; context: { field }\"></ng-container>\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<ng-container *ngTemplateOutlet=\"validationErrors; context: { field }\"></ng-container>\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<ng-container *ngTemplateOutlet=\"validationErrors; context: { field }\"></ng-container>\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\" [placeholder]=\"field.name\" [required]=\"field.required\" [rows]=\"field.rows || 5\"></textarea>\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"fieldHints; context: { field }\"></ng-container>\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"validationErrors; context: { field }\"></ng-container>\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]=\"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</div>\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:9.5rem}.dynamic-form .date.datetime{min-width:14.5rem}.dynamic-form .daterange{align-self:start;min-width:14.5rem}.dynamic-form .datetimerange{align-self:start;min-width:18.5rem}.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 .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(--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(--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 .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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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: 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: 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }], animations: [
+            trigger('showWhenField', [
+                transition(':enter', [
+                    style({ opacity: 0, height: 0 }),
+                    animate('200ms ease-out', style({ opacity: 1, height: '*' }))
+                ]),
+                transition(':leave', [
+                    style({ overflow: 'hidden' }),
+                    animate('150ms ease-in', style({ opacity: 0, height: 0 }))
+                ])
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriFormFieldsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriFormFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'xiri-form-fields', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'xiri-form-fields', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        trigger('showWhenField', [
+                            transition(':enter', [
+                                style({ opacity: 0, height: 0 }),
+                                animate('200ms ease-out', style({ opacity: 1, height: '*' }))
+                            ]),
+                            transition(':leave', [
+                                style({ overflow: 'hidden' }),
+                                animate('150ms ease-in', style({ opacity: 0, height: 0 }))
+                            ])
+                        ])
+                    ], imports: [
                         FormsModule,
                         ReactiveFormsModule,
                         MatFormField,
@@ -2419,7 +2334,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         AsyncPipe,
                         SafehtmlPipe,
                         XiriChipsComponent,
-                    ], template: "<form class=\"xrow dynamic-form\" [formGroup]=\"formGroup\" [class]=\"display()\">\n\t@for (field of fields(); 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\"\n\t\t\t\t\t       [placeholder]=\"field.name\"\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 (validation of field.validations; track validation) {\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(validation.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ validation.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       [placeholder]=\"field.name || ''\"\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) {\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       [placeholder]=\"field.name\"\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 (validation of field.validations; track validation) {\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(validation.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ validation.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) {\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\" [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) {\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) {\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) {\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) {\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) {\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) {\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\" [placeholder]=\"field.name\" [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 (validation of field.validations; track validation) {\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(validation.id)) {\n\t\t\t\t\t\t\t\t<mat-error>{{ validation.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]=\"!field.collapsed\"\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]=\"field.collapsed\">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]=\"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\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:9.5rem}.dynamic-form .date.datetime{min-width:14.5rem}.dynamic-form .daterange{align-self:start;min-width:14.5rem}.dynamic-form .datetimerange{align-self:start;min-width:18.5rem}.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 .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:4px;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 .2s ease}.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(--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(--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 .form-field-button{margin-left:12px;margin-right:12px}.mat-mdc-select-panel.selectPanel{max-height:max(50vh,256px)}[hidden]{display:none!important}\n"] }]
+                        NgTemplateOutlet,
+                    ], template: "<ng-template #validationErrors let-field=\"field\">\n\t@for (vali of field.validations; track vali) {\n\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t@if (formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t}\n\t\t</ng-container>\n\t}\n</ng-template>\n\n<ng-template #validationErrorsTouched let-field=\"field\">\n\t@for (vali of field.validations; track vali) {\n\t\t<ng-container ngProjectAs=\"mat-error\">\n\t\t\t@if (formGroup.get(field.id)?.touched && formGroup.get(field.id)?.hasError(vali.id)) {\n\t\t\t\t<mat-error>{{ vali.message }}</mat-error>\n\t\t\t}\n\t\t</ng-container>\n\t}\n</ng-template>\n\n<ng-template #fieldHints let-field=\"field\">\n\t@if (field.hint) {\n\t\t<mat-hint>{{ field.hint }}</mat-hint>\n\t}\n\t@if (field.max) {\n\t\t<mat-hint align=\"end\">{{ formGroup.get(field.id)?.value?.length || 0 }} / {{ field.max }}</mat-hint>\n\t}\n</ng-template>\n\n<form class=\"xrow dynamic-form\" [formGroup]=\"formGroup\" [class]=\"display()\">\n\t@for (field of fields(); track field.id) {\n\t\t@if (isFieldVisible(field)) {\n\t\t<div @showWhenField>\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\"\n\t\t\t\t\t       [placeholder]=\"field.name\"\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<ng-container *ngTemplateOutlet=\"fieldHints; context: { field }\"></ng-container>\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"validationErrors; context: { field }\"></ng-container>\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       [placeholder]=\"field.name || ''\"\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<ng-container *ngTemplateOutlet=\"validationErrors; context: { field }\"></ng-container>\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       [placeholder]=\"field.name\"\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<ng-container *ngTemplateOutlet=\"fieldHints; context: { field }\"></ng-container>\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"validationErrors; context: { field }\"></ng-container>\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<ng-container *ngTemplateOutlet=\"validationErrors; context: { field }\"></ng-container>\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<ng-container *ngTemplateOutlet=\"fieldHints; context: { field }\"></ng-container>\n\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"validationErrorsTouched; context: { field }\"></ng-container>\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<ng-container *ngTemplateOutlet=\"validationErrors; context: { field }\"></ng-container>\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<ng-container *ngTemplateOutlet=\"validationErrors; context: { field }\"></ng-container>\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<ng-container *ngTemplateOutlet=\"validationErrors; context: { field }\"></ng-container>\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<ng-container *ngTemplateOutlet=\"validationErrors; context: { field }\"></ng-container>\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<ng-container *ngTemplateOutlet=\"validationErrors; context: { field }\"></ng-container>\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\" [placeholder]=\"field.name\" [required]=\"field.required\" [rows]=\"field.rows || 5\"></textarea>\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"fieldHints; context: { field }\"></ng-container>\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"validationErrors; context: { field }\"></ng-container>\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]=\"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</div>\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:9.5rem}.dynamic-form .date.datetime{min-width:14.5rem}.dynamic-form .daterange{align-self:start;min-width:14.5rem}.dynamic-form .datetimerange{align-self:start;min-width:18.5rem}.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 .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(--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(--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 .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 }] }] } });
 function validatorDateRangeStart(min) {
     return (control) => {
@@ -2461,7 +2377,7 @@ function validatorArrayMax(max) {
 
 class XiriRawTableComponent {
     constructor() {
-        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
         this.displayedColumns = [];
         this.columnsToDisplay = [];
         this.dataSource = new MatTableDataSource();
@@ -2490,10 +2406,10 @@ class XiriRawTableComponent {
             this.columnsToDisplay.push(column.name);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriRawTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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@if (column.header) {\n\t\t\t\t\t<th mat-header-cell *matHeaderCellDef [class]=\"column.display\"> {{ column.header }}</th>\n\t\t\t\t}\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 (column.icons[ row[ column.id ] ]) {\n\t\t\t\t\t\t\t\t<mat-icon [class]=\"column.icons[ row[ column.id ] ][ 'color' ] || 'primary'\"\n\t\t\t\t\t\t\t\t          [matTooltip]=\"column.icons[ row[ column.id ] ][ 'hint' ]\"\n\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!column.icons[ row[ column.id ] ][ 'hint' ]\">{{ column.icons[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]=\"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 (row[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t<a [routerLink]=\"row[column.id + 'Link']\" class=\"tablelink\">{{ row[column.id] }}</a>\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t<span>{{ 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>{{ row[column.id][0] }}</div>\n\t\t\t\t\t\t\t<div>{{ 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 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 (row[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t<a [routerLink]=\"row[column.id + 'Link']\">\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 (row['icon']) {\n\t\t\t\t\t\t\t\t\t\t\t@if (row['iconSet']) {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"row['iconColor'] || 'primary'\" [fontSet]=\"row['iconSet']\">{{ 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]=\"row['iconColor'] || 'primary'\">{{ 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]=\"row['icon']\">{{ 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 }}{{ 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 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\">{{ 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<tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\"></tr>\n\t</table>\n</div>", styles: [".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.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.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", "routerLink"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriRawTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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@if (column.header) {\n\t\t\t\t\t<th mat-header-cell *matHeaderCellDef [class]=\"column.display\"> {{ column.header }}</th>\n\t\t\t\t}\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 (column.icons[ row[ column.id ] ]) {\n\t\t\t\t\t\t\t\t<mat-icon [class]=\"column.icons[ row[ column.id ] ][ 'color' ] || 'primary'\"\n\t\t\t\t\t\t\t\t          [matTooltip]=\"column.icons[ row[ column.id ] ][ 'hint' ]\"\n\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!column.icons[ row[ column.id ] ][ 'hint' ]\">{{ column.icons[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]=\"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 (row[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t<a [routerLink]=\"row[column.id + 'Link']\" class=\"tablelink\">{{ row[column.id] }}</a>\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t<span>{{ 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>{{ row[column.id][0] }}</div>\n\t\t\t\t\t\t\t<div>{{ 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 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 (row[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t<a [routerLink]=\"row[column.id + 'Link']\">\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 (row['icon']) {\n\t\t\t\t\t\t\t\t\t\t\t@if (row['iconSet']) {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"row['iconColor'] || 'primary'\" [fontSet]=\"row['iconSet']\">{{ 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]=\"row['iconColor'] || 'primary'\">{{ 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]=\"row['icon']\">{{ 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 }}{{ 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 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\">{{ 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<tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\"></tr>\n\t</table>\n</div>", styles: [".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.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.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", "routerLink"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriRawTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriRawTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-raw-table', imports: [MatTable,
                         MatColumnDef,
@@ -2511,14 +2427,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 
 class XiriButtonstyleComponent {
     constructor() {
-        this.button = input.required(...(ngDevMode ? [{ debugName: "button" }] : []));
-        this.disabled = input.required(...(ngDevMode ? [{ debugName: "disabled" }] : []));
-        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.button = input.required(...(ngDevMode ? [{ debugName: "button" }] : /* istanbul ignore next */ []));
+        this.disabled = input.required(...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriButtonstyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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 } }, ngImport: i0, template: "@switch (button().type) {\n\t@case ('icon') {\n\t\t<button mat-icon-button [matTooltip]=\"button().hint\" [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\" [disabled]=\"disabled() || loading()\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t\t}\n\t\t</button>\n\t}\n\t@case ('icontext') {\n\t\t<button mat-fab extended=\"true\"\n\t\t        class=\"icontext\"\n\t\t        [matTooltip]=\"button().hint\"\n\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\"\n\t\t        [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t\t}\n\t\t\t{{ button().text }}\n\t\t</button>\n\t}\n\t@case ('raised') {\n\t\t<button mat-raised-button\n\t\t        [matTooltip]=\"button().hint\"\n\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\"\n\t\t        [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t{{ button().text }}\n\t\t\t}\n\t\t</button>\n\t}\n\t@case ('basic') {\n\t\t<button mat-button\n\t\t        [matTooltip]=\"button().hint\"\n\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\"\n\t\t        [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t{{ button().text }}\n\t\t\t}\n\t\t</button>\n\t}\n\t@case ('stroked') {\n\t\t<button mat-stroked-button\n\t\t        [matTooltip]=\"button().hint\"\n\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\"\n\t\t        [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t{{ button().text }}\n\t\t\t}\n\t\t</button>\n\t}\n\t@case ('flat') {\n\t\t<button mat-flat-button\n\t\t        [matTooltip]=\"button().hint\"\n\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\"\n\t\t        [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t{{ button().text }}\n\t\t\t}\n\t\t</button>\n\t}\n\t@case ('minifab') {\n\t\t<button mat-mini-fab [matTooltip]=\"button().hint\" [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\" [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t\t}\n\t\t</button>\n\t}\n\t@case ('fab') {\n\t\t<button mat-fab [matTooltip]=\"button().hint\" [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\" [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"24\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t\t}\n\t\t</button>\n\t}\n\t@default {\n\t\t@if (button().icon) {\n\t\t\t<button mat-icon-button [matTooltip]=\"button().hint\" [matTooltipDisabled]=\"!button().hint\"\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@if (button().text) {\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@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{{ button().text }}\n\t\t\t\t}\n\t\t\t</button>\n\t\t}\n\t}\n}\n", styles: ["mat-spinner{display:inline-block}mat-spinner ::ng-deep svg circle{stroke:currentColor}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriButtonstyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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 } }, ngImport: i0, template: "@switch (button().type) {\n\t@case ('icon') {\n\t\t<button mat-icon-button [matTooltip]=\"button().hint\" [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\" [disabled]=\"disabled() || loading()\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t\t}\n\t\t</button>\n\t}\n\t@case ('icontext') {\n\t\t<button mat-fab extended=\"true\"\n\t\t        class=\"icontext\"\n\t\t        [matTooltip]=\"button().hint\"\n\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\"\n\t\t        [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t\t}\n\t\t\t{{ button().text }}\n\t\t</button>\n\t}\n\t@case ('raised') {\n\t\t<button mat-raised-button\n\t\t        [matTooltip]=\"button().hint\"\n\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\"\n\t\t        [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t{{ button().text }}\n\t\t\t}\n\t\t</button>\n\t}\n\t@case ('basic') {\n\t\t<button mat-button\n\t\t        [matTooltip]=\"button().hint\"\n\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\"\n\t\t        [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t{{ button().text }}\n\t\t\t}\n\t\t</button>\n\t}\n\t@case ('stroked') {\n\t\t<button mat-stroked-button\n\t\t        [matTooltip]=\"button().hint\"\n\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\"\n\t\t        [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t{{ button().text }}\n\t\t\t}\n\t\t</button>\n\t}\n\t@case ('flat') {\n\t\t<button mat-flat-button\n\t\t        [matTooltip]=\"button().hint\"\n\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\"\n\t\t        [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t{{ button().text }}\n\t\t\t}\n\t\t</button>\n\t}\n\t@case ('minifab') {\n\t\t<button mat-mini-fab [matTooltip]=\"button().hint\" [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\" [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t\t}\n\t\t</button>\n\t}\n\t@case ('fab') {\n\t\t<button mat-fab [matTooltip]=\"button().hint\" [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\" [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"24\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t\t}\n\t\t</button>\n\t}\n\t@default {\n\t\t@if (button().icon) {\n\t\t\t<button mat-icon-button [matTooltip]=\"button().hint\" [matTooltipDisabled]=\"!button().hint\"\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@if (button().text) {\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@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{{ button().text }}\n\t\t\t\t}\n\t\t\t</button>\n\t\t}\n\t}\n}\n", styles: ["mat-spinner{display:inline-block;--mat-progress-spinner-active-indicator-color: currentColor}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriButtonstyleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriButtonstyleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-buttonstyle', imports: [
                         MatButton,
@@ -2528,28 +2444,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         MatMiniFabButton,
                         MatTooltip,
                         MatProgressSpinner
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (button().type) {\n\t@case ('icon') {\n\t\t<button mat-icon-button [matTooltip]=\"button().hint\" [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\" [disabled]=\"disabled() || loading()\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t\t}\n\t\t</button>\n\t}\n\t@case ('icontext') {\n\t\t<button mat-fab extended=\"true\"\n\t\t        class=\"icontext\"\n\t\t        [matTooltip]=\"button().hint\"\n\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\"\n\t\t        [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t\t}\n\t\t\t{{ button().text }}\n\t\t</button>\n\t}\n\t@case ('raised') {\n\t\t<button mat-raised-button\n\t\t        [matTooltip]=\"button().hint\"\n\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\"\n\t\t        [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t{{ button().text }}\n\t\t\t}\n\t\t</button>\n\t}\n\t@case ('basic') {\n\t\t<button mat-button\n\t\t        [matTooltip]=\"button().hint\"\n\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\"\n\t\t        [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t{{ button().text }}\n\t\t\t}\n\t\t</button>\n\t}\n\t@case ('stroked') {\n\t\t<button mat-stroked-button\n\t\t        [matTooltip]=\"button().hint\"\n\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\"\n\t\t        [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t{{ button().text }}\n\t\t\t}\n\t\t</button>\n\t}\n\t@case ('flat') {\n\t\t<button mat-flat-button\n\t\t        [matTooltip]=\"button().hint\"\n\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\"\n\t\t        [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t{{ button().text }}\n\t\t\t}\n\t\t</button>\n\t}\n\t@case ('minifab') {\n\t\t<button mat-mini-fab [matTooltip]=\"button().hint\" [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\" [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t\t}\n\t\t</button>\n\t}\n\t@case ('fab') {\n\t\t<button mat-fab [matTooltip]=\"button().hint\" [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\" [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"24\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t\t}\n\t\t</button>\n\t}\n\t@default {\n\t\t@if (button().icon) {\n\t\t\t<button mat-icon-button [matTooltip]=\"button().hint\" [matTooltipDisabled]=\"!button().hint\"\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@if (button().text) {\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@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{{ button().text }}\n\t\t\t\t}\n\t\t\t</button>\n\t\t}\n\t}\n}\n", styles: ["mat-spinner{display:inline-block}mat-spinner ::ng-deep svg circle{stroke:currentColor}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (button().type) {\n\t@case ('icon') {\n\t\t<button mat-icon-button [matTooltip]=\"button().hint\" [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\" [disabled]=\"disabled() || loading()\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t\t}\n\t\t</button>\n\t}\n\t@case ('icontext') {\n\t\t<button mat-fab extended=\"true\"\n\t\t        class=\"icontext\"\n\t\t        [matTooltip]=\"button().hint\"\n\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\"\n\t\t        [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t\t}\n\t\t\t{{ button().text }}\n\t\t</button>\n\t}\n\t@case ('raised') {\n\t\t<button mat-raised-button\n\t\t        [matTooltip]=\"button().hint\"\n\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\"\n\t\t        [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t{{ button().text }}\n\t\t\t}\n\t\t</button>\n\t}\n\t@case ('basic') {\n\t\t<button mat-button\n\t\t        [matTooltip]=\"button().hint\"\n\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\"\n\t\t        [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t{{ button().text }}\n\t\t\t}\n\t\t</button>\n\t}\n\t@case ('stroked') {\n\t\t<button mat-stroked-button\n\t\t        [matTooltip]=\"button().hint\"\n\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\"\n\t\t        [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t{{ button().text }}\n\t\t\t}\n\t\t</button>\n\t}\n\t@case ('flat') {\n\t\t<button mat-flat-button\n\t\t        [matTooltip]=\"button().hint\"\n\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\"\n\t\t        [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t{{ button().text }}\n\t\t\t}\n\t\t</button>\n\t}\n\t@case ('minifab') {\n\t\t<button mat-mini-fab [matTooltip]=\"button().hint\" [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\" [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t\t}\n\t\t</button>\n\t}\n\t@case ('fab') {\n\t\t<button mat-fab [matTooltip]=\"button().hint\" [matTooltipDisabled]=\"!button().hint\"\n\t\t        [color]=\"button().color || 'primary'\" [disabled]=\"disabled() || loading()\"\n\t\t        [tabIndex]=\"button().tabIndex\">\n\t\t\t@if (loading()) {\n\t\t\t\t<mat-spinner diameter=\"24\"></mat-spinner>\n\t\t\t} @else {\n\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t\t}\n\t\t</button>\n\t}\n\t@default {\n\t\t@if (button().icon) {\n\t\t\t<button mat-icon-button [matTooltip]=\"button().hint\" [matTooltipDisabled]=\"!button().hint\"\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@if (button().text) {\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@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{{ button().text }}\n\t\t\t\t}\n\t\t\t</button>\n\t\t}\n\t}\n}\n", styles: ["mat-spinner{display:inline-block;--mat-progress-spinner-active-indicator-color: currentColor}\n"] }]
         }], 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 }] }] } });
 
 class XiriDoneComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriDoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: XiriDoneComponent, isStandalone: true, selector: "xiri-done", ngImport: i0, template: "<mat-icon>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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriDoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriDoneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriDoneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'xiri-done', imports: [MatIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-icon>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"] }]
+            args: [{ selector: 'xiri-done', imports: [MatIcon], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
         }] });
 
 class XiriErrorComponent {
     constructor() {
-        this.text = input.required(...(ngDevMode ? [{ debugName: "text" }] : []));
+        this.text = input.required(...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", 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:1rem;margin:1rem 0;border:1px solid transparent;border-radius:5px;background-color:var(--error-container, #FFDAD6);color:var(--on-error-container, #410002);animation:fadeInUp .25s ease-out}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.2", 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriErrorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriErrorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'xiri-error', changeDetection: ChangeDetectionStrategy.OnPush, 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:1rem;margin:1rem 0;border:1px solid transparent;border-radius:5px;background-color:var(--error-container, #FFDAD6);color:var(--on-error-container, #410002);animation:fadeInUp .25s ease-out}\n"] }]
+            args: [{ selector: 'xiri-error', changeDetection: ChangeDetectionStrategy.OnPush, 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 }] }] } });
 
 class XiriDownloadService {
@@ -2576,16 +2492,28 @@ class XiriDownloadService {
         setTimeout(() => a.click(), 0);
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriDownloadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriDownloadService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriDownloadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriDownloadService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriDownloadService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriDownloadService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
+function parseHttpError(err) {
+    if (err.status === 400 || err.status === 424)
+        return err.error?.error || 'Format Error';
+    if (err.status === 403)
+        return err.error?.error || 'Access denied';
+    if (err.status === 404)
+        return 'Not found';
+    if (err.status === 0)
+        return 'Connection error';
+    return 'Unknown error';
+}
+
 class XiriDialogComponent {
     constructor() {
         this.dialogRef = inject(MatDialogRef);
@@ -2594,19 +2522,19 @@ class XiriDialogComponent {
         this.dataService = inject(XiriDataService);
         this.router = inject(Router);
         this.snackbar = inject(XiriSnackbarService);
-        this.type = signal('form', ...(ngDevMode ? [{ debugName: "type" }] : []));
-        this.header = signal('', ...(ngDevMode ? [{ debugName: "header" }] : []));
-        this.buttons = signal([], ...(ngDevMode ? [{ debugName: "buttons" }] : []));
+        this.type = signal('form', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        this.header = signal('', ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+        this.buttons = signal([], ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
         this.url = '';
         this.extra = {};
         this.destroyRef = inject(DestroyRef);
         this.downloadService = inject(XiriDownloadService);
-        this.formFields = signal(null, ...(ngDevMode ? [{ debugName: "formFields" }] : []));
-        this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-        this.done = signal(false, ...(ngDevMode ? [{ debugName: "done" }] : []));
-        this.error = signal('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+        this.formFields = signal(null, ...(ngDevMode ? [{ debugName: "formFields" }] : /* istanbul ignore next */ []));
+        this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.done = signal(false, ...(ngDevMode ? [{ debugName: "done" }] : /* istanbul ignore next */ []));
+        this.error = signal('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
         this.formValues = null;
-        this.formValid = signal(false, ...(ngDevMode ? [{ debugName: "formValid" }] : []));
+        this.formValid = signal(false, ...(ngDevMode ? [{ debugName: "formValid" }] : /* istanbul ignore next */ []));
         this.checkSubject = new Subject();
         this.to = null;
         this.refreshTime = 2000;
@@ -2651,15 +2579,7 @@ class XiriDialogComponent {
     }
     showError(err) {
         this.loading.set(false);
-        if (err.status == 400 || err.status == 424) {
-            this.error.set(err.error.error || 'Format Error');
-        }
-        else {
-            if (err.status == 403)
-                this.error.set('Access denied');
-            else
-                this.error.set('Unknown error');
-        }
+        this.error.set(parseHttpError(err));
         // this.header = 'Error';
         if (this.buttons().length == 0) {
             this.buttons.set([{
@@ -2736,11 +2656,17 @@ class XiriDialogComponent {
             this.dataService.get(this.url).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
                 next: (res) => {
                     if (res.done) {
-                        // this.formData.done = true;
-                        // this.formData.text = res.blocked;
-                        this.url = res.url;
-                        this.extra = res;
-                        this.download(null);
+                        if (res.error) {
+                            this.dialogRef.disableClose = false;
+                            this.error.set(res.error);
+                            this.formFields.set(null);
+                            this.snackbar.error(res.error);
+                        }
+                        else {
+                            this.url = res.url;
+                            this.extra = res;
+                            this.download(null);
+                        }
                     }
                     else
                         this.refresh();
@@ -2843,10 +2769,10 @@ class XiriDialogComponent {
         if (this.to)
             clearTimeout(this.to);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: XiriDialogComponent, isStandalone: true, selector: "xiri-dialog", ngImport: i0, template: "<div class=\"dialog\">\n\t<h1 mat-dialog-title>{{ header() }}</h1>\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 (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 (!loading() && !done()) {\n\t\t<mat-divider></mat-divider>\n\t\t<mat-dialog-actions [class.one]=\"buttons().length==1\">\n\t\t\t@for (button of buttons(); track $index) {\n\t\t\t\t<xiri-buttonstyle [button]=\"button\" (click)=\"clickButton( button )\" [disabled]=\"button.default && !formValid()\"></xiri-buttonstyle>\n\t\t\t}\n\t\t</mat-dialog-actions>\n\t}\n</div>", styles: ["mat-spinner{margin:1rem}.dynamic-form{margin-bottom:1rem}.dynamic-form .field{width:100%;margin-top:.5rem}.question,.waiting{display:flex}.question .left,.waiting .left{font-size:var(--xiri-font-size-display);padding-right:1rem}.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:1rem;margin-bottom:1rem}mat-dialog-actions{justify-content:space-between;padding-left:24px;padding-right:24px}mat-dialog-actions.one{justify-content:end}mat-dialog-content{min-height:4rem}.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: "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: XiriDialogComponent, isStandalone: true, selector: "xiri-dialog", ngImport: i0, template: "<div class=\"dialog\">\n\t<h1 mat-dialog-title>{{ header() }}</h1>\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 (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 (!loading() && !done()) {\n\t\t<mat-divider></mat-divider>\n\t\t<mat-dialog-actions [class.one]=\"buttons().length==1\">\n\t\t\t@for (button of buttons(); track $index) {\n\t\t\t\t<xiri-buttonstyle [button]=\"button\" (click)=\"clickButton( button )\" [disabled]=\"button.default && !formValid()\"></xiri-buttonstyle>\n\t\t\t}\n\t\t</mat-dialog-actions>\n\t}\n</div>", styles: ["mat-spinner{margin:var(--xiri-spacing-md)}.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-content{min-height:4rem}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: "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDialogTitle,
                         MatDialogContent,
@@ -2857,26 +2783,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         XiriDoneComponent,
                         MatDivider,
                         MatDialogActions,
-                        XiriButtonstyleComponent], template: "<div class=\"dialog\">\n\t<h1 mat-dialog-title>{{ header() }}</h1>\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 (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 (!loading() && !done()) {\n\t\t<mat-divider></mat-divider>\n\t\t<mat-dialog-actions [class.one]=\"buttons().length==1\">\n\t\t\t@for (button of buttons(); track $index) {\n\t\t\t\t<xiri-buttonstyle [button]=\"button\" (click)=\"clickButton( button )\" [disabled]=\"button.default && !formValid()\"></xiri-buttonstyle>\n\t\t\t}\n\t\t</mat-dialog-actions>\n\t}\n</div>", styles: ["mat-spinner{margin:1rem}.dynamic-form{margin-bottom:1rem}.dynamic-form .field{width:100%;margin-top:.5rem}.question,.waiting{display:flex}.question .left,.waiting .left{font-size:var(--xiri-font-size-display);padding-right:1rem}.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:1rem;margin-bottom:1rem}mat-dialog-actions{justify-content:space-between;padding-left:24px;padding-right:24px}mat-dialog-actions.one{justify-content:end}mat-dialog-content{min-height:4rem}.done{text-align:center;font-size:var(--xiri-font-size-display)}[hidden]{display:none!important}\n"] }]
+                        XiriButtonstyleComponent], template: "<div class=\"dialog\">\n\t<h1 mat-dialog-title>{{ header() }}</h1>\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 (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 (!loading() && !done()) {\n\t\t<mat-divider></mat-divider>\n\t\t<mat-dialog-actions [class.one]=\"buttons().length==1\">\n\t\t\t@for (button of buttons(); track $index) {\n\t\t\t\t<xiri-buttonstyle [button]=\"button\" (click)=\"clickButton( button )\" [disabled]=\"button.default && !formValid()\"></xiri-buttonstyle>\n\t\t\t}\n\t\t</mat-dialog-actions>\n\t}\n</div>", styles: ["mat-spinner{margin:var(--xiri-spacing-md)}.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-content{min-height:4rem}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"] }]
         }], ctorParameters: () => [] });
 
+class XiriResponseHandlerService {
+    constructor() {
+        this.router = inject(Router);
+    }
+    handle(result, callbacks) {
+        if (!result)
+            return;
+        if (result.page == 'refresh' || result.refresh == 'page')
+            this.router.navigate([this.router.url]).then();
+        else if (result.table == 'refresh' || result.refresh == 'table')
+            callbacks?.onTableRefresh?.() ?? this.router.navigate([this.router.url]).then();
+        else if (result.goto)
+            this.router.navigate([result.goto]).then();
+        else if (result.table == 'update' || result.update == 'table')
+            callbacks?.onTableUpdate?.(result.id, result.field, result.content);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriResponseHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriResponseHandlerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriResponseHandlerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 class XiriButtonComponent {
     constructor() {
-        this.button = input.required(...(ngDevMode ? [{ debugName: "button" }] : []));
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-        this.filterData = input(undefined, ...(ngDevMode ? [{ debugName: "filterData" }] : []));
-        this.url = input(undefined, ...(ngDevMode ? [{ debugName: "url" }] : []));
+        this.button = input.required(...(ngDevMode ? [{ debugName: "button" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.filterData = input(undefined, ...(ngDevMode ? [{ debugName: "filterData" }] : /* istanbul ignore next */ []));
+        this.url = input(undefined, ...(ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []));
         // 		if ( JSON.stringify( this._filterData ) === JSON.stringify( values ) )
         // 			return;
         this.result = output();
         this.dialogRef = undefined;
         this.destroyRef = inject(DestroyRef);
-        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
         this.dataService = inject(XiriDataService);
         this.location = inject(Location);
-        this.router = inject(Router);
         this.dialog = inject(MatDialog);
         this.downloadService = inject(XiriDownloadService);
+        this.responseHandler = inject(XiriResponseHandlerService);
         this._disabled = computed(() => {
             if (this.filterData() === null)
                 return true;
@@ -2885,12 +2837,12 @@ class XiriButtonComponent {
             else if (this.loading())
                 return true;
             return this.disabled();
-        }, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
         this._url = computed(() => {
             if (this.url())
                 return this.url();
             return this.button().url;
-        }, ...(ngDevMode ? [{ debugName: "_url" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "_url" }] : /* istanbul ignore next */ []));
     }
     clicked(event) {
         event.stopPropagation();
@@ -2955,14 +2907,7 @@ class XiriButtonComponent {
             data: data,
         });
         this.dialogRef.afterClosed().pipe(takeUntilDestroyed(this.destroyRef)).subscribe(result => {
-            if (result) {
-                if (result.page == 'refresh' || result.refresh == 'page')
-                    this.router.navigate([this.router.url]).then();
-                else if (result.table == 'refresh' || result.refresh == 'table')
-                    this.router.navigate([this.router.url]).then();
-                else if (result.goto)
-                    this.router.navigate([result.goto]).then();
-            }
+            this.responseHandler.handle(result);
             this.loading.set(false);
             this.result.emit({
                 button: this.button(),
@@ -2991,12 +2936,7 @@ class XiriButtonComponent {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
             next: (result) => {
-                if (result) {
-                    if (result.page == 'refresh' || result.refresh == 'page')
-                        this.router.navigate([this.router.url]).then();
-                    else if (result.goto)
-                        this.router.navigate([result.goto]).then();
-                }
+                this.responseHandler.handle(result);
                 this.result.emit({
                     button: this.button(),
                     result: result,
@@ -3056,10 +2996,10 @@ class XiriButtonComponent {
             this.dialogRef.close(null);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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: "@switch (button().action) {\n\t@case ('link') {\n\t\t<a [routerLink]=\"_url()\" [href]=\"_url()\" (click)=\"clicked($event)\">\n\t\t\t<xiri-buttonstyle [button]=\"button()\" [disabled]=\"_disabled()\" [loading]=\"loading()\"></xiri-buttonstyle>\n\t\t</a>\n\t}\n\t@case ('href') {\n\t\t<a [href]=\"_url()\" [target]=\"button().target\" (click)=\"clicked($event)\">\n\t\t\t<xiri-buttonstyle [button]=\"button()\" [disabled]=\"_disabled()\" [loading]=\"loading()\"></xiri-buttonstyle>\n\t\t</a>\n\t}\n\t@case ('menu') {\n\t\t<button mat-icon-button [matMenuTriggerFor]=\"menuRef\"\n\t\t        [class]=\"button().color || 'primary'\"\n\t\t        [matTooltip]=\"button().hint\"\n\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t        (click)=\"$event.stopPropagation()\">\n\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t</button>\n\t\t<mat-menu #menuRef=\"matMenu\">\n\t\t\t@for (item of button().menuItems; track item) {\n\t\t\t\t@switch (item.action) {\n\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t<a mat-menu-item [routerLink]=\"item.url\">\n\t\t\t\t\t\t\t@if (item.icon) {\n\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}\n\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('href') {\n\t\t\t\t\t\t<a mat-menu-item [href]=\"item.url\" target=\"_blank\">\n\t\t\t\t\t\t\t@if (item.icon) {\n\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}\n\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t<button mat-menu-item (click)=\"openMenuDialog($event, item)\">\n\t\t\t\t\t\t\t@if (item.icon) {\n\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}\n\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t</mat-menu>\n\t}\n\t@default {\n\t\t<xiri-buttonstyle [button]=\"button()\" [disabled]=\"_disabled()\" [loading]=\"loading()\" (click)=\"clicked($event)\"></xiri-buttonstyle>\n\t}\n}\n", styles: [""], dependencies: [{ kind: "component", type: XiriButtonstyleComponent, selector: "xiri-buttonstyle", inputs: ["button", "disabled", "loading"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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: "@switch (button().action) {\n\t@case ('link') {\n\t\t<a [routerLink]=\"_url()\" [href]=\"_url()\" (click)=\"clicked($event)\">\n\t\t\t<xiri-buttonstyle [button]=\"button()\" [disabled]=\"_disabled()\" [loading]=\"loading()\"></xiri-buttonstyle>\n\t\t</a>\n\t}\n\t@case ('href') {\n\t\t<a [href]=\"_url()\" [target]=\"button().target\" (click)=\"clicked($event)\">\n\t\t\t<xiri-buttonstyle [button]=\"button()\" [disabled]=\"_disabled()\" [loading]=\"loading()\"></xiri-buttonstyle>\n\t\t</a>\n\t}\n\t@case ('menu') {\n\t\t<button mat-icon-button [matMenuTriggerFor]=\"menuRef\"\n\t\t        [class]=\"button().color || 'primary'\"\n\t\t        [matTooltip]=\"button().hint\"\n\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t        (click)=\"$event.stopPropagation()\">\n\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t</button>\n\t\t<mat-menu #menuRef=\"matMenu\">\n\t\t\t@for (item of button().menuItems; track item) {\n\t\t\t\t@switch (item.action) {\n\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t<a mat-menu-item [routerLink]=\"item.url\">\n\t\t\t\t\t\t\t@if (item.icon) {\n\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}\n\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('href') {\n\t\t\t\t\t\t<a mat-menu-item [href]=\"item.url\" target=\"_blank\">\n\t\t\t\t\t\t\t@if (item.icon) {\n\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}\n\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t<button mat-menu-item (click)=\"openMenuDialog($event, item)\">\n\t\t\t\t\t\t\t@if (item.icon) {\n\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}\n\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t</mat-menu>\n\t}\n\t@default {\n\t\t<xiri-buttonstyle [button]=\"button()\" [disabled]=\"_disabled()\" [loading]=\"loading()\" (click)=\"clicked($event)\"></xiri-buttonstyle>\n\t}\n}\n", styles: [""], dependencies: [{ kind: "component", type: XiriButtonstyleComponent, selector: "xiri-buttonstyle", inputs: ["button", "disabled", "loading"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-button', imports: [
                         XiriButtonstyleComponent,
@@ -3069,21 +3009,226 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (button().action) {\n\t@case ('link') {\n\t\t<a [routerLink]=\"_url()\" [href]=\"_url()\" (click)=\"clicked($event)\">\n\t\t\t<xiri-buttonstyle [button]=\"button()\" [disabled]=\"_disabled()\" [loading]=\"loading()\"></xiri-buttonstyle>\n\t\t</a>\n\t}\n\t@case ('href') {\n\t\t<a [href]=\"_url()\" [target]=\"button().target\" (click)=\"clicked($event)\">\n\t\t\t<xiri-buttonstyle [button]=\"button()\" [disabled]=\"_disabled()\" [loading]=\"loading()\"></xiri-buttonstyle>\n\t\t</a>\n\t}\n\t@case ('menu') {\n\t\t<button mat-icon-button [matMenuTriggerFor]=\"menuRef\"\n\t\t        [class]=\"button().color || 'primary'\"\n\t\t        [matTooltip]=\"button().hint\"\n\t\t        [matTooltipDisabled]=\"!button().hint\"\n\t\t        (click)=\"$event.stopPropagation()\">\n\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\n\t\t</button>\n\t\t<mat-menu #menuRef=\"matMenu\">\n\t\t\t@for (item of button().menuItems; track item) {\n\t\t\t\t@switch (item.action) {\n\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t<a mat-menu-item [routerLink]=\"item.url\">\n\t\t\t\t\t\t\t@if (item.icon) {\n\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}\n\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('href') {\n\t\t\t\t\t\t<a mat-menu-item [href]=\"item.url\" target=\"_blank\">\n\t\t\t\t\t\t\t@if (item.icon) {\n\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}\n\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t<button mat-menu-item (click)=\"openMenuDialog($event, item)\">\n\t\t\t\t\t\t\t@if (item.icon) {\n\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}\n\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t</mat-menu>\n\t}\n\t@default {\n\t\t<xiri-buttonstyle [button]=\"button()\" [disabled]=\"_disabled()\" [loading]=\"loading()\" (click)=\"clicked($event)\"></xiri-buttonstyle>\n\t}\n}\n" }]
         }], propDecorators: { button: [{ type: i0.Input, args: [{ isSignal: true, alias: "button", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filterData: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterData", required: false }] }], url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], result: [{ type: i0.Output, args: ["result"] }] } });
 
+class XiriTableInlineEditService {
+    constructor() {
+        this.dataService = inject(XiriDataService);
+        this.snackbar = inject(XiriSnackbarService);
+        this.injector = inject(Injector);
+        this.editingCell = signal(null, ...(ngDevMode ? [{ debugName: "editingCell" }] : /* istanbul ignore next */ []));
+        this.editingChipsValues = signal([], ...(ngDevMode ? [{ debugName: "editingChipsValues" }] : /* istanbul ignore next */ []));
+        this.editableOptionsLoading = signal(false, ...(ngDevMode ? [{ debugName: "editableOptionsLoading" }] : /* istanbul ignore next */ []));
+        this.loadedEditableOptions = signal([], ...(ngDevMode ? [{ debugName: "loadedEditableOptions" }] : /* istanbul ignore next */ []));
+        this.savingCell = signal(null, ...(ngDevMode ? [{ debugName: "savingCell" }] : /* istanbul ignore next */ []));
+        this.editingOriginalValue = null;
+        this.editableOptionsSub = null;
+    }
+    get editUrl() { return this.getEditUrl?.(); }
+    get displayedColumns() { return this.getDisplayedColumns?.() ?? []; }
+    init(config) {
+        this.getEditUrl = config.getEditUrl;
+        this.getDisplayedColumns = config.getDisplayedColumns;
+        this.abort$ = config.abort$;
+        this.onSaved = config.onSaved;
+        this.onDataUpdate = config.onDataUpdate;
+        this.onCallReturn = config.onCallReturn;
+    }
+    start(row, column, skipSavingCheck = false) {
+        if (!column.editable || !this.editUrl || (!skipSavingCheck && this.savingCell()))
+            return;
+        const val = row[column.id];
+        this.editingOriginalValue = Array.isArray(val) ? JSON.parse(JSON.stringify(val)) : val;
+        if (column.format === 'chips' && Array.isArray(val) && !column.editableOptionsUrl) {
+            this.editingChipsValues.set(val.map((c) => {
+                const opt = column.editableOptions?.find(o => o.label === c.label);
+                return opt?.value || c.label;
+            }));
+        }
+        this.editingCell.set({ row, field: column.id });
+        if (column.editableOptionsUrl) {
+            this.editableOptionsLoading.set(true);
+            this.loadedEditableOptions.set([]);
+            this.editableOptionsSub?.unsubscribe();
+            const separator = column.editableOptionsUrl.includes('?') ? '&' : '?';
+            const optionsUrl = column.editableOptionsUrl + separator + 'id=' + encodeURIComponent(row.id) + '&field=' + encodeURIComponent(column.id);
+            this.editableOptionsSub = this.dataService.get(optionsUrl).subscribe({
+                next: (result) => {
+                    this.loadedEditableOptions.set(result);
+                    this.editableOptionsLoading.set(false);
+                    if (column.format === 'chips' && Array.isArray(val)) {
+                        this.editingChipsValues.set(val.map((c) => {
+                            const opt = result.find((o) => o.label === c.label);
+                            return opt?.value || c.label;
+                        }));
+                    }
+                    this.editableOptionsSub = null;
+                    this.focus();
+                },
+                error: () => {
+                    this.editableOptionsLoading.set(false);
+                    this.editableOptionsSub = null;
+                    this.cancel();
+                    this.snackbar.error('Optionen konnten nicht geladen werden');
+                }
+            });
+        }
+        else {
+            this.focus();
+        }
+    }
+    cancel() {
+        const editing = this.editingCell();
+        if (editing) {
+            editing.row[editing.field] = this.editingOriginalValue;
+            this.editingCell.set(null);
+            this.editingOriginalValue = null;
+        }
+        this.editableOptionsSub?.unsubscribe();
+        this.editableOptionsSub = null;
+        this.loadedEditableOptions.set([]);
+        this.editableOptionsLoading.set(false);
+    }
+    save(row, column) {
+        const editing = this.editingCell();
+        if (!editing || editing.row !== row || editing.field !== column.id)
+            return;
+        const newValue = row[column.id];
+        const originalValue = this.editingOriginalValue;
+        this.editingCell.set(null);
+        this.editingOriginalValue = null;
+        this.loadedEditableOptions.set([]);
+        this.editableOptionsLoading.set(false);
+        const unchanged = Array.isArray(newValue)
+            ? JSON.stringify(newValue) === JSON.stringify(originalValue)
+            : newValue === originalValue;
+        if (unchanged) {
+            return;
+        }
+        const value = column.format === 'chips' && Array.isArray(newValue)
+            ? newValue.map((c) => c.label)
+            : newValue;
+        const payload = { id: row.id, field: column.id, value };
+        this.savingCell.set({ row, field: column.id });
+        this.dataService.post(this.editUrl, payload).pipe(takeUntil(this.abort$)).subscribe({
+            next: (result) => {
+                this.savingCell.set(null);
+                if (result?.updates) {
+                    Object.keys(result.updates).forEach(key => {
+                        row[key] = result.updates[key];
+                    });
+                    this.onDataUpdate();
+                }
+                this.onSaved(row, column.id);
+                this.onCallReturn(result);
+            },
+            error: (err) => {
+                this.savingCell.set(null);
+                row[column.id] = originalValue;
+                this.onDataUpdate();
+                this.snackbar.error(err.error?.error || 'Unknown Error');
+            }
+        });
+    }
+    isEditing(row, fieldId) {
+        const editing = this.editingCell();
+        return editing !== null && editing.row === row && editing.field === fieldId;
+    }
+    isSaving(row, fieldId) {
+        const saving = this.savingCell();
+        return saving !== null && saving.row === row && saving.field === fieldId;
+    }
+    onKeydown(event, row, column) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.save(row, column);
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.cancel();
+        }
+        else if (event.key === 'Tab') {
+            const matSelect = event.target.closest('mat-select');
+            if (matSelect && matSelect.classList.contains('mat-mdc-select-open')) {
+                return;
+            }
+            event.preventDefault();
+            const direction = event.shiftKey ? -1 : 1;
+            const nextColumn = this.getAdjacentEditableColumn(column.id, direction);
+            this.save(row, column);
+            if (nextColumn) {
+                this.start(row, nextColumn, true);
+            }
+        }
+    }
+    focus() {
+        afterNextRender(() => {
+            const el = document.querySelector('.xiri-inline-edit input, .xiri-inline-edit mat-select');
+            el?.focus();
+        }, { injector: this.injector });
+    }
+    getAdjacentEditableColumn(currentField, direction) {
+        const noInlineEdit = new Set(['buttons', 'icon', 'html', 'link', 'input', 'text2', 'textn', 'number', 'header']);
+        const currentIndex = this.displayedColumns.findIndex(c => c.id === currentField);
+        if (currentIndex === -1)
+            return null;
+        for (let i = currentIndex + direction; i >= 0 && i < this.displayedColumns.length; i += direction) {
+            const col = this.displayedColumns[i];
+            if (col.editable && !noInlineEdit.has(col.format)) {
+                return col;
+            }
+        }
+        return null;
+    }
+    flashSaved(row, fieldId, dataSource) {
+        afterNextRender(() => {
+            const rowIndex = dataSource.data.indexOf(row);
+            const colIndex = this.displayedColumns.findIndex(c => c.id === fieldId);
+            if (rowIndex === -1 || colIndex === -1)
+                return;
+            const rows = document.querySelectorAll('.xiritable tr.mat-mdc-row');
+            const rowEl = rows[rowIndex];
+            if (!rowEl)
+                return;
+            const cells = rowEl.querySelectorAll('td.mat-mdc-cell');
+            const cell = cells[colIndex];
+            if (!cell)
+                return;
+            cell.classList.add('xiri-cell-saved');
+            setTimeout(() => cell.classList.remove('xiri-cell-saved'), 500);
+        }, { injector: this.injector });
+    }
+    getOptions(column) {
+        return column.editableOptions ?? this.loadedEditableOptions();
+    }
+    onChipsChange(row, column, selectedValues) {
+        this.editingChipsValues.set(selectedValues);
+        const opts = this.getOptions(column);
+        row[column.id] = selectedValues.map(val => {
+            const opt = opts.find(o => o.value === val);
+            return { label: opt?.label || val, color: opt?.color || '' };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriTableInlineEditService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriTableInlineEditService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriTableInlineEditService, decorators: [{
+            type: Injectable
+        }] });
+
 class XiriButtonlineComponent {
     constructor() {
-        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-        this.filterData = input(undefined, ...(ngDevMode ? [{ debugName: "filterData" }] : []));
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.filterData = input(undefined, ...(ngDevMode ? [{ debugName: "filterData" }] : /* istanbul ignore next */ []));
         this.result = output();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriButtonlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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:.5rem}.buttonline.center{text-align:center}.buttonline.center button,.buttonline.center a,.buttonline.center xiri-button{margin-left:.5rem;margin-right:.5rem}.buttonline.left button,.buttonline.left a,.buttonline.left xiri-button{margin-left:.5rem;margin-right:.5rem}.buttonline.small{padding-bottom:0}.buttonline xiri-button+xiri-button{margin-left:.4rem}\n"], dependencies: [{ 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: "21.2.2", ngImport: i0, type: XiriButtonlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriButtonlineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriButtonlineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-buttonline', imports: [
                         XiriButtonComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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:.5rem}.buttonline.center{text-align:center}.buttonline.center button,.buttonline.center a,.buttonline.center xiri-button{margin-left:.5rem;margin-right:.5rem}.buttonline.left button,.buttonline.left a,.buttonline.left xiri-button{margin-left:.5rem;margin-right:.5rem}.buttonline.small{padding-bottom:0}.buttonline xiri-button+xiri-button{margin-left:.4rem}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filterData: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterData", required: false }] }], result: [{ type: i0.Output, args: ["result"] }] } });
 
 class XiriSessionStorageService {
@@ -3145,10 +3290,10 @@ class XiriSessionStorageService {
         }
         return val.value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriSessionStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriSessionStorageService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriSessionStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriSessionStorageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriSessionStorageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriSessionStorageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3208,10 +3353,10 @@ class XiriNumberService {
         }
         return new Intl.NumberFormat(this.currentLocale, options).format(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriNumberService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriNumberService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriNumberService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriNumberService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriNumberService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriNumberService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3220,18 +3365,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 
 class XiriEmptyStateComponent {
     constructor() {
-        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
         this.buttonResult = output();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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: ["@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem;text-align:center;animation:fadeInUp .25s ease-out}.empty-state mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:1rem;opacity:.6}.empty-state .title{font-size:1.1rem;font-weight:500;color:var(--on-surface, #1B1B1F);margin-bottom:.5rem}.empty-state .description{font-size:.875rem;color:var(--on-surface-variant, #44474F);max-width:400px;margin-bottom:1rem}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriEmptyStateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriEmptyStateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'xiri-empty-state', changeDetection: ChangeDetectionStrategy.OnPush, 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: ["@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem;text-align:center;animation:fadeInUp .25s ease-out}.empty-state mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:1rem;opacity:.6}.empty-state .title{font-size:1.1rem;font-weight:500;color:var(--on-surface, #1B1B1F);margin-bottom:.5rem}.empty-state .description{font-size:.875rem;color:var(--on-surface-variant, #44474F);max-width:400px;margin-bottom:1rem}\n"] }]
+            args: [{ selector: 'xiri-empty-state', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }] } });
 
 class XiriTableComponent {
+    // Inline edit signals delegated to inlineEdit service
+    get editingCell() { return this.inlineEdit.editingCell; }
+    get editingChipsValues() { return this.inlineEdit.editingChipsValues; }
+    get editableOptionsLoading() { return this.inlineEdit.editableOptionsLoading; }
+    get loadedEditableOptions() { return this.inlineEdit.loadedEditableOptions; }
+    get savingCell() { return this.inlineEdit.savingCell; }
     constructor() {
         this.dialog = inject(MatDialog);
         this.dataService = inject(XiriDataService);
@@ -3239,27 +3390,30 @@ class XiriTableComponent {
         this.sessionStorageService = inject(XiriSessionStorageService);
         this.numberService = inject(XiriNumberService);
         this.snackbar = inject(XiriSnackbarService);
+        this.responseHandler = inject(XiriResponseHandlerService);
+        this.downloadService = inject(XiriDownloadService);
+        this.inlineEdit = inject(XiriTableInlineEditService);
         this._changeDetectorRef = inject(ChangeDetectorRef);
         this.destroyRef = inject(DestroyRef);
-        this.dyncomponent = input(...(ngDevMode ? [undefined, { debugName: "dyncomponent" }] : []));
-        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
-        this.filterData = input(undefined, ...(ngDevMode ? [{ debugName: "filterData" }] : []));
+        this.dyncomponent = input(...(ngDevMode ? [undefined, { debugName: "dyncomponent" }] : /* istanbul ignore next */ []));
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        this.filterData = input(undefined, ...(ngDevMode ? [{ debugName: "filterData" }] : /* istanbul ignore next */ []));
         this.clickedRow = output();
         this.paginator = viewChild.required(MatPaginator);
         this.sort = viewChild.required(MatSort);
         this.table = viewChild.required(MatTable);
-        this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-        this._totalCount = signal(0, ...(ngDevMode ? [{ debugName: "_totalCount" }] : []));
+        this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this._totalCount = signal(0, ...(ngDevMode ? [{ debugName: "_totalCount" }] : /* istanbul ignore next */ []));
         this.displayedColumns = [];
         this.columnsToDisplay = [];
         this.columnsToSearch = [];
         this.dataSource = new MatTableDataSource();
-        this._alldata = signal(null, ...(ngDevMode ? [{ debugName: "_alldata" }] : []));
+        this._alldata = signal(null, ...(ngDevMode ? [{ debugName: "_alldata" }] : /* istanbul ignore next */ []));
         this.footer = [];
         this.extraHeaderFields = [];
         this.extraHeaders = [];
         this.selection = new SelectionModel(true, []);
-        this.subs = new Subscription();
+        this.reloadAbort$ = new Subject();
         this.options = {
             reload: false,
             dense: false,
@@ -3282,9 +3436,9 @@ class XiriTableComponent {
         };
         this.dynData = { data: null, filterData: undefined };
         this.errorMsg = '';
-        // public _filterData: any;
         this._firstData = true;
         this.searchText = '';
+        this.trackByRowId = (_, row) => row.id ?? _;
         this._filterData = computed(() => {
             let values = this.filterData();
             if (values === undefined)
@@ -3292,12 +3446,11 @@ class XiriTableComponent {
             else if (values === null)
                 return null;
             return values;
-        }, ...(ngDevMode ? [{ debugName: "_filterData" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "_filterData" }] : /* istanbul ignore next */ []));
         effect(() => {
             const filterData = this._filterData();
             this.loading.set(true);
-            this.cleanup();
-            this.subs = new Subscription();
+            this.reloadAbort$.next();
             if (filterData === null)
                 return;
             this.loadData();
@@ -3314,6 +3467,14 @@ class XiriTableComponent {
             this.options = { ...this.options, ...this.settings().options };
         if (this.settings().fields)
             this.loadFields(this.settings().fields);
+        this.inlineEdit.init({
+            getEditUrl: () => this.options.editUrl,
+            getDisplayedColumns: () => this.displayedColumns,
+            abort$: this.reloadAbort$,
+            onSaved: (row, fieldId) => this.inlineEdit.flashSaved(row, fieldId, this.dataSource),
+            onDataUpdate: () => this.dataSource._updateChangeSubscription(),
+            onCallReturn: (result) => this.callReturn(result),
+        });
         if (this.options.pagination)
             this.paginator().pageSize = this.options.itemsPerPage;
         if (this.options.pagination && !this.options.serverSide)
@@ -3409,7 +3570,7 @@ class XiriTableComponent {
                 }
             }
             api = this.dataService.post(this.settings().url, Object.keys(payload).length > 0 ? payload : null);
-            this.subs.add(api.subscribe({
+            api.pipe(takeUntil(this.reloadAbort$)).subscribe({
                 next: (res) => {
                     if (!res || !res.data) {
                         this.errorMsg = 'ERROR: unknown server response';
@@ -3439,7 +3600,7 @@ class XiriTableComponent {
                     this.loading.set(false);
                     this._changeDetectorRef.markForCheck();
                 }
-            }));
+            });
         }
     }
     loadFields(fields) {
@@ -3595,13 +3756,13 @@ class XiriTableComponent {
             let k = button.send[i];
             data[k] = row[k];
         }
-        this.subs.add(this.dataService.post(url, data).subscribe({
+        this.dataService.post(url, data).pipe(takeUntil(this.reloadAbort$)).subscribe({
             next: (result) => this.callReturn(result),
             error: (err) => {
                 console.log("table save error", err);
                 this.snackbar.error(err.error?.error || 'Unknown Error');
             }
-        }));
+        });
     }
     saveCallCheck(button, row) {
         for (let i = 0; i != button.check.length; i++) {
@@ -3616,16 +3777,24 @@ class XiriTableComponent {
         event.stopPropagation();
         if (this.selection.isEmpty())
             return;
-        this.dataService.postDownload(button.url ? button.url : '', this.getSelectionIDs());
+        const url = button.url ? button.url : '';
+        this.dataService.postFileResponse(url, this.getSelectionIDs()).pipe(takeUntil(this.reloadAbort$)).subscribe({
+            next: (result) => {
+                this.downloadService.download(result, 'download.csv', false);
+            },
+            error: (err) => {
+                this.snackbar.error(err.error?.error || 'Download Error');
+            }
+        });
     }
     makeApiCall(apicall) {
-        this.subs.add(apicall.subscribe({
+        apicall.pipe(takeUntil(this.reloadAbort$)).subscribe({
             next: (result) => this.callReturn(result),
             error: (err) => {
                 console.log("table api error", err);
                 this.snackbar.error(err.error?.error || 'Unknown Error');
             }
-        }));
+        });
     }
     buttonReturn(event) {
         if (!event.done)
@@ -3633,30 +3802,51 @@ class XiriTableComponent {
         this.callReturn(event.result);
     }
     callReturn(result) {
-        if (!result)
-            return;
-        if (result.page == 'refresh' || result.refresh == 'page')
-            this.router.navigate([this.router.url]).then();
-        else if (result.table == 'refresh' || result.refresh == 'table')
-            this.reload();
-        else if (result.goto)
-            this.router.navigate([result.goto]).then();
-        else if (result.table == 'update' || result.update == 'table') {
-            const rowId = result.id;
-            const i = this.dataSource.data.findIndex((x) => x.id === rowId);
-            if (i == -1)
-                return;
-            this.dataSource.data[i][result.field] = result.content;
-            this.dataSource._updateChangeSubscription();
-        }
+        this.responseHandler.handle(result, {
+            onTableRefresh: () => this.reload(),
+            onTableUpdate: (id, field, content) => {
+                const i = this.dataSource.data.findIndex((x) => x.id === id);
+                if (i == -1)
+                    return;
+                this.dataSource.data[i][field] = content;
+                this.dataSource._updateChangeSubscription();
+            }
+        });
     }
     getSelectionIDs() {
         return this.selection.selected.map((item) => {
             return +item['id'];
         });
     }
+    startInlineEdit(row, column, skipSavingCheck = false) {
+        this.inlineEdit.start(row, column, skipSavingCheck);
+    }
+    cancelInlineEdit() {
+        this.inlineEdit.cancel();
+    }
+    saveInlineEdit(row, column) {
+        this.inlineEdit.save(row, column);
+    }
+    isEditing(row, fieldId) {
+        return this.inlineEdit.isEditing(row, fieldId);
+    }
+    isSaving(row, fieldId) {
+        return this.inlineEdit.isSaving(row, fieldId);
+    }
+    onInlineEditKeydown(event, row, column) {
+        this.inlineEdit.onKeydown(event, row, column);
+    }
+    getEditableOptions(column) {
+        return this.inlineEdit.getOptions(column);
+    }
+    onChipsSelectionChange(row, column, selectedValues) {
+        this.inlineEdit.onChipsChange(row, column, selectedValues);
+    }
     ngOnDestroy() {
-        this.cleanup();
+        this.reloadAbort$.next();
+        this.reloadAbort$.complete();
+        if (this.dialogRef)
+            this.dialogRef.close(null);
     }
     pasteInput($event, row, column) {
         if (column.inputPaste !== true)
@@ -3704,26 +3894,18 @@ class XiriTableComponent {
             this.dataSource._updateChangeSubscription();
         }
         this._changeDetectorRef.markForCheck();
-        this.subs.add(this.dataService.post(this.options.saveInputUrl, data).subscribe({
+        this.dataService.post(this.options.saveInputUrl, data).pipe(takeUntil(this.reloadAbort$)).subscribe({
             next: (result) => {
-                // this.loading.set( false );
                 this.callReturn(result);
             },
             error: (err) => {
                 this._alldata.set(data);
-                // this.dataSource.data = data;
-                // this.loading.set( false );
                 this.dataSource._updateChangeSubscription();
                 console.log("table save error", err);
                 this.snackbar.error(err.error?.error || 'Unknown Error');
                 this._changeDetectorRef.markForCheck();
             }
-        }));
-    }
-    cleanup() {
-        if (this.dialogRef)
-            this.dialogRef.close(null);
-        this.subs.unsubscribe();
+        });
     }
     getSortingDataAccessor() {
         return (data, sortHeaderId) => {
@@ -3733,12 +3915,12 @@ class XiriTableComponent {
             return data[sortHeaderId];
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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" }, 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<div class=\"header\">\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<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]=\"searchText\"></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.borders]=\"options.borders\" [class.bordersHeader]=\"options.bordersHeader\">\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) {\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        (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<a mat-menu-item [routerLink]=\"row[column.id][i][j]\">\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[ row[ column.id ] ]) {\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"column.icons[ row[ column.id ] ][ 'color' ] || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltip]=\"column.icons[ row[ column.id ] ][ 'hint' ] \"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!column.icons[ row[ column.id ] ][ 'hint' ]\">{{ column.icons[row[column.id]]['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\t@if (row[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t\t\t\t<a [routerLink]=\"row[column.id + 'Link']\" 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</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\"\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<div class=\"xiri-chips-display\">\n\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<span class=\"xiri-chip-display\" [class]=\"chip.color || ''\">{{ chip.label }}</span>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t</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@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\t{{ column.textPrefix }}{{ row[column.id] }}{{ 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}\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 (options.select) {\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 (row.select !== false) {\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 ? selection.toggle(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)\"></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\">{{ errorMsg }}</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@switch (button.action) {\n\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t        (click)=\"openDialogSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\">\n\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</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('api') {\n\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t        (click)=\"apiCallSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\">\n\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</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('download') {\n\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t        (click)=\"downloadSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\">\n\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</button>\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", styles: ["mat-card.xiritablecard{padding:0;margin-bottom:2rem}.xiritable{width:100%;overflow:auto}.xiritable.canbreak{word-break:break-all}.xiritable .table-full{display:inline-block;width:100%}.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:1rem}.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 table{width:100%;--mat-table-header-container-height: 42px;--mat-table-footer-container-height: 42px;--mat-table-row-item-container-height: 42px}.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-header-row.dense{height:28px}.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.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 .mat-column-select{overflow:initial}.xiritable .select-buttons{padding:.3rem .8rem;display:flex;align-items:center}.xiritable .select-buttons button{margin-right:.5rem}.xiritable .nodata{padding:.5rem 1.5rem;font-size:var(--xiri-font-size-label);background-color:var(--surface, #FFFFFF);animation:fadeInUp .25s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.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)}.xiritable .loader.has-bottombar{border-bottom-left-radius:0;border-bottom-right-radius:0}xiri-dyncomponent{margin-bottom:2rem}[hidden]{display:none!important}\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", "routerLink"] }, { kind: "component", type: XiriButtonstyleComponent, selector: "xiri-buttonstyle", inputs: ["button", "disabled", "loading"] }, { 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: 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: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: XiriEmptyStateComponent, selector: "xiri-empty-state", inputs: ["settings"], outputs: ["buttonResult"] }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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], 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<div class=\"header\">\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<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]=\"searchText\"></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.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) {\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        (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<a mat-menu-item [routerLink]=\"row[column.id][i][j]\">\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[ row[ column.id ] ]) {\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"column.icons[ row[ column.id ] ][ 'color' ] || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltip]=\"column.icons[ row[ column.id ] ][ 'hint' ] \"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!column.icons[ row[ column.id ] ][ 'hint' ]\">{{ column.icons[row[column.id]]['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\t@if (row[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t\t\t\t<a [routerLink]=\"row[column.id + 'Link']\" 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</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\"\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@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\" (click)=\"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\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) {\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@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        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\" (click)=\"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</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 (options.select) {\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 (row.select !== false) {\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 ? selection.toggle(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)\"></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\">{{ errorMsg }}</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@switch (button.action) {\n\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t        (click)=\"openDialogSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\">\n\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</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('api') {\n\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t        (click)=\"apiCallSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\">\n\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</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('download') {\n\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t        (click)=\"downloadSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\">\n\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</button>\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", 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 .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 table{width:100%;--mat-table-header-container-height: 42px;--mat-table-footer-container-height: 42px;--mat-table-row-item-container-height: 42px}.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-header-row.dense{height:28px}.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.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{background-color:var(--surface-variant, #DEE3EB)}.xiritable .xiri-editable-cell:hover .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}\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", "routerLink"] }, { kind: "component", type: XiriButtonstyleComponent, selector: "xiri-buttonstyle", inputs: ["button", "disabled", "loading"] }, { 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: SafehtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'xiri-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [MatCard,
+            args: [{ selector: 'xiri-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [XiriTableInlineEditService], imports: [MatCard,
                         MatIconButton,
                         MatIcon,
                         XiriButtonlineComponent,
@@ -3753,7 +3935,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         RouterLink,
                         XiriButtonstyleComponent,
                         MatTooltip,
-                        MatFormField,
+                        MatFormField, MatSuffix,
                         MatInput,
                         FormsModule,
                         MatCheckbox,
@@ -3765,7 +3947,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         SafehtmlPipe, XiriButtonComponent, MatHeaderCellDef, MatCellDef, MatHeaderRowDef, MatRowDef,
                         MatFooterRow, MatFooterRowDef, MatFooterCell, MatFooterCellDef,
                         MatMenu, MatMenuItem, MatMenuTrigger,
-                        XiriEmptyStateComponent], 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<div class=\"header\">\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<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]=\"searchText\"></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.borders]=\"options.borders\" [class.bordersHeader]=\"options.bordersHeader\">\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) {\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        (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<a mat-menu-item [routerLink]=\"row[column.id][i][j]\">\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[ row[ column.id ] ]) {\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"column.icons[ row[ column.id ] ][ 'color' ] || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltip]=\"column.icons[ row[ column.id ] ][ 'hint' ] \"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!column.icons[ row[ column.id ] ][ 'hint' ]\">{{ column.icons[row[column.id]]['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\t@if (row[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t\t\t\t<a [routerLink]=\"row[column.id + 'Link']\" 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</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\"\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<div class=\"xiri-chips-display\">\n\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<span class=\"xiri-chip-display\" [class]=\"chip.color || ''\">{{ chip.label }}</span>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t</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@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\t{{ column.textPrefix }}{{ row[column.id] }}{{ 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}\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 (options.select) {\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 (row.select !== false) {\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 ? selection.toggle(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)\"></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\">{{ errorMsg }}</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@switch (button.action) {\n\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t        (click)=\"openDialogSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\">\n\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</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('api') {\n\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t        (click)=\"apiCallSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\">\n\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</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('download') {\n\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t        (click)=\"downloadSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\">\n\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</button>\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", styles: ["mat-card.xiritablecard{padding:0;margin-bottom:2rem}.xiritable{width:100%;overflow:auto}.xiritable.canbreak{word-break:break-all}.xiritable .table-full{display:inline-block;width:100%}.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:1rem}.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 table{width:100%;--mat-table-header-container-height: 42px;--mat-table-footer-container-height: 42px;--mat-table-row-item-container-height: 42px}.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-header-row.dense{height:28px}.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.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 .mat-column-select{overflow:initial}.xiritable .select-buttons{padding:.3rem .8rem;display:flex;align-items:center}.xiritable .select-buttons button{margin-right:.5rem}.xiritable .nodata{padding:.5rem 1.5rem;font-size:var(--xiri-font-size-label);background-color:var(--surface, #FFFFFF);animation:fadeInUp .25s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.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)}.xiritable .loader.has-bottombar{border-bottom-left-radius:0;border-bottom-right-radius:0}xiri-dyncomponent{margin-bottom:2rem}[hidden]{display:none!important}\n"] }]
+                        MatSelect, MatOption$1,
+                        XiriEmptyStateComponent], 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<div class=\"header\">\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<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]=\"searchText\"></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.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) {\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        (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<a mat-menu-item [routerLink]=\"row[column.id][i][j]\">\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[ row[ column.id ] ]) {\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"column.icons[ row[ column.id ] ][ 'color' ] || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltip]=\"column.icons[ row[ column.id ] ][ 'hint' ] \"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!column.icons[ row[ column.id ] ][ 'hint' ]\">{{ column.icons[row[column.id]]['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\t@if (row[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t\t\t\t<a [routerLink]=\"row[column.id + 'Link']\" 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</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\"\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@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\" (click)=\"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\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) {\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@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        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\" (click)=\"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</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 (options.select) {\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 (row.select !== false) {\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 ? selection.toggle(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)\"></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\">{{ errorMsg }}</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@switch (button.action) {\n\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t        (click)=\"openDialogSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\">\n\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</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('api') {\n\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t        (click)=\"apiCallSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\">\n\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</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('download') {\n\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t        (click)=\"downloadSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\">\n\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</button>\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", 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 .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 table{width:100%;--mat-table-header-container-height: 42px;--mat-table-footer-container-height: 42px;--mat-table-row-item-container-height: 42px}.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-header-row.dense{height:28px}.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.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{background-color:var(--surface-variant, #DEE3EB)}.xiritable .xiri-editable-cell:hover .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}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dyncomponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "dyncomponent", required: false }] }], settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }], filterData: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterData", required: false }] }], clickedRow: [{ type: i0.Output, args: ["clickedRow"] }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }], table: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTable), { isSignal: true }] }] } });
 
 class XiriFormService {
@@ -3777,14 +3960,8 @@ class XiriFormService {
     get(url, data, extra) {
         const req = data === null ? this.dataService.get(url) : this.dataService.post(url, { ...data, ...extra });
         return req.pipe(map(res => this.parse(res)), catchError((err) => {
-            console.log('XiriFormService error', err);
-            let error = 'Unknown error';
-            if (err.status == 400 || err.status == 424)
-                error = err.error?.error || 'Format Error';
-            else if (err.status == 403)
-                error = err.error?.error || 'Access denied';
             return throwError(() => ({
-                error: error
+                error: parseHttpError(err)
             }));
         }));
     }
@@ -3887,10 +4064,10 @@ class XiriFormService {
             return;
         this.sessionStorageService.set(saveStateId, values);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriFormService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriFormService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriFormService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriFormService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3899,15 +4076,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 
 class XiriFormComponent {
     constructor() {
-        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
         this.location = inject(Location);
         this.formService = inject(XiriFormService);
         this.destroyRef = inject(DestroyRef);
-        this.formFields = signal(null, ...(ngDevMode ? [{ debugName: "formFields" }] : []));
-        this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-        this.loadingButton = signal(null, ...(ngDevMode ? [{ debugName: "loadingButton" }] : []));
-        this.done = signal(false, ...(ngDevMode ? [{ debugName: "done" }] : []));
-        this.error = signal('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+        this.formFields = signal(null, ...(ngDevMode ? [{ debugName: "formFields" }] : /* istanbul ignore next */ []));
+        this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.loadingButton = signal(null, ...(ngDevMode ? [{ debugName: "loadingButton" }] : /* istanbul ignore next */ []));
+        this.done = signal(false, ...(ngDevMode ? [{ debugName: "done" }] : /* istanbul ignore next */ []));
+        this.error = signal('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
         this.buttons = [];
         this.extra = {};
         this.formValues = null;
@@ -4011,17 +4188,17 @@ 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: "21.2.1", ngImport: i0, type: XiriFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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:2rem;display:flex;justify-content:space-between;padding-left:1rem;padding-right:1rem}.done{text-align:center;font-size:2rem;margin-bottom:1rem}mat-spinner{margin:2rem}[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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-form', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkTrapFocus,
                         MatProgressSpinner,
                         XiriFormFieldsComponent,
                         XiriErrorComponent,
                         XiriDoneComponent,
-                        XiriButtonstyleComponent], template: "<div class=\"xrow\" cdkTrapFocus>\n\t<div class=\"xcol\">\n\t\t@if (loading() && formFields() === null) {\n\t\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t\t}\n\t\t@if (formFields() !== null) {\n\t\t\t<xiri-form-fields [form]=\"formFields()\" (formChange)=\"formChanged($event)\" [disabled]=\"loading()\"\n\t\t\t                  [check]=\"checkSubject.asObservable()\"></xiri-form-fields>\n\t\t}\n\t\t@if (error()) {\n\t\t\t<xiri-error class=\"error\" [text]=\"error()\"></xiri-error>\n\t\t}\n\t</div>\n\t@if (done()) {\n\t\t<div class=\"xcol done\">\n\t\t\t<xiri-done></xiri-done>\n\t\t</div>\n\t} @else {\n\t\t<div class=\"xcol formbtnline\">\n\t\t\t@for (button of buttons; track button) {\n\t\t\t\t@if (button.default) {\n\t\t\t\t\t<xiri-buttonstyle (click)=\"clickButton( button )\" [button]=\"button\" [disabled]=\"!formValid || loading()\" [loading]=\"loadingButton() === button\"></xiri-buttonstyle>\n\t\t\t\t} @else {\n\t\t\t\t\t<xiri-buttonstyle (click)=\"clickButton( button )\" [button]=\"button\" [disabled]=\"loading()\" [loading]=\"loadingButton() === button\"></xiri-buttonstyle>\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n</div>\n", styles: [".formbtnline{padding-top:2rem;display:flex;justify-content:space-between;padding-left:1rem;padding-right:1rem}.done{text-align:center;font-size:2rem;margin-bottom:1rem}mat-spinner{margin:2rem}[hidden]{display:none!important}\n"] }]
+                        XiriButtonstyleComponent], template: "<div class=\"xrow\" cdkTrapFocus>\n\t<div class=\"xcol\">\n\t\t@if (loading() && formFields() === null) {\n\t\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t\t}\n\t\t@if (formFields() !== null) {\n\t\t\t<xiri-form-fields [form]=\"formFields()\" (formChange)=\"formChanged($event)\" [disabled]=\"loading()\"\n\t\t\t                  [check]=\"checkSubject.asObservable()\"></xiri-form-fields>\n\t\t}\n\t\t@if (error()) {\n\t\t\t<xiri-error class=\"error\" [text]=\"error()\"></xiri-error>\n\t\t}\n\t</div>\n\t@if (done()) {\n\t\t<div class=\"xcol done\">\n\t\t\t<xiri-done></xiri-done>\n\t\t</div>\n\t} @else {\n\t\t<div class=\"xcol formbtnline\">\n\t\t\t@for (button of buttons; track button) {\n\t\t\t\t@if (button.default) {\n\t\t\t\t\t<xiri-buttonstyle (click)=\"clickButton( button )\" [button]=\"button\" [disabled]=\"!formValid || loading()\" [loading]=\"loadingButton() === button\"></xiri-buttonstyle>\n\t\t\t\t} @else {\n\t\t\t\t\t<xiri-buttonstyle (click)=\"clickButton( button )\" [button]=\"button\" [disabled]=\"loading()\" [loading]=\"loadingButton() === button\"></xiri-buttonstyle>\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n</div>\n", styles: [".formbtnline{padding-top:var(--xiri-spacing-xl);display:flex;justify-content:space-between;padding-left:var(--xiri-spacing-md);padding-right:var(--xiri-spacing-md)}.done{text-align:center;font-size:var(--xiri-font-size-display);margin-bottom:var(--xiri-spacing-md)}mat-spinner{margin:var(--xiri-spacing-xl)}[hidden]{display:none!important}\n"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
 
 class XiriQueryComponent {
@@ -4030,8 +4207,8 @@ class XiriQueryComponent {
         this.formService = inject(XiriFormService);
         this.cdr = inject(ChangeDetectorRef);
         this.destroyRef = inject(DestroyRef);
-        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
-        this.dyncomponent = input(...(ngDevMode ? [undefined, { debugName: "dyncomponent" }] : []));
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        this.dyncomponent = input(...(ngDevMode ? [undefined, { debugName: "dyncomponent" }] : /* istanbul ignore next */ []));
         this.change = output();
         this.waiter = new Subject();
         this.dynData = { data: null, filterData: null };
@@ -4039,12 +4216,12 @@ class XiriQueryComponent {
         this.saveStateId = null;
         this.extra = null;
         this._initialChangeDone = false;
-        this.data = signal(null, ...(ngDevMode ? [{ debugName: "data" }] : []));
-        this.error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
-        this.formFields = signal(null, ...(ngDevMode ? [{ debugName: "formFields" }] : []));
-        this.formValid = signal(true, ...(ngDevMode ? [{ debugName: "formValid" }] : []));
-        this.filterData = signal(null, ...(ngDevMode ? [{ debugName: "filterData" }] : []));
-        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.data = signal(null, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+        this.formFields = signal(null, ...(ngDevMode ? [{ debugName: "formFields" }] : /* istanbul ignore next */ []));
+        this.formValid = signal(true, ...(ngDevMode ? [{ debugName: "formValid" }] : /* istanbul ignore next */ []));
+        this.filterData = signal(null, ...(ngDevMode ? [{ debugName: "filterData" }] : /* istanbul ignore next */ []));
+        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         let settings = this.settings();
@@ -4141,44 +4318,44 @@ class XiriQueryComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriQueryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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 } }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"xrow\">\n\t<div class=\"xcol\">\n\t\t@if (settings().collapsed !== undefined) {\n\t\t\t<mat-expansion-panel [expanded]=\"!settings().collapsed\" 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@if (error()) {\n\t\t\t\t\t\t<div class=\"error\">{{ error() }}</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@if (error()) {\n\t\t\t\t\t<div class=\"error\">{{ error() }}</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t</div>\n\t@if (settings().buttonline) {\n\t\t<div class=\"xcol formbtnline\" [class]=\"settings().buttonline.display\">\n\t\t\t<xiri-buttonline [settings]=\"settings().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\">\n\t\t\t<ng-container *ngTemplateOutlet=\"dyncomponent(); context: { $implicit: data() }\"></ng-container>\n\t\t</div>\n\t}\n</div>\n", styles: [".query{padding-left:1rem;padding-right:1rem}.query-expansion .query{padding-left:0;padding-right:0}.query-expansion mat-panel-title mat-icon{margin-right:8px}\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: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriQueryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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 } }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"xrow\">\n\t<div class=\"xcol\">\n\t\t@if (settings().collapsed !== undefined) {\n\t\t\t<mat-expansion-panel [expanded]=\"!settings().collapsed\" 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@if (error()) {\n\t\t\t\t\t\t<div class=\"error\">{{ error() }}</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@if (error()) {\n\t\t\t\t\t<div class=\"error\">{{ error() }}</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t</div>\n\t@if (settings().buttonline) {\n\t\t<div class=\"xcol formbtnline\" [class]=\"settings().buttonline.display\">\n\t\t\t<xiri-buttonline [settings]=\"settings().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\">\n\t\t\t<ng-container *ngTemplateOutlet=\"dyncomponent(); context: { $implicit: data() }\"></ng-container>\n\t\t</div>\n\t}\n</div>\n", styles: [".query{padding-left:var(--xiri-spacing-md);padding-right:var(--xiri-spacing-md)}.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: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriQueryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriQueryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'xiri-query', imports: [XiriFormFieldsComponent, NgTemplateOutlet, XiriButtonlineComponent, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle, MatIcon, MatProgressSpinner], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"xrow\">\n\t<div class=\"xcol\">\n\t\t@if (settings().collapsed !== undefined) {\n\t\t\t<mat-expansion-panel [expanded]=\"!settings().collapsed\" 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@if (error()) {\n\t\t\t\t\t\t<div class=\"error\">{{ error() }}</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@if (error()) {\n\t\t\t\t\t<div class=\"error\">{{ error() }}</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t</div>\n\t@if (settings().buttonline) {\n\t\t<div class=\"xcol formbtnline\" [class]=\"settings().buttonline.display\">\n\t\t\t<xiri-buttonline [settings]=\"settings().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\">\n\t\t\t<ng-container *ngTemplateOutlet=\"dyncomponent(); context: { $implicit: data() }\"></ng-container>\n\t\t</div>\n\t}\n</div>\n", styles: [".query{padding-left:1rem;padding-right:1rem}.query-expansion .query{padding-left:0;padding-right:0}.query-expansion mat-panel-title mat-icon{margin-right:8px}\n"] }]
+            args: [{ selector: 'xiri-query', imports: [XiriFormFieldsComponent, NgTemplateOutlet, XiriButtonlineComponent, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle, MatIcon, MatProgressSpinner], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"xrow\">\n\t<div class=\"xcol\">\n\t\t@if (settings().collapsed !== undefined) {\n\t\t\t<mat-expansion-panel [expanded]=\"!settings().collapsed\" 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@if (error()) {\n\t\t\t\t\t\t<div class=\"error\">{{ error() }}</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@if (error()) {\n\t\t\t\t\t<div class=\"error\">{{ error() }}</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t</div>\n\t@if (settings().buttonline) {\n\t\t<div class=\"xcol formbtnline\" [class]=\"settings().buttonline.display\">\n\t\t\t<xiri-buttonline [settings]=\"settings().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\">\n\t\t\t<ng-container *ngTemplateOutlet=\"dyncomponent(); context: { $implicit: data() }\"></ng-container>\n\t\t</div>\n\t}\n</div>\n", styles: [".query{padding-left:var(--xiri-spacing-md);padding-right:var(--xiri-spacing-md)}.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 }] }], change: [{ type: i0.Output, args: ["change"] }] } });
 
 class XiriSkeletonComponent {
     constructor() {
-        this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
-        this.width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : []));
-        this.height = input('1em', ...(ngDevMode ? [{ debugName: "height" }] : []));
-        this.lines = input(1, ...(ngDevMode ? [{ debugName: "lines" }] : []));
-        this.columns = input(4, ...(ngDevMode ? [{ debugName: "columns" }] : []));
-        this.animate = input(true, ...(ngDevMode ? [{ debugName: "animate" }] : []));
-        this.fill = input(false, ...(ngDevMode ? [{ debugName: "fill" }] : []));
-        this.linesArray = computed(() => Array.from({ length: this.lines() }), ...(ngDevMode ? [{ debugName: "linesArray" }] : []));
-        this.columnsArray = computed(() => Array.from({ length: this.columns() }), ...(ngDevMode ? [{ debugName: "columnsArray" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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: ["@keyframes shimmer{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}:host{display:block}:host.fill{height:100%}.skeleton-line,.skeleton-circle,.skeleton-rect{background-color:var(--color-gray-200, #E9ECEF);border-radius:4px}.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 ease-in-out 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:8px}.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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        this.width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        this.height = input('1em', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+        this.lines = input(1, ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
+        this.columns = input(4, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.animate = input(true, ...(ngDevMode ? [{ debugName: "animate" }] : /* istanbul ignore next */ []));
+        this.fill = input(false, ...(ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []));
+        this.linesArray = computed(() => Array.from({ length: this.lines() }), ...(ngDevMode ? [{ debugName: "linesArray" }] : /* istanbul ignore next */ []));
+        this.columnsArray = computed(() => Array.from({ length: this.columns() }), ...(ngDevMode ? [{ debugName: "columnsArray" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriSkeletonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriSkeletonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'xiri-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, 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: ["@keyframes shimmer{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}:host{display:block}:host.fill{height:100%}.skeleton-line,.skeleton-circle,.skeleton-rect{background-color:var(--color-gray-200, #E9ECEF);border-radius:4px}.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 ease-in-out 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:8px}.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"] }]
+            args: [{ selector: 'xiri-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, 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 }] }] } });
 
 class XiriCardComponent {
     constructor() {
         this.dataService = inject(XiriDataService);
         this.destroyRef = inject(DestroyRef);
-        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
-        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-        this.errorMsg = signal('', ...(ngDevMode ? [{ debugName: "errorMsg" }] : []));
-        this.isCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
-        this._data = signal(null, ...(ngDevMode ? [{ debugName: "_data" }] : []));
-        this.cardData = computed(() => this._data() ?? this.settings().data, ...(ngDevMode ? [{ debugName: "cardData" }] : []));
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.errorMsg = signal('', ...(ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []));
+        this.isCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+        this._data = signal(null, ...(ngDevMode ? [{ debugName: "_data" }] : /* istanbul ignore next */ []));
+        this.cardData = computed(() => this._data() ?? this.settings().data, ...(ngDevMode ? [{ debugName: "cardData" }] : /* istanbul ignore next */ []));
         this.rawTable = computed(() => {
             const data = this.cardData();
             if (data == null)
@@ -4236,7 +4413,7 @@ class XiriCardComponent {
                 rt.fields = fields;
             }
             return rt;
-        }, ...(ngDevMode ? [{ debugName: "rawTable" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "rawTable" }] : /* istanbul ignore next */ []));
         effect(() => {
             const s = this.settings();
             if (s.collapsed !== undefined) {
@@ -4274,10 +4451,10 @@ class XiriCardComponent {
             return;
         this.loadData();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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@if (!isCollapsed()) {\n\t\t@if (loading() && !cardData()) {\n\t\t\t<mat-card-content>\n\t\t\t\t<xiri-skeleton type=\"table-row\" [columns]=\"2\" [lines]=\"3\"></xiri-skeleton>\n\t\t\t</mat-card-content>\n\t\t} @else if (errorMsg()) {\n\t\t\t<mat-card-content>\n\t\t\t\t<div class=\"load-error\">{{ errorMsg() }}</div>\n\t\t\t</mat-card-content>\n\t\t} @else {\n\t\t\t<mat-card-content class=\"hasTable\" [style.max-height]=\"settings().maxHeight || '50vh'\">\n\t\t\t\t@if (rawTable()) {\n\t\t\t\t\t<xiri-raw-table [settings]=\"rawTable()!\"></xiri-raw-table>\n\t\t\t\t}\n\t\t\t</mat-card-content>\n\t\t}\n\t\t@if (settings().buttonsBottom) {\n\t\t\t<mat-card-actions align=\"end\">\n\t\t\t\t<xiri-buttonline [settings]=\"settings().buttonsBottom\"></xiri-buttonline>\n\t\t\t</mat-card-actions>\n\t\t}\n\t\t@else if (settings().buttons) {\n\t\t\t<mat-card-actions align=\"end\">\n\t\t\t\t<xiri-buttonline [settings]=\"{buttons: settings().buttons, class: '' }\"></xiri-buttonline>\n\t\t\t</mat-card-actions>\n\t\t}\n\t}\n</mat-card>\n", styles: [":host{animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinning{animation:spin 1s linear infinite}.card{overflow:hidden}.card mat-card-header{margin:0 0 2px;box-shadow:0 3px 2px -2px var(--outline-variant, #C2C7CF);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 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: 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: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: "component", type: XiriButtonlineComponent, selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: XiriRawTableComponent, selector: "xiri-raw-table", inputs: ["settings"] }, { kind: "component", type: XiriSkeletonComponent, selector: "xiri-skeleton", inputs: ["type", "width", "height", "lines", "columns", "animate", "fill"] }, { kind: "directive", type: MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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 {\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 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: 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: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: "component", type: XiriButtonlineComponent, selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: XiriRawTableComponent, selector: "xiri-raw-table", inputs: ["settings"] }, { kind: "component", type: XiriSkeletonComponent, selector: "xiri-skeleton", inputs: ["type", "width", "height", "lines", "columns", "animate", "fill"] }, { kind: "directive", type: MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-card', imports: [MatCard,
                         MatCardHeader,
@@ -4290,57 +4467,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         MatCardContent,
                         XiriRawTableComponent,
                         XiriSkeletonComponent,
-                        MatCardActions], changeDetection: ChangeDetectionStrategy.OnPush, 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@if (!isCollapsed()) {\n\t\t@if (loading() && !cardData()) {\n\t\t\t<mat-card-content>\n\t\t\t\t<xiri-skeleton type=\"table-row\" [columns]=\"2\" [lines]=\"3\"></xiri-skeleton>\n\t\t\t</mat-card-content>\n\t\t} @else if (errorMsg()) {\n\t\t\t<mat-card-content>\n\t\t\t\t<div class=\"load-error\">{{ errorMsg() }}</div>\n\t\t\t</mat-card-content>\n\t\t} @else {\n\t\t\t<mat-card-content class=\"hasTable\" [style.max-height]=\"settings().maxHeight || '50vh'\">\n\t\t\t\t@if (rawTable()) {\n\t\t\t\t\t<xiri-raw-table [settings]=\"rawTable()!\"></xiri-raw-table>\n\t\t\t\t}\n\t\t\t</mat-card-content>\n\t\t}\n\t\t@if (settings().buttonsBottom) {\n\t\t\t<mat-card-actions align=\"end\">\n\t\t\t\t<xiri-buttonline [settings]=\"settings().buttonsBottom\"></xiri-buttonline>\n\t\t\t</mat-card-actions>\n\t\t}\n\t\t@else if (settings().buttons) {\n\t\t\t<mat-card-actions align=\"end\">\n\t\t\t\t<xiri-buttonline [settings]=\"{buttons: settings().buttons, class: '' }\"></xiri-buttonline>\n\t\t\t</mat-card-actions>\n\t\t}\n\t}\n</mat-card>\n", styles: [":host{animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinning{animation:spin 1s linear infinite}.card{overflow:hidden}.card mat-card-header{margin:0 0 2px;box-shadow:0 3px 2px -2px var(--outline-variant, #C2C7CF);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 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"] }]
+                        MatCardActions], changeDetection: ChangeDetectionStrategy.OnPush, 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 {\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 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"] }]
         }], ctorParameters: () => [], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
 
-class XiriImagetextComponent {
-    constructor() {
-        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
-        this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriImagetextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: XiriImagetextComponent, isStandalone: true, selector: "xiri-imagetext", 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 class=\"align-items-center\">\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>{{ 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</mat-card-header>\n\t<mat-card-content>\n\t\t<mat-spinner [hidden]=\"!loading()\" diameter=\"30\"></mat-spinner>\n\t\t<img [hidden]=\"loading()\" (load)=\"loading.set(false)\" [src]=\"settings().url\" [alt]=\"settings().info\" id=\"ximg\"/>\n\t</mat-card-content>\n</mat-card>", styles: [".card{margin-bottom:2rem;text-align:center}#ximg{max-width:100%}[hidden]{display:none!important}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriImagetextComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'xiri-imagetext', imports: [MatCard,
-                        MatCardHeader,
-                        MatCardAvatar,
-                        MatIcon,
-                        MatCardTitle,
-                        MatCardSubtitle,
-                        MatCardContent,
-                        MatProgressSpinner], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t<mat-card-header class=\"align-items-center\">\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>{{ 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</mat-card-header>\n\t<mat-card-content>\n\t\t<mat-spinner [hidden]=\"!loading()\" diameter=\"30\"></mat-spinner>\n\t\t<img [hidden]=\"loading()\" (load)=\"loading.set(false)\" [src]=\"settings().url\" [alt]=\"settings().info\" id=\"ximg\"/>\n\t</mat-card-content>\n</mat-card>", styles: [".card{margin-bottom:2rem;text-align:center}#ximg{max-width:100%}[hidden]{display:none!important}\n"] }]
-        }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
-
-class XiriMultiprogressComponent {
-    constructor() {
-        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriMultiprogressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: XiriMultiprogressComponent, isStandalone: true, selector: "xiri-multiprogress", 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<div class=\"header align-items-center\">\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<span class=\"title\">{{ settings().header }}</span>\n\t\t@if (settings().show && settings().data.length > settings().show) {\n\t\t\t<span class=\"open\">\n\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            @if (isOpen()) {\n\t\t\t            <mat-icon>expand_less</mat-icon>\n\t\t            } @else {\n\t\t\t            <mat-icon>expand_more</mat-icon>\n\t\t            }\n\t\t        </button>\n            </span>\n\t\t}\n\t</div>\n\t<mat-card-content>\n\t\t@for (item of settings().data | slice:0:(isOpen() ? 999 : settings().show); track item) {\n\t\t\t<div class=\"item\">\n\t\t\t\t<div class=\"line\">\n\t\t\t\t\t<span class=\"text\">{{ item.text }}</span>\n\t\t\t\t\t<span class=\"value\">{{ item.value }}</span>\n\t\t\t\t</div>\n\t\t\t\t<mat-progress-bar mode=\"determinate\" [class]=\"item.color\" [value]=\"item.progress\" class=\"bar\"></mat-progress-bar>\n\t\t\t</div>\n\t\t}\n\t</mat-card-content>\n</mat-card>\n", styles: ["mat-card.card{padding:20px}mat-card-content{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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriMultiprogressComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'xiri-multiprogress', imports: [MatCard, MatCardAvatar, MatIcon, MatIconButton, MatCardContent, MatProgressBar, SlicePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t<div class=\"header align-items-center\">\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<span class=\"title\">{{ settings().header }}</span>\n\t\t@if (settings().show && settings().data.length > settings().show) {\n\t\t\t<span class=\"open\">\n\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            @if (isOpen()) {\n\t\t\t            <mat-icon>expand_less</mat-icon>\n\t\t            } @else {\n\t\t\t            <mat-icon>expand_more</mat-icon>\n\t\t            }\n\t\t        </button>\n            </span>\n\t\t}\n\t</div>\n\t<mat-card-content>\n\t\t@for (item of settings().data | slice:0:(isOpen() ? 999 : settings().show); track item) {\n\t\t\t<div class=\"item\">\n\t\t\t\t<div class=\"line\">\n\t\t\t\t\t<span class=\"text\">{{ item.text }}</span>\n\t\t\t\t\t<span class=\"value\">{{ item.value }}</span>\n\t\t\t\t</div>\n\t\t\t\t<mat-progress-bar mode=\"determinate\" [class]=\"item.color\" [value]=\"item.progress\" class=\"bar\"></mat-progress-bar>\n\t\t\t</div>\n\t\t}\n\t</mat-card-content>\n</mat-card>\n", styles: ["mat-card.card{padding:20px}mat-card-content{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 }] }] } });
-
 class XiriInfopointComponent {
     constructor() {
-        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriInfopointComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: XiriInfopointComponent, isStandalone: true, selector: "xiri-infopoint", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"point\" [class.isLink]=\"settings().url\" [routerLink]=\"settings().url\" [queryParams]=\"settings().urlParams\">\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-content [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<div class=\"text\">{{ settings().text }}</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"info\">{{ settings().info }}</div>\n\t\t\t</div>\n\t\t</mat-card-content>\n\t</mat-card>\n</div>", 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}.point.isLink{cursor:pointer}.point.isLink:hover mat-card{background-color:var(--surface-variant, #DEE3EB)}.right{text-align:right;flex-grow:1;display:flex;flex-direction:column;justify-content:center;padding-left:7px}.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", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriInfopointComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: XiriInfopointComponent, isStandalone: true, selector: "xiri-infopoint", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"point\" [class.isLink]=\"settings().url\" [routerLink]=\"settings().url\" [queryParams]=\"settings().urlParams\">\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-content [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<div class=\"text\">{{ settings().text }}</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"info\">{{ settings().info }}</div>\n\t\t\t</div>\n\t\t</mat-card-content>\n\t</mat-card>\n</div>", 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}.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;display:flex;flex-direction:column;justify-content:center;padding-left:7px}.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", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriInfopointComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriInfopointComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'xiri-infopoint', imports: [RouterLink, MatCard, MatCardContent, MatIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"point\" [class.isLink]=\"settings().url\" [routerLink]=\"settings().url\" [queryParams]=\"settings().urlParams\">\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-content [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<div class=\"text\">{{ settings().text }}</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"info\">{{ settings().info }}</div>\n\t\t\t</div>\n\t\t</mat-card-content>\n\t</mat-card>\n</div>", 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}.point.isLink{cursor:pointer}.point.isLink:hover mat-card{background-color:var(--surface-variant, #DEE3EB)}.right{text-align:right;flex-grow:1;display:flex;flex-direction:column;justify-content:center;padding-left:7px}.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"] }]
+            args: [{ selector: 'xiri-infopoint', imports: [RouterLink, MatCard, MatCardContent, MatIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"point\" [class.isLink]=\"settings().url\" [routerLink]=\"settings().url\" [queryParams]=\"settings().urlParams\">\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-content [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<div class=\"text\">{{ settings().text }}</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"info\">{{ settings().info }}</div>\n\t\t\t</div>\n\t\t</mat-card-content>\n\t</mat-card>\n</div>", 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}.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;display:flex;flex-direction:column;justify-content:center;padding-left:7px}.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 }] }] } });
 
 class XiriListComponent {
     constructor() {
-        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
         this.dataService = inject(XiriDataService);
         this.destroyRef = inject(DestroyRef);
     }
@@ -4351,10 +4495,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: "21.2.1", ngImport: i0, type: XiriListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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<a mat-list-item [routerLink]=\"item.url\" 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\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:8px}.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: 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: 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", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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<a mat-list-item [routerLink]=\"item.url\" 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\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", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-list', imports: [
                         MatListSubheaderCssMatStyler,
@@ -4370,17 +4514,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         MatListItemMeta,
                         MatIconButton,
                         MatTooltip,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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<a mat-list-item [routerLink]=\"item.url\" 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\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:8px}.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: 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: gray}.card .list-fav mat-icon.accent{--mat-icon-color: var(--secondary, #6750A4)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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<a mat-list-item [routerLink]=\"item.url\" 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\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"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
 
 class XiriHeaderComponent {
     constructor() {
-        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.2", 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-header', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, 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 }] }] } });
@@ -4391,11 +4535,11 @@ class XiriStepperComponent {
         this.location = inject(Location);
         this.router = inject(Router);
         this.destroyRef = inject(DestroyRef);
-        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
-        this.done = signal(false, ...(ngDevMode ? [{ debugName: "done" }] : []));
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        this.done = signal(false, ...(ngDevMode ? [{ debugName: "done" }] : /* istanbul ignore next */ []));
         this.calls = [];
         this.stepper = viewChild.required(MatStepper);
-        this.steps = signal([], ...(ngDevMode ? [{ debugName: "steps" }] : []));
+        this.steps = signal([], ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         const steps = [];
@@ -4555,10 +4699,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: "21.2.1", ngImport: i0, type: XiriStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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-horizontal-stepper [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-horizontal-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:.5rem 0}.xrow{padding-top:1rem}.checking{padding:1rem .5rem;display:flex;justify-content:flex-end}.buttons{padding-top:1rem;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", "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"] }, { kind: "component", type: XiriDoneComponent, selector: "xiri-done" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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-horizontal-stepper [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-horizontal-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", "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"] }, { kind: "component", type: XiriDoneComponent, selector: "xiri-done" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriStepperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriStepperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-stepper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatStepper,
                         MatStep,
@@ -4566,12 +4710,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         XiriFormFieldsComponent,
                         XiriErrorComponent,
                         XiriButtonstyleComponent,
-                        XiriDoneComponent], template: "<mat-horizontal-stepper [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-horizontal-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:.5rem 0}.xrow{padding-top:1rem}.checking{padding:1rem .5rem;display:flex;justify-content:flex-end}.buttons{padding-top:1rem;display:flex;justify-content:space-between}.done{font-size:3rem;display:flex;justify-content:center}[hidden]{display:none!important}\n"] }]
+                        XiriDoneComponent], template: "<mat-horizontal-stepper [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-horizontal-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"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }], stepper: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatStepper), { isSignal: true }] }] } });
 
 class XiriLinksComponent {
     constructor() {
-        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
         this.dialog = inject(MatDialog);
         this.router = inject(Router);
     }
@@ -4595,10 +4739,10 @@ class XiriLinksComponent {
         });
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriLinksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: XiriLinksComponent, isStandalone: true, selector: "xiri-links", 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().headerSub) {\n\t\t\t<mat-card-subtitle>{{ settings().headerSub }}</mat-card-subtitle>\n\t\t}\n\t\t@if (settings().header) {\n\t\t\t<mat-card-title>{{ settings().header }}</mat-card-title>\n\t\t}\n\t</mat-card-header>\n\t<mat-card-content>\n\t\t<mat-nav-list>\n\t\t\t@for (item of settings().data; track item) {\n\t\t\t\t@if (!item.action || item.action == 'link') {\n\t\t\t\t\t<a mat-list-item [routerLink]=\"item.url\">\n\t\t\t\t\t\t<div matLine>{{ item.text }}</div>\n\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t<button mat-icon-button [attr.aria-label]=\"item.text\">\n\t\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</a>\n\t\t\t\t} @else if (item.action == 'dialog') {\n\t\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\t<div matLine>{{ item.text }}</div>\n\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t<button mat-icon-button [attr.aria-label]=\"item.text\">\n\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</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</mat-list-item>\n\t\t\t\t}\n\t\t\t}\n\t\t</mat-nav-list>\n\t</mat-card-content>\n</mat-card>\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}mat-card mat-nav-list .mat-mdc-list-item div.mat-list-item-content{padding:0 8px}\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: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MatLine, selector: "[mat-line], [matLine]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriLinksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: XiriLinksComponent, isStandalone: true, selector: "xiri-links", 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().headerSub) {\n\t\t\t<mat-card-subtitle>{{ settings().headerSub }}</mat-card-subtitle>\n\t\t}\n\t\t@if (settings().header) {\n\t\t\t<mat-card-title>{{ settings().header }}</mat-card-title>\n\t\t}\n\t</mat-card-header>\n\t<mat-card-content>\n\t\t<mat-nav-list>\n\t\t\t@for (item of settings().data; track item) {\n\t\t\t\t@if (!item.action || item.action == 'link') {\n\t\t\t\t\t<a mat-list-item [routerLink]=\"item.url\">\n\t\t\t\t\t\t<div matLine>{{ item.text }}</div>\n\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t<button mat-icon-button [attr.aria-label]=\"item.text\">\n\t\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</a>\n\t\t\t\t} @else if (item.action == 'dialog') {\n\t\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\t<div matLine>{{ item.text }}</div>\n\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t<button mat-icon-button [attr.aria-label]=\"item.text\">\n\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</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</mat-list-item>\n\t\t\t\t}\n\t\t\t}\n\t\t</mat-nav-list>\n\t</mat-card-content>\n</mat-card>\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}\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: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MatLine, selector: "[mat-line], [matLine]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriLinksComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriLinksComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-links', imports: [MatCard,
                         MatCardHeader,
@@ -4611,17 +4755,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         MatListItem,
                         RouterLink,
                         MatLine,
-                        MatIconButton], changeDetection: ChangeDetectionStrategy.OnPush, 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().headerSub) {\n\t\t\t<mat-card-subtitle>{{ settings().headerSub }}</mat-card-subtitle>\n\t\t}\n\t\t@if (settings().header) {\n\t\t\t<mat-card-title>{{ settings().header }}</mat-card-title>\n\t\t}\n\t</mat-card-header>\n\t<mat-card-content>\n\t\t<mat-nav-list>\n\t\t\t@for (item of settings().data; track item) {\n\t\t\t\t@if (!item.action || item.action == 'link') {\n\t\t\t\t\t<a mat-list-item [routerLink]=\"item.url\">\n\t\t\t\t\t\t<div matLine>{{ item.text }}</div>\n\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t<button mat-icon-button [attr.aria-label]=\"item.text\">\n\t\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</a>\n\t\t\t\t} @else if (item.action == 'dialog') {\n\t\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\t<div matLine>{{ item.text }}</div>\n\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t<button mat-icon-button [attr.aria-label]=\"item.text\">\n\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</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</mat-list-item>\n\t\t\t\t}\n\t\t\t}\n\t\t</mat-nav-list>\n\t</mat-card-content>\n</mat-card>\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}mat-card mat-nav-list .mat-mdc-list-item div.mat-list-item-content{padding:0 8px}\n"] }]
+                        MatIconButton], changeDetection: ChangeDetectionStrategy.OnPush, 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().headerSub) {\n\t\t\t<mat-card-subtitle>{{ settings().headerSub }}</mat-card-subtitle>\n\t\t}\n\t\t@if (settings().header) {\n\t\t\t<mat-card-title>{{ settings().header }}</mat-card-title>\n\t\t}\n\t</mat-card-header>\n\t<mat-card-content>\n\t\t<mat-nav-list>\n\t\t\t@for (item of settings().data; track item) {\n\t\t\t\t@if (!item.action || item.action == 'link') {\n\t\t\t\t\t<a mat-list-item [routerLink]=\"item.url\">\n\t\t\t\t\t\t<div matLine>{{ item.text }}</div>\n\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t<button mat-icon-button [attr.aria-label]=\"item.text\">\n\t\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</a>\n\t\t\t\t} @else if (item.action == 'dialog') {\n\t\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\t<div matLine>{{ item.text }}</div>\n\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t<button mat-icon-button [attr.aria-label]=\"item.text\">\n\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</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</mat-list-item>\n\t\t\t\t}\n\t\t\t}\n\t\t</mat-nav-list>\n\t</mat-card-content>\n</mat-card>\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}\n"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
 
 class XiriCardlinkComponent {
     constructor() {
-        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriCardlinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: XiriCardlinkComponent, isStandalone: true, selector: "xiri-cardlink", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<a [routerLink]=\"settings().link\">\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\" matRipple>\n\t\t<mat-card-header>\n\t\t\t@if (settings().icon) {\n\t\t\t\t<div mat-card-avatar>\n\t\t\t\t\t<mat-icon [fontSet]=\"settings().iconSet\">{{ settings().icon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (settings().text) {\n\t\t\t\t<mat-card-title>{{ settings().text }}</mat-card-title>\n\t\t\t}\n\t\t\t@if (settings().sub) {\n\t\t\t\t<mat-card-subtitle>{{ settings().sub }}</mat-card-subtitle>\n\t\t\t}\n\t\t</mat-card-header>\n\t</mat-card>\n</a>\n", styles: [":host{margin-bottom:2rem}mat-card: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", "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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriCardlinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: XiriCardlinkComponent, isStandalone: true, selector: "xiri-cardlink", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<a [routerLink]=\"settings().link\">\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\" matRipple>\n\t\t<mat-card-header>\n\t\t\t@if (settings().icon) {\n\t\t\t\t<div mat-card-avatar>\n\t\t\t\t\t<mat-icon [fontSet]=\"settings().iconSet\">{{ settings().icon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (settings().text) {\n\t\t\t\t<mat-card-title>{{ settings().text }}</mat-card-title>\n\t\t\t}\n\t\t\t@if (settings().sub) {\n\t\t\t\t<mat-card-subtitle>{{ settings().sub }}</mat-card-subtitle>\n\t\t\t}\n\t\t</mat-card-header>\n\t</mat-card>\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)}.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", "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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriCardlinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriCardlinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-cardlink', imports: [RouterLink,
                         MatCard,
@@ -4630,16 +4774,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         MatCardAvatar,
                         MatIcon,
                         MatCardTitle,
-                        MatCardSubtitle], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a [routerLink]=\"settings().link\">\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\" matRipple>\n\t\t<mat-card-header>\n\t\t\t@if (settings().icon) {\n\t\t\t\t<div mat-card-avatar>\n\t\t\t\t\t<mat-icon [fontSet]=\"settings().iconSet\">{{ settings().icon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (settings().text) {\n\t\t\t\t<mat-card-title>{{ settings().text }}</mat-card-title>\n\t\t\t}\n\t\t\t@if (settings().sub) {\n\t\t\t\t<mat-card-subtitle>{{ settings().sub }}</mat-card-subtitle>\n\t\t\t}\n\t\t</mat-card-header>\n\t</mat-card>\n</a>\n", styles: [":host{margin-bottom:2rem}mat-card: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"] }]
+                        MatCardSubtitle], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a [routerLink]=\"settings().link\">\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\" matRipple>\n\t\t<mat-card-header>\n\t\t\t@if (settings().icon) {\n\t\t\t\t<div mat-card-avatar>\n\t\t\t\t\t<mat-icon [fontSet]=\"settings().iconSet\">{{ settings().icon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (settings().text) {\n\t\t\t\t<mat-card-title>{{ settings().text }}</mat-card-title>\n\t\t\t}\n\t\t\t@if (settings().sub) {\n\t\t\t\t<mat-card-subtitle>{{ settings().sub }}</mat-card-subtitle>\n\t\t\t}\n\t\t</mat-card-header>\n\t</mat-card>\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)}.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"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
 
 class XiriTabsComponent {
     constructor() {
-        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
-        this.filterData = input(undefined, ...(ngDevMode ? [{ debugName: "filterData" }] : []));
-        this.dyncomponent = input(...(ngDevMode ? [undefined, { debugName: "dyncomponent" }] : []));
-        this.selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
-        this.visitedTabs = signal(new Set([0]), ...(ngDevMode ? [{ debugName: "visitedTabs" }] : []));
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        this.filterData = input(undefined, ...(ngDevMode ? [{ debugName: "filterData" }] : /* istanbul ignore next */ []));
+        this.dyncomponent = input(...(ngDevMode ? [undefined, { debugName: "dyncomponent" }] : /* istanbul ignore next */ []));
+        this.selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+        this.visitedTabs = signal(new Set([0]), ...(ngDevMode ? [{ debugName: "visitedTabs" }] : /* istanbul ignore next */ []));
         effect(() => {
             const idx = this.settings().selectedIndex ?? 0;
             this.selectedIndex.set(idx);
@@ -4669,10 +4813,10 @@ class XiriTabsComponent {
             return true;
         return this.visitedTabs().has(index);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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}::ng-deep .mat-mdc-tab-body-content{padding:16px}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-tabs', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatTabGroup,
@@ -4680,16 +4824,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         MatTabLabel,
                         MatIcon,
                         NgTemplateOutlet
-                    ], 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}::ng-deep .mat-mdc-tab-body-content{padding:16px}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }], filterData: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterData", required: false }] }], dyncomponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "dyncomponent", required: false }] }] } });
 
 class XiriExpansionComponent {
     constructor() {
-        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
-        this.filterData = input(undefined, ...(ngDevMode ? [{ debugName: "filterData" }] : []));
-        this.dyncomponent = input(...(ngDevMode ? [undefined, { debugName: "dyncomponent" }] : []));
-        this.openedPanels = signal(new Set(), ...(ngDevMode ? [{ debugName: "openedPanels" }] : []));
-        this.visitedPanels = signal(new Set(), ...(ngDevMode ? [{ debugName: "visitedPanels" }] : []));
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        this.filterData = input(undefined, ...(ngDevMode ? [{ debugName: "filterData" }] : /* istanbul ignore next */ []));
+        this.dyncomponent = input(...(ngDevMode ? [undefined, { debugName: "dyncomponent" }] : /* istanbul ignore next */ []));
+        this.openedPanels = signal(new Set(), ...(ngDevMode ? [{ debugName: "openedPanels" }] : /* istanbul ignore next */ []));
+        this.visitedPanels = signal(new Set(), ...(ngDevMode ? [{ debugName: "visitedPanels" }] : /* istanbul ignore next */ []));
     }
     onPanelOpened(index) {
         this.openedPanels.update(set => {
@@ -4721,10 +4865,10 @@ class XiriExpansionComponent {
             return true;
         return this.visitedPanels().has(index);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriExpansionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriExpansionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriExpansionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriExpansionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-expansion', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatAccordion,
@@ -4739,45 +4883,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 
 class XiriStatComponent {
     constructor() {
-        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriStatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: XiriStatComponent, isStandalone: true, selector: "xiri-stat", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-card class=\"stat-card mat-mdc-elevation-specific mat-elevation-z2\">\n\t<mat-card-content>\n\t\t<div class=\"stat-content\">\n\t\t\t@if (settings().icon) {\n\t\t\t\t<div class=\"stat-icon\">\n\t\t\t\t\t<mat-icon [class]=\"settings().iconColor || 'primary'\">{{ settings().icon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div class=\"stat-data\">\n\t\t\t\t<div class=\"stat-value\" [class]=\"settings().color || ''\">\n\t\t\t\t\t@if (settings().prefix) {\n\t\t\t\t\t\t<span class=\"prefix\">{{ settings().prefix }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t{{ settings().value }}\n\t\t\t\t\t@if (settings().suffix) {\n\t\t\t\t\t\t<span class=\"suffix\">{{ settings().suffix }}</span>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t\t<div class=\"stat-label\">{{ settings().label }}</div>\n\t\t\t</div>\n\t\t\t@if (settings().trend) {\n\t\t\t\t<div class=\"stat-trend\" [class]=\"settings().trend.direction\">\n\t\t\t\t\t<mat-icon>\n\t\t\t\t\t\t@switch (settings().trend.direction) {\n\t\t\t\t\t\t\t@case ('up') { trending_up }\n\t\t\t\t\t\t\t@case ('down') { trending_down }\n\t\t\t\t\t\t\t@default { trending_flat }\n\t\t\t\t\t\t}\n\t\t\t\t\t</mat-icon>\n\t\t\t\t\t<span>{{ settings().trend.value > 0 ? '+' : '' }}{{ settings().trend.value }}%</span>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</mat-card-content>\n</mat-card>\n", styles: ["@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}:host{display:block;animation:scaleIn .2s ease-out}.stat-card{padding:0}.stat-card mat-card-content{padding:1rem 1.25rem}.stat-content{display:flex;align-items:center;gap:1rem;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:0}.stat-value{font-size:1.75rem;font-weight:600;line-height:1.2;color:var(--on-surface, #1B1B1F);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stat-value .prefix,.stat-value .suffix{font-size:1rem;font-weight:400;opacity:.7}.stat-label{font-size:.875rem;color:var(--on-surface-variant, #44474F);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:.875rem;font-weight:500;padding:4px 8px;border-radius:4px}.stat-trend mat-icon{font-size:18px;width:18px;height:18px}.stat-trend.up{color:var(--color-success, #2ECC71);background-color:#2ecc711a}.stat-trend.down{color:var(--error, #E74C3C);background-color:#e74c3c1a}.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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriStatComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'xiri-stat', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, MatCard, MatCardContent], template: "<mat-card class=\"stat-card mat-mdc-elevation-specific mat-elevation-z2\">\n\t<mat-card-content>\n\t\t<div class=\"stat-content\">\n\t\t\t@if (settings().icon) {\n\t\t\t\t<div class=\"stat-icon\">\n\t\t\t\t\t<mat-icon [class]=\"settings().iconColor || 'primary'\">{{ settings().icon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div class=\"stat-data\">\n\t\t\t\t<div class=\"stat-value\" [class]=\"settings().color || ''\">\n\t\t\t\t\t@if (settings().prefix) {\n\t\t\t\t\t\t<span class=\"prefix\">{{ settings().prefix }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t{{ settings().value }}\n\t\t\t\t\t@if (settings().suffix) {\n\t\t\t\t\t\t<span class=\"suffix\">{{ settings().suffix }}</span>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t\t<div class=\"stat-label\">{{ settings().label }}</div>\n\t\t\t</div>\n\t\t\t@if (settings().trend) {\n\t\t\t\t<div class=\"stat-trend\" [class]=\"settings().trend.direction\">\n\t\t\t\t\t<mat-icon>\n\t\t\t\t\t\t@switch (settings().trend.direction) {\n\t\t\t\t\t\t\t@case ('up') { trending_up }\n\t\t\t\t\t\t\t@case ('down') { trending_down }\n\t\t\t\t\t\t\t@default { trending_flat }\n\t\t\t\t\t\t}\n\t\t\t\t\t</mat-icon>\n\t\t\t\t\t<span>{{ settings().trend.value > 0 ? '+' : '' }}{{ settings().trend.value }}%</span>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</mat-card-content>\n</mat-card>\n", styles: ["@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}:host{display:block;animation:scaleIn .2s ease-out}.stat-card{padding:0}.stat-card mat-card-content{padding:1rem 1.25rem}.stat-content{display:flex;align-items:center;gap:1rem;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:0}.stat-value{font-size:1.75rem;font-weight:600;line-height:1.2;color:var(--on-surface, #1B1B1F);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stat-value .prefix,.stat-value .suffix{font-size:1rem;font-weight:400;opacity:.7}.stat-label{font-size:.875rem;color:var(--on-surface-variant, #44474F);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:.875rem;font-weight:500;padding:4px 8px;border-radius:4px}.stat-trend mat-icon{font-size:18px;width:18px;height:18px}.stat-trend.up{color:var(--color-success, #2ECC71);background-color:#2ecc711a}.stat-trend.down{color:var(--error, #E74C3C);background-color:#e74c3c1a}.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 }] }] } });
-
-class XiriTimelineComponent {
-    constructor() {
-        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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\">\n\t@for (item of settings().items; track $index; let last = $last) {\n\t\t<div class=\"timeline-item\" [class.last]=\"last\">\n\t\t\t<div class=\"timeline-marker\">\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@if (!last) {\n\t\t\t\t\t<div class=\"timeline-line\"></div>\n\t\t\t\t}\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) {\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: [".timeline{display:flex;flex-direction:column}.timeline-item{display:flex;gap:1rem}.timeline-item.last .timeline-marker .timeline-line{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:#fff}.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:1.5rem;background:var(--mat-sys-outline-variant, rgba(0, 0, 0, .12))}.timeline-content{padding-bottom:1.5rem;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(--mat-sys-on-surface, rgba(0, 0, 0, .87))}.timeline-datetime{font-size:var(--xiri-font-size-helper, .75rem);color: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(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));line-height:1.5}\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: "21.2.2", ngImport: i0, type: XiriStatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: XiriStatComponent, isStandalone: true, selector: "xiri-stat", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-card class=\"stat-card mat-mdc-elevation-specific mat-elevation-z2\">\n\t<mat-card-content>\n\t\t<div class=\"stat-content\">\n\t\t\t@if (settings().icon) {\n\t\t\t\t<div class=\"stat-icon\">\n\t\t\t\t\t<mat-icon [class]=\"settings().iconColor || 'primary'\">{{ settings().icon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div class=\"stat-data\">\n\t\t\t\t<div class=\"stat-value\" [class]=\"settings().color || ''\">\n\t\t\t\t\t@if (settings().prefix) {\n\t\t\t\t\t\t<span class=\"prefix\">{{ settings().prefix }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t{{ settings().value }}\n\t\t\t\t\t@if (settings().suffix) {\n\t\t\t\t\t\t<span class=\"suffix\">{{ settings().suffix }}</span>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t\t<div class=\"stat-label\">{{ settings().label }}</div>\n\t\t\t</div>\n\t\t\t@if (settings().trend) {\n\t\t\t\t<div class=\"stat-trend\" [class]=\"settings().trend.direction\">\n\t\t\t\t\t<mat-icon>\n\t\t\t\t\t\t@switch (settings().trend.direction) {\n\t\t\t\t\t\t\t@case ('up') { trending_up }\n\t\t\t\t\t\t\t@case ('down') { trending_down }\n\t\t\t\t\t\t\t@default { trending_flat }\n\t\t\t\t\t\t}\n\t\t\t\t\t</mat-icon>\n\t\t\t\t\t<span>{{ settings().trend.value > 0 ? '+' : '' }}{{ settings().trend.value }}%</span>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</mat-card-content>\n</mat-card>\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)}.stat-content{display:flex;align-items:center;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:0}.stat-value{font-size:1.75rem;font-weight:600;line-height:1.2;color:var(--on-surface, #1B1B1F);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-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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriTimelineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriStatComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'xiri-timeline', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon], template: "<div class=\"timeline\">\n\t@for (item of settings().items; track $index; let last = $last) {\n\t\t<div class=\"timeline-item\" [class.last]=\"last\">\n\t\t\t<div class=\"timeline-marker\">\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@if (!last) {\n\t\t\t\t\t<div class=\"timeline-line\"></div>\n\t\t\t\t}\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) {\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: [".timeline{display:flex;flex-direction:column}.timeline-item{display:flex;gap:1rem}.timeline-item.last .timeline-marker .timeline-line{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:#fff}.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:1.5rem;background:var(--mat-sys-outline-variant, rgba(0, 0, 0, .12))}.timeline-content{padding-bottom:1.5rem;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(--mat-sys-on-surface, rgba(0, 0, 0, .87))}.timeline-datetime{font-size:var(--xiri-font-size-helper, .75rem);color: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(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));line-height:1.5}\n"] }]
-        }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
-
-class XiriPageHeaderComponent {
-    constructor() {
-        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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:1.7rem;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:.25rem 0 0}.page-header .page-header-icon mat-icon{font-size:1.7rem;width:1.7rem;height:1.7rem}.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriPageHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'xiri-page-header', changeDetection: ChangeDetectionStrategy.OnPush, 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:1.7rem;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:.25rem 0 0}.page-header .page-header-icon mat-icon{font-size:1.7rem;width:1.7rem;height:1.7rem}.page-header .page-header-content{display:flex;align-items:center;gap:var(--xiri-spacing-md, 1rem)}\n"] }]
+            args: [{ selector: 'xiri-stat', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, MatCard, MatCardContent], template: "<mat-card class=\"stat-card mat-mdc-elevation-specific mat-elevation-z2\">\n\t<mat-card-content>\n\t\t<div class=\"stat-content\">\n\t\t\t@if (settings().icon) {\n\t\t\t\t<div class=\"stat-icon\">\n\t\t\t\t\t<mat-icon [class]=\"settings().iconColor || 'primary'\">{{ settings().icon }}</mat-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div class=\"stat-data\">\n\t\t\t\t<div class=\"stat-value\" [class]=\"settings().color || ''\">\n\t\t\t\t\t@if (settings().prefix) {\n\t\t\t\t\t\t<span class=\"prefix\">{{ settings().prefix }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t{{ settings().value }}\n\t\t\t\t\t@if (settings().suffix) {\n\t\t\t\t\t\t<span class=\"suffix\">{{ settings().suffix }}</span>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t\t<div class=\"stat-label\">{{ settings().label }}</div>\n\t\t\t</div>\n\t\t\t@if (settings().trend) {\n\t\t\t\t<div class=\"stat-trend\" [class]=\"settings().trend.direction\">\n\t\t\t\t\t<mat-icon>\n\t\t\t\t\t\t@switch (settings().trend.direction) {\n\t\t\t\t\t\t\t@case ('up') { trending_up }\n\t\t\t\t\t\t\t@case ('down') { trending_down }\n\t\t\t\t\t\t\t@default { trending_flat }\n\t\t\t\t\t\t}\n\t\t\t\t\t</mat-icon>\n\t\t\t\t\t<span>{{ settings().trend.value > 0 ? '+' : '' }}{{ settings().trend.value }}%</span>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</mat-card-content>\n</mat-card>\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)}.stat-content{display:flex;align-items:center;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:0}.stat-value{font-size:1.75rem;font-weight:600;line-height:1.2;color:var(--on-surface, #1B1B1F);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-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 }] }] } });
 
 class XiriSectionComponent {
     constructor() {
-        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
-        this.dyncomponent = input(...(ngDevMode ? [undefined, { debugName: "dyncomponent" }] : []));
-        this.collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        this.dyncomponent = input(...(ngDevMode ? [undefined, { debugName: "dyncomponent" }] : /* istanbul ignore next */ []));
+        this.collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         if (this.settings().collapsed) {
@@ -4787,81 +4907,19 @@ class XiriSectionComponent {
     toggle() {
         this.collapsed.update(v => !v);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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     (click)=\"settings().collapsible && toggle()\">\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@if (!collapsed()) {\n\t\t<div class=\"section-content\">\n\t\t\t<ng-content></ng-content>\n\t\t\t@if (settings().components) {\n\t\t\t\t<xiri-dyncomponent [data]=\"settings().components!\" [dyncomponent]=\"dyncomponent()\" class=\"xrow\"></xiri-dyncomponent>\n\t\t\t}\n\t\t</div>\n\t}\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 .2s ease}.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 .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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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     (click)=\"settings().collapsible && toggle()\">\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'xiri-section', changeDetection: ChangeDetectionStrategy.OnPush, 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     (click)=\"settings().collapsible && toggle()\">\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@if (!collapsed()) {\n\t\t<div class=\"section-content\">\n\t\t\t<ng-content></ng-content>\n\t\t\t@if (settings().components) {\n\t\t\t\t<xiri-dyncomponent [data]=\"settings().components!\" [dyncomponent]=\"dyncomponent()\" class=\"xrow\"></xiri-dyncomponent>\n\t\t\t}\n\t\t</div>\n\t}\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 .2s ease}.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 .section-content{padding-top:var(--xiri-spacing-md, 1rem)}\n"] }]
+            args: [{ selector: 'xiri-section', changeDetection: ChangeDetectionStrategy.OnPush, 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     (click)=\"settings().collapsible && toggle()\">\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"] }]
         }], ctorParameters: () => [], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }], dyncomponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "dyncomponent", required: false }] }] } });
 
-class XiriDividerComponent {
-    constructor() {
-        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriDividerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'xiri-divider', changeDetection: ChangeDetectionStrategy.OnPush, 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 }] }] } });
-
-class XiriStatGridComponent {
-    constructor() {
-        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriStatGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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)}.stat-grid{display:grid;grid-template-columns:repeat(var(--stat-cols, 4),minmax(0,1fr));gap:var(--xiri-spacing-md)}@media(max-width:992px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:576px){.stat-grid{grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "component", type: XiriStatComponent, selector: "xiri-stat", inputs: ["settings"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriStatGridComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'xiri-stat-grid', changeDetection: ChangeDetectionStrategy.OnPush, 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)}.stat-grid{display:grid;grid-template-columns:repeat(var(--stat-cols, 4),minmax(0,1fr));gap:var(--xiri-spacing-md)}@media(max-width:992px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:576px){.stat-grid{grid-template-columns:minmax(0,1fr)}}\n"] }]
-        }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
-
-class XiriToolbarComponent {
-    constructor() {
-        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
-        this.filterData = input(undefined, ...(ngDevMode ? [{ debugName: "filterData" }] : []));
-        this.searchChanged = output();
-        this.searchPlaceholder = computed(() => {
-            const search = this.settings().search;
-            if (typeof search === 'object' && search?.placeholder) {
-                return search.placeholder;
-            }
-            return '';
-        }, ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriToolbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'xiri-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }] } });
-
-class XiriDescriptionListComponent {
-    constructor() {
-        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
-        this.layoutClass = computed(() => {
-            const s = this.settings();
-            const layout = s.layout || 'stacked';
-            return `${layout} cols-${s.columns || 2}`;
-        }, ...(ngDevMode ? [{ debugName: "layoutClass" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriDescriptionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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:.25rem;font-size:var(--xiri-font-size-label);color:var(--on-surface-variant);margin-bottom:.25rem}.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:4px;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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriDescriptionListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'xiri-description-list', changeDetection: ChangeDetectionStrategy.OnPush, 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:.25rem;font-size:var(--xiri-font-size-label);color:var(--on-surface-variant);margin-bottom:.25rem}.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:4px;font-size:var(--xiri-font-size-label)}\n"] }]
-        }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
-
 class XiriDynComponentComponent {
     constructor() {
-        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
-        this.filterData = input(undefined, ...(ngDevMode ? [{ debugName: "filterData" }] : []));
-        this.dyncomponent = input(...(ngDevMode ? [undefined, { debugName: "dyncomponent" }] : []));
+        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.filterData = input(undefined, ...(ngDevMode ? [{ debugName: "filterData" }] : /* istanbul ignore next */ []));
+        this.dyncomponent = input(...(ngDevMode ? [undefined, { debugName: "dyncomponent" }] : /* istanbul ignore next */ []));
         this.dataInt = computed(() => {
             let data = this.data();
             if (data === undefined || data === null)
@@ -4873,44 +4931,44 @@ class XiriDynComponentComponent {
                     d.id = Math.floor(Math.random() * 1000000);
                 return d;
             });
-        }, ...(ngDevMode ? [{ debugName: "dataInt" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "dataInt" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriDynComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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=\"xcol xcol-md-6 xcol-xl-4\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-card [settings]=\"obj.data\"></xiri-card>\n\t\t\t</div>\n\t\t}\n\t\t@case ('buttonline') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-buttonline [settings]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-table [settings]=\"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=\"xcol xcol-md-4 xcol-lg-3\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-cardlink [settings]=\"obj.data\"></xiri-cardlink>\n\t\t\t</div>\n\t\t}\n\t\t@case ('links') {\n\t\t\t<div class=\"xcol xcol-md-4 xcol-lg-3\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-links [settings]=\"obj.data\"></xiri-links>\n\t\t\t</div>\n\t\t}\n\t\t@case ('form') {\n\t\t\t<div class=\"xcol form\" [class]=\"obj.display\" [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 (obj.data.header) {\n\t\t\t\t\t\t<mat-card-header>\n\t\t\t\t\t\t\t<mat-card-title>{{ 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]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-query [settings]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-stepper [settings]=\"obj.data\"></xiri-stepper>\n\t\t\t</div>\n\t\t}\n\t\t@case ('header') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-header [settings]=\"obj.data\"></xiri-header>\n\t\t\t</div>\n\t\t}\n\t\t@case ('list') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-list [settings]=\"obj.data\"></xiri-list>\n\t\t\t</div>\n\t\t}\n\t\t@case ('spacer') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<div class=\"spacer\" [class]=\"obj.display\">&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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t\t<xiri-dyncomponent [data]=\"obj.data\" [dyncomponent]=\"dyncomponent()\" class=\"row\"></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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-infopoint [settings]=\"obj.data\"></xiri-infopoint>\n\t\t\t</div>\n\t\t}\n\t\t@case ('multiprogress') {\n\t\t\t<div class=\"xcol xcol-md-4\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-multiprogress [settings]=\"obj.data\"></xiri-multiprogress>\n\t\t\t</div>\n\t\t}\n\t\t@case ('imagetext') {\n\t\t\t<div class=\"xcol xcol-md-4\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-imagetext [settings]=\"obj.data\"></xiri-imagetext>\n\t\t\t</div>\n\t\t}\n\t\t@case ('tabs') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-tabs [settings]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-expansion [settings]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<div class=\"infotext\">{{ obj.data.text }}</div>\n\t\t\t</div>\n\t\t}\n\t\t@case ('html') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<div class=\"html\" [innerHtml]=\"obj.data.html | safeHtml\"></div>\n\t\t\t</div>\n\t\t}\n\t\t@case ('stat') {\n\t\t\t<div class=\"xcol xcol-md-6 xcol-xl-3\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-stat [settings]=\"obj.data\"></xiri-stat>\n\t\t\t</div>\n\t\t}\n\t\t@case ('empty-state') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-empty-state [settings]=\"obj.data\"></xiri-empty-state>\n\t\t\t</div>\n\t\t}\n\t\t@case ('timeline') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-timeline [settings]=\"obj.data\"></xiri-timeline>\n\t\t\t</div>\n\t\t}\n\t\t@case ('page-header') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-page-header [settings]=\"obj.data\"></xiri-page-header>\n\t\t\t</div>\n\t\t}\n\t\t@case ('section') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-section [settings]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-divider [settings]=\"obj.data\"></xiri-divider>\n\t\t\t</div>\n\t\t}\n\t\t@case ('stat-grid') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-stat-grid [settings]=\"obj.data\"></xiri-stat-grid>\n\t\t\t</div>\n\t\t}\n\t\t@case ('toolbar') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-toolbar [settings]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-description-list [settings]=\"obj.data\"></xiri-description-list>\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]=\"obj.data\" [filterData]=\"obj.filterData\" [dyncomponent]=\"dyncomponent()\" class=\"xrow\"></xiri-dyncomponent>\n</ng-template>\n<ng-template #defaultComponentUnknown let-obj>\n\t<div class=\"xcol\">unknown type: {{ 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: XiriDynComponentComponent, selector: "xiri-dyncomponent", inputs: ["data", "filterData", "dyncomponent"] }, { kind: "component", type: XiriCardComponent, selector: "xiri-card", inputs: ["settings"] }, { kind: "component", type: XiriButtonlineComponent, selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "component", type: XiriTableComponent, selector: "xiri-table", inputs: ["dyncomponent", "settings", "filterData"], outputs: ["clickedRow"] }, { kind: "component", type: XiriCardlinkComponent, selector: "xiri-cardlink", inputs: ["settings"] }, { kind: "component", type: XiriLinksComponent, selector: "xiri-links", inputs: ["settings"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: XiriFormComponent, selector: "xiri-form", inputs: ["settings"] }, { kind: "component", type: XiriQueryComponent, selector: "xiri-query", inputs: ["settings", "dyncomponent"], outputs: ["change"] }, { kind: "component", type: XiriStepperComponent, selector: "xiri-stepper", inputs: ["settings"] }, { kind: "component", type: XiriHeaderComponent, selector: "xiri-header", inputs: ["settings"] }, { kind: "component", type: XiriListComponent, selector: "xiri-list", inputs: ["settings"] }, { kind: "component", type: XiriInfopointComponent, selector: "xiri-infopoint", inputs: ["settings"] }, { kind: "component", type: XiriMultiprogressComponent, selector: "xiri-multiprogress", inputs: ["settings"] }, { kind: "component", type: XiriImagetextComponent, selector: "xiri-imagetext", inputs: ["settings"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XiriTabsComponent, selector: "xiri-tabs", inputs: ["settings", "filterData", "dyncomponent"] }, { kind: "component", type: XiriExpansionComponent, selector: "xiri-expansion", inputs: ["settings", "filterData", "dyncomponent"] }, { kind: "component", type: XiriStatComponent, selector: "xiri-stat", inputs: ["settings"] }, { kind: "component", type: XiriEmptyStateComponent, selector: "xiri-empty-state", inputs: ["settings"], outputs: ["buttonResult"] }, { kind: "component", type: XiriTimelineComponent, selector: "xiri-timeline", inputs: ["settings"] }, { kind: "component", type: XiriPageHeaderComponent, selector: "xiri-page-header", inputs: ["settings"] }, { kind: "component", type: XiriSectionComponent, selector: "xiri-section", inputs: ["settings", "dyncomponent"] }, { kind: "component", type: XiriDividerComponent, selector: "xiri-divider", inputs: ["settings"] }, { kind: "component", type: XiriStatGridComponent, selector: "xiri-stat-grid", inputs: ["settings"] }, { kind: "component", type: XiriToolbarComponent, selector: "xiri-toolbar", inputs: ["settings", "filterData"], outputs: ["searchChanged"] }, { kind: "component", type: XiriDescriptionListComponent, selector: "xiri-description-list", inputs: ["settings"] }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriDynComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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=\"xcol xcol-md-6 xcol-xl-4\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-card [settings]=\"obj.data\"></xiri-card>\n\t\t\t</div>\n\t\t}\n\t\t@case ('buttonline') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-buttonline [settings]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-table [settings]=\"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=\"xcol xcol-md-4 xcol-lg-3\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-cardlink [settings]=\"obj.data\"></xiri-cardlink>\n\t\t\t</div>\n\t\t}\n\t\t@case ('links') {\n\t\t\t<div class=\"xcol xcol-md-4 xcol-lg-3\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-links [settings]=\"obj.data\"></xiri-links>\n\t\t\t</div>\n\t\t}\n\t\t@case ('form') {\n\t\t\t<div class=\"xcol form\" [class]=\"obj.display\" [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 (obj.data.header) {\n\t\t\t\t\t\t<mat-card-header>\n\t\t\t\t\t\t\t<mat-card-title>{{ 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]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-query [settings]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-stepper [settings]=\"obj.data\"></xiri-stepper>\n\t\t\t</div>\n\t\t}\n\t\t@case ('header') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-header [settings]=\"obj.data\"></xiri-header>\n\t\t\t</div>\n\t\t}\n\t\t@case ('list') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-list [settings]=\"obj.data\"></xiri-list>\n\t\t\t</div>\n\t\t}\n\t\t@case ('spacer') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<div class=\"spacer\" [class]=\"obj.display\">&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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t\t<xiri-dyncomponent [data]=\"obj.data\" [dyncomponent]=\"dyncomponent()\" class=\"row\"></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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-infopoint [settings]=\"obj.data\"></xiri-infopoint>\n\t\t\t</div>\n\t\t}\n\t\t@case ('multiprogress') {\n\t\t\t<div class=\"xcol xcol-md-4\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-multiprogress [settings]=\"obj.data\"></xiri-multiprogress> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('imagetext') {\n\t\t\t<div class=\"xcol xcol-md-4\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-imagetext [settings]=\"obj.data\"></xiri-imagetext> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('tabs') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-tabs [settings]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-expansion [settings]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<div class=\"infotext\">{{ obj.data.text }}</div>\n\t\t\t</div>\n\t\t}\n\t\t@case ('html') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<div class=\"html\" [innerHtml]=\"obj.data.html | safeHtml\"></div>\n\t\t\t</div>\n\t\t}\n\t\t@case ('stat') {\n\t\t\t<div class=\"xcol xcol-md-6 xcol-xl-4\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-stat [settings]=\"obj.data\"></xiri-stat>\n\t\t\t</div>\n\t\t}\n\t\t@case ('empty-state') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-empty-state [settings]=\"obj.data\"></xiri-empty-state>\n\t\t\t</div>\n\t\t}\n\t\t@case ('timeline') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-timeline [settings]=\"obj.data\"></xiri-timeline> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('page-header') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-page-header [settings]=\"obj.data\"></xiri-page-header> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('section') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-section [settings]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-divider [settings]=\"obj.data\"></xiri-divider> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('stat-grid') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-stat-grid [settings]=\"obj.data\"></xiri-stat-grid> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('toolbar') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-toolbar [settings]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-description-list [settings]=\"obj.data\"></xiri-description-list> }\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]=\"obj.data\" [filterData]=\"obj.filterData\" [dyncomponent]=\"dyncomponent()\" class=\"xrow\"></xiri-dyncomponent>\n</ng-template>\n<ng-template #defaultComponentUnknown let-obj>\n\t<div class=\"xcol\">unknown type: {{ 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: XiriDynComponentComponent, selector: "xiri-dyncomponent", inputs: ["data", "filterData", "dyncomponent"] }, { kind: "component", type: XiriCardComponent, selector: "xiri-card", inputs: ["settings"] }, { kind: "component", type: XiriButtonlineComponent, selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "component", type: XiriTableComponent, selector: "xiri-table", inputs: ["dyncomponent", "settings", "filterData"], outputs: ["clickedRow"] }, { kind: "component", type: XiriCardlinkComponent, selector: "xiri-cardlink", inputs: ["settings"] }, { kind: "component", type: XiriLinksComponent, selector: "xiri-links", inputs: ["settings"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: XiriFormComponent, selector: "xiri-form", inputs: ["settings"] }, { kind: "component", type: XiriQueryComponent, selector: "xiri-query", inputs: ["settings", "dyncomponent"], outputs: ["change"] }, { kind: "component", type: XiriStepperComponent, selector: "xiri-stepper", inputs: ["settings"] }, { kind: "component", type: XiriHeaderComponent, selector: "xiri-header", inputs: ["settings"] }, { kind: "component", type: XiriListComponent, selector: "xiri-list", inputs: ["settings"] }, { kind: "component", type: XiriInfopointComponent, selector: "xiri-infopoint", inputs: ["settings"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XiriTabsComponent, selector: "xiri-tabs", inputs: ["settings", "filterData", "dyncomponent"] }, { kind: "component", type: XiriExpansionComponent, selector: "xiri-expansion", inputs: ["settings", "filterData", "dyncomponent"] }, { kind: "component", type: XiriStatComponent, selector: "xiri-stat", inputs: ["settings"] }, { kind: "component", type: XiriEmptyStateComponent, selector: "xiri-empty-state", inputs: ["settings"], outputs: ["buttonResult"] }, { kind: "component", type: XiriSectionComponent, selector: "xiri-section", inputs: ["settings", "dyncomponent"] }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [Promise.resolve().then(function () { return multiprogress_component; }).then(m => m.XiriMultiprogressComponent)], () => [Promise.resolve().then(function () { return imagetext_component; }).then(m => m.XiriImagetextComponent)], () => [Promise.resolve().then(function () { return timeline_component; }).then(m => m.XiriTimelineComponent)], () => [Promise.resolve().then(function () { return pageHeader_component; }).then(m => m.XiriPageHeaderComponent)], () => [Promise.resolve().then(function () { return divider_component; }).then(m => m.XiriDividerComponent)], () => [Promise.resolve().then(function () { return statGrid_component; }).then(m => m.XiriStatGridComponent)], () => [Promise.resolve().then(function () { return toolbar_component; }).then(m => m.XiriToolbarComponent)], () => [Promise.resolve().then(function () { return descriptionList_component; }).then(m => m.XiriDescriptionListComponent)]] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriDynComponentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'xiri-dyncomponent', changeDetection: ChangeDetectionStrategy.OnPush, imports: [XiriCardComponent,
-                        XiriButtonlineComponent,
-                        XiriTableComponent,
-                        XiriCardlinkComponent,
-                        XiriLinksComponent,
-                        MatCard,
-                        MatCardHeader,
-                        MatCardTitle,
-                        MatCardContent,
-                        XiriFormComponent,
-                        XiriQueryComponent,
-                        XiriStepperComponent,
-                        XiriHeaderComponent,
-                        XiriListComponent,
-                        XiriInfopointComponent,
-                        XiriMultiprogressComponent,
-                        XiriImagetextComponent,
-                        NgTemplateOutlet,
-                        SafehtmlPipe,
-                        XiriTabsComponent,
-                        XiriExpansionComponent,
-                        XiriStatComponent,
-                        XiriEmptyStateComponent,
-                        XiriTimelineComponent,
-                        XiriPageHeaderComponent,
-                        XiriSectionComponent,
-                        XiriDividerComponent,
-                        XiriStatGridComponent,
-                        XiriToolbarComponent,
-                        XiriDescriptionListComponent], 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=\"xcol xcol-md-6 xcol-xl-4\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-card [settings]=\"obj.data\"></xiri-card>\n\t\t\t</div>\n\t\t}\n\t\t@case ('buttonline') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-buttonline [settings]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-table [settings]=\"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=\"xcol xcol-md-4 xcol-lg-3\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-cardlink [settings]=\"obj.data\"></xiri-cardlink>\n\t\t\t</div>\n\t\t}\n\t\t@case ('links') {\n\t\t\t<div class=\"xcol xcol-md-4 xcol-lg-3\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-links [settings]=\"obj.data\"></xiri-links>\n\t\t\t</div>\n\t\t}\n\t\t@case ('form') {\n\t\t\t<div class=\"xcol form\" [class]=\"obj.display\" [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 (obj.data.header) {\n\t\t\t\t\t\t<mat-card-header>\n\t\t\t\t\t\t\t<mat-card-title>{{ 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]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-query [settings]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-stepper [settings]=\"obj.data\"></xiri-stepper>\n\t\t\t</div>\n\t\t}\n\t\t@case ('header') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-header [settings]=\"obj.data\"></xiri-header>\n\t\t\t</div>\n\t\t}\n\t\t@case ('list') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-list [settings]=\"obj.data\"></xiri-list>\n\t\t\t</div>\n\t\t}\n\t\t@case ('spacer') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<div class=\"spacer\" [class]=\"obj.display\">&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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t\t<xiri-dyncomponent [data]=\"obj.data\" [dyncomponent]=\"dyncomponent()\" class=\"row\"></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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-infopoint [settings]=\"obj.data\"></xiri-infopoint>\n\t\t\t</div>\n\t\t}\n\t\t@case ('multiprogress') {\n\t\t\t<div class=\"xcol xcol-md-4\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-multiprogress [settings]=\"obj.data\"></xiri-multiprogress>\n\t\t\t</div>\n\t\t}\n\t\t@case ('imagetext') {\n\t\t\t<div class=\"xcol xcol-md-4\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-imagetext [settings]=\"obj.data\"></xiri-imagetext>\n\t\t\t</div>\n\t\t}\n\t\t@case ('tabs') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-tabs [settings]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-expansion [settings]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<div class=\"infotext\">{{ obj.data.text }}</div>\n\t\t\t</div>\n\t\t}\n\t\t@case ('html') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<div class=\"html\" [innerHtml]=\"obj.data.html | safeHtml\"></div>\n\t\t\t</div>\n\t\t}\n\t\t@case ('stat') {\n\t\t\t<div class=\"xcol xcol-md-6 xcol-xl-3\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-stat [settings]=\"obj.data\"></xiri-stat>\n\t\t\t</div>\n\t\t}\n\t\t@case ('empty-state') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-empty-state [settings]=\"obj.data\"></xiri-empty-state>\n\t\t\t</div>\n\t\t}\n\t\t@case ('timeline') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-timeline [settings]=\"obj.data\"></xiri-timeline>\n\t\t\t</div>\n\t\t}\n\t\t@case ('page-header') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-page-header [settings]=\"obj.data\"></xiri-page-header>\n\t\t\t</div>\n\t\t}\n\t\t@case ('section') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-section [settings]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-divider [settings]=\"obj.data\"></xiri-divider>\n\t\t\t</div>\n\t\t}\n\t\t@case ('stat-grid') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-stat-grid [settings]=\"obj.data\"></xiri-stat-grid>\n\t\t\t</div>\n\t\t}\n\t\t@case ('toolbar') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-toolbar [settings]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-description-list [settings]=\"obj.data\"></xiri-description-list>\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]=\"obj.data\" [filterData]=\"obj.filterData\" [dyncomponent]=\"dyncomponent()\" class=\"xrow\"></xiri-dyncomponent>\n</ng-template>\n<ng-template #defaultComponentUnknown let-obj>\n\t<div class=\"xcol\">unknown type: {{ obj.type }}</div>\n</ng-template>\n", styles: [".spacer.double{padding-top:1rem}.form mat-card-header{padding-bottom:1rem}\n"] }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], filterData: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterData", required: false }] }], dyncomponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "dyncomponent", required: false }] }] } });
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.2.2", ngImport: i0, type: XiriDynComponentComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return multiprogress_component; }).then(m => m.XiriMultiprogressComponent), Promise.resolve().then(function () { return imagetext_component; }).then(m => m.XiriImagetextComponent), Promise.resolve().then(function () { return timeline_component; }).then(m => m.XiriTimelineComponent), Promise.resolve().then(function () { return pageHeader_component; }).then(m => m.XiriPageHeaderComponent), Promise.resolve().then(function () { return divider_component; }).then(m => m.XiriDividerComponent), Promise.resolve().then(function () { return statGrid_component; }).then(m => m.XiriStatGridComponent), Promise.resolve().then(function () { return toolbar_component; }).then(m => m.XiriToolbarComponent), Promise.resolve().then(function () { return descriptionList_component; }).then(m => m.XiriDescriptionListComponent)], resolveMetadata: (XiriMultiprogressComponent, XiriImagetextComponent, XiriTimelineComponent, XiriPageHeaderComponent, XiriDividerComponent, XiriStatGridComponent, XiriToolbarComponent, XiriDescriptionListComponent) => ({ decorators: [{
+                type: Component,
+                args: [{ selector: 'xiri-dyncomponent', changeDetection: ChangeDetectionStrategy.OnPush, imports: [XiriCardComponent,
+                            XiriButtonlineComponent,
+                            XiriTableComponent,
+                            XiriCardlinkComponent,
+                            XiriLinksComponent,
+                            MatCard,
+                            MatCardHeader,
+                            MatCardTitle,
+                            MatCardContent,
+                            XiriFormComponent,
+                            XiriQueryComponent,
+                            XiriStepperComponent,
+                            XiriHeaderComponent,
+                            XiriListComponent,
+                            XiriInfopointComponent,
+                            XiriMultiprogressComponent,
+                            XiriImagetextComponent,
+                            NgTemplateOutlet,
+                            SafehtmlPipe,
+                            XiriTabsComponent,
+                            XiriExpansionComponent,
+                            XiriStatComponent,
+                            XiriEmptyStateComponent,
+                            XiriTimelineComponent,
+                            XiriPageHeaderComponent,
+                            XiriSectionComponent,
+                            XiriDividerComponent,
+                            XiriStatGridComponent,
+                            XiriToolbarComponent,
+                            XiriDescriptionListComponent], 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=\"xcol xcol-md-6 xcol-xl-4\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-card [settings]=\"obj.data\"></xiri-card>\n\t\t\t</div>\n\t\t}\n\t\t@case ('buttonline') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-buttonline [settings]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-table [settings]=\"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=\"xcol xcol-md-4 xcol-lg-3\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-cardlink [settings]=\"obj.data\"></xiri-cardlink>\n\t\t\t</div>\n\t\t}\n\t\t@case ('links') {\n\t\t\t<div class=\"xcol xcol-md-4 xcol-lg-3\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-links [settings]=\"obj.data\"></xiri-links>\n\t\t\t</div>\n\t\t}\n\t\t@case ('form') {\n\t\t\t<div class=\"xcol form\" [class]=\"obj.display\" [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 (obj.data.header) {\n\t\t\t\t\t\t<mat-card-header>\n\t\t\t\t\t\t\t<mat-card-title>{{ 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]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-query [settings]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-stepper [settings]=\"obj.data\"></xiri-stepper>\n\t\t\t</div>\n\t\t}\n\t\t@case ('header') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-header [settings]=\"obj.data\"></xiri-header>\n\t\t\t</div>\n\t\t}\n\t\t@case ('list') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-list [settings]=\"obj.data\"></xiri-list>\n\t\t\t</div>\n\t\t}\n\t\t@case ('spacer') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<div class=\"spacer\" [class]=\"obj.display\">&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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t\t<xiri-dyncomponent [data]=\"obj.data\" [dyncomponent]=\"dyncomponent()\" class=\"row\"></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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-infopoint [settings]=\"obj.data\"></xiri-infopoint>\n\t\t\t</div>\n\t\t}\n\t\t@case ('multiprogress') {\n\t\t\t<div class=\"xcol xcol-md-4\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-multiprogress [settings]=\"obj.data\"></xiri-multiprogress> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('imagetext') {\n\t\t\t<div class=\"xcol xcol-md-4\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-imagetext [settings]=\"obj.data\"></xiri-imagetext> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('tabs') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-tabs [settings]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-expansion [settings]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<div class=\"infotext\">{{ obj.data.text }}</div>\n\t\t\t</div>\n\t\t}\n\t\t@case ('html') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<div class=\"html\" [innerHtml]=\"obj.data.html | safeHtml\"></div>\n\t\t\t</div>\n\t\t}\n\t\t@case ('stat') {\n\t\t\t<div class=\"xcol xcol-md-6 xcol-xl-4\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-stat [settings]=\"obj.data\"></xiri-stat>\n\t\t\t</div>\n\t\t}\n\t\t@case ('empty-state') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-empty-state [settings]=\"obj.data\"></xiri-empty-state>\n\t\t\t</div>\n\t\t}\n\t\t@case ('timeline') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-timeline [settings]=\"obj.data\"></xiri-timeline> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('page-header') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-page-header [settings]=\"obj.data\"></xiri-page-header> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('section') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t<xiri-section [settings]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-divider [settings]=\"obj.data\"></xiri-divider> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('stat-grid') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-stat-grid [settings]=\"obj.data\"></xiri-stat-grid> }\n\t\t\t</div>\n\t\t}\n\t\t@case ('toolbar') {\n\t\t\t<div class=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-toolbar [settings]=\"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=\"xcol\" [class]=\"obj.display\" [class.xcol-start]=\"obj.newRow\">\n\t\t\t\t@defer { <xiri-description-list [settings]=\"obj.data\"></xiri-description-list> }\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]=\"obj.data\" [filterData]=\"obj.filterData\" [dyncomponent]=\"dyncomponent()\" class=\"xrow\"></xiri-dyncomponent>\n</ng-template>\n<ng-template #defaultComponentUnknown let-obj>\n\t<div class=\"xcol\">unknown type: {{ obj.type }}</div>\n</ng-template>\n", styles: [".spacer.double{padding-top:1rem}.form mat-card-header{padding-bottom:1rem}\n"] }]
+            }], ctorParameters: null, propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], filterData: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterData", required: false }] }], dyncomponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "dyncomponent", required: false }] }] } }) });
 
 class XiriAlertComponent {
     constructor() {
@@ -4918,11 +4976,11 @@ class XiriAlertComponent {
         this.initData = inject(MAT_DIALOG_DATA);
         this.breakpointObserver = inject(BreakpointObserver);
         this.destroyRef = inject(DestroyRef);
-        this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-        this.header = signal('', ...(ngDevMode ? [{ debugName: "header" }] : []));
-        this.buttons = signal([], ...(ngDevMode ? [{ debugName: "buttons" }] : []));
-        this.text = signal('', ...(ngDevMode ? [{ debugName: "text" }] : []));
-        this.icon = signal('warning', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.header = signal('', ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+        this.buttons = signal([], ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
+        this.text = signal('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        this.icon = signal('warning', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         this.breakpointObserver
@@ -4951,10 +5009,10 @@ class XiriAlertComponent {
     clickButton(button) {
         this.dialogRef.close(button);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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@if (button.default) {\n\t\t\t\t<xiri-buttonstyle [button]=\"button\" [disabled]=\"false\" (click)=\"clickButton( button )\"></xiri-buttonstyle>\n\t\t\t} @else {\n\t\t\t\t<xiri-buttonstyle [button]=\"button\" [disabled]=\"false\" (click)=\"clickButton( button )\"></xiri-buttonstyle>\n\t\t\t}\n\t\t}\n\t</mat-dialog-actions>\n}\n", styles: ["mat-spinner{margin:1rem}.content{display:flex}.content .icon{font-size:2rem;margin:1rem 0;flex-shrink:0;min-width:2rem;line-height:1}.content .text{flex-grow:1;padding:0 1rem}.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"] }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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"] }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriAlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriAlertComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-alert', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDialogTitle,
                         CdkScrollable,
@@ -4964,14 +5022,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         MatDivider,
                         MatDialogActions,
                         XiriButtonstyleComponent,
-                        SafehtmlPipe], 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@if (button.default) {\n\t\t\t\t<xiri-buttonstyle [button]=\"button\" [disabled]=\"false\" (click)=\"clickButton( button )\"></xiri-buttonstyle>\n\t\t\t} @else {\n\t\t\t\t<xiri-buttonstyle [button]=\"button\" [disabled]=\"false\" (click)=\"clickButton( button )\"></xiri-buttonstyle>\n\t\t\t}\n\t\t}\n\t</mat-dialog-actions>\n}\n", styles: ["mat-spinner{margin:1rem}.content{display:flex}.content .icon{font-size:2rem;margin:1rem 0;flex-shrink:0;min-width:2rem;line-height:1}.content .text{flex-grow:1;padding:0 1rem}.mat-mdc-dialog-actions{justify-content:space-between}\n"] }]
+                        SafehtmlPipe], 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"] }]
         }] });
 
+class XiriMultiprogressComponent {
+    constructor() {
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriMultiprogressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: XiriMultiprogressComponent, isStandalone: true, selector: "xiri-multiprogress", 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<div class=\"header align-items-center\">\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<span class=\"title\">{{ settings().header }}</span>\n\t\t@if (settings().show && settings().data.length > settings().show) {\n\t\t\t<span class=\"open\">\n\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            @if (isOpen()) {\n\t\t\t            <mat-icon>expand_less</mat-icon>\n\t\t            } @else {\n\t\t\t            <mat-icon>expand_more</mat-icon>\n\t\t            }\n\t\t        </button>\n            </span>\n\t\t}\n\t</div>\n\t<mat-card-content>\n\t\t@for (item of settings().data | slice:0:(isOpen() ? 999 : settings().show); track item) {\n\t\t\t<div class=\"item\">\n\t\t\t\t<div class=\"line\">\n\t\t\t\t\t<span class=\"text\">{{ item.text }}</span>\n\t\t\t\t\t<span class=\"value\">{{ item.value }}</span>\n\t\t\t\t</div>\n\t\t\t\t<mat-progress-bar mode=\"determinate\" [class]=\"item.color\" [value]=\"item.progress\" class=\"bar\"></mat-progress-bar>\n\t\t\t</div>\n\t\t}\n\t</mat-card-content>\n</mat-card>\n", styles: ["mat-card.card{padding:20px}mat-card-content{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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriMultiprogressComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'xiri-multiprogress', imports: [MatCard, MatCardAvatar, MatIcon, MatIconButton, MatCardContent, MatProgressBar, SlicePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t<div class=\"header align-items-center\">\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<span class=\"title\">{{ settings().header }}</span>\n\t\t@if (settings().show && settings().data.length > settings().show) {\n\t\t\t<span class=\"open\">\n\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            @if (isOpen()) {\n\t\t\t            <mat-icon>expand_less</mat-icon>\n\t\t            } @else {\n\t\t\t            <mat-icon>expand_more</mat-icon>\n\t\t            }\n\t\t        </button>\n            </span>\n\t\t}\n\t</div>\n\t<mat-card-content>\n\t\t@for (item of settings().data | slice:0:(isOpen() ? 999 : settings().show); track item) {\n\t\t\t<div class=\"item\">\n\t\t\t\t<div class=\"line\">\n\t\t\t\t\t<span class=\"text\">{{ item.text }}</span>\n\t\t\t\t\t<span class=\"value\">{{ item.value }}</span>\n\t\t\t\t</div>\n\t\t\t\t<mat-progress-bar mode=\"determinate\" [class]=\"item.color\" [value]=\"item.progress\" class=\"bar\"></mat-progress-bar>\n\t\t\t</div>\n\t\t}\n\t</mat-card-content>\n</mat-card>\n", styles: ["mat-card.card{padding:20px}mat-card-content{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 }] }] } });
+
+var multiprogress_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    XiriMultiprogressComponent: XiriMultiprogressComponent
+});
+
+class XiriImagetextComponent {
+    constructor() {
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriImagetextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: XiriImagetextComponent, isStandalone: true, selector: "xiri-imagetext", 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 class=\"align-items-center\">\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>{{ 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</mat-card-header>\n\t<mat-card-content>\n\t\t<mat-spinner [hidden]=\"!loading()\" diameter=\"30\"></mat-spinner>\n\t\t<img [hidden]=\"loading()\" (load)=\"loading.set(false)\" [src]=\"settings().url\" [alt]=\"settings().info\" id=\"ximg\"/>\n\t</mat-card-content>\n</mat-card>", styles: [".card{margin-bottom:2rem;text-align:center}#ximg{max-width:100%}[hidden]{display:none!important}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriImagetextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'xiri-imagetext', imports: [MatCard,
+                        MatCardHeader,
+                        MatCardAvatar,
+                        MatIcon,
+                        MatCardTitle,
+                        MatCardSubtitle,
+                        MatCardContent,
+                        MatProgressSpinner], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t<mat-card-header class=\"align-items-center\">\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>{{ 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</mat-card-header>\n\t<mat-card-content>\n\t\t<mat-spinner [hidden]=\"!loading()\" diameter=\"30\"></mat-spinner>\n\t\t<img [hidden]=\"loading()\" (load)=\"loading.set(false)\" [src]=\"settings().url\" [alt]=\"settings().info\" id=\"ximg\"/>\n\t</mat-card-content>\n</mat-card>", styles: [".card{margin-bottom:2rem;text-align:center}#ximg{max-width:100%}[hidden]{display:none!important}\n"] }]
+        }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
+
+var imagetext_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    XiriImagetextComponent: XiriImagetextComponent
+});
+
 class XiriSidenavComponent {
     constructor() {
         this.router = inject(Router);
         this.cdr = inject(ChangeDetectorRef);
-        this.settings = input(...(ngDevMode ? [undefined, { debugName: "settings" }] : []));
+        this.settings = input(...(ngDevMode ? [undefined, { debugName: "settings" }] : /* istanbul ignore next */ []));
         this.loading = true;
         this.fields = [];
         this.router.events.pipe(filter$1((event) => event instanceof NavigationEnd), takeUntilDestroyed()).subscribe((route) => {
@@ -5027,10 +5128,10 @@ class XiriSidenavComponent {
         }
         this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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@if ( nav.link ) {\n\t\t<a mat-list-item [routerLink]=\"nav.link\" [class.active]=\"nav.active\">\n\t\t\t@if (nav.iconSet) {\n\t\t\t\t<mat-icon matListItemIcon [fontSet]=\"nav.iconSet\" [class]=\"nav.active ? 'primary' : 'accent'\">{{ nav.icon }}</mat-icon>\n\t\t\t} @else {\n\t\t\t\t<mat-icon matListItemIcon [class]=\"nav.active ? 'primary' : 'accent'\">{{ nav.icon }}</mat-icon>\n\t\t\t}\n\t\t\t<span matListItemTitle>{{ nav.name }}</span>\n\t\t</a>\n\t} @else if (nav.menu) {\n\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@if (nav.iconSet) {\n\t\t\t\t<mat-icon matListItemIcon [fontSet]=\"nav.iconSet\" [class]=\"nav.active ? 'primary' : 'accent'\">{{ nav.icon }}</mat-icon>\n\t\t\t} @else {\n\t\t\t\t<mat-icon matListItemIcon [class]=\"nav.active ? 'primary' : 'accent'\">{{ nav.icon }}</mat-icon>\n\t\t\t}\n\t\t\t<span matListItemTitle>{{ nav.name }}</span>\n\t\t\t<span matListItemMeta>\n\t\t\t\t<mat-icon class=\"menu-button\" [class.rotated]=\"nav.showSubmenu\">expand_more</mat-icon>\n\t\t\t</span>\n\t\t</mat-list-item>\n\t\t<div class=\"submenu\" [class.expanded]=\"nav.showSubmenu\">\n\t\t\t@for (subnav of nav.sub; track subnav) {\n\t\t\t\t@if (subnav.link) {\n\t\t\t\t\t<a mat-list-item [routerLink]=\"subnav.link\" [class.active]=\"subnav.active\">{{ subnav.name }}</a>\n\t\t\t\t} @else if (subnav.extern) {\n\t\t\t\t\t<a mat-list-item [href]=\"subnav.extern\">{{ subnav.name }}</a>\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t} @else if (nav.extern) {\n\t\t<a mat-list-item [href]=\"nav.extern\">\n\t\t\t@if (nav.iconSet) {\n\t\t\t\t<mat-icon matListItemIcon [fontSet]=\"nav.iconSet\" class=\"accent\">{{ nav.icon }}</mat-icon>\n\t\t\t} @else {\n\t\t\t\t<mat-icon matListItemIcon class=\"accent\">{{ nav.icon }}</mat-icon>\n\t\t\t}\n\t\t\t<span matListItemTitle>{{ nav.name }}</span>\n\t\t</a>\n\t}\n}\n", styles: [":host{min-width:160px}.loading{margin:1rem}.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:16px}.mat-mdc-list-item .menu-button{font-size:1.2rem;transition:.3s ease-in-out;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 .3s cubic-bezier(0,1.05,0,1);max-height:0;padding-left:2rem}.submenu.expanded{transition:max-height .3s ease;max-height:1000px}\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", "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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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@if ( nav.link ) {\n\t\t<a mat-list-item [routerLink]=\"nav.link\" [class.active]=\"nav.active\">\n\t\t\t@if (nav.iconSet) {\n\t\t\t\t<mat-icon matListItemIcon [fontSet]=\"nav.iconSet\" [class]=\"nav.active ? 'primary' : 'accent'\">{{ nav.icon }}</mat-icon>\n\t\t\t} @else {\n\t\t\t\t<mat-icon matListItemIcon [class]=\"nav.active ? 'primary' : 'accent'\">{{ nav.icon }}</mat-icon>\n\t\t\t}\n\t\t\t<span matListItemTitle>{{ nav.name }}</span>\n\t\t</a>\n\t} @else if (nav.menu) {\n\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@if (nav.iconSet) {\n\t\t\t\t<mat-icon matListItemIcon [fontSet]=\"nav.iconSet\" [class]=\"nav.active ? 'primary' : 'accent'\">{{ nav.icon }}</mat-icon>\n\t\t\t} @else {\n\t\t\t\t<mat-icon matListItemIcon [class]=\"nav.active ? 'primary' : 'accent'\">{{ nav.icon }}</mat-icon>\n\t\t\t}\n\t\t\t<span matListItemTitle>{{ nav.name }}</span>\n\t\t\t<span matListItemMeta>\n\t\t\t\t<mat-icon class=\"menu-button\" [class.rotated]=\"nav.showSubmenu\">expand_more</mat-icon>\n\t\t\t</span>\n\t\t</mat-list-item>\n\t\t<div class=\"submenu\" [class.expanded]=\"nav.showSubmenu\">\n\t\t\t@for (subnav of nav.sub; track subnav) {\n\t\t\t\t@if (subnav.link) {\n\t\t\t\t\t<a mat-list-item [routerLink]=\"subnav.link\" [class.active]=\"subnav.active\">{{ subnav.name }}</a>\n\t\t\t\t} @else if (subnav.extern) {\n\t\t\t\t\t<a mat-list-item [href]=\"subnav.extern\">{{ subnav.name }}</a>\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t} @else if (nav.extern) {\n\t\t<a mat-list-item [href]=\"nav.extern\">\n\t\t\t@if (nav.iconSet) {\n\t\t\t\t<mat-icon matListItemIcon [fontSet]=\"nav.iconSet\" class=\"accent\">{{ nav.icon }}</mat-icon>\n\t\t\t} @else {\n\t\t\t\t<mat-icon matListItemIcon class=\"accent\">{{ nav.icon }}</mat-icon>\n\t\t\t}\n\t\t\t<span matListItemTitle>{{ nav.name }}</span>\n\t\t</a>\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}\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", "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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriSidenavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriSidenavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xiri-sidenav', imports: [
                         MatProgressSpinner,
@@ -5040,21 +5141,137 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         MatListItemIcon,
                         MatListItemTitle,
                         MatListItemMeta,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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@if ( nav.link ) {\n\t\t<a mat-list-item [routerLink]=\"nav.link\" [class.active]=\"nav.active\">\n\t\t\t@if (nav.iconSet) {\n\t\t\t\t<mat-icon matListItemIcon [fontSet]=\"nav.iconSet\" [class]=\"nav.active ? 'primary' : 'accent'\">{{ nav.icon }}</mat-icon>\n\t\t\t} @else {\n\t\t\t\t<mat-icon matListItemIcon [class]=\"nav.active ? 'primary' : 'accent'\">{{ nav.icon }}</mat-icon>\n\t\t\t}\n\t\t\t<span matListItemTitle>{{ nav.name }}</span>\n\t\t</a>\n\t} @else if (nav.menu) {\n\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@if (nav.iconSet) {\n\t\t\t\t<mat-icon matListItemIcon [fontSet]=\"nav.iconSet\" [class]=\"nav.active ? 'primary' : 'accent'\">{{ nav.icon }}</mat-icon>\n\t\t\t} @else {\n\t\t\t\t<mat-icon matListItemIcon [class]=\"nav.active ? 'primary' : 'accent'\">{{ nav.icon }}</mat-icon>\n\t\t\t}\n\t\t\t<span matListItemTitle>{{ nav.name }}</span>\n\t\t\t<span matListItemMeta>\n\t\t\t\t<mat-icon class=\"menu-button\" [class.rotated]=\"nav.showSubmenu\">expand_more</mat-icon>\n\t\t\t</span>\n\t\t</mat-list-item>\n\t\t<div class=\"submenu\" [class.expanded]=\"nav.showSubmenu\">\n\t\t\t@for (subnav of nav.sub; track subnav) {\n\t\t\t\t@if (subnav.link) {\n\t\t\t\t\t<a mat-list-item [routerLink]=\"subnav.link\" [class.active]=\"subnav.active\">{{ subnav.name }}</a>\n\t\t\t\t} @else if (subnav.extern) {\n\t\t\t\t\t<a mat-list-item [href]=\"subnav.extern\">{{ subnav.name }}</a>\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t} @else if (nav.extern) {\n\t\t<a mat-list-item [href]=\"nav.extern\">\n\t\t\t@if (nav.iconSet) {\n\t\t\t\t<mat-icon matListItemIcon [fontSet]=\"nav.iconSet\" class=\"accent\">{{ nav.icon }}</mat-icon>\n\t\t\t} @else {\n\t\t\t\t<mat-icon matListItemIcon class=\"accent\">{{ nav.icon }}</mat-icon>\n\t\t\t}\n\t\t\t<span matListItemTitle>{{ nav.name }}</span>\n\t\t</a>\n\t}\n}\n", styles: [":host{min-width:160px}.loading{margin:1rem}.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:16px}.mat-mdc-list-item .menu-button{font-size:1.2rem;transition:.3s ease-in-out;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 .3s cubic-bezier(0,1.05,0,1);max-height:0;padding-left:2rem}.submenu.expanded{transition:max-height .3s ease;max-height:1000px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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@if ( nav.link ) {\n\t\t<a mat-list-item [routerLink]=\"nav.link\" [class.active]=\"nav.active\">\n\t\t\t@if (nav.iconSet) {\n\t\t\t\t<mat-icon matListItemIcon [fontSet]=\"nav.iconSet\" [class]=\"nav.active ? 'primary' : 'accent'\">{{ nav.icon }}</mat-icon>\n\t\t\t} @else {\n\t\t\t\t<mat-icon matListItemIcon [class]=\"nav.active ? 'primary' : 'accent'\">{{ nav.icon }}</mat-icon>\n\t\t\t}\n\t\t\t<span matListItemTitle>{{ nav.name }}</span>\n\t\t</a>\n\t} @else if (nav.menu) {\n\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@if (nav.iconSet) {\n\t\t\t\t<mat-icon matListItemIcon [fontSet]=\"nav.iconSet\" [class]=\"nav.active ? 'primary' : 'accent'\">{{ nav.icon }}</mat-icon>\n\t\t\t} @else {\n\t\t\t\t<mat-icon matListItemIcon [class]=\"nav.active ? 'primary' : 'accent'\">{{ nav.icon }}</mat-icon>\n\t\t\t}\n\t\t\t<span matListItemTitle>{{ nav.name }}</span>\n\t\t\t<span matListItemMeta>\n\t\t\t\t<mat-icon class=\"menu-button\" [class.rotated]=\"nav.showSubmenu\">expand_more</mat-icon>\n\t\t\t</span>\n\t\t</mat-list-item>\n\t\t<div class=\"submenu\" [class.expanded]=\"nav.showSubmenu\">\n\t\t\t@for (subnav of nav.sub; track subnav) {\n\t\t\t\t@if (subnav.link) {\n\t\t\t\t\t<a mat-list-item [routerLink]=\"subnav.link\" [class.active]=\"subnav.active\">{{ subnav.name }}</a>\n\t\t\t\t} @else if (subnav.extern) {\n\t\t\t\t\t<a mat-list-item [href]=\"subnav.extern\">{{ subnav.name }}</a>\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t} @else if (nav.extern) {\n\t\t<a mat-list-item [href]=\"nav.extern\">\n\t\t\t@if (nav.iconSet) {\n\t\t\t\t<mat-icon matListItemIcon [fontSet]=\"nav.iconSet\" class=\"accent\">{{ nav.icon }}</mat-icon>\n\t\t\t} @else {\n\t\t\t\t<mat-icon matListItemIcon class=\"accent\">{{ nav.icon }}</mat-icon>\n\t\t\t}\n\t\t\t<span matListItemTitle>{{ nav.name }}</span>\n\t\t</a>\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}\n"] }]
         }], ctorParameters: () => [], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: false }] }] } });
 
 class XiriBreadcrumbComponent {
     constructor() {
-        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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<a [routerLink]=\"item.link\">\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(--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(--mat-sys-on-surface, rgba(0, 0, 0, .87))}.breadcrumb li .separator{font-size:1.125rem;width:1.125rem;height:1.125rem;color: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", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'xiri-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, RouterLink], 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<a [routerLink]=\"item.link\">\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(--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(--mat-sys-on-surface, rgba(0, 0, 0, .87))}.breadcrumb li .separator{font-size:1.125rem;width:1.125rem;height:1.125rem;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}\n"] }]
+        }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
+
+class XiriTimelineComponent {
+    constructor() {
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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<a [routerLink]=\"item.link\">\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:.25rem}.breadcrumb li{display:flex;align-items:center;gap:.25rem;font-size:var(--xiri-font-size-body, .875rem);color: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:4px;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:.25rem}.breadcrumb li span mat-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.breadcrumb li.active{font-weight:500;color: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(--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", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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\">\n\t@for (item of settings().items; track $index; let last = $last) {\n\t\t<div class=\"timeline-item\" [class.last]=\"last\">\n\t\t\t<div class=\"timeline-marker\">\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@if (!last) {\n\t\t\t\t\t<div class=\"timeline-line\"></div>\n\t\t\t\t}\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) {\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: [".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.last .timeline-marker .timeline-line{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(--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(--mat-sys-on-surface, rgba(0, 0, 0, .87))}.timeline-datetime{font-size:var(--xiri-font-size-helper, .75rem);color: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(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));line-height:1.5}\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: "21.2.1", ngImport: i0, type: XiriBreadcrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriTimelineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'xiri-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, RouterLink], 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<a [routerLink]=\"item.link\">\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:.25rem}.breadcrumb li{display:flex;align-items:center;gap:.25rem;font-size:var(--xiri-font-size-body, .875rem);color: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:4px;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:.25rem}.breadcrumb li span mat-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.breadcrumb li.active{font-weight:500;color: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(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}\n"] }]
+            args: [{ selector: 'xiri-timeline', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon], template: "<div class=\"timeline\">\n\t@for (item of settings().items; track $index; let last = $last) {\n\t\t<div class=\"timeline-item\" [class.last]=\"last\">\n\t\t\t<div class=\"timeline-marker\">\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@if (!last) {\n\t\t\t\t\t<div class=\"timeline-line\"></div>\n\t\t\t\t}\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) {\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: [".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.last .timeline-marker .timeline-line{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(--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(--mat-sys-on-surface, rgba(0, 0, 0, .87))}.timeline-datetime{font-size:var(--xiri-font-size-helper, .75rem);color: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(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));line-height:1.5}\n"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
 
+var timeline_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    XiriTimelineComponent: XiriTimelineComponent
+});
+
+class XiriPageHeaderComponent {
+    constructor() {
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriPageHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'xiri-page-header', changeDetection: ChangeDetectionStrategy.OnPush, 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 }] }] } });
+
+var pageHeader_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    XiriPageHeaderComponent: XiriPageHeaderComponent
+});
+
+class XiriDividerComponent {
+    constructor() {
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriDividerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'xiri-divider', changeDetection: ChangeDetectionStrategy.OnPush, 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 }] }] } });
+
+var divider_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    XiriDividerComponent: XiriDividerComponent
+});
+
+class XiriStatGridComponent {
+    constructor() {
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriStatGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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)}.stat-grid{display:grid;grid-template-columns:repeat(var(--stat-cols, 4),minmax(0,1fr));gap:var(--xiri-spacing-md)}@media(max-width:992px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:576px){.stat-grid{grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "component", type: XiriStatComponent, selector: "xiri-stat", inputs: ["settings"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriStatGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'xiri-stat-grid', changeDetection: ChangeDetectionStrategy.OnPush, 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)}.stat-grid{display:grid;grid-template-columns:repeat(var(--stat-cols, 4),minmax(0,1fr));gap:var(--xiri-spacing-md)}@media(max-width:992px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:576px){.stat-grid{grid-template-columns:minmax(0,1fr)}}\n"] }]
+        }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
+
+var statGrid_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    XiriStatGridComponent: XiriStatGridComponent
+});
+
+class XiriToolbarComponent {
+    constructor() {
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        this.filterData = input(undefined, ...(ngDevMode ? [{ debugName: "filterData" }] : /* istanbul ignore next */ []));
+        this.searchChanged = output();
+        this.searchPlaceholder = computed(() => {
+            const search = this.settings().search;
+            if (typeof search === 'object' && search?.placeholder) {
+                return search.placeholder;
+            }
+            return '';
+        }, ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'xiri-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }] } });
+
+var toolbar_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    XiriToolbarComponent: XiriToolbarComponent
+});
+
+class XiriDescriptionListComponent {
+    constructor() {
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        this.layoutClass = computed(() => {
+            const s = this.settings();
+            const layout = s.layout || 'stacked';
+            return `${layout} cols-${s.columns || 2}`;
+        }, ...(ngDevMode ? [{ debugName: "layoutClass" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriDescriptionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriDescriptionListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'xiri-description-list', changeDetection: ChangeDetectionStrategy.OnPush, 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 }] }] } });
+
+var descriptionList_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    XiriDescriptionListComponent: XiriDescriptionListComponent
+});
+
 class XiriLocalStorageService {
     constructor() {
         this.isSupported = false;
@@ -5114,10 +5331,10 @@ class XiriLocalStorageService {
         }
         return val.value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriLocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriLocalStorageService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriLocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriLocalStorageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: XiriLocalStorageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: XiriLocalStorageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -5129,7 +5346,7 @@ class ThemeService {
         this.platformId = inject(PLATFORM_ID);
         this.isBrowser = isPlatformBrowser(this.platformId);
         /** Current theme mode setting */
-        this._mode = signal('auto', ...(ngDevMode ? [{ debugName: "_mode" }] : []));
+        this._mode = signal('auto', ...(ngDevMode ? [{ debugName: "_mode" }] : /* istanbul ignore next */ []));
         /** Observable theme mode */
         this.mode = this._mode.asReadonly();
         /** Whether dark mode is currently active (considering auto mode) */
@@ -5139,9 +5356,9 @@ class ThemeService {
                 return this.isBrowser ? this.getSystemPreference() : false;
             }
             return mode === 'dark';
-        }, ...(ngDevMode ? [{ debugName: "isDark" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
         /** Whether light mode is currently active */
-        this.isLight = computed(() => !this.isDark(), ...(ngDevMode ? [{ debugName: "isLight" }] : []));
+        this.isLight = computed(() => !this.isDark(), ...(ngDevMode ? [{ debugName: "isLight" }] : /* istanbul ignore next */ []));
         if (this.isBrowser) {
             // Load saved preference
             const saved = localStorage.getItem('theme');
@@ -5214,10 +5431,10 @@ class ThemeService {
         }
         // 'auto' mode: no class needed, CSS media query handles it
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ThemeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -5240,5 +5457,5 @@ function provideXiriServices(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_COMPARE, DEFAULT_PREDICATE, SafehtmlPipe, ThemeService, XiriAlertComponent, XiriBreadcrumbComponent, XiriButtonComponent, XiriButtonlineComponent, XiriButtonstyleComponent, XiriCardComponent, XiriCardlinkComponent, XiriDataService, XiriDataServiceConfig, XiriDateService, XiriDescriptionListComponent, XiriDialogComponent, XiriDividerComponent, XiriDoneComponent, XiriDynComponentComponent, XiriEmptyStateComponent, XiriErrorComponent, XiriExpansionComponent, XiriFormComponent, XiriFormFieldsComponent, XiriFormService, XiriHeaderComponent, XiriImagetextComponent, XiriInfopointComponent, XiriLinksComponent, XiriListComponent, XiriLocalStorageService, XiriMultiprogressComponent, XiriNumberService, XiriPageHeaderComponent, XiriQueryComponent, XiriRawTableComponent, XiriSearchComponent, XiriSectionComponent, XiriSelectDirective, XiriSessionStorageService, XiriSidenavComponent, XiriSkeletonComponent, XiriSnackbarService, XiriStatComponent, XiriStatGridComponent, XiriStepperComponent, XiriTableComponent, XiriTabsComponent, XiriTimelineComponent, XiriToolbarComponent, defaultXiriDataServiceConfig, provideXiriServices };
+export { DEFAULT_COMPARE, DEFAULT_PREDICATE, SafehtmlPipe, ThemeService, XiriAlertComponent, XiriBreadcrumbComponent, XiriButtonComponent, XiriButtonlineComponent, XiriButtonstyleComponent, XiriCardComponent, XiriCardlinkComponent, XiriDataService, XiriDataServiceConfig, XiriDateService, XiriDescriptionListComponent, XiriDialogComponent, XiriDividerComponent, XiriDoneComponent, XiriDownloadService, XiriDynComponentComponent, XiriEmptyStateComponent, XiriErrorComponent, XiriExpansionComponent, XiriFormComponent, XiriFormFieldsComponent, XiriFormService, XiriHeaderComponent, XiriImagetextComponent, XiriInfopointComponent, XiriLinksComponent, XiriListComponent, XiriLocalStorageService, XiriMultiprogressComponent, XiriNumberService, XiriPageHeaderComponent, XiriQueryComponent, XiriRawTableComponent, XiriResponseHandlerService, XiriSearchComponent, XiriSectionComponent, XiriSelectDirective, XiriSessionStorageService, XiriSidenavComponent, XiriSkeletonComponent, XiriSnackbarService, XiriStatComponent, XiriStatGridComponent, XiriStepperComponent, XiriTableComponent, XiriTabsComponent, XiriTimelineComponent, XiriToolbarComponent, defaultXiriDataServiceConfig, provideXiriServices };
 //# sourceMappingURL=xiriframework-xiri-ng.mjs.map