@nova-design-system/nova-angular-19 3.17.0 → 3.18.0-beta.0

package/dist/nova-components/fesm2022/nova-components.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, untracked, computed, InjectionToken, inject, reflectComponentType, ViewContainerRef, Injectable, KeyValueDiffers, ChangeDetectorRef, OutputEmitterRef, TemplateRef, Type, Injector, runInInjectionContext, effect, Directive, Inject, Input, signal, input, CUSTOM_ELEMENTS_SCHEMA, HostListener, NgModule, ElementRef, ViewChildren } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Directive, Input, untracked, computed, InjectionToken, inject, reflectComponentType, ViewContainerRef, Injectable, KeyValueDiffers, ChangeDetectorRef, OutputEmitterRef, TemplateRef, Type, Injector, runInInjectionContext, effect, Inject, signal, input, viewChild, CUSTOM_ELEMENTS_SCHEMA, ContentChild, ContentChildren, HostListener, NgModule, ElementRef, ViewChildren } from '@angular/core';
 import { __decorate } from 'tslib';
 import { fromEvent, BehaviorSubject } from 'rxjs';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { memo, createTable, getCoreRowModel } from '@tanstack/table-core';
+import { memo, createTable, getCoreRowModel, getPaginationRowModel } from '@tanstack/table-core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 export * from '@nova-design-system/nova-webcomponents/constants';
 
@@ -1330,6 +1330,41 @@ const DIRECTIVES = [
     NvTooltip
 ];
 
