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

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, inject, signal, DestroyRef, Component, ChangeDetectorRef, ChangeDetectionStrategy, Optional, EventEmitter, Injector, ViewChildren, ViewChild, effect, ElementRef, contentChild, Output, NgModule } 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 * as i19 from '@angular/forms';
 import { FormControl, FormGroup, FormArray, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from '@angular/material/button';
@@ -94,6 +94,7 @@ const FOOTER = new InjectionToken('FOOTER');
 const EXTRA_ROWS = new InjectionToken('EXTRA_ROWS');
 const MULTI_UNFOLD = new InjectionToken('MULTI_UNFOLD');
 const ROW_APPEARANCE_CONFIG = new InjectionToken('ROW_APPEARANCE_CONFIG');
+const ROW_VALIDATION_CONFIG = new InjectionToken('ROW_VALIDATION_CONFIG');
 const ROW_DRAG_DROP = new InjectionToken('ROW_DRAG_DROP');
 const COLUMN_DRAG_DROP = new InjectionToken('COLUMN_DRAG_DROP');
 const DRAG_DROP_CONFIG = new InjectionToken('DRAG_DROP_CONFIG');
@@ -110,6 +111,7 @@ const SORT_SERVICE = new InjectionToken('SORT_SERVICE');
 const SCROLLBAR_ORCHESTRATOR_SERVICE = new InjectionToken('SCROLLBAR_ORCHESTRATOR_SERVICE');
 const TABLE_SERVICE = new InjectionToken('TABLE_SERVICE');
 const EMPTY_STATE_CONFIG = new InjectionToken('EMPTY_STATE_CONFIG');
+const KEYBOARD_NAVIGATION_CONFIG = new InjectionToken('KEYBOARD_NAVIGATION_CONFIG');
 
 class ResolveNgStylePipe {
     transform(style, value, status, row, rowStatus) {
@@ -649,6 +651,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 args: ['attr.appResizableColumn']
             }] } });
 
