@ng-nest/ui 20.3.0 → 20.3.2

package/fesm2022/ng-nest-ui-table-view.mjs

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, Component, booleanAttribute, Directive, signal, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, viewChild, contentChild, contentChildren, Input, HostListener, NgModule } from '@angular/core';
-import { CdkTable, CdkHeaderRowDef, CdkFooterRowDef, CdkRowDef, CdkHeaderRow, CdkCellOutlet, CdkFooterRow, CdkRow, CdkNoDataRow, HeaderRowOutlet, DataRowOutlet, NoDataRowOutlet, FooterRowOutlet, CDK_TABLE, STICKY_POSITIONING_LISTENER, CdkCellDef, CdkHeaderCellDef, CdkFooterCellDef, CdkColumnDef, CdkHeaderCell, CdkFooterCell, CdkCell, CdkTextColumn, CdkTableModule } from '@angular/cdk/table';
-import { _DisposeViewRepeaterStrategy, _VIEW_REPEATER_STRATEGY } from '@angular/cdk/collections';
+import { Injectable, InjectionToken, Directive, Input, inject, ElementRef, HostListener, HostBinding, booleanAttribute, signal, ViewEncapsulation, ChangeDetectionStrategy, Component, viewChild, contentChild, contentChildren, NgModule } from '@angular/core';
+import { CdkCellDef, CdkHeaderCellDef, CdkFooterCellDef, CdkColumnDef, CdkHeaderCell, CdkFooterCell, CdkCell, CdkHeaderRowDef, CdkFooterRowDef, CdkRowDef, CdkHeaderRow, CdkCellOutlet, CdkFooterRow, CdkRow, CdkNoDataRow, CdkTable, HeaderRowOutlet, DataRowOutlet, NoDataRowOutlet, FooterRowOutlet, CDK_TABLE, STICKY_POSITIONING_LISTENER, CdkTextColumn, CdkTableModule } from '@angular/cdk/table';
 import { XConfigService } from '@ng-nest/ui/core';
 
 class XTableViewService {
@@ -19,31 +18,235 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImpor
             type: Injectable
         }] });
 
