@3kles/kles-material-table-v2 21.1.0 → 21.3.0

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

@@ -1,8 +1,8 @@
-import * as i15 from '@angular/common';
+import * as i16 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 { Pipe, InjectionToken, Injectable, input, computed, HostBinding, Directive, inject, Inject, signal, DestroyRef, Component, ChangeDetectorRef, ChangeDetectionStrategy, Optional, EventEmitter, ViewChild, effect, Injector, Output, NgModule } from '@angular/core';
+import * as i17 from '@angular/forms';
 import { FormControl, FormGroup, FormArray, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
@@ -10,17 +10,17 @@ 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 * as i19 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule, MatTable } from '@angular/material/table';
-import * as i19 from '@angular/cdk/table';
+import * as i20 from '@angular/cdk/table';
 import { CdkTableModule } from '@angular/cdk/table';
-import * as i20 from '@3kles/kles-material-dynamicforms';
+import * as i21 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 * as i22 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import * as i22 from '@angular/material/progress-spinner';
+import * as i23 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { Subject, BehaviorSubject, combineLatest, startWith, of, auditTime, switchMap, concat, catchError, map, filter, take, merge, debounceTime, distinctUntilChanged, scan, concatMap, withLatestFrom, shareReplay } from 'rxjs';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -103,6 +103,7 @@ 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');
+const EMPTY_STATE_CONFIG = new InjectionToken('EMPTY_STATE_CONFIG');
 
 class ResolveNgStylePipe {
     transform(style, value, status, row, rowStatus) {
@@ -447,6 +448,16 @@ class ColumnsService {
     constructor(_columns, eventsService) {
         this._columns = _columns;
         this.eventsService = eventsService;
+        this.stickyStartBoundary = computed(() => {
+            return this.getVisibleColumns()
+                .filter((column) => column.sticky === true)
+                .at(-1)?.columnDef;
+        }, ...(ngDevMode ? [{ debugName: "stickyStartBoundary" }] : /* istanbul ignore next */ []));
+        this.stickyEndBoundary = computed(() => {
+            return this.getVisibleColumns()
+                .filter((column) => column.stickyEnd === true)
+                .at(0)?.columnDef;
+        }, ...(ngDevMode ? [{ debugName: "stickyEndBoundary" }] : /* istanbul ignore next */ []));
     }
     register() {
         this.setDisplayedColumns();
@@ -455,9 +466,7 @@ class ColumnsService {
         return this._columns.asReadonly();
     }
     getVisible() {
-        return this.columns()
-            .filter((column) => column.visible !== false)
-            .map((column) => column.columnDef);
+        return this.getVisibleColumns().map((column) => column.columnDef);
     }
     setVisible(columnDef, visible) {
         this.updateColumn(columnDef, { visible });
@@ -524,19 +533,17 @@ class ColumnsService {
     }
     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);
+            return this.getVisibleColumns().map((column) => column.columnDef);
         }, ...(ngDevMode ? [{ debugName: "displayedColumns" }] : /* istanbul ignore next */ []));
     }
+    getVisibleColumns() {
+        return this._columns().filter((column) => {
+            if (column.visibleWhen !== undefined) {
+                return column.visibleWhen();
+            }
+            return column.visible !== false;
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ColumnsService, deps: [{ token: COLUMNS }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ColumnsService }); }
 }
@@ -802,10 +809,10 @@ class KlesCellComponent {
         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);
+            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);
+            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);
@@ -951,6 +958,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 }]
         }] });
 
