ngx-com 0.0.19 → 0.0.21

package/fesm2022/ngx-com-components-table.mjs

@@ -0,0 +1,631 @@
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, input, contentChild, booleanAttribute, signal, DestroyRef, contentChildren, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { ComSpinner } from 'ngx-com/components/spinner';
+import { cva } from 'class-variance-authority';
+
+/**
+ * Structural directive that captures the template for a header cell.
+ *
+ * Use with the star syntax inside a `comColumnDef` container.
+ *
+ * @example
+ * ```html
+ * <ng-container comColumnDef="name">
+ *   <th *comHeaderCellDef>Name</th>
+ *   <td *comCellDef="let row">{{ row.name }}</td>
+ * </ng-container>
+ * ```
+ */
+class ComHeaderCellDef {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComHeaderCellDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComHeaderCellDef, isStandalone: true, selector: "[comHeaderCellDef]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComHeaderCellDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comHeaderCellDef]',
+                }]
+        }] });
+
+/**
+ * Structural directive that captures the template for a body cell.
+ *
+ * Use with the star syntax inside a `comColumnDef` container.
+ *
+ * @example
+ * ```html
+ * <ng-container comColumnDef="name">
+ *   <th *comHeaderCellDef>Name</th>
+ *   <td *comCellDef="let row">{{ row.name }}</td>
+ * </ng-container>
+ * ```
+ */
+class ComCellDef {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCellDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComCellDef, isStandalone: true, selector: "[comCellDef]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCellDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comCellDef]',
+                }]
+        }] });
+
+/**
+ * Structural directive that captures the template for a footer cell.
+ *
+ * Use with the star syntax inside a `comColumnDef` container.
+ *
+ * @example
+ * ```html
+ * <ng-container comColumnDef="amount">
+ *   <th *comHeaderCellDef>Amount</th>
+ *   <td *comCellDef="let row">{{ row.amount | currency }}</td>
+ *   <td *comFooterCellDef>{{ total() | currency }}</td>
+ * </ng-container>
+ * ```
+ */
+class ComFooterCellDef {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComFooterCellDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComFooterCellDef, isStandalone: true, selector: "[comFooterCellDef]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComFooterCellDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comFooterCellDef]',
+                }]
+        }] });
+
+/**
+ * Defines a single column in a `com-table`.
+ *
+ * Contains a header cell template, a body cell template, and an optional footer cell template.
+ *
+ * @example
+ * ```html
+ * <ng-container comColumnDef="name">
+ *   <th *comHeaderCellDef>Name</th>
+ *   <td *comCellDef="let row">{{ row.name }}</td>
+ * </ng-container>
+ * ```
+ */
+class ComColumnDef {
+    /** The column name — used to match header/row column lists. */
+    name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), alias: 'comColumnDef' });
+    /** @internal Header cell template for this column. */
+    headerCellDef = contentChild(ComHeaderCellDef, ...(ngDevMode ? [{ debugName: "headerCellDef" }] : []));
+    /** @internal Body cell template for this column. */
+    cellDef = contentChild(ComCellDef, ...(ngDevMode ? [{ debugName: "cellDef" }] : []));
+    /** @internal Optional footer cell template for this column. */
+    footerCellDef = contentChild(ComFooterCellDef, ...(ngDevMode ? [{ debugName: "footerCellDef" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComColumnDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.0", type: ComColumnDef, isStandalone: true, selector: "[comColumnDef]", inputs: { name: { classPropertyName: "name", publicName: "comColumnDef", isSignal: true, isRequired: true, transformFunction: null } }, queries: [{ propertyName: "headerCellDef", first: true, predicate: ComHeaderCellDef, descendants: true, isSignal: true }, { propertyName: "cellDef", first: true, predicate: ComCellDef, descendants: true, isSignal: true }, { propertyName: "footerCellDef", first: true, predicate: ComFooterCellDef, descendants: true, isSignal: true }], exportAs: ["comColumnDef"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComColumnDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comColumnDef]',
+                    exportAs: 'comColumnDef',
+                }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "comColumnDef", required: true }] }], headerCellDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComHeaderCellDef), { isSignal: true }] }], cellDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComCellDef), { isSignal: true }] }], footerCellDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComFooterCellDef), { isSignal: true }] }] } });
+
+/**
+ * Defines which columns appear in the header row and their order.
+ *
+ * @example
+ * ```html
+ * <tr comHeaderRowDef="['name', 'email', 'role']"></tr>
+ * ```
+ *
+ * @example Sticky header row
+ * ```html
+ * <tr comHeaderRowDef="['name', 'email']" comHeaderRowDefSticky></tr>
+ * ```
+ */
+class ComHeaderRowDef {
+    /** Ordered list of column names to display. */
+    columns = input.required({ ...(ngDevMode ? { debugName: "columns" } : {}), alias: 'comHeaderRowDef' });
+    /** Makes this header row sticky (alternative to table-level `stickyHeader`). */
+    sticky = input(false, { ...(ngDevMode ? { debugName: "sticky" } : {}), alias: 'comHeaderRowDefSticky',
+        transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComHeaderRowDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ComHeaderRowDef, isStandalone: true, selector: "[comHeaderRowDef]", inputs: { columns: { classPropertyName: "columns", publicName: "comHeaderRowDef", isSignal: true, isRequired: true, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "comHeaderRowDefSticky", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComHeaderRowDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comHeaderRowDef]',
+                }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "comHeaderRowDef", required: true }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "comHeaderRowDefSticky", required: false }] }] } });
+
+/**
+ * Defines which columns appear in each body row and their order.
+ *
+ * @example
+ * ```html
+ * <tr comRowDef [comRowDefColumns]="['name', 'email', 'role']"></tr>
+ * ```
+ */
+class ComRowDef {
+    /** Ordered list of column names to display per body row. */
+    columns = input.required({ ...(ngDevMode ? { debugName: "columns" } : {}), alias: 'comRowDefColumns' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComRowDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ComRowDef, isStandalone: true, selector: "[comRowDef]", inputs: { columns: { classPropertyName: "columns", publicName: "comRowDefColumns", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComRowDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comRowDef]',
+                }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "comRowDefColumns", required: true }] }] } });
+
+/**
+ * Defines which columns appear in the footer row and their order.
+ *
+ * @example
+ * ```html
+ * <tr comFooterRowDef="['description', 'amount']"></tr>
+ * ```
+ */
+class ComFooterRowDef {
+    /** Ordered list of column names in the footer. */
+    columns = input.required({ ...(ngDevMode ? { debugName: "columns" } : {}), alias: 'comFooterRowDef' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComFooterRowDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ComFooterRowDef, isStandalone: true, selector: "[comFooterRowDef]", inputs: { columns: { classPropertyName: "columns", publicName: "comFooterRowDef", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComFooterRowDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comFooterRowDef]',
+                }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "comFooterRowDef", required: true }] }] } });
+
+/**
+ * Structural directive for the empty-state row shown when the data source is empty.
+ *
+ * Place inside `com-table`. The template receives the column count for colspan.
+ *
+ * @example
+ * ```html
+ * <com-table [dataSource]="data()">
+ *   <!-- column defs... -->
+ *
+ *   <ng-template comNoDataRow>
+ *     <td [attr.colspan]="displayedColumns().length" class="text-center py-8">
+ *       No results found.
+ *     </td>
+ *   </ng-template>
+ * </com-table>
+ * ```
+ */
+class ComNoDataRow {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComNoDataRow, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComNoDataRow, isStandalone: true, selector: "[comNoDataRow]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComNoDataRow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comNoDataRow]',
+                }]
+        }] });
+
+/**
+ * Abstract data source for ComTable.
+ *
+ * Implement `connect()` to provide a signal of data, and `disconnect()` to clean up.
+ * The table calls `connect()` on init and `disconnect()` on destroy.
+ *
+ * @example Signal-based data source
+ * ```typescript
+ * class MyDataSource extends ComDataSource<User> {
+ *   private readonly data = signal<User[]>([]);
+ *
+ *   connect(): Signal<readonly User[]> {
+ *     return this.data.asReadonly();
+ *   }
+ *
+ *   disconnect(): void {
+ *     // cleanup if needed
+ *   }
+ *
+ *   setData(users: User[]): void {
+ *     this.data.set(users);
+ *   }
+ * }
+ * ```
+ */
+class ComDataSource {
+}
+/**
+ * Simple array-backed data source.
+ *
+ * Wraps a plain array in a writable signal so it can be used with ComTable's DataSource API.
+ */
+class ComArrayDataSource extends ComDataSource {
+    data = signal([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+    constructor(initialData = []) {
+        super();
+        this.data.set(initialData);
+    }
+    connect() {
+        return this.data.asReadonly();
+    }
+    disconnect() {
+        // No cleanup needed for a simple array
+    }
+    /** Replace the entire data set. */
+    setData(data) {
+        this.data.set(data);
+    }
+}
+/**
+ * Type guard to check if a value is a ComDataSource instance.
+ */
+function isDataSource(value) {
+    return value instanceof ComDataSource;
+}
+
+/**
+ * CVA variants for the table container wrapper.
+ */
+const tableContainerVariants = cva('relative overflow-x-auto');
+/**
+ * CVA variants for the `<table>` element.
+ *
+ * @tokens `--color-foreground`
+ */
+const tableVariants = cva('w-full caption-bottom text-sm text-foreground');
+/**
+ * CVA variants for the `<thead>` element.
+ *
+ * @tokens `--color-background`
+ */
+const tableHeaderVariants = cva('', {
+    variants: {
+        sticky: {
+            true: 'sticky top-0 z-10 bg-background',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        sticky: false,
+    },
+});
+/**
+ * CVA variants for `<th>` header cells.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+const tableHeaderCellVariants = cva('text-left align-middle font-medium text-muted-foreground [&:has([comSortHeader])]:cursor-pointer', {
+    variants: {
+        density: {
+            compact: 'h-8 px-3 text-xs',
+            default: 'h-10 px-4 text-xs',
+            comfortable: 'h-12 px-5 text-sm',
+        },
+    },
+    defaultVariants: {
+        density: 'default',
+    },
+});
+/**
+ * CVA variants for `<tbody> <tr>` rows.
+ *
+ * @tokens `--color-border-subtle`, `--color-muted`, `--color-muted-hover`
+ */
+const tableRowVariants = cva('transition-colors hover:bg-muted-hover', {
+    variants: {
+        variant: {
+            default: 'border-b border-border-subtle',
+            striped: 'border-b border-border-subtle even:bg-muted/50',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+/**
+ * CVA variants for `<td>` body cells.
+ */
+const tableBodyCellVariants = cva('align-middle [&:has(com-checkbox)]:w-px', {
+    variants: {
+        density: {
+            compact: 'px-3 py-1.5',
+            default: 'px-4 py-2.5',
+            comfortable: 'px-5 py-3.5',
+        },
+    },
+    defaultVariants: {
+        density: 'default',
+    },
+});
+/**
+ * CVA variants for `<tfoot> <td>` footer cells.
+ *
+ * @tokens `--color-foreground`, `--color-border`
+ */
+const tableFooterCellVariants = cva('align-middle font-medium text-foreground border-t border-border', {
+    variants: {
+        density: {
+            compact: 'h-8 px-3 text-xs',
+            default: 'h-10 px-4 text-sm',
+            comfortable: 'h-12 px-5 text-sm',
+        },
+    },
+    defaultVariants: {
+        density: 'default',
+    },
+});
+
+/**
+ * Declarative data table component using native HTML `<table>` semantics.
+ *
+ * Define columns via `comColumnDef` with `*comHeaderCellDef` and `*comCellDef`,
+ * then declare row structure via `comHeaderRowDef` and `comRowDef`.
+ *
+ * Accepts either a plain `T[]` or a `ComDataSource<T>` for the data source.
+ *
+ * @tokens `--color-background`, `--color-foreground`, `--color-muted`, `--color-muted-foreground`,
+ *         `--color-muted-hover`, `--color-border`, `--color-border-subtle`
+ *
+ * @example Basic table
+ * ```html
+ * <com-table [dataSource]="users()">
+ *   <ng-container comColumnDef="name">
+ *     <th *comHeaderCellDef>Name</th>
+ *     <td *comCellDef="let row">{{ row.name }}</td>
+ *   </ng-container>
+ *
+ *   <ng-container comColumnDef="email">
+ *     <th *comHeaderCellDef>Email</th>
+ *     <td *comCellDef="let row">{{ row.email }}</td>
+ *   </ng-container>
+ *
+ *   <tr comHeaderRowDef="['name', 'email']"></tr>
+ *   <tr comRowDef [comRowDefColumns]="['name', 'email']"></tr>
+ * </com-table>
+ * ```
+ *
+ * @example With DataSource
+ * ```typescript
+ * class UserDataSource extends ComDataSource<User> {
+ *   private data = signal<User[]>([]);
+ *   connect() { return this.data.asReadonly(); }
+ *   disconnect() {}
+ *   setData(users: User[]) { this.data.set(users); }
+ * }
+ * ```
+ * ```html
+ * <com-table [dataSource]="userDataSource">
+ *   ...
+ * </com-table>
+ * ```
+ */
+class ComTable {
+    destroyRef = inject(DestroyRef);
+    // ─── Inputs ───
+    /** The data to render — accepts a plain array or a ComDataSource. */
+    dataSource = input([], ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
+    /** Track function for `@for`. Defaults to tracking by index. */
+    trackByFn = input((index, _item) => index, ...(ngDevMode ? [{ debugName: "trackByFn" }] : []));
+    /** Visual treatment of body rows. */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Row height / cell padding. */
+    density = input('default', ...(ngDevMode ? [{ debugName: "density" }] : []));
+    /** Whether the header row sticks on scroll. */
+    stickyHeader = input(false, { ...(ngDevMode ? { debugName: "stickyHeader" } : {}), transform: booleanAttribute });
+    /** Shows a loading overlay with spinner. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
+    /** Accessible label for the table element. */
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    // ─── Content Queries ───
+    /** @internal All column definitions projected into the table. */
+    columnDefs = contentChildren(ComColumnDef, ...(ngDevMode ? [{ debugName: "columnDefs" }] : []));
+    /** @internal Header row definition. */
+    headerRowDef = contentChild(ComHeaderRowDef, ...(ngDevMode ? [{ debugName: "headerRowDef" }] : []));
+    /** @internal Body row definition. */
+    rowDef = contentChild(ComRowDef, ...(ngDevMode ? [{ debugName: "rowDef" }] : []));
+    /** @internal Optional footer row definition. */
+    footerRowDef = contentChild(ComFooterRowDef, ...(ngDevMode ? [{ debugName: "footerRowDef" }] : []));
+    /** @internal Optional no-data row template. */
+    noDataRow = contentChild(ComNoDataRow, ...(ngDevMode ? [{ debugName: "noDataRow" }] : []));
+    // ─── Derived State ───
+    /** @internal Map of column name → column definition for O(1) lookup. */
+    columnDefMap = computed(() => {
+        const map = new Map();
+        for (const col of this.columnDefs()) {
+            map.set(col.name(), col);
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "columnDefMap" }] : []));
+    /** @internal Resolved render data — handles both array and DataSource inputs. */
+    dataSourceSignal = computed(() => {
+        const ds = this.dataSource();
+        if (isDataSource(ds)) {
+            return ds.connect();
+        }
+        return signal(ds);
+    }, ...(ngDevMode ? [{ debugName: "dataSourceSignal" }] : []));
+    /** @internal The actual data array to render. */
+    renderData = computed(() => this.dataSourceSignal()(), ...(ngDevMode ? [{ debugName: "renderData" }] : []));
+    /** @internal Header column names. */
+    headerColumns = computed(() => this.headerRowDef()?.columns() ?? [], ...(ngDevMode ? [{ debugName: "headerColumns" }] : []));
+    /** @internal Body column names. */
+    bodyColumns = computed(() => this.rowDef()?.columns() ?? this.headerColumns(), ...(ngDevMode ? [{ debugName: "bodyColumns" }] : []));
+    /** @internal Footer column names. */
+    footerColumns = computed(() => this.footerRowDef()?.columns() ?? [], ...(ngDevMode ? [{ debugName: "footerColumns" }] : []));
+    /** @internal Whether the header should be sticky. */
+    isSticky = computed(() => this.stickyHeader() || (this.headerRowDef()?.sticky() ?? false), ...(ngDevMode ? [{ debugName: "isSticky" }] : []));
+    // ─── CVA Classes ───
+    containerClasses = computed(() => tableContainerVariants(), ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    tableClasses = computed(() => tableVariants(), ...(ngDevMode ? [{ debugName: "tableClasses" }] : []));
+    theadClasses = computed(() => tableHeaderVariants({ sticky: this.isSticky() }), ...(ngDevMode ? [{ debugName: "theadClasses" }] : []));
+    thClasses = computed(() => tableHeaderCellVariants({ density: this.density() }), ...(ngDevMode ? [{ debugName: "thClasses" }] : []));
+    trClasses = computed(() => tableRowVariants({ variant: this.variant() }), ...(ngDevMode ? [{ debugName: "trClasses" }] : []));
+    tdClasses = computed(() => tableBodyCellVariants({ density: this.density() }), ...(ngDevMode ? [{ debugName: "tdClasses" }] : []));
+    tfootTdClasses = computed(() => tableFooterCellVariants({ density: this.density() }), ...(ngDevMode ? [{ debugName: "tfootTdClasses" }] : []));
+    constructor() {
+        // Disconnect DataSource on destroy
+        this.destroyRef.onDestroy(() => {
+            const ds = this.dataSource();
+            if (isDataSource(ds)) {
+                ds.disconnect();
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComTable, isStandalone: true, selector: "com-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, trackByFn: { classPropertyName: "trackByFn", publicName: "trackByFn", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, queries: [{ propertyName: "columnDefs", predicate: ComColumnDef, isSignal: true }, { propertyName: "headerRowDef", first: true, predicate: ComHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "rowDef", first: true, predicate: ComRowDef, descendants: true, isSignal: true }, { propertyName: "footerRowDef", first: true, predicate: ComFooterRowDef, descendants: true, isSignal: true }, { propertyName: "noDataRow", first: true, predicate: ComNoDataRow, descendants: true, isSignal: true }], exportAs: ["comTable"], ngImport: i0, template: `
+    <div [class]="containerClasses()">
+      <table [class]="tableClasses()" [attr.aria-label]="ariaLabel()" [attr.aria-busy]="loading() || null">
+        <thead [class]="theadClasses()">
+          <tr>
+            @for (colName of headerColumns(); track colName) {
+              @let colDef = columnDefMap().get(colName);
+              @if (colDef?.headerCellDef(); as headerDef) {
+                <th [class]="thClasses()" scope="col">
+                  <ng-container [ngTemplateOutlet]="headerDef.templateRef" />
+                </th>
+              }
+            }
+          </tr>
+        </thead>
+
+        <tbody>
+          @if (!loading() && renderData().length === 0 && noDataRow()) {
+            <tr>
+              <ng-container [ngTemplateOutlet]="noDataRow()!.templateRef" />
+            </tr>
+          } @else {
+            @for (row of renderData(); track trackByFn()($index, row); let idx = $index) {
+              <tr [class]="trClasses()">
+                @for (colName of bodyColumns(); track colName) {
+                  @let colDef = columnDefMap().get(colName);
+                  @if (colDef?.cellDef(); as cellDef) {
+                    <td [class]="tdClasses()">
+                      <ng-container
+                        [ngTemplateOutlet]="cellDef.templateRef"
+                        [ngTemplateOutletContext]="{ $implicit: row, index: idx }"
+                      />
+                    </td>
+                  }
+                }
+              </tr>
+            }
+          }
+        </tbody>
+
+        @if (footerRowDef()) {
+          <tfoot>
+            <tr>
+              @for (colName of footerColumns(); track colName) {
+                @let colDef = columnDefMap().get(colName);
+                @if (colDef?.footerCellDef(); as footerDef) {
+                  <td [class]="tfootTdClasses()">
+                    <ng-container [ngTemplateOutlet]="footerDef.templateRef" />
+                  </td>
+                }
+              }
+            </tr>
+          </tfoot>
+        }
+      </table>
+
+      @if (loading()) {
+        <div class="absolute inset-0 flex items-center justify-center bg-background/60" aria-live="polite">
+          <com-spinner size="lg" color="primary" label="Loading..." />
+        </div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ComSpinner, selector: "com-spinner", inputs: ["label", "labelPosition", "size", "color"], exportAs: ["comSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComTable, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'com-table',
+                    exportAs: 'comTable',
+                    template: `
+    <div [class]="containerClasses()">
+      <table [class]="tableClasses()" [attr.aria-label]="ariaLabel()" [attr.aria-busy]="loading() || null">
+        <thead [class]="theadClasses()">
+          <tr>
+            @for (colName of headerColumns(); track colName) {
+              @let colDef = columnDefMap().get(colName);
+              @if (colDef?.headerCellDef(); as headerDef) {
+                <th [class]="thClasses()" scope="col">
+                  <ng-container [ngTemplateOutlet]="headerDef.templateRef" />
+                </th>
+              }
+            }
+          </tr>
+        </thead>
+
+        <tbody>
+          @if (!loading() && renderData().length === 0 && noDataRow()) {
+            <tr>
+              <ng-container [ngTemplateOutlet]="noDataRow()!.templateRef" />
+            </tr>
+          } @else {
+            @for (row of renderData(); track trackByFn()($index, row); let idx = $index) {
+              <tr [class]="trClasses()">
+                @for (colName of bodyColumns(); track colName) {
+                  @let colDef = columnDefMap().get(colName);
+                  @if (colDef?.cellDef(); as cellDef) {
+                    <td [class]="tdClasses()">
+                      <ng-container
+                        [ngTemplateOutlet]="cellDef.templateRef"
+                        [ngTemplateOutletContext]="{ $implicit: row, index: idx }"
+                      />
+                    </td>
+                  }
+                }
+              </tr>
+            }
+          }
+        </tbody>
+
+        @if (footerRowDef()) {
+          <tfoot>
+            <tr>
+              @for (colName of footerColumns(); track colName) {
+                @let colDef = columnDefMap().get(colName);
+                @if (colDef?.footerCellDef(); as footerDef) {
+                  <td [class]="tfootTdClasses()">
+                    <ng-container [ngTemplateOutlet]="footerDef.templateRef" />
+                  </td>
+                }
+              }
+            </tr>
+          </tfoot>
+        }
+      </table>
+
+      @if (loading()) {
+        <div class="absolute inset-0 flex items-center justify-center bg-background/60" aria-live="polite">
+          <com-spinner size="lg" color="primary" label="Loading..." />
+        </div>
+      }
+    </div>
+  `,
+                    imports: [NgTemplateOutlet, ComSpinner],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        class: 'block',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], trackByFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByFn", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], columnDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ComColumnDef), { isSignal: true }] }], headerRowDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComHeaderRowDef), { isSignal: true }] }], rowDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComRowDef), { isSignal: true }] }], footerRowDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComFooterRowDef), { isSignal: true }] }], noDataRow: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComNoDataRow), { isSignal: true }] }] } });
+
+// Public API for the table component system
+// Main component
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ComArrayDataSource, ComCellDef, ComColumnDef, ComDataSource, ComFooterCellDef, ComFooterRowDef, ComHeaderCellDef, ComHeaderRowDef, ComNoDataRow, ComRowDef, ComTable, isDataSource, tableBodyCellVariants, tableContainerVariants, tableFooterCellVariants, tableHeaderCellVariants, tableHeaderVariants, tableRowVariants, tableVariants };
+//# sourceMappingURL=ngx-com-components-table.mjs.map