@3kles/kles-material-table-v2 21.4.2 → 21.6.0

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

@@ -1,8 +1,8 @@
-import * as i16 from '@angular/common';
+import * as i17 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Pipe, InjectionToken, Injectable, input, computed, HostBinding, Directive, inject, Inject, signal, DestroyRef, Component, ChangeDetectorRef, ChangeDetectionStrategy, Optional, EventEmitter, ViewChild, effect, Injector, Output, NgModule } from '@angular/core';
-import * as i17 from '@angular/forms';
+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 * as i18 from '@angular/forms';
 import { FormControl, FormGroup, FormArray, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
@@ -10,27 +10,29 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import * as i19 from '@angular/material/table';
+import * as i20 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule, MatTable } from '@angular/material/table';
-import * as i20 from '@angular/cdk/table';
+import * as i21 from '@angular/cdk/table';
 import { CdkTableModule } from '@angular/cdk/table';
-import * as i21 from '@3kles/kles-material-dynamicforms';
+import * as i22 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import * as i23 from '@3kles/kles-material-dynamicforms';
 import { componentMapper, klesFieldControlFactory, klesFieldUiFactory, GroupUiState, ArrayUiState, KlesMaterialDynamicformsModule } from '@3kles/kles-material-dynamicforms';
 import * as i4 from '@angular/material/sort';
 import { MatSortModule, MatSort } from '@angular/material/sort';
-import * as i22 from '@angular/cdk/drag-drop';
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import * as i23 from '@angular/material/progress-spinner';
+import * as i24 from '@angular/cdk/drag-drop';
+import { CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i25 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, merge, debounceTime, distinctUntilChanged, scan, concatMap, withLatestFrom, shareReplay } from 'rxjs';
-import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Subject, BehaviorSubject, combineLatest, startWith, of, auditTime, switchMap, concat, catchError, map, filter, take, defer, defaultIfEmpty, merge, debounceTime, distinctUntilChanged, scan, concatMap, withLatestFrom, shareReplay } from 'rxjs';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import * as _ from 'lodash';
 import ___default from 'lodash';
 import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { __decorate, __param } from 'tslib';
 import * as i2$1 from '@angular/material/paginator';
 import { MatPaginatorModule, MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
-import { ScrollingModule } from '@angular/cdk/scrolling';
 
 class HeaderFieldPipe {
     transform(col) {
@@ -90,9 +92,10 @@ const LOADER_CONFIG = new InjectionToken('LOADER_CONFIG');
 const COLUMNS = new InjectionToken('COLUMNS');
 const FOOTER = new InjectionToken('FOOTER');
 const EXTRA_ROWS = new InjectionToken('EXTRA_ROWS');
+const MULTI_UNFOLD = new InjectionToken('MULTI_UNFOLD');
 const ROW_DRAG_DROP = new InjectionToken('ROW_DRAG_DROP');
 const DRAG_DROP_CONFIG = new InjectionToken('DRAG_DROP_CONFIG');
-// export const KLES_TABLE_SERVICE = new InjectionToken<KlesTableService>('KLES_TABLE_SERVICE');
+const KLES_DRAG_DROP_ROW_CONTEXT = new InjectionToken('KLES_DRAG_DROP_ROW_CONTEXT');
 const PAGINATOR_CONFIG = new InjectionToken('PAGINATOR_CONFIG');
 const SORT_CONFIG = new InjectionToken('SORT_CONFIG');
 const HEADER_SERVICE = new InjectionToken('HEADER_SERVICE');
@@ -155,147 +158,487 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             type: Injectable
         }] });
 
