@3kles/kles-material-table-v2 21.0.0

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

@@ -0,0 +1,3751 @@
+import * as i15 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, Optional, EventEmitter, ViewChild, effect, Injector, Output, NgModule } from '@angular/core';
+import * as i16 from '@angular/forms';
+import { FormControl, FormGroup, FormArray, ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+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 i18 from '@angular/material/table';
+import { MatTableDataSource, MatTableModule, MatTable } from '@angular/material/table';
+import * as i19 from '@angular/cdk/table';
+import { CdkTableModule } from '@angular/cdk/table';
+import * as i20 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 i21 from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import * as i22 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, shareReplay } from 'rxjs';
+import { toObservable, takeUntilDestroyed } 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 * 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) {
+        if (!col)
+            return null;
+        return {
+            name: col.columnDef,
+            ...col.headerCell.field,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: HeaderFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: HeaderFieldPipe, isStandalone: true, name: "headerField" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: HeaderFieldPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'headerField',
+                    standalone: true,
+                }]
+        }] });
+
+class CellFieldPipe {
+    transform(col) {
+        if (!col)
+            return null;
+        return { name: col.columnDef, canExpand: col.canExpand, ...col.cell.field };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CellFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: CellFieldPipe, isStandalone: true, name: "cellField" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CellFieldPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'cellField',
+                    standalone: true,
+                }]
+        }] });
+class ExtraCellFieldPipe {
+    transform(col) {
+        if (!col)
+            return null;
+        return { name: col.columnDef, ...col.field };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ExtraCellFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: ExtraCellFieldPipe, isStandalone: true, name: "extraCellField" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ExtraCellFieldPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'extraCellField',
+                    standalone: true,
+                }]
+        }] });
+
+const SELECTION_CONFIG = new InjectionToken('SELECTION_CONFIG');
+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 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 PAGINATOR_CONFIG = new InjectionToken('PAGINATOR_CONFIG');
+const SORT_CONFIG = new InjectionToken('SORT_CONFIG');
+const HEADER_SERVICE = new InjectionToken('HEADER_SERVICE');
+const LOADER_SERVICE = new InjectionToken('LOADER_SERVICE');
+const LINES_SERVICE = new InjectionToken('LINES_SERVICE');
+const DATASOURCE_SERVICE = new InjectionToken('DATASOURCE_SERVICE');
+const SELECTION_SERVICE = new InjectionToken('SELECTION_SERVICE');
+const SORT_SERVICE = new InjectionToken('SORT_SERVICE');
+const SCROLLBAR_ORCHESTRATOR_SERVICE = new InjectionToken('SCROLLBAR_ORCHESTRATOR_SERVICE');
+const TABLE_SERVICE = new InjectionToken('TABLE_SERVICE');
+
+class ResolveNgStylePipe {
+    transform(style, value, status, row, rowStatus) {
+        if (!style)
+            return {};
+        return typeof style === 'function' ? style(value, status, row, rowStatus) : style;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ResolveNgStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: ResolveNgStylePipe, isStandalone: true, name: "resolveNgStyle" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ResolveNgStylePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'resolveNgStyle',
+                    standalone: true,
+                }]
+        }] });
+
+class EventsService {
+    constructor() {
+        this.eventsSubject = new Subject();
+        this.events$ = this.eventsSubject.asObservable();
+    }
+    /**
+     * Émet un event typé.
+     *
+     * Si l'event a un payload, TypeScript t'oblige à le fournir.
+     * Si l'event est void, TypeScript t'empêche de fournir un payload.
+     */
+    emit(type, ...args) {
+        const payload = args[0];
+        const event = payload === undefined ? { type } : { type, payload };
+        this.eventsSubject.next(event);
+    }
+    /**
+     * Émet directement un event complet.
+     * Pratique si tu construis déjà l'objet ailleurs.
+     */
+    emitEvent(event) {
+        this.eventsSubject.next(event);
+    }
+    complete() {
+        this.eventsSubject.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EventsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EventsService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EventsService, decorators: [{
+            type: Injectable
+        }] });
+
+class ResizableColumnDirective {
+    get appResizableColumnAttr() {
+        return this.column().columnDef;
+    }
+    constructor(el, renderer, zone, eventsService) {
+        this.el = el;
+        this.renderer = renderer;
+        this.zone = zone;
+        this.eventsService = eventsService;
+        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.startX = 0;
+        this.startWidth = 0;
+        this.currentWidth = 0;
+    }
+    ngOnInit() {
+        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();
+                }
+            }
+        }
+    }
+    onDown(e) {
+        e.preventDefault();
+        this.startResize(e.clientX);
+    }
+    onTouchDown(e) {
+        if (!e.touches?.length)
+            return;
+        e.preventDefault();
+        this.startResize(e.touches[0].clientX);
+    }
+    startResize(clientX) {
+        const th = this.el.nativeElement;
+        this.startX = 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.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,
+                });
+            });
+        }
+    }
+    applyWidth(px) {
+        const root = this.el.nativeElement.closest('table, mat-table, cdk-table');
+        if (!root)
+            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
+            cell.style.width = `${px}px`;
+            cell.style.minWidth = `${px}px`;
+            cell.style.maxWidth = `${px}px`;
+            // mode flex
+            cell.style.flex = `0 0 ${px}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));
+    }
+    remove() {
+        if (this.child) {
+            this.renderer.removeChild(this.el.nativeElement, this.child);
+            this.child = undefined;
+        }
+    }
+    ngOnDestroy() {
+        this.stopResize();
+    }
+    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 }); }
+    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: [{
+                type: HostBinding,
+                args: ['attr.appResizableColumn']
+            }] } });
+
+class FooterFieldPipe {
+    transform(col) {
+        if (!col)
+            return null;
+        return { name: col.columnDef, ...col.footerCell.field };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FooterFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: FooterFieldPipe, isStandalone: true, name: "footerField" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FooterFieldPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'footerField',
+                    standalone: true,
+                }]
+        }] });
+
+class UiFieldPipe {
+    constructor() {
+        this.tableService = inject(TABLE_SERVICE);
+    }
+    transform(control) {
+        if (!control)
+            return undefined;
+        return this.tableService?.klesForm.uiStore.get(control);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: UiFieldPipe, isStandalone: true, name: "uiField" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiFieldPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'uiField',
+                    standalone: true,
+                }]
+        }] });
+
+var Span;
+(function (Span) {
+    Span["MAX"] = "max";
+})(Span || (Span = {}));
+
+class SpanPipe {
+    transform(span, maxSize) {
+        if (span === Span.MAX) {
+            return maxSize;
+        }
+        return span;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SpanPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: SpanPipe, isStandalone: true, name: "spanPipe" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SpanPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'spanPipe',
+                    standalone: true,
+                }]
+        }] });
+
+class ExpandedRowStore {
+    constructor() {
+        this._expandedIds$ = new BehaviorSubject(new Set());
+        this.expandedIds$ = this._expandedIds$.asObservable();
+    }
+    reset() {
+        this._expandedIds$.next(new Set());
+    }
+    isExpanded(id) {
+        return this._expandedIds$.value.has(id);
+    }
+    get expandedIds() {
+        return this._expandedIds$.value;
+    }
+    expand(id) {
+        const next = new Set(this._expandedIds$.value);
+        next.add(id);
+        this._expandedIds$.next(next);
+    }
+    collapse(id) {
+        const next = new Set(this._expandedIds$.value);
+        next.delete(id);
+        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);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ExpandedRowStore, deps: [], 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
+        }] });
+
+class LoaderChildrensService {
+    constructor(loaderConfig) {
+        this.loaderConfig = loaderConfig;
+        this._refresh$ = new Subject();
+    }
+    load(parent, depth) {
+        const linesLoader = this.loaderConfig.lines;
+        return combineLatest([this._refresh$.pipe(startWith(void 0)), linesLoader.params?.() || of({})]).pipe(auditTime(0), switchMap(([_, params]) => {
+            return concat(of({ loading: true, total: 0, items: [] }), (linesLoader.childrens?.(params, parent, depth) ?? of({ items: [] })).pipe(catchError((err) => {
+                return of({ error: err, items: [] });
+            }), map((response) => {
+                return { ...response, loading: false, total: response?.items.length || 0 };
+            })));
+        }));
+    }
+    refresh() {
+        this._refresh$.next();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoaderChildrensService, deps: [{ token: LOADER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoaderChildrensService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoaderChildrensService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    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;
+    }
+    register() {
+        this.setDisplayedColumns();
+    }
+    get columns() {
+        return this._columns.asReadonly();
+    }
+    getVisible() {
+        return this.columns()
+            .filter((column) => column.visible !== false)
+            .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._columns()
+                .filter((c) => {
+                if (c.visibleWhen !== undefined) {
+                    return c.visibleWhen();
+                }
+                else if (c.visible !== undefined) {
+                    return c.visible !== false;
+                }
+                return true;
+            })
+                .map((c) => c.columnDef);
+        }, ...(ngDevMode ? [{ debugName: "displayedColumns" }] : /* istanbul ignore next */ []));
+    }
+    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;
+        let ui;
+        if (field.type) {
+            control =
+                componentMapper.find((c) => c.type === field.type)?.factory({ ...field, value }) || klesFieldControlFactory({ ...field, value });
+            ui = componentMapper.find((c) => c.type === field.type)?.ui?.({ ...field, value }) || klesFieldUiFactory({ ...field, value });
+        }
+        else {
+            control =
+                componentMapper.find((c) => c.component === field.component)?.factory({ ...field, value }) ||
+                    klesFieldControlFactory({ ...field, value });
+            ui = componentMapper.find((c) => c.component === field.component)?.ui?.({ ...field, value }) || klesFieldUiFactory({ ...field, value });
+        }
+        return { control, ui };
+    }
+    createRow(fields, record, meta = { depth: 0, parentId: null }) {
+        const data = { _id: crypto.randomUUID(), ...record };
+        const controls = {
+            _id: new FormControl(data._id, { nonNullable: true }),
+            _depth: new FormControl(meta.depth),
+            _parentId: new FormControl(meta.parentId),
+        };
+        const uis = {};
+        for (const field of fields) {
+            const { control, ui } = this.createControl(field, data?.[field.name] ?? undefined);
+            controls[field.name] = control;
+            uis[field.name] = ui;
+        }
+        return { formGroup: new FormGroup(controls), groupUi: new GroupUiState(uis) };
+    }
+    createRows(fields, records, meta = { depth: 0, parentId: null }) {
+        return records.map((r) => this.createRow(fields, r, meta));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RowFormFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RowFormFactory, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RowFormFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class KlesForm {
+    constructor(columnsService, rowFactory) {
+        this.columnsService = columnsService;
+        this.rowFactory = rowFactory;
+        this.form = new FormGroup({
+            header: new FormGroup({}),
+            rows: new FormArray([]),
+            footer: new FormGroup({}),
+        });
+        this.ui = new GroupUiState({
+            header: new GroupUiState({}),
+            rows: new ArrayUiState([]),
+            footer: new GroupUiState({}),
+        });
+        this.uiStore = new WeakMap();
+        this.rowsStructureChangedSubject = new Subject();
+        this.rowsStructureChanged$ = this.rowsStructureChangedSubject.asObservable();
+    }
+    getRows() {
+        return this.form.get('rows');
+    }
+    getUiRows() {
+        return this.ui.get('rows');
+    }
+    getUiHeader() {
+        return this.ui.get('header');
+    }
+    getUiFooter() {
+        return this.ui.get('footer');
+    }
+    getHeader() {
+        return this.form.get('header');
+    }
+    getFooter() {
+        return this.form.get('footer');
+    }
+    setRows(rows) {
+        this.getRows().clear({ emitEvent: false });
+        rows.forEach((r) => {
+            this.uiStore.set(r.formGroup, r.groupUi);
+            this.getRows().push(r.formGroup, { emitEvent: false });
+            this.getUiRows().push(r.groupUi);
+        });
+        this.notifyRowsStructureChanged();
+    }
+    insertRowAndNotify(row, index, options, notify) {
+        this.uiStore.set(row.formGroup, row.groupUi);
+        if (index !== undefined) {
+            this.getRows().insert(index, row.formGroup, options);
+            this.getUiRows().insert(index, row.groupUi);
+        }
+        else {
+            this.getRows().push(row.formGroup, options);
+            this.getUiRows().push(row.groupUi);
+        }
+        if (notify) {
+            this.notifyRowsStructureChanged();
+        }
+        return row;
+    }
+    insertRow(row, index, options) {
+        return this.insertRowAndNotify(row, index, options, true);
+    }
+    insertRows(rows, index) {
+        rows.forEach((r) => {
+            this.insertRowAndNotify(r, index);
+        });
+        this.notifyRowsStructureChanged();
+    }
+    updateRow(_id, value, options) {
+        const row = this.getRows().controls.find((c) => c.getRawValue()._id === _id);
+        if (row) {
+            const oldValue = row.getRawValue();
+            row.patchValue({ ...(value ?? {}), _id: oldValue._id }, options);
+            return row;
+        }
+        return undefined;
+    }
+    resetRow(_id, value, options) {
+        const row = this.getRows().controls.find((c) => c.getRawValue()._id === _id);
+        if (row) {
+            const oldValue = row.getRawValue();
+            row.reset({ ...(value ?? {}), _id: oldValue._id }, options);
+        }
+    }
+    deleteRowById(id, option) {
+        const index = this.getRows().controls.findIndex((c) => c.getRawValue()._id === id);
+        if (index !== -1) {
+            this.getRows().removeAt(index, option);
+            this.getUiRows().removeAt(index);
+            this.notifyRowsStructureChanged();
+        }
+    }
+    setHeaderControl(name, header, options) {
+        this.getHeader().setControl(name, header, options);
+    }
+    setFooterControl(name, footer, options) {
+        this.getFooter().setControl(name, footer, options);
+    }
+    setHeaderUi(name, header) {
+        this.getUiHeader().addUiState(name, header);
+    }
+    setFooterUi(name, footer) {
+        this.getUiFooter().addUiState(name, footer);
+    }
+    get rows() {
+        return this.getRows().controls;
+    }
+    init() {
+        this.columnsService.columns().forEach((column) => {
+            let colCellHeader = {};
+            if (column.headerCell.field) {
+                const { pipeTransform, ...tmpCell } = column.headerCell.field;
+                colCellHeader = _.cloneDeep(tmpCell);
+                colCellHeader = { pipeTransform, ...colCellHeader };
+            }
+            colCellHeader.name = column.columnDef;
+            const { control, ui } = this.rowFactory.createControl(colCellHeader, colCellHeader.value);
+            this.setHeaderControl(colCellHeader.name, control, { emitEvent: false });
+            this.setHeaderUi(colCellHeader.name, ui);
+            this.uiStore.set(control, ui);
+        });
+        this.columnsService
+            .columns()
+            .filter((column) => column.footerCell)
+            .forEach((column) => {
+            let colCellFooter = {};
+            if (column.footerCell?.field) {
+                const { pipeTransform, ...tmpCell } = column.footerCell.field;
+                colCellFooter = _.cloneDeep(tmpCell);
+            }
+            colCellFooter.name = column.columnDef;
+            const { control, ui } = this.rowFactory.createControl(colCellFooter, colCellFooter.value);
+            this.setFooterControl(colCellFooter.name, control, { emitEvent: false });
+            this.setFooterUi(colCellFooter.name, ui);
+            this.uiStore.set(control, ui);
+        });
+    }
+    notifyRowsStructureChanged() {
+        this.rowsStructureChangedSubject.next();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesForm, deps: [{ token: ColumnsService }, { token: RowFormFactory }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesForm }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesForm, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: ColumnsService }, { type: RowFormFactory }] });
+
+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);
+    }
+    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);
+                }
+            });
+        }
+    }
+    hasChildren(group, depth) {
+        return this.loaderConfig.lines.hasChildren?.(group, depth) ?? true;
+    }
+    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
+        }] });
+
+class KlesCellComponent {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.expandedRowStore = inject(ExpandedRowStore);
+        this.treeService = inject(TreeService);
+        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.expandedRow = computed(() => {
+            return (this.column().canExpand ?? false) && (this.ui().get(this.column().columnDef).value().expandedRow ?? false);
+        }, ...(ngDevMode ? [{ debugName: "expandedRow" }] : /* istanbul ignore next */ []));
+        this.expandedNode = computed(() => {
+            return (this.column().canExpandNode ?? false) && (this.ui().get(this.column().columnDef).value().expandedNode ?? false);
+        }, ...(ngDevMode ? [{ debugName: "expandedNode" }] : /* istanbul ignore next */ []));
+        this.hasChildren = computed(() => {
+            return this.treeService.hasChildren(this.group(), this.group().getRawValue()._depth);
+        }, ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
+        this.column$ = toObservable(this.column);
+    }
+    ngOnInit() {
+        this.listen();
+    }
+    stopPropagation(event) {
+        event.stopPropagation();
+    }
+    expandRow() {
+        this.expandedRowStore.toggle(this.group().getRawValue()._id);
+    }
+    expandNode() {
+        this.treeService.toggle(this.group().getRawValue()._id, this.group(), 0); //TODO depth
+    }
+    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);
+            }));
+        }))
+            .subscribe((expandedRow) => {
+            this.ui().get(this.column().columnDef)?.patchValue({ expandedRow });
+        });
+        this.column$
+            .pipe(filter((column) => column.canExpandNode ?? false), switchMap(() => {
+            return this.treeService.expandedIds$.pipe(takeUntilDestroyed(this.destroyRef), map((ids) => {
+                return ids.has(this.group().getRawValue()._id);
+            }));
+        }))
+            .subscribe((expandedNode) => {
+            this.ui().get(this.column().columnDef)?.patchValue({ expandedNode });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesCellComponent, isStandalone: true, selector: "kles-cell", inputs: { ui: { classPropertyName: "ui", publicName: "ui", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, 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"] }] }); }
+}
+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 }] }] } });
+
+class KlesHeaderComponent {
+    constructor() {
+        this.header = input.required(...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+        this.group = input.required(...(ngDevMode ? [{ debugName: "group" }] : /* 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: `
+        <div
+            class="header"
+            mat-sort-header
+            [disabled]="!header().sortable"
+            [arrowPosition]="header().sortArrowPosition"
+            [matTooltip]="header().tooltip"
+            matTooltipPosition="above"
+        >
+            {{ header().label }}
+        </div>
+
+        <div class="filterHeader">
+            <div class="field">
+                <ng-content></ng-content>
+            </div>
+
+            @if (header().filterClearable && group().get(header().columnDef).value) {
+                <div class="icon-button">
+                    <button
+                        mat-icon-button
+                        aria-label="Clear"
+                        type="button"
+                        class="icon-button-small"
+                        (click)="group().controls[header().columnDef].reset()"
+                    >
+                        <mat-icon>close</mat-icon>
+                    </button>
+                </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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-header', template: `
+        <div
+            class="header"
+            mat-sort-header
+            [disabled]="!header().sortable"
+            [arrowPosition]="header().sortArrowPosition"
+            [matTooltip]="header().tooltip"
+            matTooltipPosition="above"
+        >
+            {{ header().label }}
+        </div>
+
+        <div class="filterHeader">
+            <div class="field">
+                <ng-content></ng-content>
+            </div>
+
+            @if (header().filterClearable && group().get(header().columnDef).value) {
+                <div class="icon-button">
+                    <button
+                        mat-icon-button
+                        aria-label="Clear"
+                        type="button"
+                        class="icon-button-small"
+                        (click)="group().controls[header().columnDef].reset()"
+                    >
+                        <mat-icon>close</mat-icon>
+                    </button>
+                </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 }] }] } });
+
+class HeaderPipe {
+    transform(col) {
+        if (!col)
+            return null;
+        return {
+            columnDef: col.columnDef,
+            filterable: col.filterable,
+            sortable: col.sortable,
+            sortArrowPosition: col.sortArrowPosition,
+            ...col.headerCell,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: HeaderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: HeaderPipe, isStandalone: true, name: "header" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: HeaderPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'header',
+                    standalone: true,
+                }]
+        }] });
+
+class KlesTableConnectorService {
+    constructor() {
+        this._connected$ = new BehaviorSubject(false);
+        this.connected$ = this._connected$.asObservable();
+    }
+    connect(table) {
+        this._table = table;
+        this._connected$.next(true);
+        return () => {
+            if (this._table === table) {
+                this._table = undefined;
+                this._connected$.next(false);
+            }
+        };
+    }
+    get table() {
+        if (!this._table) {
+            throw new Error('KlesTableConnectorService: table is not connected');
+        }
+        return this._table;
+    }
+    get scrollbar() {
+        return this.table.scrollbar;
+    }
+    get column() {
+        return this.table?.column;
+    }
+    get pagination() {
+        return this.table.pagination;
+    }
+    get sort() {
+        return this.table.sort;
+    }
+    get loading() {
+        return this.table.loading;
+    }
+    get selection() {
+        return this.table.selection;
+    }
+    get footer() {
+        return this.table.footer;
+    }
+    get form() {
+        return this.table.form;
+    }
+    get ui() {
+        return this.table.ui;
+    }
+    get events() {
+        return this.table.events;
+    }
+    refresh() {
+        this.table?.refresh();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesTableConnectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesTableConnectorService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesTableConnectorService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class PaginatorStore {
+    constructor(config) {
+        this.config = config;
+        this.s = new BehaviorSubject({ page: 0, perPage: config?.pageSize ?? 10 });
+        this.page$ = this.s.asObservable();
+    }
+    setPage(v) {
+        this.s.next(v);
+    }
+    snapshot() {
+        return this.s.value;
+    }
+    reset() {
+        this.s.next({ page: 0, perPage: this.config?.pageSize ?? 10 });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PaginatorStore, deps: [{ token: PAGINATOR_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PaginatorStore }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PaginatorStore, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [PAGINATOR_CONFIG]
+                }] }] });
+
+class PaginatorService {
+    constructor(config, paginatorStore, datasourceService, eventsService) {
+        this.config = config;
+        this.paginatorStore = paginatorStore;
+        this.datasourceService = datasourceService;
+        this.eventsService = eventsService;
+        this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+        this._pageChanged = new EventEmitter();
+        this.destroyRef = inject(DestroyRef);
+    }
+    register(paginator) {
+        this._paginator = paginator;
+        this.datasourceService.datasource.paginator = this._paginator;
+        if (this._paginator) {
+            this._paginator.pageIndex = this.paginatorStore?.snapshot().page ?? this._paginator.pageIndex;
+            this._paginator.pageSize = this.paginatorStore?.snapshot().perPage ?? this._paginator.pageSize;
+            this._paginator.pageSizeOptions = this.config?.pageSizeOptions ?? [5, 10, 20, 25, 50];
+            this._paginator.selectConfig = this.config?.selectConfig ?? {};
+            this._paginator.showFirstLastButtons = this.config?.showFirstLastButtons ?? true;
+            this._paginator.page.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+                this.paginatorStore?.setPage({ page: event.pageIndex, perPage: event.pageSize });
+                this._pageChanged.next(event);
+                this.eventsService.emit('pageChange', {
+                    pageIndex: event.pageIndex,
+                    previousPageIndex: event.previousPageIndex,
+                    pageSize: event.pageSize,
+                    totalItems: event.length,
+                    sourceEvent: event,
+                });
+            });
+        }
+    }
+    get paginator() {
+        return this._paginator;
+    }
+    pageChanged() {
+        return this._pageChanged;
+    }
+    setPageIndex(index) {
+        if (!this._paginator) {
+            return;
+        }
+        this.setSizeIndex(this._paginator.pageSize, index);
+    }
+    setPageSize(size) {
+        if (!this._paginator) {
+            return;
+        }
+        this.setSizeIndex(size, 0);
+    }
+    setPageSizeOptions(option) {
+        if (this._paginator) {
+            this._paginator.pageSizeOptions = option;
+        }
+    }
+    setlength(length) {
+        if (this._paginator) {
+            this._paginator.length = length;
+        }
+    }
+    firstPage() {
+        this._paginator?.firstPage();
+    }
+    lastPage() {
+        this._paginator?.lastPage();
+    }
+    disabled() {
+        return this._disabled.asReadonly();
+    }
+    disable() {
+        this._disabled.set(true);
+    }
+    enable() {
+        this._disabled.set(false);
+    }
+    setSizeIndex(size, index) {
+        if (this._paginator) {
+            const prev = this._paginator.pageIndex;
+            this._paginator.pageSize = size;
+            this._paginator.pageIndex = index;
+            this._paginator.page.emit({
+                pageIndex: this._paginator.pageIndex,
+                pageSize: this._paginator.pageSize,
+                length: this._paginator.length,
+                previousPageIndex: prev,
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PaginatorService, deps: [{ token: PAGINATOR_CONFIG, optional: true }, { token: PaginatorStore, optional: true }, { token: DATASOURCE_SERVICE }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PaginatorService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PaginatorService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [PAGINATOR_CONFIG]
+                }] }, { type: PaginatorStore, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DATASOURCE_SERVICE]
+                }] }, { type: EventsService }] });
+
+class ScrollbarService {
+    constructor() {
+        this.default = 'smooth';
+    }
+    register(el) {
+        this.element = el;
+    }
+    unregister() {
+        this.element = undefined;
+    }
+    toTop(sb) {
+        this.element?.scrollTo({ top: 0, behavior: sb ?? this.default });
+    }
+    toBottom(sb) {
+        const top = this.element.scrollHeight;
+        this.element?.scrollTo({ top, behavior: sb ?? this.default });
+    }
+    toLeft(sb) {
+        this.element?.scrollTo({ left: 0, behavior: sb ?? this.default });
+    }
+    toRight(sb) {
+        const left = this.element.scrollWidth;
+        this.element?.scrollTo({ left, behavior: sb ?? this.default });
+    }
+    to(top, left, sb) {
+        this.element?.scrollTo({ top, left, behavior: sb ?? this.default });
+    }
+    getTop() {
+        return this.element?.scrollTop;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScrollbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScrollbarService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScrollbarService, decorators: [{
+            type: Injectable
+        }] });
+
+class FooterService {
+    constructor(_footer) {
+        this._footer = _footer;
+    }
+    get footer() {
+        return this._footer.asReadonly();
+    }
+    show() {
+        this._footer.set(true);
+    }
+    hide() {
+        this._footer.set(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.ɵ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: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FOOTER]
+                }] }] });
+
+class ExtraRowService {
+    constructor(_extraRowsConfig, expandedRowStore) {
+        this._extraRowsConfig = _extraRowsConfig;
+        this.expandedRowStore = expandedRowStore;
+        this.multiTemplateDataRows = computed(() => this._extraRowsConfig().length > 0, ...(ngDevMode ? [{ debugName: "multiTemplateDataRows" }] : /* istanbul ignore next */ []));
+        this.rows = computed(() => this._extraRowsConfig().map((config) => ({
+            ...config,
+            when: this.createWhen(config),
+            displayedColumns: config.cells.map((cel) => cel.columnDef),
+        })), ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    }
+    extraColumns() {
+        return this._extraRowsConfig()
+            .flatMap((config) => config.cells)
+            .filter(Boolean);
+    }
+    createWhen(config) {
+        if (config.mode === 'expand') {
+            return (_, row) => {
+                return this.expandedRowStore.isExpanded(row.value._id);
+            };
+        }
+        else {
+            return config?.when;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ExtraRowService, deps: [{ token: EXTRA_ROWS }, { token: ExpandedRowStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ExtraRowService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ExtraRowService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [EXTRA_ROWS]
+                }] }, { type: ExpandedRowStore }] });
+
+class RenderService {
+    constructor() {
+        this._render = new EventEmitter();
+    }
+    render() {
+        return this._render;
+    }
+    forceRenderRows() {
+        this._render.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RenderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RenderService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RenderService, decorators: [{
+            type: Injectable
+        }] });
+
+class KlesDataSource extends MatTableDataSource {
+    constructor() {
+        super([]);
+    }
+}
+class KlesLazyDataSource {
+    constructor() {
+        this._rows$ = new BehaviorSubject([]);
+        this._filter = undefined;
+    }
+    get sort() {
+        return this._sort;
+    }
+    set sort(sort) {
+        this._sort = sort;
+    }
+    get paginator() {
+        return this._paginator;
+    }
+    set paginator(paginator) {
+        this._paginator = paginator;
+    }
+    set data(data) {
+        this._rows$.next(data);
+    }
+    get filter() {
+        return this._filter;
+    }
+    set filter(f) {
+        this._filter = f;
+    }
+    connect() {
+        return this._rows$;
+    }
+    disconnect() {
+        this._rows$.complete();
+    }
+}
+
+class CellValueChangeService {
+    constructor(eventsService) {
+        this.eventsService = eventsService;
+        this.destroyRef = inject(DestroyRef);
+        this.subscriptions = new Map();
+    }
+    listen(visibleRows, visibleColumns) {
+        const expectedKeys = new Set();
+        visibleRows.forEach((row, rowIndex) => {
+            visibleColumns.forEach((column) => {
+                const columnKey = column;
+                const control = row.get(columnKey);
+                if (!control) {
+                    return;
+                }
+                const key = this.getCellKey(row, columnKey);
+                expectedKeys.add(key);
+                if (this.subscriptions.has(key)) {
+                    return;
+                }
+                const subscription = this.subscribeToCell(row, rowIndex, columnKey, control);
+                this.subscriptions.set(key, subscription);
+            });
+        });
+        this.unsubscribeInvisibleCells(expectedKeys);
+    }
+    getCellKey(row, columnDef) {
+        return `${row.get('_id')?.value}:${columnDef}`;
+    }
+    subscribeToCell(row, rowIndex, columnDef, control) {
+        let previousValue = control.value;
+        return control.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((currentValue) => {
+            this.eventsService.emit('cellValueChange', {
+                row,
+                rowIndex,
+                columnDef,
+                control,
+                previousValue,
+                currentValue,
+                value: row.value,
+                rawValue: row.getRawValue(),
+            });
+            previousValue = currentValue;
+        });
+    }
+    unsubscribeInvisibleCells(expectedKeys) {
+        for (const [key, subscription] of this.subscriptions.entries()) {
+            if (!expectedKeys.has(key)) {
+                subscription.unsubscribe();
+                this.subscriptions.delete(key);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CellValueChangeService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CellValueChangeService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CellValueChangeService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: EventsService }] });
+
+class ValidationService {
+    constructor(eventsService) {
+        this.eventsService = eventsService;
+        this.destroyRef = inject(DestroyRef);
+        this.columnSubscriptions = new Map();
+        this.rowSubscriptions = new Map();
+    }
+    listen(visibleRows, visibleColumns) {
+        const expectedColumnKeys = new Set();
+        const expectedRowKeys = new Set();
+        visibleRows.forEach((row, rowIndex) => {
+            const rowSubscription = this.subscribeToRow(row, rowIndex);
+            const key = this.getRowKey(row);
+            expectedRowKeys.add(key);
+            this.rowSubscriptions.set(key, rowSubscription);
+            visibleColumns.forEach((column) => {
+                const columnKey = column;
+                const control = row.get(columnKey);
+                if (!control) {
+                    return;
+                }
+                const key = this.getCellKey(row, columnKey);
+                expectedColumnKeys.add(key);
+                if (this.columnSubscriptions.has(key)) {
+                    return;
+                }
+                const subscription = this.subscribeToCell(row, rowIndex, columnKey, control);
+                this.columnSubscriptions.set(key, subscription);
+            });
+        });
+        this.unsubscribe(expectedRowKeys, expectedColumnKeys);
+    }
+    getCellKey(row, columnDef) {
+        return `${this.getRowKey(row)}:${columnDef}`;
+    }
+    getRowKey(row) {
+        return `${row.get('_id')?.value}`;
+    }
+    subscribeToCell(row, rowIndex, columnDef, control) {
+        return control.statusChanges
+            .pipe(takeUntilDestroyed(this.destroyRef), filter((status) => status === 'INVALID'))
+            .subscribe(() => {
+            this.eventsService.emit('cellValidationError', {
+                row,
+                rowIndex,
+                rawValue: row.getRawValue(),
+                value: row.value,
+                errors: control.errors,
+                controlsErrors: { columnDef: control.errors },
+            });
+        });
+    }
+    subscribeToRow(row, rowIndex) {
+        return row.statusChanges
+            .pipe(takeUntilDestroyed(this.destroyRef), filter((status) => status === 'INVALID'))
+            .subscribe(() => {
+            this.eventsService.emit('rowValidationError', {
+                row,
+                rowIndex,
+                rawValue: row.getRawValue(),
+                value: row.value,
+                errors: row.errors,
+                controlsErrors: Object.keys(row.controls)
+                    .filter((key) => row.get(key)?.errors)
+                    .map((key) => ({ [key]: row.get(key)?.errors }))
+                    .reduce((a, b) => ({ ...a, ...b })),
+            });
+        });
+    }
+    unsubscribe(expectedRowKeys, expectedColumnKeys) {
+        for (const [key, subscription] of this.columnSubscriptions.entries()) {
+            if (!expectedColumnKeys.has(key)) {
+                subscription.unsubscribe();
+                this.columnSubscriptions.delete(key);
+            }
+        }
+        for (const [key, subscription] of this.rowSubscriptions.entries()) {
+            if (!expectedRowKeys.has(key)) {
+                subscription.unsubscribe();
+                this.rowSubscriptions.delete(key);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ValidationService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ValidationService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ValidationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: EventsService }] });
+
+//TODO Abstract Datasource service
+class DatasourceService {
+    constructor(fm, columnsService, cellValueChangeService, validationService) {
+        this.fm = fm;
+        this.columnsService = columnsService;
+        this.cellValueChangeService = cellValueChangeService;
+        this.validationService = validationService;
+        this.destroyRef = inject(DestroyRef);
+    }
+    register() {
+        this.createDataSource();
+        this.listen();
+    }
+    get datasource() {
+        return this._datasource;
+    }
+    createDataSource() {
+        this._datasource = new KlesDataSource();
+    }
+    listen() {
+        this.fm.rowsStructureChanged$.pipe(takeUntilDestroyed(this.destroyRef), startWith(void 0)).subscribe(() => {
+            this._datasource.data = this.fm.rows;
+        });
+        this.datasource
+            .connect()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((rows) => {
+            this.cellValueChangeService.listen(rows, this.columnsService.getVisible());
+            this.validationService.listen(rows, this.columnsService.getVisible());
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DatasourceService, deps: [{ token: KlesForm }, { token: ColumnsService }, { token: CellValueChangeService }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DatasourceService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DatasourceService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: KlesForm }, { type: ColumnsService }, { type: CellValueChangeService }, { type: ValidationService }] });
+class DatasourceLazyService {
+    constructor(fm, columnsService, cellValueChangeService, validationService) {
+        this.fm = fm;
+        this.columnsService = columnsService;
+        this.cellValueChangeService = cellValueChangeService;
+        this.validationService = validationService;
+        this.destroyRef = inject(DestroyRef);
+    }
+    register() {
+        this.createDataSource();
+        this.listen();
+    }
+    get datasource() {
+        return this._datasource;
+    }
+    createDataSource() {
+        this._datasource = new KlesLazyDataSource();
+    }
+    listen() {
+        this.fm.rowsStructureChanged$.pipe(takeUntilDestroyed(this.destroyRef), startWith(void 0)).subscribe(() => {
+            this._datasource.data = this.fm.rows;
+        });
+        this.datasource
+            .connect()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((rows) => {
+            this.cellValueChangeService.listen(rows, this.columnsService.getVisible());
+            this.validationService.listen(rows, this.columnsService.getVisible());
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DatasourceLazyService, deps: [{ token: KlesForm }, { token: ColumnsService }, { token: CellValueChangeService }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DatasourceLazyService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DatasourceLazyService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: KlesForm }, { type: ColumnsService }, { type: CellValueChangeService }, { type: ValidationService }] });
+
+class FilterService {
+    constructor(columnsService, datasourceService) {
+        this.columnsService = columnsService;
+        this.datasourceService = datasourceService;
+    }
+    register() {
+        this.datasourceService.datasource.filterPredicate = this.createFilterPredicate();
+    }
+    formatData(data) {
+        return data;
+    }
+    createFilterPredicate() {
+        return (data, filter) => {
+            let searchString = JSON.parse(filter);
+            const filterableColumn = this.columnsService
+                .columns()
+                .filter((f) => f.filterable)
+                .map((m) => m.columnDef);
+            searchString = _.pick(searchString, filterableColumn);
+            return Object.keys(searchString)
+                .filter((f) => searchString[f] && filterableColumn.includes(f))
+                .every((key) => {
+                let keyValue = data?.controls[key]?.value;
+                const column = this.columnsService.columns().find((col) => col.columnDef === key);
+                if (column) {
+                    if (column.headerCell.filterPredicate) {
+                        return column.headerCell.filterPredicate(keyValue, searchString[key]) || false;
+                    }
+                    if (keyValue != null && typeof keyValue === 'object' && column.cell.field.property) {
+                        keyValue = keyValue[column.cell.field.property];
+                    }
+                    if (searchString?.[key] && typeof searchString[key] === 'object') {
+                        if (Array.isArray(searchString[key])) {
+                            if (!searchString[key].length) {
+                                return true;
+                            }
+                            const list = searchString[key]
+                                .map((m) => {
+                                const subkey = column.headerCell.field?.property ?? column.cell.field.property;
+                                if (subkey) {
+                                    return m?.[subkey] ?? m;
+                                }
+                                return m;
+                            })
+                                .map((value) => {
+                                return typeof value === 'string' ? value?.trim().toLowerCase() : value;
+                            });
+                            return keyValue != undefined && list.includes(keyValue.toString().trim().toLowerCase());
+                        }
+                        else {
+                            const subKey = column.headerCell.field?.property ?? column.cell.field.property;
+                            if (subKey) {
+                                searchString[key] = searchString[key][subKey];
+                            }
+                        }
+                    }
+                }
+                if (keyValue === null && searchString?.[key].length === 0) {
+                    return true;
+                }
+                else if (keyValue === null) {
+                    return false;
+                }
+                else if (searchString?.[key] === null) {
+                    return true;
+                }
+                return keyValue !== null && keyValue.toString().trim().toLowerCase().indexOf(searchString?.[key].toString().toLowerCase()) !== -1;
+            });
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FilterService, deps: [{ token: ColumnsService }, { token: DATASOURCE_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FilterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FilterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: ColumnsService }, { type: DatasourceService, decorators: [{
+                    type: Inject,
+                    args: [DATASOURCE_SERVICE]
+                }] }] });
+
+class RowService {
+    constructor(eventsService) {
+        this.eventsService = eventsService;
+    }
+    onClick(event, row, rowIndex) {
+        this.eventsService.emit('rowClick', {
+            row,
+            rowIndex,
+            value: row.value,
+            rawValue: row.getRawValue(),
+            event,
+        });
+    }
+    onDoubleClick(event, row, rowIndex) {
+        this.eventsService.emit('rowDoubleClick', {
+            row,
+            rowIndex,
+            value: row.value,
+            rawValue: row.getRawValue(),
+            event,
+        });
+    }
+    onContextMenu(event, row, rowIndex) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.eventsService.emit('rowContextMenu', {
+            row,
+            rowIndex,
+            value: row.value,
+            rawValue: row.getRawValue(),
+            event,
+        });
+    }
+    onMouseEnter(event, row, rowIndex) {
+        this.eventsService.emit('rowMouseEnter', {
+            row,
+            rowIndex,
+            value: row.value,
+            rawValue: row.getRawValue(),
+            event,
+        });
+    }
+    onMouseLeave(event, row, rowIndex) {
+        this.eventsService.emit('rowMouseLeave', {
+            row,
+            rowIndex,
+            value: row.value,
+            rawValue: row.getRawValue(),
+            event,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RowService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RowService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RowService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: EventsService }] });
+
+class CellService {
+    constructor(eventsService) {
+        this.eventsService = eventsService;
+    }
+    onClick(event, row, rowIndex, columnDef) {
+        const control = row.get(columnDef);
+        this.eventsService.emit('cellClick', {
+            row,
+            rowIndex,
+            value: control?.value,
+            rawValue: row.getRawValue(),
+            event,
+            columnDef,
+            control,
+        });
+    }
+    onDoubleClick(event, row, rowIndex, columnDef) {
+        const control = row.get(columnDef);
+        this.eventsService.emit('cellDoubleClick', {
+            row,
+            rowIndex,
+            value: control?.value,
+            rawValue: row.getRawValue(),
+            event,
+            columnDef,
+            control,
+        });
+    }
+    onContextMenu(event, row, rowIndex, columnDef) {
+        event.preventDefault();
+        event.stopPropagation();
+        const control = row.get(columnDef);
+        this.eventsService.emit('cellContextMenu', {
+            row,
+            rowIndex,
+            value: control?.value,
+            rawValue: row.getRawValue(),
+            event,
+            columnDef,
+            control,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CellService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CellService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CellService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: EventsService }] });
+
+class DragDropBase {
+    constructor(config) {
+        this.config = config;
+    }
+    get enable() {
+        return this.config?.enable || false;
+    }
+    get autoScrollStep() {
+        return this.config?.options?.autoScrollStep ?? true;
+    }
+    get connectedTo() {
+        return this.config?.options?.connectedTo;
+    }
+    get sortPredicate() {
+        return (index, item) => {
+            return true;
+        };
+    }
+    get previewComponent() {
+        return this.config?.options?.dragPreview?.component;
+    }
+    get previewMatchSize() {
+        return this.config?.options?.dragPreview?.matchSize || true;
+    }
+}
+class DragDropService extends DragDropBase {
+    constructor(config, paginatorStore) {
+        super(config);
+        this.config = config;
+        this.paginatorStore = paginatorStore;
+    }
+    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 });
+            }
+        }
+        else {
+            //TODO
+        }
+    }
+    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;
+    }
+    listDropped(event) {
+        console.log('lazy');
+        // TODO appeler un observable + refresh tableau
+    }
+    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]
+                }] }] });
+
+class TableComponent {
+    constructor(host, connectorService, loader, datasourceService, tableService, dragDropRowService, selectionService, columnsService, loadingService, paginatorService, scrollbarService, footerService, extraRowService, renderService, sortService, filterService, expandedRowStore, rowFactory, eventsService, rowService, cellService) {
+        this.host = host;
+        this.connectorService = connectorService;
+        this.loader = loader;
+        this.datasourceService = datasourceService;
+        this.tableService = tableService;
+        this.dragDropRowService = dragDropRowService;
+        this.selectionService = selectionService;
+        this.columnsService = columnsService;
+        this.loadingService = loadingService;
+        this.paginatorService = paginatorService;
+        this.scrollbarService = scrollbarService;
+        this.footerService = footerService;
+        this.extraRowService = extraRowService;
+        this.renderService = renderService;
+        this.sortService = sortService;
+        this.filterService = filterService;
+        this.expandedRowStore = expandedRowStore;
+        this.rowFactory = rowFactory;
+        this.eventsService = eventsService;
+        this.rowService = rowService;
+        this.cellService = cellService;
+        this.headerHeightPx = 56;
+        this.scrollHeightPx = 0;
+        this.footerHeightPx = 0;
+        this.destroyRef = inject(DestroyRef);
+        this.columns = this.columnsService.columns;
+        this.displayedColumns = this.columnsService.displayedColumns;
+        this.showFooter = this.footerService.footer;
+        this.dataSource = this.datasourceService.datasource;
+        this.multiTemplateDataRows = this.extraRowService.multiTemplateDataRows;
+        this.extraRows = this.extraRowService.rows;
+        this.connectorService.connect(this);
+        this.filterService?.register();
+    }
+    get isLoadingClass() {
+        return this.loadingService.loading();
+    }
+    get events() {
+        return {
+            listen: () => this.eventsService.events$,
+        };
+    }
+    get form() {
+        return {
+            header: {
+                clear: (value, options) => this.tableService.klesForm.getHeader().reset(value, options),
+                get: () => this.tableService.klesForm.getHeader(),
+                setValue: (value, options) => this.tableService.klesForm.getHeader().setValue(value, options),
+                patchValue: (value, options) => this.tableService.klesForm.getHeader().patchValue(value, options),
+            },
+            footer: {
+                clear: (value, options) => this.tableService.klesForm.getFooter().reset(value, options),
+                get: () => this.tableService.klesForm.getFooter(),
+                setValue: (value, options) => this.tableService.klesForm.getFooter().setValue(value, options),
+                patchValue: (value, options) => this.tableService.klesForm.getFooter().patchValue(value, options),
+            },
+            rows: {
+                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
+                        .columns()
+                        .map((col) => ({ ...col.cell.field, name: col.columnDef }))
+                        .concat(this.extraRowService.extraColumns().map((col) => ({ ...col, name: col.columnDef }))), value), index, options).formGroup;
+                },
+                patch: (_id, value, options) => {
+                    return this.tableService.klesForm.updateRow(_id, value, options);
+                },
+                remove: (_id, options) => {
+                    this.tableService.klesForm.deleteRowById(_id, options);
+                },
+                reset: (_id, value, options) => {
+                    this.tableService.klesForm.resetRow(_id, value, options);
+                },
+            },
+        };
+    }
+    get scrollbar() {
+        return {
+            getTop: () => this.scrollbarService.getTop(),
+            to: (top, left, sb) => this.scrollbarService.to(top, left, sb),
+            toTop: (sb) => this.scrollbarService.toTop(sb),
+            toLeft: (sb) => this.scrollbarService.toLeft(sb),
+            toBottom: (sb) => this.scrollbarService.toBottom(sb),
+            toRight: (sb) => this.scrollbarService.toRight(sb),
+        };
+    }
+    get column() {
+        return {
+            setVisible: (columnDef, visible) => this.columnsService.setVisible(columnDef, visible),
+            toggleVisible: (columnDef) => this.columnsService.toggleVisible(columnDef),
+            changeWidth: (columnDef, options) => this.columnsService.changeWidth(columnDef, options),
+            setResizable: (columnDef, resizable) => this.columnsService.setResizable(columnDef, resizable),
+            toggleResizable: (columnDef) => this.columnsService.toggleResizable(columnDef),
+            setSticky: (columnDef, options) => this.columnsService.setSticky(columnDef, options),
+            columns: () => this.columnsService.columns(),
+            setColumnPosition: (columnDef, position) => this.columnsService.setColumnPosition(columnDef, position),
+        };
+    }
+    get pagination() {
+        return {
+            setPageIndex: (index) => this.paginatorService.setPageIndex(index),
+            setPageSize: (size) => this.paginatorService.setPageSize(size),
+            firstPage: () => this.paginatorService.firstPage(),
+            lastPage: () => this.paginatorService.lastPage(),
+            enable: () => this.paginatorService.enable(),
+            disable: () => this.paginatorService.disable(),
+            setPageSizeOptions: (option) => this.paginatorService.setPageSizeOptions(option),
+            page: this.paginatorService.pageChanged(),
+        };
+    }
+    get selection() {
+        return {
+            disable: () => this.selectionService.disable(),
+            enable: () => this.selectionService.enable(),
+            count: this.selectionService.count(),
+            selectionModel: this.selectionService.selectionModel,
+            // changed: () => {},
+            // isEmpty: () => {},
+            // isMultipleSelection: () => {},
+            // selected: () => {},
+        };
+    }
+    get sort() {
+        return {
+            setActive: (active) => this.sortService.setActive(active),
+            setDirection: (direction) => this.sortService.setDirection(direction),
+            sortChange: () => this.sortService.sortChange(),
+        };
+    }
+    get loading() {
+        return {
+            start: () => this.loadingService.start(),
+            stop: () => this.loadingService.stop(),
+        };
+    }
+    get footer() {
+        return {
+            hide: () => this.footerService.hide(),
+            show: () => this.footerService.show(),
+        };
+    }
+    get ui() {
+        return this.tableService.ui;
+    }
+    refresh() {
+        this.loader.refresh();
+    }
+    ngOnInit() {
+        this.sortService.register(this.matSort);
+        const el = this.formElemRef.nativeElement;
+        this.scrollbarService.register(el);
+        this.renderService
+            .render()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.table?.renderRows();
+        });
+        this.expandedRowStore.expandedIds$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.table?.renderRows();
+        });
+    }
+    ngAfterViewInit() {
+        this.calculHeaderHeight();
+    }
+    ngOnDestroy() {
+        this._cleanup?.();
+        this.scrollbarService.unregister();
+    }
+    submit() {
+        // TODO
+    }
+    calculHeaderHeight() {
+        const formNativeElem = this.formElemRef?.nativeElement;
+        const header = this.host.nativeElement.querySelector('.mat-mdc-header-row');
+        const footer = this.host.nativeElement.querySelector('.mat-mdc-footer-row');
+        const compute = () => {
+            this.scrollHeightPx = Math.max(0, (formNativeElem?.offsetHeight ?? 0) - (formNativeElem?.clientHeight ?? 0));
+            this.headerHeightPx = Math.ceil(header?.getBoundingClientRect().height ?? 0);
+            this.footerHeightPx = Math.max(0, footer?.getBoundingClientRect().height ?? 0);
+        };
+        const scheduleCompute = () => {
+            if (this.rafId) {
+                cancelAnimationFrame(this.rafId);
+            }
+            this.rafId = requestAnimationFrame(() => {
+                compute();
+                this.rafId = requestAnimationFrame(compute);
+            });
+        };
+        scheduleCompute();
+        this.ro = new ResizeObserver(scheduleCompute);
+        if (formNativeElem) {
+            this.ro.observe(formNativeElem);
+        }
+        if (header) {
+            this.ro.observe(header);
+        }
+        if (footer) {
+            this.ro.observe(footer);
+        }
+        if (formNativeElem) {
+            formNativeElem.addEventListener('scroll', scheduleCompute, { passive: true });
+            window.addEventListener('resize', scheduleCompute, { passive: true });
+            this._cleanup = () => {
+                formNativeElem.removeEventListener('scroll', scheduleCompute);
+                window.removeEventListener('resize', scheduleCompute);
+                this.ro?.disconnect();
+                if (this.rafId) {
+                    cancelAnimationFrame(this.rafId);
+                }
+            };
+        }
+    }
+    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 }], 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" } }, 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        class=\"mat-elevation-z2\"\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        class=\"mat-elevation-z1\"\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                    [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                    [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\"></ng-container>\n                        </kles-cell>\n                    </div>\n                </td>\n\n                <td\n                    mat-footer-cell\n                    *matFooterCellDef\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\"></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\n        <tr *matNoDataRow [attr.colspan]=\"displayedColumns().length\">\n            @if (!loadingService.loading()) {\n                no data TODO\n            }\n        </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", styles: [":host{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){min-height:350px}form{display:flex;flex-direction:column;flex-grow:1;position:relative;overflow:auto}table{width:100%;flex-grow:1}.mat-mdc-header-row{background-color:#e2e6eb}th,td{text-wrap:pretty;white-space:normal;padding-top:2px;padding-bottom:2px}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;width:100%;left:0;right:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));display:grid;place-items:center;background:#8b939a26;z-index:500}:host .mat-mdc-table .mat-mdc-cell,:host .mat-mdc-table .mat-mdc-header-cell{box-shadow:inset -1px 0 #c4c6d0;border-bottom-color:#c4c6d0}: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{box-shadow:inset 0 1px #c4c6d0}:host tr.mat-mdc-row:last-of-type td.mat-mdc-cell{border-bottom:1px solid rgb(196,198,208)}:host tr.mat-mdc-footer-row{font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i15.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i16.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i16.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i16.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i16.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: i18.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i18.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i18.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i18.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i18.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i18.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i18.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i18.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i18.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i18.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i18.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i18.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i18.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: CdkTableModule }, { kind: "directive", type: i19.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i19.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "ngmodule", type: KlesMaterialDynamicformsModule }, { kind: "directive", type: i20.KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i21.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: i21.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: i22.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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-table', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatSortModule,
+                        MatTableModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        CdkTableModule,
+                        KlesMaterialDynamicformsModule,
+                        HeaderFieldPipe,
+                        CellFieldPipe,
+                        UiFieldPipe,
+                        FooterFieldPipe,
+                        SpanPipe,
+                        ExtraCellFieldPipe,
+                        DragDropModule,
+                        ResolveNgStylePipe,
+                        MatProgressSpinnerModule,
+                        ResizableColumnDirective,
+                        MatIconModule,
+                        KlesCellComponent,
+                        KlesHeaderComponent,
+                        HeaderPipe,
+                    ], 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        class=\"mat-elevation-z2\"\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        class=\"mat-elevation-z1\"\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                    [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                    [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\"></ng-container>\n                        </kles-cell>\n                    </div>\n                </td>\n\n                <td\n                    mat-footer-cell\n                    *matFooterCellDef\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\"></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\n        <tr *matNoDataRow [attr.colspan]=\"displayedColumns().length\">\n            @if (!loadingService.loading()) {\n                no data TODO\n            }\n        </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", styles: [":host{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){min-height:350px}form{display:flex;flex-direction:column;flex-grow:1;position:relative;overflow:auto}table{width:100%;flex-grow:1}.mat-mdc-header-row{background-color:#e2e6eb}th,td{text-wrap:pretty;white-space:normal;padding-top:2px;padding-bottom:2px}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;width:100%;left:0;right:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));display:grid;place-items:center;background:#8b939a26;z-index:500}:host .mat-mdc-table .mat-mdc-cell,:host .mat-mdc-table .mat-mdc-header-cell{box-shadow:inset -1px 0 #c4c6d0;border-bottom-color:#c4c6d0}: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{box-shadow:inset 0 1px #c4c6d0}:host tr.mat-mdc-row:last-of-type td.mat-mdc-cell{border-bottom:1px solid rgb(196,198,208)}:host tr.mat-mdc-footer-row{font-weight:500}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: KlesTableConnectorService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOADER_SERVICE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DATASOURCE_SERVICE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TABLE_SERVICE]
+                }] }, { type: DragDropService, decorators: [{
+                    type: Inject,
+                    args: [ROW_DRAG_DROP]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SELECTION_SERVICE]
+                }] }, { type: ColumnsService }, { type: LoadingService }, { type: PaginatorService }, { type: ScrollbarService }, { type: FooterService }, { type: ExtraRowService }, { type: RenderService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SORT_SERVICE]
+                }] }, { type: FilterService, decorators: [{
+                    type: Optional
+                }] }, { type: ExpandedRowStore }, { type: RowFormFactory }, { type: EventsService }, { type: RowService }, { type: CellService }], propDecorators: { table: [{
+                type: ViewChild,
+                args: [MatTable]
+            }], matSort: [{
+                type: ViewChild,
+                args: [MatSort, { static: true }]
+            }], formElemRef: [{
+                type: ViewChild,
+                args: ['form', { static: true }]
+            }], isLoadingClass: [{
+                type: HostBinding,
+                args: ['class.loading']
+            }] } });
+
+function isDestroyable(value) {
+    return value !== null && typeof value === 'object' &&
+        typeof value.destroy === 'function';
+}
+
+class PaginateTableComponent {
+    constructor(paginatorService) {
+        this.paginatorService = paginatorService;
+        this.disabled = paginatorService.disabled();
+    }
+    ngOnInit() {
+        this.paginatorService.register(this.paginator);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PaginateTableComponent, deps: [{ token: PaginatorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: PaginateTableComponent, isStandalone: true, selector: "kles-paginate-table", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "table", first: true, predicate: TableComponent, descendants: true, static: true }], ngImport: i0, template: "<kles-table></kles-table>\n<mat-paginator [disabled]=\"disabled()\" class=\"paginator\"></mat-paginator>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:auto}.paginator{padding-bottom:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TableComponent, selector: "kles-table" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PaginateTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-paginate-table', standalone: true, imports: [CommonModule, TableComponent, MatPaginatorModule], template: "<kles-table></kles-table>\n<mat-paginator [disabled]=\"disabled()\" class=\"paginator\"></mat-paginator>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:auto}.paginator{padding-bottom:4px}\n"] }]
+        }], ctorParameters: () => [{ type: PaginatorService }], propDecorators: { paginator: [{
+                type: ViewChild,
+                args: [MatPaginator, { static: true }]
+            }], table: [{
+                type: ViewChild,
+                args: [TableComponent, { static: true }]
+            }] } });
+
+class SortStore {
+    constructor(config) {
+        this.config = config;
+        this.s = new BehaviorSubject(config || undefined);
+        this.sort$ = this.s.asObservable();
+    }
+    setSort(v) {
+        this.s.next(v);
+    }
+    snapshot() {
+        return this.s.value;
+    }
+    reset() {
+        this.s.next(this.config || undefined);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SortStore, deps: [{ token: SORT_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SortStore }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SortStore, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SORT_CONFIG]
+                }] }] });
+
+class AbstractSortService {
+    constructor(eventsService) {
+        this.eventsService = eventsService;
+        this._sortChange = new EventEmitter();
+        this.destroyRef = inject(DestroyRef);
+    }
+    get sort() {
+        return this._sort;
+    }
+    register(s) {
+        this._sort = s;
+        this._sort.sortChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+            this._sortChange.emit(event);
+            this.eventsService.emit('sortChange', {
+                active: event.active,
+                direction: event.direction,
+            });
+        });
+    }
+    setDirection(direction) {
+        if (this._sort) {
+            this._sort.direction = direction;
+            this.sort.sortChange.emit({ active: this._sort.active, direction: this._sort.direction });
+        }
+    }
+    setActive(active) {
+        if (this._sort) {
+            this._sort.active = active;
+            this.sort.sortChange.emit({ active: this._sort.active, direction: this._sort.direction });
+        }
+    }
+    sortChange() {
+        return this._sortChange;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AbstractSortService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AbstractSortService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AbstractSortService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: EventsService }] });
+class SortService extends AbstractSortService {
+    constructor(sortStore, columnsService, datasourceService, eventsService) {
+        super(eventsService);
+        this.sortStore = sortStore;
+        this.columnsService = columnsService;
+        this.datasourceService = datasourceService;
+        this.eventsService = eventsService;
+        this.sortingDataAccessor = (item, property) => {
+            if (!item.value) {
+                return undefined;
+            }
+            let value = item.value?.[property];
+            if (value) {
+                if (typeof value === 'string') {
+                    value = value.toLowerCase();
+                }
+            }
+            return value;
+        };
+    }
+    register(s) {
+        super.register(s);
+        this.datasourceService.datasource.sort = this._sort;
+        if (!this._sort)
+            return;
+        this.datasourceService.datasource.sortingDataAccessor = this.sortingDataAccessor;
+        this.datasourceService.datasource.sortData = this.sortDataPredicate(this.columnsService.columns());
+        s.active = this.sortStore?.snapshot()?.active ?? s.active;
+        s.direction = this.sortStore?.snapshot()?.direction ?? s.direction;
+        s.sortChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+            this.sortStore?.setSort(event);
+        });
+    }
+    sortDataPredicate(columns) {
+        return (data, sort) => {
+            const active = sort.active;
+            const direction = sort.direction;
+            if (!active || direction == '') {
+                return data;
+            }
+            const column = columns.find((col) => col.columnDef === active);
+            return data.sort((a, b) => {
+                let valueA;
+                let valueB;
+                if (column?.headerCell.sortPredicate) {
+                    valueA = column?.headerCell.sortPredicate(a);
+                    valueB = column?.headerCell.sortPredicate(b);
+                }
+                else {
+                    valueA = this.sortingDataAccessor(a, active);
+                    valueB = this.sortingDataAccessor(b, active);
+                    if (column) {
+                        const key = column.cell?.field.property;
+                        if (key) {
+                            valueA = valueA?.[key];
+                            valueB = valueB?.[key];
+                        }
+                    }
+                }
+                const valueAType = typeof valueA;
+                const valueBType = typeof valueB;
+                if (valueAType !== valueBType) {
+                    if (valueAType === 'number') {
+                        valueA += '';
+                    }
+                    if (valueBType === 'number') {
+                        valueB += '';
+                    }
+                }
+                let comparatorResult = 0;
+                if (valueA != null && valueB != null) {
+                    if (valueA > valueB) {
+                        comparatorResult = 1;
+                    }
+                    else if (valueA < valueB) {
+                        comparatorResult = -1;
+                    }
+                }
+                else if (valueA != null) {
+                    comparatorResult = 1;
+                }
+                else if (valueB != null) {
+                    comparatorResult = -1;
+                }
+                return comparatorResult * (direction == 'asc' ? 1 : -1);
+            });
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SortService, deps: [{ token: SortStore, optional: true }, { token: ColumnsService }, { token: DATASOURCE_SERVICE }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SortService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SortService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: SortStore, decorators: [{
+                    type: Optional
+                }] }, { type: ColumnsService }, { type: DatasourceService, decorators: [{
+                    type: Inject,
+                    args: [DATASOURCE_SERVICE]
+                }] }, { type: EventsService }] });
+class SortLazyService extends AbstractSortService {
+    constructor(sortStore, datasourceService, eventsService) {
+        super(eventsService);
+        this.sortStore = sortStore;
+        this.datasourceService = datasourceService;
+        this.eventsService = eventsService;
+    }
+    register(s) {
+        super.register(s);
+        this.datasourceService.datasource.sort = this._sort;
+        if (!this._sort)
+            return;
+        s.active = this.sortStore?.snapshot()?.active ?? s.active;
+        s.direction = this.sortStore?.snapshot()?.direction ?? s.direction;
+        s.sortChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+            this.sortStore?.setSort(event);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SortLazyService, deps: [{ token: SortStore, optional: true }, { token: DATASOURCE_SERVICE }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SortLazyService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SortLazyService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: SortStore, decorators: [{
+                    type: Optional
+                }] }, { type: DatasourceLazyService, decorators: [{
+                    type: Inject,
+                    args: [DATASOURCE_SERVICE]
+                }] }, { type: EventsService }] });
+
+class FilterStore {
+    constructor() {
+        this.s = new BehaviorSubject({});
+        this.filters$ = this.s.asObservable();
+    }
+    setFilters(v) {
+        this.s.next(v);
+    }
+    reset() {
+        this.s.next({});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FilterStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FilterStore }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FilterStore, decorators: [{
+            type: Injectable
+        }] });
+
+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 }] }); }
+}
+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, TableComponent, ScrollingModule], template: "<!-- <cdk-virtual-scroll-viewport itemSize=\"48\">\n    <kles-table></kles-table>\n</cdk-virtual-scroll-viewport> -->\n" }]
+        }], ctorParameters: () => [] });
+
+class SelectionLoaderService {
+    constructor(selectionConfig) {
+        this.selectionConfig = selectionConfig;
+    }
+    get key() {
+        return this.selectionConfig?.key || '#select';
+    }
+    select(row, selected, filters) {
+        return (this.selectionConfig?.params?.() || of({})).pipe(auditTime(0), take(1), switchMap((params) => {
+            return concat(of({ loading: true, success: false }), (this.selectionConfig?.select
+                ? this.selectionConfig?.select?.(params, row, selected, filters)
+                : of({ selected, count: null })).pipe(map((response) => {
+                return { ...response, loading: false, success: true };
+            }), catchError((err) => {
+                return of({ error: err, loading: false, success: false });
+            })));
+        }));
+    }
+    selectAll(selected, filters) {
+        return (this.selectionConfig?.params?.() || of({})).pipe(auditTime(0), take(1), switchMap((params) => {
+            return concat(of({ loading: true, success: false }), (this.selectionConfig?.selectAll
+                ? this.selectionConfig?.selectAll?.(params, selected, filters)
+                : of({ selected, count: null, footer: null })).pipe(map((response) => {
+                return { ...response, loading: false, success: true };
+            }), catchError((err) => {
+                return of({ error: err, 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SelectionLoaderService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SELECTION_CONFIG]
+                }] }] });
+
+class HeaderService {
+    constructor(fm, filterService, filterStore, datasourceService, loader, columnsService, eventsService) {
+        this.fm = fm;
+        this.filterService = filterService;
+        this.filterStore = filterStore;
+        this.datasourceService = datasourceService;
+        this.loader = loader;
+        this.columnsService = columnsService;
+        this.eventsService = eventsService;
+        this.destroyRef = inject(DestroyRef);
+        this.filterableColumns = this.columnsService
+            .columns()
+            .filter((c) => c.filterable === true)
+            .map((c) => c.columnDef);
+    }
+    register() {
+        this.load();
+        const header = this.fm.getHeader();
+        const filterControlChanges$ = merge(...this.filterableColumns.map((columnDef) => {
+            const control = header.get(columnDef);
+            if (!control) {
+                throw new Error(`Missing header filter control: ${columnDef}`);
+            }
+            return control.valueChanges.pipe(debounceTime(300), distinctUntilChanged((a, b) => ___default.isEqual(a, b)), map((currentValue) => ({
+                columnDef,
+                currentValue,
+            })));
+        }));
+        filterControlChanges$
+            .pipe(takeUntilDestroyed(this.destroyRef), scan((state, changed) => {
+            const previousValue = state.filters[changed.columnDef];
+            const changedFilter = {
+                columnDef: changed.columnDef,
+                previousValue,
+                currentValue: changed.currentValue,
+            };
+            const filters = {
+                ...state.filters,
+                [changed.columnDef]: changed.currentValue,
+            };
+            return {
+                filters,
+                changedFilter,
+            };
+        }, {
+            filters: Object.fromEntries(this.filterableColumns.map((columnDef) => [columnDef, header.get(columnDef)?.value])),
+            changedFilter: undefined,
+        }))
+            .subscribe(({ filters, changedFilter }) => {
+            if (this.filterService) {
+                const prepared = this.filterService.formatData(filters);
+                this.datasourceService.datasource.filter = JSON.stringify(prepared);
+                this.filterStore?.setFilters(prepared);
+            }
+            else {
+                this.filterStore?.setFilters(filters);
+                this.datasourceService.datasource.filter = JSON.stringify(filters);
+            }
+            this.eventsService.emit('filterChange', {
+                filters,
+                changedFilter,
+            });
+        });
+    }
+    load() {
+        this.loader
+            .load()
+            .pipe(takeUntilDestroyed(this.destroyRef), filter((response) => !response.loading), map((response) => response.header), filter((header) => header != undefined), distinctUntilChanged((p, c) => {
+            return this.filterableColumns.every((col) => p?.[col] === c?.[col]);
+        }))
+            .subscribe((header) => {
+            this.fm.getHeader().patchValue(header, { emitEvent: false });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: HeaderService, deps: [{ token: KlesForm }, { token: FilterService, optional: true }, { token: FilterStore, optional: true }, { token: DATASOURCE_SERVICE }, { token: LOADER_SERVICE }, { token: ColumnsService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: HeaderService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: HeaderService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: KlesForm }, { type: FilterService, decorators: [{
+                    type: Optional
+                }] }, { type: FilterStore, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DATASOURCE_SERVICE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOADER_SERVICE]
+                }] }, { type: ColumnsService }, { type: EventsService }] });
+class HeaderLazyService {
+    constructor(fm, filterStore, loader, columnsService, eventsService) {
+        this.fm = fm;
+        this.filterStore = filterStore;
+        this.loader = loader;
+        this.columnsService = columnsService;
+        this.eventsService = eventsService;
+        this.destroyRef = inject(DestroyRef);
+        this.filterableColumns = this.columnsService
+            .columns()
+            .filter((c) => c.filterable === true)
+            .map((c) => c.columnDef);
+    }
+    register() {
+        this.load();
+        const header = this.fm.getHeader();
+        const filterControlChanges$ = merge(...this.filterableColumns.map((columnDef) => {
+            const control = header.get(columnDef);
+            if (!control) {
+                throw new Error(`Missing header filter control: ${columnDef}`);
+            }
+            return control.valueChanges.pipe(debounceTime(300), distinctUntilChanged((a, b) => ___default.isEqual(a, b)), map((currentValue) => ({
+                columnDef,
+                currentValue,
+            })));
+        }));
+        filterControlChanges$
+            .pipe(takeUntilDestroyed(this.destroyRef), scan((state, changed) => {
+            const previousValue = state.filters[changed.columnDef];
+            const changedFilter = {
+                columnDef: changed.columnDef,
+                previousValue,
+                currentValue: changed.currentValue,
+            };
+            const filters = {
+                ...state.filters,
+                [changed.columnDef]: changed.currentValue,
+            };
+            return {
+                filters,
+                changedFilter,
+            };
+        }, {
+            filters: Object.fromEntries(this.filterableColumns.map((columnDef) => [columnDef, header.get(columnDef)?.value])),
+            changedFilter: undefined,
+        }))
+            .subscribe(({ filters, changedFilter }) => {
+            this.filterStore?.setFilters(filters);
+            this.eventsService.emit('filterChange', {
+                filters,
+                changedFilter,
+            });
+        });
+    }
+    load() {
+        this.loader
+            .load()
+            .pipe(takeUntilDestroyed(this.destroyRef), filter((response) => !response.loading), map((response) => response.header), filter((header) => header != undefined), distinctUntilChanged((p, c) => {
+            return this.filterableColumns.every((col) => p?.[col] === c?.[col]);
+        }))
+            .subscribe((header) => {
+            this.fm.getHeader().patchValue(header, { emitEvent: false });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: HeaderLazyService, deps: [{ token: KlesForm }, { token: FilterStore, optional: true }, { token: LOADER_SERVICE }, { token: ColumnsService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: HeaderLazyService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: HeaderLazyService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: KlesForm }, { type: FilterStore, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOADER_SERVICE]
+                }] }, { type: ColumnsService }, { type: EventsService }] });
+
+function getMultipleValuesInSingleSelectionError() {
+    return Error('Cannot pass multiple values into SelectionModel with single-value mode.');
+}
+
+var KlesSelectionModelState;
+(function (KlesSelectionModelState) {
+    KlesSelectionModelState["ENABLED"] = "enabled";
+    KlesSelectionModelState["DISABLED"] = "disabled";
+})(KlesSelectionModelState || (KlesSelectionModelState = {}));
+
+class KlesSelectionModel {
+    constructor(multiple = false, initialValues) {
+        this.multiple = multiple;
+        this._selection = new Set();
+        this._changed = new Subject();
+        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);
+        });
+    }
+    get selected() {
+        return {
+            items: Array.from(this._selection),
+            count: this._selection.size,
+            state: this._state,
+        };
+    }
+    get count() {
+        return this._count.asReadonly();
+    }
+    get changed() {
+        return this._changed.asObservable();
+    }
+    get state() {
+        return this._state;
+    }
+    get stateChanged() {
+        return this._stateChanged.asObservable();
+    }
+    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);
+                    }
+                });
+            }
+            else {
+                if (!this.isSelected(value)) {
+                    if (!this.multiple) {
+                        removed.push(...Array.from(this._selection));
+                        this._selection.clear();
+                    }
+                    this._selection.add(value);
+                    added.push(value);
+                }
+            }
+        }
+        this._count.set(this._selection.size);
+        if (options?.emitEvent ?? true) {
+            this._changed.next({ added, removed, count: this._selection.size, state: this._state });
+        }
+    }
+    deselect(value, options) {
+        const removed = [];
+        const added = [];
+        if (this._state === KlesSelectionModelState.ENABLED) {
+            if (Array.isArray(value)) {
+                value.forEach((v) => {
+                    if (this.isSelected(v)) {
+                        this._selection.delete(v);
+                        removed.push(v);
+                    }
+                });
+            }
+            else {
+                if (this.isSelected(value)) {
+                    this._selection.delete(value);
+                    removed.push(value);
+                }
+            }
+        }
+        this._count.set(this._selection.size);
+        if (options?.emitEvent ?? true) {
+            this._changed.next({ added, removed, count: this._selection.size, state: this._state });
+        }
+    }
+    toggle(value, options) {
+        if (this.isSelected(value)) {
+            this.deselect(value, options);
+        }
+        else {
+            this.select(value, options);
+        }
+    }
+    isEmpty() {
+        return this._selection.size === 0;
+    }
+    hasValue() {
+        return this._selection.size > 0;
+    }
+    disable() {
+        this._state = KlesSelectionModelState.DISABLED;
+        this._stateChanged.next(this._state);
+    }
+    enable() {
+        this._state = KlesSelectionModelState.ENABLED;
+        this._stateChanged.next(this._state);
+    }
+    isSelected(value) {
+        return this._selection.has(this.getValue(value));
+    }
+    isMultipleSelection() {
+        return this.multiple || false;
+    }
+    getValue(value) {
+        // si jamais je rajoute une méthode de comparaison avec _selection
+        return value;
+    }
+}
+
+class AbstractSelectionService {
+    constructor(selectionConfig) {
+        this.selectionConfig = selectionConfig;
+    }
+    get key() {
+        return this.selectionConfig?.key || '#select';
+    }
+    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 }); }
+    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: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SELECTION_CONFIG]
+                }] }] });
+class SelectionService extends AbstractSelectionService {
+    constructor(selectionConfig, fm, selectionLoaderService, scrollbarService, loadingService, datasourceService, linesService) {
+        super(selectionConfig);
+        this.fm = fm;
+        this.selectionLoaderService = selectionLoaderService;
+        this.scrollbarService = scrollbarService;
+        this.loadingService = loadingService;
+        this.datasourceService = datasourceService;
+        this.linesService = linesService;
+        this.destroyRef = inject(DestroyRef);
+        this.selectionModel = new KlesSelectionModel(selectionConfig?.selectionMode);
+    }
+    register() {
+        this.listenSelection();
+        this.setSelection();
+        this.listenDatasource();
+        this.listenRowSelection();
+        this.listenHeaderSelection();
+    }
+    count() {
+        return this.selectionModel.count;
+    }
+    disable() {
+        this.selectionModel.disable();
+    }
+    enable() {
+        this.selectionModel.enable();
+    }
+    setSelection() {
+        this.linesService
+            .loaded()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            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
+                }
+                else if (this.selectionConfig?.isSelected != undefined && this.selectionConfig.isSelected(group)) {
+                    this.selectionModel.select(group, { emitEvent: false }); // event false to avoid multiple send event
+                    group.controls[this.selectionLoaderService.key]?.patchValue(true, { emitEvent: false });
+                }
+                else {
+                    this.selectionModel.deselect(group, { emitEvent: false }); // event false to avoid multiple send event
+                }
+                if (this.selectionConfig?.isDisabled && this.selectionConfig.isDisabled(group)) {
+                    group.controls[this.selectionLoaderService.key]?.disable({ emitEvent: false });
+                }
+            });
+            this.updateHeader();
+        });
+    }
+    listenHeaderSelection() {
+        this.fm
+            .getHeader()
+            .controls[this.key]?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef), switchMap((value) => {
+            return this.selectionLoaderService.selectAll(!!value, this.fm.getHeader().getRawValue());
+        }))
+            .subscribe((response) => {
+            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] ?? []);
+                    }
+                }
+                else {
+                    this.selectionModel.deselect(this.datasourceService.datasource.filteredData?.filter((g) => g.controls[this.selectionLoaderService.key]?.enabled));
+                }
+            }
+        });
+    }
+    listenRowSelection() {
+        this.datasourceService.datasource
+            .connect()
+            .pipe(takeUntilDestroyed(this.destroyRef), auditTime(0), switchMap((rows) => {
+            return merge(...rows
+                .map((row) => {
+                return row.controls[this.selectionLoaderService.key]?.valueChanges.pipe(map((value) => {
+                    return { row, selected: !!value };
+                }));
+            })
+                .filter(Boolean));
+        }), concatMap(({ row, selected }) => {
+            return this.selectionLoaderService.select(row, selected).pipe(map((response) => {
+                return {
+                    row,
+                    response,
+                };
+            }));
+        }))
+            .subscribe(({ row, response }) => {
+            if (response.loading) {
+                //mettre la ligne avec un spinner
+            }
+            else {
+                if (response.selected) {
+                    this.selectionModel.select(row);
+                }
+                else {
+                    this.selectionModel.deselect(row);
+                }
+                //enlever la ligne en spinner
+            }
+        });
+    }
+    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.updateHeader();
+        });
+        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 });
+                });
+            }
+            else {
+                this.fm.getHeader().controls[this.key].disable({ emitEvent: false });
+                this.fm.getRows().controls.forEach((group) => {
+                    group.controls[this.key].disable({ emitEvent: false });
+                });
+            }
+        });
+    }
+    listenDatasource() {
+        this.datasourceService.datasource
+            .connect()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.updateHeader();
+        });
+    }
+    updateHeader() {
+        if (this.selectionModel.hasValue()) {
+            if (this.datasourceService.datasource.filteredData
+                .filter((group) => group.controls[this.selectionLoaderService.key]?.enabled)
+                .every((group) => this.selectionModel.isSelected(group))) {
+                this.fm.getUiHeader().get(this.selectionLoaderService.key)?.patchValue({ indeterminate: false });
+                this.fm.getHeader().controls[this.selectionLoaderService.key]?.patchValue(true, { emitEvent: false });
+            }
+            else {
+                this.fm.getUiHeader().get(this.selectionLoaderService.key)?.patchValue({ indeterminate: true });
+                this.fm.getHeader().controls[this.selectionLoaderService.key]?.patchValue(false, { emitEvent: false });
+            }
+        }
+        else {
+            this.fm.getUiHeader().get(this.selectionLoaderService.key)?.patchValue({ indeterminate: false });
+            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.ɵ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: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SELECTION_CONFIG]
+                }] }, { type: KlesForm }, { type: SelectionLoaderService }, { type: ScrollbarService }, { type: LoadingService }, { type: DatasourceService, decorators: [{
+                    type: Inject,
+                    args: [DATASOURCE_SERVICE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LINES_SERVICE]
+                }] }] });
+class SelectionLazyService extends AbstractSelectionService {
+    constructor(selectionConfig, fm, selectionLoaderService, scrollbarService, loadingService, datasourceService, linesService) {
+        super(selectionConfig);
+        this.fm = fm;
+        this.selectionLoaderService = selectionLoaderService;
+        this.scrollbarService = scrollbarService;
+        this.loadingService = loadingService;
+        this.datasourceService = datasourceService;
+        this.linesService = linesService;
+        this.destroyRef = inject(DestroyRef);
+        this._count = signal(0, ...(ngDevMode ? [{ debugName: "_count" }] : /* istanbul ignore next */ []));
+    }
+    register() {
+        this.setSelection();
+        this.listenHeaderSelection();
+        this.listenRowSelection();
+    }
+    count() {
+        return this._count.asReadonly();
+    }
+    disable() {
+        this.fm.getHeader().controls[this.key].disable({ emitEvent: false });
+    }
+    enable() {
+        this.fm.getHeader().controls[this.key].enable({ emitEvent: false });
+    }
+    listenHeaderSelection() {
+        this.fm
+            .getHeader()
+            .controls[this.key].valueChanges.pipe(takeUntilDestroyed(this.destroyRef), switchMap((value) => {
+            return this.selectionLoaderService.selectAll(!!value, this.fm.getHeader().getRawValue());
+        }))
+            .subscribe((response) => {
+            if (response.loading) {
+                this.scrollbarService.toTop('instant');
+                this.loadingService.start();
+                return;
+            }
+            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 });
+                // }
+            }
+        });
+    }
+    listenRowSelection() {
+        this.datasourceService.datasource
+            .connect()
+            .pipe(takeUntilDestroyed(this.destroyRef), auditTime(0), switchMap((rows) => {
+            return merge(...rows
+                .map((row) => {
+                return row.controls[this.selectionLoaderService.key]?.valueChanges.pipe(map((value) => {
+                    return { row, selected: !!value };
+                }));
+            })
+                .filter(Boolean));
+        }), concatMap(({ row, selected }) => {
+            return this.selectionLoaderService.select(row, selected).pipe(map((response) => {
+                return {
+                    row,
+                    response,
+                };
+            }));
+        }))
+            .subscribe(({ row, response }) => {
+            if (response.loading) {
+                //mettre la ligne avec un spinner
+            }
+            else {
+                this.fm
+                    .getUiHeader()
+                    .get(this.selectionLoaderService.key)
+                    ?.patchValue({
+                    indeterminate: response.count != undefined ? response.count > 0 && this.linesService.total() > response.count : false,
+                });
+                //         if (footer) {
+                //             this.fm.getFooter().patchValue(footer, { emitEvent: false });
+                //         }
+            }
+        });
+    }
+    setSelection() {
+        this.linesService
+            .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 });
+                }
+                if (this.selectionConfig?.isDisabled && this.selectionConfig.isDisabled(group)) {
+                    group.controls[this.selectionLoaderService.key]?.disable({ emitEvent: false });
+                }
+            });
+            // this.updateHeader();
+        });
+    }
+    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 }], 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: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SELECTION_CONFIG]
+                }] }, { type: KlesForm }, { type: SelectionLoaderService }, { type: ScrollbarService }, { type: LoadingService }, { type: DatasourceService, decorators: [{
+                    type: Inject,
+                    args: [DATASOURCE_SERVICE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LINES_SERVICE]
+                }] }] });
+
+class LoaderService {
+    constructor(loaderConfig, eventsService) {
+        this.loaderConfig = loaderConfig;
+        this.eventsService = eventsService;
+        this._refresh$ = new Subject();
+        this.init();
+    }
+    init() {
+        const linesLoader = this.loaderConfig.lines;
+        this._loader$ = combineLatest([this._refresh$.pipe(startWith(void 0)), this.loaderConfig.lines.params?.() || of({})]).pipe(auditTime(0), switchMap(([_, params]) => {
+            return concat(of({ loading: true, total: 0, items: [] }), linesLoader.loader(params).pipe(catchError((err) => {
+                return of({ error: err, items: [] });
+            }), map((response) => {
+                return { ...response, loading: false, total: response?.items.length || 0 };
+            })));
+        }), shareReplay({ bufferSize: 1, refCount: true }));
+    }
+    load() {
+        return this._loader$;
+    }
+    refresh() {
+        this._refresh$.next();
+        this.eventsService.emit('refresh');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoaderService, deps: [{ token: LOADER_CONFIG }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoaderService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoaderService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOADER_CONFIG]
+                }] }, { type: EventsService }] });
+class LoaderLazyService {
+    constructor(loaderConfig, paginatorStore, sortStore, filterStore, eventsService) {
+        this.loaderConfig = loaderConfig;
+        this.paginatorStore = paginatorStore;
+        this.sortStore = sortStore;
+        this.filterStore = filterStore;
+        this.eventsService = eventsService;
+        this._refresh$ = new Subject();
+        this.init();
+    }
+    load() {
+        return this._loader$;
+    }
+    init() {
+        const linesLoader = this.loaderConfig.lines;
+        this._loader$ = combineLatest([
+            this._refresh$.pipe(startWith(void 0)),
+            this.loaderConfig.lines.params?.() || of({}),
+            this.paginatorStore?.page$ || of(undefined),
+            this.sortStore?.sort$ || of(undefined),
+            this.filterStore?.filters$ || of({}),
+        ]).pipe(auditTime(0), switchMap(([_, params, pagination, sort, filters]) => {
+            return concat(of({ loading: true, total: 0, items: [] }), linesLoader.loader(params, { filters, pagination, sort }).pipe(catchError((err) => {
+                return of({ error: err, items: [], total: 0 });
+            }), map((response) => {
+                return { ...response, loading: false };
+            })));
+        }), shareReplay({ bufferSize: 1, refCount: true }));
+    }
+    refresh() {
+        this._refresh$.next();
+        this.eventsService.emit('refresh');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoaderLazyService, deps: [{ token: LOADER_CONFIG }, { token: PaginatorStore, optional: true }, { token: SortStore, optional: true }, { token: FilterStore, optional: true }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoaderLazyService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoaderLazyService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOADER_CONFIG]
+                }] }, { type: PaginatorStore, decorators: [{
+                    type: Optional
+                }] }, { type: SortStore, decorators: [{
+                    type: Optional
+                }] }, { type: FilterStore, decorators: [{
+                    type: Optional
+                }] }, { type: EventsService }] });
+
+class LinesService {
+    constructor(loader, fm, columnsService, rowFactory, extraRowService, eventsService) {
+        this.loader = loader;
+        this.fm = fm;
+        this.columnsService = columnsService;
+        this.rowFactory = rowFactory;
+        this.extraRowService = extraRowService;
+        this.eventsService = eventsService;
+        this.destroyRef = inject(DestroyRef);
+        this._loaded = new EventEmitter();
+    }
+    register() {
+        this.load();
+    }
+    total() {
+        return this._total ?? 0;
+    }
+    loaded() {
+        return this._loaded;
+    }
+    load() {
+        this.loader
+            .load()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((response) => {
+            if (response.loading) {
+                this.eventsService.emit('loadStart');
+            }
+            else {
+                if (response.error) {
+                    this.eventsService.emit('loadError', {
+                        error: response.error,
+                        message: response.error?.message,
+                    });
+                }
+                else {
+                    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 ?? []));
+                    this._total = response.items?.length ?? 0;
+                    this._loaded.next();
+                    this.eventsService.emit('loadSuccess', {
+                        total: this._total,
+                        values: response.items,
+                        rawValues: this.fm.getRows().getRawValue(),
+                        rows: this.fm.getRows().controls,
+                    });
+                }
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LinesService, deps: [{ token: LOADER_SERVICE }, { token: KlesForm }, { token: ColumnsService }, { token: RowFormFactory }, { token: ExtraRowService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LinesService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LinesService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: LoaderService, decorators: [{
+                    type: Inject,
+                    args: [LOADER_SERVICE]
+                }] }, { type: KlesForm }, { type: ColumnsService }, { type: RowFormFactory }, { type: ExtraRowService }, { type: EventsService }] });
+class LinesLazyService {
+    constructor(loader, fm, columnsService, rowFactory, extraRowService, paginatorService, eventsService) {
+        this.loader = loader;
+        this.fm = fm;
+        this.columnsService = columnsService;
+        this.rowFactory = rowFactory;
+        this.extraRowService = extraRowService;
+        this.paginatorService = paginatorService;
+        this.eventsService = eventsService;
+        this.destroyRef = inject(DestroyRef);
+        this._refresh$ = new Subject();
+        this._loaded = new EventEmitter();
+    }
+    register() {
+        this.load();
+    }
+    total() {
+        return this._total ?? 0;
+    }
+    loaded() {
+        return this._loaded;
+    }
+    refresh() {
+        this._refresh$.next();
+    }
+    load() {
+        this.loader
+            .load()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((response) => {
+            if (response.loading) {
+                this.eventsService.emit('loadStart');
+            }
+            else {
+                if (response.error) {
+                    this.eventsService.emit('loadError', {
+                        error: response.error,
+                        message: response.error?.message,
+                    });
+                }
+                else {
+                    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));
+                    this.paginatorService.setlength(response.total ?? 0);
+                    this._total = response.total ?? 0;
+                    this._loaded.next();
+                    this.eventsService.emit('loadSuccess', {
+                        total: this._total ?? 0,
+                        values: response.items,
+                        rawValues: this.fm.getRows().getRawValue(),
+                        rows: this.fm.getRows().controls,
+                    });
+                }
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LinesLazyService, deps: [{ token: LOADER_SERVICE }, { token: KlesForm }, { token: ColumnsService }, { token: RowFormFactory }, { token: ExtraRowService }, { token: PaginatorService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LinesLazyService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LinesLazyService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: LoaderLazyService, decorators: [{
+                    type: Inject,
+                    args: [LOADER_SERVICE]
+                }] }, { type: KlesForm }, { type: ColumnsService }, { type: RowFormFactory }, { type: ExtraRowService }, { type: PaginatorService }, { type: EventsService }] });
+
+class LoadingOrchestratorService {
+    constructor(loader, loadingService) {
+        this.loader = loader;
+        this.loadingService = loadingService;
+        this.destroyRef = inject(DestroyRef);
+    }
+    register() {
+        this.listen();
+    }
+    listen() {
+        this.loader
+            .load()
+            .pipe(takeUntilDestroyed(this.destroyRef), map((response) => response.loading ?? false))
+            .subscribe((loading) => {
+            if (loading) {
+                this.loadingService.start();
+            }
+            else {
+                this.loadingService.stop();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoadingOrchestratorService, deps: [{ token: LOADER_SERVICE }, { token: LoadingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoadingOrchestratorService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LoadingOrchestratorService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOADER_SERVICE]
+                }] }, { type: LoadingService }] });
+
+class TableService {
+    constructor(klesForm, columnsService, datasourceService, linesService, headerService, selectionService, loadingOrchestratorService, scrollbarOrchestratorService) {
+        this.klesForm = klesForm;
+        this.columnsService = columnsService;
+        this.datasourceService = datasourceService;
+        this.linesService = linesService;
+        this.headerService = headerService;
+        this.selectionService = selectionService;
+        this.loadingOrchestratorService = loadingOrchestratorService;
+        this.scrollbarOrchestratorService = scrollbarOrchestratorService;
+        this.trackBy = (_, row) => row.get('_id')?.value ?? row;
+        this.orchestrators();
+        this.features();
+    }
+    get ui() {
+        return this.klesForm.ui;
+    }
+    get form() {
+        return this.klesForm.form;
+    }
+    orchestrators() {
+        this.scrollbarOrchestratorService.register();
+        this.loadingOrchestratorService.register();
+    }
+    features() {
+        this.columnsService.register();
+        this.klesForm.init();
+        this.datasourceService.register();
+        this.headerService.register();
+        this.linesService.register();
+        this.selectionService.register();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TableService, deps: [{ token: KlesForm }, { token: ColumnsService }, { token: DATASOURCE_SERVICE }, { token: LINES_SERVICE }, { token: HEADER_SERVICE }, { token: SELECTION_SERVICE }, { token: LoadingOrchestratorService }, { token: SCROLLBAR_ORCHESTRATOR_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TableService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TableService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: KlesForm }, { type: ColumnsService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DATASOURCE_SERVICE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LINES_SERVICE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [HEADER_SERVICE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SELECTION_SERVICE]
+                }] }, { type: LoadingOrchestratorService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SCROLLBAR_ORCHESTRATOR_SERVICE]
+                }] }] });
+
+class ScrollbarOrchestratorService {
+    constructor(linesService, scrollbarService, paginatorService, sortService) {
+        this.linesService = linesService;
+        this.scrollbarService = scrollbarService;
+        this.paginatorService = paginatorService;
+        this.sortService = sortService;
+        this.destroyRef = inject(DestroyRef);
+    }
+    register() {
+        this.listen();
+    }
+    listen() {
+        this.linesService
+            .loaded()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.scrollbarService.toTop('instant');
+        });
+        this.paginatorService
+            ?.pageChanged()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.scrollbarService.toTop('instant');
+        });
+        this.sortService
+            ?.sortChange()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.scrollbarService.toTop('instant');
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScrollbarOrchestratorService, deps: [{ token: LINES_SERVICE }, { token: ScrollbarService }, { token: PaginatorService, optional: true }, { token: SORT_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScrollbarOrchestratorService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScrollbarOrchestratorService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LINES_SERVICE]
+                }] }, { type: ScrollbarService }, { type: PaginatorService, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SORT_SERVICE]
+                }] }] });
+class ScrollbarLazyOrchestratorService {
+    constructor(linesService, scrollbarService) {
+        this.linesService = linesService;
+        this.scrollbarService = scrollbarService;
+        this.destroyRef = inject(DestroyRef);
+    }
+    register() {
+        this.listen();
+    }
+    listen() {
+        this.linesService
+            .loaded()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.scrollbarService.toTop('instant');
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScrollbarLazyOrchestratorService, deps: [{ token: LINES_SERVICE }, { token: ScrollbarService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScrollbarLazyOrchestratorService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScrollbarLazyOrchestratorService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LINES_SERVICE]
+                }] }, { type: ScrollbarService }] });
+
+// import { ScrollbarLazyOrchestratorService, ScrollbarOrchestratorService } from '../services/features/scrollbar/scrollbar-orchestrator.service';
+class DynamicTableLoaderDirective {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+        this.tableConfig = input.required({ ...(ngDevMode ? { debugName: "tableConfig" } : /* istanbul ignore next */ {}), transform: (v) => {
+                v.columns = v.columns.map((col) => {
+                    if (col.headerCell.field) {
+                        col.headerCell.field.subscriptSizing = col.headerCell.field.subscriptSizing ?? 'dynamic';
+                    }
+                    return col;
+                });
+                return v;
+            } });
+        this.componentRef = null;
+        effect(() => {
+            if (this.tableConfig()) {
+                this.loadComponent();
+            }
+            else {
+                this.clearComponent();
+            }
+        });
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this.clearComponent();
+    }
+    loadComponent() {
+        if (this.componentRef) {
+            this.clearComponent();
+        }
+        this.viewContainerRef.clear();
+        let component = TableComponent;
+        if (this.tableConfig().paginator) {
+            component = PaginateTableComponent;
+        }
+        else if (this.tableConfig().infinite) {
+            component = InfiniteScrollTableComponent;
+        }
+        const injector = this.initInjector();
+        this.componentRef = this.viewContainerRef.createComponent(component, {
+            injector,
+        });
+        this.componentRef.onDestroy(() => {
+            if (isDestroyable(injector)) {
+                injector.destroy();
+            }
+        });
+    }
+    clearComponent() {
+        if (this.componentRef) {
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+    }
+    initInjector() {
+        const storeProviders = [SortStore, FilterStore, ...(this.tableConfig().paginator ? [PaginatorStore] : []), ExpandedRowStore];
+        const configProviders = [
+            {
+                provide: COLUMNS,
+                useValue: signal(this.tableConfig().columns || []),
+            },
+            {
+                provide: EXTRA_ROWS,
+                useValue: signal(this.tableConfig().extraRows ?? []),
+            },
+            {
+                provide: FOOTER,
+                useValue: signal(this.tableConfig().footer ?? false),
+            },
+            {
+                provide: LOADER_CONFIG,
+                useValue: {
+                    lazy: this.tableConfig().lazy,
+                    lines: this.tableConfig().lines,
+                },
+            },
+            {
+                provide: SORT_CONFIG,
+                useValue: this.tableConfig().sortConfig,
+            },
+            {
+                provide: SELECTION_CONFIG,
+                useValue: this.tableConfig().selection,
+            },
+            {
+                provide: PAGINATOR_CONFIG,
+                useValue: {
+                    paginator: this.tableConfig().paginator || false,
+                    customMatPaginatorIntl: this.tableConfig().customMatPaginatorIntl,
+                    pageSize: this.tableConfig().pageSize,
+                    pageSizeOptions: this.tableConfig().pageSizeOptions,
+                },
+            },
+            ...(this.tableConfig().customMatPaginatorIntl
+                ? [
+                    {
+                        provide: MatPaginatorIntl,
+                        useClass: this.tableConfig().customMatPaginatorIntl,
+                    },
+                ]
+                : []),
+        ];
+        const orchestratorProviders = [
+            LoadingOrchestratorService,
+            ...(this.tableConfig().lazy
+                ? [
+                    {
+                        provide: SCROLLBAR_ORCHESTRATOR_SERVICE,
+                        useClass: ScrollbarLazyOrchestratorService,
+                    },
+                ]
+                : [
+                    {
+                        provide: SCROLLBAR_ORCHESTRATOR_SERVICE,
+                        useClass: ScrollbarOrchestratorService,
+                    },
+                ]),
+        ];
+        const datasourceProvider = this.tableConfig().lazy
+            ? [
+                {
+                    provide: DATASOURCE_SERVICE,
+                    useClass: DatasourceLazyService,
+                },
+            ]
+            : [
+                {
+                    provide: DATASOURCE_SERVICE,
+                    useClass: DatasourceService,
+                },
+            ];
+        const featureProviders = [
+            TreeService,
+            RenderService,
+            ExtraRowService,
+            LoadingService,
+            KlesForm,
+            ColumnsService,
+            FooterService,
+            ScrollbarService,
+            EventsService,
+            RowService,
+            CellService,
+            CellValueChangeService,
+            ValidationService,
+            SelectionLoaderService,
+            PaginatorService,
+            LoaderChildrensService, //TODO
+            {
+                provide: TABLE_SERVICE,
+                useClass: TableService,
+            },
+            ...(this.tableConfig().lazy
+                ? [
+                    {
+                        provide: HEADER_SERVICE,
+                        useClass: HeaderLazyService,
+                    },
+                    {
+                        provide: LOADER_SERVICE,
+                        useClass: LoaderLazyService,
+                    },
+                    {
+                        provide: LINES_SERVICE,
+                        useClass: LinesLazyService,
+                    },
+                    {
+                        provide: SELECTION_SERVICE,
+                        useClass: SelectionLazyService,
+                    },
+                    {
+                        provide: ROW_DRAG_DROP,
+                        useFactory: () => new DragDropLazyService(this.tableConfig().dragDropRows),
+                    },
+                    {
+                        provide: SORT_SERVICE,
+                        useClass: SortLazyService,
+                    },
+                ]
+                : [
+                    {
+                        provide: LOADER_SERVICE,
+                        useClass: LoaderService,
+                    },
+                    {
+                        provide: HEADER_SERVICE,
+                        useClass: HeaderService,
+                    },
+                    {
+                        provide: LINES_SERVICE,
+                        useClass: LinesService,
+                    },
+                    {
+                        provide: SELECTION_SERVICE,
+                        useClass: SelectionService,
+                    },
+                    FilterService,
+                    {
+                        provide: ROW_DRAG_DROP,
+                        useFactory: (paginatorstore) => new DragDropService(this.tableConfig().dragDropRows, paginatorstore),
+                        deps: [...(this.tableConfig().paginator ? [PaginatorStore] : [])],
+                    },
+                    {
+                        provide: SORT_SERVICE,
+                        useClass: SortService,
+                    },
+                ]),
+        ];
+        const providers = [
+            storeProviders,
+            configProviders,
+            datasourceProvider,
+            featureProviders,
+            orchestratorProviders,
+        ];
+        return Injector.create({
+            parent: this.viewContainerRef.injector,
+            providers,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DynamicTableLoaderDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.19", type: DynamicTableLoaderDirective, isStandalone: true, selector: "[appDynamicTableLoader]", inputs: { tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DynamicTableLoaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appDynamicTableLoader]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { tableConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableConfig", required: true }] }] } });
+
+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 */ []));
+        this.destroyRef = inject(DestroyRef);
+        this.tableEvent = new EventEmitter();
+        this.rowClick = new EventEmitter();
+        this.rowDoubleClick = new EventEmitter();
+        this.rowContextMenu = new EventEmitter();
+        this.cellClick = new EventEmitter();
+        this.cellValueChange = new EventEmitter();
+    }
+    ngOnInit() {
+        this.connectorService.connected$
+            .pipe(takeUntilDestroyed(this.destroyRef), filter((connected) => connected), switchMap(() => {
+            return this.connectorService.events.listen();
+        }))
+            .subscribe((event) => {
+            this.dispatchEvent(event);
+        });
+    }
+    get hostId() {
+        return this.tableConfig()?.id ?? undefined;
+    }
+    refresh() {
+        this.connectorService.refresh();
+    }
+    get scrollbar() {
+        return this.connectorService.scrollbar;
+    }
+    get column() {
+        return this.connectorService.column;
+    }
+    get pagination() {
+        return this.connectorService.pagination;
+    }
+    get sort() {
+        return this.connectorService.sort;
+    }
+    get loading() {
+        return this.connectorService.loading;
+    }
+    get selection() {
+        return this.connectorService.selection;
+    }
+    get form() {
+        return this.connectorService.form;
+    }
+    get footer() {
+        return this.connectorService.footer;
+    }
+    get ui() {
+        return this.connectorService.ui;
+    }
+    dispatchEvent(event) {
+        console.log('event', event);
+        this.tableEvent.emit(event);
+        switch (event.type) {
+            case 'rowClick':
+                this.rowClick.emit(event.payload);
+                break;
+            case 'rowDoubleClick':
+                this.rowDoubleClick.emit(event.payload);
+                break;
+            case 'rowContextMenu':
+                this.rowContextMenu.emit(event.payload);
+                break;
+            case 'cellClick':
+                this.cellClick.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;
+        }
+    }
+    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: "<ng-template appDynamicTableLoader [tableConfig]=\"tableConfig()\"></ng-template>\n", styles: [":host{display:flex;flex-direction:column;max-height:100%;overflow:auto}\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,
+            args: [{ selector: 'kles-dynamic-table', standalone: true, imports: [DynamicTableLoaderDirective], providers: [KlesTableConnectorService], template: "<ng-template appDynamicTableLoader [tableConfig]=\"tableConfig()\"></ng-template>\n", styles: [":host{display:flex;flex-direction:column;max-height:100%;overflow:auto}\n"] }]
+        }], ctorParameters: () => [{ type: KlesTableConnectorService }], propDecorators: { tableConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableConfig", required: true }] }], tableEvent: [{
+                type: Output
+            }], rowClick: [{
+                type: Output
+            }], rowDoubleClick: [{
+                type: Output
+            }], rowContextMenu: [{
+                type: Output
+            }], cellClick: [{
+                type: Output
+            }], cellValueChange: [{
+                type: Output
+            }], hostId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }] } });
+
+const components = [TableComponent];
+const directives = [];
+const pipes = [];
+class KlesMaterialTableModule {
+    static { this.declarations = [components, directives, pipes]; }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesMaterialTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: KlesMaterialTableModule, imports: [CommonModule, TableComponent, KlesTableComponent, KlesMaterialDynamicformsModule], exports: [KlesTableComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesMaterialTableModule, providers: [pipes], imports: [CommonModule, components, KlesMaterialDynamicformsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesMaterialTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, components, KlesTableComponent, KlesMaterialDynamicformsModule],
+                    providers: [pipes],
+                    exports: [pipes, directives, KlesTableComponent],
+                }]
+        }] });
+
+const linesLoader = (l) => l;
+const linesLazyLoader = (l) => l;
+
+const selectionConfig = (l) => l;
+
+var AlignCell;
+(function (AlignCell) {
+    AlignCell["LEFT"] = "left";
+    AlignCell["CENTER"] = "center";
+    AlignCell["RIGHT"] = "right";
+})(AlignCell || (AlignCell = {}));
+
+/*
+ * Public API Surface of kles-material-table
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AlignCell, COLUMNS, DATASOURCE_SERVICE, DRAG_DROP_CONFIG, EXTRA_ROWS, FOOTER, HEADER_SERVICE, KlesMaterialTableModule, KlesTableComponent, 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 };
+//# sourceMappingURL=3kles-kles-material-table-v2.mjs.map