-/**
- * Table view
- * @selector x-table-view
- * @decorator component
- */
-const XTableViewPrefix = 'x-table-view';
-const X_TABLE_VIEW_CONFIG_NAME = 'tableView';
-/**
- * Table view Property
- */
-class XTableViewProperty extends CdkTable {
+const X_TABLE_VIEW_CONTEXT = new InjectionToken('X_TABLE_VIEW_CONTEXT');
+
+class XTableViewCellDef extends CdkCellDef {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableViewCellDef, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.5", type: XTableViewCellDef, isStandalone: true, selector: "[xTableCellDef]", providers: [{ provide: CdkCellDef, useExisting: XTableViewCellDef }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableViewCellDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[xTableCellDef]',
+                    providers: [{ provide: CdkCellDef, useExisting: XTableViewCellDef }]
+                }]
+        }] });
+class XTableHeaderCellDef extends CdkHeaderCellDef {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableHeaderCellDef, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.5", type: XTableHeaderCellDef, isStandalone: true, selector: "[xTableHeaderCellDef]", providers: [{ provide: CdkHeaderCellDef, useExisting: XTableHeaderCellDef }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableHeaderCellDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[xTableHeaderCellDef]',
+                    providers: [{ provide: CdkHeaderCellDef, useExisting: XTableHeaderCellDef }]
+                }]
+        }] });
+class XTableFooterCellDef extends CdkFooterCellDef {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableFooterCellDef, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.5", type: XTableFooterCellDef, isStandalone: true, selector: "[xTableFooterCellDef]", providers: [{ provide: CdkFooterCellDef, useExisting: XTableFooterCellDef }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableFooterCellDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[xTableFooterCellDef]',
+                    providers: [{ provide: CdkFooterCellDef, useExisting: XTableFooterCellDef }]
+                }]
+        }] });
+class XTableColumnDef extends CdkColumnDef {
+    get name() {
+        return this._name;
+    }
+    set name(name) {
+        this._setNameInput(name);
+    }
+    _updateColumnCssClassName() {
+        super._updateColumnCssClassName();
+        this._columnCssClassName.push(`x-table-column-${this.cssClassFriendlyName}`);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableColumnDef, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.5", type: XTableColumnDef, isStandalone: true, selector: "[xTableColumnDef]", inputs: { name: ["xTableColumnDef", "name"] }, providers: [{ provide: CdkColumnDef, useExisting: XTableColumnDef }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableColumnDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[xTableColumnDef]',
+                    providers: [{ provide: CdkColumnDef, useExisting: XTableColumnDef }]
+                }]
+        }], propDecorators: { name: [{
+                type: Input,
+                args: ['xTableColumnDef']
+            }] } });
+class XTableHeaderCell extends CdkHeaderCell {
     constructor() {
         super(...arguments);
-        this.config = inject(XConfigService).getConfigForComponent(X_TABLE_VIEW_CONFIG_NAME);
+        this.tableViewService = inject(XTableViewService, { optional: true });
+        this.tableView = inject(X_TABLE_VIEW_CONTEXT, { optional: true });
+        this.elementRef = inject(ElementRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableViewProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.5", type: XTableViewProperty, isStandalone: true, selector: "x-table-view-property", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    get isActived() {
+        return this.tableViewService.activedHeaderCells.includes(this);
+    }
+    onClick() {
+        this.tableViewService.activedHeaderCells = [this];
+        const headerCells = this.tableView?.getHeaderCells() ?? [];
+        const index = headerCells.indexOf(this);
+        const cells = this.tableView?.getCells() ?? [];
+        const columnsCount = (this.tableView?.getHeaderRowRef()?.getColumns()).length ?? 0;
+        const rowsCount = this.tableView?.getRows().length ?? 0;
+        if (columnsCount === 0 || rowsCount === 0) {
+            return;
+        }
+        const columnCells = [];
+        for (let i = 0; i < rowsCount; i++) {
+            const cellIndex = index * rowsCount + i;
+            if (cellIndex < cells.length) {
+                columnCells.push(cells[cellIndex]);
+            }
+        }
+        this.tableViewService.selectedCells = [];
+        for (let cell of columnCells) {
+            this.tableViewService.selectedCells.push(cell);
+            cell.setActivedRow(cell);
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableHeaderCell, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.5", type: XTableHeaderCell, isStandalone: true, selector: "x-table-header-cell, th[x-table-header-cell]", host: { attributes: { "role": "columnheader" }, listeners: { "click": "onClick()" }, properties: { "class.x-table-header-cell-actived": "this.isActived" }, classAttribute: "x-table-header-cell" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableViewProperty, decorators: [{
-            type: Component,
-            args: [{ selector: `${XTableViewPrefix}-property`, template: '' }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableHeaderCell, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'x-table-header-cell, th[x-table-header-cell]',
+                    host: {
+                        class: 'x-table-header-cell',
+                        role: 'columnheader'
+                    }
+                }]
+        }], propDecorators: { isActived: [{
+                type: HostBinding,
+                args: ['class.x-table-header-cell-actived']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+class XTableFooterCell extends CdkFooterCell {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableFooterCell, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.5", type: XTableFooterCell, isStandalone: true, selector: "x-table-footer-cell, td[x-table-footer-cell]", host: { classAttribute: "x-table-footer-cell" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableFooterCell, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'x-table-footer-cell, td[x-table-footer-cell]',
+                    host: {
+                        class: 'x-table-footer-cell'
+                    }
+                }]
         }] });
