@nova-design-system/nova-angular-18 3.20.0 → 3.21.0

package/dist/nova-components/esm2022/lib/stencil-generated/index.mjs

@@ -43,9 +43,10 @@ export const DIRECTIVES = [
     d.NvSplit,
     d.NvStack,
     d.NvTable,
+    d.NvTableheader,
     d.NvToggle,
     d.NvTogglebutton,
     d.NvTogglebuttongroup,
     d.NvTooltip
 ];
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ub3ZhLWNvbXBvbmVudHMvc3JjL2xpYi9zdGVuY2lsLWdlbmVyYXRlZC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEtBQUssQ0FBQyxNQUFNLGNBQWMsQ0FBQztBQUVsQyxNQUFNLENBQUMsTUFBTSxVQUFVLEdBQUc7SUFDeEIsQ0FBQyxDQUFDLFdBQVc7SUFDYixDQUFDLENBQUMsZUFBZTtJQUNqQixDQUFDLENBQUMsT0FBTztJQUNULENBQUMsQ0FBQyxRQUFRO0lBQ1YsQ0FBQyxDQUFDLE9BQU87SUFDVCxDQUFDLENBQUMsWUFBWTtJQUNkLENBQUMsQ0FBQyxhQUFhO0lBQ2YsQ0FBQyxDQUFDLFFBQVE7SUFDVixDQUFDLENBQUMsYUFBYTtJQUNmLENBQUMsQ0FBQyxVQUFVO0lBQ1osQ0FBQyxDQUFDLEtBQUs7SUFDUCxDQUFDLENBQUMsVUFBVTtJQUNaLENBQUMsQ0FBQyxnQkFBZ0I7SUFDbEIsQ0FBQyxDQUFDLFFBQVE7SUFDVixDQUFDLENBQUMsY0FBYztJQUNoQixDQUFDLENBQUMsY0FBYztJQUNoQixDQUFDLENBQUMsZUFBZTtJQUNqQixDQUFDLENBQUMsV0FBVztJQUNiLENBQUMsQ0FBQyxnQkFBZ0I7SUFDbEIsQ0FBQyxDQUFDLGVBQWU7SUFDakIsQ0FBQyxDQUFDLG1CQUFtQjtJQUNyQixDQUFDLENBQUMsd0JBQXdCO0lBQzFCLENBQUMsQ0FBQyxrQkFBa0I7SUFDcEIsQ0FBQyxDQUFDLGFBQWE7SUFDZixDQUFDLENBQUMsZUFBZTtJQUNqQixDQUFDLENBQUMsWUFBWTtJQUNkLENBQUMsQ0FBQyxhQUFhO0lBQ2YsQ0FBQyxDQUFDLGFBQWE7SUFDZixDQUFDLENBQUMsV0FBVztJQUNiLENBQUMsQ0FBQyxlQUFlO0lBQ2pCLENBQUMsQ0FBQyxXQUFXO0lBQ2IsQ0FBQyxDQUFDLE1BQU07SUFDUixDQUFDLENBQUMsWUFBWTtJQUNkLENBQUMsQ0FBQyxRQUFRO0lBQ1YsQ0FBQyxDQUFDLE1BQU07SUFDUixDQUFDLENBQUMsVUFBVTtJQUNaLENBQUMsQ0FBQyxjQUFjO0lBQ2hCLENBQUMsQ0FBQyx1QkFBdUI7SUFDekIsQ0FBQyxDQUFDLFNBQVM7SUFDWCxDQUFDLENBQUMsS0FBSztJQUNQLENBQUMsQ0FBQyxPQUFPO0lBQ1QsQ0FBQyxDQUFDLE9BQU87SUFDVCxDQUFDLENBQUMsT0FBTztJQUNULENBQUMsQ0FBQyxRQUFRO0lBQ1YsQ0FBQyxDQUFDLGNBQWM7SUFDaEIsQ0FBQyxDQUFDLG1CQUFtQjtJQUNyQixDQUFDLENBQUMsU0FBUztDQUNaLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJcbmltcG9ydCAqIGFzIGQgZnJvbSAnLi9jb21wb25lbnRzJztcblxuZXhwb3J0IGNvbnN0IERJUkVDVElWRVMgPSBbXG4gIGQuTnZBY2NvcmRpb24sXG4gIGQuTnZBY2NvcmRpb25JdGVtLFxuICBkLk52QWxlcnQsXG4gIGQuTnZBdmF0YXIsXG4gIGQuTnZCYWRnZSxcbiAgZC5OdkJyZWFkY3J1bWIsXG4gIGQuTnZCcmVhZGNydW1icyxcbiAgZC5OdkJ1dHRvbixcbiAgZC5OdkJ1dHRvbmdyb3VwLFxuICBkLk52Q2FsZW5kYXIsXG4gIGQuTnZDb2wsXG4gIGQuTnZEYXRhZ3JpZCxcbiAgZC5OdkRhdGFncmlkY29sdW1uLFxuICBkLk52RGlhbG9nLFxuICBkLk52RGlhbG9nZm9vdGVyLFxuICBkLk52RGlhbG9naGVhZGVyLFxuICBkLk52RmllbGRjaGVja2JveCxcbiAgZC5OdkZpZWxkZGF0ZSxcbiAgZC5OdkZpZWxkZGF0ZXJhbmdlLFxuICBkLk52RmllbGRkcm9wZG93bixcbiAgZC5OdkZpZWxkZHJvcGRvd25pdGVtLFxuICBkLk52RmllbGRkcm9wZG93bml0ZW1jaGVjayxcbiAgZC5OdkZpZWxkbXVsdGlzZWxlY3QsXG4gIGQuTnZGaWVsZG51bWJlcixcbiAgZC5OdkZpZWxkcGFzc3dvcmQsXG4gIGQuTnZGaWVsZHJhZGlvLFxuICBkLk52RmllbGRzZWxlY3QsXG4gIGQuTnZGaWVsZHNsaWRlcixcbiAgZC5OdkZpZWxkdGV4dCxcbiAgZC5OdkZpZWxkdGV4dGFyZWEsXG4gIGQuTnZGaWVsZHRpbWUsXG4gIGQuTnZJY29uLFxuICBkLk52SWNvbmJ1dHRvbixcbiAgZC5OdkxvYWRlcixcbiAgZC5Odk1lbnUsXG4gIGQuTnZNZW51aXRlbSxcbiAgZC5Odk5vdGlmaWNhdGlvbixcbiAgZC5Odk5vdGlmaWNhdGlvbmNvbnRhaW5lcixcbiAgZC5OdlBvcG92ZXIsXG4gIGQuTnZSb3csXG4gIGQuTnZTcGxpdCxcbiAgZC5OdlN0YWNrLFxuICBkLk52VGFibGUsXG4gIGQuTnZUb2dnbGUsXG4gIGQuTnZUb2dnbGVidXR0b24sXG4gIGQuTnZUb2dnbGVidXR0b25ncm91cCxcbiAgZC5OdlRvb2x0aXBcbl07XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ub3ZhLWNvbXBvbmVudHMvc3JjL2xpYi9zdGVuY2lsLWdlbmVyYXRlZC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEtBQUssQ0FBQyxNQUFNLGNBQWMsQ0FBQztBQUVsQyxNQUFNLENBQUMsTUFBTSxVQUFVLEdBQUc7SUFDeEIsQ0FBQyxDQUFDLFdBQVc7SUFDYixDQUFDLENBQUMsZUFBZTtJQUNqQixDQUFDLENBQUMsT0FBTztJQUNULENBQUMsQ0FBQyxRQUFRO0lBQ1YsQ0FBQyxDQUFDLE9BQU87SUFDVCxDQUFDLENBQUMsWUFBWTtJQUNkLENBQUMsQ0FBQyxhQUFhO0lBQ2YsQ0FBQyxDQUFDLFFBQVE7SUFDVixDQUFDLENBQUMsYUFBYTtJQUNmLENBQUMsQ0FBQyxVQUFVO0lBQ1osQ0FBQyxDQUFDLEtBQUs7SUFDUCxDQUFDLENBQUMsVUFBVTtJQUNaLENBQUMsQ0FBQyxnQkFBZ0I7SUFDbEIsQ0FBQyxDQUFDLFFBQVE7SUFDVixDQUFDLENBQUMsY0FBYztJQUNoQixDQUFDLENBQUMsY0FBYztJQUNoQixDQUFDLENBQUMsZUFBZTtJQUNqQixDQUFDLENBQUMsV0FBVztJQUNiLENBQUMsQ0FBQyxnQkFBZ0I7SUFDbEIsQ0FBQyxDQUFDLGVBQWU7SUFDakIsQ0FBQyxDQUFDLG1CQUFtQjtJQUNyQixDQUFDLENBQUMsd0JBQXdCO0lBQzFCLENBQUMsQ0FBQyxrQkFBa0I7SUFDcEIsQ0FBQyxDQUFDLGFBQWE7SUFDZixDQUFDLENBQUMsZUFBZTtJQUNqQixDQUFDLENBQUMsWUFBWTtJQUNkLENBQUMsQ0FBQyxhQUFhO0lBQ2YsQ0FBQyxDQUFDLGFBQWE7SUFDZixDQUFDLENBQUMsV0FBVztJQUNiLENBQUMsQ0FBQyxlQUFlO0lBQ2pCLENBQUMsQ0FBQyxXQUFXO0lBQ2IsQ0FBQyxDQUFDLE1BQU07SUFDUixDQUFDLENBQUMsWUFBWTtJQUNkLENBQUMsQ0FBQyxRQUFRO0lBQ1YsQ0FBQyxDQUFDLE1BQU07SUFDUixDQUFDLENBQUMsVUFBVTtJQUNaLENBQUMsQ0FBQyxjQUFjO0lBQ2hCLENBQUMsQ0FBQyx1QkFBdUI7SUFDekIsQ0FBQyxDQUFDLFNBQVM7SUFDWCxDQUFDLENBQUMsS0FBSztJQUNQLENBQUMsQ0FBQyxPQUFPO0lBQ1QsQ0FBQyxDQUFDLE9BQU87SUFDVCxDQUFDLENBQUMsT0FBTztJQUNULENBQUMsQ0FBQyxhQUFhO0lBQ2YsQ0FBQyxDQUFDLFFBQVE7SUFDVixDQUFDLENBQUMsY0FBYztJQUNoQixDQUFDLENBQUMsbUJBQW1CO0lBQ3JCLENBQUMsQ0FBQyxTQUFTO0NBQ1osQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIlxuaW1wb3J0ICogYXMgZCBmcm9tICcuL2NvbXBvbmVudHMnO1xuXG5leHBvcnQgY29uc3QgRElSRUNUSVZFUyA9IFtcbiAgZC5OdkFjY29yZGlvbixcbiAgZC5OdkFjY29yZGlvbkl0ZW0sXG4gIGQuTnZBbGVydCxcbiAgZC5OdkF2YXRhcixcbiAgZC5OdkJhZGdlLFxuICBkLk52QnJlYWRjcnVtYixcbiAgZC5OdkJyZWFkY3J1bWJzLFxuICBkLk52QnV0dG9uLFxuICBkLk52QnV0dG9uZ3JvdXAsXG4gIGQuTnZDYWxlbmRhcixcbiAgZC5OdkNvbCxcbiAgZC5OdkRhdGFncmlkLFxuICBkLk52RGF0YWdyaWRjb2x1bW4sXG4gIGQuTnZEaWFsb2csXG4gIGQuTnZEaWFsb2dmb290ZXIsXG4gIGQuTnZEaWFsb2doZWFkZXIsXG4gIGQuTnZGaWVsZGNoZWNrYm94LFxuICBkLk52RmllbGRkYXRlLFxuICBkLk52RmllbGRkYXRlcmFuZ2UsXG4gIGQuTnZGaWVsZGRyb3Bkb3duLFxuICBkLk52RmllbGRkcm9wZG93bml0ZW0sXG4gIGQuTnZGaWVsZGRyb3Bkb3duaXRlbWNoZWNrLFxuICBkLk52RmllbGRtdWx0aXNlbGVjdCxcbiAgZC5OdkZpZWxkbnVtYmVyLFxuICBkLk52RmllbGRwYXNzd29yZCxcbiAgZC5OdkZpZWxkcmFkaW8sXG4gIGQuTnZGaWVsZHNlbGVjdCxcbiAgZC5OdkZpZWxkc2xpZGVyLFxuICBkLk52RmllbGR0ZXh0LFxuICBkLk52RmllbGR0ZXh0YXJlYSxcbiAgZC5OdkZpZWxkdGltZSxcbiAgZC5Odkljb24sXG4gIGQuTnZJY29uYnV0dG9uLFxuICBkLk52TG9hZGVyLFxuICBkLk52TWVudSxcbiAgZC5Odk1lbnVpdGVtLFxuICBkLk52Tm90aWZpY2F0aW9uLFxuICBkLk52Tm90aWZpY2F0aW9uY29udGFpbmVyLFxuICBkLk52UG9wb3ZlcixcbiAgZC5OdlJvdyxcbiAgZC5OdlNwbGl0LFxuICBkLk52U3RhY2ssXG4gIGQuTnZUYWJsZSxcbiAgZC5OdlRhYmxlaGVhZGVyLFxuICBkLk52VG9nZ2xlLFxuICBkLk52VG9nZ2xlYnV0dG9uLFxuICBkLk52VG9nZ2xlYnV0dG9uZ3JvdXAsXG4gIGQuTnZUb29sdGlwXG5dO1xuIl19

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

