@angular-bootstrap/ngbootstrap 0.0.9 → 0.0.11

package/README.md

@@ -39,6 +39,7 @@ All components are standalone, so you import them directly into your feature com
 ```ts
 import { Component } from '@angular/core';
 import { Datagrid } from '@angular-bootstrap/ngbootstrap/datagrid';
+import { NgbDatagridDefaultEditService } from '@angular-bootstrap/ngbootstrap/datagrid';
 
 interface User {
   id: number;
@@ -54,6 +55,8 @@ interface User {
     <ngb-datagrid
       [columns]="columns"
       [data]="rows"
+      [trackBy]="trackById"
+      [editService]="editService"
       [enableSorting]="true"
       [enableFiltering]="true"
       [enablePagination]="true"
@@ -63,6 +66,8 @@ interface User {
   `,
 })
 export class UsersComponent {
+  trackById = (_: number, row: User) => row.id;
+  editService = new NgbDatagridDefaultEditService<User>();
   columns = [
     { field: 'id', header: 'ID', sortable: true },
     { field: 'name', header: 'Name', sortable: true, filterable: true },
@@ -86,6 +91,8 @@ Key datagrid capabilities:
 - Column/global filtering (`enableFiltering`, `enableGlobalFilter`, `filtersChange`).
 - Pagination (`enablePagination`, `pageSize`, `pageChange`).
 - Inline add/edit/delete (`enableAdd`, `enableEdit`, `enableDelete`, `rowAdd`, `rowSave`, `rowDelete`).
+- Stable row identity via `trackBy` (defaults to index).
+- Pluggable editing logic via `editService` (implement `NgbDatagridEditService`).
 - Export to PDF/Excel via `exportOptions`.
 
 Export requires optional peer dependencies. Install only if you use export:

package/fesm2022/angular-bootstrap-ngbootstrap.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, Directive, EventEmitter, Output, ChangeDetectionStrategy, Component, inject, Injectable, TemplateRef, QueryList, ContentChildren, ContentChild, InjectionToken, signal, Optional, Inject, ElementRef, HostListener, HostBinding, ViewChild, forwardRef, ViewChildren } from '@angular/core';
+import { Input, Directive, EventEmitter, Output, ChangeDetectionStrategy, Component, inject, Injectable, signal, TemplateRef, QueryList, ContentChildren, ContentChild, InjectionToken, Optional, Inject, ElementRef, HostListener, HostBinding, ViewChild, forwardRef, ViewChildren } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -198,6 +198,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+const clone = (value) => {
+    try {
+        // Prefer structuredClone when available.
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+        return globalThis.structuredClone ? globalThis.structuredClone(value) : JSON.parse(JSON.stringify(value));
+    }
+    catch {
+        return value;
+    }
+};
+const shallowEqual = (a, b) => {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return false;
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length)
+        return false;
+    for (const key of aKeys) {
+        if (a[key] !== b[key])
+            return false;
+    }
+    return true;
+};
+class NgbDatagridDefaultEditService {
+    originals = signal([], ...(ngDevMode ? [{ debugName: "originals" }] : []));
+    newRows = signal([], ...(ngDevMode ? [{ debugName: "newRows" }] : []));
+    create(data, newRow, _rowIndex, rowId) {
+        this.newRows.update((ids) => (ids.some((id) => Object.is(id, rowId)) ? ids : [...ids, rowId]));
+        // Baseline for a new row is itself until saved/cancelled.
+        this.originals.update((items) => {
+            if (items.some((it) => Object.is(it.id, rowId)))
+                return items;
+            return [...items, { id: rowId, row: clone(newRow) }];
+        });
+        return [...data, newRow];
+    }
+    update(data, updatedRow, rowIndex, rowId) {
+        // Snapshot original the first time we see this rowId.
+        const hasBaseline = this.originals().some((it) => Object.is(it.id, rowId));
+        if (!hasBaseline) {
+            const current = data[rowIndex];
+            if (current != null) {
+                this.originals.update((items) => [...items, { id: rowId, row: clone(current) }]);
+            }
+        }
+        return this.replaceRow(data, updatedRow, rowIndex);
+    }
+    remove(data, rowIndex, rowId) {
+        this.newRows.update((ids) => ids.filter((id) => !Object.is(id, rowId)));
+        this.originals.update((items) => items.filter((it) => !Object.is(it.id, rowId)));
+        return this.removeRow(data, rowIndex);
+    }
+    assignValues(row, values) {
+        return { ...row, ...values };
+    }
+    isNew(rowId) {
+        return this.newRows().some((id) => Object.is(id, rowId));
+    }
+    hasChanges(rowId, currentRow) {
+        const baseline = this.originals().find((it) => Object.is(it.id, rowId))?.row;
+        if (!baseline)
+            return false;
+        return !shallowEqual(baseline, currentRow);
+    }
+    saveChanges(data, _rowIndex, rowId, currentRow) {
+        this.newRows.update((ids) => ids.filter((id) => !Object.is(id, rowId)));
+        // Once saved, clear baseline tracking (no longer "dirty").
+        this.originals.update((items) => items.filter((it) => !Object.is(it.id, rowId)));
+        // Data is already updated by `create` or `update` at this point.
+        return data.slice();
+    }
+    cancelChanges(data, rowIndex, rowId) {
+        if (this.newRows().some((id) => Object.is(id, rowId))) {
+            this.newRows.update((ids) => ids.filter((id) => !Object.is(id, rowId)));
+            this.originals.update((items) => items.filter((it) => !Object.is(it.id, rowId)));
+            return this.removeRow(data, rowIndex);
+        }
+        const baseline = this.originals().find((it) => Object.is(it.id, rowId))?.row;
+        this.originals.update((items) => items.filter((it) => !Object.is(it.id, rowId)));
+        if (!baseline)
+            return data.slice();
+        return this.replaceRow(data, baseline, rowIndex);
+    }
+    replaceRow(data, updatedRow, rowIndex) {
+        if (rowIndex < 0 || rowIndex >= data.length)
+            return data.slice();
+        const copy = data.slice();
+        copy[rowIndex] = updatedRow;
+        return copy;
+    }
+    removeRow(data, rowIndex) {
+        if (rowIndex < 0 || rowIndex >= data.length)
+            return data.slice();
+        return data.filter((_, i) => i !== rowIndex);
+    }
+}
+
 class JsPdfAdapter {
     async export({ fileName, columns, rows, options }) {
         const { jsPDF } = await import('jspdf');
@@ -232,7 +331,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             args: [{ selector: '[ngbExportButton]' }]
         }] });
 