+class XTableViewCell extends CdkCell {
+    constructor() {
+        super(...arguments);
+        this.tableViewService = inject(XTableViewService, { optional: true });
+        this.tableView = inject(X_TABLE_VIEW_CONTEXT, { optional: true });
+        this.elementRef = inject(ElementRef);
+    }
+    get isSelected() {
+        return this.tableViewService.selectedCells.includes(this);
+    }
+    onClick() {
+        this.tableViewService.selectedCells = [this];
+        this.tableViewService.activedRows = [];
+        this.setActivedRow(this);
+        this.setActivedColumn(this);
+    }
+    setActivedRow(cell) {
+        const rows = this.tableView?.getRows() ?? [];
+        if (rows.length > 0) {
+            const rowIndex = this.getRowIndex(cell);
+            if (rowIndex >= 0 && rowIndex < rows.length) {
+                const currentRow = rows[rowIndex];
+                this.tableViewService.activedRows.push(currentRow);
+            }
+        }
+    }
+    setActivedColumn(cell) {
+        const headerCells = (this.tableView?.getHeaderCells() ?? []);
+        const headerRowRefs = this.tableView?.getHeaderRowRefs() ?? [];
+        const headerCellsArray = this.convertToColumnBasedArray(headerCells, headerRowRefs.length);
+        const activedHeaderCells = [];
+        for (let cells of headerCellsArray) {
+            if (cells.length > 0) {
+                const columnIndex = this.getColumnIndex(cell);
+                if (columnIndex >= 0 && columnIndex < cells.length) {
+                    activedHeaderCells.push(cells[columnIndex]);
+                }
+            }
+        }
+        this.tableViewService.activedHeaderCells = activedHeaderCells;
+    }
+    convertToColumnBasedArray(input, columnsPerRow) {
+        const result = [];
+        for (let i = 0; i < columnsPerRow; i++) {
+            result.push([]);
+        }
+        for (let i = 0; i < input.length; i++) {
+            const columnIndex = i % columnsPerRow;
+            result[columnIndex].push(input[i]);
+        }
+        return result;
+    }
+    getColumnIndex(cell) {
+        if (!this.tableView || !this.tableView.getCells())
+            return -1;
+        const cellsArray = this.tableView.getCells();
+        const selectedIndex = cellsArray.indexOf(cell);
+        if (selectedIndex === -1)
+            return -1;
+        const columnsPerRow = (this.tableView.getHeaderRowRef()?.getColumns()).length ?? 0;
+        const rowsCount = this.tableView.getRows().length;
+        if (columnsPerRow === 0 || rowsCount === 0)
+            return -1;
+        return Math.floor(selectedIndex / rowsCount);
+    }
+    getRowIndex(cell) {
+        if (!this.tableView || !this.tableView.getCells())
+            return -1;
+        const cellsArray = this.tableView.getCells();
+        const selectedIndex = cellsArray.indexOf(cell);
+        if (selectedIndex === -1)
+            return -1;
+        const columnsPerRow = (this.tableView.getHeaderRowRef()?.getColumns()).length ?? 0;
+        const rowsCount = this.tableView.getRows().length;
+        if (columnsPerRow === 0 || rowsCount === 0)
+            return -1;
+        return selectedIndex % rowsCount;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableViewCell, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.5", type: XTableViewCell, isStandalone: true, selector: "x-table-cell, td[x-table-cell]", host: { listeners: { "click": "onClick()" }, properties: { "class.x-table-cell-selected": "this.isSelected" }, classAttribute: "x-table-cell" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableViewCell, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'x-table-cell, td[x-table-cell]',
+                    host: {
+                        class: 'x-table-cell'
+                    }
+                }]
+        }], propDecorators: { isSelected: [{
+                type: HostBinding,
+                args: ['class.x-table-cell-selected']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
 
 const ROW_TEMPLATE = `<ng-container cdkCellOutlet></ng-container>`;
 class XTableHeaderRowDef extends CdkHeaderRowDef {
+    getSticky() {
+        return this.sticky;
+    }
+    getColumns() {
+        return this.columns;
+    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableHeaderRowDef, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
     /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.5", type: XTableHeaderRowDef, isStandalone: true, selector: "[xTableHeaderRowDef]", inputs: { columns: ["xTableHeaderRowDef", "columns"], sticky: ["xTableHeaderRowDefSticky", "sticky", booleanAttribute] }, providers: [{ provide: CdkHeaderRowDef, useExisting: XTableHeaderRowDef }], usesInheritance: true, ngImport: i0 }); }
 }
@@ -91,7 +294,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImpor
 class XTableHeaderRow extends CdkHeaderRow {
     constructor() {
         super(...arguments);
-        this.tableView = inject(XTableView, { optional: true });
+        this.tableView = inject(X_TABLE_VIEW_CONTEXT, { optional: true });
         this.tableViewService = inject(XTableViewService, { optional: true });
         this.sticking = signal(false, ...(ngDevMode ? [{ debugName: "sticking" }] : []));
     }
@@ -102,16 +305,16 @@ class XTableHeaderRow extends CdkHeaderRow {
         this.listenerSticky();
     }
     listenerSticky() {
-        const index = this.tableView?.headerRows().findIndex((x) => x === this);
+        const index = this.tableView?.getHeaderRows().findIndex((x) => x === this);
         if (index === undefined || index < 0)
             return;
-        const rowLen = this.tableView?.headerRowRefs()?.length ?? 0;
+        const rowLen = this.tableView?.getHeaderRowRefs()?.length ?? 0;
         if (rowLen === 0 || rowLen < index)
             return;
-        const sticky = this.tableView?.headerRowRefs()[index].sticky;
+        const sticky = this.tableView?.getHeaderRowRefs()[index].getSticky();
         if (!sticky)
             return;
-        const sentinel = this.tableView?.sentinelTop().nativeElement;
+        const sentinel = this.tableView?.getSentinelTop()?.nativeElement;
         const observer = new IntersectionObserver(([entry]) => {
             const sticking = !entry.isIntersecting;
             if (sticking) {
@@ -216,6 +419,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImpor
                 }]
         }] });
 
+/**
+ * Table view
+ * @selector x-table-view
+ * @decorator component
+ */
+const XTableViewPrefix = 'x-table-view';
+const X_TABLE_VIEW_CONFIG_NAME = 'tableView';
+/**
+ * Table view Property
+ */
+class XTableViewProperty extends CdkTable {
+    constructor() {
+        super(...arguments);
+        this.config = inject(XConfigService).getConfigForComponent(X_TABLE_VIEW_CONFIG_NAME);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableViewProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.5", type: XTableViewProperty, isStandalone: true, selector: "x-table-view-property", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableViewProperty, decorators: [{
+            type: Component,
+            args: [{ selector: `${XTableViewPrefix}-property`, template: '' }]
+        }] });
+
 class XTableView extends XTableViewProperty {
     constructor() {
         super(...arguments);
@@ -233,13 +459,33 @@ class XTableView extends XTableViewProperty {
         /** Overrides the need to add position: sticky on every sticky cell element in `CdkTable`. */
         this.needsPositionStickyOnElement = false;
     }
+    getHeaderRows() {
+        return this.headerRows();
+    }
+    getHeaderRowRefs() {
+        return this.headerRowRefs();
+    }
+    getSentinelTop() {
+        return this.sentinelTop();
+    }
+    getHeaderCells() {
+        return this.headerCells();
+    }
+    getCells() {
+        return this.cells();
+    }
+    getRows() {
+        return this.rows();
+    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableView, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XTableView, isStandalone: true, selector: "x-table-view, table[x-table-view]", host: { properties: { "class.x-table-fixed-layout": "fixedLayout" }, classAttribute: "x-table-view" }, providers: [
             { provide: CdkTable, useExisting: XTableView },
             { provide: CDK_TABLE, useExisting: XTableView },
-            // Prevent nested tables from seeing this table's StickyPositioningListener.
-            { provide: _VIEW_REPEATER_STRATEGY, useClass: _DisposeViewRepeaterStrategy },
             { provide: STICKY_POSITIONING_LISTENER, useValue: null },
+            {
+                provide: X_TABLE_VIEW_CONTEXT,
+                useExisting: XTableView
+            },
             XTableViewService
         ], queries: [{ propertyName: "headerRowRef", first: true, predicate: XTableHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "headerRowRefs", predicate: XTableHeaderRowDef, isSignal: true }, { propertyName: "headerRows", predicate: XTableHeaderRow, isSignal: true }, { propertyName: "columnDefs", predicate: XTableColumnDef, isSignal: true }, { propertyName: "headerCells", predicate: XTableHeaderCell, isSignal: true }, { propertyName: "cells", predicate: XTableViewCell, isSignal: true }, { propertyName: "rows", predicate: XTableViewRow, isSignal: true }], viewQueries: [{ propertyName: "sentinelTop", first: true, predicate: ["sentinelTop"], descendants: true, isSignal: true }], exportAs: ["xTableView"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"caption\" />\r\n<ng-content select=\"colgroup, col\" />\r\n\r\n<!--\r\n      Unprojected content throws a hydration error so we need this to capture it.\r\n      It gets removed on the client so it doesn't affect the layout.\r\n    -->\r\n@if (_isServer) {\r\n  <ng-content />\r\n}\r\n<div class=\"x-table-sentinel-top\" #sentinelTop></div>\r\n@if (_isNativeHtmlTable) {\r\n  <thead>\r\n    <ng-container headerRowOutlet />\r\n  </thead>\r\n  <tbody>\r\n    <ng-container rowOutlet />\r\n    <ng-container noDataRowOutlet />\r\n  </tbody>\r\n  <tfoot>\r\n    <ng-container footerRowOutlet />\r\n  </tfoot>\r\n} @else {\r\n  <ng-container headerRowOutlet />\r\n  <ng-container rowOutlet />\r\n  <ng-container noDataRowOutlet />\r\n  <ng-container footerRowOutlet />\r\n}\r\n", styles: [".x-table-view{margin:0;padding:0}.x-table-view{position:relative;border-collapse:separate;border-spacing:0}.x-table-view .x-table-header-cell,.x-table-view .x-table-footer-cell{padding:0 .5rem;text-align:left;font-weight:500;color:var(--x-text);border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);cursor:default;background-color:var(--x-background);white-space:nowrap}.x-table-view .x-table-header-cell:first-child,.x-table-view .x-table-footer-cell:first-child{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-view .x-table-header-cell.x-table-header-cell-actived,.x-table-view .x-table-footer-cell.x-table-header-cell-actived{background-color:var(--x-background-a100)}.x-table-view .x-table-sticky{position:sticky;background-color:var(--x-background-a200)}.x-table-view .x-table-sentinel-top{visibility:hidden;position:absolute;top:0}.x-table-view .x-table-row-actived .x-table-cell:not(.x-table-cell-selected){background-color:var(--x-background-a100)}.x-table-view .x-table-cell{padding:0 .5rem;text-align:left;font-weight:500;color:var(--x-text);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);cursor:default;white-space:nowrap;background-color:var(--x-background)}.x-table-view .x-table-cell:first-child{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-view .x-table-cell.x-table-cell-selected{border-color:var(--x-border-a200);background-color:var(--x-primary-900)}.x-table-view .x-table-cell.x-table-sticky:not(.x-table-cell-selected){background-color:var(--x-background-a200)}.x-table-view .x-table-sticky-border-elem-top{border-bottom-style:solid;border-bottom-width:calc(2 * var(--x-border-width));border-bottom-color:var(--x-border-a900)}.x-table-view .x-table-sticky-border-elem-bottom{border-top-style:solid;border-top-width:calc(2 * var(--x-border-width));border-top-color:var(--x-border-a900)}.x-table-view .x-table-sticky-border-elem-left{border-right-style:solid;border-right-width:calc(2 * var(--x-border-width));border-right-color:var(--x-border-a900)}.x-table-view .x-table-sticky-border-elem-right{border-left-style:solid;border-left-width:calc(2 * var(--x-border-width));border-left-color:var(--x-border-a900)}\n"], dependencies: [{ kind: "directive", type: HeaderRowOutlet, selector: "[headerRowOutlet]" }, { kind: "directive", type: DataRowOutlet, selector: "[rowOutlet]" }, { kind: "directive", type: NoDataRowOutlet, selector: "[noDataRowOutlet]" }, { kind: "directive", type: FooterRowOutlet, selector: "[footerRowOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -251,232 +497,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImpor
                     }, providers: [
                         { provide: CdkTable, useExisting: XTableView },
                         { provide: CDK_TABLE, useExisting: XTableView },
-                        // Prevent nested tables from seeing this table's StickyPositioningListener.
-                        { provide: _VIEW_REPEATER_STRATEGY, useClass: _DisposeViewRepeaterStrategy },
                         { provide: STICKY_POSITIONING_LISTENER, useValue: null },
+                        {
+                            provide: X_TABLE_VIEW_CONTEXT,
+                            useExisting: XTableView
+                        },
                         XTableViewService
                     ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, imports: [HeaderRowOutlet, DataRowOutlet, NoDataRowOutlet, FooterRowOutlet], template: "<ng-content select=\"caption\" />\r\n<ng-content select=\"colgroup, col\" />\r\n\r\n<!--\r\n      Unprojected content throws a hydration error so we need this to capture it.\r\n      It gets removed on the client so it doesn't affect the layout.\r\n    -->\r\n@if (_isServer) {\r\n  <ng-content />\r\n}\r\n<div class=\"x-table-sentinel-top\" #sentinelTop></div>\r\n@if (_isNativeHtmlTable) {\r\n  <thead>\r\n    <ng-container headerRowOutlet />\r\n  </thead>\r\n  <tbody>\r\n    <ng-container rowOutlet />\r\n    <ng-container noDataRowOutlet />\r\n  </tbody>\r\n  <tfoot>\r\n    <ng-container footerRowOutlet />\r\n  </tfoot>\r\n} @else {\r\n  <ng-container headerRowOutlet />\r\n  <ng-container rowOutlet />\r\n  <ng-container noDataRowOutlet />\r\n  <ng-container footerRowOutlet />\r\n}\r\n", styles: [".x-table-view{margin:0;padding:0}.x-table-view{position:relative;border-collapse:separate;border-spacing:0}.x-table-view .x-table-header-cell,.x-table-view .x-table-footer-cell{padding:0 .5rem;text-align:left;font-weight:500;color:var(--x-text);border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);cursor:default;background-color:var(--x-background);white-space:nowrap}.x-table-view .x-table-header-cell:first-child,.x-table-view .x-table-footer-cell:first-child{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-view .x-table-header-cell.x-table-header-cell-actived,.x-table-view .x-table-footer-cell.x-table-header-cell-actived{background-color:var(--x-background-a100)}.x-table-view .x-table-sticky{position:sticky;background-color:var(--x-background-a200)}.x-table-view .x-table-sentinel-top{visibility:hidden;position:absolute;top:0}.x-table-view .x-table-row-actived .x-table-cell:not(.x-table-cell-selected){background-color:var(--x-background-a100)}.x-table-view .x-table-cell{padding:0 .5rem;text-align:left;font-weight:500;color:var(--x-text);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);cursor:default;white-space:nowrap;background-color:var(--x-background)}.x-table-view .x-table-cell:first-child{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-view .x-table-cell.x-table-cell-selected{border-color:var(--x-border-a200);background-color:var(--x-primary-900)}.x-table-view .x-table-cell.x-table-sticky:not(.x-table-cell-selected){background-color:var(--x-background-a200)}.x-table-view .x-table-sticky-border-elem-top{border-bottom-style:solid;border-bottom-width:calc(2 * var(--x-border-width));border-bottom-color:var(--x-border-a900)}.x-table-view .x-table-sticky-border-elem-bottom{border-top-style:solid;border-top-width:calc(2 * var(--x-border-width));border-top-color:var(--x-border-a900)}.x-table-view .x-table-sticky-border-elem-left{border-right-style:solid;border-right-width:calc(2 * var(--x-border-width));border-right-color:var(--x-border-a900)}.x-table-view .x-table-sticky-border-elem-right{border-left-style:solid;border-left-width:calc(2 * var(--x-border-width));border-left-color:var(--x-border-a900)}\n"] }]
         }], propDecorators: { sentinelTop: [{ type: i0.ViewChild, args: ['sentinelTop', { isSignal: true }] }], headerRowRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => XTableHeaderRowDef), { isSignal: true }] }], headerRowRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => XTableHeaderRowDef), { isSignal: true }] }], headerRows: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => XTableHeaderRow), { isSignal: true }] }], columnDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => XTableColumnDef), { isSignal: true }] }], headerCells: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => XTableHeaderCell), { isSignal: true }] }], cells: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => XTableViewCell), { isSignal: true }] }], rows: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => XTableViewRow), { isSignal: true }] }] } });
 
