@ngstarter-ui/components 1.0.21

package/fesm2022/ngstarter-ui-components-table.mjs

@@ -0,0 +1,648 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, inject, DestroyRef, signal, computed, forwardRef, ContentChildren, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import * as i1 from '@angular/cdk/table';
+import { CdkTable, CdkTableModule, CdkHeaderRowDef, CdkColumnDef, CDK_TABLE, STICKY_POSITIONING_LISTENER, HeaderRowOutlet, FooterRowOutlet, DataRowOutlet, NoDataRowOutlet, CdkCell, CdkCellDef, CdkFooterCell, CdkFooterCellDef, CdkFooterRow, CdkCellOutlet, CdkFooterRowDef, CdkHeaderCell, CdkHeaderCellDef, CdkHeaderRow, CdkNoDataRow, CdkRow, CdkRowDef, CdkTextColumn } from '@angular/cdk/table';
+import { takeUntilDestroyed, outputToObservable } from '@angular/core/rxjs-interop';
+import { DataSource } from '@angular/cdk/collections';
+import { BehaviorSubject, Subject, Subscription, merge, of, combineLatest, isObservable, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+class Table extends CdkTable {
+    hideHeader = input(false, { ...(ngDevMode ? { debugName: "hideHeader" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    hideBody = input(false, { ...(ngDevMode ? { debugName: "hideBody" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    hideFooter = input(false, { ...(ngDevMode ? { debugName: "hideFooter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    destroyRef = inject(DestroyRef);
+    /**
+     * Whether the table has any sticky header rows.
+     * This is used to apply the 'ngs-table-sticky-header' class.
+     */
+    _hasStickyHeader = signal(false, ...(ngDevMode ? [{ debugName: "_hasStickyHeader" }] : /* istanbul ignore next */ []));
+    hasStickyHeader = computed(() => this._hasStickyHeader(), ...(ngDevMode ? [{ debugName: "hasStickyHeader" }] : /* istanbul ignore next */ []));
+    // We define our own queries to track changes, avoiding conflict with CdkTable's internal properties.
+    // Angular will populate these just fine alongside the parent's queries.
+    headerRowDefsQuery;
+    columnDefsQuery;
+    /**
+     * Whether the table has any sticky columns.
+     */
+    _hasStickyColumns = signal(false, ...(ngDevMode ? [{ debugName: "_hasStickyColumns" }] : /* istanbul ignore next */ []));
+    hasStickyColumns = computed(() => this._hasStickyColumns(), ...(ngDevMode ? [{ debugName: "hasStickyColumns" }] : /* istanbul ignore next */ []));
+    _updateStickyStates() {
+        if (this.headerRowDefsQuery) {
+            const headerRowDefs = this.headerRowDefsQuery.toArray();
+            const hasStickyHeaderRows = headerRowDefs.some((def) => def.sticky);
+            this._hasStickyHeader.set(hasStickyHeaderRows);
+        }
+        if (this.columnDefsQuery) {
+            const colDefs = this.columnDefsQuery.toArray();
+            const hasStickyColumns = colDefs.some((def) => def.sticky || def.stickyEnd);
+            this._hasStickyColumns.set(hasStickyColumns);
+            // Directly set the property on the base class.
+            // This triggers the base class setter logic which handles style updates.
+            this.fixedLayout = hasStickyColumns;
+        }
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+        this.headerRowDefsQuery.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this._updateStickyStates();
+        });
+        this.columnDefsQuery.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this._updateStickyStates();
+        });
+        this._updateStickyStates();
+    }
+    stickyCssClass = 'ngs-table-sticky';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Table, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: Table, isStandalone: true, selector: "ngs-table, table[ngs-table]", inputs: { hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: true, isRequired: false, transformFunction: null }, hideBody: { classPropertyName: "hideBody", publicName: "hideBody", isSignal: true, isRequired: false, transformFunction: null }, hideFooter: { classPropertyName: "hideFooter", publicName: "hideFooter", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "grid" }, properties: { "class.ngs-table-fixed-layout": "fixedLayout", "class.ngs-table-sticky": "hasStickyColumns()" }, classAttribute: "ngs-table not-prose" }, providers: [
+            { provide: CdkTable, useExisting: forwardRef(() => Table) },
+            { provide: CDK_TABLE, useExisting: forwardRef(() => Table) },
+            { provide: STICKY_POSITIONING_LISTENER, useValue: null },
+        ], queries: [{ propertyName: "headerRowDefsQuery", predicate: CdkHeaderRowDef, descendants: true }, { propertyName: "columnDefsQuery", predicate: CdkColumnDef, descendants: true }], exportAs: ["ngsTable"], usesInheritance: true, ngImport: i0, template: "<thead [class.ngs-table-sticky-header]=\"hasStickyHeader()\" [class.hidden]=\"hideHeader()\">\n  <ng-container headerRowOutlet />\n</thead>\n<tbody [class.hidden]=\"hideBody()\">\n  <ng-container rowOutlet />\n  <ng-container noDataRowOutlet />\n</tbody>\n<tfoot [class.hidden]=\"hideFooter()\">\n  <ng-container footerRowOutlet />\n</tfoot>\n", styles: [":host{background:var(--ngs-table-background);border-spacing:0;width:100%;display:table;border-collapse:collapse}:host.ngs-table-fixed-layout{table-layout:fixed;min-width:100%;width:max-content}:host ::ng-deep .ngs-header-cell{font-size:var(--ngs-table-header-cell-font-size);font-weight:var(--ngs-table-header-cell-font-weight);color:var(--ngs-table-header-cell-color);text-transform:uppercase;overflow:hidden;display:table-cell;vertical-align:middle;text-align:start}:host ::ng-deep .ngs-header-cell,:host ::ng-deep .ngs-cell,:host ::ng-deep .ngs-footer-cell{display:table-cell;vertical-align:middle;text-align:start;padding:var(--ngs-table-cell-padding);font-size:var(--ngs-table-cell-font-size);height:var(--ngs-table-row-height);background:var(--ngs-table-background)}:host ::ng-deep .ngs-header-cell.ngs-table-sticky,:host ::ng-deep .ngs-cell.ngs-table-sticky,:host ::ng-deep .ngs-footer-cell.ngs-table-sticky{position:sticky!important;background:inherit;z-index:10;background-clip:padding-box}:host ::ng-deep .ngs-header-cell.ngs-table-sticky.ngs-header-cell,:host ::ng-deep .ngs-cell.ngs-table-sticky.ngs-header-cell,:host ::ng-deep .ngs-footer-cell.ngs-table-sticky.ngs-header-cell{z-index:100;background:var(--ngs-table-header-cell-background, var(--ngs-table-background))}:host ::ng-deep .ngs-header-cell.ngs-table-sticky.ngs-footer-cell,:host ::ng-deep .ngs-cell.ngs-table-sticky.ngs-footer-cell,:host ::ng-deep .ngs-footer-cell.ngs-table-sticky.ngs-footer-cell{z-index:100;background:var(--ngs-table-header-cell-background, var(--ngs-table-background))}:host ::ng-deep .ngs-header-cell.ngs-table-sticky.ngs-table-sticky-border-elem-left:before,:host ::ng-deep .ngs-cell.ngs-table-sticky.ngs-table-sticky-border-elem-left:before,:host ::ng-deep .ngs-footer-cell.ngs-table-sticky.ngs-table-sticky-border-elem-left:before{content:\"\";position:absolute;top:0;right:0;width:1px;bottom:0;background:var(--ngs-table-border-color)}:host ::ng-deep .ngs-header-cell.ngs-table-sticky.ngs-table-sticky-border-elem-right:before,:host ::ng-deep .ngs-cell.ngs-table-sticky.ngs-table-sticky-border-elem-right:before,:host ::ng-deep .ngs-footer-cell.ngs-table-sticky.ngs-table-sticky-border-elem-right:before{content:\"\";position:absolute;top:0;left:0;width:1px;bottom:0;background:var(--ngs-table-border-color)}:host ::ng-deep .ngs-header-cell.ngs-table-sticky.ngs-table-sticky-border-elem-top:after,:host ::ng-deep .ngs-cell.ngs-table-sticky.ngs-table-sticky-border-elem-top:after,:host ::ng-deep .ngs-footer-cell.ngs-table-sticky.ngs-table-sticky-border-elem-top:after{content:\"\";position:absolute;left:0;right:0;height:1px;bottom:0;background:var(--ngs-table-border-color)}:host ::ng-deep .ngs-header-cell.ngs-table-sticky.ngs-table-sticky-border-elem-bottom:after,:host ::ng-deep .ngs-cell.ngs-table-sticky.ngs-table-sticky-border-elem-bottom:after,:host ::ng-deep .ngs-footer-cell.ngs-table-sticky.ngs-table-sticky-border-elem-bottom:after{content:\"\";position:absolute;top:0;left:0;height:1px;right:0;background:var(--ngs-table-border-color)}:host ::ng-deep .ngs-header-cell.ngs-table-sticky.ngs-table-sticky-border-elem-left,:host ::ng-deep .ngs-header-cell.ngs-table-sticky.ngs-table-sticky-border-elem-right{z-index:110}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CdkTableModule }, { kind: "directive", type: i1.DataRowOutlet, selector: "[rowOutlet]" }, { kind: "directive", type: i1.HeaderRowOutlet, selector: "[headerRowOutlet]" }, { kind: "directive", type: i1.FooterRowOutlet, selector: "[footerRowOutlet]" }, { kind: "directive", type: i1.NoDataRowOutlet, selector: "[noDataRowOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Table, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-table, table[ngs-table]', exportAs: 'ngsTable', imports: [
+                        CdkTableModule,
+                        HeaderRowOutlet,
+                        FooterRowOutlet,
+                        DataRowOutlet,
+                        NoDataRowOutlet,
+                    ], providers: [
+                        { provide: CdkTable, useExisting: forwardRef(() => Table) },
+                        { provide: CDK_TABLE, useExisting: forwardRef(() => Table) },
+                        { provide: STICKY_POSITIONING_LISTENER, useValue: null },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-table not-prose',
+                        '[class.ngs-table-fixed-layout]': 'fixedLayout',
+                        '[class.ngs-table-sticky]': 'hasStickyColumns()',
+                        'role': 'grid'
+                    }, template: "<thead [class.ngs-table-sticky-header]=\"hasStickyHeader()\" [class.hidden]=\"hideHeader()\">\n  <ng-container headerRowOutlet />\n</thead>\n<tbody [class.hidden]=\"hideBody()\">\n  <ng-container rowOutlet />\n  <ng-container noDataRowOutlet />\n</tbody>\n<tfoot [class.hidden]=\"hideFooter()\">\n  <ng-container footerRowOutlet />\n</tfoot>\n", styles: [":host{background:var(--ngs-table-background);border-spacing:0;width:100%;display:table;border-collapse:collapse}:host.ngs-table-fixed-layout{table-layout:fixed;min-width:100%;width:max-content}:host ::ng-deep .ngs-header-cell{font-size:var(--ngs-table-header-cell-font-size);font-weight:var(--ngs-table-header-cell-font-weight);color:var(--ngs-table-header-cell-color);text-transform:uppercase;overflow:hidden;display:table-cell;vertical-align:middle;text-align:start}:host ::ng-deep .ngs-header-cell,:host ::ng-deep .ngs-cell,:host ::ng-deep .ngs-footer-cell{display:table-cell;vertical-align:middle;text-align:start;padding:var(--ngs-table-cell-padding);font-size:var(--ngs-table-cell-font-size);height:var(--ngs-table-row-height);background:var(--ngs-table-background)}:host ::ng-deep .ngs-header-cell.ngs-table-sticky,:host ::ng-deep .ngs-cell.ngs-table-sticky,:host ::ng-deep .ngs-footer-cell.ngs-table-sticky{position:sticky!important;background:inherit;z-index:10;background-clip:padding-box}:host ::ng-deep .ngs-header-cell.ngs-table-sticky.ngs-header-cell,:host ::ng-deep .ngs-cell.ngs-table-sticky.ngs-header-cell,:host ::ng-deep .ngs-footer-cell.ngs-table-sticky.ngs-header-cell{z-index:100;background:var(--ngs-table-header-cell-background, var(--ngs-table-background))}:host ::ng-deep .ngs-header-cell.ngs-table-sticky.ngs-footer-cell,:host ::ng-deep .ngs-cell.ngs-table-sticky.ngs-footer-cell,:host ::ng-deep .ngs-footer-cell.ngs-table-sticky.ngs-footer-cell{z-index:100;background:var(--ngs-table-header-cell-background, var(--ngs-table-background))}:host ::ng-deep .ngs-header-cell.ngs-table-sticky.ngs-table-sticky-border-elem-left:before,:host ::ng-deep .ngs-cell.ngs-table-sticky.ngs-table-sticky-border-elem-left:before,:host ::ng-deep .ngs-footer-cell.ngs-table-sticky.ngs-table-sticky-border-elem-left:before{content:\"\";position:absolute;top:0;right:0;width:1px;bottom:0;background:var(--ngs-table-border-color)}:host ::ng-deep .ngs-header-cell.ngs-table-sticky.ngs-table-sticky-border-elem-right:before,:host ::ng-deep .ngs-cell.ngs-table-sticky.ngs-table-sticky-border-elem-right:before,:host ::ng-deep .ngs-footer-cell.ngs-table-sticky.ngs-table-sticky-border-elem-right:before{content:\"\";position:absolute;top:0;left:0;width:1px;bottom:0;background:var(--ngs-table-border-color)}:host ::ng-deep .ngs-header-cell.ngs-table-sticky.ngs-table-sticky-border-elem-top:after,:host ::ng-deep .ngs-cell.ngs-table-sticky.ngs-table-sticky-border-elem-top:after,:host ::ng-deep .ngs-footer-cell.ngs-table-sticky.ngs-table-sticky-border-elem-top:after{content:\"\";position:absolute;left:0;right:0;height:1px;bottom:0;background:var(--ngs-table-border-color)}:host ::ng-deep .ngs-header-cell.ngs-table-sticky.ngs-table-sticky-border-elem-bottom:after,:host ::ng-deep .ngs-cell.ngs-table-sticky.ngs-table-sticky-border-elem-bottom:after,:host ::ng-deep .ngs-footer-cell.ngs-table-sticky.ngs-table-sticky-border-elem-bottom:after{content:\"\";position:absolute;top:0;left:0;height:1px;right:0;background:var(--ngs-table-border-color)}:host ::ng-deep .ngs-header-cell.ngs-table-sticky.ngs-table-sticky-border-elem-left,:host ::ng-deep .ngs-header-cell.ngs-table-sticky.ngs-table-sticky-border-elem-right{z-index:110}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { hideHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideHeader", required: false }] }], hideBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideBody", required: false }] }], hideFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideFooter", required: false }] }], headerRowDefsQuery: [{
+                type: ContentChildren,
+                args: [CdkHeaderRowDef, { descendants: true }]
+            }], columnDefsQuery: [{
+                type: ContentChildren,
+                args: [CdkColumnDef, { descendants: true }]
+            }] } });
+
+/** Cell template container that adds the right classes and role. */
+class Cell extends CdkCell {
+    constructor(elementRef) {
+        super(elementRef);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Cell, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: Cell, isStandalone: true, selector: "ngs-cell, [ngs-cell], td[ngs-cell]", host: { attributes: { "role": "gridcell" }, classAttribute: "ngs-cell" }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Cell, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ngs-cell, [ngs-cell], td[ngs-cell]',
+                    host: {
+                        'class': 'ngs-cell',
+                        'role': 'gridcell',
+                    },
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
+/** Cell definition for the ngs-table. */
+class CellDef extends CdkCellDef {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CellDef, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: CellDef, isStandalone: true, selector: "[ngsCellDef]", providers: [{ provide: CdkCellDef, useExisting: forwardRef(() => CellDef) }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CellDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsCellDef]',
+                    standalone: true,
+                    providers: [{ provide: CdkCellDef, useExisting: forwardRef(() => CellDef) }],
+                }]
+        }] });
+
+/**
+ * Column definition for the ngs-table.
+ * Defines a set of cells available for a table column.
+ */
+class ColumnDef extends CdkColumnDef {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ColumnDef, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: ColumnDef, isStandalone: true, selector: "[ngsColumnDef]", inputs: { name: ["ngsColumnDef", "name"] }, providers: [{ provide: CdkColumnDef, useExisting: forwardRef(() => ColumnDef) }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ColumnDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsColumnDef]',
+                    standalone: true,
+                    providers: [{ provide: CdkColumnDef, useExisting: forwardRef(() => ColumnDef) }],
+                    inputs: ['name: ngsColumnDef'],
+                }]
+        }] });
+
+/** Footer cell template container that adds the right classes and role. */
+class FooterCell extends CdkFooterCell {
+    constructor(elementRef) {
+        super(elementRef);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FooterCell, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: FooterCell, isStandalone: true, selector: "ngs-footer-cell, [ngs-footer-cell], td[ngs-footer-cell]", host: { attributes: { "role": "gridcell" }, classAttribute: "ngs-footer-cell" }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FooterCell, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ngs-footer-cell, [ngs-footer-cell], td[ngs-footer-cell]',
+                    host: {
+                        'class': 'ngs-footer-cell',
+                        'role': 'gridcell',
+                    },
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
+/** Footer cell definition for the ngs-table. */
+class FooterCellDef extends CdkFooterCellDef {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FooterCellDef, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: FooterCellDef, isStandalone: true, selector: "[ngsFooterCellDef]", providers: [{ provide: CdkFooterCellDef, useExisting: forwardRef(() => FooterCellDef) }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FooterCellDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsFooterCellDef]',
+                    standalone: true,
+                    providers: [{ provide: CdkFooterCellDef, useExisting: forwardRef(() => FooterCellDef) }],
+                }]
+        }] });
+
+/** Footer template container that adds the right classes and role. */
+class FooterRow extends CdkFooterRow {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FooterRow, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: FooterRow, isStandalone: true, selector: "ngs-footer-row, [ngs-footer-row], tr[ngs-footer-row]", host: { attributes: { "role": "row" }, classAttribute: "ngs-footer-row" }, providers: [{ provide: CdkFooterRow, useExisting: forwardRef(() => FooterRow) }], usesInheritance: true, ngImport: i0, template: "<ng-container cdkCellOutlet />\n", styles: [":host{min-height:var(--ngs-table-row-height);display:table-row}:host:last-child ::ng-deep .ngs-footer-cell,:host:last-child ::ng-deep td{border-bottom:none}\n"], dependencies: [{ kind: "directive", type: CdkCellOutlet, selector: "[cdkCellOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FooterRow, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-footer-row, [ngs-footer-row], tr[ngs-footer-row]', host: {
+                        'class': 'ngs-footer-row',
+                        'role': 'row',
+                    }, changeDetection: ChangeDetectionStrategy.Default, standalone: true, imports: [CdkCellOutlet], providers: [{ provide: CdkFooterRow, useExisting: forwardRef(() => FooterRow) }], template: "<ng-container cdkCellOutlet />\n", styles: [":host{min-height:var(--ngs-table-row-height);display:table-row}:host:last-child ::ng-deep .ngs-footer-cell,:host:last-child ::ng-deep td{border-bottom:none}\n"] }]
+        }] });
+
+/** Footer row definition for the ngs-table. */
+class FooterRowDef extends CdkFooterRowDef {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FooterRowDef, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: FooterRowDef, isStandalone: true, selector: "[ngsFooterRowDef]", inputs: { columns: ["ngsFooterRowDef", "columns"], sticky: ["ngsFooterRowDefSticky", "sticky"] }, providers: [{ provide: CdkFooterRowDef, useExisting: forwardRef(() => FooterRowDef) }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FooterRowDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsFooterRowDef]',
+                    standalone: true,
+                    providers: [{ provide: CdkFooterRowDef, useExisting: forwardRef(() => FooterRowDef) }],
+                    inputs: ['columns: ngsFooterRowDef', 'sticky: ngsFooterRowDefSticky'],
+                }]
+        }] });
+
+/** Header cell template container that adds the right classes and role. */
+class HeaderCell extends CdkHeaderCell {
+    constructor(elementRef) {
+        super(elementRef);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HeaderCell, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: HeaderCell, isStandalone: true, selector: "ngs-header-cell, [ngs-header-cell], th[ngs-header-cell]", host: { attributes: { "role": "columnheader" }, classAttribute: "ngs-header-cell" }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HeaderCell, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ngs-header-cell, [ngs-header-cell], th[ngs-header-cell]',
+                    host: {
+                        'class': 'ngs-header-cell',
+                        'role': 'columnheader',
+                    },
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
+/** Header cell definition for the ngs-table. */
+class HeaderCellDef extends CdkHeaderCellDef {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HeaderCellDef, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: HeaderCellDef, isStandalone: true, selector: "[ngsHeaderCellDef]", providers: [{ provide: CdkHeaderCellDef, useExisting: forwardRef(() => HeaderCellDef) }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HeaderCellDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsHeaderCellDef]',
+                    standalone: true,
+                    providers: [{ provide: CdkHeaderCellDef, useExisting: forwardRef(() => HeaderCellDef) }],
+                }]
+        }] });
+
+/** Header template container that adds the right classes and role. */
+class HeaderRow extends CdkHeaderRow {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HeaderRow, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: HeaderRow, isStandalone: true, selector: "ngs-header-row, [ngs-header-row], tr[ngs-header-row]", host: { attributes: { "role": "row" }, classAttribute: "ngs-header-row" }, providers: [{ provide: CdkHeaderRow, useExisting: forwardRef(() => HeaderRow) }], usesInheritance: true, ngImport: i0, template: "<ng-container cdkCellOutlet />\n", styles: [":host{height:var(--ngs-table-header-row-height);display:table-row;background:var(--ngs-data-view-header-bg, var(--color-background));width:100%}:host-context(.highlight-header) :host{position:relative;margin:var(--ngs-data-view-hl-header-margin, 0)}:host-context(.highlight-header) :host:before{content:\"\";position:absolute;left:0;right:0;background:var(--ngs-data-view-hl-header-row-bg, var(--color-surface-container));height:calc(var(--spacing, .25rem) * 12);border-radius:.5rem;z-index:0}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: CdkCellOutlet, selector: "[cdkCellOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HeaderRow, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-header-row, [ngs-header-row], tr[ngs-header-row]', host: {
+                        'class': 'ngs-header-row',
+                        'role': 'row',
+                    }, changeDetection: ChangeDetectionStrategy.Default, standalone: true, imports: [CdkCellOutlet], providers: [{ provide: CdkHeaderRow, useExisting: forwardRef(() => HeaderRow) }], template: "<ng-container cdkCellOutlet />\n", styles: [":host{height:var(--ngs-table-header-row-height);display:table-row;background:var(--ngs-data-view-header-bg, var(--color-background));width:100%}:host-context(.highlight-header) :host{position:relative;margin:var(--ngs-data-view-hl-header-margin, 0)}:host-context(.highlight-header) :host:before{content:\"\";position:absolute;left:0;right:0;background:var(--ngs-data-view-hl-header-row-bg, var(--color-surface-container));height:calc(var(--spacing, .25rem) * 12);border-radius:.5rem;z-index:0}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+/** Header row definition for the ngs-table. */
+class HeaderRowDef extends CdkHeaderRowDef {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HeaderRowDef, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: HeaderRowDef, isStandalone: true, selector: "[ngsHeaderRowDef]", inputs: { columns: ["ngsHeaderRowDef", "columns"], sticky: ["ngsHeaderRowDefSticky", "sticky"] }, providers: [{ provide: CdkHeaderRowDef, useExisting: forwardRef(() => HeaderRowDef) }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HeaderRowDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsHeaderRowDef]',
+                    standalone: true,
+                    providers: [{ provide: CdkHeaderRowDef, useExisting: forwardRef(() => HeaderRowDef) }],
+                    inputs: ['columns: ngsHeaderRowDef', 'sticky: ngsHeaderRowDefSticky'],
+                }]
+        }] });
+
+/** Row that can be used to display a message when no data is shown in the table. */
+class NoDataRow extends CdkNoDataRow {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NoDataRow, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: NoDataRow, isStandalone: true, selector: "ng-template[ngsNoDataRow]", providers: [{ provide: CdkNoDataRow, useExisting: forwardRef(() => NoDataRow) }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NoDataRow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[ngsNoDataRow]',
+                    standalone: true,
+                    providers: [{ provide: CdkNoDataRow, useExisting: forwardRef(() => NoDataRow) }],
+                }]
+        }] });
+
+/** Data row template container that adds the right classes and role. */
+class Row extends CdkRow {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Row, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: Row, isStandalone: true, selector: "ngs-row, [ngs-row], tr[ngs-row]", host: { attributes: { "role": "row" }, classAttribute: "ngs-row" }, providers: [{ provide: CdkRow, useExisting: forwardRef(() => Row) }], usesInheritance: true, ngImport: i0, template: "<ng-container cdkCellOutlet />\n", styles: [":host{position:relative;display:table-row;border:none;border-top:1px solid var(--color-border);height:auto;border-radius:0;margin-top:0;background:var(--ngs-data-view-row-bg, var(--color-background));min-height:var(--ngs-table-row-height)}:host:last-child ::ng-deep .ngs-footer-cell,:host:last-child ::ng-deep td{border-bottom:none}:host-context(.highlight-header,.sticky-header,.ngs-table-sticky-header) :host:first-of-type{border-top:none!important}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: CdkCellOutlet, selector: "[cdkCellOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Row, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-row, [ngs-row], tr[ngs-row]', host: {
+                        'class': 'ngs-row',
+                        'role': 'row',
+                    }, changeDetection: ChangeDetectionStrategy.Default, standalone: true, imports: [CdkCellOutlet], providers: [{ provide: CdkRow, useExisting: forwardRef(() => Row) }], template: "<ng-container cdkCellOutlet />\n", styles: [":host{position:relative;display:table-row;border:none;border-top:1px solid var(--color-border);height:auto;border-radius:0;margin-top:0;background:var(--ngs-data-view-row-bg, var(--color-background));min-height:var(--ngs-table-row-height)}:host:last-child ::ng-deep .ngs-footer-cell,:host:last-child ::ng-deep td{border-bottom:none}:host-context(.highlight-header,.sticky-header,.ngs-table-sticky-header) :host:first-of-type{border-top:none!important}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+/** Data row definition for the ngs-table. */
+class RowDef extends CdkRowDef {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RowDef, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: RowDef, isStandalone: true, selector: "[ngsRowDef]", inputs: { columns: ["ngsRowDefColumns", "columns"], when: ["ngsRowDefWhen", "when"] }, providers: [{ provide: CdkRowDef, useExisting: forwardRef(() => RowDef) }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RowDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsRowDef]',
+                    standalone: true,
+                    providers: [{ provide: CdkRowDef, useExisting: forwardRef(() => RowDef) }],
+                    inputs: ['columns: ngsRowDefColumns', 'when: ngsRowDefWhen'],
+                }]
+        }] });
+
+/**
+ * Column that simply shows text content for the header and row cells. Assumes that the table
+ * is using the native table implementation (`<table>`).
+ *
+ * By default, the name of this column will be the same as the data property that it should show.
+ * The header can be overridden by setting the `headerText` input.
+ *
+ * Example usage:
+ * <table ngs-table [dataSource]="dataSource">
+ *   <ngs-text-column name="userName"></ngs-text-column>
+ *   <tr ngs-header-row *ngsHeaderRowDef="['userName']"></tr>
+ *   <tr ngs-row *ngsRowDef="['userName']"></tr>
+ * </table>
+ */
+class TextColumn extends CdkTextColumn {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TextColumn, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: TextColumn, isStandalone: true, selector: "ngs-text-column", usesInheritance: true, ngImport: i0, template: "<ng-container ngsColumnDef>\n  <th ngs-header-cell *ngsHeaderCellDef> {{headerText}} </th>\n  <td ngs-cell *ngsCellDef=\"let data\"> {{dataAccessor(data, name)}} </td>\n</ng-container>\n", styles: ["/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: ColumnDef, selector: "[ngsColumnDef]", inputs: ["ngsColumnDef"] }, { kind: "directive", type: HeaderCellDef, selector: "[ngsHeaderCellDef]" }, { kind: "directive", type: HeaderCell, selector: "ngs-header-cell, [ngs-header-cell], th[ngs-header-cell]" }, { kind: "directive", type: CellDef, selector: "[ngsCellDef]" }, { kind: "directive", type: Cell, selector: "ngs-cell, [ngs-cell], td[ngs-cell]" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TextColumn, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-text-column', changeDetection: ChangeDetectionStrategy.Default, standalone: true, imports: [ColumnDef, HeaderCellDef, HeaderCell, CellDef, Cell], template: "<ng-container ngsColumnDef>\n  <th ngs-header-cell *ngsHeaderCellDef> {{headerText}} </th>\n  <td ngs-cell *ngsCellDef=\"let data\"> {{dataAccessor(data, name)}} </td>\n</ng-container>\n", styles: ["/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class TableDataSource extends DataSource {
+    /** Stream that emits when a new data array is set on the data source. */
+    _data;
+    /** Stream emitting render data to the table (depends on ordered data changes). */
+    _renderData;
+    /** Stream that emits when a new filter string is set on the data source. */
+    _filter = new BehaviorSubject('');
+    /** Used to react to internal changes of the paginator that the table needs to be notified about. */
+    _internalPageChanges = new Subject();
+    /**
+     * Subscription to the changes that should trigger an update to the table's rendered data, such
+     * as filtering, sorting, pagination, or base data changes.
+     */
+    _renderChangesSubscription = Subscription.EMPTY;
+    /**
+     * Cache for quick filter strings. Maps each data object to its concatenated string representation
+     * used for filtering.
+     */
+    _quickFilterCache = new WeakMap();
+    /**
+     * The filtered set of data that has been matched by the filter string, or all the data if there
+     * is no filter. Useful for knowing the set of data the table represents.
+     * For example, a 'scrolled' paginator can use this to know the total number of items when
+     * pagination has been applied.
+     */
+    filteredData;
+    /**
+     * The sorted set of data that has been ordered by the sort state, or all the filtered data if there
+     * is no sort. Useful for knowing the set of data the table represents.
+     */
+    sortedData;
+    /** Array of data that should be rendered by the table, where each object represents one row. */
+    get data() {
+        return this._data.value;
+    }
+    set data(data) {
+        this._data.next(data);
+        if (!this._renderChangesSubscription) {
+            this._filterData(data);
+        }
+    }
+    /**
+     * Filter term that should be used to filter out objects from the data array. To `TableDataSource`'s
+     * default implementation, this string checks for stringification matches anywhere in the object.
+     */
+    get filter() {
+        return this._filter.value;
+    }
+    set filter(filter) {
+        this._filter.next(filter);
+        if (!this._renderChangesSubscription) {
+            this._filterData(this.data);
+        }
+    }
+    /**
+     * Instance of the MatSort directive used by the table to control its sorting. Sort changes
+     * emitted by the MatSort will trigger an update to the table's rendered data.
+     */
+    get sort() {
+        return this._sort;
+    }
+    set sort(sort) {
+        this._sort = sort;
+        this._updateChangeSubscription();
+    }
+    _sort = null;
+    /**
+     * Instance of the Paginator component used by the table to control what page of the data is
+     * displayed. Page changes emitted by the Paginator will trigger an update to the
+     * table's rendered data.
+     */
+    get paginator() {
+        return this._paginator;
+    }
+    set paginator(paginator) {
+        this._paginator = paginator;
+        this._updateChangeSubscription();
+    }
+    _paginator = null;
+    /**
+     * Data accessor function that is used for accessing data properties for sorting through
+     * the default sortData function.
+     * This default function assumes that the data objects are flat and can be accessed directly by
+     * the column name.
+     */
+    sortingDataAccessor = (data, sortHeaderId) => {
+        const value = data[sortHeaderId];
+        return typeof value === 'number' || typeof value === 'string' ? value : '' + value;
+    };
+    /**
+     * Gets a sorted copy of the data array based on the state of the MatSort. Called
+     * after changes are made to the filtered data or when sort changes are emitted from MatSort.
+     * By default, the function retrieves the active sort and its direction and compares data
+     * objects by retrieving data using the sortingDataAccessor. May be overridden for a
+     * custom implementation of data ordering.
+     * @param data The array of data that should be sorted.
+     * @param sort The connected MatSort that holds the current sort state.
+     */
+    sortData = (data, sort) => {
+        const active = typeof sort.active === 'function' ? sort.active() : sort.active;
+        const direction = typeof sort.direction === 'function' ? sort.direction() : sort.direction;
+        if (!active || direction === '') {
+            return data;
+        }
+        return data.slice().sort((a, b) => {
+            const valueA = this.sortingDataAccessor(a, active);
+            const valueB = this.sortingDataAccessor(b, active);
+            // If both valueA and valueB are numbers, use the numeric comparison.
+            // If either valueA or valueB is not a number, use the string comparison.
+            const comparatorResult = typeof valueA === 'number' && typeof valueB === 'number'
+                ? valueA - valueB
+                : (valueA + '').localeCompare(valueB + '');
+            return comparatorResult * (direction === 'asc' ? 1 : -1);
+        });
+    };
+    /**
+     * Checks if a data object matches the data source's filter string. By default, each data object
+     * is converted to a string of its properties and returns true if the filter has at least one
+     * occurrence in that string. By default, the filter string has its whitespace trimmed and the match
+     * is case-insensitive. May be overridden for a custom implementation of filter matching.
+     * @param data Data object used to check against the filter.
+     * @param filter Filter string that has been set on the data source.
+     * @returns Whether the filter matches the data.
+     */
+    filterPredicate = (data, filter) => {
+        // Transform the filter by converting it to lowercase and splitting into words.
+        const transformedFilter = filter.trim().toLowerCase();
+        if (!transformedFilter) {
+            return true;
+        }
+        const filterWords = transformedFilter.split(/\s+/);
+        // Get the string representation of the data.
+        const dataStr = this._getQuickFilterString(data);
+        // Check if all filter words are present in the data string (any order).
+        return filterWords.every(word => dataStr.indexOf(word) !== -1);
+    };
+    /**
+     * Gets a string representation of the data object used for quick filtering.
+     * Caches the result to improve performance.
+     * @param data
+     * @private
+     */
+    _getQuickFilterString(data) {
+        if (typeof data !== 'object' || data === null) {
+            return String(data).toLowerCase();
+        }
+        let cached = this._quickFilterCache.get(data);
+        if (cached !== undefined) {
+            return cached;
+        }
+        const dataStr = Object.keys(data)
+            .reduce((currentTerm, key) => {
+            const val = data[key];
+            return currentTerm + (val === null || val === undefined ? '' : val) + ' ';
+        }, '')
+            .toLowerCase();
+        this._quickFilterCache.set(data, dataStr);
+        return dataStr;
+    }
+    constructor(initialData = []) {
+        super();
+        this._data = new BehaviorSubject(initialData);
+        this._renderData = new BehaviorSubject(initialData);
+        this.filteredData = initialData;
+        this.sortedData = initialData;
+        this._updateChangeSubscription();
+    }
+    /**
+     * Subscribe to changes that should trigger an update to the table's rendered data.
+     */
+    _updateChangeSubscription() {
+        const sortChange = this._sort
+            ? merge(this._observeOutput(this._sort.sortChange), this._sort.initialized || of(undefined), of(undefined))
+            : of(null);
+        const pageChange = this._paginator
+            ? merge(this._observeOutput(this._paginator.page), this._internalPageChanges, this._paginator.initialized || of(undefined), of(undefined))
+            : of(null);
+        const dataStream = this._data;
+        // Watch for base data or filter changes to provide a filtered set of data.
+        const filteredData = combineLatest([dataStream, this._filter]).pipe(map(([data]) => this._filterData(data)));
+        // Watch for filtered data or sort changes to provide an ordered set of data.
+        const orderedData = combineLatest([filteredData, sortChange]).pipe(map(([data]) => this._orderData(data)));
+        // Watch for ordered data or page changes to provide a paged set of data.
+        const paginatedData = combineLatest([orderedData, pageChange]).pipe(map(([data]) => this._pageData(data)));
+        // Watched for paged data changes and emit the result to the table to render.
+        this._renderChangesSubscription.unsubscribe();
+        this._renderChangesSubscription = paginatedData.subscribe((data) => this._renderData.next(data));
+    }
+    _observeOutput(output) {
+        if (isObservable(output)) {
+            return output;
+        }
+        if (typeof output === 'object' && output !== null && ('subscribe' in output || 'emit' in output)) {
+            return new Observable((subscriber) => {
+                try {
+                    const obs = outputToObservable(output);
+                    const sub = obs.subscribe({
+                        next: (value) => subscriber.next(value),
+                        error: (err) => {
+                            if (err && err.message && err.message.includes('NG0911')) {
+                                subscriber.complete();
+                            }
+                            else {
+                                subscriber.error(err);
+                            }
+                        },
+                        complete: () => subscriber.complete(),
+                    });
+                    return () => sub.unsubscribe();
+                }
+                catch (e) {
+                    if (e && e.message && e.message.includes('NG0911')) {
+                        subscriber.complete();
+                        return;
+                    }
+                    throw e;
+                }
+            });
+        }
+        return of();
+    }
+    /**
+     * Returns a filtered data array where each filter object contains the filter string within
+     * the result of the filterPredicate function. If no filter is set, returns the entire data
+     * array without changes.
+     */
+    _filterData(data) {
+        this.filteredData = !this.filter
+            ? data
+            : data.filter((obj) => this.filterPredicate(obj, this.filter));
+        if (this.paginator) {
+            this._updatePaginator(this.filteredData.length);
+        }
+        return this.filteredData;
+    }
+    /**
+     * Returns a sorted copy of the data if MatSort has a sort applied, otherwise just returns the
+     * data array entirely.
+     */
+    _orderData(data) {
+        // If there is no active sort or direction, then the data should not be ordered.
+        if (!this.sort) {
+            this.sortedData = data;
+            return data;
+        }
+        this.sortedData = this.sortData(data.slice(), this.sort);
+        return this.sortedData;
+    }
+    /**
+     * Returns a paged splice of the provided data array based on the provided Paginator's page
+     * index and length. If there is no paginator provided, returns the data array as is.
+     */
+    _pageData(data) {
+        if (!this.paginator) {
+            return data;
+        }
+        const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
+        return data.slice(startIndex, startIndex + this.paginator.pageSize);
+    }
+    /**
+     * Updates the paginator to reflect the length of the filtered data, and makes sure that the page
+     * index does not exceed the amount of pages in the new data set.
+     */
+    _updatePaginator(filteredDataLength) {
+        if (!this.paginator) {
+            return;
+        }
+        this.paginator.length = filteredDataLength;
+        // If the page index is now larger than the number of pages, move the page index to the last
+        // page.
+        if (this.paginator.pageIndex > 0) {
+            const lastPageIndex = Math.max(0, Math.ceil(this.paginator.length / this.paginator.pageSize) - 1);
+            const newPageIndex = Math.min(this.paginator.pageIndex, lastPageIndex);
+            if (newPageIndex !== this.paginator.pageIndex) {
+                this.paginator.pageIndex = newPageIndex;
+                // Since the paginator has changed, notify the data source that the rendered data
+                // should be updated.
+                this._internalPageChanges.next();
+            }
+        }
+    }
+    /**
+     * Used by the CdkTable. Called when it connects to the data source.
+     * @docs-private
+     */
+    connect() {
+        if (!this._renderChangesSubscription || this._renderChangesSubscription.closed) {
+            this._updateChangeSubscription();
+        }
+        return this._renderData;
+    }
+    /**
+     * Used by the CdkTable. Called when it disconnects from the data source.
+     * @docs-private
+     */
+    disconnect() {
+        this._renderChangesSubscription.unsubscribe();
+        this._renderChangesSubscription = Subscription.EMPTY;
+    }
+}
+
+class NativeTable {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NativeTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: NativeTable, isStandalone: true, selector: "table[ngs-native-table]", exportAs: ["ngsNativeTable"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{background:var(--ngs-table-background);border-spacing:0;width:100%;border-collapse:collapse}:host ::ng-deep th{font-size:var(--ngs-table-header-cell-font-size);font-weight:var(--ngs-table-header-cell-font-weight);color:var(--ngs-table-header-cell-color);text-transform:uppercase;overflow:hidden;vertical-align:middle;text-align:start;padding:var(--ngs-table-cell-padding);height:var(--ngs-table-row-height);background:var(--ngs-table-background);border-bottom:1px solid var(--color-border)}:host ::ng-deep td{text-align:start;padding:var(--ngs-table-cell-padding);font-size:var(--ngs-table-cell-font-size);height:var(--ngs-table-row-height);background:var(--ngs-table-background);vertical-align:middle;border-bottom:1px solid var(--color-border)}:host ::ng-deep tr{position:relative;border:none;height:auto;border-radius:0;margin-top:0;background:var(--ngs-data-view-row-bg, var(--color-background));min-height:var(--ngs-table-row-height)}:host ::ng-deep tbody tr:last-child td{border-bottom:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NativeTable, decorators: [{
+            type: Component,
+            args: [{ selector: 'table[ngs-native-table]', exportAs: 'ngsNativeTable', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content/>\n", styles: [":host{background:var(--ngs-table-background);border-spacing:0;width:100%;border-collapse:collapse}:host ::ng-deep th{font-size:var(--ngs-table-header-cell-font-size);font-weight:var(--ngs-table-header-cell-font-weight);color:var(--ngs-table-header-cell-color);text-transform:uppercase;overflow:hidden;vertical-align:middle;text-align:start;padding:var(--ngs-table-cell-padding);height:var(--ngs-table-row-height);background:var(--ngs-table-background);border-bottom:1px solid var(--color-border)}:host ::ng-deep td{text-align:start;padding:var(--ngs-table-cell-padding);font-size:var(--ngs-table-cell-font-size);height:var(--ngs-table-row-height);background:var(--ngs-table-background);vertical-align:middle;border-bottom:1px solid var(--color-border)}:host ::ng-deep tr{position:relative;border:none;height:auto;border-radius:0;margin-top:0;background:var(--ngs-data-view-row-bg, var(--color-background));min-height:var(--ngs-table-row-height)}:host ::ng-deep tbody tr:last-child td{border-bottom:none}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Cell, CellDef, ColumnDef, FooterCell, FooterCellDef, FooterRow, FooterRowDef, HeaderCell, HeaderCellDef, HeaderRow, HeaderRowDef, NativeTable, NoDataRow, Row, RowDef, Table, TableDataSource, TextColumn };
+//# sourceMappingURL=ngstarter-ui-components-table.mjs.map