+class ColumnsService {
+    constructor(_columns, eventsService) {
+        this._columns = _columns;
+        this.eventsService = eventsService;
+        this.stickyStartBoundary = computed(() => {
+            return this.getVisibleColumns()
+                .filter((column) => column.sticky === true)
+                .at(-1)?.columnDef;
+        }, ...(ngDevMode ? [{ debugName: "stickyStartBoundary" }] : /* istanbul ignore next */ []));
+        this.stickyEndBoundary = computed(() => {
+            return this.getVisibleColumns()
+                .filter((column) => column.stickyEnd === true)
+                .at(0)?.columnDef;
+        }, ...(ngDevMode ? [{ debugName: "stickyEndBoundary" }] : /* istanbul ignore next */ []));
+    }
+    register() {
+        this.setDisplayedColumns();
+    }
+    get columns() {
+        return this._columns.asReadonly();
+    }
+    getVisible() {
+        return this.getVisibleColumns().map((column) => column.columnDef);
+    }
+    setVisible(columnDef, visible) {
+        this.updateColumn(columnDef, { visible });
+        this.eventsService.emit('columnVisibilityChange', {
+            columnDef,
+            columns: this.getVisible(),
+            visible,
+        });
+    }
+    toggleVisible(columnDef) {
+        const visible = this._columns().find((col) => col.columnDef === columnDef)?.visible;
+        this.setVisible(columnDef, visible === undefined ? false : !visible);
+    }
+    changeWidth(columnDef, options) {
+        this.updateColumn(columnDef, {
+            ...(options.width && { width: options.width }),
+            ...(options.maxWidth && { maxWidth: options.maxWidth }),
+            ...(options.minWidth && { minWidth: options.minWidth }),
+        });
+    }
+    setResizable(columnDef, resizable) {
+        this.updateColumn(columnDef, { resizable });
+    }
+    toggleResizable(columnDef) {
+        const resizable = this._columns().find((col) => col.columnDef === columnDef)?.resizable;
+        this.setResizable(columnDef, resizable === undefined ? true : !resizable);
+    }
+    setSticky(columnDef, options) {
+        this.updateColumn(columnDef, {
+            ...(options.sticky !== undefined && { sticky: options.sticky }),
+            ...(options.stickyEnd !== undefined && { stickyEnd: options.stickyEnd }),
+        });
+    }
+    setColumnPosition(columnDef, position) {
+        const columns = this._columns();
+        const previousIndex = columns.findIndex((column) => column.columnDef === columnDef);
+        if (previousIndex < 0 || columns.length < 2 || !Number.isFinite(position))
+            return;
+        const currentIndex = Math.min(columns.length - 1, Math.max(0, Math.trunc(position)));
+        if (previousIndex === currentIndex)
+            return;
+        const reorderedColumns = [...columns];
+        const [column] = reorderedColumns.splice(previousIndex, 1);
+        reorderedColumns.splice(currentIndex, 0, column);
+        this._columns.set(reorderedColumns);
+        this.eventsService.emit('columnOrderChange', {
+            previousIndex,
+            currentIndex,
+            columns: this.getVisible(),
+        });
+    }
+    updateColumn(columnDef, config) {
+        this._columns.update((columns) => columns.map((col) => col.columnDef === columnDef
+            ? {
+                ...col,
+                ...config,
+                cell: config.cell ? { ...col.cell, ...config.cell } : col.cell,
+                headerCell: config.headerCell ? { ...col.headerCell, ...config.headerCell } : col.headerCell,
+                footerCell: config.footerCell ? { ...col.footerCell, ...config.footerCell } : col.footerCell,
+            }
+            : col));
+    }
+    setDisplayedColumns() {
+        this.displayedColumns = computed(() => {
+            return this.getVisibleColumns().map((column) => column.columnDef);
+        }, ...(ngDevMode ? [{ debugName: "displayedColumns" }] : /* istanbul ignore next */ []));
+    }
+    getVisibleColumns() {
+        return this._columns().filter((column) => {
+            if (column.visibleWhen !== undefined) {
+                return column.visibleWhen();
+            }
+            return column.visible !== false;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ColumnsService, deps: [{ token: COLUMNS }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ColumnsService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ColumnsService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [COLUMNS]
+                }] }, { type: EventsService }] });
+
 class ResizableColumnDirective {
     get appResizableColumnAttr() {
         return this.column().columnDef;
     }
-    constructor(el, renderer, zone, eventsService) {
+    constructor(el, renderer, zone, eventsService, columnsService) {
         this.el = el;
         this.renderer = renderer;
         this.zone = zone;
         this.eventsService = eventsService;
+        this.columnsService = columnsService;
         this.column = input.required({ ...(ngDevMode ? { debugName: "column" } : /* istanbul ignore next */ {}), alias: 'appResizableColumn' });
-        this.minWidth = computed(() => {
-            return 60; //TODO trouver une solution pour ne plus avoir une valeur en dur
-        }, ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
-        this.maxWidth = computed(() => {
-            return 800; //TODO trouver une solution pour ne plus avoir une valeur en dur
-        }, ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+        this.defaultMinWidth = 60;
+        this.defaultMaxWidth = 1200;
+        this.keyboardStep = 4;
         this.startX = 0;
         this.startWidth = 0;
         this.currentWidth = 0;
+        this.resizing = false;
+        this.activeCells = [];
+        this.resizeCells = [];
+        this.resizeMinWidth = this.defaultMinWidth;
+        this.resizeMaxWidth = this.defaultMaxWidth;
+        this.contentMinWidth = this.defaultMinWidth;
+        this.handleCleanups = [];
+        this.documentCleanups = [];
     }
     ngOnInit() {
-        if (this.column().resizable) {
+        if (this.column().resizable)
             this.apply();
-        }
     }
     ngOnChanges(changes) {
-        if (!changes.column.isFirstChange()) {
-            if (changes.column.previousValue.resizable !== changes.column.currentValue.resizable) {
-                if (changes.column.currentValue.resizable) {
-                    this.apply();
-                }
-                else {
-                    this.remove();
-                }
-            }
+        const change = changes.column;
+        if (change && !change.isFirstChange() && change.previousValue.resizable !== change.currentValue.resizable) {
+            change.currentValue.resizable ? this.apply() : this.remove();
         }
     }
-    onDown(e) {
-        e.preventDefault();
-        this.startResize(e.clientX);
+    ngOnDestroy() {
+        this.stopResize(false);
+        this.remove();
     }
-    onTouchDown(e) {
-        if (!e.touches?.length)
+    startResize(event) {
+        if (event.button !== 0 || this.resizing)
             return;
-        e.preventDefault();
-        this.startResize(e.touches[0].clientX);
-    }
-    startResize(clientX) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.cancelContentMeasurement();
         const th = this.el.nativeElement;
-        this.startX = clientX;
+        this.startX = event.clientX;
         this.startWidth = th.getBoundingClientRect().width;
         this.currentWidth = this.startWidth;
-        this.zone.run(() => {
-            this.eventsService.emit('columnResizeStart', {
-                columnDef: this.column().columnDef,
-                width: this.startWidth,
-                previousWidth: this.startWidth,
-            });
-        });
+        this.cacheResizeTargets();
+        this.resizing = true;
+        this.setActiveState(true);
+        this.updateWidthLabel(this.currentWidth);
+        this.emitResizeStart(this.startWidth);
         this.zone.runOutsideAngular(() => {
             const doc = th.ownerDocument;
-            const onMove = (ev) => {
-                const x = ev instanceof MouseEvent ? ev.clientX : (ev.touches?.[0]?.clientX ?? this.startX);
-                const delta = x - this.startX;
-                const next = Math.min(this.maxWidth(), Math.max(this.minWidth(), this.startWidth + delta));
-                if (next === this.currentWidth) {
-                    return;
-                }
-                const previousWidth = this.currentWidth;
-                this.currentWidth = next;
-                this.applyWidth(next);
-                this.eventsService.emit('columnResize', {
-                    columnDef: this.column().columnDef,
-                    width: next,
-                    previousWidth,
-                });
-            };
-            const onUp = () => this.stopResize();
-            this.cleanupMove = this.renderer.listen(doc, 'mousemove', onMove);
-            this.renderer.listen(doc, 'touchmove', onMove);
-            this.cleanupUp = this.renderer.listen(doc, 'mouseup', onUp);
-            this.renderer.listen(doc, 'touchend', onUp);
-        });
-    }
-    stopResize() {
-        this.cleanupMove?.();
-        this.cleanupUp?.();
-        this.cleanupMove = undefined;
-        this.cleanupUp = undefined;
-        if (this.currentWidth > 0) {
-            this.zone.run(() => {
-                this.eventsService.emit('columnResizeEnd', {
-                    columnDef: this.column().columnDef,
-                    width: this.currentWidth,
-                    previousWidth: this.startWidth,
-                });
-            });
+            this.documentCleanups.push(this.renderer.listen(doc, 'pointermove', (moveEvent) => this.onPointerMove(moveEvent)), this.renderer.listen(doc, 'pointerup', () => this.stopResize()), this.renderer.listen(doc, 'pointercancel', () => this.stopResize()));
+        });
+    }
+    onPointerMove(event) {
+        if (!this.resizing)
+            return;
+        event.preventDefault();
+        this.pendingWidth = this.startWidth + event.clientX - this.startX;
+        this.scheduleResizeFrame();
+    }
+    stopResize(emit = true) {
+        this.clearDocumentListeners();
+        if (!this.resizing)
+            return;
+        this.flushResizeFrame();
+        this.resizing = false;
+        this.applyWidth(this.currentWidth, this.resizeCells);
+        this.setActiveState(false);
+        this.clearResizeCache();
+        this.scheduleContentMeasurement();
+        if (this.currentWidth <= 0)
+            return;
+        this.columnsService.changeWidth(this.column().columnDef, { width: `${this.currentWidth}px` });
+        if (emit) {
+            this.zone.run(() => this.eventsService.emit('columnResizeEnd', {
+                columnDef: this.column().columnDef,
+                width: this.currentWidth,
+                previousWidth: this.startWidth,
+            }));
         }
     }
-    applyWidth(px) {
-        const root = this.el.nativeElement.closest('table, mat-table, cdk-table');
-        if (!root)
+    onKeyDown(event) {
+        if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key))
             return;
-        const selectors = [`.mat-column-${this.column().columnDef}`, `.cdk-column-${this.column().columnDef}`];
-        const cells = root.querySelectorAll(selectors.join(','));
-        for (const cell of Array.from(cells)) {
-            // table natif
+        event.preventDefault();
+        event.stopPropagation();
+        const previousWidth = this.el.nativeElement.getBoundingClientRect().width;
+        const step = event.shiftKey ? this.keyboardStep * 4 : this.keyboardStep;
+        let next = previousWidth;
+        if (event.key === 'ArrowLeft')
+            next -= step;
+        if (event.key === 'ArrowRight')
+            next += step;
+        if (event.key === 'Home')
+            next = this.getMinWidth();
+        if (event.key === 'End')
+            next = this.getMaxWidth();
+        this.commitAccessibleResize(previousWidth, this.clampWidth(next));
+    }
+    autoFit(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const previousWidth = this.el.nativeElement.getBoundingClientRect().width;
+        this.commitAccessibleResize(previousWidth, this.measureContentWidth());
+    }
+    commitAccessibleResize(previousWidth, nextWidth) {
+        if (Math.round(previousWidth) === Math.round(nextWidth))
+            return;
+        this.startWidth = previousWidth;
+        this.currentWidth = previousWidth;
+        this.emitResizeStart(previousWidth);
+        this.resizeTo(nextWidth, true, false);
+        this.columnsService.changeWidth(this.column().columnDef, { width: `${nextWidth}px` });
+        this.eventsService.emit('columnResizeEnd', {
+            columnDef: this.column().columnDef,
+            width: nextWidth,
+            previousWidth,
+        });
+    }
+    resizeTo(width, emit, previewOnly = this.resizing) {
+        const next = this.resizing
+            ? Math.min(this.resizeMaxWidth, Math.max(this.resizeMinWidth, width))
+            : this.clampWidth(width);
+        if (Math.round(next) === Math.round(this.currentWidth))
+            return;
+        const previousWidth = this.currentWidth;
+        this.currentWidth = next;
+        previewOnly ? this.applyPreviewWidth(next) : this.applyWidth(next);
+        this.updateWidthLabel(next);
+        if (emit) {
+            this.zone.run(() => this.eventsService.emit('columnResize', {
+                columnDef: this.column().columnDef,
+                width: next,
+                previousWidth,
+            }));
+        }
+    }
+    emitResizeStart(width) {
+        this.zone.run(() => this.eventsService.emit('columnResizeStart', {
+            columnDef: this.column().columnDef,
+            width,
+            previousWidth: width,
+        }));
+    }
+    applyWidth(px, cells = this.getColumnCells()) {
+        if (this.resizeCol)
+            this.resizeCol.style.width = `${px}px`;
+        for (const cell of cells) {
             cell.style.width = `${px}px`;
             cell.style.minWidth = `${px}px`;
             cell.style.maxWidth = `${px}px`;
-            // mode flex
             cell.style.flex = `0 0 ${px}px`;
         }
+        this.handle?.setAttribute('aria-valuenow', `${Math.round(px)}`);
     }
-    apply() {
-        this.remove();
-        this.child = this.renderer.createElement('span');
-        this.renderer.addClass(this.child, 'resize-handle');
-        this.renderer.appendChild(this.el.nativeElement, this.child);
-        this.renderer.listen(this.child, 'mousedown', (e) => this.onDown(e));
-        this.renderer.listen(this.child, 'touchstart', (e) => this.onTouchDown(e));
+    applyPreviewWidth(px) {
+        this.resizeRoot?.style.setProperty('--kles-column-resize-width', `${px}px`);
+        if (this.resizeCol) {
+            this.resizeCol.style.width = `${px}px`;
+        }
+        else {
+            // Fallback for consumers rendering without the table colgroup.
+            for (const cell of this.resizeCells)
+                cell.style.width = `${px}px`;
+        }
+        this.handle?.setAttribute('aria-valuenow', `${Math.round(px)}`);
     }
-    remove() {
-        if (this.child) {
-            this.renderer.removeChild(this.el.nativeElement, this.child);
-            this.child = undefined;
+    scheduleResizeFrame() {
+        if (this.animationFrameId !== undefined)
+            return;
+        const view = this.el.nativeElement.ownerDocument.defaultView;
+        if (!view) {
+            this.flushPendingWidth();
+            return;
         }
+        this.animationFrameId = view.requestAnimationFrame(() => {
+            this.animationFrameId = undefined;
+            this.flushPendingWidth();
+        });
     }
-    ngOnDestroy() {
-        this.stopResize();
+    flushResizeFrame() {
+        const view = this.el.nativeElement.ownerDocument.defaultView;
+        if (this.animationFrameId !== undefined && view)
+            view.cancelAnimationFrame(this.animationFrameId);
+        this.animationFrameId = undefined;
+        this.flushPendingWidth();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ResizableColumnDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    flushPendingWidth() {
+        if (this.pendingWidth === undefined)
+            return;
+        const width = this.pendingWidth;
+        this.pendingWidth = undefined;
+        this.resizeTo(width, true, true);
+    }
+    cacheResizeTargets() {
+        const root = this.el.nativeElement.closest('table, mat-table, cdk-table');
+        this.resizeRoot = root ? root : undefined;
+        this.resizeCells = this.getColumnCells();
+        this.resizeCol = root
+            ? Array.from(root.querySelectorAll('col[data-column-def]')).find((col) => col.dataset['columnDef'] === this.column().columnDef)
+            : undefined;
+        this.resizeMinWidth = Math.max(this.getMinWidth(), this.contentMinWidth);
+        this.resizeMaxWidth = Math.max(this.resizeMinWidth, this.getMaxWidth());
+        this.handle?.setAttribute('aria-valuemin', `${Math.round(this.resizeMinWidth)}`);
+    }
+    clearResizeCache() {
+        this.resizeRoot?.style.removeProperty('--kles-column-resize-width');
+        this.pendingWidth = undefined;
+        this.resizeCells = [];
+        this.resizeCol = undefined;
+        this.resizeRoot = undefined;
+        this.resizeMinWidth = this.defaultMinWidth;
+        this.resizeMaxWidth = this.defaultMaxWidth;
+    }
+    scheduleContentMeasurement() {
+        if (this.resizing || this.contentMeasurementFrameId !== undefined)
+            return;
+        const view = this.el.nativeElement.ownerDocument.defaultView;
+        if (!view)
+            return;
+        this.contentMeasurementFrameId = view.requestAnimationFrame(() => {
+            this.contentMeasurementFrameId = undefined;
+            if (this.resizing || !this.handle)
+                return;
+            this.contentMinWidth = this.measureContentWidth();
+            this.handle.setAttribute('aria-valuemin', `${Math.round(Math.max(this.getMinWidth(), this.contentMinWidth))}`);
+        });
+    }
+    cancelContentMeasurement() {
+        const view = this.el.nativeElement.ownerDocument.defaultView;
+        if (this.contentMeasurementFrameId !== undefined && view)
+            view.cancelAnimationFrame(this.contentMeasurementFrameId);
+        this.contentMeasurementFrameId = undefined;
+    }
+    measureContentWidth(cells = this.getColumnCells()) {
+        const doc = this.el.nativeElement.ownerDocument;
+        const measurementRoot = this.renderer.createElement('div');
+        const clones = [];
+        Object.assign(measurementRoot.style, {
+            position: 'fixed',
+            left: '-10000px',
+            top: '0',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            visibility: 'hidden',
+            pointerEvents: 'none',
+        });
+        let measured = this.getMinWidth();
+        for (const cell of cells) {
+            const clone = cell.cloneNode(true);
+            clone.querySelector('.resize-handle')?.remove();
+            Object.assign(clone.style, {
+                position: 'static',
+                width: 'max-content',
+                minWidth: '0',
+                maxWidth: 'none',
+                whiteSpace: 'nowrap',
+                flex: 'none',
+            });
+            clones.push(clone);
+            measurementRoot.appendChild(clone);
+        }
+        doc.body.appendChild(measurementRoot);
+        for (const clone of clones) {
+            measured = Math.max(measured, clone.getBoundingClientRect().width);
+        }
+        measurementRoot.remove();
+        return this.clampWidth(Math.ceil(measured));
+    }
+    setActiveState(active) {
+        const th = this.el.nativeElement;
+        const method = active ? 'addClass' : 'removeClass';
+        this.renderer[method](th, 'column-resizing');
+        this.renderer[method](th.ownerDocument.body, 'kles-column-resizing');
+        if (active) {
+            this.renderer.setStyle(th.ownerDocument.body, 'cursor', 'col-resize');
+            this.renderer.setStyle(th.ownerDocument.body, 'user-select', 'none');
+        }
+        else {
+            this.renderer.removeStyle(th.ownerDocument.body, 'cursor');
+            this.renderer.removeStyle(th.ownerDocument.body, 'user-select');
+        }
+        this.activeCells = active ? this.resizeCells : this.activeCells;
+        for (const cell of this.activeCells)
+            this.renderer[method](cell, 'column-resizing-cell');
+        if (!active)
+            this.activeCells = [];
+    }
+    updateWidthLabel(width) {
+        if (this.widthLabel)
+            this.widthLabel.textContent = `${Math.round(width)} px`;
+    }
+    getColumnCells() {
+        const root = this.el.nativeElement.closest('table, mat-table, cdk-table');
+        if (!root)
+            return [];
+        const columnDef = this.column().columnDef.replace(/[^a-z0-9_-]/gi, '-');
+        return Array.from(root.querySelectorAll(`.mat-column-${columnDef}, .cdk-column-${columnDef}`));
+    }
+    clampWidth(width) {
+        return Math.min(this.getMaxWidth(), Math.max(this.getMinWidth(), width));
+    }
+    getMinWidth() {
+        return this.resolveCssWidth(this.column().minWidth, this.defaultMinWidth);
+    }
+    getMaxWidth() {
+        return Math.max(this.getMinWidth(), this.resolveCssWidth(this.column().maxWidth, this.defaultMaxWidth));
+    }
+    resolveCssWidth(value, fallback) {
+        if (!value)
+            return fallback;
+        const numeric = Number.parseFloat(value);
+        if (value.trim().endsWith('px') && Number.isFinite(numeric))
+            return numeric;
+        const probe = this.renderer.createElement('span');
+        Object.assign(probe.style, { position: 'absolute', visibility: 'hidden', pointerEvents: 'none', width: value });
+        this.renderer.appendChild(this.el.nativeElement, probe);
+        const width = probe.getBoundingClientRect().width;
+        this.renderer.removeChild(this.el.nativeElement, probe);
+        return width > 0 ? width : fallback;
+    }
+    apply() {
+        this.remove();
+        const th = this.el.nativeElement;
+        this.handle = this.renderer.createElement('span');
+        this.widthLabel = this.renderer.createElement('span');
+        this.renderer.addClass(th, 'resizable-column');
+        this.renderer.addClass(this.handle, 'resize-handle');
+        this.renderer.addClass(this.widthLabel, 'resize-width-label');
+        this.renderer.appendChild(this.handle, this.widthLabel);
+        this.renderer.appendChild(th, this.handle);
+        this.renderer.setAttribute(this.handle, 'role', 'separator');
+        this.renderer.setAttribute(this.handle, 'aria-orientation', 'vertical');
+        this.renderer.setAttribute(this.handle, 'aria-label', `Redimensionner la colonne ${this.column().columnDef}`);
+        this.renderer.setAttribute(this.handle, 'aria-valuemin', `${Math.round(this.getMinWidth())}`);
+        this.renderer.setAttribute(this.handle, 'aria-valuemax', `${Math.round(this.getMaxWidth())}`);
+        this.renderer.setAttribute(this.handle, 'aria-valuenow', `${Math.round(th.getBoundingClientRect().width)}`);
+        this.renderer.setAttribute(this.handle, 'tabindex', '0');
+        this.handleCleanups.push(this.renderer.listen(this.handle, 'pointerdown', (event) => this.startResize(event)), this.renderer.listen(this.handle, 'pointerenter', () => this.scheduleContentMeasurement()), this.renderer.listen(this.handle, 'dblclick', (event) => this.autoFit(event)), this.renderer.listen(this.handle, 'keydown', (event) => this.onKeyDown(event)), this.renderer.listen(this.handle, 'click', (event) => event.stopPropagation()));
+        this.scheduleContentMeasurement();
+    }
+    remove() {
+        if (this.resizing)
+            this.stopResize(false);
+        this.flushResizeFrame();
+        this.cancelContentMeasurement();
+        this.clearResizeCache();
+        this.clearDocumentListeners();
+        this.handleCleanups.splice(0).forEach((cleanup) => cleanup());
+        if (this.handle)
+            this.renderer.removeChild(this.el.nativeElement, this.handle);
+        this.renderer.removeClass(this.el.nativeElement, 'resizable-column');
+        this.handle = undefined;
+        this.widthLabel = undefined;
+    }
+    clearDocumentListeners() {
+        this.documentCleanups.splice(0).forEach((cleanup) => cleanup());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ResizableColumnDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: EventsService }, { token: ColumnsService }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.19", type: ResizableColumnDirective, isStandalone: true, selector: "th[appResizableColumn]", inputs: { column: { classPropertyName: "column", publicName: "appResizableColumn", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.appResizableColumn": "this.appResizableColumnAttr" } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ResizableColumnDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: 'th[appResizableColumn]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: EventsService }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "appResizableColumn", required: true }] }], appResizableColumnAttr: [{
+            args: [{ selector: 'th[appResizableColumn]', standalone: true }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: EventsService }, { type: ColumnsService }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "appResizableColumn", required: true }] }], appResizableColumnAttr: [{
                 type: HostBinding,
                 args: ['attr.appResizableColumn']
             }] } });
@@ -361,7 +704,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
         }] });
 
 class ExpandedRowStore {
-    constructor() {
+    constructor(multiUnfold = false) {
+        this.multiUnfold = multiUnfold;
         this._expandedIds$ = new BehaviorSubject(new Set());
         this.expandedIds$ = this._expandedIds$.asObservable();
     }
@@ -375,7 +719,7 @@ class ExpandedRowStore {
         return this._expandedIds$.value;
     }
     expand(id) {
-        const next = new Set(this._expandedIds$.value);
+        const next = this.multiUnfold ? new Set(this._expandedIds$.value) : new Set();
         next.add(id);
         this._expandedIds$.next(next);
     }
@@ -385,16 +729,22 @@ class ExpandedRowStore {
         this._expandedIds$.next(next);
     }
     toggle(id) {
-        const next = new Set(this._expandedIds$.value);
-        next.has(id) ? next.delete(id) : next.add(id);
-        this._expandedIds$.next(next);
+        if (this.isExpanded(id)) {
+            this.collapse(id);
+        }
+        else {
+            this.expand(id);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ExpandedRowStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ExpandedRowStore, deps: [{ token: MULTI_UNFOLD }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ExpandedRowStore }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ExpandedRowStore, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MULTI_UNFOLD]
+                }] }] });
 
 class LoaderChildrensService {
     constructor(loaderConfig) {
@@ -424,136 +774,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                     args: [LOADER_CONFIG]
                 }] }] });
 
