@nova-design-system/nova-angular 3.17.0 → 3.18.0

package/dist/nova-components/lib/components/index.d.ts

@@ -1 +1,2 @@
 export * from './nv-datatable.component';
+export { NvDatatableCellDirective, type NvDatatableCellContext, } from './nv-datatable-cell.directive';

package/dist/nova-components/lib/components/nv-datatable-cell.directive.d.ts

@@ -0,0 +1,37 @@
+import { TemplateRef } from '@angular/core';
+import type { CellContext } from './datatable.utils';
+import * as i0 from "@angular/core";
+/**
+ * Context type for cell templates - uses TanStack Table's CellContext directly
+ */
+export type NvDatatableCellContext<T> = {
+    /** The cell's actual value */
+    $implicit: CellContext<T, unknown>;
+};
+/**
+ * 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>
+ * ```
+ */
+export declare class NvDatatableCellDirective<T = any> {
+    template: TemplateRef<NvDatatableCellContext<T>>;
+    /**
+     * The field name this template should render.
+     * Should match a field in your column definitions.
+     */
+    nvDatatableCell: string;
+    constructor(template: TemplateRef<NvDatatableCellContext<T>>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<NvDatatableCellDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NvDatatableCellDirective<any>, "ng-template[nvDatatableCell]", never, { "nvDatatableCell": { "alias": "nvDatatableCell"; "required": true; }; }, {}, never, never, true, never>;
+}

package/dist/nova-components/lib/components/nv-datatable.component.d.ts

@@ -1,4 +1,5 @@
-import { TemplateRef } from '@angular/core';
+import { TemplateRef, QueryList, AfterViewInit, OnDestroy } from '@angular/core';
+import { NvDatatableCellDirective } from './nv-datatable-cell.directive';
 import { type FlexRenderComponent, type ColumnDef, type CellContext } from './datatable.utils';
 import * as i0 from "@angular/core";
 export type { CellContext as NvDatatableCellContext };
@@ -27,20 +28,111 @@ export interface NvDatatableColumn<T extends NvDatatableRow> {
         $implicit: CellContext<T, unknown>;
     }>;
 }
+/**
+ * Pagination configuration for NvDatatable.
+ * Supports three modes: client-side, server-side with buttons, and infinite scroll.
+ */
+export interface NvDatatablePaginationConfig {
+    /** Pagination mode */
+    mode: 'client' | 'server' | 'infinite';
+    /** Initial page size (default: 10) */
+    initialPageSize?: number;
+    /** Available page size options (default: [10, 20, 50, 100]) */
+    pageSizeOptions?: number[];
+    /** Total number of rows (for server-side pagination) */
+    totalRowCount?: number;
+    /** Total number of pages (for server-side pagination) */
+    totalPageCount?: number;
+    /** Callback when pagination state changes (for server-side pagination) */
+    onPaginationChange?: (state: {
+        /** Current page index */
+        pageIndex: number;
+        /** Current page size */
+        pageSize: number;
+    }) => void;
+    /** Whether there are more items to load (for infinite scroll) */
+    hasMore?: boolean;
+    /** Whether data is currently loading (for infinite scroll) */
+    isLoading?: boolean;
+    /** Distance from bottom in pixels to trigger load (default: 500) */
+    loadMoreThreshold?: number;
+    /** Callback to load more data (for infinite scroll) */
+    onLoadMore?: () => void;
+}
+/**
+ * API exposed to pagination template for building custom pagination UI.
+ */
+export interface NvDatatableRenderPaginationAPI {
+    /** Current page index (zero-based) */
+    pageIndex: number;
+    /** Current page size */
+    pageSize: number;
+    /** Total number of pages */
+    pageCount: number;
+    /** Total number of rows */
+    rowCount: number;
+    /** Navigate to first page */
+    firstPage: () => void;
+    /** Navigate to previous page */
+    previousPage: () => void;
+    /** Navigate to next page */
+    nextPage: () => void;
+    /** Navigate to last page */
+    lastPage: () => void;
+    /** Navigate to specific page by index */
+    setPageIndex: (index: number) => void;
+    /** Change page size */
+    setPageSize: (size: number) => void;
+    /** Whether previous page is available */
+    canPreviousPage: boolean;
+    /** Whether next page is available */
+    canNextPage: boolean;
+    /** Loading state (only for infinite scroll) */
+    isLoading?: boolean;
+    /** Whether more items are available (only for infinite scroll) */
+    hasMore?: boolean;
+}
 /**
  * Nova Datatable built on TanStack Table (Angular).
  */
