@xiriframework/xiri-ng 0.4.13 → 0.4.14

package/fesm2022/xiriframework-xiri-ng.mjs

@@ -2600,6 +2600,7 @@ class XiriFormFieldsComponent {
                 }
                 this.collapsedSections.set(initialCollapsed);
                 this.createControl();
+                this.syncConditionalControls();
                 this.lastValue = JSON.stringify(this.formGroup.value);
                 this._fieldsLoaded = true;
                 return this._fields;
@@ -2639,6 +2640,7 @@ class XiriFormFieldsComponent {
                         }
                     }
                 }
+                this.syncConditionalControls();
             }
         });
         // Track form input changes and emit after controls are created
@@ -2674,6 +2676,7 @@ class XiriFormFieldsComponent {
         });
         this.formGroup.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             if (this._fieldsLoaded && !this.applyingPatch) {
+                this.syncConditionalControls();
                 const currentValue = JSON.stringify(this.formGroup.value);
                 if (currentValue === this.lastValue)
                     return;
@@ -2823,6 +2826,7 @@ class XiriFormFieldsComponent {
         finally {
             this.applyingPatch = false;
         }
+        this.syncConditionalControls();
         if (patchedNow.size === 0)
             return;
         // Nur anstoßen: die Klon-Identitäten selbst liegen in patchedClones und bleiben für alle
@@ -2967,7 +2971,13 @@ class XiriFormFieldsComponent {
             }
             field.required = !!field.required;
             field.disabled = !!field.disabled;
-            const control = this.formBuilder.control(field.value, this.bindValidations(field));
+            // Gleich disabled anlegen (Boxed-Value-Form): ein Backend-disabled Feld fällt damit aus
+            // formGroup.value und der Validierung, wie bei Patch und showWhen. this.disabled() dazu,
+            // weil der Effect nur bei einem Wechsel des Inputs läuft — beim Ersetzen der Feldliste
+            // während eines globalen disabled würde die Gruppe sonst wieder bedienbar. Ungeboxt
+            // läse Angular einen Objektwert mit value/disabled-Keys selbst als Zustandsbox; `?? null`
+            // hält den bisherigen Startwert, den der Default-Parameter ungeboxt aus undefined machte.
+            const control = this.formBuilder.control({ value: field.value ?? null, disabled: field.disabled || this.disabled() }, this.bindValidations(field));
             field.control = control;
             this.formGroup.addControl(field.id, control);
         }
@@ -3092,6 +3102,9 @@ class XiriFormFieldsComponent {
         // Check if field is inside a collapsed section
         if (this.isInCollapsedSection(field))
             return false;
+        return this.matchesShowWhen(field);
+    }
+    matchesShowWhen(field) {
         if (!field.showWhen)
             return true;
         const conditions = Array.isArray(field.showWhen)
@@ -3099,6 +3112,25 @@ class XiriFormFieldsComponent {
             : [field.showWhen];
         return conditions.every(condition => this.evaluateCondition(condition));
     }
+    // Per showWhen versteckte Felder werden disabled: sie fallen aus formGroup.value (der
+    // Server bekommt keine veralteten Werte) und aus der Validierung (ein verstecktes Pflichtfeld
+    // blockiert den Submit nicht). Sichtbar gewordene Felder werden wieder enabled - außer sie
+    // sind vom Backend (field.disabled) oder global (disabled-Input) deaktiviert. Eingeklappte
+    // Sections zählen nicht als versteckt, deshalb matchesShowWhen statt isFieldVisible.
+    syncConditionalControls() {
+        for (const field of this._fields ?? []) {
+            if (!field.showWhen)
+                continue;
+            const control = this.formGroup.get(field.id);
+            if (!control)
+                continue;
+            const shouldEnable = this.matchesShowWhen(field) && !field.disabled && !this.disabled();
+            if (shouldEnable && control.disabled)
+                control.enable({ emitEvent: false });
+            else if (!shouldEnable && control.enabled)
+                control.disable({ emitEvent: false });
+        }
+    }
     toggleSection(header) {
         this.collapsedSections.update(set => {
             const next = new Set(set);
@@ -3353,6 +3385,86 @@ function isCreatedOption(value) {
     return (typeof id === 'string' || (typeof id === 'number' && Number.isFinite(id))) && typeof name === 'string';
 }
 
+function isCellObject(cell) {
+    return typeof cell === 'object' && cell !== null && !Array.isArray(cell) && 'd' in cell && 'v' in cell;
+}
+/** A cell object for sure: objects pass through, anything else (a server patched a bare value) shows as is and sorts empty. */
+function asCellObject(cell) {
+    return isCellObject(cell) ? cell : { d: cell ?? '', v: null };
+}
+/** What a cell shows: cell object → d; legacy number tuple → [0]; anything else as is. */
+function cellDisplay(cell, column) {
+    if (isCellObject(cell))
+        return cell.d;
+    if (column?.format === 'number' && Array.isArray(cell))
+        return cell[0];
+    return cell;
+}
+/** Display lines of a text2/textn cell: arrays as they are, nothing for null, a scalar as its single line. */
+function cellLines(cell, column) {
+    const d = cellDisplay(cell, column);
+    if (Array.isArray(d))
+        return d;
+    return d === null || d === undefined || d === '' ? [] : [d];
+}
+/**
+ * The value a column sorts (and sums) by. Decided per column, never per row, so one column never
+ * mixes numbers and strings — MatTableDataSource would coerce the numbers to strings otherwise.
+ * A cellObject cell without a string/number v sorts like an empty cell ('').
+ */
+function sortValue(row, columnId, column) {
+    const cell = row[columnId];
+    if (column?.cellObject) {
+        const v = isCellObject(cell) ? cell.v : undefined;
+        return typeof v === 'number' || typeof v === 'string' ? v : '';
+    }
+    if (column?.format === 'number')
+        return cell?.[1];
+    // ponytail: sort by the first chip's label — without this MatTable compares the raw object
+    // array, which coerces to "[object Object],..." and effectively sorts by chip count.
+    if (column?.format === 'chips')
+        return cell?.[0]?.label ?? '';
+    return cell;
+}
+/**
+ * Replaces non-object cells of cellObject columns in place (rows built by hand, servers patching bare
+ * values). Returns true when something was replaced, so the caller can warn once. A missing cell
+ * (undefined — the row simply has no value for the column) is left alone: absent is not malformed.
+ */
+function normalizeCellObjects(rows, columns) {
+    if (!Array.isArray(rows))
+        return false;
+    let replaced = false;
+    const objectColumns = columns.filter(c => c.cellObject);
+    for (const row of rows)
+        for (const col of objectColumns) {
+            const cell = row[col.id];
+            if (cell !== undefined && !isCellObject(cell)) {
+                row[col.id] = asCellObject(cell);
+                replaced = true;
+            }
+        }
+    return replaced;
+}
+/**
+ * Turns what a native input or select emits into the canonical v of a cell object: '' → null (cleared),
+ * numeric columns (column.cellObject === 'number') → number (garbage → null; the kind comes from the
+ * field metadata, so an html text input, string options or an empty v cannot change the type),
+ * datetime-local → seconds padded
+ * (browsers drop ":00"). Idempotent: applying it to a canonical v returns that v.
+ */
+function normalizeEditValue(column, value) {
+    if (value === null || value === undefined || String(value).trim() === '')
+        return null;
+    if (column.cellObject === 'number') {
+        const n = Number(value);
+        return Number.isFinite(n) ? n : null;
+    }
+    if (column.inputType === 'datetime-local' && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(String(value)))
+        return value + ':00';
+    return value;
+}
+
 class XiriRawTableComponent {
     constructor() {
         this.settings = input.required(/* @ts-ignore */
@@ -3370,9 +3482,18 @@ class XiriRawTableComponent {
             const level = density ? DENSITY_TO_LEVEL[density] : (this.settings().dense || 6);
             this.tableClass.set('dense-' + level + (this.settings().forceMinWidth ? ' force-min-width' : ''));
             this.loadFields(this.settings().fields ?? []);
-            this.dataSource.data = this.settings().data;
+            const rows = this.settings().data;
+            if (normalizeCellObjects(rows, this.displayedColumns))
+                console.warn('xiri-raw-table: cells of cellObject columns must be {d, v} objects; bare values were wrapped');
+            this.dataSource.data = rows ?? [];
         });
     }
+    cellText(row, column) {
+        return cellDisplay(row[column.id], column);
+    }
+    cellLines(row, column) {
+        return cellLines(row[column.id], column);
+    }
     loadFields(fields) {
         this.displayedColumns = [];
         this.columnsToDisplay = [];
@@ -3391,7 +3512,7 @@ class XiriRawTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriRawTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.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<th mat-header-cell *matHeaderCellDef [class]=\"column.display\"> {{ column.header }}</th>\n\t\t\t\t@switch (column.format) {\n\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@if ($any(column.icons)[ $any(row)[ column.id ] ]) {\n\t\t\t\t\t\t\t\t<mat-icon [class]=\"$any(column.icons)[ $any(row)[ column.id ] ][ 'color' ] || 'primary'\"\n\t\t\t\t\t\t\t\t          [matTooltip]=\"$any(column.icons)[ $any(row)[ column.id ] ][ 'hint' ]\"\n\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!$any(column.icons)[ $any(row)[ column.id ] ][ 'hint' ]\">{{ $any(column.icons)[$any(row)[column.id]]['icon'] }}\n\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('html') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [innerHtml]=\"$any(row)[column.id] | safeHtml\" [class]=\"column.display\"></td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@if ($any(row)[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t@let cellUrl = $any(row)[column.id + 'Link'] | xiriUrl;\n\t\t\t\t\t\t\t\t<a [routerLink]=\"cellUrl?.path\" [queryParams]=\"cellUrl?.queryParams\" class=\"tablelink\">{{ $any(row)[column.id] }}</a>\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t<span>{{ $any(row)[column.id] }}</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('text2') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t<div>{{ $any(row)[column.id][0] }}</div>\n\t\t\t\t\t\t\t<div>{{ $any(row)[column.id][1] }}</div>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('textn') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@for (line of $any(row)[column.id]; track $index) {\n\t\t\t\t\t\t\t\t<div>{{ line }}</div>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('linkrow') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@if ($any(row)[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t@let rowUrl = $any(row)[column.id + 'Link'] | xiriUrl;\n\t\t\t\t\t\t\t\t<a [routerLink]=\"rowUrl?.path\" [queryParams]=\"rowUrl?.queryParams\">\n\t\t\t\t\t\t\t\t\t<div class=\"linkrow\">\n\t\t\t\t\t\t\t\t\t\t@if ($any(row)['icon']) {\n\t\t\t\t\t\t\t\t\t\t\t@if ($any(row)['iconSet']) {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"$any(row)['iconColor'] || 'primary'\" [fontSet]=\"$any(row)['iconSet']\">{{ $any(row)['icon'] }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"$any(row)['iconColor'] || 'primary'\">{{ $any(row)['icon'] }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t<span class=\"text\" [class.hasIcon]=\"$any(row)['icon']\">{{ $any(row)[column.id] }}</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('number') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t{{ column.textPrefix }}{{ $any(row)[column.id][0] }}{{ column.textSuffix }}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('chips') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t<div class=\"xiri-chips-display\">\n\t\t\t\t\t\t\t\t@for (chip of $any(row)[column.id]; track chip.label) {\n\t\t\t\t\t\t\t\t\t<span class=\"xiri-chip-display\" [class]=\"chip.color || ''\">{{ chip.label }}</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@default {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">{{ $any(row)[column.id] }}</td>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</ng-container>\n\t\t}\n\n\t\t@if (showHeader()) {\n\t\t\t<tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n\t\t}\n\t\t<tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\"></tr>\n\t</table>\n</div>", styles: [".table-out{overflow-x:auto}.table-out.dense-1{--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px}.table-out.dense-2{--mat-table-header-container-height: 48px;--mat-table-footer-container-height: 44px;--mat-table-row-item-container-height: 44px}.table-out.dense-3{--mat-table-header-container-height: 44px;--mat-table-footer-container-height: 40px;--mat-table-row-item-container-height: 40px}.table-out.dense-4,.table-out.dense-6{--mat-table-header-container-height: 40px;--mat-table-footer-container-height: 36px;--mat-table-row-item-container-height: 36px}.table-out.dense-6 table tr.mat-mdc-row{height:32px}.table-out.dense-8{--mat-table-header-container-height: 40px;--mat-table-footer-container-height: 36px;--mat-table-row-item-container-height: 36px}.table-out.dense-8 table tr.mat-mdc-row{height:30px}.table-out.force-min-width td{min-width:150px}table{width:100%}table tr.mat-mdc-row:hover{background:var(--surface-variant, #DEE3EB)}table .tablelink{text-decoration:underline}table .linkrow{display:table-row}table .linkrow mat-icon{display:table-cell;width:30px;text-align:center;padding-right:1rem;line-height:31px;color:var(--xiri-linkrow-icon-color)}table .linkrow .text{display:table-cell;text-decoration:underline}table .linkrow .text.hasIcon{vertical-align:middle;line-height:33px}table td.mat-mdc-cell mat-icon{vertical-align:middle}table td.mat-mdc-cell.info{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, #42474E)}table td.mat-mdc-cell.number{text-align:right;font-variant-numeric:tabular-nums}table td.mat-mdc-cell.right,table td.mat-mdc-cell.align-right{text-align:right;padding-left:1rem;word-wrap:anywhere}table td.mat-mdc-cell.center,table td.mat-mdc-cell.align-center{text-align:center;padding-left:1rem}table td.mat-mdc-cell.left,table td.mat-mdc-cell.align-left{text-align:left}table td.mat-mdc-cell.middle{padding-left:1rem}table th.mat-mdc-header-cell.number{text-align:right;font-variant-numeric:tabular-nums}table th.mat-mdc-header-cell.align-right{text-align:right}table th.mat-mdc-header-cell.align-center{text-align:center}table th.mat-mdc-header-cell.align-left{text-align:left}\n"], dependencies: [{ kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }, { kind: "pipe", type: XiriUrlPipe, name: "xiriUrl" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.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<th mat-header-cell *matHeaderCellDef [class]=\"column.display\"> {{ column.header }}</th>\n\t\t\t\t@switch (column.format) {\n\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@if ($any(column.icons)[ $any(row)[ column.id ] ]) {\n\t\t\t\t\t\t\t\t<mat-icon [class]=\"$any(column.icons)[ $any(row)[ column.id ] ][ 'color' ] || 'primary'\"\n\t\t\t\t\t\t\t\t          [matTooltip]=\"$any(column.icons)[ $any(row)[ column.id ] ][ 'hint' ]\"\n\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!$any(column.icons)[ $any(row)[ column.id ] ][ 'hint' ]\">{{ $any(column.icons)[$any(row)[column.id]]['icon'] }}\n\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('html') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [innerHtml]=\"$any(row)[column.id] | safeHtml\" [class]=\"column.display\"></td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@if ($any(row)[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t@let cellUrl = $any(row)[column.id + 'Link'] | xiriUrl;\n\t\t\t\t\t\t\t\t<a [routerLink]=\"cellUrl?.path\" [queryParams]=\"cellUrl?.queryParams\" class=\"tablelink\">{{ $any(row)[column.id] }}</a>\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t<span>{{ $any(row)[column.id] }}</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('text2') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@let lines = cellLines(row, column);\n\t\t\t\t\t\t\t<div>{{ lines[0] }}</div>\n\t\t\t\t\t\t\t<div>{{ lines[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 cellLines(row, column); track $index) {\n\t\t\t\t\t\t\t\t<div>{{ line }}</div>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('linkrow') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@if ($any(row)[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t@let rowUrl = $any(row)[column.id + 'Link'] | xiriUrl;\n\t\t\t\t\t\t\t\t<a [routerLink]=\"rowUrl?.path\" [queryParams]=\"rowUrl?.queryParams\">\n\t\t\t\t\t\t\t\t\t<div class=\"linkrow\">\n\t\t\t\t\t\t\t\t\t\t@if ($any(row)['icon']) {\n\t\t\t\t\t\t\t\t\t\t\t@if ($any(row)['iconSet']) {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"$any(row)['iconColor'] || 'primary'\" [fontSet]=\"$any(row)['iconSet']\">{{ $any(row)['icon'] }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"$any(row)['iconColor'] || 'primary'\">{{ $any(row)['icon'] }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t<span class=\"text\" [class.hasIcon]=\"$any(row)['icon']\">{{ $any(row)[column.id] }}</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('number') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t{{ column.textPrefix }}{{ cellText(row, column) }}{{ column.textSuffix }}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('chips') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t<div class=\"xiri-chips-display\">\n\t\t\t\t\t\t\t\t@for (chip of $any(row)[column.id]; track chip.label) {\n\t\t\t\t\t\t\t\t\t<span class=\"xiri-chip-display\" [class]=\"chip.color || ''\">{{ chip.label }}</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@default {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">{{ cellText(row, column) }}</td>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</ng-container>\n\t\t}\n\n\t\t@if (showHeader()) {\n\t\t\t<tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n\t\t}\n\t\t<tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\"></tr>\n\t</table>\n</div>", styles: [".table-out{overflow-x:auto}.table-out.dense-1{--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px}.table-out.dense-2{--mat-table-header-container-height: 48px;--mat-table-footer-container-height: 44px;--mat-table-row-item-container-height: 44px}.table-out.dense-3{--mat-table-header-container-height: 44px;--mat-table-footer-container-height: 40px;--mat-table-row-item-container-height: 40px}.table-out.dense-4,.table-out.dense-6{--mat-table-header-container-height: 40px;--mat-table-footer-container-height: 36px;--mat-table-row-item-container-height: 36px}.table-out.dense-6 table tr.mat-mdc-row{height:32px}.table-out.dense-8{--mat-table-header-container-height: 40px;--mat-table-footer-container-height: 36px;--mat-table-row-item-container-height: 36px}.table-out.dense-8 table tr.mat-mdc-row{height:30px}.table-out.force-min-width td{min-width:150px}table{width:100%}table tr.mat-mdc-row:hover{background:var(--surface-variant, #DEE3EB)}table .tablelink{text-decoration:underline}table .linkrow{display:table-row}table .linkrow mat-icon{display:table-cell;width:30px;text-align:center;padding-right:1rem;line-height:31px;color:var(--xiri-linkrow-icon-color)}table .linkrow .text{display:table-cell;text-decoration:underline}table .linkrow .text.hasIcon{vertical-align:middle;line-height:33px}table td.mat-mdc-cell mat-icon{vertical-align:middle}table td.mat-mdc-cell.info{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, #42474E)}table td.mat-mdc-cell.number{text-align:right;font-variant-numeric:tabular-nums}table td.mat-mdc-cell.right,table td.mat-mdc-cell.align-right{text-align:right;padding-left:1rem;word-wrap:anywhere}table td.mat-mdc-cell.center,table td.mat-mdc-cell.align-center{text-align:center;padding-left:1rem}table td.mat-mdc-cell.left,table td.mat-mdc-cell.align-left{text-align:left}table td.mat-mdc-cell.middle{padding-left:1rem}table th.mat-mdc-header-cell.number{text-align:right;font-variant-numeric:tabular-nums}table th.mat-mdc-header-cell.align-right{text-align:right}table th.mat-mdc-header-cell.align-center{text-align:center}table th.mat-mdc-header-cell.align-left{text-align:left}\n"], dependencies: [{ kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }, { kind: "pipe", type: XiriUrlPipe, name: "xiriUrl" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriRawTableComponent, decorators: [{
             type: Component,
@@ -3409,7 +3530,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                         MatRowDef,
                         MatRow,
                         SafehtmlPipe,
-                        XiriUrlPipe], template: "<div class=\"table-out\" [class]=\"tableClass()\">\n\t<table mat-table [dataSource]=\"dataSource\">\n\t\t@for (column of displayedColumns; track column) {\n\t\t\t<ng-container [matColumnDef]=\"column.name\">\n\t\t\t\t<th mat-header-cell *matHeaderCellDef [class]=\"column.display\"> {{ column.header }}</th>\n\t\t\t\t@switch (column.format) {\n\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@if ($any(column.icons)[ $any(row)[ column.id ] ]) {\n\t\t\t\t\t\t\t\t<mat-icon [class]=\"$any(column.icons)[ $any(row)[ column.id ] ][ 'color' ] || 'primary'\"\n\t\t\t\t\t\t\t\t          [matTooltip]=\"$any(column.icons)[ $any(row)[ column.id ] ][ 'hint' ]\"\n\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!$any(column.icons)[ $any(row)[ column.id ] ][ 'hint' ]\">{{ $any(column.icons)[$any(row)[column.id]]['icon'] }}\n\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('html') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [innerHtml]=\"$any(row)[column.id] | safeHtml\" [class]=\"column.display\"></td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@if ($any(row)[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t@let cellUrl = $any(row)[column.id + 'Link'] | xiriUrl;\n\t\t\t\t\t\t\t\t<a [routerLink]=\"cellUrl?.path\" [queryParams]=\"cellUrl?.queryParams\" class=\"tablelink\">{{ $any(row)[column.id] }}</a>\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t<span>{{ $any(row)[column.id] }}</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('text2') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t<div>{{ $any(row)[column.id][0] }}</div>\n\t\t\t\t\t\t\t<div>{{ $any(row)[column.id][1] }}</div>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('textn') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@for (line of $any(row)[column.id]; track $index) {\n\t\t\t\t\t\t\t\t<div>{{ line }}</div>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('linkrow') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@if ($any(row)[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t@let rowUrl = $any(row)[column.id + 'Link'] | xiriUrl;\n\t\t\t\t\t\t\t\t<a [routerLink]=\"rowUrl?.path\" [queryParams]=\"rowUrl?.queryParams\">\n\t\t\t\t\t\t\t\t\t<div class=\"linkrow\">\n\t\t\t\t\t\t\t\t\t\t@if ($any(row)['icon']) {\n\t\t\t\t\t\t\t\t\t\t\t@if ($any(row)['iconSet']) {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"$any(row)['iconColor'] || 'primary'\" [fontSet]=\"$any(row)['iconSet']\">{{ $any(row)['icon'] }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"$any(row)['iconColor'] || 'primary'\">{{ $any(row)['icon'] }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t<span class=\"text\" [class.hasIcon]=\"$any(row)['icon']\">{{ $any(row)[column.id] }}</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('number') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t{{ column.textPrefix }}{{ $any(row)[column.id][0] }}{{ column.textSuffix }}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('chips') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t<div class=\"xiri-chips-display\">\n\t\t\t\t\t\t\t\t@for (chip of $any(row)[column.id]; track chip.label) {\n\t\t\t\t\t\t\t\t\t<span class=\"xiri-chip-display\" [class]=\"chip.color || ''\">{{ chip.label }}</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@default {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">{{ $any(row)[column.id] }}</td>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</ng-container>\n\t\t}\n\n\t\t@if (showHeader()) {\n\t\t\t<tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n\t\t}\n\t\t<tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\"></tr>\n\t</table>\n</div>", styles: [".table-out{overflow-x:auto}.table-out.dense-1{--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px}.table-out.dense-2{--mat-table-header-container-height: 48px;--mat-table-footer-container-height: 44px;--mat-table-row-item-container-height: 44px}.table-out.dense-3{--mat-table-header-container-height: 44px;--mat-table-footer-container-height: 40px;--mat-table-row-item-container-height: 40px}.table-out.dense-4,.table-out.dense-6{--mat-table-header-container-height: 40px;--mat-table-footer-container-height: 36px;--mat-table-row-item-container-height: 36px}.table-out.dense-6 table tr.mat-mdc-row{height:32px}.table-out.dense-8{--mat-table-header-container-height: 40px;--mat-table-footer-container-height: 36px;--mat-table-row-item-container-height: 36px}.table-out.dense-8 table tr.mat-mdc-row{height:30px}.table-out.force-min-width td{min-width:150px}table{width:100%}table tr.mat-mdc-row:hover{background:var(--surface-variant, #DEE3EB)}table .tablelink{text-decoration:underline}table .linkrow{display:table-row}table .linkrow mat-icon{display:table-cell;width:30px;text-align:center;padding-right:1rem;line-height:31px;color:var(--xiri-linkrow-icon-color)}table .linkrow .text{display:table-cell;text-decoration:underline}table .linkrow .text.hasIcon{vertical-align:middle;line-height:33px}table td.mat-mdc-cell mat-icon{vertical-align:middle}table td.mat-mdc-cell.info{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, #42474E)}table td.mat-mdc-cell.number{text-align:right;font-variant-numeric:tabular-nums}table td.mat-mdc-cell.right,table td.mat-mdc-cell.align-right{text-align:right;padding-left:1rem;word-wrap:anywhere}table td.mat-mdc-cell.center,table td.mat-mdc-cell.align-center{text-align:center;padding-left:1rem}table td.mat-mdc-cell.left,table td.mat-mdc-cell.align-left{text-align:left}table td.mat-mdc-cell.middle{padding-left:1rem}table th.mat-mdc-header-cell.number{text-align:right;font-variant-numeric:tabular-nums}table th.mat-mdc-header-cell.align-right{text-align:right}table th.mat-mdc-header-cell.align-center{text-align:center}table th.mat-mdc-header-cell.align-left{text-align:left}\n"] }]
+                        XiriUrlPipe], template: "<div class=\"table-out\" [class]=\"tableClass()\">\n\t<table mat-table [dataSource]=\"dataSource\">\n\t\t@for (column of displayedColumns; track column) {\n\t\t\t<ng-container [matColumnDef]=\"column.name\">\n\t\t\t\t<th mat-header-cell *matHeaderCellDef [class]=\"column.display\"> {{ column.header }}</th>\n\t\t\t\t@switch (column.format) {\n\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@if ($any(column.icons)[ $any(row)[ column.id ] ]) {\n\t\t\t\t\t\t\t\t<mat-icon [class]=\"$any(column.icons)[ $any(row)[ column.id ] ][ 'color' ] || 'primary'\"\n\t\t\t\t\t\t\t\t          [matTooltip]=\"$any(column.icons)[ $any(row)[ column.id ] ][ 'hint' ]\"\n\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!$any(column.icons)[ $any(row)[ column.id ] ][ 'hint' ]\">{{ $any(column.icons)[$any(row)[column.id]]['icon'] }}\n\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('html') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [innerHtml]=\"$any(row)[column.id] | safeHtml\" [class]=\"column.display\"></td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@if ($any(row)[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t@let cellUrl = $any(row)[column.id + 'Link'] | xiriUrl;\n\t\t\t\t\t\t\t\t<a [routerLink]=\"cellUrl?.path\" [queryParams]=\"cellUrl?.queryParams\" class=\"tablelink\">{{ $any(row)[column.id] }}</a>\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t<span>{{ $any(row)[column.id] }}</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('text2') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@let lines = cellLines(row, column);\n\t\t\t\t\t\t\t<div>{{ lines[0] }}</div>\n\t\t\t\t\t\t\t<div>{{ lines[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 cellLines(row, column); track $index) {\n\t\t\t\t\t\t\t\t<div>{{ line }}</div>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('linkrow') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t@if ($any(row)[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t@let rowUrl = $any(row)[column.id + 'Link'] | xiriUrl;\n\t\t\t\t\t\t\t\t<a [routerLink]=\"rowUrl?.path\" [queryParams]=\"rowUrl?.queryParams\">\n\t\t\t\t\t\t\t\t\t<div class=\"linkrow\">\n\t\t\t\t\t\t\t\t\t\t@if ($any(row)['icon']) {\n\t\t\t\t\t\t\t\t\t\t\t@if ($any(row)['iconSet']) {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"$any(row)['iconColor'] || 'primary'\" [fontSet]=\"$any(row)['iconSet']\">{{ $any(row)['icon'] }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"$any(row)['iconColor'] || 'primary'\">{{ $any(row)['icon'] }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t<span class=\"text\" [class.hasIcon]=\"$any(row)['icon']\">{{ $any(row)[column.id] }}</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('number') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t{{ column.textPrefix }}{{ cellText(row, column) }}{{ column.textSuffix }}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@case ('chips') {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t<div class=\"xiri-chips-display\">\n\t\t\t\t\t\t\t\t@for (chip of $any(row)[column.id]; track chip.label) {\n\t\t\t\t\t\t\t\t\t<span class=\"xiri-chip-display\" [class]=\"chip.color || ''\">{{ chip.label }}</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t\t@default {\n\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">{{ cellText(row, column) }}</td>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</ng-container>\n\t\t}\n\n\t\t@if (showHeader()) {\n\t\t\t<tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n\t\t}\n\t\t<tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\"></tr>\n\t</table>\n</div>", styles: [".table-out{overflow-x:auto}.table-out.dense-1{--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px}.table-out.dense-2{--mat-table-header-container-height: 48px;--mat-table-footer-container-height: 44px;--mat-table-row-item-container-height: 44px}.table-out.dense-3{--mat-table-header-container-height: 44px;--mat-table-footer-container-height: 40px;--mat-table-row-item-container-height: 40px}.table-out.dense-4,.table-out.dense-6{--mat-table-header-container-height: 40px;--mat-table-footer-container-height: 36px;--mat-table-row-item-container-height: 36px}.table-out.dense-6 table tr.mat-mdc-row{height:32px}.table-out.dense-8{--mat-table-header-container-height: 40px;--mat-table-footer-container-height: 36px;--mat-table-row-item-container-height: 36px}.table-out.dense-8 table tr.mat-mdc-row{height:30px}.table-out.force-min-width td{min-width:150px}table{width:100%}table tr.mat-mdc-row:hover{background:var(--surface-variant, #DEE3EB)}table .tablelink{text-decoration:underline}table .linkrow{display:table-row}table .linkrow mat-icon{display:table-cell;width:30px;text-align:center;padding-right:1rem;line-height:31px;color:var(--xiri-linkrow-icon-color)}table .linkrow .text{display:table-cell;text-decoration:underline}table .linkrow .text.hasIcon{vertical-align:middle;line-height:33px}table td.mat-mdc-cell mat-icon{vertical-align:middle}table td.mat-mdc-cell.info{font-size:var(--xiri-font-size-label);color:var(--on-surface-variant, #42474E)}table td.mat-mdc-cell.number{text-align:right;font-variant-numeric:tabular-nums}table td.mat-mdc-cell.right,table td.mat-mdc-cell.align-right{text-align:right;padding-left:1rem;word-wrap:anywhere}table td.mat-mdc-cell.center,table td.mat-mdc-cell.align-center{text-align:center;padding-left:1rem}table td.mat-mdc-cell.left,table td.mat-mdc-cell.align-left{text-align:left}table td.mat-mdc-cell.middle{padding-left:1rem}table th.mat-mdc-header-cell.number{text-align:right;font-variant-numeric:tabular-nums}table th.mat-mdc-header-cell.align-right{text-align:right}table th.mat-mdc-header-cell.align-center{text-align:center}table th.mat-mdc-header-cell.align-left{text-align:left}\n"] }]
         }], ctorParameters: () => [], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
 
 class XiriButtonstyleComponent {
@@ -3520,6 +3641,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                 }]
         }] });
 