-class LoadingService {
-    constructor() {
-        this._loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : /* istanbul ignore next */ []));
-    }
-    get loading() {
-        return this._loading.asReadonly();
-    }
-    start() {
-        this._loading.set(true);
-    }
-    stop() {
-        this._loading.set(false);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoadingService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoadingService, decorators: [{
-            type: Injectable
-        }] });
-
-class ColumnsService {
-    constructor(_columns, eventsService) {
-        this._columns = _columns;
-        this.eventsService = eventsService;
-        this.stickyStartBoundary = computed(() => {
-            return this.getVisibleColumns()
-                .filter((column) => column.sticky === true)
-                .at(-1)?.columnDef;
-        }, ...(ngDevMode ? [{ debugName: "stickyStartBoundary" }] : /* istanbul ignore next */ []));
-        this.stickyEndBoundary = computed(() => {
-            return this.getVisibleColumns()
-                .filter((column) => column.stickyEnd === true)
-                .at(0)?.columnDef;
-        }, ...(ngDevMode ? [{ debugName: "stickyEndBoundary" }] : /* istanbul ignore next */ []));
-    }
-    register() {
-        this.setDisplayedColumns();
-    }
-    get columns() {
-        return this._columns.asReadonly();
-    }
-    getVisible() {
-        return this.getVisibleColumns().map((column) => column.columnDef);
-    }
-    setVisible(columnDef, visible) {
-        this.updateColumn(columnDef, { visible });
-        this.eventsService.emit('columnVisibilityChange', {
-            columnDef,
-            columns: this.getVisible(),
-            visible,
-        });
-    }
-    toggleVisible(columnDef) {
-        const visible = this._columns().find((col) => col.columnDef === columnDef)?.visible;
-        this.setVisible(columnDef, visible === undefined ? false : !visible);
-    }
-    changeWidth(columnDef, options) {
-        this.updateColumn(columnDef, {
-            ...(options.width && { width: options.width }),
-            ...(options.maxWidth && { maxWidth: options.maxWidth }),
-            ...(options.minWidth && { minWidth: options.minWidth }),
-        });
-    }
-    setResizable(columnDef, resizable) {
-        this.updateColumn(columnDef, { resizable });
-    }
-    toggleResizable(columnDef) {
-        const resizable = this._columns().find((col) => col.columnDef === columnDef)?.resizable;
-        this.setResizable(columnDef, resizable === undefined ? true : !resizable);
-    }
-    setSticky(columnDef, options) {
-        this.updateColumn(columnDef, {
-            ...(options.sticky && { sticky: options.sticky }),
-            ...(options.stickyEnd && { stickyEnd: options.stickyEnd }),
-        });
-    }
-    setColumnPosition(columnDef, position) {
-        const previousIndex = this._columns().findIndex((c) => c.columnDef === columnDef);
-        this._columns.update((columns) => {
-            if (previousIndex >= 0 && position >= 0 && previousIndex != position) {
-                const currentElement = columns.at(position);
-                const [val] = columns.splice(previousIndex, 1);
-                const newCurrentElementPosition = columns.findIndex((c) => c.columnDef === currentElement?.columnDef);
-                columns.splice(newCurrentElementPosition, 0, val);
-                return [...columns];
-            }
-            else {
-                return columns;
-            }
-        });
-        this.eventsService.emit('columnOrderChange', {
-            previousIndex: previousIndex,
-            columns: this.getVisible(),
-            currentIndex: position,
-        });
-    }
-    updateColumn(columnDef, config) {
-        this._columns.update((columns) => columns.map((col) => col.columnDef === columnDef
-            ? {
-                ...col,
-                ...config,
-                cell: config.cell ? { ...col.cell, ...config.cell } : col.cell,
-                headerCell: config.headerCell ? { ...col.headerCell, ...config.headerCell } : col.headerCell,
-                footerCell: config.footerCell ? { ...col.footerCell, ...config.footerCell } : col.footerCell,
-            }
-            : col));
-    }
-    setDisplayedColumns() {
-        this.displayedColumns = computed(() => {
-            return this.getVisibleColumns().map((column) => column.columnDef);
-        }, ...(ngDevMode ? [{ debugName: "displayedColumns" }] : /* istanbul ignore next */ []));
-    }
-    getVisibleColumns() {
-        return this._columns().filter((column) => {
-            if (column.visibleWhen !== undefined) {
-                return column.visibleWhen();
-            }
-            return column.visible !== false;
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ColumnsService, deps: [{ token: COLUMNS }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ColumnsService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ColumnsService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [COLUMNS]
-                }] }, { type: EventsService }] });
-
 class RowFormFactory {
     createControl(field, value) {
         let control;
@@ -656,7 +876,9 @@ class KlesForm {
         });
         this.uiStore = new WeakMap();
         this.rowsStructureChangedSubject = new Subject();
+        this.rowsReplacedSubject = new Subject();
         this.rowsStructureChanged$ = this.rowsStructureChangedSubject.asObservable();
+        this.rowsReplaced$ = this.rowsReplacedSubject.asObservable();
     }
     getRows() {
         return this.form.get('rows');
@@ -688,6 +910,7 @@ class KlesForm {
             this.getRows().push(r.formGroup, { emitEvent: false });
             this.getUiRows().push(r.groupUi);
         });
