@3kles/kles-material-table-v2 22.1.1 → 22.1.3

package/fesm2022/3kles-kles-material-table-v2.mjs

@@ -1,7 +1,7 @@
 import * as i18 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Pipe, InjectionToken, Injectable, computed, Inject, input, HostBinding, Directive, signal, inject, Optional, DestroyRef, Component, output, ChangeDetectorRef, ChangeDetectionStrategy, ElementRef, HostListener, Input, EventEmitter, Injector, ViewChildren, ViewChild, effect, contentChild, Output, NgModule } from '@angular/core';
+import { Pipe, InjectionToken, Injectable, computed, Inject, input, HostBinding, Directive, signal, inject, Optional, DestroyRef, ChangeDetectorRef, Component, output, ChangeDetectionStrategy, ElementRef, HostListener, Input, EventEmitter, Injector, ViewChildren, ViewChild, effect, contentChild, Output, NgModule } from '@angular/core';
 import * as i19 from '@angular/forms';
 import { FormControl, FormGroup, FormArray, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from '@angular/material/button';
@@ -24,7 +24,7 @@ import * as i25 from '@angular/cdk/drag-drop';
 import { CdkDragHandle, DragDropModule, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
 import * as i26 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { Subject, BehaviorSubject, combineLatest, startWith, of, auditTime, switchMap, concat, catchError, map, filter, take, defer, defaultIfEmpty, fromEvent, skip, merge, debounceTime, distinctUntilChanged, scan, concatMap, withLatestFrom, shareReplay } from 'rxjs';
+import { Subject, BehaviorSubject, combineLatest, startWith, of, auditTime, switchMap, concat, catchError, map, filter, take, merge, defer, defaultIfEmpty, fromEvent, skip, debounceTime, distinctUntilChanged, scan, concatMap, withLatestFrom, shareReplay } from 'rxjs';
 import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
 import * as _ from 'lodash';
 import ___default from 'lodash';
@@ -1418,12 +1418,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             type: Injectable
         }], ctorParameters: () => [] });
 
+class ExtraRowService {
+    constructor(_extraRowsConfig, expandedRowStore) {
+        this._extraRowsConfig = _extraRowsConfig;
+        this.expandedRowStore = expandedRowStore;
+        this.multiTemplateDataRows = computed(() => this._extraRowsConfig().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "multiTemplateDataRows" }] : /* istanbul ignore next */ []));
+        this.rows = computed(() => this._extraRowsConfig().map((config) => ({
+            ...config,
+            when: this.createWhen(config),
+            displayedColumns: config.cells.map((cel) => cel.columnDef),
+        })), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    }
+    extraFields() {
+        return this._extraRowsConfig()
+            .flatMap((config) => config.cells)
+            .filter(Boolean)
+            .map((cell) => ({ ...cell.field, name: cell.columnDef }));
+    }
+    canExpand(index, row) {
+        return this._extraRowsConfig().some(config => config.mode === 'expand' && (config.when?.(index, row) ?? true));
+    }
+    createWhen(config) {
+        if (config.mode === 'expand') {
+            return (index, row) => {
+                return (config.when?.(index, row) ?? true) && this.expandedRowStore.isExpanded(row.getRawValue()._id);
+            };
+        }
+        else {
+            return config?.when;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExtraRowService, deps: [{ token: EXTRA_ROWS }, { token: ExpandedRowStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExtraRowService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExtraRowService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [EXTRA_ROWS]
+                }] }, { type: ExpandedRowStore }] });
+
+class KlesTableIntl {
+    constructor() {
+        this.changes = new Subject();
+        this.emptyStateTitle = 'No data';
+        this.emptyStateDescription = 'There are no rows to display.';
+        this.emptyStateRefreshLabel = 'Refresh';
+        this.keyboardNavigationEntryLabel = 'Go to table rows';
+        this.expandRowLabel = 'Expand row';
+        this.collapseRowLabel = 'Collapse row';
+        this.moveRowLabel = 'Move row';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableIntl, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableIntl, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 class KlesCellComponent {
     constructor() {
         this.destroyRef = inject(DestroyRef);
         this.expandedRowStore = inject(ExpandedRowStore);
         this.treeService = inject(TreeService);
         this.eventsService = inject(EventsService);
+        this.extraRowService = inject(ExtraRowService);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.intl = inject(KlesTableIntl);
         this.ui = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ui" }] : /* istanbul ignore next */ []));
         this.group = input.required(/* @ts-ignore */
@@ -1454,11 +1520,19 @@ class KlesCellComponent {
     }
     ngOnInit() {
         this.listen();
+        merge(this.intl.changes, this.group().valueChanges)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.changeDetectorRef.markForCheck());
     }
     stopPropagation(event) {
         event.stopPropagation();
     }
+    canExpandRow() {
+        return !!this.column().canExpand && this.extraRowService.canExpand(this.rowIndex(), this.group());
+    }
     expandRow() {
+        if (!this.canExpandRow())
+            return;
         const row = this.group();
         const expanded = this.expandedRowStore.isExpanded(row.getRawValue()._id);
         this.expandedRowStore.toggle(row.getRawValue()._id);
@@ -1496,11 +1570,11 @@ class KlesCellComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: KlesCellComponent, isStandalone: true, selector: "kles-cell", inputs: { ui: { classPropertyName: "ui", publicName: "ui", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, dragHandle: { classPropertyName: "dragHandle", publicName: "dragHandle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (dragHandle()) {\n    <button\n        type=\"button\"\n        matIconButton\n        cdkDragHandle\n        class=\"drag-handle\"\n        aria-label=\"D\u00E9placer la ligne\"\n        (click)=\"stopPropagation($event)\"\n        (dblclick)=\"stopPropagation($event)\"\n    >\n        <mat-icon>drag_indicator</mat-icon>\n    </button>\n}\n@if (column().canExpand) {\n    <button matIconButton class=\"expand-button\" (click)=\"expandRow(); stopPropagation($event)\">\n        @if (this.expandedRow()) {\n            <mat-icon>keyboard_arrow_down</mat-icon>\n        } @else {\n            <mat-icon>chevron_right</mat-icon>\n        }\n    </button>\n}\n@if (column().canExpandNode) {\n    <span class=\"tree-indent\" [style.width.px]=\"depth() * 24\" aria-hidden=\"true\"></span>\n    @if (hasChildren()) {\n        <button\n            matIconButton\n            class=\"expand-button\"\n            [disabled]=\"loadingNode()\"\n            [attr.aria-expanded]=\"expandedNode()\"\n            [attr.aria-label]=\"expandedNode() ? 'R\u00E9duire la ligne' : 'D\u00E9velopper la ligne'\"\n            (click)=\"expandNode(); stopPropagation($event)\"\n        >\n            @if (loadingNode()) {\n                <mat-icon class=\"tree-loading-icon\">more_horiz</mat-icon>\n            } @else if (expandedNode()) {\n                <mat-icon>keyboard_arrow_down</mat-icon>\n            } @else {\n                <mat-icon>chevron_right</mat-icon>\n            }\n        </button>\n    } @else {\n        <span class=\"expand-button-spacer\" aria-hidden=\"true\"></span>\n    }\n}\n<div class=\"cell-field\"><ng-content></ng-content></div>\n", styles: [":host{display:flex;flex-direction:row;justify-content:inherit;gap:5px;align-items:center}.cell-field{min-width:0;flex-grow:1;justify-content:inherit;flex-direction:column;display:flex;text-align:var(--align, center)}.tree-indent{flex:0 0 auto}.expand-button-spacer{flex:0 0 28px;width:28px;height:28px}.tree-loading-icon{animation:tree-loading-pulse .8s ease-in-out infinite alternate}@keyframes tree-loading-pulse{0%{opacity:.35}to{opacity:1}}.expand-button.mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 22px;width:28px;height:28px;padding:0;display:grid;place-items:center}.expand-button.mat-mdc-icon-button .mat-icon{width:22px;height:22px;font-size:22px;line-height:22px;margin:0}.drag-handle.mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 32px;--mdc-icon-button-icon-size: 24px;flex:0 0 32px;width:32px;height:32px;padding:0;cursor:grab;touch-action:none;display:grid;place-items:center}.drag-handle.mat-mdc-icon-button .mat-icon{width:24px;height:24px;font-size:24px;line-height:24px;margin:0}.drag-handle.mat-mdc-icon-button:active{cursor:grabbing}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: KlesCellComponent, isStandalone: true, selector: "kles-cell", inputs: { ui: { classPropertyName: "ui", publicName: "ui", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, dragHandle: { classPropertyName: "dragHandle", publicName: "dragHandle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (dragHandle()) {\n    <button\n        type=\"button\"\n        matIconButton\n        cdkDragHandle\n        class=\"drag-handle\"\n        [attr.aria-label]=\"intl.moveRowLabel\"\n        (click)=\"stopPropagation($event)\"\n        (dblclick)=\"stopPropagation($event)\"\n    >\n        <mat-icon>drag_indicator</mat-icon>\n    </button>\n}\n@if (column().canExpand) {\n    <button type=\"button\" matIconButton class=\"expand-button\" [disabled]=\"!canExpandRow()\"\n        [attr.aria-expanded]=\"expandedRow()\"\n        [attr.aria-label]=\"expandedRow() ? intl.collapseRowLabel : intl.expandRowLabel\"\n        (click)=\"expandRow(); stopPropagation($event)\">\n        @if (this.expandedRow()) {\n            <mat-icon>keyboard_arrow_down</mat-icon>\n        } @else {\n            <mat-icon>chevron_right</mat-icon>\n        }\n    </button>\n}\n@if (column().canExpandNode) {\n    <span class=\"tree-indent\" [style.width.px]=\"depth() * 24\" aria-hidden=\"true\"></span>\n    @if (hasChildren()) {\n        <button\n            matIconButton\n            class=\"expand-button\"\n            [disabled]=\"loadingNode()\"\n            [attr.aria-expanded]=\"expandedNode()\"\n            [attr.aria-label]=\"expandedNode() ? intl.collapseRowLabel : intl.expandRowLabel\"\n            (click)=\"expandNode(); stopPropagation($event)\"\n        >\n            @if (loadingNode()) {\n                <mat-icon class=\"tree-loading-icon\">more_horiz</mat-icon>\n            } @else if (expandedNode()) {\n                <mat-icon>keyboard_arrow_down</mat-icon>\n            } @else {\n                <mat-icon>chevron_right</mat-icon>\n            }\n        </button>\n    } @else {\n        <span class=\"expand-button-spacer\" aria-hidden=\"true\"></span>\n    }\n}\n<div class=\"cell-field\"><ng-content></ng-content></div>\n", styles: [":host{display:flex;flex-direction:row;justify-content:inherit;gap:5px;align-items:center}.cell-field{min-width:0;flex-grow:1;justify-content:inherit;flex-direction:column;display:flex;text-align:var(--align, center)}.tree-indent{flex:0 0 auto}.expand-button-spacer{flex:0 0 28px;width:28px;height:28px}.tree-loading-icon{animation:tree-loading-pulse .8s ease-in-out infinite alternate}@keyframes tree-loading-pulse{0%{opacity:.35}to{opacity:1}}.expand-button.mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 22px;width:28px;height:28px;padding:0;display:grid;place-items:center}.expand-button.mat-mdc-icon-button .mat-icon{width:22px;height:22px;font-size:22px;line-height:22px;margin:0}.drag-handle.mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 32px;--mdc-icon-button-icon-size: 24px;flex:0 0 32px;width:32px;height:32px;padding:0;cursor:grab;touch-action:none;display:grid;place-items:center}.drag-handle.mat-mdc-icon-button .mat-icon{width:24px;height:24px;font-size:24px;line-height:24px;margin:0}.drag-handle.mat-mdc-icon-button:active{cursor:grabbing}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kles-cell', standalone: true, imports: [CommonModule, MatIconModule, MatButtonModule, CdkDragHandle], template: "@if (dragHandle()) {\n    <button\n        type=\"button\"\n        matIconButton\n        cdkDragHandle\n        class=\"drag-handle\"\n        aria-label=\"D\u00E9placer la ligne\"\n        (click)=\"stopPropagation($event)\"\n        (dblclick)=\"stopPropagation($event)\"\n    >\n        <mat-icon>drag_indicator</mat-icon>\n    </button>\n}\n@if (column().canExpand) {\n    <button matIconButton class=\"expand-button\" (click)=\"expandRow(); stopPropagation($event)\">\n        @if (this.expandedRow()) {\n            <mat-icon>keyboard_arrow_down</mat-icon>\n        } @else {\n            <mat-icon>chevron_right</mat-icon>\n        }\n    </button>\n}\n@if (column().canExpandNode) {\n    <span class=\"tree-indent\" [style.width.px]=\"depth() * 24\" aria-hidden=\"true\"></span>\n    @if (hasChildren()) {\n        <button\n            matIconButton\n            class=\"expand-button\"\n            [disabled]=\"loadingNode()\"\n            [attr.aria-expanded]=\"expandedNode()\"\n            [attr.aria-label]=\"expandedNode() ? 'R\u00E9duire la ligne' : 'D\u00E9velopper la ligne'\"\n            (click)=\"expandNode(); stopPropagation($event)\"\n        >\n            @if (loadingNode()) {\n                <mat-icon class=\"tree-loading-icon\">more_horiz</mat-icon>\n            } @else if (expandedNode()) {\n                <mat-icon>keyboard_arrow_down</mat-icon>\n            } @else {\n                <mat-icon>chevron_right</mat-icon>\n            }\n        </button>\n    } @else {\n        <span class=\"expand-button-spacer\" aria-hidden=\"true\"></span>\n    }\n}\n<div class=\"cell-field\"><ng-content></ng-content></div>\n", styles: [":host{display:flex;flex-direction:row;justify-content:inherit;gap:5px;align-items:center}.cell-field{min-width:0;flex-grow:1;justify-content:inherit;flex-direction:column;display:flex;text-align:var(--align, center)}.tree-indent{flex:0 0 auto}.expand-button-spacer{flex:0 0 28px;width:28px;height:28px}.tree-loading-icon{animation:tree-loading-pulse .8s ease-in-out infinite alternate}@keyframes tree-loading-pulse{0%{opacity:.35}to{opacity:1}}.expand-button.mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 22px;width:28px;height:28px;padding:0;display:grid;place-items:center}.expand-button.mat-mdc-icon-button .mat-icon{width:22px;height:22px;font-size:22px;line-height:22px;margin:0}.drag-handle.mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 32px;--mdc-icon-button-icon-size: 24px;flex:0 0 32px;width:32px;height:32px;padding:0;cursor:grab;touch-action:none;display:grid;place-items:center}.drag-handle.mat-mdc-icon-button .mat-icon{width:24px;height:24px;font-size:24px;line-height:24px;margin:0}.drag-handle.mat-mdc-icon-button:active{cursor:grabbing}\n"] }]
+            args: [{ selector: 'kles-cell', standalone: true, imports: [CommonModule, MatIconModule, MatButtonModule, CdkDragHandle], template: "@if (dragHandle()) {\n    <button\n        type=\"button\"\n        matIconButton\n        cdkDragHandle\n        class=\"drag-handle\"\n        [attr.aria-label]=\"intl.moveRowLabel\"\n        (click)=\"stopPropagation($event)\"\n        (dblclick)=\"stopPropagation($event)\"\n    >\n        <mat-icon>drag_indicator</mat-icon>\n    </button>\n}\n@if (column().canExpand) {\n    <button type=\"button\" matIconButton class=\"expand-button\" [disabled]=\"!canExpandRow()\"\n        [attr.aria-expanded]=\"expandedRow()\"\n        [attr.aria-label]=\"expandedRow() ? intl.collapseRowLabel : intl.expandRowLabel\"\n        (click)=\"expandRow(); stopPropagation($event)\">\n        @if (this.expandedRow()) {\n            <mat-icon>keyboard_arrow_down</mat-icon>\n        } @else {\n            <mat-icon>chevron_right</mat-icon>\n        }\n    </button>\n}\n@if (column().canExpandNode) {\n    <span class=\"tree-indent\" [style.width.px]=\"depth() * 24\" aria-hidden=\"true\"></span>\n    @if (hasChildren()) {\n        <button\n            matIconButton\n            class=\"expand-button\"\n            [disabled]=\"loadingNode()\"\n            [attr.aria-expanded]=\"expandedNode()\"\n            [attr.aria-label]=\"expandedNode() ? intl.collapseRowLabel : intl.expandRowLabel\"\n            (click)=\"expandNode(); stopPropagation($event)\"\n        >\n            @if (loadingNode()) {\n                <mat-icon class=\"tree-loading-icon\">more_horiz</mat-icon>\n            } @else if (expandedNode()) {\n                <mat-icon>keyboard_arrow_down</mat-icon>\n            } @else {\n                <mat-icon>chevron_right</mat-icon>\n            }\n        </button>\n    } @else {\n        <span class=\"expand-button-spacer\" aria-hidden=\"true\"></span>\n    }\n}\n<div class=\"cell-field\"><ng-content></ng-content></div>\n", styles: [":host{display:flex;flex-direction:row;justify-content:inherit;gap:5px;align-items:center}.cell-field{min-width:0;flex-grow:1;justify-content:inherit;flex-direction:column;display:flex;text-align:var(--align, center)}.tree-indent{flex:0 0 auto}.expand-button-spacer{flex:0 0 28px;width:28px;height:28px}.tree-loading-icon{animation:tree-loading-pulse .8s ease-in-out infinite alternate}@keyframes tree-loading-pulse{0%{opacity:.35}to{opacity:1}}.expand-button.mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 22px;width:28px;height:28px;padding:0;display:grid;place-items:center}.expand-button.mat-mdc-icon-button .mat-icon{width:22px;height:22px;font-size:22px;line-height:22px;margin:0}.drag-handle.mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 32px;--mdc-icon-button-icon-size: 24px;flex:0 0 32px;width:32px;height:32px;padding:0;cursor:grab;touch-action:none;display:grid;place-items:center}.drag-handle.mat-mdc-icon-button .mat-icon{width:24px;height:24px;font-size:24px;line-height:24px;margin:0}.drag-handle.mat-mdc-icon-button:active{cursor:grabbing}\n"] }]
         }], propDecorators: { ui: [{ type: i0.Input, args: [{ isSignal: true, alias: "ui", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: true }] }], dragHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragHandle", required: false }] }] } });
 
 class KlesHeaderComponent {
@@ -1638,24 +1712,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 }]
         }] });
 
-class KlesTableIntl {
-    constructor() {
-        this.changes = new Subject();
-        this.emptyStateTitle = 'No data';
-        this.emptyStateDescription = 'There are no rows to display.';
-        this.emptyStateRefreshLabel = 'Refresh';
-        this.keyboardNavigationEntryLabel = 'Go to table rows';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableIntl, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableIntl, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
 class KlesTableEmptyStateComponent {
     constructor() {
         this.refreshRequested = output();
@@ -2341,45 +2397,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     args: [FOOTER]
                 }] }, { type: EventsService }] });
 
-class ExtraRowService {
-    constructor(_extraRowsConfig, expandedRowStore) {
-        this._extraRowsConfig = _extraRowsConfig;
-        this.expandedRowStore = expandedRowStore;
-        this.multiTemplateDataRows = computed(() => this._extraRowsConfig().length > 0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "multiTemplateDataRows" }] : /* istanbul ignore next */ []));
-        this.rows = computed(() => this._extraRowsConfig().map((config) => ({
-            ...config,
-            when: this.createWhen(config),
-            displayedColumns: config.cells.map((cel) => cel.columnDef),
-        })), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
-    }
-    extraFields() {
-        return this._extraRowsConfig()
-            .flatMap((config) => config.cells)
-            .filter(Boolean)
-            .map((cell) => ({ ...cell.field, name: cell.columnDef }));
-    }
-    createWhen(config) {
-        if (config.mode === 'expand') {
-            return (_, row) => {
-                return this.expandedRowStore.isExpanded(row.getRawValue()._id);
-            };
-        }
-        else {
-            return config?.when;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExtraRowService, deps: [{ token: EXTRA_ROWS }, { token: ExpandedRowStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExtraRowService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExtraRowService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [EXTRA_ROWS]
-                }] }, { type: ExpandedRowStore }] });
-
 class RenderService {
     constructor() {
         this._render = new EventEmitter();
@@ -3138,6 +3155,11 @@ class TableComponent {
         ...(ngDevMode ? [{ debugName: "viewportWidthPx" }] : /* istanbul ignore next */ []));
         this.viewportScrollRangePx = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "viewportScrollRangePx" }] : /* istanbul ignore next */ []));
