@angular-bootstrap/ngbootstrap 0.0.11 → 0.0.13

package/fesm2022/angular-bootstrap-ngbootstrap.mjs

@@ -1,10 +1,10 @@
 import * as i0 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 { Input, Directive, EventEmitter, Output, ChangeDetectionStrategy, Component, inject, Injectable, signal, TemplateRef, Optional, HostListener, ChangeDetectorRef, QueryList, ContentChildren, ContentChild, ViewChild, InjectionToken, Inject, ElementRef, HostBinding, forwardRef, ViewChildren } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormBuilder, FormControl, Validators, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { firstValueFrom, isObservable } from 'rxjs';
+import { isObservable, firstValueFrom } from 'rxjs';
 
 class NgbCellTemplate {
     template;
@@ -12,10 +12,10 @@ class NgbCellTemplate {
     constructor(template) {
         this.template = template;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbCellTemplate, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: NgbCellTemplate, isStandalone: true, selector: "ng-template[ngbCell]", inputs: { field: ["ngbCell", "field"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbCellTemplate, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: NgbCellTemplate, isStandalone: true, selector: "ng-template[ngbCell]", inputs: { field: ["ngbCell", "field"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbCellTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbCellTemplate, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[ngbCell]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { field: [{
@@ -28,10 +28,10 @@ class NgbEditorTemplate {
     constructor(template) {
         this.template = template;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbEditorTemplate, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: NgbEditorTemplate, isStandalone: true, selector: "ng-template[ngbEditor]", inputs: { field: ["ngbEditor", "field"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbEditorTemplate, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: NgbEditorTemplate, isStandalone: true, selector: "ng-template[ngbEditor]", inputs: { field: ["ngbEditor", "field"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbEditorTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbEditorTemplate, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[ngbEditor]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { field: [{
@@ -44,10 +44,10 @@ class NgbFilterTemplate {
     constructor(template) {
         this.template = template;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbFilterTemplate, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: NgbFilterTemplate, isStandalone: true, selector: "ng-template[ngbFilter]", inputs: { field: ["ngbFilter", "field"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbFilterTemplate, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: NgbFilterTemplate, isStandalone: true, selector: "ng-template[ngbFilter]", inputs: { field: ["ngbFilter", "field"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbFilterTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbFilterTemplate, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[ngbFilter]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { field: [{
@@ -59,10 +59,10 @@ class NgbGlobalFilterTemplate {
     constructor(template) {
         this.template = template;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbGlobalFilterTemplate, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: NgbGlobalFilterTemplate, isStandalone: true, selector: "ng-template[ngbGlobalFilter]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbGlobalFilterTemplate, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: NgbGlobalFilterTemplate, isStandalone: true, selector: "ng-template[ngbGlobalFilter]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbGlobalFilterTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbGlobalFilterTemplate, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[ngbGlobalFilter]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -71,10 +71,10 @@ class NgbRowDetailTemplate {
     constructor(template) {
         this.template = template;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbRowDetailTemplate, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: NgbRowDetailTemplate, isStandalone: true, selector: "ng-template[ngbRowDetail]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbRowDetailTemplate, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: NgbRowDetailTemplate, isStandalone: true, selector: "ng-template[ngbRowDetail]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbRowDetailTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbRowDetailTemplate, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[ngbRowDetail]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -114,8 +114,8 @@ class NgbPaginationComponent {
             return;
         this.pageChange.emit(p);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NgbPaginationComponent, isStandalone: true, selector: "ngb-pagination", inputs: { page: "page", pageSize: "pageSize", collectionSize: "collectionSize", maxSize: "maxSize" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: NgbPaginationComponent, isStandalone: true, selector: "ngb-pagination", inputs: { page: "page", pageSize: "pageSize", collectionSize: "collectionSize", maxSize: "maxSize" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: `
     <nav *ngIf="totalPages >= 1" aria-label="Pagination">
       <ul class="pagination pagination-sm justify-content-center mb-0">
         <li class="page-item" [class.disabled]="page === 1">
@@ -134,7 +134,7 @@ class NgbPaginationComponent {
     </nav>
   `, isInline: true, 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbPaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbPaginationComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngb-pagination',
@@ -190,10 +190,10 @@ class NgbExportService {
             throw new Error('No ExcelExportAdapter provided');
         return this.excel.export(p);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbExportService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbExportService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbExportService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbExportService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -323,14 +323,313 @@ class XlsxAdapter {
 class ExportButtonDirective {
     // Expose the TemplateRef so the grid can render it with a context
     templateRef = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExportButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: ExportButtonDirective, isStandalone: true, selector: "[ngbExportButton]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ExportButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: ExportButtonDirective, isStandalone: true, selector: "[ngbExportButton]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExportButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ExportButtonDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[ngbExportButton]' }]
         }] });
 
+class NgbGridHighlightDirective {
+    grid;
+    rowKey;
+    highlightColumnIndex;
+    highlightedIndex = [];
+    constructor(grid) {
+        this.grid = grid;
+    }
+    ngOnInit() {
+        this.apply();
+    }
+    ngOnChanges(_ch) {
+        this.apply();
+    }
+    apply() {
+        if (!this.grid)
+            return;
+        this.grid.highlightRowKey = this.rowKey;
+        this.grid.highlightColKey = this.highlightColumnIndex;
+        this.grid.highlightedIndex = this.highlightedIndex ?? [];
+        this.grid.updateHighlightCache();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbGridHighlightDirective, deps: [{ token: Datagrid, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: NgbGridHighlightDirective, isStandalone: true, selector: "[ngbGridHighlight]", inputs: { rowKey: ["ngbGridHighlight", "rowKey"], highlightColumnIndex: "highlightColumnIndex", highlightedIndex: "highlightedIndex" }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbGridHighlightDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbGridHighlight]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: Datagrid, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { rowKey: [{
+                type: Input,
+                args: ['ngbGridHighlight']
+            }], highlightColumnIndex: [{
+                type: Input
+            }], highlightedIndex: [{
+                type: Input
+            }] } });
+
+const MIN_WIDTH = 40;
+const MAX_WIDTH = 320;
+const MAX_SAMPLE_ROWS = 50;
+const CHAR_WIDTH_FACTOR = 0.6;
+const CHROME_TOLERANCE = 12; // small buffer to ignore reapplication of padding/borders
+class NgbSyncColgroupDirective {
+    el;
+    syncId;
+    syncRole = 'header';
+    static registry = new Map();
+    mutationObserver;
+    resizeObserver;
+    rafId = null;
+    constructor(el) {
+        this.el = el;
+    }
+    ngAfterViewInit() {
+        if (!this.syncId)
+            return;
+        const entry = this.ensureEntry();
+        if (this.syncRole === 'header') {
+            entry.header = this;
+            this.measureAndDistribute();
+        }
+        else {
+            entry.bodies.add(this);
+            if (entry.header)
+                entry.header.measureAndDistribute();
+            if (entry.widths?.length)
+                this.apply(entry.widths);
+            this.startObservers();
+        }
+    }
+    ngOnDestroy() {
+        if (!this.syncId)
+            return;
+        if (this.rafId != null)
+            cancelAnimationFrame(this.rafId);
+        this.mutationObserver?.disconnect();
+        this.resizeObserver?.disconnect();
+        const entry = NgbSyncColgroupDirective.registry.get(this.syncId);
+        if (!entry)
+            return;
+        if (entry.header === this)
+            entry.header = undefined;
+        entry.bodies.delete(this);
+        if (!entry.header && entry.bodies.size === 0) {
+            NgbSyncColgroupDirective.registry.delete(this.syncId);
+        }
+    }
+    onResize() {
+        if (this.syncRole === 'header')
+            this.measureAndDistribute();
+    }
+    measureAndDistribute() {
+        const widths = this.measure();
+        if (!widths.length)
+            return;
+        const entry = this.ensureEntry();
+        if (entry.widths && this.areWidthsEqual(entry.widths, widths))
+            return;
+        entry.widths = widths;
+        this.apply(widths);
+        entry.bodies.forEach(b => b.apply(widths));
+    }
+    ensureEntry() {
+        let entry = NgbSyncColgroupDirective.registry.get(this.syncId);
+        if (!entry) {
+            entry = { bodies: new Set() };
+            NgbSyncColgroupDirective.registry.set(this.syncId, entry);
+        }
+        return entry;
+    }
+    startObservers() {
+        const bodyTable = this.tableEl();
+        const tbody = bodyTable?.querySelector('tbody');
+        if (tbody && typeof MutationObserver !== 'undefined') {
+            this.mutationObserver = new MutationObserver(() => this.scheduleMeasure());
+            this.mutationObserver.observe(tbody, { childList: true, subtree: true, characterData: true });
+        }
+        if (bodyTable && typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => this.scheduleMeasure());
+            this.resizeObserver.observe(bodyTable);
+        }
+    }
+    scheduleMeasure() {
+        if (this.rafId != null)
+            return;
+        this.rafId = requestAnimationFrame(() => {
+            this.rafId = null;
+            const entry = NgbSyncColgroupDirective.registry.get(this.syncId);
+            entry?.header?.measureAndDistribute();
+        });
+    }
+    colElements() {
+        return Array.from(this.el.nativeElement.querySelectorAll('col'));
+    }
+    tableEl() {
+        return this.el.nativeElement.closest('table');
+    }
+    firstBodyForSync() {
+        const entry = NgbSyncColgroupDirective.registry.get(this.syncId);
+        const bodyDir = this.syncRole === 'body'
+            ? this
+            : entry ? Array.from(entry.bodies.values())[0] : undefined;
+        return bodyDir?.tableEl() ?? null;
+    }
+    measure() {
+        const bodyTable = this.firstBodyForSync();
+        const cols = this.colElements();
+        const entry = NgbSyncColgroupDirective.registry.get(this.syncId);
+        if (!cols.length)
+            return [];
+        if (!bodyTable) {
+            return entry?.widths ?? [];
+        }
+        const bodyRows = Array.from(bodyTable.querySelectorAll('tbody tr')).slice(0, MAX_SAMPLE_ROWS);
+        const headerTable = this.syncRole === 'header' ? this.tableEl() : null;
+        const headerRow = headerTable?.querySelector('thead tr');
+        return cols.map((col, colIndex) => {
+            const fixedWidth = (col.getAttribute('data-fixed') ?? '').toLowerCase() === 'true';
+            if (fixedWidth) {
+                const explicit = parseFloat(col.style.width || '') || MIN_WIDTH;
+                return Math.min(Math.max(explicit, MIN_WIDTH), MAX_WIDTH);
+            }
+            // Measure header content width if available
+            let headerContentWidth = 0;
+            if (headerRow) {
+                const th = headerRow.querySelectorAll('th')[colIndex];
+                if (th) {
+                    headerContentWidth = this.measureCellContent(th);
+                }
+            }
+            // Measure body content width
+            let maxContent = 0;
+            for (const tr of bodyRows) {
+                const td = tr.querySelectorAll('td')[colIndex];
+                if (!td)
+                    continue;
+                maxContent = Math.max(maxContent, this.measureCellContent(td));
+                if (maxContent >= MAX_WIDTH)
+                    break;
+            }
+            // Use the maximum of header and body content widths
+            let finalContent = Math.max(headerContentWidth, maxContent);
+            if (finalContent === 0)
+                finalContent = MIN_WIDTH;
+            let width = Math.min(Math.max(finalContent, MIN_WIDTH), MAX_WIDTH);
+            const prev = entry?.widths?.[colIndex];
+            if (prev && width > prev) {
+                // If the only change is re-adding cell chrome (common when interactive elements span the cell),
+                // keep the previous stable width to avoid incremental growth.
+                const delta = width - prev;
+                if (delta <= CHROME_TOLERANCE)
+                    width = prev;
+            }
+            return width;
+        });
+    }
+    apply(widths) {
+        const cols = this.colElements();
+        widths.forEach((w, i) => {
+            const col = cols[i];
+            if (!col)
+                return;
+            col.style.width = w ? `${w}px` : '';
+        });
+    }
+    measureCellContent(cell) {
+        const style = getComputedStyle(cell);
+        const cellClientWidth = cell.clientWidth;
+        const cellRect = cell.getBoundingClientRect();
+        const chrome = (parseFloat(style.paddingLeft) || 0) +
+            (parseFloat(style.paddingRight) || 0) +
+            (parseFloat(style.borderLeftWidth) || 0) +
+            (parseFloat(style.borderRightWidth) || 0);
+        const interactiveEls = Array.from(cell.querySelectorAll('input, select, textarea, button'));
+        let interactiveWidth = null;
+        if (interactiveEls.length) {
+            interactiveWidth = interactiveEls.reduce((total, el) => {
+                const rect = el.getBoundingClientRect();
+                const elStyle = getComputedStyle(el);
+                const widthStr = (el.style.width || elStyle.width || '').toString().trim();
+                const usesPercentWidth = widthStr.endsWith('%');
+                const matchesCellWidth = (!!cellClientWidth && rect.width && Math.abs(rect.width - cellClientWidth) <= 1) ||
+                    (cellRect.width > 0 && rect.width > 0 && Math.abs(rect.width - cellRect.width) <= 1);
+                const spansCell = usesPercentWidth || matchesCellWidth;
+                const margin = (parseFloat(elStyle.marginLeft) || 0) + (parseFloat(elStyle.marginRight) || 0);
+                if (spansCell) {
+                    const textWidth = this.measureTextWidth((el.textContent ?? '').trim(), elStyle);
+                    const paddingBorder = (parseFloat(elStyle.paddingLeft) || 0) +
+                        (parseFloat(elStyle.paddingRight) || 0) +
+                        (parseFloat(elStyle.borderLeftWidth) || 0) +
+                        (parseFloat(elStyle.borderRightWidth) || 0);
+                    return total + Math.ceil(textWidth + paddingBorder + margin);
+                }
+                const rectWidth = rect.width || parseFloat(elStyle.width) || ((el.textContent ?? '').length * ((parseFloat(elStyle.fontSize) || 14) * CHAR_WIDTH_FACTOR));
+                return total + rectWidth + margin;
+            }, 0);
+            interactiveWidth = Math.ceil((interactiveWidth || 0) + chrome);
+        }
+        const text = (cell.textContent ?? '').trim();
+        const textWidth = Math.ceil(this.measureTextWidth(text, style) + chrome);
+        if (interactiveWidth != null) {
+            return Math.max(textWidth, interactiveWidth);
+        }
+        return textWidth;
+    }
+    areWidthsEqual(prev, next) {
+        if (prev.length !== next.length)
+            return false;
+        return prev.every((v, i) => v === next[i]);
+    }
+    measureTextWidth(text, style) {
+        const fontSize = parseFloat(style.fontSize) || 14;
+        const font = style.font || `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${style.fontSize} / ${style.lineHeight} ${style.fontFamily}`;
+        let contentWidth = 0;
+        const isJsdom = typeof navigator !== 'undefined' && /jsdom/i.test(navigator.userAgent);
+        const canvas = !isJsdom && typeof document !== 'undefined' ? document.createElement('canvas') : null;
+        let ctx = null;
+        if (canvas?.getContext) {
+            try {
+                ctx = canvas.getContext('2d');
+            }
+            catch {
+                ctx = null;
+            }
+        }
+        if (ctx && font) {
+            ctx.font = font;
+            const metrics = ctx.measureText(text);
+            contentWidth = metrics?.width ?? 0;
+        }
+        if (!contentWidth) {
+            contentWidth = text.length * (fontSize * CHAR_WIDTH_FACTOR);
+        }
+        return contentWidth;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbSyncColgroupDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: NgbSyncColgroupDirective, isStandalone: true, selector: "[ngbSyncColgroup]", inputs: { syncId: ["ngbSyncColgroup", "syncId"], syncRole: "syncRole" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbSyncColgroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbSyncColgroup]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { syncId: [{
+                type: Input,
+                args: ['ngbSyncColgroup']
+            }], syncRole: [{
+                type: Input
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
 const MAX_EMAIL_LENGTH = 254;
 const isReasonableEmail = (value) => {
     if (value == null)
@@ -372,6 +671,40 @@ class Datagrid {
     addButtonAriaLabel = 'Add row';
     /** Visible text rendered inside the add-row button. */
     addButtonText = '+ Add';
+    /** Shows sticky toggle column and keeps pinned rows at the top of the list. */
+    stickyRows = false;
+    /** Enables sticky column header when scrolling. */
+    stickyHeader = false;
+    /** Enables sticky footer when scrolling. */
+    stickyFooter = false;
+    /** Enables scroll table body container */
+    scrollable = true;
+    /** Row height used to stack multiple sticky rows without overlap (px). */
+    stickyRowHeight = 40;
+    /** Header height (px) used to offset sticky rows below the header. */
+    stickyHeaderHeight = 40;
+    /** Footer height (px) used to offset scrollable area. */
+    stickyFooterHeight = 56;
+    /** Bootstrap-like table styling options. */
+    tableOptions = {};
+    /** Selection mode for rows. */
+    selectionMode = 'none';
+    /** Selection activation: row click, checkbox only, or both. */
+    selectionBehavior = 'row';
+    /** Keyboard modifier rules for multi-select. */
+    selectionKeyMode = 'desktop';
+    /** Enable header select-all checkbox for multiple mode. */
+    selectAllEnabled = true;
+    /** A11y labels for selection controls. */
+    selectionA11yLabels = {};
+    /** Disable selection for specific rows. */
+    selectionDisabledFn;
+    /** Highlight items (row/cell). */
+    highlightedIndex = [];
+    /** Row key for highlighting. */
+    highlightRowKey = null;
+    /** Column key for highlighting. */
+    highlightColKey = null;
     /** Accessible label for the global filter input. */
     globalFilterAriaLabel = 'Search all columns';
     /** Accessible label announced when expanding a row. */
@@ -402,6 +735,9 @@ class Datagrid {
     dataProviderSelection; // used when pages='selection'
     // Grab the directive and its TemplateRef
     exportButtonDir;
+    bodyScroller;
+    headerScroller;
+    colgroupSyncId = `dg-col-${Math.random().toString(36).slice(2, 8)}`;
     exporting = false;
     rowAdd = new EventEmitter();
     //  events
@@ -412,6 +748,7 @@ class Datagrid {
     sortChange = new EventEmitter();
     filtersChange = new EventEmitter();
     pageChange = new EventEmitter();
+    selectionChange = new EventEmitter();
     rowDetailTpl;
     exporter = inject(NgbExportService); // instead of constructor(private exporter: NgbExportService) {}
     expanded = new Set();
@@ -423,6 +760,10 @@ class Datagrid {
     errorsNew = {};
     // --- sorting (from previous step)
     sort = { active: null, direction: '' };
+    stickyRowIds = new Set();
+    selectedRowIds = new Set();
+    selectionAnchor = null;
+    highlightRowMap = new Map();
     // --- filtering
     globalFilter = '';
     filters = {}; // per-column text
@@ -436,6 +777,7 @@ class Datagrid {
     saveAttemptedNew = false;
     addDraftRowId = null;
     defaultEditService = new NgbDatagridDefaultEditService();
+    cdr = inject(ChangeDetectorRef);
     norm(v) {
         return (v ?? '').toString().toLowerCase().trim();
     }
@@ -538,19 +880,22 @@ class Datagrid {
         });
     }
     get sorted() {
-        if (!this.enableSorting || !this.sort.active || !this.sort.direction)
-            return this.filtered;
-        const copy = [...this.filtered];
-        const { active, direction } = this.sort;
-        copy.sort((a, b) => {
-            const av = a?.[active];
-            const bv = b?.[active];
-            const cmp = typeof av === 'string' && typeof bv === 'string'
-                ? av.localeCompare(bv, undefined, { numeric: true, sensitivity: 'base' })
-                : av < bv ? -1 : av > bv ? 1 : 0;
-            return direction === 'asc' ? cmp : -cmp;
-        });
-        return copy;
+        const base = (!this.enableSorting || !this.sort.active || !this.sort.direction)
+            ? [...this.filtered]
+            : (() => {
+                const copy = [...this.filtered];
+                const { active, direction } = this.sort;
+                copy.sort((a, b) => {
+                    const av = a?.[active];
+                    const bv = b?.[active];
+                    const cmp = typeof av === 'string' && typeof bv === 'string'
+                        ? av.localeCompare(bv, undefined, { numeric: true, sensitivity: 'base' })
+                        : av < bv ? -1 : av > bv ? 1 : 0;
+                    return direction === 'asc' ? cmp : -cmp;
+                });
+                return copy;
+            })();
+        return this.withStickyRowsFirst(base);
     }
     // pagination (filled in next step)
     get paged() {
@@ -565,14 +910,78 @@ class Datagrid {
     }
     get startIndex() { const total = this.sorted.length; return total ? (this.page - 1) * this.pageSize + 1 : 0; }
     get endIndex() { return Math.min(this.page * this.pageSize, this.sorted.length); }
+    get shouldEnableScroll() {
+        return this.scrollable;
+    }
+    get isHeaderSticky() {
+        return this.stickyHeaderEnabled && this.shouldEnableScroll;
+    }
+    get isFooterSticky() {
+        return this.stickyFooterEnabled && this.shouldEnableScroll;
+    }
     get detailColspan() {
         const actionCols = (this.enableEdit || this.enableDelete) ? 1 : 0;
         const caretCol = this.rowDetailTpl ? 1 : 0;
-        return this.columns.length + actionCols + caretCol;
+        const stickyCol = this.stickyRowsEnabled ? 1 : 0;
+        const selectionCol = this.isSelectionEnabled() ? 1 : 0;
+        return this.columns.length + actionCols + caretCol + stickyCol + selectionCol;
+    }
+    get tableClassList() {
+        const opts = this.tableOptions || {};
+        const cls = ['table'];
+        if (opts.stripedRows)
+            cls.push('table-striped');
+        if (opts.stripedColumns)
+            cls.push('table-striped-columns');
+        if (opts.hoverRows)
+            cls.push('table-hover');
+        if (opts.bordered)
+            cls.push('table-bordered');
+        if (opts.borderless)
+            cls.push('table-borderless');
+        if (opts.small)
+            cls.push('table-sm');
+        if (opts.groupDividers)
+            cls.push('table-group-divider');
+        if (opts.align === 'middle')
+            cls.push('align-middle');
+        if (opts.align === 'bottom')
+            cls.push('align-bottom');
+        return cls;
+    }
+    get responsiveWrapperClasses() {
+        const r = this.tableOptions?.responsive;
+        if (r === false)
+            return [];
+        if (r === true || r === undefined)
+            return ['table-responsive'];
+        return [`table-responsive-${r}`];
+    }
+    updateHighlightCache() {
+        this.highlightRowMap.clear();
+        (this.highlightedIndex || []).forEach(item => {
+            const rowKey = item.row;
+            if (!this.highlightRowMap.has(rowKey))
+                this.highlightRowMap.set(rowKey, []);
+            this.highlightRowMap.get(rowKey)?.push(item);
+        });
     }
     headerText(col) {
         return (col.header ?? col.field ?? '').toString();
     }
+    headerTitle(col) {
+        const t = col?.title;
+        return (t ?? this.headerText(col)) ?? '';
+    }
+    cellTitle(row, col) {
+        const def = col?.cellTitle;
+        if (typeof def === 'function')
+            return def(row) ?? '';
+        if (typeof def === 'string')
+            return def;
+        const val = row?.[col.field];
+        return val === undefined || val === null ? '' : String(val);
+    }
     columnFilterAriaLabel(col) {
         return `${this.headerText(col)} filter`;
     }
@@ -599,6 +1008,18 @@ class Datagrid {
     exportAriaLabel(kind) {
         return kind === 'pdf' ? this.exportPdfAriaLabel : this.exportExcelAriaLabel;
     }
+    withStickyRowsFirst(rows) {
+        if (!this.stickyRows || this.stickyRowIds.size === 0)
+            return rows;
+        const sticky = [];
+        const rest = [];
+        rows.forEach(r => {
+            const di = this.data.indexOf(r);
+            const id = this.getRowId(di >= 0 ? di : 0, r);
+            (this.stickyRowIds.has(id) ? sticky : rest).push(r);
+        });
+        return [...sticky, ...rest];
+    }
     // Helpers to map from paged index → original data index
     // helper used above
     dataIndexFromPaged(i) {
@@ -697,6 +1118,8 @@ class Datagrid {
     ngOnChanges(ch) {
         if (ch['columns'])
             this.rebuildFilterForm();
+        if (ch['highlightedIndex'])
+            this.updateHighlightCache();
     }
     getRowId(rowIndex, row) {
         return this.trackBy ? this.trackBy(rowIndex, row) : rowIndex;
@@ -841,6 +1264,32 @@ class Datagrid {
         const rowIndex = di >= 0 ? di : index;
         return this.trackBy ? this.trackBy(rowIndex, row) : rowIndex;
     };
+    rowKeyValue(row, rowIndex) {
+        const key = this.highlightRowKey;
+        if (typeof key === 'function')
+            return key(row, rowIndex);
+        if (typeof key === 'string')
+            return row?.[key];
+        return rowIndex;
+    }
+    colKeyValue(column, colIndex) {
+        const key = this.highlightColKey;
+        if (typeof key === 'function')
+            return key(column, colIndex);
+        if (typeof key === 'string')
+            return column?.[key];
+        return colIndex;
+    }
+    isRowHighlighted(row, rowIndex) {
+        const key = this.rowKeyValue(row, rowIndex);
+        return this.highlightRowMap.has(key) && this.highlightRowMap.get(key)?.some(h => h.columnKey === undefined) === true;
+    }
+    isCellHighlighted(row, rowIndex, column, colIndex) {
+        const key = this.rowKeyValue(row, rowIndex);
+        const colKey = this.colKeyValue(column, colIndex);
+        const items = this.highlightRowMap.get(key);
+        return !!items?.some(h => h.columnKey === colKey);
+    }
     toggleSort(field) {
         if (!this.enableSorting)
             return;
@@ -920,18 +1369,181 @@ class Datagrid {
         const r = this.responsive;
         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", 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: [
+    isRowSticky(row, pagedIndex) {
+        if (!this.stickyRows)
+            return false;
+        const di = this.data.indexOf(row);
+        const id = this.getRowId(di >= 0 ? di : pagedIndex, row);
+        return this.stickyRowIds.has(id);
+    }
+    toggleStickyRow(pagedIndex) {
+        if (!this.stickyRows)
+            return;
+        const row = this.paged[pagedIndex];
+        if (!row)
+            return;
+        const di = this.data.indexOf(row);
+        const id = this.getRowId(di >= 0 ? di : pagedIndex, row);
+        if (this.stickyRowIds.has(id))
+            this.stickyRowIds.delete(id);
+        else
+            this.stickyRowIds.add(id);
+    }
+    stickyIcon(row, pagedIndex) {
+        return this.isRowSticky(row, pagedIndex) ? 'pin-angle-fill' : 'pin-fill';
+    }
+    stickyTop(row, pagedIndex) {
+        if (!this.isRowSticky(row, pagedIndex))
+            return null;
+        const stickyBefore = this.paged
+            .slice(0, pagedIndex)
+            .filter((r, idx) => this.isRowSticky(r, idx)).length;
+        return stickyBefore * this.stickyRowHeight;
+    }
+    // Selection helpers
+    get stickyRowsEnabled() {
+        return this.tableOptions?.stickyRows ?? this.stickyRows;
+    }
+    get stickyHeaderEnabled() {
+        return this.tableOptions?.stickyHeader ?? this.stickyHeader;
+    }
+    get stickyFooterEnabled() {
+        return this.tableOptions?.stickyFooter ?? this.stickyFooter;
+    }
+    isSelectionEnabled() {
+        return this.selectionMode !== 'none';
+    }
+    isCheckboxOnly() {
+        return this.selectionBehavior === 'checkbox';
+    }
+    isSelectionDisabled(row, pagedIndex) {
+        if (!this.selectionDisabledFn)
+            return false;
+        const di = this.data.indexOf(this.paged[pagedIndex]);
+        return this.selectionDisabledFn(row, di >= 0 ? di : pagedIndex);
+    }
+    isRowSelected(row, pagedIndex) {
+        const di = this.data.indexOf(this.paged[pagedIndex]);
+        const id = this.getRowId(di >= 0 ? di : pagedIndex, row);
+        return this.selectedRowIds.has(id);
+    }
+    toggleSelection(pagedIndex, event) {
+        if (!this.isSelectionEnabled())
+            return;
+        const row = this.paged[pagedIndex];
+        if (!row || this.isSelectionDisabled(row, pagedIndex))
+            return;
+        const di = this.data.indexOf(row);
+        const id = this.getRowId(di >= 0 ? di : pagedIndex, row);
+        const currentlySelected = this.selectedRowIds.has(id);
+        const isMulti = this.selectionMode === 'multiple';
+        const desktop = this.selectionKeyMode === 'desktop';
+        const shift = desktop && !!(event && 'shiftKey' in event && event.shiftKey);
+        const meta = desktop && !!(event && (('metaKey' in event && event.metaKey) || ('ctrlKey' in event && event.ctrlKey)));
+        if (!isMulti) {
+            this.selectedRowIds.clear();
+            this.selectedRowIds.add(id);
+            this.selectionAnchor = pagedIndex;
+            this.emitSelection(row, di, true);
+            return;
+        }
+        if (shift && this.selectionAnchor != null) {
+            const start = Math.min(this.selectionAnchor, pagedIndex);
+            const end = Math.max(this.selectionAnchor, pagedIndex);
+            this.selectedRowIds.clear();
+            for (let i = start; i <= end; i++) {
+                const r = this.paged[i];
+                if (!r || this.isSelectionDisabled(r, i))
+                    continue;
+                const rid = this.getRowId(this.data.indexOf(r), r);
+                this.selectedRowIds.add(rid);
+            }
+            this.emitSelection(row, di, true);
+            return;
+        }
+        if (meta || !desktop) {
+            if (currentlySelected)
+                this.selectedRowIds.delete(id);
+            else
+                this.selectedRowIds.add(id);
+        }
+        else {
+            this.selectedRowIds.clear();
+            this.selectedRowIds.add(id);
+        }
+        this.selectionAnchor = pagedIndex;
+        this.emitSelection(row, di, !currentlySelected || (!meta && desktop));
+    }
+    emitSelection(row, dataIndex, selected) {
+        this.selectionChange.emit({
+            selected: this.data.filter((r, idx) => this.selectedRowIds.has(this.getRowId(idx, r))),
+            lastAction: { row, index: dataIndex, selected }
+        });
+    }
+    toggleSelectAllCurrentPage() {
+        if (this.selectionMode !== 'multiple' || !this.selectAllEnabled)
+            return;
+        const allSelectable = this.paged.filter((r, i) => !this.isSelectionDisabled(r, i));
+        const allSelected = allSelectable.every((r, i) => this.isRowSelected(r, i));
+        if (allSelected) {
+            allSelectable.forEach((r, i) => {
+                const rid = this.getRowId(this.data.indexOf(r), r);
+                this.selectedRowIds.delete(rid);
+            });
+        }
+        else {
+            allSelectable.forEach((r, i) => {
+                const rid = this.getRowId(this.data.indexOf(r), r);
+                this.selectedRowIds.add(rid);
+            });
+        }
+        this.selectionChange.emit({
+            selected: this.data.filter((r, idx) => this.selectedRowIds.has(this.getRowId(idx, r))),
+            lastAction: null
+        });
+    }
+    isPageAllSelected() {
+        const selectable = this.paged.filter((r, i) => !this.isSelectionDisabled(r, i));
+        return selectable.length > 0 && selectable.every((r, i) => this.isRowSelected(r, i));
+    }
+    isPageIndeterminate() {
+        const selectable = this.paged.filter((r, i) => !this.isSelectionDisabled(r, i));
+        const selectedCount = selectable.filter((r, i) => this.isRowSelected(r, i)).length;
+        return selectedCount > 0 && selectedCount < selectable.length;
+    }
+    selectAllLabel() {
+        const labels = this.selectionA11yLabels || {};
+        return this.isPageAllSelected()
+            ? (labels.unselectAll || 'Unselect all rows')
+            : (labels.selectAll || 'Select all rows');
+    }
+    rowSelectionLabel(index) {
+        const labels = this.selectionA11yLabels || {};
+        const selected = this.isRowSelected(this.paged[index], index);
+        return selected
+            ? (labels.unselectRow || `Unselect row ${index + 1}`)
+            : (labels.selectRow || `Select row ${index + 1}`);
+    }
+    onRowSelect(ev, pagedIndex) {
+        if (!this.isSelectionEnabled() || this.isCheckboxOnly())
+            return;
+        const target = ev.target;
+        if (target.closest('input, button, a, select, textarea,label'))
+            return;
+        this.toggleSelection(pagedIndex, ev);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: Datagrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", 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", stickyRows: "stickyRows", stickyHeader: "stickyHeader", stickyFooter: "stickyFooter", scrollable: "scrollable", stickyRowHeight: "stickyRowHeight", stickyHeaderHeight: "stickyHeaderHeight", stickyFooterHeight: "stickyFooterHeight", tableOptions: "tableOptions", selectionMode: "selectionMode", selectionBehavior: "selectionBehavior", selectionKeyMode: "selectionKeyMode", selectAllEnabled: "selectAllEnabled", selectionA11yLabels: "selectionA11yLabels", selectionDisabledFn: "selectionDisabledFn", highlightedIndex: "highlightedIndex", highlightRowKey: "highlightRowKey", highlightColKey: "highlightColKey", 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", selectionChange: "selectionChange" }, 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 });
+        ], 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 }], viewQueries: [{ propertyName: "bodyScroller", first: true, predicate: ["bodyScroller"], descendants: true }, { propertyName: "headerScroller", first: true, predicate: ["headerScroller"], descendants: true }], 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\n  class=\"ngb-grid\"\n  [attr.data-theme]=\"theme\"\n  [class.ngb-responsive]=\"isResponsiveEnabled()\"\n>\n  <!-- Export toolbar -->\n  <div class=\"d-flex justify-content-end mb-2\" *ngIf=\"exportOptions?.enabled\">\n    <ng-container\n      *ngIf=\"exportButtonTpl; else defaultExportBtns\"\n      [ngTemplateOutlet]=\"exportButtonTpl\"\n      [ngTemplateOutletContext]=\"{ $implicit: triggerExport }\"\n    >\n    </ng-container>\n\n    <ng-template #defaultExportBtns>\n      <button\n        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      >\n        Export to PDF\n      </button>\n      <button\n        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      >\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  <div\n    class=\"table-wrapper\"\n    [ngClass]=\"responsiveWrapperClasses\"\n  >\n    <!-- <div class=\"table-header\"> -->\n    <table class=\"grid-table grid-header mb-0\" [ngClass]=\"tableClassList\">\n      <caption\n        *ngIf=\"tableOptions?.caption\"\n        [class.caption-top]=\"(tableOptions?.captionSide ?? 'top') === 'top'\"\n      >\n        {{\n          tableOptions?.caption\n        }}\n      </caption>\n      <colgroup [ngbSyncColgroup]=\"colgroupSyncId\" syncRole=\"header\">\n        <col *ngIf=\"isSelectionEnabled()\" style=\"width: 1%\" />\n        <col *ngIf=\"rowDetailTpl\" style=\"width: 1%\" data-fixed=\"true\" />\n        <col *ngIf=\"stickyRowsEnabled\" style=\"width: 1%\" />\n        <col *ngFor=\"let col of columns\" />\n        <col *ngIf=\"enableEdit || enableDelete\" style=\"width: 1%\" />\n      </colgroup>\n      <thead class=\"table-light\">\n        <tr>\n          <th\n            *ngIf=\"isSelectionEnabled()\"\n            class=\"text-center\"\n            scope=\"col\"\n            style=\"width: 1%\"\n          >\n            <ng-container\n              *ngIf=\"selectionMode === 'multiple' && selectAllEnabled\"\n            >\n              <input\n                type=\"checkbox\"\n                [checked]=\"isPageAllSelected()\"\n                [indeterminate]=\"isPageIndeterminate()\"\n                (change)=\"toggleSelectAllCurrentPage()\"\n                [attr.aria-label]=\"selectAllLabel()\"\n              />\n            </ng-container>\n          </th>\n          <th\n            *ngIf=\"rowDetailTpl\"\n            style=\"width: 1%\"\n            scope=\"col\"\n            aria-hidden=\"true\"\n          ></th>\n          <th\n            *ngIf=\"stickyRowsEnabled\"\n            style=\"width: 1%\"\n            scope=\"col\"\n            class=\"text-center\"\n            data-title=\"Sticky\"\n          ></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.title]=\"headerTitle(col)\"\n            [attr.aria-sort]=\"\n              enableSorting && col.sortable ? ariaSortFor(col.field) : null\n            \"\n          >\n            <ng-container\n              *ngIf=\"enableSorting && col.sortable; else plainHeader\"\n            >\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\" class=\"filter-row\" [formGroup]=\"filterForm\">\n          <th *ngIf=\"isSelectionEnabled()\"></th>\n          <th *ngIf=\"stickyRowsEnabled\"></th>\n          <th *ngFor=\"let col of columns\" [attr.data-title]=\"col.header\">\n            <ng-container *ngIf=\"col.filterable\">\n              <ng-container\n                *ngIf=\"filterTpls[col.field] as ft; else defaultFilter\"\n              >\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    </table>\n    <!-- </div> -->\n\n    <div [class.table-body-scroll]=\"shouldEnableScroll\" #bodyScroller>\n      <table\n        class=\"grid-table grid-body mb-0\"\n        [ngClass]=\"tableClassList\"\n        role=\"grid\"\n        [attr.aria-readonly]=\"enableEdit || enableAdd ? 'false' : 'true'\"\n      >\n        <colgroup [ngbSyncColgroup]=\"colgroupSyncId\" syncRole=\"body\">\n          <col *ngIf=\"isSelectionEnabled()\" style=\"width: 1%\" />\n          <col *ngIf=\"rowDetailTpl\" style=\"width: 1%\" data-fixed=\"true\" />\n          <col *ngIf=\"stickyRowsEnabled\" style=\"width: 1%\" />\n          <col *ngFor=\"let col of columns\" />\n          <col *ngIf=\"enableEdit || enableDelete\" style=\"width: 1%\" />\n        </colgroup>\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=\"isSelectionEnabled()\"></td>\n            <td *ngIf=\"rowDetailTpl\"></td>\n            <td *ngIf=\"stickyRowsEnabled\" class=\"text-center\"></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]=\"\n                    (addForm.get(col.field)?.touched || saveAttemptedNew) &&\n                    addForm.get(col.field)?.invalid\n                  \"\n                >\n                  <input\n                    type=\"checkbox\"\n                    class=\"form-check-input\"\n                    [formControlName]=\"col.field\"\n                    [attr.aria-label]=\"inputAriaLabel(col)\"\n                    [attr.aria-invalid]=\"\n                      (addForm.get(col.field)?.touched || saveAttemptedNew) &&\n                      addForm.get(col.field)?.invalid\n                        ? 'true'\n                        : null\n                    \"\n                    [attr.aria-describedby]=\"\n                      (addForm.get(col.field)?.touched || saveAttemptedNew) &&\n                      addForm.get(col.field)?.invalid\n                        ? 'add-error-' + col.field\n                        : null\n                    \"\n                  />\n                </div>\n\n                <!-- number/email/date/text -->\n                <input\n                  *ngSwitchDefault\n                  class=\"form-control form-control-sm\"\n                  [class.is-invalid]=\"\n                    (addForm.get(col.field)?.touched || saveAttemptedNew) &&\n                    addForm.get(col.field)?.invalid\n                  \"\n                  [attr.type]=\"\n                    col.type === 'number'\n                      ? 'number'\n                      : col.type === 'email'\n                        ? 'email'\n                        : col.type === 'date'\n                          ? 'date'\n                          : 'text'\n                  \"\n                  [formControlName]=\"col.field\"\n                  [attr.aria-label]=\"inputAriaLabel(col)\"\n                  [attr.aria-invalid]=\"\n                    (addForm.get(col.field)?.touched || saveAttemptedNew) &&\n                    addForm.get(col.field)?.invalid\n                      ? 'true'\n                      : null\n                  \"\n                  [attr.aria-describedby]=\"\n                    (addForm.get(col.field)?.touched || saveAttemptedNew) &&\n                    addForm.get(col.field)?.invalid\n                      ? 'add-error-' + col.field\n                      : null\n                  \"\n                />\n              </ng-container>\n\n              <div\n                class=\"invalid-feedback d-block\"\n                *ngIf=\"\n                  (addForm.get(col.field)?.touched || saveAttemptedNew) &&\n                  addForm.get(col.field)?.errors as e\n                \"\n                [attr.id]=\"'add-error-' + col.field\"\n                role=\"alert\"\n              >\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\n              *ngIf=\"enableEdit || enableDelete\"\n              class=\"text-nowrap text-center\"\n            >\n              <button\n                type=\"button\"\n                class=\"btn btn-sm btn-success me-1\"\n                (click)=\"saveAdd()\"\n                [disabled]=\"addForm.invalid\"\n              >\n                Save\n              </button>\n              <button\n                type=\"button\"\n                class=\"btn btn-sm btn-secondary\"\n                (click)=\"cancelAdd()\"\n              >\n                Cancel\n              </button>\n            </td>\n          </tr>\n\n          <!-- DATA ROWS + DETAIL ROWS -->\n          <ng-container\n            *ngFor=\"let row of paged; let i = index; trackBy: trackRow\"\n          >\n            <!-- DATA ROW (click-to-edit supported) -->\n            <tr\n              (click)=\"onRowSelect($event, i); onRowClick($event, i)\"\n              [formGroup]=\"editForm\"\n              [class.sticky-row]=\"isRowSticky(row, i)\"\n              [class.row-selected]=\"isRowSelected(row, i)\"\n              [class.row-highlight]=\"isRowHighlighted(row, i)\"\n              [attr.aria-selected]=\"isRowSelected(row, i) ? 'true' : null\"\n              [style.top.px]=\"stickyTop(row, i)\"\n              [style.z-index]=\"isRowSticky(row, i) ? 3 : null\"\n            >\n              <td *ngIf=\"isSelectionEnabled()\" class=\"text-center align-middle\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isRowSelected(row, i)\"\n                  [disabled]=\"\n                    selectionMode === 'none' ||\n                    selectionBehavior === 'row' ||\n                    isSelectionDisabled(row, i)\n                  \"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"toggleSelection(i, $event)\"\n                  [attr.aria-label]=\"rowSelectionLabel(i)\"\n                />\n              </td>\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]=\"\n                    isExpanded(i) ? collapseRowAriaLabel : expandRowAriaLabel\n                  \"\n                >\n                  {{ isExpanded(i) ? \"-\" : \"+\" }}\n                </button>\n              </td>\n\n              <td\n                *ngIf=\"stickyRowsEnabled\"\n                class=\"text-center align-middle\"\n                data-title=\"Sticky\"\n              >\n                <button\n                  type=\"button\"\n                  class=\"btn btn-link p-0 no-edit-trigger sticky-toggle\"\n                  (click)=\"$event.stopPropagation(); toggleStickyRow(i)\"\n                  [attr.aria-pressed]=\"isRowSticky(row, i)\"\n                  aria-label=\"Toggle sticky row\"\n                >\n                  <ng-container *ngIf=\"stickyIcon(row, i) as icon\">\n                    <span\n                      class=\"bi\"\n                      [ngClass]=\"'bi-' + icon\"\n                      aria-hidden=\"true\"\n                    ></span>\n                  </ng-container>\n                </button>\n              </td>\n\n              <!-- DATA CELLS -->\n              <td\n                *ngFor=\"let col of columns; let ci = index\"\n                [attr.data-title]=\"col.header\"\n                [attr.title]=\"cellTitle(row, col)\"\n                [class.cell-highlight]=\"isCellHighlighted(row, i, col, ci)\"\n              >\n                <!-- EDIT MODE -->\n                <ng-container\n                  *ngIf=\"\n                    editingIndex === i && (col.editable ?? true);\n                    else readCell\n                  \"\n                >\n                  <!-- editor template override -->\n                  <ng-container\n                    *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,\n                      col: col,\n                      form: editForm,\n                      index: i,\n                      isNew: false,\n                    }\"\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\n                          type=\"checkbox\"\n                          class=\"form-check-input\"\n                          [formControlName]=\"col.field\"\n                          [attr.aria-label]=\"inputAriaLabel(col)\"\n                          [attr.aria-invalid]=\"\n                            (editForm?.touched || saveAttemptedEdit) &&\n                            editForm?.get(col.field)?.invalid\n                              ? 'true'\n                              : null\n                          \"\n                          [attr.aria-describedby]=\"\n                            (editForm?.touched || saveAttemptedEdit) &&\n                            editForm?.get(col.field)?.invalid\n                              ? 'edit-error-' + col.field\n                              : null\n                          \"\n                        />\n                      </div>\n                      <select\n                        *ngSwitchCase=\"'select'\"\n                        class=\"form-select form-select-sm\"\n                        [formControlName]=\"col.field\"\n                        [attr.aria-label]=\"inputAriaLabel(col)\"\n                      >\n                        <option\n                          *ngFor=\"let o of col.options ?? []\"\n                          [ngValue]=\"o.value\"\n                        >\n                          {{ o.label }}\n                        </option>\n                      </select>\n                      <input\n                        *ngSwitchDefault\n                        class=\"form-control form-control-sm\"\n                        [attr.type]=\"\n                          col.type === 'number'\n                            ? 'number'\n                            : col.type === 'email'\n                              ? 'email'\n                              : col.type === 'date'\n                                ? 'date'\n                                : 'text'\n                        \"\n                        [formControlName]=\"col.field\"\n                        [attr.aria-label]=\"inputAriaLabel(col)\"\n                        [attr.aria-invalid]=\"\n                          (editForm?.touched || saveAttemptedEdit) &&\n                          editForm?.get(col.field)?.invalid\n                            ? 'true'\n                            : null\n                        \"\n                        [attr.aria-describedby]=\"\n                          (editForm?.touched || saveAttemptedEdit) &&\n                          editForm?.get(col.field)?.invalid\n                            ? 'edit-error-' + col.field\n                            : null\n                        \"\n                      />\n                    </ng-container>\n\n                    <div\n                      class=\"invalid-feedback d-block\"\n                      *ngIf=\"\n                        (editForm?.touched || saveAttemptedEdit) &&\n                        editForm?.get(col.field)?.errors as e\n                      \"\n                      [attr.id]=\"'edit-error-' + col.field\"\n                      role=\"alert\"\n                    >\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\n                    *ngIf=\"cellTpls[col.field] as ct; else defaultCell\"\n                    [ngTemplateOutlet]=\"ct.template\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: row[col.field],\n                      row: row,\n                      col: col,\n                      index: i,\n                    }\"\n                  >\n                  </ng-container>\n                  <ng-template #defaultCell>\n                    <ng-container [ngSwitch]=\"col.type\">\n                      <span *ngSwitchCase=\"'boolean'\">{{\n                        row[col.field] ? \"Yes\" : \"No\"\n                      }}</span>\n                      <span *ngSwitchDefault>{{ row[col.field] }}</span>\n                    </ng-container>\n                  </ng-template>\n                </ng-template>\n              </td>\n\n              <!-- ACTIONS -->\n              <td\n                *ngIf=\"enableEdit || enableDelete\"\n                class=\"text-nowrap text-center\"\n              >\n                <ng-container *ngIf=\"editingIndex !== i; else editBtns\">\n                  <button\n                    type=\"button\"\n                    *ngIf=\"enableEdit\"\n                    class=\"btn btn-sm btn-outline-primary me-1 no-edit-trigger\"\n                    (click)=\"startEdit(i)\"\n                  >\n                    Edit\n                  </button>\n                  <button\n                    type=\"button\"\n                    *ngIf=\"enableDelete\"\n                    class=\"btn btn-sm btn-outline-danger no-edit-trigger\"\n                    (click)=\"deleteRow(i)\"\n                  >\n                    Delete\n                  </button>\n                </ng-container>\n                <ng-template #editBtns>\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-sm btn-success me-1\"\n                    (click)=\"saveEdit(i)\"\n                    [disabled]=\"editForm.invalid\"\n                  >\n                    Save\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-sm btn-secondary\"\n                    (click)=\"cancelEdit(i)\"\n                  >\n                    Cancel\n                  </button>\n                </ng-template>\n              </td>\n            </tr>\n\n            <!-- DETAIL ROW (spans all columns) -->\n            <tr\n              *ngIf=\"rowDetailTpl && isExpanded(i)\"\n              [attr.id]=\"'dg-row-detail-' + i\"\n            >\n              <td [attr.colspan]=\"detailColspan\" role=\"region\">\n                <ng-container\n                  [ngTemplateOutlet]=\"rowDetailTpl.template\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\n                >\n                </ng-container>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </div>\n    <table class=\"table grid-table grid-foot mb-0\">\n      <colgroup>\n        <ng-container *ngFor=\"let col of columns\">\n          <col [style.width.px]=\"col?.width\" />\n        </ng-container>\n      </colgroup>\n      <tbody>\n        <tr>\n          <td [attr.colspan]=\"columns.length\" width=\"100%\">\n            <div\n              *ngIf=\"enablePagination\"\n              class=\"d-flex align-items-center justify-content-between mt-2 grid-footer\"\n              [class.sticky-footer]=\"isFooterSticky\"\n            >\n              <!-- left: count -->\n              <div class=\"small text-muted\" aria-live=\"polite\">\n                {{ startIndex }} - {{ endIndex }} of {{ sorted.length }}\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                >\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\"\n                  >Rows:</label\n                >\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                >\n                  <option *ngFor=\"let s of pageSizeOptions\" [value]=\"s\">\n                    {{ s }}\n                  </option>\n                </select>\n              </div>\n            </div>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n\n<!-- Footer (left = count, center = pagination, right = page size) -->\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}.sticky-toggle{display:inline-flex;align-items:center;justify-content:center;gap:.15rem}.table-wrapper{position:relative}.table-wrapper{overflow-x:auto;border:1px solid #dee2e6;border-radius:12px;background:#fff}.table-body-scroll{max-height:320px;overflow-y:auto;overflow-x:hidden;border-top:1px solid #e9ecef;border-bottom:1px solid #e9ecef;scrollbar-gutter:stable both-edges;display:inline-block;width:fit-content;vertical-align:top}.grid-head{border-bottom:0}.grid-table{width:100%;min-width:1200px;table-layout:fixed;margin:0;border-collapse:separate;border-spacing:0}.grid-head{position:relative;z-index:5}.grid-head thead tr:first-child th:first-child{border-top-left-radius:12px}.grid-head thead th{background:var(--bs-table-bg, #f8f9fa);border-bottom:1px solid #dee2e6;font-weight:600}.grid-table th,.grid-table td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;border-bottom:1px solid #e9ecef;padding:.55rem .65rem}.filter-row td{background:#fff;border-bottom:1px solid #dee2e6;padding-top:.45rem;padding-bottom:.45rem}.sticky-row{position:sticky;background:#ccc;z-index:4}.sticky-row td{background:#ccc}.row-selected{background-color:#e7f1ff}.row-highlight{background-color:var(--bs-warning-bg-subtle, #fff3cd)}.row-highlight td{background-color:inherit}.cell-highlight{background-color:var(--bs-info-bg-subtle, #cff4fc)}.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { kind: "directive", type: NgbSyncColgroupDirective, selector: "[ngbSyncColgroup]", inputs: ["ngbSyncColgroup", "syncRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Datagrid, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: Datagrid, decorators: [{
             type: Component,
-            args: [{ selector: 'ngb-datagrid', imports: [CommonModule, FormsModule, NgbPaginationComponent, ReactiveFormsModule], providers: [
+            args: [{ selector: 'ngb-datagrid', imports: [CommonModule, FormsModule, NgbPaginationComponent, ReactiveFormsModule, NgbSyncColgroupDirective, NgbGridHighlightDirective], providers: [
                         { provide: PdfExportAdapter, useClass: JsPdfAdapter },
                         { provide: ExcelExportAdapter, useClass: XlsxAdapter }
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<div\n  class=\"ngb-grid\"\n  [attr.data-theme]=\"theme\"\n  [class.ngb-responsive]=\"isResponsiveEnabled()\"\n>\n  <!-- Export toolbar -->\n  <div class=\"d-flex justify-content-end mb-2\" *ngIf=\"exportOptions?.enabled\">\n    <ng-container\n      *ngIf=\"exportButtonTpl; else defaultExportBtns\"\n      [ngTemplateOutlet]=\"exportButtonTpl\"\n      [ngTemplateOutletContext]=\"{ $implicit: triggerExport }\"\n    >\n    </ng-container>\n\n    <ng-template #defaultExportBtns>\n      <button\n        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      >\n        Export to PDF\n      </button>\n      <button\n        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      >\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  <div\n    class=\"table-wrapper\"\n    [ngClass]=\"responsiveWrapperClasses\"\n  >\n    <!-- <div class=\"table-header\"> -->\n    <table class=\"grid-table grid-header mb-0\" [ngClass]=\"tableClassList\">\n      <caption\n        *ngIf=\"tableOptions?.caption\"\n        [class.caption-top]=\"(tableOptions?.captionSide ?? 'top') === 'top'\"\n      >\n        {{\n          tableOptions?.caption\n        }}\n      </caption>\n      <colgroup [ngbSyncColgroup]=\"colgroupSyncId\" syncRole=\"header\">\n        <col *ngIf=\"isSelectionEnabled()\" style=\"width: 1%\" />\n        <col *ngIf=\"rowDetailTpl\" style=\"width: 1%\" data-fixed=\"true\" />\n        <col *ngIf=\"stickyRowsEnabled\" style=\"width: 1%\" />\n        <col *ngFor=\"let col of columns\" />\n        <col *ngIf=\"enableEdit || enableDelete\" style=\"width: 1%\" />\n      </colgroup>\n      <thead class=\"table-light\">\n        <tr>\n          <th\n            *ngIf=\"isSelectionEnabled()\"\n            class=\"text-center\"\n            scope=\"col\"\n            style=\"width: 1%\"\n          >\n            <ng-container\n              *ngIf=\"selectionMode === 'multiple' && selectAllEnabled\"\n            >\n              <input\n                type=\"checkbox\"\n                [checked]=\"isPageAllSelected()\"\n                [indeterminate]=\"isPageIndeterminate()\"\n                (change)=\"toggleSelectAllCurrentPage()\"\n                [attr.aria-label]=\"selectAllLabel()\"\n              />\n            </ng-container>\n          </th>\n          <th\n            *ngIf=\"rowDetailTpl\"\n            style=\"width: 1%\"\n            scope=\"col\"\n            aria-hidden=\"true\"\n          ></th>\n          <th\n            *ngIf=\"stickyRowsEnabled\"\n            style=\"width: 1%\"\n            scope=\"col\"\n            class=\"text-center\"\n            data-title=\"Sticky\"\n          ></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.title]=\"headerTitle(col)\"\n            [attr.aria-sort]=\"\n              enableSorting && col.sortable ? ariaSortFor(col.field) : null\n            \"\n          >\n            <ng-container\n              *ngIf=\"enableSorting && col.sortable; else plainHeader\"\n            >\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\" class=\"filter-row\" [formGroup]=\"filterForm\">\n          <th *ngIf=\"isSelectionEnabled()\"></th>\n          <th *ngIf=\"stickyRowsEnabled\"></th>\n          <th *ngFor=\"let col of columns\" [attr.data-title]=\"col.header\">\n            <ng-container *ngIf=\"col.filterable\">\n              <ng-container\n                *ngIf=\"filterTpls[col.field] as ft; else defaultFilter\"\n              >\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    </table>\n    <!-- </div> -->\n\n    <div [class.table-body-scroll]=\"shouldEnableScroll\" #bodyScroller>\n      <table\n        class=\"grid-table grid-body mb-0\"\n        [ngClass]=\"tableClassList\"\n        role=\"grid\"\n        [attr.aria-readonly]=\"enableEdit || enableAdd ? 'false' : 'true'\"\n      >\n        <colgroup [ngbSyncColgroup]=\"colgroupSyncId\" syncRole=\"body\">\n          <col *ngIf=\"isSelectionEnabled()\" style=\"width: 1%\" />\n          <col *ngIf=\"rowDetailTpl\" style=\"width: 1%\" data-fixed=\"true\" />\n          <col *ngIf=\"stickyRowsEnabled\" style=\"width: 1%\" />\n          <col *ngFor=\"let col of columns\" />\n          <col *ngIf=\"enableEdit || enableDelete\" style=\"width: 1%\" />\n        </colgroup>\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=\"isSelectionEnabled()\"></td>\n            <td *ngIf=\"rowDetailTpl\"></td>\n            <td *ngIf=\"stickyRowsEnabled\" class=\"text-center\"></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]=\"\n                    (addForm.get(col.field)?.touched || saveAttemptedNew) &&\n                    addForm.get(col.field)?.invalid\n                  \"\n                >\n                  <input\n                    type=\"checkbox\"\n                    class=\"form-check-input\"\n                    [formControlName]=\"col.field\"\n                    [attr.aria-label]=\"inputAriaLabel(col)\"\n                    [attr.aria-invalid]=\"\n                      (addForm.get(col.field)?.touched || saveAttemptedNew) &&\n                      addForm.get(col.field)?.invalid\n                        ? 'true'\n                        : null\n                    \"\n                    [attr.aria-describedby]=\"\n                      (addForm.get(col.field)?.touched || saveAttemptedNew) &&\n                      addForm.get(col.field)?.invalid\n                        ? 'add-error-' + col.field\n                        : null\n                    \"\n                  />\n                </div>\n\n                <!-- number/email/date/text -->\n                <input\n                  *ngSwitchDefault\n                  class=\"form-control form-control-sm\"\n                  [class.is-invalid]=\"\n                    (addForm.get(col.field)?.touched || saveAttemptedNew) &&\n                    addForm.get(col.field)?.invalid\n                  \"\n                  [attr.type]=\"\n                    col.type === 'number'\n                      ? 'number'\n                      : col.type === 'email'\n                        ? 'email'\n                        : col.type === 'date'\n                          ? 'date'\n                          : 'text'\n                  \"\n                  [formControlName]=\"col.field\"\n                  [attr.aria-label]=\"inputAriaLabel(col)\"\n                  [attr.aria-invalid]=\"\n                    (addForm.get(col.field)?.touched || saveAttemptedNew) &&\n                    addForm.get(col.field)?.invalid\n                      ? 'true'\n                      : null\n                  \"\n                  [attr.aria-describedby]=\"\n                    (addForm.get(col.field)?.touched || saveAttemptedNew) &&\n                    addForm.get(col.field)?.invalid\n                      ? 'add-error-' + col.field\n                      : null\n                  \"\n                />\n              </ng-container>\n\n              <div\n                class=\"invalid-feedback d-block\"\n                *ngIf=\"\n                  (addForm.get(col.field)?.touched || saveAttemptedNew) &&\n                  addForm.get(col.field)?.errors as e\n                \"\n                [attr.id]=\"'add-error-' + col.field\"\n                role=\"alert\"\n              >\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\n              *ngIf=\"enableEdit || enableDelete\"\n              class=\"text-nowrap text-center\"\n            >\n              <button\n                type=\"button\"\n                class=\"btn btn-sm btn-success me-1\"\n                (click)=\"saveAdd()\"\n                [disabled]=\"addForm.invalid\"\n              >\n                Save\n              </button>\n              <button\n                type=\"button\"\n                class=\"btn btn-sm btn-secondary\"\n                (click)=\"cancelAdd()\"\n              >\n                Cancel\n              </button>\n            </td>\n          </tr>\n\n          <!-- DATA ROWS + DETAIL ROWS -->\n          <ng-container\n            *ngFor=\"let row of paged; let i = index; trackBy: trackRow\"\n          >\n            <!-- DATA ROW (click-to-edit supported) -->\n            <tr\n              (click)=\"onRowSelect($event, i); onRowClick($event, i)\"\n              [formGroup]=\"editForm\"\n              [class.sticky-row]=\"isRowSticky(row, i)\"\n              [class.row-selected]=\"isRowSelected(row, i)\"\n              [class.row-highlight]=\"isRowHighlighted(row, i)\"\n              [attr.aria-selected]=\"isRowSelected(row, i) ? 'true' : null\"\n              [style.top.px]=\"stickyTop(row, i)\"\n              [style.z-index]=\"isRowSticky(row, i) ? 3 : null\"\n            >\n              <td *ngIf=\"isSelectionEnabled()\" class=\"text-center align-middle\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isRowSelected(row, i)\"\n                  [disabled]=\"\n                    selectionMode === 'none' ||\n                    selectionBehavior === 'row' ||\n                    isSelectionDisabled(row, i)\n                  \"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"toggleSelection(i, $event)\"\n                  [attr.aria-label]=\"rowSelectionLabel(i)\"\n                />\n              </td>\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]=\"\n                    isExpanded(i) ? collapseRowAriaLabel : expandRowAriaLabel\n                  \"\n                >\n                  {{ isExpanded(i) ? \"-\" : \"+\" }}\n                </button>\n              </td>\n\n              <td\n                *ngIf=\"stickyRowsEnabled\"\n                class=\"text-center align-middle\"\n                data-title=\"Sticky\"\n              >\n                <button\n                  type=\"button\"\n                  class=\"btn btn-link p-0 no-edit-trigger sticky-toggle\"\n                  (click)=\"$event.stopPropagation(); toggleStickyRow(i)\"\n                  [attr.aria-pressed]=\"isRowSticky(row, i)\"\n                  aria-label=\"Toggle sticky row\"\n                >\n                  <ng-container *ngIf=\"stickyIcon(row, i) as icon\">\n                    <span\n                      class=\"bi\"\n                      [ngClass]=\"'bi-' + icon\"\n                      aria-hidden=\"true\"\n                    ></span>\n                  </ng-container>\n                </button>\n              </td>\n\n              <!-- DATA CELLS -->\n              <td\n                *ngFor=\"let col of columns; let ci = index\"\n                [attr.data-title]=\"col.header\"\n                [attr.title]=\"cellTitle(row, col)\"\n                [class.cell-highlight]=\"isCellHighlighted(row, i, col, ci)\"\n              >\n                <!-- EDIT MODE -->\n                <ng-container\n                  *ngIf=\"\n                    editingIndex === i && (col.editable ?? true);\n                    else readCell\n                  \"\n                >\n                  <!-- editor template override -->\n                  <ng-container\n                    *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,\n                      col: col,\n                      form: editForm,\n                      index: i,\n                      isNew: false,\n                    }\"\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\n                          type=\"checkbox\"\n                          class=\"form-check-input\"\n                          [formControlName]=\"col.field\"\n                          [attr.aria-label]=\"inputAriaLabel(col)\"\n                          [attr.aria-invalid]=\"\n                            (editForm?.touched || saveAttemptedEdit) &&\n                            editForm?.get(col.field)?.invalid\n                              ? 'true'\n                              : null\n                          \"\n                          [attr.aria-describedby]=\"\n                            (editForm?.touched || saveAttemptedEdit) &&\n                            editForm?.get(col.field)?.invalid\n                              ? 'edit-error-' + col.field\n                              : null\n                          \"\n                        />\n                      </div>\n                      <select\n                        *ngSwitchCase=\"'select'\"\n                        class=\"form-select form-select-sm\"\n                        [formControlName]=\"col.field\"\n                        [attr.aria-label]=\"inputAriaLabel(col)\"\n                      >\n                        <option\n                          *ngFor=\"let o of col.options ?? []\"\n                          [ngValue]=\"o.value\"\n                        >\n                          {{ o.label }}\n                        </option>\n                      </select>\n                      <input\n                        *ngSwitchDefault\n                        class=\"form-control form-control-sm\"\n                        [attr.type]=\"\n                          col.type === 'number'\n                            ? 'number'\n                            : col.type === 'email'\n                              ? 'email'\n                              : col.type === 'date'\n                                ? 'date'\n                                : 'text'\n                        \"\n                        [formControlName]=\"col.field\"\n                        [attr.aria-label]=\"inputAriaLabel(col)\"\n                        [attr.aria-invalid]=\"\n                          (editForm?.touched || saveAttemptedEdit) &&\n                          editForm?.get(col.field)?.invalid\n                            ? 'true'\n                            : null\n                        \"\n                        [attr.aria-describedby]=\"\n                          (editForm?.touched || saveAttemptedEdit) &&\n                          editForm?.get(col.field)?.invalid\n                            ? 'edit-error-' + col.field\n                            : null\n                        \"\n                      />\n                    </ng-container>\n\n                    <div\n                      class=\"invalid-feedback d-block\"\n                      *ngIf=\"\n                        (editForm?.touched || saveAttemptedEdit) &&\n                        editForm?.get(col.field)?.errors as e\n                      \"\n                      [attr.id]=\"'edit-error-' + col.field\"\n                      role=\"alert\"\n                    >\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\n                    *ngIf=\"cellTpls[col.field] as ct; else defaultCell\"\n                    [ngTemplateOutlet]=\"ct.template\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: row[col.field],\n                      row: row,\n                      col: col,\n                      index: i,\n                    }\"\n                  >\n                  </ng-container>\n                  <ng-template #defaultCell>\n                    <ng-container [ngSwitch]=\"col.type\">\n                      <span *ngSwitchCase=\"'boolean'\">{{\n                        row[col.field] ? \"Yes\" : \"No\"\n                      }}</span>\n                      <span *ngSwitchDefault>{{ row[col.field] }}</span>\n                    </ng-container>\n                  </ng-template>\n                </ng-template>\n              </td>\n\n              <!-- ACTIONS -->\n              <td\n                *ngIf=\"enableEdit || enableDelete\"\n                class=\"text-nowrap text-center\"\n              >\n                <ng-container *ngIf=\"editingIndex !== i; else editBtns\">\n                  <button\n                    type=\"button\"\n                    *ngIf=\"enableEdit\"\n                    class=\"btn btn-sm btn-outline-primary me-1 no-edit-trigger\"\n                    (click)=\"startEdit(i)\"\n                  >\n                    Edit\n                  </button>\n                  <button\n                    type=\"button\"\n                    *ngIf=\"enableDelete\"\n                    class=\"btn btn-sm btn-outline-danger no-edit-trigger\"\n                    (click)=\"deleteRow(i)\"\n                  >\n                    Delete\n                  </button>\n                </ng-container>\n                <ng-template #editBtns>\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-sm btn-success me-1\"\n                    (click)=\"saveEdit(i)\"\n                    [disabled]=\"editForm.invalid\"\n                  >\n                    Save\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-sm btn-secondary\"\n                    (click)=\"cancelEdit(i)\"\n                  >\n                    Cancel\n                  </button>\n                </ng-template>\n              </td>\n            </tr>\n\n            <!-- DETAIL ROW (spans all columns) -->\n            <tr\n              *ngIf=\"rowDetailTpl && isExpanded(i)\"\n              [attr.id]=\"'dg-row-detail-' + i\"\n            >\n              <td [attr.colspan]=\"detailColspan\" role=\"region\">\n                <ng-container\n                  [ngTemplateOutlet]=\"rowDetailTpl.template\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\n                >\n                </ng-container>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </div>\n    <table class=\"table grid-table grid-foot mb-0\">\n      <colgroup>\n        <ng-container *ngFor=\"let col of columns\">\n          <col [style.width.px]=\"col?.width\" />\n        </ng-container>\n      </colgroup>\n      <tbody>\n        <tr>\n          <td [attr.colspan]=\"columns.length\" width=\"100%\">\n            <div\n              *ngIf=\"enablePagination\"\n              class=\"d-flex align-items-center justify-content-between mt-2 grid-footer\"\n              [class.sticky-footer]=\"isFooterSticky\"\n            >\n              <!-- left: count -->\n              <div class=\"small text-muted\" aria-live=\"polite\">\n                {{ startIndex }} - {{ endIndex }} of {{ sorted.length }}\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                >\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\"\n                  >Rows:</label\n                >\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                >\n                  <option *ngFor=\"let s of pageSizeOptions\" [value]=\"s\">\n                    {{ s }}\n                  </option>\n                </select>\n              </div>\n            </div>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n\n<!-- Footer (left = count, center = pagination, right = page size) -->\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}.sticky-toggle{display:inline-flex;align-items:center;justify-content:center;gap:.15rem}.table-wrapper{position:relative}.table-wrapper{overflow-x:auto;border:1px solid #dee2e6;border-radius:12px;background:#fff}.table-body-scroll{max-height:320px;overflow-y:auto;overflow-x:hidden;border-top:1px solid #e9ecef;border-bottom:1px solid #e9ecef;scrollbar-gutter:stable both-edges;display:inline-block;width:fit-content;vertical-align:top}.grid-head{border-bottom:0}.grid-table{width:100%;min-width:1200px;table-layout:fixed;margin:0;border-collapse:separate;border-spacing:0}.grid-head{position:relative;z-index:5}.grid-head thead tr:first-child th:first-child{border-top-left-radius:12px}.grid-head thead th{background:var(--bs-table-bg, #f8f9fa);border-bottom:1px solid #dee2e6;font-weight:600}.grid-table th,.grid-table td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;border-bottom:1px solid #e9ecef;padding:.55rem .65rem}.filter-row td{background:#fff;border-bottom:1px solid #dee2e6;padding-top:.45rem;padding-bottom:.45rem}.sticky-row{position:sticky;background:#ccc;z-index:4}.sticky-row td{background:#ccc}.row-selected{background-color:#e7f1ff}.row-highlight{background-color:var(--bs-warning-bg-subtle, #fff3cd)}.row-highlight td{background-color:inherit}.cell-highlight{background-color:var(--bs-info-bg-subtle, #cff4fc)}.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"] }]
         }], propDecorators: { columns: [{
                 type: Input
             }], data: [{
@@ -956,6 +1568,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 type: Input
             }], addButtonText: [{
                 type: Input
+            }], stickyRows: [{
+                type: Input
+            }], stickyHeader: [{
+                type: Input
+            }], stickyFooter: [{
+                type: Input
+            }], scrollable: [{
+                type: Input
+            }], stickyRowHeight: [{
+                type: Input
+            }], stickyHeaderHeight: [{
+                type: Input
+            }], stickyFooterHeight: [{
+                type: Input
+            }], tableOptions: [{
+                type: Input
+            }], selectionMode: [{
+                type: Input
+            }], selectionBehavior: [{
+                type: Input
+            }], selectionKeyMode: [{
+                type: Input
+            }], selectAllEnabled: [{
+                type: Input
+            }], selectionA11yLabels: [{
+                type: Input
+            }], selectionDisabledFn: [{
+                type: Input
+            }], highlightedIndex: [{
+                type: Input
+            }], highlightRowKey: [{
+                type: Input
+            }], highlightColKey: [{
+                type: Input
             }], globalFilterAriaLabel: [{
                 type: Input
             }], expandRowAriaLabel: [{
@@ -991,6 +1637,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             }], exportButtonDir: [{
                 type: ContentChild,
                 args: [ExportButtonDirective]
+            }], bodyScroller: [{
+                type: ViewChild,
+                args: ['bodyScroller']
+            }], headerScroller: [{
+                type: ViewChild,
+                args: ['headerScroller']
             }], rowAdd: [{
                 type: Output
             }], rowEdit: [{
@@ -1007,6 +1659,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 type: Output
             }], pageChange: [{
                 type: Output
+            }], selectionChange: [{
+                type: Output
             }], rowDetailTpl: [{
                 type: ContentChild,
                 args: [NgbRowDetailTemplate]
@@ -1043,10 +1697,10 @@ class NgbLiveAnnouncer {
         }
         this.node.textContent = message;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbLiveAnnouncer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbLiveAnnouncer, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbLiveAnnouncer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbLiveAnnouncer, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbLiveAnnouncer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbLiveAnnouncer, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1099,10 +1753,10 @@ class NgbDndState {
         if (this.store.size === 0)
             this.active.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbDndState, deps: [{ token: DND_LIVE_ANNOUNCE, optional: true }, { token: DND_I18N, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbDndState, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbDndState, deps: [{ token: DND_LIVE_ANNOUNCE, optional: true }, { token: DND_I18N, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbDndState, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbDndState, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbDndState, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -1416,10 +2070,10 @@ class NgbDndListDirective {
         });
         this.state.announce?.(this.state.i18n.dropped());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbDndListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: NgbDndListDirective, isStandalone: true, selector: "[ngbDndList]", inputs: { dndChildrenKey: "dndChildrenKey", list: ["ngbDndList", "list"], dndGroup: "dndGroup", dndDisabled: "dndDisabled", dndCloneOnDrop: "dndCloneOnDrop", dndCloneFn: "dndCloneFn", dndIsPalette: "dndIsPalette", dndCanDrop: "dndCanDrop", dndAriaLabel: "dndAriaLabel" }, outputs: { dndDropped: "dndDropped" }, host: { listeners: { "dragenter": "onDragEnter($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "document:drop": "onDocumentDrop($event)", "drop": "onDrop($event)" }, properties: { "class.ngb-dnd-denied": "this.denied", "attr.aria-label": "this.ariaLabel", "attr.role": "this.role", "class.ngb-dnd-list": "this.hostClass", "class.ngb-dnd-over": "this.isOver", "attr.data-drop-valid": "this.dataDropValid" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbDndListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: NgbDndListDirective, isStandalone: true, selector: "[ngbDndList]", inputs: { dndChildrenKey: "dndChildrenKey", list: ["ngbDndList", "list"], dndGroup: "dndGroup", dndDisabled: "dndDisabled", dndCloneOnDrop: "dndCloneOnDrop", dndCloneFn: "dndCloneFn", dndIsPalette: "dndIsPalette", dndCanDrop: "dndCanDrop", dndAriaLabel: "dndAriaLabel" }, outputs: { dndDropped: "dndDropped" }, host: { listeners: { "dragenter": "onDragEnter($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "document:drop": "onDocumentDrop($event)", "drop": "onDrop($event)" }, properties: { "class.ngb-dnd-denied": "this.denied", "attr.aria-label": "this.ariaLabel", "attr.role": "this.role", "class.ngb-dnd-list": "this.hostClass", "class.ngb-dnd-over": "this.isOver", "attr.data-drop-valid": "this.dataDropValid" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbDndListDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbDndListDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbDndList]',
@@ -1568,10 +2222,10 @@ class NgbDndItemDirective {
             this.onDragEnd();
         } // cancel
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbDndItemDirective, deps: [{ token: NgbDndListDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: NgbDndItemDirective, isStandalone: true, selector: "[ngbDndItem]", inputs: { item: ["ngbDndItem", "item"], dndGroup: "dndGroup", dndIndex: "dndIndex", dndDisabled: "dndDisabled" }, outputs: { dndDragStart: "dndDragStart", dndDragEnd: "dndDragEnd" }, host: { listeners: { "dragstart": "onDragStart($event)", "dragend": "onDragEnd()", "keydown": "onKeydown($event)" }, properties: { "attr.draggable": "this.draggable", "class.ngb-dnd-dragging": "this.dragging", "attr.aria-grabbed": "this.ariaGrabbed", "attr.role": "this.role", "attr.tabindex": "this.tabIndex" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbDndItemDirective, deps: [{ token: NgbDndListDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: NgbDndItemDirective, isStandalone: true, selector: "[ngbDndItem]", inputs: { item: ["ngbDndItem", "item"], dndGroup: "dndGroup", dndIndex: "dndIndex", dndDisabled: "dndDisabled" }, outputs: { dndDragStart: "dndDragStart", dndDragEnd: "dndDragEnd" }, host: { listeners: { "dragstart": "onDragStart($event)", "dragend": "onDragEnd()", "keydown": "onKeydown($event)" }, properties: { "attr.draggable": "this.draggable", "class.ngb-dnd-dragging": "this.dragging", "attr.aria-grabbed": "this.ariaGrabbed", "attr.role": "this.role", "attr.tabindex": "this.tabIndex" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbDndItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbDndItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbDndItem]',
@@ -1624,10 +2278,10 @@ class NgbStepLabelDirective {
     constructor(template) {
         this.template = template;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbStepLabelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: NgbStepLabelDirective, isStandalone: true, selector: "[ngbStepLabel]", inputs: { for: ["ngbStepLabel", "for"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbStepLabelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: NgbStepLabelDirective, isStandalone: true, selector: "[ngbStepLabel]", inputs: { for: ["ngbStepLabel", "for"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbStepLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbStepLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbStepLabel]',
@@ -1822,10 +2476,10 @@ class NgbStepperComponent {
             step: this.steps[nextIndex],
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NgbStepperComponent, isStandalone: true, selector: "ngb-stepper", inputs: { steps: "steps", orientation: "orientation", labelPosition: "labelPosition", contentPosition: "contentPosition", allowRevisit: "allowRevisit", lazy: "lazy", theme: "theme", responsive: "responsive", disableAnimation: "disableAnimation", animationDuration: "animationDuration", nextLabel: "nextLabel", previousLabel: "previousLabel", resetLabel: "resetLabel", cancelLabel: "cancelLabel", optionalLabel: "optionalLabel", stateIcons: "stateIcons", selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange", selectionChange: "selectionChange", nextClicked: "nextClicked", prevClicked: "prevClicked", resetClicked: "resetClicked", cancelClicked: "cancelClicked" }, queries: [{ propertyName: "stepLabelTplDir", first: true, predicate: NgbStepLabelDirective, descendants: true }, { propertyName: "customIconTpl", first: true, predicate: ["ngbStepperIcon"], descendants: true, read: TemplateRef }, { propertyName: "stepContentTpl", first: true, predicate: ["stepContent"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<div\n  class=\"ngb-stepper\"\n  [class.horizontal]=\"orientation === 'horizontal'\"\n  [class.vertical]=\"orientation === 'vertical'\"\n  [class.ngb-responsive]=\"responsive\"\n  [class.bootstrap]=\"theme === 'bootstrap'\"\n  [class.material]=\"theme === 'material'\"\n  [class.tailwind]=\"theme === 'tailwind'\"\n  role=\"tablist\"\n  [attr.aria-orientation]=\"orientation\"\n>\n  <!-- HEADER / LABELS -->\n  <div class=\"ngb-stepper-header\">\n    <ol class=\"ngb-stepper-steps\" role=\"presentation\">\n      <li\n        *ngFor=\"let step of steps; let i = index\"\n        class=\"ngb-stepper-step\"\n        [class.active]=\"i === selectedIndex\"\n        [class.done]=\"i < selectedIndex && !isStepInError(i)\"\n        [class.error]=\"isStepInError(i)\"\n        [class.disabled]=\"step.disabled\"\n        role=\"tab\"\n        [attr.id]=\"stepId(i)\"\n        [attr.aria-controls]=\"contentId(i)\"\n        [attr.aria-selected]=\"i === selectedIndex\"\n        [attr.aria-disabled]=\"step.disabled || (!allowRevisit && i < visitedFrom && i !== selectedIndex)\"\n        tabindex=\"{{ i === selectedIndex ? 0 : -1 }}\"\n        (click)=\"onHeaderClick(i)\"\n        (keydown.enter)=\"onHeaderKeydown($event, i)\"\n        (keydown.space)=\"onHeaderKeydown($event, i)\"\n      >\n        <div\n          class=\"ngb-stepper-indicator\"\n          [ngClass]=\"indicatorClass(i)\"\n          aria-hidden=\"true\"\n        >\n          <ng-container *ngIf=\"customIconTpl; else defaultIcon\">\n            <ng-container\n              [ngTemplateOutlet]=\"customIconTpl\"\n              [ngTemplateOutletContext]=\"{ index: i, state: stepState(i) }\"\n            ></ng-container>\n          </ng-container>\n          <ng-template #defaultIcon>\n            {{ defaultIconForState(stepState(i), i) }}\n          </ng-template>\n        </div>\n\n        <div\n          class=\"ngb-stepper-label-container\"\n          [ngClass]=\"labelPositionClass\"\n        >\n          <div class=\"ngb-stepper-label\" *ngIf=\"stepLabelTpl; else textLabel\">\n            <ng-container\n              [ngTemplateOutlet]=\"stepLabelTpl\"\n              [ngTemplateOutletContext]=\"{ index: i, step: step }\"\n            ></ng-container>\n          </div>\n          <ng-template #textLabel>\n            <div class=\"ngb-stepper-label-text\">\n              {{ step.label || ('Step ' + (i + 1)) }}\n            </div>\n          </ng-template>\n          <div class=\"ngb-stepper-optional\" *ngIf=\"step.optional\">\n            {{ optionalLabel }}\n          </div>\n        </div>\n      </li>\n    </ol>\n  </div>\n\n  <!-- CONTENT -->\n  <div class=\"ngb-stepper-content\" [class.ngb-stepper-content-top]=\"contentPosition === 'top'\">\n    <ng-container *ngIf=\"lazy; else allContent\">\n      <ng-container *ngFor=\"let index of [selectedIndex]\">\n        <div\n          class=\"fade-step\"\n          [style.--ngb-stepper-animation-duration]=\"(disableAnimation ? 0 : animationDuration) + 'ms'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"stepId(index)\"\n          [attr.id]=\"contentId(index)\"\n        >\n          <ng-container *ngTemplateOutlet=\"stepContentTpl; context: { index: index }\"></ng-container>\n          <div\n            *ngIf=\"currentErrorMessage\"\n            class=\"ngb-stepper-error\"\n            role=\"alert\"\n          >\n            {{ currentErrorMessage }}\n          </div>\n        </div>\n      </ng-container>\n    </ng-container>\n\n    <ng-template #allContent>\n      <div\n        class=\"fade-step\"\n        [style.--ngb-stepper-animation-duration]=\"(disableAnimation ? 0 : animationDuration) + 'ms'\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"stepId(selectedIndex)\"\n        [attr.id]=\"contentId(selectedIndex)\"\n      >\n        <ng-container *ngTemplateOutlet=\"stepContentTpl; context: { index: selectedIndex }\"></ng-container>\n        <div\n          *ngIf=\"currentErrorMessage\"\n          class=\"ngb-stepper-error\"\n          role=\"alert\"\n        >\n          {{ currentErrorMessage }}\n        </div>\n      </div>\n    </ng-template>\n  </div>\n\n  <!-- ACTIONS -->\n  <div class=\"ngb-stepper-buttons\">\n    <button\n      type=\"button\"\n      class=\"btn btn-sm btn-outline-secondary\"\n      (click)=\"onCancel()\"\n    >\n      {{ cancelLabel }}\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"btn btn-sm btn-outline-secondary\"\n      (click)=\"onReset()\"\n    >\n      {{ resetLabel }}\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"btn btn-sm btn-outline-secondary\"\n      (click)=\"prev()\"\n      [disabled]=\"selectedIndex <= 0 || !allowRevisit\"\n    >\n      {{ previousLabel }}\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"btn btn-sm btn-primary\"\n      (click)=\"next()\"\n      [disabled]=\"selectedIndex >= steps.length - 1 || steps[selectedIndex]?.disabled\"\n    >\n      {{ nextLabel }}\n    </button>\n  </div>\n</div>\n", styles: [".ngb-stepper{display:flex;flex-direction:column}.ngb-stepper.horizontal .ngb-stepper-header{display:flex;overflow-x:auto}.ngb-stepper.vertical .ngb-stepper-header{display:block}.ngb-stepper-header{margin-bottom:1rem}.ngb-stepper-steps{list-style:none;padding:0;margin:0;display:flex;flex-wrap:nowrap}.ngb-stepper.vertical .ngb-stepper-steps{flex-direction:column}.ngb-stepper-step{position:relative;display:flex;align-items:center;cursor:pointer}.ngb-stepper.horizontal .ngb-stepper-step{padding:.5rem .75rem}.ngb-stepper.vertical .ngb-stepper-step{padding:.5rem 0}.ngb-stepper-step.disabled{cursor:default;opacity:.6}.ngb-stepper-indicator{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;margin-right:.5rem;flex-shrink:0}.ngb-stepper.bootstrap .ngb-stepper-indicator{border:1px solid var(--bs-border-color, #dee2e6);background-color:var(--bs-body-bg, #fff)}.ngb-stepper.bootstrap .ngb-stepper-step.active .ngb-stepper-indicator{background-color:var(--bs-primary, #0d6efd);color:#fff}.ngb-stepper.bootstrap .ngb-stepper-step.done .ngb-stepper-indicator{background-color:var(--bs-success, #198754);color:#fff}.ngb-stepper.bootstrap .ngb-stepper-step.error .ngb-stepper-indicator{background-color:var(--bs-danger, #dc3545);color:#fff}.ngb-stepper-label-container{display:flex;flex-direction:column}.ngb-stepper-label-top{flex-direction:column-reverse}.ngb-stepper-label-bottom{flex-direction:column}.ngb-stepper-label-left{flex-direction:row-reverse}.ngb-stepper-label-right{flex-direction:row}.ngb-stepper-content{position:relative}.ngb-stepper-content-top{order:-1}.ngb-stepper-buttons{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}.ngb-stepper-error{color:var(--bs-danger, #dc3545);font-size:.875rem;margin-top:.25rem}.ngb-stepper-optional{font-size:.75rem;opacity:.7}.ngb-stepper .fade-step{animation:ngb-stepper-fade var(--ngb-stepper-animation-duration, .15s) ease-in-out;animation-fill-mode:both}@keyframes ngb-stepper-fade{0%{opacity:0;transform:translateY(.35rem)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: NgbStepperComponent, isStandalone: true, selector: "ngb-stepper", inputs: { steps: "steps", orientation: "orientation", labelPosition: "labelPosition", contentPosition: "contentPosition", allowRevisit: "allowRevisit", lazy: "lazy", theme: "theme", responsive: "responsive", disableAnimation: "disableAnimation", animationDuration: "animationDuration", nextLabel: "nextLabel", previousLabel: "previousLabel", resetLabel: "resetLabel", cancelLabel: "cancelLabel", optionalLabel: "optionalLabel", stateIcons: "stateIcons", selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange", selectionChange: "selectionChange", nextClicked: "nextClicked", prevClicked: "prevClicked", resetClicked: "resetClicked", cancelClicked: "cancelClicked" }, queries: [{ propertyName: "stepLabelTplDir", first: true, predicate: NgbStepLabelDirective, descendants: true }, { propertyName: "customIconTpl", first: true, predicate: ["ngbStepperIcon"], descendants: true, read: TemplateRef }, { propertyName: "stepContentTpl", first: true, predicate: ["stepContent"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<div\n  class=\"ngb-stepper\"\n  [class.horizontal]=\"orientation === 'horizontal'\"\n  [class.vertical]=\"orientation === 'vertical'\"\n  [class.ngb-responsive]=\"responsive\"\n  [class.bootstrap]=\"theme === 'bootstrap'\"\n  [class.material]=\"theme === 'material'\"\n  [class.tailwind]=\"theme === 'tailwind'\"\n  role=\"tablist\"\n  [attr.aria-orientation]=\"orientation\"\n>\n  <!-- HEADER / LABELS -->\n  <div class=\"ngb-stepper-header\">\n    <ol class=\"ngb-stepper-steps\" role=\"presentation\">\n      <li\n        *ngFor=\"let step of steps; let i = index\"\n        class=\"ngb-stepper-step\"\n        [class.active]=\"i === selectedIndex\"\n        [class.done]=\"i < selectedIndex && !isStepInError(i)\"\n        [class.error]=\"isStepInError(i)\"\n        [class.disabled]=\"step.disabled\"\n        role=\"tab\"\n        [attr.id]=\"stepId(i)\"\n        [attr.aria-controls]=\"contentId(i)\"\n        [attr.aria-selected]=\"i === selectedIndex\"\n        [attr.aria-disabled]=\"step.disabled || (!allowRevisit && i < visitedFrom && i !== selectedIndex)\"\n        tabindex=\"{{ i === selectedIndex ? 0 : -1 }}\"\n        (click)=\"onHeaderClick(i)\"\n        (keydown.enter)=\"onHeaderKeydown($event, i)\"\n        (keydown.space)=\"onHeaderKeydown($event, i)\"\n      >\n        <div\n          class=\"ngb-stepper-indicator\"\n          [ngClass]=\"indicatorClass(i)\"\n          aria-hidden=\"true\"\n        >\n          <ng-container *ngIf=\"customIconTpl; else defaultIcon\">\n            <ng-container\n              [ngTemplateOutlet]=\"customIconTpl\"\n              [ngTemplateOutletContext]=\"{ index: i, state: stepState(i) }\"\n            ></ng-container>\n          </ng-container>\n          <ng-template #defaultIcon>\n            {{ defaultIconForState(stepState(i), i) }}\n          </ng-template>\n        </div>\n\n        <div\n          class=\"ngb-stepper-label-container\"\n          [ngClass]=\"labelPositionClass\"\n        >\n          <div class=\"ngb-stepper-label\" *ngIf=\"stepLabelTpl; else textLabel\">\n            <ng-container\n              [ngTemplateOutlet]=\"stepLabelTpl\"\n              [ngTemplateOutletContext]=\"{ index: i, step: step }\"\n            ></ng-container>\n          </div>\n          <ng-template #textLabel>\n            <div class=\"ngb-stepper-label-text\">\n              {{ step.label || ('Step ' + (i + 1)) }}\n            </div>\n          </ng-template>\n          <div class=\"ngb-stepper-optional\" *ngIf=\"step.optional\">\n            {{ optionalLabel }}\n          </div>\n        </div>\n      </li>\n    </ol>\n  </div>\n\n  <!-- CONTENT -->\n  <div class=\"ngb-stepper-content\" [class.ngb-stepper-content-top]=\"contentPosition === 'top'\">\n    <ng-container *ngIf=\"lazy; else allContent\">\n      <ng-container *ngFor=\"let index of [selectedIndex]\">\n        <div\n          class=\"fade-step\"\n          [style.--ngb-stepper-animation-duration]=\"(disableAnimation ? 0 : animationDuration) + 'ms'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"stepId(index)\"\n          [attr.id]=\"contentId(index)\"\n        >\n          <ng-container *ngTemplateOutlet=\"stepContentTpl; context: { index: index }\"></ng-container>\n          <div\n            *ngIf=\"currentErrorMessage\"\n            class=\"ngb-stepper-error\"\n            role=\"alert\"\n          >\n            {{ currentErrorMessage }}\n          </div>\n        </div>\n      </ng-container>\n    </ng-container>\n\n    <ng-template #allContent>\n      <div\n        class=\"fade-step\"\n        [style.--ngb-stepper-animation-duration]=\"(disableAnimation ? 0 : animationDuration) + 'ms'\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"stepId(selectedIndex)\"\n        [attr.id]=\"contentId(selectedIndex)\"\n      >\n        <ng-container *ngTemplateOutlet=\"stepContentTpl; context: { index: selectedIndex }\"></ng-container>\n        <div\n          *ngIf=\"currentErrorMessage\"\n          class=\"ngb-stepper-error\"\n          role=\"alert\"\n        >\n          {{ currentErrorMessage }}\n        </div>\n      </div>\n    </ng-template>\n  </div>\n\n  <!-- ACTIONS -->\n  <div class=\"ngb-stepper-buttons\">\n    <button\n      type=\"button\"\n      class=\"btn btn-sm btn-outline-secondary\"\n      (click)=\"onCancel()\"\n    >\n      {{ cancelLabel }}\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"btn btn-sm btn-outline-secondary\"\n      (click)=\"onReset()\"\n    >\n      {{ resetLabel }}\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"btn btn-sm btn-outline-secondary\"\n      (click)=\"prev()\"\n      [disabled]=\"selectedIndex <= 0 || !allowRevisit\"\n    >\n      {{ previousLabel }}\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"btn btn-sm btn-primary\"\n      (click)=\"next()\"\n      [disabled]=\"selectedIndex >= steps.length - 1 || steps[selectedIndex]?.disabled\"\n    >\n      {{ nextLabel }}\n    </button>\n  </div>\n</div>\n", styles: [".ngb-stepper{display:flex;flex-direction:column}.ngb-stepper.horizontal .ngb-stepper-header{display:flex;overflow-x:auto}.ngb-stepper.vertical .ngb-stepper-header{display:block}.ngb-stepper-header{margin-bottom:1rem}.ngb-stepper-steps{list-style:none;padding:0;margin:0;display:flex;flex-wrap:nowrap}.ngb-stepper.vertical .ngb-stepper-steps{flex-direction:column}.ngb-stepper-step{position:relative;display:flex;align-items:center;cursor:pointer}.ngb-stepper.horizontal .ngb-stepper-step{padding:.5rem .75rem}.ngb-stepper.vertical .ngb-stepper-step{padding:.5rem 0}.ngb-stepper-step.disabled{cursor:default;opacity:.6}.ngb-stepper-indicator{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;margin-right:.5rem;flex-shrink:0}.ngb-stepper.bootstrap .ngb-stepper-indicator{border:1px solid var(--bs-border-color, #dee2e6);background-color:var(--bs-body-bg, #fff)}.ngb-stepper.bootstrap .ngb-stepper-step.active .ngb-stepper-indicator{background-color:var(--bs-primary, #0d6efd);color:#fff}.ngb-stepper.bootstrap .ngb-stepper-step.done .ngb-stepper-indicator{background-color:var(--bs-success, #198754);color:#fff}.ngb-stepper.bootstrap .ngb-stepper-step.error .ngb-stepper-indicator{background-color:var(--bs-danger, #dc3545);color:#fff}.ngb-stepper-label-container{display:flex;flex-direction:column}.ngb-stepper-label-top{flex-direction:column-reverse}.ngb-stepper-label-bottom{flex-direction:column}.ngb-stepper-label-left{flex-direction:row-reverse}.ngb-stepper-label-right{flex-direction:row}.ngb-stepper-content{position:relative}.ngb-stepper-content-top{order:-1}.ngb-stepper-buttons{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}.ngb-stepper-error{color:var(--bs-danger, #dc3545);font-size:.875rem;margin-top:.25rem}.ngb-stepper-optional{font-size:.75rem;opacity:.7}.ngb-stepper .fade-step{animation:ngb-stepper-fade var(--ngb-stepper-animation-duration, .15s) ease-in-out;animation-fill-mode:both}@keyframes ngb-stepper-fade{0%{opacity:0;transform:translateY(.35rem)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbStepperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbStepperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngb-stepper', standalone: true, imports: [CommonModule, NgbStepLabelDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ngb-stepper\"\n  [class.horizontal]=\"orientation === 'horizontal'\"\n  [class.vertical]=\"orientation === 'vertical'\"\n  [class.ngb-responsive]=\"responsive\"\n  [class.bootstrap]=\"theme === 'bootstrap'\"\n  [class.material]=\"theme === 'material'\"\n  [class.tailwind]=\"theme === 'tailwind'\"\n  role=\"tablist\"\n  [attr.aria-orientation]=\"orientation\"\n>\n  <!-- HEADER / LABELS -->\n  <div class=\"ngb-stepper-header\">\n    <ol class=\"ngb-stepper-steps\" role=\"presentation\">\n      <li\n        *ngFor=\"let step of steps; let i = index\"\n        class=\"ngb-stepper-step\"\n        [class.active]=\"i === selectedIndex\"\n        [class.done]=\"i < selectedIndex && !isStepInError(i)\"\n        [class.error]=\"isStepInError(i)\"\n        [class.disabled]=\"step.disabled\"\n        role=\"tab\"\n        [attr.id]=\"stepId(i)\"\n        [attr.aria-controls]=\"contentId(i)\"\n        [attr.aria-selected]=\"i === selectedIndex\"\n        [attr.aria-disabled]=\"step.disabled || (!allowRevisit && i < visitedFrom && i !== selectedIndex)\"\n        tabindex=\"{{ i === selectedIndex ? 0 : -1 }}\"\n        (click)=\"onHeaderClick(i)\"\n        (keydown.enter)=\"onHeaderKeydown($event, i)\"\n        (keydown.space)=\"onHeaderKeydown($event, i)\"\n      >\n        <div\n          class=\"ngb-stepper-indicator\"\n          [ngClass]=\"indicatorClass(i)\"\n          aria-hidden=\"true\"\n        >\n          <ng-container *ngIf=\"customIconTpl; else defaultIcon\">\n            <ng-container\n              [ngTemplateOutlet]=\"customIconTpl\"\n              [ngTemplateOutletContext]=\"{ index: i, state: stepState(i) }\"\n            ></ng-container>\n          </ng-container>\n          <ng-template #defaultIcon>\n            {{ defaultIconForState(stepState(i), i) }}\n          </ng-template>\n        </div>\n\n        <div\n          class=\"ngb-stepper-label-container\"\n          [ngClass]=\"labelPositionClass\"\n        >\n          <div class=\"ngb-stepper-label\" *ngIf=\"stepLabelTpl; else textLabel\">\n            <ng-container\n              [ngTemplateOutlet]=\"stepLabelTpl\"\n              [ngTemplateOutletContext]=\"{ index: i, step: step }\"\n            ></ng-container>\n          </div>\n          <ng-template #textLabel>\n            <div class=\"ngb-stepper-label-text\">\n              {{ step.label || ('Step ' + (i + 1)) }}\n            </div>\n          </ng-template>\n          <div class=\"ngb-stepper-optional\" *ngIf=\"step.optional\">\n            {{ optionalLabel }}\n          </div>\n        </div>\n      </li>\n    </ol>\n  </div>\n\n  <!-- CONTENT -->\n  <div class=\"ngb-stepper-content\" [class.ngb-stepper-content-top]=\"contentPosition === 'top'\">\n    <ng-container *ngIf=\"lazy; else allContent\">\n      <ng-container *ngFor=\"let index of [selectedIndex]\">\n        <div\n          class=\"fade-step\"\n          [style.--ngb-stepper-animation-duration]=\"(disableAnimation ? 0 : animationDuration) + 'ms'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"stepId(index)\"\n          [attr.id]=\"contentId(index)\"\n        >\n          <ng-container *ngTemplateOutlet=\"stepContentTpl; context: { index: index }\"></ng-container>\n          <div\n            *ngIf=\"currentErrorMessage\"\n            class=\"ngb-stepper-error\"\n            role=\"alert\"\n          >\n            {{ currentErrorMessage }}\n          </div>\n        </div>\n      </ng-container>\n    </ng-container>\n\n    <ng-template #allContent>\n      <div\n        class=\"fade-step\"\n        [style.--ngb-stepper-animation-duration]=\"(disableAnimation ? 0 : animationDuration) + 'ms'\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"stepId(selectedIndex)\"\n        [attr.id]=\"contentId(selectedIndex)\"\n      >\n        <ng-container *ngTemplateOutlet=\"stepContentTpl; context: { index: selectedIndex }\"></ng-container>\n        <div\n          *ngIf=\"currentErrorMessage\"\n          class=\"ngb-stepper-error\"\n          role=\"alert\"\n        >\n          {{ currentErrorMessage }}\n        </div>\n      </div>\n    </ng-template>\n  </div>\n\n  <!-- ACTIONS -->\n  <div class=\"ngb-stepper-buttons\">\n    <button\n      type=\"button\"\n      class=\"btn btn-sm btn-outline-secondary\"\n      (click)=\"onCancel()\"\n    >\n      {{ cancelLabel }}\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"btn btn-sm btn-outline-secondary\"\n      (click)=\"onReset()\"\n    >\n      {{ resetLabel }}\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"btn btn-sm btn-outline-secondary\"\n      (click)=\"prev()\"\n      [disabled]=\"selectedIndex <= 0 || !allowRevisit\"\n    >\n      {{ previousLabel }}\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"btn btn-sm btn-primary\"\n      (click)=\"next()\"\n      [disabled]=\"selectedIndex >= steps.length - 1 || steps[selectedIndex]?.disabled\"\n    >\n      {{ nextLabel }}\n    </button>\n  </div>\n</div>\n", styles: [".ngb-stepper{display:flex;flex-direction:column}.ngb-stepper.horizontal .ngb-stepper-header{display:flex;overflow-x:auto}.ngb-stepper.vertical .ngb-stepper-header{display:block}.ngb-stepper-header{margin-bottom:1rem}.ngb-stepper-steps{list-style:none;padding:0;margin:0;display:flex;flex-wrap:nowrap}.ngb-stepper.vertical .ngb-stepper-steps{flex-direction:column}.ngb-stepper-step{position:relative;display:flex;align-items:center;cursor:pointer}.ngb-stepper.horizontal .ngb-stepper-step{padding:.5rem .75rem}.ngb-stepper.vertical .ngb-stepper-step{padding:.5rem 0}.ngb-stepper-step.disabled{cursor:default;opacity:.6}.ngb-stepper-indicator{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;margin-right:.5rem;flex-shrink:0}.ngb-stepper.bootstrap .ngb-stepper-indicator{border:1px solid var(--bs-border-color, #dee2e6);background-color:var(--bs-body-bg, #fff)}.ngb-stepper.bootstrap .ngb-stepper-step.active .ngb-stepper-indicator{background-color:var(--bs-primary, #0d6efd);color:#fff}.ngb-stepper.bootstrap .ngb-stepper-step.done .ngb-stepper-indicator{background-color:var(--bs-success, #198754);color:#fff}.ngb-stepper.bootstrap .ngb-stepper-step.error .ngb-stepper-indicator{background-color:var(--bs-danger, #dc3545);color:#fff}.ngb-stepper-label-container{display:flex;flex-direction:column}.ngb-stepper-label-top{flex-direction:column-reverse}.ngb-stepper-label-bottom{flex-direction:column}.ngb-stepper-label-left{flex-direction:row-reverse}.ngb-stepper-label-right{flex-direction:row}.ngb-stepper-content{position:relative}.ngb-stepper-content-top{order:-1}.ngb-stepper-buttons{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}.ngb-stepper-error{color:var(--bs-danger, #dc3545);font-size:.875rem;margin-top:.25rem}.ngb-stepper-optional{font-size:.75rem;opacity:.7}.ngb-stepper .fade-step{animation:ngb-stepper-fade var(--ngb-stepper-animation-duration, .15s) ease-in-out;animation-fill-mode:both}@keyframes ngb-stepper-fade{0%{opacity:0;transform:translateY(.35rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], propDecorators: { steps: [{
@@ -1894,14 +2548,14 @@ class NgbSplitterPaneComponent {
     collapsed = false;
     collapsedChange = new EventEmitter();
     template;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbSplitterPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NgbSplitterPaneComponent, isStandalone: true, selector: "ngb-splitter-pane", inputs: { size: "size", min: "min", max: "max", scrollable: "scrollable", collapsible: "collapsible", collapsed: "collapsed" }, outputs: { collapsedChange: "collapsedChange" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: `<ng-template #content>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbSplitterPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: NgbSplitterPaneComponent, isStandalone: true, selector: "ngb-splitter-pane", inputs: { size: "size", min: "min", max: "max", scrollable: "scrollable", collapsible: "collapsible", collapsed: "collapsed" }, outputs: { collapsedChange: "collapsedChange" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: `<ng-template #content>
       <div [style.overflow]="scrollable ? 'auto' : 'hidden'" style="height: 100%; width: 100%;">
         <ng-content></ng-content>
       </div>
     </ng-template>`, isInline: true, styles: [":host{display:block;position:relative}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbSplitterPaneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbSplitterPaneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngb-splitter-pane', standalone: true, template: `<ng-template #content>
       <div [style.overflow]="scrollable ? 'auto' : 'hidden'" style="height: 100%; width: 100%;">
@@ -2133,8 +2787,8 @@ class NgbSplitterComponent {
         nextPercent = Math.max(0, Math.min(100, nextPercent));
         targetPane.size = `${nextPercent}%`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbSplitterComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NgbSplitterComponent, isStandalone: true, selector: "ngb-splitter", inputs: { orientation: "orientation", handleThickness: "handleThickness", handleIconColor: "handleIconColor", verticalMinHeight: "verticalMinHeight", resizable: "resizable", barColor: "barColor", lineColor: "lineColor" }, host: { listeners: { "window:mousemove": "onMouseMove($event)", "window:mouseup": "onMouseUp()" } }, queries: [{ propertyName: "panes", predicate: NgbSplitterPaneComponent }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbSplitterComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: NgbSplitterComponent, isStandalone: true, selector: "ngb-splitter", inputs: { orientation: "orientation", handleThickness: "handleThickness", handleIconColor: "handleIconColor", verticalMinHeight: "verticalMinHeight", resizable: "resizable", barColor: "barColor", lineColor: "lineColor" }, host: { listeners: { "window:mousemove": "onMouseMove($event)", "window:mouseup": "onMouseUp()" } }, queries: [{ propertyName: "panes", predicate: NgbSplitterPaneComponent }], ngImport: i0, template: `
     <div class="splitter-container" [class.vertical]="orientation === 'vertical'"
       [style.min-height]="orientation === 'vertical' ? verticalMinHeight : null"
       [style.height]="orientation === 'vertical' ? verticalMinHeight : null">
@@ -2178,7 +2832,7 @@ class NgbSplitterComponent {
     </div>
   `, isInline: true, styles: [":host{display:block;width:100%}.splitter-container{display:flex;height:100%;width:100%}.splitter-container.vertical{flex-direction:column}.splitbar{background:#ccc;width:5px;position:relative;align-items:center;justify-content:center;flex:0 0 auto;z-index:10}.splitbar.resizable{cursor:col-resize}.splitbar:hover{filter:brightness(90%)}.handle-line{border-radius:2px;opacity:.8;left:45%;position:absolute;top:45%;display:flex;align-items:center;justify-content:center}.splitter-container:not(.vertical) .handle-line{width:2px;height:10px}.pane-wrapper{position:relative;min-width:0;min-height:0;overflow:hidden;flex-shrink:1}.vertical .handle-line{height:2px;width:10px}.vertical .splitbar.resizable{cursor:row-resize}.splitter-container.vertical .splitter-container .splitbar.resizable{cursor:col-resize}.vertical .splitbar{width:100%}.collapse-btn{cursor:pointer;background:#666;width:10px;height:10px;position:absolute;top:50%}.collapse-arrow{font-size:.95rem;-webkit-user-select:none;user-select:none;cursor:pointer;line-height:1;display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;position:absolute;top:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbSplitterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbSplitterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngb-splitter', standalone: true, imports: [CommonModule, NgbSplitterPaneComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="splitter-container" [class.vertical]="orientation === 'vertical'"
@@ -2255,8 +2909,8 @@ class NgbChipsComponent {
     removeLabel;
     remove = new EventEmitter();
     trackById = (_, item) => item.id;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NgbChipsComponent, isStandalone: true, selector: "ngb-chips", inputs: { items: "items", removable: "removable", ariaLabel: "ariaLabel", removeLabel: "removeLabel" }, outputs: { remove: "remove" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: NgbChipsComponent, isStandalone: true, selector: "ngb-chips", inputs: { items: "items", removable: "removable", ariaLabel: "ariaLabel", removeLabel: "removeLabel" }, outputs: { remove: "remove" }, ngImport: i0, template: `
     <div class="ngb-chips" [attr.aria-label]="ariaLabel">
       <span
         *ngFor="let item of items; trackBy: trackById"
@@ -2278,7 +2932,7 @@ class NgbChipsComponent {
     </div>
   `, isInline: true, styles: [":host{display:block}.ngb-chips{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}.ngb-chip{display:inline-flex;align-items:center;gap:.25rem;max-width:100%}.ngb-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngb-chip-remove{border:0;background:transparent;padding:0;line-height:1;cursor:pointer;font-size:1rem;opacity:.85}.ngb-chip-remove:disabled{cursor:default;opacity:.4}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbChipsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngb-chips', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="ngb-chips" [attr.aria-label]="ariaLabel">
@@ -3013,8 +3667,8 @@ class NgbTypeaheadComponent {
             return match;
         return { id: `${value}`, label: `${value}`, value };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbTypeaheadComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NgbTypeaheadComponent, isStandalone: true, selector: "ngb-typeahead", inputs: { data: "data", debounceTime: "debounceTime", characterTyped: "characterTyped", limit: "limit", selectExact: "selectExact", multiSelect: "multiSelect", matchSelection: "matchSelection", showDropdownButton: "showDropdownButton", showClearButton: "showClearButton", updateOnBlur: "updateOnBlur", updateOnTab: "updateOnTab", separator: "separator", chips: "chips", vScroll: "vScroll", vItemSize: "vItemSize", itemTemplate: "itemTemplate", i18n: "i18n" }, outputs: { completeMethod: "completeMethod", onSelect: "onSelect", onUnselect: "onUnselect", onAdd: "onAdd", onFocus: "onFocus", onBlur: "onBlur", onDropdownClick: "onDropdownClick", onClear: "onClear", onInputKeydown: "onInputKeydown", onKeyUp: "onKeyUp", onShow: "onShow", onHide: "onHide", onLazyLoad: "onLazyLoad", selectedItems: "selectedItems", selectionChange: "selectionChange", onChange: "onChange", onScrollEvent: "onScrollEvent" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event)", "document:focusin": "onDocumentFocusIn($event)" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbTypeaheadComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: NgbTypeaheadComponent, isStandalone: true, selector: "ngb-typeahead", inputs: { data: "data", debounceTime: "debounceTime", characterTyped: "characterTyped", limit: "limit", selectExact: "selectExact", multiSelect: "multiSelect", matchSelection: "matchSelection", showDropdownButton: "showDropdownButton", showClearButton: "showClearButton", updateOnBlur: "updateOnBlur", updateOnTab: "updateOnTab", separator: "separator", chips: "chips", vScroll: "vScroll", vItemSize: "vItemSize", itemTemplate: "itemTemplate", i18n: "i18n" }, outputs: { completeMethod: "completeMethod", onSelect: "onSelect", onUnselect: "onUnselect", onAdd: "onAdd", onFocus: "onFocus", onBlur: "onBlur", onDropdownClick: "onDropdownClick", onClear: "onClear", onInputKeydown: "onInputKeydown", onKeyUp: "onKeyUp", onShow: "onShow", onHide: "onHide", onLazyLoad: "onLazyLoad", selectedItems: "selectedItems", selectionChange: "selectionChange", onChange: "onChange", onScrollEvent: "onScrollEvent" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event)", "document:focusin": "onDocumentFocusIn($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NgbTypeaheadComponent),
@@ -3160,7 +3814,7 @@ class NgbTypeaheadComponent {
     </div>
   `, isInline: true, styles: [":host{display:block}.typeahead-root{position:relative}.typeahead-chips-control{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;min-height:calc(1.5em + .75rem + 2px);padding:.375rem .75rem}.typeahead-chips-control input{border:0;outline:0;flex:1 1 9rem;min-width:6rem;padding:0;margin:0;background:transparent}.typeahead-chips-control input:focus{outline:0;box-shadow:none}.typeahead-panel{position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:1050;max-height:240px;overflow:auto;opacity:0;transform:translateY(-.25rem);pointer-events:none;transition:opacity .12s ease,transform .12s ease}.typeahead-panel.show{opacity:1;transform:translateY(0);pointer-events:auto}.typeahead-item{display:flex;align-items:center;gap:.5rem}.typeahead-item-checkbox{display:inline-flex;align-items:center;justify-content:center;width:1.15rem;height:1.15rem}\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: "component", type: NgbChipsComponent, selector: "ngb-chips", inputs: ["items", "removable", "ariaLabel", "removeLabel"], outputs: ["remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbTypeaheadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbTypeaheadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngb-typeahead', standalone: true, imports: [CommonModule, NgbChipsComponent], providers: [
                         {
@@ -3483,8 +4137,8 @@ class NgbTreeComponent {
         }
         return acc;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NgbTreeComponent, isStandalone: true, selector: "ngb-tree", inputs: { nodes: "nodes", type: "type", showCheckbox: "showCheckbox", i18n: "i18n", expandIcon: "expandIcon", collapseIcon: "collapseIcon", plusIcon: "plusIcon", minusIcon: "minusIcon" }, outputs: { expand: "expand", collapse: "collapse", expandAll: "expandAll", collapseAll: "collapseAll", selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "nodeButtons", predicate: ["nodeBtn"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: NgbTreeComponent, isStandalone: true, selector: "ngb-tree", inputs: { nodes: "nodes", type: "type", showCheckbox: "showCheckbox", i18n: "i18n", expandIcon: "expandIcon", collapseIcon: "collapseIcon", plusIcon: "plusIcon", minusIcon: "minusIcon" }, outputs: { expand: "expand", collapse: "collapse", expandAll: "expandAll", collapseAll: "collapseAll", selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "nodeButtons", predicate: ["nodeBtn"], descendants: true, read: ElementRef }], ngImport: i0, template: `
     <div class="d-flex gap-2 mb-2">
       <button type="button" class="btn btn-sm btn-outline-secondary" (click)="expandAllNodes()" [attr.aria-label]="i18n?.expandAll || 'Expand all'">
         {{ i18n?.expandAll || 'Expand all' }}
@@ -3550,7 +4204,7 @@ class NgbTreeComponent {
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgbTreeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngb-tree',