+        this.rowsReplacedSubject.next();
         this.notifyRowsStructureChanged();
     }
     insertRowAndNotify(row, index, options, notify) {
@@ -710,11 +933,166 @@ class KlesForm {
         return this.insertRowAndNotify(row, index, options, true);
     }
     insertRows(rows, index) {
-        rows.forEach((r) => {
-            this.insertRowAndNotify(r, index);
+        rows.forEach((r, offset) => {
+            this.insertRowAndNotify(r, index === undefined ? undefined : index + offset, { emitEvent: false }, false);
         });
+        this.getRows().updateValueAndValidity({ emitEvent: true });
         this.notifyRowsStructureChanged();
     }
+    moveRow(row, targetRow) {
+        const rows = this.getRows();
+        const previousIndex = rows.controls.indexOf(row);
+        const targetIndex = rows.controls.indexOf(targetRow);
+        if (previousIndex < 0 || targetIndex < 0 || previousIndex === targetIndex) {
+            return undefined;
+        }
+        const rowUi = this.uiStore.get(row) ?? this.getUiRows().at(previousIndex);
+        rows.removeAt(previousIndex, { emitEvent: false });
+        this.getUiRows().removeAt(previousIndex);
+        // En descendant, la suppression décale la cible d'une position : utiliser
+        // son index initial insère donc naturellement la ligne après celle-ci.
+        rows.insert(targetIndex, row, { emitEvent: false });
+        this.getUiRows().insert(targetIndex, rowUi);
+        rows.updateValueAndValidity({ emitEvent: true });
+        this.notifyRowsStructureChanged();
+        return {
+            previousIndex,
+            currentIndex: rows.controls.indexOf(row),
+        };
+    }
+    canMoveSubtree(row, targetRow) {
+        if (row === targetRow)
+            return true;
+        const rowValue = row.getRawValue();
+        const targetValue = targetRow.getRawValue();
+        if (rowValue._parentId !== targetValue._parentId || (rowValue._depth ?? 0) !== (targetValue._depth ?? 0))
+            return false;
+        return !this.getSubtreeRows(row).includes(targetRow);
+    }
+    moveSubtree(row, targetRow) {
+        const rows = this.getRows();
+        const previousIndex = rows.controls.indexOf(row);
+        const targetIndex = rows.controls.indexOf(targetRow);
+        if (previousIndex < 0 || targetIndex < 0 || previousIndex === targetIndex || !this.canMoveSubtree(row, targetRow))
+            return undefined;
+        const movedRows = this.getSubtreeRows(row);
+        const movedSet = new Set(movedRows);
+        const movedUis = movedRows.map((movedRow) => this.uiStore.get(movedRow) ?? this.getUiRows().at(rows.controls.indexOf(movedRow)));
+        const parentId = row.getRawValue()._parentId;
+        const previousSiblingIndex = this.getSiblingIndex(row);
+        let targetSubtreeEnd = targetIndex + this.getSubtreeRows(targetRow).length;
+        let insertionIndex = previousIndex < targetIndex ? targetSubtreeEnd : targetIndex;
+        for (let index = rows.length - 1; index >= 0; index--) {
+            if (!movedSet.has(rows.at(index)))
+                continue;
+            rows.removeAt(index, { emitEvent: false });
+            this.getUiRows().removeAt(index);
+            if (index < insertionIndex)
+                insertionIndex--;
+        }
+        movedRows.forEach((movedRow, offset) => {
+            rows.insert(insertionIndex + offset, movedRow, { emitEvent: false });
+            this.getUiRows().insert(insertionIndex + offset, movedUis[offset]);
+        });
+        rows.updateValueAndValidity({ emitEvent: true });
+        this.notifyRowsStructureChanged();
+        return {
+            previousIndex,
+            currentIndex: rows.controls.indexOf(row),
+            previousSiblingIndex,
+            currentSiblingIndex: this.getSiblingIndex(row, parentId),
+            movedRows,
+        };
+    }
+    getSubtreeRows(row) {
+        const rows = this.getRows().controls;
+        const index = rows.indexOf(row);
+        if (index < 0)
+            return [];
+        const depth = row.getRawValue()._depth ?? 0;
+        const subtree = [row];
+        for (let current = index + 1; current < rows.length; current++) {
+            if ((rows[current].getRawValue()._depth ?? 0) <= depth)
+                break;
+            subtree.push(rows[current]);
+        }
+        return subtree;
+    }
+    getSiblingIndex(row, parentId = row.getRawValue()._parentId) {
+        return this.getRows()
+            .controls.filter((candidate) => candidate.getRawValue()._parentId === parentId)
+            .indexOf(row);
+    }
+    transferRowTo(target, row, targetRow) {
+        if (target === this) {
+            return targetRow ? this.moveRow(row, targetRow) : undefined;
+        }
+        const previousIndex = this.getRows().controls.indexOf(row);
+        if (previousIndex < 0) {
+            return undefined;
+        }
+        const rowUi = this.uiStore.get(row) ?? this.getUiRows().at(previousIndex);
+        const rowContext = this.rowContextStore.get(row)?.();
+        const targetIndex = targetRow ? target.getRows().controls.indexOf(targetRow) : target.getRows().length;
+        const currentIndex = targetIndex < 0 ? target.getRows().length : targetIndex;
+        this.getRows().removeAt(previousIndex, { emitEvent: false });
+        this.getUiRows().removeAt(previousIndex);
+        this.rowContextStore.delete(row);
+        target.getRows().insert(currentIndex, row, { emitEvent: false });
+        target.getUiRows().insert(currentIndex, rowUi);
+        target.uiStore.set(row, rowUi);
+        if (rowContext) {
+            target.rowContextStore.set(row, rowContext);
+        }
+        this.getRows().updateValueAndValidity({ emitEvent: true });
+        target.getRows().updateValueAndValidity({ emitEvent: true });
+        this.notifyRowsStructureChanged();
+        target.notifyRowsStructureChanged();
+        return { previousIndex, currentIndex };
+    }
+    transferSubtreeTo(target, row, targetRow) {
+        if (target === this)
+            return targetRow ? this.moveSubtree(row, targetRow) : undefined;
+        const previousIndex = this.getRows().controls.indexOf(row);
+        if (previousIndex < 0 || (row.getRawValue()._depth ?? 0) !== 0)
+            return undefined;
+        if (targetRow && ((targetRow.getRawValue()._depth ?? 0) !== 0 || targetRow.getRawValue()._parentId != null))
+            return undefined;
+        const movedRows = this.getSubtreeRows(row);
+        const previousSiblingIndex = this.getSiblingIndex(row);
+        const movedData = movedRows.map((movedRow) => ({
+            row: movedRow,
+            ui: this.uiStore.get(movedRow) ?? this.getUiRows().at(this.getRows().controls.indexOf(movedRow)),
+            context: this.rowContextStore.get(movedRow)?.(),
+        }));
+        for (let index = this.getRows().length - 1; index >= 0; index--) {
+            if (!movedRows.includes(this.getRows().at(index)))
+                continue;
+            const movedRow = this.getRows().at(index);
+            this.getRows().removeAt(index, { emitEvent: false });
+            this.getUiRows().removeAt(index);
+            this.rowContextStore.delete(movedRow);
+        }
+        const insertionIndex = targetRow ? target.getRows().controls.indexOf(targetRow) : target.getRows().length;
+        movedData.forEach(({ row: movedRow, ui, context }, offset) => {
+            target.getRows().insert(insertionIndex + offset, movedRow, { emitEvent: false });
+            target.getUiRows().insert(insertionIndex + offset, ui);
+            target.uiStore.set(movedRow, ui);
+            if (context)
+                target.rowContextStore.set(movedRow, context);
+        });
+        this.getRows().updateValueAndValidity({ emitEvent: true });
+        target.getRows().updateValueAndValidity({ emitEvent: true });
+        this.notifyRowsStructureChanged();
+        target.notifyRowsStructureChanged();
+        return {
+            previousIndex,
+            currentIndex: target.getRows().controls.indexOf(row),
+            previousSiblingIndex,
+            currentSiblingIndex: target.getSiblingIndex(row, null),
+            movedRows,
+        };
+    }
     updateRow(_id, value, options) {
         const row = this.getRows().controls.find((c) => c.getRawValue()._id === _id);
         if (row) {
@@ -732,14 +1110,25 @@ class KlesForm {
         }
     }
     deleteRowById(id, option) {
-        const index = this.getRows().controls.findIndex((c) => c.getRawValue()._id === id);
-        if (index !== -1) {
+        this.deleteRowsByIds([id], option);
+    }
+    deleteRowsByIds(ids, option) {
+        const idSet = new Set(ids);
+        const indexes = this.getRows()
+            .controls.map((row, index) => ({ row, index }))
+            .filter(({ row }) => idSet.has(row.getRawValue()._id))
+            .map(({ index }) => index)
+            .sort((a, b) => b - a);
+        if (indexes.length === 0)
+            return;
+        for (const index of indexes) {
             const row = this.getRows().at(index);
-            this.getRows().removeAt(index, option);
+            this.getRows().removeAt(index, { emitEvent: false });
             this.rowContextStore.delete(row);
             this.getUiRows().removeAt(index);
-            this.notifyRowsStructureChanged();
         }
+        this.getRows().updateValueAndValidity(option);
+        this.notifyRowsStructureChanged();
     }
     setHeaderControl(name, header, options) {
         this.getHeader().setControl(name, header, options);
@@ -800,64 +1189,162 @@ class TreeService {
     constructor() {
         this.loaderConfig = inject(LOADER_CONFIG);
         this.loaderChildrensService = inject(LoaderChildrensService);
-        this.loadingService = inject(LoadingService);
         this.fm = inject(KlesForm);
         this.columnsService = inject(ColumnsService);
         this.rowFactory = inject(RowFormFactory);
-        this.loading = new Set();
-        this._expandedIds$ = new BehaviorSubject(new Set());
-        this.expandedIds$ = this._expandedIds$.asObservable();
-    }
-    findParentIndex(id) {
-        return this.fm.getRows().controls.findIndex((c) => c.getRawValue()._id === id);
+        this.eventsService = inject(EventsService);
+        this.destroyRef = inject(DestroyRef);
+        this.expandedSubject = new BehaviorSubject(new Set());
+        this.expandedIds$ = this.expandedSubject.asObservable();
+        this.expandedIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedIds" }] : /* istanbul ignore next */ []));
+        this.loadingIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "loadingIds" }] : /* istanbul ignore next */ []));
+        this.fm.rowsReplaced$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.reset());
     }
     toggle(id, group, depth) {
-        const expanded = new Set(this._expandedIds$.value);
-        if (expanded.has(id)) {
-            this.fm
-                .getRows()
-                .controls.filter((control) => control.getRawValue()._parentId === id)
-                .map((control) => control.getRawValue()._id)
-                .forEach((_id) => this.fm.deleteRowById(_id));
-            expanded.delete(id);
-            this._expandedIds$.next(expanded);
-        }
-        else {
-            const index = this.findParentIndex(id);
-            this.loaderChildrensService.load(group, depth).subscribe((response) => {
-                if (response.loading) {
-                    this.loading.add(id);
-                    // this.loadingService.start();
-                }
-                else {
-                    this.loading.delete(id);
-                    // this.loadingService.stop();
-                    // console.log( (group.getRawValue()._depth ?? 0) + 1)
-                    this.fm.insertRows(this.rowFactory.createRows(this.columnsService.columns().map((col) => ({ ...col.cell?.field, name: col.columnDef })), response.items, { depth: (group.getRawValue()._depth ?? 0) + 1, parentId: id }), index + 1);
-                    expanded.add(id);
-                    this._expandedIds$.next(expanded);
-                }
+        if (this.isLoading(id))
+            return;
+        this.isExpanded(id) ? this.collapse(id, group, depth) : this.expand(id, group, depth);
+    }
+    expand(id, group, depth) {
+        if (this.isExpanded(id) || this.isLoading(id))
+            return;
+        const parent = group ?? this.findRow(id);
+        if (!parent)
+            return;
+        const level = depth ?? parent.getRawValue()._depth ?? 0;
+        if (!this.hasChildren(parent, level))
+            return;
+        const payload = this.rowPayload(parent, level);
+        this.setLoading(id, true);
+        this.eventsService.emit('nodeLoadChildren', payload);
+        this.loaderChildrensService
+            .load(parent, level)
+            .pipe(filter((response) => !response.loading), take(1), takeUntilDestroyed(this.destroyRef))
+            .subscribe((response) => {
+            this.setLoading(id, false);
+            if (response.error) {
+                this.eventsService.emit('loadError', {
+                    error: response.error,
+                    message: response.error instanceof Error ? response.error.message : undefined,
+                });
+                return;
+            }
+            const parentIndex = this.fm.getRows().controls.indexOf(parent);
+            if (parentIndex < 0)
+                return;
+            const children = this.rowFactory.createRows(this.columnsService.columns().map((column) => ({ ...column.cell?.field, name: column.columnDef })), response.items, { depth: level + 1, parentId: id });
+            this.fm.insertRows(children, parentIndex + 1);
+            this.setExpanded(id, true);
+            const childRows = children.map((child) => child.formGroup);
+            this.eventsService.emit('nodeChildrenLoaded', {
+                ...payload,
+                children: childRows,
+                childValues: childRows.map((child) => child.getRawValue()),
             });
+            this.eventsService.emit('nodeExpand', payload);
+        });
+    }
+    collapse(id, group, depth) {
+        if (!this.isExpanded(id))
+            return;
+        const parent = group ?? this.findRow(id);
+        if (!parent) {
+            this.setExpanded(id, false);
+            return;
         }
+        const descendants = this.getDescendants(id);
+        const descendantIds = descendants.map((row) => row.getRawValue()._id);
+        const expanded = new Set(this.expandedSubject.value);
+        expanded.delete(id);
+        descendantIds.forEach((descendantId) => expanded.delete(descendantId));
+        this.publishExpanded(expanded);
+        this.fm.deleteRowsByIds(descendantIds, { emitEvent: false });
+        this.eventsService.emit('nodeCollapse', this.rowPayload(parent, depth ?? parent.getRawValue()._depth ?? 0));
+    }
+    collapseAll() {
+        const childIds = this.fm
+            .getRows()
+            .controls.filter((row) => (row.getRawValue()._depth ?? 0) > 0)
+            .map((row) => row.getRawValue()._id);
+        this.publishExpanded(new Set());
+        this.fm.deleteRowsByIds(childIds, { emitEvent: false });
+    }
+    reset() {
+        this.publishExpanded(new Set());
+        this.loadingIds.set(new Set());
+    }
+    isExpanded(id) {
+        return this.expandedSubject.value.has(id);
+    }
+    isLoading(id) {
+        return this.loadingIds().has(id);
+    }
+    getChildren(id) {
+        return this.fm.getRows().controls.filter((row) => row.getRawValue()._parentId === id);
+    }
+    getDescendants(id) {
+        const rows = this.fm.getRows().controls;
+        const parentIndex = rows.findIndex((row) => row.getRawValue()._id === id);
+        if (parentIndex < 0)
+            return [];
+        const parentDepth = rows[parentIndex].getRawValue()._depth ?? 0;
+        const descendants = [];
+        for (let index = parentIndex + 1; index < rows.length; index++) {
+            const row = rows[index];
+            if ((row.getRawValue()._depth ?? 0) <= parentDepth)
+                break;
+            descendants.push(row);
+        }
+        return descendants;
     }
     hasChildren(group, depth) {
-        return this.loaderConfig.lines.hasChildren?.(group, depth) ?? true;
+        const configured = this.loaderConfig.lines.hasChildren;
+        return configured ? configured(group, depth) : typeof this.loaderConfig.lines.childrens === 'function';
+    }
+    findRow(id) {
+        return this.fm.getRows().controls.find((row) => row.getRawValue()._id === id);
+    }
+    setExpanded(id, expanded) {
+        const ids = new Set(this.expandedSubject.value);
+        expanded ? ids.add(id) : ids.delete(id);
+        this.publishExpanded(ids);
+    }
+    publishExpanded(ids) {
+        this.expandedSubject.next(ids);
+        this.expandedIds.set(ids);
+    }
+    setLoading(id, loading) {
+        const ids = new Set(this.loadingIds());
+        loading ? ids.add(id) : ids.delete(id);
+        this.loadingIds.set(ids);
+    }
+    rowPayload(row, level) {
+        return {
+            row,
+            rowIndex: this.fm.getRows().controls.indexOf(row),
+            value: row.value,
+            rawValue: row.getRawValue(),
+            level,
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TreeService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TreeService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: () => [] });
 
 class KlesCellComponent {
     constructor() {
         this.destroyRef = inject(DestroyRef);
         this.expandedRowStore = inject(ExpandedRowStore);
         this.treeService = inject(TreeService);
+        this.eventsService = inject(EventsService);
         this.ui = input.required(...(ngDevMode ? [{ debugName: "ui" }] : /* istanbul ignore next */ []));
         this.group = input.required(...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
         this.column = input.required(...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+        this.rowIndex = input.required(...(ngDevMode ? [{ debugName: "rowIndex" }] : /* istanbul ignore next */ []));
+        this.dragHandle = input(false, ...(ngDevMode ? [{ debugName: "dragHandle" }] : /* istanbul ignore next */ []));
         this.expandedRow = computed(() => {
             return (this.column().canExpand ?? false) && (this.ui().get(this.column().columnDef)?.value().expandedRow ?? false);
         }, ...(ngDevMode ? [{ debugName: "expandedRow" }] : /* istanbul ignore next */ []));
@@ -867,6 +1354,8 @@ class KlesCellComponent {
         this.hasChildren = computed(() => {
             return this.treeService.hasChildren(this.group(), this.group().getRawValue()._depth);
         }, ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
+        this.depth = computed(() => Math.max(0, this.group().getRawValue()._depth ?? 0), ...(ngDevMode ? [{ debugName: "depth" }] : /* istanbul ignore next */ []));
+        this.loadingNode = computed(() => this.treeService.isLoading(this.group().getRawValue()._id), ...(ngDevMode ? [{ debugName: "loadingNode" }] : /* istanbul ignore next */ []));
         this.column$ = toObservable(this.column);
     }
     ngOnInit() {
@@ -876,16 +1365,27 @@ class KlesCellComponent {
         event.stopPropagation();
     }
     expandRow() {
-        this.expandedRowStore.toggle(this.group().getRawValue()._id);
+        const row = this.group();
+        const expanded = this.expandedRowStore.isExpanded(row.getRawValue()._id);
+        this.expandedRowStore.toggle(row.getRawValue()._id);
+        const payload = {
+            row,
+            rowIndex: this.rowIndex(),
+            value: row.value,
+            rawValue: row.getRawValue(),
+            level: row.getRawValue()._depth,
+        };
+        this.eventsService.emit(expanded ? 'rowCollapse' : 'rowExpand', payload);
+        this.eventsService.emit('rowToggleExpand', payload);
     }
     expandNode() {
-        this.treeService.toggle(this.group().getRawValue()._id, this.group(), 0); //TODO depth
+        this.treeService.toggle(this.group().getRawValue()._id, this.group(), this.group().getRawValue()._depth ?? 0);
     }
     listen() {
         this.column$
             .pipe(filter((column) => column.canExpand ?? false), switchMap(() => {
             return this.expandedRowStore.expandedIds$.pipe(takeUntilDestroyed(this.destroyRef), map((ids) => {
-                return ids.has(this.group().value._id);
+                return ids.has(this.group().getRawValue()._id);
             }));
         }))
             .subscribe((expandedRow) => {
@@ -902,21 +1402,22 @@ 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 } }, ngImport: i0, template: "@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 (hasChildren() && column().canExpandNode) {\n    <button matIconButton class=\"expand-button\" (click)=\"expandNode(); stopPropagation($event)\">\n        @if (this.expandedNode()) {\n            <mat-icon>keyboard_arrow_down</mat-icon>\n        } @else {\n            <mat-icon>chevron_right</mat-icon>\n        }\n    </button>\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{flex-grow:1;justify-content:inherit;flex-direction:column;display:flex;text-align:center}.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}\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"] }] }); }
+    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"] }] }); }
 }
 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], template: "@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 (hasChildren() && column().canExpandNode) {\n    <button matIconButton class=\"expand-button\" (click)=\"expandNode(); stopPropagation($event)\">\n        @if (this.expandedNode()) {\n            <mat-icon>keyboard_arrow_down</mat-icon>\n        } @else {\n            <mat-icon>chevron_right</mat-icon>\n        }\n    </button>\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{flex-grow:1;justify-content:inherit;flex-direction:column;display:flex;text-align:center}.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}\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 }] }] } });
+            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"] }]
+        }], propDecorators: { ui: [{ type: i0.Input, args: [{ isSignal: true, alias: "ui", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: true }] }], dragHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragHandle", required: false }] }] } });
 
 class KlesHeaderComponent {
     constructor() {
         this.header = input.required(...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
         this.group = input.required(...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
+        this.dragHandleSpacer = input(false, ...(ngDevMode ? [{ debugName: "dragHandleSpacer" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesHeaderComponent, isStandalone: true, selector: "kles-header", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null } }, 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 } }, ngImport: i0, template: `
         <div
             class="header"
             mat-sort-header
@@ -928,7 +1429,10 @@ class KlesHeaderComponent {
             {{ header().label }}
         </div>
 
-        <div class="filterHeader">
+        <div class="filterHeader" [class.has-drag-handle-spacer]="dragHandleSpacer()">
+            @if (dragHandleSpacer()) {
+                <span class="drag-handle-spacer" aria-hidden="true"></span>
+            }
             <div class="field">
                 <ng-content></ng-content>
             </div>
@@ -947,7 +1451,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}.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}.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesHeaderComponent, decorators: [{
             type: Component,
@@ -963,7 +1467,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             {{ header().label }}
         </div>
 
-        <div class="filterHeader">
+        <div class="filterHeader" [class.has-drag-handle-spacer]="dragHandleSpacer()">
+            @if (dragHandleSpacer()) {
+                <span class="drag-handle-spacer" aria-hidden="true"></span>
+            }
             <div class="field">
                 <ng-content></ng-content>
             </div>
@@ -982,8 +1489,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}.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 }] }] } });
+    `, 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 }] }] } });
 
 class HeaderPipe {
     transform(col) {
@@ -1111,6 +1618,15 @@ class KlesTableConnectorService {
     get events() {
         return this.table.events;
     }
+    get emptyState() {
+        return this.table.emptyState;
+    }
+    get render() {
+        return this.table.render;
+    }
+    get tree() {
+        return this.table.tree;
+    }
     refresh() {
         this.table?.refresh();
     }
@@ -1121,6 +1637,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             type: Injectable
         }], ctorParameters: () => [] });
 
+class LoadingService {
+    constructor(eventsService) {
+        this.eventsService = eventsService;
+        this._loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : /* istanbul ignore next */ []));
+    }
+    get loading() {
+        return this._loading.asReadonly();
+    }
+    start() {
+        if (this._loading()) {
+            return;
+        }
+        this._loading.set(true);
+        this.eventsService.emit('loadingChange', { loading: true });
+    }
+    stop() {
+        if (!this._loading()) {
+            return;
+        }
+        this._loading.set(false);
+        this.eventsService.emit('loadingChange', { loading: false });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoadingService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoadingService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoadingService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: EventsService }] });
+
 class PaginatorStore {
     constructor(config) {
         this.config = config;
@@ -1301,19 +1846,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
         }] });
 
 class FooterService {
-    constructor(_footer) {
+    constructor(_footer, eventsService) {
         this._footer = _footer;
+        this.eventsService = eventsService;
     }
     get footer() {
         return this._footer.asReadonly();
     }
     show() {
+        if (this._footer()) {
+            return;
+        }
         this._footer.set(true);
+        this.eventsService.emit('footerVisibilityChange', { visible: true });
     }
     hide() {
+        if (!this._footer()) {
+            return;
+        }
         this._footer.set(false);
+        this.eventsService.emit('footerVisibilityChange', { visible: false });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FooterService, deps: [{ token: FOOTER }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FooterService, deps: [{ token: FOOTER }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FooterService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FooterService, decorators: [{
@@ -1321,7 +1875,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [FOOTER]
-                }] }] });
+                }] }, { type: EventsService }] });
 
 class ExtraRowService {
     constructor(_extraRowsConfig, expandedRowStore) {
@@ -1334,15 +1888,16 @@ class ExtraRowService {
             displayedColumns: config.cells.map((cel) => cel.columnDef),
         })), ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
     }
-    extraColumns() {
+    extraFields() {
         return this._extraRowsConfig()
             .flatMap((config) => config.cells)
-            .filter(Boolean);
+            .filter(Boolean)
+            .map((cell) => ({ ...cell.field, name: cell.columnDef }));
     }
     createWhen(config) {
         if (config.mode === 'expand') {
             return (_, row) => {
-                return this.expandedRowStore.isExpanded(row.value._id);
+                return this.expandedRowStore.isExpanded(row.getRawValue()._id);
             };
         }
         else {
@@ -1565,7 +2120,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: EventsService }] });
 