-const EMAIL_RX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const MAX_EMAIL_LENGTH = 254;
+const isReasonableEmail = (value) => {
+    if (value == null)
+        return false;
+    const str = String(value);
+    if (!str || str.length > MAX_EMAIL_LENGTH)
+        return false;
+    // Basic, linear-time check: one "@", non-empty local part, and a domain with at least one ".".
+    const at = str.indexOf('@');
+    if (at <= 0)
+        return false;
+    if (str.indexOf('@', at + 1) !== -1)
+        return false;
+    if (at === str.length - 1)
+        return false;
+    if (/\s/.test(str))
+        return false;
+    const dot = str.lastIndexOf('.');
+    if (dot <= at + 1)
+        return false;
+    if (dot === str.length - 1)
+        return false;
+    return true;
+};
 class Datagrid {
     /** Column definitions to render */
     columns = [];
@@ -273,6 +395,8 @@ class Datagrid {
     };
     theme = 'bootstrap';
     responsive = false;
+    trackBy;
+    editService;
     // Data hooks for export
     dataProviderAll; // used when pages='all'
     dataProviderSelection; // used when pages='selection'
@@ -310,31 +434,14 @@ class Datagrid {
     saveAttemptedEdit = false;
     addForm = this.fb.group({});
     saveAttemptedNew = false;
+    addDraftRowId = null;
+    defaultEditService = new NgbDatagridDefaultEditService();
     norm(v) {
         return (v ?? '').toString().toLowerCase().trim();
     }
     keyOf(col) {
         return col.field;
     }
-    passesRowFilters(row) {
-        // per-column
-        for (const col of this.columns) {
-            if (!col.filterable)
-                continue;
-            const key = col.field;
-            const q = this.norm(this.filters[key]);
-            if (!q)
-                continue;
-            const cell = this.norm(row[col.field]);
-            if (!cell.includes(q))
-                return false;
-        }
-        // global
-        const g = this.norm(this.globalFilter);
-        if (!g)
-            return true;
-        return this.columns.some(c => this.norm(row[c.field]).includes(g));
-    }
     getDefaults() {
         return typeof this.newRowDefaults === 'function'
             ? this.newRowDefaults() ?? {}
@@ -388,16 +495,6 @@ class Datagrid {
         }
         return this.fb.group(group);
     }
-    rowIsValidAgainst(targetErrors) {
-        for (const col of this.columns) {
-            if (col.editable === false)
-                continue;
-            const key = this.keyOf(col);
-            if (targetErrors[key])
-                return false;
-        }
-        return true;
-    }
     strictEmailValidator() {
         // simple, pragmatic: local@domain.tld (tld >= 2)
         const rx = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
@@ -405,6 +502,8 @@ class Datagrid {
             const v = c.value;
             if (v === null || v === undefined || v === '')
                 return null; // let "required" handle empties
+            if (`${v}`.length > MAX_EMAIL_LENGTH)
+                return { email: true };
             return rx.test(String(v)) ? null : { email: true };
         };
     }
@@ -438,18 +537,6 @@ class Datagrid {
             return true;
         });
     }