-export declare class NvDatatable<T extends NvDatatableRow = NvDatatableRow> {
+export declare class NvDatatable<T extends NvDatatableRow = NvDatatableRow> implements AfterViewInit, OnDestroy {
     /** Column definitions */
     columns: import("@angular/core").InputSignal<NvDatatableColumn<T>[]>;
     /** Row data */
     rows: import("@angular/core").InputSignal<T[]>;
+    /** Optional pagination configuration */
+    pagination: import("@angular/core").InputSignal<NvDatatablePaginationConfig | undefined>;
+    /** Should the header stick to the top of the table when scrolling? */
+    stickyHeader: import("@angular/core").InputSignal<boolean>;
+    /** Template for custom pagination UI */
+    paginationTemplate?: TemplateRef<{
+        $implicit: NvDatatableRenderPaginationAPI;
+    }>;
+    /** Cell templates provided via nvDatatableCell directive */
+    cellTemplates?: QueryList<NvDatatableCellDirective<T>>;
+    /** Signal to track cell templates array */
+    private cellTemplatesSignal;
+    /** Map of field names to cell templates */
+    private cellTemplateMap;
+    /** Pagination state for server mode */
+    private paginationState;
+    /** Reference to table rows for infinite scroll observer */
+    private tableRows;
+    /** Intersection observer for infinite scroll */
+    private observer;
+    /** Helper to check if using infinite scroll */
+    isInfiniteScroll: import("@angular/core").Signal<boolean>;
     /** Computed table columns with proper typing and filtering. */
     tableColumns: import("@angular/core").Signal<ColumnDef<T>[]>;
     /** TanStack table instance with Signals */
     private tableInstance;
     /** Public getter for table instance. */
     table(): import("./datatable.utils").Table<T>;
+    /** Build pagination API for template */
+    paginationAPI: import("@angular/core").Signal<NvDatatableRenderPaginationAPI | null>;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NvDatatable<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NvDatatable<any>, "nv-datatable", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NvDatatable<any>, "nv-datatable", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "pagination": { "alias": "pagination"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; }, {}, ["paginationTemplate", "cellTemplates"], never, true, never>;
 }

package/dist/nova-components/lib/nova-components.module.d.ts

@@ -17,7 +17,7 @@ export declare class NovaComponentsModule {
 }
 export declare class NovaComponentsValueAccessorModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NovaComponentsValueAccessorModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NovaComponentsValueAccessorModule, [typeof i3.NvAccordionValueAccessor, typeof i3.NvAlertValueAccessor, typeof i3.NvCalendarValueAccessor, typeof i3.NvDatagridValueAccessor, typeof i3.NvDialogValueAccessor, typeof i3.NvFieldcheckboxValueAccessor, typeof i3.NvFielddateValueAccessor, typeof i3.NvFielddaterangeValueAccessor, typeof i3.NvFielddropdownValueAccessor, typeof i3.NvFieldmultiselectValueAccessor, typeof i3.NvFieldnumberValueAccessor, typeof i3.NvFieldpasswordValueAccessor, typeof i3.NvFieldradioValueAccessor, typeof i3.NvFieldselectValueAccessor, typeof i3.NvFieldsliderValueAccessor, typeof i3.NvFieldtextValueAccessor, typeof i3.NvFieldtextareaValueAccessor, typeof i3.NvNotificationValueAccessor, typeof i3.NvPopoverValueAccessor, typeof i3.NvSplitValueAccessor, typeof i3.NvToggleValueAccessor, typeof i3.NvTogglebuttongroupValueAccessor], never, [typeof i3.NvAccordionValueAccessor, typeof i3.NvAlertValueAccessor, typeof i3.NvCalendarValueAccessor, typeof i3.NvDatagridValueAccessor, typeof i3.NvDialogValueAccessor, typeof i3.NvFieldcheckboxValueAccessor, typeof i3.NvFielddateValueAccessor, typeof i3.NvFielddaterangeValueAccessor, typeof i3.NvFielddropdownValueAccessor, typeof i3.NvFieldmultiselectValueAccessor, typeof i3.NvFieldnumberValueAccessor, typeof i3.NvFieldpasswordValueAccessor, typeof i3.NvFieldradioValueAccessor, typeof i3.NvFieldselectValueAccessor, typeof i3.NvFieldsliderValueAccessor, typeof i3.NvFieldtextValueAccessor, typeof i3.NvFieldtextareaValueAccessor, typeof i3.NvNotificationValueAccessor, typeof i3.NvPopoverValueAccessor, typeof i3.NvSplitValueAccessor, typeof i3.NvToggleValueAccessor, typeof i3.NvTogglebuttongroupValueAccessor]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NovaComponentsValueAccessorModule, [typeof i3.NvAccordionValueAccessor, typeof i3.NvAlertValueAccessor, typeof i3.NvCalendarValueAccessor, typeof i3.NvDatagridValueAccessor, typeof i3.NvDialogValueAccessor, typeof i3.NvFieldcheckboxValueAccessor, typeof i3.NvFielddateValueAccessor, typeof i3.NvFielddaterangeValueAccessor, typeof i3.NvFielddropdownValueAccessor, typeof i3.NvFieldmultiselectValueAccessor, typeof i3.NvFieldnumberValueAccessor, typeof i3.NvFieldpasswordValueAccessor, typeof i3.NvFieldradioValueAccessor, typeof i3.NvFieldselectValueAccessor, typeof i3.NvFieldsliderValueAccessor, typeof i3.NvFieldtextValueAccessor, typeof i3.NvFieldtextareaValueAccessor, typeof i3.NvFieldtimeValueAccessor, typeof i3.NvNotificationValueAccessor, typeof i3.NvPopoverValueAccessor, typeof i3.NvSplitValueAccessor, typeof i3.NvToggleValueAccessor, typeof i3.NvTogglebuttongroupValueAccessor], never, [typeof i3.NvAccordionValueAccessor, typeof i3.NvAlertValueAccessor, typeof i3.NvCalendarValueAccessor, typeof i3.NvDatagridValueAccessor, typeof i3.NvDialogValueAccessor, typeof i3.NvFieldcheckboxValueAccessor, typeof i3.NvFielddateValueAccessor, typeof i3.NvFielddaterangeValueAccessor, typeof i3.NvFielddropdownValueAccessor, typeof i3.NvFieldmultiselectValueAccessor, typeof i3.NvFieldnumberValueAccessor, typeof i3.NvFieldpasswordValueAccessor, typeof i3.NvFieldradioValueAccessor, typeof i3.NvFieldselectValueAccessor, typeof i3.NvFieldsliderValueAccessor, typeof i3.NvFieldtextValueAccessor, typeof i3.NvFieldtextareaValueAccessor, typeof i3.NvFieldtimeValueAccessor, typeof i3.NvNotificationValueAccessor, typeof i3.NvPopoverValueAccessor, typeof i3.NvSplitValueAccessor, typeof i3.NvToggleValueAccessor, typeof i3.NvTogglebuttongroupValueAccessor]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NovaComponentsValueAccessorModule>;
 }
 export declare class NovaComponentsProvidersModule {

package/dist/nova-components/lib/stencil-generated/component-value-accessors.d.ts

@@ -120,6 +120,13 @@ export declare class NvFieldtextareaValueAccessor extends ValueAccessor {
     static ɵfac: i0.ɵɵFactoryDeclaration<NvFieldtextareaValueAccessor, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NvFieldtextareaValueAccessor, "nv-fieldtextarea", never, {}, {}, never, never, false, never>;
 }
+export declare class NvFieldtimeValueAccessor extends ValueAccessor {
+    constructor(el: ElementRef);
+    handleValueChanged(event: any): void;
+    writeValue(value: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NvFieldtimeValueAccessor, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NvFieldtimeValueAccessor, "nv-fieldtime", never, {}, {}, never, never, false, never>;
+}
 export declare class NvNotificationValueAccessor extends ValueAccessor {
     constructor(el: ElementRef);
     handleHiddenChanged(event: any): void;

package/dist/nova-components/lib/stencil-generated/components.d.ts

@@ -441,7 +441,7 @@ export declare class NvFieldtime {
 export declare interface NvFieldtime extends Components.NvFieldtime {
     /**
      * Emit an event when the time value changes.
-  The event detail contains the new time value (HH, HH:mm or HH:mm:ss).
+  The event detail contains the new time value in the format specified by the format property. @bind value
      */
     valueChanged: EventEmitter<CustomEvent<string>>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-angular",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.",
   "author": "Elia Group",
   "homepage": "https://nova.eliagroup.io",