+class CursorService {
+    constructor(selectionService) {
+        this.selectionService = selectionService;
+        this._mode = signal('auto', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_mode" }] : /* istanbul ignore next */ []));
+        this.mode = this._mode.asReadonly();
+    }
+    enable() {
+        this._mode.set('pointer');
+    }
+    disable() {
+        this._mode.set('default');
+    }
+    reset() {
+        this._mode.set('auto');
+    }
+    isPointer(row) {
+        const mode = this.mode();
+        return mode === 'pointer' || (mode === 'auto' && this.selectionService.canSelectOnRowClick(row));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CursorService, deps: [{ token: SELECTION_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CursorService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CursorService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SELECTION_SERVICE]
+                }] }] });
+
 class FooterFieldPipe {
     transform(col) {
         if (!col)
@@ -814,6 +846,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 }] }] });
 
 class RowFormFactory {
+    constructor(validationConfig = null) {
+        this.validationConfig = validationConfig;
+    }
     createControl(field, value) {
         let control;
         let ui;
@@ -844,7 +879,10 @@ class RowFormFactory {
             uis[field.name] = ui;
         }
         return {
-            formGroup: new FormGroup(controls),
+            formGroup: new FormGroup(controls, {
+                validators: this.validationConfig?.lineValidations,
+                asyncValidators: this.validationConfig?.lineAsyncValidations,
+            }),
             groupUi: new GroupUiState(uis),
             context: {
                 source: record,
@@ -856,13 +894,18 @@ class RowFormFactory {
     createRows(fields, records, meta = { depth: 0, parentId: null }) {
         return records.map((r) => this.createRow(fields, r, meta));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowFormFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowFormFactory, deps: [{ token: ROW_VALIDATION_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowFormFactory, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowFormFactory, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }] });
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [ROW_VALIDATION_CONFIG]
+                }] }] });
 
 class RowContextStore {
     constructor() {
@@ -1600,6 +1643,8 @@ class KlesTableIntl {
         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' }); }
@@ -1613,6 +1658,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
 
 class KlesTableEmptyStateComponent {
     constructor() {
+        this.refreshRequested = output();
         this.intl = inject(KlesTableIntl);
         this.changeDetectorRef = inject(ChangeDetectorRef);
         this.destroyRef = inject(DestroyRef);
@@ -1621,12 +1667,12 @@ class KlesTableEmptyStateComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: KlesTableEmptyStateComponent, isStandalone: true, selector: "kles-table-empty-state", ngImport: i0, template: "<section class=\"empty-state\" role=\"status\" aria-live=\"polite\">\n    <div class=\"empty-state__panel\">\n        <div class=\"empty-state__visual\" aria-hidden=\"true\">\n            <div class=\"empty-state__table-icon\">\n                <span class=\"empty-state__table-header\"></span>\n                <span></span>\n                <span></span>\n                <span></span>\n            </div>\n\n            <div class=\"empty-state__badge\">\n                <mat-icon>remove</mat-icon>\n            </div>\n        </div>\n\n        <div class=\"empty-state__content\">\n            <h2 class=\"empty-state__title\">\n                {{ intl.emptyStateTitle }}\n            </h2>\n\n            <p class=\"empty-state__description\">\n                {{ intl.emptyStateDescription }}\n            </p>\n        </div>\n    </div>\n</section>\n", styles: [":host{display:block;width:100%;height:100%;box-sizing:border-box;--kles-empty-state-accent: var(--mat-sys-primary);--kles-empty-state-accent-container: var(--mat-sys-primary-container)}.empty-state{display:grid;width:100%;height:100%;box-sizing:border-box;place-items:center}.empty-state__panel{display:flex;width:min(100%,31rem);align-items:center;justify-content:center;gap:1.25rem;color:var(--mat-sys-on-surface-variant)}.empty-state__visual{position:relative;display:grid;width:4.5rem;height:4.5rem;flex:0 0 4.5rem;place-items:center;border-radius:1.25rem;background:color-mix(in srgb,var(--kles-empty-state-accent-container) 72%,var(--mat-sys-surface))}.empty-state__table-icon{display:grid;width:2.35rem;height:2.15rem;overflow:hidden;box-sizing:border-box;grid-template-rows:.65rem repeat(3,1fr);border:.125rem solid var(--kles-empty-state-accent);border-radius:.35rem}.empty-state__table-icon span{border-top:1px solid color-mix(in srgb,var(--kles-empty-state-accent) 45%,transparent)}.empty-state__table-icon .empty-state__table-header{border-top:0;background:color-mix(in srgb,var(--kles-empty-state-accent) 24%,transparent)}.empty-state__badge{position:absolute;right:-.2rem;bottom:-.2rem;display:grid;width:1.65rem;height:1.65rem;place-items:center;border:.2rem solid var(--mat-sys-surface);border-radius:50%;color:var(--mat-sys-on-primary);background:var(--kles-empty-state-accent)}.empty-state__badge mat-icon{width:1rem;height:1rem;font-size:1rem;font-weight:700}.empty-state__content{display:grid;max-width:25rem;gap:.3rem;text-align:left}.empty-state__title{margin:0;color:var(--mat-sys-on-surface);font:var(--mat-sys-title-medium)}.empty-state__description{margin:0;font:var(--mat-sys-body-medium);line-height:1.45;text-wrap:balance}@media(max-width:37.5rem){.empty-state__panel{flex-direction:column;gap:.875rem;padding:1.25rem;text-align:center}.empty-state__content{text-align:center}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: KlesTableEmptyStateComponent, isStandalone: true, selector: "kles-table-empty-state", outputs: { refreshRequested: "refreshRequested" }, ngImport: i0, template: "<section class=\"empty-state\" role=\"status\" aria-live=\"polite\">\n    <div class=\"empty-state__panel\">\n        <div class=\"empty-state__visual\" aria-hidden=\"true\">\n            <div class=\"empty-state__table-icon\">\n                <span class=\"empty-state__table-header\"></span>\n                <span></span>\n                <span></span>\n                <span></span>\n            </div>\n\n            <div class=\"empty-state__badge\">\n                <mat-icon>remove</mat-icon>\n            </div>\n        </div>\n\n        <div class=\"empty-state__content\">\n            <h2 class=\"empty-state__title\">\n                {{ intl.emptyStateTitle }}\n            </h2>\n\n            <p class=\"empty-state__description\">\n                {{ intl.emptyStateDescription }}\n            </p>\n            <button mat-stroked-button type=\"button\" class=\"empty-state__refresh\" (click)=\"refreshRequested.emit()\">\n                <mat-icon>refresh</mat-icon>\n                {{ intl.emptyStateRefreshLabel }}\n            </button>\n        </div>\n    </div>\n</section>\n", styles: [":host{display:block;width:100%;height:100%;box-sizing:border-box;--kles-empty-state-accent: var(--mat-sys-primary);--kles-empty-state-accent-container: var(--mat-sys-primary-container)}.empty-state{display:grid;width:100%;height:100%;box-sizing:border-box;place-items:center}.empty-state__panel{display:flex;width:min(100%,31rem);align-items:center;justify-content:center;gap:1.25rem;color:var(--mat-sys-on-surface-variant)}.empty-state__visual{position:relative;display:grid;width:4.5rem;height:4.5rem;flex:0 0 4.5rem;place-items:center;border-radius:1.25rem;background:color-mix(in srgb,var(--kles-empty-state-accent-container) 72%,var(--mat-sys-surface))}.empty-state__table-icon{display:grid;width:2.35rem;height:2.15rem;overflow:hidden;box-sizing:border-box;grid-template-rows:.65rem repeat(3,1fr);border:.125rem solid var(--kles-empty-state-accent);border-radius:.35rem}.empty-state__table-icon span{border-top:1px solid color-mix(in srgb,var(--kles-empty-state-accent) 45%,transparent)}.empty-state__table-icon .empty-state__table-header{border-top:0;background:color-mix(in srgb,var(--kles-empty-state-accent) 24%,transparent)}.empty-state__badge{position:absolute;right:-.2rem;bottom:-.2rem;display:grid;width:1.65rem;height:1.65rem;place-items:center;border:.2rem solid var(--mat-sys-surface);border-radius:50%;color:var(--mat-sys-on-primary);background:var(--kles-empty-state-accent)}.empty-state__badge mat-icon{width:1rem;height:1rem;font-size:1rem;font-weight:700}.empty-state__content{display:grid;min-width:0;max-width:25rem;gap:.3rem;text-align:left}.empty-state__title{margin:0;color:var(--mat-sys-on-surface);font:var(--mat-sys-title-medium)}.empty-state__description{margin:0;font:var(--mat-sys-body-medium);line-height:1.45;text-wrap:balance;overflow-wrap:anywhere}.empty-state__refresh{justify-self:start}@media(max-width:37.5rem){.empty-state__panel{flex-direction:column;gap:.875rem;padding:1.25rem;text-align:center}.empty-state__content{text-align:center}.empty-state__refresh{justify-self:center}}@container kles-empty-state (max-width: 37.5rem){.empty-state__visual{width:3rem;height:3rem;flex-basis:3rem;border-radius:.875rem}.empty-state__table-icon{width:1.75rem;height:1.6rem;grid-template-rows:.45rem repeat(3,1fr)}.empty-state__badge{width:1.25rem;height:1.25rem;border-width:.15rem}.empty-state__panel{flex-direction:column;gap:.25rem;padding:0}.empty-state__content{text-align:center}.empty-state__refresh{justify-self:center}}\n"], dependencies: [{ 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.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableEmptyStateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kles-table-empty-state', standalone: true, imports: [MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"empty-state\" role=\"status\" aria-live=\"polite\">\n    <div class=\"empty-state__panel\">\n        <div class=\"empty-state__visual\" aria-hidden=\"true\">\n            <div class=\"empty-state__table-icon\">\n                <span class=\"empty-state__table-header\"></span>\n                <span></span>\n                <span></span>\n                <span></span>\n            </div>\n\n            <div class=\"empty-state__badge\">\n                <mat-icon>remove</mat-icon>\n            </div>\n        </div>\n\n        <div class=\"empty-state__content\">\n            <h2 class=\"empty-state__title\">\n                {{ intl.emptyStateTitle }}\n            </h2>\n\n            <p class=\"empty-state__description\">\n                {{ intl.emptyStateDescription }}\n            </p>\n        </div>\n    </div>\n</section>\n", styles: [":host{display:block;width:100%;height:100%;box-sizing:border-box;--kles-empty-state-accent: var(--mat-sys-primary);--kles-empty-state-accent-container: var(--mat-sys-primary-container)}.empty-state{display:grid;width:100%;height:100%;box-sizing:border-box;place-items:center}.empty-state__panel{display:flex;width:min(100%,31rem);align-items:center;justify-content:center;gap:1.25rem;color:var(--mat-sys-on-surface-variant)}.empty-state__visual{position:relative;display:grid;width:4.5rem;height:4.5rem;flex:0 0 4.5rem;place-items:center;border-radius:1.25rem;background:color-mix(in srgb,var(--kles-empty-state-accent-container) 72%,var(--mat-sys-surface))}.empty-state__table-icon{display:grid;width:2.35rem;height:2.15rem;overflow:hidden;box-sizing:border-box;grid-template-rows:.65rem repeat(3,1fr);border:.125rem solid var(--kles-empty-state-accent);border-radius:.35rem}.empty-state__table-icon span{border-top:1px solid color-mix(in srgb,var(--kles-empty-state-accent) 45%,transparent)}.empty-state__table-icon .empty-state__table-header{border-top:0;background:color-mix(in srgb,var(--kles-empty-state-accent) 24%,transparent)}.empty-state__badge{position:absolute;right:-.2rem;bottom:-.2rem;display:grid;width:1.65rem;height:1.65rem;place-items:center;border:.2rem solid var(--mat-sys-surface);border-radius:50%;color:var(--mat-sys-on-primary);background:var(--kles-empty-state-accent)}.empty-state__badge mat-icon{width:1rem;height:1rem;font-size:1rem;font-weight:700}.empty-state__content{display:grid;max-width:25rem;gap:.3rem;text-align:left}.empty-state__title{margin:0;color:var(--mat-sys-on-surface);font:var(--mat-sys-title-medium)}.empty-state__description{margin:0;font:var(--mat-sys-body-medium);line-height:1.45;text-wrap:balance}@media(max-width:37.5rem){.empty-state__panel{flex-direction:column;gap:.875rem;padding:1.25rem;text-align:center}.empty-state__content{text-align:center}}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'kles-table-empty-state', standalone: true, imports: [MatIconModule, MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"empty-state\" role=\"status\" aria-live=\"polite\">\n    <div class=\"empty-state__panel\">\n        <div class=\"empty-state__visual\" aria-hidden=\"true\">\n            <div class=\"empty-state__table-icon\">\n                <span class=\"empty-state__table-header\"></span>\n                <span></span>\n                <span></span>\n                <span></span>\n            </div>\n\n            <div class=\"empty-state__badge\">\n                <mat-icon>remove</mat-icon>\n            </div>\n        </div>\n\n        <div class=\"empty-state__content\">\n            <h2 class=\"empty-state__title\">\n                {{ intl.emptyStateTitle }}\n            </h2>\n\n            <p class=\"empty-state__description\">\n                {{ intl.emptyStateDescription }}\n            </p>\n            <button mat-stroked-button type=\"button\" class=\"empty-state__refresh\" (click)=\"refreshRequested.emit()\">\n                <mat-icon>refresh</mat-icon>\n                {{ intl.emptyStateRefreshLabel }}\n            </button>\n        </div>\n    </div>\n</section>\n", styles: [":host{display:block;width:100%;height:100%;box-sizing:border-box;--kles-empty-state-accent: var(--mat-sys-primary);--kles-empty-state-accent-container: var(--mat-sys-primary-container)}.empty-state{display:grid;width:100%;height:100%;box-sizing:border-box;place-items:center}.empty-state__panel{display:flex;width:min(100%,31rem);align-items:center;justify-content:center;gap:1.25rem;color:var(--mat-sys-on-surface-variant)}.empty-state__visual{position:relative;display:grid;width:4.5rem;height:4.5rem;flex:0 0 4.5rem;place-items:center;border-radius:1.25rem;background:color-mix(in srgb,var(--kles-empty-state-accent-container) 72%,var(--mat-sys-surface))}.empty-state__table-icon{display:grid;width:2.35rem;height:2.15rem;overflow:hidden;box-sizing:border-box;grid-template-rows:.65rem repeat(3,1fr);border:.125rem solid var(--kles-empty-state-accent);border-radius:.35rem}.empty-state__table-icon span{border-top:1px solid color-mix(in srgb,var(--kles-empty-state-accent) 45%,transparent)}.empty-state__table-icon .empty-state__table-header{border-top:0;background:color-mix(in srgb,var(--kles-empty-state-accent) 24%,transparent)}.empty-state__badge{position:absolute;right:-.2rem;bottom:-.2rem;display:grid;width:1.65rem;height:1.65rem;place-items:center;border:.2rem solid var(--mat-sys-surface);border-radius:50%;color:var(--mat-sys-on-primary);background:var(--kles-empty-state-accent)}.empty-state__badge mat-icon{width:1rem;height:1rem;font-size:1rem;font-weight:700}.empty-state__content{display:grid;min-width:0;max-width:25rem;gap:.3rem;text-align:left}.empty-state__title{margin:0;color:var(--mat-sys-on-surface);font:var(--mat-sys-title-medium)}.empty-state__description{margin:0;font:var(--mat-sys-body-medium);line-height:1.45;text-wrap:balance;overflow-wrap:anywhere}.empty-state__refresh{justify-self:start}@media(max-width:37.5rem){.empty-state__panel{flex-direction:column;gap:.875rem;padding:1.25rem;text-align:center}.empty-state__content{text-align:center}.empty-state__refresh{justify-self:center}}@container kles-empty-state (max-width: 37.5rem){.empty-state__visual{width:3rem;height:3rem;flex-basis:3rem;border-radius:.875rem}.empty-state__table-icon{width:1.75rem;height:1.6rem;grid-template-rows:.45rem repeat(3,1fr)}.empty-state__badge{width:1.25rem;height:1.25rem;border-width:.15rem}.empty-state__panel{flex-direction:column;gap:.25rem;padding:0}.empty-state__content{text-align:center}.empty-state__refresh{justify-self:center}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { refreshRequested: [{ type: i0.Output, args: ["refreshRequested"] }] } });
 
 class RowContextPipe {
     constructor() {
@@ -1647,6 +1693,339 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 }]
         }] });
 
+const interactiveSelector = 'input, textarea, select, button, a[href], [tabindex], [contenteditable]:not([contenteditable="false"])';
+/** One instance per rendered grid, including nested tables. */
+class KeyboardNavigationService {
+    constructor(config, selection) {
+        this.config = config;
+        this.selection = selection;
+        this.registered = new Set();
+        this.cells = [];
+        this.editing = false;
+        this.focusOwned = false;
+        this.originalTabIndexes = new Map();
+    }
+    get enabled() { return this.config?.enabled === true; }
+    get ariaLabel() { return this.config?.ariaLabel; }
+    register(cell) { this.registered.add(cell); }
+    unregister(cell) { this.registered.delete(cell); }
+    focusActive() {
+        if (!this.enabled)
+            return false;
+        this.reconcile();
+        if (!this.active)
+            return false;
+        this.focus(this.active);
+        return true;
+    }
+    click(cell, event) {
+        if (!this.enabled || event.defaultPrevented || !this.ownsEvent(cell, event))
+            return;
+        const target = event.target;
+        // Preserve native field focus, action buttons and links, including custom widgets.
+        if (target !== cell.element && target.closest('input, textarea, select, button, a, [role="button"], [role="checkbox"], [role="combobox"], [role="link"], [contenteditable]:not([contenteditable="false"]), [tabindex]') !== cell.element)
+            return;
+        this.focus(cell);
+    }
+    /** Runs after Angular has rendered rows, reordered columns and updated controls. */
+    reconcile() {
+        if (!this.enabled)
+            return;
+        const previous = this.active;
+        const previousIndex = previous ? this.cells.indexOf(previous) : 0;
+        this.cells = [...this.registered].filter(cell => cell.element.isConnected).sort((a, b) => a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
+        const next = this.cells.find(cell => this.identity &&
+            cell.row.get('_id')?.value === this.identity.rowId && cell.columnDef === this.identity.columnDef)
+            ?? this.cells.find(cell => this.identity && cell.row.get('_id')?.value === this.identity.rowId)
+            ?? this.cells[Math.max(0, Math.min(previousIndex, this.cells.length - 1))];
+        const focused = previous?.element.ownerDocument.activeElement;
+        if (focused && focused !== focused.ownerDocument.body &&
+            !this.cells.some(cell => cell.element === focused || cell.element.contains(focused))) {
+            this.focusOwned = false;
+        }
+        if (next !== previous) {
+            this.editing = false;
+            this.activate(next);
+        }
+        this.updateTabStops();
+        if (next && previous && this.focusOwned &&
+            (next !== previous || !next.element.contains(next.element.ownerDocument.activeElement)))
+            this.focus(next);
+    }
+    focusIn(cell, event) {
+        if (!this.enabled || !this.ownsEvent(cell, event))
+            return;
+        this.focusOwned = true;
+        this.activate(cell);
+        this.editing = event.target !== cell.element;
+        this.updateTabStops();
+    }
+    focusOut(event) {
+        if (event.relatedTarget instanceof Node &&
+            !this.cells.some(cell => cell.element.contains(event.relatedTarget))) {
+            this.focusOwned = false;
+        }
+        else if (!event.relatedTarget && event.target?.isConnected) {
+            // Browsers also emit a null destination while Angular removes or moves a focused node.
+            // Wait until rendering is finished to distinguish removal from an intentional blur.
+            const target = event.target;
+            queueMicrotask(() => {
+                if (target.isConnected && !this.cells.some(cell => cell.element.contains(target.ownerDocument.activeElement))) {
+                    this.focusOwned = false;
+                }
+            });
+        }
+    }
+    keyDown(cell, event) {
+        if (!this.enabled || event.defaultPrevented || event.isComposing || event.altKey || event.ctrlKey || event.metaKey ||
+            !this.ownsEvent(cell, event))
+            return;
+        this.activate(cell);
+        if (event.target !== cell.element) {
+            // Let the field own arrows, selection shortcuts, multiline input and open popups.
+            const target = event.target;
+            const popupOpen = target.closest('[aria-expanded="true"]') !== null;
+            const simpleInput = target instanceof HTMLInputElement &&
+                ['text', 'search', 'email', 'tel', 'url', 'password', 'number'].includes(target.type) &&
+                target.getAttribute('role') !== 'combobox';
+            if (event.key === 'Tab') {
+                const controls = this.availableControls(cell).filter(element => element.tabIndex >= 0);
+                const index = controls.indexOf(target);
+                if (index >= 0 && (event.shiftKey ? index > 0 : index < controls.length - 1))
+                    return;
+                this.editing = false;
+                this.focus(cell); // Native Tab now leaves this single grid tab stop.
+            }
+            else if (!popupOpen && (event.key === 'Escape' ||
+                (event.key === 'Enter' && simpleInput))) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.editing = false;
+                this.focus(cell);
+            }
+            return;
+        }
+        let destination;
+        const rowCells = this.cells.filter(current => current.row === cell.row);
+        const columnCells = this.cells.filter(current => current.columnDef === cell.columnDef);
+        switch (event.key) {
+            case 'ArrowLeft':
+                destination = rowCells[rowCells.indexOf(cell) - 1];
+                break;
+            case 'ArrowRight':
+                destination = rowCells[rowCells.indexOf(cell) + 1];
+                break;
+            case 'ArrowUp':
+                destination = columnCells[columnCells.indexOf(cell) - 1];
+                break;
+            case 'ArrowDown':
+                destination = columnCells[columnCells.indexOf(cell) + 1];
+                break;
+            case 'Home':
+                destination = rowCells[0];
+                break;
+            case 'End':
+                destination = rowCells.at(-1);
+                break;
+            case 'Enter':
+            case 'F2':
+                this.enterEdit(cell);
+                break;
+            case ' ':
+                if (!event.repeat && this.selection?.canSelectRow(cell.row))
+                    this.selection.toggleRowSelection(cell.row);
+                break;
+            default: return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        if (destination)
+            this.focus(destination);
+    }
+    destroy() {
+        for (const [element, tabIndex] of this.originalTabIndexes)
+            this.restoreTabIndex(element, tabIndex);
+        this.originalTabIndexes.clear();
+        this.registered.clear();
+        this.cells = [];
+    }
+    ownsEvent(cell, event) {
+        return event.target instanceof Element && event.target.closest('[data-kles-keyboard-cell]') === cell.element;
+    }
+    activate(cell) {
+        this.active = cell;
+        if (cell)
+            this.identity = { rowId: cell.row.get('_id')?.value, columnDef: cell.columnDef };
+    }
+    focus(cell) {
+        this.activate(cell);
+        this.editing = false;
+        this.updateTabStops();
+        cell.element.focus({ preventScroll: true });
+        cell.element.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+    }
+    enterEdit(cell) {
+        this.editing = true;
+        this.updateTabStops();
+        // Prefer the field over row handles and expansion buttons.
+        const fields = [...cell.element.querySelectorAll('.cell-field')];
+        const candidates = fields.flatMap(field => [...field.querySelectorAll(interactiveSelector)])
+            .concat([...cell.element.querySelectorAll(interactiveSelector)]);
+        const available = this.availableControls(cell);
+        const target = candidates.find(element => available.includes(element));
+        if (target)
+            target.focus();
+        else {
+            this.editing = false;
+            this.updateTabStops();
+        }
+    }
+    isOwnControl(cell, element) {
+        return element.closest('[data-kles-keyboard-cell]') === cell.element &&
+            element.closest('table') === cell.element.closest('table');
+    }
+    availableControls(cell) {
+        return [...cell.element.querySelectorAll(interactiveSelector)].filter(element => this.isOwnControl(cell, element) &&
+            !element.matches(':disabled, [aria-disabled="true"], input[type="hidden"]') &&
+            !element.closest('[hidden], [inert]') && element.getClientRects().length > 0);
+    }
+    updateTabStops() {
+        const managed = new Set();
+        for (const cell of this.cells) {
+            this.setTabIndex(cell.element, cell === this.active ? '0' : '-1', managed);
+            for (const element of cell.element.querySelectorAll(interactiveSelector)) {
+                if (!this.isOwnControl(cell, element))
+                    continue;
+                managed.add(element);
+                if (this.editing && cell === this.active) {
+                    if (this.originalTabIndexes.has(element))
+                        this.restoreTabIndex(element, this.originalTabIndexes.get(element));
+                }
+                else
+                    this.setTabIndex(element, '-1', managed);
+            }
+        }
+        for (const [element, tabIndex] of this.originalTabIndexes) {
+            if (!managed.has(element)) {
+                this.restoreTabIndex(element, tabIndex);
+                this.originalTabIndexes.delete(element);
+            }
+        }
+    }
+    setTabIndex(element, value, managed) {
+        managed.add(element);
+        if (!this.originalTabIndexes.has(element))
+            this.originalTabIndexes.set(element, element.getAttribute('tabindex'));
+        if (element.getAttribute('tabindex') !== value)
+            element.setAttribute('tabindex', value);
+    }
+    restoreTabIndex(element, value) {
+        if (value === null)
+            element.removeAttribute('tabindex');
+        else if (element.getAttribute('tabindex') !== value)
+            element.setAttribute('tabindex', value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KeyboardNavigationService, deps: [{ token: KEYBOARD_NAVIGATION_CONFIG, optional: true }, { token: SELECTION_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KeyboardNavigationService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KeyboardNavigationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [KEYBOARD_NAVIGATION_CONFIG]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SELECTION_SERVICE]
+                }] }] });
+
+class KeyboardGridDirective {
+    constructor() {
+        this.navigation = inject(KeyboardNavigationService);
+        this.element = inject(ElementRef).nativeElement;
+    }
+    get role() { return this.navigation.enabled ? 'grid' : null; }
+    get label() { return this.navigation.enabled ? this.navigation.ariaLabel ?? null : null; }
+    ngAfterViewChecked() { this.navigation.reconcile(); }
+    ngOnDestroy() { this.navigation.destroy(); }
+    onKeyDown(event) {
+        if (event.defaultPrevented || event.isComposing || event.key !== 'Enter' || !event.ctrlKey || event.altKey || event.metaKey ||
+            !(event.target instanceof Element) || event.target.closest('table') !== this.element)
+            return;
+        if (this.navigation.focusActive()) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KeyboardGridDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: KeyboardGridDirective, isStandalone: true, selector: "table[klesKeyboardGrid]", host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.role": "this.role", "attr.aria-label": "this.label" } }, providers: [KeyboardNavigationService], exportAs: ["klesKeyboardGrid"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KeyboardGridDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'table[klesKeyboardGrid]',
+                    exportAs: 'klesKeyboardGrid',
+                    standalone: true,
+                    providers: [KeyboardNavigationService],
+                }]
+        }], propDecorators: { role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], label: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+class KeyboardCellDirective {
+    constructor() {
+        this.navigation = inject(KeyboardNavigationService);
+        this.element = inject(ElementRef).nativeElement;
+    }
+    get role() { return this.navigation.enabled ? 'gridcell' : null; }
+    get enabled() { return this.navigation.enabled; }
+    ngOnInit() { this.navigation.register(this); }
+    ngOnDestroy() { this.navigation.unregister(this); }
+    onFocusIn(event) { this.navigation.focusIn(this, event); }
+    onFocusOut(event) { this.navigation.focusOut(event); }
+    onKeyDown(event) { this.navigation.keyDown(this, event); }
+    onClick(event) { this.navigation.click(this, event); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KeyboardCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: KeyboardCellDirective, isStandalone: true, selector: "td[klesKeyboardCell]", inputs: { row: ["klesKeyboardCell", "row"], columnDef: "columnDef" }, host: { attributes: { "data-kles-keyboard-cell": "" }, listeners: { "focusin": "onFocusIn($event)", "focusout": "onFocusOut($event)", "keydown": "onKeyDown($event)", "click": "onClick($event)" }, properties: { "attr.role": "this.role", "class.kles-keyboard-cell": "this.enabled" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KeyboardCellDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'td[klesKeyboardCell]', standalone: true, host: { 'data-kles-keyboard-cell': '' } }]
+        }], propDecorators: { row: [{
+                type: Input,
+                args: [{ required: true, alias: 'klesKeyboardCell' }]
+            }], columnDef: [{
+                type: Input,
+                args: [{ required: true }]
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], enabled: [{
+                type: HostBinding,
+                args: ['class.kles-keyboard-cell']
+            }], onFocusIn: [{
+                type: HostListener,
+                args: ['focusin', ['$event']]
+            }], onFocusOut: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
 class KlesTableConnectorService {
     constructor() {
         this._connected$ = new BehaviorSubject(false);
@@ -1686,6 +2065,9 @@ class KlesTableConnectorService {
     get selection() {
         return this.table.selection;
     }
+    get cursor() {
+        return this.table.cursor;
+    }
     get footer() {
         return this.table.footer;
     }
@@ -2122,81 +2504,70 @@ class ValidationService {
         this.rowSubscriptions = new Map();
     }
     listen(visibleRows, visibleColumns) {
-        const expectedColumnKeys = new Set();
-        const expectedRowKeys = new Set();
+        const expectedControls = new Set();
+        const expectedRows = new Set(visibleRows);
         visibleRows.forEach((row, rowIndex) => {
-            const rowSubscription = this.subscribeToRow(row, rowIndex);
-            const key = this.getRowKey(row);
-            expectedRowKeys.add(key);
-            this.rowSubscriptions.set(key, rowSubscription);
-            visibleColumns.forEach((column) => {
-                const columnKey = column;
-                const control = row.get(columnKey);
-                if (!control) {
+            let rowEntry = this.rowSubscriptions.get(row);
+            if (rowEntry) {
+                rowEntry.rowIndex = rowIndex;
+            }
+            else {
+                rowEntry = { row, rowIndex };
+                this.rowSubscriptions.set(row, rowEntry);
+                rowEntry.subscription = this.subscribeToRow(rowEntry);
+            }
+            visibleColumns.forEach((columnDef) => {
+                const control = row.get(columnDef);
+                if (!control)
                     return;
-                }
-                const key = this.getCellKey(row, columnKey);
-                expectedColumnKeys.add(key);
-                if (this.columnSubscriptions.has(key)) {
+                expectedControls.add(control);
+                const existing = this.columnSubscriptions.get(control);
+                if (existing) {
+                    existing.rowIndex = rowIndex;
                     return;
                 }
-                const subscription = this.subscribeToCell(row, rowIndex, columnKey, control);
-                this.columnSubscriptions.set(key, subscription);
-            });
-        });
-        this.unsubscribe(expectedRowKeys, expectedColumnKeys);
-    }
-    getCellKey(row, columnDef) {
-        return `${this.getRowKey(row)}:${columnDef}`;
-    }
-    getRowKey(row) {
-        return `${row.get('_id')?.value}`;
-    }
-    subscribeToCell(row, rowIndex, columnDef, control) {
-        return control.statusChanges
-            .pipe(takeUntilDestroyed(this.destroyRef), filter((status) => status === 'INVALID'))
-            .subscribe(() => {
-            this.eventsService.emit('cellValidationError', {
-                row,
-                rowIndex,
-                rawValue: row.getRawValue(),
-                value: row.value,
-                errors: control.errors,
-                controlsErrors: { columnDef: control.errors },
+                const entry = { row, rowIndex };
+                this.columnSubscriptions.set(control, entry);
+                entry.subscription = control.statusChanges.pipe(takeUntilDestroyed(this.destroyRef), filter((status) => status === 'INVALID')).subscribe(() => {
+                    this.eventsService.emit('cellValidationError', {
+                        row,
+                        rowIndex: entry.rowIndex,
+                        rawValue: row.getRawValue(),
+                        value: row.value,
+                        errors: control.errors,
+                        controlsErrors: { [columnDef]: control.errors },
+                    });
+                });
             });
         });
+        for (const [control, entry] of this.columnSubscriptions) {
+            if (!expectedControls.has(control)) {
+                entry.subscription?.unsubscribe();
+                this.columnSubscriptions.delete(control);
+            }
+        }
+        for (const [row, entry] of this.rowSubscriptions) {
+            if (!expectedRows.has(row)) {
+                entry.subscription?.unsubscribe();
+                this.rowSubscriptions.delete(row);
+            }
+        }
     }
-    subscribeToRow(row, rowIndex) {
-        return row.statusChanges
-            .pipe(takeUntilDestroyed(this.destroyRef), filter((status) => status === 'INVALID'))
-            .subscribe(() => {
+    subscribeToRow(entry) {
+        const row = entry.row;
+        return row.statusChanges.pipe(startWith(row.status), takeUntilDestroyed(this.destroyRef), filter((status) => status === 'INVALID')).subscribe(() => {
             this.eventsService.emit('rowValidationError', {
                 row,
-                rowIndex,
+                rowIndex: entry.rowIndex,
                 rawValue: row.getRawValue(),
                 value: row.value,
                 errors: row.errors,
-                controlsErrors: Object.keys(row.controls)
-                    .filter((key) => row.get(key)?.errors)
-                    .map((key) => ({ [key]: row.get(key)?.errors }))
-                    .reduce((a, b) => ({ ...a, ...b })),
+                controlsErrors: Object.fromEntries(Object.entries(row.controls)
+                    .filter(([, control]) => control.errors)
+                    .map(([name, control]) => [name, control.errors])),
             });
         });
     }
-    unsubscribe(expectedRowKeys, expectedColumnKeys) {
-        for (const [key, subscription] of this.columnSubscriptions.entries()) {
-            if (!expectedColumnKeys.has(key)) {
-                subscription.unsubscribe();
-                this.columnSubscriptions.delete(key);
-            }
-        }
-        for (const [key, subscription] of this.rowSubscriptions.entries()) {
-            if (!expectedRowKeys.has(key)) {
-                subscription.unsubscribe();
-                this.rowSubscriptions.delete(key);
-            }
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ValidationService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ValidationService }); }
 }
@@ -2727,6 +3098,9 @@ class ColumnDragDropService {
 }
 
 class TableComponent {
+    get cursor() {
+        return this.cursorService;
+    }
     constructor(host, connectorService, loader, datasourceService, tableService, dragDropRowService, columnDragDropService, rowAppearance, selectionService, columnsService, loadingService, paginatorService, scrollbarService, footerService, extraRowService, renderService, sortService, filterService, expandedRowStore, rowFactory, eventsService, rowService, cellService, emptyStateService, treeService, rowContextStore) {
         this.host = host;
         this.connectorService = connectorService;
@@ -2768,6 +3142,8 @@ class TableComponent {
         this.destroyRef = inject(DestroyRef);
         this.emptyStateComponent = KlesTableEmptyStateComponent;
         this.identityTrackBy = (_, row) => row;
+        this.cursorService = inject(CursorService);
+        this.intl = inject(KlesTableIntl);
         this.columns = this.columnsService.columns;
         this.displayedColumns = this.columnsService.displayedColumns;
         this.showFooter = this.footerService.footer;
@@ -3107,7 +3483,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 #form cdkScrollable [formGroup]=\"tableService.form\">\n    <table\n        mat-table\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                    [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            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            <ng-container *ngComponentOutlet=\"emptyStateService.component\"></ng-container>\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}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:hidden;background:var(--mat-sys-surface);display:grid;place-items:center}.table-empty-state-content{width:100%;height:100%}.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: "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 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -3140,7 +3516,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         RowContextPipe,
                         ResolveRowStylePipe,
                         ResolveRowClassPipe,
-                    ], template: "<form #form cdkScrollable [formGroup]=\"tableService.form\">\n    <table\n        mat-table\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                    [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            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            <ng-container *ngComponentOutlet=\"emptyStateService.component\"></ng-container>\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}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:hidden;background:var(--mat-sys-surface);display:grid;place-items:center}.table-empty-state-content{width:100%;height:100%}.scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none;overflow-y:hidden}.scrollbar-hidden::-webkit-scrollbar{display:none;overflow-y:hidden}\n"] }]
+                        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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: KlesTableConnectorService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOADER_SERVICE]
@@ -3630,7 +4009,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 }] }] });
 
 class HeaderService {
-    constructor(fm, filterService, filterStore, datasourceService, loader, columnsService, eventsService) {
+    constructor(fm, filterService, filterStore, datasourceService, loader, columnsService, eventsService, paginatorService) {
         this.fm = fm;
         this.filterService = filterService;
         this.filterStore = filterStore;
@@ -3638,6 +4017,7 @@ class HeaderService {
         this.loader = loader;
         this.columnsService = columnsService;
         this.eventsService = eventsService;
+        this.paginatorService = paginatorService;
         this.destroyRef = inject(DestroyRef);
         this.filterableColumns = this.columnsService
             .columns()
@@ -3678,6 +4058,7 @@ class HeaderService {
             changedFilter: undefined,
         }))
             .subscribe(({ filters, changedFilter }) => {
+            this.paginatorService.firstPage();
             if (this.filterService) {
                 const prepared = this.filterService.formatData(filters);
                 this.datasourceService.datasource.filter = JSON.stringify(prepared);
@@ -3703,7 +4084,7 @@ class HeaderService {
             this.fm.getHeader().patchValue(header, { emitEvent: false });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderService, deps: [{ token: KlesForm }, { token: FilterService, optional: true }, { token: FilterStore, optional: true }, { token: DATASOURCE_SERVICE }, { token: LOADER_SERVICE }, { token: ColumnsService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderService, deps: [{ token: KlesForm }, { token: FilterService, optional: true }, { token: FilterStore, optional: true }, { token: DATASOURCE_SERVICE }, { token: LOADER_SERVICE }, { token: ColumnsService }, { token: EventsService }, { token: PaginatorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderService, decorators: [{
@@ -3718,14 +4099,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOADER_SERVICE]
-                }] }, { type: ColumnsService }, { type: EventsService }] });
+                }] }, { type: ColumnsService }, { type: EventsService }, { type: PaginatorService }] });
 class HeaderLazyService {
-    constructor(fm, filterStore, loader, columnsService, eventsService) {
+    constructor(fm, filterStore, loader, columnsService, eventsService, paginatorService) {
         this.fm = fm;
         this.filterStore = filterStore;
         this.loader = loader;
         this.columnsService = columnsService;
         this.eventsService = eventsService;
+        this.paginatorService = paginatorService;
         this.destroyRef = inject(DestroyRef);
         this.filterableColumns = this.columnsService
             .columns()
@@ -3766,6 +4148,7 @@ class HeaderLazyService {
             changedFilter: undefined,
         }))
             .subscribe(({ filters, changedFilter }) => {
+            this.paginatorService.firstPage();
             this.filterStore?.setFilters(filters);
             this.eventsService.emit('filterChange', {
                 filters,
@@ -3783,7 +4166,7 @@ class HeaderLazyService {
             this.fm.getHeader().patchValue(header, { emitEvent: false });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderLazyService, deps: [{ token: KlesForm }, { token: FilterStore, optional: true }, { token: LOADER_SERVICE }, { token: ColumnsService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderLazyService, deps: [{ token: KlesForm }, { token: FilterStore, optional: true }, { token: LOADER_SERVICE }, { token: ColumnsService }, { token: EventsService }, { token: PaginatorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderLazyService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderLazyService, decorators: [{
@@ -3793,7 +4176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOADER_SERVICE]
-                }] }, { type: ColumnsService }, { type: EventsService }] });
+                }] }, { type: ColumnsService }, { type: EventsService }, { type: PaginatorService }] });
 
 function getMultipleValuesInSingleSelectionError() {
     return Error('Cannot pass multiple values into SelectionModel with single-value mode.');
@@ -3974,17 +4357,26 @@ class AbstractSelectionService {
     isLoading(row) {
         return this._loadingRows().has(row);
     }
+    canSelectOnRowClick(row) {
+        return !!this.selectionConfig?.selectOnRowClick && this.canSelectRow(row);
+    }
+    canSelectRow(row) {
+        return (!!this.selectionConfig &&
+            !row.controls[this.key]?.disabled &&
+            !this.isLoading(row) &&
+            this.selectionModel.state !== KlesSelectionModelState.DISABLED &&
+            !this.selectionConfig.isDisabled?.(row));
+    }
     onRowClick(event, row) {
-        if (!this.selectionConfig?.selectOnRowClick || event.defaultPrevented || this.isInteractiveClick(event)) {
+        if (!this.canSelectOnRowClick(row) || event.defaultPrevented || this.isInteractiveClick(event)) {
             return;
         }
-        const control = row.controls[this.key];
-        if (control?.disabled ||
-            this.isLoading(row) ||
-            this.selectionModel.state === KlesSelectionModelState.DISABLED ||
-            this.selectionConfig.isDisabled?.(row)) {
+        this.toggleRowSelection(row);
+    }
+    toggleRowSelection(row) {
+        if (!this.canSelectRow(row))
             return;
-        }
+        const control = row.controls[this.key];
         const selected = !this.selectionModel.isSelected(row);
         if (control) {
             control.setValue(selected);
@@ -5079,6 +5471,10 @@ class DynamicTableLoaderDirective {
         const emptyState = this.tableConfig().emptyState;
         const emptyStateIntl = typeof emptyState === 'object' && emptyState !== null ? emptyState.intl : undefined;
         const configProviders = [
+            {
+                provide: KEYBOARD_NAVIGATION_CONFIG,
+                useValue: this.tableConfig().keyboardNavigation ?? { enabled: false },
+            },
             {
                 provide: COLUMNS,
                 useValue: signal(this.tableConfig().columns || []),
@@ -5098,6 +5494,13 @@ class DynamicTableLoaderDirective {
                     rowClass: this.tableConfig().rowClass,
                 },
             },
+            {
+                provide: ROW_VALIDATION_CONFIG,
+                useValue: {
+                    lineValidations: this.tableConfig().lineValidations,
+                    lineAsyncValidations: this.tableConfig().lineAsyncValidations,
+                },
+            },
             {
                 provide: FOOTER,
                 useValue: signal(this.tableConfig().footer ?? false),
@@ -5198,6 +5601,7 @@ class DynamicTableLoaderDirective {
                 },
             ];
         const featureProviders = [
+            RowFormFactory,
             TreeService,
             RenderService,
             ExtraRowService,
@@ -5214,6 +5618,7 @@ class DynamicTableLoaderDirective {
             ...(this.tableConfig().infinite ? [InfiniteScrollService] : []),
             EventsService,
             RowService,
+            CursorService,
             CellService,
             CellValueChangeService,
             ValidationService,
@@ -5392,6 +5797,9 @@ class KlesTableComponent {
     get selection() {
         return this.connectorService.selection;
     }
+    get cursor() {
+        return this.connectorService.cursor;
+    }
     get form() {
         return this.connectorService.form;
     }
@@ -5579,5 +5987,5 @@ var AlignCell;
  * Generated bundle index. Do not edit.
  */
 
-export { AlignCell, COLUMNS, COLUMN_DRAG_DROP, DATASOURCE_SERVICE, DRAG_DROP_CONFIG, EMPTY_STATE_CONFIG, EXTRA_ROWS, FOOTER, HEADER_SERVICE, INFINITE_SCROLL_CONFIG, KLES_DRAG_DROP_ROW_CONTEXT, KlesMaterialTableModule, KlesTableComponent, KlesTableEmptyStateComponent, KlesTableFooterStartDirective, KlesTableIntl, LINES_SERVICE, LOADER_CONFIG, LOADER_SERVICE, MULTI_UNFOLD, PAGINATOR_CONFIG, ROW_APPEARANCE_CONFIG, ROW_DRAG_DROP, SCROLLBAR_ORCHESTRATOR_SERVICE, SELECTION_CONFIG, SELECTION_SERVICE, SORT_CONFIG, SORT_SERVICE, Span, TABLE_SERVICE, TableComponent, linesLazyLoader, linesLoader, selectionConfig };
+export { AlignCell, COLUMNS, COLUMN_DRAG_DROP, CursorService, DATASOURCE_SERVICE, DRAG_DROP_CONFIG, EMPTY_STATE_CONFIG, EXTRA_ROWS, FOOTER, HEADER_SERVICE, INFINITE_SCROLL_CONFIG, KEYBOARD_NAVIGATION_CONFIG, KLES_DRAG_DROP_ROW_CONTEXT, KeyboardCellDirective, KeyboardGridDirective, KlesMaterialTableModule, KlesTableComponent, KlesTableEmptyStateComponent, KlesTableFooterStartDirective, KlesTableIntl, LINES_SERVICE, LOADER_CONFIG, LOADER_SERVICE, MULTI_UNFOLD, PAGINATOR_CONFIG, ROW_APPEARANCE_CONFIG, ROW_DRAG_DROP, ROW_VALIDATION_CONFIG, SCROLLBAR_ORCHESTRATOR_SERVICE, SELECTION_CONFIG, SELECTION_SERVICE, SORT_CONFIG, SORT_SERVICE, Span, TABLE_SERVICE, TableComponent, linesLazyLoader, linesLoader, selectionConfig };
 //# sourceMappingURL=3kles-kles-material-table-v2.mjs.map