+/**
+ * Directive to mark ng-templates as cell templates for specific fields.
+ *
+ * @example
+ * ```html
+ * <nv-datatable [columns]="columns" [rows]="data">
+ *   <ng-template nvDatatableCell="name" let-context>
+ *     <div class="font-semibold">{{ context.value }}</div>
+ *   </ng-template>
+ *
+ *   <ng-template nvDatatableCell="price" let-context>
+ *     <span class="font-mono">${{ context.value }}</span>
+ *   </ng-template>
+ * </nv-datatable>
+ * ```
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+class NvDatatableCellDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvDatatableCellDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: NvDatatableCellDirective, isStandalone: true, selector: "ng-template[nvDatatableCell]", inputs: { nvDatatableCell: "nvDatatableCell" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvDatatableCellDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[nvDatatableCell]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { nvDatatableCell: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
 /**
  * Implementation from @tanstack/angular-query
  * {@link https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/util/lazy-init/lazy-init.ts}
@@ -2061,38 +2096,227 @@ function createAngularTable(options) {
  * Nova Datatable built on TanStack Table (Angular).
  */
 class NvDatatable {
+    /** Public getter for table instance. */
+    table() {
+        return this.tableInstance();
+    }
     constructor() {
         /** Column definitions */
         this.columns = input([]);
         /** Row data */
         this.rows = input([]);
+        /** Optional pagination configuration */
+        this.pagination = input(undefined);
+        /** Should the header stick to the top of the table when scrolling? */
+        this.stickyHeader = input(false);
+        /** Signal to track cell templates array */
+        this.cellTemplatesSignal = signal([]);
+        /** Map of field names to cell templates */
+        this.cellTemplateMap = computed(() => {
+            const map = new Map();
+            this.cellTemplatesSignal().forEach((directive) => {
+                map.set(directive.nvDatatableCell, directive.template);
+            });
+            return map;
+        });
+        /** Pagination state for server mode */
+        this.paginationState = signal({
+            pageIndex: 0,
+            pageSize: this.pagination()?.initialPageSize || 10,
+        });
+        /** Reference to table rows for infinite scroll observer */
+        this.tableRows = viewChild('tableRow');
+        /** Intersection observer for infinite scroll */
+        this.observer = null;
+        /** Helper to check if using infinite scroll */
+        this.isInfiniteScroll = computed(() => this.pagination()?.mode === 'infinite');
         /** Computed table columns with proper typing and filtering. */
-        this.tableColumns = computed(() => this.columns()
-            .filter((col) => !col.hidden)
-            .map((col) => ({
-            accessorKey: col.field,
-            header: col.headerName || String(col.field),
-            size: col.width,
-            enableResizing: col.resizable ?? true,
-            cell: col.renderCell ??
-                ((context) => context.getValue()),
-        })));
+        this.tableColumns = computed(() => {
+            const templateMap = this.cellTemplateMap();
+            return this.columns()
+                .filter((col) => !col.hidden)
+                .map((col) => ({
+                accessorKey: col.field,
+                header: col.headerName || String(col.field),
+                size: col.width,
+                enableResizing: col.resizable ?? true,
+                cell: (context) => {
+                    const fieldName = String(col.field);
+                    const cellTemplate = templateMap.get(fieldName);
+                    // Priority: template > renderCell > default
+                    if (cellTemplate) {
+                        // Return TemplateRef directly - FlexRender will handle it
+                        return cellTemplate;
+                    }
+                    // Fall back to renderCell if provided
+                    if (col.renderCell) {
+                        return col.renderCell(context);
+                    }
+                    // Default: just return the value
+                    return context.getValue();
+                },
+            }));
+        });
         /** TanStack table instance with Signals */
-        this.tableInstance = createAngularTable(() => ({
-            data: this.rows(),
-            columns: this.tableColumns(),
-            getCoreRowModel: getCoreRowModel(),
-        }));
+        this.tableInstance = createAngularTable(() => {
+            const paginationConfig = this.pagination();
+            if (!paginationConfig || paginationConfig.mode === 'infinite') {
+                // No pagination or infinite scroll - simple config
+                return {
+                    data: this.rows(),
+                    columns: this.tableColumns(),
+                    getCoreRowModel: getCoreRowModel(),
+                };
+            }
+            else if (paginationConfig.mode === 'client') {
+                // Client-side pagination
+                return {
+                    data: this.rows(),
+                    columns: this.tableColumns(),
+                    getCoreRowModel: getCoreRowModel(),
+                    getPaginationRowModel: getPaginationRowModel(),
+                    initialState: {
+                        pagination: {
+                            pageIndex: 0,
+                            pageSize: paginationConfig.initialPageSize || 10,
+                        },
+                    },
+                };
+            }
+            else {
+                // Server-side pagination
+                const pageSize = this.paginationState().pageSize;
+                return {
+                    data: this.rows(),
+                    columns: this.tableColumns(),
+                    getCoreRowModel: getCoreRowModel(),
+                    manualPagination: true,
+                    pageCount: paginationConfig.totalPageCount !== undefined
+                        ? paginationConfig.totalPageCount
+                        : paginationConfig.totalRowCount !== undefined
+                            ? Math.ceil(paginationConfig.totalRowCount / pageSize)
+                            : -1,
+                    state: {
+                        pagination: this.paginationState(),
+                    },
+                    onPaginationChange: (updaterOrValue) => {
+                        if (typeof updaterOrValue === 'function') {
+                            this.paginationState.set(updaterOrValue(this.paginationState()));
+                        }
+                        else {
+                            this.paginationState.set(updaterOrValue);
+                        }
+                    },
+                };
+            }
+        });
+        /** Build pagination API for template */
+        this.paginationAPI = computed(() => {
+            const paginationConfig = this.pagination();
+            if (!paginationConfig) {
+                return null;
+            }
+            const table = this.table();
+            const tablePaginationState = table.getState().pagination;
+            const pageCount = table.getPageCount();
+            const rowCount = paginationConfig.mode === 'server'
+                ? paginationConfig.totalRowCount || this.rows().length
+                : this.rows().length;
+            return {
+                pageIndex: tablePaginationState.pageIndex,
+                pageSize: tablePaginationState.pageSize,
+                pageCount,
+                rowCount,
+                firstPage: () => table.setPageIndex(0),
+                previousPage: () => table.previousPage(),
+                nextPage: () => table.nextPage(),
+                lastPage: () => table.setPageIndex(pageCount - 1),
+                setPageIndex: (index) => table.setPageIndex(index),
+                setPageSize: (size) => table.setPageSize(size),
+                canPreviousPage: table.getCanPreviousPage(),
+                canNextPage: table.getCanNextPage(),
+                isLoading: paginationConfig.mode === 'infinite'
+                    ? paginationConfig.isLoading
+                    : undefined,
+                hasMore: paginationConfig.mode === 'infinite'
+                    ? paginationConfig.hasMore
+                    : undefined,
+            };
+        });
+        // Watch pagination state changes for server mode
+        effect(() => {
+            const paginationConfig = this.pagination();
+            const state = this.paginationState();
+            if (paginationConfig?.mode === 'server' &&
+                paginationConfig.onPaginationChange) {
+                paginationConfig.onPaginationChange({
+                    pageIndex: state.pageIndex,
+                    pageSize: state.pageSize,
+                });
+            }
+        }, { allowSignalWrites: true });
+        // Set up intersection observer for infinite scroll
+        effect(() => {
+            const paginationConfig = this.pagination();
+            const rows = this.rows(); // Track rows changes
+            // Clean up existing observer
+            if (this.observer) {
+                this.observer.disconnect();
+                this.observer = null;
+            }
+            // Only set up observer for infinite scroll mode
+            if (paginationConfig?.mode !== 'infinite' || rows.length === 0) {
+                return;
+            }
+            // Use setTimeout to ensure DOM is updated
+            setTimeout(() => {
+                const threshold = paginationConfig.loadMoreThreshold || 500;
+                // Find the last row element
+                const tableRowElements = document.querySelectorAll('[data-is-last="true"]');
+                const lastRowElement = tableRowElements[tableRowElements.length - 1];
+                if (!lastRowElement) {
+                    return;
+                }
+                this.observer = new IntersectionObserver((entries) => {
+                    const entry = entries[0];
+                    if (entry.isIntersecting &&
+                        paginationConfig.mode === 'infinite' &&
+                        paginationConfig.hasMore &&
+                        !paginationConfig.isLoading &&
+                        paginationConfig.onLoadMore) {
+                        paginationConfig.onLoadMore();
+                    }
+                }, {
+                    rootMargin: `${threshold}px`,
+                    root: null,
+                });
+                this.observer.observe(lastRowElement);
+            }, 0);
+        }, { allowSignalWrites: true });
     }
-    /** Public getter for table instance. */
-    table() {
-        return this.tableInstance();
+    ngAfterViewInit() {
+        // Sync cell templates QueryList to signal
+        if (this.cellTemplates) {
+            this.cellTemplatesSignal.set(this.cellTemplates.toArray());
+            // Subscribe to changes in the QueryList
+            this.cellTemplates.changes.subscribe(() => {
+                if (this.cellTemplates) {
+                    this.cellTemplatesSignal.set(this.cellTemplates.toArray());
+                }
+            });
+        }
+    }
+    ngOnDestroy() {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvDatatable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NvDatatable, isStandalone: true, selector: "nv-datatable", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NvDatatable, isStandalone: true, selector: "nv-datatable", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "paginationTemplate", first: true, predicate: ["paginationTemplate"], descendants: true, read: TemplateRef }, { propertyName: "cellTemplates", predicate: NvDatatableCellDirective }], viewQueries: [{ propertyName: "tableRows", first: true, predicate: ["tableRow"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <nv-table>
       <table>
-        <thead>
+        <thead [attr.data-sticky-top]="stickyHeader() ? 'true' : null">
           @for (headerGroup of table().getHeaderGroups(); track headerGroup.id)
           {
           <tr>
@@ -2118,14 +2342,19 @@ class NvDatatable {
         </thead>
 
         <tbody>
-          @for (row of table().getRowModel().rows; track row.id) {
-          <tr [attr.data-testid]="'datatable-row-' + row.id">
+          @for (row of table().getRowModel().rows; track row.id; let i = $index)
+          {
+          <tr
+            [attr.data-testid]="'datatable-row-' + row.id"
+            #tableRow
+            [attr.data-is-last]="
+              isInfiniteScroll() && i === table().getRowModel().rows.length - 1
+                ? 'true'
+                : null
+            "
+          >
             @for (cell of row.getVisibleCells(); track cell.id) {
-            <td
-              [attr.data-testid]="'datatable-cell-' + cell.id"
-              style="padding: 8px; border-bottom: 1px solid #eee;"
-            >
-              <!-- Let FlexRender handle strings vs TemplateRef -->
+            <td [attr.data-testid]="'datatable-cell-' + cell.id">
               <ng-container
                 *flexRender="
                   cell.column.columnDef.cell;
@@ -2142,7 +2371,17 @@ class NvDatatable {
         </tbody>
       </table>
     </nv-table>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }] }); }
+
+    <!-- Render pagination if configured -->
+    @if (paginationAPI()) {
+    <ng-container
+      *ngTemplateOutlet="
+        paginationTemplate || null;
+        context: { $implicit: paginationAPI() }
+      "
+    ></ng-container>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvDatatable, decorators: [{
             type: Component,
@@ -2154,7 +2393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     template: `
     <nv-table>
       <table>
-        <thead>
+        <thead [attr.data-sticky-top]="stickyHeader() ? 'true' : null">
           @for (headerGroup of table().getHeaderGroups(); track headerGroup.id)
           {
           <tr>
@@ -2180,14 +2419,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
         </thead>
 
         <tbody>
-          @for (row of table().getRowModel().rows; track row.id) {
-          <tr [attr.data-testid]="'datatable-row-' + row.id">
+          @for (row of table().getRowModel().rows; track row.id; let i = $index)
+          {
+          <tr
+            [attr.data-testid]="'datatable-row-' + row.id"
+            #tableRow
+            [attr.data-is-last]="
+              isInfiniteScroll() && i === table().getRowModel().rows.length - 1
+                ? 'true'
+                : null
+            "
+          >
             @for (cell of row.getVisibleCells(); track cell.id) {
-            <td
-              [attr.data-testid]="'datatable-cell-' + cell.id"
-              style="padding: 8px; border-bottom: 1px solid #eee;"
-            >
-              <!-- Let FlexRender handle strings vs TemplateRef -->
+            <td [attr.data-testid]="'datatable-cell-' + cell.id">
               <ng-container
                 *flexRender="
                   cell.column.columnDef.cell;
@@ -2204,9 +2448,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
         </tbody>
       </table>
     </nv-table>
+
+    <!-- Render pagination if configured -->
+    @if (paginationAPI()) {
+    <ng-container
+      *ngTemplateOutlet="
+        paginationTemplate || null;
+        context: { $implicit: paginationAPI() }
+      "
+    ></ng-container>
+    }
   `,
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { paginationTemplate: [{
+                type: ContentChild,
+                args: ['paginationTemplate', { read: TemplateRef }]
+            }], cellTemplates: [{
+                type: ContentChildren,
+                args: [NvDatatableCellDirective]
+            }] } });
 
 class ValueAccessor {
     constructor(el) {
@@ -3385,5 +3645,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NotificationService, NotificationServiceComponent, NovaComponentsModule, NovaComponentsValueAccessorModule, NvAccordion, NvAccordionItem, NvAccordionValueAccessor, NvAlert, NvAlertValueAccessor, NvAvatar, NvBadge, NvBreadcrumb, NvBreadcrumbs, NvButton, NvButtongroup, NvCalendar, NvCalendarValueAccessor, NvCol, NvDatagrid, NvDatagridValueAccessor, NvDatagridcolumn, NvDatatable, NvDialog, NvDialogValueAccessor, NvDialogfooter, NvDialogheader, NvFieldcheckbox, NvFieldcheckboxValueAccessor, NvFielddate, NvFielddateValueAccessor, NvFielddaterange, NvFielddaterangeValueAccessor, NvFielddropdown, NvFielddropdownValueAccessor, NvFielddropdownitem, NvFielddropdownitemcheck, NvFieldmultiselect, NvFieldmultiselectValueAccessor, NvFieldnumber, NvFieldnumberValueAccessor, NvFieldpassword, NvFieldpasswordValueAccessor, NvFieldradio, NvFieldradioValueAccessor, NvFieldselect, NvFieldselectValueAccessor, NvFieldslider, NvFieldsliderValueAccessor, NvFieldtext, NvFieldtextValueAccessor, NvFieldtextarea, NvFieldtextareaValueAccessor, NvFieldtime, NvIcon, NvIconbutton, NvLoader, NvMenu, NvMenuitem, NvNotification, NvNotificationValueAccessor, NvNotificationcontainer, NvPopover, NvPopoverValueAccessor, NvRow, NvSplit, NvSplitValueAccessor, NvStack, NvTable, NvToggle, NvToggleValueAccessor, NvTogglebutton, NvTogglebuttongroup, NvTogglebuttongroupValueAccessor, NvTooltip, VALUE_ACCESSORS, flexRenderComponent as nvDatatableRenderComponent };
+export { NotificationService, NotificationServiceComponent, NovaComponentsModule, NovaComponentsValueAccessorModule, NvAccordion, NvAccordionItem, NvAccordionValueAccessor, NvAlert, NvAlertValueAccessor, NvAvatar, NvBadge, NvBreadcrumb, NvBreadcrumbs, NvButton, NvButtongroup, NvCalendar, NvCalendarValueAccessor, NvCol, NvDatagrid, NvDatagridValueAccessor, NvDatagridcolumn, NvDatatable, NvDatatableCellDirective, NvDialog, NvDialogValueAccessor, NvDialogfooter, NvDialogheader, NvFieldcheckbox, NvFieldcheckboxValueAccessor, NvFielddate, NvFielddateValueAccessor, NvFielddaterange, NvFielddaterangeValueAccessor, NvFielddropdown, NvFielddropdownValueAccessor, NvFielddropdownitem, NvFielddropdownitemcheck, NvFieldmultiselect, NvFieldmultiselectValueAccessor, NvFieldnumber, NvFieldnumberValueAccessor, NvFieldpassword, NvFieldpasswordValueAccessor, NvFieldradio, NvFieldradioValueAccessor, NvFieldselect, NvFieldselectValueAccessor, NvFieldslider, NvFieldsliderValueAccessor, NvFieldtext, NvFieldtextValueAccessor, NvFieldtextarea, NvFieldtextareaValueAccessor, NvFieldtime, NvIcon, NvIconbutton, NvLoader, NvMenu, NvMenuitem, NvNotification, NvNotificationValueAccessor, NvNotificationcontainer, NvPopover, NvPopoverValueAccessor, NvRow, NvSplit, NvSplitValueAccessor, NvStack, NvTable, NvToggle, NvToggleValueAccessor, NvTogglebutton, NvTogglebuttongroup, NvTogglebuttongroupValueAccessor, NvTooltip, VALUE_ACCESSORS, flexRenderComponent as nvDatatableRenderComponent };
 //# sourceMappingURL=nova-components.mjs.map