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

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, ViewChild, effect, Output, NgModule } 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 * as i19 from '@angular/forms';
 import { FormControl, FormGroup, FormArray, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from '@angular/material/button';
@@ -21,11 +21,11 @@ import { componentMapper, klesFieldControlFactory, klesFieldUiFactory, GroupUiSt
 import * as i4 from '@angular/material/sort';
 import { MatSortModule, MatSort } from '@angular/material/sort';
 import * as i25 from '@angular/cdk/drag-drop';
-import { CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
+import { CdkDragHandle, DragDropModule, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
 import * as i26 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { Subject, BehaviorSubject, combineLatest, startWith, of, auditTime, switchMap, concat, catchError, map, filter, take, defer, defaultIfEmpty, fromEvent, skip, merge, debounceTime, distinctUntilChanged, scan, concatMap, withLatestFrom, shareReplay } from 'rxjs';
-import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
 import * as _ from 'lodash';
 import ___default from 'lodash';
 import * as i3 from '@angular/material/tooltip';
@@ -43,10 +43,10 @@ class HeaderFieldPipe {
             ...col.headerCell?.field,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: HeaderFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: HeaderFieldPipe, isStandalone: true, name: "headerField" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: HeaderFieldPipe, isStandalone: true, name: "headerField" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: HeaderFieldPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderFieldPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'headerField',
@@ -60,10 +60,10 @@ class CellFieldPipe {
             return null;
         return { name: col.columnDef, canExpand: col.canExpand, ...col.cell?.field };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CellFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: CellFieldPipe, isStandalone: true, name: "cellField" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CellFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: CellFieldPipe, isStandalone: true, name: "cellField" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CellFieldPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CellFieldPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'cellField',
@@ -76,10 +76,10 @@ class ExtraCellFieldPipe {
             return null;
         return { name: col.columnDef, ...col.field };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ExtraCellFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: ExtraCellFieldPipe, isStandalone: true, name: "extraCellField" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExtraCellFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: ExtraCellFieldPipe, isStandalone: true, name: "extraCellField" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ExtraCellFieldPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExtraCellFieldPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'extraCellField',
@@ -95,6 +95,7 @@ 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_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');
 const KLES_DRAG_DROP_ROW_CONTEXT = new InjectionToken('KLES_DRAG_DROP_ROW_CONTEXT');
 const PAGINATOR_CONFIG = new InjectionToken('PAGINATOR_CONFIG');
@@ -116,10 +117,10 @@ class ResolveNgStylePipe {
             return {};
         return typeof style === 'function' ? style(value, status, row, rowStatus) : style;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ResolveNgStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: ResolveNgStylePipe, isStandalone: true, name: "resolveNgStyle" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResolveNgStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: ResolveNgStylePipe, isStandalone: true, name: "resolveNgStyle" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ResolveNgStylePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResolveNgStylePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'resolveNgStyle',
@@ -153,10 +154,10 @@ class EventsService {
     complete() {
         this.eventsSubject.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EventsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EventsService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EventsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EventsService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EventsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EventsService, decorators: [{
             type: Injectable
         }] });
 
@@ -168,12 +169,14 @@ class ColumnsService {
             return this.getVisibleColumns()
                 .filter((column) => column.sticky === true)
                 .at(-1)?.columnDef;
-        }, ...(ngDevMode ? [{ debugName: "stickyStartBoundary" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stickyStartBoundary" }] : /* istanbul ignore next */ []));
         this.stickyEndBoundary = computed(() => {
             return this.getVisibleColumns()
                 .filter((column) => column.stickyEnd === true)
                 .at(0)?.columnDef;
-        }, ...(ngDevMode ? [{ debugName: "stickyEndBoundary" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stickyEndBoundary" }] : /* istanbul ignore next */ []));
     }
     register() {
         this.setDisplayedColumns();
@@ -248,7 +251,8 @@ class ColumnsService {
     setDisplayedColumns() {
         this.displayedColumns = computed(() => {
             return this.getVisibleColumns().map((column) => column.columnDef);
-        }, ...(ngDevMode ? [{ debugName: "displayedColumns" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayedColumns" }] : /* istanbul ignore next */ []));
     }
     getVisibleColumns() {
         return this._columns().filter((column) => {
@@ -258,10 +262,10 @@ class ColumnsService {
             return column.visible !== false;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ColumnsService, deps: [{ token: COLUMNS }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ColumnsService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ColumnsService, deps: [{ token: COLUMNS }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ColumnsService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ColumnsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ColumnsService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -634,10 +638,10 @@ class ResizableColumnDirective {
     clearDocumentListeners() {
         this.documentCleanups.splice(0).forEach((cleanup) => cleanup());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ResizableColumnDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: EventsService }, { token: ColumnsService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.19", type: ResizableColumnDirective, isStandalone: true, selector: "th[appResizableColumn]", inputs: { column: { classPropertyName: "column", publicName: "appResizableColumn", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.appResizableColumn": "this.appResizableColumnAttr" } }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResizableColumnDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: EventsService }, { token: ColumnsService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: ResizableColumnDirective, isStandalone: true, selector: "th[appResizableColumn]", inputs: { column: { classPropertyName: "column", publicName: "appResizableColumn", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.appResizableColumn": "this.appResizableColumnAttr" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ResizableColumnDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResizableColumnDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'th[appResizableColumn]', standalone: true }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: EventsService }, { type: ColumnsService }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "appResizableColumn", required: true }] }], appResizableColumnAttr: [{
@@ -649,12 +653,12 @@ class FooterFieldPipe {
     transform(col) {
         if (!col)
             return null;
-        return { name: col.columnDef, ...col.footerCell.field };
+        return { name: col.columnDef, ...col.footerCell?.field };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FooterFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: FooterFieldPipe, isStandalone: true, name: "footerField" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FooterFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: FooterFieldPipe, isStandalone: true, name: "footerField" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FooterFieldPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FooterFieldPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'footerField',
@@ -671,10 +675,10 @@ class UiFieldPipe {
             return undefined;
         return this.tableService?.klesForm.uiStore.get(control);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: UiFieldPipe, isStandalone: true, name: "uiField" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: UiFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: UiFieldPipe, isStandalone: true, name: "uiField" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiFieldPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: UiFieldPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'uiField',
@@ -694,10 +698,10 @@ class SpanPipe {
         }
         return span;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SpanPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: SpanPipe, isStandalone: true, name: "spanPipe" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SpanPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: SpanPipe, isStandalone: true, name: "spanPipe" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SpanPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SpanPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'spanPipe',
@@ -711,10 +715,10 @@ class ResolveRowStylePipe {
             return {};
         return typeof style === 'function' ? style(row, status, index, context) : style;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ResolveRowStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: ResolveRowStylePipe, isStandalone: true, name: "resolveRowStyle" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResolveRowStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: ResolveRowStylePipe, isStandalone: true, name: "resolveRowStyle" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ResolveRowStylePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResolveRowStylePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'resolveRowStyle',
@@ -727,10 +731,10 @@ class ResolveRowClassPipe {
             return [];
         return typeof classes === 'function' ? classes(row, status, index, context) : classes;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ResolveRowClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: ResolveRowClassPipe, isStandalone: true, name: "resolveRowClass" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResolveRowClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: ResolveRowClassPipe, isStandalone: true, name: "resolveRowClass" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ResolveRowClassPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResolveRowClassPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'resolveRowClass',
@@ -771,10 +775,10 @@ class ExpandedRowStore {
             this.expand(id);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ExpandedRowStore, deps: [{ token: MULTI_UNFOLD }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ExpandedRowStore }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExpandedRowStore, deps: [{ token: MULTI_UNFOLD }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExpandedRowStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ExpandedRowStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExpandedRowStore, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -799,10 +803,10 @@ class LoaderChildrensService {
     refresh() {
         this._refresh$.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoaderChildrensService, deps: [{ token: LOADER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoaderChildrensService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoaderChildrensService, deps: [{ token: LOADER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoaderChildrensService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoaderChildrensService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoaderChildrensService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -852,10 +856,10 @@ 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: "21.2.19", ngImport: i0, type: RowFormFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RowFormFactory, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowFormFactory, deps: [], 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: "21.2.19", ngImport: i0, type: RowFormFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowFormFactory, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -887,10 +891,10 @@ class RowContextStore {
     delete(row) {
         this.contexts.delete(row);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RowContextStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RowContextStore }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowContextStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowContextStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RowContextStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowContextStore, decorators: [{
             type: Injectable
         }] });
 
@@ -1213,10 +1217,10 @@ class KlesForm {
     notifyRowsStructureChanged() {
         this.rowsStructureChangedSubject.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesForm, deps: [{ token: ColumnsService }, { token: RowFormFactory }, { token: RowContextStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesForm }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesForm, deps: [{ token: ColumnsService }, { token: RowFormFactory }, { token: RowContextStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesForm }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesForm, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: ColumnsService }, { type: RowFormFactory }, { type: RowContextStore }] });
 
@@ -1231,8 +1235,10 @@ class TreeService {
         this.destroyRef = inject(DestroyRef);
         this.expandedSubject = new BehaviorSubject(new Set());
         this.expandedIds$ = this.expandedSubject.asObservable();
-        this.expandedIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedIds" }] : /* istanbul ignore next */ []));
-        this.loadingIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "loadingIds" }] : /* istanbul ignore next */ []));
+        this.expandedIds = signal(new Set(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandedIds" }] : /* istanbul ignore next */ []));
+        this.loadingIds = signal(new Set(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loadingIds" }] : /* istanbul ignore next */ []));
         this.fm.rowsReplaced$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.reset());
     }
     toggle(id, group, depth) {
@@ -1362,10 +1368,10 @@ class TreeService {
             level,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TreeService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TreeService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TreeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TreeService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -1375,22 +1381,32 @@ class KlesCellComponent {
         this.expandedRowStore = inject(ExpandedRowStore);
         this.treeService = inject(TreeService);
         this.eventsService = inject(EventsService);
-        this.ui = input.required(...(ngDevMode ? [{ debugName: "ui" }] : /* istanbul ignore next */ []));
-        this.group = input.required(...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
-        this.column = input.required(...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
-        this.rowIndex = input.required(...(ngDevMode ? [{ debugName: "rowIndex" }] : /* istanbul ignore next */ []));
-        this.dragHandle = input(false, ...(ngDevMode ? [{ debugName: "dragHandle" }] : /* istanbul ignore next */ []));
+        this.ui = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ui" }] : /* istanbul ignore next */ []));
+        this.group = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
+        this.column = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+        this.rowIndex = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowIndex" }] : /* istanbul ignore next */ []));
+        this.dragHandle = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragHandle" }] : /* istanbul ignore next */ []));
         this.expandedRow = computed(() => {
             return (this.column().canExpand ?? false) && (this.ui().get(this.column().columnDef)?.value().expandedRow ?? false);
-        }, ...(ngDevMode ? [{ debugName: "expandedRow" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandedRow" }] : /* istanbul ignore next */ []));
         this.expandedNode = computed(() => {
             return (this.column().canExpandNode ?? false) && (this.ui().get(this.column().columnDef)?.value().expandedNode ?? false);
-        }, ...(ngDevMode ? [{ debugName: "expandedNode" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandedNode" }] : /* istanbul ignore next */ []));
         this.hasChildren = computed(() => {
             return this.treeService.hasChildren(this.group(), this.group().getRawValue()._depth);
-        }, ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
-        this.depth = computed(() => Math.max(0, this.group().getRawValue()._depth ?? 0), ...(ngDevMode ? [{ debugName: "depth" }] : /* istanbul ignore next */ []));
-        this.loadingNode = computed(() => this.treeService.isLoading(this.group().getRawValue()._id), ...(ngDevMode ? [{ debugName: "loadingNode" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
+        this.depth = computed(() => Math.max(0, this.group().getRawValue()._depth ?? 0), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "depth" }] : /* istanbul ignore next */ []));
+        this.loadingNode = computed(() => this.treeService.isLoading(this.group().getRawValue()._id), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loadingNode" }] : /* istanbul ignore next */ []));
         this.column$ = toObservable(this.column);
     }
     ngOnInit() {
@@ -1436,31 +1452,48 @@ class KlesCellComponent {
             this.ui().get(this.column().columnDef)?.patchValue({ expandedNode });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesCellComponent, isStandalone: true, selector: "kles-cell", inputs: { ui: { classPropertyName: "ui", publicName: "ui", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, dragHandle: { classPropertyName: "dragHandle", publicName: "dragHandle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (dragHandle()) {\n    <button\n        type=\"button\"\n        matIconButton\n        cdkDragHandle\n        class=\"drag-handle\"\n        aria-label=\"D\u00E9placer la ligne\"\n        (click)=\"stopPropagation($event)\"\n        (dblclick)=\"stopPropagation($event)\"\n    >\n        <mat-icon>drag_indicator</mat-icon>\n    </button>\n}\n@if (column().canExpand) {\n    <button matIconButton class=\"expand-button\" (click)=\"expandRow(); stopPropagation($event)\">\n        @if (this.expandedRow()) {\n            <mat-icon>keyboard_arrow_down</mat-icon>\n        } @else {\n            <mat-icon>chevron_right</mat-icon>\n        }\n    </button>\n}\n@if (column().canExpandNode) {\n    <span class=\"tree-indent\" [style.width.px]=\"depth() * 24\" aria-hidden=\"true\"></span>\n    @if (hasChildren()) {\n        <button\n            matIconButton\n            class=\"expand-button\"\n            [disabled]=\"loadingNode()\"\n            [attr.aria-expanded]=\"expandedNode()\"\n            [attr.aria-label]=\"expandedNode() ? 'R\u00E9duire la ligne' : 'D\u00E9velopper la ligne'\"\n            (click)=\"expandNode(); stopPropagation($event)\"\n        >\n            @if (loadingNode()) {\n                <mat-icon class=\"tree-loading-icon\">more_horiz</mat-icon>\n            } @else if (expandedNode()) {\n                <mat-icon>keyboard_arrow_down</mat-icon>\n            } @else {\n                <mat-icon>chevron_right</mat-icon>\n            }\n        </button>\n    } @else {\n        <span class=\"expand-button-spacer\" aria-hidden=\"true\"></span>\n    }\n}\n<div class=\"cell-field\"><ng-content></ng-content></div>\n", styles: [":host{display:flex;flex-direction:row;justify-content:inherit;gap:5px;align-items:center}.cell-field{min-width:0;flex-grow:1;justify-content:inherit;flex-direction:column;display:flex;text-align:center}.tree-indent{flex:0 0 auto}.expand-button-spacer{flex:0 0 28px;width:28px;height:28px}.tree-loading-icon{animation:tree-loading-pulse .8s ease-in-out infinite alternate}@keyframes tree-loading-pulse{0%{opacity:.35}to{opacity:1}}.expand-button.mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 22px;width:28px;height:28px;padding:0;display:grid;place-items:center}.expand-button.mat-mdc-icon-button .mat-icon{width:22px;height:22px;font-size:22px;line-height:22px;margin:0}.drag-handle.mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 32px;--mdc-icon-button-icon-size: 24px;flex:0 0 32px;width:32px;height:32px;padding:0;cursor:grab;touch-action:none;display:grid;place-items:center}.drag-handle.mat-mdc-icon-button .mat-icon{width:24px;height:24px;font-size:24px;line-height:24px;margin:0}.drag-handle.mat-mdc-icon-button:active{cursor:grabbing}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: KlesCellComponent, isStandalone: true, selector: "kles-cell", inputs: { ui: { classPropertyName: "ui", publicName: "ui", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, dragHandle: { classPropertyName: "dragHandle", publicName: "dragHandle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (dragHandle()) {\n    <button\n        type=\"button\"\n        matIconButton\n        cdkDragHandle\n        class=\"drag-handle\"\n        aria-label=\"D\u00E9placer la ligne\"\n        (click)=\"stopPropagation($event)\"\n        (dblclick)=\"stopPropagation($event)\"\n    >\n        <mat-icon>drag_indicator</mat-icon>\n    </button>\n}\n@if (column().canExpand) {\n    <button matIconButton class=\"expand-button\" (click)=\"expandRow(); stopPropagation($event)\">\n        @if (this.expandedRow()) {\n            <mat-icon>keyboard_arrow_down</mat-icon>\n        } @else {\n            <mat-icon>chevron_right</mat-icon>\n        }\n    </button>\n}\n@if (column().canExpandNode) {\n    <span class=\"tree-indent\" [style.width.px]=\"depth() * 24\" aria-hidden=\"true\"></span>\n    @if (hasChildren()) {\n        <button\n            matIconButton\n            class=\"expand-button\"\n            [disabled]=\"loadingNode()\"\n            [attr.aria-expanded]=\"expandedNode()\"\n            [attr.aria-label]=\"expandedNode() ? 'R\u00E9duire la ligne' : 'D\u00E9velopper la ligne'\"\n            (click)=\"expandNode(); stopPropagation($event)\"\n        >\n            @if (loadingNode()) {\n                <mat-icon class=\"tree-loading-icon\">more_horiz</mat-icon>\n            } @else if (expandedNode()) {\n                <mat-icon>keyboard_arrow_down</mat-icon>\n            } @else {\n                <mat-icon>chevron_right</mat-icon>\n            }\n        </button>\n    } @else {\n        <span class=\"expand-button-spacer\" aria-hidden=\"true\"></span>\n    }\n}\n<div class=\"cell-field\"><ng-content></ng-content></div>\n", styles: [":host{display:flex;flex-direction:row;justify-content:inherit;gap:5px;align-items:center}.cell-field{min-width:0;flex-grow:1;justify-content:inherit;flex-direction:column;display:flex;text-align:var(--align, center)}.tree-indent{flex:0 0 auto}.expand-button-spacer{flex:0 0 28px;width:28px;height:28px}.tree-loading-icon{animation:tree-loading-pulse .8s ease-in-out infinite alternate}@keyframes tree-loading-pulse{0%{opacity:.35}to{opacity:1}}.expand-button.mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 22px;width:28px;height:28px;padding:0;display:grid;place-items:center}.expand-button.mat-mdc-icon-button .mat-icon{width:22px;height:22px;font-size:22px;line-height:22px;margin:0}.drag-handle.mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 32px;--mdc-icon-button-icon-size: 24px;flex:0 0 32px;width:32px;height:32px;padding:0;cursor:grab;touch-action:none;display:grid;place-items:center}.drag-handle.mat-mdc-icon-button .mat-icon{width:24px;height:24px;font-size:24px;line-height:24px;margin:0}.drag-handle.mat-mdc-icon-button:active{cursor:grabbing}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kles-cell', standalone: true, imports: [CommonModule, MatIconModule, MatButtonModule, CdkDragHandle], template: "@if (dragHandle()) {\n    <button\n        type=\"button\"\n        matIconButton\n        cdkDragHandle\n        class=\"drag-handle\"\n        aria-label=\"D\u00E9placer la ligne\"\n        (click)=\"stopPropagation($event)\"\n        (dblclick)=\"stopPropagation($event)\"\n    >\n        <mat-icon>drag_indicator</mat-icon>\n    </button>\n}\n@if (column().canExpand) {\n    <button matIconButton class=\"expand-button\" (click)=\"expandRow(); stopPropagation($event)\">\n        @if (this.expandedRow()) {\n            <mat-icon>keyboard_arrow_down</mat-icon>\n        } @else {\n            <mat-icon>chevron_right</mat-icon>\n        }\n    </button>\n}\n@if (column().canExpandNode) {\n    <span class=\"tree-indent\" [style.width.px]=\"depth() * 24\" aria-hidden=\"true\"></span>\n    @if (hasChildren()) {\n        <button\n            matIconButton\n            class=\"expand-button\"\n            [disabled]=\"loadingNode()\"\n            [attr.aria-expanded]=\"expandedNode()\"\n            [attr.aria-label]=\"expandedNode() ? 'R\u00E9duire la ligne' : 'D\u00E9velopper la ligne'\"\n            (click)=\"expandNode(); stopPropagation($event)\"\n        >\n            @if (loadingNode()) {\n                <mat-icon class=\"tree-loading-icon\">more_horiz</mat-icon>\n            } @else if (expandedNode()) {\n                <mat-icon>keyboard_arrow_down</mat-icon>\n            } @else {\n                <mat-icon>chevron_right</mat-icon>\n            }\n        </button>\n    } @else {\n        <span class=\"expand-button-spacer\" aria-hidden=\"true\"></span>\n    }\n}\n<div class=\"cell-field\"><ng-content></ng-content></div>\n", styles: [":host{display:flex;flex-direction:row;justify-content:inherit;gap:5px;align-items:center}.cell-field{min-width:0;flex-grow:1;justify-content:inherit;flex-direction:column;display:flex;text-align:center}.tree-indent{flex:0 0 auto}.expand-button-spacer{flex:0 0 28px;width:28px;height:28px}.tree-loading-icon{animation:tree-loading-pulse .8s ease-in-out infinite alternate}@keyframes tree-loading-pulse{0%{opacity:.35}to{opacity:1}}.expand-button.mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 22px;width:28px;height:28px;padding:0;display:grid;place-items:center}.expand-button.mat-mdc-icon-button .mat-icon{width:22px;height:22px;font-size:22px;line-height:22px;margin:0}.drag-handle.mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 32px;--mdc-icon-button-icon-size: 24px;flex:0 0 32px;width:32px;height:32px;padding:0;cursor:grab;touch-action:none;display:grid;place-items:center}.drag-handle.mat-mdc-icon-button .mat-icon{width:24px;height:24px;font-size:24px;line-height:24px;margin:0}.drag-handle.mat-mdc-icon-button:active{cursor:grabbing}\n"] }]
+            args: [{ selector: 'kles-cell', standalone: true, imports: [CommonModule, MatIconModule, MatButtonModule, CdkDragHandle], template: "@if (dragHandle()) {\n    <button\n        type=\"button\"\n        matIconButton\n        cdkDragHandle\n        class=\"drag-handle\"\n        aria-label=\"D\u00E9placer la ligne\"\n        (click)=\"stopPropagation($event)\"\n        (dblclick)=\"stopPropagation($event)\"\n    >\n        <mat-icon>drag_indicator</mat-icon>\n    </button>\n}\n@if (column().canExpand) {\n    <button matIconButton class=\"expand-button\" (click)=\"expandRow(); stopPropagation($event)\">\n        @if (this.expandedRow()) {\n            <mat-icon>keyboard_arrow_down</mat-icon>\n        } @else {\n            <mat-icon>chevron_right</mat-icon>\n        }\n    </button>\n}\n@if (column().canExpandNode) {\n    <span class=\"tree-indent\" [style.width.px]=\"depth() * 24\" aria-hidden=\"true\"></span>\n    @if (hasChildren()) {\n        <button\n            matIconButton\n            class=\"expand-button\"\n            [disabled]=\"loadingNode()\"\n            [attr.aria-expanded]=\"expandedNode()\"\n            [attr.aria-label]=\"expandedNode() ? 'R\u00E9duire la ligne' : 'D\u00E9velopper la ligne'\"\n            (click)=\"expandNode(); stopPropagation($event)\"\n        >\n            @if (loadingNode()) {\n                <mat-icon class=\"tree-loading-icon\">more_horiz</mat-icon>\n            } @else if (expandedNode()) {\n                <mat-icon>keyboard_arrow_down</mat-icon>\n            } @else {\n                <mat-icon>chevron_right</mat-icon>\n            }\n        </button>\n    } @else {\n        <span class=\"expand-button-spacer\" aria-hidden=\"true\"></span>\n    }\n}\n<div class=\"cell-field\"><ng-content></ng-content></div>\n", styles: [":host{display:flex;flex-direction:row;justify-content:inherit;gap:5px;align-items:center}.cell-field{min-width:0;flex-grow:1;justify-content:inherit;flex-direction:column;display:flex;text-align:var(--align, center)}.tree-indent{flex:0 0 auto}.expand-button-spacer{flex:0 0 28px;width:28px;height:28px}.tree-loading-icon{animation:tree-loading-pulse .8s ease-in-out infinite alternate}@keyframes tree-loading-pulse{0%{opacity:.35}to{opacity:1}}.expand-button.mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 22px;width:28px;height:28px;padding:0;display:grid;place-items:center}.expand-button.mat-mdc-icon-button .mat-icon{width:22px;height:22px;font-size:22px;line-height:22px;margin:0}.drag-handle.mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 32px;--mdc-icon-button-icon-size: 24px;flex:0 0 32px;width:32px;height:32px;padding:0;cursor:grab;touch-action:none;display:grid;place-items:center}.drag-handle.mat-mdc-icon-button .mat-icon{width:24px;height:24px;font-size:24px;line-height:24px;margin:0}.drag-handle.mat-mdc-icon-button:active{cursor:grabbing}\n"] }]
         }], propDecorators: { ui: [{ type: i0.Input, args: [{ isSignal: true, alias: "ui", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: true }] }], dragHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragHandle", required: false }] }] } });
 
 class KlesHeaderComponent {
     constructor() {
-        this.header = input.required(...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
-        this.group = input.required(...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
-        this.dragHandleSpacer = input(false, ...(ngDevMode ? [{ debugName: "dragHandleSpacer" }] : /* istanbul ignore next */ []));
-    }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesHeaderComponent, isStandalone: true, selector: "kles-header", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, dragHandleSpacer: { classPropertyName: "dragHandleSpacer", publicName: "dragHandleSpacer", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+        this.header = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+        this.group = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
+        this.dragHandleSpacer = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragHandleSpacer" }] : /* istanbul ignore next */ []));
+        this.columnDragHandle = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columnDragHandle" }] : /* istanbul ignore next */ []));
+        this.filterValue = toSignal(toObservable(computed(() => this.group().get(this.header().columnDef))).pipe(switchMap((control) => (control ? control.valueChanges.pipe(startWith(control.value)) : of(null)))), { initialValue: null });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: KlesHeaderComponent, isStandalone: true, selector: "kles-header", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, dragHandleSpacer: { classPropertyName: "dragHandleSpacer", publicName: "dragHandleSpacer", isSignal: true, isRequired: false, transformFunction: null }, columnDragHandle: { classPropertyName: "columnDragHandle", publicName: "columnDragHandle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
         <div
             class="header"
             mat-sort-header
             [disabled]="!header().sortable"
-            [arrowPosition]="header().sortArrowPosition"
+            [arrowPosition]="header().sortArrowPosition ?? 'after'"
             [matTooltip]="header().tooltip"
             matTooltipPosition="above"
         >
+            @if (columnDragHandle()) {
+                <button
+                    mat-icon-button
+                    cdkDragHandle
+                    type="button"
+                    class="column-drag-handle"
+                    [attr.aria-label]="'Move column ' + header().label"
+                    (click)="$event.stopPropagation()"
+                >
+                    <mat-icon>drag_indicator</mat-icon>
+                </button>
+            }
             {{ header().label }}
         </div>
 
@@ -1472,7 +1505,7 @@ class KlesHeaderComponent {
                 <ng-content></ng-content>
             </div>
 
-            @if (header().filterClearable && group().get(header().columnDef).value) {
+            @if (header().filterClearable && filterValue()) {
                 <div class="icon-button">
                     <button
                         mat-icon-button
@@ -1486,19 +1519,31 @@ class KlesHeaderComponent {
                 </div>
             }
         </div>
-    `, isInline: true, styles: [":host{padding-bottom:10px;display:flex;flex-direction:column;justify-content:inherit}.header{flex-grow:1;align-items:center;display:flex;justify-content:inherit}.filterHeader{display:flex;flex-grow:1;align-items:center;gap:2px}.filterHeader.has-drag-handle-spacer{gap:5px}.drag-handle-spacer{flex:0 0 32px;width:32px;height:32px}.field{flex-grow:1;text-align:center}.icon-button button[mat-icon-button].icon-button-small{width:24px;height:24px;line-height:24px;padding:0}.icon-button button[mat-icon-button].icon-button-small .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.icon-button button[mat-icon-button].icon-button-small .mat-mdc-button-ripple{font-size:inherit;width:inherit;height:inherit;line-height:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "component", type: i4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }] }); }
+    `, isInline: true, styles: [":host{padding-bottom:10px;display:flex;flex-direction:column;justify-content:inherit}.header{flex-grow:1;align-items:center;display:flex;justify-content:inherit;gap:4px}.column-drag-handle{flex:0 0 28px;width:28px;height:28px;padding:2px;cursor:grab;color:currentColor;opacity:.65}.column-drag-handle:active{cursor:grabbing}.column-drag-handle mat-icon{width:20px;height:20px;font-size:20px;line-height:20px}.filterHeader{display:flex;flex-grow:1;align-items:center;gap:2px}.filterHeader.has-drag-handle-spacer{gap:5px}.drag-handle-spacer{flex:0 0 32px;width:32px;height:32px}.field{flex-grow:1;text-align:center}.icon-button button[mat-icon-button].icon-button-small{width:24px;height:24px;line-height:24px;padding:0}.icon-button button[mat-icon-button].icon-button-small .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.icon-button button[mat-icon-button].icon-button-small .mat-mdc-button-ripple{font-size:inherit;width:inherit;height:inherit;line-height:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "component", type: i4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i25.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-header', template: `
         <div
             class="header"
             mat-sort-header
             [disabled]="!header().sortable"
-            [arrowPosition]="header().sortArrowPosition"
+            [arrowPosition]="header().sortArrowPosition ?? 'after'"
             [matTooltip]="header().tooltip"
             matTooltipPosition="above"
         >
+            @if (columnDragHandle()) {
+                <button
+                    mat-icon-button
+                    cdkDragHandle
+                    type="button"
+                    class="column-drag-handle"
+                    [attr.aria-label]="'Move column ' + header().label"
+                    (click)="$event.stopPropagation()"
+                >
+                    <mat-icon>drag_indicator</mat-icon>
+                </button>
+            }
             {{ header().label }}
         </div>
 
@@ -1510,7 +1555,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 <ng-content></ng-content>
             </div>
 
-            @if (header().filterClearable && group().get(header().columnDef).value) {
+            @if (header().filterClearable && filterValue()) {
                 <div class="icon-button">
                     <button
                         mat-icon-button
@@ -1524,8 +1569,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 </div>
             }
         </div>
-    `, standalone: true, imports: [CommonModule, ReactiveFormsModule, MatIconModule, MatButtonModule, MatTooltipModule, MatSortModule], styles: [":host{padding-bottom:10px;display:flex;flex-direction:column;justify-content:inherit}.header{flex-grow:1;align-items:center;display:flex;justify-content:inherit}.filterHeader{display:flex;flex-grow:1;align-items:center;gap:2px}.filterHeader.has-drag-handle-spacer{gap:5px}.drag-handle-spacer{flex:0 0 32px;width:32px;height:32px}.field{flex-grow:1;text-align:center}.icon-button button[mat-icon-button].icon-button-small{width:24px;height:24px;line-height:24px;padding:0}.icon-button button[mat-icon-button].icon-button-small .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.icon-button button[mat-icon-button].icon-button-small .mat-mdc-button-ripple{font-size:inherit;width:inherit;height:inherit;line-height:inherit}\n"] }]
-        }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], dragHandleSpacer: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragHandleSpacer", required: false }] }] } });
+    `, standalone: true, imports: [CommonModule, ReactiveFormsModule, MatIconModule, MatButtonModule, MatTooltipModule, MatSortModule, DragDropModule], styles: [":host{padding-bottom:10px;display:flex;flex-direction:column;justify-content:inherit}.header{flex-grow:1;align-items:center;display:flex;justify-content:inherit;gap:4px}.column-drag-handle{flex:0 0 28px;width:28px;height:28px;padding:2px;cursor:grab;color:currentColor;opacity:.65}.column-drag-handle:active{cursor:grabbing}.column-drag-handle mat-icon{width:20px;height:20px;font-size:20px;line-height:20px}.filterHeader{display:flex;flex-grow:1;align-items:center;gap:2px}.filterHeader.has-drag-handle-spacer{gap:5px}.drag-handle-spacer{flex:0 0 32px;width:32px;height:32px}.field{flex-grow:1;text-align:center}.icon-button button[mat-icon-button].icon-button-small{width:24px;height:24px;line-height:24px;padding:0}.icon-button button[mat-icon-button].icon-button-small .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.icon-button button[mat-icon-button].icon-button-small .mat-mdc-button-ripple{font-size:inherit;width:inherit;height:inherit;line-height:inherit}\n"] }]
+        }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], dragHandleSpacer: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragHandleSpacer", required: false }] }], columnDragHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnDragHandle", required: false }] }] } });
 
 class HeaderPipe {
     transform(col) {
@@ -1539,10 +1584,10 @@ class HeaderPipe {
             ...col.headerCell,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: HeaderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: HeaderPipe, isStandalone: true, name: "header" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: HeaderPipe, isStandalone: true, name: "header" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: HeaderPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'header',
@@ -1556,10 +1601,10 @@ class KlesTableIntl {
         this.emptyStateTitle = 'No data';
         this.emptyStateDescription = 'There are no rows to display.';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesTableIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesTableIntl, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableIntl, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesTableIntl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableIntl, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1575,10 +1620,10 @@ class KlesTableEmptyStateComponent {
             this.changeDetectorRef.markForCheck();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesTableEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", 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.ɵ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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesTableEmptyStateComponent, decorators: [{
+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: () => [] });
@@ -1590,10 +1635,10 @@ class RowContextPipe {
     transform(row) {
         return row ? this.store.get(row) : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RowContextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: RowContextPipe, isStandalone: true, name: "rowContext" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowContextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: RowContextPipe, isStandalone: true, name: "rowContext" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RowContextPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowContextPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'rowContext',
@@ -1665,17 +1710,18 @@ class KlesTableConnectorService {
     refresh() {
         this.table?.refresh();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesTableConnectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesTableConnectorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableConnectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableConnectorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesTableConnectorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableConnectorService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
 class LoadingService {
     constructor(eventsService) {
         this.eventsService = eventsService;
-        this._loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : /* istanbul ignore next */ []));
+        this._loading = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_loading" }] : /* istanbul ignore next */ []));
     }
     get loading() {
         return this._loading.asReadonly();
@@ -1694,10 +1740,10 @@ class LoadingService {
         this._loading.set(false);
         this.eventsService.emit('loadingChange', { loading: false });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoadingService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoadingService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoadingService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoadingService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoadingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoadingService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: EventsService }] });
 
@@ -1716,10 +1762,10 @@ class PaginatorStore {
     reset() {
         this.s.next({ page: 0, perPage: this.config?.pageSize ?? 10 });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PaginatorStore, deps: [{ token: PAGINATOR_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PaginatorStore }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PaginatorStore, deps: [{ token: PAGINATOR_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PaginatorStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PaginatorStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PaginatorStore, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
@@ -1734,7 +1780,8 @@ class PaginatorService {
         this.paginatorStore = paginatorStore;
         this.datasourceService = datasourceService;
         this.eventsService = eventsService;
-        this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+        this._disabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
         this._pageChanged = new EventEmitter();
         this.destroyRef = inject(DestroyRef);
     }
@@ -1816,10 +1863,10 @@ class PaginatorService {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PaginatorService, deps: [{ token: PAGINATOR_CONFIG, optional: true }, { token: PaginatorStore, optional: true }, { token: DATASOURCE_SERVICE }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PaginatorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PaginatorService, deps: [{ token: PAGINATOR_CONFIG, optional: true }, { token: PaginatorStore, optional: true }, { token: DATASOURCE_SERVICE }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PaginatorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PaginatorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PaginatorService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
@@ -1873,10 +1920,10 @@ class ScrollbarService {
     getTop() {
         return this.element?.scrollTop;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScrollbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScrollbarService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScrollbarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarService, decorators: [{
             type: Injectable
         }] });
 
@@ -1902,10 +1949,10 @@ class FooterService {
         this._footer.set(false);
         this.eventsService.emit('footerVisibilityChange', { visible: false });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FooterService, deps: [{ token: FOOTER }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FooterService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FooterService, deps: [{ token: FOOTER }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FooterService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FooterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FooterService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -1916,12 +1963,14 @@ class ExtraRowService {
     constructor(_extraRowsConfig, expandedRowStore) {
         this._extraRowsConfig = _extraRowsConfig;
         this.expandedRowStore = expandedRowStore;
-        this.multiTemplateDataRows = computed(() => this._extraRowsConfig().length > 0, ...(ngDevMode ? [{ debugName: "multiTemplateDataRows" }] : /* istanbul ignore next */ []));
+        this.multiTemplateDataRows = computed(() => this._extraRowsConfig().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "multiTemplateDataRows" }] : /* istanbul ignore next */ []));
         this.rows = computed(() => this._extraRowsConfig().map((config) => ({
             ...config,
             when: this.createWhen(config),
             displayedColumns: config.cells.map((cel) => cel.columnDef),
-        })), ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        })), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
     }
     extraFields() {
         return this._extraRowsConfig()
@@ -1939,10 +1988,10 @@ class ExtraRowService {
             return config?.when;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ExtraRowService, deps: [{ token: EXTRA_ROWS }, { token: ExpandedRowStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ExtraRowService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExtraRowService, deps: [{ token: EXTRA_ROWS }, { token: ExpandedRowStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExtraRowService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ExtraRowService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExtraRowService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -1959,10 +2008,10 @@ class RenderService {
     forceRenderRows() {
         this._render.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RenderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RenderService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RenderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RenderService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RenderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RenderService, decorators: [{
             type: Injectable
         }] });
 
@@ -2058,10 +2107,10 @@ class CellValueChangeService {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CellValueChangeService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CellValueChangeService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CellValueChangeService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CellValueChangeService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CellValueChangeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CellValueChangeService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: EventsService }] });
 
@@ -2148,10 +2197,10 @@ class ValidationService {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ValidationService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ValidationService }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ValidationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ValidationService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: EventsService }] });
 
@@ -2162,7 +2211,8 @@ class DatasourceService {
         this.cellValueChangeService = cellValueChangeService;
         this.validationService = validationService;
         this.destroyRef = inject(DestroyRef);
-        this._isEmpty = signal(true, ...(ngDevMode ? [{ debugName: "_isEmpty" }] : /* istanbul ignore next */ []));
+        this._isEmpty = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_isEmpty" }] : /* istanbul ignore next */ []));
         this.isEmpty = this._isEmpty.asReadonly();
     }
     register() {
@@ -2188,10 +2238,10 @@ class DatasourceService {
             this.validationService.listen(rows, this.columnsService.getVisible());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DatasourceService, deps: [{ token: KlesForm }, { token: ColumnsService }, { token: CellValueChangeService }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DatasourceService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DatasourceService, deps: [{ token: KlesForm }, { token: ColumnsService }, { token: CellValueChangeService }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DatasourceService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DatasourceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DatasourceService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: KlesForm }, { type: ColumnsService }, { type: CellValueChangeService }, { type: ValidationService }] });
 class DatasourceLazyService {
@@ -2201,7 +2251,8 @@ class DatasourceLazyService {
         this.cellValueChangeService = cellValueChangeService;
         this.validationService = validationService;
         this.destroyRef = inject(DestroyRef);
-        this._isEmpty = signal(true, ...(ngDevMode ? [{ debugName: "_isEmpty" }] : /* istanbul ignore next */ []));
+        this._isEmpty = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_isEmpty" }] : /* istanbul ignore next */ []));
         this.isEmpty = this._isEmpty.asReadonly();
     }
     register() {
@@ -2227,10 +2278,10 @@ class DatasourceLazyService {
             this.validationService.listen(rows, this.columnsService.getVisible());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DatasourceLazyService, deps: [{ token: KlesForm }, { token: ColumnsService }, { token: CellValueChangeService }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DatasourceLazyService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DatasourceLazyService, deps: [{ token: KlesForm }, { token: ColumnsService }, { token: CellValueChangeService }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DatasourceLazyService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DatasourceLazyService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DatasourceLazyService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: KlesForm }, { type: ColumnsService }, { type: CellValueChangeService }, { type: ValidationService }] });
 
@@ -2304,10 +2355,10 @@ class FilterService {
             });
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FilterService, deps: [{ token: ColumnsService }, { token: DATASOURCE_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FilterService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FilterService, deps: [{ token: ColumnsService }, { token: DATASOURCE_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FilterService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FilterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FilterService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: ColumnsService }, { type: DatasourceService, decorators: [{
                     type: Inject,
@@ -2315,10 +2366,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 }] }] });
 
 class RowService {
-    constructor(eventsService) {
+    constructor(eventsService, selectionService) {
         this.eventsService = eventsService;
+        this.selectionService = selectionService;
     }
     onClick(event, row, rowIndex) {
+        this.selectionService.onRowClick(event, row);
         this.eventsService.emit('rowClick', {
             row,
             rowIndex,
@@ -2365,12 +2418,15 @@ class RowService {
             event,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RowService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RowService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowService, deps: [{ token: EventsService }, { token: SELECTION_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RowService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: EventsService }] });
+        }], ctorParameters: () => [{ type: EventsService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SELECTION_SERVICE]
+                }] }] });
 
 class CellService {
     constructor(eventsService) {
@@ -2414,17 +2470,18 @@ class CellService {
             control,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CellService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CellService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CellService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CellService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CellService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CellService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: EventsService }] });
 
 class EmptyStateService {
     constructor(config, eventsService) {
         this.eventsService = eventsService;
-        this._enabled = signal(true, ...(ngDevMode ? [{ debugName: "_enabled" }] : /* istanbul ignore next */ []));
+        this._enabled = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_enabled" }] : /* istanbul ignore next */ []));
         this.enabled = this._enabled.asReadonly();
         if (typeof config === 'boolean') {
             this._enabled.set(config);
@@ -2451,10 +2508,10 @@ class EmptyStateService {
     toggle() {
         this._enabled() ? this.disable() : this.enable();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EmptyStateService, deps: [{ token: EMPTY_STATE_CONFIG }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EmptyStateService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EmptyStateService, deps: [{ token: EMPTY_STATE_CONFIG }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EmptyStateService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EmptyStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EmptyStateService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -2629,14 +2686,55 @@ DragDropLazyService = __decorate([
     __param(0, Inject(DRAG_DROP_CONFIG))
 ], DragDropLazyService);
 
+class ColumnDragDropService {
+    constructor(config, columnsService) {
+        this.config = config;
+        this.columnsService = columnsService;
+        this.sortPredicate = (index, drag) => {
+            const target = this.visibleColumns()[index];
+            return target === undefined || this.isSameGroup(drag.data, target);
+        };
+        this.enable = config?.enable ?? false;
+    }
+    visibleColumns() {
+        return this.columnsService.columns().filter((column) => column.visibleWhen?.() ?? column.visible !== false);
+    }
+    isDragDisabled(column) {
+        return !this.enable || (this.config?.options?.dragDisabled?.(column) ?? false);
+    }
+    listDropped(event) {
+        if (!this.enable || event.previousIndex === event.currentIndex)
+            return;
+        const source = event.item.data;
+        const target = event.container.data[event.currentIndex];
+        if (!source || !target || !this.isSameGroup(source, target))
+            return;
+        const targetIndex = this.columnsService.columns().findIndex((column) => column.columnDef === target.columnDef);
+        if (targetIndex < 0)
+            return;
+        this.columnsService.setColumnPosition(source.columnDef, targetIndex);
+    }
+    isSameGroup(source, target) {
+        return this.groupOf(source) === this.groupOf(target);
+    }
+    groupOf(column) {
+        if (column.sticky === true)
+            return 'sticky-start';
+        if (column.stickyEnd === true)
+            return 'sticky-end';
+        return 'standard';
+    }
+}
+
 class TableComponent {
-    constructor(host, connectorService, loader, datasourceService, tableService, dragDropRowService, rowAppearance, selectionService, columnsService, loadingService, paginatorService, scrollbarService, footerService, extraRowService, renderService, sortService, filterService, expandedRowStore, rowFactory, eventsService, rowService, cellService, emptyStateService, treeService, rowContextStore) {
+    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;
         this.loader = loader;
         this.datasourceService = datasourceService;
         this.tableService = tableService;
         this.dragDropRowService = dragDropRowService;
+        this.columnDragDropService = columnDragDropService;
         this.rowAppearance = rowAppearance;
         this.selectionService = selectionService;
         this.columnsService = columnsService;
@@ -2656,13 +2754,20 @@ class TableComponent {
         this.emptyStateService = emptyStateService;
         this.treeService = treeService;
         this.rowContextStore = rowContextStore;
-        this.headerHeightPx = signal(56, ...(ngDevMode ? [{ debugName: "headerHeightPx" }] : /* istanbul ignore next */ []));
-        this.scrollHeightPx = signal(0, ...(ngDevMode ? [{ debugName: "scrollHeightPx" }] : /* istanbul ignore next */ []));
-        this.footerHeightPx = signal(0, ...(ngDevMode ? [{ debugName: "footerHeightPx" }] : /* istanbul ignore next */ []));
-        this.viewportWidthPx = signal(0, ...(ngDevMode ? [{ debugName: "viewportWidthPx" }] : /* istanbul ignore next */ []));
-        this.viewportScrollRangePx = signal(0, ...(ngDevMode ? [{ debugName: "viewportScrollRangePx" }] : /* istanbul ignore next */ []));
+        this.headerHeightPx = signal(56, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerHeightPx" }] : /* istanbul ignore next */ []));
+        this.scrollHeightPx = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollHeightPx" }] : /* istanbul ignore next */ []));
+        this.footerHeightPx = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerHeightPx" }] : /* istanbul ignore next */ []));
+        this.viewportWidthPx = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewportWidthPx" }] : /* istanbul ignore next */ []));
+        this.viewportScrollRangePx = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewportScrollRangePx" }] : /* istanbul ignore next */ []));
+        this.changeDetectorRef = inject(ChangeDetectorRef);
         this.destroyRef = inject(DestroyRef);
         this.emptyStateComponent = KlesTableEmptyStateComponent;
+        this.identityTrackBy = (_, row) => row;
         this.columns = this.columnsService.columns;
         this.displayedColumns = this.columnsService.displayedColumns;
         this.showFooter = this.footerService.footer;
@@ -2670,6 +2775,9 @@ class TableComponent {
         this.isEmpty = this.datasourceService.isEmpty;
         this.multiTemplateDataRows = this.extraRowService.multiTemplateDataRows;
         this.extraRows = this.extraRowService.rows;
+        this.tableService.form.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.changeDetectorRef.markForCheck();
+        });
         this.connectorService.connect(this);
         this.filterService?.register();
     }
@@ -2680,6 +2788,10 @@ class TableComponent {
         }
         return context;
     }
+    isRowSelected(row) {
+        this.selectionService.selectionModel?.count();
+        return this.selectionService.selectionModel?.isSelected(row) ?? false;
+    }
     get isLoadingClass() {
         return this.loadingService.loading();
     }
@@ -2867,11 +2979,35 @@ class TableComponent {
     }
     ngAfterViewInit() {
         this.calculHeaderHeight();
+        if (this.columnDragDropService.enable) {
+            this.scheduleColumnDragBinding();
+            this.drags.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.scheduleColumnDragBinding());
+        }
     }
     ngOnDestroy() {
         this._cleanup?.();
         this.scrollbarService.unregister();
     }
+    bindColumnDragsToHeader() {
+        const headerDropList = this.dropLists.find((dropList) => dropList.element.nativeElement.classList.contains('kles-column-drop-list'));
+        if (!headerDropList)
+            return;
+        const columns = this.columnsService.columns();
+        this.drags.forEach((drag) => {
+            if (!columns.includes(drag.data) || drag.dropContainer === headerDropList)
+                return;
+            drag.dropContainer?.removeItem(drag);
+            drag.dropContainer = headerDropList;
+            headerDropList.addItem(drag);
+        });
+    }
+    scheduleColumnDragBinding() {
+        queueMicrotask(() => {
+            if (!this.destroyRef.destroyed) {
+                this.bindColumnDragsToHeader();
+            }
+        });
+    }
     getColumnSeparator(column, section) {
         const separatorConfig = column.separator;
         if (separatorConfig === false || separatorConfig === undefined) {
@@ -2970,10 +3106,10 @@ class TableComponent {
             };
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TableComponent, deps: [{ token: i0.ElementRef }, { token: KlesTableConnectorService }, { token: LOADER_SERVICE }, { token: DATASOURCE_SERVICE }, { token: TABLE_SERVICE }, { token: ROW_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: "21.2.19", 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 }], ngImport: i0, template: "<form #form cdkScrollable [formGroup]=\"tableService.form\">\n    <table\n        mat-table\n        [dataSource]=\"dataSource\"\n        matSort\n        [trackBy]=\"multiTemplateDataRows() ? null : 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                    [appResizableColumn]=\"column\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'header') ?? getStickyStartSeparator(column, 'header')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'header')\"\n                    [ngStyle]=\"\n                        column.headerCell?.style?.ngStyle\n                            | resolveNgStyle\n                                : tableService.form.get(['header', column.columnDef])?.value\n                                : 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                            [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                        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 klesDynamicField [field]=\"column | cellField\" [group]=\"row\" [ui]=\"row | uiField\" [context]=\"row | rowContext\"></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                        column.footerCell?.style?.ngStyle\n                            | resolveNgStyle\n                                : tableService.form.get(['footer', column.columnDef])?.value\n                                : 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 mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: true\"></tr>\n\n        <tr\n            mat-row\n            *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns()\"\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 | spanPipe: displayedColumns().length\"\n                            [attr.rowspan]=\"extraColumn.rowspan\"\n                            [ngStyle]=\"\n                                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) 7%, var(--mat-sys-surface));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 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)}.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"] }, { 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.ɵ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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-table', standalone: true, imports: [
                         CommonModule,
@@ -3004,7 +3140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         RowContextPipe,
                         ResolveRowStylePipe,
                         ResolveRowClassPipe,
-                    ], template: "<form #form cdkScrollable [formGroup]=\"tableService.form\">\n    <table\n        mat-table\n        [dataSource]=\"dataSource\"\n        matSort\n        [trackBy]=\"multiTemplateDataRows() ? null : 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                    [appResizableColumn]=\"column\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'header') ?? getStickyStartSeparator(column, 'header')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'header')\"\n                    [ngStyle]=\"\n                        column.headerCell?.style?.ngStyle\n                            | resolveNgStyle\n                                : tableService.form.get(['header', column.columnDef])?.value\n                                : 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                            [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                        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 klesDynamicField [field]=\"column | cellField\" [group]=\"row\" [ui]=\"row | uiField\" [context]=\"row | rowContext\"></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                        column.footerCell?.style?.ngStyle\n                            | resolveNgStyle\n                                : tableService.form.get(['footer', column.columnDef])?.value\n                                : 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 mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: true\"></tr>\n\n        <tr\n            mat-row\n            *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns()\"\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 | spanPipe: displayedColumns().length\"\n                            [attr.rowspan]=\"extraColumn.rowspan\"\n                            [ngStyle]=\"\n                                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) 7%, var(--mat-sys-surface));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 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)}.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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: KlesTableConnectorService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOADER_SERVICE]
@@ -3017,6 +3153,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 }] }, { type: DragDropService, decorators: [{
                     type: Inject,
                     args: [ROW_DRAG_DROP]
+                }] }, { type: ColumnDragDropService, decorators: [{
+                    type: Inject,
+                    args: [COLUMN_DRAG_DROP]
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [ROW_APPEARANCE_CONFIG]
@@ -3037,6 +3176,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             }], formElemRef: [{
                 type: ViewChild,
                 args: ['form', { static: true }]
+            }], dropLists: [{
+                type: ViewChildren,
+                args: [CdkDropList]
+            }], drags: [{
+                type: ViewChildren,
+                args: [CdkDrag]
             }], isLoadingClass: [{
                 type: HostBinding,
                 args: ['class.loading']
@@ -3058,12 +3203,12 @@ class PaginateTableComponent {
     ngOnInit() {
         this.paginatorService.register(this.paginator);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PaginateTableComponent, deps: [{ token: PaginatorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: PaginateTableComponent, isStandalone: true, selector: "kles-paginate-table", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "table", first: true, predicate: TableComponent, descendants: true, static: true }], ngImport: i0, template: "<kles-table></kles-table>\n<mat-paginator [disabled]=\"disabled()\" class=\"paginator\"></mat-paginator>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:auto}.paginator{padding-bottom:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TableComponent, selector: "kles-table" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PaginateTableComponent, deps: [{ token: PaginatorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: PaginateTableComponent, isStandalone: true, selector: "kles-paginate-table", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "table", first: true, predicate: TableComponent, descendants: true, static: true }], ngImport: i0, template: "<kles-table></kles-table>\n<div class=\"table-footer\">\n    <div class=\"table-footer-start\">\n        <ng-content select=\"[klesTableFooterStart]\"></ng-content>\n    </div>\n    <mat-paginator [disabled]=\"disabled()\" class=\"paginator\"></mat-paginator>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:auto;container-type:inline-size}.table-footer{display:flex;flex:0 0 auto;align-items:center;gap:var(--kles-table-footer-gap, 12px);min-width:0;overflow-x:auto}.table-footer-start{display:flex;flex:1 1 0;align-items:center;gap:var(--kles-table-footer-gap, 12px);min-width:0;padding-inline:var(--kles-table-footer-padding-inline, 8px);box-sizing:border-box;overflow:hidden}.table-footer-start:empty{display:none}.paginator{flex:0 0 auto;margin-inline-start:auto;padding-bottom:4px}@container (max-width: 760px){.table-footer{flex-wrap:wrap}.table-footer-start{flex:1 1 100%;overflow-x:auto}.paginator{max-width:100%}}@container (max-width: 480px){.table-footer-start{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TableComponent, selector: "kles-table" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PaginateTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PaginateTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kles-paginate-table', standalone: true, imports: [CommonModule, TableComponent, MatPaginatorModule], template: "<kles-table></kles-table>\n<mat-paginator [disabled]=\"disabled()\" class=\"paginator\"></mat-paginator>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:auto}.paginator{padding-bottom:4px}\n"] }]
+            args: [{ selector: 'kles-paginate-table', standalone: true, imports: [CommonModule, TableComponent, MatPaginatorModule], template: "<kles-table></kles-table>\n<div class=\"table-footer\">\n    <div class=\"table-footer-start\">\n        <ng-content select=\"[klesTableFooterStart]\"></ng-content>\n    </div>\n    <mat-paginator [disabled]=\"disabled()\" class=\"paginator\"></mat-paginator>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:auto;container-type:inline-size}.table-footer{display:flex;flex:0 0 auto;align-items:center;gap:var(--kles-table-footer-gap, 12px);min-width:0;overflow-x:auto}.table-footer-start{display:flex;flex:1 1 0;align-items:center;gap:var(--kles-table-footer-gap, 12px);min-width:0;padding-inline:var(--kles-table-footer-padding-inline, 8px);box-sizing:border-box;overflow:hidden}.table-footer-start:empty{display:none}.paginator{flex:0 0 auto;margin-inline-start:auto;padding-bottom:4px}@container (max-width: 760px){.table-footer{flex-wrap:wrap}.table-footer-start{flex:1 1 100%;overflow-x:auto}.paginator{max-width:100%}}@container (max-width: 480px){.table-footer-start{display:none}}\n"] }]
         }], ctorParameters: () => [{ type: PaginatorService }], propDecorators: { paginator: [{
                 type: ViewChild,
                 args: [MatPaginator, { static: true }]
@@ -3087,10 +3232,10 @@ class SortStore {
     reset() {
         this.s.next(this.config || undefined);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SortStore, deps: [{ token: SORT_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SortStore }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SortStore, deps: [{ token: SORT_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SortStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SortStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SortStore, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
@@ -3133,10 +3278,10 @@ class AbstractSortService {
     sortChange() {
         return this._sortChange;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AbstractSortService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AbstractSortService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractSortService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractSortService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AbstractSortService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractSortService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: EventsService }] });
 class SortService extends AbstractSortService {
@@ -3227,10 +3372,10 @@ class SortService extends AbstractSortService {
             });
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SortService, deps: [{ token: SortStore, optional: true }, { token: ColumnsService }, { token: DATASOURCE_SERVICE }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SortService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SortService, deps: [{ token: SortStore, optional: true }, { token: ColumnsService }, { token: DATASOURCE_SERVICE }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SortService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SortService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SortService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: SortStore, decorators: [{
                     type: Optional
@@ -3256,10 +3401,10 @@ class SortLazyService extends AbstractSortService {
             this.sortStore?.setSort(event);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SortLazyService, deps: [{ token: SortStore, optional: true }, { token: DATASOURCE_SERVICE }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SortLazyService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SortLazyService, deps: [{ token: SortStore, optional: true }, { token: DATASOURCE_SERVICE }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SortLazyService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SortLazyService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SortLazyService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: SortStore, decorators: [{
                     type: Optional
@@ -3279,10 +3424,10 @@ class FilterStore {
     reset() {
         this.s.next({});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FilterStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FilterStore }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FilterStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FilterStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FilterStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FilterStore, decorators: [{
             type: Injectable
         }] });
 
@@ -3302,7 +3447,8 @@ class InfiniteScrollService {
         this.registered = false;
         this.loading = false;
         this.lastLoadedPage = 0;
-        this._loadingMore = signal(false, ...(ngDevMode ? [{ debugName: "_loadingMore" }] : /* istanbul ignore next */ []));
+        this._loadingMore = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_loadingMore" }] : /* istanbul ignore next */ []));
         this.loadingMore = this._loadingMore.asReadonly();
     }
     register(element) {
@@ -3371,10 +3517,10 @@ class InfiniteScrollService {
             requestAnimationFrame(() => this.loadNextPageIfNeeded());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteScrollService, deps: [{ token: INFINITE_SCROLL_CONFIG }, { token: LOADER_CONFIG }, { token: LOADER_SERVICE }, { token: LINES_SERVICE }, { token: PaginatorStore }, { token: SortStore }, { token: FilterStore }, { token: KlesForm }, { token: ScrollbarService }, { token: EventsService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteScrollService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InfiniteScrollService, deps: [{ token: INFINITE_SCROLL_CONFIG }, { token: LOADER_CONFIG }, { token: LOADER_SERVICE }, { token: LINES_SERVICE }, { token: PaginatorStore }, { token: SortStore }, { token: FilterStore }, { token: KlesForm }, { token: ScrollbarService }, { token: EventsService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InfiniteScrollService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteScrollService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InfiniteScrollService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -3398,10 +3544,10 @@ class InfiniteScrollTableComponent {
     ngAfterViewInit() {
         this.infiniteScrollService.register(this.table.formElemRef.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteScrollTableComponent, deps: [{ token: InfiniteScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InfiniteScrollTableComponent, isStandalone: true, selector: "kles-infinite-scroll-table", viewQueries: [{ propertyName: "table", first: true, predicate: TableComponent, descendants: true, static: true }], ngImport: i0, template: "<kles-table></kles-table>\n\n@if (loadingMore()) {\n    <div class=\"loading-more-indicator\" role=\"status\" aria-label=\"Loading more rows\">\n        <mat-spinner [diameter]=\"24\"></mat-spinner>\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative;height:100%;overflow:hidden}kles-table{min-height:0;flex:1 1 auto}.loading-more-indicator{position:absolute;inset-inline-start:50%;bottom:24px;z-index:600;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--mat-sys-outline-variant);border-radius:50%;background:var(--mat-sys-surface-container-high);box-shadow:var(--mat-sys-level3);transform:translate(-50%);pointer-events:none}\n"], dependencies: [{ kind: "component", type: TableComponent, selector: "kles-table" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i26.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InfiniteScrollTableComponent, deps: [{ token: InfiniteScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: InfiniteScrollTableComponent, isStandalone: true, selector: "kles-infinite-scroll-table", viewQueries: [{ propertyName: "table", first: true, predicate: TableComponent, descendants: true, static: true }], ngImport: i0, template: "<kles-table></kles-table>\n\n@if (loadingMore()) {\n    <div class=\"loading-more-indicator\" role=\"status\" aria-label=\"Loading more rows\">\n        <mat-spinner [diameter]=\"24\"></mat-spinner>\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative;height:100%;overflow:hidden}kles-table{min-height:0;flex:1 1 auto}.loading-more-indicator{position:absolute;inset-inline-start:50%;bottom:24px;z-index:600;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--mat-sys-outline-variant);border-radius:50%;background:var(--mat-sys-surface-container-high);box-shadow:var(--mat-sys-level3);transform:translate(-50%);pointer-events:none}\n"], dependencies: [{ kind: "component", type: TableComponent, selector: "kles-table" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i26.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteScrollTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InfiniteScrollTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-infinite-scroll-table', standalone: true, imports: [TableComponent, MatProgressSpinnerModule], template: "<kles-table></kles-table>\n\n@if (loadingMore()) {\n    <div class=\"loading-more-indicator\" role=\"status\" aria-label=\"Loading more rows\">\n        <mat-spinner [diameter]=\"24\"></mat-spinner>\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative;height:100%;overflow:hidden}kles-table{min-height:0;flex:1 1 auto}.loading-more-indicator{position:absolute;inset-inline-start:50%;bottom:24px;z-index:600;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--mat-sys-outline-variant);border-radius:50%;background:var(--mat-sys-surface-container-high);box-shadow:var(--mat-sys-level3);transform:translate(-50%);pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: InfiniteScrollService }], propDecorators: { table: [{
@@ -3471,10 +3617,10 @@ class SelectionLoaderService {
             success: false,
         })));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SelectionLoaderService, deps: [{ token: SELECTION_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SelectionLoaderService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectionLoaderService, deps: [{ token: SELECTION_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectionLoaderService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SelectionLoaderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectionLoaderService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
@@ -3557,10 +3703,10 @@ class HeaderService {
             this.fm.getHeader().patchValue(header, { emitEvent: false });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", 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.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: HeaderService }); }
+    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.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: HeaderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: KlesForm }, { type: FilterService, decorators: [{
                     type: Optional
@@ -3637,10 +3783,10 @@ class HeaderLazyService {
             this.fm.getHeader().patchValue(header, { emitEvent: false });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: HeaderLazyService, deps: [{ token: KlesForm }, { token: FilterStore, optional: true }, { token: LOADER_SERVICE }, { token: ColumnsService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: HeaderLazyService }); }
+    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.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderLazyService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: HeaderLazyService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderLazyService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: KlesForm }, { type: FilterStore, decorators: [{
                     type: Optional
@@ -3666,7 +3812,8 @@ class KlesSelectionModel {
         this._changed = new Subject();
         this._stateChanged = new Subject();
         this._state = KlesSelectionModelState.ENABLED;
-        this._count = signal(0, ...(ngDevMode ? [{ debugName: "_count" }] : /* istanbul ignore next */ []));
+        this._count = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_count" }] : /* istanbul ignore next */ []));
         const values = initialValues ?? [];
         this.assertSelectionCardinality(values);
         values.forEach((value) => this._selection.add(value));
@@ -3813,7 +3960,9 @@ class AbstractSelectionService {
         this.selectionConfig = selectionConfig;
         this.fm = fm;
         this.eventsService = eventsService;
-        this._loadingRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "_loadingRows" }] : /* istanbul ignore next */ []));
+        this._loadingRows = signal(new Set(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_loadingRows" }] : /* istanbul ignore next */ []));
+        this.rowSelectionRequests = new Subject();
         this.loadingRows = this._loadingRows.asReadonly();
     }
     get key() {
@@ -3825,6 +3974,25 @@ class AbstractSelectionService {
     isLoading(row) {
         return this._loadingRows().has(row);
     }
+    onRowClick(event, row) {
+        if (!this.selectionConfig?.selectOnRowClick || 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)) {
+            return;
+        }
+        const selected = !this.selectionModel.isSelected(row);
+        if (control) {
+            control.setValue(selected);
+        }
+        else {
+            this.rowSelectionRequests.next({ row, selected });
+        }
+    }
     emitSelectionEvents(changed, selectedCount = changed.count) {
         const payload = this.selectionPayload(changed.added, changed.removed, selectedCount);
         this.eventsService.emit('selectionChange', payload);
@@ -3881,10 +4049,19 @@ class AbstractSelectionService {
             rawValue: row.getRawValue(),
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AbstractSelectionService, deps: [{ token: SELECTION_CONFIG, optional: true }, { token: KlesForm }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AbstractSelectionService }); }
+    isInteractiveClick(event) {
+        const currentTarget = event.currentTarget;
+        if (currentTarget instanceof HTMLElement && currentTarget.classList.contains('kles-extra-row')) {
+            return true;
+        }
+        const target = event.target;
+        return (target instanceof Element &&
+            target.closest('button, a, input, select, textarea, [role="button"], [role="checkbox"], [role="link"], [contenteditable]:not([contenteditable="false"])') !== null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractSelectionService, deps: [{ token: SELECTION_CONFIG, optional: true }, { token: KlesForm }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractSelectionService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AbstractSelectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractSelectionService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
@@ -3994,7 +4171,7 @@ class SelectionService extends AbstractSelectionService {
         this.datasourceService.datasource
             .connect()
             .pipe(takeUntilDestroyed(this.destroyRef), auditTime(0), switchMap((rows) => {
-            return merge(...rows
+            return merge(this.rowSelectionRequests, ...rows
                 .map((row) => {
                 return row.controls[this.selectionLoaderService.key]?.valueChanges.pipe(map((value) => {
                     return { row, selected: !!value };
@@ -4034,10 +4211,10 @@ class SelectionService extends AbstractSelectionService {
     listenSelection() {
         this.selectionModel.changed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((changed) => {
             changed.removed?.forEach((group) => {
-                group.controls[this.selectionLoaderService.key].patchValue(false, { emitEvent: false });
+                group.controls[this.selectionLoaderService.key]?.patchValue(false, { emitEvent: false });
             });
             changed.added?.forEach((group) => {
-                group.controls[this.selectionLoaderService.key].patchValue(true, { emitEvent: false });
+                group.controls[this.selectionLoaderService.key]?.patchValue(true, { emitEvent: false });
             });
             this.fm.getRows().updateValueAndValidity({ emitEvent: false });
             this.updateHeader();
@@ -4045,17 +4222,17 @@ class SelectionService extends AbstractSelectionService {
         });
         this.selectionModel.stateChanged.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((state) => {
             if (state === KlesSelectionModelState.ENABLED) {
-                this.fm.getHeader().controls[this.key].enable({ emitEvent: false });
+                this.fm.getHeader().controls[this.key]?.enable({ emitEvent: false });
                 this.fm.getRows().controls.forEach((group) => {
                     if (!this.isLoading(group) && !this.selectionConfig?.isDisabled?.(group)) {
-                        group.controls[this.key].enable({ emitEvent: false });
+                        group.controls[this.key]?.enable({ emitEvent: false });
                     }
                 });
             }
             else {
-                this.fm.getHeader().controls[this.key].disable({ emitEvent: false });
+                this.fm.getHeader().controls[this.key]?.disable({ emitEvent: false });
                 this.fm.getRows().controls.forEach((group) => {
-                    group.controls[this.key].disable({ emitEvent: false });
+                    group.controls[this.key]?.disable({ emitEvent: false });
                 });
             }
         });
@@ -4086,10 +4263,10 @@ class SelectionService extends AbstractSelectionService {
             this.fm.getHeader().controls[this.selectionLoaderService.key]?.patchValue(false, { emitEvent: false });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SelectionService, deps: [{ token: SELECTION_CONFIG, optional: true }, { token: KlesForm }, { token: SelectionLoaderService }, { token: ScrollbarService }, { token: LoadingService }, { token: DATASOURCE_SERVICE }, { token: LINES_SERVICE }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SelectionService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectionService, deps: [{ token: SELECTION_CONFIG, optional: true }, { token: KlesForm }, { token: SelectionLoaderService }, { token: ScrollbarService }, { token: LoadingService }, { token: DATASOURCE_SERVICE }, { token: LINES_SERVICE }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectionService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SelectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectionService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
@@ -4113,7 +4290,8 @@ class SelectionLazyService extends AbstractSelectionService {
         this.linesService = linesService;
         this.filterStore = filterStore;
         this.destroyRef = inject(DestroyRef);
-        this._count = signal(0, ...(ngDevMode ? [{ debugName: "_count" }] : /* istanbul ignore next */ []));
+        this._count = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_count" }] : /* istanbul ignore next */ []));
         this.selectionModel = new KlesSelectionModel(selectionConfig?.selectionMode);
     }
     register() {
@@ -4182,7 +4360,7 @@ class SelectionLazyService extends AbstractSelectionService {
         this.datasourceService.datasource
             .connect()
             .pipe(takeUntilDestroyed(this.destroyRef), auditTime(0), switchMap((rows) => {
-            return merge(...rows
+            return merge(this.rowSelectionRequests, ...rows
                 .map((row) => {
                 return row.controls[this.selectionLoaderService.key]?.valueChanges.pipe(map((value) => {
                     return {
@@ -4294,10 +4472,10 @@ class SelectionLazyService extends AbstractSelectionService {
             emitEvent: false,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SelectionLazyService, deps: [{ token: SELECTION_CONFIG, optional: true }, { token: KlesForm }, { token: SelectionLoaderService }, { token: ScrollbarService }, { token: LoadingService }, { token: DATASOURCE_SERVICE }, { token: LINES_SERVICE }, { token: FilterStore, optional: true }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SelectionLazyService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectionLazyService, deps: [{ token: SELECTION_CONFIG, optional: true }, { token: KlesForm }, { token: SelectionLoaderService }, { token: ScrollbarService }, { token: LoadingService }, { token: DATASOURCE_SERVICE }, { token: LINES_SERVICE }, { token: FilterStore, optional: true }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectionLazyService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SelectionLazyService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectionLazyService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
@@ -4338,10 +4516,10 @@ class LoaderService {
         this._refresh$.next();
         this.eventsService.emit('refresh');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoaderService, deps: [{ token: LOADER_CONFIG }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoaderService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoaderService, deps: [{ token: LOADER_CONFIG }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoaderService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoaderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoaderService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -4380,10 +4558,10 @@ class LoaderLazyService {
         this._refresh$.next();
         this.eventsService.emit('refresh');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoaderLazyService, deps: [{ token: LOADER_CONFIG }, { token: PaginatorStore, optional: true }, { token: SortStore, optional: true }, { token: FilterStore, optional: true }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoaderLazyService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoaderLazyService, deps: [{ token: LOADER_CONFIG }, { token: PaginatorStore, optional: true }, { token: SortStore, optional: true }, { token: FilterStore, optional: true }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoaderLazyService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoaderLazyService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoaderLazyService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -4453,10 +4631,10 @@ class LinesService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LinesService, deps: [{ token: LOADER_SERVICE }, { token: KlesForm }, { token: ColumnsService }, { token: RowFormFactory }, { token: ExtraRowService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LinesService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinesService, deps: [{ token: LOADER_SERVICE }, { token: KlesForm }, { token: ColumnsService }, { token: RowFormFactory }, { token: ExtraRowService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinesService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LinesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinesService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: LoaderService, decorators: [{
                     type: Inject,
@@ -4525,10 +4703,10 @@ class LinesLazyService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LinesLazyService, deps: [{ token: LOADER_SERVICE }, { token: KlesForm }, { token: ColumnsService }, { token: RowFormFactory }, { token: ExtraRowService }, { token: PaginatorService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LinesLazyService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinesLazyService, deps: [{ token: LOADER_SERVICE }, { token: KlesForm }, { token: ColumnsService }, { token: RowFormFactory }, { token: ExtraRowService }, { token: PaginatorService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinesLazyService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LinesLazyService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinesLazyService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: LoaderLazyService, decorators: [{
                     type: Inject,
@@ -4594,10 +4772,10 @@ class LinesInfiniteService {
     loading() {
         return this._loading;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LinesInfiniteService, deps: [{ token: LOADER_SERVICE }, { token: KlesForm }, { token: ColumnsService }, { token: RowFormFactory }, { token: ExtraRowService }, { token: PaginatorStore }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LinesInfiniteService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinesInfiniteService, deps: [{ token: LOADER_SERVICE }, { token: KlesForm }, { token: ColumnsService }, { token: RowFormFactory }, { token: ExtraRowService }, { token: PaginatorStore }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinesInfiniteService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LinesInfiniteService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinesInfiniteService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: LoaderLazyService, decorators: [{
                     type: Inject,
@@ -4626,10 +4804,10 @@ class LoadingOrchestratorService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoadingOrchestratorService, deps: [{ token: LOADER_SERVICE }, { token: LoadingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoadingOrchestratorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoadingOrchestratorService, deps: [{ token: LOADER_SERVICE }, { token: LoadingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoadingOrchestratorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoadingOrchestratorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoadingOrchestratorService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -4655,10 +4833,10 @@ class InfiniteLoadingOrchestratorService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteLoadingOrchestratorService, deps: [{ token: LOADER_SERVICE }, { token: LoadingService }, { token: KlesForm }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteLoadingOrchestratorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InfiniteLoadingOrchestratorService, deps: [{ token: LOADER_SERVICE }, { token: LoadingService }, { token: KlesForm }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InfiniteLoadingOrchestratorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteLoadingOrchestratorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InfiniteLoadingOrchestratorService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -4697,10 +4875,10 @@ class TableService {
         this.linesService.register();
         this.selectionService.register();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TableService, deps: [{ token: KlesForm }, { token: ColumnsService }, { token: DATASOURCE_SERVICE }, { token: LINES_SERVICE }, { token: HEADER_SERVICE }, { token: SELECTION_SERVICE }, { token: LoadingOrchestratorService }, { token: SCROLLBAR_ORCHESTRATOR_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TableService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableService, deps: [{ token: KlesForm }, { token: ColumnsService }, { token: DATASOURCE_SERVICE }, { token: LINES_SERVICE }, { token: HEADER_SERVICE }, { token: SELECTION_SERVICE }, { token: LoadingOrchestratorService }, { token: SCROLLBAR_ORCHESTRATOR_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TableService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: KlesForm }, { type: ColumnsService }, { type: undefined, decorators: [{
                     type: Inject,
@@ -4757,10 +4935,10 @@ class ScrollbarOrchestratorService {
             this.scrollbarService.toTop('instant');
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScrollbarOrchestratorService, deps: [{ token: LINES_SERVICE }, { token: ScrollbarService }, { token: PaginatorService, optional: true }, { token: SORT_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScrollbarOrchestratorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarOrchestratorService, deps: [{ token: LINES_SERVICE }, { token: ScrollbarService }, { token: PaginatorService, optional: true }, { token: SORT_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarOrchestratorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScrollbarOrchestratorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarOrchestratorService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -4797,10 +4975,10 @@ class ScrollbarLazyOrchestratorService {
             this.scrollbarService.hideScrollbar();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScrollbarLazyOrchestratorService, deps: [{ token: LINES_SERVICE }, { token: ScrollbarService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScrollbarLazyOrchestratorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarLazyOrchestratorService, deps: [{ token: LINES_SERVICE }, { token: ScrollbarService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarLazyOrchestratorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScrollbarLazyOrchestratorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarLazyOrchestratorService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -4818,10 +4996,10 @@ class ScrollbarInfiniteOrchestratorService {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.scrollbarService.showScrollbar());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScrollbarInfiniteOrchestratorService, deps: [{ token: LINES_SERVICE }, { token: ScrollbarService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScrollbarInfiniteOrchestratorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarInfiniteOrchestratorService, deps: [{ token: LINES_SERVICE }, { token: ScrollbarService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarInfiniteOrchestratorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScrollbarInfiniteOrchestratorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarInfiniteOrchestratorService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -4840,6 +5018,8 @@ class DynamicTableLoaderDirective {
                 });
                 return v;
             } });
+        this.footerStart = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "footerStart" }] : /* istanbul ignore next */ []));
         this.componentRef = null;
         effect(() => {
             if (this.tableConfig()) {
@@ -4869,8 +5049,12 @@ class DynamicTableLoaderDirective {
             component = InfiniteScrollTableComponent;
         }
         const injector = this.initInjector();
+        const footerStart = this.footerStart();
         this.componentRef = this.viewContainerRef.createComponent(component, {
             injector,
+            ...(component === PaginateTableComponent && footerStart
+                ? { projectableNodes: [[footerStart.elementRef.nativeElement]] }
+                : {}),
         });
         this.componentRef.onDestroy(() => {
             if (isDestroyable(injector)) {
@@ -5021,6 +5205,10 @@ class DynamicTableLoaderDirective {
             LoadingService,
             KlesForm,
             ColumnsService,
+            {
+                provide: COLUMN_DRAG_DROP,
+                useFactory: () => new ColumnDragDropService(this.tableConfig().dragDropColumns, inject(ColumnsService)),
+            },
             FooterService,
             ScrollbarService,
             ...(this.tableConfig().infinite ? [InfiniteScrollService] : []),
@@ -5103,20 +5291,44 @@ class DynamicTableLoaderDirective {
             providers,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DynamicTableLoaderDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.19", type: DynamicTableLoaderDirective, isStandalone: true, selector: "[appDynamicTableLoader]", inputs: { tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DynamicTableLoaderDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: DynamicTableLoaderDirective, isStandalone: true, selector: "[appDynamicTableLoader]", inputs: { tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: true, transformFunction: null }, footerStart: { classPropertyName: "footerStart", publicName: "footerStart", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DynamicTableLoaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DynamicTableLoaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appDynamicTableLoader]',
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { tableConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableConfig", required: true }] }] } });
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { tableConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableConfig", required: true }] }], footerStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerStart", required: false }] }] } });
+
+class KlesTableFooterStartDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableFooterStartDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: KlesTableFooterStartDirective, isStandalone: true, selector: "[klesTableFooterStart]", host: { properties: { "style.display": "'flex'", "style.align-items": "'center'", "style.gap": "'var(--kles-table-footer-gap, 12px)'", "style.min-width": "'0'" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableFooterStartDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[klesTableFooterStart]',
+                    standalone: true,
+                    host: {
+                        '[style.display]': "'flex'",
+                        '[style.align-items]': "'center'",
+                        '[style.gap]': "'var(--kles-table-footer-gap, 12px)'",
+                        '[style.min-width]': "'0'",
+                    },
+                }]
+        }] });
 
 class KlesTableComponent {
     constructor(connectorService) {
         this.connectorService = connectorService;
-        this.tableConfig = input.required(...(ngDevMode ? [{ debugName: "tableConfig" }] : /* istanbul ignore next */ []));
+        this.tableConfig = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tableConfig" }] : /* istanbul ignore next */ []));
+        this.footerStart = contentChild(KlesTableFooterStartDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerStart" }] : /* istanbul ignore next */ []));
         this.destroyRef = inject(DestroyRef);
         this.tableEvent = new EventEmitter();
         this.rowClick = new EventEmitter();
@@ -5144,7 +5356,8 @@ class KlesTableComponent {
         this.elevationShadow = computed(() => {
             const level = this.tableConfig().elevation ?? 2;
             return level === 0 ? 'none' : `var(--mat-sys-level${level})`;
-        }, ...(ngDevMode ? [{ debugName: "elevationShadow" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "elevationShadow" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         this.connectorService.connected$
@@ -5271,13 +5484,13 @@ class KlesTableComponent {
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesTableComponent, deps: [{ token: KlesTableConnectorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.19", type: KlesTableComponent, isStandalone: true, selector: "kles-dynamic-table", inputs: { tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { tableEvent: "tableEvent", rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", rowContextMenu: "rowContextMenu", rowMouseEnter: "rowMouseEnter", rowMouseLeave: "rowMouseLeave", rowDrop: "rowDrop", rowDropSuccess: "rowDropSuccess", rowDropError: "rowDropError", cellClick: "cellClick", cellDoubleClick: "cellDoubleClick", cellContextMenu: "cellContextMenu", cellValueChange: "cellValueChange", selectionChange: "selectionChange", selectionError: "selectionError", pageChange: "pageChange", sortChange: "sortChange", filterChange: "filterChange", loadError: "loadError", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", nodeLoadChildren: "nodeLoadChildren", nodeChildrenLoaded: "nodeChildrenLoaded" }, host: { properties: { "attr.id": "this.hostId" } }, providers: [KlesTableConnectorService], ngImport: i0, template: "<div class=\"table-frame\" [style.box-shadow]=\"elevationShadow()\">\n    <ng-template appDynamicTableLoader [tableConfig]=\"tableConfig()\"></ng-template>\n</div>\n", styles: [":host{display:flex;flex-direction:column;max-height:100%;overflow:auto;padding:4px;box-sizing:border-box}.table-frame{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;background:var(--mat-sys-surface);border-radius:var(--mat-sys-corner-small);overflow:hidden}\n"], dependencies: [{ kind: "directive", type: DynamicTableLoaderDirective, selector: "[appDynamicTableLoader]", inputs: ["tableConfig"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableComponent, deps: [{ token: KlesTableConnectorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.4", type: KlesTableComponent, isStandalone: true, selector: "kles-dynamic-table", inputs: { tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { tableEvent: "tableEvent", rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", rowContextMenu: "rowContextMenu", rowMouseEnter: "rowMouseEnter", rowMouseLeave: "rowMouseLeave", rowDrop: "rowDrop", rowDropSuccess: "rowDropSuccess", rowDropError: "rowDropError", cellClick: "cellClick", cellDoubleClick: "cellDoubleClick", cellContextMenu: "cellContextMenu", cellValueChange: "cellValueChange", selectionChange: "selectionChange", selectionError: "selectionError", pageChange: "pageChange", sortChange: "sortChange", filterChange: "filterChange", loadError: "loadError", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", nodeLoadChildren: "nodeLoadChildren", nodeChildrenLoaded: "nodeChildrenLoaded" }, host: { properties: { "attr.id": "this.hostId" } }, providers: [KlesTableConnectorService], queries: [{ propertyName: "footerStart", first: true, predicate: KlesTableFooterStartDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"table-frame\" [style.box-shadow]=\"elevationShadow()\">\n    <ng-template appDynamicTableLoader [tableConfig]=\"tableConfig()\" [footerStart]=\"footerStart()\"></ng-template>\n</div>\n", styles: [":host{display:flex;flex-direction:column;max-height:100%;overflow:auto;padding:4px;box-sizing:border-box}.table-frame{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;background:var(--mat-sys-surface);border-radius:var(--mat-sys-corner-small);overflow:hidden}\n"], dependencies: [{ kind: "directive", type: DynamicTableLoaderDirective, selector: "[appDynamicTableLoader]", inputs: ["tableConfig", "footerStart"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kles-dynamic-table', standalone: true, imports: [DynamicTableLoaderDirective], providers: [KlesTableConnectorService], template: "<div class=\"table-frame\" [style.box-shadow]=\"elevationShadow()\">\n    <ng-template appDynamicTableLoader [tableConfig]=\"tableConfig()\"></ng-template>\n</div>\n", styles: [":host{display:flex;flex-direction:column;max-height:100%;overflow:auto;padding:4px;box-sizing:border-box}.table-frame{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;background:var(--mat-sys-surface);border-radius:var(--mat-sys-corner-small);overflow:hidden}\n"] }]
-        }], ctorParameters: () => [{ type: KlesTableConnectorService }], propDecorators: { tableConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableConfig", required: true }] }], tableEvent: [{
+            args: [{ selector: 'kles-dynamic-table', standalone: true, imports: [DynamicTableLoaderDirective], providers: [KlesTableConnectorService], template: "<div class=\"table-frame\" [style.box-shadow]=\"elevationShadow()\">\n    <ng-template appDynamicTableLoader [tableConfig]=\"tableConfig()\" [footerStart]=\"footerStart()\"></ng-template>\n</div>\n", styles: [":host{display:flex;flex-direction:column;max-height:100%;overflow:auto;padding:4px;box-sizing:border-box}.table-frame{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;background:var(--mat-sys-surface);border-radius:var(--mat-sys-corner-small);overflow:hidden}\n"] }]
+        }], ctorParameters: () => [{ type: KlesTableConnectorService }], propDecorators: { tableConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableConfig", required: true }] }], footerStart: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KlesTableFooterStartDirective), { isSignal: true }] }], tableEvent: [{
                 type: Output
             }], rowClick: [{
                 type: Output
@@ -5329,18 +5542,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             }] } });
 
 const components = [TableComponent];
-const directives = [];
+const directives = [KlesTableFooterStartDirective];
 const pipes = [];
 class KlesMaterialTableModule {
     static { this.declarations = [components, directives, pipes]; }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesMaterialTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: KlesMaterialTableModule, imports: [CommonModule, TableComponent, KlesTableComponent, KlesMaterialDynamicformsModule], exports: [KlesTableComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesMaterialTableModule, providers: [pipes], imports: [CommonModule, components, KlesMaterialDynamicformsModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesMaterialTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: KlesMaterialTableModule, imports: [CommonModule, TableComponent, KlesTableFooterStartDirective, KlesTableComponent, KlesMaterialDynamicformsModule], exports: [KlesTableFooterStartDirective, KlesTableComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesMaterialTableModule, providers: [pipes], imports: [CommonModule, components, KlesMaterialDynamicformsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesMaterialTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesMaterialTableModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, components, KlesTableComponent, KlesMaterialDynamicformsModule],
+                    imports: [CommonModule, components, directives, KlesTableComponent, KlesMaterialDynamicformsModule],
                     providers: [pipes],
                     exports: [pipes, directives, KlesTableComponent],
                 }]
@@ -5366,5 +5579,5 @@ var AlignCell;
  * Generated bundle index. Do not edit.
  */
 
-export { AlignCell, COLUMNS, DATASOURCE_SERVICE, DRAG_DROP_CONFIG, EMPTY_STATE_CONFIG, EXTRA_ROWS, FOOTER, HEADER_SERVICE, INFINITE_SCROLL_CONFIG, KLES_DRAG_DROP_ROW_CONTEXT, KlesMaterialTableModule, KlesTableComponent, KlesTableEmptyStateComponent, 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, 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 };
 //# sourceMappingURL=3kles-kles-material-table-v2.mjs.map