@3kles/kles-material-table-v2 21.8.1 → 21.10.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,7 +21,7 @@ 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';
@@ -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');
@@ -1437,11 +1438,11 @@ class KlesCellComponent {
         });
     }
     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.ɵ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: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: [{
             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 {
@@ -1449,10 +1450,11 @@ class KlesHeaderComponent {
         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 */ []));
+        this.columnDragHandle = input(false, ...(ngDevMode ? [{ debugName: "columnDragHandle" }] : /* 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: `
+    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 }, columnDragHandle: { classPropertyName: "columnDragHandle", publicName: "columnDragHandle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
         <div
             class="header"
             mat-sort-header
@@ -1461,6 +1463,18 @@ class KlesHeaderComponent {
             [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>
 
@@ -1486,7 +1500,7 @@ 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: [{
             type: Component,
@@ -1499,6 +1513,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             [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>
 
@@ -1524,8 +1550,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) {
@@ -2315,10 +2341,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 +2393,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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RowService, deps: [{ token: EventsService }, { token: SELECTION_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RowService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", 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) {
@@ -2629,14 +2660,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;
@@ -2659,6 +2731,8 @@ class TableComponent {
         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.destroyRef = inject(DestroyRef);
         this.emptyStateComponent = KlesTableEmptyStateComponent;
         this.columns = this.columnsService.columns;
@@ -2678,6 +2752,10 @@ class TableComponent {
         }
         return context;
     }
+    isRowSelected(row) {
+        this.selectionService.selectionModel?.count();
+        return this.selectionService.selectionModel?.isSelected(row) ?? false;
+    }
     get isLoadingClass() {
         return this.loadingService.loading();
     }
@@ -2865,11 +2943,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) {
@@ -2924,12 +3026,15 @@ class TableComponent {
     }
     calculHeaderHeight() {
         const formNativeElem = this.formElemRef?.nativeElement;
+        const tableNativeElem = formNativeElem?.querySelector(':scope > table');
         const header = this.host.nativeElement.querySelector('.mat-mdc-header-row');
         const footer = this.host.nativeElement.querySelector('.mat-mdc-footer-row');
         const compute = () => {
             this.scrollHeightPx.set(Math.max(0, (formNativeElem?.offsetHeight ?? 0) - (formNativeElem?.clientHeight ?? 0)));
             this.headerHeightPx.set(Math.ceil(header?.getBoundingClientRect().height ?? 0));
             this.footerHeightPx.set(Math.max(0, footer?.getBoundingClientRect().height ?? 0));
+            this.viewportWidthPx.set(formNativeElem?.clientWidth ?? 0);
+            this.viewportScrollRangePx.set(Math.max(0, (formNativeElem?.scrollWidth ?? 0) - (formNativeElem?.clientWidth ?? 0)));
         };
         const scheduleCompute = () => {
             if (this.rafId) {
@@ -2945,6 +3050,9 @@ class TableComponent {
         if (formNativeElem) {
             this.ro.observe(formNativeElem);
         }
+        if (tableNativeElem) {
+            this.ro.observe(tableNativeElem);
+        }
         if (header) {
             this.ro.observe(header);
         }
@@ -2952,10 +3060,8 @@ class TableComponent {
             this.ro.observe(footer);
         }
         if (formNativeElem) {
-            formNativeElem.addEventListener('scroll', scheduleCompute, { passive: true });
             window.addEventListener('resize', scheduleCompute, { passive: true });
             this._cleanup = () => {
-                formNativeElem.removeEventListener('scroll', scheduleCompute);
                 window.removeEventListener('resize', scheduleCompute);
                 this.ro?.disconnect();
                 if (this.rafId) {
@@ -2964,8 +3070,8 @@ 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                            <ng-container klesDynamicField [field]=\"extraColumn | extraCellField\" [group]=\"row\" [ui]=\"row | uiField\" [context]=\"row | rowContext\"></ng-container>\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}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}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: "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: 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: "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 }, { 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() ? 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                    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                        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                            [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                        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\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 | 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) 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: [{
             type: Component,
@@ -2998,7 +3104,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                            <ng-container klesDynamicField [field]=\"extraColumn | extraCellField\" [group]=\"row\" [ui]=\"row | uiField\" [context]=\"row | rowContext\"></ng-container>\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}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}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() ? 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                    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                        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                            [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                        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\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 | 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) 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]
@@ -3011,6 +3117,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]
@@ -3031,6 +3140,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']
@@ -3053,11 +3168,11 @@ class PaginateTableComponent {
         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.ɵ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<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: [{
             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 }]
@@ -3808,6 +3923,7 @@ class AbstractSelectionService {
         this.fm = fm;
         this.eventsService = eventsService;
         this._loadingRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "_loadingRows" }] : /* istanbul ignore next */ []));
+        this.rowSelectionRequests = new Subject();
         this.loadingRows = this._loadingRows.asReadonly();
     }
     get key() {
@@ -3819,6 +3935,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);
@@ -3875,6 +4010,15 @@ class AbstractSelectionService {
             rawValue: row.getRawValue(),
         };
     }
+    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: "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 }); }
 }
@@ -3988,7 +4132,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 };
@@ -4028,10 +4172,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();
@@ -4039,17 +4183,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 });
                 });
             }
         });
@@ -4176,7 +4320,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 {
@@ -4834,6 +4978,7 @@ class DynamicTableLoaderDirective {
                 });
                 return v;
             } });
+        this.footerStart = input(...(ngDevMode ? [undefined, { debugName: "footerStart" }] : /* istanbul ignore next */ []));
         this.componentRef = null;
         effect(() => {
             if (this.tableConfig()) {
@@ -4863,8 +5008,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)) {
@@ -5015,6 +5164,10 @@ class DynamicTableLoaderDirective {
             LoadingService,
             KlesForm,
             ColumnsService,
+            {
+                provide: COLUMN_DRAG_DROP,
+                useFactory: () => new ColumnDragDropService(this.tableConfig().dragDropColumns, inject(ColumnsService)),
+            },
             FooterService,
             ScrollbarService,
             ...(this.tableConfig().infinite ? [InfiniteScrollService] : []),
@@ -5098,19 +5251,41 @@ class DynamicTableLoaderDirective {
         });
     }
     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.ɵ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 }, 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: [{
             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: "21.2.19", ngImport: i0, type: KlesTableFooterStartDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.19", 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: "21.2.19", 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.footerStart = contentChild(KlesTableFooterStartDirective, ...(ngDevMode ? [{ debugName: "footerStart" }] : /* istanbul ignore next */ []));
         this.destroyRef = inject(DestroyRef);
         this.tableEvent = new EventEmitter();
         this.rowClick = new EventEmitter();
@@ -5266,12 +5441,12 @@ class KlesTableComponent {
         }
     }
     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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.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], 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: [{
             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
@@ -5323,18 +5498,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.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: KlesMaterialTableModule, imports: [CommonModule, TableComponent, KlesTableFooterStartDirective, KlesTableComponent, KlesMaterialDynamicformsModule], exports: [KlesTableFooterStartDirective, KlesTableComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.19", 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: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, components, KlesTableComponent, KlesMaterialDynamicformsModule],
+                    imports: [CommonModule, components, directives, KlesTableComponent, KlesMaterialDynamicformsModule],
                     providers: [pipes],
                     exports: [pipes, directives, KlesTableComponent],
                 }]
@@ -5360,5 +5535,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