+function formState(event) {
+    if (event.disabled === true)
+        return { valid: true, value: {} };
+    return { valid: event.valid, value: event.value };
+}
+
 const DIALOG_SIZE_MAP = {
     sm: '400px',
     md: '600px',
@@ -3822,8 +3949,9 @@ class XiriDialogComponent {
         }, 10);
     }
     formChanged(event) {
-        this.formValid.set(event.valid);
-        this.formValues = event.value;
+        const state = formState(event);
+        this.formValid.set(state.valid);
+        this.formValues = state.value;
     }
     ngOnDestroy() {
         if (this.to)
@@ -4229,6 +4357,12 @@ class XiriTableInlineEditService {
         this.displayedOptions = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "displayedOptions" }] : /* istanbul ignore next */ []));
         this.editingOriginalValue = null;
+        // Draft of v while a cellObject cell is edited. The cell itself is never mutated by the editor:
+        // cancel drops the draft, the server (or the save fallback) replaces the whole cell.
+        // editStart is the normalised v at start(): "unchanged" compares against it, never against the
+        // live cell, which another save's updates may have patched meanwhile (Tab navigation).
+        this.editDraft = null;
+        this.editStart = null;
         // Hochgezählt bei jedem start()/cancel(): ein verspäteter Save-Fehler öffnet die Zelle nur wieder, wenn seitdem nichts passiert ist.
         this.editSeq = 0;
         this.editableOptionsSub = null;
