@xiriframework/xiri-ng 0.2.5 → 0.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/fesm2022/xiriframework-xiri-ng.mjs +254 -265
  2. package/fesm2022/xiriframework-xiri-ng.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/styles/colors.scss +1 -0
  5. package/styles/material-components.scss +0 -3
  6. package/types/xiriframework-xiri-ng.d.ts +25 -28
  7. package/types/xiriframework-xiri-ng.d.ts.map +1 -1
package/fesm2022/xiriframework-xiri-ng.mjs CHANGED
@@ -1,17 +1,18 @@
1
1
  import { DomSanitizer } from '@angular/platform-browser';
2
2
  import * as i0 from '@angular/core';
3
- import { inject, Pipe, ElementRef, ChangeDetectorRef, Input, ChangeDetectionStrategy, Component, output, signal, booleanAttribute, numberAttribute, Optional, Self, Injectable, input, viewChild, effect, Directive, forwardRef, computed, ViewEncapsulation, DestroyRef, PLATFORM_ID, makeEnvironmentProviders } from '@angular/core';
3
+ 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';
4
+ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
4
5
  import * as i2 from '@angular/forms';
5
6
  import { NgControl, FormGroup, FormControl, FormsModule, ReactiveFormsModule, Validators, UntypedFormControl, NG_VALUE_ACCESSOR, UntypedFormBuilder } from '@angular/forms';
6
- import { Subject, Subscription, tap, debounceTime, distinctUntilChanged, BehaviorSubject, ReplaySubject, switchMap, catchError, of, map, throwError, timer, filter as filter$1 } from 'rxjs';
7
- import { coerceBooleanProperty } from '@angular/cdk/coercion';
8
7
  import { MatProgressSpinner } from '@angular/material/progress-spinner';
9
8
  import { MatFormField, MatLabel, MatSuffix, MatHint, MatError, MatFormFieldControl, MatPrefix } from '@angular/material/form-field';
9
+ import { Subject, Subscription, tap, debounceTime, distinctUntilChanged, BehaviorSubject, ReplaySubject, switchMap, catchError, of, map, throwError, timer, filter as filter$1 } from 'rxjs';
10
10
  import * as i1 from '@angular/cdk/a11y';
11
11
  import { FocusMonitor, CdkTrapFocus } from '@angular/cdk/a11y';
12
12
  import { MatIcon } from '@angular/material/icon';
13
13
  import { MatIconButton, MatButton, MatFabButton, MatMiniFabButton } from '@angular/material/button';
14
14
  import { MatInput } from '@angular/material/input';
15
+ import { coerceBooleanProperty } from '@angular/cdk/coercion';
15
16
  import { KeyValuePipe, AsyncPipe, Location, NgTemplateOutlet, SlicePipe, isPlatformBrowser } from '@angular/common';
16
17
  import * as i3 from '@angular/material/core';
17
18
  import { MatOption, _ErrorStateTracker, DateAdapter, MatLine, MatRipple } from '@angular/material/core';
@@ -43,7 +44,6 @@ import { MatCard, MatCardHeader, MatCardAvatar, MatCardTitle, MatCardSubtitle, M
43
44
  import { MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle, MatAccordion, MatExpansionPanelDescription } from '@angular/material/expansion';
44
45
  import { MatProgressBar } from '@angular/material/progress-bar';
45
46
  import { MatListSubheaderCssMatStyler, MatNavList, MatListItem, MatListItemIcon, MatListItemTitle, MatListItemLine, MatListItemMeta } from '@angular/material/list';
46
- import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
47
47
  import { MatStepper, MatStep } from '@angular/material/stepper';
48
48
  import { MatTabGroup, MatTab, MatTabLabel } from '@angular/material/tabs';
49
49
  import { CdkScrollable } from '@angular/cdk/scrolling';
@@ -55,10 +55,10 @@ class SafehtmlPipe {
55
55
  transform(style) {
56
56
  return this.sanitizer.bypassSecurityTrustHtml(style);
57
57
  }
58
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SafehtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
59
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.5", ngImport: i0, type: SafehtmlPipe, isStandalone: true, name: "safeHtml" }); }
58
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SafehtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
59
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SafehtmlPipe, isStandalone: true, name: "safeHtml" }); }
60
60
  }