+        this.visibleColumns = computed(() => {
+            const displayedColumns = new Set(this.displayedColumns());
+            return this.columns().filter((column) => displayedColumns.has(column.columnDef));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
         this.changeDetectorRef = inject(ChangeDetectorRef);
         this.destroyRef = inject(DestroyRef);
         this.emptyStateComponent = KlesTableEmptyStateComponent;
@@ -3483,7 +3505,7 @@ class TableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableComponent, deps: [{ token: i0.ElementRef }, { token: KlesTableConnectorService }, { token: LOADER_SERVICE }, { token: DATASOURCE_SERVICE }, { token: TABLE_SERVICE }, { token: ROW_DRAG_DROP }, { token: COLUMN_DRAG_DROP }, { token: ROW_APPEARANCE_CONFIG }, { token: SELECTION_SERVICE }, { token: ColumnsService }, { token: LoadingService }, { token: PaginatorService }, { token: ScrollbarService }, { token: FooterService }, { token: ExtraRowService }, { token: RenderService }, { token: SORT_SERVICE }, { token: FilterService, optional: true }, { token: ExpandedRowStore }, { token: RowFormFactory }, { token: EventsService }, { token: RowService }, { token: CellService }, { token: EmptyStateService }, { token: TreeService }, { token: RowContextStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: TableComponent, isStandalone: true, selector: "kles-table", host: { properties: { "class.loading": "this.isLoadingClass", "class.empty": "this.isEmptyClass" } }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "formElemRef", first: true, predicate: ["form"], descendants: true, static: true }, { propertyName: "dropLists", predicate: CdkDropList, descendants: true }, { propertyName: "drags", predicate: CdkDrag, descendants: true }], ngImport: i0, template: "<form\n    #form\n    cdkScrollable\n    [formGroup]=\"tableService.form\"\n    [style.scroll-padding-top.px]=\"keyboardGrid.navigation.enabled ? headerHeightPx() : null\"\n    [style.scroll-padding-bottom.px]=\"keyboardGrid.navigation.enabled && showFooter() ? footerHeightPx() : null\"\n>\n    @if (keyboardGrid.navigation.enabled && !isEmpty()) {\n        <button type=\"button\" class=\"kles-grid-entry\" (click)=\"keyboardGrid.navigation.focusActive()\">\n            {{ intl.keyboardNavigationEntryLabel }}\n        </button>\n    }\n    <table\n        mat-table\n        klesKeyboardGrid\n        #keyboardGrid=\"klesKeyboardGrid\"\n        [dataSource]=\"dataSource\"\n        matSort\n        [trackBy]=\"multiTemplateDataRows() ? identityTrackBy : tableService.trackBy\"\n        formArrayName=\"rows\"\n        cdkDropList\n        [id]=\"dragDropRowService.dropListId\"\n        [cdkDropListData]=\"tableService.klesForm\"\n        (cdkDropListDropped)=\"dragDropRowService.listDropped($event)\"\n        [cdkDropListDisabled]=\"!dragDropRowService.enable\"\n        [cdkDropListAutoScrollStep]=\"dragDropRowService.autoScrollStep\"\n        [cdkDropListSortPredicate]=\"dragDropRowService.sortPredicate\"\n        [cdkDropListConnectedTo]=\"dragDropRowService.connectedTo ?? []\"\n        [multiTemplateDataRows]=\"multiTemplateDataRows()\"\n    >\n        <colgroup>\n            @for (column of columns(); track column.columnDef) {\n                <col\n                    [attr.data-column-def]=\"column.columnDef\"\n                    [style.width]=\"column.width ?? null\"\n                    [style.minWidth]=\"column.minWidth ?? null\"\n                    [style.maxWidth]=\"column.maxWidth ?? null\"\n                />\n            }\n        </colgroup>\n\n        @for (column of columns(); track column.columnDef) {\n            <ng-container [cdkColumnDef]=\"column.columnDef\" [sticky]=\"column.sticky ?? false\" [stickyEnd]=\"column.stickyEnd ?? false\">\n                <th\n                    mat-header-cell\n                    *matHeaderCellDef\n                    cdkDrag\n                    cdkDragLockAxis=\"x\"\n                    [cdkDragData]=\"column\"\n                    [cdkDragDisabled]=\"columnDragDropService.isDragDisabled(column)\"\n                    [appResizableColumn]=\"column\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'header') ?? getStickyStartSeparator(column, 'header')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'header')\"\n                    [ngStyle]=\"\n                        $safeNavigationMigration(column.headerCell?.style?.ngStyle)\n                            | resolveNgStyle\n                                : $safeNavigationMigration(tableService.form.get(['header', column.columnDef])?.value)\n                                : $safeNavigationMigration(tableService.form.get(['header', column.columnDef])?.status)\n                                : tableService.form.controls.header.value\n                                : tableService.form.controls.header.status\n                    \"\n                >\n                    <div class=\"cell\">\n                        <kles-header\n                            [header]=\"(column | header)!\"\n                            [group]=\"tableService.form.controls.header\"\n                            [columnDragHandle]=\"columnDragDropService.enable && !columnDragDropService.isDragDisabled(column)\"\n                            [dragHandleSpacer]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n                        >\n                            <ng-container\n                                klesDynamicField\n                                [field]=\"(column | headerField)!\"\n                                [group]=\"tableService.form.controls.header\"\n                                [ui]=\"tableService.ui.states.header\"\n                            ></ng-container>\n                        </kles-header>\n                    </div>\n                </th>\n\n                <td\n                    mat-cell\n                    *cdkCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n                    [klesKeyboardCell]=\"row\"\n                    [columnDef]=\"column.columnDef\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'body') ?? getStickyStartSeparator(column, 'body')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'body')\"\n                    [ngStyle]=\"\n                        $safeNavigationMigration(column.cell?.style?.ngStyle)\n                            | resolveNgStyle: row.controls[column.columnDef].value : row.controls[column.columnDef].status : row.value : row.status\n                    \"\n                    (click)=\"cellService.onClick($event, row, dataIndex ?? index, column.columnDef)\"\n                    (dblclick)=\"cellService.onDoubleClick($event, row, dataIndex ?? index, column.columnDef)\"\n                    (contextmenu)=\"cellService.onContextMenu($event, row, dataIndex ?? index, column.columnDef)\"\n                >\n                    <div class=\"cell\" [style.--align]=\"column.align\">\n                        <kles-cell\n                            [group]=\"row\"\n                            [ui]=\"(row | uiField)!\"\n                            [column]=\"column\"\n                            [rowIndex]=\"dataIndex ?? index\"\n                            [dragHandle]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n                        >\n                            @if (column.columnDef === selectionService.key && selectionService.isLoading(row)) {\n                                <mat-spinner class=\"selection-row-spinner\" [diameter]=\"20\"></mat-spinner>\n                            } @else {\n                                <ng-container\n                                    klesDynamicField\n                                    [field]=\"(column | cellField)!\"\n                                    [group]=\"row\"\n                                    [ui]=\"(row | uiField)!\"\n                                    [context]=\"row | rowContext\"\n                                ></ng-container>\n                            }\n                        </kles-cell>\n                    </div>\n                </td>\n\n                <td\n                    mat-footer-cell\n                    *matFooterCellDef\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'footer') ?? getStickyStartSeparator(column, 'footer')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'footer')\"\n                    [ngStyle]=\"\n                        $safeNavigationMigration(column.footerCell?.style?.ngStyle)\n                            | resolveNgStyle\n                                : $safeNavigationMigration(tableService.form.get(['footer', column.columnDef])?.value)\n                                : $safeNavigationMigration(tableService.form.get(['footer', column.columnDef])?.status)\n                                : tableService.form.controls.footer.value\n                                : tableService.form.controls.footer.status\n                    \"\n                >\n                    @if (column.footerCell) {\n                        <ng-container\n                            klesDynamicField\n                            [field]=\"(column | footerField)!\"\n                            [group]=\"tableService.form.controls.footer\"\n                            [ui]=\"tableService.ui.states.footer\"\n                        >\n                        </ng-container>\n                    }\n                </td>\n            </ng-container>\n        }\n\n        <tr\n            mat-header-row\n            class=\"kles-column-drop-list\"\n            *matHeaderRowDef=\"displayedColumns(); sticky: true\"\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            [cdkDropListData]=\"columnDragDropService.visibleColumns()\"\n            [cdkDropListDisabled]=\"!columnDragDropService.enable\"\n            [cdkDropListAutoScrollDisabled]=\"true\"\n            [cdkDropListSortPredicate]=\"columnDragDropService.sortPredicate\"\n            (cdkDropListDropped)=\"columnDragDropService.listDropped($event)\"\n        ></tr>\n\n        <tr\n            mat-row\n            *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns()\"\n            [class.kles-row-selected]=\"isRowSelected(row)\"\n            [class.kles-row-pointer]=\"cursorService.isPointer(row)\"\n            cdkDrag\n            [cdkDragData]=\"row\"\n            [cdkDragDisabled]=\"dragDropRowService.isDragDisabled(row)\"\n            [ngStyle]=\"rowAppearance.rowStyle | resolveRowStyle: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n            [ngClass]=\"rowAppearance.rowClass | resolveRowClass: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n            (cdkDragStarted)=\"dragDropRowService.rowDragStarted(row, dataIndex ?? index)\"\n            (cdkDragMoved)=\"dragDropRowService.rowDragMoved(row, dataIndex ?? index)\"\n            (cdkDragEnded)=\"dragDropRowService.rowDragEnded(row, dataIndex ?? index)\"\n            (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n            (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n            (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n            (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n            (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n        >\n            @if (dragDropRowService.previewComponent; as previewComponent) {\n                <ng-template cdkDragPreview [matchSize]=\"dragDropRowService.previewMatchSize\">\n                    <div class=\"kles-row-drag-preview\">\n                        <ng-container\n                            *ngComponentOutlet=\"previewComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n                        ></ng-container>\n                    </div>\n                </ng-template>\n            }\n\n            @if (dragDropRowService.placeholderComponent; as placeholderComponent) {\n                <ng-template cdkDragPlaceholder>\n                    <tr class=\"kles-row-drag-placeholder\">\n                        <td [attr.colspan]=\"displayedColumns()?.length ?? 1\">\n                            <ng-container\n                                *ngComponentOutlet=\"placeholderComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n                            ></ng-container>\n                        </td>\n                    </tr>\n                </ng-template>\n            }\n        </tr>\n\n        @if (multiTemplateDataRows()) {\n            @for (extraRow of extraRows(); track extraRow) {\n                @for (extraColumn of extraRow.cells; track extraColumn.columnDef) {\n                    <ng-container [cdkColumnDef]=\"extraColumn.columnDef\">\n                        <td\n                            mat-cell\n                            class=\"kles-extra-row-cell\"\n                            *cdkCellDef=\"let row\"\n                            [attr.colspan]=\"(extraColumn.colspan ?? 1) | spanPipe: displayedColumns().length\"\n                            [attr.rowspan]=\"extraColumn.rowspan\"\n                            [ngStyle]=\"\n                                $safeNavigationMigration(extraColumn?.style?.ngStyle)\n                                    | resolveNgStyle\n                                        : row.controls[extraColumn.columnDef].value\n                                        : row.controls[extraColumn.columnDef].status\n                                        : row.value\n                                        : row.status\n                            \"\n                        >\n                            <div\n                                class=\"kles-extra-row-content\"\n                                [class.kles-extra-row-content--viewport]=\"extraRow.width === 'viewport'\"\n                                [style.width.px]=\"extraRow.width === 'viewport' ? viewportWidthPx() : null\"\n                                [style.--kles-table-horizontal-scroll-range.px]=\"extraRow.width === 'viewport' ? viewportScrollRangePx() : null\"\n                            >\n                                <ng-container\n                                    klesDynamicField\n                                    [field]=\"(extraColumn | extraCellField)!\"\n                                    [group]=\"row\"\n                                    [ui]=\"(row | uiField)!\"\n                                    [context]=\"row | rowContext\"\n                                ></ng-container>\n                            </div>\n                        </td>\n                    </ng-container>\n                }\n                <tr\n                    mat-row\n                    class=\"kles-extra-row\"\n                    *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: extraRow.displayedColumns; when: extraRow.when\"\n                    (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n                    (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n                    (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n                    (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n                    (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n                ></tr>\n            }\n        }\n\n        <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\" [style.display]=\"showFooter() ? '' : 'none'\"></tr>\n    </table>\n</form>\n\n@if (loadingService.loading()) {\n    <div class=\"table-overlay\" [style.--header-h.px]=\"headerHeightPx()\" [style.--scroll-h.px]=\"scrollHeightPx()\" [style.--footer-h.px]=\"footerHeightPx()\">\n        <mat-spinner></mat-spinner>\n    </div>\n}\n\n@if (emptyStateService.enabled() && !loadingService.loading() && isEmpty()) {\n    <div\n        class=\"table-empty-state-overlay\"\n        [style.--header-h.px]=\"headerHeightPx()\"\n        [style.--scroll-h.px]=\"scrollHeightPx()\"\n        [style.--footer-h.px]=\"footerHeightPx()\"\n    >\n        <div class=\"table-empty-state-content\">\n            @if (emptyStateService.component === emptyStateComponent) {\n                <kles-table-empty-state (refreshRequested)=\"refresh()\"></kles-table-empty-state>\n            } @else {\n                <ng-container *ngComponentOutlet=\"emptyStateService.component\"></ng-container>\n            }\n        </div>\n    </div>\n}\n", styles: [":host{--kles-table-divider-color: color-mix(in srgb, var(--mat-sys-outline-variant) 65%, transparent);--kles-table-divider-strong-color: var(--mat-sys-outline-variant);--kles-table-header-background: var(--mat-sys-surface-container);--kles-table-header-color: var(--mat-sys-on-surface);--kles-table-header-divider-color: var(--mat-sys-outline-variant);--kles-table-row-hover-background: color-mix(in srgb, var(--mat-sys-primary) 4%, var(--mat-sys-surface));--kles-table-row-selected-background: color-mix(in srgb, var(--mat-sys-primary) 7%, var(--mat-sys-surface));--kles-table-row-selected-hover-background: color-mix(in srgb, var(--mat-sys-primary) 10%, var(--mat-sys-surface));--kles-table-row-selected-indicator-color: var(--mat-sys-primary);overflow:auto;display:flex;flex-direction:column;position:relative;height:100%;--mat-form-field-filled-container-color: transparent;--mat-form-field-hover-state-layer-opacity: 0;--mat-form-field-focus-state-layer-opacity: 0;--mat-form-field-state-layer-color: transparent}:host(.loading),:host(.empty){min-height:280px}form{display:flex;flex-direction:column;flex-grow:1;position:relative;overflow:auto;scroll-timeline-name:--kles-table-horizontal-scroll;scroll-timeline-axis:inline}.kles-row-pointer{cursor:pointer}.kles-keyboard-cell:focus-visible{outline:2px solid var(--mat-sys-primary, Highlight);outline-offset:-2px}.kles-grid-entry{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.kles-grid-entry:focus-visible{top:4px;left:4px;z-index:10;width:auto;height:auto;padding:8px 12px;clip-path:none;background:var(--mat-sys-surface, white);color:var(--mat-sys-on-surface, black);outline:2px solid var(--mat-sys-primary, Highlight)}table{width:100%;flex-grow:1}th,td{text-wrap:pretty;white-space:normal;padding-top:2px;padding-bottom:2px;box-sizing:border-box}td{word-break:normal}:host td.kles-extra-row-cell{padding:0}.kles-extra-row-content--viewport{box-sizing:border-box;animation:kles-extra-row-horizontal-scroll 1ms linear both paused}@supports (animation-timeline: scroll()){.kles-extra-row-content--viewport{animation-play-state:running;animation-timeline:--kles-table-horizontal-scroll}}@keyframes kles-extra-row-horizontal-scroll{0%{transform:translate(0)}to{transform:translate(var(--kles-table-horizontal-scroll-range, 0px))}}th .cell,td .cell{display:flex;flex-direction:column;justify-content:var(--align, center)}th[appResizableColumn].resizable-column{position:relative}th[appResizableColumn]>.resize-handle{position:absolute;top:0;inset-inline-end:-7px;z-index:20;width:14px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;outline:none}th[appResizableColumn]>.resize-handle:before{content:\"\";position:absolute;top:15%;bottom:15%;inset-inline-start:6px;width:2px;border-radius:2px;background:var(--mat-sys-outline);opacity:0;transition:opacity .12s ease,background-color .12s ease,transform .12s ease}th[appResizableColumn].resizable-column:hover>.resize-handle:before,th[appResizableColumn]>.resize-handle:focus-visible:before{opacity:.65}th[appResizableColumn].column-resizing>.resize-handle:before{top:0;bottom:0;background:var(--mat-sys-primary);opacity:1;transform:scaleX(1.25)}th[appResizableColumn].column-resizing>.resize-handle:after{content:\"\";position:absolute;top:100%;inset-inline-start:6px;width:2px;height:100vh;background:color-mix(in srgb,var(--mat-sys-primary) 70%,transparent);pointer-events:none}th[appResizableColumn]>.resize-handle>.resize-width-label{position:absolute;top:calc(100% + 8px);inset-inline-start:50%;z-index:30;display:none;padding:3px 7px;color:var(--mat-sys-on-primary);font-size:11px;font-weight:600;line-height:16px;white-space:nowrap;background:var(--mat-sys-primary);border-radius:var(--mat-sys-corner-extra-small);box-shadow:var(--mat-sys-level2);transform:translate(-50%);pointer-events:none}th[appResizableColumn].column-resizing>.resize-handle>.resize-width-label{display:block}:host .column-resizing-cell{width:var(--kles-column-resize-width)!important;min-width:var(--kles-column-resize-width)!important;max-width:var(--kles-column-resize-width)!important;flex:0 0 var(--kles-column-resize-width)!important;background-image:linear-gradient(color-mix(in srgb,var(--mat-sys-primary) 5%,transparent),color-mix(in srgb,var(--mat-sys-primary) 5%,transparent))}.table-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));display:grid;place-items:center;background:color-mix(in srgb,var(--mat-sys-surface-container-highest) 75%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-outline-variant) 30%,transparent);z-index:500}:host .mat-mdc-row:not(.kles-extra-row){transition:background-color .12s ease}:host .mat-mdc-row:not(.kles-extra-row):hover{background:var(--kles-table-row-hover-background)}:host .mat-mdc-row:not(.kles-extra-row).kles-row-selected{background:var(--kles-table-row-selected-background);box-shadow:inset 3px 0 0 var(--kles-table-row-selected-indicator-color)}:host .mat-mdc-row:not(.kles-extra-row).kles-row-selected:hover{background:var(--kles-table-row-selected-hover-background)}:host tr.mat-mdc-row.cdk-drag-placeholder{opacity:1;background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))!important}:host tr.mat-mdc-row.cdk-drag-placeholder td{border-block:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td>*{visibility:hidden}:host tr.mat-mdc-row.cdk-drag-placeholder td:first-child{border-inline-start:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td:last-child{border-inline-end:2px dashed var(--mat-sys-primary)}:host .cdk-drop-list-dragging tr.mat-mdc-row:not(.cdk-drag-placeholder),:host tr.mat-mdc-row.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}:host .kles-column-drop-list.cdk-drop-list-dragging .mat-mdc-header-cell:not(.cdk-drag-placeholder),:host .mat-mdc-header-cell.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}:host .mat-mdc-header-cell.cdk-drag-placeholder{opacity:.25}.mat-mdc-header-cell.cdk-drag-preview{box-sizing:border-box;background:var(--kles-table-header-background);color:var(--kles-table-header-color);box-shadow:var(--mat-sys-level3)}.kles-row-drag-preview{overflow:hidden;border-radius:var(--mat-sys-corner-small);background:var(--mat-sys-surface-container);box-shadow:var(--mat-sys-level3)}.selection-row-spinner{margin-inline:auto}:host tr.kles-row-drag-placeholder td{padding:0;border:2px dashed var(--mat-sys-primary);background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))}:host .mat-mdc-table .mat-mdc-cell,:host .mat-mdc-table .mat-mdc-header-cell{border-bottom-color:var(--mat-sys-outline-variant)}:host .mat-mdc-table .mat-mdc-cell:last-child,:host .mat-mdc-table .mat-mdc-header-cell:last-child{border-right:none}:host tr.mat-mdc-footer-row td.mat-mdc-footer-cell{border-top:1px solid var(--kles-table-divider-strong-color)}:host tr.mat-mdc-row:last-of-type td.mat-mdc-cell{border-bottom:1px solid var(--kles-table-divider-color)}:host tr.mat-mdc-footer-row{font-weight:500}:host .mat-mdc-header-row,:host .mat-mdc-header-cell{background-color:var(--kles-table-header-background);color:var(--kles-table-header-color)}:host .mat-mdc-header-cell{border-bottom-color:var(--kles-table-header-divider-color)}.table-empty-state-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));z-index:400;overflow-x:hidden;overflow-y:auto;container-type:size;container-name:kles-empty-state;background:var(--mat-sys-surface);display:grid;place-items:center}.table-empty-state-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:100%;padding:16px;box-sizing:border-box}@container kles-empty-state (max-height: 220px){.table-empty-state-content{padding:8px}}.scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none;overflow-y:hidden}.scrollbar-hidden::-webkit-scrollbar{display:none;overflow-y:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i18.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i18.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i18.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i19.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i19.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i19.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i19.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i21.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i21.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i21.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i21.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i21.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i21.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i21.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i21.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i21.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i21.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i21.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i21.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: CdkTableModule }, { kind: "directive", type: i22.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i22.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i23.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "ngmodule", type: KlesMaterialDynamicformsModule }, { kind: "directive", type: i24.KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i25.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i25.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i25.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i25.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i26.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: ResizableColumnDirective, selector: "th[appResizableColumn]", inputs: ["appResizableColumn"] }, { kind: "component", type: KlesCellComponent, selector: "kles-cell", inputs: ["ui", "group", "column", "rowIndex", "dragHandle"] }, { kind: "component", type: KlesHeaderComponent, selector: "kles-header", inputs: ["header", "group", "dragHandleSpacer", "columnDragHandle"] }, { kind: "directive", type: KeyboardGridDirective, selector: "table[klesKeyboardGrid]", exportAs: ["klesKeyboardGrid"] }, { kind: "directive", type: KeyboardCellDirective, selector: "td[klesKeyboardCell]", inputs: ["klesKeyboardCell", "columnDef"] }, { kind: "component", type: KlesTableEmptyStateComponent, selector: "kles-table-empty-state", outputs: ["refreshRequested"] }, { kind: "pipe", type: HeaderFieldPipe, name: "headerField" }, { kind: "pipe", type: CellFieldPipe, name: "cellField" }, { kind: "pipe", type: UiFieldPipe, name: "uiField" }, { kind: "pipe", type: FooterFieldPipe, name: "footerField" }, { kind: "pipe", type: SpanPipe, name: "spanPipe" }, { kind: "pipe", type: ExtraCellFieldPipe, name: "extraCellField" }, { kind: "pipe", type: ResolveNgStylePipe, name: "resolveNgStyle" }, { kind: "pipe", type: HeaderPipe, name: "header" }, { kind: "pipe", type: RowContextPipe, name: "rowContext" }, { kind: "pipe", type: ResolveRowStylePipe, name: "resolveRowStyle" }, { kind: "pipe", type: ResolveRowClassPipe, name: "resolveRowClass" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: TableComponent, isStandalone: true, selector: "kles-table", host: { properties: { "class.loading": "this.isLoadingClass", "class.empty": "this.isEmptyClass" } }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "formElemRef", first: true, predicate: ["form"], descendants: true, static: true }, { propertyName: "dropLists", predicate: CdkDropList, descendants: true }, { propertyName: "drags", predicate: CdkDrag, descendants: true }], ngImport: i0, template: "<form\n    #form\n    cdkScrollable\n    [formGroup]=\"tableService.form\"\n    [style.scroll-padding-top.px]=\"keyboardGrid.navigation.enabled ? headerHeightPx() : null\"\n    [style.scroll-padding-bottom.px]=\"keyboardGrid.navigation.enabled && showFooter() ? footerHeightPx() : null\"\n>\n    @if (keyboardGrid.navigation.enabled && !isEmpty()) {\n        <button type=\"button\" class=\"kles-grid-entry\" (click)=\"keyboardGrid.navigation.focusActive()\">\n            {{ intl.keyboardNavigationEntryLabel }}\n        </button>\n    }\n    <table\n        mat-table\n        klesKeyboardGrid\n        #keyboardGrid=\"klesKeyboardGrid\"\n        [dataSource]=\"dataSource\"\n        matSort\n        [trackBy]=\"multiTemplateDataRows() ? identityTrackBy : tableService.trackBy\"\n        formArrayName=\"rows\"\n        cdkDropList\n        [id]=\"dragDropRowService.dropListId\"\n        [cdkDropListData]=\"tableService.klesForm\"\n        (cdkDropListDropped)=\"dragDropRowService.listDropped($event)\"\n        [cdkDropListDisabled]=\"!dragDropRowService.enable\"\n        [cdkDropListAutoScrollStep]=\"dragDropRowService.autoScrollStep\"\n        [cdkDropListSortPredicate]=\"dragDropRowService.sortPredicate\"\n        [cdkDropListConnectedTo]=\"dragDropRowService.connectedTo ?? []\"\n        [multiTemplateDataRows]=\"multiTemplateDataRows()\"\n    >\n        <colgroup>\n            @for (column of visibleColumns(); track column.columnDef) {\n                <col\n                    [attr.data-column-def]=\"column.columnDef\"\n                    [style.width]=\"column.width ?? null\"\n                    [style.minWidth]=\"column.minWidth ?? null\"\n                    [style.maxWidth]=\"column.maxWidth ?? null\"\n                />\n            }\n        </colgroup>\n\n        @for (column of columns(); track column.columnDef) {\n            <ng-container [cdkColumnDef]=\"column.columnDef\" [sticky]=\"column.sticky ?? false\" [stickyEnd]=\"column.stickyEnd ?? false\">\n                <th\n                    mat-header-cell\n                    *matHeaderCellDef\n                    cdkDrag\n                    cdkDragLockAxis=\"x\"\n                    [cdkDragData]=\"column\"\n                    [cdkDragDisabled]=\"columnDragDropService.isDragDisabled(column)\"\n                    [appResizableColumn]=\"column\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'header') ?? getStickyStartSeparator(column, 'header')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'header')\"\n                    [ngStyle]=\"\n                        $safeNavigationMigration(column.headerCell?.style?.ngStyle)\n                            | resolveNgStyle\n                                : $safeNavigationMigration(tableService.form.get(['header', column.columnDef])?.value)\n                                : $safeNavigationMigration(tableService.form.get(['header', column.columnDef])?.status)\n                                : tableService.form.controls.header.value\n                                : tableService.form.controls.header.status\n                    \"\n                >\n                    <div class=\"cell\">\n                        <kles-header\n                            [header]=\"(column | header)!\"\n                            [group]=\"tableService.form.controls.header\"\n                            [columnDragHandle]=\"columnDragDropService.enable && !columnDragDropService.isDragDisabled(column)\"\n                            [dragHandleSpacer]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n                        >\n                            <ng-container\n                                klesDynamicField\n                                [field]=\"(column | headerField)!\"\n                                [group]=\"tableService.form.controls.header\"\n                                [ui]=\"tableService.ui.states.header\"\n                            ></ng-container>\n                        </kles-header>\n                    </div>\n                </th>\n\n                <td\n                    mat-cell\n                    *cdkCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n                    [klesKeyboardCell]=\"row\"\n                    [columnDef]=\"column.columnDef\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'body') ?? getStickyStartSeparator(column, 'body')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'body')\"\n                    [ngStyle]=\"\n                        $safeNavigationMigration(column.cell?.style?.ngStyle)\n                            | resolveNgStyle: row.controls[column.columnDef].value : row.controls[column.columnDef].status : row.value : row.status\n                    \"\n                    (click)=\"cellService.onClick($event, row, dataIndex ?? index, column.columnDef)\"\n                    (dblclick)=\"cellService.onDoubleClick($event, row, dataIndex ?? index, column.columnDef)\"\n                    (contextmenu)=\"cellService.onContextMenu($event, row, dataIndex ?? index, column.columnDef)\"\n                >\n                    <div class=\"cell\" [style.--align]=\"column.align\">\n                        <kles-cell\n                            [group]=\"row\"\n                            [ui]=\"(row | uiField)!\"\n                            [column]=\"column\"\n                            [rowIndex]=\"dataIndex ?? index\"\n                            [dragHandle]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n                        >\n                            @if (column.columnDef === selectionService.key && selectionService.isLoading(row)) {\n                                <mat-spinner class=\"selection-row-spinner\" [diameter]=\"20\"></mat-spinner>\n                            } @else {\n                                <ng-container\n                                    klesDynamicField\n                                    [field]=\"(column | cellField)!\"\n                                    [group]=\"row\"\n                                    [ui]=\"(row | uiField)!\"\n                                    [context]=\"row | rowContext\"\n                                ></ng-container>\n                            }\n                        </kles-cell>\n                    </div>\n                </td>\n\n                <td\n                    mat-footer-cell\n                    *matFooterCellDef\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'footer') ?? getStickyStartSeparator(column, 'footer')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'footer')\"\n                    [ngStyle]=\"\n                        $safeNavigationMigration(column.footerCell?.style?.ngStyle)\n                            | resolveNgStyle\n                                : $safeNavigationMigration(tableService.form.get(['footer', column.columnDef])?.value)\n                                : $safeNavigationMigration(tableService.form.get(['footer', column.columnDef])?.status)\n                                : tableService.form.controls.footer.value\n                                : tableService.form.controls.footer.status\n                    \"\n                >\n                    @if (column.footerCell) {\n                        <ng-container\n                            klesDynamicField\n                            [field]=\"(column | footerField)!\"\n                            [group]=\"tableService.form.controls.footer\"\n                            [ui]=\"tableService.ui.states.footer\"\n                        >\n                        </ng-container>\n                    }\n                </td>\n            </ng-container>\n        }\n\n        <tr\n            mat-header-row\n            class=\"kles-column-drop-list\"\n            *matHeaderRowDef=\"displayedColumns(); sticky: true\"\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            [cdkDropListData]=\"columnDragDropService.visibleColumns()\"\n            [cdkDropListDisabled]=\"!columnDragDropService.enable\"\n            [cdkDropListAutoScrollDisabled]=\"true\"\n            [cdkDropListSortPredicate]=\"columnDragDropService.sortPredicate\"\n            (cdkDropListDropped)=\"columnDragDropService.listDropped($event)\"\n        ></tr>\n\n        <tr\n            mat-row\n            *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns()\"\n            [class.kles-row-selected]=\"isRowSelected(row)\"\n            [class.kles-row-pointer]=\"cursorService.isPointer(row)\"\n            cdkDrag\n            [cdkDragData]=\"row\"\n            [cdkDragDisabled]=\"dragDropRowService.isDragDisabled(row)\"\n            [ngStyle]=\"rowAppearance.rowStyle | resolveRowStyle: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n            [ngClass]=\"rowAppearance.rowClass | resolveRowClass: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n            (cdkDragStarted)=\"dragDropRowService.rowDragStarted(row, dataIndex ?? index)\"\n            (cdkDragMoved)=\"dragDropRowService.rowDragMoved(row, dataIndex ?? index)\"\n            (cdkDragEnded)=\"dragDropRowService.rowDragEnded(row, dataIndex ?? index)\"\n            (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n            (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n            (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n            (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n            (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n        >\n            @if (dragDropRowService.previewComponent; as previewComponent) {\n                <ng-template cdkDragPreview [matchSize]=\"dragDropRowService.previewMatchSize\">\n                    <div class=\"kles-row-drag-preview\">\n                        <ng-container\n                            *ngComponentOutlet=\"previewComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n                        ></ng-container>\n                    </div>\n                </ng-template>\n            }\n\n            @if (dragDropRowService.placeholderComponent; as placeholderComponent) {\n                <ng-template cdkDragPlaceholder>\n                    <tr class=\"kles-row-drag-placeholder\">\n                        <td [attr.colspan]=\"displayedColumns()?.length ?? 1\">\n                            <ng-container\n                                *ngComponentOutlet=\"placeholderComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n                            ></ng-container>\n                        </td>\n                    </tr>\n                </ng-template>\n            }\n        </tr>\n\n        @if (multiTemplateDataRows()) {\n            @for (extraRow of extraRows(); track extraRow) {\n                @for (extraColumn of extraRow.cells; track extraColumn.columnDef) {\n                    <ng-container [cdkColumnDef]=\"extraColumn.columnDef\">\n                        <td\n                            mat-cell\n                            class=\"kles-extra-row-cell\"\n                            *cdkCellDef=\"let row\"\n                            [attr.colspan]=\"(extraColumn.colspan ?? 1) | spanPipe: displayedColumns().length\"\n                            [attr.rowspan]=\"extraColumn.rowspan\"\n                            [ngStyle]=\"\n                                $safeNavigationMigration(extraColumn?.style?.ngStyle)\n                                    | resolveNgStyle\n                                        : row.controls[extraColumn.columnDef].value\n                                        : row.controls[extraColumn.columnDef].status\n                                        : row.value\n                                        : row.status\n                            \"\n                        >\n                            <div\n                                class=\"kles-extra-row-content\"\n                                [class.kles-extra-row-content--viewport]=\"extraRow.width === 'viewport'\"\n                                [style.width.px]=\"extraRow.width === 'viewport' ? viewportWidthPx() : null\"\n                                [style.--kles-table-horizontal-scroll-range.px]=\"extraRow.width === 'viewport' ? viewportScrollRangePx() : null\"\n                            >\n                                <ng-container\n                                    klesDynamicField\n                                    [field]=\"(extraColumn | extraCellField)!\"\n                                    [group]=\"row\"\n                                    [ui]=\"(row | uiField)!\"\n                                    [context]=\"row | rowContext\"\n                                ></ng-container>\n                            </div>\n                        </td>\n                    </ng-container>\n                }\n                <tr\n                    mat-row\n                    class=\"kles-extra-row\"\n                    *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: extraRow.displayedColumns; when: extraRow.when\"\n                    (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n                    (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n                    (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n                    (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n                    (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n                ></tr>\n            }\n        }\n\n        <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\" [style.display]=\"showFooter() ? '' : 'none'\"></tr>\n    </table>\n</form>\n\n@if (loadingService.loading()) {\n    <div class=\"table-overlay\" [style.--header-h.px]=\"headerHeightPx()\" [style.--scroll-h.px]=\"scrollHeightPx()\" [style.--footer-h.px]=\"footerHeightPx()\">\n        <mat-spinner></mat-spinner>\n    </div>\n}\n\n@if (emptyStateService.enabled() && !loadingService.loading() && isEmpty()) {\n    <div\n        class=\"table-empty-state-overlay\"\n        [style.--header-h.px]=\"headerHeightPx()\"\n        [style.--scroll-h.px]=\"scrollHeightPx()\"\n        [style.--footer-h.px]=\"footerHeightPx()\"\n    >\n        <div class=\"table-empty-state-content\">\n            @if (emptyStateService.component === emptyStateComponent) {\n                <kles-table-empty-state (refreshRequested)=\"refresh()\"></kles-table-empty-state>\n            } @else {\n                <ng-container *ngComponentOutlet=\"emptyStateService.component\"></ng-container>\n            }\n        </div>\n    </div>\n}\n", styles: [":host{--kles-table-divider-color: color-mix(in srgb, var(--mat-sys-outline-variant) 65%, transparent);--kles-table-divider-strong-color: var(--mat-sys-outline-variant);--kles-table-header-background: var(--mat-sys-surface-container);--kles-table-header-color: var(--mat-sys-on-surface);--kles-table-header-divider-color: var(--mat-sys-outline-variant);--kles-table-row-hover-background: color-mix(in srgb, var(--mat-sys-primary) 4%, var(--mat-sys-surface));--kles-table-row-selected-background: color-mix(in srgb, var(--mat-sys-primary) 7%, var(--mat-sys-surface));--kles-table-row-selected-hover-background: color-mix(in srgb, var(--mat-sys-primary) 10%, var(--mat-sys-surface));--kles-table-row-selected-indicator-color: var(--mat-sys-primary);overflow:auto;display:flex;flex-direction:column;position:relative;height:100%;--mat-form-field-filled-container-color: transparent;--mat-form-field-hover-state-layer-opacity: 0;--mat-form-field-focus-state-layer-opacity: 0;--mat-form-field-state-layer-color: transparent}:host(.loading),:host(.empty){min-height:280px}form{display:flex;flex-direction:column;flex-grow:1;position:relative;overflow:auto;scroll-timeline-name:--kles-table-horizontal-scroll;scroll-timeline-axis:inline}.kles-row-pointer{cursor:pointer}.kles-keyboard-cell:focus-visible{outline:2px solid var(--mat-sys-primary, Highlight);outline-offset:-2px}.kles-grid-entry{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.kles-grid-entry:focus-visible{top:4px;left:4px;z-index:10;width:auto;height:auto;padding:8px 12px;clip-path:none;background:var(--mat-sys-surface, white);color:var(--mat-sys-on-surface, black);outline:2px solid var(--mat-sys-primary, Highlight)}table{width:100%;flex-grow:1}th,td{text-wrap:pretty;white-space:normal;padding-top:2px;padding-bottom:2px;box-sizing:border-box}td{word-break:normal}:host td.kles-extra-row-cell{padding:0}.kles-extra-row-content--viewport{box-sizing:border-box;animation:kles-extra-row-horizontal-scroll 1ms linear both paused}@supports (animation-timeline: scroll()){.kles-extra-row-content--viewport{animation-play-state:running;animation-timeline:--kles-table-horizontal-scroll}}@keyframes kles-extra-row-horizontal-scroll{0%{transform:translate(0)}to{transform:translate(var(--kles-table-horizontal-scroll-range, 0px))}}th .cell,td .cell{display:flex;flex-direction:column;justify-content:var(--align, center)}th[appResizableColumn].resizable-column{position:relative}th[appResizableColumn]>.resize-handle{position:absolute;top:0;inset-inline-end:-7px;z-index:20;width:14px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;outline:none}th[appResizableColumn]>.resize-handle:before{content:\"\";position:absolute;top:15%;bottom:15%;inset-inline-start:6px;width:2px;border-radius:2px;background:var(--mat-sys-outline);opacity:0;transition:opacity .12s ease,background-color .12s ease,transform .12s ease}th[appResizableColumn].resizable-column:hover>.resize-handle:before,th[appResizableColumn]>.resize-handle:focus-visible:before{opacity:.65}th[appResizableColumn].column-resizing>.resize-handle:before{top:0;bottom:0;background:var(--mat-sys-primary);opacity:1;transform:scaleX(1.25)}th[appResizableColumn].column-resizing>.resize-handle:after{content:\"\";position:absolute;top:100%;inset-inline-start:6px;width:2px;height:100vh;background:color-mix(in srgb,var(--mat-sys-primary) 70%,transparent);pointer-events:none}th[appResizableColumn]>.resize-handle>.resize-width-label{position:absolute;top:calc(100% + 8px);inset-inline-start:50%;z-index:30;display:none;padding:3px 7px;color:var(--mat-sys-on-primary);font-size:11px;font-weight:600;line-height:16px;white-space:nowrap;background:var(--mat-sys-primary);border-radius:var(--mat-sys-corner-extra-small);box-shadow:var(--mat-sys-level2);transform:translate(-50%);pointer-events:none}th[appResizableColumn].column-resizing>.resize-handle>.resize-width-label{display:block}:host .column-resizing-cell{width:var(--kles-column-resize-width)!important;min-width:var(--kles-column-resize-width)!important;max-width:var(--kles-column-resize-width)!important;flex:0 0 var(--kles-column-resize-width)!important;background-image:linear-gradient(color-mix(in srgb,var(--mat-sys-primary) 5%,transparent),color-mix(in srgb,var(--mat-sys-primary) 5%,transparent))}.table-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));display:grid;place-items:center;background:color-mix(in srgb,var(--mat-sys-surface-container-highest) 75%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-outline-variant) 30%,transparent);z-index:500}:host .mat-mdc-row:not(.kles-extra-row){transition:background-color .12s ease}:host .mat-mdc-row:not(.kles-extra-row):hover{background:var(--kles-table-row-hover-background)}:host .mat-mdc-row:not(.kles-extra-row).kles-row-selected{background:var(--kles-table-row-selected-background);box-shadow:inset 3px 0 0 var(--kles-table-row-selected-indicator-color)}:host .mat-mdc-row:not(.kles-extra-row).kles-row-selected:hover{background:var(--kles-table-row-selected-hover-background)}:host tr.mat-mdc-row.cdk-drag-placeholder{opacity:1;background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))!important}:host tr.mat-mdc-row.cdk-drag-placeholder td{border-block:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td>*{visibility:hidden}:host tr.mat-mdc-row.cdk-drag-placeholder td:first-child{border-inline-start:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td:last-child{border-inline-end:2px dashed var(--mat-sys-primary)}:host .cdk-drop-list-dragging tr.mat-mdc-row:not(.cdk-drag-placeholder),:host tr.mat-mdc-row.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}:host .kles-column-drop-list.cdk-drop-list-dragging .mat-mdc-header-cell:not(.cdk-drag-placeholder),:host .mat-mdc-header-cell.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}:host .mat-mdc-header-cell.cdk-drag-placeholder{opacity:.25}.mat-mdc-header-cell.cdk-drag-preview{box-sizing:border-box;background:var(--kles-table-header-background);color:var(--kles-table-header-color);box-shadow:var(--mat-sys-level3)}.kles-row-drag-preview{overflow:hidden;border-radius:var(--mat-sys-corner-small);background:var(--mat-sys-surface-container);box-shadow:var(--mat-sys-level3)}.selection-row-spinner{margin-inline:auto}:host tr.kles-row-drag-placeholder td{padding:0;border:2px dashed var(--mat-sys-primary);background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))}:host .mat-mdc-table .mat-mdc-cell,:host .mat-mdc-table .mat-mdc-header-cell{border-bottom-color:var(--mat-sys-outline-variant)}:host .mat-mdc-table .mat-mdc-cell:last-child,:host .mat-mdc-table .mat-mdc-header-cell:last-child{border-right:none}:host tr.mat-mdc-footer-row td.mat-mdc-footer-cell{border-top:1px solid var(--kles-table-divider-strong-color)}:host tr.mat-mdc-row:last-of-type td.mat-mdc-cell{border-bottom:1px solid var(--kles-table-divider-color)}:host tr.mat-mdc-footer-row{font-weight:500}:host .mat-mdc-header-row,:host .mat-mdc-header-cell{background-color:var(--kles-table-header-background);color:var(--kles-table-header-color)}:host .mat-mdc-header-cell{border-bottom-color:var(--kles-table-header-divider-color)}.table-empty-state-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));z-index:400;overflow-x:hidden;overflow-y:auto;container-type:size;container-name:kles-empty-state;background:var(--mat-sys-surface);display:grid;place-items:center}.table-empty-state-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:100%;padding:16px;box-sizing:border-box}@container kles-empty-state (max-height: 220px){.table-empty-state-content{padding:8px}}.scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none;overflow-y:hidden}.scrollbar-hidden::-webkit-scrollbar{display:none;overflow-y:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i18.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i18.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i18.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i19.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i19.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i19.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i19.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i21.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i21.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i21.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i21.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i21.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i21.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i21.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i21.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i21.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i21.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i21.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i21.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: CdkTableModule }, { kind: "directive", type: i22.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i22.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i23.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "ngmodule", type: KlesMaterialDynamicformsModule }, { kind: "directive", type: i24.KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i25.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i25.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i25.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i25.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i26.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: ResizableColumnDirective, selector: "th[appResizableColumn]", inputs: ["appResizableColumn"] }, { kind: "component", type: KlesCellComponent, selector: "kles-cell", inputs: ["ui", "group", "column", "rowIndex", "dragHandle"] }, { kind: "component", type: KlesHeaderComponent, selector: "kles-header", inputs: ["header", "group", "dragHandleSpacer", "columnDragHandle"] }, { kind: "directive", type: KeyboardGridDirective, selector: "table[klesKeyboardGrid]", exportAs: ["klesKeyboardGrid"] }, { kind: "directive", type: KeyboardCellDirective, selector: "td[klesKeyboardCell]", inputs: ["klesKeyboardCell", "columnDef"] }, { kind: "component", type: KlesTableEmptyStateComponent, selector: "kles-table-empty-state", outputs: ["refreshRequested"] }, { kind: "pipe", type: HeaderFieldPipe, name: "headerField" }, { kind: "pipe", type: CellFieldPipe, name: "cellField" }, { kind: "pipe", type: UiFieldPipe, name: "uiField" }, { kind: "pipe", type: FooterFieldPipe, name: "footerField" }, { kind: "pipe", type: SpanPipe, name: "spanPipe" }, { kind: "pipe", type: ExtraCellFieldPipe, name: "extraCellField" }, { kind: "pipe", type: ResolveNgStylePipe, name: "resolveNgStyle" }, { kind: "pipe", type: HeaderPipe, name: "header" }, { kind: "pipe", type: RowContextPipe, name: "rowContext" }, { kind: "pipe", type: ResolveRowStylePipe, name: "resolveRowStyle" }, { kind: "pipe", type: ResolveRowClassPipe, name: "resolveRowClass" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -3519,7 +3541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         KeyboardGridDirective,
                         KeyboardCellDirective,
                         KlesTableEmptyStateComponent,
-                    ], template: "<form\n    #form\n    cdkScrollable\n    [formGroup]=\"tableService.form\"\n    [style.scroll-padding-top.px]=\"keyboardGrid.navigation.enabled ? headerHeightPx() : null\"\n    [style.scroll-padding-bottom.px]=\"keyboardGrid.navigation.enabled && showFooter() ? footerHeightPx() : null\"\n>\n    @if (keyboardGrid.navigation.enabled && !isEmpty()) {\n        <button type=\"button\" class=\"kles-grid-entry\" (click)=\"keyboardGrid.navigation.focusActive()\">\n            {{ intl.keyboardNavigationEntryLabel }}\n        </button>\n    }\n    <table\n        mat-table\n        klesKeyboardGrid\n        #keyboardGrid=\"klesKeyboardGrid\"\n        [dataSource]=\"dataSource\"\n        matSort\n        [trackBy]=\"multiTemplateDataRows() ? identityTrackBy : tableService.trackBy\"\n        formArrayName=\"rows\"\n        cdkDropList\n        [id]=\"dragDropRowService.dropListId\"\n        [cdkDropListData]=\"tableService.klesForm\"\n        (cdkDropListDropped)=\"dragDropRowService.listDropped($event)\"\n        [cdkDropListDisabled]=\"!dragDropRowService.enable\"\n        [cdkDropListAutoScrollStep]=\"dragDropRowService.autoScrollStep\"\n        [cdkDropListSortPredicate]=\"dragDropRowService.sortPredicate\"\n        [cdkDropListConnectedTo]=\"dragDropRowService.connectedTo ?? []\"\n        [multiTemplateDataRows]=\"multiTemplateDataRows()\"\n    >\n        <colgroup>\n            @for (column of columns(); track column.columnDef) {\n                <col\n                    [attr.data-column-def]=\"column.columnDef\"\n                    [style.width]=\"column.width ?? null\"\n                    [style.minWidth]=\"column.minWidth ?? null\"\n                    [style.maxWidth]=\"column.maxWidth ?? null\"\n                />\n            }\n        </colgroup>\n\n        @for (column of columns(); track column.columnDef) {\n            <ng-container [cdkColumnDef]=\"column.columnDef\" [sticky]=\"column.sticky ?? false\" [stickyEnd]=\"column.stickyEnd ?? false\">\n                <th\n                    mat-header-cell\n                    *matHeaderCellDef\n                    cdkDrag\n                    cdkDragLockAxis=\"x\"\n                    [cdkDragData]=\"column\"\n                    [cdkDragDisabled]=\"columnDragDropService.isDragDisabled(column)\"\n                    [appResizableColumn]=\"column\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'header') ?? getStickyStartSeparator(column, 'header')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'header')\"\n                    [ngStyle]=\"\n                        $safeNavigationMigration(column.headerCell?.style?.ngStyle)\n                            | resolveNgStyle\n                                : $safeNavigationMigration(tableService.form.get(['header', column.columnDef])?.value)\n                                : $safeNavigationMigration(tableService.form.get(['header', column.columnDef])?.status)\n                                : tableService.form.controls.header.value\n                                : tableService.form.controls.header.status\n                    \"\n                >\n                    <div class=\"cell\">\n                        <kles-header\n                            [header]=\"(column | header)!\"\n                            [group]=\"tableService.form.controls.header\"\n                            [columnDragHandle]=\"columnDragDropService.enable && !columnDragDropService.isDragDisabled(column)\"\n                            [dragHandleSpacer]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n                        >\n                            <ng-container\n                                klesDynamicField\n                                [field]=\"(column | headerField)!\"\n                                [group]=\"tableService.form.controls.header\"\n                                [ui]=\"tableService.ui.states.header\"\n                            ></ng-container>\n                        </kles-header>\n                    </div>\n                </th>\n\n                <td\n                    mat-cell\n                    *cdkCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n                    [klesKeyboardCell]=\"row\"\n                    [columnDef]=\"column.columnDef\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'body') ?? getStickyStartSeparator(column, 'body')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'body')\"\n                    [ngStyle]=\"\n                        $safeNavigationMigration(column.cell?.style?.ngStyle)\n                            | resolveNgStyle: row.controls[column.columnDef].value : row.controls[column.columnDef].status : row.value : row.status\n                    \"\n                    (click)=\"cellService.onClick($event, row, dataIndex ?? index, column.columnDef)\"\n                    (dblclick)=\"cellService.onDoubleClick($event, row, dataIndex ?? index, column.columnDef)\"\n                    (contextmenu)=\"cellService.onContextMenu($event, row, dataIndex ?? index, column.columnDef)\"\n                >\n                    <div class=\"cell\" [style.--align]=\"column.align\">\n                        <kles-cell\n                            [group]=\"row\"\n                            [ui]=\"(row | uiField)!\"\n                            [column]=\"column\"\n                            [rowIndex]=\"dataIndex ?? index\"\n                            [dragHandle]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n                        >\n                            @if (column.columnDef === selectionService.key && selectionService.isLoading(row)) {\n                                <mat-spinner class=\"selection-row-spinner\" [diameter]=\"20\"></mat-spinner>\n                            } @else {\n                                <ng-container\n                                    klesDynamicField\n                                    [field]=\"(column | cellField)!\"\n                                    [group]=\"row\"\n                                    [ui]=\"(row | uiField)!\"\n                                    [context]=\"row | rowContext\"\n                                ></ng-container>\n                            }\n                        </kles-cell>\n                    </div>\n                </td>\n\n                <td\n                    mat-footer-cell\n                    *matFooterCellDef\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'footer') ?? getStickyStartSeparator(column, 'footer')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'footer')\"\n                    [ngStyle]=\"\n                        $safeNavigationMigration(column.footerCell?.style?.ngStyle)\n                            | resolveNgStyle\n                                : $safeNavigationMigration(tableService.form.get(['footer', column.columnDef])?.value)\n                                : $safeNavigationMigration(tableService.form.get(['footer', column.columnDef])?.status)\n                                : tableService.form.controls.footer.value\n                                : tableService.form.controls.footer.status\n                    \"\n                >\n                    @if (column.footerCell) {\n                        <ng-container\n                            klesDynamicField\n                            [field]=\"(column | footerField)!\"\n                            [group]=\"tableService.form.controls.footer\"\n                            [ui]=\"tableService.ui.states.footer\"\n                        >\n                        </ng-container>\n                    }\n                </td>\n            </ng-container>\n        }\n\n        <tr\n            mat-header-row\n            class=\"kles-column-drop-list\"\n            *matHeaderRowDef=\"displayedColumns(); sticky: true\"\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            [cdkDropListData]=\"columnDragDropService.visibleColumns()\"\n            [cdkDropListDisabled]=\"!columnDragDropService.enable\"\n            [cdkDropListAutoScrollDisabled]=\"true\"\n            [cdkDropListSortPredicate]=\"columnDragDropService.sortPredicate\"\n            (cdkDropListDropped)=\"columnDragDropService.listDropped($event)\"\n        ></tr>\n\n        <tr\n            mat-row\n            *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns()\"\n            [class.kles-row-selected]=\"isRowSelected(row)\"\n            [class.kles-row-pointer]=\"cursorService.isPointer(row)\"\n            cdkDrag\n            [cdkDragData]=\"row\"\n            [cdkDragDisabled]=\"dragDropRowService.isDragDisabled(row)\"\n            [ngStyle]=\"rowAppearance.rowStyle | resolveRowStyle: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n            [ngClass]=\"rowAppearance.rowClass | resolveRowClass: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n            (cdkDragStarted)=\"dragDropRowService.rowDragStarted(row, dataIndex ?? index)\"\n            (cdkDragMoved)=\"dragDropRowService.rowDragMoved(row, dataIndex ?? index)\"\n            (cdkDragEnded)=\"dragDropRowService.rowDragEnded(row, dataIndex ?? index)\"\n            (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n            (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n            (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n            (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n            (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n        >\n            @if (dragDropRowService.previewComponent; as previewComponent) {\n                <ng-template cdkDragPreview [matchSize]=\"dragDropRowService.previewMatchSize\">\n                    <div class=\"kles-row-drag-preview\">\n                        <ng-container\n                            *ngComponentOutlet=\"previewComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n                        ></ng-container>\n                    </div>\n                </ng-template>\n            }\n\n            @if (dragDropRowService.placeholderComponent; as placeholderComponent) {\n                <ng-template cdkDragPlaceholder>\n                    <tr class=\"kles-row-drag-placeholder\">\n                        <td [attr.colspan]=\"displayedColumns()?.length ?? 1\">\n                            <ng-container\n                                *ngComponentOutlet=\"placeholderComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n                            ></ng-container>\n                        </td>\n                    </tr>\n                </ng-template>\n            }\n        </tr>\n\n        @if (multiTemplateDataRows()) {\n            @for (extraRow of extraRows(); track extraRow) {\n                @for (extraColumn of extraRow.cells; track extraColumn.columnDef) {\n                    <ng-container [cdkColumnDef]=\"extraColumn.columnDef\">\n                        <td\n                            mat-cell\n                            class=\"kles-extra-row-cell\"\n                            *cdkCellDef=\"let row\"\n                            [attr.colspan]=\"(extraColumn.colspan ?? 1) | spanPipe: displayedColumns().length\"\n                            [attr.rowspan]=\"extraColumn.rowspan\"\n                            [ngStyle]=\"\n                                $safeNavigationMigration(extraColumn?.style?.ngStyle)\n                                    | resolveNgStyle\n                                        : row.controls[extraColumn.columnDef].value\n                                        : row.controls[extraColumn.columnDef].status\n                                        : row.value\n                                        : row.status\n                            \"\n                        >\n                            <div\n                                class=\"kles-extra-row-content\"\n                                [class.kles-extra-row-content--viewport]=\"extraRow.width === 'viewport'\"\n                                [style.width.px]=\"extraRow.width === 'viewport' ? viewportWidthPx() : null\"\n                                [style.--kles-table-horizontal-scroll-range.px]=\"extraRow.width === 'viewport' ? viewportScrollRangePx() : null\"\n                            >\n                                <ng-container\n                                    klesDynamicField\n                                    [field]=\"(extraColumn | extraCellField)!\"\n                                    [group]=\"row\"\n                                    [ui]=\"(row | uiField)!\"\n                                    [context]=\"row | rowContext\"\n                                ></ng-container>\n                            </div>\n                        </td>\n                    </ng-container>\n                }\n                <tr\n                    mat-row\n                    class=\"kles-extra-row\"\n                    *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: extraRow.displayedColumns; when: extraRow.when\"\n                    (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n                    (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n                    (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n                    (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n                    (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n                ></tr>\n            }\n        }\n\n        <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\" [style.display]=\"showFooter() ? '' : 'none'\"></tr>\n    </table>\n</form>\n\n@if (loadingService.loading()) {\n    <div class=\"table-overlay\" [style.--header-h.px]=\"headerHeightPx()\" [style.--scroll-h.px]=\"scrollHeightPx()\" [style.--footer-h.px]=\"footerHeightPx()\">\n        <mat-spinner></mat-spinner>\n    </div>\n}\n\n@if (emptyStateService.enabled() && !loadingService.loading() && isEmpty()) {\n    <div\n        class=\"table-empty-state-overlay\"\n        [style.--header-h.px]=\"headerHeightPx()\"\n        [style.--scroll-h.px]=\"scrollHeightPx()\"\n        [style.--footer-h.px]=\"footerHeightPx()\"\n    >\n        <div class=\"table-empty-state-content\">\n            @if (emptyStateService.component === emptyStateComponent) {\n                <kles-table-empty-state (refreshRequested)=\"refresh()\"></kles-table-empty-state>\n            } @else {\n                <ng-container *ngComponentOutlet=\"emptyStateService.component\"></ng-container>\n            }\n        </div>\n    </div>\n}\n", styles: [":host{--kles-table-divider-color: color-mix(in srgb, var(--mat-sys-outline-variant) 65%, transparent);--kles-table-divider-strong-color: var(--mat-sys-outline-variant);--kles-table-header-background: var(--mat-sys-surface-container);--kles-table-header-color: var(--mat-sys-on-surface);--kles-table-header-divider-color: var(--mat-sys-outline-variant);--kles-table-row-hover-background: color-mix(in srgb, var(--mat-sys-primary) 4%, var(--mat-sys-surface));--kles-table-row-selected-background: color-mix(in srgb, var(--mat-sys-primary) 7%, var(--mat-sys-surface));--kles-table-row-selected-hover-background: color-mix(in srgb, var(--mat-sys-primary) 10%, var(--mat-sys-surface));--kles-table-row-selected-indicator-color: var(--mat-sys-primary);overflow:auto;display:flex;flex-direction:column;position:relative;height:100%;--mat-form-field-filled-container-color: transparent;--mat-form-field-hover-state-layer-opacity: 0;--mat-form-field-focus-state-layer-opacity: 0;--mat-form-field-state-layer-color: transparent}:host(.loading),:host(.empty){min-height:280px}form{display:flex;flex-direction:column;flex-grow:1;position:relative;overflow:auto;scroll-timeline-name:--kles-table-horizontal-scroll;scroll-timeline-axis:inline}.kles-row-pointer{cursor:pointer}.kles-keyboard-cell:focus-visible{outline:2px solid var(--mat-sys-primary, Highlight);outline-offset:-2px}.kles-grid-entry{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.kles-grid-entry:focus-visible{top:4px;left:4px;z-index:10;width:auto;height:auto;padding:8px 12px;clip-path:none;background:var(--mat-sys-surface, white);color:var(--mat-sys-on-surface, black);outline:2px solid var(--mat-sys-primary, Highlight)}table{width:100%;flex-grow:1}th,td{text-wrap:pretty;white-space:normal;padding-top:2px;padding-bottom:2px;box-sizing:border-box}td{word-break:normal}:host td.kles-extra-row-cell{padding:0}.kles-extra-row-content--viewport{box-sizing:border-box;animation:kles-extra-row-horizontal-scroll 1ms linear both paused}@supports (animation-timeline: scroll()){.kles-extra-row-content--viewport{animation-play-state:running;animation-timeline:--kles-table-horizontal-scroll}}@keyframes kles-extra-row-horizontal-scroll{0%{transform:translate(0)}to{transform:translate(var(--kles-table-horizontal-scroll-range, 0px))}}th .cell,td .cell{display:flex;flex-direction:column;justify-content:var(--align, center)}th[appResizableColumn].resizable-column{position:relative}th[appResizableColumn]>.resize-handle{position:absolute;top:0;inset-inline-end:-7px;z-index:20;width:14px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;outline:none}th[appResizableColumn]>.resize-handle:before{content:\"\";position:absolute;top:15%;bottom:15%;inset-inline-start:6px;width:2px;border-radius:2px;background:var(--mat-sys-outline);opacity:0;transition:opacity .12s ease,background-color .12s ease,transform .12s ease}th[appResizableColumn].resizable-column:hover>.resize-handle:before,th[appResizableColumn]>.resize-handle:focus-visible:before{opacity:.65}th[appResizableColumn].column-resizing>.resize-handle:before{top:0;bottom:0;background:var(--mat-sys-primary);opacity:1;transform:scaleX(1.25)}th[appResizableColumn].column-resizing>.resize-handle:after{content:\"\";position:absolute;top:100%;inset-inline-start:6px;width:2px;height:100vh;background:color-mix(in srgb,var(--mat-sys-primary) 70%,transparent);pointer-events:none}th[appResizableColumn]>.resize-handle>.resize-width-label{position:absolute;top:calc(100% + 8px);inset-inline-start:50%;z-index:30;display:none;padding:3px 7px;color:var(--mat-sys-on-primary);font-size:11px;font-weight:600;line-height:16px;white-space:nowrap;background:var(--mat-sys-primary);border-radius:var(--mat-sys-corner-extra-small);box-shadow:var(--mat-sys-level2);transform:translate(-50%);pointer-events:none}th[appResizableColumn].column-resizing>.resize-handle>.resize-width-label{display:block}:host .column-resizing-cell{width:var(--kles-column-resize-width)!important;min-width:var(--kles-column-resize-width)!important;max-width:var(--kles-column-resize-width)!important;flex:0 0 var(--kles-column-resize-width)!important;background-image:linear-gradient(color-mix(in srgb,var(--mat-sys-primary) 5%,transparent),color-mix(in srgb,var(--mat-sys-primary) 5%,transparent))}.table-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));display:grid;place-items:center;background:color-mix(in srgb,var(--mat-sys-surface-container-highest) 75%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-outline-variant) 30%,transparent);z-index:500}:host .mat-mdc-row:not(.kles-extra-row){transition:background-color .12s ease}:host .mat-mdc-row:not(.kles-extra-row):hover{background:var(--kles-table-row-hover-background)}:host .mat-mdc-row:not(.kles-extra-row).kles-row-selected{background:var(--kles-table-row-selected-background);box-shadow:inset 3px 0 0 var(--kles-table-row-selected-indicator-color)}:host .mat-mdc-row:not(.kles-extra-row).kles-row-selected:hover{background:var(--kles-table-row-selected-hover-background)}:host tr.mat-mdc-row.cdk-drag-placeholder{opacity:1;background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))!important}:host tr.mat-mdc-row.cdk-drag-placeholder td{border-block:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td>*{visibility:hidden}:host tr.mat-mdc-row.cdk-drag-placeholder td:first-child{border-inline-start:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td:last-child{border-inline-end:2px dashed var(--mat-sys-primary)}:host .cdk-drop-list-dragging tr.mat-mdc-row:not(.cdk-drag-placeholder),:host tr.mat-mdc-row.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}:host .kles-column-drop-list.cdk-drop-list-dragging .mat-mdc-header-cell:not(.cdk-drag-placeholder),:host .mat-mdc-header-cell.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}:host .mat-mdc-header-cell.cdk-drag-placeholder{opacity:.25}.mat-mdc-header-cell.cdk-drag-preview{box-sizing:border-box;background:var(--kles-table-header-background);color:var(--kles-table-header-color);box-shadow:var(--mat-sys-level3)}.kles-row-drag-preview{overflow:hidden;border-radius:var(--mat-sys-corner-small);background:var(--mat-sys-surface-container);box-shadow:var(--mat-sys-level3)}.selection-row-spinner{margin-inline:auto}:host tr.kles-row-drag-placeholder td{padding:0;border:2px dashed var(--mat-sys-primary);background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))}:host .mat-mdc-table .mat-mdc-cell,:host .mat-mdc-table .mat-mdc-header-cell{border-bottom-color:var(--mat-sys-outline-variant)}:host .mat-mdc-table .mat-mdc-cell:last-child,:host .mat-mdc-table .mat-mdc-header-cell:last-child{border-right:none}:host tr.mat-mdc-footer-row td.mat-mdc-footer-cell{border-top:1px solid var(--kles-table-divider-strong-color)}:host tr.mat-mdc-row:last-of-type td.mat-mdc-cell{border-bottom:1px solid var(--kles-table-divider-color)}:host tr.mat-mdc-footer-row{font-weight:500}:host .mat-mdc-header-row,:host .mat-mdc-header-cell{background-color:var(--kles-table-header-background);color:var(--kles-table-header-color)}:host .mat-mdc-header-cell{border-bottom-color:var(--kles-table-header-divider-color)}.table-empty-state-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));z-index:400;overflow-x:hidden;overflow-y:auto;container-type:size;container-name:kles-empty-state;background:var(--mat-sys-surface);display:grid;place-items:center}.table-empty-state-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:100%;padding:16px;box-sizing:border-box}@container kles-empty-state (max-height: 220px){.table-empty-state-content{padding:8px}}.scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none;overflow-y:hidden}.scrollbar-hidden::-webkit-scrollbar{display:none;overflow-y:hidden}\n"] }]
+                    ], template: "<form\n    #form\n    cdkScrollable\n    [formGroup]=\"tableService.form\"\n    [style.scroll-padding-top.px]=\"keyboardGrid.navigation.enabled ? headerHeightPx() : null\"\n    [style.scroll-padding-bottom.px]=\"keyboardGrid.navigation.enabled && showFooter() ? footerHeightPx() : null\"\n>\n    @if (keyboardGrid.navigation.enabled && !isEmpty()) {\n        <button type=\"button\" class=\"kles-grid-entry\" (click)=\"keyboardGrid.navigation.focusActive()\">\n            {{ intl.keyboardNavigationEntryLabel }}\n        </button>\n    }\n    <table\n        mat-table\n        klesKeyboardGrid\n        #keyboardGrid=\"klesKeyboardGrid\"\n        [dataSource]=\"dataSource\"\n        matSort\n        [trackBy]=\"multiTemplateDataRows() ? identityTrackBy : tableService.trackBy\"\n        formArrayName=\"rows\"\n        cdkDropList\n        [id]=\"dragDropRowService.dropListId\"\n        [cdkDropListData]=\"tableService.klesForm\"\n        (cdkDropListDropped)=\"dragDropRowService.listDropped($event)\"\n        [cdkDropListDisabled]=\"!dragDropRowService.enable\"\n        [cdkDropListAutoScrollStep]=\"dragDropRowService.autoScrollStep\"\n        [cdkDropListSortPredicate]=\"dragDropRowService.sortPredicate\"\n        [cdkDropListConnectedTo]=\"dragDropRowService.connectedTo ?? []\"\n        [multiTemplateDataRows]=\"multiTemplateDataRows()\"\n    >\n        <colgroup>\n            @for (column of visibleColumns(); track column.columnDef) {\n                <col\n                    [attr.data-column-def]=\"column.columnDef\"\n                    [style.width]=\"column.width ?? null\"\n                    [style.minWidth]=\"column.minWidth ?? null\"\n                    [style.maxWidth]=\"column.maxWidth ?? null\"\n                />\n            }\n        </colgroup>\n\n        @for (column of columns(); track column.columnDef) {\n            <ng-container [cdkColumnDef]=\"column.columnDef\" [sticky]=\"column.sticky ?? false\" [stickyEnd]=\"column.stickyEnd ?? false\">\n                <th\n                    mat-header-cell\n                    *matHeaderCellDef\n                    cdkDrag\n                    cdkDragLockAxis=\"x\"\n                    [cdkDragData]=\"column\"\n                    [cdkDragDisabled]=\"columnDragDropService.isDragDisabled(column)\"\n                    [appResizableColumn]=\"column\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'header') ?? getStickyStartSeparator(column, 'header')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'header')\"\n                    [ngStyle]=\"\n                        $safeNavigationMigration(column.headerCell?.style?.ngStyle)\n                            | resolveNgStyle\n                                : $safeNavigationMigration(tableService.form.get(['header', column.columnDef])?.value)\n                                : $safeNavigationMigration(tableService.form.get(['header', column.columnDef])?.status)\n                                : tableService.form.controls.header.value\n                                : tableService.form.controls.header.status\n                    \"\n                >\n                    <div class=\"cell\">\n                        <kles-header\n                            [header]=\"(column | header)!\"\n                            [group]=\"tableService.form.controls.header\"\n                            [columnDragHandle]=\"columnDragDropService.enable && !columnDragDropService.isDragDisabled(column)\"\n                            [dragHandleSpacer]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n                        >\n                            <ng-container\n                                klesDynamicField\n                                [field]=\"(column | headerField)!\"\n                                [group]=\"tableService.form.controls.header\"\n                                [ui]=\"tableService.ui.states.header\"\n                            ></ng-container>\n                        </kles-header>\n                    </div>\n                </th>\n\n                <td\n                    mat-cell\n                    *cdkCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n                    [klesKeyboardCell]=\"row\"\n                    [columnDef]=\"column.columnDef\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'body') ?? getStickyStartSeparator(column, 'body')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'body')\"\n                    [ngStyle]=\"\n                        $safeNavigationMigration(column.cell?.style?.ngStyle)\n                            | resolveNgStyle: row.controls[column.columnDef].value : row.controls[column.columnDef].status : row.value : row.status\n                    \"\n                    (click)=\"cellService.onClick($event, row, dataIndex ?? index, column.columnDef)\"\n                    (dblclick)=\"cellService.onDoubleClick($event, row, dataIndex ?? index, column.columnDef)\"\n                    (contextmenu)=\"cellService.onContextMenu($event, row, dataIndex ?? index, column.columnDef)\"\n                >\n                    <div class=\"cell\" [style.--align]=\"column.align\">\n                        <kles-cell\n                            [group]=\"row\"\n                            [ui]=\"(row | uiField)!\"\n                            [column]=\"column\"\n                            [rowIndex]=\"dataIndex ?? index\"\n                            [dragHandle]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n                        >\n                            @if (column.columnDef === selectionService.key && selectionService.isLoading(row)) {\n                                <mat-spinner class=\"selection-row-spinner\" [diameter]=\"20\"></mat-spinner>\n                            } @else {\n                                <ng-container\n                                    klesDynamicField\n                                    [field]=\"(column | cellField)!\"\n                                    [group]=\"row\"\n                                    [ui]=\"(row | uiField)!\"\n                                    [context]=\"row | rowContext\"\n                                ></ng-container>\n                            }\n                        </kles-cell>\n                    </div>\n                </td>\n\n                <td\n                    mat-footer-cell\n                    *matFooterCellDef\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'footer') ?? getStickyStartSeparator(column, 'footer')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'footer')\"\n                    [ngStyle]=\"\n                        $safeNavigationMigration(column.footerCell?.style?.ngStyle)\n                            | resolveNgStyle\n                                : $safeNavigationMigration(tableService.form.get(['footer', column.columnDef])?.value)\n                                : $safeNavigationMigration(tableService.form.get(['footer', column.columnDef])?.status)\n                                : tableService.form.controls.footer.value\n                                : tableService.form.controls.footer.status\n                    \"\n                >\n                    @if (column.footerCell) {\n                        <ng-container\n                            klesDynamicField\n                            [field]=\"(column | footerField)!\"\n                            [group]=\"tableService.form.controls.footer\"\n                            [ui]=\"tableService.ui.states.footer\"\n                        >\n                        </ng-container>\n                    }\n                </td>\n            </ng-container>\n        }\n\n        <tr\n            mat-header-row\n            class=\"kles-column-drop-list\"\n            *matHeaderRowDef=\"displayedColumns(); sticky: true\"\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            [cdkDropListData]=\"columnDragDropService.visibleColumns()\"\n            [cdkDropListDisabled]=\"!columnDragDropService.enable\"\n            [cdkDropListAutoScrollDisabled]=\"true\"\n            [cdkDropListSortPredicate]=\"columnDragDropService.sortPredicate\"\n            (cdkDropListDropped)=\"columnDragDropService.listDropped($event)\"\n        ></tr>\n\n        <tr\n            mat-row\n            *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns()\"\n            [class.kles-row-selected]=\"isRowSelected(row)\"\n            [class.kles-row-pointer]=\"cursorService.isPointer(row)\"\n            cdkDrag\n            [cdkDragData]=\"row\"\n            [cdkDragDisabled]=\"dragDropRowService.isDragDisabled(row)\"\n            [ngStyle]=\"rowAppearance.rowStyle | resolveRowStyle: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n            [ngClass]=\"rowAppearance.rowClass | resolveRowClass: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n            (cdkDragStarted)=\"dragDropRowService.rowDragStarted(row, dataIndex ?? index)\"\n            (cdkDragMoved)=\"dragDropRowService.rowDragMoved(row, dataIndex ?? index)\"\n            (cdkDragEnded)=\"dragDropRowService.rowDragEnded(row, dataIndex ?? index)\"\n            (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n            (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n            (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n            (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n            (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n        >\n            @if (dragDropRowService.previewComponent; as previewComponent) {\n                <ng-template cdkDragPreview [matchSize]=\"dragDropRowService.previewMatchSize\">\n                    <div class=\"kles-row-drag-preview\">\n                        <ng-container\n                            *ngComponentOutlet=\"previewComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n                        ></ng-container>\n                    </div>\n                </ng-template>\n            }\n\n            @if (dragDropRowService.placeholderComponent; as placeholderComponent) {\n                <ng-template cdkDragPlaceholder>\n                    <tr class=\"kles-row-drag-placeholder\">\n                        <td [attr.colspan]=\"displayedColumns()?.length ?? 1\">\n                            <ng-container\n                                *ngComponentOutlet=\"placeholderComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n                            ></ng-container>\n                        </td>\n                    </tr>\n                </ng-template>\n            }\n        </tr>\n\n        @if (multiTemplateDataRows()) {\n            @for (extraRow of extraRows(); track extraRow) {\n                @for (extraColumn of extraRow.cells; track extraColumn.columnDef) {\n                    <ng-container [cdkColumnDef]=\"extraColumn.columnDef\">\n                        <td\n                            mat-cell\n                            class=\"kles-extra-row-cell\"\n                            *cdkCellDef=\"let row\"\n                            [attr.colspan]=\"(extraColumn.colspan ?? 1) | spanPipe: displayedColumns().length\"\n                            [attr.rowspan]=\"extraColumn.rowspan\"\n                            [ngStyle]=\"\n                                $safeNavigationMigration(extraColumn?.style?.ngStyle)\n                                    | resolveNgStyle\n                                        : row.controls[extraColumn.columnDef].value\n                                        : row.controls[extraColumn.columnDef].status\n                                        : row.value\n                                        : row.status\n                            \"\n                        >\n                            <div\n                                class=\"kles-extra-row-content\"\n                                [class.kles-extra-row-content--viewport]=\"extraRow.width === 'viewport'\"\n                                [style.width.px]=\"extraRow.width === 'viewport' ? viewportWidthPx() : null\"\n                                [style.--kles-table-horizontal-scroll-range.px]=\"extraRow.width === 'viewport' ? viewportScrollRangePx() : null\"\n                            >\n                                <ng-container\n                                    klesDynamicField\n                                    [field]=\"(extraColumn | extraCellField)!\"\n                                    [group]=\"row\"\n                                    [ui]=\"(row | uiField)!\"\n                                    [context]=\"row | rowContext\"\n                                ></ng-container>\n                            </div>\n                        </td>\n                    </ng-container>\n                }\n                <tr\n                    mat-row\n                    class=\"kles-extra-row\"\n                    *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: extraRow.displayedColumns; when: extraRow.when\"\n                    (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n                    (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n                    (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n                    (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n                    (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n                ></tr>\n            }\n        }\n\n        <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\" [style.display]=\"showFooter() ? '' : 'none'\"></tr>\n    </table>\n</form>\n\n@if (loadingService.loading()) {\n    <div class=\"table-overlay\" [style.--header-h.px]=\"headerHeightPx()\" [style.--scroll-h.px]=\"scrollHeightPx()\" [style.--footer-h.px]=\"footerHeightPx()\">\n        <mat-spinner></mat-spinner>\n    </div>\n}\n\n@if (emptyStateService.enabled() && !loadingService.loading() && isEmpty()) {\n    <div\n        class=\"table-empty-state-overlay\"\n        [style.--header-h.px]=\"headerHeightPx()\"\n        [style.--scroll-h.px]=\"scrollHeightPx()\"\n        [style.--footer-h.px]=\"footerHeightPx()\"\n    >\n        <div class=\"table-empty-state-content\">\n            @if (emptyStateService.component === emptyStateComponent) {\n                <kles-table-empty-state (refreshRequested)=\"refresh()\"></kles-table-empty-state>\n            } @else {\n                <ng-container *ngComponentOutlet=\"emptyStateService.component\"></ng-container>\n            }\n        </div>\n    </div>\n}\n", styles: [":host{--kles-table-divider-color: color-mix(in srgb, var(--mat-sys-outline-variant) 65%, transparent);--kles-table-divider-strong-color: var(--mat-sys-outline-variant);--kles-table-header-background: var(--mat-sys-surface-container);--kles-table-header-color: var(--mat-sys-on-surface);--kles-table-header-divider-color: var(--mat-sys-outline-variant);--kles-table-row-hover-background: color-mix(in srgb, var(--mat-sys-primary) 4%, var(--mat-sys-surface));--kles-table-row-selected-background: color-mix(in srgb, var(--mat-sys-primary) 7%, var(--mat-sys-surface));--kles-table-row-selected-hover-background: color-mix(in srgb, var(--mat-sys-primary) 10%, var(--mat-sys-surface));--kles-table-row-selected-indicator-color: var(--mat-sys-primary);overflow:auto;display:flex;flex-direction:column;position:relative;height:100%;--mat-form-field-filled-container-color: transparent;--mat-form-field-hover-state-layer-opacity: 0;--mat-form-field-focus-state-layer-opacity: 0;--mat-form-field-state-layer-color: transparent}:host(.loading),:host(.empty){min-height:280px}form{display:flex;flex-direction:column;flex-grow:1;position:relative;overflow:auto;scroll-timeline-name:--kles-table-horizontal-scroll;scroll-timeline-axis:inline}.kles-row-pointer{cursor:pointer}.kles-keyboard-cell:focus-visible{outline:2px solid var(--mat-sys-primary, Highlight);outline-offset:-2px}.kles-grid-entry{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.kles-grid-entry:focus-visible{top:4px;left:4px;z-index:10;width:auto;height:auto;padding:8px 12px;clip-path:none;background:var(--mat-sys-surface, white);color:var(--mat-sys-on-surface, black);outline:2px solid var(--mat-sys-primary, Highlight)}table{width:100%;flex-grow:1}th,td{text-wrap:pretty;white-space:normal;padding-top:2px;padding-bottom:2px;box-sizing:border-box}td{word-break:normal}:host td.kles-extra-row-cell{padding:0}.kles-extra-row-content--viewport{box-sizing:border-box;animation:kles-extra-row-horizontal-scroll 1ms linear both paused}@supports (animation-timeline: scroll()){.kles-extra-row-content--viewport{animation-play-state:running;animation-timeline:--kles-table-horizontal-scroll}}@keyframes kles-extra-row-horizontal-scroll{0%{transform:translate(0)}to{transform:translate(var(--kles-table-horizontal-scroll-range, 0px))}}th .cell,td .cell{display:flex;flex-direction:column;justify-content:var(--align, center)}th[appResizableColumn].resizable-column{position:relative}th[appResizableColumn]>.resize-handle{position:absolute;top:0;inset-inline-end:-7px;z-index:20;width:14px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;outline:none}th[appResizableColumn]>.resize-handle:before{content:\"\";position:absolute;top:15%;bottom:15%;inset-inline-start:6px;width:2px;border-radius:2px;background:var(--mat-sys-outline);opacity:0;transition:opacity .12s ease,background-color .12s ease,transform .12s ease}th[appResizableColumn].resizable-column:hover>.resize-handle:before,th[appResizableColumn]>.resize-handle:focus-visible:before{opacity:.65}th[appResizableColumn].column-resizing>.resize-handle:before{top:0;bottom:0;background:var(--mat-sys-primary);opacity:1;transform:scaleX(1.25)}th[appResizableColumn].column-resizing>.resize-handle:after{content:\"\";position:absolute;top:100%;inset-inline-start:6px;width:2px;height:100vh;background:color-mix(in srgb,var(--mat-sys-primary) 70%,transparent);pointer-events:none}th[appResizableColumn]>.resize-handle>.resize-width-label{position:absolute;top:calc(100% + 8px);inset-inline-start:50%;z-index:30;display:none;padding:3px 7px;color:var(--mat-sys-on-primary);font-size:11px;font-weight:600;line-height:16px;white-space:nowrap;background:var(--mat-sys-primary);border-radius:var(--mat-sys-corner-extra-small);box-shadow:var(--mat-sys-level2);transform:translate(-50%);pointer-events:none}th[appResizableColumn].column-resizing>.resize-handle>.resize-width-label{display:block}:host .column-resizing-cell{width:var(--kles-column-resize-width)!important;min-width:var(--kles-column-resize-width)!important;max-width:var(--kles-column-resize-width)!important;flex:0 0 var(--kles-column-resize-width)!important;background-image:linear-gradient(color-mix(in srgb,var(--mat-sys-primary) 5%,transparent),color-mix(in srgb,var(--mat-sys-primary) 5%,transparent))}.table-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));display:grid;place-items:center;background:color-mix(in srgb,var(--mat-sys-surface-container-highest) 75%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-outline-variant) 30%,transparent);z-index:500}:host .mat-mdc-row:not(.kles-extra-row){transition:background-color .12s ease}:host .mat-mdc-row:not(.kles-extra-row):hover{background:var(--kles-table-row-hover-background)}:host .mat-mdc-row:not(.kles-extra-row).kles-row-selected{background:var(--kles-table-row-selected-background);box-shadow:inset 3px 0 0 var(--kles-table-row-selected-indicator-color)}:host .mat-mdc-row:not(.kles-extra-row).kles-row-selected:hover{background:var(--kles-table-row-selected-hover-background)}:host tr.mat-mdc-row.cdk-drag-placeholder{opacity:1;background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))!important}:host tr.mat-mdc-row.cdk-drag-placeholder td{border-block:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td>*{visibility:hidden}:host tr.mat-mdc-row.cdk-drag-placeholder td:first-child{border-inline-start:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td:last-child{border-inline-end:2px dashed var(--mat-sys-primary)}:host .cdk-drop-list-dragging tr.mat-mdc-row:not(.cdk-drag-placeholder),:host tr.mat-mdc-row.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}:host .kles-column-drop-list.cdk-drop-list-dragging .mat-mdc-header-cell:not(.cdk-drag-placeholder),:host .mat-mdc-header-cell.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}:host .mat-mdc-header-cell.cdk-drag-placeholder{opacity:.25}.mat-mdc-header-cell.cdk-drag-preview{box-sizing:border-box;background:var(--kles-table-header-background);color:var(--kles-table-header-color);box-shadow:var(--mat-sys-level3)}.kles-row-drag-preview{overflow:hidden;border-radius:var(--mat-sys-corner-small);background:var(--mat-sys-surface-container);box-shadow:var(--mat-sys-level3)}.selection-row-spinner{margin-inline:auto}:host tr.kles-row-drag-placeholder td{padding:0;border:2px dashed var(--mat-sys-primary);background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))}:host .mat-mdc-table .mat-mdc-cell,:host .mat-mdc-table .mat-mdc-header-cell{border-bottom-color:var(--mat-sys-outline-variant)}:host .mat-mdc-table .mat-mdc-cell:last-child,:host .mat-mdc-table .mat-mdc-header-cell:last-child{border-right:none}:host tr.mat-mdc-footer-row td.mat-mdc-footer-cell{border-top:1px solid var(--kles-table-divider-strong-color)}:host tr.mat-mdc-row:last-of-type td.mat-mdc-cell{border-bottom:1px solid var(--kles-table-divider-color)}:host tr.mat-mdc-footer-row{font-weight:500}:host .mat-mdc-header-row,:host .mat-mdc-header-cell{background-color:var(--kles-table-header-background);color:var(--kles-table-header-color)}:host .mat-mdc-header-cell{border-bottom-color:var(--kles-table-header-divider-color)}.table-empty-state-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));z-index:400;overflow-x:hidden;overflow-y:auto;container-type:size;container-name:kles-empty-state;background:var(--mat-sys-surface);display:grid;place-items:center}.table-empty-state-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:100%;padding:16px;box-sizing:border-box}@container kles-empty-state (max-height: 220px){.table-empty-state-content{padding:8px}}.scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none;overflow-y:hidden}.scrollbar-hidden::-webkit-scrollbar{display:none;overflow-y:hidden}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: KlesTableConnectorService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOADER_SERVICE]