@@ -4246,13 +4380,20 @@ class XiriTableInlineEditService {
         this.onDataUpdate = config.onDataUpdate;
         this.onCallReturn = config.onCallReturn;
         this.isRowLive = config.isRowLive;
+        this.hasUrl = config.hasUrl;
     }
     start(row, column, skipSavingCheck = false) {
         if (!column.editable || !this.editUrl || (!skipSavingCheck && this.savingCell()))
             return;
         this.editSeq++;
+        if (column.cellObject && !isCellObject(row[column.id]))
+            row[column.id] = asCellObject(row[column.id]);
         const val = row[column.id];
         this.editingOriginalValue = Array.isArray(val) ? JSON.parse(JSON.stringify(val)) : val;
+        if (column.cellObject) {
+            this.editStart = normalizeEditValue(column, isCellObject(val) ? val.v : null);
+            this.editDraft = this.editStart;
+        }
         if (column.format === 'chips' && Array.isArray(val) && !column.editableOptionsUrl) {
             this.editingChipsValues.set(val.map((c) => {
                 const opt = column.editableOptions?.find(o => o.label === c.label);
@@ -4294,6 +4435,26 @@ class XiriTableInlineEditService {
             this.focus();
         }
     }
+    /** Value the inline editor shows: the draft of a cellObject cell while editing, else v, else the cell. */
+    editValue(row, column) {
+        const cell = row[column.id];
+        if (column.cellObject)
+            return this.isEditing(row, column.id) ? this.editDraft : (isCellObject(cell) ? cell.v : null);
+        return cell;
+    }
+    setEditValue(row, column, value) {
+        if (column.cellObject)
+            // Raw browser value, kept as is: [ngModel] is one-way, so normalising here (e.g. a leading
+            // "-" or a trailing "." on a numeric column) would write a mangled value back into the input
+            // and break typing. Normalisation happens once, in save().
+            this.editDraft = value;
+        else
+            row[column.id] = value;
+    }
+    /** compareWith for mat-select: option values are strings, v of a duration cell is a number. */
+    compareEditValue(a, b) {
+        return String(a ?? '') === String(b ?? '');
+    }
     /** Sets up the search box + subscription for searchable inline-edit selects. */
     initSearch(column, row) {
         this.teardownSearch();
@@ -4356,10 +4517,17 @@ class XiriTableInlineEditService {
         this.editSeq++;
         const editing = this.editingCell();
         if (editing) {
-            editing.row[editing.field] = this.editingOriginalValue;
+            // A cellObject cell was never mutated by the editor: restoring it here could revert a
+            // patch another save's response applied to it meanwhile (Tab to another cell, whose save
+            // then patches this one via updates) — the draft is dropped, the cell is left as is.
+            const column = this.displayedColumns.find(c => c.id === editing.field);
+            if (!column?.cellObject)
+                editing.row[editing.field] = this.editingOriginalValue;
             this.editingCell.set(null);
             this.editingOriginalValue = null;
         }
+        this.editDraft = null;
+        this.editStart = null;
         this.editableOptionsSub?.unsubscribe();
         this.editableOptionsSub = null;
         this.loadedEditableOptions.set([]);
@@ -4370,8 +4538,11 @@ class XiriTableInlineEditService {
         const editing = this.editingCell();
         if (!editing || editing.row !== row || editing.field !== column.id)
             return;
-        const newValue = row[column.id];
-        const originalValue = this.editingOriginalValue;
+        // Normalised here, not in setEditValue: the draft holds the raw browser value while typing (see
+        // setEditValue), so "-" or "7200." are not clobbered mid-edit; only the committed save normalises.
+        const draft = column.cellObject ? normalizeEditValue(column, this.editDraft) : null;
+        const newValue = column.cellObject ? draft : row[column.id];
+        const originalValue = column.cellObject ? this.editStart : this.editingOriginalValue;
         const seq = this.editSeq;
         const snapshot = {
             chips: this.editingChipsValues(),
@@ -4383,40 +4554,73 @@ class XiriTableInlineEditService {
         this.loadedEditableOptions.set([]);
         this.editableOptionsLoading.set(false);
         this.teardownSearch();
-        const unchanged = Array.isArray(newValue)
-            ? JSON.stringify(newValue) === JSON.stringify(originalValue)
-            : newValue === originalValue;
+        const unchanged = column.cellObject
+            ? draft === originalValue
+            : Array.isArray(newValue) ? JSON.stringify(newValue) === JSON.stringify(originalValue) : newValue === originalValue;
         if (unchanged) {
             return;
         }
-        const value = column.format === 'chips' && Array.isArray(newValue)
-            ? newValue.map((c) => c.label)
-            : newValue;
+        const value = column.cellObject
+            ? draft
+            : column.format === 'chips' && Array.isArray(newValue)
+                ? newValue.map((c) => c.label)
+                : newValue;
         const payload = { id: row.id, field: column.id, value };
         this.savingCell.set({ row, field: column.id });
         this.dataService.post(this.editUrl, payload).pipe(takeUntil(this.abort$)).subscribe({
             next: (raw) => {
                 const result = raw;
                 this.savingCell.set(null);
+                const cellBefore = row[column.id];
+                // Whether the server said anything at all about THIS cell, and whether what it said was
+                // a real cell object — judged from the raw response, never from a row reference compare
+                // (another save's response can replace that reference for an unrelated reason meanwhile).
+                const ownUpdate = result?.updates ? result.updates[column.id] : undefined;
+                const isOwnSingleUpdate = (result?.table === 'update' || result?.update === 'table')
+                    && result?.id === row.id && result?.field === column.id;
+                const hadOwnPatch = ownUpdate !== undefined || isOwnSingleUpdate;
+                const patched = (ownUpdate !== undefined && isCellObject(ownUpdate))
+                    || (isOwnSingleUpdate && isCellObject(result?.content));
                 if (result?.updates) {
                     const updates = result.updates;
                     Object.keys(updates).forEach(key => {
-                        row[key] = updates[key];
+                        const col = this.displayedColumns.find(c => c.id === key);
+                        if (col?.cellObject && !isCellObject(updates[key]))
+                            console.warn(`xiri-table: updates.${key} for a cellObject column is not a {d, v} object; it will sort as empty`);
+                        row[key] = col?.cellObject ? asCellObject(updates[key]) : updates[key];
                     });
-                    this.onDataUpdate();
                 }
-                this.onSaved(row, column.id);
+                // Let the handler apply refresh/goto/page and single-cell updates (table:update / update:table) first …
                 this.onCallReturn(result);
+                if (column.cellObject && !patched) {
+                    row[column.id] = hadOwnPatch
+                        // A bare value for this cell (reference changed, but not a real {d, v}): the server
+                        // already delivered the display, keep it and set v from the draft. No reload needed.
+                        ? { ...asCellObject(row[column.id]), v: draft }
+                        // No word from the server about this cell at all: show the draft as text so d never
+                        // lags behind v; url tables reload below to fetch the real d.
+                        : { ...asCellObject(cellBefore), d: draft === null ? '' : String(draft), v: draft };
+                }
+                this.onDataUpdate();
+                this.onSaved(row, column.id);
+                // A refresh/navigation already replaces or leaves this table; a single-cell update for another
+                // row/field does not, so the url table still reloads to get d for this cell.
+                const acted = !!(result?.refresh || result?.goto || result?.page || result?.table === 'refresh');
+                if (column.cellObject && !patched && !hadOwnPatch && !acted && this.hasUrl())
+                    this.onCallReturn({ done: true, refresh: 'table' });
             },
             error: (err) => {
                 this.savingCell.set(null);
                 if (this.editSeq !== seq || !this.isRowLive(row)) {
-                    // User ist schon woanders (Tab, Escape, neue Zelle) oder ein Reload hat die Row ersetzt: nichts kapern, Wert verwerfen
-                    row[column.id] = originalValue;
+                    // User ist schon woanders (Tab, Escape, neue Zelle) oder ein Reload hat die Row ersetzt: nichts kapern,
+                    // Wert verwerfen. Bei Zellobjekten wurde die Zelle nie verändert, also nichts zurückzusetzen.
+                    if (!column.cellObject)
+                        row[column.id] = originalValue;
                     this.onDataUpdate();
                 }
                 else {
                     // Abgelehnten Wert stehen lassen und Zelle wieder öffnen; Escape stellt weiterhin das Original her
+                    // (bei Zellobjekten per cancel() nur noch fürs Draft, die Zelle bleibt sowieso unberührt).
                     this.loadedEditableOptions.set(snapshot.options);
                     this.editingChipsValues.set(snapshot.chips);
                     this.editingOriginalValue = originalValue;
@@ -4517,7 +4721,7 @@ class XiriTableInlineEditService {
         if (column.format === 'chips')
             return this.editingChipsValues();
         const row = this.editingCell()?.row;
-        const v = row ? row[column.id] : null;
+        const v = row ? this.editValue(row, column) : null;
         return v !== null && v !== undefined && v !== '' ? [String(v)] : [];
     }
     onChipsChange(row, column, selectedValues) {
@@ -4622,7 +4826,7 @@ function normalizeParent(value) {
  * become roots. Cycles are detected and the offending node is treated as a root (with a
  * console warning) instead of crashing.
  */
-function buildTree(rows, idField, parentIdField, treeColumn) {
+function buildTree(rows, idField, parentIdField, keyOf) {
     const nodeMap = new Map();
     for (const row of rows) {
         const id = row[idField];
@@ -4645,8 +4849,8 @@ function buildTree(rows, idField, parentIdField, treeColumn) {
         }
     }
     assignLevels(roots, 0);
-    if (treeColumn)
-        sortSiblings(roots, treeColumn);
+    if (keyOf)
+        sortSiblings(roots, keyOf);
     return roots;
 }
 /** Walks up from candidateParent; returns true if it reaches nodeId (would create a cycle). */
@@ -4670,11 +4874,17 @@ function assignLevels(nodes, level) {
         assignLevels(node.children, level + 1);
     }
 }
-/** Sorts siblings alphabetically by the tree column at every level. */
-function sortSiblings(nodes, treeColumn) {
-    nodes.sort((a, b) => String(a.row[treeColumn] ?? '').localeCompare(String(b.row[treeColumn] ?? ''), undefined, { sensitivity: 'base' }));
+/** Sorts siblings at every level: numerically when both keys are numbers, otherwise locale-aware by string. */
+function sortSiblings(nodes, keyOf) {
+    nodes.sort((a, b) => {
+        const ka = keyOf(a.row);
+        const kb = keyOf(b.row);
+        if (typeof ka === 'number' && typeof kb === 'number')
+            return ka - kb;
+        return String(ka ?? '').localeCompare(String(kb ?? ''), undefined, { sensitivity: 'base' });
+    });
     for (const node of nodes)
-        sortSiblings(node.children, treeColumn);
+        sortSiblings(node.children, keyOf);
 }
 /**
  * Projects the tree to the flat, ordered list of currently visible rows, annotating each
@@ -4790,11 +5000,11 @@ class XiriTableTreeService {
         this.config = config;
         this.treeColumnId = config.treeColumn || firstColumnId;
     }
-    /** Builds the tree from flat rows and initialises the expand-state. */
-    build(rows) {
+    /** Builds the tree from flat rows and initialises the expand-state. keyOf defaults to the raw tree-column value. */
+    build(rows, keyOf = row => row[this.treeColumnId]) {
         if (!this.config)
             return;
-        this.roots = buildTree(rows, this.config.idField, this.config.parentIdField, this.treeColumnId);
+        this.roots = buildTree(rows, this.config.idField, this.config.parentIdField, keyOf);
         const persisted = this.loadPersisted();
         if (persisted)
             this.expanded = new Set(persisted); // persisted state wins
@@ -5072,6 +5282,7 @@ class XiriTableComponent {
             return values;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "_filterData" }] : /* istanbul ignore next */ []));
+        this.compareEditValue = (a, b) => this.inlineEdit.compareEditValue(a, b);
         effect(() => {
             const filterData = this._filterData();
             this.loading.set(true);
@@ -5087,7 +5298,8 @@ class XiriTableComponent {
                 this.dataSource.data = [];
             }
             else if (this.tree.enabled) {
-                this.tree.build(all);
+                const treeField = this.displayedColumns.find(col => col.id === this.tree.treeColumn);
+                this.tree.build(all, row => sortValue(row, this.tree.treeColumn, treeField));
                 this.refreshTree();
             }
             else {
@@ -5113,6 +5325,7 @@ class XiriTableComponent {
             onDataUpdate: () => this.dataSource._updateChangeSubscription(),
             onCallReturn: (result) => this.callReturn(result),
             isRowLive: (row) => this.dataSource.data.includes(row),
+            hasUrl: () => !!this.settings().url,
         });
         if (this.options.pagination)
             this.paginator().pageSize = this.options.itemsPerPage;
@@ -5145,7 +5358,8 @@ class XiriTableComponent {
         if (this.options.search && !this.options.serverSide && !this.tree.enabled) {
             this.dataSource.filterPredicate = (data, filter) => {
                 const dataStr = this.columnsToSearch.reduce((currentTerm, key) => {
-                    return currentTerm + data[key] + '◬';
+                    const value = cellDisplay(data[key], this.displayedColumns.find(c => c.id === key));
+                    return currentTerm + value + '◬';
                 }, '').toLowerCase();
                 return dataStr.indexOf(filter) !== -1;
             };
@@ -5186,8 +5400,8 @@ class XiriTableComponent {
                     else if (column.footer === 'sum') {
                         let sum = 0;
                         this._displayeddata.forEach((row) => {
-                            const cell = row[column.id];
-                            sum += +(cell ? cell[1] : 0);
+                            const v = sortValue(row, column.id, column);
+                            sum += typeof v === 'number' ? v : 0;
                         });
                         if (!column.webformat)
                             this.footer[column.id] = sum;
@@ -5311,6 +5525,8 @@ class XiriTableComponent {
         }
     }
     setData(data) {
+        if (normalizeCellObjects(data, this.displayedColumns))
+            console.warn('xiri-table: cells of cellObject columns must be {d, v} objects; bare values were wrapped and sort as empty');
         this._alldata.set(data);
         if (this._firstData) {
             this._firstData = false;
@@ -5335,8 +5551,8 @@ class XiriTableComponent {
         this.footer = footer;
         this.displayedColumns.forEach((column) => {
             const value = this.footer[column.id];
-            if (Array.isArray(value))
-                this.footer[column.id] = value[0];
+            const shown = cellDisplay(value, column);
+            this.footer[column.id] = Array.isArray(shown) ? shown[0] : shown;
         });
     }
     reload() {
@@ -5416,8 +5632,10 @@ class XiriTableComponent {
     }
     rowMatches(row, term) {
         let dataStr = '';
-        for (const key of this.columnsToSearch)
-            dataStr += row[key] + '◬';
+        for (const key of this.columnsToSearch) {
+            const value = cellDisplay(row[key], this.displayedColumns.find(c => c.id === key));
+            dataStr += value + '◬';
+        }
         return dataStr.toLowerCase().indexOf(term) !== -1;
     }
     toggleNode(event, row) {
@@ -5645,7 +5863,9 @@ class XiriTableComponent {
         const check = button.check ?? [];
         for (let i = 0; i != check.length; i++) {
             const k = check[i];
-            if (row[k] === null || row[k] === undefined || row[k] === '') {
+            const cell = row[k];
+            const value = isCellObject(cell) ? cell.v : cell;
+            if (value === null || value === undefined || value === '') {
                 return false;
             }
         }
@@ -5686,16 +5906,20 @@ class XiriTableComponent {
     callReturn(result, fromButton = false) {
         this.responseHandler.handle(result, {
             onTableRefresh: () => this.reload(),
-            onTableUpdate: (id, field, content) => {
-                const i = this.dataSource.data.findIndex((x) => x.id === id);
-                if (i == -1)
-                    return;
-                this.dataSource.data[i][field] = content;
-                this.dataSource._updateChangeSubscription();
-            },
+            onTableUpdate: (id, field, content) => this.onTableUpdate(id, field, content),
             onPanelRefresh: fromButton ? undefined : () => this.refreshPanel(),
         });
     }
+    onTableUpdate(id, field, content) {
+        const i = this.dataSource.data.findIndex((x) => x.id === id);
+        if (i == -1)
+            return;
+        const column = this.displayedColumns.find(c => c.id === field);
+        if (column?.cellObject && !isCellObject(content))
+            console.warn(`xiri-table: update for cellObject column "${field}" is not a {d, v} object; it will sort as empty`);
+        this.dataSource.data[i][field] = column?.cellObject ? asCellObject(content) : content;
+        this.dataSource._updateChangeSubscription();
+    }
     // Ohne umschließende Card: wie eine Card ohne url → Page-Reload.
     refreshPanel() {
         if (this.panelHost)
@@ -5720,6 +5944,10 @@ class XiriTableComponent {
     saveInlineEdit(row, column) {
         this.inlineEdit.save(row, column);
     }
+    editValue(row, column) { return this.inlineEdit.editValue(row, column); }
+    setEditValue(row, column, value) {
+        this.inlineEdit.setEditValue(row, column, value);
+    }
     isEditing(row, fieldId) {
         return this.inlineEdit.isEditing(row, fieldId);
     }
@@ -5769,6 +5997,10 @@ class XiriTableComponent {
                 if (curCol >= this.displayedColumns.length)
                     break;
                 const col = this.displayedColumns[curCol];
+                // Only input cells take pasted text: other formats carry structured cells (number tuples,
+                // cell objects, chips), and a pasted string would break their display and sorting.
+                if (col.format !== 'input')
+                    continue;
                 result[col.id] = clipRowsArray[i][j];
             }
         }
@@ -5798,19 +6030,18 @@ class XiriTableComponent {
         });
     }
     getSortingDataAccessor() {
-        return (data, sortHeaderId) => {
-            const column = this.displayedColumns.find(col => col.id === sortHeaderId);
-            if (column && column.format === 'number')
-                return data[sortHeaderId][1];
-            // ponytail: sort by the first chip's label — without this MatTable compares the raw object
-            // array, which coerces to "[object Object],..." and effectively sorts by chip count.
-            if (column && column.format === 'chips')
-                return data[sortHeaderId]?.[0]?.label ?? '';
-            return data[sortHeaderId];
-        };
+        return (data, sortHeaderId) => sortValue(data, sortHeaderId, this.displayedColumns.find(col => col.id === sortHeaderId));
+    }
+    /** Display part of a cell (see cell.ts); used by every cell template. */
+    cellText(row, column) {
+        return cellDisplay(row[column.id], column);
+    }
+    /** Display lines of a text2/textn cell. */
+    cellLines(row, column) {
+        return cellLines(row[column.id], column);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.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" }, providers: [XiriTableInlineEditService, XiriTableTreeService], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-card class=\"xiritablecard mat-mdc-elevation-specific\" [class.mat-elevation-z3]=\"!options.flat\" [class.flat]=\"options.flat\">\n\t<div class=\"xiritable\" [class]=\"options.class\">\n\t\t<div class=\"table-full\">\n\t\t\t@if (bulkBarActive) {\n\t\t\t\t<div class=\"xiri-bulk-bar\" [class.sticky]=\"options.stickyBulkBar\" role=\"toolbar\"\n\t\t\t\t     aria-label=\"Massenaktionen\" data-testid=\"table-bulk-bar\">\n\t\t\t\t\t<button mat-icon-button (click)=\"cancelBulk()\" matTooltip=\"Auswahl aufheben\"\n\t\t\t\t\t        aria-label=\"Auswahl aufheben\">\n\t\t\t\t\t\t<mat-icon>close</mat-icon>\n\t\t\t\t\t</button>\n\t\t\t\t\t<span class=\"xiri-bulk-count\" aria-live=\"polite\" data-testid=\"table-bulk-count\">\n\t\t\t\t\t\t@if (bulkAllResults()) {\n\t\t\t\t\t\t\tAlle {{ bulkTotalCount() }} Ergebnisse ausgew\u00E4hlt\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t{{ selection.selected.length }} ausgew\u00E4hlt\n\t\t\t\t\t\t}\n\t\t\t\t\t</span>\n\t\t\t\t\t@if (canSelectAllResults()) {\n\t\t\t\t\t\t<button mat-button color=\"primary\" (click)=\"selectAllResults()\"\n\t\t\t\t\t\t        data-testid=\"table-bulk-selectall\">\n\t\t\t\t\t\t\tAlle {{ bulkTotalCount() }} Ergebnisse ausw\u00E4hlen\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t\t<span class=\"xiri-bulk-spacer\"></span>\n\t\t\t\t\t@for (button of options.bulkActions; track button) {\n\t\t\t\t\t\t@if (!button.hide) {\n\t\t\t\t\t\t\t<button mat-button [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t        (click)=\"bulkAction($event, button)\"\n\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\" [matTooltipDisabled]=\"!button.hint\">\n\t\t\t\t\t\t\t\t@if (button.icon) {\n\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t{{ button.text }}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (hasHeader) {\n\t\t\t\t<div class=\"header\" [hidden]=\"bulkBarActive\">\n\t\t\t\t\t@if (options.reload) {\n\t\t\t\t\t\t<div class=\"buttons\">\n\t\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\t<mat-icon>autorenew</mat-icon>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t\t@if (autoRefresh()) {\n\t\t\t\t\t\t<div class=\"autorefresh-indicator\" role=\"status\" aria-live=\"polite\"\n\t\t\t\t\t\t     matTooltip=\"Tabelle aktualisiert sich automatisch\">\n\t\t\t\t\t\t\t<mat-icon class=\"spin\">sync</mat-icon>\n\t\t\t\t\t\t\t<span>Auto-Refresh aktiv \u00B7 n\u00E4chste in {{ countdown() }}s</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t\t@if (lastUpdated(); as updated) {\n\t\t\t\t\t\t<div class=\"lastupdated-indicator\" data-testid=\"table-last-updated\" role=\"status\" aria-live=\"polite\">\n\t\t\t\t\t\t\tStand {{ updated | date:'HH:mm' }}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t\t@if (treeEnabled) {\n\t\t\t\t\t\t<div class=\"buttons xiri-tree-actions\">\n\t\t\t\t\t\t\t<button mat-icon-button (click)=\"expandAllNodes()\" color=\"primary\"\n\t\t\t\t\t\t\t        matTooltip=\"Alle ausklappen\" aria-label=\"Alle ausklappen\">\n\t\t\t\t\t\t\t\t<mat-icon>unfold_more</mat-icon>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<button mat-icon-button (click)=\"collapseAllNodes()\" color=\"primary\"\n\t\t\t\t\t\t\t        matTooltip=\"Alle einklappen\" aria-label=\"Alle einklappen\">\n\t\t\t\t\t\t\t\t<mat-icon>unfold_less</mat-icon>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t\t<div class=\"middle\" [class.hasButtons]=\"options.buttons\">{{ options.title }}</div>\n\t\t\t\t\t@if (options.buttons) {\n\t\t\t\t\t\t<xiri-buttonline [settings]=\"options.buttons\" (result)=\"buttonReturn($event)\"\n\t\t\t\t\t\t                 [filterData]=\"_filterData()\"></xiri-buttonline>\n\t\t\t\t\t}\n\t\t\t\t\t@if (options.search) {\n\t\t\t\t\t\t<xiri-search (changed)=\"searchDo($event)\" [placeholder]=\"''\" [text]=\"searchTextInit\"></xiri-search>\n\t\t\t\t\t}\n\t\t\t\t\t@if (options.saveInput) {\n\t\t\t\t\t\t<div class=\"buttons saveInput\">\n\t\t\t\t\t\t\t<button mat-raised-button (click)=\"saveInputData()\" color=\"primary\">\n\t\t\t\t\t\t\t\t{{ options.saveInput }}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div class=\"tableout-wrap\">\n\t\t\t<div class=\"tableout\" [class.is-loading]=\"loading()\" [style.max-height]=\"options.scrollHeight || null\">\n\t\t\t\t<table mat-table [dataSource]=\"dataSource\" matSort [style.min-width]=\"options.minWidth ?? '100%'\"\n\t\t\t\t       [class]=\"densityClass()\"\n\t\t\t\t       [class.borders]=\"options.borders\" [class.bordersHeader]=\"options.bordersHeader\"\n\t\t\t\t       [trackBy]=\"trackByRowId\">\n\n\t\t\t\t\t@for (column of displayedColumns; track column.id) {\n\t\t\t\t\t\t<ng-container [matColumnDef]=\"column.id\" [sticky]=\"column.sticky\">\n\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef mat-sort-header=\"{{ column.id }}\" [disabled]=\"!column.sort || !options.sort\" disableClear\n\t\t\t\t\t\t\t    [style.width]=\"column.width\" [style.min-width]=\"column.minWidth\"\n\t\t\t\t\t\t\t    [class]=\"column.display + ' ' + (column.header || '')\"> {{ column.name }}\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t@switch (column.format) {\n\t\t\t\t\t\t\t\t@case ('buttons') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@for (button of column.buttons; track button; let i = $index) {\n\t\t\t\t\t\t\t\t\t\t\t@if (row[column.id][i] !== false && !button.hide) {\n\t\t\t\t\t\t\t\t\t\t\t\t@switch (button.action) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('href') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('download') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" [disabled]=\"false\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  (click)=\"openDialog( $event, button, column.id, i, row)\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('api') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" [disabled]=\"false\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  (click)=\"apiCall( $event, row[column.id][ i ] )\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('save') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" (click)=\"saveCall( $event, button, row, row[column.id][ i ] )\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  [disabled]=\"!saveCallCheck( button, row )\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon class=\"btnicon\" [class]=\"button.color || 'primary'\" [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!button.hint\">{{ button.icon }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('menu') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button mat-icon-button [matMenuTriggerFor]=\"menuRef\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [class]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [attr.aria-label]=\"button.hint || button.text\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        (click)=\"$event.stopPropagation()\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-menu #menuRef=\"matMenu\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@for (item of button.menuItems; track item; let j = $index) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (row[column.id][i][j] !== false) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@switch (item.action) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@let menuUrl = row[column.id][i][j] | xiriUrl;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a mat-menu-item [routerLink]=\"menuUrl?.path\" [queryParams]=\"menuUrl?.queryParams\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('href') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a mat-menu-item [href]=\"row[column.id][i][j]\" target=\"_blank\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button mat-menu-item (click)=\"openMenuDialog($event, item, column.id, i, j, row)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-menu>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@if (column.icons?.[ $any(row[ column.id ]) ]; as icon) {\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"icon[ 'color' ] || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltip]=\"icon[ 'hint' ] || '' \"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!icon[ 'hint' ]\">{{ icon['icon'] }}\n\t\t\t\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('html') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [innerHtml]=\"row[column.id] | safeHtml\" [class]=\"column.display\"></td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\"\n\t\t\t\t\t\t\t\t\t    [class.xiri-tree-td]=\"treeEnabled && column.id === treeColumnId\">\n\t\t\t\t\t\t\t\t\t\t@if (treeEnabled && column.id === treeColumnId) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treePrefix; context: { $implicit: row }\"></ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (row[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t\t\t\t@let cellUrl = row[column.id + 'Link'] | xiriUrl;\n\t\t\t\t\t\t\t\t\t\t\t<a [routerLink]=\"cellUrl?.path\" [queryParams]=\"cellUrl?.queryParams\" class=\"tablelink\">{{ row[column.id] }}</a>\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t<span>{{ row[column.id] }}</span>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (treeEnabled && column.id === treeColumnId) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treeSuffix; context: { $implicit: row }\"></ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('input') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t<mat-form-field subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t<input matInput\n\t\t\t\t\t\t\t\t\t\t\t       [type]=\"column.inputType || 'text'\"\n\t\t\t\t\t\t\t\t\t\t\t       [(ngModel)]=\"row[ column.id ]\"\n\t\t\t\t\t\t\t\t\t\t\t       [lang]=\"column.inputLang || ''\"\n\t\t\t\t\t\t\t\t\t\t\t       [required]=\"column.inputRequired || true\"\n\t\t\t\t\t\t\t\t\t\t\t       (paste)=\"pasteInput( $event, row, column )\">\n\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('text2') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t<div>{{ row[column.id][0] }}</div>\n\t\t\t\t\t\t\t\t\t\t<div>{{ row[column.id][1] }}</div>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('textn') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@for (line of row[column.id]; track $index) {\n\t\t\t\t\t\t\t\t\t\t\t<div>{{ line }}</div>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('number') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ row[column.id][0] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('chips') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@if (isSaving(row, column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t\t\t\t\t\t} @else if (column.editable && options.editUrl && isEditing(row, column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t@if (editableOptionsLoading()) {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-form-field class=\"xiri-inline-edit\" subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-select multiple\n\t\t\t\t\t\t\t\t\t\t\t\t\t            [ngModel]=\"editingChipsValues()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t            (selectionChange)=\"onChipsSelectionChange(row, column, $event.value)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t            (keydown)=\"onInlineEditKeydown($event, row, column)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t            (openedChange)=\"!$event && saveInlineEdit(row, column)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (column.editableOptionsSearch || column.editableSearchUrl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ngx-mat-select-search [formControl]=\"inlineSearchControl\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                       [searching]=\"inlineSearching()\"></ngx-mat-select-search>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t@for (opt of getEditableOptions(column); track opt.value) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-select>\n\t\t\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} @else if (column.editable && options.editUrl) {\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"xiri-editable-cell\" role=\"button\" tabindex=\"0\"\n\t\t\t\t\t\t\t\t\t\t\t     (click)=\"startInlineEdit(row, column); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t     (keydown.enter)=\"startInlineEdit(row, column); $event.stopPropagation()\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"xiri-chips-display\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t@for (chip of row[column.id]; track chip.label) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"xiri-chip-display\" [class]=\"chip.color || ''\">{{ chip.label }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon class=\"xiri-edit-icon\">edit</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"xiri-chips-display\">\n\t\t\t\t\t\t\t\t\t\t\t\t@for (chip of row[column.id]; track chip.label) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"xiri-chip-display\" [class]=\"chip.color || ''\">{{ chip.label }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@default {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\"\n\t\t\t\t\t\t\t\t\t    [class.xiri-tree-td]=\"treeEnabled && column.id === treeColumnId\">\n\t\t\t\t\t\t\t\t\t\t@if (treeEnabled && column.id === treeColumnId) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treePrefix; context: { $implicit: row }\"></ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (isSaving(row, column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t\t\t\t\t\t} @else if (column.editable && options.editUrl && isEditing(row, column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t@if (column.editableOptions || column.editableOptionsUrl || column.editableSearchUrl) {\n\t\t\t\t\t\t\t\t\t\t\t\t@if (editableOptionsLoading()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-form-field class=\"xiri-inline-edit\" subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-select [(ngModel)]=\"row[column.id]\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t            (keydown)=\"onInlineEditKeydown($event, row, column)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t            (openedChange)=\"!$event && saveInlineEdit(row, column)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (column.editableOptionsSearch || column.editableSearchUrl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ngx-mat-select-search [formControl]=\"inlineSearchControl\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                       [searching]=\"inlineSearching()\"></ngx-mat-select-search>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@for (opt of getEditableOptions(column); track opt.value) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-select>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-form-field class=\"xiri-inline-edit\" subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<input matInput\n\t\t\t\t\t\t\t\t\t\t\t\t\t       [(ngModel)]=\"row[column.id]\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t       (blur)=\"saveInlineEdit(row, column)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t       (keydown)=\"onInlineEditKeydown($event, row, column)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button matSuffix mat-icon-button class=\"xiri-inline-edit-confirm\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t        (mousedown)=\"$event.preventDefault(); saveInlineEdit(row, column)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t        aria-label=\"\u00C4nderung speichern\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t        tabindex=\"-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon>check</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} @else if (column.editable && options.editUrl) {\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"xiri-editable-cell\" role=\"button\" tabindex=\"0\"\n\t\t\t\t\t\t\t\t\t\t\t      (click)=\"startInlineEdit(row, column); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t      (keydown.enter)=\"startInlineEdit(row, column); $event.stopPropagation()\">\n\t\t\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ row[column.id] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon class=\"xiri-edit-icon\">edit</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ row[column.id] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (treeEnabled && column.id === treeColumnId) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treeSuffix; context: { $implicit: row }\"></ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t<td mat-footer-cell *matFooterCellDef [hidden]=\"!options.footer\"\n\t\t\t\t\t\t\t    [style.width]=\"column.width\" [style.min-width]=\"column.minWidth\" class=\"bottomrow\"\n\t\t\t\t\t\t\t    [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t@if ( footer[ column.id ] ) {\n\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ footer[ column.id ] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t\t@if (showSelectColumn) {\n\t\t\t\t\t\t<ng-container matColumnDef=\"select\" [sticky]=\"true\">\n\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef [style.width]=\"'65px'\">\n\t\t\t\t\t\t\t\t<mat-checkbox (change)=\"$event ? masterToggle() : null\"\n\t\t\t\t\t\t\t\t              [checked]=\"selection.hasValue() && isAllSelected()\"\n\t\t\t\t\t\t\t\t              [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\">\n\t\t\t\t\t\t\t\t@if (isSelectable(row)) {\n\t\t\t\t\t\t\t\t\t<mat-checkbox\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t(change)=\"$event ? toggleRow(row) : null\"\n\t\t\t\t\t\t\t\t\t\t\t[checked]=\"selection.isSelected(row)\">\n\t\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t<td mat-footer-cell *matFooterCellDef [style.width]=\"'65px'\" class=\"bottomrow\" [hidden]=\"!options.footer\">\n\t\t\t\t\t\t\t\t<mat-checkbox (change)=\"$event ? masterToggle() : null\"\n\t\t\t\t\t\t\t\t              [checked]=\"selection.hasValue() && isAllSelected()\"\n\t\t\t\t\t\t\t\t              [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\n\t\t\t\t\t@if (extraHeaderFields.length > 0) {\n\t\t\t\t\t\t@for (column of extraHeaderFields; track column.id) {\n\t\t\t\t\t\t\t<ng-container matColumnDef=\"{{ column.id }}\" [sticky]=\"column.sticky\">\n\t\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef [attr.colspan]=\"column.headerSpan\">{{ column.name }}</th>\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<tr mat-header-row *matHeaderRowDef=\"extraHeaders; sticky: true\" [class.dense]=\"options.dense\"></tr>\n\t\t\t\t\t}\n\n\t\t\t\t\t<tr mat-header-row *matHeaderRowDef=\"columnsToDisplay; sticky: true\" [class.dense]=\"options.dense\"></tr>\n\t\t\t\t\t<tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\" (click)=\"clicked(row)\"\n\t\t\t\t\t    [class.xiri-tree-dimmed]=\"treeEnabled && row._tree?.dimmed\"></tr>\n\t\t\t\t\t<tr mat-footer-row *matFooterRowDef=\"columnsToDisplay; sticky: true\" [hidden]=\"!options.footer\"></tr>\n\t\t\t\t</table>\n\t\t\t</div>\n\t\t\t<div class=\"loader\" [hidden]=\"!loading()\" [class.has-bottombar]=\"(options.select || options.pagination) && !options.footer\">\n\t\t\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t@if (!loading()) {\n\t\t\t\t@if (!errorMsg && dataSource.filteredData.length === 0) {\n\t\t\t\t\t@if (options.emptyState) {\n\t\t\t\t\t\t<xiri-empty-state [settings]=\"options.emptyState\"></xiri-empty-state>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<div class=\"nodata\">{{ options.textNoData }}</div>\n\t\t\t\t\t}\n\t\t\t\t} @else if (errorMsg) {\n\t\t\t\t\t<div class=\"alert alert-danger\">\n\t\t\t\t\t\t<span>{{ errorMsg }}</span>\n\t\t\t\t\t\t<button mat-button type=\"button\" data-testid=\"table-retry\" (click)=\"reload()\">\n\t\t\t\t\t\t\t<mat-icon>autorenew</mat-icon> Retry\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t<div class=\"xrow xsmall\" [class.bottomrow]=\"(options.select || options.pagination) && !options.footer\">\n\t\t\t\t@if (options.select) {\n\t\t\t\t\t<div class=\"xcol xcol-md-2 select-buttons\">\n\t\t\t\t\t\t@for (button of options.selectButtons; track button) {\n\t\t\t\t\t\t\t@if (!button.hide) {\n\t\t\t\t\t\t\t\t@switch (button.action) {\n\t\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t\t        (click)=\"openDialogSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [attr.aria-label]=\"button.hint || button.text\">\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t@case ('api') {\n\t\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t\t        (click)=\"apiCallSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [attr.aria-label]=\"button.hint || button.text\">\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t@case ('download') {\n\t\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t\t        (click)=\"downloadSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [attr.aria-label]=\"button.hint || button.text\">\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"xcol xcol-right-md-10\">\n\t\t\t\t\t<mat-paginator [hidden]=\"!options.pagination\" [pageSizeOptions]=\"options.pageSizes || []\" showFirstLastButtons=\"true\"></mat-paginator>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</mat-card>\n\n@if (dynData.data) {\n\t<ng-container *ngTemplateOutlet=\"dyncomponent(); context: { $implicit: dynData }\"></ng-container>\n}\n\n<!-- Tree mode: indent + expand/collapse arrow rendered before the tree column's content -->\n<ng-template #treePrefix let-row>\n\t<span class=\"xiri-tree-prefix\" [style.padding-left.px]=\"(row._tree?.level || 0) * 24\">\n\t\t@if (row._tree?.hasChildren) {\n\t\t\t<button type=\"button\" class=\"xiri-tree-iconbtn xiri-tree-toggle\" (click)=\"toggleNode($event, row)\"\n\t\t\t        tabindex=\"-1\" [attr.aria-label]=\"row._tree.expanded ? 'einklappen' : 'ausklappen'\">\n\t\t\t\t<mat-icon color=\"primary\">{{ row._tree.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n\t\t\t</button>\n\t\t} @else {\n\t\t\t<span class=\"xiri-tree-spacer\"></span>\n\t\t}\n\t</span>\n</ng-template>\n\n<!-- Tree mode: child-count badge (when collapsed) + optional \"+ sub\" button after the content -->\n<ng-template #treeSuffix let-row>\n\t@if (treeShowCounts && row._tree && !row._tree.expanded && row._tree.childCount > 0) {\n\t\t<span class=\"xiri-tree-count\">({{ row._tree.childCount }})</span>\n\t}\n\t@if (treeHasAddSub && treeCanAddSub(row)) {\n\t\t<button type=\"button\" class=\"xiri-tree-iconbtn xiri-tree-addsub\" (click)=\"addSub($event, row)\"\n\t\t        tabindex=\"-1\" matTooltip=\"Sub-Eintrag hinzuf\u00FCgen\" aria-label=\"Sub-Eintrag hinzuf\u00FCgen\">\n\t\t\t<mat-icon color=\"primary\">add</mat-icon>\n\t\t</button>\n\t}\n</ng-template>\n", styles: ["mat-card.xiritablecard{padding:0;margin-bottom:var(--xiri-spacing-xl)}mat-card.xiritablecard.flat{box-shadow:none;background:transparent;border-radius:0;margin-bottom:0}.mat-mdc-card-content.hasComponents>xiri-dyncomponent>div>xiri-table>mat-card.xiritablecard{margin-bottom:0}.xiritable{width:100%;overflow:auto}.xiritable.canbreak{word-break:break-all}.xiritable .table-full{display:inline-block;width:100%}.xiritable .table-full .xiri-bulk-bar{display:flex;align-items:center;gap:var(--xiri-spacing-sm);padding:var(--xiri-spacing-xs) var(--xiri-spacing-sm);background:var(--secondary-container, var(--mat-sys-secondary-container, #e0e0e0));color:var(--on-secondary-container, var(--mat-sys-on-secondary-container, inherit));border-radius:var(--xiri-radius-sm, 4px);margin-bottom:var(--xiri-spacing-xs)}.xiritable .table-full .xiri-bulk-bar.sticky{position:sticky;top:0;z-index:5}.xiritable .table-full .xiri-bulk-bar .xiri-bulk-count{font-weight:500}.xiritable .table-full .xiri-bulk-bar .xiri-bulk-spacer{flex:1 1 auto}.xiritable .table-full .tableout-wrap{position:relative}.xiritable .table-full .tableout{max-height:60vh;overflow-y:auto;width:100%;min-width:100%;max-width:100%}.xiritable .table-full .tableout.is-loading{min-height:100px}.xiritable .table-full .alert{padding:var(--xiri-spacing-md)}.xiritable .table-full mat-paginator{--mat-paginator-container-background-color: transparent;--mat-paginator-container-size: 51px;--mat-form-field-container-height: 32px;--mat-form-field-container-vertical-padding: 4px}.xiritable .table-full .bottomrow{border-top:1px solid var(--outline-variant, #C2C7CF)}.xiritable .table-full div.bottomrow{background-color:var(--surface-container, #F3F3F6);border-bottom-left-radius:var(--mat-card-elevated-container-shape, 12px);border-bottom-right-radius:var(--mat-card-elevated-container-shape, 12px)}.xiritable .header{background-color:var(--surface-container, #F3F3F6);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;min-height:51px;padding:0 16px;border-bottom:1px solid var(--outline-variant, #C2C7CF);border-top-left-radius:var(--mat-card-elevated-container-shape, 12px);border-top-right-radius:var(--mat-card-elevated-container-shape, 12px)}.xiritable .header .buttons{padding:0 7px 0 .5rem;margin-left:-16px}.xiritable .header .buttons button{z-index:200}.xiritable .header .buttons.saveInput{padding-left:21px}.xiritable .header .middle{flex-grow:1;font-size:var(--xiri-font-size-title);display:flex;padding:0}.xiritable .header xiri-buttonline{padding:0 0 0 16px}.xiritable .header .autorefresh-indicator{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;font-size:var(--xiri-font-size-small, .8rem);color:var(--primary, var(--mat-sys-primary, #006398))}.xiritable .header .autorefresh-indicator mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.xiritable .header .autorefresh-indicator mat-icon.spin{animation:xiri-autorefresh-spin 1.5s linear infinite}.xiritable .header .lastupdated-indicator{display:inline-flex;align-items:center;padding:2px 8px;font-size:var(--xiri-font-size-small, .8rem);color:var(--on-surface-variant, #44474F);opacity:.75}@keyframes xiri-autorefresh-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.xiritable table{width:100%}.xiritable table.density-regular{--mat-table-header-container-height: 42px;--mat-table-footer-container-height: 42px;--mat-table-row-item-container-height: 42px}.xiritable table.density-compact{--mat-table-header-container-height: 32px;--mat-table-footer-container-height: 32px;--mat-table-row-item-container-height: 32px}.xiritable table.density-relaxed{--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 52px;--mat-table-row-item-container-height: 52px}.xiritable table th.mat-mdc-header-cell:not(:first-of-type),.xiritable table td.mat-mdc-cell:not(:first-of-type),.xiritable table td.mat-mdc-footer-cell:not(:first-of-type){padding-left:5px}.xiritable table th.mat-mdc-header-cell:not(:last-of-type),.xiritable table td.mat-mdc-cell:not(:last-of-type),.xiritable table td.mat-mdc-footer-cell:not(:last-of-type){padding-right:7px}.xiritable table tr.mat-mdc-row{transition:background-color var(--xiri-duration-fast) var(--xiri-easing-standard)}.xiritable table tr.mat-mdc-row:hover{background:var(--surface-variant, #DEE3EB)}.xiritable table .tablelink{text-decoration:underline}.xiritable table td.buttons xiri-button,.xiritable table td.buttons xiri-buttonstyle,.xiritable table td.buttons .btnicon{margin-right:8px}.xiritable table td.buttons xiri-button:last-child,.xiritable table td.buttons xiri-buttonstyle:last-child,.xiritable table td.buttons .btnicon:last-child{margin-right:0}.xiritable table td.number,.xiritable table th.number,.xiritable table td.mat-mdc-footer-cell.number{text-align:right;font-variant-numeric:tabular-nums}.xiritable table td.right,.xiritable table td.align-right,.xiritable table th.right,.xiritable table th.align-right{text-align:right}.xiritable table td.center,.xiritable table td.align-center,.xiritable table th.center,.xiritable table th.align-center{text-align:center}.xiritable table td.left,.xiritable table td.align-left,.xiritable table th.left,.xiritable table th.align-left{text-align:left}.xiritable table td.vertical,.xiritable table th.vertical{writing-mode:sideways-rl;text-orientation:sideways}.xiritable table td.vertical div,.xiritable table th.vertical div{max-height:6rem}.xiritable table td.sideways,.xiritable table th.sideways{writing-mode:sideways-lr;text-orientation:sideways}.xiritable table td.sideways div,.xiritable table th.sideways div{max-height:6rem}.xiritable table td.upright,.xiritable table th.upright{writing-mode:vertical-rl;text-orientation:upright}.xiritable table.borders td+td{border-left:1px solid var(--outline-variant, #C2C7CF)}.xiritable table.bordersHeader th+th{border-left:1px solid var(--outline-variant, #C2C7CF)}.xiritable table td.mat-mdc-cell mat-form-field{--mat-form-field-container-height: 40px;--mat-form-field-container-vertical-padding: 8px}.xiritable .xiri-editable-cell{cursor:pointer;display:inline-flex;align-items:center;border-radius:var(--xiri-radius-xs);padding:2px 4px}.xiritable .xiri-editable-cell:hover,.xiritable .xiri-editable-cell:focus-visible{background-color:var(--surface-variant, #DEE3EB)}.xiritable .xiri-editable-cell:hover .xiri-edit-icon,.xiritable .xiri-editable-cell:focus-visible .xiri-edit-icon{opacity:1}.xiritable .xiri-edit-icon{opacity:0;font-size:14px;width:14px;height:14px;margin-left:4px;color:var(--on-surface-variant, #44474F);transition:opacity var(--xiri-duration-fast) var(--xiri-easing-standard)}.xiritable .xiri-inline-edit{--mat-form-field-container-height: 36px;--mat-form-field-container-vertical-padding: 6px;width:100%}.xiritable .xiri-inline-edit-confirm{--mdc-icon-button-icon-size: 18px;--mdc-icon-button-state-layer-size: 28px;width:28px;height:28px;padding:0;margin-right:5px;color:var(--primary, #1976d2);display:inline-flex;align-items:center;justify-content:center}.xiritable .xiri-inline-edit-confirm mat-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:18px}.xiritable .mat-column-select{overflow:initial}.xiritable .select-buttons{padding:.3rem .8rem;display:flex;align-items:center}.xiritable .select-buttons button{margin-right:.5rem}.xiritable .xiri-cell-saved{animation:pulse .5s var(--xiri-easing-standard);border-radius:var(--xiri-radius-xs)}.xiritable .nodata{padding:.5rem 1.5rem;font-size:var(--xiri-font-size-label);background-color:var(--surface, #FFFFFF);animation:fadeInUp var(--xiri-duration-normal) var(--xiri-easing-decelerate)}.xiritable .loader{position:absolute;top:0;left:0;width:100%;bottom:0;display:flex;justify-content:center;align-items:center;background-color:var(--ripple, rgba(206, 212, 218, .5));z-index:200;border-bottom-left-radius:var(--mat-card-elevated-container-shape, 12px);border-bottom-right-radius:var(--mat-card-elevated-container-shape, 12px);animation:fadeIn var(--xiri-duration-fast) var(--xiri-easing-standard)}.xiritable .loader.has-bottombar{border-bottom-left-radius:0;border-bottom-right-radius:0}xiri-dyncomponent{margin-bottom:var(--xiri-spacing-xl)}.mat-expansion-panel-body>xiri-dyncomponent,.mat-mdc-tab-body-content>xiri-dyncomponent{margin-bottom:0}[hidden]{display:none!important}.xiri-tree-actions{display:flex;align-items:center}td.xiri-tree-td{white-space:nowrap}td.xiri-tree-td .xiri-tree-prefix{display:inline-flex;align-items:center;vertical-align:middle}td.xiri-tree-td .xiri-tree-iconbtn{appearance:none;border:0;background:transparent;padding:0;margin:0;flex:0 0 24px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent}td.xiri-tree-td .xiri-tree-iconbtn .mat-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:20px;line-height:20px;margin:0}td.xiri-tree-td .xiri-tree-iconbtn:hover{background:#0000000f}td.xiri-tree-td .xiri-tree-iconbtn:focus-visible{outline:2px solid var(--primary, var(--mat-sys-primary, currentColor));outline-offset:-2px}td.xiri-tree-td .xiri-tree-spacer{width:24px;height:24px;flex:0 0 24px}td.xiri-tree-td .xiri-tree-count{margin-left:var(--xiri-spacing-xs, 4px);opacity:.6;font-size:.85em}td.xiri-tree-td .xiri-tree-addsub{margin-left:var(--xiri-spacing-xs, 4px);opacity:0;transition:opacity .15s ease-in-out}tr.mat-mdc-row:hover td.xiri-tree-td .xiri-tree-addsub,td.xiri-tree-td .xiri-tree-addsub:focus-visible{opacity:1}tr.xiri-tree-dimmed{opacity:.6}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: XiriButtonlineComponent, selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "component", type: XiriSearchComponent, selector: "xiri-search", inputs: ["placeholder", "open", "reset", "escape", "focus", "text"], outputs: ["changed"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: XiriButtonstyleComponent, selector: "xiri-buttonstyle", inputs: ["button", "disabled", "loading", "countdown", "pollText"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgxMatSelectSearchModule }, { kind: "component", type: i2.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XiriButtonComponent, selector: "xiri-button", inputs: ["button", "disabled", "filterData", "url"], outputs: ["result"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: XiriEmptyStateComponent, selector: "xiri-empty-state", inputs: ["settings"], outputs: ["buttonResult"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }, { kind: "pipe", type: XiriUrlPipe, name: "xiriUrl" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.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" }, providers: [XiriTableInlineEditService, XiriTableTreeService], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-card class=\"xiritablecard mat-mdc-elevation-specific\" [class.mat-elevation-z3]=\"!options.flat\" [class.flat]=\"options.flat\">\n\t<div class=\"xiritable\" [class]=\"options.class\">\n\t\t<div class=\"table-full\">\n\t\t\t@if (bulkBarActive) {\n\t\t\t\t<div class=\"xiri-bulk-bar\" [class.sticky]=\"options.stickyBulkBar\" role=\"toolbar\"\n\t\t\t\t     aria-label=\"Massenaktionen\" data-testid=\"table-bulk-bar\">\n\t\t\t\t\t<button mat-icon-button (click)=\"cancelBulk()\" matTooltip=\"Auswahl aufheben\"\n\t\t\t\t\t        aria-label=\"Auswahl aufheben\">\n\t\t\t\t\t\t<mat-icon>close</mat-icon>\n\t\t\t\t\t</button>\n\t\t\t\t\t<span class=\"xiri-bulk-count\" aria-live=\"polite\" data-testid=\"table-bulk-count\">\n\t\t\t\t\t\t@if (bulkAllResults()) {\n\t\t\t\t\t\t\tAlle {{ bulkTotalCount() }} Ergebnisse ausgew\u00E4hlt\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t{{ selection.selected.length }} ausgew\u00E4hlt\n\t\t\t\t\t\t}\n\t\t\t\t\t</span>\n\t\t\t\t\t@if (canSelectAllResults()) {\n\t\t\t\t\t\t<button mat-button color=\"primary\" (click)=\"selectAllResults()\"\n\t\t\t\t\t\t        data-testid=\"table-bulk-selectall\">\n\t\t\t\t\t\t\tAlle {{ bulkTotalCount() }} Ergebnisse ausw\u00E4hlen\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t\t<span class=\"xiri-bulk-spacer\"></span>\n\t\t\t\t\t@for (button of options.bulkActions; track button) {\n\t\t\t\t\t\t@if (!button.hide) {\n\t\t\t\t\t\t\t<button mat-button [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t        (click)=\"bulkAction($event, button)\"\n\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\" [matTooltipDisabled]=\"!button.hint\">\n\t\t\t\t\t\t\t\t@if (button.icon) {\n\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t{{ button.text }}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (hasHeader) {\n\t\t\t\t<div class=\"header\" [hidden]=\"bulkBarActive\">\n\t\t\t\t\t@if (options.reload) {\n\t\t\t\t\t\t<div class=\"buttons\">\n\t\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\t<mat-icon>autorenew</mat-icon>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t\t@if (autoRefresh()) {\n\t\t\t\t\t\t<div class=\"autorefresh-indicator\" role=\"status\" aria-live=\"polite\"\n\t\t\t\t\t\t     matTooltip=\"Tabelle aktualisiert sich automatisch\">\n\t\t\t\t\t\t\t<mat-icon class=\"spin\">sync</mat-icon>\n\t\t\t\t\t\t\t<span>Auto-Refresh aktiv \u00B7 n\u00E4chste in {{ countdown() }}s</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t\t@if (lastUpdated(); as updated) {\n\t\t\t\t\t\t<div class=\"lastupdated-indicator\" data-testid=\"table-last-updated\" role=\"status\" aria-live=\"polite\">\n\t\t\t\t\t\t\tStand {{ updated | date:'HH:mm' }}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t\t@if (treeEnabled) {\n\t\t\t\t\t\t<div class=\"buttons xiri-tree-actions\">\n\t\t\t\t\t\t\t<button mat-icon-button (click)=\"expandAllNodes()\" color=\"primary\"\n\t\t\t\t\t\t\t        matTooltip=\"Alle ausklappen\" aria-label=\"Alle ausklappen\">\n\t\t\t\t\t\t\t\t<mat-icon>unfold_more</mat-icon>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<button mat-icon-button (click)=\"collapseAllNodes()\" color=\"primary\"\n\t\t\t\t\t\t\t        matTooltip=\"Alle einklappen\" aria-label=\"Alle einklappen\">\n\t\t\t\t\t\t\t\t<mat-icon>unfold_less</mat-icon>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t\t<div class=\"middle\" [class.hasButtons]=\"options.buttons\">{{ options.title }}</div>\n\t\t\t\t\t@if (options.buttons) {\n\t\t\t\t\t\t<xiri-buttonline [settings]=\"options.buttons\" (result)=\"buttonReturn($event)\"\n\t\t\t\t\t\t                 [filterData]=\"_filterData()\"></xiri-buttonline>\n\t\t\t\t\t}\n\t\t\t\t\t@if (options.search) {\n\t\t\t\t\t\t<xiri-search (changed)=\"searchDo($event)\" [placeholder]=\"''\" [text]=\"searchTextInit\"></xiri-search>\n\t\t\t\t\t}\n\t\t\t\t\t@if (options.saveInput) {\n\t\t\t\t\t\t<div class=\"buttons saveInput\">\n\t\t\t\t\t\t\t<button mat-raised-button (click)=\"saveInputData()\" color=\"primary\">\n\t\t\t\t\t\t\t\t{{ options.saveInput }}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div class=\"tableout-wrap\">\n\t\t\t<div class=\"tableout\" [class.is-loading]=\"loading()\" [style.max-height]=\"options.scrollHeight || null\">\n\t\t\t\t<table mat-table [dataSource]=\"dataSource\" matSort [style.min-width]=\"options.minWidth ?? '100%'\"\n\t\t\t\t       [class]=\"densityClass()\"\n\t\t\t\t       [class.borders]=\"options.borders\" [class.bordersHeader]=\"options.bordersHeader\"\n\t\t\t\t       [trackBy]=\"trackByRowId\">\n\n\t\t\t\t\t@for (column of displayedColumns; track column.id) {\n\t\t\t\t\t\t<ng-container [matColumnDef]=\"column.id\" [sticky]=\"column.sticky\">\n\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef mat-sort-header=\"{{ column.id }}\" [disabled]=\"!column.sort || !options.sort\" disableClear\n\t\t\t\t\t\t\t    [style.width]=\"column.width\" [style.min-width]=\"column.minWidth\"\n\t\t\t\t\t\t\t    [class]=\"column.display + ' ' + (column.header || '')\"> {{ column.name }}\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t@switch (column.format) {\n\t\t\t\t\t\t\t\t@case ('buttons') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@for (button of column.buttons; track button; let i = $index) {\n\t\t\t\t\t\t\t\t\t\t\t@if (row[column.id][i] !== false && !button.hide) {\n\t\t\t\t\t\t\t\t\t\t\t\t@switch (button.action) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('href') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('download') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" [disabled]=\"false\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  (click)=\"openDialog( $event, button, column.id, i, row)\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('api') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" [disabled]=\"false\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  (click)=\"apiCall( $event, row[column.id][ i ] )\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('save') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" (click)=\"saveCall( $event, button, row, row[column.id][ i ] )\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  [disabled]=\"!saveCallCheck( button, row )\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon class=\"btnicon\" [class]=\"button.color || 'primary'\" [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!button.hint\">{{ button.icon }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('menu') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button mat-icon-button [matMenuTriggerFor]=\"menuRef\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [class]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [attr.aria-label]=\"button.hint || button.text\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        (click)=\"$event.stopPropagation()\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-menu #menuRef=\"matMenu\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@for (item of button.menuItems; track item; let j = $index) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (row[column.id][i][j] !== false) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@switch (item.action) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@let menuUrl = row[column.id][i][j] | xiriUrl;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a mat-menu-item [routerLink]=\"menuUrl?.path\" [queryParams]=\"menuUrl?.queryParams\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('href') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a mat-menu-item [href]=\"row[column.id][i][j]\" target=\"_blank\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button mat-menu-item (click)=\"openMenuDialog($event, item, column.id, i, j, row)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-menu>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@if (column.icons?.[ $any(row[ column.id ]) ]; as icon) {\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"icon[ 'color' ] || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltip]=\"row[ column.id + 'Hint' ] || icon[ 'hint' ] || '' \"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!( row[ column.id + 'Hint' ] || icon[ 'hint' ] )\">{{ icon['icon'] }}\n\t\t\t\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('html') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [innerHtml]=\"row[column.id] | safeHtml\" [class]=\"column.display\"></td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\"\n\t\t\t\t\t\t\t\t\t    [class.xiri-tree-td]=\"treeEnabled && column.id === treeColumnId\">\n\t\t\t\t\t\t\t\t\t\t@if (treeEnabled && column.id === treeColumnId) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treePrefix; context: { $implicit: row }\"></ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (row[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t\t\t\t@let cellUrl = row[column.id + 'Link'] | xiriUrl;\n\t\t\t\t\t\t\t\t\t\t\t<a [routerLink]=\"cellUrl?.path\" [queryParams]=\"cellUrl?.queryParams\" class=\"tablelink\">{{ row[column.id] }}</a>\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t<span>{{ row[column.id] }}</span>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (treeEnabled && column.id === treeColumnId) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treeSuffix; context: { $implicit: row }\"></ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('input') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t<mat-form-field subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t<input matInput\n\t\t\t\t\t\t\t\t\t\t\t       [type]=\"column.inputType || 'text'\"\n\t\t\t\t\t\t\t\t\t\t\t       [(ngModel)]=\"row[ column.id ]\"\n\t\t\t\t\t\t\t\t\t\t\t       [lang]=\"column.inputLang || ''\"\n\t\t\t\t\t\t\t\t\t\t\t       [required]=\"column.inputRequired || true\"\n\t\t\t\t\t\t\t\t\t\t\t       (paste)=\"pasteInput( $event, row, column )\">\n\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('text2') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@let lines = cellLines(row, column);\n\t\t\t\t\t\t\t\t\t\t<div>{{ lines[0] }}</div>\n\t\t\t\t\t\t\t\t\t\t<div>{{ lines[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 cellLines(row, column); 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 }}{{ cellText(row, column) }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('chips') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@if (isSaving(row, column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t\t\t\t\t\t} @else if (column.editable && options.editUrl && isEditing(row, column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t@if (editableOptionsLoading()) {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-form-field class=\"xiri-inline-edit\" subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-select multiple\n\t\t\t\t\t\t\t\t\t\t\t\t\t            [ngModel]=\"editingChipsValues()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t            (selectionChange)=\"onChipsSelectionChange(row, column, $event.value)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t            (keydown)=\"onInlineEditKeydown($event, row, column)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t            (openedChange)=\"!$event && saveInlineEdit(row, column)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (column.editableOptionsSearch || column.editableSearchUrl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ngx-mat-select-search [formControl]=\"inlineSearchControl\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                       [searching]=\"inlineSearching()\"></ngx-mat-select-search>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t@for (opt of getEditableOptions(column); track opt.value) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-select>\n\t\t\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} @else if (column.editable && options.editUrl) {\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"xiri-editable-cell\" role=\"button\" tabindex=\"0\"\n\t\t\t\t\t\t\t\t\t\t\t     (click)=\"startInlineEdit(row, column); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t     (keydown.enter)=\"startInlineEdit(row, column); $event.stopPropagation()\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"xiri-chips-display\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t@for (chip of row[column.id]; track chip.label) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"xiri-chip-display\" [class]=\"chip.color || ''\">{{ chip.label }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon class=\"xiri-edit-icon\">edit</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"xiri-chips-display\">\n\t\t\t\t\t\t\t\t\t\t\t\t@for (chip of row[column.id]; track chip.label) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"xiri-chip-display\" [class]=\"chip.color || ''\">{{ chip.label }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@default {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\"\n\t\t\t\t\t\t\t\t\t    [class.xiri-tree-td]=\"treeEnabled && column.id === treeColumnId\">\n\t\t\t\t\t\t\t\t\t\t@if (treeEnabled && column.id === treeColumnId) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treePrefix; context: { $implicit: row }\"></ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (isSaving(row, column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t\t\t\t\t\t} @else if (column.editable && options.editUrl && isEditing(row, column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t@if (column.editableOptions || column.editableOptionsUrl || column.editableSearchUrl) {\n\t\t\t\t\t\t\t\t\t\t\t\t@if (editableOptionsLoading()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-form-field class=\"xiri-inline-edit\" subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-select [ngModel]=\"editValue(row, column)\" (ngModelChange)=\"setEditValue(row, column, $event)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t            [compareWith]=\"compareEditValue\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t            (keydown)=\"onInlineEditKeydown($event, row, column)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t            (openedChange)=\"!$event && saveInlineEdit(row, column)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (column.editableOptionsSearch || column.editableSearchUrl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ngx-mat-select-search [formControl]=\"inlineSearchControl\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                       [searching]=\"inlineSearching()\"></ngx-mat-select-search>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@for (opt of getEditableOptions(column); track opt.value) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-select>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-form-field class=\"xiri-inline-edit\" subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<input matInput\n\t\t\t\t\t\t\t\t\t\t\t\t\t       [type]=\"column.inputType || 'text'\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t       [step]=\"column.inputType === 'datetime-local' ? 1 : null\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t       [ngModel]=\"editValue(row, column)\" (ngModelChange)=\"setEditValue(row, column, $event)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t       (blur)=\"saveInlineEdit(row, column)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t       (keydown)=\"onInlineEditKeydown($event, row, column)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button matSuffix mat-icon-button class=\"xiri-inline-edit-confirm\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t        (mousedown)=\"$event.preventDefault(); saveInlineEdit(row, column)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t        aria-label=\"\u00C4nderung speichern\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t        tabindex=\"-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon>check</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} @else if (column.editable && options.editUrl) {\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"xiri-editable-cell\" role=\"button\" tabindex=\"0\"\n\t\t\t\t\t\t\t\t\t\t\t      (click)=\"startInlineEdit(row, column); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t      (keydown.enter)=\"startInlineEdit(row, column); $event.stopPropagation()\">\n\t\t\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ cellText(row, column) }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon class=\"xiri-edit-icon\">edit</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ cellText(row, column) }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (treeEnabled && column.id === treeColumnId) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treeSuffix; context: { $implicit: row }\"></ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t<td mat-footer-cell *matFooterCellDef [hidden]=\"!options.footer\"\n\t\t\t\t\t\t\t    [style.width]=\"column.width\" [style.min-width]=\"column.minWidth\" class=\"bottomrow\"\n\t\t\t\t\t\t\t    [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t@if ( footer[ column.id ] ) {\n\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ footer[ column.id ] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t\t@if (showSelectColumn) {\n\t\t\t\t\t\t<ng-container matColumnDef=\"select\" [sticky]=\"true\">\n\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef [style.width]=\"'65px'\">\n\t\t\t\t\t\t\t\t<mat-checkbox (change)=\"$event ? masterToggle() : null\"\n\t\t\t\t\t\t\t\t              [checked]=\"selection.hasValue() && isAllSelected()\"\n\t\t\t\t\t\t\t\t              [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\">\n\t\t\t\t\t\t\t\t@if (isSelectable(row)) {\n\t\t\t\t\t\t\t\t\t<mat-checkbox\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t(change)=\"$event ? toggleRow(row) : null\"\n\t\t\t\t\t\t\t\t\t\t\t[checked]=\"selection.isSelected(row)\">\n\t\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t<td mat-footer-cell *matFooterCellDef [style.width]=\"'65px'\" class=\"bottomrow\" [hidden]=\"!options.footer\">\n\t\t\t\t\t\t\t\t<mat-checkbox (change)=\"$event ? masterToggle() : null\"\n\t\t\t\t\t\t\t\t              [checked]=\"selection.hasValue() && isAllSelected()\"\n\t\t\t\t\t\t\t\t              [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\n\t\t\t\t\t@if (extraHeaderFields.length > 0) {\n\t\t\t\t\t\t@for (column of extraHeaderFields; track column.id) {\n\t\t\t\t\t\t\t<ng-container matColumnDef=\"{{ column.id }}\" [sticky]=\"column.sticky\">\n\t\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef [attr.colspan]=\"column.headerSpan\">{{ column.name }}</th>\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<tr mat-header-row *matHeaderRowDef=\"extraHeaders; sticky: true\" [class.dense]=\"options.dense\"></tr>\n\t\t\t\t\t}\n\n\t\t\t\t\t<tr mat-header-row *matHeaderRowDef=\"columnsToDisplay; sticky: true\" [class.dense]=\"options.dense\"></tr>\n\t\t\t\t\t<tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\" (click)=\"clicked(row)\"\n\t\t\t\t\t    [class.xiri-tree-dimmed]=\"treeEnabled && row._tree?.dimmed\"></tr>\n\t\t\t\t\t<tr mat-footer-row *matFooterRowDef=\"columnsToDisplay; sticky: true\" [hidden]=\"!options.footer\"></tr>\n\t\t\t\t</table>\n\t\t\t</div>\n\t\t\t<div class=\"loader\" [hidden]=\"!loading()\" [class.has-bottombar]=\"(options.select || options.pagination) && !options.footer\">\n\t\t\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t@if (!loading()) {\n\t\t\t\t@if (!errorMsg && dataSource.filteredData.length === 0) {\n\t\t\t\t\t@if (options.emptyState) {\n\t\t\t\t\t\t<xiri-empty-state [settings]=\"options.emptyState\"></xiri-empty-state>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<div class=\"nodata\">{{ options.textNoData }}</div>\n\t\t\t\t\t}\n\t\t\t\t} @else if (errorMsg) {\n\t\t\t\t\t<div class=\"alert alert-danger\">\n\t\t\t\t\t\t<span>{{ errorMsg }}</span>\n\t\t\t\t\t\t<button mat-button type=\"button\" data-testid=\"table-retry\" (click)=\"reload()\">\n\t\t\t\t\t\t\t<mat-icon>autorenew</mat-icon> Retry\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t<div class=\"xrow xsmall\" [class.bottomrow]=\"(options.select || options.pagination) && !options.footer\">\n\t\t\t\t@if (options.select) {\n\t\t\t\t\t<div class=\"xcol xcol-md-2 select-buttons\">\n\t\t\t\t\t\t@for (button of options.selectButtons; track button) {\n\t\t\t\t\t\t\t@if (!button.hide) {\n\t\t\t\t\t\t\t\t@switch (button.action) {\n\t\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t\t        (click)=\"openDialogSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [attr.aria-label]=\"button.hint || button.text\">\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t@case ('api') {\n\t\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t\t        (click)=\"apiCallSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [attr.aria-label]=\"button.hint || button.text\">\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t@case ('download') {\n\t\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t\t        (click)=\"downloadSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [attr.aria-label]=\"button.hint || button.text\">\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"xcol xcol-right-md-10\">\n\t\t\t\t\t<mat-paginator [hidden]=\"!options.pagination\" [pageSizeOptions]=\"options.pageSizes || []\" showFirstLastButtons=\"true\"></mat-paginator>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</mat-card>\n\n@if (dynData.data) {\n\t<ng-container *ngTemplateOutlet=\"dyncomponent(); context: { $implicit: dynData }\"></ng-container>\n}\n\n<!-- Tree mode: indent + expand/collapse arrow rendered before the tree column's content -->\n<ng-template #treePrefix let-row>\n\t<span class=\"xiri-tree-prefix\" [style.padding-left.px]=\"(row._tree?.level || 0) * 24\">\n\t\t@if (row._tree?.hasChildren) {\n\t\t\t<button type=\"button\" class=\"xiri-tree-iconbtn xiri-tree-toggle\" (click)=\"toggleNode($event, row)\"\n\t\t\t        tabindex=\"-1\" [attr.aria-label]=\"row._tree.expanded ? 'einklappen' : 'ausklappen'\">\n\t\t\t\t<mat-icon color=\"primary\">{{ row._tree.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n\t\t\t</button>\n\t\t} @else {\n\t\t\t<span class=\"xiri-tree-spacer\"></span>\n\t\t}\n\t</span>\n</ng-template>\n\n<!-- Tree mode: child-count badge (when collapsed) + optional \"+ sub\" button after the content -->\n<ng-template #treeSuffix let-row>\n\t@if (treeShowCounts && row._tree && !row._tree.expanded && row._tree.childCount > 0) {\n\t\t<span class=\"xiri-tree-count\">({{ row._tree.childCount }})</span>\n\t}\n\t@if (treeHasAddSub && treeCanAddSub(row)) {\n\t\t<button type=\"button\" class=\"xiri-tree-iconbtn xiri-tree-addsub\" (click)=\"addSub($event, row)\"\n\t\t        tabindex=\"-1\" matTooltip=\"Sub-Eintrag hinzuf\u00FCgen\" aria-label=\"Sub-Eintrag hinzuf\u00FCgen\">\n\t\t\t<mat-icon color=\"primary\">add</mat-icon>\n\t\t</button>\n\t}\n</ng-template>\n", styles: ["mat-card.xiritablecard{padding:0;margin-bottom:var(--xiri-spacing-xl)}mat-card.xiritablecard.flat{box-shadow:none;background:transparent;border-radius:0;margin-bottom:0}.mat-mdc-card-content.hasComponents>xiri-dyncomponent>div>xiri-table>mat-card.xiritablecard{margin-bottom:0}.xiritable{width:100%;overflow:auto}.xiritable.canbreak{word-break:break-all}.xiritable .table-full{display:inline-block;width:100%}.xiritable .table-full .xiri-bulk-bar{display:flex;align-items:center;gap:var(--xiri-spacing-sm);padding:var(--xiri-spacing-xs) var(--xiri-spacing-sm);background:var(--secondary-container, var(--mat-sys-secondary-container, #e0e0e0));color:var(--on-secondary-container, var(--mat-sys-on-secondary-container, inherit));border-radius:var(--xiri-radius-sm, 4px);margin-bottom:var(--xiri-spacing-xs)}.xiritable .table-full .xiri-bulk-bar.sticky{position:sticky;top:0;z-index:5}.xiritable .table-full .xiri-bulk-bar .xiri-bulk-count{font-weight:500}.xiritable .table-full .xiri-bulk-bar .xiri-bulk-spacer{flex:1 1 auto}.xiritable .table-full .tableout-wrap{position:relative}.xiritable .table-full .tableout{max-height:60vh;overflow-y:auto;width:100%;min-width:100%;max-width:100%}.xiritable .table-full .tableout.is-loading{min-height:100px}.xiritable .table-full .alert{padding:var(--xiri-spacing-md)}.xiritable .table-full mat-paginator{--mat-paginator-container-background-color: transparent;--mat-paginator-container-size: 51px;--mat-form-field-container-height: 32px;--mat-form-field-container-vertical-padding: 4px}.xiritable .table-full .bottomrow{border-top:1px solid var(--outline-variant, #C2C7CF)}.xiritable .table-full div.bottomrow{background-color:var(--surface-container, #F3F3F6);border-bottom-left-radius:var(--mat-card-elevated-container-shape, 12px);border-bottom-right-radius:var(--mat-card-elevated-container-shape, 12px)}.xiritable .header{background-color:var(--surface-container, #F3F3F6);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;min-height:51px;padding:0 16px;border-bottom:1px solid var(--outline-variant, #C2C7CF);border-top-left-radius:var(--mat-card-elevated-container-shape, 12px);border-top-right-radius:var(--mat-card-elevated-container-shape, 12px)}.xiritable .header .buttons{padding:0 7px 0 .5rem;margin-left:-16px}.xiritable .header .buttons button{z-index:200}.xiritable .header .buttons.saveInput{padding-left:21px}.xiritable .header .middle{flex-grow:1;font-size:var(--xiri-font-size-title);display:flex;padding:0}.xiritable .header xiri-buttonline{padding:0 0 0 16px}.xiritable .header .autorefresh-indicator{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;font-size:var(--xiri-font-size-small, .8rem);color:var(--primary, var(--mat-sys-primary, #006398))}.xiritable .header .autorefresh-indicator mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.xiritable .header .autorefresh-indicator mat-icon.spin{animation:xiri-autorefresh-spin 1.5s linear infinite}.xiritable .header .lastupdated-indicator{display:inline-flex;align-items:center;padding:2px 8px;font-size:var(--xiri-font-size-small, .8rem);color:var(--on-surface-variant, #44474F);opacity:.75}@keyframes xiri-autorefresh-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.xiritable table{width:100%}.xiritable table.density-regular{--mat-table-header-container-height: 42px;--mat-table-footer-container-height: 42px;--mat-table-row-item-container-height: 42px}.xiritable table.density-compact{--mat-table-header-container-height: 32px;--mat-table-footer-container-height: 32px;--mat-table-row-item-container-height: 32px}.xiritable table.density-relaxed{--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 52px;--mat-table-row-item-container-height: 52px}.xiritable table th.mat-mdc-header-cell:not(:first-of-type),.xiritable table td.mat-mdc-cell:not(:first-of-type),.xiritable table td.mat-mdc-footer-cell:not(:first-of-type){padding-left:5px}.xiritable table th.mat-mdc-header-cell:not(:last-of-type),.xiritable table td.mat-mdc-cell:not(:last-of-type),.xiritable table td.mat-mdc-footer-cell:not(:last-of-type){padding-right:7px}.xiritable table tr.mat-mdc-row{transition:background-color var(--xiri-duration-fast) var(--xiri-easing-standard)}.xiritable table tr.mat-mdc-row:hover{background:var(--surface-variant, #DEE3EB)}.xiritable table .tablelink{text-decoration:underline}.xiritable table td.buttons xiri-button,.xiritable table td.buttons xiri-buttonstyle,.xiritable table td.buttons .btnicon{margin-right:8px}.xiritable table td.buttons xiri-button:last-child,.xiritable table td.buttons xiri-buttonstyle:last-child,.xiritable table td.buttons .btnicon:last-child{margin-right:0}.xiritable table td.number,.xiritable table th.number,.xiritable table td.mat-mdc-footer-cell.number{text-align:right;font-variant-numeric:tabular-nums}.xiritable table td.right,.xiritable table td.align-right,.xiritable table th.right,.xiritable table th.align-right{text-align:right}.xiritable table td.center,.xiritable table td.align-center,.xiritable table th.center,.xiritable table th.align-center{text-align:center}.xiritable table td.left,.xiritable table td.align-left,.xiritable table th.left,.xiritable table th.align-left{text-align:left}.xiritable table td.vertical,.xiritable table th.vertical{writing-mode:sideways-rl;text-orientation:sideways}.xiritable table td.vertical div,.xiritable table th.vertical div{max-height:6rem}.xiritable table td.sideways,.xiritable table th.sideways{writing-mode:sideways-lr;text-orientation:sideways}.xiritable table td.sideways div,.xiritable table th.sideways div{max-height:6rem}.xiritable table td.upright,.xiritable table th.upright{writing-mode:vertical-rl;text-orientation:upright}.xiritable table.borders td+td{border-left:1px solid var(--outline-variant, #C2C7CF)}.xiritable table.bordersHeader th+th{border-left:1px solid var(--outline-variant, #C2C7CF)}.xiritable table td.mat-mdc-cell mat-form-field{--mat-form-field-container-height: 40px;--mat-form-field-container-vertical-padding: 8px}.xiritable .xiri-editable-cell{cursor:pointer;display:inline-flex;align-items:center;border-radius:var(--xiri-radius-xs);padding:2px 4px}.xiritable .xiri-editable-cell:hover,.xiritable .xiri-editable-cell:focus-visible{background-color:var(--surface-variant, #DEE3EB)}.xiritable .xiri-editable-cell:hover .xiri-edit-icon,.xiritable .xiri-editable-cell:focus-visible .xiri-edit-icon{opacity:1}.xiritable .xiri-edit-icon{opacity:0;font-size:14px;width:14px;height:14px;margin-left:4px;color:var(--on-surface-variant, #44474F);transition:opacity var(--xiri-duration-fast) var(--xiri-easing-standard)}.xiritable .xiri-inline-edit{--mat-form-field-container-height: 36px;--mat-form-field-container-vertical-padding: 6px;width:100%}.xiritable .xiri-inline-edit-confirm{--mdc-icon-button-icon-size: 18px;--mdc-icon-button-state-layer-size: 28px;width:28px;height:28px;padding:0;margin-right:5px;color:var(--primary, #1976d2);display:inline-flex;align-items:center;justify-content:center}.xiritable .xiri-inline-edit-confirm mat-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:18px}.xiritable .mat-column-select{overflow:initial}.xiritable .select-buttons{padding:.3rem .8rem;display:flex;align-items:center}.xiritable .select-buttons button{margin-right:.5rem}.xiritable .xiri-cell-saved{animation:pulse .5s var(--xiri-easing-standard);border-radius:var(--xiri-radius-xs)}.xiritable .nodata{padding:.5rem 1.5rem;font-size:var(--xiri-font-size-label);background-color:var(--surface, #FFFFFF);animation:fadeInUp var(--xiri-duration-normal) var(--xiri-easing-decelerate)}.xiritable .loader{position:absolute;top:0;left:0;width:100%;bottom:0;display:flex;justify-content:center;align-items:center;background-color:var(--ripple, rgba(206, 212, 218, .5));z-index:200;border-bottom-left-radius:var(--mat-card-elevated-container-shape, 12px);border-bottom-right-radius:var(--mat-card-elevated-container-shape, 12px);animation:fadeIn var(--xiri-duration-fast) var(--xiri-easing-standard)}.xiritable .loader.has-bottombar{border-bottom-left-radius:0;border-bottom-right-radius:0}xiri-dyncomponent{margin-bottom:var(--xiri-spacing-xl)}.mat-expansion-panel-body>xiri-dyncomponent,.mat-mdc-tab-body-content>xiri-dyncomponent{margin-bottom:0}[hidden]{display:none!important}.xiri-tree-actions{display:flex;align-items:center}td.xiri-tree-td{white-space:nowrap}td.xiri-tree-td .xiri-tree-prefix{display:inline-flex;align-items:center;vertical-align:middle}td.xiri-tree-td .xiri-tree-iconbtn{appearance:none;border:0;background:transparent;padding:0;margin:0;flex:0 0 24px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent}td.xiri-tree-td .xiri-tree-iconbtn .mat-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:20px;line-height:20px;margin:0}td.xiri-tree-td .xiri-tree-iconbtn:hover{background:#0000000f}td.xiri-tree-td .xiri-tree-iconbtn:focus-visible{outline:2px solid var(--primary, var(--mat-sys-primary, currentColor));outline-offset:-2px}td.xiri-tree-td .xiri-tree-spacer{width:24px;height:24px;flex:0 0 24px}td.xiri-tree-td .xiri-tree-count{margin-left:var(--xiri-spacing-xs, 4px);opacity:.6;font-size:.85em}td.xiri-tree-td .xiri-tree-addsub{margin-left:var(--xiri-spacing-xs, 4px);opacity:0;transition:opacity .15s ease-in-out}tr.mat-mdc-row:hover td.xiri-tree-td .xiri-tree-addsub,td.xiri-tree-td .xiri-tree-addsub:focus-visible{opacity:1}tr.xiri-tree-dimmed{opacity:.6}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: XiriButtonlineComponent, selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "component", type: XiriSearchComponent, selector: "xiri-search", inputs: ["placeholder", "open", "reset", "escape", "focus", "text"], outputs: ["changed"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: XiriButtonstyleComponent, selector: "xiri-buttonstyle", inputs: ["button", "disabled", "loading", "countdown", "pollText"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgxMatSelectSearchModule }, { kind: "component", type: i2.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XiriButtonComponent, selector: "xiri-button", inputs: ["button", "disabled", "filterData", "url"], outputs: ["result"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: XiriEmptyStateComponent, selector: "xiri-empty-state", inputs: ["settings"], outputs: ["buttonResult"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }, { kind: "pipe", type: XiriUrlPipe, name: "xiriUrl" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: XiriTableComponent, decorators: [{
             type: Component,
@@ -5845,7 +6076,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                         MatFooterRow, MatFooterRowDef, MatFooterCell, MatFooterCellDef,
                         MatMenu, MatMenuItem, MatMenuTrigger,
                         MatSelect, MatOption$1,
-                        XiriEmptyStateComponent], template: "<mat-card class=\"xiritablecard mat-mdc-elevation-specific\" [class.mat-elevation-z3]=\"!options.flat\" [class.flat]=\"options.flat\">\n\t<div class=\"xiritable\" [class]=\"options.class\">\n\t\t<div class=\"table-full\">\n\t\t\t@if (bulkBarActive) {\n\t\t\t\t<div class=\"xiri-bulk-bar\" [class.sticky]=\"options.stickyBulkBar\" role=\"toolbar\"\n\t\t\t\t     aria-label=\"Massenaktionen\" data-testid=\"table-bulk-bar\">\n\t\t\t\t\t<button mat-icon-button (click)=\"cancelBulk()\" matTooltip=\"Auswahl aufheben\"\n\t\t\t\t\t        aria-label=\"Auswahl aufheben\">\n\t\t\t\t\t\t<mat-icon>close</mat-icon>\n\t\t\t\t\t</button>\n\t\t\t\t\t<span class=\"xiri-bulk-count\" aria-live=\"polite\" data-testid=\"table-bulk-count\">\n\t\t\t\t\t\t@if (bulkAllResults()) {\n\t\t\t\t\t\t\tAlle {{ bulkTotalCount() }} Ergebnisse ausgew\u00E4hlt\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t{{ selection.selected.length }} ausgew\u00E4hlt\n\t\t\t\t\t\t}\n\t\t\t\t\t</span>\n\t\t\t\t\t@if (canSelectAllResults()) {\n\t\t\t\t\t\t<button mat-button color=\"primary\" (click)=\"selectAllResults()\"\n\t\t\t\t\t\t        data-testid=\"table-bulk-selectall\">\n\t\t\t\t\t\t\tAlle {{ bulkTotalCount() }} Ergebnisse ausw\u00E4hlen\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t\t<span class=\"xiri-bulk-spacer\"></span>\n\t\t\t\t\t@for (button of options.bulkActions; track button) {\n\t\t\t\t\t\t@if (!button.hide) {\n\t\t\t\t\t\t\t<button mat-button [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t        (click)=\"bulkAction($event, button)\"\n\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\" [matTooltipDisabled]=\"!button.hint\">\n\t\t\t\t\t\t\t\t@if (button.icon) {\n\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t{{ button.text }}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (hasHeader) {\n\t\t\t\t<div class=\"header\" [hidden]=\"bulkBarActive\">\n\t\t\t\t\t@if (options.reload) {\n\t\t\t\t\t\t<div class=\"buttons\">\n\t\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\t<mat-icon>autorenew</mat-icon>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t\t@if (autoRefresh()) {\n\t\t\t\t\t\t<div class=\"autorefresh-indicator\" role=\"status\" aria-live=\"polite\"\n\t\t\t\t\t\t     matTooltip=\"Tabelle aktualisiert sich automatisch\">\n\t\t\t\t\t\t\t<mat-icon class=\"spin\">sync</mat-icon>\n\t\t\t\t\t\t\t<span>Auto-Refresh aktiv \u00B7 n\u00E4chste in {{ countdown() }}s</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t\t@if (lastUpdated(); as updated) {\n\t\t\t\t\t\t<div class=\"lastupdated-indicator\" data-testid=\"table-last-updated\" role=\"status\" aria-live=\"polite\">\n\t\t\t\t\t\t\tStand {{ updated | date:'HH:mm' }}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t\t@if (treeEnabled) {\n\t\t\t\t\t\t<div class=\"buttons xiri-tree-actions\">\n\t\t\t\t\t\t\t<button mat-icon-button (click)=\"expandAllNodes()\" color=\"primary\"\n\t\t\t\t\t\t\t        matTooltip=\"Alle ausklappen\" aria-label=\"Alle ausklappen\">\n\t\t\t\t\t\t\t\t<mat-icon>unfold_more</mat-icon>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<button mat-icon-button (click)=\"collapseAllNodes()\" color=\"primary\"\n\t\t\t\t\t\t\t        matTooltip=\"Alle einklappen\" aria-label=\"Alle einklappen\">\n\t\t\t\t\t\t\t\t<mat-icon>unfold_less</mat-icon>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t\t<div class=\"middle\" [class.hasButtons]=\"options.buttons\">{{ options.title }}</div>\n\t\t\t\t\t@if (options.buttons) {\n\t\t\t\t\t\t<xiri-buttonline [settings]=\"options.buttons\" (result)=\"buttonReturn($event)\"\n\t\t\t\t\t\t                 [filterData]=\"_filterData()\"></xiri-buttonline>\n\t\t\t\t\t}\n\t\t\t\t\t@if (options.search) {\n\t\t\t\t\t\t<xiri-search (changed)=\"searchDo($event)\" [placeholder]=\"''\" [text]=\"searchTextInit\"></xiri-search>\n\t\t\t\t\t}\n\t\t\t\t\t@if (options.saveInput) {\n\t\t\t\t\t\t<div class=\"buttons saveInput\">\n\t\t\t\t\t\t\t<button mat-raised-button (click)=\"saveInputData()\" color=\"primary\">\n\t\t\t\t\t\t\t\t{{ options.saveInput }}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div class=\"tableout-wrap\">\n\t\t\t<div class=\"tableout\" [class.is-loading]=\"loading()\" [style.max-height]=\"options.scrollHeight || null\">\n\t\t\t\t<table mat-table [dataSource]=\"dataSource\" matSort [style.min-width]=\"options.minWidth ?? '100%'\"\n\t\t\t\t       [class]=\"densityClass()\"\n\t\t\t\t       [class.borders]=\"options.borders\" [class.bordersHeader]=\"options.bordersHeader\"\n\t\t\t\t       [trackBy]=\"trackByRowId\">\n\n\t\t\t\t\t@for (column of displayedColumns; track column.id) {\n\t\t\t\t\t\t<ng-container [matColumnDef]=\"column.id\" [sticky]=\"column.sticky\">\n\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef mat-sort-header=\"{{ column.id }}\" [disabled]=\"!column.sort || !options.sort\" disableClear\n\t\t\t\t\t\t\t    [style.width]=\"column.width\" [style.min-width]=\"column.minWidth\"\n\t\t\t\t\t\t\t    [class]=\"column.display + ' ' + (column.header || '')\"> {{ column.name }}\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t@switch (column.format) {\n\t\t\t\t\t\t\t\t@case ('buttons') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@for (button of column.buttons; track button; let i = $index) {\n\t\t\t\t\t\t\t\t\t\t\t@if (row[column.id][i] !== false && !button.hide) {\n\t\t\t\t\t\t\t\t\t\t\t\t@switch (button.action) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('href') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('download') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" [disabled]=\"false\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  (click)=\"openDialog( $event, button, column.id, i, row)\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('api') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" [disabled]=\"false\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  (click)=\"apiCall( $event, row[column.id][ i ] )\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('save') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" (click)=\"saveCall( $event, button, row, row[column.id][ i ] )\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  [disabled]=\"!saveCallCheck( button, row )\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon class=\"btnicon\" [class]=\"button.color || 'primary'\" [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!button.hint\">{{ button.icon }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('menu') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button mat-icon-button [matMenuTriggerFor]=\"menuRef\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [class]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [attr.aria-label]=\"button.hint || button.text\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        (click)=\"$event.stopPropagation()\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-menu #menuRef=\"matMenu\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@for (item of button.menuItems; track item; let j = $index) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (row[column.id][i][j] !== false) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@switch (item.action) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@let menuUrl = row[column.id][i][j] | xiriUrl;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a mat-menu-item [routerLink]=\"menuUrl?.path\" [queryParams]=\"menuUrl?.queryParams\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('href') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a mat-menu-item [href]=\"row[column.id][i][j]\" target=\"_blank\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button mat-menu-item (click)=\"openMenuDialog($event, item, column.id, i, j, row)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-menu>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@if (column.icons?.[ $any(row[ column.id ]) ]; as icon) {\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"icon[ 'color' ] || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltip]=\"icon[ 'hint' ] || '' \"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!icon[ 'hint' ]\">{{ icon['icon'] }}\n\t\t\t\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('html') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [innerHtml]=\"row[column.id] | safeHtml\" [class]=\"column.display\"></td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\"\n\t\t\t\t\t\t\t\t\t    [class.xiri-tree-td]=\"treeEnabled && column.id === treeColumnId\">\n\t\t\t\t\t\t\t\t\t\t@if (treeEnabled && column.id === treeColumnId) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treePrefix; context: { $implicit: row }\"></ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (row[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t\t\t\t@let cellUrl = row[column.id + 'Link'] | xiriUrl;\n\t\t\t\t\t\t\t\t\t\t\t<a [routerLink]=\"cellUrl?.path\" [queryParams]=\"cellUrl?.queryParams\" class=\"tablelink\">{{ row[column.id] }}</a>\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t<span>{{ row[column.id] }}</span>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (treeEnabled && column.id === treeColumnId) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treeSuffix; context: { $implicit: row }\"></ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('input') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t<mat-form-field subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t<input matInput\n\t\t\t\t\t\t\t\t\t\t\t       [type]=\"column.inputType || 'text'\"\n\t\t\t\t\t\t\t\t\t\t\t       [(ngModel)]=\"row[ column.id ]\"\n\t\t\t\t\t\t\t\t\t\t\t       [lang]=\"column.inputLang || ''\"\n\t\t\t\t\t\t\t\t\t\t\t       [required]=\"column.inputRequired || true\"\n\t\t\t\t\t\t\t\t\t\t\t       (paste)=\"pasteInput( $event, row, column )\">\n\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('text2') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t<div>{{ row[column.id][0] }}</div>\n\t\t\t\t\t\t\t\t\t\t<div>{{ row[column.id][1] }}</div>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('textn') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@for (line of row[column.id]; track $index) {\n\t\t\t\t\t\t\t\t\t\t\t<div>{{ line }}</div>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('number') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ row[column.id][0] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('chips') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@if (isSaving(row, column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t\t\t\t\t\t} @else if (column.editable && options.editUrl && isEditing(row, column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t@if (editableOptionsLoading()) {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-form-field class=\"xiri-inline-edit\" subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-select multiple\n\t\t\t\t\t\t\t\t\t\t\t\t\t            [ngModel]=\"editingChipsValues()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t            (selectionChange)=\"onChipsSelectionChange(row, column, $event.value)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t            (keydown)=\"onInlineEditKeydown($event, row, column)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t            (openedChange)=\"!$event && saveInlineEdit(row, column)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (column.editableOptionsSearch || column.editableSearchUrl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ngx-mat-select-search [formControl]=\"inlineSearchControl\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                       [searching]=\"inlineSearching()\"></ngx-mat-select-search>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t@for (opt of getEditableOptions(column); track opt.value) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-select>\n\t\t\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} @else if (column.editable && options.editUrl) {\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"xiri-editable-cell\" role=\"button\" tabindex=\"0\"\n\t\t\t\t\t\t\t\t\t\t\t     (click)=\"startInlineEdit(row, column); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t     (keydown.enter)=\"startInlineEdit(row, column); $event.stopPropagation()\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"xiri-chips-display\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t@for (chip of row[column.id]; track chip.label) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"xiri-chip-display\" [class]=\"chip.color || ''\">{{ chip.label }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon class=\"xiri-edit-icon\">edit</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"xiri-chips-display\">\n\t\t\t\t\t\t\t\t\t\t\t\t@for (chip of row[column.id]; track chip.label) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"xiri-chip-display\" [class]=\"chip.color || ''\">{{ chip.label }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@default {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\"\n\t\t\t\t\t\t\t\t\t    [class.xiri-tree-td]=\"treeEnabled && column.id === treeColumnId\">\n\t\t\t\t\t\t\t\t\t\t@if (treeEnabled && column.id === treeColumnId) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treePrefix; context: { $implicit: row }\"></ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (isSaving(row, column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t\t\t\t\t\t} @else if (column.editable && options.editUrl && isEditing(row, column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t@if (column.editableOptions || column.editableOptionsUrl || column.editableSearchUrl) {\n\t\t\t\t\t\t\t\t\t\t\t\t@if (editableOptionsLoading()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-form-field class=\"xiri-inline-edit\" subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-select [(ngModel)]=\"row[column.id]\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t            (keydown)=\"onInlineEditKeydown($event, row, column)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t            (openedChange)=\"!$event && saveInlineEdit(row, column)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (column.editableOptionsSearch || column.editableSearchUrl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ngx-mat-select-search [formControl]=\"inlineSearchControl\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                       [searching]=\"inlineSearching()\"></ngx-mat-select-search>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@for (opt of getEditableOptions(column); track opt.value) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-select>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-form-field class=\"xiri-inline-edit\" subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<input matInput\n\t\t\t\t\t\t\t\t\t\t\t\t\t       [(ngModel)]=\"row[column.id]\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t       (blur)=\"saveInlineEdit(row, column)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t       (keydown)=\"onInlineEditKeydown($event, row, column)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button matSuffix mat-icon-button class=\"xiri-inline-edit-confirm\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t        (mousedown)=\"$event.preventDefault(); saveInlineEdit(row, column)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t        aria-label=\"\u00C4nderung speichern\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t        tabindex=\"-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon>check</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} @else if (column.editable && options.editUrl) {\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"xiri-editable-cell\" role=\"button\" tabindex=\"0\"\n\t\t\t\t\t\t\t\t\t\t\t      (click)=\"startInlineEdit(row, column); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t      (keydown.enter)=\"startInlineEdit(row, column); $event.stopPropagation()\">\n\t\t\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ row[column.id] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon class=\"xiri-edit-icon\">edit</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ row[column.id] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (treeEnabled && column.id === treeColumnId) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treeSuffix; context: { $implicit: row }\"></ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t<td mat-footer-cell *matFooterCellDef [hidden]=\"!options.footer\"\n\t\t\t\t\t\t\t    [style.width]=\"column.width\" [style.min-width]=\"column.minWidth\" class=\"bottomrow\"\n\t\t\t\t\t\t\t    [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t@if ( footer[ column.id ] ) {\n\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ footer[ column.id ] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t\t@if (showSelectColumn) {\n\t\t\t\t\t\t<ng-container matColumnDef=\"select\" [sticky]=\"true\">\n\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef [style.width]=\"'65px'\">\n\t\t\t\t\t\t\t\t<mat-checkbox (change)=\"$event ? masterToggle() : null\"\n\t\t\t\t\t\t\t\t              [checked]=\"selection.hasValue() && isAllSelected()\"\n\t\t\t\t\t\t\t\t              [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\">\n\t\t\t\t\t\t\t\t@if (isSelectable(row)) {\n\t\t\t\t\t\t\t\t\t<mat-checkbox\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t(change)=\"$event ? toggleRow(row) : null\"\n\t\t\t\t\t\t\t\t\t\t\t[checked]=\"selection.isSelected(row)\">\n\t\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t<td mat-footer-cell *matFooterCellDef [style.width]=\"'65px'\" class=\"bottomrow\" [hidden]=\"!options.footer\">\n\t\t\t\t\t\t\t\t<mat-checkbox (change)=\"$event ? masterToggle() : null\"\n\t\t\t\t\t\t\t\t              [checked]=\"selection.hasValue() && isAllSelected()\"\n\t\t\t\t\t\t\t\t              [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\n\t\t\t\t\t@if (extraHeaderFields.length > 0) {\n\t\t\t\t\t\t@for (column of extraHeaderFields; track column.id) {\n\t\t\t\t\t\t\t<ng-container matColumnDef=\"{{ column.id }}\" [sticky]=\"column.sticky\">\n\t\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef [attr.colspan]=\"column.headerSpan\">{{ column.name }}</th>\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<tr mat-header-row *matHeaderRowDef=\"extraHeaders; sticky: true\" [class.dense]=\"options.dense\"></tr>\n\t\t\t\t\t}\n\n\t\t\t\t\t<tr mat-header-row *matHeaderRowDef=\"columnsToDisplay; sticky: true\" [class.dense]=\"options.dense\"></tr>\n\t\t\t\t\t<tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\" (click)=\"clicked(row)\"\n\t\t\t\t\t    [class.xiri-tree-dimmed]=\"treeEnabled && row._tree?.dimmed\"></tr>\n\t\t\t\t\t<tr mat-footer-row *matFooterRowDef=\"columnsToDisplay; sticky: true\" [hidden]=\"!options.footer\"></tr>\n\t\t\t\t</table>\n\t\t\t</div>\n\t\t\t<div class=\"loader\" [hidden]=\"!loading()\" [class.has-bottombar]=\"(options.select || options.pagination) && !options.footer\">\n\t\t\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t@if (!loading()) {\n\t\t\t\t@if (!errorMsg && dataSource.filteredData.length === 0) {\n\t\t\t\t\t@if (options.emptyState) {\n\t\t\t\t\t\t<xiri-empty-state [settings]=\"options.emptyState\"></xiri-empty-state>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<div class=\"nodata\">{{ options.textNoData }}</div>\n\t\t\t\t\t}\n\t\t\t\t} @else if (errorMsg) {\n\t\t\t\t\t<div class=\"alert alert-danger\">\n\t\t\t\t\t\t<span>{{ errorMsg }}</span>\n\t\t\t\t\t\t<button mat-button type=\"button\" data-testid=\"table-retry\" (click)=\"reload()\">\n\t\t\t\t\t\t\t<mat-icon>autorenew</mat-icon> Retry\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t<div class=\"xrow xsmall\" [class.bottomrow]=\"(options.select || options.pagination) && !options.footer\">\n\t\t\t\t@if (options.select) {\n\t\t\t\t\t<div class=\"xcol xcol-md-2 select-buttons\">\n\t\t\t\t\t\t@for (button of options.selectButtons; track button) {\n\t\t\t\t\t\t\t@if (!button.hide) {\n\t\t\t\t\t\t\t\t@switch (button.action) {\n\t\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t\t        (click)=\"openDialogSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [attr.aria-label]=\"button.hint || button.text\">\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t@case ('api') {\n\t\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t\t        (click)=\"apiCallSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [attr.aria-label]=\"button.hint || button.text\">\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t@case ('download') {\n\t\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t\t        (click)=\"downloadSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [attr.aria-label]=\"button.hint || button.text\">\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"xcol xcol-right-md-10\">\n\t\t\t\t\t<mat-paginator [hidden]=\"!options.pagination\" [pageSizeOptions]=\"options.pageSizes || []\" showFirstLastButtons=\"true\"></mat-paginator>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</mat-card>\n\n@if (dynData.data) {\n\t<ng-container *ngTemplateOutlet=\"dyncomponent(); context: { $implicit: dynData }\"></ng-container>\n}\n\n<!-- Tree mode: indent + expand/collapse arrow rendered before the tree column's content -->\n<ng-template #treePrefix let-row>\n\t<span class=\"xiri-tree-prefix\" [style.padding-left.px]=\"(row._tree?.level || 0) * 24\">\n\t\t@if (row._tree?.hasChildren) {\n\t\t\t<button type=\"button\" class=\"xiri-tree-iconbtn xiri-tree-toggle\" (click)=\"toggleNode($event, row)\"\n\t\t\t        tabindex=\"-1\" [attr.aria-label]=\"row._tree.expanded ? 'einklappen' : 'ausklappen'\">\n\t\t\t\t<mat-icon color=\"primary\">{{ row._tree.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n\t\t\t</button>\n\t\t} @else {\n\t\t\t<span class=\"xiri-tree-spacer\"></span>\n\t\t}\n\t</span>\n</ng-template>\n\n<!-- Tree mode: child-count badge (when collapsed) + optional \"+ sub\" button after the content -->\n<ng-template #treeSuffix let-row>\n\t@if (treeShowCounts && row._tree && !row._tree.expanded && row._tree.childCount > 0) {\n\t\t<span class=\"xiri-tree-count\">({{ row._tree.childCount }})</span>\n\t}\n\t@if (treeHasAddSub && treeCanAddSub(row)) {\n\t\t<button type=\"button\" class=\"xiri-tree-iconbtn xiri-tree-addsub\" (click)=\"addSub($event, row)\"\n\t\t        tabindex=\"-1\" matTooltip=\"Sub-Eintrag hinzuf\u00FCgen\" aria-label=\"Sub-Eintrag hinzuf\u00FCgen\">\n\t\t\t<mat-icon color=\"primary\">add</mat-icon>\n\t\t</button>\n\t}\n</ng-template>\n", styles: ["mat-card.xiritablecard{padding:0;margin-bottom:var(--xiri-spacing-xl)}mat-card.xiritablecard.flat{box-shadow:none;background:transparent;border-radius:0;margin-bottom:0}.mat-mdc-card-content.hasComponents>xiri-dyncomponent>div>xiri-table>mat-card.xiritablecard{margin-bottom:0}.xiritable{width:100%;overflow:auto}.xiritable.canbreak{word-break:break-all}.xiritable .table-full{display:inline-block;width:100%}.xiritable .table-full .xiri-bulk-bar{display:flex;align-items:center;gap:var(--xiri-spacing-sm);padding:var(--xiri-spacing-xs) var(--xiri-spacing-sm);background:var(--secondary-container, var(--mat-sys-secondary-container, #e0e0e0));color:var(--on-secondary-container, var(--mat-sys-on-secondary-container, inherit));border-radius:var(--xiri-radius-sm, 4px);margin-bottom:var(--xiri-spacing-xs)}.xiritable .table-full .xiri-bulk-bar.sticky{position:sticky;top:0;z-index:5}.xiritable .table-full .xiri-bulk-bar .xiri-bulk-count{font-weight:500}.xiritable .table-full .xiri-bulk-bar .xiri-bulk-spacer{flex:1 1 auto}.xiritable .table-full .tableout-wrap{position:relative}.xiritable .table-full .tableout{max-height:60vh;overflow-y:auto;width:100%;min-width:100%;max-width:100%}.xiritable .table-full .tableout.is-loading{min-height:100px}.xiritable .table-full .alert{padding:var(--xiri-spacing-md)}.xiritable .table-full mat-paginator{--mat-paginator-container-background-color: transparent;--mat-paginator-container-size: 51px;--mat-form-field-container-height: 32px;--mat-form-field-container-vertical-padding: 4px}.xiritable .table-full .bottomrow{border-top:1px solid var(--outline-variant, #C2C7CF)}.xiritable .table-full div.bottomrow{background-color:var(--surface-container, #F3F3F6);border-bottom-left-radius:var(--mat-card-elevated-container-shape, 12px);border-bottom-right-radius:var(--mat-card-elevated-container-shape, 12px)}.xiritable .header{background-color:var(--surface-container, #F3F3F6);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;min-height:51px;padding:0 16px;border-bottom:1px solid var(--outline-variant, #C2C7CF);border-top-left-radius:var(--mat-card-elevated-container-shape, 12px);border-top-right-radius:var(--mat-card-elevated-container-shape, 12px)}.xiritable .header .buttons{padding:0 7px 0 .5rem;margin-left:-16px}.xiritable .header .buttons button{z-index:200}.xiritable .header .buttons.saveInput{padding-left:21px}.xiritable .header .middle{flex-grow:1;font-size:var(--xiri-font-size-title);display:flex;padding:0}.xiritable .header xiri-buttonline{padding:0 0 0 16px}.xiritable .header .autorefresh-indicator{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;font-size:var(--xiri-font-size-small, .8rem);color:var(--primary, var(--mat-sys-primary, #006398))}.xiritable .header .autorefresh-indicator mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.xiritable .header .autorefresh-indicator mat-icon.spin{animation:xiri-autorefresh-spin 1.5s linear infinite}.xiritable .header .lastupdated-indicator{display:inline-flex;align-items:center;padding:2px 8px;font-size:var(--xiri-font-size-small, .8rem);color:var(--on-surface-variant, #44474F);opacity:.75}@keyframes xiri-autorefresh-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.xiritable table{width:100%}.xiritable table.density-regular{--mat-table-header-container-height: 42px;--mat-table-footer-container-height: 42px;--mat-table-row-item-container-height: 42px}.xiritable table.density-compact{--mat-table-header-container-height: 32px;--mat-table-footer-container-height: 32px;--mat-table-row-item-container-height: 32px}.xiritable table.density-relaxed{--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 52px;--mat-table-row-item-container-height: 52px}.xiritable table th.mat-mdc-header-cell:not(:first-of-type),.xiritable table td.mat-mdc-cell:not(:first-of-type),.xiritable table td.mat-mdc-footer-cell:not(:first-of-type){padding-left:5px}.xiritable table th.mat-mdc-header-cell:not(:last-of-type),.xiritable table td.mat-mdc-cell:not(:last-of-type),.xiritable table td.mat-mdc-footer-cell:not(:last-of-type){padding-right:7px}.xiritable table tr.mat-mdc-row{transition:background-color var(--xiri-duration-fast) var(--xiri-easing-standard)}.xiritable table tr.mat-mdc-row:hover{background:var(--surface-variant, #DEE3EB)}.xiritable table .tablelink{text-decoration:underline}.xiritable table td.buttons xiri-button,.xiritable table td.buttons xiri-buttonstyle,.xiritable table td.buttons .btnicon{margin-right:8px}.xiritable table td.buttons xiri-button:last-child,.xiritable table td.buttons xiri-buttonstyle:last-child,.xiritable table td.buttons .btnicon:last-child{margin-right:0}.xiritable table td.number,.xiritable table th.number,.xiritable table td.mat-mdc-footer-cell.number{text-align:right;font-variant-numeric:tabular-nums}.xiritable table td.right,.xiritable table td.align-right,.xiritable table th.right,.xiritable table th.align-right{text-align:right}.xiritable table td.center,.xiritable table td.align-center,.xiritable table th.center,.xiritable table th.align-center{text-align:center}.xiritable table td.left,.xiritable table td.align-left,.xiritable table th.left,.xiritable table th.align-left{text-align:left}.xiritable table td.vertical,.xiritable table th.vertical{writing-mode:sideways-rl;text-orientation:sideways}.xiritable table td.vertical div,.xiritable table th.vertical div{max-height:6rem}.xiritable table td.sideways,.xiritable table th.sideways{writing-mode:sideways-lr;text-orientation:sideways}.xiritable table td.sideways div,.xiritable table th.sideways div{max-height:6rem}.xiritable table td.upright,.xiritable table th.upright{writing-mode:vertical-rl;text-orientation:upright}.xiritable table.borders td+td{border-left:1px solid var(--outline-variant, #C2C7CF)}.xiritable table.bordersHeader th+th{border-left:1px solid var(--outline-variant, #C2C7CF)}.xiritable table td.mat-mdc-cell mat-form-field{--mat-form-field-container-height: 40px;--mat-form-field-container-vertical-padding: 8px}.xiritable .xiri-editable-cell{cursor:pointer;display:inline-flex;align-items:center;border-radius:var(--xiri-radius-xs);padding:2px 4px}.xiritable .xiri-editable-cell:hover,.xiritable .xiri-editable-cell:focus-visible{background-color:var(--surface-variant, #DEE3EB)}.xiritable .xiri-editable-cell:hover .xiri-edit-icon,.xiritable .xiri-editable-cell:focus-visible .xiri-edit-icon{opacity:1}.xiritable .xiri-edit-icon{opacity:0;font-size:14px;width:14px;height:14px;margin-left:4px;color:var(--on-surface-variant, #44474F);transition:opacity var(--xiri-duration-fast) var(--xiri-easing-standard)}.xiritable .xiri-inline-edit{--mat-form-field-container-height: 36px;--mat-form-field-container-vertical-padding: 6px;width:100%}.xiritable .xiri-inline-edit-confirm{--mdc-icon-button-icon-size: 18px;--mdc-icon-button-state-layer-size: 28px;width:28px;height:28px;padding:0;margin-right:5px;color:var(--primary, #1976d2);display:inline-flex;align-items:center;justify-content:center}.xiritable .xiri-inline-edit-confirm mat-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:18px}.xiritable .mat-column-select{overflow:initial}.xiritable .select-buttons{padding:.3rem .8rem;display:flex;align-items:center}.xiritable .select-buttons button{margin-right:.5rem}.xiritable .xiri-cell-saved{animation:pulse .5s var(--xiri-easing-standard);border-radius:var(--xiri-radius-xs)}.xiritable .nodata{padding:.5rem 1.5rem;font-size:var(--xiri-font-size-label);background-color:var(--surface, #FFFFFF);animation:fadeInUp var(--xiri-duration-normal) var(--xiri-easing-decelerate)}.xiritable .loader{position:absolute;top:0;left:0;width:100%;bottom:0;display:flex;justify-content:center;align-items:center;background-color:var(--ripple, rgba(206, 212, 218, .5));z-index:200;border-bottom-left-radius:var(--mat-card-elevated-container-shape, 12px);border-bottom-right-radius:var(--mat-card-elevated-container-shape, 12px);animation:fadeIn var(--xiri-duration-fast) var(--xiri-easing-standard)}.xiritable .loader.has-bottombar{border-bottom-left-radius:0;border-bottom-right-radius:0}xiri-dyncomponent{margin-bottom:var(--xiri-spacing-xl)}.mat-expansion-panel-body>xiri-dyncomponent,.mat-mdc-tab-body-content>xiri-dyncomponent{margin-bottom:0}[hidden]{display:none!important}.xiri-tree-actions{display:flex;align-items:center}td.xiri-tree-td{white-space:nowrap}td.xiri-tree-td .xiri-tree-prefix{display:inline-flex;align-items:center;vertical-align:middle}td.xiri-tree-td .xiri-tree-iconbtn{appearance:none;border:0;background:transparent;padding:0;margin:0;flex:0 0 24px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent}td.xiri-tree-td .xiri-tree-iconbtn .mat-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:20px;line-height:20px;margin:0}td.xiri-tree-td .xiri-tree-iconbtn:hover{background:#0000000f}td.xiri-tree-td .xiri-tree-iconbtn:focus-visible{outline:2px solid var(--primary, var(--mat-sys-primary, currentColor));outline-offset:-2px}td.xiri-tree-td .xiri-tree-spacer{width:24px;height:24px;flex:0 0 24px}td.xiri-tree-td .xiri-tree-count{margin-left:var(--xiri-spacing-xs, 4px);opacity:.6;font-size:.85em}td.xiri-tree-td .xiri-tree-addsub{margin-left:var(--xiri-spacing-xs, 4px);opacity:0;transition:opacity .15s ease-in-out}tr.mat-mdc-row:hover td.xiri-tree-td .xiri-tree-addsub,td.xiri-tree-td .xiri-tree-addsub:focus-visible{opacity:1}tr.xiri-tree-dimmed{opacity:.6}\n"] }]
+                        XiriEmptyStateComponent], template: "<mat-card class=\"xiritablecard mat-mdc-elevation-specific\" [class.mat-elevation-z3]=\"!options.flat\" [class.flat]=\"options.flat\">\n\t<div class=\"xiritable\" [class]=\"options.class\">\n\t\t<div class=\"table-full\">\n\t\t\t@if (bulkBarActive) {\n\t\t\t\t<div class=\"xiri-bulk-bar\" [class.sticky]=\"options.stickyBulkBar\" role=\"toolbar\"\n\t\t\t\t     aria-label=\"Massenaktionen\" data-testid=\"table-bulk-bar\">\n\t\t\t\t\t<button mat-icon-button (click)=\"cancelBulk()\" matTooltip=\"Auswahl aufheben\"\n\t\t\t\t\t        aria-label=\"Auswahl aufheben\">\n\t\t\t\t\t\t<mat-icon>close</mat-icon>\n\t\t\t\t\t</button>\n\t\t\t\t\t<span class=\"xiri-bulk-count\" aria-live=\"polite\" data-testid=\"table-bulk-count\">\n\t\t\t\t\t\t@if (bulkAllResults()) {\n\t\t\t\t\t\t\tAlle {{ bulkTotalCount() }} Ergebnisse ausgew\u00E4hlt\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t{{ selection.selected.length }} ausgew\u00E4hlt\n\t\t\t\t\t\t}\n\t\t\t\t\t</span>\n\t\t\t\t\t@if (canSelectAllResults()) {\n\t\t\t\t\t\t<button mat-button color=\"primary\" (click)=\"selectAllResults()\"\n\t\t\t\t\t\t        data-testid=\"table-bulk-selectall\">\n\t\t\t\t\t\t\tAlle {{ bulkTotalCount() }} Ergebnisse ausw\u00E4hlen\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t\t<span class=\"xiri-bulk-spacer\"></span>\n\t\t\t\t\t@for (button of options.bulkActions; track button) {\n\t\t\t\t\t\t@if (!button.hide) {\n\t\t\t\t\t\t\t<button mat-button [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t        (click)=\"bulkAction($event, button)\"\n\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\" [matTooltipDisabled]=\"!button.hint\">\n\t\t\t\t\t\t\t\t@if (button.icon) {\n\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t{{ button.text }}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (hasHeader) {\n\t\t\t\t<div class=\"header\" [hidden]=\"bulkBarActive\">\n\t\t\t\t\t@if (options.reload) {\n\t\t\t\t\t\t<div class=\"buttons\">\n\t\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\t<mat-icon>autorenew</mat-icon>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t\t@if (autoRefresh()) {\n\t\t\t\t\t\t<div class=\"autorefresh-indicator\" role=\"status\" aria-live=\"polite\"\n\t\t\t\t\t\t     matTooltip=\"Tabelle aktualisiert sich automatisch\">\n\t\t\t\t\t\t\t<mat-icon class=\"spin\">sync</mat-icon>\n\t\t\t\t\t\t\t<span>Auto-Refresh aktiv \u00B7 n\u00E4chste in {{ countdown() }}s</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t\t@if (lastUpdated(); as updated) {\n\t\t\t\t\t\t<div class=\"lastupdated-indicator\" data-testid=\"table-last-updated\" role=\"status\" aria-live=\"polite\">\n\t\t\t\t\t\t\tStand {{ updated | date:'HH:mm' }}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t\t@if (treeEnabled) {\n\t\t\t\t\t\t<div class=\"buttons xiri-tree-actions\">\n\t\t\t\t\t\t\t<button mat-icon-button (click)=\"expandAllNodes()\" color=\"primary\"\n\t\t\t\t\t\t\t        matTooltip=\"Alle ausklappen\" aria-label=\"Alle ausklappen\">\n\t\t\t\t\t\t\t\t<mat-icon>unfold_more</mat-icon>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<button mat-icon-button (click)=\"collapseAllNodes()\" color=\"primary\"\n\t\t\t\t\t\t\t        matTooltip=\"Alle einklappen\" aria-label=\"Alle einklappen\">\n\t\t\t\t\t\t\t\t<mat-icon>unfold_less</mat-icon>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t\t<div class=\"middle\" [class.hasButtons]=\"options.buttons\">{{ options.title }}</div>\n\t\t\t\t\t@if (options.buttons) {\n\t\t\t\t\t\t<xiri-buttonline [settings]=\"options.buttons\" (result)=\"buttonReturn($event)\"\n\t\t\t\t\t\t                 [filterData]=\"_filterData()\"></xiri-buttonline>\n\t\t\t\t\t}\n\t\t\t\t\t@if (options.search) {\n\t\t\t\t\t\t<xiri-search (changed)=\"searchDo($event)\" [placeholder]=\"''\" [text]=\"searchTextInit\"></xiri-search>\n\t\t\t\t\t}\n\t\t\t\t\t@if (options.saveInput) {\n\t\t\t\t\t\t<div class=\"buttons saveInput\">\n\t\t\t\t\t\t\t<button mat-raised-button (click)=\"saveInputData()\" color=\"primary\">\n\t\t\t\t\t\t\t\t{{ options.saveInput }}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div class=\"tableout-wrap\">\n\t\t\t<div class=\"tableout\" [class.is-loading]=\"loading()\" [style.max-height]=\"options.scrollHeight || null\">\n\t\t\t\t<table mat-table [dataSource]=\"dataSource\" matSort [style.min-width]=\"options.minWidth ?? '100%'\"\n\t\t\t\t       [class]=\"densityClass()\"\n\t\t\t\t       [class.borders]=\"options.borders\" [class.bordersHeader]=\"options.bordersHeader\"\n\t\t\t\t       [trackBy]=\"trackByRowId\">\n\n\t\t\t\t\t@for (column of displayedColumns; track column.id) {\n\t\t\t\t\t\t<ng-container [matColumnDef]=\"column.id\" [sticky]=\"column.sticky\">\n\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef mat-sort-header=\"{{ column.id }}\" [disabled]=\"!column.sort || !options.sort\" disableClear\n\t\t\t\t\t\t\t    [style.width]=\"column.width\" [style.min-width]=\"column.minWidth\"\n\t\t\t\t\t\t\t    [class]=\"column.display + ' ' + (column.header || '')\"> {{ column.name }}\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t@switch (column.format) {\n\t\t\t\t\t\t\t\t@case ('buttons') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@for (button of column.buttons; track button; let i = $index) {\n\t\t\t\t\t\t\t\t\t\t\t@if (row[column.id][i] !== false && !button.hide) {\n\t\t\t\t\t\t\t\t\t\t\t\t@switch (button.action) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('href') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('download') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" [disabled]=\"false\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  (click)=\"openDialog( $event, button, column.id, i, row)\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('api') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" [disabled]=\"false\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  (click)=\"apiCall( $event, row[column.id][ i ] )\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('save') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" (click)=\"saveCall( $event, button, row, row[column.id][ i ] )\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  [disabled]=\"!saveCallCheck( button, row )\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon class=\"btnicon\" [class]=\"button.color || 'primary'\" [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!button.hint\">{{ button.icon }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('menu') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button mat-icon-button [matMenuTriggerFor]=\"menuRef\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [class]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [attr.aria-label]=\"button.hint || button.text\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        (click)=\"$event.stopPropagation()\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-menu #menuRef=\"matMenu\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@for (item of button.menuItems; track item; let j = $index) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (row[column.id][i][j] !== false) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@switch (item.action) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@let menuUrl = row[column.id][i][j] | xiriUrl;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a mat-menu-item [routerLink]=\"menuUrl?.path\" [queryParams]=\"menuUrl?.queryParams\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('href') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a mat-menu-item [href]=\"row[column.id][i][j]\" target=\"_blank\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button mat-menu-item (click)=\"openMenuDialog($event, item, column.id, i, j, row)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-menu>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@if (column.icons?.[ $any(row[ column.id ]) ]; as icon) {\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"icon[ 'color' ] || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltip]=\"row[ column.id + 'Hint' ] || icon[ 'hint' ] || '' \"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!( row[ column.id + 'Hint' ] || icon[ 'hint' ] )\">{{ icon['icon'] }}\n\t\t\t\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('html') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [innerHtml]=\"row[column.id] | safeHtml\" [class]=\"column.display\"></td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\"\n\t\t\t\t\t\t\t\t\t    [class.xiri-tree-td]=\"treeEnabled && column.id === treeColumnId\">\n\t\t\t\t\t\t\t\t\t\t@if (treeEnabled && column.id === treeColumnId) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treePrefix; context: { $implicit: row }\"></ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (row[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t\t\t\t@let cellUrl = row[column.id + 'Link'] | xiriUrl;\n\t\t\t\t\t\t\t\t\t\t\t<a [routerLink]=\"cellUrl?.path\" [queryParams]=\"cellUrl?.queryParams\" class=\"tablelink\">{{ row[column.id] }}</a>\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t<span>{{ row[column.id] }}</span>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (treeEnabled && column.id === treeColumnId) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treeSuffix; context: { $implicit: row }\"></ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('input') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t<mat-form-field subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t<input matInput\n\t\t\t\t\t\t\t\t\t\t\t       [type]=\"column.inputType || 'text'\"\n\t\t\t\t\t\t\t\t\t\t\t       [(ngModel)]=\"row[ column.id ]\"\n\t\t\t\t\t\t\t\t\t\t\t       [lang]=\"column.inputLang || ''\"\n\t\t\t\t\t\t\t\t\t\t\t       [required]=\"column.inputRequired || true\"\n\t\t\t\t\t\t\t\t\t\t\t       (paste)=\"pasteInput( $event, row, column )\">\n\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('text2') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@let lines = cellLines(row, column);\n\t\t\t\t\t\t\t\t\t\t<div>{{ lines[0] }}</div>\n\t\t\t\t\t\t\t\t\t\t<div>{{ lines[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 cellLines(row, column); 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 }}{{ cellText(row, column) }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('chips') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@if (isSaving(row, column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t\t\t\t\t\t} @else if (column.editable && options.editUrl && isEditing(row, column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t@if (editableOptionsLoading()) {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-form-field class=\"xiri-inline-edit\" subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-select multiple\n\t\t\t\t\t\t\t\t\t\t\t\t\t            [ngModel]=\"editingChipsValues()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t            (selectionChange)=\"onChipsSelectionChange(row, column, $event.value)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t            (keydown)=\"onInlineEditKeydown($event, row, column)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t            (openedChange)=\"!$event && saveInlineEdit(row, column)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (column.editableOptionsSearch || column.editableSearchUrl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ngx-mat-select-search [formControl]=\"inlineSearchControl\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                       [searching]=\"inlineSearching()\"></ngx-mat-select-search>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t@for (opt of getEditableOptions(column); track opt.value) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-select>\n\t\t\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} @else if (column.editable && options.editUrl) {\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"xiri-editable-cell\" role=\"button\" tabindex=\"0\"\n\t\t\t\t\t\t\t\t\t\t\t     (click)=\"startInlineEdit(row, column); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t     (keydown.enter)=\"startInlineEdit(row, column); $event.stopPropagation()\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"xiri-chips-display\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t@for (chip of row[column.id]; track chip.label) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"xiri-chip-display\" [class]=\"chip.color || ''\">{{ chip.label }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon class=\"xiri-edit-icon\">edit</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"xiri-chips-display\">\n\t\t\t\t\t\t\t\t\t\t\t\t@for (chip of row[column.id]; track chip.label) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"xiri-chip-display\" [class]=\"chip.color || ''\">{{ chip.label }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@default {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\"\n\t\t\t\t\t\t\t\t\t    [class.xiri-tree-td]=\"treeEnabled && column.id === treeColumnId\">\n\t\t\t\t\t\t\t\t\t\t@if (treeEnabled && column.id === treeColumnId) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treePrefix; context: { $implicit: row }\"></ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (isSaving(row, column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t\t\t\t\t\t} @else if (column.editable && options.editUrl && isEditing(row, column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t@if (column.editableOptions || column.editableOptionsUrl || column.editableSearchUrl) {\n\t\t\t\t\t\t\t\t\t\t\t\t@if (editableOptionsLoading()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-form-field class=\"xiri-inline-edit\" subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-select [ngModel]=\"editValue(row, column)\" (ngModelChange)=\"setEditValue(row, column, $event)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t            [compareWith]=\"compareEditValue\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t            (keydown)=\"onInlineEditKeydown($event, row, column)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t            (openedChange)=\"!$event && saveInlineEdit(row, column)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (column.editableOptionsSearch || column.editableSearchUrl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ngx-mat-select-search [formControl]=\"inlineSearchControl\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                       [searching]=\"inlineSearching()\"></ngx-mat-select-search>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@for (opt of getEditableOptions(column); track opt.value) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-select>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-form-field class=\"xiri-inline-edit\" subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<input matInput\n\t\t\t\t\t\t\t\t\t\t\t\t\t       [type]=\"column.inputType || 'text'\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t       [step]=\"column.inputType === 'datetime-local' ? 1 : null\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t       [ngModel]=\"editValue(row, column)\" (ngModelChange)=\"setEditValue(row, column, $event)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t       (blur)=\"saveInlineEdit(row, column)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t       (keydown)=\"onInlineEditKeydown($event, row, column)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button matSuffix mat-icon-button class=\"xiri-inline-edit-confirm\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t        (mousedown)=\"$event.preventDefault(); saveInlineEdit(row, column)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t        aria-label=\"\u00C4nderung speichern\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t        tabindex=\"-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon>check</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} @else if (column.editable && options.editUrl) {\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"xiri-editable-cell\" role=\"button\" tabindex=\"0\"\n\t\t\t\t\t\t\t\t\t\t\t      (click)=\"startInlineEdit(row, column); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t      (keydown.enter)=\"startInlineEdit(row, column); $event.stopPropagation()\">\n\t\t\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ cellText(row, column) }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon class=\"xiri-edit-icon\">edit</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ cellText(row, column) }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (treeEnabled && column.id === treeColumnId) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treeSuffix; context: { $implicit: row }\"></ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t<td mat-footer-cell *matFooterCellDef [hidden]=\"!options.footer\"\n\t\t\t\t\t\t\t    [style.width]=\"column.width\" [style.min-width]=\"column.minWidth\" class=\"bottomrow\"\n\t\t\t\t\t\t\t    [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t@if ( footer[ column.id ] ) {\n\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ footer[ column.id ] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t\t@if (showSelectColumn) {\n\t\t\t\t\t\t<ng-container matColumnDef=\"select\" [sticky]=\"true\">\n\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef [style.width]=\"'65px'\">\n\t\t\t\t\t\t\t\t<mat-checkbox (change)=\"$event ? masterToggle() : null\"\n\t\t\t\t\t\t\t\t              [checked]=\"selection.hasValue() && isAllSelected()\"\n\t\t\t\t\t\t\t\t              [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\">\n\t\t\t\t\t\t\t\t@if (isSelectable(row)) {\n\t\t\t\t\t\t\t\t\t<mat-checkbox\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t(change)=\"$event ? toggleRow(row) : null\"\n\t\t\t\t\t\t\t\t\t\t\t[checked]=\"selection.isSelected(row)\">\n\t\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t<td mat-footer-cell *matFooterCellDef [style.width]=\"'65px'\" class=\"bottomrow\" [hidden]=\"!options.footer\">\n\t\t\t\t\t\t\t\t<mat-checkbox (change)=\"$event ? masterToggle() : null\"\n\t\t\t\t\t\t\t\t              [checked]=\"selection.hasValue() && isAllSelected()\"\n\t\t\t\t\t\t\t\t              [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\n\t\t\t\t\t@if (extraHeaderFields.length > 0) {\n\t\t\t\t\t\t@for (column of extraHeaderFields; track column.id) {\n\t\t\t\t\t\t\t<ng-container matColumnDef=\"{{ column.id }}\" [sticky]=\"column.sticky\">\n\t\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef [attr.colspan]=\"column.headerSpan\">{{ column.name }}</th>\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<tr mat-header-row *matHeaderRowDef=\"extraHeaders; sticky: true\" [class.dense]=\"options.dense\"></tr>\n\t\t\t\t\t}\n\n\t\t\t\t\t<tr mat-header-row *matHeaderRowDef=\"columnsToDisplay; sticky: true\" [class.dense]=\"options.dense\"></tr>\n\t\t\t\t\t<tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\" (click)=\"clicked(row)\"\n\t\t\t\t\t    [class.xiri-tree-dimmed]=\"treeEnabled && row._tree?.dimmed\"></tr>\n\t\t\t\t\t<tr mat-footer-row *matFooterRowDef=\"columnsToDisplay; sticky: true\" [hidden]=\"!options.footer\"></tr>\n\t\t\t\t</table>\n\t\t\t</div>\n\t\t\t<div class=\"loader\" [hidden]=\"!loading()\" [class.has-bottombar]=\"(options.select || options.pagination) && !options.footer\">\n\t\t\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t@if (!loading()) {\n\t\t\t\t@if (!errorMsg && dataSource.filteredData.length === 0) {\n\t\t\t\t\t@if (options.emptyState) {\n\t\t\t\t\t\t<xiri-empty-state [settings]=\"options.emptyState\"></xiri-empty-state>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<div class=\"nodata\">{{ options.textNoData }}</div>\n\t\t\t\t\t}\n\t\t\t\t} @else if (errorMsg) {\n\t\t\t\t\t<div class=\"alert alert-danger\">\n\t\t\t\t\t\t<span>{{ errorMsg }}</span>\n\t\t\t\t\t\t<button mat-button type=\"button\" data-testid=\"table-retry\" (click)=\"reload()\">\n\t\t\t\t\t\t\t<mat-icon>autorenew</mat-icon> Retry\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t<div class=\"xrow xsmall\" [class.bottomrow]=\"(options.select || options.pagination) && !options.footer\">\n\t\t\t\t@if (options.select) {\n\t\t\t\t\t<div class=\"xcol xcol-md-2 select-buttons\">\n\t\t\t\t\t\t@for (button of options.selectButtons; track button) {\n\t\t\t\t\t\t\t@if (!button.hide) {\n\t\t\t\t\t\t\t\t@switch (button.action) {\n\t\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t\t        (click)=\"openDialogSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [attr.aria-label]=\"button.hint || button.text\">\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t@case ('api') {\n\t\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t\t        (click)=\"apiCallSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [attr.aria-label]=\"button.hint || button.text\">\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t@case ('download') {\n\t\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t\t        (click)=\"downloadSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t        [attr.aria-label]=\"button.hint || button.text\">\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"xcol xcol-right-md-10\">\n\t\t\t\t\t<mat-paginator [hidden]=\"!options.pagination\" [pageSizeOptions]=\"options.pageSizes || []\" showFirstLastButtons=\"true\"></mat-paginator>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</mat-card>\n\n@if (dynData.data) {\n\t<ng-container *ngTemplateOutlet=\"dyncomponent(); context: { $implicit: dynData }\"></ng-container>\n}\n\n<!-- Tree mode: indent + expand/collapse arrow rendered before the tree column's content -->\n<ng-template #treePrefix let-row>\n\t<span class=\"xiri-tree-prefix\" [style.padding-left.px]=\"(row._tree?.level || 0) * 24\">\n\t\t@if (row._tree?.hasChildren) {\n\t\t\t<button type=\"button\" class=\"xiri-tree-iconbtn xiri-tree-toggle\" (click)=\"toggleNode($event, row)\"\n\t\t\t        tabindex=\"-1\" [attr.aria-label]=\"row._tree.expanded ? 'einklappen' : 'ausklappen'\">\n\t\t\t\t<mat-icon color=\"primary\">{{ row._tree.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n\t\t\t</button>\n\t\t} @else {\n\t\t\t<span class=\"xiri-tree-spacer\"></span>\n\t\t}\n\t</span>\n</ng-template>\n\n<!-- Tree mode: child-count badge (when collapsed) + optional \"+ sub\" button after the content -->\n<ng-template #treeSuffix let-row>\n\t@if (treeShowCounts && row._tree && !row._tree.expanded && row._tree.childCount > 0) {\n\t\t<span class=\"xiri-tree-count\">({{ row._tree.childCount }})</span>\n\t}\n\t@if (treeHasAddSub && treeCanAddSub(row)) {\n\t\t<button type=\"button\" class=\"xiri-tree-iconbtn xiri-tree-addsub\" (click)=\"addSub($event, row)\"\n\t\t        tabindex=\"-1\" matTooltip=\"Sub-Eintrag hinzuf\u00FCgen\" aria-label=\"Sub-Eintrag hinzuf\u00FCgen\">\n\t\t\t<mat-icon color=\"primary\">add</mat-icon>\n\t\t</button>\n\t}\n</ng-template>\n", styles: ["mat-card.xiritablecard{padding:0;margin-bottom:var(--xiri-spacing-xl)}mat-card.xiritablecard.flat{box-shadow:none;background:transparent;border-radius:0;margin-bottom:0}.mat-mdc-card-content.hasComponents>xiri-dyncomponent>div>xiri-table>mat-card.xiritablecard{margin-bottom:0}.xiritable{width:100%;overflow:auto}.xiritable.canbreak{word-break:break-all}.xiritable .table-full{display:inline-block;width:100%}.xiritable .table-full .xiri-bulk-bar{display:flex;align-items:center;gap:var(--xiri-spacing-sm);padding:var(--xiri-spacing-xs) var(--xiri-spacing-sm);background:var(--secondary-container, var(--mat-sys-secondary-container, #e0e0e0));color:var(--on-secondary-container, var(--mat-sys-on-secondary-container, inherit));border-radius:var(--xiri-radius-sm, 4px);margin-bottom:var(--xiri-spacing-xs)}.xiritable .table-full .xiri-bulk-bar.sticky{position:sticky;top:0;z-index:5}.xiritable .table-full .xiri-bulk-bar .xiri-bulk-count{font-weight:500}.xiritable .table-full .xiri-bulk-bar .xiri-bulk-spacer{flex:1 1 auto}.xiritable .table-full .tableout-wrap{position:relative}.xiritable .table-full .tableout{max-height:60vh;overflow-y:auto;width:100%;min-width:100%;max-width:100%}.xiritable .table-full .tableout.is-loading{min-height:100px}.xiritable .table-full .alert{padding:var(--xiri-spacing-md)}.xiritable .table-full mat-paginator{--mat-paginator-container-background-color: transparent;--mat-paginator-container-size: 51px;--mat-form-field-container-height: 32px;--mat-form-field-container-vertical-padding: 4px}.xiritable .table-full .bottomrow{border-top:1px solid var(--outline-variant, #C2C7CF)}.xiritable .table-full div.bottomrow{background-color:var(--surface-container, #F3F3F6);border-bottom-left-radius:var(--mat-card-elevated-container-shape, 12px);border-bottom-right-radius:var(--mat-card-elevated-container-shape, 12px)}.xiritable .header{background-color:var(--surface-container, #F3F3F6);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;min-height:51px;padding:0 16px;border-bottom:1px solid var(--outline-variant, #C2C7CF);border-top-left-radius:var(--mat-card-elevated-container-shape, 12px);border-top-right-radius:var(--mat-card-elevated-container-shape, 12px)}.xiritable .header .buttons{padding:0 7px 0 .5rem;margin-left:-16px}.xiritable .header .buttons button{z-index:200}.xiritable .header .buttons.saveInput{padding-left:21px}.xiritable .header .middle{flex-grow:1;font-size:var(--xiri-font-size-title);display:flex;padding:0}.xiritable .header xiri-buttonline{padding:0 0 0 16px}.xiritable .header .autorefresh-indicator{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;font-size:var(--xiri-font-size-small, .8rem);color:var(--primary, var(--mat-sys-primary, #006398))}.xiritable .header .autorefresh-indicator mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.xiritable .header .autorefresh-indicator mat-icon.spin{animation:xiri-autorefresh-spin 1.5s linear infinite}.xiritable .header .lastupdated-indicator{display:inline-flex;align-items:center;padding:2px 8px;font-size:var(--xiri-font-size-small, .8rem);color:var(--on-surface-variant, #44474F);opacity:.75}@keyframes xiri-autorefresh-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.xiritable table{width:100%}.xiritable table.density-regular{--mat-table-header-container-height: 42px;--mat-table-footer-container-height: 42px;--mat-table-row-item-container-height: 42px}.xiritable table.density-compact{--mat-table-header-container-height: 32px;--mat-table-footer-container-height: 32px;--mat-table-row-item-container-height: 32px}.xiritable table.density-relaxed{--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 52px;--mat-table-row-item-container-height: 52px}.xiritable table th.mat-mdc-header-cell:not(:first-of-type),.xiritable table td.mat-mdc-cell:not(:first-of-type),.xiritable table td.mat-mdc-footer-cell:not(:first-of-type){padding-left:5px}.xiritable table th.mat-mdc-header-cell:not(:last-of-type),.xiritable table td.mat-mdc-cell:not(:last-of-type),.xiritable table td.mat-mdc-footer-cell:not(:last-of-type){padding-right:7px}.xiritable table tr.mat-mdc-row{transition:background-color var(--xiri-duration-fast) var(--xiri-easing-standard)}.xiritable table tr.mat-mdc-row:hover{background:var(--surface-variant, #DEE3EB)}.xiritable table .tablelink{text-decoration:underline}.xiritable table td.buttons xiri-button,.xiritable table td.buttons xiri-buttonstyle,.xiritable table td.buttons .btnicon{margin-right:8px}.xiritable table td.buttons xiri-button:last-child,.xiritable table td.buttons xiri-buttonstyle:last-child,.xiritable table td.buttons .btnicon:last-child{margin-right:0}.xiritable table td.number,.xiritable table th.number,.xiritable table td.mat-mdc-footer-cell.number{text-align:right;font-variant-numeric:tabular-nums}.xiritable table td.right,.xiritable table td.align-right,.xiritable table th.right,.xiritable table th.align-right{text-align:right}.xiritable table td.center,.xiritable table td.align-center,.xiritable table th.center,.xiritable table th.align-center{text-align:center}.xiritable table td.left,.xiritable table td.align-left,.xiritable table th.left,.xiritable table th.align-left{text-align:left}.xiritable table td.vertical,.xiritable table th.vertical{writing-mode:sideways-rl;text-orientation:sideways}.xiritable table td.vertical div,.xiritable table th.vertical div{max-height:6rem}.xiritable table td.sideways,.xiritable table th.sideways{writing-mode:sideways-lr;text-orientation:sideways}.xiritable table td.sideways div,.xiritable table th.sideways div{max-height:6rem}.xiritable table td.upright,.xiritable table th.upright{writing-mode:vertical-rl;text-orientation:upright}.xiritable table.borders td+td{border-left:1px solid var(--outline-variant, #C2C7CF)}.xiritable table.bordersHeader th+th{border-left:1px solid var(--outline-variant, #C2C7CF)}.xiritable table td.mat-mdc-cell mat-form-field{--mat-form-field-container-height: 40px;--mat-form-field-container-vertical-padding: 8px}.xiritable .xiri-editable-cell{cursor:pointer;display:inline-flex;align-items:center;border-radius:var(--xiri-radius-xs);padding:2px 4px}.xiritable .xiri-editable-cell:hover,.xiritable .xiri-editable-cell:focus-visible{background-color:var(--surface-variant, #DEE3EB)}.xiritable .xiri-editable-cell:hover .xiri-edit-icon,.xiritable .xiri-editable-cell:focus-visible .xiri-edit-icon{opacity:1}.xiritable .xiri-edit-icon{opacity:0;font-size:14px;width:14px;height:14px;margin-left:4px;color:var(--on-surface-variant, #44474F);transition:opacity var(--xiri-duration-fast) var(--xiri-easing-standard)}.xiritable .xiri-inline-edit{--mat-form-field-container-height: 36px;--mat-form-field-container-vertical-padding: 6px;width:100%}.xiritable .xiri-inline-edit-confirm{--mdc-icon-button-icon-size: 18px;--mdc-icon-button-state-layer-size: 28px;width:28px;height:28px;padding:0;margin-right:5px;color:var(--primary, #1976d2);display:inline-flex;align-items:center;justify-content:center}.xiritable .xiri-inline-edit-confirm mat-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:18px}.xiritable .mat-column-select{overflow:initial}.xiritable .select-buttons{padding:.3rem .8rem;display:flex;align-items:center}.xiritable .select-buttons button{margin-right:.5rem}.xiritable .xiri-cell-saved{animation:pulse .5s var(--xiri-easing-standard);border-radius:var(--xiri-radius-xs)}.xiritable .nodata{padding:.5rem 1.5rem;font-size:var(--xiri-font-size-label);background-color:var(--surface, #FFFFFF);animation:fadeInUp var(--xiri-duration-normal) var(--xiri-easing-decelerate)}.xiritable .loader{position:absolute;top:0;left:0;width:100%;bottom:0;display:flex;justify-content:center;align-items:center;background-color:var(--ripple, rgba(206, 212, 218, .5));z-index:200;border-bottom-left-radius:var(--mat-card-elevated-container-shape, 12px);border-bottom-right-radius:var(--mat-card-elevated-container-shape, 12px);animation:fadeIn var(--xiri-duration-fast) var(--xiri-easing-standard)}.xiritable .loader.has-bottombar{border-bottom-left-radius:0;border-bottom-right-radius:0}xiri-dyncomponent{margin-bottom:var(--xiri-spacing-xl)}.mat-expansion-panel-body>xiri-dyncomponent,.mat-mdc-tab-body-content>xiri-dyncomponent{margin-bottom:0}[hidden]{display:none!important}.xiri-tree-actions{display:flex;align-items:center}td.xiri-tree-td{white-space:nowrap}td.xiri-tree-td .xiri-tree-prefix{display:inline-flex;align-items:center;vertical-align:middle}td.xiri-tree-td .xiri-tree-iconbtn{appearance:none;border:0;background:transparent;padding:0;margin:0;flex:0 0 24px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent}td.xiri-tree-td .xiri-tree-iconbtn .mat-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:20px;line-height:20px;margin:0}td.xiri-tree-td .xiri-tree-iconbtn:hover{background:#0000000f}td.xiri-tree-td .xiri-tree-iconbtn:focus-visible{outline:2px solid var(--primary, var(--mat-sys-primary, currentColor));outline-offset:-2px}td.xiri-tree-td .xiri-tree-spacer{width:24px;height:24px;flex:0 0 24px}td.xiri-tree-td .xiri-tree-count{margin-left:var(--xiri-spacing-xs, 4px);opacity:.6;font-size:.85em}td.xiri-tree-td .xiri-tree-addsub{margin-left:var(--xiri-spacing-xs, 4px);opacity:0;transition:opacity .15s ease-in-out}tr.mat-mdc-row:hover td.xiri-tree-td .xiri-tree-addsub,td.xiri-tree-td .xiri-tree-addsub:focus-visible{opacity:1}tr.xiri-tree-dimmed{opacity:.6}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dyncomponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "dyncomponent", required: false }] }], settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }], filterData: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterData", required: false }] }], clickedRow: [{ type: i0.Output, args: ["clickedRow"] }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }], table: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTable), { isSignal: true }] }] } });
 
 class XiriFormService {
@@ -6089,8 +6320,9 @@ class XiriFormComponent {
         }, 10);
     }
     formChanged(event) {
-        this.formValid = event.valid;
-        this.formValues = event.value;
+        const state = formState(event);
+        this.formValid = state.valid;
+        this.formValues = state.value;
         // data = { ...data, ...this.extra }
         // this.events.push( '' + this.formValid + ' => ' + JSON.stringify( event.value ) );
     }
@@ -6253,8 +6485,9 @@ class XiriStepperComponent {
         }
     }
     formChanged(step, event, i) {
-        if (event.valid)
-            step.data = event.value;
+        const { valid, value } = formState(event);
+        if (valid)
+            step.data = value;
         if (!event.pristine) {
             step.completed.set(false);
             const steps = this.steps();
@@ -6264,7 +6497,7 @@ class XiriStepperComponent {
                 steps[x].gotonext.set(false);
             }
         }
-        step.valid.set(event.valid);
+        step.valid.set(valid);
     }
     clickButton(button) {
         if (button.action == 'back')
@@ -6515,18 +6748,22 @@ class XiriQueryComponent {
             this.storageService.set(key, !expanded);
     }
     formChanged(event) {
-        this.formValid.set(event.valid);
-        this.rawValue.set(event.value);
+        // Die drei Auswertungen (hier, initialer Load, Debounce) müssen übereinstimmen, deshalb
+        // wandert der normalisierte Stand mit ins Ereignis für den Debounce.
+        const { valid, value } = formState(event);
+        event = { ...event, valid, value };
+        this.formValid.set(valid);
+        this.rawValue.set(value);
         if (this.extra !== null) {
-            if (event.value && typeof event.value === 'object')
-                this.filterData.set({ ...this.extra, ...event.value });
+            if (value && typeof value === 'object')
+                this.filterData.set({ ...this.extra, ...value });
             else
                 this.filterData.set(this.extra);
         }
         else
-            this.filterData.set(event.value);
+            this.filterData.set(value);
         // Emit immediately on first valid change (for initial load), debounce subsequent changes
-        if (!this._initialChangeDone && event.valid) {
+        if (!this._initialChangeDone && valid) {
             this._initialChangeDone = true;
             this.dynData.filterData = this.filterData();
             this.filterChange.emit(this.filterData());