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

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

@@ -38,7 +38,7 @@ class HeaderFieldPipe {
             return null;
         return {
             name: col.columnDef,
-            ...col.headerCell.field,
+            ...col.headerCell?.field,
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: HeaderFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
@@ -56,7 +56,7 @@ class CellFieldPipe {
     transform(col) {
         if (!col)
             return null;
-        return { name: col.columnDef, canExpand: col.canExpand, ...col.cell.field };
+        return { name: col.columnDef, canExpand: col.canExpand, ...col.cell?.field };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CellFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: CellFieldPipe, isStandalone: true, name: "cellField" }); }
@@ -584,7 +584,15 @@ class RowFormFactory {
             controls[field.name] = control;
             uis[field.name] = ui;
         }
-        return { formGroup: new FormGroup(controls), groupUi: new GroupUiState(uis) };
+        return {
+            formGroup: new FormGroup(controls),
+            groupUi: new GroupUiState(uis),
+            context: {
+                source: record,
+                _id: data._id,
+                meta,
+            },
+        };
     }
     createRows(fields, records, meta = { depth: 0, parentId: null }) {
         return records.map((r) => this.createRow(fields, r, meta));
@@ -597,10 +605,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+class RowContextStore {
+    constructor() {
+        this.contexts = new WeakMap();
+    }
+    set(row, context) {
+        const current = this.contexts.get(row);
+        if (current) {
+            current.set(context);
+        }
+        else {
+            this.contexts.set(row, signal(context));
+        }
+    }
+    get(row) {
+        return this.contexts.get(row) ?? null;
+    }
+    updateSource(row, source) {
+        this.contexts.get(row)?.update((context) => context
+            ? {
+                ...context,
+                source,
+            }
+            : null);
+    }
+    delete(row) {
+        this.contexts.delete(row);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RowContextStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RowContextStore }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RowContextStore, decorators: [{
+            type: Injectable
+        }] });
+
 class KlesForm {
-    constructor(columnsService, rowFactory) {
+    constructor(columnsService, rowFactory, rowContextStore) {
         this.columnsService = columnsService;
         this.rowFactory = rowFactory;
+        this.rowContextStore = rowContextStore;
         this.form = new FormGroup({
             header: new FormGroup({}),
             rows: new FormArray([]),
@@ -634,10 +677,14 @@ class KlesForm {
         return this.form.get('footer');
     }
     setRows(rows) {
+        this.getRows().controls.forEach((row) => {
+            this.rowContextStore.delete(row);
+        });
         this.getRows().clear({ emitEvent: false });
         this.getUiRows().clear();
         rows.forEach((r) => {
             this.uiStore.set(r.formGroup, r.groupUi);
+            this.rowContextStore.set(r.formGroup, r.context);
             this.getRows().push(r.formGroup, { emitEvent: false });
             this.getUiRows().push(r.groupUi);
         });
@@ -645,6 +692,7 @@ class KlesForm {
     }
     insertRowAndNotify(row, index, options, notify) {
         this.uiStore.set(row.formGroup, row.groupUi);
+        this.rowContextStore.set(row.formGroup, row.context);
         if (index !== undefined) {
             this.getRows().insert(index, row.formGroup, options);
             this.getUiRows().insert(index, row.groupUi);
@@ -686,7 +734,9 @@ class KlesForm {
     deleteRowById(id, option) {
         const index = this.getRows().controls.findIndex((c) => c.getRawValue()._id === id);
         if (index !== -1) {
+            const row = this.getRows().at(index);
             this.getRows().removeAt(index, option);
+            this.rowContextStore.delete(row);
             this.getUiRows().removeAt(index);
             this.notifyRowsStructureChanged();
         }
@@ -709,7 +759,7 @@ class KlesForm {
     init() {
         this.columnsService.columns().forEach((column) => {
             let colCellHeader = {};
-            if (column.headerCell.field) {
+            if (column.headerCell?.field) {
                 const { pipeTransform, ...tmpCell } = column.headerCell.field;
                 colCellHeader = _.cloneDeep(tmpCell);
                 colCellHeader = { pipeTransform, ...colCellHeader };
@@ -739,12 +789,12 @@ class KlesForm {
     notifyRowsStructureChanged() {
         this.rowsStructureChangedSubject.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesForm, deps: [{ token: ColumnsService }, { token: RowFormFactory }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesForm, deps: [{ token: ColumnsService }, { token: RowFormFactory }, { token: RowContextStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesForm }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesForm, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: ColumnsService }, { type: RowFormFactory }] });
+        }], ctorParameters: () => [{ type: ColumnsService }, { type: RowFormFactory }, { type: RowContextStore }] });
 
 class TreeService {
     constructor() {
@@ -783,7 +833,7 @@ class TreeService {
                     this.loading.delete(id);
                     // this.loadingService.stop();
                     // console.log( (group.getRawValue()._depth ?? 0) + 1)
-                    this.fm.insertRows(this.rowFactory.createRows(this.columnsService.columns().map((col) => ({ ...col.cell.field, name: col.columnDef })), response.items, { depth: (group.getRawValue()._depth ?? 0) + 1, parentId: id }), index + 1);
+                    this.fm.insertRows(this.rowFactory.createRows(this.columnsService.columns().map((col) => ({ ...col.cell?.field, name: col.columnDef })), response.items, { depth: (group.getRawValue()._depth ?? 0) + 1, parentId: id }), index + 1);
                     expanded.add(id);
                     this._expandedIds$.next(expanded);
                 }
@@ -991,6 +1041,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             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 RowContextPipe {
+    constructor() {
+        this.store = inject(RowContextStore);
+    }
+    transform(row) {
+        return row ? this.store.get(row) : null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RowContextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: RowContextPipe, isStandalone: true, name: "rowContext" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RowContextPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'rowContext',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
 class KlesTableConnectorService {
     constructor() {
         this._connected$ = new BehaviorSubject(false);
@@ -1601,10 +1670,10 @@ class FilterService {
                 let keyValue = data?.controls[key]?.value;
                 const column = this.columnsService.columns().find((col) => col.columnDef === key);
                 if (column) {
-                    if (column.headerCell.filterPredicate) {
+                    if (column.headerCell?.filterPredicate) {
                         return column.headerCell.filterPredicate(keyValue, searchString[key]) || false;
                     }
-                    if (keyValue != null && typeof keyValue === 'object' && column.cell.field.property) {
+                    if (keyValue != null && typeof keyValue === 'object' && column.cell?.field?.property) {
                         keyValue = keyValue[column.cell.field.property];
                     }
                     if (searchString?.[key] && typeof searchString[key] === 'object') {
@@ -1614,7 +1683,7 @@ class FilterService {
                             }
                             const list = searchString[key]
                                 .map((m) => {
-                                const subkey = column.headerCell.field?.property ?? column.cell.field.property;
+                                const subkey = column.headerCell?.field?.property ?? column.cell?.field?.property;
                                 if (subkey) {
                                     return m?.[subkey] ?? m;
                                 }
@@ -1626,7 +1695,7 @@ class FilterService {
                             return keyValue != undefined && list.includes(keyValue.toString().trim().toLowerCase());
                         }
                         else {
-                            const subKey = column.headerCell.field?.property ?? column.cell.field.property;
+                            const subKey = column.headerCell?.field?.property ?? column.cell?.field?.property;
                             if (subKey) {
                                 searchString[key] = searchString[key][subKey];
                             }
@@ -1944,7 +2013,7 @@ class TableComponent {
                 create: (value, index, options) => {
                     return this.tableService.klesForm.insertRow(this.rowFactory.createRow(this.columnsService
                         .columns()
-                        .map((col) => ({ ...col.cell.field, name: col.columnDef }))
+                        .map((col) => ({ ...col.cell?.field, name: col.columnDef }))
                         .concat(this.extraRowService.extraColumns().map((col) => ({ ...col, name: col.columnDef }))), value), index, options).formGroup;
                 },
                 patch: (_id, value, options) => {
@@ -2156,7 +2225,7 @@ class TableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TableComponent, deps: [{ token: i0.ElementRef }, { token: KlesTableConnectorService }, { token: LOADER_SERVICE }, { token: DATASOURCE_SERVICE }, { token: TABLE_SERVICE }, { token: ROW_DRAG_DROP }, { token: SELECTION_SERVICE }, { token: ColumnsService }, { token: LoadingService }, { token: PaginatorService }, { token: ScrollbarService }, { token: FooterService }, { token: ExtraRowService }, { token: RenderService }, { token: SORT_SERVICE }, { token: FilterService, optional: true }, { token: ExpandedRowStore }, { token: RowFormFactory }, { token: EventsService }, { token: RowService }, { token: CellService }, { token: EmptyStateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: TableComponent, isStandalone: true, selector: "kles-table", host: { properties: { "class.loading": "this.isLoadingClass", "class.empty": "this.isEmptyClass" } }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "formElemRef", first: true, predicate: ["form"], descendants: true, static: true }], ngImport: i0, template: "<form #form [formGroup]=\"tableService.form\" (ngSubmit)=\"submit()\">\n    <!-- [fixedLayout]=\"true\" -->\n    <table\n        mat-table\n        [dataSource]=\"dataSource\"\n        matSort\n        [trackBy]=\"multiTemplateDataRows() ? null : tableService.trackBy\"\n        formArrayName=\"rows\"\n        cdkDropList\n        [cdkDropListData]=\"tableService.form.controls.rows\"\n        (cdkDropListDropped)=\"dragDropRowService.listDropped($event)\"\n        [cdkDropListDisabled]=\"!dragDropRowService.enable\"\n        [cdkDropListAutoScrollStep]=\"dragDropRowService.autoScrollStep\"\n        [cdkDropListSortPredicate]=\"dragDropRowService.sortPredicate\"\n        [cdkDropListConnectedTo]=\"dragDropRowService.connectedTo\"\n        [multiTemplateDataRows]=\"multiTemplateDataRows()\"\n    >\n        <colgroup>\n            @for (column of columns(); track column.columnDef) {\n                <col [style.width]=\"column.width ?? null\" [style.minWidth]=\"column.minWidth ?? null\" [style.maxWidth]=\"column.maxWidth ?? null\" />\n            }\n        </colgroup>\n\n        @for (column of columns(); track column.columnDef) {\n            <ng-container [cdkColumnDef]=\"column.columnDef\" [sticky]=\"column.sticky ?? false\" [stickyEnd]=\"column.stickyEnd ?? false\">\n                <th\n                    mat-header-cell\n                    *matHeaderCellDef\n                    [appResizableColumn]=\"column\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'header') ?? getStickyStartSeparator(column, 'header')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'header')\"\n                    [ngStyle]=\"\n                        column.headerCell?.style?.ngStyle\n                            | resolveNgStyle\n                                : tableService.form.get(['header', column.columnDef])?.value\n                                : tableService.form.get(['header', column.columnDef])?.status\n                                : tableService.form.controls.header.value\n                                : tableService.form.controls.header.status\n                    \"\n                >\n                    <div class=\"cell\">\n                        <kles-header [header]=\"column | header\" [group]=\"tableService.form.controls.header\">\n                            <ng-container\n                                klesDynamicField\n                                [field]=\"column | headerField\"\n                                [group]=\"tableService.form.controls.header\"\n                                [ui]=\"tableService.ui.states.header\"\n                            ></ng-container>\n                        </kles-header>\n                    </div>\n                </th>\n\n                <td\n                    mat-cell\n                    *cdkCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'body') ?? getStickyStartSeparator(column, 'body')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'body')\"\n                    [ngStyle]=\"\n                        column.cell?.style?.ngStyle\n                            | resolveNgStyle: row.controls[column.columnDef].value : row.controls[column.columnDef].status : row.value : row.status\n                    \"\n                    (click)=\"cellService.onClick($event, row, dataIndex ?? index, column.columnDef)\"\n                    (dblclick)=\"cellService.onDoubleClick($event, row, dataIndex ?? index, column.columnDef)\"\n                    (contextmenu)=\"cellService.onContextMenu($event, row, dataIndex ?? index, column.columnDef)\"\n                >\n                    <div class=\"cell\" [style.--align]=\"column.align\">\n                        <kles-cell [group]=\"row\" [ui]=\"row | uiField\" [column]=\"column\">\n                            <ng-container klesDynamicField [field]=\"column | cellField\" [group]=\"row\" [ui]=\"row | uiField\"></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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: TableComponent, isStandalone: true, selector: "kles-table", host: { properties: { "class.loading": "this.isLoadingClass", "class.empty": "this.isEmptyClass" } }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "formElemRef", first: true, predicate: ["form"], descendants: true, static: true }], ngImport: i0, template: "<form #form [formGroup]=\"tableService.form\" (ngSubmit)=\"submit()\">\n    <!-- [fixedLayout]=\"true\" -->\n    <table\n        mat-table\n        [dataSource]=\"dataSource\"\n        matSort\n        [trackBy]=\"multiTemplateDataRows() ? null : tableService.trackBy\"\n        formArrayName=\"rows\"\n        cdkDropList\n        [cdkDropListData]=\"tableService.form.controls.rows\"\n        (cdkDropListDropped)=\"dragDropRowService.listDropped($event)\"\n        [cdkDropListDisabled]=\"!dragDropRowService.enable\"\n        [cdkDropListAutoScrollStep]=\"dragDropRowService.autoScrollStep\"\n        [cdkDropListSortPredicate]=\"dragDropRowService.sortPredicate\"\n        [cdkDropListConnectedTo]=\"dragDropRowService.connectedTo\"\n        [multiTemplateDataRows]=\"multiTemplateDataRows()\"\n    >\n        <colgroup>\n            @for (column of columns(); track column.columnDef) {\n                <col [style.width]=\"column.width ?? null\" [style.minWidth]=\"column.minWidth ?? null\" [style.maxWidth]=\"column.maxWidth ?? null\" />\n            }\n        </colgroup>\n\n        @for (column of columns(); track column.columnDef) {\n            <ng-container [cdkColumnDef]=\"column.columnDef\" [sticky]=\"column.sticky ?? false\" [stickyEnd]=\"column.stickyEnd ?? false\">\n                <th\n                    mat-header-cell\n                    *matHeaderCellDef\n                    [appResizableColumn]=\"column\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'header') ?? getStickyStartSeparator(column, 'header')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'header')\"\n                    [ngStyle]=\"\n                        column.headerCell?.style?.ngStyle\n                            | resolveNgStyle\n                                : tableService.form.get(['header', column.columnDef])?.value\n                                : tableService.form.get(['header', column.columnDef])?.status\n                                : tableService.form.controls.header.value\n                                : tableService.form.controls.header.status\n                    \"\n                >\n                    <div class=\"cell\">\n                        <kles-header [header]=\"column | header\" [group]=\"tableService.form.controls.header\">\n                            <ng-container\n                                klesDynamicField\n                                [field]=\"column | headerField\"\n                                [group]=\"tableService.form.controls.header\"\n                                [ui]=\"tableService.ui.states.header\"\n                            ></ng-container>\n                        </kles-header>\n                    </div>\n                </th>\n\n                <td\n                    mat-cell\n                    *cdkCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'body') ?? getStickyStartSeparator(column, 'body')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'body')\"\n                    [ngStyle]=\"\n                        column.cell?.style?.ngStyle\n                            | resolveNgStyle: row.controls[column.columnDef].value : row.controls[column.columnDef].status : row.value : row.status\n                    \"\n                    (click)=\"cellService.onClick($event, row, dataIndex ?? index, column.columnDef)\"\n                    (dblclick)=\"cellService.onDoubleClick($event, row, dataIndex ?? index, column.columnDef)\"\n                    (contextmenu)=\"cellService.onContextMenu($event, row, dataIndex ?? index, column.columnDef)\"\n                >\n                    <div class=\"cell\" [style.--align]=\"column.align\">\n                        <kles-cell [group]=\"row\" [ui]=\"row | uiField\" [column]=\"column\">\n                            <ng-container klesDynamicField [field]=\"column | cellField\" [group]=\"row\" [ui]=\"row | uiField\" [context]=\"row | rowContext\"></ng-container>\n                        </kles-cell>\n                    </div>\n                </td>\n\n                <td\n                    mat-footer-cell\n                    *matFooterCellDef\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'footer') ?? getStickyStartSeparator(column, 'footer')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'footer')\"\n                    [ngStyle]=\"\n                        column.footerCell?.style?.ngStyle\n                            | resolveNgStyle\n                                : tableService.form.get(['footer', column.columnDef])?.value\n                                : tableService.form.get(['footer', column.columnDef])?.status\n                                : tableService.form.controls.footer.value\n                                : tableService.form.controls.footer.status\n                    \"\n                >\n                    @if (column.footerCell) {\n                        <ng-container\n                            klesDynamicField\n                            [field]=\"column | footerField\"\n                            [group]=\"tableService.form.controls.footer\"\n                            [ui]=\"tableService.ui.states.footer\"\n                        >\n                        </ng-container>\n                    }\n                </td>\n            </ng-container>\n        }\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: true\"></tr>\n\n        <tr\n            mat-row\n            *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns()\"\n            cdkDrag\n            [cdkDragData]=\"row\"\n            (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n            (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n            (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n            (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n            (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n        ></tr>\n\n        @if (multiTemplateDataRows()) {\n            @for (extraRow of extraRows(); track extraRow) {\n                @for (extraColumn of extraRow.cells; track extraColumn.columnDef) {\n                    <ng-container [cdkColumnDef]=\"extraColumn.columnDef\">\n                        <td\n                            mat-cell\n                            *cdkCellDef=\"let row\"\n                            [attr.colspan]=\"extraColumn.colspan | spanPipe: displayedColumns().length\"\n                            [attr.rowspan]=\"extraColumn.rowspan\"\n                            [ngStyle]=\"\n                                extraColumn?.style?.ngStyle\n                                    | resolveNgStyle\n                                        : row.controls[extraColumn.columnDef].value\n                                        : row.controls[extraColumn.columnDef].status\n                                        : row.value\n                                        : row.status\n                            \"\n                        >\n                            <ng-container klesDynamicField [field]=\"extraColumn | extraCellField\" [group]=\"row\" [ui]=\"row | uiField\" [context]=\"row | rowContext\"></ng-container>\n                        </td>\n                    </ng-container>\n                }\n                <tr\n                    mat-row\n                    *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: extraRow.displayedColumns; when: extraRow.when\"\n                    (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n                    (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n                    (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n                    (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n                    (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n                ></tr>\n            }\n        }\n\n        <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\" [style.display]=\"showFooter() ? '' : 'none'\"></tr>\n    </table>\n</form>\n\n@if (loadingService.loading()) {\n    <div class=\"table-overlay\" [style.--header-h.px]=\"headerHeightPx\" [style.--scroll-h.px]=\"scrollHeightPx\" [style.--footer-h.px]=\"footerHeightPx\">\n        <mat-spinner></mat-spinner>\n    </div>\n}\n\n@if (emptyStateService.enabled() && !loadingService.loading() && isEmpty()) {\n    <div\n        class=\"table-empty-state-overlay\"\n        [style.--header-h.px]=\"headerHeightPx\"\n        [style.--scroll-h.px]=\"scrollHeightPx\"\n        [style.--footer-h.px]=\"footerHeightPx\"\n    >\n        <div class=\"table-empty-state-content\">\n            <ng-container *ngComponentOutlet=\"emptyStateService.component\"></ng-container>\n        </div>\n    </div>\n}\n", styles: [":host{--kles-table-divider-color: color-mix(in srgb, var(--mat-sys-outline-variant) 65%, transparent);--kles-table-divider-strong-color: var(--mat-sys-outline-variant);--kles-table-header-background: var(--mat-sys-surface-container-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", "context"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i22.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i22.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i23.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: ResizableColumnDirective, selector: "th[appResizableColumn]", inputs: ["appResizableColumn"] }, { kind: "component", type: KlesCellComponent, selector: "kles-cell", inputs: ["ui", "group", "column"] }, { kind: "component", type: KlesHeaderComponent, selector: "kles-header", inputs: ["header", "group"] }, { kind: "pipe", type: HeaderFieldPipe, name: "headerField" }, { kind: "pipe", type: CellFieldPipe, name: "cellField" }, { kind: "pipe", type: UiFieldPipe, name: "uiField" }, { kind: "pipe", type: FooterFieldPipe, name: "footerField" }, { kind: "pipe", type: SpanPipe, name: "spanPipe" }, { kind: "pipe", type: ExtraCellFieldPipe, name: "extraCellField" }, { kind: "pipe", type: ResolveNgStylePipe, name: "resolveNgStyle" }, { kind: "pipe", type: HeaderPipe, name: "header" }, { kind: "pipe", type: RowContextPipe, name: "rowContext" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -2185,7 +2254,8 @@ 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        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"] }]
+                        RowContextPipe
+                    ], template: "<form #form [formGroup]=\"tableService.form\" (ngSubmit)=\"submit()\">\n    <!-- [fixedLayout]=\"true\" -->\n    <table\n        mat-table\n        [dataSource]=\"dataSource\"\n        matSort\n        [trackBy]=\"multiTemplateDataRows() ? null : tableService.trackBy\"\n        formArrayName=\"rows\"\n        cdkDropList\n        [cdkDropListData]=\"tableService.form.controls.rows\"\n        (cdkDropListDropped)=\"dragDropRowService.listDropped($event)\"\n        [cdkDropListDisabled]=\"!dragDropRowService.enable\"\n        [cdkDropListAutoScrollStep]=\"dragDropRowService.autoScrollStep\"\n        [cdkDropListSortPredicate]=\"dragDropRowService.sortPredicate\"\n        [cdkDropListConnectedTo]=\"dragDropRowService.connectedTo\"\n        [multiTemplateDataRows]=\"multiTemplateDataRows()\"\n    >\n        <colgroup>\n            @for (column of columns(); track column.columnDef) {\n                <col [style.width]=\"column.width ?? null\" [style.minWidth]=\"column.minWidth ?? null\" [style.maxWidth]=\"column.maxWidth ?? null\" />\n            }\n        </colgroup>\n\n        @for (column of columns(); track column.columnDef) {\n            <ng-container [cdkColumnDef]=\"column.columnDef\" [sticky]=\"column.sticky ?? false\" [stickyEnd]=\"column.stickyEnd ?? false\">\n                <th\n                    mat-header-cell\n                    *matHeaderCellDef\n                    [appResizableColumn]=\"column\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'header') ?? getStickyStartSeparator(column, 'header')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'header')\"\n                    [ngStyle]=\"\n                        column.headerCell?.style?.ngStyle\n                            | resolveNgStyle\n                                : tableService.form.get(['header', column.columnDef])?.value\n                                : tableService.form.get(['header', column.columnDef])?.status\n                                : tableService.form.controls.header.value\n                                : tableService.form.controls.header.status\n                    \"\n                >\n                    <div class=\"cell\">\n                        <kles-header [header]=\"column | header\" [group]=\"tableService.form.controls.header\">\n                            <ng-container\n                                klesDynamicField\n                                [field]=\"column | headerField\"\n                                [group]=\"tableService.form.controls.header\"\n                                [ui]=\"tableService.ui.states.header\"\n                            ></ng-container>\n                        </kles-header>\n                    </div>\n                </th>\n\n                <td\n                    mat-cell\n                    *cdkCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'body') ?? getStickyStartSeparator(column, 'body')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'body')\"\n                    [ngStyle]=\"\n                        column.cell?.style?.ngStyle\n                            | resolveNgStyle: row.controls[column.columnDef].value : row.controls[column.columnDef].status : row.value : row.status\n                    \"\n                    (click)=\"cellService.onClick($event, row, dataIndex ?? index, column.columnDef)\"\n                    (dblclick)=\"cellService.onDoubleClick($event, row, dataIndex ?? index, column.columnDef)\"\n                    (contextmenu)=\"cellService.onContextMenu($event, row, dataIndex ?? index, column.columnDef)\"\n                >\n                    <div class=\"cell\" [style.--align]=\"column.align\">\n                        <kles-cell [group]=\"row\" [ui]=\"row | uiField\" [column]=\"column\">\n                            <ng-container klesDynamicField [field]=\"column | cellField\" [group]=\"row\" [ui]=\"row | uiField\" [context]=\"row | rowContext\"></ng-container>\n                        </kles-cell>\n                    </div>\n                </td>\n\n                <td\n                    mat-footer-cell\n                    *matFooterCellDef\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'footer') ?? getStickyStartSeparator(column, 'footer')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'footer')\"\n                    [ngStyle]=\"\n                        column.footerCell?.style?.ngStyle\n                            | resolveNgStyle\n                                : tableService.form.get(['footer', column.columnDef])?.value\n                                : tableService.form.get(['footer', column.columnDef])?.status\n                                : tableService.form.controls.footer.value\n                                : tableService.form.controls.footer.status\n                    \"\n                >\n                    @if (column.footerCell) {\n                        <ng-container\n                            klesDynamicField\n                            [field]=\"column | footerField\"\n                            [group]=\"tableService.form.controls.footer\"\n                            [ui]=\"tableService.ui.states.footer\"\n                        >\n                        </ng-container>\n                    }\n                </td>\n            </ng-container>\n        }\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: true\"></tr>\n\n        <tr\n            mat-row\n            *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns()\"\n            cdkDrag\n            [cdkDragData]=\"row\"\n            (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n            (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n            (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n            (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n            (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n        ></tr>\n\n        @if (multiTemplateDataRows()) {\n            @for (extraRow of extraRows(); track extraRow) {\n                @for (extraColumn of extraRow.cells; track extraColumn.columnDef) {\n                    <ng-container [cdkColumnDef]=\"extraColumn.columnDef\">\n                        <td\n                            mat-cell\n                            *cdkCellDef=\"let row\"\n                            [attr.colspan]=\"extraColumn.colspan | spanPipe: displayedColumns().length\"\n                            [attr.rowspan]=\"extraColumn.rowspan\"\n                            [ngStyle]=\"\n                                extraColumn?.style?.ngStyle\n                                    | resolveNgStyle\n                                        : row.controls[extraColumn.columnDef].value\n                                        : row.controls[extraColumn.columnDef].status\n                                        : row.value\n                                        : row.status\n                            \"\n                        >\n                            <ng-container klesDynamicField [field]=\"extraColumn | extraCellField\" [group]=\"row\" [ui]=\"row | uiField\" [context]=\"row | rowContext\"></ng-container>\n                        </td>\n                    </ng-container>\n                }\n                <tr\n                    mat-row\n                    *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: extraRow.displayedColumns; when: extraRow.when\"\n                    (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n                    (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n                    (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n                    (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n                    (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n                ></tr>\n            }\n        }\n\n        <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\" [style.display]=\"showFooter() ? '' : 'none'\"></tr>\n    </table>\n</form>\n\n@if (loadingService.loading()) {\n    <div class=\"table-overlay\" [style.--header-h.px]=\"headerHeightPx\" [style.--scroll-h.px]=\"scrollHeightPx\" [style.--footer-h.px]=\"footerHeightPx\">\n        <mat-spinner></mat-spinner>\n    </div>\n}\n\n@if (emptyStateService.enabled() && !loadingService.loading() && isEmpty()) {\n    <div\n        class=\"table-empty-state-overlay\"\n        [style.--header-h.px]=\"headerHeightPx\"\n        [style.--scroll-h.px]=\"scrollHeightPx\"\n        [style.--footer-h.px]=\"footerHeightPx\"\n    >\n        <div class=\"table-empty-state-content\">\n            <ng-container *ngComponentOutlet=\"emptyStateService.component\"></ng-container>\n        </div>\n    </div>\n}\n", styles: [":host{--kles-table-divider-color: color-mix(in srgb, var(--mat-sys-outline-variant) 65%, transparent);--kles-table-divider-strong-color: var(--mat-sys-outline-variant);--kles-table-header-background: var(--mat-sys-surface-container-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]
@@ -2361,7 +2431,7 @@ class SortService extends AbstractSortService {
             return data.sort((a, b) => {
                 let valueA;
                 let valueB;
-                if (column?.headerCell.sortPredicate) {
+                if (column?.headerCell?.sortPredicate) {
                     valueA = column?.headerCell.sortPredicate(a);
                     valueB = column?.headerCell.sortPredicate(b);
                 }
@@ -2369,7 +2439,7 @@ class SortService extends AbstractSortService {
                     valueA = this.sortingDataAccessor(a, active);
                     valueB = this.sortingDataAccessor(b, active);
                     if (column) {
-                        const key = column.cell?.field.property;
+                        const key = column.cell?.field?.property;
                         if (key) {
                             valueA = valueA?.[key];
                             valueB = valueB?.[key];
@@ -3296,7 +3366,7 @@ class LinesService {
                 else {
                     this.fm.setRows(this.rowFactory.createRows(this.columnsService
                         .columns()
-                        .map((col) => ({ ...col.cell.field, name: col.columnDef }))
+                        .map((col) => ({ ...col.cell?.field, name: col.columnDef }))
                         .concat(this.extraRowService.extraColumns().map((col) => ({ ...col, name: col.columnDef }))), response.items ?? []));
                     this._total = response.items?.length ?? 0;
                     this._loaded.next();
@@ -3367,7 +3437,7 @@ class LinesLazyService {
                 else {
                     this.fm.setRows(this.rowFactory.createRows(this.columnsService
                         .columns()
-                        .map((col) => ({ ...col.cell.field, name: col.columnDef }))
+                        .map((col) => ({ ...col.cell?.field, name: col.columnDef }))
                         .concat(this.extraRowService.extraColumns().map((col) => ({ ...col, name: col.columnDef }))), response.items));
                     this.paginatorService.setlength(response.total ?? 0);
                     this._total = response.total ?? 0;
@@ -3572,7 +3642,7 @@ class DynamicTableLoaderDirective {
         this.viewContainerRef = viewContainerRef;
         this.tableConfig = input.required({ ...(ngDevMode ? { debugName: "tableConfig" } : /* istanbul ignore next */ {}), transform: (v) => {
                 v.columns = v.columns.map((col) => {
-                    if (col.headerCell.field) {
+                    if (col.headerCell?.field) {
                         col.headerCell.field.subscriptSizing = col.headerCell.field.subscriptSizing ?? 'dynamic';
                     }
                     return { ...col, separator: col.separator ?? v.columnSeparator ?? false };
@@ -3622,7 +3692,7 @@ class DynamicTableLoaderDirective {
         }
     }
     initInjector() {
-        const storeProviders = [SortStore, FilterStore, ...(this.tableConfig().paginator ? [PaginatorStore] : []), ExpandedRowStore];
+        const storeProviders = [RowContextStore, SortStore, FilterStore, ...(this.tableConfig().paginator ? [PaginatorStore] : []), ExpandedRowStore];
         const emptyState = this.tableConfig().emptyState;
         const emptyStateIntl = typeof emptyState === 'object' && emptyState !== null ? emptyState.intl : undefined;
         const configProviders = [