@3kles/kles-material-table-v2 22.1.2 → 22.1.3

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

@@ -3155,6 +3155,11 @@ class TableComponent {
         ...(ngDevMode ? [{ debugName: "viewportWidthPx" }] : /* istanbul ignore next */ []));
         this.viewportScrollRangePx = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "viewportScrollRangePx" }] : /* istanbul ignore next */ []));
+        this.visibleColumns = computed(() => {
+            const displayedColumns = new Set(this.displayedColumns());
+            return this.columns().filter((column) => displayedColumns.has(column.columnDef));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
         this.changeDetectorRef = inject(ChangeDetectorRef);
         this.destroyRef = inject(DestroyRef);
         this.emptyStateComponent = KlesTableEmptyStateComponent;
@@ -3500,7 +3505,7 @@ class TableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableComponent, deps: [{ token: i0.ElementRef }, { token: KlesTableConnectorService }, { token: LOADER_SERVICE }, { token: DATASOURCE_SERVICE }, { token: TABLE_SERVICE }, { token: ROW_DRAG_DROP }, { token: COLUMN_DRAG_DROP }, { token: ROW_APPEARANCE_CONFIG }, { token: SELECTION_SERVICE }, { token: ColumnsService }, { token: LoadingService }, { token: PaginatorService }, { token: ScrollbarService }, { token: FooterService }, { token: ExtraRowService }, { token: RenderService }, { token: SORT_SERVICE }, { token: FilterService, optional: true }, { token: ExpandedRowStore }, { token: RowFormFactory }, { token: EventsService }, { token: RowService }, { token: CellService }, { token: EmptyStateService }, { token: TreeService }, { token: RowContextStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: TableComponent, isStandalone: true, selector: "kles-table", host: { properties: { "class.loading": "this.isLoadingClass", "class.empty": "this.isEmptyClass" } }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "formElemRef", first: true, predicate: ["form"], descendants: true, static: true }, { propertyName: "dropLists", predicate: CdkDropList, descendants: true }, { propertyName: "drags", predicate: CdkDrag, descendants: true }], ngImport: i0, template: "<form\n    #form\n    cdkScrollable\n    [formGroup]=\"tableService.form\"\n    [style.scroll-padding-top.px]=\"keyboardGrid.navigation.enabled ? headerHeightPx() : null\"\n    [style.scroll-padding-bottom.px]=\"keyboardGrid.navigation.enabled && showFooter() ? footerHeightPx() : null\"\n>\n    @if (keyboardGrid.navigation.enabled && !isEmpty()) {\n        <button type=\"button\" class=\"kles-grid-entry\" (click)=\"keyboardGrid.navigation.focusActive()\">\n            {{ intl.keyboardNavigationEntryLabel }}\n        </button>\n    }\n    <table\n        mat-table\n        klesKeyboardGrid\n        #keyboardGrid=\"klesKeyboardGrid\"\n        [dataSource]=\"dataSource\"\n        matSort\n        [trackBy]=\"multiTemplateDataRows() ? identityTrackBy : tableService.trackBy\"\n        formArrayName=\"rows\"\n        cdkDropList\n        [id]=\"dragDropRowService.dropListId\"\n        [cdkDropListData]=\"tableService.klesForm\"\n        (cdkDropListDropped)=\"dragDropRowService.listDropped($event)\"\n        [cdkDropListDisabled]=\"!dragDropRowService.enable\"\n        [cdkDropListAutoScrollStep]=\"dragDropRowService.autoScrollStep\"\n        [cdkDropListSortPredicate]=\"dragDropRowService.sortPredicate\"\n        [cdkDropListConnectedTo]=\"dragDropRowService.connectedTo ?? []\"\n        [multiTemplateDataRows]=\"multiTemplateDataRows()\"\n    >\n        <colgroup>\n            @for (column of columns(); track column.columnDef) {\n                <col\n                    [attr.data-column-def]=\"column.columnDef\"\n                    [style.width]=\"column.width ?? null\"\n                    [style.minWidth]=\"column.minWidth ?? null\"\n                    [style.maxWidth]=\"column.maxWidth ?? null\"\n                />\n            }\n        </colgroup>\n\n        @for (column of columns(); track column.columnDef) {\n            <ng-container [cdkColumnDef]=\"column.columnDef\" [sticky]=\"column.sticky ?? false\" [stickyEnd]=\"column.stickyEnd ?? false\">\n                <th\n                    mat-header-cell\n                    *matHeaderCellDef\n                    cdkDrag\n                    cdkDragLockAxis=\"x\"\n                    [cdkDragData]=\"column\"\n                    [cdkDragDisabled]=\"columnDragDropService.isDragDisabled(column)\"\n                    [appResizableColumn]=\"column\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'header') ?? getStickyStartSeparator(column, 'header')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'header')\"\n                    [ngStyle]=\"\n                        $safeNavigationMigration(column.headerCell?.style?.ngStyle)\n                            | resolveNgStyle\n                                : $safeNavigationMigration(tableService.form.get(['header', column.columnDef])?.value)\n                                : $safeNavigationMigration(tableService.form.get(['header', column.columnDef])?.status)\n                                : tableService.form.controls.header.value\n                                : tableService.form.controls.header.status\n                    \"\n                >\n                    <div class=\"cell\">\n                        <kles-header\n                            [header]=\"(column | header)!\"\n                            [group]=\"tableService.form.controls.header\"\n                            [columnDragHandle]=\"columnDragDropService.enable && !columnDragDropService.isDragDisabled(column)\"\n                            [dragHandleSpacer]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n                        >\n                            <ng-container\n                                klesDynamicField\n                                [field]=\"(column | headerField)!\"\n                                [group]=\"tableService.form.controls.header\"\n                                [ui]=\"tableService.ui.states.header\"\n                            ></ng-container>\n                        </kles-header>\n                    </div>\n                </th>\n\n                <td\n                    mat-cell\n                    *cdkCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n                    [klesKeyboardCell]=\"row\"\n                    [columnDef]=\"column.columnDef\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'body') ?? getStickyStartSeparator(column, 'body')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'body')\"\n                    [ngStyle]=\"\n                        $safeNavigationMigration(column.cell?.style?.ngStyle)\n                            | resolveNgStyle: row.controls[column.columnDef].value : row.controls[column.columnDef].status : row.value : row.status\n                    \"\n                    (click)=\"cellService.onClick($event, row, dataIndex ?? index, column.columnDef)\"\n                    (dblclick)=\"cellService.onDoubleClick($event, row, dataIndex ?? index, column.columnDef)\"\n                    (contextmenu)=\"cellService.onContextMenu($event, row, dataIndex ?? index, column.columnDef)\"\n                >\n                    <div class=\"cell\" [style.--align]=\"column.align\">\n                        <kles-cell\n                            [group]=\"row\"\n                            [ui]=\"(row | uiField)!\"\n                            [column]=\"column\"\n                            [rowIndex]=\"dataIndex ?? index\"\n                            [dragHandle]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n                        >\n                            @if (column.columnDef === selectionService.key && selectionService.isLoading(row)) {\n                                <mat-spinner class=\"selection-row-spinner\" [diameter]=\"20\"></mat-spinner>\n                            } @else {\n                                <ng-container\n                                    klesDynamicField\n                                    [field]=\"(column | cellField)!\"\n                                    [group]=\"row\"\n                                    [ui]=\"(row | uiField)!\"\n                                    [context]=\"row | rowContext\"\n                                ></ng-container>\n                            }\n                        </kles-cell>\n                    </div>\n                </td>\n\n                <td\n                    mat-footer-cell\n                    *matFooterCellDef\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'footer') ?? getStickyStartSeparator(column, 'footer')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'footer')\"\n                    [ngStyle]=\"\n                        $safeNavigationMigration(column.footerCell?.style?.ngStyle)\n                            | resolveNgStyle\n                                : $safeNavigationMigration(tableService.form.get(['footer', column.columnDef])?.value)\n                                : $safeNavigationMigration(tableService.form.get(['footer', column.columnDef])?.status)\n                                : tableService.form.controls.footer.value\n                                : tableService.form.controls.footer.status\n                    \"\n                >\n                    @if (column.footerCell) {\n                        <ng-container\n                            klesDynamicField\n                            [field]=\"(column | footerField)!\"\n                            [group]=\"tableService.form.controls.footer\"\n                            [ui]=\"tableService.ui.states.footer\"\n                        >\n                        </ng-container>\n                    }\n                </td>\n            </ng-container>\n        }\n\n        <tr\n            mat-header-row\n            class=\"kles-column-drop-list\"\n            *matHeaderRowDef=\"displayedColumns(); sticky: true\"\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            [cdkDropListData]=\"columnDragDropService.visibleColumns()\"\n            [cdkDropListDisabled]=\"!columnDragDropService.enable\"\n            [cdkDropListAutoScrollDisabled]=\"true\"\n            [cdkDropListSortPredicate]=\"columnDragDropService.sortPredicate\"\n            (cdkDropListDropped)=\"columnDragDropService.listDropped($event)\"\n        ></tr>\n\n        <tr\n            mat-row\n            *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns()\"\n            [class.kles-row-selected]=\"isRowSelected(row)\"\n            [class.kles-row-pointer]=\"cursorService.isPointer(row)\"\n            cdkDrag\n            [cdkDragData]=\"row\"\n            [cdkDragDisabled]=\"dragDropRowService.isDragDisabled(row)\"\n            [ngStyle]=\"rowAppearance.rowStyle | resolveRowStyle: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n            [ngClass]=\"rowAppearance.rowClass | resolveRowClass: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n            (cdkDragStarted)=\"dragDropRowService.rowDragStarted(row, dataIndex ?? index)\"\n            (cdkDragMoved)=\"dragDropRowService.rowDragMoved(row, dataIndex ?? index)\"\n            (cdkDragEnded)=\"dragDropRowService.rowDragEnded(row, dataIndex ?? index)\"\n            (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n            (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n            (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n            (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n            (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n        >\n            @if (dragDropRowService.previewComponent; as previewComponent) {\n                <ng-template cdkDragPreview [matchSize]=\"dragDropRowService.previewMatchSize\">\n                    <div class=\"kles-row-drag-preview\">\n                        <ng-container\n                            *ngComponentOutlet=\"previewComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n                        ></ng-container>\n                    </div>\n                </ng-template>\n            }\n\n            @if (dragDropRowService.placeholderComponent; as placeholderComponent) {\n                <ng-template cdkDragPlaceholder>\n                    <tr class=\"kles-row-drag-placeholder\">\n                        <td [attr.colspan]=\"displayedColumns()?.length ?? 1\">\n                            <ng-container\n                                *ngComponentOutlet=\"placeholderComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n                            ></ng-container>\n                        </td>\n                    </tr>\n                </ng-template>\n            }\n        </tr>\n\n        @if (multiTemplateDataRows()) {\n            @for (extraRow of extraRows(); track extraRow) {\n                @for (extraColumn of extraRow.cells; track extraColumn.columnDef) {\n                    <ng-container [cdkColumnDef]=\"extraColumn.columnDef\">\n                        <td\n                            mat-cell\n                            class=\"kles-extra-row-cell\"\n                            *cdkCellDef=\"let row\"\n                            [attr.colspan]=\"(extraColumn.colspan ?? 1) | spanPipe: displayedColumns().length\"\n                            [attr.rowspan]=\"extraColumn.rowspan\"\n                            [ngStyle]=\"\n                                $safeNavigationMigration(extraColumn?.style?.ngStyle)\n                                    | resolveNgStyle\n                                        : row.controls[extraColumn.columnDef].value\n                                        : row.controls[extraColumn.columnDef].status\n                                        : row.value\n                                        : row.status\n                            \"\n                        >\n                            <div\n                                class=\"kles-extra-row-content\"\n                                [class.kles-extra-row-content--viewport]=\"extraRow.width === 'viewport'\"\n                                [style.width.px]=\"extraRow.width === 'viewport' ? viewportWidthPx() : null\"\n                                [style.--kles-table-horizontal-scroll-range.px]=\"extraRow.width === 'viewport' ? viewportScrollRangePx() : null\"\n                            >\n                                <ng-container\n                                    klesDynamicField\n                                    [field]=\"(extraColumn | extraCellField)!\"\n                                    [group]=\"row\"\n                                    [ui]=\"(row | uiField)!\"\n                                    [context]=\"row | rowContext\"\n                                ></ng-container>\n                            </div>\n                        </td>\n                    </ng-container>\n                }\n                <tr\n                    mat-row\n                    class=\"kles-extra-row\"\n                    *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: extraRow.displayedColumns; when: extraRow.when\"\n                    (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n                    (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n                    (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n                    (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n                    (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n                ></tr>\n            }\n        }\n\n        <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\" [style.display]=\"showFooter() ? '' : 'none'\"></tr>\n    </table>\n</form>\n\n@if (loadingService.loading()) {\n    <div class=\"table-overlay\" [style.--header-h.px]=\"headerHeightPx()\" [style.--scroll-h.px]=\"scrollHeightPx()\" [style.--footer-h.px]=\"footerHeightPx()\">\n        <mat-spinner></mat-spinner>\n    </div>\n}\n\n@if (emptyStateService.enabled() && !loadingService.loading() && isEmpty()) {\n    <div\n        class=\"table-empty-state-overlay\"\n        [style.--header-h.px]=\"headerHeightPx()\"\n        [style.--scroll-h.px]=\"scrollHeightPx()\"\n        [style.--footer-h.px]=\"footerHeightPx()\"\n    >\n        <div class=\"table-empty-state-content\">\n            @if (emptyStateService.component === emptyStateComponent) {\n                <kles-table-empty-state (refreshRequested)=\"refresh()\"></kles-table-empty-state>\n            } @else {\n                <ng-container *ngComponentOutlet=\"emptyStateService.component\"></ng-container>\n            }\n        </div>\n    </div>\n}\n", styles: [":host{--kles-table-divider-color: color-mix(in srgb, var(--mat-sys-outline-variant) 65%, transparent);--kles-table-divider-strong-color: var(--mat-sys-outline-variant);--kles-table-header-background: var(--mat-sys-surface-container);--kles-table-header-color: var(--mat-sys-on-surface);--kles-table-header-divider-color: var(--mat-sys-outline-variant);--kles-table-row-hover-background: color-mix(in srgb, var(--mat-sys-primary) 4%, var(--mat-sys-surface));--kles-table-row-selected-background: color-mix(in srgb, var(--mat-sys-primary) 7%, var(--mat-sys-surface));--kles-table-row-selected-hover-background: color-mix(in srgb, var(--mat-sys-primary) 10%, var(--mat-sys-surface));--kles-table-row-selected-indicator-color: var(--mat-sys-primary);overflow:auto;display:flex;flex-direction:column;position:relative;height:100%;--mat-form-field-filled-container-color: transparent;--mat-form-field-hover-state-layer-opacity: 0;--mat-form-field-focus-state-layer-opacity: 0;--mat-form-field-state-layer-color: transparent}:host(.loading),:host(.empty){min-height:280px}form{display:flex;flex-direction:column;flex-grow:1;position:relative;overflow:auto;scroll-timeline-name:--kles-table-horizontal-scroll;scroll-timeline-axis:inline}.kles-row-pointer{cursor:pointer}.kles-keyboard-cell:focus-visible{outline:2px solid var(--mat-sys-primary, Highlight);outline-offset:-2px}.kles-grid-entry{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.kles-grid-entry:focus-visible{top:4px;left:4px;z-index:10;width:auto;height:auto;padding:8px 12px;clip-path:none;background:var(--mat-sys-surface, white);color:var(--mat-sys-on-surface, black);outline:2px solid var(--mat-sys-primary, Highlight)}table{width:100%;flex-grow:1}th,td{text-wrap:pretty;white-space:normal;padding-top:2px;padding-bottom:2px;box-sizing:border-box}td{word-break:normal}:host td.kles-extra-row-cell{padding:0}.kles-extra-row-content--viewport{box-sizing:border-box;animation:kles-extra-row-horizontal-scroll 1ms linear both paused}@supports (animation-timeline: scroll()){.kles-extra-row-content--viewport{animation-play-state:running;animation-timeline:--kles-table-horizontal-scroll}}@keyframes kles-extra-row-horizontal-scroll{0%{transform:translate(0)}to{transform:translate(var(--kles-table-horizontal-scroll-range, 0px))}}th .cell,td .cell{display:flex;flex-direction:column;justify-content:var(--align, center)}th[appResizableColumn].resizable-column{position:relative}th[appResizableColumn]>.resize-handle{position:absolute;top:0;inset-inline-end:-7px;z-index:20;width:14px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;outline:none}th[appResizableColumn]>.resize-handle:before{content:\"\";position:absolute;top:15%;bottom:15%;inset-inline-start:6px;width:2px;border-radius:2px;background:var(--mat-sys-outline);opacity:0;transition:opacity .12s ease,background-color .12s ease,transform .12s ease}th[appResizableColumn].resizable-column:hover>.resize-handle:before,th[appResizableColumn]>.resize-handle:focus-visible:before{opacity:.65}th[appResizableColumn].column-resizing>.resize-handle:before{top:0;bottom:0;background:var(--mat-sys-primary);opacity:1;transform:scaleX(1.25)}th[appResizableColumn].column-resizing>.resize-handle:after{content:\"\";position:absolute;top:100%;inset-inline-start:6px;width:2px;height:100vh;background:color-mix(in srgb,var(--mat-sys-primary) 70%,transparent);pointer-events:none}th[appResizableColumn]>.resize-handle>.resize-width-label{position:absolute;top:calc(100% + 8px);inset-inline-start:50%;z-index:30;display:none;padding:3px 7px;color:var(--mat-sys-on-primary);font-size:11px;font-weight:600;line-height:16px;white-space:nowrap;background:var(--mat-sys-primary);border-radius:var(--mat-sys-corner-extra-small);box-shadow:var(--mat-sys-level2);transform:translate(-50%);pointer-events:none}th[appResizableColumn].column-resizing>.resize-handle>.resize-width-label{display:block}:host .column-resizing-cell{width:var(--kles-column-resize-width)!important;min-width:var(--kles-column-resize-width)!important;max-width:var(--kles-column-resize-width)!important;flex:0 0 var(--kles-column-resize-width)!important;background-image:linear-gradient(color-mix(in srgb,var(--mat-sys-primary) 5%,transparent),color-mix(in srgb,var(--mat-sys-primary) 5%,transparent))}.table-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));display:grid;place-items:center;background:color-mix(in srgb,var(--mat-sys-surface-container-highest) 75%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-outline-variant) 30%,transparent);z-index:500}:host .mat-mdc-row:not(.kles-extra-row){transition:background-color .12s ease}:host .mat-mdc-row:not(.kles-extra-row):hover{background:var(--kles-table-row-hover-background)}:host .mat-mdc-row:not(.kles-extra-row).kles-row-selected{background:var(--kles-table-row-selected-background);box-shadow:inset 3px 0 0 var(--kles-table-row-selected-indicator-color)}:host .mat-mdc-row:not(.kles-extra-row).kles-row-selected:hover{background:var(--kles-table-row-selected-hover-background)}:host tr.mat-mdc-row.cdk-drag-placeholder{opacity:1;background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))!important}:host tr.mat-mdc-row.cdk-drag-placeholder td{border-block:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td>*{visibility:hidden}:host tr.mat-mdc-row.cdk-drag-placeholder td:first-child{border-inline-start:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td:last-child{border-inline-end:2px dashed var(--mat-sys-primary)}:host .cdk-drop-list-dragging tr.mat-mdc-row:not(.cdk-drag-placeholder),:host tr.mat-mdc-row.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}:host .kles-column-drop-list.cdk-drop-list-dragging .mat-mdc-header-cell:not(.cdk-drag-placeholder),:host .mat-mdc-header-cell.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}:host .mat-mdc-header-cell.cdk-drag-placeholder{opacity:.25}.mat-mdc-header-cell.cdk-drag-preview{box-sizing:border-box;background:var(--kles-table-header-background);color:var(--kles-table-header-color);box-shadow:var(--mat-sys-level3)}.kles-row-drag-preview{overflow:hidden;border-radius:var(--mat-sys-corner-small);background:var(--mat-sys-surface-container);box-shadow:var(--mat-sys-level3)}.selection-row-spinner{margin-inline:auto}:host tr.kles-row-drag-placeholder td{padding:0;border:2px dashed var(--mat-sys-primary);background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))}:host .mat-mdc-table .mat-mdc-cell,:host .mat-mdc-table .mat-mdc-header-cell{border-bottom-color:var(--mat-sys-outline-variant)}:host .mat-mdc-table .mat-mdc-cell:last-child,:host .mat-mdc-table .mat-mdc-header-cell:last-child{border-right:none}:host tr.mat-mdc-footer-row td.mat-mdc-footer-cell{border-top:1px solid var(--kles-table-divider-strong-color)}:host tr.mat-mdc-row:last-of-type td.mat-mdc-cell{border-bottom:1px solid var(--kles-table-divider-color)}:host tr.mat-mdc-footer-row{font-weight:500}:host .mat-mdc-header-row,:host .mat-mdc-header-cell{background-color:var(--kles-table-header-background);color:var(--kles-table-header-color)}:host .mat-mdc-header-cell{border-bottom-color:var(--kles-table-header-divider-color)}.table-empty-state-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));z-index:400;overflow-x:hidden;overflow-y:auto;container-type:size;container-name:kles-empty-state;background:var(--mat-sys-surface);display:grid;place-items:center}.table-empty-state-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:100%;padding:16px;box-sizing:border-box}@container kles-empty-state (max-height: 220px){.table-empty-state-content{padding:8px}}.scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none;overflow-y:hidden}.scrollbar-hidden::-webkit-scrollbar{display:none;overflow-y:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i18.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i18.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i18.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i19.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i19.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i19.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i19.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i21.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i21.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i21.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i21.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i21.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i21.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i21.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i21.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i21.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i21.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i21.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i21.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: CdkTableModule }, { kind: "directive", type: i22.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i22.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i23.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "ngmodule", type: KlesMaterialDynamicformsModule }, { kind: "directive", type: i24.KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i25.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i25.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i25.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i25.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i26.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: ResizableColumnDirective, selector: "th[appResizableColumn]", inputs: ["appResizableColumn"] }, { kind: "component", type: KlesCellComponent, selector: "kles-cell", inputs: ["ui", "group", "column", "rowIndex", "dragHandle"] }, { kind: "component", type: KlesHeaderComponent, selector: "kles-header", inputs: ["header", "group", "dragHandleSpacer", "columnDragHandle"] }, { kind: "directive", type: KeyboardGridDirective, selector: "table[klesKeyboardGrid]", exportAs: ["klesKeyboardGrid"] }, { kind: "directive", type: KeyboardCellDirective, selector: "td[klesKeyboardCell]", inputs: ["klesKeyboardCell", "columnDef"] }, { kind: "component", type: KlesTableEmptyStateComponent, selector: "kles-table-empty-state", outputs: ["refreshRequested"] }, { kind: "pipe", type: HeaderFieldPipe, name: "headerField" }, { kind: "pipe", type: CellFieldPipe, name: "cellField" }, { kind: "pipe", type: UiFieldPipe, name: "uiField" }, { kind: "pipe", type: FooterFieldPipe, name: "footerField" }, { kind: "pipe", type: SpanPipe, name: "spanPipe" }, { kind: "pipe", type: ExtraCellFieldPipe, name: "extraCellField" }, { kind: "pipe", type: ResolveNgStylePipe, name: "resolveNgStyle" }, { kind: "pipe", type: HeaderPipe, name: "header" }, { kind: "pipe", type: RowContextPipe, name: "rowContext" }, { kind: "pipe", type: ResolveRowStylePipe, name: "resolveRowStyle" }, { kind: "pipe", type: ResolveRowClassPipe, name: "resolveRowClass" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: TableComponent, isStandalone: true, selector: "kles-table", host: { properties: { "class.loading": "this.isLoadingClass", "class.empty": "this.isEmptyClass" } }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "formElemRef", first: true, predicate: ["form"], descendants: true, static: true }, { propertyName: "dropLists", predicate: CdkDropList, descendants: true }, { propertyName: "drags", predicate: CdkDrag, descendants: true }], ngImport: i0, template: "<form\n    #form\n    cdkScrollable\n    [formGroup]=\"tableService.form\"\n    [style.scroll-padding-top.px]=\"keyboardGrid.navigation.enabled ? headerHeightPx() : null\"\n    [style.scroll-padding-bottom.px]=\"keyboardGrid.navigation.enabled && showFooter() ? footerHeightPx() : null\"\n>\n    @if (keyboardGrid.navigation.enabled && !isEmpty()) {\n        <button type=\"button\" class=\"kles-grid-entry\" (click)=\"keyboardGrid.navigation.focusActive()\">\n            {{ intl.keyboardNavigationEntryLabel }}\n        </button>\n    }\n    <table\n        mat-table\n        klesKeyboardGrid\n        #keyboardGrid=\"klesKeyboardGrid\"\n        [dataSource]=\"dataSource\"\n        matSort\n        [trackBy]=\"multiTemplateDataRows() ? identityTrackBy : tableService.trackBy\"\n        formArrayName=\"rows\"\n        cdkDropList\n        [id]=\"dragDropRowService.dropListId\"\n        [cdkDropListData]=\"tableService.klesForm\"\n        (cdkDropListDropped)=\"dragDropRowService.listDropped($event)\"\n        [cdkDropListDisabled]=\"!dragDropRowService.enable\"\n        [cdkDropListAutoScrollStep]=\"dragDropRowService.autoScrollStep\"\n        [cdkDropListSortPredicate]=\"dragDropRowService.sortPredicate\"\n        [cdkDropListConnectedTo]=\"dragDropRowService.connectedTo ?? []\"\n        [multiTemplateDataRows]=\"multiTemplateDataRows()\"\n    >\n        <colgroup>\n            @for (column of visibleColumns(); track column.columnDef) {\n                <col\n                    [attr.data-column-def]=\"column.columnDef\"\n                    [style.width]=\"column.width ?? null\"\n                    [style.minWidth]=\"column.minWidth ?? null\"\n                    [style.maxWidth]=\"column.maxWidth ?? null\"\n                />\n            }\n        </colgroup>\n\n        @for (column of columns(); track column.columnDef) {\n            <ng-container [cdkColumnDef]=\"column.columnDef\" [sticky]=\"column.sticky ?? false\" [stickyEnd]=\"column.stickyEnd ?? false\">\n                <th\n                    mat-header-cell\n                    *matHeaderCellDef\n                    cdkDrag\n                    cdkDragLockAxis=\"x\"\n                    [cdkDragData]=\"column\"\n                    [cdkDragDisabled]=\"columnDragDropService.isDragDisabled(column)\"\n                    [appResizableColumn]=\"column\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'header') ?? getStickyStartSeparator(column, 'header')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'header')\"\n                    [ngStyle]=\"\n                        $safeNavigationMigration(column.headerCell?.style?.ngStyle)\n                            | resolveNgStyle\n                                : $safeNavigationMigration(tableService.form.get(['header', column.columnDef])?.value)\n                                : $safeNavigationMigration(tableService.form.get(['header', column.columnDef])?.status)\n                                : tableService.form.controls.header.value\n                                : tableService.form.controls.header.status\n                    \"\n                >\n                    <div class=\"cell\">\n                        <kles-header\n                            [header]=\"(column | header)!\"\n                            [group]=\"tableService.form.controls.header\"\n                            [columnDragHandle]=\"columnDragDropService.enable && !columnDragDropService.isDragDisabled(column)\"\n                            [dragHandleSpacer]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n                        >\n                            <ng-container\n                                klesDynamicField\n                                [field]=\"(column | headerField)!\"\n                                [group]=\"tableService.form.controls.header\"\n                                [ui]=\"tableService.ui.states.header\"\n                            ></ng-container>\n                        </kles-header>\n                    </div>\n                </th>\n\n                <td\n                    mat-cell\n                    *cdkCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n                    [klesKeyboardCell]=\"row\"\n                    [columnDef]=\"column.columnDef\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'body') ?? getStickyStartSeparator(column, 'body')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'body')\"\n                    [ngStyle]=\"\n                        $safeNavigationMigration(column.cell?.style?.ngStyle)\n                            | resolveNgStyle: row.controls[column.columnDef].value : row.controls[column.columnDef].status : row.value : row.status\n                    \"\n                    (click)=\"cellService.onClick($event, row, dataIndex ?? index, column.columnDef)\"\n                    (dblclick)=\"cellService.onDoubleClick($event, row, dataIndex ?? index, column.columnDef)\"\n                    (contextmenu)=\"cellService.onContextMenu($event, row, dataIndex ?? index, column.columnDef)\"\n                >\n                    <div class=\"cell\" [style.--align]=\"column.align\">\n                        <kles-cell\n                            [group]=\"row\"\n                            [ui]=\"(row | uiField)!\"\n                            [column]=\"column\"\n                            [rowIndex]=\"dataIndex ?? index\"\n                            [dragHandle]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n                        >\n                            @if (column.columnDef === selectionService.key && selectionService.isLoading(row)) {\n                                <mat-spinner class=\"selection-row-spinner\" [diameter]=\"20\"></mat-spinner>\n                            } @else {\n                                <ng-container\n                                    klesDynamicField\n                                    [field]=\"(column | cellField)!\"\n                                    [group]=\"row\"\n                                    [ui]=\"(row | uiField)!\"\n                                    [context]=\"row | rowContext\"\n                                ></ng-container>\n                            }\n                        </kles-cell>\n                    </div>\n                </td>\n\n                <td\n                    mat-footer-cell\n                    *matFooterCellDef\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'footer') ?? getStickyStartSeparator(column, 'footer')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'footer')\"\n                    [ngStyle]=\"\n                        $safeNavigationMigration(column.footerCell?.style?.ngStyle)\n                            | resolveNgStyle\n                                : $safeNavigationMigration(tableService.form.get(['footer', column.columnDef])?.value)\n                                : $safeNavigationMigration(tableService.form.get(['footer', column.columnDef])?.status)\n                                : tableService.form.controls.footer.value\n                                : tableService.form.controls.footer.status\n                    \"\n                >\n                    @if (column.footerCell) {\n                        <ng-container\n                            klesDynamicField\n                            [field]=\"(column | footerField)!\"\n                            [group]=\"tableService.form.controls.footer\"\n                            [ui]=\"tableService.ui.states.footer\"\n                        >\n                        </ng-container>\n                    }\n                </td>\n            </ng-container>\n        }\n\n        <tr\n            mat-header-row\n            class=\"kles-column-drop-list\"\n            *matHeaderRowDef=\"displayedColumns(); sticky: true\"\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            [cdkDropListData]=\"columnDragDropService.visibleColumns()\"\n            [cdkDropListDisabled]=\"!columnDragDropService.enable\"\n            [cdkDropListAutoScrollDisabled]=\"true\"\n            [cdkDropListSortPredicate]=\"columnDragDropService.sortPredicate\"\n            (cdkDropListDropped)=\"columnDragDropService.listDropped($event)\"\n        ></tr>\n\n        <tr\n            mat-row\n            *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns()\"\n            [class.kles-row-selected]=\"isRowSelected(row)\"\n            [class.kles-row-pointer]=\"cursorService.isPointer(row)\"\n            cdkDrag\n            [cdkDragData]=\"row\"\n            [cdkDragDisabled]=\"dragDropRowService.isDragDisabled(row)\"\n            [ngStyle]=\"rowAppearance.rowStyle | resolveRowStyle: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n            [ngClass]=\"rowAppearance.rowClass | resolveRowClass: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n            (cdkDragStarted)=\"dragDropRowService.rowDragStarted(row, dataIndex ?? index)\"\n            (cdkDragMoved)=\"dragDropRowService.rowDragMoved(row, dataIndex ?? index)\"\n            (cdkDragEnded)=\"dragDropRowService.rowDragEnded(row, dataIndex ?? index)\"\n            (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n            (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n            (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n            (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n            (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n        >\n            @if (dragDropRowService.previewComponent; as previewComponent) {\n                <ng-template cdkDragPreview [matchSize]=\"dragDropRowService.previewMatchSize\">\n                    <div class=\"kles-row-drag-preview\">\n                        <ng-container\n                            *ngComponentOutlet=\"previewComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n                        ></ng-container>\n                    </div>\n                </ng-template>\n            }\n\n            @if (dragDropRowService.placeholderComponent; as placeholderComponent) {\n                <ng-template cdkDragPlaceholder>\n                    <tr class=\"kles-row-drag-placeholder\">\n                        <td [attr.colspan]=\"displayedColumns()?.length ?? 1\">\n                            <ng-container\n                                *ngComponentOutlet=\"placeholderComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n                            ></ng-container>\n                        </td>\n                    </tr>\n                </ng-template>\n            }\n        </tr>\n\n        @if (multiTemplateDataRows()) {\n            @for (extraRow of extraRows(); track extraRow) {\n                @for (extraColumn of extraRow.cells; track extraColumn.columnDef) {\n                    <ng-container [cdkColumnDef]=\"extraColumn.columnDef\">\n                        <td\n                            mat-cell\n                            class=\"kles-extra-row-cell\"\n                            *cdkCellDef=\"let row\"\n                            [attr.colspan]=\"(extraColumn.colspan ?? 1) | spanPipe: displayedColumns().length\"\n                            [attr.rowspan]=\"extraColumn.rowspan\"\n                            [ngStyle]=\"\n                                $safeNavigationMigration(extraColumn?.style?.ngStyle)\n                                    | resolveNgStyle\n                                        : row.controls[extraColumn.columnDef].value\n                                        : row.controls[extraColumn.columnDef].status\n                                        : row.value\n                                        : row.status\n                            \"\n                        >\n                            <div\n                                class=\"kles-extra-row-content\"\n                                [class.kles-extra-row-content--viewport]=\"extraRow.width === 'viewport'\"\n                                [style.width.px]=\"extraRow.width === 'viewport' ? viewportWidthPx() : null\"\n                                [style.--kles-table-horizontal-scroll-range.px]=\"extraRow.width === 'viewport' ? viewportScrollRangePx() : null\"\n                            >\n                                <ng-container\n                                    klesDynamicField\n                                    [field]=\"(extraColumn | extraCellField)!\"\n                                    [group]=\"row\"\n                                    [ui]=\"(row | uiField)!\"\n                                    [context]=\"row | rowContext\"\n                                ></ng-container>\n                            </div>\n                        </td>\n                    </ng-container>\n                }\n                <tr\n                    mat-row\n                    class=\"kles-extra-row\"\n                    *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: extraRow.displayedColumns; when: extraRow.when\"\n                    (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n                    (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n                    (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n                    (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n                    (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n                ></tr>\n            }\n        }\n\n        <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\" [style.display]=\"showFooter() ? '' : 'none'\"></tr>\n    </table>\n</form>\n\n@if (loadingService.loading()) {\n    <div class=\"table-overlay\" [style.--header-h.px]=\"headerHeightPx()\" [style.--scroll-h.px]=\"scrollHeightPx()\" [style.--footer-h.px]=\"footerHeightPx()\">\n        <mat-spinner></mat-spinner>\n    </div>\n}\n\n@if (emptyStateService.enabled() && !loadingService.loading() && isEmpty()) {\n    <div\n        class=\"table-empty-state-overlay\"\n        [style.--header-h.px]=\"headerHeightPx()\"\n        [style.--scroll-h.px]=\"scrollHeightPx()\"\n        [style.--footer-h.px]=\"footerHeightPx()\"\n    >\n        <div class=\"table-empty-state-content\">\n            @if (emptyStateService.component === emptyStateComponent) {\n                <kles-table-empty-state (refreshRequested)=\"refresh()\"></kles-table-empty-state>\n            } @else {\n                <ng-container *ngComponentOutlet=\"emptyStateService.component\"></ng-container>\n            }\n        </div>\n    </div>\n}\n", styles: [":host{--kles-table-divider-color: color-mix(in srgb, var(--mat-sys-outline-variant) 65%, transparent);--kles-table-divider-strong-color: var(--mat-sys-outline-variant);--kles-table-header-background: var(--mat-sys-surface-container);--kles-table-header-color: var(--mat-sys-on-surface);--kles-table-header-divider-color: var(--mat-sys-outline-variant);--kles-table-row-hover-background: color-mix(in srgb, var(--mat-sys-primary) 4%, var(--mat-sys-surface));--kles-table-row-selected-background: color-mix(in srgb, var(--mat-sys-primary) 7%, var(--mat-sys-surface));--kles-table-row-selected-hover-background: color-mix(in srgb, var(--mat-sys-primary) 10%, var(--mat-sys-surface));--kles-table-row-selected-indicator-color: var(--mat-sys-primary);overflow:auto;display:flex;flex-direction:column;position:relative;height:100%;--mat-form-field-filled-container-color: transparent;--mat-form-field-hover-state-layer-opacity: 0;--mat-form-field-focus-state-layer-opacity: 0;--mat-form-field-state-layer-color: transparent}:host(.loading),:host(.empty){min-height:280px}form{display:flex;flex-direction:column;flex-grow:1;position:relative;overflow:auto;scroll-timeline-name:--kles-table-horizontal-scroll;scroll-timeline-axis:inline}.kles-row-pointer{cursor:pointer}.kles-keyboard-cell:focus-visible{outline:2px solid var(--mat-sys-primary, Highlight);outline-offset:-2px}.kles-grid-entry{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.kles-grid-entry:focus-visible{top:4px;left:4px;z-index:10;width:auto;height:auto;padding:8px 12px;clip-path:none;background:var(--mat-sys-surface, white);color:var(--mat-sys-on-surface, black);outline:2px solid var(--mat-sys-primary, Highlight)}table{width:100%;flex-grow:1}th,td{text-wrap:pretty;white-space:normal;padding-top:2px;padding-bottom:2px;box-sizing:border-box}td{word-break:normal}:host td.kles-extra-row-cell{padding:0}.kles-extra-row-content--viewport{box-sizing:border-box;animation:kles-extra-row-horizontal-scroll 1ms linear both paused}@supports (animation-timeline: scroll()){.kles-extra-row-content--viewport{animation-play-state:running;animation-timeline:--kles-table-horizontal-scroll}}@keyframes kles-extra-row-horizontal-scroll{0%{transform:translate(0)}to{transform:translate(var(--kles-table-horizontal-scroll-range, 0px))}}th .cell,td .cell{display:flex;flex-direction:column;justify-content:var(--align, center)}th[appResizableColumn].resizable-column{position:relative}th[appResizableColumn]>.resize-handle{position:absolute;top:0;inset-inline-end:-7px;z-index:20;width:14px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;outline:none}th[appResizableColumn]>.resize-handle:before{content:\"\";position:absolute;top:15%;bottom:15%;inset-inline-start:6px;width:2px;border-radius:2px;background:var(--mat-sys-outline);opacity:0;transition:opacity .12s ease,background-color .12s ease,transform .12s ease}th[appResizableColumn].resizable-column:hover>.resize-handle:before,th[appResizableColumn]>.resize-handle:focus-visible:before{opacity:.65}th[appResizableColumn].column-resizing>.resize-handle:before{top:0;bottom:0;background:var(--mat-sys-primary);opacity:1;transform:scaleX(1.25)}th[appResizableColumn].column-resizing>.resize-handle:after{content:\"\";position:absolute;top:100%;inset-inline-start:6px;width:2px;height:100vh;background:color-mix(in srgb,var(--mat-sys-primary) 70%,transparent);pointer-events:none}th[appResizableColumn]>.resize-handle>.resize-width-label{position:absolute;top:calc(100% + 8px);inset-inline-start:50%;z-index:30;display:none;padding:3px 7px;color:var(--mat-sys-on-primary);font-size:11px;font-weight:600;line-height:16px;white-space:nowrap;background:var(--mat-sys-primary);border-radius:var(--mat-sys-corner-extra-small);box-shadow:var(--mat-sys-level2);transform:translate(-50%);pointer-events:none}th[appResizableColumn].column-resizing>.resize-handle>.resize-width-label{display:block}:host .column-resizing-cell{width:var(--kles-column-resize-width)!important;min-width:var(--kles-column-resize-width)!important;max-width:var(--kles-column-resize-width)!important;flex:0 0 var(--kles-column-resize-width)!important;background-image:linear-gradient(color-mix(in srgb,var(--mat-sys-primary) 5%,transparent),color-mix(in srgb,var(--mat-sys-primary) 5%,transparent))}.table-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));display:grid;place-items:center;background:color-mix(in srgb,var(--mat-sys-surface-container-highest) 75%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-outline-variant) 30%,transparent);z-index:500}:host .mat-mdc-row:not(.kles-extra-row){transition:background-color .12s ease}:host .mat-mdc-row:not(.kles-extra-row):hover{background:var(--kles-table-row-hover-background)}:host .mat-mdc-row:not(.kles-extra-row).kles-row-selected{background:var(--kles-table-row-selected-background);box-shadow:inset 3px 0 0 var(--kles-table-row-selected-indicator-color)}:host .mat-mdc-row:not(.kles-extra-row).kles-row-selected:hover{background:var(--kles-table-row-selected-hover-background)}:host tr.mat-mdc-row.cdk-drag-placeholder{opacity:1;background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))!important}:host tr.mat-mdc-row.cdk-drag-placeholder td{border-block:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td>*{visibility:hidden}:host tr.mat-mdc-row.cdk-drag-placeholder td:first-child{border-inline-start:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td:last-child{border-inline-end:2px dashed var(--mat-sys-primary)}:host .cdk-drop-list-dragging tr.mat-mdc-row:not(.cdk-drag-placeholder),:host tr.mat-mdc-row.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}:host .kles-column-drop-list.cdk-drop-list-dragging .mat-mdc-header-cell:not(.cdk-drag-placeholder),:host .mat-mdc-header-cell.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}:host .mat-mdc-header-cell.cdk-drag-placeholder{opacity:.25}.mat-mdc-header-cell.cdk-drag-preview{box-sizing:border-box;background:var(--kles-table-header-background);color:var(--kles-table-header-color);box-shadow:var(--mat-sys-level3)}.kles-row-drag-preview{overflow:hidden;border-radius:var(--mat-sys-corner-small);background:var(--mat-sys-surface-container);box-shadow:var(--mat-sys-level3)}.selection-row-spinner{margin-inline:auto}:host tr.kles-row-drag-placeholder td{padding:0;border:2px dashed var(--mat-sys-primary);background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))}:host .mat-mdc-table .mat-mdc-cell,:host .mat-mdc-table .mat-mdc-header-cell{border-bottom-color:var(--mat-sys-outline-variant)}:host .mat-mdc-table .mat-mdc-cell:last-child,:host .mat-mdc-table .mat-mdc-header-cell:last-child{border-right:none}:host tr.mat-mdc-footer-row td.mat-mdc-footer-cell{border-top:1px solid var(--kles-table-divider-strong-color)}:host tr.mat-mdc-row:last-of-type td.mat-mdc-cell{border-bottom:1px solid var(--kles-table-divider-color)}:host tr.mat-mdc-footer-row{font-weight:500}:host .mat-mdc-header-row,:host .mat-mdc-header-cell{background-color:var(--kles-table-header-background);color:var(--kles-table-header-color)}:host .mat-mdc-header-cell{border-bottom-color:var(--kles-table-header-divider-color)}.table-empty-state-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));z-index:400;overflow-x:hidden;overflow-y:auto;container-type:size;container-name:kles-empty-state;background:var(--mat-sys-surface);display:grid;place-items:center}.table-empty-state-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:100%;padding:16px;box-sizing:border-box}@container kles-empty-state (max-height: 220px){.table-empty-state-content{padding:8px}}.scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none;overflow-y:hidden}.scrollbar-hidden::-webkit-scrollbar{display:none;overflow-y:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i18.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i18.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i18.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i19.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i19.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i19.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i19.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i21.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i21.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i21.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i21.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i21.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i21.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i21.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i21.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i21.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i21.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i21.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i21.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: CdkTableModule }, { kind: "directive", type: i22.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i22.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i23.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "ngmodule", type: KlesMaterialDynamicformsModule }, { kind: "directive", type: i24.KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i25.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i25.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i25.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i25.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i26.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: ResizableColumnDirective, selector: "th[appResizableColumn]", inputs: ["appResizableColumn"] }, { kind: "component", type: KlesCellComponent, selector: "kles-cell", inputs: ["ui", "group", "column", "rowIndex", "dragHandle"] }, { kind: "component", type: KlesHeaderComponent, selector: "kles-header", inputs: ["header", "group", "dragHandleSpacer", "columnDragHandle"] }, { kind: "directive", type: KeyboardGridDirective, selector: "table[klesKeyboardGrid]", exportAs: ["klesKeyboardGrid"] }, { kind: "directive", type: KeyboardCellDirective, selector: "td[klesKeyboardCell]", inputs: ["klesKeyboardCell", "columnDef"] }, { kind: "component", type: KlesTableEmptyStateComponent, selector: "kles-table-empty-state", outputs: ["refreshRequested"] }, { kind: "pipe", type: HeaderFieldPipe, name: "headerField" }, { kind: "pipe", type: CellFieldPipe, name: "cellField" }, { kind: "pipe", type: UiFieldPipe, name: "uiField" }, { kind: "pipe", type: FooterFieldPipe, name: "footerField" }, { kind: "pipe", type: SpanPipe, name: "spanPipe" }, { kind: "pipe", type: ExtraCellFieldPipe, name: "extraCellField" }, { kind: "pipe", type: ResolveNgStylePipe, name: "resolveNgStyle" }, { kind: "pipe", type: HeaderPipe, name: "header" }, { kind: "pipe", type: RowContextPipe, name: "rowContext" }, { kind: "pipe", type: ResolveRowStylePipe, name: "resolveRowStyle" }, { kind: "pipe", type: ResolveRowClassPipe, name: "resolveRowClass" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -3536,7 +3541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         KeyboardGridDirective,
                         KeyboardCellDirective,
                         KlesTableEmptyStateComponent,
-                    ], template: "<form\n    #form\n    cdkScrollable\n    [formGroup]=\"tableService.form\"\n    [style.scroll-padding-top.px]=\"keyboardGrid.navigation.enabled ? headerHeightPx() : null\"\n    [style.scroll-padding-bottom.px]=\"keyboardGrid.navigation.enabled && showFooter() ? footerHeightPx() : null\"\n>\n    @if (keyboardGrid.navigation.enabled && !isEmpty()) {\n        <button type=\"button\" class=\"kles-grid-entry\" (click)=\"keyboardGrid.navigation.focusActive()\">\n            {{ intl.keyboardNavigationEntryLabel }}\n        </button>\n    }\n    <table\n        mat-table\n        klesKeyboardGrid\n        #keyboardGrid=\"klesKeyboardGrid\"\n        [dataSource]=\"dataSource\"\n        matSort\n        [trackBy]=\"multiTemplateDataRows() ? identityTrackBy : tableService.trackBy\"\n        formArrayName=\"rows\"\n        cdkDropList\n        [id]=\"dragDropRowService.dropListId\"\n        [cdkDropListData]=\"tableService.klesForm\"\n        (cdkDropListDropped)=\"dragDropRowService.listDropped($event)\"\n        [cdkDropListDisabled]=\"!dragDropRowService.enable\"\n        [cdkDropListAutoScrollStep]=\"dragDropRowService.autoScrollStep\"\n        [cdkDropListSortPredicate]=\"dragDropRowService.sortPredicate\"\n        [cdkDropListConnectedTo]=\"dragDropRowService.connectedTo ?? []\"\n        [multiTemplateDataRows]=\"multiTemplateDataRows()\"\n    >\n        <colgroup>\n            @for (column of columns(); track column.columnDef) {\n                <col\n                    [attr.data-column-def]=\"column.columnDef\"\n                    [style.width]=\"column.width ?? null\"\n                    [style.minWidth]=\"column.minWidth ?? null\"\n                    [style.maxWidth]=\"column.maxWidth ?? null\"\n                />\n            }\n        </colgroup>\n\n        @for (column of columns(); track column.columnDef) {\n            <ng-container [cdkColumnDef]=\"column.columnDef\" [sticky]=\"column.sticky ?? false\" [stickyEnd]=\"column.stickyEnd ?? false\">\n                <th\n                    mat-header-cell\n                    *matHeaderCellDef\n                    cdkDrag\n                    cdkDragLockAxis=\"x\"\n                    [cdkDragData]=\"column\"\n                    [cdkDragDisabled]=\"columnDragDropService.isDragDisabled(column)\"\n                    [appResizableColumn]=\"column\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'header') ?? getStickyStartSeparator(column, 'header')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'header')\"\n                    [ngStyle]=\"\n                        $safeNavigationMigration(column.headerCell?.style?.ngStyle)\n                            | resolveNgStyle\n                                : $safeNavigationMigration(tableService.form.get(['header', column.columnDef])?.value)\n                                : $safeNavigationMigration(tableService.form.get(['header', column.columnDef])?.status)\n                                : tableService.form.controls.header.value\n                                : tableService.form.controls.header.status\n                    \"\n                >\n                    <div class=\"cell\">\n                        <kles-header\n                            [header]=\"(column | header)!\"\n                            [group]=\"tableService.form.controls.header\"\n                            [columnDragHandle]=\"columnDragDropService.enable && !columnDragDropService.isDragDisabled(column)\"\n                            [dragHandleSpacer]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n                        >\n                            <ng-container\n                                klesDynamicField\n                                [field]=\"(column | headerField)!\"\n                                [group]=\"tableService.form.controls.header\"\n                                [ui]=\"tableService.ui.states.header\"\n                            ></ng-container>\n                        </kles-header>\n                    </div>\n                </th>\n\n                <td\n                    mat-cell\n                    *cdkCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n                    [klesKeyboardCell]=\"row\"\n                    [columnDef]=\"column.columnDef\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'body') ?? getStickyStartSeparator(column, 'body')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'body')\"\n                    [ngStyle]=\"\n                        $safeNavigationMigration(column.cell?.style?.ngStyle)\n                            | resolveNgStyle: row.controls[column.columnDef].value : row.controls[column.columnDef].status : row.value : row.status\n                    \"\n                    (click)=\"cellService.onClick($event, row, dataIndex ?? index, column.columnDef)\"\n                    (dblclick)=\"cellService.onDoubleClick($event, row, dataIndex ?? index, column.columnDef)\"\n                    (contextmenu)=\"cellService.onContextMenu($event, row, dataIndex ?? index, column.columnDef)\"\n                >\n                    <div class=\"cell\" [style.--align]=\"column.align\">\n                        <kles-cell\n                            [group]=\"row\"\n                            [ui]=\"(row | uiField)!\"\n                            [column]=\"column\"\n                            [rowIndex]=\"dataIndex ?? index\"\n                            [dragHandle]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n                        >\n                            @if (column.columnDef === selectionService.key && selectionService.isLoading(row)) {\n                                <mat-spinner class=\"selection-row-spinner\" [diameter]=\"20\"></mat-spinner>\n                            } @else {\n                                <ng-container\n                                    klesDynamicField\n                                    [field]=\"(column | cellField)!\"\n                                    [group]=\"row\"\n                                    [ui]=\"(row | uiField)!\"\n                                    [context]=\"row | rowContext\"\n                                ></ng-container>\n                            }\n                        </kles-cell>\n                    </div>\n                </td>\n\n                <td\n                    mat-footer-cell\n                    *matFooterCellDef\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'footer') ?? getStickyStartSeparator(column, 'footer')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'footer')\"\n                    [ngStyle]=\"\n                        $safeNavigationMigration(column.footerCell?.style?.ngStyle)\n                            | resolveNgStyle\n                                : $safeNavigationMigration(tableService.form.get(['footer', column.columnDef])?.value)\n                                : $safeNavigationMigration(tableService.form.get(['footer', column.columnDef])?.status)\n                                : tableService.form.controls.footer.value\n                                : tableService.form.controls.footer.status\n                    \"\n                >\n                    @if (column.footerCell) {\n                        <ng-container\n                            klesDynamicField\n                            [field]=\"(column | footerField)!\"\n                            [group]=\"tableService.form.controls.footer\"\n                            [ui]=\"tableService.ui.states.footer\"\n                        >\n                        </ng-container>\n                    }\n                </td>\n            </ng-container>\n        }\n\n        <tr\n            mat-header-row\n            class=\"kles-column-drop-list\"\n            *matHeaderRowDef=\"displayedColumns(); sticky: true\"\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            [cdkDropListData]=\"columnDragDropService.visibleColumns()\"\n            [cdkDropListDisabled]=\"!columnDragDropService.enable\"\n            [cdkDropListAutoScrollDisabled]=\"true\"\n            [cdkDropListSortPredicate]=\"columnDragDropService.sortPredicate\"\n            (cdkDropListDropped)=\"columnDragDropService.listDropped($event)\"\n        ></tr>\n\n        <tr\n            mat-row\n            *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns()\"\n            [class.kles-row-selected]=\"isRowSelected(row)\"\n            [class.kles-row-pointer]=\"cursorService.isPointer(row)\"\n            cdkDrag\n            [cdkDragData]=\"row\"\n            [cdkDragDisabled]=\"dragDropRowService.isDragDisabled(row)\"\n            [ngStyle]=\"rowAppearance.rowStyle | resolveRowStyle: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n            [ngClass]=\"rowAppearance.rowClass | resolveRowClass: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n            (cdkDragStarted)=\"dragDropRowService.rowDragStarted(row, dataIndex ?? index)\"\n            (cdkDragMoved)=\"dragDropRowService.rowDragMoved(row, dataIndex ?? index)\"\n            (cdkDragEnded)=\"dragDropRowService.rowDragEnded(row, dataIndex ?? index)\"\n            (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n            (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n            (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n            (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n            (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n        >\n            @if (dragDropRowService.previewComponent; as previewComponent) {\n                <ng-template cdkDragPreview [matchSize]=\"dragDropRowService.previewMatchSize\">\n                    <div class=\"kles-row-drag-preview\">\n                        <ng-container\n                            *ngComponentOutlet=\"previewComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n                        ></ng-container>\n                    </div>\n                </ng-template>\n            }\n\n            @if (dragDropRowService.placeholderComponent; as placeholderComponent) {\n                <ng-template cdkDragPlaceholder>\n                    <tr class=\"kles-row-drag-placeholder\">\n                        <td [attr.colspan]=\"displayedColumns()?.length ?? 1\">\n                            <ng-container\n                                *ngComponentOutlet=\"placeholderComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n                            ></ng-container>\n                        </td>\n                    </tr>\n                </ng-template>\n            }\n        </tr>\n\n        @if (multiTemplateDataRows()) {\n            @for (extraRow of extraRows(); track extraRow) {\n                @for (extraColumn of extraRow.cells; track extraColumn.columnDef) {\n                    <ng-container [cdkColumnDef]=\"extraColumn.columnDef\">\n                        <td\n                            mat-cell\n                            class=\"kles-extra-row-cell\"\n                            *cdkCellDef=\"let row\"\n                            [attr.colspan]=\"(extraColumn.colspan ?? 1) | spanPipe: displayedColumns().length\"\n                            [attr.rowspan]=\"extraColumn.rowspan\"\n                            [ngStyle]=\"\n                                $safeNavigationMigration(extraColumn?.style?.ngStyle)\n                                    | resolveNgStyle\n                                        : row.controls[extraColumn.columnDef].value\n                                        : row.controls[extraColumn.columnDef].status\n                                        : row.value\n                                        : row.status\n                            \"\n                        >\n                            <div\n                                class=\"kles-extra-row-content\"\n                                [class.kles-extra-row-content--viewport]=\"extraRow.width === 'viewport'\"\n                                [style.width.px]=\"extraRow.width === 'viewport' ? viewportWidthPx() : null\"\n                                [style.--kles-table-horizontal-scroll-range.px]=\"extraRow.width === 'viewport' ? viewportScrollRangePx() : null\"\n                            >\n                                <ng-container\n                                    klesDynamicField\n                                    [field]=\"(extraColumn | extraCellField)!\"\n                                    [group]=\"row\"\n                                    [ui]=\"(row | uiField)!\"\n                                    [context]=\"row | rowContext\"\n                                ></ng-container>\n                            </div>\n                        </td>\n                    </ng-container>\n                }\n                <tr\n                    mat-row\n                    class=\"kles-extra-row\"\n                    *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: extraRow.displayedColumns; when: extraRow.when\"\n                    (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n                    (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n                    (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n                    (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n                    (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n                ></tr>\n            }\n        }\n\n        <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\" [style.display]=\"showFooter() ? '' : 'none'\"></tr>\n    </table>\n</form>\n\n@if (loadingService.loading()) {\n    <div class=\"table-overlay\" [style.--header-h.px]=\"headerHeightPx()\" [style.--scroll-h.px]=\"scrollHeightPx()\" [style.--footer-h.px]=\"footerHeightPx()\">\n        <mat-spinner></mat-spinner>\n    </div>\n}\n\n@if (emptyStateService.enabled() && !loadingService.loading() && isEmpty()) {\n    <div\n        class=\"table-empty-state-overlay\"\n        [style.--header-h.px]=\"headerHeightPx()\"\n        [style.--scroll-h.px]=\"scrollHeightPx()\"\n        [style.--footer-h.px]=\"footerHeightPx()\"\n    >\n        <div class=\"table-empty-state-content\">\n            @if (emptyStateService.component === emptyStateComponent) {\n                <kles-table-empty-state (refreshRequested)=\"refresh()\"></kles-table-empty-state>\n            } @else {\n                <ng-container *ngComponentOutlet=\"emptyStateService.component\"></ng-container>\n            }\n        </div>\n    </div>\n}\n", styles: [":host{--kles-table-divider-color: color-mix(in srgb, var(--mat-sys-outline-variant) 65%, transparent);--kles-table-divider-strong-color: var(--mat-sys-outline-variant);--kles-table-header-background: var(--mat-sys-surface-container);--kles-table-header-color: var(--mat-sys-on-surface);--kles-table-header-divider-color: var(--mat-sys-outline-variant);--kles-table-row-hover-background: color-mix(in srgb, var(--mat-sys-primary) 4%, var(--mat-sys-surface));--kles-table-row-selected-background: color-mix(in srgb, var(--mat-sys-primary) 7%, var(--mat-sys-surface));--kles-table-row-selected-hover-background: color-mix(in srgb, var(--mat-sys-primary) 10%, var(--mat-sys-surface));--kles-table-row-selected-indicator-color: var(--mat-sys-primary);overflow:auto;display:flex;flex-direction:column;position:relative;height:100%;--mat-form-field-filled-container-color: transparent;--mat-form-field-hover-state-layer-opacity: 0;--mat-form-field-focus-state-layer-opacity: 0;--mat-form-field-state-layer-color: transparent}:host(.loading),:host(.empty){min-height:280px}form{display:flex;flex-direction:column;flex-grow:1;position:relative;overflow:auto;scroll-timeline-name:--kles-table-horizontal-scroll;scroll-timeline-axis:inline}.kles-row-pointer{cursor:pointer}.kles-keyboard-cell:focus-visible{outline:2px solid var(--mat-sys-primary, Highlight);outline-offset:-2px}.kles-grid-entry{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.kles-grid-entry:focus-visible{top:4px;left:4px;z-index:10;width:auto;height:auto;padding:8px 12px;clip-path:none;background:var(--mat-sys-surface, white);color:var(--mat-sys-on-surface, black);outline:2px solid var(--mat-sys-primary, Highlight)}table{width:100%;flex-grow:1}th,td{text-wrap:pretty;white-space:normal;padding-top:2px;padding-bottom:2px;box-sizing:border-box}td{word-break:normal}:host td.kles-extra-row-cell{padding:0}.kles-extra-row-content--viewport{box-sizing:border-box;animation:kles-extra-row-horizontal-scroll 1ms linear both paused}@supports (animation-timeline: scroll()){.kles-extra-row-content--viewport{animation-play-state:running;animation-timeline:--kles-table-horizontal-scroll}}@keyframes kles-extra-row-horizontal-scroll{0%{transform:translate(0)}to{transform:translate(var(--kles-table-horizontal-scroll-range, 0px))}}th .cell,td .cell{display:flex;flex-direction:column;justify-content:var(--align, center)}th[appResizableColumn].resizable-column{position:relative}th[appResizableColumn]>.resize-handle{position:absolute;top:0;inset-inline-end:-7px;z-index:20;width:14px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;outline:none}th[appResizableColumn]>.resize-handle:before{content:\"\";position:absolute;top:15%;bottom:15%;inset-inline-start:6px;width:2px;border-radius:2px;background:var(--mat-sys-outline);opacity:0;transition:opacity .12s ease,background-color .12s ease,transform .12s ease}th[appResizableColumn].resizable-column:hover>.resize-handle:before,th[appResizableColumn]>.resize-handle:focus-visible:before{opacity:.65}th[appResizableColumn].column-resizing>.resize-handle:before{top:0;bottom:0;background:var(--mat-sys-primary);opacity:1;transform:scaleX(1.25)}th[appResizableColumn].column-resizing>.resize-handle:after{content:\"\";position:absolute;top:100%;inset-inline-start:6px;width:2px;height:100vh;background:color-mix(in srgb,var(--mat-sys-primary) 70%,transparent);pointer-events:none}th[appResizableColumn]>.resize-handle>.resize-width-label{position:absolute;top:calc(100% + 8px);inset-inline-start:50%;z-index:30;display:none;padding:3px 7px;color:var(--mat-sys-on-primary);font-size:11px;font-weight:600;line-height:16px;white-space:nowrap;background:var(--mat-sys-primary);border-radius:var(--mat-sys-corner-extra-small);box-shadow:var(--mat-sys-level2);transform:translate(-50%);pointer-events:none}th[appResizableColumn].column-resizing>.resize-handle>.resize-width-label{display:block}:host .column-resizing-cell{width:var(--kles-column-resize-width)!important;min-width:var(--kles-column-resize-width)!important;max-width:var(--kles-column-resize-width)!important;flex:0 0 var(--kles-column-resize-width)!important;background-image:linear-gradient(color-mix(in srgb,var(--mat-sys-primary) 5%,transparent),color-mix(in srgb,var(--mat-sys-primary) 5%,transparent))}.table-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));display:grid;place-items:center;background:color-mix(in srgb,var(--mat-sys-surface-container-highest) 75%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-outline-variant) 30%,transparent);z-index:500}:host .mat-mdc-row:not(.kles-extra-row){transition:background-color .12s ease}:host .mat-mdc-row:not(.kles-extra-row):hover{background:var(--kles-table-row-hover-background)}:host .mat-mdc-row:not(.kles-extra-row).kles-row-selected{background:var(--kles-table-row-selected-background);box-shadow:inset 3px 0 0 var(--kles-table-row-selected-indicator-color)}:host .mat-mdc-row:not(.kles-extra-row).kles-row-selected:hover{background:var(--kles-table-row-selected-hover-background)}:host tr.mat-mdc-row.cdk-drag-placeholder{opacity:1;background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))!important}:host tr.mat-mdc-row.cdk-drag-placeholder td{border-block:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td>*{visibility:hidden}:host tr.mat-mdc-row.cdk-drag-placeholder td:first-child{border-inline-start:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td:last-child{border-inline-end:2px dashed var(--mat-sys-primary)}:host .cdk-drop-list-dragging tr.mat-mdc-row:not(.cdk-drag-placeholder),:host tr.mat-mdc-row.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}:host .kles-column-drop-list.cdk-drop-list-dragging .mat-mdc-header-cell:not(.cdk-drag-placeholder),:host .mat-mdc-header-cell.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}:host .mat-mdc-header-cell.cdk-drag-placeholder{opacity:.25}.mat-mdc-header-cell.cdk-drag-preview{box-sizing:border-box;background:var(--kles-table-header-background);color:var(--kles-table-header-color);box-shadow:var(--mat-sys-level3)}.kles-row-drag-preview{overflow:hidden;border-radius:var(--mat-sys-corner-small);background:var(--mat-sys-surface-container);box-shadow:var(--mat-sys-level3)}.selection-row-spinner{margin-inline:auto}:host tr.kles-row-drag-placeholder td{padding:0;border:2px dashed var(--mat-sys-primary);background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))}:host .mat-mdc-table .mat-mdc-cell,:host .mat-mdc-table .mat-mdc-header-cell{border-bottom-color:var(--mat-sys-outline-variant)}:host .mat-mdc-table .mat-mdc-cell:last-child,:host .mat-mdc-table .mat-mdc-header-cell:last-child{border-right:none}:host tr.mat-mdc-footer-row td.mat-mdc-footer-cell{border-top:1px solid var(--kles-table-divider-strong-color)}:host tr.mat-mdc-row:last-of-type td.mat-mdc-cell{border-bottom:1px solid var(--kles-table-divider-color)}:host tr.mat-mdc-footer-row{font-weight:500}:host .mat-mdc-header-row,:host .mat-mdc-header-cell{background-color:var(--kles-table-header-background);color:var(--kles-table-header-color)}:host .mat-mdc-header-cell{border-bottom-color:var(--kles-table-header-divider-color)}.table-empty-state-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));z-index:400;overflow-x:hidden;overflow-y:auto;container-type:size;container-name:kles-empty-state;background:var(--mat-sys-surface);display:grid;place-items:center}.table-empty-state-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:100%;padding:16px;box-sizing:border-box}@container kles-empty-state (max-height: 220px){.table-empty-state-content{padding:8px}}.scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none;overflow-y:hidden}.scrollbar-hidden::-webkit-scrollbar{display:none;overflow-y:hidden}\n"] }]
+                    ], template: "<form\n    #form\n    cdkScrollable\n    [formGroup]=\"tableService.form\"\n    [style.scroll-padding-top.px]=\"keyboardGrid.navigation.enabled ? headerHeightPx() : null\"\n    [style.scroll-padding-bottom.px]=\"keyboardGrid.navigation.enabled && showFooter() ? footerHeightPx() : null\"\n>\n    @if (keyboardGrid.navigation.enabled && !isEmpty()) {\n        <button type=\"button\" class=\"kles-grid-entry\" (click)=\"keyboardGrid.navigation.focusActive()\">\n            {{ intl.keyboardNavigationEntryLabel }}\n        </button>\n    }\n    <table\n        mat-table\n        klesKeyboardGrid\n        #keyboardGrid=\"klesKeyboardGrid\"\n        [dataSource]=\"dataSource\"\n        matSort\n        [trackBy]=\"multiTemplateDataRows() ? identityTrackBy : tableService.trackBy\"\n        formArrayName=\"rows\"\n        cdkDropList\n        [id]=\"dragDropRowService.dropListId\"\n        [cdkDropListData]=\"tableService.klesForm\"\n        (cdkDropListDropped)=\"dragDropRowService.listDropped($event)\"\n        [cdkDropListDisabled]=\"!dragDropRowService.enable\"\n        [cdkDropListAutoScrollStep]=\"dragDropRowService.autoScrollStep\"\n        [cdkDropListSortPredicate]=\"dragDropRowService.sortPredicate\"\n        [cdkDropListConnectedTo]=\"dragDropRowService.connectedTo ?? []\"\n        [multiTemplateDataRows]=\"multiTemplateDataRows()\"\n    >\n        <colgroup>\n            @for (column of visibleColumns(); track column.columnDef) {\n                <col\n                    [attr.data-column-def]=\"column.columnDef\"\n                    [style.width]=\"column.width ?? null\"\n                    [style.minWidth]=\"column.minWidth ?? null\"\n                    [style.maxWidth]=\"column.maxWidth ?? null\"\n                />\n            }\n        </colgroup>\n\n        @for (column of columns(); track column.columnDef) {\n            <ng-container [cdkColumnDef]=\"column.columnDef\" [sticky]=\"column.sticky ?? false\" [stickyEnd]=\"column.stickyEnd ?? false\">\n                <th\n                    mat-header-cell\n                    *matHeaderCellDef\n                    cdkDrag\n                    cdkDragLockAxis=\"x\"\n                    [cdkDragData]=\"column\"\n                    [cdkDragDisabled]=\"columnDragDropService.isDragDisabled(column)\"\n                    [appResizableColumn]=\"column\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'header') ?? getStickyStartSeparator(column, 'header')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'header')\"\n                    [ngStyle]=\"\n                        $safeNavigationMigration(column.headerCell?.style?.ngStyle)\n                            | resolveNgStyle\n                                : $safeNavigationMigration(tableService.form.get(['header', column.columnDef])?.value)\n                                : $safeNavigationMigration(tableService.form.get(['header', column.columnDef])?.status)\n                                : tableService.form.controls.header.value\n                                : tableService.form.controls.header.status\n                    \"\n                >\n                    <div class=\"cell\">\n                        <kles-header\n                            [header]=\"(column | header)!\"\n                            [group]=\"tableService.form.controls.header\"\n                            [columnDragHandle]=\"columnDragDropService.enable && !columnDragDropService.isDragDisabled(column)\"\n                            [dragHandleSpacer]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n                        >\n                            <ng-container\n                                klesDynamicField\n                                [field]=\"(column | headerField)!\"\n                                [group]=\"tableService.form.controls.header\"\n                                [ui]=\"tableService.ui.states.header\"\n                            ></ng-container>\n                        </kles-header>\n                    </div>\n                </th>\n\n                <td\n                    mat-cell\n                    *cdkCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n                    [klesKeyboardCell]=\"row\"\n                    [columnDef]=\"column.columnDef\"\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'body') ?? getStickyStartSeparator(column, 'body')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'body')\"\n                    [ngStyle]=\"\n                        $safeNavigationMigration(column.cell?.style?.ngStyle)\n                            | resolveNgStyle: row.controls[column.columnDef].value : row.controls[column.columnDef].status : row.value : row.status\n                    \"\n                    (click)=\"cellService.onClick($event, row, dataIndex ?? index, column.columnDef)\"\n                    (dblclick)=\"cellService.onDoubleClick($event, row, dataIndex ?? index, column.columnDef)\"\n                    (contextmenu)=\"cellService.onContextMenu($event, row, dataIndex ?? index, column.columnDef)\"\n                >\n                    <div class=\"cell\" [style.--align]=\"column.align\">\n                        <kles-cell\n                            [group]=\"row\"\n                            [ui]=\"(row | uiField)!\"\n                            [column]=\"column\"\n                            [rowIndex]=\"dataIndex ?? index\"\n                            [dragHandle]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n                        >\n                            @if (column.columnDef === selectionService.key && selectionService.isLoading(row)) {\n                                <mat-spinner class=\"selection-row-spinner\" [diameter]=\"20\"></mat-spinner>\n                            } @else {\n                                <ng-container\n                                    klesDynamicField\n                                    [field]=\"(column | cellField)!\"\n                                    [group]=\"row\"\n                                    [ui]=\"(row | uiField)!\"\n                                    [context]=\"row | rowContext\"\n                                ></ng-container>\n                            }\n                        </kles-cell>\n                    </div>\n                </td>\n\n                <td\n                    mat-footer-cell\n                    *matFooterCellDef\n                    [style.border-inline-end]=\"getColumnSeparator(column, 'footer') ?? getStickyStartSeparator(column, 'footer')\"\n                    [style.border-inline-start]=\"getStickyEndSeparator(column, 'footer')\"\n                    [ngStyle]=\"\n                        $safeNavigationMigration(column.footerCell?.style?.ngStyle)\n                            | resolveNgStyle\n                                : $safeNavigationMigration(tableService.form.get(['footer', column.columnDef])?.value)\n                                : $safeNavigationMigration(tableService.form.get(['footer', column.columnDef])?.status)\n                                : tableService.form.controls.footer.value\n                                : tableService.form.controls.footer.status\n                    \"\n                >\n                    @if (column.footerCell) {\n                        <ng-container\n                            klesDynamicField\n                            [field]=\"(column | footerField)!\"\n                            [group]=\"tableService.form.controls.footer\"\n                            [ui]=\"tableService.ui.states.footer\"\n                        >\n                        </ng-container>\n                    }\n                </td>\n            </ng-container>\n        }\n\n        <tr\n            mat-header-row\n            class=\"kles-column-drop-list\"\n            *matHeaderRowDef=\"displayedColumns(); sticky: true\"\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            [cdkDropListData]=\"columnDragDropService.visibleColumns()\"\n            [cdkDropListDisabled]=\"!columnDragDropService.enable\"\n            [cdkDropListAutoScrollDisabled]=\"true\"\n            [cdkDropListSortPredicate]=\"columnDragDropService.sortPredicate\"\n            (cdkDropListDropped)=\"columnDragDropService.listDropped($event)\"\n        ></tr>\n\n        <tr\n            mat-row\n            *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns()\"\n            [class.kles-row-selected]=\"isRowSelected(row)\"\n            [class.kles-row-pointer]=\"cursorService.isPointer(row)\"\n            cdkDrag\n            [cdkDragData]=\"row\"\n            [cdkDragDisabled]=\"dragDropRowService.isDragDisabled(row)\"\n            [ngStyle]=\"rowAppearance.rowStyle | resolveRowStyle: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n            [ngClass]=\"rowAppearance.rowClass | resolveRowClass: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n            (cdkDragStarted)=\"dragDropRowService.rowDragStarted(row, dataIndex ?? index)\"\n            (cdkDragMoved)=\"dragDropRowService.rowDragMoved(row, dataIndex ?? index)\"\n            (cdkDragEnded)=\"dragDropRowService.rowDragEnded(row, dataIndex ?? index)\"\n            (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n            (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n            (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n            (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n            (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n        >\n            @if (dragDropRowService.previewComponent; as previewComponent) {\n                <ng-template cdkDragPreview [matchSize]=\"dragDropRowService.previewMatchSize\">\n                    <div class=\"kles-row-drag-preview\">\n                        <ng-container\n                            *ngComponentOutlet=\"previewComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n                        ></ng-container>\n                    </div>\n                </ng-template>\n            }\n\n            @if (dragDropRowService.placeholderComponent; as placeholderComponent) {\n                <ng-template cdkDragPlaceholder>\n                    <tr class=\"kles-row-drag-placeholder\">\n                        <td [attr.colspan]=\"displayedColumns()?.length ?? 1\">\n                            <ng-container\n                                *ngComponentOutlet=\"placeholderComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n                            ></ng-container>\n                        </td>\n                    </tr>\n                </ng-template>\n            }\n        </tr>\n\n        @if (multiTemplateDataRows()) {\n            @for (extraRow of extraRows(); track extraRow) {\n                @for (extraColumn of extraRow.cells; track extraColumn.columnDef) {\n                    <ng-container [cdkColumnDef]=\"extraColumn.columnDef\">\n                        <td\n                            mat-cell\n                            class=\"kles-extra-row-cell\"\n                            *cdkCellDef=\"let row\"\n                            [attr.colspan]=\"(extraColumn.colspan ?? 1) | spanPipe: displayedColumns().length\"\n                            [attr.rowspan]=\"extraColumn.rowspan\"\n                            [ngStyle]=\"\n                                $safeNavigationMigration(extraColumn?.style?.ngStyle)\n                                    | resolveNgStyle\n                                        : row.controls[extraColumn.columnDef].value\n                                        : row.controls[extraColumn.columnDef].status\n                                        : row.value\n                                        : row.status\n                            \"\n                        >\n                            <div\n                                class=\"kles-extra-row-content\"\n                                [class.kles-extra-row-content--viewport]=\"extraRow.width === 'viewport'\"\n                                [style.width.px]=\"extraRow.width === 'viewport' ? viewportWidthPx() : null\"\n                                [style.--kles-table-horizontal-scroll-range.px]=\"extraRow.width === 'viewport' ? viewportScrollRangePx() : null\"\n                            >\n                                <ng-container\n                                    klesDynamicField\n                                    [field]=\"(extraColumn | extraCellField)!\"\n                                    [group]=\"row\"\n                                    [ui]=\"(row | uiField)!\"\n                                    [context]=\"row | rowContext\"\n                                ></ng-container>\n                            </div>\n                        </td>\n                    </ng-container>\n                }\n                <tr\n                    mat-row\n                    class=\"kles-extra-row\"\n                    *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: extraRow.displayedColumns; when: extraRow.when\"\n                    (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n                    (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n                    (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n                    (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n                    (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n                ></tr>\n            }\n        }\n\n        <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\" [style.display]=\"showFooter() ? '' : 'none'\"></tr>\n    </table>\n</form>\n\n@if (loadingService.loading()) {\n    <div class=\"table-overlay\" [style.--header-h.px]=\"headerHeightPx()\" [style.--scroll-h.px]=\"scrollHeightPx()\" [style.--footer-h.px]=\"footerHeightPx()\">\n        <mat-spinner></mat-spinner>\n    </div>\n}\n\n@if (emptyStateService.enabled() && !loadingService.loading() && isEmpty()) {\n    <div\n        class=\"table-empty-state-overlay\"\n        [style.--header-h.px]=\"headerHeightPx()\"\n        [style.--scroll-h.px]=\"scrollHeightPx()\"\n        [style.--footer-h.px]=\"footerHeightPx()\"\n    >\n        <div class=\"table-empty-state-content\">\n            @if (emptyStateService.component === emptyStateComponent) {\n                <kles-table-empty-state (refreshRequested)=\"refresh()\"></kles-table-empty-state>\n            } @else {\n                <ng-container *ngComponentOutlet=\"emptyStateService.component\"></ng-container>\n            }\n        </div>\n    </div>\n}\n", styles: [":host{--kles-table-divider-color: color-mix(in srgb, var(--mat-sys-outline-variant) 65%, transparent);--kles-table-divider-strong-color: var(--mat-sys-outline-variant);--kles-table-header-background: var(--mat-sys-surface-container);--kles-table-header-color: var(--mat-sys-on-surface);--kles-table-header-divider-color: var(--mat-sys-outline-variant);--kles-table-row-hover-background: color-mix(in srgb, var(--mat-sys-primary) 4%, var(--mat-sys-surface));--kles-table-row-selected-background: color-mix(in srgb, var(--mat-sys-primary) 7%, var(--mat-sys-surface));--kles-table-row-selected-hover-background: color-mix(in srgb, var(--mat-sys-primary) 10%, var(--mat-sys-surface));--kles-table-row-selected-indicator-color: var(--mat-sys-primary);overflow:auto;display:flex;flex-direction:column;position:relative;height:100%;--mat-form-field-filled-container-color: transparent;--mat-form-field-hover-state-layer-opacity: 0;--mat-form-field-focus-state-layer-opacity: 0;--mat-form-field-state-layer-color: transparent}:host(.loading),:host(.empty){min-height:280px}form{display:flex;flex-direction:column;flex-grow:1;position:relative;overflow:auto;scroll-timeline-name:--kles-table-horizontal-scroll;scroll-timeline-axis:inline}.kles-row-pointer{cursor:pointer}.kles-keyboard-cell:focus-visible{outline:2px solid var(--mat-sys-primary, Highlight);outline-offset:-2px}.kles-grid-entry{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.kles-grid-entry:focus-visible{top:4px;left:4px;z-index:10;width:auto;height:auto;padding:8px 12px;clip-path:none;background:var(--mat-sys-surface, white);color:var(--mat-sys-on-surface, black);outline:2px solid var(--mat-sys-primary, Highlight)}table{width:100%;flex-grow:1}th,td{text-wrap:pretty;white-space:normal;padding-top:2px;padding-bottom:2px;box-sizing:border-box}td{word-break:normal}:host td.kles-extra-row-cell{padding:0}.kles-extra-row-content--viewport{box-sizing:border-box;animation:kles-extra-row-horizontal-scroll 1ms linear both paused}@supports (animation-timeline: scroll()){.kles-extra-row-content--viewport{animation-play-state:running;animation-timeline:--kles-table-horizontal-scroll}}@keyframes kles-extra-row-horizontal-scroll{0%{transform:translate(0)}to{transform:translate(var(--kles-table-horizontal-scroll-range, 0px))}}th .cell,td .cell{display:flex;flex-direction:column;justify-content:var(--align, center)}th[appResizableColumn].resizable-column{position:relative}th[appResizableColumn]>.resize-handle{position:absolute;top:0;inset-inline-end:-7px;z-index:20;width:14px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;outline:none}th[appResizableColumn]>.resize-handle:before{content:\"\";position:absolute;top:15%;bottom:15%;inset-inline-start:6px;width:2px;border-radius:2px;background:var(--mat-sys-outline);opacity:0;transition:opacity .12s ease,background-color .12s ease,transform .12s ease}th[appResizableColumn].resizable-column:hover>.resize-handle:before,th[appResizableColumn]>.resize-handle:focus-visible:before{opacity:.65}th[appResizableColumn].column-resizing>.resize-handle:before{top:0;bottom:0;background:var(--mat-sys-primary);opacity:1;transform:scaleX(1.25)}th[appResizableColumn].column-resizing>.resize-handle:after{content:\"\";position:absolute;top:100%;inset-inline-start:6px;width:2px;height:100vh;background:color-mix(in srgb,var(--mat-sys-primary) 70%,transparent);pointer-events:none}th[appResizableColumn]>.resize-handle>.resize-width-label{position:absolute;top:calc(100% + 8px);inset-inline-start:50%;z-index:30;display:none;padding:3px 7px;color:var(--mat-sys-on-primary);font-size:11px;font-weight:600;line-height:16px;white-space:nowrap;background:var(--mat-sys-primary);border-radius:var(--mat-sys-corner-extra-small);box-shadow:var(--mat-sys-level2);transform:translate(-50%);pointer-events:none}th[appResizableColumn].column-resizing>.resize-handle>.resize-width-label{display:block}:host .column-resizing-cell{width:var(--kles-column-resize-width)!important;min-width:var(--kles-column-resize-width)!important;max-width:var(--kles-column-resize-width)!important;flex:0 0 var(--kles-column-resize-width)!important;background-image:linear-gradient(color-mix(in srgb,var(--mat-sys-primary) 5%,transparent),color-mix(in srgb,var(--mat-sys-primary) 5%,transparent))}.table-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));display:grid;place-items:center;background:color-mix(in srgb,var(--mat-sys-surface-container-highest) 75%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-outline-variant) 30%,transparent);z-index:500}:host .mat-mdc-row:not(.kles-extra-row){transition:background-color .12s ease}:host .mat-mdc-row:not(.kles-extra-row):hover{background:var(--kles-table-row-hover-background)}:host .mat-mdc-row:not(.kles-extra-row).kles-row-selected{background:var(--kles-table-row-selected-background);box-shadow:inset 3px 0 0 var(--kles-table-row-selected-indicator-color)}:host .mat-mdc-row:not(.kles-extra-row).kles-row-selected:hover{background:var(--kles-table-row-selected-hover-background)}:host tr.mat-mdc-row.cdk-drag-placeholder{opacity:1;background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))!important}:host tr.mat-mdc-row.cdk-drag-placeholder td{border-block:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td>*{visibility:hidden}:host tr.mat-mdc-row.cdk-drag-placeholder td:first-child{border-inline-start:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td:last-child{border-inline-end:2px dashed var(--mat-sys-primary)}:host .cdk-drop-list-dragging tr.mat-mdc-row:not(.cdk-drag-placeholder),:host tr.mat-mdc-row.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}:host .kles-column-drop-list.cdk-drop-list-dragging .mat-mdc-header-cell:not(.cdk-drag-placeholder),:host .mat-mdc-header-cell.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}:host .mat-mdc-header-cell.cdk-drag-placeholder{opacity:.25}.mat-mdc-header-cell.cdk-drag-preview{box-sizing:border-box;background:var(--kles-table-header-background);color:var(--kles-table-header-color);box-shadow:var(--mat-sys-level3)}.kles-row-drag-preview{overflow:hidden;border-radius:var(--mat-sys-corner-small);background:var(--mat-sys-surface-container);box-shadow:var(--mat-sys-level3)}.selection-row-spinner{margin-inline:auto}:host tr.kles-row-drag-placeholder td{padding:0;border:2px dashed var(--mat-sys-primary);background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))}:host .mat-mdc-table .mat-mdc-cell,:host .mat-mdc-table .mat-mdc-header-cell{border-bottom-color:var(--mat-sys-outline-variant)}:host .mat-mdc-table .mat-mdc-cell:last-child,:host .mat-mdc-table .mat-mdc-header-cell:last-child{border-right:none}:host tr.mat-mdc-footer-row td.mat-mdc-footer-cell{border-top:1px solid var(--kles-table-divider-strong-color)}:host tr.mat-mdc-row:last-of-type td.mat-mdc-cell{border-bottom:1px solid var(--kles-table-divider-color)}:host tr.mat-mdc-footer-row{font-weight:500}:host .mat-mdc-header-row,:host .mat-mdc-header-cell{background-color:var(--kles-table-header-background);color:var(--kles-table-header-color)}:host .mat-mdc-header-cell{border-bottom-color:var(--kles-table-header-divider-color)}.table-empty-state-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));z-index:400;overflow-x:hidden;overflow-y:auto;container-type:size;container-name:kles-empty-state;background:var(--mat-sys-surface);display:grid;place-items:center}.table-empty-state-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:100%;padding:16px;box-sizing:border-box}@container kles-empty-state (max-height: 220px){.table-empty-state-content{padding:8px}}.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]