@@ -5,7 +5,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, getSortedRowModel, getCoreRowModel, getPaginationRowModel } from '@tanstack/table-core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 export * from '@nova-design-system/nova-webcomponents/constants';
 
@@ -253,11 +253,11 @@ let NvButton = class NvButton {
         this.el = r.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", type: NvButton, 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: "18.2.13", type: NvButton, 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: "18.2.13", ngImport: i0, type: NvButton, decorators: [{
@@ -267,7 +267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     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 }] });
@@ -903,11 +903,11 @@ let NvIconbutton = class NvIconbutton {
         this.el = r.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", type: NvIconbutton, 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: "18.2.13", type: NvIconbutton, 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: "18.2.13", ngImport: i0, type: NvIconbutton, decorators: [{
@@ -917,7 +917,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     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 }] });
@@ -1176,6 +1176,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     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: "18.2.13", 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: "18.2.13", type: NvTableheader, 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: "18.2.13", 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;
@@ -1325,6 +1351,7 @@ const DIRECTIVES = [
     NvSplit,
     NvStack,
     NvTable,
+    NvTableheader,
     NvToggle,
     NvTogglebutton,
     NvTogglebuttongroup,
@@ -2093,6 +2120,7 @@ function createAngularTable(options) {
 
 /* eslint-disable jsdoc/require-jsdoc */
 /* eslint-disable jsdoc/require-returns */
+/* eslint-disable jsdoc/require-param */
 /**
  * A powerful, flexible datatable component built on TanStack Table.
  * Supports custom cell rendering, column configuration, pagination, and full TypeScript typing.
@@ -2102,6 +2130,37 @@ class NvDatatable {
     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([]);
@@ -2109,6 +2168,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 */
@@ -2126,6 +2187,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 */
@@ -2154,7 +2217,7 @@ class NvDatatable {
                     // Default: just return the value (formatted if valueFormatter was used)
                     return context.getValue();
                 };
-                return {
+                const columnDef = {
                     accessorKey: col.field,
                     accessorFn: col.valueFormatter
                         ? (row) => {
@@ -2169,27 +2232,82 @@ class NvDatatable {
                     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: {
@@ -2200,12 +2318,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
@@ -2214,13 +2331,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,
+                            });
                         }
                     },
                 };
@@ -2259,18 +2382,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();
@@ -2329,7 +2440,7 @@ class NvDatatable {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NvDatatable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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: "18.2.13", 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">
@@ -2348,9 +2459,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>
@@ -2361,7 +2482,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
@@ -2370,7 +2491,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;
@@ -2425,9 +2546,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 !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>
@@ -2438,7 +2569,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
           @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
@@ -2447,7 +2578,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             "
           >
             @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;
@@ -3393,7 +3524,7 @@ function provideNovaComponents() {
 }
 class NovaComponentsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NovaComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.13", 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: "18.2.13", ngImport: i0, type: NovaComponentsModule, providers: [provideNovaComponents()], imports: [NvDatatable] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NovaComponentsModule, decorators: [{
@@ -3442,6 +3573,7 @@ class NotificationService {
     }
     constructor() {
         this._notifications = new BehaviorSubject([]);
+        this.timers = new Map();
         /**
          * Observable stream of active notifications.
          */
@@ -3479,6 +3611,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.
      *
@@ -3497,6 +3637,7 @@ class NotificationService {
             icon: options.icon,
             actions: options.actions ?? [],
             actionSlot: options.actionSlot,
+            duration: options.duration ?? 0,
             createdAt: Date.now(),
         };
         const currentNotifications = this._notifications.value;
@@ -3511,6 +3652,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;
     }
@@ -3521,6 +3669,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?.();
     }
     /**
@@ -3529,6 +3683,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);
@@ -3537,6 +3697,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: "18.2.13", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -3735,5 +3898,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * 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, makeColumn, flexRenderComponent as nvDatatableRenderComponent, provideNovaComponents };
+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, provideNovaComponents };
 //# sourceMappingURL=nova-components.mjs.map