+class KlesTableIntl {
+    constructor() {
+        this.changes = new Subject();
+        this.emptyStateTitle = 'No data';
+        this.emptyStateDescription = 'There are no rows to display.';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesTableIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesTableIntl, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesTableIntl, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class KlesTableEmptyStateComponent {
+    constructor() {
+        this.intl = inject(KlesTableIntl);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.destroyRef = inject(DestroyRef);
+        this.intl.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.changeDetectorRef.markForCheck();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesTableEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: KlesTableEmptyStateComponent, isStandalone: true, selector: "kles-table-empty-state", ngImport: i0, template: "<section class=\"empty-state\" role=\"status\" aria-live=\"polite\">\n    <div class=\"empty-state__panel\">\n        <div class=\"empty-state__visual\" aria-hidden=\"true\">\n            <div class=\"empty-state__table-icon\">\n                <span class=\"empty-state__table-header\"></span>\n                <span></span>\n                <span></span>\n                <span></span>\n            </div>\n\n            <div class=\"empty-state__badge\">\n                <mat-icon>remove</mat-icon>\n            </div>\n        </div>\n\n        <div class=\"empty-state__content\">\n            <h2 class=\"empty-state__title\">\n                {{ intl.emptyStateTitle }}\n            </h2>\n\n            <p class=\"empty-state__description\">\n                {{ intl.emptyStateDescription }}\n            </p>\n        </div>\n    </div>\n</section>\n", styles: [":host{display:block;width:100%;height:100%;box-sizing:border-box;--kles-empty-state-accent: var(--mat-sys-primary);--kles-empty-state-accent-container: var(--mat-sys-primary-container)}.empty-state{display:grid;width:100%;height:100%;box-sizing:border-box;place-items:center}.empty-state__panel{display:flex;width:min(100%,31rem);align-items:center;justify-content:center;gap:1.25rem;color:var(--mat-sys-on-surface-variant)}.empty-state__visual{position:relative;display:grid;width:4.5rem;height:4.5rem;flex:0 0 4.5rem;place-items:center;border-radius:1.25rem;background:color-mix(in srgb,var(--kles-empty-state-accent-container) 72%,var(--mat-sys-surface))}.empty-state__table-icon{display:grid;width:2.35rem;height:2.15rem;overflow:hidden;box-sizing:border-box;grid-template-rows:.65rem repeat(3,1fr);border:.125rem solid var(--kles-empty-state-accent);border-radius:.35rem}.empty-state__table-icon span{border-top:1px solid color-mix(in srgb,var(--kles-empty-state-accent) 45%,transparent)}.empty-state__table-icon .empty-state__table-header{border-top:0;background:color-mix(in srgb,var(--kles-empty-state-accent) 24%,transparent)}.empty-state__badge{position:absolute;right:-.2rem;bottom:-.2rem;display:grid;width:1.65rem;height:1.65rem;place-items:center;border:.2rem solid var(--mat-sys-surface);border-radius:50%;color:var(--mat-sys-on-primary);background:var(--kles-empty-state-accent)}.empty-state__badge mat-icon{width:1rem;height:1rem;font-size:1rem;font-weight:700}.empty-state__content{display:grid;max-width:25rem;gap:.3rem;text-align:left}.empty-state__title{margin:0;color:var(--mat-sys-on-surface);font:var(--mat-sys-title-medium)}.empty-state__description{margin:0;font:var(--mat-sys-body-medium);line-height:1.45;text-wrap:balance}@media(max-width:37.5rem){.empty-state__panel{flex-direction:column;gap:.875rem;padding:1.25rem;text-align:center}.empty-state__content{text-align:center}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesTableEmptyStateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-table-empty-state', standalone: true, imports: [MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"empty-state\" role=\"status\" aria-live=\"polite\">\n    <div class=\"empty-state__panel\">\n        <div class=\"empty-state__visual\" aria-hidden=\"true\">\n            <div class=\"empty-state__table-icon\">\n                <span class=\"empty-state__table-header\"></span>\n                <span></span>\n                <span></span>\n                <span></span>\n            </div>\n\n            <div class=\"empty-state__badge\">\n                <mat-icon>remove</mat-icon>\n            </div>\n        </div>\n\n        <div class=\"empty-state__content\">\n            <h2 class=\"empty-state__title\">\n                {{ intl.emptyStateTitle }}\n            </h2>\n\n            <p class=\"empty-state__description\">\n                {{ intl.emptyStateDescription }}\n            </p>\n        </div>\n    </div>\n</section>\n", styles: [":host{display:block;width:100%;height:100%;box-sizing:border-box;--kles-empty-state-accent: var(--mat-sys-primary);--kles-empty-state-accent-container: var(--mat-sys-primary-container)}.empty-state{display:grid;width:100%;height:100%;box-sizing:border-box;place-items:center}.empty-state__panel{display:flex;width:min(100%,31rem);align-items:center;justify-content:center;gap:1.25rem;color:var(--mat-sys-on-surface-variant)}.empty-state__visual{position:relative;display:grid;width:4.5rem;height:4.5rem;flex:0 0 4.5rem;place-items:center;border-radius:1.25rem;background:color-mix(in srgb,var(--kles-empty-state-accent-container) 72%,var(--mat-sys-surface))}.empty-state__table-icon{display:grid;width:2.35rem;height:2.15rem;overflow:hidden;box-sizing:border-box;grid-template-rows:.65rem repeat(3,1fr);border:.125rem solid var(--kles-empty-state-accent);border-radius:.35rem}.empty-state__table-icon span{border-top:1px solid color-mix(in srgb,var(--kles-empty-state-accent) 45%,transparent)}.empty-state__table-icon .empty-state__table-header{border-top:0;background:color-mix(in srgb,var(--kles-empty-state-accent) 24%,transparent)}.empty-state__badge{position:absolute;right:-.2rem;bottom:-.2rem;display:grid;width:1.65rem;height:1.65rem;place-items:center;border:.2rem solid var(--mat-sys-surface);border-radius:50%;color:var(--mat-sys-on-primary);background:var(--kles-empty-state-accent)}.empty-state__badge mat-icon{width:1rem;height:1rem;font-size:1rem;font-weight:700}.empty-state__content{display:grid;max-width:25rem;gap:.3rem;text-align:left}.empty-state__title{margin:0;color:var(--mat-sys-on-surface);font:var(--mat-sys-title-medium)}.empty-state__description{margin:0;font:var(--mat-sys-body-medium);line-height:1.45;text-wrap:balance}@media(max-width:37.5rem){.empty-state__panel{flex-direction:column;gap:.875rem;padding:1.25rem;text-align:center}.empty-state__content{text-align:center}}\n"] }]
+        }], ctorParameters: () => [] });
+
 class KlesTableConnectorService {
     constructor() {
         this._connected$ = new BehaviorSubject(false);
@@ -1147,6 +1187,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
 class ScrollbarService {
     constructor() {
         this.default = 'smooth';
+        this.hiddenClass = 'scrollbar-hidden';
     }
     register(el) {
         this.element = el;
@@ -1154,18 +1195,27 @@ class ScrollbarService {
     unregister() {
         this.element = undefined;
     }
+    setScrollbarVisible(visible) {
+        this.element?.classList.toggle(this.hiddenClass, !visible);
+    }
+    hideScrollbar() {
+        this.setScrollbarVisible(false);
+    }
+    showScrollbar() {
+        this.setScrollbarVisible(true);
+    }
     toTop(sb) {
         this.element?.scrollTo({ top: 0, behavior: sb ?? this.default });
     }
     toBottom(sb) {
-        const top = this.element.scrollHeight;
+        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;
+        const left = this.element?.scrollWidth;
         this.element?.scrollTo({ left, behavior: sb ?? this.default });
     }
     to(top, left, sb) {
@@ -1454,6 +1504,8 @@ class DatasourceService {
         this.cellValueChangeService = cellValueChangeService;
         this.validationService = validationService;
         this.destroyRef = inject(DestroyRef);
+        this._isEmpty = signal(true, ...(ngDevMode ? [{ debugName: "_isEmpty" }] : /* istanbul ignore next */ []));
+        this.isEmpty = this._isEmpty.asReadonly();
     }
     register() {
         this.createDataSource();
@@ -1473,6 +1525,7 @@ class DatasourceService {
             .connect()
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((rows) => {
+            this._isEmpty.set(rows.length === 0);
             this.cellValueChangeService.listen(rows, this.columnsService.getVisible());
             this.validationService.listen(rows, this.columnsService.getVisible());
         });
@@ -1490,6 +1543,8 @@ class DatasourceLazyService {
         this.cellValueChangeService = cellValueChangeService;
         this.validationService = validationService;
         this.destroyRef = inject(DestroyRef);
+        this._isEmpty = signal(true, ...(ngDevMode ? [{ debugName: "_isEmpty" }] : /* istanbul ignore next */ []));
+        this.isEmpty = this._isEmpty.asReadonly();
     }
     register() {
         this.createDataSource();
@@ -1509,6 +1564,7 @@ class DatasourceLazyService {
             .connect()
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((rows) => {
+            this._isEmpty.set(rows.length === 0);
             this.cellValueChangeService.listen(rows, this.columnsService.getVisible());
             this.validationService.listen(rows, this.columnsService.getVisible());
         });
@@ -1707,6 +1763,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: EventsService }] });
 
+class EmptyStateService {
+    constructor(config) {
+        this._enabled = signal(true, ...(ngDevMode ? [{ debugName: "_enabled" }] : /* istanbul ignore next */ []));
+        this.enabled = this._enabled.asReadonly();
+        if (typeof config === 'boolean') {
+            this._enabled.set(config);
+            this.component = KlesTableEmptyStateComponent;
+            return;
+        }
+        this._enabled.set(config?.enabled ?? true);
+        this.component = config?.component ?? KlesTableEmptyStateComponent;
+    }
+    enable() {
+        this._enabled.set(true);
+    }
+    disable() {
+        this._enabled.set(false);
+    }
+    toggle() {
+        this._enabled.update((enabled) => !enabled);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EmptyStateService, deps: [{ token: EMPTY_STATE_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EmptyStateService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EmptyStateService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [EMPTY_STATE_CONFIG]
+                }] }] });
+
 class DragDropBase {
     constructor(config) {
         this.config = config;
@@ -1788,7 +1875,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 }] }] });
 
 class TableComponent {
-    constructor(host, connectorService, loader, datasourceService, tableService, dragDropRowService, selectionService, columnsService, loadingService, paginatorService, scrollbarService, footerService, extraRowService, renderService, sortService, filterService, expandedRowStore, rowFactory, eventsService, rowService, cellService) {
+    constructor(host, connectorService, loader, datasourceService, tableService, dragDropRowService, selectionService, columnsService, loadingService, paginatorService, scrollbarService, footerService, extraRowService, renderService, sortService, filterService, expandedRowStore, rowFactory, eventsService, rowService, cellService, emptyStateService) {
         this.host = host;
         this.connectorService = connectorService;
         this.loader = loader;
@@ -1810,14 +1897,17 @@ class TableComponent {
         this.eventsService = eventsService;
         this.rowService = rowService;
         this.cellService = cellService;
+        this.emptyStateService = emptyStateService;
         this.headerHeightPx = 56;
         this.scrollHeightPx = 0;
         this.footerHeightPx = 0;
         this.destroyRef = inject(DestroyRef);
+        this.emptyStateComponent = KlesTableEmptyStateComponent;
         this.columns = this.columnsService.columns;
         this.displayedColumns = this.columnsService.displayedColumns;
         this.showFooter = this.footerService.footer;
         this.dataSource = this.datasourceService.datasource;
+        this.isEmpty = this.datasourceService.isEmpty;
         this.multiTemplateDataRows = this.extraRowService.multiTemplateDataRows;
         this.extraRows = this.extraRowService.rows;
         this.connectorService.connect(this);
@@ -1826,6 +1916,9 @@ class TableComponent {
     get isLoadingClass() {
         return this.loadingService.loading();
     }
+    get isEmptyClass() {
+        return this.isEmpty() && this.emptyStateService.enabled();
+    }
     get events() {
         return {
             listen: () => this.eventsService.events$,
@@ -1962,21 +2055,62 @@ class TableComponent {
         // TODO
     }
     getColumnSeparator(column, section) {
-        if (!column.separator) {
+        const separatorConfig = column.separator;
+        if (separatorConfig === false || separatorConfig === undefined) {
             return null;
         }
-        const config = column.separator === true ? {} : column.separator;
+        const config = separatorConfig === true ? {} : separatorConfig;
         if (config[section] === false) {
             return null;
         }
         const displayedColumns = this.displayedColumns?.() ?? [];
-        const isLastColumn = displayedColumns.at(-1) === column.columnDef;
+        const currentIndex = displayedColumns.indexOf(column.columnDef);
+        const nextColumnDef = displayedColumns[currentIndex + 1];
+        const nextColumn = this.columns().find((current) => current.columnDef === nextColumnDef);
+        const isLastColumn = currentIndex === displayedColumns.length - 1;
+        if (column.stickyEnd === true && !(isLastColumn && config.showAfterLastColumn === true)) {
+            return null;
+        }
+        if (nextColumn?.stickyEnd === true) {
+            return null;
+        }
         if (isLastColumn && config.showAfterLastColumn !== true) {
             return null;
         }
+        return this.getSeparatorStyle(column, section);
+    }
+    getStickyStartSeparator(column, section) {
+        const isBoundary = this.columnsService.stickyStartBoundary() === column.columnDef;
+        if (!isBoundary) {
+            return null;
+        }
+        return this.getColumnSeparator(column, section);
+    }
+    // getStickyEndSeparator(column: KlesColumnConfig, section: TableSection): string | null {
+    //     const isBoundary = this.columnsService.stickyEndBoundary() === column.columnDef;
+    //     if (!isBoundary) {
+    //         return null;
+    //     }
+    //     return this.getSeparatorStyle(column, section);
+    // }
+    getStickyEndSeparator(column, section) {
+        if (column.stickyEnd !== true) {
+            return null;
+        }
+        return this.getSeparatorStyle(column, section);
+    }
+    getSeparatorStyle(column, section) {
+        const separatorConfig = column.separator;
+        if (separatorConfig === false || separatorConfig === undefined) {
+            return null;
+        }
+        const config = separatorConfig === true ? {} : separatorConfig;
+        if (config[section] === false) {
+            return null;
+        }
         const width = config.width ?? '1px';
         const style = config.style ?? 'solid';
-        const color = config.color ?? 'rgba(196, 198, 208, 1)';
+        const color = config.color ?? 'var(--kles-table-divider-color)';
         return `${width} ${style} ${color}`;
     }
     calculHeaderHeight() {
@@ -2021,8 +2155,8 @@ class TableComponent {
             };
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TableComponent, deps: [{ token: i0.ElementRef }, { token: KlesTableConnectorService }, { token: LOADER_SERVICE }, { token: DATASOURCE_SERVICE }, { token: TABLE_SERVICE }, { token: ROW_DRAG_DROP }, { token: SELECTION_SERVICE }, { token: ColumnsService }, { token: LoadingService }, { token: PaginatorService }, { token: ScrollbarService }, { token: FooterService }, { token: ExtraRowService }, { token: RenderService }, { token: SORT_SERVICE }, { token: FilterService, optional: true }, { token: ExpandedRowStore }, { token: RowFormFactory }, { token: EventsService }, { token: RowService }, { token: CellService }], 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                    [style.border-inline-end]=\"getColumnSeparator(column, 'header')\"\n                    [ngStyle]=\"\n                        column.headerCell?.style?.ngStyle\n                            | resolveNgStyle\n                                : tableService.form.get(['header', column.columnDef])?.value\n                                : tableService.form.get(['header', column.columnDef])?.status\n                                : tableService.form.controls.header.value\n                                : tableService.form.controls.header.status\n                    \"\n                >\n                    <div class=\"cell\">\n                        <kles-header [header]=\"column | header\" [group]=\"tableService.form.controls.header\">\n                            <ng-container\n                                klesDynamicField\n                                [field]=\"column | headerField\"\n                                [group]=\"tableService.form.controls.header\"\n                                [ui]=\"tableService.ui.states.header\"\n                            ></ng-container>\n                        </kles-header>\n                    </div>\n                </th>\n\n                <td\n                    mat-cell\n                    *cdkCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'body')\"\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                    [style.border-inline-end]=\"getColumnSeparator(column, 'footer')\"\n                    [ngStyle]=\"\n                        column.footerCell?.style?.ngStyle\n                            | resolveNgStyle\n                                : tableService.form.get(['footer', column.columnDef])?.value\n                                : tableService.form.get(['footer', column.columnDef])?.status\n                                : tableService.form.controls.footer.value\n                                : tableService.form.controls.footer.status\n                    \"\n                >\n                    @if (column.footerCell) {\n                        <ng-container\n                            klesDynamicField\n                            [field]=\"column | footerField\"\n                            [group]=\"tableService.form.controls.footer\"\n                            [ui]=\"tableService.ui.states.footer\"\n                        >\n                        </ng-container>\n                    }\n                </td>\n            </ng-container>\n        }\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: true\"></tr>\n\n        <tr\n            mat-row\n            *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns()\"\n            cdkDrag\n            [cdkDragData]=\"row\"\n            (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n            (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n            (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n            (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n            (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n        ></tr>\n\n        @if (multiTemplateDataRows()) {\n            @for (extraRow of extraRows(); track extraRow) {\n                @for (extraColumn of extraRow.cells; track extraColumn.columnDef) {\n                    <ng-container [cdkColumnDef]=\"extraColumn.columnDef\">\n                        <td\n                            mat-cell\n                            *cdkCellDef=\"let row\"\n                            [attr.colspan]=\"extraColumn.colspan | spanPipe: displayedColumns().length\"\n                            [attr.rowspan]=\"extraColumn.rowspan\"\n                            [ngStyle]=\"\n                                extraColumn?.style?.ngStyle\n                                    | resolveNgStyle\n                                        : row.controls[extraColumn.columnDef].value\n                                        : row.controls[extraColumn.columnDef].status\n                                        : row.value\n                                        : row.status\n                            \"\n                        >\n                            <ng-container klesDynamicField [field]=\"extraColumn | extraCellField\" [group]=\"row\" [ui]=\"row | uiField\"></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{--kles-table-divider-color: color-mix(in srgb, var(--mat-sys-outline-variant) 65%, transparent);--kles-table-divider-strong-color: var(--mat-sys-outline-variant);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}th,td{text-wrap:pretty;white-space:normal;padding-top:2px;padding-bottom:2px;box-sizing:border-box}td{word-break:normal}th .cell,td .cell{display:flex;flex-direction:column;justify-content:var(--align, center)}th[appResizableColumn]{position:relative}th[appResizableColumn] .resize-handle{position:absolute;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none}.table-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));display:grid;place-items:center;background:color-mix(in srgb,var(--mat-sys-surface-container-highest) 75%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-outline-variant) 30%,transparent);z-index:500}:host .mat-mdc-row{transition:background-color .12s ease}:host .mat-mdc-row:hover{background:var(--mat-sys-surface-container-low)}:host .mat-mdc-table .mat-mdc-cell,:host .mat-mdc-table .mat-mdc-header-cell{border-bottom-color:var(--mat-sys-outline-variant)}:host .mat-mdc-table .mat-mdc-cell:last-child,:host .mat-mdc-table .mat-mdc-header-cell:last-child{border-right:none}:host tr.mat-mdc-footer-row td.mat-mdc-footer-cell{border-top:1px solid var(--kles-table-divider-strong-color)}:host tr.mat-mdc-row:last-of-type td.mat-mdc-cell{border-bottom:1px solid var(--kles-table-divider-color)}:host tr.mat-mdc-footer-row{font-weight:500}\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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TableComponent, deps: [{ token: i0.ElementRef }, { token: KlesTableConnectorService }, { token: LOADER_SERVICE }, { token: DATASOURCE_SERVICE }, { token: TABLE_SERVICE }, { token: ROW_DRAG_DROP }, { token: SELECTION_SERVICE }, { token: ColumnsService }, { token: LoadingService }, { token: PaginatorService }, { token: ScrollbarService }, { token: FooterService }, { token: ExtraRowService }, { token: RenderService }, { token: SORT_SERVICE }, { token: FilterService, optional: true }, { token: ExpandedRowStore }, { token: RowFormFactory }, { token: EventsService }, { token: RowService }, { token: CellService }, { token: EmptyStateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: TableComponent, isStandalone: true, selector: "kles-table", host: { properties: { "class.loading": "this.isLoadingClass", "class.empty": "this.isEmptyClass" } }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "formElemRef", first: true, predicate: ["form"], descendants: true, static: true }], ngImport: i0, template: "<form #form [formGroup]=\"tableService.form\" (ngSubmit)=\"submit()\">\n    <!-- [fixedLayout]=\"true\" -->\n    <table\n        mat-table\n        [dataSource]=\"dataSource\"\n        matSort\n        [trackBy]=\"multiTemplateDataRows() ? null : tableService.trackBy\"\n        formArrayName=\"rows\"\n        cdkDropList\n        [cdkDropListData]=\"tableService.form.controls.rows\"\n        (cdkDropListDropped)=\"dragDropRowService.listDropped($event)\"\n        [cdkDropListDisabled]=\"!dragDropRowService.enable\"\n        [cdkDropListAutoScrollStep]=\"dragDropRowService.autoScrollStep\"\n        [cdkDropListSortPredicate]=\"dragDropRowService.sortPredicate\"\n        [cdkDropListConnectedTo]=\"dragDropRowService.connectedTo\"\n        [multiTemplateDataRows]=\"multiTemplateDataRows()\"\n    >\n        <colgroup>\n            @for (column of columns(); track column.columnDef) {\n                <col [style.width]=\"column.width ?? null\" [style.minWidth]=\"column.minWidth ?? null\" [style.maxWidth]=\"column.maxWidth ?? null\" />\n            }\n        </colgroup>\n\n        @for (column of columns(); track column.columnDef) {\n            <ng-container [cdkColumnDef]=\"column.columnDef\" [sticky]=\"column.sticky ?? false\" [stickyEnd]=\"column.stickyEnd ?? false\">\n                <th\n                    mat-header-cell\n                    *matHeaderCellDef\n                    [appResizableColumn]=\"column\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'header') ?? getStickyStartSeparator(column, 'header')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'header')\"\n                    [ngStyle]=\"\n                        column.headerCell?.style?.ngStyle\n                            | resolveNgStyle\n                                : tableService.form.get(['header', column.columnDef])?.value\n                                : tableService.form.get(['header', column.columnDef])?.status\n                                : tableService.form.controls.header.value\n                                : tableService.form.controls.header.status\n                    \"\n                >\n                    <div class=\"cell\">\n                        <kles-header [header]=\"column | header\" [group]=\"tableService.form.controls.header\">\n                            <ng-container\n                                klesDynamicField\n                                [field]=\"column | headerField\"\n                                [group]=\"tableService.form.controls.header\"\n                                [ui]=\"tableService.ui.states.header\"\n                            ></ng-container>\n                        </kles-header>\n                    </div>\n                </th>\n\n                <td\n                    mat-cell\n                    *cdkCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'body') ?? getStickyStartSeparator(column, 'body')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'body')\"\n                    [ngStyle]=\"\n                        column.cell?.style?.ngStyle\n                            | resolveNgStyle: row.controls[column.columnDef].value : row.controls[column.columnDef].status : row.value : row.status\n                    \"\n                    (click)=\"cellService.onClick($event, row, dataIndex ?? index, column.columnDef)\"\n                    (dblclick)=\"cellService.onDoubleClick($event, row, dataIndex ?? index, column.columnDef)\"\n                    (contextmenu)=\"cellService.onContextMenu($event, row, dataIndex ?? index, column.columnDef)\"\n                >\n                    <div class=\"cell\" [style.--align]=\"column.align\">\n                        <kles-cell [group]=\"row\" [ui]=\"row | uiField\" [column]=\"column\">\n                            <ng-container klesDynamicField [field]=\"column | cellField\" [group]=\"row\" [ui]=\"row | uiField\"></ng-container>\n                        </kles-cell>\n                    </div>\n                </td>\n\n                <td\n                    mat-footer-cell\n                    *matFooterCellDef\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'footer') ?? getStickyStartSeparator(column, 'footer')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'footer')\"\n                    [ngStyle]=\"\n                        column.footerCell?.style?.ngStyle\n                            | resolveNgStyle\n                                : tableService.form.get(['footer', column.columnDef])?.value\n                                : tableService.form.get(['footer', column.columnDef])?.status\n                                : tableService.form.controls.footer.value\n                                : tableService.form.controls.footer.status\n                    \"\n                >\n                    @if (column.footerCell) {\n                        <ng-container\n                            klesDynamicField\n                            [field]=\"column | footerField\"\n                            [group]=\"tableService.form.controls.footer\"\n                            [ui]=\"tableService.ui.states.footer\"\n                        >\n                        </ng-container>\n                    }\n                </td>\n            </ng-container>\n        }\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: true\"></tr>\n\n        <tr\n            mat-row\n            *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns()\"\n            cdkDrag\n            [cdkDragData]=\"row\"\n            (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n            (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n            (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n            (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n            (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n        ></tr>\n\n        @if (multiTemplateDataRows()) {\n            @for (extraRow of extraRows(); track extraRow) {\n                @for (extraColumn of extraRow.cells; track extraColumn.columnDef) {\n                    <ng-container [cdkColumnDef]=\"extraColumn.columnDef\">\n                        <td\n                            mat-cell\n                            *cdkCellDef=\"let row\"\n                            [attr.colspan]=\"extraColumn.colspan | spanPipe: displayedColumns().length\"\n                            [attr.rowspan]=\"extraColumn.rowspan\"\n                            [ngStyle]=\"\n                                extraColumn?.style?.ngStyle\n                                    | resolveNgStyle\n                                        : row.controls[extraColumn.columnDef].value\n                                        : row.controls[extraColumn.columnDef].status\n                                        : row.value\n                                        : row.status\n                            \"\n                        >\n                            <ng-container klesDynamicField [field]=\"extraColumn | extraCellField\" [group]=\"row\" [ui]=\"row | uiField\"></ng-container>\n                        </td>\n                    </ng-container>\n                }\n                <tr\n                    mat-row\n                    *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: extraRow.displayedColumns; when: extraRow.when\"\n                    (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n                    (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n                    (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n                    (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n                    (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n                ></tr>\n            }\n        }\n\n        <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\" [style.display]=\"showFooter() ? '' : 'none'\"></tr>\n    </table>\n</form>\n\n@if (loadingService.loading()) {\n    <div class=\"table-overlay\" [style.--header-h.px]=\"headerHeightPx\" [style.--scroll-h.px]=\"scrollHeightPx\" [style.--footer-h.px]=\"footerHeightPx\">\n        <mat-spinner></mat-spinner>\n    </div>\n}\n\n@if (emptyStateService.enabled() && !loadingService.loading() && isEmpty()) {\n    <div\n        class=\"table-empty-state-overlay\"\n        [style.--header-h.px]=\"headerHeightPx\"\n        [style.--scroll-h.px]=\"scrollHeightPx\"\n        [style.--footer-h.px]=\"footerHeightPx\"\n    >\n        <div class=\"table-empty-state-content\">\n            <ng-container *ngComponentOutlet=\"emptyStateService.component\"></ng-container>\n        </div>\n    </div>\n}\n", styles: [":host{--kles-table-divider-color: color-mix(in srgb, var(--mat-sys-outline-variant) 65%, transparent);--kles-table-divider-strong-color: var(--mat-sys-outline-variant);--kles-table-header-background: var(--mat-sys-surface-container-low);--kles-table-header-color: var(--mat-sys-on-surface);--kles-table-header-divider-color: var(--mat-sys-outline-variant);--kles-table-row-hover-background: color-mix(in srgb, var(--mat-sys-primary) 7%, var(--mat-sys-surface));overflow:auto;display:flex;flex-direction:column;position:relative;height:100%;--mat-form-field-filled-container-color: transparent;--mat-form-field-hover-state-layer-opacity: 0;--mat-form-field-focus-state-layer-opacity: 0;--mat-form-field-state-layer-color: transparent}:host(.loading),:host(.empty){min-height:280px}form{display:flex;flex-direction:column;flex-grow:1;position:relative;overflow:auto}table{width:100%;flex-grow:1}th,td{text-wrap:pretty;white-space:normal;padding-top:2px;padding-bottom:2px;box-sizing:border-box}td{word-break:normal}th .cell,td .cell{display:flex;flex-direction:column;justify-content:var(--align, center)}th[appResizableColumn]{position:relative}th[appResizableColumn] .resize-handle{position:absolute;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none}.table-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));display:grid;place-items:center;background:color-mix(in srgb,var(--mat-sys-surface-container-highest) 75%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-outline-variant) 30%,transparent);z-index:500}:host .mat-mdc-row{transition:background-color .12s ease}:host .mat-mdc-row:hover{background:var(--kles-table-row-hover-background)}:host .mat-mdc-table .mat-mdc-cell,:host .mat-mdc-table .mat-mdc-header-cell{border-bottom-color:var(--mat-sys-outline-variant)}:host .mat-mdc-table .mat-mdc-cell:last-child,:host .mat-mdc-table .mat-mdc-header-cell:last-child{border-right:none}:host tr.mat-mdc-footer-row td.mat-mdc-footer-cell{border-top:1px solid var(--kles-table-divider-strong-color)}:host tr.mat-mdc-row:last-of-type td.mat-mdc-cell{border-bottom:1px solid var(--kles-table-divider-color)}:host tr.mat-mdc-footer-row{font-weight:500}:host .mat-mdc-header-row,:host .mat-mdc-header-cell{background-color:var(--kles-table-header-background);color:var(--kles-table-header-color)}:host .mat-mdc-header-cell{border-bottom-color:var(--kles-table-header-divider-color)}.table-empty-state-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));z-index:400;overflow:hidden;background:var(--mat-sys-surface);display:grid;place-items:center}.table-empty-state-content{width:100%;height:100%}.scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none;overflow-y:hidden}.scrollbar-hidden::-webkit-scrollbar{display:none;overflow-y:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i16.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i16.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i17.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i17.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i17.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i17.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i19.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i19.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i19.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i19.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i19.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i19.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i19.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i19.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i19.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i19.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i19.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i19.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: CdkTableModule }, { kind: "directive", type: i20.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i20.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "ngmodule", type: KlesMaterialDynamicformsModule }, { kind: "directive", type: i21.KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i22.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i22.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i23.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: ResizableColumnDirective, selector: "th[appResizableColumn]", inputs: ["appResizableColumn"] }, { kind: "component", type: KlesCellComponent, selector: "kles-cell", inputs: ["ui", "group", "column"] }, { kind: "component", type: KlesHeaderComponent, selector: "kles-header", inputs: ["header", "group"] }, { kind: "pipe", type: HeaderFieldPipe, name: "headerField" }, { kind: "pipe", type: CellFieldPipe, name: "cellField" }, { kind: "pipe", type: UiFieldPipe, name: "uiField" }, { kind: "pipe", type: FooterFieldPipe, name: "footerField" }, { kind: "pipe", type: SpanPipe, name: "spanPipe" }, { kind: "pipe", type: ExtraCellFieldPipe, name: "extraCellField" }, { kind: "pipe", type: ResolveNgStylePipe, name: "resolveNgStyle" }, { kind: "pipe", type: HeaderPipe, name: "header" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -2051,7 +2185,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         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                    [style.border-inline-end]=\"getColumnSeparator(column, 'header')\"\n                    [ngStyle]=\"\n                        column.headerCell?.style?.ngStyle\n                            | resolveNgStyle\n                                : tableService.form.get(['header', column.columnDef])?.value\n                                : tableService.form.get(['header', column.columnDef])?.status\n                                : tableService.form.controls.header.value\n                                : tableService.form.controls.header.status\n                    \"\n                >\n                    <div class=\"cell\">\n                        <kles-header [header]=\"column | header\" [group]=\"tableService.form.controls.header\">\n                            <ng-container\n                                klesDynamicField\n                                [field]=\"column | headerField\"\n                                [group]=\"tableService.form.controls.header\"\n                                [ui]=\"tableService.ui.states.header\"\n                            ></ng-container>\n                        </kles-header>\n                    </div>\n                </th>\n\n                <td\n                    mat-cell\n                    *cdkCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'body')\"\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                    [style.border-inline-end]=\"getColumnSeparator(column, 'footer')\"\n                    [ngStyle]=\"\n                        column.footerCell?.style?.ngStyle\n                            | resolveNgStyle\n                                : tableService.form.get(['footer', column.columnDef])?.value\n                                : tableService.form.get(['footer', column.columnDef])?.status\n                                : tableService.form.controls.footer.value\n                                : tableService.form.controls.footer.status\n                    \"\n                >\n                    @if (column.footerCell) {\n                        <ng-container\n                            klesDynamicField\n                            [field]=\"column | footerField\"\n                            [group]=\"tableService.form.controls.footer\"\n                            [ui]=\"tableService.ui.states.footer\"\n                        >\n                        </ng-container>\n                    }\n                </td>\n            </ng-container>\n        }\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: true\"></tr>\n\n        <tr\n            mat-row\n            *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns()\"\n            cdkDrag\n            [cdkDragData]=\"row\"\n            (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n            (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n            (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n            (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n            (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n        ></tr>\n\n        @if (multiTemplateDataRows()) {\n            @for (extraRow of extraRows(); track extraRow) {\n                @for (extraColumn of extraRow.cells; track extraColumn.columnDef) {\n                    <ng-container [cdkColumnDef]=\"extraColumn.columnDef\">\n                        <td\n                            mat-cell\n                            *cdkCellDef=\"let row\"\n                            [attr.colspan]=\"extraColumn.colspan | spanPipe: displayedColumns().length\"\n                            [attr.rowspan]=\"extraColumn.rowspan\"\n                            [ngStyle]=\"\n                                extraColumn?.style?.ngStyle\n                                    | resolveNgStyle\n                                        : row.controls[extraColumn.columnDef].value\n                                        : row.controls[extraColumn.columnDef].status\n                                        : row.value\n                                        : row.status\n                            \"\n                        >\n                            <ng-container klesDynamicField [field]=\"extraColumn | extraCellField\" [group]=\"row\" [ui]=\"row | uiField\"></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{--kles-table-divider-color: color-mix(in srgb, var(--mat-sys-outline-variant) 65%, transparent);--kles-table-divider-strong-color: var(--mat-sys-outline-variant);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}th,td{text-wrap:pretty;white-space:normal;padding-top:2px;padding-bottom:2px;box-sizing:border-box}td{word-break:normal}th .cell,td .cell{display:flex;flex-direction:column;justify-content:var(--align, center)}th[appResizableColumn]{position:relative}th[appResizableColumn] .resize-handle{position:absolute;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none}.table-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));display:grid;place-items:center;background:color-mix(in srgb,var(--mat-sys-surface-container-highest) 75%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-outline-variant) 30%,transparent);z-index:500}:host .mat-mdc-row{transition:background-color .12s ease}:host .mat-mdc-row:hover{background:var(--mat-sys-surface-container-low)}:host .mat-mdc-table .mat-mdc-cell,:host .mat-mdc-table .mat-mdc-header-cell{border-bottom-color:var(--mat-sys-outline-variant)}:host .mat-mdc-table .mat-mdc-cell:last-child,:host .mat-mdc-table .mat-mdc-header-cell:last-child{border-right:none}:host tr.mat-mdc-footer-row td.mat-mdc-footer-cell{border-top:1px solid var(--kles-table-divider-strong-color)}:host tr.mat-mdc-row:last-of-type td.mat-mdc-cell{border-bottom:1px solid var(--kles-table-divider-color)}:host tr.mat-mdc-footer-row{font-weight:500}\n"] }]
+                    ], template: "<form #form [formGroup]=\"tableService.form\" (ngSubmit)=\"submit()\">\n    <!-- [fixedLayout]=\"true\" -->\n    <table\n        mat-table\n        [dataSource]=\"dataSource\"\n        matSort\n        [trackBy]=\"multiTemplateDataRows() ? null : tableService.trackBy\"\n        formArrayName=\"rows\"\n        cdkDropList\n        [cdkDropListData]=\"tableService.form.controls.rows\"\n        (cdkDropListDropped)=\"dragDropRowService.listDropped($event)\"\n        [cdkDropListDisabled]=\"!dragDropRowService.enable\"\n        [cdkDropListAutoScrollStep]=\"dragDropRowService.autoScrollStep\"\n        [cdkDropListSortPredicate]=\"dragDropRowService.sortPredicate\"\n        [cdkDropListConnectedTo]=\"dragDropRowService.connectedTo\"\n        [multiTemplateDataRows]=\"multiTemplateDataRows()\"\n    >\n        <colgroup>\n            @for (column of columns(); track column.columnDef) {\n                <col [style.width]=\"column.width ?? null\" [style.minWidth]=\"column.minWidth ?? null\" [style.maxWidth]=\"column.maxWidth ?? null\" />\n            }\n        </colgroup>\n\n        @for (column of columns(); track column.columnDef) {\n            <ng-container [cdkColumnDef]=\"column.columnDef\" [sticky]=\"column.sticky ?? false\" [stickyEnd]=\"column.stickyEnd ?? false\">\n                <th\n                    mat-header-cell\n                    *matHeaderCellDef\n                    [appResizableColumn]=\"column\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'header') ?? getStickyStartSeparator(column, 'header')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'header')\"\n                    [ngStyle]=\"\n                        column.headerCell?.style?.ngStyle\n                            | resolveNgStyle\n                                : tableService.form.get(['header', column.columnDef])?.value\n                                : tableService.form.get(['header', column.columnDef])?.status\n                                : tableService.form.controls.header.value\n                                : tableService.form.controls.header.status\n                    \"\n                >\n                    <div class=\"cell\">\n                        <kles-header [header]=\"column | header\" [group]=\"tableService.form.controls.header\">\n                            <ng-container\n                                klesDynamicField\n                                [field]=\"column | headerField\"\n                                [group]=\"tableService.form.controls.header\"\n                                [ui]=\"tableService.ui.states.header\"\n                            ></ng-container>\n                        </kles-header>\n                    </div>\n                </th>\n\n                <td\n                    mat-cell\n                    *cdkCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'body') ?? getStickyStartSeparator(column, 'body')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'body')\"\n                    [ngStyle]=\"\n                        column.cell?.style?.ngStyle\n                            | resolveNgStyle: row.controls[column.columnDef].value : row.controls[column.columnDef].status : row.value : row.status\n                    \"\n                    (click)=\"cellService.onClick($event, row, dataIndex ?? index, column.columnDef)\"\n                    (dblclick)=\"cellService.onDoubleClick($event, row, dataIndex ?? index, column.columnDef)\"\n                    (contextmenu)=\"cellService.onContextMenu($event, row, dataIndex ?? index, column.columnDef)\"\n                >\n                    <div class=\"cell\" [style.--align]=\"column.align\">\n                        <kles-cell [group]=\"row\" [ui]=\"row | uiField\" [column]=\"column\">\n                            <ng-container klesDynamicField [field]=\"column | cellField\" [group]=\"row\" [ui]=\"row | uiField\"></ng-container>\n                        </kles-cell>\n                    </div>\n                </td>\n\n                <td\n                    mat-footer-cell\n                    *matFooterCellDef\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'footer') ?? getStickyStartSeparator(column, 'footer')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'footer')\"\n                    [ngStyle]=\"\n                        column.footerCell?.style?.ngStyle\n                            | resolveNgStyle\n                                : tableService.form.get(['footer', column.columnDef])?.value\n                                : tableService.form.get(['footer', column.columnDef])?.status\n                                : tableService.form.controls.footer.value\n                                : tableService.form.controls.footer.status\n                    \"\n                >\n                    @if (column.footerCell) {\n                        <ng-container\n                            klesDynamicField\n                            [field]=\"column | footerField\"\n                            [group]=\"tableService.form.controls.footer\"\n                            [ui]=\"tableService.ui.states.footer\"\n                        >\n                        </ng-container>\n                    }\n                </td>\n            </ng-container>\n        }\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: true\"></tr>\n\n        <tr\n            mat-row\n            *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns()\"\n            cdkDrag\n            [cdkDragData]=\"row\"\n            (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n            (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n            (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n            (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n            (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n        ></tr>\n\n        @if (multiTemplateDataRows()) {\n            @for (extraRow of extraRows(); track extraRow) {\n                @for (extraColumn of extraRow.cells; track extraColumn.columnDef) {\n                    <ng-container [cdkColumnDef]=\"extraColumn.columnDef\">\n                        <td\n                            mat-cell\n                            *cdkCellDef=\"let row\"\n                            [attr.colspan]=\"extraColumn.colspan | spanPipe: displayedColumns().length\"\n                            [attr.rowspan]=\"extraColumn.rowspan\"\n                            [ngStyle]=\"\n                                extraColumn?.style?.ngStyle\n                                    | resolveNgStyle\n                                        : row.controls[extraColumn.columnDef].value\n                                        : row.controls[extraColumn.columnDef].status\n                                        : row.value\n                                        : row.status\n                            \"\n                        >\n                            <ng-container klesDynamicField [field]=\"extraColumn | extraCellField\" [group]=\"row\" [ui]=\"row | uiField\"></ng-container>\n                        </td>\n                    </ng-container>\n                }\n                <tr\n                    mat-row\n                    *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: extraRow.displayedColumns; when: extraRow.when\"\n                    (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n                    (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n                    (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n                    (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n                    (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n                ></tr>\n            }\n        }\n\n        <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\" [style.display]=\"showFooter() ? '' : 'none'\"></tr>\n    </table>\n</form>\n\n@if (loadingService.loading()) {\n    <div class=\"table-overlay\" [style.--header-h.px]=\"headerHeightPx\" [style.--scroll-h.px]=\"scrollHeightPx\" [style.--footer-h.px]=\"footerHeightPx\">\n        <mat-spinner></mat-spinner>\n    </div>\n}\n\n@if (emptyStateService.enabled() && !loadingService.loading() && isEmpty()) {\n    <div\n        class=\"table-empty-state-overlay\"\n        [style.--header-h.px]=\"headerHeightPx\"\n        [style.--scroll-h.px]=\"scrollHeightPx\"\n        [style.--footer-h.px]=\"footerHeightPx\"\n    >\n        <div class=\"table-empty-state-content\">\n            <ng-container *ngComponentOutlet=\"emptyStateService.component\"></ng-container>\n        </div>\n    </div>\n}\n", styles: [":host{--kles-table-divider-color: color-mix(in srgb, var(--mat-sys-outline-variant) 65%, transparent);--kles-table-divider-strong-color: var(--mat-sys-outline-variant);--kles-table-header-background: var(--mat-sys-surface-container-low);--kles-table-header-color: var(--mat-sys-on-surface);--kles-table-header-divider-color: var(--mat-sys-outline-variant);--kles-table-row-hover-background: color-mix(in srgb, var(--mat-sys-primary) 7%, var(--mat-sys-surface));overflow:auto;display:flex;flex-direction:column;position:relative;height:100%;--mat-form-field-filled-container-color: transparent;--mat-form-field-hover-state-layer-opacity: 0;--mat-form-field-focus-state-layer-opacity: 0;--mat-form-field-state-layer-color: transparent}:host(.loading),:host(.empty){min-height:280px}form{display:flex;flex-direction:column;flex-grow:1;position:relative;overflow:auto}table{width:100%;flex-grow:1}th,td{text-wrap:pretty;white-space:normal;padding-top:2px;padding-bottom:2px;box-sizing:border-box}td{word-break:normal}th .cell,td .cell{display:flex;flex-direction:column;justify-content:var(--align, center)}th[appResizableColumn]{position:relative}th[appResizableColumn] .resize-handle{position:absolute;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none}.table-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));display:grid;place-items:center;background:color-mix(in srgb,var(--mat-sys-surface-container-highest) 75%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-outline-variant) 30%,transparent);z-index:500}:host .mat-mdc-row{transition:background-color .12s ease}:host .mat-mdc-row:hover{background:var(--kles-table-row-hover-background)}:host .mat-mdc-table .mat-mdc-cell,:host .mat-mdc-table .mat-mdc-header-cell{border-bottom-color:var(--mat-sys-outline-variant)}:host .mat-mdc-table .mat-mdc-cell:last-child,:host .mat-mdc-table .mat-mdc-header-cell:last-child{border-right:none}:host tr.mat-mdc-footer-row td.mat-mdc-footer-cell{border-top:1px solid var(--kles-table-divider-strong-color)}:host tr.mat-mdc-row:last-of-type td.mat-mdc-cell{border-bottom:1px solid var(--kles-table-divider-color)}:host tr.mat-mdc-footer-row{font-weight:500}:host .mat-mdc-header-row,:host .mat-mdc-header-cell{background-color:var(--kles-table-header-background);color:var(--kles-table-header-color)}:host .mat-mdc-header-cell{border-bottom-color:var(--kles-table-header-divider-color)}.table-empty-state-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));z-index:400;overflow:hidden;background:var(--mat-sys-surface);display:grid;place-items:center}.table-empty-state-content{width:100%;height:100%}.scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none;overflow-y:hidden}.scrollbar-hidden::-webkit-scrollbar{display:none;overflow-y:hidden}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: KlesTableConnectorService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOADER_SERVICE]
@@ -2072,7 +2206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                     args: [SORT_SERVICE]
                 }] }, { type: FilterService, decorators: [{
                     type: Optional
-                }] }, { type: ExpandedRowStore }, { type: RowFormFactory }, { type: EventsService }, { type: RowService }, { type: CellService }], propDecorators: { table: [{
+                }] }, { type: ExpandedRowStore }, { type: RowFormFactory }, { type: EventsService }, { type: RowService }, { type: CellService }, { type: EmptyStateService }], propDecorators: { table: [{
                 type: ViewChild,
                 args: [MatTable]
             }], matSort: [{
@@ -2084,6 +2218,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             }], isLoadingClass: [{
                 type: HostBinding,
                 args: ['class.loading']
+            }], isEmptyClass: [{
+                type: HostBinding,
+                args: ['class.empty']
             }] } });
 
 function isDestroyable(value) {
@@ -2335,7 +2472,7 @@ class InfiniteScrollTableComponent {
 }
 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" }]
+            args: [{ selector: 'kles-infinite-scroll-table', standalone: true, imports: [CommonModule, ScrollingModule], template: "<!-- <cdk-virtual-scroll-viewport itemSize=\"48\">\n    <kles-table></kles-table>\n</cdk-virtual-scroll-viewport> -->\n" }]
         }], ctorParameters: () => [] });
 
 class SelectionLoaderService {
@@ -3126,6 +3263,7 @@ class LinesService {
         this.eventsService = eventsService;
         this.destroyRef = inject(DestroyRef);
         this._loaded = new EventEmitter();
+        this._loading = new EventEmitter();
     }
     register() {
         this.load();
@@ -3136,6 +3274,9 @@ class LinesService {
     loaded() {
         return this._loaded;
     }
+    loading() {
+        return this._loading;
+    }
     load() {
         this.loader
             .load()
@@ -3143,6 +3284,7 @@ class LinesService {
             .subscribe((response) => {
             if (response.loading) {
                 this.eventsService.emit('loadStart');
+                this._loading.next();
             }
             else {
                 if (response.error) {
@@ -3189,6 +3331,7 @@ class LinesLazyService {
         this.destroyRef = inject(DestroyRef);
         this._refresh$ = new Subject();
         this._loaded = new EventEmitter();
+        this._loading = new EventEmitter();
     }
     register() {
         this.load();
@@ -3199,6 +3342,9 @@ class LinesLazyService {
     loaded() {
         return this._loaded;
     }
+    loading() {
+        return this._loading;
+    }
     refresh() {
         this._refresh$.next();
     }
@@ -3208,6 +3354,7 @@ class LinesLazyService {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((response) => {
             if (response.loading) {
+                this._loading.next();
                 this.eventsService.emit('loadStart');
             }
             else {
@@ -3348,6 +3495,13 @@ class ScrollbarOrchestratorService {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
             this.scrollbarService.toTop('instant');
+            this.scrollbarService.showScrollbar();
+        });
+        this.linesService
+            .loading()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.scrollbarService.hideScrollbar();
         });
         this.paginatorService
             ?.pageChanged()
@@ -3393,6 +3547,13 @@ class ScrollbarLazyOrchestratorService {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
             this.scrollbarService.toTop('instant');
+            this.scrollbarService.showScrollbar();
+        });
+        this.linesService
+            .loading()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.scrollbarService.hideScrollbar();
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScrollbarLazyOrchestratorService, deps: [{ token: LINES_SERVICE }, { token: ScrollbarService }], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -3462,6 +3623,8 @@ class DynamicTableLoaderDirective {
     }
     initInjector() {
         const storeProviders = [SortStore, FilterStore, ...(this.tableConfig().paginator ? [PaginatorStore] : []), ExpandedRowStore];
+        const emptyState = this.tableConfig().emptyState;
+        const emptyStateIntl = typeof emptyState === 'object' && emptyState !== null ? emptyState.intl : undefined;
         const configProviders = [
             {
                 provide: COLUMNS,
@@ -3507,6 +3670,18 @@ class DynamicTableLoaderDirective {
                     },
                 ]
                 : []),
+            {
+                provide: EMPTY_STATE_CONFIG,
+                useValue: emptyState,
+            },
+            ...(emptyStateIntl
+                ? [
+                    {
+                        provide: KlesTableIntl,
+                        useClass: emptyStateIntl,
+                    },
+                ]
+                : []),
         ];
         const orchestratorProviders = [
             LoadingOrchestratorService,
@@ -3541,6 +3716,7 @@ class DynamicTableLoaderDirective {
             TreeService,
             RenderService,
             ExtraRowService,
+            EmptyStateService,
             LoadingService,
             KlesForm,
             ColumnsService,
@@ -3653,6 +3829,10 @@ class KlesTableComponent {
         this.rowContextMenu = new EventEmitter();
         this.cellClick = new EventEmitter();
         this.cellValueChange = new EventEmitter();
+        this.elevationShadow = computed(() => {
+            const level = this.tableConfig().elevation ?? 2;
+            return level === 0 ? 'none' : `var(--mat-sys-level${level})`;
+        }, ...(ngDevMode ? [{ debugName: "elevationShadow" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         this.connectorService.connected$
@@ -3735,11 +3915,11 @@ class KlesTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesTableComponent, deps: [{ token: KlesTableConnectorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.19", type: KlesTableComponent, isStandalone: true, selector: "kles-dynamic-table", inputs: { tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { tableEvent: "tableEvent", rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", rowContextMenu: "rowContextMenu", 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.19", type: KlesTableComponent, isStandalone: true, selector: "kles-dynamic-table", inputs: { tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { tableEvent: "tableEvent", rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", rowContextMenu: "rowContextMenu", cellClick: "cellClick", cellValueChange: "cellValueChange" }, host: { properties: { "attr.id": "this.hostId" } }, providers: [KlesTableConnectorService], ngImport: i0, template: "<div class=\"table-frame\" [style.box-shadow]=\"elevationShadow()\">\n    <ng-template appDynamicTableLoader [tableConfig]=\"tableConfig()\"></ng-template>\n</div>\n", styles: [":host{display:flex;flex-direction:column;max-height:100%;overflow:auto;padding:4px;box-sizing:border-box}.table-frame{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;background:var(--mat-sys-surface);border-radius:var(--mat-sys-corner-small);overflow:hidden}\n"], dependencies: [{ kind: "directive", type: DynamicTableLoaderDirective, selector: "[appDynamicTableLoader]", inputs: ["tableConfig"] }] }); }
 }
 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"] }]
+            args: [{ selector: 'kles-dynamic-table', standalone: true, imports: [DynamicTableLoaderDirective], providers: [KlesTableConnectorService], template: "<div class=\"table-frame\" [style.box-shadow]=\"elevationShadow()\">\n    <ng-template appDynamicTableLoader [tableConfig]=\"tableConfig()\"></ng-template>\n</div>\n", styles: [":host{display:flex;flex-direction:column;max-height:100%;overflow:auto;padding:4px;box-sizing:border-box}.table-frame{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;background:var(--mat-sys-surface);border-radius:var(--mat-sys-corner-small);overflow:hidden}\n"] }]
         }], ctorParameters: () => [{ type: KlesTableConnectorService }], propDecorators: { tableConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableConfig", required: true }] }], tableEvent: [{
                 type: Output
             }], rowClick: [{
@@ -3795,5 +3975,5 @@ var AlignCell;
  * 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 };
+export { AlignCell, COLUMNS, DATASOURCE_SERVICE, DRAG_DROP_CONFIG, EMPTY_STATE_CONFIG, EXTRA_ROWS, FOOTER, HEADER_SERVICE, KlesMaterialTableModule, KlesTableComponent, KlesTableEmptyStateComponent, KlesTableIntl, LINES_SERVICE, LOADER_CONFIG, LOADER_SERVICE, PAGINATOR_CONFIG, ROW_DRAG_DROP, SCROLLBAR_ORCHESTRATOR_SERVICE, SELECTION_CONFIG, SELECTION_SERVICE, SORT_CONFIG, SORT_SERVICE, Span, TABLE_SERVICE, TableComponent, linesLazyLoader, linesLoader, selectionConfig };
 //# sourceMappingURL=3kles-kles-material-table-v2.mjs.map