-//TODO Abstract Datasource service
 class DatasourceService {
     constructor(fm, columnsService, cellValueChangeService, validationService) {
         this.fm = fm;
@@ -1833,7 +2387,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
         }], ctorParameters: () => [{ type: EventsService }] });
 
 class EmptyStateService {
-    constructor(config) {
+    constructor(config, eventsService) {
+        this.eventsService = eventsService;
         this._enabled = signal(true, ...(ngDevMode ? [{ debugName: "_enabled" }] : /* istanbul ignore next */ []));
         this.enabled = this._enabled.asReadonly();
         if (typeof config === 'boolean') {
@@ -1845,15 +2400,23 @@ class EmptyStateService {
         this.component = config?.component ?? KlesTableEmptyStateComponent;
     }
     enable() {
+        if (this._enabled()) {
+            return;
+        }
         this._enabled.set(true);
+        this.eventsService.emit('emptyStateChange', { enabled: true });
     }
     disable() {
+        if (!this._enabled()) {
+            return;
+        }
         this._enabled.set(false);
+        this.eventsService.emit('emptyStateChange', { enabled: false });
     }
     toggle() {
-        this._enabled.update((enabled) => !enabled);
+        this._enabled() ? this.disable() : this.enable();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EmptyStateService, deps: [{ token: EMPTY_STATE_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EmptyStateService, deps: [{ token: EMPTY_STATE_CONFIG }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EmptyStateService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EmptyStateService, decorators: [{
@@ -1861,90 +2424,178 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [EMPTY_STATE_CONFIG]
-                }] }] });
+                }] }, { type: EventsService }] });
 
 class DragDropBase {
-    constructor(config) {
+    static { this.nextDropListId = 0; }
+    constructor(config, eventsService, klesForm, injector, tableId) {
         this.config = config;
+        this.eventsService = eventsService;
+        this.klesForm = klesForm;
+        this.injector = injector;
+        this.dropListId = tableId ? this.toDropListId(tableId) : `kles-rows-drop-list-${DragDropBase.nextDropListId++}`;
     }
     get enable() {
         return this.config?.enable || false;
     }
+    get handleOnly() {
+        return this.enable && (this.config?.options?.handleOnly ?? false);
+    }
     get autoScrollStep() {
-        return this.config?.options?.autoScrollStep ?? true;
+        return this.config?.options?.autoScrollStep ?? 8;
     }
     get connectedTo() {
-        return this.config?.options?.connectedTo;
+        return this.config?.options?.connectedTo?.map((id) => this.toDropListId(id));
     }
     get sortPredicate() {
         return (index, item) => {
-            return true;
+            const row = item.data;
+            const targetRow = item.dropContainer.getSortedItems()[index]?.data;
+            if (!targetRow || row === targetRow)
+                return true;
+            const targetForm = item.dropContainer.data;
+            if (targetForm !== this.klesForm) {
+                return (row.getRawValue()._depth ?? 0) === 0 && (targetRow.getRawValue()._depth ?? 0) === 0;
+            }
+            return this.klesForm.canMoveSubtree(row, targetRow);
         };
     }
     get previewComponent() {
         return this.config?.options?.dragPreview?.component;
     }
     get previewMatchSize() {
-        return this.config?.options?.dragPreview?.matchSize || true;
+        return this.config?.options?.dragPreview?.matchSize ?? true;
+    }
+    get placeholderComponent() {
+        return this.config?.options?.dragPlaceholder?.component;
+    }
+    isDragDisabled(row) {
+        return this.config?.options?.dragDisabled?.(row) ?? false;
+    }
+    componentInjector(row, rowIndex) {
+        return Injector.create({
+            parent: this.injector,
+            providers: [
+                {
+                    provide: KLES_DRAG_DROP_ROW_CONTEXT,
+                    useValue: this.rowPayload(row, rowIndex),
+                },
+            ],
+        });
+    }
+    rowDragStarted(row, rowIndex) {
+        this.eventsService.emit('rowDragStart', this.rowPayload(row, rowIndex));
+    }
+    rowDragMoved(row, rowIndex) {
+        this.eventsService.emit('rowDragMove', this.rowPayload(row, rowIndex));
+    }
+    rowDragEnded(row, rowIndex) {
+        this.eventsService.emit('rowDragEnd', this.rowPayload(row, rowIndex));
+    }
+    rowPayload(row, rowIndex) {
+        return {
+            row,
+            rowIndex,
+            value: row.value,
+            rawValue: row.getRawValue(),
+        };
+    }
+    reorder(event) {
+        const row = event.item.data;
+        const visibleRows = event.container.getSortedItems().map((item) => item.data);
+        const targetRow = visibleRows[event.currentIndex];
+        if (!targetRow) {
+            return;
+        }
+        const moved = this.klesForm.moveSubtree(row, targetRow);
+        if (moved) {
+            this.handleDrop({
+                ...this.rowPayload(row, moved.currentIndex),
+                previousIndex: moved.previousIndex,
+                currentIndex: moved.currentIndex,
+                parentId: row.getRawValue()._parentId,
+                depth: row.getRawValue()._depth ?? 0,
+                previousSiblingIndex: moved.previousSiblingIndex,
+                currentSiblingIndex: moved.currentSiblingIndex,
+                movedRows: moved.movedRows,
+                movedRawValues: moved.movedRows.map((movedRow) => movedRow.getRawValue()),
+            });
+        }
+    }
+    transfer(event) {
+        const row = event.item.data;
+        const targetRows = event.container.getSortedItems().map((item) => item.data);
+        const targetRow = targetRows[event.currentIndex];
+        const moved = event.previousContainer.data.transferSubtreeTo(event.container.data, row, targetRow);
+        if (moved) {
+            this.handleDrop({
+                ...this.rowPayload(row, moved.currentIndex),
+                previousIndex: moved.previousIndex,
+                currentIndex: moved.currentIndex,
+                previousContainerId: event.previousContainer.id,
+                currentContainerId: event.container.id,
+                parentId: row.getRawValue()._parentId,
+                depth: row.getRawValue()._depth ?? 0,
+                previousSiblingIndex: moved.previousSiblingIndex,
+                currentSiblingIndex: moved.currentSiblingIndex,
+                movedRows: moved.movedRows,
+                movedRawValues: moved.movedRows.map((movedRow) => movedRow.getRawValue()),
+            });
+        }
+    }
+    handleDrop(change) {
+        this.eventsService.emit('rowDrop', change);
+        const drop = this.config?.options?.drop;
+        if (!drop) {
+            return;
+        }
+        defer(() => drop(change))
+            .pipe(defaultIfEmpty(undefined), take(1))
+            .subscribe({
+            next: () => this.eventsService.emit('rowDropSuccess', change),
+            error: (error) => this.eventsService.emit('rowDropError', { change, error }),
+        });
+    }
+    toDropListId(id) {
+        return id.endsWith('-rows-drop-list') ? id : `${id}-rows-drop-list`;
     }
 }
-class DragDropService extends DragDropBase {
-    constructor(config, paginatorStore) {
-        super(config);
-        this.config = config;
-        this.paginatorStore = paginatorStore;
+let DragDropService = class DragDropService extends DragDropBase {
+    constructor(config, eventsService, klesForm, injector, tableId) {
+        super(config, eventsService, klesForm, injector, tableId);
     }
     listDropped(event) {
         if (event.previousContainer === event.container) {
-            const faRows = event.container.data;
-            const currentIndex = event.currentIndex + (this.paginatorStore?.snapshot().page ?? 0) * (this.paginatorStore?.snapshot().perPage ?? 0);
-            const previousIndex = event.previousIndex + (this.paginatorStore?.snapshot().page ?? 0) * (this.paginatorStore?.snapshot().perPage ?? 0);
-            if (previousIndex >= 0) {
-                const ctrl = faRows.at(previousIndex);
-                faRows.removeAt(previousIndex, { emitEvent: false });
-                faRows.insert(currentIndex, ctrl, { emitEvent: false });
-                faRows.updateValueAndValidity({ emitEvent: true });
-            }
+            this.reorder(event);
         }
         else {
-            //TODO
+            this.transfer(event);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DragDropService, deps: [{ token: DRAG_DROP_CONFIG, optional: true }, { token: PaginatorStore, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DragDropService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DragDropService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [DRAG_DROP_CONFIG]
-                }] }, { type: PaginatorStore, decorators: [{
-                    type: Optional
-                }] }] });
-class DragDropLazyService extends DragDropBase {
-    constructor(config) {
-        super(config);
-        this.config = config;
+};
+DragDropService = __decorate([
+    __param(0, Optional()),
+    __param(0, Inject(DRAG_DROP_CONFIG))
+], DragDropService);
+let DragDropLazyService = class DragDropLazyService extends DragDropBase {
+    constructor(config, eventsService, klesForm, injector, tableId) {
+        super(config, eventsService, klesForm, injector, tableId);
     }
     listDropped(event) {
-        // TODO appeler un observable + refresh tableau
+        if (event.previousContainer === event.container) {
+            this.reorder(event);
+            return;
+        }
+        this.transfer(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DragDropLazyService, deps: [{ token: DRAG_DROP_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DragDropLazyService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DragDropLazyService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [DRAG_DROP_CONFIG]
-                }] }] });
+};
+DragDropLazyService = __decorate([
+    __param(0, Optional()),
+    __param(0, Inject(DRAG_DROP_CONFIG))
+], DragDropLazyService);
 
 class TableComponent {
-    constructor(host, connectorService, loader, datasourceService, tableService, dragDropRowService, selectionService, columnsService, loadingService, paginatorService, scrollbarService, footerService, extraRowService, renderService, sortService, filterService, expandedRowStore, rowFactory, eventsService, rowService, cellService, emptyStateService) {
+    constructor(host, connectorService, loader, datasourceService, tableService, dragDropRowService, selectionService, columnsService, loadingService, paginatorService, scrollbarService, footerService, extraRowService, renderService, sortService, filterService, expandedRowStore, rowFactory, eventsService, rowService, cellService, emptyStateService, treeService) {
         this.host = host;
         this.connectorService = connectorService;
         this.loader = loader;
@@ -1967,6 +2618,7 @@ class TableComponent {
         this.rowService = rowService;
         this.cellService = cellService;
         this.emptyStateService = emptyStateService;
+        this.treeService = treeService;
         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 */ []));
@@ -1993,6 +2645,33 @@ class TableComponent {
             listen: () => this.eventsService.events$,
         };
     }
+    get emptyState() {
+        return {
+            enabled: this.emptyStateService.enabled,
+            enable: () => this.emptyStateService.enable(),
+            disable: () => this.emptyStateService.disable(),
+            toggle: () => this.emptyStateService.toggle(),
+        };
+    }
+    get render() {
+        return {
+            rows: () => this.renderService.forceRenderRows(),
+        };
+    }
+    get tree() {
+        return {
+            expandedIds: this.treeService.expandedIds,
+            loadingIds: this.treeService.loadingIds,
+            isExpanded: (id) => this.treeService.isExpanded(id),
+            isLoading: (id) => this.treeService.isLoading(id),
+            getChildren: (id) => this.treeService.getChildren(id),
+            getDescendants: (id) => this.treeService.getDescendants(id),
+            expand: (id) => this.treeService.expand(id),
+            collapse: (id) => this.treeService.collapse(id),
+            toggle: (id) => this.treeService.toggle(id),
+            collapseAll: () => this.treeService.collapseAll(),
+        };
+    }
     get form() {
         return {
             header: {
@@ -2011,25 +2690,43 @@ class TableComponent {
                 list: () => this.tableService.klesForm.getRows(),
                 get: (_id) => this.tableService.klesForm.getRows().controls.find((row) => row.value._id === _id),
                 create: (value, index, options) => {
-                    return this.tableService.klesForm.insertRow(this.rowFactory.createRow(this.columnsService
+                    const row = this.tableService.klesForm.insertRow(this.rowFactory.createRow(this.columnsService
                         .columns()
                         .map((col) => ({ ...col.cell?.field, name: col.columnDef }))
-                        .concat(this.extraRowService.extraColumns().map((col) => ({ ...col, name: col.columnDef }))), value), index, options).formGroup;
+                        .concat(this.extraRowService.extraFields()), value), index, options).formGroup;
+                    this.eventsService.emit('rowCreate', this.rowEventPayload(row));
+                    return row;
                 },
                 patch: (_id, value, options) => {
-                    return this.tableService.klesForm.updateRow(_id, value, options);
+                    const row = this.tableService.klesForm.updateRow(_id, value, options);
+                    if (row) {
+                        this.eventsService.emit('rowPatch', this.rowEventPayload(row));
+                    }
+                    return row;
                 },
                 remove: (_id, options) => {
+                    const row = this.tableService.klesForm.getRows().controls.find((current) => current.getRawValue()._id === _id);
+                    const payload = row ? this.rowEventPayload(row) : undefined;
                     this.tableService.klesForm.deleteRowById(_id, options);
+                    if (payload) {
+                        this.eventsService.emit('rowDelete', payload);
+                    }
                 },
                 reset: (_id, value, options) => {
                     this.tableService.klesForm.resetRow(_id, value, options);
+                    const row = this.tableService.klesForm.getRows().controls.find((current) => current.getRawValue()._id === _id);
+                    if (row) {
+                        this.eventsService.emit('rowUpdate', this.rowEventPayload(row));
+                    }
                 },
             },
         };
     }
     get scrollbar() {
         return {
+            setVisible: (visible) => this.scrollbarService.setScrollbarVisible(visible),
+            show: () => this.scrollbarService.showScrollbar(),
+            hide: () => this.scrollbarService.hideScrollbar(),
             getTop: () => this.scrollbarService.getTop(),
             to: (top, left, sb) => this.scrollbarService.to(top, left, sb),
             toTop: (sb) => this.scrollbarService.toTop(sb),
@@ -2040,6 +2737,7 @@ class TableComponent {
     }
     get column() {
         return {
+            getVisible: () => this.columnsService.getVisible(),
             setVisible: (columnDef, visible) => this.columnsService.setVisible(columnDef, visible),
             toggleVisible: (columnDef) => this.columnsService.toggleVisible(columnDef),
             changeWidth: (columnDef, options) => this.columnsService.changeWidth(columnDef, options),
@@ -2052,6 +2750,7 @@ class TableComponent {
     }
     get pagination() {
         return {
+            disabled: this.paginatorService.disabled(),
             setPageIndex: (index) => this.paginatorService.setPageIndex(index),
             setPageSize: (size) => this.paginatorService.setPageSize(size),
             firstPage: () => this.paginatorService.firstPage(),
@@ -2068,10 +2767,6 @@ class TableComponent {
             enable: () => this.selectionService.enable(),
             count: this.selectionService.count(),
             selectionModel: this.selectionService.selectionModel,
-            // changed: () => {},
-            // isEmpty: () => {},
-            // isMultipleSelection: () => {},
-            // selected: () => {},
         };
     }
     get sort() {
@@ -2083,12 +2778,14 @@ class TableComponent {
     }
     get loading() {
         return {
+            active: this.loadingService.loading,
             start: () => this.loadingService.start(),
             stop: () => this.loadingService.stop(),
         };
     }
     get footer() {
         return {
+            visible: this.footerService.footer,
             hide: () => this.footerService.hide(),
             show: () => this.footerService.show(),
         };
@@ -2097,8 +2794,17 @@ class TableComponent {
         return this.tableService.ui;
     }
     refresh() {
+        this.treeService.collapseAll();
         this.loader.refresh();
     }
+    rowEventPayload(row) {
+        return {
+            row,
+            rowIndex: this.tableService.klesForm.getRows().controls.indexOf(row),
+            value: row.value,
+            rawValue: row.getRawValue(),
+        };
+    }
     ngOnInit() {
         this.sortService.register(this.matSort);
         const el = this.formElemRef.nativeElement;
@@ -2120,9 +2826,6 @@ class TableComponent {
         this._cleanup?.();
         this.scrollbarService.unregister();
     }
-    submit() {
-        // TODO
-    }
     getColumnSeparator(column, section) {
         const separatorConfig = column.separator;
         if (separatorConfig === false || separatorConfig === undefined) {
@@ -2155,13 +2858,6 @@ class TableComponent {
         }
         return this.getColumnSeparator(column, section);
     }
-    // getStickyEndSeparator(column: KlesColumnConfig, section: TableSection): string | null {
-    //     const isBoundary = this.columnsService.stickyEndBoundary() === column.columnDef;
-    //     if (!isBoundary) {
-    //         return null;
-    //     }
-    //     return this.getSeparatorStyle(column, section);
-    // }
     getStickyEndSeparator(column, section) {
         if (column.stickyEnd !== true) {
             return null;
@@ -2224,8 +2920,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: 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 }], 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 [formGroup]=\"tableService.form\" (ngSubmit)=\"submit()\">\n    <!-- [fixedLayout]=\"true\" -->\n    <table\n        mat-table\n        [dataSource]=\"dataSource\"\n        matSort\n        [trackBy]=\"multiTemplateDataRows() ? null : tableService.trackBy\"\n        formArrayName=\"rows\"\n        cdkDropList\n        [cdkDropListData]=\"tableService.form.controls.rows\"\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 [style.width]=\"column.width ?? null\" [style.minWidth]=\"column.minWidth ?? null\" [style.maxWidth]=\"column.maxWidth ?? null\" />\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 [header]=\"column | header\" [group]=\"tableService.form.controls.header\">\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 [group]=\"row\" [ui]=\"row | uiField\" [column]=\"column\">\n                            <ng-container klesDynamicField [field]=\"column | cellField\" [group]=\"row\" [ui]=\"row | uiField\" [context]=\"row | rowContext\"></ng-container>\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            (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        @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                            *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                    *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}th .cell,td .cell{display:flex;flex-direction:column;justify-content:var(--align, center)}th[appResizableColumn]{position:relative}th[appResizableColumn] .resize-handle{position:absolute;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none}.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{transition:background-color .12s ease}:host .mat-mdc-row:hover{background:var(--kles-table-row-hover-background)}: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: i16.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i16.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i17.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i17.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i17.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i17.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: i19.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i19.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i19.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i19.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i19.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i19.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i19.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i19.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i19.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i19.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i19.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i19.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: i20.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i20.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "ngmodule", type: KlesMaterialDynamicformsModule }, { kind: "directive", type: i21.KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i22.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: i22.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: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i23.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"] }, { kind: "component", type: KlesHeaderComponent, selector: "kles-header", inputs: ["header", "group"] }, { 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" }] }); }
+    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: 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 }], 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            (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                            *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                    *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}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{transition:background-color .12s ease}:host .mat-mdc-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))}: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: i17.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i17.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i18.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i18.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i18.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i18.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: i20.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i20.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i20.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i20.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i20.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i20.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i20.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i20.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i20.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i20.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i20.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i20.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: i21.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i21.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i22.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "ngmodule", type: KlesMaterialDynamicformsModule }, { kind: "directive", type: i23.KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i24.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: i24.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: i24.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i24.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i25.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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -2239,6 +2935,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         MatIconModule,
                         MatButtonModule,
                         CdkTableModule,
+                        ScrollingModule,
                         KlesMaterialDynamicformsModule,
                         HeaderFieldPipe,
                         CellFieldPipe,
@@ -2255,7 +2952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         KlesHeaderComponent,
                         HeaderPipe,
                         RowContextPipe,
-                    ], template: "<form #form [formGroup]=\"tableService.form\" (ngSubmit)=\"submit()\">\n    <!-- [fixedLayout]=\"true\" -->\n    <table\n        mat-table\n        [dataSource]=\"dataSource\"\n        matSort\n        [trackBy]=\"multiTemplateDataRows() ? null : tableService.trackBy\"\n        formArrayName=\"rows\"\n        cdkDropList\n        [cdkDropListData]=\"tableService.form.controls.rows\"\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 [style.width]=\"column.width ?? null\" [style.minWidth]=\"column.minWidth ?? null\" [style.maxWidth]=\"column.maxWidth ?? null\" />\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 [header]=\"column | header\" [group]=\"tableService.form.controls.header\">\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 [group]=\"row\" [ui]=\"row | uiField\" [column]=\"column\">\n                            <ng-container klesDynamicField [field]=\"column | cellField\" [group]=\"row\" [ui]=\"row | uiField\" [context]=\"row | rowContext\"></ng-container>\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            (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        @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                            *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                    *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}th .cell,td .cell{display:flex;flex-direction:column;justify-content:var(--align, center)}th[appResizableColumn]{position:relative}th[appResizableColumn] .resize-handle{position:absolute;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none}.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{transition:background-color .12s ease}:host .mat-mdc-row:hover{background:var(--kles-table-row-hover-background)}: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                    [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            (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                            *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                    *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}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{transition:background-color .12s ease}:host .mat-mdc-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))}: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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: KlesTableConnectorService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOADER_SERVICE]
@@ -2276,7 +2973,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                     args: [SORT_SERVICE]
                 }] }, { type: FilterService, decorators: [{
                     type: Optional
-                }] }, { type: ExpandedRowStore }, { type: RowFormFactory }, { type: EventsService }, { type: RowService }, { type: CellService }, { type: EmptyStateService }], propDecorators: { table: [{
+                }] }, { type: ExpandedRowStore }, { type: RowFormFactory }, { type: EventsService }, { type: RowService }, { type: CellService }, { type: EmptyStateService }, { type: TreeService }], propDecorators: { table: [{
                 type: ViewChild,
                 args: [MatTable]
             }], matSort: [{
@@ -2535,15 +3232,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
         }] });
 
 class InfiniteScrollTableComponent {
-    constructor() { }
-    ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteScrollTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InfiniteScrollTableComponent, isStandalone: true, selector: "kles-infinite-scroll-table", ngImport: i0, template: "<!-- <cdk-virtual-scroll-viewport itemSize=\"48\">\n    <kles-table></kles-table>\n</cdk-virtual-scroll-viewport> -->\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ScrollingModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InfiniteScrollTableComponent, isStandalone: true, selector: "kles-infinite-scroll-table", ngImport: i0, template: "" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteScrollTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kles-infinite-scroll-table', standalone: true, imports: [CommonModule, ScrollingModule], template: "<!-- <cdk-virtual-scroll-viewport itemSize=\"48\">\n    <kles-table></kles-table>\n</cdk-virtual-scroll-viewport> -->\n" }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'kles-infinite-scroll-table', standalone: true, imports: [], template: "" }]
+        }] });
 
 class SelectionLoaderService {
     constructor(selectionConfig) {
@@ -2553,7 +3248,7 @@ class SelectionLoaderService {
         return this.selectionConfig?.key || '#select';
     }
     select(row, selected, filters) {
-        return (this.selectionConfig?.params?.() || of({})).pipe(auditTime(0), take(1), switchMap((params) => {
+        return defer(() => this.selectionConfig?.params?.() || of({})).pipe(auditTime(0), take(1), switchMap((params) => {
             const selection$ = this.selectionConfig?.select
                 ? this.selectionConfig.select(params, row, selected, filters)
                 : of({
@@ -2573,10 +3268,14 @@ class SelectionLoaderService {
                 loading: true,
                 success: false,
             }), result$);
-        }));
+        }), catchError((error) => of({
+            error,
+            loading: false,
+            success: false,
+        })));
     }
     selectAll(selected, filters) {
-        return (this.selectionConfig?.params?.() || of({})).pipe(auditTime(0), take(1), switchMap((params) => {
+        return defer(() => this.selectionConfig?.params?.() || of({})).pipe(auditTime(0), take(1), switchMap((params) => {
             const selection$ = this.selectionConfig?.selectAll
                 ? this.selectionConfig.selectAll(params, selected, filters)
                 : of({
@@ -2597,7 +3296,11 @@ class SelectionLoaderService {
                 loading: true,
                 success: false,
             }), result$);
-        }));
+        }), catchError((error) => of({
+            error,
+            loading: false,
+            success: false,
+        })));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SelectionLoaderService, deps: [{ token: SELECTION_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SelectionLoaderService }); }
@@ -2795,9 +3498,10 @@ class KlesSelectionModel {
         this._stateChanged = new Subject();
         this._state = KlesSelectionModelState.ENABLED;
         this._count = signal(0, ...(ngDevMode ? [{ debugName: "_count" }] : /* istanbul ignore next */ []));
-        initialValues?.forEach((v) => {
-            this._selection.add(v);
-        });
+        const values = initialValues ?? [];
+        this.assertSelectionCardinality(values);
+        values.forEach((value) => this._selection.add(value));
+        this._count.set(this._selection.size);
     }
     get selected() {
         return {
@@ -2818,20 +3522,32 @@ class KlesSelectionModel {
     get stateChanged() {
         return this._stateChanged.asObservable();
     }
+    get selectionMode() {
+        return this.multiple;
+    }
     select(value, options) {
         const added = [];
         const removed = [];
         if (this._state === KlesSelectionModelState.ENABLED) {
             if (Array.isArray(value)) {
-                if (value.length > 1 && !this.multiple) {
-                    throw getMultipleValuesInSingleSelectionError();
-                }
-                value.forEach((v) => {
-                    if (!this.isSelected(v)) {
-                        this._selection.add(v);
-                        added.push(v);
+                this.assertSelectionCardinality(value);
+                if (!this.multiple && value.length === 1) {
+                    const singleValue = value[0];
+                    if (!this.isSelected(singleValue)) {
+                        removed.push(...Array.from(this._selection));
+                        this._selection.clear();
+                        this._selection.add(singleValue);
+                        added.push(singleValue);
                     }
-                });
+                }
+                else {
+                    value.forEach((v) => {
+                        if (!this.isSelected(v)) {
+                            this._selection.add(v);
+                            added.push(v);
+                        }
+                    });
+                }
             }
             else {
                 if (!this.isSelected(value)) {
@@ -2845,7 +3561,7 @@ class KlesSelectionModel {
             }
         }
         this._count.set(this._selection.size);
-        if (options?.emitEvent ?? true) {
+        if ((options?.emitEvent ?? true) && (added.length > 0 || removed.length > 0)) {
             this._changed.next({ added, removed, count: this._selection.size, state: this._state });
         }
     }
@@ -2869,7 +3585,7 @@ class KlesSelectionModel {
             }
         }
         this._count.set(this._selection.size);
-        if (options?.emitEvent ?? true) {
+        if ((options?.emitEvent ?? true) && (added.length > 0 || removed.length > 0)) {
             this._changed.next({ added, removed, count: this._selection.size, state: this._state });
         }
     }
@@ -2896,20 +3612,40 @@ class KlesSelectionModel {
         this._stateChanged.next(this._state);
     }
     isSelected(value) {
-        return this._selection.has(this.getValue(value));
+        return this._selection.has(value);
     }
     isMultipleSelection() {
         return this.multiple || false;
     }
-    getValue(value) {
-        // si jamais je rajoute une méthode de comparaison avec _selection
-        return value;
+    reset(values, options) {
+        this.assertSelectionCardinality(values);
+        const previous = Array.from(this._selection);
+        this._selection.clear();
+        values.forEach((value) => this._selection.add(value));
+        this._count.set(this._selection.size);
+        if (options?.emitEvent ?? true) {
+            this._changed.next({
+                added: values.filter((value) => !previous.includes(value)),
+                removed: previous.filter((value) => !this._selection.has(value)),
+                count: this._selection.size,
+                state: this._state,
+            });
+        }
+    }
+    assertSelectionCardinality(values) {
+        if (!this.multiple && values.length > 1) {
+            throw getMultipleValuesInSingleSelectionError();
+        }
     }
 }
 
 class AbstractSelectionService {
-    constructor(selectionConfig) {
+    constructor(selectionConfig, fm, eventsService) {
         this.selectionConfig = selectionConfig;
+        this.fm = fm;
+        this.eventsService = eventsService;
+        this._loadingRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "_loadingRows" }] : /* istanbul ignore next */ []));
+        this.loadingRows = this._loadingRows.asReadonly();
     }
     get key() {
         return this.selectionConfig?.key || '#select';
@@ -2917,7 +3653,66 @@ class AbstractSelectionService {
     get selectionMode() {
         return this.selectionConfig?.selectionMode || false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AbstractSelectionService, deps: [{ token: SELECTION_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    isLoading(row) {
+        return this._loadingRows().has(row);
+    }
+    emitSelectionEvents(changed, selectedCount = changed.count) {
+        const payload = this.selectionPayload(changed.added, changed.removed, selectedCount);
+        this.eventsService.emit('selectionChange', payload);
+        changed.added?.forEach((row) => this.eventsService.emit('rowSelect', this.rowPayload(row)));
+        changed.removed?.forEach((row) => this.eventsService.emit('rowUnselect', this.rowPayload(row)));
+    }
+    emitBulkSelectionEvent(selected, selectedCount) {
+        this.eventsService.emit(selected ? 'selectAll' : 'unselectAll', this.selectionPayload(undefined, undefined, selectedCount));
+    }
+    startRowSelection(row) {
+        this._loadingRows.update((rows) => new Set([...rows, row]));
+        row.controls[this.key]?.disable({ emitEvent: false });
+    }
+    stabilizeRowSelection(row, selected) {
+        row.controls[this.key]?.patchValue(selected, { emitEvent: false });
+        this._loadingRows.update((rows) => {
+            const next = new Set(rows);
+            next.delete(row);
+            return next;
+        });
+        if (this.selectionModel.state === KlesSelectionModelState.DISABLED || this.selectionConfig?.isDisabled?.(row)) {
+            row.controls[this.key]?.disable({ emitEvent: false });
+        }
+        else {
+            row.controls[this.key]?.enable({ emitEvent: false });
+        }
+    }
+    emitSelectionError(error, requestedSelected, previousSelected, row) {
+        const payload = {
+            error,
+            requestedSelected,
+            previousSelected,
+            ...(row ? this.rowPayload(row) : {}),
+        };
+        this.eventsService.emit('selectionError', payload);
+    }
+    selectionPayload(addedRows, removedRows, selectedCount = 0) {
+        const selectedRows = this.selectionModel.selected.items ?? [];
+        return {
+            selectedRows,
+            selectedValues: selectedRows.map((row) => row.value),
+            selectedRawValues: selectedRows.map((row) => row.getRawValue()),
+            selectedCount,
+            addedRows,
+            removedRows,
+            allSelected: selectedCount > 0 && selectedCount === this.linesTotal(),
+        };
+    }
+    rowPayload(row) {
+        return {
+            row,
+            rowIndex: this.fm.getRows().controls.indexOf(row),
+            value: row.value,
+            rawValue: row.getRawValue(),
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AbstractSelectionService, deps: [{ token: SELECTION_CONFIG, optional: true }, { token: KlesForm }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AbstractSelectionService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AbstractSelectionService, decorators: [{
@@ -2927,11 +3722,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 }, {
                     type: Inject,
                     args: [SELECTION_CONFIG]
-                }] }] });
+                }] }, { type: KlesForm }, { type: EventsService }] });
 class SelectionService extends AbstractSelectionService {
-    constructor(selectionConfig, fm, selectionLoaderService, scrollbarService, loadingService, datasourceService, linesService) {
-        super(selectionConfig);
-        this.fm = fm;
+    constructor(selectionConfig, fm, selectionLoaderService, scrollbarService, loadingService, datasourceService, linesService, eventsService) {
+        super(selectionConfig, fm, eventsService);
         this.selectionLoaderService = selectionLoaderService;
         this.scrollbarService = scrollbarService;
         this.loadingService = loadingService;
@@ -2956,21 +3750,25 @@ class SelectionService extends AbstractSelectionService {
     enable() {
         this.selectionModel.enable();
     }
+    linesTotal() {
+        return this.linesService.total();
+    }
     setSelection() {
         this.linesService
             .loaded()
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
+            // Build the initial model silently, then update the header once.
             this.fm.getRows().controls.forEach((group) => {
                 if (group.controls[this.selectionLoaderService.key]?.value === true) {
-                    this.selectionModel.select(group, { emitEvent: false }); // event false to avoid multiple send event
+                    this.selectionModel.select(group, { emitEvent: false });
                 }
                 else if (this.selectionConfig?.isSelected != undefined && this.selectionConfig.isSelected(group)) {
-                    this.selectionModel.select(group, { emitEvent: false }); // event false to avoid multiple send event
+                    this.selectionModel.select(group, { emitEvent: false });
                     group.controls[this.selectionLoaderService.key]?.patchValue(true, { emitEvent: false });
                 }
                 else {
-                    this.selectionModel.deselect(group, { emitEvent: false }); // event false to avoid multiple send event
+                    this.selectionModel.deselect(group, { emitEvent: false });
                 }
                 if (this.selectionConfig?.isDisabled && this.selectionConfig.isDisabled(group)) {
                     group.controls[this.selectionLoaderService.key]?.disable({ emitEvent: false });
@@ -2983,31 +3781,46 @@ class SelectionService extends AbstractSelectionService {
         this.fm
             .getHeader()
             .controls[this.key]?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef), switchMap((value) => {
-            return this.selectionLoaderService.selectAll(!!value, this.fm.getHeader().getRawValue());
+            const requestedSelected = !!value;
+            const previousSelected = this.areAllFilteredRowsSelected();
+            return this.selectionLoaderService
+                .selectAll(requestedSelected, this.fm.getHeader().getRawValue())
+                .pipe(map((response) => ({ response, requestedSelected, previousSelected })));
         }))
-            .subscribe((response) => {
+            .subscribe(({ response, requestedSelected, previousSelected }) => {
             if (response.loading) {
                 this.scrollbarService.toTop('instant');
                 this.loadingService.start();
                 return;
             }
-            else {
-                this.loadingService.stop();
-                if (response.selected) {
-                    if (this.selectionModel.isMultipleSelection()) {
-                        this.selectionModel.select(this.datasourceService.datasource.filteredData?.filter((g) => g.controls[this.selectionLoaderService.key]?.enabled) ??
-                            []);
-                    }
-                    else {
-                        this.selectionModel.select(this.datasourceService.datasource.filteredData?.filter((g) => g.controls[this.selectionLoaderService.key]?.enabled)[0] ?? []);
-                    }
+            this.loadingService.stop();
+            if (!response.success || response.selected === undefined) {
+                this.updateHeader();
+                this.emitSelectionError(response.error ?? new Error('The bulk selection response is invalid.'), requestedSelected, previousSelected);
+                return;
+            }
+            if (response.selected) {
+                if (this.selectionModel.isMultipleSelection()) {
+                    this.selectionModel.select(this.datasourceService.datasource.filteredData?.filter((g) => g.controls[this.selectionLoaderService.key]?.enabled) ??
+                        []);
                 }
                 else {
-                    this.selectionModel.deselect(this.datasourceService.datasource.filteredData?.filter((g) => g.controls[this.selectionLoaderService.key]?.enabled));
+                    const row = this.datasourceService.datasource.filteredData?.filter((g) => g.controls[this.selectionLoaderService.key]?.enabled)[0];
+                    if (row) {
+                        this.selectionModel.select(row);
+                    }
                 }
             }
+            else {
+                this.selectionModel.deselect(this.datasourceService.datasource.filteredData?.filter((g) => g.controls[this.selectionLoaderService.key]?.enabled));
+            }
+            this.emitBulkSelectionEvent(response.selected, this.selectionModel.selected.count);
         });
     }
+    areAllFilteredRowsSelected() {
+        const rows = this.datasourceService.datasource.filteredData.filter((group) => group.controls[this.selectionLoaderService.key]?.enabled);
+        return rows.length > 0 && rows.every((group) => this.selectionModel.isSelected(group));
+    }
     listenRowSelection() {
         this.datasourceService.datasource
             .connect()
@@ -3020,25 +3833,32 @@ class SelectionService extends AbstractSelectionService {
             })
                 .filter(Boolean));
         }), concatMap(({ row, selected }) => {
+            const previousSelected = this.selectionModel.isSelected(row);
             return this.selectionLoaderService.select(row, selected).pipe(map((response) => {
                 return {
                     row,
+                    selected,
+                    previousSelected,
                     response,
                 };
             }));
         }))
-            .subscribe(({ row, response }) => {
+            .subscribe(({ row, selected, previousSelected, response }) => {
             if (response.loading) {
-                //mettre la ligne avec un spinner
+                this.startRowSelection(row);
+                return;
+            }
+            if (!response.success || response.selected === undefined) {
+                this.stabilizeRowSelection(row, previousSelected);
+                this.emitSelectionError(response.error ?? new Error('The row selection response is invalid.'), selected, previousSelected, row);
+                return;
+            }
+            this.stabilizeRowSelection(row, response.selected);
+            if (response.selected) {
+                this.selectionModel.select(row);
             }
             else {
-                if (response.selected) {
-                    this.selectionModel.select(row);
-                }
-                else {
-                    this.selectionModel.deselect(row);
-                }
-                //enlever la ligne en spinner
+                this.selectionModel.deselect(row);
             }
         });
     }
@@ -3052,12 +3872,15 @@ class SelectionService extends AbstractSelectionService {
             });
             this.fm.getRows().updateValueAndValidity({ emitEvent: false });
             this.updateHeader();
+            this.emitSelectionEvents(changed);
         });
         this.selectionModel.stateChanged.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((state) => {
             if (state === KlesSelectionModelState.ENABLED) {
                 this.fm.getHeader().controls[this.key].enable({ emitEvent: false });
                 this.fm.getRows().controls.forEach((group) => {
-                    group.controls[this.key].enable({ emitEvent: false });
+                    if (!this.isLoading(group) && !this.selectionConfig?.isDisabled?.(group)) {
+                        group.controls[this.key].enable({ emitEvent: false });
+                    }
                 });
             }
             else {
@@ -3094,7 +3917,7 @@ class SelectionService extends AbstractSelectionService {
             this.fm.getHeader().controls[this.selectionLoaderService.key]?.patchValue(false, { emitEvent: false });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SelectionService, deps: [{ token: SELECTION_CONFIG, optional: true }, { token: KlesForm }, { token: SelectionLoaderService }, { token: ScrollbarService }, { token: LoadingService }, { token: DATASOURCE_SERVICE }, { token: LINES_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SelectionService, deps: [{ token: SELECTION_CONFIG, optional: true }, { token: KlesForm }, { token: SelectionLoaderService }, { token: ScrollbarService }, { token: LoadingService }, { token: DATASOURCE_SERVICE }, { token: LINES_SERVICE }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SelectionService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SelectionService, decorators: [{
@@ -3110,11 +3933,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LINES_SERVICE]
-                }] }] });
+                }] }, { type: EventsService }] });
 class SelectionLazyService extends AbstractSelectionService {
-    constructor(selectionConfig, fm, selectionLoaderService, scrollbarService, loadingService, datasourceService, linesService, filterStore) {
-        super(selectionConfig);
-        this.fm = fm;
+    constructor(selectionConfig, fm, selectionLoaderService, scrollbarService, loadingService, datasourceService, linesService, filterStore, eventsService) {
+        super(selectionConfig, fm, eventsService);
         this.selectionLoaderService = selectionLoaderService;
         this.scrollbarService = scrollbarService;
         this.loadingService = loadingService;
@@ -3123,8 +3945,10 @@ class SelectionLazyService extends AbstractSelectionService {
         this.filterStore = filterStore;
         this.destroyRef = inject(DestroyRef);
         this._count = signal(0, ...(ngDevMode ? [{ debugName: "_count" }] : /* istanbul ignore next */ []));
+        this.selectionModel = new KlesSelectionModel(selectionConfig?.selectionMode);
     }
     register() {
+        this.listenSelection();
         this.setSelection();
         this.listenHeaderSelection();
         this.listenRowSelection();
@@ -3133,37 +3957,56 @@ class SelectionLazyService extends AbstractSelectionService {
         return this._count.asReadonly();
     }
     disable() {
-        this.fm.getHeader().controls[this.key].disable({ emitEvent: false });
+        this.selectionModel.disable();
     }
     enable() {
-        this.fm.getHeader().controls[this.key].enable({ emitEvent: false });
+        this.selectionModel.enable();
+    }
+    linesTotal() {
+        return this.linesService.total();
     }
     listenHeaderSelection() {
         this.fm
             .getHeader()
             .controls[this.key]?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef), switchMap((value) => {
-            return this.selectionLoaderService.selectAll(!!value, this.fm.getHeader().getRawValue());
+            const requestedSelected = !!value;
+            const previousSelected = this._count() > 0 && this._count() === this.linesService.total();
+            return this.selectionLoaderService
+                .selectAll(requestedSelected, this.fm.getHeader().getRawValue())
+                .pipe(map((response) => ({ response, requestedSelected, previousSelected })));
         }))
-            .subscribe((response) => {
+            .subscribe(({ response, requestedSelected, previousSelected }) => {
             if (response.loading) {
                 this.scrollbarService.toTop('instant');
                 this.loadingService.start();
                 return;
             }
+            this.loadingService.stop();
+            if (!response.success || response.selected === undefined) {
+                this.updateHeader();
+                this.emitSelectionError(response.error ?? new Error('The bulk selection response is invalid.'), requestedSelected, previousSelected);
+                return;
+            }
+            this._count.set(response.count ?? 0);
+            const rows = this.fm.getRows().controls.filter((group) => group.controls[this.selectionLoaderService.key]?.enabled);
+            if (response.selected) {
+                if (this.selectionModel.isMultipleSelection()) {
+                    this.selectionModel.select(rows);
+                }
+                else {
+                    const row = rows[0];
+                    if (row) {
+                        this.selectionModel.select(row);
+                    }
+                }
+            }
             else {
-                this.loadingService.stop();
-                this._count.set(response.count ?? 0);
-                this.fm
-                    .getRows()
-                    .controls.filter((group) => group.controls[this.key]?.enabled)
-                    .forEach((group) => {
-                    group.controls[this.selectionLoaderService.key].patchValue(response.selected, { emitEvent: false });
-                });
-                this.fm.getRows().updateValueAndValidity({ emitEvent: false });
-                // if (response.footer) {
-                //     this.fm.getFooter().patchValue(response.footer, { emitEvent: false });
-                // }
+                this.selectionModel.deselect(rows);
             }
+            this.fm.getRows().updateValueAndValidity({
+                emitEvent: false,
+            });
+            this.emitBulkSelectionEvent(response.selected, this._count());
         });
     }
     listenRowSelection() {
@@ -3181,28 +4024,68 @@ class SelectionLazyService extends AbstractSelectionService {
             })
                 .filter(Boolean));
         }), withLatestFrom(this.filterStore?.filters$ ?? of({})), concatMap(([{ row, selected }, filters]) => {
+            const previousSelected = this.selectionModel.isSelected(row);
             return this.selectionLoaderService.select(row, selected, filters).pipe(map((response) => {
                 return {
                     row,
+                    selected,
+                    previousSelected,
                     response,
                 };
             }));
         }))
-            .subscribe(({ row, response }) => {
+            .subscribe(({ row, selected, previousSelected, response }) => {
             if (response.loading) {
-                //mettre la ligne avec un spinner
+                this.startRowSelection(row);
+                return;
+            }
+            if (!response.success || response.selected === undefined) {
+                this.stabilizeRowSelection(row, previousSelected);
+                this.emitSelectionError(response.error ?? new Error('The row selection response is invalid.'), selected, previousSelected, row);
+                return;
+            }
+            this._count.set(response.count ?? 0);
+            this.stabilizeRowSelection(row, response.selected);
+            if (response.selected) {
+                this.selectionModel.select(row);
             }
             else {
-                this.fm
-                    .getUiHeader()
-                    .get(this.selectionLoaderService.key)
-                    ?.patchValue({
-                    indeterminate: response.count != undefined ? response.count > 0 && this.linesService.total() > response.count : false,
+                this.selectionModel.deselect(row);
+            }
+            this.updateHeader(this._count());
+        });
+    }
+    listenSelection() {
+        this.selectionModel.changed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((changed) => {
+            changed.removed?.forEach((group) => {
+                group.controls[this.selectionLoaderService.key]?.patchValue(false, { emitEvent: false });
+            });
+            changed.added?.forEach((group) => {
+                group.controls[this.selectionLoaderService.key]?.patchValue(true, { emitEvent: false });
+            });
+            this.fm.getRows().updateValueAndValidity({
+                emitEvent: false,
+            });
+            this.emitSelectionEvents(changed, this._count());
+        });
+        this.selectionModel.stateChanged.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((state) => {
+            if (state === KlesSelectionModelState.ENABLED) {
+                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,
+                        });
+                    }
                 });
-                //         if (footer) {
-                //             this.fm.getFooter().patchValue(footer, { emitEvent: false });
-                //         }
+                return;
             }
+            this.fm.getHeader().controls[this.key]?.disable({ emitEvent: false });
+            this.fm.getRows().controls.forEach((group) => {
+                group.controls[this.key]?.disable({
+                    emitEvent: false,
+                });
+            });
         });
     }
     setSelection() {
@@ -3210,18 +4093,39 @@ class SelectionLazyService extends AbstractSelectionService {
             .loaded()
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
-            this.fm.getRows().controls.forEach((group) => {
-                if (this.selectionConfig?.isSelected != undefined && this.selectionConfig.isSelected(group)) {
-                    group.controls[this.selectionLoaderService.key]?.patchValue(true, { emitEvent: false });
+            const selectedRows = this.fm.getRows().controls.filter((group) => {
+                const selected = group.controls[this.selectionLoaderService.key]?.value === true || this.selectionConfig?.isSelected?.(group) === true;
+                if (selected) {
+                    group.controls[this.selectionLoaderService.key]?.patchValue(true, {
+                        emitEvent: false,
+                    });
                 }
-                if (this.selectionConfig?.isDisabled && this.selectionConfig.isDisabled(group)) {
-                    group.controls[this.selectionLoaderService.key]?.disable({ emitEvent: false });
+                if (this.selectionConfig?.isDisabled?.(group)) {
+                    group.controls[this.selectionLoaderService.key]?.disable({
+                        emitEvent: false,
+                    });
                 }
+                return selected;
             });
-            // this.updateHeader();
+            this.selectionModel.reset(selectedRows, {
+                emitEvent: false,
+            });
+            this.updateHeader(this._count());
+        });
+    }
+    updateHeader(count = this._count()) {
+        const total = this.linesService.total();
+        this.fm
+            .getUiHeader()
+            .get(this.selectionLoaderService.key)
+            ?.patchValue({
+            indeterminate: count > 0 && count < total,
+        });
+        this.fm.getHeader().controls[this.selectionLoaderService.key]?.patchValue(count > 0 && count === total, {
+            emitEvent: false,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SelectionLazyService, deps: [{ token: SELECTION_CONFIG, optional: true }, { token: KlesForm }, { token: SelectionLoaderService }, { token: ScrollbarService }, { token: LoadingService }, { token: DATASOURCE_SERVICE }, { token: LINES_SERVICE }, { token: FilterStore, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SelectionLazyService, deps: [{ token: SELECTION_CONFIG, optional: true }, { token: KlesForm }, { token: SelectionLoaderService }, { token: ScrollbarService }, { token: LoadingService }, { token: DATASOURCE_SERVICE }, { token: LINES_SERVICE }, { token: FilterStore, optional: true }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SelectionLazyService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SelectionLazyService, decorators: [{
@@ -3239,7 +4143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                     args: [LINES_SERVICE]
                 }] }, { type: FilterStore, decorators: [{
                     type: Optional
-                }] }] });
+                }] }, { type: EventsService }] });
 
 class LoaderService {
     constructor(loaderConfig, eventsService) {
@@ -3367,7 +4271,7 @@ class LinesService {
                     this.fm.setRows(this.rowFactory.createRows(this.columnsService
                         .columns()
                         .map((col) => ({ ...col.cell?.field, name: col.columnDef }))
-                        .concat(this.extraRowService.extraColumns().map((col) => ({ ...col, name: col.columnDef }))), response.items ?? []));
+                        .concat(this.extraRowService.extraFields()), response.items ?? []));
                     this._total = response.items?.length ?? 0;
                     this._loaded.next();
                     this.eventsService.emit('loadSuccess', {
@@ -3438,7 +4342,7 @@ class LinesLazyService {
                     this.fm.setRows(this.rowFactory.createRows(this.columnsService
                         .columns()
                         .map((col) => ({ ...col.cell?.field, name: col.columnDef }))
-                        .concat(this.extraRowService.extraColumns().map((col) => ({ ...col, name: col.columnDef }))), response.items));
+                        .concat(this.extraRowService.extraFields()), response.items));
                     this.paginatorService.setlength(response.total ?? 0);
                     this._total = response.total ?? 0;
                     this._loaded.next();
@@ -3636,7 +4540,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                     args: [LINES_SERVICE]
                 }] }, { type: ScrollbarService }] });
 