61
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SafehtmlPipe, decorators: [{
61
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SafehtmlPipe, decorators: [{
62
62
  type: Pipe,
63
63
  args: [{
64
64
  name: 'safeHtml'
@@ -196,13 +196,13 @@ class XiriFileComponent {
196
196
  console.log('unknown error file', errors);
197
197
  return 'error';
198
198
  }
199
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
200
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: XiriFileComponent, isStandalone: true, selector: "xiri-file", inputs: { value: "value", field: "field" }, host: { properties: { "id": "id", "attr.aria-describedby": "describedBy" } }, providers: [{
199
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
200
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriFileComponent, isStandalone: true, selector: "xiri-file", inputs: { value: "value", field: "field" }, host: { properties: { "id": "id", "attr.aria-describedby": "describedBy" } }, providers: [{
201
201
  provide: MatFormFieldControl,
202
202
  useExisting: XiriFileComponent
203
203
  }], 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 }); }
204
204
  }
205
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriFileComponent, decorators: [{
205
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriFileComponent, decorators: [{
206
206
  type: Component,
207
207
  args: [{ selector: 'xiri-file', host: {
208
208
  '[id]': 'id',
@@ -428,13 +428,13 @@ class XiriTimelimitComponent {
428
428
  onCompare(_left, _right) {
429
429
  return -1;
430
430
  }
431
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriTimelimitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
432
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: XiriTimelimitComponent, isStandalone: true, selector: "xiri-timelimit", inputs: { placeholder: "placeholder", required: "required", disabled: "disabled", value: "value", texts: "texts" }, host: { properties: { "id": "id", "attr.aria-describedby": "describedBy" } }, providers: [{
431
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriTimelimitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
432
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriTimelimitComponent, isStandalone: true, selector: "xiri-timelimit", inputs: { placeholder: "placeholder", required: "required", disabled: "disabled", value: "value", texts: "texts" }, host: { properties: { "id": "id", "attr.aria-describedby": "describedBy" } }, providers: [{
433
433
  provide: MatFormFieldControl,
434
434
  useExisting: XiriTimelimitComponent
435
435
  }], 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 }); }
436
436
  }
437
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriTimelimitComponent, decorators: [{
437
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriTimelimitComponent, decorators: [{
438
438
  type: Component,
439
439
  args: [{ selector: 'xiri-timelimit', changeDetection: ChangeDetectionStrategy.OnPush, host: {
440
440
  '[id]': 'id',
@@ -601,13 +601,13 @@ class XiriVolumeComponent {
601
601
  }
602
602
  onContainerClick(event) {
603
603
  }
604
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriVolumeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
605
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: XiriVolumeComponent, isStandalone: true, selector: "xiri-volume", inputs: { field: "field", value: "value" }, host: { properties: { "id": "id", "attr.aria-describedby": "describedBy" } }, providers: [{
604
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriVolumeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
605
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriVolumeComponent, isStandalone: true, selector: "xiri-volume", inputs: { field: "field", value: "value" }, host: { properties: { "id": "id", "attr.aria-describedby": "describedBy" } }, providers: [{
606
606
  provide: MatFormFieldControl,
607
607
  useExisting: XiriVolumeComponent
608
608
  }], 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 }); }
609
609
  }
610
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriVolumeComponent, decorators: [{
610
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriVolumeComponent, decorators: [{
611
611
  type: Component,
612
612
  args: [{ selector: 'xiri-volume', host: {
613
613
  '[id]': 'id',
@@ -686,7 +686,6 @@ class XiriFieldMain {
686
686
  return this._id;
687
687
  }
688
688
  set id(value) {
689
- console.log('id main', value);
690
689
  this._id = value;
691
690
  }
692
691
  /**
@@ -727,7 +726,6 @@ class XiriFieldMain {
727
726
  * Implemented as part of MatFormFieldControl.
728
727
  */
729
728
  get empty() {
730
- console.log('empty main', this._value === null);
731
729
  return this._value === null;
732
730
  }
733
731
  /**
@@ -849,13 +847,13 @@ class XiriFieldMain {
849
847
  this._changeDetectorRef.markForCheck();
850
848
  this.stateChanges.next();
851
849
  }
852
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", 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 }); }
853
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.1.5", 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: [{
850
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", 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 }); }
851
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.0", 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: [{
854
852
  provide: MatFormFieldControl,
855
853
  useExisting: XiriFieldMain
856
854
  }], ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
857
855
  }
858
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriFieldMain, decorators: [{
856
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriFieldMain, decorators: [{
859
857
  type: Component,
860
858
  args: [{
861
859
  changeDetection: ChangeDetectionStrategy.OnPush,
@@ -926,10 +924,10 @@ class XiriDateService {
926
924
  dateToUnix(date) {
927
925
  return Math.floor(transpose(date, tz(this.currentTimezone)).getTime() / 1000);
928
926
  }
929
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriDateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
930
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriDateService, providedIn: 'root' }); }
927
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriDateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
928
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriDateService, providedIn: 'root' }); }
931
929
  }
932
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriDateService, decorators: [{
930
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriDateService, decorators: [{
933
931
  type: Injectable,
934
932
  args: [{
935
933
  providedIn: 'root'
@@ -1067,13 +1065,13 @@ class XiriDateTimeRangeComponent extends XiriFieldMain {
1067
1065
  getInt(num) {
1068
1066
  return parseInt(num);
1069
1067
  }
1070
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", 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 }); }
1071
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: XiriDateTimeRangeComponent, isStandalone: true, selector: "xiri-date-time-range", inputs: { field: "field", value: "value" }, host: { listeners: { "focus": "focus()" }, properties: { "id": "id" } }, providers: [{
1068
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", 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 }); }
1069
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriDateTimeRangeComponent, isStandalone: true, selector: "xiri-date-time-range", inputs: { field: "field", value: "value" }, host: { listeners: { "focus": "focus()" }, properties: { "id": "id" } }, providers: [{
1072
1070
  provide: MatFormFieldControl,
1073
1071
  useExisting: XiriDateTimeRangeComponent
1074
1072
  }], 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 }); }
1075
1073
  }
1076
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriDateTimeRangeComponent, decorators: [{
1074
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriDateTimeRangeComponent, decorators: [{
1077
1075
  type: Component,
1078
1076
  args: [{ selector: 'xiri-date-time-range', host: {
1079
1077
  '[id]': 'id',
@@ -1220,13 +1218,13 @@ class XiriDateRangeComponent extends XiriFieldMain {
1220
1218
  writeValue(value) {
1221
1219
  this.value = value;
1222
1220
  }
1223
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", 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 }); }
1224
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: XiriDateRangeComponent, isStandalone: true, selector: "xiri-date-range", inputs: { field: "field", value: "value" }, host: { listeners: { "focus": "focus()" }, properties: { "id": "id" } }, providers: [{
1221
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", 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 }); }
1222
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: XiriDateRangeComponent, isStandalone: true, selector: "xiri-date-range", inputs: { field: "field", value: "value" }, host: { listeners: { "focus": "focus()" }, properties: { "id": "id" } }, providers: [{
1225
1223
  provide: MatFormFieldControl,
1226
1224
  useExisting: XiriDateRangeComponent
1227
1225
  }], 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 }); }
1228
1226
  }
1229
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriDateRangeComponent, decorators: [{
1227
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriDateRangeComponent, decorators: [{
1230
1228
  type: Component,
1231
1229
  args: [{ selector: 'xiri-date-range', host: {
1232
1230
  '[id]': 'id',
@@ -1366,13 +1364,13 @@ class XiriDateComponent extends XiriFieldMain {
1366
1364
  writeValue(value) {
1367
1365
  this.value = value;
1368
1366
  }
1369
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", 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 }); }
1370
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: XiriDateComponent, isStandalone: true, selector: "xiri-date", inputs: { field: "field", value: "value" }, host: { listeners: { "focus": "focus()" }, properties: { "id": "id" } }, providers: [{
1367
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", 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 }); }
1368
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriDateComponent, isStandalone: true, selector: "xiri-date", inputs: { field: "field", value: "value" }, host: { listeners: { "focus": "focus()" }, properties: { "id": "id" } }, providers: [{
1371
1369
  provide: MatFormFieldControl,
1372
1370
  useExisting: XiriDateComponent
1373
1371
  }], 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 }); }
1374
1372
  }
1375
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriDateComponent, decorators: [{
1373
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriDateComponent, decorators: [{
1376
1374
  type: Component,
1377
1375
  args: [{ selector: 'xiri-date', host: {
1378
1376
  '[id]': 'id',
@@ -1452,10 +1450,10 @@ class XiriSnackbarService {
1452
1450
  };
1453
1451
  return this.snackbar.open(message, action || undefined, config);
1454
1452
  }
1455
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriSnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
1456
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriSnackbarService, providedIn: 'root' }); }
1453
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriSnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
1454
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriSnackbarService, providedIn: 'root' }); }
1457
1455
  }
1458
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriSnackbarService, decorators: [{
1456
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriSnackbarService, decorators: [{
1459
1457
  type: Injectable,
1460
1458
  args: [{
1461
1459
  providedIn: 'root',
@@ -1504,10 +1502,10 @@ class XiriDataService {
1504
1502
  getConfigApi() {
1505
1503
  return this.config.api;
1506
1504
  }
1507
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
1508
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriDataService, providedIn: 'root' }); }
1505
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
1506
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriDataService, providedIn: 'root' }); }
1509
1507
  }
1510
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriDataService, decorators: [{
1508
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriDataService, decorators: [{
1511
1509
  type: Injectable,
1512
1510
  args: [{
1513
1511
  providedIn: 'root',
@@ -1523,7 +1521,7 @@ class XiriSearchComponent {
1523
1521
  this.escape = input(true, ...(ngDevMode ? [{ debugName: "escape" }] : []));
1524
1522
  this.focus = input(-1, ...(ngDevMode ? [{ debugName: "focus" }] : []));
1525
1523
  this._search = viewChild('search', ...(ngDevMode ? [{ debugName: "_search" }] : []));
1526
- this.subs = new Subscription();
1524
+ this.destroyRef = inject(DestroyRef);
1527
1525
  this.filter = new Subject();
1528
1526
  this._text = '';
1529
1527
  this.show = false;
@@ -1553,10 +1551,10 @@ class XiriSearchComponent {
1553
1551
  });
1554
1552
  }
1555
1553
  ngOnInit() {
1556
- this.subs.add(this.filter.pipe(debounceTime(200), distinctUntilChanged())
1554
+ this.filter.pipe(debounceTime(200), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
1557
1555
  .subscribe(value => {
1558
1556
  this.changed.emit(value);
1559
- }));
1557
+ });
1560
1558
  if (this.open())
1561
1559
  this.show = true;
1562
1560
  }
@@ -1570,18 +1568,15 @@ class XiriSearchComponent {
1570
1568
  searchDo() {
1571
1569
  this.filter.next(this._text);
1572
1570
  }
1573
- ngOnDestroy() {
1574
- this.subs.unsubscribe();
1575
- }
1576
1571
  click() {
1577
1572
  this.show = this.open() ? true : !this.show;
1578
1573
  this._text = '';
1579
1574
  this.filter.next(this._text);
1580
1575
  }
1581
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1582
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
1576
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1577
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriSearchComponent, isStandalone: true, selector: "xiri-search", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, reset: { classPropertyName: "reset", publicName: "reset", isSignal: true, isRequired: false, transformFunction: null }, escape: { classPropertyName: "escape", publicName: "escape", isSignal: true, isRequired: false, transformFunction: null }, focus: { classPropertyName: "focus", publicName: "focus", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler()" } }, viewQueries: [{ propertyName: "_search", first: true, predicate: ["search"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"search\" [class.open]=\"show\">\n\t@if (show) {\n\t\t<input type=\"text\" name=\"input\" class=\"input lens\" autocomplete=\"off\"\n\t\t [cdkTrapFocusAutoCapture]=\"show\" [cdkTrapFocus]=\"show\"\n\t\t [placeholder]=\"placeholder()\"\n\t\t [class.open]=\"show\"\n\t\t (keyup)=\"searchDo()\" [value]=\"_text\" [(ngModel)]=\"_text\">\n\t}\n\t<button mat-icon-button color=\"primary\" (click)=\"click()\" [attr.aria-label]=\"show ? 'Suche schlie\u00DFen' : 'Suche \u00F6ffnen'\">\n\t\t<mat-icon>{{ show ? 'close' : 'search' }}</mat-icon>\n\t</button>\n</div>", styles: [".search{display:flex;justify-content:flex-end;align-items:center;height:42px;padding-bottom:2px;min-width:44px;max-width:180px;margin-right:2px;width:44px}.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 }); }
1583
1578
  }
1584
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriSearchComponent, decorators: [{
1579
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriSearchComponent, decorators: [{
1585
1580
  type: Component,
1586
1581
  args: [{ selector: 'xiri-search', host: {
1587
1582
  '(document:keydown.escape)': 'onKeydownHandler()'
@@ -1808,13 +1803,13 @@ class XiriTreeselectComponent extends XiriFieldMain {
1808
1803
  }
1809
1804
  return null;
1810
1805
  }
1811
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", 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 }); }
1812
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: XiriTreeselectComponent, isStandalone: true, selector: "xiri-treeselect", inputs: { field: "field", value: "value" }, host: { listeners: { "focus": "focus()" }, properties: { "id": "id" } }, providers: [{
1806
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", 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 }); }
1807
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriTreeselectComponent, isStandalone: true, selector: "xiri-treeselect", inputs: { field: "field", value: "value" }, host: { listeners: { "focus": "focus()" }, properties: { "id": "id" } }, providers: [{
1813
1808
  provide: MatFormFieldControl,
1814
1809
  useExisting: XiriTreeselectComponent
1815
1810
  }], 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 }); }
1816
1811
  }
1817
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriTreeselectComponent, decorators: [{
1812
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriTreeselectComponent, decorators: [{
1818
1813
  type: Component,
1819
1814
  args: [{ selector: 'xiri-treeselect', host: {
1820
1815
  '[id]': 'id',
@@ -1937,10 +1932,10 @@ class XiriSelectDirective {
1937
1932
  // filter the _allValues
1938
1933
  this._filteredValuesSubject.next(this._allValues.filter(el => this.searchPredicate()(search, el)));
1939
1934
  }
1940
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1941
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", 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 }); }
1935
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1936
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", 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 }); }
1942
1937
  }
1943
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriSelectDirective, decorators: [{
1938
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriSelectDirective, decorators: [{
1944
1939
  type: Directive,
1945
1940
  args: [{
1946
1941
  selector: "[xiriSelect]",
@@ -2017,14 +2012,14 @@ class XiriChipsComponent {
2017
2012
  const option = this.field().list?.find(o => o.name === chip);
2018
2013
  return option?.color ? 'chip-' + option.color : '';
2019
2014
  }
2020
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2021
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: XiriChipsComponent, isStandalone: true, selector: "xiri-chips", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{
2015
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2016
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriChipsComponent, isStandalone: true, selector: "xiri-chips", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{
2022
2017
  provide: NG_VALUE_ACCESSOR,
2023
2018
  useExisting: forwardRef(() => XiriChipsComponent),
2024
2019
  multi: true
2025
2020
  }], 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 }); }
2026
2021
  }
2027
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriChipsComponent, decorators: [{
2022
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriChipsComponent, decorators: [{
2028
2023
  type: Component,
2029
2024
  args: [{ selector: 'xiri-chips', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
2030
2025
  provide: NG_VALUE_ACCESSOR,
@@ -2048,11 +2043,11 @@ class XiriFormFieldsComponent {
2048
2043
  constructor() {
2049
2044
  this.formBuilder = inject(UntypedFormBuilder);
2050
2045
  this._changeDetectorRef = inject(ChangeDetectorRef);
2046
+ this.destroyRef = inject(DestroyRef);
2051
2047
  this.form = input(null, ...(ngDevMode ? [{ debugName: "form" }] : []));
2052
2048
  this.display = input('full', ...(ngDevMode ? [{ debugName: "display" }] : []));
2053
2049
  this.formChange = output();
2054
2050
  this.check = input(null, ...(ngDevMode ? [{ debugName: "check" }] : []));
2055
- this.subs = new Subscription();
2056
2051
  this.lastValue = null;
2057
2052
  this._fields = null;
2058
2053
  this._fieldsLoaded = false;
@@ -2094,17 +2089,17 @@ class XiriFormFieldsComponent {
2094
2089
  });
2095
2090
  }
2096
2091
  ngOnInit() {
2097
- this.subs.add(this.check()?.subscribe(() => {
2092
+ this.check()?.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
2098
2093
  this.validateAllFormFields();
2099
- }));
2100
- this.subs.add(this.formGroup.valueChanges.subscribe(() => {
2094
+ });
2095
+ this.formGroup.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
2101
2096
  if (this._fieldsLoaded) {
2102
2097
  if (JSON.stringify(this.formGroup.value) === this.lastValue)
2103
2098
  return;
2104
2099
  this.lastValue = JSON.stringify(this.formGroup.value);
2105
2100
  this.formChange.emit(this.formGroup);
2106
2101
  }
2107
- }));
2102
+ });
2108
2103
  }
2109
2104
  createControl() {
2110
2105
  for (let i = 0; i != this._fields.length; i++) {
@@ -2211,8 +2206,8 @@ class XiriFormFieldsComponent {
2211
2206
  else if (field.type == 'bool')
2212
2207
  field.value = false;
2213
2208
  }
2214
- field.required = coerceBooleanProperty(field.required);
2215
- field.disabled = coerceBooleanProperty(field.disabled);
2209
+ field.required = !!field.required;
2210
+ field.disabled = !!field.disabled;
2216
2211
  const control = this.formBuilder.control(field.value, this.bindValidations(field));
2217
2212
  field.control = control;
2218
2213
  this.formGroup.addControl(field.id, control);
@@ -2310,9 +2305,6 @@ class XiriFormFieldsComponent {
2310
2305
  });
2311
2306
  return validList.length ? Validators.compose(validList) : null;
2312
2307
  }
2313
- ngOnDestroy() {
2314
- this.subs.unsubscribe();
2315
- }
2316
2308
  validateAllFormFields() {
2317
2309
  this.formGroup.markAsDirty();
2318
2310
  this.formGroup.markAllAsTouched();
@@ -2376,10 +2368,10 @@ class XiriFormFieldsComponent {
2376
2368
  return true;
2377
2369
  }
2378
2370
  }
2379
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriFormFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2380
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: XiriFormFieldsComponent, isStandalone: true, selector: "xiri-form-fields", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, 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 }); }
2371
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriFormFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2372
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriFormFieldsComponent, isStandalone: true, selector: "xiri-form-fields", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, 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 }); }
2381
2373
  }
2382
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriFormFieldsComponent, decorators: [{
2374
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriFormFieldsComponent, decorators: [{
2383
2375
  type: Component,
2384
2376
  args: [{ selector: 'xiri-form-fields', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
2385
2377
  FormsModule,
@@ -2480,10 +2472,10 @@ class XiriRawTableComponent {
2480
2472
  this.columnsToDisplay.push(column.name);
2481
2473
  }
2482
2474
  }
2483
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriRawTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2484
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 ('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 }); }
2475
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriRawTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2476
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriRawTableComponent, isStandalone: true, selector: "xiri-raw-table", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"table-out\" [class]=\"tableClass\">\n\t<table mat-table [dataSource]=\"dataSource\">\n\t\t@for (column of displayedColumns; track column) {\n\t\t\t<ng-container [matColumnDef]=\"column.name\">\n\t\t\t\t@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 }); }
2485
2477
  }
2486
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriRawTableComponent, decorators: [{
2478
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriRawTableComponent, decorators: [{
2487
2479
  type: Component,
2488
2480
  args: [{ selector: 'xiri-raw-table', imports: [MatTable,
2489
2481
  MatColumnDef,
@@ -2496,7 +2488,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
2496
2488
  RouterLink,
2497
2489
  MatRowDef,
2498
2490
  MatRow,
2499
- SafehtmlPipe], changeDetection: ChangeDetectionStrategy.OnPush, 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 ('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"] }]
2491
+ SafehtmlPipe], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
2500
2492
  }], ctorParameters: () => [], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
2501
2493
 
2502
2494
  class XiriButtonstyleComponent {
@@ -2504,10 +2496,10 @@ class XiriButtonstyleComponent {
2504
2496
  this.button = input.required(...(ngDevMode ? [{ debugName: "button" }] : []));
2505
2497
  this.disabled = input.required(...(ngDevMode ? [{ debugName: "disabled" }] : []));
2506
2498
  }
2507
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriButtonstyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2508
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 } }, 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()\">\n\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\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()\"\n\t\t [tabIndex]=\"button().tabIndex\">\n\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\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()\"\n\t\t [tabIndex]=\"button().tabIndex\">{{ button().text }}\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()\"\n\t\t [tabIndex]=\"button().tabIndex\">{{ button().text }}\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()\"\n\t\t [tabIndex]=\"button().tabIndex\">{{ button().text }}\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()\"\n\t\t [tabIndex]=\"button().tabIndex\">{{ button().text }}\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()\"\n\t\t [tabIndex]=\"button().tabIndex\">\n\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\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()\"\n\t\t [tabIndex]=\"button().tabIndex\">\n\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\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()\"\n\t\t\t [tabIndex]=\"button().tabIndex\">\n\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\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()\"\n\t\t\t [tabIndex]=\"button().tabIndex\">{{ button().text }}\n\t\t\t</button>\n\t\t}\n\t}\n}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2499
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriButtonstyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2500
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriButtonstyleComponent, isStandalone: true, selector: "xiri-buttonstyle", inputs: { button: { classPropertyName: "button", publicName: "button", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null } }, 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()\">\n\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\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()\"\n\t\t [tabIndex]=\"button().tabIndex\">\n\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\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()\"\n\t\t [tabIndex]=\"button().tabIndex\">{{ button().text }}\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()\"\n\t\t [tabIndex]=\"button().tabIndex\">{{ button().text }}\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()\"\n\t\t [tabIndex]=\"button().tabIndex\">{{ button().text }}\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()\"\n\t\t [tabIndex]=\"button().tabIndex\">{{ button().text }}\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()\"\n\t\t [tabIndex]=\"button().tabIndex\">\n\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\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()\"\n\t\t [tabIndex]=\"button().tabIndex\">\n\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\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()\"\n\t\t\t [tabIndex]=\"button().tabIndex\">\n\t\t\t\t<mat-icon>{{ button().icon }}</mat-icon>\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()\"\n\t\t\t [tabIndex]=\"button().tabIndex\">{{ button().text }}\n\t\t\t</button>\n\t\t}\n\t}\n}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2509
2501
  }
2510
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriButtonstyleComponent, decorators: [{
2502
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriButtonstyleComponent, decorators: [{
2511
2503
  type: Component,
2512
2504
  args: [{ selector: 'xiri-buttonstyle', imports: [
2513
2505
  MatButton,
@@ -2520,10 +2512,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
2520
2512
  }], propDecorators: { button: [{ type: i0.Input, args: [{ isSignal: true, alias: "button", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: true }] }] } });
2521
2513
 
2522
2514
  class XiriDoneComponent {
2523
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriDoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2524
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", 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 }); }
2515
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriDoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2516
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", 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 }); }
2525
2517
  }
2526
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriDoneComponent, decorators: [{
2518
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriDoneComponent, decorators: [{
2527
2519
  type: Component,
2528
2520
  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"] }]
2529
2521
  }] });
@@ -2532,10 +2524,10 @@ class XiriErrorComponent {
2532
2524
  constructor() {
2533
2525
  this.text = input.required(...(ngDevMode ? [{ debugName: "text" }] : []));
2534
2526
  }
2535
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2536
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", 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 }); }
2527
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2528
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: XiriErrorComponent, isStandalone: true, selector: "xiri-error", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"error\">\n\t{{ text() }}\n</div>\n", styles: ["@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.error{padding: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 }); }
2537
2529
  }
2538
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriErrorComponent, decorators: [{
2530
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriErrorComponent, decorators: [{
2539
2531
  type: Component,
2540
2532
  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"] }]
2541
2533
  }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }] } });
@@ -2564,10 +2556,10 @@ class XiriDownloadService {
2564
2556
  setTimeout(() => a.click(), 0);
2565
2557
  return true;
2566
2558
  }
2567
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriDownloadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
2568
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriDownloadService, providedIn: 'root' }); }
2559
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriDownloadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
2560
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriDownloadService, providedIn: 'root' }); }
2569
2561
  }
2570
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriDownloadService, decorators: [{
2562
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriDownloadService, decorators: [{
2571
2563
  type: Injectable,
2572
2564
  args: [{
2573
2565
  providedIn: 'root',
@@ -2587,7 +2579,7 @@ class XiriDialogComponent {
2587
2579
  this.buttons = signal([], ...(ngDevMode ? [{ debugName: "buttons" }] : []));
2588
2580
  this.url = '';
2589
2581
  this.extra = {};
2590
- this.subs = new Subscription();
2582
+ this.destroyRef = inject(DestroyRef);
2591
2583
  this.downloadService = inject(XiriDownloadService);
2592
2584
  this.formFields = signal(null, ...(ngDevMode ? [{ debugName: "formFields" }] : []));
2593
2585
  this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : []));
@@ -2598,14 +2590,15 @@ class XiriDialogComponent {
2598
2590
  this.checkSubject = new Subject();
2599
2591
  this.to = null;
2600
2592
  this.refreshTime = 2000;
2601
- this.subs.add(this.breakpointObserver
2593
+ this.breakpointObserver
2602
2594
  .observe([Breakpoints.XSmall, Breakpoints.Small])
2595
+ .pipe(takeUntilDestroyed(this.destroyRef))
2603
2596
  .subscribe((state) => {
2604
2597
  if (state.matches)
2605
2598
  this.dialogRef.updateSize('90vw');
2606
2599
  else
2607
2600
  this.dialogRef.updateSize(this.initData.size || '600px');
2608
- }));
2601
+ });
2609
2602
  if (this.initData.url)
2610
2603
  this.url = this.initData.url;
2611
2604
  if (this.initData.type == 'form')
@@ -2624,7 +2617,7 @@ class XiriDialogComponent {
2624
2617
  this.dataService.get(this.url) :
2625
2618
  this.dataService.post(this.url, { ...data, ...this.extra });
2626
2619
  // this.buttons = [];
2627
- this.subs.add(req.subscribe({
2620
+ req.pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
2628
2621
  next: (res) => {
2629
2622
  if (res)
2630
2623
  this.loadData(res);
@@ -2634,7 +2627,7 @@ class XiriDialogComponent {
2634
2627
  error: (err) => {
2635
2628
  this.showError(err);
2636
2629
  }
2637
- }));
2630
+ });
2638
2631
  }
2639
2632
  showError(err) {
2640
2633
  this.loading.set(false);
@@ -2720,7 +2713,7 @@ class XiriDialogComponent {
2720
2713
  refresh() {
2721
2714
  this.to = setTimeout(() => {
2722
2715
  this.to = null;
2723
- this.subs.add(this.dataService.get(this.url).subscribe({
2716
+ this.dataService.get(this.url).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
2724
2717
  next: (res) => {
2725
2718
  if (res.done) {
2726
2719
  // this.formData.done = true;
@@ -2739,7 +2732,7 @@ class XiriDialogComponent {
2739
2732
  this.refreshTime += 2000;
2740
2733
  this.refresh();
2741
2734
  }
2742
- }));
2735
+ });
2743
2736
  }, this.refreshTime);
2744
2737
  }
2745
2738
  download(data) {
@@ -2758,7 +2751,8 @@ class XiriDialogComponent {
2758
2751
  this.dialogRef.close(this.extra);
2759
2752
  return;
2760
2753
  }
2761
- this.subs.add(this.dataService.postFileResponse(this.url, data)
2754
+ this.dataService.postFileResponse(this.url, data)
2755
+ .pipe(takeUntilDestroyed(this.destroyRef))
2762
2756
  .subscribe({
2763
2757
  next: (result) => {
2764
2758
  let ret = this.downloadService.download(result, 'Report', false);
@@ -2775,7 +2769,7 @@ class XiriDialogComponent {
2775
2769
  }, error: (err) => {
2776
2770
  this.snackbar.error(err.error?.error || 'Unknown Error');
2777
2771
  }
2778
- }));
2772
+ });
2779
2773
  }
2780
2774
  clickButton(button) {
2781
2775
  if (button.default && !this.formValid())
@@ -2826,14 +2820,13 @@ class XiriDialogComponent {
2826
2820
  this.formValues = event.value;
2827
2821
  }
2828
2822
  ngOnDestroy() {
2829
- this.subs.unsubscribe();
2830
2823
  if (this.to)
2831
2824
  clearTimeout(this.to);
2832
2825
  }
2833
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2834
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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()) {\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)\" [hidden]=\"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", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2826
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2827
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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()) {\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)\" [hidden]=\"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", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2835
2828
  }
2836
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriDialogComponent, decorators: [{
2829
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriDialogComponent, decorators: [{
2837
2830
  type: Component,
2838
2831
  args: [{ selector: 'xiri-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDialogTitle,
2839
2832
  MatDialogContent,
@@ -2857,7 +2850,7 @@ class XiriButtonComponent {
2857
2850
  // return;
2858
2851
  this.result = output();
2859
2852
  this.dialogRef = undefined;
2860
- this.subs = new Subscription();
2853
+ this.destroyRef = inject(DestroyRef);
2861
2854
  this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
2862
2855
  this.dataService = inject(XiriDataService);
2863
2856
  this.location = inject(Location);
@@ -2941,7 +2934,7 @@ class XiriButtonComponent {
2941
2934
  this.dialogRef = this.dialog.open(XiriDialogComponent, {
2942
2935
  data: data,
2943
2936
  });
2944
- this.subs.add(this.dialogRef.afterClosed().subscribe(result => {
2937
+ this.dialogRef.afterClosed().pipe(takeUntilDestroyed(this.destroyRef)).subscribe(result => {
2945
2938
  if (result) {
2946
2939
  if (result.page == 'refresh' || result.refresh == 'page')
2947
2940
  this.router.navigate([this.router.url]).then();
@@ -2957,7 +2950,7 @@ class XiriButtonComponent {
2957
2950
  done: true,
2958
2951
  loading: false,
2959
2952
  });
2960
- }));
2953
+ });
2961
2954
  }
2962
2955
  openMenuDialog(event, item) {
2963
2956
  event.stopPropagation();
@@ -2974,7 +2967,8 @@ class XiriButtonComponent {
2974
2967
  done: false,
2975
2968
  loading: true,
2976
2969
  });
2977
- this.subs.add(this.dataService.post(this.button().url, data)
2970
+ this.dataService.post(this.button().url, data)
2971
+ .pipe(takeUntilDestroyed(this.destroyRef))
2978
2972
  .subscribe({
2979
2973
  next: (result) => {
2980
2974
  if (result) {
@@ -3001,12 +2995,13 @@ class XiriButtonComponent {
3001
2995
  });
3002
2996
  this.loading.set(false);
3003
2997
  }
3004
- }));
2998
+ });
3005
2999
  }
3006
3000
  actionDownload() {
3007
3001
  let data = { ...this.filterData(), ...this.button().data };
3008
3002
  this.loading.set(true);
3009
- this.subs.add(this.dataService.postFileResponse(this._url(), data)
3003
+ this.dataService.postFileResponse(this._url(), data)
3004
+ .pipe(takeUntilDestroyed(this.destroyRef))
3010
3005
  .subscribe({
3011
3006
  next: (result) => {
3012
3007
  let filename;
@@ -3034,18 +3029,17 @@ class XiriButtonComponent {
3034
3029
  });
3035
3030
  this.loading.set(false);
3036
3031
  }
3037
- }));
3032
+ });
3038
3033
  }
3039
3034
  ngOnDestroy() {
3040
3035
  if (this.dialogRef) {
3041
3036
  this.dialogRef.close(null);
3042
3037
  }
3043
- this.subs.unsubscribe();
3044
3038
  }
3045
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3046
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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()\"></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()\"></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()\" (click)=\"clicked($event)\"></xiri-buttonstyle>\n\t}\n}\n", styles: [""], dependencies: [{ kind: "component", type: XiriButtonstyleComponent, selector: "xiri-buttonstyle", inputs: ["button", "disabled"] }, { 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 }); }
3039
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3040
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriButtonComponent, isStandalone: true, selector: "xiri-button", inputs: { button: { classPropertyName: "button", publicName: "button", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterData: { classPropertyName: "filterData", publicName: "filterData", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { result: "result" }, ngImport: i0, template: "@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()\"></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()\"></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()\" (click)=\"clicked($event)\"></xiri-buttonstyle>\n\t}\n}\n", styles: [""], dependencies: [{ kind: "component", type: XiriButtonstyleComponent, selector: "xiri-buttonstyle", inputs: ["button", "disabled"] }, { 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 }); }
3047
3041
  }
3048
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriButtonComponent, decorators: [{
3042
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriButtonComponent, decorators: [{
3049
3043
  type: Component,
3050
3044
  args: [{ selector: 'xiri-button', imports: [
3051
3045
  XiriButtonstyleComponent,
@@ -3062,10 +3056,10 @@ class XiriButtonlineComponent {
3062
3056
  this.filterData = input(undefined, ...(ngDevMode ? [{ debugName: "filterData" }] : []));
3063
3057
  this.result = output();
3064
3058
  }
3065
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriButtonlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3066
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
3059
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriButtonlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3060
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriButtonlineComponent, isStandalone: true, selector: "xiri-buttonline", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterData: { classPropertyName: "filterData", publicName: "filterData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { result: "result" }, ngImport: i0, template: "<div class=\"buttonline\" [class]=\"settings().class\">\n\t@for (button of settings().buttons; track i; let i = $index) {\n\t\t<xiri-button [button]=\"button\" [filterData]=\"filterData()\" [disabled]=\"disabled()\" (result)=\"result.emit( $event )\"></xiri-button>\n\t}\n</div>\n", styles: [".buttonline.right{text-align:right}.buttonline.right>xiri-button,.buttonline.right a{margin-left:.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 }); }
3067
3061
  }
3068
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriButtonlineComponent, decorators: [{
3062
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriButtonlineComponent, decorators: [{
3069
3063
  type: Component,
3070
3064
  args: [{ selector: 'xiri-buttonline', imports: [
3071
3065
  XiriButtonComponent
@@ -3131,10 +3125,10 @@ class XiriSessionStorageService {
3131
3125
  }
3132
3126
  return val.value;
3133
3127
  }
3134
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriSessionStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
3135
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriSessionStorageService, providedIn: 'root' }); }
3128
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriSessionStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
3129
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriSessionStorageService, providedIn: 'root' }); }
3136
3130
  }
3137
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriSessionStorageService, decorators: [{
3131
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriSessionStorageService, decorators: [{
3138
3132
  type: Injectable,
3139
3133
  args: [{
3140
3134
  providedIn: 'root'
@@ -3194,10 +3188,10 @@ class XiriNumberService {
3194
3188
  }
3195
3189
  return new Intl.NumberFormat(this.currentLocale, options).format(value);
3196
3190
  }
3197
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriNumberService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
3198
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriNumberService, providedIn: 'root' }); }
3191
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriNumberService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
3192
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriNumberService, providedIn: 'root' }); }
3199
3193
  }
3200
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriNumberService, decorators: [{
3194
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriNumberService, decorators: [{
3201
3195
  type: Injectable,
3202
3196
  args: [{
3203
3197
  providedIn: 'root'
@@ -3209,10 +3203,10 @@ class XiriEmptyStateComponent {
3209
3203
  this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
3210
3204
  this.buttonResult = output();
3211
3205
  }
3212
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3213
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
3206
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3207
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriEmptyStateComponent, isStandalone: true, selector: "xiri-empty-state", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { buttonResult: "buttonResult" }, ngImport: i0, template: "<div class=\"empty-state\">\n\t@if (settings().icon) {\n\t\t<mat-icon [class]=\"settings().iconColor || 'gray'\">{{ settings().icon }}</mat-icon>\n\t}\n\t<div class=\"title\">{{ settings().title }}</div>\n\t@if (settings().description) {\n\t\t<div class=\"description\">{{ settings().description }}</div>\n\t}\n\t@if (settings().button) {\n\t\t<div class=\"action\">\n\t\t\t<xiri-button [button]=\"settings().button\" (result)=\"buttonResult.emit($event)\"></xiri-button>\n\t\t</div>\n\t}\n</div>\n", styles: ["@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 }); }
3214
3208
  }
3215
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriEmptyStateComponent, decorators: [{
3209
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriEmptyStateComponent, decorators: [{
3216
3210
  type: Component,
3217
3211
  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"] }]
3218
3212
  }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }], buttonResult: [{ type: i0.Output, args: ["buttonResult"] }] } });
@@ -3226,6 +3220,7 @@ class XiriTableComponent {
3226
3220
  this.numberService = inject(XiriNumberService);
3227
3221
  this.snackbar = inject(XiriSnackbarService);
3228
3222
  this._changeDetectorRef = inject(ChangeDetectorRef);
3223
+ this.destroyRef = inject(DestroyRef);
3229
3224
  this.dyncomponent = input(...(ngDevMode ? [undefined, { debugName: "dyncomponent" }] : []));
3230
3225
  this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
3231
3226
  this.filterData = input(undefined, ...(ngDevMode ? [{ debugName: "filterData" }] : []));
@@ -3245,7 +3240,6 @@ class XiriTableComponent {
3245
3240
  this.extraHeaders = [];
3246
3241
  this.selection = new SelectionModel(true, []);
3247
3242
  this.subs = new Subscription();
3248
- this.subsStatic = new Subscription();
3249
3243
  this.options = {
3250
3244
  reload: false,
3251
3245
  dense: false,
@@ -3311,14 +3305,18 @@ class XiriTableComponent {
3311
3305
  this.sort().sortChange.subscribe(() => this.paginator().firstPage());
3312
3306
  }
3313
3307
  if (this.options.serverSide) {
3314
- this.subsStatic.add(this.paginator().page.subscribe(() => {
3308
+ this.paginator().page
3309
+ .pipe(takeUntilDestroyed(this.destroyRef))
3310
+ .subscribe(() => {
3315
3311
  this.reload();
3316
- }));
3312
+ });
3317
3313
  if (this.options.sort) {
3318
- this.subsStatic.add(this.sort().sortChange.subscribe(() => {
3314
+ this.sort().sortChange
3315
+ .pipe(takeUntilDestroyed(this.destroyRef))
3316
+ .subscribe(() => {
3319
3317
  this.paginator().firstPage();
3320
3318
  this.reload();
3321
- }));
3319
+ });
3322
3320
  }
3323
3321
  }
3324
3322
  if (this.options.search && !this.options.serverSide) {
@@ -3331,7 +3329,8 @@ class XiriTableComponent {
3331
3329
  }
3332
3330
  if (this.options.buttons)
3333
3331
  this.options.buttons.class = 'small';
3334
- this.subsStatic.add(this.dataSource.connect()
3332
+ this.dataSource.connect()
3333
+ .pipe(takeUntilDestroyed(this.destroyRef))
3335
3334
  .subscribe(data => {
3336
3335
  this._displayeddata = data || [];
3337
3336
  if (this.options.saveState && this._firstData === false) {
@@ -3362,7 +3361,7 @@ class XiriTableComponent {
3362
3361
  }
3363
3362
  });
3364
3363
  }
3365
- }));
3364
+ });
3366
3365
  // if ( !this.settings().hasFilter )
3367
3366
  // this.loadData();
3368
3367
  }
@@ -3638,7 +3637,6 @@ class XiriTableComponent {
3638
3637
  }
3639
3638
  ngOnDestroy() {
3640
3639
  this.cleanup();
3641
- this.subsStatic.unsubscribe();
3642
3640
  }
3643
3641
  pasteInput($event, row, column) {
3644
3642
  if (column.inputPaste !== true)
@@ -3715,10 +3713,10 @@ class XiriTableComponent {
3715
3713
  return data[sortHeaderId];
3716
3714
  };
3717
3715
  }
3718
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3719
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 ('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()\">\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-radius:var(--mat-card-elevated-container-shape, 12px)}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"] }, { 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 }); }
3716
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3717
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriTableComponent, isStandalone: true, selector: "xiri-table", inputs: { dyncomponent: { classPropertyName: "dyncomponent", publicName: "dyncomponent", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, filterData: { classPropertyName: "filterData", publicName: "filterData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickedRow: "clickedRow" }, 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()\">\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-radius:var(--mat-card-elevated-container-shape, 12px)}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"] }, { 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 }); }
3720
3718
  }
3721
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriTableComponent, decorators: [{
3719
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriTableComponent, decorators: [{
3722
3720
  type: Component,
3723
3721
  args: [{ selector: 'xiri-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [MatCard,
3724
3722
  MatIconButton,
@@ -3747,7 +3745,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
3747
3745
  SafehtmlPipe, XiriButtonComponent, MatHeaderCellDef, MatCellDef, MatHeaderRowDef, MatRowDef,
3748
3746
  MatFooterRow, MatFooterRowDef, MatFooterCell, MatFooterCellDef,
3749
3747
  MatMenu, MatMenuItem, MatMenuTrigger,
3750
- 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 ('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()\">\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-radius:var(--mat-card-elevated-container-shape, 12px)}xiri-dyncomponent{margin-bottom:2rem}[hidden]{display:none!important}\n"] }]
3748
+ 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()\">\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-radius:var(--mat-card-elevated-container-shape, 12px)}xiri-dyncomponent{margin-bottom:2rem}[hidden]{display:none!important}\n"] }]
3751
3749
  }], 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 }] }] } });
3752
3750
 
3753
3751
  class XiriFormService {
@@ -3857,7 +3855,6 @@ class XiriFormService {
3857
3855
  break;
3858
3856
  case 'daterange':
3859
3857
  case 'datetimerange':
3860
- console.log('query save check daterange', field, value);
3861
3858
  break;
3862
3859
  default:
3863
3860
  break;
@@ -3870,10 +3867,10 @@ class XiriFormService {
3870
3867
  return;
3871
3868
  this.sessionStorageService.set(saveStateId, values);
3872
3869
  }
3873
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
3874
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriFormService, providedIn: 'root' }); }
3870
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
3871
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriFormService, providedIn: 'root' }); }
3875
3872
  }
3876
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriFormService, decorators: [{
3873
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriFormService, decorators: [{
3877
3874
  type: Injectable,
3878
3875
  args: [{
3879
3876
  providedIn: 'root',
@@ -3885,11 +3882,11 @@ class XiriFormComponent {
3885
3882
  this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
3886
3883
  this.location = inject(Location);
3887
3884
  this.formService = inject(XiriFormService);
3885
+ this.destroyRef = inject(DestroyRef);
3888
3886
  this.formFields = signal(null, ...(ngDevMode ? [{ debugName: "formFields" }] : []));
3889
3887
  this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : []));
3890
3888
  this.done = signal(false, ...(ngDevMode ? [{ debugName: "done" }] : []));
3891
3889
  this.error = signal('', ...(ngDevMode ? [{ debugName: "error" }] : []));
3892
- this.subs = new Subscription();
3893
3890
  this.extra = {};
3894
3891
  this.formValues = null;
3895
3892
  this.formValid = true;
@@ -3906,7 +3903,7 @@ class XiriFormComponent {
3906
3903
  send(data) {
3907
3904
  this.loading.set(true);
3908
3905
  this.error.set('');
3909
- this.subs.add(this.formService.get(this.url, data, this.extra).subscribe({
3906
+ this.formService.get(this.url, data, this.extra).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
3910
3907
  next: (res) => {
3911
3908
  this.loadData(res);
3912
3909
  },
@@ -3921,7 +3918,7 @@ class XiriFormComponent {
3921
3918
  }];
3922
3919
  }
3923
3920
  }
3924
- }));
3921
+ });
3925
3922
  }
3926
3923
  loadData(res) {
3927
3924
  if (res.buttons) {
@@ -3935,12 +3932,11 @@ class XiriFormComponent {
3935
3932
  this.done.set(true);
3936
3933
  this.formFields.set(null);
3937
3934
  this.buttons = [];
3938
- this.subs.add(res.done.subscribe());
3935
+ res.done.pipe(takeUntilDestroyed(this.destroyRef)).subscribe();
3939
3936
  }
3940
3937
  this.loading.set(false);
3941
3938
  }
3942
3939
  clickButton(button) {
3943
- console.log('XiriFormComponent clickButton', button);
3944
3940
  if (button.action == 'back')
3945
3941
  this.location.back();
3946
3942
  else if (button.action == 'get') {
@@ -3953,10 +3949,8 @@ class XiriFormComponent {
3953
3949
  }
3954
3950
  else if (button.action == 'debug') {
3955
3951
  this.checkSubject.next();
3956
- console.log(this.formValid, this.formValues);
3957
3952
  }
3958
3953
  else if (button.action == 'simulate') {
3959
- console.log(this.formValid, this.formValues);
3960
3954
  if (this.formValid) {
3961
3955
  this.loading.set(true);
3962
3956
  this.error.set('');
@@ -3989,13 +3983,10 @@ class XiriFormComponent {
3989
3983
  // data = { ...data, ...this.extra }
3990
3984
  // this.events.push( '' + this.formValid + ' => ' + JSON.stringify( event.value ) );
3991
3985
  }
3992
- ngOnDestroy() {
3993
- this.subs.unsubscribe();
3994
- }
3995
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3996
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: XiriFormComponent, isStandalone: true, selector: "xiri-form", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"xrow\" cdkTrapFocus>\n\t<div class=\"xcol\">\n\t\t@if (loading()) {\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)\" [hidden]=\"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}\n\t@else if (!loading()) {\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\"></xiri-buttonstyle>\n\t\t\t\t} @else {\n\t\t\t\t\t<xiri-buttonstyle (click)=\"clickButton( button )\" [button]=\"button\" [disabled]=\"false\"></xiri-buttonstyle>\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n</div>\n\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", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3986
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3987
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriFormComponent, isStandalone: true, selector: "xiri-form", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"xrow\" cdkTrapFocus>\n\t<div class=\"xcol\">\n\t\t@if (loading()) {\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)\" [hidden]=\"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}\n\t@else if (!loading()) {\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\"></xiri-buttonstyle>\n\t\t\t\t} @else {\n\t\t\t\t\t<xiri-buttonstyle (click)=\"clickButton( button )\" [button]=\"button\" [disabled]=\"false\"></xiri-buttonstyle>\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n</div>\n\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", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3997
3988
  }
3998
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriFormComponent, decorators: [{
3989
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriFormComponent, decorators: [{
3999
3990
  type: Component,
4000
3991
  args: [{ selector: 'xiri-form', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkTrapFocus,
4001
3992
  MatProgressSpinner,
@@ -4010,10 +4001,10 @@ class XiriQueryComponent {
4010
4001
  this.dataService = inject(XiriDataService);
4011
4002
  this.formService = inject(XiriFormService);
4012
4003
  this.cdr = inject(ChangeDetectorRef);
4004
+ this.destroyRef = inject(DestroyRef);
4013
4005
  this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
4014
4006
  this.dyncomponent = input(...(ngDevMode ? [undefined, { debugName: "dyncomponent" }] : []));
4015
4007
  this.change = output();
4016
- this.subs = new Subscription();
4017
4008
  this.waiter = new Subject();
4018
4009
  this.dynData = { data: null, filterData: null };
4019
4010
  this.saveState = false;
@@ -4035,7 +4026,7 @@ class XiriQueryComponent {
4035
4026
  this.saveStateId = settings.saveStateId === undefined ? null : settings.saveStateId;
4036
4027
  this.formFields.set(this.formService.loadState(settings.saveStateId, settings.fields));
4037
4028
  this.extra = settings.extra || null;
4038
- this.subs.add(this.waiter.pipe(debounceTime(300)).subscribe(event => {
4029
+ this.waiter.pipe(debounceTime(300), takeUntilDestroyed(this.destroyRef)).subscribe(event => {
4039
4030
  if (event.valid) {
4040
4031
  this.dynData.filterData = this.filterData();
4041
4032
  this.change.emit(this.filterData());
@@ -4050,7 +4041,7 @@ class XiriQueryComponent {
4050
4041
  this.change.emit(null);
4051
4042
  }
4052
4043
  this.cdr.markForCheck();
4053
- }));
4044
+ });
4054
4045
  }
4055
4046
  formChanged(event) {
4056
4047
  this.formValid.set(event.valid);
@@ -4076,9 +4067,6 @@ class XiriQueryComponent {
4076
4067
  this.waiter.next(event);
4077
4068
  }
4078
4069
  }
4079
- ngOnDestroy() {
4080
- this.subs.unsubscribe();
4081
- }
4082
4070
  clickedButton(event) {
4083
4071
  if (!event.loading && event.done) {
4084
4072
  this.data.set(event.result);
@@ -4095,7 +4083,7 @@ class XiriQueryComponent {
4095
4083
  this.data.set(null);
4096
4084
  this.error.set(null);
4097
4085
  let call = this.dataService.post(this.settings().url, this.dynData.filterData);
4098
- this.subs.add(call.subscribe({
4086
+ call.pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
4099
4087
  next: (res) => {
4100
4088
  if (!res) {
4101
4089
  this.error.set('Unknown Error');
@@ -4123,12 +4111,12 @@ class XiriQueryComponent {
4123
4111
  console.log('XiriQueryComponent error', err);
4124
4112
  this.cdr.markForCheck();
4125
4113
  }
4126
- }));
4114
+ });
4127
4115
  }
4128
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriQueryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4129
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: XiriQueryComponent, isStandalone: true, selector: "xiri-query", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, dyncomponent: { classPropertyName: "dyncomponent", publicName: "dyncomponent", isSignal: true, isRequired: false, transformFunction: null } }, 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", "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 }); }
4116
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriQueryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4117
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriQueryComponent, isStandalone: true, selector: "xiri-query", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, dyncomponent: { classPropertyName: "dyncomponent", publicName: "dyncomponent", isSignal: true, isRequired: false, transformFunction: null } }, 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", "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 }); }
4130
4118
  }
4131
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriQueryComponent, decorators: [{
4119
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriQueryComponent, decorators: [{
4132
4120
  type: Component,
4133
4121
  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"] }]
4134
4122
  }], 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"] }] } });
@@ -4145,10 +4133,10 @@ class XiriSkeletonComponent {
4145
4133
  this.linesArray = computed(() => Array.from({ length: this.lines() }), ...(ngDevMode ? [{ debugName: "linesArray" }] : []));
4146
4134
  this.columnsArray = computed(() => Array.from({ length: this.columns() }), ...(ngDevMode ? [{ debugName: "columnsArray" }] : []));
4147
4135
  }
4148
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4149
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
4136
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4137
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriSkeletonComponent, isStandalone: true, selector: "xiri-skeleton", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-label": "Laden..." }, properties: { "class.fill": "fill()" } }, ngImport: i0, template: "@switch (type()) {\n\t@case ('text') {\n\t\t<div class=\"skeleton-text\">\n\t\t\t@for (_ of linesArray(); track $index) {\n\t\t\t\t<div class=\"skeleton-line\" [class.animate]=\"animate()\"\n\t\t\t\t [style.width]=\"$last ? '60%' : width()\"\n\t\t\t\t [style.height]=\"height()\"></div>\n\t\t\t}\n\t\t</div>\n\t}\n\t@case ('circle') {\n\t\t<div class=\"skeleton-circle\" [class.animate]=\"animate()\"\n\t\t [style.width]=\"width()\"\n\t\t [style.height]=\"width()\"></div>\n\t}\n\t@case ('rect') {\n\t\t<div class=\"skeleton-rect\" [class.animate]=\"animate()\"\n\t\t [style.width]=\"width()\"\n\t\t [style.height]=\"height()\"></div>\n\t}\n\t@case ('table-row') {\n\t\t<div class=\"skeleton-table\" [class.fill-height]=\"fill()\">\n\t\t\t@for (_ of linesArray(); track $index) {\n\t\t\t\t<div class=\"skeleton-table-row\">\n\t\t\t\t\t@for (_ of columnsArray(); track $index) {\n\t\t\t\t\t\t<div class=\"skeleton-table-cell\">\n\t\t\t\t\t\t\t<div class=\"skeleton-line\" [class.animate]=\"animate()\"></div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t}\n}\n", styles: ["@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 }); }
4150
4138
  }
4151
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriSkeletonComponent, decorators: [{
4139
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriSkeletonComponent, decorators: [{
4152
4140
  type: Component,
4153
4141
  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"] }]
4154
4142
  }], 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 }] }] } });
@@ -4156,11 +4144,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
4156
4144
  class XiriCardComponent {
4157
4145
  constructor() {
4158
4146
  this.dataService = inject(XiriDataService);
4159
- this.cdr = inject(ChangeDetectorRef);
4160
- this.subs = new Subscription();
4147
+ this.destroyRef = inject(DestroyRef);
4161
4148
  this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
4162
4149
  this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
4163
4150
  this.errorMsg = signal('', ...(ngDevMode ? [{ debugName: "errorMsg" }] : []));
4151
+ this.isCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
4164
4152
  this._data = signal(null, ...(ngDevMode ? [{ debugName: "_data" }] : []));
4165
4153
  this.cardData = computed(() => this._data() ?? this.settings().data, ...(ngDevMode ? [{ debugName: "cardData" }] : []));
4166
4154
  this.rawTable = computed(() => {
@@ -4221,6 +4209,12 @@ class XiriCardComponent {
4221
4209
  }
4222
4210
  return rt;
4223
4211
  }, ...(ngDevMode ? [{ debugName: "rawTable" }] : []));
4212
+ effect(() => {
4213
+ const s = this.settings();
4214
+ if (s.collapsed !== undefined) {
4215
+ this.isCollapsed.set(s.collapsed);
4216
+ }
4217
+ });
4224
4218
  effect(() => {
4225
4219
  const url = this.settings().url;
4226
4220
  if (url) {
@@ -4228,34 +4222,34 @@ class XiriCardComponent {
4228
4222
  }
4229
4223
  });
4230
4224
  }
4225
+ toggleCollapse() {
4226
+ this.isCollapsed.update(v => !v);
4227
+ }
4231
4228
  loadData() {
4232
4229
  this.loading.set(true);
4233
4230
  this.errorMsg.set('');
4234
- this.subs.add(this.dataService.post(this.settings().url, null).subscribe({
4231
+ this.dataService.post(this.settings().url, null)
4232
+ .pipe(takeUntilDestroyed(this.destroyRef))
4233
+ .subscribe({
4235
4234
  next: (res) => {
4236
4235
  this._data.set(res.data ?? res);
4237
4236
  this.loading.set(false);
4238
- this.cdr.markForCheck();
4239
4237
  },
4240
4238
  error: (err) => {
4241
4239
  this.errorMsg.set(err.error?.error || 'Fehler beim Laden');
4242
4240
  this.loading.set(false);
4243
- this.cdr.markForCheck();
4244
4241
  }
4245
- }));
4242
+ });
4246
4243
  }
4247
4244
  reload() {
4248
4245
  if (this.loading())
4249
4246
  return;
4250
4247
  this.loadData();
4251
4248
  }
4252
- ngOnDestroy() {
4253
- this.subs.unsubscribe();
4254
- }
4255
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4256
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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().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 (loading() && !cardData()) {\n\t\t<mat-card-content>\n\t\t\t<xiri-skeleton type=\"table-row\" [columns]=\"2\" [lines]=\"3\"></xiri-skeleton>\n\t\t</mat-card-content>\n\t} @else if (errorMsg()) {\n\t\t<mat-card-content>\n\t\t\t<div class=\"load-error\">{{ errorMsg() }}</div>\n\t\t</mat-card-content>\n\t} @else {\n\t\t<mat-card-content class=\"hasTable\">\n\t\t\t@if (rawTable()) {\n\t\t\t\t<xiri-raw-table [settings]=\"rawTable()!\"></xiri-raw-table>\n\t\t\t}\n\t\t</mat-card-content>\n\t}\n\t@if (settings().buttonsBottom) {\n\t\t<mat-card-actions align=\"end\">\n\t\t\t<xiri-buttonline [settings]=\"settings().buttonsBottom\"></xiri-buttonline>\n\t\t</mat-card-actions>\n\t}\n\t@else if (settings().buttons) {\n\t\t<mat-card-actions align=\"end\">\n\t\t\t<xiri-buttonline [settings]=\"{buttons: settings().buttons, class: '' }\"></xiri-buttonline>\n\t\t</mat-card-actions>\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 .reload-btn{margin-left:auto;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{max-height:50vh;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 }); }
4249
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4250
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriCardComponent, isStandalone: true, selector: "xiri-card", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t<mat-card-header>\n\t\t@if (settings().headerIcon) {\n\t\t\t<div mat-card-avatar class=\"header-image\">\n\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t</div>\n\t\t}\n\t\t@if (settings().header) {\n\t\t\t<mat-card-title [class]=\"{hasHeaderSub: settings().headerSub}\">{{ settings().header }}</mat-card-title>\n\t\t}\n\t\t@if (settings().headerSub) {\n\t\t\t<mat-card-subtitle>{{ settings().headerSub }}</mat-card-subtitle>\n\t\t}\n\t\t@if (settings().buttonsTop) {\n\t\t\t<xiri-buttonline [settings]=\"settings().buttonsTop\"></xiri-buttonline>\n\t\t}\n\t\t@if (settings().collapsible) {\n\t\t\t<button mat-icon-button (click)=\"toggleCollapse()\" class=\"collapse-btn\" aria-label=\"Auf-/Zuklappen\">\n\t\t\t\t<mat-icon>{{ isCollapsed() ? 'expand_more' : 'expand_less' }}</mat-icon>\n\t\t\t</button>\n\t\t}\n\t\t@if (settings().reload && settings().url) {\n\t\t\t<button mat-icon-button (click)=\"reload()\" [disabled]=\"loading()\" class=\"reload-btn\" aria-label=\"Neu laden\">\n\t\t\t\t<mat-icon [class.spinning]=\"loading()\">autorenew</mat-icon>\n\t\t\t</button>\n\t\t}\n\t</mat-card-header>\n\t@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 }); }
4257
4251
  }
4258
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriCardComponent, decorators: [{
4252
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriCardComponent, decorators: [{
4259
4253
  type: Component,
4260
4254
  args: [{ selector: 'xiri-card', imports: [MatCard,
4261
4255
  MatCardHeader,
@@ -4268,7 +4262,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
4268
4262
  MatCardContent,
4269
4263
  XiriRawTableComponent,
4270
4264
  XiriSkeletonComponent,
4271
- 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().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 (loading() && !cardData()) {\n\t\t<mat-card-content>\n\t\t\t<xiri-skeleton type=\"table-row\" [columns]=\"2\" [lines]=\"3\"></xiri-skeleton>\n\t\t</mat-card-content>\n\t} @else if (errorMsg()) {\n\t\t<mat-card-content>\n\t\t\t<div class=\"load-error\">{{ errorMsg() }}</div>\n\t\t</mat-card-content>\n\t} @else {\n\t\t<mat-card-content class=\"hasTable\">\n\t\t\t@if (rawTable()) {\n\t\t\t\t<xiri-raw-table [settings]=\"rawTable()!\"></xiri-raw-table>\n\t\t\t}\n\t\t</mat-card-content>\n\t}\n\t@if (settings().buttonsBottom) {\n\t\t<mat-card-actions align=\"end\">\n\t\t\t<xiri-buttonline [settings]=\"settings().buttonsBottom\"></xiri-buttonline>\n\t\t</mat-card-actions>\n\t}\n\t@else if (settings().buttons) {\n\t\t<mat-card-actions align=\"end\">\n\t\t\t<xiri-buttonline [settings]=\"{buttons: settings().buttons, class: '' }\"></xiri-buttonline>\n\t\t</mat-card-actions>\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 .reload-btn{margin-left:auto;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{max-height:50vh;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"] }]
4265
+ 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"] }]
4272
4266
  }], ctorParameters: () => [], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
4273
4267
 
4274
4268
  class XiriImagetextComponent {
@@ -4276,10 +4270,10 @@ class XiriImagetextComponent {
4276
4270
  this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
4277
4271
  this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : []));
4278
4272
  }
4279
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriImagetextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4280
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
4273
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriImagetextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4274
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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 }); }
4281
4275
  }
4282
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriImagetextComponent, decorators: [{
4276
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriImagetextComponent, decorators: [{
4283
4277
  type: Component,
4284
4278
  args: [{ selector: 'xiri-imagetext', imports: [MatCard,
4285
4279
  MatCardHeader,
@@ -4296,10 +4290,10 @@ class XiriMultiprogressComponent {
4296
4290
  this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
4297
4291
  this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
4298
4292
  }
4299
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriMultiprogressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4300
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
4293
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriMultiprogressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4294
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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 }); }
4301
4295
  }
4302
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriMultiprogressComponent, decorators: [{
4296
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriMultiprogressComponent, decorators: [{
4303
4297
  type: Component,
4304
4298
  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"] }]
4305
4299
  }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
@@ -4308,10 +4302,10 @@ class XiriInfopointComponent {
4308
4302
  constructor() {
4309
4303
  this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
4310
4304
  }
4311
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriInfopointComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4312
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
4305
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriInfopointComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4306
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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 }); }
4313
4307
  }
4314
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriInfopointComponent, decorators: [{
4308
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriInfopointComponent, decorators: [{
4315
4309
  type: Component,
4316
4310
  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"] }]
4317
4311
  }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
@@ -4320,22 +4314,19 @@ class XiriListComponent {
4320
4314
  constructor() {
4321
4315
  this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
4322
4316
  this.dataService = inject(XiriDataService);
4323
- this.subs = new Subscription();
4317
+ this.destroyRef = inject(DestroyRef);
4324
4318
  }
4325
4319
  changeFavorite(item, event) {
4326
4320
  event.stopPropagation();
4327
4321
  event.preventDefault();
4328
4322
  let url = item.favoriteUrl + (item.isFavorite ? '0' : '1');
4329
- this.subs.add(this.dataService.get(url).subscribe());
4323
+ this.dataService.get(url).pipe(takeUntilDestroyed(this.destroyRef)).subscribe();
4330
4324
  item.isFavorite = !item.isFavorite;
4331
4325
  }
4332
- ngOnDestroy() {
4333
- this.subs.unsubscribe();
4334
- }
4335
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4336
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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.emerald{background-color:var(--primary, #2892D9)!important}.card .list-icon.red{background-color:#e74c3c!important}.card .list-icon.yellow{background-color:#f1c40f!important}.card .list-icon.green{background-color:var(--color-success, #2ECC71)!important}.card .list-icon.purple{background-color:#9b59b6!important}.card .list-icon.gray{background-color:#95a5a6!important}.card .list-icon.white{background-color:var(--surface, #FFFFFF)!important}.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 }); }
4326
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4327
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriListComponent, isStandalone: true, selector: "xiri-list", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (section of settings().sections; track section) {\n\t@if (section.name) {\n\t\t<div mat-subheader>{{ section.name }}</div>\n\t}\n\t<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t\t<mat-card-content>\n\t\t\t<mat-nav-list>\n\t\t\t\t@for (item of section.data; track item) {\n\t\t\t\t\t<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 }); }
4337
4328
  }
4338
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriListComponent, decorators: [{
4329
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriListComponent, decorators: [{
4339
4330
  type: Component,
4340
4331
  args: [{ selector: 'xiri-list', imports: [
4341
4332
  MatListSubheaderCssMatStyler,
@@ -4351,17 +4342,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
4351
4342
  MatListItemMeta,
4352
4343
  MatIconButton,
4353
4344
  MatTooltip,
4354
- ], 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.emerald{background-color:var(--primary, #2892D9)!important}.card .list-icon.red{background-color:#e74c3c!important}.card .list-icon.yellow{background-color:#f1c40f!important}.card .list-icon.green{background-color:var(--color-success, #2ECC71)!important}.card .list-icon.purple{background-color:#9b59b6!important}.card .list-icon.gray{background-color:#95a5a6!important}.card .list-icon.white{background-color:var(--surface, #FFFFFF)!important}.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"] }]
4345
+ ], 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"] }]
4355
4346
  }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
4356
4347
 
4357
4348
  class XiriHeaderComponent {
4358
4349
  constructor() {
4359
4350
  this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
4360
4351
  }
4361
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4362
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", 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 }); }
4352
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4353
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: XiriHeaderComponent, isStandalone: true, selector: "xiri-header", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"name\" [class]=\"settings().color + ' ' + settings().size\">{{ settings().text }}</div>\n", styles: [".name{font-size:1.6rem;padding-top:1rem}.name.x1{font-size:1rem}.name.x15{font-size:1.5rem}.name.x2{font-size:2rem}.name.x25{font-size:2.5rem}.name.x3{font-size:3rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
4363
4354
  }
4364
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriHeaderComponent, decorators: [{
4355
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriHeaderComponent, decorators: [{
4365
4356
  type: Component,
4366
4357
  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"] }]
4367
4358
  }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
@@ -4536,10 +4527,10 @@ class XiriStepperComponent {
4536
4527
  const url = step.url ? step.url : this.settings().url;
4537
4528
  return this.dataService.post(url, data);
4538
4529
  }
4539
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4540
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: XiriStepperComponent, isStandalone: true, selector: "xiri-stepper", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "stepper", first: true, predicate: MatStepper, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-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)\"></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", "check"], outputs: ["formChange"] }, { kind: "component", type: XiriErrorComponent, selector: "xiri-error", inputs: ["text"] }, { kind: "component", type: XiriButtonstyleComponent, selector: "xiri-buttonstyle", inputs: ["button", "disabled"] }, { kind: "component", type: XiriDoneComponent, selector: "xiri-done" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
4530
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4531
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriStepperComponent, isStandalone: true, selector: "xiri-stepper", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "stepper", first: true, predicate: MatStepper, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-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)\"></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", "check"], outputs: ["formChange"] }, { kind: "component", type: XiriErrorComponent, selector: "xiri-error", inputs: ["text"] }, { kind: "component", type: XiriButtonstyleComponent, selector: "xiri-buttonstyle", inputs: ["button", "disabled"] }, { kind: "component", type: XiriDoneComponent, selector: "xiri-done" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
4541
4532
  }
4542
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriStepperComponent, decorators: [{
4533
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriStepperComponent, decorators: [{
4543
4534
  type: Component,
4544
4535
  args: [{ selector: 'xiri-stepper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatStepper,
4545
4536
  MatStep,
@@ -4576,10 +4567,10 @@ class XiriLinksComponent {
4576
4567
  });
4577
4568
  return true;
4578
4569
  }
4579
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriLinksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4580
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
4570
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriLinksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4571
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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 }); }
4581
4572
  }
4582
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriLinksComponent, decorators: [{
4573
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriLinksComponent, decorators: [{
4583
4574
  type: Component,
4584
4575
  args: [{ selector: 'xiri-links', imports: [MatCard,
4585
4576
  MatCardHeader,
@@ -4599,10 +4590,10 @@ class XiriCardlinkComponent {
4599
4590
  constructor() {
4600
4591
  this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
4601
4592
  }
4602
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriCardlinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4603
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
4593
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriCardlinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4594
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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 }); }
4604
4595
  }
4605
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriCardlinkComponent, decorators: [{
4596
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriCardlinkComponent, decorators: [{
4606
4597
  type: Component,
4607
4598
  args: [{ selector: 'xiri-cardlink', imports: [RouterLink,
4608
4599
  MatCard,
@@ -4650,10 +4641,10 @@ class XiriTabsComponent {
4650
4641
  return true;
4651
4642
  return this.visitedTabs().has(index);
4652
4643
  }
4653
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4654
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
4644
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4645
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriTabsComponent, isStandalone: true, selector: "xiri-tabs", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, filterData: { classPropertyName: "filterData", publicName: "filterData", isSignal: true, isRequired: false, transformFunction: null }, dyncomponent: { classPropertyName: "dyncomponent", publicName: "dyncomponent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-tab-group\n\t[selectedIndex]=\"selectedIndex()\"\n\t[dynamicHeight]=\"settings().dynamicHeight ?? false\"\n\t[animationDuration]=\"settings().animationDuration ?? '225ms'\"\n\t[headerPosition]=\"settings().headerPosition ?? 'above'\"\n\t[mat-align-tabs]=\"settings().alignTabs ?? 'start'\"\n\t[mat-stretch-tabs]=\"settings().stretchTabs ?? false\"\n\t(selectedIndexChange)=\"onTabChange($event)\">\n\n\t@for (tab of settings().tabs; track tab.label; let i = $index) {\n\t\t<mat-tab [disabled]=\"tab.disabled ?? false\">\n\t\t\t<ng-template mat-tab-label>\n\t\t\t\t@if (tab.icon) {\n\t\t\t\t\t<mat-icon>{{ tab.icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t\t{{ tab.label }}\n\t\t\t</ng-template>\n\n\t\t\t@if (shouldRenderContent(i, tab)) {\n\t\t\t\t<ng-container *ngTemplateOutlet=\"dyncomponent(); context: { $implicit: { data: tab.data, filterData: filterData() } }\"></ng-container>\n\t\t\t}\n\t\t</mat-tab>\n\t}\n</mat-tab-group>\n", styles: [":host{display:block}mat-icon{margin-right:8px}::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 }); }
4655
4646
  }
4656
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriTabsComponent, decorators: [{
4647
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriTabsComponent, decorators: [{
4657
4648
  type: Component,
4658
4649
  args: [{ selector: 'xiri-tabs', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
4659
4650
  MatTabGroup,
@@ -4702,10 +4693,10 @@ class XiriExpansionComponent {
4702
4693
  return true;
4703
4694
  return this.visitedPanels().has(index);
4704
4695
  }
4705
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriExpansionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4706
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
4696
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriExpansionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4697
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriExpansionComponent, isStandalone: true, selector: "xiri-expansion", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, filterData: { classPropertyName: "filterData", publicName: "filterData", isSignal: true, isRequired: false, transformFunction: null }, dyncomponent: { classPropertyName: "dyncomponent", publicName: "dyncomponent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-accordion\n\t[multi]=\"settings().multi ?? false\"\n\t[displayMode]=\"settings().displayMode ?? 'default'\"\n\t[hideToggle]=\"settings().hideToggle ?? false\"\n\t[togglePosition]=\"settings().togglePosition ?? 'after'\">\n\n\t@for (panel of settings().panels; track panel.title; let i = $index) {\n\t\t<mat-expansion-panel\n\t\t\t[disabled]=\"panel.disabled ?? false\"\n\t\t\t[expanded]=\"panel.expanded ?? false\"\n\t\t\t(opened)=\"onPanelOpened(i)\"\n\t\t\t(closed)=\"onPanelClosed(i)\">\n\n\t\t\t<mat-expansion-panel-header>\n\t\t\t\t@if (panel.icon) {\n\t\t\t\t\t<mat-icon>{{ panel.icon }}</mat-icon>\n\t\t\t\t}\n\t\t\t\t<mat-panel-title>{{ panel.title }}</mat-panel-title>\n\t\t\t\t@if (panel.description) {\n\t\t\t\t\t<mat-panel-description>{{ panel.description }}</mat-panel-description>\n\t\t\t\t}\n\t\t\t</mat-expansion-panel-header>\n\n\t\t\t@if (shouldRenderContent(i, panel)) {\n\t\t\t\t<ng-container *ngTemplateOutlet=\"dyncomponent(); context: { $implicit: { data: panel.data, filterData: filterData() } }\"></ng-container>\n\t\t\t}\n\t\t</mat-expansion-panel>\n\t}\n</mat-accordion>\n", styles: [":host{display:block}mat-icon{margin-right:8px}\n"], dependencies: [{ kind: "directive", type: MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
4707
4698
  }
4708
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriExpansionComponent, decorators: [{
4699
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriExpansionComponent, decorators: [{
4709
4700
  type: Component,
4710
4701
  args: [{ selector: 'xiri-expansion', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
4711
4702
  MatAccordion,
@@ -4722,34 +4713,34 @@ class XiriStatComponent {
4722
4713
  constructor() {
4723
4714
  this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
4724
4715
  }
4725
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriStatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4726
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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}.stat-icon mat-icon{font-size:36px;width:36px;height:36px;opacity:.8}.stat-data{flex:1}.stat-value{font-size:1.75rem;font-weight:600;line-height:1.2;color:var(--on-surface, #1B1B1F)}.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}.stat-trend{display:flex;align-items:center;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 }); }
4716
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriStatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4717
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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 }); }
4727
4718
  }
4728
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriStatComponent, decorators: [{
4719
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriStatComponent, decorators: [{
4729
4720
  type: Component,
4730
- 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}.stat-icon mat-icon{font-size:36px;width:36px;height:36px;opacity:.8}.stat-data{flex:1}.stat-value{font-size:1.75rem;font-weight:600;line-height:1.2;color:var(--on-surface, #1B1B1F)}.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}.stat-trend{display:flex;align-items:center;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"] }]
4721
+ 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"] }]
4731
4722
  }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
4732
4723
 
4733
4724
  class XiriTimelineComponent {
4734
4725
  constructor() {
4735
4726
  this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
4736
4727
  }
4737
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4738
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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.accent{background:var(--accent, #69f0ae)}.timeline-dot.warn{background:var(--warn, #f44336)}.timeline-dot.success{background:var(--color-success, #4caf50)}.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 }); }
4728
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4729
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriTimelineComponent, isStandalone: true, selector: "xiri-timeline", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"timeline\">\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 }); }
4739
4730
  }
4740
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriTimelineComponent, decorators: [{
4731
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriTimelineComponent, decorators: [{
4741
4732
  type: Component,
4742
- 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.accent{background:var(--accent, #69f0ae)}.timeline-dot.warn{background:var(--warn, #f44336)}.timeline-dot.success{background:var(--color-success, #4caf50)}.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"] }]
4733
+ 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"] }]
4743
4734
  }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
4744
4735
 
4745
4736
  class XiriPageHeaderComponent {
4746
4737
  constructor() {
4747
4738
  this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
4748
4739
  }
4749
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4750
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
4740
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4741
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriPageHeaderComponent, isStandalone: true, selector: "xiri-page-header", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"page-header\">\n\t<div class=\"page-header-content\">\n\t\t@if (settings().icon) {\n\t\t\t<div class=\"page-header-icon\" [class]=\"settings().iconColor || 'primary'\">\n\t\t\t\t<mat-icon>{{ settings().icon }}</mat-icon>\n\t\t\t</div>\n\t\t}\n\t\t<div class=\"page-header-text\">\n\t\t\t<h1>{{ settings().title }}</h1>\n\t\t\t@if (settings().subtitle) {\n\t\t\t\t<p>{{ settings().subtitle }}</p>\n\t\t\t}\n\t\t</div>\n\t</div>\n\t@if (settings().buttons) {\n\t\t<xiri-buttonline [settings]=\"settings().buttons!\"></xiri-buttonline>\n\t}\n</div>\n", styles: [".page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--xiri-spacing-md, 1rem);padding:var(--xiri-spacing-lg, 1.5rem) 0 var(--xiri-spacing-sm, .5rem);border-bottom:3px solid var(--primary);margin-bottom:var(--xiri-spacing-lg, 1.5rem)}.page-header h1{font-size: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 }); }
4751
4742
  }
4752
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriPageHeaderComponent, decorators: [{
4743
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriPageHeaderComponent, decorators: [{
4753
4744
  type: Component,
4754
4745
  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"] }]
4755
4746
  }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
@@ -4768,10 +4759,10 @@ class XiriSectionComponent {
4768
4759
  toggle() {
4769
4760
  this.collapsed.update(v => !v);
4770
4761
  }
4771
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4772
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
4762
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4763
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriSectionComponent, isStandalone: true, selector: "xiri-section", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, dyncomponent: { classPropertyName: "dyncomponent", publicName: "dyncomponent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"xiri-section\">\n\t@if (settings().title) {\n\t\t<div class=\"section-header\"\n\t\t [class.collapsible]=\"settings().collapsible\"\n\t\t (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 }); }
4773
4764
  }
4774
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriSectionComponent, decorators: [{
4765
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriSectionComponent, decorators: [{
4775
4766
  type: Component,
4776
4767
  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"] }]
4777
4768
  }], ctorParameters: () => [], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }], dyncomponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "dyncomponent", required: false }] }] } });
@@ -4780,10 +4771,10 @@ class XiriDividerComponent {
4780
4771
  constructor() {
4781
4772
  this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
4782
4773
  }
4783
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4784
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
4774
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4775
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriDividerComponent, isStandalone: true, selector: "xiri-divider", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"xiri-divider\" [class]=\"settings().spacing || 'normal'\">\n\t@if (settings().text || settings().icon) {\n\t\t<mat-divider></mat-divider>\n\t\t<span class=\"divider-label\">\n\t\t\t@if (settings().icon) { <mat-icon>{{ settings().icon }}</mat-icon> }\n\t\t\t@if (settings().text) { {{ settings().text }} }\n\t\t</span>\n\t\t<mat-divider></mat-divider>\n\t} @else {\n\t\t<mat-divider></mat-divider>\n\t}\n</div>\n", styles: [".xiri-divider{display:flex;align-items:center;gap:var(--xiri-spacing-md)}.xiri-divider mat-divider{flex:1}.xiri-divider .divider-label{display:flex;align-items:center;gap:.25rem;color:var(--on-surface-variant);font-size:var(--xiri-font-size-label);white-space:nowrap}.xiri-divider.compact{padding:var(--xiri-spacing-xs) 0}.xiri-divider.normal{padding:var(--xiri-spacing-md) 0}.xiri-divider.large{padding:var(--xiri-spacing-xl) 0}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
4785
4776
  }
4786
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriDividerComponent, decorators: [{
4777
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriDividerComponent, decorators: [{
4787
4778
  type: Component,
4788
4779
  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"] }]
4789
4780
  }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
@@ -4792,12 +4783,12 @@ class XiriStatGridComponent {
4792
4783
  constructor() {
4793
4784
  this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
4794
4785
  }
4795
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriStatGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4796
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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),1fr);gap:var(--xiri-spacing-md)}@media(max-width:992px){.stat-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:576px){.stat-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "component", type: XiriStatComponent, selector: "xiri-stat", inputs: ["settings"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
4786
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriStatGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4787
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriStatGridComponent, isStandalone: true, selector: "xiri-stat-grid", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (settings().title) {\n\t<h3 class=\"stat-grid-title\">{{ settings().title }}</h3>\n}\n<div class=\"stat-grid\" [style.--stat-cols]=\"settings().columns || 4\">\n\t@for (stat of settings().stats; track $index) {\n\t\t<xiri-stat [settings]=\"stat\"></xiri-stat>\n\t}\n</div>\n", styles: [".stat-grid-title{font-size:var(--xiri-font-size-title);font-weight:500;margin:0 0 var(--xiri-spacing-md)}.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 }); }
4797
4788
  }
4798
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriStatGridComponent, decorators: [{
4789
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriStatGridComponent, decorators: [{
4799
4790
  type: Component,
4800
- 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),1fr);gap:var(--xiri-spacing-md)}@media(max-width:992px){.stat-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:576px){.stat-grid{grid-template-columns:1fr}}\n"] }]
4791
+ 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"] }]
4801
4792
  }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
4802
4793
 
4803
4794
  class XiriToolbarComponent {
@@ -4813,10 +4804,10 @@ class XiriToolbarComponent {
4813
4804
  return '';
4814
4805
  }, ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
4815
4806
  }
4816
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4817
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
4807
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4808
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriToolbarComponent, isStandalone: true, selector: "xiri-toolbar", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, filterData: { classPropertyName: "filterData", publicName: "filterData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChanged: "searchChanged" }, ngImport: i0, template: "<div class=\"xiri-toolbar\">\n\t@if (settings().icon) {\n\t\t<mat-icon>{{ settings().icon }}</mat-icon>\n\t}\n\t@if (settings().title) {\n\t\t<span class=\"toolbar-title\">{{ settings().title }}</span>\n\t}\n\t<div class=\"toolbar-spacer\"></div>\n\t@if (settings().search) {\n\t\t<xiri-search [placeholder]=\"searchPlaceholder()\" [open]=\"true\" (changed)=\"searchChanged.emit($event)\"></xiri-search>\n\t}\n\t@if (settings().buttons) {\n\t\t<xiri-buttonline [settings]=\"settings().buttons!\" [filterData]=\"filterData()\"></xiri-buttonline>\n\t}\n</div>\n", styles: [".xiri-toolbar{display:flex;align-items:center;gap:var(--xiri-spacing-sm);padding:var(--xiri-spacing-sm) var(--xiri-spacing-md);background:var(--surface-container, var(--surface));border-radius:var(--mat-card-elevated-container-shape, 12px);min-height:48px}.xiri-toolbar .toolbar-title{font-size:var(--xiri-font-size-title);font-weight:500}.xiri-toolbar .toolbar-spacer{flex:1}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: XiriButtonlineComponent, selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "component", type: XiriSearchComponent, selector: "xiri-search", inputs: ["placeholder", "open", "reset", "escape", "focus", "text"], outputs: ["changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
4818
4809
  }
4819
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriToolbarComponent, decorators: [{
4810
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriToolbarComponent, decorators: [{
4820
4811
  type: Component,
4821
4812
  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"] }]
4822
4813
  }], 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"] }] } });
@@ -4830,10 +4821,10 @@ class XiriDescriptionListComponent {
4830
4821
  return `${layout} cols-${s.columns || 2}`;
4831
4822
  }, ...(ngDevMode ? [{ debugName: "layoutClass" }] : []));
4832
4823
  }
4833
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriDescriptionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4834
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
4824
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriDescriptionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4825
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriDescriptionListComponent, isStandalone: true, selector: "xiri-description-list", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<dl class=\"description-list\" [class]=\"layoutClass()\" [style.--dl-cols]=\"settings().columns || 2\">\n\t@for (item of settings().items; track $index) {\n\t\t<div class=\"dl-item\">\n\t\t\t<dt>\n\t\t\t\t@if (item.icon) { <mat-icon [class]=\"item.color || ''\">{{ item.icon }}</mat-icon> }\n\t\t\t\t{{ item.label }}\n\t\t\t</dt>\n\t\t\t<dd>\n\t\t\t\t@switch (item.type) {\n\t\t\t\t\t@case ('link') { <a [href]=\"item.value\" target=\"_blank\" rel=\"noopener\">{{ item.value }}</a> }\n\t\t\t\t\t@case ('html') { <span [innerHTML]=\"item.value | safeHtml\"></span> }\n\t\t\t\t\t@case ('badge') { <span class=\"dl-badge\" [class]=\"item.color || 'primary'\">{{ item.value }}</span> }\n\t\t\t\t\t@default { {{ item.value || '\\u2014' }} }\n\t\t\t\t}\n\t\t\t</dd>\n\t\t</div>\n\t}\n</dl>\n", styles: [".description-list{display:grid;grid-template-columns:repeat(var(--dl-cols, 2),1fr);gap:var(--xiri-spacing-md);margin:0;padding:0}@media(max-width:768px){.description-list{grid-template-columns:1fr}}.description-list .dl-item dt{display:flex;align-items:center;gap:.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 }); }
4835
4826
  }
4836
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriDescriptionListComponent, decorators: [{
4827
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriDescriptionListComponent, decorators: [{
4837
4828
  type: Component,
4838
4829
  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"] }]
4839
4830
  }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
@@ -4856,10 +4847,10 @@ class XiriDynComponentComponent {
4856
4847
  });
4857
4848
  }, ...(ngDevMode ? [{ debugName: "dataInt" }] : []));
4858
4849
  }
4859
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriDynComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4860
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
4850
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriDynComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4851
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriDynComponentComponent, isStandalone: true, selector: "xiri-dyncomponent", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, filterData: { classPropertyName: "filterData", publicName: "filterData", isSignal: true, isRequired: false, transformFunction: null }, dyncomponent: { classPropertyName: "dyncomponent", publicName: "dyncomponent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (obj of dataInt(); track obj.id) {\n\n\t@switch (obj.type) {\n\t\t@case ('card') {\n\t\t\t<div class=\"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 }); }
4861
4852
  }
4862
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriDynComponentComponent, decorators: [{
4853
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriDynComponentComponent, decorators: [{
4863
4854
  type: Component,
4864
4855
  args: [{ selector: 'xiri-dyncomponent', changeDetection: ChangeDetectionStrategy.OnPush, imports: [XiriCardComponent,
4865
4856
  XiriButtonlineComponent,
@@ -4898,22 +4889,23 @@ class XiriAlertComponent {
4898
4889
  this.dialogRef = inject(MatDialogRef);
4899
4890
  this.initData = inject(MAT_DIALOG_DATA);
4900
4891
  this.breakpointObserver = inject(BreakpointObserver);
4892
+ this.destroyRef = inject(DestroyRef);
4901
4893
  this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : []));
4902
4894
  this.header = signal('', ...(ngDevMode ? [{ debugName: "header" }] : []));
4903
4895
  this.buttons = signal([], ...(ngDevMode ? [{ debugName: "buttons" }] : []));
4904
4896
  this.text = signal('', ...(ngDevMode ? [{ debugName: "text" }] : []));
4905
4897
  this.icon = signal('warning', ...(ngDevMode ? [{ debugName: "icon" }] : []));
4906
- this.sub = new Subscription();
4907
4898
  }
4908
4899
  ngOnInit() {
4909
- this.sub.add(this.breakpointObserver
4900
+ this.breakpointObserver
4910
4901
  .observe([Breakpoints.XSmall, Breakpoints.Small])
4902
+ .pipe(takeUntilDestroyed(this.destroyRef))
4911
4903
  .subscribe((state) => {
4912
4904
  if (state.matches)
4913
4905
  this.dialogRef.updateSize('80vw');
4914
4906
  else
4915
4907
  this.dialogRef.updateSize('600px');
4916
- }));
4908
+ });
4917
4909
  this.loadData(this.initData);
4918
4910
  }
4919
4911
  loadData(res) {
@@ -4931,13 +4923,10 @@ class XiriAlertComponent {
4931
4923
  clickButton(button) {
4932
4924
  this.dialogRef.close(button);
4933
4925
  }
4934
- ngOnDestroy() {
4935
- this.sub.unsubscribe();
4936
- }
4937
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4938
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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"] }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
4926
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4927
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriAlertComponent, isStandalone: true, selector: "xiri-alert", ngImport: i0, template: "@if (!loading()) {\n\t<h1 mat-dialog-title>{{ header() }}</h1>\n}\n<mat-dialog-content>\n\t@if (loading()) {\n\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t} @else {\n\t\t<div class=\"content\">\n\t\t\t<div class=\"icon\">\n\t\t\t\t<mat-icon class=\"warn\" inline=\"true\">{{ icon() }}</mat-icon>\n\t\t\t</div>\n\t\t\t<div class=\"text\" [innerHtml]=\"text() | safeHtml\"></div>\n\t\t</div>\n\t}\n</mat-dialog-content>\n@if (!loading()) {\n\t<mat-divider></mat-divider>\n\t<mat-dialog-actions>\n\t\t@for (button of buttons(); track button) {\n\t\t\t@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"] }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
4939
4928
  }
4940
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriAlertComponent, decorators: [{
4929
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriAlertComponent, decorators: [{
4941
4930
  type: Component,
4942
4931
  args: [{ selector: 'xiri-alert', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDialogTitle,
4943
4932
  CdkScrollable,
@@ -5010,10 +4999,10 @@ class XiriSidenavComponent {
5010
4999
  }
5011
5000
  this.cdr.markForCheck();
5012
5001
  }
5013
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5014
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
5002
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5003
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriSidenavComponent, isStandalone: true, selector: "xiri-sidenav", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (loading) {\n\t<div class=\"loading\">\n\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t</div>\n}\n\n@for (nav of fields; track nav) {\n\n\t@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 }); }
5015
5004
  }
5016
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriSidenavComponent, decorators: [{
5005
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriSidenavComponent, decorators: [{
5017
5006
  type: Component,
5018
5007
  args: [{ selector: 'xiri-sidenav', imports: [
5019
5008
  MatProgressSpinner,
@@ -5030,10 +5019,10 @@ class XiriBreadcrumbComponent {
5030
5019
  constructor() {
5031
5020
  this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
5032
5021
  }
5033
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5034
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
5022
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5023
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: XiriBreadcrumbComponent, isStandalone: true, selector: "xiri-breadcrumb", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n\t<ol>\n\t\t@for (item of settings(); track $index; let last = $last) {\n\t\t\t<li [class.active]=\"last\">\n\t\t\t\t@if (item.link) {\n\t\t\t\t\t@if (item.extern) {\n\t\t\t\t\t\t<a [href]=\"item.link\" target=\"_blank\" rel=\"noopener\">\n\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<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 }); }
5035
5024
  }
5036
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriBreadcrumbComponent, decorators: [{
5025
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriBreadcrumbComponent, decorators: [{
5037
5026
  type: Component,
5038
5027
  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"] }]
5039
5028
  }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
@@ -5097,10 +5086,10 @@ class XiriLocalStorageService {
5097
5086
  }
5098
5087
  return val.value;
5099
5088
  }
5100
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriLocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
5101
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriLocalStorageService, providedIn: 'root' }); }
5089
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriLocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
5090
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriLocalStorageService, providedIn: 'root' }); }
5102
5091
  }
5103
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriLocalStorageService, decorators: [{
5092
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: XiriLocalStorageService, decorators: [{
5104
5093
  type: Injectable,
5105
5094
  args: [{
5106
5095
  providedIn: 'root'
@@ -5197,10 +5186,10 @@ class ThemeService {
5197
5186
  }
5198
5187
  // 'auto' mode: no class needed, CSS media query handles it
5199
5188
  }
5200
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
5201
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
5189
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
5190
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
5202
5191
  }
5203
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ThemeService, decorators: [{
5192
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ThemeService, decorators: [{
5204
5193
  type: Injectable,
5205
5194
  args: [{ providedIn: 'root' }]
5206
5195
  }], ctorParameters: () => [] });