@nova-design-system/nova-angular-19 3.19.0 → 3.21.0

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

@@ -4,7 +4,7 @@ import { __decorate } from 'tslib';
 import { fromEvent, BehaviorSubject } from 'rxjs';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { memo, createTable, getCoreRowModel, getPaginationRowModel } from '@tanstack/table-core';
+import { memo, createTable, getCoreRowModel, getSortedRowModel, getPaginationRowModel } from '@tanstack/table-core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 export * from '@nova-design-system/nova-webcomponents/constants';
 
@@ -252,11 +252,11 @@ let NvButton = class NvButton {
         this.el = r.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvButton, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NvButton, isStandalone: false, selector: "nv-button", inputs: { active: "active", danger: "danger", disabled: "disabled", emphasis: "emphasis", fluid: "fluid", form: "form", loading: "loading", size: "size", type: "type" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NvButton, isStandalone: false, selector: "nv-button", inputs: { active: "active", danger: "danger", disableTabindex: "disableTabindex", disabled: "disabled", emphasis: "emphasis", fluid: "fluid", form: "form", loading: "loading", size: "size", type: "type" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 NvButton = __decorate([
     ProxyCmp({
-        inputs: ['active', 'danger', 'disabled', 'emphasis', 'fluid', 'form', 'loading', 'size', 'type']
+        inputs: ['active', 'danger', 'disableTabindex', 'disabled', 'emphasis', 'fluid', 'form', 'loading', 'size', 'type']
     })
 ], NvButton);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvButton, decorators: [{
@@ -266,7 +266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['active', 'danger', 'disabled', 'emphasis', 'fluid', 'form', 'loading', 'size', 'type'],
+                    inputs: ['active', 'danger', 'disableTabindex', 'disabled', 'emphasis', 'fluid', 'form', 'loading', 'size', 'type'],
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
@@ -902,11 +902,11 @@ let NvIconbutton = class NvIconbutton {
         this.el = r.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvIconbutton, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NvIconbutton, isStandalone: false, selector: "nv-iconbutton", inputs: { active: "active", disabled: "disabled", emphasis: "emphasis", loading: "loading", name: "name", shape: "shape", size: "size", type: "type" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NvIconbutton, isStandalone: false, selector: "nv-iconbutton", inputs: { active: "active", disableTabindex: "disableTabindex", disabled: "disabled", emphasis: "emphasis", loading: "loading", name: "name", shape: "shape", size: "size", type: "type" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 NvIconbutton = __decorate([
     ProxyCmp({
-        inputs: ['active', 'disabled', 'emphasis', 'loading', 'name', 'shape', 'size', 'type']
+        inputs: ['active', 'disableTabindex', 'disabled', 'emphasis', 'loading', 'name', 'shape', 'size', 'type']
     })
 ], NvIconbutton);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvIconbutton, decorators: [{
@@ -916,7 +916,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['active', 'disabled', 'emphasis', 'loading', 'name', 'shape', 'size', 'type'],
+                    inputs: ['active', 'disableTabindex', 'disabled', 'emphasis', 'loading', 'name', 'shape', 'size', 'type'],
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
@@ -1175,6 +1175,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
+let NvTableheader = class NvTableheader {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+        proxyOutputs(this, this.el, ['sortDirectionChanged']);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvTableheader, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NvTableheader, isStandalone: false, selector: "nv-tableheader", inputs: { sortDirection: "sortDirection", sortable: "sortable" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+};
+NvTableheader = __decorate([
+    ProxyCmp({
+        inputs: ['sortDirection', 'sortable']
+    })
+], NvTableheader);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvTableheader, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nv-tableheader',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['sortDirection', 'sortable'],
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
 let NvToggle = class NvToggle {
     constructor(c, r, z) {
         this.z = z;
@@ -1324,6 +1350,7 @@ const DIRECTIVES = [
     NvSplit,
     NvStack,
     NvTable,
+    NvTableheader,
     NvToggle,
     NvTogglebutton,
     NvTogglebuttongroup,
@@ -2092,14 +2119,47 @@ function createAngularTable(options) {
 
 /* eslint-disable jsdoc/require-jsdoc */
 /* eslint-disable jsdoc/require-returns */
+/* eslint-disable jsdoc/require-param */
 /**
- * Nova Datatable built on TanStack Table (Angular).
+ * A powerful, flexible datatable component built on TanStack Table.
+ * Supports custom cell rendering, column configuration, pagination, and full TypeScript typing.
  */
 class NvDatatable {
     /** Public getter for table instance. */
     table() {
         return this.tableInstance();
     }
+    /**
+     * Handle sort direction change from table header
+     * @param {Event} event The sort direction change event or direction string
+     * @param {object} header The table header object
+     */
+    handleSortDirectionChanged(event, header) {
+        // Extract direction from event or use directly if string
+        let direction;
+        if (typeof event === 'string') {
+            direction = event;
+        }
+        else if ('detail' in event && typeof event.detail === 'string') {
+            direction = event.detail;
+        }
+        else {
+            // Fallback - shouldn't happen but handle gracefully
+            console.warn('Unexpected event type in handleSortDirectionChanged:', event);
+            return;
+        }
+        const sortingConfig = this.sorting();
+        // Check if multi-sort is enabled
+        const isMultiSort = sortingConfig?.enableMultiSort ?? false;
+        if (direction === 'none') {
+            // Clear this column's sort
+            header.column.clearSorting();
+        }
+        else {
+            // Toggle sort - TanStack will handle the logic internally
+            header.column.toggleSorting(direction === 'desc', isMultiSort);
+        }
+    }
     constructor() {
         /** Column definitions */
         this.columns = input([]);
@@ -2107,6 +2167,8 @@ class NvDatatable {
         this.rows = input([]);
         /** Optional pagination configuration */
         this.pagination = input(undefined);
+        /** Optional sorting configuration */
+        this.sorting = input(undefined);
         /** Should the header stick to the top of the table when scrolling? */
         this.stickyHeader = input(false);
         /** Signal to track cell templates array */
@@ -2124,6 +2186,8 @@ class NvDatatable {
             pageIndex: 0,
             pageSize: this.pagination()?.initialPageSize || 10,
         });
+        /** Sorting state for controlled sorting (server mode) */
+        this.sortingState = signal(this.sorting()?.sortState || []);
         /** Reference to table rows for infinite scroll observer */
         this.tableRows = viewChild('tableRow');
         /** Intersection observer for infinite scroll */
@@ -2135,45 +2199,114 @@ class NvDatatable {
             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) => {
+                .map((col) => {
+                // Shared cell renderer
+                const cellRenderer = (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 TemplateRef directly - getValue() returns formatted value
                         return cellTemplate;
                     }
                     // Fall back to renderCell if provided
                     if (col.renderCell) {
                         return col.renderCell(context);
                     }
-                    // Default: just return the value
+                    // Default: just return the value (formatted if valueFormatter was used)
                     return context.getValue();
-                },
-            }));
+                };
+                const columnDef = {
+                    accessorKey: col.field,
+                    accessorFn: col.valueFormatter
+                        ? (row) => {
+                            const rawValue = row[col.field];
+                            return col.valueFormatter({
+                                value: rawValue,
+                                row,
+                                field: col.field,
+                            });
+                        }
+                        : undefined,
+                    header: col.headerName || String(col.field),
+                    size: col.width,
+                    enableResizing: col.resizable ?? true,
+                    // Sorting configuration
+                    enableSorting: this.sorting() ? col.sortable ?? true : false,
+                    cell: cellRenderer,
+                };
+                // Add optional sorting properties only if defined
+                if (col.sortingFn !== undefined) {
+                    // @ts-expect-error - TanStack typing is strict but this works at runtime
+                    columnDef.sortingFn = col.sortingFn;
+                }
+                if (col.sortDescFirst !== undefined) {
+                    columnDef.sortDescFirst = col.sortDescFirst;
+                }
+                if (col.invertSorting !== undefined) {
+                    columnDef.invertSorting = col.invertSorting;
+                }
+                if (col.sortUndefined !== undefined) {
+                    columnDef.sortUndefined = col.sortUndefined;
+                }
+                return columnDef;
+            });
         });
         /** TanStack table instance with Signals */
         this.tableInstance = createAngularTable(() => {
             const paginationConfig = this.pagination();
-            if (!paginationConfig || paginationConfig.mode === 'infinite') {
-                // No pagination or infinite scroll - simple config
-                return {
+            const sortingConfig = this.sorting();
+            // Determine base table configuration with sorting
+            const getBaseTableConfig = () => {
+                const baseConfig = {
                     data: this.rows(),
                     columns: this.tableColumns(),
                     getCoreRowModel: getCoreRowModel(),
+                    // Sorting configuration
+                    ...(sortingConfig && {
+                        state: {
+                            sorting: sortingConfig.mode === 'server' && sortingConfig.sortState
+                                ? sortingConfig.sortState
+                                : this.sortingState(),
+                        },
+                        onSortingChange: (updaterOrValue) => {
+                            const currentSort = sortingConfig.mode === 'server' && sortingConfig.sortState
+                                ? sortingConfig.sortState
+                                : this.sortingState();
+                            const newSort = typeof updaterOrValue === 'function'
+                                ? updaterOrValue(currentSort)
+                                : updaterOrValue;
+                            // Always update internal state for reactivity
+                            this.sortingState.set(newSort);
+                            // For server-side sorting, also call the callback
+                            if (sortingConfig?.mode === 'server' &&
+                                sortingConfig.onSortingChange) {
+                                sortingConfig.onSortingChange(newSort);
+                            }
+                        },
+                        manualSorting: sortingConfig.mode === 'server',
+                        enableSorting: true,
+                        enableMultiSort: sortingConfig.enableMultiSort ?? false,
+                        enableSortingRemoval: sortingConfig.enableSortingRemoval ?? true,
+                        maxMultiSortColCount: sortingConfig.maxMultiSortColCount,
+                        sortDescFirst: sortingConfig.sortDescFirst ?? false,
+                        // When multi-sort is enabled, treat all clicks as multi-sort events
+                        isMultiSortEvent: sortingConfig.enableMultiSort
+                            ? () => true
+                            : undefined,
+                        getSortedRowModel: sortingConfig.mode === 'client' ? getSortedRowModel() : undefined,
+                    }),
                 };
+                return baseConfig;
+            };
+            if (!paginationConfig || paginationConfig.mode === 'infinite') {
+                // No pagination or infinite scroll - simple config
+                return getBaseTableConfig();
             }
             else if (paginationConfig.mode === 'client') {
                 // Client-side pagination
                 return {
-                    data: this.rows(),
-                    columns: this.tableColumns(),
-                    getCoreRowModel: getCoreRowModel(),
+                    ...getBaseTableConfig(),
                     getPaginationRowModel: getPaginationRowModel(),
                     initialState: {
                         pagination: {
@@ -2184,12 +2317,11 @@ class NvDatatable {
                 };
             }
             else {
-                // Server-side pagination
+                // Server-side pagination - manual pagination with reactive state
+                const baseConfig = getBaseTableConfig();
                 const pageSize = this.paginationState().pageSize;
                 return {
-                    data: this.rows(),
-                    columns: this.tableColumns(),
-                    getCoreRowModel: getCoreRowModel(),
+                    ...baseConfig,
                     manualPagination: true,
                     pageCount: paginationConfig.totalPageCount !== undefined
                         ? paginationConfig.totalPageCount
@@ -2198,13 +2330,19 @@ class NvDatatable {
                             : -1,
                     state: {
                         pagination: this.paginationState(),
+                        ...(baseConfig.state && { sorting: baseConfig.state.sorting }),
                     },
                     onPaginationChange: (updaterOrValue) => {
-                        if (typeof updaterOrValue === 'function') {
-                            this.paginationState.set(updaterOrValue(this.paginationState()));
-                        }
-                        else {
-                            this.paginationState.set(updaterOrValue);
+                        const newState = typeof updaterOrValue === 'function'
+                            ? updaterOrValue(this.paginationState())
+                            : updaterOrValue;
+                        this.paginationState.set(newState);
+                        // Call user's callback for server-side pagination
+                        if (paginationConfig.onPaginationChange) {
+                            paginationConfig.onPaginationChange({
+                                pageIndex: newState.pageIndex,
+                                pageSize: newState.pageSize,
+                            });
                         }
                     },
                 };
@@ -2243,18 +2381,6 @@ class NvDatatable {
                     : 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();
@@ -2313,7 +2439,7 @@ class NvDatatable {
         }
     }
     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 }, 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: `
+    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 }, sorting: { classPropertyName: "sorting", publicName: "sorting", 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 [attr.data-sticky-top]="stickyHeader() ? 'true' : null">
@@ -2332,9 +2458,19 @@ class NvDatatable {
                 !header.column.columnDef.enableResizing ? 'true' : null
               "
             >
-              @if (!header.isPlaceholder) {
+              @if (!header.isPlaceholder) { @if (header.column.getCanSort()) {
+              <nv-tableheader
+                [sortable]="true"
+                [sortDirection]="header.column.getIsSorted() || 'none'"
+                (sortDirectionChanged)="
+                  handleSortDirectionChanged($event, header)
+                "
+              >
+                {{ header.column.columnDef.header }}
+              </nv-tableheader>
+              } @else {
               {{ header.column.columnDef.header }}
-              }
+              } }
             </th>
             }
           </tr>
@@ -2345,7 +2481,7 @@ class NvDatatable {
           @for (row of table().getRowModel().rows; track row.id; let i = $index)
           {
           <tr
-            [attr.data-testid]="'datatable-row-' + row.id"
+            [attr.data-testid]="'datatable-row-' + i"
             #tableRow
             [attr.data-is-last]="
               isInfiniteScroll() && i === table().getRowModel().rows.length - 1
@@ -2354,7 +2490,7 @@ class NvDatatable {
             "
           >
             @for (cell of row.getVisibleCells(); track cell.id) {
-            <td [attr.data-testid]="'datatable-cell-' + cell.id">
+            <td [attr.data-testid]="'datatable-cell-' + cell.column.id">
               <ng-container
                 *flexRender="
                   cell.column.columnDef.cell;
@@ -2409,9 +2545,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 !header.column.columnDef.enableResizing ? 'true' : null
               "
             >
-              @if (!header.isPlaceholder) {
+              @if (!header.isPlaceholder) { @if (header.column.getCanSort()) {
+              <nv-tableheader
+                [sortable]="true"
+                [sortDirection]="header.column.getIsSorted() || 'none'"
+                (sortDirectionChanged)="
+                  handleSortDirectionChanged($event, header)
+                "
+              >
+                {{ header.column.columnDef.header }}
+              </nv-tableheader>
+              } @else {
               {{ header.column.columnDef.header }}
-              }
+              } }
             </th>
             }
           </tr>
@@ -2422,7 +2568,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
           @for (row of table().getRowModel().rows; track row.id; let i = $index)
           {
           <tr
-            [attr.data-testid]="'datatable-row-' + row.id"
+            [attr.data-testid]="'datatable-row-' + i"
             #tableRow
             [attr.data-is-last]="
               isInfiniteScroll() && i === table().getRowModel().rows.length - 1
@@ -2431,7 +2577,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
             "
           >
             @for (cell of row.getVisibleCells(); track cell.id) {
-            <td [attr.data-testid]="'datatable-cell-' + cell.id">
+            <td [attr.data-testid]="'datatable-cell-' + cell.column.id">
               <ng-container
                 *flexRender="
                   cell.column.columnDef.cell;
@@ -2467,6 +2613,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: ContentChildren,
                 args: [NvDatatableCellDirective]
             }] } });
+/********************************* UTILS **************************************/
+/**
+ * Creates a strongly-typed column factory for a given row type.
+ *
+ * @template Row The row data type (e.g., `Product`)
+ *
+ * @returns {function} A function that accepts a column definition and infers:
+ * - `K` as the field key (`keyof Row`)
+ * - `F` as the return type of `valueFormatter` (defaults to `Row[K]`)
+ *
+ * @example
+ * ```ts
+ * // Define your row type
+ * interface Product {
+ *   name: string;
+ *   price: number;
+ * }
+ *
+ * const col = makeColumn<Product>();
+ */
+function makeColumn() {
+    return function define(col) {
+        return col;
+    };
+}
 
 class ValueAccessor {
     constructor(el) {
@@ -3340,7 +3511,7 @@ const VALUE_ACCESSORS = [
 
 class NovaComponentsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NovaComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: NovaComponentsModule, declarations: [NvAccordion, NvAccordionItem, NvAlert, NvAvatar, NvBadge, NvBreadcrumb, NvBreadcrumbs, NvButton, NvButtongroup, NvCalendar, NvCol, NvDatagrid, NvDatagridcolumn, NvDialog, NvDialogfooter, NvDialogheader, NvFieldcheckbox, NvFielddate, NvFielddaterange, NvFielddropdown, NvFielddropdownitem, NvFielddropdownitemcheck, NvFieldmultiselect, NvFieldnumber, NvFieldpassword, NvFieldradio, NvFieldselect, NvFieldslider, NvFieldtext, NvFieldtextarea, NvFieldtime, NvIcon, NvIconbutton, NvLoader, NvMenu, NvMenuitem, NvNotification, NvNotificationcontainer, NvPopover, NvRow, NvSplit, NvStack, NvTable, NvToggle, NvTogglebutton, NvTogglebuttongroup, NvTooltip], imports: [NvDatatable], exports: [NvAccordion, NvAccordionItem, NvAlert, NvAvatar, NvBadge, NvBreadcrumb, NvBreadcrumbs, NvButton, NvButtongroup, NvCalendar, NvCol, NvDatagrid, NvDatagridcolumn, NvDialog, NvDialogfooter, NvDialogheader, NvFieldcheckbox, NvFielddate, NvFielddaterange, NvFielddropdown, NvFielddropdownitem, NvFielddropdownitemcheck, NvFieldmultiselect, NvFieldnumber, NvFieldpassword, NvFieldradio, NvFieldselect, NvFieldslider, NvFieldtext, NvFieldtextarea, NvFieldtime, NvIcon, NvIconbutton, NvLoader, NvMenu, NvMenuitem, NvNotification, NvNotificationcontainer, NvPopover, NvRow, NvSplit, NvStack, NvTable, NvToggle, NvTogglebutton, NvTogglebuttongroup, NvTooltip, NvDatatable] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: NovaComponentsModule, declarations: [NvAccordion, NvAccordionItem, NvAlert, NvAvatar, NvBadge, NvBreadcrumb, NvBreadcrumbs, NvButton, NvButtongroup, NvCalendar, NvCol, NvDatagrid, NvDatagridcolumn, NvDialog, NvDialogfooter, NvDialogheader, NvFieldcheckbox, NvFielddate, NvFielddaterange, NvFielddropdown, NvFielddropdownitem, NvFielddropdownitemcheck, NvFieldmultiselect, NvFieldnumber, NvFieldpassword, NvFieldradio, NvFieldselect, NvFieldslider, NvFieldtext, NvFieldtextarea, NvFieldtime, NvIcon, NvIconbutton, NvLoader, NvMenu, NvMenuitem, NvNotification, NvNotificationcontainer, NvPopover, NvRow, NvSplit, NvStack, NvTable, NvTableheader, NvToggle, NvTogglebutton, NvTogglebuttongroup, NvTooltip], imports: [NvDatatable], exports: [NvAccordion, NvAccordionItem, NvAlert, NvAvatar, NvBadge, NvBreadcrumb, NvBreadcrumbs, NvButton, NvButtongroup, NvCalendar, NvCol, NvDatagrid, NvDatagridcolumn, NvDialog, NvDialogfooter, NvDialogheader, NvFieldcheckbox, NvFielddate, NvFielddaterange, NvFielddropdown, NvFielddropdownitem, NvFielddropdownitemcheck, NvFieldmultiselect, NvFieldnumber, NvFieldpassword, NvFieldradio, NvFieldselect, NvFieldslider, NvFieldtext, NvFieldtextarea, NvFieldtime, NvIcon, NvIconbutton, NvLoader, NvMenu, NvMenuitem, NvNotification, NvNotificationcontainer, NvPopover, NvRow, NvSplit, NvStack, NvTable, NvTableheader, NvToggle, NvTogglebutton, NvTogglebuttongroup, NvTooltip, NvDatatable] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NovaComponentsModule, imports: [NvDatatable] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NovaComponentsModule, decorators: [{
@@ -3388,6 +3559,7 @@ class NotificationService {
     }
     constructor() {
         this._notifications = new BehaviorSubject([]);
+        this.timers = new Map();
         /**
          * Observable stream of active notifications.
          */
@@ -3425,6 +3597,14 @@ class NotificationService {
     clearRefs() {
         this.elRefs.clear();
     }
+    /**
+     * Clean up all timers and references.
+     */
+    ngOnDestroy() {
+        this.timers.forEach((timer) => clearTimeout(timer));
+        this.timers.clear();
+        this.clearRefs();
+    }
     /**
      * Show a new notification.
      *
@@ -3443,6 +3623,7 @@ class NotificationService {
             icon: options.icon,
             actions: options.actions ?? [],
             actionSlot: options.actionSlot,
+            duration: options.duration ?? 0,
             createdAt: Date.now(),
         };
         const currentNotifications = this._notifications.value;
@@ -3457,6 +3638,13 @@ class NotificationService {
         setTimeout(() => {
             const ref = this.elRefs.get(id);
             ref?.show();
+            // Set up auto-dismiss timer if duration > 0
+            if (notification.duration && notification.duration > 0) {
+                const timer = setTimeout(() => {
+                    this.dismiss(id);
+                }, notification.duration);
+                this.timers.set(id, timer);
+            }
         }, 0);
         return id;
     }
@@ -3467,6 +3655,12 @@ class NotificationService {
      * @param {string} id The notification ID to dismiss
      */
     dismiss(id) {
+        // Clear timer if exists
+        const timer = this.timers.get(id);
+        if (timer) {
+            clearTimeout(timer);
+            this.timers.delete(id);
+        }
         this.elRefs.get(id)?.dismiss?.();
     }
     /**
@@ -3475,6 +3669,12 @@ class NotificationService {
      * @param {string} id The notification ID to dismiss
      */
     remove(id) {
+        // Clear timer if exists
+        const timer = this.timers.get(id);
+        if (timer) {
+            clearTimeout(timer);
+            this.timers.delete(id);
+        }
         const currentNotifications = this._notifications.value;
         const filteredNotifications = currentNotifications.filter((notification) => notification.id !== id);
         this._notifications.next(filteredNotifications);
@@ -3483,6 +3683,9 @@ class NotificationService {
      * Immediately remove all active notifications.
      */
     removeAll() {
+        // Clear all timers
+        this.timers.forEach((timer) => clearTimeout(timer));
+        this.timers.clear();
         this._notifications.next([]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -3681,5 +3884,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, 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, NvFieldtimeValueAccessor, 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, NvFieldtimeValueAccessor, NvIcon, NvIconbutton, NvLoader, NvMenu, NvMenuitem, NvNotification, NvNotificationValueAccessor, NvNotificationcontainer, NvPopover, NvPopoverValueAccessor, NvRow, NvSplit, NvSplitValueAccessor, NvStack, NvTable, NvTableheader, NvToggle, NvToggleValueAccessor, NvTogglebutton, NvTogglebuttongroup, NvTogglebuttongroupValueAccessor, NvTooltip, VALUE_ACCESSORS, makeColumn, flexRenderComponent as nvDatatableRenderComponent };
 //# sourceMappingURL=nova-components.mjs.map