-// import { ScrollbarLazyOrchestratorService, ScrollbarOrchestratorService } from '../services/features/scrollbar/scrollbar-orchestrator.service';
 class DynamicTableLoaderDirective {
     constructor(viewContainerRef) {
         this.viewContainerRef = viewContainerRef;
@@ -3659,7 +4562,6 @@ class DynamicTableLoaderDirective {
             }
         });
     }
-    ngOnInit() { }
     ngOnDestroy() {
         this.clearComponent();
     }
@@ -3704,6 +4606,10 @@ class DynamicTableLoaderDirective {
                 provide: EXTRA_ROWS,
                 useValue: signal(this.tableConfig().extraRows ?? []),
             },
+            {
+                provide: MULTI_UNFOLD,
+                useValue: this.tableConfig().multiUnfold ?? false,
+            },
             {
                 provide: FOOTER,
                 useValue: signal(this.tableConfig().footer ?? false),
@@ -3799,7 +4705,7 @@ class DynamicTableLoaderDirective {
             ValidationService,
             SelectionLoaderService,
             PaginatorService,
-            LoaderChildrensService, //TODO
+            LoaderChildrensService,
             {
                 provide: TABLE_SERVICE,
                 useClass: TableService,
@@ -3824,7 +4730,7 @@ class DynamicTableLoaderDirective {
                     },
                     {
                         provide: ROW_DRAG_DROP,
-                        useFactory: () => new DragDropLazyService(this.tableConfig().dragDropRows),
+                        useFactory: () => new DragDropLazyService(this.tableConfig().dragDropRows, inject(EventsService), inject(KlesForm), inject(Injector), this.tableConfig().id),
                     },
                     {
                         provide: SORT_SERVICE,
@@ -3851,8 +4757,7 @@ class DynamicTableLoaderDirective {
                     FilterService,
                     {
                         provide: ROW_DRAG_DROP,
-                        useFactory: (paginatorstore) => new DragDropService(this.tableConfig().dragDropRows, paginatorstore),
-                        deps: [...(this.tableConfig().paginator ? [PaginatorStore] : [])],
+                        useFactory: () => new DragDropService(this.tableConfig().dragDropRows, inject(EventsService), inject(KlesForm), inject(Injector), this.tableConfig().id),
                     },
                     {
                         provide: SORT_SERVICE,
@@ -3883,12 +4788,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { tableConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableConfig", required: true }] }] } });
 
 class KlesTableComponent {
-    // @Output() selectionChange = new EventEmitter<KlesTableSelectionChangePayload<TValue>>();
-    // @Output() pageChange = new EventEmitter<KlesTablePageChangePayload>();
-    // @Output() sortChange = new EventEmitter<KlesTableSortPayload>();
-    // @Output() filterChange = new EventEmitter<KlesTableFilterChangePayload>();
-    // @Output() lazyQueryChange = new EventEmitter<KlesTableLazyQueryChangePayload>();
-    // @Output() loadError = new EventEmitter<KlesTableLoadErrorPayload>();
     constructor(connectorService) {
         this.connectorService = connectorService;
         this.tableConfig = input.required(...(ngDevMode ? [{ debugName: "tableConfig" }] : /* istanbul ignore next */ []));
@@ -3897,8 +4796,25 @@ class KlesTableComponent {
         this.rowClick = new EventEmitter();
         this.rowDoubleClick = new EventEmitter();
         this.rowContextMenu = new EventEmitter();
+        this.rowMouseEnter = new EventEmitter();
+        this.rowMouseLeave = new EventEmitter();
+        this.rowDrop = new EventEmitter();
+        this.rowDropSuccess = new EventEmitter();
+        this.rowDropError = new EventEmitter();
         this.cellClick = new EventEmitter();
+        this.cellDoubleClick = new EventEmitter();
+        this.cellContextMenu = new EventEmitter();
         this.cellValueChange = new EventEmitter();
+        this.selectionChange = new EventEmitter();
+        this.selectionError = new EventEmitter();
+        this.pageChange = new EventEmitter();
+        this.sortChange = new EventEmitter();
+        this.filterChange = new EventEmitter();
+        this.loadError = new EventEmitter();
+        this.nodeExpand = new EventEmitter();
+        this.nodeCollapse = new EventEmitter();
+        this.nodeLoadChildren = new EventEmitter();
+        this.nodeChildrenLoaded = new EventEmitter();
         this.elevationShadow = computed(() => {
             const level = this.tableConfig().elevation ?? 2;
             return level === 0 ? 'none' : `var(--mat-sys-level${level})`;
@@ -3906,9 +4822,9 @@ class KlesTableComponent {
     }
     ngOnInit() {
         this.connectorService.connected$
-            .pipe(takeUntilDestroyed(this.destroyRef), filter((connected) => connected), switchMap(() => {
-            return this.connectorService.events.listen();
-        }))
+            .pipe(filter((connected) => connected), switchMap(() => {
+            return this.events.listen();
+        }), takeUntilDestroyed(this.destroyRef))
             .subscribe((event) => {
             this.dispatchEvent(event);
         });
@@ -3943,6 +4859,18 @@ class KlesTableComponent {
     get footer() {
         return this.connectorService.footer;
     }
+    get emptyState() {
+        return this.connectorService.emptyState;
+    }
+    get render() {
+        return this.connectorService.render;
+    }
+    get events() {
+        return this.connectorService.events;
+    }
+    get tree() {
+        return this.connectorService.tree;
+    }
     get ui() {
         return this.connectorService.ui;
     }
@@ -3958,34 +4886,67 @@ class KlesTableComponent {
             case 'rowContextMenu':
                 this.rowContextMenu.emit(event.payload);
                 break;
+            case 'rowMouseEnter':
+                this.rowMouseEnter.emit(event.payload);
+                break;
+            case 'rowMouseLeave':
+                this.rowMouseLeave.emit(event.payload);
+                break;
+            case 'rowDrop':
+                this.rowDrop.emit(event.payload);
+                break;
+            case 'rowDropSuccess':
+                this.rowDropSuccess.emit(event.payload);
+                break;
+            case 'rowDropError':
+                this.rowDropError.emit(event.payload);
+                break;
             case 'cellClick':
                 this.cellClick.emit(event.payload);
                 break;
+            case 'cellDoubleClick':
+                this.cellDoubleClick.emit(event.payload);
+                break;
+            case 'cellContextMenu':
+                this.cellContextMenu.emit(event.payload);
+                break;
             case 'cellValueChange':
                 this.cellValueChange.emit(event.payload);
                 break;
-            // case 'selectionChange':
-            //     this.selectionChange.emit(event.payload);
-            //     break;
-            // case 'pageChange':
-            //     this.pageChange.emit(event.payload);
-            //     break;
-            // case 'sortChange':
-            //     this.sortChange.emit(event.payload);
-            //     break;
-            // case 'filterChange':
-            //     this.filterChange.emit(event.payload);
-            //     break;
-            // case 'lazyQueryChange':
-            //     this.lazyQueryChange.emit(event.payload);
-            //     break;
-            // case 'loadError':
-            //     this.loadError.emit(event.payload);
-            //     break;
+            case 'selectionChange':
+                this.selectionChange.emit(event.payload);
+                break;
+            case 'selectionError':
+                this.selectionError.emit(event.payload);
+                break;
+            case 'pageChange':
+                this.pageChange.emit(event.payload);
+                break;
+            case 'sortChange':
+                this.sortChange.emit(event.payload);
+                break;
+            case 'filterChange':
+                this.filterChange.emit(event.payload);
+                break;
+            case 'loadError':
+                this.loadError.emit(event.payload);
+                break;
+            case 'nodeExpand':
+                this.nodeExpand.emit(event.payload);
+                break;
+            case 'nodeCollapse':
+                this.nodeCollapse.emit(event.payload);
+                break;
+            case 'nodeLoadChildren':
+                this.nodeLoadChildren.emit(event.payload);
+                break;
+            case 'nodeChildrenLoaded':
+                this.nodeChildrenLoaded.emit(event.payload);
+                break;
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesTableComponent, deps: [{ token: KlesTableConnectorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.19", type: KlesTableComponent, isStandalone: true, selector: "kles-dynamic-table", inputs: { tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { tableEvent: "tableEvent", rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", rowContextMenu: "rowContextMenu", cellClick: "cellClick", cellValueChange: "cellValueChange" }, 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.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesTableComponent, decorators: [{
             type: Component,
@@ -3998,10 +4959,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Output
             }], rowContextMenu: [{
                 type: Output
+            }], rowMouseEnter: [{
+                type: Output
+            }], rowMouseLeave: [{
+                type: Output
+            }], rowDrop: [{
+                type: Output
+            }], rowDropSuccess: [{
+                type: Output
+            }], rowDropError: [{
+                type: Output
             }], cellClick: [{
                 type: Output
+            }], cellDoubleClick: [{
+                type: Output
+            }], cellContextMenu: [{
+                type: Output
             }], cellValueChange: [{
                 type: Output
+            }], selectionChange: [{
+                type: Output
+            }], selectionError: [{
+                type: Output
+            }], pageChange: [{
+                type: Output
+            }], sortChange: [{
+                type: Output
+            }], filterChange: [{
+                type: Output
+            }], loadError: [{
+                type: Output
+            }], nodeExpand: [{
+                type: Output
+            }], nodeCollapse: [{
+                type: Output
+            }], nodeLoadChildren: [{
+                type: Output
+            }], nodeChildrenLoaded: [{
+                type: Output
             }], hostId: [{
                 type: HostBinding,
                 args: ['attr.id']
@@ -4045,5 +5040,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, KlesMaterialTableModule, KlesTableComponent, KlesTableEmptyStateComponent, KlesTableIntl, LINES_SERVICE, LOADER_CONFIG, LOADER_SERVICE, PAGINATOR_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, DATASOURCE_SERVICE, DRAG_DROP_CONFIG, EMPTY_STATE_CONFIG, EXTRA_ROWS, FOOTER, HEADER_SERVICE, KLES_DRAG_DROP_ROW_CONTEXT, KlesMaterialTableModule, KlesTableComponent, KlesTableEmptyStateComponent, KlesTableIntl, LINES_SERVICE, LOADER_CONFIG, LOADER_SERVICE, MULTI_UNFOLD, PAGINATOR_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