-class XTableViewCellDef extends CdkCellDef {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableViewCellDef, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.5", type: XTableViewCellDef, isStandalone: true, selector: "[xTableCellDef]", providers: [{ provide: CdkCellDef, useExisting: XTableViewCellDef }], usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableViewCellDef, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[xTableCellDef]',
-                    providers: [{ provide: CdkCellDef, useExisting: XTableViewCellDef }]
-                }]
-        }] });
-class XTableHeaderCellDef extends CdkHeaderCellDef {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableHeaderCellDef, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.5", type: XTableHeaderCellDef, isStandalone: true, selector: "[xTableHeaderCellDef]", providers: [{ provide: CdkHeaderCellDef, useExisting: XTableHeaderCellDef }], usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableHeaderCellDef, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[xTableHeaderCellDef]',
-                    providers: [{ provide: CdkHeaderCellDef, useExisting: XTableHeaderCellDef }]
-                }]
-        }] });
-class XTableFooterCellDef extends CdkFooterCellDef {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableFooterCellDef, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.5", type: XTableFooterCellDef, isStandalone: true, selector: "[xTableFooterCellDef]", providers: [{ provide: CdkFooterCellDef, useExisting: XTableFooterCellDef }], usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableFooterCellDef, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[xTableFooterCellDef]',
-                    providers: [{ provide: CdkFooterCellDef, useExisting: XTableFooterCellDef }]
-                }]
-        }] });
-class XTableColumnDef extends CdkColumnDef {
-    get name() {
-        return this._name;
-    }
-    set name(name) {
-        this._setNameInput(name);
-    }
-    _updateColumnCssClassName() {
-        super._updateColumnCssClassName();
-        this._columnCssClassName.push(`x-table-column-${this.cssClassFriendlyName}`);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableColumnDef, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.5", type: XTableColumnDef, isStandalone: true, selector: "[xTableColumnDef]", inputs: { name: ["xTableColumnDef", "name"] }, providers: [{ provide: CdkColumnDef, useExisting: XTableColumnDef }], usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableColumnDef, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[xTableColumnDef]',
-                    providers: [{ provide: CdkColumnDef, useExisting: XTableColumnDef }]
-                }]
-        }], propDecorators: { name: [{
-                type: Input,
-                args: ['xTableColumnDef']
-            }] } });
-class XTableHeaderCell extends CdkHeaderCell {
-    constructor() {
-        super(...arguments);
-        this.tableViewService = inject(XTableViewService, { optional: true });
-        this.tableView = inject(XTableView, { optional: true });
-        this.elementRef = inject(ElementRef);
-    }
-    get isActived() {
-        return this.tableViewService.activedHeaderCells.includes(this);
-    }
-    onClick() {
-        this.tableViewService.activedHeaderCells = [this];
-        const headerCells = this.tableView?.headerCells() ?? [];
-        const index = headerCells.indexOf(this);
-        const cells = this.tableView?.cells() ?? [];
-        const columnsCount = (this.tableView?.headerRowRef()?.columns).length ?? 0;
-        const rowsCount = this.tableView?.rows().length ?? 0;
-        if (columnsCount === 0 || rowsCount === 0) {
-            return;
-        }
-        const columnCells = [];
-        for (let i = 0; i < rowsCount; i++) {
-            const cellIndex = index * rowsCount + i;
-            if (cellIndex < cells.length) {
-                columnCells.push(cells[cellIndex]);
-            }
-        }
-        this.tableViewService.selectedCells = [];
-        for (let cell of columnCells) {
-            this.tableViewService.selectedCells.push(cell);
-            cell.setActivedRow(cell);
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableHeaderCell, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.5", type: XTableHeaderCell, isStandalone: true, selector: "x-table-header-cell, th[x-table-header-cell]", host: { attributes: { "role": "columnheader" }, listeners: { "click": "onClick()" }, properties: { "class.x-table-header-cell-actived": "this.isActived" }, classAttribute: "x-table-header-cell" }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableHeaderCell, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'x-table-header-cell, th[x-table-header-cell]',
-                    host: {
-                        class: 'x-table-header-cell',
-                        role: 'columnheader'
-                    }
-                }]
-        }], propDecorators: { isActived: [{
-                type: HostBinding,
-                args: ['class.x-table-header-cell-actived']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-class XTableFooterCell extends CdkFooterCell {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableFooterCell, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.5", type: XTableFooterCell, isStandalone: true, selector: "x-table-footer-cell, td[x-table-footer-cell]", host: { classAttribute: "x-table-footer-cell" }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableFooterCell, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'x-table-footer-cell, td[x-table-footer-cell]',
-                    host: {
-                        class: 'x-table-footer-cell'
-                    }
-                }]
-        }] });
-class XTableViewCell extends CdkCell {
-    constructor() {
-        super(...arguments);
-        this.tableViewService = inject(XTableViewService, { optional: true });
-        this.tableView = inject(XTableView, { optional: true });
-        this.elementRef = inject(ElementRef);
-    }
-    get isSelected() {
-        return this.tableViewService.selectedCells.includes(this);
-    }
-    onClick() {
-        this.tableViewService.selectedCells = [this];
-        this.tableViewService.activedRows = [];
-        this.setActivedRow(this);
-        this.setActivedColumn(this);
-    }
-    setActivedRow(cell) {
-        const rows = this.tableView?.rows() ?? [];
-        if (rows.length > 0) {
-            const rowIndex = this.getRowIndex(cell);
-            if (rowIndex >= 0 && rowIndex < rows.length) {
-                const currentRow = rows[rowIndex];
-                this.tableViewService.activedRows.push(currentRow);
-            }
-        }
-    }
-    setActivedColumn(cell) {
-        const headerCells = (this.tableView?.headerCells() ?? []);
-        const headerRowRefs = this.tableView?.headerRowRefs() ?? [];
-        const headerCellsArray = this.convertToColumnBasedArray(headerCells, headerRowRefs.length);
-        const activedHeaderCells = [];
-        for (let cells of headerCellsArray) {
-            if (cells.length > 0) {
-                const columnIndex = this.getColumnIndex(cell);
-                if (columnIndex >= 0 && columnIndex < cells.length) {
-                    activedHeaderCells.push(cells[columnIndex]);
-                }
-            }
-        }
-        this.tableViewService.activedHeaderCells = activedHeaderCells;
-    }
-    convertToColumnBasedArray(input, columnsPerRow) {
-        const result = [];
-        for (let i = 0; i < columnsPerRow; i++) {
-            result.push([]);
-        }
-        for (let i = 0; i < input.length; i++) {
-            const columnIndex = i % columnsPerRow;
-            result[columnIndex].push(input[i]);
-        }
-        return result;
-    }
-    getColumnIndex(cell) {
-        if (!this.tableView || !this.tableView.cells())
-            return -1;
-        const cellsArray = this.tableView.cells();
-        const selectedIndex = cellsArray.indexOf(cell);
-        if (selectedIndex === -1)
-            return -1;
-        const columnsPerRow = (this.tableView.headerRowRef()?.columns).length ?? 0;
-        const rowsCount = this.tableView.rows().length;
-        if (columnsPerRow === 0 || rowsCount === 0)
-            return -1;
-        return Math.floor(selectedIndex / rowsCount);
-    }
-    getRowIndex(cell) {
-        if (!this.tableView || !this.tableView.cells())
-            return -1;
-        const cellsArray = this.tableView.cells();
-        const selectedIndex = cellsArray.indexOf(cell);
-        if (selectedIndex === -1)
-            return -1;
-        const columnsPerRow = (this.tableView.headerRowRef()?.columns).length ?? 0;
-        const rowsCount = this.tableView.rows().length;
-        if (columnsPerRow === 0 || rowsCount === 0)
-            return -1;
-        return selectedIndex % rowsCount;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableViewCell, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.5", type: XTableViewCell, isStandalone: true, selector: "x-table-cell, td[x-table-cell]", host: { listeners: { "click": "onClick()" }, properties: { "class.x-table-cell-selected": "this.isSelected" }, classAttribute: "x-table-cell" }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableViewCell, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'x-table-cell, td[x-table-cell]',
-                    host: {
-                        class: 'x-table-cell'
-                    }
-                }]
-        }], propDecorators: { isSelected: [{
-                type: HostBinding,
-                args: ['class.x-table-cell-selected']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-
 class XTableTextColumn extends CdkTextColumn {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableTextColumn, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.5", type: XTableTextColumn, isStandalone: true, selector: "x-table-text-column", usesInheritance: true, ngImport: i0, template: `