@nova-design-system/nova-angular-19 3.23.0 → 3.25.0

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

@@ -528,6 +528,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
+let NvDrawer = class NvDrawer {
+    constructor(c, r, z) {
+        this.z = z;
+        this.openChanged = new EventEmitter();
+        c.detach();
+        this.el = r.nativeElement;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvDrawer, 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: NvDrawer, isStandalone: false, selector: "nv-drawer", inputs: { autofocus: "autofocus", clickOutside: "clickOutside", controlled: "controlled", open: "open", side: "side", size: "size", swipeToOpen: "swipeToOpen", undismissable: "undismissable", width: "width" }, outputs: { openChanged: "openChanged" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+};
+NvDrawer = __decorate([
+    ProxyCmp({
+        inputs: ['autofocus', 'clickOutside', 'controlled', 'open', 'side', 'size', 'swipeToOpen', 'undismissable', 'width'],
+        methods: ['show', 'close']
+    })
+], NvDrawer);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvDrawer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nv-drawer',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['autofocus', 'clickOutside', 'controlled', 'open', 'side', 'size', 'swipeToOpen', 'undismissable', 'width'],
+                    outputs: ['openChanged'],
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { openChanged: [{
+                type: Output
+            }] } });
+let NvDrawerfooter = class NvDrawerfooter {
+    constructor(c, r, z) {
+        this.z = z;
+        this.drawerCanceled = new EventEmitter();
+        this.drawerPrimaryClicked = new EventEmitter();
+        c.detach();
+        this.el = r.nativeElement;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvDrawerfooter, 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: NvDrawerfooter, isStandalone: false, selector: "nv-drawerfooter", inputs: { cancelLabel: "cancelLabel", danger: "danger", disabled: "disabled", form: "form", leadingIcon: "leadingIcon", primaryButtonType: "primaryButtonType", primaryLabel: "primaryLabel", trailingIcon: "trailingIcon", undismissable: "undismissable" }, outputs: { drawerCanceled: "drawerCanceled", drawerPrimaryClicked: "drawerPrimaryClicked" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+};
+NvDrawerfooter = __decorate([
+    ProxyCmp({
+        inputs: ['cancelLabel', 'danger', 'disabled', 'form', 'leadingIcon', 'primaryButtonType', 'primaryLabel', 'trailingIcon', 'undismissable']
+    })
+], NvDrawerfooter);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvDrawerfooter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nv-drawerfooter',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['cancelLabel', 'danger', 'disabled', 'form', 'leadingIcon', 'primaryButtonType', 'primaryLabel', 'trailingIcon', 'undismissable'],
+                    outputs: ['drawerCanceled', 'drawerPrimaryClicked'],
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { drawerCanceled: [{
+                type: Output
+            }], drawerPrimaryClicked: [{
+                type: Output
+            }] } });
+let NvDrawerheader = class NvDrawerheader {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvDrawerheader, 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: NvDrawerheader, isStandalone: false, selector: "nv-drawerheader", inputs: { heading: "heading", subheading: "subheading" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+};
+NvDrawerheader = __decorate([
+    ProxyCmp({
+        inputs: ['heading', 'subheading']
+    })
+], NvDrawerheader);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvDrawerheader, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nv-drawerheader',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['heading', 'subheading'],
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
 let NvFieldcheckbox = class NvFieldcheckbox {
     constructor(c, r, z) {
         this.z = z;
@@ -1196,6 +1283,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
+let NvPaginationtable = class NvPaginationtable {
+    constructor(c, r, z) {
+        this.z = z;
+        this.pageIndexChanged = new EventEmitter();
+        this.pageSizeChanged = new EventEmitter();
+        c.detach();
+        this.el = r.nativeElement;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvPaginationtable, 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: NvPaginationtable, isStandalone: false, selector: "nv-paginationtable", inputs: { hideControls: "hideControls", hideFirstLast: "hideFirstLast", hidePrevNext: "hidePrevNext", labelPage: "labelPage", labelPageSizeOption: "labelPageSizeOption", labelTotal: "labelTotal", pageCount: "pageCount", pageIndex: "pageIndex", pageSize: "pageSize", rowCount: "rowCount" }, outputs: { pageIndexChanged: "pageIndexChanged", pageSizeChanged: "pageSizeChanged" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+};
+NvPaginationtable = __decorate([
+    ProxyCmp({
+        inputs: ['hideControls', 'hideFirstLast', 'hidePrevNext', 'labelPage', 'labelPageSizeOption', 'labelTotal', 'pageCount', 'pageIndex', 'pageSize', 'rowCount'],
+        methods: ['firstPage', 'previousPage', 'nextPage', 'lastPage', 'setPageIndex', 'setPageSize']
+    })
+], NvPaginationtable);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvPaginationtable, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nv-paginationtable',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['hideControls', 'hideFirstLast', 'hidePrevNext', 'labelPage', 'labelPageSizeOption', 'labelTotal', 'pageCount', 'pageIndex', 'pageSize', 'rowCount'],
+                    outputs: ['pageIndexChanged', 'pageSizeChanged'],
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { pageIndexChanged: [{
+                type: Output
+            }], pageSizeChanged: [{
+                type: Output
+            }] } });
 let NvPopover = class NvPopover {
     constructor(c, r, z) {
         this.z = z;
@@ -1711,6 +1831,9 @@ const DIRECTIVES = [
     NvDialog,
     NvDialogfooter,
     NvDialogheader,
+    NvDrawer,
+    NvDrawerfooter,
+    NvDrawerheader,
     NvFieldcheckbox,
     NvFielddate,
     NvFielddaterange,
@@ -1734,6 +1857,7 @@ const DIRECTIVES = [
     NvNotification,
     NvNotificationBullet,
     NvNotificationcontainer,
+    NvPaginationtable,
     NvPopover,
     NvRow,
     NvSidebar,
@@ -2563,6 +2687,12 @@ class NvDatatable {
         this.columns = input([]);
         /** Row data */
         this.rows = input([]);
+        /**
+         * Data handling mode for sorting and filtering operations.
+         * - 'client': All operations handled in browser (default)
+         * - 'server': Operations trigger callbacks for server-side handling
+         */
+        this.mode = input('client');
         /** Optional pagination configuration */
         this.pagination = input(undefined);
         /** Optional sorting configuration */
@@ -2591,7 +2721,7 @@ class NvDatatable {
         /** Intersection observer for infinite scroll */
         this.observer = null;
         /** Helper to check if using infinite scroll */
-        this.isInfiniteScroll = computed(() => this.pagination()?.mode === 'infinite');
+        this.isInfiniteScroll = computed(() => this.pagination()?.infinite === true);
         /** Computed table columns with proper typing and filtering. */
         this.tableColumns = computed(() => {
             const templateMap = this.cellTemplateMap();
@@ -2654,21 +2784,24 @@ class NvDatatable {
         this.tableInstance = createAngularTable(() => {
             const paginationConfig = this.pagination();
             const sortingConfig = this.sorting();
+            const componentMode = this.mode();
+            const isServerMode = componentMode === 'server';
+            const isInfinite = paginationConfig?.infinite === true;
             // Determine base table configuration with sorting
             const getBaseTableConfig = () => {
                 const baseConfig = {
                     data: this.rows(),
                     columns: this.tableColumns(),
                     getCoreRowModel: getCoreRowModel(),
-                    // Sorting configuration
+                    // Sorting configuration - uses top-level mode
                     ...(sortingConfig && {
                         state: {
-                            sorting: sortingConfig.mode === 'server' && sortingConfig.sortState
+                            sorting: isServerMode && sortingConfig.sortState
                                 ? sortingConfig.sortState
                                 : this.sortingState(),
                         },
                         onSortingChange: (updaterOrValue) => {
-                            const currentSort = sortingConfig.mode === 'server' && sortingConfig.sortState
+                            const currentSort = isServerMode && sortingConfig.sortState
                                 ? sortingConfig.sortState
                                 : this.sortingState();
                             const newSort = typeof updaterOrValue === 'function'
@@ -2677,12 +2810,11 @@ class NvDatatable {
                             // Always update internal state for reactivity
                             this.sortingState.set(newSort);
                             // For server-side sorting, also call the callback
-                            if (sortingConfig?.mode === 'server' &&
-                                sortingConfig.onSortingChange) {
+                            if (isServerMode && sortingConfig.onSortingChange) {
                                 sortingConfig.onSortingChange(newSort);
                             }
                         },
-                        manualSorting: sortingConfig.mode === 'server',
+                        manualSorting: isServerMode,
                         enableSorting: true,
                         enableMultiSort: sortingConfig.enableMultiSort ?? false,
                         enableSortingRemoval: sortingConfig.enableSortingRemoval ?? true,
@@ -2692,17 +2824,22 @@ class NvDatatable {
                         isMultiSortEvent: sortingConfig.enableMultiSort
                             ? () => true
                             : undefined,
-                        getSortedRowModel: sortingConfig.mode === 'client' ? getSortedRowModel() : undefined,
+                        getSortedRowModel: !isServerMode ? getSortedRowModel() : undefined,
                     }),
                 };
                 return baseConfig;
             };
-            if (!paginationConfig || paginationConfig.mode === 'infinite') {
-                // No pagination or infinite scroll - simple config
+            // Infinite scroll mode (requires server mode)
+            if (isInfinite) {
+                // No pagination row model for infinite scroll - simple config
                 return getBaseTableConfig();
             }
-            else if (paginationConfig.mode === 'client') {
-                // Client-side pagination
+            // No pagination configured
+            if (!paginationConfig) {
+                return getBaseTableConfig();
+            }
+            // Client-side pagination
+            if (!isServerMode) {
                 return {
                     ...getBaseTableConfig(),
                     getPaginationRowModel: getPaginationRowModel(),
@@ -2714,37 +2851,35 @@ class NvDatatable {
                     },
                 };
             }
-            else {
-                // Server-side pagination - manual pagination with reactive state
-                const baseConfig = getBaseTableConfig();
-                const pageSize = this.paginationState().pageSize;
-                return {
-                    ...baseConfig,
-                    manualPagination: true,
-                    pageCount: paginationConfig.totalPageCount !== undefined
-                        ? paginationConfig.totalPageCount
-                        : paginationConfig.totalRowCount !== undefined
-                            ? Math.ceil(paginationConfig.totalRowCount / pageSize)
-                            : -1,
-                    state: {
-                        pagination: this.paginationState(),
-                        ...(baseConfig.state && { sorting: baseConfig.state.sorting }),
-                    },
-                    onPaginationChange: (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,
-                            });
-                        }
-                    },
-                };
-            }
+            // Server-side pagination - manual pagination with reactive state
+            const baseConfig = getBaseTableConfig();
+            const pageSize = this.paginationState().pageSize;
+            return {
+                ...baseConfig,
+                manualPagination: true,
+                pageCount: paginationConfig.totalPageCount !== undefined
+                    ? paginationConfig.totalPageCount
+                    : paginationConfig.totalRowCount !== undefined
+                        ? Math.ceil(paginationConfig.totalRowCount / pageSize)
+                        : -1,
+                state: {
+                    pagination: this.paginationState(),
+                    ...(baseConfig.state && { sorting: baseConfig.state.sorting }),
+                },
+                onPaginationChange: (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,
+                        });
+                    }
+                },
+            };
         });
         /** Build pagination API for template */
         this.paginationAPI = computed(() => {
@@ -2752,10 +2887,13 @@ class NvDatatable {
             if (!paginationConfig) {
                 return null;
             }
+            const componentMode = this.mode();
+            const isServerMode = componentMode === 'server';
+            const isInfinite = paginationConfig.infinite === true;
             const table = this.table();
             const tablePaginationState = table.getState().pagination;
             const pageCount = table.getPageCount();
-            const rowCount = paginationConfig.mode === 'server'
+            const rowCount = isServerMode
                 ? paginationConfig.totalRowCount || this.rows().length
                 : this.rows().length;
             return {
@@ -2771,25 +2909,31 @@ class NvDatatable {
                 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,
+                isLoading: isInfinite ? paginationConfig.isLoading : undefined,
+                hasMore: isInfinite ? paginationConfig.hasMore : undefined,
             };
         });
+        // Validate infinite scroll requires server mode
+        effect(() => {
+            const paginationConfig = this.pagination();
+            const componentMode = this.mode();
+            if (paginationConfig?.infinite === true && componentMode !== 'server') {
+                console.warn('[NvDatatable] pagination.infinite=true requires mode="server". ' +
+                    'Infinite scroll relies on server-side data loading.');
+            }
+        });
         // Set up intersection observer for infinite scroll
         effect(() => {
             const paginationConfig = this.pagination();
             const rows = this.rows(); // Track rows changes
+            const isInfinite = paginationConfig?.infinite === true;
             // 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) {
+            if (!isInfinite || rows.length === 0) {
                 return;
             }
             // Use setTimeout to ensure DOM is updated
@@ -2804,7 +2948,6 @@ class NvDatatable {
                 this.observer = new IntersectionObserver((entries) => {
                     const entry = entries[0];
                     if (entry.isIntersecting &&
-                        paginationConfig.mode === 'infinite' &&
                         paginationConfig.hasMore &&
                         !paginationConfig.isLoading &&
                         paginationConfig.onLoadMore) {
@@ -2837,7 +2980,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 }, 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: `
+    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 }, mode: { classPropertyName: "mode", publicName: "mode", 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">
@@ -2908,12 +3051,27 @@ class NvDatatable {
 
     <!-- Render pagination if configured -->
     @if (paginationAPI()) {
-    <ng-container
-      *ngTemplateOutlet="
-        paginationTemplate || null;
-        context: { $implicit: paginationAPI() }
-      "
-    ></ng-container>
+      @if (paginationTemplate) {
+        <ng-container
+          *ngTemplateOutlet="
+            paginationTemplate;
+            context: { $implicit: paginationAPI() }
+          "
+        ></ng-container>
+      } @else if (mode() === 'client' && pagination() && !pagination()?.infinite) {
+        <!-- Default pagination with nv-paginationtable (client mode only) -->
+        <nv-paginationtable
+          [pageIndex]="paginationAPI()!.pageIndex"
+          [pageSize]="paginationAPI()!.pageSize"
+          [pageCount]="paginationAPI()!.pageCount"
+          [rowCount]="paginationAPI()!.rowCount"
+          [attr.label-page]="pagination()?.labels?.page || null"
+          [attr.label-total]="pagination()?.labels?.total || null"
+          [attr.label-page-size-option]="pagination()?.labels?.pageSizeOption || null"
+          (pageIndexChanged)="paginationAPI()!.setPageIndex($event.detail)"
+          (pageSizeChanged)="paginationAPI()!.setPageSize($event.detail)"
+        ></nv-paginationtable>
+      }
     }
   `, 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"] }] }); }
 }
@@ -2995,12 +3153,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
 
     <!-- Render pagination if configured -->
     @if (paginationAPI()) {
-    <ng-container
-      *ngTemplateOutlet="
-        paginationTemplate || null;
-        context: { $implicit: paginationAPI() }
-      "
-    ></ng-container>
+      @if (paginationTemplate) {
+        <ng-container
+          *ngTemplateOutlet="
+            paginationTemplate;
+            context: { $implicit: paginationAPI() }
+          "
+        ></ng-container>
+      } @else if (mode() === 'client' && pagination() && !pagination()?.infinite) {
+        <!-- Default pagination with nv-paginationtable (client mode only) -->
+        <nv-paginationtable
+          [pageIndex]="paginationAPI()!.pageIndex"
+          [pageSize]="paginationAPI()!.pageSize"
+          [pageCount]="paginationAPI()!.pageCount"
+          [rowCount]="paginationAPI()!.rowCount"
+          [attr.label-page]="pagination()?.labels?.page || null"
+          [attr.label-total]="pagination()?.labels?.total || null"
+          [attr.label-page-size-option]="pagination()?.labels?.pageSizeOption || null"
+          (pageIndexChanged)="paginationAPI()!.setPageIndex($event.detail)"
+          (pageSizeChanged)="paginationAPI()!.setPageSize($event.detail)"
+        ></nv-paginationtable>
+      }
     }
   `,
                 }]
@@ -3251,6 +3424,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: HostListener,
                 args: ['openChanged', ['$event']]
             }] } });
+class NvDrawerValueAccessor extends ValueAccessor {
+    constructor(el) {
+        super(el);
+    }
+    handleOpenChanged(event) {
+        this.handleChangeEvent(event.target.open);
+    }
+    writeValue(value) {
+        this.el.nativeElement.open = this.lastValue = value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvDrawerValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: NvDrawerValueAccessor, isStandalone: true, selector: "nv-drawer", host: { listeners: { "openChanged": "handleOpenChanged($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: NvDrawerValueAccessor,
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvDrawerValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'nv-drawer',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: NvDrawerValueAccessor,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { handleOpenChanged: [{
+                type: HostListener,
+                args: ['openChanged', ['$event']]
+            }] } });
 class NvFieldcheckboxValueAccessor extends ValueAccessor {
     constructor(el) {
         super(el);
@@ -3741,6 +3949,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: HostListener,
                 args: ['hiddenChanged', ['$event']]
             }] } });
+class NvPaginationtableValueAccessor extends ValueAccessor {
+    constructor(el) {
+        super(el);
+    }
+    handlePageIndexChanged(event) {
+        this.handleChangeEvent(event.target.pageIndex);
+    }
+    writeValue(value) {
+        this.el.nativeElement.pageIndex = this.lastValue = value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvPaginationtableValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: NvPaginationtableValueAccessor, isStandalone: true, selector: "nv-paginationtable", host: { listeners: { "pageIndexChanged": "handlePageIndexChanged($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: NvPaginationtableValueAccessor,
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvPaginationtableValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'nv-paginationtable',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: NvPaginationtableValueAccessor,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { handlePageIndexChanged: [{
+                type: HostListener,
+                args: ['pageIndexChanged', ['$event']]
+            }] } });
 class NvPopoverValueAccessor extends ValueAccessor {
     constructor(el) {
         super(el);
@@ -3922,6 +4165,7 @@ const VALUE_ACCESSORS = [
     NvCalendarValueAccessor,
     NvDatagridValueAccessor,
     NvDialogValueAccessor,
+    NvDrawerValueAccessor,
     NvFieldcheckboxValueAccessor,
     NvFielddateValueAccessor,
     NvFielddaterangeValueAccessor,
@@ -3936,6 +4180,7 @@ const VALUE_ACCESSORS = [
     NvFieldtextareaValueAccessor,
     NvFieldtimeValueAccessor,
     NvNotificationValueAccessor,
+    NvPaginationtableValueAccessor,
     NvPopoverValueAccessor,
     NvSidebarValueAccessor,
     NvSplitValueAccessor,
@@ -3945,7 +4190,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, NvNotificationBullet, NvNotificationcontainer, NvPopover, NvRow, NvSidebar, NvSidebarcontent, NvSidebardivider, NvSidebarfooter, NvSidebargroup, NvSidebarheader, NvSidebarlogo, NvSidebarnavitem, NvSidebarnavsubitem, 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, NvNotificationBullet, NvNotificationcontainer, NvPopover, NvRow, NvSidebar, NvSidebarcontent, NvSidebardivider, NvSidebarfooter, NvSidebargroup, NvSidebarheader, NvSidebarlogo, NvSidebarnavitem, NvSidebarnavsubitem, NvSplit, NvStack, NvTable, NvTableheader, 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, NvDrawer, NvDrawerfooter, NvDrawerheader, NvFieldcheckbox, NvFielddate, NvFielddaterange, NvFielddropdown, NvFielddropdownitem, NvFielddropdownitemcheck, NvFieldmultiselect, NvFieldnumber, NvFieldpassword, NvFieldradio, NvFieldselect, NvFieldslider, NvFieldtext, NvFieldtextarea, NvFieldtime, NvIcon, NvIconbutton, NvLoader, NvMenu, NvMenuitem, NvNotification, NvNotificationBullet, NvNotificationcontainer, NvPaginationtable, NvPopover, NvRow, NvSidebar, NvSidebarcontent, NvSidebardivider, NvSidebarfooter, NvSidebargroup, NvSidebarheader, NvSidebarlogo, NvSidebarnavitem, NvSidebarnavsubitem, 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, NvDrawer, NvDrawerfooter, NvDrawerheader, NvFieldcheckbox, NvFielddate, NvFielddaterange, NvFielddropdown, NvFielddropdownitem, NvFielddropdownitemcheck, NvFieldmultiselect, NvFieldnumber, NvFieldpassword, NvFieldradio, NvFieldselect, NvFieldslider, NvFieldtext, NvFieldtextarea, NvFieldtime, NvIcon, NvIconbutton, NvLoader, NvMenu, NvMenuitem, NvNotification, NvNotificationBullet, NvNotificationcontainer, NvPaginationtable, NvPopover, NvRow, NvSidebar, NvSidebarcontent, NvSidebardivider, NvSidebarfooter, NvSidebargroup, NvSidebarheader, NvSidebarlogo, NvSidebarnavitem, NvSidebarnavsubitem, 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: [{
@@ -3958,7 +4203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
         }] });
 class NovaComponentsValueAccessorModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NovaComponentsValueAccessorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: NovaComponentsValueAccessorModule, imports: [NvAccordionValueAccessor, NvAlertValueAccessor, NvCalendarValueAccessor, NvDatagridValueAccessor, NvDialogValueAccessor, NvFieldcheckboxValueAccessor, NvFielddateValueAccessor, NvFielddaterangeValueAccessor, NvFielddropdownValueAccessor, NvFieldmultiselectValueAccessor, NvFieldnumberValueAccessor, NvFieldpasswordValueAccessor, NvFieldradioValueAccessor, NvFieldselectValueAccessor, NvFieldsliderValueAccessor, NvFieldtextValueAccessor, NvFieldtextareaValueAccessor, NvFieldtimeValueAccessor, NvNotificationValueAccessor, NvPopoverValueAccessor, NvSidebarValueAccessor, NvSplitValueAccessor, NvToggleValueAccessor, NvTogglebuttongroupValueAccessor], exports: [NvAccordionValueAccessor, NvAlertValueAccessor, NvCalendarValueAccessor, NvDatagridValueAccessor, NvDialogValueAccessor, NvFieldcheckboxValueAccessor, NvFielddateValueAccessor, NvFielddaterangeValueAccessor, NvFielddropdownValueAccessor, NvFieldmultiselectValueAccessor, NvFieldnumberValueAccessor, NvFieldpasswordValueAccessor, NvFieldradioValueAccessor, NvFieldselectValueAccessor, NvFieldsliderValueAccessor, NvFieldtextValueAccessor, NvFieldtextareaValueAccessor, NvFieldtimeValueAccessor, NvNotificationValueAccessor, NvPopoverValueAccessor, NvSidebarValueAccessor, NvSplitValueAccessor, NvToggleValueAccessor, NvTogglebuttongroupValueAccessor] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: NovaComponentsValueAccessorModule, imports: [NvAccordionValueAccessor, NvAlertValueAccessor, NvCalendarValueAccessor, NvDatagridValueAccessor, NvDialogValueAccessor, NvDrawerValueAccessor, NvFieldcheckboxValueAccessor, NvFielddateValueAccessor, NvFielddaterangeValueAccessor, NvFielddropdownValueAccessor, NvFieldmultiselectValueAccessor, NvFieldnumberValueAccessor, NvFieldpasswordValueAccessor, NvFieldradioValueAccessor, NvFieldselectValueAccessor, NvFieldsliderValueAccessor, NvFieldtextValueAccessor, NvFieldtextareaValueAccessor, NvFieldtimeValueAccessor, NvNotificationValueAccessor, NvPaginationtableValueAccessor, NvPopoverValueAccessor, NvSidebarValueAccessor, NvSplitValueAccessor, NvToggleValueAccessor, NvTogglebuttongroupValueAccessor], exports: [NvAccordionValueAccessor, NvAlertValueAccessor, NvCalendarValueAccessor, NvDatagridValueAccessor, NvDialogValueAccessor, NvDrawerValueAccessor, NvFieldcheckboxValueAccessor, NvFielddateValueAccessor, NvFielddaterangeValueAccessor, NvFielddropdownValueAccessor, NvFieldmultiselectValueAccessor, NvFieldnumberValueAccessor, NvFieldpasswordValueAccessor, NvFieldradioValueAccessor, NvFieldselectValueAccessor, NvFieldsliderValueAccessor, NvFieldtextValueAccessor, NvFieldtextareaValueAccessor, NvFieldtimeValueAccessor, NvNotificationValueAccessor, NvPaginationtableValueAccessor, NvPopoverValueAccessor, NvSidebarValueAccessor, NvSplitValueAccessor, NvToggleValueAccessor, NvTogglebuttongroupValueAccessor] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NovaComponentsValueAccessorModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NovaComponentsValueAccessorModule, decorators: [{
@@ -4318,5 +4563,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, NvNotificationBullet, NvNotificationValueAccessor, NvNotificationcontainer, NvPopover, NvPopoverValueAccessor, NvRow, NvSidebar, NvSidebarValueAccessor, NvSidebarcontent, NvSidebardivider, NvSidebarfooter, NvSidebargroup, NvSidebarheader, NvSidebarlogo, NvSidebarnavitem, NvSidebarnavsubitem, NvSplit, NvSplitValueAccessor, NvStack, NvTable, NvTableheader, NvToggle, NvToggleValueAccessor, NvTogglebutton, NvTogglebuttongroup, NvTogglebuttongroupValueAccessor, NvTooltip, VALUE_ACCESSORS, makeColumn, 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, NvDrawer, NvDrawerValueAccessor, NvDrawerfooter, NvDrawerheader, 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, NvNotificationBullet, NvNotificationValueAccessor, NvNotificationcontainer, NvPaginationtable, NvPaginationtableValueAccessor, NvPopover, NvPopoverValueAccessor, NvRow, NvSidebar, NvSidebarValueAccessor, NvSidebarcontent, NvSidebardivider, NvSidebarfooter, NvSidebargroup, NvSidebarheader, NvSidebarlogo, NvSidebarnavitem, NvSidebarnavsubitem, NvSplit, NvSplitValueAccessor, NvStack, NvTable, NvTableheader, NvToggle, NvToggleValueAccessor, NvTogglebutton, NvTogglebuttongroup, NvTogglebuttongroupValueAccessor, NvTooltip, VALUE_ACCESSORS, makeColumn, flexRenderComponent as nvDatatableRenderComponent };
 //# sourceMappingURL=nova-components.mjs.map