@angular-bootstrap/ngbootstrap 0.0.1

package/fesm2022/angular-bootstrap-ngbootstrap.mjs

@@ -0,0 +1,2624 @@
+import * as i0 from '@angular/core';
+import { Input, Directive, EventEmitter, Output, ChangeDetectionStrategy, Component, inject, Injectable, TemplateRef, QueryList, ContentChildren, ContentChild, InjectionToken, signal, Optional, Inject, ElementRef, HostListener, HostBinding, ViewChild, 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 } from '@angular/forms';
+import { firstValueFrom, isObservable } from 'rxjs';
+
+class NgbCellTemplate {
+    template;
+    field;
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbCellTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[ngbCell]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { field: [{
+                type: Input,
+                args: ['ngbCell']
+            }] } });
+class NgbEditorTemplate {
+    template;
+    field;
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbEditorTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[ngbEditor]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { field: [{
+                type: Input,
+                args: ['ngbEditor']
+            }] } });
+class NgbFilterTemplate {
+    template;
+    field;
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbFilterTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[ngbFilter]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { field: [{
+                type: Input,
+                args: ['ngbFilter']
+            }] } });
+class NgbGlobalFilterTemplate {
+    template;
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbGlobalFilterTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[ngbGlobalFilter]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class NgbRowDetailTemplate {
+    template;
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbRowDetailTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[ngbRowDetail]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+/** Handy constant to import in consumer apps */
+const DATAGRID_TEMPLATE_DIRECTIVES = [
+    NgbCellTemplate, NgbEditorTemplate, NgbFilterTemplate, NgbGlobalFilterTemplate, NgbRowDetailTemplate
+];
+
+class NgbPaginationComponent {
+    page = 1;
+    pageSize = 10;
+    collectionSize = 0;
+    maxSize = 5;
+    pageChange = new EventEmitter();
+    get totalPages() {
+        return Math.max(1, Math.ceil(this.collectionSize / Math.max(1, this.pageSize)));
+    }
+    get pages() {
+        const total = this.totalPages;
+        const max = Math.max(3, this.maxSize | 0);
+        if (total <= max)
+            return Array.from({ length: total }, (_, i) => i + 1);
+        const half = Math.floor(max / 2);
+        let start = Math.max(1, this.page - half);
+        let end = start + max - 1;
+        if (end > total) {
+            end = total;
+            start = end - max + 1;
+        }
+        const nums = Array.from({ length: end - start + 1 }, (_, i) => start + i);
+        const head = start > 1 ? [1, start > 2 ? '…' : 2] : [];
+        const tail = end < total ? [end < total - 1 ? '…' : total - 1, total] : [];
+        return [...head, ...nums, ...tail];
+    }
+    go(p) {
+        if (p < 1 || p > this.totalPages || p === this.page)
+            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: `
+    <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">
+          <button class="page-link" type="button" (click)="go(page - 1)" aria-label="Previous"> <span aria-hidden="true">«</span> </button>
+        </li>
+
+        <li class="page-item" *ngFor="let p of pages" [class.active]="p === page" [class.disabled]="p === '…'">
+          <span *ngIf="p === '…'" class="page-link">…</span>
+          <button *ngIf="p !== '…'" class="page-link" type="button" (click)="go(p)">{{ p }}</button>
+        </li>
+
+        <li class="page-item" [class.disabled]="page === totalPages">
+          <button class="page-link" type="button" (click)="go(page + 1)" aria-label="Next"> <span aria-hidden="true">»</span> </button>
+        </li>
+      </ul>
+    </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: [{
+            type: Component,
+            args: [{
+                    selector: 'ngb-pagination',
+                    standalone: true,
+                    imports: [CommonModule],
+                    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">
+          <button class="page-link" type="button" (click)="go(page - 1)" aria-label="Previous"> <span aria-hidden="true">«</span> </button>
+        </li>
+
+        <li class="page-item" *ngFor="let p of pages" [class.active]="p === page" [class.disabled]="p === '…'">
+          <span *ngIf="p === '…'" class="page-link">…</span>
+          <button *ngIf="p !== '…'" class="page-link" type="button" (click)="go(p)">{{ p }}</button>
+        </li>
+
+        <li class="page-item" [class.disabled]="page === totalPages">
+          <button class="page-link" type="button" (click)="go(page + 1)" aria-label="Next"> <span aria-hidden="true">»</span> </button>
+        </li>
+      </ul>
+    </nav>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { page: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], collectionSize: [{
+                type: Input
+            }], maxSize: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }] } });
+
+class PdfExportAdapter {
+}
+class ExcelExportAdapter {
+}
+class NgbExportService {
+    // Optional injections via inject()
+    pdf = inject(PdfExportAdapter, { optional: true });
+    excel = inject(ExcelExportAdapter, { optional: true });
+    exportPdf(p) {
+        if (!this.pdf)
+            throw new Error('No PdfExportAdapter provided');
+        return this.pdf.export(p);
+    }
+    exportExcel(p) {
+        if (!this.excel)
+            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' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbExportService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class JsPdfAdapter {
+    async export({ fileName, columns, rows, options }) {
+        const { jsPDF } = await import('jspdf');
+        const autoTable = (await import('jspdf-autotable')).default;
+        const doc = new jsPDF({ orientation: options?.landscape ? 'landscape' : 'portrait' });
+        autoTable(doc, { head: [columns], body: rows.map(r => columns.map(k => r[k])), margin: options?.margins });
+        doc.save(`${fileName}.pdf`);
+    }
+}
+
+class XlsxAdapter {
+    async export({ fileName, sheetName, columns, rows }) {
+        const XLSX = await import('xlsx');
+        const header = [columns.map(c => c.title)];
+        const data = rows.map(r => columns.map(c => r[c.key]));
+        const ws = XLSX.utils.aoa_to_sheet([...header, ...data]);
+        const wb = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(wb, ws, sheetName);
+        XLSX.writeFile(wb, `${fileName}.xlsx`);
+    }
+}
+
+// eslint-disable-next-line @angular-eslint/directive-selector
+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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExportButtonDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ngbExportButton]' }]
+        }] });
+
+const EMAIL_RX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+class Datagrid {
+    /** Column definitions to render */
+    columns = [];
+    /** Row data to display */
+    data = [];
+    enableSorting = false;
+    enableFiltering = false; // per-column + global
+    enableGlobalFilter = false; // global search bar
+    enablePagination = false;
+    enableEdit = false;
+    enableDelete = false;
+    pageSizeOptions = [5, 10, 25, 50];
+    enableAdd = false;
+    /** Accessible label (aria-label) applied to the add-row button. */
+    addButtonAriaLabel = 'Add row';
+    /** Visible text rendered inside the add-row button. */
+    addButtonText = '+ Add';
+    /** Accessible label for the global filter input. */
+    globalFilterAriaLabel = 'Search all columns';
+    /** Accessible label announced when expanding a row. */
+    expandRowAriaLabel = 'Expand row';
+    /** Accessible label announced when collapsing a row. */
+    collapseRowAriaLabel = 'Collapse row';
+    /** Accessible label for the PDF export button. */
+    exportPdfAriaLabel = 'Export to PDF';
+    /** Accessible label for the Excel export button. */
+    exportExcelAriaLabel = 'Export to Excel';
+    /** Optional defaults for new rows */
+    newRowDefaults = null;
+    strictEmail = false; // turn off if needed (e.g., intranet emails)
+    editOnRowClick = false;
+    singleExpand = false; // accordion mode: one row expanded at a time
+    exportOptions = {
+        enabled: false,
+        type: 'both',
+        pages: 'current',
+        fileName: 'export'
+    };
+    theme = 'bootstrap';
+    responsive = false;
+    // Data hooks for export
+    dataProviderAll; // used when pages='all'
+    dataProviderSelection; // used when pages='selection'
+    // Grab the directive and its TemplateRef
+    exportButtonDir;
+    exporting = false;
+    rowAdd = new EventEmitter();
+    //  events
+    rowEdit = new EventEmitter();
+    rowSave = new EventEmitter();
+    rowCancel = new EventEmitter();
+    rowDelete = new EventEmitter();
+    sortChange = new EventEmitter();
+    filtersChange = new EventEmitter();
+    pageChange = new EventEmitter();
+    rowDetailTpl;
+    exporter = inject(NgbExportService); // instead of constructor(private exporter: NgbExportService) {}
+    expanded = new Set();
+    fb = inject(FormBuilder);
+    filterForm = this.fb.group({});
+    globalFilterCtrl = new FormControl('', { nonNullable: true });
+    addingNew = false;
+    draftNew = null;
+    errorsNew = {};
+    // --- sorting (from previous step)
+    sort = { active: null, direction: '' };
+    // --- filtering
+    globalFilter = '';
+    filters = {}; // per-column text
+    page = 1;
+    pageSize = 10;
+    /** Inline editing state */
+    editingIndex = null; // index in `paged` view
+    editForm = this.fb.group({});
+    saveAttemptedEdit = false;
+    addForm = this.fb.group({});
+    saveAttemptedNew = false;
+    norm(v) {
+        return (v ?? '').toString().toLowerCase().trim();
+    }
+    keyOf(col) {
+        return col.field;
+    }
+    passesRowFilters(row) {
+        // per-column
+        for (const col of this.columns) {
+            if (!col.filterable)
+                continue;
+            const key = col.field;
+            const q = this.norm(this.filters[key]);
+            if (!q)
+                continue;
+            const cell = this.norm(row[col.field]);
+            if (!cell.includes(q))
+                return false;
+        }
+        // global
+        const g = this.norm(this.globalFilter);
+        if (!g)
+            return true;
+        return this.columns.some(c => this.norm(row[c.field]).includes(g));
+    }
+    getDefaults() {
+        return typeof this.newRowDefaults === 'function'
+            ? this.newRowDefaults() ?? {}
+            : this.newRowDefaults ?? {};
+    }
+    defaultFor(col) {
+        const d = this.getDefaults();
+        const key = col.field;
+        if (key in d)
+            return d[key];
+        switch (col.type) {
+            case 'boolean': return false;
+            case 'number': return '';
+            case 'date': return '';
+            default: return '';
+        }
+    }
+    numberValidator() {
+        const rx = /^-?\d+(\.\d+)?$/;
+        return (c) => c.value === '' || c.value === null || c.value === undefined || rx.test(String(c.value))
+            ? null
+            : { number: true };
+    }
+    dateValidator() {
+        return (c) => {
+            const v = c.value;
+            if (v === '' || v === null || v === undefined)
+                return null;
+            return isNaN(Date.parse(String(v))) ? { date: true } : null;
+        };
+    }
+    buildFormFromRow(row) {
+        const group = {};
+        for (const col of this.columns) {
+            if (col.editable === false)
+                continue; // read-only columns not in form
+            const key = col.field;
+            const initial = row && key in row ? row[key] : this.defaultFor(col);
+            const v = [];
+            if (col.required && col.type !== 'boolean')
+                v.push(Validators.required);
+            if (col.type === 'email') {
+                v.push(this.strictEmail ? this.strictEmailValidator() : Validators.email);
+            }
+            if (col.type === 'number')
+                v.push(this.numberValidator());
+            if (col.type === 'date')
+                v.push(this.dateValidator());
+            // NOTE: If you need "boolean must be true", add Validators.requiredTrue here.
+            group[key] = [initial, v];
+        }
+        return this.fb.group(group);
+    }
+    rowIsValidAgainst(targetErrors) {
+        for (const col of this.columns) {
+            if (col.editable === false)
+                continue;
+            const key = this.keyOf(col);
+            if (targetErrors[key])
+                return false;
+        }
+        return true;
+    }
+    strictEmailValidator() {
+        // simple, pragmatic: local@domain.tld (tld >= 2)
+        const rx = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
+        return (c) => {
+            const v = c.value;
+            if (v === null || v === undefined || v === '')
+                return null; // let "required" handle empties
+            return rx.test(String(v)) ? null : { email: true };
+        };
+    }
+    //Getter for the ng-template
+    get exportButtonTpl() {
+        return this.exportButtonDir?.templateRef ?? null;
+    }
+    // pipeline respects toggles
+    get filtered() {
+        if (!this.enableFiltering)
+            return this.data ?? [];
+        const src = this.data ?? [];
+        return src.filter(r => {
+            // per-column
+            for (const col of this.columns) {
+                if (!col.filterable)
+                    continue;
+                const q = (this.filters[col.field] ?? '').toString().toLowerCase().trim();
+                if (!q)
+                    continue;
+                const cell = (r[col.field] ?? '').toString().toLowerCase().trim();
+                if (!cell.includes(q))
+                    return false;
+            }
+            // global
+            if (this.enableGlobalFilter) {
+                const g = (this.globalFilter ?? '').toString().toLowerCase().trim();
+                if (g)
+                    return this.columns.some(c => (r[c.field] ?? '').toString().toLowerCase().includes(g));
+            }
+            return true;
+        });
+    }
+    compare(a, b) {
+        if (a == null && b == null)
+            return 0;
+        if (a == null)
+            return -1;
+        if (b == null)
+            return 1;
+        if (typeof a === 'string' && typeof b === 'string') {
+            return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
+        }
+        return a < b ? -1 : a > b ? 1 : 0;
+    }
+    get sorted() {
+        if (!this.enableSorting || !this.sort.active || !this.sort.direction)
+            return this.filtered;
+        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;
+    }
+    // pagination (filled in next step)
+    get paged() {
+        if (!this.enablePagination)
+            return this.sorted;
+        const start = (this.page - 1) * this.pageSize;
+        return this.sorted.slice(start, start + this.pageSize);
+    }
+    // getters for template conditions / display
+    get anyFilterable() {
+        return this.enableFiltering && !!this.columns?.some(c => c.filterable);
+    }
+    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 detailColspan() {
+        const actionCols = (this.enableEdit || this.enableDelete) ? 1 : 0;
+        const caretCol = this.rowDetailTpl ? 1 : 0;
+        return this.columns.length + actionCols + caretCol;
+    }
+    headerText(col) {
+        return (col.header ?? col.field ?? '').toString();
+    }
+    columnFilterAriaLabel(col) {
+        return `${this.headerText(col)} filter`;
+    }
+    inputAriaLabel(col) {
+        return this.headerText(col);
+    }
+    ariaSortFor(field) {
+        if (!this.enableSorting || this.sort.active !== field || !this.sort.direction) {
+            return 'none';
+        }
+        return this.sort.direction === 'asc' ? 'ascending' : 'descending';
+    }
+    sortButtonAriaLabel(col) {
+        const header = this.headerText(col);
+        const state = this.sort.active === col.field
+            ? (this.sort.direction === 'asc'
+                ? 'ascending'
+                : this.sort.direction === 'desc'
+                    ? 'descending'
+                    : 'unsorted')
+            : 'unsorted';
+        return `Sort by ${header}. Current sort ${state}.`;
+    }
+    exportAriaLabel(kind) {
+        return kind === 'pdf' ? this.exportPdfAriaLabel : this.exportExcelAriaLabel;
+    }
+    // Helpers to map from paged index → original data index
+    // helper used above
+    dataIndexFromPaged(i) {
+        const row = this.paged[i];
+        return this.data.indexOf(row);
+    }
+    rebuildFilterForm() {
+        const group = {};
+        for (const c of this.columns)
+            if (c.filterable)
+                group[c.field] = [''];
+        this.filterForm = this.fb.group(group);
+        this.filterForm.valueChanges.subscribe(v => {
+            this.page = 1;
+            this.filtersChange.emit({ global: this.globalFilterCtrl.value, columns: v });
+        });
+        this.globalFilterCtrl.valueChanges.subscribe(() => {
+            this.page = 1;
+            this.filtersChange.emit({ global: this.globalFilterCtrl.value, columns: this.filterForm.value });
+        });
+    }
+    cellTplQ;
+    editTplQ;
+    filterTplQ;
+    globalTplQ;
+    /** Internal lookup maps */
+    cellTpls = {};
+    editTpls = {};
+    filterTpls = {};
+    globalTpl = null;
+    toRecord(items) {
+        const arr = Array.isArray(items)
+            ? items
+            : items instanceof QueryList
+                ? items.toArray()
+                : [];
+        return arr.reduce((acc, t) => (acc[t.field] = t, acc), {});
+    }
+    async export(kind) {
+        if (!this.exportOptions?.enabled)
+            return;
+        this.exporting = true;
+        try {
+            const data = await this.resolveDataset();
+            const cols = this.columns.map(c => ({ key: c.field, title: c.header }));
+            if (kind === 'pdf') {
+                await this.exporter.exportPdf({
+                    fileName: this.exportOptions.fileName || 'export',
+                    columns: cols.map(c => c.key),
+                    rows: data,
+                    options: this.exportOptions.pdf
+                });
+            }
+            else {
+                await this.exporter.exportExcel({
+                    fileName: this.exportOptions.fileName || 'export',
+                    sheetName: this.exportOptions.excel?.sheetName || 'Sheet1',
+                    columns: cols,
+                    rows: data
+                });
+            }
+        }
+        finally {
+            this.exporting = false;
+        }
+    }
+    async resolveDataset() {
+        const mode = this.exportOptions?.pages || 'current';
+        if (mode === 'all') {
+            if (!this.dataProviderAll)
+                throw new Error('dataProviderAll required when pages="all"');
+            const d = this.dataProviderAll();
+            return isObservable(d) ? firstValueFrom(d) : (d instanceof Promise ? d : d);
+        }
+        if (mode === 'selection') {
+            if (!this.dataProviderSelection)
+                throw new Error('dataProviderSelection required when pages="selection"');
+            return this.dataProviderSelection();
+        }
+        // current page == your existing `paged` array
+        return this.paged;
+    }
+    ngAfterContentInit() {
+        const rebuild = () => {
+            this.cellTpls = this.toRecord(this.cellTplQ);
+            this.editTpls = this.toRecord(this.editTplQ);
+            this.filterTpls = this.toRecord(this.filterTplQ);
+            this.globalTpl = this.globalTplQ?.first ?? null;
+        };
+        rebuild();
+        this.cellTplQ?.changes.subscribe(rebuild);
+        this.editTplQ?.changes.subscribe(rebuild);
+        this.filterTplQ?.changes.subscribe(rebuild);
+        this.globalTplQ?.changes.subscribe(rebuild);
+    }
+    ngOnChanges(ch) {
+        if (ch['columns'])
+            this.rebuildFilterForm();
+    }
+    startAdd() {
+        if (!this.enableAdd || this.addingNew)
+            return;
+        this.page = 1;
+        this.editingIndex = null;
+        this.addingNew = true;
+        this.addForm = this.buildFormFromRow(); // defaults
+        this.saveAttemptedNew = false;
+    }
+    saveAdd() {
+        if (!this.addingNew || !this.addForm)
+            return;
+        this.saveAttemptedNew = true;
+        this.addForm.markAllAsTouched();
+        this.addForm.updateValueAndValidity();
+        if (this.addForm.invalid)
+            return;
+        const newRow = { ...this.addForm.value };
+        this.rowAdd.emit({ newRow });
+        this.addingNew = false;
+        this.addForm = this.fb.group({});
+        ;
+        this.saveAttemptedNew = false;
+    }
+    cancelAdd() {
+        this.addingNew = false;
+        this.addForm = this.fb.group({});
+        ;
+        this.saveAttemptedNew = false;
+    }
+    startEdit(i) {
+        if (!this.enableEdit)
+            return;
+        this.addingNew = false;
+        this.editingIndex = i;
+        const row = this.paged[i];
+        this.editForm = this.buildFormFromRow(this.paged[i]);
+        this.saveAttemptedEdit = false;
+        const di = this.data.indexOf(row);
+        this.rowEdit.emit({ row: this.data[di], index: di });
+    }
+    saveEdit(i) {
+        if (this.editingIndex !== i || !this.editForm)
+            return;
+        this.saveAttemptedEdit = true;
+        this.editForm.markAllAsTouched();
+        this.editForm.updateValueAndValidity();
+        if (this.editForm.invalid)
+            return;
+        const di = this.data.indexOf(this.paged[i]);
+        const original = this.data[di];
+        const updated = { ...original, ...this.editForm.value };
+        this.rowSave.emit({ original, updated, index: di });
+        this.editingIndex = null;
+        this.editForm = this.fb.group({});
+        this.saveAttemptedEdit = false;
+    }
+    cancelEdit(i) {
+        const di = this.data.indexOf(this.paged[i]);
+        this.rowCancel.emit({ row: this.data[di], index: di });
+        this.editingIndex = null;
+        this.editForm = this.fb.group({}); // empty group
+        this.saveAttemptedEdit = false;
+    }
+    // For the "Add row" draft
+    onNewDraftChange(col) {
+        this.validateInto(col, this.draftNew, this.errorsNew);
+    }
+    validateInto(col, targetDraft, targetErrors) {
+        if (!targetDraft)
+            return;
+        const key = this.keyOf(col);
+        const val = targetDraft[key];
+        let err = '';
+        // required
+        if (col.required) {
+            const empty = val == null || (typeof val === 'string' && val.trim() === '');
+            if (empty)
+                err = 'Required';
+        }
+        // type checks
+        const EMAIL_RX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!err && col.type === 'email' && val && !EMAIL_RX.test(String(val)))
+            err = 'Invalid email';
+        if (!err && col.type === 'number' && val !== '' && val != null && Number.isNaN(Number(val)))
+            err = 'Invalid number';
+        if (!err && col.type === 'date' && val && Number.isNaN(Date.parse(String(val))))
+            err = 'Invalid date';
+        if (!err && col.type === 'boolean' && col.required && val !== true && val !== false)
+            err = 'Required';
+        if (err)
+            targetErrors[key] = err;
+        else
+            delete targetErrors[key];
+    }
+    deleteRow(i) {
+        if (!this.enableDelete)
+            return;
+        const di = this.dataIndexFromPaged(i);
+        this.rowDelete.emit({ row: this.data[di], index: di });
+    }
+    // (optional) better *ngFor performance
+    trackRow = (_, row) => row;
+    toggleSort(field) {
+        if (!this.enableSorting)
+            return;
+        if (this.sort.active !== field)
+            this.sort = { active: field, direction: 'asc' };
+        else
+            this.sort = {
+                active: field,
+                direction: this.sort.direction === 'asc' ? 'desc' : this.sort.direction === 'desc' ? '' : 'asc'
+            };
+        this.page = 1;
+        this.sortChange.emit({ active: this.sort.active, direction: this.sort.direction });
+    }
+    onGlobalFilterChange() {
+        if (!this.enableFiltering || !this.enableGlobalFilter)
+            return;
+        this.page = 1;
+        this.filtersChange.emit({ global: this.globalFilter, columns: { ...this.filters } });
+    }
+    onColumnFilterChange() {
+        if (!this.enableFiltering)
+            return;
+        this.page = 1;
+        this.filtersChange.emit({ global: this.globalFilter, columns: { ...this.filters } });
+    }
+    onPageChange(p) {
+        this.page = p;
+        this.pageChange.emit({ page: this.page, pageSize: this.pageSize });
+    }
+    onPageSizeChange() {
+        this.page = 1;
+        this.pageChange.emit({ page: this.page, pageSize: this.pageSize });
+    }
+    toggleExpand(i) {
+        const isOpen = this.expanded.has(i);
+        if (this.singleExpand) {
+            this.expanded.clear();
+            if (!isOpen)
+                this.expanded.add(i); // open the clicked row, or close all if it was open
+        }
+        else {
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+            isOpen ? this.expanded.delete(i) : this.expanded.add(i);
+        }
+    }
+    isExpanded(i) {
+        return this.expanded.has(i);
+    }
+    onRowClick(ev, i) {
+        if (!this.editOnRowClick)
+            return;
+        if (this.addingNew || this.editingIndex === i)
+            return;
+        const el = ev.target;
+        if (el.closest('button, a, input, select, textarea, label, .no-edit-trigger'))
+            return;
+        this.startEdit(i);
+    }
+    onPage(p) {
+        if (p < 1)
+            return;
+        this.page = p;
+        this.pageChange.emit({ page: this.page, pageSize: this.pageSize });
+    }
+    onPageSize(sz) {
+        this.pageSize = Number(sz) || this.pageSize;
+        this.page = 1; // reset to first page when size changes
+        this.pageChange.emit({ page: this.page, pageSize: this.pageSize });
+    }
+    asBool(v) {
+        return typeof v === 'boolean' ? v : !!v?.enabled;
+    }
+    triggerExport(kind) {
+        this.export(kind);
+    }
+    isResponsiveEnabled() {
+        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", dataProviderAll: "dataProviderAll", dataProviderSelection: "dataProviderSelection", pageSize: "pageSize" }, outputs: { rowAdd: "rowAdd", rowEdit: "rowEdit", rowSave: "rowSave", rowCancel: "rowCancel", rowDelete: "rowDelete", sortChange: "sortChange", filtersChange: "filtersChange", pageChange: "pageChange" }, providers: [
+            { provide: PdfExportAdapter, useClass: JsPdfAdapter },
+            { provide: ExcelExportAdapter, useClass: XlsxAdapter }
+        ], queries: [{ propertyName: "exportButtonDir", first: true, predicate: ExportButtonDirective, descendants: true }, { propertyName: "rowDetailTpl", first: true, predicate: NgbRowDetailTemplate, descendants: true }, { propertyName: "cellTplQ", predicate: NgbCellTemplate }, { propertyName: "editTplQ", predicate: NgbEditorTemplate }, { propertyName: "filterTplQ", predicate: NgbFilterTemplate }, { propertyName: "globalTplQ", predicate: NgbGlobalFilterTemplate }], usesOnChanges: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<div class=\"ngb-grid\" [attr.data-theme]=\"theme\" [class.ngb-responsive]=\"isResponsiveEnabled()\">\n  <!-- Export toolbar -->\n  <div class=\"d-flex justify-content-end mb-2\" *ngIf=\"exportOptions?.enabled\">\n    <ng-container *ngIf=\"exportButtonTpl; else defaultExportBtns\"\n                  [ngTemplateOutlet]=\"exportButtonTpl\"\n                  [ngTemplateOutletContext]=\"{ $implicit: triggerExport }\">\n    </ng-container>\n\n    <ng-template #defaultExportBtns>\n      <button type=\"button\"\n              class=\"btn btn-sm btn-outline-secondary me-2\"\n              *ngIf=\"exportOptions.type === 'pdf' || exportOptions.type === 'both'\"\n              [disabled]=\"exporting\"\n              (click)=\"export('pdf')\"\n              [attr.aria-label]=\"exportAriaLabel('pdf')\">\n        Export to PDF\n      </button>\n      <button type=\"button\"\n              class=\"btn btn-sm btn-outline-secondary\"\n              *ngIf=\"exportOptions.type === 'excel' || exportOptions.type === 'both'\"\n              [disabled]=\"exporting\"\n              (click)=\"export('excel')\"\n              [attr.aria-label]=\"exportAriaLabel('excel')\">\n        Export to Excel\n      </button>\n    </ng-template>\n  </div>\n  <div class=\"d-flex justify-content-end mb-2\" *ngIf=\"enableAdd\">\n    <button\n      type=\"button\"\n      class=\"btn btn-sm btn-primary\"\n      (click)=\"startAdd()\"\n      [disabled]=\"addingNew\"\n      [attr.aria-label]=\"addButtonAriaLabel || addButtonText\"\n    >\n      {{ addButtonText }}\n    </button>\n  </div>\n  <!-- Global filter -->\n  <div class=\"mb-2\" *ngIf=\"enableFiltering && enableGlobalFilter\">\n    <ng-container\n      *ngIf=\"globalTpl; else defaultGlobalFilter\"\n      [ngTemplateOutlet]=\"globalTpl?.template\"\n      [ngTemplateOutletContext]=\"{ $implicit: globalFilterCtrl }\"\n    >\n    </ng-container>\n\n    <ng-template #defaultGlobalFilter>\n      <input\n        type=\"search\"\n        class=\"form-control form-control-sm\"\n        placeholder=\"Search all columns...\"\n        [formControl]=\"globalFilterCtrl\"\n        [attr.aria-label]=\"globalFilterAriaLabel\"\n      />\n    </ng-template>\n  </div>\n\n  <table class=\"table table-bordered\"\n         role=\"grid\"\n         [attr.aria-readonly]=\"(enableEdit || enableAdd) ? 'false' : 'true'\">\n    <thead class=\"thead-light\">\n      <tr>\n      <th *ngIf=\"rowDetailTpl\" style=\"width:1%\" scope=\"col\" aria-hidden=\"true\"></th>\n        <th\n          *ngFor=\"let col of columns\"\n          [attr.data-title]=\"col.header\"\n          [class.sortable]=\"enableSorting && col.sortable\"\n          scope=\"col\"\n          [attr.aria-sort]=\"enableSorting && col.sortable ? ariaSortFor(col.field) : null\"\n        >\n          <ng-container *ngIf=\"enableSorting && col.sortable; else plainHeader\">\n            <button\n              type=\"button\"\n              class=\"btn btn-link p-0 text-start w-100\"\n              (click)=\"toggleSort(col.field)\"\n              [attr.aria-label]=\"sortButtonAriaLabel(col)\"\n            >\n              <span>{{ col.header }}</span>\n              <span\n                class=\"sort-indicator\"\n                *ngIf=\"enableSorting && sort.active === col.field\"\n                aria-hidden=\"true\"\n              >\n                {{\n                  sort.direction === 'asc'\n                    ? '\u25B2'\n                    : sort.direction === 'desc'\n                    ? '\u25BC'\n                    : ''\n                }}\n              </span>\n            </button>\n          </ng-container>\n          <ng-template #plainHeader>\n            <span>{{ col.header }}</span>\n          </ng-template>\n        </th>\n        <th\n          *ngIf=\"enableEdit || enableDelete\"\n          class=\"text-center\"\n          scope=\"col\"\n          style=\"width: 1%\"\n        >\n          Actions\n        </th>\n      </tr>\n\n      <!-- Per-column filters -->\n      <tr *ngIf=\"anyFilterable\" [formGroup]=\"filterForm\">\n        <th *ngFor=\"let col of columns\" [attr.data-title]=\"col.header\">\n          <ng-container *ngIf=\"col.filterable\">\n            <ng-container *ngIf=\"filterTpls[col.field] as ft; else defaultFilter\">\n              <ng-container\n                [ngTemplateOutlet]=\"ft.template\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: filterForm.get(col.field),\n                  control: filterForm.get(col.field),\n                  col: col\n                }\"\n              >\n              </ng-container>\n            </ng-container>\n            <ng-template #defaultFilter>\n              <input\n                type=\"text\"\n                class=\"form-control form-control-sm\"\n                [formControlName]=\"col.field\"\n                [attr.aria-label]=\"columnFilterAriaLabel(col)\"\n              />\n            </ng-template>\n          </ng-container>\n        </th>\n        <th *ngIf=\"enableEdit || enableDelete\"></th>\n      </tr>\n    </thead>\n\n  <tbody>\n    <!-- ADD NEW ROW -->\n    <tr *ngIf=\"addingNew\" [formGroup]=\"addForm\">\n      <!-- blank caret cell to keep alignment when detail column is present -->\n      <td *ngIf=\"rowDetailTpl\"></td>\n\n      <td *ngFor=\"let col of columns\" [attr.data-title]=\"col.header\">\n        <ng-container [ngSwitch]=\"col.type\">\n          <!-- boolean -->\n          <div\n            *ngSwitchCase=\"'boolean'\"\n            class=\"form-check m-0\"\n            [class.is-invalid]=\"(addForm.get(col.field)?.touched || saveAttemptedNew) && addForm.get(col.field)?.invalid\">\n            <input\n              type=\"checkbox\"\n              class=\"form-check-input\"\n              [formControlName]=\"col.field\"\n              [attr.aria-label]=\"inputAriaLabel(col)\"\n              [attr.aria-invalid]=\"(addForm.get(col.field)?.touched || saveAttemptedNew) && addForm.get(col.field)?.invalid ? 'true' : null\"\n              [attr.aria-describedby]=\"(addForm.get(col.field)?.touched || saveAttemptedNew) && addForm.get(col.field)?.invalid ? 'add-error-' + col.field : null\"\n            />\n          </div>\n\n          <!-- number/email/date/text -->\n          <input\n            *ngSwitchDefault\n            class=\"form-control form-control-sm\"\n            [class.is-invalid]=\"(addForm.get(col.field)?.touched || saveAttemptedNew) && addForm.get(col.field)?.invalid\"\n            [attr.type]=\"col.type === 'number' ? 'number' :\n                        col.type === 'email'  ? 'email'  :\n                        col.type === 'date'   ? 'date'   : 'text'\"\n            [formControlName]=\"col.field\"\n            [attr.aria-label]=\"inputAriaLabel(col)\"\n            [attr.aria-invalid]=\"(addForm.get(col.field)?.touched || saveAttemptedNew) && addForm.get(col.field)?.invalid ? 'true' : null\"\n            [attr.aria-describedby]=\"(addForm.get(col.field)?.touched || saveAttemptedNew) && addForm.get(col.field)?.invalid ? 'add-error-' + col.field : null\"\n          />\n        </ng-container>\n\n        <div class=\"invalid-feedback d-block\"\n            *ngIf=\"(addForm.get(col.field)?.touched || saveAttemptedNew) && addForm.get(col.field)?.errors as e\"\n            [attr.id]=\"'add-error-' + col.field\"\n            role=\"alert\">\n          <ng-container *ngIf=\"e['required']\">Required</ng-container>\n          <ng-container *ngIf=\"e['email']\">Invalid email</ng-container>\n          <ng-container *ngIf=\"e['number']\">Invalid number</ng-container>\n          <ng-container *ngIf=\"e['date']\">Invalid date</ng-container>\n        </div>\n      </td>\n\n      <td *ngIf=\"enableEdit || enableDelete\" class=\"text-nowrap text-center\">\n        <button type=\"button\" class=\"btn btn-sm btn-success me-1\" (click)=\"saveAdd()\" [disabled]=\"addForm.invalid\">Save</button>\n        <button type=\"button\" class=\"btn btn-sm btn-secondary\" (click)=\"cancelAdd()\">Cancel</button>\n      </td>\n    </tr>\n\n    <!-- DATA ROWS + DETAIL ROWS -->\n    <ng-container *ngFor=\"let row of paged; let i = index; trackBy: trackRow\">\n\n      <!-- DATA ROW (click-to-edit supported) -->\n      <tr (click)=\"onRowClick($event, i)\" [formGroup]=\"editForm\">\n\n        <!-- caret/expander cell (left-most) -->\n        <td *ngIf=\"rowDetailTpl\" class=\"text-center align-middle\">\n            <button\n              type=\"button\"\n              class=\"expand btn btn-link p-0\"\n              (click)=\"$event.stopPropagation(); toggleExpand(i)\"\n              [attr.aria-expanded]=\"isExpanded(i)\"\n              [attr.aria-controls]=\"'dg-row-detail-' + i\"\n              [attr.aria-label]=\"isExpanded(i) ? collapseRowAriaLabel : expandRowAriaLabel\">\n              {{ isExpanded(i) ? '-' : '+' }}\n            </button>\n        </td>\n\n        <!-- DATA CELLS -->\n        <td *ngFor=\"let col of columns\" [attr.data-title]=\"col.header\">\n          <!-- EDIT MODE -->\n          <ng-container *ngIf=\"editingIndex === i && (col.editable ?? true); else readCell\">\n            <!-- editor template override -->\n            <ng-container *ngIf=\"editTpls[col.field] as et; else defaultEditor\"\n                          [ngTemplateOutlet]=\"et.template\"\n                          [ngTemplateOutletContext]=\"{\n                            $implicit: editForm.get(col.field),\n                            control: editForm.get(col.field),\n                            row: row, col: col, form: editForm, index: i, isNew: false\n                          }\">\n            </ng-container>\n\n            <!-- default editors -->\n            <ng-template #defaultEditor>\n              <ng-container [ngSwitch]=\"col.type\">\n                <div *ngSwitchCase=\"'boolean'\" class=\"form-check m-0\">\n                  <input type=\"checkbox\"\n                         class=\"form-check-input\"\n                         [formControlName]=\"col.field\"\n                         [attr.aria-label]=\"inputAriaLabel(col)\"\n                         [attr.aria-invalid]=\"(editForm?.touched || saveAttemptedEdit) && editForm?.get(col.field)?.invalid ? 'true' : null\"\n                         [attr.aria-describedby]=\"(editForm?.touched || saveAttemptedEdit) && editForm?.get(col.field)?.invalid ? 'edit-error-' + col.field : null\" />\n                </div>\n                <select *ngSwitchCase=\"'select'\"\n                        class=\"form-select form-select-sm\"\n                        [formControlName]=\"col.field\"\n                        [attr.aria-label]=\"inputAriaLabel(col)\">\n                  <option *ngFor=\"let o of col.options ?? []\" [ngValue]=\"o.value\">{{ o.label }}</option>\n                </select>\n                <input *ngSwitchDefault\n                      class=\"form-control form-control-sm\"\n                      [attr.type]=\"col.type === 'number' ? 'number' :\n                                    col.type === 'email'  ? 'email'  :\n                                    col.type === 'date'   ? 'date'   : 'text'\"\n                      [formControlName]=\"col.field\"\n                      [attr.aria-label]=\"inputAriaLabel(col)\"\n                      [attr.aria-invalid]=\"(editForm?.touched || saveAttemptedEdit) && editForm?.get(col.field)?.invalid ? 'true' : null\"\n                      [attr.aria-describedby]=\"(editForm?.touched || saveAttemptedEdit) && editForm?.get(col.field)?.invalid ? 'edit-error-' + col.field : null\" />\n              </ng-container>\n\n              <div class=\"invalid-feedback d-block\"\n                  *ngIf=\"(editForm?.touched || saveAttemptedEdit) && editForm?.get(col.field)?.errors as e\"\n                  [attr.id]=\"'edit-error-' + col.field\"\n                  role=\"alert\">\n                <span *ngIf=\"e['required']\">Required</span>\n                <span *ngIf=\"e['email']\">Invalid email</span>\n                <span *ngIf=\"e['number']\">Invalid number</span>\n                <span *ngIf=\"e['date']\">Invalid date</span>\n              </div>\n            </ng-template>\n          </ng-container>\n\n          <!-- READ MODE (with optional cell template) -->\n          <ng-template #readCell>\n            <ng-container *ngIf=\"cellTpls[col.field] as ct; else defaultCell\"\n                          [ngTemplateOutlet]=\"ct.template\"\n                          [ngTemplateOutletContext]=\"{ $implicit: row[col.field], row: row, col: col, index: i }\">\n            </ng-container>\n            <ng-template #defaultCell>\n              <ng-container [ngSwitch]=\"col.type\">\n                <span *ngSwitchCase=\"'boolean'\">{{ row[col.field] ? 'Yes' : 'No' }}</span>\n                <span *ngSwitchDefault>{{ row[col.field] }}</span>\n              </ng-container>\n            </ng-template>\n          </ng-template>\n        </td>\n\n        <!-- ACTIONS -->\n        <td *ngIf=\"enableEdit || enableDelete\" class=\"text-nowrap text-center\">\n          <ng-container *ngIf=\"editingIndex !== i; else editBtns\">\n            <button type=\"button\" *ngIf=\"enableEdit\" class=\"btn btn-sm btn-outline-primary me-1 no-edit-trigger\" (click)=\"startEdit(i)\">Edit</button>\n            <button type=\"button\" *ngIf=\"enableDelete\" class=\"btn btn-sm btn-outline-danger no-edit-trigger\" (click)=\"deleteRow(i)\">Delete</button>\n          </ng-container>\n          <ng-template #editBtns>\n            <button type=\"button\" class=\"btn btn-sm btn-success me-1\" (click)=\"saveEdit(i)\" [disabled]=\"editForm.invalid\">Save</button>\n            <button type=\"button\" class=\"btn btn-sm btn-secondary\" (click)=\"cancelEdit(i)\">Cancel</button>\n          </ng-template>\n        </td>\n      </tr>\n\n      <!-- DETAIL ROW (spans all columns) -->\n      <tr *ngIf=\"rowDetailTpl && isExpanded(i)\" [attr.id]=\"'dg-row-detail-' + i\">\n        <td [attr.colspan]=\"detailColspan\" role=\"region\">\n          <ng-container [ngTemplateOutlet]=\"rowDetailTpl.template\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\">\n          </ng-container>\n        </td>\n      </tr>\n\n    </ng-container>\n  </tbody>\n\n  </table>\n\n  <!-- Footer (left = count, center = pagination, right = page size) -->\n  <div *ngIf=\"enablePagination\" class=\"d-flex align-items-center justify-content-between mt-2\">\n    <!-- left: count -->\n    <div class=\"small text-muted\" aria-live=\"polite\">\n        {{ startIndex }} - {{ endIndex }} of {{ sorted.length }}\n\n    </div>\n\n    <!-- center: pager -->\n    <div class=\"flex-grow-1 d-flex justify-content-center\">\n      <ngb-pagination\n        [page]=\"page\"\n        [pageSize]=\"pageSize\"\n        [collectionSize]=\"sorted.length\"\n        [maxSize]=\"5\"\n        (pageChange)=\"onPage($event)\">\n      </ngb-pagination>\n    </div>\n\n    <!-- right: rows per page -->\n    <div class=\"d-flex align-items-center gap-2\">\n      <label class=\"form-label form-label-sm mb-0\" for=\"pageSize\">Rows:</label>\n      <select\n        id=\"pageSize\"\n        class=\"form-select form-select-sm\"\n        [(ngModel)]=\"pageSize\"\n        (ngModelChange)=\"onPageSize($event)\"\n        aria-label=\"Rows per page\">\n        <option *ngFor=\"let s of pageSizeOptions\" [value]=\"s\">{{ s }}</option>\n      </select>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.table{margin-bottom:.5rem}th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sort-indicator{margin-left:.35rem;font-size:.75rem}.expand{cursor:pointer;font-size:24px;line-height:18px;display:block}.ngb-grid[data-theme=material]{--ngb-primary: #3f51b5}.ngb-grid[data-theme=material] .btn{border-color:var(--ngb-primary)}.ngb-grid[data-theme=material] table.table th,.ngb-grid[data-theme=material] table.table td{border-bottom:1px solid #e5e7eb}.ngb-grid[data-theme=tailwind]{--ngb-primary: rgb(29 78 216)}.ngb-grid[data-theme=tailwind] .btn{border-color:var(--ngb-primary);border-radius:.75rem}.ngb-grid[data-theme=tailwind] table.table th,.ngb-grid[data-theme=tailwind] table.table td{border-bottom:1px solid #e5e7eb;padding:.5rem}.ngb-responsive .table{width:100%}@media(max-width:768px){.ngb-responsive thead{display:none}.ngb-responsive tbody tr{display:grid;grid-template-columns:1fr;gap:.5rem;border:1px solid #e5e7eb;border-radius:.75rem;padding:.75rem;margin-bottom:.75rem}.ngb-responsive tbody td{display:grid;grid-template-columns:8rem 1fr}.ngb-responsive tbody td:before{content:attr(data-title);font-weight:600;opacity:.75;padding-right:.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgbPaginationComponent, selector: "ngb-pagination", inputs: ["page", "pageSize", "collectionSize", "maxSize"], outputs: ["pageChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Datagrid, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngb-datagrid', imports: [CommonModule, FormsModule, NgbPaginationComponent, ReactiveFormsModule], 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"] }]
+        }], propDecorators: { columns: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], enableSorting: [{
+                type: Input
+            }], enableFiltering: [{
+                type: Input
+            }], enableGlobalFilter: [{
+                type: Input
+            }], enablePagination: [{
+                type: Input
+            }], enableEdit: [{
+                type: Input
+            }], enableDelete: [{
+                type: Input
+            }], pageSizeOptions: [{
+                type: Input
+            }], enableAdd: [{
+                type: Input
+            }], addButtonAriaLabel: [{
+                type: Input
+            }], addButtonText: [{
+                type: Input
+            }], globalFilterAriaLabel: [{
+                type: Input
+            }], expandRowAriaLabel: [{
+                type: Input
+            }], collapseRowAriaLabel: [{
+                type: Input
+            }], exportPdfAriaLabel: [{
+                type: Input
+            }], exportExcelAriaLabel: [{
+                type: Input
+            }], newRowDefaults: [{
+                type: Input
+            }], strictEmail: [{
+                type: Input
+            }], editOnRowClick: [{
+                type: Input
+            }], singleExpand: [{
+                type: Input
+            }], exportOptions: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], responsive: [{
+                type: Input
+            }], dataProviderAll: [{
+                type: Input
+            }], dataProviderSelection: [{
+                type: Input
+            }], exportButtonDir: [{
+                type: ContentChild,
+                args: [ExportButtonDirective]
+            }], rowAdd: [{
+                type: Output
+            }], rowEdit: [{
+                type: Output
+            }], rowSave: [{
+                type: Output
+            }], rowCancel: [{
+                type: Output
+            }], rowDelete: [{
+                type: Output
+            }], sortChange: [{
+                type: Output
+            }], filtersChange: [{
+                type: Output
+            }], pageChange: [{
+                type: Output
+            }], rowDetailTpl: [{
+                type: ContentChild,
+                args: [NgbRowDetailTemplate]
+            }], pageSize: [{
+                type: Input
+            }], cellTplQ: [{
+                type: ContentChildren,
+                args: [NgbCellTemplate]
+            }], editTplQ: [{
+                type: ContentChildren,
+                args: [NgbEditorTemplate]
+            }], filterTplQ: [{
+                type: ContentChildren,
+                args: [NgbFilterTemplate]
+            }], globalTplQ: [{
+                type: ContentChildren,
+                args: [NgbGlobalFilterTemplate]
+            }] } });
+
+class NgbLiveAnnouncer {
+    node = null;
+    announce(message) {
+        if (!this.node) {
+            this.node = document.createElement('div');
+            this.node.setAttribute('aria-live', 'polite');
+            this.node.setAttribute('aria-atomic', 'true');
+            this.node.style.position = 'fixed';
+            this.node.style.width = '1px';
+            this.node.style.height = '1px';
+            this.node.style.overflow = 'hidden';
+            this.node.style.clip = 'rect(1px,1px,1px,1px)';
+            this.node.style.whiteSpace = 'nowrap';
+            document.body.appendChild(this.node);
+        }
+        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' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbLiveAnnouncer, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+const DND_LIVE_ANNOUNCE = new InjectionToken('DND_LIVE_ANNOUNCE', { providedIn: 'root', factory: () => null });
+
+const DND_I18N = new InjectionToken('DND_I18N');
+const defaultDndI18n = {
+    listLabel: (n) => n ?? 'List',
+    pickedUp: () => 'Picked up. Use Arrow keys to move, Enter to drop, Escape to cancel.',
+    dropped: () => 'Dropped.',
+    moveToIndex: (i, t) => `Moved to position ${i} of ${t}.`,
+    dropHere: () => 'Drop here',
+    cannotDropHere: () => 'Cannot drop here'
+};
+
+// drag-state.service.ts
+class NgbDndState {
+    active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
+    store = new Map();
+    currentId = null; // ✅ track current session id
+    // Public so directives can read strings and announce
+    i18n = defaultDndI18n;
+    announce;
+    constructor(announceFn, i18n) {
+        if (i18n)
+            this.i18n = i18n;
+        if (announceFn)
+            this.announce = announceFn;
+    }
+    createSession(session) {
+        const id = 'ngb-dnd-' + (crypto?.randomUUID?.() ?? Math.random().toString(36).slice(2));
+        this.store.set(id, session);
+        this.currentId = id; // ✅ remember current
+        this.active.set(true);
+        return id;
+    }
+    get(id) {
+        if (!id)
+            return null;
+        return this.store.get(id) ?? null;
+    }
+    getCurrent() {
+        return this.currentId ? (this.store.get(this.currentId) ?? null) : null;
+    }
+    clear(id) {
+        if (id)
+            this.store.delete(id);
+        if (this.currentId === id)
+            this.currentId = null;
+        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' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbDndState, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DND_LIVE_ANNOUNCE]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DND_I18N]
+                }] }] });
+
+class NgbDndListDirective {
+    el = inject((ElementRef));
+    state = inject(NgbDndState);
+    dndChildrenKey = 'children';
+    /** Bind your array here: <div [ngbDndList]="items"> */
+    list;
+    /** Optional: group barrier across lists */
+    dndGroup;
+    /** Disable this list */
+    dndDisabled = false;
+    /** NEW: clone if source wasn't a list (e.g. palette) */
+    dndCloneOnDrop = false;
+    /** NEW: custom clone function */
+    dndCloneFn;
+    dndIsPalette = false;
+    dndCanDrop = true;
+    // (optional) visual feedback while hovering a denied list
+    _denied = false;
+    get denied() { return this._denied; }
+    dndAriaLabel;
+    get ariaLabel() { return this.dndAriaLabel || null; }
+    /** Fires after item is inserted */
+    dndDropped = new EventEmitter();
+    role = 'list';
+    hostClass = true;
+    // NEW: when the pointer is over this list while dragging
+    hover = false;
+    get isOver() { return this.hover; }
+    // NEW: reflect whether the current drag can drop here (for CSS)
+    canDrop = null;
+    get dataDropValid() {
+        // values: "true" | "false" | null (attribute omitted)
+        return this.canDrop === true ? 'true' : this.canDrop === false ? 'false' : null;
+    }
+    placeholder;
+    lastIndex = -1;
+    onDragEnter(ev) {
+        if (this.dndDisabled)
+            return;
+        const s = this.getSession(ev);
+        // If there is an active drag and groups match, indicate hover
+        if (s) {
+            ev.preventDefault();
+            this.hover = true;
+            this.canDrop = true; // group check already done in getSession
+        }
+        else {
+            // Drag exists but not compatible with this list (group mismatch)
+            this.hover = true;
+            this.canDrop = false;
+        }
+    }
+    onDragOver(ev) {
+        if (this.dndDisabled)
+            return;
+        const s = this.getSession(ev);
+        if (!s) {
+            // Not a compatible session → show invalid
+            this.hover = true;
+            this.canDrop = false;
+            return;
+        }
+        ev.preventDefault();
+        this.hover = true;
+        this.canDrop = true;
+        try {
+            if (ev.dataTransfer)
+                ev.dataTransfer.dropEffect = this.dndCloneOnDrop ? 'copy' : 'move';
+        }
+        catch { }
+        this.ensurePlaceholder();
+        const idx = this.indexFromPointer(ev);
+        if (idx !== this.lastIndex) {
+            this.lastIndex = idx;
+            this.positionPlaceholderAt(idx);
+        }
+    }
+    onDragLeave(ev) {
+        // Only reset when actually leaving this list (not moving between children)
+        if (!this.el.nativeElement.contains(ev.relatedTarget)) {
+            this.removePlaceholder();
+            this.lastIndex = -1;
+            this.hover = false;
+            this.canDrop = null;
+        }
+    }
+    onDocumentDrop(ev) {
+        const host = this.el.nativeElement;
+        if (!host.contains(ev.target))
+            return;
+        const anyEv = ev;
+        if (anyEv.__ngbHandled)
+            return;
+        anyEv.__ngbHandled = true;
+        ev.preventDefault();
+        this.performDrop(ev);
+        // reset visual state
+        this.hover = false;
+        this.canDrop = null;
+    }
+    onDrop(ev) {
+        if (this.dndDisabled)
+            return;
+        const anyEv = ev;
+        if (anyEv.__ngbHandled)
+            return;
+        anyEv.__ngbHandled = true;
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.performDrop(ev);
+        // reset visual state
+        this.hover = false;
+        this.canDrop = null;
+    }
+    // helpers
+    getSession(ev) {
+        // Chrome often returns "" during dragover/enter; try service fallback
+        const sid = ev.dataTransfer?.getData('text/ngb-dnd') || null;
+        let s = sid ? this.state.get(sid) : null;
+        if (!s)
+            s = this.state.getCurrent(); // ✅ fallback
+        if (!s)
+            return null;
+        if (this.dndGroup && s.group && s.group !== this.dndGroup)
+            return null;
+        return s;
+    }
+    ensurePlaceholder() {
+        if (!this.placeholder) {
+            this.placeholder = document.createElement('div');
+            this.placeholder.className = 'ngb-dnd-placeholder';
+            this.placeholder.setAttribute('aria-hidden', 'true');
+            this.el.nativeElement.appendChild(this.placeholder);
+        }
+    }
+    removePlaceholder() {
+        if (this.placeholder?.parentElement)
+            this.placeholder.parentElement.removeChild(this.placeholder);
+        this.placeholder = undefined;
+    }
+    positionPlaceholderAt(index) {
+        const host = this.el.nativeElement;
+        const children = Array.from(host.children).filter(c => c !== this.placeholder);
+        const before = children[index];
+        if (!before)
+            host.appendChild(this.placeholder);
+        else
+            host.insertBefore(this.placeholder, before);
+    }
+    indexFromPointer(ev) {
+        const host = this.el.nativeElement;
+        const y = ev.clientY;
+        const children = Array.from(host.children).filter(c => c !== this.placeholder);
+        for (let i = 0; i < children.length; i++) {
+            const r = children[i].getBoundingClientRect();
+            const mid = r.top + r.height / 2;
+            if (y < mid)
+                return i;
+        }
+        return children.length;
+    }
+    cloneItem(i) {
+        if (this.dndCloneFn)
+            return this.dndCloneFn(i);
+        // fallback shallow clone
+        if (Array.isArray(i))
+            return i.slice();
+        if (i && typeof i === 'object')
+            return { ...i };
+        return i; // primitive
+    }
+    isDroppingIntoOwnDescendant(item, targetList) {
+        const key = this.dndChildrenKey;
+        if (!key || !item)
+            return false;
+        const stack = [];
+        if (Array.isArray(item[key]))
+            stack.push(item[key]);
+        while (stack.length) {
+            const arr = stack.pop();
+            if (arr === targetList)
+                return true;
+            for (const child of arr) {
+                const kids = child?.[key];
+                if (Array.isArray(kids))
+                    stack.push(kids);
+            }
+        }
+        return false;
+    }
+    /**
+     * Build a guard payload using whatever drag context you already store.
+     * If some fields don’t exist in your code, the fallbacks keep it working.
+     */
+    _buildGuardPayload(dstIndex) {
+        const anyThis = this;
+        // Try your known drag context fields; fall back harmlessly if absent
+        const dragItem = anyThis._dragCtx?.item ?? anyThis.dragItem ?? anyThis._drag?.item ?? null;
+        const srcList = anyThis._dragCtx?.src?.list ?? anyThis.srcList ?? anyThis._drag?.srcList ?? [];
+        const srcIndex = anyThis._dragCtx?.src?.index ?? anyThis.srcIndex ?? anyThis._drag?.srcIndex ?? -1;
+        const dstList = this.list;
+        return {
+            dragItem,
+            srcList,
+            srcIndex,
+            dstList,
+            dstIndex,
+            isExternal: srcList !== dstList,
+        };
+    }
+    /**
+     * Compute destination index from the event position (no placeholder var needed).
+     * Uses vertical list heuristics; adjust for horizontal if your list is horizontal.
+     */
+    _computeDropIndex(ev) {
+        const host = this._host?.nativeElement
+            ?? this._el?.nativeElement
+            ?? this.el?.nativeElement
+            ?? this.elementRef?.nativeElement
+            ?? null;
+        if (!host)
+            return this.list?.length ?? 0;
+        const children = Array.from(host.children);
+        const y = ev.clientY;
+        for (let i = 0; i < children.length; i++) {
+            const rect = children[i].getBoundingClientRect();
+            const midY = rect.top + rect.height / 2;
+            if (y < midY)
+                return i;
+        }
+        return children.length;
+    }
+    // Evaluate the guard safely
+    _allowDrop(payload) {
+        const guard = this.dndCanDrop;
+        if (typeof guard === 'boolean')
+            return guard;
+        try {
+            return guard ? !!guard(payload) : true;
+        }
+        catch {
+            return false;
+        }
+    }
+    // Extract your existing onDrop logic into a single method:
+    performDrop(ev) {
+        const session = this.getSession(ev);
+        if (!session)
+            return;
+        const dstIndex = this._computeDropIndex(ev);
+        // Guard check (block drop if not allowed)
+        const payload = this._buildGuardPayload(dstIndex);
+        if (!this._allowDrop(payload)) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this._denied = true; // cosmetic: adds .ngb-dnd-denied for styling
+            return; // ⛔ do not mutate arrays
+        }
+        this._denied = false;
+        // ❗ block cycles: don't allow dropping an item into its own descendants
+        if (this.isDroppingIntoOwnDescendant(session.item, this.list)) {
+            // optional: visual/aural feedback
+            this.state.announce?.(this.state.i18n.cannotDropHere());
+            this.removePlaceholder();
+            this.lastIndex = -1;
+            return;
+        }
+        const targetIndex = this.lastIndex < 0 ? this.list.length : this.lastIndex;
+        const fromList = session.fromList ?? undefined;
+        const fromIndex = session.fromIndex ?? -1;
+        const sameList = fromList === this.list;
+        const isExternal = session.fromIsPalette === true || !fromList || fromIndex === -1;
+        // ✅ External (palette): always transform/clone into canvas, and DO NOT remove from source.
+        // ✅ Canvas↔Canvas: move by default; if you want to clone across canvas, set dndCloneOnDrop=true.
+        const shouldCloneAcrossCanvas = this.dndCloneOnDrop && !sameList && !isExternal;
+        const itemToInsert = isExternal
+            ? this.cloneItem(session.item) // transform palette item to Panel
+            : (shouldCloneAcrossCanvas ? this.cloneItem(session.item) : session.item);
+        // Remove from source ONLY for real moves within canvas
+        if (!isExternal && !shouldCloneAcrossCanvas && fromIndex > -1) {
+            fromList.splice(fromIndex, 1);
+        }
+        // adjust index when reordering within same list and moving forward
+        const insertAt = sameList && fromIndex > -1 && targetIndex > fromIndex
+            ? targetIndex - 1
+            : targetIndex;
+        this.list.splice(insertAt, 0, itemToInsert);
+        this.removePlaceholder();
+        this.lastIndex = -1;
+        this.dndDropped.emit({
+            item: itemToInsert,
+            fromIndex,
+            toIndex: insertAt,
+            fromList: fromList ?? [],
+            toList: this.list,
+            sameList
+        });
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbDndListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbDndList]',
+                    standalone: true
+                }]
+        }], propDecorators: { dndChildrenKey: [{
+                type: Input
+            }], list: [{
+                type: Input,
+                args: ['ngbDndList']
+            }], dndGroup: [{
+                type: Input
+            }], dndDisabled: [{
+                type: Input
+            }], dndCloneOnDrop: [{
+                type: Input
+            }], dndCloneFn: [{
+                type: Input
+            }], dndIsPalette: [{
+                type: Input
+            }], dndCanDrop: [{
+                type: Input
+            }], denied: [{
+                type: HostBinding,
+                args: ['class.ngb-dnd-denied']
+            }], dndAriaLabel: [{
+                type: Input
+            }], ariaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], dndDropped: [{
+                type: Output
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.ngb-dnd-list']
+            }], isOver: [{
+                type: HostBinding,
+                args: ['class.ngb-dnd-over']
+            }], dataDropValid: [{
+                type: HostBinding,
+                args: ['attr.data-drop-valid']
+            }], onDragEnter: [{
+                type: HostListener,
+                args: ['dragenter', ['$event']]
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], onDocumentDrop: [{
+                type: HostListener,
+                args: ['document:drop', ['$event']]
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
+class NgbDndItemDirective {
+    parentList;
+    el = inject((ElementRef));
+    state = inject(NgbDndState);
+    constructor(parentList) {
+        this.parentList = parentList;
+    }
+    /** required: the value carried by this row/panel */
+    item;
+    /** optional: constrain cross-list drops */
+    dndGroup;
+    /** index inside its parent list (bind to *ngFor index) */
+    dndIndex;
+    dndDisabled = false;
+    dndDragStart = new EventEmitter();
+    dndDragEnd = new EventEmitter();
+    get draggable() { return !this.dndDisabled; }
+    dragging = false;
+    get ariaGrabbed() { return this.dragging ? 'true' : 'false'; }
+    role = 'listitem';
+    tabIndex = 0; // keyboard focusable
+    sessionId = null;
+    onDragStart(ev) {
+        if (this.dndDisabled || this.item == null) {
+            ev.preventDefault();
+            return;
+        }
+        this.sessionId = this.state.createSession({
+            item: this.item,
+            group: this.dndGroup ?? this.parentList?.dndGroup,
+            fromList: this.parentList?.list,
+            fromIndex: this.dndIndex,
+            fromIsPalette: this.parentList?.dndIsPalette === true
+        });
+        // ✅ set both a custom and a plain text payload; keep plain text non-empty
+        ev.dataTransfer?.setData('text/ngb-dnd', this.sessionId);
+        ev.dataTransfer?.setData('text/plain', 'ngb'); // some browsers require non-empty
+        if (ev.dataTransfer)
+            ev.dataTransfer.effectAllowed = 'copyMove';
+        ev.dataTransfer?.setDragImage(this.el.nativeElement, 16, 16);
+        this.dragging = true;
+        this.dndDragStart.emit(this.item);
+    }
+    onDragEnd() {
+        this.dragging = false;
+        this.state.clear(this.sessionId);
+        this.sessionId = null;
+        this.dndDragEnd.emit();
+    }
+    onKeydown(ev) {
+        if (this.dndDisabled)
+            return;
+        // start dragging (keyboard mode)
+        if (ev.code === 'Space' && !this.dragging) {
+            ev.preventDefault();
+            this.onDragStart(new DragEvent('dragstart')); // reuse logic
+            return;
+        }
+        if (!this.dragging)
+            return;
+        // move within same list
+        const parent = this.parentList;
+        if (!parent || typeof this.dndIndex !== 'number')
+            return;
+        if (ev.code === 'ArrowUp' || ev.code === 'ArrowDown') {
+            ev.preventDefault();
+            const list = parent.list;
+            const from = this.dndIndex;
+            let to = ev.code === 'ArrowUp' ? from - 1 : from + 1;
+            to = Math.max(0, Math.min(list.length - 1, to));
+            if (to !== from) {
+                const [it] = list.splice(from, 1);
+                list.splice(to, 0, it);
+                this.dndIndex = to;
+                // announce (see live region below)
+                this.state.announce?.(this.state.i18n.moveToIndex(to + 1, list.length));
+            }
+        }
+        if (ev.code === 'Enter') {
+            ev.preventDefault();
+            this.onDragEnd();
+        } // drop
+        if (ev.code === 'Escape') {
+            ev.preventDefault();
+            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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbDndItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbDndItem]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: NgbDndListDirective, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { item: [{
+                type: Input,
+                args: ['ngbDndItem']
+            }], dndGroup: [{
+                type: Input
+            }], dndIndex: [{
+                type: Input
+            }], dndDisabled: [{
+                type: Input
+            }], dndDragStart: [{
+                type: Output
+            }], dndDragEnd: [{
+                type: Output
+            }], draggable: [{
+                type: HostBinding,
+                args: ['attr.draggable']
+            }], dragging: [{
+                type: HostBinding,
+                args: ['class.ngb-dnd-dragging']
+            }], ariaGrabbed: [{
+                type: HostBinding,
+                args: ['attr.aria-grabbed']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], onDragStart: [{
+                type: HostListener,
+                args: ['dragstart', ['$event']]
+            }], onDragEnd: [{
+                type: HostListener,
+                args: ['dragend']
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class NgbStepLabelDirective {
+    template;
+    for;
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbStepLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbStepLabel]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { for: [{
+                type: Input,
+                args: ['ngbStepLabel']
+            }] } });
+
+class NgbStepperComponent {
+    /** Steps definition */
+    steps = [];
+    /** Orientation of the stepper */
+    orientation = 'horizontal';
+    /** Position of labels around the indicator */
+    labelPosition = 'right';
+    /** Position of content relative to header (horizontal only) */
+    contentPosition = 'bottom';
+    /** Allow navigating back to previous steps by clicking header */
+    allowRevisit = true;
+    /** Enable lazy loading of step content (default true) */
+    lazy = true;
+    /** Theme keyword (only CSS classes, no external deps) */
+    theme = 'bootstrap';
+    /** Whether to apply responsive helper class */
+    responsive = true;
+    /** Disable transition / animation helpers */
+    disableAnimation = false;
+    /** Animation duration (ms) for step transitions when enabled */
+    animationDuration = 150;
+    /** Label strings (for i18n) */
+    nextLabel = 'Next';
+    previousLabel = 'Previous';
+    resetLabel = 'Reset';
+    cancelLabel = 'Cancel';
+    optionalLabel = 'Optional';
+    /** Custom mapping from state -> icon text */
+    stateIcons = {
+        number: '#',
+        done: '✓',
+        active: '•',
+        error: '!',
+        disabled: '×',
+    };
+    /** Current selected index */
+    selectedIndex = 0;
+    /** Emits when selectedIndex changes (programmatically or by user) */
+    selectedIndexChange = new EventEmitter();
+    /** Emits when selection changes with rich event */
+    selectionChange = new EventEmitter();
+    /** Navigation events */
+    nextClicked = new EventEmitter();
+    prevClicked = new EventEmitter();
+    resetClicked = new EventEmitter();
+    cancelClicked = new EventEmitter();
+    /** Custom label template (applied for all steps) */
+    stepLabelTplDir;
+    /** Custom icon template for step indicator */
+    customIconTpl;
+    /** Content template; user will typically use <ng-template #stepContent ...> */
+    stepContentTpl;
+    /** Track which steps have been visited */
+    visited = new Set();
+    /** Used when allowRevisit=false to block earlier steps */
+    visitedFrom = 0;
+    ngAfterContentInit() {
+        if (this.selectedIndex < 0)
+            this.selectedIndex = 0;
+        if (this.selectedIndex > this.steps.length - 1 && this.steps.length > 0) {
+            this.selectedIndex = this.steps.length - 1;
+        }
+        this.markVisited(this.selectedIndex);
+    }
+    get stepLabelTpl() {
+        return this.stepLabelTplDir?.template ?? null;
+    }
+    get labelPositionClass() {
+        switch (this.labelPosition) {
+            case 'top':
+                return 'ngb-stepper-label-top';
+            case 'bottom':
+                return 'ngb-stepper-label-bottom';
+            case 'left':
+                return 'ngb-stepper-label-left';
+            default:
+                return 'ngb-stepper-label-right';
+        }
+    }
+    get currentErrorMessage() {
+        const step = this.steps[this.selectedIndex];
+        return step?.errorMessage ?? null;
+    }
+    stepId(i) {
+        const s = this.steps[i];
+        const base = s?.id || `ngb-step-${i}`;
+        return `${base}-label`;
+    }
+    contentId(i) {
+        const s = this.steps[i];
+        const base = s?.id || `ngb-step-${i}`;
+        return `${base}-content`;
+    }
+    markVisited(i) {
+        this.visited.add(i);
+        this.visitedFrom = Math.max(this.visitedFrom, i);
+    }
+    stepState(i) {
+        const s = this.steps[i];
+        if (!s)
+            return 'number';
+        if (s.state)
+            return s.state;
+        if (this.isStepInError(i))
+            return 'error';
+        if (i === this.selectedIndex)
+            return 'active';
+        if (i < this.selectedIndex)
+            return 'done';
+        if (s.disabled)
+            return 'disabled';
+        return 'number';
+    }
+    isStepInError(i) {
+        const s = this.steps[i];
+        return !!s?.errorMessage && this.visited.has(i);
+    }
+    indicatorClass(i) {
+        const state = this.stepState(i);
+        return state;
+    }
+    defaultIconForState(state, index) {
+        if (state === 'number') {
+            return String(index + 1);
+        }
+        return this.stateIcons[state] ?? this.stateIcons['number'] ?? String(index + 1);
+    }
+    onHeaderClick(i) {
+        if (i === this.selectedIndex)
+            return;
+        const step = this.steps[i];
+        if (!step || step.disabled)
+            return;
+        if (!this.allowRevisit && i < this.visitedFrom)
+            return;
+        this.changeIndex(i);
+    }
+    onHeaderKeydown(event, i) {
+        event.preventDefault();
+        this.onHeaderClick(i);
+    }
+    next() {
+        const target = Math.min(this.steps.length - 1, this.selectedIndex + 1);
+        if (target === this.selectedIndex)
+            return;
+        this.nextClicked.emit(target);
+        this.changeIndex(target);
+    }
+    prev() {
+        if (!this.allowRevisit)
+            return;
+        const target = Math.max(0, this.selectedIndex - 1);
+        if (target === this.selectedIndex)
+            return;
+        this.prevClicked.emit(target);
+        this.changeIndex(target);
+    }
+    onReset() {
+        this.resetClicked.emit();
+        this.selectedIndex = 0;
+        this.selectedIndexChange.emit(this.selectedIndex);
+        this.selectionChange.emit({
+            previousIndex: 0,
+            currentIndex: 0,
+            step: this.steps[0],
+        });
+        this.visited.clear();
+        this.visitedFrom = 0;
+        this.markVisited(0);
+    }
+    onCancel() {
+        this.cancelClicked.emit();
+    }
+    changeIndex(nextIndex) {
+        const prev = this.selectedIndex;
+        this.selectedIndex = nextIndex;
+        this.markVisited(nextIndex);
+        this.selectedIndexChange.emit(this.selectedIndex);
+        this.selectionChange.emit({
+            previousIndex: prev,
+            currentIndex: nextIndex,
+            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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", 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: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }], labelPosition: [{
+                type: Input
+            }], contentPosition: [{
+                type: Input
+            }], allowRevisit: [{
+                type: Input
+            }], lazy: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], responsive: [{
+                type: Input
+            }], disableAnimation: [{
+                type: Input
+            }], animationDuration: [{
+                type: Input
+            }], nextLabel: [{
+                type: Input
+            }], previousLabel: [{
+                type: Input
+            }], resetLabel: [{
+                type: Input
+            }], cancelLabel: [{
+                type: Input
+            }], optionalLabel: [{
+                type: Input
+            }], stateIcons: [{
+                type: Input
+            }], selectedIndex: [{
+                type: Input
+            }], selectedIndexChange: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }], nextClicked: [{
+                type: Output
+            }], prevClicked: [{
+                type: Output
+            }], resetClicked: [{
+                type: Output
+            }], cancelClicked: [{
+                type: Output
+            }], stepLabelTplDir: [{
+                type: ContentChild,
+                args: [NgbStepLabelDirective]
+            }], customIconTpl: [{
+                type: ContentChild,
+                args: ['ngbStepperIcon', { read: TemplateRef }]
+            }], stepContentTpl: [{
+                type: ContentChild,
+                args: ['stepContent', { read: TemplateRef }]
+            }] } });
+
+class NgbSplitterPaneComponent {
+    templateRef;
+    size;
+    min;
+    max;
+    collapsible = false;
+    collapsed = false;
+    collapsedChange = new EventEmitter();
+    toggleCollapsed(next) {
+        const value = next ?? !this.collapsed;
+        if (value !== this.collapsed) {
+            this.collapsed = value;
+            this.collapsedChange.emit(this.collapsed);
+        }
+    }
+    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", collapsible: "collapsible", collapsed: "collapsed" }, outputs: { collapsedChange: "collapsedChange" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["paneTpl"], descendants: true, static: true }], ngImport: i0, template: `<ng-template #paneTpl><ng-content></ng-content></ng-template>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbSplitterPaneComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngb-splitter-pane',
+                    standalone: true,
+                    template: `<ng-template #paneTpl><ng-content></ng-content></ng-template>`,
+                }]
+        }], propDecorators: { templateRef: [{
+                type: ViewChild,
+                args: ['paneTpl', { static: true }]
+            }], size: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], collapsible: [{
+                type: Input
+            }], collapsed: [{
+                type: Input
+            }], collapsedChange: [{
+                type: Output
+            }] } });
+
+class NgbSplitterComponent {
+    panes;
+    container;
+    orientation = 'horizontal';
+    handleThickness = 12;
+    paneStates = [];
+    resizeSub;
+    currentDrag;
+    ngAfterContentInit() {
+        this.initStates();
+        this.panes.changes.subscribe(() => this.initStates());
+    }
+    ngOnChanges(changes) {
+        if (changes['orientation'] && !changes['orientation'].firstChange) {
+            this.initStates();
+        }
+    }
+    ngOnDestroy() {
+        this.detachDragListeners();
+    }
+    onWindowResize() {
+        this.initStates();
+    }
+    startResize(index, event) {
+        event.preventDefault();
+        const total = this.getContainerSize();
+        const sizes = this.computePaneSizes(total);
+        this.currentDrag = {
+            index,
+            startPos: this.pointerPosition(event),
+            startSizes: [sizes[index], sizes[index + 1]],
+        };
+        const move = (e) => this.onDrag(e);
+        const up = () => this.stopDrag();
+        document.addEventListener('mousemove', move);
+        document.addEventListener('mouseup', up, { once: true });
+        this.resizeSub = { move, up };
+    }
+    onHandleKeydown(index, event) {
+        const isHorizontal = this.orientation === 'horizontal';
+        const delta = this.handleThickness;
+        if ((isHorizontal && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) ||
+            (!isHorizontal && (event.key === 'ArrowUp' || event.key === 'ArrowDown'))) {
+            event.preventDefault();
+            const direction = event.key === 'ArrowLeft' || event.key === 'ArrowUp' ? -1 : 1;
+            this.adjustPaneSizes(index, delta * direction);
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.toggleFromHandle(index);
+        }
+    }
+    toggleFromHandle(index) {
+        const panesArray = this.panes.toArray();
+        const target = panesArray[index].collapsible ? panesArray[index] : panesArray[index + 1];
+        if (target?.collapsible) {
+            target.toggleCollapsed();
+            this.initStates();
+        }
+    }
+    onDrag(event) {
+        if (!this.currentDrag) {
+            return;
+        }
+        event.preventDefault();
+        const delta = this.pointerPosition(event) - this.currentDrag.startPos;
+        this.adjustPaneSizes(this.currentDrag.index, delta, this.currentDrag.startSizes);
+    }
+    stopDrag() {
+        this.detachDragListeners();
+        this.currentDrag = undefined;
+    }
+    adjustPaneSizes(index, delta, startSizes) {
+        const total = this.getContainerSize();
+        const sizes = startSizes ?? this.computePaneSizes(total);
+        const panesArray = this.panes.toArray();
+        const first = panesArray[index];
+        const second = panesArray[index + 1];
+        if (first.collapsed || second.collapsed) {
+            return;
+        }
+        let firstSize = sizes[0] + delta;
+        let secondSize = sizes[1] - delta;
+        const firstLimits = this.getLimits(first, total);
+        const secondLimits = this.getLimits(second, total);
+        firstSize = this.clamp(firstSize, firstLimits.minPx, firstLimits.maxPx);
+        secondSize = this.clamp(secondSize, secondLimits.minPx, secondLimits.maxPx);
+        if (firstSize + secondSize > 0) {
+            this.paneStates[index].sizePx = firstSize;
+            this.paneStates[index + 1].sizePx = secondSize;
+        }
+    }
+    initStates() {
+        const total = this.getContainerSize();
+        const sizes = this.computePaneSizes(total);
+        const panesArray = this.panes.toArray();
+        this.paneStates = panesArray.map((pane, idx) => {
+            const limits = this.getLimits(pane, total);
+            return {
+                id: `ngb-splitter-pane-${idx}`,
+                sizePx: pane.collapsed ? 0 : sizes[idx],
+                minPx: limits.minPx,
+                maxPx: limits.maxPx,
+            };
+        });
+    }
+    computePaneSizes(total) {
+        const panesArray = this.panes?.toArray() ?? [];
+        if (!panesArray.length)
+            return [];
+        const resolved = panesArray.map((pane) => pane.collapsed ? 0 : this.resolveSize(pane.size, total));
+        const specifiedTotal = resolved.reduce((sum, val) => sum + (val ?? 0), 0);
+        const unspecified = resolved.filter((v) => v == null).length;
+        const remaining = Math.max(total - specifiedTotal, 0);
+        const autoSize = unspecified > 0 ? remaining / unspecified : 0;
+        return resolved.map((val) => {
+            if (val != null) {
+                return val;
+            }
+            if (autoSize) {
+                return autoSize;
+            }
+            return total / panesArray.length;
+        });
+    }
+    resolveSize(value, total) {
+        if (!value)
+            return undefined;
+        const trimmed = value.trim();
+        if (trimmed.endsWith('%')) {
+            const pct = Number.parseFloat(trimmed.slice(0, -1));
+            return (pct / 100) * total;
+        }
+        if (trimmed.endsWith('px')) {
+            return Number.parseFloat(trimmed.replace('px', ''));
+        }
+        const asNumber = Number.parseFloat(trimmed);
+        return Number.isFinite(asNumber) ? asNumber : undefined;
+    }
+    getLimits(pane, total) {
+        return {
+            minPx: pane.collapsed ? 0 : this.resolveSize(pane.min, total),
+            maxPx: pane.collapsed ? 0 : this.resolveSize(pane.max, total),
+        };
+    }
+    clamp(value, min, max) {
+        let next = value;
+        if (min != null)
+            next = Math.max(min, next);
+        if (max != null)
+            next = Math.min(max, next);
+        return next;
+    }
+    pointerPosition(event) {
+        return this.orientation === 'horizontal' ? event.clientX : event.clientY;
+    }
+    getContainerSize() {
+        const rect = this.container?.nativeElement.getBoundingClientRect();
+        return rect && this.orientation === 'horizontal' ? rect.width : rect?.height || 0;
+    }
+    detachDragListeners() {
+        if (this.resizeSub) {
+            document.removeEventListener('mousemove', this.resizeSub.move);
+            document.removeEventListener('mouseup', this.resizeSub.up);
+            this.resizeSub = undefined;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbSplitterComponent, deps: [], 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" }, host: { listeners: { "window:resize": "onWindowResize()" } }, queries: [{ propertyName: "panes", predicate: NgbSplitterPaneComponent }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div
+      #container
+      class="d-flex"
+      [class.flex-row]="orientation === 'horizontal'"
+      [class.flex-column]="orientation === 'vertical'"
+      role="group"
+    >
+      <ng-container *ngFor="let pane of panes.toArray(); let i = index">
+        <div
+          class="d-flex flex-column overflow-auto"
+          [attr.data-pane-id]="paneStates[i]?.id"
+          [class.d-none]="pane.collapsed"
+          [style.flex-basis.px]="paneStates[i]?.sizePx"
+          [style.min-width.px]="orientation === 'horizontal' ? paneStates[i]?.minPx : undefined"
+          [style.max-width.px]="orientation === 'horizontal' ? paneStates[i]?.maxPx : undefined"
+          [style.min-height.px]="orientation === 'vertical' ? paneStates[i]?.minPx : undefined"
+          [style.max-height.px]="orientation === 'vertical' ? paneStates[i]?.maxPx : undefined"
+        >
+          <ng-container *ngTemplateOutlet="pane.templateRef"></ng-container>
+        </div>
+
+        <button
+          *ngIf="i < panes.length - 1"
+          type="button"
+          class="bg-transparent border-0 p-0 d-flex align-items-center justify-content-center"
+          [style.width.px]="orientation === 'horizontal' ? handleThickness : undefined"
+          [style.height.px]="orientation === 'vertical' ? handleThickness : undefined"
+          [class.w-100]="orientation === 'vertical'"
+          [class.h-100]="orientation === 'horizontal'"
+          role="separator"
+          [attr.aria-orientation]="orientation"
+          [attr.aria-controls]="paneStates[i]?.id + ' ' + paneStates[i + 1]?.id"
+          tabindex="0"
+          (mousedown)="startResize(i, $event)"
+          (keydown)="onHandleKeydown(i, $event)"
+          (dblclick)="toggleFromHandle(i)"
+          aria-label="Splitter resize handle"
+        >
+          <span class="border bg-light" [style.width.px]="orientation === 'horizontal' ? 2 : handleThickness" [style.height.px]="orientation === 'vertical' ? 2 : handleThickness"></span>
+        </button>
+      </ng-container>
+    </div>
+  `, 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"] }, { 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: [{
+            type: Component,
+            args: [{
+                    selector: 'ngb-splitter',
+                    standalone: true,
+                    imports: [CommonModule, NgbSplitterPaneComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div
+      #container
+      class="d-flex"
+      [class.flex-row]="orientation === 'horizontal'"
+      [class.flex-column]="orientation === 'vertical'"
+      role="group"
+    >
+      <ng-container *ngFor="let pane of panes.toArray(); let i = index">
+        <div
+          class="d-flex flex-column overflow-auto"
+          [attr.data-pane-id]="paneStates[i]?.id"
+          [class.d-none]="pane.collapsed"
+          [style.flex-basis.px]="paneStates[i]?.sizePx"
+          [style.min-width.px]="orientation === 'horizontal' ? paneStates[i]?.minPx : undefined"
+          [style.max-width.px]="orientation === 'horizontal' ? paneStates[i]?.maxPx : undefined"
+          [style.min-height.px]="orientation === 'vertical' ? paneStates[i]?.minPx : undefined"
+          [style.max-height.px]="orientation === 'vertical' ? paneStates[i]?.maxPx : undefined"
+        >
+          <ng-container *ngTemplateOutlet="pane.templateRef"></ng-container>
+        </div>
+
+        <button
+          *ngIf="i < panes.length - 1"
+          type="button"
+          class="bg-transparent border-0 p-0 d-flex align-items-center justify-content-center"
+          [style.width.px]="orientation === 'horizontal' ? handleThickness : undefined"
+          [style.height.px]="orientation === 'vertical' ? handleThickness : undefined"
+          [class.w-100]="orientation === 'vertical'"
+          [class.h-100]="orientation === 'horizontal'"
+          role="separator"
+          [attr.aria-orientation]="orientation"
+          [attr.aria-controls]="paneStates[i]?.id + ' ' + paneStates[i + 1]?.id"
+          tabindex="0"
+          (mousedown)="startResize(i, $event)"
+          (keydown)="onHandleKeydown(i, $event)"
+          (dblclick)="toggleFromHandle(i)"
+          aria-label="Splitter resize handle"
+        >
+          <span class="border bg-light" [style.width.px]="orientation === 'horizontal' ? 2 : handleThickness" [style.height.px]="orientation === 'vertical' ? 2 : handleThickness"></span>
+        </button>
+      </ng-container>
+    </div>
+  `,
+                }]
+        }], propDecorators: { panes: [{
+                type: ContentChildren,
+                args: [NgbSplitterPaneComponent]
+            }], container: [{
+                type: ViewChild,
+                args: ['container', { static: true }]
+            }], orientation: [{
+                type: Input
+            }], handleThickness: [{
+                type: Input
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+class NgbTypeaheadComponent {
+    data = [];
+    debounceTime = 200;
+    characterTyped = 1;
+    limit = 10;
+    selectExact = false;
+    multiSelect = false;
+    i18n;
+    itemTemplate;
+    selectedItems = new EventEmitter();
+    selectionChange = new EventEmitter();
+    onChange = new EventEmitter();
+    onScrollEvent = new EventEmitter();
+    scroller;
+    inputEl;
+    itemButtons;
+    query = '';
+    filtered = [];
+    visible = [];
+    selected = [];
+    viewportHeight = 240;
+    itemHeight = 40;
+    beforePadding = 0;
+    afterPadding = 0;
+    debounceId;
+    ngAfterViewInit() {
+        this.applyFilter('');
+    }
+    ngOnChanges(changes) {
+        if (changes['data'] && !changes['data'].firstChange) {
+            this.applyFilter(this.query);
+        }
+    }
+    ngOnDestroy() {
+        if (this.debounceId) {
+            clearTimeout(this.debounceId);
+        }
+    }
+    get selectionSummary() {
+        if (!this.selected.length)
+            return '';
+        if (this.selected.length <= 2) {
+            return this.selected.map((s) => s.label).join(', ');
+        }
+        const firstTwo = this.selected.slice(0, 2).map((s) => s.label).join(', ');
+        return `${firstTwo} (+${this.selected.length - 2})`;
+    }
+    onInput(value) {
+        this.query = value;
+        this.onChange.emit(value);
+        if (this.debounceId)
+            clearTimeout(this.debounceId);
+        if (this.debounceTime <= 0) {
+            this.applyFilter(value);
+        }
+        else {
+            this.debounceId = setTimeout(() => this.applyFilter(value), this.debounceTime);
+        }
+    }
+    onKeydown(event) {
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.focusSibling(event.key === 'ArrowDown' ? 1 : -1);
+        }
+        else if (event.key === 'Enter') {
+            event.preventDefault();
+            const first = this.visible[0];
+            if (first)
+                this.selectItem(first);
+        }
+    }
+    onScroll(event) {
+        const target = event.target;
+        const scrollTop = target.scrollTop;
+        this.onScrollEvent.emit();
+        this.updateViewport(scrollTop);
+    }
+    selectItem(item) {
+        if (!item || item.disabled)
+            return;
+        this.validateItem(item);
+        if (this.multiSelect) {
+            const exists = this.selected.find((s) => s.id === item.id);
+            if (exists) {
+                this.selected = this.selected.filter((s) => s.id !== item.id);
+            }
+            else {
+                this.selected = [...this.selected, item];
+            }
+        }
+        else {
+            this.selected = [item];
+        }
+        this.selectedItems.emit(this.selected);
+        this.selectionChange.emit(this.selected);
+    }
+    clearSelection() {
+        this.selected = [];
+        this.selectedItems.emit(this.selected);
+        this.selectionChange.emit(this.selected);
+    }
+    isSelected(item) {
+        return this.selected.some((s) => s.id === item.id);
+    }
+    trackById = (_, item) => item.id;
+    applyFilter(value) {
+        const term = (value || '').toLowerCase();
+        const meetsThreshold = term.length >= this.characterTyped;
+        const base = meetsThreshold ? this.data.filter((d) => (d.label || '').toLowerCase().includes(term)) : [];
+        const limited = this.limit ? base.slice(0, this.limit) : base;
+        this.filtered = limited;
+        if (this.selectExact && limited.length === 1) {
+            this.selectItem(limited[0]);
+        }
+        this.updateViewport(this.scroller?.nativeElement.scrollTop || 0);
+    }
+    updateViewport(scrollTop) {
+        const total = this.filtered.length;
+        const visibleCount = Math.ceil(this.viewportHeight / this.itemHeight) + 2;
+        const start = Math.max(Math.floor(scrollTop / this.itemHeight), 0);
+        const end = Math.min(start + visibleCount, total);
+        this.beforePadding = start * this.itemHeight;
+        this.afterPadding = Math.max(total - end, 0) * this.itemHeight;
+        this.visible = this.filtered.slice(start, end);
+    }
+    focusSibling(direction) {
+        const buttons = this.scroller?.nativeElement.querySelectorAll('button.list-group-item');
+        if (!buttons || buttons.length === 0)
+            return;
+        const active = document.activeElement;
+        const index = Array.prototype.indexOf.call(buttons, active);
+        const next = buttons[index + direction] || buttons[(index + direction + buttons.length) % buttons.length];
+        next?.focus();
+    }
+    validateItem(item) {
+        if (this.itemTemplate) {
+            if (item.id == null || (item.value == null && item.value !== 0)) {
+                throw new Error('Custom templates require items to provide both id and value.');
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbTypeaheadComponent, deps: [], 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", i18n: "i18n" }, outputs: { selectedItems: "selectedItems", selectionChange: "selectionChange", onChange: "onChange", onScrollEvent: "onScrollEvent" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, static: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, static: true }, { propertyName: "itemButtons", predicate: ["itemButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div class="mb-2">
+      <input
+        #inputEl
+        type="text"
+        class="form-control"
+        [attr.placeholder]="i18n?.placeholder || 'Type to search'"
+        [ngModel]="query"
+        (ngModelChange)="onInput($event)"
+        (keydown)="onKeydown($event)"
+        aria-autocomplete="list"
+        role="combobox"
+        [attr.aria-expanded]="filtered.length > 0"
+      />
+    </div>
+
+    <div
+      #scroller
+      class="border rounded list-group"
+      style="max-height: 240px; overflow: auto;"
+      role="listbox"
+      (scroll)="onScroll($event)"
+    >
+      <div [style.height.px]="beforePadding"></div>
+      <button
+        *ngFor="let item of visible; trackBy: trackById"
+        type="button"
+        class="list-group-item list-group-item-action d-flex align-items-center justify-content-between"
+        [class.active]="isSelected(item)"
+        [attr.aria-selected]="isSelected(item)"
+        (click)="selectItem(item)"
+        [disabled]="item.disabled"
+      >
+        <ng-container *ngIf="itemTemplate; else defaultTpl" [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
+        <ng-template #defaultTpl>
+          <span>{{ item.label }}</span>
+          <span *ngIf="multiSelect && isSelected(item)" class="badge bg-secondary">✓</span>
+        </ng-template>
+      </button>
+      <div [style.height.px]="afterPadding"></div>
+
+      <div *ngIf="!filtered.length" class="list-group-item text-muted text-center">
+        {{ i18n?.noResults || 'No results' }}
+      </div>
+    </div>
+
+    <div *ngIf="multiSelect && selected.length" class="mt-2 small text-muted">
+      {{ selectionSummary }}
+      <button type="button" class="btn btn-link btn-sm ps-1" (click)="clearSelection()">
+        {{ i18n?.clearSelection || 'Clear' }}
+      </button>
+    </div>
+  `, 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"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgbTypeaheadComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngb-typeahead',
+                    standalone: true,
+                    imports: [CommonModule, FormsModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div class="mb-2">
+      <input
+        #inputEl
+        type="text"
+        class="form-control"
+        [attr.placeholder]="i18n?.placeholder || 'Type to search'"
+        [ngModel]="query"
+        (ngModelChange)="onInput($event)"
+        (keydown)="onKeydown($event)"
+        aria-autocomplete="list"
+        role="combobox"
+        [attr.aria-expanded]="filtered.length > 0"
+      />
+    </div>
+
+    <div
+      #scroller
+      class="border rounded list-group"
+      style="max-height: 240px; overflow: auto;"
+      role="listbox"
+      (scroll)="onScroll($event)"
+    >
+      <div [style.height.px]="beforePadding"></div>
+      <button
+        *ngFor="let item of visible; trackBy: trackById"
+        type="button"
+        class="list-group-item list-group-item-action d-flex align-items-center justify-content-between"
+        [class.active]="isSelected(item)"
+        [attr.aria-selected]="isSelected(item)"
+        (click)="selectItem(item)"
+        [disabled]="item.disabled"
+      >
+        <ng-container *ngIf="itemTemplate; else defaultTpl" [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
+        <ng-template #defaultTpl>
+          <span>{{ item.label }}</span>
+          <span *ngIf="multiSelect && isSelected(item)" class="badge bg-secondary">✓</span>
+        </ng-template>
+      </button>
+      <div [style.height.px]="afterPadding"></div>
+
+      <div *ngIf="!filtered.length" class="list-group-item text-muted text-center">
+        {{ i18n?.noResults || 'No results' }}
+      </div>
+    </div>
+
+    <div *ngIf="multiSelect && selected.length" class="mt-2 small text-muted">
+      {{ selectionSummary }}
+      <button type="button" class="btn btn-link btn-sm ps-1" (click)="clearSelection()">
+        {{ i18n?.clearSelection || 'Clear' }}
+      </button>
+    </div>
+  `,
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], debounceTime: [{
+                type: Input
+            }], characterTyped: [{
+                type: Input
+            }], limit: [{
+                type: Input
+            }], selectExact: [{
+                type: Input
+            }], multiSelect: [{
+                type: Input
+            }], i18n: [{
+                type: Input
+            }], itemTemplate: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }], selectedItems: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }], onChange: [{
+                type: Output
+            }], onScrollEvent: [{
+                type: Output
+            }], scroller: [{
+                type: ViewChild,
+                args: ['scroller', { static: true }]
+            }], inputEl: [{
+                type: ViewChild,
+                args: ['inputEl', { static: true }]
+            }], itemButtons: [{
+                type: ViewChildren,
+                args: ['itemButton']
+            }] } });
+
+class NgbTreeComponent {
+    nodes = [];
+    type = 'text';
+    showCheckbox = false;
+    i18n;
+    expand = new EventEmitter();
+    collapse = new EventEmitter();
+    expandAll = new EventEmitter();
+    collapseAll = new EventEmitter();
+    selectionChange = new EventEmitter();
+    nodeButtons;
+    trackById = (_, node) => node.id;
+    hasChildren(node) {
+        return Array.isArray(node.children) && node.children.length > 0;
+    }
+    toggleNode(node) {
+        if (!this.hasChildren(node))
+            return;
+        node.expanded = !node.expanded;
+        node.expanded ? this.expand.emit(node) : this.collapse.emit(node);
+    }
+    toggleSelection(node, value) {
+        node.selected = value;
+        this.selectionChange.emit(this.collectSelection(this.nodes));
+    }
+    expandAllNodes() {
+        this.setExpanded(this.nodes, true);
+        this.expandAll.emit();
+    }
+    collapseAllNodes() {
+        this.setExpanded(this.nodes, false);
+        this.collapseAll.emit();
+    }
+    onNodeKeydown(event, node) {
+        const key = event.key;
+        const target = event.target;
+        if (key === 'Enter' || key === ' ') {
+            event.preventDefault();
+            this.toggleNode(node);
+        }
+        else if (key === 'ArrowRight') {
+            if (this.hasChildren(node) && !node.expanded) {
+                event.preventDefault();
+                node.expanded = true;
+                this.expand.emit(node);
+            }
+        }
+        else if (key === 'ArrowLeft') {
+            if (this.hasChildren(node) && node.expanded) {
+                event.preventDefault();
+                node.expanded = false;
+                this.collapse.emit(node);
+            }
+        }
+        else if (key === 'ArrowDown' || key === 'ArrowUp') {
+            event.preventDefault();
+            this.focusSibling(target, key === 'ArrowDown' ? 1 : -1);
+        }
+    }
+    focusSibling(current, direction) {
+        const buttons = this.nodeButtons?.toArray().map((b) => b.nativeElement) || [];
+        const idx = buttons.indexOf(current);
+        if (idx === -1)
+            return;
+        const next = buttons[idx + direction];
+        next?.focus();
+    }
+    setExpanded(nodes, expanded) {
+        for (const n of nodes) {
+            if (this.hasChildren(n)) {
+                n.expanded = expanded;
+                this.setExpanded(n.children || [], expanded);
+            }
+        }
+    }
+    collectSelection(nodes, acc = []) {
+        for (const n of nodes) {
+            if (n.selected)
+                acc.push(n);
+            if (this.hasChildren(n))
+                this.collectSelection(n.children, acc);
+        }
+        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" }, 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' }}
+      </button>
+      <button type="button" class="btn btn-sm btn-outline-secondary" (click)="collapseAllNodes()" [attr.aria-label]="i18n?.collapseAll || 'Collapse all'">
+        {{ i18n?.collapseAll || 'Collapse all' }}
+      </button>
+    </div>
+
+    <ul class="list-unstyled mb-0" role="tree" [attr.aria-label]="i18n?.treeLabel || 'Tree'">
+      <ng-container *ngFor="let node of nodes; let i = index; trackBy: trackById">
+        <ng-container *ngTemplateOutlet="renderNode; context: { $implicit: node, level: 1, index: i }"></ng-container>
+      </ng-container>
+    </ul>
+
+    <ng-template #renderNode let-node let-level="level" let-index="index">
+      <li
+        class="d-flex align-items-start"
+        role="treeitem"
+        [attr.aria-expanded]="hasChildren(node) ? !!node.expanded : null"
+        [attr.aria-level]="level"
+      >
+        <button
+          #nodeBtn
+          type="button"
+          class="btn btn-sm btn-link px-1"
+          [disabled]="!hasChildren(node)"
+          (click)="toggleNode(node)"
+          (keydown)="onNodeKeydown($event, node)"
+          [attr.aria-label]="(node.expanded ? i18n?.collapse || 'Collapse' : i18n?.expand || 'Expand') + ' ' + node.label"
+        >
+          <span *ngIf="hasChildren(node)">
+            <span *ngIf="type === 'json'">{{ node.expanded ? '-' : '+' }}</span>
+            <span *ngIf="type !== 'json'">{{ node.expanded ? '▾' : '▸' }}</span>
+          </span>
+          <span *ngIf="!hasChildren(node)" class="text-muted">•</span>
+        </button>
+
+        <label class="form-check d-inline-flex align-items-center gap-2 flex-grow-1 mb-0">
+          <input
+            *ngIf="showCheckbox"
+            type="checkbox"
+            class="form-check-input"
+            [checked]="!!node.selected"
+            [disabled]="node.disabled"
+            (change)="toggleSelection(node, $event.target.checked)"
+            [attr.aria-label]="(i18n?.select || 'Select') + ' ' + node.label"
+          />
+          <span class="form-check-label">{{ node.label }}</span>
+        </label>
+      </li>
+
+      <ul
+        *ngIf="node.expanded && hasChildren(node)"
+        class="list-unstyled ms-4"
+        role="group"
+      >
+        <ng-container *ngFor="let child of node.children; let ci = index; trackBy: trackById">
+          <ng-container *ngTemplateOutlet="renderNode; context: { $implicit: child, level: level + 1, index: ci }"></ng-container>
+        </ng-container>
+      </ul>
+    </ng-template>
+  `, 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"] }, { 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: [{
+            type: Component,
+            args: [{
+                    selector: 'ngb-tree',
+                    standalone: true,
+                    imports: [CommonModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    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' }}
+      </button>
+      <button type="button" class="btn btn-sm btn-outline-secondary" (click)="collapseAllNodes()" [attr.aria-label]="i18n?.collapseAll || 'Collapse all'">
+        {{ i18n?.collapseAll || 'Collapse all' }}
+      </button>
+    </div>
+
+    <ul class="list-unstyled mb-0" role="tree" [attr.aria-label]="i18n?.treeLabel || 'Tree'">
+      <ng-container *ngFor="let node of nodes; let i = index; trackBy: trackById">
+        <ng-container *ngTemplateOutlet="renderNode; context: { $implicit: node, level: 1, index: i }"></ng-container>
+      </ng-container>
+    </ul>
+
+    <ng-template #renderNode let-node let-level="level" let-index="index">
+      <li
+        class="d-flex align-items-start"
+        role="treeitem"
+        [attr.aria-expanded]="hasChildren(node) ? !!node.expanded : null"
+        [attr.aria-level]="level"
+      >
+        <button
+          #nodeBtn
+          type="button"
+          class="btn btn-sm btn-link px-1"
+          [disabled]="!hasChildren(node)"
+          (click)="toggleNode(node)"
+          (keydown)="onNodeKeydown($event, node)"
+          [attr.aria-label]="(node.expanded ? i18n?.collapse || 'Collapse' : i18n?.expand || 'Expand') + ' ' + node.label"
+        >
+          <span *ngIf="hasChildren(node)">
+            <span *ngIf="type === 'json'">{{ node.expanded ? '-' : '+' }}</span>
+            <span *ngIf="type !== 'json'">{{ node.expanded ? '▾' : '▸' }}</span>
+          </span>
+          <span *ngIf="!hasChildren(node)" class="text-muted">•</span>
+        </button>
+
+        <label class="form-check d-inline-flex align-items-center gap-2 flex-grow-1 mb-0">
+          <input
+            *ngIf="showCheckbox"
+            type="checkbox"
+            class="form-check-input"
+            [checked]="!!node.selected"
+            [disabled]="node.disabled"
+            (change)="toggleSelection(node, $event.target.checked)"
+            [attr.aria-label]="(i18n?.select || 'Select') + ' ' + node.label"
+          />
+          <span class="form-check-label">{{ node.label }}</span>
+        </label>
+      </li>
+
+      <ul
+        *ngIf="node.expanded && hasChildren(node)"
+        class="list-unstyled ms-4"
+        role="group"
+      >
+        <ng-container *ngFor="let child of node.children; let ci = index; trackBy: trackById">
+          <ng-container *ngTemplateOutlet="renderNode; context: { $implicit: child, level: level + 1, index: ci }"></ng-container>
+        </ng-container>
+      </ul>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { nodes: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], showCheckbox: [{
+                type: Input
+            }], i18n: [{
+                type: Input
+            }], expand: [{
+                type: Output
+            }], collapse: [{
+                type: Output
+            }], expandAll: [{
+                type: Output
+            }], collapseAll: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }], nodeButtons: [{
+                type: ViewChildren,
+                args: ['nodeBtn', { read: ElementRef }]
+            }] } });
+
+/// <reference path="./types/optional-peer-deps.d.ts" />
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DATAGRID_TEMPLATE_DIRECTIVES, DND_I18N, DND_LIVE_ANNOUNCE, Datagrid, ExcelExportAdapter, ExportButtonDirective, JsPdfAdapter, NgbCellTemplate, NgbDndItemDirective, NgbDndListDirective, NgbDndState, NgbEditorTemplate, NgbExportService, NgbFilterTemplate, NgbGlobalFilterTemplate, NgbLiveAnnouncer, NgbPaginationComponent, NgbRowDetailTemplate, NgbSplitterComponent, NgbStepLabelDirective, NgbStepperComponent, NgbTreeComponent, NgbTypeaheadComponent, PdfExportAdapter, XlsxAdapter, defaultDndI18n };
+//# sourceMappingURL=angular-bootstrap-ngbootstrap.mjs.map