@angular-bootstrap/ngbootstrap 0.0.9 → 0.0.10

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:
@@ -330,3 +337,7 @@ Recommended release flow:
   - Run `npm version minor` or `npm version patch` to bump `package.json` and create the tag.
   - Push the commit and tag: `git push origin main --tags`.
 - GitHub Actions will build and publish that tagged version to npm.
+
+## Keywords
+
+Keywords: ngbootstrap, angular bootstrap, bootstrap 5, angular components, UI library, datagrid, data grid, table, pagination, stepper, wizard, splitter, resizable panes, tree view, typeahead, autocomplete, chips, tags input, drag and drop, dnd, accessibility, a11y, ARIA, reactive forms, standalone components.

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