-    compare(a, b) {
-        if (a == null && b == null)
-            return 0;
-        if (a == null)
-            return -1;
-        if (b == null)
-            return 1;
-        if (typeof a === 'string' && typeof b === 'string') {
-            return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
-        }
-        return a < b ? -1 : a > b ? 1 : 0;
-    }
     get sorted() {
         if (!this.enableSorting || !this.sort.active || !this.sort.direction)
             return this.filtered;
@@ -611,6 +698,12 @@ class Datagrid {
         if (ch['columns'])
             this.rebuildFilterForm();
     }
+    getRowId(rowIndex, row) {
+        return this.trackBy ? this.trackBy(rowIndex, row) : rowIndex;
+    }
+    getEditService() {
+        return this.editService ?? this.defaultEditService;
+    }
     startAdd() {
         if (!this.enableAdd || this.addingNew)
             return;
@@ -619,6 +712,11 @@ class Datagrid {
         this.addingNew = true;
         this.addForm = this.buildFormFromRow(); // defaults
         this.saveAttemptedNew = false;
+        // Register a draft row with the edit service so implementations can track "new" state.
+        const service = this.getEditService();
+        const draft = service.assignValues({}, this.addForm.value);
+        this.addDraftRowId = Symbol('ngb-datagrid-new-row');
+        service.create(this.data ?? [], draft, this.data.length, this.addDraftRowId);
     }
     saveAdd() {
         if (!this.addingNew || !this.addForm)
@@ -628,18 +726,28 @@ class Datagrid {
         this.addForm.updateValueAndValidity();
         if (this.addForm.invalid)
             return;
-        const newRow = { ...this.addForm.value };
+        const service = this.getEditService();
+        const newRow = service.assignValues({}, this.addForm.value);
+        const rowIndex = this.data.length;
+        const rowId = this.addDraftRowId ?? this.getRowId(rowIndex, newRow);
+        service.create(this.data ?? [], newRow, rowIndex, rowId);
+        service.saveChanges(this.data ?? [], rowIndex, rowId, newRow);
         this.rowAdd.emit({ newRow });
         this.addingNew = false;
         this.addForm = this.fb.group({});
         ;
         this.saveAttemptedNew = false;
+        this.addDraftRowId = null;
     }
     cancelAdd() {
+        if (this.addDraftRowId != null) {
+            this.getEditService().cancelChanges(this.data ?? [], this.data.length, this.addDraftRowId);
+        }
         this.addingNew = false;
         this.addForm = this.fb.group({});
         ;
         this.saveAttemptedNew = false;
+        this.addDraftRowId = null;
     }
     startEdit(i) {
         if (!this.enableEdit)
@@ -650,6 +758,9 @@ class Datagrid {
         this.editForm = this.buildFormFromRow(this.paged[i]);
         this.saveAttemptedEdit = false;
         const di = this.data.indexOf(row);
+        const rowId = this.getRowId(di, this.data[di]);
+        // Start tracking baseline for the row (service can snapshot original state).
+        this.getEditService().update(this.data ?? [], this.data[di], di, rowId);
         this.rowEdit.emit({ row: this.data[di], index: di });
     }
     saveEdit(i) {
@@ -662,7 +773,11 @@ class Datagrid {
             return;
         const di = this.data.indexOf(this.paged[i]);
         const original = this.data[di];
-        const updated = { ...original, ...this.editForm.value };
+        const rowId = this.getRowId(di, original);
+        const service = this.getEditService();
+        const updated = service.assignValues(original, this.editForm.value);
+        service.update(this.data ?? [], updated, di, rowId);
+        service.saveChanges(this.data ?? [], di, rowId, updated);
         this.rowSave.emit({ original, updated, index: di });
         this.editingIndex = null;
         this.editForm = this.fb.group({});
@@ -670,6 +785,8 @@ class Datagrid {
     }
     cancelEdit(i) {
         const di = this.data.indexOf(this.paged[i]);
+        const rowId = this.getRowId(di, this.data[di]);
+        this.getEditService().cancelChanges(this.data ?? [], di, rowId);
         this.rowCancel.emit({ row: this.data[di], index: di });
         this.editingIndex = null;
         this.editForm = this.fb.group({}); // empty group
@@ -677,6 +794,10 @@ class Datagrid {
     }
     // For the "Add row" draft
     onNewDraftChange(col) {
+        if (this.draftNew) {
+            const key = this.keyOf(col);
+            this.draftNew = this.getEditService().assignValues(this.draftNew, { [key]: this.draftNew[key] });
+        }
         this.validateInto(col, this.draftNew, this.errorsNew);
     }
     validateInto(col, targetDraft, targetErrors) {
@@ -692,8 +813,7 @@ class Datagrid {
                 err = 'Required';
         }
         // type checks
-        const EMAIL_RX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-        if (!err && col.type === 'email' && val && !EMAIL_RX.test(String(val)))
+        if (!err && col.type === 'email' && val && !isReasonableEmail(val))
             err = 'Invalid email';
         if (!err && col.type === 'number' && val !== '' && val != null && Number.isNaN(Number(val)))
             err = 'Invalid number';
@@ -710,10 +830,17 @@ class Datagrid {
         if (!this.enableDelete)
             return;
         const di = this.dataIndexFromPaged(i);
-        this.rowDelete.emit({ row: this.data[di], index: di });
+        const row = this.data[di];
+        const rowId = this.getRowId(di, row);
+        this.getEditService().remove(this.data ?? [], di, rowId);
+        this.rowDelete.emit({ row, index: di });
     }
     // (optional) better *ngFor performance
-    trackRow = (_, row) => row;
+    trackRow = (index, row) => {
+        const di = this.data.indexOf(row);
+        const rowIndex = di >= 0 ? di : index;
+        return this.trackBy ? this.trackBy(rowIndex, row) : rowIndex;
+    };
     toggleSort(field) {
         if (!this.enableSorting)
             return;
@@ -794,7 +921,7 @@ class Datagrid {
         return r === true || (!!r && r.enabled === true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Datagrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: Datagrid, isStandalone: true, selector: "ngb-datagrid", inputs: { columns: "columns", data: "data", enableSorting: "enableSorting", enableFiltering: "enableFiltering", enableGlobalFilter: "enableGlobalFilter", enablePagination: "enablePagination", enableEdit: "enableEdit", enableDelete: "enableDelete", pageSizeOptions: "pageSizeOptions", enableAdd: "enableAdd", addButtonAriaLabel: "addButtonAriaLabel", addButtonText: "addButtonText", globalFilterAriaLabel: "globalFilterAriaLabel", expandRowAriaLabel: "expandRowAriaLabel", collapseRowAriaLabel: "collapseRowAriaLabel", exportPdfAriaLabel: "exportPdfAriaLabel", exportExcelAriaLabel: "exportExcelAriaLabel", newRowDefaults: "newRowDefaults", strictEmail: "strictEmail", editOnRowClick: "editOnRowClick", singleExpand: "singleExpand", exportOptions: "exportOptions", theme: "theme", responsive: "responsive", dataProviderAll: "dataProviderAll", dataProviderSelection: "dataProviderSelection", pageSize: "pageSize" }, outputs: { rowAdd: "rowAdd", rowEdit: "rowEdit", rowSave: "rowSave", rowCancel: "rowCancel", rowDelete: "rowDelete", sortChange: "sortChange", filtersChange: "filtersChange", pageChange: "pageChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: Datagrid, isStandalone: true, selector: "ngb-datagrid", inputs: { columns: "columns", data: "data", enableSorting: "enableSorting", enableFiltering: "enableFiltering", enableGlobalFilter: "enableGlobalFilter", enablePagination: "enablePagination", enableEdit: "enableEdit", enableDelete: "enableDelete", pageSizeOptions: "pageSizeOptions", enableAdd: "enableAdd", addButtonAriaLabel: "addButtonAriaLabel", addButtonText: "addButtonText", globalFilterAriaLabel: "globalFilterAriaLabel", expandRowAriaLabel: "expandRowAriaLabel", collapseRowAriaLabel: "collapseRowAriaLabel", exportPdfAriaLabel: "exportPdfAriaLabel", exportExcelAriaLabel: "exportExcelAriaLabel", newRowDefaults: "newRowDefaults", strictEmail: "strictEmail", editOnRowClick: "editOnRowClick", singleExpand: "singleExpand", exportOptions: "exportOptions", theme: "theme", responsive: "responsive", trackBy: "trackBy", editService: "editService", dataProviderAll: "dataProviderAll", dataProviderSelection: "dataProviderSelection", pageSize: "pageSize" }, outputs: { rowAdd: "rowAdd", rowEdit: "rowEdit", rowSave: "rowSave", rowCancel: "rowCancel", rowDelete: "rowDelete", sortChange: "sortChange", filtersChange: "filtersChange", pageChange: "pageChange" }, providers: [
             { provide: PdfExportAdapter, useClass: JsPdfAdapter },
             { provide: ExcelExportAdapter, useClass: XlsxAdapter }
         ], queries: [{ propertyName: "exportButtonDir", first: true, predicate: ExportButtonDirective, descendants: true }, { propertyName: "rowDetailTpl", first: true, predicate: NgbRowDetailTemplate, descendants: true }, { propertyName: "cellTplQ", predicate: NgbCellTemplate }, { propertyName: "editTplQ", predicate: NgbEditorTemplate }, { propertyName: "filterTplQ", predicate: NgbFilterTemplate }, { propertyName: "globalTplQ", predicate: NgbGlobalFilterTemplate }], usesOnChanges: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<div class=\"ngb-grid\" [attr.data-theme]=\"theme\" [class.ngb-responsive]=\"isResponsiveEnabled()\">\n  <!-- Export toolbar -->\n  <div class=\"d-flex justify-content-end mb-2\" *ngIf=\"exportOptions?.enabled\">\n    <ng-container *ngIf=\"exportButtonTpl; else defaultExportBtns\"\n                  [ngTemplateOutlet]=\"exportButtonTpl\"\n                  [ngTemplateOutletContext]=\"{ $implicit: triggerExport }\">\n    </ng-container>\n\n    <ng-template #defaultExportBtns>\n      <button type=\"button\"\n              class=\"btn btn-sm btn-outline-secondary me-2\"\n              *ngIf=\"exportOptions.type === 'pdf' || exportOptions.type === 'both'\"\n              [disabled]=\"exporting\"\n              (click)=\"export('pdf')\"\n              [attr.aria-label]=\"exportAriaLabel('pdf')\">\n        Export to PDF\n      </button>\n      <button type=\"button\"\n              class=\"btn btn-sm btn-outline-secondary\"\n              *ngIf=\"exportOptions.type === 'excel' || exportOptions.type === 'both'\"\n              [disabled]=\"exporting\"\n              (click)=\"export('excel')\"\n              [attr.aria-label]=\"exportAriaLabel('excel')\">\n        Export to Excel\n      </button>\n    </ng-template>\n  </div>\n  <div class=\"d-flex justify-content-end mb-2\" *ngIf=\"enableAdd\">\n    <button\n      type=\"button\"\n      class=\"btn btn-sm btn-primary\"\n      (click)=\"startAdd()\"\n      [disabled]=\"addingNew\"\n      [attr.aria-label]=\"addButtonAriaLabel || addButtonText\"\n    >\n      {{ addButtonText }}\n    </button>\n  </div>\n  <!-- Global filter -->\n  <div class=\"mb-2\" *ngIf=\"enableFiltering && enableGlobalFilter\">\n    <ng-container\n      *ngIf=\"globalTpl; else defaultGlobalFilter\"\n      [ngTemplateOutlet]=\"globalTpl?.template\"\n      [ngTemplateOutletContext]=\"{ $implicit: globalFilterCtrl }\"\n    >\n    </ng-container>\n\n    <ng-template #defaultGlobalFilter>\n      <input\n        type=\"search\"\n        class=\"form-control form-control-sm\"\n        placeholder=\"Search all columns...\"\n        [formControl]=\"globalFilterCtrl\"\n        [attr.aria-label]=\"globalFilterAriaLabel\"\n      />\n    </ng-template>\n  </div>\n\n  <table class=\"table table-bordered\"\n         role=\"grid\"\n         [attr.aria-readonly]=\"(enableEdit || enableAdd) ? 'false' : 'true'\">\n    <thead class=\"thead-light\">\n      <tr>\n      <th *ngIf=\"rowDetailTpl\" style=\"width:1%\" scope=\"col\" aria-hidden=\"true\"></th>\n        <th\n          *ngFor=\"let col of columns\"\n          [attr.data-title]=\"col.header\"\n          [class.sortable]=\"enableSorting && col.sortable\"\n          scope=\"col\"\n          [attr.aria-sort]=\"enableSorting && col.sortable ? ariaSortFor(col.field) : null\"\n        >\n          <ng-container *ngIf=\"enableSorting && col.sortable; else plainHeader\">\n            <button\n              type=\"button\"\n              class=\"btn btn-link p-0 text-start w-100\"\n              (click)=\"toggleSort(col.field)\"\n              [attr.aria-label]=\"sortButtonAriaLabel(col)\"\n            >\n              <span>{{ col.header }}</span>\n              <span\n                class=\"sort-indicator\"\n                *ngIf=\"enableSorting && sort.active === col.field\"\n                aria-hidden=\"true\"\n              >\n                {{\n                  sort.direction === 'asc'\n                    ? '\u25B2'\n                    : sort.direction === 'desc'\n                    ? '\u25BC'\n                    : ''\n                }}\n              </span>\n            </button>\n          </ng-container>\n          <ng-template #plainHeader>\n            <span>{{ col.header }}</span>\n          </ng-template>\n        </th>\n        <th\n          *ngIf=\"enableEdit || enableDelete\"\n          class=\"text-center\"\n          scope=\"col\"\n          style=\"width: 1%\"\n        >\n          Actions\n        </th>\n      </tr>\n\n      <!-- Per-column filters -->\n      <tr *ngIf=\"anyFilterable\" [formGroup]=\"filterForm\">\n        <th *ngFor=\"let col of columns\" [attr.data-title]=\"col.header\">\n          <ng-container *ngIf=\"col.filterable\">\n            <ng-container *ngIf=\"filterTpls[col.field] as ft; else defaultFilter\">\n              <ng-container\n                [ngTemplateOutlet]=\"ft.template\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: filterForm.get(col.field),\n                  control: filterForm.get(col.field),\n                  col: col\n                }\"\n              >\n              </ng-container>\n            </ng-container>\n            <ng-template #defaultFilter>\n              <input\n                type=\"text\"\n                class=\"form-control form-control-sm\"\n                [formControlName]=\"col.field\"\n                [attr.aria-label]=\"columnFilterAriaLabel(col)\"\n              />\n            </ng-template>\n          </ng-container>\n        </th>\n        <th *ngIf=\"enableEdit || enableDelete\"></th>\n      </tr>\n    </thead>\n\n  <tbody>\n    <!-- ADD NEW ROW -->\n    <tr *ngIf=\"addingNew\" [formGroup]=\"addForm\">\n      <!-- blank caret cell to keep alignment when detail column is present -->\n      <td *ngIf=\"rowDetailTpl\"></td>\n\n      <td *ngFor=\"let col of columns\" [attr.data-title]=\"col.header\">\n        <ng-container [ngSwitch]=\"col.type\">\n          <!-- boolean -->\n          <div\n            *ngSwitchCase=\"'boolean'\"\n            class=\"form-check m-0\"\n            [class.is-invalid]=\"(addForm.get(col.field)?.touched || saveAttemptedNew) && addForm.get(col.field)?.invalid\">\n            <input\n              type=\"checkbox\"\n              class=\"form-check-input\"\n              [formControlName]=\"col.field\"\n              [attr.aria-label]=\"inputAriaLabel(col)\"\n              [attr.aria-invalid]=\"(addForm.get(col.field)?.touched || saveAttemptedNew) && addForm.get(col.field)?.invalid ? 'true' : null\"\n              [attr.aria-describedby]=\"(addForm.get(col.field)?.touched || saveAttemptedNew) && addForm.get(col.field)?.invalid ? 'add-error-' + col.field : null\"\n            />\n          </div>\n\n          <!-- number/email/date/text -->\n          <input\n            *ngSwitchDefault\n            class=\"form-control form-control-sm\"\n            [class.is-invalid]=\"(addForm.get(col.field)?.touched || saveAttemptedNew) && addForm.get(col.field)?.invalid\"\n            [attr.type]=\"col.type === 'number' ? 'number' :\n                        col.type === 'email'  ? 'email'  :\n                        col.type === 'date'   ? 'date'   : 'text'\"\n            [formControlName]=\"col.field\"\n            [attr.aria-label]=\"inputAriaLabel(col)\"\n            [attr.aria-invalid]=\"(addForm.get(col.field)?.touched || saveAttemptedNew) && addForm.get(col.field)?.invalid ? 'true' : null\"\n            [attr.aria-describedby]=\"(addForm.get(col.field)?.touched || saveAttemptedNew) && addForm.get(col.field)?.invalid ? 'add-error-' + col.field : null\"\n          />\n        </ng-container>\n\n        <div class=\"invalid-feedback d-block\"\n            *ngIf=\"(addForm.get(col.field)?.touched || saveAttemptedNew) && addForm.get(col.field)?.errors as e\"\n            [attr.id]=\"'add-error-' + col.field\"\n            role=\"alert\">\n          <ng-container *ngIf=\"e['required']\">Required</ng-container>\n          <ng-container *ngIf=\"e['email']\">Invalid email</ng-container>\n          <ng-container *ngIf=\"e['number']\">Invalid number</ng-container>\n          <ng-container *ngIf=\"e['date']\">Invalid date</ng-container>\n        </div>\n      </td>\n\n      <td *ngIf=\"enableEdit || enableDelete\" class=\"text-nowrap text-center\">\n        <button type=\"button\" class=\"btn btn-sm btn-success me-1\" (click)=\"saveAdd()\" [disabled]=\"addForm.invalid\">Save</button>\n        <button type=\"button\" class=\"btn btn-sm btn-secondary\" (click)=\"cancelAdd()\">Cancel</button>\n      </td>\n    </tr>\n\n    <!-- DATA ROWS + DETAIL ROWS -->\n    <ng-container *ngFor=\"let row of paged; let i = index; trackBy: trackRow\">\n\n      <!-- DATA ROW (click-to-edit supported) -->\n      <tr (click)=\"onRowClick($event, i)\" [formGroup]=\"editForm\">\n\n        <!-- caret/expander cell (left-most) -->\n        <td *ngIf=\"rowDetailTpl\" class=\"text-center align-middle\">\n            <button\n              type=\"button\"\n              class=\"expand btn btn-link p-0\"\n              (click)=\"$event.stopPropagation(); toggleExpand(i)\"\n              [attr.aria-expanded]=\"isExpanded(i)\"\n              [attr.aria-controls]=\"'dg-row-detail-' + i\"\n              [attr.aria-label]=\"isExpanded(i) ? collapseRowAriaLabel : expandRowAriaLabel\">\n              {{ isExpanded(i) ? '-' : '+' }}\n            </button>\n        </td>\n\n        <!-- DATA CELLS -->\n        <td *ngFor=\"let col of columns\" [attr.data-title]=\"col.header\">\n          <!-- EDIT MODE -->\n          <ng-container *ngIf=\"editingIndex === i && (col.editable ?? true); else readCell\">\n            <!-- editor template override -->\n            <ng-container *ngIf=\"editTpls[col.field] as et; else defaultEditor\"\n                          [ngTemplateOutlet]=\"et.template\"\n                          [ngTemplateOutletContext]=\"{\n                            $implicit: editForm.get(col.field),\n                            control: editForm.get(col.field),\n                            row: row, col: col, form: editForm, index: i, isNew: false\n                          }\">\n            </ng-container>\n\n            <!-- default editors -->\n            <ng-template #defaultEditor>\n              <ng-container [ngSwitch]=\"col.type\">\n                <div *ngSwitchCase=\"'boolean'\" class=\"form-check m-0\">\n                  <input type=\"checkbox\"\n                         class=\"form-check-input\"\n                         [formControlName]=\"col.field\"\n                         [attr.aria-label]=\"inputAriaLabel(col)\"\n                         [attr.aria-invalid]=\"(editForm?.touched || saveAttemptedEdit) && editForm?.get(col.field)?.invalid ? 'true' : null\"\n                         [attr.aria-describedby]=\"(editForm?.touched || saveAttemptedEdit) && editForm?.get(col.field)?.invalid ? 'edit-error-' + col.field : null\" />\n                </div>\n                <select *ngSwitchCase=\"'select'\"\n                        class=\"form-select form-select-sm\"\n                        [formControlName]=\"col.field\"\n                        [attr.aria-label]=\"inputAriaLabel(col)\">\n                  <option *ngFor=\"let o of col.options ?? []\" [ngValue]=\"o.value\">{{ o.label }}</option>\n                </select>\n                <input *ngSwitchDefault\n                      class=\"form-control form-control-sm\"\n                      [attr.type]=\"col.type === 'number' ? 'number' :\n                                    col.type === 'email'  ? 'email'  :\n                                    col.type === 'date'   ? 'date'   : 'text'\"\n                      [formControlName]=\"col.field\"\n                      [attr.aria-label]=\"inputAriaLabel(col)\"\n                      [attr.aria-invalid]=\"(editForm?.touched || saveAttemptedEdit) && editForm?.get(col.field)?.invalid ? 'true' : null\"\n                      [attr.aria-describedby]=\"(editForm?.touched || saveAttemptedEdit) && editForm?.get(col.field)?.invalid ? 'edit-error-' + col.field : null\" />\n              </ng-container>\n\n              <div class=\"invalid-feedback d-block\"\n                  *ngIf=\"(editForm?.touched || saveAttemptedEdit) && editForm?.get(col.field)?.errors as e\"\n                  [attr.id]=\"'edit-error-' + col.field\"\n                  role=\"alert\">\n                <span *ngIf=\"e['required']\">Required</span>\n                <span *ngIf=\"e['email']\">Invalid email</span>\n                <span *ngIf=\"e['number']\">Invalid number</span>\n                <span *ngIf=\"e['date']\">Invalid date</span>\n              </div>\n            </ng-template>\n          </ng-container>\n\n          <!-- READ MODE (with optional cell template) -->\n          <ng-template #readCell>\n            <ng-container *ngIf=\"cellTpls[col.field] as ct; else defaultCell\"\n                          [ngTemplateOutlet]=\"ct.template\"\n                          [ngTemplateOutletContext]=\"{ $implicit: row[col.field], row: row, col: col, index: i }\">\n            </ng-container>\n            <ng-template #defaultCell>\n              <ng-container [ngSwitch]=\"col.type\">\n                <span *ngSwitchCase=\"'boolean'\">{{ row[col.field] ? 'Yes' : 'No' }}</span>\n                <span *ngSwitchDefault>{{ row[col.field] }}</span>\n              </ng-container>\n            </ng-template>\n          </ng-template>\n        </td>\n\n        <!-- ACTIONS -->\n        <td *ngIf=\"enableEdit || enableDelete\" class=\"text-nowrap text-center\">\n          <ng-container *ngIf=\"editingIndex !== i; else editBtns\">\n            <button type=\"button\" *ngIf=\"enableEdit\" class=\"btn btn-sm btn-outline-primary me-1 no-edit-trigger\" (click)=\"startEdit(i)\">Edit</button>\n            <button type=\"button\" *ngIf=\"enableDelete\" class=\"btn btn-sm btn-outline-danger no-edit-trigger\" (click)=\"deleteRow(i)\">Delete</button>\n          </ng-container>\n          <ng-template #editBtns>\n            <button type=\"button\" class=\"btn btn-sm btn-success me-1\" (click)=\"saveEdit(i)\" [disabled]=\"editForm.invalid\">Save</button>\n            <button type=\"button\" class=\"btn btn-sm btn-secondary\" (click)=\"cancelEdit(i)\">Cancel</button>\n          </ng-template>\n        </td>\n      </tr>\n\n      <!-- DETAIL ROW (spans all columns) -->\n      <tr *ngIf=\"rowDetailTpl && isExpanded(i)\" [attr.id]=\"'dg-row-detail-' + i\">\n        <td [attr.colspan]=\"detailColspan\" role=\"region\">\n          <ng-container [ngTemplateOutlet]=\"rowDetailTpl.template\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\">\n          </ng-container>\n        </td>\n      </tr>\n\n    </ng-container>\n  </tbody>\n\n  </table>\n\n  <!-- Footer (left = count, center = pagination, right = page size) -->\n  <div *ngIf=\"enablePagination\" class=\"d-flex align-items-center justify-content-between mt-2\">\n    <!-- left: count -->\n    <div class=\"small text-muted\" aria-live=\"polite\">\n        {{ startIndex }} - {{ endIndex }} of {{ sorted.length }}\n\n    </div>\n\n    <!-- center: pager -->\n    <div class=\"flex-grow-1 d-flex justify-content-center\">\n      <ngb-pagination\n        [page]=\"page\"\n        [pageSize]=\"pageSize\"\n        [collectionSize]=\"sorted.length\"\n        [maxSize]=\"5\"\n        (pageChange)=\"onPage($event)\">\n      </ngb-pagination>\n    </div>\n\n    <!-- right: rows per page -->\n    <div class=\"d-flex align-items-center gap-2\">\n      <label class=\"form-label form-label-sm mb-0\" for=\"pageSize\">Rows:</label>\n      <select\n        id=\"pageSize\"\n        class=\"form-select form-select-sm\"\n        [(ngModel)]=\"pageSize\"\n        (ngModelChange)=\"onPageSize($event)\"\n        aria-label=\"Rows per page\">\n        <option *ngFor=\"let s of pageSizeOptions\" [value]=\"s\">{{ s }}</option>\n      </select>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.table{margin-bottom:.5rem}th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sort-indicator{margin-left:.35rem;font-size:.75rem}.expand{cursor:pointer;font-size:24px;line-height:18px;display:block}.ngb-grid[data-theme=material]{--ngb-primary: #3f51b5}.ngb-grid[data-theme=material] .btn{border-color:var(--ngb-primary)}.ngb-grid[data-theme=material] table.table th,.ngb-grid[data-theme=material] table.table td{border-bottom:1px solid #e5e7eb}.ngb-grid[data-theme=tailwind]{--ngb-primary: rgb(29 78 216)}.ngb-grid[data-theme=tailwind] .btn{border-color:var(--ngb-primary);border-radius:.75rem}.ngb-grid[data-theme=tailwind] table.table th,.ngb-grid[data-theme=tailwind] table.table td{border-bottom:1px solid #e5e7eb;padding:.5rem}.ngb-responsive .table{width:100%}@media(max-width:768px){.ngb-responsive thead{display:none}.ngb-responsive tbody tr{display:grid;grid-template-columns:1fr;gap:.5rem;border:1px solid #e5e7eb;border-radius:.75rem;padding:.75rem;margin-bottom:.75rem}.ngb-responsive tbody td{display:grid;grid-template-columns:8rem 1fr}.ngb-responsive tbody td:before{content:attr(data-title);font-weight:600;opacity:.75;padding-right:.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgbPaginationComponent, selector: "ngb-pagination", inputs: ["page", "pageSize", "collectionSize", "maxSize"], outputs: ["pageChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -853,6 +980,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 type: Input
             }], responsive: [{
                 type: Input
+            }], trackBy: [{
+                type: Input
+            }], editService: [{
+                type: Input
             }], dataProviderAll: [{
                 type: Input
             }], dataProviderSelection: [{
@@ -3529,5 +3660,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DATAGRID_TEMPLATE_DIRECTIVES, DND_I18N, DND_LIVE_ANNOUNCE, Datagrid, ExcelExportAdapter, ExportButtonDirective, JsPdfAdapter, NgbCellTemplate, NgbChipsComponent, NgbDndItemDirective, NgbDndListDirective, NgbDndState, NgbEditorTemplate, NgbExportService, NgbFilterTemplate, NgbGlobalFilterTemplate, NgbLiveAnnouncer, NgbPaginationComponent, NgbRowDetailTemplate, NgbSplitterComponent, NgbSplitterPaneComponent, NgbStepLabelDirective, NgbStepperComponent, NgbTreeComponent, NgbTypeaheadComponent, PdfExportAdapter, XlsxAdapter, defaultDndI18n };
+export { DATAGRID_TEMPLATE_DIRECTIVES, DND_I18N, DND_LIVE_ANNOUNCE, Datagrid, ExcelExportAdapter, ExportButtonDirective, JsPdfAdapter, NgbCellTemplate, NgbChipsComponent, NgbDatagridDefaultEditService, NgbDndItemDirective, NgbDndListDirective, NgbDndState, NgbEditorTemplate, NgbExportService, NgbFilterTemplate, NgbGlobalFilterTemplate, NgbLiveAnnouncer, NgbPaginationComponent, NgbRowDetailTemplate, NgbSplitterComponent, NgbSplitterPaneComponent, NgbStepLabelDirective, NgbStepperComponent, NgbTreeComponent, NgbTypeaheadComponent, PdfExportAdapter, XlsxAdapter, defaultDndI18n };
 //# sourceMappingURL=angular-bootstrap-ngbootstrap.mjs.map