@ng-nest/ui 20.0.6 → 20.1.0

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

@@ -0,0 +1,593 @@
+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 { XConfigService } from '@ng-nest/ui/core';
+
+class XTableViewService {
+    constructor() {
+        this.selectedCells = [];
+        this.activedRows = [];
+        this.selectedHeaderCell = null;
+        this.activedHeaderCells = [];
+        this.stickyHeaderRows = [];
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewService, decorators: [{
+            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 {
+    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.2.4", ngImport: i0, type: XTableViewProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: XTableViewProperty, isStandalone: true, selector: "x-table-view-property", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewProperty, decorators: [{
+            type: Component,
+            args: [{ selector: `${XTableViewPrefix}-property`, template: '' }]
+        }] });
+
+const ROW_TEMPLATE = `<ng-container cdkCellOutlet></ng-container>`;
+class XTableHeaderRowDef extends CdkHeaderRowDef {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableHeaderRowDef, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.2.4", type: XTableHeaderRowDef, isStandalone: true, selector: "[xTableHeaderRowDef]", inputs: { columns: ["xTableHeaderRowDef", "columns"], sticky: ["xTableHeaderRowDefSticky", "sticky", booleanAttribute] }, providers: [{ provide: CdkHeaderRowDef, useExisting: XTableHeaderRowDef }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableHeaderRowDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[xTableHeaderRowDef]',
+                    providers: [{ provide: CdkHeaderRowDef, useExisting: XTableHeaderRowDef }],
+                    inputs: [
+                        { name: 'columns', alias: 'xTableHeaderRowDef' },
+                        { name: 'sticky', alias: 'xTableHeaderRowDefSticky', transform: booleanAttribute }
+                    ]
+                }]
+        }] });
+class XTableFooterRowDef extends CdkFooterRowDef {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableFooterRowDef, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.2.4", type: XTableFooterRowDef, isStandalone: true, selector: "[xTableFooterRowDef]", inputs: { columns: ["xTableFooterRowDef", "columns"], sticky: ["xTableFooterRowDefSticky", "sticky", booleanAttribute] }, providers: [{ provide: CdkFooterRowDef, useExisting: XTableFooterRowDef }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableFooterRowDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[xTableFooterRowDef]',
+                    providers: [{ provide: CdkFooterRowDef, useExisting: XTableFooterRowDef }],
+                    inputs: [
+                        { name: 'columns', alias: 'xTableFooterRowDef' },
+                        { name: 'sticky', alias: 'xTableFooterRowDefSticky', transform: booleanAttribute }
+                    ]
+                }]
+        }] });
+class XTableViewRowDef extends CdkRowDef {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewRowDef, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: XTableViewRowDef, isStandalone: true, selector: "[xTableRowDef]", inputs: { columns: ["xTableRowDefColumns", "columns"], when: ["xTableRowDefWhen", "when"] }, providers: [{ provide: CdkRowDef, useExisting: XTableViewRowDef }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewRowDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[xTableRowDef]',
+                    providers: [{ provide: CdkRowDef, useExisting: XTableViewRowDef }],
+                    inputs: [
+                        { name: 'columns', alias: 'xTableRowDefColumns' },
+                        { name: 'when', alias: 'xTableRowDefWhen' }
+                    ]
+                }]
+        }] });
+class XTableHeaderRow extends CdkHeaderRow {
+    constructor() {
+        super(...arguments);
+        this.tableView = inject(XTableView, { optional: true });
+        this.tableViewService = inject(XTableViewService, { optional: true });
+        this.sticking = signal(false, ...(ngDevMode ? [{ debugName: "sticking" }] : []));
+    }
+    get isSticking() {
+        return this.sticking();
+    }
+    ngAfterViewInit() {
+        this.listenerSticky();
+    }
+    listenerSticky() {
+        const index = this.tableView?.headerRows().findIndex((x) => x === this);
+        if (index === undefined || index < 0)
+            return;
+        const rowLen = this.tableView?.headerRowRefs()?.length ?? 0;
+        if (rowLen === 0 || rowLen < index)
+            return;
+        const sticky = this.tableView?.headerRowRefs()[index].sticky;
+        if (!sticky)
+            return;
+        const sentinel = this.tableView?.sentinelTop().nativeElement;
+        const observer = new IntersectionObserver(([entry]) => {
+            const sticking = !entry.isIntersecting;
+            if (sticking) {
+                if (!this.tableViewService.stickyHeaderRows.includes(this)) {
+                    this.tableViewService.stickyHeaderRows.push(this);
+                }
+            }
+            else {
+                if (this.tableViewService.stickyHeaderRows.includes(this)) {
+                    this.tableViewService.stickyHeaderRows = this.tableViewService.stickyHeaderRows.filter((item) => item !== this);
+                }
+            }
+            this.sticking.set(sticking);
+        }, { threshold: 0 });
+        observer.observe(sentinel);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableHeaderRow, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: XTableHeaderRow, isStandalone: true, selector: "x-table-header-row, tr[x-table-header-row]", host: { attributes: { "role": "row" }, properties: { "class.x-table-sticky-top": "this.isSticking" }, classAttribute: "x-table-header-row" }, providers: [{ provide: CdkHeaderRow, useExisting: XTableHeaderRow }], exportAs: ["xTableHeaderRow"], usesInheritance: true, ngImport: i0, template: "<ng-container cdkCellOutlet></ng-container>", isInline: true, dependencies: [{ kind: "directive", type: CdkCellOutlet, selector: "[cdkCellOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableHeaderRow, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'x-table-header-row, tr[x-table-header-row]',
+                    template: ROW_TEMPLATE,
+                    host: {
+                        class: 'x-table-header-row',
+                        role: 'row'
+                    },
+                    changeDetection: ChangeDetectionStrategy.Default,
+                    encapsulation: ViewEncapsulation.None,
+                    exportAs: 'xTableHeaderRow',
+                    providers: [{ provide: CdkHeaderRow, useExisting: XTableHeaderRow }],
+                    imports: [CdkCellOutlet]
+                }]
+        }], propDecorators: { isSticking: [{
+                type: HostBinding,
+                args: ['class.x-table-sticky-top']
+            }] } });
+class XTableFooterRow extends CdkFooterRow {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableFooterRow, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: XTableFooterRow, isStandalone: true, selector: "x-table-footer-row, tr[x-table-footer-row]", host: { attributes: { "role": "row" }, classAttribute: "x-table-footer-row" }, providers: [{ provide: CdkFooterRow, useExisting: XTableFooterRow }], exportAs: ["xTableFooterRow"], usesInheritance: true, ngImport: i0, template: "<ng-container cdkCellOutlet></ng-container>", isInline: true, dependencies: [{ kind: "directive", type: CdkCellOutlet, selector: "[cdkCellOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableFooterRow, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'x-table-footer-row, tr[x-table-footer-row]',
+                    template: ROW_TEMPLATE,
+                    host: {
+                        class: 'x-table-footer-row',
+                        role: 'row'
+                    },
+                    changeDetection: ChangeDetectionStrategy.Default,
+                    encapsulation: ViewEncapsulation.None,
+                    exportAs: 'xTableFooterRow',
+                    providers: [{ provide: CdkFooterRow, useExisting: XTableFooterRow }],
+                    imports: [CdkCellOutlet]
+                }]
+        }] });
+class XTableViewRow extends CdkRow {
+    constructor() {
+        super(...arguments);
+        this.tableViewService = inject(XTableViewService, { optional: true });
+    }
+    get isActived() {
+        return this.tableViewService.activedRows.includes(this);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewRow, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: XTableViewRow, isStandalone: true, selector: "x-table-row, tr[x-table-row]", host: { attributes: { "role": "row" }, properties: { "class.x-table-row-actived": "this.isActived" }, classAttribute: "x-table-row" }, providers: [{ provide: CdkRow, useExisting: XTableViewRow }], exportAs: ["xTableRow"], usesInheritance: true, ngImport: i0, template: "<ng-container cdkCellOutlet></ng-container>", isInline: true, dependencies: [{ kind: "directive", type: CdkCellOutlet, selector: "[cdkCellOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewRow, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'x-table-row, tr[x-table-row]',
+                    template: ROW_TEMPLATE,
+                    host: {
+                        class: 'x-table-row',
+                        role: 'row'
+                    },
+                    changeDetection: ChangeDetectionStrategy.Default,
+                    encapsulation: ViewEncapsulation.None,
+                    exportAs: 'xTableRow',
+                    providers: [{ provide: CdkRow, useExisting: XTableViewRow }],
+                    imports: [CdkCellOutlet]
+                }]
+        }], propDecorators: { isActived: [{
+                type: HostBinding,
+                args: ['class.x-table-row-actived']
+            }] } });
+class XTableNoDataRow extends CdkNoDataRow {
+    constructor() {
+        super(...arguments);
+        this._contentClassName = 'x-table-no-data-row';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableNoDataRow, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: XTableNoDataRow, isStandalone: true, selector: "ng-template[xTableNoDataRow]", providers: [{ provide: CdkNoDataRow, useExisting: XTableNoDataRow }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableNoDataRow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[xTableNoDataRow]',
+                    providers: [{ provide: CdkNoDataRow, useExisting: XTableNoDataRow }]
+                }]
+        }] });
+
+class XTableView extends XTableViewProperty {
+    constructor() {
+        super(...arguments);
+        this.elementRef = inject(ElementRef);
+        this.sentinelTop = viewChild('sentinelTop', ...(ngDevMode ? [{ debugName: "sentinelTop" }] : []));
+        this.headerRowRef = contentChild(XTableHeaderRowDef, ...(ngDevMode ? [{ debugName: "headerRowRef" }] : []));
+        this.headerRowRefs = contentChildren(XTableHeaderRowDef, ...(ngDevMode ? [{ debugName: "headerRowRefs" }] : []));
+        this.headerRows = contentChildren(XTableHeaderRow, ...(ngDevMode ? [{ debugName: "headerRows" }] : []));
+        this.columnDefs = contentChildren(XTableColumnDef, ...(ngDevMode ? [{ debugName: "columnDefs" }] : []));
+        this.headerCells = contentChildren(XTableHeaderCell, ...(ngDevMode ? [{ debugName: "headerCells" }] : []));
+        this.cells = contentChildren(XTableViewCell, ...(ngDevMode ? [{ debugName: "cells" }] : []));
+        this.rows = contentChildren(XTableViewRow, ...(ngDevMode ? [{ debugName: "rows" }] : []));
+        /** Overrides the sticky CSS class set by the `CdkTable`. */
+        this.stickyCssClass = 'x-table-sticky';
+        /** Overrides the need to add position: sticky on every sticky cell element in `CdkTable`. */
+        this.needsPositionStickyOnElement = false;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableView, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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 },
+            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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableView, decorators: [{
+            type: Component,
+            args: [{ selector: 'x-table-view, table[x-table-view]', exportAs: 'xTableView', host: {
+                        class: 'x-table-view',
+                        '[class.x-table-fixed-layout]': 'fixedLayout'
+                    }, 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 },
+                        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"] }]
+        }] });
+
+class XTableViewCellDef extends CdkCellDef {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewCellDef, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: XTableViewCellDef, isStandalone: true, selector: "[xTableCellDef]", providers: [{ provide: CdkCellDef, useExisting: XTableViewCellDef }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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.2.4", ngImport: i0, type: XTableHeaderCellDef, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: XTableHeaderCellDef, isStandalone: true, selector: "[xTableHeaderCellDef]", providers: [{ provide: CdkHeaderCellDef, useExisting: XTableHeaderCellDef }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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.2.4", ngImport: i0, type: XTableFooterCellDef, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: XTableFooterCellDef, isStandalone: true, selector: "[xTableFooterCellDef]", providers: [{ provide: CdkFooterCellDef, useExisting: XTableFooterCellDef }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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.2.4", ngImport: i0, type: XTableColumnDef, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", 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.2.4", 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.2.4", ngImport: i0, type: XTableHeaderCell, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", 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.2.4", 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.2.4", ngImport: i0, type: XTableFooterCell, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", 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.2.4", 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.2.4", ngImport: i0, type: XTableViewCell, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", 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.2.4", 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.2.4", ngImport: i0, type: XTableTextColumn, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: XTableTextColumn, isStandalone: true, selector: "x-table-text-column", usesInheritance: true, ngImport: i0, template: `
+    <ng-container xTableColumnDef>
+      <th x-table-header-cell *xTableHeaderCellDef [style.text-align]="justify">
+        {{ headerText }}
+      </th>
+      <td x-table-cell *xTableCellDef="let data" [style.text-align]="justify">
+        {{ dataAccessor(data, name) }}
+      </td>
+    </ng-container>
+  `, isInline: true, dependencies: [{ kind: "directive", type: XTableColumnDef, selector: "[xTableColumnDef]", inputs: ["xTableColumnDef"] }, { kind: "directive", type: XTableHeaderCellDef, selector: "[xTableHeaderCellDef]" }, { kind: "directive", type: XTableHeaderCell, selector: "x-table-header-cell, th[x-table-header-cell]" }, { kind: "directive", type: XTableViewCellDef, selector: "[xTableCellDef]" }, { kind: "directive", type: XTableViewCell, selector: "x-table-cell, td[x-table-cell]" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableTextColumn, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'x-table-text-column',
+                    template: `
+    <ng-container xTableColumnDef>
+      <th x-table-header-cell *xTableHeaderCellDef [style.text-align]="justify">
+        {{ headerText }}
+      </th>
+      <td x-table-cell *xTableCellDef="let data" [style.text-align]="justify">
+        {{ dataAccessor(data, name) }}
+      </td>
+    </ng-container>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.Default,
+                    imports: [XTableColumnDef, XTableHeaderCellDef, XTableHeaderCell, XTableViewCellDef, XTableViewCell]
+                }]
+        }] });
+
+const EXPORTED_DECLARATIONS = [
+    // Table
+    XTableView,
+    // Template defs
+    XTableHeaderCellDef,
+    XTableHeaderRowDef,
+    XTableColumnDef,
+    XTableViewCellDef,
+    XTableViewRowDef,
+    XTableFooterCellDef,
+    XTableFooterRowDef,
+    // Cell directives
+    XTableHeaderCell,
+    XTableViewCell,
+    XTableFooterCell,
+    // Row directives
+    XTableHeaderRow,
+    XTableViewRow,
+    XTableFooterRow,
+    XTableNoDataRow,
+    XTableTextColumn
+];
+class XTableViewModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: XTableViewModule, imports: [CdkTableModule, 
+            // Table
+            XTableView,
+            // Template defs
+            XTableHeaderCellDef,
+            XTableHeaderRowDef,
+            XTableColumnDef,
+            XTableViewCellDef,
+            XTableViewRowDef,
+            XTableFooterCellDef,
+            XTableFooterRowDef,
+            // Cell directives
+            XTableHeaderCell,
+            XTableViewCell,
+            XTableFooterCell,
+            // Row directives
+            XTableHeaderRow,
+            XTableViewRow,
+            XTableFooterRow,
+            XTableNoDataRow,
+            XTableTextColumn], exports: [
+            // Table
+            XTableView,
+            // Template defs
+            XTableHeaderCellDef,
+            XTableHeaderRowDef,
+            XTableColumnDef,
+            XTableViewCellDef,
+            XTableViewRowDef,
+            XTableFooterCellDef,
+            XTableFooterRowDef,
+            // Cell directives
+            XTableHeaderCell,
+            XTableViewCell,
+            XTableFooterCell,
+            // Row directives
+            XTableHeaderRow,
+            XTableViewRow,
+            XTableFooterRow,
+            XTableNoDataRow,
+            XTableTextColumn] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewModule, imports: [CdkTableModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [...EXPORTED_DECLARATIONS],
+                    imports: [CdkTableModule, ...EXPORTED_DECLARATIONS]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { XTableColumnDef, XTableFooterCell, XTableFooterCellDef, XTableFooterRow, XTableFooterRowDef, XTableHeaderCell, XTableHeaderCellDef, XTableHeaderRow, XTableHeaderRowDef, XTableNoDataRow, XTableTextColumn, XTableView, XTableViewCell, XTableViewCellDef, XTableViewModule, XTableViewPrefix, XTableViewProperty, XTableViewRow, XTableViewRowDef };
+//# sourceMappingURL=ng-nest-ui-table-view.mjs.map